@charset "UTF-8";

/* =========================================
   SECCION
========================================= */

.slider-marcas-section{

    width:100%;

    overflow:hidden;

    padding:34px 0;

    background:#fff;
}

/* =========================================
   WRAPPER
========================================= */

.slider-wrapper{

    width:100%;

    overflow:hidden;

    position:relative;

    touch-action:pan-y;
}

/* =========================================
   CONTENEDOR
========================================= */

.slider-move{

    display:flex;

    align-items:center;

    gap:25px;

    width:max-content;

    will-change:transform;

    animation:
        sliderInfinite 38s linear infinite;
}

/* =========================================
   TARJETAS
========================================= */

.slider-card{

    width:240px;

    height:130px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:15px;

    overflow:hidden;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

/* =========================================
   HOVER
========================================= */

.slider-card:hover{

    transform:translateY(-4px);

    border-color:#d1d5db;

    box-shadow:
        0 10px 25px rgba(0,0,0,.08);
}

/* =========================================
   IMAGENES
========================================= */

.slider-card img{

    max-width:180px;

    max-height:90px;

    width:auto;

    height:auto;

    object-fit:contain;

    display:block;

    transition:transform .28s ease;
}

.slider-card:hover img{

    transform:scale(1.04);
}

/* =========================================
   PAUSA
========================================= */

.slider-wrapper:hover .slider-move{

    animation-play-state:paused;
}

/* =========================================
   ANIMACION
========================================= */

@keyframes sliderInfinite{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

/* =========================================
   MONITORES GRANDES
   24" / 27"
========================================= */

@media (min-width:1600px){

    .slider-marcas-section{
        padding:42px 0;
    }

    .slider-move{
        gap:34px;

        animation-duration:45s;
    }

    .slider-card{

        width:320px;

        height:170px;

        border-radius:22px;
    }

    .slider-card img{

        max-width:240px;

        max-height:120px;
    }
}

/* =========================================
   LAPTOPS 19" / 15"
========================================= */

@media (max-width:1400px){

    .slider-move{
        gap:22px;
    }

    .slider-card{

        width:220px;

        height:120px;
    }

    .slider-card img{

        max-width:165px;

        max-height:80px;
    }
}

/* =========================================
   LAPTOPS 14"
========================================= */

@media (max-width:1200px){

    .slider-marcas-section{
        padding:28px 0;
    }

    .slider-move{

        gap:18px;

        animation-duration:34s;
    }

    .slider-card{

        width:190px;

        height:105px;

        border-radius:16px;
    }

    .slider-card img{

        max-width:145px;

        max-height:70px;
    }
}

/* =========================================
   TABLET HORIZONTAL
========================================= */

@media (max-width:992px){

    .slider-move{

        gap:16px;

        animation-duration:30s;
    }

    .slider-card{

        width:175px;

        height:95px;

        border-radius:15px;
    }

    .slider-card img{

        max-width:125px;

        max-height:60px;
    }
}

/* =========================================
   TABLET VERTICAL
========================================= */

@media (max-width:768px){

    .slider-marcas-section{
        padding:22px 0;
    }

    .slider-move{

        gap:14px;

        animation-duration:28s;
    }

    .slider-card{

        width:155px;

        height:85px;

        border-radius:14px;

        padding:12px;
    }

    .slider-card:hover{

        transform:none;
    }

    .slider-card img{

        max-width:110px;

        max-height:52px;
    }
}

/* =========================================
   TELEFONOS GRANDES
========================================= */

@media (max-width:580px){

    .slider-marcas-section{
        padding:18px 0;
    }

    .slider-move{

        gap:12px;

        animation-duration:24s;
    }

    .slider-card{

        width:135px;

        height:75px;

        border-radius:12px;

        padding:10px;
    }

    .slider-card img{

        max-width:95px;

        max-height:45px;
    }
}

/* =========================================
   TELEFONOS PEQUEÑOS
========================================= */

@media (max-width:420px){

    .slider-move{

        gap:10px;

        animation-duration:20s;
    }

    .slider-card{

        width:115px;

        height:65px;

        border-radius:10px;

        padding:8px;
    }

    .slider-card img{

        max-width:80px;

        max-height:38px;
    }
}