/* ====================================================
FONTS — Barlow Condensed (do folheto)
==================================================== */
@font-face {
font-family: 'Barlow Condensed';
src: url('../fonts/BarlowCondensed-Thin.ttf') format('truetype');
font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../fonts/BarlowCondensed-Light.ttf') format('truetype');
font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../fonts/BarlowCondensed-Regular.ttf') format('truetype');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../fonts/BarlowCondensed-Medium.ttf') format('truetype');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../fonts/BarlowCondensed-SemiBold.ttf') format('truetype');
font-weight: 600; font-style: normal; font-display: swap;
}
/* Montserrat carregada via no para evitar render-block */
/* ====================================================
TOKENS
==================================================== */
:root {
--navy: #1B2A4E;
--navy-deep: #131F3A;
--navy-darker: #0F1830;
--gold: #A8956A;
--gold-dark: #8C7B57;
--teal: #2C5F66;
--cream: #EFE9D9;
--cream-dark: #DFD7C0;
--white: #FFFFFF;
--w90: rgba(255,255,255,.90);
--w80: rgba(255,255,255,.80);
--w65: rgba(255,255,255,.65);
--w45: rgba(255,255,255,.45);
--w20: rgba(255,255,255,.20);
--w12: rgba(255,255,255,.12);
--n70: rgba(27,42,78,.70);
--n50: rgba(27,42,78,.50);
--n12: rgba(27,42,78,.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
font-weight: 400;
color: var(--white);
background: var(--navy-deep);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Acessibilidade — texto visível apenas para leitores de tela / indexadores */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ====================================================
HERO
==================================================== */
.hero {
position: relative;
min-height: 100vh;
background:
linear-gradient(90deg,
rgba(19, 31, 58, 0.50) 0%,
rgba(19, 31, 58, 0.20) 45%,
rgba(19, 31, 58, 0.05) 100%
),
url('../img/fachada.jpg');
background-size: cover;
background-position: 0% center;
background-repeat: no-repeat;
display: grid;
grid-template-columns: 440px 1fr;
gap: 56px;
align-items: center;
padding: 70px 80px;
}
.hero::before, .hero::after {
content: "";
position: absolute;
width: 38px; height: 38px;
border: 1px solid var(--w20);
pointer-events: none;
}
.hero::before { top: 32px; left: 32px; border-right:0; border-bottom:0; }
.hero::after { bottom: 32px; right: 32px; border-left:0; border-top:0; }
/* ====================================================
LEFT — FORM CARD
==================================================== */
.card {
background: rgba(19, 31, 58, 0.86);
border: 1px solid var(--w12);
padding: 36px 44px 40px;
max-width: 440px;
width: 100%;
margin: 0;
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
animation: fadeUp 0.9s cubic-bezier(.2,.7,.2,1) both;
position: relative;
}
.card::before {
content:"";
position:absolute; top:0; left:0;
width: 56px; height: 2px;
background: var(--gold);
}
.card__logo {
display: block;
width: 360px;
max-width: 100%;
height: auto;
margin: 0 auto 18px;
filter: brightness(0) invert(1);
opacity: .96;
}
.card__heading {
font-weight: 300;
font-size: 1.1rem;
line-height: 1.45;
margin-bottom: 34px;
color: var(--white);
letter-spacing: .2px;
}
.card__heading strong { font-weight: 600; }
.field { margin-bottom: 22px; position: relative; }
.field label {
display:block;
font-size: .72rem;
letter-spacing: 1.8px;
font-weight: 400;
color: var(--w65);
margin-bottom: 6px;
text-transform: uppercase;
}
.field input {
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid var(--w45);
padding: 12px 0 14px;
color: var(--white);
font: inherit;
font-size: 1rem;
outline: none;
transition: border-color .25s;
}
.field input::placeholder { color: rgba(255,255,255,.30); font-weight: 300; }
.field input:focus { border-bottom-color: var(--gold); }
.checkbox {
display:flex; align-items:flex-start; gap: 10px;
margin: 24px 0 22px; cursor: pointer;
}
.checkbox input {
margin-top: 1px; width: 20px; height: 20px;
accent-color: var(--gold); cursor: pointer; flex-shrink: 0;
}
.checkbox label {
font-size: .78rem; line-height: 1.55; color: var(--w80);
cursor: pointer; font-weight: 300;
}
.btn {
display: block; width: 100%;
background: var(--gold); color: var(--white); border: 0;
padding: 17px 24px;
font: inherit; font-size: .8rem; font-weight: 600;
letter-spacing: 2.8px; text-transform: uppercase;
cursor: pointer;
transition: background .25s, transform .15s;
}
.btn:hover { background: var(--gold-dark); }
.btn:active { transform: translateY(1px); }
.privacy-link {
display: block; text-align: center; margin-top: 18px;
font-size: .72rem; color: var(--w65); line-height: 1.5;
font-weight: 300;
}
.privacy-link a {
color: rgba(255,255,255,.9); text-decoration: none;
border-bottom: 1px solid var(--w45); padding-bottom: 1px;
transition: color .2s, border-color .2s;
}
.privacy-link a:hover { color: var(--gold); border-bottom-color: var(--gold); }
/* Mensagem de erro LGPD inline */
.form-lgpd-error {
display: none;
margin: -14px 0 16px;
font-size: .75rem; font-weight: 400;
color: #f28b82;
line-height: 1.4;
}
.form-lgpd-error.is-visible { display: block; }
/* Mensagem de erro de rede (substitui alert()) */
.form-network-error {
display: none;
margin: 12px 0 0;
font-size: .75rem; font-weight: 400;
color: #f28b82;
line-height: 1.4;
text-align: center;
}
.form-network-error.is-visible { display: block; }
/* Estado desativado do botão durante envio */
.btn:disabled {
opacity: .7;
cursor: not-allowed;
transform: none;
}
/* hCaptcha — centraliza e adiciona espaçamento */
.h-captcha {
margin: 0 0 18px;
display: flex;
justify-content: center;
overflow: hidden;
max-width: 100%;
}
@media (max-width: 340px) {
.h-captcha {
transform: scale(.9);
transform-origin: left center;
}
}
/* ====================================================
RIGHT — ASPIRATIONAL (minimal: big logo + headline)
==================================================== */
.aspirational {
padding-right: 24px;
animation: fadeUp 1.1s cubic-bezier(.2,.7,.2,1) .25s both;
max-width: 640px;
}
.headline-block {
display: inline-block;
border-left: 4px solid var(--gold);
padding: 28px 40px 28px 32px;
background: rgba(19, 31, 58, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.headline {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(3rem, 5.6vw, 4.75rem);
font-weight: 300;
line-height: 1.0;
color: var(--white);
letter-spacing: 0;
}
/* ====================================================
SECTION GENERIC
==================================================== */
section { padding: 100px 80px; }
.container { max-width: 1240px; margin: 0 auto; }
.eyebrow {
font-family: 'Barlow Condensed', sans-serif;
font-size: .95rem;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
margin-bottom: 18px;
}
/* Eyebrow grande — título de seção (LAZER, DIFERENCIAIS, LOCALIZAÇÃO) */
.eyebrow--xl {
font-size: 1.5rem;
letter-spacing: 6px;
font-weight: 600;
opacity: 1;
margin-bottom: 20px;
}
/* ====================================================
EYEBROW VARIANTES
==================================================== */
.eyebrow--light {
color: var(--cream);
opacity: .75;
}
.eyebrow--gold {
color: var(--gold);
}
/* WCAG AA: dourado mais escuro para eyebrows sobre fundos claros (creme/cream-dark) */
.eyebrow--dark {
color: #7A6A48;
}
/* ====================================================
SECTION — O EMPREENDIMENTO (navy escuro)
==================================================== */
.sec-empreendimento {
background: var(--navy-deep);
color: var(--white);
position: relative;
overflow: hidden;
}
/* Detalhe geométrico de fundo — ondas sutis */
.emp-ornament {
position: absolute;
bottom: -60px;
right: -80px;
width: 480px;
height: 480px;
border-radius: 50%;
border: 1px solid var(--w12);
pointer-events: none;
z-index: 0;
}
.emp-ornament::before {
content: "";
position: absolute;
inset: 40px;
border-radius: 50%;
border: 1px solid var(--w12);
}
.emp-ornament::after {
content: "";
position: absolute;
inset: 80px;
border-radius: 50%;
border: 1px solid rgba(168,149,106,.18);
}
.emp-layout {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 320px 1fr;
gap: 80px;
align-items: start;
}
.emp-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2.5rem, 4vw, 3.75rem);
line-height: 1.0;
color: var(--white);
margin-top: 20px;
}
.emp-body {
padding-top: 8px;
border-top: 1px solid var(--w12);
}
.emp-body p {
font-family: 'Montserrat', sans-serif;
font-size: 1.05rem;
line-height: 1.8;
color: var(--w80);
font-weight: 300;
max-width: 660px;
margin-bottom: 24px;
}
.emp-body p:last-child { margin-bottom: 0; }
.emp-destaque {
border-left: 3px solid var(--gold);
padding-left: 24px;
margin-top: 40px !important;
}
.emp-destaque strong {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(1.35rem, 2vw, 1.65rem);
font-weight: 500;
letter-spacing: .5px;
color: var(--white) !important;
line-height: 1.35;
}
.emp-fechamento {
margin-top: 20px !important;
}
.emp-fechamento em {
font-style: normal;
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.2rem;
font-weight: 300;
color: var(--gold) !important;
letter-spacing: 1.5px;
}
/* ====================================================
SECTION — MACAÉ (creme com foto)
==================================================== */
.sec-macae {
background: var(--cream);
color: var(--navy);
padding: 0;
overflow: hidden;
}
.macae-img-wrap {
position: relative;
height: clamp(320px, 48vh, 520px);
overflow: hidden;
}
.macae-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 60%;
display: block;
}
.macae-img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(239, 233, 217, 0) 40%,
var(--cream) 100%
);
}
.sec-macae .container {
padding-left: 80px;
padding-right: 80px;
}
.macae-content {
padding-top: 60px;
padding-bottom: 100px;
display: grid;
grid-template-columns: 300px 1fr;
gap: 80px;
align-items: start;
}
.macae-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2rem, 3vw, 2.75rem);
line-height: 1.1;
color: var(--navy);
margin-top: 16px;
}
.macae-text {
border-top: 1px solid var(--n12);
padding-top: 8px;
}
.macae-text p {
font-family: 'Montserrat', sans-serif;
font-size: .97rem;
line-height: 1.85;
color: rgba(27,42,78,.80);
font-weight: 300;
max-width: 620px;
margin-bottom: 20px;
}
.macae-text p.macae-source {
margin-top: 28px;
margin-bottom: 0;
font-family: 'Barlow Condensed', sans-serif;
font-size: .78rem;
letter-spacing: 1.5px;
color: #1F4449;
font-weight: 400;
max-width: none;
line-height: 1.4;
}
.macae-text p.macae-source a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
transition: opacity .2s;
}
.macae-text p.macae-source a:hover { opacity: 1; }
/* ====================================================
SECTION — BAIRRO CAVALEIROS (navy médio)
==================================================== */
.sec-cavaleiros {
background: var(--navy);
color: var(--white);
position: relative;
overflow: hidden;
}
/* Textura diagonal sutil */
.sec-cavaleiros::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: repeating-linear-gradient(
-45deg,
rgba(255,255,255,.012) 0,
rgba(255,255,255,.012) 1px,
transparent 1px,
transparent 28px
);
pointer-events: none;
}
.cav-layout {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 340px 1fr;
gap: 80px;
align-items: start;
margin-bottom: 72px;
}
.cav-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2rem, 3.2vw, 3rem);
line-height: 1.05;
color: var(--white);
margin-top: 20px;
}
.cav-body {
border-top: 1px solid var(--w12);
padding-top: 8px;
position: relative;
z-index: 1;
}
.cav-body p {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
line-height: 1.8;
color: var(--w80);
font-weight: 300;
max-width: 620px;
margin-bottom: 20px;
}
/* Stats em linha */
.cav-stats {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--w12);
padding-top: 48px;
}
.cav-stat {
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 40px;
border-right: 1px solid var(--w12);
}
.cav-stat:last-child { border-right: none; padding-right: 0; padding-left: 40px; }
.cav-stat:nth-child(2) { padding-left: 40px; }
.cav-stat__num {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(2.25rem, 3.5vw, 3.25rem);
font-weight: 300;
color: var(--gold);
line-height: 1;
}
.cav-stat__label {
font-family: 'Montserrat', sans-serif;
font-size: .8rem;
font-weight: 400;
color: var(--w65);
letter-spacing: .5px;
line-height: 1.4;
max-width: 160px;
}
/* ====================================================
SECTION — LOCALIZAÇÃO + PROXIMIDADES (creme escuro)
==================================================== */
.sec-localizacao {
padding: 0;
background: var(--cream-dark);
color: var(--navy);
}
/* Hero da rua */
.local-hero {
position: relative;
overflow: hidden;
}
.local-hero__img-wrap {
position: relative;
height: clamp(380px, 55vh, 600px);
overflow: hidden;
}
.local-hero__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.local-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(19,31,58,.35) 0%,
rgba(19,31,58,.75) 100%
);
}
.local-hero__content {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 56px 80px 60px;
z-index: 2;
}
.local-hero__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2.6rem, 4.4vw, 4.25rem);
line-height: 1.1;
color: var(--white);
margin: 16px 0 24px;
max-width: 680px;
}
.local-hero__copy {
font-family: 'Montserrat', sans-serif;
font-size: .97rem;
line-height: 1.8;
color: rgba(255,255,255,.82);
font-weight: 300;
max-width: 600px;
}
/* Bloco proximidades */
.local-proximidades {
padding: 80px 0 100px;
}
.local-proximidades .container {
padding: 0 80px;
max-width: 1240px;
margin: 0 auto;
}
.prox-intro {
margin-bottom: 48px;
}
.prox-intro__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2.5rem, 3.8vw, 3.5rem);
line-height: 1.1;
color: var(--navy);
margin-top: 12px;
}
/* Filtros chips */
.prox-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 48px;
}
.prox-filter {
font-family: 'Barlow Condensed', sans-serif;
font-size: .82rem;
font-weight: 500;
letter-spacing: 1.8px;
text-transform: uppercase;
padding: 9px 20px;
border: 1px solid var(--n12);
background: transparent;
color: rgba(27,42,78,.60);
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
.prox-filter:hover {
background: var(--navy);
color: var(--white);
border-color: var(--navy);
}
.prox-filter.is-active {
background: var(--teal);
color: var(--white);
border-color: var(--teal);
}
.prox-filter:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
/* Grid de categorias */
.prox-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.prox-cat {
transition: opacity .25s;
}
.prox-cat.is-hidden {
display: none;
}
.prox-cat__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 1rem;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 14px;
border-bottom: 2px solid var(--teal);
}
.prox-cat__icon {
font-size: 1.05rem;
line-height: 1;
filter: grayscale(1) brightness(.4) sepia(1) hue-rotate(155deg) saturate(3);
}
.prox-list {
list-style: none;
}
.prox-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid rgba(27,42,78,.08);
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.05rem;
}
.prox-list li:last-child { border-bottom: none; }
.prox-name {
color: var(--navy);
font-weight: 400;
line-height: 1.3;
}
.prox-dist {
font-weight: 600;
color: #7A6A48;
font-size: .92rem;
white-space: nowrap;
flex-shrink: 0;
}
/* ====================================================
SECTION — PLANTAS / TIPOLOGIAS (Onda 4b)
==================================================== */
.sec-plantas {
background: var(--navy-deep);
color: var(--white);
padding: 100px 80px;
}
.plantas-intro {
max-width: 820px;
margin-bottom: 72px;
}
/* Mesmo tamanho do "Lazer nas alturas." (.lazer-espacos__title) */
.plantas-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2.25rem, 3.4vw, 3.25rem);
line-height: 1.05;
color: var(--white);
margin-top: 14px;
margin-bottom: 28px;
}
.plantas-lead {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
line-height: 1.85;
color: var(--w80);
font-weight: 300;
max-width: 720px;
}
/* Perspectivas */
.plantas-perspectivas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 96px;
}
.perspectiva-card {
position: relative;
}
.perspectiva-card__img-wrap {
overflow: hidden;
height: clamp(260px, 36vw, 440px);
display: block;
}
/* Garante que o zoom-wrap preenche a altura total do img-wrap nas perspectivas */
.perspectiva-card__img-wrap > .zoom-wrap {
height: 100%;
}
.perspectiva-card__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.perspectiva-card:hover .perspectiva-card__img {
transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
.perspectiva-card__img { transition: none !important; }
}
.perspectiva-card__label {
margin-top: 12px;
font-family: 'Barlow Condensed', sans-serif;
font-size: .72rem;
font-weight: 400;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--gold);
opacity: .70;
}
.perspectiva-card__name {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: 1.5rem;
color: var(--white);
margin-top: 6px;
}
/* Eyebrow da subseção de tipologias */
.plantas-eyebrow-sec {
margin-bottom: 52px;
padding-top: 12px;
}
.eyebrow--teal {
color: var(--teal);
}
.plantas-tipos-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(1.75rem, 2.8vw, 2.5rem);
line-height: 1.05;
color: var(--white);
margin-top: 14px;
}
/* Grid de plantas */
.planta-block-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
margin-bottom: 96px;
}
.planta-block {
background: rgba(255,255,255,.04);
border: 1px solid var(--w12);
position: relative;
transition: border-color .25s;
}
.planta-block:hover {
border-color: rgba(168,149,106,.35);
}
.planta-block:hover .planta-block__img {
transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
.planta-block__img { transition: none !important; }
}
.planta-block__info {
padding: 24px 28px 28px;
}
.planta-block__tag {
font-family: 'Barlow Condensed', sans-serif;
font-size: .72rem;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
}
.planta-block__units {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 400;
font-size: 1.2rem;
color: var(--white);
margin-bottom: 6px;
}
.planta-block__area {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2rem, 3vw, 2.75rem);
line-height: 1;
color: var(--gold);
margin-bottom: 12px;
}
.planta-block__area span {
font-size: .65em;
opacity: .85;
}
.planta-block__desc {
font-family: 'Montserrat', sans-serif;
font-size: .82rem;
line-height: 1.6;
color: var(--w65);
font-weight: 300;
margin-bottom: 18px;
}
.planta-block__also {
padding-top: 16px;
border-top: 1px solid var(--w12);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
font-family: 'Barlow Condensed', sans-serif;
font-size: .85rem;
}
.planta-block__also-label {
color: var(--w45);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: .72rem;
width: 100%;
margin-bottom: 2px;
}
.planta-block__also-unit {
color: var(--w80);
font-weight: 400;
}
.planta-block__also-area {
color: var(--gold);
font-weight: 500;
}
.planta-block__also-note {
color: var(--w45);
font-size: .78rem;
}
/* ====================================================
BLOCO COBERTURA DUPLEX 601 (Onda 4b — Task 4.5)
==================================================== */
.cobertura-block {
background: linear-gradient(135deg, var(--teal) 0%, var(--navy-deep) 60%);
margin-left: -80px;
margin-right: -80px;
padding: 80px 80px 96px;
position: relative;
overflow: hidden;
}
/* Ornamento de fundo */
.cobertura-block::before {
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 440px;
height: 440px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.08);
pointer-events: none;
}
.cobertura-block::after {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 300px;
height: 300px;
border-radius: 50%;
border: 1px solid rgba(168,149,106,.15);
pointer-events: none;
}
.cobertura-block__header {
position: relative;
z-index: 1;
margin-bottom: 56px;
max-width: 700px;
}
.cobertura-block__header .eyebrow--light {
color: rgba(255,255,255,.60);
opacity: 1;
}
.cobertura-block__headline {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2.5rem, 4.5vw, 4.25rem);
line-height: 1.0;
color: var(--white);
margin-top: 14px;
margin-bottom: 16px;
}
.cobertura-block__lead {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: 1.25rem;
letter-spacing: 1px;
color: rgba(255,255,255,.65);
}
/* Galeria da cobertura */
.cobertura-galeria {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 16px;
margin-bottom: 64px;
position: relative;
z-index: 1;
}
.cobertura-galeria__main {
position: relative;
overflow: hidden;
height: clamp(320px, 40vh, 520px);
}
.cobertura-galeria__side {
display: grid;
grid-template-rows: 1fr;
gap: 16px;
}
.cobertura-galeria__side-item {
position: relative;
overflow: hidden;
}
.cobertura-galeria__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.cobertura-galeria__main:hover .cobertura-galeria__img,
.cobertura-galeria__side-item:hover .cobertura-galeria__img {
transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
.cobertura-galeria__img { transition: none !important; }
}
/* Legenda vertical na borda direita — mesmo padrão das fotos do Lazer */
.cobertura-galeria__label {
position: absolute;
right: 7px;
top: 50%;
transform: translateY(-50%) rotate(180deg);
writing-mode: vertical-rl;
white-space: nowrap;
z-index: 2;
pointer-events: none;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 400;
font-size: .56rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,.7);
text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
/* Dados e plantas da cobertura — layout vertical sem buraco navy */
.cobertura-dados {
display: flex;
flex-direction: column;
gap: 48px;
position: relative;
z-index: 1;
}
.cobertura-plantas-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.cobertura-planta-item {
position: relative;
}
.cobertura-planta-img {
width: 100%;
height: clamp(200px, 26vw, 320px);
display: block;
background: rgba(255,255,255,.06);
object-fit: contain;
object-position: center;
}
.cobertura-planta-label {
display: block;
margin-top: 10px;
font-family: 'Barlow Condensed', sans-serif;
font-size: .72rem;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,.45);
text-align: center;
}
/* Specs da cobertura — faixa horizontal abaixo das plantas */
.cobertura-dados__specs {
padding-top: 40px;
border-top: 1px solid rgba(255,255,255,.15);
display: grid;
grid-template-columns: auto 1fr;
gap: 48px;
align-items: start;
}
/* No grid horizontal: tag+área+breakdown à esquerda, lista à direita */
.cobertura-dados__specs .cobertura-diferenciais {
margin-top: 0;
align-self: start;
}
.cobertura-tag {
font-family: 'Barlow Condensed', sans-serif;
font-size: .78rem;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.cobertura-area-total {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(3.5rem, 5.5vw, 5.5rem);
line-height: 1;
color: var(--white);
margin-bottom: 4px;
}
.cobertura-area-unit {
font-size: .4em;
opacity: .80;
font-weight: 300;
}
.cobertura-area-breakdown {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 32px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(255,255,255,.15);
}
.cobertura-area-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.cobertura-area-item__val {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 400;
font-size: 1.1rem;
color: var(--gold);
letter-spacing: .5px;
}
.cobertura-area-item__label {
font-family: 'Montserrat', sans-serif;
font-size: .75rem;
font-weight: 300;
color: rgba(255,255,255,.55);
letter-spacing: .3px;
}
.cobertura-diferenciais {
list-style: none;
display: flex;
flex-direction: column;
gap: 0;
}
.cobertura-diferenciais li {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 400;
font-size: 1.05rem;
color: rgba(255,255,255,.82);
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,.10);
padding-left: 18px;
position: relative;
}
.cobertura-diferenciais li:last-child {
border-bottom: none;
}
.cobertura-diferenciais li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: var(--gold);
border-radius: 50%;
}
/* ====================================================
SECTION — DIFERENCIAIS (Onda 4b — 3 eixos)
==================================================== */
.sec-diferenciais {
background: var(--cream);
color: var(--navy);
position: relative;
overflow: hidden;
}
/* Detalhe geométrico de fundo */
.sec-diferenciais::before {
content: "";
position: absolute;
bottom: -120px;
left: -80px;
width: 480px;
height: 480px;
border-radius: 50%;
border: 1px solid rgba(27,42,78,.06);
pointer-events: none;
}
.dif-header {
margin-bottom: 72px;
max-width: 640px;
}
.dif-headline {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(3rem, 4.8vw, 4.75rem);
line-height: 1.0;
color: var(--navy);
margin-top: 18px;
}
/* 3 eixos */
.dif-eixos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-bottom: 96px;
border-top: 2px solid var(--navy);
}
.dif-eixo {
padding: 48px 40px 52px;
border-right: 1px solid var(--n12);
position: relative;
}
.dif-eixo:first-child {
padding-left: 0;
}
.dif-eixo:last-child {
border-right: none;
}
/* Marcador dourado de posição no topo de cada eixo */
.dif-eixo::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 40px;
height: 2px;
background: var(--gold);
}
.dif-eixo__icon {
color: var(--teal);
margin-bottom: 28px;
display: block;
}
.dif-eixo__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 1.35rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 28px;
}
.dif-eixo__list {
list-style: none;
}
.dif-eixo__list li {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: .9rem;
line-height: 1.65;
color: rgba(27,42,78,.80);
padding: 12px 0;
border-bottom: 1px solid rgba(27,42,78,.08);
padding-left: 20px;
position: relative;
}
.dif-eixo__list li:last-child {
border-bottom: none;
}
.dif-eixo__list li::before {
content: "";
position: absolute;
left: 0;
top: 20px;
width: 7px;
height: 7px;
background: var(--gold);
border-radius: 50%;
}
.dif-familia {
margin-top: 100px;
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 0;
align-items: stretch;
min-height: 420px;
box-shadow: 0 16px 48px rgba(0,0,0,.08);
}
.dif-familia__img {
background: url('../img/familia.jpg') center/cover no-repeat;
position: relative;
}
.dif-familia__img::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(168, 149, 106, 0.10), rgba(27, 42, 78, 0.20));
}
.dif-familia__text {
background: var(--gold);
color: var(--white);
padding: 48px 56px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(1.75rem, 2.6vw, 2.4rem);
line-height: 1.15;
position: relative;
}
.dif-familia__eyebrow {
display: block;
font-size: .7rem;
letter-spacing: 3px;
font-weight: 500;
color: rgba(255,255,255,.7);
margin-bottom: 4px;
text-transform: uppercase;
}
.dif-familia__divider {
width: 56px;
height: 2px;
background: var(--white);
opacity: .6;
margin-top: 8px;
}
/* ====================================================
SECTION — ARQUITETURA (Onda 4a)
==================================================== */
.sec-arquitetura {
background: var(--navy-deep);
color: var(--white);
padding: 100px 0 0;
overflow: hidden;
}
.sec-arquitetura .container {
max-width: none;
padding: 0;
}
.arq-header {
padding: 0 80px;
margin-bottom: 64px;
}
.arq-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2.25rem, 3.6vw, 3.5rem);
line-height: 1.05;
color: var(--white);
margin-top: 18px;
max-width: 620px;
}
/* Díptuco dia / noite */
.arq-diptych {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.arq-diptych__item {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.arq-diptych__item--dark .arq-diptych__copy {
background: var(--navy-darker);
}
.arq-diptych__img-wrap {
position: relative;
height: clamp(340px, 50vh, 560px);
overflow: hidden;
}
.arq-diptych__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.arq-diptych__item:hover .arq-diptych__img {
transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
.arq-diptych__img { transition: none !important; }
}
.arq-diptych__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(19, 31, 58, 0.10) 0%,
rgba(19, 31, 58, 0.55) 100%
);
pointer-events: none;
}
.arq-diptych__badge {
position: absolute;
top: 24px;
left: 24px;
font-family: 'Barlow Condensed', sans-serif;
font-size: .72rem;
font-weight: 500;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--gold);
background: rgba(19, 31, 58, 0.72);
padding: 6px 14px;
border: 1px solid rgba(168, 149, 106, .35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.arq-diptych__copy {
background: var(--navy);
padding: 36px 48px 40px;
position: relative;
flex: 1 1 auto;
}
.arq-diptych__copy::before {
content: "";
position: absolute;
top: 0; left: 48px;
width: 48px;
height: 2px;
background: var(--gold);
opacity: .7;
}
.arq-diptych__headline {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(1.5rem, 2.2vw, 2rem);
line-height: 1.1;
color: var(--white);
margin-bottom: 16px;
}
.arq-diptych__copy p {
font-family: 'Montserrat', sans-serif;
font-size: .93rem;
line-height: 1.8;
color: var(--w80);
font-weight: 300;
max-width: 480px;
margin-bottom: 20px;
}
.arq-diptych__caption {
font-family: 'Barlow Condensed', sans-serif;
font-size: .72rem;
font-weight: 400;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--teal);
opacity: .75;
}
/* Bloco Lobby */
.arq-lobby {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 0;
min-height: 480px;
}
.arq-lobby__img-wrap {
position: relative;
overflow: hidden;
}
.arq-lobby__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
min-height: 400px;
}
.arq-lobby__img-caption {
position: absolute;
bottom: 16px;
left: 24px;
font-family: 'Barlow Condensed', sans-serif;
font-size: .72rem;
font-weight: 400;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255,255,255,.65);
}
.arq-lobby__text {
background: var(--cream);
color: var(--navy);
padding: 64px 64px 64px 72px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.arq-lobby__text::before {
content: "";
position: absolute;
top: 64px; left: 72px;
width: 48px;
height: 2px;
background: var(--gold);
}
.arq-lobby__text .eyebrow {
color: var(--teal);
margin-bottom: 28px;
margin-top: 12px;
}
.arq-lobby__headline {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(1.75rem, 2.5vw, 2.5rem);
line-height: 1.05;
color: var(--navy);
margin-bottom: 24px;
}
.arq-lobby__text p {
font-family: 'Montserrat', sans-serif;
font-size: .95rem;
line-height: 1.85;
color: rgba(27, 42, 78, .78);
font-weight: 300;
}
/* ====================================================
SECTION — LAZER NAS ALTURAS (Onda 4a)
==================================================== */
.sec-lazer {
background: var(--navy);
color: var(--white);
padding: 100px 80px 0;
}
.lazer-intro {
max-width: 760px;
margin-bottom: 60px;
}
.lazer-intro .eyebrow--light {
color: var(--cream);
opacity: .70;
}
.lazer-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(3rem, 5vw, 4.5rem);
font-weight: 300;
line-height: 1;
color: var(--white);
margin-bottom: 28px;
letter-spacing: 0;
}
.lazer-title strong {
font-weight: 600;
margin-right: 12px;
color: var(--gold);
}
.lazer-lead {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
line-height: 1.85;
color: var(--w80);
font-weight: 300;
max-width: 680px;
}
/* Hero da imagem principal */
.lazer-hero-img-wrap {
position: relative;
width: calc(100% + 160px);
height: clamp(400px, 60vh, 640px);
overflow: hidden;
margin-left: -80px;
}
.lazer-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.lazer-hero-img__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(27, 42, 78, .15) 0%,
rgba(27, 42, 78, .50) 100%
);
pointer-events: none;
}
.lazer-hero-img__label {
position: absolute;
right: 7px;
top: 50%;
transform: translateY(-50%) rotate(180deg);
writing-mode: vertical-rl;
white-space: nowrap;
font-family: 'Barlow Condensed', sans-serif;
font-size: .56rem;
font-weight: 400;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,.7);
text-shadow: 0 1px 4px rgba(0,0,0,.55);
pointer-events: none;
}
/* Galeria de espaços */
.lazer-espacos {
padding-top: 80px;
padding-bottom: 80px;
border-bottom: 1px solid var(--w12);
}
.lazer-espacos__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2.25rem, 3.4vw, 3.25rem);
line-height: 1.05;
color: var(--white);
margin-top: 14px;
margin-bottom: 48px;
}
.lazer-espacos-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
/* Cards de espaços — versão imagem real (Onda 4a) */
.espaco-card {
position: relative;
}
.espaco-card__img-wrap {
position: relative;
width: 100%;
overflow: hidden;
height: 320px;
}
.espaco-card__img-el {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.espaco-card:hover .espaco-card__img-el {
transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
.espaco-card__img-el { transition: none !important; }
}
.espaco-card__label {
position: absolute;
right: 7px;
top: 50%;
transform: translateY(-50%) rotate(180deg);
writing-mode: vertical-rl;
white-space: nowrap;
z-index: 2;
pointer-events: none;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 400;
font-size: .56rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,.7);
text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.espaco-card__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: 1.75rem;
color: var(--white);
margin-top: 14px;
}
/* Masterplan — grid 2 colunas: planta (completa) + painel teal de legenda */
.lazer-masterplan {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-left: -80px;
margin-right: -80px;
align-items: stretch;
}
.lazer-masterplan__img-wrap {
position: relative;
overflow: hidden;
background: #EFE9D9;
display: flex;
align-items: center;
justify-content: center;
}
.lazer-masterplan__img-wrap .zoom-wrap {
height: auto !important;
display: block;
width: 100%;
}
.lazer-masterplan__img {
width: 100%;
height: auto;
display: block;
}
.lazer-masterplan__list-wrap {
background: var(--teal);
color: var(--white);
padding: 64px 56px 64px 64px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.lazer-masterplan__list-wrap::before {
content: "";
position: absolute;
top: 64px; left: 64px;
width: 48px; height: 2px;
background: var(--gold);
}
.lazer-masterplan__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2.25rem, 3.2vw, 3.25rem);
line-height: 1.1;
color: var(--white);
margin-top: 28px;
margin-bottom: 32px;
}
.masterplan-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0;
}
.masterplan-list li {
display: flex;
align-items: baseline;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,.15);
font-family: 'Barlow Condensed', sans-serif;
}
.masterplan-list li:last-child {
border-bottom: none;
}
.masterplan-list__num {
font-size: .72rem;
font-weight: 500;
letter-spacing: 2px;
color: var(--gold);
opacity: .85;
flex-shrink: 0;
min-width: 26px;
}
.masterplan-list__name {
font-size: 1.05rem;
font-weight: 300;
letter-spacing: .5px;
color: var(--white);
}
/* ====================================================
SECTION — FAQ
==================================================== */
.sec-faq {
background: var(--cream);
color: var(--navy-deep);
padding: 100px 80px;
}
/* Layout de 2 colunas: título à esquerda + acordeão à direita */
.faq-layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: 80px;
align-items: start;
}
.faq-header {
position: sticky;
top: 96px; /* abaixo do nav */
}
.faq-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(2.5rem, 4.2vw, 3.75rem);
font-weight: 300;
line-height: 1.1;
color: var(--navy-deep);
margin-top: 18px;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0;
}
/* Acordeão — / */
.faq-item {
border-top: 1px solid var(--cream-dark);
}
.faq-item:last-child {
border-bottom: 1px solid var(--cream-dark);
}
/* Remove marcador padrão do em todos os navegadores */
.faq-item > summary { list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 24px 0;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: 600;
color: var(--navy-deep);
line-height: 1.4;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.faq-question:focus-visible {
outline: 2px solid var(--gold-dark);
outline-offset: 2px;
border-radius: 2px;
}
/* Chevron */
.faq-chevron {
flex-shrink: 0;
display: flex;
align-items: center;
color: var(--gold-dark);
transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.faq-chevron svg {
width: 18px;
height: 18px;
}
.faq-item[open] .faq-chevron {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.faq-chevron { transition: none !important; }
}
.faq-answer {
font-size: .94rem;
font-weight: 300;
color: var(--navy);
line-height: 1.65;
padding-bottom: 24px;
}
.faq-link {
color: var(--gold-dark);
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s;
}
.faq-link:hover { color: var(--navy-deep); }
@media (max-width: 900px) {
.sec-faq { padding: 72px 40px; }
.faq-layout { grid-template-columns: 1fr; gap: 40px; }
.faq-header { position: static; }
}
@media (max-width: 600px) {
.sec-faq { padding: 56px 24px; }
.faq-title { font-size: 2.4rem; }
.faq-layout { gap: 28px; }
}
/* ====================================================
SECTION 5 — LOCALIZAÇÃO + CTA
==================================================== */
.sec-local {
background: var(--navy-deep);
color: var(--white);
text-align: center;
}
.sec-local h2 {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2.25rem, 3.6vw, 3.25rem);
line-height: 1.1;
margin-bottom: 28px;
}
.sec-local p {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.15rem;
line-height: 1.6;
color: var(--w80);
max-width: 740px;
margin: 0 auto 44px;
font-weight: 300;
}
.sec-local p strong { color: var(--gold); font-weight: 500; }
.cta-back {
display: inline-block;
padding: 18px 44px;
background: var(--gold);
color: var(--white);
text-decoration: none;
font-size: .82rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
transition: background .25s;
}
.cta-back:hover { background: var(--gold-dark); }
/* ====================================================
FOOTER
==================================================== */
footer {
background: var(--navy-darker);
padding: 56px 80px 96px; /* bottom extra para não colidir com botão WhatsApp flutuante */
color: var(--w65);
font-size: .78rem;
line-height: 1.6;
text-align: center;
}
footer .foot-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
margin-bottom: 28px;
}
footer .foot-logos img { width: auto; opacity: .92; }
footer .foot-logos img.fl-oceana { height: 100px; filter: brightness(0) invert(1); }
footer .foot-logos img.fl-engemax { height: 54px; }
footer .foot-divider { width: 1px; height: 64px; background: var(--w20); }
footer .foot-disclaimer { max-width: 980px; margin: 0 auto; font-size: .68rem; color: var(--w45); line-height: 1.65; }
footer .foot-disclaimer p { margin-bottom: 12px; }
/* "Site desenvolvido por REP" */
.foot-dev {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--w12);
}
.foot-dev__label {
font-family: 'Barlow Condensed', sans-serif;
font-size: .65rem;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--w45);
}
.foot-dev__link {
display: inline-flex;
align-items: center;
text-decoration: none;
transition: opacity .2s;
}
.foot-dev__logo {
height: 28px;
width: auto;
opacity: .85;
display: block;
transition: opacity .2s;
}
.foot-dev__link:hover .foot-dev__logo { opacity: 1; }
.foot-dev__link:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}
/* Bloco de contato (NAP) no rodapé */
.foot-contact {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
margin-bottom: 32px;
}
.foot-contact__addr {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--gold);
text-decoration: none;
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.28rem;
font-weight: 500;
letter-spacing: .04em;
text-align: center;
transition: color .25s ease;
}
.foot-contact__addr:hover { color: var(--white); }
.foot-contact__row {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.foot-contact__phone,
.foot-contact__ig {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--white);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
letter-spacing: .02em;
transition: color .25s ease;
}
.foot-contact__phone:hover,
.foot-contact__ig:hover { color: var(--gold); }
.foot-contact__addr:focus-visible,
.foot-contact__phone:focus-visible,
.foot-contact__ig:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 3px;
}
.foot-contact__icon { flex-shrink: 0; opacity: .75; }
.foot-contact__sep { color: var(--w20); font-size: .9rem; }
/* ====================================================
BOTÃO FLUTUANTE WHATSAPP — pill desktop / ícone mobile
==================================================== */
.whatsapp-float {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 80; /* abaixo do drawer(100) e backdrop(90), acima do nav(50) */
height: 52px;
border-radius: 28px;
background: #25D366;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 20px 0 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .18s ease;
text-decoration: none;
white-space: nowrap;
}
.whatsapp-float__icon {
flex-shrink: 0;
}
.whatsapp-float__text {
font-family: 'Montserrat', system-ui, sans-serif;
font-size: .8rem;
font-weight: 600;
letter-spacing: .5px;
color: #fff;
}
.whatsapp-float:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0, 0, 0, .42);
background: #1ebe5b;
}
.whatsapp-float:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 3px;
}
/* Ocultar botão quando o drawer mobile está aberto */
.whatsapp-float.is-hidden {
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
/* Mobile/tablet: mostrar apenas o ícone (pill vira círculo) */
@media (max-width: 768px) {
.whatsapp-float {
width: 52px;
height: 52px;
border-radius: 50%;
padding: 0;
justify-content: center;
}
.whatsapp-float__text {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.whatsapp-float { transition: none !important; }
.whatsapp-float:hover { transform: none; }
}
/* ====================================================
ANIMATIONS
==================================================== */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* ====================================================
NAV — header sticky
==================================================== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 80px;
height: 72px;
background: transparent;
transition: background .35s ease, box-shadow .35s ease;
}
/* Fundo aparece ao rolar */
.nav--scrolled {
background: var(--navy-deep);
box-shadow: 0 2px 24px rgba(0,0,0,.30);
}
/* Linha dourada sutil na base quando scrolled */
.nav--scrolled::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: .35;
}
/* BRAND / LOGO */
.nav__brand {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.nav__brand img {
height: 58px;
width: auto;
filter: brightness(0) invert(1);
opacity: .92;
transition: opacity .2s;
}
.nav__brand:hover img { opacity: 1; }
.nav__brand:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
border-radius: 2px;
}
/* MENU DESKTOP */
.nav__menu {
display: flex;
align-items: center;
}
/* ul dentro do menu desktop: reset de marcadores e comportamento flex */
.nav__menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 32px;
}
.nav__menu ul li {
list-style: none;
margin: 0;
padding: 0;
}
.nav__menu a {
font-family: 'Barlow Condensed', sans-serif;
font-size: .88rem;
font-weight: 500;
letter-spacing: 2.2px;
text-transform: uppercase;
text-decoration: none;
color: var(--w90);
position: relative;
padding-bottom: 4px;
transition: color .22s;
}
/* Sublinhado dourado animado */
.nav__menu a::after {
content: "";
position: absolute;
bottom: 0; left: 0;
width: 0; height: 1px;
background: var(--gold);
transition: width .28s cubic-bezier(.4,0,.2,1);
}
.nav__menu a:hover { color: var(--white); }
.nav__menu a:hover::after,
.nav__menu a.is-active::after { width: 100%; }
.nav__menu a.is-active { color: var(--gold); }
/* Foco visível nos links do menu */
.nav__menu a:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
border-radius: 2px;
}
/* CTA — botão dourado (maior especificidade para não precisar de !important) */
.nav__menu a.nav__cta {
background: var(--gold);
color: var(--white);
padding: 10px 22px;
letter-spacing: 2px;
transition: background .22s;
}
.nav__menu a.nav__cta::after { display: none; }
.nav__menu a.nav__cta:hover { background: var(--gold-dark); color: var(--white); }
.nav__menu a.nav__cta.is-active { background: var(--gold-dark); }
/* Hambúrguer — oculto no desktop */
.nav__toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px; height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 2px;
transition: background .2s;
}
.nav__toggle:hover { background: var(--w12); }
.nav__toggle:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: 2px;
}
.nav__toggle span {
display: block;
width: 22px; height: 2px;
background: var(--white);
border-radius: 1px;
transform-origin: center;
transition:
transform .32s cubic-bezier(.4,0,.2,1),
opacity .22s ease,
width .22s ease;
}
/* Hambúrguer → X quando aberto */
.nav__toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
width: 0;
}
.nav__toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ====================================================
NAV DRAWER — MOBILE
==================================================== */
.nav__drawer {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(320px, 100vw);
z-index: 100;
transform: translateX(100%);
transition: transform .36s cubic-bezier(.4,0,.2,1);
pointer-events: none;
}
/* Aberto: desliza para dentro */
.nav__drawer:not([hidden]) {
transform: translateX(0);
pointer-events: auto;
}
/* Fechando: desliza para fora (classe aplicada pelo JS antes de setar hidden).
Especificidade propositalmente maior que :not([hidden]) para garantir override. */
.nav__drawer.is-closing,
.nav__drawer.is-closing:not([hidden]) {
transform: translateX(100%);
pointer-events: none;
}
.nav__drawer-inner {
position: absolute;
inset: 0;
background: var(--navy-deep);
border-left: 1px solid var(--w12);
padding: 24px 32px 48px;
display: flex;
flex-direction: column;
overflow-y: auto;
}
/* Linha dourada topo do drawer */
.nav__drawer-inner::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--gold), transparent);
}
/* Botão de fechar dentro do drawer */
.nav__drawer-close {
position: absolute;
top: 20px; right: 24px;
width: 36px; height: 36px;
background: none; border: none;
cursor: pointer; padding: 6px;
border-radius: 2px;
display: flex; align-items: center; justify-content: center;
}
.nav__drawer-close:hover { background: var(--w12); }
.nav__drawer-close:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.nav__drawer-close span {
position: absolute;
display: block;
width: 20px; height: 2px;
background: var(--w80);
border-radius: 1px;
}
.nav__drawer-close span:nth-child(1) { transform: rotate(45deg); }
.nav__drawer-close span:nth-child(2) { transform: rotate(-45deg); }
/* Links do drawer */
.nav__drawer nav {
margin-top: 72px;
}
/* ul dentro do drawer: reset de marcadores e layout em coluna */
.nav__drawer nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.nav__drawer nav ul li {
list-style: none;
margin: 0;
padding: 0;
}
.nav__drawer nav a {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none;
color: var(--w80);
padding: 14px 0;
border-bottom: 1px solid var(--w12);
transition: color .2s, padding-left .2s;
display: block;
}
.nav__drawer nav a:hover,
.nav__drawer nav a.is-active { color: var(--gold); padding-left: 8px; }
.nav__drawer nav a:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
border-radius: 2px;
}
/* CTA no drawer: maior especificidade, sem !important */
.nav__drawer nav a.nav__cta {
margin-top: 24px;
background: var(--gold);
color: var(--white);
text-align: center;
padding: 16px 24px;
border-bottom: none;
letter-spacing: 2.5px;
}
.nav__drawer nav a.nav__cta:hover { background: var(--gold-dark); padding-left: 0; color: var(--white); }
/* BACKDROP */
.nav__backdrop {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(15, 24, 48, .65);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
transition: opacity .32s ease;
pointer-events: none;
}
.nav__backdrop:not([hidden]) {
opacity: 1;
pointer-events: auto;
}
/* ====================================================
SCROLL-MARGIN e HERO padding-top
==================================================== */
section[id] {
scroll-margin-top: 72px;
}
/* O card do formulário tem id="form" mas não é */
#form {
scroll-margin-top: 72px;
}
/* O hero não precisa de scroll-margin pois fica no topo,
mas ganha padding-top para o conteúdo não ficar sob o nav */
.hero {
padding-top: calc(72px + 70px); /* nav height + breathing room */
}
/* ====================================================
ACESSIBILIDADE — focus-visible consistente
==================================================== */
.btn:focus-visible,
.cta-back:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.privacy-link a:focus-visible,
.macae-text p.macae-source a:focus-visible,
.foot-disclaimer a:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: 2px;
}
.field input:focus-visible {
outline: none; /* Já tem border-bottom dourado como indicador */
}
@media (forced-colors: active) {
.field input:focus-visible {
outline: 2px solid ButtonText;
}
}
.checkbox input:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* ====================================================
SCROLL-REVEAL — fade-up ao entrar na viewport
(só ativo quando motion NÃO está reduzido;
sem JS ou com prefers-reduced-motion: o conteúdo
fica VISÍVEL sem qualquer estado oculto)
==================================================== */
[data-reveal] {
/* Estado padrão: visível (fallback seguro) */
}
/* Ativa o estado inicial oculto APENAS via classe JS */
[data-reveal].will-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.65s cubic-bezier(.2,.7,.2,1),
transform 0.65s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].will-reveal.in {
opacity: 1;
transform: translateY(0);
}
/* ====================================================
REDUCED MOTION — desligar animações do nav/drawer
==================================================== */
@media (prefers-reduced-motion: reduce) {
.nav,
.nav__toggle span,
.nav__drawer,
.nav__backdrop,
.nav__menu a::after,
.nav__drawer nav a {
transition: none !important;
animation: none !important;
}
.nav__drawer:not([hidden]) { transform: translateX(0) !important; }
.nav__drawer.is-closing { transform: translateX(100%) !important; }
/* Garantia extra: remover estados de reveal se de alguma forma foram aplicados */
[data-reveal].will-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Desligar animações do hero */
.card, .aspirational { animation: none !important; }
}
/* ====================================================
LIGHTBOX — Item 5
==================================================== */
/* Wrapper de imagem zoomável */
.zoom-wrap {
position: relative;
display: block;
cursor: zoom-in;
overflow: hidden;
}
/* Botão de lupa sobre a imagem */
.zoom-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 36px;
height: 36px;
border: none;
background: rgba(19, 31, 58, 0.72);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-in;
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.zoom-wrap:hover .zoom-btn,
.zoom-wrap:focus-within .zoom-btn {
opacity: 1;
}
/* Sempre visível no mobile (touch) */
@media (hover: none) {
.zoom-btn { opacity: 1; }
}
.zoom-btn svg {
width: 18px;
height: 18px;
color: var(--gold);
}
/* Overlay escuro do lightbox */
.lb-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(10, 15, 30, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
cursor: zoom-out;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.lb-overlay[hidden] { display: none; }
/* Conteúdo do lightbox */
.lb-content {
position: relative;
width: fit-content;
height: fit-content;
max-width: min(90vw, 1200px);
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
}
.lb-img {
display: block;
max-width: 100%;
max-height: 90vh;
object-fit: contain;
box-shadow: 0 24px 80px rgba(0,0,0,.65);
}
/* Legenda vertical discreta na lateral direita da imagem */
.lb-caption {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%) rotate(180deg);
writing-mode: vertical-rl;
white-space: nowrap;
font-family: 'Barlow Condensed', sans-serif;
font-size: .6rem;
font-weight: 400;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,.5);
text-shadow: 0 1px 4px rgba(0,0,0,.6);
pointer-events: none;
}
.lb-caption:empty { display: none; }
/* Botão de fechar */
.lb-close {
position: fixed;
top: 20px;
right: 20px;
z-index: 201;
width: 44px;
height: 44px;
border: 1px solid var(--w20);
background: rgba(19, 31, 58, 0.80);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
transition: background .2s, border-color .2s;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.lb-close:hover {
background: rgba(168, 149, 106, .5);
border-color: var(--gold);
}
.lb-close:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.lb-close svg {
width: 20px;
height: 20px;
}
/* Botão fechar lightbox: evitar sobreposição com nav fixo no mobile */
@media (max-width: 1023px) {
.lb-close { top: 76px; }
}
/* Animação fade — desativada com prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
.lb-overlay:not([hidden]) {
animation: lbFadeIn .18s ease both;
}
}
@keyframes lbFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ====================================================
PLANTAS — caption abaixo (Item 6)
Legenda vertical na borda direita da imagem (mesmo padrão das
fotos do Lazer). Cai sobre o navy do card, pois a planta é
letterboxed (max-height + object-fit: contain).
==================================================== */
.planta-block__caption {
position: absolute;
right: 7px;
top: 50%;
transform: translateY(-50%) rotate(180deg);
writing-mode: vertical-rl;
white-space: nowrap;
z-index: 2;
pointer-events: none;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 400;
font-size: .56rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,.55);
text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
/* Garantir que a img-wrap não corte caption posicionado
(havia position:relative que permitia o position:absolute antigo) */
.planta-block__img-wrap {
height: auto; /* deixa a imagem definir a altura */
min-height: 200px;
position: relative; /* âncora da legenda vertical */
}
/* A imagem ocupa toda a largura sem cropping agressivo */
.planta-block__img {
width: 100%;
height: auto;
max-height: 280px;
object-fit: contain;
}
/* ====================================================
RESPONSIVE
==================================================== */
@media (max-width: 1280px) {
.nav { padding: 0 48px; }
.hero { padding: calc(72px + 60px) 48px 60px; gap: 40px; }
section { padding: 80px 48px; }
footer { padding: 48px 48px 88px; }
.local-hero__content { padding: 40px 48px 48px; }
.local-proximidades .container { padding: 0 48px; }
.prox-grid { grid-template-columns: repeat(2, 1fr); }
.sec-macae .container { padding-left: 48px; padding-right: 48px; }
.macae-content { grid-template-columns: 240px 1fr; gap: 56px; }
.emp-layout { grid-template-columns: 260px 1fr; gap: 60px; }
.cav-layout { grid-template-columns: 260px 1fr; gap: 60px; }
/* Onda 4a */
.sec-arquitetura { padding: 80px 0 0; }
.arq-header { padding: 0 48px; }
.arq-diptych__copy { padding: 28px 36px 32px; }
.arq-diptych__copy::before { left: 36px; }
.arq-lobby__text { padding: 48px 48px 48px 56px; }
.arq-lobby__text::before { left: 56px; top: 48px; }
.sec-lazer { padding: 80px 48px 0; }
.lazer-hero-img-wrap { margin-left: -48px; width: calc(100% + 96px); }
.lazer-masterplan { margin-left: -48px; margin-right: -48px; }
.lazer-masterplan__list-wrap { padding: 48px 40px 48px 48px; }
.lazer-masterplan__list-wrap::before { left: 48px; top: 48px; }
/* Onda 4b — Plantas */
.sec-plantas { padding: 80px 48px; }
.planta-block-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.planta-block__info { padding: 20px 22px 24px; }
.cobertura-block { margin-left: -48px; margin-right: -48px; padding: 64px 48px 80px; }
.cobertura-dados { gap: 40px; }
/* Onda 4b — Diferenciais */
.dif-eixo { padding: 40px 28px 44px; }
}
@media (max-width: 1023px) {
/* Nav: esconder menu desktop, mostrar hambúrguer */
.nav { padding: 0 24px; }
.nav__brand img { height: 44px; }
.nav__menu { display: none; }
.nav__toggle { display: flex; }
.hero {
grid-template-columns: 1fr;
padding: calc(72px + 36px) 24px 110px;
gap: 36px;
min-height: auto;
background-position: center;
}
.hero::before, .hero::after { width:24px; height:24px; }
.aspirational { order: 1; padding-right: 0; }
.card { order: 2; margin: 0 auto; max-width: 480px; padding: 36px 28px 28px; }
.headline { font-size: 2.6rem; }
section { padding: 64px 24px; }
.sec-diferenciais::before { display: none; }
.dif-familia { grid-template-columns: 1fr; min-height: auto; }
.dif-familia__img { min-height: 280px; }
.dif-familia__text { padding: 36px 28px; font-size: 1.5rem; }
footer { padding: 40px 24px 88px; }
footer .foot-logos img { height: 36px; }
/* Onda 3 — responsivo 1023 */
.emp-layout { grid-template-columns: 1fr; gap: 32px; }
.emp-body { padding-top: 24px; }
.sec-macae .container { padding-left: 24px; padding-right: 24px; }
.macae-content { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 64px; }
.macae-text { padding-top: 24px; }
.cav-layout { grid-template-columns: 1fr; gap: 32px; }
.cav-stats { grid-template-columns: 1fr; gap: 28px; }
.cav-stat { border-right: none; padding-right: 0; padding-left: 0 !important; border-bottom: 1px solid var(--w12); padding-bottom: 28px; }
.cav-stat:last-child { border-bottom: none; }
.local-hero__content { padding: 32px 24px 36px; }
.local-hero__title { font-size: 2.5rem; }
.local-proximidades .container { padding: 0 24px; }
.local-proximidades { padding: 56px 0 72px; }
.prox-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
/* Onda 4a — responsivo 1023 */
.sec-arquitetura { padding: 64px 0 0; }
.arq-header { padding: 0 24px; margin-bottom: 40px; }
.arq-diptych { grid-template-columns: 1fr; }
.arq-diptych__img-wrap { height: clamp(260px, 42vw, 420px); }
.arq-diptych__copy { padding: 28px 24px 32px; }
.arq-diptych__copy::before { left: 24px; }
.arq-lobby { grid-template-columns: 1fr; }
.arq-lobby__img { min-height: 300px; height: 300px; }
.arq-lobby__text { padding: 40px 24px 48px; }
.arq-lobby__text::before { left: 24px; top: 40px; }
.sec-lazer { padding: 64px 24px 0; }
.lazer-intro { margin-bottom: 40px; }
.lazer-hero-img-wrap { margin-left: -24px; width: calc(100% + 48px); height: clamp(280px, 45vw, 480px); }
.lazer-espacos { padding-top: 56px; padding-bottom: 56px; }
.lazer-espacos-grid { grid-template-columns: 1fr; gap: 28px; }
.espaco-card__img-wrap { height: 260px; }
.lazer-masterplan { grid-template-columns: 1fr; margin-left: -24px; margin-right: -24px; }
.lazer-masterplan__list-wrap { padding: 40px 24px 48px; }
.lazer-masterplan__list-wrap::before { left: 24px; top: 40px; }
/* Onda 4b — Plantas (responsivo 1023) */
.sec-plantas { padding: 64px 24px; }
.plantas-perspectivas { grid-template-columns: 1fr; gap: 20px; margin-bottom: 64px; }
.perspectiva-card__img-wrap { height: clamp(220px, 40vw, 360px); }
.planta-block-grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 64px; }
.planta-block__img-wrap { height: auto; min-height: 180px; }
.plantas-eyebrow-sec { padding-top: 8px; margin-bottom: 40px; }
.cobertura-block { margin-left: -24px; margin-right: -24px; padding: 56px 24px 72px; }
.cobertura-galeria { grid-template-columns: 1fr; gap: 12px; }
.cobertura-galeria__main { height: clamp(240px, 42vw, 400px); }
.cobertura-galeria__side { grid-template-rows: auto; grid-template-columns: 1fr; }
.cobertura-galeria__side-item { height: clamp(180px, 28vw, 280px); }
.cobertura-dados { gap: 36px; }
.cobertura-dados__specs { grid-template-columns: 1fr; gap: 28px; }
.cobertura-plantas-row { gap: 16px; }
.cobertura-planta-img { height: auto; }
/* Onda 4b — Diferenciais (responsivo 1023) */
.dif-eixos { grid-template-columns: 1fr; border-top: 2px solid var(--navy); }
.dif-eixo { padding: 36px 0 40px; border-right: none; border-bottom: 1px solid var(--n12); }
.dif-eixo:last-child { border-bottom: none; }
.dif-eixo:first-child { padding-left: 0; }
.dif-header { margin-bottom: 52px; }
}
@media (max-width: 480px) {
.nav__brand img { height: 38px; }
.hero { padding: calc(72px + 28px) 16px 100px; }
.card { padding: 28px 22px 24px; }
.card__heading { font-size: .98rem; margin-bottom: 24px; }
.headline { font-size: 2.1rem; }
.field { margin-bottom: 18px; }
.btn { padding: 16px 20px; font-size: .75rem; letter-spacing: 2.2px; }
.dif-familia__text { font-size: 1.4rem; padding: 28px 22px; }
.lazer-title { font-size: 2.5rem; }
/* Onda 3 — responsivo 480 */
.emp-title { font-size: 2rem; }
.emp-body p { font-size: .93rem; }
.emp-destaque strong { font-size: 1.2rem; }
.macae-img-wrap { height: 240px; }
.cav-stat__num { font-size: 2rem; }
.local-hero__img-wrap { height: 280px; }
.local-hero__title { font-size: 2.1rem; }
.local-hero__content { padding: 24px 16px 28px; }
.local-proximidades .container { padding: 0 16px; }
.prox-grid { grid-template-columns: 1fr; }
.prox-filters { gap: 8px; }
.prox-filter { font-size: .75rem; padding: 8px 14px; }
.macae-content { padding-top: 32px; padding-bottom: 56px; }
.local-proximidades { padding: 48px 0 64px; }
/* Onda 4a — responsivo 480 */
.sec-arquitetura { padding: 56px 0 0; }
.arq-header { padding: 0 16px; }
.arq-diptych__img-wrap { height: 240px; }
.arq-diptych__copy { padding: 22px 16px 26px; }
.arq-diptych__copy::before { left: 16px; }
.arq-diptych__copy p { font-size: .88rem; }
.arq-lobby__img { min-height: 240px; height: 240px; }
.arq-lobby__text { padding: 32px 16px 40px; }
.arq-lobby__text::before { left: 16px; top: 32px; }
.sec-lazer { padding: 56px 16px 0; }
.lazer-hero-img-wrap { margin-left: -16px; width: calc(100% + 32px); height: 240px; }
.lazer-masterplan { margin-left: -16px; margin-right: -16px; }
.lazer-masterplan__list-wrap { padding: 32px 16px 40px; }
.lazer-masterplan__list-wrap::before { left: 16px; top: 32px; }
.espaco-card__img-wrap { height: 220px; }
.lazer-espacos-grid { gap: 24px; }
/* Onda 4b — Plantas (responsivo 480) */
.sec-plantas { padding: 56px 16px; }
.plantas-perspectivas { margin-bottom: 48px; }
.perspectiva-card__img-wrap { height: 220px; }
.planta-block-grid { margin-bottom: 48px; }
.plantas-eyebrow-sec { padding-top: 4px; }
.cobertura-block { margin-left: -16px; margin-right: -16px; padding: 48px 16px 64px; }
.cobertura-galeria__main { height: 220px; }
.cobertura-galeria__side { grid-template-columns: 1fr; }
.cobertura-galeria__side-item { height: 160px; }
.cobertura-plantas-row { grid-template-columns: 1fr; gap: 12px; }
.cobertura-dados__specs { grid-template-columns: 1fr; }
.cobertura-area-total { font-size: 3.25rem; }
/* Onda 4b — Diferenciais (responsivo 480) */
.dif-headline { font-size: 2.9rem; }
.dif-eixo__icon svg { width: 32px; height: 32px; }
/* Textos abaixo de 12px — elevar para .75rem */
.arq-diptych__caption { font-size: .75rem; }
.privacy-link { font-size: .75rem; }
.planta-block__also-label { font-size: .75rem; }
}
/* ====================================================
ONDA 7 — PRODUTO (composição fachada + lobby)
==================================================== */
.arq-compo {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 0;
margin-bottom: 0;
}
.arq-compo__item {
position: relative;
overflow: hidden;
}
.arq-compo__item .zoom-wrap { height: 100%; display: block; }
.arq-compo__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
min-height: 360px;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.arq-compo__item--main .arq-compo__img { min-height: clamp(360px, 52vh, 560px); }
.arq-compo__item:hover .arq-compo__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
.arq-compo__img { transition: none !important; }
}
.arq-compo__label {
position: absolute;
bottom: 16px;
left: 24px;
font-family: 'Barlow Condensed', sans-serif;
font-size: .72rem;
font-weight: 400;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255,255,255,.65);
pointer-events: none;
z-index: 2;
}
/* Tipologia (resumo enxuto) */
.tipo-resumo {
background: var(--cream);
color: var(--navy);
padding: 64px 80px 72px;
}
.tipo-resumo__head { margin-bottom: 40px; }
.tipo-resumo__head .eyebrow { color: var(--teal); margin-bottom: 14px; }
.tipo-resumo__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(1.75rem, 2.5vw, 2.5rem);
line-height: 1.05;
color: var(--navy);
}
.tipo-resumo__grid {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--n12);
}
.tipo-resumo__grid li {
display: flex;
flex-direction: column;
gap: 10px;
padding: 32px 32px 32px 0;
margin-right: 32px;
border-right: 1px solid var(--n12);
}
.tipo-resumo__grid li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.tipo-resumo__num {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1;
color: var(--gold-dark);
}
.tipo-resumo__lbl {
font-family: 'Montserrat', sans-serif;
font-size: .82rem;
line-height: 1.45;
color: var(--n70);
font-weight: 400;
}
.tipo-resumo__cta {
display: inline-block;
margin-top: 44px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
font-size: .85rem;
color: var(--navy);
border: 1px solid var(--gold);
padding: 16px 40px;
text-decoration: none;
transition: background .3s, color .3s;
}
.tipo-resumo__cta:hover { background: var(--gold); color: var(--white); }
/* ====================================================
ONDA 7 — A ENGEMAX (Histórico do cliente)
==================================================== */
.sec-engemax {
background: #1E3A5C;
color: var(--white);
padding: 100px 80px;
}
/* Topo: logo + régua dourada (identidade do book) */
.engemax-top { margin-bottom: 48px; }
.engemax-logo {
display: block;
width: 280px;
max-width: 70%;
height: auto;
margin-bottom: 36px;
}
.engemax-rule {
display: block;
width: 100%;
height: 1px;
background: linear-gradient(90deg, var(--gold) 0%, rgba(168,149,106,.35) 100%);
}
.engemax-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(3rem, 5.6vw, 5rem);
line-height: 1.02;
color: var(--white);
margin-bottom: 40px;
}
.engemax-body { max-width: 880px; margin-bottom: 72px; }
.engemax-body p {
font-family: 'Montserrat', sans-serif;
font-size: .95rem;
line-height: 1.85;
color: var(--w80);
font-weight: 300;
margin-bottom: 18px;
}
.engemax-body p:last-child { margin-bottom: 0; }
.engemax-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--w12);
border-bottom: 1px solid var(--w12);
padding: 8px 0;
}
.engemax-stat {
display: flex;
flex-direction: column;
gap: 8px;
padding: 32px 36px 32px 0;
margin-right: 36px;
border-right: 1px solid var(--w12);
}
.engemax-stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.engemax-stat__num {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: clamp(2.2rem, 3.4vw, 3rem);
line-height: 1;
color: var(--gold);
}
.engemax-stat__label {
font-family: 'Montserrat', sans-serif;
font-size: .82rem;
line-height: 1.45;
color: var(--w65);
font-weight: 400;
}
.engemax-entregues { margin-top: 48px; }
.engemax-entregues__label {
display: block;
font-family: 'Barlow Condensed', sans-serif;
font-size: .78rem;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 20px;
}
.engemax-entregues__list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
}
.engemax-entregues__list li {
font-family: 'Montserrat', sans-serif;
font-size: .9rem;
font-weight: 400;
color: var(--w90);
border: 1px solid var(--w20);
padding: 10px 20px;
border-radius: 2px;
}
.engemax-cta {
display: inline-block;
margin-top: 56px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
font-size: .85rem;
color: var(--navy);
background: var(--gold);
padding: 17px 44px;
text-decoration: none;
transition: background .3s, color .3s, transform .3s;
}
.engemax-cta:hover { background: var(--gold-dark); color: var(--white); }
/* ====================================================
ONDA 7 — RESPONSIVO (produto + engemax)
==================================================== */
@media (max-width: 1023px) {
.arq-compo { grid-template-columns: 1fr; }
.arq-compo__item--main .arq-compo__img { min-height: clamp(300px, 42vh, 460px); }
.tipo-resumo { padding: 56px 32px 60px; }
.sec-engemax { padding: 80px 32px; }
}
@media (max-width: 768px) {
.tipo-resumo__grid,
.engemax-stats { grid-template-columns: repeat(2, 1fr); }
.tipo-resumo__grid li,
.engemax-stat {
padding: 24px 20px 24px 0;
margin-right: 20px;
}
/* zera borda direita da última de cada linha (2 colunas) */
.tipo-resumo__grid li:nth-child(2n),
.engemax-stats .engemax-stat:nth-child(2n) {
border-right: 0; margin-right: 0; padding-right: 0;
}
.tipo-resumo__grid li:nth-child(2n+1),
.engemax-stats .engemax-stat:nth-child(2n+1) {
border-right: 1px solid var(--n12);
}
.engemax-stats .engemax-stat:nth-child(2n+1) { border-right-color: var(--w12); }
}
@media (max-width: 480px) {
.tipo-resumo__cta,
.engemax-cta { display: block; text-align: center; }
}
/* ====================================================
ONDA 7b — TIPOLOGIA NO HERO + respiro do Produto
==================================================== */
/* Produto agora termina na composição (sem tipo-resumo): dar respiro */
.sec-arquitetura { padding-bottom: 0; }
.hero-tipo {
margin-top: 28px;
display: inline-block;
background: rgba(19, 31, 58, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-left: 4px solid var(--gold);
padding: 30px 44px;
animation: fadeUp 1.1s cubic-bezier(.2,.7,.2,1) .4s both;
}
.hero-tipo__lead {
font-family: 'Montserrat', sans-serif;
font-size: 1.1rem;
font-weight: 300;
letter-spacing: .3px;
color: var(--w90);
margin-bottom: 26px;
}
.hero-tipo__lead strong { color: var(--gold); font-weight: 600; }
.hero-tipo__specs {
list-style: none;
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 0;
}
.hero-tipo__specs li {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 38px;
border-bottom: 1px solid var(--w20);
}
.hero-tipo__specs li:nth-child(odd) {
padding-left: 0;
border-right: 1px solid var(--w20);
}
.hero-tipo__specs li:nth-child(n+3) { border-bottom: 0; padding-bottom: 0; }
.hero-tipo__specs li:nth-child(-n+2) { padding-top: 0; }
.hero-tipo__num {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
font-size: 2.5rem;
line-height: 1;
color: var(--white);
}
.hero-tipo__lbl {
font-family: 'Montserrat', sans-serif;
font-size: .9rem;
color: var(--w65);
font-weight: 400;
line-height: 1.35;
}
@media (max-width: 1023px) {
.hero-tipo { display: block; }
}
@media (max-width: 560px) {
.hero-tipo { padding: 24px 26px; }
.hero-tipo__specs li { padding: 16px 24px; }
.hero-tipo__num { font-size: 2.1rem; }
}
/* ====================================================
ONDA 7c — ENGEMAX no padrão do book (texto + obras)
==================================================== */
.engemax-body__close {
color: var(--gold);
font-weight: 400;
font-style: italic;
margin-top: 6px;
}
.engemax-projetos__label {
display: block;
font-family: 'Barlow Condensed', sans-serif;
font-size: .82rem;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
}
.engemax-projetos__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.proj-card {
margin: 0;
background: rgba(255,255,255,.04);
border: 1px solid var(--w12);
overflow: hidden;
display: flex;
flex-direction: column;
}
.proj-card__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
}
.proj-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.proj-card:hover .proj-card__media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
.proj-card__media img { transition: none !important; }
}
.proj-card__cap {
background: var(--gold);
color: var(--navy-deep);
padding: 14px 18px 16px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 auto;
}
.proj-card__name {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 1.05rem;
line-height: 1.1;
letter-spacing: .3px;
color: var(--navy-deep);
}
.proj-card__addr {
font-family: 'Montserrat', sans-serif;
font-size: .72rem;
line-height: 1.4;
color: rgba(19,31,58,.78);
}
.engemax-cta {
display: block;
width: -moz-fit-content;
width: fit-content;
margin: 64px auto 0;
}
/* Cola a seção Lazer no Produto (sem respiro) */
.sec-lazer { padding-top: 0; }
.lazer-intro { padding-top: 44px; }
@media (max-width: 560px) {
.hero-tipo__num { font-size: 1.95rem; }
}
@media (max-width: 1023px) {
.sec-engemax { padding: 72px 32px; }
.engemax-projetos__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.engemax-projetos__grid { grid-template-columns: 1fr; }
.engemax-logo { width: 220px; }
}
/* ============ Mapa — localização exata (antes do FAQ) ============ */
.sec-mapa { position: relative; padding: 0; }
.mapa-wrap { position: relative; width: 100%; height: 500px; overflow: hidden; background: var(--cream); }
.mapa-iframe {
position: absolute; inset: 0; width: 100%; height: 100%;
border: 0; pointer-events: none; filter: saturate(.85);
}
.mapa-pin {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); z-index: 2;
}
.mapa-pin__dot {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 60px; height: 60px; border-radius: 50%;
background: var(--navy);
border: 2px solid var(--white);
box-shadow: 0 10px 26px rgba(15, 24, 48, .38);
}
.mapa-pin__dot img { display: block; width: 26px; height: auto; }
.mapa-pin__pulse {
position: absolute; top: 50%; left: 50%;
width: 60px; height: 60px; border-radius: 50%;
background: rgba(27, 42, 78, .35);
transform: translate(-50%, -50%);
animation: mapa-pulse 2.6s ease-out infinite;
}
@keyframes mapa-pulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: .65; }
70%, 100% { transform: translate(-50%, -50%) scale(2.3); opacity: 0; }
}
.mapa-btn-wrap {
position: absolute; left: 0; right: 0; bottom: 30px;
display: flex; justify-content: center; z-index: 3;
}
.mapa-btn {
display: inline-block;
background: var(--navy); color: var(--white);
padding: 15px 34px;
font-size: .8rem; font-weight: 600;
letter-spacing: 2.8px; text-transform: uppercase;
text-decoration: none;
box-shadow: 0 8px 22px rgba(15, 24, 48, .30);
transition: background .25s, transform .15s;
}
.mapa-btn:hover { background: var(--navy-deep); }
.mapa-btn:active { transform: translateY(1px); }
@media (max-width: 720px) {
.mapa-wrap { height: 400px; }
.mapa-btn-wrap { bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.mapa-pin__pulse { animation: none; opacity: 0; }
}