/* Loader estable de la experiencia Nosotros.
 * El diseño original queda aislado en about-team-branches-core.css y la capa
 * de calidad comercial se aplica al final para evitar estirar fotografías. */
@import url("./about-team-branches-core.css");
@import url("./about-commercial-image-quality.css");
@import url("./about-team-cards-2026.css?v=20260819-2");
@import url("./about-team-card-polish.css?v=20260819-1");
@import url("./about-team-carousel.css?v=20260819-1");

/* --------------------------------------------------------------------------
   Hero Nosotros — corrección de composición y light mode
   --------------------------------------------------------------------------
   commercial-media-integration.css agrega un segundo fondo sobre el hero.
   En Nosotros ya existe un tratamiento fotográfico propio en __visual; dejar
   ambos activos genera doble fotografía, franjas oscuras y contraste roto.
*/
.ae-about-hero::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Light mode conserva la fotografía comercial, pero con una lectura editorial
   clara: texto oscuro sobre velo claro a la izquierda e imagen limpia a la
   derecha. El fondo usa cover para no dejar barras negras en pantallas anchas. */
html[data-theme="light"] .ae-about-hero {
    background: #f4f4f2 !important;
    color: #111214 !important;
}

html[data-theme="light"] .ae-about-hero__visual {
    background: #e7e8e5 !important;
}

html[data-theme="light"] .ae-about-hero__visual::after {
    content: none !important;
    display: none !important;
}

html[data-theme="light"] .ae-about-hero__visual::before {
    content: "" !important;
    display: block !important;
    inset: 0 !important;
    background-image:
        linear-gradient(
            90deg,
            rgba(247, 247, 244, .98) 0%,
            rgba(247, 247, 244, .95) 32%,
            rgba(247, 247, 244, .82) 50%,
            rgba(247, 247, 244, .42) 68%,
            rgba(247, 247, 244, .10) 88%,
            rgba(247, 247, 244, .04) 100%
        ),
        url("/images/comercial-hero.php?v=4") !important;
    background-position: center, center 48% !important;
    background-size: 100% 100%, cover !important;
    background-repeat: no-repeat !important;
    filter: none !important;
}

html[data-theme="light"] .ae-about-hero__copy {
    color: #111214 !important;
    text-shadow: none !important;
}

html[data-theme="light"] .ae-about-hero .ae-about-eyebrow {
    color: #646a71 !important;
}

html[data-theme="light"] .ae-about-hero .ae-about-eyebrow i {
    background: #8a8f95 !important;
}

html[data-theme="light"] .ae-about-hero h1 {
    color: #111214 !important;
    text-shadow: none !important;
}

html[data-theme="light"] .ae-about-hero__lead {
    color: #4f555c !important;
    text-shadow: none !important;
}

html[data-theme="light"] .ae-about-hero .ae-about-button--primary {
    border-color: #111214 !important;
    background: #111214 !important;
    color: #fff !important;
}

html[data-theme="light"] .ae-about-hero .ae-about-button--secondary {
    border-color: rgba(17, 18, 20, .34) !important;
    background: rgba(255, 255, 255, .62) !important;
    color: #111214 !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-theme="light"] .ae-about-hero .ae-about-button--secondary:hover,
html[data-theme="light"] .ae-about-hero .ae-about-button--secondary:focus-visible {
    border-color: #111214 !important;
    background: rgba(255, 255, 255, .88) !important;
}

html[data-theme="light"] .ae-about-hero .ae-about-proof {
    border-top-color: rgba(17, 18, 20, .18) !important;
}

html[data-theme="light"] .ae-about-hero .ae-about-proof > div + div {
    border-left-color: rgba(17, 18, 20, .16) !important;
}

html[data-theme="light"] .ae-about-hero .ae-about-proof dt {
    color: #111214 !important;
}

html[data-theme="light"] .ae-about-hero .ae-about-proof dd {
    color: #686e75 !important;
}

@media (max-width: 900px) {
    html[data-theme="light"] .ae-about-hero__visual::before {
        background-image:
            linear-gradient(
                90deg,
                rgba(247, 247, 244, .98) 0%,
                rgba(247, 247, 244, .94) 46%,
                rgba(247, 247, 244, .64) 72%,
                rgba(247, 247, 244, .20) 100%
            ),
            url("/images/comercial-hero.php?v=4") !important;
        background-position: center, 58% center !important;
    }
}

@media (max-width: 640px) {
    html[data-theme="light"] .ae-about-hero__visual::before {
        background-image:
            linear-gradient(
                180deg,
                rgba(247, 247, 244, .94) 0%,
                rgba(247, 247, 244, .88) 46%,
                rgba(247, 247, 244, .68) 72%,
                rgba(247, 247, 244, .38) 100%
            ),
            url("/images/comercial-hero.php?v=4") !important;
        background-position: center, 62% center !important;
    }

    html[data-theme="light"] .ae-about-hero .ae-about-proof > div + div {
        border-left-color: transparent !important;
        border-bottom-color: rgba(17, 18, 20, .16) !important;
    }
}