/* Variables convertidas a CSS */
:root {
    --negro: #000;
    --negro-oscuro: #111; /* Equivalente a darken(negro, 10%) */
    --blanco: #fff;
    --verde-claro: #4CAF50;
}

/* Estilos generales para Dark Mode */
.dark-mode {
    background-color: var(--negro-oscuro);
    background-color: var(--negro);
}

/* Estilos del Header en Dark Mode */
.dark-mode .header {
    border-bottom: 2px solid var(--blanco);
    padding-bottom: 2rem;
}

/* Estilos del Footer en Dark Mode */
.dark-mode .footer {
    border-top: 2px solid var(--blanco);
    padding-top: 3rem;
}

/* Secciones generales en Dark Mode */
.dark-mode section {
    background-color: var(--negro);
}

/* Textos generales en Dark Mode */
.dark-mode p,
.dark-mode h1,
.dark-mode h2 {
    color: var(--blanco);
}

/* Animación de Nuestros Servicios */
.dark-mode #typing-animation {
    color: var(--verde-claro);
}

/* Estilos específicos para "Nosotros" */
.dark-mode .nosotros #typing-animation-nosotros {
    color: var(--verde-claro);
}

/* Estilos específicos para "Redes Sociales" */
.dark-mode .redes-sociales #typing-animation-redes {
    color: var(--verde-claro);
}

/* Estilos específicos para "Contacto" */
.dark-mode .contacto #typing-animation-contacto {
    color: var(--verde-claro);
}

/* Formulario de contacto en Dark Mode */
.dark-mode .contacto .formulario-contacto .campo label {
    color: var(--verde-claro);
}

/* Páginas Web en Dark Mode */
.dark-mode .servicio-detalle h1 {
    color: var(--verde-claro);
}

.dark-mode .servicio-detalle p {
    color: var(--blanco);
}

/* Galería de proyectos */
.dark-mode .proyectos-galeria h2 {
    color: var(--verde-claro);
}

/* Contenido del servicio en Dark Mode */
.dark-mode .servicio-contenido h2 {
    color: var(--verde-claro);
}

.dark-mode .servicio-contenido li {
    font-size: 1.8rem;
    color: var(--verde-claro);
}

.dark-mode .servicio-contenido strong {
    color: var(--blanco);
}

/* Llamada a la acción en Dark Mode */
.dark-mode .llamada-accion h2 {
    color: var(--verde-claro);
}