/* ============================================
   SYNCROTECH - Global Design System
   ============================================ */

/* IDEA 14 · dos tipografías, cada una en lo suyo.
   Inter para el cuerpo: se lee muy bien y es la que ya estaba.
   Montserrat para los titulares: geométrica, de formas abiertas y con
   mucho carácter en tamaño grande. Le da personalidad al sitio sin
   tocar nada de lo que hay que leer seguido.

   Si prefieres otra, cambia la familia de esta línea y el valor de
   --font-display más abajo. No hay que tocar nada más en todo el CSS.

   Ahora mismo: Montserrat Bold (700) en los títulos y Montserrat
   regular (400) en los subtítulos. El cuerpo sigue en Inter, que es la
   que mejor se lee en párrafo largo. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700&display=swap');

/* ---- CSS Variables ---- */
:root {
  --primary: #0066FF;
  --primary-dark: #0044CC;
  --primary-light: #3385FF;
  --accent: #00D4FF;
  --accent-dark: #00A8CC;
  --bg-dark: #0A0E1A;
  --bg-card: #111827;
  --bg-card-2: #1a2235;
  --border: rgba(0, 102, 255, 0.2);
  --text: #F0F4FF;
  --text-muted: #8899BB;
  /* Antes #556677: contra los fondos oscuros reales del sitio (#0A0E1A,
     #111827, #0A1729...) eso daba 3:1-3,3:1 -- il legible en pie de
     página, "no" de las tablas comparativas, breadcrumbs, migas y demás
     texto que usa este tono como el más apagado de los tres. Con este
     tono se llega a 5:1+ en esos mismos fondos y se mantiene un paso
     por debajo de --text-muted, como corresponde. */
  --text-dim: #778BA3;
  --success: #00D68F;
  --warning: #FFB800;
  --danger: #FF4757;
  /* Variantes para TEXTO (no fondos, no bordes, no íconos): el mismo
     azul/cian/verde/dorado de marca, sobre un fondo llano, a veces no
     llega a 4,5:1 -- ni en oscuro ni en claro. Se usan solo donde el
     color va sobre las letras mismas (eyebrows, cifras, breadcrumbs,
     pastillas), nunca donde ya funciona (botones, bordes, íconos). */
  --primary-text: #3D8BFF;
  --accent-text: var(--accent);
  --success-text: var(--success);
  --warning-text: var(--warning);
  --gradient: linear-gradient(135deg, #0066FF, #00D4FF);
  --gradient-hover: linear-gradient(135deg, #0055DD, #00B8E0);
  --shadow-blue: 0 0 40px rgba(0, 102, 255, 0.15);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --radius: 16px;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Si la display no carga, cae en Inter y no se rompe nada. */
  --font-display: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --peso-titulo: 700;   /* Montserrat Bold */
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--bg-dark);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; outline: none; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ---- Layout ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }
.section-sm { padding: 60px 0; }

/* ---- Typography ---- */
.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0, 102, 255, 0.12);
  border: 1px solid rgba(0, 102, 255, 0.3);
  color: var(--accent);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 6px 16px; border-radius: 50px;
  margin-bottom: 16px;
}
.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; line-height: 1.2;
  margin-bottom: 16px;
  color: var(--text);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.section-subtitle {
  font-size: 1.1rem; color: var(--text-muted);
  max-width: 600px; margin-bottom: 48px;
}
.text-center { text-align: center; }
.text-center .section-subtitle { margin-left: auto; margin-right: auto; }

/* ---- Gradient Text ---- */
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 50px;
  font-weight: 600; font-size: 0.95rem;
  transition: var(--transition); position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.1); opacity: 0;
  transition: opacity var(--transition);
}
.btn:hover::after { opacity: 1; }
.btn-primary {
  background: var(--gradient); color: #fff;
  box-shadow: 0 4px 24px rgba(0, 102, 255, 0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 102, 255, 0.5); }
.btn-outline {
  background: transparent;
  border: 2px solid rgba(0, 102, 255, 0.5); color: var(--text);
}
.btn-outline:hover { border-color: var(--primary); background: rgba(0,102,255,0.1); }
.btn-lg { padding: 18px 36px; font-size: 1rem; }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; }

/* ---- Cards ---- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: var(--transition);
}
.card:hover {
  border-color: rgba(0, 102, 255, 0.4);
  box-shadow: var(--shadow-blue);
  transform: translateY(-4px);
}

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 50px;
  font-size: 0.75rem; font-weight: 600;
}
.badge-primary { background: rgba(0,102,255,0.15); color: var(--primary-light); }
.badge-success { background: rgba(0,214,143,0.15); color: var(--success); }
.badge-warning { background: rgba(255,184,0,0.15); color: var(--warning); }
.badge-danger  { background: rgba(255,71,87,0.15);  color: var(--danger); }
.badge-muted   { background: rgba(136,153,187,0.15); color: var(--text-muted); }

/* ---- Forms ---- */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block; margin-bottom: 8px;
  font-size: 0.875rem; font-weight: 500; color: var(--text-muted);
}
.form-control {
  width: 100%; padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 0.95rem;
  transition: var(--transition);
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(0,102,255,0.06);
  box-shadow: 0 0 0 3px rgba(0,102,255,0.15);
}
.form-control::placeholder { color: var(--text-dim); }
.form-control.error { border-color: var(--danger); }
.form-error { font-size: 0.8rem; color: var(--danger); margin-top: 4px; display: none; }
.form-error.show { display: block; }
textarea.form-control { resize: vertical; min-height: 120px; }
select.form-control option { background: var(--bg-card); color: var(--text); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ============================================
   NAVBAR
   ============================================ */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 24px;
  transition: var(--transition);
}
#navbar.scrolled {
  background: rgba(10, 14, 26, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 32px rgba(0,0,0,0.3);
}
.nav-container {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
}
.nav-brand-name {
  height: 14px; width: auto;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.footer-brand-name {
  height: 13px; width: auto;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.loader-brand {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.loader-brand-name { height: 20px; width: auto; max-width: 80vw; }
/* El nombre es azul oscuro: se aclara sobre el tema oscuro */
.nav-brand-name, .footer-brand-name, .loader-brand-name { filter: brightness(1.75) saturate(1.15); }
:root[data-theme="light"] .nav-brand-name,
:root[data-theme="light"] .footer-brand-name,
:root[data-theme="light"] .loader-brand-name { filter: none; }
@media (max-width: 480px) {
  .nav-brand-name { height: 12px; }
}
.nav-logo {
  display: flex; align-items: center; gap: 12px;
}
.nav-logo-icon {
  width: 40px; height: 40px;
  background: var(--gradient);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.nav-logo-text {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-links {
  display: flex; align-items: center; gap: 8px;
}
.nav-link {
  padding: 8px 16px; border-radius: 8px;
  font-size: 0.9rem; font-weight: 500; color: var(--text-muted);
  transition: var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; padding: 8px;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: var(--transition);
}
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(10,14,26,0.98); backdrop-filter: blur(20px);
  flex-direction: column; align-items: center; justify-content: center; gap: 32px;
}
.mobile-menu.open { display: flex; }
.mobile-nav-link {
  font-size: 1.5rem; font-weight: 700; color: var(--text);
  padding: 12px; transition: var(--transition);
}
.mobile-nav-link:hover { color: var(--accent); }
.mobile-close {
  position: absolute; top: 24px; right: 24px;
  background: rgba(255,255,255,0.08); border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--text);
}

/* ============================================
   HERO
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 100px 0 60px;
}
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('../assets/img/hero-bg.png');
  background-size: cover; background-position: center;
  opacity: 0.35;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(10,14,26,0.9) 40%, rgba(10,14,26,0.5));
}
.hero-particles {
  position: absolute; inset: 0;
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 720px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,212,255,0.1);
  border: 1px solid rgba(0,212,255,0.3);
  color: var(--accent-text); font-size: 0.8rem; font-weight: 600;
  padding: 6px 16px; border-radius: 50px;
  margin-bottom: 24px; letter-spacing: 0.08em; text-transform: uppercase;
}
.hero-badge::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s infinite;
}
.hero-title {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 900; line-height: 1.1;
  margin-bottom: 24px; letter-spacing: -0.03em;
}
.hero-sub {
  font-size: 1.2rem; color: var(--text-muted);
  margin-bottom: 40px; line-height: 1.7;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 60px; }
.hero-stats {
  display: flex; gap: 40px; flex-wrap: wrap;
}
.hero-stat-value {
  font-size: 2rem; font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.hero-stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.hero-visual {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 45%; z-index: 1;
  pointer-events: none;
}
.speed-ring {
  width: 400px; height: 400px;
  border-radius: 50%;
  border: 2px solid rgba(0,102,255,0.2);
  position: relative;
  animation: rotate 20s linear infinite;
  margin: 0 auto;
}
.speed-ring::before {
  content: ''; position: absolute; inset: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0,212,255,0.15);
  animation: rotate 12s linear infinite reverse;
}
.speed-ring::after {
  content: ''; position: absolute; inset: 40px;
  border-radius: 50%;
  border: 2px solid rgba(0,102,255,0.1);
  animation: rotate 8s linear infinite;
}
.speed-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  /* El anillo gira, el número no: si no, "1 Gbps SIMÉTRICO" da vueltas
     para siempre en el sitio más visible de la portada. */
  animation: rotate 20s linear infinite reverse;
}
.speed-number {
  font-size: 4rem; font-weight: 900; line-height: 1;
  color: var(--text);
  letter-spacing: -.03em;
}
.speed-unit { font-size: 1rem; color: var(--text-muted); }

/* ============================================
   PLANS SECTION
   ============================================ */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 18px;
}
.plan-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  position: relative; overflow: hidden;
  transition: var(--transition);
}
.plan-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--gradient); opacity: 0;
  transition: opacity var(--transition);
}
.plan-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-blue); }
.plan-card:hover::before { opacity: 1; }
.plan-card.featured {
  border-color: rgba(0,102,255,0.5);
  background: linear-gradient(135deg, rgba(0,102,255,0.08), rgba(0,212,255,0.05));
  transform: scale(1.04);
}
.plan-card.featured::before { opacity: 1; }
.featured-label {
  display: inline-block;
  background: var(--gradient);
  color: #fff; font-size: 0.7rem; font-weight: 700;
  padding: 4px 14px; border-radius: 50px;
  margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.1em;
}
.plan-animal {
  font-size: 1.8rem; margin-bottom: 4px;
}
.plan-name {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-muted); text-transform: uppercase; margin-bottom: 12px;
}
.plan-speed {
  font-size: 2.5rem; font-weight: 900; line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.plan-unit { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 4px; }
.plan-sym { font-size: 0.7rem; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.plan-price {
  font-size: 1.5rem; font-weight: 800; margin-bottom: 4px;
}
.plan-currency { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 16px; }
.plan-pitch {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-style: italic;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.plan-features { text-align: left; margin-bottom: 28px; }
.plan-feature {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 0.85rem; color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.plan-feature:last-child { border: none; }
.plan-feature i { color: var(--success); font-size: 1rem; flex-shrink: 0; }
.plan-btn {
  width: 100%; padding: 14px;
  background: var(--gradient); color: #fff;
  border-radius: 50px; font-weight: 700;
  font-size: 0.9rem; transition: var(--transition);
  box-shadow: 0 4px 20px rgba(0,102,255,0.3);
}
.plan-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,102,255,0.5); }

/* ============================================
   WHY US / FEATURES
   ============================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: var(--transition);
}
.feature-card:hover {
  border-color: rgba(0,102,255,0.4);
  transform: translateY(-4px);
  box-shadow: var(--shadow-blue);
}
.feature-icon {
  width: 60px; height: 60px;
  background: rgba(0,102,255,0.12);
  border: 1px solid rgba(0,102,255,0.2);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 20px;
  transition: var(--transition);
}
.feature-card:hover .feature-icon {
  background: var(--gradient);
  border-color: transparent;
}
.feature-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.feature-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; }

/* ============================================
   STATS COUNTER
   ============================================ */
.stats-section {
  background: linear-gradient(135deg, rgba(0,102,255,0.08), rgba(0,212,255,0.04));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 60px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px; text-align: center;
}
.stat-item {}
.stat-number {
  font-size: 3rem; font-weight: 900; line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label { font-size: 0.9rem; color: var(--text-muted); margin-top: 8px; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: var(--transition);
}
.testimonial-card:hover { transform: translateY(-4px); border-color: rgba(0,102,255,0.3); }
.testimonial-stars { color: var(--warning-text); font-size: 1rem; margin-bottom: 16px; }
.testimonial-text {
  font-size: 0.95rem; color: var(--text-muted);
  line-height: 1.7; margin-bottom: 24px;
  font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: #fff;
}
.testimonial-name { font-weight: 700; font-size: 0.9rem; }
.testimonial-plan { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  padding: 100px 0;
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,102,255,0.12) 0%, transparent 70%);
}
.cta-content { position: relative; z-index: 1; }
.cta-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900; margin-bottom: 16px;
}
.cta-sub { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 40px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================
   FOOTER
   ============================================ */
footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand { }
.footer-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.footer-logo-icon {
  width: 36px; height: 36px;
  background: var(--gradient); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.footer-logo-text {
  font-size: 1.2rem; font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; }
.footer-social { display: flex; gap: 12px; }
.social-link {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1rem;
  transition: var(--transition);
}
.social-link:hover { border-color: var(--primary); color: var(--primary); background: rgba(0,102,255,0.1); }
.footer-col-title { font-weight: 700; margin-bottom: 20px; font-size: 0.9rem; letter-spacing: 0.05em; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-link { font-size: 0.875rem; color: var(--text-muted); transition: var(--transition); }
.footer-link:hover { color: var(--primary); }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.875rem; color: var(--text-muted); margin-bottom: 12px;
}
.footer-contact-item i { color: var(--primary); font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer-copy { font-size: 0.85rem; color: var(--text-dim); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 0.85rem; color: var(--text-dim); transition: var(--transition); }
.footer-legal a:hover { color: var(--primary); }

/* ============================================
   ALERT / TOAST
   ============================================ */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 12px;
}
.toast {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  min-width: 320px; max-width: 400px;
  box-shadow: var(--shadow-card);
  animation: slideInRight 0.3s ease;
}
.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.info    { border-left: 3px solid var(--primary); }
.toast-icon { font-size: 1.2rem; flex-shrink: 0; }
.toast-msg { font-size: 0.9rem; flex: 1; }
.toast-close { cursor: pointer; color: var(--text-muted); font-size: 0.9rem; }

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10,14,26,0.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%; max-width: 520px;
  transform: scale(0.95);
  transition: transform var(--transition);
  max-height: 90vh; overflow-y: auto;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.modal-title { font-size: 1.3rem; font-weight: 800; }
.modal-close {
  background: rgba(255,255,255,0.06); border-radius: 8px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1rem;
  transition: var(--transition);
}
.modal-close:hover { background: rgba(255,71,87,0.15); color: var(--danger); }

/* ============================================
   PAGE HEADER (inner pages)
   ============================================ */
.page-header {
  padding: 140px 0 60px;
  text-align: center;
  position: relative; overflow: hidden;
}
.page-header-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,102,255,0.15) 0%, transparent 60%);
}
.page-header-content { position: relative; z-index: 1; }
.page-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900; margin-bottom: 16px;
  color: var(--text);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.breadcrumb {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.875rem; color: var(--text-muted);
}
.breadcrumb a { color: var(--primary-text); transition: var(--transition); }
.breadcrumb a:hover { color: var(--accent); }

