:root{

--verde:#1F7A3E;
--verde-escuro:#14532D;
--amarelo:#FFC107;
--cinza:#F5F5F5;

}

body{

margin:0;
font-family:Roboto;
background:#F4F4F4;

}

.container{

width:90%;
max-width:1200px;
margin:auto;

}

header{

background:#E53935;
color:white;

position:sticky;
top:0;
z-index:1000;


}

.header-flex{

display:flex;
align-items:center;
justify-content:space-between;

}


.menu{

display:flex;
gap:25px;
align-items:center;

}

.menu a{

text-decoration:none;  
color: white ; 
font-weight:500;

}

.menu-toggle{

display:none;
font-size:28px;
cursor:pointer;

}

.logo{

font-family:Montserrat;
font-size:24px;
font-weight:bold;
line-height:1.2;

}

.logo span{

display:block;
font-size:14px;
font-weight:400;
opacity:0.9;

}
/* .contato{

  width:100%;

} */

.contato h3{

    margin-bottom:20px;
    font-size:20px;

}

/* item de contato */

.contato-item{

    display:flex;
    align-items:center;

    gap:15px;

    padding:12px 15px;
    margin-bottom:12px;

    text-decoration:none;
    color:#979393;

    background:#3e3f44c7;

    border-radius:8px;

    transition:0.3s;
  

}

/* ícone */

.contato-item .icone{

    font-size:22px;

}

/* texto */

.contato-item p{

    margin:0;
    font-size:14px;
    color:#6e7280;

}

/* hover */

.contato-item:hover{

    background:#e9ecef;
    transform:translateY(-2px);

}


nav a{

color:white;
text-decoration:none;
margin-left:20px;

}

nav{

display:flex;
align-items:center;
justify-content:space-between;

}

.menu-links{

display:flex;
gap:25px;

}

.menu-links a{

text-decoration:none;
color:#333;
font-weight:500;

}

.btn-cotacao{

background:#E53935;
color:white;
padding:8px 16px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:0.3s;

}

.btn-cotacao:hover{

background:#c62828;

}


.hero{

height:70vh;
background:url('img2/hero.jpg') center/cover;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-align:center;

}

.hero-overlay{

background:rgba(0,0,0,0.45);
padding:40px;
border-radius:10px;
max-width: 80%;

}

.hero h1{

font-family:Montserrat;
font-size:40px;

}

.btn{

display:inline-block;
margin:10px;
padding:12px 25px;
background:#FFC107;
color:#000;
border-radius:8px;
text-decoration:none;

}

.btn-whatsapp{

background:#25D366;
color:white;

}

.sobre{

padding:30px 0;

}

.sobre-grid{

display:grid;
grid-template-columns:0.2fr 1fr;
gap:40px;

}

.sobre img{

width:100%;
border-radius:10px;

}

.setores{

background:white;
padding:60px 0;

}

.grid-setores{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}

.numeros{


color:#333;
padding:-40px 20px;
text-align:center;

}

.titulo-numeros{

font-size:32px;
margin-bottom:40px;

}

.grid-numeros{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:40px;

}

.numero h3{

font-size:48px;
font-weight:700;
margin-bottom:10px;

}

.numero p{

font-size:18px;
opacity:0.9;

}


.card{


background:#fff;
padding:25px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
transition:0.4s;

/* estado inicial */
opacity:0;
transform:translateY(40px);


}

.card:nth-child(1){ transition-delay:0.1s; }
.card:nth-child(2){ transition-delay:0.2s; }
.card:nth-child(3){ transition-delay:0.3s; }
.card:nth-child(4){ transition-delay:0.4s; }



/* quando aparecer na tela */
.card.show{

opacity:1;
transform:translateY(0);

}

/* efeito hover */
.card:hover{

transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,0.15);

}

/* .galeria{

padding:60px 0;

}

.grid-galeria{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;


}

.foto{

width:100%;
border-radius:12px;
opacity:0;
transform:scale(0.8);
transition:0.6s;

}

.foto.show{

opacity:1;
transform:scale(1);

}

.foto:hover{

transform:scale(1.05);

}


.grid-galeria img{

width:100%;
border-radius:10px;

} */

.galeria{

padding:80px 20px;
background:#f7f7f7;
text-align:center;

}

.grid-galeria{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;


}

.foto{

width:100%;
height:220px;
object-fit:cover;
border-radius:12px;
cursor:pointer;

transition:0.4s;

}

.foto:hover{

transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.2);

}

/* Lightbox */
#lightbox{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);

display:none;
align-items:center;
justify-content:center;

z-index:999;

}

#lightbox img{

max-width:90%;
max-height:90%;
border-radius:10px;

}

.seta{

position:absolute;
top:50%;
font-size:40px;
color:white;
cursor:pointer;
user-select:none;
padding:10px;

}

.esquerda{

left:40px;

}

.direita{

right:40px;

}

.fechar{

position:absolute;
top:30px;
right:40px;
font-size:40px;
color:white;
cursor:pointer;

}

#politica{
    color: #615b5b;
   
}
.parceiros{

    padding:60px 20px;
    background:#f5f5f5;
    text-align:center;

}

.carrossel-parceiros{

    overflow:hidden;
    margin-top:40px;

}

/* trilho */

.track{

    display:flex;
    gap:60px;

    animation:scrollParceiros 25s linear infinite;

}

/* logos */

.track img{

    height:60px;
    object-fit:contain;
    filter:grayscale(100%);
    opacity:0.8;

    border-radius: 10px;
    transition:0.3s;

}

.track img:hover{

    filter:grayscale(0%);
    opacity:1;
    transform:scale(1.05);

}

