/* ============================================================
   IMAX — Hero cinematográfico a pantalla completa (integrado)
   Namespaced bajo .cine-hero para no chocar con styles.css
   ============================================================ */
.cine-hero{
  --accent:#7FD4F5; --accent-2:#A9D6E8; --hud:1;
  position:relative; width:100%; height:100vh; min-height:640px; overflow:hidden; isolation:isolate;
  margin-top:-98px;   /* sube la foto detrás del menú fijo (full-bleed) */
  background:#06121f; color:#fff;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.cine-hero .bg-wrap{ position:absolute; inset:0; z-index:0; will-change:transform; transition:transform .4s ease-out; }
.cine-hero .bg{ position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; object-position:72% 42%;
  animation:imxKen 26s ease-in-out infinite; }
@keyframes imxKen{ 0%,100%{ transform:scale(1.02); } 50%{ transform:scale(1.09); } }

.cine-hero .mesh{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.cine-hero .mesh i{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.cine-hero .mesh .m1{ width:46vw; height:46vw; left:-12vw; top:-10vw; background:radial-gradient(circle,rgba(31,78,121,.55),transparent 70%); }
.cine-hero .mesh .m2{ width:34vw; height:34vw; right:6vw; bottom:-8vw; background:radial-gradient(circle,rgba(127,212,245,.30),transparent 70%); }

.cine-hero .scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(98deg, rgba(6,18,31,.94) 0%, rgba(6,18,31,.78) 26%, rgba(8,26,46,.34) 48%, rgba(8,26,46,0) 70%),
    linear-gradient(0deg, rgba(6,18,31,.55) 0%, rgba(6,18,31,0) 32%); }

/* reveal escáner CT */
.cine-hero .veil{ position:absolute; inset:0; z-index:7; background:#0a1f38; opacity:0; pointer-events:none; }
.cine-hero .scanline{ position:absolute; top:0; bottom:0; left:-3%; width:2px; z-index:8; opacity:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--accent) 12%, #fff 50%, var(--accent) 88%, transparent);
  box-shadow:0 0 40px 10px rgba(127,212,245,.7), 0 0 120px 30px rgba(127,212,245,.35); }
.cine-hero.intro .veil{ animation:imxReveal .7s cubic-bezier(.76,0,.24,1) 0s 1 both; }
.cine-hero.intro .scanline{ animation:imxSweep .7s cubic-bezier(.76,0,.24,1) 0s 1 both; }
@keyframes imxReveal{ 0%{ clip-path:inset(0 0 0 0); opacity:.28; } 99%{ opacity:.28; } 100%{ clip-path:inset(0 0 0 100%); opacity:0; } }
@keyframes imxSweep{ 0%{ left:-3%; opacity:0; } 7%{ opacity:1; } 93%{ opacity:1; } 100%{ left:103%; opacity:0; } }

/* HUD */
.cine-hero .hud{ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:var(--hud); }
.cine-hero .corner{ position:absolute; width:48px; height:48px; border:2px solid rgba(169,214,232,.55); }
.cine-hero .corner.tl{ top:26px; left:26px; border-right:0; border-bottom:0; }
.cine-hero .corner.tr{ top:26px; right:26px; border-left:0; border-bottom:0; }
.cine-hero .corner.bl{ bottom:26px; left:26px; border-right:0; border-top:0; }
.cine-hero .corner.br{ bottom:26px; right:26px; border-left:0; border-top:0; }

.cine-hero .radar{ position:absolute; right:54px; top:50%; transform:translateY(-50%); width:230px; height:230px; }
.cine-hero .radar .ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(169,214,232,.30); }
.cine-hero .radar .ring.r2{ inset:30px; } .cine-hero .radar .ring.r3{ inset:64px; border-color:rgba(169,214,232,.45); }
.cine-hero .radar .cross{ position:absolute; background:rgba(169,214,232,.25); }
.cine-hero .radar .cross.h{ left:0; right:0; top:50%; height:1px; } .cine-hero .radar .cross.v{ top:0; bottom:0; left:50%; width:1px; }
.cine-hero .radar .sweep{ position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(127,212,245,.5), rgba(127,212,245,0) 80deg, transparent 360deg);
  animation:imxSpin 3.4s linear infinite; }
@keyframes imxSpin{ to{ transform:rotate(360deg); } }
.cine-hero .radar .blip{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent);
  left:62%; top:38%; animation:imxBlip 3.4s ease-in-out infinite; }
@keyframes imxBlip{ 0%,18%,100%{opacity:0; transform:scale(.6);} 8%{opacity:1; transform:scale(1);} }

