/* ==========================================================================
   LANDING PAGE IMOBILIÁRIA — ALTO PADRÃO
   Folha de estilos principal (mobile-first)

   Índice
   01. Identidade visual (variáveis) ← TROQUE CORES, FONTES E RITMO AQUI
   02. Reset e base
   03. Sistema tipográfico e utilitários
   04. Botões e links
   05. Placeholders de mídia
   06. Header e navegação
   07. Hero
   08. O Empreendimento / Diferenciais
   09. Tipologias
   10. Plantas e layouts
   11. Experiência e lazer
   12. Localização
   13. Depoimentos
   14. Contato / formulário
   15. Footer
   15b. Tour virtual · Galeria do imóvel · Condomínio · Bairro · Diálogos
   16. Animações
   17. Breakpoints: 640px · 1024px · 1200px · 1440px
   18. Movimento reduzido e impressão
   ========================================================================== */


/* ==========================================================================
   01. IDENTIDADE VISUAL
   ========================================================================== */
:root {
  /* Superfícies claras */
  --c-bg: #F6F2EA;            /* fundo principal off-white */
  --c-bg-alt: #EDE6D9;        /* fundo alternado (bege profundo) */
  --c-surface: #FBF9F5;       /* cards, plantas e campos */

  /* Grafites */
  --c-ink: #16171A;           /* títulos, botões e seções escuras */
  --c-ink-soft: #2A2C31;      /* superfícies escuras secundárias */
  --c-text: #3A3C42;          /* texto corrido */
  --c-muted: #5E6066;         /* texto de apoio (≥4.5:1 sobre --c-bg e --c-bg-alt) */

  /* Acento bronze champanhe */
  --c-accent: #B08D57;        /* fios, ícones e detalhes */
  --c-accent-light: #D9C29A;  /* acento sobre fundo escuro */
  --c-accent-ink: #765A30;    /* acento para TEXTO sobre fundo claro (≥4.5:1 nos dois fundos) */

  /* Texto sobre fundo escuro */
  --c-on-dark: #F3EEE4;
  --c-on-dark-muted: #ADA79C;

  /* Fios */
  --c-line: rgba(22, 23, 26, .12);
  --c-line-strong: rgba(22, 23, 26, .24);
  --c-line-dark: rgba(243, 238, 228, .14);
  --c-line-ui: rgba(22, 23, 26, .5);            /* bordas de controles (≥3:1, WCAG 1.4.11) */
  --c-line-ui-dark: rgba(243, 238, 228, .5);

  /* Foco por teclado (≥3:1 contra o fundo) */
  --focus: var(--c-accent-ink);

  /* Estados de formulário */
  --c-error: #A23B2A;
  --c-success: #3E6B4F;

  /* Famílias */
  --f-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica fluida */
  --fs-hero: clamp(3.25rem, 1.6rem + 6vw, 7.5rem);
  --fs-h2: clamp(2.375rem, 1.6rem + 3.1vw, 4.5rem);
  --fs-h3: clamp(1.625rem, 1.4rem + .9vw, 2.125rem);
  --fs-quote: clamp(1.625rem, 1.15rem + 1.9vw, 2.875rem);
  --fs-lead: clamp(1.0625rem, 1rem + .28vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-label: .6875rem;       /* 11px: rótulos em caixa alta */
  --fs-micro: .625rem;        /* 10px: legendas técnicas */
  --track-label: .24em;       /* espaçamento único para rótulos */

  /* Pesos */
  --w-display: 300;           /* títulos grandes */
  --w-display-sm: 400;        /* títulos pequenos (cards, nomes) */

  /* Espaçamento — escala de 8px */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;
  --gutter: 24px;
  --section-y: clamp(104px, 6.5rem + 5vw, 192px);
  --container: 1280px;
  --radius: 0;                /* cantos retos = linguagem arquitetônica */

  /* Movimento — uma única assinatura para toda a página */
  --ease: cubic-bezier(.19, 1, .22, 1);        /* expo out: desacelera longo */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-1: .3s;                 /* microinterações */
  --t-2: .6s;                 /* botões, links, estados */
  --t-3: 1s;                  /* entradas de conteúdo */
  --t-4: 1.6s;                /* imagens e títulos */

  --header-h: 72px;
}


/* ==========================================================================
   02. RESET E BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

/* O atributo hidden sempre vence regras de display dos componentes */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
/* Em superfícies escuras o foco usa o champanhe */
.hero,
.section--dark,
.site-footer,
.mobile-menu,
.site-header:not(.is-scrolled) { --focus: var(--c-accent-light); }
.section--dark .form-card { --focus: var(--c-accent-ink); }
main:focus { outline: none; }

::selection { background: var(--c-accent-light); color: var(--c-ink); }

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 14px 20px;
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-size: var(--fs-small);
  transform: translateY(-160%);
  transition: transform var(--t-1) var(--ease);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   03. SISTEMA TIPOGRÁFICO E UTILITÁRIOS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-ink); color: var(--c-on-dark-muted); }

/* Sobretítulo editorial: [nº da seção] — fio — NOME */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--c-accent-ink);
}
/* Fio padrão (eyebrow sem número) */
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
/* Com número, o fio passa a ficar entre o número e o nome */
.eyebrow:has(.eyebrow-num)::before { display: none; }
.eyebrow-num {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: lining-nums;
}
.eyebrow-num::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
.section--dark .eyebrow { color: var(--c-accent-light); }

/* Títulos */
.display {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--c-ink);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
.display em {
  font-style: normal;
  font-weight: var(--w-display);
  letter-spacing: 0;
  color: var(--c-accent-ink);
}
.section--dark .display { color: var(--c-on-dark); }
.section--dark .display em { color: var(--c-accent-light); }

.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.12; }

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.7;
  color: var(--c-text);
  max-width: 46ch;
  text-wrap: pretty;
}
.section--dark .lead { color: var(--c-on-dark-muted); }

/* Cabeçalho de seção */
.section-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: clamp(var(--s-6), 7vw, var(--s-8));
}
.section-head .eyebrow { margin-bottom: var(--s-1); }


/* ==========================================================================
   04. BOTÕES E LINKS
   Linguagem: retângulo de fio fino, rótulo espaçado, preenchimento que
   desliza da esquerda e recua para a direita ao sair.
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 32px;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
  padding-block: 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-2) var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.btn:active { transform: translateY(1px); }

/* Seta: sai pela direita e volta pela esquerda */
.btn .arrow {
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: -4px;
}
.btn:hover .arrow,
.btn:focus-visible .arrow { animation: arrow-loop .7s var(--ease) both; }

.btn--primary { background: var(--c-ink); color: var(--c-on-dark); }
.btn--primary::before { background: var(--c-accent-ink); }

.btn--light { background: var(--c-accent-light); color: var(--c-ink); }
.btn--light::before { background: var(--c-on-dark); }

.btn--ghost-light { border-color: var(--c-line-ui-dark); color: var(--c-on-dark); }
.btn--ghost-light::before { background: var(--c-on-dark); }
.btn--ghost-light:hover,
.btn--ghost-light:focus-visible { color: var(--c-ink); border-color: var(--c-on-dark); }

.btn--ghost { border-color: var(--c-line-ui); color: var(--c-ink); }
.btn--ghost::before { background: var(--c-ink); }
.btn--ghost:hover,
.btn--ghost:focus-visible { color: var(--c-on-dark); border-color: var(--c-ink); }

.btn--block { width: 100%; }

/* Link editorial: fio curto que se estende no hover */
.link-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-bottom: 2px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink);
}
.link-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: .24em;
  bottom: 9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(.3);
  transform-origin: left;
  transition: transform var(--t-2) var(--ease);
}
.link-line:hover::after,
.link-line:focus-visible::after { transform: scaleX(1); }


/* ==========================================================================
   05. PLACEHOLDERS DE MÍDIA
   Troque o <div class="ph ..."> por <img>, <picture> ou <video> dentro do
   mesmo <figure class="media">. O enquadramento (object-fit) já está pronto.
   ========================================================================== */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-bg-alt);
}
.media > img,
.media > picture > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: #DCD3C3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%2316171A' stroke-opacity='.06'%3E%3Cpath d='M0 60h240M0 180h240M60 0v240M180 0v240'/%3E%3Cpath d='M0 240L240 0' stroke-opacity='.035'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #E6DECF 0%, #D2C6B2 55%, #BFAF96 100%);
  background-size: 240px 240px, cover;
}

/* Legenda técnica do placeholder */
.ph::after {
  content: attr(data-label);
  position: absolute;
  left: var(--s-2);
  bottom: 14px;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(22, 23, 26, .42);
}

.ph--warm {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%2316171A' stroke-opacity='.06'%3E%3Cpath d='M0 80h240M0 160h240M120 0v240'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(200deg, #E9DFCB 0%, #CDB997 60%, #B39A73 100%);
}
.ph--stone {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%2316171A' stroke-opacity='.05'%3E%3Cpath d='M0 90h180M90 0v180'/%3E%3Ccircle cx='90' cy='90' r='60'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, #E4E1DA 0%, #C9C4BA 60%, #A8A296 100%);
}
.ph--dark {
  background-color: var(--c-ink-soft);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23F3EEE4' stroke-opacity='.045'%3E%3Cpath d='M0 60h240M0 180h240M60 0v240M180 0v240'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(170deg, #34363B 0%, #22242A 55%, #141518 100%);
}
.ph--dark::after { color: rgba(243, 238, 228, .36); }

