/* lumaq.es · medio pegado (site-v2, ciclo 5b ola 2). Sin terceros. Solo transform y opacity en lo continuo; el resto son estados discretos.
   Un escenario se queda pegado mientras los pasos pasan por el centro. pegado.js escribe data-activo / data-estado / data-on.
   Capa base = lo que ve quien no tiene JavaScript o pide movimiento reducido: todos los pasos en estado final y sin altura de recorrido.
   El comportamiento pegado solo se activa con (scripting: enabled) y (prefers-reduced-motion: no-preference): sin clase "js" ni script en línea
   y sin salto de maquetación al arrancar el script. */

.pegado { --pos-pegado: calc(var(--cabecera) + var(--s-4)); --nodo: 28px; row-gap: var(--s-5); align-items: start; margin-top: var(--s-6); }
.pegado__escena { margin: 0; min-width: 0; }
/* en móvil el escenario pegado va sobre la lista: fondo opaco para que el pie de figura no se mezcle con el texto que pasa por debajo */
@media (max-width: 1023px) { .pegado__escena { background: var(--bg); padding-bottom: var(--s-2); } }
.pegado__marco { position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; border-radius: var(--r-escena); background: var(--noche-900); box-shadow: var(--sombra-escena); }
.pegado__marco picture, .pegado__marco img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pegado__marco img { object-fit: cover; }
.pegado__marco::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
/* viñeta solo en la noche del Sistema */


/* ---------- lista de pasos ---------- */









/* ---------- Sistema: fachada fotográfica con ocho ventanas que se encienden ---------- */

/* las ocho capas de luz: cada una es la misma capa de luz recortada a su ventana (porcentajes del escenario, generados por procesar_o2.py) */

/* en desarrollo (pasos 7 y 8): ventana más tenue y marco en trazo discontinuo */


/* "a plena luz": al llegar al último paso entra un amanecer muy suave por arriba a la derecha */


@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-height: 561px) {
  /* escenario pegado y pasos que pasan por el centro (alto de recorrido = pasos x 50 svh en escritorio, x 40 svh en móvil) */
  .pegado__escena { position: sticky; top: var(--pos-pegado); align-self: start; z-index: 1; }
  
  
  
  
  
  
  
  
  
  
  
  /* ventanas apagadas hasta que su paso las enciende; la transición es solo opacity */
  
  
  
  
  
}