/* ============================================================
   CCCBR / CIMA — core.css · Shell no-scroll · Rail · Escenas · Portada
   Línea A (TL-CRCIMA-001A) · cargo: disenador-de-interfaz
   Consume assets/css/tokens.css (ANCLA — no se redefine ningún token aquí).
   Contiene: @font-face self-hosted · layout del shell · rail de navegación ·
   sistema de escenas + transiciones · primitivas de panel/overlay/toggle
   (contrato para B y C) · portada (escena 00) · responsive · print.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tipografía self-hosted (assets/fonts/) — cero dependencia externa
   Fraunces: variable (opsz 9–144, wght 300–700) · display editorial
   Archivo:  variable (wght 100–900, wdth 75–125) · cuerpo y UI
   JetBrains Mono: variable (wght 400–700) · cifras, eyebrows, labels
   ------------------------------------------------------------ */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:300 700;
  font-display:swap; src:url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:300 700;
  font-display:swap; src:url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:300 700;
  font-display:swap; src:url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:300 700;
  font-display:swap; src:url("../fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900;
  font-stretch:75% 125%; font-display:swap;
  src:url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900;
  font-stretch:75% 125%; font-display:swap;
  src:url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:italic; font-weight:100 900;
  font-stretch:75% 125%; font-display:swap;
  src:url("../fonts/archivo-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:italic; font-weight:100 900;
  font-stretch:75% 125%; font-display:swap;
  src:url("../fonts/archivo-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("../fonts/jetbrainsmono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("../fonts/jetbrainsmono-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ------------------------------------------------------------
   2. Variables de shell derivadas (NO son tokens de marca:
   son medidas del contenedor que sólo A gobierna)
   ------------------------------------------------------------ */
/* REGLA DE LEGIBILIDAD (vale para A, B y C):
   --sc-live pinta GRAFISMO (barras, reglas, progreso, numerales fantasma),
   nunca TEXTO. El acento por estación incluye oro (--sc-03) y verde
   (--sc-04), que sobre marfil no alcanzan 4.5:1. El texto vive en
   --ink / --ink-soft / --navy / --accent-ink, que sí cumplen AA+.

   Medido en chasis (Playwright, marfil #F6F4EE): --ink 14.5:1 ·
   --ink-soft 7.0:1 · --accent-ink 6.7:1 · --ink-mute 4.18:1 → --ink-mute
   NO se usa para texto (falla AA 4.5:1), sólo para reglas y puntos. */
:root{
  --sc-live:      var(--navy);          /* acento vivo de la escena activa */
  --rail-open:    clamp(228px, 21vw, 284px);
  --hud-h:        clamp(52px, 6vh, 68px);
  --progress-h:   2px;
  --p:            0;                    /* progreso 0..1 (lo escribe nav.js) */
}

/* ------------------------------------------------------------
   3. Reset mínimo y base
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{
  height:100%;
  overflow:hidden;                      /* NO-SCROLL: ley de la pieza */
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
  overscroll-behavior:none;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent-tint); color:var(--accent-ink); }

:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:4px;
}

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

/* ------------------------------------------------------------
   4. Estructura del shell
   ------------------------------------------------------------ */
.app{
  position:relative;
  height:100vh; height:100dvh;
  width:100%;
  overflow:hidden;
  isolation:isolate;
}

/* --- 4.1 Progreso superior (hairline) --- */
.progress{
  position:fixed; z-index:45;
  top:0; left:var(--nav-w); right:0; height:var(--progress-h);
  background:var(--rule-soft);
  transition:left var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.progress__fill{
  height:100%; width:calc(var(--p) * 100%);
  background:var(--sc-live);
  transition:width var(--dur-slow) var(--ease), background-color var(--dur) var(--ease);
}
html[data-cover="true"] .progress{ left:0; opacity:0; }

/* --- 4.2 Rail de navegación (fijo, expande por hover/foco, sin reflow) --- */
.rail{
  position:fixed; z-index:50;
  top:0; bottom:0; left:0;
  width:var(--nav-w);
  display:flex; flex-direction:column;
  background:var(--paper);
  border-right:1px solid var(--rule);
  overflow:hidden;
  transition:width var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             transform var(--dur-slow) var(--ease),
             opacity var(--dur) var(--ease);
}
.rail:hover,
.rail:focus-within,
.rail.is-pinned{
  width:var(--rail-open);
  box-shadow:var(--shadow-2);
}
html[data-cover="true"] .rail{
  transform:translateX(-101%);
  opacity:0;
  pointer-events:none;
}

.rail__head{
  padding:clamp(14px,2.2vh,22px) 0 clamp(12px,1.8vh,18px);
  border-bottom:1px solid var(--rule-soft);
  display:flex; flex-direction:column; align-items:stretch;
}
.rail__home{
  display:grid;
  grid-template-columns:var(--nav-w) 1fr;
  align-items:center;
  width:var(--rail-open);
  background:none; border:0; padding:0; cursor:pointer;
  text-align:left;
}
.rail__homeMark{
  justify-self:center;
  width:26px; height:26px;
  display:grid; place-items:center;
}
.rail__homeMark svg{ width:100%; height:100%; display:block; }
.rail__homeLabel{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
  opacity:0; transform:translateX(-6px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rail__home:hover .rail__homeLabel{ color:var(--ink); }

.rail__list{
  flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(2px,.6vh,8px);
  padding:clamp(8px,2vh,20px) 0;
}
.rail__item{
  position:relative;
  display:grid;
  grid-template-columns:var(--nav-w) 1fr;
  align-items:center;
  width:var(--rail-open);
  min-height:clamp(38px,5.2vh,52px);
  background:none; border:0; padding:0; cursor:pointer;
  text-align:left;
  color:var(--ink-soft);
  transition:color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.rail__item::before{                 /* barra de estado a la izquierda */
  content:""; position:absolute; left:0; top:50%;
  width:2px; height:0; transform:translateY(-50%);
  background:var(--sc-live);
  transition:height var(--dur) var(--ease);
}
.rail__num{
  justify-self:center;
  font-family:var(--mono);
  font-size:.72rem; font-weight:500; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  transition:color var(--dur-fast) var(--ease);
}
.rail__label{
  font-size:.92rem; font-weight:500; letter-spacing:.005em;
  white-space:nowrap; color:var(--ink);
  opacity:0; transform:translateX(-6px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rail__hint{
  display:block;
  font-family:var(--mono);
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:400;
  margin-top:2px;
}
.rail__item:hover{ color:var(--ink); background:rgba(20,33,61,.028); }
.rail__item:hover .rail__num{ color:var(--navy); }
/* El numeral avanza un pelo hacia su etiqueta al pasar el puntero:
   la navegación se siente viva sin decorarse */
.rail__item:hover .rail__num{ transform:translateX(2px); }
.rail__item .rail__num{ transition:color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.rail__item.is-current{ color:var(--ink); }
.rail__item.is-current::before{ height:calc(100% - 14px); }
.rail__item.is-current .rail__num{ color:var(--ink); font-weight:700; }
/* Al llegar a una estación, su marca de acento late una vez */
.rail__item.is-current::before{ animation:railTick 620ms var(--ease) both; }
@keyframes railTick{
  from{ height:0; opacity:.4 }
  60% { height:calc(100% - 14px); opacity:1 }
  to  { height:calc(100% - 14px); opacity:1 }
}
.rail__item.is-current .rail__label{ font-weight:600; }
.rail__item.is-visited .rail__num{ color:var(--ink-soft); }

.rail:hover .rail__label,
.rail:focus-within .rail__label,
.rail.is-pinned .rail__label,
.rail:hover .rail__homeLabel,
.rail:focus-within .rail__homeLabel,
.rail.is-pinned .rail__homeLabel{ opacity:1; transform:none; }

.rail__foot{
  border-top:1px solid var(--rule-soft);
  padding:clamp(12px,2vh,18px) 0;
  display:grid; grid-template-columns:var(--nav-w) 1fr; align-items:center;
  width:var(--rail-open);
}
.rail__count{
  justify-self:center;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em;
  font-variant-numeric:tabular-nums; color:var(--ink-soft);
}
.rail__count b{ color:var(--ink); font-weight:700; }
.rail__bar{
  height:2px; margin-right:clamp(14px,2vw,22px);
  background:var(--rule); border-radius:2px; overflow:hidden;
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.rail:hover .rail__bar,
.rail:focus-within .rail__bar,
.rail.is-pinned .rail__bar{ opacity:1; }
.rail__barFill{
  display:block; height:100%; width:calc(var(--p) * 100%);
  background:var(--sc-live);
  transition:width var(--dur-slow) var(--ease), background-color var(--dur) var(--ease);
}

/* --- 4.3 Escenario (área de escenas) --- */
.stage{
  position:absolute; inset:0;
  padding-left:var(--nav-w);
  transition:padding-left var(--dur) var(--ease);
}
html[data-cover="true"] .stage{ padding-left:0; }

/* --- 4.4 Escena: apiladas, sólo .is-active visible (contrato §3.2) --- */
.scene{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--paper);      /* opacidad real: disuelve limpio y habilita
                                   el compositing multiply de los logos */
  opacity:0; visibility:hidden;
  transform:translate3d(0,14px,0);
  transition:opacity var(--dur) var(--ease),
             transform var(--dur-slow) var(--ease),
             visibility var(--dur) step-end;
  will-change:opacity, transform;
}
.scene.is-active{
  opacity:1; visibility:visible; transform:none;
  transition:opacity var(--dur-slow) var(--ease),
             transform var(--dur-slow) var(--ease),
             visibility 0s;
}
.scene.is-leaving{ transform:translate3d(0,-10px,0); }

/* Dirección de viaje (la escribe nav.js): avanzar entra desde abajo,
   retroceder entra desde arriba. La navegación adquiere sentido físico. */
html[data-dir="back"] .scene:not(.is-active):not(.is-leaving){ transform:translate3d(0,-14px,0); }
html[data-dir="back"] .scene.is-leaving{ transform:translate3d(0,12px,0); }

/* Contenedor interno: centra, respira, y sólo él puede desbordar */
.scene__inner{
  flex:1 1 auto;
  width:var(--wrap); margin-inline:auto;
  padding:clamp(26px,4.4vh,58px) var(--gutter) calc(var(--hud-h) + clamp(10px,1.6vh,20px));
  display:flex; flex-direction:column; justify-content:center; gap:clamp(12px,1.8vh,22px);
  min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
.scene__inner::-webkit-scrollbar{ width:8px; }
.scene__inner::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:8px; }
.scene__inner::-webkit-scrollbar-track{ background:transparent; }

/* Tipografía de escena (la usan A, B y C por igual) */
.scene__eyebrow{
  font-family:var(--mono);
  font-size:var(--fs-eyebrow); font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  display:flex; align-items:center; gap:.7em;
}
.scene__eyebrow::before{
  content:""; width:clamp(18px,2.4vw,34px); height:2px;
  background:var(--sc-live); flex:0 0 auto;
}
.scene__title{
  font-family:var(--display);
  font-weight:450; font-optical-sizing:auto;
  font-size:var(--fs-h2);
  line-height:1.06; letter-spacing:-.012em;
  color:var(--ink);
  max-width:32ch;
  text-wrap:balance;
}
.scene__title em{
  font-style:italic; font-weight:450;
  color:var(--accent-ink);
}
.scene__lead{
  font-family:var(--display);
  font-style:italic; font-weight:400;
  font-size:var(--fs-lead); line-height:1.36;
  color:var(--ink-soft);
  max-width:60ch;
  text-wrap:pretty;
}
.scene__body{ max-width:82ch; color:var(--ink-soft); }
.scene__body p + p{ margin-top:.7em; }
.scene__body strong{ color:var(--ink); font-weight:600; }
.scene__panels{ margin-top:clamp(6px,1.2vh,14px); }

/* Numeral display de la escena (arquitectura visual, no decoración) */
.scene__numeral{
  position:absolute; z-index:-1;
  right:clamp(-10px,-.5vw,0px); bottom:calc(var(--hud-h) * .3);
  font-family:var(--display); font-weight:300;
  font-size:clamp(140px,22vw,300px); line-height:.78;
  color:var(--sc-live); opacity:.055;
  pointer-events:none; user-select:none;
  font-variant-numeric:lining-nums;
}

/* ------------------------------------------------------------
   5. Primitivas de interacción — CONTRATO para Líneas B y C
   (el comportamiento lo maneja nav.js por delegación global;
    B y C sólo escriben el markup con estos ganchos)
   ------------------------------------------------------------ */

/* 5.1 Panel expandible:
   <div class="panel">
     <button class="panel__toggle" data-panel="ID" aria-expanded="false">…</button>
     <div class="panel__body" id="ID" hidden>…</div>
   </div> */
.panel{ border-top:1px solid var(--rule); }
.panel:last-child{ border-bottom:1px solid var(--rule); }
.panel__toggle{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:1em;
  padding:clamp(10px,1.5vh,16px) 2px;
  text-align:left; color:var(--ink);
  font-size:1rem; font-weight:500; letter-spacing:.002em;
  transition:color var(--dur-fast) var(--ease);
}
.panel__toggle:hover{ color:var(--navy); }
.panel__toggle::after{
  content:""; margin-left:auto; flex:0 0 auto;
  width:11px; height:11px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur) var(--ease);
}
.panel__toggle[aria-expanded="true"]{ color:var(--ink); font-weight:600; }
.panel__toggle[aria-expanded="true"]::after{ transform:rotate(-135deg) translateY(-2px); }
/* El estado abierto se marca con grafismo, no con color de texto */
.panel.is-open{ box-shadow:inset 2px 0 0 var(--sc-live); }
.panel__kicker{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
  flex:0 0 auto; min-width:2.4em;
}
/* El toggle desliza un pelo al abrirse: el detalle "sale" del renglón */
.panel__toggle{ transition:color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease); }
.panel__toggle[aria-expanded="true"]{ padding-left:8px; }
.panel__body{
  padding:0 2px clamp(14px,2vh,20px) calc(2.4em + 1em);
  color:var(--ink-soft); max-width:78ch;
  animation:panelIn var(--dur) var(--ease) both;
}
.panel__body[hidden]{ display:none; }
@keyframes panelIn{
  from{ opacity:0; transform:translateY(-5px); }
  to{ opacity:1; transform:none; }
}

/* --- 5.1.b Cierre explícito del panel abierto (TL-CRCIMA-010A) ---------------
   El grupo de trabajo reportó paneles que se quedaban pegados sin forma clara
   de volver a la escena. Ahora todo `.panel__body` nace con una X inyectada por
   nav.js. Va en `sticky` para que siga visible aunque el panel scrollee por
   dentro, y flotada a la derecha para que el texto la rodee sin quedar debajo.
   Los prefijos `html` suben la especificidad: editorial.css y data.css se
   cargan DESPUÉS de este archivo y si no, ganan ellos. */
/* Los cuerpos de panel vienen en block, flex y grid según la línea que los
   escribió. La X tiene que caer arriba-derecha en los tres: `float` no aplica
   en grid/flex, y `justify-self` no aplica en block. Se declaran todas y cada
   contexto usa la suya. El margen inferior negativo evita que el botón abra
   una fila propia y empuje el contenido hacia abajo. */
html .panel__close{
  position:sticky; top:0; z-index:5;
  float:right;                    /* flujo normal */
  grid-area:1 / 1 / 2 / -1;       /* grid: primera fila SIEMPRE, aunque el panel
                                     use áreas nombradas y lo auto-colocaría al
                                     final. La colocación explícita gana. */
  justify-self:end;               /* grid: pegado al borde derecho */
  align-self:start;               /* grid y flex */
  margin:0 0 -34px auto;          /* flex/block: pega a la derecha, no empuja */
  width:34px; height:34px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:999px; cursor:pointer;
  background:var(--paper-2); color:var(--ink-soft);
  border:1px solid var(--rule);
  box-shadow:var(--shadow-1);
  transition:color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
html .panel__close svg{ width:15px; height:15px; display:block; }
html .panel__close:hover{
  color:#FFF; background:var(--accent); border-color:var(--accent);
  transform:rotate(90deg);
}
html .panel__close:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

/* Encaje: el panel abierto no crece sobre el bloque editorial ni se sale de
   pantalla. `--panel-max` lo calcula nav.js con la geometría real de cada
   escena; el sobrante se resuelve con scroll interno, nunca de página. */
html .scene .panel__body:not([hidden]){
  max-height:var(--panel-max, 62vh);
  overflow-y:auto; overscroll-behavior:contain;
  /* Sin padding-right global: forzarlo recortaba la tabla de fases. La X se lee
     sobre cualquier contenido porque lleva su propia placa y borde. */
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
html .scene .panel__body:not([hidden])::-webkit-scrollbar{ width:8px; }
html .scene .panel__body:not([hidden])::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:8px; }
html .scene .panel__body:not([hidden])::-webkit-scrollbar-track{ background:transparent; }
/* El detalle del mapa se gobierna a sí mismo dentro de su contenedor */
html .scene .panel__body .panel__body:not([hidden]){ max-height:none; }

@media (max-width:820px){
  html .panel__close{ width:38px; height:38px; }   /* objetivo táctil cómodo */
}

/* 5.2 Toggles de datos (COP/USD/CRC, escenario, cohorte).
   <div class="seg" role="group" aria-label="Moneda">
     <button data-toggle="currency" data-value="COP" class="is-selected">COP</button> … */
.seg{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--rule); border-radius:999px;
  background:var(--paper-2); padding:3px;
  box-shadow:var(--shadow-1);
}
.seg > [data-toggle]{
  background:none; border:0; cursor:pointer;
  padding:.42em 1.05em; border-radius:999px;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.seg > [data-toggle]:hover{ color:var(--ink); }
.seg > [data-toggle].is-selected{
  background:var(--navy); color:#FFF; font-weight:700;   /* AAA garantizado */
}

/* 5.3 Overlay / modal editorial:
   <div class="overlay" id="ID" hidden> <div class="overlay__sheet">…
     <button data-overlay-close>…</button> */
.overlay{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:center;
  padding:clamp(16px,4vh,52px);
  background:rgba(14,30,58,.34);
  backdrop-filter:blur(3px);
  animation:fadeIn var(--dur-fast) var(--ease) both;
}
.overlay[hidden]{ display:none; }
.overlay__sheet{
  position:relative;
  width:min(880px,100%); max-height:100%;
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  padding:clamp(22px,3.4vh,42px) clamp(20px,3vw,46px);
  animation:sheetIn var(--dur) var(--ease) both;
}
.overlay__close{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px; border-radius:999px;
  border:1px solid var(--rule); background:var(--paper);
  cursor:pointer; color:var(--ink-soft);
  display:grid; place-items:center;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.overlay__close:hover{ color:var(--accent-ink); border-color:var(--accent); }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes sheetIn{ from{opacity:0; transform:translateY(10px) scale(.99)} to{opacity:1; transform:none} }

/* 5.4 Bandeja inferior (fuentes, notas, cifras) */
.tray{
  position:fixed; z-index:60;
  left:var(--nav-w); right:0; bottom:0;
  max-height:min(46vh,420px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper-3);
  border-top:1px solid var(--rule);
  box-shadow:0 -12px 32px rgba(20,33,61,.08);
  padding:clamp(16px,2.4vh,26px) var(--gutter);
  animation:trayIn var(--dur) var(--ease) both;
}
.tray[hidden]{ display:none; }
@keyframes trayIn{ from{ transform:translateY(100%) } to{ transform:none } }

/* 5.5 Botones */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--rule);
  display:inline-flex; align-items:center; gap:.6em;
  padding:.82em 1.5em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:999px;
  font-size:.94rem; font-weight:500; letter-spacing:.005em;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn__arrow{ width:1em; height:1em; flex:0 0 auto; transition:transform var(--dur) var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }
.btn--primary{
  --btn-bg:var(--accent); --btn-fg:#FFF; --btn-bd:var(--accent);
  box-shadow:0 1px 2px rgba(168,29,36,.18), 0 10px 26px rgba(168,29,36,.20);
  font-weight:600;
}
.btn--primary:hover{ --btn-bg:var(--accent-ink); --btn-bd:var(--accent-ink); }
.btn--ghost{ --btn-fg:var(--ink-soft); }
.btn--ghost:hover{ --btn-fg:var(--ink); --btn-bd:var(--ink-mute); }
.btn--lg{ padding:1em 1.9em; font-size:1.02rem; }

/* ------------------------------------------------------------
   6. HUD inferior: avanzar / retroceder / contador / modo
   ------------------------------------------------------------ */
.hud{
  position:fixed; z-index:55;
  right:var(--gutter); bottom:clamp(14px,2.2vh,26px);
  display:flex; align-items:center; gap:clamp(8px,1vw,14px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
html[data-cover="true"] .hud{ opacity:0; transform:translateY(8px); pointer-events:none; }

.hud__nav{ display:flex; gap:6px; }
.hud__btn{
  width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--paper-2); border:1px solid var(--rule);
  color:var(--ink-soft); cursor:pointer;
  box-shadow:var(--shadow-1);
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.hud__btn svg{ width:15px; height:15px; }
.hud__btn:hover:not(:disabled){ color:var(--navy); border-color:var(--navy); }
.hud__btn:disabled{ opacity:.32; cursor:default; }
.hud__count{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  font-variant-numeric:tabular-nums; color:var(--ink-soft);
  padding-inline:.3em;
}
.hud__count b{ color:var(--ink); font-weight:700; }
.hud__mode{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:999px; padding:.55em 1em; cursor:pointer;
  box-shadow:var(--shadow-1);
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hud__mode:hover{ color:var(--ink); border-color:var(--ink-soft); }
html[data-mode="presentacion"] .hud__mode{
  color:var(--paper-2); background:var(--navy); border-color:var(--navy);
}

/* Modo presentación: se callan los expandibles (paneles) y el detalle marcado,
   PERO nunca el cuerpo de la escena — la Economía vive entera en .scene__body
   y ocultarla la dejaba en blanco (fix Dalí 2026-07-30). */
html[data-mode="presentacion"] .scene__panels,
html[data-mode="presentacion"] .u-detail{ display:none; }
/* La Economía conserva sus paneles (fases/agenda) también en presentación:
   son su contenido, no "detalle" secundario. */
html[data-mode="presentacion"] #scene-economia .scene__panels{ display:block; }
html[data-mode="presentacion"] .scene__title{ font-size:var(--fs-h1); max-width:26ch; }

/* ------------------------------------------------------------
   7. Portada — escena 00 (dominio exclusivo de Línea A)
   ------------------------------------------------------------ */
.scene--cover .scene__inner{
  width:100%; max-width:none; padding:0;
  overflow:hidden; justify-content:stretch;
}
.cover{
  position:relative;
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  row-gap:clamp(10px,2.2vh,26px);
  padding:clamp(20px,3.2vh,40px) var(--gutter) clamp(16px,2.4vh,28px);
  overflow:hidden;
}
/* Lienzo: marfil con una insinuación de luz, jamás degradado ruidoso */
.cover::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 82% 42%, rgba(251,250,246,.95) 0%, rgba(246,244,238,0) 62%),
    radial-gradient(70% 60% at 6% 100%, rgba(210,39,48,.035) 0%, rgba(246,244,238,0) 70%);
  pointer-events:none;
}
/* Red apenas insinuada (SVG propio, no stock) */
.cover__net{
  position:absolute; z-index:0;
  right:calc(var(--gutter) * -2.4); top:50%;
  width:min(58vw,800px); aspect-ratio:1;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.9;
}
.cover__net svg{ width:100%; height:100%; overflow:visible; }

/* Las tres bandas van con position:relative y z-index:auto: se pintan sobre
   .cover__net por orden de árbol, sin crear contextos de apilamiento extra. */
.cover__top{
  position:relative;
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--gutter);
}
/* Logo oficial CCBR: PNG con transparencia real → se compone directo sobre
   el marfil, sin blending ni recorte. Asset intacto (Tatuaje 1). */
.cover__ccbr{
  height:clamp(62px,9.4vh,104px); width:auto;
}
.cover__stamp{
  text-align:right;
  font-family:var(--mono); font-size:var(--fs-eyebrow);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  line-height:1.9;
  padding-top:.3em;
}
.cover__stamp b{ color:var(--navy); font-weight:700; }

.cover__body{
  position:relative;
  align-self:center;
  max-width:min(62ch,56%);
  display:flex; flex-direction:column; gap:clamp(12px,2vh,24px);
}
.cover__eyebrow{
  font-family:var(--mono); font-size:var(--fs-eyebrow); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:.8em;
}
.cover__eyebrow::before{
  content:""; width:clamp(26px,3.4vw,46px); height:2px; background:var(--accent);
}
.cover__title{
  font-family:var(--display);
  font-weight:420; font-optical-sizing:auto;
  /* la altura del viewport manda tanto como el ancho: la portada no-scroll
     nunca puede empujar el pie fuera de pantalla */
  font-size:clamp(1.95rem, min(5.5vw, 7.6vh), 5.4rem);
  line-height:1.0; letter-spacing:-.018em;
  color:var(--ink);
  text-wrap:pretty;
}
.cover__title em{
  font-style:italic; font-weight:420;
  color:var(--accent-ink);
}
.cover__lead{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:var(--fs-lead); line-height:1.4;
  color:var(--ink-soft); max-width:52ch;
}
.cover__rule{
  width:clamp(56px,7vw,96px); height:1px; background:var(--rule);
  margin:clamp(2px,.6vh,8px) 0;
}
.cover__actions{ display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); flex-wrap:wrap; }

.cover__foot{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,44px); flex-wrap:wrap;
  padding-top:clamp(14px,2vh,22px);
  border-top:1px solid var(--rule);
}
.cover__lockup{ display:flex; align-items:center; gap:clamp(14px,1.6vw,20px); }
.cover__lockupLbl{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
  line-height:1.5; white-space:nowrap; flex:0 0 auto;
}
/* Logo oficial CIMA: se usa el PNG transparente de Línea E sobre marfil.
   Sin placa, sin sombra, sin blending. La forma animada vive en §7.2. */
.cover__notes{
  display:flex; gap:clamp(14px,2.4vw,34px); flex-wrap:wrap;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
}
.cover__notes li{ display:flex; align-items:center; gap:.55em; }
.cover__notes li::before{
  content:""; width:5px; height:5px; border-radius:999px;
  background:var(--data); flex:0 0 auto;
}
.cover__afil{ display:flex; align-items:center; gap:clamp(8px,1vw,14px); }
.cover__afilLbl{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.cover__afil ul{ display:flex; align-items:center; gap:clamp(8px,1.1vw,16px); }
.cover__afil img{ height:clamp(22px,3vh,32px); width:auto; }

/* ------------------------------------------------------------
   7.1 CORECOGRAFÍA ÚNICA DE ENTRADA (una sola partitura, no piezas suel-
   tas compitiendo). Todo se mide en compases de --beat: la red es la cama
   sobre la que aterriza la tipografía, y el logo CIMA es el cierre.

        compás   elemento
        ------   ---------------------------------------------
          1      marca CCBR
          1.4    red: empieza a dibujarse (2 s, corre por debajo)
          1.6    sello (San José · propuesta de alianza)
          3.0    eyebrow
          3.8    TITULAR  ← el ancla
          5.0    regla
          5.4    lead
          6.4    acciones (Entrar)
          7.2    pie: notas de baranda
          7.6    logo CIMA: las cumbres se alzan desde su base
          9.8    logo CIMA: la palabra aparece
   ------------------------------------------------------------ */
:root{ --beat:90ms; }

.cover__top,
.cover__body > *,
.cover__foot{ animation:coverIn var(--dur-slow) var(--ease) both; }
.cover__ccbr           { animation:coverIn var(--dur-slow) var(--ease) both; animation-delay:calc(var(--beat) * 1)   }
.cover__stamp          { animation:coverIn var(--dur-slow) var(--ease) both; animation-delay:calc(var(--beat) * 1.6) }
.cover__top            { animation:none }          /* anima cada hijo, no la banda */
.cover__body > *:nth-child(1){ animation-delay:calc(var(--beat) * 3)   }  /* eyebrow */
.cover__body > *:nth-child(2){ animation-delay:calc(var(--beat) * 3.8) }  /* titular */
.cover__body > *:nth-child(3){ animation-delay:calc(var(--beat) * 5)   }  /* regla   */
.cover__body > *:nth-child(4){ animation-delay:calc(var(--beat) * 5.4) }  /* lead    */
.cover__body > *:nth-child(5){ animation-delay:calc(var(--beat) * 6.4) }  /* acciones*/
.cover__foot           { animation-delay:calc(var(--beat) * 7.2) }
@keyframes coverIn{
  from{ opacity:0; transform:translateY(12px) }
  to{ opacity:1; transform:none }
}

/* La regla se dibuja de izquierda a derecha, no aparece */
.cover__rule{ transform-origin:left center; animation:ruleDraw var(--dur-slow) var(--ease) calc(var(--beat) * 5) both; }
@keyframes ruleDraw{ from{ transform:scaleX(0); opacity:0 } to{ transform:none; opacity:1 } }

/* Trazo de la red: se dibuja, no aparece. Es la cama del titular. */
.cover__net .net-draw{
  stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);
  animation:netDraw 2s var(--ease) calc(var(--beat) * 1.4) both;
}
.cover__net .net-node{ animation:netNode .8s var(--ease) both; }
@keyframes netDraw{ to{ stroke-dashoffset:0 } }
@keyframes netNode{ from{ opacity:0; transform:scale(.6) } to{ opacity:1; transform:none } }
.cover__net .net-pulse{ animation:netPulse 4.2s var(--ease) infinite 2.2s; transform-origin:center; }
@keyframes netPulse{
  0%,100%{ opacity:.35; r:5 }
  50%{ opacity:.9; r:6.5 }
}

/* ------------------------------------------------------------
   7.2 LOGO CIMA — «las cumbres se alzan»
   El logo NO se redibuja ni se deforma: son dos copias del MISMO PNG
   oficial (`cima-logo-transparente-trim.png`), recortadas por máscara en
   bandas complementarias y recompuestas. El corte cae en el hueco vacío
   del asset —medido: 79,45 %–85,48 % del alto— así que no se parte un
   solo píxel de tinta. La banda superior (isotipo) crece desde su propia
   base; la inferior (palabra) aparece después. Estado final = el asset
   exacto, nítido, sin transformación acumulada. Compositing, no dibujo.
   ------------------------------------------------------------ */
.cimaMark{
  --cima-split: 82.5%;     /* línea de corte, dentro del hueco vacío */
  --cima-base:  79.45%;    /* base de las cumbres en el asset        */
  position:relative; flex:0 0 auto;
  height:clamp(58px,8.8vh,92px);
  aspect-ratio:743 / 613;
}
.cimaMark img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
}
/* Curva propia: el ease general del ancla es muy frontal y la cumbre
   aparecía de golpe. Esta arranca contenida y asienta con decisión —
   se lee como un ascenso, no como un destello. */
.cimaMark__peaks{
  clip-path:inset(0 0 calc(100% - var(--cima-split)) 0);
  animation:cimaRise 1080ms cubic-bezier(.42,.03,.24,1) calc(var(--beat) * 7.6) both;
}
.cimaMark__word{
  clip-path:inset(var(--cima-split) 0 0 0);
  animation:cimaWord var(--dur-slow) var(--ease) calc(var(--beat) * 11.6) both;
}
@keyframes cimaRise{
  from{ clip-path:inset(var(--cima-base) 0 calc(100% - var(--cima-split)) 0); opacity:0; transform:translateY(3px) }
  12% { opacity:1 }
  to  { clip-path:inset(0 0 calc(100% - var(--cima-split)) 0); opacity:1; transform:none }
}
@keyframes cimaWord{
  from{ opacity:0; transform:translateY(2px) }
  to  { opacity:1; transform:none }
}

/* ------------------------------------------------------------
   7.3 BARRIDO DE ACENTO — el momento «pasa algo»
   Al cambiar de escena, un barrido de luz cruza el lienzo cargando el
   color de la estación que entra. Lo crea e invoca nav.js; aquí vive su
   forma. No intercepta el puntero y jamás cubre rail, HUD ni overlays.
   ------------------------------------------------------------ */
.wipe{
  position:fixed; inset:0; z-index:42;
  pointer-events:none; overflow:hidden;
  color:var(--wipe-color, var(--navy));   /* lo escribe nav.js por escena */
  opacity:0;
}
.wipe__band,
.wipe__edge{ position:absolute; top:0; bottom:0; will-change:transform; }
.wipe__band{
  width:40vw;
  background:linear-gradient(90deg,
    transparent 0%, currentColor 60%, currentColor 84%, transparent 100%);
  opacity:.095;                 /* la luz pasa; el texto no se tiñe */
}
.wipe__edge{
  width:2px; background:currentColor; opacity:.42;
  box-shadow:0 0 18px 1px currentColor;
}
.wipe.is-sweeping{ opacity:1 }
.wipe.is-sweeping .wipe__band{ animation:sweepBand 760ms var(--ease) both }
.wipe.is-sweeping .wipe__edge{ animation:sweepEdge 760ms var(--ease) both }
.wipe.is-sweeping.is-back .wipe__band{ animation-name:sweepBandBack }
.wipe.is-sweeping.is-back .wipe__edge{ animation-name:sweepEdgeBack }
@keyframes sweepBand{ from{ transform:translateX(-48vw) } to{ transform:translateX(102vw) } }
@keyframes sweepEdge{ from{ transform:translateX(-4vw)  } to{ transform:translateX(102vw) } }
@keyframes sweepBandBack{ from{ transform:translateX(100vw) } to{ transform:translateX(-50vw) } }
@keyframes sweepEdgeBack{ from{ transform:translateX(100vw) } to{ transform:translateX(-4vw)  } }

/* ------------------------------------------------------------
   7.4 ENTRADA DE ESCENA — el modo exploración
   Los hijos directos de .scene__inner entran escalonados. Se apoya en las
   clases del contrato, así que los partials de B y C heredan la misma
   cadencia sin escribir una línea. Tope de 6 pasos: nada espera de más.
   ------------------------------------------------------------ */
.scene.is-active .scene__inner > *{
  animation:sceneIn 520ms var(--ease) both;
}
.scene.is-active .scene__inner > *:nth-child(1){ animation-delay:60ms }
.scene.is-active .scene__inner > *:nth-child(2){ animation-delay:120ms }
.scene.is-active .scene__inner > *:nth-child(3){ animation-delay:180ms }
.scene.is-active .scene__inner > *:nth-child(4){ animation-delay:240ms }
.scene.is-active .scene__inner > *:nth-child(5){ animation-delay:290ms }
.scene.is-active .scene__inner > *:nth-child(n+6){ animation-delay:340ms }
.scene--cover.is-active .scene__inner > *{ animation:none }   /* la portada tiene su propia partitura */
@keyframes sceneIn{
  from{ opacity:0; transform:translateY(10px) }
  to  { opacity:1; transform:none }
}
/* El numeral fantasma se asienta con la escena */
.scene.is-active .scene__numeral{ animation:numeralIn 900ms var(--ease) 120ms both }
@keyframes numeralIn{
  from{ opacity:0; transform:translateY(18px) }
  to  { opacity:.055; transform:none }
}

/* ------------------------------------------------------------
   8. Andamiaje de escena provisto por A (se reemplaza al integrar B/C)
   ------------------------------------------------------------ */
.stub{
  margin-top:clamp(8px,1.4vh,16px);
  display:inline-flex; align-self:flex-start; align-items:center; gap:.7em;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
  border:1px dashed var(--rule); border-radius:999px;
  padding:.5em 1em; background:var(--paper-2);
}
.stub::before{
  content:""; width:6px; height:6px; border-radius:999px;
  background:var(--gold); flex:0 0 auto;
}

/* ------------------------------------------------------------
   9. Responsive
   ------------------------------------------------------------ */
@media (max-width:1080px){
  .cover__body{ max-width:min(60ch,74%); }
  .cover__net{ width:min(78vw,700px); opacity:.62; }
}

@media (max-width:820px){
  :root{ --nav-w:0px; }
  .rail{
    top:auto; bottom:0; left:0; right:0;
    width:100% !important; height:auto;
    flex-direction:row; align-items:stretch;
    border-right:0; border-top:1px solid var(--rule);
    box-shadow:0 -8px 26px rgba(20,33,61,.08);
    overflow-x:auto; overflow-y:hidden;
  }
  .rail__head,.rail__foot{ display:none; }
  .rail__list{
    flex-direction:row; justify-content:flex-start;
    gap:0; padding:0; width:100%;
  }
  .rail__item{
    grid-template-columns:1fr; width:auto; flex:1 0 auto;
    min-height:56px; padding:8px 14px; justify-items:center;
    gap:1px; text-align:center;
  }
  .rail__item::before{
    left:50%; top:0; transform:translateX(-50%);
    width:0; height:2px;
  }
  .rail__item.is-current::before{ width:60%; height:2px; }
  .rail__num{ font-size:.66rem; }
  .rail__label{
    opacity:1; transform:none; font-size:.7rem;
    max-width:9ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .rail__hint{ display:none; }

  .stage{ padding-left:0; padding-bottom:56px; }
  html[data-cover="true"] .stage{ padding-bottom:0; }
  .progress{ left:0; }

  .scene__inner{
    justify-content:flex-start;
    padding:clamp(20px,3vh,30px) var(--gutter) calc(var(--hud-h) + 22px);
    gap:12px;
  }
  .scene__numeral{ font-size:clamp(96px,30vw,180px); opacity:.045; }

  .hud{ bottom:calc(56px + 12px); right:16px; }
  .tray{ left:0; bottom:56px; }

  .cover{ grid-template-rows:auto 1fr auto; padding-inline:var(--gutter); }
  .cover__body{ max-width:100%; }
  .cover__title{ font-size:clamp(2.05rem,8.6vw,3.1rem); }
  .cover__net{
    right:-28%; top:30%; width:132vw; opacity:.28;
  }
  .cover__top{ flex-direction:column; align-items:flex-start; gap:10px; }
  .cover__stamp{ text-align:left; line-height:1.7; }
  .cover__foot{ flex-direction:column; align-items:flex-start; gap:14px; }
  .cover__afil{ order:3; }
  .cover__actions .btn{ flex:1 1 auto; justify-content:center; }
}

@media (max-height:560px){
  .scene__inner{ justify-content:flex-start; }
  .cover__title{ font-size:clamp(1.9rem,4.6vh,2.8rem); }
  .cover__afil{ display:none; }
}

/* ------------------------------------------------------------
   10. Accesibilidad de movimiento
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    /* Anular la duración NO basta: con fill-mode:both, el RETARDO sostiene el
       primer fotograma. Sin esto, la coreografía de portada (y el logo CIMA,
       que arranca en opacidad 0) queda invisible casi un segundo. Los retardos
       también se anulan: todo nace en su estado final. */
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .cover__net .net-draw{ stroke-dashoffset:0; }
  /* Cinturón: el logo se declara completo y opaco, sin depender de la animación */
  .cimaMark__peaks{
    clip-path:inset(0 0 calc(100% - var(--cima-split)) 0) !important;
    opacity:1 !important; transform:none !important;
  }
  .cimaMark__word{ opacity:1 !important; transform:none !important; }
  .wipe{ display:none !important; }
}

/* ------------------------------------------------------------
   11. Impresión / PDF: las escenas se despliegan en secuencia
   ------------------------------------------------------------ */
@media print{
  html,body{ height:auto; overflow:visible; background:#fff; }
  .rail,.hud,.progress,.overlay,.tray,.cover__actions{ display:none !important; }
  .app{ height:auto; }
  .stage{ position:static; padding:0; }
  .scene{
    position:static; opacity:1 !important; visibility:visible !important;
    transform:none !important; break-after:page; page-break-after:always;
    min-height:auto;
  }
  .scene__inner{ overflow:visible; height:auto; padding:24pt; width:auto; }
  .scene__numeral{ display:none; }
  .panel__body[hidden]{ display:block !important; }
  .cover{ height:auto; }
}