.ph--hero {
  background-color: #1B1C20;
  background-image:
    radial-gradient(90% 70% at 78% 18%, rgba(217, 194, 154, .14) 0%, rgba(217, 194, 154, 0) 60%),
    linear-gradient(180deg, #2A2C31 0%, #1A1B1F 58%, #111215 100%);
  background-size: cover;
}


/* ==========================================================================
   06. HEADER E NAVEGAÇÃO
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  color: var(--c-on-dark);
  transition:
    background-color var(--t-2) var(--ease),
    color var(--t-2) var(--ease),
    box-shadow var(--t-2) var(--ease),
    height var(--t-2) var(--ease);
}

/* Fio inferior discreto sobre o hero */
.site-header::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--c-line-dark);
  transition: opacity var(--t-2) var(--ease);
}

.site-header.is-scrolled {
  background: rgba(246, 242, 234, .9);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  color: var(--c-ink);
  box-shadow: 0 1px 0 var(--c-line);
}
.site-header.is-scrolled::after { opacity: 0; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: 100%;
}

/* LOGO — placeholder tipográfico. Para o logo real, troque o conteúdo de
   .logo por <img src="assets/logo.svg" alt="Nome da marca">. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  position: relative;
  z-index: 2;
}
.logo-mark {
  width: 30px;
  height: 30px;
  flex: none;
}
.logo-text {
  display: grid;
  line-height: 1;
}
.logo-name {
  font-family: var(--f-display);
  font-size: 1.3125rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-right: -.32em;
}
.logo-sub {
  margin-top: 5px;
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: .5em;
  text-transform: uppercase;
  opacity: .66;
}

.nav-desktop,
.header-cta { display: none; }

/* Botão hambúrguer */
.menu-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 2px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.menu-toggle-lines {
  position: relative;
  width: 26px;
  height: 9px;
}
.menu-toggle-lines span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-2) var(--ease), width var(--t-2) var(--ease), top var(--t-2) var(--ease);
}
.menu-toggle-lines span:nth-child(1) { top: 0; }
.menu-toggle-lines span:nth-child(2) { top: 8px; width: 62%; }
.menu-toggle:hover .menu-toggle-lines span:nth-child(2) { width: 100%; }

.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:nth-child(1) { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:nth-child(2) { top: 4px; width: 100%; transform: rotate(-45deg); }

.site-header.menu-open {
  color: var(--c-on-dark);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header.menu-open::after { opacity: 1; }

/* Painel do menu mobile */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--header-h) + var(--s-5)) var(--gutter) var(--s-4);
  background: var(--c-ink);
  color: var(--c-on-dark);
  overflow-y: auto;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease), visibility 0s linear .9s;
}
.mobile-menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s var(--ease), visibility 0s;
}

.mobile-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: menu;
  border-top: 1px solid var(--c-line-dark);
}
.mobile-nav li {
  border-bottom: 1px solid var(--c-line-dark);
  overflow: hidden;
}
.mobile-nav a {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 12px 0;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 7.4vw, 2.375rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--c-on-dark);
  transform: translateY(100%);
  transition: transform .8s var(--ease), color var(--t-1) var(--ease);
}
.mobile-nav a:hover { color: var(--c-accent-light); }
.mobile-nav a::before {
  counter-increment: menu;
  content: "0" counter(menu);
  min-width: 22px;
  font-family: var(--f-display);
  font-size: .9375rem;
  font-style: normal;
  color: var(--c-accent-light);
  font-variant-numeric: lining-nums;
}
.mobile-menu.is-open .mobile-nav a { transform: none; }
.mobile-menu.is-open .mobile-nav li:nth-child(1) a { transition-delay: .2s; }
.mobile-menu.is-open .mobile-nav li:nth-child(2) a { transition-delay: .25s; }
.mobile-menu.is-open .mobile-nav li:nth-child(3) a { transition-delay: .3s; }
.mobile-menu.is-open .mobile-nav li:nth-child(4) a { transition-delay: .35s; }
.mobile-menu.is-open .mobile-nav li:nth-child(5) a { transition-delay: .4s; }
.mobile-menu.is-open .mobile-nav li:nth-child(6) a { transition-delay: .45s; }
.mobile-menu.is-open .mobile-nav li:nth-child(7) a { transition-delay: .5s; }
.mobile-menu.is-open .mobile-nav li:nth-child(8) a { transition-delay: .55s; }

.mobile-menu-foot {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
  font-size: var(--fs-small);
  color: var(--c-on-dark-muted);
  opacity: 0;
  transition: opacity var(--t-2) var(--ease);
}
.mobile-menu.is-open .mobile-menu-foot { opacity: 1; transition-delay: .5s; }


/* ==========================================================================
   07. HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--s-4)) 0 var(--s-4);
  color: var(--c-on-dark);
  background: var(--c-ink);
  overflow: hidden;
  isolation: isolate;
}

/* Fundo: troque .ph--hero e o SVG por <video> ou <img> (ver README) */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media .ph,
.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: hero-settle 2.8s var(--ease) forwards;
}

/* Desenho de fachada provisório (remova ao usar mídia real) */
.hero-facade {
  position: absolute;
  right: -18%;
  bottom: 0;
  width: 110%;
  max-width: 860px;
  height: auto;
  opacity: .4;
}

/* Véu de leitura: escurece topo e base, preserva o centro */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 13, 15, .6) 0%, rgba(12, 13, 15, 0) 26%),
    linear-gradient(0deg, rgba(12, 13, 15, .92) 0%, rgba(12, 13, 15, .35) 46%, rgba(12, 13, 15, 0) 72%);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hero-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
}
.hero .eyebrow { color: var(--c-accent-light); }

.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
  font-variant-numeric: lining-nums;
}
.hero-meta span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-accent-light);
}

/* Headline com revelação linha a linha em máscara */
.hero-title {
  margin-top: auto;
  padding-top: var(--s-6);
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  font-weight: var(--w-display);
  line-height: .94;
  letter-spacing: 0;
  color: var(--c-on-dark);
}
.hero-line {
  display: block;
  overflow: hidden;
  /* respiro para acentos (ê, ç) e descendentes sem cortar na máscara */
  padding: .12em 0 .16em;
  margin: -.12em 0 -.16em;
}
.hero-line > span { display: inline-block; }
.hero-title em {
  font-style: normal;
  font-weight: var(--w-display);
  letter-spacing: 0;
  color: var(--c-accent-light);
}

.hero-foot {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.hero-sub {
  max-width: 40ch;
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(243, 238, 228, .78);
  text-wrap: pretty;
}

.hero-actions {
  display: grid;
  gap: 10px;
}

/* Faixa de indicadores */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s-5);
  border-top: 1px solid var(--c-line-dark);
}
.hero-stat {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-top: var(--s-2);
}
.hero-stat:nth-child(n+3) { padding-top: var(--s-3); }
.hero-stat:nth-child(even) { padding-left: var(--s-3); border-left: 1px solid var(--c-line-dark); }
.hero-stat dt {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
}
.hero-stat dd {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-on-dark);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.hero-stat dd i {
  font-style: normal;
  margin: 0 .02em;
  color: var(--c-accent-light);
}
.hero-stat dd small {
  margin-left: 2px;
  font-family: var(--f-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
  vertical-align: .4em;
}

/* Indicador de rolagem (desktop): vertical na borda direita */
.scroll-indicator {
  display: none;
  position: absolute;
  right: calc(var(--gutter) / 2 - 22px);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  min-width: 44px;
  padding: var(--s-1) 0;
  color: var(--c-on-dark-muted);
  transition: color var(--t-1) var(--ease);
}
.scroll-indicator:hover { color: var(--c-on-dark); }
.scroll-indicator-text {
  writing-mode: vertical-rl;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.scroll-indicator-line {
  position: relative;
  width: 1px;
  height: 72px;
  background: var(--c-line-dark);
  overflow: hidden;
}
.scroll-indicator-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 35%;
  background: var(--c-accent-light);
  animation: scroll-line 2.4s var(--ease-in-out) 1.6s 5;
}


/* ==========================================================================
   08. O EMPREENDIMENTO / DIFERENCIAIS
   ========================================================================== */
.about-grid {
  display: grid;
  gap: var(--s-6);
}

.about-text {
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.about-text .eyebrow { margin-bottom: var(--s-1); }
.about-text p:not(.lead):not(.eyebrow) {
  max-width: 48ch;
  color: var(--c-muted);
}

.signature {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-size: .8125rem;
  color: var(--c-muted);
}
.signature strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 400;
  font-style: normal;
  color: var(--c-ink);
}

.about-media { position: relative; }
.about-media .media--main { aspect-ratio: 4 / 5; }
.about-media .media--detail { display: none; }

.features {
  display: grid;
  margin-top: clamp(var(--s-6), 9vw, var(--s-8));
  border-top: 1px solid var(--c-line);
}
.feature {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--s-2);
  row-gap: 12px;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.feature-index {
  grid-row: 1 / span 3;
  padding-top: 2px;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-style: normal;
  color: var(--c-accent-ink);
  font-variant-numeric: lining-nums;
}
.feature-icon {
  width: 30px;
  height: 30px;
  color: var(--c-accent);
  transition: transform var(--t-2) var(--ease);
}
.feature h3 {
  font-family: var(--f-display);
  font-size: 1.625rem;
  font-weight: var(--w-display-sm);
  line-height: 1.12;
  color: var(--c-ink);
}
.feature p {
  max-width: 34ch;
  font-size: .9375rem;
  color: var(--c-muted);
}
.feature:hover .feature-icon { transform: translateY(-3px); }


/* ==========================================================================
   09. TIPOLOGIAS
   ========================================================================== */
.units {
  display: grid;
  gap: var(--s-6);
}

.unit {
  position: relative;
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.unit .media { aspect-ratio: 4 / 5; }
.unit .media .ph,
.unit .media img { transition: transform 1.4s var(--ease); }
.unit:hover .media .ph,
.unit:hover .media img,
.unit:focus-within .media .ph,
.unit:focus-within .media img { transform: scale(1.04); }

.unit-tag {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 1;
  padding: 8px 12px;
  background: rgba(246, 242, 234, .94);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink);
}

.unit-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
}
.unit-name {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.5rem + .8vw, 2.125rem);
  font-weight: var(--w-display);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--c-ink);
}
.unit-area {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-style: normal;
  color: var(--c-accent-ink);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

.unit-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--c-line);
}
.unit-specs div { padding: 14px 0; }
.unit-specs div + div {
  padding-left: var(--s-2);
  border-left: 1px solid var(--c-line);
}
.unit-specs dt {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.unit-specs dd {
  margin-top: 4px;
  font-size: .9375rem;
  font-weight: 400;
  color: var(--c-ink);
  font-variant-numeric: lining-nums;
}

.unit-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
}
.unit-price {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.unit-price strong {
  display: block;
  margin-top: 2px;
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ink);
}


