/* ===== LOGO LIGHT/DARK ===== */
.logo-light {
    display: block;
}

.logo-dark {
    display: none;
}

html.dark .logo-light {
    display: none;
}

html.dark .logo-dark {
    display: block;
}

/* Ajuste para que el SVG ocupe el mismo espacio */
.logo-dark img {
    width: 140px;
    height: auto;
}

/* Responsive */
@media screen and (max-width: 992px) {
    .logo-dark img {
        width: 70px;
        height: 70px;
    }
}
 /* ===== SWITCH DE TEMA ===== */
 .theme-toggle,
 .theme-toggle-mobile {
     background: none;
     border: none;
     cursor: pointer;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     color: var(--verde-bosque);
     transition: var(--transicion);
     background-color: transparent;
 }

 .theme-toggle:hover,
 .theme-toggle-mobile:hover {
     background-color: var(--gris-natural);
     color: var(--verde-chi);
     transform: scale(1.1);
 }

 /* Switch desktop - dentro del nav */
 .theme-switch-desktop {
     list-style: none;

 }

 .theme-switch-desktop .theme-toggle {
     color: var(--verde-bosque);
 }

 /* Switch móvil - al lado del menú */
 .mobile-controls {
     display: none;
     align-items: center;
     gap: 0.5rem;
 }

 /* ===== RESPONSIVE - MÓVIL ===== */
 @media screen and (max-width: 768px) {
     .nav-menu {
         position: fixed;
         top: 0;
         right: -100%;
         width: min(85%, 320px);
         height: 100vh;
         background-color: #ffffff;
         flex-direction: column;
         padding: 5rem 2rem 2rem;
         transition: right 0.4s cubic-bezier(0.2, 0.9, 0.4, 1);
         box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
         z-index: 1000;
         overflow-y: auto;
     }

     /* Ocultar switch desktop en móvil */
     .theme-switch-desktop {
         display: none;
     }

     /* Mostrar controles móviles */
     .mobile-controls {
         display: flex;
     }

     /* Ajustar el menú hamburguesa */
     .menu-toggle {
         display: flex !important;
         position: relative;
         z-index: 1001;
     }

     /* Cuando el menú está abierto, la X debe verse bien */
     .menu-toggle.active i {
         transform: rotate(180deg);
     }

     /* El switch móvil también debe estar sobre el menú */
     .theme-toggle-mobile {
         z-index: 1001;
     }

     /* Dark mode para menú móvil */
     html.dark .nav-menu.active {
         background-color: #0a0a0a;
     }

     html.dark .theme-toggle-mobile {
         color: var(--verde-bosque);
     }

     html.dark .theme-toggle-mobile:hover {
         background-color: #333;
         color: var(--verde-chi);
     }
 }

 html.dark {
     /* === VARIABLES DE COLOR (redefinición completa) === */
     --verde-chi: #4C8C5E;
     /* Verde más brillante */
     --verde-brote: #7BB06B;
     /* Verde brote adaptado */
     --blanco-arcilla: #121212;
     /* Fondo principal oscuro */
     --gris-natural: #1E1E1E;
     /* Fondo de cards y secciones */
     --verde-bosque: #E0E0E0;
     /* Texto principal claro */
     --gris-musgo: #A0A0A0;
     /* Texto secundario */
     --madera: #D6B08C;
     /* Madera más clara */

     /* Sombras adaptadas */
     --sombra-suave: 0 12px 30px rgba(0, 0, 0, 0.7);
 }

 /* ===== FONDOS DE SECCIONES ===== */
 html.dark body {
     background-color: var(--blanco-arcilla);
 }

 html.dark .hero,
 html.dark .hero-interno,
 html.dark .hero-galeria,
 html.dark .hero-contacto {
     background-color: var(--blanco-arcilla);
 }

 html.dark .beneficios,
 html.dark .testimonios,
 html.dark .seccion-disciplina.par,
 html.dark .seccion-recorte.par {
     background-color: var(--gris-natural);
 }

 html.dark .seccion-disciplina.impar,
 html.dark .seccion-recorte.impar {
     background-color: var(--blanco-arcilla);
 }

 html.dark .frase-enfasis,
 html.dark .frase-destacada,
 html.dark .seccion-porque {
     background: linear-gradient(to right, #1a1a1a, var(--gris-natural));
 }

 /* ===== HEADER ===== */
 html.dark header {
     background-color: #0a0a0a !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
 }

 html.dark .menu-toggle {
     color: var(--verde-bosque);
 }

 html.dark .menu-toggle:hover {
     background-color: #333;
 }

 html.dark .nav-menu.active {
     background-color: #0a0a0a;
 }

 /* ===== NAVEGACIÓN ===== */
 html.dark .nav-links a {
     color: var(--verde-bosque);
 }

 html.dark .nav-links a:hover,
 html.dark .nav-links a.active-link {
     color: var(--verde-chi);
     border-bottom-color: var(--madera);
 }
 html.dark .fa-sun:before {
     color: #FCBB30;
 }

 .fa-moon:before {
     color: #f0f0f0;
     background: #1a1a1a;
     border-radius: 50%;
     padding: 2px;
 }

 /* ===== SUBMENÚS ===== */
 html.dark .submenu {
     background-color: #1a1a1a;
     border-color: #333;
 }

 html.dark .submenu a {
     color: var(--gris-musgo);
 }

 html.dark .submenu a:hover {
     background-color: #333;
     color: var(--verde-chi);
 }

 /* ===== CARDS Y CONTENEDORES ===== */
 html.dark .card,
 html.dark .testimonio-contenido,
 html.dark .porque-item,
 html.dark .contacto-card,
 html.dark .mensaje-central {
     background-color: var(--gris-natural);
     border-color: #333;
 }

 html.dark .card:hover,
 html.dark .testimonio-card:hover .testimonio-contenido,
 html.dark .porque-item:hover,
 html.dark .contacto-card:hover {
     border-color: var(--madera);
 }

 html.dark .testimonio-foto svg {
     background: var(--verde-bosque);
     border-radius: 50%;
     padding: 0.2rem;
 }

 html.dark .card-img {
     background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
 }

 /* ===== BOTONES ===== */
 html.dark .btn {
     background-color: var(--verde-chi);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
 }

 html.dark .btn:hover {
     background-color: var(--verde-brote);
 }

 html.dark .contacto-btn {
     background-color: var(--verde-chi);
 }

 html.dark .contacto-card:hover .contacto-btn {
     background-color: var(--madera);
 }

 /* ===== SLIDER TESTIMONIOS ===== */
 html.dark .slider-arrow-moderno {
     background-color: #2a2a2a;
     border-color: #444;
     color: var(--verde-chi);
 }

 html.dark .slider-arrow-moderno:hover {
     background-color: var(--verde-chi);
     color: var(--blanco-arcilla);
 }

 html.dark .dot {
     background-color: var(--gris-musgo);
 }

 html.dark .dot.active {
     background-color: var(--verde-chi);
     box-shadow: 0 0 10px rgba(76, 140, 94, 0.5);
 }

 html.dark .slider-progress {
     background-color: #333;
 }

 html.dark .progress-bar {
     background-color: var(--verde-chi);
 }

 /* ===== FOOTER - COMPLETAMENTE REDISEÑADO ===== */
 html.dark footer {
     background: linear-gradient(to top, #000000, #1a1a1a, #2a2a2a);
     border-top: 1px solid #333;
 }

 html.dark .footer-logo h3 {
     color: var(--verde-bosque);
 }

 html.dark .footer-logo span {
     color: var(--madera);
 }

 html.dark .footer-contacto a {
     color: var(--madera);
 }

 html.dark .footer-contacto a:hover {
     color: var(--verde-chi);
     transform: scale(1.1) translateY(-2px);
 }

 html.dark .copyright {
     color: var(--gris-musgo);
     border-top-color: #333;
 }

 /* ===== GALERÍA ===== */
 html.dark .galeria-seccion {
     background-color: var(--blanco-arcilla);
 }

 html.dark .galeria-item {
     background-color: var(--gris-natural);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
 }

 html.dark .flecha-contenedor {
     background-color: var(--verde-chi);
     box-shadow: 0 8px 20px rgba(76, 140, 94, 0.3);
 }

 html.dark .flecha-contenedor:hover {
     background-color: var(--madera);
 }

 /* ===== CONTACTO ===== */
 html.dark .contacto-icono {
     background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
     color: var(--verde-chi);
 }

 html.dark .contacto-card:hover .contacto-icono {
     color: var(--madera);
 }

 /* ===== MI RECORRIDO ===== */
 html.dark .recorte-imagen {
     background-color: var(--gris-natural);
 }

 html.dark .recorte-titulo {
     color: var(--verde-chi);
 }

 html.dark .recorte-titulo::after {
     background-color: var(--madera);
 }

 /* ===== CHI KUNG Y TAI CHI ===== */
 html.dark .imagen-col {
     background-color: var(--gris-natural);
 }

 html.dark .texto-col p {
     color: var(--verde-bosque);
 }

 /* ===== BOTONES FLOTANTES ===== */
 html.dark .whatsapp-float {
     box-shadow: 0 8px 24px rgba(37, 211, 102, 0.2);
 }

 html.dark .back-to-top {
     background-color: var(--madera);
     box-shadow: 0 8px 20px rgba(214, 176, 140, 0.2);
 }

 html.dark .back-to-top:hover {
     background-color: var(--verde-chi);
 }

 /* ===== LOGO ===== */
 html.dark .svg-logo-header {
     filter: brightness(0) invert(1);
 }

 /* ===== TEXTO GENERAL ===== */
 html.dark h1,
 html.dark h2,
 html.dark h3,
 html.dark h4,
 html.dark p:not(.testimonio-texto):not(.card p) {
     color: var(--verde-bosque);
 }

 html.dark .hero-titulo,
 html.dark .hero-interno-titulo,
 html.dark .hero-galeria-titulo {
     color: var(--verde-chi);
 }

 html.dark .hero-modalidad,
 html.dark .hero-subtitulo,
 html.dark .hero-interno-subtitulo,
 html.dark .hero-galeria-subtitulo {
     color: var(--gris-musgo);
 }

 /* ===== LÍNEAS DECORATIVAS ===== */
 html.dark .hero-titulo::after,
 html.dark .hero-interno-titulo::after,
 html.dark .hero-galeria-titulo::after,
 html.dark .recorte-titulo::after {
     background-color: var(--madera);
 }

 html.dark .texto-enfasis {
     border-top-color: var(--madera);
     border-bottom-color: var(--madera);
 }

 html.dark .frase-cierre {
     border-top-color: var(--madera);
 }


 /* ========================================
   DARK MODE - PÁGINA INICIA TU CAMINO
   ======================================== */

 /* Variables dark mode */
 html.dark {
     --verde-chi: #4C8C5E;
     --verde-brote: #7BB06B;
     --blanco-arcilla: #121212;
     --gris-natural: #1E1E1E;
     --verde-bosque: #E0E0E0;
     --gris-musgo: #A0A0A0;
     --madera: #D6B08C;
     --sombra-suave: 0 12px 30px rgba(0, 0, 0, 0.7);
 }

 /* Body y fondo general */
 html.dark body {
     background-color: var(--blanco-arcilla);
 }

 /* Header simulado (reemplazar con tu header real) */
 html.dark .header-simulado {
     background-color: #0a0a0a !important;
     border-bottom-color: #333;
 }

 /* Hero */
 html.dark .hero-interno {
     background-color: var(--blanco-arcilla);
 }

 html.dark .hero-interno-texto {
     color: var(--gris-musgo);
 }

 /* Cards */
 html.dark .card {
     background-color: var(--gris-natural);
     border-color: #333;
 }

 html.dark .card:hover {
     border-color: var(--madera);
 }

 html.dark .card-titulo {
     color: var(--verde-chi);
 }

 html.dark .card-texto {
     color: var(--gris-musgo);
 }

 html.dark .card-btn {
     background-color: var(--verde-chi);
     color: white;
 }

 html.dark .card-btn:hover {
     background-color: var(--madera);
 }

 /* Títulos de sección */
 html.dark .titulo-seccion {
     color: var(--verde-chi);
 }

 html.dark .titulo-seccion::after {
     background-color: var(--madera);
 }

 /* Modales */
 html.dark .modal-contenido {
     background-color: var(--gris-natural);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
 }

 html.dark .modal-titulo {
     color: var(--verde-chi);
 }

 html.dark .modal-descripcion {
     color: var(--verde-bosque);
 }

 html.dark .modal-lista li {
     color: var(--gris-musgo);
     border-bottom-color: #333;
 }

 html.dark .modal-lista li i {
     color: var(--verde-chi);
 }

 html.dark .modal-close {
     color: var(--gris-musgo);
 }

 html.dark .modal-close:hover {
     background-color: #333;
     color: var(--madera);
 }

 /* Footer simulado (reemplazar con tu footer real) */
 html.dark .footer-simulado {
     background: linear-gradient(to top, #000000, #1a1a1a);
     color: var(--blanco-arcilla);
 }

 /* ===== PEQUEÑOS AJUSTES ===== */
 html.dark hr {
     border-color: #333;
 }

 html.dark .separador {
     background-color: #333;
 }