/* ════════════════════════════════════════════════
   MODO OSCURO — Elegante, legible, profesional
   Inspirado en dashboards premium (Notion, Linear)
════════════════════════════════════════════════ */

.dark-mode {
  /* Fondos en escala de grises cálidos */
  --bg: #141618;
  --bg-section: #1e2124;
  --surface: rgba(36, 40, 45, 0.92);

  /* Textos con buen contraste pero no queman */
  --text: #e8eaed;
  --text-light: #9aa0a6;
  --gray: #bdc1c6;
  --dark: #e8eaed;
  --title: #f1f3f4;
  --white: #1e2124;

  /* Marca: un poco más brillante para destacar sobre oscuro */
  --primary: #4dabf7;
  --primary-dark: #339af0;
  --secondary: #fcc419;
  --accent: #4c6ef5;

  /* Bordes más sutiles */
  --border: #2d3238;
  --shadow: 0 4px 20px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);

  /* Cursos: mantener colores reconocibles pero más suaves */
  --course-a2: linear-gradient(135deg, #e67700, #f59f00);
  --course-c1: linear-gradient(135deg, #1971c2, #4dabf7);
  --course-b1: linear-gradient(135deg, #087f5b, #20c997);
  --course-other: linear-gradient(135deg, #495057, #868e96);
}

/* ── Header en dark ── */
.dark-mode .main-header {
  position: sticky;
  width: 100%;
  height: 190px;

  top: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background:
    linear-gradient(rgba(0, 0, 0, .6),
      rgba(0, 0, 0, .6)),
    url("../imgs/bannerfenix3.webp");
  /* object-fit: cover; */
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 0.5px solid var(--border);
  backdrop-filter: blur(10px);
}

/* ── Cards en dark ── */
.dark-mode .card,
.dark-mode .course-card,
.dark-mode .testimonio,
.dark-mode .trust-box,
.dark-mode .norma-card,
.dark-mode .blog-card,
.dark-mode .product-card,
.dark-mode .sede-card,
.dark-mode .stat-box,
.dark-mode .info-card,
.dark-mode .contact-form {
  background: #1e2124;
  border-color: #2d3238;
  color: var(--text);
}

/* ── Texto dentro de cards ── */
.dark-mode .card h3,
.dark-mode .course-card h3,
.dark-mode .trust-box h4,
.dark-mode .testimonio strong {
  color: var(--title);
}

.dark-mode .card p,
.dark-mode .trust-box p,
.dark-mode .testimonio p,
.dark-mode .texto p {
  color: var(--gray);
}

/* ── Inputs en dark ── */
.dark-mode .contact-form input,
.dark-mode .contact-form textarea {
  background: #141618;
  border-color: #2d3238;
  color: var(--text);
}

/* ── Navegación mobile en dark ── */
.dark-mode #navbar {
  background: transparent;
}

.dark-mode #navbar ul {
  border-top: none;
}

/* ── Secciones con fondo ── */
.dark-mode .services,
.dark-mode .requirements,
.dark-mode .trust,
.dark-mode .testimonios,
.dark-mode .ubicacion,
.dark-mode .pagos-aliados {
  background: var(--bg-section);
}

/* ── Hero ── */
.dark-mode .hero {
  background-image: url("../imgs/fondo2.png");
}

/* ── Toggle button ── */
.dark-mode #theme-toggle {
  color: var(--secondary);
}

/* ── Precio span en dark ── */
.dark-mode .precio span {
  color: #f1f3f4;
}

.dark-mode .precio p {
  color: rgba(255, 255, 255, .7);
}

/* ── Secciones con texto claro ── */
.dark-mode .cta-final {
  background: #1e3a5f;
}

.dark-mode .cta-final h2 {
  color: #f1f3f4;
}

.dark-mode .cta-final p {
  color: rgba(255, 255, 255, .75);
}

/* ── Footer ── */
.dark-mode .main-footer-OLD {
  background: #0d0f11;
  border-top-color: #2d3238;
}