/* ==========================================================================
   10. PLANTAS E LAYOUTS
   ========================================================================== */
.plans-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}

.tab {
  position: relative;
  min-height: 52px;
  padding: 10px 4px;
  line-height: 1.35;
  text-align: center;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--t-1) var(--ease);
}
.tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--c-ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-2) var(--ease);
}
.tab:hover { color: var(--c-ink); }
.tab[aria-selected="true"] { color: var(--c-ink); }
.tab[aria-selected="true"]::after { transform: scaleX(1); transform-origin: left; }

.plan {
  display: grid;
  gap: var(--s-5);
}
.plan[hidden] { display: none; }
.plan.is-entering { animation: fade-up .9s var(--ease) both; }

/* Moldura técnica. Troque o <svg class="plan-drawing"> por
   <img src="assets/plantas/..." alt="Planta ..."> mantendo .plan-figure. */
.plan-figure {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: var(--s-4) var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.plan-figure img,
.plan-drawing {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.plan-zoom { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.plan-zoom img { transition: transform 1.4s var(--ease); }
.plan-zoom:hover img { transform: scale(1.04); }
.plan-figure figcaption {
  position: absolute;
  left: var(--s-2);
  bottom: 12px;
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.plan-north {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  width: 26px;
  height: 26px;
  color: var(--c-muted);
}

.plan-info {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.plan-area {
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 2.6rem + 3.4vw, 5.5rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: 0;
  color: var(--c-ink);
  font-variant-numeric: lining-nums;
}
.plan-area small {
  margin-left: 10px;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.plan-rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
}
.plan-rooms li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: .875rem;
  color: var(--c-ink);
  font-variant-numeric: lining-nums;
}
.plan-rooms li:nth-child(odd) { padding-right: var(--s-2); }
.plan-rooms li:nth-child(even) { padding-left: var(--s-2); border-left: 1px solid var(--c-line); }
.plan-rooms span:last-child { color: var(--c-muted); white-space: nowrap; }

.plan-highlights {
  display: grid;
  gap: 10px;
}
.plan-highlights li {
  position: relative;
  padding-left: var(--s-3);
  font-size: .9375rem;
  color: var(--c-text);
}
.plan-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .82em;
  width: 12px;
  height: 1px;
  background: var(--c-accent);
}
.plan-note {
  font-size: .75rem;
  color: var(--c-muted);
}


/* ==========================================================================
   11. EXPERIÊNCIA E LAZER (galeria editorial assimétrica)
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: var(--s-4);
}
.gallery-item { display: grid; gap: 14px; align-content: start; }
.gallery-item .media { aspect-ratio: 4 / 5; }
.gallery-item .gallery-btn { height: auto; }
.gallery-item .media .ph,
.gallery-item .media img { transition: transform 1.4s var(--ease); }
.gallery-item:hover .media .ph,
.gallery-item:hover .media img { transform: scale(1.035); }

.gallery-item--wide { grid-column: span 2; }
.gallery-item--wide .media { aspect-ratio: 16 / 10; }

/* Variação de tons nos placeholders escuros (remova ao usar fotos) */
.gallery-item:nth-child(3n+2) .ph--dark {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23D9C29A' stroke-opacity='.06'%3E%3Cpath d='M0 120h240M120 0v240'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #4A4135 0%, #2C2721 55%, #17150F 100%);
}
.gallery-item:nth-child(3n) .ph--dark {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23F3EEE4' stroke-opacity='.045'%3E%3Ccircle cx='90' cy='90' r='60'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(200deg, #3B3E40 0%, #26292B 60%, #151618 100%);
}

.gallery-item figcaption {
  display: grid;
  gap: 2px;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
}
.gallery-item figcaption b {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-on-dark);
}


/* ==========================================================================
   12. LOCALIZAÇÃO
   ========================================================================== */
.location-grid {
  display: grid;
  gap: var(--s-6);
}
.location-grid .section-head { margin-bottom: var(--s-4); }

/* Mapa: troque o <svg class="map-art"> por <iframe> do Google Maps
   ou <img> de mapa personalizado, mantendo .map. */
.map {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #E9E2D5;
  border: 1px solid var(--c-line);
  overflow: hidden;
}
.map iframe,
.map img,
.map-art {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.map-pin {
  position: absolute;
  left: 52%;
  top: 46%;
  transform: translate(-50%, -100%);
  display: grid;
  justify-items: center;
  gap: 10px;
}
.map-pin-label {
  padding: 9px 14px;
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.map-pin-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(246, 242, 234, .92);
}
.map-pin-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--c-accent);
  animation: pulse 2.8s var(--ease) 4;
}

.address {
  display: grid;
  gap: 4px;
  padding: var(--s-3) 0;
  border-block: 1px solid var(--c-line);
  margin-bottom: var(--s-1);
  font-style: normal;
}
.address strong {
  font-family: var(--f-display);
  font-size: 1.625rem;
  font-weight: 400;
  color: var(--c-ink);
  font-variant-numeric: lining-nums;
}
.address span {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.poi-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-2);
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
}
.poi-name { font-size: .9375rem; color: var(--c-ink); }
.poi-type {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.poi-dist {
  font-family: var(--f-display);
  font-size: 1.625rem;
  font-weight: 300;
  color: var(--c-ink);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}
.poi-dist small {
  margin-left: 3px;
  font-family: var(--f-body);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--c-muted);
}


/* ==========================================================================
   13. DEPOIMENTOS
   ========================================================================== */
.testimonials { text-align: center; }
.testimonials .eyebrow { justify-content: center; }

.carousel {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
}
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex;
  transition: transform 1.1s var(--ease);
  will-change: transform;
}
.slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 4px;
  transition: opacity 1.1s var(--ease);
}
.slide[aria-hidden="true"] { opacity: 0; }

.quote-mark {
  width: 30px;
  height: 30px;
  margin: 0 auto var(--s-4);
  color: var(--c-accent);
}
.slide blockquote p {
  font-family: var(--f-display);
  font-size: var(--fs-quote);
  font-weight: 300;
  font-style: normal;
  line-height: 1.28;
  letter-spacing: 0;
  color: var(--c-ink);
  text-wrap: balance;
}
.slide figcaption {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: var(--s-4);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink);
}
.slide figcaption::before {
  content: "";
  width: 1px;
  height: 32px;
  margin-bottom: var(--s-2);
  background: var(--c-accent);
}
.slide figcaption span {
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--c-muted);
}

.carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.carousel-btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--c-line-ui);
  border-radius: 50%;
  color: var(--c-ink);
  transition: border-color var(--t-2) var(--ease), background-color var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
.carousel-btn:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
.carousel-btn svg { width: 18px; height: 18px; }

.carousel-dots { display: flex; }
.carousel-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}
.carousel-dot::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--c-muted);
  transition: width var(--t-2) var(--ease), background-color var(--t-2) var(--ease);
}
.carousel-dot[aria-current="true"]::before {
  width: 28px;
  height: 2px;
  background: var(--c-ink);
}