/* ============================================
   LOADER
   ============================================ */
.page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-dark);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 20px;
  transition: opacity 0.5s ease;
}
.loader-logo { font-size: 1.8rem; font-weight: 900; }
.loader-bar {
  width: 200px; height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px; overflow: hidden;
}
.loader-progress {
  height: 100%; width: 0;
  background: var(--gradient);
  border-radius: 3px;
  animation: loadProgress 1s ease forwards;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes loadProgress {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.animate-up { animation: fadeUp 0.7s ease forwards; }
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .hero-visual { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; }
  .section { padding: 70px 0; }
  .hero { min-height: auto; padding: 120px 0 60px; }
  .hero-stats { gap: 24px; }
  .plans-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .plan-card.featured { transform: none; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .modal { padding: 24px; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .btn-lg { padding: 14px 24px; }
}

/* ============================================
   EXPANDABLE PLAN CARDS & FOCUS OVERLAY
   ============================================ */
.plan-focus-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 5, 15, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}

body.plan-focused .plan-focus-overlay {
  opacity: 1;
  pointer-events: auto;
}

body.plan-focused {
  overflow: hidden; /* Prevent scrolling background */
}

.plan-card {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 1;
}

.plan-main {
  width: 100%;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.plan-card.expanded {
  z-index: 9999; /* Above the overlay and header */
  transform: translate(var(--move-x, 0), var(--move-y, 0)) scale(1.05) !important;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8), 0 0 60px rgba(0, 102, 255, 0.5);
  border-color: var(--primary);
  /* Side-by-side layout properties */
  width: 90vw !important;
  max-width: 800px !important;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0 !important;
  text-align: left;
}

.plan-card.expanded .plan-main {
  width: 45%;
  padding: 40px 30px;
  background: rgba(0, 0, 0, 0.15);
  border-right: 1px solid var(--border);
  justify-content: center;
}

.plan-details {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  width: 100%;
}

.plan-card.expanded .plan-details {
  max-height: 800px;
  opacity: 1;
  width: 55%;
  padding: 40px 30px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plan-card.expanded .plan-expand-hint {
  display: none;
}

.plan-expand-hint {
  transition: color 0.3s ease;
  margin-top: 10px;
}

.plan-card:hover .plan-expand-hint {
  color: var(--primary) !important;
}

/* Responsive fallback para móviles */
@media (max-width: 768px) {
  .plan-card.expanded {
    flex-direction: column;
    width: 95vw !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }
  .plan-card.expanded .plan-main {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 30px 20px;
  }
  .plan-card.expanded .plan-details {
    width: 100%;
    padding: 30px 20px;
  }
}

/* ============================================
   MEGA MENU
   ============================================ */
.nav-link-mega { position: relative; }
.mega-menu-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  min-width: 520px; padding: 28px 32px;
  background: rgba(17, 24, 39, 0.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,102,255,0.08);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1001;
}
.nav-link-mega:hover .mega-menu-panel,
.mega-menu-panel:hover {
  opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0);
}
.mega-menu-panel::before {
  content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.mega-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mega-menu-grid.single-col { grid-template-columns: 1fr; }
.mega-menu-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  transition: var(--transition); text-decoration: none;
}
.mega-menu-item:hover { background: rgba(0,102,255,0.08); }
.mega-menu-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
  background: rgba(0,102,255,0.1); color: var(--accent);
}
.mega-menu-item-text { flex: 1; }
.mega-menu-item-title { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.mega-menu-item-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
.mega-menu-promo {
  margin-top: 16px; padding: 16px;
  background: linear-gradient(135deg, rgba(0,102,255,0.12), rgba(0,212,255,0.06));
  border: 1px solid rgba(0,102,255,0.2); border-radius: var(--radius-sm);
  text-align: center;
}
.mega-menu-promo-text { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 8px; }

@media (max-width: 768px) {
  .mega-menu-panel { display: none !important; }
}

/* ============================================
   LIGHT THEME
   ============================================ */
:root[data-theme="light"] {
  --bg-dark: #F0F2F5;
  --bg-card: #FFFFFF;
  --bg-card-2: #F8F9FA;
  --border: rgba(0, 0, 0, 0.1);
  --text: #1A1A2E;
  --text-muted: #5A6478;
  /* Era #8A94A6, que sobre blanco da 2,7:1 — por debajo de lo que se
     puede leer. Un gris que no se lee no es discreto: es un texto
     perdido. Este da 5:1 y sigue siendo claramente secundario. */
  --text-dim: #5F6B7D;
  --shadow-blue: 0 0 40px rgba(0, 102, 255, 0.08);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
  /* Igual que --text-dim arriba: el azul/cian/verde/dorado de marca se
     ve bien sobre fondo oscuro, pero sobre blanco varios quedan por
     debajo de 4,5:1 (algunos daban 1,6:1 — casi invisibles). Estas
     variantes son solo para texto, más oscuras, misma familia de color. */
  --primary-text: #0057D8;
  --accent-text: #04687F;
  --success-text: #046443;
  --warning-text: #8A5A00;
}

/* --- Body & Scrollbar --- */
:root[data-theme="light"] body { background: var(--bg-dark); color: var(--text); }
:root[data-theme="light"] ::-webkit-scrollbar-track { background: #F0F2F5; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #B0BEC5; }

/* --- Navbar --- */
:root[data-theme="light"] #navbar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
}
:root[data-theme="light"] #navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
:root[data-theme="light"] .nav-link { color: #5A6478; }
:root[data-theme="light"] .nav-link:hover,
:root[data-theme="light"] .nav-link.active { color: #1A1A2E; background: rgba(0,0,0,0.04); }
:root[data-theme="light"] .nav-hamburger span { background: #1A1A2E; }
:root[data-theme="light"] .mobile-menu { background: rgba(255,255,255,0.98); }
:root[data-theme="light"] .mobile-nav-link { color: #1A1A2E; }
:root[data-theme="light"] .mobile-close { background: rgba(0,0,0,0.06); color: #1A1A2E; }
:root[data-theme="light"] .mega-menu-panel {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
:root[data-theme="light"] .mega-menu-item:hover { background: rgba(0,102,255,0.05); }
:root[data-theme="light"] .mega-menu-item-title { color: #1A1A2E; }

/* --- Hero --- */
:root[data-theme="light"] .hero {
  background: linear-gradient(180deg, #E8ECF4 0%, #F0F2F5 100%);
}
:root[data-theme="light"] .hero-bg,
:root[data-theme="light"] .hero-overlay { opacity: 0.15; }
:root[data-theme="light"] .hero-video-bg::after {
  background: linear-gradient(180deg, rgba(240,242,245,0.7) 0%, rgba(240,242,245,0.95) 100%);
}
:root[data-theme="light"] .hero-orb { opacity: 0.15; }
:root[data-theme="light"] .hero-grid-lines {
  background-image:
    linear-gradient(rgba(0,102,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,102,255,0.06) 1px, transparent 1px);
}
:root[data-theme="light"] .hero-title,
:root[data-theme="light"] .hero-title span {
  background: linear-gradient(135deg, #1A1A2E 60%, #0066FF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .hero-sub { color: #5A6478; }
:root[data-theme="light"] .hero-badge { background: rgba(0,102,255,0.08); border-color: rgba(0,102,255,0.2); }
:root[data-theme="light"] .hero-stat-value { color: #1A1A2E; }
:root[data-theme="light"] .hero-stat-label { color: #5A6478; }

/* --- Stats Bar --- */
:root[data-theme="light"] .stats-bar,
:root[data-theme="light"] .stat-bar { background: #FFFFFF; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

/* --- Cards --- */
:root[data-theme="light"] .card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
:root[data-theme="light"] .card:hover {
  border-color: rgba(0,102,255,0.3);
  box-shadow: 0 8px 24px rgba(0,102,255,0.08);
}

/* --- Plan Cards --- */
:root[data-theme="light"] .plan-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.08);
}
:root[data-theme="light"] .plan-card.featured {
  border-color: rgba(0,102,255,0.3);
}
:root[data-theme="light"] .plan-card.expanded {
  box-shadow: 0 40px 80px rgba(0,0,0,0.15);
}
:root[data-theme="light"] .plan-card.expanded .plan-main {
  background: rgba(0,102,255,0.03);
}
:root[data-theme="light"] .plan-focus-overlay {
  background: rgba(240,242,245,0.8);
}

/* --- Section Titles --- */
:root[data-theme="light"] .section-title {
  background: linear-gradient(135deg, #1A1A2E 60%, #0066FF);
  -webkit-background-clip: text; background-clip: text;
}
:root[data-theme="light"] .section-tag {
  background: rgba(0,102,255,0.06);
  border-color: rgba(0,102,255,0.15);
}

/* --- Forms --- */
:root[data-theme="light"] .form-control {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.12);
  color: #1A1A2E;
}
:root[data-theme="light"] .form-control:focus {
  background: #FFFFFF;
  border-color: #0066FF;
}
:root[data-theme="light"] .form-control::placeholder { color: #8A94A6; }
:root[data-theme="light"] select.form-control option { background: #FFFFFF; color: #1A1A2E; }

/* --- Modals --- */
:root[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.3); }
:root[data-theme="light"] .modal {
  background: #FFFFFF;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
:root[data-theme="light"] .modal-close { background: rgba(0,0,0,0.05); color: #5A6478; }

/* --- Toast --- */
:root[data-theme="light"] .toast {
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* --- Loader --- */
:root[data-theme="light"] .page-loader { background: #F0F2F5; }
:root[data-theme="light"] .loader-bar { background: rgba(0,0,0,0.06); }

/* --- Page Header (inner pages) --- */
:root[data-theme="light"] .page-header {
  background: linear-gradient(180deg, #E8ECF4, #F0F2F5);
}
:root[data-theme="light"] .page-header-bg {
  background: radial-gradient(ellipse at 50% 0%, rgba(0,102,255,0.08) 0%, transparent 60%);
}
:root[data-theme="light"] .page-title {
  background: linear-gradient(135deg, #1A1A2E 60%, #0066FF);
  -webkit-background-clip: text; background-clip: text;
}

/* --- Speed ring / visual --- */
:root[data-theme="light"] .speed-ring { border-color: rgba(0,102,255,0.1); }

/* --- FAQ --- */
:root[data-theme="light"] .faq-question { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }
:root[data-theme="light"] .faq-question:hover { background: rgba(0,102,255,0.03); }

/* --- CTA section --- */
:root[data-theme="light"] .cta-section,
:root[data-theme="light"] [class*="cta"] {
  background: linear-gradient(135deg, #E8ECF4, #F0F4FF);
}

/* --- Testimonials --- */
:root[data-theme="light"] .testi-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }

/* --- Chatbot --- */
:root[data-theme="light"] .chatbot-window {
  background: #FFFFFF;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
:root[data-theme="light"] .chat-msg.bot {
  background: rgba(0,102,255,0.06);
  border-color: rgba(0,102,255,0.1);
  color: #1A1A2E;
}
:root[data-theme="light"] .chat-option-btn {
  background: rgba(0,102,255,0.04);
  border-color: rgba(0,102,255,0.2);
  color: #0066FF;
}

/* --- Footer respects theme --- */

/* --- Badges in light --- */
:root[data-theme="light"] .badge-primary { background: rgba(0,102,255,0.08); }
:root[data-theme="light"] .badge-success { background: rgba(0,214,143,0.08); }
:root[data-theme="light"] .badge-warning { background: rgba(255,184,0,0.08); }
:root[data-theme="light"] .badge-danger { background: rgba(255,71,87,0.08); }

/* --- Gradient text fix for light --- */
:root[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #0044CC, #00A8CC);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* Smooth transition for theme change */
html, html * { transition: background-color 0.3s ease, color 0.15s ease, border-color 0.3s ease; }
html a, html button, html .btn { transition: all 0.3s ease; }

/* ============================================
   PAGE TRANSITIONS
   ============================================ */
.page-content {
  animation: pageIn 0.5s ease forwards;
}
.page-content.page-exit {
  animation: pageOut 0.3s ease forwards;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pageOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-12px); }
}

/* ============================================
   HERO ADVANCED ANIMATION (CSS)
   ============================================ */
.hero-video-bg {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
}
.hero-video-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.7) 0%, rgba(10,14,26,0.95) 100%);
  z-index: 1;
}
.hero-anim-layer {
  position: absolute; inset: 0; z-index: 0;
}
/* IDEA 11 · las tres manchas azules borrosas del hero eran el recurso
   más repetido de la web actual: aparecen igual en mil plantillas. Las
   sustituye el tejido de fibra de arriba, que sí dice algo del negocio.
   Se dejan las reglas por si quieres recuperarlas: quita este display. */
.hero-orb {
  display: none;
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4;
  animation: orbFloat 8s ease-in-out infinite;
}
.hero-orb-1 {
  width: 400px; height: 400px; top: -100px; left: -100px;
  background: radial-gradient(circle, rgba(0,102,255,0.5), transparent 70%);
  animation-duration: 10s;
}
.hero-orb-2 {
  width: 300px; height: 300px; bottom: -80px; right: -60px;
  background: radial-gradient(circle, rgba(0,212,255,0.4), transparent 70%);
  animation-duration: 12s; animation-delay: -3s;
}
.hero-orb-3 {
  width: 200px; height: 200px; top: 40%; left: 60%;
  background: radial-gradient(circle, rgba(0,102,255,0.3), transparent 70%);
  animation-duration: 14s; animation-delay: -6s;
}
/* IDEA 11 · aquí había una cuadrícula cuadrada, el fondo por defecto de
   media internet. Ahora es un tejido de hilos en diagonal, que es lo que
   se parece a un tendido de fibra. Sigue siendo CSS puro: cero imágenes,
   cero peso. */
.hero-grid-lines {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(var(--fibra-angulo),
      rgba(0,212,255,0.075) 0 1px, transparent 1px var(--fibra-paso)),
    repeating-linear-gradient(var(--fibra-angulo),
      rgba(0,102,255,0.09) 0 1.5px, transparent 1.5px calc(var(--fibra-paso) * 4));
  animation: fibraCorre 26s linear infinite;
}
@keyframes fibraCorre {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 260px, 0 260px; }
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.05); }
  50% { transform: translate(-20px, 30px) scale(0.95); }
  75% { transform: translate(20px, 10px) scale(1.02); }
}
@keyframes gridScroll {
  from { transform: translate(0, 0); }
  to { transform: translate(60px, 60px); }
}

/* ============================================
   CHATBOT WIDGET
   ============================================ */
.chatbot-toggle {
  position: fixed; bottom: 24px; right: 24px; z-index: 9998;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,102,255,0.5);
  transition: var(--transition);
  animation: chatPulse 3s ease-in-out infinite;
}
.chatbot-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(0,102,255,0.6); }
.chatbot-toggle.hidden { display: none; }
@keyframes chatPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,102,255,0.5); }
  50% { box-shadow: 0 4px 20px rgba(0,102,255,0.5), 0 0 0 12px rgba(0,102,255,0.1); }
}

.chatbot-window {
  position: fixed; bottom: 100px; right: 24px; z-index: 9999;
  width: 380px; max-height: 520px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,102,255,0.1);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transform: translateY(20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.chatbot-window.open {
  opacity: 1; pointer-events: all; transform: translateY(0) scale(1);
}
.chatbot-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  background: var(--gradient); color: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.chatbot-header-info { display: flex; align-items: center; gap: 12px; }
.chatbot-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.chatbot-header-name { font-weight: 700; font-size: 0.95rem; }
.chatbot-header-status { font-size: 0.72rem; opacity: 0.8; }
.chatbot-close {
  background: rgba(255,255,255,0.15); border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; font-size: 0.9rem;
  transition: var(--transition);
}
.chatbot-close:hover { background: rgba(255,255,255,0.3); }

.chatbot-messages {
  flex: 1; padding: 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 300px; max-height: 350px;
}
.chat-msg {
  max-width: 85%; padding: 12px 16px;
  border-radius: 16px; font-size: 0.88rem; line-height: 1.5;
  animation: chatMsgIn 0.3s ease forwards;
}
.chat-msg.bot {
  background: rgba(0,102,255,0.1); border: 1px solid rgba(0,102,255,0.15);
  align-self: flex-start; border-bottom-left-radius: 4px;
  color: var(--text);
}
.chat-msg.user {
  background: var(--gradient); color: #fff;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-options {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 16px 16px;
}
.chat-option-btn {
  padding: 8px 16px; border-radius: 50px;
  background: rgba(0,102,255,0.08); border: 1px solid rgba(0,102,255,0.25);
  color: var(--primary-light); font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: var(--transition);
}
.chat-option-btn:hover {
  background: rgba(0,102,255,0.15); border-color: var(--primary);
  color: var(--accent);
}

.chat-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 16px; align-self: flex-start;
}
.chat-typing-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted); animation: typingBounce 1.4s ease-in-out infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

@media (max-width: 480px) {
  .chatbot-window {
    width: calc(100vw - 16px); right: 8px; bottom: 90px;
    max-height: 70vh;
  }
}

/* ============================================================
   MOVIMIENTO SYNCROTECH  ·  T / F / I / S / V / R
   Bloque añadido: todo lo nuevo vive aquí para poder revertirlo
   de una sola pieza. No modifica reglas anteriores.
   ============================================================ */

/* ---- S-03 · Transición nativa entre páginas ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .18s ease both; }
::view-transition-new(root) { animation: vtIn .3s ease both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }

/* ---- T-01 · Titular letra por letra ---- */
.split .wd { display: inline-block; white-space: nowrap; }
/* titulares con degradado: el clip va en cada palabra, no en el <h1> */
.split-block { animation: chIn .55s cubic-bezier(.2,.7,.3,1) both; }
.split .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em) rotate(2deg);
  animation: chIn .42s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes chIn { to { opacity: 1; transform: none; } }

/* ---- T-02 · Rotador de palabras ---- */
.rot {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  /* la altura tiene que igualar la línea completa o se cortan
     los rasgos que bajan: g, j, p, q, y */
  line-height: 1.4;
  height: 1.4em;
}
.rot > span {
  grid-area: 1 / 1;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(105%);
  transition: transform .55s cubic-bezier(.2,.7,.3,1), opacity .4s ease;
}
.rot > span.on  { opacity: 1; transform: none; }
.rot > span.out { opacity: 0; transform: translateY(-105%); }

/* ---- T-03 · Barrido de luz sobre el wordmark del loader ---- */
.brand-sweep { position: relative; display: inline-block; }
.brand-sweep::after {
  content: '';
  position: absolute; inset: 0;
  -webkit-mask: url('../assets/img/logo-nombre.png') center / contain no-repeat;
  mask: url('../assets/img/logo-nombre.png') center / contain no-repeat;
  background: linear-gradient(100deg, transparent 38%, rgba(180,235,255,.95) 50%, transparent 62%);
  background-size: 320% 100%;
  animation: brandSweep 3.6s ease-in-out .9s infinite;
  pointer-events: none;
}
@keyframes brandSweep {
  0%        { background-position: 190% 0; }
  55%, 100% { background-position: -90% 0; }
}

/* ---- F-02 · Aurora de gradiente ---- */
.hero-aurora {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.hero-aurora i {
  position: absolute; display: block;
  width: 58%; height: 150%;
  border-radius: 50%;
  filter: blur(52px);
  opacity: .38;
  animation: auroraDrift 18s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-aurora i:nth-child(1) { background: #0066FF; left: -10%; top: -45%; }
.hero-aurora i:nth-child(2) { background: #00D4FF; right: -12%; top: -25%; animation-delay: -6s; }
.hero-aurora i:nth-child(3) { background: #4B3FE4; left: 34%; bottom: -75%; animation-delay: -11s; }
@keyframes auroraDrift { to { transform: translate3d(12%, 10%, 0) scale(1.18); } }
:root[data-theme="light"] .hero-aurora i { opacity: .07; filter: blur(70px); }

/* ---- F-03 · Grano sobre todo el sitio ---- */
body::after {
  content: '';
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 9998;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: grainShift .7s steps(3) infinite;
}
:root[data-theme="light"] body::after { opacity: .07; }
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-5%, 4%); }
  66%  { transform: translate(4%, -5%); }
  100% { transform: translate(0, 0); }
}

/* ---- V-01 · Video de fondo del hero ---- */
.hero-video {
  position: absolute; inset: 0;
  overflow: hidden; z-index: 0;
}
.hero-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.hero-video .hero-video-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,.55) 0%, rgba(10,14,26,.78) 60%, rgba(10,14,26,.95) 100%);
}
:root[data-theme="light"] .hero-video { display: none; }
:root[data-theme="light"] .hero-video .hero-video-veil {
  background: linear-gradient(180deg, rgba(240,242,245,.72), rgba(240,242,245,.94));
}
@media (max-width: 768px) {
  .hero-video video { display: none; }
  .hero-video { background: url('../assets/img/hero-poster.jpg') center / cover; opacity: .5; }
}

/* ---- V-03 · El logo dibujándose en el loader ---- */
.logo-draw { position: relative; display: block; }
.logo-draw img {
  display: block; height: 80px; width: auto;
  animation: logoIn .5s cubic-bezier(.2,.7,.3,1) both;
}
/* El destello sobre la máscara del PNG lo sustituyó la idea 10: ahora
   el logo se dibuja de verdad, trazo a trazo, dentro de
   assets/img/logo-trazo.svg. Se deja la regla por si alguna página
   vieja todavía tuviera el <i>. */
.logo-draw i { display: none; }
@keyframes logoIn {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes logoSpark {
  0%   { top: -20%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.loader-brand-name { opacity: 0; animation: loaderNameIn .45s ease .5s forwards; }
@keyframes loaderNameIn { to { opacity: 1; } }

/* ---- I-01 · Borde de luz en el plan destacado ---- */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.plan-card.featured::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--spin), transparent 0 58%, #00D4FF 76%, #0066FF 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: spinBorder 4.5s linear infinite;
  z-index: 3;
}
@keyframes spinBorder { to { --spin: 360deg; } }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .plan-card.featured::after { display: none; }
}

/* ---- I-02 · Resplandor que sigue al cursor ---- */
.card-glow {
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0,180,255,.20), transparent 62%);
  z-index: 1;
}
.plan-card:hover > .card-glow,
.feature-card:hover > .card-glow,
.testimonial-card:hover > .card-glow { opacity: 1; }
:root[data-theme="light"] .card-glow {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0,102,255,.12), transparent 62%);
}

/* ---- I-03 · Inclinación 3D ---- */
.tilt-scene { perspective: 900px; }
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---- I-04 · Botón magnético ---- */
.magnetic { transition: transform .18s cubic-bezier(.2,.7,.3,1); }

/* ---- I-05 · Esqueletos de carga ---- */
.skeleton {
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.11) 37%, rgba(255,255,255,.04) 63%);
  background-size: 400% 100%;
  animation: skShimmer 1.3s ease infinite;
}
.skeleton + .skeleton { margin-top: 10px; }
.skeleton-title   { height: 18px; max-width: 180px; }
.skeleton-line-sm { max-width: 120px; }
.skeleton-line-md { max-width: 240px; }
:root[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.10) 37%, rgba(0,0,0,.05) 63%);
  background-size: 400% 100%;
}
@keyframes skShimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* ---- S-01 · Barra de progreso de lectura ---- */
#readProgress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 100%;
  background: var(--gradient);
  transform-origin: 0 50%;
  transform: scaleX(var(--read, 0));
  z-index: 1200;
  pointer-events: none;
}
@supports (animation-timeline: scroll(root)) {
  #readProgress {
    transform: scaleX(0);
    animation: readGrow linear both;
    animation-timeline: scroll(root);
  }
  @keyframes readGrow { to { transform: scaleX(1); } }
}

