html{
scroll-behavior:smooth;
}

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

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}


header{

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

}

body{
font-family: serif;
background:#f4f6fb;
color:#333;
}

/* MENU */

header{

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

padding:20px 80px;

background:rgb(35, 75, 123);
color:white;

}

.logo{
  display:flex;
  align-items:left;
   font-size:30px;
  font-weight:bold;
}

.logo img{
  width:50px;
  height:40px;
  object-fit:contain;
}

.logo{
font-size:30px;
font-weight:bold;
}

.logo span{
color:#ffffff;
}

nav ul{

display:flex;
list-style:none;
gap:40px;

}

nav{
margin-left:auto;
margin-right:20px;
}

nav a{

color:white;
text-decoration:none;
align-items: self-end;
font-size:16px;

}

nav a:hover{
color:#ff7a00;
}

/* HERO */

.hero{
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
padding:80px;
background:white;
}

.hero-text{
max-width:550px;}

.hero-text span{
font-size:18px;
margin-bottom:30px;
color:#ff7a00;}

.hero-text h1{
font-size:42px;
margin-bottom:20px;
color:rgb(34, 75, 123);
}

.hero-text p{
font-size:18px;
margin-bottom:30px;
}

.hero-buttons{
display:flex;
gap:15px;
}

.hero .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
}

.btn-primary{
background:#ff7a00;
border:none;
color:white;
padding:14px 28px;
border-radius:6px;
font-size:16px;
cursor:pointer;
}

.btn-secondary{

background:#e5e7eb;
border:none;
padding:14px 28px;
border-radius:6px;
font-size:16px;
cursor:pointer;
}

.hero .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:100px;
}

.hero-text{
flex:1;
}

.hero-img{
flex:1;
display:flex;
justify-content:center;
}

.hero-img img{
width:100%;
max-width:100%;
height:auto;
border-radius:10px;
}


/* FEATURES */

.features{

padding:80px;
text-align:center;
}


.features h3{

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

}

.feature-card h3{
margin-bottom:20px;
font-size:20px;
}

.feature-card p{
line-height:1.6;
}
.features-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:30px;
justify-content:center;

}

.features h2{

font-size:30px;
margin-bottom:60px; /* afasta dos cards */
color:#1e3a8a;
font-weight:bold;

}

.feature-card{
background:white;
border:2px solid #0e36b9;
border-radius:6px;
padding:30px;
width:100%;
height:100%; /* faz todos ficarem iguais */

margin:auto;
display:flex;
flex-direction:column;
text-align:left;
box-shadow:0 5px 20px rgb(34,75,123);
}

.btn-pdf{
margin-top:auto;
align-self:center;
}

/* BENEFITS */

.benefits{

padding:80px;

background:#1e3a8a;
color:white;

}

.benefits-text{

max-width:500px;

}

.benefits ul{

margin:20px 0;

}

.benefits li{

margin-bottom:10px;

}



/* TESTIMONIAL */

/* NUMEROS E DADOS */

.stats{

padding:30px 80px;
margin-top:20px; /* empurra o título para baixo */
background:#d8dfe6;
text-align:center;

}

.stats h2{

font-size:34px;
margin-bottom:60px;
color:rgb(34, 75, 123);

}

.stats-grid{

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

}

.stat-card{

background:white;
padding:40px;
border-radius:8px;

box-shadow:0 6px 20px rgba(0,0,0,0.08);

transition:0.3s;

}

.stat-card:hover{

transform:translateY(-6px);

}

.stat-icon{

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

}

.stat-card h3{

font-size:36px;
color:#ff7a00;
margin-bottom:10px;

}

.stat-card p{

font-size:15px;
line-height:1.6;

}

.cta{

margin-top:10px;
margin-bottom:10px;
font-family: 'Times New Roman', Times, serif;
max-width:900px;

margin-left:auto;
margin-right:auto;

padding:10px;   /* cria espaço interno */

text-align:center;

}

.cta h3{
margin-bottom:25px;
color: #2f15a0;
}

.cta a{
display:inline-block;
}


/* FOOTER */

footer{
background:rgb(34, 75, 123);
color:white;

text-align:center;

padding:20px;

}
/* PRICING */

.pricing{
padding:80px 0;
background:#efefef;
text-align:center;
width:100%;
}

.pricing h2{
margin-bottom:50px;
font-size:32px;
}

.pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
justify-items:center;
}

