/* ============================================================
   CHASIS — marca, navegación del mazo, progreso y transición
   Dalí, Genio Audiovisual de AIONOVA · 2026-09-03
   Re-cableado a LIRA · "Primero la gente" · Buñuelo PH
   disenador-de-interfaz · 2026-09-09 · TL-LIRAPRES-001C

   QUÉ CAMBIÓ AL PASAR A LIRA (y qué NO)
   NO cambió el motor: las dos bandas, el acople al pie, el
   teclado, las transiciones, el hilo de progreso y el mando
   contextual siguen tal cual, con sus mediciones intactas. La
   memoria de por qué existen (más abajo) se conserva completa:
   se ganó midiendo y no se tira al cambiar de cliente.
   Cambió lo que era de la pieza anterior: el mazo pasa de DOCE
   láminas a SIETE nodos (portada + 6 secciones del guion), el
   lockup de marca pasa a ser el logo de Lira, y las @font-face
   de respaldo pasan de Fraunces a Poppins.

   QUÉ ES
   La capa que convierte 7 archivos HTML sueltos en UN mazo que
   se recorre. Vive en el fuente, no en el ensamblado: se conecta
   con una línea de <link> y una de <script defer> por lámina, y
   por tanto sobrevive a cualquier re-armado de la carpeta de
   despliegue.

   DÓNDE VIVE  (revisado 2026-09-05 · O-02 + O-03 · el Vitralista)
     · CABECERA (banda propia, borde superior)
           izquierda -> el rótulo de sección, que es de la lámina
           centro    -> Inicio · ← Anterior · Siguiente →
           derecha   -> lockup de marca
     · PIE (banda propia, borde inferior)
           izquierda -> hueco reservado de "↩ Volver a la sección"
           centro    -> los 12 numerales del mazo
           derecha   -> espejo del hueco izquierdo (mantiene el eje)
     · borde inferior absoluto -> hilo de progreso del mazo (2px)
   No invade el resto: cada sección tiene su propio numeral, su
   rail (.el-rail, izquierda), su consola (.el-consola, abajo
   derecha) y su progreso interno (.el-progreso, borde superior).

   POR QUÉ DOS BANDAS Y NO TRES CONTROLES FLOTANDO  (la medición)
   O-03 pide los mandos arriba, al centro. Antes de moverlos se midió
   —por píxel sobre las doce láminas renderizadas, a 1440 y a 1366—
   si existía allí un corredor libre donde posarlos. No existe:
     · 02  el lead de la columna derecha cruza el eje central;
     · 08  la atmósfera de Madrid ocupa el ángulo superior derecho;
     · 09  corredor de 47 px a 1440 — un mando mide ~240;
     · 10  corredor de 16 px a 1440.
   Se barrió toda la franja de 0 a 52 px en pasos de 2: en la 02 no
   hay una sola banda libre. Colgar ahí una fila flotante habría
   tapado texto de la lámina en cuatro de las doce, y eso es ornamento
   escondiendo el uso: exactamente lo que este oficio no hace.
   La respuesta correcta no es apretar el mando en un hueco que no
   existe, es DECLARAR el hueco. El chasis reserva dos bandas de papel
   —cabecera y pie— y la lámina vive entre ellas. Con eso:
     · los mandos van arriba y al centro, como pidió David, sin tapar
       una sola palabra;
     · la franja de abajo deja de estar saturada (O-02): pierde los
       tres mandos y gana un eje limpio para los doce numerales;
     · las colisiones medidas del texto de cierre contra la navegación
       —05, 08 y 09, y también 01 y 02 a 1366— desaparecen por
       construcción, no por ajuste fino;
     · y el conjunto lee como la cabecera de una revista, que es la
       gramática declarada de la pieza.
   El precio, declarado: la lámina tiene menos alto útil. Se paga una
   vez, aquí, y no vuelve a discutirse en cada lámina.

   LEYES QUE RESPETA
     · Cero red. Fuentes y logo se sirven de disco. Las rutas de
       este archivo son relativas al propio CSS (assets/css/), así
       que resuelven igual desde la raíz (portada.html) y desde
       secciones/ — el problema de profundidad se resuelve aquí,
       no en cada página.
     · No-scroll: todo es position:fixed, nada altera el flujo.
     · Estado base VISIBLE: el reposo de marca, nav y progreso es
       "visible". Ninguna animación los trae a existir; si se
       cancelan todas las animaciones, el chasis sigue completo.
     · pointer-events sólo en los controles de la nav.
     · prefers-reduced-motion: sin excepción.
     · Cero color literal: todo sale de tokens-create.css.

   CONTRATO CON LAS SECCIONES (para las otras líneas)
     · z-index del chasis: 30-32 (token --ch-z).
       Un panel MODAL de sección debe montarse en z-index >= 100.
       Si además necesita el lienzo limpio, basta con:
          document.documentElement.dataset.chasis = 'oculto';
       y al cerrar:
          document.documentElement.dataset.chasis = '';
     · La sección que use flechas para navegar POR DENTRO debe
       exponer sus pasos como .el-rail__p / [data-ir] con
       aria-current="true" en el activo (como hace la 06). El
       chasis lee ese estado y sólo pasa de lámina en los extremos.
   ============================================================ */

