/* ================================================================
   PALETA LA FAVORITA — ESTÁNDAR EJECUTIVO ULTRA-PREMIUM 2026
   Azul Marino Calmado (No saturado), Acentos Oro Noble y Contraste Perfecto
   ================================================================ */

:root {
  /* Azules Marinos Calmados & Elegantes (Cero fatiga visual) */
  --azul: #1e3a5f;
  --azul-osc: #142842;
  --azul-tinta: #0d1b2a;
  --azul-claro: #335985;
  --azul-suave: #edf3f8;
  --azul-glow: rgba(30, 58, 95, 0.14);

  /* Oro Noble & Acentos */
  --gold: #c5a059;
  --gold-bright: #d4af37;
  --gold-deep: #96702e;
  --gold-glow: rgba(197, 160, 89, 0.25);
  --gold-badge: rgba(197, 160, 89, 0.12);
  --ambar: #b45309;

  /* Verde Botánico & Éxito */
  --verde: #15803d;
  --verde-osc: #166534;
  --verde-bg: #f0fdf4;
  --verde-glow: rgba(21, 128, 61, 0.18);
  --success: #15803d;
  --whatsapp: #25d366;
  --whatsapp-d: #128c7e;
  --whatsapp-bg: #eaf8ef;

  /* Rubí & Alertas */
  --rojo: #e11d48;
  --rojo-osc: #be123c;
  --rojo-bg: #fff1f2;
  --crimson: #e11d48;
  --error: #be123c;

  /* Superficies Limpias y Cálidas */
  --crema: #fbfcfe;
  --hueso: #f4f6fa;
  --paper: #ffffff;
  --paper-2: #f8fafc;
  --plata: #cbd5e1;
  --ground: #f1f5f9;

  /* Bordes & Líneas Sutiles */
  --linea: rgba(30, 58, 95, 0.10);
  --linea-2: rgba(30, 58, 95, 0.05);
  --rule: rgba(30, 58, 95, 0.12);
  --rule-strong: rgba(30, 58, 95, 0.25);

  /* Tipografía de Alto Contraste & Descanso Visual */
  --texto: #0f172a;
  --texto-2: #334155;
  --texto-3: #64748b;
  --ink: #0d1b2a;
  --ink-2: #1e293b;
  --ink-3: #475569;
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.88);
  --text-faint: rgba(255, 255, 255, 0.60);

  /* Efectos Frosted Glass */
  --glass-card: rgba(255, 255, 255, 0.88);
  --glass-blur: blur(14px) saturate(180%);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-bevel: inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);

  /* Sombras Multicapa Suaves */
  --sombra-xs: 0 1px 3px rgba(13, 27, 42, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --sombra: 0 4px 14px -2px rgba(13, 27, 42, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --sombra-md: 0 8px 24px -4px rgba(30, 58, 95, 0.08), 0 4px 10px -2px rgba(13, 27, 42, 0.04);
  --sombra-lg: 0 18px 45px -8px rgba(13, 27, 42, 0.14), 0 6px 18px -3px rgba(13, 27, 42, 0.06);
  --sombra-hover: 0 12px 30px -4px rgba(30, 58, 95, 0.16), 0 4px 12px -2px rgba(13, 27, 42, 0.06);

  /* Escala de Redondeos */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* Transiciones */
  --trans: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

html, body {
  background-color: var(--crema) !important;
  color: var(--texto);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
}

/* ============================================================
   ESTRUCTURAS DE CRISTAL & ELEVACIÓN
   ============================================================ */
.card, .paso-card, .about-card, .qz-card, .lider-card, .tile {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sombra) !important;
  border: 1px solid var(--linea) !important;
  transition: var(--trans) !important;
}

.card:hover, .paso-card:hover, .about-card:hover, .lider-card:hover, .tile:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sombra-hover) !important;
  border-color: rgba(30, 58, 95, 0.25) !important;
}

/* Botones */
button, .btn, .btn-primary, .btn-pedir-grande {
  border-radius: var(--r-md) !important;
  transition: var(--trans) !important;
}

button:active, .btn:active, .btn-pedir-grande:active {
  transform: scale(0.982) !important;
}

.badge, .card-rol, .lider-sd, .diag-banner {
  border-radius: var(--r-pill) !important;
}

/* ============================================================
   HERO SECTIONS (Fondo Marino Profundo, Textos Blancos)
   ============================================================ */