/* ---- S-02 · el reveal lo sigue haciendo el IntersectionObserver de main.js.
   (animation-timeline: view() dejaba secciones altas atascadas en opacidad 0) ---- */

/* ---- S-04 · Pulso de las zonas de cobertura ---- */
.cov-ping {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(0,212,255,.8);
}
.cov-ping::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: covPing 2.6s cubic-bezier(0,.5,.4,1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes covPing {
  from { transform: scale(1); opacity: .85; }
  to   { transform: scale(6); opacity: 0; }
}

/* ---- V-04 · Video con carga diferida ---- */
.lazy-video {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  cursor: pointer;
}
.lazy-video img, .lazy-video video { display: block; width: 100%; height: auto; }
.lazy-video button {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,14,26,.35);
  color: #fff; font-size: 2.4rem;
  transition: var(--transition);
}
.lazy-video button:hover { background: rgba(10,14,26,.15); }
.lazy-video button::before {
  content: '';
  position: absolute;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--gradient);
  opacity: .92;
  z-index: -1;
}

/* ---- R-01 · Menos movimiento para quien lo pide ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .hero-video video,
  .hero-aurora,
  body::after { display: none; }
  .split .ch { opacity: 1; transform: none; }
  .rot { height: auto; }
  .rot > span { opacity: 0; }
  .rot > span:first-child { opacity: 1; transform: none; }
  .rot > span:nth-child(n+2) { display: none; }
  .logo-draw img { opacity: 1; transform: none; }
  .loader-brand-name { opacity: 1; }
}

/* ---- Ajustes de composición del hero con video ---- */
.hero:has(.hero-video) .hero-bg { opacity: .12; }
.hero-rotator {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: -24px 0 34px;
  display: flex; align-items: baseline; gap: .35em;
}
/* el degradado va en cada palabra, no en el contenedor:
   background-clip:text no se hereda a los hijos */
