/* =========================
   CATEGORIAS HOME
========================= */

.categorias-home{
    padding:100px 7%;

    background:#fff;
}

/* =========================
   TITULOS
========================= */

.section-title{
    text-align:center;

    margin-bottom:60px;
}

.section-title span{
    display:inline-block;

    color:var(--colormain);

    font-size:15px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;

    margin-bottom:10px;
}

.section-title h2{
    font-size:42px;
    color:#222;

    line-height:1.2;
}

/* =========================
   GRID
========================= */

.categorias-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;
}

/* =========================
   CARD
========================= */

.categoria-card{
    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:#f8f8f8;

    transition:.35s ease;

    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.categoria-card:hover{
    transform:translateY(-8px);
}

/* =========================
   IMAGEN
========================= */

.categoria-img{
    height:320px;

    overflow:hidden;
}

.categoria-img img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s ease;
}

.categoria-card:hover img{
    transform:scale(1.08);
}

/* =========================
   INFO
========================= */

.categoria-info{
    padding:25px;
}

.categoria-info h3{
    font-size:24px;

    color:#222;

    margin-bottom:10px;
}

.categoria-info p{
    color:#777;

    line-height:1.6;

    font-size:15px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

    .categorias-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .categorias-home{
        padding:80px 5%;
    }

    .section-title h2{
        font-size:32px;
    }

    .categoria-img{
        height:260px;
    }

}

@media(max-width:580px){

    .categorias-grid{
        grid-template-columns:1fr;
    }

}