/* =========================================================
   MAZALLI PISCINAS
   IDENTIDADE VISUAL
========================================================= */

:root {

--blue: #07529a;
--blue-dark: #063b70;
--blue-deep: #042b52;

--cyan: #12b8c4;
--cyan-dark: #079aa7;
--cyan-light: #ddf5f8;

--white: #ffffff;
--off-white: #f5f8fa;

--text: #12202d;
--muted: #687783;

--line: rgba(18,32,45,.12);

--shadow:
0 25px 70px rgba(4,43,82,.12);

--font-display:"Montserrat",sans-serif;
--font-body:"Manrope",sans-serif;

}


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


*{

margin:0;
padding:0;
box-sizing:border-box;

}


html{

scroll-behavior:smooth;
scroll-padding-top:82px;

}


body{

background:var(--white);
color:var(--text);
font-family:var(--font-body);
overflow-x:hidden;

}


body.menu-open{

overflow:hidden;

}


a{

color:inherit;
text-decoration:none;

}


button{

font:inherit;

}


img{

display:block;
max-width:100%;

}



.container{

width:min(1240px,calc(100% - 48px));
margin-inline:auto;

}



.section{

padding:120px 0;

}



/* =========================================================
TIPOGRAFIA
========================================================= */


h1,
h2,
h3{

font-family:var(--font-display);

}


h1,
h2{

letter-spacing:-.06em;

}


h2{

font-size:clamp(2.5rem,5vw,4.8rem);
font-weight:600;
line-height:.98;

}


h1 em,
h2 em{

color:var(--cyan);
font-style:normal;

}



.eyebrow{

color:var(--cyan);
font-family:var(--font-display);
font-size:.65rem;
font-weight:800;
letter-spacing:.2em;

}



.section-number{

display:block;
margin-bottom:12px;

color:var(--blue);

font-family:var(--font-display);
font-size:.65rem;
font-weight:800;
letter-spacing:.15em;

}



/* =========================================================
IMAGENS
========================================================= */


.hero-media,
.about-image,
.project-image{

position:relative;
overflow:hidden;

}



.hero-media img,
.about-image img,
.project-image img{

width:100%;
height:100%;
object-fit:cover;

}



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


.site-header{

position:fixed;
top:0;
left:0;

width:100%;

z-index:1000;

background:rgba(255,255,255,.97);

border-bottom:
1px solid rgba(18,32,45,.08);

backdrop-filter:blur(14px);

transition:.3s ease;

}



.site-header.scrolled{

box-shadow:
0 8px 30px rgba(4,43,82,.08);

}



.header-inner{

min-height:82px;

display:flex;
align-items:center;

gap:34px;

}



.brand{

width:150px;
flex-shrink:0;

}


.brand img{

width:100%;
height:62px;
object-fit:contain;

}



/* =========================================================
NAVEGAÇÃO
========================================================= */


.main-nav{

margin-left:auto;

display:flex;
align-items:center;

gap:30px;

}



.main-nav a{

position:relative;

font-size:.7rem;

font-weight:800;

letter-spacing:.08em;

text-transform:uppercase;

}



.main-nav a::after{

content:"";

position:absolute;

bottom:-8px;
left:0;

width:0;
height:2px;

background:var(--cyan);

transition:.25s;

}


.main-nav a:hover::after{

width:100%;

}



/* =========================================================
BOTÃO HEADER
========================================================= */


.header-whatsapp{

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

min-height:42px;

padding:0 19px;

border-radius:999px;

background:var(--blue);

color:white;

font-family:var(--font-display);

font-size:.62rem;

font-weight:800;

letter-spacing:.08em;

text-transform:uppercase;

}



.header-whatsapp:hover{

background:var(--cyan);

}



/* =========================================================
MENU MOBILE
========================================================= */


.menu-toggle{

display:none;

width:44px;
height:44px;

border:0;

background:none;

cursor:pointer;

}


.menu-toggle span{

display:block;

width:22px;
height:2px;

margin:5px auto;

background:var(--blue-dark);

}



/* =========================================================
BOTÕES
========================================================= */


.button{

min-height:52px;

display:inline-flex;

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

padding:0 26px;

border-radius:999px;

font-family:var(--font-display);

font-size:.65rem;

font-weight:800;

letter-spacing:.1em;

text-transform:uppercase;

transition:.25s;

}



.button:hover{

transform:translateY(-3px);

}