/* ==========================================================================
   14. CONTATO / FORMULÁRIO
   ========================================================================== */
.contact { position: relative; overflow: hidden; }

.contact-grid {
  display: grid;
  gap: var(--s-6);
}
.contact-intro {
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.contact-intro .eyebrow { margin-bottom: var(--s-1); }

.contact-direct {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line-dark);
}
.contact-direct dt {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
}
.contact-direct dd,
.contact-direct dd a {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--c-on-dark);
  font-variant-numeric: lining-nums;
}
.contact-direct dd a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  background: linear-gradient(currentColor, currentColor) left 80% / 0 1px no-repeat;
  transition: background-size var(--t-2) var(--ease), color var(--t-1) var(--ease);
}
.contact-direct dd a:hover { background-size: 100% 1px; color: var(--c-accent-light); }

.form-card {
  position: relative;
  padding: var(--s-4) var(--s-3);
  background: var(--c-bg);
  color: var(--c-text);
}

.form-grid {
  display: grid;
  gap: 4px;
}

/* Campo com label flutuante */
.field {
  position: relative;
  padding-top: 18px;
}
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 0 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line-ui);
  border-radius: 0;
  font-size: 1rem;           /* 16px evita zoom automático no iOS */
  font-weight: 400;
  color: var(--c-ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-1) var(--ease);
}
.field textarea {
  min-height: 108px;
  resize: vertical;
  line-height: 1.6;
}
.field select { padding-right: 28px; cursor: pointer; }
.field-select::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 42px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--c-ink);
  border-bottom: 1px solid var(--c-ink);
  transform: rotate(45deg);
  pointer-events: none;
}

.field label {
  position: absolute;
  left: 0;
  top: 34px;
  font-size: 1rem;
  font-weight: 300;
  color: var(--c-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--t-2) var(--ease), color var(--t-1) var(--ease);
}
.field label .opt { font-size: .8125rem; }

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select.has-value + label {
  transform: translateY(-26px) scale(.78);
  color: var(--c-accent-ink);
}

.field-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -2px;
  background: var(--c-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-2) var(--ease);
}
.field input:focus ~ .field-line,
.field select:focus ~ .field-line,
.field textarea:focus ~ .field-line { transform: scaleX(1); }

.field-error {
  min-height: 22px;
  padding-top: 6px;
  font-size: .75rem;
  color: var(--c-error);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-bottom-color: var(--c-error); }
.field.is-invalid label { color: var(--c-error); }
.field.is-invalid .field-line { background: var(--c-error); }
.field.is-invalid .field-error { opacity: 1; transform: none; }
.field.is-invalid { animation: shake .45s var(--ease); }

.field.is-valid input,
.field.is-valid select { border-bottom-color: var(--c-success); }

.form-status {
  display: none;
  gap: 12px;
  align-items: flex-start;
  margin-top: var(--s-1);
  padding: 14px 16px;
  font-size: .875rem;
  line-height: 1.5;
  border-left: 1px solid currentColor;
}
.form-status.is-error {
  display: flex;
  color: var(--c-error);
  background: rgba(162, 59, 42, .05);
}

.form-submit { margin-top: var(--s-3); }
.form-submit .btn { width: 100%; }

.btn .spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .arrow { display: none; }

.privacy {
  margin-top: var(--s-2);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.privacy a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Estado de sucesso */
.form-success {
  display: none;
  text-align: center;
  padding: var(--s-3) 4px;
}
.form-card.is-success .form-success {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  animation: fade-up 1s var(--ease) both;
}
.form-card.is-success form { display: none; }
.success-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-1);
  color: var(--c-success);
}
.success-icon circle {
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  animation: draw 1.2s var(--ease) .1s forwards;
}
.success-icon path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: draw .6s var(--ease) .9s forwards;
}
.form-success h3 {
  font-family: var(--f-display);
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.1;
  color: var(--c-ink);
}
.form-success p { max-width: 36ch; font-size: .9375rem; color: var(--c-muted); }


/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.site-footer {
  padding: var(--s-7) 0 var(--s-4);
  background: #0F1012;
  color: var(--c-on-dark-muted);
  font-size: var(--fs-small);
  overflow: hidden;
}
.site-footer .logo { color: var(--c-on-dark); }

.footer-grid {
  display: grid;
  gap: var(--s-5);
  padding-bottom: var(--s-6);
}
.footer-brand p {
  max-width: 26ch;
  margin-top: var(--s-3);
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.35;
  color: var(--c-on-dark);
}
.footer-col h2 {
  margin-bottom: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-accent-light);
}
.footer-col li a,
.footer-col address a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  transition: color var(--t-1) var(--ease);
}
.footer-col a:hover { color: var(--c-on-dark); }
.footer-col address { font-style: normal; line-height: 1.6; }

.footer-col .social {
  display: flex;
  gap: 10px;
}
.footer-col .social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(243, 238, 228, .3);
  border-radius: 50%;
  color: var(--c-on-dark);
  transition: border-color var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
.footer-col .social a:hover { border-color: var(--c-accent-light); color: var(--c-accent-light); }
.social svg { width: 17px; height: 17px; }

/* Lettering monumental da marca */
.footer-wordmark {
  font-family: var(--f-display);
  font-size: clamp(4rem, 18.5vw, 18rem);
  font-weight: 300;
  line-height: .74;
  letter-spacing: .1em;
  margin-right: -.1em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(243, 238, 228, .05);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.footer-legal {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line-dark);
  font-size: .75rem;
  line-height: 1.7;
  color: #8E8980;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px var(--s-3);
}

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--c-on-dark);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.to-top svg {
  width: 15px;
  height: 15px;
  transition: transform var(--t-2) var(--ease);
}
.to-top:hover svg { transform: translateY(-3px); }


/* ==========================================================================
   15b. NOVAS SEÇÕES
   ========================================================================== */

/* ---------- Link editorial sobre fundo escuro ---------- */
.link-line--light { color: var(--c-on-dark); }

.gallery-note {
  margin-top: var(--s-4);
  font-size: .75rem;
  color: var(--c-muted);
}
.section--dark .gallery-note { color: var(--c-on-dark-muted); }

/* ---------- Tour virtual ---------- */
.tour-grid {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
.tour-text {
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.tour-text .eyebrow { margin-bottom: var(--s-1); }

.tour-meta {
  display: grid;
  border-top: 1px solid var(--c-line-dark);
}
.tour-meta div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line-dark);
}
.tour-meta dt {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
}
.tour-meta dd {
  font-size: .9375rem;
  color: var(--c-on-dark);
  text-align: right;
  font-variant-numeric: lining-nums;
}

.tour-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-2);
}

/* Prévia clicável (capa do tour) */
.tour-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: var(--c-on-dark);
}
.tour-preview .ph,
.tour-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.tour-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 50%, rgba(12, 13, 15, .38) 0%, rgba(12, 13, 15, .12) 100%);
  transition: background-color var(--t-2) var(--ease);
}
.tour-preview:hover .ph,
.tour-preview:hover img { transform: scale(1.04); }

.tour-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(243, 238, 228, .6);
  border-radius: 50%;
  background: rgba(22, 23, 26, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translate(-50%, -50%);
  transition: transform var(--t-2) var(--ease), background-color var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
.tour-badge svg { width: 40px; height: 40px; }
.tour-badge span {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-style: normal;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.tour-preview:hover .tour-badge,
.tour-preview:focus-visible .tour-badge {
  background: var(--c-on-dark);
  color: var(--c-ink);
  transform: translate(-50%, -50%) scale(1.06);
}
.tour-preview:focus-visible { outline-offset: -6px; }

/* ---------- Galeria do imóvel (mosaico) ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: calc((100vw - 2 * var(--gutter) - 12px) / 2);
  gap: 12px;
}
.photo--1,
.photo--6 { grid-column: span 2; }

.photo figure,
.photo-btn,
.gallery-btn { position: relative; display: block; width: 100%; height: 100%; }
.photo-btn .media,
.photo-btn .media > * { height: 100%; }
.photo-btn .media img { width: 100%; height: 100%; object-fit: cover; }

.photo-btn .media .ph,
.photo-btn .media img,
.gallery-btn .media .ph,
.gallery-btn .media img { transition: transform 1.4s var(--ease); }
.photo-btn:hover .media .ph,
.photo-btn:hover .media img,
.gallery-btn:hover .media .ph,
.gallery-btn:hover .media img { transform: scale(1.04); }

/* No mosaico a legenda do placeholder sairia sob o figcaption */
.photo-btn .ph::after { content: none; }

/* Legenda sobre a imagem, com véu para leitura */
.photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-5) var(--s-2) 14px;
  background: linear-gradient(0deg, rgba(12, 13, 15, .72) 0%, rgba(12, 13, 15, 0) 100%);
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-style: normal;
  color: var(--c-on-dark);
  pointer-events: none;
}
/* Ícone de ampliar (aparece no hover/foco) */
.photo-btn::after,
.gallery-btn::after,
.plan-zoom::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316171A' stroke-width='1.3'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 18px no-repeat,
    rgba(246, 242, 234, .92);
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease);
}
.photo-btn:hover::after,
.photo-btn:focus-visible::after,
.gallery-btn:hover::after,
.gallery-btn:focus-visible::after,
.plan-zoom:hover::after,
.plan-zoom:focus-visible::after { opacity: 1; transform: none; }
.photo-btn:focus-visible,
.gallery-btn:focus-visible,
.plan-zoom:focus-visible { outline-offset: -2px; }