.cine-hero .reticle{ position:absolute; width:14px; height:14px; }
.cine-hero .reticle::before{ content:""; position:absolute; inset:0; border:2px solid var(--accent); border-radius:50%; box-shadow:0 0 12px var(--accent); }
.cine-hero .reticle::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px; border-radius:50%; background:#fff; }
.cine-hero .reticle .ping{ position:absolute; inset:-6px; border:1px solid var(--accent); border-radius:50%; animation:imxPing 2.6s ease-out infinite; }
@keyframes imxPing{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(2.4); opacity:0; } }
.cine-hero .reticle .tag{ position:absolute; left:22px; top:-8px; white-space:nowrap;
  font-size:11px; font-weight:700; letter-spacing:.6px; color:#EAF8FF; text-transform:uppercase;
  background:rgba(10,31,56,.55); border:1px solid rgba(169,214,232,.35); border-radius:999px; padding:4px 10px; backdrop-filter:blur(6px); }
.cine-hero .reticle .tag b{ color:var(--accent); }
.cine-hero .rt1{ left:60%; top:32%; } .cine-hero .rt2{ left:75.5%; top:52%; } .cine-hero .rt3{ left:43%; top:60%; }

.cine-hero .dust{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.cine-hero .dust span{ position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:rgba(169,214,232,.7); box-shadow:0 0 8px rgba(169,214,232,.6); animation:imxRise linear infinite; }
@keyframes imxRise{ to{ transform:translateY(-105vh); opacity:0; } }

/* nav: píldora flotante de vidrio (sólida al hacer scroll) */
.cine-nav{ position:fixed; z-index:60; top:20px; left:50%; transform:translateX(-50%);
  width:min(1200px, calc(100% - 48px)); height:66px; display:flex; align-items:center; gap:18px;
  padding:0 12px 0 16px; border-radius:20px;
  background:rgba(9,27,46,.36); backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px);
  border:1px solid rgba(255,255,255,.16); box-shadow:0 16px 44px rgba(6,18,31,.30);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease, top .3s ease, height .3s ease; }
