/* ============================================================
   NETHOME — Landing
   Paleta vibrante: violeta / fucsia / cian / naranja
   ============================================================ */

:root{
  --violet:#7C3AED;
  --pink:#EC4899;
  --cyan:#06B6D4;
  --orange:#F97316;
  --lime:#22C55E;

  --ink:#140B29;
  --ink-2:#4A4160;
  --ink-3:#7A7392;
  --line:rgba(20,11,41,.10);

  --bg:#FFFFFF;
  --bg-alt:#FAF7FF;
  --card:#FFFFFF;

  --grad: linear-gradient(100deg,#06B6D4 0%,#7C3AED 45%,#EC4899 75%,#F97316 100%);
  --grad-btn: linear-gradient(100deg,#7C3AED,#EC4899 60%,#F97316);

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --shadow-sm:0 4px 14px rgba(20,11,41,.06);
  --shadow:0 18px 46px -18px rgba(80,30,160,.28);
  --shadow-lg:0 40px 90px -30px rgba(80,30,160,.42);

  --nav-h:74px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  overflow-x:hidden; /* sin esto, el desborde lateral sigue scrolleando en móvil */
}

body{
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

/* Bloquea el scroll del fondo mientras el menú móvil está abierto */
body.is-locked{overflow:hidden}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

.container{width:min(1180px,92vw);margin-inline:auto}
.container.narrow{width:min(820px,92vw)}

h1,h2,h3,h4{line-height:1.1;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.35rem,5.4vw,4.25rem);letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.3rem}

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.grad-text-light{
  background:linear-gradient(100deg,#67E8F9,#F0ABFC,#FDBA74);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- FONDO ---------- */
.bg-canvas{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.34;will-change:transform}
.blob-1{width:46vw;height:46vw;background:radial-gradient(circle,#A78BFA,#7C3AED);top:-12vw;left:-10vw;animation:drift1 22s ease-in-out infinite}
.blob-2{width:40vw;height:40vw;background:radial-gradient(circle,#67E8F9,#06B6D4);top:34vh;right:-12vw;animation:drift2 26s ease-in-out infinite}
.blob-3{width:38vw;height:38vw;background:radial-gradient(circle,#F9A8D4,#EC4899);bottom:-14vw;left:22vw;animation:drift3 30s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(8vw,10vh) scale(1.15)}}
@keyframes drift2{50%{transform:translate(-10vw,-8vh) scale(1.2)}}
@keyframes drift3{50%{transform:translate(6vw,-12vh) scale(.9)}}

.grid-overlay{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(124,58,237,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(124,58,237,.07) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 100%);
}

/* Vela blanca sobre el fondo para que el contenido respire */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(2px);
}

/* ---------- CURSOR GLOW ---------- */
.cursor-glow{
  position:fixed;top:0;left:0;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.16),transparent 62%);
  transform:translate(-50%,-50%);pointer-events:none;z-index:1;
  opacity:0;transition:opacity .4s;mix-blend-mode:multiply;
}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:var(--grad);box-shadow:0 0 12px rgba(124,58,237,.6);
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .35s,box-shadow .35s,backdrop-filter .35s;
}
.nav.is-stuck{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(20,11,41,.4);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.3rem;letter-spacing:-.03em}
.logo-mark{
  width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:var(--grad-btn);color:#fff;box-shadow:0 8px 20px -8px rgba(124,58,237,.8);
  transition:transform .5s var(--ease);
}
.logo-mark svg{width:22px;height:22px}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.08)}

.nav-links{display:flex;align-items:center;gap:1.7rem;font-weight:500;font-size:.96rem}
.nav-links > a:not(.btn){position:relative;color:var(--ink-2);transition:color .25s}
.nav-links > a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;border-radius:2px;
  background:var(--grad);transition:width .35s var(--ease);
}
.nav-links > a:not(.btn):hover{color:var(--ink)}
.nav-links > a:not(.btn):hover::after{width:100%}

.burger{display:none;width:44px;height:44px;flex-direction:column;gap:5px;align-items:center;justify-content:center;border-radius:12px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.35s var(--ease)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.8rem 1.5rem;border-radius:999px;font-weight:600;font-size:.98rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn .ico{width:19px;height:19px}
.btn-sm{padding:.6rem 1.15rem;font-size:.9rem}
.btn-lg{padding:1rem 1.9rem;font-size:1.03rem}
.btn-block{width:100%}

.btn-primary{
  background:var(--grad-btn);background-size:200% 100%;color:#fff;
  box-shadow:0 14px 30px -12px rgba(124,58,237,.75);
}
.btn-primary:hover{transform:translateY(-3px);background-position:100% 0;box-shadow:0 22px 44px -14px rgba(236,72,153,.7)}
.btn-primary:active{transform:translateY(-1px)}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);
}
.btn-primary:hover::after{animation:shine .8s ease}
@keyframes shine{to{left:130%}}

.btn-ghost{
  background:rgba(255,255,255,.7);color:var(--ink);
  border:1.5px solid var(--line);backdrop-filter:blur(8px);
}
.btn-ghost:hover{transform:translateY(-3px);border-color:rgba(124,58,237,.45);box-shadow:var(--shadow-sm)}

/* ---------- HERO ---------- */
.hero{position:relative;padding:calc(var(--nav-h) + 4.5rem) 0 5rem;overflow:hidden}
.particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center;
}

.badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.45rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.8);border:1px solid rgba(124,58,237,.22);
  font-size:.86rem;font-weight:600;color:var(--ink-2);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(8px);
}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);position:relative;flex:none}
.pulse-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--lime);animation:pulse 1.8s infinite}
@keyframes pulse{to{transform:scale(3);opacity:0}}

