/* ==========================================================================
   JRINTERCOM — Sistema de diseño "Fibra Viva"
   Paleta derivada del logotipo: azul profundo, cian luminoso, rojo de marca.
   ========================================================================== */

/* ---------- Fuentes (self-hosted, sin peticiones a terceros) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Superficies */
  --ink-900: #03060E;
  --ink-800: #060C1A;
  --ink-700: #0A1224;
  --ink-600: #101B33;
  --ink-500: #16233F;

  /* Líneas */
  --line: rgba(140, 190, 255, .11);
  --line-2: rgba(140, 190, 255, .22);
  --line-3: rgba(140, 190, 255, .35);

  /* Texto */
  --txt: #E9EFFB;
  --txt-2: #A2B2CF;
  --txt-3: #6F81A4;

  /* Marca */
  --cyan: #5CD6F0;
  --cyan-2: #9BEBFB;
  --blue: #1B6BE0;
  --blue-2: #0A2A6B;
  --red: #E4141B;
  --red-2: #FF3E44;
  --green: #22D18A;

  /* Degradados */
  --grad-brand: linear-gradient(115deg, #5CD6F0 0%, #1B6BE0 55%, #0A2A6B 100%);
  --grad-red: linear-gradient(115deg, #FF3E44 0%, #E4141B 60%, #A3070C 100%);
  --grad-text: linear-gradient(100deg, #FFFFFF 0%, #9BEBFB 45%, #5CD6F0 100%);
  --grad-surface: linear-gradient(160deg, rgba(28, 45, 80, .55) 0%, rgba(8, 15, 30, .55) 100%);

  /* Sombras */
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --sh-md: 0 18px 40px -18px rgba(0, 0, 0, .75);
  --sh-lg: 0 40px 90px -40px rgba(0, 0, 0, .9);
  --glow-cyan: 0 0 0 1px rgba(92, 214, 240, .3), 0 20px 60px -25px rgba(27, 107, 224, .65);
  --glow-red: 0 14px 40px -14px rgba(228, 20, 27, .6);

  /* Métrica */
  --rad: 16px;
  --rad-lg: 24px;
  --rad-xl: 32px;
  --pad: clamp(20px, 5vw, 40px);
  --gap: clamp(16px, 2.4vw, 28px);
  --maxw: 1220px;
  --nav-h: 72px;

  /* Tipografía */
  --f-display: 'Space Grotesk', 'InterVar', system-ui, sans-serif;
  --f-body: 'InterVar', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  font-family: var(--f-body);
  font-size: clamp(15px, .55vw + 13.6px, 17px);
  line-height: 1.65;
  color: var(--txt);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* En pantallas angostas una palabra larga (un mail, una URL) no debe
     empujar la maqueta hacia afuera. */
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgba(92, 214, 240, .18);
}
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection { background: rgba(92, 214, 240, .3); color: #fff; }

/* Scrollbar */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--ink-900); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--blue), var(--blue-2));
    border-radius: 20px;
    border: 3px solid var(--ink-900);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--cyan); }
}

/* ---------- Utilidades ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* max() con env(): en iPhone con muesca el contenido nunca queda debajo del
     recorte cuando el telefono esta acostado. En el resto vale el clamp. */
  padding-left: max(clamp(18px, 4vw, 32px), env(safe-area-inset-left));
  padding-right: max(clamp(18px, 4vw, 32px), env(safe-area-inset-right));
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  padding: 10px 18px; border-radius: 10px;
  background: var(--cyan); color: #03060E; font-weight: 700;
  transform: translateY(-200%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

section { position: relative; }
.section { padding-block: clamp(64px, 9vw, 128px); isolation: isolate; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }

/* Fondo de rejilla técnica */
.grid-bg::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}

/* Halo de luz */
.halo {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(90px); opacity: .5; z-index: -1;
}
.halo--cyan { background: radial-gradient(circle, rgba(92, 214, 240, .55), transparent 65%); }
.halo--blue { background: radial-gradient(circle, rgba(27, 107, 224, .55), transparent 65%); }
.halo--red { background: radial-gradient(circle, rgba(228, 20, 27, .38), transparent 65%); }

/* ---------- Tipografía de sección ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan); font-weight: 600;
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ''; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.h-xl { font-size: clamp(2.6rem, 7.2vw, 5.4rem); }
.h-lg { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.h-md { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.02em; }
.h-sm { font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -.01em; line-height: 1.2; }

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lead {
  font-size: clamp(1.02rem, 1.15vw, 1.16rem);
  color: var(--txt-2);
  max-width: 60ch;
  text-wrap: pretty;
}
.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.section-head > * + * { margin-top: 14px; }
.section-head--center { text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--ink-600);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  white-space: nowrap;
  background: var(--btn-bg);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .22s, color .22s, border-color .22s;
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad-red);
  color: #fff;
  box-shadow: var(--glow-red);
}
.btn--primary:hover { box-shadow: 0 20px 50px -14px rgba(228, 20, 27, .78); }

.btn--brand {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 16px 44px -18px rgba(27, 107, 224, .8);
}
.btn--brand:hover { box-shadow: 0 22px 56px -16px rgba(92, 214, 240, .7); }

.btn--ghost {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-2);
  color: var(--txt);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .08); }

.btn--wa { background: #1FA855; color: #fff; box-shadow: 0 14px 36px -14px rgba(31, 168, 85, .7); }
.btn--wa:hover { background: #24BC5F; }

.btn--sm { padding: 10px 18px; font-size: .86rem; }
.btn--lg { padding: 17px 34px; font-size: 1.02rem; }
.btn--full { width: 100%; }

/* Link con flecha */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--cyan); font-family: var(--f-display);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .25s; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Tarjetas ---------- */
.card {
  position: relative;
  background: var(--grad-surface);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  padding: clamp(22px, 2.6vw, 32px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .3s, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.card::after {
  content: '';
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), transparent 40%);
  pointer-events: none;
}
.card--hover:hover {
  transform: translateY(-4px);
  border-color: var(--line-3);
  box-shadow: var(--sh-md);
}

/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 80;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
.nav.is-stuck {
  background: rgba(4, 8, 18, .82);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav__inner {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  height: var(--nav-h);
}

/* Marca */
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand__mark {
  width: 40px; height: 40px; flex: none;
  filter: drop-shadow(0 2px 10px rgba(92, 214, 240, .4));
}
.brand__text {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.22rem; letter-spacing: -.035em; line-height: 1;
}
/* Mismo contraste de peso que el logotipo: JR en 700, "intercom" en 500 y algo
   mas tenue. El rojo ya no vive aca, vive solo en el nodo del isotipo. */
.brand__text i { font-style: normal; font-weight: 500; opacity: .78; }
.brand__tag {
  display: block; margin-top: 3px;
  font-family: var(--f-mono); font-size: .535rem;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--txt-3); font-weight: 500;
}