/* Em toque o ícone fica sempre visível, indicando que amplia */
@media (hover: none) {
  .photo-btn::after,
  .gallery-btn::after,
  .plan-zoom::after { opacity: 1; transform: none; width: 34px; height: 34px; background-size: 15px, auto; }
}

/* ---------- Comodidades do bairro ---------- */
.hood-grid {
  display: grid;
  border-top: 1px solid var(--c-line);
}
.hood {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.hood-icon {
  width: 30px;
  height: 30px;
  color: var(--c-accent);
}
.hood h3 {
  font-family: var(--f-display);
  font-size: 1.625rem;
  font-weight: var(--w-display-sm);
  line-height: 1.1;
  color: var(--c-ink);
}
.hood-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  padding: 10px 0;
  border-top: 1px solid var(--c-line);
  font-size: .9375rem;
  color: var(--c-text);
}
.hood-list li:first-child { border-top: 0; }
.hood-dist {
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-style: normal;
  color: var(--c-accent-ink);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

/* ---------- Diálogos (lightbox e tour) ---------- */
.lightbox,
.tour-modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0E0F11;
  color: var(--c-on-dark);
  overflow: hidden;
  --focus: var(--c-accent-light);
}
.lightbox[open],
.tour-modal[open] {
  display: flex;
  flex-direction: column;
  animation: dlg-in .5s var(--ease) both;
}
.lightbox::backdrop,
.tour-modal::backdrop { background: rgba(10, 11, 13, .7); }

.lb-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  min-height: 72px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--c-line-dark);
}
.tm-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.lb-count,
.tm-title {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
  font-variant-numeric: lining-nums tabular-nums;
}
.dlg-close,
.tm-ext {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-on-dark);
}
.dlg-close svg { width: 20px; height: 20px; transition: transform var(--t-2) var(--ease); }
.dlg-close:hover svg { transform: rotate(90deg); }
.tm-actions { display: flex; flex: none; align-items: center; gap: var(--s-3); }
@media (max-width: 639px) {
  .tour-modal .tm-title { display: none; }
  .tour-modal .lb-bar { justify-content: flex-end; }
}
.tm-ext { color: var(--c-on-dark-muted); }
.tm-ext:hover { color: var(--c-on-dark); }

.lb-stage {
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s-2);
  min-height: 0;
  padding: var(--s-3) var(--gutter) var(--s-4);
}
.lb-media {
  width: min(100%, 1200px);
  max-height: calc(100vh - 220px);
  max-height: calc(100svh - 220px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.lb-media .ph,
.lb-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lb-media.is-changing { animation: fade-in .6s var(--ease) both; }
.lb-caption {
  width: min(100%, 1200px);
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-style: normal;
  color: var(--c-on-dark);
}

.lb-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 1px solid var(--c-line-ui-dark);
  border-radius: 50%;
  background: rgba(14, 15, 17, .55);
  color: var(--c-on-dark);
  transition: background-color var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
.lb-nav:hover { background: var(--c-on-dark); color: var(--c-ink); }
.lb-nav svg { width: 18px; height: 18px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }

.tm-frame {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
}
.tm-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tm-empty {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  max-width: 44ch;
  padding: var(--s-4) var(--gutter);
  text-align: center;
}
.tm-empty svg { width: 56px; height: 56px; color: var(--c-accent-light); }
.tm-empty strong {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.1;
  color: var(--c-on-dark);
}
.tm-empty p { font-size: .9375rem; color: var(--c-on-dark-muted); }

@keyframes dlg-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Breakpoints das novas seções ---------- */
@media (min-width: 640px) {
  .photo-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(120px, 15vw, 200px);
    gap: var(--s-2);
  }
  .photo--1 { grid-column: 1 / -1; grid-row: span 2; }
  .photo--2 { grid-column: span 3; grid-row: span 2; }
  .photo--3 { grid-column: span 3; grid-row: span 2; }
  .photo--4 { grid-column: span 2; grid-row: span 2; }
  .photo--5 { grid-column: span 2; grid-row: span 2; }
  .photo--6 { grid-column: span 2; grid-row: span 2; }

  .hood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hood:nth-child(odd) { padding-right: var(--s-4); }
  .hood:nth-child(even) { padding-left: var(--s-4); border-left: 1px solid var(--c-line); }

  .lb-prev { left: var(--s-3); }
  .lb-next { right: var(--s-3); }
  .lb-stage { padding-inline: calc(var(--gutter) + 64px); }
}

@media (min-width: 1024px) {
  .tour-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); }
  .tour-text { grid-column: 1 / span 5; }
  .tour-media { grid-column: 7 / -1; }
  .tour-preview { aspect-ratio: 5 / 4; }
  .tour-badge { width: 152px; height: 152px; }

  .photo-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(110px, 9vw, 150px);
    gap: var(--s-3);
  }
  .photo--1 { grid-column: 1 / 8;  grid-row: 1 / span 4; }
  .photo--2 { grid-column: 8 / 13; grid-row: 1 / span 2; }
  .photo--3 { grid-column: 8 / 13; grid-row: 3 / span 2; }
  .photo--4 { grid-column: 1 / 5;  grid-row: 5 / span 3; }
  .photo--5 { grid-column: 5 / 10; grid-row: 5 / span 3; }
  .photo--6 { grid-column: 10 / 13; grid-row: 5 / span 3; }

  .hood-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hood,
  .hood:nth-child(odd),
  .hood:nth-child(even) { padding: var(--s-5) var(--s-4); border-left: 0; }
  .hood:nth-child(3n+1) { padding-left: 0; }
  .hood:nth-child(3n) { padding-right: 0; }
  .hood:not(:nth-child(3n+1)) { border-left: 1px solid var(--c-line); }
}

/* ==========================================================================
   16. ANIMAÇÕES
   O conteúdo só é escondido quando o JS está ativo (classe .js no <html>).
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--t-3) var(--ease), transform var(--t-4) var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal--fade { transform: none; }
.js .reveal--scale { transform: scale(.98); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Mídia: cortina que abre de baixo + leve "assentamento" da imagem.
   Usa a propriedade individual `scale` para não conflitar com o zoom do hover. */
.js .reveal-media {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--t-4) var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal-media > .ph,
.js .reveal-media > img,
.js .reveal-media > picture,
.js .reveal-media > video {
  scale: 1.12;
  transition: scale 2s var(--ease), transform 1.4s var(--ease);
  transition-delay: var(--d, 0s), 0s;
}
.js .reveal-media.is-visible { clip-path: inset(0 0 0 0); }
.js .reveal-media.is-visible > * { scale: 1; }

