/* =============================================================================
   Portal 2026 · Escuela de Ejecutivos
   portal.css — CSS propio del portal. Carga SIEMPRE después de tokens.css.

   Reglas del handoff respetadas:
   - Ningún hex suelto que ya tenga token. Todo color sale de var(--*).
   - Radios: 0. Sin sombras. Sin degradados.
   - Tipografía: dos familias, cuatro pesos (400/500 Inter, 500/700 Instrument Sans).
   - 1440 / 390 son referencias, no breakpoints: el layout es fluido.
   - Movimiento NO implementado todavía: sólo se dejan los ganchos y el bloque
     prefers-reduced-motion.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Reset mínimo
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
h1, h2, h3, p, figure, ul, ol, hr { margin: 0; }

hr { border: 0; }

ul, ol { padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

/* -----------------------------------------------------------------------------
   2. Variables de composición (derivadas, NO son tokens de sistema)
   Interpolan los extremos documentados en el README (390px ↔ 1440px).
   -------------------------------------------------------------------------- */
:root {
  /* Margen lateral: 24px en teléfono → 60px en escritorio */
  --gutter: clamp(1.5rem, 0.664rem + 3.43vw, 3.75rem);
  --content-max: 1440px;
  --header-h: 76px;

  /* Zona segura del globo de WhatsApp (README: ~120px derecha / ~90px pie) */
  --wa-inset-inline: clamp(1.25rem, 0.5rem + 3vw, 2.75rem);
  --wa-inset-block: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);

  /* Tamaños intermedios aprobados como excepción (README · tabla de tipografía).
     Interpolación lineal entre el valor de teléfono y el de escritorio. */
  --fs-emphasis: clamp(1.625rem, 1.207rem + 1.71vw, 2.75rem);   /* 26 → 44  (01 «fortalecemos…») */
  --fs-closing:  clamp(2.125rem, 1.429rem + 2.86vw, 4rem);      /* 34 → 64  (08 «Y empezamos.») */
  --fs-node:     clamp(1.875rem, 1.643rem + 0.95vw, 2.5rem);    /* 30 → 40  (03 «CRITERIO») */
  --fs-promise:  clamp(1.25rem, 1.064rem + 0.76vw, 1.75rem);    /* 20 → 28  (03 promesas) */
  --fs-milestone-title: clamp(1.25rem, 1.135rem + 0.48vw, 1.5rem); /* 20 → 24 */
  --fs-note: clamp(0.875rem, 0.79rem + 0.36vw, 1.0625rem);        /* 14 → 17  (notas de hito, refrán) */

  /* Ritmo vertical de sección */
  --scene-pad-block: clamp(4rem, 2.5rem + 6vw, 8.5rem);

  /* Anillo de foco propio del sistema (README: no el default del navegador) */
  --focus-ring: 2px solid var(--red);
  --focus-ring-offset: 3px;
}

/* -----------------------------------------------------------------------------
   3. Base del documento
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--dark);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Página 1: fondo negro dominante */
body.page--1 { background: var(--black); }

/* Foco visible propio del sistema. El color lo decide la SUPERFICIE bajo el
   elemento, no un estado cromático global de la página:
   - superficie clara  → --red   (~11:1 sobre --white)
   - superficie oscura  → --gold  (acento gráfico del sistema, ≥3:1 sobre --black)
   - superficie roja (08) → --white (7.9:1; el dorado no llega a 3:1 sobre --red) */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.site-header--dark :focus-visible,
.nav-overlay :focus-visible,
.scene--01 :focus-visible,
.scene--02 :focus-visible,
.site-foot :focus-visible,
.wa-float:focus-visible {
  outline-color: var(--gold);
}
.site-header--red :focus-visible,
.scene--08 :focus-visible {
  outline-color: var(--white);
}

/* Utilidad: texto sólo para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: translateY(-120%);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-body-base);
  padding: 12px 18px;
  z-index: 1000;
}
.skip-link:focus { transform: translateY(12px); }

/* -----------------------------------------------------------------------------
   4. Primitivas de layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sangrado a ancho completo dentro de un .wrap */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.stack > * + * { margin-top: var(--flow, 1rem); }

/* -----------------------------------------------------------------------------
   5. Tipografía — roles
   -------------------------------------------------------------------------- */
.t-display-1,
.t-display-2,
.t-display-3,
.t-eyebrow { font-family: var(--font-display); }

.t-display-1 {
  font-weight: 700;
  font-size: var(--text-display-1);
  line-height: 0.94;
  letter-spacing: -0.04em;
}
.t-display-2 {
  font-weight: 700;
  font-size: var(--text-display-2);
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.t-display-3 {
  font-weight: 500;
  font-size: var(--text-display-3);
  line-height: 1.28;
  letter-spacing: -0.02em;
}
.t-body-lg {
  font-size: var(--text-body-lg);
  line-height: 1.55;
}
.t-eyebrow {
  font-weight: 700;
  font-size: var(--text-body-base);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.weight-500 { font-weight: 500; }
.weight-700 { font-weight: 700; }
.ink-red   { color: var(--red); }
.ink-gold  { color: var(--gold); }
.ink-black { color: var(--black); }
.ink-dark  { color: var(--dark); }
.ink-white { color: var(--white); }

/* -----------------------------------------------------------------------------
   6. Enlaces y botones
   -------------------------------------------------------------------------- */
.link {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 120ms cubic-bezier(0.2, 0, 0.2, 1);
}
.link:hover { color: var(--red-dark); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-body-base);
  letter-spacing: -0.01em;
  padding: 15px 26px;
  border: 1px solid transparent;
  transition: background-color 120ms cubic-bezier(0.2, 0, 0.2, 1),
              color 120ms cubic-bezier(0.2, 0, 0.2, 1);
}
.btn--red    { background: var(--red);   color: var(--white); }
.btn--red:hover { background: var(--red-dark); }
.btn--dark   { background: var(--black); color: var(--white); }
/* No hay token más oscuro que --black en el sistema; el "oscurecer al hover"
   del manual se resuelve con --black hasta que exista uno. */
.btn--dark:hover { background: var(--black); }
.btn--light  { background: var(--white); color: var(--black); }
.btn--ghost-dark  { border-color: var(--black); color: var(--black); }
.btn--ghost-dark:hover { background: var(--black); color: var(--white); }
.btn--ghost-white { border-color: rgba(255, 255, 255, 0.6); color: var(--white); }
.btn--ghost-white:hover { background: rgba(255, 255, 255, 0.1); }
.btn--lg { font-size: var(--text-body-lg); padding: 22px 32px; }

/* Enlace con flecha tipográfica (README: la flecha → es tipográfica) */
.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-milestone-title);
  letter-spacing: -0.02em;
  color: var(--black);
}
.arrow-link .arrow { font-size: 1.4em; line-height: 1; color: var(--red); }
.arrow-link:hover { color: var(--red-dark); }
.arrow-link--on-dark { color: var(--white); }
.arrow-link--on-dark .arrow { color: var(--gold); }
.arrow-link--on-dark:hover { color: rgba(255, 255, 255, 0.8); }

/* -----------------------------------------------------------------------------
   7. Header global
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
}
/* Fuera de la apertura el header queda fijo arriba en estado compacto (MENÚ),
   con el campo dominante de cada HTML como fondo sólido. Sin transición. */
.page--1 { --header-field: var(--black); }
.page--2 { --header-field: var(--white); }
.site-header:not(.site-header--opening) {
  background: var(--header-field, var(--white));
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.site-header__logo { height: 28px; width: auto; }

.site-header--light { border-bottom: 1px solid var(--hairline-light); }
.site-header--dark  { border-bottom: 1px solid var(--hairline-dark); }
.site-header--red   { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.site-header--opening.site-header--dark { border-bottom: 0; }

/* Navegación global desplegada (sólo en escena de apertura de cada HTML) */
.global-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: var(--text-body-base);
}
.global-nav a { padding: 4px 0; }
.global-nav a:hover { color: var(--red-dark); }
.site-header--dark .global-nav { color: rgba(255, 255, 255, 0.78); }
.site-header--dark .global-nav a:hover { color: var(--white); }
.site-header--light .global-nav { color: var(--dark); }
.global-nav .is-current {
  color: var(--black);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 3px;
}
.site-header--dark .global-nav .nav-contact,
.site-header--light .global-nav .nav-contact { color: var(--gold); }

/* Botón MENÚ (resto de las escenas) */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-header--light .menu-toggle { color: var(--black); }
.site-header--dark  .menu-toggle,
.site-header--red   .menu-toggle { color: var(--gold); }
.site-header--red   .menu-toggle { color: var(--white); }

/* En apertura: nav desplegada visible, botón oculto — hasta que no entra */
.site-header--opening .menu-toggle { display: none; }
.site-header:not(.site-header--opening) .global-nav { display: none; }

/* Bajo ~900px la nav global no entra: se pliega bajo MENÚ en todas las escenas */
@media (max-width: 899.98px) {
  .site-header--opening .global-nav { display: none; }
  .site-header--opening .menu-toggle { display: inline-flex; }
}

/* -----------------------------------------------------------------------------
   8. Overlay de menú global (campo negro a pantalla completa)
   -------------------------------------------------------------------------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3.75rem);
  overflow-y: auto;
}
.nav-overlay[hidden] { display: none; }

.nav-overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--header-h) - 20px);
}
.nav-overlay__close {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Menú abierto: marca completa (isotipo + palabra), a tamaño legible. */
.nav-overlay__logo { height: clamp(2.75rem, 2rem + 2.4vw, 3.75rem); width: auto; }

.nav-overlay__body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-block: clamp(2rem, 1rem + 6vw, 6.5rem);
}
.overlay-nav {
  display: flex;
  flex-direction: column;
}
.overlay-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-2);
  line-height: 1.14;
  letter-spacing: -0.035em;
  padding: 8px 0;
}
.overlay-nav a:hover { color: rgba(255, 255, 255, 0.7); }
.overlay-nav .nav-contact { color: var(--gold); }

.overlay-internal {
  border-right: 2px solid var(--gold);
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: right;
  font-size: var(--text-body-lg);
  color: rgba(255, 255, 255, 0.72);
}
.overlay-internal a:hover { color: var(--white); }

@media (max-width: 720px) {
  .nav-overlay__body { flex-direction: column; gap: 32px; }
  .overlay-nav a { font-size: var(--text-display-3); font-weight: 700; }
  .overlay-internal {
    border-right: 0;
    border-top: 2px solid var(--gold);
    padding-right: 0;
    padding-top: 24px;
    width: 100%;
    text-align: left;
  }
}

body.nav-open { overflow: hidden; }

/* -----------------------------------------------------------------------------
   9. Globo de WhatsApp + "Ver los programas" — flotantes, siempre abajo a la
   derecha, estándar en todo el portal (no page-específico).
   -------------------------------------------------------------------------- */
.programs-float {
  position: fixed;
  right: var(--wa-inset-inline);
  bottom: calc(var(--wa-inset-block) + 62px);
  z-index: 90;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--dark);
  background: none;
  padding: 4px 2px;
}
.programs-float:hover,
.programs-float:focus-visible { color: var(--red); }

.wa-float {
  position: fixed;
  right: var(--wa-inset-inline);
  bottom: var(--wa-inset-block);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--border-dark);
  padding: 13px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
}
.wa-float:hover { background: var(--black); }
.wa-float svg { width: 17px; height: 17px; }

@media (max-width: 700px) {
  /* En mobile el contenido ocupa todo el ancho: sin fondo propio, "Ver los
     programas" queda flotando literalmente encima del texto que se scrollea
     debajo. Se le da una superficie sólida, igual que ya tiene el globo. */
  .programs-float {
    background: var(--white);
    border: 1px solid var(--hairline-light);
    padding: 8px 14px;
  }

  /* Cerca del cierre de página (portal.js agrega la clase), el propio cierre
     ya ofrece "Ver los programas" + contacto sin superponerse — los
     flotantes se retiran en vez de duplicar la acción encima. */
  body.near-footer .programs-float,
  body.near-footer .wa-float {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-standard);
  }
}

/* -----------------------------------------------------------------------------
   10. Control de escena (Ver como película / Explorar a tu ritmo)
   Sin comportamiento de reproducción todavía: sólo guarda la preferencia.
   -------------------------------------------------------------------------- */
.scene-control {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  align-items: center;
}
.scene-control__mode {
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  font-size: var(--text-body-base);
}
.scene--01 .scene-control { color: rgba(255, 255, 255, 0.7); }
.scene--01 .scene-control__mode[aria-pressed="true"] { color: var(--white); }

