/* =========================================================
   HOME MANAGER — Dealer Autorizado de Internet Residencial
   Estilos modernos, dinámicos, ricos en color y animación
   ========================================================= */

:root {
  /* Paleta de Color Enriquecida */
  --color-bg: #F8FAFD;
  --color-bg-alt: #F0F5FC;
  --color-surface: #FFFFFF;
  --color-text: #0E1A2D;
  --color-text-soft: #4E6078;
  --color-border: #D8E3F2;
  --color-border-subtle: #E8EEF7;
  
  --color-primary: #1458C4;
  --color-primary-light: #2A72E5;
  --color-primary-dark: #0B3E94;
  --color-primary-soft: #EDF4FF;
  
  --color-cyan: #06B6D4;
  --color-cyan-light: #38BDF8;
  --color-cyan-soft: #ECFEFF;
  
  --color-emerald: #0E91A8;
  --color-emerald-light: #17B7C8;
  --color-emerald-soft: #E5F8FA;
  
  --color-amber: #E5A93C;
  --color-amber-light: #FBBF24;
  --color-amber-soft: #FEF3C7;
  
  --color-navy: #07152B;
  --color-navy-card: #0D2144;
  --color-white: #FFFFFF;

  /* Fotografía horizontal de familia usando internet en casa: compuesta para el hero. */
  --hero-background-image: url("../assets/happy-family.jpg");

  /* Tipografías */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout y Bordes */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --container-w: 1180px;
  
  /* Sombras y Resplandores */
  --shadow-sm: 0 2px 8px rgba(11, 29, 58, 0.04);
  --shadow-md: 0 8px 24px -6px rgba(14, 38, 77, 0.08);
  --shadow-lg: 0 16px 36px -8px rgba(11, 29, 58, 0.12);
  --shadow-xl: 0 24px 54px -12px rgba(11, 29, 58, 0.22);
  --shadow-glow-blue: 0 0 30px rgba(20, 88, 196, 0.35);
  --shadow-glow-cyan: 0 0 30px rgba(6, 182, 212, 0.35);

  /* Transición Base */
  --transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* Evita que el navegador reubique el scroll automáticamente cuando
     una imagen termina de cargar y cambia el alto de la página
     ("scroll anchoring"), otra causa común de que el sitio parezca
     "saltar" de posición al entrar. */
  overflow-anchor: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.58;
  padding-bottom: 0;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--color-navy); }
p { margin: 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 12px 18px;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 20px;
}

.eyebrow {
  font-size: 0.8rem;
  color: var(--color-primary-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

/* ---------- Botones & Acciones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.98rem;
  border: 1px solid transparent;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
  min-height: 48px;
  white-space: nowrap;
  position: relative;
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: linear-gradient(135deg, #1458C4 0%, #1F6AE0 100%);
  color: var(--color-white);
  box-shadow: 0 4px 16px rgba(20, 88, 196, 0.28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0F4BB5 0%, #1656BE 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 88, 196, 0.4);
}

.btn-outline {
  background: #FFFFFF;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(20, 88, 196, 0.08);
}
.btn-outline:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #FFFFFF;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-outline-light {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
}
.btn-outline-light:hover {
  background: #FFFFFF;
  color: var(--color-navy);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-large {
  padding: 16px 28px;
  font-size: 1.05rem;
  width: 100%;
}
.btn-block { width: 100%; }

@media (min-width: 640px) {
  /* Los CTAs del hero se mantienen SIEMPRE apilados en columna
     (Hablar con un asesor arriba, Ver ofertas abajo) en vez de
     forzar una fila que se veía apretada en pantallas medianas.
     A partir de aquí solo dejamos de estirarlos a 100% para que
     cada botón se ajuste a su propio contenido. */
  .btn-large { width: auto; }
  .hero-ctas { align-items: flex-start; gap: 16px; }
}

/* Animación de Pulso (Efecto Radar en Botones de Llamada) */
@keyframes pulse-call-blue {
  0% {
    box-shadow: 0 0 0 0 rgba(20, 88, 196, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(20, 88, 196, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(20, 88, 196, 0);
  }
}
@keyframes pulse-call-green {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 145, 168, 0.65);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(14, 145, 168, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 145, 168, 0);
  }
}
.pulse-btn {
  animation: pulse-call-blue 2.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
.btn-header-call.pulse-btn,
.btn-support-call.pulse-btn,
.btn-direct-call.pulse-btn,
.btn-sticky-call.pulse-btn {
  animation: pulse-call-green 2.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Punto de estado en vivo pulsante */
.status-dot-pulse {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: dot-pulse 1.8s infinite;
  flex-shrink: 0;
}
@keyframes dot-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.75); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ---------- Header ---------- */
/* NOTA (fix espacio en blanco iOS Safari): un elemento con position:sticky
   que ADEMÁS lleva backdrop-filter directamente aplicado provoca un bug
   conocido de WebKit/Safari en iPhone: el motor reserva espacio extra al
   final del documento (aprox. la altura del header), dejando una franja
   blanca debajo del footer al cargar la página. La solución es separar
   el blur en una capa propia (::before) que NO es el elemento sticky,
   así Safari calcula correctamente la altura real del documento. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition);
  isolation: isolate;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-logo-img {
  height: 42px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-body);
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.02em;
}
.brand-sub {
  font-size: 0.68rem;
  color: var(--color-text-soft);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.btn-header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 0.92rem;
  border-radius: var(--radius-sm);
  background: var(--color-emerald);
  color: var(--color-white);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(14, 145, 168, 0.3);
  transition: background var(--transition), transform var(--transition);
}
.btn-header-call:hover {
  background: #08778B;
  transform: translateY(-2px);
}

/* Menú hamburguesa (tres puntitos) */
.menu-toggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.menu-toggle:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}
.menu-dots-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.menu-dots-icon .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-navy);
  transition: transform var(--transition), background var(--transition);
}
.menu-toggle:hover .dot { background: var(--color-primary); }

