/* =========================================================
   PORTADA CINEMÁTICA — GRUPO INVIERTO
   La sección es alta (varias pantallas) y la escena queda
   "pegada" arriba mientras se hace scroll. js/cinematica.js
   dibuja el cuadro del video y actualiza estas variables:
     --c   progreso total (0 → 1)
     --v   visibilidad de cada frase (en cada <p>)
     --t   armado del título "GRUPO INVIERTO"
     --b   aparición de la bajada y el buscador
   ========================================================= */

.cine { position: relative; height: 520vh; background: #3d7fc0; color: #fff; }
.cine__escena { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; background: #3d7fc0; }
/* En celular la barra del navegador aparece y desaparece al hacer scroll.
   La escena usa la altura MÁXIMA de la pantalla (lvh) para que nunca quede
   una franja abajo; lo que va pegado abajo sube lo que ocupa esa barra (--barra). */
@supports (height: 100lvh) {
  .cine { --barra: calc(100lvh - 100svh); }
  .cine__escena { height: 100lvh; }
}

.cine__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Último cuadro del video: solo se usa en el modo sin animación */
.cine__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }

/* Sombra suave arriba (encabezado y frases) y abajo; se oscurece al final para leer el título */
.cine__velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,20,38,.42) 0%, rgba(8,20,38,.12) 32%, rgba(8,20,38,0) 50%),
    linear-gradient(180deg, rgba(10,11,13,0) 35%, rgba(6,5,75,calc(var(--t, 0) * .82)) 100%),
    rgba(6,5,75, calc(var(--t, 0) * .28));
}

/* ---------- Frases durante el recorrido: sobre el cielo, arriba ---------- */
.cine__frases { position: absolute; inset: 0; display: grid; align-items: start; padding-top: calc(110px + 6vh); pointer-events: none; }
.cine__frase {
  grid-area: 1 / 1; max-width: 14ch;
  font-family: var(--fuente-titulo); font-size: clamp(36px, 5.8vw, 84px); font-weight: 600; line-height: 1.02; letter-spacing: -.025em;
  text-wrap: balance; text-shadow: 0 2px 24px rgba(8,20,38,.45), 0 0 2px rgba(8,20,38,.3);
  opacity: var(--v, 0);
  transform: translateY(calc((1 - var(--v, 0)) * 36px));
  /* Sin desenfoque (blur): en iPhone dejaba una línea morada sobre el texto */
}
.cine__frase em { color: #fff; }
.cine__frase--intro .etiqueta { display: block; font-family: var(--fuente-texto); letter-spacing: .12em; margin-bottom: 18px; opacity: .95; }

/* ---------- Final: título, bajada y buscador ---------- */
.cine__final { position: absolute; left: 0; right: 0; bottom: calc(clamp(36px, 8vh, 90px) + var(--barra, 0px)); pointer-events: none; }
.cine--final .cine__final { pointer-events: auto; }
/* Final: el logo real se arma. Primero aparecen las letras y después
   la flecha sube en diagonal (crecimiento), como en el símbolo de la marca. */
.cine__titulo { margin: 0; line-height: 0; }
.cine__logo { display: block; width: clamp(280px, 58vw, 820px); height: auto; overflow: visible; filter: drop-shadow(0 6px 40px rgba(6,5,75,.35)); }
.cine__logo-letras {
  --l: clamp(0, calc(var(--t, 0) * 1.6), 1);
  opacity: var(--l);
  transform: translateY(calc((1 - var(--l)) * 24px));
}
.cine__logo-flecha {
  --f: clamp(0, calc(var(--t, 0) * 2.2 - 1.2), 1);
  opacity: var(--f);
  transform: translate(calc((1 - var(--f)) * -36px), calc((1 - var(--f)) * 36px));
}
.cine__bajada {
  margin-top: 22px; max-width: 46ch; font-size: clamp(16px, 1.6vw, 20px); opacity: calc(var(--b, 0) * .92);
  transform: translateY(calc((1 - var(--b, 0)) * 20px));
}
.cine .buscador { animation: none; opacity: var(--b, 0); transform: translateY(calc((1 - var(--b, 0)) * 30px)); }

/* ---------- Guía, saltar y progreso ---------- */
.cine__guia {
  position: absolute; left: 50%; bottom: calc(26px + var(--barra, 0px)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 1px 10px rgba(8,20,38,.5);
  opacity: clamp(0, calc(1 - var(--c, 0) * 20), 1); pointer-events: none;
}
.cine__raton { position: relative; width: 24px; height: 38px; border: 1.5px solid rgba(255,255,255,.75); border-radius: 14px; }
.cine__raton span { position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: #fff; animation: cine-raton 1.8s infinite; }
@keyframes cine-raton { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { opacity: 0; } }

.cine__saltar {
  position: absolute; right: var(--margen-lateral); bottom: calc(22px + var(--barra, 0px)); z-index: 2;
  padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(8,20,38,.28); color: #fff; font-size: 13px; font-weight: 600;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: clamp(0, calc(1 - var(--b, 0) * 3), 1); transition: background .2s;
}
.cine__saltar:hover { background: rgba(8,20,38,.45); }
.cine--final .cine__saltar { pointer-events: none; }
.cine__progreso { position: absolute; left: 0; right: 0; bottom: var(--barra, 0px); height: 2px; background: rgba(255,255,255,.18); }
.cine__progreso span { display: block; height: 100%; background: var(--color-menta); transform: scaleX(0); transform-origin: left; }

/* ---------- Sin animación: último cuadro + título + buscador ---------- */
.cine.cine--estatica { height: auto; }
.cine--estatica .cine__escena { position: relative; height: auto; min-height: 100svh; }
.cine--estatica { --barra: 0px; }
.cine--estatica .cine__foto { display: block; }
.cine--estatica .cine__lienzo, .cine--estatica .cine__frases,
.cine--estatica .cine__guia, .cine--estatica .cine__saltar, .cine--estatica .cine__progreso { display: none; }

/* Mientras corre la película, los botones flotantes se esconden */
.flotantes { transition: opacity .4s, transform .4s var(--transicion); }
body.en-cine .flotantes { opacity: 0; pointer-events: none; transform: translateY(16px); }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .cine { height: 440vh; }
  .cine__frases { padding-top: 104px; }
  .cine__frase { font-size: clamp(32px, 9.5vw, 48px); }
  .cine__logo { width: min(86vw, 420px); }
  .cine__final { bottom: calc(90px + env(safe-area-inset-bottom, 0px) + var(--barra, 0px)); }  /* deja libre el botón de WhatsApp */
  .cine__saltar { bottom: calc(18px + var(--barra, 0px)); }
  .cine__guia { bottom: calc(70px + var(--barra, 0px)); }
}