/* --- Tipografía del chasis (cero red; rutas relativas a este CSS).
   Se declaran aquí para que el lockup y la nav no dependan de que
   cada lámina haya declarado sus @font-face. Si la lámina ya las
   declara (todas lo hacen hoy), su declaración es posterior y
   manda: mismo archivo, mismo resultado. --- */
@font-face{font-family:"Poppins";src:url("../fonts/poppins-500-latin.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-600-latin.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrainsmono-latin.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;}

:root{
  /* Alto, pero por debajo de cualquier panel modal de sección (>=100). */
  --ch-z: 30;

  /* --- LAS DOS BANDAS DEL CHASIS -----------------------------------
     Alto reservado arriba y abajo. Es la única perilla que decide
     cuánto lienzo cede la lámina; se toca aquí y en ningún otro sitio.
     Medidas: la fila de mandos mide 20 px de tinta; con el aire de una
     cabecera de revista queda en 38 (1440) / 34 (1366 y pantalla corta).
     El pie hospeda los numerales del mazo, que miden 22 px de tinta.
     (Eran doce y ahora son siete: el pie sobra de ancho, no falta.
     No se estrecha la banda — su alto lo fija la tinta del numeral,
     no cuántos haya, y bajarlo movería el acople medido del pie.) */
  --ch-cabecera: clamp(30px, 4.2vh, 40px);
  --ch-pie:      clamp(28px, 4.0vh, 38px);

  /* Perillas de encuadre: si una lámina necesita respirar, se ajustan
     aquí y en ningún otro sitio. */
  --ch-marca-top:   clamp(13px, 1.9vh, 24px);
  --ch-marca-right: clamp(20px, 2.5vw, 46px);
  /* El logo de Lira es un lockup HORIZONTAL (714x534, ratio 1,337) y
     su archivo trae AIRE MUERTO en la banda alta del lienzo: el
     dibujo ocupa aproximadamente los dos tercios de abajo. Medido
     sobre el render, escalarlo por su alto de caja lo deja
     ópticamente la mitad de pequeño de lo que dice el número, y a
     40 px la palabra "Seguridad" no se lee.
     La ley de 40-56 px del lockup anterior se traduce aquí a un alto
     de CAJA mayor, que compensa ese aire. El archivo no se toca:
     entra intacto, byte a byte, y quien lo equilibra es la maqueta. */
  --ch-logo-h:      clamp(42px, 3.6vw, 58px);
  --ch-nav-bottom:  clamp(8px, 1.2vh, 15px);
  /* Algunas láminas llevan un filete de progreso INTERNO de 2px pegado
     al borde superior (.el-progreso). El halo de la marca se apoya 3px
     más abajo para no apagarle el extremo derecho. */
  --ch-filete: 3px;
  /* Velos derivados del papel. El valor plano es sólo el respaldo
     para motores sin color-mix; ningún color se escribe a mano. */
  --ch-papel-0: transparent;
  --ch-papel-0: color-mix(in srgb, var(--paper) 0%, transparent);
  --ch-papel-85: var(--paper);
  --ch-papel-85: color-mix(in srgb, var(--paper) 88%, transparent);
}

/* ============================================================
   0 · RESPALDO SIN JAVASCRIPT
   Si el script no corre, la marca igual está en su sitio: el
   logo oficial de Lira, fijo arriba a la derecha. En cuanto el
   chasis se monta, [data-chasis] apaga este respaldo y entra el
   lockup. (La nav sí requiere el script: son 7 enlaces.)

   LA RUTA, Y POR QUÉ ES ASÍ (2026-09-09)
   Los logos oficiales viven en `Assets/0_LOGOS/`, hermano de
   `sitio_lira/`, que es donde la cartografía del encargo los
   pone. Esta hoja resuelve sus rutas contra sí misma
   (`assets/css/`), así que subir tres niveles cae en la raíz de
   la presentación desde CUALQUIER profundidad de página: la
   portada y las secciones ven el mismo archivo. Se referencia,
   no se duplica: un logo copiado en dos sitios es un logo que
   algún día será dos logos distintos.
   ============================================================ */
:root:not([data-chasis])::after{
  content:"";
  position:fixed;z-index:var(--ch-z);pointer-events:none;
  top:var(--ch-marca-top);right:var(--ch-marca-right);
  height:var(--ch-logo-h);aspect-ratio:714/534;
  background:url("/assets/0_LOGOS/lira-horizontal.svg") center/contain no-repeat;
}

/* ============================================================
   1 · ARMAZÓN
   Nada del chasis captura el puntero salvo sus propios controles.
   ============================================================ */
.ch{position:fixed;z-index:var(--ch-z);pointer-events:none;}
.ch a,.ch button{pointer-events:auto;}
:root[data-chasis="oculto"] .ch{display:none;}

/* ============================================================
   1.b · LAS DOS BANDAS Y EL LIENZO DE LA LÁMINA
   ------------------------------------------------------------
   Una sola regla cede el alto. Todas las láminas comparten el
   mismo gancho —[data-mv-lamina]— y todas son un lienzo de alto
   fijo con overflow:hidden y una retícula interna de tres filas
   (auto · 1fr · auto). Al bajarles el techo y subirles el suelo,
   la fila elástica del medio absorbe la diferencia: el titular
   sigue arriba, el cierre sigue abajo, y ninguno de los dos
   invade ya las bandas del chasis.

   Especificidad: (0,2,1). Las láminas declaran su alto con
   selectores de clase simples —.s08, .s11, .cover— que valen
   (0,1,0). Esta regla manda sin necesidad de !important, y sin
   tocar una línea del CSS de ninguna lámina.

   Sólo se aplica con el chasis montado. Si el script no corre,
   [data-chasis] no existe, la lámina conserva su 100dvh entero y
   se ve completa: el chasis nunca es requisito para que la pieza
   exista.
   ============================================================ */
:root[data-chasis] [data-mv-lamina]{
  margin-top: var(--ch-cabecera);
  height: calc(100dvh - var(--ch-cabecera) - var(--ch-pie));
}
/* El lienzo ya no llega a los bordes: nada debe poder desplazarse. */
:root[data-chasis], :root[data-chasis] body{ overflow:hidden; }

/* La banda: papel pleno que se desvanece hacia la lámina. No es una
   caja con borde —eso sería una barra de aplicación— sino el margen
   de una página impresa: papel que termina en un filete finísimo. */
.ch-banda{
  left:0;right:0;
  background:var(--paper);
  border-color:var(--rule-soft);
  border-style:solid;
  border-width:0;
}
.ch-banda--alta{ top:0;    height:var(--ch-cabecera); border-bottom-width:1px; }
.ch-banda--baja{ bottom:0; height:var(--ch-pie);      border-top-width:1px;    }

/* ============================================================
   2 · LOCKUP DE MARCA — arriba a la derecha
   ------------------------------------------------------------
   LIRA, 2026-09-09. Antes eran tres piezas: nombre propio en
   serif, bajada en mono y logo. Ahora es UNA: el logo oficial
   de Lira, y nada más.

   POR QUÉ SE QUEDA MUDO. La pieza anterior necesitaba escribir
   un nombre porque la conferencista ERA la marca. Aquí no: el
   guion cerrado nombra exactamente dos marcas —Servilonjas
   (anfitrión) y Lira (conferencista)— y las pone AL PIE DE LA
   PORTADA, no en cada pantalla. Escribir cualquier otra cosa en
   esta esquina sería copy inventado, y el copy de esta pieza es
   verbatim o no es. El lockup, entonces, dice lo único que
   tiene derecho a decir en las siete pantallas: Lira está aquí.
   Las clases del texto (.ch-marca__txt / __nom / __con / __filete)
   se conservan en la hoja, sin consumidor, por si una estación
   posterior recibe copy aprobado para esta esquina.

   El plato de papel se conserva íntegro: es lo que sostiene la
   marca sobre cualquier pantalla, con o sin texto debajo.
   ============================================================ */
.ch-marca{
  top:var(--ch-filete);right:0;
  padding:var(--ch-marca-top) var(--ch-marca-right)
          calc(var(--ch-marca-top) * 1.5) calc(var(--ch-marca-right) * 1.4);
  display:flex;align-items:center;gap:clamp(9px,.9vw,14px);
  isolation:isolate;
  /* Plato de papel. Medido: en 02, 03 y 05 hay texto de la lamina justo
     debajo de esta esquina. Con un halo timido el lockup se leia como
     choque tipografico. Ahora el nucleo llega a papel PLENO y la caida es
     larga y suave, asi que la marca se sostiene sobre su propio campo en
     cualquier lamina, tenga o no contenido debajo. */
  background:radial-gradient(135% 150% at 100% 0%,
      var(--paper)        0%,
      var(--paper)       38%,
      var(--ch-papel-85) 56%,
      var(--ch-papel-0)  88%);
}
/* NOTA DE OFICIO — 2026-09-03, Dali.
   Aqui hubo un backdrop-filter:blur bajo el plato. Se PROBO y se CORTO:
   estancaba el compositor y la captura se caia por timeout dos veces
   seguidas. En una proyeccion en vivo eso es tartamudeo delante de la
   clienta. El plato de papel pleno de arriba ya resuelve el choque solo,
   sin costo de render. No lo reintroduzcas. */
.ch-marca__txt{
  display:flex;flex-direction:column;align-items:flex-end;gap:.28em;
  text-align:right;
}
.ch-marca__nom{
  font-family:var(--display);font-optical-sizing:auto;
  font-variation-settings:"opsz" 24,"wght" 420;
  font-size:clamp(.86rem,1.02vw,1.06rem);line-height:1;
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap;
}
.ch-marca__con{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(.5rem,.6vw,.62rem);line-height:1;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
}
.ch-marca__filete{
  width:1px;align-self:stretch;flex:none;
  margin-block:.15em;background:var(--rule);
}
.ch-marca__logo{
  height:var(--ch-logo-h);width:auto;flex:none;display:block;
}

/* ============================================================
   3 · NAVEGACIÓN DEL MAZO — abajo al centro
   Portada + 01..06. Numerales en mono sobre una pauta fina.
   La lámina activa lleva la pauta en acento y aria-current.
   Las que aún no existen llevan pauta punteada, no son enlace y
   no reciben foco: se anuncian como "aún no disponible".
   ============================================================ */
/* La nav vive DENTRO de la banda baja, centrada en su alto y en el
   eje del papel. Ya no necesita halo propio: la banda pone el papel.
   Ya no flota sobre el cierre de ninguna lámina: la lámina termina
   donde empieza la banda. */
.ch-nav{
  /* 2 px de respeto al hilo de progreso, que vive pegado al borde. */
  left:50%;bottom:2px;height:calc(var(--ch-pie) - 2px);
  transform:translateX(-50%);
  display:flex;align-items:center;gap:clamp(1px,.15vw,3px);
  padding:0 clamp(10px,1.2vw,18px);
  max-width:min(94vw,1100px);
}
.ch-nav__mazo{
  display:flex;align-items:flex-end;gap:clamp(1px,.15vw,3px);
}

/* --- 3.0 MANDOS DEL MAZO — EN LA CABECERA (O-03) ------------
   Inicio · ← Anterior · Siguiente → viven arriba y al centro,
   dentro de la banda alta, en el eje exacto del papel.
   A su izquierda queda el rótulo de sección (de la lámina) y a
   su derecha el lockup de marca: ninguno de los dos se toca ni
   se mueve un píxel. Lo que se movió fue el techo de la lámina.

   Se centran sobre el eje del VIEWPORT, no sobre el hueco entre
   rótulo y lockup: el rótulo mide distinto en cada lámina, y un
   mando que se corre de sitio al pasar de página obliga a
   buscarlo doce veces. Un timón se busca una vez (Nielsen H4).
   ------------------------------------------------------------ */
.ch-mandos{
  left:50%;transform:translateX(-50%);
  top:0;height:var(--ch-cabecera);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,.6vw,10px);
  pointer-events:none;white-space:nowrap;max-width:min(96vw,560px);
}
.ch-nav__g{ display:flex;align-items:center;gap:clamp(5px,.55vw,9px); }

.ch-nav__m,.ch-volver{
  pointer-events:auto;cursor:pointer;
  display:inline-block;appearance:none;
  border:1px solid var(--rule);border-radius:2px;
  background:color-mix(in srgb, var(--paper-2) 88%, transparent);
  padding:.52em .82em;
  /* Medido: en la franja de abajo estos mandos venían a 8,96 px. Ahí eran uno
     más entre catorce elementos apretados y el tamaño se disculpaba solo.
     Arriba y solos ya no: son el único timón de la cabecera y se recorren una
     vez, en vivo, delante de la clienta. 8,96 px de mono en versalitas es un
     objetivo de ~20 px de alto — pequeño para Fitts y difícil de leer a
     distancia de proyección. Sube a 10,56–12,48 px: el objetivo pasa a ~24 px,
     sigue siendo discreto, y cabe de sobra en la banda.
     (WCAG no fija tamaño mínimo; la usabilidad sí. Es la misma ley del oficio:
     el mando se busca una vez y se encuentra.) */
  font-size:clamp(.66rem,.72vw,.78rem);line-height:1;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);
  transition:color var(--dur-fast,240ms) var(--ease,ease),
             border-color var(--dur-fast,240ms) var(--ease,ease),
             background-color var(--dur-fast,240ms) var(--ease,ease),
             opacity var(--dur-fast,240ms) var(--ease,ease);
}
.ch-nav__m:hover:not(:disabled){
  color:var(--accent-ink);border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, var(--paper-2));
}
.ch-nav__m:focus-visible,.ch-volver:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.ch-nav__m:disabled{ opacity:.32;cursor:default;border-style:dashed; }
.ch-nav__m--casa{ letter-spacing:.13em; }