.button-primary{

background:var(--cyan);

color:white;

box-shadow:
0 12px 30px rgba(18,184,196,.25);

}



.button-ghost{

border:1px solid rgba(255,255,255,.65);

color:white;

}



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


.hero{

position:relative;

min-height:100svh;

display:flex;

align-items:center;

overflow:hidden;

isolation:isolate;

background:var(--blue-dark);

color:white;

}



.hero-media{

position:absolute;

inset:0;

z-index:-3;

}



.hero-media img{

width:100%;
height:100%;

object-fit:cover;

}



.hero-overlay{

position:absolute;

inset:0;

z-index:-2;

background:

linear-gradient(
90deg,
rgba(3,43,82,.92),
rgba(3,43,82,.55),
rgba(3,43,82,.15)
);

}



.hero-content{

padding-top:70px;

}



.hero-label{

display:flex;

align-items:center;

gap:10px;

font-family:var(--font-display);

font-size:.65rem;

font-weight:800;

letter-spacing:.18em;

}



.hero-label span{

width:30px;
height:2px;

background:var(--cyan);

}



.hero h1{

max-width:900px;

margin-top:20px;

font-size:
clamp(3.5rem,8vw,7.6rem);

line-height:.9;

font-weight:600;

}



.hero-text{

max-width:560px;

margin-top:30px;

color:rgba(255,255,255,.8);

line-height:1.8;

}



.hero-actions{

display:flex;

gap:12px;

margin-top:34px;

}/* =========================================================
PROJETOS
========================================================= */


.projects{

background:var(--off-white);

}



.section-heading{

display:grid;

grid-template-columns:1fr 330px;

gap:60px;

align-items:end;

margin-bottom:55px;

}



.projects-grid{

display:grid;

grid-template-columns:
repeat(2,minmax(0,1fr));

gap:28px;

}



.project-card{

overflow:hidden;

}



.project-image{

height:320px;

background:#e9f1f5;

border-radius:18px;

overflow:hidden;

}



.project-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s ease;

}



.project-card:hover img{

transform:scale(1.06);

}



.projects-button{

display:flex;

justify-content:center;

margin-top:55px;

}



/* =========================================================
SOBRE
========================================================= */


.about{

background:white;

}



.about-grid{

display:grid;

grid-template-columns:

minmax(0,.95fr)
minmax(0,1.05fr);

gap:90px;

align-items:center;

}



.about-image{

height:620px;

box-shadow:var(--shadow);

}



.about-image img{

width:100%;

height:100%;

object-fit:cover;

}



.about-content h2{

max-width:680px;

margin-top:16px;

}



.about-content p{

max-width:620px;

margin-top:24px;

color:var(--muted);

font-size:.95rem;

line-height:1.9;

}



.text-link{

display:inline-flex;

gap:16px;

margin-top:32px;

color:var(--blue);

font-family:var(--font-display);

font-size:.67rem;

font-weight:800;

letter-spacing:.1em;

text-transform:uppercase;

}



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


.contact-cta{

position:relative;

min-height:560px;

display:flex;

align-items:center;

overflow:hidden;

background:

radial-gradient(
circle at 85% 20%,
rgba(18,184,196,.5),
transparent 28%
),

linear-gradient(
135deg,
var(--blue-deep),
var(--blue)
);

color:white;

}



.cta-content{

position:relative;

z-index:2;

}



.cta-content h2{

max-width:900px;

margin-top:16px;

font-size:

clamp(3rem,7vw,6.8rem);

}



.cta-content p:not(.eyebrow){

max-width:600px;

margin-top:24px;

color:rgba(255,255,255,.75);

line-height:1.8;

}



.cta-content .button{

margin-top:32px;

}



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


.site-footer{

background:#032746;

color:white;

}



.footer-main{

display:grid;

grid-template-columns:

2fr 1fr 1fr;

gap:60px;

padding:70px 0;

}



.footer-brand img{

width:185px;

height:72px;

object-fit:contain;

}



.footer-brand p{

margin-top:18px;

color:rgba(255,255,255,.55);

font-size:.8rem;

}



.footer-column{

display:flex;

flex-direction:column;

gap:12px;

}



.footer-column span{

color:var(--cyan);

font-family:var(--font-display);

font-size:.6rem;

font-weight:800;

letter-spacing:.16em;

}



.footer-column a{

color:rgba(255,255,255,.68);

font-size:.8rem;

}



