/* Estado visible */
.section {
    opacity: 1;
    max-height: 1000px; /* Ajusta el valor según la altura máxima esperada */
    transition: opacity 1s ease, max-height 1s ease;
    overflow: hidden;
}

/* Estado oculto */
.section.hidden {
    opacity: 0;
    max-height: 0;
    transition: opacity 1s ease, max-height 1s ease;
}

/* Ralentiza la animación a 2 segundos */
#sectionId.animate__animated {
    --animate-duration: 0.5s;
}

/* Acelera la animación a 0.5 segundos */
.section.animate__fadeIn {
    animation-duration: 0.5s;
}
.section.animate__fadeOut {
    animation-duration: 0.1s;
}