/* ==========================================================================
   Hero: la mascota en vídeo (ghost-hero)
   --------------------------------------------------------------------------
   El vídeo ya viene recortado con canal alfa por tools/preparar-video-hero.py:
   conserva la placa tipo icono con sus colores intactos y solo le falta el
   rectángulo negro. Así que aquí no hay que recortar, ni mezclar, ni
   enmascarar nada — el alfa hace el trabajo y funciona sobre cualquier fondo.

   Lo que NO hay, y por qué:
     · mix-blend-mode: screen → no sirve. `.hero__stage` (8874) y
       `.hero__layout` (8831) son contextos de apilamiento, y una mezcla solo
       alcanza el fondo de su propio contexto, nunca el de la página. Salía un
       cuadrado negro opaco.
     · máscara radial → sobra con alfa real, y además comía las esquinas
       redondeadas de la placa.
   ========================================================================== */

video.hero-media {
  display: block;
  /* 992×1100 desde la 3ª pasada del 27-sep: el encuadre creció 188 px por
     arriba. La baldosa no se movió ni cambió de tamaño; ese pad es solo aire
     para la purpurina. Ver `--ghost-aire-arriba` más abajo. */
  aspect-ratio: 992 / 1100;
  height: auto;
  object-fit: contain;
  background: transparent;
}

video.hero-media {
  --ghost-aire-arriba: 188;   /* px que el encuadre desborda la caja por arriba */
}

/* ── Los brillitos ya no se cortan en seco ────────────────────────────────
   El render de Grok trae la purpurina pegada a su propio borde: sube hasta
   y=160 de 1100 y llega a x=988 de 992. Da igual cuánto pad negro se le
   añada — el corte viaja con el render, no con el encuadre. Solo se arregla
   apagando la partícula antes del canto.

   Se probó con `mask-image` y **no vale**: Chromium compone la máscara en
   espacio lineal y, sobre negro a nivel 7, la franja con alfa parcial le
   quita 1-2 puntos. Resultado: otro rectángulo, ahora más oscuro que el
   fondo en vez de más claro. Se cambió por un velo opaco del MISMO color
   del fondo, que se compone en sRGB normal y arriba vale exactamente
   `#070708` — el mismo píxel que la página. Cero escalón.

   Los dos degradados mueren antes de tocar la baldosa (arriba empieza en
   y=188 = 17,1 %; por la derecha acaba en x=927, o sea el 6,5 % del ancho). */
.hero__mascot:has(video.hero-media)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, #070708 0, #070708 14.5%, rgba(7, 7, 8, 0) 17.1%),
    linear-gradient(to left, #070708 0, rgba(7, 7, 8, 0) 4.5%);
}

/* ── 8874 · hero--fantasma ────────────────────────────────────────────────
   Aquí la mascota va a la derecha y el texto a la izquierda, así que se
   voltea para que mire hacia el texto. En 8831 están al revés y el render
   ya cae bien tal cual. */
.mascota--hero video.hero-media {
  width: min(46vw, 420px);
  transform: scaleX(-1);
}

/* La sombra ácida desplazada se vería por las esquinas transparentes. */
.mascota--hero:has(video.hero-media)::after {
  display: none;
}

/* ── 8831 · hero--cinematic ─────────────────────────────────────────────── */
.hero__mascot:has(video.hero-media) {
  /* la placa ya trae su propia sombra horneada; el drop-shadow de la figura
     la duplicaría */
  filter: none;
  position: relative;   /* ancla del ::after que apaga los brillitos */
}

.hero__mascot video.hero-media {
  width: 100%;
}

