header {
    animation: caerConRebote 1s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}

.Pensiones,
.Seguros,
.Contabilidad {
    /* Estado inicial */
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s ease-out;
}

/* Cuando el elemento entra al viewport */
.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Retrasos para efecto cascada */
.Pensiones.visible {
    transition-delay: 0.2s;
}

.Seguros.visible {
    transition-delay: 0.4s;
}

.Contabilidad.visible {
    transition-delay: 0.6s;
}

#imgSS {
    /* Estado inicial */
    opacity: 0;
    transform: translateX(-15vw);
    transition: all 1s ease-out;
}

.visible2 {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.caja1,
.caja2,
.caja3 {
    /* Estado inicial */
    opacity: 0;
    transform: translateY(50%);
    transition: all 1s ease-out;
}

.visible3 {
    opacity: 1;
    transform: translateY(0);
}

@keyframes caerConRebote {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    60% {
        transform: translateY(30px); /* Rebote hacia abajo */
        opacity: 1;
    }
    80% {
        transform: translateY(-10px); /* Rebote hacia arriba */
    }
    100% {
        transform: translateY(0); /* Posición final */
    }
}