/* ============================================================================
   ÚNETE — hoja de estilo del demo
   Implementa "Unete Webpage - 3 direcciones" (dirección 3: claro + nocturno).

   Orden del archivo:
     1. Tokens          4. Layout          7. Utilidades
     2. Reset / base    5. Secciones
     3. Componentes     6. Responsive
   Regla: ningún color, espaciado o tipografía fuera de los tokens del bloque 1.
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* Marca — naranja Únete + cian del logo.
     El cian solo vive sobre superficies oscuras, donde realmente destaca. */
  --color-accent:      #ea5019;
  --color-accent-100:  #fdeee7;
  --color-accent-200:  #fbd2c1;
  --color-accent-300:  #f6a988;
  --color-accent-400:  #f17a4e;
  --color-accent-500:  #ea5019;
  --color-accent-600:  #cf4212;
  --color-accent-700:  #a3340e;
  --color-accent-800:  #71260b;
  --color-accent-900:  #3f1707;

  --color-blue:        #18a8d8;
  --color-blue-100:    #e3f6fc;
  --color-blue-300:    #8fd8ee;
  --color-blue-500:    #18a8d8;
  --color-blue-600:    #128bb4;
  --color-blue-700:    #0c6b8c;

  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e6e6e6;
  --color-neutral-300: #d0d0d0;
  --color-neutral-400: #a8a8a8;
  --color-neutral-500: #808080;
  --color-neutral-600: #606060;
  --color-neutral-700: #484848;
  --color-neutral-800: #303030;
  --color-neutral-900: #232629;

  --color-whatsapp:    #25d366;
  --color-whatsapp-600:#1da851;

  /* Superficies semánticas — estos cuatro voltean con el modo */
  --ground:   #ffffff;   /* fondo de página            */
  --panel:    #ffffff;   /* tarjetas, masthead         */
  --tint:     #f5f5f5;   /* bandas y rellenos suaves   */
  --line:     #e4e4e4;   /* divisorias                 */
  --ink:      #2b2b2b;   /* texto principal            */
  --ink-soft: #606060;   /* texto secundario           */
  --overlay:  rgba(0, 0, 0, .5);

  /* Tipografía */
  /* El titular del hero imita la tipografía del logotipo: una geométrica de
     trazo fino y caja ancha. Jost (corte Futura) es la que más se le acerca
     de las que ya carga la página, así que Chakra Petch dejó de hacer falta. */
  --font-display: 'Jost', system-ui, sans-serif;
  --font-heading: 'Jost', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Jost', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, Menlo, Consolas, monospace;

  /* Escala fluida, ratio ~1.25. Cada paso interpola entre su tamaño en móvil
     (402px) y el de escritorio (1920px), donde el contenedor ocupa el 89% del
     viewport y una tipografía topada en 17px se quedaba corta. Referencia:
     unetecom.com usa 24px de párrafo en el hero y 32px en los H2. */
  --text-2xs:   clamp(10px, 0.26vw + 9px, 14px);     /* rótulos monoespaciados */
  --text-xs:    clamp(12px, 0.20vw + 11.2px, 15px);
  --text-sm:    clamp(14px, 0.26vw + 13px, 18px);
  --text-base:  clamp(16px, 0.40vw + 14.4px, 22px);
  --text-lg:    clamp(18px, 0.66vw + 15.3px, 28px);
  --text-xl:    clamp(22px, 1.05vw + 17.8px, 38px);
  --text-2xl:   clamp(26px, 1.98vw + 18px, 56px);
  --text-3xl:   clamp(40px, 4.22vw + 23px, 104px);
  --text-price: clamp(28px, 1.32vw + 22.7px, 48px);

  /* Espaciado — base 4px */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  --section-y: var(--space-16);   /* padding vertical de sección (móvil) */
  --container: 1800px;            /* tope solo para pantallas enormes; ver .wrap */

  /* Forma y elevación */
  --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 16px;  --radius-full: 999px;
  --border-width: 1px;
  --focus-width: 2px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, .10);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .18);

  /* Movimiento */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Capas */
  --z-sticky: 100;  --z-fab: 200;  --z-overlay: 300;  --z-modal: 400;
}

/* Modo nocturno — carbón integral. El cian y el naranja pasan a brillar. */
.dark {
  --ground:   #17191b;
  --panel:    #212427;
  --tint:     #212427;
  --line:     #31353a;
  --ink:      #eceef0;
  --ink-soft: #9aa0a6;
  --overlay:  rgba(0, 0, 0, .68);

  --color-accent-100: #2c1a11;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, .5);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .6);
}