/* ==========================================================================
   8831 · COMPOSICIÓN DEL HERO
   --------------------------------------------------------------------------
   Medido a 1920×970 antes de tocar nada. Lo que estaba roto:

     1. El hero medía 100dvh Y ADEMÁS llevaba padding-top: var(--nav-height).
        Pero la nav es `position: relative`, o sea que ya ocupa sus 69 px en el
        flujo. El padding los contaba dos veces: el hero empezaba en y=69 y
        terminaba en 1039, 69 px por debajo del viewport. De ahí que se viera
        la barra de arriba o la de abajo, nunca las dos.
     2. `.hero__layout` tenía max-width: 68rem (1088 px). En 1920 eso deja
        409 px muertos a cada lado.
     3. El vídeo estaba capado a min(26rem, 100%) = 416 px dentro de una
        columna de 471. Ni crecía con la pantalla ni se enteraba del alto.
     4. La columna de texto medía 616 px de alto contra 416 del vídeo: los
        centros coincidían, pero el vídeo flotaba con 100 px de aire arriba
        y abajo. Ese era el «descuadre».
     5. `.hero__proof` (la barra de chips, retirada del hero el 27-sep) iba
        en nowrap y medía 706 px dentro de una columna de 576.
     6. El salto a una columna solo ocurría por debajo de 860 px, así que a
        861 px seguían dos columnas con el vídeo diminuto.

   El criterio: el hero ocupa EXACTAMENTE el hueco visible (alto de la ventana
   menos la nav) y todo cabe dentro sin scroll; si el contenido no entra
   —móvil, ventanas muy bajas— el hero crece en vez de recortar. El vídeo se
   dimensiona contra los DOS ejes, porque el caso que fallaba era pantalla
   ancha y baja: atado solo al ancho, desbordaba por abajo.
   ========================================================================== */

:root {
  /* svh = el alto estable, sin el baile de la barra del navegador en móvil */
  --hero-h: calc(100svh - var(--nav-height));
}

/* Va con #id a propósito: `bundle.css` trae `#hero.hero { min-height:100svh;
   padding-top: calc(var(--nav-height) + safe-area) }` dentro de su bloque
   móvil, y con dos clases perdía la pulseada — volvía el padding duplicado
   justo en móvil. Mismo peso y esta hoja carga después. Los `env()` de iOS
   se conservan: eso sí hacía falta. */
#hero.hero--cinematic {
  min-height: var(--hero-h);
  /* la válvula: si el contenido pide más (móvil, ventana baja), crece */
  height: auto;
  /* la nav ya ocupa su sitio en el flujo; no se cuenta dos veces */
  padding-top: calc(clamp(1rem, 3vh, 2.5rem) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(1rem, 3vh, 2.5rem) + env(safe-area-inset-bottom, 0px));
  align-items: center;
}