.nav__menu {
  display: flex; align-items: center; gap: clamp(4px, 1vw, 10px);
  margin-left: auto;
}
.nav__link {
  position: relative;
  padding: 9px 13px; border-radius: 10px;
  font-size: .89rem; font-weight: 500; color: var(--txt-2);
  transition: color .2s, background .2s;
}
.nav__link:hover, .nav__link.is-active { color: var(--txt); background: rgba(255, 255, 255, .05); }
.nav__link.is-active::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--grad-brand);
}
.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }

.nav__burger {
  display: none; width: 44px; height: 44px; flex: none;
  border-radius: 12px; border: 1px solid var(--line-2);
  align-items: center; justify-content: center;
}
.nav__burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--txt); position: relative;
  transition: transform .3s, background .3s;
}
.nav__burger span::before, .nav__burger span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px;
  border-radius: 2px; background: var(--txt); transition: transform .3s, top .3s;
}
.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1040px) {
  .nav__burger { display: flex; margin-left: auto; }
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 18px clamp(18px, 4vw, 32px) 26px;
    background: rgba(4, 8, 18, .97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
    max-height: calc(100dvh - var(--nav-h) - 20px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav__menu.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__link { padding: 14px 12px; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__link.is-active::after { display: none; }
  .nav__menu .nav__mobile-cta { display: flex; margin-top: 18px; }
  .nav__actions .btn--nav-desktop { display: none; }
}
@media (min-width: 1041px) {
  .nav__mobile-cta { display: none; }
}
@media (max-width: 560px) {
  .nav__actions .btn--portal { display: none; }
  .brand__tag { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(52px, 8vw, 104px) clamp(56px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
}
#fiber-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; opacity: .95;
}
.hero__halo-1 { width: 620px; height: 620px; top: -220px; right: -160px; }
.hero__halo-2 { width: 480px; height: 480px; bottom: -220px; left: -180px; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
}

.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 8px; margin-bottom: 24px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(92, 214, 240, .07);
  font-size: .8rem; font-weight: 500; color: var(--txt-2);
  backdrop-filter: blur(8px);
}
.hero__badge b {
  padding: 3px 10px; border-radius: 999px;
  background: var(--grad-red); color: #fff;
  font-family: var(--f-display); font-size: .74rem; letter-spacing: .04em;
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(34, 209, 138, .8);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(34, 209, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 209, 138, 0); }
}

.hero h1 { margin-bottom: 22px; }
.hero h1 .kicker {
  display: block;
  font-family: var(--f-body); font-size: clamp(.9rem, 1.3vw, 1.05rem);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 14px;
}
/* Palabra rotativa */
.rotator {
  display: inline-grid; vertical-align: bottom;
  overflow: hidden;
  height: 1.24em; margin-bottom: -.16em;
  padding-inline: .04em; margin-inline: -.04em;
}
.rotator span {
  grid-area: 1 / 1;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0; transform: translateY(60%);
  transition: opacity .5s, transform .5s cubic-bezier(.3,.9,.2,1);
}
.rotator span.is-in { opacity: 1; transform: none; }
.rotator span.is-out { opacity: 0; transform: translateY(-60%); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 42px);
  margin-top: 42px; padding-top: 30px;
  border-top: 1px solid var(--line);
}
.stat { display: block; }
.stat__num {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem); line-height: 1;
  letter-spacing: -.03em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat__label {
  display: block;
  margin-top: 7px; font-size: .78rem; color: var(--txt-3);
  letter-spacing: .04em; text-transform: uppercase; font-weight: 500;
}

/* ==========================================================================
   CARRUSEL DEL HERO: velocidad / IPv6 / WiFi 6
   Los tres paneles se apilan en la misma celda de grid, así el alto es el del
   más alto y no hay salto de maquetación al rotar.
   ========================================================================== */
.hrot {
  position: relative;
  display: grid;
  isolation: isolate;
}
.hrot__slide {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 34px) clamp(46px, 5vw, 58px);
  border-radius: var(--rad-xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(circle at 50% 24%, rgba(27, 107, 224, .24), transparent 62%),
    var(--grad-surface);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden;
  transform: scale(.97) translateY(10px);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1), visibility .55s;
}
.hrot__slide.is-on {
  opacity: 1; visibility: visible;
  transform: none;
}

/* El medidor pierde su propio marco: ahora lo aporta el panel */
.hrot__slide .gauge {
  border: 0; background: none; box-shadow: none; backdrop-filter: none; padding: 0;
}

.hrot__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; margin-bottom: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(92, 214, 240, .09);
  font-family: var(--f-mono); font-weight: 600;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan);
}
.hrot__badge svg { width: 15px; height: 15px; }

.hrot__caption {
  margin-top: 20px; text-align: center;
  font-size: .88rem; color: var(--txt-2); line-height: 1.55;
}
.hrot__caption b { color: var(--txt); font-weight: 700; }
.hrot__caption span { font-size: .82rem; color: var(--txt-3); }

/* ---------- Puntos de control ---------- */
.hrot__dots {
  position: absolute; z-index: 3;
  bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 9px;
}
.hrot__dots button { padding: 7px 5px; line-height: 0; }
.hrot__dots i {
  display: block; width: 26px; height: 3px; border-radius: 3px;
  background: rgba(140, 190, 255, .26);
  transition: background .3s, width .3s;
}
.hrot__dots button:hover i { background: rgba(140, 190, 255, .5); }
.hrot__dots button[aria-current="true"] i {
  width: 40px;
  background: var(--grad-brand);
  box-shadow: 0 0 12px rgba(92, 214, 240, .8);
}

/* ==========================================================================
   PANEL IPv6 — la dirección se escribe sola, después cada equipo recibe la suya
   ========================================================================== */
.v6anim { display: grid; justify-items: center; width: 100%; }

.v6anim__wordmark {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.9rem); line-height: 1;
  letter-spacing: -.05em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(92, 214, 240, .35));
}

