:root {
  --marfim: #F5F1E7;
  --areia: #DDD2BE;
  --oliva: #41483C;
  --oliva-fundo: #343A30;
  --dourado: #A48752;
  --dourado-claro: #CDB383;
  --zap: #25D366;
  --zap-tinta: #0E2A1A;
  --serif: "Gelasio", Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --gutter: 20px;
  --section: clamp(64px, 11vw, 128px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; scrollbar-color: var(--dourado) var(--marfim); }
body { margin: 0; background: var(--marfim); color: var(--oliva); font: 400 1.0625rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
figure, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.05rem, 7.4vw, 3.5rem); }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--dourado); color: var(--marfim); }
:focus-visible { outline: 3px solid var(--dourado); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto; }

/* Botão WhatsApp: a única cor viva da página */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 24px; width: 100%;
  background: var(--zap); color: var(--zap-tinta);
  font: 700 1.0625rem/1.2 var(--sans); text-decoration: none; text-align: center;
  border-radius: 12px; box-shadow: 0 8px 20px -10px rgba(14, 42, 26, .55);
  transition: transform .25s var(--ease), background-color .2s, box-shadow .25s;
}
.btn svg { width: 24px; height: 24px; flex: none; }
.btn:hover { background: #3BE07A; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(14, 42, 26, .6); }
.btn:active { transform: translateY(0); }
.btn-quiet { background: var(--oliva); color: var(--marfim); box-shadow: none; }
.btn-quiet:hover { background: #525B4C; box-shadow: none; }

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: var(--oliva-fundo); color: var(--marfim); overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero-video.on { opacity: 1; animation: respirar 9s ease-out both; }
@keyframes respirar { from { transform: scale(1.07); } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(52, 58, 48, 0) 28%, rgba(52, 58, 48, .72) 58%, rgba(40, 45, 37, .96) 100%); }
.brand-tab { position: absolute; top: 0; left: var(--gutter); z-index: 2; background: var(--oliva); padding: 18px 16px 14px; border-radius: 0 0 12px 12px; }
.brand-tab img { width: 116px; }
.hero-copy { position: relative; z-index: 1; padding-block: 120px 28px; }
.hero h1 { font-size: clamp(2.5rem, 10.6vw, 4.75rem); line-height: 1.04; max-width: 15em; }
.hero p { margin-top: 14px; max-width: 34em; font-size: 1.125rem; }
.hero-ctas { display: grid; gap: 10px; width: 100%; margin-top: 22px; }
.hero-ctas .btn, .hero-ig { width: 100%; min-width: 0; min-height: 56px; justify-content: flex-start; padding: 14px 0 14px calc(50% - 104px); }
.hero-ig { display: flex; align-items: center; gap: 10px; background: var(--marfim); color: var(--oliva); font: 700 1.0625rem/1.2 var(--sans); text-decoration: none; border-radius: 12px; transition: transform .25s var(--ease), background-color .2s; }
.hero-ig svg { width: 24px; height: 24px; flex: none; color: #C13584; }
.hero-ig:hover { background: #fff; transform: translateY(-2px); }

/* Por que */
.why { padding-block: var(--section); }
.why-grid { display: grid; gap: 32px; }
.why-list li { padding-block: 18px; border-top: 1px solid rgba(65, 72, 60, .22); }
.why-list li:last-child { border-bottom: 1px solid rgba(65, 72, 60, .22); }
.why-list h3 { font-size: 1.5rem; }
.why-list p { margin-top: 4px; }

/* Empreendimentos */
.places { background: var(--areia); padding-block: var(--section); }
.places-head { max-width: 38em; margin-bottom: 40px; }
.places-head p { margin-top: 12px; }
.place { display: grid; gap: 22px; }
.place + .place { margin-top: 64px; }
.viewer { margin-inline: calc(-1 * var(--gutter)); }
.stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--oliva); }
.layer { position: absolute; inset: 0; }
.layer img, .layer video { width: 100%; height: 100%; object-fit: cover; }
.layer-proj { transition: clip-path .7s var(--ease); clip-path: inset(0 0 0 0); }
.viewer.is-obra .layer-proj { clip-path: inset(0 100% 0 0); }
.seal { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; background: rgba(52, 58, 48, .86); color: var(--marfim); font-size: .8125rem; line-height: 1.2; border-radius: 6px; }
.seal-corner { left: auto; right: 12px; bottom: 12px; z-index: 1; transition: opacity .6s; }
.seal-corner.off { opacity: 0; }
.seal-real { background: var(--marfim); color: var(--oliva); font-weight: 700; }
.switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 10px var(--gutter) 0; padding: 4px; background: rgba(65, 72, 60, .14); border-radius: 12px; }
.switch button { min-height: 48px; border: 0; border-radius: 9px; background: transparent; color: var(--oliva); font: 700 1rem/1 var(--sans); cursor: pointer; transition: background-color .25s, color .25s; }
.switch button:hover { background: rgba(65, 72, 60, .12); }
.switch button[aria-pressed="true"] { background: var(--oliva); color: var(--marfim); }
.place-copy h3 { font-size: clamp(1.9rem, 6.6vw, 2.75rem); }
.where { margin-top: 6px; font-size: 1rem; }
.ticks { margin-block: 16px 22px; }
.ticks li { display: flex; gap: 10px; padding-block: 5px; }
.ticks svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--oliva); }