.hero h1{margin:1.3rem 0 1.1rem}

/* palabra rotativa */
.word-flip{display:inline-grid;vertical-align:bottom}
.word-flip span{
  grid-area:1/1;opacity:0;transform:translateY(.5em) rotateX(-40deg);
  animation:flip 10s infinite;
}
.word-flip span:nth-child(1){animation-delay:0s}
.word-flip span:nth-child(2){animation-delay:2.5s}
.word-flip span:nth-child(3){animation-delay:5s}
.word-flip span:nth-child(4){animation-delay:7.5s}
/* Las 4 palabras entran cada 25% del ciclo (delays 0/2.5/5/7.5s sobre 10s).
   La saliente se desvanece justo mientras la entrante aparece (25%→30%),
   así el renglón nunca queda vacío. */
@keyframes flip{
  0%{opacity:0;transform:translateY(.45em) rotateX(-40deg)}
  5%,25%{opacity:1;transform:none}
  30%,100%{opacity:0;transform:translateY(-.4em) rotateX(35deg)}
}

.lead{font-size:clamp(1.02rem,1.3vw,1.18rem);color:var(--ink-2);max-width:35ch}
.lead-sm{color:var(--ink-2);margin:.9rem 0 1.6rem;max-width:44ch}

.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin:2rem 0 2.6rem}

