/* 1. Estilos para el Modo Oscuro */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

/* Cambiamos las tarjetas también en modo oscuro */
body.dark-mode .card {
    background-color: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}

/* Cambiamos el color de los inputs del formulario */
body.dark-mode input, 
body.dark-mode textarea {
    background-color: #2d2d2d;
    color: white;
    border-color: #444;
}

/* 2. Preparación para la Animación de Scroll (Fade In) */
.fade-in-section {
    opacity: 0;               /* Invisible al principio */
    transform: translateY(20px); /* Ligeramente desplazado hacia abajo */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Esta clase se la agregaremos con JS cuando la sección sea visible */
.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
}