/* Cuatro planos, uno por capítulo. Sin JS, los capítulos vuelven a ser
   documento normal. */
/* Aquí se registraba --sp, el avance visual del film, con @property para que
   el calc() del acercamiento de cámara lo resolviera como número desde el
   primer pintado. Se va con su último consumidor: el acercamiento era un zoom
   del 11,5% sobre el póster, y era la forma que tenía el home de fingir
   movimiento de cámara mientras los siete capítulos compartían una sola
   fotografía. Ahora el movimiento de cámara lo hace el master, que tiene cuatro
   encuadres de verdad, y el póster sólo tiene que estar bien encuadrado: eso lo
   dice el punto focal, no una transformación.
   El zoom además rompía lo que §7 pide medir: con transform-origin en 76% 58%,
   a 1440x900 la cabeza del conductor se salía por el borde superior. */
/* Aquí estaba --vel, el retraso del amortiguador, y su único consumidor era el
   eco de velocidad: dos clones de color del titular que se separaban al frotar
   el scroll. Se fue con él —§5.5 del sistema visual— porque no comunicaba
   jerarquía, ni relato, ni estado, ni respuesta a una acción. Con el eco fuera,
   la variable no la leía nadie y sequence.ts ha dejado de publicarla. */
/* Aquí vivía `.page--home .nav{position:fixed}`: el home era la única página
   con la barra flotando y las otras 87 la llevaban pegada. Desde el 9 de agosto
   de 2026 flotan las 88, así que la regla se fue a base.css con el resto del
   nav, y el view-transition-name con ella. */
.page--home main{overflow:clip}
/* --film-top es el hueco que la barra flotante pide por encima del texto del
   capítulo. Es una variable, y no un número escrito donde hacía falta, porque
   era EL ÚNICO valor de esta hoja que cambiaba entre el primer pintado y el
   arranque del film, y ese cambio se pagaba en CLS.
   El mecanismo, medido: el documento sin film pone el texto en el flujo, así
   que el hueco era un padding del escenario; con film el texto pasa a absoluto
   y ese padding deja de moverlo, porque el bloque contenedor de un absoluto es
   la caja de RELLENO del ancestro y no la de contenido. Como el nivel lo
   escribe sequence.js, que es diferido, `data-tier` llegaba a los 16-20 ms con
   el primer pintado ya hecho y la caja del texto saltaba de top=68 a top=0. En
   390x844 eso son 68/844 = 0,0806 de CLS con toda la ventana como región de
   impacto: el 81% del presupuesto de 0,1 en un solo salto. Reproducía en 9 de
   10 cargas frías en /en y en 6 de 10 en /, así que no era un defecto de una
   lengua sino una carrera entre el pintado y el script.
   Adelantar el script no es la cura: la CSP obliga a que boot sea un fichero,
   y un fichero siempre puede llegar tarde. La cura es que las dos maquetaciones
   reserven el MISMO hueco. El padding del escenario y el `inset` del texto
   absoluto leen esta variable, así que no hay dos números que puedan
   discrepar: llegue el nivel que llegue, o no llegue ninguno, la caja del texto
   nace donde va a quedarse.
   El respaldo `0px` va escrito en los dos consumidores, y con el mismo valor,
   por una asimetría de la cascada: si un día la variable no llegara, un
   `padding-top` inválido cae a 0 pero un `inset` inválido cae a `auto`, y el
   texto del hero se descolgaría a su posición estática. Con el mismo respaldo
   en los dos sitios, los dos degradan al caso de escritorio, que es 0. */
.home-sequence{position:relative;background:var(--surface);--film-top:0px}
.sequence-stage{min-height:100svh;display:grid;align-items:end;overflow:hidden;
  padding-top:var(--film-top,0px)}
.sequence-media{position:absolute;inset:0;margin:0;background:var(--surface)}
.sequence-media picture,.sequence-media img,.sequence-media video,.sequence-media canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* El recorte del póster lo decide el dato, no la hoja: las dos variables las
   escribe la plantilla desde `home.sequence.focus`/`focusTall` (o `home.story`).
   Son dos porque los aspectos auditados son dos: una fotografía apaisada no
   admite el mismo centro en 16/9 que en 4/5, y el umbral es el que decide
   `cover()` en sequence.ts —la caja más alta que ancha—, escrito aquí como
   media query para que el póster y el lienzo recorten igual.
   El respaldo 50% 46% es el que valía cuando no había manifiesto, y sólo se
   usaría si un día se sirve esta hoja sin ese estilo en línea. */
.sequence-media img{object-position:var(--media-focus,50% 46%)}
@media (max-aspect-ratio:1/1){
  .sequence-media img{object-position:var(--media-focus-tall,var(--media-focus,50% 46%))}
}
.sequence-media video,.sequence-media canvas{display:none}
html:not(.js) .sequence-media,
.js[data-tier="static"] .sequence-media,
.js[data-tier="lite"] .sequence-media{inset:0 0 auto;height:100svh}
.sequence-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,var(--ink-a80),var(--ink-a20) 62%,var(--ink-a40)),
  linear-gradient(0deg,var(--surface),transparent 42%)}
.sequence-copy{width:100%;padding-top:150px;padding-bottom:clamp(72px,10vh,120px)}
.sequence-chapter{position:relative;max-width:760px;padding-block:var(--s7)}
.sequence-chapter .lbl{color:var(--accent-soft);margin-bottom:var(--s4)}
.sequence-chapter h1,.sequence-chapter h2{max-width:15ch;text-wrap:balance;text-shadow:0 4px 30px var(--ink-a45)}
/* La composición de capítulo: título blanco en semibold a escala de cine,
   regla fina de 64px debajo, y una descripción corta. El semibold es la voz
   del capítulo — el 300 editorial queda para las secciones que se leen con
   la página quieta, no sobre un fotograma en movimiento. */
/* Sin `position:relative`: lo llevaba para ser el bloque contenedor de los dos
   clones absolutos del eco de velocidad, y con el eco retirado no ancla nada. */
.sequence-chapter h2{font-weight:600;font-size:clamp(32px,5vw,84px);line-height:1.04;
  letter-spacing:-.022em;max-width:14ch}