html body section.hero,
html body .hero {
  background: linear-gradient(160deg, #1e3a5f 0%, #112338 100%) !important;
}

html body section.hero *,
html body .hero * {
  color: #ffffff !important;
}

html body .hero .hero-subtitle { color: rgba(255,255,255,.90) !important; }
html body .hero .hero-eyebrow { color: #d4af37 !important; font-weight: 800 !important; }
html body .hero .hero-stats span:not(strong):not(b) { color: rgba(255,255,255,.75) !important; }

/* Botones Hero */
html body main > section.hero .btn-primary,
html body main > section.hero a.btn-primary,
html body main > section.hero a[class*="cta"]:not([class*="ghost"]):not([class*="secondary"]) {
  background: #1e3a5f !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  box-shadow: 0 4px 14px rgba(13,27,42,0.3) !important;
}
html body main > section.hero .btn-primary:hover {
  background: #142842 !important;
  color: #ffffff !important;
}

html body main > section.hero .btn-ghost,
html body main > section.hero .btn-secondary,
html body main > section.hero a.btn-ghost,
html body main > section.hero a[class*="ghost"],
html body main > section.hero a[class*="secondary"] {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,.40) !important;
}
html body main > section.hero .btn-ghost:hover,
html body main > section.hero a.btn-ghost:hover {
  background: rgba(255,255,255,.20) !important;
  color: #ffffff !important;
}

/* ============================================================
   SECCIÓN "ACADEMIA INTERNA" EN LANDING
   ============================================================ */
body section[class*="academia"]:not(.hero):not(.modulo-hero):not(.leccion-hero):not(.academia-hero),
body section[class*="equipo"],
body section[class*="team"],
body section.bloque-academia,
body section.bloque-equipo {
  background: linear-gradient(160deg, #142842 0%, #0d1b2a 100%) !important;
}

body section[class*="academia"]:not(.hero) .eyebrow,
body section[class*="academia"]:not(.hero) .academia-eyebrow,
body section[class*="equipo"] .eyebrow,
body section[class*="team"] .eyebrow {
  color: #d4af37 !important;
  font-weight: 800 !important;
}

body section[class*="academia"]:not(.hero) h1,
body section[class*="academia"]:not(.hero) h2,
body section[class*="academia"]:not(.hero) .h1,
body section[class*="academia"]:not(.hero) .h2,
body section[class*="equipo"] h1,
body section[class*="equipo"] h2,
body section[class*="equipo"] .h1,
body section[class*="equipo"] .h2 {
  color: #ffffff !important;
}

body section[class*="academia"]:not(.hero) p,
body section[class*="equipo"] p {
  color: rgba(255,255,255,.88) !important;
}

body section[class*="academia"]:not(.hero) .btn-primary,
body section[class*="academia"]:not(.hero) a.btn-primary,
body section[class*="equipo"] .btn-primary,
body section[class*="equipo"] a.btn-primary {
  background: #1e3a5f !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
html body .footer,
html body footer,
html body footer.footer {
  background: #0d1b2a !important;
  color: #ffffff !important;
}

html body .footer *,
html body footer * { color: #ffffff !important; }

html body .footer a,
html body .footer a:link,
html body .footer a:visited,
html body footer a,
html body footer a:visited {
  color: rgba(255,255,255,.85) !important;
  text-decoration: none !important;
}

html body .footer a:hover,
html body footer a:hover { color: #ffffff !important; }

/* ============================================================
   TOPBAR & HEADERS (Oscuras con borde oro)
   ============================================================ */
.topbar, header.topbar, .qz-topbar, .appbar {
  background: #0d1b2a !important;
  border-bottom: 2px solid var(--gold) !important;
  box-shadow: 0 4px 20px rgba(13, 27, 42, 0.15) !important;
}

.topbar .topbar-title, header.topbar .topbar-title {
  color: #ffffff !important;
}
.topbar .topbar-sub, header.topbar .topbar-sub {
  color: rgba(255,255,255,0.7) !important;
}

/* ============================================================
   BOTONES SECUNDARIOS (CORRECCIÓN CRÍTICA DE VISIBILIDAD)
   ============================================================ */
.btn-secondary, a.btn-secondary, button.btn-secondary,
.topbar-actions .btn-secondary, .topbar .btn-secondary {
  background: #ffffff !important;
  color: #1e3a5f !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(13, 27, 42, 0.10) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: var(--r-md) !important;
  text-decoration: none !important;
}

.btn-secondary:hover, a.btn-secondary:hover, button.btn-secondary:hover,
.topbar-actions .btn-secondary:hover, .topbar .btn-secondary:hover {
  background: #f1f5f9 !important;
  border-color: #1e3a5f !important;
  color: #142842 !important;
  transform: translateY(-1px) !important;
}

.btn-secondary *, a.btn-secondary *, button.btn-secondary * {
  color: #1e3a5f !important;
}

/* Botones Primarios Generales */
.btn-primary, .btn-primary:link, .btn-primary:visited,
.modulo-cta, .modulo-cta:visited, .cta-primary {
  background: #1e3a5f !important;
  color: #ffffff !important;
  border: none !important;
}
.btn-primary:hover, .modulo-cta:hover {
  background: #142842 !important;
  color: #ffffff !important;
}

/* ============================================================
   SIDEBAR ADMIN
   ============================================================ */
.sidebar { background: #0d1b2a !important; }
.sb-item, .sb-item:visited { color: rgba(255,255,255,.75) !important; }
.sb-item.active { background: rgba(255,255,255,.1) !important; color: #ffffff !important; }

/* Enfoque en Inputs */
input:focus, select:focus, textarea:focus {
  border-color: #1e3a5f !important;
  box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.12) !important;
}

/* Eyebrows en secciones claras */
section:not(.hero):not([class*="academia"]):not([class*="equipo"]):not([class*="team"]):not(footer) .eyebrow {
  color: #1e3a5f !important;
  font-weight: 800 !important;
}

section:not(.hero):not([class*="academia"]):not([class*="equipo"]):not([class*="examen"]):not(footer) h1 em,
section:not(.hero):not([class*="academia"]):not([class*="equipo"]):not([class*="examen"]):not(footer) h2 em {
  color: #1e3a5f !important;
  font-style: italic !important;
}

section[class*="examen"] h1 em,
section[class*="examen"] h2 em {
  color: #d4af37 !important;
  font-style: italic !important;
}