/* -----------------------------------------------------------------------------
   11. Escenas — contenedor común
   -------------------------------------------------------------------------- */
.scene {
  position: relative;
  padding-block: var(--scene-pad-block);
}
.scene > .wrap { position: relative; }
.scene__eyebrow { display: block; margin-bottom: 12px; }

/* Curva / regla dorada de 2px (concepto rector) */
.gold-rule {
  height: 2px;
  background: var(--gold);
  border: 0;
}
.gold-seam { /* costura a sangre */
  height: 2px;
  background: var(--gold);
}

/* =============================================================================
   12. ESCENAS — HTML 1
   ========================================================================== */

/* ----- 01 · Apertura — marco fijo de una pantalla ------------------------- */
.scene--01 {
  background: var(--black);
  color: var(--white);
  padding-block: 0;
}

/* Estado base = «completa»: rige sin JS, con movimiento reducido o bajo 900px.
   Fluye en columna, todo el texto visible y legible, alineado a la izquierda.
   El marco fijo y la coreografía se activan sólo en .js-motion sobre >=900px
   (bloque 15.3). */
.scene--01 .s01-frame {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}
.scene--01 .s01-left {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
}
.scene--01 h1 { max-width: 620px; }
.scene--01 .opening-permanece { max-width: 620px; }
.scene--01 .opening-permanece .dim { color: rgba(255, 255, 255, 0.5); }

.scene--01 .opening-emphasis {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
}
/* «En tiempos de revoluciones tecnológicas,» — un escalón más grande que
   antes (era --text-body-lg). «fortalecemos el criterio humano» NO cambia. */
.scene--01 .opening-emphasis .lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-3);
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
}
.scene--01 .opening-emphasis .strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-emphasis);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--white);
}
.scene--01 .opening-uline { position: relative; }

.scene--01 .opening-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-3);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
}

.scene--01 .gold-seam {
  height: 2px;
  width: 100%;
  max-width: 620px;
  background: var(--gold);
}

.scene--01 .opening-controls { margin-top: auto; }

.scene--01 .s01-next {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.scene--01 .s01-next span { font-size: 1.4em; line-height: 1; }
.scene--01 .s01-next:hover { color: var(--white); }

/* Términos de fondo — decorativos, fuera del árbol de accesibilidad */
.term-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  user-select: none;
}
.term-field .layer {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 500;
}
.term-field .layer--slow { gap: 9px 24px; font-size: clamp(1rem, 0.9rem + 0.6vw, 1.5rem); color: rgba(255, 255, 255, 0.10); }
.term-field .layer--mid  { gap: 8px 20px; font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem); color: rgba(255, 255, 255, 0.14); }
.term-field .layer--fast { gap: 7px 16px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.18); font-family: var(--font-body); }

@media (max-width: 899.98px) {
  /* Bajo 900px el término de fondo no es una textura detrás del título (eso
     sólo existe en el marco fijo de escritorio, bloque 15.3): sin ese
     `position:absolute`, quedaba en el flujo normal como un bloque de texto
     larguísimo ANTES del título real — en un teléfono real llegaba a ocupar
     varias pantallas de scroll antes de leerse "El cambio se acelera."
     Es puramente decorativo (aria-hidden, sin equivalente accesible que
     perder), así que se oculta entero en vez de intentar que quepa. */
  .scene--01 .term-field { display: none; }
}

/* ----- 02 · La tensión — pantalla fija --------------------------------------
   Estado base = «completa»: sin JS, con movimiento reducido o bajo 900px.
   Fluye en columna, todo visible. El marco fijo y la secuencia se activan
   sólo en .js-motion sobre >=900px (bloque 15.5). */
.scene--02 {
  background: var(--black);
  color: var(--white);
  padding-block: 0;
}
.scene--02 .s02-frame {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}
.scene--02 .s02-seam {
  height: 2px;
  width: 100%;
  background: var(--gold);
  flex: none;
}
.scene--02 .s02-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  max-width: 620px;
}
.scene--02 .s02-lead,
.scene--02 .s02-bridge {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-3);
  line-height: 1.28;
  letter-spacing: -0.015em;
}
.scene--02 .s02-lead { color: var(--white); }
.scene--02 .s02-bridge { color: rgba(255, 255, 255, 0.5); }
.scene--02 .s02-bridge strong { font-weight: 700; color: var(--white); }
.scene--02 .s02-thesis {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-2);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 660px;
}
.scene--02 .s02-key { position: relative; }
.scene--02 .s02-next {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.scene--02 .s02-next span { font-size: 1.4em; line-height: 1; }
.scene--02 .s02-next:hover { color: var(--white); }

/* ----- 03 · El criterio — pantalla fija ----------------------------------
   Estado base = «completa»: sin JS, movimiento reducido o <900px. Fluye en
   columna, todo visible, alineado a la izquierda. El marco fijo y la
   secuencia (la línea como reloj) se activan sólo en .js-motion sobre
   >=900px (bloque 15.6). Fondo blanco: acentos en rojo, no en dorado. */
.scene--03 { background: var(--white); color: var(--dark); padding-block: 0; }

.scene--03 .s03-frame {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
}

/* Tesis · fragmento 1 fuerte (la afirmación); 2 y 3 más livianos (el mecanismo) */
.scene--03 .s03-thesis {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.3rem + 1vw, 1rem);
  max-width: 720px;
  margin: 0;
}
.scene--03 .s03-t1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-2);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--black);
}
.scene--03 .s03-t2,
.scene--03 .s03-t3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-3);
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--dark);
}

/* La línea + los cuatro puntos. Layout autónomo (relative + absolutos):
   funciona con y sin JS. */
.scene--03 .s03-seq {
  position: relative;
  height: 60px;
  margin-block: clamp(1.5rem, 1rem + 3vw, 3rem);
}
.scene--03 .s03-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--gold);
  transform-origin: left center;
}
.scene--03 .s03-stop {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.scene--03 .s03-stop--conoc  { left: 0; }
.scene--03 .s03-stop--key    { left: 34.5%; }
.scene--03 .s03-stop--accion { left: 70%; }
.scene--03 .s03-stop--result { right: 0; align-items: flex-end; }
.scene--03 .s03-dot {
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: var(--gold);
}
.scene--03 .s03-stop--key .s03-dot {
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--red);
}
.scene--03 .s03-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-body-base);
  letter-spacing: 0.14em;
  color: var(--dark);
  white-space: nowrap;
}
/* «Criterio» resaltado por la TIPOGRAFÍA (negro, con peso) + el mismo
   subrayado dorado que se dibuja de izq. a der. El cuadradito queda rojo
   pero discreto (14 px, arriba). */
.scene--03 .s03-stop--key .s03-label {
  position: relative;
  font-weight: 700;
  color: var(--black);
}
.scene--03 .s03-stop--key .s03-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: var(--gold);
  transform-origin: left center;
}

@media (max-width: 899.98px) {
  /* Los 4 "stops" se posicionan por porcentaje fijo (0/34.5/70/100%) sobre
     una línea horizontal — pensado para el ancho de escritorio. En un
     teléfono real esa franja es angosta y "Acción" (70%) y "Resultado"
     (100%, alineado a la derecha) llegan a superponerse. Se abandona la
     línea horizontal bajo 900px y se apila en una columna simple, mismo
     criterio que el resto del estado «completa». */
  .scene--03 .s03-seq {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .scene--03 .s03-track { display: none; }
  .scene--03 .s03-stop {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .scene--03 .s03-stop--result { align-items: center; }
  .scene--03 .s03-dot,
  .scene--03 .s03-stop--key .s03-dot { margin-top: 0; flex: none; }
  .scene--03 .s03-label { white-space: normal; }
}

/* Cierre */
.scene--03 .s03-close { max-width: 620px; }
.scene--03 .s03-setup { font-size: var(--text-body-lg); color: var(--dark); }
.scene--03 .s03-punch {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-3);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--red);
}

/* Conclusiones · tres renglones simples, sin líneas divisorias. Crescendo:
   «saber» y «decidir» suaves; «actuar mejor» fuerte y subrayada. */
.scene--03 .s03-promises {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 460px;
}
.scene--03 .s03-promises li {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.scene--03 .s03-p1,
.scene--03 .s03-p2 {
  font-weight: 500;
  font-size: var(--text-body-lg);
  color: var(--dark);
}
.scene--03 .s03-p3 {
  font-weight: 700;
  font-size: var(--text-display-3);
  line-height: 1.1;
  color: var(--black);
}
.scene--03 .s03-key { position: relative; }
.scene--03 .s03-key::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.16em;
  height: 3px;
  background: var(--gold);
  transform-origin: left center;
}

.scene--03 .s03-next {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.scene--03 .s03-next span { font-size: 1.4em; line-height: 1; }
.scene--03 .s03-next:hover { color: var(--black); }

/* ----- 04 · El ritmo lo marcás vos — marco fijo (HTML 2 · Pantalla 1) ----
   Abre «La propuesta». Punto más blanco del capítulo: fondo claro, tinta
   oscura, rojo SÓLO en «vos» (palabra + subrayado + latido final). Estado
   base = «completa»: sin JS, movimiento reducido o <900px → fluye en
   columna, todo visible, alineado a la izquierda. El marco fijo y la
   secuencia se activan sólo en .js-motion sobre >=900px (bloque 15.7). */
.scene--04 { background: var(--white); color: var(--dark); padding-block: 0; }

.scene--04 .s04-frame {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
}

.scene--04 .ritmo {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 0.5rem + 1.6vw, 1.6rem);
  max-width: 760px;
}

.scene--04 .ritmo-before {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-3);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--mid);            /* el pasado: recede */
}

.scene--04 .s04-seam {
  flex: none;
  height: 2px;
  width: min(620px, 46vw);
  max-width: 100%;
  background: var(--gold);
  transform-origin: left center;
}

.scene--04 .ritmo-now {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-2);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--black);
}
.scene--04 .ritmo-you { position: relative; color: var(--red); }
.scene--04 .ritmo-you::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.14em;
  height: 3px;
  background: var(--red);
  transform-origin: left center;
}

/* Aclaración chica al margen derecho. En base fluye como nota secundaria. */
.scene--04 .ritmo-coda {
  margin: 0;
  max-width: 420px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-body-base);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--dark);
}

.scene--04 .ritmo-controls { margin-top: auto; }

.scene--04 .s04-next {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.scene--04 .s04-next span { font-size: 1.4em; line-height: 1; }
.scene--04 .s04-next:hover { color: var(--black); }

@media (max-width: 899.98px) {
  .scene--04 .s04-seam { width: min(320px, 60%); }
}

/* =============================================================================
   13. ESCENAS — HTML 2
   ========================================================================== */

/* ----- 05 · La materia prima sos vos — marco fijo (HTML 2 · Pantalla 2) --
   El corazón de «La propuesta». Eje CENTRADO (como la 04). Cinco líneas:
   la primera más grande (título), las otras cuatro iguales entre sí; «La
   Escuela te guía…» en color apagado (mismo tamaño). Rojo en «vos» (solo
   color) y en «tuyos» (color + subrayado + latido). Línea dorada como
   pivote antes del veredicto.
   Estado base = «completa»: sin JS, movimiento reducido o <900px → fluye
   en columna, todo visible, centrado. El marco fijo y la secuencia se
   activan sólo en .js-motion sobre >=900px (bloque 15.8). */
.scene--05 { background: var(--white); color: var(--dark); padding-block: 0; }

.scene--05 .s05-frame {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
}

.scene--05 .materia {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.9rem, 0.5rem + 1.4vw, 1.5rem);
  max-width: 820px;
  margin-inline: auto;
}

.scene--05 .materia-lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-2);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--black);
}
.scene--05 .materia-you { color: var(--red); }

.scene--05 .materia-l1,
.scene--05 .materia-l2,
.scene--05 .materia-aux,
.scene--05 .materia-verdict {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-3);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--black);
}
/* El papel secundario: mismo tamaño, color apagado. */
.scene--05 .materia-aux { color: var(--dark); }

.scene--05 .materia-verdict { font-weight: 700; }
.scene--05 .materia-yours { position: relative; color: var(--red); }
.scene--05 .materia-yours::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.14em;
  height: 3px;
  background: var(--red);
  transform-origin: left center;
}

.scene--05 .s05-seam {
  flex: none;
  height: 2px;
  width: min(480px, 52vw);
  background: var(--gold);
  margin-block: clamp(0.5rem, 0.2rem + 1vw, 1.25rem);
  transform-origin: left center;
}

