:root{
  --ink:#0f2c3d;
  --ink-2:#0b1a28;
  --ink-3:#102337;
  --cyan:#35e0ea;
  --teal:#0ea3bd;
  --teal-deep:#0b7f92;
  --cyan-deep:#0e9aa9;
  --coral:#ff6f61;
  --amber:#ffb454;
  --sky:#eafafc;
  --cream:#f6f2ea;
  --cream-2:#efe9dd;
  --paper:#ffffff;
  --text-dark:#10293a;
  --text-soft:#4c5c6b;
  --line:rgba(18,32,46,.1);
  --disp:'Unbounded',sans-serif;
  --body:'Schibsted Grotesk',sans-serif;
  --r-lg:30px;
  --r-md:20px;
  --shadow-card:0 24px 55px -22px rgba(14,120,140,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--sky);
  color:var(--text-dark);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--teal);color:#fff}
h1,h2,h3,.disp{font-family:var(--disp);letter-spacing:-.01em}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.wrap{width:min(1160px,92%);margin-inline:auto}

/* ───────── header ───────── */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:80;
  transition:background .35s,box-shadow .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.topbar.scrolled{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:rgba(14,163,189,.18);
  box-shadow:0 10px 30px -18px rgba(14,120,140,.25);
}
.topbar .wrap{display:flex;align-items:center;gap:2rem;height:76px}
.logo{display:flex;align-items:center}
.logo img{height:46px;width:auto;filter:drop-shadow(0 3px 10px rgba(14,120,140,.2))}
footer .logo img{filter:drop-shadow(0 0 14px rgba(53,224,234,.4))}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;font-weight:600;font-size:.95rem}
.nav-links a{opacity:.82;transition:.2s;position:relative;padding:.3rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cyan);border-radius:2px;transition:width .25s}
.nav-links a:hover{opacity:1}.nav-links a:hover::after{width:100%}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:700;font-size:.95rem;border-radius:999px;
  padding:.85rem 1.5rem;transition:transform .2s,box-shadow .2s,background .2s;
  will-change:transform;
}
.btn:active{transform:scale(.97)}
.btn-wa{background:#22c15e;color:#fff;box-shadow:0 10px 28px -10px rgba(34,193,94,.65)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(34,193,94,.75)}
.btn-cyan{background:var(--cyan);color:var(--ink);box-shadow:0 12px 30px -10px rgba(53,224,234,.55)}
.btn-cyan:hover{transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(18,48,67,.3);color:var(--text-dark)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep)}
.cta-final .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.cta-final .btn-ghost:hover{border-color:#fff;color:#fff}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 12px 30px -10px rgba(255,111,97,.55)}
.btn-coral:hover{transform:translateY(-2px)}
.hamburger{display:none;margin-left:auto;color:var(--text-dark)}
@media(max-width:840px){
  .nav-links,.topbar .btn-wa{display:none}
  .hamburger{display:block}
  .nav-links.open{
    display:flex;flex-direction:column;position:fixed;inset:76px 0 auto 0;
    background:rgba(255,255,255,.97);padding:1.5rem 6%;gap:1.1rem;
    border-bottom:1px solid rgba(14,163,189,.25);
  }
}

/* ───────── hero ───────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:9rem 0 6rem;overflow:hidden;
  background:linear-gradient(180deg,#dff6fa 0%,#eefafb 55%,var(--cream) 100%)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg .glow{position:absolute;border-radius:50%;filter:blur(90px)}
.g1{width:560px;height:560px;background:rgba(78,214,229,.4);top:-160px;right:-120px;animation:drift 14s ease-in-out infinite alternate}
.g2{width:420px;height:420px;background:rgba(255,146,131,.3);bottom:-140px;left:-100px;animation:drift 18s ease-in-out infinite alternate-reverse}
.g3{width:320px;height:320px;background:rgba(255,199,120,.32);top:40%;left:38%;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.12)}}
.fibers{position:absolute;inset:0;width:100%;height:100%}
.fibers path{fill:none;stroke-linecap:round;stroke-dasharray:14 320;animation:pulse-line 6s linear infinite}
@keyframes pulse-line{to{stroke-dashoffset:-668}}
.grain{position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.tagline{
  display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);
  border:1px solid rgba(14,163,189,.35);border-radius:999px;padding:.5rem 1.05rem;
  background:rgba(255,255,255,.65);
}
.tagline .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25;transform:scale(.7)}}
.hero h1{font-size:clamp(2.1rem,5vw,3.7rem);line-height:1.08;font-weight:800;margin:1.4rem 0 1.2rem;color:var(--text-dark)}
.hero h1 .hl{color:var(--teal);position:relative;white-space:nowrap}
.hero h1 .hl svg{position:absolute;left:0;bottom:-.18em;width:100%;height:.32em;overflow:visible}
.hero h1 .hl svg path{fill:none;stroke:var(--coral);stroke-width:7;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1s .9s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero p.lead{font-size:1.15rem;color:var(--text-soft);max-width:34rem;line-height:1.65}
.hero-ctas{display:flex;gap:1rem;margin-top:2.1rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:2.6rem;margin-top:3rem;flex-wrap:wrap}
.stat b{font-family:var(--disp);font-size:1.7rem;color:var(--text-dark)}
.stat b em{font-style:normal;color:var(--teal);font-size:1rem}
.stat span{display:block;font-size:.85rem;color:#6b8291;margin-top:.25rem}

/* speed card */
.speed-card{
  position:relative;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
  border:1px solid rgba(14,163,189,.25);border-radius:var(--r-lg);
  padding:2.2rem;box-shadow:0 40px 80px -35px rgba(14,120,140,.45),inset 0 1px 0 rgba(255,255,255,.8);
  transform:rotate(2deg);
}
.speed-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:linear-gradient(140deg,rgba(53,224,234,.6),transparent 40%,rgba(255,111,97,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.speed-card h3{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#7a94a3;font-family:var(--body);font-weight:700}
.gauge{position:relative;width:230px;margin:1.2rem auto .4rem}
.gauge svg{overflow:visible}
.gauge .track{stroke:rgba(18,48,67,.08)}
.gauge .fill{stroke:url(#gaugeGrad);stroke-dasharray:396;stroke-dashoffset:396;transition:stroke-dashoffset 2.2s cubic-bezier(.22,1,.36,1)}
.gauge-val{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;text-align:center;padding-bottom:2px}
.gauge-val b{font-family:var(--disp);font-size:2.6rem;color:var(--text-dark);line-height:1}
.gauge-val span{font-size:.85rem;color:var(--teal);font-weight:700;letter-spacing:.12em}
.speed-rows{margin-top:1.4rem;display:grid;gap:.7rem}
.speed-rows .row{display:flex;justify-content:space-between;font-size:.92rem;color:var(--text-soft);border-top:1px dashed rgba(18,48,67,.14);padding-top:.7rem}
.speed-rows .row b{color:var(--text-dark)}
.speed-rows .ok{color:#15a04c;font-weight:700}
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr}
  .speed-card{transform:none;max-width:420px;margin-inline:auto}
}

/* ───────── marquee ───────── */
.marquee{background:linear-gradient(90deg,#14b8cd,#2ad2e0);color:#06333c;overflow:hidden;padding:.8rem 0;transform:rotate(-1deg) scale(1.02);position:relative;z-index:5;box-shadow:0 14px 34px -18px rgba(14,163,189,.6)}
.marquee-track{display:flex;gap:2.5rem;width:max-content;animation:scrollx 26s linear infinite;font-family:var(--disp);font-weight:600;font-size:.9rem;white-space:nowrap}
.marquee-track span{display:flex;align-items:center;gap:2.5rem}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ───────── secciones claras ───────── */
.light{background:var(--cream);color:var(--text-dark)}
.light .kicker{color:var(--coral)}
section{padding:6rem 0}
.kicker{font-weight:800;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:.7rem 0 1rem;font-weight:700}
.sec-head p{max-width:38rem;line-height:1.65;color:var(--text-soft);font-size:1.05rem}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3rem}
.feat{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.7rem 1.5rem;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden;
}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.feat .icon{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:linear-gradient(140deg,rgba(53,224,234,.16),rgba(53,224,234,.05));color:var(--cyan-deep);
}
.feat:nth-child(2) .icon{background:linear-gradient(140deg,rgba(255,111,97,.16),rgba(255,111,97,.05));color:var(--coral)}
.feat:nth-child(3) .icon{background:linear-gradient(140deg,rgba(255,180,84,.2),rgba(255,180,84,.06));color:#d98b1c}
.feat:nth-child(4) .icon{background:linear-gradient(140deg,rgba(34,193,94,.16),rgba(34,193,94,.05));color:#189a4a}
.feat h3{font-size:1.02rem;margin-bottom:.5rem;font-weight:600}
.feat p{font-size:.92rem;color:var(--text-soft);line-height:1.6}
@media(max-width:920px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.feat-grid{grid-template-columns:1fr}}

/* ───────── planes ───────── */
#planes{background:linear-gradient(var(--cream),var(--cream-2))}
.toggle-wrap{display:flex;align-items:center;gap:1rem;margin-top:2.2rem;flex-wrap:wrap}
.seg{
  display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem;
  box-shadow:inset 0 2px 6px rgba(18,32,46,.05);
}
.seg button{
  border-radius:999px;padding:.65rem 1.4rem;font-weight:700;font-size:.92rem;color:var(--text-soft);
  transition:.25s;display:flex;align-items:center;gap:.45rem;
}
.seg button.active{background:var(--ink);color:#fff;box-shadow:0 6px 16px -6px rgba(7,16,25,.5)}
.tv-note{font-size:.88rem;color:var(--text-soft)}
.tv-note b{color:var(--coral)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem;align-items:stretch}
.plan{
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:2.1rem 1.9rem;display:flex;flex-direction:column;position:relative;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.plan:hover{transform:translateY(-8px);box-shadow:var(--shadow-card)}
.plan.star{
  border-color:transparent;
  background:linear-gradient(165deg,#0d9db8,#22c3d3);color:#f0fcfe;
  box-shadow:0 30px 60px -22px rgba(14,163,189,.55);
}
.plan.star .plan-name,.plan.star .price{color:#fff}
.plan.star .per,.plan.star li{color:rgba(255,255,255,.88)}
.badge-star{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--coral);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.45rem 1.1rem;border-radius:999px;box-shadow:0 8px 20px -6px rgba(255,111,97,.6);
}
.plan-name{font-family:var(--disp);font-weight:600;font-size:1.05rem;color:var(--text-dark)}
.mbps{display:flex;align-items:baseline;gap:.4rem;margin:1.1rem 0 .2rem}
.mbps b{font-family:var(--disp);font-size:2.9rem;font-weight:800;color:var(--teal)}
.plan.star .mbps b{color:#fff}
.mbps span{font-weight:700;color:var(--text-soft)}
.plan.star .mbps span{color:rgba(255,255,255,.75)}
.price{font-size:1.7rem;font-weight:800;font-family:var(--disp);color:var(--text-dark);margin-top:.9rem}
.price .cents{font-size:1rem}
.per{font-size:.85rem;color:var(--text-soft)}
.plan ul{list-style:none;margin:1.4rem 0 1.8rem;display:grid;gap:.65rem;flex:1}
.plan li{display:flex;gap:.6rem;align-items:flex-start;font-size:.93rem;color:var(--text-soft);line-height:1.45}
.plan li svg{flex:none;margin-top:.15rem;color:#189a4a}
.plan.star li svg{color:#fff}
.plan.star .btn-cyan{background:#fff;color:var(--teal-deep);box-shadow:0 12px 30px -10px rgba(255,255,255,.4)}
.plan li.tv-extra{display:none}
.plans.with-tv li.tv-extra{display:flex}
.plan .btn{justify-content:center}
.biz{
  margin-top:1.6rem;background:var(--paper);border:1.5px dashed rgba(18,32,46,.25);border-radius:var(--r-md);
  padding:1.4rem 1.8rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
}
.biz p{flex:1;min-width:240px;color:var(--text-soft);font-size:.95rem}
.biz p b{color:var(--text-dark)}
.fine{margin-top:1.4rem;font-size:.8rem;color:var(--text-soft);opacity:.75}
@media(max-width:920px){.plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

/* ───────── navis tv ───────── */
#navistv{background:#fdf6ec;position:relative;overflow:hidden}
#navistv::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 400px at 85% 20%,rgba(255,146,131,.18),transparent),
             radial-gradient(600px 400px at 10% 90%,rgba(78,214,229,.15),transparent);
}
#navistv .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.tv-frame{
  aspect-ratio:16/10;border-radius:var(--r-lg);position:relative;overflow:hidden;
  background:#000;border:1px solid rgba(15,44,61,.2);
  box-shadow:0 40px 90px -30px rgba(15,44,61,.5),0 0 0 8px rgba(15,44,61,.05);
  transform:rotate(-1.5deg);
}
.tv-static{position:absolute;inset:0;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23s)'/%3E%3C/svg%3E");
  animation:staticmove .4s steps(3) infinite}
@keyframes staticmove{to{transform:translate(6px,-6px)}}
.tv-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.8rem;
  background:linear-gradient(160deg,rgba(53,224,234,.12),transparent 45%),linear-gradient(to top,rgba(0,0,0,.75),transparent 55%)}
.tv-chip{position:absolute;top:1.2rem;left:1.4rem;display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:.8rem;letter-spacing:.12em}
.tv-chip .live{width:9px;height:9px;border-radius:50%;background:#ff3b30;animation:blink 1.2s infinite}
.tv-inner h3{font-size:1.5rem;color:#fff;margin-bottom:.3rem}
.tv-inner p{color:#c6d4de;font-size:.95rem}
.tv-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:rgba(255,111,97,.92);display:grid;place-items:center;
  color:#fff;box-shadow:0 0 0 0 rgba(255,111,97,.5);animation:sonar 2.4s infinite;transition:transform .2s;
}
.tv-frame:hover .tv-play{transform:translate(-50%,-50%) scale(1.1)}
@keyframes sonar{to{box-shadow:0 0 0 26px rgba(255,111,97,0)}}
.fb-window{
  max-width:500px;margin-inline:auto;border-radius:22px;overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card);
}
.fb-bar{
  display:flex;align-items:center;gap:.45rem;padding:.65rem .9rem;
  background:linear-gradient(#f8fafb,#edf2f4);border-bottom:1px solid var(--line);
}
.fb-bar span{width:11px;height:11px;border-radius:50%}
.fb-bar .d1{background:#ff6f61}.fb-bar .d2{background:#ffb454}.fb-bar .d3{background:#2ec27e}
.fb-url{
  flex:1;text-align:center;font-size:.78rem;font-weight:700;color:#5b7484;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.32rem .8rem;margin-left:.4rem;transition:color .2s;
}
.fb-url:hover{color:var(--teal-deep)}
.fb-embed{height:560px;overflow:hidden;position:relative}
.fb-embed iframe{display:block;width:100%;border:none;position:relative;z-index:1;margin-top:-58px}
.fb-loading{position:absolute;inset:0;display:grid;place-items:center;color:#7a94a3;font-weight:600;font-size:.95rem}
.tv-feats{margin-top:1.8rem;display:grid;gap:.9rem}
.tv-feats li{list-style:none;display:flex;gap:.7rem;color:var(--text-soft);line-height:1.5;font-size:.98rem}
.tv-feats li svg{flex:none;color:#d98b1c;margin-top:.15rem}
@media(max-width:920px){#navistv .wrap{grid-template-columns:1fr}.tv-frame{transform:none}}

/* ───────── cobertura ───────── */
#cobertura .cover-card{
  margin-top:2.6rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2.5rem;box-shadow:var(--shadow-card);display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;
}
.cover-form label{font-weight:700;font-size:.95rem;display:block;margin-bottom:.6rem}
.cover-row{display:flex;gap:.8rem;flex-wrap:wrap}
.cover-row input{
  flex:1;min-width:220px;font:inherit;padding:.95rem 1.2rem;border-radius:14px;
  border:1.5px solid rgba(18,32,46,.2);background:#fff;transition:border-color .2s,box-shadow .2s;
}
.cover-row input:focus{outline:none;border-color:var(--cyan-deep);box-shadow:0 0 0 4px rgba(53,224,234,.18)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.chip{
  font-size:.82rem;font-weight:600;color:var(--text-soft);background:var(--cream);
  border:1px solid var(--line);border-radius:999px;padding:.4rem .95rem;transition:.2s;
}
.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cover-result{
  margin-top:1.3rem;display:none;align-items:flex-start;gap:.8rem;background:rgba(34,193,94,.09);
  border:1px solid rgba(34,193,94,.3);border-radius:14px;padding:1rem 1.2rem;font-size:.95rem;line-height:1.55;
}
.cover-result.show{display:flex;animation:pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.cover-map{position:relative;display:grid;place-items:center}
.radar{position:relative;width:min(300px,100%);aspect-ratio:1}
.radar .ring{position:absolute;inset:0;border:1.5px solid rgba(14,154,169,.25);border-radius:50%}
.radar .ring:nth-child(2){inset:18%}.radar .ring:nth-child(3){inset:36%}
.radar .sweep{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:conic-gradient(from 0deg,rgba(53,224,234,.35),transparent 70deg);animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.radar .pin{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(255,111,97,.25)}
.radar .pin.p1{top:26%;left:58%}.radar .pin.p2{top:60%;left:30%;background:var(--cyan-deep);box-shadow:0 0 0 5px rgba(53,224,234,.25)}
.radar .pin.p3{top:48%;left:70%;background:#189a4a;box-shadow:0 0 0 5px rgba(34,193,94,.25)}
.radar .center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ink)}
@media(max-width:920px){#cobertura .cover-card{grid-template-columns:1fr}}


/* ───────── speedtest ───────── */
#speedtest{background:#e4f4f7;position:relative;overflow:hidden}
#speedtest::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(650px 380px at 15% 15%,rgba(78,214,229,.25),transparent),
             radial-gradient(560px 380px at 90% 85%,rgba(255,146,131,.16),transparent)}
#speedtest .wrap{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;align-items:center}
@media(max-width:920px){#speedtest .wrap{grid-template-columns:1fr}}
.st-card{
  background:#fff;
  border:1px solid rgba(14,163,189,.22);border-radius:var(--r-lg);
  padding:2.4rem 2.2rem;box-shadow:0 40px 80px -35px rgba(14,120,140,.45),inset 0 1px 0 rgba(255,255,255,.8);
  position:relative;
}
.st-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:linear-gradient(140deg,rgba(53,224,234,.6),transparent 40%,rgba(255,111,97,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.st-go{display:grid;place-items:center;min-height:420px}
.st-go button{
  width:200px;height:200px;border-radius:50%;border:2.5px solid var(--teal);
  color:var(--teal-deep);font-family:var(--disp);font-weight:600;font-size:1.1rem;
  letter-spacing:.08em;background:transparent;transition:.25s;
}
.st-go button:hover{background:rgba(14,163,189,.07);transform:scale(1.05);box-shadow:0 0 0 14px rgba(14,163,189,.07)}
.st-go button:active{transform:scale(.98)}
.st-go.hide{display:none}
.st-main{display:none}
.st-main.show{display:block;animation:pop .4s cubic-bezier(.34,1.56,.64,1)}
.st-phase{display:flex;justify-content:center;align-items:center;gap:.5rem;min-height:1.6em;font-weight:700;font-size:.95rem;color:#6b8291}
.st-phase svg{flex:none}
.st-gauge2{position:relative;width:min(330px,90%);margin:.6rem auto 0}
.st-gauge2 .track{stroke:rgba(18,48,67,.08)}
.st-gauge2 .fill{stroke:var(--teal);stroke-dasharray:335.1;stroke-dashoffset:335.1;transition:stroke-dashoffset .3s ease,stroke .4s}
.st-gauge2 #stTicks line{stroke:rgba(18,48,67,.28);stroke-width:1.4}
.st-gauge2 #stTicks text{font-size:8.5px;fill:#7a94a3;font-weight:700}
#stNeedle{fill:var(--text-dark);transform-origin:100px 100px;transition:transform .3s ease}
.st-gauge2 .hub{fill:var(--text-dark)}
.st-center{position:absolute;left:0;right:0;top:69%;text-align:center;pointer-events:none}
.st-center b{font-family:var(--disp);font-size:2.05rem;color:var(--text-dark);line-height:1;display:block}
.st-center span{font-size:.74rem;color:#7a94a3;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.st-rows{margin-top:1.4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:.7rem}
.st-box{background:#f1f9fb;border:1px solid rgba(18,48,67,.08);border-radius:16px;padding:.9rem .6rem;text-align:center}
.st-box em{font-style:normal;display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#7a94a3;font-weight:700;margin-bottom:.35rem}
.st-box b{font-family:var(--disp);font-size:1.25rem;color:var(--text-dark)}
.st-box small{font-size:.7rem;color:#7a94a3;font-weight:700;margin-left:.15rem}
.st-box.on{border-color:rgba(14,163,189,.55);box-shadow:0 0 22px -8px rgba(14,163,189,.55);background:#fff}
.st-meta{margin-top:1rem;text-align:center;font-size:.82rem;color:#7a94a3;line-height:1.7;min-height:1.2em}
.st-meta b{color:var(--text-soft)}
.st-actions{display:flex;justify-content:center;align-items:center;gap:1.2rem;flex-wrap:wrap}
.st-send{display:none;margin-top:1.2rem;padding:.7rem 1.3rem;font-size:.88rem}
.st-send.show{display:inline-flex}
.st-again{
  display:none;margin-top:1.2rem;align-items:center;gap:.5rem;
  font-weight:800;color:var(--teal-deep);font-size:.95rem;
}
.st-again.show{display:flex}
.st-again:hover{color:var(--teal)}
.st-note{margin-top:1.5rem;font-size:.83rem;color:var(--text-soft);line-height:1.55}

/* ───────── faq ───────── */
#faq{background:var(--cream-2)}
.faq-list{margin-top:2.4rem;display:grid;gap:.9rem;max-width:760px}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.faq-item summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.25rem 1.5rem;font-weight:700;cursor:pointer;font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{flex:none;transition:transform .3s;color:var(--coral)}
.faq-item[open] summary svg{transform:rotate(45deg)}
.faq-item .ans{padding:0 1.5rem 1.3rem;color:var(--text-soft);line-height:1.65;font-size:.96rem}

/* ───────── cta final / footer ───────── */
.cta-final{background:linear-gradient(160deg,#0d9db8,#26c6d6);position:relative;overflow:hidden;text-align:center}
.cta-final::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 0%,rgba(255,255,255,.22),transparent),radial-gradient(500px 300px at 90% 100%,rgba(255,180,84,.2),transparent)}
.cta-final .wrap{position:relative}
.cta-final h2{font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;max-width:22ch;margin-inline:auto;line-height:1.2}
.cta-final p{color:rgba(255,255,255,.9);margin:1.1rem auto 2rem;max-width:34rem;line-height:1.6}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
footer{background:#10293a;padding:3.5rem 0 2.5rem;color:#9db4c2;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-grid h4{color:#fff;font-family:var(--disp);font-size:.92rem;margin-bottom:1rem;font-weight:600}
.foot-grid a{display:flex;align-items:center;gap:.55rem;padding:.3rem 0;transition:color .2s}
.foot-grid a:hover{color:var(--cyan)}
.socials{display:flex;gap:.8rem;margin-top:1.2rem}
.socials a{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:.25s;
}
.socials a:hover{background:var(--cyan);color:var(--ink);transform:translateY(-3px)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media(max-width:840px){.foot-grid{grid-template-columns:1fr;gap:1.8rem}}

/* whatsapp flotante */
.wa-float{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;width:60px;height:60px;border-radius:50%;
  background:#22c15e;color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 34px -8px rgba(34,193,94,.7),0 0 0 0 rgba(34,193,94,.45);
  animation:sonar 2.6s infinite;transition:transform .2s;
}
.wa-float:hover{transform:scale(1.1)}

/* ───────── asistente de preguntas frecuentes ───────── */
.nv-fab{
  position:fixed;right:5.9rem;bottom:1.4rem;z-index:90;width:60px;height:60px;border-radius:50%;
  background:var(--teal);color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 34px -8px rgba(14,163,189,.7),0 0 0 0 rgba(14,163,189,.4);
  animation:sonar 3.2s infinite;transition:transform .2s;cursor:pointer;
}
.nv-fab:hover{transform:scale(1.1)}
.nv-fab .dot{
  position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;
  background:var(--coral);border:2.5px solid #fff;
}
.nv-panel{
  position:fixed;right:1.4rem;bottom:6.8rem;z-index:95;width:min(370px,calc(100vw - 2rem));
  background:#fff;border-radius:22px;border:1px solid rgba(14,163,189,.25);
  box-shadow:0 40px 90px -25px rgba(10,40,55,.5);overflow:hidden;
  display:none;flex-direction:column;max-height:min(560px,calc(100vh - 9rem));
}
.nv-panel.open{display:flex;animation:pop .35s cubic-bezier(.34,1.56,.64,1)}
.nv-head{
  display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;
  background:linear-gradient(135deg,#0d9db8,#26c6d6);color:#fff;
}
.nv-head .ava{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.nv-head b{font-family:var(--disp);font-size:.95rem;font-weight:600;display:block;line-height:1.2}
.nv-head small{font-size:.74rem;opacity:.85;display:flex;align-items:center;gap:.35rem}
.nv-head small::before{content:"";width:7px;height:7px;border-radius:50%;background:#7dffb0}
.nv-close{margin-left:auto;color:#fff;opacity:.85;padding:.3rem}
.nv-close:hover{opacity:1}
.nv-body{padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.55rem;background:#f2f8fa;flex:1}
.nv-b{max-width:85%;padding:.65rem .9rem;border-radius:16px;font-size:.9rem;line-height:1.5;white-space:pre-line;animation:pop .3s cubic-bezier(.34,1.56,.64,1)}
.nv-b.bot{background:#fff;border:1px solid rgba(18,48,67,.08);border-bottom-left-radius:6px;align-self:flex-start;box-shadow:0 3px 10px -6px rgba(10,40,55,.2)}
.nv-b.user{background:var(--teal);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.nv-chips{display:flex;flex-wrap:wrap;gap:.45rem;align-self:flex-start;max-width:95%;animation:pop .3s .05s both cubic-bezier(.34,1.56,.64,1)}
.nv-chip{
  font-size:.84rem;font-weight:700;color:var(--teal-deep);background:#fff;
  border:1.5px solid rgba(14,163,189,.45);border-radius:999px;padding:.45rem .85rem;
  transition:.2s;cursor:pointer;
}
.nv-chip:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.nv-typing{display:inline-flex;gap:5px;padding:.75rem .9rem}
.nv-typing i{width:7px;height:7px;border-radius:50%;background:#9db4c2;animation:nvty 1s infinite}
.nv-typing i:nth-child(2){animation-delay:.15s}.nv-typing i:nth-child(3){animation-delay:.3s}
@keyframes nvty{40%{transform:translateY(-5px);opacity:1}80%,to{opacity:.4}}
@media(max-width:480px){.nv-fab{right:auto;left:1.4rem}.nv-panel{right:1rem}}

/* reveals */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
}

/* ───────── multi-página ───────── */
.pagina{padding-top:9.5rem}
.nav-links a.actual{opacity:1}
.nav-links a.actual::after{width:100%}

/* ───────── nivel wow ───────── */
/* haz de luz giratorio + partículas de fibra en el hero */
.hero-bg::before{
  content:"";position:absolute;inset:-20%;
  background:conic-gradient(from 0deg at 68% 32%,
    transparent 0deg, rgba(53,224,234,.2) 40deg, transparent 85deg,
    transparent 200deg, rgba(255,180,84,.16) 240deg, transparent 285deg);
  animation:girarBeam 26s linear infinite;filter:blur(34px);
}
@keyframes girarBeam{to{transform:rotate(360deg)}}
.hero-bg::after{
  content:"";position:absolute;inset:0;opacity:.8;
  background-image:
    radial-gradient(circle, rgba(14,163,189,.4) 1.5px, transparent 2.2px),
    radial-gradient(circle, rgba(255,111,97,.35) 1.5px, transparent 2.2px),
    radial-gradient(circle, rgba(255,180,84,.4) 1px, transparent 1.6px);
  background-size:150px 150px,210px 210px,120px 120px;
  background-position:0 0,70px 90px,40px 50px;
  animation:flotar 30s linear infinite;
}
@keyframes flotar{to{background-position:0 -600px,70px -750px,40px -530px}}
/* entrada cinematográfica del hero */
.hero h1{animation:entra .8s .2s cubic-bezier(.22,1,.36,1) both}
.hero p.lead{animation:entra .8s .4s cubic-bezier(.22,1,.36,1) both}
.hero .hero-ctas{animation:entra .8s .55s cubic-bezier(.22,1,.36,1) both}
@keyframes entra{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
/* brillo que recorre los botones */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);transition:left .55s ease;pointer-events:none;
}
.btn:hover::after{left:140%}
/* logo con vida */
.logo img{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.logo:hover img{transform:rotate(-5deg) scale(1.06)}
/* olas divisorias (el velero de Navis navega entre secciones) */
.ola{line-height:0;position:relative;z-index:3;margin-top:-62px;margin-bottom:-2px;pointer-events:none}
.ola svg{width:100%;height:64px;display:block}
.ola-cta path{fill:#0d9db8}
.ola-pie path{fill:#10293a}
/* anillo de luz girando en el plan favorito */
@property --giro{syntax:"<angle>";initial-value:0deg;inherits:false}
.plan.star::before{
  content:"";position:absolute;inset:-2.5px;border-radius:inherit;padding:2.5px;
  background:conic-gradient(from var(--giro),#35e0ea,#ffb454,#ff6f61,#22c3d3,#35e0ea);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:girar 5s linear infinite;pointer-events:none;
}
@keyframes girar{to{--giro:360deg}}
.badge-star{animation:latir 2.2s ease-in-out infinite}
@keyframes latir{50%{transform:translateX(-50%) scale(1.07)}}
/* barra de progreso de lectura */
.progreso{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,#0ea3bd,#35e0ea,#ffb454);
  box-shadow:0 0 12px rgba(53,224,234,.7);transition:width .15s ease-out;
}
/* tarjetas con halo al pasar el mouse */
.feat:hover{box-shadow:0 24px 55px -22px rgba(14,120,140,.38),0 0 0 1.5px rgba(14,163,189,.35)}
.plan:hover{box-shadow:0 30px 65px -25px rgba(14,120,140,.4)}
.speed-card{transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
@media(prefers-reduced-motion:reduce){
  .hero-bg::before,.hero-bg::after,.plan.star::before,.badge-star{animation:none!important}
}

/* ───────── mascota ───────── */
@keyframes flotarM{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-14px) rotate(1.5deg)}}
.mascota-hero{
  position:absolute;left:-185px;bottom:-26px;height:355px;width:auto;z-index:3;
  filter:drop-shadow(0 26px 28px rgba(10,40,55,.35));
  animation:flotarM 4.5s ease-in-out infinite alternate;pointer-events:none;
}
@media(max-width:920px){.mascota-hero{display:none}}
.mascota-st{
  height:320px;width:auto;margin:2.2rem auto 0;display:block;
  filter:drop-shadow(0 22px 26px rgba(10,40,55,.3));
  animation:flotarM 5s ease-in-out infinite alternate;
}
.nv-head .ava{overflow:hidden;background:#fff;border:2px solid rgba(255,255,255,.5)}
.nv-head .ava img{width:100%;height:100%;object-fit:cover;object-position:top}