.sequence-chapter h2::after{content:"";display:block;width:64px;height:1px;
  background:var(--ink-50-a40);margin-top:clamp(18px,2.6vh,28px)}
.sequence-chapter > p:last-of-type{max-width:46ch;margin-top:var(--s5);color:var(--steel-200);font-size:clamp(15.5px,1.4vw,18px)}
.sequence-actions{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s7)}

/* Solo los dos niveles con secuencia fijan el escenario. */
.js[data-tier="desktop"] .home-sequence,.js[data-tier="mobile"] .home-sequence{height:4800px}
.js[data-tier="desktop"] .sequence-stage,.js[data-tier="mobile"] .sequence-stage{
  position:sticky;top:0;height:100svh;min-height:0}
.js[data-tier="desktop"] .sequence-media canvas,.js[data-tier="mobile"] .sequence-media canvas{display:block}
.js[data-tier="desktop"] .home-sequence.sequence-ready .sequence-poster,
.js[data-tier="mobile"] .home-sequence.sequence-ready .sequence-poster{opacity:0}
.js[data-tier="desktop"] .sequence-copy,.js[data-tier="mobile"] .sequence-copy{
  position:absolute;inset:var(--film-top,0px) 0 0;display:grid;align-items:end}

/* ── El relevo de capítulos ────────────────────────────────────────────────
   Aquí había un fundido cruzado. Los siete capítulos comparten una sola caja
   absoluta y compartían también una sola transición, así que al cambiar de
   capítulo el saliente y el entrante se pintaban a la vez. Medido sobre el
   sitio construido, congelando las animaciones en el instante del cruce:
   DOS capítulos visibles con opacidad 0,59 y 0,41 durante 208 ms. En pantalla
   eso son dos titulares de 84px, dos bajadas y dos pares de botones uno encima
   de otro; el antetítulo se leía «[ 04 · CICLO...NCIA ]» porque había dos
   superpuestos. El amortiguador del scroll lo alargaba todavía más.

   El sustituto es un relevo con solape cero, §5.3 del sistema visual: el
   saliente sale primero y el entrante NO empieza hasta que el saliente ya está
   a 0. Lo que hace que el solape sea cero por construcción y no por acierto es
   que el retardo del entrante ES la duración del saliente —la misma variable en
   los dos sitios—, así que no hay dos números que puedan desincronizarse.

   El saliente sube y el entrante viene de abajo: el relevo se lee como avance,
   no como parpadeo. Cuesta 80 ms más por cruce.

   Sólo transform y opacity. La clase .is-leaving la escribe setChapter() en
   sequence.ts y se quita a los --t-cap-sale; mientras está puesta, el capítulo
   es visible pero no recibe puntero, para que su caja no se coma el clic del
   botón del que entra. */
.home-sequence{--t-cap-sale:180ms;--t-cap-entra:260ms}
@keyframes cap-sale{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-12px)}}
@keyframes cap-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.js[data-tier="desktop"] .sequence-chapter,
.js[data-tier="mobile"] .sequence-chapter,
.js[data-tier="story"] .sequence-chapter{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(80px,11vh,130px);
  padding:0;opacity:0;visibility:hidden;transform:translateY(12px)}
.js[data-tier="desktop"] .sequence-chapter.is-active,
.js[data-tier="mobile"] .sequence-chapter.is-active,
.js[data-tier="story"] .sequence-chapter.is-active{
  opacity:1;visibility:visible;transform:none;
  animation:cap-entra var(--t-cap-entra) var(--ease-out) var(--t-cap-sale) both}
.js[data-tier="desktop"] .sequence-chapter.is-leaving,
.js[data-tier="mobile"] .sequence-chapter.is-leaving,
.js[data-tier="story"] .sequence-chapter.is-leaving{
  visibility:visible;pointer-events:none;
  animation:cap-sale var(--t-cap-sale) var(--ease) both}

/* Lite reproduce el montaje como vídeo y sigue siendo documento normal. */
.js[data-tier="lite"] .sequence-media .sequence-video{display:block}
.js[data-tier="lite"] .sequence-poster{opacity:0}

/* Aquí vivía `.home-editorial`, la superficie del acto de evidencia INGLÉS: un
   degradado radial azul sobre `--surface` con su propio filete. Existía porque
   el home inglés iba un rediseño por detrás y servía una sección larga con las
   cifras metidas dentro; el español ya partía ese acto en `.home-evidence`,
   `.home-domains` y `.home-proof`, cada uno con su `data-tema`. La fase 5 del
   port unió los dos homes en el rediseño español, así que esta superficie se
   quedó sin una sola página que la pintara. Con ella se fueron
   `.editorial-proof` y `.home-index`, más abajo. */
/* Y aquí vivió después la fila editorial entera: `.editorial-intro`,
   `.editorial-row`, `.editorial-row--flip`, `.editorial-media` y su `img`, más
   el pie `ENSAYO · VIAL-CARGA` que §6.4 ya había retirado antes. Todo lo
   pintaba una sola sección, el acto `.home-evidence` del home, y se fue con
   ella. El enlace editorial se queda: lo sigue usando `.home-domains`.
   Queda escrita la lección del pie, porque no es sobre el adorno sino sobre la
   tinta: el figcaption llevaba también .lbl, y `.editorial-row .lbl` (0,2,0)
   le ganaba a `.editorial-media figcaption` (0,1,1). El rótulo tomaba entonces
   la tinta de la SECCIÓN —azul de marca en el acto claro— y la pintaba encima
   de una fotografía: 1.61:1 en el home, uno de los seis fallos AA de la línea
   base. Una tinta elegida contra una superficie y aplicada sobre otra. */
/* La palabra subrayada de la casa: el énfasis del titular editorial va en el
   acento suave, no en blanco. Sólo aquí — el h2 del calificador ya lleva
   .g-text y dos énfasis distintos en la misma página serían ruido. En el acto
   oscuro es el ámbar de siempre y pasa AA con holgura. La regla está al final
   de esta hoja, junto a los otros actos, para que sea una sola. */