.scene--05 .s05-next {
  align-self: center;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.scene--05 .s05-next span { font-size: 1.4em; line-height: 1; }
.scene--05 .s05-next:hover { color: var(--black); }

@media (max-width: 899.98px) {
  .scene--05 .s05-seam { width: min(320px, 62%); }
}

/* ----- 06 · Así es la Escuela — marco fijo (HTML 2 · Pantalla 3) --------
   La pantalla-evidencia: qué ES la Escuela, en concreto. Encabezado y
   cierre centrados; las cuatro afirmaciones en columna alineada a la
   izquierda (bloque centrado), a tamaño menor — son el detalle que
   respalda, no una declaración. Sin rojo: un respiro del rojo del
   capítulo. Línea dorada como pivote antes de la firma.
   Estado base = «completa»: sin JS, movimiento reducido o <900px → fluye,
   todo visible. El marco fijo y la secuencia sólo en .js-motion >=900px
   (bloque 15.9). */
.scene--06 { background: var(--white); color: var(--dark); padding-block: 0; }

.scene--06 .s06-frame {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
}

.scene--06 .asi {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.25rem, 0.7rem + 2vw, 2.25rem);
  max-width: 900px;
  margin-inline: auto;
}

.scene--06 .asi-head {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-2);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--black);
}

.scene--06 .asi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 0.4rem + 1.4vw, 1.4rem);
  text-align: left;
  max-width: 720px;
}
.scene--06 .asi-list li {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-body-lg);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--black);
}
/* Arranque de cada afirmación en negrita: la espina escaneable de la lista. */
.scene--06 .asi-list li strong { font-weight: 700; }

.scene--06 .s06-seam {
  flex: none;
  height: 2px;
  width: min(480px, 52vw);
  background: var(--gold);
  transform-origin: left center;
}

.scene--06 .asi-since {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.scene--06 .s06-next {
  align-self: center;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.scene--06 .s06-next span { font-size: 1.4em; line-height: 1; }
.scene--06 .s06-next:hover { color: var(--black); }

@media (max-width: 899.98px) {
  .scene--06 .s06-seam { width: min(320px, 62%); }
}

/* ----- 07 · Por dónde empezar --------------------------------------- */
/* ----- 07 · ¿Y la inteligencia artificial? — marco fijo (HTML 2 · P4) --
   La pantalla más escueta: el tema que preocupa, respondido con calma en
   dos tiempos. Eje CENTRADO. Pregunta arriba, tres líneas de planteo,
   línea dorada + espacio grande, y el cierre-remate abajo. Rojo en «no un
   reemplazo de la tuya» y en «siempre tuya» (esta con subrayado + latido).
   Estado base = «completa»: sin JS / <900px / movimiento reducido → fluye.
   Marco fijo y secuencia sólo en .js-motion >=900px (bloque 15.10). */
.scene--07 { background: var(--white); color: var(--dark); padding-block: 0; }

.scene--07 .s07-frame {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
}

.scene--07 .ia {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.1rem, 0.7rem + 1.5vw, 1.9rem);
  max-width: 680px;
  margin-inline: auto;
}

.scene--07 .ia-q {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-3);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--black);
}

.scene--07 .ia-body,
.scene--07 .ia-close {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
.scene--07 .ia-body p,
.scene--07 .ia-close p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-body-lg);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--black);
  text-wrap: balance;
}

.scene--07 .ia-mine { color: var(--red); }

.scene--07 .ia-yours { position: relative; color: var(--red); }
.scene--07 .ia-yours::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.14em;
  height: 3px;
  background: var(--red);
  transform-origin: left center;
}

.scene--07 .s07-seam {
  flex: none;
  height: 2px;
  width: min(380px, 46vw);
  background: var(--gold);
  margin-block: clamp(0.6rem, 0.3rem + 1vw, 1.25rem);
  transform-origin: left center;
}

.scene--07 .s07-next {
  align-self: center;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.scene--07 .s07-next span { font-size: 1.4em; line-height: 1; }
.scene--07 .s07-next:hover { color: var(--black); }

@media (max-width: 899.98px) {
  .scene--07 .s07-seam { width: min(320px, 62%); }
}

/* ----- 08 · Aprender empieza por decidir — marco fijo (HTML 2 · P5) -----
   El cierre del capítulo y de HTML 2. Fondo ROJO: acá termina la deriva
   blanco→rojo. Eje CENTRADO. La frase grande; la línea dorada convertida
   en subrayado de «decidir» con un cuadradito de cierre (la espina del
   portal viene a descansar); la orden; y las dos puertas. Sin «Seguir»:
   los botones son la acción, y abajo sigue el pie.
   Estado base = «completa»: sin JS / <900px / movimiento reducido → fluye.
   Marco fijo y secuencia sólo en .js-motion >=900px (bloque 15.11). */
.scene--08 { background: var(--red); color: var(--white); padding-block: 0; }

.scene--08 .s08-frame {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
}

.scene--08 .decidir {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  max-width: 960px;
  margin-inline: auto;
}

.scene--08 .decidir-thesis {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-1);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--white);
}
.scene--08 .decidir-word { position: relative; white-space: nowrap; }
.scene--08 .decidir-word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.16em;
  height: 3px;
  background: var(--gold);
  transform-origin: left center;
}
.scene--08 .decidir-word::before {
  content: "";
  position: absolute;
  right: -0.55em;
  bottom: calc(-0.16em - 0.14em);
  width: 0.34em;
  height: 0.34em;
  background: var(--gold);
}

.scene--08 .decidir-go {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-3);
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.85);
}

.scene--08 .decidir-doors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 20px;
}

@media (max-width: 600px) {
  .scene--08 .decidir-doors { width: 100%; }
  .scene--08 .decidir-doors .btn { width: 100%; justify-content: center; }
}

/* -----------------------------------------------------------------------------
   14. Footer · compacto y único, común a / y /2/
   Fondo negro: la película cierra en el mismo negro con que abrió. Dos
   bandas — 1) cierre + puerta al siguiente capítulo, 2) identidad + legal.
   Flujo normal, no es una "pantalla" fija, ≤ un viewport. Este SÍ es
   responsive simple (es chrome de sitio, no película).
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--black);
  color: var(--light);
  font-family: var(--font-body);
  scroll-margin-top: var(--header-h);
}

/* --- Banda 1 · cierre + puerta a HTML 2 --- */
.site-foot__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem) clamp(2rem, 1rem + 5vw, 5rem);
  align-items: start;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
}

.site-foot__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* el logo al margen izquierdo, con el texto */
  gap: 10px;
}
.site-foot__mark { height: clamp(44px, 3vw + 2rem, 60px); width: auto; }
.site-foot__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 22ch;
}
.site-foot__since {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-body-base);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
}

.site-foot__act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.site-foot__next {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-3);
  letter-spacing: -0.02em;
  color: var(--white);
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 2px;
}
.site-foot__next span { color: var(--gold); font-size: 1.15em; }
.site-foot__next:hover { color: var(--gold); }
.site-foot__wa svg { width: 18px; height: 18px; flex: none; }
.site-foot__mail {
  font-size: var(--text-body-lg);
  color: var(--gold);
  border-bottom: 1px solid rgba(204, 147, 66, 0.5);
  padding-bottom: 2px;
  overflow-wrap: anywhere;
}
.site-foot__mail:hover { color: var(--white); border-bottom-color: var(--white); }
.site-foot__hours { font-size: var(--text-body-base); color: var(--mid); }
@media (max-width: 420px) {
  /* A este ancho el correo completo no entra en una línea con
     --text-body-lg y "overflow-wrap: anywhere" corta cualquier letra suelta
     (ej. la "g" final de ".org" sola). Un paso menos de tamaño alcanza para
     que entre entero en una línea. */
  .site-foot__mail { font-size: var(--text-body-base); }
}

.site-foot__social,
.site-foot__nav {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(1.25rem, 2.5vw, 2.25rem);
}
.site-foot__social {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: clamp(0.5rem, 1.5vw, 1.5rem);
  padding-top: clamp(0.75rem, 1.5vw, 1.5rem);
  border-top: 1px solid var(--hairline-dark);
}
.site-foot__social a { color: var(--light); padding-bottom: 2px; }
.site-foot__social a:hover { color: var(--gold); }
.site-foot__nav {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-body-base);
  letter-spacing: 0.04em;
}
.site-foot__nav a { color: var(--mid); }
.site-foot__nav a:hover { color: var(--white); }

/* --- Banda 2 · identidad + legal, fina --- */
.site-foot__legal {
  border-top: 1px solid var(--hairline-dark);
  padding-block: clamp(1rem, 0.9rem + 1vw, 1.5rem) clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--text-body-base);
  color: var(--mid);
}
.site-foot__brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px clamp(1.5rem, 3vw, 2.75rem);
}
.site-foot__ponline { height: clamp(18px, 1.5vw + 0.75rem, 26px); width: auto; }
.site-foot__dinamai {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--light);
}
.site-foot__dinamai img { height: clamp(20px, 1.5vw + 0.9rem, 28px); width: auto; }
.site-foot__place { font-style: normal; }
.site-foot__legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(1rem, 2vw, 1.75rem);
}
.site-foot__legal-nav a { color: var(--light); padding-bottom: 2px; }
.site-foot__legal-nav a:hover { color: var(--gold); }
.site-foot__copy { color: var(--mid); }

/* --- Responsive --- */
@media (max-width: 820px) {
  .site-foot__main { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* Zona segura del globo de WhatsApp fijo. */
  .site-foot__legal { padding-bottom: calc(var(--wa-inset-block) + 72px); }
}

/* =============================================================================
   15. MOVIMIENTO
   Primera implementación: infraestructura + escenas 06 y 01 solamente.
   (Guion de movimiento rev. 5 — docs/. La tabla de la 01, sección 4, es la
   autoridad de tiempos y estados.)

   Arquitectura: JS coordina (observa, agrega/quita clases, setea el tempo);
   CSS ejecuta (transiciones y @keyframes). El JS no interpola píxeles.

   Los estados INICIALES de movimiento (opacidades en 0, trazados sin dibujar)
   viven SÓLO bajo `.js-motion`, que agrega el script cuando está listo. Sin JS
   —o si el script falla o tarda— el portal se lee entero: nada se oculta desde
   el CSS base. Las otras seis escenas (02-05, 07, 08) todavía no se animan.
   ========================================================================== */

/* ----- 15.1 · Utilidades genéricas data-motion (infra, lista para 02-08) ---
   El observer agrega `.is-in` una sola vez al entrar en viewport. */
.js-motion [data-motion="fade"] {
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-standard);
}
.js-motion [data-motion="fade"].is-in { opacity: 1; }

.js-motion [data-motion="fade-up"] {
  opacity: 0;
  transform: translateY(var(--travel));
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.js-motion [data-motion="fade-up"].is-in { opacity: 1; transform: none; }

.js-motion [data-motion="grow-x"] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-long) var(--ease-standard);
}
.js-motion [data-motion="grow-x"].is-in { transform: scaleX(1); }

.js-motion [data-motion="grow-y"] {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-long) var(--ease-standard);
}
.js-motion [data-motion="grow-y"].is-in { transform: scaleY(1); }

@media (max-width: 899.98px) {
  :root { --travel: 10px; }   /* guion §8: en pantalla chica 16px se lee como salto */
}

/* ----- 15.2 · (libre) — la escena 06 pasó a ser la Pantalla 3 de HTML 2,
   con su propio bloque «marco fijo» en 15.9, junto a 15.7 y 15.8. --------- */

