/* ═══════════════════════════════════════════════════════════════
   Omnicore — landing
   Paleta: negro con cuerpo + UN acento ámbar. Nada más.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Superficies */
  --ink:        #0A0B0D;   /* negro con cuerpo, nunca #000 */
  --ink-soft:   #121316;
  --line:       #24262B;

  /* Texto */
  --paper:      #F2EFEA;   /* blanco roto, nunca blanco puro */
  --fog:        #9B968E;   /* secundario */

  /* El único acento */
  --amber:      #F0954A;
  --amber-hot:  #FFD9A8;
  --amber-deep: #7A3D14;

  /* Tipografía — stack de sistema por ahora.
     TODO: cambiar la display por la fuente definitiva de marca. */
  --font-display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Ritmo */
  --gutter: clamp(1.5rem, 5vw, 6rem);
  --measure: 22ch;
}

*, *::before, *::after { box-sizing: border-box; }

/* `clip` y no `hidden`: hidden crea un contenedor de scroll y rompe el
   position:sticky del escenario. clip recorta sin crearlo.
   Hace falta en html Y en body: en móvil el nav es fixed y su bloque
   contenedor es el viewport inicial, más ancho que el layout — eso metía
   ~18px de scroll lateral y dejaba una franja donde el video no llegaba. */
html { background: var(--ink); overflow-x: clip; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  max-width: 100%;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--amber); color: var(--ink);
  padding: .75rem 1rem; z-index: 100; font: 500 .875rem/1 var(--font-mono);
}
.skip:focus { left: 0; }

/* ─────────────── Nav ─────────────── */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(1.25rem, env(safe-area-inset-top)) var(--gutter) 1.25rem;
  pointer-events: none;
  transition: background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}

/* sobre el film flota limpio; a partir del acto 2 le pasa texto por
   detrás y necesita piso propio */
.nav.is-solid {
  background: rgba(10, 11, 13, .82);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.nav__mark {
  display: inline-flex; align-items: center; gap: .625rem;
  font: 600 .9375rem/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper);
  pointer-events: auto;
}

/* el símbolo viene con fill=currentColor: hereda el blanco de la marca */
.nav__logo {
  width: 1.5rem; height: 1.5rem;
  display: block; flex: none;
}

.nav__lang { display: flex; gap: .25rem; pointer-events: auto; }

.nav__lang button {
  background: none; border: 0; cursor: pointer;
  font: 500 .75rem/1 var(--font-mono); letter-spacing: .08em;
  color: var(--fog); padding: .5rem .625rem;
  transition: color .25s ease;
}
.nav__lang button:hover { color: var(--paper); }
.nav__lang button.is-active { color: var(--amber); }
.nav__lang button:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
/* idioma sin traducir todavía */
.nav__lang button.is-pending { opacity: .35; cursor: default; }
.nav__lang button.is-pending:hover { color: var(--fog); }

/* ═══════════════ EL SCRUB ═══════════════ */

.scrub {
  position: relative;
  /* un "alto de pantalla" de recorrido por capítulo */
  height: calc(var(--chapters, 5) * 100dvh);
}

.scrub__stage {
  position: sticky; top: 0;
  height: 100dvh; width: 100%;
  overflow: hidden;
  background: var(--ink);
}

.scrub__media, .scrub__media > * {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;   /* llena el viewport y recorta bordes */
  display: block;
}

/* el poster se va cuando el video pintó su primer frame de verdad */
.scrub__poster { z-index: 1; transition: opacity .4s ease; }
.scrub.is-playing .scrub__poster { opacity: 0; }
.scrub__media video { z-index: 2; }

/* El film compite con el texto: las líneas brillantes son el ruido.
   Bajarles el brillo apaga las líneas y deja el negro negro — un velo gris
   encima, en cambio, lavaría el fondo. --dim lo sube el JS a medida que el
   cuadro se vacía, así el cierre conserva todo su brillo. */
.scrub__media video, .scrub__poster {
  filter: brightness(var(--dim, .55)) contrast(1.06);
}

/* DOS velos, porque el film cambia de carácter a mitad de camino:
     · la primera mitad es oscura y el texto va a la izquierda  → velo lateral
     · la segunda se abre a una ventana al atardecer, quema, y el
       texto se muda abajo sobre la mesa                        → velo inferior
   El JS cruza uno con el otro (--veil y --veil-bottom). */
