/* ============================================================================
   casilla-escenas.css — markup de las escenas del runtime casilla-escenas.js.
   Consume los tokens de casilla.css (acento SIEMPRE vía var(--sc-accent) /
   var(--cs-accent-rgb): agnóstico teal/dorado). Tipografía interna de
   escenarios en vh, doctrina del build. Ningún estilo de este archivo anima
   por CSS: todo movimiento lo escribe el runtime desde --sc-p.
   ========================================================================= */

/* ---------------- taxímetro (porte de cuenta-cero, modo sube) ------------ */
.esc-taxi{
  height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2.4vh; text-align:center;
}
.esc-taxi__rot{ opacity:0; }
.esc-taxi__dig{
  font-family:var(--sc-font-display); font-weight:600;
  font-variant-numeric:tabular-nums; line-height:.9;
  font-size:min(36vh, 40vw); color:var(--sc-ink);
}
.esc-taxi__dig.is-tope{
  color:var(--sc-accent);
  text-shadow:0 0 7vh rgb(var(--cs-accent-rgb) / .35);
}
.esc-taxi__tacha{
  width:min(30rem, 64vw); height:3px; border-radius:2px;
  background:var(--sc-accent);
  box-shadow:0 0 18px rgb(var(--cs-accent-rgb) / .55);
  transform:scaleX(0); transform-origin:0 50%;
}
.esc-taxi__pie{ opacity:0; }

/* ---------------- hallazgos numerados (porte de la pila) ----------------- */
.esc-hz{
  height:100%; display:flex; flex-direction:column;
  justify-content:center; gap:1.6vh;
  width:min(46rem, 88vw); margin:0 auto;
}
.esc-hz__rot{ text-align:center; opacity:0; margin-bottom:1vh; }
.hz{
  position:relative; border-radius:6px;
  padding:1.05rem 1.25rem 1.05rem 1.45rem;
  background:rgba(7,18,26,.55);
  border:1px solid var(--cs-line);
  border-left:3px solid var(--hz-sev, var(--cs-leve));
  opacity:0; will-change:transform;
}
.hz--grave{ --hz-sev:var(--cs-grave); }
.hz--medio{ --hz-sev:var(--cs-medio); }
.hz--leve { --hz-sev:var(--cs-leve); }
.hz__k{ display:flex; align-items:baseline; gap:.85rem; }
.hz__n{
  font-family:var(--sc-font-mono); font-size:.72rem;
  color:var(--cs-dim2); font-variant-numeric:tabular-nums;
}
.hz__sev{
  font-family:var(--sc-font-mono); font-size:.62rem;
  letter-spacing:.2em; color:var(--hz-sev, var(--cs-leve));
}
.hz__t{ margin:.4rem 0 .25rem; color:var(--sc-ink); font-size:.95rem; }
.hz__f{
  font-family:var(--sc-font-mono); font-size:.66rem;
  letter-spacing:.06em; color:var(--cs-dim3);
}

/* ================= comparador «las dos máquinas» (F2) ==================== */
/* Layout heredado del stage v1 (.maq): mismo padding folio-aware, mismo max.
   Los elementos nacen en su estado INICIAL (ocultos/clipeados); la escena
   'maquinas' de casilla-escenas.js los revela como función de --sc-p. */
.maq2{
  position:relative; height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.6rem,5.5vh,4rem) clamp(1.25rem,5vw,3.5rem) clamp(1.2rem,3vh,2rem);
}
/* borde de texto compartido con el resto de la página (§A3): el comparador
   había heredado el patrón defectuoso —margen del folio en lugar de margen del
   folio MÁS sangría— y por eso arrancaba 56px a la izquierda de las demás. */
@media (min-width:1180px){ .maq2{ padding-left:var(--cs-borde); } }
.maq2__in{ max-width:var(--cs-maxw); width:100%; margin:0 auto; }
@media (min-width:1180px){ .maq2__in{ margin-left:0; } }
.maq2__cab{ margin-bottom:1.6vh; }

.maq2__encargo{
  border-radius:8px; padding:.8rem 1.1rem; margin-bottom:1.8vh;
  max-width:34rem; opacity:0;
}
.maq2__enc-k{ display:flex; gap:1rem; margin-bottom:.35rem; }
.maq2__enc-t{ color:var(--sc-ink); font-size:.92rem; }