.main-nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
  pointer-events: none;
}
.main-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.nav-menu-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px -8px rgba(11, 29, 58, 0.25);
  overflow: hidden;
  padding: 10px;
}
.nav-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nav-close-btn {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text-soft);
  padding: 4px 6px;
}
.main-nav ul {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.main-nav li a,
.main-nav .nav-terms-link {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  border-radius: 8px;
  transition: background var(--transition), color var(--transition);
  text-align: left;
}
.main-nav li a:hover,
.main-nav .nav-terms-link:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.nav-menu-footer {
  padding: 8px 6px 4px;
  border-top: 1px solid var(--color-border-subtle);
}

/* ---------- HERO SECTION (Más Color & Dinamismo) ---------- */
.hero {
  position: relative;
  padding: 64px 0 84px;
  background:
    linear-gradient(90deg, rgba(3, 15, 39, 0.93) 0%, rgba(5, 28, 65, 0.78) 46%, rgba(7, 79, 129, 0.42) 100%),
    var(--hero-background-image) 62% center / cover no-repeat,
    #07152B;
  color: var(--color-white);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 32%, rgba(125, 211, 252, 0.38) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.28) 0 2px, transparent 3px),
    radial-gradient(circle at 81% 72%, rgba(34, 211, 238, 0.32) 0 2px, transparent 3px),
    repeating-linear-gradient(115deg, transparent 0 58px, rgba(125, 211, 252, 0.08) 59px 60px, transparent 61px 118px);
  opacity: 0.72;
  pointer-events: none;
  animation: network-drift 16s ease-in-out infinite alternate;
}
@keyframes network-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}
.hero-bg-mesh {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 15% 25%, rgba(37, 99, 235, 0.38) 0%, transparent 55%),
    radial-gradient(circle at 85% 65%, rgba(34, 211, 238, 0.26) 0%, transparent 60%),
    radial-gradient(circle at 50% 90%, rgba(11, 37, 79, 0.8) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: mesh-breathe 9s ease-in-out infinite alternate;
}
@keyframes mesh-breathe {
  from { transform: scale(1); filter: saturate(1); }
  to { transform: scale(1.08); filter: saturate(1.2); }
}
.hero-network-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  mix-blend-mode: screen;
  z-index: 1;
  animation: network-shimmer 11s ease-in-out infinite alternate;
}
@keyframes network-shimmer {
  from { transform: scale(1); opacity: 0.18; }
  to { transform: scale(1.05); opacity: 0.28; }
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.hero-content {
  padding-top: 26px;
}
@media (min-width: 960px) {
  .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
  .hero-content { flex: 1.15; }
  .hero-visual { flex: 0.85; }
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #7DD3FC;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  backdrop-filter: blur(8px);
}
.hero-content h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.hero-sub {
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 52ch;
}
.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.btn-hero-call {
  background: linear-gradient(135deg, #0E91A8 0%, #1377C8 100%);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 20px rgba(14, 145, 168, 0.45);
}
.btn-hero-call:hover {
  background: linear-gradient(135deg, #08778B 0%, #0B61AA 100%);
  transform: translateY(-2px);
}

.trust-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trust-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}
.check-icon {
  color: #38BDF8;
  flex-shrink: 0;
}

/* Tarjeta Hero Lateral */
.hero-coverage-card {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-xl);
  padding: 34px 28px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5), 0 0 35px rgba(56, 189, 248, 0.2);
  color: var(--color-text);
  animation: card-float 6s ease-in-out infinite;
}
@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: #EAF8F0;
  color: #1E7E43;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 20px;
  margin-bottom: 12px;
}
.coverage-card-header h3 {
  font-size: 1.4rem;
  line-height: 1.25;
  margin-bottom: 8px;
  color: var(--color-navy);
}
.coverage-card-header p {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  margin-bottom: 22px;
  line-height: 1.5;
}
.btn-call-hero {
  background: linear-gradient(135deg, #0E91A8 0%, #1377C8 100%);
  color: #FFFFFF;
  padding: 16px 20px;
  font-size: 1.05rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 18px rgba(14, 145, 168, 0.35);
  margin-bottom: 24px;
}
.btn-call-hero:hover {
  background: #08778B;
  transform: translateY(-2px);
}

.coverage-benefits-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: 16px;
}
.coverage-benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.coverage-benefit-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.coverage-benefit-item strong {
  display: block;
  font-size: 0.92rem;
  color: var(--color-navy);
}
.coverage-benefit-item small {
  font-size: 0.8rem;
  color: var(--color-text-soft);
}
.coverage-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--color-text-soft);
  justify-content: center;
}

/* ---------- SECCIONES GENÉRICAS ---------- */
.section { padding: 76px 0; }
.section-head {
  max-width: 680px;
  margin-bottom: 44px;
}
.section-head h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.35rem);
  line-height: 1.22;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.section-head p {
  color: var(--color-text-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ---------- 1. SOPORTE TÉCNICO Y ATENCIÓN CX ---------- */
.section-support {
  background: linear-gradient(180deg, #F0F6FE 0%, #FFFFFF 100%);
  position: relative;
}
.support-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 640px) {
  .support-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .support-features-grid { grid-template-columns: repeat(4, 1fr); }
}
.support-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.support-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-cyan));
  opacity: 0;
  transition: opacity var(--transition);
}
.support-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px -8px rgba(20, 88, 196, 0.16);
  border-color: rgba(20, 88, 196, 0.4);
}
.support-card:hover::before { opacity: 1; }

