:root{
--accent:#34d399;
--dark:#0f172a;
--light:#f8fafc;
--text:#0f172a;
--ease:cubic-bezier(.34,1.56,.64,1);
}

/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Inter',sans-serif;
background:var(--light);
color:var(--text);
opacity:0;
animation:pageFade .8s ease forwards;
}

@keyframes pageFade{
to{opacity:1;}
}

/* HEADER */
header{
position:fixed;
width:100%;
padding:18px 0;
z-index:1000;
transition:.3s;
}
header.scrolled{
background:#fff;
box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.container{
width:88%;
max-width:1300px;
margin:auto;
}
.nav{
display:flex;
justify-content:space-between;
align-items:center;
}
nav a{
margin-left:25px;
text-decoration:none;
color:var(--text);
font-weight:500;
position:relative;
}
nav a::after{
content:"";
position:absolute;
bottom:-5px;
left:0;
width:0;
height:2px;
background:var(--accent);
transition:.3s;
}
nav a:hover::after{width:100%}

/* HERO */
.contact-hero{
height:70vh;
background:url("https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1600&q=80") center/cover fixed;
display:flex;
align-items:center;
justify-content:center;
position:relative;
color:#fff;
text-align:center;
overflow:hidden;
}
.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.6);
}
.hero-content{
position:relative;
max-width:900px;
transition:transform .2s ease;
}
.hero-content h1{
font-family:'Playfair Display',serif;
font-size:48px;
margin-bottom:18px;
}
.hero-content p{
font-size:18px;
}

/* CONTACT SECTION */
.contact-section{
padding:120px 6%;
}
.contact-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
max-width:1300px;
margin:auto;
}

/* INFO */
.contact-info h2{
font-family:'Playfair Display',serif;
font-size:34px;
margin-bottom:15px;
}
.contact-info p{
margin-bottom:25px;
}

.info-item{
display:flex;
gap:15px;
align-items:flex-start;
margin-bottom:28px;
transition:.35s var(--ease);
}
.info-item:hover{
transform:translateX(6px);
}

/* ICONS */
.icon{
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(52,211,153,.15);
border-radius:50%;
color:var(--accent);
position:relative;
transition:.35s var(--ease);
}
.icon svg{
width:22px;
height:22px;
}
.icon::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:rgba(52,211,153,.2);
opacity:0;
transition:.4s;
}
.info-item:hover .icon{
transform:scale(1.1);
background:var(--accent);
color:#fff;
}
.info-item:hover .icon::after{
opacity:1;
transform:scale(1.4);
}

/* SVG DRAW */
.svg-icon path,
.svg-icon rect,
.svg-icon circle,
.svg-icon polyline{
stroke-dasharray:200;
stroke-dashoffset:200;
transition:stroke-dashoffset 1.2s ease;
}
.reveal.active .svg-icon path,
.reveal.active .svg-icon rect,
.reveal.active .svg-icon circle,
.reveal.active .svg-icon polyline{
stroke-dashoffset:0;
}

/* FORM */
.contact-form{
background:#fff;
padding:45px;
border-radius:20px;
box-shadow:0 25px 60px rgba(0,0,0,.12);
display:flex;
flex-direction:column;
gap:18px;
transition:.35s var(--ease);
animation:formFloat 6s ease-in-out infinite;
}
@keyframes formFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-6px)}
}
.contact-form:hover{
transform:translateY(-8px);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
padding:14px;
border-radius:8px;
border:1px solid #ddd;
font-size:14px;
transition:.3s;
}
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(52,211,153,.2);
outline:none;
}

.btn-primary{
background:var(--accent);
border:none;
padding:14px;
border-radius:8px;
font-weight:600;
cursor:pointer;
transition:.35s var(--ease);
position:relative;
overflow:hidden;
}
.btn-primary::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
transition:.6s;
}
.btn-primary:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(52,211,153,.45);
}
.btn-primary:hover::before{
left:100%;
}

/* FAQ */
.faq-section{
background:linear-gradient(270deg,#f1f5f9,#e2e8f0,#f1f5f9);
background-size:400% 400%;
animation:bgMove 18s ease infinite;
padding:120px 6%;
text-align:center;
}
@keyframes bgMove{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.faq-container{
max-width:900px;
margin:auto;
}
.faq-container h2{
font-family:'Playfair Display',serif;
font-size:36px;
margin-bottom:10px;
}
.faq-container p{
margin-bottom:40px;
color:#475569;
}
.faq-item{
background:#fff;
border-radius:14px;
margin-bottom:18px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,.05);
transition:.35s var(--ease);
}
.faq-item:hover{
transform:translateY(-5px);
box-shadow:0 15px 35px rgba(0,0,0,.1);
}
.faq-question{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
cursor:pointer;
}
.faq-arrow{
width:22px;
height:22px;
transition:transform .4s ease;
}
.faq-item.open .faq-arrow{
transform:rotate(180deg);
}
.faq-answer{
max-height:0;
overflow:hidden;
padding:0 20px;
transition:max-height .5s cubic-bezier(.4,0,.2,1);
color:#475569;
text-align:left;
}
.faq-item.open .faq-answer{
max-height:300px;
padding:20px;
}

/* WHATSAPP */
.whatsapp-btn{
position:fixed;
bottom:25px;
right:25px;
width:60px;
height:60px;
background:#25D366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 15px 35px rgba(0,0,0,.25);
z-index:1000;
transition:.3s var(--ease);
animation:float 3s ease-in-out infinite;
}
.whatsapp-btn:hover{
transform:scale(1.15);
}
.whatsapp-btn svg{
width:28px;
height:28px;
}
@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}

/* FOOTER */
footer{
background:var(--dark);
color:#fff;
padding:30px;
text-align:center;
}

/* REVEAL */
.reveal{
opacity:0;
transform:translateY(40px);
transition:.8s ease;
}
.reveal.active{
opacity:1;
transform:translateY(0);
}

/* RESPONSIVE */
@media(max-width:1200px){
.contact-wrapper{gap:60px}
}
@media(max-width:992px){
.contact-wrapper{
grid-template-columns:1fr;
gap:50px;
}
.hero-content h1{font-size:36px}
}
@media(max-width:600px){
.contact-section{padding:80px 8%}
.hero-content h1{font-size:28px}
.faq-container h2{font-size:26px}
}