/* ── 2. Reset y base ─────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;   /* el nav sticky no debe tapar el ancla */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  transition: background var(--duration-base), color var(--duration-base);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0 0 var(--space-3); max-width: 65ch; }
figure { margin: 0; }        /* el navegador le pone 1em 40px por defecto */
img { display: block; max-width: 100%; height: auto; }
a  { color: var(--color-accent-700); text-underline-offset: 3px; }
.dark a { color: var(--color-accent-300); }
ul { margin: 0; padding: 0; list-style: none; }

:focus { outline: none; }
:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.dark :focus-visible { outline-color: var(--color-blue); }
::selection { background: var(--color-accent-200); color: var(--color-accent-900); }

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2);
  z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent); color: #fff;
  border-radius: var(--radius-sm); text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.hr { height: 1px; border: 0; margin: var(--space-8) 0 var(--space-4); background: var(--line); }

/* ── 3. Componentes ──────────────────────────────────────────────────────── */

/* 3.1 Botones — área táctil mínima 44px en las variantes md/lg */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--text-base); line-height: 1.2;
  text-decoration: none; cursor: pointer;
  color: var(--ink); background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast), border-color var(--duration-fast),
              color var(--duration-fast), transform var(--duration-fast);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn-primary   { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }

.btn-secondary { border-color: var(--line); color: var(--ink); background: var(--panel); }
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }

.btn-lg { min-height: 52px; padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-block { width: 100%; }

/* 3.2 Control segmentado (tabs de planes) — CSS puro, sin JS */
.seg {
  display: inline-flex; overflow: hidden;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.seg-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--space-2) var(--space-4);
  font-size: var(--text-base); color: var(--ink); cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.seg-opt + .seg-opt { border-left: var(--border-width) solid var(--line); }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt:has(input:checked) { background: var(--color-accent); color: #fff; }
.seg-opt:not(:has(input:checked)):hover { background: var(--color-accent-100); }
.seg-opt:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-accent); outline-offset: -3px; }

/* 3.3 Tarjeta */
.card {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--panel);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-kicker {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}

/* 3.4 Etiquetas */
.tag {
  display: inline-flex; align-items: center;
  padding: 3px var(--space-2); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .1em;
  background: var(--color-accent); color: #fff;
}

/* 3.5 Rótulo de sección */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.dark .eyebrow { color: var(--color-accent-300); }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--color-accent); }

/* ── 4. Layout ───────────────────────────────────────────────────────────── */

/* Ancho proporcional, como unetecom.com (`.container { width: 90% }`): el
   contenido acompaña al viewport en vez de quedarse en una columna fija.
   El tope solo entra en pantallas enormes. Los párrafos van topados aparte
   (65ch / 52ch), así que lo que se ensancha es la maqueta, no la lectura. */
.wrap { width: 90%; max-width: var(--container); margin-inline: auto; }
section { padding-block: var(--section-y); }

.sec-head { margin-bottom: var(--space-8); }
.sec-head p { color: var(--ink-soft); font-size: var(--text-lg); }

/* ── 5. Secciones ────────────────────────────────────────────────────────── */

/* 5.1 Masthead */
.masthead {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--panel);
  border-bottom: var(--border-width) solid var(--line);
  transition: background var(--duration-base), border-color var(--duration-base);
}
.nav {
  display: flex; align-items: center; gap: var(--space-6);
  min-height: 64px;
  width: 90%; max-width: var(--container); margin-inline: auto; padding-block: var(--space-2);
}
/* Wordmark vectorizado del propio logotipo, no una fuente que se le parezca:
   la barra lleva la tipografía de marca exacta y, al ser trazo y no píxeles,
   se mantiene nítida en pantallas densas y a cualquier tamaño. */
.nav-brand { margin-right: auto; display: inline-flex; align-items: center; color: var(--color-accent); }
.nav-brand .brand-mark {
  height: clamp(26px, 1.2vw + 21px, 40px); width: auto; display: block;
  transition: opacity var(--duration-fast);
}
.nav-brand:hover .brand-mark { opacity: .75; }
/* En nocturno los trazos oscuros del logotipo del hero se apagan. */
.dark .hero-logo img { filter: brightness(1.6); }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a:not(.btn) {
  color: var(--ink-soft); text-decoration: none; font-size: var(--text-base);
  padding: var(--space-2) 0;
}
.nav-links a:not(.btn):hover,
.nav-links a[aria-current="true"] { color: var(--color-accent); }