/* ----- 15.3 · Escena 01 · Apertura — marco fijo de una pantalla -----------
   Reconstrucción (sept. 2026): la escena es UNA pantalla; toda la secuencia
   transcurre dentro del alto del viewport, sin scroll interno. Sin curva
   exponencial (se descartó). La coreografía y el marco fijo viven sólo bajo
   .js-motion y >=900px; por debajo, o sin JS, o con movimiento reducido,
   rige el estado base «completa» (bloque 12: la composición que fluye).

   Reparto: el JS agrega las clases .s01-* en su momento; el CSS ejecuta las
   transiciones. El JS no interpola píxeles.

   Línea de tiempo (borrador, se ajusta mirando la pantalla · ~10.1 s):
     300   «Aprender es evolucionar.» se revela (fade suave) y queda
     900   las 7 filas de palabras cruzan de derecha a izquierda, por detrás,
           con aceleración suave · siguen en pantalla hasta el corte
     1600  «El cambio se acelera.» aparece y queda fija · la recta arranca a la vez
     3400  «El cambio se acelera.» baja al 38 % (sin moverse)
     3800  «Lo esencial permanece.» aparece bajo la recta ( «Lo esencial» atenuada )
     3800–5800  2000 ms de lectura, nada se mueve
     5800  las dos frases de la izquierda se funden y se van
     6400  las palabras se CORTAN en seco → negro limpio (recta + fijos)
     6900  «En tiempos de revoluciones tecnológicas,» (revelado lento, 800 ms)
     8000  «fortalecemos el criterio humano.» (más pausa)
     8900  subrayado dorado bajo «criterio humano» (después de respirar)
     9500  «Seguir ↓» aparece al pie
    10100  fin · «fortalecemos el criterio humano» queda latiendo (loop lento)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {

  /* --- El marco fijo: una pantalla, sin scroll interno. Descuenta el alto
     del header sticky, que ocupa ese espacio en el flujo por delante de la
     escena; si no, el pie del marco (controles, globo, «Seguir») cae por
     debajo del pliegue. --- */
  .js-motion .scene--01 .s01-frame {
    min-height: 480px;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    padding: 0;
    display: block;
    overflow: hidden;
  }

  /* Capas: términos detrás (z-index 0, SIEMPRE por detrás) · recta encima de
     los términos · texto arriba de todo · marco al frente. Las 7 filas se
     reparten en TODO el alto de la pantalla (space-between), no en una franja
     central. Deja libre el alto del header arriba. */
  .js-motion .scene--01 .term-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    padding: calc(var(--header-h) + 1.5rem) 0 2.5rem;
    pointer-events: none;
  }
  .js-motion .scene--01 .term-field .layer {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  /* La recta corre por el centro exacto de la pantalla. Las dos columnas de
     texto se separan verticalmente (gap grande) para que la recta pase JUSTO
     entre sus dos líneas — a la izquierda entre «El cambio se acelera.» y
     «Lo esencial permanece.», a la derecha entre «En tiempos…» y
     «fortalecemos el criterio humano». */
  .js-motion .scene--01 .gold-seam {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: auto;
    max-width: none;
    z-index: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-s01-line) var(--ease-s01-line),
                opacity 560ms var(--ease-standard);
  }

  /* Cada columna ocupa todo el alto del marco; sus dos líneas se anclan por
     encima y por debajo del centro exacto (donde corre la recta), con una
     separación fija a cada lado. Así la recta queda SIEMPRE entre las dos,
     con igual aire arriba y abajo, sea cual sea el alto del texto. */
  .js-motion .scene--01 .s01-left,
  .js-motion .scene--01 .opening-emphasis {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: min(620px, 46vw);
  }
  .js-motion .scene--01 .s01-left { left: var(--gutter); }
  .js-motion .scene--01 .opening-emphasis {
    right: var(--gutter);
    text-align: right;
    align-items: flex-end;
  }
  .js-motion .scene--01 .s01-left h1,
  .js-motion .scene--01 .opening-emphasis .lead {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(50% + 2.5rem);   /* borde inferior por encima de la recta */
    margin: 0;
  }
  .js-motion .scene--01 .opening-permanece,
  .js-motion .scene--01 .opening-emphasis .strong {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 2.5rem);      /* borde superior por debajo de la recta */
    margin: 0;
  }

  .js-motion .scene--01 .opening-tagline {
    position: absolute;
    right: var(--wa-inset-inline);
    bottom: calc(var(--wa-inset-block) + 4.5rem);   /* despejada por encima del globo de WhatsApp */
    z-index: 3;
    text-align: right;
    white-space: nowrap;
  }
  .js-motion .scene--01 .opening-controls {
    position: absolute;
    left: var(--gutter);
    bottom: var(--wa-inset-block);
    z-index: 3;
    margin-top: 0;
  }
  .js-motion .scene--01 .s01-next {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--wa-inset-block) + 2.2rem);
    z-index: 3;
  }

  /* --- Estados iniciales de la secuencia (sólo con JS) --- */
  .js-motion .scene--01 .term-field .layer { opacity: 0; }
  .js-motion .scene--01 .s01-left h1 {
    opacity: 0;
    color: var(--white);
    transition: opacity 520ms var(--ease-standard), color 680ms linear;
  }
  .js-motion .scene--01 .opening-permanece {
    opacity: 0;
    white-space: nowrap;
    max-width: none;
    transition: opacity 560ms var(--ease-standard);
  }
  .js-motion .scene--01 .opening-emphasis > span {
    opacity: 0;
    transform: translateY(var(--travel));
    transition: opacity 460ms var(--ease-standard),
                transform 460ms var(--ease-standard);
  }
  /* «En tiempos de revoluciones tecnológicas,» se revela más lento (e) */
  .js-motion .scene--01 .opening-emphasis .lead {
    transition-duration: 800ms;
  }
  .js-motion .scene--01 .opening-tagline {
    opacity: 0;
    transition: opacity 700ms var(--ease-standard);
  }
  .js-motion .scene--01 .s01-next {
    opacity: 0;
    transition: opacity 500ms var(--ease-standard);
  }
  .js-motion .scene--01 .opening-uline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.18em;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-underline) var(--ease-standard);
  }

  /* will-change sólo mientras corre la secuencia */
  .js-motion .scene--01[data-seq="running"] .term-field .layer,
  .js-motion .scene--01[data-seq="running"] .s01-left h1,
  .js-motion .scene--01[data-seq="running"] .opening-permanece,
  .js-motion .scene--01[data-seq="running"] .opening-emphasis > span,
  .js-motion .scene--01[data-seq="running"] .gold-seam {
    will-change: opacity, transform;
  }

  /* --- Pasos de la secuencia (clases que agrega el JS sobre .scene--01) --- */

  /* 300 — «Aprender es evolucionar.» se revela y queda */
  .scene--01.s01-tagline .opening-tagline { opacity: 1; }

  /* 900 — las 7 filas de palabras cruzan de derecha a izquierda, SIEMPRE por
     detrás, con aceleración suave (--ease-terms: lento y legible, se apura
     sólo un poco). Duran ~5,5 s: siguen en pantalla mientras entra y sale
     «Lo esencial permanece.»; recién ahí se cortan (s01-void, seco).
     El .js-motion del selector es necesario: sin él la regla que las oculta
     (4 clases) le gana a esta. El escalonado por fila evita que dos filas
     vayan acompasadas. */
  .js-motion .scene--01.s01-terms .term-field .layer { opacity: 1; transition: opacity 400ms linear; }
  .js-motion .scene--01.s01-terms .layer--slow { animation: s01-drift-slow 6200ms var(--ease-terms) forwards; }
  .js-motion .scene--01.s01-terms .layer--mid  { animation: s01-drift-mid  5600ms var(--ease-terms) forwards; }
  .js-motion .scene--01.s01-terms .layer--fast { animation: s01-drift-fast 5000ms var(--ease-terms) forwards; }
  .js-motion .scene--01.s01-terms .term-field .layer:nth-child(2) { animation-delay: 170ms; }
  .js-motion .scene--01.s01-terms .term-field .layer:nth-child(3) { animation-delay:  90ms; }
  .js-motion .scene--01.s01-terms .term-field .layer:nth-child(4) { animation-delay: 240ms; }
  .js-motion .scene--01.s01-terms .term-field .layer:nth-child(5) { animation-delay:  50ms; }
  .js-motion .scene--01.s01-terms .term-field .layer:nth-child(6) { animation-delay: 210ms; }
  .js-motion .scene--01.s01-terms .term-field .layer:nth-child(7) { animation-delay: 120ms; }

  /* 1600 — «El cambio se acelera.» aparece y queda fija · la recta arranca
     su trazado (muy lento al principio) en el mismo momento */
  .scene--01.s01-change .s01-left h1 { opacity: 1; }
  .scene--01.s01-line .gold-seam { transform: scaleX(1); }

  /* 3400 — «El cambio se acelera.» cede al 38 % (sin moverse). Los términos
     ya salieron solos por translación; no hace falta apagarlos. */
  .scene--01.s01-dim .s01-left h1 { color: rgba(255, 255, 255, 0.38); }

  /* 3800 — «Lo esencial permanece.» aparece bajo la recta y queda;
     después, 2000 ms de lectura */
  .scene--01.s01-permanece .opening-permanece { opacity: 1; }

  /* 5800 — las dos frases de la izquierda se van juntas (fundido suave).
     La recta y el resto del marco quedan. */
  .scene--01.s01-clear .s01-left h1 { opacity: 0; transition: opacity 560ms var(--ease-standard); }
  .scene--01.s01-clear .opening-permanece { opacity: 0; }

  /* ~6400 — apenas termina de irse «Lo esencial permanece.», las palabras
     se CORTAN en seco (sin desvanecerse). Queda negro limpio: sólo la recta
     y los elementos fijos. Sobre ese negro arranca «En tiempos…». */
  .scene--01.s01-void .term-field { opacity: 0; transition: none; }

  /* ~6900 / ~8000 — la síntesis, alineada a la derecha, con más pausa entre
     las dos líneas (e) */
  .scene--01.s01-lead .opening-emphasis .lead { opacity: 1; transform: none; }
  .scene--01.s01-strong .opening-emphasis .strong { opacity: 1; transform: none; }

  /* ~8900 — «fortalecemos el criterio humano» respiró; ahora el subrayado */
  .scene--01.s01-underline .opening-uline::after { transform: scaleX(1); }

  /* ~9500 — «Seguir ↓» */
  .scene--01.s01-next-in .s01-next { opacity: 1; }

  /* Fin de la secuencia — «fortalecemos el criterio humano» queda VIVO: un
     latido lento y tranquilo de intensidad, en loop. Es una excepción
     deliberada a la regla «nada respira» del guion (decisión del cliente).
     Con movimiento reducido queda apagado (bloque 15.4). */
  .scene--01.s01-done .opening-emphasis .strong {
    animation: s01-breathe 3800ms ease-in-out 600ms infinite;
  }

  /* --- Estado COMPLETA: se aplica si la persona abandona la secuencia antes
     de que termine (scrollea y la escena sale de viewport) o si activa
     movimiento reducido en vivo. Nunca se pierde contenido. --- */
  .scene--01.s01-complete .term-field .layer,
  .scene--01.s01-complete .s01-left h1,
  .scene--01.s01-complete .opening-permanece,
  .scene--01.s01-complete .opening-emphasis > span,
  .scene--01.s01-complete .opening-tagline,
  .scene--01.s01-complete .s01-next {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .scene--01.s01-complete .s01-left h1 { color: var(--white) !important; }
  .scene--01.s01-complete .term-field { opacity: 1 !important; }
  .scene--01.s01-complete .term-field .layer { flex-wrap: wrap !important; white-space: normal !important; }
  .scene--01.s01-complete .gold-seam { transform: scaleX(1) !important; opacity: 1 !important; transition: none !important; }
  .scene--01.s01-complete .opening-uline::after { transform: scaleX(1) !important; transition: none !important; }
}

/* Keyframes del cruce de términos — arrancan entrados desde la derecha (para
   que se los vea) y avanzan hacia la izquierda con recorrido MODERADO: no
   llegan a salir del todo antes del corte seco (~6,4 s). Fuera del @media
   porque una @keyframes no se anida. */
@keyframes s01-drift-slow { from { transform: translateX(30vw); } to { transform: translateX(-78vw); } }
@keyframes s01-drift-mid  { from { transform: translateX(38vw); } to { transform: translateX(-104vw); } }
@keyframes s01-drift-fast { from { transform: translateX(46vw); } to { transform: translateX(-140vw); } }

/* Latido lento de «fortalecemos el criterio humano» al terminar la secuencia.
   Sólo intensidad; nunca baja de 0.82 para que no parpadee. */
@keyframes s01-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } }


/* ----- 15.5 · Pantalla 02 · La tensión — marco fijo ----------------------
   Misma idea que la 01 pero se dispara al ENTRAR en viewport (una vez, sin
   revertir). Casi no se mueve. Nada se oculta nunca → no hace falta lógica
   de abandono (portal.js).

   Línea de tiempo (borrador, se ajusta mirando la pantalla · ~6.5 s).
   Lento, con pausas entre reveals. Todo se revela en su lugar (sólo opacidad):
      0     la recta dorada se revela (fade suave) y queda
      400   «Información, conocimiento y respuestas abundan.» (revelado lento)
     1600   «La tecnología responde, compara, calcula y propone.»
     2900   «No decide por vos.» — se revela aparte, en su lugar
     4300   «Lo que escasea… es el criterio.» — a la derecha, sólo fade, lento
     5700   subrayado dorado de «el criterio»
     6300   «Seguir ↓» aparece al pie (igual que en la 01)
     6600   fin · «el criterio» queda latiendo (loop lento)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {

  /* Alto = viewport COMPLETO (100dvh). A diferencia de la 01, la 02 no tiene
     el header ocupando espacio en el flujo por delante (ya viene fijo desde
     la 01), así que NO se le resta --header-h. Si se restaba, la pantalla
     quedaba 76 px corta y asomaba el blanco de la escena 03 al pie. */
  .js-motion .scene--02 .s02-frame {
    min-height: 480px;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    display: block;
    overflow: hidden;
  }

  /* La recta corre por el centro exacto. La intro se ancla por su borde
     inferior (por encima de la recta) y la tesis por su borde superior (por
     debajo): la recta pasa justo entre las dos, mismo criterio que la 01. */
  .js-motion .scene--02 .s02-seam {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: auto;
    z-index: 1;
    opacity: 0;
    transition: opacity 700ms var(--ease-standard);
  }
  .js-motion .scene--02 .s02-intro {
    position: absolute;
    left: var(--gutter);
    bottom: calc(50% + 2.5rem);
    z-index: 2;
    width: min(620px, 46vw);
    margin: 0;
  }
  .js-motion .scene--02 .s02-thesis {
    position: absolute;
    right: var(--gutter);
    top: calc(50% + 2.5rem);
    z-index: 2;
    width: min(660px, 48vw);
    margin: 0;
    text-align: right;
  }
  .js-motion .scene--02 .s02-next {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--wa-inset-block) + 2.2rem);
    z-index: 3;
    opacity: 0;
    transition: opacity 500ms var(--ease-standard);
  }

  /* --- Estados iniciales (sólo con JS) --- SÓLO opacidad: nada "viene desde
     abajo", todo se revela en su lugar. --- */
  .js-motion .scene--02 .s02-lead   { opacity: 0; transition: opacity 700ms var(--ease-standard); }
  .js-motion .scene--02 .s02-bridge { opacity: 0; transition: opacity 600ms var(--ease-standard); }
  .js-motion .scene--02 .s02-nd     { opacity: 0; transition: opacity 550ms var(--ease-standard); }
  .js-motion .scene--02 .s02-thesis { opacity: 0; transition: opacity 1150ms var(--ease-standard); }
  .js-motion .scene--02 .s02-key::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.18em;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-underline) var(--ease-standard);
  }

  .js-motion .scene--02[data-seq="running"] .s02-lead,
  .js-motion .scene--02[data-seq="running"] .s02-bridge,
  .js-motion .scene--02[data-seq="running"] .s02-nd,
  .js-motion .scene--02[data-seq="running"] .s02-thesis,
  .js-motion .scene--02[data-seq="running"] .s02-seam {
    will-change: opacity;
  }

  /* --- Pasos (clases que agrega el JS sobre .scene--02) --- */
  .scene--02.s02-line      .s02-seam       { opacity: 1; }
  .scene--02.s02-intro-in  .s02-lead       { opacity: 1; }
  .scene--02.s02-bridge-in .s02-bridge     { opacity: 1; }
  .scene--02.s02-nd-in     .s02-nd         { opacity: 1; }
  .scene--02.s02-thesis-in .s02-thesis     { opacity: 1; }
  .scene--02.s02-uline     .s02-key::after { transform: scaleX(1); }
  .scene--02.s02-next-in   .s02-next       { opacity: 1; }

  /* Fin — «el criterio» queda vivo: latido lento (excepción deliberada a la
     regla «nada respira», igual que en la 01). Apagado con movimiento
     reducido (bloque 15.4). */
  .scene--02.s02-done .s02-key {
    animation: s02-breathe 3800ms ease-in-out 600ms infinite;
  }

  /* Estado COMPLETA (si entra sin poder animar): todo visible, sin latido. */
  .scene--02.s02-complete .s02-lead,
  .scene--02.s02-complete .s02-bridge,
  .scene--02.s02-complete .s02-nd,
  .scene--02.s02-complete .s02-thesis,
  .scene--02.s02-complete .s02-next {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
  .scene--02.s02-complete .s02-seam { opacity: 1 !important; transition: none !important; }
  .scene--02.s02-complete .s02-key::after { transform: scaleX(1) !important; transition: none !important; }
}

/* Latido de «el criterio». Un poco más marcado que el de la 01 porque el
   objeto es más chico (dos palabras): para que se lea igual de vivo, baja
   más. Lento igual. */
@keyframes s02-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }


/* ----- 15.6 · Pantalla 03 · El criterio — marco fijo -------------------
   La LÍNEA es el reloj: se dibuja de izquierda a derecha en ~5.5 s, casi
   lineal. Todo cuelga de dónde llega el trazo. Los cuatro rótulos se
   encienden a medida que los alcanza; al llegar a «Criterio» arranca el
   cierre; casi al final entran las tres conclusiones. Fondo blanco.

   Línea de tiempo (borrador · ~7.5 s, en portal.js):
      0     la línea empieza a trazarse · «El criterio se construye.»
      440   se enciende «Conocimiento»
     1400   «Es el que convierte decisión en acción,»
     1900   el trazo llega a «Criterio» (se enciende + subrayado)
     2100   «Nadie puede formar tu criterio por vos.»
     2800   «y acción en resultado.»
     3000   «Nadie lo forma solo.»
     3850   se enciende «Acción»
     4600   «Vas a saber más.»
     5400   «Vas a decidir mejor.»
     5500   se enciende «Resultado» (fin del trazo)
     6200   «Vas a actuar mejor.»
     6800   subrayado dorado de «Vas a actuar mejor.»
     7100   «Seguir ↓»
     7500   fin
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {

  .js-motion .scene--03 .s03-frame {
    min-height: 560px;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    display: block;
    overflow: hidden;
  }

  /* La línea al centro exacto, ancho completo. Tesis arriba a la IZQUIERDA;
     cierre arriba a la DERECHA; conclusiones abajo a la DERECHA. Recorrido
     en diagonal: afirmación (izq) → línea → conclusiones (der). */
  .js-motion .scene--03 .s03-seq {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: 50%;
    margin: 0;
    z-index: 2;
  }
  .js-motion .scene--03 .s03-thesis {
    position: absolute;
    left: var(--gutter);
    bottom: calc(50% + 3.5rem);
    width: min(620px, 44vw);
    z-index: 2;
  }
  .js-motion .scene--03 .s03-close {
    position: absolute;
    right: var(--gutter);
    bottom: calc(50% + 3.5rem);
    width: min(440px, 36vw);
    text-align: right;
    z-index: 2;
  }
  .js-motion .scene--03 .s03-promises {
    position: absolute;
    right: var(--gutter);
    top: calc(50% + 5rem);
    width: min(440px, 36vw);
    align-items: flex-end;
    text-align: right;
    z-index: 2;
  }
  .js-motion .scene--03 .s03-next {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--wa-inset-block) + 2.2rem);
    z-index: 3;
  }

  /* --- Estados iniciales (sólo con JS). Reveals SUAVES: --ease-reveal y
     duraciones largas, para que los textos "se desarrollen" sin golpe. --- */
  .js-motion .scene--03 .s03-t1,
  .js-motion .scene--03 .s03-t2,
  .js-motion .scene--03 .s03-t3 { opacity: 0; transition: opacity 1100ms var(--ease-reveal); }
  .js-motion .scene--03 .s03-stop { opacity: 0; transition: opacity 620ms var(--ease-reveal); }
  .js-motion .scene--03 .s03-track {
    transform: scaleX(0);
    transition: transform var(--dur-s03-line) linear;
  }
  .js-motion .scene--03 .s03-stop--key .s03-label::after,
  .js-motion .scene--03 .s03-key::after {
    transform: scaleX(0);
    transition: transform var(--dur-underline) var(--ease-standard);
  }
  .js-motion .scene--03 .s03-setup,
  .js-motion .scene--03 .s03-punch,
  .js-motion .scene--03 .s03-promises li { opacity: 0; transition: opacity 950ms var(--ease-reveal); }
  .js-motion .scene--03 .s03-next { opacity: 0; transition: opacity 600ms var(--ease-reveal); }

  .js-motion .scene--03[data-seq="running"] .s03-track,
  .js-motion .scene--03[data-seq="running"] .s03-t1,
  .js-motion .scene--03[data-seq="running"] .s03-t2,
  .js-motion .scene--03[data-seq="running"] .s03-t3 { will-change: opacity, transform; }

  /* --- Pasos (clases que agrega el JS; .js-motion en el selector para
     ganarle a los estados iniciales) --- */
  .js-motion .scene--03.s03-line    .s03-track { transform: scaleX(1); }
  .js-motion .scene--03.s03-t1-in   .s03-t1 { opacity: 1; }
  .js-motion .scene--03.s03-t2-in   .s03-t2 { opacity: 1; }
  .js-motion .scene--03.s03-t3-in   .s03-t3 { opacity: 1; }
  .js-motion .scene--03.s03-m1  .s03-stop--conoc  { opacity: 1; }
  .js-motion .scene--03.s03-m2  .s03-stop--key    { opacity: 1; }
  .js-motion .scene--03.s03-m2  .s03-stop--key .s03-label::after { transform: scaleX(1); }
  .js-motion .scene--03.s03-m3  .s03-stop--accion { opacity: 1; }
  .js-motion .scene--03.s03-m4  .s03-stop--result { opacity: 1; }
  .js-motion .scene--03.s03-setup-in .s03-setup { opacity: 1; }
  .js-motion .scene--03.s03-punch-in .s03-punch { opacity: 1; }
  .js-motion .scene--03.s03-p1-in .s03-p1 { opacity: 1; }
  .js-motion .scene--03.s03-p2-in .s03-p2 { opacity: 1; }
  .js-motion .scene--03.s03-p3-in .s03-p3 { opacity: 1; }
  .js-motion .scene--03.s03-uline .s03-key::after { transform: scaleX(1); }
  .js-motion .scene--03.s03-next-in .s03-next { opacity: 1; }

  /* Estado COMPLETA */
  .scene--03.s03-complete .s03-t1,
  .scene--03.s03-complete .s03-t2,
  .scene--03.s03-complete .s03-t3,
  .scene--03.s03-complete .s03-stop,
  .scene--03.s03-complete .s03-setup,
  .scene--03.s03-complete .s03-punch,
  .scene--03.s03-complete .s03-promises li,
  .scene--03.s03-complete .s03-next {
    opacity: 1 !important;
    transition: none !important;
  }
  .scene--03.s03-complete .s03-track,
  .scene--03.s03-complete .s03-stop--key .s03-label::after,
  .scene--03.s03-complete .s03-key::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}