/* animação */

@keyframes scrollParceiros{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}



.mapa iframe{

width:100%;
height:350px;
border:0;

}

footer{
background:#2A2A2A;
color:white;
padding:40px 0;

}

.footer-grid{

    display:grid;
    grid-template-columns: 1fr 1fr auto;
    gap:30px;
    align-items:flex-start;

}


.whatsapp{

position:fixed;
bottom:25px;
right:25px;

background:#25D366;
color:white;

width:60px;
height:60px;

display:flex;
align-items:center;
justify-content:center;

font-size:26px;

border-radius:50%;

text-decoration:none;

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

z-index:999;

}


/* balão */

.whats-box{

position:fixed;
bottom:95px;
right:25px;

background:white;
color:#333;

padding:15px 18px;

border-radius:12px;

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

font-size:14px;

max-width:220px;

opacity:0;
transform:translateY(20px);

transition:0.4s;

z-index:998;

}


/* botão fechar */
.fechar-whats{
    position:absolute;
    top:5px;
    right:8px;

    border:none;
    background:none;
    font-size:16px;
    cursor:pointer;
}

/* seta do balão */

.whats-box::after{

content:"";

position:absolute;
bottom:-10px;
right:20px;

border-width:10px;
border-style:solid;

border-color:white transparent transparent transparent;

}

.whats-box.show{

opacity:1;
transform:translateY(0);

}


.whatsapp:hover{

transform:scale(1.05);

}

.whatsapp .icon{

font-size:22px;

}


/* animação */

.whatsapp::before{

content:"";
position:absolute;
width:100%;
height:100%;

border-radius:50px;

background:#25D366;

animation:pulse 2s infinite;
z-index:-1;

}

.localizacao{

padding:70px 0;
background:#F5F5F5;

}

.loja{

display:grid;
grid-template-columns:1fr 2fr;
gap:40px;
align-items:center;


}
.info-loja{

font-size:18px;

}

.localizacao-grid{

display:grid;
grid-template-columns:1fr 2fr;
gap:40px;
align-items:center;

}

.info-local{

font-size:18px;

}

.botoes-loja{

margin-top:20px;

}


.btn-mapa{

background:#FFC107;
padding:12px 20px;
border-radius:8px;
text-decoration:none;
color:#000;
font-weight:bold;
margin-right:10px;
display:inline-block;

}

.btn-whatsapp{

background:#25D366;
padding:12px 20px;
border-radius:8px;
text-decoration:none;
color:white;
font-weight:bold;
display:inline-block;

}

/* .mapa iframe{

width:100%;
height:350px;
border:0;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
} */

/******************* cookie **********************/
.cookie-banner{

position:fixed;
top:0;
left:0;
width:100%;

background:#222;
color:#fff;

padding:15px 20px;

display:flex;
justify-content:space-between;
align-items:center;

z-index:9999;

font-size:14px;

}

.cookie-banner a{

color:#4CAF50;
text-decoration:underline;

}

.cookie-banner button{

background:#E53935;
color:white;

border:none;
padding:8px 16px;

border-radius:6px;

cursor:pointer;

}

#cookie-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:998;
}

#cookie-banner{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:#fff;
padding:20px 30px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
z-index:999;
font-size:15px;
animation:aparecer 0.5s ease;
}

#cookie-banner button{
background:#E53935;
color:white;
border:none;
padding:10px 18px;
border-radius:5px;
cursor:pointer;
margin-left:10px;
}

#cookie-banner button:hover{
background:#c62828;
}

@keyframes aparecer{
from{
opacity:0;
transform:translate(-50%,40px);
}
to{
opacity:1;
transform:translate(-50%,0);
}
}

/* container do mapa */
#mapContainer{
    position:relative;
    width:100%;
    height: 90px;
}

/* mapa */
#mapa{
    width:100%; 
    height:500px;
    
}

/* botão flutuante */
#btnLoja{

    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);

    z-index:9999;

    padding:12px 18px;
    font-size:15px;

    background:#0d6efd;
    color:white;

    border:none;
    border-radius:8px;

    cursor:pointer;

    box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

/* efeito hover */
#btnLoja:hover{
    background:#0b5ed7;
}

.copyright{
    text-align:center;
    padding:15px;
    font-size:14px;
    color:#777;
    border-top:1px solid #413f3f;
    margin-top:20px;
}



/****************************************************/


@keyframes pulse{

    0%{transform:scale(1);opacity:0.6;}
    70%{transform:scale(2.3);opacity:0;}
    100%{opacity:0;}

}

@media(max-width:900px){

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }
    
    .contato-item{
        display:flex; */
        flex-direction:column;
         align-items:center;
       
        grid-template-columns:1fr;
        text-align:left;

    }

    #politica{
        margin-top:20px;
        display:inline-block;
    }
        
    .loja{

    grid-template-columns:0.1fr;

    }

   

    .localizacao-grid{

    grid-template-columns:1fr;

    }
    .grid-setores{

    grid-template-columns:1fr 1fr;

    }

    .grid-galeria{

    grid-template-columns:1fr 1fr;

    }

    .sobre-grid{

   
    grid-template-columns:0.3fr 1fr;
   

    }

    
    .menu{

        position:absolute;
        top:50px;
        left:0;
        width:100%;

        background:rgb(163, 39, 39);
        color: #333;
        flex-direction:column;
        align-items:center;
        gap:20px;

        padding:20px 0;

        display:none;

    }

    .menu-opcoes{
        color: #333;
    }

    .menu.active{

    display:flex;

    }

    .menu-toggle{

    display:block;

    }


}