.support-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.icon-cyan { background: #E0F2FE; color: #0284C7; }
.icon-blue { background: #DBEAFE; color: #1D4ED8; }
.icon-indigo { background: #E0E7FF; color: #4338CA; }
.icon-purple { background: #F3E8FF; color: #7E22CE; }

.support-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
}
.support-card p {
  font-size: 0.93rem;
  color: var(--color-text-soft);
  line-height: 1.55;
}

.support-banner-cta {
  margin-top: 44px;
  background: linear-gradient(135deg, #091A3E 0%, #0F326E 50%, #1558C4 100%);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  box-shadow: 0 16px 40px -10px rgba(9, 26, 62, 0.4);
  position: relative;
  overflow: hidden;
}
.support-banner-cta::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
@media (min-width: 768px) {
  .support-banner-cta {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 36px 44px;
  }
}
.badge-pill-light {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.15);
  color: #7DD3FC;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.support-banner-content h3 {
  color: #FFFFFF;
  font-size: 1.45rem;
  margin-bottom: 6px;
}
.support-banner-content p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.98rem;
}
.btn-support-call {
  background: linear-gradient(135deg, #0E91A8 0%, #1377C8 100%);
  color: #FFFFFF;
  font-weight: 700;
  padding: 15px 28px;
  font-size: 1.05rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 18px rgba(14, 145, 168, 0.4);
}
.btn-support-call:hover {
  background: #08778B;
  transform: translateY(-2px);
}

/* ---------- 2. QUIÉNES SOMOS ---------- */
.section-about {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 16%, rgba(56, 189, 248, 0.16) 0%, transparent 28%),
    radial-gradient(circle at 92% 82%, rgba(45, 212, 191, 0.14) 0%, transparent 34%),
    linear-gradient(135deg, #EFF7FF 0%, #FAFCFF 54%, #EDFDFB 100%);
}
.section-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(125deg, transparent 0 52px, rgba(20, 88, 196, 0.05) 53px 54px, transparent 55px 105px);
  pointer-events: none;
}
.section-about .container {
  position: relative;
  z-index: 1;
}
.about-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 920px) {
  .about-section-grid {
    grid-template-columns: 1.25fr 1fr;
    gap: 52px;
  }
}
.about-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #E5F2FF;
  color: var(--color-primary-dark);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(20, 88, 196, 0.15);
}
.about-text h2 {
  margin-bottom: 16px;
  line-height: 1.2;
  color: var(--color-navy);
}
.about-text {
  padding: 32px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(20, 88, 196, 0.14);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 44px -20px rgba(11, 47, 100, 0.24);
  backdrop-filter: blur(10px);
}
.about-text p {
  color: var(--color-text-soft);
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 16px;
  text-align: left;
}
.about-perks-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 600px) {
  .about-perks-list { grid-template-columns: 1fr 1fr; }
}
.about-perk-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.about-perk-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E6F6FF;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid rgba(20, 88, 196, 0.16);
}
.about-perk-text strong {
  display: block;
  font-size: 0.96rem;
  color: var(--color-navy);
  margin-bottom: 2px;
}
.about-perk-text span {
  font-size: 0.86rem;
  color: var(--color-text-soft);
  line-height: 1.45;
}

.about-card-box {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(125, 211, 252, 0.32);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 18px 45px -10px rgba(11, 29, 58, 0.12);
  transition: transform var(--transition);
}
.about-card-box:hover {
  transform: translateY(-5px);
}
.about-card-inner {
  padding: 0;
}
.photo-feature-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.about-card-content {
  padding: 28px 24px;
}
.about-card-content h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: var(--color-navy);
}
.about-card-content p {
  font-size: 0.92rem;
  color: var(--color-text-soft);
  line-height: 1.55;
  margin-bottom: 20px;
}

/* ---------- 3. PRECIOS Y PROMOCIONES ---------- */
.section-plans {
  background: linear-gradient(180deg, #F0F5FC 0%, #FFFFFF 100%);
}

/* Tarjeta Destacada de Oferta Especial (Obsidian & Gold) */
.special-offer-wrap {
  margin-bottom: 54px;
}
.special-offer-card {
  background: radial-gradient(circle at 85% 15%, #25221B 0%, #11100F 70%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: 38px 28px;
  color: #FFFFFF;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 920px) {
  .special-offer-card {
    grid-template-columns: 1.25fr 1fr;
    padding: 48px 46px;
    gap: 48px;
  }
}
.special-offer-card::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(229, 169, 60, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.special-offer-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 82%, rgba(245, 158, 11, 0.18) 0 2px, transparent 3px),
    repeating-linear-gradient(135deg, transparent 0 44px, rgba(251, 191, 36, 0.06) 45px 46px, transparent 47px 90px);
  pointer-events: none;
  opacity: 0.65;
}
.offer-left, .offer-right { position: relative; z-index: 1; }
.offer-eyebrow {
  color: #F59E0B;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  display: inline-block;
}
.offer-title {
  font-size: clamp(1.85rem, 3.4vw, 2.65rem);
  font-weight: 700;
  line-height: 1.15;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  font-family: var(--font-body);
}
.offer-description {
  color: #C5C5D0;
  font-size: 1.02rem;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 520px;
}
.offer-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.offer-price-val {
  display: flex;
  align-items: baseline;
}
.offer-price-currency {
  font-size: 2.2rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
}
.offer-price-num {
  font-size: clamp(2.8rem, 5.2vw, 3.6rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.03em;
}
.offer-price-freq {
  font-size: 1.05rem;
  color: #A0A0AA;
  font-weight: 600;
  margin-left: 4px;
}
.offer-badge-pill {
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-offer-call {
  background: #FFFFFF !important;
  color: #0F172A !important;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
  transition: transform var(--transition), background var(--transition);
  text-decoration: none;
  width: 100%;
}
@media (min-width: 640px) {
  .btn-offer-call { width: auto; }
}
.btn-offer-call:hover {
  background: #F1F5F9 !important;
  transform: translateY(-2px);
}
.offer-price-context {
  color: #A9B4C4;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: -6px 0 20px;
  max-width: 480px;
}
.offer-legal-note {
  color: #8E8E9E;
  font-size: 0.82rem;
  line-height: 1.55;
  margin-top: 16px;
  max-width: 520px;
}

.offer-included-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  backdrop-filter: blur(10px);
}
.included-title {
  color: #F59E0B;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
  display: block;
}
.included-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}
.included-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #F1F5F9;
  font-size: 0.96rem;
  font-weight: 600;
}
.included-list li:last-child { border-bottom: none; }
.included-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F59E0B;
  flex-shrink: 0;
}
.included-foot-note {
  color: #A0A0AA;
  font-size: 0.86rem;
  line-height: 1.45;
  margin-top: 14px;
}