.hero-rotator .rot > span {
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   FONDO UNIFORME
   Todas las secciones usan el mismo color que la parte superior.
   ============================================================ */
body,
.section,
.stats-section,
.cta-section,
.page-header,
footer,
:root[data-theme="light"] .cta-section,
:root[data-theme="light"] [class*="cta"],
:root[data-theme="light"] .stats-section,
:root[data-theme="light"] .page-header,
:root[data-theme="light"] footer,
:root[data-theme="light"] .hero {
  background: var(--bg-dark) !important;
}
.cta-bg,
.page-header-bg { display: none; }
.stats-section,
footer { border-top: 1px solid var(--border); }
.stats-section { border-bottom: 1px solid var(--border); }

/* En modo claro el hero también va plano: sin foto de fondo ni velo */
:root[data-theme="light"] .hero-bg,
:root[data-theme="light"] .hero-overlay,
:root[data-theme="light"] .hero-video-bg { display: none; }
:root[data-theme="light"] .hero-particles { opacity: .5; }

/* El rotador del hero necesita menos tirón hacia arriba en pantallas pequeñas */
@media (max-width: 768px) {
  .hero-rotator { margin: -12px 0 26px; }
}

/* ============================================================
   SERVICIOS
   Página de servicios (Hogar / Negocios) y menú de navegación.
   ============================================================ */

/* ---- Barra de categorías ---- */
.svc-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: 64px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.svc-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.svc-group + .svc-group { border-left: 1px solid var(--border); padding-left: 20px; }
.svc-group-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.svc-group-title i { font-size: 1.05rem; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-chip {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: .85rem; font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.svc-chip:hover { color: var(--text); border-color: rgba(0,102,255,.45); }
.svc-chip.active {
  color: #fff;
  background: var(--gradient);
  border-color: transparent;
}
:root[data-theme="light"] .svc-chip.active { color: #fff; }
@media (max-width: 760px) {
  .svc-nav { grid-template-columns: 1fr; gap: 18px; padding: 18px; margin-bottom: 44px; }
  .svc-group + .svc-group { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 18px; }
}

/* ---- Cada categoría ---- */
.svc-cat { scroll-margin-top: 96px; }
.svc-cat + .svc-cat { margin-top: 88px; }
.svc-cat-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.svc-eyebrow {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.svc-eyebrow::before,
.svc-eyebrow::after {
  content: ''; height: 1px; width: 26px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.svc-eyebrow::after { background: linear-gradient(90deg, var(--accent), transparent); }
.svc-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 900; letter-spacing: -.02em;
  margin-bottom: 12px;
  color: var(--text);
  text-wrap: balance;
}
.svc-lead { color: var(--text-muted); line-height: 1.7; font-size: .98rem; }
.svc-note {
  text-align: center;
  color: var(--text-dim);
  font-size: .85rem;
  margin-top: 28px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* ---- Franja de televisión ---- */
.tv-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 28px;
  padding: 28px 32px;
  margin-bottom: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(0,102,255,.10), rgba(0,212,255,.04));
}
.tv-strip-head { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.tv-count {
  font-size: 3.2rem; font-weight: 900; line-height: 1; letter-spacing: -.03em;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tv-count-label {
  font-size: .82rem; color: var(--text-muted); line-height: 1.4;
  text-transform: uppercase; letter-spacing: .08em;
}
.tv-genres { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.tv-genre {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 50px;
  background: rgba(0,102,255,.08);
  border: 1px solid var(--border);
  font-size: .84rem; color: var(--text-muted);
}
.tv-genre i { color: var(--accent); font-size: 1rem; }
@media (max-width: 700px) {
  .tv-strip { padding: 22px; gap: 20px; }
  .tv-count { font-size: 2.6rem; }
}

/* ---- Menú de servicios en la barra de navegación ---- */
.mega-menu-panel.mega-servicios { min-width: 620px; }
.mega-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mega-col-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.mega-col + .mega-col { border-left: 1px solid var(--border); padding-left: 20px; }
.mega-menu-panel.mega-servicios .mega-menu-item { padding: 11px 16px; }
@media (max-width: 1080px) {
  .mega-menu-panel.mega-servicios { min-width: 520px; }
}

/* ---- Submenú de servicios en el menú móvil ---- */
.mobile-sub {
  display: flex; flex-direction: column; gap: 2px;
  margin: -6px 0 10px 18px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}
.mobile-sub-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  margin: 10px 0 4px;
}
.mobile-sub a {
  font-size: .95rem; color: var(--text-muted);
  padding: 5px 0; text-decoration: none;
}
.mobile-sub a:hover { color: var(--text); }

/* ============================================================
   VERIFICADOR DE COBERTURA
   ============================================================ */
.cov-wrap { padding: 8px 0 72px; }
.cov-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 980px) {
  .cov-grid { grid-template-columns: 1fr; }
}

/* ---- Panel ---- */
.cov-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
  position: sticky; top: 92px;
}
@media (max-width: 980px) { .cov-panel { position: static; } }

.cov-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.cov-step + .cov-search { margin-bottom: 24px; }
.cov-step-n {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff; font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.cov-step h3 { font-size: .98rem; font-weight: 700; margin-bottom: 2px; }
.cov-step p { font-size: .85rem; color: var(--text-muted); line-height: 1.5; }

/* ---- Buscador ---- */
.cov-search { position: relative; display: flex; align-items: center; margin-bottom: 22px; }
.cov-search > i {
  position: absolute; left: 14px;
  color: var(--text-dim); font-size: 1.05rem; pointer-events: none;
}
.cov-search input {
  width: 100%;
  padding: 13px 48px 13px 40px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: .92rem;
  font-family: var(--font);
  transition: var(--transition);
}
.cov-search input:focus { outline: none; border-color: var(--primary); background: var(--bg-card); }
.cov-search input::placeholder { color: var(--text-dim); }
#covGeo {
  position: absolute; right: 6px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,102,255,.12);
  border-radius: 8px; color: var(--accent);
  transition: var(--transition);
}
#covGeo:hover { background: rgba(0,102,255,.24); }
#covGeo.cargando i { animation: rotate 1s linear infinite; }

.cov-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  z-index: 1200;
  max-height: 260px; overflow-y: auto;
}
.cov-results li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 8px;
  font-size: .86rem; color: var(--text-muted);
  cursor: pointer; line-height: 1.4;
}
.cov-results li:hover { background: rgba(0,102,255,.10); color: var(--text); }
.cov-results li i { color: var(--accent); margin-top: 2px; }
.cov-results .cov-empty { cursor: default; color: var(--text-dim); }

/* ---- Hogar / Negocio ---- */
.cov-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 5px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 50px;
  margin-bottom: 20px;
}
.cov-seg-btn {
  padding: 9px 12px; border-radius: 50px;
  background: transparent; color: var(--text-muted);
  font-size: .88rem; font-weight: 600; font-family: var(--font);
  transition: var(--transition);
}
.cov-seg-btn.active { background: var(--gradient); color: #fff; }

/* ---- Resultado en vivo ---- */
.cov-result {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  background: var(--bg-card-2);
  transition: border-color .25s ease, background .25s ease;
}
.cov-result-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.02rem; font-weight: 700;
  margin-bottom: 10px;
}
.cov-result-head i { font-size: 1.4rem; }
.cov-zone { font-size: .9rem; color: var(--text-muted); line-height: 1.5; }
.cov-nota { font-size: .84rem; color: var(--text-dim); line-height: 1.6; margin-top: 10px; }

.cov-ok      { border-color: rgba(0,214,143,.45); background: rgba(0,214,143,.07); }
.cov-ok      .cov-result-head { color: var(--success); }
.cov-soon    { border-color: rgba(255,184,0,.45); background: rgba(255,184,0,.07); }
.cov-soon    .cov-result-head { color: var(--warning); }
.cov-near    { border-color: rgba(255,184,0,.35); background: rgba(255,184,0,.05); }
.cov-near    .cov-result-head { color: var(--warning); }
.cov-no      { border-color: rgba(255,71,87,.35); background: rgba(255,71,87,.06); }
.cov-no      .cov-result-head { color: var(--danger); }
.cov-checking .cov-result-head { color: var(--text-muted); }
.cov-checking .cov-result-head i { animation: rotate 1s linear infinite; }

.cov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cov-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 50px;
  font-size: .82rem; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.cov-chip i { font-size: 1rem; }
.cov-chip-fibra { color: var(--accent); border-color: rgba(0,212,255,.4); }
.cov-chip-inalambrico { color: var(--success); border-color: rgba(0,214,143,.4); }

.cov-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cov-actions .btn { flex: 1 1 auto; justify-content: center; font-size: .88rem; padding: 11px 16px; }

.cov-legal {
  font-size: .74rem; color: var(--text-dim);
  line-height: 1.6; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--border);
}

