/* ============================================================================
   PYV — Cinematic hero "El minuto cero"
   Overlay de actos que se monta sobre el escenario isométrico (.scope).
   Acto 1: diorama (scene.js) · Actos 2-6: beats de beneficio, contraste, tagline
   ========================================================================== */

.scope{ container-type:inline-size; }

/* contenedor overlay */
.cinema-overlay{
  position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;
  border-radius:inherit;font-family:var(--sans);
}

/* viñeta cinematográfica + backdrop que atenúa el diorama en los actos 2+ */
.cine-backdrop{
  position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);
  background:
    radial-gradient(120% 90% at 50% 0,rgba(255,77,18,.10),transparent 60%),
    linear-gradient(180deg,#0a0d12 0%,#070a0f 100%);
}
.cine-vignette{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 120px 18px rgba(0,0,0,.6);
  background:radial-gradient(130% 100% at 50% 46%,transparent 58%,rgba(0,0,0,.5) 100%);
  opacity:.7;
}
/* barras letterbox */
.cine-bar{position:absolute;left:0;right:0;height:6.5%;background:#04060a;z-index:3;transition:transform .6s var(--ease)}
.cine-bar.top{top:0;transform:translateY(-100%)}
.cine-bar.bot{bottom:0;transform:translateY(100%)}
.scope[data-cine="beats"] .cine-bar,
.scope[data-cine="contrast"] .cine-bar,
.scope[data-cine="tagline"] .cine-bar{transform:translateY(0)}

/* progreso de actos (puntitos) */
.cine-dots{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);display:flex;gap:7px;z-index:6;
  opacity:0;transition:opacity .5s}
.scope[data-cine="beats"] .cine-dots,
.scope[data-cine="contrast"] .cine-dots,
.scope[data-cine="tagline"] .cine-dots{opacity:1}
.cine-dots i{width:5px;height:5px;border-radius:99px;background:rgba(255,255,255,.22);transition:.3s}
.cine-dots i.on{background:var(--ember);width:16px}

/* ── capa de beat genérica ─────────────────────────────────────────────── */
.cine-layer{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:5cqw;padding:11cqw 9cqw;opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility .55s;
  z-index:4;
}
.cine-layer.on{opacity:1;visibility:visible}

/* viñeta (ilustración) del beat */
.cine-vis{display:flex;align-items:center;justify-content:center;min-height:30cqw;
  transform:translateY(14px) scale(.96);opacity:0;transition:opacity .6s .1s var(--ease),transform .6s .1s var(--ease)}
.cine-layer.on .cine-vis{transform:none;opacity:1}

/* texto del beat */
.cine-cap{position:relative}
.cine-kicker{font-family:var(--mono);font-size:3cqw;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ember-2);margin-bottom:2.4cqw;display:flex;align-items:center;gap:2.4cqw;
  transform:translateY(16px);opacity:0;transition:opacity .5s .18s var(--ease),transform .5s .18s var(--ease)}
.cine-kicker::before{content:"";width:7cqw;height:1px;background:var(--ember)}
.cine-headline{font-size:6.4cqw;line-height:1.08;font-weight:600;letter-spacing:-.02em;color:#fff;
  text-wrap:balance;transform:translateY(22px);opacity:0;
  transition:opacity .55s .26s var(--ease),transform .55s .26s var(--ease)}
.cine-headline em{font-style:normal;color:var(--ember-2)}
.cine-layer.on .cine-kicker,.cine-layer.on .cine-headline{transform:none;opacity:1}

/* ── viñeta B1: contacto líder de piso ─────────────────────────────────── */
.v-contact{width:62cqw;max-width:340px;border-radius:4cqw;padding:4.4cqw;
  background:linear-gradient(160deg,rgba(20,26,34,.96),rgba(11,14,19,.97));
  border:1px solid rgba(120,200,230,.28);box-shadow:0 18px 48px -16px rgba(0,0,0,.7)}
.v-contact .vc-row{display:flex;align-items:center;gap:3.4cqw}
.v-contact .vc-av{width:11cqw;height:11cqw;max-width:58px;max-height:58px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#2a3947,#16202b);border:1px solid rgba(120,200,230,.4);
  display:flex;align-items:center;justify-content:center;color:#9fd8ec;font-family:var(--mono);font-size:3.4cqw;position:relative}
.v-contact .vc-av::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--green);
  opacity:.0;animation:vcring 1.8s ease-out infinite}
