/* ============================================================
   TORVEX — Home cinematica
   Video de desarme como FONDO FIJO. El scroll desarma la maquina.
   Las secciones flotan por encima como paneles de vidrio.
   (Solo aplica a index.html via body.home-cine)
   ============================================================ */

/* El grid sutil del body sobra aqui: el fondo es el video */
.home-cine::before { display: none !important; }
.home-cine { background: #06080d; }

/* ---- Escenario fijo del video ---- */
.bg-stage {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: #06080d;
}
.bg-stage__canvas, .bg-stage__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.bg-stage__canvas { z-index: 1; }
.bg-stage__poster { z-index: 0; }
.bg-stage__canvas.is-ready ~ .bg-stage__poster { opacity: 0; }

/* Scrim global: contraste para el texto sin tapar la maquina.
   Vinieta + leve oscurecido para legibilidad en cualquier scroll. */
.bg-stage__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(6,8,13,.55) 100%),
    linear-gradient(180deg, rgba(6,8,13,.45) 0%, rgba(6,8,13,.20) 18%, rgba(6,8,13,.20) 82%, rgba(6,8,13,.55) 100%);
}

/* El contenido va por encima del fondo */
.home-cine main { position: relative; z-index: 1; }

/* ---- Hero cinematico (texto sobre el video, primer pantallazo) ---- */
.hero-c {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center;
  padding: clamp(7rem, 12vh, 10rem) var(--pad) 4rem;
  position: relative;
}
.hero-c__content { max-width: var(--max); width: 100%; margin: 0 auto; }
.hero-c__title {
  font-family: var(--font-head); font-weight: 900; font-size: var(--hero);
  line-height: .92; letter-spacing: -.035em; color: var(--white);
  margin: 1.2rem 0 1.6rem; text-shadow: 0 6px 50px rgba(0,0,0,.7);
}
.hero-c__title .accent { color: var(--accent-2); }
.hero-c__lede { font-size: var(--lede); color: #d2d7e0; max-width: 42ch; margin-bottom: 1rem; text-shadow: 0 2px 24px rgba(0,0,0,.8); }
.hero-c__tagline { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: #fff; margin-bottom: 2rem; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.hero-c__tagline::before { content: "// "; color: var(--accent-2); }
.hero-c__hint {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .03em;
  color: #cdd3dc; background: rgba(12,16,24,.55); backdrop-filter: blur(8px);
  border: 1px solid var(--border); padding: .5rem 1rem; border-radius: 100px;
  transition: opacity .4s var(--ease);
}
.hero-c__hint svg { animation: nudgeY 1.6s ease-in-out infinite; }
@keyframes nudgeY { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(4px);} }
.home-cine.scrolled .hero-c__hint { opacity: 0; }

/* ============================================================
   Secciones flotando: fondo transparente, tarjetas de vidrio
   ============================================================ */

/* Las secciones del home pierden su fondo solido para dejar ver el video */
.home-cine .rigor,
.home-cine .serv,
.home-cine .casos,
.home-cine .cta { background: transparent !important; }

/* Damos a cada bloque de seccion un respiro de glass detras del encabezado */
.home-cine .section__title,
.home-cine .section__sub { text-shadow: 0 2px 24px rgba(0,0,0,.7); }

/* Tarjetas: glassmorphism con profundidad real */
.home-cine .explode__item,
.home-cine .card,
.home-cine .caso {
  background: rgba(13, 17, 25, .55) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.8);
}
.home-cine .caso--feat {
  background: linear-gradient(160deg, rgba(20,35,63,.72), rgba(10,15,28,.6)) !important;
}

/* CTA: panel de vidrio mas marcado */
.home-cine .cta__inner {
  background: rgba(13, 17, 25, .6) !important;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-color: rgba(59,130,246,.3) !important;
  box-shadow: 0 24px 70px -24px rgba(0,0,0,.85);
}

/* Footer solido al final (cierra la pagina, el video queda detras arriba) */
.home-cine .foot {
  position: relative; z-index: 1;
  background: rgba(6, 8, 13, .92);
  backdrop-filter: blur(10px);
}

/* Barra de progreso del desarme (fina, arriba) */
.bg-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: 101; box-shadow: 0 0 12px var(--accent-glow);
  transition: width .1s linear;
}

/* Reduce motion: fondo fijo a media maquina, sin scrub */
@media (prefers-reduced-motion: reduce) {
  .hero-c__hint svg { animation: none; }
}

@media (max-width: 720px) {
  .bg-stage__scrim {
    background:
      linear-gradient(180deg, rgba(6,8,13,.55) 0%, rgba(6,8,13,.35) 30%, rgba(6,8,13,.45) 70%, rgba(6,8,13,.7) 100%);
  }
  .hero-c__lede { max-width: 100%; }
}