.cine-nav .brand{ display:inline-flex; align-items:center; background:#fff; padding:6px 11px; border-radius:11px; box-shadow:0 4px 14px rgba(6,18,31,.18); }
.cine-nav .brand img{ height:30px; width:auto; display:block; }
.cine-nav .links{ display:flex; gap:4px; margin-left:auto; list-style:none; padding:0; }
.cine-nav .links a{ padding:9px 15px; border-radius:999px; font-size:14px; font-weight:600; color:rgba(255,255,255,.88); transition:background .15s, color .15s; }
.cine-nav .links a:hover, .cine-nav .links a.active{ background:rgba(255,255,255,.18); color:#fff; }
.cine-nav .cta{ display:inline-flex; align-items:center; height:42px; padding:0 20px; border-radius:999px;
  background:var(--accent); color:#062033; font-weight:800; font-size:14px; box-shadow:0 8px 24px rgba(127,212,245,.4); transition:transform .16s, box-shadow .16s; }
.cine-nav .cta:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(127,212,245,.55); }
.cine-nav.solid{ top:14px; height:62px; background:rgba(255,255,255,.92); backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-color:rgba(31,78,121,.08); box-shadow:0 12px 30px rgba(31,78,121,.12); }
.cine-nav.solid .links a{ color:#34414B; }
.cine-nav.solid .links a:hover, .cine-nav.solid .links a.active{ background:#EEF7FB; color:#1F4E79; }
.cine-nav.solid .brand{ box-shadow:inset 0 0 0 1px rgba(31,78,121,.08); }
.cine-nav.solid .cta{ background:#1F4E79; color:#fff; box-shadow:0 10px 22px rgba(31,78,121,.22); }

.cine-stage{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  padding-top:calc(98px + 3vh); padding-bottom:clamp(28px,5vh,54px);
  padding-inline:max(40px, calc((100% - 1280px)/2 + 40px)); }
.cine-content{ width:100%; max-width:720px; margin-top:auto; }
.cine-eyebrow{ display:inline-flex; align-items:center; gap:10px; height:36px; padding:0 16px 0 14px; border-radius:999px;
  background:rgba(169,214,232,.12); border:1px solid rgba(169,214,232,.32); backdrop-filter:blur(8px);
  font-size:12.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:#DCEEF8; }
.cine-eyebrow .live{ position:relative; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.cine-eyebrow .live::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent); animation:imxPing 2s ease-out infinite; }
.cine-title{ margin:20px 0 0; max-width:720px; font-size:clamp(34px, 4.6vw, 68px); line-height:1.08; font-weight:900; letter-spacing:-1.8px; text-shadow:0 2px 40px rgba(6,18,31,.45); text-wrap:balance; }
.cine-title .word{ display:inline-block; padding-bottom:.08em; margin-bottom:-.08em; }
.cine-title .grad{ background:linear-gradient(100deg,#fff 20%, var(--accent-2) 60%, var(--accent) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cine-lead{ margin:18px 0 0; font-size:clamp(16px,1.4vw,20px); line-height:1.5; color:rgba(233,244,250,.9); max-width:500px; }
.cine-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.cine-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:54px; padding:0 30px; border-radius:999px;
  font-size:15px; font-weight:800; cursor:pointer; border:0; text-decoration:none; transition:transform .16s, box-shadow .16s, background .16s; }
.cine-btn-primary{ background:var(--accent); color:#062033; box-shadow:0 12px 34px rgba(127,212,245,.42); }
.cine-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(127,212,245,.58); }
.cine-btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(8px); }
.cine-btn-ghost:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

.cine-chips{ width:100%; margin-top:auto; z-index:6; display:flex; gap:14px; flex-wrap:wrap; }
.cine-chip{ flex:1; min-width:170px; display:flex; align-items:center; gap:14px; padding:16px 20px; border-radius:18px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(12px); box-shadow:0 18px 40px rgba(6,18,31,.25); }
.cine-chip .n{ font-size:22px; font-weight:900; letter-spacing:-.5px; color:#fff; }
.cine-chip .l{ font-size:12.5px; line-height:1.35; color:rgba(220,238,248,.78); }
.cine-chip .bar{ width:3px; align-self:stretch; border-radius:3px; background:linear-gradient(180deg,var(--accent),rgba(127,212,245,.2)); }

/* entradas */
.cine-hero.intro .cine-eyebrow{ animation:imxUp .45s ease .08s both; }
.cine-hero.intro .cine-title .word{ animation:imxWordIn .5s cubic-bezier(.2,.7,.2,1) both; }
.cine-hero.intro .cine-title .word:nth-child(1){ animation-delay:.12s; }
.cine-hero.intro .cine-title .word:nth-child(2){ animation-delay:.17s; }
.cine-hero.intro .cine-title .word:nth-child(3){ animation-delay:.22s; }
.cine-hero.intro .cine-title .word:nth-child(4){ animation-delay:.27s; }
.cine-hero.intro .cine-lead{ animation:imxUp .45s ease .32s both; }
.cine-hero.intro .cine-actions{ animation:imxUp .45s ease .4s both; }
.cine-hero.intro .hud{ animation:imxFade .5s ease .18s both; }
.cine-hero.intro .cine-chip{ animation:imxUp .45s ease both; }
.cine-hero.intro .cine-chip:nth-child(1){ animation-delay:.46s; }
.cine-hero.intro .cine-chip:nth-child(2){ animation-delay:.51s; }
.cine-hero.intro .cine-chip:nth-child(3){ animation-delay:.56s; }
.cine-hero.intro .cine-chip:nth-child(4){ animation-delay:.61s; }
@keyframes imxWordIn{ from{ opacity:0; transform:translateY(28px); filter:blur(10px); } }
@keyframes imxUp{ from{ opacity:0; transform:translateY(20px); } }
@keyframes imxFade{ from{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .cine-hero .bg,.cine-hero .radar .sweep,.cine-hero .radar .blip,.cine-hero .reticle .ping,.cine-hero .dust span,.cine-eyebrow .live::after{ animation:none !important; }
  .cine-hero.intro *{ animation:none !important; }
  .cine-hero .veil,.cine-hero .scanline{ display:none !important; }
}
@media (max-width:900px){
  .cine-nav{ top:12px; width:calc(100% - 24px); height:58px; padding:0 8px 0 12px; gap:10px; } .cine-nav.solid{ top:8px; height:54px; } .cine-nav .links{ display:none; }
  .cine-stage{ padding-inline:20px; padding-bottom:24px; }
  .cine-content{ max-width:none; }
  .cine-hero .radar{ display:none; }
  .cine-chip{ min-width:calc(50% - 5px); flex:0 0 calc(50% - 5px); padding:12px 14px; }
  .cine-chip .l{ display:none; } .cine-chip .n{ font-size:18px; }
  .cine-hero .reticle .tag{ display:none; }
}