/* =====================================================
   IMÓVEL CONDOMÍNIO
   GGO Marketing
===================================================== */

:root{

--cor-principal:#b08a4a;
--cor-principal-hover:#8d6d36;

--cor-verde:#1f5b49;

--cor-texto:#222222;

--cor-clara:#f8f7f4;

--cor-branca:#ffffff;

--cor-borda:#e7e3db;

--sombra:0 15px 40px rgba(0,0,0,.08);

--radius:18px;

--container:1180px;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:
Inter,
Arial,
Helvetica,
sans-serif;

background:#f6f4ef;

color:var(--cor-texto);

line-height:1.7;

font-size:16px;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

border-radius:18px;

}

a{

text-decoration:none;

transition:.30s;

}

ul{

list-style:none;

}

.container{

width:min(var(--container),calc(100% - 40px));

margin:auto;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

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

backdrop-filter:blur(15px);

border-bottom:1px solid rgba(0,0,0,.05);

}

header .container{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 0;

}

.logo{

font-size:28px;

font-weight:800;

color:#111;

}

.logo span{

color:var(--cor-principal);

}

nav{

display:flex;

align-items:center;

gap:28px;

}

nav a{

font-size:15px;

font-weight:600;

color:#444;

}

nav a:hover{

color:var(--cor-principal);

}

.btn-whatsapp{

background:#25D366;

color:#fff;

padding:13px 24px;

border-radius:40px;

font-weight:bold;

box-shadow:0 8px 20px rgba(37,211,102,.30);

}

.btn-whatsapp:hover{

transform:translateY(-2px);

}

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

.hero{

padding:170px 0 100px;

background:

linear-gradient(

135deg,

#ffffff 0%,

#f6f4ef 100%

);

}

.hero-grid{

display:grid;

grid-template-columns:

1.1fr

0.9fr;

gap:70px;

align-items:center;

}

.hero small{

display:inline-block;

margin-bottom:20px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:var(--cor-principal);

}

.hero h1{

font-size:58px;

line-height:1.08;

font-weight:800;

margin-bottom:25px;

color:#111;

}

.hero p{

font-size:20px;

color:#666;

margin-bottom:35px;

max-width:650px;

}

.hero-botoes{

display:flex;

gap:18px;

margin-bottom:35px;

flex-wrap:wrap;

}

.btn{

background:var(--cor-principal);

color:#fff;

padding:17px 34px;

border-radius:40px;

font-size:16px;

font-weight:bold;

display:inline-flex;

align-items:center;

justify-content:center;

box-shadow:var(--sombra);

}

.btn:hover{

background:var(--cor-principal-hover);

transform:translateY(-3px);

}

.btn-outline{

padding:17px 34px;

border-radius:40px;

border:2px solid var(--cor-principal);

color:var(--cor-principal);

font-weight:bold;

}

.btn-outline:hover{

background:var(--cor-principal);

color:#fff;

}

.hero-infos{

display:flex;

gap:25px;

flex-wrap:wrap;

font-size:15px;

font-weight:600;

color:#444;

margin-top:15px;

}

.hero-imagem img{

border-radius:28px;

box-shadow:0 30px 70px rgba(0,0,0,.12);

transition:.50s;

}

.hero-imagem img:hover{

transform:scale(1.02);

}

/* =====================================================
COMO FUNCIONA
===================================================== */

.como-funciona{

padding:110px 0;

background:#fff;

}

.titulo{

text-align:center;

max-width:850px;

margin:0 auto 70px;

}

.titulo small{

display:inline-block;

text-transform:uppercase;

letter-spacing:2px;

font-weight:700;

color:var(--cor-principal);

margin-bottom:15px;

}

.titulo h2{

font-size:44px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;

color:#111;

}

.titulo p{

font-size:18px;

color:#666;

}

.cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.card{

background:#fff;

padding:40px;

border-radius:22px;

border:1px solid var(--cor-borda);

box-shadow:0 15px 35px rgba(0,0,0,.05);

transition:.35s;

position:relative;

overflow:hidden;

}

.card:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.card span{

display:flex;

align-items:center;

justify-content:center;

width:55px;

height:55px;

border-radius:50%;

background:var(--cor-principal);

color:#fff;

font-size:20px;

font-weight:bold;

margin-bottom:25px;

}

.card h3{

font-size:24px;

margin-bottom:15px;

}

.card p{

color:#666;

font-size:16px;

}

/* =====================================================
VANTAGENS
===================================================== */

.vantagens{

padding:120px 0;

background:#f8f7f4;

}

.cards-vantagens{

display:grid;

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

gap:35px;

margin-top:60px;

}

.vantagem{

background:#fff;

padding:45px;

border-radius:22px;

box-shadow:0 15px 35px rgba(0,0,0,.05);

transition:.35s;

border:1px solid #ece7de;

}