.hero--cinematic .hero__layout {
  /* 88rem en vez de 68: se comen los 409 px muertos sin estirar la línea de
     texto, que sigue capada por .hero__content */
  max-width: min(92vw, 88rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: center;
  width: 100%;
}

.hero--cinematic .hero__mascot:has(video.hero-media) {
  /* los tres topes, por orden de quién manda:
       100%           → nunca más ancho que su columna
       38rem          → tope de arte: por encima la mascota se hace cartel
       --hero-h * .68 → el que salva la pantalla ancha y baja (es 1:1, así que
                        el ancho ES el alto) */
  width: min(100%, 38rem, calc(var(--hero-h) * 0.68));
  justify-self: center;
}

/* ── La mascota, a la altura exacta del bloque de texto ───────────────────
   Nico lo marcó con un rectángulo: el cuadro del fantasma empieza donde
   empieza «No somos». El borde de abajo lo corrigió el 27-sep (3ª pasada):
   es la línea de ARRIBA del botón de presupuesto, no la de abajo. Así que la
   caja va de «No somos» al final del sublead, y fuera quedan el badge y las
   CTAs.

   Por eso el HTML agrupa título + lead + sublead en `.hero__pitch` —y las
   CTAs quedan FUERA, hermanas suyas—: sin ese envoltorio no hay forma de
   decirle al vídeo «mide lo que mide ese trozo».

   La rejilla del hero tiene tres filas —badge / pitch / CTAs— y
   .hero__content las hereda con `subgrid`. Así la mascota ocupa la fila del
   pitch y nada más. Al ser 1:1, fijarle el alto le fija el ancho.
   (Eran cuatro hasta el 27-sep: la última era la barra de chips, que Nico
   quitó del hero.) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1024px) {
    .hero--cinematic .hero__layout {
      grid-template-rows: auto auto auto;
      align-items: stretch;
      /* La columna de la mascota mide lo que mide la mascota, no una
         fracción: con `1fr` sobraban 171 px dentro de la columna que, al ir
         pegada al texto, se acumulaban todos a la izquierda — 419 px de negro
         a un lado contra 263 al otro. Con `auto` + el par centrado, el
         conjunto queda a plomo. */
      grid-template-columns: auto minmax(0, 44rem);
      justify-content: center;
      /* El hueco entre columnas es aire de composición; el de las filas es
         interlínea. Con un solo `gap` los chips caían a 105 px del botón. */
      column-gap: clamp(1.5rem, 4vw, 4.5rem);
      row-gap: clamp(1rem, 2.2vh, 2rem);
    }

    /* Al pasar a ser fila del subgrid, el badge se estiraba a los 704 px de
       la columna: era una píldora de lado a lado. Se ajusta a su texto, que
       es como estaba antes. */
    .hero--cinematic .hero__badge {
      justify-self: start;
    }

    .hero--cinematic .hero__content {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / 4;
      grid-column: 2;
      align-content: start;
      /* La columna interior TIENE que ser minmax(0,1fr) y no `auto`: con
         `auto`, el mínimo automático de los hijos se calcula contra el
         max-width de 44rem que trae identidad.css, la pista se clava en
         706 px y el bloque de texto sale del viewport. A 1024 llegaba a
         x=1208 con 1009 de ancho útil; lo tapaba el `overflow-x: clip`, así
         que no daba scroll horizontal y la verificación lo daba por limpio. */
      grid-template-columns: minmax(0, 1fr);
    }

    .hero--cinematic .hero__mascot:has(video.hero-media) {
      grid-column: 1;
      grid-row: 2 / 3;      /* exactamente la fila del pitch */
      align-self: stretch;
      justify-self: end;
      position: relative;
      /* el alto lo pone la fila y el ancho lo deduce de la proporción real
         del vídeo (992×912). Así la columna `auto` se ajusta al bicho y no
         sobra hueco. */
      aspect-ratio: 992 / 912;
      height: 100%;
      width: auto;
      min-width: 0;
    }

    /* El vídeo va absoluto A PROPÓSITO. Si se queda en el flujo, su alto
       intrínseco (964 px) alimenta la fila, la fila alimenta al vídeo y se
       muerden la cola: la primera prueba salió con la fila a 652 px y el
       hero desbordando 82. Absoluto, no mide nada para la rejilla: la fila
       la manda el texto y el vídeo se limita a llenarla.
       La caja (`.hero__mascot`) sigue siendo la que marcó Nico: 992×912. El
       vídeo, en cambio, mide 992×1100 y DESBORDA 188 px por arriba. No se ve
       desbordar porque ese trozo es el mismo negro que el fondo; lo único que
       aparece ahí es la purpurina, que es justo de lo que se trata.
       Las cuentas van en proporción del alto de la caja (912) para que valgan
       a cualquier resolución: 1100/912 de alto, −188/912 de desplazamiento.
       El resultado es un elemento de ratio 992/1100 exacto, así que `contain`
       lo llena sin barras. */
    .hero--cinematic .hero__mascot video.hero-media {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(var(--ghost-aire-arriba) / -912 * 100%);
      width: 100%;
      height: calc((912 + var(--ghost-aire-arriba)) / 912 * 100%);
      object-fit: contain;
      object-position: right center;
    }

    /* El velo que apaga los brillitos tiene que cubrir el vídeo entero, y el
       vídeo aquí se sale de la caja por arriba. Mismas cuentas que él. */
    .hero--cinematic .hero__mascot:has(video.hero-media)::after {
      top: calc(var(--ghost-aire-arriba) / -912 * 100%);
      bottom: auto;
      height: calc((912 + var(--ghost-aire-arriba)) / 912 * 100%);
    }

    /* El sublead cierra la caja: su margen inferior ya lo pone el row-gap de
       la rejilla, así que si lo deja puesto el borde del vídeo se separa del
       último renglón de texto. */
    .hero--cinematic .hero__pitch > :last-child {
      margin-bottom: 0;
    }
  }
}