/* Grilla de Planes Estándar */
.plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 860px) {
  .plans-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}
.plan-card {
  position: relative;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 32px 26px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 42px -10px rgba(11, 29, 58, 0.18);
  border-color: var(--color-primary);
}
.plan-featured {
  border: 2.5px solid #1458C4;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F6FF 100%);
  box-shadow: 0 20px 45px -10px rgba(20, 88, 196, 0.25);
}
@media (min-width: 860px) {
  .plan-featured { transform: translateY(-10px); }
  .plan-featured:hover { transform: translateY(-16px); }
}
.plan-badge {
  position: absolute;
  top: -14px;
  left: 24px;
  background: linear-gradient(135deg, #1458C4, #06B6D4);
  color: var(--color-white);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(20, 88, 196, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.plan-card-header { margin-bottom: 20px; }
.plan-name {
  font-size: 1.3rem;
  margin-bottom: 4px;
  color: var(--color-navy);
}
.plan-speed {
  font-size: 1.05rem;
  color: var(--color-primary);
  margin-bottom: 12px;
  font-weight: 800;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 12px;
}
.price-amount {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 2.7rem;
  color: var(--color-navy);
  letter-spacing: -0.03em;
}
.price-period {
  color: var(--color-text-soft);
  font-size: 0.95rem;
  font-weight: 600;
}
.plan-desc {
  color: var(--color-text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}
.plan-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  flex-grow: 1;
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--color-text);
  line-height: 1.45;
}
.plan-features .check-icon {
  color: #108A38;
  margin-top: 2px;
}
.btn-plan-call {
  padding: 13px 20px;
  font-weight: 700;
}
.plans-disclaimer {
  margin-top: 36px;
  font-size: 0.84rem;
  color: var(--color-text-soft);
  line-height: 1.6;
  text-align: center;
}

/* ---------- 4. SELECTOR INTERACTIVO ---------- */
.section-selector {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF4FD 100%);
}
.selector-widget {
  max-width: 680px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 36px 30px;
  box-shadow: var(--shadow-lg);
}
.selector-question {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 22px;
  color: var(--color-navy);
}
.selector-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.selector-option {
  text-align: left;
  padding: 16px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  min-height: 52px;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  gap: 12px;
}
.selector-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  transform: translateX(4px);
}
.selector-option.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 800;
  box-shadow: 0 0 0 3px rgba(20, 88, 196, 0.15);
}
.option-icon {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.selector-result {
  text-align: center;
  padding: 10px 0;
}
.selector-result-label {
  font-size: 0.95rem;
  color: var(--color-text-soft);
  margin-bottom: 8px;
}
.selector-result-plan {
  font-size: 1.85rem;
  color: var(--color-primary-dark);
  font-weight: 800;
  margin-bottom: 12px;
}
.selector-result-note {
  font-size: 0.95rem;
  color: var(--color-text-soft);
  margin-bottom: 24px;
  line-height: 1.55;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.selector-result-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* ---------- 5. BENEFICIOS ---------- */
.section-benefits {
  background: linear-gradient(135deg, #EEF5FD 0%, #F8FAFD 100%);
}
.benefit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 700px) {
  .benefit-grid { grid-template-columns: 1fr 1fr; }
}
.benefit-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -6px rgba(20, 88, 196, 0.12);
}
.benefit-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.benefit-card h3 {
  font-size: 1.18rem;
  margin-bottom: 8px;
  color: var(--color-navy);
}
.benefit-card p {
  color: var(--color-text-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---------- 6. CÓMO FUNCIONA ---------- */
.section-how {
  background: #FFFFFF;
}
.how-it-works {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
@media (min-width: 900px) {
  .how-it-works {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: center;
  }
}
.how-sub {
  color: var(--color-text-soft);
  font-size: 1.05rem;
  margin: 12px 0 28px;
  max-width: 52ch;
}
.how-steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.how-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.how-step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1458C4 0%, #06B6D4 100%);
  color: var(--color-white);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(20, 88, 196, 0.3);
}
.how-steps h3 {
  font-size: 1.15rem;
  margin-bottom: 4px;
  color: var(--color-navy);
}
.how-steps p {
  font-size: 0.92rem;
  color: var(--color-text-soft);
}

.how-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 48px -10px rgba(11, 29, 58, 0.16);
}
.how-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.how-card-body {
  padding: 26px 24px;
  text-align: center;
}
.how-card-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-dark);
}
.how-card-phone {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 4px 0 8px;
  letter-spacing: -0.02em;
}
.how-card-note {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-bottom: 18px;
}

/* ---------- 7. CONFIANZA ---------- */
.section-trust {
  position: relative;
  background: #08162E;
  color: #FFFFFF;
  padding: 84px 0;
  text-align: center;
  overflow: hidden;
}
.trust-bg-overlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 50%, rgba(20, 88, 196, 0.4) 0%, transparent 65%),
    radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.25) 0%, transparent 50%);
  pointer-events: none;
}
.trust-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #7DD3FC;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 18px;
}
.trust-inner h2 {
  color: #FFFFFF;
  font-size: clamp(1.85rem, 4vw, 2.45rem);
  margin-bottom: 16px;
  line-height: 1.22;
}
.trust-inner p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.08rem;
  line-height: 1.6;
  margin-bottom: 28px;
}