/* Entrada do hero ao carregar */
.js .hero-in {
  opacity: 0;
  animation: fade-up 1.4s var(--ease) forwards;
  animation-delay: var(--d, .2s);
}
.js .hero-line > span {
  transform: translate3d(0, 110%, 0);
  animation: line-up 1.6s var(--ease) forwards;
  animation-delay: var(--d, .2s);
}

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes line-up {
  to { transform: none; }
}
@keyframes hero-settle {
  to { transform: scale(1); }
}
@keyframes arrow-loop {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(140%); opacity: 0; }
  46%  { transform: translateX(-140%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes scroll-line {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(300%); }
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: .9; }
  100% { transform: scale(3); opacity: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shake {
  0%, 100% { transform: none; }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
}


/* ==========================================================================
   17. BREAKPOINTS
   ========================================================================== */

/* ---------- 640px: mobile grande / tablet retrato ---------- */
@media (min-width: 640px) {
  :root { --gutter: 40px; }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-stat,
  .hero-stat:nth-child(n+3),
  .hero-stat:nth-child(even) { padding: var(--s-3) var(--s-3) 0; }
  .hero-stat:first-child { padding-left: 0; }
  .hero-stat + .hero-stat { border-left: 1px solid var(--c-line-dark); }

  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: 1fr; padding: var(--s-5) var(--s-4) var(--s-5) 0; }
  .feature-index { grid-row: auto; padding-top: 0; }
  .feature:nth-child(even) { padding-left: var(--s-4); padding-right: 0; border-left: 1px solid var(--c-line); }

  .gallery { column-gap: var(--s-2); }

  .form-card { padding: var(--s-5); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
  .field--full { grid-column: 1 / -1; }

  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .plan-figure { padding: var(--s-5); }
}

/* ---------- 1024px: desktop ---------- */
@media (min-width: 1024px) {
  :root {
    --gutter: 56px;
    --header-h: 96px;
  }

  /* Header */
  .nav-desktop { display: block; }
  .nav-desktop ul {
    display: flex;
    gap: clamp(12px, 1.9vw, 34px);
  }
  .nav-desktop a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    opacity: .74;
    transition: opacity var(--t-1) var(--ease);
  }
  .nav-desktop a::after {
    content: "";
    position: absolute;
    left: 0;
    right: .24em;
    bottom: 11px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--t-2) var(--ease);
  }
  .nav-desktop a:hover,
  .nav-desktop a[aria-current="true"] { opacity: 1; }
  .nav-desktop a:hover::after,
  .nav-desktop a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

  .header-cta {
    flex: none;
    min-height: 46px;
    padding: 0 24px;
    font-size: var(--fs-micro);
  }
  .site-header:not(.is-scrolled) .header-cta {
    background: transparent;
    border-color: rgba(243, 238, 228, .32);
    color: var(--c-on-dark);
  }
  .site-header:not(.is-scrolled) .header-cta::before { background: var(--c-on-dark); }
  .site-header:not(.is-scrolled) .header-cta:hover { color: var(--c-ink); border-color: var(--c-on-dark); }

  .site-header.is-scrolled { height: 76px; }
  .logo-name { font-size: 1.4375rem; }
  .logo-mark { width: 34px; height: 34px; }

  .menu-toggle,
  .mobile-menu { display: none; }

  /* Hero */
  .hero { padding-bottom: var(--s-5); }
  .hero-title { padding-top: var(--s-7); }
  .hero-line > span { white-space: nowrap; }
  .hero-foot { margin-top: var(--s-5); }
  .hero-stats { margin-top: var(--s-6); }
  .hero-stat,
  .hero-stat:nth-child(n+3),
  .hero-stat:nth-child(even) { padding: var(--s-3) var(--s-4) 0; }
  .hero-stat:first-child { padding-left: 0; }
  .hero-facade { right: 3%; width: 54%; opacity: .55; }
  .scroll-indicator { display: flex; }

  /* Cabeçalho de seção dividido: título à esquerda, texto à direita */
  .section-head--split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-4);
    align-items: end;
  }
  .section-head--split .eyebrow { grid-column: 1 / -1; justify-self: start; }
  .section-head--split .display { grid-column: 1 / span 7; }
  .section-head--split .lead { grid-column: 9 / -1; padding-bottom: .6em; }
  .section-head--split .link-line { grid-column: 9 / -1; justify-self: start; margin-top: -0.3em; }

  /* Sobre */
  .about-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-4);
    align-items: center;
  }
  .about-text { grid-column: 1 / span 5; }
  .about-media { grid-column: 7 / -1; padding: 0 0 var(--s-7) var(--s-7); }
  .about-media .media--detail {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    aspect-ratio: 3 / 4;
    outline: 12px solid var(--c-bg);
  }

  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feature,
  .feature:nth-child(even) { padding: var(--s-5) var(--s-4); border-left: 0; }
  .feature:first-child { padding-left: 0; }
  .feature + .feature { border-left: 1px solid var(--c-line); }

  /* Tipologias: ritmo em degrau */
  .units {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s-4);
    align-items: start;
  }
  .unit:nth-child(2) { margin-top: var(--s-7); }
  .unit:nth-child(3) { margin-top: calc(var(--s-7) / 2); }

  /* Plantas */
  .plans-tabs { display: flex; gap: var(--s-5); }
  .tab { padding-inline: 0; }
  .plan {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-4);
    align-items: start;
  }
  .plan-figure { grid-column: 1 / span 7; aspect-ratio: 4 / 3.3; padding: var(--s-6); }
  .plan-info { grid-column: 9 / -1; padding-top: var(--s-3); }
  .plan-info .btn { justify-self: start; }

  /* Galeria assimétrica em 12 colunas */
  .gallery {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-3);
    row-gap: var(--s-5);
    align-items: start;
  }
  .gallery-item:nth-child(1) { grid-column: 1 / 8; }
  .gallery-item:nth-child(1) .media { aspect-ratio: 16 / 11; }
  .gallery-item:nth-child(2) { grid-column: 9 / 13; margin-top: var(--s-8); }
  .gallery-item:nth-child(2) .media { aspect-ratio: 4 / 5; }
  .gallery-item:nth-child(3) { grid-column: 1 / 5; }
  .gallery-item:nth-child(3) .media { aspect-ratio: 3 / 4; }
  .gallery-item:nth-child(4) { grid-column: 5 / 9; margin-top: var(--s-7); }
  .gallery-item:nth-child(4) .media { aspect-ratio: 1 / 1; }
  .gallery-item:nth-child(5) { grid-column: 9 / 13; margin-top: var(--s-4); }
  .gallery-item:nth-child(5) .media { aspect-ratio: 3 / 4; }
  .gallery-item:nth-child(6) { grid-column: 3 / 11; }
  .gallery-item:nth-child(6) .media { aspect-ratio: 21 / 9; }

  /* Localização */
  .location-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-4);
    align-items: center;
  }
  .location-grid > .map { grid-column: 1 / span 7; aspect-ratio: 4 / 3.6; }
  .location-grid > div { grid-column: 9 / -1; }

  /* Contato */
  .contact-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-4);
    align-items: start;
  }
  .contact-intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .form-card { grid-column: 7 / -1; padding: var(--s-5); }

  /* Footer */
  .footer-grid { grid-template-columns: 5fr 2fr 3fr 2fr; }
  .footer-brand { grid-column: auto; }
}

/* ---------- 1200px: desktop pleno ---------- */
@media (min-width: 1280px) {
  .header-cta { display: inline-flex; }
}

@media (min-width: 1200px) {
  .hero-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--s-6);
  }
  .hero-actions { justify-content: end; }
  .btn { white-space: nowrap; }
  .form-card { padding: var(--s-6); }
}

/* ---------- 1440px: desktop largo ---------- */
@media (min-width: 1440px) {
  :root {
    --gutter: 72px;
    --container: 1440px;
  }
}

/* Toque: sem zoom preso após o toque */
@media (hover: none) {
  .unit:hover .media .ph,
  .unit:hover .media img,
  .gallery-item:hover .media .ph,
  .gallery-item:hover .media img { transform: none; }
  .unit:active .media .ph,
  .unit:active .media img { transform: scale(1.02); }
  .btn:hover .arrow { animation: none; }
}


/* ==========================================================================
   18. MOVIMENTO REDUZIDO E IMPRESSÃO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal,
  .js .reveal-media,
  .js .hero-in,
  .js .hero-line > span {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .js .reveal-media > * { scale: 1; }

  .scroll-indicator-line::after,
  .map-pin-dot::after { animation: none; }

  .hero-media .ph,
  .hero-media img,
  .hero-media video { transform: none; }

  .mobile-nav a { transform: none; }
  .lightbox[open], .tour-modal[open] { animation: none; }
}

@media print {
  .site-header, .mobile-menu, .scroll-indicator, .carousel-controls, .to-top, .footer-wordmark { display: none !important; }
  .js .reveal, .js .reveal-media, .js .hero-in, .js .hero-line > span {
    opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important;
  }
  .js .reveal-media > * { scale: 1 !important; }
  .hero { min-height: auto; padding: var(--s-5) 0; }
  .section { padding-block: var(--s-5); break-inside: avoid; }
}

/* ==========================================================================
   319 PADRE JOÃO MANUEL — ajustes específicos da marca
   ========================================================================== */

/* Logo em imagem (substitui o placeholder tipográfico do modelo) */
.logo-img { height: 44px; width: auto; display: block; }
.site-header .logo-img { height: 56px; }
.site-footer .logo-img { height: 48px; }
@media (min-width: 1024px) { .site-header .logo-img { height: 72px; } }

/* O logo branco é invisível sobre o header claro (pós-scroll): volta ao normal
   porque o header do 319 permanece escuro — ver regra abaixo */

/* Hero mais alto e âncora de leitura ao pé */
.hero--319 .hero-sub { color: rgba(243, 238, 228, .85); }

