@charset "UTF-8";

/* =========================================
   CATEGORÍAS
========================================= */

.categories{

    width:100%;

    max-width:100%;

    padding:20px 0 10px;

    overflow:hidden;

    position:relative;
}

/* =========================================
   TITULO
========================================= */

.section-title{

    font-size:22px;

    font-weight:700;

    margin-bottom:18px;

    color:#111;
}

/* =========================================
   SLIDER
========================================= */

.categories-slider{

    position:relative;

    width:100%;

    max-width:100%;

    overflow:hidden;

    min-width:0;
}

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

.categories-wrapper{

    width:100%;

    max-width:100%;

    overflow:hidden;

    position:relative;

    min-width:0;
}

/* =========================================
   TRACK
========================================= */

.categories-track{

    display:flex;

    gap:16px;

    width:max-content;

    min-width:100%;

    transition:transform .5s ease;

    will-change:transform;
}

/* =========================================
   CARD
========================================= */

.cat-card{

    flex:0 0 calc((100vw - 120px) / 4);

    max-width:320px;

    min-width:0;

    box-sizing:border-box;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:14px;

    padding:14px;

    text-align:center;

    text-decoration:none;

    position:relative;

    overflow:hidden;

    cursor:pointer;

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

/* =========================================
   CARD ACTIVA
========================================= */

.cat-card.active{

    border:2px solid var(--blue);

    box-shadow:
        0 0 0 4px rgba(0,87,217,.12),
        0 10px 25px rgba(0,0,0,.08);

    transform:translateY(-3px);
}

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

.cat-card:hover{

    transform:translateY(-5px);

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

/* =========================================
   IMAGEN
========================================= */

.cat-card img{

    width:100%;

    max-width:100%;

    height:180px;

    object-fit:contain;

    background:#fff;

    border-radius:10px;

    margin-bottom:12px;

    transition:transform .35s ease;
}

/* =========================================
   ZOOM IMAGEN
========================================= */

.cat-card:hover img{

    transform:scale(1.03);
}

/* =========================================
   TITULO
========================================= */

.cat-card h3{

    font-size:15px;

    font-weight:700;

    color:#111;

    margin:0;

    word-break:break-word;
}

/* =========================================
   BOTONES
========================================= */

.cat-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.45);

    color:#fff;

    cursor:pointer;

    z-index:10;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:
        background .3s ease,
        transform .3s ease,
        opacity .3s ease;

    backdrop-filter:blur(4px);

    -webkit-backdrop-filter:blur(4px);
}

.cat-btn:hover{

    background:rgba(0,0,0,.65);

    transform:
        translateY(-50%)
        scale(1.08);
}

.cat-btn i{

    font-size:18px;
}

.cat-btn.prev{

    left:12px;
}

.cat-btn.next{

    right:12px;
}

/* =========================================
   24" / 27"
========================================= */

@media (min-width:1600px){

    .categories{
        padding:30px 0 20px;
    }

    .section-title{
        font-size:28px;
    }

    .categories-track{
        gap:22px;
    }

    .cat-card{

        flex:0 0 calc((100vw - 220px) / 4);

        max-width:420px;

        padding:18px;
    }

    .cat-card img{
        height:240px;
    }
}

/* =========================================
   LAPTOPS
========================================= */

@media (max-width:1200px){

    .cat-card{

        flex:0 0 calc((100vw - 100px) / 3);

        max-width:340px;
    }

    .cat-card img{
        height:170px;
    }
}

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

@media (max-width:992px){

    .categories{
        padding:18px 0;
    }

    .section-title{
        font-size:20px;
    }

    .categories-track{
        gap:12px;
    }

    .cat-card{

        flex:0 0 calc((100vw - 70px) / 2);

        max-width:none;

        border-radius:14px;
    }

    .cat-card img{
        height:160px;
    }

    .cat-btn{

        width:44px;
        height:44px;
    }
}

/* =========================================
   MOVIL
========================================= */

@media (max-width:768px){

    .categories{
        padding:15px 0;
    }

    .section-title{
        font-size:18px;
    }

    .categories-track{
        gap:10px;
    }

    .cat-card{

        flex:0 0 calc(100vw - 40px);

        max-width:none;

        padding:12px;
    }

    .cat-card img{
        height:150px;
    }

    .cat-btn{

        width:40px;
        height:40px;
    }

    .cat-btn.prev{
        left:6px;
    }

    .cat-btn.next{
        right:6px;
    }
}

/* =========================================
   IPHONE PEQUEÑO
========================================= */

@media (max-width:420px){

    .section-title{
        font-size:17px;
    }

    .cat-card{

        flex:0 0 calc(100vw - 30px);

        padding:10px;
    }

    .cat-card img{
        height:140px;
    }

    .cat-card h3{
        font-size:13px;
    }

    .cat-btn{
        display:none;
    }
}