.v6anim__addr {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  margin-top: 16px; padding: 11px 16px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(3, 6, 14, .6);
  font-family: var(--f-mono); font-size: clamp(.82rem, 1.5vw, .98rem);
  letter-spacing: .04em;
}
.v6anim__addr i { color: var(--txt-3); font-style: normal; }
.v6anim__hx {
  color: var(--cyan);
  opacity: 0;
  transform: translateY(-4px);
}
.is-on .v6anim__hx { animation: v6type .38s cubic-bezier(.2,.8,.2,1) forwards; }
.is-on .v6anim__hx:nth-child(1) { animation-delay: .25s; }
.is-on .v6anim__hx:nth-child(3) { animation-delay: .50s; }
.is-on .v6anim__hx:nth-child(5) { animation-delay: .75s; }
.is-on .v6anim__hx:nth-child(7) { animation-delay: 1.00s; }
.is-on .v6anim__hx:nth-child(9) { animation-delay: 1.25s; }
@keyframes v6type {
  0%   { opacity: 0; transform: translateY(-4px); }
  55%  { opacity: 1; color: #FFFFFF; text-shadow: 0 0 14px rgba(155, 235, 251, .9); }
  100% { opacity: 1; transform: none; color: var(--cyan); text-shadow: none; }
}
.v6anim__caret {
  width: 2px; height: 1.05em; margin-left: 4px;
  background: var(--cyan);
  animation: v6caret 1s steps(2, start) infinite;
}
@keyframes v6caret { 50% { opacity: 0; } }

.v6anim__devs {
  display: grid; gap: 8px;
  margin-top: 22px; width: min(100%, 300px);
}
.v6anim__devs li {
  display: grid; grid-template-columns: 20px 1fr 18px; align-items: center; gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(8, 14, 28, .5);
  font-family: var(--f-mono); font-size: .78rem; color: var(--txt-2);
  opacity: 0; transform: translateX(-10px);
}
.is-on .v6anim__devs li { animation: v6dev .5s cubic-bezier(.2,.8,.2,1) forwards; }
.is-on .v6anim__devs li:nth-child(1) { animation-delay: 1.55s; }
.is-on .v6anim__devs li:nth-child(2) { animation-delay: 1.80s; }
.is-on .v6anim__devs li:nth-child(3) { animation-delay: 2.05s; }
@keyframes v6dev { to { opacity: 1; transform: none; } }
.v6anim__devs svg { width: 20px; height: 20px; color: var(--cyan); }
/* Tilde verde que aparece al final de cada fila */
.v6anim__devs i {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(34, 209, 138, .5);
  background: rgba(34, 209, 138, .14);
  position: relative;
}
.v6anim__devs i::after {
  content: ''; position: absolute;
  left: 4px; top: 7px; width: 4px; height: 7px;
  border-right: 1.8px solid var(--green); border-bottom: 1.8px solid var(--green);
  transform: rotate(45deg) scale(0);
  transform-origin: center;
}
.is-on .v6anim__devs i::after { animation: v6tick .3s .18s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes v6tick { to { transform: rotate(45deg) scale(1); } }

/* ==========================================================================
   PANEL WiFi 6 — el router atiende a los cuatro equipos al mismo tiempo
   ========================================================================== */
.w6anim { display: grid; justify-items: center; width: 100%; }
.w6anim > svg { width: min(100%, 330px); height: auto; overflow: visible; }

/* Ondas que salen del router */
.w6anim__waves path { opacity: 0; }
.is-on .w6anim__waves path { animation: w6wave 2.6s ease-out infinite; }
.is-on .w6anim__waves path:nth-child(1) { animation-delay: 0s; }
.is-on .w6anim__waves path:nth-child(2) { animation-delay: .3s; }
.is-on .w6anim__waves path:nth-child(3) { animation-delay: .6s; }
@keyframes w6wave {
  0%   { opacity: 0; }
  25%  { opacity: .85; }
  100% { opacity: 0; }
}

/* Los cuatro haces se encienden JUNTOS: es el punto de WiFi 6 */
.w6anim__beams line {
  stroke-dasharray: 26 200;
  stroke-dashoffset: 226;
  opacity: 0;
}
.is-on .w6anim__beams line { animation: w6beam 1.9s cubic-bezier(.4,0,.5,1) infinite; }
@keyframes w6beam {
  0%   { stroke-dashoffset: 226; opacity: 0; }
  12%  { opacity: 1; }
  70%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

.w6anim__core { filter: drop-shadow(0 0 14px rgba(92, 214, 240, .95)); }
.is-on .w6anim__core { animation: w6core 1.9s ease-in-out infinite; }
@keyframes w6core {
  0%, 100% { r: 12; }
  60%      { r: 15; }
}

.w6anim__nodes circle {
  fill: #0B1526; stroke: rgba(92, 214, 240, .55); stroke-width: 2;
}
.is-on .w6anim__nodes circle { animation: w6node 1.9s ease-in-out infinite; }
@keyframes w6node {
  0%, 55%  { fill: #0B1526; stroke: rgba(92, 214, 240, .55); }
  72%      { fill: #9BEBFB; stroke: #DFFBFF; }
  100%     { fill: #0B1526; stroke: rgba(92, 214, 240, .55); }
}

.w6anim__label {
  fill: var(--txt-3);
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 1.6px; text-transform: uppercase;
}

.w6anim__stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
  width: 100%;
}
.w6anim__stats div { text-align: center; }
.w6anim__stats b {
  display: block;
  font-family: var(--f-display); font-weight: 700; font-size: 1.16rem;
  letter-spacing: -.03em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.w6anim__stats span {
  font-size: .68rem; color: var(--txt-3);
  letter-spacing: .06em; text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .hrot__slide { transition: none; }
  .v6anim__caret { animation: none; }
  .v6anim__hx, .v6anim__devs li { opacity: 1; transform: none; }
  .v6anim__devs i::after { transform: rotate(45deg) scale(1); }
  .is-on .w6anim__waves path,
  .is-on .w6anim__beams line,
  .is-on .w6anim__core,
  .is-on .w6anim__nodes circle { animation: none; }
  .w6anim__waves path { opacity: .5; }
  .w6anim__beams line { opacity: .8; stroke-dashoffset: 0; stroke-dasharray: none; }
}

/* --- Medidor de velocidad --- */
.gauge {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(20px, 3vw, 34px);
  border-radius: var(--rad-xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(circle at 50% 30%, rgba(27, 107, 224, .22), transparent 62%),
    var(--grad-surface);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-lg);
}
.gauge__ring { width: min(100%, 340px); aspect-ratio: 1; position: relative; }
.gauge__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.gauge__track { fill: none; stroke: rgba(140, 190, 255, .12); stroke-width: 10; }
.gauge__prog {
  fill: none; stroke: url(#gaugeGrad); stroke-width: 10; stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(92, 214, 240, .75));
  transition: stroke-dashoffset 1.4s cubic-bezier(.2,.9,.2,1);
}
.gauge__ticks { stroke: rgba(140, 190, 255, .3); stroke-width: 2; }
.gauge__center {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
}
.gauge__value {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3rem, 8vw, 4.4rem); line-height: .9; letter-spacing: -.05em;
  color: #fff;
  text-shadow: 0 0 40px rgba(92, 214, 240, .5);
  font-variant-numeric: tabular-nums;
}
.gauge__unit {
  font-family: var(--f-display); font-size: 1rem; font-weight: 600;
  color: var(--cyan); letter-spacing: .1em; margin-top: 4px;
}
.gauge__caption {
  margin-top: 6px; font-size: .74rem; color: var(--txt-3);
  letter-spacing: .12em; text-transform: uppercase;
}
.gauge__legend {
  display: flex; justify-content: center; gap: 22px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line);
  width: 100%;
}
.gauge__legend div { text-align: center; }
.gauge__legend dt {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3);
}
.gauge__legend dd {
  margin: 5px 0 0; font-family: var(--f-display); font-weight: 600;
  font-size: 1rem; color: var(--txt);
}

/* ==========================================================================
   MARQUESINA
   ========================================================================== */
.marquee {
  border-block: 1px solid var(--line);
  background: rgba(8, 14, 28, .6);
  overflow: hidden;
  --dur: 34s;
}
.marquee__track {
  display: flex; width: max-content;
  animation: slide var(--dur) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex; align-items: center; flex: none;
  padding-block: 15px;
}
.marquee__item {
  display: inline-flex; align-items: center; gap: 12px;
  padding-inline: clamp(20px, 3vw, 38px);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(.82rem, 1vw, .95rem);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt-2); white-space: nowrap;
}
.marquee__item svg { width: 16px; height: 16px; color: var(--cyan); flex: none; }
.marquee__item::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--red); margin-left: clamp(20px, 3vw, 38px);
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   PLANES
   ========================================================================== */
.switcher {
  display: inline-flex; gap: 4px; padding: 5px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(8, 14, 28, .7); backdrop-filter: blur(10px);
}
.section-head .switcher { margin-top: 28px; }
.switcher button {
  padding: 10px 22px; border-radius: 999px;
  font-family: var(--f-display); font-weight: 600; font-size: .9rem;
  color: var(--txt-2);
  transition: color .25s, background .25s, box-shadow .25s;
}
.switcher button[aria-selected="true"] {
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 10px 26px -12px rgba(27, 107, 224, .9);
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
  gap: var(--gap);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.5vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  background: var(--grad-surface);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.plan::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(92, 214, 240, .45), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.plan:hover::before { opacity: 1; }

/* El borde luminoso sigue al cursor */
@media (hover: hover) {
  .plan.is-tracked::before {
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
      rgba(155, 235, 251, .85), rgba(92, 214, 240, .28) 40%, transparent 70%);
  }
  .feat.is-tracked {
    background:
      radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(92, 214, 240, .10), transparent 65%),
      var(--grad-surface);
  }
}

.plan--feat {
  border-color: rgba(92, 214, 240, .35);
  background:
    radial-gradient(circle at 50% -10%, rgba(27, 107, 224, .34), transparent 60%),
    var(--grad-surface);
  box-shadow: var(--glow-cyan);
}
.plan__flag {
  position: absolute; top: 0; right: 0;
  padding: 7px 16px 7px 20px;
  border-bottom-left-radius: 14px;
  background: var(--grad-red);
  font-family: var(--f-display); font-weight: 700;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
}
.plan__label {
  font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--txt-3);
}
.plan__speed {
  display: flex; align-items: baseline; gap: 8px; margin-top: 10px;
}
.plan__speed b {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3.2rem, 6vw, 4.1rem); line-height: .85; letter-spacing: -.055em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.plan__speed span {
  font-family: var(--f-display); font-weight: 600; font-size: 1.05rem;
  color: var(--cyan); letter-spacing: -.01em;
}
.plan__title {
  margin-top: 12px;
  font-size: clamp(1.32rem, 2vw, 1.6rem);
  letter-spacing: -.025em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.plan__bar {
  height: 4px; border-radius: 4px; margin-top: 18px;
  background: rgba(140, 190, 255, .12); overflow: hidden;
}
.plan__bar i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--grad-brand);
  width: var(--w, 50%);
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.2,.9,.2,1);
}
.is-visible .plan__bar i { transform: scaleX(1); }

