:root{
  --bg:#000000;
  --panel:#04121A;
  --line:#117C96;
  --dim:#0B4457;
  --blue:#22C7E8;
  --glow:#7FE9FF;
  --text:#E8FAFF;
  --soft:#BFDDE6;
  --muted:#86A9B5;
  --gutter:clamp(20px,5vw,56px);
  --off:30px;
  --display:"Chakra Petch","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#000}
body{color:var(--text);font:400 1.0625rem/1.6 var(--body);min-height:100vh}
/* Centro oscuro para que el texto siempre quede sobre zona calmada */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 62% at 50% 46%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.4) 45%,rgba(0,0,0,0) 100%);
}
a{color:inherit}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}

/* Capa de negro sólido, siempre al fondo */
.bg-base{position:fixed;inset:0;z-index:-3;background:#000;pointer-events:none}

/* Fondo de circuitos: cables finos y apagados; se iluminan con .is-lit */
.bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;display:block;transition:filter .5s}
.bg .strand{fill:none;stroke:#0E7C96;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:stroke .5s,opacity .5s}
.bg .dot{fill:#12A5C2;opacity:.9;transition:fill .5s}
.bg .ring{fill:#000;stroke:#12A5C2;stroke-width:1;transition:stroke .5s}
.bg .hex{fill:none;stroke:#0B4457;stroke-width:1}
.bg.micro{inset:auto;top:0;left:0;width:100%;height:200%;will-change:transform}
/* entrada: los elementos del fondo suben con fundido */
.bg .enter{animation:bgIn 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes bgIn{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:translateY(0)}}
.bg .speck{fill:#12A5C2;opacity:.45;transition:fill .5s}
.bg .speck-g rect{fill:#12A5C2;transition:fill .5s}
.bg .ring-s{fill:none;stroke:#12A5C2;stroke-width:1;transition:stroke .5s}
.bg .mtrace path{fill:none;stroke:#12A5C2;stroke-width:1;stroke-linecap:round}
.bg .mtrace circle{fill:#12A5C2}
.bg .tw{animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.12}50%{opacity:.85}}
.bg.is-scrolling .speck,.bg.is-scrolling .speck-g rect,.bg.is-scrolling .mtrace circle{fill:#5FE6FF}
.bg.is-scrolling .ring-s,.bg.is-scrolling .mtrace path{stroke:#5FE6FF}
/* luz que viaja por los cables mientras haces scroll */
.bg .spark{fill:none;stroke:#9CF5FF;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:.07 .93;opacity:0;transition:opacity .5s}
.bg .spark.halo{stroke:#22C7E8;stroke-width:6.5}
.bg.is-scrolling .spark{opacity:1}
.bg.is-scrolling .spark.halo{opacity:.2}
.bg.is-scrolling .strand{stroke:#139EBD}
.bg.is-scrolling .dot{fill:#5FE6FF}
.bg.is-scrolling .ring{stroke:#5FE6FF}
.bg.is-lit{filter:drop-shadow(0 0 3px rgba(34,199,232,.55))}
.bg.is-lit .strand{stroke:#4FE8FF;opacity:1}
.bg.is-lit .dot{fill:#7FF0FF}
.bg.is-lit .ring{stroke:#7FF0FF}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border-radius:4px;
  background:var(--blue);color:#00131A;
  font:600 1rem var(--display);letter-spacing:.01em;text-decoration:none;
  border:1.5px solid var(--blue);transition:background .15s,border-color .15s;
}
.btn:hover{background:var(--glow);border-color:var(--glow)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{background:rgba(34,199,232,.12);border-color:var(--blue)}
.btn--sm{min-height:40px;padding:0 16px;font-size:.95rem}

/* Cabecera */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gutter);max-width:1200px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.25rem var(--display)}
.brand svg{width:30px;height:30px;flex:none}

/* Portada */
.hero{max-width:1200px;margin:0 auto;padding:clamp(16px,4vw,40px) var(--gutter) clamp(0px,2vw,16px);text-align:center}
h1{font-family:var(--display);font-weight:700;line-height:1}
.h1-big{display:block;font-size:clamp(2.9rem,9.5vw,5rem);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.h1-sub{display:block;margin-top:14px;font-size:clamp(1.1rem,2.8vw,1.55rem);font-weight:500;line-height:1.25;color:var(--glow)}
.lead{margin:18px auto 0;max-width:46ch;color:var(--soft);text-wrap:balance}

/* Escenario: el bohío es el menú */
.stage{position:relative;max-width:940px;margin:8px auto 0;padding:96px 0}
@media(min-width:760px){.stage{padding:84px 0 0;margin-top:0}.menu-tag span{max-width:none;font-size:1.3rem}.menu-tag .tl{display:inline}}
.bohio{
  position:relative;display:block;width:100%;aspect-ratio:6/5;
  background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
@media(min-width:760px){.bohio{aspect-ratio:1376/768}}
.bohio img{
  display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;
  filter:contrast(1.18) brightness(.97);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 24%,#000 76%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 82%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 24%,#000 76%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 82%,transparent);
  mask-composite:intersect;
}
.tap{
  position:absolute;left:50%;top:62%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1.5px solid var(--glow);border-radius:50%;pointer-events:none;
  animation:tap 2.4s ease-out infinite;
}
.stage.open .tap{display:none}
@keyframes tap{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.6);opacity:0}}

.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lnk{fill:none;stroke:var(--blue);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .25s ease-in}
.stage.open .lnk{stroke-dashoffset:0;transition:stroke-dashoffset .75s cubic-bezier(.3,.7,.2,1) var(--d,0s)}
.lnk-p{fill:none;stroke:#C9F8FF;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:.05 .95;opacity:0}
.stage.open .lnk-p{opacity:1;animation:flow 2.6s linear infinite;animation-delay:var(--pd,0s);transition:opacity .3s 1s}
@keyframes flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}

.node{
  --nd:86px;
  position:absolute;width:var(--nd);height:var(--nd);margin:calc(var(--nd) / -2) 0 0 calc(var(--nd) / -2);
  display:grid;place-items:center;text-align:center;padding:4px;
  border:1.5px solid var(--blue);border-radius:50%;background:#02090D;color:var(--text);
  font:600 .74rem/1.15 var(--display);text-decoration:none;
  opacity:0;transform:scale(.55);visibility:hidden;
  transition:opacity .25s,transform .25s,visibility 0s linear .25s,background .15s;
}
@media(min-width:760px){.node{--nd:124px;font-size:.92rem;padding:8px}}
.stage.open .node{opacity:1;transform:scale(1);visibility:visible;transition:opacity .4s var(--d,0s),transform .4s var(--d,0s),visibility 0s,background .15s}
.node:hover{background:#06222C}


.menu-tag{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:3;width:max-content;max-width:calc(100vw - 40px);
  display:flex;flex-direction:column;align-items:center;gap:0;
  background:none;border:0;padding:6px 18px;cursor:pointer;color:#D9FBFF;-webkit-tap-highlight-color:transparent;
}
.menu-tag span{display:block;max-width:15em;text-align:center;font:700 clamp(1.02rem,3.4vw,1.2rem)/1.2 var(--display);letter-spacing:.04em;text-shadow:0 0 6px #7FE9FF,0 0 16px #22C7E8,0 0 34px rgba(34,199,232,.7)}
.menu-tag svg{width:34px;height:34px;fill:none;stroke:#C9F8FF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px #22C7E8) drop-shadow(0 0 12px rgba(34,199,232,.7));animation:bob 1.6s ease-in-out infinite;transition:transform .3s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.stage.open .menu-tag svg{animation:none;transform:rotate(180deg)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}

/* Flujo con columna de conexión */
.flow{position:relative;max-width:1200px;margin:0 auto;padding:0 var(--gutter) 0 calc(var(--gutter) + var(--off))}
.flow::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gutter) + 8px);width:2px;background:var(--dim)}
.block{position:relative;padding:clamp(48px,9vw,96px) 0}
.block::before{
  content:"";position:absolute;top:calc(clamp(48px,9vw,96px) + 8px);
  left:calc(var(--off) * -1);width:18px;height:18px;border-radius:50%;
  background:#000;border:2px solid var(--blue);box-shadow:inset 0 0 0 3px #000,inset 0 0 0 9px var(--blue);
}
h2{font:700 clamp(1.8rem,5.2vw,2.8rem)/1.1 var(--display);max-width:22ch}
.intro{margin-top:12px;max-width:50ch;color:var(--muted)}

/* Paneles */
.chip{position:relative;isolation:isolate;background:rgba(3,14,20,.16);border:1px solid rgba(34,199,232,.26);border-radius:6px;padding:24px 24px 26px}
.chip h3,.chip p{text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8)}
.chip h3{font:600 1.25rem/1.2 var(--display)}
.chip p{margin-top:8px;color:var(--soft);font-size:1rem}
.chip--lead{border-color:rgba(34,199,232,.5);padding:30px 28px 32px}
.chip--lead h3{font-size:clamp(1.5rem,3.4vw,1.9rem)}
.chip--lead p{font-size:1.0625rem;max-width:44ch}
.services{display:grid;gap:20px;margin-top:40px}
@media(min-width:720px){.services{grid-template-columns:repeat(2,1fr)}.services .chip--lead,.services .chip--wide{grid-column:span 2}}
@media(min-width:1000px){.services{grid-template-columns:repeat(3,1fr)}}

/* Pasos */
.steps{list-style:none;display:grid;gap:34px;margin-top:40px}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:40px}}
.steps li{position:relative}
.steps li .chip{height:100%}
.steps li:not(:last-child)::after{content:"";position:absolute;background:var(--blue);left:34px;top:100%;width:2px;height:34px}
@media(min-width:900px){.steps li:not(:last-child)::after{left:100%;top:50%;width:40px;height:2px}}
.step-n{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:14px;border:1.5px solid var(--blue);border-radius:50%;color:var(--glow);font:700 1.1rem var(--display)}

.tarifas-text{margin-top:16px;max-width:52ch;color:var(--soft);font-size:1.125rem;line-height:1.65}
.plans-title{margin-top:48px;font:600 clamp(1.35rem,3.6vw,1.8rem)/1.2 var(--display);color:var(--glow);text-shadow:0 0 14px rgba(34,199,232,.35),0 1px 10px rgba(0,0,0,.9)}
.plans{display:grid;gap:22px;margin-top:22px}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr);gap:24px}}
.plan h3{font-size:1.4rem}
@media(min-width:900px){.plans--two{grid-template-columns:repeat(2,1fr)}}
.plan--rec{border-color:rgba(34,199,232,.55)}
.js .reveal.wipe.plan--rec::before{border-color:rgba(34,199,232,.55)}
.chip .badge{display:inline-block;margin:0 0 12px;padding:4px 12px;border-radius:999px;background:var(--blue);color:#00131A;font:700 .78rem/1.3 var(--display);letter-spacing:.04em;text-shadow:none}
.chip .price{margin-top:10px;font:700 1.3rem/1.25 var(--display);color:var(--glow)}
.chip .price>span:not(.ch){display:block;margin-top:2px;font:500 .9rem var(--body);color:var(--muted)}
.feats{list-style:none;display:grid;gap:14px;margin-top:20px}
.feats li{position:relative;padding-left:22px;font-size:.98rem;line-height:1.5;color:var(--soft);text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8)}
.feats li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border:1.5px solid var(--blue);border-radius:50%}
.feats b{color:var(--text);font-weight:600}
.pay-notes{display:grid;gap:30px;margin-top:56px;max-width:780px}
.note{border-left:2px solid var(--line);padding:2px 0 2px 22px;text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8)}
.note h4{margin-bottom:10px;font:700 1.15rem/1.25 var(--display);color:var(--glow)}
.note p{color:var(--soft);font-size:1rem}
.note ol{list-style:none;counter-reset:n;display:grid;gap:14px;margin-top:14px}
.note li{position:relative;padding-left:36px;color:var(--soft);counter-increment:n}
.note li::before{content:counter(n);position:absolute;left:0;top:.05em;width:24px;height:24px;display:grid;place-items:center;border:1.5px solid var(--blue);border-radius:50%;color:var(--glow);font:700 .8rem var(--display)}
.note li b{color:var(--text);font-weight:600}
.note--warn{border-left-color:var(--blue);box-shadow:-8px 0 16px -10px rgba(34,199,232,.7)}

.statement{font:500 clamp(1.4rem,3.6vw,2.2rem)/1.25 var(--display);max-width:30ch;margin-top:8px}
.cta{border-color:rgba(34,199,232,.45);padding:clamp(28px,5vw,48px)}
.cta h2{max-width:20ch}
.cta p{margin-top:12px;color:var(--soft);max-width:44ch}
.cta .btn{margin-top:26px}

footer{max-width:1200px;margin:0 auto;padding:56px var(--gutter) 56px;display:grid;gap:36px;border-top:1px solid var(--dim);color:var(--muted);font-size:.95rem}
@media(min-width:800px){footer{grid-template-columns:1fr 1.3fr;align-items:start}}
.foot-brand{display:grid;gap:10px;justify-items:start;align-content:start}
.foot-contact h2{max-width:none;margin-bottom:14px;font:700 clamp(1.7rem,4.5vw,2.3rem)/1.1 var(--display);color:var(--text)}
.contact-list{list-style:none}
.contact-list li{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid rgba(34,199,232,.18)}
@media(min-width:520px){.contact-list li{grid-template-columns:110px 1fr;align-items:center;column-gap:12px}}
.contact-list span{color:var(--muted);font-size:.9rem}
.contact-list a{color:var(--glow);font:600 1.1rem/1.3 var(--display);text-decoration:none;overflow-wrap:anywhere;min-height:28px;display:inline-block}
.cta-end{margin-top:48px}
.btn--lg{min-height:58px;padding:0 36px;font-size:1.15rem}
.contact-list a:hover{color:#fff;text-shadow:0 0 10px rgba(127,233,255,.8)}
footer .brand{color:var(--text);font-size:1.1rem}
/* Logo con luz de neón que fluye siempre */
.top .brand{gap:14px}
.brand .logo{width:clamp(64px,17vw,84px);height:auto;aspect-ratio:1;flex:none;overflow:visible;
  filter:drop-shadow(0 0 3px rgba(34,199,232,.9)) drop-shadow(0 0 10px rgba(34,199,232,.5))}
.logo path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lg-base path{stroke:#1FB6D6;stroke-width:2.2;opacity:.85}
.lg-flow path{stroke:#EAFDFF;stroke-width:2.8;stroke-dasharray:.16 .84;animation:lgFlow var(--d,3s) linear infinite;animation-delay:var(--o,0s)}
@keyframes lgFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}
.logo .lg-door{fill:url(#lgDoor);stroke:none;animation:lgDoor 2.4s ease-in-out infinite alternate}
@keyframes lgDoor{from{opacity:.6}to{opacity:1}}
.lg-dot{fill:#EAFDFF;animation:lgDot 1.8s ease-in-out infinite alternate}
@keyframes lgDot{from{opacity:.45}to{opacity:1}}
.brand-sep{width:1px;height:38px;background:linear-gradient(to bottom,transparent,var(--line),transparent);flex:none}
.brand-name{font:700 1.05rem/1.1 var(--display);letter-spacing:.03em}
@media(prefers-reduced-motion:reduce){.lg-flow{display:none}.logo .lg-door,.lg-dot{animation:none}}



/* Aparición suave al hacer scroll */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .85s cubic-bezier(.2,.7,.2,1) var(--rd,0s),transform .85s cubic-bezier(.2,.7,.2,1) var(--rd,0s)}
.js .reveal.fade{transform:none}
/* Recuadros: empiezan vacíos; el marco se dibuja de izquierda a derecha y el texto se escribe letra a letra con cursor */
.js .reveal.wipe{opacity:1;transform:none;transition:none;border-color:transparent;background:transparent}
.js .reveal.wipe::before{
  content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;
  border:1px solid rgba(34,199,232,.26);border-radius:6px;background:rgba(3,14,20,.16);
  clip-path:inset(0 calc(100% - 1px) 0 0);
}
.js .reveal.wipe.chip--lead::before{border-color:rgba(34,199,232,.5)}
.js .reveal.wipe.cta::before{border-color:rgba(34,199,232,.45)}
.js .reveal.wipe.in::before{animation:wipe var(--dur,1.4s) linear var(--rd,0s) both}
@keyframes wipe{from{clip-path:inset(0 calc(100% - 1px) 0 0)}to{clip-path:inset(0 0 0 0)}}
.js .reveal.wipe::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:2px;opacity:0;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,rgba(201,248,255,0),#C9F8FF 18%,#C9F8FF 82%,rgba(201,248,255,0));
  box-shadow:0 0 10px 2px rgba(127,233,255,.8);
}
.js .reveal.wipe.in::after{animation:wipeLine var(--dur,1.4s) linear var(--rd,0s) both}
@keyframes wipeLine{0%{left:0;opacity:1}90%{opacity:1}100%{left:calc(100% - 2px);opacity:0}}
.js .wipe .ch{opacity:0}
.js .wipe .ch.on{opacity:1}
.js .wipe .step-n{opacity:0;transition:opacity .35s}
.js .wipe.in .step-n{opacity:1;transition-delay:var(--rd,0s)}
.caret{
  position:absolute;left:0;top:0;width:8px;height:1em;background:#A8F6FF;z-index:3;
  box-shadow:0 0 8px rgba(127,233,255,.9);opacity:0;pointer-events:none;
}
.caret.show{opacity:1}
.caret.blink{animation:caretBlink .7s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.js .reveal.wipe::before{clip-path:none}.js .reveal.wipe.in::before,.js .reveal.wipe.in::after{animation:none}.js .reveal.wipe::after,.caret{display:none}.js .wipe .step-n{opacity:1}}


/* Parpadeo del nodo y del circuito de al lado cuando llegas a cada sección */
.block::after{
  content:"";position:absolute;left:calc(var(--off) * -1 + 8px);width:2px;
  top:calc(clamp(48px,9vw,96px) + 18px);height:clamp(130px,26vw,210px);
  background:linear-gradient(to bottom,#C9F8FF,rgba(34,199,232,0));
  box-shadow:0 0 8px rgba(127,233,255,.8);opacity:0;pointer-events:none;
}
.pt{position:absolute;left:0;top:calc(clamp(48px,9vw,96px) + 17px);width:1px;height:1px;pointer-events:none}
.block.blink::before{animation:nodeBlink 1.5s ease-in-out}
.block.blink::after{animation:segBlink 1.5s ease-in-out}
@keyframes nodeBlink{
  0%,100%{box-shadow:inset 0 0 0 3px #000,inset 0 0 0 9px var(--blue),0 0 0 0 rgba(127,233,255,0),0 0 0 0 rgba(34,199,232,0);border-color:var(--blue)}
  12%,36%,60%{box-shadow:inset 0 0 0 3px #000,inset 0 0 0 9px #D8FBFF,0 0 12px 3px rgba(127,233,255,.9),0 0 30px 9px rgba(34,199,232,.5);border-color:#D8FBFF}
  24%,48%,72%{box-shadow:inset 0 0 0 3px #000,inset 0 0 0 9px var(--blue),0 0 0 0 rgba(127,233,255,0),0 0 0 0 rgba(34,199,232,0);border-color:var(--blue)}
}
@keyframes segBlink{0%,100%{opacity:0}12%,36%,60%{opacity:1}24%,48%,72%{opacity:.12}}
@media(prefers-reduced-motion:reduce){.block.blink::before,.block.blink::after{animation:none}}

@media(max-width:560px){:root{--off:26px}.block::before{width:16px;height:16px}.block::after{left:calc(var(--off) * -1 + 7px)}.flow::before{left:calc(var(--gutter) + 7px)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tap,.lnk-p,.menu-tag svg,.bg .tw,.bg .enter{animation:none}
  .tap,.lnk-p{display:none}
  .lnk,.node,.stage.open .lnk,.stage.open .node{transition:none}
}