/* `inline-flex` con `min-height:24px` en vez de `inline-block`, por lo mismo que
   `.card-more` en pages.css: a 12px con interlínea 1,4 la caja medía 16,8px y no
   llegaba a los 24x24 de WCAG 2.2 AA 2.5.8. No es un enlace dentro de una frase
   —es el enlace de salida de una sección, en bloque y subrayado— así que la
   excepción de «en línea» no lo cubre. El subrayado se queda pegado al texto:
   `text-underline-offset` mide desde la línea base, no desde la caja. */
.editorial-link{display:inline-flex;align-items:center;min-height:24px;
  margin-top:var(--s6);color:var(--accent-soft);font:700 12px/1.4 var(--font-display);
  letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px}
/* Y aquí vivían `.editorial-proof` —la banda de cuatro cifras en degradado
   que el home inglés servía DENTRO del acto editorial— y `.home-index`, la
   superficie del índice de dominios con miniaturas. Las dos murieron con el
   fork: el rediseño español publica las mismas cuatro cifras en `.home-proof`,
   que es sección propia y con tema declarado, y los dominios en su propia
   sección, sin miniatura. (Aquella era `.domain-network`, la rejilla de cuatro
   tarjetas; hoy es el riel de `home-dominios.css`.) El componente `.dindex`
   sigue vivo y sigue
   en `pages.css`, que es donde §6.5 lo puso para que lo usen /industrias y
   /simuladores; lo que se ha ido es la superficie que lo enmarcaba en el home. */

/* Aquí había dos fondos para el mismo bloque: un degradado oscuro para el home
   y, al final de la hoja, `html[lang="es"] .page--home .qualifier-section` que
   lo devolvía al azul. O sea, el calificador se veía distinto en español y en
   inglés, y la diferencia estaba escrita en un selector de idioma.
   El calificador es una superficie con tema y su tema lo dice el marcado
   (`data-tema="claro"`), igual en todas las páginas que lo sirven. Las dos
   reglas se han ido. */

/* El home español ya no depende de un montaje ajeno: su plano principal es un
   fotograma propio y la continuidad nace del scroll.
   Aquí estaba escrito a mano el punto focal de ese plano —`object-position:76%
   54%`— más el acercamiento de cámara. Los dos se han ido al mismo sitio: el
   encuadre lo declara `home.story.focus` en los datos y llega por
   --media-focus, que es la regla de arriba, y el movimiento de cámara lo hace
   el master. Un número de encuadre escrito en una hoja de estilo no se puede
   auditar contra la fotografía; en el manifiesto, sí. */
/* Y aquí estaba la traza narrativa (.story-trace): una curva SVG dibujada a
   mano que cruzaba el plano de lado a lado y se iba rellenando con --sp, con
   un filtro de resplandor azul encima. Sobre este fotograma en concreto la
   curva pasa por la cara del conductor, así que a media pantalla no se lee
   como «la carretera se vuelve evidencia» sino como un arañazo sobre la foto.
   §6.4 prohíbe el SVG decorativo a mano por su nombre. La continuidad del
   relato ya la lleva el plano: la cámara se acerca al volante con --sp. */
.home-sequence--story .sequence-scrim{z-index:3;background:
  linear-gradient(90deg,var(--ink-a80),var(--ink-a30) 57%,var(--ink-a20)),
  linear-gradient(0deg,var(--surface),transparent 46%)}

/* ── LA COSTURA ENTRE EL HERO Y EL FILM ────────────────────────────────────
   Desde el 13 de agosto de 2026 el hero de estas páginas enseña el PÓSTER del
   film, que es su fotograma 0001, para que entrar en la página y entrar en el
   film sean un solo plano. El efecto secundario hay que tratarlo aquí: durante
   el viewport que tardan en relevarse, el MISMO fotograma está en pantalla dos
   veces —la cola del hero arriba, el film entrando por abajo— y sin esta regla
   el segundo entra a plena luz contra el negro con el que cierra el primero.
   Medido a 1440x900 con scroll 550: una línea horizontal dura a media pantalla
   y la misma moto dos veces. No se lee como un plano continuo, se lee como si
   la página se reiniciara.
   La cura es que el film entre desde el mismo negro con el que el hero sale:
   los dos fotogramas coinciden pero los dos están velados a la vez, así que el
   relevo se lee como un corte por fundido y no como una repetición.

   VA EN EL CONTENEDOR Y NO EN EL ESCENARIO. El escenario es `sticky`, así que
   una banda suya oscurecería la parte alta de los 64 fotogramas durante los
   6.800 px del recorrido. El contenedor se va con el scroll: la banda existe en
   la costura y en ningún otro sitio.

   Y CUELGA DEL HERMANO ANTERIOR, no de la clase del film. `laboratorio-home`
   también es `--story` y ahí el film ABRE la página: no hay costura que coser y
   una banda negra arriba sería un velo sobre la entrada. El selector adyacente
   sólo casa cuando hay un hero con medio justo encima, que son las cuatro
   páginas con film. */
.phero--media + .home-sequence--story::before{content:"";position:absolute;
  inset:0 0 auto;height:22svh;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,var(--surface),transparent)}

/* El master completo avanza sobre canvas: 6.800 px mantienen la cadencia del
   montaje anterior para una película de 30 s sin que un gesto salte escenas. */
.js[data-tier="story"] .home-sequence{height:6800px}
.js[data-tier="story"] .sequence-stage{position:sticky;top:0;height:100svh;min-height:0}
.js[data-tier="story"] .sequence-media canvas{display:block}
.js[data-tier="story"] .home-sequence.sequence-ready .sequence-poster{opacity:0}
.js[data-tier="story"] .sequence-copy{position:absolute;inset:var(--film-top,0px) 0 0;display:grid;align-items:end}

/* La caja del capítulo en este nivel la fija el bloque del relevo, que cubre
   los tres niveles con film en una sola regla. Aquí estaba escrita por segunda
   vez, con sus propias duraciones, y era exactamente el sitio donde el arreglo
   del cruce se podía quedar a medias: el home español corre en este nivel. */

