:root{
  --bg:#050A07; --bg-2:#0A140E; --card:#0E1A13; --line:#1C2E23; --line-2:#2A4434;
  --text:#F2F7F3; --muted:#8FA597; --neon:#00FF41; --neon-dim:#00C838; --on-neon:#021407;
  --amber:#FFB020; --red:#FF4D3A;
  --glow:0 0 24px rgba(0,255,65,.45);
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* La marca es oscura en ambos modos: los tokens se mantienen iguales a propósito */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#050A07; --text:#F2F7F3; } }
:root[data-theme="dark"]{ --bg:#050A07; --text:#F2F7F3; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px); background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:100; background:repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); mix-blend-mode:overlay}
a{color:inherit} button{font:inherit; color:inherit; cursor:pointer}
::selection{background:var(--neon); color:var(--on-neon)}
:focus-visible{outline:3px solid var(--neon); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--display); line-height:1; letter-spacing:-.03em; margin:0}
h2{font-size:clamp(2.3rem,6vw,4.4rem); font-weight:800; letter-spacing:-.045em}
h3{font-size:1.3rem; font-weight:700; letter-spacing:-.01em}
p{margin:0}
.neon{color:var(--neon); text-shadow:var(--glow)}
.wrap{width:min(1200px,100% - 40px); margin-inline:auto}
.lede{color:var(--muted); font-size:1.14rem; max-width:60ch}
section{padding:120px 0; position:relative}
.sec-head{display:grid; gap:20px; margin-bottom:56px; max-width:820px}
[data-view]{display:none} [data-view].on{display:block}
#cursorGlow{position:fixed; left:0; top:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; background:radial-gradient(circle, rgba(0,255,65,.10), transparent 62%); pointer-events:none; z-index:0; will-change:transform; opacity:0; transition:opacity .4s}
main,footer{position:relative; z-index:1}

/* header */
header.top{position:fixed; top:0; left:0; right:0; z-index:50; padding-top:env(safe-area-inset-top,0px); transition:background .3s, border-color .3s; border-bottom:1px solid transparent}
header.top.solid{background:rgba(5,10,7,.82); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.top .wrap{display:flex; align-items:center; gap:20px; height:70px}
.logo{font-family:var(--display); font-weight:800; font-size:1.6rem; letter-spacing:-.04em; text-decoration:none; display:flex; align-items:center; gap:8px}
.logo i{width:12px; height:12px; border-radius:50%; background:var(--neon); box-shadow:var(--glow); animation:pulse 2s infinite}
.logo small{font-family:var(--body); font-weight:600; font-size:.78rem; letter-spacing:0; padding:3px 9px; border-radius:99px; border:1.5px solid var(--neon); color:var(--neon)}
@keyframes pulse{50%{box-shadow:0 0 6px rgba(0,255,65,.3)}}
nav.main{display:flex; gap:2px; margin-left:auto}
nav.main a{text-decoration:none; padding:8px 12px; border-radius:99px; font-weight:500; font-size:.95rem; color:var(--muted); transition:color .2s}
nav.main a:hover{color:var(--text)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:99px; padding:16px 28px; font-weight:600; font-size:1rem; text-decoration:none; transition:transform .15s, box-shadow .2s, background .2s; white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-neon{background:var(--neon); color:var(--on-neon); box-shadow:0 0 0 rgba(0,255,65,0)}
.btn-neon:hover{box-shadow:0 0 32px rgba(0,255,65,.55)}
.btn-ghost{background:transparent; border:1.5px solid var(--line-2); color:var(--text)}
.btn-ghost:hover{border-color:var(--neon); color:var(--neon)}
.btn-sm{padding:10px 18px; font-size:.95rem}
.menu-btn{display:none; margin-left:auto; background:transparent; border:1.5px solid var(--line-2); border-radius:99px; padding:8px 16px; font-weight:600}
@media (max-width:980px){
  nav.main{display:none; position:absolute; top:70px; left:12px; right:12px; flex-direction:column; background:var(--card); border:1px solid var(--line-2); border-radius:20px; padding:10px}
  nav.main.open{display:flex}
  nav.main a{padding:13px 14px; color:var(--text)}
  .menu-btn{display:block}
  .top .cta-top{display:none}
}

/* ===== HERO + CALCULATOR ===== */
.hero{padding:150px 0 80px; min-height:100svh; display:flex; align-items:center; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background:linear-gradient(var(--line) 1px, transparent 1px) 0 0/56px 56px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/56px 56px; opacity:.45; mask-image:radial-gradient(ellipse at 70% 45%, #000 10%, transparent 70%)}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center}
.ring{display:inline-flex; align-items:center; gap:10px; color:var(--neon); font-weight:600; font-size:.95rem; margin-bottom:22px}
.ring i{width:10px; height:10px; border-radius:50%; background:var(--neon); box-shadow:var(--glow); animation:ring 1.2s infinite}
@keyframes ring{50%{transform:scale(1.6); opacity:.4}}
.hero h1{font-size:clamp(2.8rem,6.2vw,5.4rem); font-weight:800; letter-spacing:-.055em; line-height:.9}
.hero h1 .l2{display:block; color:var(--neon); text-shadow:0 0 40px rgba(0,255,65,.35)}
.hero .lede{margin:26px 0 0; font-size:1.2rem}
.calc{position:relative; background:linear-gradient(180deg, var(--card), var(--bg-2)); border:1px solid var(--line-2); border-radius:30px; padding:30px; box-shadow:0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04)}
.calc-bot{position:absolute; right:-22px; top:-118px; width:118px; aspect-ratio:320/480; z-index:2; pointer-events:none}
.calc-bot svg{width:100%; height:100%; overflow:visible}
.calc h3{font-size:1.45rem; margin-bottom:6px; padding-right:80px}
.calc .sub{color:var(--muted); font-size:.95rem; margin-bottom:20px; padding-right:60px}
.f{display:grid; gap:6px; margin-bottom:14px}
.f label{font-size:.88rem; font-weight:600; color:var(--muted)}
.f select,.f input{width:100%; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line-2); background:var(--bg); color:var(--text); font:inherit; font-size:1rem; appearance:none; -webkit-appearance:none}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--neon) 50%),linear-gradient(135deg,var(--neon) 50%,transparent 50%); background-position:calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size:6px 6px; background-repeat:no-repeat}
.f select:focus,.f input:focus{border-color:var(--neon); outline:none; box-shadow:0 0 0 4px rgba(0,255,65,.15)}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){.f2{grid-template-columns:1fr; gap:0}}
.calc .btn{width:100%; margin-top:6px}
.result{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s}
.result.on{grid-template-rows:1fr}
.result>div{overflow:hidden}
.result .inner{margin-top:22px; padding-top:22px; border-top:1px dashed var(--line-2)}
.money{font-family:var(--display); font-weight:800; font-size:clamp(3rem,6vw,4.4rem); letter-spacing:-.05em; line-height:1; color:var(--red); text-shadow:0 0 30px rgba(255,77,58,.35)}
.money-lbl{color:var(--text); font-weight:600; margin-top:6px}
.breakdown{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0}
.breakdown div{background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:12px}
.breakdown strong{display:block; font-family:var(--display); font-size:1.5rem; letter-spacing:-.03em}
.breakdown span{font-size:.8rem; color:var(--muted); line-height:1.3; display:block}
.note{font-size:.8rem; color:var(--muted); margin-top:12px}
@media (max-width:980px){
  .hero{padding-top:120px}
  .hero .wrap{grid-template-columns:1fr; gap:60px}
  .calc-bot{width:96px; top:-96px; right:4px}
  .calc{padding:22px}
}