.icon-btn {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  background: none; color: var(--ink);
  border: var(--border-width) solid var(--line); border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.icon-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

.sun { display: none; }
.dark .sun  { display: block; }
.dark .moon { display: none; }

.nav-toggle { display: none; }

/* 5.2 Hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--tint);
  border-bottom: var(--border-width) solid var(--line);
  padding-block: var(--space-12) var(--space-16);
  transition: background var(--duration-base);
}
/* Retícula técnica en los dos modos: da textura al hero sin foto de fondo,
   que competiría con el logotipo de circuitos y obligaría a velar el texto.
   Las líneas son tenues; en claro oscurecen, en nocturno aclaran. */
.hero::before {
  content: ""; position: absolute; inset: 0; display: block; opacity: .5;
  pointer-events: none;
  background:
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px) 0 0 / 48px 100%;
}
.dark .hero::before {
  opacity: .45;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 48px 100%;
}
/* Halo ambiental que evita el gris plano en pantallas anchas. Iba anclado al
   22% del ancho, de cuando el logotipo vivía a la izquierda; ahora sigue al
   logotipo, que está centrado. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 70% at 50% 34%,
              color-mix(in srgb, var(--color-accent) 4%, transparent), transparent 70%);
}
.dark .hero::after {
  background: radial-gradient(70% 70% at 50% 34%,
              color-mix(in srgb, var(--color-blue) 5%, transparent), transparent 70%);
}
.hero .wrap { position: relative; z-index: 1; }

/* Dos celdas iguales: el logotipo y el titular ocupan el mismo recuadro, y
   `stretch` iguala también el alto, que lo fija el más alto de los dos.
   El tope de 1180px evita que en pantallas enormes crezcan sin freno. */
/* Sin titular ni descripción compitiendo, el logotipo se queda solo en el
   centro de la portada. El tope de 660px es el ancho nativo del archivo
   (663x281): estirarlo más lo emborronaría. */
.hero-logo {
  position: relative;
  display: block; margin: 0 auto var(--space-16);
  width: min(100%, 660px);
}
/* Difuminado cálido justo detrás del logotipo: lo despega del fondo y le da
   profundidad sin recurrir a una sombra, que sobre un logo calado quedaría
   sucia. `closest-side` lo mantiene proporcional al logo a cualquier tamaño. */
.hero-logo::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 50%; translate: -50% -50%;
  width: 290%; height: 420%;
  /* Cuatro paradas muy juntas en valor: el degradado recorre mucha distancia
     con poca diferencia de color, que es lo que se percibe como difuminado
     amplio en lugar de como una mancha con borde. */
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--color-accent)   5%, transparent),
              color-mix(in srgb, var(--color-accent) 3.5%, transparent) 30%,
              color-mix(in srgb, var(--color-accent) 1.4%, transparent) 58%,
              transparent 88%);
  pointer-events: none;
}
/* Sobre carbón el mismo naranja necesita algo más de cuerpo para leerse. */
.dark .hero-logo::before {
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--color-accent)   7%, transparent),
              color-mix(in srgb, var(--color-accent) 4.2%, transparent) 30%,
              color-mix(in srgb, var(--color-accent) 2.1%, transparent) 58%,
              transparent 88%);
}
/* El logotipo se posiciona para quedar por encima del difuminado: si no, el
   pseudoelemento (que sí está posicionado) pintaría encima de la imagen. */
.hero-logo img { position: relative; z-index: 1; width: 100%; height: auto; }

/* Los dos CTA solo aparecen en móvil, donde el pulgar los necesita: en
   escritorio la navegación superior ya lleva a planes y a cobertura. */
.hero-cta { display: none; }

.hero-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  margin-top: var(--space-24);
}
.hero-specs .spec { padding-top: var(--space-3); border-top: 2px solid var(--color-accent); }
.hero-specs dd { margin: 0; }
.hero-specs .k {
  margin-bottom: var(--space-1);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.hero-specs .v { font-family: var(--font-heading); font-size: var(--text-2xl); line-height: 1; }
/* El azul tiene UNA casa coherente: el motivo de velocidad simétrica. */
.dark .hero-specs .spec:nth-child(2) .v { color: var(--color-blue-300); }
.hero-specs .spec:nth-child(2) .v { color: var(--color-accent); }

.hero-scroll {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-8);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
}
.hero-scroll svg { animation: nudge 2.4s var(--ease-out) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* 5.3 Cobertura */
.cover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.cover-list { margin-top: var(--space-4); }
.cover-list li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) 0; font-size: var(--text-base);
  border-bottom: var(--border-width) solid var(--line);
}
.cover-list li:last-child { border-bottom: 0; }
.cover-list svg { flex: none; margin-top: 3px; color: var(--color-accent); }

