/*==================================================
                CATEGORIAS
==================================================*/

.categorias{

    padding:100px 0;
    background:#FFF8F8;

}

.categoria-card{

    position:relative;
    overflow:hidden;
    border-radius:22px;
    height:420px;
    cursor:pointer;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;

}

.categoria-card:hover{

    transform:translateY(-8px);

}

.categoria-card img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;

}

.categoria-card:hover img{

    transform:scale(1.08);

}

.categoria-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.20) 45%,
        rgba(0,0,0,0) 100%
    );

}

.categoria-info{

    position:absolute;
    left:30px;
    right:30px;
    bottom:30px;
    color:#FFF;
    z-index:2;

}

.categoria-info h3{

    font-family:'Playfair Display',serif;
    font-size:32px;
    margin-bottom:12px;
    color:#FFF;

}

.categoria-info a{

    display:inline-block;

    padding:12px 24px;

    border-radius:30px;

    background:#F8D9DE;

    color:#8A6A56;

    font-weight:700;

    transition:.30s;

}

.categoria-info a:hover{

    background:#FFF;
    color:#8A6A56;

}

.categoria-card::before{

    content:"";

    position:absolute;

    inset:0;

    border:3px solid rgba(255,255,255,.35);

    border-radius:22px;

    opacity:0;

    transform:scale(.92);

    transition:.35s;

    z-index:1;

}

.categoria-card:hover::before{

    opacity:1;

    transform:scale(.96);

}

/*=========================================
            RESPONSIVO
=========================================*/

@media(max-width:992px){

    .categoria-card{

        height:340px;

    }

}

@media(max-width:768px){

    .categorias{

        padding:70px 0;

    }

    .categoria-card{

        height:300px;

    }

    .categoria-info{

        left:20px;
        right:20px;
        bottom:20px;

    }

    .categoria-info h3{

        font-size:26px;

    }

}