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


.categorias-home{

    width:90%;

    margin:60px auto;

}



.categorias-home h2{

    text-align:center;

    font-size:38px;

    color:#4b2b20;

}



.categorias-home p{

    text-align:center;

    color:#777;

    margin-bottom:35px;

}



/* CARROSSEL */

.scroll-categorias{


    display:flex;

    gap:25px;


    overflow-x:auto;


    scroll-behavior:smooth;


    padding:10px 5px 25px;


    scrollbar-width:none;


}


.scroll-categorias::-webkit-scrollbar{

    display:none;

}




.categoria-card{

    min-width:220px;
    height:260px;

    position:relative;

    overflow:hidden;

    border-radius:24px;

    flex-shrink:0;

    text-decoration:none;

    color:white;

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}



.categoria-card img{


    width:100%;


    height:100%;


    object-fit:cover;


}



.categoria-overlay{


    position:absolute;


    inset:0;


    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );


    display:flex;


    flex-direction:column;


    justify-content:flex-end;


    padding:25px;


    color:white;


}



.categoria-overlay h3{


    font-size:25px;


    margin-bottom:10px;


}



.categoria-overlay a{


    color:white;


    font-weight:bold;


}





@media(max-width:768px){


.categorias-home{

    width:95%;

}


.categoria-card{

    min-width:160px;

    height:200px;

}


.categoria-overlay{

    padding:15px;

}


.categoria-overlay h3{

    font-size:20px;

}


}

.categoria-card:hover{

    transform:
        translateY(-10px)
        scale(1.03);

    box-shadow:
        0 18px 35px rgba(0,0,0,.28);

}

.categoria-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;

}

.categoria-card:hover img{

    transform:scale(1.08);

}

.categoria-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:22px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );

}

@media (hover:none){

    .categoria-card:active{

        transform:scale(.97);

    }

}

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

.categorias-wrapper{

    position:relative;

}


/*==========================
    BOTÕES
==========================*/

.btn-scroll{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#4b2b20;

    cursor:pointer;

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

    z-index:50;

    transition:.35s;

}


.btn-scroll:hover{

    background:#d68d52;

    color:#fff;

    transform:translateY(-50%) scale(1.12);

}


.btn-scroll.left{

    left:-15px;

}


.btn-scroll.right{

    right:-15px;

}


/*==========================
    ESCONDER BOTÃO
==========================*/

.btn-scroll.hide{

    opacity:0;

    pointer-events:none;

    transform:translateY(-50%) scale(.8);

}








/*=================================
    BANNER CATEGORIA
=================================*/

.banner-categoria{

    position:relative;

    height:340px;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.overlay-banner{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.35)
    );

    display:flex;

    align-items:center;

}

.overlay-banner .container{

    width:90%;

    margin:auto;

}

.overlay-banner h1{

    font-size:52px;

    color:#fff;

    font-weight:700;

    margin-bottom:15px;

}

.overlay-banner p{

    color:#fff;

    font-size:20px;

    line-height:1.7;

    max-width:650px;

}

/*=================================
    MOBILE
=================================*/

@media(max-width:768px){

    .banner-categoria{

        height:180px;

    }

    .overlay-banner{

        justify-content:center;

        align-items:center;

        text-align:center;

        padding:20px;

    }

    .overlay-banner .container{

        width:100%;

        padding:0 15px;

    }

    .overlay-banner h1{

        font-size:30px;

        margin-bottom:10px;

    }

    .overlay-banner p{

        font-size:14px;

        line-height:1.5;

        max-width:100%;

        margin:auto;

    }

}

.categoria-page{

    margin-top:50px;

}