/* IMARA Group — primera pantalla de Inicio con efecto cinematográfico al bajar (reemplaza al video, a pedido de Robin el 21-oct-2026).
   Versión del 22-oct-2026 (ronda 3): ahora tiene DOS FASES al bajar.
   FASE A (variable --a, de 0 a 1): al cargar se ve el cielo con nubes, la mitad de abajo del edificio y una frase de bienvenida (titulo + subtítulo, en textos/es.js → portada).
     Al bajar, el edificio sube y la frase se esconde detrás y se desvanece (--txt); cuando ya no está, el contorno del logo se va trazando de izquierda
     a derecha (--trz) y luego se rellena de blanco (--fill); en ese momento la parte alta del edificio llega al borde superior de la pantalla.
   FASE B (variable --q, de 0 a 1): la animación de antes: las letras se absorben hacia el triángulo, el triángulo crece y es una ventana por la que
     se ve el edificio; por fuera suben las nubes y queda el cielo.
   Las piezas del logo salen del PNG original (contorno de las letras, contorno del triángulo, relleno sólido); no se dibuja nada nuevo.
   Para volver a la versión anterior: copiar escena.css, escena.js e index.html desde prototipo/_respaldo-ronda-3/.
   Para volver al video: en index.html, borrar esta hoja de estilos y js/escena.js, y restaurar el bloque que está en el comentario "VERSIÓN CON VIDEO". */

.escena {
  --p: 0;                                 /* avance total del scroll (0 a 1), lo calcula js/escena.js */
  --a: 0;                                 /* fase A: frase, edificio sube, se traza y rellena el logo */
  --q: 0;                                 /* fase B: la animación de antes (ventana del triángulo) */
  --s: 1;                                 /* escala actual del triángulo (crece de forma exponencial, la calcula el js) */
  --txt: 1;                               /* visibilidad de la frase (1 = visible, 0 = escondida) */
  --trz: 0;                               /* cuánto del contorno del logo ya se trazó (0 a 1) */
  --c: 0;                                 /* fase C: la niebla de nubes cubre la portada y se disuelve dejando ver el papel técnico */
  --mundo: 1;                             /* visibilidad de la portada (se va a 0 en la primera mitad de la fase C) */
  --niebla: 0;                            /* opacidad de la niebla (sube a 1 y vuelve a 0) */
  --fill: 0;                              /* cuánto se ha rellenado de blanco el logo (0 a 1) */
  --logo-w: clamp(330px, 56vw, 820px);    /* tamaño del logo */
  --cx: 45.03%; --cy: 46.06%;             /* centro del triángulo dentro del logo (donde crece) */
  --h-img: max(126svh, min(135svh, max(80svh, 170vw)));   /* alto de la foto del edificio (en celular nunca menor a 126svh para que, al subir, siga cubriendo la pantalla) */
  --techo-ini: 62svh;                     /* dónde está el techo del edificio al cargar (abajo de la mitad) */
  --sube: 58svh;                          /* cuánto sube el edificio en la fase A (el techo llega casi al borde de arriba) */
  --sube-q: 20svh;                        /* y cuánto sigue subiendo en la fase B (antes 60svh: ahora sube poco para que la ventana siga mostrando el edificio) */
  --y-edificio: calc(var(--techo-ini) - 0.127 * var(--h-img) - var(--a) * var(--sube) - var(--q) * var(--sube-q));   /* posición de la foto: igual afuera y dentro del logo */
  position: relative;
  height: 435svh;   /* (27-oct-2026) fase C más corta: menos espacio vacío al final */                         /* largo del recorrido: fase A (≈130svh) + fase B (160svh) + fase C (100svh) */
  background: transparent;
}

.escena__escenario {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  animation: aparecer 1800ms ease 200ms forwards;      /* entra desde el fondo, con un fundido */
}

.escena__cielo {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, #AEB6CC 0%, #CBCAD6 50%, var(--fondo) 100%);
}

/* Frase de bienvenida: texto oscuro sobre el cielo, entre las nubes; el edificio la tapa al subir */
.escena__texto {
  position: absolute; left: 50%; top: 40svh; width: min(92vw, 1000px);
  transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
  opacity: var(--txt);
}
.escena__titulo {
  margin: 0; font-size: clamp(40px, 7vw, 104px); font-weight: var(--w-titulo); line-height: 1.04; letter-spacing: -.01em; color: var(--tinta);
  text-wrap: balance;
}
.escena__subtitulo { margin: clamp(12px, 2.2vh, 24px) auto 0; max-width: 44ch; font-size: var(--t-sub); font-weight: var(--w-normal); line-height: 1.4; color: var(--tinta); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Nubes del comienzo: están detrás de la frase y suben y se desvanecen con la fase A */
.escena__nube--ini { transform: translate3d(-50%, calc(-34svh - var(--a) * 60svh), 0); opacity: clamp(0, calc(.95 - var(--a) * 1.4), 1); }

/* El edificio: la misma foto en dos capas, una "afuera" del triángulo (sube y se desvanece) y otra dentro (la ventana, sube más despacio) */
.escena__edificio, .escena__ventana { position: absolute; inset: 0; pointer-events: none; }
.escena__edificio img, .escena__ventana img {
  position: absolute; left: 50%; top: 0;
  height: var(--h-img); width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);   /* el cielo de la foto se funde con el cielo de fondo */
          mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
}
/* el techo (a 12,7 % del alto de la foto) empieza en --techo-ini, sube --sube en la fase A y sigue subiendo 60svh en la fase B */
.escena__edificio img, .escena__ventana img { transform: translate3d(-50%, var(--y-edificio), 0); }   /* MISMA foto y MISMO movimiento: el logo es una ventana por la que se ve el edificio de atrás (las nubes no pasan por la ventana) */
.escena__edificio { opacity: clamp(0, calc((0.92 - var(--q)) * 2.6), 1); }
.escena__ventana { opacity: clamp(0, calc(var(--q) * 1000), 1); }   /* la ventana solo existe en la fase B (antes la tapa el triángulo blanco; en la fase A no debe verse) */
/* La forma de la ventana (triángulo que crece) la pone js/escena.js con clip-path */