/* ---- Mapa ---- */
.cov-map-box {
  position: relative;
  height: 620px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
@media (max-width: 980px) { .cov-map-box { height: 460px; } }
#coberturaMap { width: 100%; height: 100%; z-index: 1; }

.cov-map-top {
  position: absolute; top: 14px; left: 14px; right: 14px;
  z-index: 1000;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.cov-addr {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: .85rem; color: var(--text-muted);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cov-addr i { color: var(--accent); font-size: 1rem; flex-shrink: 0; }

/* ---- Módulo flotante: velocidad disponible en la zona ---- */
.cov-banner {
  width: 100%; max-width: 420px;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0,102,255,.18), rgba(0,212,255,.09));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(0,212,255,.4);
  box-shadow: 0 14px 34px rgba(0,70,200,.24), 0 2px 10px rgba(0,0,0,.18);
  transform: translateY(-16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .35s ease, background .3s ease, border-color .3s ease;
}
.cov-banner.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cov-banner-icon {
  position: relative; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient); color: #fff; font-size: 1.35rem;
  box-shadow: 0 6px 18px rgba(0,102,255,.4);
}
.cov-banner-dot {
  position: absolute; top: -3px; right: -3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 2px var(--bg-card);
  animation: cov-pulse-dot 1.7s ease-in-out infinite;
}
@keyframes cov-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .55; }
}
.cov-banner-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cov-banner-speed {
  font-size: 1.22rem; font-weight: 800; line-height: 1.15;
  color: var(--text); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cov-banner-speed small { font-size: .68rem; font-weight: 700; color: var(--text-muted); margin-left: 3px; text-transform: uppercase; letter-spacing: .04em; }
.cov-banner-place {
  font-size: .8rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cov-banner.cov-banner-soon {
  background: linear-gradient(135deg, rgba(255,184,0,.2), rgba(255,184,0,.08));
  border-color: rgba(255,184,0,.45);
}
.cov-banner.cov-banner-soon .cov-banner-icon {
  background: linear-gradient(135deg, #FFB800, #FF8A00);
  box-shadow: 0 6px 18px rgba(255,184,0,.4);
}
.cov-banner.cov-banner-soon .cov-banner-dot { background: var(--warning); }
@media (max-width: 560px) {
  .cov-banner { max-width: none; padding: 10px 14px; }
  .cov-banner-icon { width: 38px; height: 38px; font-size: 1.15rem; }
  .cov-banner-speed { font-size: 1.05rem; }
}

.map-legend {
  position: absolute; bottom: 18px; left: 18px;
  z-index: 1000;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.map-legend h4 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
.legend-item { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--text); margin-bottom: 7px; }
.legend-item:last-child { margin-bottom: 0; }
.legend-color { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.legend-soon { background: repeating-linear-gradient(45deg, #FFB800 0 3px, transparent 3px 6px); border: 1px solid #FFB800; }

/* el pin de Leaflet, en los colores de la marca */
.leaflet-marker-icon { filter: hue-rotate(190deg) saturate(1.4); }

/* ============================================================
   TEST DE VELOCIDAD
   ============================================================ */
.st-wrap {
  max-width: 720px; margin: 36px auto 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px 28px;
  box-shadow: var(--shadow-card);
}
@media (max-width: 560px) { .st-wrap { padding: 24px 18px 20px; } }

.st-aguja-caja { position: relative; max-width: 400px; margin: 0 auto; }
#stAguja { width: 100%; display: block; }

.st-fase {
  text-align: center;
  font-size: .9rem; font-weight: 600;
  color: var(--text-muted);
  min-height: 22px;
  margin: 4px 0 20px;
  letter-spacing: .01em;
}

.st-btn-fila { display: flex; justify-content: center; margin-bottom: 24px; }
#stBtn { min-width: 230px; justify-content: center; }
#stBtn.cargando { opacity: .65; cursor: progress; }
#stBtn.cargando i { animation: rotate 1s linear infinite; }

/* ---- rejilla de resultados ---- */
.st-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  opacity: .45; transition: opacity .4s ease;
}
.st-grid.listo { opacity: 1; }
@media (max-width: 560px) { .st-grid { grid-template-columns: repeat(2, 1fr); } }

.st-dato {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
}
.st-dato-tit {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.st-dato-tit i { font-size: .95rem; }
.st-dato-val {
  font-size: 1.32rem; font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.st-dato-val small {
  font-size: .62rem; font-weight: 700;
  color: var(--text-muted);
  margin-left: 3px; text-transform: uppercase; letter-spacing: .04em;
}
.st-dato-bajada .st-dato-tit i { color: var(--accent); }
.st-dato-subida .st-dato-tit i { color: var(--success); }

/* ---- veredicto ---- */
.st-veredicto {
  margin-top: 18px; padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: .87rem; line-height: 1.55;
  display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--text-muted);
}
.st-veredicto:empty { display: none; }
.st-veredicto i { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.st-veredicto.ok { border-color: rgba(0,214,143,.4); background: rgba(0,214,143,.07); }
.st-veredicto.ok i { color: var(--success); }
.st-veredicto.bajo { border-color: rgba(255,184,0,.45); background: rgba(255,184,0,.07); }
.st-veredicto.bajo i { color: var(--warning); }
.st-veredicto strong { color: var(--text); }

.st-nota {
  font-size: .76rem; color: var(--text-dim);
  line-height: 1.6; text-align: center;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ---- mapa dentro del modal de contratar ---- */
.ct-search { margin-bottom: 12px; }
#ctGeo {
  position: absolute; right: 6px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,102,255,.12);
  border-radius: 8px; color: var(--accent);
  transition: var(--transition);
}
#ctGeo:hover { background: rgba(0,102,255,.24); }
#ctGeo.cargando i { animation: rotate 1s linear infinite; }
#ctCobertura { margin-top: 12px; }
.ct-aviso-plan {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 12px; padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,184,0,.10);
  border: 1px solid rgba(255,184,0,.4);
  color: var(--text-muted);
  font-size: .83rem; line-height: 1.5;
}
.ct-aviso-plan i { color: var(--warning); font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   DESARROLLO Y MÁS
   ============================================================ */
.dev-nav {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin: 0 0 48px;
}
.dev-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 50px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-muted); font-size: .9rem; font-weight: 600;
  transition: var(--transition);
}
.dev-chip:hover, .dev-chip.active {
  color: var(--text); border-color: var(--accent);
  background: rgba(0,102,255,.10);
}
.dev-chip i { font-size: 1.1rem; color: var(--accent); }

/* ---- cabecera de categoría ---- */
.dev-cat { margin-bottom: 72px; scroll-margin-top: 100px; }
.dev-cat-head {
  display: flex; align-items: flex-start; gap: 18px;
  margin-bottom: 28px; padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.dev-cat-icon {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient); color: #fff; font-size: 1.7rem;
  box-shadow: 0 8px 22px rgba(0,102,255,.35);
}
.dev-cat-title { font-size: 1.7rem; font-weight: 800; margin-bottom: 6px; }
.dev-cat-sub {
  font-size: .95rem; color: var(--text-muted);
  line-height: 1.6; max-width: 70ch;
}
@media (max-width: 560px) {
  .dev-cat-title { font-size: 1.35rem; }
  .dev-cat-icon { width: 46px; height: 46px; font-size: 1.4rem; }
}

/* ---- tarjetas ---- */
.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
.dev-card {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.dev-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,212,255,.45);
  box-shadow: 0 16px 40px rgba(0,60,160,.20);
}
.dev-card-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,102,255,.12);
  border: 1px solid rgba(0,212,255,.3);
  color: var(--accent); font-size: 1.35rem;
  margin-bottom: 16px;
}
.dev-card-title { font-size: 1.08rem; font-weight: 700; margin-bottom: 9px; }
.dev-card-desc {
  font-size: .89rem; color: var(--text-muted);
  line-height: 1.65; margin-bottom: 16px;
}
.dev-card-lista {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.dev-card-lista li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .85rem; color: var(--text-muted); line-height: 1.5;
}
.dev-card-lista i { color: var(--success); font-size: .95rem; margin-top: 2px; flex-shrink: 0; }
.dev-card-btn { width: 100%; justify-content: center; font-size: .87rem; }

/* ---- por qué nosotros ---- */
.dev-porque, .dev-pasos {
  margin: 0 0 64px;
  padding: 40px 34px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
@media (max-width: 560px) { .dev-porque, .dev-pasos { padding: 28px 20px; } }
.dev-porque-titulo {
  font-size: 1.45rem; font-weight: 800;
  text-align: center; margin-bottom: 30px;
}
.dev-porque-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px;
}
.dev-porque-item { text-align: center; }
.dev-porque-item i {
  font-size: 2rem; color: var(--accent); display: block; margin-bottom: 12px;
}
.dev-porque-item h4 { font-size: 1rem; font-weight: 700; margin-bottom: 7px; }
.dev-porque-item p { font-size: .86rem; color: var(--text-muted); line-height: 1.6; }

/* ---- pasos ---- */
.dev-pasos-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px;
}
.dev-pasos-lista li { display: flex; gap: 14px; align-items: flex-start; }
.dev-paso-n {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient); color: #fff;
  font-size: .95rem; font-weight: 800;
}
.dev-pasos-lista h4 { font-size: .98rem; font-weight: 700; margin-bottom: 5px; }
.dev-pasos-lista p { font-size: .85rem; color: var(--text-muted); line-height: 1.6; }

/* ---- llamada final ---- */
.dev-cta {
  text-align: center; padding: 52px 30px;
  background: linear-gradient(135deg, rgba(0,102,255,.16), rgba(0,212,255,.07));
  border: 1px solid rgba(0,212,255,.35);
  border-radius: var(--radius);
}
.dev-cta h2 { font-size: 1.65rem; font-weight: 800; margin-bottom: 10px; }
.dev-cta p { font-size: .96rem; color: var(--text-muted); margin-bottom: 26px; }
.dev-cta-botones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- acceso al test de velocidad en la barra superior ---- */
/* Ocupa el lugar donde antes estaba el botón de tema claro/oscuro.
   El tema sigue cambiando solo según la hora del día. */
.nav-velocidad {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: 50px;
  background: rgba(0,102,255,.10);
  border: 1px solid rgba(0,212,255,.35);
  color: var(--accent);
  font-size: .85rem; font-weight: 600;
  white-space: nowrap;
  transition: var(--transition);
}
.nav-velocidad:hover {
  background: rgba(0,102,255,.20);
  border-color: var(--accent);
  color: var(--text);
}
.nav-velocidad i { font-size: 1.15rem; }
/* en pantallas medianas se queda solo el ícono, para no apretar la barra */
@media (max-width: 1100px) {
  .nav-velocidad span { display: none; }
  .nav-velocidad { padding: 0; width: 40px; justify-content: center; border-radius: 50%; }
}
/* en modo claro el celeste no contrasta contra el fondo blanco */
:root[data-theme="light"] .nav-velocidad {
  color: var(--primary-text);
  background: rgba(0,102,255,.07);
  border-color: rgba(0,102,255,.30);
}
:root[data-theme="light"] .nav-velocidad:hover {
  color: #003fa3;
  background: rgba(0,102,255,.15);
  border-color: var(--primary);
}

/* ============================================================
   Giro para los botones que están "cargando".
   Lo usan estado.js, referidos.js y recuperar.js.
   ============================================================ */
@keyframes girar { to { transform: rotate(360deg); } }

/* ============================================================
   INVITACIÓN A INSTALAR LA APP (js/pwa.js)
   ============================================================ */
.pwa-invita {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9500;
  display: flex; align-items: center; gap: 14px;
  max-width: 480px; margin: 0 auto;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  transform: translateY(130%);
  opacity: 0;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
.pwa-invita.visible { transform: none; opacity: 1; }
.pwa-invita img { border-radius: 10px; flex-shrink: 0; }
.pwa-texto { flex: 1; min-width: 0; }
.pwa-texto strong { display: block; font-size: .93rem; margin-bottom: 2px; }
.pwa-texto span { font-size: .78rem; color: var(--text-muted); line-height: 1.45; display: block; }
.pwa-botones { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.pwa-no {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: .76rem; padding: 4px 6px;
}
.pwa-no:hover { color: var(--text); }

@media (max-width: 420px) {
  .pwa-invita { gap: 10px; padding: 12px; }
  .pwa-texto span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-invita { transition: opacity .2s ease; transform: none; }
}

/* ============================================================
   ACCESIBILIDAD Y TECLADO
   Antes no había una sola regla de foco en todo este archivo:
   quien navegaba con Tab recorría el menú, los planes y el
   formulario de contratar sin ver dónde estaba parado.
   ============================================================ */

/* Solo aparece al navegar con teclado, no al hacer clic con el mouse. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sobre fondos claros el acento se pierde; ahí usamos el azul fuerte. */
:root[data-theme="light"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--primary);
}

/* Los campos también marcan el borde, no solo el contorno. */
.form-control:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .18);
}

/* Quitamos el contorno por defecto solo cuando NO es navegación por teclado. */
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* ---- saltar al contenido ----
   El menú tiene más de veinte enlaces con submenús. Sin esto, quien usa
   teclado pasa por todos en cada página antes de llegar a lo que vino a leer. */
