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

.visibleP {
    opacity: 1;
    transform: translateX(0);
}

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

.segundo.visibleP {
    transition-delay: 0.5s;
}

.tercero.visibleP {
    transition-delay: 0.8s;
}

.P1,
.P2 {
    /* Estado inicial */
    opacity: 0;
    transform: translateY(50%);
    transition: all 1s ease-out;
}
.P1.visibleP2 {
    transition-delay: 0.2s;
}

.P2.visibleP2 {
    transition-delay: 0.5s;
}
.visibleP2 {
    opacity: 1;
    transform: translateY(0);
}