/* ==========================================================================
   Recanto dos Lagos — Extrema/MG
   Paleta e tipografia derivadas do logotipo do empreendimento.
   ========================================================================== */

/* --------------------------------------------------------- 1. Tokens ---- */
:root {
  /* verde-floresta — cor dominante do logotipo (#002B10 amostrado do vetor) */
  --verde-950: #001A09;
  --verde-900: #002B10;
  --verde-800: #0B3A1B;
  --verde-700: #1C5230;
  --verde-100: #E4EDE4;

  /* âmbar — montanhas do logotipo */
  --ambar-800: #6E4F0C;
  --ambar-700: #8A6410;
  --ambar-600: #B98C1C;
  --ambar-500: #E4B535;
  --ambar-400: #F0CC6A;
  --ambar-100: #F7EBCB;

  /* azul-lago — espelho d'água do logotipo */
  --lago-700: #0B6A85;
  --lago-500: #0E7E9E;
  --lago-100: #DCEDF3;

  /* neutros quentes */
  --creme: #FBF8F0;
  --creme-100: #F3EEE2;
  --borda: #E3DCCB;
  --cinza-600: #5B5F52;
  --cinza-900: #14180F;

  /* papéis semânticos */
  --bg-canvas: var(--creme);
  --bg-superficie: var(--creme-100);
  --bg-escuro: var(--verde-900);
  --texto: var(--cinza-900);
  --texto-suave: var(--cinza-600);
  --texto-claro: var(--creme);
  --texto-claro-suave: #C9D3C4;
  --acento-texto: var(--ambar-700);       /* âmbar legível sobre creme  5.1:1 */
  --acento-texto-escuro: var(--ambar-400); /* âmbar sobre verde        10.0:1 */
  --acento-fill: var(--ambar-500);
  --foco: var(--ambar-700);
  --foco-escuro: var(--ambar-400);

  /* tipografia */
  --fonte-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --fonte-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-script: "Sacramento", "Brush Script MT", cursive;

  --t-hero: clamp(2.1rem, 1.1rem + 4.1vw, 4rem);
  --t-h2: clamp(1.55rem, 1.1rem + 1.9vw, 2.6rem);
  --t-h3: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
  --t-destaque: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);
  --t-lg: 1.0625rem;
  --t-base: 1rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-eyebrow: 0.75rem;

  /* espaço, forma, movimento */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --largura: 1200px;
  --largura-texto: 62ch;
  --secao-y: clamp(3.5rem, 7vw, 7rem);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 240ms;
  --header-h: 90px;
}

/* ----------------------------------------------------------- 2. Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--texto);
  font-family: var(--fonte-ui);
  font-size: var(--t-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { margin: 0; line-height: 1.2; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 6px;
}
.secao--escura :where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--foco-escuro);
}

::selection { background: var(--ambar-500); color: var(--verde-900); }

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

.pular-para-conteudo {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%);
  z-index: 200; background: var(--verde-900); color: var(--creme);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; text-decoration: none; transition: transform var(--dur) var(--ease);
}
.pular-para-conteudo:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------- 3. Layout ---- */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--largo { max-width: 1440px; }

.secao { padding-block: var(--secao-y); position: relative; }
.secao--escura { background: var(--bg-escuro); color: var(--texto-claro); }
.secao--suave { background: var(--bg-superficie); }
.secao--suave .eyebrow--centro {width: 100%; justify-content: center; gap: .5rem; }
.secao--compacta { padding-block: clamp(2.5rem, 5vw, 4rem); }

.secao--escura h2, .secao--escura h3 { color: var(--texto-claro); }
.secao--escura p { color: var(--texto-claro-suave); }

/* onda: curva da colina do logotipo, usada na transição foto → superfície */
.onda { display: block; width: 100%; height: clamp(28px, 4vw, 56px); }
.onda path { fill: currentColor; }



/* ------------------------------------------------- 4. Cabeçalho de seção */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--fonte-display);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: .9rem;
}
.eyebrow::before, .eyebrow::after {
  content: ""; height: 1px; background: currentColor; flex: 0 0 28px;
}
.eyebrow--centro { justify-content: center; }
.eyebrow--centro::before, .eyebrow--centro::after { flex: 0 1 64px; }
.secao--escura .eyebrow { color: var(--acento-texto-escuro); }

.titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: .012em;
  text-transform: uppercase;
  line-height: 1.18;
  color: var(--verde-900);
  max-width: 20ch;
}
.titulo--centro { margin-inline: auto; text-align: center; max-width: 30ch; }
.secao--escura .titulo { color: var(--creme); }

.subtitulo {
  margin-top: 1rem;
  max-width: var(--largura-texto);
  font-size: var(--t-lg);
  color: var(--texto-suave);
}
.subtitulo--centro { margin-inline: auto; text-align: center; }
.secao--escura .subtitulo { color: var(--texto-claro-suave); }

.cabecalho-secao { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.cabecalho-secao--centro { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* folha: ornamento herdado do material da marca */
.folha { display: block; width: 40px; height: 40px; color: var(--ambar-600); margin: 1.1rem auto 0; }

/* ------------------------------------------------------------ 5. Botões */
.btn {
  --btn-bg: var(--verde-900);
  --btn-fg: var(--creme);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primario { --btn-bg: var(--verde-900); --btn-fg: var(--ambar-400); }
.btn--primario:hover { --btn-bg: var(--verde-800); }

/* âmbar só preenche botão sobre superfície escura — sobre creme falha 1,8:1 */
.secao--escura .btn--primario,
.btn--ambar { --btn-bg: var(--ambar-500); --btn-fg: var(--verde-900); }
.secao--escura .btn--primario:hover,
.btn--ambar:hover { --btn-bg: var(--ambar-400); }

.btn--contorno {
  --btn-bg: transparent; --btn-fg: var(--verde-900);
  border-color: var(--verde-900);
}
.btn--contorno:hover { --btn-bg: var(--verde-900); --btn-fg: var(--creme); }
.secao--escura .btn--contorno,
.sobre-foto .btn--contorno,
.cta-final .btn--contorno { --btn-fg: var(--creme); border-color: rgba(251, 248, 240, .55); }
.secao--escura .btn--contorno:hover,
.sobre-foto .btn--contorno:hover,
.cta-final .btn--contorno:hover { --btn-bg: rgba(251, 248, 240, .14); border-color: var(--creme); }

.btn--zap { --btn-bg: #1E7A45; --btn-fg: #fff; }
.btn--zap:hover { --btn-bg: #196638; }

.btn--bloco { width: 100%; }
.btn svg { width: 20px; height: 20px; flex: none; }

.acoes { display: flex; flex-wrap: wrap; gap: .85rem; }
.acoes--centro { justify-content: center; }

/* botão circular de avanço */
.btn-circulo {
  position: relative;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: var(--ambar-500); color: var(--verde-900);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn-circulo::after { content: ""; position: absolute; inset: -6px; } /* alvo de 58px */
.btn-circulo:hover { transform: scale(1.08); background: var(--ambar-400); }
.btn-circulo svg { width: 20px; height: 20px; }

/* --------------------------------------- 6. Selo, pílula e ícone-medalha */
.selo {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--ambar-500);
  border-radius: var(--r-full);
  background: rgba(0, 43, 16, .55);
  backdrop-filter: blur(6px);
  color: var(--ambar-400);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}
.selo__ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ambar-500); flex: none;
}

.pilula {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .95rem;
  border: 1px solid var(--borda); border-radius: var(--r-full);
  background: var(--creme);
  font-size: var(--t-xs); font-weight: 600; color: var(--verde-700);
}

/* medalha: círculo verde com ícone âmbar — 8,1:1. Padrão da marca. */
.medalha {
  display: grid; place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--verde-900);
  color: var(--ambar-500);
  flex: none;
  margin-bottom: 12px;
}
.medalha svg { width: 28px; height: 28px; }
.secao--escura .medalha { background: rgba(251, 248, 240, .08); border: 1px solid rgba(228, 181, 53, .35); }
.medalha--pequena { width: 46px; height: 46px; }
.medalha--pequena svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------ 7. Header */
.header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(251, 248, 240, 0);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 26, 9, .62), rgba(0, 26, 9, 0));
  transition: opacity var(--dur) var(--ease);
}
.header.is-fixo {
  background: rgba(251, 248, 240, .93);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--borda);
}
.header.is-fixo::after { opacity: 0; }

.header__interno {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter);
}
.header__marca { display: flex; align-items: center; text-decoration: none; }
.header__marca img { width: 90px; height: auto; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  position: relative;
  padding: .55rem .8rem;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--creme); text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease);
}
.header.is-fixo .nav a { color: var(--verde-900); }
.nav a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .28rem;
  height: 2px; background: var(--ambar-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }

.header__acao { display: inline-flex; }
.header .btn { min-height: 44px; padding: .6rem 1.15rem; }
.header:not(.is-fixo) .btn--contorno { color: var(--creme); border-color: rgba(251, 248, 240, .6); }

.menu-botao {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(251, 248, 240, .5); border-radius: var(--r-sm);
  background: transparent; color: var(--creme); cursor: pointer;
}
.header.is-fixo .menu-botao { color: var(--verde-900); border-color: var(--borda); }
.menu-botao svg { width: 22px; height: 22px; }

.gaveta {
  position: fixed; inset: 0; z-index: 110;
  display: none; flex-direction: column;
  padding: 1.25rem var(--gutter) 2rem;
  background: var(--verde-900); color: var(--creme);
  overflow-y: auto;
}
.gaveta[open], .gaveta.is-aberta { display: flex; }
.gaveta__topo { display: flex; align-items: center; justify-content: space-between; min-height: 46px; }
.gaveta__topo img { height: 44px; }
.gaveta__fechar {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(251, 248, 240, .4);
  border-radius: var(--r-sm); color: var(--creme); cursor: pointer;
}
.gaveta__fechar svg { width: 22px; height: 22px; }
.gaveta nav { margin-top: 2rem; display: grid; gap: .25rem; }
.gaveta nav a {
  padding: .95rem .25rem;
  font-family: var(--fonte-display); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--creme);
  border-bottom: 1px solid rgba(251, 248, 240, .14);
}
.gaveta .acoes { margin-top: auto; padding-top: 2rem; flex-direction: column; }

/* -------------------------------------------------------------- 8. Hero */
.hero {
  position: relative;
  min-height: min(100svh, 860px);
  display: flex; align-items: flex-end;
  padding-block: calc(var(--header-h) + 3rem) 0;
  color: var(--creme);
  isolation: isolate;
}
.hero__fundo { position: absolute; inset: 0; z-index: -2; }
.hero__fundo img, .hero__fundo video { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 26, 9, .92) 0%, rgba(0, 26, 9, .62) 34%, rgba(0, 26, 9, .12) 68%, rgba(0, 26, 9, .28) 100%);
}
.hero__conteudo { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.hero__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-hero);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .015em; line-height: 1.14;
  margin-top: 1.4rem;
  text-shadow: 0 2px 18px rgba(0, 26, 9, .45);
}
.hero__slogan {
  font-family: var(--fonte-script);
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1;
  color: var(--ambar-400);
  margin-top: .85rem;
}
.hero__texto {
  margin-top: 1.35rem;
  max-width: 40ch;
  font-size: var(--t-lg);
  color: #E7EBE2;
}
.hero .acoes { margin-top: 2rem; }

/* faixa de dados sobreposta ao hero */
.faixa-dados {
  position: relative;
  margin-top: calc(clamp(2.5rem, 5vw, 4rem) * -1);
  z-index: 5;
}
.faixa-dados__caixa {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(0, 26, 9, .13);
}
.dado {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.6rem 1rem;
  background: var(--creme);
  text-align: center;
}
.dado__valor {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700; color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}
.dado__rotulo { font-size: var(--t-xs); color: var(--texto-suave); max-width: 18ch; }

/* --------------------------------------------------- 9. Grades e cards */
.grade-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.grade-obras { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.grade-obras .figura { cursor: zoom-in; transition: transform var(--dur) var(--ease); }
.grade-obras .figura:hover { transform: translateY(-3px); }
.grade-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.alinhado-centro { align-items: center; }

.figura { border-radius: var(--r-lg); overflow: hidden; background: var(--verde-800); }
.figura picture { display: block; width: 100%; height: 100%; }
.figura img { width: 100%; height: 100%; object-fit: cover; }

.cartao {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--creme);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
}
.secao--escura#condicoes .eyebrow--centro{
  width: 100%;
}
.secao--escura .cartao {
  background: rgba(251, 248, 240, .05);
  border-color: rgba(251, 248, 240, .16);
}
.cartao__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-h3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--verde-900);
  margin-block: 1rem .5rem;
}
.secao--escura .cartao__titulo { color: var(--creme); }
.cartao p { font-size: var(--t-sm); color: var(--texto-suave); }
.cartao__rotulo {
  display: block; margin-top: .1rem;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--acento-texto);
}
.secao--escura .cartao__rotulo { color: var(--acento-texto-escuro); }

