:root{--ink:#12081F;--deep:#1E0B33;--purple:#6B2DAC;--violet:#8F3FE0;--magenta:#D23CA0;--pink:#F26BC0;--orange:#FD5610;--cream:#FBEFEA;--white:#FFFFFF;--mute:#B9A9CC;--f:'Poppins',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%;background:#07030D;font-family:var(--f);color:var(--white);overflow:hidden}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center;}
.slide{position:absolute;inset:0;width:1920px;height:1080px;overflow:hidden;padding:88px 120px;background:radial-gradient(1200px 800px at 85% 10%,#3A1260 0%,transparent 60%),radial-gradient(900px 700px at 0% 100%,#2A0E45 0%,transparent 60%),var(--ink);opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.slide.active{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.slide.light{background:var(--cream);color:var(--ink)}
.slide.grad{background:radial-gradient(1000px 700px at 90% 0%,rgba(242,107,192,.55),transparent 60%),linear-gradient(120deg,#2A0B47 0%,#6B2DAC 55%,#B4318F 100%)}
.top{position:absolute;top:56px;left:120px;right:120px;display:flex;justify-content:space-between;align-items:center;font-size:20px;font-weight:500;opacity:.85}
.top .brand{display:flex;align-items:center;gap:14px}
.top .dot{width:12px;height:12px;border-radius:50%;background:var(--orange)}
.light .top{color:var(--deep)}
.num{position:absolute;bottom:52px;right:120px;font-size:20px;font-weight:500;opacity:.6}
.src{position:absolute;bottom:52px;left:120px;font-size:17px;opacity:.6;max-width:1400px}
h1{font-size:112px;line-height:1.02;font-weight:600;letter-spacing:-.02em}
h2{font-size:68px;line-height:1.08;font-weight:600;letter-spacing:-.015em}
h3{font-size:29px;font-weight:600;line-height:1.2}
p{font-size:25px;line-height:1.5;font-weight:400}
.mute{color:var(--mute)}.light .mute{color:#6E5A85}
.kicker{display:inline-block;font-size:22px;font-weight:600;padding:10px 26px;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--magenta));color:#fff}
.hl{background:linear-gradient(90deg,#C08BFF,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.light .hl{background:linear-gradient(90deg,var(--purple),var(--magenta));-webkit-background-clip:text;background-clip:text}
.card{border-radius:28px;padding:36px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.card.g{background:linear-gradient(140deg,#5A1C95,#C23396);border:none;color:#fff}
.card.w{background:#fff;color:var(--ink);border:none;box-shadow:0 20px 50px rgba(60,10,90,.10)}
.card.k{background:var(--ink);color:#fff;border:none}
.big{font-size:92px;font-weight:600;line-height:1;letter-spacing:-.02em}
.mid{font-size:60px;font-weight:600;line-height:1}
.sm{font-size:20px;line-height:1.45}
.xs{font-size:18px;line-height:1.4}
.sep{width:2px;background:currentColor;opacity:.2;align-self:stretch}
.ico{width:52px;height:52px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tag{display:inline-block;font-size:17px;font-weight:600;padding:6px 16px;border-radius:999px}
.tag.ok{background:rgba(127,227,176,.18);color:#7FE3B0}.tag.crit{background:rgba(253,86,16,.18);color:#FF8A57}.tag.pot{background:rgba(255,255,255,.2);color:#fff}
.light .tag.crit{background:rgba(253,86,16,.12);color:#D9480F}
.bar{height:20px;border-radius:999px;background:rgba(18,8,31,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--magenta));transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.active .bar i{width:var(--w);transition-delay:calc(var(--d,0)*120ms + 300ms)}
.grid{display:grid}.flex{display:flex}
/* animación de entrada */
.a{opacity:0;transform:translateY(34px)}
.active .a{animation:in .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0)*120ms + 150ms)}
@keyframes in{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.a.z{transform:scale(.92)}
.draw{stroke-dasharray:1;stroke-dashoffset:1}
.active .draw{animation:draw 1.8s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--d,0)*120ms + 300ms)}
@keyframes draw{to{stroke-dashoffset:0}}
.fade{opacity:0}.active .fade{animation:fadeIn 1.2s ease forwards;animation-delay:calc(var(--d,0)*120ms + 300ms)}
@keyframes fadeIn{to{opacity:1}}
/* mapa portada */
#map circle.d{transform-box:fill-box;transform-origin:center;fill:#CDB0FF;opacity:0}
.active #map circle.d{animation:dotIn .7s ease-out both,wave 7s ease-in-out infinite;animation-delay:var(--a),var(--b)}
@keyframes dotIn{from{opacity:0;transform:scale(0)}to{opacity:.38;transform:scale(1)}}
@keyframes wave{0%,100%{opacity:.38}12%{opacity:1;fill:#FFB3E2}24%{opacity:.38}}
#map .city{fill:#fff}
#map .ring{fill:none;stroke:var(--pink);stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0}
.active #map .ring{animation:ring 2.6s ease-out infinite;animation-delay:var(--b)}
@keyframes ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
#map .link{fill:none;stroke:url(#lg);stroke-width:2.2;stroke-linecap:round}
#map .lbl{font:500 19px var(--f);fill:#fff;opacity:0}
.active #map .lbl{animation:fadeIn 1s ease forwards;animation-delay:2.6s}
/* 193 agentes */
.agents{display:grid;grid-template-columns:repeat(17,1fr);gap:9px}
.agents i{display:block;aspect-ratio:1;border-radius:7px;background:rgba(107,45,172,.12)}
.active .agents i{animation:agent .5s ease forwards;animation-delay:var(--t)}
@keyframes agent{to{background:linear-gradient(140deg,#6B2DAC,#D23CA0)}}
/* tabla industrias */
.tbl{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0 8px;font-size:19px}
.tbl col.c1{width:290px}.tbl col.c3{width:560px}
.tbl th{text-align:left;font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6E5A85;padding:0 22px}
.tbl td{background:#fff;padding:12px 22px;line-height:1.32;vertical-align:middle}
.tbl td:first-child{border-radius:18px 0 0 18px;font-weight:600}
.tbl td:last-child{border-radius:0 18px 18px 0;color:#B33F0C}
.tbl td.ch{color:var(--ink)}
/* UI */
#ui{position:fixed;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08);z-index:9}
#ui i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--pink),var(--orange));transition:width .5s ease}
#hint{position:fixed;right:18px;bottom:14px;font:500 13px var(--f);color:rgba(255,255,255,.45);z-index:9;transition:opacity 1s}
.static .a,.static .fade{opacity:1!important;transform:none!important;animation:none!important}
.static .draw{stroke-dashoffset:0!important;animation:none!important}
.static .bar i{width:var(--w)!important;transition:none!important}
.static .agents i{background:linear-gradient(140deg,#6B2DAC,#D23CA0)!important;animation:none!important}
.static #map circle.d{opacity:.45!important;animation:none!important}
.static #map .lbl{opacity:1!important;animation:none!important}
.static #map .ring{animation:none!important}
.static .slide{transition:none!important}
.static #ui,.static #hint{display:none}

#rotate{display:none;position:fixed;left:16px;right:16px;bottom:22px;text-align:center;font:500 14px var(--f);color:rgba(255,255,255,.75);z-index:9;pointer-events:none}
#rotate svg{width:22px;height:22px;vertical-align:-6px;margin-right:8px;stroke:currentColor;fill:none;stroke-width:1.8}
@media (hover:none) and (pointer:coarse){#hint{display:none}}
@media (orientation:portrait) and (max-width:900px){#rotate{display:block}#hint{display:none}}
.static #rotate{display:none!important}
.contacts a{color:#fff;text-decoration:none;display:flex;align-items:center;gap:12px;font-size:22px;font-weight:500}
.contacts a:hover{color:#FFD2EE}
.contacts svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}