/* ================================================
   Hero cinematográfico · escena de video (Higgsfield) — estilo Prisma
   Criterio: la ESCENA se luce a pantalla completa (menú transparente, SIN
   franja oscura arriba). El contenido (logo + mensaje + CTAs) vive ABAJO-
   IZQUIERDA, sobre un degradado cinematográfico que cierra en el fondo de
   la página. El texto no tapa a la persona/isla: la imagen manda.
   ================================================ */

/* Header: cápsula de vidrio que FLOTA sobre la escena (no una franja de lado
   a lado). El desenfoque toma los colores del video — atardecer y azul noche —
   así el fondo del menú siempre es "de la escena". Va fija en toda la página
   (vence el `position: sticky !important` de aztra-home.css) para que no
   brinque el contenido al hacer scroll; al bajar sólo se oscurece. */
body:has(#home.hero-cine) .navbar-area,
body:has(#home.hero-cine) .navbar-area.sticky,
body:has(#home.hero-cine) .navbar-area.is-stuck {
    position: fixed !important; left: 0; right: 0; top: 0;
    padding-top: clamp(12px, 1.5vw, 20px);
    background-color: transparent !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 0;
    pointer-events: none; /* sólo la cápsula recibe clics */
}
body:has(#home.hero-cine) .navbar-area .navbar {
    pointer-events: auto;
    padding: 9px 10px 9px 26px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(26, 34, 54, 0.46), rgba(13, 18, 32, 0.38));
    -webkit-backdrop-filter: blur(18px) saturate(1.45); backdrop-filter: blur(18px) saturate(1.45);
    border: 1px solid rgba(237, 237, 237, 0.14);
    box-shadow: 0 20px 46px -24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
body:has(#home.hero-cine) .navbar-area.is-stuck .navbar {
    background: linear-gradient(180deg, rgba(20, 27, 45, 0.84), rgba(13, 18, 32, 0.80));
    border-color: rgba(237, 237, 237, 0.10);
}
/* misma altura en reposo y al bajar (sin saltos), todo centrado en vertical */
body:has(#home.hero-cine) .navbar-area .navbar-brand .aztra-lockup { height: 38px; width: auto; }
body:has(#home.hero-cine) .navbar-area .navbar .navbar-nav { align-items: center; margin-left: auto; margin-right: 0; }
body:has(#home.hero-cine) .navbar-area .navbar .navbar-nav .nav-item .nav-link:not(.aztra-nav-cta) {
    padding-top: 11px; padding-bottom: 11px;
}
/* el subrayado del link activo estaba medido para el padding viejo (bottom:
   20px con 25px de padding) y con el nuevo quedaba encimado en el texto:
   baja a su lugar, debajo de la palabra. */
body:has(#home.hero-cine) .navbar-area .navbar .navbar-nav > .nav-item > .nav-link:not(.aztra-nav-cta)::after {
    bottom: 3px; height: 2px; border-radius: 2px; background-color: #89A6C6;
}
@media (max-width: 991px) {
    body:has(#home.hero-cine) .navbar-area .navbar { padding: 6px 8px 6px 18px; }
    body:has(#home.hero-cine) .navbar-area .navbar-brand .aztra-lockup { height: 34px; }
}

#home.hero-cine {
    position: relative; overflow: hidden; background: #0d1220;
    min-height: 100svh; display: flex; align-items: flex-end;
}
#home.hero-cine .hero-glow { display: none; }

/* escena recortada en la fuente (sin barras negras ni el cielo oscuro de
   arriba), a pantalla completa: se ve igual a cualquier tamaño de ventana. */
.hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%; z-index: 0; pointer-events: none;
}

/* velo SÓLO abajo: la mitad superior es escena pura (sin franja). Abajo
   cierra a oscuro para el contenido y para empatar con la página. */
.hero-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg,
        rgba(13, 18, 32, 0) 0%,
        rgba(13, 18, 32, 0) 40%,
        rgba(13, 18, 32, 0.42) 64%,
        rgba(13, 18, 32, 0.85) 85%,
        #0d1220 100%);
}

#home.hero-cine > .container {
    position: relative; z-index: 2; width: 100%;
    padding-bottom: clamp(44px, 8vh, 104px);
}

/* contenido abajo-izquierda */
#home.hero-cine .hero-content-2 {
    align-items: flex-start; text-align: left; max-width: 680px; margin: 0;
    gap: clamp(14px, 1.8vw, 22px);
}
#home.hero-cine .aztra-herologo { width: min(190px, 44vw); margin: 0; }
#home.hero-cine .hero-content-2 h1 { text-align: left; margin: 0; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5); }
#home.hero-cine .hero-content-2 .sub-title-2 { margin: 0; max-width: 52ch; }
#home.hero-cine .hero-content-2 .sub-title-2 p { text-align: left; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55); }
#home.hero-cine .hero-content-2 .aztra-hero-ctas { justify-content: flex-start; }

/* las muescas "cutout" de las letras van en color de fondo oscuro: sobre la
   escena se verían como triángulos — transparentes aquí. */
#home.hero-cine .aztra-herologo .ltr.cutout, #home.hero-cine .aztra-herologo .tg.cutout { fill: transparent !important; }

@media (prefers-reduced-motion: reduce) { .hero-video { transform: scale(1.02); } }
/* Celular: a pantalla completa el video sólo deja ver una franja angosta y el
   texto tapaba a la persona. Aquí la escena ocupa la parte de arriba (se ve la
   isla y quien trabaja), se funde a oscuro, y el mensaje vive abajo sobre fondo
   sólido: se lee siempre. El logo sube bajo el menú, sobre el cielo. */
@media (max-width: 767px) {
    .hero-video { height: 66svh; bottom: auto; object-position: 56% 50%; }
    .hero-scrim {
        background: linear-gradient(180deg,
            rgba(13, 18, 32, 0) 0%,
            rgba(13, 18, 32, 0) 40%,
            rgba(13, 18, 32, 0.55) 53%,
            #0d1220 64%,
            #0d1220 100%);
    }
    #home.hero-cine { padding: 0; }
    #home.hero-cine .hero-content-2 .aztra-hero-ctas { margin: 6px 0 0; }
    #home.hero-cine > .container { padding-top: 92px; padding-bottom: 26px; }
    #home.hero-cine .hero-content-2 {
        min-height: calc(100svh - 118px); justify-content: flex-end;
        align-items: center; text-align: center; gap: 12px;
    }
    #home.hero-cine .aztra-herologo { width: 112px; margin: 0 auto auto; }
    #home.hero-cine .hero-content-2 h1 { text-align: center; }
    #home.hero-cine .hero-content-2 .sub-title-2 p { text-align: center; }
    #home.hero-cine .hero-content-2 .aztra-hero-ctas { justify-content: center; }
}

/* FIX de la franja superior: `.aztra-depth-section::after` (aztra-scroll.css)
   pone `top: 0` sobre el mismo ::after que `.hero-section-2::after` usa como
   degradado inferior (bottom: 0; height: 22%), y lo pegaba ARRIBA del hero.
   En este hero el velo ya cierra abajo, así que el pseudo-elemento sobra. */
#home.hero-section-2::after { display: none; }