/* ============================================================
   MÁXIMA FORMACIÓN · Presentación comercial
   Escenas a pantalla completa · paleta oficial de marca
   ============================================================ */
:root{
  --teal:#11ACA1; --teal-2:#3DC2B8; --teal-d:#0C837A; --teal-dd:#095F59;
  --blue:#3D69B2; --blue-2:#6E93D0; --blue-d:#2E4F86;
  --yellow:#3D69B2; --yellow-2:#6E93D0; --yellow-d:#2E4F86;
  --lav:#6E93D0;
  --navy:#0A1826; --navy-2:#0E2233; --navy-3:#143049;
  --ink:#122433; --muted:#8FA6B8; --line:rgba(255,255,255,.14);
  --hud-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--navy)}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:#EAF2F8;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.mono-t{font-family:'Montserrat','Inter',sans-serif;letter-spacing:-.02em;line-height:1.1}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* ---------- Escenario ---------- */
#deck{position:fixed;inset:0 0 var(--hud-h) 0;overflow:hidden}
.scene{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,4vw,56px);opacity:0;visibility:hidden;
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.8,.35,1);
  transform:translateY(26px) scale(.995);overflow-y:auto;
}
.scene.active{opacity:1;visibility:visible;transform:none;z-index:2}
.scene::before{ /* trama industrial */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  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:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 25%,transparent 78%);
}
.wrap{width:min(1180px,100%);position:relative;z-index:2;margin:auto}

