/*
 * escena.css — el escenario. Nada acá anima: anima GSAP, sobre transform y opacity.
 *
 * ⚠️ NO hay `@keyframes` en este archivo, y es a propósito. En un revelado por
 * scroll el estilo se re-resuelve todo el tiempo, y una animación de ENTRADA con
 * `fill-mode: backwards` que ya cumplió vuelve a aplicarse y devuelve el elemento
 * al estado colapsado. Costó tres rondas descubrirlo en el jardín de la galería.
 * Acá la posición de cada pieza la escribe GSAP como transform inline: no hay
 * animación CSS que se pueda re-disparar.
 */

* { margin: 0; padding: 0; box-sizing: border-box }

/* ⚠️⚠️ EL REBOTE NATIVO. En iOS el documento rebota al llegar al tope (rubber
   band) y en un revelado por scroll eso se lee como que la animación se
   descontroló: el follaje se va de posición y vuelve. `overscroll-behavior`
   lo apaga — hace falta en html Y en body, porque quién es el elemento que
   scrollea cambia entre navegadores. */
html, body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

:root {
  --fondo: #080c0a;
  --tinta: #eef2ef;
  --tinta-tenue: #9fb0a6;
}

html { background: var(--fondo) }

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ⚠️⚠️ EL SCROLL ES EL DEL DOCUMENTO, Y TIENE QUE SEGUIR SIÉNDOLO.
   Se intentó moverlo a un contenedor (`position:fixed; overflow-y:auto`) para
   que el navegador móvil no escondiera la barra de URL. FUNCIONA para la barra
   y ROMPE el efecto: con un scroller anidado, el momentum de iOS corre fuera
   del hilo principal y el elemento PINEADO no lo alcanza — la escena entera
   vibra. Se revirtió el mismo día.
   ⇒ La barra que aparece y desaparece es un mal MENOR. Un pin que tiembla no. */
/* ⭐ EL COLCHÓN DE SEGURIDAD (idea del dueño, 2026-08-07).
   Aunque el escenario mida `100lvh` y no se quede corto, el LARGO del recorrido
   sigue dependiendo de una unidad de viewport — y en móvil esa unidad depende de
   si la barra del navegador está o no. Un colchón fijo al final desacopla las dos
   cosas: el último beat siempre termina de correr, esté la barra donde esté.
   Es barato (unos píxeles de scroll de más) y quita una clase entera de bordes. */
/* Sin colchón: el colchón era espacio VACÍO después del pin, y al soltarse
   quedaba el fondo de página pelado — una banda negra que parecía que la escena
   se ocultaba. Lo que va después de una escena fijada no es padding: es la
   SECCIÓN SIGUIENTE (ver #siguiente). */
#recorrido { position: relative }

/* ⚠️⚠️ LA BARRA DE URL DEL NAVEGADOR MÓVIL.
   Con `100svh` (small viewport height) el escenario mide lo que mide la pantalla
   CON la barra visible. Cuando el usuario scrollea, la barra se esconde, el área
   visible CRECE… y debajo del escenario aparece una FRANJA del fondo de la
   página. Se ve como si a la escena le faltara un pedazo.
   `lvh` (large viewport height) es el otro extremo: lo que mide la pantalla con
   la barra ESCONDIDA. Usarlo significa que el escenario nunca queda corto — a
   cambio, con la barra visible se recorta un poco arriba o abajo, que en una
   composición centrada no se nota.
   `svh` queda de reserva para navegadores sin `lvh`. */
#escenario {
  position: relative;
  width: 100%;
  height: 100svh;
  height: 100lvh;
  overflow: hidden;
  background: var(--fondo);
}

/* Cada banco es un plano. El del fondo lleva la placa; los otros, piezas.
 *
 * ⚠️ El orden en Z es la mitad del efecto y NO puede depender del orden en que
 * el JS anexe los nodos: el texto va ENTRE el banco medio y el de frente, que es
 * lo que hace que el follaje lo REVELE al abrirse. Montado por orden de append,
 * los bancos caían encima de `#revelado` y el título quedaba invisible detrás de
 * las hojas — con la animación funcionando perfecto. Por eso va explícito. */
.banco {
  position: absolute;
  inset: 0;
  /* `will-change` sólo en lo que REALMENTE se mueve todo el rato. Ponerlo en
     todo promueve una capa por hoja y la memoria de GPU se va al techo. */
  will-change: transform;
}