.fig {
  position: relative;
  display: grid; place-content: center; justify-items: center; gap: var(--space-3);
  padding: var(--space-6);
  background: var(--tint);
  border: var(--border-width) solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.fig img { max-height: 260px; width: auto; }
.fig figcaption {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ── Diagrama de cobertura ───────────────────────────────────────────────── */
/* La zona es una cuadrícula real (Cra 1N–9N × Cl 34–52), así que el esquema la
   representa con fidelidad. Sin dependencias, sin cookies y sin clave de API.
   Alto mínimo según §10.7: 320px en móvil, 480px en escritorio. */
/* `.fig` centra las pistas del grid, lo que dejaba el diagrama encogido en
   mitad de la caja: aquí se estira a todo el ancho disponible. */
.fig-map { display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
           width: 100%; padding: var(--space-6); }
.mapa { align-self: stretch; width: 100%; height: auto; display: block; }

/* El mapa real se monta encima del diagrama; si Leaflet no llega, el
   diagrama se queda y la zona sigue consultándose igual. */
.mapa-wrap { position: relative; align-self: stretch; width: 100%; }
.mapa-live { position: absolute; inset: 0; opacity: 0; transition: opacity var(--duration-slow); }
.mapa-wrap.vivo .mapa-live { opacity: 1; }
.mapa-wrap.vivo .mapa { visibility: hidden; }   /* sigue marcando la altura */
.mapa-live, .mapa-live .leaflet-container { border-radius: var(--radius-sm); }
.mapa-live .leaflet-container { width: 100%; height: 100%; background: var(--tint); font-family: var(--font-body); }
/* En nocturno las teselas se atenúan para no deslumbrar sobre el carbón */
.dark .mapa-live .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
.mapa-live .leaflet-control-attribution { font-size: 10px; }

/* Etiqueta de barrio sobre el mapa vivo de Leaflet: mismo tratamiento que
   las del diagrama, para que el relevo no se note. */
.mapa-live .mapa-tag {
  background: none; border: 0; box-shadow: none; padding: 0;
  color: var(--ink); font-family: var(--font-heading); font-weight: 600;
  font-size: var(--text-2xs); letter-spacing: .02em; white-space: nowrap;
  paint-order: stroke; -webkit-text-stroke: 3px var(--panel);
}
.mapa-live .mapa-tag::before { display: none; }   /* sin la flecha del tooltip */

/* Diagrama de respaldo. El suelo es el fondo; encima va el callejero real y
   sobre él los tres barrios. */
.mapa .m-suelo { fill: var(--color-neutral-200); }
.dark .mapa .m-suelo { fill: #141618; }

/* Callejero: contexto, nunca protagonista. */
.mapa .m-via path { fill: none; stroke: var(--color-neutral-400); stroke-width: 1.4; stroke-linecap: round; }
.mapa .m-via-pral path { stroke: var(--ink-soft); stroke-width: 3; opacity: .55; }
.dark .mapa .m-via path { stroke: #333940; }
.dark .mapa .m-via-pral path { stroke: #4a5158; opacity: .9; }

/* Los tres barrios con cobertura, en su forma real. */
.mapa .m-barrio-area path {
  fill: color-mix(in srgb, var(--color-accent) 22%, transparent);
  stroke: var(--color-accent); stroke-width: 2.5; stroke-linejoin: round;
}
.dark .mapa .m-barrio-area path {
  fill: color-mix(in srgb, var(--color-blue) 24%, transparent);
  stroke: var(--color-blue);
}

.mapa .m-barrio text {
  fill: var(--ink); font-family: var(--font-heading); font-weight: 600;
  font-size: 15px; letter-spacing: .03em; text-anchor: middle;
  paint-order: stroke; stroke: var(--color-neutral-200); stroke-width: 4px;  /* halo legible */
}
.dark .mapa .m-barrio text { stroke: #141618; }

.mapa .m-norte path { fill: var(--ink-soft); }
.mapa .m-norte text {
  fill: var(--ink-soft); font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}

/* 5.4 Planes — hoja de especificaciones */
.plans-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-8);
}
.plans-head h2 { margin: 0; }

.ptable {
  width: 100%; border-collapse: collapse; overflow: hidden;
  border: var(--border-width) solid var(--line); border-radius: var(--radius-md);
}
.ptable th {
  padding: var(--space-4) var(--space-6); text-align: left;
  background: var(--tint);
  border-bottom: var(--border-width) solid var(--line);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.ptable td {
  padding: var(--space-6); vertical-align: middle;
  border-bottom: var(--border-width) solid var(--line);
}
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr {
  transition: background var(--duration-fast), box-shadow var(--duration-fast);
}
.ptable tbody tr:hover { background: var(--color-accent-100); }

/* El filete de destacado vive por defecto en el plan popular, pero se muda a
   la fila que el usuario está mirando: en cuanto el cursor entra en la tabla
   —o el teclado llega a un CTA— manda su elección, no nuestra recomendación.
   El :not(:hover) evita que la propia fila destacada se apague al señalarla. */
.ptable tr.feat { box-shadow: inset 4px 0 0 var(--color-accent); }

.ptable tbody:hover        tr.feat:not(:hover),
.ptable tbody:focus-within tr.feat:not(:focus-within) { box-shadow: none; }

.ptable tbody tr:hover,
.ptable tbody tr:focus-within { box-shadow: inset 4px 0 0 var(--color-accent); }

.p-idx { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }
.p-name {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--text-price); line-height: .9; text-transform: uppercase;
}
.p-name small { font-size: var(--text-sm); letter-spacing: .08em; color: var(--ink-soft); }
.p-sym {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.dark .p-sym { color: var(--color-blue-300); }
.p-price { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xl); white-space: nowrap; }
.p-price .cur { font-size: var(--text-sm); color: var(--ink-soft); }
.p-price .per { font-family: var(--font-body); font-size: var(--text-xs); color: var(--ink-soft); font-weight: 400; }
tr.feat .p-price { color: var(--color-accent); }
/* El precio acompaña al filete en el mismo baile. */
.ptable tbody:hover        tr.feat:not(:hover) .p-price,
.ptable tbody:focus-within tr.feat:not(:focus-within) .p-price { color: var(--ink); }
.ptable tbody tr:hover .p-price,
.ptable tbody tr:focus-within .p-price { color: var(--color-accent); }

/* Lo que incluye la TV: mismo patrón de lista dividida que la cobertura, a
   todo el ancho, para que se lea como continuación de la tabla y no como un
   recuadro pegado encima. */
.tv-detalle { margin-top: var(--space-8); }
.tv-detalle .cover-list { margin-top: var(--space-2); }
.tv-detalle .cover-list li { font-size: var(--text-sm); }

.plans-note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-soft); max-width: 90ch; }

/* Con el contenedor proporcional la tabla puede volverse muy ancha y las
   celdas quedan dispersas: la proporción de columnas las mantiene juntas
   y el CTA anclado a la derecha. Solo aplica donde hay tabla real (lg+). */
@media (min-width: 1024px) {
  .ptable th:nth-child(1) { width: 7%; }
  .ptable th:nth-child(2) { width: 27%; }
  .ptable th:nth-child(3) { width: 26%; }
  .ptable th:nth-child(4) { width: 22%; }
  .ptable th:nth-child(5) { width: 18%; }
  .ptable td:last-child { text-align: right; }
}

/* Los tabs filtran los grupos sin una línea de JS. */
.plans:has(#tab-internet:checked)    tbody:not([data-grp="internet"]),
.plans:has(#tab-internet-tv:checked) tbody:not([data-grp="internet-tv"]) { display: none; }

/* 5.5 Métodos de pago */
/* auto-fit: la rejilla se reparte sola con 2 o con 3 métodos de pago, sin
   tener que redeclarar columnas al añadir uno. */
.pay-grid { display: grid; gap: var(--space-6);
            grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Pago por QR — la imagen entera es el enlace, para que sirva tanto a quien
   escanea desde otro dispositivo como a quien ya navega en el móvil. */
.qr-link {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2);
  align-self: center; padding: var(--space-4);
  background: #fff; border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md); text-decoration: none;
  transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.qr-link:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.qr-link img { width: 100%; max-width: 190px; height: auto; image-rendering: pixelated; }
.qr-link span {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-neutral-700);
}
.pay { border-top: 3px solid var(--color-neutral-300); transition: border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-base); }
.dark .pay { border-top-color: var(--line); }
/* El realce con transform solo para la tarjeta suelta: tocar `transform` en
   una cara dentro de preserve-3d hace que Firefox repinte y asome la cara
   espejada. Las caras del volteo se realzan desde su contenedor (ver .pay-flip). */
.pay:not(.pay-face):hover { border-top-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pay h3 { margin: 0; }
.pay p { font-size: var(--text-base); color: var(--ink-soft); margin: 0; }
.pay-ico {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: var(--border-width) solid var(--color-accent); border-radius: var(--radius-md);
  color: var(--color-accent);
}
.dark .pay:nth-child(2) .pay-ico { border-color: var(--color-blue); color: var(--color-blue); }
/* `cover` a 180px recortaba la fachada: la foto es vertical (724×900).
   `contain` la muestra entera sobre el tinte de la tarjeta. */
.pay-photo {
  width: 100%; max-height: 340px; object-fit: contain;
  background: var(--tint); border-radius: var(--radius-sm);
}
/* `>` para no alcanzar los botones que viven dentro de .pay-actions */
/* El logo de PSE es una marca, no una foto: necesita aire propio y un tamaño
   en el que la sigla se lea. A 150px se perdía dentro de la tarjeta. */
.pay-mark {
  max-height: none; height: clamp(150px, 15vw, 230px);
  background: #fff;                      /* la marca exige fondo claro */
  padding: var(--space-6) var(--space-8);
  border: var(--border-width) solid var(--color-neutral-200);
}
.dark .pay-mark { border-color: transparent; }

.pay > .btn { align-self: flex-start; margin-top: auto; }

/* Fila de acciones: el CTA y el botón cuadrado del QR, alineados abajo */
.pay-actions { display: flex; align-items: stretch; gap: var(--space-3); margin-top: auto; }
/* `align-self:stretch` fija la altura desde la fila y `aspect-ratio` deriva el
   ancho: así el cuadrado sigue al CTA aunque la tipografía fluida lo agrande.
   `min-height:0` evita que el mínimo de .btn congele la altura. */
.btn-square { flex: none; align-self: stretch; min-height: 0; aspect-ratio: 1; padding: 0; width: auto; }

/* ── Volteo de la tarjeta de pago en línea ───────────────────────────────── */
.pay-flip { perspective: 1600px; }
.pay-inner {
  position: relative; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--duration-slow) var(--ease-out);
}
.pay-flip.is-flipped .pay-inner { transform: rotateY(180deg); }

/* `backface-visibility` por sí sola no basta: en Firefox y Safari falla cuando
   la cara tiene border-radius y sombra, y se ven las dos a la vez ("la tarjeta
   se duplica"). El respaldo es `visibility`, que sí es fiable, conmutada a
   mitad del giro —con la tarjeta de canto— para que el cambio no se note. */
.pay-face { height: 100%; backface-visibility: hidden; transition: visibility 0s linear; }
/* La cara trasera se superpone, ya girada: al voltear queda de frente. */
.pay-back { position: absolute; inset: 0; transform: rotateY(180deg); }

/* La que sale se oculta al instante; la que entra espera a que la tarjeta
   pase por el canto. Así jamás coinciden, aunque backface-visibility falle. */
.pay-front { visibility: visible; transition-delay: calc(var(--duration-slow) / 2); }
.pay-back  { visibility: hidden;  transition-delay: 0s; }
.pay-flip.is-flipped .pay-front { visibility: hidden;  transition-delay: 0s; }
.pay-flip.is-flipped .pay-back  { visibility: visible; transition-delay: calc(var(--duration-slow) / 2); }
/* El realce lo lleva el contenedor, que está fuera del plano 3D: así ninguna
   cara recibe `transform` en hover y no hay repintado que muestre el espejo. */
.pay-flip:hover .pay-face { border-top-color: var(--color-accent); box-shadow: var(--shadow-md); }

.qr-body {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  margin: auto 0; text-align: center;
}
/* El QR necesita su blanco: no puede heredar el fondo del modo nocturno. */
.qr-img {
  width: 100%; max-width: 260px; height: auto;
  background: #fff; padding: var(--space-3); border-radius: var(--radius-sm);
}
.qr-body p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }

/* Sin JS el volteo no ocurre: se oculta el disparador y el pago sigue en el CTA. */
.no-js .btn-square, .no-js .pay-back { display: none; }

/* 5.6 Test de velocidad */
.speed-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center; }

/* Velocímetro — sustituye la captura de pantalla: nítido a cualquier tamaño,
   sin peso de imagen y con los colores del modo activo. */
.gauge-fig { padding: var(--space-8); }
.gauge { width: 100%; max-width: 420px; height: auto; }
.gauge .g-track  { fill: none; stroke: var(--line); stroke-width: 14; stroke-linecap: round; }
.gauge .g-fill   { fill: none; stroke: var(--color-accent); stroke-width: 14; stroke-linecap: round; }
.dark .gauge .g-fill { stroke: var(--color-blue); }
/* Dial: marca menor cada 10 megas y mayor con cifra cada 50. La jerarquía
   entre las dos es lo que hace que se lea como un instrumento y no como un
   arco con cuatro rayas. */
.gauge .g-tick-mn path { stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; opacity: .38; }
.gauge .g-tick-mj path { stroke: var(--ink-soft); stroke-width: 2.5; stroke-linecap: round; opacity: .75; }
.gauge .g-num text {
  fill: var(--ink-soft); font-family: var(--font-mono); font-size: 12px;
  text-anchor: middle; opacity: .8;
}

/* El barrido lo conduce demo.js con requestAnimationFrame, para que aguja,
   arco y cifra vayan sincronizados. Aquí solo el estado de reposo. */
.gauge .g-needle { transform-origin: 170px 170px; }
.gauge .g-needle-b { fill: var(--ink); stroke: none; }
.gauge .g-hub   { fill: var(--panel); stroke: var(--ink); stroke-width: 3; }
.gauge .g-hub-i { fill: var(--color-accent); stroke: none; }
.dark .gauge .g-hub-i { fill: var(--color-blue); }

.gauge .g-fill { stroke-dasharray: 100; }
.gauge text { fill: var(--ink-soft); font-family: var(--font-mono); font-size: 15px; text-anchor: middle; }
.gauge .g-value { fill: var(--ink); font-family: var(--font-heading); font-weight: 600; font-size: 30px; }
.gauge .g-unit  { fill: var(--ink-soft); font-family: var(--font-mono); font-size: 14px; }

/* 5.7 FAQ */
/* A todo el ancho: el disparador ocupa la línea completa, con el título a la
   izquierda y el control a la derecha. Solo la respuesta se topa, para que la
   medida de lectura siga siendo cómoda. */
.faq { width: 100%; border-top: var(--border-width) solid var(--line); }
.faq details { border-bottom: var(--border-width) solid var(--line); }
/* El disparador es el propio <summary>: estado, teclado y "sin JS" nativos. */
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: -2px; }
.faq-trigger {
  display: flex; align-items: center; gap: var(--space-4);
  margin: 0; padding: var(--space-4) 0; min-height: 56px;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xl);
  letter-spacing: -.01em; color: var(--ink);
}
.faq-trigger .idx { margin-right: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }
.faq-trigger .sq {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  border: var(--border-width) solid var(--color-accent); border-radius: var(--radius-sm);
  color: var(--color-accent);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base), color var(--duration-base);
}
details[open] .faq-trigger .sq { transform: rotate(45deg); border-color: var(--color-blue); color: var(--color-blue); }
.faq-answer { padding-bottom: var(--space-6); }
.faq-answer p { font-size: var(--text-base); color: var(--ink-soft); max-width: 70ch; }
.faq-answer img { margin-top: var(--space-3); max-height: 56px; border-radius: var(--radius-sm); }