/* Aquí vivían los dos rótulos que se montaban sobre el plano y que el marcado
   ya no trae: la red de cinco dominios —dos columnas de nombres, un punto azul
   con resplandor por fila y un aro de 34px al lado— y las cuatro cifras en
   versales sobre la fotografía. Se van con §6.4, que prohíbe el rótulo sobre
   foto y el punto de estado decorativo por su nombre, y con §7, que pide que la
   fotografía aguante el plano sin adornos. No se pierde contenido: las dos
   cosas estaban `aria-hidden` y las dice enteras la página unos scrolls más
   abajo, en `.home-domains` y en `.home-proof`.
   Con ellos se van sus dos anclas de capítulo, `[data-active-chapter]`, que
   además apuntaban a `evidence` — un capítulo que ya no existe. */

/* Aquí vivía el acto `.home-evidence` —la sección editorial clara del home
   con el ciclo observar-practicar-verificar— y con ella sus reglas: la
   superficie con su filete, el `.lbl` de la intro y las tres de
   `.evidence-steps`, entre ellas la de la columna fija de 88px. Esa columna
   existía porque con `auto` cada fila medía por su palabra —«Observar» 78px,
   «Practicar» 81,6px, «Verificar» 76,4px— y los tres complementos arrancaban
   en tres equis distintas. La sección se retiró de la página y las reglas se
   van con ella; el corte duro al tema claro lo abre ahora `.home-domains`. */

/* Aquí vivía `.home-domains` con su rejilla `.domain-network`: cuatro tarjetas
   en fila, una traza de un píxel por detrás con `opacity:.42` y un
   `nth-child(even)` que descolgaba dos de ellas `--s7`. Se ha ido entera con la
   sección, que ahora es un riel vertical fijado y vive en `home-dominios.css`.

   NO ES UNA LIMPIEZA, ES UN RELEVO, y las reglas no podían quedarse: la nueva
   hoja estila `.home-dominios` —con i— y la vieja estilaba `.home-domains` —con
   a—, dos clases que se leen igual de un vistazo. Dejar las dos vivas en la misma
   página era garantizar que alguien tocara la que no era.

   Con ellas se va el único sitio del inicio donde la conexión entre los cuatro
   dominios se dibujaba: aquella traza de un píxel. Lo que la sustituye no es otra
   línea, es que las cuatro estaciones cuelgan de un mismo riel y el scroll lo
   recorre. */

/* Resolución: las cifras se leen como prueba y la fuente está a un clic. */
.home-proof{padding:var(--s10) 0;border-top:1px solid var(--hairline)}
.home-proof .lbl{color:var(--accent-soft)}
.home-proof .proof-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(var(--s7),7vw,var(--s10));align-items:center}
.home-proof .proof-text{display:flex;align-items:center;padding-right:0;text-align:left}
.home-proof h2{font-size:clamp(30px,3.4vw,52px);font-weight:400;line-height:1.08;letter-spacing:-.025em;max-width:15ch;margin-top:var(--s4);text-wrap:balance}
.home-proof h2::after{content:"";display:block;width:clamp(56px,6vw,92px);height:2px;margin-top:var(--s5);background:var(--accent);transform:scaleX(1);transform-origin:left;transition:transform 720ms var(--ease-out)}
.js .home-proof h2.reveal::after{transform:scaleX(0)}
.js .home-proof h2.reveal.in::after{transform:scaleX(1);transition-delay:180ms}
.home-proof dl{display:flex;flex-direction:column;gap:var(--s7);flex:1 0 0}
.home-proof dl div{position:relative;display:flex;align-items:flex-start;gap:var(--s7);border-top:0;padding:var(--s3) 0}
.home-proof dl div::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--hairline-2);transform:scaleX(1);transform-origin:left;transition:transform 700ms var(--ease-out)}
.js .home-proof dl div.reveal::before{transform:scaleX(0)}
.js .home-proof dl div.reveal.in::before{transform:scaleX(1);transition-delay:120ms}
.home-proof dt{font:300 clamp(46px,6.4vw,112px)/.94 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;flex:1 0 0;transition:transform 700ms var(--ease-out)}
.home-proof dl div.in dt{transform:translateY(-3px)}
.home-proof dd{flex:none;width:33%;color:var(--text-3);font-size:clamp(15px,1.25vw,18px);line-height:1.3}
/* El énfasis del titular del home, en un solo sitio. Antes cada acto lo
   escribía en su propio bloque: ámbar en los oscuros, azul en los claros,
   ámbar otra vez en el azul. Es un rol, no tres decisiones.
   Este selector tuvo dos actos y ahora tiene uno: el de dominios se llevó su
   `b` a `home-dominios.css`, que es donde vive su titular desde el relevo. */
.home-proof h2 b{color:var(--accent-soft);font-weight:600}

/* Aquí volvió a caer, por la fusión de la rama del pliegue, el acto claro
   ESCRITO A MANO: `.home-evidence`, `.home-domains` con su línea de tiempo
   `.dt-*`, `.home-proof` en azul de marca a pantalla completa, los dos rótulos
   `.story-*-overlay` sobre el plano, la segunda copia del bloque
   `[data-tier="story"]` y `html[lang="es"] .page--home .qualifier-section`.
   Eran 130 líneas del lado anterior al sistema de tokens y se han ido enteras,
   por cuatro razones medidas y no por gusto:

   · Duplicaban reglas que esta misma hoja ya sirve cien líneas más arriba con
     roles. Al ir DESPUÉS y con la misma especificidad, ganaban: las tres
     secciones volvían a pintarse con `background:#f4f7fa;color:#061019` y a
     redefinir `--void --deep --panel --wht --body --line --line2` dentro del
     bloque, que es exactamente lo que §2 cierra. El marcado ya lleva
     `data-tema="claro"` en las tres.
   · Consumían tokens que el sistema retiró: `--blu`, `--org`, `--display`,
     `--mono`, `--wht`, `--sp`. `.home-proof{background:var(--blu)}` no pintaba
     azul: pintaba nada, porque la variable no existe.
   · `.domain-timeline`, `.dt-*` y los dos `.story-*-overlay` no los pide ningún
     marcado de las 99 rutas que el sitio servía entonces —el home servía
     `.domain-network` y hoy sirve el riel de `home-dominios.css`—, y los overlays
     son rótulo sobre fotografía y punto de estado decorativo, prohibidos por
     su nombre en §6.4.
   · La segunda copia de `[data-tier="story"] .sequence-chapter` traía su
     `transition:opacity 340ms`, que le ganaba al relevo de §5.3 y devolvía el
     fundido cruzado de dos titulares a la vez. El comentario de más arriba lo
     había predicho: «era exactamente el sitio donde el arreglo del cruce se
     podía quedar a medias».

   Los 27 literales de color que traía el bloque se han ido con él. No se han
   traducido a tokens: traducirlos habría dejado en verde la puerta sobre una
   sección que ya no se pinta y que el marcado no pide. */