/* --- 3.0.b VOLVER A LA SECCIÓN MADRE ------------------------
   Se queda ABAJO, y a propósito. Los tres mandos de la cabecera
   son navegación del mazo: llevan de una lámina a otra. Éste es
   navegación de dentro de la lámina: cierra lo que abriste. Son
   dos oficios distintos y por eso viven en dos sitios distintos
   (Nielsen H4: la posición enseña la función). Subirlo con los
   otros lo habría vuelto un cuarto mando de paso de página.

   Vive en el extremo izquierdo de la banda baja, en su ranura
   propia. Los doce numerales van centrados en el eje del
   viewport, así que este mando NO EMPUJA NADA al encenderse: el
   hueco está reservado por construcción, no por cálculo. Un
   timón que se mueve al usarse obliga a buscarlo dos veces.

   Apagado ocupa su sitio pero no se ve ni recibe foco (disabled).
   Encendido se pone en acento: es el mando que se busca con
   urgencia — "sácame de aquí sin perder la página".
   ------------------------------------------------------------ */
.ch-volver{
  visibility:hidden;pointer-events:none;
  /* Centrado en el alto de la banda baja, sea cual sea el alto que
     le den al botón sus propias em: el eje manda, no un número. */
  left:clamp(20px,2.5vw,46px);
  bottom:calc(var(--ch-pie) / 2);transform:translateY(50%);
}
.ch-volver[data-vivo]{
  visibility:visible;pointer-events:auto;
  border-color:var(--accent);color:var(--accent-ink);
  background:var(--paper-2);
  box-shadow:0 2px 10px -6px color-mix(in srgb, var(--ink) 40%, transparent);
  animation:ch-volver-entra var(--dur-fast,240ms) var(--ease,ease) both;
}
/* LEY DE LEGIBILIDAD SOBRE EL ACENTO — remedida para Lira, 2026-09-09.
   Sobre la TERRACOTA #CE7446 sólo escribe la tinta:
        tinta  #1E1B18 -> 5,07:1  PASA
        hueso  #F6F5F2 -> 3,10:1  no
        paper2 #FCFCFA -> 3,29:1  no
        blanco #FFFFFF -> 3,38:1  no
   La regla ya usaba tokens y por eso sigue siendo correcta al cambiar
   de cliente; lo que se actualiza aquí son los NÚMEROS del comentario,
   que citaban el coral de la pieza anterior. Una ley escrita con una
   medida vieja es una trampa para la siguiente línea que la lea.
   (El caso es el mismo y el veredicto también: la conclusión del
   hallazgo DI-CLAUDIA-001 se sostiene con la paleta nueva.)
   Y éste es justo el mando que alguien busca con urgencia: es el
   último sitio donde se puede aceptar un texto que no se lee. */
