/* ==========================================================================
   REALCE — León Telecom  (ligero: sin efectos pesados)
   · Logo en recuadro blanco NÍTIDO (sin borrón)
   · Paleta con violeta (coloreometría de marca)
   · Barra de progreso de scroll + nav que se intensifica
   · 2 orbes de color ESTÁTICOS y suaves (se pintan una vez)
   · Se APAGAN las animaciones continuas pesadas para mejorar el rendimiento
   Reversible: quitar los <link>/<script> de realce.
   ========================================================================== */

/* ---------- 1) LOGO: león BLANCO recoloreado (sin caja, con glow) ------
   La cara se ve gracias a los recortes transparentes que dejan pasar el
   fondo oscuro. Solo se le da un glow sutil para presencia premium. ------ */
.hero-logo {
  max-height: 158px !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  /* SIN filtro: el glow cyan de premium.css (blur 26px) difuminaba el logo+texto
     en un "cuadrado" feo. El logo ya trae su contorno blanco, no necesita glow. */
  filter: none !important;
  animation: none !important;   /* quita el "breathing" que pulsaba el glow */
}
.logo {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-height: 56px !important;
  filter: none !important;
}
.logo:hover { filter: none !important; animation: none !important; }  /* sin glow/giro al pasar el mouse */

/* ---------- NAV: separar la marca del menú ("LEÓN TELECOM" ↔ "Inicio") --- */
/* El menú llenaba los 1200px y el logo quedaba pegado a "Inicio".
   Damos un respiro garantizado y un poco más de ancho, y ajustamos el gap
   del menú para que todo siga cabiendo en una sola línea. */
.navbar .container-nav { max-width: 1280px !important; gap: 2.2rem !important; }
.navbar .nav-menu { gap: 1.4rem !important; }
@media (max-width: 768px) {
  .logo { max-height: 46px !important; }
  .navbar .container-nav { gap: 1rem !important; }
}

/* ---------- 2) PALETA MÁS VIVA (se suma el violeta) ------------------- */
.section-title,
.contacto-section .section-title,
.hero-title {
  background: linear-gradient(115deg,
              #9af4ff 0%, #37d9d9 24%, #4f8ff5 52%, #7c5cff 78%, #46d8e6 100%) !important;
  background-size: 100% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: none !important;   /* estático = sin repintar el texto cada frame */
}
.brand-text {
  background: linear-gradient(135deg, #dffbff 0%, #46d8e6 38%, #5b8cff 76%, #7c5cff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.plan-card::before {
  background: linear-gradient(90deg, #37d9d9 0%, #5b8cff 55%, #7c5cff 100%) !important;
}
.nav-link::after {
  background: linear-gradient(90deg, #37d9d9 0%, #5b8cff 60%, #7c5cff 100%) !important;
}

/* Botones y precios a la MISMA familia cyan → azul (armonía) */
.btn-primary, .btn-plan {
  background: linear-gradient(135deg, #6ff0f6 0%, #37d9d9 46%, #5b8cff 100%) !important;
  color: #06202e !important;
}
.plan-price {
  background: linear-gradient(120deg, #8ff2ff 0%, #37d9d9 46%, #6f97ff 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Enlaces de texto en el mismo cyan de marca */
a { color: #46d8e6; }

/* ---------- BOTÓN "TIENDA" EN EL NAV (destacado) --------------------- */
.nav-tienda {
  background: linear-gradient(135deg, #37d9d9 0%, #4f8ff5 100%) !important;
  color: #06202e !important;
  padding: 9px 18px !important;
  border-radius: 24px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(55,217,217,0.28) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.nav-tienda:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(79,143,245,0.40) !important;
  color: #06202e !important;
}
.nav-tienda::after { display: none !important; }  /* sin el subrayado de los demás links */

/* ---------- PÍLDORA DE PROMO (hero) ---------------------------------- */
.hero-promo {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 4px auto 30px; padding: 10px 22px;
  border: 1px solid rgba(70,216,230,0.35); border-radius: 40px;
  background: linear-gradient(135deg, rgba(55,217,217,0.15), rgba(124,92,255,0.13));
  color: #dff8ff; font-weight: 600; font-size: 0.98rem; letter-spacing: 0.3px;
  box-shadow: 0 6px 20px rgba(4,18,35,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.hero-promo strong {
  background: linear-gradient(90deg, #46d8e6, #7c5cff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ---------- 3) BARRA DE PROGRESO + NAV SCROLLED ----------------------- */
#lt-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000;
  background: linear-gradient(90deg, #37d9d9, #5b8cff, #7c5cff);
  box-shadow: 0 0 12px rgba(91,140,255,0.6); pointer-events: none;
}
.navbar.lt-scrolled {
  background: linear-gradient(135deg, rgba(8,16,28,0.92) 0%, rgba(13,22,36,0.85) 100%) !important;
  box-shadow: 0 12px 40px rgba(4,18,35,0.5) !important;
  border-bottom: 1px solid rgba(143,252,255,0.16) !important;
}

/* ---------- 4) FONDO CON MÁS COLOR (teal + azul + violeta) ------------ */
/* Hero: base oscura + glows de marca en las esquinas (más vida, sigue legible) */
.hero-section {
  background:
    radial-gradient(120% 95% at 14% 18%, rgba(46,216,230,0.20) 0%, transparent 52%),
    radial-gradient(110% 90% at 86% 26%, rgba(77,124,240,0.18) 0%, transparent 55%),
    radial-gradient(130% 120% at 62% 104%, rgba(124,92,255,0.16) 0%, transparent 60%),
    linear-gradient(135deg, #07101b 0%, #0b1626 45%, #0b1730 100%) !important;
}
/* Aurora de TODA la página: color sutil detrás de las secciones (estática,
   solo degradados = barata; sin blur ni orbes). */
body::after {
  background:
    radial-gradient(42% 46% at 12% 16%, rgba(46,216,230,0.15) 0%, transparent 62%),
    radial-gradient(44% 48% at 88% 24%, rgba(77,124,240,0.14) 0%, transparent 62%),
    radial-gradient(48% 52% at 74% 86%, rgba(124,92,255,0.14) 0%, transparent 64%) !important;
  opacity: 0.9 !important;
}

/* ---------- RENDIMIENTO: aligerar los blur en vivo -------------------- */
/* El backdrop-filter del nav se recalcula en cada frame al hacer scroll:
   bajamos el radio (24→12) para que sea mucho más ligero. */
.navbar { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
.plan-card { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }

/* ---------- 5) RENDIMIENTO: apagar animaciones continuas pesadas ------ */
/* El brillo rotatorio del hero (200%×200%) y la aurora se dejan ESTÁTICOS. */
.hero-section::before { animation: none !important; }
body::after { animation: none !important; }
/* Aros flotantes del hero: tenían blur animado (carísimo) y casi no se ven. */
.floating-element { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---------- Accesibilidad / móvil ------------------------------------- */
@media (max-width: 768px) { .lt-orb { filter: blur(36px); opacity: 0.28; } }
@media (prefers-reduced-motion: reduce) { .lt-orb { display: none; } }