/* El recorrido de rheo.com.ar. Cada sección es una ESCENA: se queda fija mientras scrolleás y la siguiente aparece
   detrás hasta que la tapa. Lo mueve inmersivo.js escribiendo transform y opacity DIRECTO en unos pocos elementos.
   Sin JavaScript, con "reducir movimiento" o sin `sticky`, no se pone html.inmersivo y la página queda como una
   página normal, en una columna. Nada decorativo es una capa grande: solo negro, el flyer y el texto. */
html.inmersivo { --gap: 620px; }
/* La escena es de borde a borde. `clip`, no `hidden`: hidden rompe sticky. */
html.inmersivo .escena { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); overflow-x: clip; }
html.inmersivo .escena > .pin {
  position: sticky; top: 0; height: var(--vh, 100vh); overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; will-change: transform, opacity; transform-origin: 50% 50%;
}

/* 1 · La portada: el muro se rompe, el logo queda; al scrollear te metés adentro del logo. */
html.inmersivo .e-hero .pin { justify-content: flex-start; min-height: 0; }
html.inmersivo .e-hero .escenario { min-height: 0; will-change: transform, opacity; }

/* 2 · La que sigue: el flyer llega desde el fondo y se acomoda; después entra el resto. */
html.inmersivo #proxima .pin { perspective: 1100px; }
html.inmersivo #proxima .noche { padding: 0; max-height: var(--vh, 100vh); }
html.inmersivo #proxima .n-flyer { will-change: transform; transform-origin: 50% 50%; }
html.inmersivo #proxima .n-info > * { will-change: transform, opacity; }

/* 3 · Las que vienen: un pasillo. La cámara avanza con el scroll y cada flyer pasa a tu lado. */
html.inmersivo #escena-fechas .pin { perspective: 900px; perspective-origin: 50% 46%; justify-content: flex-start; }
html.inmersivo #fechas { position: relative; flex: 1; width: 100%; transform-style: preserve-3d; }
html.inmersivo .fechas-grilla { position: absolute; inset: 0; display: block; width: auto; margin: 0; padding: 0; transform-style: preserve-3d; will-change: transform; }
/* El ancho de cada flyer sale de su proporción: a una historia (9:16) no se le deja pasar el alto de la pantalla. */
html.inmersivo .fechas-grilla .carta { --w: min(300px, 68vw, calc((var(--vh, 100vh) - 150px) * var(--r, 1))); --sg: -1; position: absolute; left: 50%; top: 50%; width: var(--w); margin: calc(var(--w) / var(--r, 1) * -.5 - 28px) 0 0 calc(var(--w) / -2);
  opacity: 0; visibility: hidden; will-change: transform, opacity;
  transform: translate3d(calc(var(--sg) * min(20vw, 230px)), calc(var(--sg) * -2vh), calc(var(--i, 0) * var(--gap) * -1)) rotateY(calc(var(--sg) * 7deg)); }
html.inmersivo .fechas-grilla .carta:nth-child(even) { --sg: 1; }
/* En pantallas grandes el pasillo se abre: flyers más grandes y más separados hacia los costados. */
@media (min-width: 900px) and (min-height: 600px) {
  html.inmersivo .fechas-grilla .carta { --w: min(clamp(280px, 27vw, 470px), calc((var(--vh, 100vh) - 150px) * var(--r, 1)));
    transform: translate3d(calc(var(--sg) * clamp(170px, 15vw, 330px)), calc(var(--sg) * -2vh), calc(var(--i, 0) * var(--gap) * -1)) rotateY(calc(var(--sg) * 7deg)); }
}
@media (max-width: 560px) {
  html.inmersivo .fechas-grilla .carta { transform: translate3d(calc(var(--sg) * 9vw), calc(var(--sg) * -2vh), calc(var(--i, 0) * var(--gap) * -1)) rotateY(calc(var(--sg) * 5deg)); }
}
html.inmersivo .vacio-msg { margin-top: 30vh; }
/* El aviso de "sin conexión" queda arriba del pasillo, por encima de los flyers. */
html.inmersivo .aviso-guardada { position: absolute; z-index: 5; left: 0; right: 0; margin: 0 auto; top: calc(env(safe-area-inset-top) + 14px); pointer-events: none; text-shadow: 0 1px 10px #000, 0 0 3px #000; }

/* Cierre del recorrido: lo que viene después de las escenas es una página normal. */

/* Celular acostado: poca altura. */
@media (max-height: 520px) {
  html.inmersivo #proxima .proxima, html.inmersivo #proxima .noche { grid-template-columns: auto auto; justify-content: center; column-gap: clamp(28px, 8vw, 80px); }
  html.inmersivo #proxima .n-flyer { height: calc(var(--vh, 100vh) - 40px); max-height: none; width: auto; }
  html.inmersivo .e-hero .logo { width: min(40vw, 60vh * 1.72); }
}

/* Una línea arriba que se va llenando, y puntitos para saber en qué escena estás. */
.progreso { display: none; }
html.inmersivo .progreso { display: block; position: fixed; z-index: 70; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: rgba(255, 255, 255, .75); pointer-events: none; }
.puntos { display: none; }
html.inmersivo .puntos { display: flex; position: fixed; z-index: 58; right: 10px; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 2px; }
.puntos button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.puntos button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, .3); transition: transform .25s ease, background .25s ease; }
.puntos button[aria-current="true"]::before { background: #fff; transform: scale(1.5); }