/* bento assimétrico dos diferenciais */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); }
.bento > * { grid-column: span 4; }
.bento__destaque { grid-column: span 12; }

.destaque-multi {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  background: var(--verde-900);
  color: var(--creme);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.destaque-multi__texto { padding: clamp(1.75rem, 3vw, 2.75rem); align-self: center; }
.destaque-multi__texto p { color: var(--texto-claro-suave); font-size: var(--t-sm); }
.destaque-multi__titulo {
  font-family: var(--fonte-display);
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  margin-block: .9rem .7rem;
}
.destaque-multi figure { margin: 0; min-height: 240px; }
.destaque-multi img { width: 100%; height: 100%; object-fit: cover; }

/* diagrama do lote multifamiliar */
.diagrama-lote { width: 100%; max-width: 230px; margin-top: 1.5rem; }

/* ---------------------------------------------- 10. Lista de benefícios */
.lista-icones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.4vw, 2rem); }
.lista-icones li {
  display: flex; align-items: center; gap: 1rem;
  padding-block: .5rem;
}
.lista-icones strong {
  display: block;
  font-family: var(--fonte-display);
  font-size: .95rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--creme);
}
.lista-icones span { font-size: var(--t-xs); color: var(--texto-claro-suave); }

/* ------------------------------------------------------------ 11. Vídeo */
.video {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--verde-950);
  aspect-ratio: 16 / 9;
}
.video img, .video video { width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: .8rem;
  border: 0; background: transparent; cursor: pointer;
  color: var(--creme);
}
.video__play::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 26, 9, .55), rgba(0, 26, 9, .12));
}
.video__disco {
  position: relative;
  top: 120px;
  right: 10px;  
  display: grid; place-items: center;
  width: clamp(64px, 8vw, 88px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ambar-500); color: var(--verde-900);
  transition: transform var(--dur) var(--ease);
}
.video__disco svg { width: 34%; height: 34%; margin-left: 0%; }
.video__play:hover .video__disco { transform: scale(1.07); }
.video__rotulo {
  position: relative;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ------------------------------------------------------- 12. Condições */
.oferta { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
.oferta__destaque {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid rgba(228, 181, 53, .45);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(228, 181, 53, .16), rgba(228, 181, 53, .04));
}
.oferta__valor {
  font-family: var(--fonte-display);
  font-size: var(--t-destaque);
  font-weight: 700; line-height: 1;
  color: var(--ambar-400);
  font-variant-numeric: tabular-nums;
}
.oferta__legenda { margin-top: .6rem; font-size: var(--t-lg); color: var(--creme) !important; }
.oferta__itens { display: grid; gap: .75rem; }
.oferta__item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.25rem;
  border: 1px solid rgba(251, 248, 240, .17);
  border-radius: var(--r-md);
  background: rgba(251, 248, 240, .04);
}
.oferta__item strong {
  font-family: var(--fonte-display);
  font-size: 1.05rem; font-weight: 700; letter-spacing: .03em;
  color: var(--creme); display: block;
}
.oferta__item span { font-size: var(--t-xs); color: var(--texto-claro-suave); }

.credito {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--ambar-500);
  color: var(--verde-900);
}
.credito__medalha {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--verde-900); color: var(--ambar-500); flex: none;
}
.credito__medalha svg { width: 28px; height: 28px; }
.credito h3 {
  font-family: var(--fonte-display); font-size: 1.15rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--verde-900);
}
.credito p { color: rgba(0, 43, 16, .82) !important; font-size: var(--t-sm); max-width: 52ch; }
.credito__texto { flex: 1 1 22rem; }

.nota-legal {
  margin-top: 1.5rem;
  font-size: var(--t-xs);
  color: var(--texto-suave);
  max-width: 74ch;
}
.secao--escura .nota-legal { color: rgba(201, 211, 196, .8); }

/* ------------------------------------------------------ 13. Implantação */
.mapa-implantacao {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--borda);
  background: var(--creme-100);
  cursor: zoom-in;
}
.mapa-implantacao img { width: 100%; }
.mapa-implantacao__dica {
  position: absolute; right: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  border-radius: var(--r-full);
  background: rgba(0, 43, 16, .88); color: var(--creme);
  font-size: var(--t-xs); font-weight: 600;
}
.mapa-implantacao__dica svg { width: 16px; height: 16px; }