/* 5.8 Footer */
footer {
  margin-top: var(--space-8);
  padding-block: var(--space-16);
  background: var(--color-neutral-900); color: #eceef0;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); }
/* El logotipo lleva trazos oscuros pensados para fondo claro: sobre el
   carbón del footer hay que levantarlos sin apagar el naranja. */
.foot-grid img { height: 92px; width: auto; filter: brightness(1.75); }
.foot-grid a {
  display: flex; align-items: center; gap: var(--space-2); width: fit-content;
  padding: var(--space-2) 0; font-size: var(--text-base);
  color: rgba(236, 238, 240, .78); text-decoration: none;
}
.foot-grid a:hover { color: var(--color-blue-300); }
.foot-h {
  margin-bottom: var(--space-3);
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(236, 238, 240, .55);
}
.foot-note { font-size: var(--text-sm); color: rgba(236, 238, 240, .66); max-width: 34ch; }

/* 5.9 Botones flotantes — apilados, nunca superpuestos */
.fabs {
  position: fixed; z-index: var(--z-fab);
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--space-3);
}
.fab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 52px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg); cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base);
  transition: transform var(--duration-fast), background var(--duration-fast), opacity var(--duration-base);
}
.fab:hover { transform: translateY(-2px); }
.fab-wa  { background: var(--color-whatsapp); color: #0b3d1f; padding-inline: var(--space-6); }
.fab-wa:hover { background: var(--color-whatsapp-600); color: #fff; }
.fab-top {
  width: 52px; padding: 0; justify-content: center;
  background: var(--panel); color: var(--ink);
  border: var(--border-width) solid var(--line);
}
.fab-top[hidden] { display: none; }

/* ── 6. Responsive ───────────────────────────────────────────────────────── */

/* El ancho lateral ya lo da el 90% de .wrap / .nav — no hace falta padding. */

@media (min-width: 1024px) {
  :root { --section-y: var(--space-24); }
  html { scroll-padding-top: 104px; }
  .nav { min-height: 80px; }
}

/* xxl — con tanto ancho, el aire vertical y el logotipo crecen a juego. */
@media (min-width: 1680px) {
  :root { --section-y: var(--space-32); }
}

@media (max-width: 1023px) {
  .cover-grid, .speed-grid { grid-template-columns: 1fr; }
  /* .pay-grid se gobierna sola con auto-fit; solo se fuerza a 1 col en móvil */
  .hero-specs { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

/* Nav hamburguesa hasta 1023px (requisito de breakpoint md) */
@media (max-width: 1023px) {
  .nav-toggle { display: grid; }

  /* El cajón ocupa el viewport y recorta lo que quede fuera: así el panel
     cerrado no genera scroll horizontal. Oculto también para el teclado. */
  .nav-drawer {
    position: fixed; inset: 0; z-index: var(--z-overlay);
    overflow: hidden; pointer-events: none;
    visibility: hidden; transition: visibility 0s linear var(--duration-base);
  }
  body.nav-open .nav-drawer { visibility: visible; pointer-events: auto; transition-delay: 0s; }

  .nav-links {
    position: absolute; inset: 0 0 0 auto;
    width: min(320px, 84vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--space-2);
    padding: var(--space-16) var(--space-6) var(--space-6);
    background: var(--panel);
    border-left: var(--border-width) solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    /* Curva suave y simétrica: --ease-out (.16,1,.3,1) llega al final en el
       primer 16% del tiempo y el resto lo pasa asentándose, que es lo que se
       leía como un latigazo. Aquí el panel simplemente entra por la derecha. */
    transition: transform var(--duration-base) cubic-bezier(.4, 0, .2, 1);
  }
  .nav-links a:not(.btn) { font-size: var(--text-lg); padding: var(--space-3) 0; }
  .nav-links .btn { margin-top: var(--space-4); }
  body.nav-open .nav-links { transform: translateX(0); }
  body.nav-open { overflow: hidden; }

  .nav-close { position: absolute; top: var(--space-4); right: var(--space-4); }

  .nav-scrim {
    position: absolute; inset: 0;
    background: var(--overlay);
    opacity: 0; visibility: hidden;
    transition: opacity var(--duration-base), visibility var(--duration-base);
  }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
}
@media (min-width: 1024px) {
  .nav-drawer { display: contents; }   /* transparente al layout en desktop */
  .nav-close, .nav-scrim { display: none; }
}

@media (max-width: 767px) {
  .hero { padding-block: var(--space-8) var(--space-12); }
  .hero::before { display: none; }

  .hero-logo { margin-bottom: var(--space-12); }
  .hero-cta {
    display: flex; flex-direction: column; align-items: stretch;
    gap: var(--space-3); margin-top: var(--space-6);
  }
  .hero-cta .btn { width: 100%; }

  .hero-specs {
    display: flex; gap: 0; margin-top: var(--space-8);
    border-top: var(--border-width) solid var(--line);
  }
  .hero-specs .spec { flex: 1; border-top: 0; padding: var(--space-3) 0 0; }
  .hero-specs .v { font-size: var(--text-xl); }

  .seg { display: flex; width: 100%; }
  .seg-opt { flex: 1; }

  .foot-grid { grid-template-columns: 1fr; gap: var(--space-8); }

  .fab-wa span { display: none; }        /* en móvil el pulgar manda: solo icono */
  .fab-wa { width: 52px; padding: 0; justify-content: center; }
}

/* La hoja de especificaciones necesita las cinco columnas para respirar.
   Por debajo de lg se apila como tarjetas limpias: la página nunca hace
   scroll horizontal y el componente tampoco lo esconde dentro de sí. */
@media (max-width: 1023px) {
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable { border: 0; border-radius: 0; }
  .ptable thead { display: none; }
  .ptable tr {
    margin-bottom: var(--space-4); padding: var(--space-6);
    border: var(--border-width) solid var(--line); border-radius: var(--radius-md);
    background: var(--panel);
  }
  .ptable tr.feat { border-color: var(--color-accent); box-shadow: inset 4px 0 0 var(--color-accent); }
  .ptable tbody tr:hover { background: var(--panel); }
  /* Mismo relevo que en la tabla, pero aquí lo que se tiñe es el borde. */
  .ptable tbody:hover        tr.feat:not(:hover),
  .ptable tbody:focus-within tr.feat:not(:focus-within) { border-color: var(--line); }
  .ptable tbody tr:hover,
  .ptable tbody tr:focus-within { border-color: var(--color-accent); }
  .ptable td { border: 0; padding: var(--space-1) 0; }
  .ptable td.p-idx { display: none; }
  .ptable td.p-price { padding-block: var(--space-2) var(--space-4); white-space: normal; }
  .ptable td:last-child { padding-top: var(--space-3); }
  .ptable .btn { width: 100%; }
}

/* md: dos columnas de tarjetas (requisito §12) */
@media (min-width: 768px) and (max-width: 1023px) {
  .ptable tbody { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
  .ptable tr { margin-bottom: 0; height: 100%; }
}

/* ── 7. Utilidades y preferencias del sistema ────────────────────────────── */

.text-muted { color: var(--ink-soft); }

/* Sin JS: el sitio sigue siendo legible y permite contactar. */
.no-js .fab-top { display: none; }
.no-js .nav-toggle, .no-js .nav-close, .no-js .nav-scrim { display: none; }
.no-js .nav-drawer { display: contents; }
.no-js .nav-links { position: static; width: auto; flex-direction: row; flex-wrap: wrap;
                    transform: none; visibility: visible;
                    padding: 0; background: none; border: 0; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;   /* si no, visibility se retrasaría sola */
  }
}

@media print {
  .masthead, .fabs, .hero::before { display: none !important; }
}