.maq2__carriles{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  gap:0; align-items:start;
}
.maq2__carril{ padding-right:clamp(1rem,2.4vw,2.2rem); min-height:38vh; }
.maq2__carril--sys{ padding-right:0; padding-left:clamp(1rem,2.4vw,2.2rem); }
/* el divisor del v1, heredado: deriva con --sc-p y su hilo de acento crece */
.maq2__div{
  position:absolute; top:0; bottom:0; width:1px; background:var(--cs-line2);
  left:calc(50% - var(--sc-p,0) * 3.2%);
}
.maq2__div::before{
  content:""; position:absolute; left:-2px; top:0; width:5px;
  height:calc(var(--sc-p,0) * 100%); background:var(--sc-accent); opacity:.5;
}
.maq2__rot{ margin-bottom:1.1vh; opacity:0; }
/* R2-Lote3 · placas de lado (RV-015): identidad inconfundible de cada carril */
.maq2__marco{ max-width:56ch; margin:.5rem 0 0; color:var(--cs-dim); font-size:.95rem; line-height:1.55; }
.maq2__placa{ margin-bottom:1.2vh; opacity:0; }
.maq2__placa b{
  display:block; font-weight:600; color:var(--sc-ink);
  font-size:clamp(1.05rem,.9rem+.6vw,1.35rem); letter-spacing:-.015em; line-height:1.2;
}
.maq2__placa span{
  display:block; margin-top:.3rem; color:var(--cs-dim); font-size:.86rem; line-height:1.4;
}
.maq2__placa--sys b{ color:var(--sc-accent); text-transform:uppercase; letter-spacing:.04em; }
.maq2__c3{ margin:0 0 1.2vh; max-width:44ch; color:var(--cs-dim); font-size:.86rem; line-height:1.5; opacity:0; }
/* R2-Lote3 · sellos de error del carril A: el error se NOTA */
.m2sello{
  display:inline-block; margin:.5rem 0 0; padding:.22rem .55rem;
  border:1px solid var(--cs-grave); color:var(--cs-grave);
  font-family:var(--sc-font-mono); font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
  transform:rotate(-1.6deg); transform-origin:left center; opacity:0;
}
.maq2__copia{
  border:1px solid var(--cs-line); border-radius:6px; padding:.45rem .7rem;
  margin-bottom:1.4vh; background:rgba(7,18,26,.4); opacity:0;
}
.m2doc{
  border-left:2px solid var(--cs-line2); padding:.2rem 0 .2rem 1rem;
  display:flex; flex-direction:column; gap:.55rem; opacity:0;
}
.m2doc--borr{ border-left-style:dashed; }
.m2line{
  color:var(--sc-ink); font-size:.86rem; line-height:1.55; max-width:26rem;
  clip-path:inset(0 100% 0 0);
}
.m2cita{ position:relative; white-space:nowrap; }
.m2cita::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--cs-medio); transform:scaleX(0); transform-origin:0 50%;
}
.m2cita.is-marcada::after{ transform:scaleX(1); transition:transform 420ms ease; }
.m2fuente{
  font-family:var(--sc-font-mono); font-size:.64rem; letter-spacing:.14em;
  color:var(--cs-dim3); opacity:0;
}
.m2hueco{
  display:inline-block; min-width:6.2rem; text-align:center;
  border:1px dashed var(--cs-dim2); border-radius:3px; padding:0 .3rem;
}
.m2hueco.is-lleno{ border-color:transparent; transition:border-color 380ms ease; }
.m2fantasma{ opacity:0; font-style:italic; color:var(--cs-dim); }
.m2fantasma.is-solido{ font-style:normal; color:var(--sc-ink); }
.maq2__ley{
  margin-top:1.4vh; font-family:var(--sc-font-mono); font-size:.66rem;
  letter-spacing:.14em; color:var(--cs-dim); max-width:24rem; opacity:0;
}
.maq2__mat{ position:relative; display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1vh; }
.m2chip{
  font-family:var(--sc-font-mono); font-size:.62rem; letter-spacing:.12em;
  color:var(--cs-dim); border:1px solid var(--cs-line2); border-radius:4px;
  padding:.28rem .55rem; background:rgba(7,18,26,.4); opacity:0;
  will-change:transform;
}
.m2scan{
  position:absolute; top:0; bottom:0; width:2.6rem; border-radius:4px;
  background:linear-gradient(90deg,transparent,rgb(var(--cs-accent-rgb)/.14),transparent);
  opacity:0; will-change:transform;
}
.m2lee{
  font-family:var(--sc-font-mono); font-size:.62rem; letter-spacing:.14em;
  color:var(--cs-dim3); margin-bottom:1.2vh; opacity:0;
}
.m2estado{
  font-size:.8rem; color:var(--sc-ink); max-width:24rem; margin-top:1vh;
  border-left:2px solid var(--sc-accent); padding:.5rem .9rem;
  background:rgb(var(--cs-accent-rgb)/.05); opacity:0; will-change:transform;
}
.m2estado b{ font-weight:600; color:var(--cs-accent-hi); }
.m2alto{
  height:1px; margin-top:1.4vh; background:var(--sc-accent); opacity:.8;
  transform:scaleX(0); transform-origin:0 50%;
}
.maq2__cierre{
  margin-top:2vh; padding:.7rem 1.1rem; max-width:44rem;
  border-left:1px solid var(--sc-accent); background:rgb(var(--cs-accent-rgb)/.045);
  opacity:0;
}
.maq2__cierre p{ font-size:.9rem; color:var(--sc-ink); }
/* «una gana»: el canto del carril del sistema se enciende al final */
.maq2__carril--sys.is-gana{ box-shadow:inset 3px 0 0 -1px rgb(var(--cs-accent-rgb)/.55); transition:box-shadow 420ms ease; }

/* móvil / superficie corta: columna única, divisor fuera; la escena sirve el
   fotograma final resuelto (guard en la escena: acto flow ⇒ reducido) */
@media (max-width:899px){
  .maq2__carriles{ grid-template-columns:1fr; }
  .maq2__carril{ padding-right:0; min-height:0; }
  .maq2__carril--sys{ padding-left:0; margin-top:1.6rem; border-top:1px solid rgba(219,230,239,.07); padding-top:1.2rem; }
  .maq2__div{ display:none; }
}

/* fotograma final sin cursor ni scroll: red de seguridad en CSS además de la
   rama reducido() del runtime */
  html[data-motion="reducido"] .esc-taxi__rot, html[data-motion="reducido"] .esc-taxi__pie, html[data-motion="reducido"] .esc-hz__rot{ opacity:.9; }
  html[data-motion="reducido"] .hz{ opacity:1; }
  html[data-motion="reducido"] .maq2__encargo, html[data-motion="reducido"] .maq2__rot, html[data-motion="reducido"] .maq2__copia, html[data-motion="reducido"] .m2fuente, html[data-motion="reducido"] .m2lee, html[data-motion="reducido"] .m2estado, html[data-motion="reducido"] .maq2__ley, html[data-motion="reducido"] .maq2__cierre, html[data-motion="reducido"] .m2chip, html[data-motion="reducido"] .m2doc{ opacity:1; }
  html[data-motion="reducido"] .m2line{ clip-path:none; }
  html[data-motion="reducido"] .m2fantasma{ opacity:1; font-style:normal; color:var(--sc-ink); }
  html[data-motion="reducido"] .m2alto{ transform:none; }
  html[data-motion="reducido"] .m2doc--borr{ display:none; }


/* ═══════════════════ EL CUADERNO · componente de dos columnas ═══════════════
   §A2 (Rodrigo): «texto corrido a la IZQUIERDA; la columna DERECHA con las
   animaciones de cada detalle». §A1: «animaciones explícitas por CADA párrafo».

   Resolución adoptada (decidida con Rodrigo 2026-09-07): los párrafos NO tienen
   un pin cada uno —serían 6 pines seguidos, romperían el presupuesto de span y
   le competirían el pico al pase—. Comparten UN escenario pinneado: el escrito
   esquemático de líneas vive a la derecha y RECORRE las estaciones; cada párrafo
   de la izquierda lo mueve a su estado. Así cada párrafo sí tiene movimiento
   propio, con un solo pin por foja.

   Regla de honestidad que gobierna el componente: TODOS los párrafos están
   siempre en el DOM y son legibles. El scroll cambia el ÉNFASIS, nunca la
   presencia — ninguna frase decible del ledger vive solo en el movimiento.
   ------------------------------------------------------------------------- */