/* Obra: vídeo fixo atrás, o texto passa por cima e troca o vídeo */
.works { position: relative; background: var(--oliva-fundo); color: var(--marfim); }
.stick { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.stick video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.stick video.on { opacity: 1; }
.stick-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 45, 37, .62), rgba(40, 45, 37, .42) 45%, rgba(40, 45, 37, .72)); }
.steps { position: relative; margin-top: -100svh; }
.step { min-height: 90svh; display: flex; flex-direction: column; justify-content: center; text-shadow: 0 2px 18px rgba(30, 34, 28, .6); }
.step:first-child, .step:last-child { min-height: 100svh; }
.step p { margin-top: 10px; font-size: 1.125rem; }
.step h3 { font-size: clamp(2.5rem, 10.6vw, 4.75rem); line-height: 1.04; }

/* Localização */
.map { padding-block: var(--section); }
.map-grid { display: grid; gap: 32px; }
.map-copy > p { margin-top: 12px; }
.addr { margin-block: 22px 26px; }
.addr div { padding-block: 14px; border-top: 1px solid rgba(65, 72, 60, .22); }
.addr dt { font: 600 1.3125rem/1.2 var(--serif); }
.addr dd { margin-top: 2px; }
.sat { position: relative; overflow: hidden; border-radius: 12px; background: var(--oliva); }
.sat img { width: 100%; }
.pin { position: absolute; transform: translate(-50%, -100%); padding: 5px 9px; background: var(--marfim); color: var(--oliva); font-size: .8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; border-radius: 6px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: var(--marfim); transform: rotate(45deg); }
.pin-bridge { left: 33%; top: 41%; }
.pin-lagos { left: 21%; top: 81%; background: var(--dourado-claro); }
.pin-lagos::after { background: var(--dourado-claro); }

/* Fechamento */
.close { position: relative; overflow: hidden; background: var(--oliva); color: var(--marfim); padding-block: var(--section) 56px; text-align: center; }
.close-video, .close-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.close-video { object-fit: cover; }
.close-shade { background: linear-gradient(180deg, rgba(40, 45, 37, .6), rgba(40, 45, 37, .72)); }
.close .wrap { position: relative; max-width: 720px; }
.sun { width: min(62vw, 240px); margin: 0 auto 28px; color: var(--dourado-claro); }
.close p { margin-top: 12px; }
.close .btn { margin-top: 26px; }
.js .sun .disc { transform: translateY(52px); }
.js .sun .rays path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .sun.on .disc { transform: none; transition: transform 1.4s var(--ease); }
.js .sun.on .rays path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease) .55s; }
.js .sun.on .rays path:nth-child(2), .js .sun.on .rays path:nth-child(3) { transition-delay: .68s; }
.js .sun.on .rays path:nth-child(4), .js .sun.on .rays path:nth-child(5) { transition-delay: .8s; }

/* Instagram: link secundário, sem disputar com o WhatsApp */
.ig { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-underline-offset: 3px; }
.ig svg { width: 22px; height: 22px; flex: none; }
.ig:hover { color: var(--dourado-claro); }
.close .ig { display: flex; width: fit-content; margin: 14px auto 0; }