/* Fondos por tipo de escena */
.sc-hero{background:radial-gradient(1200px 620px at 78% -12%,rgba(61,105,178,.42),transparent 62%),radial-gradient(900px 520px at -8% 112%,rgba(17,172,161,.35),transparent 62%),linear-gradient(158deg,#061019,var(--navy) 48%,#0C1F31)}
.sc-teal{background:radial-gradient(1000px 560px at 82% -10%,rgba(17,172,161,.4),transparent 62%),linear-gradient(158deg,#061019,var(--navy) 55%,#0A2029)}
.sc-blue{background:radial-gradient(1000px 560px at 18% -10%,rgba(61,105,178,.45),transparent 62%),linear-gradient(158deg,#061019,var(--navy) 55%,#0B1D33)}
.sc-yellow{background:radial-gradient(1000px 560px at 50% -12%,rgba(61,105,178,.26),transparent 60%),linear-gradient(158deg,#061019,var(--navy) 55%,#141F26)}
.sc-dark{background:linear-gradient(158deg,#050D14,#081420 55%,#0A1826)}

/* Video de fondo */
.sc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;z-index:0}
.sc-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(158deg,rgba(6,16,25,.86),rgba(10,24,38,.72) 50%,rgba(12,31,49,.9))}

/* ---------- Tipografía de escena ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:9px;font-size:clamp(.68rem,1.1vw,.8rem);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;border-radius:999px;padding:8px 16px;margin-bottom:18px;
}
.k-teal{background:var(--teal);color:#FFFFFF}
.k-blue{background:var(--blue);color:#fff}
.k-yellow{background:var(--yellow);color:#FFFFFF}
.k-ghost{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#C9D8E4}
.big{font-size:clamp(1.9rem,5.2vw,3.9rem);font-weight:800;margin-bottom:16px}
.big .hl{background:linear-gradient(90deg,var(--yellow) 20%,var(--yellow-2) 45%,var(--yellow) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 5s linear infinite}
.big .hl-t{color:var(--teal-2)}
@keyframes shine{to{background-position:-200% 0}}
.sub{font-size:clamp(1rem,1.8vw,1.22rem);color:#C4D6E4;max-width:62ch;line-height:1.6}
.sub strong{color:#fff}
.mini{font-size:.86rem;color:var(--muted)}

/* Entrada escalonada de los hijos de la escena activa */
.scene.active .anim{animation:rise .75s cubic-bezier(.22,.8,.35,1) backwards}
.scene.active .anim:nth-child(1){animation-delay:.06s}
.scene.active .anim:nth-child(2){animation-delay:.18s}
.scene.active .anim:nth-child(3){animation-delay:.3s}
.scene.active .anim:nth-child(4){animation-delay:.42s}
.scene.active .anim:nth-child(5){animation-delay:.54s}
.scene.active .anim:nth-child(6){animation-delay:.66s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- Retículas ---------- */
.grid-2{display:grid;gap:clamp(20px,3.4vw,44px);align-items:center}
.grid-3{display:grid;gap:18px}
.grid-4{display:grid;gap:14px}
@media (min-width:900px){
  .grid-2{grid-template-columns:1.03fr .97fr}
  .grid-2.rev>*:first-child{order:2}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Tarjetas ---------- */
.card{
  background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:18px;
  padding:clamp(18px,2.2vw,26px);backdrop-filter:blur(6px);
}
.card h3{font-size:clamp(1.02rem,1.6vw,1.2rem);margin-bottom:8px;color:#fff}
.card p{font-size:.93rem;color:#B9CCDC;line-height:1.6}
.card .ico{font-size:1.9rem;margin-bottom:10px;display:block}
.card.c-teal{border-top:4px solid var(--teal);background:linear-gradient(180deg,rgba(17,172,161,.16),rgba(255,255,255,.04))}
.card.c-blue{border-top:4px solid var(--blue);background:linear-gradient(180deg,rgba(61,105,178,.18),rgba(255,255,255,.04))}
.card.c-yellow{border-top:4px solid var(--yellow);background:linear-gradient(180deg,rgba(61,105,178,.14),rgba(255,255,255,.04))}
.card.c-lav{border-top:4px solid var(--lav);background:linear-gradient(180deg,rgba(110,147,208,.14),rgba(255,255,255,.04))}
.tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.c-teal .tag{color:var(--teal-2)} .c-blue .tag{color:var(--blue-2)}
.c-yellow .tag{color:var(--yellow)} .c-lav .tag{color:var(--lav)}

/* Métricas */
.stat{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:16px;padding:20px 16px;text-align:center}
.stat .n{font-family:'Montserrat',sans-serif;font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;line-height:1}
.stat .l{font-size:.8rem;color:#A9BFD0;margin-top:6px;line-height:1.45}
.stat:nth-child(1) .n{color:var(--teal-2)} .stat:nth-child(2) .n{color:var(--blue-2)}
.stat:nth-child(3) .n{color:var(--yellow)} .stat:nth-child(4) .n{color:var(--lav)}
.stat:nth-child(1){border-top:3px solid var(--teal)} .stat:nth-child(2){border-top:3px solid var(--blue)}
.stat:nth-child(3){border-top:3px solid var(--yellow)} .stat:nth-child(4){border-top:3px solid var(--lav)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.chip{font-size:.82rem;font-weight:700;border-radius:999px;padding:8px 15px;border:1.5px solid;background:rgba(255,255,255,.05)}
.chip.t{border-color:var(--teal);color:var(--teal-2)}
.chip.b{border-color:var(--blue);color:var(--blue-2)}
.chip.y{border-color:var(--yellow);color:var(--yellow)}
.chip.l{border-color:var(--lav);color:var(--lav)}

/* ---------- Mockups ---------- */
.phone{
  width:min(280px,74vw);margin-inline:auto;background:#08161F;border-radius:34px;padding:11px;
  box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.09);
}
.phone .scr{background:linear-gradient(172deg,#10283D,#081420);border-radius:25px;overflow:hidden}
.ptop{display:flex;align-items:center;gap:9px;padding:11px 13px;background:rgba(255,255,255,.06)}
.pav{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));display:flex;align-items:center;justify-content:center;font-size:1rem}
.ptop b{font-size:.76rem;display:block}.ptop i{font-size:.66rem;color:var(--teal-2);font-style:normal}
.pbody{padding:13px;display:grid;gap:9px;min-height:246px}
.bub{max-width:88%;border-radius:13px;padding:9px 11px;font-size:.75rem;line-height:1.45}
.bub.bot{background:rgba(255,255,255,.1);border-top-left-radius:4px;color:#DFEAF2}
.bub.usr{background:var(--teal);color:#fff;margin-left:auto;border-top-right-radius:4px}
.opt{border:1px solid rgba(255,255,255,.24);border-radius:8px;padding:6px 9px;font-size:.7rem;margin-top:5px}
.opt.ok{border-color:var(--teal);background:rgba(17,172,161,.24)}
.pbar{padding:0 13px 14px}
.pbar .t{height:7px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden}
.pbar .t i{display:block;height:100%;width:78%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--yellow))}
.pbar .m{display:flex;justify-content:space-between;font-size:.64rem;color:var(--muted);margin-top:5px}

/* Chat de gestión */
.wchat{width:min(370px,92vw);margin-inline:auto;background:#0B141A;border-radius:16px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.5);border:1px solid var(--line)}
.wtop{display:flex;align-items:center;gap:10px;background:#17242C;padding:11px 13px}
.wbody{padding:14px 12px;display:grid;gap:9px;background:linear-gradient(rgba(11,20,26,.95),rgba(11,20,26,.95)),repeating-linear-gradient(45deg,#132630 0 12px,#0F1F28 12px 24px)}
.wm{max-width:88%;border-radius:10px;padding:8px 11px;font-size:.77rem;line-height:1.45;color:#E9EDEF}
.wm.in{background:#1F2C34;border-top-left-radius:3px}
.wm.out{background:#0C6B5C;margin-left:auto;border-top-right-radius:3px}
.wm small{display:block;font-size:.6rem;color:#8696A0;text-align:right;margin-top:3px}

/* Panel de datos */
.dash{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.45);color:var(--ink)}
.dtop{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;background:linear-gradient(135deg,var(--teal-d),var(--blue-d));color:#fff;font-size:.8rem;font-weight:700}
.dlive{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;color:#9FF0E7}
.dlive::before{content:"";width:8px;height:8px;border-radius:50%;background:#25D366;animation:pl 1.6s infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.3}}
.dbody{padding:16px;display:grid;gap:12px}
.drow{display:grid;grid-template-columns:88px 1fr 40px;align-items:center;gap:9px;font-size:.76rem}
.drow .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .bars{display:grid;gap:4px}
.drow .b{height:7px;border-radius:99px;background:#E2EAF0;overflow:hidden}
.drow .b i{display:block;height:100%;border-radius:99px;width:0;transition:width 1.2s cubic-bezier(.22,.8,.35,1)}
.scene.active .drow .b.pre i{background:#C4D2DD}
.scene.active .drow .b.post i{background:linear-gradient(90deg,var(--teal),#1FA97A)}
.drow .pc{font-weight:800;color:#0E9E7A;text-align:right}
.drow.al .pc{color:#E4572E}
.scene.active .drow.al .b.post i{background:#E4572E}

/* Certificado */
.cert{background:#fff;color:var(--ink);border-radius:14px;padding:18px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;box-shadow:0 20px 46px rgba(0,0,0,.4)}
.cert .ct{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#5A6B7A}
.cert .cn{font-weight:800;font-size:.95rem;margin:3px 0}
.cert .cc{font-size:.78rem;color:var(--teal-d);font-weight:700}
.cert .ck{font-size:.68rem;color:#5A6B7A;margin-top:6px;font-family:monospace}
.qr{width:74px;height:74px;border-radius:7px;border:5px solid var(--ink);position:relative;
  background:conic-gradient(var(--ink) 0 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0) 0 0/24px 24px,#fff}
.qr::after{content:"";position:absolute;inset:22px;background:var(--ink);border-radius:3px}

/* Comparativa */
.cmp{margin-top:8px}
.cmp .row{margin-bottom:16px}
.cmp .lab{display:flex;justify-content:space-between;font-size:.84rem;font-weight:700;margin-bottom:7px}
.cmp .row:nth-child(1) .lab{color:#FF9D8A}
.cmp .row:nth-child(2) .lab{color:var(--teal-2)}
.cmp .bar{height:26px;border-radius:8px;background:rgba(255,255,255,.09);overflow:hidden}
.cmp .bar i{display:block;height:100%;width:0;border-radius:8px;transition:width 1.5s cubic-bezier(.22,.8,.35,1) .3s}
.scene.active .cmp .row:nth-child(1) .bar i{width:100%;background:linear-gradient(90deg,#8A4A3B,#C0573F)}
.scene.active .cmp .row:nth-child(2) .bar i{width:8%;min-width:76px;background:linear-gradient(90deg,var(--teal),var(--yellow))}
.cmp .steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cmp .st{font-size:.68rem;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:99px;padding:4px 10px;color:#A9BFD0}

/* Logo y cierre */
.logo-hero{width:min(430px,78vw);margin:0 auto 26px;filter:drop-shadow(0 14px 40px rgba(17,172,161,.4))}
.tri{height:5px;width:180px;margin:20px auto 0;border-radius:99px;
  background:linear-gradient(90deg,var(--teal) 0 50%,var(--blue) 50% 100%)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.cta{display:inline-flex;align-items:center;gap:9px;border:none;border-radius:12px;padding:15px 28px;font-weight:800;font-size:1rem;text-decoration:none;transition:transform .18s,box-shadow .18s}
.cta:hover{transform:translateY(-3px)}
.cta-y{background:var(--yellow);color:#FFFFFF;box-shadow:0 10px 30px rgba(61,105,178,.4)}
.cta-t{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;box-shadow:0 10px 30px rgba(17,172,161,.4)}
.cta-g{background:rgba(255,255,255,.08);color:#EAF2F8;border:1.5px solid var(--line)}

/* Marquesina de mandantes */
.mq{overflow:hidden;margin-top:20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-t{display:flex;gap:10px;width:max-content;animation:mq 26s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-i{font-family:'Montserrat',sans-serif;font-weight:700;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;
  color:#B9CCDC;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:10px;padding:11px 20px;white-space:nowrap}
.mq-i:nth-child(4n+1){border-bottom:3px solid var(--teal)}
.mq-i:nth-child(4n+2){border-bottom:3px solid var(--blue)}
.mq-i:nth-child(4n+3){border-bottom:3px solid var(--yellow)}
.mq-i:nth-child(4n+4){border-bottom:3px solid var(--lav)}

/* Planes */
.plan{background:rgba(255,255,255,.055);border:1.5px solid var(--line);border-radius:18px;padding:22px 20px;display:flex;flex-direction:column}
.plan.feat{border-color:var(--yellow);box-shadow:0 16px 44px rgba(61,105,178,.2);background:linear-gradient(180deg,rgba(61,105,178,.12),rgba(255,255,255,.04))}
.plan h3{font-size:1.05rem;margin-bottom:10px}
.plan:nth-child(1) h3{color:var(--teal-2)} .plan.feat h3{color:var(--yellow)} .plan:nth-child(3) h3{color:var(--blue-2)}
.plan .pr{font-family:'Montserrat',sans-serif;font-size:1.7rem;font-weight:800}
.plan .old{font-size:.8rem;color:var(--muted);text-decoration:line-through}
.plan .per{font-size:.8rem;color:var(--teal-2);font-weight:700;margin:6px 0 12px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.plan ul{list-style:none;display:grid;gap:7px}
.plan li{font-size:.83rem;color:#C4D6E4}
.flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--yellow);color:#FFFFFF;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:99px;padding:6px 15px;white-space:nowrap}
.plan{position:relative}

/* Áreas del catálogo */
.area{border-radius:14px;padding:16px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.area b{display:block;font-size:.94rem;margin-bottom:4px}
.area span{font-size:.78rem;color:#A9BFD0}
.area:nth-child(1){border-left:4px solid var(--teal)} .area:nth-child(2){border-left:4px solid var(--blue)}
.area:nth-child(3){border-left:4px solid var(--yellow)} .area:nth-child(4){border-left:4px solid var(--teal-d)}

/* Video incrustado en escena */
.vbox{border-radius:16px;overflow:hidden;position:relative;box-shadow:0 26px 60px rgba(0,0,0,.5);background:#08161F}
.vbox video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.vbox .vt{position:absolute;left:12px;bottom:11px;background:rgba(6,16,25,.84);border-left:3px solid var(--yellow);border-radius:8px;padding:6px 12px;font-size:.74rem;font-weight:700}

/* ---------- HUD ---------- */
#hud{
  position:fixed;left:0;right:0;bottom:0;height:var(--hud-h);z-index:40;
  display:flex;align-items:center;gap:14px;padding:0 clamp(12px,2.4vw,26px);
  background:rgba(6,14,22,.93);backdrop-filter:blur(12px);border-top:1px solid var(--line);
}
#hud::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal) 0 50%,var(--blue) 50% 100%)}
.hud-logo{height:30px;width:auto;flex:0 0 auto}
.hud-btns{display:flex;gap:7px;flex:0 0 auto}
.hb{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#EAF2F8;display:flex;align-items:center;justify-content:center;transition:.15s}
.hb:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.hb.play{background:var(--yellow);border-color:var(--yellow);color:#FFFFFF}
.hb.play:hover{background:var(--yellow-2)}
.hud-prog{flex:1;display:flex;align-items:center;gap:11px;min-width:0}
.pbarw{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;cursor:pointer;min-width:60px}
.pfill{height:100%;border-radius:99px;width:0;background:linear-gradient(90deg,var(--teal),var(--yellow));transition:width .35s ease}
.pnum{font-size:.78rem;color:#A9BFD0;font-variant-numeric:tabular-nums;flex:0 0 auto;font-weight:700}
.hud-t{font-size:.8rem;color:#C9D8E4;font-weight:600;max-width:26vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 0 auto}
@media (max-width:820px){.hud-t{display:none}.hud-logo{height:24px}}

/* Flechas laterales */
.arrow{
  position:fixed;top:50%;transform:translateY(-50%);z-index:35;width:46px;height:46px;border-radius:50%;
  background:rgba(6,14,22,.6);border:1px solid var(--line);color:#EAF2F8;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);transition:.18s;opacity:.55;
}
.arrow:hover{opacity:1;background:var(--teal);border-color:var(--teal)}
#aPrev{left:14px} #aNext{right:14px}
@media (max-width:640px){.arrow{display:none}}

/* Índice de escenas */
#idx{position:fixed;inset:0;z-index:60;background:rgba(5,12,19,.96);backdrop-filter:blur(10px);display:none;padding:34px 20px;overflow-y:auto}
#idx.open{display:block}
.idx-grid{width:min(1000px,100%);margin:0 auto;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.idx-i{text-align:left;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;padding:14px;color:#EAF2F8;transition:.15s}
.idx-i:hover{border-color:var(--teal);background:rgba(17,172,161,.16)}
.idx-i b{display:block;font-size:.9rem;margin-bottom:3px}
.idx-i span{font-size:.74rem;color:var(--muted)}
.idx-h{width:min(1000px,100%);margin:0 auto 22px;display:flex;justify-content:space-between;align-items:center}
.idx-h h2{font-size:1.3rem}

/* Pantallas bajas (portátiles 768px y proyectores): comprimir para que todo quepa sin scroll */
@media (max-height:820px){
  .scene{padding:clamp(14px,2.2vw,26px) clamp(18px,3.4vw,44px)}
  .kicker{margin-bottom:12px;padding:6px 14px}
  .big{margin-bottom:12px}
  .sub{font-size:1rem;line-height:1.55}
  .card{padding:15px 17px}
  .card .ico{font-size:1.55rem;margin-bottom:6px}
  .card p{font-size:.87rem;line-height:1.5}
  .grid-2,.grid-3,.grid-4{gap:14px}
  .stat{padding:14px 12px}
  .plan{padding:18px 16px}
  .vbox video{aspect-ratio:4/3}
  .logo-hero{margin-bottom:18px}
}
@media (max-height:700px){
  .scene{padding:12px 20px}
  .big{font-size:clamp(1.5rem,4vw,2.5rem)!important}
  .sub{font-size:.94rem}
  .card p{font-size:.83rem}
}

@media (prefers-reduced-motion:reduce){
  .scene,.scene.active .anim,.mq-t,.big .hl{transition:none;animation:none}
  .sc-video{display:none}
}

/* Botón de narración activo */
.hb.on{background:var(--teal);border-color:var(--teal);color:#fff}
.hb.on:hover{background:var(--teal-d)}

/* ═══════════ v6 · CINE: partículas, Ken Burns, ornamentos de marca ═══════════ */

/* Barra de progreso tricolor del logo */
#pfill{background:linear-gradient(90deg,var(--teal) 0 50%,var(--blue) 50% 100%)!important;
  box-shadow:0 0 14px rgba(61,105,178,.45)}

/* Ken Burns: los videos de fondo respiran */
.sc-video{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,1%)}}

/* Viñeta cinematográfica sobre todo el escenario */
#deck::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse 108% 108% at 50% 46%,transparent 58%,rgba(2,8,14,.5) 100%)}

/* Partículas de marca flotando (sutiles, mezcla aditiva) */
#dust{position:absolute;inset:0;pointer-events:none;z-index:3;mix-blend-mode:screen;overflow:hidden}
#dust i{position:absolute;bottom:-6vh;border-radius:50%;opacity:0;animation:sube linear infinite}
#dust i:nth-child(1){left:8%;width:5px;height:5px;background:#11ACA1;animation-duration:16s;animation-delay:0s}
#dust i:nth-child(2){left:22%;width:3px;height:3px;background:#3D69B2;animation-duration:21s;animation-delay:3s}
#dust i:nth-child(3){left:34%;width:4px;height:4px;background:#3D69B2;animation-duration:18s;animation-delay:7s}
#dust i:nth-child(4){left:47%;width:3px;height:3px;background:#11ACA1;animation-duration:23s;animation-delay:1.5s}
#dust i:nth-child(5){left:58%;width:5px;height:5px;background:#3D69B2;animation-duration:17s;animation-delay:9s}
#dust i:nth-child(6){left:69%;width:3px;height:3px;background:#6E93D0;animation-duration:24s;animation-delay:5s}
#dust i:nth-child(7){left:81%;width:4px;height:4px;background:#11ACA1;animation-duration:19s;animation-delay:11s}
#dust i:nth-child(8){left:90%;width:3px;height:3px;background:#3D69B2;animation-duration:22s;animation-delay:2.5s}
#dust i:nth-child(9){left:15%;width:4px;height:4px;background:#3D69B2;animation-duration:25s;animation-delay:13s}
#dust i:nth-child(10){left:75%;width:5px;height:5px;background:#6E93D0;animation-duration:20s;animation-delay:6.5s}
@keyframes sube{0%{transform:translateY(0);opacity:0}8%{opacity:.5}85%{opacity:.35}100%{transform:translateY(-108vh);opacity:0}}

/* Ornamento de marca: las tres montañas del logo */
.mounts{display:flex;gap:10px;justify-content:center;align-items:flex-end;margin:6px 0 14px}
.mounts i{width:22px;height:22px;border-top:7px solid;border-right:7px solid;transform:rotate(-45deg);border-radius:2px;animation:bob 3.2s ease-in-out infinite}
.mounts i:nth-child(1){border-color:var(--teal);animation-delay:0s}
.mounts i:nth-child(2){border-color:var(--blue);width:27px;height:27px;animation-delay:.35s}
.mounts i:nth-child(3){border-color:var(--yellow);width:33px;height:33px;animation-delay:.7s}
@keyframes bob{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(-4px,4px)}}

/* Brillo pulsante en los kickers */
.k-teal{animation:glowT 3s ease-in-out infinite}
.k-blue{animation:glowB 3s ease-in-out infinite}
.k-yellow{animation:glowY 3s ease-in-out infinite}
@keyframes glowT{0%,100%{box-shadow:0 0 0 rgba(17,172,161,0)}50%{box-shadow:0 6px 26px rgba(17,172,161,.55)}}
@keyframes glowB{0%,100%{box-shadow:0 0 0 rgba(61,105,178,0)}50%{box-shadow:0 6px 26px rgba(61,105,178,.6)}}
@keyframes glowY{0%,100%{box-shadow:0 0 0 rgba(61,105,178,0)}50%{box-shadow:0 6px 26px rgba(61,105,178,.5)}}

/* Números de métricas con resplandor */
.stat .n{text-shadow:0 0 26px currentColor}

/* Logo del héroe flotando con halo */
.logo-hero{filter:drop-shadow(0 14px 44px rgba(17,172,161,.35));animation:heroFloat 6s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Píldora para activar la narración */
#soundPill{
  position:fixed;left:50%;bottom:calc(var(--hud-h) + 18px);transform:translateX(-50%);z-index:60;
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:#FFFFFF;
  font-weight:800;font-size:.95rem;border:none;border-radius:999px;padding:14px 26px;
  box-shadow:0 14px 44px rgba(61,105,178,.45);animation:pillPulse 2.2s ease-in-out infinite;
  transition:opacity .4s,visibility .4s;font-family:inherit;
}
#soundPill:hover{background:linear-gradient(135deg,var(--yellow-2),var(--yellow))}
#soundPill.hide{opacity:0;visibility:hidden}
@keyframes pillPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}}

/* Botón de velocidad */
.hb.hb-txt{width:auto;min-width:46px;padding:0 12px;font-weight:800;font-size:.85rem;letter-spacing:.02em}

/* Confeti de cierre: capa completa sobre la escena */
.confeti-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.confeti-layer dotlottie-player{width:100%;height:100%}

@media (prefers-reduced-motion:reduce){
  .sc-video,#dust i,.mounts i,.k-teal,.k-blue,.k-yellow,.logo-hero,#soundPill{animation:none}
}

/* ═══════════ v7 · SIN BARRAS + VIDEOS PROTAGONISTAS + ICONOS DUOTONO ═══════════ */

/* Nada de barras de scroll: el escenario es una pantalla de cine.
   Si una escena realmente no cabe, se puede desplazar igual (rueda/dedo),
   pero sin mostrar la barra. */
.scene{overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}
.scene::-webkit-scrollbar{display:none;width:0;height:0}
html,body,#deck{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,#deck::-webkit-scrollbar{display:none}

/* Los videos de fondo ahora se NOTAN: más presencia, velo más liviano */
.sc-video{opacity:.55}
.sc-veil{background:linear-gradient(158deg,rgba(6,16,25,.68),rgba(10,24,38,.38) 50%,rgba(12,31,49,.7))}
/* Legibilidad garantizada sobre video: halo suave detrás del texto */
.big{text-shadow:0 2px 24px rgba(3,10,17,.85),0 1px 4px rgba(3,10,17,.9)}
.sub{text-shadow:0 1px 14px rgba(3,10,17,.9)}
.kicker{box-shadow:0 4px 18px rgba(3,10,17,.35)}

/* Iconos duotono: baldosa suave del color + glifo pleno */
.icb{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:11px;margin-bottom:10px}
.icb svg{width:22px;height:22px;fill:currentColor}
.icb-t{background:rgba(17,172,161,.2);color:#3DC2B8;border:1px solid rgba(17,172,161,.35)}
.icb-b{background:rgba(61,105,178,.22);color:#8FB4F5;border:1px solid rgba(61,105,178,.4)}
.icb-y{background:rgba(61,105,178,.18);color:#3D69B2;border:1px solid rgba(61,105,178,.35)}
.icb-l{background:rgba(110,147,208,.16);color:#6E93D0;border:1px solid rgba(110,147,208,.3)}
.icb-r{background:rgba(228,87,46,.18);color:#FF9D8A;border:1px solid rgba(228,87,46,.35)}
/* Icono chico en línea (kickers, botones, listas) */
.ici{display:inline-flex;vertical-align:-3px;margin-right:7px}
.ici svg{width:16px;height:16px;fill:currentColor}
.cta .ici svg{width:18px;height:18px}
li .ici{margin-right:8px}
li .ici svg{width:15px;height:15px}
.ok-i{color:#2FBFB4}.no-i{color:#FF9D8A}

/* ═══════════ v8 · DOS COLORES + APARICIÓN SINCRONIZADA CON LA VOZ ═══════════ */
:root{
  --teal:#11ACA1; --teal-2:#3DC2B8; --teal-d:#0C837A; --teal-dd:#095F59;
  --blue:#3D69B2; --blue-2:#6E93D0; --blue-d:#2E4F86;
  --yellow:#3D69B2; --yellow-2:#6E93D0; --yellow-d:#2E4F86; --lav:#6E93D0;
}
/* Destacado siempre en verde claro: es lo que contrasta sobre el fondo oscuro */
.big .hl{background:linear-gradient(90deg,var(--teal) 18%,#5FD6CC 42%,var(--teal) 66%);
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%}
.k-yellow{background:var(--blue);color:#fff}
.k-teal{background:var(--teal);color:#fff}
.k-blue{background:var(--blue);color:#fff}
@keyframes glowY{0%,100%{box-shadow:0 0 0 rgba(61,105,178,0)}50%{box-shadow:0 6px 26px rgba(61,105,178,.55)}}
/* Alternancia a dos colores */
.card.c-yellow{border-top-color:var(--teal);background:linear-gradient(180deg,rgba(17,172,161,.16),rgba(255,255,255,.04))}
.card.c-yellow .tag{color:var(--teal-2)}
.card.c-lav{border-top-color:var(--blue);background:linear-gradient(180deg,rgba(61,105,178,.16),rgba(255,255,255,.04))}
.card.c-lav .tag{color:var(--blue-2)}
.stat:nth-child(3) .n{color:var(--teal-2)} .stat:nth-child(4) .n{color:var(--blue-2)}
.stat:nth-child(3){border-top-color:var(--teal)} .stat:nth-child(4){border-top-color:var(--blue)}
.chip.y{border-color:var(--teal);color:var(--teal-2)}
.chip.l{border-color:var(--blue);color:var(--blue-2)}
.mounts i:nth-child(3){border-color:var(--teal)}
#pfill{background:linear-gradient(90deg,var(--teal) 0 50%,var(--blue) 50% 100%)!important;
  box-shadow:0 0 14px rgba(17,172,161,.5)}
#soundPill{background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;
  box-shadow:0 14px 44px rgba(17,172,161,.45)}
#soundPill:hover{background:linear-gradient(135deg,#16C0B4,var(--teal))}
.hb.on{background:var(--teal);border-color:var(--teal)}
.cta-y{background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff}
.cta-t{background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff}
.logo-hero{filter:drop-shadow(0 14px 44px rgba(17,172,161,.4))}

/* ── Aparición por tiempos: cada bloque entra con su parte de la narración ── */
.beat{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .75s cubic-bezier(.22,.8,.35,1),transform .75s cubic-bezier(.22,.8,.35,1)}
.beat.on{opacity:1;transform:none}
/* La entrada escalonada antigua se apaga: ahora manda el ritmo de la voz */
.scene.active .anim{animation:none}
@media (prefers-reduced-motion:reduce){.beat{opacity:1;transform:none;transition:none}}

/* ═══════════ v9 · SIN PARPADEO + CONTRASTE CORREGIDO ═══════════ */

/* 1. El deck arranca oculto hasta que el JS marca los bloques.
      La clase la pone el propio JS: si el JS falla, nunca se oculta nada. */
#deck.preparando .wrap{opacity:0}

/* 2. Entrada premium: desenfoque + deriva, sin saltos */
.beat{opacity:0;transform:translateY(30px) scale(.965);filter:blur(9px);will-change:opacity,transform,filter;
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1)}
.beat.on{opacity:1;transform:none;filter:blur(0)}

/* 3. CONTRASTE: el destacado es texto con degradado (relleno transparente).
      La sombra de .big se dibujaba como una letra oscura sólida detrás → ilegible.
      Se quita la sombra del destacado y se usa un halo real con drop-shadow. */
.big .hl{
  text-shadow:none;
  background:linear-gradient(90deg,#2FD4C7 12%,#8CF5EA 42%,#2FD4C7 74%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  background-size:200% 100%;
  filter:drop-shadow(0 3px 14px rgba(3,10,17,.75));
}
/* Los textos normales conservan su halo, pero más suave y sin doble sombra */
.big{text-shadow:0 2px 18px rgba(3,10,17,.7)}
.sub{text-shadow:0 1px 12px rgba(3,10,17,.8);color:#D3E3EE}
.mini{color:#A9C0D2}
.card p{color:#C6D8E6}
.cmp-foot{color:#C6D8E6}

/* 4. El confeti multicolor no respeta la paleta de dos colores */
.confeti-layer{display:none}

@media (prefers-reduced-motion:reduce){
  .beat{opacity:1;transform:none;filter:none;transition:none}
  #deck.preparando .wrap{opacity:1}
}

/* ═══════════ v10 · CONTRASTE AUDITADO (WCAG ≥ 4.5:1 sobre fondo oscuro) ═══════════ */
/* El verde de marca es luminoso: con texto blanco encima daba 2.8:1. Se usa el
   verde profundo como fondo de las etiquetas, que sí sostiene el texto blanco. */
.k-teal{background:var(--teal-d);color:#fff}      /* #0C837A → 5.1:1 con blanco */
.k-blue,.k-yellow{background:var(--blue-d);color:#fff}  /* #2E4F86 → 7.4:1 */

/* El azul de marca como TEXTO sobre oscuro sólo llega a 3.3:1 → azul claro */
.scene p,.scene .card p,.scene .autor,.scene .who{color:#C6D8E6}
.scene .card.c-blue p,.scene .card.c-yellow p,.scene .card.c-lav p,.scene .card.c-teal p{color:#C6D8E6}
.scene .st{color:#C6D8E6}
.scene strong{color:#fff}
.scene em{color:#B9CCDC}

/* Burbuja del usuario en el mockup: blanco sobre verde luminoso daba 2.8:1 */
.bub.usr{background:var(--teal-d);color:#fff}

/* ═══════════ v12 · RITMO ÁGIL + DIAGRAMAS ÉPICOS ═══════════ */

/* Entrada más rápida: acompaña a la voz sin arrastrarse */
.beat{transform:translateY(22px) scale(.978);filter:blur(6px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),filter .5s cubic-bezier(.16,1,.3,1)}

/* ── Anillos de progreso (gauges) ── */
.gauge{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:16px;
  padding:18px 12px;text-align:center}
.gauge:nth-child(odd){border-top:3px solid var(--teal)}
.gauge:nth-child(even){border-top:3px solid var(--blue)}
.gwrap{position:relative;width:112px;height:112px;margin:0 auto}
.gwrap svg{width:112px;height:112px;transform:rotate(-90deg)}
.gwrap circle{fill:none;stroke-width:9;stroke-linecap:round}
.gwrap .rbg{stroke:rgba(255,255,255,.09)}
.gwrap .rfg{stroke:var(--teal);stroke-dasharray:327;stroke-dashoffset:327;
  transition:stroke-dashoffset 1.7s cubic-bezier(.22,.8,.35,1) .25s;
  filter:drop-shadow(0 0 8px rgba(17,172,161,.55))}
.gauge:nth-child(even) .rfg{stroke:var(--blue-2);filter:drop-shadow(0 0 8px rgba(110,147,208,.55))}
.beat.on .rfg{stroke-dashoffset:calc(327px - 327px * var(--p, 0) / 100)}
.gauge .n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-size:1.45rem;font-weight:800;color:#fff}
.gauge .l{font-size:.78rem;color:#A9C0D2;margin-top:10px;line-height:1.4}

/* ── Ecosistema orbital MAX ── */
.stackcol{display:grid;gap:12px}
.stackcol .card{padding:14px 16px;display:flex;gap:14px;align-items:center;text-align:left}
.stackcol .card dotlottie-player{width:52px!important;height:52px!important;margin:0!important;flex:0 0 auto}
.stackcol .card h3{font-size:.95rem;margin-bottom:3px}
.stackcol .card p{font-size:.82rem;line-height:1.5}
.stackcol .card .tag{display:none}
.orbit-wrap{text-align:center;padding:26px 0 34px}
.orbit{position:relative;width:min(320px,68vw);aspect-ratio:1;margin:0 auto}
.oring{position:absolute;inset:0;border:1.5px dashed rgba(110,147,208,.45);border-radius:50%;animation:ospin 46s linear infinite}
.oring.r2{inset:17%;border-color:rgba(17,172,161,.5);animation:ospin 30s linear infinite reverse}
@keyframes ospin{to{transform:rotate(360deg)}}
.ocore{position:absolute;inset:34%;border-radius:50%;z-index:2;
  background:linear-gradient(135deg,var(--teal),var(--blue));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 0 70px rgba(17,172,161,.45)}
.ocore svg{width:32px;height:32px;fill:#fff}
.ocore b{font-family:'Montserrat',sans-serif;font-size:.85rem;color:#fff;letter-spacing:.08em}
.osat{position:absolute;width:56px;height:56px;border-radius:16px;z-index:2;
  background:#0D2233;border:1.5px solid var(--teal);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.45);animation:satglow 3.2s ease-in-out infinite}
.osat svg{width:25px;height:25px;fill:var(--teal-2)}
.osat.s2,.osat.s4{border-color:var(--blue)}
.osat.s2 svg,.osat.s4 svg{fill:var(--blue-2)}
.osat.s1{top:-8px;left:50%;transform:translateX(-50%)}
.osat.s2{right:-8px;top:50%;transform:translateY(-50%);animation-delay:.8s}
.osat.s3{bottom:-8px;left:50%;transform:translateX(-50%);animation-delay:1.6s}
.osat.s4{left:-8px;top:50%;transform:translateY(-50%);animation-delay:2.4s}
.osat em{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);
  font-style:normal;font-size:.64rem;font-weight:700;color:#A9C0D2;white-space:nowrap}
.osat.s1 em{top:auto;bottom:calc(100% + 5px)}
@keyframes satglow{0%,100%{box-shadow:0 8px 26px rgba(0,0,0,.45)}50%{box-shadow:0 0 32px rgba(17,172,161,.55)}}

/* ── Ruta de Chile ── */
.ruta-card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:18px;padding:22px 24px}
.ruta-card h3{font-size:1.02rem;margin-bottom:4px}
.ruta-card .sub-r{font-size:.8rem;color:#A9C0D2;margin-bottom:14px}
.ruta{position:relative;padding-left:30px;display:grid}
.ruta::before{content:"";position:absolute;left:10px;top:12px;bottom:12px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--blue-2),var(--teal),var(--blue-2))}
.hito{position:relative;padding:8px 0 8px 8px;font-size:.88rem;color:#C6D8E6}
.hito::before{content:"";position:absolute;left:-25px;top:13px;width:12px;height:12px;border-radius:50%;
  background:var(--blue-2);border:2.5px solid #0A1826}
.hito strong{color:#fff}
.hito small{display:block;color:#8FA6B8;font-size:.72rem;margin-top:1px}
.hito.hq{padding:10px 0 10px 8px}
.hito.hq::before{background:var(--teal);width:16px;height:16px;left:-27px;top:12px;
  box-shadow:0 0 0 0 rgba(17,172,161,.55);animation:hqpulse 2.2s ease-out infinite}
@keyframes hqpulse{to{box-shadow:0 0 0 13px rgba(17,172,161,0)}}
.mini-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mini-stats .stat{padding:16px 12px}
.mini-stats .stat .n{font-size:1.5rem}
.mini-stats .stat .l{font-size:.74rem}

@media (prefers-reduced-motion:reduce){
  .oring,.osat,.hito.hq::before{animation:none}
  .gwrap .rfg{transition:none}
}