/* ---------- 8. PREGUNTAS FRECUENTES (FAQ) ---------- */
.section-faq {
  background: linear-gradient(180deg, #F8FAFD 0%, #FFFFFF 100%);
}
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(20, 88, 196, 0.08);
}
.faq-question {
  width: 100%;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--color-navy);
  text-align: left;
}
.faq-icon {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform 240ms ease;
}
.faq-icon::before {
  top: 9px; left: 2px; right: 2px; height: 2.5px;
}
.faq-icon::after {
  top: 2px; bottom: 2px; left: 9px; width: 2.5px;
}
.faq-question[aria-expanded="true"] .faq-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-answer p {
  padding: 0 22px 20px;
  font-size: 0.95rem;
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* ---------- 9. SECCIÓN LLAMADA DIRECTA (REEMPLAZO DE FORMULARIO) ---------- */
.section-call-direct {
  background: linear-gradient(135deg, #07152E 0%, #0D2A5E 45%, #144EAB 100%);
  color: #FFFFFF;
  padding: 84px 0;
  position: relative;
  overflow: hidden;
}
.section-call-direct::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.call-direct-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .call-direct-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
  }
}
.direct-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #7DD3FC;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 16px;
  backdrop-filter: blur(6px);
}
.call-direct-text h2 {
  color: #FFFFFF;
  font-size: clamp(1.9rem, 3.8vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 16px;
}
.call-direct-text p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 28px;
}
.direct-perks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.direct-perk {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
}
.direct-perk-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #7DD3FC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.direct-perk strong {
  display: block;
  color: #FFFFFF;
  font-size: 0.98rem;
}
.direct-perk p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  margin: 0;
}

