/* ============================================================
   CHASIS — marca, navegación del mazo, progreso y transición
   Dalí, Genio Audiovisual de AIONOVA · 2026-09-03
   Presentación Claudia Restrepo × AI-FIRST

   QUÉ ES
   La capa que convierte 12 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 (zonas libres, acordadas)
     · arriba a la derecha  -> lockup de marca
     · abajo al centro      -> navegación de las 12 láminas
     · borde inferior       -> 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).

   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:"Fraunces";src:url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight:100 900;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;
  /* 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);
  --ch-logo-w:      clamp(42px, 3.1vw, 56px); /* ley: 40-56px */
  --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, fijo arriba a la derecha. En cuanto el chasis se
   monta, [data-chasis] apaga este respaldo y entra el lockup
   completo. (La nav sí requiere el script: son 12 enlaces.)
   ============================================================ */
: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);
  width:var(--ch-logo-w);aspect-ratio:1/1;
  background:url("../../marca/aionova/aionova_logo_oficial.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;}

/* ============================================================
   2 · LOCKUP DE MARCA — arriba a la derecha
   "Claudia Restrepo" en Fraunces · "con AI-FIRST" en mono ·
   filete vertical · logo oficial AIONOVA.
   Se apoya en un halo de papel muy suave: la marca se sostiene
   sobre su propia luz sin abrir una caja que compita.
   ============================================================ */
.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{
  width:var(--ch-logo-w);height:auto;flex:none;display:block;
}

/* ============================================================
   3 · NAVEGACIÓN DEL MAZO — abajo al centro
   Portada + 01..11. 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".
   ============================================================ */
.ch-nav{
  left:50%;bottom:var(--ch-nav-bottom);transform:translateX(-50%);
  display:flex;align-items:flex-end;gap:clamp(1px,.15vw,3px);
  padding:clamp(5px,.6vh,8px) clamp(10px,1.2vw,18px);
  max-width:min(94vw,1100px);
  background:radial-gradient(88% 160% at 50% 100%,
      var(--ch-papel-85) 0%, var(--ch-papel-85) 46%, var(--ch-papel-0) 82%);
}
.ch-nav__mazo{
  display:flex;align-items:flex-end;gap:clamp(1px,.15vw,3px);
}

/* --- 3.0 MANDOS DE REGRESO ---------------------------------
   Fila propia sobre el mazo, centrada en el eje de la lámina.
   Va aquí y no a los lados del mazo por una razón medida: las
   tres láminas que cierran con pie fijo de borde a borde llevan
   texto en los DOS extremos de esa franja, y unos mandos
   colgados de los costados se montaban sobre el rótulo legal a
   1366. Por el medio se pasa limpio.
   El hueco del mando contextual se reserva aunque esté apagado:
   los otros tres no se corren nunca.
   ------------------------------------------------------------ */
.ch-mandos{
  left:50%;transform:translateX(-50%);
  bottom:calc(var(--ch-nav-bottom) + clamp(26px,3vh,36px));
  display:flex;align-items:center;gap:clamp(6px,.6vw,10px);
  pointer-events:none;white-space:nowrap;max-width:96vw;
}
.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:.5em .78em;
  font-family:var(--mono);font-weight:500;
  font-size:clamp(.56rem,.63vw,.66rem);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 ------------------------
   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; }
.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;
}
.ch-volver[data-vivo]:hover{ background:var(--accent);color:var(--paper-2); }
@keyframes ch-volver-entra{
  from{ opacity:0; transform:translateY(3px); }
  to  { opacity:1; transform:translateY(0); }
}
.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;}
.ch-nav__p[aria-current="page"]{color:var(--accent-ink);}
.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 -------------------------
   Tres láminas (portada · 01 · 06) cierran con un pie fijo de
   borde a borde: franja de papel, filete arriba y dos rótulos en
   mono, uno en cada extremo. Si la nav flota por encima, se
   cruzan dos filetes y dos textos del mismo cuerpo a cuatro
   dedos de distancia: eso es un accidente, no un diseño.
   Cuando chasis.js mide esa franja, acuesta la nav DENTRO, en el
   centro que el pie deja libre entre sus dos rótulos, y marca
   [data-dock]. El pie ya pone el papel, así que la nav suelta su
   halo y deja una sola marca: el subrayado de la lámina activa.
   Donde no hay franja (02 · 03 · 05 cierran con contenido en
   flujo) nada de esto aplica y la nav flota como fue diseñada.
   La posición vertical exacta la escribe el JS en
   --ch-nav-bottom; aquí sólo vive el cambio de vestido.
   ------------------------------------------------------------ */
.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-w:34px; }
  .ch-marca__nom{font-size:.76rem;}
  .ch-nav{gap:0;padding-inline:6px;}
  .ch-nav__p{padding-inline:.36em;letter-spacing:.06em;}
}