@media (max-width:760px){
  .home-sequence{--film-top:calc(var(--nav-top) + var(--nav-h) + var(--s2))}
  .sequence-stage{min-height:auto}
  .sequence-media{height:100svh;position:absolute}
  .sequence-copy{padding:70svh var(--gutter) var(--s9)}
  .sequence-chapter{padding-block:var(--s8)}
  .js[data-tier="mobile"] .home-sequence{height:4200px}
  /* Aquí estaba `.js[data-tier="mobile"] .sequence-stage{padding-top:0}`, que
     era la mitad visible del salto que cuenta --film-top arriba: quitaba el
     hueco de la barra en cuanto llegaba el nivel. Ya no hace falta quitarlo,
     porque con el texto absoluto ese padding no empuja nada, y dejarlo puesto
     es lo que hace que el hueco sea el mismo antes y después. */
  /* El `left:0;right:0` que había aquí, y su gemelo del nivel `story`, dejaban
     el capítulo pegado al borde: el titular del home arrancaba en x=0 en un
     móvil de 390px, contra los 22px mínimos que pide §10. El `padding` de
     .sequence-copy que iba al lado nunca lo corrigió y no podía hacerlo — el
     bloque contenedor de un absoluto es la caja de RELLENO del ancestro, así
     que el padding no lo desplaza. Quitando el reset, manda la regla base, que
     ya inseta por --gutter; el `padding:0` de .sequence-copy se queda porque sí
     hace falta: anula los 70svh de arriba del documento sin film. */
  .js[data-tier="mobile"] .sequence-chapter{bottom:82px}
  .js[data-tier="mobile"] .sequence-copy{padding:0}
  .js[data-tier="story"] .home-sequence,
  .js[data-tier="mobile"] .home-sequence--story{height:6000px}
  .js[data-tier="story"] .sequence-chapter{bottom:82px}
  .js[data-tier="story"] .sequence-copy{padding:0}
  /* Las seis reglas estrechas de `.domain-network` se fueron con la rejilla: el
     riel que la sustituye trae las suyas en `home-dominios.css`. */
  .home-proof .proof-grid{grid-template-columns:1fr;gap:var(--s8)}
  .home-proof .proof-text{align-items:flex-start}
  .home-proof h2{max-width:17ch}
  /* `flex-wrap` es la red, y la fila de abajo es la cura.
     La cifra lleva `flex:1 0 0`: crece, pero NO encoge, así que su suelo real es
     el ancho de su propio número. Medido, «650.854» a 46px mide 190px y no baja
     de ahí. Con la etiqueta al 40% y 24px de separación, la fila sólo cabe por
     encima de 401px de viewport: a 390 la etiqueta se salía 6px del gutter, a
     360 se salía de la pantalla y a 320 abría 39px de desplazamiento horizontal
     en el home. Sin `flex-wrap` no hay nada que lo absorba, porque una fila flex
     de una sola línea desborda antes que partirse. */
  .home-proof dl div{gap:var(--s5);flex-wrap:wrap}
  .home-proof dd{width:40%;font-size:16px}
}

/* Por debajo del ancho en el que la pareja cabe, la fila se apila: la cifra
   arriba con todo el ancho para ella y la etiqueta debajo. Es la misma decisión
   que toma la rejilla de dos columnas al pasar a una, y deja la cifra —que es lo
   que la sección viene a decir— sin encoger ni un punto en la pantalla donde
   menos sitio hay. El filete de la fila lo pinta un `::before` en absoluto, así
   que sobrevive al cambio de maquetación. */
@media (max-width:400px){
  .home-proof dl div{display:block}
  .home-proof dd{width:auto;margin-top:var(--s2)}
}

/* Con reduced-motion no hay film: sequence.ts elige el nivel `static` y sale
   antes de dibujar, así que <html> nunca recibe data-tier y los siete capítulos
   vuelven al flujo como secciones normales. Este bloque es lo que hace que ese
   documento se lea: alturas auto, escenario sin fijar y capítulos visibles.
   El `animation:none` del relevo es corte seco, y está escrito aunque los
   !important de la misma regla ya ganarían a los fotogramas —una declaración
   importante del autor gana a una animación en la cascada—: quien lea esto
   tiene que ver que el relevo también se apaga, no deducirlo. */
@media (prefers-reduced-motion:reduce){
  .home-sequence{height:auto!important}
  .sequence-stage{position:relative!important;height:auto!important}
  .sequence-media{height:100svh}
  .sequence-copy{padding-top:72svh}
  .sequence-chapter{position:relative!important;inset:auto!important;opacity:1!important;
    visibility:visible!important;transform:none!important;animation:none!important}
}