.ch-volver[data-vivo]:hover{ background:var(--accent);color:var(--ink); }
/* El 50% es el centrado en la banda (ver §3.0.b); el keyframe sólo
   añade los 3 px del gesto de entrada. Si se escribiera translateY(3px)
   a secas, la animación pisaría el centrado y el mando aparecería
   descolgado de su ranura. */
@keyframes ch-volver-entra{
  from{ opacity:0; transform:translateY(calc(50% + 3px)); }
  to  { opacity:1; transform:translateY(50%); }
}
.ch-nav__p{
  position:relative;display:block;text-decoration:none;
  padding:.46em .62em .54em;
  font-family:var(--mono);font-weight:500;
  font-size:clamp(.64rem,.75vw,.78rem);line-height:1;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);
  transition:color var(--dur-fast,240ms) var(--ease,ease);
}
/* la pauta: el hilo bajo cada numeral */
.ch-nav__p::after{
  content:"";position:absolute;left:.3em;right:.3em;bottom:0;height:1px;
  background:var(--rule);
  transition:background-color var(--dur-fast,240ms) var(--ease,ease),
             height var(--dur-fast,240ms) var(--ease,ease);
}
a.ch-nav__p:hover{color:var(--accent-ink);}
a.ch-nav__p:hover::after{background:var(--accent);}
a.ch-nav__p:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}
/* EL NUMERAL ACTIVO — corregido por medición, 2026-09-09 (Lira).
   La terracota tinta #904A26 mide 6,03:1 por fórmula, pero el
   numeral vive a ~10 px y en peso 500: medido sobre el PÍXEL
   PINTADO, el trazo se queda en 4,44:1 a 1366 — bajo el piso.
   La tinta no está mal elegida; lo que falta es TRAZO. Subiendo
   el peso a 700 solo en la pastilla activa, el núcleo del glifo
   alcanza su color y la medida sube por encima de 4,5 en los dos
   anchos de mandato. Y de paso el activo se distingue mejor,
   que es justo su oficio. El color no se toca: sigue siendo el
   acento, como manda el sistema. */