/* Rodapé */
.foot { background: var(--oliva-fundo); color: var(--areia); padding-block: 48px 88px; font-size: .9375rem; }
.foot-grid { display: grid; gap: 30px; }
.foot-brand img { width: 136px; }
.foot-brand p { margin-top: 12px; }
.foot-title { margin-bottom: 8px; font: 600 1.125rem/1.2 var(--serif); color: var(--marfim); }
.foot-list li { min-height: 36px; display: flex; align-items: center; }
.foot-data li { min-height: 28px; }
.foot-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: inherit; text-decoration: none; transition: color .2s; }
.foot-list a:hover { color: var(--dourado-claro); text-decoration: underline; text-underline-offset: 3px; }
.foot-list svg { width: 20px; height: 20px; flex: none; }
.fine { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(205, 179, 131, .25); font-size: .8125rem; }

/* WhatsApp fixo */
.float {
  position: fixed; z-index: 20; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  background: var(--zap); color: var(--zap-tinta);
  border-radius: 50%; box-shadow: 0 10px 24px -8px rgba(14, 42, 26, .7);
  transition: transform .25s var(--ease), background-color .2s, opacity .25s, visibility .25s;
}
.float.is-hidden { opacity: 0; visibility: hidden; transform: translateY(8px); }
.float svg { width: 28px; height: 28px; }
.float:hover { background: #3BE07A; transform: translateY(-2px); }

@media (min-width: 560px) {
  :root { --gutter: 32px; }
  .btn { width: auto; min-width: 300px; }
  .hero-ctas { width: 300px; }
}

@media (min-width: 900px) {
  .hero-copy { padding-bottom: 64px; }
  .brand-tab { left: max(var(--gutter), calc((100% - 1180px) / 2)); padding: 22px 20px 16px; }
  .brand-tab img { width: 150px; }
  .hero-shade { background: linear-gradient(90deg, rgba(40, 45, 37, .86) 0%, rgba(52, 58, 48, .55) 42%, rgba(52, 58, 48, 0) 72%), linear-gradient(180deg, rgba(52, 58, 48, 0) 55%, rgba(40, 45, 37, .6) 100%); }
  .hero h1 { max-width: 12.5em; }

  .why-grid { grid-template-columns: 5fr 6fr; gap: 72px; align-items: start; }
  .why-head { position: sticky; top: 48px; }

  .place { grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
  .place + .place { margin-top: 96px; }
  .place-flip { grid-template-columns: 5fr 7fr; }
  .place-flip .viewer { order: 2; }
  .viewer { margin-inline: 0; }
  .stage { aspect-ratio: 16 / 10; border-radius: 12px; }
  .switch { margin-inline: 0; max-width: 320px; }

  .map-grid { grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; }
  .foot-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
  .foot { padding-bottom: 32px; }
  .float { right: 24px; bottom: 24px; }
}

/* Animações de entrada: só existem com JS */
.hero h1, .hero p, .hero .btn, .hero-ig { animation: subir 1s var(--ease) both; }
.hero p { animation-delay: .12s; }
.hero .btn { animation-delay: .24s; }
.hero-ig { animation-delay: .36s; }
.brand-tab { animation: descer .9s var(--ease) both; }

.js .rise { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.js .rise.in { opacity: 1; transform: none; }

.js .stage .layer-proj video { transform: scale(1.1); transition: transform 2.2s var(--ease); }
.js .stage.in .layer-proj video { transform: none; }

.js .pin { opacity: 0; transition: opacity .5s ease .5s; }
.js .sat.in .pin { opacity: 1; }
.js .sat.in .pin-lagos { transition-delay: .85s; }

@keyframes subir { from { opacity: 0; transform: translateY(28px); } }
@keyframes descer { from { transform: translateY(-100%); } }

/* Quem pediu menos movimento: troca deslocamento e zoom por um fade simples */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1, .hero p, .hero .btn, .hero-ig { animation-name: surgir; }
  .brand-tab, .hero-video.on { animation: none; }
  .js .rise { transform: none; }
  .js .stage .layer-proj video { transform: none; transition: none; }
}
@keyframes surgir { from { opacity: 0; } }

/* Notebook de tela baixa: título não encosta no logo */
@media (min-width: 900px) and (max-height: 720px) {
  .hero h1 { font-size: 3.75rem; }
  .hero-copy { padding-bottom: 40px; }
}

/* Celular: selo no alto para não encostar nos botões */
@media (max-width: 899px) {
  #heroSeal { top: 14px; bottom: auto; }
}

/* ===== Polimento visual ===== */

/* Tipografia com mais presença */
h1, h2, h3 { letter-spacing: -.02em; }
h2 { font-size: clamp(2.2rem, 8vw, 3.75rem); line-height: 1.08; }
.hero h1 { text-shadow: 0 2px 28px rgba(30, 34, 28, .45); }
.hero p { text-shadow: 0 1px 14px rgba(30, 34, 28, .5); }

/* Marca e botões */
.brand-tab { box-shadow: 0 12px 28px -14px rgba(20, 24, 18, .7); }
.hero-ig { box-shadow: 0 8px 20px -12px rgba(14, 42, 26, .5); }
.btn-quiet { box-shadow: 0 10px 22px -14px rgba(40, 45, 37, .8); }
.btn-quiet:hover { background: #525B4C; box-shadow: 0 14px 26px -14px rgba(40, 45, 37, .85); }

/* Benefícios */
.why-list li { padding-block: 20px; }
.why-list h3 { font-size: 1.625rem; }

/* Empreendimentos: troca Projeto/Obra em cima do vídeo */
.places-head { margin-bottom: 48px; }
.places-head p { font-size: 1.125rem; }
.place { gap: 26px; }
.viewer { position: relative; }
.stage { box-shadow: 0 24px 44px -30px rgba(40, 45, 37, .75); }
.switch { position: absolute; z-index: 2; top: 12px; right: 12px; width: 212px; margin: 0; background: rgba(245, 241, 231, .94); box-shadow: 0 10px 22px -12px rgba(30, 34, 28, .6); }
.switch button { min-height: 44px; font-size: .9375rem; }
.place-copy h3 { font-size: clamp(2.1rem, 7.4vw, 3rem); }
.where { font-size: 1.0625rem; }
.ticks { margin-block: 18px 24px; }
.ticks li { align-items: center; gap: 12px; padding-block: 6px; }
.ticks svg { width: 24px; height: 24px; margin-top: 0; padding: 5px; background: var(--oliva); color: var(--marfim); border-radius: 50%; }

/* Obra */
.step h3 { font-size: clamp(2.6rem, 11vw, 5rem); }
.step p { order: -1; margin: 0 0 10px; font: 600 1.375rem/1.2 var(--serif); color: var(--dourado-claro); }
.step:first-child p { order: 0; margin: 14px 0 0; font: 400 1.125rem/1.5 var(--sans); color: var(--marfim); }

/* Localização */
.map-copy > p { font-size: 1.125rem; }
.addr dt { font-size: 1.4375rem; }
.addr dd { margin-top: 4px; }
.sat { border-radius: 16px; box-shadow: 0 24px 44px -30px rgba(40, 45, 37, .75); }

/* Fechamento e rodapé */
.close h2 { font-size: clamp(2.3rem, 8.4vw, 4rem); }
.close p { font-size: 1.125rem; }
.foot { border-top: 1px solid rgba(205, 179, 131, .3); }

@media (min-width: 900px) {
  .hero p { font-size: 1.25rem; }
  .why-list h3 { font-size: 1.75rem; }
  .place { grid-template-columns: 8fr 5fr; gap: 64px; }
  .place-flip { grid-template-columns: 5fr 8fr; }
  .stage { border-radius: 16px; }
  .switch { top: 16px; right: 16px; width: 240px; max-width: none; }
  .switch button { min-height: 46px; font-size: 1rem; }
  .step p { font-size: 1.625rem; }
}

/* Celular deitado: título menor e tudo na primeira tela */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-shade { background: linear-gradient(90deg, rgba(40, 45, 37, .88), rgba(52, 58, 48, .5) 55%, rgba(52, 58, 48, .1)); }
  .brand-tab { padding: 10px 12px 8px; }
  .brand-tab img { width: 84px; }
  .hero-copy { padding-block: 84px 16px; }
  .hero h1 { font-size: 2.1rem; max-width: 16em; }
  .hero p { margin-top: 8px; font-size: 1rem; max-width: 30em; }
  .hero-ctas { grid-template-columns: 1fr 1fr; width: min(100%, 520px); margin-top: 12px; }
  .hero-ctas .btn, .hero-ig { min-height: 48px; justify-content: center; padding: 10px 12px; }
  .step h3 { font-size: 2.5rem; }
}