/* ============================================================================
   casilla.css — la capa de marca sobre scrollcraft.css.
   El engine no se toca. Acá viven los tokens, el mundo (retícula + tinta +
   vidrio) y las clases propias de esta página.

   Receta cerrada 2026-08-30 (material/paleta.css + las dos DIRECCION html):
     fondo   = plano v10, gradiente 168° #1d3d4e→#0e2532→#061118 + retícula
               doble + viñeta + grano 5%
     vidrio  = escalón A+2, rgba(26,46,60,.70→.56), brillo 1.03
     canto   = borde direccional superior al 23% (el canto original al 50% es
               del render vertical de 1080; en web a 1px se lee como filete duro)
   ========================================================================= */

/* ---- la face de la marca. Inter/Inter Display, subseteadas, servidas desde
        el propio build: la página es autocontenida y no llama a nadie. ------ */
@font-face{font-family:"Inter Display";src:url("assets/fonts/InterDisplay-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url("assets/fonts/InterDisplay-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Web";src:url("assets/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Web";src:url("assets/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --rej-f:24px; --rej-g:120px;
  /* --- los seis roles --- */
  --sc-canvas:     #0b1a26;   /* --pl  */
  --sc-surface:    #12293a;
  --sc-ink:        #dbe6ef;   /* --tx  */
  --sc-ink-soft:   #93b0c6;   /* --dim */
  /* --- EL ACENTO. Un solo dueño de dos roles (el límite y el CTA), escrito
         SIEMPRE contra estos cinco tokens — jamás un literal suelto — para que
         la variante [data-acento] pueda cambiarlo entero de un atributo. ---- */
  --sc-accent:        #b08a45;      /* DORADO — default desde 2026-09-07 (HITO 1,
                                       decisión de Rodrigo: unifica con los videos) */
  --cs-accent-rgb:    176 138 69;   /* el mismo, en canales, para alfas */
  --cs-accent-hi:     #e8d5ae;      /* texto chico sobre oscuro (rol "limite") */
  --cs-accent-hover:  #d3b077;      /* CTA hover */
  --cs-accent-sel-ink:#fdf6e7;      /* tinta dentro de ::selection */
  --sc-accent-ink: #1b1206;

  --sc-font-display:"Inter Display","Inter Web",Inter,"Liberation Sans",Arial,sans-serif;
  --sc-font-text:   "Inter Web",Inter,"Liberation Sans",Arial,sans-serif;
  --sc-font-mono:   ui-monospace,"Liberation Mono","DejaVu Sans Mono",monospace;

  /* --- tinta secundaria en tres pasos, toda derivada del tinte del fondo --- */
  --cs-dim:   #93b0c6;
  --cs-dim2:  #6f95af;
  --cs-dim3:  #7ba1ba;   /* medido: a 9.3px sobre tinta necesita esto para 4.5:1 */
  --cs-line:  #1e3346;
  --cs-line2: #2b4a63;

  /* --- severidad. NO es un segundo acento: es codificación de dato, y va
         siempre acompañada de forma (cuadro lleno / medio / hueco) y de
         palabra, nunca solo de color. ------------------------------------- */
  --cs-grave: #e0715c;
  --cs-medio: #e8a75a;
  --cs-leve:  #8fa8bb;

  /* --- vidrio A+2 --- */
  --cs-vidrio: linear-gradient(180deg,rgba(26,46,60,.70),rgba(26,46,60,.56));
  --cs-canto:  rgba(219,230,239,.23);
  --cs-sombra: 0 14px 34px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.07) inset;

  --cs-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");

  /* --- el folio del margen --- */
  --cs-folio: 13.5rem;
  --cs-maxw:  70rem;
  /* CAJA DE LOS PLANOS DE LA CARÁTULA — fuente de verdad ÚNICA. El rótulo con su
     línea (.pl-front) y la card de hallazgo (.pl-mid) son planos distintos de
     parallax, pero comparten borde izquierdo y terminación derecha: cada uno
     declaraba su propio `right` y su propio `width`, y por eso no coincidían en
     ningún viewport (el rótulo nacía 61px adentro y la línea se pasaba 29px).
     El parallax del engine es translateY puro: alineados acá, quedan alineados
     en todo el scroll. Si mañana nace otro plano, hereda esta caja. */
  --cs-plano-right: clamp(1.5rem,6vw,7rem);
  --cs-plano-w:     min(23rem,34vw);

  /* EL BORDE DE TEXTO — una sola fuente de verdad para toda la página (§A3,
     «no lo veo del todo alineado»). El defecto era de página, no de pieza: las
     secciones de flujo (.cs-wrap) ponían margen del folio MÁS su sangría, y los
     actos pinneados (.maq/.pase/.lim__cab/.rail) REEMPLAZABAN la sangría por el
     margen del folio. Resultado: dos bordes a 56px, y el ojo saltaba cada vez
     que entraba o salía un acto pinneado. Ahora todos derivan de --cs-borde.
     Cualquier sección nueva de la F3 hereda esto y nace alineada. */
  --cs-sangria: clamp(1.25rem,5vw,3.5rem);   /* == padding-inline de .cs-wrap */
  --cs-borde:   calc(var(--cs-folio) + 3vw + var(--cs-sangria));

  --sc-measure: 58ch;
  --sc-shadow-color: 205 46% 4%;
}

/* Variante de acento TEAL (#4fd1c5, el acento del build 05-sep).
   El DORADO de arriba es el default desde 2026-09-07 (HITO 1). Esta variante se
   conserva para comparar y como rollback: se activa con ?acento=teal (script
   pre-CSS en el <head>). Medido sobre el canvas #0b1a26: el dorado da 5.5:1 —
   pasa 4.5:1; el compuesto por píxel se verifica en el harness. */
:root[data-acento="teal"]{
  --sc-accent:        #4fd1c5;
  --cs-accent-rgb:    79 209 197;
  --cs-accent-hi:     #cdf6f1;
  --cs-accent-hover:  #7fe6dc;
  --cs-accent-sel-ink:#eafffb;
  --sc-accent-ink:    #04141b;
}

/* ============================== EL MUNDO ================================= */