/* ----- 15.7 · Pantalla 1 (escena 04) · «El ritmo lo marcás vos» --------
   Abre el capítulo «La propuesta» de HTML 2. Marco fijo de una pantalla
   (mismo patrón que 01-03). Arranca EN CARGA (fonts.ready / 1000 ms), una
   vez, como la 01 — es el #inicio de /2/. Reproducible desde «Ver como
   película». Bisagra: lenta y suave, con pausas de lectura reales (~8.1 s).
   Reveals SÓLO por opacidad (curva --ease-reveal, «se desarrolla sin
   golpe»), más el trazo de la recta y del subrayado de «vos».

   EJE DE HTML 2: el texto principal va CENTRADO (el capítulo trata de «vos
   en el centro»). Contrapunto: la aclaración chica, fija, ABAJO a la derecha
   — misma zona y rol que «Aprender es evolucionar.» en la 01: el pensamiento
   que se posa. Los componentes fijos (controles, «Seguir», globo) quedan
   donde estaban.

   Línea de tiempo (borrador, se ajusta mirando la pantalla · ~8.1 s):
      0     «No todos necesitan lo mismo…» ya está, abajo a la derecha (no anima)
      0     pantalla casi vacía: ~1.3 s para leer esa línea sola
    ~1300   «Durante años, la oferta marcaba el ritmo.» — fade in lento (~950 ms), gris
    ~2800   respira: ~1.5 s con la primera línea sola
    ~2800   la recta dorada se dibuja de izq. a der. (~1600 ms, lineal) — divisor antes/ahora
    ~4700   «Ahora, el ritmo lo marcás vos.» — fade in lento (~900 ms), negro pleno
    ~5600   respira: ~2 s
    ~6700   «vos» vira negro→rojo (~700 ms) + subrayado rojo que se dibuja (~750 ms)
    ~7600   «Seguir ↓» al pie
    ~8100   fin · «vos» queda latiendo (loop rojo lento; apagado con movimiento reducido)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {

  /* Marco fijo: una pantalla, sin scroll interno. Descuenta el alto del
     header sticky, que ocupa ese espacio en el flujo por delante (igual que
     la 01 — la 04 abre el HTML 2). */
  .js-motion .scene--04 .s04-frame {
    min-height: 480px;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    padding: 0;
    display: block;
    overflow: hidden;
  }

  /* Bloque principal CENTRADO (eje de HTML 2), centrado también en vertical.
     La recta se dibuja dentro del bloque, a todo su ancho (divisor antes/ahora). */
  .js-motion .scene--04 .ritmo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(820px, 70vw);
    max-width: none;
    text-align: center;
    align-items: center;
    z-index: 2;
    gap: clamp(1.1rem, 0.7rem + 1.6vw, 2rem);
  }
  .js-motion .scene--04 .s04-seam { width: 100%; }

  /* Aclaración · chica, fija, ABAJO a la derecha, despejada por encima del
     globo de WhatsApp (misma zona que la tagline de la 01). No anima. */
  .js-motion .scene--04 .ritmo-coda {
    position: absolute;
    right: var(--gutter);
    bottom: calc(var(--wa-inset-block) + 5rem);
    width: min(300px, 26vw);
    text-align: right;
    z-index: 3;
  }
  .js-motion .scene--04 .ritmo-controls {
    position: absolute;
    left: var(--gutter);
    bottom: var(--wa-inset-block);
    z-index: 3;
    margin-top: 0;
  }
  .js-motion .scene--04 .s04-next {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--wa-inset-block) + 2.2rem);
    z-index: 3;
  }

  /* --- Estados iniciales (sólo con JS). Lento y sin golpe: --ease-reveal y
     duraciones largas. La aclaración de la derecha NO tiene estado inicial:
     está desde el primer fotograma. --- */
  .js-motion .scene--04 .ritmo-before { opacity: 0; transition: opacity 950ms var(--ease-reveal); }
  .js-motion .scene--04 .s04-seam { transform: scaleX(0); transition: transform 1600ms linear; }
  .js-motion .scene--04 .ritmo-now { opacity: 0; transition: opacity 900ms var(--ease-reveal); }
  .js-motion .scene--04 .ritmo-you { color: var(--black); transition: color 700ms var(--ease-standard); }
  .js-motion .scene--04 .ritmo-you::after { transform: scaleX(0); transition: transform 750ms var(--ease-standard); }
  .js-motion .scene--04 .s04-next { opacity: 0; transition: opacity 600ms var(--ease-reveal); }

  .js-motion .scene--04[data-seq="running"] .ritmo-before,
  .js-motion .scene--04[data-seq="running"] .s04-seam,
  .js-motion .scene--04[data-seq="running"] .ritmo-now { will-change: opacity, transform; }

  /* --- Pasos (clases que agrega el JS sobre .scene--04; .js-motion en el
     selector para ganarle a los estados iniciales) --- */
  .js-motion .scene--04.s04-a       .ritmo-before     { opacity: 1; }
  .js-motion .scene--04.s04-seam-in .s04-seam         { transform: scaleX(1); }
  .js-motion .scene--04.s04-now-in  .ritmo-now        { opacity: 1; }
  .js-motion .scene--04.s04-you     .ritmo-you        { color: var(--red); }
  .js-motion .scene--04.s04-you     .ritmo-you::after { transform: scaleX(1); }
  .js-motion .scene--04.s04-next-in .s04-next         { opacity: 1; }

  /* Fin — «vos» queda vivo: latido rojo lento (excepción deliberada a la
     regla «nada respira», igual que «criterio» en 01 y 02). */
  .js-motion .scene--04.s04-done .ritmo-you {
    animation: s04-breathe 3800ms ease-in-out 600ms infinite;
  }

  /* Estado COMPLETA (si entra sin poder animar, o si se abandona a medias) */
  .scene--04.s04-complete .ritmo-before,
  .scene--04.s04-complete .ritmo-now,
  .scene--04.s04-complete .ritmo-coda,
  .scene--04.s04-complete .s04-next {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
  .scene--04.s04-complete .ritmo-you {
    color: var(--red) !important;
    transition: none !important;
    animation: none !important;
  }
  .scene--04.s04-complete .s04-seam,
  .scene--04.s04-complete .ritmo-you::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}

/* Latido de «vos» — mismo criterio que «el criterio» de la 02: objeto chico
   (una palabra), baja hasta 0.75 para leerse igual de vivo. Lento. Fuera del
   @media porque una @keyframes no se anida. */
@keyframes s04-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }


/* ----- 15.8 · Pantalla 2 (escena 05) · «La materia prima sos vos» -----
   El corazón del capítulo. Marco fijo, eje CENTRADO (como la 04). Se
   dispara al ENTRAR en viewport (una vez), no en carga. Reproducible desde
   «Ver como película». Lenta, con pausas de lectura (~8.7 s). Reveals sólo
   por opacidad (--ease-reveal), más el trazo de la recta y del subrayado
   de «tuyos». «vos» sólo vira a rojo; «tuyos» vira a rojo + subrayado y
   queda latiendo.

   Línea de tiempo (borrador, se ajusta mirando la pantalla · ~8.7 s):
      0     «La materia prima sos vos.» — fade in lento (~950 ms)
    ~1300   «vos» vira negro→rojo (~700 ms)
    ~2400   «En tu realidad, con tus desafíos.»
    ~3400   «Es tu aspiración la que marca el rumbo.»
    ~4400   «La Escuela te guía, te apoya, te acompaña.» (color apagado)
    ~5600   pausa → la recta dorada se dibuja de izq. a der. (~1400 ms) — pivote
    ~6400   «El criterio, las decisiones y la acción son tuyos.»
    ~7300   «tuyos» vira negro→rojo (~700 ms) + subrayado rojo que se dibuja (~750 ms)
    ~8200   «Seguir ↓» al pie
    ~8700   fin · «tuyos» queda latiendo (loop rojo lento; apagado con movimiento reducido)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {

  /* Alto = viewport COMPLETO: el header ya viene fijo desde la 04, no ocupa
     flujo por delante de esta escena (mismo criterio que la 02/03). */
  .js-motion .scene--05 .s05-frame {
    min-height: 480px;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    display: block;
    overflow: hidden;
  }

  /* Bloque centrado (eje de HTML 2), centrado también en vertical. La recta
     es un hijo del bloque; se dibuja a un ancho fijo, centrado. */
  .js-motion .scene--05 .materia {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(880px, 74vw);
    max-width: none;
    z-index: 2;
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  }
  .js-motion .scene--05 .s05-next {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--wa-inset-block) + 2.2rem);
    margin-top: 0;
    z-index: 3;
  }

  /* --- Estados iniciales (sólo con JS). Lento y sin golpe. --- */
  .js-motion .scene--05 .materia-lead { opacity: 0; transition: opacity 950ms var(--ease-reveal); }
  .js-motion .scene--05 .materia-you { color: var(--black); transition: color 700ms var(--ease-standard); }
  .js-motion .scene--05 .materia-l1,
  .js-motion .scene--05 .materia-l2,
  .js-motion .scene--05 .materia-aux { opacity: 0; transition: opacity 800ms var(--ease-reveal); }
  .js-motion .scene--05 .s05-seam { transform: scaleX(0); transition: transform 1400ms linear; }
  .js-motion .scene--05 .materia-verdict { opacity: 0; transition: opacity 900ms var(--ease-reveal); }
  .js-motion .scene--05 .materia-yours { color: var(--black); transition: color 700ms var(--ease-standard); }
  .js-motion .scene--05 .materia-yours::after { transform: scaleX(0); transition: transform 750ms var(--ease-standard); }
  .js-motion .scene--05 .s05-next { opacity: 0; transition: opacity 600ms var(--ease-reveal); }

  .js-motion .scene--05[data-seq="running"] .materia-lead,
  .js-motion .scene--05[data-seq="running"] .materia-l1,
  .js-motion .scene--05[data-seq="running"] .materia-l2,
  .js-motion .scene--05[data-seq="running"] .materia-aux,
  .js-motion .scene--05[data-seq="running"] .s05-seam,
  .js-motion .scene--05[data-seq="running"] .materia-verdict { will-change: opacity, transform; }

  /* --- Pasos (clases que agrega el JS sobre .scene--05) --- */
  .js-motion .scene--05.s05-lead    .materia-lead        { opacity: 1; }
  .js-motion .scene--05.s05-you     .materia-you         { color: var(--red); }
  .js-motion .scene--05.s05-l1      .materia-l1          { opacity: 1; }
  .js-motion .scene--05.s05-l2      .materia-l2          { opacity: 1; }
  .js-motion .scene--05.s05-aux     .materia-aux         { opacity: 1; }
  .js-motion .scene--05.s05-seam-in .s05-seam            { transform: scaleX(1); }
  .js-motion .scene--05.s05-verdict .materia-verdict     { opacity: 1; }
  .js-motion .scene--05.s05-yours   .materia-yours       { color: var(--red); }
  .js-motion .scene--05.s05-yours   .materia-yours::after { transform: scaleX(1); }
  .js-motion .scene--05.s05-next-in .s05-next            { opacity: 1; }

  /* Fin — «tuyos» queda vivo: latido rojo lento (misma excepción que 01/02/04). */
  .js-motion .scene--05.s05-done .materia-yours {
    animation: s05-breathe 3800ms ease-in-out 600ms infinite;
  }

  /* Estado COMPLETA (si entra sin poder animar, o si se abandona a medias) */
  .scene--05.s05-complete .materia-lead,
  .scene--05.s05-complete .materia-l1,
  .scene--05.s05-complete .materia-l2,
  .scene--05.s05-complete .materia-aux,
  .scene--05.s05-complete .materia-verdict,
  .scene--05.s05-complete .s05-next {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
  .scene--05.s05-complete .materia-you,
  .scene--05.s05-complete .materia-yours {
    color: var(--red) !important;
    transition: none !important;
    animation: none !important;
  }
  .scene--05.s05-complete .s05-seam,
  .scene--05.s05-complete .materia-yours::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}

/* Latido de «tuyos» — mismo criterio que «vos» en la 04. Fuera del @media. */
@keyframes s05-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }


