*{margin: 0; padding: 0; box-sizing: border-box;}

html { letter-spacing: 1.4px; font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal;}

.poppins-black {font-family: "Poppins", sans-serif; font-weight: 900; font-style: normal;}



.container {width: 96%; margin: 0 auto; padding: 0; }

.container::after,.container::before { content: " "; display: table;}

.container:after { clear: both;}

/* box da minha grid */

.box-1 {width: 6.818181818181818%;}

.box-2 {width: 15.15151515151515%;}

.box-3 {width: 23.48484848484848%;}

.box-4 {width: 31.81818181818182%;}

.box-5 {width: 40.15151515151515%;}

.box-6 {width: 48.48484848484848%;}

.box-7 {width: 56.81818181818182%;}

.box-8 { width: 65.15151515151515%;}

.box-9 {width: 73.48484848484848%;}

.box-10 {width: 81.81818181818182%;}

.box-11 {width: 90.15151515151515%;}

.box-12 {width: 98.48484848484848%;}

.box-1,.box-2,.box-3,.box-4,.box-5,.box-6,.box-7,.box-8,.box-9,.box-10,.box-11,.box-12 {

    float: left;    margin-left: 0.7575757575757576%;  margin-right: 0.7575757575757576%;

}



header{

    background-color: #e8e8e8;

    width: 100%;

    height: 80px;

    padding: 5px;

    position: fixed;

    top: 0;

    z-index: 99;

}



nav{

    width: 100%;

       

}



ul{

    display: flex;

    justify-content: flex-end;  

}

ul li{

    list-style: none;

    margin-left: 30px;

    margin-top: 15px;      

}



ul li a{

    text-decoration: none;

    font-weight: 700;

    color: black;

}



/* Faixada */

.big-title{

    font-size:40px;

    text-align: center;

}



.faixada .big-title{

    margin-top: 100px;

}



.faixada{

    margin-top: 100px;

}



.faixada .text{

    letter-spacing: 1.8px ;

    text-align: center;

    margin-top: 30px;

}



.faixada .caixa{

    background-color: orange;

    border-radius: 5px;

    padding: 10px;

    text-align: center;

    margin-top: 20px;

    color: white;

    font-weight: 500;

}



.faixada .img {

    padding: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.faixada .img img {

    width: 100%;

    max-width: 480px;

    height: 380px;

    object-fit: cover;

    border-radius: 16px;



    /* efeito visual */

    box-shadow: 0 20px 40px rgba(0,0,0,0.18);



    transition: transform 0.4s ease, box-shadow 0.4s ease;

}



/* efeito ao passar o mouse */

.faixada .img img:hover {

    transform: scale(1.03);

    box-shadow: 0 30px 60px rgba(0,0,0,0.25);

}



/* Produtos */



.produtos{

    width: 100%;

    height: auto;

    background: linear-gradient(to right,orange, orange);

    margin-top: 100px;

    padding-bottom: 50px;

    padding-top: 100px;

   

}



.produtos .big-title{

    color: white;

}

.produtos .big-title::after{

    content:"";

    width: 30%;

    height: 3px;

    display: block;

    background: white;

    margin-bottom: 50px;

    margin-left: 250px;

    margin-top: 10px;

}



.produtos .box-3{

    padding: 10px;

    background-color: #e8e8e8;

    border-radius: 8px;

    margin-bottom: 20px;



    height: 260px;

    display: flex;

    align-items: center;

    justify-content: center;



    overflow: hidden;        /* evita vazamento */

    position: relative;

    z-index: 1;



    transition: transform .3s ease;

}



.produtos .box-3:hover{

    transform: scale(1.08); /* um pouco menor já fica mais elegante */

    z-index: 10;

}



.produtos .box-3 img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 6px;

}



