/* Aplica transiciones suaves solo en propiedades no invasivas (opacidad y transformaciones) */
* {
    transition: opacity 0.3s ease, transform 0.3s ease; /* Solo opacidad y transformaciones */
    animation: none;   /* No se aplican animaciones globales */
}

/* Animación de desvanecimiento sin afectar la disposición */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Aplica la animación de desvanecimiento a todos los elementos que cargan */
body {
    opacity: 0; /* Comienza invisible */
    animation: fadeIn 1s ease-out forwards;
}

/* Efecto de desvanecimiento al cargar imágenes y secciones */
img, section {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

/* No se necesita la clase '.fade-in' en otros elementos, ya que el body la controla */