/* ── Fondo sólido, de verdad ──────────────────────────────────────────────
   El vídeo no tiene alfa: su negro solo desaparece si el fondo de la página
   es EXACTAMENTE ese negro. `identidad.css` ya apaga la foto, la niebla, los
   godrays y la constelación, pero quedaban cuatro capas pintando encima del
   negro del hero — y ninguna de ellas pinta sobre el vídeo, porque
   `.hero__layout` va por delante. De ahí el rectángulo: el fondo estaba
   texturado y el vídeo liso.

     · `.page-grain` es una rejilla de 3 px de líneas blancas al 1,5 % en
       blend `screen` (bundle.css 498). Con `--grain-opacity: 0.09` no se ve
       como grano, se ve como tela: es la «textura» que Nico cazó, y es la
       que hacía bailar el fondo entre (6,6,6) y (7,7,8).
     · `.hero__overlay` y `.hero__vignette` son degradados sobre la foto de
       montaña que ya no existe: sin foto solo oscurecen los bordes.
     · `.hero__grain` es ruido fractal al 28 % en blend `overlay`.
     · `.hero__content::before` es otro halo cian, este al **13 %** y detrás
       del texto. No hacía rectángulo (el vídeo está lejos), pero en móvil
       tiñe media pantalla de verde azulado y el fondo deja de ser sólido.
     · `.hero--cinematic::before` es un halo cian al 3 % centrado arriba
       (`radial-gradient(50% 40% at 50% 0%, …)`). Al 3 % suena a nada, pero
       sobre negro puro sube el fondo de (7,7,8) a (9,12,14) — y el vídeo,
       que va por delante, no lo recibe. Ese era el rectángulo de la foto que
       mandó Nico, y con el encuadre nuevo subiendo 188 px habría sido peor.

   Se van los seis. Cortar por lo sano aquí es más barato que perseguir el
   negro exacto capa por capa, y el hero queda plano de verdad. Si algún día
   se quiere grano, tiene que ir TAMBIÉN sobre el vídeo (dentro del mismo
   contexto de apilamiento), no solo sobre el fondo. */
.page-grain,
.hero__overlay,
.hero__vignette,
.hero__grain {
  display: none !important;
}

.hero--cinematic::before,
.hero--cinematic .hero__content::before {
  content: none !important;
}

/* ── Una palabra en cursiva dentro del titular ───────────────────────────
   El titular no se escribe en el HTML: lo arma un script partiendo
   `data-lines` por `|`. Como usa `textContent` —y así debe seguir, que meter
   `innerHTML` ahí es abrir la puerta a cualquier cosa—, no admitía marcado.
   Ahora entiende `*palabra*` y lo envuelve en un `<em>`.

   Desde el 27-sep la cursiva es de verdad, no una oblicua sintética:
   Instrument Serif Italic, la misma que usa Gótica para este recurso. Es la
   única serif de la web y solo aparece aquí, en la palabra que destaca.
   Pide `font-weight: 400` a propósito: al heredar el 700 del titular el
   navegador la engordaría de mentira y perdería el trazo fino que la hace
   contrastar contra la grotesca. */
.hero__title em {
  font-family: var(--font-serif-acento);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* ── La barra, siempre arriba ─────────────────────────────────────────────
   Era `position: fixed` de siempre; `fantasma-scroll.css` la bajó a
   `relative` para poder colarla por encima de su canvas, y de paso la dejó
   transparente. Vuelve a quedarse arriba, pero con `sticky` en vez de
   `fixed`: sigue ocupando su hueco en el flujo, así que `--hero-h` (que
   resta la nav) sigue siendo verdad. Con `fixed` habría que volver a
   compensar con padding — que es exactamente el bug que arreglamos hoy.

   Va con la clase repetida porque `fantasma-scroll.css` se carga DESPUÉS que
   esta hoja y trae `.header { position: relative }`: a igual peso ganaba él. */
.header.header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav, 70);
}

/* Sin esto, el `sticky` de arriba computa pero NO pega: se comprobó con el
   scroll a 1166 px y la cabecera se iba a y=-1166.
   `html` y `body` llevan `overflow-x: hidden` (bundle.css 349 y 362) para
   cortar el scroll lateral de los brillos de los botones. Pero `hidden`
   convierte al elemento en contenedor de scroll, y entonces la cabecera se
   pega al body —que no hace scroll— en vez de al viewport.
   `clip` recorta exactamente igual y NO crea contenedor. Es la sustituta
   hecha para este caso; el scroll lateral sigue cortado. */