.plan__price {
  display: flex; align-items: flex-end; gap: 6px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.plan__price b {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.85rem, 3vw, 2.3rem); line-height: 1; letter-spacing: -.04em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.plan__price span { font-size: .84rem; color: var(--txt-3); padding-bottom: 3px; }
.plan__note { margin-top: 6px; font-size: .76rem; color: var(--txt-3); }

.plan__feats { margin: 22px 0 26px; display: grid; gap: 11px; }
.plan__feats li {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px;
  font-size: .875rem; color: var(--txt-2); line-height: 1.5;
}
.plan__feats svg { width: 18px; height: 18px; margin-top: 2px; color: var(--cyan); }
.plan__feats b { color: var(--txt); font-weight: 600; }
.plan .btn { margin-top: auto; }

/* Panel de planes (tabs) */
.tabpanel[hidden] { display: none; }
.tabpanel { animation: fadeUp .45s cubic-bezier(.2,.8,.2,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }

.plans-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px;
  margin-top: 32px; padding: 20px 24px;
  border: 1px dashed var(--line-2); border-radius: var(--rad);
  background: rgba(8, 14, 28, .5);
  font-size: .875rem; color: var(--txt-2);
}
.plans-foot svg { width: 20px; height: 20px; color: var(--cyan); flex: none; }
.plans-foot > div { display: flex; align-items: center; gap: 11px; }

/* ==========================================================================
   TECNOLOGÍA: IPv6 + WiFi 6
   ========================================================================== */

/* Chips del hero */
.tech-chips {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: 26px;
}
.tech-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(92, 214, 240, .06);
  backdrop-filter: blur(8px);
  font-family: var(--f-display); font-weight: 600;
  font-size: .82rem; letter-spacing: -.01em; color: var(--txt-2);
  transition: border-color .25s, color .25s, background .25s;
}
.tech-chips li:hover {
  border-color: rgba(92, 214, 240, .5); color: var(--txt);
  background: rgba(92, 214, 240, .12);
}
.tech-chips svg { width: 16px; height: 16px; color: var(--cyan); flex: none; }

/* Tarjetas grandes */
.tech-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.tech-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-xl);
  background:
    radial-gradient(circle at 50% -10%, rgba(27, 107, 224, .26), transparent 58%),
    var(--grad-surface);
  backdrop-filter: blur(12px);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-md);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.tech-card::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(140, 190, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 190, 255, .05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 68%);
}
.tech-card:hover {
  transform: translateY(-5px);
  border-color: rgba(92, 214, 240, .38);
  box-shadow: var(--glow-cyan);
}

.tech-card__art { margin-bottom: 22px; }
.tech-card__art svg { width: 100%; max-width: 300px; height: auto; margin-inline: auto; overflow: visible; }
.tech-wordmark {
  font-family: var(--f-display); font-weight: 700;
  font-size: 62px; letter-spacing: -3.6px;
}
.tech-addr {
  fill: var(--txt-3);
  font-family: var(--f-mono); font-size: 15px; letter-spacing: .6px;
}

.tech-card__badge {
  align-self: flex-start;
  padding: 5px 13px; margin-bottom: 14px;
  border-radius: 999px;
  background: var(--grad-brand); color: #fff;
  font-family: var(--f-mono); font-weight: 600;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
}
.tech-card h3 { margin-bottom: 12px; }
.tech-card > p { font-size: .93rem; color: var(--txt-2); }
.tech-card > p b { color: var(--txt); font-weight: 600; }

.tech-list { display: grid; gap: 14px; margin-top: 24px; }
.tech-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: 13px;
  font-size: .875rem; color: var(--txt-2); line-height: 1.55;
}
.tech-list svg { width: 20px; height: 20px; color: var(--cyan); margin-top: 2px; }
.tech-list b { color: var(--txt); font-weight: 600; }

/* ==========================================================================
   TEST DE IPv6 (herramienta comercial)
   ========================================================================== */