/* ----- 15.9 · Pantalla 3 (escena 06) · «Así es la Escuela» ------------
   La pantalla-evidencia. Marco fijo, eje CENTRADO. Se dispara al ENTRAR
   en viewport (una vez). Reproducible desde película. Pausada (~9.9 s):
   cada afirmación espera a la anterior, con tiempo para leerla; las que
   ocupan dos renglones tienen tiempo extra. Reveals sólo por opacidad
   (--ease-reveal), más el trazo de la recta. Sin rojo, sin palabra latiendo.

   Línea de tiempo (borrador, se ajusta mirando la pantalla · ~9.9 s):
      0     «Así es la Escuela:» — fade in (~900 ms)
    ~1300   «Contenido propio, producido especialmente…»
    ~2800   «Metodologías propias. Tecnología propia…»
    ~4300   «Dos modos de cursar…» (dos renglones)
    ~6000   «Nos juntamos por Meet…» (dos renglones)
    ~7500   pausa → la recta dorada se dibuja (~1400 ms) — pivote
    ~8400   «Desde 1999, sin dejar de cambiar.»
    ~9400   «Seguir ↓»
    ~9900   fin
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {

  /* Alto = viewport COMPLETO (el header ya viene fijo desde la 04). */
  .js-motion .scene--06 .s06-frame {
    min-height: 480px;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    display: block;
    overflow: hidden;
  }

  /* Bloque centrado (eje de HTML 2), centrado también en vertical. */
  .js-motion .scene--06 .asi {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(920px, 76vw);
    max-width: none;
    z-index: 2;
    gap: clamp(1.4rem, 0.8rem + 2vw, 2.5rem);
  }
  .js-motion .scene--06 .s06-next {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--wa-inset-block) + 2.2rem);
    margin-top: 0;
    z-index: 3;
  }

  /* --- Estados iniciales (sólo con JS) --- */
  .js-motion .scene--06 .asi-head { opacity: 0; transition: opacity 900ms var(--ease-reveal); }
  .js-motion .scene--06 .asi-list li { opacity: 0; transition: opacity 700ms var(--ease-reveal); }
  .js-motion .scene--06 .s06-seam { transform: scaleX(0); transition: transform 1400ms linear; }
  .js-motion .scene--06 .asi-since { opacity: 0; transition: opacity 900ms var(--ease-reveal); }
  .js-motion .scene--06 .s06-next { opacity: 0; transition: opacity 600ms var(--ease-reveal); }

  .js-motion .scene--06[data-seq="running"] .asi-head,
  .js-motion .scene--06[data-seq="running"] .asi-list li,
  .js-motion .scene--06[data-seq="running"] .s06-seam,
  .js-motion .scene--06[data-seq="running"] .asi-since { will-change: opacity, transform; }

  /* --- Pasos (clases que agrega el JS sobre .scene--06) --- */
  .js-motion .scene--06.s06-head    .asi-head  { opacity: 1; }
  .js-motion .scene--06.s06-c1      .asi-c1    { opacity: 1; }
  .js-motion .scene--06.s06-c2      .asi-c2    { opacity: 1; }
  .js-motion .scene--06.s06-c3      .asi-c3    { opacity: 1; }
  .js-motion .scene--06.s06-c4      .asi-c4    { opacity: 1; }
  .js-motion .scene--06.s06-seam-in .s06-seam  { transform: scaleX(1); }
  .js-motion .scene--06.s06-since   .asi-since { opacity: 1; }
  .js-motion .scene--06.s06-next-in .s06-next  { opacity: 1; }

  /* Estado COMPLETA (si entra sin poder animar, o si se abandona a medias) */
  .scene--06.s06-complete .asi-head,
  .scene--06.s06-complete .asi-list li,
  .scene--06.s06-complete .asi-since,
  .scene--06.s06-complete .s06-next {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
  .scene--06.s06-complete .s06-seam {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}


/* ----- 15.10 · Pantalla 4 (escena 07) · «¿Y la inteligencia artificial?»
   La pantalla más escueta. Marco fijo, eje CENTRADO. Se dispara al ENTRAR
   en viewport (una vez). Reproducible desde película. Lenta, con una pausa
   real entre frase y frase y un espacio grande antes del cierre (~11.2 s). Reveals sólo
   por opacidad (--ease-reveal), más el trazo de la recta y del subrayado
   de «siempre tuya». «no un reemplazo de la tuya» nace roja con su línea;
   «siempre tuya» vira a rojo + subrayado y queda latiendo.

   Línea de tiempo (borrador, se ajusta mirando la pantalla · ~9.3 s):
      0      «¿Y el rol de la inteligencia artificial?» — fade in (~900 ms)
    ~1400    «Es otra inteligencia, no un reemplazo de la tuya.»
    ~3000    «No viene a hacer tu trabajo ni a pensar por vos.»   (~1.6 s de lectura)
    ~4600    «Bien llevada, te hace más rápido, más amplio, más agudo.»
    ~6100    pausa → la recta dorada se dibuja (~1400 ms) — pivote
    ~7100    espacio → «La vas a usar de verdad, en cada curso.»
    ~8800    «Vas a aprender lo más útil: cuándo usarla y cuándo no. La decisión, siempre tuya.»
    ~9800    «siempre tuya» vira negro→rojo (~700 ms) + subrayado rojo que se dibuja (~750 ms)
    ~10700   «Seguir ↓»
    ~11200   fin · «siempre tuya» queda latiendo (apagado con movimiento reducido)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {

  .js-motion .scene--07 .s07-frame {
    min-height: 480px;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    display: block;
    overflow: hidden;
  }

  .js-motion .scene--07 .ia {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(680px, 58vw);
    max-width: none;
    z-index: 2;
    gap: clamp(1.4rem, 0.9rem + 1.8vw, 2.3rem);
  }
  .js-motion .scene--07 .s07-seam {
    margin-block: clamp(1.1rem, 0.7rem + 1.6vw, 2.1rem);
  }
  .js-motion .scene--07 .s07-next {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--wa-inset-block) + 2.2rem);
    margin-top: 0;
    z-index: 3;
  }

  /* --- Estados iniciales (sólo con JS). «ia-mine» NO se toca: nace roja. --- */
  .js-motion .scene--07 .ia-q { opacity: 0; transition: opacity 900ms var(--ease-reveal); }
  .js-motion .scene--07 .ia-body p { opacity: 0; transition: opacity 800ms var(--ease-reveal); }
  .js-motion .scene--07 .s07-seam { transform: scaleX(0); transition: transform 1400ms linear; }
  .js-motion .scene--07 .ia-close p { opacity: 0; transition: opacity 850ms var(--ease-reveal); }
  .js-motion .scene--07 .ia-yours { color: var(--black); transition: color 700ms var(--ease-standard); }
  .js-motion .scene--07 .ia-yours::after { transform: scaleX(0); transition: transform 750ms var(--ease-standard); }
  .js-motion .scene--07 .s07-next { opacity: 0; transition: opacity 600ms var(--ease-reveal); }

  .js-motion .scene--07[data-seq="running"] .ia-q,
  .js-motion .scene--07[data-seq="running"] .ia-body p,
  .js-motion .scene--07[data-seq="running"] .s07-seam,
  .js-motion .scene--07[data-seq="running"] .ia-close p { will-change: opacity, transform; }

  /* --- Pasos (clases que agrega el JS sobre .scene--07) --- */
  .js-motion .scene--07.s07-q       .ia-q            { opacity: 1; }
  .js-motion .scene--07.s07-b1      .ia-b1           { opacity: 1; }
  .js-motion .scene--07.s07-b2      .ia-b2           { opacity: 1; }
  .js-motion .scene--07.s07-b3      .ia-b3           { opacity: 1; }
  .js-motion .scene--07.s07-seam-in .s07-seam        { transform: scaleX(1); }
  .js-motion .scene--07.s07-c1      .ia-c1           { opacity: 1; }
  .js-motion .scene--07.s07-c2      .ia-c2           { opacity: 1; }
  .js-motion .scene--07.s07-yours   .ia-yours        { color: var(--red); }
  .js-motion .scene--07.s07-yours   .ia-yours::after { transform: scaleX(1); }
  .js-motion .scene--07.s07-next-in .s07-next        { opacity: 1; }

  /* Fin — «siempre tuya» queda viva: latido rojo lento (misma excepción). */
  .js-motion .scene--07.s07-done .ia-yours {
    animation: s07-breathe 3800ms ease-in-out 600ms infinite;
  }

  /* Estado COMPLETA (si entra sin poder animar, o si se abandona a medias) */
  .scene--07.s07-complete .ia-q,
  .scene--07.s07-complete .ia-body p,
  .scene--07.s07-complete .ia-close p,
  .scene--07.s07-complete .s07-next {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
  .scene--07.s07-complete .ia-yours {
    color: var(--red) !important;
    transition: none !important;
    animation: none !important;
  }
  .scene--07.s07-complete .s07-seam,
  .scene--07.s07-complete .ia-yours::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}

/* Latido de «siempre tuya» — mismo criterio que 04/05. Fuera del @media. */
@keyframes s07-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }


/* ----- 15.11 · Pantalla 5 (escena 08) · «Aprender empieza por decidir» --
   El cierre del capítulo y de HTML 2. Fondo rojo, marco fijo, eje CENTRADO.
   Se dispara al ENTRAR en viewport (una vez). Última de la cadena en modo
   película: acá se detiene. Corta (~4.8 s): es la acción, no se hace
   esperar. Reveals por opacidad (--ease-reveal); el subrayado dorado de
   «decidir» se dibuja y lo cierra un cuadradito. Sin palabra latiendo.

   Línea de tiempo (borrador, se ajusta mirando la pantalla · ~4.8 s):
      0     «Aprender empieza por decidir.» — fade in lento (~1000 ms)
    ~1400   el subrayado dorado se dibuja bajo «decidir» (~1200 ms)
    ~2600   aparece el cuadradito de cierre
    ~3000   «Elegí tu puerta. Empezá.»
    ~4100   los dos botones aparecen
    ~4800   fin
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {

  .js-motion .scene--08 .s08-frame {
    min-height: 480px;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    display: block;
    overflow: hidden;
  }

  .js-motion .scene--08 .decidir {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, 78vw);
    max-width: none;
    z-index: 2;
  }

  /* --- Estados iniciales (sólo con JS) --- */
  .js-motion .scene--08 .decidir-thesis { opacity: 0; transition: opacity 1000ms var(--ease-reveal); }
  .js-motion .scene--08 .decidir-word::after { transform: scaleX(0); transition: transform 1200ms linear; }
  .js-motion .scene--08 .decidir-word::before { opacity: 0; transition: opacity 300ms var(--ease-standard); }
  .js-motion .scene--08 .decidir-go { opacity: 0; transition: opacity 800ms var(--ease-reveal); }
  .js-motion .scene--08 .decidir-doors { opacity: 0; transition: opacity 700ms var(--ease-reveal); }

  .js-motion .scene--08[data-seq="running"] .decidir-thesis,
  .js-motion .scene--08[data-seq="running"] .decidir-word::after,
  .js-motion .scene--08[data-seq="running"] .decidir-go,
  .js-motion .scene--08[data-seq="running"] .decidir-doors { will-change: opacity, transform; }

  /* --- Pasos (clases que agrega el JS sobre .scene--08) --- */
  .js-motion .scene--08.s08-thesis .decidir-thesis        { opacity: 1; }
  .js-motion .scene--08.s08-line   .decidir-word::after   { transform: scaleX(1); }
  .js-motion .scene--08.s08-cap    .decidir-word::before  { opacity: 1; }
  .js-motion .scene--08.s08-go     .decidir-go            { opacity: 1; }
  .js-motion .scene--08.s08-doors  .decidir-doors         { opacity: 1; }

  /* Estado COMPLETA (si entra sin poder animar, o si se abandona a medias) */
  .scene--08.s08-complete .decidir-thesis,
  .scene--08.s08-complete .decidir-go,
  .scene--08.s08-complete .decidir-doors {
    opacity: 1 !important;
    transition: none !important;
  }
  .scene--08.s08-complete .decidir-word::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .scene--08.s08-complete .decidir-word::before {
    opacity: 1 !important;
    transition: none !important;
  }
}


