/* ============================================================
   GlobalMusicWave — Intro fílmica (explicativo animado)
   Stage cinemático negro · multicolor · subtítulos VO-ready
   ============================================================ */

.film-wrap{ position:relative; width:100%; }
.film{
  position:sticky; top:0; height:100vh; min-height:660px; width:100%;
  background:#08090e; color:#fff; overflow:hidden;
  font-family:var(--sans);
  display:flex; flex-direction:column;
}
.film *{ box-sizing:border-box; }

/* fondo: malla + auras de color que cambian por escena */
.film-bg{ position:absolute; inset:0; z-index:0; }
.film-grid{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 35%, #000 40%, transparent 78%);
  mask-image:radial-gradient(120% 80% at 50% 35%, #000 40%, transparent 78%);
}
.film-aura{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55;
  transition:opacity 1.2s ease, transform 1.6s cubic-bezier(.2,.7,.2,1), background 1.2s ease; }
.film-aura.a1{ width:560px; height:560px; left:-8%; top:-12%; }
.film-aura.a2{ width:620px; height:620px; right:-10%; bottom:-16%; }

/* topbar minimal */
.film-top{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:26px 40px; }
.film-brand{ display:flex; align-items:center; gap:11px; }
.film-brand img{ height:28px; width:auto; }
.film-brand .wm{ font-weight:700; letter-spacing:-0.02em; font-size:18px; color:#fff; }
.film-brand .wm span{ font-weight:500; opacity:.8; }
.film-skip{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); background:transparent; border:1px solid rgba(255,255,255,.2); padding:9px 15px; cursor:pointer; transition:color .15s, border-color .15s; }
.film-skip:hover{ color:#fff; border-color:rgba(255,255,255,.5); }

/* stage */
.film-stage{ position:relative; z-index:2; flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 40px; }
.film-kicker{ font-family:var(--mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:26px; display:flex; align-items:center; gap:12px; }
.film-kicker .k-dot{ width:8px; height:8px; border-radius:50%; }
.film-head{ font-size:clamp(34px, 6.2vw, 86px); line-height:.98; letter-spacing:-0.04em; font-weight:800; margin:0; max-width:18ch; text-wrap:balance; }
.film-head .hl{ color:var(--scene-color, #8f8bff); }

/* zona visual de cada escena */
.film-viz{ margin-top:42px; min-height:200px; display:flex; align-items:center; justify-content:center; width:100%; max-width:980px; }

/* entrada de escena (remonta por key) — estado base VISIBLE; animamos solo si se permite movimiento */
@keyframes filmIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
  .film-anim{ animation:filmIn .8s cubic-bezier(.2,.75,.2,1) both; }
  .film-anim.d1{ animation-delay:.12s; }
  .film-anim.d2{ animation-delay:.26s; }
  .film-anim.d3{ animation-delay:.4s; }
}

/* ---- visual: chips de caos (escena problema) ---- */
.viz-chaos{ position:relative; width:100%; height:230px; }
.viz-chaos .chip{ position:absolute; font-family:var(--mono); font-size:14px; padding:11px 16px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:rgba(255,255,255,.82); white-space:nowrap; }
.viz-chaos .chip .x{ color:#ff6b6b; margin-right:7px; }

/* ---- visual: convergencia en un sistema ---- */
.viz-one{ display:flex; align-items:center; justify-content:center; gap:0; }
.viz-one .card{ border:1.5px solid rgba(255,255,255,.7); padding:26px 34px; display:flex; align-items:center; gap:18px; background:rgba(255,255,255,.03); }
.viz-one .card .ico{ width:46px; height:46px; }
.viz-one .card .t{ text-align:left; }
.viz-one .card .t b{ display:block; font-size:22px; font-weight:800; letter-spacing:-0.02em; }
.viz-one .card .t span{ font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.6); }

/* ---- visual: 6 fases ---- */
.viz-phases{ display:flex; gap:12px; width:100%; justify-content:center; flex-wrap:wrap; }
.viz-phases .ph{ flex:1; min-width:120px; max-width:150px; border:1px solid rgba(255,255,255,.14); padding:16px 12px; text-align:left; position:relative; overflow:hidden; }
.viz-phases .ph .pn{ font-family:var(--mono); font-size:12px; font-weight:700; }
.viz-phases .ph .pl{ font-size:14px; font-weight:700; margin-top:8px; letter-spacing:-0.01em; }
.viz-phases .ph .pbar{ height:4px; margin-top:14px; border-radius:2px; }

/* ---- visual: split de liquidación ---- */
.viz-split{ width:100%; max-width:760px; }
.viz-split .bar{ display:flex; height:120px; border:1.5px solid rgba(255,255,255,.16); overflow:hidden; }
.viz-split .seg{ display:flex; flex-direction:column; justify-content:flex-end; padding:16px; overflow:hidden; min-width:0; }
@keyframes growSeg{ from{ flex-grow:0.001; } to{} }
.viz-split .seg .p{ font-size:30px; font-weight:800; letter-spacing:-0.03em; line-height:1; }
.viz-split .seg .l{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-top:7px; opacity:.92; }
.viz-split .legend{ display:flex; justify-content:space-between; margin-top:14px; font-family:var(--mono); font-size:12.5px; color:rgba(255,255,255,.7); }
.viz-split .legend b{ color:#fff; }

/* ---- visual: número gigante ---- */
.viz-big{ display:flex; align-items:baseline; justify-content:center; gap:30px; }
.viz-big .n{ font-size:clamp(80px,16vw,200px); font-weight:800; letter-spacing:-0.05em; line-height:.85; }
.viz-big .n.green{ color:var(--c6); }
.viz-big .side{ text-align:left; }
.viz-big .side .s1{ font-size:34px; font-weight:800; letter-spacing:-0.03em; }
.viz-big .side .s2{ font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }

/* ---- visual: integraciones ---- */
.viz-intg{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:720px; }
.viz-intg .it{ border:1px solid rgba(255,255,255,.14); padding:18px 16px; text-align:left; }
.viz-intg .it .ih{ font-size:16px; font-weight:700; letter-spacing:-0.01em; }
.viz-intg .it .is{ font-family:var(--mono); font-size:10.5px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }

/* ---- visual: cierre ---- */
.viz-end{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.viz-end .cta-row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.viz-end .btn{ font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:15px 26px; border:1.5px solid #fff; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:9px; }
.viz-end .btn.fill{ background:var(--c6); border-color:var(--c6); color:#06140c; }
.viz-end .btn.fill:hover{ background:#1bb463; }
.viz-end .btn.line{ background:transparent; color:#fff; }
.viz-end .btn.line:hover{ background:rgba(255,255,255,.1); }

/* barra de control */
.film-ctrl{ position:relative; z-index:3; display:flex; align-items:center; gap:18px; padding:18px 40px 26px; }
.film-ctrl .pp{ width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; display:grid; place-items:center; flex:0 0 auto; transition:border-color .15s, background .15s; }
.film-ctrl .pp:hover{ border-color:#fff; background:rgba(255,255,255,.14); }
.film-ctrl .pp svg{ width:18px; height:18px; fill:#fff; }
.film-dots{ flex:1; display:flex; gap:7px; align-items:center; }
.film-dot{ flex:1; height:4px; background:rgba(255,255,255,.16); cursor:pointer; position:relative; overflow:hidden; border:none; padding:0; }
.film-dot .pf{ position:absolute; inset:0; width:0; background:#fff; }
.film-dot.done .pf{ width:100%; }
.film-dot.active .pf{ background:var(--scene-color,#8f8bff); }
.film-ctrl .meta{ font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.55); flex:0 0 auto; min-width:54px; text-align:right; }

/* cue de scroll */
.film-cue{ position:absolute; left:50%; bottom:96px; transform:translateX(-50%); z-index:3; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.film-cue .arrow{ animation:cueBob 1.6s ease-in-out infinite; }
@keyframes cueBob{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(6px); opacity:1; } }

@media (max-width:720px){
  .film-top{ padding:18px 22px; }
  .film-stage{ padding:0 22px; }
  .film-viz{ margin-top:30px; min-height:auto; }
  .viz-phases{ gap:8px; } .viz-phases .ph{ min-width:96px; padding:12px 9px; }
  .viz-intg{ grid-template-columns:1fr 1fr; }
  .film-ctrl{ padding:14px 22px 22px; gap:12px; }
  .film-cue{ display:none; }
}