/* pelicula.css — la mitad superior: grain, letterbox, nav, actos sticky.
   Portado del teaser demo-d validado por Jordi; las fuentes vienen de base.css. */

/* ---------- grain + viñeta de cine (overlays fijos) ---------- */
.grain{position:fixed;inset:-60px;pointer-events:none;z-index:60;opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grano .42s steps(3) infinite}
@keyframes grano{0%{transform:translate(0,0)}33%{transform:translate(-28px,16px)}66%{transform:translate(18px,-24px)}100%{transform:translate(0,0)}}
.vineta{position:fixed;inset:0;pointer-events:none;z-index:55;background:radial-gradient(115% 90% at 50% 45%,transparent 60%,rgba(4,7,11,.55) 100%)}

/* ---------- letterbox ---------- */
.barra{position:fixed;left:0;right:0;height:11vh;background:#05080C;z-index:65}
.barra.top{top:0;transform:translateY(calc(var(--abre,0) * -100%))}
.barra.bot{bottom:0;transform:translateY(calc(var(--abre,0) * 100%))}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;gap:18px;padding:14px 28px;
  background:linear-gradient(180deg,rgba(5,8,12,.82),rgba(5,8,12,.35) 75%,transparent);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.nav .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--mono);font-size:.78rem;letter-spacing:.22em}