.v6test {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  margin-top: var(--gap);
  padding: clamp(26px, 3.6vw, 46px);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-xl);
  background:
    radial-gradient(circle at 88% 10%, rgba(92, 214, 240, .20), transparent 55%),
    linear-gradient(150deg, rgba(18, 32, 58, .8), rgba(4, 8, 16, .88));
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-lg);
}
.v6test::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(140, 190, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 190, 255, .055) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 80% 20%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000, transparent 72%);
}
@media (max-width: 900px) { .v6test { grid-template-columns: 1fr; } }

.v6test__head h3 { margin: 14px 0 14px; }
.v6test__head .lead { font-size: .93rem; }

.v6test__btn {
  display: inline-flex; align-items: center; gap: 13px;
  margin-top: 26px; padding: 15px 30px 15px 15px;
  border-radius: 999px;
  background: var(--grad-brand); color: #fff;
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  box-shadow: 0 18px 46px -16px rgba(27, 107, 224, .9);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, opacity .25s;
}
.v6test__btn:hover { transform: translateY(-2px); box-shadow: 0 24px 54px -14px rgba(92, 214, 240, .8); }
.v6test__btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.v6test__btn-ic {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0, 0, 0, .26);
}
.v6test__btn-ic svg { width: 19px; height: 19px; }

.v6test__legal { margin-top: 14px; font-size: .74rem; color: var(--txt-3); max-width: 44ch; }

/* ---------- Panel ---------- */
.v6test__panel {
  position: relative;
  min-height: 260px;
  display: grid; place-items: center;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  background: rgba(3, 6, 14, .55);
  text-align: center;
}

/* Reposo: radar */
.v6test__idle { display: grid; justify-items: center; gap: 20px; }
.v6test__idle p {
  font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--txt-3);
}
.v6test__radar {
  position: relative;
  width: 108px; height: 108px;
  display: grid; place-items: center;
}
.v6test__radar svg { width: 38px; height: 38px; color: var(--cyan); position: relative; }
.v6test__radar span {
  position: absolute; inset: 0;
  border: 1px solid rgba(92, 214, 240, .45);
  border-radius: 50%;
  animation: v6pulse 3s ease-out infinite;
}
.v6test__radar span:nth-child(2) { animation-delay: 1s; }
.v6test__radar span:nth-child(3) { animation-delay: 2s; }
@keyframes v6pulse {
  0%   { transform: scale(.45); opacity: .85; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* Analizando */
.v6test__scan { width: 100%; display: grid; place-items: center; }
.v6test__scan[hidden] { display: none; }
.v6test__steps { display: grid; gap: 15px; text-align: left; }
.v6test__steps li {
  display: flex; align-items: center; gap: 12px;
  font-size: .88rem; color: var(--txt-3);
  transition: color .35s;
}
.v6test__steps i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: rgba(140, 190, 255, .22);
  transition: background .35s, box-shadow .35s;
}
.v6test__steps li.is-doing { color: var(--cyan); }
.v6test__steps li.is-doing i {
  background: var(--cyan);
  animation: stPulse 1.2s infinite;
}
.v6test__steps li.is-done { color: var(--txt-2); }
.v6test__steps li.is-done i { background: var(--green); box-shadow: 0 0 9px rgba(34, 209, 138, .8); }

/* Resultado */
.v6test__result { display: grid; justify-items: center; gap: 0; width: 100%; }
.v6test__badge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 22px; border-radius: 999px;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -.01em;
  animation: v6in .45s cubic-bezier(.2,.8,.2,1);
}
.v6test__badge svg { width: 24px; height: 24px; flex: none; }
@keyframes v6in { from { opacity: 0; transform: translateY(12px) scale(.96); } }

.v6test[data-state="si"]   .v6test__badge {
  background: rgba(34, 209, 138, .14); color: var(--green);
  border: 1px solid rgba(34, 209, 138, .45);
  box-shadow: 0 0 32px -8px rgba(34, 209, 138, .45);
}
.v6test[data-state="no"]   .v6test__badge {
  background: rgba(255, 62, 68, .12); color: var(--red-2);
  border: 1px solid rgba(255, 62, 68, .42);
  box-shadow: 0 0 32px -8px rgba(255, 62, 68, .4);
}
.v6test[data-state="duda"] .v6test__badge {
  background: rgba(250, 141, 37, .13); color: #FFA94D;
  border: 1px solid rgba(250, 141, 37, .42);
}
.v6test[data-state="error"] .v6test__badge {
  background: rgba(140, 190, 255, .1); color: var(--txt-2);
  border: 1px solid var(--line-2);
}

.v6test__result h4 {
  margin-top: 20px;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  text-wrap: balance;
}
.v6test__result > p {
  margin-top: 11px;
  font-size: .89rem; color: var(--txt-2);
  max-width: 42ch; text-wrap: pretty;
}
.v6test__result > p b { color: var(--txt); font-weight: 600; }

.v6test__data {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
  width: 100%;
}
.v6test__data div { text-align: center; }
.v6test__data dt {
  font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3);
}
.v6test__data dd {
  margin: 5px 0 0;
  font-family: var(--f-mono); font-size: .84rem; color: var(--cyan);
  overflow-wrap: anywhere;
}
.v6test[data-state="no"] .v6test__data dd#v6proto { color: var(--red-2); }

.v6test__cta { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: 22px; }
.v6test__cta:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .v6test__radar span { animation: none; opacity: .3; }
  .v6test__badge { animation: none; }
}

/* Llamada al medidor */
.tech-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px;
  margin-top: var(--gap);
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 34px);
  border: 1px dashed var(--line-2);
  border-radius: var(--rad-lg);
  background: rgba(8, 14, 28, .5);
}

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--gap);
}
.feat {
  position: relative;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  background: var(--grad-surface);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.feat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.feat:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: var(--sh-md); }
.feat:hover::before { transform: scaleX(1); }

.feat__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 20px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: linear-gradient(150deg, rgba(92, 214, 240, .16), rgba(27, 107, 224, .06));
  color: var(--cyan);
}
.feat__icon svg { width: 24px; height: 24px; }
.feat h3 { margin-bottom: 10px; }
.feat p { font-size: .9rem; color: var(--txt-2); }

/* Bloque hogar (imagen + texto) */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.split__media {
  position: relative; border-radius: var(--rad-xl); overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-lg);
}
.split__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.85) contrast(1.05);
}
.split__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(10, 42, 107, .35), rgba(3, 6, 14, .78));
}
.split__chip {
  position: absolute; z-index: 2; bottom: 20px; left: 20px; right: 20px;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--rad);
  background: rgba(4, 8, 18, .78); border: 1px solid var(--line-2);
  backdrop-filter: blur(14px);
}
.split__chip svg { width: 26px; height: 26px; color: var(--cyan); flex: none; }
.split__chip strong { display: block; font-family: var(--f-display); font-size: .96rem; }
.split__chip span { font-size: .78rem; color: var(--txt-3); }

.check-list { display: grid; gap: 14px; margin-top: 26px; }
.check-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 13px;
  font-size: .93rem; color: var(--txt-2);
}
.check-list svg { width: 22px; height: 22px; color: var(--green); margin-top: 1px; }
.check-list b { color: var(--txt); font-weight: 600; }

/* ==========================================================================
   COBERTURA
   ========================================================================== */
.cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 900px) { .cover-grid { grid-template-columns: 1fr; } }

.map-frame {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--rad-lg);
  overflow: hidden;
  background: var(--ink-700);
  box-shadow: var(--sh-lg);
}
.map-frame iframe { width: 100%; height: clamp(360px, 46vw, 520px); border: 0; }
.map-frame__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 14, 28, .8);
}
.map-legend { display: flex; gap: 18px; flex-wrap: wrap; }
.map-legend li {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--txt-2);
}
.map-legend i { width: 13px; height: 13px; border-radius: 4px; flex: none; }

.zones { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.zones li {
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(92, 214, 240, .05);
  font-size: .82rem; color: var(--txt-2);
  transition: border-color .25s, color .25s, background .25s, transform .25s;
}
.zones li:hover {
  border-color: var(--cyan); color: var(--txt);
  background: rgba(92, 214, 240, .12); transform: translateY(-2px);
}

/* ==========================================================================
   PROCESO
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--gap);
  counter-reset: step;
  position: relative;
}
.step {
  position: relative;
  padding: clamp(26px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  background: var(--grad-surface);
  counter-increment: step;
  transition: transform .35s, border-color .35s;
}
.step:hover { transform: translateY(-5px); border-color: var(--line-2); }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 18px; right: 22px;
  font-family: var(--f-display); font-weight: 700;
  font-size: 3.4rem; line-height: 1; letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(140, 190, 255, .22);
}
.step__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 50%;
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 12px 30px -12px rgba(27, 107, 224, .9);
}
.step__icon svg { width: 22px; height: 22px; }
.step h3 { font-size: 1.05rem; margin-bottom: 9px; }
.step p { font-size: .89rem; color: var(--txt-2); }

/* ==========================================================================
   BANDA DEL TEST DE VELOCIDAD
   ========================================================================== */
.speed-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-xl);
  background:
    radial-gradient(circle at 12% 20%, rgba(27, 107, 224, .28), transparent 58%),
    linear-gradient(155deg, rgba(20, 34, 62, .7), rgba(4, 8, 16, .82));
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-lg);
}
.speed-cta::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(140, 190, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 190, 255, .06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 20% 40%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 20% 40%, #000, transparent 70%);
}
.speed-cta__art { display: grid; place-items: center; }
.speed-cta__art svg { width: 100%; max-width: 300px; height: auto; overflow: visible; }
@media (max-width: 860px) {
  .speed-cta { grid-template-columns: 1fr; }
  .speed-cta__art { order: -1; }
  .speed-cta__art svg { max-width: 240px; }
}

/* ==========================================================================
   PAGOS
   ========================================================================== */
.pay-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pay-chip {
  display: grid; place-items: center;
  height: 68px; min-width: 68px; padding-inline: 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  transition: transform .28s, box-shadow .28s;
}
.pay-chip:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .85); }
.pay-chip img {
  max-height: 38px; max-width: 148px;
  width: auto; height: auto; object-fit: contain;
}

.due-dates { display: grid; gap: 12px; }
.due {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--rad);
  background: rgba(8, 14, 28, .55);
}
.due__tag {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  font-family: var(--f-display); font-weight: 700; font-size: .9rem;
}
.due--ok .due__tag { background: rgba(34, 209, 138, .14); color: var(--green); border: 1px solid rgba(34, 209, 138, .3); }
.due--warn .due__tag { background: rgba(250, 141, 37, .14); color: #FFA94D; border: 1px solid rgba(250, 141, 37, .3); }
.due strong { display: block; font-family: var(--f-display); font-size: .96rem; }
.due span { font-size: .82rem; color: var(--txt-3); }

/* ==========================================================================
   NOSOTROS
   ========================================================================== */
.about-cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.about-cards h3 { font-size: 1.02rem; margin-bottom: 10px; color: var(--cyan); }
.about-cards p { font-size: .89rem; color: var(--txt-2); }

.quote {
  position: relative;
  margin-top: clamp(32px, 4vw, 52px);
  padding: clamp(30px, 4vw, 52px);
  border-radius: var(--rad-xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(circle at 15% 0%, rgba(27, 107, 224, .28), transparent 55%),
    var(--grad-surface);
  text-align: center;
}
.quote p {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.35;
  letter-spacing: -.02em; text-wrap: balance;
  max-width: 46ch; margin-inline: auto;
}
.quote cite {
  display: block; margin-top: 20px; font-style: normal;
  font-family: var(--f-mono); font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cyan);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--rad);
  background: rgba(8, 14, 28, .55);
  overflow: hidden;
  transition: border-color .3s, background .3s;
}
.faq details[open] { border-color: rgba(92, 214, 240, .3); background: rgba(16, 27, 51, .6); }
.faq summary {
  display: flex; align-items: center; gap: 16px;
  padding: 19px 22px;
  cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(.95rem, 1.15vw, 1.04rem); letter-spacing: -.01em;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--cyan); }
.faq summary::after {
  content: ''; flex: none; margin-left: auto;
  width: 11px; height: 11px;
  border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq__body {
  padding: 0 22px 22px;
  font-size: .91rem; color: var(--txt-2);
}
.faq__body > * + * { margin-top: 12px; }
.faq__body b, .faq__body strong { color: var(--txt); font-weight: 600; }
.faq__body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.faq__body ul { display: grid; gap: 8px; }
/* La viñeta va posicionada, NO como columna de grilla. Con grilla, cada <b>,
   <a> o run de texto del <li> se convierte en un item propio, así que un
   "<li><b>Rótulo:</b> texto</li>" mandaba el texto a la columna de 8px de la
   viñeta y lo partía letra por letra. Al posicionar la viñeta, el <li> vuelve
   a ser un bloque normal y admite cualquier marcado en línea. */
.faq__body ul li { position: relative; padding-left: 20px; }
.faq__body ul li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan);
}
.faq__body ol { display: grid; gap: 8px; counter-reset: q; }
.faq__body ol li { position: relative; padding-left: 32px; counter-increment: q; }
.faq__body ol li::before {
  content: counter(q); position: absolute; left: 0; top: 0; width: 22px;
  font-family: var(--f-display); font-weight: 700;
  color: var(--cyan); font-size: .85rem; line-height: 1.7;
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }

.dept { display: grid; gap: 12px; }
.dept-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--rad);
  background: var(--grad-surface);
  transition: border-color .28s, transform .28s, background .28s;
}
.dept-card:hover {
  border-color: rgba(92, 214, 240, .4); transform: translateX(4px);
  background: rgba(16, 27, 51, .7);
}
.dept-card__ic {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(150deg, rgba(92, 214, 240, .18), rgba(27, 107, 224, .08));
  border: 1px solid var(--line-2); color: var(--cyan);
}
.dept-card__ic svg { width: 22px; height: 22px; }
.dept-card__txt { min-width: 0; }
.dept-card__txt strong {
  display: block; font-family: var(--f-display); font-size: .98rem; letter-spacing: -.01em;
}
.dept-card__txt span {
  display: block; font-family: var(--f-mono); font-size: .85rem; color: var(--cyan);
  margin-top: 2px;
}
.dept-card__txt small { display: block; font-size: .76rem; color: var(--txt-3); }
.dept-card__go { margin-left: auto; flex: none; color: var(--txt-3); transition: color .25s, transform .25s; }
.dept-card__go svg { width: 20px; height: 20px; }
.dept-card:hover .dept-card__go { color: var(--cyan); transform: translateX(3px); }

