:root {
    --num-screenshots: 6;
    /* Valor por defecto */
}

.checked {
    color: orange;
}

.review {
    width: 40%;
    margin: 0 0.5%;
    padding: 0.5%;
    border: 2px solid #1a1a1a;
    border-radius: 15px;
    background-color: #1a1a1a;
    box-sizing: border-box;
}

.client-review {
    font-size: 14px;
    margin: 10px 0;
    font-style: italic;
}

/* Ventana del slider */
.our-clients {
    width: 100%;
    overflow: hidden;
    margin: 40px auto;
}

/* Tira de reviews */
.slider {
    display: flex;
    width: 100%;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    /* 4 reviews → 100% * 4 */
}

.slider> :nth-last-child(-n+2) {
    display: none;
    /* Aplica estilo a los últimos 2 */
}

/*Screenshots*/
.slider-screenshots {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.screenshot {
    width: 30%;
    margin: 0.5%;
    gap: 0;
    border-radius: 15px;
}

.slider> :nth-last-child(-n+2) {
    display: none;
    /* Oculta los últimos 2 elementos del slider de reviews */
}

.slider-screenshots> :nth-last-child(-n+2) {
    display: none;
    /* Oculta los últimos 2 elementos del slider de screenshots */
}

/*Media Querys*/
@media (max-width: 768px) {
    .review {
        flex: 0 0 20%;
        /* ocupa todo el ancho disponible */
    }

    .screenshot-section {

        overflow: hidden;
    }

    .screenshot {
        /* en móvil cada slide ocupará exactamente el ancho de la ventana */
        flex: 0 0 24%;
        width: 24%;
    }

    .slider {
        width: 400%;
        gap: 0;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        animation: slide 16s infinite;
        animation-timing-function: ease-in-out;
        justify-content: flex-start;
        /* 2 reviews → 100% * 2 */
    }

    .slider-screenshots {
        width: 300%;
        gap: 0;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        animation: slide-screenshots 20s infinite;
        animation-timing-function: ease-in-out;
        justify-content: flex-start;
    }

    .slider> :nth-last-child(-n+2) {
        display: block;
        /* Muestra los últimos 2 elementos en móvil para el slider de reviews */
    }

    .slider-screenshots> :nth-last-child(-n+2) {
        display: block;
        /* Muestra los últimos 2 elementos en móvil para el slider de screenshots */
    }

}

/* Animación paso a paso */
@keyframes slide {

    0%,
    10% {
        transform: translateX(0%);
    }

    /* Pausa en el primero */
    20%,
    30% {
        transform: translateX(-21%);
    }

    /* Pausa en el segundo */
    40%,
    50% {
        transform: translateX(-42%);
    }

    /* Pausa en el tercero */
    60%,
    70% {
        transform: translateX(-63%);
    }

    /* Pausa en el cuarto */
    80%,
    90% {
        transform: translateX(-84%);
    }

    /* Regresa al primero */
    100% {
        transform: translateX(-105%);
    }
}

@keyframes slide-screenshots {

    0%,
    10% {
        transform: translateX(0%);
    }

    /* Pausa en el primero */
    25%,
    35% {
        transform: translateX(-25%);
    }

    /* Pausa en el segundo */
    50%,
    60% {
        transform: translateX(-50%);
    }

    /* Pausa en el tercero */
    75%,
    85% {
        transform: translateX(-75%);
    }

    /* Pausa en el cuarto */
    100% {
        transform: translateX(-100%);
    }

}