html,
body {
  overflow-x: clip;
  overflow-y: visible;
}

/* Si se queda arriba, tiene que taparse lo que pasa por debajo. */
.header .nav {
  background: var(--color-nav-bg, rgba(7, 7, 8, 0.82));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── Una columna: a 1024, no a 860 ───────────────────────────────────────
   A 861 px la rejilla de dos columnas ya no da de sí: el vídeo queda ridículo
   y el titular se parte en tiras. */
@media (max-width: 1023px) {
  /* ── El hero cabe en la primera pantalla, sin excepciones ───────────────
     Petición de Nico (27-sep): al abrir en el móvil se tiene que ver el hero
     ENTERO —bicho, titular, botón y chips— sin arrastrar. Antes desbordaba
     423 px a 320×568, 231 a 390×844 y 48 a 768×1024, porque el hero llevaba
     `min-height` y crecía todo lo que le pidiera el contenido.

     El reparto NO se hace a ojo con vh en cada pieza (eso se descuadra en
     cuanto cambia una frase). Se hace con un presupuesto: el hero mide
     exactamente el hueco visible, el texto pide lo que necesita y **la
     mascota se queda con lo que sobre** (`flex: 1 1 0` + `min-height: 0`).
     Si el texto crece, el bicho encoge solo; nunca al revés. */
  #hero.hero--cinematic {
    height: var(--hero-h);
    min-height: 0;
    display: flex;
    align-items: stretch;
    padding-block: clamp(0.5rem, 1.8vh, 1.75rem);
  }

  .hero--cinematic .hero__layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
    max-width: min(92vw, 40rem);
    gap: clamp(0.5rem, 1.8vh, 1.75rem);
    text-align: center;
  }

  .hero--cinematic .hero__mascot:has(video.hero-media) {
    /* arriba del texto: la mascota es el gancho de identidad */
    order: -1;
    /* la bolsa: se come el hueco libre y se rinde hasta 0 si hace falta */
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    max-width: 22rem;
    aspect-ratio: auto;    /* aquí manda el alto, no la proporción */
  }

  .hero--cinematic .hero__mascot video.hero-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero--cinematic .hero__content {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    /* sin esto los hijos se estiran (`align-items: stretch` por defecto) y
       el badge deja de ser una píldora para ser una banda de lado a lado */
    align-items: center;
    gap: clamp(0.35rem, 1.3vh, 1rem);
    max-width: 100%;
    padding-left: 0;
  }
  .hero--cinematic .hero__pitch,

  /* Los márgenes verticales sueltos pelean con el `gap` y suman de más. */
  .hero--cinematic .hero__content > *,
  .hero--cinematic .hero__pitch > * {
    margin-block: 0;
  }
  .hero--cinematic .hero__pitch {
    display: flex;
    flex-direction: column;
    gap: clamp(0.35rem, 1.3vh, 1rem);
  }

  .hero--cinematic .hero__badge,
  .hero--cinematic .hero__ctas {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .mascota--hero video.hero-media { width: min(72vw, 320px); }

  /* Apretar el texto es lo que le deja sitio al bicho: cada píxel que suelta
     el bloque de abajo se lo queda la mascota, que es la bolsa. */
  .hero--cinematic .hero__ctas {
    gap: clamp(0.3rem, 1.1vh, 0.75rem);
  }
  .hero--cinematic .hero__title {
    font-size: clamp(1.75rem, 8.2vw, 2rem);
  }
}

/* ── El hero no depende del scroll para verse ────────────────────────────
   El badge lleva `data-reveal`, que lo deja en `opacity: 0` +
   `translateY(14px)` hasta que el observador de scroll los dispara. En el
   hero eso es un error de bulto: son la PRIMERA pantalla, no hay scroll que
   valga. A 320×568, 360×640 y 375×667 se quedaban invisibles para siempre
   —el observador no llegaba a activarlos por estar justo en el canto— y de
   paso ese translate los sacaba 9 px fuera de la ventana. La animación de
   entrada del hero ya la hace `hero-anim-pre` al cargar; esta sobraba.

   Se caza midiendo `getComputedStyle().opacity`, no el rectángulo: el hueco
   sí estaba reservado (el layout cerraba en 563 de 568), lo que faltaba era
   el pixel pintado. */