/* marquee */
.marquee{border-block:1px solid var(--line); overflow:hidden; padding:20px 0; background:var(--bg-2)}
.marquee .track{display:flex; gap:44px; width:max-content; animation:mq 40s linear infinite; font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--muted)}
.marquee .track span:nth-child(3n){color:var(--neon)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ===== ROBOT SCROLL STAGE ===== */
#transform{position:relative; height:430vh; padding:0}
.stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.stage::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--gx,50%) 58%, rgba(0,255,65,calc(var(--g,0) * .25)), transparent 45%)}
.mark{position:absolute; left:0; width:1px; height:1px}
#robot{position:absolute; left:0; top:0; width:var(--rw); aspect-ratio:320/480; will-change:transform; z-index:3; cursor:pointer; -webkit-tap-highlight-color:transparent}
:root{--rw:min(38vh,350px)}
#robot svg{width:100%; height:100%; overflow:visible}
.rb-shell{fill:#F2F7F3; stroke:#050A07; stroke-width:6}
.rb-dark{fill:#050A07}
.rb-green{fill:#00C838; stroke:#050A07; stroke-width:6}
.rb-eye{fill:#00FF41}
.rb-core{fill:#00FF41}
.rb-flame{fill:#FFB020}
.flame-anim{transform-box:fill-box; transform-origin:top center; animation:flame .16s infinite alternate}
@keyframes flame{to{transform:scaleY(.65)}}
.caption{position:absolute; left:max(20px, calc((100% - 1200px)/2)); top:calc(100px + env(safe-area-inset-top,0px)); width:min(470px, calc(100% - 40px)); z-index:5; opacity:0; transform:translateY(18px); transition:opacity .45s, transform .45s; pointer-events:none}
.caption.on{opacity:1; transform:none; pointer-events:auto}
.caption .k{font-weight:600; color:var(--neon); font-size:.95rem; margin-bottom:12px; display:block}
.caption h2{font-size:clamp(2.3rem,5.2vw,4.4rem)}
.caption p{color:var(--muted); font-size:1.08rem; margin-top:16px}
.rail{position:absolute; right:max(16px, calc((100% - 1200px)/2)); top:50%; transform:translateY(-50%); z-index:6; display:grid; gap:4px}
.rail button{display:flex; align-items:center; justify-content:flex-end; gap:10px; background:none; border:0; padding:5px 0; color:var(--muted); font-size:.85rem}
.rail button i{width:8px; height:8px; border-radius:50%; background:var(--line-2); transition:all .3s}
.rail button.on{color:var(--text)}
.rail button.on i{background:var(--neon); box-shadow:var(--glow); transform:scale(1.5)}
.city{position:absolute; right:max(0px, calc((100% - 1200px)/2 - 20px)); top:56%; width:min(580px,52vw); aspect-ratio:1; z-index:2; opacity:0; perspective:1400px; pointer-events:none}
.plane{position:absolute; inset:12%; transform:rotateX(58deg) rotateZ(-45deg); transform-style:preserve-3d; display:grid; grid-template-columns:repeat(5,1fr); gap:9%; padding:6%; background:#0A1F14; border-radius:18px; box-shadow:0 0 0 2px var(--line-2), 0 0 80px rgba(0,255,65,.08)}
.blk{border-radius:6px; background:#1E3328; transition:background .4s, box-shadow .4s; box-shadow:4px 4px 0 #142219, 8px 8px 0 #0E1913}
.blk.rival{background:#3A1F1B; box-shadow:4px 4px 0 #2A1512, 8px 8px 0 #1F0F0D}
.blk.lit{background:#00C838; box-shadow:4px 4px 0 #009A2B, 8px 8px 0 #007520, 0 0 30px rgba(0,255,65,.5)}
.blk.me{background:#F2F7F3; box-shadow:4px 4px 0 #B9C7BE, 8px 8px 0 #93A69A, 12px 12px 0 #728A7C, 0 0 40px rgba(255,255,255,.3)}
.pin{position:absolute; left:50%; top:42%; width:16%; transform:translate(-50%,-100%); z-index:3; opacity:0; filter:drop-shadow(0 0 20px rgba(0,255,65,.6))}
.pin-label{position:absolute; left:50%; top:5%; transform:translateX(-50%); background:var(--neon); color:var(--on-neon); font-weight:700; padding:6px 14px; border-radius:99px; white-space:nowrap; font-size:.9rem; opacity:0; box-shadow:var(--glow)}
.mod{position:absolute; z-index:4; opacity:0; background:var(--card); border:1px solid var(--line-2); padding:14px 18px; border-radius:18px; width:220px; pointer-events:none}
.mod strong{display:block; font-family:var(--display); font-size:1.15rem; color:var(--neon)}
.mod span{color:var(--muted); font-size:.86rem; line-height:1.35; display:block; margin-top:4px}
.plans{position:absolute; left:50%; top:63%; transform:translate(-50%,-50%); width:min(1000px, calc(100% - 40px)); display:grid; grid-template-columns:repeat(3,1fr); gap:16px; z-index:5; pointer-events:none}
.plans.live{pointer-events:auto}
.plan{background:var(--card); border:1.5px solid var(--line-2); border-radius:26px; padding:24px; display:flex; flex-direction:column; gap:10px; opacity:0; will-change:transform,opacity}
.plan.hot{border-color:var(--neon); box-shadow:0 0 50px rgba(0,255,65,.2)}
.plan .tag{align-self:flex-start; font-size:.78rem; font-weight:700; background:var(--neon); color:var(--on-neon); padding:3px 10px; border-radius:99px}
.plan .price{font-family:var(--display); font-weight:800; font-size:3.2rem; letter-spacing:-.05em; line-height:1}
.plan.hot .price{color:var(--neon); text-shadow:var(--glow)}
.plan .price small{font-size:.9rem; letter-spacing:0; font-weight:600; color:var(--muted); text-shadow:none}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:.92rem; flex:1; color:var(--muted)}
.plan li{padding-left:22px; position:relative}
.plan li::before{content:""; position:absolute; left:2px; top:.42em; width:10px; height:6px; border-left:2.5px solid var(--neon); border-bottom:2.5px solid var(--neon); transform:rotate(-45deg)}
.plan .btn{width:100%; padding:13px}
.plan-foot{font-size:.85rem; color:var(--muted); text-align:center; grid-column:1/-1}
@media (max-width:860px){
  :root{--rw:min(25vh,200px)}
  #transform{height:400vh}
  .caption{top:calc(84px + env(safe-area-inset-top,0px))}
  .caption h2{font-size:clamp(2rem,9vw,2.8rem)}
  .caption p{font-size:.98rem; margin-top:10px}
  .rail{display:none}
  .city{left:50%; right:auto; top:auto; bottom:calc(0px + env(safe-area-inset-bottom,0px)); width:min(340px,88%)}
  .plans{top:auto; bottom:calc(14px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); grid-template-columns:1fr; gap:8px}
  .plan{flex-direction:row; flex-wrap:wrap; align-items:center; padding:12px 16px; gap:4px 12px; border-radius:18px}
  .plan h3{font-size:1.05rem; flex:1}
  .plan .price{font-size:1.6rem}
  .plan ul,.plan .tag{display:none}
  .plan .btn{padding:9px}
  .plan-foot{display:none}
  .mod{width:calc(50% - 26px); padding:10px 12px}
  .mod strong{font-size:1rem} .mod span{font-size:.78rem}
}

/* exclusivity */
.excl{display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center}
.excl h2{font-size:clamp(2.6rem,7vw,5.6rem); line-height:.92}
.lock{background:var(--card); border:1.5px solid var(--neon); border-radius:30px; padding:30px; box-shadow:0 0 60px rgba(0,255,65,.12)}
.lock h3{margin-bottom:6px}
.lock p{color:var(--muted); font-size:.95rem; margin-bottom:18px}
.seat{display:flex; gap:8px; margin:6px 0 20px}
.seat i{flex:1; height:10px; border-radius:99px; background:var(--line-2)}
.seat i.taken{background:var(--red)}
.seat i.free{background:var(--neon); box-shadow:var(--glow)}
@media (max-width:980px){.excl{grid-template-columns:1fr}}

/* cases */
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.case{background:var(--card); border:1px solid var(--line); border-radius:26px; padding:26px; display:flex; flex-direction:column; gap:16px; position:relative}
.case .who{font-weight:600; color:var(--muted); font-size:.92rem}
.case h3{font-size:1.5rem}
.metric{display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:12px 0; border-top:1px solid var(--line); font-size:.93rem}
.metric .a{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--red)}
.metric .b{font-family:var(--display); font-weight:800; font-size:1.25rem; color:var(--neon)}
.case .pending{position:absolute; top:14px; right:14px; background:var(--amber); color:#241800; font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:99px}
@media (max-width:980px){.cases{grid-template-columns:1fr}}

/* guarantee */
.promise{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:28px; overflow:hidden}
.promise div{background:var(--bg-2); padding:34px}
.promise strong{display:block; font-family:var(--display); font-size:2rem; font-weight:800; letter-spacing:-.04em; color:var(--neon); margin-bottom:10px}
.promise p{color:var(--muted)}
@media (max-width:860px){.promise{grid-template-columns:1fr}}

/* services */
.svc-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.svc{grid-column:span 4; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:10px; transition:border-color .25s, box-shadow .25s}
.svc:hover{border-color:var(--neon); box-shadow:0 0 30px rgba(0,255,65,.12)}
.svc.big{grid-column:span 6}
.svc .tag{font-size:.82rem; font-weight:600; color:var(--neon)}
.svc p{color:var(--muted); font-size:.95rem}
.svc .more{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s}
.svc .more>div{overflow:hidden}
.svc[aria-expanded="true"]{border-color:var(--neon)}
.svc[aria-expanded="true"] .more{grid-template-rows:1fr}
.svc ul{margin:8px 0 0; padding-left:18px; font-size:.93rem; color:var(--text)}
.svc .hint{margin-top:10px; font-weight:600; color:var(--neon)}
@media (max-width:860px){.svc,.svc.big{grid-column:span 12}}

/* AI */
.ai-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:30px; align-items:start}
.chat{background:var(--card); border:1px solid var(--line-2); border-radius:28px; display:flex; flex-direction:column; height:600px; overflow:hidden}
.chat-head{display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line)}
.chat-head .dot{width:10px; height:10px; border-radius:50%; background:var(--neon); box-shadow:var(--glow)}
.chat-head small{margin-left:auto; color:var(--muted); font-size:.82rem}
.chat-log{flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:12px}
.msg{max-width:86%; padding:12px 16px; border-radius:18px; font-size:.95rem; white-space:pre-wrap; overflow-wrap:anywhere}
.msg.me{align-self:flex-end; background:var(--neon); color:var(--on-neon); border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start; background:var(--bg-2); border:1px solid var(--line); border-bottom-left-radius:4px}
.msg.bot strong{color:var(--neon)}
.msg.think{color:var(--muted); font-style:italic}
.chat-form{display:flex; gap:8px; padding:14px; border-top:1px solid var(--line)}
.chat-form input{flex:1; min-width:0; padding:13px 16px; border-radius:12px; border:1.5px solid var(--line-2); background:var(--bg); color:var(--text); font:inherit; font-size:.95rem}
.chat-form input:focus{border-color:var(--neon); outline:none}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.chip{border:1.5px solid var(--line-2); background:transparent; padding:9px 14px; border-radius:99px; font-size:.9rem; font-weight:500; text-align:left; color:var(--text)}
.chip:hover{border-color:var(--neon); color:var(--neon)}
@media (max-width:860px){.ai-grid{grid-template-columns:1fr} .chat{height:520px}}

/* faq */
.faq{display:grid; grid-template-columns:.8fr 1.2fr; gap:40px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none; cursor:pointer; padding:22px 44px 22px 0; font-family:var(--display); font-weight:700; font-size:1.2rem; position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; border-right:2.5px solid var(--neon); border-bottom:2.5px solid var(--neon); transform:translateY(-70%) rotate(45deg); transition:transform .25s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{padding:0 0 22px; color:var(--muted); max-width:66ch}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

.strip{border-radius:32px; padding:44px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; border:1px solid var(--line-2); background:var(--card)}
.strip p{color:var(--muted); max-width:56ch; margin-top:10px}
.strip.game{background:var(--neon); color:var(--on-neon); border-color:var(--neon); box-shadow:0 0 80px rgba(0,255,65,.25)}
.strip.game p{color:#0D4020}
.strip.game .btn{background:var(--bg); color:var(--neon)}
.final h2{font-size:clamp(2.8rem,8vw,6.4rem); line-height:.9; max-width:13ch}
.final .row{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}

footer{border-top:1px solid var(--line); padding:40px 0 110px; color:var(--muted); font-size:.92rem}
footer .wrap{display:flex; flex-wrap:wrap; gap:18px 30px; justify-content:space-between}
footer nav{display:flex; flex-wrap:wrap; gap:8px 20px}
footer a,footer button.link{text-decoration:none; background:none; border:0; padding:0; color:inherit; font-size:inherit}
footer a:hover,footer button.link:hover{color:var(--neon)}

/* sticky whatsapp */
.wa-float{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:60; display:flex; align-items:center; gap:10px; background:var(--neon); color:var(--on-neon); padding:14px 22px; border-radius:99px; font-weight:700; text-decoration:none; box-shadow:0 0 40px rgba(0,255,65,.45); transform:translateY(140%); transition:transform .4s}
.wa-float.on{transform:none}
.wa-float i{width:9px; height:9px; border-radius:50%; background:var(--on-neon); animation:ring 1.2s infinite}
@media (max-width:640px){.wa-float{left:12px; right:12px; justify-content:center}}

/* empresas */
.ent-hero{padding:160px 0 90px; overflow:hidden}
.ent-hero .grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.ent-hero h1{font-size:clamp(2.8rem,7vw,6rem); font-weight:800; letter-spacing:-.05em; line-height:.92}
.ent-hero p{color:var(--muted); font-size:1.15rem; margin:24px 0 32px; max-width:56ch}
.ent-bot{width:min(300px,70%); margin-inline:auto; aspect-ratio:320/480; animation:float 4s ease-in-out infinite}
.ent-bot svg{width:100%; height:100%; overflow:visible}
@keyframes float{50%{transform:translateY(-14px)}}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:24px; overflow:hidden}
.pillars div{background:var(--bg-2); padding:30px}
.pillars h3{color:var(--text)}
.pillars p{color:var(--muted); margin-top:10px; font-size:.96rem}
.steps{display:grid; grid-template-columns:repeat(4,1fr)}
.step{padding:26px 26px 26px 0; border-top:3px solid var(--neon)}
.step .n{font-family:var(--display); font-weight:800; color:var(--neon); margin-bottom:26px; display:block}
.step p{color:var(--muted); font-size:.95rem; margin-top:10px}
.models{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.model{border:1.5px solid var(--line-2); border-radius:24px; padding:32px; display:flex; flex-direction:column; gap:12px; background:var(--card)}
.model.hot{border-color:var(--neon); box-shadow:0 0 50px rgba(0,255,65,.15)}
.model p{color:var(--muted)}
@media (max-width:860px){.ent-hero .grid,.models{grid-template-columns:1fr} .pillars{grid-template-columns:1fr} .ent-bot{width:200px} .steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* legal */
.legal{padding:140px 0 90px}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800; letter-spacing:-.04em; margin-bottom:12px}
.legal h2{font-size:1.45rem; margin:40px 0 12px; letter-spacing:-.01em}
.legal p,.legal li{color:var(--muted); margin-bottom:12px}
.legal ul{padding-left:20px}
.legal table{width:100%; border-collapse:collapse; font-size:.92rem; margin:12px 0 20px}
.legal th,.legal td{text-align:left; padding:10px; border-bottom:1px solid var(--line); vertical-align:top}
.legal th{color:var(--text)}
.legal .tbl{overflow-x:auto}
.fill{background:rgba(255,176,32,.25); color:var(--amber); padding:0 4px; border-radius:4px; font-weight:600}
.updated{font-size:.9rem; color:var(--muted)}
.legal .btn-deep{background:var(--neon); color:var(--on-neon)}

/* cookies + dialogs */
.cookie-bar{position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:80; max-width:760px; margin-inline:auto; background:var(--card); color:var(--text); border:1px solid var(--line-2); border-radius:22px; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.6); display:none}
.cookie-bar.on{display:block}
.cookie-bar p{font-size:.93rem; color:var(--muted)}
.cookie-bar a{color:var(--neon)}
.cookie-bar .row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.cookie-bar .row .btn{flex:1 1 150px; padding:12px 18px}
.cookie-bar .btn-ghost{border-color:var(--line-2)}
.cookie-bar .btn-deep,.dlg .btn-deep{background:var(--neon); color:var(--on-neon)}
dialog{border:1px solid var(--line-2); border-radius:24px; padding:0; width:min(560px, calc(100% - 24px)); background:var(--card); color:var(--text); max-height:calc(100svh - 40px)}
dialog::backdrop{background:rgba(0,0,0,.7); backdrop-filter:blur(3px)}
.dlg{padding:28px}
.dlg h3{font-size:1.5rem; margin-bottom:10px}
.opt{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line)}
.opt p{font-size:.9rem; color:var(--muted); margin-top:4px}
.sw{position:relative; width:48px; height:28px; flex:none}
.sw input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.sw span{position:absolute; inset:0; border-radius:99px; background:var(--line-2); transition:background .2s; pointer-events:none}
.sw span::after{content:""; position:absolute; left:3px; top:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .2s}
.sw input:checked+span{background:var(--neon-dim)}
.sw input:checked+span::after{transform:translateX(20px)}
.sw input:disabled+span{opacity:.6}
.sw input:focus-visible+span{outline:3px solid var(--neon); outline-offset:2px}
#gameDlg{width:min(860px, calc(100% - 16px)); background:var(--bg)}
.game-stage{position:relative; aspect-ratio:16/10; touch-action:none}
#game{display:block; width:100%; height:100%}
.hud{position:absolute; top:12px; left:16px; right:96px; display:flex; justify-content:space-between; font-weight:600; pointer-events:none}
.g-over{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px; background:rgba(5,10,7,.86)}
.g-over[hidden]{display:none}
.g-over h3{font-size:2rem; margin-bottom:8px}
.g-over p{color:var(--muted); margin-bottom:18px; max-width:44ch}
.g-over .btn-signal{background:var(--neon); color:var(--on-neon)}
.g-close{position:absolute; top:10px; right:10px; z-index:3; background:rgba(255,255,255,.12); border:0; border-radius:99px; padding:6px 12px; color:var(--text)}
@media (max-width:640px){.game-stage{aspect-ratio:3/4}}
.toast{position:fixed; left:50%; top:calc(86px + env(safe-area-inset-top,0px)); transform:translate(-50%,-16px); background:var(--neon); color:var(--on-neon); font-weight:600; padding:10px 18px; border-radius:99px; z-index:90; opacity:0; transition:all .3s; pointer-events:none; white-space:nowrap}
.toast.on{opacity:1; transform:translate(-50%,0)}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s, transform .7s}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1; transform:none}
  .caption,.result,.toast,.wa-float{transition:none}
}

/* ===== HERO with autoplay robot ===== */
.hero{padding:120px 0 60px; min-height:100svh}
.hero .wrap{grid-template-columns:1fr 1fr; gap:30px}
.hero h1 .kw{display:block; font-family:var(--body); font-size:clamp(.95rem,1.4vw,1.1rem); font-weight:600; letter-spacing:0; line-height:1.4; color:var(--neon); margin-bottom:20px}
.hero h1 .kw::before{content:""; display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--neon); box-shadow:var(--glow); margin-right:10px; vertical-align:1px; animation:ring 1.2s infinite}
.hero h1{position:relative}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hstage{position:relative; height:min(78svh,640px); min-height:420px}
.hstage::before{content:""; position:absolute; left:50%; top:52%; width:82%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(0,255,65,calc(.08 + var(--hg,0)*.22)), transparent 62%); transition:background .3s}
.hstage .orbit-ring{position:absolute; left:50%; top:52%; width:88%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; border:1px dashed var(--line-2); opacity:0; transition:opacity .8s}
.hstage.ready .orbit-ring{opacity:1}
#heroBot{position:absolute; left:50%; top:50%; width:min(46%,280px); aspect-ratio:320/480; transform:translate(-50%,-50%); cursor:pointer; z-index:2; -webkit-tap-highlight-color:transparent}
#heroBot svg{width:100%; height:100%; overflow:visible}
.hchip{position:absolute; left:50%; top:52%; z-index:3; padding:9px 15px; border-radius:99px; background:var(--card); border:1px solid var(--neon); color:var(--text); font-weight:600; font-size:.9rem; white-space:nowrap; opacity:0; box-shadow:0 0 22px rgba(0,255,65,.25); pointer-events:none; will-change:transform,opacity}
.hchip b{color:var(--neon)}
.scanline{position:absolute; top:-4%; bottom:-4%; width:3px; left:0; background:var(--neon); box-shadow:0 0 22px 6px rgba(0,255,65,.6); opacity:0; pointer-events:none; z-index:2}
.hero .lede{max-width:52ch}
@media (max-width:980px){
  .hero{padding-top:90px; min-height:0}
  .hero .wrap{grid-template-columns:1fr; gap:0}
  .hstage{order:-1; height:340px; min-height:0; margin:0 -20px}
  #heroBot{width:170px}
  .hchip{font-size:.8rem; padding:7px 11px}
}

/* calculator as its own section */
.calc-sec{padding:40px 0 100px}
.calc-sec .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center}
.calc-sec h2{font-size:clamp(2.2rem,5vw,3.8rem)}
.calc-bot{display:none}
.calc h3,.calc .sub{padding-right:0}
@media (max-width:980px){.calc-sec .wrap{grid-template-columns:1fr; gap:30px}}

/* SEO cities block */
.where{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px}
.where .lede+.lede{margin-top:16px}
.region{margin-bottom:26px}
.region h3{font-size:1.05rem; color:var(--muted); margin-bottom:12px; font-family:var(--body); font-weight:600}
.region.main h3{color:var(--neon)}
.links{display:flex; flex-wrap:wrap; gap:8px}
.links a{padding:8px 14px; border-radius:99px; border:1px solid var(--line-2); text-decoration:none; font-size:.92rem; transition:border-color .2s,color .2s}
.links a:hover{border-color:var(--neon); color:var(--neon)}
.region.main .links a{border-color:rgba(0,255,65,.45)}
@media (max-width:980px){.where{grid-template-columns:1fr; gap:30px}}

/* static plans (city pages) */
.plans-static{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.plans-static .plan{opacity:1}
.plans-foot{color:var(--muted); font-size:.92rem; margin-top:18px}
@media (max-width:860px){.plans-static{grid-template-columns:1fr}}

/* city page */
.crumbs{font-size:.88rem; color:var(--muted); margin-bottom:18px}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--neon)}
.local{display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:start}
.local .facts{display:grid; gap:10px}
.local .facts div{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 20px}
.local .facts strong{display:block; font-family:var(--display); font-size:1.4rem; color:var(--neon)}
.local .facts span{color:var(--muted); font-size:.92rem}
.barrios{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.barrios span{padding:7px 13px; border-radius:99px; background:var(--bg-2); border:1px solid var(--line); font-size:.9rem}
@media (max-width:980px){.local{grid-template-columns:1fr}}
.page-hero{padding:150px 0 70px}
.page-hero h1{font-size:clamp(2.6rem,6.5vw,5.4rem); font-weight:800; letter-spacing:-.05em; line-height:.92; max-width:16ch}
.page-hero .lede{margin-top:24px}

nav.main a{white-space:nowrap}
.hero .wrap>*{min-width:0} .hero h1{overflow-wrap:break-word}

/* ===================== v3: cambios octubre ===================== */
/* calculadora: sector escrito */
.f input.err{border-color:var(--red); box-shadow:0 0 0 4px rgba(255,77,58,.2); animation:shake .45s}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.f input::placeholder{color:#5E7566}

/* planes: precio sin periodo + qué incluye */
.plan .price{margin-top:2px}
.plan .pdesc{font-size:.9rem; line-height:1.4; color:var(--text); font-weight:500; padding:10px 12px; border-radius:14px; background:rgba(0,255,65,.07); border:1px solid rgba(0,255,65,.25)}
.plan ul{font-size:.88rem; gap:5px}
@media (max-width:860px){
  .plans .plan .pdesc{display:none}
  .plans-static .plan ul,.plans-static .plan .tag{display:grid}
}
.plans-static .plan{flex-direction:column}
@media (max-height:820px) and (min-width:861px){ .plans .plan{padding:18px; gap:7px} .plans .plan .price{font-size:2.5rem} .plans .plan ul{font-size:.82rem; gap:3px} .plans .plan .pdesc{font-size:.82rem; padding:8px 10px} }

/* casos */
.case .ctag{position:absolute; top:14px; right:14px; background:var(--neon); color:var(--on-neon); font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:99px}

/* IA: que quede claro que es una IA */
.ai-badge{display:inline-flex; align-items:center; gap:9px; align-self:flex-start; border:1.5px solid var(--neon); color:var(--neon); border-radius:99px; padding:6px 14px; font-weight:600; font-size:.9rem}
.ai-badge i{width:9px; height:9px; border-radius:50%; background:var(--neon); box-shadow:var(--glow); animation:ring 1.2s infinite}
.ai-tag{background:var(--neon); color:var(--on-neon); font-weight:800; font-size:.72rem; padding:2px 8px; border-radius:99px; font-family:var(--display)}

/* ciudades */
.cities-sec{padding-top:0}
.csearch{position:relative; max-width:760px; margin:0 0 34px; z-index:6}
.csearch .lupa{position:absolute; left:22px; top:50%; width:26px; height:26px; transform:translateY(-50%); color:var(--neon); filter:drop-shadow(0 0 8px rgba(0,255,65,.6)); transition:transform .3s}
.csearch.typing .lupa{animation:lupa 1s ease-in-out infinite}
@keyframes lupa{0%,100%{transform:translate(0,-50%) rotate(0)}25%{transform:translate(4px,-62%) rotate(-14deg)}75%{transform:translate(-3px,-40%) rotate(10deg)}}
.csearch input{width:100%; padding:22px 24px 22px 62px; border-radius:99px; border:2px solid var(--neon); background:var(--bg-2); color:var(--text); font:inherit; font-size:1.15rem; box-shadow:0 0 0 0 rgba(0,255,65,.4), 0 0 40px rgba(0,255,65,.15); transition:box-shadow .3s}
.csearch input:focus{outline:none; box-shadow:0 0 0 6px rgba(0,255,65,.18), 0 0 60px rgba(0,255,65,.3)}
.csearch input::-webkit-search-cancel-button{filter:hue-rotate(90deg)}
.cresults{position:absolute; left:0; right:0; top:calc(100% + 10px); background:var(--card); border:1px solid var(--line-2); border-radius:22px; padding:8px; display:none; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.cresults.on{display:grid}
.cresults a{display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:12px; padding:11px 14px; border-radius:14px; text-decoration:none; animation:resIn .45s cubic-bezier(.2,1.5,.4,1) both; animation-delay:calc(var(--i)*40ms)}
@keyframes resIn{from{opacity:0; transform:translateX(-30px) scale(.9)}}
.cresults a:hover,.cresults a:focus{background:rgba(0,255,65,.1); outline:none}
.cresults b{font-weight:600} .cresults mark{background:none; color:var(--neon)}
.cresults small{grid-row:2; color:var(--muted); font-size:.8rem}
.cresults em{grid-row:1/3; grid-column:2; align-self:center; font-style:normal; font-size:.82rem; font-weight:700; color:var(--neon); border:1.5px solid rgba(0,255,65,.5); border-radius:99px; padding:4px 10px}
.cresults a.free{border-top:1px dashed var(--line-2); border-radius:0 0 14px 14px; margin-top:4px}
.cresults a.free em{background:var(--neon); color:var(--on-neon)}
.cbig{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin-bottom:22px}
.cbig a{position:relative; overflow:hidden; display:flex; align-items:flex-end; min-height:96px; padding:16px 18px; border-radius:20px; text-decoration:none; background:var(--card); border:1.5px solid var(--line-2); font-family:var(--display); font-weight:800; font-size:1.55rem; letter-spacing:-.03em; transition:border-color .25s, background .25s}
.cbig a::before{content:""; position:absolute; right:14px; top:14px; width:11px; height:11px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--neon); box-shadow:var(--glow); animation:pinBob 1.6s ease-in-out infinite; animation-delay:calc(var(--i)*120ms)}
@keyframes pinBob{50%{transform:rotate(-45deg) translate(3px,-3px)}}
.cbig a:hover{border-color:var(--neon); background:linear-gradient(160deg, rgba(0,255,65,.16), var(--card) 60%)}
.cbig a span{position:relative}
.csmall{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px}
.csmall a,.call .links a{text-decoration:none; padding:8px 14px; border-radius:99px; border:1px solid var(--line-2); font-size:.92rem; color:var(--muted); transition:color .2s, border-color .2s, transform .2s}
.csmall a:hover,.call .links a:hover{color:var(--neon); border-color:var(--neon); transform:translateY(-3px) rotate(-2deg)}
.call .links a.has-page{color:var(--text); border-color:rgba(0,255,65,.45)}
.call-wrap{display:flex; justify-content:flex-start}
.call{margin-top:34px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px 30px}
.call .creg{animation:regIn .7s cubic-bezier(.2,1.4,.4,1) both; animation-delay:calc(var(--i)*55ms)}
@keyframes regIn{from{opacity:0; transform:translateY(60px) rotate(-3deg) scale(.9)}}
.call h3{font-size:1.05rem; color:var(--neon); margin-bottom:12px; font-family:var(--body); font-weight:600}
.call .links{display:flex; flex-wrap:wrap; gap:6px}
.call .links a{padding:5px 11px; font-size:.84rem}
.call-foot{grid-column:1/-1; color:var(--muted)}

/* ---------- PIK acompañante ---------- */
.pik{position:fixed; left:0; top:0; z-index:45; pointer-events:none; will-change:transform; transition:opacity .6s}
.pik.off{visibility:hidden}
.pik-bot{aspect-ratio:320/480; pointer-events:auto; cursor:pointer; will-change:transform; filter:drop-shadow(0 0 18px rgba(0,255,65,.45))}
.pik-bot svg{width:100%; height:100%; overflow:visible}
.pik-say{position:absolute; left:92%; top:-6px; white-space:nowrap; background:var(--neon); color:var(--on-neon); font-weight:700; font-size:.88rem; padding:8px 14px; border-radius:16px 16px 16px 4px; box-shadow:0 0 30px rgba(0,255,65,.5); opacity:0; transform:scale(.3) translateY(10px); transform-origin:0 100%; transition:opacity .25s, transform .45s cubic-bezier(.2,1.8,.4,1)}
.pik-say.left{left:auto; right:92%; border-radius:16px 16px 4px 16px; transform-origin:100% 100%}
.pik-say.on{opacity:1; transform:none}
@media (max-width:760px){.pik-say{font-size:.76rem; padding:6px 10px}}
.fx{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:44}
.fx-bg{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.scroll-prog{position:fixed; left:0; right:0; top:0; height:3px; z-index:70; pointer-events:none}
.scroll-prog i{display:block; height:100%; background:var(--neon); box-shadow:0 0 14px var(--neon), 0 0 30px var(--neon); transform-origin:0 50%; transform:scaleX(0)}

/* ---------- movimiento exagerado ---------- */
.hyper main > section:not(#transform):not(.hero) > .wrap{transform:skewY(calc(var(--vel,0) * 1deg)); transition:transform .25s ease-out}
.hyper h2.fly .w{display:inline-block; opacity:0; filter:blur(10px); transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.3); transition:opacity .5s, filter .7s, transform 1s cubic-bezier(.17,1.55,.4,1); transition-delay:calc(var(--i)*70ms)}
.hyper h2.fly.in .w{opacity:1; filter:none; transform:none}
.hyper .reveal h2.fly{}
.hyper .pop{opacity:0; transform:perspective(900px) translateY(140px) rotateX(-55deg) rotateZ(var(--pr,10deg)) scale(.6); transition:opacity .6s var(--d,0ms), transform 1.1s cubic-bezier(.17,1.45,.4,1) var(--d,0ms)}
.hyper .pop.in{opacity:1; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.hyper .pop.settled{transition:opacity .3s, transform .35s cubic-bezier(.2,1.2,.4,1), border-color .25s, box-shadow .25s, background .25s}
.hyper .pop.tilting{box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 40px rgba(0,255,65,.15)}
.hyper .pop.settled.tilting::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0,255,65,.16), transparent 55%)}
.hyper .svc,.hyper .lock,.hyper .calc,.hyper .chat,.hyper .strip,.hyper .faq details{position:relative}
.hyper .btn{transition:transform .15s, box-shadow .2s, background .2s, translate .25s cubic-bezier(.2,1.6,.4,1)}
.hyper .btn-neon{animation:btnPulse 2.4s ease-in-out infinite}
@keyframes btnPulse{50%{box-shadow:0 0 34px rgba(0,255,65,.55)}}
.hyper .metric .a{transition:opacity .4s}
.hyper .seat i.free{animation:seatFree 1s ease-in-out infinite}
@keyframes seatFree{50%{transform:scaleY(1.9); box-shadow:0 0 26px var(--neon)}}
.hyper footer{transform:none}
@media (prefers-reduced-motion:reduce){ .pik,.fx,.fx-bg{display:none} }
.cities-sec{z-index:5}
.plan ul{flex:none}
.plan .btn{margin-top:auto}
@media (min-width:861px){
  .plans{top:auto; bottom:calc(26px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%)}
  .caption[data-c="2"]{width:min(900px, calc(100% - 40px))}
  .caption[data-c="2"] h2{font-size:clamp(2.2rem,4.4vw,3.6rem)}
  .plan-foot{margin-top:-4px}
}
.call{display:block; columns:3 280px; column-gap:34px}
.call .creg{break-inside:avoid; margin-bottom:28px; display:inline-block; width:100%}
.call-foot{column-span:all; margin-top:6px}

/* ===================== v4: modo juego ===================== */
/* arranque */
html.booting body{overflow:hidden}
.boot{position:fixed; inset:0; z-index:200; display:grid; place-items:center; pointer-events:auto}
.boot-sh{position:absolute; left:0; right:0; height:50.5%; background:var(--bg); transition:transform 1s cubic-bezier(.7,0,.2,1)}
.boot-sh.t{top:0; background:linear-gradient(var(--line) 1px, transparent 1px) 0 0/56px 56px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/56px 56px, var(--bg); border-bottom:2px solid var(--neon); box-shadow:0 0 40px var(--neon)}
.boot-sh.b{bottom:0; background:linear-gradient(var(--line) 1px, transparent 1px) 0 0/56px 56px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/56px 56px, var(--bg)}
.boot.out .boot-sh.t{transform:translateY(-102%)}
.boot.out .boot-sh.b{transform:translateY(102%)}
.boot-in{position:relative; display:grid; justify-items:center; gap:14px; text-align:center; transition:opacity .4s, transform .8s cubic-bezier(.6,0,.3,1)}
.boot.out .boot-in{opacity:0; transform:translateY(-40vh) scale(.4)}
.boot-bot{width:min(190px,40vw); aspect-ratio:320/480; filter:drop-shadow(0 0 30px rgba(0,255,65,.55))}
.boot-bot svg{width:100%; height:100%; overflow:visible}
.boot-pct{font-family:var(--display); font-weight:800; font-size:clamp(3.5rem,10vw,6rem); letter-spacing:-.05em; line-height:1; color:var(--neon); text-shadow:var(--glow)}
.boot-pct b{font-weight:800}
.boot-bar{width:min(360px,70vw); height:6px; border-radius:99px; background:var(--line); overflow:hidden}
.boot-bar i{display:block; height:100%; background:var(--neon); box-shadow:var(--glow); transform-origin:0 50%; transform:scaleX(0)}
.boot-log{min-height:5.5em; display:grid; gap:2px; color:var(--muted); font-size:.95rem}
.boot-log p{animation:logIn .35s cubic-bezier(.2,1.6,.4,1) both}
.boot-log p:last-child{color:var(--text); font-weight:600}
@keyframes logIn{from{opacity:0; transform:translateX(-24px)}}
.boot-skip{position:absolute; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); background:none; border:1.5px solid var(--line-2); color:var(--muted); border-radius:99px; padding:8px 16px; font-size:.9rem}
.boot-skip:hover{color:var(--neon); border-color:var(--neon)}
.boot.out .boot-skip{opacity:0}

/* HUD del juego */
.ghud{position:fixed; left:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:58; width:230px; background:rgba(14,26,19,.88); backdrop-filter:blur(10px); border:1.5px solid var(--neon); border-radius:18px; padding:10px 14px 12px; box-shadow:0 0 30px rgba(0,255,65,.2); pointer-events:none; opacity:0; transform:translateY(30px); transition:opacity .5s, transform .5s}
html.booted .ghud{opacity:1; transform:none}
.ghud-top{display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted)}
.ghud-top b{color:var(--text)}
.ghud-pts b{color:var(--neon); font-family:var(--display); font-size:1.05rem}
.ghud-bar{height:6px; border-radius:99px; background:var(--line); margin:7px 0 6px; overflow:hidden}
.ghud-bar i{display:block; height:100%; background:var(--neon); box-shadow:var(--glow); transform-origin:0 50%; transform:scaleX(0); transition:transform .8s cubic-bezier(.2,1.4,.4,1)}
.ghud-name{font-family:var(--display); font-weight:700; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ghud.bump{animation:hudBump .5s cubic-bezier(.2,1.8,.4,1)}
@keyframes hudBump{40%{transform:scale(1.12) rotate(-2deg)}}
@media (max-width:640px){
  .ghud{left:auto; right:10px; bottom:auto; top:calc(78px + env(safe-area-inset-top,0px)); width:150px; padding:7px 10px 8px; border-radius:14px}
  .ghud-name{font-size:.82rem} .ghud-top{font-size:.72rem}
}
.gbanner{position:fixed; left:50%; top:42%; z-index:65; pointer-events:none; text-align:center; transform:translate(-50%,-50%) scale(.2) skewX(-20deg); opacity:0; display:grid; gap:4px; padding:22px 40px; border-radius:26px; background:rgba(5,10,7,.86); border:2px solid var(--neon); box-shadow:0 0 80px rgba(0,255,65,.45); min-width:min(420px,86vw)}
.gbanner.on{animation:banner 1.5s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes banner{0%{opacity:0; transform:translate(-160%,-50%) skewX(-30deg) scale(.6)} 22%{opacity:1; transform:translate(-50%,-50%) skewX(0) scale(1.06)} 30%{transform:translate(-50%,-50%) scale(1)} 78%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(60%,-50%) skewX(30deg) scale(.6)}}
.gbanner small{color:var(--neon); font-weight:600}
.gbanner strong{font-family:var(--display); font-weight:800; font-size:clamp(2rem,6vw,3.4rem); letter-spacing:-.04em; line-height:1}
.gbanner em{font-style:normal; color:var(--amber); font-weight:700}
/* barrido de escáner al entrar en cada nivel */
main > section.scan::after{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--neon); box-shadow:0 0 30px 8px rgba(0,255,65,.5); pointer-events:none; z-index:7; animation:scan 1.3s cubic-bezier(.6,0,.3,1) forwards}
@keyframes scan{0%{top:0; opacity:1} 90%{opacity:1} 100%{top:100%; opacity:0}}
#transform.scan::after{display:none}
/* pantalla de victoria */
.gwin{position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); opacity:0; transition:opacity .4s}
.gwin.on{opacity:1}
.gwin-card{position:relative; max-width:460px; text-align:center; background:var(--card); border:2px solid var(--neon); border-radius:30px; padding:110px 28px 28px; box-shadow:0 0 100px rgba(0,255,65,.35); transform:scale(.4) rotate(-8deg); transition:transform .7s cubic-bezier(.2,1.6,.4,1)}
.gwin.on .gwin-card{transform:none}
.gwin-bot{position:absolute; left:50%; margin-left:-65px; top:-90px; width:130px; aspect-ratio:320/480; animation:float 1.6s ease-in-out infinite}
.gwin-bot svg{width:100%; height:100%; overflow:visible}
.gwin small{color:var(--neon); font-weight:600}
.gwin h3{font-size:clamp(2.4rem,7vw,3.4rem); font-weight:800; letter-spacing:-.04em; margin:6px 0 12px}
.gwin p{color:var(--muted)}
.gwin .row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px}
@media (prefers-reduced-motion:reduce){.boot,.gbanner{display:none}}

