/* ============ Educaros.com — static styles ============ */

:root {
  --brand-navy-deep: #0e1836;
  --brand-navy: #182750;
  --brand-blue: #2a4bd6;
  --brand-cyan: #5cc5e6;
  --brand-orange: #f39322;
  --brand-green: #3aa960;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

.bg-hero-gradient {
  background:
    radial-gradient(ellipse at top right, rgba(42,75,214,0.55), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(24,39,80,0.6), transparent 55%),
    linear-gradient(180deg, #0d1631, #16244a);
}
.bg-section-gradient { background: linear-gradient(180deg, #0e1836, #16244a); }

.text-gradient-brand {
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.card-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
}

.glow-orange { box-shadow: 0 20px 60px -20px rgba(243,147,34,0.55); }

.pricing-bg {
  background-color: #eef1f5;
  background-image: radial-gradient(circle at 1px 1px, rgba(15,27,61,0.08) 1px, transparent 0);
  background-size: 28px 28px;
}
.text-white-hover { color:#f39322; }
/*.text-white-hover { color:#888; }
.text-white-hover:hover{ color:#f39322; }*/

/* ============= LIGHT THEME OVERRIDES ============= */
html[data-theme="light"] body { background:#f5f7fa; color:#0f1b3d; }
html[data-theme="light"] .bg-brand-navy-deep { background-color:#ffffff !important; }
html[data-theme="light"] .bg-brand-navy { background-color:#eef1f5 !important; }
html[data-theme="light"] .bg-section-gradient { background: linear-gradient(180deg,#f5f7fa,#ffffff) !important; }
html[data-theme="light"] .bg-hero-gradient {
  background:
    radial-gradient(ellipse at top right, rgba(59,130,246,0.12), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(45,122,62,0.10), transparent 55%),
    linear-gradient(180deg,#f5f7fa,#ffffff) !important;
}
html[data-theme="light"] .card-glass {
  background:#ffffff !important;
  border-color: rgba(15,27,61,0.10) !important;
  box-shadow: 0 10px 40px -20px rgba(15,27,61,0.15);
}

html[data-theme="light"] .text-white,
html[data-theme="light"] [class*="text-white/"] { color:#0f1b3d !important; }
html[data-theme="light"] .text-white\/80,
html[data-theme="light"] .text-white\/75,
html[data-theme="light"] .text-white\/70 { color: rgba(15,27,61,0.78) !important; }
html[data-theme="light"] .text-white\/60,
html[data-theme="light"] .text-white\/50 { color: rgba(15,27,61,0.60) !important; }
html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/10 { background-color: rgba(15,27,61,0.04) !important; }
html[data-theme="light"] [class*="border-white/"] { border-color: rgba(15,27,61,0.12) !important; }
html[data-theme="light"] #site-header { background-color: rgba(255,255,255,0.85) !important; border-color: rgba(15,27,61,0.08) !important; }
html[data-theme="light"] .bg-white\/\[0\.03\] { background-color: rgba(15,27,61,0.03) !important; }

/* opt-out: keep dark inside .force-dark blocks */
html[data-theme="light"] .force-dark,
html[data-theme="light"] .force-dark * { /*color:#ffffff !important;*/ }
html[data-theme="light"] .force-dark .text-white\/80,
html[data-theme="light"] .force-dark .text-white\/75,
html[data-theme="light"] .force-dark .text-white\/70 { color: rgba(255,255,255,0.78) !important; }
html[data-theme="light"] .force-dark .text-white\/60,
html[data-theme="light"] .force-dark .text-white\/50,
html[data-theme="light"] .force-dark .text-white\/40 { color: rgba(255,255,255,0.55) !important; }
html[data-theme="light"] .force-dark [class*="bg-white/"] { background-color: rgba(255,255,255,0.06) !important; }
html[data-theme="light"] .force-dark [class*="border-white/"] { border-color: rgba(255,255,255,0.14) !important; }

/* --- NUEVAS REGLAS PARA EL HOVER (#f39322) --- */

/* 1. Modo Oscuro (Por defecto) o bloques force-dark */
.text-white:hover,
[class*="text-white/"]:hover,
html[data-theme="light"] .force-dark .text-white:hover,
html[data-theme="light"] .force-dark [class*="text-white/"]:hover { 
  color: #f39322 !important; 
}

/* 2. Modo Claro */
html[data-theme="light"] .text-white:hover,
html[data-theme="light"] [class*="text-white/"]:hover { 
  color: #f39322 !important; 
}