.footer-bottom{

display:flex;

justify-content:space-between;

gap:20px;

padding:20px 0;

border-top:

1px solid rgba(255,255,255,.1);

color:rgba(255,255,255,.4);

font-size:.64rem;

}



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


.whatsapp-float{

position:fixed;

right:28px;

bottom:28px;

z-index:999;

display:flex;

align-items:center;

justify-content:center;

min-width:125px;

height:48px;

padding:0 22px;

border-radius:999px;

background:#25d366;

color:white;

font-family:var(--font-display);

font-size:.65rem;

font-weight:800;

letter-spacing:.1em;

text-transform:uppercase;

}



/* =========================================================
TABLET
========================================================= */


@media(max-width:1000px){


.section{

padding:90px 0;

}


.section-heading{

grid-template-columns:1fr;

gap:20px;

}


.about-grid{

grid-template-columns:1fr;

gap:50px;

}


.about-image{

height:520px;

}


}



/* =========================================================
   MOBILE FINAL - MAZALLI PISCINAS
========================================================= */

@media(max-width:760px){


.container{

width:calc(100% - 32px);

}


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


.header-inner{

min-height:72px;

}


.brand{

width:120px;

}


.brand img{

height:50px;

}


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


.hero{

min-height:720px;
height:auto;

align-items:flex-start;

}



.hero-media img{

object-position:center;

}



.hero-overlay{

background:

linear-gradient(
180deg,
rgba(3,43,82,.85),
rgba(3,43,82,.65)
),

linear-gradient(
0deg,
rgba(3,43,82,.8),
transparent
);

}



.hero-content{

padding-top:150px;
padding-bottom:70px;

}



.hero-label{

font-size:.58rem;

}



.hero h1{

font-size:2.8rem !important;

line-height:.95;

max-width:320px;

margin-top:18px;

}



.hero-text{

font-size:.9rem;

line-height:1.7;

max-width:330px;

margin-top:22px;

}



.hero-actions{

flex-direction:column;

gap:14px;

max-width:280px;

margin-top:28px;

}



.button{

width:100%;

}



/* ================= PROJETOS ================= */


.projects{

padding:80px 0;

}



.section-heading{

margin-bottom:35px;

}



h2{

font-size:2.3rem;

}



.projects-grid{

grid-template-columns:1fr;

gap:18px;

}



.project-image{

height:260px;

border-radius:14px;

}



/* ================= SOBRE ================= */


.about{

padding:80px 0;

}


.about-image{

height:350px;

}


.about-content h2{

font-size:2.3rem;

}



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


.contact-cta{

min-height:450px;

}


.cta-content h2{

font-size:2.8rem;

}



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


.whatsapp-float{

right:15px;

bottom:15px;

min-width:100px;

height:42px;

}


}
/* =========================================================
   AJUSTE HERO MOBILE FINAL
========================================================= */

@media(max-width:760px){


.hero{

min-height:100svh;

display:flex;

align-items:flex-start;

}



.hero-content{

padding-top:150px;

padding-bottom:80px;

}



.hero-label{

margin-bottom:15px;

}



.hero h1{

font-size:3rem !important;

line-height:.95;

max-width:340px;

}



.hero-text{

margin-top:22px;

max-width:320px;

font-size:.9rem;

line-height:1.7;

}



.hero-actions{

margin-top:30px;

gap:14px;

}



.hero-media img{

object-position:center center;

}



/* deixa a imagem mais escura no celular */

.hero-overlay{

background:

linear-gradient(
180deg,
rgba(3,43,82,.85),
rgba(3,43,82,.55),
rgba(3,43,82,.85)
);

}


}
.scroll-hint{
display:none;
}

@media(max-width:760px){

.scroll-hint{
display:none;
}

}
/* =========================================================
   NAVBAR MOBILE CORREÇÃO
========================================================= */

@media(max-width:760px){


.header-inner{

min-height:72px;

}


.main-nav{

position:fixed;

top:72px;

right:0;

left:0;

width:100%;

height:calc(100svh - 72px);

background:white;

padding:40px 25px;

display:flex;

flex-direction:column;

align-items:flex-start;

gap:28px;

transform:translateX(100%);

transition:.35s ease;

z-index:999;


}



.main-nav.open{

transform:translateX(0);

}



.main-nav a{

font-size:.8rem;

color:var(--blue-dark);

}



.header-whatsapp{

display:none;

}



.menu-toggle{

display:block;

margin-left:auto;

z-index:1001;

}



}