/* ===== Consultora: servicios estáticos, sectores, grupo ===== */
.svc h3 a{text-decoration:none}
.svc h3 a:hover{color:var(--neon)}
.svc ul{list-style:none; padding:0; display:grid; gap:6px}
.svc ul li{position:relative; padding-left:20px; color:var(--muted); font-size:.93rem}
.svc ul li::before{content:""; position:absolute; left:2px; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--neon); box-shadow:0 0 10px rgba(0,255,65,.6)}
.svc-go{margin-top:auto; padding-top:8px; font-weight:600; color:var(--neon); text-decoration:none}
.svc-go:hover{text-decoration:underline}
.sectors{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.sector{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px; transition:border-color .25s, box-shadow .25s}
.sector:hover{border-color:var(--neon); box-shadow:0 0 30px rgba(0,255,65,.12)}
.sector strong{font-family:var(--display); font-size:1.25rem; letter-spacing:-.02em; display:block; margin-bottom:6px}
.sector span{color:var(--muted); font-size:.93rem}
@media (max-width:980px){.sectors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.sectors{grid-template-columns:1fr}}
.group{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.gco{border:1.5px solid var(--line-2); border-radius:28px; padding:34px; background:var(--card); display:flex; flex-direction:column; gap:14px}
.gco.main{border-color:var(--neon); box-shadow:0 0 60px rgba(0,255,65,.12)}
.gco .role{font-size:.8rem; font-weight:700; color:var(--neon); text-transform:uppercase; letter-spacing:.1em}
.gco h3{font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:-.04em}
.gco p{color:var(--muted)}
.gco ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.gco ul li{padding-left:20px; position:relative}
.gco ul li::before{content:"→"; position:absolute; left:0; color:var(--neon)}
.gco .btn{margin-top:auto; align-self:flex-start}
@media (max-width:860px){.group{grid-template-columns:1fr}}
.lang-sw{font-weight:700; font-size:.85rem; border:1.5px solid var(--line-2); border-radius:99px; padding:4px 10px}
.svc-grid.compact .svc{grid-column:span 3}
@media (max-width:980px){.svc-grid.compact .svc{grid-column:span 6}}
@media (max-width:560px){.svc-grid.compact .svc{grid-column:span 12}}
.hero h1.h1-sm{font-size:clamp(2.2rem,4.4vw,4rem); overflow-wrap:normal; hyphens:manual}
nav.main a.nav-ubi{color:var(--neon); border:1.5px solid rgba(0,255,65,.45); margin-left:6px; font-weight:600}
nav.main a.nav-ubi:hover{background:rgba(0,255,65,.1); color:var(--neon)}
@media (max-width:1180px){nav.main a{padding:8px 9px; font-size:.9rem}}
@media (max-width:980px){nav.main a.nav-ubi{margin-left:0; margin-top:6px; text-align:center}}