/* ─────────────────────────────────────────────────── el primer pliegue ──
   Estas reglas vienen de la rama del pliegue y 27 no las tenía: el rediseño
   del sistema visual se desarrolló en paralelo, sin esta sección. Se
   reinjertan enteras porque el marcado que las pide sobrevivió a la fusión.

   La reinjección a mano se dejó once comentarios sin su primera línea, o sea
   once cierres de comentario huérfanos sueltos entre reglas. Eso no es
   cosmético: un cierre suelto se lee como el principio del preludio de la regla
   siguiente, y un preludio que no es un selector válido tira la regla ENTERA
   —CSS Syntax 3, «consume a qualified rule»—. Costaba ONCE reglas del pliegue:
   .home-fold, .fold-video, .fold-copy, .fold-copy h1, .fold-sound,
   .fold-sound[aria-pressed="false"] .wave, .fold-trust, .trust-marquee,
   .trust-track, .trust-set img y .home-sylogi-grid. O sea el fondo, el velo,
   el titular, la bajada, el interruptor entero y la cinta de clientes: casi
   todo lo que se ve en el primer pliegue. Comprobado contando selectores
   válidos antes y después, no leyendo el fichero. Los once comentarios vuelven
   enteros, tal y como los escribió la rama del pliegue.


   Los colores de esta sección se escribieron antes de que existiera la capa de
   roles y llegaron en crudo. Aquí quedan dichos por su rol:
     --void                     → --surface     (mismo #03080d, y ahora atado
                                                 al tema en vez de al color)
     --wht                      → --text        (#f4f7fa, idéntico: §2 retira
                                                 el nombre, no el valor)
     --org                      → --accent      (#ff7500, idéntico)
     rgba(3,8,13,.94/.62)       → --ink-a90/a60 (velo sobre fotografía)
     rgba(0,0,0,.45)            → --ink-a45     (la sombra del titular de
                                                 capítulo es esta misma línea)
     #d0dbe4                    → --steel-200   (la bajada sobre foto del sitio)
     rgba(244,247,250,.26/.10)  → --hairline-2/--hairline
     rgba(3,8,13,.46/.66)       → --ink-a45/a70 (el disco y su hover)
   Las siete opacidades a mano caen a la escala de 5 y 10 puntos que tokens.css
   declara; el mayor salto es de 4 centésimas de alfa en un velo. El detalle de
   cada delta va en el informe de la fase, no aquí. */
/* Dos filas: el mensaje ocupa la que crece y se apoya en su borde inferior; la
   cinta de clientes es la que se mide sola y queda clavada al pie.

   `grid-template-columns:minmax(0,1fr)` NO es decorativo y costó encontrarlo.
   Sin él la retícula tiene una sola columna implícita, y una columna implícita
   se mide por su contenido más ancho: la pista de la cinta, que es
   `width:max-content` y mide casi 6000 px. La columna crecía hasta ahí, el
   bloque de texto se centraba dentro de esos 6000 px —se iba a x≈2324, fuera
   de la pantalla— y `overflow:hidden` lo recortaba. El síntoma era que el
   titular «no se pintaba», y era intermitente porque la columna sólo se
   ensancha cuando terminan de cargar los diecinueve logos. minmax(0,1fr) le
   prohíbe a la columna crecer con el contenido. */
.home-fold{position:relative;min-height:100svh;display:grid;
  grid-template-rows:1fr auto;grid-template-columns:minmax(0,1fr);
  align-items:end;overflow:hidden;background:var(--surface)}

.fold-media{position:absolute;inset:0;margin:0}

.fold-media picture,.fold-media img,.fold-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.fold-media img{object-position:50% 46%}

/* El clip sólo aparece cuando el navegador ya está pintando fotogramas. Si se
   descubriera al llamar a play() se vería un negro mientras decodifica el
   primero — la misma razón por la que el film espera a .sequence-ready.

   El estado oculto es opacity, NO display:none, y eso no es cosmética: quien
   arma el vídeo es el IntersectionObserver de pages.js, y un elemento sin caja
   no cruza nunca. Con display:none el vídeo esperaba a una clase que sólo podía
   ponerle el evento `playing` de un vídeo que nunca llegaba a armarse. */
.fold-video{opacity:0;transition:opacity 420ms var(--ease)}

.home-fold.fold-ready .fold-video{opacity:1}

.fold-poster{transition:opacity 420ms var(--ease)}

.home-fold.fold-ready .fold-poster{opacity:0}

/* Un solo gradiente vertical, simétrico, porque el bloque va centrado: un sesgo
   horizontal dejaría el titular con más velo a un lado que al otro.

   LAS PARADAS SALEN DE UNA MEDICIÓN, NO DE UN OJO. El reparto anterior
   —`a90 0%`, `a60 26%`, `transparent 64%`— dejaba sobre el `h1` una alfa de
   **0,34**, y eso bastaba sólo porque el clip que había era lluvia y túnel: un
   plano oscuro. Con el film de las cuatro fases, que atraviesa POR LA LUZ dos
   veces —la lectura del instrumento y el blanco del papel—, el peor fotograma
   de la banda del titular es rgb(249,217,184) y `--text` sobre él daba
   **2,78:1**: 24 de los 384 fotogramas por debajo de 4,5:1, o sea 1,00 s de
   cada 16.

   Medido, no estimado: el `h1` ocupa el 57,5 %–64,0 % de la altura del pliegue
   (leído en navegador a 1440×900, y 58,4 %–62,1 % a 390×844), que en las
   coordenadas de este gradiente —0 % abajo— es el 36 %–42,5 %. El punto con
   menos velo es su borde superior. La alfa mínima que lleva ese peor fotograma
   a 4,5:1 es 0,51; estas paradas dan **0,566** ahí y 0,636 en el borde
   inferior.

   No se arregló recomponiendo el plano porque el blanco del papel ES el cierre
   del ciclo —certificar devuelve a aprender atravesando la hoja— y porque el
   defecto no era del film: era del pliegue, que llevaba desde su primer día
   pasando por casualidad. Cualquier clip claro que entre aquí en el futuro
   pasa ahora también.

   `audit-contraste` sigue sin ver esto: descarta todo `background-image` por su
   exclusión 3, y un gradiente lo es. La medida está en el diario, en
   `docs/creacion-de-video/`. */
.fold-scrim{position:absolute;inset:0;background:
  linear-gradient(0deg,var(--ink-a90) 0%,var(--ink-a70) 30%,
                  var(--ink-a40) 58%,transparent 78%)}

