/* ======================================================
   DESLIZADORES GENERALES
====================================================== */

.slider-wrapper {
    position: relative;
}

.slider-track {
    display: flex;
    gap: 1rem;

    overflow-x: auto;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slider-item {
    flex: 0 0 85%;
    flex-shrink: 0;

    scroll-snap-align: start;

    padding: 0.25rem;
}


/* ======================================================
   CARDS GENERALES DE LOS SLIDERS
====================================================== */

.slider-item .card {
    display: block;
    height: 100%;

    border-radius: 1rem;
}


/* ======================================================
   FLECHAS GENERALES
====================================================== */

.slider-btn {
    display: none;
}


/* ======================================================
   SLIDER DE RESEÑAS
====================================================== */

.slider-resenas,
.review {
    flex: 0 0 85%;
}

.review {
    scroll-snap-align: center;
}

.review img {
    display: block;

    width: 100%;

    padding: 9px;
    margin-bottom: 2rem;

    border-radius: 24px;

    background-color: #ffffff;
}


/* ======================================================
   SLIDER DE PRODUCTOS DESTACADOS
====================================================== */

.slide-productos-destacados {
    flex: 0 0 85%;
}


/* ======================================================
   SLIDER DE PRODUCTOS POR CATEGORÍA
====================================================== */

/*
 * En celulares:
 * se ven dos productos completos y parte del tercero.
 */
.slider-categorias-productos .slider-item {
    flex: 0 0 calc(42% - 0.5rem);
}

/* Cantidad visible	CSS
1 tarjeta	flex: 0 0 100%;
2 tarjetas	flex: 0 0 calc(50% - .5rem);
3 tarjetas	flex: 0 0 calc(33.333% - .66rem);
4 tarjetas	flex: 0 0 calc(25% - .75rem);
5 tarjetas	flex: 0 0 calc(20% - .8rem); */



/* pantallas muy chicas */
@media (max-width: 359px) {

    .slider-categorias-productos .slider-item {
        flex: 0 0 calc(46% - 0.5rem);
    }

}

@media (min-width:768px) {

    /* SLIDES CANTIDAD DE COLUMNAS */
    .slider-resenas {
        flex: 0 0 calc(50% - .5rem);
    }

    .slide-productos-destacados {
        flex: 0 0 calc(33% - .5rem);
    }

    .slider-categorias-productos .slider-item {
        flex: 0 0 calc(25% - .75rem);
    }

    .slider-categorias-productos .slider-item {
        flex: 0 0 calc(25% - 0.75rem);
    }


}

/* ======================================================
   NOTEBOOKS Y ESCRITORIOS
====================================================== */

@media (min-width: 992px) {

    /*
     * RESEÑAS:
     * 3 visibles.
     */
    .slider-resenas,
    .review {
        flex: 0 0 calc(33.333% - 0.666rem);
    }


    /*
     * PRODUCTOS DESTACADOS:
     * 4 visibles.
     */
    .slide-productos-destacados {
        flex: 0 0 calc(25% - 0.75rem);
    }


    /*
     * PRODUCTOS POR CATEGORÍA:
     * 4 visibles.
     */
    .slider-categorias-productos .slider-item {
        flex: 0 0 calc(25% - 0.75rem);
    }


    /* FLECHAS */

    .slider-btn {
        position: absolute;
        top: 50%;
        z-index: 20;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;

        border: 1px solid #E9A15B;
        border-radius: 50%;

        background-color: #ffffff;
        color: #E9A15B;

        transform: translateY(-50%);
        transition: 0.25s;
    }

    .slider-btn:hover {
        background-color: #E9A15B;
        color: #ffffff;
    }

    .slider-btn.prev {
        left: -24px;
    }

    .slider-btn.next {
        right: -24px;
    }

}

/* ======================================================
   ESCRITORIOS GRANDES
====================================================== */

@media (min-width: 1400px) {

    .slider-btn {
        background-color: transparent;
    }

    .slider-btn.prev {
        left: -80px;
    }

    .slider-btn.next {
        right: -80px;
    }

}