.salta-al-contenido {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 10000;
  background: var(--primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .18s ease;
}
.salta-al-contenido:focus {
  top: 0;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* el destino no debe dibujar un contorno al recibir el salto */
[id="contenido"]:focus { outline: none; }

/* ---- tamaño mínimo para tocar con el dedo ----
   .btn-sm medía unos 38 px de alto. El mínimo cómodo en móvil son 44,
   y se usa en sitios donde importa: volver, copiar, filtrar. */
@media (pointer: coarse) {
  .btn-sm,
  .tbl-btn,
  .filter-btn,
  .btn-copiar,
  .social-link {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-sm { padding: 12px 20px; }
  .modal-close,
  .mobile-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================================
   IMPRESIÓN
   Dos páginas están hechas para guardarse: sla.html y la
   confirmación de pago. Antes salían con el menú, el botón de
   WhatsApp y el chatbot encima, y el fondo oscuro se comía la tinta.
   ============================================================ */
@media print {
  :root {
    --bg-dark: #fff;
    --bg-card: #fff;
    --text: #111;
    --text-light: #222;
    --text-muted: #555;
    --border: #ccc;
  }

  body {
    background: #fff !important;
    color: #111 !important;
    font-size: 11.5pt;
  }

  /* fuera todo lo que no es el contenido */
  nav#navbar,
  .mobile-menu,
  .nav-hamburger,
  footer,
  .whatsapp-float,
  .chatbot-toggle,
  .chatbot-window,
  #chatbotToggle,
  #chatbotWindow,
  .toast-container,
  .page-loader,
  .pwa-invita,
  .salta-al-contenido,
  .breadcrumbs,
  .bg-orbs,
  video,
  .btn,
  button {
    display: none !important;
  }

  /* que las tarjetas se lean sobre papel */
  .card,
  .dash-panel,
  .sla-bloque,
  .st-wrap {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  /* los degradados sobre texto lo dejan invisible al imprimir */
  .balance-monto,
  .section-title,
  .page-title,
  h1, h2, h3 {
    background: none !important;
    -webkit-text-fill-color: #111 !important;
    color: #111 !important;
  }

  /* al imprimir, un enlace sin su dirección no sirve de nada */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
    word-break: break-all;
  }
  a[href^="#"]::after,
  a[href^="mailto"]::after { content: ""; }

  /* nada de cortar una tabla o un título a mitad de página */
  table, tr, .fila-dato { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  @page { margin: 1.6cm; }
}

/* ============================================================
   IDEA 01 · LA TARJETA DE PLAN
   Es el elemento que más se repite en el sitio (26 veces) y el
   que decide una venta. Antes todo estaba centrado y competía
   por atención. Ahora la mirada tiene un orden:
   identidad arriba · número grande · precio abajo · un botón.
   ============================================================ */
.plan-card {
  text-align: left;
  padding: 22px 20px 20px;
  cursor: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-card > .featured-label {
  position: absolute; top: 12px; right: 12px;
  margin-bottom: 0; z-index: 2;
  font-size: 0.62rem; padding: 3px 11px;
}
/* Si en la rejilla hay una tarjeta destacada, TODAS bajan el mismo
   tanto. Si sólo bajara la destacada, su precio y su botón dejarían de
   alinearse con los de al lado, que es justo lo que se estaba
   arreglando. */
.plans-grid:has(.plan-card.featured) .plan-card { padding-top: 40px; }

/* --- la cresta: quién es este plan --- */
.plan-cresta { display: flex; align-items: center; gap: 11px; }
.plan-marca {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.18);
  transition: var(--transition);
}
.plan-marca-svg {
  width: 28px; height: 28px;
  fill: none; stroke: var(--accent);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.plan-card:hover .plan-marca {
  background: rgba(0, 212, 255, 0.14);
  border-color: rgba(0, 212, 255, 0.35);
}
.plan-ident { min-width: 0; }
.plan-nombre {
  font-size: 1rem; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2;
  color: var(--text);
}
.plan-tipo {
  font-size: 0.72rem; color: var(--text-dim);
  letter-spacing: 0.03em; margin-top: 2px;
}

/* --- la cifra: sin degradado encima --------------------------------
   Un texto con degradado se imprime en blanco, baja el contraste y
   obliga al navegador a pintar cada cifra como si fuera una imagen.
   tabular-nums hace que el 1 ocupe lo mismo que el 3, así que 111 no
   queda más angosto que 300 y la rejilla no baila.
   ------------------------------------------------------------------ */
.plan-vel { display: flex; align-items: baseline; gap: 7px; }
.plan-vel-n {
  font-size: clamp(2.2rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 0.95;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
}
.plan-vel-u { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }

/* --- la promesa que sí se puede comprobar --- */
.plan-etiqueta {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--accent);
  background: rgba(0, 212, 255, 0.09);
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-radius: 50px; padding: 4px 10px;
  margin-top: -6px;
}
.plan-etiqueta svg {
  width: 11px; height: 11px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round;
}

/* --- la barra: dónde cae este plan entre el más lento y el más rápido
   "300 Mbps" no le dice nada a quien no sabe de internet.
   Ver que está a un tercio del camino entre 75 y 1000, sí.
   ------------------------------------------------------------------ */
.plan-barra { margin-top: -2px; }
.plan-barra-riel {
  height: 5px; border-radius: 50px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.plan-barra-lleno {
  display: block; height: 100%;
  border-radius: 50px; background: var(--gradient);
}
.plan-barra-pie {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: 0.65rem; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* --- el precio, al final, que es donde se decide --- */
.plan-precio-fila {
  display: flex; align-items: baseline; gap: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.plan-precio {
  font-size: 1.5rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.plan-periodo { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }

/* --- tres beneficios, no cinco ---
   "Soporte 24/7" y "velocidad simétrica" están en todos los planes de
   la familia: repetirlos en cada tarjeta no ayuda a elegir. Lo que se
   repite va una sola vez, debajo de la rejilla (.plan-comun).
   ------------------------------------------------------------------ */
.plan-features { text-align: left; margin: 0; display: grid; gap: 2px; }
.plan-feature {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 5px 0; border: none;
  font-size: 0.83rem; line-height: 1.4; color: var(--text-muted);
}
.plan-check {
  width: 14px; height: 14px; margin-top: 3px; flex: none;
  fill: none; stroke: var(--success);
  stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
}
.plan-btn { margin-top: auto; }

.plan-comun {
  margin-top: 20px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 0.82rem; color: var(--text-dim); text-align: center;
}
.plan-comun svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: var(--accent);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 480px) {
  .plan-vel-n { font-size: 2.5rem; }
  .plan-card { padding: 20px 18px 18px; }
}

/* ============================================================
   IDEA 03 · LOS TÍTULOS DE SECCIÓN
   El acento se va del título a la línea de encima. El cian sigue
   estando —es la marca— pero como acento, no encima de lo que hay
   que leer.
   ============================================================ */
.t-eyebrow {
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.t-sub {
  color: var(--text-muted);
  font-size: 0.98rem; line-height: 1.7;
  max-width: 62ch;
  margin-bottom: 40px;
}
.text-center .t-sub { margin-left: auto; margin-right: auto; }

/* ============================================================
   IDEA 05 · LOS DETALLES QUE SE SIENTEN SIN VERSE
   ============================================================ */

/* Cifras que no bailan: en cualquier columna de números.
   Con la tipografía normal el 1 es más angosto que el 3, así que una
   lista de precios queda desalineada y los contadores tiemblan. */
.cifra,
.stat-number,
.plan-price,
.balance-monto,
td.numero, .numero {
  font-variant-numeric: tabular-nums;
}

/* Botones que responden al dedo: se levanta al pasar, se hunde al
   pulsar. Con teclado el anillo de foco ya lo pone la regla global. */
.btn:active,
.plan-btn:active { transform: translateY(1px) scale(0.985); }
.plan-btn:focus-visible { outline-offset: 4px; }

/* Esqueleto con la forma de una tarjeta, para cuando lo que llega es
   una lista y no una línea suelta. */
.skeleton-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--bg-card);
}
.skeleton-card .skeleton:last-child { max-width: 60%; }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* ============================================================
   IDEA 04 · DÓNDE VAN LAS FOTOS
   El sitio tiene 106 etiquetas <img> y las 106 son el logo: cero
   fotografías. Estos huecos están listos y medidos. Mientras no
   exista el archivo, el hueco NO se ve: nada de marcos vacíos ni de
   imágenes rotas en un sitio publicado. En cuanto pongas la foto en
   assets/fotos/ con el nombre que dice el LÉEME, aparece sola.
   ============================================================ */
.foto-slot { display: none; }
.foto-slot.tiene-foto { display: block; }
.foto-slot img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.foto-slot figcaption {
  margin-top: 10px;
  font-size: 0.8rem; color: var(--text-dim);
}
.foto-slot--ancha  { aspect-ratio: 16 / 9; }
.foto-slot--cuadro { aspect-ratio: 1 / 1;  max-width: 520px; margin-inline: auto; }
.foto-slot--media  { aspect-ratio: 4 / 3;  max-width: 640px; margin-inline: auto; }
.foto-slot figcaption { text-align: center; }
.foto-banda { padding: 20px 0 60px; }
.team-avatar.tiene-foto { text-indent: -9999px; overflow: hidden; }

/* Sólo para quien navega con lector de pantalla: un esqueleto es una
   forma, y una forma no se lee en voz alta. */
.sr-solo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* La franja de confianza: de dónde sale cada número. */
.franja-fuente {
  margin-top: 22px; text-align: center;
  font-size: 0.78rem; color: var(--text-dim);
}
.franja-fuente a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
#franjaConfianza .stat-number .skeleton {
  height: 30px; max-width: 92px; border-radius: 8px;
}

/* ============================================================
   IDEA 06 · LA SIMETRÍA, DIBUJADA
   La ventaja real sobre la competencia es que la subida va igual
   que la bajada. Hasta ahora eso aparecía como "↑↓ Simétrico" en
   letra pequeña, y la mayoría de la gente no sabe qué significa.
   Dos pares de barras lo explican sin una palabra técnica.
   ============================================================ */
.sim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.sim-caja {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 24px 22px;
}
.sim-nosotros { border-color: rgba(0, 212, 255, 0.35); }
.sim-otros    { opacity: 0.85; }
.sim-tit {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.sim-nosotros .sim-tit { color: var(--accent-text); }
.sim-tit::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none;
}
.sim-par { display: grid; gap: 12px; }
.sim-fila {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center; gap: 12px;
}
.sim-lbl { font-size: 0.78rem; color: var(--text-muted); }
.sim-riel {
  height: 14px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.sim-lleno {
  display: block; height: 100%; border-radius: 7px;
  background: var(--gradient);
  transform-origin: 0 50%;
}
.sim-otros .sim-lleno { background: linear-gradient(135deg, #55627a, #7d8aa3); }
.sim-val {
  font-size: 0.82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 74px; text-align: right;
}
.sim-nota {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.85rem; line-height: 1.6; color: var(--text-muted);
}
.sim-pie {
  margin-top: 20px; text-align: center;
  font-size: 0.78rem; color: var(--text-dim);
  max-width: 66ch; margin-inline: auto;
}
/* las barras crecen cuando la sección entra en pantalla */
.sim-lleno { animation: simCrecer .9s cubic-bezier(.2,.7,.3,1) both; }
.sim-caja:nth-child(2) .sim-lleno { animation-delay: .18s; }
@keyframes simCrecer { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .sim-lleno { animation: none; }
}

/* ============================================================
   IDEA 07 · "¿Y ESO PARA QUÉ ME ALCANZA?"
   300 Mbps no le dice nada a nadie. Es la pregunta que más recibe
   cualquier vendedor de internet.
   ============================================================ */
.calc {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 30px 26px 24px;
  margin-top: 36px;
}
.calc-plan {
  font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text); text-align: center;
  margin-bottom: 6px;
}
.calc-top {
  display: flex; align-items: baseline; justify-content: center; gap: 9px;
  margin-bottom: 22px;
}
.calc-n {
  font-size: clamp(3rem, 7vw, 4.2rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.calc-u { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); }

.calc input[type="range"] {
  width: 100%; margin: 0; -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 50px; background: rgba(255, 255, 255, 0.09);
}
.calc input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 50px; background: rgba(255, 255, 255, 0.09);
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9px;
  border-radius: 50%; border: 3px solid var(--bg-card);
  background: var(--gradient);
  box-shadow: 0 2px 12px rgba(0, 102, 255, 0.5);
}
.calc input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%; border: 3px solid var(--bg-card);
  background: #0066FF;
  box-shadow: 0 2px 12px rgba(0, 102, 255, 0.5);
}
.calc-marcas {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-size: 0.7rem; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.calc-item {
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  padding: 20px 14px;
  background: rgba(255, 255, 255, 0.02);
}
.calc-item svg {
  width: 24px; height: 24px; margin-bottom: 10px;
  fill: none; stroke: var(--accent);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.calc-item-n {
  font-size: 1.9rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.calc-item-t {
  margin-top: 8px;
  font-size: 0.78rem; line-height: 1.4; color: var(--text-muted);
}
.calc-pie {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.calc-supuestos {
  font-size: 0.76rem; line-height: 1.6; color: var(--text-dim);
  max-width: 52ch;
}
/* Las cuentas están a la vista a propósito: un número redondo sin
   decir de dónde sale es exactamente lo que estamos quitando del sitio. */

/* ============================================================
   IDEA 09 · LOS BARRIOS CON NOMBRE
   En el GeoJSON hay nombres reales. Un vecino de El Mango reconoce
   su barrio al instante; "Santo Domingo Este" no le dice nada.
   ============================================================ */
.barrios {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin-top: 28px;
}
.barrio {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--border);
  border-radius: 50px;
  background: var(--bg-card);
  padding: 9px 16px 9px 13px;
  font-size: 0.87rem;
  transition: var(--transition);
}
a.barrio:hover { border-color: rgba(0, 212, 255, 0.45); transform: translateY(-2px); }
.barrio .pt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); flex: none;
  box-shadow: 0 0 0 3px rgba(0, 214, 143, 0.16);
}
.barrio .n {
  font-size: 0.72rem; font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 9px;
}
.barrio.pronto { border-style: dashed; }
.barrio.pronto .pt { background: var(--text-dim); box-shadow: none; }
.barrio.pronto .n { color: var(--text-muted); }
.barrios-pie {
  margin-top: 18px; text-align: center;
  font-size: 0.78rem; color: var(--text-dim);
}

/* ============================================================
   IDEA 08 · LA TIRA DE 90 DÍAS
   Un cuadrito por día. Es la forma más honesta de mostrar
   disponibilidad: se ve de un vistazo cuántos días hubo problemas
   y cuántos no hay ni datos para afirmar nada.
   ============================================================ */
.up {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 22px 20px 18px;
  margin-top: 28px;
}
.up-tit {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 16px;
}
.up-nombre { font-weight: 700; font-size: 0.95rem; }
.up-pct {
  font-size: 0.82rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.up-barras {
  display: flex; gap: 2px; align-items: stretch;
  height: 40px;
}
.up-b {
  flex: 1 1 0; min-width: 2px;
  border-radius: 2px;
  background: var(--success);
  transition: transform .12s ease;
}
.up-b:hover { transform: scaleY(1.12); }
.up-b.deg  { background: var(--warning); }
.up-b.mal  { background: var(--danger); }
.up-b.mant { background: var(--primary-light); }
.up-b.nada { background: rgba(255, 255, 255, 0.07); }
.up-pie {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-size: 0.72rem; color: var(--text-dim);
}
.up-leyenda {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem; color: var(--text-muted);
}
.up-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.up-leyenda i {
  width: 10px; height: 10px; border-radius: 2px; flex: none;
  background: var(--success);
}
.up-leyenda .deg i  { background: var(--warning); }
.up-leyenda .mal i  { background: var(--danger); }
.up-leyenda .nada i { background: rgba(255, 255, 255, 0.14); }
.up-aviso {
  margin-top: 14px;
  font-size: 0.78rem; line-height: 1.6; color: var(--text-dim);
}
@media (max-width: 560px) {
  .up-barras { height: 32px; gap: 1px; }
}

/* --- el tema claro de todo lo de arriba --- */
:root[data-theme="light"] .sim-riel,
:root[data-theme="light"] .calc input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .sim-nota,
:root[data-theme="light"] .calc-pie,
:root[data-theme="light"] .up-leyenda,
:root[data-theme="light"] .calc-item {
  border-color: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .up-b.nada { background: rgba(0, 0, 0, 0.09); }
:root[data-theme="light"] .barrio .n { border-left-color: rgba(0, 0, 0, 0.12); }

/* ============================================================
   IDEA 11 · LA TEXTURA DE FIBRA
   Un tejido de hilos finos en diagonal, con la misma inclinación que
   los galones del logo. Hecho con dos repeating-linear-gradient: no
   pesa un solo byte de imagen y se ve nítido en cualquier pantalla.

   Se usa poniendo la clase .textura-fibra en una sección. La cabecera
   de las páginas internas y el pie ya la llevan puesta abajo.
   ============================================================ */
:root {
  --fibra-angulo: -62deg;   /* la misma inclinación que los galones del logo */
  --fibra-paso: 13px;
}
.textura-fibra { position: relative; isolation: isolate; }
.textura-fibra::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background-image:
    repeating-linear-gradient(var(--fibra-angulo),
      rgba(0, 212, 255, 0.055) 0 1px, transparent 1px var(--fibra-paso)),
    repeating-linear-gradient(var(--fibra-angulo),
      rgba(0, 102, 255, 0.07) 0 1.5px, transparent 1.5px calc(var(--fibra-paso) * 4));
  /* se desvanece por arriba y por abajo para que no corte en seco */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
:root[data-theme="light"] .textura-fibra::before {
  background-image:
    repeating-linear-gradient(var(--fibra-angulo),
      rgba(0, 102, 255, 0.05) 0 1px, transparent 1px var(--fibra-paso)),
    repeating-linear-gradient(var(--fibra-angulo),
      rgba(0, 102, 255, 0.07) 0 1.5px, transparent 1.5px calc(var(--fibra-paso) * 4));
}

/* Donde va sin tener que tocar el HTML de catorce páginas */
.page-header, footer { position: relative; isolation: isolate; }
.page-header::after,
footer::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background-image:
    repeating-linear-gradient(var(--fibra-angulo),
      rgba(0, 212, 255, 0.05) 0 1px, transparent 1px var(--fibra-paso)),
    repeating-linear-gradient(var(--fibra-angulo),
      rgba(0, 102, 255, 0.065) 0 1.5px, transparent 1.5px calc(var(--fibra-paso) * 4));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 75%, transparent);
}
:root[data-theme="light"] .page-header::after,
:root[data-theme="light"] footer::after { opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .hero-grid-lines { animation: none; }
}

/* ============================================================
   IDEA 12 · EL TRATAMIENTO DE LAS FOTOS
   Cuando tomes las fotos del negocio van a tener luces distintas y
   fondos distintos, porque van a salir de tres días diferentes. Un
   duotono con tu azul y tu cian las convierte en un conjunto: se ven
   intencionadas aunque no lo fueran.

   No hay que editar ninguna foto: se hace con mezcla de capas. Y al
   pasar el cursor vuelve el color original, que en las caras del
   equipo se agradece.

   Para aplicarlo: <figure class="foto-slot duotono" ...>
   ============================================================ */
.foto-slot.duotono { position: relative; isolation: isolate; }
.foto-slot.duotono img {
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transition: filter .45s var(--transition, ease);
}
/* las sombras suben al azul de marca... */
.foto-slot.duotono::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  border-radius: var(--radius);
  background: #0A2A63;
  mix-blend-mode: lighten;
  pointer-events: none;
  transition: opacity .45s ease;
}
/* ...y las luces bajan al cian */
.foto-slot.duotono::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  border-radius: var(--radius);
  background: #00D4FF;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity .45s ease;
}
.foto-slot.duotono:hover img { filter: none; }
.foto-slot.duotono:hover::before,
.foto-slot.duotono:hover::after { opacity: 0; }

/* Si el navegador no sabe mezclar capas, se queda la foto tal cual.
   Una foto sin tratar se ve bien; una foto medio tratada, no. */
@supports not (mix-blend-mode: multiply) {
  .foto-slot.duotono img { filter: none; }
  .foto-slot.duotono::before,
  .foto-slot.duotono::after { display: none; }
}

/* ============================================================
   IDEA 14 · LOS TITULARES, CON OTRA VOZ
   Sólo cambian los titulares y las cifras grandes. Todo lo que se lee
   seguido —párrafos, listas, formularios, la letra pequeña— se queda
   en Inter, que para eso está.
   ============================================================ */
h1, h2, h3,
.hero-title,
.page-title,
.section-title,
.svc-title,
.cta-title,
.dev-cat-title,
.plan-vel-n,
.calc-n,
.stat-number,
.plan-nombre {
  font-family: var(--font-display);
  font-weight: var(--peso-titulo);
}
/* tabular-nums explícito: así las cifras grandes no bailan al cambiar
   aunque la familia no lo traiga por defecto. */
.plan-vel-n, .calc-n, .stat-number { font-variant-numeric: tabular-nums; }

/* ============================================================
   IDEA 13 · LAS MARCAS DE DESARROLLO Y MÁS
   Las tres categorías usaban iconos genéricos del mismo paquete que
   todo el mundo. Estas están dibujadas con el mismo trazo, la misma
   caja de 48 y los mismos remates redondeados que los animales de los
   planes. Van en blanco sobre el degradado de la cabecera, así que
   toman el color de donde están, como todas las demás.
   ============================================================ */
.dev-marca {
  width: 30px; height: 30px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* A quien le molesta el movimiento, el anillo se le queda quieto. */
@media (prefers-reduced-motion: reduce) {
  .speed-ring, .speed-ring::before, .speed-ring::after, .speed-center {
    animation: none;
  }
}

/* ============================================================
   IDEA 15 · LOS PLANES SE ACOMODAN A TU COBERTURA
   El verificador de cobertura y la lista de planes eran dos cosas
   separadas. Si alguien comprueba su dirección y en su zona la red
   llega hoy a 100 Mbps, seguía viendo los de 500 y 1 Gbps como si
   pudiera contratarlos. Eso es una venta que después hay que deshacer,
   con un técnico que va y vuelve.

   El dato ya existía: cada tramo del GeoJSON trae su maxSpeed.
   ============================================================ */
.cob-barra {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: .9rem;
}
.cob-barra svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: var(--accent);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.cob-barra-txt { flex: 1 1 260px; line-height: 1.5; }
.cob-barra-txt b { color: var(--accent); }
.cob-barra input {
  flex: 1 1 240px; min-width: 0;
  padding: 10px 14px; border-radius: 50px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .03);
  color: var(--text); font-size: .88rem;
}
.cob-barra input::placeholder { color: var(--text-dim); }
.cob-barra button {
  padding: 10px 20px; border-radius: 50px;
  background: var(--gradient); color: #fff;
  font-weight: 700; font-size: .85rem;
  transition: var(--transition);
}
.cob-barra button:disabled { opacity: .55; cursor: default; }
.cob-barra .cob-cambiar {
  background: none; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 4px 0; font-weight: 500;
}

/* La tarjeta no se esconde: se avisa. Esconderla haría pensar que el
   plan no existe; avisarla dice la verdad, que hoy no llega ahí. */
.plan-card.plan-supera { opacity: .72; }
.plan-card.plan-supera:hover { opacity: 1; }
.plan-aviso-cob {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: -4px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  background: rgba(255, 184, 0, .09);
  border: 1px solid rgba(255, 184, 0, .28);
  font-size: .74rem; line-height: 1.45; color: var(--warning);
}
.plan-aviso-cob svg {
  width: 13px; height: 13px; flex: none; margin-top: 2px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   IDEA 16 · QUÉ PASA DESPUÉS DE "LO QUIERO"
   El momento de más ansiedad de toda la web: la persona acaba de dar
   su cédula y su dirección y no sabe qué sigue. Cuatro pasos con
   tiempos valen más que cualquier animación.
   ============================================================ */
.pasos-inst { display: grid; gap: 0; margin-top: 30px; }
.pi {
  display: grid; grid-template-columns: 38px 1fr; gap: 16px;
  padding: 0 0 26px;
  position: relative;
}
.pi:last-child { padding-bottom: 0; }
/* la línea que une un paso con el siguiente */
.pi:not(:last-child)::before {
  content: '';
  position: absolute; left: 18px; top: 38px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(0, 212, 255, .12));
}
.pi-p {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--accent);
  background: var(--bg-dark);
  color: var(--accent-text);
  font-weight: 800; font-size: .95rem;
  font-variant-numeric: tabular-nums;
  position: relative; z-index: 1;
}
.pi-t { font-weight: 700; font-size: .98rem; margin-bottom: 3px; }
.pi-d { font-size: .87rem; color: var(--text-muted); line-height: 1.55; }
.pi-c {
  display: inline-block; margin-top: 7px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(0, 212, 255, .09);
  border: 1px solid rgba(0, 212, 255, .22);
  border-radius: 50px; padding: 3px 10px;
}

/* ============================================================
   IDEA 17 · EL REMATE DEL MEDIDOR DE VELOCIDAD
   Es el único momento del sitio donde alguien está mirando fijo
   esperando un resultado. Cuando el número aparece, aparece con él el
   animal al que corresponde esa velocidad — la medida de verdad, no
   la que tenga contratada.
   ============================================================ */
.medida-bestia {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 22px;
  padding: 12px 20px 12px 14px;
  border-radius: 50px;
  border: 1px solid rgba(0, 212, 255, .28);
  background: rgba(0, 212, 255, .07);
  animation: bestiaEntra .55s cubic-bezier(.2,.7,.3,1) both;
}
.medida-bestia svg {
  width: 34px; height: 34px; flex: none;
  fill: none; stroke: var(--accent);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.medida-bestia-txt { text-align: left; line-height: 1.35; }
.medida-bestia-t { font-weight: 700; font-size: .95rem; }
.medida-bestia-d { font-size: .76rem; color: var(--text-muted); }
@keyframes bestiaEntra {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .medida-bestia { animation: none; }
}

/* ============================================================
   IDEA 18 · PANTALLAS VACÍAS QUE NO SE SIENTEN ROTAS
   "Sin facturas." "No hay tickets." Una pantalla vacía casi siempre
   es una buena noticia: el cliente está al día y no tiene problemas.
   Vale la pena decírselo bien en vez de dejar un hueco gris.
   ============================================================ */
.vacio {
  display: grid; justify-items: center; text-align: center;
  gap: 4px; padding: 40px 24px;
  color: var(--text-muted);
}
.vacio svg {
  width: 52px; height: 52px; margin-bottom: 10px;
  fill: none; stroke: var(--text-dim);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.vacio svg .ok { stroke: var(--success); }
.vacio h5 {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  font-family: var(--font-display);
}
.vacio p { font-size: .88rem; max-width: 44ch; line-height: 1.6; }
.vacio .vacio-accion {
  margin-top: 14px;
  padding: 9px 20px; border-radius: 50px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text);
  font-size: .85rem; font-weight: 600;
  transition: var(--transition);
}
.vacio .vacio-accion:hover { border-color: var(--accent); color: var(--accent); }
td .vacio, th .vacio { padding: 30px 16px; }

/* ============================================================
   IDEA 19 · EL CHAT CON CARA
   El botón del chat era un 🤖, el mismo emoji que usa cualquier web.
   Con el canario pasa a ser parte de la marca en vez de un widget
   pegado encima.
   ============================================================ */
.chatbot-toggle svg,
.chatbot-avatar svg {
  width: 60%; height: 60%;
  fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.chatbot-avatar svg { width: 68%; height: 68%; }

/* ============================================================
   IDEA 21 · TU RED, TRAZÁNDOSE
   47 tramos de fibra con coordenadas de verdad sobre Santo Domingo
   Este, trazados por ti. No es una ilustración: es la infraestructura.
   Nadie puede copiar esto porque nadie más la tiene.
   ============================================================ */
.mapa-h {
  display: grid;
  /* La columna del dibujo va estrecha a propósito: la red real es alta
     y angosta (va de sur a norte), y en una columna ancha quedaría
     nadando en aire. */
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 44px; align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 34px 36px;
  margin-top: 32px;
}
.mapa-h-lienzo { position: relative; }
.mapa-h svg {
  width: 100%;
  height: clamp(290px, 40vw, 420px);
  display: block;
}
.mapa-h .tramo {
  fill: none;
  stroke: url(#gradRed);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tramoSeTraza 1.1s cubic-bezier(.5,.05,.3,1) both;
}
.mapa-h .nodo {
  fill: var(--accent);
  opacity: 0;
  animation: nodoAparece .4s ease both;
}
@keyframes tramoSeTraza { to { stroke-dashoffset: 0; } }
@keyframes nodoAparece  { to { opacity: 1; } }
.mapa-h-t {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800;
  letter-spacing: -.02em; margin-bottom: 10px;
}
.mapa-h-s { color: var(--text-muted); line-height: 1.7; font-size: .95rem; }
.mapa-h-datos {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.mapa-h-dato-n {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mapa-h-dato-t { font-size: .78rem; color: var(--text-dim); margin-top: 4px; }
@media (max-width: 700px) {
  .mapa-h { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px; }
  .mapa-h-lienzo { max-width: 240px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-h .tramo { animation: none; stroke-dashoffset: 0; }
  .mapa-h .nodo  { animation: none; opacity: 1; }
}
:root[data-theme="light"] .mapa-h-datos { border-top-color: rgba(0, 0, 0, .08); }

/* ============================================================
   IDEA 20 · TRANSICIONES ENTRE PÁGINAS
   La transición ya estaba puesta; le faltaba lo que más se nota:
   que la barra de arriba NO parpadee al cambiar de página. Con un
   nombre de transición propio, el navegador la trata como el mismo
   elemento en las dos páginas y se queda quieta mientras el resto
   cambia. Se siente app, no recarga.
   ============================================================ */
#navbar { view-transition-name: barra-superior; }
footer  { view-transition-name: pie-de-pagina; }

/* Y si alguien pidió menos movimiento, no hay transición ninguna. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  #navbar, footer { view-transition-name: none; }
}

/* ============================================================
   IDEA 22 · EL BUSCADOR DE PLAN
   Veintiséis tarjetas en una rejilla no ayudan a elegir: paralizan.
   Dos preguntas en lenguaje normal llevan a la persona directo al
   plan que le sirve.
   ============================================================ */
.reco {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 30px 28px 26px;
  margin-top: 32px;
}
.reco-paso + .reco-paso { margin-top: 24px; }
.reco-p {
  font-size: 1rem; font-weight: 600;
  margin-bottom: 14px;
}
.reco-ops { display: flex; flex-wrap: wrap; gap: 10px; }
.reco-op {
  padding: 11px 20px; border-radius: 50px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  font-size: .89rem; font-weight: 600;
  transition: var(--transition);
}
.reco-op:hover { border-color: rgba(0, 212, 255, .45); color: var(--text); }
.reco-op.on {
  border-color: var(--accent); color: var(--accent-text);
  background: rgba(0, 212, 255, .10);
}
.reco-res {
  display: flex; align-items: center; gap: 18px;
  margin-top: 26px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.reco-res > svg {
  width: 54px; height: 54px; flex: none;
  fill: none; stroke: var(--accent);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.reco-etq {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-dim);
}
.reco-plan {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em;
  margin: 3px 0 5px;
}
.reco-por { font-size: .88rem; color: var(--text-muted); line-height: 1.55; }
.reco-ir { margin-left: auto; flex: none; }
@media (max-width: 620px) {
  .reco-res { flex-wrap: wrap; }
  .reco-ir { margin-left: 0; width: 100%; justify-content: center; }
}

/* ============================================================
   IDEA 23 · COMPARAR DOS O TRES PLANES
   Los guiones importan tanto como los "Sí": son los que muestran
   qué ganas al subir de plan, que es donde se justifica el precio.
   ============================================================ */
.comp { margin-top: 30px; overflow-x: auto; }
.comp table {
  width: 100%; border-collapse: collapse;
  min-width: 520px;
  font-size: .9rem;
}
.comp th, .comp td {
  padding: 13px 14px; text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.comp thead th {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 800;
  vertical-align: bottom; position: relative;
  padding-top: 26px;
}
.comp thead th span {
  display: block; margin-top: 4px;
  font-family: var(--font);
  font-size: .82rem; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.comp tbody td:first-child,
.comp thead th:first-child { text-align: left; color: var(--text-muted); }
.comp .destacada { background: rgba(0, 102, 255, .07); }
.comp thead .destacada { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.comp-cinta {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  font-family: var(--font);
  font-size: .58rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--gradient);
  border-radius: 50px; padding: 3px 10px;
  white-space: nowrap;
}
/* .comp thead th span (mas abajo) es mas especifico que .comp-cinta sola
   y le ganaba el color, dejando "El salto" en gris apagado sobre su
   propio fondo en degradado en vez del blanco que pide la regla de
   arriba. Se repite el selector completo para ganar esa pulseada. */
.comp thead th span.comp-cinta { color: #fff; }
.comp .si { color: var(--success-text); font-weight: 700; }
.comp .no { color: var(--text-dim); }
/* La columna destacada lleva un tinte azul de fondo (mas abajo,
   rgba(0,102,255,.07)): sobre ese tinte, --text-dim se queda en 4,4:1
   -- por debajo de 4,5. Un pelín más oscuro y sobra margen.
   OJO: "destacada" y "no" van en la MISMA celda (class="destacada no",
   ver recomendador.js linea 229) -- el selector va sin espacio, si no
   nunca coincide con nada y esta regla no hace nada. */
:root[data-theme="light"] .comp .destacada.no { color: #495468; }
.comp b { font-variant-numeric: tabular-nums; font-size: 1rem; }
.comp-elige {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 28px;
}
.comp-elige label { font-size: .82rem; color: var(--text-muted); }
.comp-elige select {
  padding: 9px 14px; border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text);
  font-size: .86rem; font-family: var(--font);
}

/* ============================================================
   IDEA 24 · LA PÁGINA DE GRACIAS
   Antes el número de orden salía en un aviso flotante que se iba a
   los cuatro segundos. Si la persona parpadeaba, lo perdía — y ese
   número es su único comprobante.
   ============================================================ */
.gracias {
  max-width: 620px; margin: 0 auto; text-align: center;
  padding: 20px;
}
.gracias-check {
  width: 84px; height: 84px; margin: 0 auto 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 214, 143, .12);
  border: 1.5px solid rgba(0, 214, 143, .4);
}
.gracias-check svg {
  width: 42px; height: 42px;
  fill: none; stroke: var(--success);
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: graciasCheck .6s cubic-bezier(.6,.04,.3,1) .2s forwards;
}
@keyframes graciasCheck { to { stroke-dashoffset: 0; } }
.gracias h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800;
  letter-spacing: -.02em; margin-bottom: 12px;
}
.gracias-lead { color: var(--text-muted); font-size: 1.02rem; line-height: 1.7; }
.gracias-orden {
  margin: 30px auto; max-width: 420px;
  border: 1px dashed rgba(0, 212, 255, .45);
  border-radius: var(--radius);
  background: rgba(0, 212, 255, .06);
  padding: 20px;
}
.gracias-orden span {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 8px;
}
.gracias-orden b {
  font-family: var(--font-display);
  font-size: 1.5rem; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  user-select: all;
}
.gracias-copiar {
  display: block; margin: 10px auto 0;
  background: none; color: var(--text-muted);
  font-size: .78rem; text-decoration: underline; text-underline-offset: 3px;
}
.gracias-acciones {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .gracias-check svg { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================
   IDEA 25 · QUIÉN VA A ENTRAR A TU CASA
   La instalación implica dejar entrar a un desconocido. Foto,
   nombre y carné. Para un proveedor local vale doble, porque el
   técnico es la cara de la empresa.

   La ficha sólo se enseña cuando la orden ya tiene técnico asignado
   de verdad; mientras no lo tenga, no se ve nada.
   ============================================================ */
.tec {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 20px;
  text-align: left;
  max-width: 420px; margin: 24px auto 0;
}
.tec-top { display: flex; align-items: center; gap: 16px; }
.tec-foto {
  width: 62px; height: 62px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gradient); color: #fff;
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 800;
  background-size: cover; background-position: center;
}
.tec-n { font-weight: 700; font-size: 1.05rem; }
.tec-r { font-size: .85rem; color: var(--text-muted); margin-top: 2px; }
.tec-id {
  display: inline-block; margin-top: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  color: var(--accent);
  background: rgba(0, 212, 255, .09);
  border: 1px solid rgba(0, 212, 255, .22);
  border-radius: 50px; padding: 2px 10px;
}
.tec-pie {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: .85rem; color: var(--text-muted);
}

/* ============================================================
   IDEA 26 · SI HAY UN CORTE, QUE LO DIGA TODO EL SITIO
   Un incidente publicado sólo se veía entrando a Estado de la Red.
   El cliente afectado va a la portada o al portal, no ahí.
   ============================================================ */
.corte {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 20px;
  background: linear-gradient(90deg, rgba(255,71,87,.16), rgba(255,184,0,.12));
  border-bottom: 1px solid rgba(255, 71, 87, .3);
  font-size: .88rem; line-height: 1.45;
  position: relative; z-index: 1001;
}
.corte.mantenimiento {
  background: linear-gradient(90deg, rgba(0,102,255,.16), rgba(0,212,255,.1));
  border-bottom-color: rgba(0, 212, 255, .3);
}
.corte-pt {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--danger);
  box-shadow: 0 0 0 0 rgba(255, 71, 87, .6);
  animation: cortePulso 2s ease-out infinite;
}
.corte.mantenimiento .corte-pt {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0, 212, 255, .6);
}
@keyframes cortePulso {
  70%  { box-shadow: 0 0 0 9px rgba(255, 71, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
}
.corte-txt { flex: 1 1 260px; }
.corte a {
  color: var(--accent); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}
.corte-cerrar {
  background: none; color: var(--text-muted);
  font-size: 1.1rem; line-height: 1; padding: 4px 6px; flex: none;
}
.corte-cerrar:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .corte-pt { animation: none; } }

/* ============================================================
   IDEA 27 · LA DISTANCIA A LA FIBRA
   El verificador ya calcula a cuántos metros está el tramo más
   cercano: así decide si hay cobertura. Ese número estaba escondido,
   y "tu casa está a 42 m de nuestra red" convence más que un "sí".
   ============================================================ */
.eng-dato {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 12px;
  padding: 9px 16px; border-radius: 50px;
  background: rgba(0, 212, 255, .09);
  border: 1px solid rgba(0, 212, 255, .26);
}
.eng-dato b {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.eng-dato span { font-size: .8rem; color: var(--text-muted); }

/* ============================================================
   IDEA 28 · LA TARJETA PARA PRESUMIR EL RESULTADO
   Quien mide 312 Mbps lo quiere enseñar, y hoy sólo puede mandar una
   captura con la barra del navegador incluida. Esto es publicidad
   que hacen los clientes gratis.
   ============================================================ */
.share-caja { margin-top: 24px; display: grid; gap: 14px; justify-items: center; }
.share-lienzo {
  width: 100%; max-width: 340px; height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}
.share-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   IDEA 30 · LOS ERRORES, PEGADOS AL CAMPO QUE FALLA
   Un aviso flotante en una esquina dice "revisa el teléfono" y se va
   antes de que la persona encuentre cuál campo es. Aquí el error
   vive debajo de su campo, dice qué falta y cuánto, y no se va hasta
   que se corrige.
   ============================================================ */
.campo-mal .form-control,
.campo-mal input, .campo-mal select, .campo-mal textarea {
  border-color: var(--danger) !important;
  background: rgba(255, 71, 87, .05);
}
.campo-mal .form-label { color: var(--danger); }
.err-msg {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 7px;
  font-size: .79rem; line-height: 1.45; color: var(--danger);
}
.err-msg svg {
  width: 14px; height: 14px; flex: none; margin-top: 1px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* que el navegador no ponga su propio globo encima del nuestro */
.campo-mal input:invalid { box-shadow: none; }

:root[data-theme="light"] .reco-res,
:root[data-theme="light"] .tec-pie,
:root[data-theme="light"] .comp th,
:root[data-theme="light"] .comp td { border-color: rgba(0, 0, 0, .09); }
:root[data-theme="light"] .campo-mal .form-control { background: rgba(255, 71, 87, .04); }

/* ============================================================
   TIPOGRAFÍA · Montserrat
   Títulos en Montserrat Bold, subtítulos en Montserrat regular.

   Montserrat llega hasta el peso 700, así que los títulos que estaban
   en 800 y 900 bajan a 700: pedir 900 de una familia que no lo tiene
   hace que el navegador lo engorde por su cuenta, y eso se ve sucio en
   los tamaños grandes.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.hero-title, .page-title, .section-title, .svc-title, .cta-title,
.dev-cat-title, .plan-nombre, .mapa-h-t, .reco-plan, .gracias h1,
.stat-number, .plan-vel-n, .calc-n, .speed-number, .hero-stat-value,
.plan-precio, .comp thead th, .mapa-h-dato-n, .vacio h5, .tec-n {
  font-family: var(--font-display);
  font-weight: var(--peso-titulo);
  letter-spacing: -0.02em;
}
/* las cifras muy grandes aguantan un poco más de apretado */
.hero-title, .page-title, .plan-vel-n, .calc-n, .speed-number {
  letter-spacing: -0.03em;
}

/* Los subtítulos: Montserrat, pero sin negrita. Es la línea que
   acompaña al título, no otro título. */
.section-subtitle, .t-sub, .svc-lead, .hero-sub, .dev-cat-sub,
.mapa-h-s, .gracias-lead, .reco-por, .plan-tipo, .cov-nota,
.sim-nota, .barrios-pie, .franja-fuente, .vacio p {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}
/* Y las etiquetitas en mayúscula, en el peso medio: en regular
   quedan flojas y en bold gritan. */
.t-eyebrow, .svc-eyebrow, .section-tag, .reco-etq, .plan-etiqueta,
.calc-plan, .stat-label, .hero-stat-label {
  font-family: var(--font-display);
  font-weight: 600;
}

/* ============================================================
   LA MEDIDA DE LECTURA
   Repasé los párrafos de las 16 páginas y 40 iban a más de 100
   caracteres por línea; los peores, a 144. Por encima de unos 85 el
   ojo pierde dónde vuelve a empezar la línea siguiente y hay que
   releer. Las páginas legales eran las peores, que es justo donde la
   gente sí tiene que leer.

   Con esto ninguna línea de texto corrido pasa de ~72 caracteres. El
   texto que va bajo un título centrado se centra también como bloque,
   para que no quede colgado a la izquierda de su propio título.
   ============================================================ */
:root { --medida: 72ch; }

/* --- columnas de lectura, alineadas a la izquierda --- */
/* en las legales la medida la pone ya la propia tarjeta (.legal-card),
   así que aquí sólo quedan las columnas que van dentro de otra caja */
.vel-tip p,
.vel-glo p,
.vel-glo div,
.faq-content,
.faq-content p,
.accordion-content,
.accordion-content p,
.dev-cta p,
.bottom-banner p,
.testimonial-text {
  max-width: var(--medida);
}

/* --- texto que acompaña a un título centrado: se centra el bloque --- */
.text-center p,
.page-header p,
.page-header .section-subtitle,
.cta-content p,
.hero-referidos-content p,
.svc-cat-head p,
.dev-cat-head .dev-cat-sub,
/* Estos tres bloques se centran con su propio text-align, sin llevar la
   clase .text-center. El parrafo tenia max-width pero no margenes
   automaticos: la caja quedaba pegada a la izquierda y solo el texto de
   dentro salia centrado. Por eso el titulo parecia centrado y el
   subtitulo corrido hacia la izquierda. */
.help-header .section-subtitle,
.bottom-banner p,
.dev-cta p {
  max-width: var(--medida);
  margin-left: auto;
  margin-right: auto;
}

/* Las líneas sueltas —pies de foto, notas al pie, la franja común de
   los planes— no son texto corrido: si se les pone medida quedan
   descolgadas del bloque que acompañan. */
.plan-comun,
.barrios-pie,
.franja-fuente,
.st-nota,
.svc-note,
.cov-legal { max-width: 78ch; margin-left: auto; margin-right: auto; }

/* Los que quedaban sueltos en el medidor de velocidad */
.vel-intro,
.vel-ayuda-texto p,
.vel-ayuda-cta p { max-width: var(--medida); }
.vel-intro { margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  :root { --medida: 100%; }
}