.vantagem:hover{

transform:translateY(-8px);

box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.icone{

width:75px;

height:75px;

border-radius:50%;

background:linear-gradient(135deg,var(--cor-principal),#d8b36a);

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

margin-bottom:25px;

}

.vantagem h3{

font-size:26px;

margin-bottom:15px;

color:#111;

}

.vantagem p{

font-size:17px;

color:#666;

}

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

.sobre{

padding:120px 0;

background:#fff;

}

.sobre-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

}

.sobre small{

display:inline-block;

margin-bottom:15px;

font-weight:bold;

text-transform:uppercase;

letter-spacing:2px;

color:var(--cor-principal);

}

.sobre h2{

font-size:46px;

line-height:1.2;

margin-bottom:25px;

}

.sobre p{

font-size:18px;

color:#666;

margin-bottom:20px;

}

.sobre-box{

background:#1f2c38;

color:#fff;

padding:45px;

border-radius:25px;

box-shadow:0 25px 60px rgba(0,0,0,.20);

}

.sobre-box h3{

font-size:28px;

margin-bottom:30px;

}

.sobre-box ul li{

padding:12px 0;

border-bottom:1px solid rgba(255,255,255,.10);

font-size:17px;

}

.sobre-box ul li:last-child{

border:none;

}

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

.cta{

padding:120px 0;

background:linear-gradient(135deg,#222,#111);

text-align:center;

color:#fff;

}

.cta h2{

font-size:52px;

margin-bottom:20px;

}

.cta p{

font-size:20px;

opacity:.85;

max-width:700px;

margin:0 auto 40px;

}

/* =====================================================
FORMULÁRIO
===================================================== */

.formulario{

padding:120px 0;

background:#f7f5f0;

}

.form-imovel{

background:#fff;

padding:50px;

border-radius:25px;

box-shadow:0 25px 70px rgba(0,0,0,.08);

margin-top:50px;

}

.grid-2{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}

.form-imovel input,
.form-imovel textarea{

width:100%;

padding:18px;

border:1px solid #ddd;

border-radius:12px;

font-size:16px;

font-family:inherit;

transition:.30s;

background:#fafafa;

}

.form-imovel input:focus,
.form-imovel textarea:focus{

outline:none;

border-color:var(--cor-principal);

background:#fff;

box-shadow:0 0 0 5px rgba(176,138,74,.15);

}

.form-imovel textarea{

resize:vertical;

min-height:180px;

}

.form-imovel label{

display:block;

font-weight:600;

margin:25px 0 10px;

}

.check{

display:flex;

align-items:flex-start;

gap:12px;

margin:30px 0;

font-size:15px;

}

.check input{

width:18px;

height:18px;

margin-top:3px;

}

.form-imovel button{

cursor:pointer;

border:none;

}

/* =====================================================
CONTATO
===================================================== */

.contato{

padding:100px 0;

background:#fff;

}

.contato-grid{

display:grid;

grid-template-columns:1fr .8fr;

gap:60px;

align-items:center;

}

.contato-box{

background:#1f2c38;

color:#fff;

padding:45px;

border-radius:25px;

box-shadow:0 20px 50px rgba(0,0,0,.18);

}

.contato-box h3{

font-size:30px;

margin-bottom:30px;

}

.contato-box p{

margin-bottom:25px;

}

.contato-box a{

color:#fff;

font-weight:bold;

}

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

footer{

background:#111;

color:#ddd;

padding-top:70px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;

padding-bottom:50px;

}

.footer-grid h3{

font-size:28px;

margin-bottom:20px;

color:#fff;

}

.footer-grid h4{

margin-bottom:20px;

color:#fff;

}

.footer-grid li{

margin-bottom:12px;

}

.footer-grid a{

color:#ccc;

}

.footer-grid a:hover{

color:#fff;

}

.copyright{

border-top:1px solid rgba(255,255,255,.08);

padding:25px 0;

text-align:center;

font-size:14px;

color:#999;

}

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

.whatsapp-fixo{

position:fixed;

right:25px;

bottom:25px;

width:70px;

height:70px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:#fff;

box-shadow:0 20px 40px rgba(37,211,102,.40);

z-index:999;

transition:.30s;

}

.whatsapp-fixo:hover{

transform:scale(1.12);

}

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

@media(max-width:1100px){

.hero-grid,
.sobre-grid,
.contato-grid{

grid-template-columns:1fr;

}

.cards{

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

}

.cards-vantagens{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

header{

position:relative;

}

nav{

display:none;

}

.hero{

padding:80px 0;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

.titulo h2{

font-size:34px;

}

.cta h2{

font-size:38px;

}

.cards{

grid-template-columns:1fr;

}

.grid-2{

grid-template-columns:1fr;

}

.form-imovel{

padding:30px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.whatsapp-fixo{

width:60px;

height:60px;

font-size:28px;

right:15px;

bottom:15px;

}

}