.ch-nav__p[aria-current="page"]{color:var(--accent-ink);font-weight:700;}
.ch-nav__p[aria-current="page"]::after{height:2px;background:var(--accent);}
/* aún no disponible: mismo peso de tinta (AA intacto), sin
   afordancia de clic y con la pauta punteada */
.ch-nav__p--espera{cursor:default;}
.ch-nav__p--espera::after{
  background:repeating-linear-gradient(to right,
    var(--rule) 0 2px, var(--ch-papel-0) 2px 4px);
}

/* --- 3.1 ACOPLE AL PIE DE LA LÁMINA — HISTÓRICO -------------
   Cuando la nav flotaba sobre la lámina, tres láminas (portada ·
   01 · 06) cerraban con un pie fijo de borde a borde y la nav se
   les acostaba DENTRO para no cruzar dos filetes y dos textos
   del mismo cuerpo a cuatro dedos de distancia.

   Desde el 2026-09-05 la nav ya no flota: vive en la banda baja
   del chasis, y la lámina termina donde la banda empieza. No hay
   nada sobre lo que acoplarse. La medición de chasis.js lo
   detecta sola —ninguna franja de lámina toca ya el borde
   inferior del viewport— y [data-dock] deja de ponerse por sí
   mismo, sin condicional nuevo.
   Estas reglas se conservan porque son el vestido correcto si
   alguna vez el acople vuelve a darse; hoy no se activan.
   ------------------------------------------------------------ */
