/* =========================
RESET
========================= */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Montserrat',sans-serif;
background:#F8F7F4;
color:#2F2F2F;
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

:root{
--primary:#556764;
--primary-dark:#445552;
--white:#FFFFFF;
--background:#F8F7F4;
--text:#2F2F2F;
}

/* =========================
CONTAINER
========================= */

.container{
width:90%;
max-width:1280px;
margin:auto;
}

/* =========================
HEADER
========================= */

.header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
padding:20px 0;
transition:.4s ease;
}

.header.scrolled{
background:rgba(255,255,255,.95);
backdrop-filter:blur(12px);
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.header .container{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
width:280px;
height:auto;
transition:.3s;
}

.menu{
display:flex;
gap:35px;
}

.menu a{
color:#fff;
font-size:13px;
text-transform:uppercase;
letter-spacing:1px;
transition:.3s;
}

.header.scrolled .menu a{
color:#2F2F2F;
}

.btn-header{
border:1px solid #fff;
color:#fff;
padding:14px 28px;
border-radius:8px;
transition:.3s;
}

.header.scrolled .btn-header{
border-color:var(--primary);
color:var(--primary);
}

/* =========================
HERO
========================= */

.hero{
min-height:100vh;
background:url("../assets/images/hero.jpg") center center/cover no-repeat;
display:flex;
justify-content:center;
align-items:center;
position:relative;
}

.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.55);
}

.hero-content{
position:relative;
z-index:2;
text-align:center;
max-width:1000px;
padding:20px;
}

.hero-animation{
animation:heroFade 1.5s ease forwards;
}