.cuaderno{ padding-left:var(--cs-borde); padding-right:clamp(1.25rem,3vw,3.5rem);
  /* centrado vertical en el pin (pedido Rodrigo 2026-09-10): mismo patrón que
     .maq2 y .lim — sin esto el contenido queda apilado arriba con aire muerto
     abajo en pantallas cortas. En flow (móvil) height:100% de un padre auto
     es inerte, así que no cambia el arte apilado. */
  height:100%; display:flex; flex-direction:column; justify-content:center; }
.cuaderno__in{ max-width:var(--cs-maxw); width:100%; margin:0 auto; }
.cuaderno__cols{
  display:grid; gap:clamp(1.6rem,3.4vw,3.4rem);
  grid-template-columns:minmax(0,44ch) minmax(0,1fr);
  align-items:start;
}
/* la columna de texto conserva su medida cómoda; el ancho que sobra se lo
   queda la animación — que es justo para lo que se recuperó el folio */
/* LA VENTANA DE LECTURA. La columna de texto puede ser más alta que el
   escenario pinneado (11 párrafos no caben en 900px). Antes eso tiraba los
   últimos párrafos DEBAJO del pliegue: la animación cambiaba y su texto ya no
   estaba en pantalla. Ahora la columna se desplaza dentro de esta ventana, así
   que el párrafo activo queda siempre a la altura de su animación.
   Los bordes se difuminan para que el texto no aparezca cortado en seco. */
.cuaderno__ventana{
  position:relative; overflow:hidden;
  /* acotada al escenario: sin tope, la ventana crece con el contenido y no hay
     recorrido que desplazar (visible == alto, así que max == 0). */
  max-height:calc(100svh - 14rem);
}
/* RV-009/010: el fundido profundo (5%/92%) dejaba párrafos enteros a media
   tinta y leía como «zona scrolleable» o como error. La máscara ahora solo
   existe cuando la columna de verdad se desliza (clase puesta por medirCol) y
   el fundido es un borde fino, no una niebla. */
.cuaderno__ventana.is-deslizable{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2.5%,#000 97%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 2.5%,#000 97%,transparent 100%);
}
.cuaderno__texto{ will-change:transform; }
.cuaderno__texto > * + *{ margin-top:clamp(1.1rem,2.2vw,1.9rem); }

/* El párrafo no activo se distingue por COLOR y por el canto, nunca por
   opacidad. Dos razones medidas, no estéticas:
   (1) atenuar a .52 componía ~#526879 sobre el canvas = 3.09:1, por debajo del
       4.5:1 exigido — y estos párrafos son frases decibles del ledger, así que
       tienen que ser legibles siempre, no solo cuando les toca el turno;
   (2) cuando el acto degrada a `flow` (móvil y laptop corta) el progreso nunca
       avanza, y una opacidad baja se quedaba pegada para siempre.
   Con color puro, --cs-dim da 7.7:1 y el estado activo se lee igual de claro. */
.cuaderno__p{
  color:var(--cs-dim); font-size:.95rem; line-height:1.6;
  border-left:1px solid transparent; padding-left:1rem;
  transition:color var(--sc-d-base) var(--sc-ease-out),
             border-color var(--sc-d-base) var(--sc-ease-out);
}
.cuaderno__p[data-activo="true"]{ color:var(--sc-ink); border-left-color:var(--sc-accent); }
.cuaderno__p b{ color:var(--sc-ink); font-weight:500; }
.cuaderno__p .cs-rot{ display:block; margin-bottom:.45rem; color:var(--sc-accent); }

/* el escenario de la derecha: se queda quieto mientras el texto pasa */
.cuaderno__escena{ position:relative; min-height:clamp(19rem,46vh,30rem); }

/* Bajo reduced-motion y en móvil no hay énfasis que seguir: todos los párrafos
   se sirven a plena tinta. La información no depende del movimiento. */
  html[data-motion="reducido"] .cuaderno__p{ transition:none; }