.hero-stats{display:flex;gap:2.4rem;flex-wrap:wrap}
.stat b{
  display:block;font-family:'Space Grotesk',sans-serif;font-size:1.9rem;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{font-size:.85rem;color:var(--ink-3);font-weight:500}

/* --- Hero visual --- */
.hero-visual{position:relative;display:grid;place-items:center}
.glow-ring{
  position:absolute;width:112%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 0deg,#06B6D4,#7C3AED,#EC4899,#F97316,#06B6D4);
  filter:blur(58px);opacity:.35;animation:spin 16s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}

.device-card{
  position:relative;width:100%;max-width:390px;
  background:linear-gradient(160deg,#1B1035,#2C1758 55%,#3B1B5E);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);padding:1.6rem;color:#fff;
  box-shadow:var(--shadow-lg);
  transform-style:preserve-3d;transition:transform .4s var(--ease);
}
.device-head{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;margin-bottom:.4rem}
.live{display:inline-flex;align-items:center;gap:.4rem;color:#A7F3D0;font-weight:600}
.device-name{color:rgba(255,255,255,.5)}

.gauge{position:relative;margin:.2rem 0 .6rem}
.gauge svg{width:100%}
#gaugeArc{transition:stroke-dashoffset 1.6s var(--ease);filter:drop-shadow(0 0 10px rgba(236,72,153,.6))}
.gauge-value{position:absolute;left:0;right:0;bottom:2px;text-align:center}
.gauge-value b{display:block;font-family:'Space Grotesk',sans-serif;font-size:2.6rem;font-weight:700;line-height:1}
.gauge-value small{font-size:.78rem;color:rgba(255,255,255,.55);letter-spacing:.12em;text-transform:uppercase}

.device-bars{display:grid;gap:.65rem;margin:1.1rem 0}
.bar-row{display:grid;grid-template-columns:64px 1fr 46px;align-items:center;gap:.7rem;font-size:.8rem}
.bar-row span{color:rgba(255,255,255,.55)}
.bar-row b{text-align:right;font-family:'Space Grotesk',sans-serif;font-size:.85rem}
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);transition:width 1.4s var(--ease) .3s}
.device-card.is-live .bar i{width:var(--w)}

.device-foot{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{
  font-size:.72rem;padding:.3rem .6rem;border-radius:99px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
}

.float-card{
  position:absolute;padding:.65rem 1rem;border-radius:14px;font-size:.83rem;font-weight:600;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.float-a{top:6%;left:-6%;animation:float 5s ease-in-out infinite}
.float-b{bottom:8%;right:-4%;animation:float 6.5s ease-in-out infinite .8s}
@keyframes float{50%{transform:translateY(-12px)}}

.scroll-hint{
  position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid rgba(124,58,237,.35);border-radius:99px;
  display:grid;justify-items:center;padding-top:7px;
}
.scroll-hint span{width:4px;height:8px;border-radius:99px;background:var(--violet);animation:wheel 1.6s infinite}
@keyframes wheel{60%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ---------- MARQUEE ---------- */
.marquee{
  overflow:hidden;padding:.9rem 0;
  background:var(--grad-btn);color:#fff;
  font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.08em;font-size:.9rem;
  transform:rotate(-1.2deg) scale(1.03);
  box-shadow:var(--shadow);
}
.marquee-track{display:flex;gap:2rem;width:max-content;animation:scrollx 32s linear infinite}
.marquee-track span{white-space:nowrap}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- SECCIONES ---------- */
.section{padding:6rem 0;position:relative}
.section-alt{background:linear-gradient(180deg,transparent,rgba(250,247,255,.9) 12%,rgba(250,247,255,.9) 88%,transparent)}

.section-head{text-align:center;max-width:640px;margin:0 auto 3.2rem}
.section-head p{color:var(--ink-2);margin-top:.9rem}
.eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.7rem;
}
.eyebrow.light{background:linear-gradient(90deg,#67E8F9,#F0ABFC);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- CARDS SERVICIOS ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.card{
  position:relative;padding:1.9rem 1.6rem 1.6rem;border-radius:var(--r-lg);
  background:rgba(255,255,255,.78);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
  transform-style:preserve-3d;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .45s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(124,58,237,.13),transparent 55%);
}
.card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:99px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(124,58,237,.28)}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}

.card-ico{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;
  margin-bottom:1.1rem;transition:transform .5s var(--ease);
  background:linear-gradient(140deg,rgba(124,58,237,.16),rgba(236,72,153,.16));
}
.card[data-accent="cyan"] .card-ico{background:linear-gradient(140deg,rgba(6,182,212,.18),rgba(124,58,237,.16))}
.card[data-accent="pink"] .card-ico{background:linear-gradient(140deg,rgba(236,72,153,.18),rgba(249,115,22,.16))}
.card[data-accent="orange"] .card-ico{background:linear-gradient(140deg,rgba(249,115,22,.2),rgba(234,179,8,.16))}
.card:hover .card-ico{transform:scale(1.1) rotate(-6deg)}

.card h3{margin-bottom:.55rem}
.card > p{color:var(--ink-2);font-size:.95rem}

.ticks{list-style:none;margin:1.1rem 0 1.3rem;display:grid;gap:.45rem}
.ticks li{position:relative;padding-left:1.5rem;font-size:.9rem;color:var(--ink-2)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:15px;height:15px;border-radius:50%;
  background:var(--grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.card-link{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.92rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;z-index:1;
}
.card-link span{transition:transform .3s var(--ease);display:inline-block;color:var(--violet)}
.card-link:hover span{transform:translateX(5px)}

/* ---------- PLANES ---------- */
.toggle-wrap{display:flex;justify-content:center;margin-bottom:2.6rem}
.toggle{
  position:relative;display:flex;padding:5px;border-radius:999px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.toggle-btn{
  position:relative;z-index:1;padding:.6rem 1.5rem;border-radius:999px;
  font-weight:600;font-size:.94rem;color:var(--ink-3);transition:color .3s;
}
.toggle-btn.is-active{color:#fff}
.toggle-pill{
  position:absolute;top:5px;bottom:5px;border-radius:999px;background:var(--grad-btn);
  box-shadow:0 8px 20px -8px rgba(124,58,237,.7);
  transition:left .45s var(--ease),width .45s var(--ease);
}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:1.5rem;align-items:start}
.plan{
  position:relative;padding:2rem 1.7rem;border-radius:var(--r-lg);
  background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
  animation:planIn .5s var(--ease) backwards;
}
@keyframes planIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
.plan:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(124,58,237,.3)}

.plan.is-featured{
  background:linear-gradient(165deg,#1B1035,#2E1659 60%,#4A1B63);color:#fff;border-color:transparent;
  box-shadow:var(--shadow-lg);transform:scale(1.03);
}
.plan.is-featured:hover{transform:scale(1.03) translateY(-8px)}
.plan.is-featured .plan-speed small,.plan.is-featured .plan-price small,.plan.is-featured .ticks li{color:rgba(255,255,255,.72)}
.plan.is-featured .ticks li::before{background:linear-gradient(90deg,#67E8F9,#F0ABFC)}

.plan-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  padding:.35rem .9rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--grad-btn);color:#fff;box-shadow:0 8px 20px -8px rgba(236,72,153,.8);white-space:nowrap;
}
.plan-name{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.plan.is-featured .plan-name{color:#F0ABFC}

.plan-speed{display:flex;align-items:baseline;gap:.35rem;margin:.5rem 0 .2rem}
.plan-speed b{font-family:'Space Grotesk',sans-serif;font-size:3rem;font-weight:700;line-height:1;letter-spacing:-.03em}
.plan:not(.is-featured) .plan-speed b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan-speed small{font-size:.95rem;color:var(--ink-3);font-weight:600}
.plan-sub{font-size:.88rem;color:var(--ink-3)}
.plan.is-featured .plan-sub{color:rgba(255,255,255,.6)}

.plan-price{margin:1.2rem 0 .2rem;display:flex;align-items:baseline;gap:.3rem}
.plan-price b{font-size:1.9rem;font-weight:800;letter-spacing:-.02em}
.plan-price small{font-size:.85rem;color:var(--ink-3)}

.plan .ticks{margin:1.2rem 0 1.6rem}
.plan .btn{width:100%}
.plan.is-featured .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
.plan.is-featured .btn-ghost:hover{background:rgba(255,255,255,.2)}

.plans-note{text-align:center;margin-top:2rem;font-size:.86rem;color:var(--ink-3)}

/* ---------- TEST DE VELOCIDAD ---------- */
.speed-panel{
  display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;
  padding:3rem;border-radius:var(--r-xl);
  background:rgba(255,255,255,.8);backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
/* Sin esto, la fila de chips deslizable ensancha la columna y desborda el panel */
.speed-panel > *{min-width:0}
.speed-copy p{color:var(--ink-2);margin:.9rem 0 2rem;max-width:42ch}
.slider-label{display:block;font-size:.9rem;font-weight:600;color:var(--ink-2);margin-bottom:.7rem}
.slider-label b{color:var(--violet);font-family:'Space Grotesk',sans-serif}

.slider{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--violet) var(--fill,26%),rgba(124,58,237,.15) var(--fill,26%));
  outline:none;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;cursor:grab;
  background:var(--grad-btn);border:3px solid #fff;
  box-shadow:0 6px 16px -4px rgba(124,58,237,.8);transition:transform .25s;
}
.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.slider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;cursor:grab;border:3px solid #fff;
  background:var(--violet);box-shadow:0 6px 16px -4px rgba(124,58,237,.8);
}

.usage-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.usage{
  padding:.55rem 1rem;border-radius:999px;font-size:.88rem;font-weight:600;
  border:1.5px solid var(--line);background:#fff;color:var(--ink-2);
  transition:all .3s var(--ease);
}
.usage:hover{transform:translateY(-2px);border-color:rgba(124,58,237,.4)}
.usage.is-on{background:var(--grad-btn);color:#fff;border-color:transparent;box-shadow:0 8px 18px -8px rgba(124,58,237,.8)}

.speed-result{display:grid;justify-items:center;gap:1.1rem}
.result-ring{position:relative;width:200px}
#ringArc{transition:stroke-dashoffset .8s var(--ease);filter:drop-shadow(0 4px 12px rgba(124,58,237,.35))}
.ring-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-center b{
  font-family:'Space Grotesk',sans-serif;font-size:2.6rem;font-weight:700;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.ring-center small{font-size:.72rem;color:var(--ink-3);font-weight:600}
.rec-plan{font-size:.95rem;color:var(--ink-2)}
.rec-plan b{color:var(--violet)}

/* ---------- COBERTURA ---------- */
.cov-grid{display:grid;grid-template-columns:1fr .9fr;gap:3.5rem;align-items:center}
.cov-form{display:flex;gap:.7rem;flex-wrap:wrap}
.cov-form .field{flex:1;min-width:220px}
.cov-form input{
  width:100%;padding:.95rem 1.2rem;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;transition:.3s;
}
.cov-form input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,58,237,.12)}
.cov-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem}
.cov-tags span{
  font-size:.82rem;padding:.35rem .8rem;border-radius:999px;
  background:rgba(124,58,237,.08);color:var(--violet);font-weight:600;
}

.cov-visual{display:grid;place-items:center}
.radar{position:relative;width:min(340px,80vw);aspect-ratio:1;display:grid;place-items:center}
.radar-ring{
  position:absolute;border-radius:50%;border:1.5px solid rgba(124,58,237,.28);
  inset:0;animation:radarPulse 3s ease-out infinite;
}
.radar-ring:nth-child(2){animation-delay:1s}
.radar-ring:nth-child(3){animation-delay:2s}
@keyframes radarPulse{
  from{transform:scale(.28);opacity:0}
  30%{opacity:1}
  to{transform:scale(1);opacity:0}
}
.radar-sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(124,58,237,.35),transparent 28%);
  animation:spin 4s linear infinite;
}
.radar-core{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;
  background:var(--grad-btn);box-shadow:0 12px 34px -10px rgba(124,58,237,.9);z-index:1;
}
.radar-dot{
  position:absolute;left:var(--x);top:var(--y);width:11px;height:11px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 0 5px rgba(236,72,153,.18);
  animation:blink 2.4s ease-in-out infinite;
}
.radar-dot:nth-of-type(2){animation-delay:.6s;background:var(--cyan);box-shadow:0 0 0 5px rgba(6,182,212,.18)}
.radar-dot:nth-of-type(3){animation-delay:1.2s;background:var(--orange);box-shadow:0 0 0 5px rgba(249,115,22,.18)}
.radar-dot:nth-of-type(4){animation-delay:1.8s;background:var(--lime);box-shadow:0 0 0 5px rgba(34,197,94,.18)}
@keyframes blink{50%{transform:scale(1.5);opacity:.6}}

/* ---------- POR QUÉ ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem}
.why{
  padding:1.7rem;border-radius:var(--r);background:rgba(255,255,255,.7);
  border:1px solid var(--line);backdrop-filter:blur(8px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.why:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.why b{font-size:1.8rem;display:block;margin-bottom:.7rem}
.why h4{font-size:1.05rem;margin-bottom:.4rem}
.why p{font-size:.9rem;color:var(--ink-2)}

/* ---------- TESTIMONIOS ---------- */
.testi-viewport{overflow:hidden;border-radius:var(--r-lg)}
.testi-track{display:flex;transition:transform .6s var(--ease)}
.testi{
  flex:0 0 100%;padding:2.4rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.stars{color:#F59E0B;letter-spacing:.18em;margin-bottom:1rem}
.testi blockquote{font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:500;line-height:1.5;letter-spacing:-.01em}
.testi figcaption{display:flex;align-items:center;gap:.7rem;margin-top:1.6rem;font-size:.9rem}
.testi figcaption b{font-weight:700}
.testi figcaption small{color:var(--ink-3)}
.avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-weight:700;font-size:.85rem;
}
.testi-nav{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:1.6rem}
.testi-nav button{
  width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid var(--line);
  font-size:1.1rem;transition:.3s var(--ease);
}
.testi-nav button:hover{border-color:var(--violet);color:var(--violet);transform:scale(1.08)}
.dots{display:flex;gap:.45rem}
.dots button{width:9px;height:9px;border-radius:99px;background:rgba(124,58,237,.22);transition:.35s var(--ease)}
.dots button.is-on{width:28px;background:var(--grad-btn)}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:.8rem}
.faq{
  background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(8px);overflow:hidden;transition:border-color .3s,box-shadow .3s;
}
.faq[open]{border-color:rgba(124,58,237,.35);box-shadow:var(--shadow-sm)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-weight:600;font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{
  flex:none;width:26px;height:26px;border-radius:50%;position:relative;
  background:rgba(124,58,237,.1);transition:.35s var(--ease);
}
.faq summary i::before,.faq summary i::after{
  content:"";position:absolute;inset:50% 7px auto;height:2px;border-radius:2px;
  background:var(--violet);transform:translateY(-50%);transition:.35s var(--ease);
}
.faq summary i::after{transform:translateY(-50%) rotate(90deg)}
.faq[open] summary i{background:var(--grad-btn);transform:rotate(135deg)}
.faq[open] summary i::before,.faq[open] summary i::after{background:#fff}
.faq-body{padding:0 1.4rem 1.3rem;color:var(--ink-2);font-size:.95rem}
.faq[open] .faq-body{animation:fadeDown .4s var(--ease)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}}

/* ---------- CTA ---------- */
.cta-panel{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  padding:3.4rem;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg,#170D2E,#2C1758 45%,#4A1B63 80%,#6B2145);
  color:#fff;box-shadow:var(--shadow-lg);
}
.cta-glow{
  position:absolute;width:60%;aspect-ratio:1;border-radius:50%;top:-30%;right:-10%;
  background:conic-gradient(from 0deg,#06B6D4,#7C3AED,#EC4899,#F97316,#06B6D4);
  filter:blur(80px);opacity:.4;animation:spin 18s linear infinite;
}
.cta-copy,.cta-form{position:relative;z-index:1}
.cta-copy > p{color:rgba(255,255,255,.7);margin-top:.9rem}

.contact-list{list-style:none;margin-top:2rem;display:grid;gap:.9rem}
.contact-list li{display:flex;gap:.8rem;align-items:baseline;font-size:.95rem}
.contact-list b{min-width:92px;color:rgba(255,255,255,.5);font-weight:600;font-size:.85rem}
.contact-list a{border-bottom:1px solid rgba(255,255,255,.3);transition:.3s}
.contact-list a:hover{border-color:#F0ABFC;color:#F0ABFC}

.cta-form{display:grid;gap:.9rem}
.field{display:grid;gap:.35rem}
.cta-form label{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.65)}
.cta-form input,.cta-form select{
  width:100%;padding:.85rem 1.1rem;border-radius:14px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.16);color:#fff;
  transition:.3s;
}
.cta-form input::placeholder{color:rgba(255,255,255,.35)}
.cta-form input:focus,.cta-form select:focus{
  outline:none;border-color:#F0ABFC;background:rgba(255,255,255,.13);
  box-shadow:0 0 0 4px rgba(236,72,153,.18);
}
.cta-form select option{color:#140B29}
.field.has-err input{border-color:#FB7185}
.field-err{font-size:.76rem;color:#FDA4AF;min-height:1em}
.cov-form .field-err{color:#E11D48}
.form-note{font-size:.78rem;color:rgba(255,255,255,.5);text-align:center}

/* ---------- FOOTER ---------- */
.footer{padding:4rem 0 2rem;border-top:1px solid var(--line);background:rgba(250,247,255,.7)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem}
.footer-tag{color:var(--ink-3);font-size:.9rem;margin-top:1rem;max-width:28ch}
.footer h5{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.footer-grid a:not(.logo){display:block;font-size:.92rem;color:var(--ink-2);padding:.28rem 0;transition:.25s}
.footer-grid a:not(.logo):hover{color:var(--violet);transform:translateX(4px)}
.footer-bottom{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);
  font-size:.83rem;color:var(--ink-3);
}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:55;
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#25D366,#128C7E);color:#fff;
  box-shadow:0 14px 34px -10px rgba(18,140,126,.8);
  transition:transform .35s var(--ease);
}
.wa-float svg{width:32px;height:32px}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#25D366;opacity:.55;animation:pulse 2.2s infinite;z-index:-1;
}
.wa-float:hover{transform:scale(1.1) rotate(6deg)}
.wa-tip{
  position:absolute;right:calc(100% + 12px);white-space:nowrap;
  background:#140B29;color:#fff;font-size:.82rem;font-weight:600;
  padding:.45rem .8rem;border-radius:10px;
  opacity:0;transform:translateX(8px);transition:.3s var(--ease);pointer-events:none;
}
.wa-float:hover .wa-tip{opacity:1;transform:none}

/* ---------- TOAST ---------- */
.toast{
  position:fixed;left:50%;bottom:30px;
  transform:translate(-50%,24px);
  opacity:0;visibility:hidden; /* sin esto, el toast vacío queda flotando en pantalla */
  z-index:70;padding:.9rem 1.4rem;border-radius:14px;
  background:#140B29;color:#fff;font-size:.92rem;font-weight:500;
  box-shadow:var(--shadow-lg);max-width:90vw;
  transition:transform .5s var(--ease),opacity .35s,visibility .35s;
}
.toast.is-on{transform:translate(-50%,0);opacity:1;visibility:visible}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero-grid,.cov-grid,.speed-panel,.cta-panel{grid-template-columns:1fr}
  .hero-grid{gap:3rem}
  .hero-visual{order:2;margin-top:1rem}
  .lead,.lead-sm{max-width:none}
  .speed-panel,.cta-panel{padding:2.2rem}
  .footer-grid{grid-template-columns:1fr 1fr}
  .plan.is-featured{transform:none}
  .plan.is-featured:hover{transform:translateY(-8px)}
  .float-a{left:0}
  .float-b{right:0}
}

@media (max-width:760px){
  .burger{display:flex}
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 0;flex-direction:column;align-items:stretch;
    justify-content:flex-start;
    gap:0;padding:1.4rem 6vw 1.6rem;
    background:#fff; /* opaco: si es translúcido, se lee el hero por detrás */
    box-shadow:0 22px 40px -20px rgba(20,11,41,.35);
    transform:translateY(-130%);transition:transform .5s var(--ease);
  }
  /* La barra superior también se vuelve sólida mientras el menú está abierto */
  body.is-locked .nav{
    background:#fff;
    box-shadow:0 1px 0 var(--line);
  }
  .nav-links.is-open{transform:none}
  .nav-links > a:not(.btn){padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav-cta{margin-top:1.1rem;justify-content:center}
  .section{padding:4.2rem 0}
  .hero{padding-top:calc(var(--nav-h) + 2.5rem)}
  .footer-grid{grid-template-columns:1fr;gap:1.8rem}
  .scroll-hint{display:none}
  .testi{padding:1.6rem}
  .speed-panel,.cta-panel{padding:1.6rem}
  .marquee{transform:none}

  /* --- Nav móvil: scrolleable si la pantalla es baja --- */
  .nav-links{
    height:calc(100dvh - var(--nav-h));
    overflow-y:auto;
    padding-bottom:calc(1.6rem + env(safe-area-inset-bottom));
    /* Cerrado sigue estando en pantalla (corrido hacia arriba): si no lo sacamos
       del hit-testing, se come los toques sobre el header y la hamburguesa. */
    visibility:hidden;
    pointer-events:none;
    transition:transform .5s var(--ease),visibility .5s;
  }
  .nav-links.is-open{visibility:visible;pointer-events:auto}

  /* --- Hero --- */
  .hero-grid{gap:2.4rem}
  .badge{font-size:.8rem;padding:.4rem .85rem}
  h1{font-size:2.1rem}
  h2{font-size:1.75rem}
  .hero h1{margin:1rem 0 .9rem}
  .hero .lead{font-size:1rem}
  .section-head{margin-bottom:2.4rem}
  .hero-actions{margin:1.7rem 0 2.2rem;gap:.7rem}
  .hero-actions .btn{flex:1 1 100%}

  /* Stats en 3 columnas parejas, con separadores */
  .hero-stats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .stat{text-align:center;padding:0 .3rem}
  .stat + .stat{border-left:1px solid var(--line)}
  .stat b{font-size:1.45rem}
  .stat span{font-size:.72rem;line-height:1.3;display:block}

  /* Router: las tarjetas flotantes se meten adentro para no desbordar */
  .hero-visual{margin-top:.5rem}
  .device-card{max-width:340px;padding:1.3rem}
  .gauge-value b{font-size:2.2rem}
  .float-card{font-size:.76rem;padding:.5rem .8rem}
  .float-a{top:-2%;left:2%}
  .float-b{bottom:-2%;right:2%}
  .glow-ring{width:100%}

  /* --- Planes --- */
  .toggle-btn{padding:.55rem 1.1rem;font-size:.88rem}
  .plans{gap:1.8rem}
  .plan{padding:1.7rem 1.4rem}
  .plan-speed b{font-size:2.5rem}

  /* --- Simulador --- */
  .speed-panel{gap:2.2rem}
  .speed-copy p{margin-bottom:1.5rem}
  .result-ring{width:170px}
  .ring-center b{font-size:2.2rem}
  /* Chips de uso: fila deslizable, no un bloque enorme apilado */
  .usage-chips{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:1.5rem 0 0;padding:.2rem .2rem .8rem;
    scrollbar-width:none;
  }
  .usage-chips::-webkit-scrollbar{display:none}
  .usage{flex:none;scroll-snap-align:start}

  /* --- Cobertura --- */
  .cov-form{flex-direction:column}
  .cov-form .field,.cov-form .btn{width:100%}
  .radar{width:min(280px,72vw)}

  /* --- Testimonios --- */
  .testi blockquote{font-size:1.02rem}
  .testi figcaption{margin-top:1.2rem}

  /* --- FAQ --- */
  .faq summary{padding:1rem 1.1rem;font-size:.95rem}
  .faq-body{padding:0 1.1rem 1.1rem;font-size:.92rem}

  /* --- CTA --- */
  .cta-panel{gap:2.2rem}
  .contact-list{margin-top:1.5rem}
  .contact-list li{flex-direction:column;gap:.15rem}
  .contact-list b{min-width:0}

  /* --- Footer / WhatsApp con safe-area --- */
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
  .wa-float{
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    width:56px;height:56px;
  }
  .wa-float svg{width:29px;height:29px}
  .wa-tip{display:none}
  .toast{bottom:calc(90px + env(safe-area-inset-bottom));font-size:.86rem;padding:.8rem 1.1rem}
}

/* Pantallas muy angostas (iPhone SE y similares) */
@media (max-width:380px){
  .hero-stats{grid-template-columns:1fr 1fr;gap:.8rem 0;border-bottom:0;padding-bottom:0}
  .stat:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding-top:.8rem}
  .plan-speed b{font-size:2.2rem}
  .device-card{padding:1.1rem}
  .bar-row{grid-template-columns:56px 1fr 42px;font-size:.75rem}
}

/* ---------- TÁCTIL: sin hovers pegados, tap targets cómodos ---------- */
@media (hover:none){
  .card:hover,.plan:hover,.why:hover,.btn:hover,.usage:hover,.testi-nav button:hover{
    transform:none;
  }
  .card:hover{box-shadow:var(--shadow-sm);border-color:var(--line)}
  .card:hover::after{transform:scaleX(0)}
  .card:hover::before{opacity:0}
  .card:hover .card-ico{transform:none}
  .plan:hover{box-shadow:var(--shadow-sm);border-color:var(--line)}
  .plan.is-featured:hover{box-shadow:var(--shadow-lg)}
  .why:hover{box-shadow:none}
  .btn-primary:hover{box-shadow:0 14px 30px -12px rgba(124,58,237,.75)}
  .btn-primary:hover::after{animation:none}
  .footer-grid a:not(.logo):hover{transform:none}

  /* feedback al tocar, en vez de hover */
  .btn:active{transform:scale(.97)}
  .card:active,.plan:active{transform:scale(.99)}
  .usage:active{transform:scale(.95)}

  /* área táctil mínima en los puntitos del carrusel */
  .dots button{padding:10px 0;background-clip:content-box}
  .dots{gap:.2rem}
}

/* Sin cursor fino: fuera el glow que sigue al mouse */
@media (pointer:coarse){
  .cursor-glow{display:none}
  /* el desenfoque de fondo a pantalla completa es caro en celulares */
  body::before{backdrop-filter:none;background:rgba(255,255,255,.72)}
  .blob{filter:blur(60px)}
  .card,.faq,.why,.speed-panel,.badge{backdrop-filter:none}
}

/* iOS: evita el zoom automático al enfocar un input (necesita ≥16px) */
@media (max-width:760px){
  input,select,textarea{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .device-card.is-live .bar i,.bar i{width:var(--w)}
}