#hero.hero--cinematic [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Escalón: ventanas bajas, algo tiene que salir ──────────────────────
   A 320×568 quedan 499 px útiles y solo el texto pedía 571. Ahí no hay
   apretón que valga: o se quita una pieza o el bicho desaparece, y un hero
   sin mascota no es esta web. El corte está en 900 px de alto —y no en 780,
   que fue el primer intento— porque a 390×844, el móvil más común, con el
   sublead puesto el bicho se quedaba en 117 px: cabía, pero no era el gancho
   de nada. Sale el sublead, que es el renglón que menos trabaja —repite en
   tono lo que ya dice el lead— y el único que no aporta ni identidad (la
   mascota), ni promesa (el titular), ni acción (el botón).

   El corte va por ALTO de ventana, no por ancho: el problema es vertical.
   Un iPhone en horizontal tiene 390 de ancho de sobra y 300 de alto. */
@media (max-width: 1023px) and (max-height: 900px) {
  /* El relleno del hero (1,8vh arriba y abajo) era lo último que sobraba:
     sin esto los tres móviles estrechos se pasaban por 3-5 px. */
  #hero.hero--cinematic {
    padding-block: clamp(0.35rem, 1vh, 0.75rem);
  }

  #hero.hero--cinematic .hero__sublead {
    display: none;
  }

  /* El titular llevaba 34,4 px con interlineado 31: cuatro renglones, 126 px.
     Va con `#hero` porque `bundle.css` y `sections.css` traen su propio
     clamp y con la clase sola ganaban ellos. */
  #hero.hero--cinematic .hero__title,
  #hero.hero--cinematic .hero__title .title-line {
    font-size: clamp(1.6rem, 7.6vw, 1.95rem);
    line-height: 1.02;
  }

  /* El lead es el segundo que más ocupa (111 px a 320, cuatro renglones). */
  #hero.hero--cinematic .hero__lead {
    font-size: clamp(0.95rem, 4.2vw, 1.05rem);
    line-height: 1.35;
  }

}

/* ── Pantallas muy estrechas ────────────────────────────────────────────
   A 320 el badge llegaba a ocupar 251 px de los 320: deja de ser una píldora
   y se lee como una banda. */
@media (max-width: 379px) {
  #hero.hero--cinematic .hero__badge {
    font-size: 0.5rem;
    padding-block: 0.25rem;
  }
}

/* ── Y lo mismo en escritorio con poca altura ────────────────────────────
   A 1024×600 (portátil con la ventana a medias, o tablet en horizontal) el
   hero desbordaba 129 px, y a 1280×720 —un portátil de 13" muy normal— 55.
   El corte va en 760 px de alto: por debajo entra el apretón, y 1024×768,
   que cabe con 34 px de margen, se queda fuera.
   La rejilla de dos columnas no necesita presupuesto —la mascota ya mide lo
   que mide la fila del texto—, le basta con que el texto ocupe menos. */
@media (min-width: 1024px) and (max-height: 760px) {
  #hero.hero--cinematic .hero__sublead {
    display: none;
  }
  #hero.hero--cinematic .hero__title,
  #hero.hero--cinematic .hero__title .title-line {
    font-size: clamp(2rem, 4.4vh, 3rem);
    line-height: 1.02;
  }
  #hero.hero--cinematic .hero__lead {
    font-size: clamp(1rem, 2.6vh, 1.2rem);
    line-height: 1.35;
  }
  .hero--cinematic .hero__layout {
    row-gap: clamp(0.5rem, 1.4vh, 1.25rem);
  }
}

/* Decorativo: si el usuario pide menos movimiento, se queda el póster.
   La pausa real la hace el script del instalador; esto es el cinturón. */
@media (prefers-reduced-motion: reduce) {
  video.hero-media { animation: none !important; }
}