/* Centrado y anclado abajo, la composición de legora.com: el titular entra
   sobre el 80% de la altura y la CTA cae sobre el 90%.
   Se midió el film por energía de bordes antes de decidir, y el centro aguanta:
   en la posición real del texto —fila inferior— el centro puntúa 3,8 y la
   izquierda 3,9, o sea lo mismo. El único tramo donde el centro se ensuciaba
   era la cartela de cierre, con el certificado, las dos caras y el logotipo
   amontonados en el medio; se resolvió cortando la cartela del clip
   (el guion de medios no interviene: el corte está en el propio fichero
   servido) en vez de mover el texto a una esquina. */
.fold-copy{position:relative;width:100%;text-align:center;
  padding-top:150px;padding-bottom:clamp(56px,8vh,92px)}

/* 56px en peso 400 con -.04em, medido contra legora.com a 1440. El 600 a 74px
   que había antes leía dos escalones más alto que la referencia: en una
   pantalla vacía el titular no necesita gritar, le basta con ser el único que
   habla. Montserrat es variable 300-900 (fonts.css), así que el 400 no cuesta
   una descarga más. */
/* La sombra es la misma que la del titular de capítulo —`0 4px 30px
   var(--ink-a45)`, cincuenta líneas más arriba—, y ahora lo es también en el
   código: estaba escrita con un negro puro que el lienzo del sitio no tiene.
   El lienzo se deriva del azul de marca, no de un negro neutro, y una sombra
   de tinta ajena sobre la misma fotografía era la única de las dos que no
   seguía esa regla. */
.fold-copy h1{font-weight:400;font-size:clamp(30px,3.9vw,56px);line-height:1.05;
  letter-spacing:-.04em;max-width:20ch;margin-inline:auto;text-wrap:balance;
  color:var(--text);text-shadow:0 4px 30px var(--ink-a45)}

/* El lema del rótulo —Formación · Evaluación · Certificación— entre el h1 y la
   bajada, con cuerpo propio: es la segunda línea de la pizarra del cliente
   (2026-08-28), no un antetítulo ni parte de la descripción. */
.fold-lema{margin:var(--s4) auto 0;color:var(--text);
  font:400 clamp(17px,1.7vw,24px)/1.3 var(--font-display);letter-spacing:-.01em;
  text-shadow:0 4px 30px var(--ink-a45)}

/* EL SUBRAYADO DE ACENTO DE LA PIZARRA, BAJA. Las palabras marcadas del
   pliegue («WayGroup», «For Education», «Formación»…) llevaban un subrayado
   de acento: primero en verde —`--dom-bienestar`, el único verde del
   sistema— y desde la revisión de septiembre en el primario de marca. La
   misma revisión lo remató: «no me convence cómo está resuelto el
   subrayadito». Primero el color, después el subrayado entero: la pizarra
   va en tinta limpia y el acento de la caja lo ponen la W, el CTA y el
   film. Los `span.u-ace` siguen en el marcado —la marca de qué palabras
   llevaban el acento queda en el dato (`u: true` en textos.ts)— por si un
   día el acento vuelve con otra forma; hoy la clase no estiliza nada. */

/* La línea que explica qué es esto y por qué es distinto. 54ch para que quepa
   en dos renglones a escritorio sin partirse en cuatro.
   --steel-200 es la tinta que el sitio ya da a una bajada sobre fotografía:
   la del capítulo del film y la del hero de familia (.phero--media .lead). */
.fold-sub{max-width:54ch;margin:var(--s5) auto 0;color:var(--steel-200);
  font-size:clamp(15.5px,1.35vw,18px);line-height:1.55;text-wrap:balance}

.fold-actions{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s4);margin-top:var(--s6)}

/* ── El interruptor del sonido ─────────────────────────────────────────────
   Arriba a la izquierda. La barra es una píldora centrada, así que ese rincón
   está libre en escritorio; en móvil la píldora ocupa casi todo el ancho y el
   botón baja por debajo. */
/* Sólo el icono: 38x38, que es el mínimo cómodo para el dedo sin convertirse en
   un elemento de interfaz que compita con la CTA. El texto sigue en el marcado,
   en .sr-only, porque es el nombre accesible del botón. */
/* El canto es --r-md, el rol de control, y no el 50% con el que nació: la pieza
   viene de la rama del pliegue, que se hizo en paralelo al sistema visual, y
   nunca pasó por §3. El círculo sobrevive únicamente en el indicador de opción
   del calificador, donde el círculo ES la opción; aquí el estado lo dicen
   aria-pressed y los dos iconos —ondas o cruz—, así que el disco era decoración
   y repetía la contradicción que ya se le quitó a la barra: una pieza redonda
   en la misma pantalla que su propia CTA, que lleva 2px.
   Cuadrarlo no encoge el objetivo táctil, lo agranda: con 50% el área pulsable
   era el círculo inscrito, 1134px²; ahora son los 38x38 declarados enteros,
   1444px², muy por encima de los 24x24 de WCAG 2.2 AA 2.5.8. El icono sigue
   centrado por el propio flex, que no depende del canto. */
/* El filete va en --hairline-2 y no en --control-edge, y la diferencia la
   argumenta §2: --control-edge existe para el control que NO tiene relleno en
   reposo, donde el canto es lo único que dice que ahí hay un control. Este
   botón sí tiene relleno —el velo de --ink-a45 con su desenfoque—, así que
   quien lo identifica es la superficie, no la línea. */
.fold-sound{position:absolute;z-index:4;left:var(--gutter);top:26px;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;border-radius:var(--r-md);
  border:1px solid var(--hairline-2);background:var(--ink-a45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--text);cursor:pointer;
  transition:border-color var(--t-ui) var(--ease),background var(--t-ui) var(--ease)}

.fold-sound[hidden]{display:none}

.fold-sound:hover{border-color:var(--accent);background:var(--ink-a70)}

.fold-sound:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.fold-sound svg{flex:0 0 auto;width:15px;height:15px}