/* base: sólo posición. El fondo lo pone cada modificador — si viviera acá,
   el media query de abajo se lo pisaría también al de arriba. */
.scrub__veil {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
}

.scrub__veil--side {
  background:
    linear-gradient(to right,
      rgba(10,11,13,.92) 0%,
      rgba(10,11,13,.72) 38%,
      rgba(10,11,13,.15) 72%,
      rgba(10,11,13,0) 100%),
    radial-gradient(120% 90% at 50% 50%,
      rgba(10,11,13,0) 30%, rgba(10,11,13,.55) 100%);
  opacity: var(--veil, .8);
}

/* franja de arriba: el texto de los capítulos cruza el nav al scrollear.
   Sin esto, en teléfono el titular se le monta encima. */
.scrub__veil--top {
  inset: 0 0 auto 0;
  /* lo justo para el nav. En vh puros, en vertical se convertía en una
     barra de 220px que parecía parte del header. */
  height: clamp(5rem, 13vh, 9rem);
  /* Curva cuadrática, no lineal: la cola se estira y el borde inferior
     deja de leerse como una línea. Y arranca en .68, no en .82 — cuanto
     más opaco el tope, más se nota dónde termina. */
  background: linear-gradient(to bottom,
    rgba(10,11,13,.68) 0%,
    rgba(10,11,13,.60) 15%,
    rgba(10,11,13,.47) 30%,
    rgba(10,11,13,.35) 45%,
    rgba(10,11,13,.23) 60%,
    rgba(10,11,13,.14) 72%,
    rgba(10,11,13,.07) 84%,
    rgba(10,11,13,.02) 93%,
    rgba(10,11,13,0) 100%);
  opacity: 1;
}

.scrub__veil--bottom {
  background:
    linear-gradient(to top,
      rgba(10,11,13,.96) 0%,
      rgba(10,11,13,.86) 30%,
      rgba(10,11,13,.4)  62%,
      rgba(10,11,13,.08) 100%);
  opacity: var(--veil-bottom, 0);
}

@media (max-width: 860px) {
  /* en vertical el texto va abajo desde el principio: el velo lateral
     pasa a tapar desde abajo también.
     OJO: apunta a --side, no a .scrub__veil. Apuntando a la clase base
     le pisaba el fondo al velo de arriba y lo convertía en un bloque
     casi opaco de 110px con un corte recto a la vista. */
  .scrub__veil--side {
    background:
      linear-gradient(to top,
        rgba(10,11,13,.94) 0%,
        rgba(10,11,13,.78) 42%,
        rgba(10,11,13,.2) 78%,
        rgba(10,11,13,0) 100%),
      radial-gradient(120% 80% at 50% 45%,
        rgba(10,11,13,0) 25%, rgba(10,11,13,.5) 100%);
  }
}

.scrub__chapters {
  position: absolute; inset: 0; z-index: 4;
  width: 100%;
}

.chapter {
  height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding:
    max(6rem, env(safe-area-inset-top))
    var(--gutter)
    max(5rem, env(safe-area-inset-bottom));
  /* --in lo escribe el JS: 0 = fuera, 1 = en el centro del viewport */
  opacity: var(--in, 0);
  transform: translate3d(0, calc((1 - var(--in, 0)) * 1.75rem), 0);
  will-change: opacity, transform;
  /* seguro de legibilidad: el film tiene tramos brillantes (la línea del
     final pasa justo detrás del texto). No se ve, pero salva el contraste. */
  text-shadow: 0 1px 28px rgba(10, 11, 13, .9), 0 0 6px rgba(10, 11, 13, .55);
}

.chapter--center { align-items: center; text-align: center; }

/* último tercio: el fondo se abre a la ventana y quema por arriba.
   El texto baja a la mesa, que es la única zona que sigue oscura. */
.chapter--bottom {
  justify-content: flex-end;
  padding-bottom: max(6rem, env(safe-area-inset-bottom));
}

/* Apoyado abajo hay menos alto disponible que centrado: si el texto
   conserva el cuerpo grande, se sale por el borde inferior. */