.ch-nav[data-dock]{ background:none; padding-block:0; }
.ch-nav[data-dock] .ch-nav__p::after{ background:transparent; }
.ch-nav[data-dock] .ch-nav__p--espera::after{ background:transparent; }
.ch-nav[data-dock] a.ch-nav__p:hover::after{ background:var(--accent); }
.ch-nav[data-dock] .ch-nav__p[aria-current="page"]::after{
  height:2px;background:var(--accent);
}

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

/* ============================================================
   4 · PROGRESO DEL MAZO — hilo finísimo, borde inferior
   Distinto del progreso INTERNO de una sección (.el-progreso),
   que vive en el borde superior. Arriba: dónde voy dentro de la
   lámina. Abajo: dónde voy dentro del mazo.
   ============================================================ */
.ch-progreso{
  left:0;right:0;bottom:0;height:2px;background:var(--rule-soft);
}
.ch-progreso__i{
  height:100%;width:0;background:var(--accent);
  border-radius:0 2px 2px 0;
  transition:width var(--dur-slow,720ms) var(--ease,ease);
}

/* ============================================================
   5 · PASAR LA HOJA
   Dos caminos, mismo gesto: un fundido corto sobre el papel.
   (a) navegador con View Transitions entre documentos (servido
       por http): lo hace el motor, con la curva de abajo.
   (b) todo lo demás (incluido file://): el velo de papel del
       chasis, que sólo se enciende AL SALIR. Nunca al entrar:
       una lámina no puede depender de que un velo se apague
       para verse.
   ============================================================ */
