/* ==========================================
   ANIMACIÓN GENERAL
   ========================================== */

.sr-animacion-scroll {
    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


/* Cuando aparece */

.sr-animacion-scroll.sr-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================
   ENTRADA DESDE LA IZQUIERDA
   ========================================== */

.sr-animacion-izquierda {
    opacity: 0;
    transform: translateX(-50px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.sr-animacion-izquierda.sr-visible {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================
   ENTRADA DESDE LA DERECHA
   ========================================== */

.sr-animacion-derecha {
    opacity: 0;
    transform: translateX(50px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.sr-animacion-derecha.sr-visible {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================
   STAGGER
   ========================================== */

.sr-animacion-stagger > * {
    opacity: 0;
    transform: translateY(30px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}


/* Cuando el contenedor aparece */

.sr-animacion-stagger.sr-visible > * {
    opacity: 1;
    transform: translateY(0);
}


/* Delay automático */

.sr-animacion-stagger.sr-visible > *:nth-child(1) {
    transition-delay: 0.05s;
}

.sr-animacion-stagger.sr-visible > *:nth-child(2) {
    transition-delay: 0.15s;
}

.sr-animacion-stagger.sr-visible > *:nth-child(3) {
    transition-delay: 0.25s;
}

.sr-animacion-stagger.sr-visible > *:nth-child(4) {
    transition-delay: 0.35s;
}

.sr-animacion-stagger.sr-visible > *:nth-child(5) {
    transition-delay: 0.45s;
}

.sr-animacion-stagger.sr-visible > *:nth-child(6) {
    transition-delay: 0.55s;
}


/* ==========================================
   CARRUSEL DE PRODUCTOS
   ========================================== */

.sr-carrusel-animado .sr-producto-card {
    opacity: 0;
    transform: translateY(30px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}


/* Cuando el carrusel entra en pantalla */

.sr-carrusel-animado.sr-visible .sr-producto-card {
    opacity: 1;
    transform: translateY(0);
}


/* Aparición escalonada */

.sr-carrusel-animado.sr-visible .sr-producto-card:nth-child(1) {
    transition-delay: 0.05s;
}

.sr-carrusel-animado.sr-visible .sr-producto-card:nth-child(2) {
    transition-delay: 0.15s;
}

.sr-carrusel-animado.sr-visible .sr-producto-card:nth-child(3) {
    transition-delay: 0.25s;
}

.sr-carrusel-animado.sr-visible .sr-producto-card:nth-child(4) {
    transition-delay: 0.35s;
}

.sr-carrusel-animado.sr-visible .sr-producto-card:nth-child(5) {
    transition-delay: 0.45s;
}

.sr-carrusel-animado.sr-visible .sr-producto-card:nth-child(6) {
    transition-delay: 0.55s;
}