@media (max-width:1179px){
  .cuaderno{ padding-inline:clamp(1.25rem,5vw,3.5rem); }
  .cuaderno__cols{ grid-template-columns:minmax(0,1fr); gap:1.4rem; }
  /* Apilado, la animación va arriba PERO se queda pegada mientras el texto pasa
     por su costado: sin esto quedaba a 0.6–0.85 pantallas de cada párrafo, que
     es el mismo defecto de «animaciones separadas del texto» en otra forma.
     Y la ventana deja de recortar: acá la columna no se desplaza. */
  /* Apilado, la escena va ARRIBA y en flujo normal — NO pegajosa.
     Se probó pegajosa para tenerla siempre junto al texto y salió mal: mide
     589px en un viewport de 844, o sea que tapaba el 70% de la pantalla y
     dejaba 255px para leer. Eso no es emparejar, es cubrir.
     En apilado no hay scrub, así que el emparejamiento correcto es otro: el
     gráfico con su LEYENDA NUMERADA justo debajo —que cuenta la demostración
     entera en palabras— y el texto a continuación. La leyenda es el puente. */
  .cuaderno__escena{ min-height:0; order:-1; }
  .cuaderno__ventana{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .cuaderno__texto{ transform:none !important; will-change:auto; }
}
  html[data-motion="reducido"] .cuaderno__ventana{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
  html[data-motion="reducido"] .cuaderno__texto{ transform:none !important; }


/* ═════════════════════════ EL GLOSARIO PUNTEADO ════════════════════════════
   «Que en algún lugar se pueda aclarar una pregunta» (Rodrigo) resuelto SIN
   morfología de chat: el término técnico lleva subrayado punteado y muestra una
   ficha sobria de una línea con su definición y su norma.

   Es un <button>, no un <span> con :hover: así el teclado (focus) y el táctil
   (tap) llegan a lo mismo que el mouse. La definición vive en el DOM —
   greppeable por el gate de claims, y nunca solo en el hover.
   ------------------------------------------------------------------------- */
.glo{
  font:inherit; color:inherit; background:none; border:0; padding:0; cursor:help;
  border-bottom:1px dotted var(--sc-accent); text-underline-offset:2px;
}
.glo:hover,.glo:focus-visible{ color:var(--sc-ink); border-bottom-style:solid; }
.glo__f{
  position:fixed; z-index:70; max-width:26rem; margin-top:.4rem;
  padding:.6rem .8rem; background:rgba(7,18,25,.96); border:1px solid var(--cs-line);
  border-left:1px solid var(--sc-accent);
  font-family:var(--sc-font-text); font-size:.8rem; line-height:1.5; color:var(--cs-dim);
  opacity:0; visibility:hidden; transition:opacity var(--sc-d-base) var(--sc-ease-out);
}
.glo__f[data-abierta="true"]{ opacity:1; visibility:visible; }
.glo__f b{ display:block; color:var(--sc-ink); font-weight:500; margin-bottom:.2rem; }
.glo__f .cs-rot{ display:block; margin-top:.35rem; color:var(--sc-accent); }
 html[data-motion="reducido"] .glo__f{ transition:none; } 


/* ═══════════════ LA ESPINA · el escrito esquemático que recorre ════════════
   Barras de línea, cero texto real: el mismo lenguaje visual de los reels, para
   que se lea «cualquier escrito» y no un caso concreto. El pase, más adelante,
   sí es concreto — la página sube de lo abstracto a lo vivido y el pase no
   pierde exclusividad.

   El estado lo publica la escena genérica del cuaderno en data-estacion; acá
   solo se declara qué se ve en cada uno. Al subir el scroll el atributo vuelve
   atrás y la espina se rebobina: reversible por construcción.
   ------------------------------------------------------------------------- */
.espina{
  position:relative; height:clamp(13rem,29vh,18rem);
  font-family:var(--sc-font-mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
}
.espina *{ transition:opacity .45s var(--sc-ease-out), transform .45s var(--sc-ease-out),
                      background .45s var(--sc-ease-out), border-color .45s var(--sc-ease-out); }

/* --- el perímetro y el escrito --- */
/* El cerco ocupa 42%: el 58% restante es para los rótulos de las bocas y el
   nodo del modelo. Con 58% de cerco los rótulos se cortaban contra el borde. */
.espina__cerco{
  position:absolute; left:0; top:8%; width:42%; height:78%;
  border:1px solid var(--cs-line2);
}
[data-estacion^="cerco"] .espina__cerco{ border-color:var(--sc-accent); }
.espina__doc{ position:absolute; inset:14% 12%; display:flex; flex-direction:column; gap:.44rem; }
.espina__doc .b{ height:5px; background:var(--cs-line2); transform-origin:left; }
.espina__doc .b--sum{ width:42%; background:var(--sc-ink); opacity:.55; }
.espina__doc .b--ocr{ filter:blur(1.6px); opacity:.5; }
[data-estacion="cerco-3"] .espina__doc .b--ocr,
[data-estacion="cerco-4"] .espina__doc .b--ocr,
[data-estacion^="mesas"] .espina__doc .b--ocr,
[data-estacion^="compuerta"] .espina__doc .b--ocr{ filter:none; opacity:1; background:var(--cs-dim3); }
/* la máquina se atenúa cuando el paso lo hace el equipo (OCR local) */
[data-estacion="cerco-3"] .espina__cerco{ opacity:.72; }

/* --- las tres bocas que mueren en el borde --- */
.espina__boca{ position:absolute; left:42%; opacity:0; display:flex; align-items:center; gap:.4rem; white-space:nowrap; }
.espina__boca i{ position:relative; display:block; width:1.7rem; height:1px; background:var(--cs-dim3); transform:scaleX(0); transform-origin:left; }
.espina__boca i::after{ content:""; position:absolute; right:0; top:-4px; width:1px; height:9px; background:var(--sc-accent); opacity:0; }
.espina__boca em{ font-style:normal; color:var(--cs-dim3); font-size:.52rem; letter-spacing:.1em; }
.espina__boca--a{ top:16%; } .espina__boca--b{ top:44%; } .espina__boca--c{ top:72%; }
[data-estacion="cerco-2"] .espina__boca,
[data-estacion="cerco-3"] .espina__boca,
[data-estacion="cerco-4"] .espina__boca,
[data-estacion^="mesas"] .espina__boca,
[data-estacion^="compuerta"] .espina__boca{ opacity:1; }
[data-estacion="cerco-2"] .espina__boca i,
[data-estacion="cerco-3"] .espina__boca i,
[data-estacion="cerco-4"] .espina__boca i,
[data-estacion^="mesas"] .espina__boca i,
[data-estacion^="compuerta"] .espina__boca i{ transform:scaleX(1); }
[data-estacion="cerco-2"] .espina__boca i::after,
[data-estacion="cerco-3"] .espina__boca i::after,
[data-estacion="cerco-4"] .espina__boca i::after,
[data-estacion^="mesas"] .espina__boca i::after,
[data-estacion^="compuerta"] .espina__boca i::after{ opacity:1; }

/* --- el extracto cercado y la única línea que cruza --- */
.espina__extracto{
  position:absolute; left:-2%; top:50%; width:78%; height:15px;
  border:1px solid var(--sc-accent); opacity:0; transform:scale(.94);
}
/* la única línea que cruza tiene que TOCAR el nodo: si muere antes, el
   dibujo desmiente la frase. Va de 42% hasta el canto del modelo. */
.espina__salida{ position:absolute; left:42%; right:9.5rem; top:calc(54% + .78rem); opacity:0; }
.espina__salida i{ display:block; height:1px; background:var(--sc-accent); transform:scaleX(0); transform-origin:left; }
.espina__modelo{
  position:absolute; right:0; top:54%; width:8.6rem; text-align:center; padding:.4rem .5rem;
  border:1px solid var(--cs-line2); color:var(--cs-dim3); opacity:.25;
}
[data-estacion="cerco-4"] .espina__extracto,
[data-estacion^="mesas"] .espina__extracto,
[data-estacion^="compuerta"] .espina__extracto{ opacity:1; transform:none; }
[data-estacion="cerco-4"] .espina__salida,
[data-estacion^="mesas"] .espina__salida,
[data-estacion^="compuerta"] .espina__salida{ opacity:1; }
[data-estacion="cerco-4"] .espina__salida i,
[data-estacion^="mesas"] .espina__salida i,
[data-estacion^="compuerta"] .espina__salida i{ transform:scaleX(1); }
[data-estacion="cerco-4"] .espina__modelo,
[data-estacion^="mesas"] .espina__modelo,
[data-estacion^="compuerta"] .espina__modelo{ opacity:1; border-color:var(--sc-accent); color:var(--sc-ink); }

/* --- las dos mesas: el escrito viaja, el borde detiene, el sello queda --- */
.espina__mesa{ position:absolute; right:0; top:4%; padding:.35rem .55rem; border:1px dashed var(--cs-line2); color:var(--cs-dim3); opacity:0; }
[data-estacion^="mesas"] .espina__mesa{ opacity:1; }
[data-estacion^="mesas"] .espina__cerco{ transform:translateX(9%); }
/* el intento de entrar al cuerpo: el borde se engruesa y devuelve */
[data-estacion="mesas-2"] .espina__cerco{ border-color:var(--sc-accent); border-width:2px; transform:translateX(7%); }
.espina__sello{ position:absolute; left:36%; top:22%; width:1.4rem; height:1.4rem; border:1px solid var(--sc-accent); border-radius:50%; opacity:0; transform:scale(.8); }
[data-estacion="mesas-3"] .espina__sello,
[data-estacion^="compuerta"] .espina__sello{ opacity:.9; transform:none; }

/* --- la compuerta de fechas --- */
.espina__compuerta{ position:absolute; left:47%; top:8%; height:78%; width:0; opacity:0; }
.espina__compuerta i{ position:absolute; top:0; width:1px; height:100%; background:var(--sc-accent); opacity:.7; }
.espina__compuerta i:first-child{ left:-6px; } .espina__compuerta i:last-child{ left:6px; }
.espina__compuerta em{ position:absolute; top:-1.1rem; left:-1.6rem; font-style:normal; color:var(--sc-accent); }
[data-estacion^="compuerta"] .espina__compuerta{ opacity:1; }
/* la barra de fecha NO cruza: se queda del lado de acá */
[data-estacion="compuerta-2"] .espina__doc .b--fecha,
[data-estacion="compuerta-3"] .espina__doc .b--fecha{ opacity:.3; transform:scaleX(.3); background:var(--sc-accent); }

/* --- la leyenda: la demostración completa, legible sin movimiento --- */
.espina__leyenda{
  margin:clamp(.5rem,1vw,.9rem) 0 0; padding-left:1.2rem;
  color:var(--cs-dim); font-size:.78rem; line-height:1.5;
  font-family:var(--sc-font-text); letter-spacing:0; text-transform:none;
}
.espina__leyenda li{ opacity:.42; transition:opacity .4s var(--sc-ease-out); }
[data-estacion="cerco-1"] .espina__leyenda li:nth-child(1),
[data-estacion="cerco-2"] .espina__leyenda li:nth-child(2),
[data-estacion="cerco-3"] .espina__leyenda li:nth-child(3),
[data-estacion="cerco-4"] .espina__leyenda li:nth-child(4),
[data-estacion="mesas-1"] .espina__leyenda li:nth-child(5),
[data-estacion="mesas-2"] .espina__leyenda li:nth-child(6),
[data-estacion="mesas-3"] .espina__leyenda li:nth-child(6),
[data-estacion^="compuerta"] .espina__leyenda li:nth-child(7){ opacity:1; color:var(--sc-ink); }

/* Sin movimiento (reduced-motion) y en móvil: el fotograma final completo y la
   leyenda entera legible. Ninguna información dependía de la animación. */
  html[data-motion="reducido"] .espina *, html[data-motion="reducido"] .espina__leyenda li{ transition:none; }
  html[data-motion="reducido"] .espina__leyenda li{ opacity:1; color:var(--sc-ink); }

@media (max-width:1179px){
  .espina__leyenda li{ opacity:1; }
  .espina{ height:clamp(14rem,34vh,19rem); }
}

/* ═════════ LA ESPINA · acto 2 · versiones → equipo → informe ═══════════════
   Misma gramática que el acto 1 (barras de línea, cero texto real, estado por
   data-estacion). Tres piezas: la pila de versiones a la izquierda, la capa del
   equipo al centro, y la hoja del informe a la derecha.

   La atenuación de la pila cuando entra el equipo NO es decorativa: es el único
   argumento visual de que ese tramo es compromiso de proceso (SERVICIO) y no
   una función del programa. Por eso la leyenda 5 lo dice también en palabras:
   la distinción no puede vivir solo en el brillo.
   ------------------------------------------------------------------------- */
.espina--b{ height:clamp(15rem,33vh,20rem); }

/* --- la pila de versiones --- */
/* Reparto sin solape: pila arriba-izquierda, equipo DEBAJO de la pila (no a su
   costado: «sin vigilancia corriendo» necesita ~46% de ancho y chocaba con las
   filas del informe), informe en la mitad derecha. Verificado con el detector
   de solape texto-sobre-texto. */
.pila{ position:absolute; left:0; top:0; width:40%; height:62%; }
/* La tarjeta va al 72% y el rótulo cuelga 2rem: así el rótulo cae SIEMPRE dentro
   de .pila (0.72·P + 32px ≤ P para P ≥ 114px, y en el puerto más angosto P=133px).
   Con 86% el rótulo se salía del viewport en móvil por 9px. */
.pila__v{
  position:absolute; left:0; width:72%; height:2.9rem; padding:.4rem .5rem;
  border:1px solid var(--cs-line2); border-right:2px solid var(--cs-line2);
  background:rgba(5,14,20,.6); display:flex; flex-direction:column; gap:.28rem;
  opacity:0; transform:translateY(8px);
}
.pila__v i{ display:block; height:4px; background:var(--cs-line2); }
.pila__v i:nth-child(2){ width:76%; } .pila__v i:nth-child(3){ width:54%; }
.pila__v em{ position:absolute; right:-2rem; top:.4rem; font-style:normal; color:var(--cs-dim3); }
.pila__v--1{ bottom:0; } .pila__v--2{ bottom:3.3rem; } .pila__v--3{ bottom:6.6rem; }
[data-estacion^="ver"] .pila__v--1,[data-estacion^="eq"] .pila__v--1,[data-estacion^="inf"] .pila__v--1{ opacity:1; transform:none; }
[data-estacion="ver-2"] .pila__v--1,[data-estacion="ver-3"] .pila__v--1,[data-estacion="ver-4"] .pila__v--1,
[data-estacion^="eq"] .pila__v--1,[data-estacion^="inf"] .pila__v--1{ border-right-color:var(--sc-accent); }
[data-estacion="ver-3"] .pila__v--2,[data-estacion="ver-4"] .pila__v--2,
[data-estacion^="eq"] .pila__v--2,[data-estacion^="inf"] .pila__v--2{ opacity:1; transform:none; border-right-color:var(--sc-accent); }
[data-estacion="ver-3"] .pila__v--3,[data-estacion="ver-4"] .pila__v--3,
[data-estacion^="eq"] .pila__v--3,[data-estacion^="inf"] .pila__v--3{ opacity:1; transform:none; border-right-color:var(--sc-accent); }
/* el intento que no cede: el canto de la versión vieja se engruesa y devuelve */
.pila__tope{ position:absolute; left:88%; bottom:1.2rem; width:.9rem; height:1px; background:var(--sc-accent); opacity:0; transform:scaleX(0); transform-origin:right; }
[data-estacion="ver-3"] .pila__tope,[data-estacion="ver-4"] .pila__tope,
[data-estacion^="eq"] .pila__tope,[data-estacion^="inf"] .pila__tope{ opacity:1; transform:none; }
.pila__rechazo{ position:absolute; left:0; top:-1.4rem; color:var(--sc-accent); opacity:0; }
[data-estacion="ver-4"] .pila__rechazo,[data-estacion^="eq"] .pila__rechazo,[data-estacion^="inf"] .pila__rechazo{ opacity:1; }

/* --- la capa del equipo: la máquina se atenúa y trabajan personas --- */
[data-estacion^="eq"] .pila,[data-estacion^="inf"] .pila{ opacity:.42; }
.equipo{ position:absolute; left:0; top:70%; width:46%; display:flex; align-items:center; gap:.4rem; opacity:0; }
.equipo i{ display:block; width:.5rem; height:.5rem; border:1px solid var(--sc-accent); border-radius:50%; }
.equipo em{ font-style:normal; color:var(--sc-ink); }
[data-estacion^="eq"] .equipo,[data-estacion^="inf"] .equipo{ opacity:1; }
[data-estacion="eq-1"] .equipo i{ opacity:.3; }
.equipo__ciclo{ position:absolute; left:0; top:84%; width:46%; color:var(--cs-dim3); opacity:0; text-decoration:line-through; }
[data-estacion="eq-3"] .equipo__ciclo,[data-estacion^="inf"] .equipo__ciclo{ opacity:.8; }

/* --- la hoja del informe --- */
/* el informe se lee como HOJA desde que llega: sin marco eran números flotando */
.informe{
  position:absolute; right:0; top:4%; width:50%; opacity:0; transform:translateY(10px);
  padding:.55rem .6rem .5rem; border:1px solid var(--cs-line2); background:rgba(5,14,20,.55);
}
[data-estacion^="inf"] .informe{ opacity:1; transform:none; }
.informe__k{ display:grid; grid-template-columns:1.4rem repeat(4,1fr); gap:.3rem; margin-bottom:.4rem; }
.informe__k em{ font-style:normal; font-size:.44rem; color:var(--cs-dim3); grid-column:span 1; }
.informe__k em:first-child{ grid-column:2; }
.informe__f{ display:grid; grid-template-columns:1.4rem repeat(4,1fr); gap:.3rem; align-items:center; margin-bottom:.34rem; }
.informe__f b{ font-weight:400; color:var(--cs-dim3); font-size:.5rem; }
.informe__f i{ height:4px; background:var(--cs-line2); opacity:0; }
[data-estacion="inf-2"] .informe__f i,[data-estacion="inf-3"] .informe__f i,[data-estacion="inf-4"] .informe__f i{ opacity:1; }
[data-estacion="inf-2"] .informe__f i:nth-child(2){ background:var(--sc-accent); }
/* el límite que se declara: la celda queda ABIERTA, no rellenada */
[data-estacion="inf-3"] .informe__f:first-of-type i:last-child,
[data-estacion="inf-4"] .informe__f:first-of-type i:last-child{
  background:none; border:1px dashed var(--sc-accent); height:6px;
}
.informe__huella{ display:block; margin-top:.5rem; text-align:right; color:var(--cs-dim3); opacity:0; }
[data-estacion="inf-4"] .informe__huella{ opacity:1; color:var(--sc-accent); }

/* Móvil y laptop corta: la espina del acto 2 tiene TRES piezas puestas lado a
   lado en absoluto (pila 38% + equipo + informe 52%). En un viewport angosto no
   caben: el rótulo «límite» de la cabecera se salía 9px del viewport. La
   solución no es encoger el rótulo —es la misma palabra del ledger— sino dejar
   de pedirle a tres piezas que compartan una fila que no existe: se apilan. */
@media (max-width:1179px){
  .espina--b{ height:auto; display:flex; flex-direction:column; gap:1.1rem; }
  .espina--b .pila,
  .espina--b .equipo,
  .espina--b .equipo__ciclo,
  .espina--b .informe{ position:relative; left:auto; right:auto; top:auto; width:100%; }
  .espina--b .pila{ height:11rem; }
  /* apilada, el rótulo del rechazo no puede colgar hacia arriba: rozaba el
     titular de la foja. Fluye debajo de la pila, en su propia línea. */
  .espina--b .pila__rechazo{ position:static; display:block; margin-top:.5rem; }
  .espina--b .pila__v{ width:62%; }
  .espina--b .informe__k em{ font-size:.42rem; }
  /* apilada, la atenuación de la máquina pierde sentido: se sirve todo legible */
  .espina--b .pila{ opacity:1 !important; }
}

/* ═══════════════ EL CALENDARIO 155-C · pico mecánico ═══════════════════════
   Nueve días en fila. Los inhábiles se apagan; la regla los cruza sin marcar.
   El contador y los trazos son dos lecturas del MISMO cómputo — que aterricen
   en el mismo día es el argumento, no la decoración.
   ------------------------------------------------------------------------- */
.cal{ position:relative; font-family:var(--sc-font-mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; }
.cal__rejilla{ position:relative; display:grid; grid-template-columns:repeat(9,1fr); gap:.3rem; }
.cal__d{
  position:relative; height:2.6rem; border:1px solid var(--cs-line2);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:.25rem;
  transition:border-color .3s var(--sc-ease-out), background .3s var(--sc-ease-out), opacity .3s var(--sc-ease-out);
}
.cal__d em{ font-style:normal; font-size:.44rem; color:var(--cs-dim3); }
.cal__d.is-inhabil{ opacity:.34; border-style:dashed; }
.cal__d.is-pasada{ background:rgba(var(--cs-accent-rgb) / .05); }
.cal__d.is-pasada:not(.is-inhabil){ border-color:var(--sc-accent); }
.cal__d.is-hoy{ background:rgba(var(--cs-accent-rgb) / .14); }
/* la regla: una columna que baja por la rejilla, día por día */
.cal__regla{
  position:absolute; left:0; top:-.4rem; bottom:-.4rem;
  width:calc((100% - 8 * .3rem) / 9); border-left:1px solid var(--sc-accent); border-right:1px solid var(--sc-accent);
  pointer-events:none;
}
.cal__rot{ position:relative; height:1.1rem; margin:.5rem 0 0; }
.cal__marca{ position:absolute; top:0; color:var(--sc-accent); opacity:0; }
.cal__marca--dep{ left:0; }
.cal__marca--efe{ left:22.2%; }
.cal__cuenta{ display:flex; align-items:baseline; gap:.6rem; margin:.7rem 0 0; }
.cal__cuenta b{ font-size:1.9rem; font-weight:400; color:var(--sc-ink); font-variant-numeric:tabular-nums; line-height:1; }
.cal__trazo{ display:flex; align-items:center; gap:.6rem; margin:.55rem 0 0; }
.cal__trazos{ display:flex; gap:.3rem; height:1rem; align-items:center; }
.cal__trazos i{ display:block; width:2px; height:.85rem; background:var(--sc-accent); opacity:0; transition:opacity .25s var(--sc-ease-out); }
.cal__vence{
  margin:.8rem 0 0; display:inline-block; padding:.28rem .6rem;
  border:1px solid var(--cs-line2); color:var(--cs-dim3); opacity:.4;
  transition:opacity .35s var(--sc-ease-out), border-color .35s var(--sc-ease-out), color .35s var(--sc-ease-out);
}
.cal__vence.is-on{ opacity:1; border-color:var(--sc-accent); color:var(--sc-ink); }
.cal__pie{ margin:.7rem 0 0; color:var(--cs-dim3); }
.cal__nota{ margin:0 0 .55rem; color:var(--cs-dim3); }   /* RV-008 */
 html[data-motion="reducido"] .cal__d, html[data-motion="reducido"] .cal__trazos i, html[data-motion="reducido"] .cal__vence{ transition:none; } 

@media (max-width:1179px){ .cal__d{ height:2rem; } .cal__cuenta b{ font-size:1.5rem; } }

/* ═════════════ LOS TRES DISPOSITIVOS EN FLUJO ══════════════════════════════
   No gastan span pinneado: entran por viewport con data-sc-in (una sola vez).
   Cada uno se autoró primero como fotograma final —que es lo que sirve
   reduced-motion— y la entrada solo lo trae a escena.
   ------------------------------------------------------------------------- */
.disp{
  display:grid; grid-template-columns:minmax(0,44ch) minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3.4rem); align-items:center;
  padding:clamp(1.4rem,2.6vw,2.2rem) 0; border-top:1px solid var(--cs-line);
}
.disp:first-of-type{ border-top:0; }
.disp__t > * + *{ margin-top:.8rem; }
.disp__t p{ color:var(--cs-dim); font-size:.95rem; line-height:1.6; }
.disp__t p b{ color:var(--sc-ink); font-weight:500; }
.disp__e{ font-family:var(--sc-font-mono); font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; }
/* la entrada: sube y aparece. Sin la clase, el bloque ya está en su sitio —
   nunca se depende del observer para que el contenido exista. */
[data-sc-in].disp{ opacity:0; transform:translateY(14px); }
[data-sc-in].disp.sc-in{ opacity:1; transform:none; transition:opacity .5s var(--sc-ease-out), transform .5s var(--sc-ease-out); }
 html[data-motion="reducido"] [data-sc-in].disp{ opacity:1; transform:none; transition:none; } 


/* --- 01 · las claves: sólido = opera · punteado = diseño --- */
.cred{ display:flex; flex-direction:column; gap:.9rem; }
.cred__campo{ position:relative; display:flex; align-items:center; gap:.6rem; max-width:15rem; }
.cred__campo em{ font-style:normal; color:var(--cs-dim3); }
.cred__campo i{ flex:1; height:1.5rem; border:1px solid var(--cs-line2); background:rgba(5,14,20,.5); }
.cred__tacha{ position:absolute; left:5.2rem; right:0; top:50%; height:1px; background:var(--sc-accent); }
.cred__no{ color:var(--sc-accent); }
.cred__plano{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin-top:.2rem; }
.cred__nodo{ padding:.3rem .5rem; border:1px dashed var(--cs-dim3); color:var(--cs-dim3); }
.cred__l{ width:2.4rem; height:0; border-top:1px dashed var(--cs-dim3); }
.cred__rot{ width:100%; color:var(--cs-dim3); margin-top:.35rem; }

/* --- 02 · las bases: dos recintos, y el dato que no cruza --- */
.bases{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.bases__c{ flex:0 0 8.4rem; padding:.55rem .6rem; border:1px solid var(--cs-line2); background:rgba(5,14,20,.5); display:flex; flex-direction:column; gap:.34rem; }
.bases__c em{ font-style:normal; color:var(--cs-dim3); margin-bottom:.16rem; }
.bases__c i{ height:4px; background:var(--cs-line2); }
.bases__c i:nth-child(3){ width:72%; } .bases__c i:nth-child(4){ width:50%; }
.bases__cruce{ position:relative; width:2.6rem; height:1px; background:var(--sc-accent); opacity:.55; }
.bases__cruce b{ position:absolute; right:0; top:-5px; width:1px; height:11px; background:var(--sc-accent); }
.bases__rot{ width:100%; color:var(--cs-dim3); }

/* --- 03 · el tablero: alertas en pantalla, glifos de salida APAGADOS --- */
.tab{ max-width:19rem; padding:.7rem .75rem; border:1px solid var(--cs-line2); background:rgba(5,14,20,.5); }
.tab__fila{ display:grid; grid-template-columns:.5rem 1fr; gap:.5rem; align-items:center; margin-bottom:.42rem; }
.tab__fila i:first-child{ width:.5rem; height:.5rem; background:var(--sc-accent); }
.tab__fila i:last-child{ height:4px; background:var(--cs-line2); }
.tab__fila:nth-child(2) i:last-child{ width:78%; } .tab__fila:nth-child(3) i:last-child{ width:56%; }
.tab__salidas{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:.8rem 0 0; padding-top:.6rem; border-top:1px solid var(--cs-line); }
.tab__g b{ font-weight:400; color:var(--cs-dim3); opacity:.45; text-decoration:line-through; }
.tab__rot{ width:100%; color:var(--cs-dim3); margin-top:.3rem; }

@media (max-width:1179px){
  .disp{ grid-template-columns:minmax(0,1fr); gap:1.2rem; }
}


/* ═══════ R2-Lote5 · RV-018/024/029: la espina SCRUBEA con el scroll ═════════
   El estado de cada estación seguía siendo un salto con transición de 0.45s
   (time-based): arrancaba al cambiar el atributo, no con el lector. Ahora el
   cuaderno publica --est-p (progreso local 0→1 dentro de la ventana del
   párrafo activo) y los morfos GEOMÉTRICOS de entrada son función pura de él:
   avanzan con el scroll, se rebobinan al subir, y quedan clavados cuando la
   estación pasa (los selectores acumulativos posteriores los fijan en 1).
   Los cambios de color/blur conservan su transición corta: no scrubean bien.
   Default --est-p:1 → reduced-motion, móvil y flow sirven el estado final. */
.cuaderno__escena{ --est-p:1; }

/* acto 1 · cerco-2: las bocas se dibujan con el lector */
[data-estacion="cerco-2"] .espina__boca{
  opacity:var(--est-p);
  transition:background .45s var(--sc-ease-out), border-color .45s var(--sc-ease-out);
}
[data-estacion="cerco-2"] .espina__boca i{
  transform:scaleX(var(--est-p));
  transition:background .45s var(--sc-ease-out);
}
[data-estacion="cerco-2"] .espina__boca i::after{ opacity:calc(var(--est-p) * var(--est-p)); transition:none; }

/* acto 1 · cerco-4: el extracto y la única línea que cruza */
[data-estacion="cerco-4"] .espina__extracto{
  opacity:var(--est-p); transform:scale(calc(.94 + .06 * var(--est-p)));
  transition:border-color .45s var(--sc-ease-out);
}
[data-estacion="cerco-4"] .espina__salida{ opacity:var(--est-p); transition:none; }
[data-estacion="cerco-4"] .espina__salida i{ transform:scaleX(var(--est-p)); transition:none; }
[data-estacion="cerco-4"] .espina__modelo{
  opacity:calc(.25 + .75 * var(--est-p));
  transition:border-color .45s var(--sc-ease-out), color .45s var(--sc-ease-out);
}

/* acto 1 · mesas: la mesa aparece y el cerco viaja con el lector */
[data-estacion="mesas-1"] .espina__mesa{ opacity:var(--est-p); transition:border-color .45s var(--sc-ease-out); }
[data-estacion="mesas-1"] .espina__cerco{ transform:translateX(calc(9% * var(--est-p))); transition:border-color .45s var(--sc-ease-out); }
[data-estacion="mesas-3"] .espina__sello{
  opacity:calc(.9 * var(--est-p)); transform:scale(calc(.8 + .2 * var(--est-p)));
  transition:none;
}

/* acto 1 · compuerta */
[data-estacion="compuerta-1"] .espina__compuerta{ opacity:var(--est-p); transition:none; }
[data-estacion="compuerta-2"] .espina__doc .b--fecha{
  opacity:calc(1 - .7 * var(--est-p)); transform:scaleX(calc(1 - .7 * var(--est-p)));
  transition:background .45s var(--sc-ease-out);
}

/* acto 2 · versiones: la pila crece con el lector */
[data-estacion="ver-1"] .pila__v--1{
  opacity:var(--est-p); transform:translateY(calc(8px * (1 - var(--est-p))));
  transition:border-color .45s var(--sc-ease-out);
}
[data-estacion="ver-3"] .pila__v--2{
  opacity:var(--est-p); transform:translateY(calc(8px * (1 - var(--est-p))));
  transition:border-color .45s var(--sc-ease-out);
}
[data-estacion="ver-3"] .pila__v--3{
  opacity:var(--est-p); transform:translateY(calc(8px * (1 - var(--est-p))));
  transition:border-color .45s var(--sc-ease-out);
}
[data-estacion="ver-3"] .pila__tope{ opacity:var(--est-p); transform:scaleX(var(--est-p)); transition:none; }
[data-estacion="ver-4"] .pila__rechazo{ opacity:var(--est-p); transition:none; }

/* acto 2 · equipo e informe */
[data-estacion="eq-1"] .equipo{ opacity:var(--est-p); transition:none; }
[data-estacion="eq-1"] .pila{ opacity:calc(1 - .58 * var(--est-p)); transition:none; }
[data-estacion="eq-3"] .equipo__ciclo{ opacity:calc(.8 * var(--est-p)); transition:none; }
[data-estacion="inf-1"] .informe{
  opacity:var(--est-p); transform:translateY(calc(10px * (1 - var(--est-p))));
  transition:border-color .45s var(--sc-ease-out);
}
[data-estacion="inf-2"] .informe__f i{ opacity:var(--est-p); transition:background .45s var(--sc-ease-out); }
[data-estacion="inf-4"] .informe__huella{ opacity:var(--est-p); transition:color .45s var(--sc-ease-out); }

@media (max-width:1179px){
  /* apilado: sin scrub — todo legible al estado final */
  .cuaderno__escena{ --est-p:1 !important; }
}