@view-transition{ navigation: auto; }
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:260ms;
  animation-timing-function:var(--ease,cubic-bezier(.22,.61,.36,1));
}

.ch-velo{
  position:fixed;z-index:calc(var(--ch-z) + 2);inset:0;
  pointer-events:none;background:var(--paper);
  opacity:0;
}
.ch-velo[data-sale]{
  animation:ch-salir 190ms var(--ease,cubic-bezier(.22,.61,.36,1)) forwards;
}
@keyframes ch-salir{ from{opacity:0;} to{opacity:1;} }

/* ============================================================
   6 · MOVIMIENTO REDUCIDO — sin excepción
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ch-nav__p,.ch-nav__p::after,.ch-progreso__i{transition:none!important;}
  .ch-nav__m{transition:none!important;}
  .ch-volver{animation:none!important;}
  .ch-velo,.ch-velo[data-sale]{animation:none!important;opacity:0!important;}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important;}
}

/* ============================================================
   7 · PANTALLAS CORTAS
   Sólo escritorio (1920×1080 · 1440×900 · 1366×768). Esto es
   nada más la baranda para que no se rompa fuera de esos anchos.
   ============================================================ */
@media (max-width:900px), (max-height:600px){
  :root{ --ch-logo-h:34px; --ch-cabecera:32px; --ch-pie:30px; }
  .ch-nav{gap:0;padding-inline:6px;}
  .ch-nav__p{padding-inline:.36em;letter-spacing:.06em;}
  /* En pantalla corta el mando contextual se aprieta contra los
     numerales; se le quita el rótulo largo y queda el signo. */
  .ch-volver{ left:10px; }
}

/* ============================================================
   8 · EL CORREDOR DE LA MARCA — cuánto sitio ocupa el lockup
   ------------------------------------------------------------
   HALLAZGO DEL QA, 2026-09-09, cazado A OJO en la captura de
   390 px: el titular de una sección corría por debajo del
   lockup y la palabra "llegar" quedaba medio tapada.

   El instrumento de colisiones NO lo vio, y la razón importa:
   medía la lámina contra las dos bandas, contra `.ch-mandos` y
   contra `.ch-nav` — pero no contra `.ch-marca`. Un hueco en la
   lista de sospechosos es un PASA falso con otro nombre. La
   lista ya está completa; esto queda como su recordatorio.

   La causa real: el lockup no ocupa sólo su logo. Lleva un plato
   de papel con relleno generoso (§2), y ese plato baja bastante
   más que la imagen. A ancho de escritorio no molesta a nadie
   porque los titulares no llegan a esa esquina; a 390 px el
   titular ocupa todo el ancho y sí llega.

   La solución NO es apretar el titular en todas partes: es
   DECLARAR el corredor, igual que el chasis declara sus dos
   bandas. `--ch-marca-corredor` dice cuánto ancho se reserva
   arriba a la derecha, y cualquier lámina puede consumirlo. En
   escritorio vale 0 —no hace falta— y sólo se enciende donde
   el problema existe.
   ============================================================ */
:root{ --ch-marca-corredor: 0px; }
@media (max-width:900px){
  :root{
    /* logo (34px de alto × 714/534 ≈ 46px de ancho) + su margen
       derecho + un dedo de aire. Medido sobre el render. */
    --ch-marca-corredor: 84px;
  }
}