.legenda { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.legenda li { display: flex; align-items: center; gap: .6rem; font-size: var(--t-sm); color: var(--texto-suave); }
.legenda i { width: 14px; height: 14px; border-radius: 4px; flex: none; }

/* --------------------------------------------------------- 14. Galeria */
.galeria { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.75rem, 1.4vw, 1.15rem); }
.galeria__item {
  position: relative; margin: 0;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--verde-800);
  cursor: zoom-in;
}
.galeria__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 420ms var(--ease);
}
.galeria__item:hover img { transform: scale(1.04); }
.galeria__item:nth-child(6n+1) { grid-column: span 6; grid-row: span 2; aspect-ratio: 4 / 3; }
.galeria__item:nth-child(6n+2) { grid-column: span 6; aspect-ratio: 16 / 7; }
.galeria__item:nth-child(6n+3),
.galeria__item:nth-child(6n+4) { grid-column: span 3; aspect-ratio: 1; }
.galeria__item:nth-child(6n+5),
.galeria__item:nth-child(6n) { grid-column: span 6; aspect-ratio: 16 / 8; }
.galeria__item figcaption {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: 2.5rem 1rem .9rem;
  background: linear-gradient(to top, rgba(0, 26, 9, .85), transparent);
  color: var(--creme); font-size: var(--t-xs); font-weight: 500;
}

/* ------------------------------------------------------ 15. Localização */
.mapa-embed {
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--creme-100);
  aspect-ratio: 16 / 10;
}
.mapa-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.local-lista { display: grid; gap: 1.1rem; margin-block: 1.75rem; }
.local-lista li { display: flex; gap: 1rem; align-items: center; }
.local-lista strong { display: block; font-size: var(--t-base); color: var(--verde-900); }
.local-lista span { font-size: var(--t-sm); color: var(--texto-suave); }
.local-lista .medalha { color: var(--ambar-500); }

/* -------------------------------------------------------- 16. Formulário */
.form-bloco {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
}
.form {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--creme);
  color: var(--texto);
  border-radius: var(--r-lg);
  box-shadow: 0 22px 50px rgba(0, 26, 9, .22);
}
/* o formulário é uma ilha clara dentro de .secao--escura: reseta a cascata
   herdada (texto suave, botão âmbar) para os valores de superfície clara */