/* Plantas sobre fundo claro, com a imagem bem enquadrada */
.plan-figure--img { background: #fff; padding: clamp(16px, 3vw, 40px); }
.plan-figure--img img { width: 100%; height: 100%; object-fit: contain; }

/* Selo "a partir de" no hero/preço */
.price-tag {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.price-tag small {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
}
.price-tag b {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 300;
  color: var(--c-on-dark);
  font-variant-numeric: lining-nums;
}

/* Faixa de assinaturas (arquitetos) */
.signatures {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.sig {
  display: grid;
  gap: 6px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}
.sig dt {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--c-ink);
}
.sig .sig-role {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.sig p { font-size: .9375rem; color: var(--c-muted); max-width: 46ch; margin-top: 4px; }
@media (min-width: 768px) {
  .signatures { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
}
@media (min-width: 1024px) {
  .signatures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
  .sig { padding-top: var(--s-4); }
}

/* Citação destacada (depoimento dos arquitetos / manifesto) */
.pullquote {
  font-family: var(--f-display);
  font-weight: 300;
  font-style: normal;
  font-size: var(--fs-quote);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--c-on-dark);
  max-width: 24ch;
}
.section--dark .pullquote em { color: var(--c-accent-light); font-style: normal; }

/* Header permanece escuro ao rolar (marca dark + logo branco) */
.site-header.hdr-dark.is-scrolled {
  background: rgba(18, 19, 22, .9);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  color: var(--c-on-dark);
  box-shadow: 0 1px 0 var(--c-line-dark);
}
.site-header.hdr-dark.is-scrolled .header-cta {
  background: transparent;
  border-color: var(--c-line-ui-dark);
  color: var(--c-on-dark);
}
.site-header.hdr-dark.is-scrolled .header-cta::before { background: var(--c-on-dark); }
.site-header.hdr-dark.is-scrolled .header-cta:hover { color: var(--c-ink); border-color: var(--c-on-dark); }
.site-header.hdr-dark { --focus: var(--c-accent-light); }

/* --- Correções de auditoria (319) --- */
/* Parágrafo secundário em seção escura: usar tom claro (contraste AA) */
.section--dark .about-text p:not(.lead):not(.eyebrow) { color: var(--c-on-dark-muted); }

/* Área de toque do logo (imagem estreita) sem deslocar o layout */
.logo { padding-inline: 6px; margin-inline: -6px; }

/* Lista de pontos de interesse não estoura em telas estreitas */
.poi-list li { min-width: 0; }
.poi-name { min-width: 0; overflow-wrap: anywhere; }
.poi-dist { flex: none; }

/* Detalhes de planta não estouram em telas muito estreitas */
@media (max-width: 400px) {
  .plan-rooms { grid-template-columns: 1fr; }
  .plan-rooms li:nth-child(even) { padding-left: 0; border-left: 0; }
  .plan-rooms li:nth-child(odd) { padding-right: 0; }
}

/* ==========================================================================
   319 — Seção de vídeo (YouTube sob demanda)
   ========================================================================== */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-ink);
  cursor: pointer;
}
.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.video-embed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(12,13,15,.35) 0%, rgba(12,13,15,.55) 100%);
  transition: background-color var(--t-2) var(--ease);
}
.video-embed:hover .video-poster { transform: scale(1.03); }

.video-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  color: var(--c-on-dark);
}
.video-play-ring {
  display: grid;
  place-items: center;
  width: clamp(68px, 9vw, 92px);
  height: clamp(68px, 9vw, 92px);
  border: 1px solid rgba(243, 238, 228, .6);
  border-radius: 50%;
  background: rgba(22, 23, 26, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform var(--t-2) var(--ease), background-color var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
.video-play-ring svg { width: 30px; height: 30px; margin-left: 5px; }
.video-embed:hover .video-play-ring,
.video-play:focus-visible .video-play-ring {
  background: var(--c-on-dark);
  color: var(--c-ink);
  transform: scale(1.06);
}
.video-play-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.video-play:focus-visible { outline-offset: -4px; }

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed.is-playing { cursor: default; }
.video-embed.is-playing::after,
.video-embed.is-playing .video-play,
.video-embed.is-playing .video-poster { display: none; }

/* Hero: véu mais claro, mantendo legibilidade do texto sobre a imagem */
.hero--319::before {
  background:
    linear-gradient(180deg, rgba(12, 13, 15, .3) 0%, rgba(12, 13, 15, .04) 34%),
    linear-gradient(0deg, rgba(12, 13, 15, .48) 0%, rgba(12, 13, 15, .22) 50%, rgba(12, 13, 15, .04) 80%),
    rgba(12, 13, 15, .04);
}

/* ==========================================================================
   319 — Profissionais / Assinaturas com foto
   ========================================================================== */
.pro-grid {
  display: grid;
  gap: var(--s-5);
}
.pro {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}
.pro-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-ink);
  margin-bottom: var(--s-1);
}
.pro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.02);
  transition: transform 1.4s var(--ease), filter var(--t-3) var(--ease);
}
.pro:hover .pro-photo img { transform: scale(1.04); filter: grayscale(0%); }
.pro-name {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.3rem + .7vw, 1.875rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--c-ink);
}
.pro-role {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  margin-top: -2px;
}
.pro-text {
  margin-top: 6px;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--c-text);
  max-width: 42ch;
}

@media (min-width: 680px) {
  .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
}
@media (min-width: 1024px) {
  .pro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-4); }
}

/* Logo da incorporadora na seção "A Incorporadora" */
.inc-logo {
  height: clamp(40px, 5vw, 56px);
  width: auto;
  margin-bottom: var(--s-4);
}

/* ---------- Botão flutuante do WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--c-success);
  color: var(--c-on-dark);
  box-shadow: 0 10px 28px rgba(22, 23, 26, .3);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.whatsapp-float svg { width: 26px; height: 26px; }
.whatsapp-float:hover,
.whatsapp-float:focus-visible { transform: scale(1.07); box-shadow: 0 14px 34px rgba(22, 23, 26, .36); }
.whatsapp-float:focus-visible { outline-offset: 3px; }
@media (min-width: 1024px) {
  .whatsapp-float { right: 28px; bottom: 28px; width: 58px; height: 58px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
}

/* Rodapé Marquise */
.footer-brand { display: flex; justify-content: center; padding-bottom: var(--s-5); }
.footer-logo img { display: block; height: 56px; width: auto; }
.site-footer .footer-grid { grid-template-columns: 1fr; text-align: center; }
.site-footer .footer-col .social { justify-content: center; }
@media (min-width: 768px) {
  .site-footer .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
  .site-footer .footer-col .social { justify-content: flex-start; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .footer-brand { grid-column: auto; }
  .footer-logo img { height: 64px; }
}

/* O Projeto — título proporcional à coluna de texto */
.about-text #projeto-title {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.875rem);
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
  margin-bottom: var(--s-3);
}

/* A Arte — obra vertical exibida inteira, sem corte */
.about-media .media--art {
  aspect-ratio: 1144 / 2480;
  width: min(100%, calc(82vh * 1144 / 2480));
  margin-inline: auto;
  background: transparent;
}
.media--art > img { object-fit: contain; }
@media (min-width: 1024px) {
  #arte .about-media { padding: 0; }
}

/* Galeria — botão "Ver mais" */
.gallery-more { display: flex; justify-content: center; margin-top: var(--s-5); }
.photo-extra[hidden] { display: none; }

/* Implantação do condomínio — planta larga em largura total + legenda numerada */
.plan--wide .plan-figure { aspect-ratio: auto; padding: clamp(12px, 2vw, 32px); }
.plan--wide .plan-figure img { height: auto; }
.plan-area--text { font-size: clamp(2.5rem, 2rem + 2.4vw, 4rem); line-height: 1; }
.plan-legend {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--c-line);
}
.plan-legend li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: .875rem;
  color: var(--c-ink);
}
.plan-legend b {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-size: .75rem;
  font-weight: 500;
  font-variant-numeric: lining-nums;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .plan-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
}
@media (min-width: 1024px) {
  .plan--wide .plan-figure { grid-column: 1 / span 8; aspect-ratio: auto; padding: var(--s-4); position: sticky; top: calc(var(--header-h) + var(--s-3)); align-self: start; }
  .plan--wide .plan-info { grid-column: 9 / -1; padding-top: 0; }
  .plan--wide .plan-legend { grid-template-columns: 1fr; }
  .plan--wide .plan-legend li { padding: 9px 0; }
}

/* Plantas — detalhes técnicos recolhíveis */
.plan-details { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.plan-details summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; cursor: pointer; list-style: none;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--c-ink);
}
.plan-details summary::-webkit-details-marker { display: none; }
.plan-details summary::after { content: "+"; font-size: 1.25rem; font-weight: 300; line-height: 1; }
.plan-details[open] summary::after { content: "–"; }
.plan-details ul { display: grid; gap: 8px; padding: 4px 0 18px; }
.plan-details li { position: relative; padding-left: var(--s-3); font-size: .875rem; color: var(--c-text); }
.plan-details li::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--c-accent); }

/* Localização e implantação — listas recolhíveis só no mobile */
.mobile-details summary { display: none; }
@media (max-width: 639px) {
  .mobile-details { border-bottom: 1px solid var(--c-line); }
  .mobile-details summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 52px; cursor: pointer; list-style: none;
    font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label);
    text-transform: uppercase; color: var(--c-ink);
  }
  .mobile-details summary::-webkit-details-marker { display: none; }
  .mobile-details summary::after { content: "+"; font-size: 1.25rem; font-weight: 300; line-height: 1; }
  .mobile-details[open] summary::after { content: "–"; }
  .mobile-details[open] summary { border-bottom: 1px solid var(--c-line); }
  .mobile-details .poi-list li:last-child,
  .mobile-details .plan-legend li:last-child { border-bottom: 0; }
  .plan-info .mobile-details { border-top: 1px solid var(--c-line); }
  .mobile-details .plan-legend { border-top: 0; }
  /* Itens só ficam visíveis ao abrir: dispensa o reveal */
  .js .mobile-details .reveal { opacity: 1; transform: none; }
}