.banco[data-banco="fondo"]    { z-index: 0 }
.banco[data-banco="banco-02"] { z-index: 1 }
#revelado                     { z-index: 2 }
.banco[data-banco="banco-01"] { z-index: 3 }
#pista                        { z-index: 4 }

.placa {
  position: absolute;
  top: 50%;
  left: 50%;
  /* ⚠️ 130 %, no 118 %. Medido: la placa se desplaza un 6 % del alto y el
     sobrante era 9 % — cubre, pero por 3 puntos. En el emulador el viewport es
     FIJO; en un teléfono real cambia con la barra del navegador, y ahí ese
     margen de 3 puntos es lo único que separa «cubre» de «se ve el borde».
     El costo es cero: la placa se genera al tamaño que se le pida. */
  width: 130%;
  height: 130%;
  object-fit: cover;
  /* ⚠️⚠️ El centrado NO va acá. Lo escribe GSAP con `xPercent/yPercent`.
     Con `transform: translate3d(-50%,-50%,0)` en CSS, GSAP convierte ese −50 % a
     PÍXELES la primera vez que toca el elemento y los congela. En cuanto cambia
     el tamaño de la placa —o el del viewport, que en un teléfono real pasa cada
     vez que se mueve la barra del navegador— esos píxeles quedan viejos y la
     placa se desplaza hacia abajo DEJANDO VACÍO ARRIBA.
     `xPercent/yPercent` GSAP los mantiene como porcentaje y los recalcula. */
  will-change: transform;
}

.pieza {
  position: absolute;
  transform-origin: 50% 50%;
  will-change: transform;
  /* Sin esto, Safari re-muestrea la pieza en cada fotograma del scrub. */
  backface-visibility: hidden;
}

/* ---- El centro: lo que el follaje revela ---------------------------------- */

#revelado {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 12vw;
  text-align: center;
  pointer-events: none;
}

.tarjeta {
  grid-area: 1 / 1;
  opacity: 0;
  will-change: transform, opacity;
}

.tarjeta h2 {
  /* vmin, no px: en un hero el tamaño lo manda el LADO CORTO de la pantalla, y
     un `clamp()` con techo bajo hace que un monitor de 1440 se vea igual que una
     laptop. */
  font-size: clamp(28px, 7.2vmin, 76px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.75);
}

.tarjeta p {
  margin-top: 2.4vmin;
  font-size: clamp(15px, 2.2vmin, 21px);
  color: var(--tinta-tenue);
  letter-spacing: 0.01em;
}

.tarjeta.portada h2 { font-weight: 200; letter-spacing: 0.01em }

/* La marca de agua de que el contenido es de mentira. Se va con amenidades.js. */
#provisional {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 13px;
  color: var(--tinta-tenue);
  background: rgba(8, 12, 10, 0.72);
  border: 1px solid rgba(159, 176, 166, 0.28);
  border-radius: 999px;
  padding: 7px 15px;
  backdrop-filter: blur(6px);
}

/* ---- El aviso de scroll, que se apaga en cuanto alguien scrollea ---------- */

#pista {
  position: absolute;
  left: 50%;
  bottom: 5vmin;
  transform: translateX(-50%);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* ---- Sin movimiento: la escena sigue contando lo mismo, quieta ------------ */

@media (prefers-reduced-motion: reduce) {
  #escenario { height: auto; min-height: 100lvh }
  #pista { display: none }
}

/* ---- Lo que sigue: la transición entre la escena y el resto de la página ---- */

#siguiente {
  position: relative;
  min-height: 92svh;
  display: grid;
  place-content: center;
  gap: 1.2vmin;
  text-align: center;
  padding: 14vmin 8vw calc(14vmin + env(safe-area-inset-bottom, 0px));
  /* ⚠️ Arranca EXACTAMENTE en el color del escenario y se aclara hacia abajo.
     Si empezara en otro tono, la costura se vería como un corte; así el pin se
     suelta sobre el mismo negro que ya estaba y la transición no tiene borde. */
  background: linear-gradient(180deg, var(--fondo) 0%, #0d1512 55%, #101a16 100%);
}

#siguiente .eyebrow {
  /* 18px de piso: un eyebrow es texto que se LEE, no chrome de interfaz. */
  font-size: clamp(18px, 2.4vmin, 22px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

#siguiente h2 {
  font-size: clamp(32px, 6.4vmin, 68px);
  font-weight: 200;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

#siguiente .pie {
  margin-top: 1.6vmin;
  font-size: clamp(15px, 2.1vmin, 19px);
  line-height: 1.55;
  color: var(--tinta-tenue);
}