.cine-layer.on .v-contact .vc-av::after{opacity:1}
@keyframes vcring{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.v-contact .vc-name{font-size:3.7cqw;font-weight:600;color:#fff}
.v-contact .vc-role{font-family:var(--mono);font-size:2.7cqw;color:var(--muted-2);margin-top:.6cqw;letter-spacing:.04em}
.v-contact .vc-call{margin-left:auto;width:9cqw;height:9cqw;max-width:46px;max-height:46px;border-radius:50%;
  background:var(--green);display:flex;align-items:center;justify-content:center;color:#04140c;flex-shrink:0}
.v-contact .vc-call svg{width:46%;height:46%}
.v-contact .vc-meta{margin-top:3.4cqw;display:flex;gap:2cqw;flex-wrap:wrap}
.v-contact .vc-chip{font-family:var(--mono);font-size:2.5cqw;color:#bfe7d6;background:rgba(39,192,138,.14);
  border:1px solid rgba(39,192,138,.3);border-radius:99px;padding:1cqw 2.4cqw}

/* ── viñeta B2: PMR (movilidad reducida) ───────────────────────────────── */
.v-pmr{display:flex;gap:4cqw}
.v-pmr .pmr-card{width:28cqw;max-width:160px;border-radius:3.4cqw;padding:3.8cqw;text-align:center;
  background:linear-gradient(160deg,rgba(20,26,34,.96),rgba(11,14,19,.97));
  border:1px solid rgba(91,140,255,.3);box-shadow:0 16px 40px -18px rgba(0,0,0,.7);position:relative}
.v-pmr .pmr-ic{width:13cqw;height:13cqw;max-width:64px;max-height:64px;margin:0 auto 2.6cqw;border-radius:50%;
  background:rgba(91,140,255,.12);border:1px solid rgba(91,140,255,.34);display:flex;align-items:center;justify-content:center;color:#9fb8ff}
.v-pmr .pmr-ic svg{width:54%;height:54%}
.v-pmr .pmr-loc{font-size:3.2cqw;font-weight:600;color:#fff}
.v-pmr .pmr-sub{font-family:var(--mono);font-size:2.5cqw;color:var(--muted-2);margin-top:.6cqw}
.v-pmr .pmr-pin{position:absolute;top:2.4cqw;right:2.4cqw;width:2.2cqw;height:2.2cqw;border-radius:50%;
  background:var(--ember);box-shadow:0 0 0 0 rgba(255,77,18,.5);animation:pmrpin 1.6s ease-out infinite}
@keyframes pmrpin{0%{box-shadow:0 0 0 0 rgba(255,77,18,.5)}100%{box-shadow:0 0 0 5cqw rgba(255,77,18,0)}}

/* ── viñeta B3: base de datos viva ─────────────────────────────────────── */
.v-db{width:64cqw;max-width:350px;border-radius:3.6cqw;overflow:hidden;
  background:linear-gradient(160deg,rgba(20,26,34,.96),rgba(11,14,19,.97));
  border:1px solid rgba(120,200,230,.26);box-shadow:0 18px 44px -18px rgba(0,0,0,.7)}
.v-db .db-head{display:flex;align-items:center;gap:2.4cqw;padding:3cqw 3.6cqw;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:2.7cqw;letter-spacing:.1em;color:#aef0fb}
.v-db .db-head .db-edit{margin-left:auto;color:var(--ember-2)}
.cine-layer.on .v-db .db-head .db-edit{animation:dbedit 2.4s ease-in-out infinite}
@keyframes dbedit{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(1px,-1px) rotate(-8deg)}70%{transform:translate(-1px,1px) rotate(6deg)}}
.v-db .db-row{display:flex;align-items:center;gap:3cqw;padding:3cqw 3.6cqw;font-size:3cqw}
.v-db .db-row + .db-row{border-top:1px solid var(--line)}
.v-db .db-unit{font-family:var(--mono);color:var(--muted-2);font-size:2.7cqw}
.v-db .db-old{color:var(--muted-2);margin-left:auto}
.cine-layer.on .v-db .db-old{animation:dbold .6s ease .5s forwards}
@keyframes dbold{to{color:var(--muted-3);text-decoration:line-through}}
.v-db .db-new{color:#fff;font-weight:600;margin-left:auto;position:relative;opacity:0;transform:translateY(6px)}
.cine-layer.on .v-db .db-new{animation:dbnew .5s ease 1s forwards}
@keyframes dbnew{to{opacity:1;transform:none}}
.v-db .db-status{display:flex;align-items:center;gap:2.4cqw;padding:2.6cqw 3.6cqw;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:2.5cqw;letter-spacing:.08em;color:#46e6a6;background:rgba(39,192,138,.08);
  opacity:0;transform:translateY(6px)}
.cine-layer.on .v-db .db-status{animation:dbnew .5s ease 1.5s forwards}
.v-db .db-status .db-dot{width:2cqw;height:2cqw;border-radius:50%;background:#34e29b;box-shadow:0 0 6px #34e29b}

/* ── viñeta B4: Ley 21.442 (papel X → sello check) ─────────────────────── */
.v-law{position:relative;width:46cqw;max-width:240px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.v-law .law-paper{position:absolute;width:60%;height:78%;border-radius:2cqw;background:linear-gradient(160deg,#d8cdb4,#b6a98c);
  transform:rotate(-7deg);box-shadow:0 14px 30px -12px rgba(0,0,0,.7);overflow:hidden}
.v-law .law-paper::before{content:"";position:absolute;inset:14% 12% auto 12%;height:5%;background:rgba(0,0,0,.18);
  box-shadow:0 180% 0 rgba(0,0,0,.14),0 360% 0 rgba(0,0,0,.14),0 540% 0 rgba(0,0,0,.1)}
.v-law .law-x{position:absolute;width:54%;height:54%;color:var(--red);opacity:0;transform:scale(1.4) rotate(-7deg);
  transition:opacity .4s,transform .4s}
.cine-layer.on .v-law .law-x{opacity:.0;animation:lawx 3s ease forwards}
@keyframes lawx{0%{opacity:0;transform:scale(1.5) rotate(-7deg)}18%{opacity:1;transform:scale(1) rotate(-7deg)}55%{opacity:1}70%{opacity:0;transform:scale(.6) rotate(-7deg)}100%{opacity:0}}
.v-law .law-seal{position:absolute;width:42%;height:42%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#34e29b,#138a5a);
  display:flex;align-items:center;justify-content:center;color:#04140c;opacity:0;transform:scale(.4);
  box-shadow:0 0 0 4px rgba(52,226,155,.18),0 14px 30px -10px rgba(0,0,0,.6)}
.cine-layer.on .v-law .law-seal{animation:lawseal 3s ease forwards}
@keyframes lawseal{0%,60%{opacity:0;transform:scale(.4) rotate(-12deg)}74%{opacity:1;transform:scale(1.12) rotate(0)}82%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}
.v-law .law-seal svg{width:50%;height:50%}

/* ── ACTO contraste: hoy vs. deberías ──────────────────────────────────── */
.cine-contrast{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;z-index:5;
  opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.cine-contrast.on{opacity:1;visibility:visible}
.cc-side{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw;padding:9cqw 5cqw}
.cc-side .cc-label{font-family:var(--mono);font-size:2.7cqw;letter-spacing:.16em;text-transform:uppercase;text-align:center}
.cc-today{background:linear-gradient(180deg,#14110c,#0b0a08)}
.cc-today .cc-label{color:#9a8e76}
.cc-should{background:linear-gradient(180deg,#0c1620,#080d14);box-shadow:inset 1px 0 0 var(--line)}
.cc-should .cc-label{color:var(--ember-2)}
.cc-divider{position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(180deg,transparent,var(--ember-line),transparent);z-index:6}
/* PDF polvoriento */
.cc-pdf{width:42cqw;max-width:160px;aspect-ratio:3/4;border-radius:1.6cqw;background:linear-gradient(165deg,#cdbf9f,#a99a78);
  transform:rotate(-5deg);box-shadow:0 16px 30px -14px rgba(0,0,0,.8);position:relative;overflow:hidden;filter:saturate(.7)}
.cc-pdf::before{content:"";position:absolute;inset:16% 14% auto 14%;height:4%;background:rgba(0,0,0,.2);
  box-shadow:0 220% 0 rgba(0,0,0,.16),0 440% 0 rgba(0,0,0,.16),0 660% 0 rgba(0,0,0,.12),0 880% 0 rgba(0,0,0,.1)}
.cc-pdf .cc-dust{position:absolute;inset:0;background:radial-gradient(2px 2px at 30% 70%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 64% 40%,rgba(255,255,255,.3),transparent),radial-gradient(1.5px 1.5px at 80% 80%,rgba(255,255,255,.25),transparent);opacity:.5}
.cc-pdf .cc-pdftag{position:absolute;left:8%;bottom:7%;font-family:var(--mono);font-size:2.4cqw;color:#5e5236;border:1px solid #6f6244;border-radius:1cqw;padding:.6cqw 1.6cqw}
/* teléfono PYV */
.cc-phone{width:34cqw;max-width:138px;aspect-ratio:9/18;border-radius:4cqw;background:#0c1016;border:1.5px solid rgba(120,200,230,.4);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.8),0 0 0 4px rgba(8,12,18,.6),inset 0 1px 0 rgba(150,220,240,.18);
  padding:5cqw 3cqw;display:flex;flex-direction:column;gap:2.4cqw;position:relative}
.cc-phone::before{content:"";position:absolute;top:2.4cqw;left:50%;transform:translateX(-50%);width:22%;height:1.6cqw;border-radius:99px;background:rgba(255,255,255,.16)}
.cc-phone .pf-h{margin-top:3cqw;font-family:var(--mono);font-size:2.2cqw;color:#aef0fb;letter-spacing:.06em}
.cc-phone .pf-fire{font-size:2.4cqw;color:#ffd9c2;background:rgba(255,77,18,.14);border:1px solid rgba(255,77,18,.3);border-radius:1.4cqw;padding:1.4cqw}
.cc-phone .pf-row{display:flex;align-items:center;gap:1.6cqw;font-size:2.3cqw;color:#cfe0ea}
.cc-phone .pf-row .pf-d{width:2cqw;height:2cqw;border-radius:50%;flex-shrink:0}
.cc-phone .pf-live{margin-top:auto;font-family:var(--mono);font-size:2.1cqw;color:#46e6a6;display:flex;align-items:center;gap:1.4cqw}
.cc-phone .pf-live .pf-dot{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#34e29b;box-shadow:0 0 6px #34e29b}

/* ── ACTO tagline ──────────────────────────────────────────────────────── */
.cine-tagline{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:4cqw;padding:10cqw;z-index:7;opacity:0;visibility:hidden;
  background:radial-gradient(120% 90% at 50% 40%,rgba(255,77,18,.12),transparent 60%),linear-gradient(180deg,#0a0d12,#070a0f);
  transition:opacity .6s var(--ease),visibility .6s}
.cine-tagline.on{opacity:1;visibility:visible}
.cine-tagline .tg-mark{display:flex;align-items:center;gap:2cqw;font-family:var(--mono);font-size:2.7cqw;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);opacity:0;transform:translateY(14px);transition:.5s .1s var(--ease)}
.cine-tagline .tg-mark img{height:5cqw;width:5cqw}
.cine-tagline.on .tg-mark{opacity:1;transform:none}
.cine-tagline .tg-line{font-size:6.2cqw;line-height:1.16;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance;
  opacity:0;transform:translateY(22px);transition:.6s .25s var(--ease)}
.cine-tagline.on .tg-line{opacity:1;transform:none}
.cine-tagline .tg-line em{font-style:normal;background:linear-gradient(100deg,var(--ember),var(--ember-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cine-tagline .tg-cta{opacity:0;transform:translateY(14px);transition:.5s .45s var(--ease)}
.cine-tagline.on .tg-cta{opacity:1;transform:none}

/* skip / replay */
.cine-skip{position:absolute;right:12px;top:12px;z-index:9;pointer-events:auto;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted-2);
  background:rgba(8,11,16,.6);border:1px solid var(--line);border-radius:99px;padding:5px 11px;transition:.2s;opacity:0}
.scope:hover .cine-skip{opacity:1}
.cine-skip:hover{color:#fff;border-color:var(--line-2)}

/* hide HUD chrome durante los actos narrativos */
.scope[data-cine="beats"] .hud,.scope[data-cine="contrast"] .hud,.scope[data-cine="tagline"] .hud,
.scope[data-cine="beats"] .scope-label,.scope[data-cine="contrast"] .scope-label,.scope[data-cine="tagline"] .scope-label{opacity:0;transition:opacity .4s}

@media (prefers-reduced-motion:reduce){
  .v-contact .vc-av::after,.v-pmr .pmr-pin,.v-db .db-head .db-sync,.v-law .law-x,.v-law .law-seal{animation:none!important}
  .cine-layer,.cine-vis,.cine-kicker,.cine-headline{transition:none!important}
}