.office {
  margin-top: 20px; padding: 20px;
  border: 1px solid var(--line); border-radius: var(--rad);
  background: rgba(8, 14, 28, .55);
}
.office h3 { font-size: .95rem; margin-bottom: 12px; }
.office ul { display: grid; gap: 10px; }
.office li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: .87rem; color: var(--txt-2); }
.office svg { width: 20px; height: 20px; color: var(--cyan); margin-top: 2px; }
.office a:hover { color: var(--cyan); }

/* --- Formulario --- */
.form-card {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-xl);
  background:
    radial-gradient(circle at 100% 0%, rgba(27, 107, 224, .2), transparent 55%),
    var(--grad-surface);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-lg);
}
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 22px; }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--txt-3);
}
.field label .req { color: var(--red-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(3, 6, 14, .6);
  font-size: .93rem;
  transition: border-color .22s, box-shadow .22s, background .22s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235CD6F0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
}
.field select option { background: var(--ink-700); color: var(--txt); }
.field input::placeholder, .field textarea::placeholder { color: var(--txt-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(92, 214, 240, .16);
  background: rgba(3, 6, 14, .85);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--red-2); }
.field .hint { font-size: .74rem; color: var(--txt-3); }

.form-card .btn { margin-top: 22px; }
.form-note {
  margin-top: 14px; font-size: .78rem; color: var(--txt-3); text-align: center;
}
.form-alt {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--txt-3); flex-wrap: wrap;
}
.form-alt a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--rad-xl);
  border: 1px solid var(--line-2);
  padding: clamp(36px, 6vw, 76px) clamp(24px, 5vw, 64px);
  background:
    radial-gradient(circle at 20% 20%, rgba(27, 107, 224, .38), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(228, 20, 27, .26), transparent 55%),
    linear-gradient(150deg, #0B1730, #04080F);
  text-align: center;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(140, 190, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 190, 255, .07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
}
.cta-band > * { position: relative; }
.cta-band .lead { margin-inline: auto; margin-top: 16px; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(6, 12, 26, .5), var(--ink-900));
  padding-block: clamp(48px, 6vw, 72px) 26px;
  margin-top: clamp(56px, 8vw, 100px);
}
/* En el telefono el bloque de marca ocupa el ancho entero y las tres columnas
   de enlaces se reparten debajo. Recien a partir de 900px vuelve la fila unica
   de cuatro columnas del diseno de escritorio. */
.footer__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px) clamp(20px, 4vw, 52px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.footer__about { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 1fr)); }
  .footer__about { grid-column: auto; }
}
.footer h4 {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--txt-3); margin-bottom: 16px; font-family: var(--f-mono); font-weight: 600;
}
.footer__col ul { display: grid; gap: 10px; }
.footer__col a, .footer__col li { font-size: .875rem; color: var(--txt-2); }
.footer__col a { transition: color .2s; }
.footer__col a:hover { color: var(--cyan); }
.footer__about p { font-size: .875rem; color: var(--txt-2); margin-top: 18px; max-width: 34ch; }
.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social a {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--line-2); color: var(--txt-2);
  transition: color .25s, border-color .25s, background .25s, transform .25s;
}
.footer__social a svg { width: 18px; height: 18px; }
.footer__social a:hover {
  color: #fff; border-color: var(--cyan);
  background: rgba(92, 214, 240, .12); transform: translateY(-3px);
}
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-top: clamp(36px, 5vw, 56px); padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--txt-3);
}
.footer__bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__bottom a:hover { color: var(--cyan); }

/* ==========================================================================
   FLOTANTES
   ========================================================================== */
.fab {
  position: fixed; z-index: 70;
  right: clamp(14px, 2.5vw, 26px); bottom: clamp(14px, 2.5vw, 26px);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
}
.fab__wa {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 20px 13px 15px; border-radius: 999px;
  background: #1FA855; color: #fff;
  font-family: var(--f-display); font-weight: 600; font-size: .9rem;
  box-shadow: 0 16px 42px -12px rgba(31, 168, 85, .8);
  transition: transform .25s, box-shadow .25s;
}
.fab__wa svg { width: 22px; height: 22px; flex: none; }
.fab__wa:hover { transform: translateY(-3px) scale(1.02); }
.fab__top {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(6, 12, 26, .85); color: var(--txt-2);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s, color .25s, border-color .25s;
}
.fab__top svg { width: 18px; height: 18px; }
.fab__top.is-on { opacity: 1; visibility: visible; transform: none; }
.fab__top:hover { color: var(--cyan); border-color: var(--cyan); }
@media (max-width: 480px) {
  .fab__wa span { display: none; }
  .fab__wa { padding: 15px; }
}

/* Barra de progreso de lectura */
.progress {
  position: fixed; top: 0; left: 0; z-index: 95;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--grad-brand);
  pointer-events: none;
}

/* ==========================================================================
   REVELADO AL SCROLL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .plan__bar i { transform: scaleX(1); }
  .rotator { height: auto; }
  .rotator span { opacity: 1; transform: none; position: static; }
  .rotator span:not(:first-child) { display: none; }
}

/* ==========================================================================
   MÓVILES Y TABLETS
   Todo lo de arriba ya es fluido (clamp, grillas auto-fit). Acá van los
   ajustes que sólo tienen sentido cuando la pantalla se toca con el dedo,
   o cuando el ancho es demasiado chico para el diseño de escritorio.
   ========================================================================== */

/* ---------- 0. Dos desbordes que se veían sólo en el teléfono ---------- */

/* (a) Los halos decorativos van posicionados con `right` negativo (hasta
   -240px) dentro de secciones que no recortan. En escritorio el
   `overflow-x: hidden` del body los tapa; en el navegador del teléfono no
   siempre, y queda scroll horizontal hacia una franja negra vacía.
   `overflow-x: clip` recorta al ancho de la sección sin tocar el desborde
   VERTICAL, que sí es intencional: varios halos asoman hacia la sección de
   arriba a propósito (`top: -140px`). Con `overflow: hidden` se perdería ese
   efecto. Va limitado a ≤1040px para no tocar el escritorio, donde el
   recorte del body ya funciona bien. */
@media (max-width: 1040px) {
  .section { overflow-x: clip; }
  /* iOS 15 y anteriores no entienden `clip`. Ahí se recorta con `hidden`, que
     sí entienden: se pierde el asomo vertical del halo, pero se gana una
     página que no se va de costado. */
  @supports not (overflow-x: clip) {
    .section { overflow: hidden; }
  }
}