.call-direct-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 38px 30px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.45);
  color: var(--color-text);
  text-align: center;
}
.call-direct-card h3 {
  font-size: 1.55rem;
  color: var(--color-navy);
  margin-bottom: 8px;
}
.call-direct-card p {
  color: var(--color-text-soft);
  font-size: 0.92rem;
  margin-bottom: 24px;
  line-height: 1.5;
}
.direct-phone-box {
  background: linear-gradient(135deg, #F0F6FF 0%, #E6F0FE 100%);
  border: 2px dashed rgba(20, 88, 196, 0.3);
  border-radius: var(--radius-md);
  padding: 22px 16px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.direct-phone-label {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.direct-phone-number {
  font-size: clamp(1.85rem, 3.8vw, 2.35rem);
  font-weight: 800;
  color: var(--color-primary-dark);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: transform var(--transition);
}
.direct-phone-number:hover {
  transform: scale(1.04);
  color: var(--color-primary);
}
.direct-phone-sub {
  font-size: 0.84rem;
  color: #108A38;
  font-weight: 700;
}
.btn-direct-call {
  padding: 16px 28px;
  font-size: 1.08rem;
  background: linear-gradient(135deg, #0E91A8 0%, #1377C8 100%);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 20px rgba(14, 145, 168, 0.4);
}
.btn-direct-call:hover {
  background: #08778B;
  transform: translateY(-2px);
}
.direct-trust-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  margin-top: 16px;
}

/* ---------- 10. CTA FINAL ---------- */
.cta-final {
  background: linear-gradient(135deg, #07152B 0%, #0C234C 100%);
  color: #FFFFFF;
  text-align: center;
  padding: 80px 0;
}
.cta-final-inner {
  max-width: 680px;
  margin: 0 auto;
}
.cta-final h2 {
  color: #FFFFFF;
  font-size: clamp(1.85rem, 4vw, 2.45rem);
  margin-bottom: 16px;
}
.cta-final p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.08rem;
  margin-bottom: 28px;
}
.cta-final-buttons {
  display: flex;
  justify-content: center;
}

/* ---------- FOOTER ---------- */
.site-footer {
  background:
    radial-gradient(circle at 88% 5%, rgba(14, 145, 168, 0.18), transparent 25%),
    linear-gradient(135deg, #030A18 0%, #071A38 55%, #06152F 100%);
  color: #FFFFFF;
  padding: 64px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 34px;
}
@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 32px;
  }
}
.footer-brand p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 16px;
  max-width: 270px;
}
.footer-phone {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #38BDF8;
  transition: color var(--transition);
}
.footer-phone:hover { color: #FFFFFF; }

.footer-col h3 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a,
.footer-terms-link {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  transition: color var(--transition);
  text-align: left;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.footer-col a:hover,
.footer-terms-link:hover {
  color: #38BDF8;
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
}
.footer-legal p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  line-height: 1.6;
}
.inline-terms-trigger {
  color: #38BDF8;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
}

/* ---------- MODAL TÉRMINOS Y CONDICIONES (VENTANA EMERGENTE) ---------- */
.terms-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(7, 21, 43, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms ease;
}
.terms-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
.terms-modal-container {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: 86vh;
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 65px -12px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.92) translateY(24px);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(20, 88, 196, 0.2);
}
.terms-modal-overlay.is-active .terms-modal-container {
  transform: scale(1) translateY(0);
}
.terms-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, #F8FAFD 0%, #FFFFFF 100%);
}
.terms-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary-dark);
}
.terms-modal-title-wrap h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0;
}
.terms-modal-close {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-text-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
}
.terms-modal-close:hover {
  color: var(--color-navy);
  background: var(--color-bg-alt);
}
.terms-modal-body {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.terms-modal-intro {
  color: var(--color-primary-dark);
  font-weight: 600;
  background: var(--color-primary-soft);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-primary);
  font-size: 0.92rem;
}
.terms-modal-block {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.terms-modal-block h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 6px 0;
}
.terms-modal-block p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.91rem;
  line-height: 1.6;
}
.terms-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* ---------- DIAGNÓSTICO RÁPIDO INTERACTIVO ---------- */
.quick-diagnosis {
  position: relative;
  overflow: hidden;
  background: #F4F8FF;
}
.quick-diagnosis::before {
  content: "";
  position: absolute;
  width: 580px;
  height: 580px;
  top: -360px;
  right: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2), transparent 68%);
  pointer-events: none;
}
.diagnosis-intro {
  position: relative;
  max-width: 680px;
  margin-bottom: 38px;
}
.diagnosis-intro h2 {
  font-size: clamp(1.85rem, 4.3vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.diagnosis-intro > p:last-child {
  color: var(--color-text-soft);
  max-width: 61ch;
}
.diagnosis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  position: relative;
}
.diagnosis-card {
  min-height: 330px;
  perspective: 1300px;
  outline: none;
}
.diagnosis-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.diagnosis-card:hover .diagnosis-card-inner,
.diagnosis-card:focus .diagnosis-card-inner,
.diagnosis-card.is-flipped .diagnosis-card-inner { transform: rotateY(180deg); }
.diagnosis-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.diagnosis-card-front {
  color: #FFFFFF;
  background: linear-gradient(145deg, #0A2454, #135FC5);
  box-shadow: 0 18px 32px rgba(20, 88, 196, 0.19);
}
.diagnosis-card:nth-child(2) .diagnosis-card-front { background: linear-gradient(145deg, #0D5A79, #0D98AA); }
.diagnosis-card:nth-child(3) .diagnosis-card-front { background: linear-gradient(145deg, #27366F, #6C4BC6); }
.diagnosis-number {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.8;
}
.diagnosis-card-front h3,
.diagnosis-card-back h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.15;
  color: inherit;
  margin: 18px 0 8px;
}
.diagnosis-card-front p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.91rem;
  line-height: 1.5;
}
.diagnosis-action {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 800;
}
.diagnosis-action span { font-size: 1.2rem; transition: transform var(--transition); }
.diagnosis-card:hover .diagnosis-action span { transform: translateX(4px); }
.diagnosis-card-back {
  transform: rotateY(180deg);
  color: var(--color-navy);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.diagnosis-card-back .diagnosis-number { color: var(--color-primary); opacity: 1; }
.diagnosis-card-back p { color: var(--color-text-soft); font-size: 0.91rem; line-height: 1.55; }
.diagnosis-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 45px;
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-emerald);
  color: #FFFFFF;
  font-size: 0.86rem;
  font-weight: 800;
  transition: transform var(--transition), background var(--transition);
}
.diagnosis-call:hover { background: var(--color-emerald-light); transform: translateY(-2px); }
.diagnosis-art {
  position: relative;
  height: 68px;
  width: 92px;
  margin-top: 18px;
}
.router-art {
  align-self: center;
  width: 122px;
  height: 70px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 11px 11px 17px 17px;
}
.router-art::before,
.router-art::after {
  content: "";
  position: absolute;
  bottom: 52px;
  width: 3px;
  height: 42px;
  border-radius: 999px;
  background: #FFFFFF;
  transform-origin: bottom;
}
.router-art::before { left: 17px; transform: rotate(-27deg); }
.router-art::after { right: 17px; transform: rotate(27deg); }
.router-art span,
.router-art i,
.router-art b {
  position: absolute;
  bottom: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #79F0BA;
}
.router-art span { left: 36px; }
.router-art i { left: 56px; background: #FFFFFF; }
.router-art b { left: 76px; background: #FFB6C1; }
.cable-art { align-self: center; width: 124px; }
.cable-art i {
  position: absolute;
  border: 4px solid rgba(255,255,255,0.9);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}
.cable-art i:nth-child(1) { width: 76px; height: 52px; left: 4px; top: 8px; transform: rotate(14deg); }
.cable-art i:nth-child(2) { width: 88px; height: 62px; left: 25px; top: 0; transform: rotate(160deg); }
.cable-art i:nth-child(3) { width: 55px; height: 44px; left: 39px; top: 22px; transform: rotate(-44deg); }
.loading-art { align-self: center; width: 74px; height: 74px; border: 7px solid rgba(255,255,255,0.25); border-top-color: #FFFFFF; border-radius: 50%; animation: diagnosis-spin 1.5s linear infinite; }
.loading-art span { position: absolute; inset: 15px; border-radius: 50%; border: 2px dotted rgba(255,255,255,0.75); }
@keyframes diagnosis-spin { to { transform: rotate(360deg); } }

/* ---------- BOTÓN DE PÁNICO ---------- */
.panic-support { position: fixed; right: 24px; bottom: 26px; z-index: 190; transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease; }
.panic-support.is-near-footer { opacity: 0; transform: translateY(12px) scale(0.94); visibility: hidden; pointer-events: none; }
.panic-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 7px 17px 7px 8px;
  border: 0;
  border-radius: 999px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #0D79B9, #1458C4);
  box-shadow: 0 8px 22px rgba(11, 62, 148, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.panic-button::after { content: ""; position: absolute; inset: -4px; border: 1px solid rgba(56, 189, 248, 0.55); border-radius: inherit; opacity: 0; animation: signal-ring 2.8s ease-out infinite; pointer-events: none; }
.panic-button:hover { transform: translateY(-3px); box-shadow: 0 13px 28px rgba(11, 62, 148, 0.34); }
.panic-button:active { transform: translateY(1px); box-shadow: 0 5px 14px rgba(11, 62, 148, 0.28); }
.panic-button-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.17); color: #FFFFFF; }
.panic-button-label { font-size: 0.86rem; font-weight: 800; }
@keyframes signal-ring { 0%, 36% { transform: scale(1); opacity: 0; } 42% { opacity: 0.75; } 100% { transform: scale(1.18); opacity: 0; } }
.panic-card {
  position: absolute;
  right: 0;
  bottom: calc(100% + 19px);
  width: min(330px, calc(100vw - 32px));
  padding: 24px;
  border-radius: 20px;
  color: #FFFFFF;
  background: #0B1E40;
  box-shadow: 0 22px 50px rgba(4, 16, 38, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
}
.panic-support.is-open .panic-card { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.panic-card-kicker { color: #7DD3FC; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; }
.panic-card h2 { margin: 9px 24px 8px 0; color: #FFFFFF; font-size: 1.45rem; line-height: 1.16; }
.panic-card p { color: rgba(255,255,255,0.76); font-size: 0.88rem; }
.panic-close { position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; border-radius: 50%; color: #FFFFFF; font-size: 1.3rem; line-height: 1; background: rgba(255,255,255,0.12); }
.panic-call-link { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding: 13px 15px; border-radius: 12px; color: #0B1E40; background: #FFFFFF; font-size: 0.76rem; font-weight: 700; }
.panic-call-link strong { font-size: 1.15rem; letter-spacing: 0.02em; }
@media (max-width: 899px) { .panic-support { right: 16px; bottom: 20px; } }
@media (max-width: 760px) {
  .diagnosis-grid { grid-template-columns: 1fr; gap: 16px; }
  .diagnosis-card { min-height: 292px; }
  .diagnosis-card-face { padding: 21px; }
  .diagnosis-intro { margin-bottom: 26px; }
}

/* ---------- ANIMACIONES DE SCROLL (REVEAL) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Movimiento contenido: cada bloque entra con profundidad y las tarjetas responden al cursor. */
.support-card,
.plan-card,
.about-card-inner,
.how-card,
.selector-widget {
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease, border-color 320ms ease;
}
@media (hover: hover) {
  .support-card:hover { transform: translateY(-8px) rotate(-0.3deg); box-shadow: 0 22px 38px rgba(20, 88, 196, 0.16); }
  .plan-card:hover { transform: translateY(-9px); box-shadow: 0 24px 42px rgba(11, 29, 58, 0.16); }
  .about-card-inner:hover, .how-card:hover { transform: translateY(-6px); box-shadow: 0 22px 42px rgba(11, 29, 58, 0.16); }
}

/* ---------- AJUSTES PARA TELÉFONOS ---------- */
@media (max-width: 639px) {
  body { padding-bottom: 0; }
  .container { padding: 0 16px; }
  .header-inner { height: 56px; }
  .brand { gap: 8px; }
  .brand { min-width: 0; flex-shrink: 1; }
  .brand-text { display: flex; min-width: 0; }
  .brand-sub { display: none; }
  .brand-name { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-actions { flex-shrink: 0; }
  .brand-logo-img { height: 30px; max-width: 96px; }
  .header-actions { gap: 8px; }
  .btn-header-call, .menu-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .btn-header-call span { display: none; }
  .btn-header-call svg { width: 16px; height: 16px; }
  .menu-dots-icon { gap: 3px; }
  .menu-dots-icon .dot { width: 5px; height: 5px; }
  .main-nav { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; }
  .nav-menu-card { border-radius: 18px; box-shadow: 0 20px 48px -12px rgba(11, 29, 58, 0.35); }

  /* Hero móvil: foto compacta arriba y tarjeta de mensaje debajo, ajustada a los bordes de la pantalla (una sola definición, sin reglas duplicadas). */
  .hero {
    height: auto;
    padding: 0 0 22px;
    background: #F8FAFD;
    overflow: visible;
  }
  .hero-bg-mesh,
  .hero-network-bg,
  .hero::after {
    display: none;
  }
  .hero::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 200px;
    background: var(--hero-background-image) 62% center / cover no-repeat;
    pointer-events: none;
  }
  .hero-inner {
    display: block;
    height: auto;
    padding-top: 184px;
  }
  .hero-content {
    display: block;
    height: auto;
    max-width: none;
    margin: 0;
    padding: 22px 18px 20px;
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(11, 29, 58, 0.14);
  }
  .hero-content h1 {
    color: var(--color-navy);
    font-size: clamp(1.6rem, 7.2vw, 2rem);
    line-height: 1.14;
    text-shadow: none;
    margin: 0 0 10px;
  }
  .hero-content .hero-sub {
    display: block;
    color: var(--color-text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .hero-content .hero-ctas {
    display: flex;
    gap: 10px;
    margin: 0;
  }
  .hero-content .btn-hero-call,
  .hero-content .btn-large {
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  /* El botón "Ver ofertas" (btn-ghost) está pensado para el fondo oscuro
     del hero de escritorio. En móvil el hero es una tarjeta blanca, así
     que aquí le damos estilo tipo outline para que se vea bien. */
  .hero-content .btn-ghost {
    background: #FFFFFF;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero-content .btn-ghost:hover,
  .hero-content .btn-ghost:active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
  }
  .hero-content .trust-list,
  .hero-content .eyebrow-pill,
  .hero-visual {
    display: none;
  }
  .section { padding: 46px 0; }
  .section-head { margin-bottom: 30px; }
  .section-head p { font-size: 0.96rem; }
  .about-text { padding: 23px 18px; border-radius: 20px; }
  .support-features-grid { gap: 14px; }
  .support-card { padding: 22px 20px; }
  .support-card-icon { width: 40px; height: 40px; border-radius: 11px; }
  .support-card-icon svg { width: 20px; height: 20px; }
  .about-perk-icon { width: 26px; height: 26px; }
  .about-perk-icon svg { width: 14px; height: 14px; }
  .benefit-card-icon { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 12px; }
  .benefit-card-icon svg { width: 19px; height: 19px; }
  .direct-perk-icon { width: 34px; height: 34px; border-radius: 9px; }
  .direct-perk-icon svg { width: 18px; height: 18px; }
  .option-icon svg { width: 20px; height: 20px; }

  /* Oferta destacada: conserva el margen exterior y compacta su contenido. */
  .special-offer-wrap { margin-bottom: 38px; }
  .special-offer-card { padding: 25px 19px; gap: 22px; border-radius: 20px; }
  .offer-eyebrow { font-size: 0.68rem; margin-bottom: 8px; letter-spacing: 0.1em; }
  .offer-title { font-size: 1.45rem; line-height: 1.16; margin-bottom: 10px; }
  .offer-description { font-size: 0.87rem; line-height: 1.48; margin-bottom: 16px; }
  .offer-price-row { gap: 8px; margin-bottom: 16px; }
  .offer-price-currency { font-size: 1.55rem; }
  .offer-price-num { font-size: 2.35rem; }
  .offer-price-freq { font-size: 0.82rem; }
  .offer-badge-pill { width: 100%; padding: 6px 9px; font-size: 0.7rem; line-height: 1.35; gap: 6px; }
  .offer-badge-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
  .offer-price-context { font-size: 0.78rem; margin: -2px 0 16px; }
  .btn-offer-call { min-height: 50px; padding: 12px 14px; font-size: 0.88rem; }
  .btn-offer-call svg { width: 17px; height: 17px; flex-shrink: 0; }
  .offer-legal-note { font-size: 0.72rem; line-height: 1.42; margin-top: 12px; }
  .offer-included-box { padding: 18px 16px; border-radius: 16px; }
  .included-title { font-size: 0.7rem; margin-bottom: 9px; }
  .included-list { margin-bottom: 10px; }
  .included-list li { gap: 9px; padding: 8px 0; font-size: 0.8rem; line-height: 1.35; }
  .included-bullet { width: 6px; height: 6px; }
  .included-foot-note { font-size: 0.72rem; margin-top: 9px; }
  .site-footer { padding: 48px 0 28px; }

  /* Botón flotante de "¿Sin señal?": ícono circular compacto en teléfonos, para no tapar info ni botones cercanos. */
  .panic-support { right: 14px; bottom: 14px; }
  .panic-button { min-height: 46px; width: 46px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
  .panic-button-icon { width: 46px; height: 46px; background: transparent; }
  .panic-button-icon svg { width: 20px; height: 20px; }
  .panic-button-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .panic-card { width: min(280px, calc(100vw - 24px)); bottom: calc(100% + 12px); }
  .panic-card h2 { font-size: 1.2rem; margin: 8px 20px 6px 0; }
  .panic-card p { font-size: 0.82rem; }
}

/* ---------- REFRESCO VISUAL: cálido, cercano y fácil de recorrer ---------- */
:root {
  --color-bg: #fbfaf7;
  --color-bg-alt: #f1f7fb;
  --color-surface: #ffffff;
  --color-text: #17263d;
  --color-text-soft: #55647a;
  --color-border: #d5e1eb;
  --color-border-subtle: #e7edf2;
  --color-primary: #1768c9;
  --color-primary-light: #3685df;
  --color-primary-dark: #0b4f9f;
  --color-primary-soft: #eaf3ff;
  --color-cyan: #0798aa;
  --color-cyan-light: #31bdc5;
  --color-cyan-soft: #e8f8f7;
  --color-emerald: #138a76;
  --color-emerald-light: #27ae91;
  --color-emerald-soft: #e8f7f1;
  --color-amber: #d98c2d;
  --color-amber-light: #f2b75d;
  --color-amber-soft: #fff1dc;
  --color-navy: #152846;
  --font-display: "Outfit", "DM Sans", sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.035em;
}

.site-header {
  border-color: rgba(213, 225, 235, 0.88);
}
.site-header::before {
  background: rgba(255, 253, 249, 0.94);
}

.section-support {
  background:
    radial-gradient(circle at 88% 18%, rgba(49, 189, 197, 0.13), transparent 25%),
    linear-gradient(180deg, #eaf5fc 0%, #f8fbfd 100%);
  border-radius: 0;
  box-shadow: none;
}

.section-plans {
  background:
    radial-gradient(circle at 9% 18%, rgba(242, 183, 93, 0.15), transparent 28%),
    linear-gradient(180deg, #fff8ef 0%, #fffdf9 100%);
}

.section-selector {
  background:
    radial-gradient(circle at 84% 20%, rgba(23, 104, 201, 0.1), transparent 28%),
    #f1f7fb;
}

.section-benefits {
  background:
    radial-gradient(circle at 10% 85%, rgba(49, 189, 197, 0.12), transparent 24%),
    linear-gradient(135deg, #edf8f7 0%, #f9fcfb 100%);
}

.section-how {
  background:
    radial-gradient(circle at 90% 12%, rgba(242, 183, 93, 0.14), transparent 25%),
    #fffaf3;
}

.section-faq {
  background:
    radial-gradient(circle at 91% 12%, rgba(23, 104, 201, 0.11), transparent 25%),
    #f1f6fb;
}

.support-card,
.benefit-card,
.faq-item,
.selector-widget {
  border-color: rgba(168, 194, 213, 0.52);
  box-shadow: 0 10px 24px rgba(21, 40, 70, 0.055);
}

.support-card:nth-child(2n),
.benefit-card:nth-child(2n) {
  background: #fffaf2;
  border-color: #f0dfc6;
}

.about-text {
  background: rgba(255, 255, 255, 0.88);
}

.btn-primary,
.btn-hero-call {
  background: linear-gradient(135deg, #1768c9 0%, #0798aa 100%);
}

.btn-primary:hover,
.btn-hero-call:hover {
  background: linear-gradient(135deg, #0b4f9f 0%, #087685 100%);
}

@media (max-width: 639px) {
  .section-support,
  .section-plans,
  .section-selector,
  .section-benefits,
  .section-how,
  .section-faq {
    background-size: auto;
  }
}