.chapter--bottom .punch   { font-size: clamp(1.75rem, 4vw, 3.25rem); max-width: 24ch; }
.chapter--bottom .display { font-size: clamp(1.625rem, 3.4vw, 3rem); }

@media (max-width: 860px) {
  /* el texto se apoya abajo, sobre el velo */
  .chapter { justify-content: flex-end; padding-bottom: max(7rem, env(safe-area-inset-bottom)); }
  .chapter--center { justify-content: center; }
}

/* ─────────────── Tipografía ─────────────── */

.eyebrow {
  margin: 0 0 1.25rem;
  font: 500 .75rem/1 var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber);
}

.display {
  margin: 0;
  max-width: var(--measure);
  font-size: clamp(1.875rem, 4.4vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.display--center { margin-inline: auto; }

.lede {
  margin: 1.5rem 0 0;
  max-width: 34ch;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fog);
  text-wrap: pretty;
}
.lede--center { margin-inline: auto; }

/* el remate: solo, grande, sin nada alrededor */
.punch {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.125rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.038em;
  color: var(--amber-hot);
  text-wrap: balance;
}
.chapter--center .punch { margin-inline: auto; }

.punch--sm {
  margin-top: 2.5rem;
  max-width: 26ch;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  letter-spacing: -.022em;
  line-height: 1.2;
}

/* el cierre: la marca, no un título más */
.wordmark {
  margin: 2rem 0 0;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--amber-hot);
}

.tags {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 2.25rem 0 0; padding: 0; list-style: none;
  max-width: 40ch;
}
.tags li {
  font: 500 .75rem/1 var(--font-mono);
  letter-spacing: .05em;
  color: var(--paper);
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(18,19,22,.55);
  backdrop-filter: blur(6px);
}

/* ═══════════════ ACTO 2 — sobre negro plano ═══════════════ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.demo, .meta-proof, .caps, .cta {
  position: relative; z-index: 5;
  background: var(--ink);
  padding-inline: var(--gutter);
}

/* ── El video ── */

.demo {
  border-top: 1px solid var(--line);
  padding-block: clamp(5rem, 14vh, 9rem);
}
.demo .lede { max-width: 46ch; }
.demo .btn { margin-top: clamp(2rem, 5vh, 3rem); }
.demo .cta__note { margin-left: 0; }

.demo__frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 68rem;
  border: 1px solid var(--line);
  background: var(--ink-soft);
  display: grid; place-items: center;
  overflow: hidden;
}
/* si adentro va un <video> o un <iframe>, que llenen el marco */
.demo__frame > video, .demo__frame > iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.demo__hint {
  margin: 0;
  font: 500 .8125rem/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fog);
}

/* ── Credencial Meta Tech Provider ──
   No reproduce una insignia de Meta: es una pieza editorial propia que usa
   el lenguaje visual de Omnicore y deja el estatus verificable en texto. */

.meta-proof {
  border-top: 1px solid var(--line);
  padding-block: clamp(4rem, 10vh, 7rem);
}

.meta-proof__shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(16rem, .72fr) minmax(0, 1.55fr);
  overflow: clip;
  border: 1px solid #35312c;
  background:
    radial-gradient(circle at 4% 8%, rgba(240,149,74,.16), transparent 30rem),
    linear-gradient(135deg, #151411 0%, var(--ink-soft) 48%, #0e0f11 100%);
  box-shadow: 0 2.5rem 7rem rgba(0,0,0,.24);
}

.meta-proof__shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(242,239,234,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,239,234,.16) 1px, transparent 1px);
  background-size: 3rem 3rem;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 78%);
  mask-image: linear-gradient(90deg, #000, transparent 78%);
}

.meta-proof__visual {
  min-height: 34rem;
  padding: clamp(2rem, 4vw, 4rem);
  border-right: 1px solid #35312c;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.25rem;
}

.meta-proof__seal {
  position: relative;
  width: clamp(12rem, 18vw, 16rem);
  aspect-ratio: 1;
  border: 1px solid rgba(240,149,74,.7);
  border-radius: 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .65rem;
  background:
    radial-gradient(circle, rgba(240,149,74,.17) 0 2%, transparent 3% 36%, rgba(240,149,74,.08) 37% 38%, transparent 39%),
    linear-gradient(145deg, rgba(240,149,74,.08), rgba(10,11,13,.72));
  box-shadow:
    inset 0 0 0 .6rem rgba(10,11,13,.58),
    inset 0 0 0 calc(.6rem + 1px) rgba(240,149,74,.22),
    0 0 5rem rgba(240,149,74,.09);
}