/* (b) `.btn` es `white-space: nowrap` para que ningún botón se parta en dos
   líneas en escritorio. En un teléfono eso hace que el botón no pueda achicarse
   por debajo del ancho de su texto: los que genera el test de IPv6
   ("Consultar a Servicio Técnico") miden ~300px contra ~232px de panel, y como
   `.v6test` recorta, salían cortados. Debajo de 600px se deja partir el texto. */
@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; }

  /* Y para que no queden botones de dos alturas distintas uno al lado del
     otro, los del resultado del test se apilan a lo ancho del panel: todos
     del mismo tamaño, con menos relleno que en escritorio. */
  .v6test__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .v6test__cta .btn {
    width: 100%;
    padding: 13px 16px;
    font-size: .9rem;
    line-height: 1.3;
  }
}

/* ---------- 1. Pantallas táctiles: el :hover que se queda pegado ---------- */
@media (hover: none) {
  /* En un teléfono, tocar una tarjeta dispara :hover y la deja levantada
     hasta que se toca otra cosa. Se anula el desplazamiento y se responde al
     toque con :active, que sí se suelta solo. */
  .btn:hover,
  .card--hover:hover,
  .plan:hover,
  .tech-card:hover,
  .feat:hover,
  .step:hover,
  .zones li:hover,
  .pay-chip:hover,
  .dept-card:hover,
  .footer__social a:hover,
  .fab__wa:hover,
  .v6test__btn:hover { transform: none; }

  .btn:active, .v6test__btn:active { transform: scale(.97); }
  .plan:active, .feat:active, .tech-card:active,
  .step:active, .dept-card:active, .pay-chip:active { transform: scale(.99); }

  /* La marquesina se pausa al pasar el mouse; sin mouse, se deja más lenta
     para que dé tiempo a leerla. */
  .marquee { --dur: 46s; }
}

/* ---------- 2. Blancos de toque ---------- */
@media (pointer: coarse) {
  /* Los puntos del carrusel eran una barra de 3px de alto: imposible de
     acertar con el dedo. El área táctil crece, la barra se ve igual. */
  .hrot__dots { bottom: 12px; gap: 4px; }
  .hrot__dots button { padding: 15px 7px; }

  /* Enlaces en lista: separados para no tocar el de al lado sin querer. */
  .footer__col ul { gap: 2px; }
  .footer__col ul a { display: inline-block; padding-block: 9px; }
  .footer__bottom nav a { display: inline-block; padding-block: 6px; }
  .faq summary { padding-block: 20px; }
  .nav__link { display: flex; align-items: center; min-height: 48px; }

  /* Safari en iPhone hace zoom al enfocar un campo con letra menor a 16px, y
     después deja la página corrida de costado. Con 16px exactos no hay zoom. */
  .field input, .field select, .field textarea { font-size: 16px; min-height: 50px; }
  .field textarea { min-height: 120px; }
  .btn { min-height: 48px; }
  .btn--sm { min-height: 44px; }
}

/* ---------- 3. Rendimiento en teléfonos ---------- */
/* Cada backdrop-filter obliga al equipo a rasterizar lo que hay detrás. Con
   el canvas del hero animando, los teléfonos de gama media pierden fluidez al
   hacer scroll. Debajo de 600px se sacan todos menos el de la barra superior,
   que es el único donde el desenfoque cumple una función real: leer el menú
   con el contenido pasando por detrás. */
@media (max-width: 600px) {
  .card, .plan, .tech-card, .gauge, .hrot__slide, .form-card,
  .hero__badge, .tech-chips li, .switcher, .btn--ghost,
  .split__chip, .fab__top, .v6anim__addr {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Sin desenfoque hace falta un fondo un poco más sólido para que el texto
     no se pierda sobre la rejilla. */
  .split__chip { background: rgba(4, 8, 18, .93); }
  .fab__top { background: rgba(6, 12, 26, .95); }
}

/* ---------- 4. Teléfonos angostos ---------- */
@media (max-width: 430px) {
  /* Dos indicadores por fila en vez de cuatro apretados. */
  .hero__trust { gap: 18px 24px; }
  .stat { flex: 1 1 40%; }

  /* Botones a lo ancho: más fáciles de acertar y no queda uno cortado. */
  .hero__cta .btn,
  .cta-band__btns .btn { width: 100%; }

  .plans-foot { padding: 18px; }
  .tech-cta { justify-content: center; text-align: center; }
  .gauge__legend { gap: 14px; }
  .gauge__legend dd { font-size: .92rem; }
  .w6anim__stats { gap: 10px 16px; }
  .quote { padding-inline: 22px; }
}

/* ---------- 5. Teléfono acostado ---------- */
/* Con 400px de alto, el aire vertical del diseño de escritorio deja la
   pantalla casi vacía y obliga a scrollear de más. */
@media (max-height: 520px) and (orientation: landscape) {
  .section { padding-block: clamp(38px, 8vh, 64px); }
  .hero { padding-block: 34px; }
  .section-head { margin-bottom: 28px; }
  .fab__wa span { display: none; }
  .fab__wa { padding: 15px; }
}

/* ---------- 6. Tablets ---------- */
/* Entre 620 y 1040px ya está el menú desplegable, pero desplegarlo a todo el
   ancho de un iPad queda desproporcionado: se ancla a la derecha, debajo del
   botón que lo abrió. */
@media (min-width: 620px) and (max-width: 1040px) {
  .nav__menu {
    left: auto;
    width: min(380px, 100%);
    border-left: 1px solid var(--line);
    border-bottom-left-radius: var(--rad-lg);
  }
}

/* ---------- 7. Mapa de cobertura en táctil ---------- */
/* El mapa embebido se queda con el gesto de arrastre y la página deja de
   scrollear: el visitante queda "atrapado" adentro del mapa. Se cubre con una
   capa que hay que tocar para activarlo, y se vuelve a bloquear al salir de
   pantalla. Con mouse no aparece nunca. */
.map-frame__view { position: relative; }
.map-lock {
  position: absolute; inset: 0; z-index: 3;
  display: none; place-items: center;
  width: 100%;
  background: rgba(3, 6, 14, .32);
  font-family: var(--f-display); font-weight: 600; font-size: .9rem;
  color: var(--txt); text-align: center;
}
.map-lock span {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  background: rgba(4, 8, 18, .92);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-md);
}
.map-lock svg { width: 18px; height: 18px; color: var(--cyan); flex: none; }
@media (pointer: coarse) {
  .map-frame.is-locked .map-lock { display: grid; }
}

/* ---------- 8. Botón flotante y muesca ---------- */
/* La barra de gestos del iPhone se come el borde inferior. */
.fab {
  right: max(clamp(14px, 2.5vw, 26px), env(safe-area-inset-right));
  bottom: max(clamp(14px, 2.5vw, 26px), env(safe-area-inset-bottom));
}

/* ---------- Impresión ---------- */
@media print {
  .nav, .fab, .progress, #fiber-canvas, .map-frame iframe { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .plan, .feat { border: 1px solid #ccc; background: #fff; }
  .grad-text, .stat__num, .plan__speed b { -webkit-text-fill-color: #0A2A6B; color: #0A2A6B; }
}