:root{--bg:#02050c;--ink:#eafcff;--mut:#93b6c6;--cy:#00e5ff;--mg:#ff2bd6;--yl:#ffd23f;--or:#ff8a2b;--rd:#ff3b4f;--gr:#3dff8a;--line:rgba(0,229,255,.2);--card:rgba(8,18,36,.74);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;overflow-x:hidden}
a{color:var(--cy);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.grid-bg{position:fixed;inset:0;z-index:-3;background:radial-gradient(ellipse at 15% 0%,rgba(0,229,255,.13),transparent 55%),radial-gradient(ellipse at 90% 40%,rgba(255,43,214,.11),transparent 50%),linear-gradient(rgba(0,229,255,.04) 1px,transparent 1px) 0 0/52px 52px,linear-gradient(90deg,rgba(0,229,255,.04) 1px,transparent 1px) 0 0/52px 52px,var(--bg)}
/* ---------- barra de oferta y cabecera */
.promo{position:relative;z-index:60;background:linear-gradient(90deg,#ff2bd6,#7b2bff 45%,#00b8d4);color:#fff;font-weight:700;font-size:14px;text-align:center;padding:8px 14px;overflow:hidden}
.promo a{color:#fff;text-decoration:underline;margin-left:8px}.promo:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:shine 4s infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
header.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(2,5,12,.72);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:18px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em;color:#fff;font-size:18px}.brand:hover{text-decoration:none}.brand img{width:34px;height:34px;border-radius:9px;box-shadow:0 0 18px rgba(0,229,255,.45)}.brand span b{color:var(--cy)}
nav.menu{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}nav.menu a{color:var(--mut);font-size:14px}nav.menu a:hover{color:#fff;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:14px;font-weight:800;border:1px solid var(--cy);color:#fff;background:linear-gradient(90deg,rgba(0,229,255,.2),rgba(255,43,214,.2));box-shadow:0 0 24px rgba(0,229,255,.22);cursor:pointer;font-size:15px;transition:transform .2s,filter .2s,box-shadow .2s;font-family:inherit}
.btn:hover{text-decoration:none;transform:translateY(-2px);filter:brightness(1.15);box-shadow:0 10px 40px rgba(0,229,255,.35)}
.btn.solid{background:linear-gradient(90deg,#00c6e0,#d21fb0);border-color:transparent;position:relative;overflow:hidden}.btn.solid:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-120%);animation:shine 3.2s infinite}
.btn.small{padding:8px 14px;font-size:13px;border-radius:11px}.btn.big{padding:17px 28px;font-size:18px;border-radius:16px}
/* ---------- portada */
.hero{position:relative;min-height:92vh;display:grid;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);isolation:isolate}
.hero .bgimg{position:absolute;inset:-4%;background:url(img/clima-viento.webp) center/cover;filter:saturate(1.25) brightness(.8);animation:kb 26s ease-in-out infinite alternate;z-index:-3}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2%,-2%)}}
.hero:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(2,5,12,.92) 0%,rgba(2,5,12,.6) 42%,rgba(2,5,12,0) 75%),linear-gradient(0deg,var(--bg),transparent 30%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.6;mix-blend-mode:screen}
.hero .wrap{padding-block:60px 90px}
.kicker{display:inline-flex;gap:8px;align-items:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cy);border:1px solid var(--line);padding:6px 12px;border-radius:999px;background:rgba(0,229,255,.07);backdrop-filter:blur(6px)}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--rd);box-shadow:0 0 12px var(--rd);animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.25}}
h1{font-size:clamp(40px,6.6vw,84px);line-height:1;margin:18px 0 16px;letter-spacing:-.025em;max-width:900px}
.rot{display:inline-block;position:relative;color:transparent;background:linear-gradient(90deg,var(--cy),#9af7ff 40%,var(--mg));-webkit-background-clip:text;background-clip:text;min-width:3ch}
.rot.swap{animation:swap .5s}@keyframes swap{from{opacity:0;transform:translateY(18px);filter:blur(6px)}}
.lead{font-size:clamp(17px,2vw,21px);color:#d6edf5;max-width:700px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}.cta small{color:var(--mut)}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:#bfe3ee;font-size:14px}.trust span:before{content:"✓ ";color:var(--gr);font-weight:800}
/* ---------- cinta de sismos en vivo */
.ticker{border-block:1px solid var(--line);background:rgba(4,10,22,.85);overflow:hidden;white-space:nowrap;font-size:14px}
.ticker .lbl{position:absolute;z-index:2;background:linear-gradient(90deg,#ff3b4f,#ff2bd6);color:#fff;font-weight:800;padding:9px 14px;letter-spacing:.08em}
.ticker .track{display:inline-block;padding:9px 0 9px 100%;animation:tick 70s linear infinite}.ticker:hover .track{animation-play-state:paused}
.ticker .q{display:inline-block;margin-right:34px;color:#cfe7f0}.ticker .q b{display:inline-block;min-width:38px;text-align:center;border-radius:6px;padding:0 6px;margin-right:6px;color:#02050c}
@keyframes tick{to{transform:translateX(-100%)}}
/* ---------- secciones */
section{padding-block:90px;position:relative}
.sec-h{max-width:820px;margin-bottom:38px}.sec-h .k{display:inline-flex;gap:8px;align-items:center;color:var(--mg);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:800}.sec-h .k .n{color:#02050c;background:var(--mg);border-radius:6px;padding:1px 7px}
.sec-h h2{font-size:clamp(30px,4.4vw,52px);line-height:1.06;margin:10px 0 12px;letter-spacing:-.015em}.sec-h p{color:var(--mut);font-size:18px;margin:0}
.grad{background:linear-gradient(90deg,var(--cy),var(--mg));-webkit-background-clip:text;background-clip:text;color:transparent}
/* demostración con pestañas */
.demo{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start}
.tabs{display:flex;flex-direction:column;gap:10px}
.tab{all:unset;cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:13px 15px;transition:.25s;position:relative;overflow:hidden}
.tab b{display:block;font-size:16px}.tab span{font-size:13px;color:var(--mut)}
.tab.on{border-color:var(--cy);background:linear-gradient(90deg,rgba(0,229,255,.16),rgba(255,43,214,.1));box-shadow:0 0 30px rgba(0,229,255,.18)}
.tab .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--cy),var(--mg))}.tab.on .bar{animation:fill 6s linear forwards}@keyframes fill{to{width:100%}}
.screen{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(0,229,255,.35);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 60px rgba(0,229,255,.15);aspect-ratio:1350/661;background:#000}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s,transform 7s linear;transform:scale(1.04)}.screen img.on{opacity:1;transform:scale(1.11)}
.screen:after{content:"";position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(180deg,transparent,rgba(0,229,255,.14),transparent);animation:scan 4s linear infinite;pointer-events:none}
@keyframes scan{to{top:100%}}
.screen .live{position:absolute;right:14px;top:12px;z-index:2;background:rgba(255,59,79,.9);color:#fff;font:800 11px/1 "Segoe UI";letter-spacing:.14em;padding:6px 9px;border-radius:6px}
.screen .tl{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;height:6px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}.screen .tl i{display:block;height:100%;width:30%;background:linear-gradient(90deg,var(--cy),var(--mg));animation:tlr 6s linear infinite}@keyframes tlr{from{width:0}to{width:100%}}
/* tarjetas */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:20px;position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(0,229,255,.55)}
.card .ic{font-size:30px;line-height:1}.card h3{margin:10px 0 6px;font-size:18px}.card p{margin:0;color:var(--mut);font-size:15px}
/* bloques imagen + texto */
.show{display:grid;grid-template-columns:1.3fr 1fr;gap:38px;align-items:center;margin-bottom:80px}.show.rev{grid-template-columns:1fr 1.3fr}.show.rev .shot{order:2}
.shot{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 50px rgba(0,229,255,.12);transform:perspective(1200px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .25s}
.show h3{font-size:clamp(26px,3vw,38px);margin:8px 0 10px;line-height:1.1}.show p{color:#d3e7ef;font-size:17px}.show ul{padding-left:0;list-style:none;color:#bcd9e4}.show li{margin:9px 0;padding-left:28px;position:relative}.show li:before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,var(--cy),var(--mg))}
.tag{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid;font-weight:800}
.tag.c{color:var(--cy);border-color:rgba(0,229,255,.5)}.tag.q{color:var(--mg);border-color:rgba(255,43,214,.5)}.tag.w{color:var(--gr);border-color:rgba(61,255,138,.5)}.tag.y{color:var(--yl);border-color:rgba(255,210,63,.5)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:10px}
.stat{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:16px}.stat b{display:block;font-size:34px;line-height:1.1;background:linear-gradient(90deg,#fff,#9af7ff);-webkit-background-clip:text;background-clip:text;color:transparent}.stat span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
/* sismos */
.quake-stage{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,43,214,.35);aspect-ratio:16/10;background:radial-gradient(ellipse at 60% 40%,#140a24,#02050c)}
.quake-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.quake-stage .lab{position:absolute;left:14px;top:12px;font:800 12px/1.3 "Segoe UI";letter-spacing:.12em;color:#ffb3f0;text-transform:uppercase}
.quake-stage .mag{position:absolute;right:16px;top:12px;font:800 44px/1 "Segoe UI";color:#fff;text-shadow:0 0 24px var(--mg)}
/* ciudad 3D */
.city{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.city figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--card);position:relative;transition:transform .3s}
.city figure:hover{transform:translateY(-6px) scale(1.01)}.city img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform 6s}.city figure:hover img{transform:scale(1.12)}
.city figcaption{padding:14px 16px}.city figcaption b{display:block;font-size:17px}.city figcaption span{color:var(--mut);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.chips span{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;background:rgba(0,229,255,.05)}
/* grabación */
.studio{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center}
.render{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:20px}
.render .row{display:flex;justify-content:space-between;font-size:14px;color:var(--mut);margin-bottom:6px}.render .pb{height:12px;border-radius:7px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:16px}.render .pb i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cy),var(--mg));animation:rend 7s ease-in-out infinite}
@keyframes rend{0%{width:0}85%,100%{width:100%}}
.formats{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}.formats span{border:1px solid rgba(255,210,63,.4);color:#ffe49a;border-radius:10px;padding:6px 10px;font-size:13px;font-weight:700}
.chat{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px;font-size:14px}.chat .u{color:#fff}.chat .a{color:#9af7ff;min-height:44px}
/* precios */
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;background:var(--card);margin-bottom:26px}
.toggle button{all:unset;cursor:pointer;padding:9px 18px;border-radius:999px;font-weight:800;font-size:14px;color:var(--mut)}.toggle button.on{background:linear-gradient(90deg,#00c6e0,#d21fb0);color:#fff}.toggle em{font-style:normal;background:var(--yl);color:#02050c;border-radius:6px;padding:1px 6px;margin-left:6px;font-size:11px}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;max-width:900px}
.price{border:1px solid var(--line);background:var(--card);border-radius:24px;padding:28px;position:relative;transition:transform .3s}
.price.best{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--cy),var(--mg),var(--yl)) border-box;box-shadow:0 0 70px rgba(255,43,214,.22);transform:scale(1.03)}
.price .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(90deg,var(--yl),#ff9d2b);color:#02050c;font-size:13px;font-weight:900;padding:6px 14px;border-radius:999px;letter-spacing:.04em;box-shadow:0 0 24px rgba(255,210,63,.45)}
.price h3{margin:0;font-size:15px;color:var(--mut);text-transform:uppercase;letter-spacing:.16em}
.price .was{color:#ff8fa0;text-decoration:line-through;font-weight:700;font-size:18px;margin-top:8px}
.price .amt{font-size:64px;font-weight:900;line-height:1;margin:4px 0}.price .amt small{font-size:18px;color:var(--mut);font-weight:700}
.price .bill{color:#cfe7f0;font-size:15px}.price .save{display:inline-block;margin-top:8px;background:rgba(61,255,138,.14);color:var(--gr);border:1px solid rgba(61,255,138,.4);border-radius:8px;padding:4px 10px;font-weight:800;font-size:14px}
.price ul{list-style:none;padding:0;margin:18px 0 24px}.price li{padding:7px 0;border-bottom:1px dashed rgba(0,229,255,.12);color:#d6eef6}.price li:before{content:"✓  ";color:var(--gr);font-weight:900}
.price .btn{width:100%}
.guar{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}.guar div{flex:1 1 200px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:rgba(0,229,255,.04);font-size:14px;color:#cfe7f0}.guar b{display:block;color:#fff}
.note{color:var(--mut);font-size:14px}
.faq details{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:14px 18px;margin-bottom:10px}.faq summary{cursor:pointer;font-weight:700}.faq p{color:var(--mut);margin:10px 0 0}
.final{text-align:center;border:1px solid var(--line);border-radius:26px;padding:56px 22px;background:radial-gradient(ellipse at 50% 0%,rgba(255,43,214,.22),transparent 60%),radial-gradient(ellipse at 50% 100%,rgba(0,229,255,.2),transparent 60%),var(--card);position:relative;overflow:hidden}
.final h2{font-size:clamp(30px,4.6vw,54px);margin:0 0 10px;line-height:1.05}.final p{color:#cfe7f0;font-size:18px;margin:0 auto 22px;max-width:640px}
.sticky-buy{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;display:none;gap:10px;align-items:center;justify-content:space-between;background:rgba(6,12,28,.92);border:1px solid var(--cy);border-radius:16px;padding:10px 12px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.6)}
.sticky-buy b{font-size:14px}.sticky-buy small{display:block;color:var(--gr);font-size:12px}
footer{border-top:1px solid var(--line);padding-block:40px 90px;color:var(--mut);font-size:14px;background:rgba(2,5,12,.85)}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}footer h4{color:#fff;margin:0 0 8px;font-size:14px;letter-spacing:.1em;text-transform:uppercase}footer a{color:var(--mut);display:block;margin:4px 0}
.legal{max-width:860px}.legal h1{font-size:clamp(30px,4vw,44px)}.legal h2{margin-top:34px;font-size:22px;color:#fff}.legal p,.legal li{color:#cfe1ea}
.box{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:22px}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s}.reveal.on{opacity:1;transform:none}
@media (max-width:960px){.demo{grid-template-columns:1fr}.tabs{flex-direction:row;overflow-x:auto}.tab{min-width:180px}.show,.show.rev,.studio{grid-template-columns:1fr}.show.rev .shot{order:0}.city{grid-template-columns:1fr}.price.best{transform:none}nav.menu{display:none}.sticky-buy{display:flex}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}