/* ----- 15.4 · prefers-reduced-motion ------------------------------------
   Estado COMPLETA inmediato, sin transiciones. El script además escucha el
   cambio de preferencia en vivo y cancela cualquier secuencia en curso.
   El control «Ver como película» SÍ se retira con movimiento reducido
   (sept. 2026): el modo película no es elegible en ese caso, así que el
   botón no hacía nada. La regla vive en portal-refinamientos-v5.css, junto
   a la que lo retira en celular, por el mismo motivo. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js-motion [data-motion] { opacity: 1 !important; transform: none !important; }

  /* Escena 01: se desarma el marco fijo y se vuelve a la composición que
     fluye (bloque 12), con todo el texto visible. Nada se posiciona en
     absoluto, así no hay solapamientos. */
  .js-motion .scene--01 .s01-frame {
    height: auto !important;
    display: flex !important;
    overflow: visible !important;
    padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem) !important;
  }
  .js-motion .scene--01 .term-field,
  .js-motion .scene--01 .gold-seam,
  .js-motion .scene--01 .s01-left,
  .js-motion .scene--01 .opening-emphasis,
  .js-motion .scene--01 .opening-tagline,
  .js-motion .scene--01 .opening-controls,
  .js-motion .scene--01 .s01-next {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
  }
  .js-motion .scene--01 .term-field { opacity: 1 !important; }
  .js-motion .scene--01 .term-field .layer { opacity: 1 !important; flex-wrap: wrap !important; white-space: normal !important; transform: none !important; animation: none !important; }
  .js-motion .scene--01 .s01-left h1 { opacity: 1 !important; color: var(--white) !important; }
  .js-motion .scene--01 .opening-permanece { opacity: 1 !important; white-space: normal !important; }
  .js-motion .scene--01 .opening-emphasis { text-align: left !important; align-items: flex-start !important; }
  .js-motion .scene--01 .opening-emphasis > span { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js-motion .scene--01 .opening-tagline { opacity: 1 !important; }
  .js-motion .scene--01 .s01-next { opacity: 1 !important; }
  .js-motion .scene--01 .gold-seam { opacity: 1 !important; transform: none !important; width: 100% !important; max-width: 620px !important; }
  .js-motion .scene--01 .opening-uline::after { transform: scaleX(1) !important; }

  /* Pantalla 02: se desarma el marco fijo, vuelve a fluir, todo visible,
     sin latido. */
  .js-motion .scene--02 .s02-frame {
    height: auto !important;
    display: flex !important;
    overflow: visible !important;
    padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem) !important;
  }
  .js-motion .scene--02 .s02-seam,
  .js-motion .scene--02 .s02-intro,
  .js-motion .scene--02 .s02-thesis,
  .js-motion .scene--02 .s02-next {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
  }
  .js-motion .scene--02 .s02-seam { opacity: 1 !important; }
  .js-motion .scene--02 .s02-thesis { text-align: left !important; }
  .js-motion .scene--02 .s02-lead,
  .js-motion .scene--02 .s02-bridge,
  .js-motion .scene--02 .s02-nd,
  .js-motion .scene--02 .s02-thesis,
  .js-motion .scene--02 .s02-next { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js-motion .scene--02 .s02-key::after { transform: scaleX(1) !important; }

  /* Pantalla 03: se desarma el marco fijo, vuelve a fluir, todo visible. */
  .js-motion .scene--03 .s03-frame {
    height: auto !important;
    display: flex !important;
    overflow: visible !important;
    padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem) !important;
  }
  .js-motion .scene--03 .s03-thesis,
  .js-motion .scene--03 .s03-close,
  .js-motion .scene--03 .s03-promises,
  .js-motion .scene--03 .s03-next {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .js-motion .scene--03 .s03-seq {
    position: relative !important;
    inset: auto !important;
    left: 0 !important;
    right: 0 !important;
  }
  .js-motion .scene--03 .s03-t1,
  .js-motion .scene--03 .s03-t2,
  .js-motion .scene--03 .s03-t3,
  .js-motion .scene--03 .s03-stop,
  .js-motion .scene--03 .s03-setup,
  .js-motion .scene--03 .s03-punch,
  .js-motion .scene--03 .s03-promises li,
  .js-motion .scene--03 .s03-next { opacity: 1 !important; transition: none !important; animation: none !important; }
  .js-motion .scene--03 .s03-track,
  .js-motion .scene--03 .s03-stop--key .s03-label::after,
  .js-motion .scene--03 .s03-key::after { transform: scaleX(1) !important; }

  /* Pantalla 1 (escena 04): se desarma el marco fijo, vuelve a fluir, todo
     visible, sin latido. */
  .js-motion .scene--04 .s04-frame {
    height: auto !important;
    display: flex !important;
    overflow: visible !important;
    padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem) !important;
  }
  .js-motion .scene--04 .ritmo,
  .js-motion .scene--04 .ritmo-coda,
  .js-motion .scene--04 .ritmo-controls,
  .js-motion .scene--04 .s04-next {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .js-motion .scene--04 .ritmo-before,
  .js-motion .scene--04 .ritmo-now,
  .js-motion .scene--04 .ritmo-coda,
  .js-motion .scene--04 .s04-next { opacity: 1 !important; transition: none !important; animation: none !important; }
  .js-motion .scene--04 .ritmo-you { color: var(--red) !important; animation: none !important; }
  .js-motion .scene--04 .s04-seam,
  .js-motion .scene--04 .ritmo-you::after { transform: scaleX(1) !important; }

  /* Pantalla 2 (escena 05): se desarma el marco fijo, vuelve a fluir, todo
     visible, sin latido. */
  .js-motion .scene--05 .s05-frame {
    height: auto !important;
    display: flex !important;
    overflow: visible !important;
    padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem) !important;
  }
  .js-motion .scene--05 .materia,
  .js-motion .scene--05 .s05-next {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
  }
  .js-motion .scene--05 .materia-lead,
  .js-motion .scene--05 .materia-l1,
  .js-motion .scene--05 .materia-l2,
  .js-motion .scene--05 .materia-aux,
  .js-motion .scene--05 .materia-verdict,
  .js-motion .scene--05 .s05-next { opacity: 1 !important; transition: none !important; animation: none !important; }
  .js-motion .scene--05 .materia-you,
  .js-motion .scene--05 .materia-yours { color: var(--red) !important; animation: none !important; }
  .js-motion .scene--05 .s05-seam,
  .js-motion .scene--05 .materia-yours::after { transform: scaleX(1) !important; }

  /* Pantalla 3 (escena 06): se desarma el marco fijo, vuelve a fluir. */
  .js-motion .scene--06 .s06-frame {
    height: auto !important;
    display: flex !important;
    overflow: visible !important;
    padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem) !important;
  }
  .js-motion .scene--06 .asi,
  .js-motion .scene--06 .s06-next {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
  }
  .js-motion .scene--06 .asi-head,
  .js-motion .scene--06 .asi-list li,
  .js-motion .scene--06 .asi-since,
  .js-motion .scene--06 .s06-next { opacity: 1 !important; transition: none !important; animation: none !important; }
  .js-motion .scene--06 .s06-seam { transform: scaleX(1) !important; }

  /* Pantalla 4 (escena 07): se desarma el marco fijo, vuelve a fluir. */
  .js-motion .scene--07 .s07-frame {
    height: auto !important;
    display: flex !important;
    overflow: visible !important;
    padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem) !important;
  }
  .js-motion .scene--07 .ia,
  .js-motion .scene--07 .s07-next {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
  }
  .js-motion .scene--07 .ia-q,
  .js-motion .scene--07 .ia-body p,
  .js-motion .scene--07 .ia-close p,
  .js-motion .scene--07 .s07-next { opacity: 1 !important; transition: none !important; animation: none !important; }
  .js-motion .scene--07 .ia-yours { color: var(--red) !important; animation: none !important; }
  .js-motion .scene--07 .s07-seam,
  .js-motion .scene--07 .ia-yours::after { transform: scaleX(1) !important; }

  /* Pantalla 5 (escena 08): se desarma el marco fijo, vuelve a fluir. */
  .js-motion .scene--08 .s08-frame {
    height: auto !important;
    display: flex !important;
    overflow: visible !important;
    padding: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem) !important;
  }
  .js-motion .scene--08 .decidir {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
  }
  .js-motion .scene--08 .decidir-thesis,
  .js-motion .scene--08 .decidir-go,
  .js-motion .scene--08 .decidir-doors { opacity: 1 !important; transition: none !important; }
  .js-motion .scene--08 .decidir-word::after { transform: scaleX(1) !important; }
  .js-motion .scene--08 .decidir-word::before { opacity: 1 !important; }
}

/* -----------------------------------------------------------------------------
   16. Riel de navegación interna — flotante, borde derecho, siempre a mano.
   Un punto por sección; se completa de dorado la que está a la vista. El
   nombre aparece en un rótulo al lado, solo al pasar el mouse o enfocar (no
   ocupa nada de espacio en pantalla, así conviven con el globo de WhatsApp
   y "Ver los programas" sin sentirse un panel de control). Compartido por
   cualquier página que lo use (hoy: Metodología, Historia) — cada una arma
   sus propios enlaces/anchors en el html, el estilo y el comportamiento
   (portal.js) son un solo lugar.

   Se oculta por debajo de los 900px: en una pantalla angosta compite por un
   margen que ya es escaso, y no hay "hover" real para leer el rótulo.
   -------------------------------------------------------------------------- */
.side-rail {
  position: fixed;
  top: 50%;
  right: calc(var(--wa-inset-inline) + 4px);
  transform: translateY(-50%);
  z-index: 85;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
@media (max-width: 899.98px) {
  .side-rail { display: none; }
}
.side-rail__dot {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}
.side-rail__dot::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.side-rail__dot:hover::before,
.side-rail__dot:focus-visible::before,
.side-rail__dot.is-active::before {
  background: var(--gold);
  transform: translate(-50%, -50%) scale(1.15);
}
.side-rail__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.75rem;
  padding: 5px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.side-rail__dot:hover .side-rail__label,
.side-rail__dot:focus-visible .side-rail__label {
  opacity: 1;
}

/* ==========================================================================
   17. MOVIMIENTO EN CELULAR (< 900px) · septiembre 2026
   --------------------------------------------------------------------------
   El escritorio tiene una película (bloques 15.3 a 15.11): cada pantalla
   clavada al alto de la ventana y una coreografía con tiempos fijos. En un
   teléfono eso no entra — las frases están ancladas arriba y abajo de la
   recta dorada, en columnas de media pantalla — y además pelearía contra el
   dedo: acá el contenido fluye y la persona scrollea.

   El criterio en celular es otro, y lo reparte portal.js:
     · la PRIMERA pantalla de cada página (01 en «/», 04 en «/2/») se
       reproduce sola al cargar, corta (~5 s): nadie está scrolleando
       todavía, no compite con nada;
     · las demás se revelan AL SCROLLEAR, elemento por elemento, al ritmo
       del dedo. No hay tiempos que perseguir ni nada que se pierda de vista.

   CONTRATO DE SEGURIDAD: la clase .mv — el estado «todavía no aparecí» — la
   pone portal.js, nunca el HTML. Si el script no corre, ninguna de estas
   reglas encuentra a quién aplicarse y la página se lee entera, como antes.
   Con «reducir movimiento» el módulo directamente no arranca (y el bloque
   15.4 tiene la última palabra con sus !important).
   ========================================================================== */

@media (max-width: 899.98px) {

  /* --- Estado inicial y revelado. .mv-on lo agrega portal.js. --- */
  .js-motion .mv {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms var(--ease-standard),
                transform 620ms var(--ease-standard);
  }
  .js-motion .mv.mv-on { opacity: 1; transform: none; }

  /* Sólo aparece, sin desplazarse: para los remates y las flechas «Seguir»,
     donde el movimiento vertical competiría con el scroll real. */
  .js-motion .mv--fade { transform: none; }

  /* Rectas doradas · se dibujan de izquierda a derecha, igual que en
     escritorio. Son la costura que cose todo el portal: no aparecen, se
     trazan. */
  .js-motion .mv--seam {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1000ms var(--ease-standard);
  }
  .js-motion .mv--seam.mv-on { transform: scaleX(1); }

  /* Subrayados dorados · el elemento subrayado ya está a la vista; lo que
     se dibuja es la línea de abajo, un momento después.

     En celular NO sirve el ::after del escritorio. Estas frases parten en
     dos renglones en una pantalla angosta («fortalecemos el criterio /
     humano.»), y un pseudo-elemento absoluto con left:0/right:0 dentro de
     un inline partido en dos queda con ANCHO CERO: el subrayado no se ve.
     Es un defecto que el escritorio no expone porque ahí no parte.
     Se usa entonces un degradado de fondo, que el navegador pinta renglón
     por renglón (box-decoration-break: clone): se dibuja de izquierda a
     derecha igual, y con la frase partida quedan subrayados los dos
     renglones, que además es lo correcto. */
  .js-motion .mv--uline {
    opacity: 1;
    transform: none;
    background-image: linear-gradient(var(--gold), var(--gold));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 3px;
    transition: background-size var(--dur-underline) var(--ease-standard);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .js-motion .mv--uline.mv-on { background-size: 100% 3px; }
  /* Se retira el ::after donde exista (bloque 12, pantallas 04/05/07/08)
     para no duplicar la línea. */
  .js-motion .mv--uline::after { content: none; }

  /* Excepción · «decidir» (pantalla 08) nunca parte (white-space: nowrap) y
     su subrayado lleva un cuadradito de cierre alineado con él a la misma
     altura. Conserva el ::after del bloque 12 —dibujado con transform— y el
     cuadradito llega al final, cuando la línea lo alcanza. */
  .js-motion .scene--08 .decidir-word.mv--uline { background-image: none; }
  .js-motion .scene--08 .decidir-word.mv--uline::after {
    content: "";
    transform: scaleX(0);
    transition: transform var(--dur-underline) var(--ease-standard);
  }
  .js-motion .scene--08 .decidir-word.mv--uline.mv-on::after { transform: scaleX(1); }
  .js-motion .scene--08 .decidir-word.mv--uline::before {
    opacity: 0;
    transition: opacity 320ms var(--ease-standard) var(--dur-underline);
  }
  .js-motion .scene--08 .decidir-word.mv--uline.mv-on::before { opacity: 1; }

  /* --- Composición · «Seguir ↓» al pie de su pantalla ---------------------
     Cada pantalla ocupa el alto de la ventana (hoja de refinamientos V5) y
     su contenido es corto. Con los controles de modo retirados quedaba un
     hueco muerto abajo; anclando la flecha al pie, ese aire pasa a ser
     respiro de composición y el gesto de seguir cae donde está el pulgar. */
  .scene--01 .s01-next,
  .scene--02 .s02-next,
  .scene--03 .s03-next,
  .scene--04 .s04-next,
  .scene--05 .s05-next,
  .scene--06 .s06-next,
  .scene--07 .s07-next { margin-top: auto; }
}