@keyframes heroFade{
from{
opacity:0;
transform:translateY(50px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.hero-content span{
color: #fff;
display:block;
margin-bottom:45px;
letter-spacing:8px;
font-size:12px;
font-weight:500;
}

.hero h1{
font-family:'Forum', serif;
color:rgba(255,255,255,.95);

font-size:clamp(3rem,5vw,4.8rem);

font-weight:300;

line-height:1;

letter-spacing:1px;

margin:0 auto 60px auto;
}

.hero p{
    color: #fff;
max-width:820px;
font-size:1.15rem;
line-height:1.9;
opacity:.9;
}

.hero-buttons{
margin-top:55px;
}

.hero-buttons{
margin-top:40px;
display:flex;
justify-content:center;
gap:20px;
}

.btn-primary{
background:var(--primary);
color:#fff;
padding:18px 35px;
border-radius:8px;
transition:.3s;
display:inline-block;
}

.btn-primary:hover{
background:var(--primary-dark);
transform:translateY(-3px);
}

.btn-secondary{
border:1px solid #fff;
color:#fff;
padding:18px 35px;
border-radius:8px;
}

/* =========================
ESTATÍSTICAS
========================= */

.stats{
background:#fff;
padding:90px 0;
}

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

.stat{
text-align:center;
padding:30px;
}

.stat h3{
font-size:3rem;
color:var(--primary);
margin-bottom:10px;
}

.stat p{
color:#666;
}

/* =========================
REGIÕES
========================= */

.regions{
padding:120px 0;
background:#f3f3f3;
}

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

.regions-grid div{
background:#fff;
padding:30px;
border-radius:12px;
text-align:center;
font-weight:600;
box-shadow:0 10px 25px rgba(0,0,0,.05);
transition:.3s;
}

.regions-grid div:hover{
transform:translateY(-8px);
}

/* =========================
SEÇÕES
========================= */

.about,
.process,
.faq,
.instagram-section{
padding:120px 0;
}

.differentials,
.portfolio{
padding:120px 0;
background:#fff;
}

.about .container{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

.about-image img{
border-radius:16px;
}

.section-title{
text-align:center;
margin-bottom:70px;
}

.section-title span,
.about span{
color:var(--primary);
font-size:13px;
letter-spacing:2px;
}

.about h2,
.section-title h2,
.cta-section h2{
font-family:'Playfair Display',serif;
font-size:3rem;
margin-bottom:20px;
}

.about p{
line-height:1.9;
margin-bottom:15px;
}

/* =========================
DIFERENCIAIS
========================= */

.differentials-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    align-items:stretch;
    margin-bottom:150px;
}

.card{
    background:#fff;
    border-radius:16px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    transition:.4s;
    position:relative;
    overflow:hidden;
    height:250px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px;
}

.card:hover{
    transform:translateY(-10px);
}

.card h3{
    color:var(--primary);
    position:relative;
    z-index:2;
    transition:.4s ease;
    font-size:1.4rem;
}

.card:hover h3{
    opacity:0;
    transform:translateY(-10px);
}

.card-overlay{
    position:absolute;
    inset:0;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    opacity:0;
    transition:.4s ease;
}

.card-overlay p{
    line-height:1.8;
    font-size:.95rem;
    margin:0;
}

.card:hover .card-overlay{
    opacity:1;
}

/* Responsivo */

@media(max-width:991px){

    .differentials-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .differentials-grid{
        grid-template-columns:1fr;
    }

    .card{
        height:220px;
    }

}

/* =========================
PROCESSO
========================= */

.timeline{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:20px;
}

.step{
text-align:center;
opacity:0;
transform:translateY(50px);
transition:.8s ease;
}

.step.show{
opacity:1;
transform:translateY(0);
}

.step span{
width:80px;
height:80px;
border-radius:50%;
background:var(--primary);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
margin:auto auto 15px;
}

/* =========================
PORTFÓLIO
========================= */

.portfolio-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.portfolio-grid img{
width:100%;
height:340px;
object-fit:cover;
border-radius:16px;
opacity:0;
transform:translateY(40px);
transition:all .8s ease;
cursor:pointer;
}

.portfolio-grid img:hover{
transform:scale(1.04);
}

.portfolio-grid img.portfolio-show{
opacity:1;
transform:translateY(0);
}

/* =========================
INSTAGRAM
========================= */

#instagram-feed{
background:#f5f5f5;
padding:60px;
border-radius:16px;
text-align:center;
}

/* =========================
FAQ
========================= */

.faq-item{
background:#fff;
padding:30px;
border-radius:12px;
margin-bottom:20px;
box-shadow:0 5px 15px rgba(0,0,0,.04);
}

.faq-item h3{
color:var(--primary);
margin-bottom:10px;
}

/* =========================
CTA
========================= */

.cta-section{
background:var(--primary);
color:#fff;
text-align:center;
padding:120px 0;
}

.cta-section p{
max-width:700px;
margin:auto auto 35px;
line-height:1.8;
}

/* =========================
FOOTER
========================= */

footer{
background:#111;
color:#fff;
text-align:center;
padding:80px 0;
}

footer img{
height:150px;
margin:auto auto 30px;
}

footer p{
margin-bottom:10px;
}

footer a{
color:#fff;
}

/* =========================
WHATSAPP
========================= */

.whatsapp-float{
position:fixed;
right:25px;
bottom:25px;
background:#25D366;
color:#fff;
padding:16px 24px;
border-radius:50px;
z-index:999;
}

/* =========================
ANIMAÇÕES
========================= */

.fade-up{
opacity:0;
transform:translateY(50px);
transition:all .9s ease;
}

.fade-up.show{
opacity:1;
transform:translateY(0);
}

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

@media(max-width:991px){

.menu{
display:none;
}

.about .container{
grid-template-columns:1fr;
}

.stats-grid,
.regions-grid,
.portfolio-grid,
.differentials-grid{
grid-template-columns:1fr 1fr;
}

.timeline{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:768px){

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

.btn-header{
padding:10px 15px;
font-size:13px;
}

.hero-buttons{
flex-direction:column;
}

.hero h1{
font-size:3rem;
}

.stats-grid,
.regions-grid,
.portfolio-grid,
.differentials-grid,
.timeline{
grid-template-columns:1fr;
}

}

/* =========================
LIGHTBOX
========================= */

#lightbox{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.95);

    display:none;

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

    z-index:99999;

    cursor:pointer;

}

#lightbox img{

    max-width:90%;
    max-height:90%;

    border-radius:12px;

}

#close-lightbox{

    position:absolute;

    top:30px;
    right:40px;

    color:#fff;

    font-size:50px;

    cursor:pointer;

}