/* Nubes que suben (fase B) */
.escena__nube {
  position: absolute; left: 50%; top: 0;
  width: max(110vw, 1100px); height: 180svh; max-width: none;
  object-fit: cover; pointer-events: none;
}
.escena__nube--lejos { transform: translate3d(-50%, calc(100svh - var(--q) * 170svh), 0); opacity: .9; }
.escena__nube--cerca { transform: translate3d(-50%, calc(118svh - var(--q) * 215svh), 0); }

/* El logo: dos capas del mismo tamaño y posición (letras abajo, triángulo arriba de la ventana).
   Cada una trae el contorno (.escena__trazo, que se revela de izquierda a derecha como si se trazara) y el relleno blanco (.escena__relleno) */
.escena__logo-caja {
  position: absolute; left: 50%; top: 50%;
  width: var(--logo-w); aspect-ratio: 1600 / 584;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* sin sombra alrededor del logo (pedido de Robin, 21-oct-2026) */
}
.escena__logo-caja img { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: var(--cx) var(--cy); }
.escena__trazo {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--trz) * 120% - 10%), transparent calc(var(--trz) * 120% - 2%));
          mask-image: linear-gradient(90deg, #000 calc(var(--trz) * 120% - 10%), transparent calc(var(--trz) * 120% - 2%));
}
.escena__relleno { opacity: var(--fill); }
.escena__letras img { transform: scale(clamp(0, calc(1 - var(--q) * 2.4), 1)); }
.escena__letras .escena__trazo { opacity: clamp(0, calc(1 - var(--q) * 2.1), 1); }
.escena__letras .escena__relleno { opacity: calc(var(--fill) * clamp(0, calc(1 - var(--q) * 2.1), 1)); }
.escena__triangulo img { transform: scale(var(--s)); }
/* el triángulo es sólido (blanco) y se vuelve solo contorno al empezar la fase B: se ve el edificio por la ventana */
.escena__triangulo .escena__tri-solido { opacity: calc(var(--fill) * clamp(0, calc(1 - (var(--q) - 0.28) * 4.5), 1)); }   /* sólido hasta q = 0,28; transparente hacia q = 0,50 */

/* Mezcla suave con el fondo de la página al terminar */
.escena__piso {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--fondo));
  opacity: clamp(0, calc((var(--q) - 0.5) * 2.4), 1);
}

.escena__flecha-caja { position: absolute; inset: 0; pointer-events: none; opacity: clamp(0, calc(1 - var(--p) * 14), 1); }
.escena__flecha-caja .portada__flecha { pointer-events: auto; opacity: 0; animation: aparecer 1200ms ease 2600ms forwards; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .45)); }

/* Quien pide menos movimiento: sin recorrido largo, se queda la primera imagen con la frase */
@media (prefers-reduced-motion: reduce) {
  html:not(.ver-efectos) .escena { height: 100svh; }
  html:not(.ver-efectos) .escena__escenario { animation-duration: 1ms; animation-delay: 0s; }
}

/* ---------- Fase C (23-oct-2026): de la ventana del isotipo a las nubes y de las nubes al papel técnico ----------
   Todo lo de la portada vive en .escena__mundo y se desvanece (--mundo) mientras una niebla de nubes (--niebla) sube hasta cubrir la pantalla y luego se disuelve,
   dejando ver el fondo técnico (css/fondo.css) que está detrás. Las nubes suben con el scroll (más rápido que el fondo, que es más lento). */
.escena__mundo { position: absolute; inset: 0; opacity: var(--mundo); }
.escena__niebla { position: absolute; inset: 0; pointer-events: none; opacity: var(--niebla); background: #EFEEEC; }
.escena__niebla img {
  position: absolute; left: 50%; top: 0; width: max(150vw, 1500px); height: 190svh; max-width: none; object-fit: cover; opacity: .9;
  transform: translate3d(-50%, calc(40svh - var(--c) * 90svh), 0);
}
/* Frase de bienvenida DETRÁS del edificio (23-oct-2026): la capa ocupa toda la escena y se recorta con la silueta del edificio (img/edificio-silueta.png,
   sacada de la misma foto), colocada igual que la foto (misma altura --h-img, mismo --y-edificio). Donde está el edificio, el texto no se ve; no hay desvanecido. */
.escena__texto-capa {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, #000), url("../img/edificio-silueta.png");
          mask-image: linear-gradient(#000, #000), url("../img/edificio-silueta.png");
  -webkit-mask-size: 100% 100%, auto var(--h-img);
          mask-size: 100% 100%, auto var(--h-img);
  -webkit-mask-position: 0 0, 50% var(--y-edificio);
          mask-position: 0 0, 50% var(--y-edificio);
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
}