html{ -webkit-text-size-adjust:100%; }
body{
  background:#071219;
  color:var(--sc-ink);
  font-family:var(--sc-font-text);
  font-size:var(--sc-t-base);
  line-height:var(--sc-leading-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Retícula doble del plano registral: fina de 24px, gruesa de 120px, más la
   viñeta. Las tres viajan como capas `background-attachment:fixed` DENTRO del
   suelo de cada foja, no como un div encima: un overlay fijo por delante de las
   secciones les pasaría también por encima al vidrio y a la tinta, y un overlay
   por detrás no se ve. Fijas al viewport, el papel cambia debajo de una misma
   retícula y el corte se lee como cambio de foja, no como cambio de sitio. */
.sc-grain{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  background-image:var(--cs-grain); opacity:.05; mix-blend-mode:overlay;
}

/* Cada foja pinta su propio suelo. Corte duro, sin drift: interpolar entre dos
   fondos de capítulo es exactamente la blandura que esta gramática rechaza. */
.foja{ position:relative; z-index:2; }
/* `:not([data-sc-stage])` NO es decoración. `.sc-stage` trae `position:sticky` con
   la misma especificidad que `.foja > *`, y este archivo carga después: un
   `position:relative` acá le gana en silencio al sticky y el acto pinneado deja
   de pinnear. Es la trampa que el propio engine documenta. */
.foja > :not([data-sc-stage]){ position:relative; z-index:1; }
.foja > [data-sc-stage]{ z-index:1; }
.foja::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:
    radial-gradient(76% 58% at 50% 36%, transparent 40%, rgba(0,0,0,.5) 100%),
    linear-gradient(rgba(122,182,222,.052) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,182,222,.052) 1px,transparent 1px),
    linear-gradient(rgba(122,182,222,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,182,222,.085) 1px,transparent 1px),
    var(--suelo,linear-gradient(#0b1a26,#0b1a26));
  background-size: cover, 100% var(--rej-f,24px), var(--rej-f,24px) 100%,
                   100% var(--rej-g,120px), var(--rej-g,120px) 100%, cover;
  background-attachment: fixed, fixed, fixed, fixed, fixed, scroll;
}
.g-caratula{ --suelo:linear-gradient(168deg,#0f2b3a 0%,#091d2a 48%,#050f16 100%); }
.g-riesgo  { --suelo:linear-gradient(#0b1a26,#0b1a26); }
.g-maquinas{ --suelo:linear-gradient(#081722,#081722); }
.g-foja    { --suelo:linear-gradient(#0a1d2a,#0a1d2a); }
.g-pase    { --suelo:linear-gradient(180deg,#061118 0%,#04101a 100%); }
.g-limites { --suelo:linear-gradient(#0b1a26,#0b1a26); }
.g-escalera{ --suelo:linear-gradient(#08161f,#08161f); }
.g-colofon { --suelo:linear-gradient(#050e14,#050e14); }

/* Un tick de emulsión en la juntura, para que el corte sea un corte y no un
   borde de div. */
.foja + .foja::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,var(--cs-line2) 12%,var(--cs-line2) 88%,transparent);
}

/* ============================ TIPOGRAFÍA ================================= */

.cs-h1,.cs-h2,.cs-h3{
  font-family:var(--sc-font-display); font-weight:500;
  letter-spacing:var(--sc-track-tight); line-height:var(--sc-leading-none);
  text-wrap:balance; margin:0;
}
.cs-h1{ font-size:clamp(2.5rem,1.5rem+3.4vw,4.4rem); letter-spacing:-.042em; }
.cs-h2{ font-size:clamp(1.85rem,1.2rem+2vw,3rem); letter-spacing:-.034em; line-height:1.04; }
.cs-h3{ font-size:clamp(1.06rem,.95rem+.52vw,1.3rem); letter-spacing:-.022em; line-height:1.15; }

p{ margin:0; text-wrap:pretty; }
.cs-body{ max-width:var(--sc-measure); color:var(--cs-dim); font-size:var(--sc-t-base); }
.cs-body strong,.cs-lede strong{ color:var(--sc-ink); font-weight:500; }
  .x{}
.cs-lede{
  max-width:58ch; color:var(--sc-ink); font-weight:400;
  font-size:clamp(1.05rem,.98rem+.42vw,1.32rem); line-height:1.52;
  letter-spacing:var(--sc-track-normal);
}

/* El rótulo mono: folio, expediente, severidad, cifras. Es la voz del
   documento, no un disfraz de "técnico". */
.cs-rot{
  font-family:var(--sc-font-mono); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cs-dim3); font-weight:400;
}
.cs-rot--acento{ color:var(--sc-accent); }
.cs-rot--ink { color:var(--cs-dim); }
.cs-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* Regla de cabecera con guion cortado, del comp de referencia */
.cs-rule{
  height:1px; flex:1;
  background:repeating-linear-gradient(90deg,var(--cs-line2) 0 5px,transparent 5px 10px);
}
.cs-eyebrow{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.6rem; }

/* ============================== LAYOUT =================================== */

.cs-wrap{
  max-width:var(--cs-maxw); margin:0 auto;
  padding-inline:clamp(1.25rem,5vw,3.5rem);
}
@media (min-width:1180px){
  /* margen + padding-inline == var(--cs-borde); se deja explícito para que
     la caja siga teniendo su sangría propia en viewports angostos. */
  .cs-wrap{ margin-left:calc(var(--cs-borde) - var(--cs-sangria)); margin-right:auto; }
}
.cs-sec{ padding-block:clamp(2.2rem,3.8vw,3.7rem); }
.cs-sec--tight{ padding-block:clamp(2.75rem,5vw,5rem); }

/* Portada de capítulo: la intertitular a plena parada que pide la gramática */
.cs-inter{ margin-bottom:clamp(2rem,3.6vw,3.2rem); }
.cs-inter .cs-h2{ max-width:22ch; }
.cs-inter__k{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.1rem; }

/* ============================ EL FOLIO (chrome) ========================== */

.folio{
  position:fixed; z-index:60; pointer-events:none;
  inset:0 auto 0 0; width:var(--cs-folio);
  padding:clamp(1.5rem,3vw,2.6rem) 0 clamp(1.5rem,3vw,2.6rem) clamp(1.25rem,2.6vw,2.2rem);
  display:none; flex-direction:column; gap:1.4rem;
}
@media (min-width:1180px){ .folio{ display:flex; } }
.folio__wm{
  font-family:var(--sc-font-mono); font-size:.78rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--sc-ink);
}
.folio__list{ list-style:none; margin:auto 0; padding:0; display:flex; flex-direction:column; gap:.62rem; }
.folio__list a{
  pointer-events:auto; display:flex; align-items:baseline; gap:.6rem;
  text-decoration:none; color:var(--cs-dim3);
  font-family:var(--sc-font-mono); font-size:.63rem; letter-spacing:.2em;
  text-transform:uppercase; padding:.15rem 0;
  transition:color var(--sc-d-base) var(--sc-ease-out);
}
.folio__list a:hover,.folio__list a:focus-visible{ color:var(--sc-ink); }
.folio__list a::before{
  content:""; width:.85rem; height:1px; background:currentColor; opacity:.55;
  transform:scaleX(.42); transform-origin:left;
  transition:transform var(--sc-d-base) var(--sc-ease-out);
}
.folio__list li[aria-current="true"] a{ color:var(--sc-ink); }
.folio__list li[aria-current="true"] a::before{ transform:scaleX(1); background:var(--sc-accent); opacity:1; }
/* §A5 · EL PRECIO NO APARECE ANTES DEL VALOR (directiva Rodrigo 2026-09-07).
   El pie del folio conserva su caja (cero reflow al aparecer) pero no tiene
   tinta NI voz hasta que el lector llega a la escalera: `visibility` lo saca
   también del árbol de accesibilidad. El latch es de una sola vía — una vez
   entintado no se apaga al subir (parpadeo). Lo enciende casilla.js. */
.folio__foot{ font-family:var(--sc-font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cs-dim3);
  visibility:hidden; opacity:0; transition:opacity .5s ease; }
:root[data-precio="visible"] .folio__foot{ visibility:visible; opacity:1; }
 html[data-motion="reducido"] .folio__foot{ transition:none; } 


/* ═══════════════ §A6 · FORMAS DEL FOLIO DE FOJAS ═══════════════════════════
   Directiva de Rodrigo (2026-09-07, escalada): «ocupa mucho espacio y no creo
   que sea vista o aprovechada» → autorizado reducirla o eliminarla. Se construyen
   tres formas conmutables (?folio=) contra la de hoy, para decidir mirando.
   El ancho que recupera el contenido sale de --cs-folio, que ya gobierna el
   sangrado de TODAS las secciones (.cs-wrap, .maq, .pase, .lim__cab, .rail):
   cambiar el token reflowa la página entera, sin tocar cada sección.

     indice (hoy) 13.5rem + 3vw = 259px @1440  ·  línea base
     canto         3.5rem + 3vw =  99px @1440  ·  recupera 160px (62%)
     hilo              0 + 3vw =   43px @1440  ·  recupera 216px (83%)
     cero              0 + 3vw =   43px @1440  ·  recupera 216px (83%), sin orientación
   ------------------------------------------------------------------------- */

/* ---- forma CANTO: el índice se reduce a un canto de 3.5rem. La marca sube de
        tamaño y corre en vertical (§A3); cada foja queda como una muesca, y el
        nombre aparece al hover/focus. El enlace sigue siendo un enlace: el texto
        no se borra, se oculta visualmente (lo lee el lector de pantalla). ---- */
:root[data-folio="canto"]{ --cs-folio:3.5rem; }
:root[data-folio^="canto"] .folio{ padding-left:0; align-items:center; gap:1.1rem; }
/* La marca, RECTA (directiva de Rodrigo 2026-09-07: «tiene que estar recto no
   parado… el nombre merece más protagonismo»). Medido con la fuente real:
   CASILLA en horizontal pide 75px en su versión más apretada — no entra en un
   rail de 56px. De ahí las dos salidas, A y B. */
:root[data-folio^="canto"] .folio__wm{
  writing-mode:horizontal-tb; transform:none; color:var(--sc-ink);
  margin:0; white-space:nowrap;
}

/* ---- CANTO-A · el rail se ensancha para alojar la marca recta y grande.
        28px con tracking .14em = 142px medidos → rail de 9.5rem (152px). ---- */
/* El rail aloja la marca CENTRADA y con aire (corrección de Rodrigo: «no puede
   nacer del borde»). Medido: CASILLA a 28px con tracking .08em ocupa ~132px;
   el rail va a 10rem (160px) para dejar ~14px de aire a cada lado. El tracking
   baja de .14em a .08em para comprar ese aire SIN encoger el nombre. */
:root[data-folio="canto-a"]{ --cs-folio:10rem; }
:root[data-folio="canto-a"] .folio__wm{ font-size:1.75rem; letter-spacing:.08em; align-self:center; }
:root[data-folio="canto-a"] .folio{ padding-inline:.75rem; }

/* ---- CANTO-B · la marca sale del rail y se va a la carátula, donde no compite
        por ancho y puede crecer sin techo. El canto queda como muescas puras y
        baja a 2.5rem (40px) — el rail más angosto de las tres. ------------- */
:root[data-folio="canto-b"]{ --cs-folio:2.5rem; }
:root[data-folio="canto-b"] .folio__wm{ display:none; }
:root[data-folio="canto-b"] .caratula__marca{
  display:block; font-family:var(--sc-font-mono);
  font-size:clamp(1.7rem,2.9vw,2.45rem); letter-spacing:.14em;
  text-transform:uppercase; color:var(--sc-ink);
  margin-bottom:clamp(1.4rem,2.6vw,2.2rem);
}

/* ---- la forma «canto» original (marca vertical) se conserva como referencia
        del frame que Rodrigo ya miró. ---------------------------------------- */
:root[data-folio="canto"] .folio__wm{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:1.02rem; letter-spacing:.5em; margin:0 auto;
}
:root[data-folio^="canto"] .folio__list{ gap:.9rem; align-items:center; }
:root[data-folio^="canto"] .folio__list a{ position:relative; padding:.3rem 0; gap:0; }
/* el rótulo se oculta a la vista, no al árbol de accesibilidad */
:root[data-folio^="canto"] .folio__list a > span{
  position:absolute; left:calc(100% + .7rem); top:50%; transform:translateY(-50%);
  white-space:nowrap; opacity:0; pointer-events:none;
  padding:.3rem .6rem; background:rgba(7,18,25,.92); border:1px solid var(--cs-line);
  transition:opacity var(--sc-d-base) var(--sc-ease-out);
}
:root[data-folio^="canto"] .folio__list a:hover > span,
:root[data-folio^="canto"] .folio__list a:focus-visible > span{ opacity:1; }
:root[data-folio^="canto"] .folio__list a::before{ width:1.3rem; transform:scaleX(.5); }
/* R2-Lote5 · G18/RV-037: la marca de la foja actual, más grande y con neón leve */
:root[data-folio^="canto"] .folio__list li[aria-current="true"] a::before{
  height:3px; width:1.6rem;
  box-shadow:0 0 7px rgb(var(--cs-accent-rgb)/.75), 0 0 2px rgb(var(--cs-accent-rgb)/.9);
}
/* R2-Lote5 · G19 (mecanismo B aprobado): el avance continuo del canto.
   La geometría del avance sigue la curva endowed+γ0.72 publicada por casilla.js
   en --hilo-p; converge a la posición REAL desde x=0.75 y es exacta desde 0.92
   (la zona de compra nunca miente). Los rótulos de cuaderno siguen entintando
   en su posición real: los hechos no se curvan, solo la geometría del hilo. */
:root[data-folio^="canto"] .folio__list{ position:relative; }
:root[data-folio^="canto"] .folio__list::before{
  content:""; position:absolute; left:-.6rem; top:-.2rem; bottom:-.2rem; width:2px;
  background:rgba(219,230,239,.09);
}
:root[data-folio^="canto"] .folio__list::after{
  content:""; position:absolute; left:-.6rem; top:-.2rem; bottom:-.2rem; width:2px;
  background:linear-gradient(180deg, rgb(var(--cs-accent-rgb)/.4), var(--sc-accent));
  transform:scaleY(var(--hilo-p, 0)); transform-origin:top;
}
:root[data-folio="canto"] .folio__foot,
:root[data-folio="canto-b"] .folio__foot{ writing-mode:vertical-rl; margin:0 auto; }

/* ---- formas HILO y CERO: el índice se elimina. El ancho vuelve al contenido. ---- */
:root[data-folio="hilo"]{ --cs-folio:0rem; }
:root[data-folio="cero"]{ --cs-folio:0rem; }
:root[data-folio="hilo"] .folio,
:root[data-folio="cero"] .folio{ display:none !important; }

/* En las formas sin rail, la marca —más grande (§A3)— vive en la carátula. */
.caratula__marca{ display:none; }
:root[data-folio="hilo"] .caratula__marca,
:root[data-folio="cero"] .caratula__marca{
  display:block; font-family:var(--sc-font-mono); font-size:clamp(1rem,1.5vw,1.35rem);
  letter-spacing:.52em; text-transform:uppercase; color:var(--sc-ink);
  margin-bottom:clamp(1.6rem,3vw,2.6rem);
}

/* ---- El ancho recuperado sólo llega al CONTENIDO si además sube el tope.
        Sin esto, eliminar el índice corre la página a la izquierda y deja el
        espacio como margen derecho muerto (--cs-maxw la topa en 70rem/1120px).
        La forma «ancho» sube el tope para el layout de dos columnas del §A2:
        la columna de TEXTO conserva su medida cómoda por su propio max-width
        (en ch), y el ancho extra se lo queda la columna de ANIMACIÓN. ------- */
:root[data-folio="ancho"]{ --cs-folio:0rem; --cs-maxw:82rem; }
:root[data-folio="ancho"] .folio{ display:none !important; }
:root[data-folio="ancho"] .hilo{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px;
  position:fixed; z-index:61; inset:0 0 auto 0; height:2px; pointer-events:none;
}
:root[data-folio="ancho"] .caratula__marca{
  display:block; font-family:var(--sc-font-mono); font-size:clamp(1rem,1.5vw,1.35rem);
  letter-spacing:.52em; text-transform:uppercase; color:var(--sc-ink);
  margin-bottom:clamp(1.6rem,3vw,2.6rem);
}
@media (max-width:1179px){ :root[data-folio="ancho"] .hilo{ display:none; } }

/* ---- EL HILO: la orientación que sobrevive a la eliminación del índice ----
   2px arriba, un tramo por foja. El tramo recorrido queda tenue; el tramo en
   curso se entinta en acento. Cuesta 2px de alto y 0 de ancho. */
.hilo{ display:none; }
:root[data-folio="hilo"] .hilo{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px;
  position:fixed; z-index:61; inset:0 0 auto 0; height:2px; pointer-events:none;
}
.hilo i{ background:rgba(219,230,239,.13); transition:background var(--sc-d-base) var(--sc-ease-out); }
.hilo i[data-seen="true"]{ background:rgba(219,230,239,.3); }
.hilo i[data-now="true"]{ background:var(--sc-accent); }
 html[data-motion="reducido"] .hilo i{ transition:none; } 

/* El hilo es chrome de desktop: en móvil ya manda la tira .folio-m */
@media (max-width:1179px){ :root[data-folio="hilo"] .hilo{ display:none; } }

/* Móvil y tablet: el folio baja a una tira superior, mismo contenido, una línea */
.folio-m{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem clamp(1.25rem,5vw,3.5rem);
  background:rgba(7,18,25,.86); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--cs-line);
  font-family:var(--sc-font-mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cs-dim3);
}
@media (min-width:1180px){ .folio-m{ display:none; } }
.folio-m__wm{ color:var(--sc-ink); letter-spacing:.34em; }
.folio-m__now{ margin-left:auto; color:var(--sc-accent); text-align:right; }

/* ============================== VIDRIO =================================== */

.vidrio{
  background-image:var(--cs-vidrio);
  border-top:1px solid var(--cs-canto);
  border-radius:6px;
  box-shadow:var(--cs-sombra);
  backdrop-filter:blur(14px) saturate(1.26) brightness(1.03);
  -webkit-backdrop-filter:blur(14px) saturate(1.26) brightness(1.03);
}
.tinta{ background:rgba(5,14,20,.5); border:1px solid var(--cs-line); border-radius:6px; }

/* ============================ 0 · CARÁTULA =============================== */

.caratula{ position:relative; min-height:100svh; display:flex; align-items:center; }
/* Los planos viven en la SECCIÓN, no en la columna de texto: recortarlos al ancho
   de lectura deja un canto de div visible donde debería haber profundidad. */
.g-caratula > .caratula__planes{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }

/* plano 1 · el fondo: la foliación fantasma, grande, detrás de todo */
.pl-back{
  position:absolute; right:2vw; top:5%;
  font-family:var(--sc-font-display); font-weight:600;
  font-size:min(38vw,30rem); line-height:.76; letter-spacing:-.06em;
  color:rgba(126,186,226,.055); user-select:none;
}
/* plano 2 · la plancha de vidrio con el formulario del hallazgo, vacío */
.pl-mid{ position:absolute; right:var(--cs-plano-right); top:50%; margin-top:-9rem; width:var(--cs-plano-w); z-index:2; }
/* plano 4 · la cota: hilo de dimensión que cruza por delante de la plancha */
/* el plano de adelante CRUZA la plancha: la oclusión es lo que da la profundidad */
.pl-front{ position:absolute; right:var(--cs-plano-right); top:50%; margin-top:-9.9rem; width:var(--cs-plano-w); z-index:3; }

.caratula__type{ position:relative; z-index:4; padding-block:clamp(5rem,11vh,7.5rem); }
.caratula__sum{
  display:inline-block; margin-bottom:2rem; padding:.7rem .95rem .8rem;
  border-left:1px solid var(--sc-accent); background:rgb(var(--cs-accent-rgb) / .05);
}
.caratula__sum b{ display:block; color:var(--sc-accent); font-weight:400; margin-bottom:.35rem; }
.caratula__sum span{ font-family:var(--sc-font-text); font-size:.9rem; color:var(--cs-dim); letter-spacing:0; text-transform:none; }
/* 2026-10-20 · lema de marca + línea fija (par aprobado por Rodrigo): membrete de la carátula */
.caratula__lema{ max-width:52ch; margin:0 0 1.5rem; color:var(--cs-dim); font-size:.92rem; line-height:1.55; }
.caratula__lema b{ display:block; color:var(--sc-ink); font-weight:500; font-size:1.02rem; margin-bottom:.2rem; }
.caratula .cs-h1{ max-width:23ch; margin-bottom:1.1rem; }
/* C1 (R2): la línea de estándar — entre el titular y el cuerpo, tinta plena */
.caratula__estandar{
  max-width:38ch; margin:0 0 1.6rem; color:var(--sc-ink);
  font-size:clamp(1.08rem,.95rem+.5vw,1.3rem); line-height:1.45; letter-spacing:-.012em;
}
.caratula__cuerpo{ max-width:46ch; color:var(--cs-dim); font-size:1.02rem; line-height:1.62; }
.caratula__cuerpo b{ color:var(--sc-ink); font-weight:500; }
.caratula__pie{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.65rem 1.6rem; align-items:center; }

/* el formulario vacío del hallazgo (plano medio) */
.acta-vacia{ padding:1.05rem 1.15rem 1.2rem; }
.acta-vacia__t{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.acta-vacia dl{ margin:0; display:grid; grid-template-columns:1fr; gap:.62rem; }
.acta-vacia div{ display:flex; align-items:baseline; gap:.7rem; padding-bottom:.5rem; border-bottom:1px solid rgba(219,230,239,.07); }
.acta-vacia dt{ font-family:var(--sc-font-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cs-dim3); flex:0 0 6.4rem; }
.acta-vacia dd{ margin:0; flex:1; height:1px; background:repeating-linear-gradient(90deg,var(--cs-line2) 0 4px,transparent 4px 8px); }

.cota{ display:flex; align-items:center; gap:.7rem; }
.cota__bar{ position:relative; flex:1; height:12px; }
.cota__bar::before{ content:""; position:absolute; inset:50% 0 auto; height:1px; background:var(--sc-accent); opacity:.8; }
.cota__bar::after{ content:""; position:absolute; inset:0 0 0 0; border-left:1px solid var(--sc-accent); border-right:1px solid var(--sc-accent); opacity:.8; }
.cota__lbl{ font-family:var(--sc-font-mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sc-accent); white-space:nowrap; }

@media (max-width:1040px){
  .pl-back{ font-size:52vw; top:auto; bottom:-4%; right:-6vw; }
  .pl-mid{ position:relative; right:auto; top:auto; margin:2.6rem 0 0; width:min(23rem,100%); }
  /* móvil: el rótulo hereda el ancho de la card, igual que en escritorio */
  .pl-front{ position:relative; right:auto; top:auto; margin:1.5rem 0 0; width:min(23rem,100%); }
  .caratula{ min-height:0; }
  .caratula__planes{ position:static; overflow:visible; }
  .caratula__type{ padding-block:clamp(4.5rem,10vh,7rem) 0; }
  .caratula .cs-h1{ font-size:clamp(2.1rem,1.35rem+3.2vw,3rem); }
}

/* 2026-10-20 · móvil angosto: la card decorativa y la cota caían ENCIMA del lema y de la
   sumilla (los planos siguen absolutos por especificidad de .g-caratula > .caratula__planes).
   Son decoración (aria-hidden): en ≤1040px se retiran; el número de fondo se queda. */
@media (max-width:1040px){
  .g-caratula .pl-mid, .g-caratula .pl-front{ display:none; }
}

/* ============================ 1 · EL RIESGO ============================== */

.riesgo__grid{ display:grid; gap:clamp(1.4rem,2.4vw,2.1rem); }
@media (min-width:900px){ .riesgo__grid{ grid-template-columns:1fr 1fr; } }
.riesgo__it{ padding-top:.9rem; border-top:1px solid var(--cs-line); }
.riesgo__it h3{ margin:.55rem 0 .42rem; }
.riesgo__it p{ color:var(--cs-dim); font-size:.92rem; line-height:1.56; max-width:46ch; }
/* la primera pieza ocupa las dos columnas: quiebra la simetría de rejilla */
@media (min-width:900px){ .riesgo__it--ancho{ grid-column:1 / -1; } .riesgo__it--ancho p{ max-width:78ch; } }
.riesgo__cierre{
  margin-top:clamp(1.7rem,3vw,2.6rem); padding:1.2rem 1.5rem;
  border-left:1px solid var(--cs-line2); background:rgba(5,14,20,.42);
}
.riesgo__cierre p{ color:var(--sc-ink); max-width:76ch; font-size:.96rem; line-height:1.56; }

/* ========================= 2 · LAS DOS MÁQUINAS ========================== */

.maq{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center;
      padding:clamp(3.5rem,7vh,5rem) clamp(1.25rem,5vw,3.5rem) clamp(1.5rem,4vh,2.5rem); }
@media (min-width:1180px){ .maq{ padding-left:var(--cs-borde); } }
.maq__in{ max-width:var(--cs-maxw); width:100%; margin:0 auto; }
@media (min-width:1180px){ .maq__in{ margin-left:0; } }
.maq__cab{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:.2rem; }
.maq__cab > *{ padding:0 0 .6rem; }
.maq__cab > :last-child{ padding-left:clamp(1rem,2.4vw,2.2rem); }
.maq__ejes{ position:relative; }

/* el divisor: hilo vertical que se corre con --sc-p. No colapsa (eso es la
   gramática split-stage, y acá el split es un dispositivo, no la página). */
.maq__div{
  position:absolute; top:0; bottom:0; width:1px; background:var(--cs-line2);
  left:calc(50% - var(--sc-p,0) * 3.2%);
  transition:none;
}
.maq__div::before{
  content:""; position:absolute; left:-2px; top:0; width:5px;
  height:calc(var(--sc-p,0) * 100%); background:var(--sc-accent); opacity:.5;
}
.maq__eje{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--cs-line); }
.maq__eje > div{ padding:.62rem clamp(1rem,2.4vw,2.2rem) .7rem 0; }
.maq__eje > div + div{ padding-left:clamp(1rem,2.4vw,2.2rem); padding-right:0; }
.maq__k{ display:block; margin-bottom:.38rem; }
.maq__eje p{ font-size:.85rem; line-height:1.48; color:var(--cs-dim); max-width:44ch; }
.maq__eje .sys p{ color:var(--sc-ink); }
.maq__cierre{ margin-top:.85rem; padding:.7rem 1.1rem; border-left:1px solid var(--sc-accent); background:rgb(var(--cs-accent-rgb) / .045); }
.maq__cierre p{ color:var(--sc-ink); max-width:74ch; font-size:.95rem; line-height:1.5; }

@media (max-width:820px){
  .maq__cab,.maq__eje{ grid-template-columns:1fr; }
  .maq__eje > div + div{ padding-left:0; border-top:1px solid rgba(219,230,239,.07); }
  .maq__cab > :last-child{ padding-left:0; }
  .maq__div{ display:none; }
  .maq__eje p{ max-width:none; }
}

/* ============================ 3 · LA FOJA ================================ */
/* Silencio autorado. Casi nada en pantalla, a propósito. */
.silencio{ padding-block:clamp(3rem,8vh,5.5rem); }
.silencio__p{
  max-width:54ch; color:var(--cs-dim); font-size:clamp(1.02rem,.95rem+.4vw,1.2rem);
  line-height:1.78;
}
.silencio__r{ margin-top:2.4rem; display:flex; align-items:center; gap:.85rem; }

/* ============================== 4 · EL PASE ============================== */

.pase{ position:relative; height:100%; display:flex; align-items:center;
       padding:clamp(3rem,6vh,4.5rem) clamp(1.25rem,5vw,3.5rem) clamp(1.5rem,4vh,2.5rem); }
@media (min-width:1180px){ .pase{ padding-left:var(--cs-borde); } }
.pase__in{ max-width:var(--cs-maxw); width:100%; margin:0 auto; display:grid; gap:clamp(1.1rem,2.2vw,1.8rem); }
@media (min-width:1180px){ .pase__in{ margin-left:0; } }
@media (min-width:960px){ .pase__in{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:start; }
  .pase__cab{ grid-column:1 / -1; } }

/* el papel */
.escrito{ position:relative; padding:clamp(1.15rem,2.2vw,1.7rem) clamp(1.2rem,2.4vw,1.9rem) clamp(1.3rem,2.4vw,1.9rem); overflow:hidden; }
.escrito__cab{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.7rem; margin-bottom:.95rem; border-bottom:1px solid rgba(219,230,239,.09); }
.escrito__cuerpo{
  position:relative; color:var(--sc-ink);
  font-size:clamp(.94rem,.88rem+.3vw,1.05rem); line-height:1.82;
  letter-spacing:.002em; text-align:left;
}
.escrito__pie{ margin-top:1.2rem; padding-top:.85rem; border-top:1px solid rgba(219,230,239,.07); }

/* la cabeza de revisión: un hilo que baja por el papel bajo la mano del lector */
.cabeza{
  position:absolute; left:-2.9rem; right:0; top:0; height:96px; pointer-events:none;
  transform:translate3d(0,-120px,0); will-change:transform; z-index:2;
  background:linear-gradient(180deg,transparent 0%,rgb(var(--cs-accent-rgb) / .055) 62%,rgb(var(--cs-accent-rgb) / .11) 96%,transparent 100%);
}
.cabeza::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--sc-accent) 8%,var(--sc-accent) 92%,transparent);
  opacity:.85;
}

/* los tramos marcados dentro del párrafo real */
.tramo{
  color:inherit; background-color:transparent; background-repeat:no-repeat;
  background-position:0 100%; background-size:0% 2px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding-bottom:.24em;
  transition:background-size 320ms var(--sc-ease-out), color 320ms var(--sc-ease-out);
}
.tramo[data-sev="grave"]{ background-image:linear-gradient(var(--cs-grave),var(--cs-grave)); }
.tramo[data-sev="medio"]{ background-image:linear-gradient(var(--cs-medio),var(--cs-medio)); }
.tramo[data-sev="leve"] { background-image:linear-gradient(var(--cs-leve),var(--cs-leve)); }
.tramo[data-sev="limite"]{
  background-image:repeating-linear-gradient(90deg,var(--sc-accent) 0 3px,transparent 3px 6px);
  background-size:0% 2px;
}
.tramo.is-marcado{ background-size:100% 2px; }
.tramo.is-marcado[data-sev="grave"]{ color:#ffe4dd; }
.tramo.is-marcado[data-sev="limite"]{ color:var(--cs-accent-hi); }
/* El margen del papel: la corrección va donde va en un documento marcado a mano,
   en la banda de la izquierda, a la altura del renglón. */
.escrito__hoja{ position:relative; padding-left:2.9rem; }
.escrito__hoja::before{
  content:""; position:absolute; left:1.95rem; top:-.2rem; bottom:-.2rem; width:1px;
  background:linear-gradient(180deg,transparent,rgba(219,230,239,.13) 14%,rgba(219,230,239,.13) 86%,transparent);
}
.escrito__nums{ position:absolute; left:0; top:0; width:1.65rem; }
.tramo__n{
  position:absolute; left:0; width:100%; text-align:right;
  font-family:var(--sc-font-mono); font-size:.62rem; letter-spacing:.06em;
  color:var(--cs-dim3); line-height:1;
  opacity:0; transform:translateX(4px);
  transition:opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out);
}
.tramo__n.is-marcado{ opacity:1; transform:none; }
.tramo__n.is-marcado[data-sev="grave"]{ color:var(--cs-grave); }
.tramo__n.is-marcado[data-sev="medio"]{ color:var(--cs-medio); }
.tramo__n.is-marcado[data-sev="leve"]{ color:var(--cs-leve); }
.tramo__n.is-marcado[data-sev="limite"]{ color:var(--sc-accent); }

/* el margen: el acta que se va sellando */
.margen{ padding:clamp(1.15rem,2.4vw,1.6rem) clamp(1.15rem,2.4vw,1.6rem) clamp(1.3rem,2.6vw,1.8rem); }
.margen__cab{ display:flex; align-items:center; justify-content:space-between; padding-bottom:.85rem; border-bottom:1px solid var(--cs-line); margin-bottom:.35rem; }
.margen__c{ font-family:var(--sc-font-mono); font-size:.62rem; letter-spacing:.2em; color:var(--sc-accent); }
.margen__l{ list-style:none; margin:0; padding:0; }
.margen__l li{
  display:grid; grid-template-columns:1.6rem 1fr; gap:.7rem;
  padding:.66rem 0; border-bottom:1px solid rgba(219,230,239,.07);
  opacity:.2; transform:translateY(6px);
  transition:opacity 380ms var(--sc-ease-out), transform 380ms var(--sc-ease-out);
}
.margen__l li.is-sellado{ opacity:1; transform:none; }
.margen__n{ font-family:var(--sc-font-mono); font-size:.72rem; color:var(--cs-dim3); padding-top:.18rem; }
.margen__l li.is-sellado .margen__n{ color:var(--cs-dim); }
.margen__t{ font-size:.88rem; line-height:1.46; color:var(--sc-ink); margin-bottom:.42rem; }
.margen__meta{ display:flex; flex-wrap:wrap; gap:.3rem 1rem; }
.margen__meta span{ font-family:var(--sc-font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cs-dim3); }
.margen__meta b{ color:var(--cs-dim2); font-weight:400; }

/* severidad: forma primero (■ ◧ □), color como refuerzo */
.sev{ display:inline-flex; align-items:center; gap:.42rem; font-family:var(--sc-font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; }
.sev::before{ content:""; width:.5rem; height:.5rem; border:1px solid currentColor; }
.sev--grave{ color:var(--cs-grave); }
.sev--grave::before{ background:currentColor; }
.sev--medio{ color:var(--cs-medio); }
.sev--medio::before{ background:linear-gradient(90deg,currentColor 50%,transparent 50%); }
.sev--leve{ color:var(--cs-leve); }
.sev--limite{ color:var(--sc-accent); }
.sev--limite::before{ border-style:dotted; background:none; }

.margen__l li.limite{ border-top:1px dotted var(--sc-accent); margin-top:.5rem; padding-top:1rem; border-bottom:none; }
.margen__l li.limite .margen__t{ color:var(--cs-accent-hi); }
.margen__pie{ margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--cs-line); }
.margen__pie p{ font-size:.82rem; color:var(--cs-dim2); line-height:1.5; }

/* ---------------------- EL PASE EN EL TELÉFONO -------------------------
   En 390px el acta de cuatro entradas no cabe debajo del papel. La dirección
   para teléfono no la encoge: muestra UNA entrada, la que se acaba de sellar,
   deslizándose bajo el párrafo. El pico sigue siendo el pico y cabe entero. */
@media (max-width:959px), ((max-height:820px) and (hover:none)){
  .pase{ align-items:center; padding:2.6rem 1.1rem 1.2rem; }
  .pase__in{ grid-template-columns:1fr; gap:.9rem; }
  .escrito__hoja{ padding-left:2.2rem; }
  .escrito__hoja::before{ left:1.5rem; }
  .escrito__nums{ width:1.15rem; }
  .escrito__cuerpo{ font-size:.86rem; line-height:1.68; }
  .escrito__pie{ display:none; }
  .escrito{ padding:.9rem 1rem 1rem; }
  .escrito__cab{ padding-bottom:.55rem; margin-bottom:.75rem; }

  .margen{ padding:.85rem 1rem 1rem; }
  .margen__cab{ padding-bottom:.6rem; margin-bottom:0; }
  .margen__l{ position:relative; min-height:10.9rem; }
  .margen__l li{
    position:absolute; left:0; right:0; top:0;
    padding:.7rem 0 0; border-bottom:none; border-top:none;
    opacity:0; transform:translateY(8px);
  }
  .margen__l li.limite{ margin-top:0; padding-top:.7rem; border-top:1px dotted var(--sc-accent); }
  /* `.is-sellado` es MÁS específico que `.margen__l li`, así que sin este
     :not() las entradas selladas se pintan todas encima. */
  .margen__l li.is-sellado:not(.is-actual){ opacity:0; transform:translateY(8px); }
  .margen__l li.is-actual{ opacity:1; transform:none; }
  .margen__pie{ margin-top:.3rem; padding-top:.6rem; }
  .margen__pie p:last-child{ display:none; }
}
/* Laptop corta (ancho de escritorio, alto ≤820): el arte compacto de arriba
   aplica por altura, pero el folio del margen sigue visible desde 1180px de
   ancho. Sin este offset el pase queda a sangre bajo el folio y los dos textos
   se pintan encima (cazado por Rodrigo en 1440×722, 2026-09-05). */
@media (min-width:1180px) and (max-height:820px) and (hover:none){
  .pase{ padding-left:var(--cs-borde); padding-right:3vw; }
}
@media (max-width:959px), ((max-height:820px) and (hover:none)){
  /* Sin recorrido no hay "la que se acaba de sellar": vuelven todas, en lista. */
  html[data-motion="reducido"] .margen__l{ min-height:0; }
  html[data-motion="reducido"] .margen__l li{ position:static; opacity:1; transform:none; border-bottom:1px solid rgba(219,230,239,.07); }
}

/* ============================ 5 · LOS LÍMITES ============================ */

.lim{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; }
.lim__cab{ padding:0 clamp(1.25rem,5vw,3.5rem); max-width:var(--cs-maxw); }
@media (min-width:1180px){ .lim__cab{ padding-left:var(--cs-borde); } }
/* §A7 · el rail acepta gesto lateral (trackpad y arrastre): la mano lo anuncia.
   En táctil manda el scroll nativo del dedo, así que no se pone `grab` ahí. */
.rail{ display:flex; align-items:stretch; margin-top:clamp(1.2rem,2.6vw,2rem); gap:clamp(1rem,2vw,1.6rem); padding:0 clamp(1.25rem,5vw,3.5rem); will-change:transform; }
@media (hover:hover) and (pointer:fine){ .rail{ cursor:grab; } }
@media (min-width:1180px){ .rail{ padding-left:var(--cs-borde); } }
.rail__lead{ flex:0 0 clamp(15rem,22vw,34rem); display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:1.2rem; }
.rail__lead p{ color:var(--cs-dim); font-size:.9rem; line-height:1.55; margin-top:.7rem; max-width:40ch; }
.ficha-lim{
  flex:0 0 clamp(15.5rem,20vw,30rem); padding:1.05rem 1.2rem 1.25rem;
  display:flex; flex-direction:column; gap:.6rem;
  border-top:1px solid var(--sc-accent); background:rgba(5,14,20,.46);
}
.ficha-lim__k{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.ficha-lim h3{ font-family:var(--sc-font-display); font-weight:500; font-size:1.06rem; line-height:1.2; letter-spacing:-.02em; margin:0; color:var(--sc-ink); }
.ficha-lim p{ font-size:.86rem; line-height:1.54; color:var(--cs-dim); }
.ficha-lim__norma{ margin-top:auto; padding-top:.75rem; border-top:1px solid rgba(219,230,239,.08); }
.rail__note{ flex:0 0 clamp(13rem,18vw,26rem); display:flex; align-items:flex-end; padding-bottom:1.2rem; }
.rail__note p{ font-size:.9rem; color:var(--cs-dim2); line-height:1.58; max-width:36ch; }

/* ============================ 6 · LA ESCALERA ============================ */

.esc{ display:flex; flex-direction:column; }
.peldano{ padding:clamp(.95rem,1.8vw,1.4rem) 0; border-top:1px solid var(--cs-line); }
.peldano__in{ display:grid; gap:1rem clamp(1.5rem,3vw,3rem); align-items:start; }
@media (min-width:860px){ .peldano__in{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto; } }
.peldano__k{ display:flex; flex-direction:column; gap:.55rem; }
.peldano h3{ font-family:var(--sc-font-display); font-weight:500; font-size:clamp(1.2rem,1rem+.7vw,1.6rem); letter-spacing:-.026em; line-height:1.14; margin:0; }
.peldano p{ font-size:.9rem; color:var(--cs-dim); line-height:1.55; }
/* R2-Lote4 · oferta Axis */
.peldano__garantia{ margin-top:.6rem; }
.peldano__garantia b{ color:var(--sc-accent); font-weight:600; }
.peldano__deduccion{ margin-top:.2rem; }
.peldano--programa h3{ color:var(--sc-ink); }
.costos{ margin-top:clamp(2rem,4vw,3.2rem); }
.costos__intro{ max-width:56ch; margin:.5rem 0 1.1rem; color:var(--cs-dim); font-size:.95rem; line-height:1.55; }
.costos__scroll{ overflow-x:auto; }
.costos__t{ width:100%; border-collapse:collapse; font-size:.85rem; }
.costos__t th{ text-align:left; font-family:var(--sc-font-mono); font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--cs-dim3); font-weight:400; padding:.45rem .8rem .45rem 0; border-bottom:1px solid var(--cs-line); }
.costos__t td{ color:var(--cs-dim); line-height:1.5; padding:.55rem .8rem .55rem 0; border-bottom:1px solid rgba(219,230,239,.06); vertical-align:top; }
.costos__t td:first-child{ color:var(--sc-ink); }
.costos__t tfoot td{ border-bottom:none; border-top:1px solid var(--cs-line2); padding-top:.7rem; }
.costos__t tfoot td:first-child b, .costos__t tfoot .cs-num b{ color:var(--sc-ink); font-weight:500; }
.costos__escala{ max-width:56ch; margin:.9rem 0 0; color:var(--cs-dim); font-size:.95rem; line-height:1.55; }
.costos__fuente{ margin-top:.7rem; color:var(--cs-dim3); }
.fomo{ margin-top:clamp(1.8rem,3.4vw,2.8rem); border-left:2px solid var(--sc-accent); padding-left:clamp(1rem,2vw,1.6rem); }
.fomo p{ max-width:56ch; color:var(--cs-dim); font-size:1rem; line-height:1.6; }
.fomo b{ color:var(--sc-ink); }
.cierre__btnwrap{ margin-top:1.4rem; }
.btn-pago{
  display:inline-block; padding:.85rem 1.6rem; background:var(--sc-accent); color:#10151c;
  font-weight:600; font-size:1rem; letter-spacing:-.01em; text-decoration:none;
  border:1px solid var(--sc-accent);
}
.btn-pago:hover{ background:transparent; color:var(--sc-accent); }
.cierre__garantia{ margin-top:.8rem; font-size:.95rem; color:var(--cs-dim); }
.cierre__garantia b{ color:var(--sc-accent); font-weight:600; }
.cierre__nota{ margin-top:.55rem; color:var(--cs-dim3); }
.peldano__precio{ font-family:var(--sc-font-mono); font-size:clamp(.95rem,.88rem+.3vw,1.12rem); color:var(--sc-ink); letter-spacing:.02em; white-space:nowrap; }
.peldano__precio small{ display:block; margin-top:.35rem; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cs-dim3); white-space:normal; }
.peldano--entrada{ border-top:1px solid var(--sc-accent); }
.peldano--entrada .peldano__precio{ color:var(--sc-accent); }
.peldano--congelado p{ color:var(--cs-dim2); }

/* ============================== 7 · COLOFÓN ============================== */

.colofon{ padding-block:clamp(2.4rem,4.4vw,4rem) clamp(1.8rem,3.2vw,2.6rem); }
.colofon__grid{ display:grid; gap:clamp(1.7rem,3.2vw,2.8rem); }
@media (min-width:900px){ .colofon__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.tramite{ list-style:none; margin:0; padding:0; counter-reset:paso; }
.tramite li{ display:grid; grid-template-columns:1.9rem 1fr; gap:.8rem; padding:.48rem 0; border-bottom:1px solid rgba(219,230,239,.06); }
.tramite li::before{
  counter-increment:paso; content:counter(paso,decimal-leading-zero);
  font-family:var(--sc-font-mono); font-size:.66rem; color:var(--cs-dim3); padding-top:.2rem;
}
.tramite p{ font-size:.9rem; color:var(--cs-dim); line-height:1.5; }
.tramite b{ color:var(--sc-ink); font-weight:500; }

.recibe{ display:grid; gap:1.1rem; }
.recibe__b{ padding:.9rem 1.15rem 1.05rem; }
.recibe__b--si{ border-left:1px solid var(--sc-accent); background:rgb(var(--cs-accent-rgb) / .05); }
.recibe__b--no{ border-left:1px solid var(--cs-line2); background:rgba(5,14,20,.42); }
.recibe__b ul{ margin:.7rem 0 0; padding:0; list-style:none; display:grid; gap:.5rem; }
.recibe__b li{ font-size:.88rem; color:var(--cs-dim); line-height:1.5; padding-left:1rem; position:relative; }
.recibe__b li::before{ content:""; position:absolute; left:0; top:.62em; width:.42rem; height:1px; background:var(--cs-dim3); }
.recibe__b--si li::before{ background:var(--sc-accent); }

/* El CTA es una línea de texto corrido. No hay isla de botón en esta página. */
.cierre{ margin-top:clamp(2rem,4vw,3.2rem); padding-top:clamp(1.5rem,3vw,2.2rem); border-top:1px solid var(--cs-line2); }
.cierre p{ font-size:clamp(1.05rem,.98rem+.45vw,1.34rem); line-height:1.6; color:var(--sc-ink); max-width:54ch; }
.cta{
  color:var(--sc-accent); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:.28em;
  text-decoration-color:rgb(var(--cs-accent-rgb) / .45);
  transition:text-decoration-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover,.cta:focus-visible{ text-decoration-color:var(--sc-accent); color:var(--cs-accent-hover); }
.cierre__pie{ margin-top:1.4rem; }

.masthead{
  margin-top:clamp(2.2rem,4.5vw,3.6rem); padding-top:1.2rem; border-top:1px solid var(--cs-line);
  display:flex; flex-wrap:wrap; gap:.7rem 2rem; align-items:baseline;
}
.masthead__wm{ font-family:var(--sc-font-mono); font-size:.72rem; letter-spacing:.4em; text-transform:uppercase; color:var(--sc-ink); }
.masthead p{ font-family:var(--sc-font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cs-dim3); }
.masthead p.masthead__lema{ flex-basis:100%; max-width:64ch; font-family:var(--sc-font-text); font-size:.86rem;
  letter-spacing:0; text-transform:none; color:var(--cs-dim); line-height:1.55; }
.masthead__lema b{ color:var(--sc-ink); font-weight:500; }
.masthead__nota{ flex-basis:100%; max-width:64ch; }
.masthead__nota p{ font-family:var(--sc-font-text); font-size:.82rem; letter-spacing:0; text-transform:none; color:var(--cs-dim3); line-height:1.6; }
.masthead__motion{ flex-basis:100%; margin-top:.1rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5ch;
  font-family:var(--sc-font-text); font-size:.8rem; color:var(--cs-dim3); }
.masthead__motion .cs-rot{ font-size:.72rem; }
.motion-btn{ font:inherit; color:var(--cs-accent-hi); background:none; border:0; padding:0; cursor:pointer;
  border-bottom:1px solid rgb(var(--cs-accent-rgb) / .45); transition:color .15s ease, border-color .15s ease; }
.motion-btn:hover,.motion-btn:focus-visible{ color:var(--cs-accent-hover); border-color:rgb(var(--cs-accent-rgb) / .8); outline:none; }
.motion-btn b{ font-weight:600; }
.masthead__fundador{ display:flex; align-items:center; gap:.7rem; }
.masthead__fundador img{ width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:1px solid rgb(var(--cs-accent-rgb) / .55); display:block; }
.masthead__fundador p b{ color:var(--sc-ink); font-weight:600; letter-spacing:.16em; }

/* ========================= superficies del navegador ===================== */

::selection{ background:rgb(var(--cs-accent-rgb) / .26); color:var(--cs-accent-sel-ink); }
:focus-visible{ outline:2px solid var(--sc-accent); outline-offset:3px; border-radius:2px; }
a{ color:var(--sc-ink); }
html{ scrollbar-color:var(--cs-line2) #071219; caret-color:var(--sc-accent); }

/* ============================== ENTRADAS ================================= */

[data-sc-in] > *{ opacity:0; transform:translateY(14px); }
.sc-ready [data-sc-in] > *{ transition:opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out); }

  html[data-motion="reducido"] .cabeza{ display:none; }
  html[data-motion="reducido"] .tramo{ background-size:100% 2px; }
  html[data-motion="reducido"] .tramo__n{ opacity:1; transform:none; }
  html[data-motion="reducido"] .margen__l li{ opacity:1; transform:none; }
  html[data-motion="reducido"] .maq__div{ left:50%; }
  html[data-motion="reducido"] [data-sc-in] > *{ opacity:1; transform:none; }
  html[data-motion="reducido"]{ scroll-behavior:auto; }


/* Dentro de un escenario pinneado la intertitular baja un peldaño: el acto entero
   tiene que caber en una pantalla y la portada de capítulo no puede comerse un tercio. */
.maq .cs-inter,.lim__cab{ margin-bottom:clamp(.8rem,1.6vw,1.2rem); }
.maq .cs-h2,.lim__cab .cs-h2{ font-size:clamp(1.4rem,1rem+1.25vw,2.05rem); }
.pase .cs-h2{ font-size:clamp(1.4rem,1rem+1.3vw,2rem); }

.maq .cs-inter__k,.lim__cab .cs-inter__k{ margin-bottom:.6rem; }
.maq__cierre p{ font-size:.9rem; }

@media (max-width:719px){ :root{ --rej-f:18px; --rej-g:90px; } }

.pase__cab{ margin-bottom:0; }
.pase__cab .cs-inter__k{ margin-bottom:.55rem; }
.pase__cab .cs-h2{ font-size:clamp(1.35rem,1rem+1.15vw,1.95rem); max-width:26ch; }
@media (max-width:959px){ .pase__cab .cs-h2{ font-size:1.28rem; } .pase__cab{ margin-bottom:.2rem; } }

/* ============ EL ESCENARIO SE MIDE EN vh, NO EN rem ======================
   Un acto pinneado es exactamente una pantalla de alto. Tipografiarlo en rem
   hace que en un portátil de 1280x800 el contenido crezca hasta desbordar por
   arriba (medido: 1033px de contenido en 800px de escenario) y el capítulo se
   lee cortado. Adentro del pase y del comparador el cuerpo se dimensiona con
   la altura del viewport, que es el espacio que de verdad hay. */
.pase__cab .cs-h2{ font-size:clamp(1.2rem,.28rem + 1.75vh,1.95rem); }
.escrito{ padding:clamp(.9rem,.2rem + 1.35vh,1.7rem) clamp(1.1rem,2.2vw,1.9rem); }
.escrito__cab{ padding-bottom:clamp(.45rem,.12rem + .65vh,.7rem); margin-bottom:clamp(.6rem,.16rem + .9vh,.95rem); }
.escrito__cuerpo{ font-size:clamp(.84rem,.40rem + 1.05vh,1.05rem); line-height:1.76; }
.escrito__pie{ margin-top:clamp(.7rem,.2rem + 1vh,1.2rem); padding-top:clamp(.5rem,.15rem + .7vh,.85rem); }
.margen{ padding:clamp(.85rem,.2rem + 1.3vh,1.6rem) clamp(1rem,2.2vw,1.6rem); }
.margen__t{ font-size:clamp(.78rem,.38rem + .95vh,.88rem); line-height:1.46; }
.margen__l li{ padding:clamp(.42rem,.1rem + .62vh,.66rem) 0; }
.margen__pie p{ font-size:clamp(.74rem,.36rem + .9vh,.82rem); }
.margen__pie{ margin-top:clamp(.45rem,.12rem + .65vh,.75rem); padding-top:clamp(.45rem,.12rem + .65vh,.75rem); }
/* Laptop corta con puntero fino (2026-09-10): el arte de escritorio del pase
   entra completo, pero al ras — este respiro evita que la última línea del
   acta (la escala de severidad) pierda los descendentes bajo el pliegue. */
@media (min-width:960px) and (max-height:820px) and (hover:hover){
  .pase{ padding-top:.5rem; padding-bottom:.5rem; }
}
.maq__eje p{ font-size:clamp(.79rem,.38rem + .95vh,.85rem); }
.maq__eje > div{ padding:clamp(.42rem,.1rem + .6vh,.62rem) clamp(1rem,2.4vw,2.2rem) clamp(.46rem,.12rem + .66vh,.7rem) 0; }
.maq__cierre p{ font-size:clamp(.83rem,.4rem + 1vh,.9rem); }
.ficha-lim p{ font-size:clamp(.79rem,.38rem + .95vh,.86rem); max-width:40ch; }
.ficha-lim h3{ font-size:clamp(.96rem,.42rem + 1.15vh,1.06rem); }


/* ═════════════════════ §A4 · LA ANIMACIÓN DE CARGA ═════════════════════════
   Los cuatro pasos de la carátula entran en orden y el número de fondo cuenta
   con ellos. Solo transform y opacity. El fotograma final es EXACTAMENTE la
   carátula de siempre: cuando termina, se retira el atributo y no queda ni una
   regla de esta sección aplicando.

   Nada de la carátula depende de esta animación para existir: si no corre
   (reduced-motion, visita repetida, o el failsafe), la carátula se pinta
   completa desde el primer frame.
   ------------------------------------------------------------------------- */
:root[data-carga="on"] .caratula__marca,
:root[data-carga="on"] .caratula__lema,
:root[data-carga="on"] .caratula__sum,
:root[data-carga="on"] .cs-h1,
:root[data-carga="on"] .caratula__cuerpo,
:root[data-carga="on"] .caratula__pie{
  opacity:0; transform:translateY(10px);
}
:root[data-carga="on"] .pl-mid,
:root[data-carga="on"] .pl-front{ opacity:0; }

/* cada paso se enciende cuando el contador lo alcanza */
:root[data-carga="on"][data-paso="1"] .caratula__marca,
:root[data-carga="on"][data-paso="1"] .caratula__sum,
:root[data-carga="on"][data-paso="1"] .caratula__lema,
:root[data-carga="on"][data-paso="2"] .caratula__marca,
:root[data-carga="on"][data-paso="2"] .caratula__sum,
:root[data-carga="on"][data-paso="2"] .caratula__lema,
:root[data-carga="on"][data-paso="2"] .cs-h1,
:root[data-carga="on"][data-paso="3"] .caratula__marca,
:root[data-carga="on"][data-paso="3"] .caratula__sum,
:root[data-carga="on"][data-paso="3"] .caratula__lema,
:root[data-carga="on"][data-paso="3"] .cs-h1,
:root[data-carga="on"][data-paso="3"] .caratula__cuerpo,
:root[data-carga="on"][data-paso="4"] .caratula__marca,
:root[data-carga="on"][data-paso="4"] .caratula__sum,
:root[data-carga="on"][data-paso="4"] .caratula__lema,
:root[data-carga="on"][data-paso="4"] .cs-h1,
:root[data-carga="on"][data-paso="4"] .caratula__cuerpo,
:root[data-carga="on"][data-paso="4"] .caratula__pie{
  opacity:1; transform:none;
  transition:opacity .42s var(--sc-ease-out), transform .42s var(--sc-ease-out);
}
:root[data-carga="on"][data-paso="4"] .pl-mid,
:root[data-carga="on"][data-paso="4"] .pl-front{ opacity:1; transition:opacity .5s var(--sc-ease-out); }

/* el número de fondo mientras cuenta: el mismo peso, sin salto de caja */
:root[data-carga="on"] .pl-back{ font-variant-numeric:tabular-nums; }

/* ── FOLIO DE DOS NIVELES ────────────────────────────────────────────────────
   El cuaderno es el primer nivel y la foja el segundo. En el canto no cabe
   escribir los dos, así que el nivel de cuaderno se expresa como AGRUPACIÓN:
   un respiro antes de la primera muesca de cada cuaderno. Los dos nombres
   aparecen juntos al hover o al foco, que es donde sí hay sitio. */
:root[data-folio^="canto"] .folio__list li[data-abre]{ margin-top:.85rem; }
:root[data-folio^="canto"] .folio__list li[data-abre] a::before{ width:1.5rem; }
:root[data-folio^="canto"] .folio__list a > span b{
  display:block; font-weight:400; color:var(--sc-accent); margin-bottom:.15rem;
}
/* en la forma «indice» los dos niveles se escriben, con el cuaderno como
   encabezado tenue solo en la primera foja de cada grupo */
:root[data-folio="indice"] .folio__list a > span b{ display:none; }
:root[data-folio="indice"] .folio__list li[data-abre]{ margin-top:.8rem; }

/* ── EL RESPIRO ENTRE CUADERNOS ──────────────────────────────────────────────
   Sección de flujo, corta y quieta, entre dos actos pinneados. Existe por la
   regla de la curva de energía (nunca dos pines encadenados) y hace legible el
   cambio de cuaderno. Tipografía baja a propósito: es un respiro, no un acto. */
.puente{ min-height:0; padding-block:clamp(3.5rem,9vh,7rem); }
.puente__t{
  margin-top:.9rem; max-width:34ch;
  font-family:var(--sc-font-display); font-size:clamp(1.05rem,1.7vw,1.4rem);
  line-height:1.4; color:var(--cs-dim);
}


/* ── LA SEÑAL DE BAJADA ──────────────────────────────────────────────────────
   Ver el comentario del markup: existe porque la carátula en reposo medía
   0.00% de cambio por frame. Es un trazo que desciende y se desvanece; se
   apaga al primer scroll y no vuelve. */
.baje{ display:flex; align-items:center; gap:.7rem; margin-top:clamp(1.6rem,3vw,2.4rem); }
.baje__l{ position:relative; display:block; width:2px; height:3.2rem; background:var(--cs-line2); overflow:hidden; }
.baje__l i{
  position:absolute; left:0; top:0; width:2px; height:1.5rem; background:var(--sc-accent);
  animation:baja 2.4s var(--sc-ease-in-out) infinite;
}
.baje .cs-rot{ color:var(--cs-dim3); }
@keyframes baja{
  0%   { transform:translateY(-100%); opacity:0; }
  22%  { opacity:1; }
  70%  { opacity:1; }
  100% { transform:translateY(220%); opacity:0; }
}

/* ── CUE DE PIN (pedido Rodrigo 2026-09-10): la misma señal de bajada de la
   carátula, dentro de cada escena congelada — «siga scrolleando: la animación
   avanza con usted». La inyecta casilla.js en cada stage pin/pan; se desvanece
   con el progreso del acto (--sc-p la publica el motor en el propio acto). */
.pin-cue{
  position:absolute; left:50%; transform:translateX(-50%); bottom:1.05rem; z-index:6;
  opacity:calc(1.15 - var(--sc-p, 0) * 1.5); pointer-events:none;
}
.pin-cue__l{ position:relative; display:block; width:2px; height:2.6rem; background:var(--cs-line2); overflow:hidden; }
.pin-cue__l i{
  position:absolute; left:0; top:0; width:2px; height:1.2rem; background:var(--sc-accent);
  animation:baja 2.4s var(--sc-ease-in-out) infinite;
}
html[data-motion="reducido"] .pin-cue{ display:none; }

/* al primer scroll se retira y no vuelve */
:root[data-bajo="si"] .baje{ opacity:0; pointer-events:none; transition:opacity .4s var(--sc-ease-out); }
/* sin movimiento: el trazo se queda quieto y visible — la señal sigue diciendo
   «hay más abajo», que es la información; solo se va el bucle. */
  html[data-motion="reducido"] .baje__l i{ animation:none; top:auto; bottom:0; opacity:.9; }
  :root[data-motion="reducido"][data-bajo="si"] .baje{ transition:none; }



/* ── LA CARÁTULA RESPONDE AL PUNTERO ─────────────────────────────────────────
   Medido: tras la carga, la carátula quedaba en 0.00% de cambio por frame, y
   la señal de bajada (1px) solo movía ~13 px de 1.296.000 — nada. La respuesta
   correcta no es un bucle ambiental más grande sino que la página REACCIONE:
   los planos de la carátula se desplazan con el puntero, con amplitud distinta
   por plano (eso es lo que produce la profundidad).

   Sigue dentro de la doctrina: no se anima solo, lo mueve el input del lector,
   igual que el scroll, y es reversible. NO se toca `transform` de los planos
   (eso lo escribe el engine con data-sc-parallax): se mueve el CONTENIDO de
   cada plano, que el engine no toca.

   Se apaga bajo reduced-motion y en punteros gruesos (táctil), donde además el
   scroll llega de inmediato. */
.acta-vacia, .cota{
  transform:translate3d(calc(var(--mx,0) * var(--amp,10px)), calc(var(--my,0) * calc(var(--amp,10px) * .68)), 0);
  transition:transform .45s var(--sc-ease-out);
  will-change:transform;
}
.pl-mid .acta-vacia{ --amp:11px; }
.pl-front .cota{ --amp:19px; }
  html[data-motion="reducido"] .acta-vacia, html[data-motion="reducido"] .cota{ transform:none; transition:none; will-change:auto; }

@media (hover:none), (pointer:coarse){
  .acta-vacia, .cota{ transform:none; will-change:auto; }
}


/* R2-Lote5 · RV-037: cue de scroll al cierre del pase. Excepción deliberada de
   animación en loop (como la carga inicial): es la señal de «siga bajando». */
.pase__cue{
  position:absolute; left:50%; bottom:2.2vh; transform:translateX(-50%);
  opacity:0; transition:opacity 500ms var(--sc-ease-out); pointer-events:none;
}
.pase__cue i{
  display:block; width:14px; height:14px;
  border-right:2px solid var(--sc-accent); border-bottom:2px solid var(--sc-accent);
  transform:rotate(45deg); animation:pase-cue 1.7s ease-in-out infinite;
}
@keyframes pase-cue{ 0%,100%{ translate:0 0; opacity:.55 } 50%{ translate:0 7px; opacity:1 } }
 html[data-motion="reducido"] .pase__cue i{ animation:none; }