/* ============================================================
   THEME BLUE — Light = azul tech / Dark = violeta brillante.
   Se carga DESPUÉS de styles.css y shared.css para sobrescribir
   el accent (que era violeta fijo). Affecta logo, botones, glows,
   gradients, eyebrows — toda la paleta accent del sitio.
   ============================================================ */

/* ─────── LIGHT (default) — AZUL CORPORATE: cemex deep + brillante ─────── */
:root {
  --accent:           #003DA5;          /* azul Cemex profundo */
  --accent-color:     #003DA5;
  --accent-2:         #0052CC;          /* azul brillante */
  --accent-3:         #002855;          /* azul navy */
  --accent-darker:    #001a40;
  --accent-glow:      rgba(0, 61, 165, 0.30);
  --accent-glow-soft: rgba(0, 82, 204, 0.14);
  --accent-soft:      rgba(0, 82, 204, 0.10);
  --grad-brand:       linear-gradient(135deg, #003DA5 0%, #0052CC 100%);
  --grad-accent:      linear-gradient(135deg, #001a40 0%, #003DA5 50%, #0052CC 100%);
  --grad-text:        linear-gradient(135deg, #003DA5 0%, #0052CC 100%);
}

/* ─────── DARK (data-theme="dark") — violeta brillante ─────── */
[data-theme="dark"] {
  --accent:           #818cf8;          /* indigo-400 brillante */
  --accent-color:     #818cf8;
  --accent-2:         #a855f7;          /* purple-500 */
  --accent-3:         #c084fc;          /* purple-400 */
  --accent-darker:    #6366f1;
  --accent-glow:      rgba(168,85,247,0.30);
  --accent-glow-soft: rgba(168,85,247,0.14);
  --accent-soft:      rgba(168,85,247,0.12);
  --grad-brand:       linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
  --grad-accent:      linear-gradient(135deg, #60a5fa 0%, #818cf8 50%, #c084fc 100%);
  --grad-text:        linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
}

/* ─────── Topbar logo aura — azul Cemex (light) / violeta (dark) ─────── */
.nv-topbar__logo {
  box-shadow:
    0 8px 28px rgba(0, 61, 165, 0.35),
    0 0 0 5px rgba(0, 82, 204, 0.10),
    0 0 22px rgba(0, 82, 204, 0.22) !important;
  border-color: rgba(0, 61, 165, 0.20) !important;
}
[data-theme="dark"] .nv-topbar__logo {
  box-shadow:
    0 10px 40px rgba(99, 102, 241, 0.45),
    0 0 0 6px rgba(255, 255, 255, 0.08),
    0 0 32px rgba(124, 58, 237, 0.25) !important;
  border-color: rgba(255,255,255,0.20) !important;
}

/* Body fondo blanco puro en light + sin glows degradados (solo dot grid) */
:root:not([data-theme="dark"]) body {
  background: #ffffff !important;
}
:root:not([data-theme="dark"]) body::after {
  display: none !important;
}
/* Glow del iPhone también fuera en light */
:root:not([data-theme="dark"]) .hero__device::before {
  display: none !important;
}
/* Glows del hero (los blobs azul/violeta arriba del eyebrow) — fuera en light */
:root:not([data-theme="dark"]) .hero__glow,
:root:not([data-theme="dark"]) .hero__glow--1,
:root:not([data-theme="dark"]) .hero__glow--2 {
  display: none !important;
}

/* Topbar: línea inferior azul translúcida en light (cuando NO scrolled) */
:root:not([data-theme="dark"]) .nv-topbar {
  border-bottom: 1px solid rgba(0, 82, 204, 0.12) !important;
}
:root:not([data-theme="dark"]) .nv-topbar.is-scrolled {
  border-bottom-color: rgba(0, 82, 204, 0.18) !important;
}

/* Hero ambient — SOLO en dark mode (light queda con fondo blanco) */
.section--hero { position: relative; }
[data-theme="dark"] body {
  /* dark se queda con su bg natural */
}
[data-theme="dark"] .section--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(-45deg, #001028, #003DA5, #001a40, #002855);
  background-size: 400% 400%;
  animation: heroGradient 15s ease infinite;
  opacity: 0.40;
}
@keyframes heroGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.section--hero .hero__inner,
.section--hero .container {
  position: relative;
  z-index: 1;
}