.fold-sound svg path{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.fold-sound svg path:first-child{fill:currentColor;stroke-width:1}

/* aria-pressed es la fuente de verdad del icono: false = silenciado, y se ve
   la cruz; true = sonando, y se ven las ondas. Así el estado no vive en dos
   sitios que puedan discrepar. */
.fold-sound[aria-pressed="false"] .wave{display:none}

.fold-sound[aria-pressed="true"] .cross{display:none}

/* ── La cinta de clientes ──────────────────────────────────────────────────
   Banda opaca al pie del pliegue: corta la imagen en vez de flotar encima,
   que es lo que hace que se lea como un zócalo y no como un adorno sobre la
   fotografía. El fondo es --surface, el mismo negro al que ya llega el velo por
   abajo, así que la costura entre imagen y banda no se ve. */
/* Las dos esquinas quedan reservadas para el sello ISO y Edu. En escritorio
   Edu incluye su rótulo; el bloque móvil reduce la reserva a su cara. Así el
   enlace a los clientes sigue siendo visible y pulsable entre las piezas. */
.fold-trust{position:relative;z-index:1;display:flex;align-items:center;
  gap:var(--s6);height:88px;
  /* A todo el ancho: ni la placa ISO ni Edu se quedan sobre la banda (pages.ts
     los aparta mientras se ve), así que no se les reserva esquina. */
  padding-right:var(--gutter);
  background:var(--surface);border-top:1px solid var(--hairline)}

/* La cinta de logos —.trust-marquee, .trust-track, trust-scroll, .trust-set—
   vive en pages.css desde que /clientes la comparte con el pliegue: las dos
   páginas la pintan con el mismo bloque y la tinta la decide el tema del
   anfitrión. Aquí queda sólo el zócalo y el enlace. */
.trust-link{flex:0 0 auto}

/* LA EXCEPCIÓN DEL PLIEGUE AL DESPLIEGUE SIN MOVIMIENTO, y vive aquí porque la
   impone esta banda y no el bloque.
   `pages.css` envuelve la cinta cuando se pide movimiento reducido, para que los
   35 logotipos se vean sin desplazar nada. Ahí cabe: /casos-de-exito le da una
   sección entera. Aquí no, y no es cuestión de gusto: el zócalo mide 88 px —72
   por debajo de 760— y la lista envuelta pide 5 filas y ~230 px a 1440, y 11
   filas y ~440 px a 390. Medido sobre `clientes.json`: una vuelta de pista son
   5.256 px a 1440 y 3.701 px a 390. Envolverla aquí se comería medio primer
   pliegue en escritorio y lo entero en un teléfono, y justo para quien pidió que
   la página se estuviera quieta.
   Así que aquí la cinta se queda en una fila y recortada, que es lo que ya hacía
   —a 390 la animación enseña 3 logotipos de 35 en cada instante—, y la lista
   completa está a un clic en la píldora de al lado, que es el argumento que esta
   misma hoja ya usa cien líneas más abajo para la franja estrecha. Los 35 siguen
   en el documento: `overflow:hidden` recorta para el ojo, no para el lector de
   pantalla, que los lee los 35 bajo el encabezado del muro.
   Y la máscara vuelve: sobre una fila cortada es lo que dice que la fila sigue.
   Sin ella el corte se lee como un fallo de maquetación. */
@media (prefers-reduced-motion:reduce){
  .fold-trust .trust-set{flex-wrap:nowrap;row-gap:0}
  .fold-trust .trust-marquee{
    -webkit-mask-image:var(--mascara-cinta);mask-image:var(--mascara-cinta)}
}

/* Responsivo del pliegue: mismas reglas de la rama del pliegue, que 27 no
   tenía porque la sección no existía en su lado. */
@media (max-width:1100px){
  /* Debajo de la barra: ahí la píldora del nav ya ocupa el ancho completo. */
  .fold-sound{top:auto;bottom:calc(88px + var(--s5));left:var(--gutter)}
}
@media (max-width:760px){
  .fold-sound{bottom:calc(72px + var(--s4))}
}
@media (max-width:760px){
  .fold-copy{padding-top:clamp(104px,20vh,150px)}
  /* A 375px la píldora deja unos 230px de cinta y no cabe nada. /clientes
     sigue en el nav y en el pie. */
  .fold-trust{height:72px}
}
@media (max-width:640px){
  /* En el teléfono la píldora dejaba 28px de cinta: la cinta va sola en su
     fila, a todo el ancho, y la píldora debajo, centrada. La banda mide ~100px
     y el sonido sube lo mismo. */
  .fold-trust{flex-wrap:wrap;justify-content:center;height:auto;gap:0;padding:var(--s3) 0 0}
  .fold-trust .trust-marquee{flex:0 0 100%}
  .trust-link{margin:var(--s3) 0}
  .fold-sound{bottom:calc(100px + var(--s3))}
}

/* Una regla que 27 sí tenía y la fusión perdió al tomar regiones del lado
   antiguo: sin ella el aviso de carga del film queda como párrafo sin estilar
   encima del lienzo. Restaurada verbatim de waygroup/27-sistema-visual. Junto
   a ella volvía la base de `.evidence-steps` —la retícula del ciclo de
   evidencia—, que se fue con la sección `.home-evidence` que la pintaba. */
/* Aquí vivían dos piezas de mobiliario que el sistema visual retira por su
   nombre en §5.5 y §6.4, y que se fueron el 9 de agosto de 2026:

   · El riel de progreso (.sequence-rail): un aro conic sobre --sp y un contador
     «01 / 06» abajo a la derecha. Es paginación decorativa más indicación de
     avance, las dos prohibidas, y además obligaba a mantener un mapa de siete
     reglas ::after —una por data-active-chapter— sólo para escribir un número
     que el lector ya no necesita: el capítulo lo dice el titular.
   · El mobiliario de simulador (.sim-overlay): cuatro escuadras en las esquinas
     y un testigo «SIM · REC» parpadeando en bucle infinito. Escuadras, rótulo
     sobre fotografía, punto medio y un parpadeo que no responde a ninguna
     acción: cuatro prohibiciones en un elemento de cinco nodos. El plano ya
     dice si estamos en simulador o en carretera; el marco de una interfaz de
     grabación encima sólo lo contradice.

   Con ellas se van sus dos únicos consumidores de --sp fuera de la cámara, así
   que la variable queda para lo que de verdad narra: el avance del plano. */
.sequence-loading{position:absolute;right:var(--gutter);top:104px;z-index:5;color:var(--text-2);
  font:600 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}