.meta-proof__seal::before,
.meta-proof__seal::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.meta-proof__seal::before {
  inset: 13%;
  border: 1px dashed rgba(255,217,168,.34);
}

.meta-proof__seal::after {
  width: .6rem;
  aspect-ratio: 1;
  top: 10%;
  right: 20%;
  background: var(--amber-hot);
  box-shadow: 0 0 1.4rem var(--amber);
}

.meta-proof__seal-core {
  font: 600 clamp(3.75rem, 7vw, 6rem)/.85 var(--font-display);
  letter-spacing: -.09em;
  color: var(--paper);
}

.meta-proof__seal-caption,
.meta-proof__registry {
  font: 500 .625rem/1.45 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.meta-proof__seal-caption { color: var(--amber-hot); }

.meta-proof__registry {
  margin: 0;
  text-align: center;
  color: var(--fog);
}

.meta-proof__registry span { color: var(--paper); }

.meta-proof__content {
  position: relative;
  padding: clamp(2.75rem, 6vw, 6rem);
  align-self: center;
}

.meta-proof__status {
  width: fit-content;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  padding: .65rem .9rem;
  border: 1px solid rgba(240,149,74,.4);
  display: flex;
  align-items: center;
  gap: .65rem;
  background: rgba(122,61,20,.14);
  color: var(--amber-hot);
  font: 600 .72rem/1.25 var(--font-mono);
  letter-spacing: .105em;
  text-transform: uppercase;
}

.meta-proof__status-dot {
  flex: 0 0 auto;
  width: .5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--amber-hot);
  box-shadow: 0 0 0 .25rem rgba(240,149,74,.13), 0 0 1rem rgba(240,149,74,.45);
}

.meta-proof__headline { max-width: 18ch; }
.meta-proof__lede { max-width: 58ch; }

.meta-proof__facts {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-block: 1px solid #35312c;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.meta-proof__fact {
  padding: 1.5rem clamp(1rem, 2vw, 1.75rem) 1.65rem 0;
}

.meta-proof__fact + .meta-proof__fact {
  border-left: 1px solid #35312c;
  padding-left: clamp(1rem, 2vw, 1.75rem);
}

.meta-proof__fact-num {
  margin: 0 0 1.1rem;
  font: 500 .65rem/1 var(--font-mono);
  letter-spacing: .16em;
  color: var(--amber);
}

.meta-proof__fact h3 {
  margin: 0 0 .65rem;
  font-size: 1rem;
  line-height: 1.2;
}

.meta-proof__fact > p:last-child {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--fog);
}

.meta-proof__link {
  display: inline-block;
  margin-top: 2rem;
  color: var(--paper);
  font: 600 .875rem/1.4 var(--font-display);
  text-underline-offset: .35em;
  text-decoration-color: var(--amber-deep);
  transition: color .2s ease, text-decoration-color .2s ease;
}

.meta-proof__link:hover {
  color: var(--amber-hot);
  text-decoration-color: var(--amber);
}

.meta-proof__link:focus-visible {
  outline: 2px solid var(--amber-hot);
  outline-offset: .4rem;
}

.meta-proof__trademark {
  margin: 1rem 0 0;
  font-size: .6875rem;
  line-height: 1.5;
  color: #6f6b65;
}