.sobre{

    width: 100%;

    height: auto;

    padding-bottom: 20px;

    background: linear-gradient(to right,#f0f0f0,#c4c3c3);

    margin-top: 120px;



}



.sobre .big-title::after{

    content:"";

    width: 35%;

    height: 3px;

    display: block;

    margin: 10px auto;

    background: black;

    margin-bottom: 50px;

    margin-left: 480px;

    margin-top: 10px;

}



.sobre img{

    width: 100%;

}



.sobre .box-4{

    background-color:#f7b06d ;

    padding: 10px;

    border-radius: 8px;

}

.sobre .box-8{

    padding: 10px;

    background-color:#e8e8e8;

    border-radius: 5px;

}



.sub-title{

    font-size: 28px;

    text-align: center;

}



.paragrafo{

     letter-spacing:1.2px;

     text-align: center;

}



/* Contato */



.contato{

    width: 100%;

    height: auto;

    padding: 30px;

    margin-top: 100px;

    background-color: #f7b06d;

    padding-top: 40px;    

}



.contato .big-title{

    color: #e8e8e8;

   

}



.contato .big-title::after{

    content: "";

    width: 700px;

    height:6px;

    display:block;

    margin: 0 auto;

    background-color:white;

    margin-bottom: 40px;

}



.contato form{

    width: 100%;

    color: #ffffff;

}



.contato input,textarea{

    width: 100%;

    height: 40px;

    border: none;

    border-radius: 5px;

    outline: none;

    padding-left: 10px;

    font-weight:400;

    margin-bottom: 20px;

    background-color:rgba(255,255,255,0.1) ;

    box-shadow:0.1rem .2rem #be6938 ;

}



.contato textarea{

    height: 150px;

}



.btn{

    font-size: 16px;

    background: linear-gradient(to left,#dcdcdc,#eeeeee);

    color: #1c1c1c;

    cursor: pointer;



}



.btn:hover{

     background: linear-gradient(to left,#eeeeee,#dcdcdc);

}



.contato .sub{

    font-size: 20px;

    color: white;

    margin-bottom: 20px;

}



.contato ul{

    margin-top: 80px;

    display: flex;

    justify-content: flex-start;

    flex-direction: column;

    padding: 30px;

   

   

}



.contato ul li {

    display: flex;

    align-items: center;

    color: #ffffff;

    border-bottom: 2px solid #fff;



}



.contato ul li i{

    font-size: 38px;

    margin-right: 10px;

}



.contato ul li a{

    font-size: 16px;

    color: #ffffff;

    cursor: pointer;

}



.contato ul li .whats:hover{

    color: rgb(34, 158, 22);

}



footer{

    padding: 30px;

    text-align: center;

    font-size: 14px;

}



/* CORES POR ÍCONE */

        .fa-square-whatsapp{            

            background:#25D366;}



        .fa-envelope{background:#EA4335;}

       

        .fa-instagram{

            background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);

        }

        .fa-location-dot{background:#4285F4;}



        /* Mapa */

.map-click{

    cursor: pointer;

    transition: background .3s ease;
}

.whats-click{
    cursor: pointer;
}

.instagram{
    cursor: pointer;
}


@media (max-width: 1024px) {

    .big-title{
        font-size: 32px;
    }

    /* Header */
    header{
        height: auto;
        padding: 10px 0;
    }

    ul{
        justify-content: center;
        flex-wrap: wrap;
    }

    ul li{
        margin: 10px;
    }

    /* Faixada */
    .faixada .box-6{
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }

    .faixada .img img{
        height: 320px;
    }

    /* Produtos → 2 colunas */
    .produtos .box-3{
        width: 48%;
    }

    /* Sobre */
    .sobre .box-4,
    .sobre .box-8{
        width: 100%;
        margin-bottom: 20px;
    }

    /* Contato */
    .contato .box-6{
        width: 100%;
        margin-bottom: 30px;
    }

    .contato ul{
        margin-top: 20px;
    }
}



/* 📱 Samsung Galaxy S8+ | 360x740 */
/* 📱 Samsung Galaxy S8+ | 360x740 */
@media screen and (max-width: 480px) {

    /* Grid vira coluna */
    .box-1,.box-2,.box-3,.box-4,.box-5,.box-6,
    .box-7,.box-8,.box-9,.box-10,.box-11,.box-12{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Títulos */
    .big-title{
        font-size: 24px;
    }

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

    /* Menu */
    header{
        height: auto;
        padding: 10px 0;
    }

    nav ul{
        flex-direction: column;
        align-items: center;
    }

    nav ul li{
        margin: 6px 0;
    }

    /* Faixada */
    .faixada{
        margin-top: 140px;
    }

    .faixada .text{
        font-size: 14px;
    }

    .faixada .img img{
        height: 220px;
    }

    /* Produtos → 1 por linha */
    .produtos .box-3{
        width: 100%;
        height: 200px;
    }

    /* Linhas decorativas */
    .produtos .big-title::after,
    .sobre .big-title::after,
    .contato .big-title::after{
        width: 85%;
        margin: 10px auto 40px;
    }

    /* Contato */
    .contato{
        padding: 20px;
    }

    .contato ul{
        padding: 10px;
        margin-top: 20px;
    }

    .contato ul li i{
        font-size: 26px;
    }

    footer{
        font-size: 12px;
    }
}