.pricing-card{
background:white;
border:2px solid #0e36b9;
border-radius:6px;
padding:30px;
max-width:330px;
width:100%;
text-align:left;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.pricing-title{

background:linear-gradient(to right,#cfd6e6,#3b56a1);
padding:12px;

border-radius:6px;

font-weight:bold;
text-align:center;

margin-bottom:20px;

font-size:20px;

}

.pricing-card h3{

font-size:30px;
color:#244b7b;

margin-bottom:20px;

}

.pricing-card h3 span{

font-size:16px;
color:#333;

}

.pricing-card ul{

list-style:none;
margin-bottom:30px;

}

.pricing-card li{

margin-bottom:10px;

}

.pricing-card button{

width:100%;
background:#0e36b9;
border:none;
color:white;
padding:15px;

border-radius:8px;

font-size:16px;
cursor:pointer;

}

.pricing-card button:hover{
background:#0e36b9;
}

/* plano destacado */

.destaque{
border:3px solid #2ecc71;
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.destaque .pricing-title{
background:#2ecc71;
color:white;
}

.destaque button{
background:#2ecc71;
}

.tag{

background:#2ecc71;
color:white;

font-size:12px;
font-weight:bold;

padding:6px 12px;
border-radius:20px;

display:inline-block;

margin-bottom:15px;
}

.metodos{
list-style:none;
padding-left:0;
margin-top:15px;
}

.metodos li{
margin-bottom:12px;
font-size:17px;
line-height:1.6;
}

.metodos li::before{
content:"✔ ";
color:#2ecc71;
font-weight:bold;
}

.btn-pdf{

display:block;
margin:20px auto;

background:#244b7b;
color:white;

padding:12px 20px;

border-radius:6px;

text-decoration:none;
font-size:14px;

width:fit-content;

}

.faq{

padding:80px 20px;
background:#f7f9fc;

}

.faq h2{

font-size:32px;
margin-bottom:40px;
color:#1f3c88;
text-align:center;

}

.faq-container{

max-width:800px;
margin:auto;

}

.faq-item{

border-bottom:1px solid #ddd;
padding:15px 0;

}

.faq-question{

display:flex;
justify-content: space-between;
align-items: first baseline;

font-size:16px;
font-weight:600;
cursor:pointer;

}

.faq-answer{
display:none;
margin-top:10px;
line-height:1.6;
color:#555;
text-align: left;

}

.icon{
font-size:18px;
transition:0.3s;
}

.whatsapp-container{

position:fixed;
bottom:25px;
right:25px;
display:flex;
align-items:center;
gap:10px;
z-index:999;

}

.whatsapp-button{

width:60px;
height:60px;
border-radius:50%;
background:#25D366;

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

box-shadow:0 6px 20px rgba(0,0,0,0.2);

animation:pulse 2s infinite;

}

.whatsapp-button img{

width:35px;

}

.whatsapp-tooltip{

background:white;
padding:8px 14px;
border-radius:6px;

font-size:14px;
box-shadow:0 3px 10px rgba(0,0,0,0.15);

opacity:0;
transform:translateX(10px);
transition:0.3s;

}

.whatsapp-container:hover .whatsapp-tooltip{

opacity:1;
transform:translateX(0);

}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}
.btn-plano{

display:block;
text-align:center;

background:#0e36b9;
color:white;

padding:15px;

border-radius:8px;

text-decoration:none;
font-size:16px;

}

.btn-plano:hover{

background:#244b7b;

}

.seguro{
text-align:center;
font-size:13px;
color:#666;
margin-top:10px;
}

.seguroBox{
margin-top:15px;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
font-size:14px;
color:#555;
}

#pixBox{
text-align:center;
}

#pixBox img{
display:block;
margin:20px auto;
}

/******************* MOBILE ************* */

@media (max-width: 768px){

/* HEADER */
header{
padding:10px 15px; 
flex-direction:column;
align-items:center;
text-align:center;
}

/* LOGO */
.logo{
font-size:20px;
justify-content:center; 
margin-bottom:10px;    
}

.logo img{
width:35px;
height:auto;
}

/* Força o texto "Concremix" da logo a ser branco no mobile */
    .logo, 
    .logo a, 
    header .logo {
        color: #ffffff !important; 
        text-decoration: none !important;
    }

/* MENU */
nav{
width:100%;
margin-top:5px;
}

nav ul{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
padding:0;
margin:0; 
}

nav li{
list-style:none;
}

nav a{
display:block;
padding:6px 10px;
background:rgba(255,255,255,0.1);
border-radius:6px;
font-size:13px;
white-space:nowrap; 
}

/* HERO */
.hero{
flex-direction:column;
gap:20px;
padding:40px 20px;
text-align:left !important;
width:100%;
}

/* 🔥 CORREÇÃO NOVA (ESSENCIAL) */
.hero .container{
flex-direction:column;
gap:30px;
width:100%;
align-items:flex-start !important;

/* remove limitação do container */
max-width:100% !important;
padding:0 !important;
margin:0 !important;
}

/* 🔥 CORREÇÃO REAL */
.hero-text{
display:flex;
flex-direction:column;
align-items:flex-start !important;
text-align:left !important;
width:100%;

/* remove travas antigas */
max-width:100% !important;
margin:0 !important;
}

.hero-text span{
display:block;
text-align:left !important;
width:100%;
margin-bottom:10px;
}

.hero-text h1{
font-size:28px;
text-align:left !important;
width:100%;
margin-bottom:20px;
}

.hero-text p{
font-size:16px;
text-align:justify;
line-height:1.6;
margin-bottom:30px;
width:100%;
}

.hero-img{
width:100%;
}

/* BOTÕES */
.hero-buttons{
flex-direction:column;
width:100%;
gap:15px;
align-items:center;
}

.hero-buttons a{
width:100%;
text-align:center;
}

/* SEÇÕES */
section{
padding-left:20px !important;
padding-right:20px !important;
}

.features,
.benefits,
.stats{
padding:40px 20px;
}

/* GRIDS */
.features-grid,
.pricing-grid,
.stats-grid{
grid-template-columns:1fr;
}

/* CONTAINER */
.container{
padding:0 15px;
width:100%;
}

/* EVITA ESTOURO */
*{
max-width:100%;
}

/* CARDS */
.stat-card{
padding:25px;
}

.pricing-card{
max-width:100%;
}

}

/* IMAGENS */
img{
max-width:100%;
height:auto;
}

/* REMOVE SCROLL LATERAL */
html, body{
overflow-x:hidden;
}