.nav .brand img{width:26px;height:26px}
.nav a.enlace{color:#fffc;text-decoration:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.nav a.enlace:hover{color:#fff}
.nav .cta{color:#fff;text-decoration:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;border:1px solid #fff8;padding:.6em 1.2em;border-radius:999px}
.nav .cta:hover{border-color:var(--verde);color:var(--verde)}
@media(max-width:760px){.nav a.enlace{display:none}}

/* ---------- acceso (portal + demo) ---------- */
.acceso{position:relative;margin-left:auto}
.acceso summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6em;color:#fff;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;border:1px solid #ffffff42;background:rgba(13,20,31,.6);padding:.6em 1.2em;border-radius:999px}
.acceso summary::-webkit-details-marker{display:none}
.acceso summary::marker{content:""}
.acceso summary::after{content:"▾";font-size:.8em;transition:transform .15s ease}
.acceso[open] summary::after{transform:rotate(180deg)}
.acceso summary:hover,.acceso[open] summary{border-color:var(--verde)}
.acceso svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.acceso-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:280px;background:#0D141F;border:1px solid #ffffff1f;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:flex;flex-direction:column;gap:2px}
.acceso-menu a{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--blanco)}
.acceso-menu a:hover{background:rgba(111,181,90,.1)}
.acceso-menu svg{width:20px;height:20px;stroke:var(--verde)}
.acceso-menu b{display:block;font-size:.92rem;font-weight:600}
.acceso-menu small{font-size:.78rem;color:#8fa5c4}
@media(max-width:760px){.acceso-menu{min-width:250px}}
.salta{position:absolute;left:-9999px}
.salta:focus{position:fixed;top:12px;left:12px;z-index:99;background:var(--verde);color:#05080C;padding:.6em 1em;border-radius:8px;text-decoration:none;font-weight:600}

/* ---------- actos ---------- */
.acto{position:relative}
.pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.foto{position:absolute;inset:0;will-change:transform;transform:scale(calc(1.06 + var(--p,0) * .09))}
.foto picture,.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-noche img{object-position:center bottom}
.tinte{position:absolute;inset:0}
.centro{position:relative;z-index:5;text-align:center;padding:0 24px;max-width:1100px;width:100%}
.meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.34em;color:#fffc;text-transform:uppercase;display:inline-flex;align-items:center;gap:.9em}
.meta::before,.meta::after{content:"";width:34px;height:1px;background:#fff7;display:inline-block}
.titulo{font-family:var(--display);text-transform:uppercase;line-height:.95;letter-spacing:-.01em;margin:26px 0 20px;font-size:clamp(2.3rem,7.2vw,6.2rem);text-shadow:0 4px 40px rgba(0,0,0,.45)}
.titulo .v{color:var(--verde)}
.sub{font-size:clamp(.98rem,1.6vw,1.2rem);color:#fffd;max-width:36em;margin:0 auto;line-height:1.6;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hint{position:absolute;bottom:13vh;left:50%;transform:translateX(-50%);z-index:6;font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;color:#fffa;display:flex;flex-direction:column;align-items:center;gap:8px}
.hint::after{content:"";width:1px;height:44px;background:linear-gradient(#fff,transparent);animation:cae 1.6s ease-in-out infinite}
@keyframes cae{0%{transform:scaleY(.2);transform-origin:top}60%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}
.paso{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .5s ease}
.paso.on{opacity:1;transform:none}

/* ---------- acto II · la llamada ---------- */
.hora{font-family:var(--display);font-size:clamp(4rem,13vw,11rem);line-height:1;color:var(--ambar);letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 70px rgba(243,165,42,.35);transition:color .5s ease,text-shadow .5s ease}
[data-fase="azul"] .hora{color:var(--azul);text-shadow:0 0 70px rgba(106,160,255,.35)}
[data-fase="verde"] .hora{color:var(--verde);text-shadow:0 0 70px rgba(111,181,90,.35)}
.glass{margin:30px auto 0;max-width:520px;text-align:left;background:rgba(10,14,20,.5);border:1px solid #ffffff2b;border-radius:18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:20px 22px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.glass .fila{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid #ffffff14;opacity:.35;transition:opacity .4s ease}
.glass .fila:last-child{border-bottom:none}
.glass .fila time{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:#fffa;white-space:nowrap}
.glass .fila p{font-size:.92rem;line-height:1.5;color:#fffd}
.glass .fila .st{width:9px;height:9px;border-radius:50%;flex:none;align-self:center}
.f1 .st{background:var(--ambar)} .f2 .st{background:var(--azul)} .f3 .st{background:var(--verde)}
[data-fase="ambar"] .f1{opacity:1}
[data-fase="azul"] .f1,[data-fase="azul"] .f2{opacity:1}
[data-fase="verde"] .fila{opacity:1}
.guardia3d{position:absolute;left:3%;bottom:0;height:52vh;width:auto;z-index:6;filter:drop-shadow(0 22px 44px rgba(0,0,0,.55));pointer-events:none}
@media(max-width:880px){.guardia3d{height:24vh;left:auto;right:2%}}

/* ---------- acto III · la cartera ---------- */
.kpi-cine{font-family:var(--display);font-size:clamp(3rem,10vw,8.5rem);line-height:.95;text-transform:uppercase;margin-top:30px}
.kpi-cine b{color:var(--verde);font-variant-numeric:tabular-nums}
.kpi-cine small{display:block;font-size:clamp(1.5rem,4vw,3.2rem);letter-spacing:.04em}

/* ---------- acto IV · la promesa (shader) ---------- */
#lienzo{position:absolute;inset:0;width:100%;height:100%}
.carga3d{height:clamp(220px,42vh,400px);width:auto;margin:0 auto 20px;filter:drop-shadow(0 26px 50px rgba(0,0,0,.6)) drop-shadow(0 0 70px rgba(111,181,90,.28))}
.promesa h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,5.6vw,4.6rem);line-height:1.02}
.promesa h2 .v{color:var(--verde)}
.promesa p{margin-top:18px}

@media(max-width:640px){
  .glass{max-width:100%}
  .nav .cta{display:none}
  .hint{bottom:15vh}
  .centro{width:100%}
  .kpi-cine{font-size:clamp(1.9rem,8.6vw,2.8rem)}
  .kpi-cine small{font-size:clamp(1.1rem,5.4vw,1.7rem)}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .grain{display:none}
  .barra{display:none}
  .foto{transform:none}
  .paso{opacity:1;transform:none}
  .glass .fila{opacity:1}
  .acto{height:auto !important}
  .pin{position:relative;height:100vh}
  .guardia3d{position:absolute}
}