/* Mostramos los elementos normales (sin animación) para la versión del móvil */
@media screen and (min-width:992px){

    /* Para ocultar las animaciones en el móvil */
    .animacion-oculta,
    .oculto{
        opacity: 0;
    }

    /* Texto Portal del empleado que aparezca de derecha a izquierda */
    .derecha-a-izquierda{
        overflow: hidden;
        animation: derechaAizquierda 1.5s forwards; /* Aplica la animación */
    }

    /* Definimos la animación para que el texto aparezca de derecha a izquierda */
    @keyframes derechaAizquierda {
        0% {
            transform: translateX(150%); /* Comienza fuera de la vista, a la derecha */
            opacity: 0;
        }
        100% {
            transform: translateX(0); /* Termina en su posición original */
            opacity: 1;
        }
    }

    /* Hacemos que el vídeo (foto por el momento) aparezca a la par que el texto */
    .fade-in {
        opacity: 0; /* Inicialmente invisible */
        animation: fadeInAnimation 4s forwards; /* Aplica la animación de 2 segundos */
    }

    /* Definición de la animación */
    @keyframes fadeInAnimation {
        0% {
            opacity: 0; /* Comienza invisible */
        }
        100% {
            opacity: 1; /* Termina completamente visible */
        }
    }

    /* Para que los cuadros de "FUNCIONALIDADES CLAVE" caigan de arriba a abajo uno seguido de otro */
    .arriba-a-abajo{
        animation: slideDown 1s forwards;
    }

    /* Definición de la animación */
    @keyframes slideDown {
        from {
          transform: translateY(-100%);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
    }

    /* Para el texto de "Ahorra hasta xx€" que aparezca de abajo a arriba */
    .abajo-a-arriba{
        animation: slideUp 1.5s forwards;
    }

    /* Definición de la animación */
    @keyframes slideUp {
        from {
          transform: translateY(100%);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
    }

    /* Para que aparezca un elemento de izquierda a derecha */
    .izquierda-a-derecha{
        overflow: hidden;
        animation: izquierdaAderecha 1.5s forwards; /* Aplica la animación */
    }

    /* Definimos la animación para que el texto aparezca de derecha a izquierda */
    @keyframes izquierdaAderecha {
        0% {
            transform: translateX(-100%); /* Comienza fuera de la vista, a la derecha */
            opacity: 0;
        }
        100% {
            transform: translateX(0); /* Termina en su posición original */
            opacity: 1;
        }
    }    
}

/* Hacemos el modo persiana en las imágenes circulares para que vayan apareciendo 2 a 2 */
@media screen and (min-width: 701px){

    /* Para las primeras imágenes */
    .imagen-persiana-1 {
        animation: revealImage1 2s ease forwards; /* Define la animación */
        clip-path: inset(0 0 100% 0); /* Establece la región recortada inicialmente */
    }

    /* Definimos la animación */
    @keyframes revealImage1 {
        0% {
          clip-path: inset(0 0 100% 0); /* Comienza con la imagen completamente oculta */
        }
        100% {
          clip-path: inset(0 0 0 0); /* Finaliza con la imagen completamente visible */
        }
    } 

    /* Para las segundas imágenes */
    .imagen-persiana-2 {
        animation: revealImage2 2s ease forwards; /* Define la animación */
        clip-path: inset(0 0 100% 0); /* Establece la región recortada inicialmente */
    }

    /* Definimos la animación */
    @keyframes revealImage2 {
        20% {
          clip-path: inset(0 0 100% 0); /* Comienza con la imagen completamente oculta */
        }
        100% {
          clip-path: inset(0 0 0 0); /* Finaliza con la imagen completamente visible */
        }
    } 

    /* Para las terceras imágenes */
    .imagen-persiana-3 {
        animation: revealImage3 2s ease forwards; /* Define la animación */
        clip-path: inset(0 0 100% 0); /* Establece la región recortada inicialmente */
    }

    /* Definimos la animación */
    @keyframes revealImage3 {
        40% {
          clip-path: inset(0 0 100% 0); /* Comienza con la imagen completamente oculta */
        }
        100% {
          clip-path: inset(0 0 0 0); /* Finaliza con la imagen completamente visible */
        }
    } 

    /* Para las cuartas imágenes */
    .imagen-persiana-4 {
        animation: revealImage4 2s ease forwards; /* Define la animación */
        clip-path: inset(0 0 100% 0); /* Establece la región recortada inicialmente */
    }

    /* Definimos la animación */
    @keyframes revealImage4 {
        60% {
          clip-path: inset(0 0 100% 0); /* Comienza con la imagen completamente oculta */
        }
        100% {
          clip-path: inset(0 0 0 0); /* Finaliza con la imagen completamente visible */
        }
    } 

}