/*
 * Animación de Fade-In para las secciones.
 * Por defecto, las secciones estarán ligeramente transparentes y movidas.
 * Cuando se active con JavaScript (aún no implementado para no complicar),
 * se volverán visibles suavemente.
 *
 * NOTA: Para mantenerlo simple, por ahora solo añadiremos la base.
 * Una implementación completa requeriría JavaScript de "Intersection Observer".
 * Pero podemos simular un efecto de entrada en la carga.
*/

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aplicamos la animación a las secciones principales */
#nosotros, #servicios, #portafolio, #contacto {
    animation: fadeIn 1s ease-out forwards;
}