/* Duplex — dois pavimentos na mesma aba */
.plan-pair { display: grid; gap: var(--s-2); }
.plan-pair-title {
  padding: 12px 16px;
  border-left: 2px solid var(--c-accent);
  background: var(--c-surface);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--c-text);
}
.plan-pair-title strong { color: var(--c-ink); font-weight: 600; }
.plan-pair .plan-figure { aspect-ratio: auto; padding: clamp(12px, 2vw, 28px); padding-bottom: clamp(32px, 4vw, 44px); }
.plan-pair .plan-figure img { height: auto; }
@media (min-width: 1024px) {
  .plan-pair { grid-column: 1 / span 7; }
  .plan-pair .plan-figure { grid-column: auto; aspect-ratio: auto; padding: var(--s-4) var(--s-4) 44px; }
}

/* Abas de plantas: 6 opções cabem em duas linhas quando necessário */
@media (min-width: 1024px) { .plans-tabs { flex-wrap: wrap; gap: 0 var(--s-4); } }

/* Mapa Google embutido */
.map-open {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: background var(--t-2) var(--ease);
}
.map-open:hover, .map-open:focus-visible { background: var(--c-accent-ink); }

/* Hero — foco no prédio em telas verticais */
.hero--319 .hero-media img { object-position: 66% 50%; }

/* Hero — entrada e deslize lateral contínuo da foto (vai e volta) */
.hero--319 .hero-media img {
  transform-origin: 66% 50%;
  will-change: transform;
  animation:
    hero-319-in 2.2s var(--ease) forwards,
    hero-pan 12s cubic-bezier(.45, 0, .55, 1) 2.2s infinite alternate;
}
/* A escala de 1.15 garante sobra nas laterais para o deslize sem bordas vazias */
@keyframes hero-319-in {
  from { transform: scale(1.25) translate3d(4%, 0, 0); }
  to   { transform: scale(1.15) translate3d(4%, 0, 0); }
}
@keyframes hero-pan {
  from { transform: scale(1.15) translate3d(4%, 0, 0); }
  to   { transform: scale(1.15) translate3d(-4%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--319 .hero-media img { animation: none; transform: none; }
}

/* Hero — véu mais forte para garantir leitura sobre a foto nítida e clara */
.hero--319::before {
  background:
    linear-gradient(180deg, rgba(12, 13, 15, .72) 0%, rgba(12, 13, 15, .15) 24%),
    linear-gradient(90deg, rgba(12, 13, 15, .7) 0%, rgba(12, 13, 15, .42) 48%, rgba(12, 13, 15, .08) 80%),
    linear-gradient(0deg, rgba(12, 13, 15, .96) 0%, rgba(12, 13, 15, .72) 42%, rgba(12, 13, 15, .2) 72%),
    rgba(12, 13, 15, .2);
}
.hero--319 .hero-title,
.hero--319 .hero-sub,
.hero--319 .hero-meta,
.hero--319 .eyebrow,
.hero--319 .hero-stat { text-shadow: 0 2px 22px rgba(0, 0, 0, .5); }
.hero--319 .hero-sub { color: rgba(243, 238, 228, .94); }
.hero--319 .hero-meta,
.hero--319 .hero-stat dt { color: rgba(243, 238, 228, .88); }

/* Hero — degradê vertical: topo nítido, escurecendo até o fim da seção */
.hero--319::before {
  background: linear-gradient(
    180deg,
    rgba(12, 13, 15, .5) 0%,
    rgba(12, 13, 15, 0) 16%,
    rgba(12, 13, 15, 0) 34%,
    rgba(12, 13, 15, .5) 56%,
    rgba(12, 13, 15, .86) 78%,
    rgba(12, 13, 15, .97) 100%
  );
}

/* Botão flutuante do WhatsApp — ícone em imagem (já verde, sem fundo) */
.whatsapp-float { background: none; box-shadow: none; border-radius: 0; width: 56px; height: 56px; }
.whatsapp-float img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 14px rgba(22, 23, 26, .35)); }
.whatsapp-float:hover,
.whatsapp-float:focus-visible { box-shadow: none; }
@media (min-width: 1024px) { .whatsapp-float { width: 60px; height: 60px; } }

/* Hero — somente mobile: fundo escuro para facilitar a leitura */
@media (max-width: 767px) {
  .hero--319::before {
    background:
      linear-gradient(180deg, rgba(12, 13, 15, .55) 0%, rgba(12, 13, 15, .15) 22%),
      linear-gradient(0deg, rgba(12, 13, 15, .96) 0%, rgba(12, 13, 15, .8) 50%, rgba(12, 13, 15, .55) 100%);
  }
}

/* Galerias do imóvel e do condomínio — no mobile viram carrossel com deslize lateral */
.photo-dots { display: none; }
.section--dark .photo-dots .carousel-dot::before { background: var(--c-on-dark-muted); }
.section--dark .photo-dots .carousel-dot[aria-current="true"]::before { background: var(--c-on-dark); }
@media (max-width: 639px) {
  ul.photo-grid,
  .gallery {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .photo-grid::-webkit-scrollbar,
  .gallery::-webkit-scrollbar { display: none; }
  .photo-grid .photo {
    flex: 0 0 86%;
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
  }
  .gallery .gallery-item { flex: 0 0 86%; scroll-snap-align: start; }
  .gallery .gallery-item--wide .media { aspect-ratio: 4 / 5; }
  /* Fotos fora da tela na lateral não disparam o reveal: exibe todas */
  .js .photo-grid .reveal,
  .js .gallery .reveal { opacity: 1; transform: none; }
  .js .photo-grid .reveal-media,
  .js .gallery .reveal-media { clip-path: none; }
  .js .photo-grid .reveal-media > *,
  .js .gallery .reveal-media > * { scale: 1; }
  .js .photo-dots { display: flex; justify-content: center; margin-top: var(--s-1); }
}

/* Lightbox de imagem única (plantas): sem setas nem contador */
.lightbox.is-single .lb-nav,
.lightbox.is-single .lb-count { display: none; }

/* Plantas no celular (em pé ou deitado): imagem em 100% da tela,
   com "Fechar" e legenda sobrepostos à imagem */
@media (max-width: 639px), (max-height: 540px) and (pointer: coarse) {
  .lightbox.is-single .lb-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    justify-content: flex-end;
    min-height: 56px;
    border: 0;
    background: linear-gradient(180deg, rgba(14, 15, 17, .85) 0%, rgba(14, 15, 17, 0) 100%);
  }
  .lightbox.is-single .lb-stage {
    position: relative;
    display: block;
    padding: 0;
  }
  .lightbox.is-single .lb-media {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
  }
  .lightbox.is-single .lb-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: var(--s-3) var(--gutter) 12px;
    background: linear-gradient(0deg, rgba(14, 15, 17, .85) 0%, rgba(14, 15, 17, 0) 100%);
    font-size: .875rem;
    pointer-events: none;
  }
}

/* Popup de captura de lead */
.lead-modal {
  width: min(560px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  overflow: auto;
  background: transparent;
  color: var(--c-text);
}
.lead-modal[open] { animation: dlg-in .5s var(--ease) both; }
.lead-modal::backdrop { background: rgba(10, 11, 13, .74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lm-card { padding: var(--s-6) var(--s-4) var(--s-4); }
.lm-close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--c-ink);
}
.lm-close svg { width: 20px; height: 20px; transition: transform var(--t-2) var(--ease); }
.lm-close:hover svg { transform: rotate(90deg); }
.lm-head { display: grid; gap: var(--s-1); margin-bottom: var(--s-3); }
.lm-head h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.05; }
.lm-head p:last-child { font-size: .9375rem; color: var(--c-muted); }
@media (min-width: 640px) { .lm-card { padding: var(--s-6) var(--s-5) var(--s-5); } }
@media (prefers-reduced-motion: reduce) { .lead-modal[open] { animation: none; } }

/* Ficha técnica — botão abaixo da implantação e popup */
.ficha-cta { display: flex; justify-content: center; margin-top: var(--s-5); }
html:not(.js) .ficha-cta { display: none; }
.ficha-modal { width: min(680px, calc(100% - 2 * var(--gutter))); }
.ficha-list { border-top: 1px solid var(--c-line); }
.ficha-list > div {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: .875rem;
}
.ficha-list dt {
  font-size: .6875rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.ficha-list dd { margin: 0; color: var(--c-ink); }
.ficha-legal { margin-top: var(--s-3); font-size: .75rem; line-height: 1.6; color: var(--c-muted); }
@media (min-width: 640px) {
  .ficha-list > div { grid-template-columns: 11rem 1fr; gap: var(--s-2); align-items: baseline; }
}

/* ==========================================================================
   FONTE FIEL AO BOOK — Montserrat (títulos em caixa alta, leves e espaçados)
   ========================================================================== */
:root {
  --fs-hero: clamp(2.125rem, 1.05rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(1.5rem, 1.05rem + 1.7vw, 2.625rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .55vw, 1.625rem);
  --fs-quote: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
  --w-display: 300;
  --w-display-sm: 400;
}
.display,
.hero-title {
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.22;
  font-weight: 300;
}
.hero-title { line-height: 1.08; letter-spacing: .05em; }
.display em,
.hero-title em {
  font-style: normal;
  font-weight: 500;
  letter-spacing: .06em;
}
.pullquote, .pullquote em { font-style: italic; }
.plan-area { letter-spacing: 0; font-weight: 300; }
.plan-area--text { font-size: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); text-transform: uppercase; letter-spacing: .06em; }