/* ── Social bar icons ── */
.dark-mode .social-bar a {
  background: #1e2124;
  border-color: #2d3238;
  color: var(--text);
}

/* ── About section fondo oscuro ── */
.dark-mode .about-section::before {
  opacity: 0.15;
}

.dark-mode .text-slider h3 {
  background-color: #4dabf7;
}

/* ── Cursos img1/2/3 (mantener colores vibrantes) ── */
.dark-mode .course-img1 {
  background-image: var(--course-a2) !important;
}

.dark-mode .course-img2 {
  background-image: var(--course-c1) !important;
}

.dark-mode .course-img3 {
  background-image: var(--course-b1) !important;
}

/* ── Logo imgs en dark ── */
.dark-mode .logo-img {
  filter: brightness(1.2) grayscale(10%);
}

/* ══ HERO texto en dark ══ */
.dark-mode .hero h1,
.dark-mode .hero .titulo h1 {
  color: #f1f3f4;
}

.dark-mode .hero p,
.dark-mode .hero .titulo p {
  color: rgba(255, 255, 255, .85);
}

.dark-mode .highlight {
  color: var(--secondary);
}

/* ══ Botones en dark ══ */
.dark-mode .cta {
  background: var(--primary);
  color: #fff;
}

.dark-mode .cta-outline {
  border-color: var(--primary);
  color: var(--primary);
}

/* ══ Blog en dark ══ */
.dark-mode .blog-hero {
  background-color: #0d1117;
}

.dark-mode .blog-card {
  background: #1e2124;
  border-color: #2d3238;
}

.dark-mode .blog-card h3 {
  color: var(--title);
}

.dark-mode .blog-card p {
  color: var(--gray);
}

.dark-mode .newsletter {
  background: white;
}

.dark-mode .newsletter h2 {
  color: #f1f3f4;
}

/* ══ Contacto en dark ══ */
.dark-mode .contact-hero {
  background: #0d1117;
}

.dark-mode .contact-section {
  background: var(--bg);
}

.dark-mode .info-card {
  background: #1e2124;
}

.dark-mode .info-card h3,
.dark-mode .info-card p {
  color: var(--text);
}

.dark-mode #contact-feedback {
  border-radius: 8px;
}

/* ══ Tienda en dark ══ */
.dark-mode .store-hero {
  background: #0d1117;
}

.dark-mode .store-section {
  background: var(--bg);
}

.dark-mode .product-card {
  background: #1e2124;
  border-color: #2d3238;
}

.dark-mode .product-card h3 {
  color: var(--title);
}

.dark-mode .product-card .price {
  color: var(--secondary);
}

/* ══ Normas en dark ══ */
.dark-mode .normas-hero {
  background: #0d1117;
}

.dark-mode .norma-card {
  background: #1e2124;
  border-color: #2d3238;
}

.dark-mode .norma-card h3 {
  color: var(--title);
}

/* ══ Sedes en dark ══ */
.dark-mode .sedes-hero {
  background: #0d1117;
}

.dark-mode .sede-card {
  background: #1e2124;
  border-color: #2d3238;
}

.dark-mode .sede-info h2,
.dark-mode .sede-info p {
  color: var(--text);
}

.dark-mode .sede-info .info-grid div {
  color: var(--gray);
}

.dark-mode .badge {
  background: var(--primary);
  color: #fff;
}

/* ══ Header oscuro en subpáginas ══ */
.dark-mode .page-hero,
.dark-mode .blog-hero,
.dark-mode .contact-hero,
.dark-mode .store-hero,
.dark-mode .normas-hero,
.dark-mode .sedes-hero {
  filter: brightness(.85);
}

/* ══ Inputs/forms en dark ══ */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
  background: #141618 !important;
  border-color: #2d3238 !important;
  color: var(--text) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: #6b7280 !important;
}

/* ══ Botón flotante arriba en dark ══ */
.dark-mode #btn-top {
  background: var(--accent);
}

.dark-mode .main-footer {
  background-image: url(../imgs/header.png) !important;
  filter: brightness(0.65);
}