.form p { color: var(--texto-suave); }
.form .btn--primario { --btn-bg: var(--verde-900); --btn-fg: var(--ambar-400); }
.form .btn--primario:hover { --btn-bg: var(--verde-800); }
.form__grade { display: grid; gap: .75rem; }
.campo { display: grid; gap: .4rem; }
.campo label { font-size: var(--t-sm); font-weight: 600; color: var(--verde-900); }
.campo .opcional { font-weight: 400; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 52px;
  padding: .8rem 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit; font-size: var(--t-base);
  color: var(--texto);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--verde-700); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--verde-900);
  box-shadow: 0 0 0 3px rgba(0, 43, 16, .12);
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: #A32020; }
.campo__erro { font-size: var(--t-xs); color: #A32020; min-height: 1.1em; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002B10' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}
.consentimento {
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: var(--t-xs); color: var(--texto-suave); line-height: 1.5;
}
.consentimento input {
  width: 22px; height: 22px; min-height: 0; flex: none; margin-top: .1rem;
  accent-color: var(--verde-900);
}
.consentimento a { color: var(--acento-texto); }
.form__nota { margin-top: .9rem; font-size: var(--t-xs); color: var(--texto-suave); text-align: center; }
.form__sucesso {
  display: none;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
}
.form__sucesso h3 {
  font-family: var(--fonte-display); font-size: 1.4rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--verde-900);
  margin-block: 1rem .6rem;
}
.form__sucesso p { color: var(--texto-suave); font-size: var(--t-sm); margin-bottom: 1.5rem; }
.form.is-enviado .form__grade, .form.is-enviado .form__nota { display: none; }
.form.is-enviado .form__sucesso { display: block; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* ------------------------------------------------------- 17. Corretores */
.corretores { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.corretor {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
  padding: 1.5rem 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--creme);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.corretor:hover { transform: translateY(-3px); border-color: var(--verde-700); }
.corretor img {
  width: 140px; height: auto; object-fit: cover; object-position: center top;
  border-radius: var(--r-md); margin-bottom: .85rem;
  background: var(--creme-100);
}
.corretor__nome {
  font-family: var(--fonte-display); font-size: 1rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--verde-900);
}
.corretor__creci { font-size: var(--t-xs); color: var(--texto-suave); letter-spacing: .04em; }
.corretor .btn { margin-top: .9rem; width: 100%; min-height: 46px; font-size: var(--t-xs); }

/* -------------------------------------------------------------- 18. FAQ */
.faq { max-width: 54rem; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--borda);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.35rem .25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-ui);
  font-size: var(--t-lg); font-weight: 600; color: var(--verde-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none;
  width: 22px; height: 22px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
  color: var(--acento-texto);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  padding: 0 .25rem 1.5rem;
  max-width: 68ch;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* -------------------------------------------------------- 19. CTA final */
.cta-final {
  position: relative;
  color: var(--creme);
  isolation: isolate;
  text-align: center;
}
.cta-final__fundo { position: absolute; inset: 0; z-index: -2; }
.cta-final__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.cta-final::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 26, 9, .82), rgba(0, 26, 9, .9));
}
.cta-final .titulo, .cta-final .subtitulo { color: var(--creme); }
.cta-final .subtitulo { color: #DCE2D6; }

/* ----------------------------------------------------------- 20. Rodapé */
.rodape { background: var(--verde-950); color: var(--texto-claro-suave); padding-block: clamp(3rem, 5vw, 4.5rem) 0; }
.rodape__topo { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); }
.rodape__marca img { width: 150px; height: auto; }
.rodape__marca p { margin-top: 1.1rem; font-size: var(--t-sm); max-width: 34ch; }
.rodape h2 {
  font-family: var(--fonte-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ambar-400);
  margin-bottom: 1.1rem;
}
.rodape ul { display: grid; gap: .7rem; }
.rodape a { color: var(--creme); text-decoration: none; font-size: var(--t-sm); }
.rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape__abm { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.rodape__abm img {
    width: 110px;
    height: auto;
    background: #fff;
    border-radius: 10px;
}
.rodape__abm span { font-size: var(--t-xs); }
.rodape__base {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid rgba(251, 248, 240, .14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--t-xs);
}
.rodape__aviso {
  padding-block: 1.25rem 2rem;
  font-size: .75rem; line-height: 1.6;
  color: rgba(201, 211, 196, .72);
  max-width: 92ch;
}
.rodape__contato{
  position: relative;
}
.rodape__contato .logo-corretor {
  position: absolute;
  bottom: 25px;
}

/* ----------------------------------------------- 21. Barra fixa (mobile) */
.barra-fixa {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90;
  display: none; gap: .6rem;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(251, 248, 240, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--borda);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.barra-fixa.is-visivel { transform: translateY(0); }
.barra-fixa .btn { flex: 1; min-height: 50px; padding-inline: .75rem; font-size: var(--t-xs); }

/* ----------------------------------------------------------- 22. Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(0, 26, 9, .93);
}
.lightbox.is-aberto { display: flex; }
.lightbox__figura { position: relative; margin: 0; max-width: 100%; max-height: 100%; overflow: hidden; }
.lightbox__figura img {
  display: block; max-width: 100%; width: auto; max-height: 86vh;
  border-radius: var(--r-sm);
  transition: transform var(--dur) var(--ease);
  user-select: none; -webkit-user-drag: none;
}
.lightbox__figura.is-zoom { overflow: hidden; cursor: grab; touch-action: none; }
.lightbox__figura.is-zoom img { touch-action: none; will-change: transform; }
.lightbox__legenda {
  position: absolute; left: 0; bottom: 0; margin: 0;
  max-width: 85%; text-align: left;
  padding: .6rem .9rem;
  background: linear-gradient(to top, rgba(0, 26, 9, .8), transparent);
  color: var(--texto-claro); font-size: var(--t-sm);
  border-radius: 0 0 0 var(--r-sm);
}
.lightbox__fechar {
  position: absolute; top: 1rem; right: 1rem;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid rgba(251, 248, 240, .4); border-radius: 50%;
  background: rgba(0, 26, 9, .6); color: var(--creme); cursor: pointer;
}
.lightbox__fechar svg { width: 22px; height: 22px; z-index: 99;}
.lightbox__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid rgba(251, 248, 240, .4); border-radius: 50%;
  background: rgba(0, 26, 9, .6); color: var(--creme); cursor: pointer;
}
.lightbox__nav--ant { left: 1rem; z-index: 99;}
.lightbox__nav--prox { right: 1rem; z-index: 99;}
.lightbox__nav svg { width: 22px; height: 22px; }

/* ------------------------------------------------------- 23. Revelação */
.revelar { opacity: 0; transform: translateY(18px); }
.revelar.is-visivel {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  height: 100%;
  width: -webkit-fill-available;
}

.copyright {
  display: flex;
  justify-content: center;
  margin: auto;
  width: 100%;
  padding-bottom: 30px;
  padding-top: 15px;
}
.copyright a {
  position: relative;
  top: -5px;
  color: #ffffff;
  display: flex;
  align-items: center;
  font-size: 0.8em;
}
.copyright a img {
  width: 110px;
  margin-left: 10px;
  mix-blend-mode: luminosity;
  filter: invert(65%) brightness(90%);
  transform: scale(1);
  transition: all 0.3s;
}
.copyright a:hover {
  img {
    mix-blend-mode: unset;
    filter: unset;
    transform: scale(1.1);
    transition: all 0.3s;
  }
}

/* ------------------------------------------------------ 24. Responsivo */
@media (max-width: 1080px) {
  .destaque-multi { grid-template-columns: 1fr; }
  .destaque-multi figure { min-height: 220px; order: -1; }
  .oferta { grid-template-columns: 1fr; }
  .rodape__topo { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
  .grade-obras { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .nav, .header__acao { display: none; }
  .menu-botao { display: flex; }
  .grade-2, .form-bloco { grid-template-columns: 1fr; }
  .corretores { grid-template-columns: repeat(2, 1fr); }
  .lista-icones { grid-template-columns: repeat(2, 1fr); }
  .faixa-dados__caixa { grid-template-columns: repeat(2, 1fr); }
  .barra-fixa { display: flex; }
  body { padding-bottom: 0; }
  .galeria__item:nth-child(6n+1) { grid-column: span 12; aspect-ratio: 4 / 3; grid-row: auto; }
  .galeria__item:nth-child(6n+2) { grid-column: span 12; }
  .galeria__item:nth-child(6n+3),
  .galeria__item:nth-child(6n+4) { grid-column: span 6; }
  .galeria__item:nth-child(6n+5),
  .galeria__item:nth-child(6n) { grid-column: span 12; }
}

@media (max-width: 620px) {
  .grade-3, .grade-4 { grid-template-columns: 1fr; }
  .grade-obras { grid-template-columns: repeat(2, 1fr); }
  .lista-icones { grid-template-columns: 1fr; }
  .corretores { grid-template-columns: 1fr; }
  .bento > *, .bento__destaque { grid-column: span 12; }
  .hero { min-height: 92svh; }
  .credito { flex-direction: column; align-items: flex-start; }
  .legenda { gap: .9rem 1.25rem; }
  .rodape__topo { grid-template-columns: 1fr; }
  .rodape__base { flex-direction: column; }
}

/* --------------------------------------------------- 25. Preferências */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

@media print {
  .header, .barra-fixa, .video__play, .lightbox, .hero__rolar { display: none !important; }
  body { background: #fff; color: #000; }
  .secao--escura { background: #fff; color: #000; }
}

@media (max-width: 992px){
  .barra-fixa.is-visivel{
    display: none;
  }
  .rodape__contato .logo-corretor img{
    width: 65%;
  }
}

@media (max-width: 768px) {
  .video__disco {top: 50px;}
  .lightbox__legenda {width: 100%; max-width: 100%;}
  .lightbox--sem-legenda-mobile .lightbox__legenda { display: none; }
}

@media (max-width: 575px) {
  .video__disco {
    top: 30px;
    right: 0px;
  }
  .credito {
    flex-direction: unset;
  }

  .rodape__marca img {
    margin: 0 auto;
  }
  .rodape__marca p {
    max-width: 100%;
    text-align: center;
  }
  .rodape__abm {
    flex-direction: column;
    text-align: center;
  }
  .rodape__topo nav, .rodape__contato{
    text-align: center;
  }
  .rodape__base {
    text-align: center;
  }
  .rodape__contato .logo-corretor {
    position: relative;
    bottom: 0px;
    margin: auto;
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  .rodape__contato .logo-corretor img{
    margin: auto;
  }
}