/* Custom styles to enhance visual premium aesthetic & Montserrat typography layout */
:root {
  color-scheme: dark;
  --site-bg: #111E2F;
  --site-bg-secondary: #162942;
  --site-surface: #1B3452;
  --site-border: rgba(255, 255, 255, 0.12);
  --site-text: #E6F4FF;
  --site-text-muted: #94A3B8;
  --site-accent: #00A8FF;
  --site-accent-glow: #38BDF8;
  --site-accent-dark: #0056A6;
  --site-green: #22C55E;
  --site-gold: #D4AF37;
}

html, body {
  min-height: 100vh;
  background: var(--site-bg) !important;
  color: var(--site-text);
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  position: relative;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
}

/* Premium Glow Effects */
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  opacity: 0.4;
}

body::before {
  top: -10rem;
  left: -10rem;
  width: 45rem;
  height: 45rem;
  background: radial-gradient(circle, var(--site-accent), transparent 70%);
}

body::after {
  bottom: -10rem;
  right: -10rem;
  width: 40rem;
  height: 40rem;
  background: radial-gradient(circle, var(--site-green), transparent 70%);
}

.page-shell {
  position: relative;
  z-index: 1;
}

/* Section Uniformity */
section, 
.hero-shell, 
.stats-strip {
  background: transparent !important;
  position: relative;
}

/* Components & Cards with Surface Color */
article, 
.stat-card, 
details, 
.glass-panel, 
footer,
.hero-shell .max-w-md.bg-white,
#beneficios article,
#planes article {
  overflow: visible !important;
}


/* Header & Nav */
header.sticky {
  background: rgba(11, 29, 51, 0.85) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--site-border) !important;
}

.nav-link {
  color: var(--site-text-muted) !important;
  transition: color 0.3s ease;
  position: relative;
  padding-bottom: 0.2rem;
}

.nav-link:hover {
  color: var(--site-accent-glow) !important;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--site-accent), var(--site-green)) !important;
  transition: width 0.25s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Typography & Colors */
h1, h2, h3, h4, h5, h6, strong {
  color: var(--site-text) !important;
}

p, span, li {
  color: var(--site-text-muted);
}

.text-slateBlue, .text-slate-600, .text-slate-500, .text-slate-400, .text-slate-300 {
  color: var(--site-text-muted) !important;
}

/* Call to Action & Buttons */
.bg-emerald-500, 
.bg-emerald-600, 
.bg-accent-teal, 
.hero-cta-primary {
  background: linear-gradient(135deg, var(--site-accent), var(--site-accent-dark)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 25px -5px rgba(0, 168, 255, 0.4) !important;
  transition: all 0.3s ease;
}

.bg-emerald-500:hover, 
.hero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(0, 168, 255, 0.6) !important;
  background: linear-gradient(135deg, var(--site-accent-glow), var(--site-accent)) !important;
}

.hero-cta-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--site-border) !important;
  color: var(--site-text) !important;
}

/* Clean up of legacy background classes */
.bg-white, 
.bg-softGray, 
.bg-slate-50, 
.bg-slate-100,
.bg-slate-900\/80,
.bg-white\/5,
.bg-slateDeep {
  background: transparent !important;
}

/* Card Specific Polishes */
.stat-card::after {
  background: linear-gradient(90deg, var(--site-accent), var(--site-green)) !important;
}

.hero-badge {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--site-border) !important;
}

/* Scrollbar (Chrome/Safari) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--site-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--site-bg-secondary);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--site-surface);
}

/* Mobile responsive fixes */
@media (max-width: 767px) {
  html {
    font-size: 70%;
  }
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.03em;
  line-height: 1.1;
}

p, span, li, a {
  letter-spacing: 0;
  line-height: 1.7;
}

.hover-premium {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-premium:hover {
  transform: translateY(-6px);
  border-color: var(--site-accent-glow) !important;
  box-shadow: 0 24px 50px -18px rgba(0, 168, 255, 0.4) !important;
}

/* Form controls */
select, input {
  background-color: var(--site-bg-secondary) !important;
  border: 1px solid var(--site-border) !important;
  color: var(--site-text) !important;
}