@media (max-width: 860px) {
  .meta-proof__shell { grid-template-columns: 1fr; }

  .meta-proof__visual {
    min-height: 20rem;
    border-right: 0;
    border-bottom: 1px solid #35312c;
  }

  .meta-proof__seal { width: 11rem; }

  .meta-proof__content { padding: 2.5rem clamp(1.25rem, 7vw, 2.5rem) 3rem; }

  .meta-proof__facts { grid-template-columns: 1fr; }

  .meta-proof__fact,
  .meta-proof__fact + .meta-proof__fact {
    padding: 1.35rem 0;
    border-left: 0;
  }

  .meta-proof__fact + .meta-proof__fact { border-top: 1px solid #35312c; }
}

/* ── Las capacidades: ficha técnica, no tarjetitas ── */

.caps { border-top: 1px solid var(--line); }

/* Las separaciones las dibuja cada ficha con box-shadow, no el fondo de la
   grilla: son ocho fichas y las columnas las decide auto-fit, así que la
   última fila puede quedar incompleta. Con el fondo en la grilla, esa celda
   que no existe se veía como un rectángulo gris. Con sombras, el hueco queda
   negro. Y sombra en vez de borde porque el borde ocupa espacio: el de la
   última columna sobresale y produce scroll lateral. */
.caps__grid {
  display: grid;
  /* min(24rem, 100%) y no 24rem pelado: en un teléfono de 390px una columna
     de 384px + gutter se desborda del contenedor y corta las fichas. */
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 1px;
  overflow: clip;   /* clip, nunca hidden — recorta las sombras del perímetro */
}

/* Arriba e izquierda, no abajo y derecha: así ninguna línea queda colgando
   contra el hueco de la última fila. Las del perímetro las come el clip. */
.cap {
  background: var(--ink);
  box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line);
  padding: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 3vw, 3rem);
}

.cap__idx {
  margin: 0 0 1.5rem;
  font: 500 .75rem/1 var(--font-mono);
  letter-spacing: .16em;
  color: var(--amber);
}

.cap__h {
  margin: 0 0 1rem;
  max-width: 20ch;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -.022em;
  text-wrap: balance;
}

.cap__b {
  margin: 0; max-width: 44ch;
  font-size: 1rem; line-height: 1.6;
  color: var(--fog); text-wrap: pretty;
}

.cap__note {
  margin: 1.25rem 0 0; max-width: 40ch;
  padding-left: 1rem;
  border-left: 1px solid var(--amber-deep);
  font-size: .9375rem; line-height: 1.5;
  color: var(--paper);
}

/* ── Cierre ── */

.cta {
  border-top: 1px solid var(--line);   /* el cierre que antes ponía .caps__grid */
  padding-block: clamp(7rem, 20vh, 12rem);
  text-align: center;
}
.cta .display { max-width: 26ch; }
.cta .lede { max-width: 42ch; }   /* si no, "en un solo lugar" parte feo */

.btn {
  display: inline-block;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  padding: 1.125rem 2.25rem;
  background: var(--amber);
  color: var(--ink);
  font: 600 .9375rem/1 var(--font-display);
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 2px;
  transition: background .2s ease, transform .2s ease;
}
.cta__note {
  margin: 1.5rem auto 0; max-width: 44ch;
  font-size: .875rem; line-height: 1.5; color: var(--fog);
}

.btn:hover { background: var(--amber-hot); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--amber-hot); outline-offset: 3px; }

/* ── Pie ── */

.foot {
  position: relative; z-index: 5;
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 2.5rem var(--gutter) max(2.5rem, env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
/* apilado, no en fila: la dirección son dos renglones y al lado del wordmark
   quedaba desalineada. */
.foot__brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: .625rem;
}
.foot__addr {
  font-style: normal;   /* <address> viene en itálica por defecto */
  font-size: .875rem; line-height: 1.5; color: var(--fog);
}

/* las tres legales. También las usan las propias páginas de políticas. */
.foot__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.foot__links a {
  font-size: .875rem; color: var(--fog);
  text-decoration: none;
  transition: color .2s ease;
}
.foot__links a:hover { color: var(--paper); }
.foot__links a[aria-current="page"] { color: var(--amber); }
.foot__links a:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }

/* ─────────────── Accesibilidad ─────────────── */

@media (prefers-reduced-motion: reduce) {
  /* acá no corre el bucle del scrub, así que el nav se fija sólido de entrada */
  .nav {
    background: rgba(10, 11, 13, .82);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--line);
  }

  /* cero video: el poster cuenta la misma historia y los capítulos se leen enteros */
  .scrub { height: auto; }
  .scrub__stage { position: relative; height: 60dvh; }
  .scrub__chapters { position: relative; inset: auto; }
  .chapter {
    height: auto; min-height: 0;
    opacity: 1; transform: none;
    padding-block: clamp(4rem, 12vh, 8rem);
    border-top: 1px solid var(--line);
  }
  .scrub__veil { opacity: .35; }
}