/* EL MOTOR DE ESCENA · hoja compartida.
   Sale de la entrega de Diseno del 4 de octubre de 2026, que lo traia
   pegado dentro de cada pagina. Son 4,7 KB identicos byte a byte en las
   once, y habia que llevarlo ademas a las veinte fichas: treinta y ocho
   copias de lo mismo.
   Va en un fichero y no en cada pagina por dos razones, y la segunda pesa
   mas que la primera: se descarga una vez y se cachea para todo el sitio;
   y una copia por pagina son treinta y ocho sitios donde divergir, que es
   exactamente lo que paso esta semana con las dos listas del menu.
   NO SE EDITA A MANO: lo reescribe la integracion desde la entrega. */
/* ══ ESCENA · motor compartido de revelado y scrollytelling · 03-10-2026 ═════
   Idéntico byte a byte en las once páginas. Si cambia, cambia en las once.
   Tres piezas, todas con realce progresivo: sin JavaScript la página se lee
   entera y quieta, porque las clases que ocultan las pone el propio guion.
   1 · [data-rev]  aparece al entrar en pantalla. Se anima con la propiedad
       translate, no con transform, para no pisar los transform que ya llevan
       tarjetas y láminas.
   2 · [data-esc]  escena: una columna fija (.esc-vis) y unos pasos
       ([data-esc-paso]) que la van cambiando al bajar. El guion escribe el
       paso activo en data-paso y --av, y marca .hecha y .act en los
       [data-esc-marca]. Todo lo visual es CSS.
   3 · [data-cuenta]  la cifra cuenta desde cero al aparecer, una vez.
   prefers-reduced-motion: nada se mueve, todos los pasos legibles, todas las
   marcas encendidas. Es un estado completo, no un hueco.
   El body pasa a overflow-x:clip: con hidden, el body se convierte en
   contenedor de scroll y position:sticky deja de funcionar dentro. */
body{overflow-x:clip}
html.rev [data-rev]{opacity:0;translate:0 14px;transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),translate 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--ri,0) * 90ms)}
html.rev [data-rev].visto{opacity:1;translate:0 0}
.esc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,104px);align-items:start}
.esc-vis{position:sticky;top:var(--vis-top,124px)}
.esc-pasos{list-style:none;margin:0;padding:0}
/* Pasos contiguos y del mismo alto: así el ritmo es regular y no hay huecos
   en los que ningún paso esté activo. El texto va centrado en su paso, y
   como la columna fija también va centrada en la ventana, los dos quedan a
   la misma altura en el momento en que el paso se activa. */
.esc-paso{min-height:56vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:32px 0}
.esc-paso h3{margin:0;font-size:clamp(1.25rem,2.2vw,1.625rem);font-weight:500;line-height:1.28;letter-spacing:-.02em;max-width:24ch}
.esc-paso p{margin:0;font-size:1rem;line-height:1.65;max-width:42ch;color:#86868b}
html.rev .esc-paso{opacity:.3;transition:opacity .5s cubic-bezier(.2,.7,.2,1)}
html.rev .esc-paso.act,html.rev .esc-paso:focus-within{opacity:1}
.esc-cifra{display:flex;align-items:flex-end;gap:14px;font-variant-numeric:tabular-nums}
.esc-cifra .c{position:relative;display:block;width:2.3ch;height:1em;font-size:clamp(3.25rem,8vw,6rem);font-weight:300;letter-spacing:-.05em;line-height:1;color:#f5f5f7}
.esc-cifra .c span{position:absolute;left:0;top:0;opacity:0;translate:0 12px;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1)}
.esc-cifra .c span.act{opacity:1;translate:0 0}
/* La cifra que sale se va hacia arriba y la que entra llega desde abajo, y al
   subir la página es al revés: .hecha marca las que ya quedaron atrás. */
.esc-cifra .c span.hecha:not(.act){translate:0 -12px}
.esc-cifra em{font-style:normal;font-size:.8125rem;letter-spacing:.08em;color:#86868b;padding-bottom:.55em}
.esc-eje{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin-top:30px}
/* Cada tramo del eje se llena de forma continua con el scroll (--f, de 0 a 1,
   lo escribe el guion). Sin guion se queda vacío; con «reducir movimiento»,
   lleno. */
.esc-eje i{position:relative;display:block;height:2px;overflow:hidden;background:rgba(245,245,247,.1)}
.esc-eje i::after{content:'';position:absolute;inset:0;background:#d4af37;transform-origin:left center;transform:scaleX(var(--f,0))}
.esc-escala{display:flex;justify-content:space-between;margin-top:10px;font-size:.6875rem;letter-spacing:.12em;color:#86868b;font-variant-numeric:tabular-nums}
.esc-barra{display:block;height:2px;margin-top:10px;max-width:220px;background:rgba(245,245,247,.08);overflow:hidden}
.esc-barra::after{content:'';display:block;height:100%;background:#d4af37;transform-origin:left center;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.visto .esc-barra::after,html:not(.rev) .esc-barra::after{transform:scaleX(var(--v,0))}
@media(max-width:900px){
  .esc{grid-template-columns:minmax(0,1fr);gap:0}
  .esc-vis{top:68px;z-index:4;padding:16px 0 26px;background:linear-gradient(180deg,#000 0%,#000 80%,rgba(0,0,0,0) 100%)}
  .esc-paso{min-height:40vh;padding:18px 0}
  .esc-cifra .c{font-size:2.75rem}
  .esc-eje{margin-top:16px}
}
@media(prefers-reduced-motion:reduce){
  html.rev [data-rev]{opacity:1;translate:none;transition:none}
  html.rev .esc-paso{opacity:1;transition:none}
  .esc-cifra .c span,.esc-barra::after{transition:none}
}