/*
  Direção: imobiliária clara e confiável — hero com foto da casa, corretora em primeiro plano,
  cartões brancos de cantos retos, cinzas grafite e o dourado #c9a24a da logo como única cor de destaque.

  Pontos de quebra: sm 640px · md 768px · lg 1024px
*/

/* ---------- Fonte ----------
   Hospedada no site (fonts/, subconjunto latino, cobre o português) em vez do Google Fonts: sem o CSS
   externo, o texto não espera outra conexão para aparecer. Licença: SIL Open Font License. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* Arial ajustada às medidas da Schibsted Grotesk (lidas do arquivo da fonte), para o texto não mudar
   de tamanho nem pular de linha quando a fonte do site termina de carregar. */
@font-face {
  font-family: "Schibsted Grotesk Fallback";
  src: local("Arial");
  size-adjust: 103.2%;
  ascent-override: 94.6%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* Paleta: #c9a24a (dourado da logo) · #313131 · #414141 · #525252 */
  --bg: #ffffff;
  --bg-soft: #f5f5f5; /* cinza bem claro para fundos grandes */
  --tint: #ebebeb; /* chips, cartão em destaque e detalhes claros sobre fundo escuro */
  --line: #e2e2e2;
  --ink: #313131;
  --ink-soft: #525252;
  --dark: #313131;
  --dark-2: #414141;
  --night: #262626; /* fundo da galeria em tela cheia */
  --accent: #c9a24a;
  --accent-hover: #b38d3a;
  --accent-ink: #262626; /* branco sobre o dourado fica em 2,4:1; o grafite chega a 6,3:1 */
  --accent-text: #7f6120; /* #c9a24a escurecido: texto pequeno sobre o cinza claro precisa de 4,5:1 */
  --wa: #1f7a4d;
  --wa-hover: #18633e;
  --danger: #b4233f;
  --star: #f5a524;
  /* Texto sobre foto ou fundo escuro. */
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.82);
  --on-dark-faint: rgba(255, 255, 255, 0.6);
  --on-dark-line: rgba(255, 255, 255, 0.12);
  /* Status no painel. */
  --ok-bg: #d6f5f0;
  --ok-ink: #075e54;
  --warn-bg: #fcefd2;
  --warn-ink: #7a5410;

  --font-sans: "Schibsted Grotesk", "Schibsted Grotesk Fallback", Arial, sans-serif;

  --text-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --text-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.3125rem);
  --text-title: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-head: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-display: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem);

  /* Cartões com cantos retos (visual clássico). */
  --radius: 0;
  --radius-lg: 0;
  --radius-btn: 4px; /* todos os botões: cantos discretos */
  --radius-field: 4px; /* campos de texto, PIN, buscas e listas de opção */
  --shadow: 0 12px 32px rgba(49, 49, 49, 0.08);
  --shadow-lg: 0 24px 48px rgba(49, 49, 49, 0.14);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* retorno de toque e entradas curtas */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* forma que muda no lugar (barras do menu) */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* painel lateral, curva de gaveta do iOS */
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1200px;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable; /* travar a rolagem com o menu aberto não desloca o layout */
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  font-variant-numeric: lining-nums proportional-nums;
  font-synthesis: none; /* a fonte tem todos os pesos: o navegador não inventa negrito nem itálico */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

ul,
ol {
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background-color: transparent;
  border-radius: 0;
}

button {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

[hidden] {
  display: none !important;
}

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

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.on-dark :focus-visible {
  outline-color: var(--tint);
}

/* ---------- Utilitários ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.text-small { font-size: var(--text-small); line-height: 1.5; }
.text-body { font-size: var(--text-body); line-height: 1.6; }
.text-lead { font-size: var(--text-lead); line-height: 1.4; }
.text-title { font-size: var(--text-title); line-height: 1.15; }
.text-head { font-size: var(--text-head); line-height: 1.05; }

.soft { color: var(--ink-soft); }
.accent-text { color: var(--accent-text); }
.ink-soft { color: var(--ink-soft); }
.semibold { font-weight: 600; }

/* Números de preço, código e contagem. Na Schibsted Grotesk o modo tabular alarga também vírgula e ponto
   ("R$ 540 . 000"), então aqui ficam proporcionais; o que importa é o algarismo alinhado à linha de base. */
.tabular {
  font-variant-numeric: lining-nums proportional-nums;
}

.gutter {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

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

@media (max-width: 639px) {
  .hide-sm { display: none; }
}

.i-4 { width: 1rem; height: 1rem; flex-shrink: 0; }
.i-5 { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.i-6 { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

/* Foto que preenche o pai (que precisa ser relative). */
.ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Camada usada nas trocas com crossfade. */
.layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Traço de destaque sob os títulos das seções divididas. */
.bar {
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 20px;
  border-radius: 99px;
  background: var(--accent);
}

/* ---------- Botões e links ---------- */

/* Botão base: cantos de 4px, peso 600 e só cor/fundo/borda em transição. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 52px;
  padding: 0 1.5rem;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1;
  text-align: center;
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease,
    transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
/* Retorno ao toque: o botão cede um pouco. */
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: default; }

/* Destaque: dourado com texto grafite. */
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-hover); }
/* WhatsApp: sempre verde, em qualquer lugar do site. */
.btn-wa { background: var(--wa); color: var(--on-dark); }
.btn-wa:hover { background: var(--wa-hover); }
/* Sólido escuro. */
.btn-night { background: var(--ink); color: var(--on-dark); }
.btn-night:hover { background: var(--dark-2); }
/* Secundário sobre fundo claro. */
.btn-ghost { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
/* Contorno branco sobre foto. */
.btn-outline-light { color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--on-dark-soft); }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px var(--on-dark); }
.btn-danger,
.btn-danger:hover { background: var(--danger); color: var(--on-dark); box-shadow: none; }
.btn-sm { min-height: 44px; padding: 0 1.1rem; font-size: var(--text-small); }
.btn-icon { width: 48px; height: 48px; min-height: 48px; padding: 0; }
.btn-block { width: 100%; }

/* Link de texto com sublinhado que cresce. */
.ulink {
  position: relative;
  padding-bottom: 2px;
}
.ulink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease-out-quart);
}
.ulink:hover::after,
.ulink:focus-visible::after {
  transform: scaleX(1);
}

/* Botão do WhatsApp que flutua sobre o conteúdo. */
.wa-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%; /* redondo, como o ícone do WhatsApp; os demais botões têm cantos de 4px */
  background: var(--wa);
  color: var(--on-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  transition:
    background-color 200ms ease,
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    visibility 0s;
}
/* Some onde já há um WhatsApp à vista; só fica invisível de verdade (fora do Tab) depois do fade. */
.wa-float.is-away {
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    visibility 0s 220ms;
}
.wa-float:hover { background: var(--wa-hover); }
.wa-float svg { width: 28px; height: 28px; }

@media (min-width: 768px) {
  .wa-float { right: 24px; bottom: 24px; width: 64px; height: 64px; }
  .wa-float svg { width: 32px; height: 32px; }
}

/* ======================================================================
   Página inicial
   ====================================================================== */

/* ---------- Cabeçalho ---------- */

.site-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  color: var(--on-dark);
}
.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.head-actions { display: flex; align-items: center; gap: 8px; }

/* Botão do menu: três barras que viram X. Abrindo, as barras se juntam e depois giram;
   fechando, desfazem o giro e depois se separam. */
.menu-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px; /* alinha as barras, e não a área de toque, com a margem da página */
  border-radius: var(--radius-btn);
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Fechando: só volta ao branco quando o painel já descobriu o botão. */
  transition: color 160ms ease 180ms;
}
.menu-is-open .menu-toggle { transition: color 200ms ease; }
.menu-bars {
  position: relative;
  width: 24px;
  height: 16px;
}
.menu-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    rotate 200ms var(--ease-in-out),
    translate 200ms var(--ease-in-out) 160ms,
    opacity 120ms ease 160ms,
    scale 200ms var(--ease-in-out) 160ms;
}
.menu-bars span:nth-child(1) { top: 0; }
.menu-bars span:nth-child(2) { top: 7px; }
.menu-bars span:nth-child(3) { top: 14px; }
.menu-toggle:active .menu-bars { scale: 0.9; }
.menu-bars { transition: scale 160ms var(--ease-out); }

.menu-is-open .menu-bars span {
  transition:
    translate 200ms var(--ease-in-out),
    opacity 120ms ease,
    scale 200ms var(--ease-in-out),
    rotate 260ms var(--ease-in-out) 160ms;
}
.menu-is-open .menu-bars span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.menu-is-open .menu-bars span:nth-child(2) { opacity: 0; scale: 0.2 1; }
.menu-is-open .menu-bars span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

/* Menu aberto: o cabeçalho fica por cima do painel, só com o botão (agora X, em grafite). */
.menu-is-open { overflow: hidden; }
.menu-is-open .site-head,
.menu-is-closing .site-head {
  position: fixed;
  z-index: 80;
}
.menu-is-open .site-head { color: var(--ink); }
.menu-is-open .head-row > .logo {
  visibility: hidden;
  opacity: 0;
}
.menu-is-open .menu-toggle:focus-visible { outline-color: var(--accent-text); }

/* ---------- Menu do celular ---------- */

.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(38, 38, 38, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.menu-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 75;
  display: flex;
  flex-direction: column;
  width: 100%; /* no celular ocupa a tela toda: uma fresta de poucos pixels parece defeito */
  height: 100svh;
  padding: 20px var(--gutter) 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  /* Saída um pouco mais rápida que a entrada. */
  transition: transform 320ms var(--ease-drawer), visibility 0s linear 320ms;
}
@media (min-width: 480px) {
  .menu-sheet { width: 24rem; }
}
.menu-is-open .menu-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms ease, visibility 0s;
}
.menu-is-open .menu-sheet {
  transform: none;
  visibility: visible;
  transition: transform 480ms var(--ease-drawer), visibility 0s;
}

/* Conteúdo do painel entra em sequência, logo atrás do painel; na saída some junto, sem espera. */
.menu-sheet-head .logo,
.menu-list li,
.menu-sheet .btn-wa,
.menu-sheet-foot {
  opacity: 0;
  translate: 32px 0;
  transition: opacity 160ms ease, translate 0s linear 320ms;
}
.menu-is-open .menu-sheet-head .logo,
.menu-is-open .menu-list li,
.menu-is-open .menu-sheet .btn-wa,
.menu-is-open .menu-sheet-foot {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 360ms var(--ease-out) calc(100ms + var(--i, 0) * 45ms),
    translate 520ms var(--ease-drawer) calc(100ms + var(--i, 0) * 45ms);
}
.menu-list li:nth-child(1) { --i: 1; }
.menu-list li:nth-child(2) { --i: 2; }
.menu-list li:nth-child(3) { --i: 3; }
.menu-list li:nth-child(4) { --i: 4; }
.menu-list li:nth-child(5) { --i: 5; }
.menu-sheet .btn-wa { --i: 6; }
.menu-sheet-foot { --i: 7; }
.menu-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}
.menu-list { margin: 32px 0; }
.menu-list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-lead);
  font-weight: 600;
}
.menu-list a:hover { color: var(--accent-text); }
.menu-sheet .btn-wa { margin-top: auto; }
.menu-sheet-foot { margin-top: 12px; text-align: center; }

/* No computador o painel vira um menu suspenso logo abaixo do botão; o cabeçalho continua
   como está (logo à vista) e a página não trava a rolagem. O WhatsApp fica no fim do menu. */
@media (min-width: 900px) {
  .menu-is-open { overflow: visible; }
  .menu-is-open .site-head,
  .menu-is-closing .site-head { position: absolute; }
  .menu-is-open .site-head { color: var(--on-dark); }
  .menu-is-open .head-row > .logo {
    visibility: visible;
    opacity: 1;
  }
  .menu-is-open .menu-toggle:focus-visible { outline-color: var(--on-dark); }

  .menu-scrim,
  .menu-is-open .menu-scrim { background: transparent; }
  .menu-sheet {
    position: absolute;
    inset: 76px max(var(--gutter), calc((100% - var(--wrap)) / 2)) auto auto;
    width: 260px;
    height: auto;
    padding: 8px 24px 24px;
    overflow: visible;
    border-radius: var(--radius-btn);
    opacity: 0;
    transform: translateY(-8px);
    transform-origin: top right;
    transition: opacity 160ms ease, transform 160ms var(--ease-out), visibility 0s linear 160ms;
  }
  .menu-is-open .menu-sheet {
    opacity: 1;
    transform: none;
    transition: opacity 200ms ease, transform 240ms var(--ease-out), visibility 0s;
  }
  .menu-sheet-head,
  .menu-sheet-foot { display: none; }
  .menu-list li,
  .menu-sheet .btn-wa,
  .menu-is-open .menu-list li,
  .menu-is-open .menu-sheet .btn-wa {
    opacity: 1;
    translate: none;
    transition: none;
  }
  .menu-list { margin: 0; }
  .menu-list a {
    min-height: 48px;
    font-size: var(--text-small);
  }
  .menu-list li:last-child a { border-bottom: 0; }
  .menu-sheet .btn-wa { min-height: 48px; margin-top: 8px; font-size: var(--text-small); }
}


/* ---------- Abertura ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--on-dark);
}
/* Fotos de fundo: camadas empilhadas, só a ativa (e a que está saindo) visíveis. */
.hero-media {
  --hero-fade: 1600ms; /* mesmo valor de FADE no js/home.js */
  position: absolute;
  inset: 0;
  z-index: 0; /* contexto próprio: as camadas não passam por cima do escurecimento (.hero::before) */
  overflow: hidden;
  background: var(--dark);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  opacity: 0;
  transform-origin: var(--kb-origin, 50% 60%);
  transition: opacity var(--hero-fade) cubic-bezier(0.45, 0, 0.2, 1);
  will-change: opacity, transform;
}
/* A que entra fica por cima e aparece; a que sai fica embaixo, ainda visível, até ser coberta. */
.hero-bg.is-active { z-index: 2; opacity: 1; }
.hero-bg.is-leaving { z-index: 1; opacity: 1; transition: none; }
/*
  Zoom lento (Ken Burns): alterna aproximar e afastar. A animação é a mesma nas classes
  is-active e is-leaving, então ela não reinicia quando a foto começa a sair.
*/
.hero-bg.kb-in.is-active,
.hero-bg.kb-in.is-leaving { animation: kb-in 12s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.hero-bg.kb-out.is-active,
.hero-bg.kb-out.is-leaving { animation: kb-out 12s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
@keyframes kb-in {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
@keyframes kb-out {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg { transition-duration: 600ms; }
  .hero-bg.is-active,
  .hero-bg.is-leaving { animation: none !important; }
}
/* Escurece a foto onde fica o texto. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(49, 49, 49, 0.88) 0%, rgba(49, 49, 49, 0.66) 45%, rgba(49, 49, 49, 0.25) 100%),
    linear-gradient(0deg, rgba(49, 49, 49, 0.55) 0%, rgba(49, 49, 49, 0) 40%);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* as abas roláveis não podem alargar a coluna */
  align-content: end;
  gap: 32px;
  min-height: 680px;
  padding-top: 120px;
  padding-bottom: 136px;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--on-dark-soft);
}
/* Traço dourado antes da linha de apoio, o mesmo .bar das seções. */
.hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  flex-shrink: 0;
  background: var(--accent);
}
.hero-copy h1 {
  margin-top: 16px;
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

/* ---------- Painel de busca (abertura) ---------- */

.finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.finder-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
/* Abas em trilho cinza; a ativa fica grafite, como um botão pressionado. */
.finder-tabs {
  display: flex;
  gap: 4px;
  min-height: 44px; /* altura das abas, que o JS monta depois: sem isso os campos abaixo pulam */
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--radius-btn);
  background: var(--bg-soft);
}
.finder-tabs::-webkit-scrollbar { display: none; }
/* No celular as cinco abas ocupam a linha inteira; reserva a linha antes do JS para a linha "+30 imóveis" não pular. */
@media (max-width: 767px) {
  .finder-tabs:empty { width: 100%; }
}
.finder-tabs button {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink-soft);
  transition: background-color 200ms ease, color 200ms ease;
}
.finder-tabs button:hover { color: var(--ink); }
.finder-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }
.finder-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  color: var(--ink-soft);
}
.finder-meta svg { color: var(--accent); }
.finder-meta strong { color: var(--ink); }

.finder-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.finder-field {
  display: grid;
  gap: 8px;
}
.finder-field > label {
  font-size: var(--text-small);
  font-weight: 600;
}
.finder-field select,
.finder-field .picker-btn {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 14px;
  border-radius: var(--radius-field);
  box-shadow: inset 0 0 0 1.5px var(--line);
  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='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  cursor: pointer;
  transition: box-shadow 200ms ease;
}
.finder-field select:hover { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.finder-field select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-text); }

/* ---------- Listas de opção da busca (js/home.js: enhanceSelect) ---------- */

/* O <select> fica escondido guardando o valor; quem aparece é o botão. */
select.picker-native { /* "select." vence o width: 100% de .field */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}
.picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  background-image: none;
  text-align: left;
}
.picker-btn:disabled { cursor: not-allowed; opacity: 0.55; }
/* Na busca do site: sem filtro o texto fica apagado; escolhido, fica firme. */
.finder-field .picker-btn { color: var(--ink-soft); background-image: none; } /* a seta é o SVG do botão, não a do <select> */
.finder-field .picker-btn.is-set { color: var(--ink); font-weight: 600; }
.picker-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.picker-chevron {
  flex-shrink: 0;
  color: var(--ink-soft);
  transition: rotate 240ms var(--ease-out);
}
.picker-btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.picker-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-text); }
.picker-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.picker-btn[aria-expanded="true"] .picker-chevron { rotate: 180deg; color: var(--ink); }

/* Painel: branco com o fio dourado da marca no alto; entra deslizando 6px a partir do campo. */
.picker-pop {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  border: 0;
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-field);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(38, 38, 38, 0.18), 0 2px 6px rgba(38, 38, 38, 0.06);
  opacity: 0;
  translate: 0 -6px;
  transition:
    opacity 140ms ease,
    translate 140ms ease,
    display 140ms allow-discrete,
    overlay 140ms allow-discrete;
}
.picker-pop[data-side="top"] { translate: 0 6px; }
.picker-pop:popover-open {
  display: flex;
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 180ms var(--ease-out),
    translate 260ms var(--ease-out),
    display 180ms allow-discrete,
    overlay 180ms allow-discrete;
}
@starting-style {
  .picker-pop:popover-open { opacity: 0; translate: 0 -6px; }
  .picker-pop[data-side="top"]:popover-open { translate: 0 6px; }
}

.picker-search {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.picker-search input {
  flex: 1;
  min-width: 0;
  height: 48px;
  outline: none;
  color: var(--ink);
  caret-color: var(--accent-text);
}
.picker-search:focus-within { color: var(--ink); }

.picker-list {
  flex: 1;
  min-height: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
/* Título do grupo: o mesmo traço dourado da frase de abertura. */
.picker-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 6px;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--ink);
}
.picker-group-title::before {
  content: "";
  width: 14px;
  height: 1.5px;
  background: var(--accent);
}
.picker-group:first-child .picker-group-title { padding-top: 8px; }

.picker-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.picker-group .picker-opt { padding-left: 32px; } /* alinha com o texto do título, depois do traço */
.picker-opt-text { flex: 1; min-width: 0; }
.picker-opt-meta { font-size: var(--text-small); color: var(--ink-soft); }
.picker-check { flex-shrink: 0; color: var(--accent-text); visibility: hidden; }
.picker-opt.is-active { background: var(--bg-soft); color: var(--ink); }
.picker-opt[aria-selected="true"] {
  background: #f7f0de; /* dourado da marca bem diluído */
  color: var(--ink);
  font-weight: 600;
}
.picker-opt[aria-selected="true"].is-active { background: #f0e4c6; }
.picker-opt[aria-selected="true"] .picker-check { visibility: visible; }

/* Bolinha de status (painel): a mesma cor da etiqueta do imóvel. */
.picker-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
}
.picker-dot.s-disponivel { background: var(--ok-ink); }
.picker-dot.s-reservado { background: var(--accent); }

.picker-empty {
  padding: 20px 16px 24px;
  font-size: var(--text-small);
  color: var(--ink-soft);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .picker-pop,
  .picker-pop[data-side="top"],
  .picker-pop:popover-open { translate: none; }
  .picker-chevron { transition: none; }
}

.finder-submit { height: 48px; gap: 8px; }
.finder-submit:focus-visible { outline-color: var(--accent-text); outline-offset: 2px; }

@media (min-width: 768px) {
  .hero-copy h1 .nowrap-lg { display: block; }
  .finder { padding: 24px 28px 28px; }
  .finder-fields { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
  .finder-submit { padding-inline: 32px; }
}

@media (min-width: 1024px) {
  .hero-grid {
    gap: 40px;
    min-height: 760px;
    padding-top: 160px;
    padding-bottom: 150px;
  }
}

/* ---------- Cartões sobre a abertura ---------- */

.feature-cards {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 16px;
  margin-top: -96px;
}
.fcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  transition: transform 300ms var(--ease-out-quart);
}
.fcard:hover { transform: translateY(-4px); }
.fcard h2 { font-size: var(--text-lead); }
.fcard-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--accent-text);
}
.fcard-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.fcard p:last-child { color: var(--ink-soft); font-size: var(--text-small); }
.fcard-accent { background: var(--accent); color: var(--accent-ink); }
.fcard-accent .fcard-stat,
.fcard-accent p:last-child { color: var(--accent-ink); }

@media (min-width: 768px) {
  .feature-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .fcard { padding: 32px; min-height: 220px; }
}

/* ---------- Seções ---------- */

.section { padding: 96px 0; }
.section-soft { background: var(--bg-soft); }

.sec-intro {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}
.sec-intro h2 { font-size: var(--text-head); }
.sec-intro p { margin-top: 16px; color: var(--ink-soft); }

@media (min-width: 768px) {
  .section { padding: 128px 0; }
}

/* ---------- Imóveis ---------- */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 40px;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.pills button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-btn);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.pills button:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.pills button[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.search-status { font-size: var(--text-small); color: var(--ink-soft); }
.search-status button { font-weight: 700; color: var(--accent-text); }

.home-grid {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}
.hcard {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line);
  color: var(--on-dark);
  box-shadow: var(--shadow);
}
.hcard .ph { transition: transform 450ms var(--ease-out); }
.hcard:hover .ph { transform: scale(1.04); }
.hcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(49, 49, 49, 0.92) 0%, rgba(49, 49, 49, 0.6) 38%, rgba(49, 49, 49, 0) 72%);
}
.hcard-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 700;
}
.hcard-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
}
.hcard-hood { font-size: var(--text-small); color: var(--on-dark-soft); }
.hcard-title { font-size: var(--text-lead); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.hcard-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 6px;
  font-size: var(--text-small);
  color: var(--on-dark-soft);
}
.hcard-meta strong { color: var(--on-dark); font-size: var(--text-body); }
.grid-empty {
  margin-top: 40px;
  text-align: center;
  color: var(--ink-soft);
}

@media (min-width: 640px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .home-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ---------- Seções divididas (Sobre e Contato) ---------- */

.split {
  display: grid;
  align-items: center;
  gap: 48px;
}
.split-copy h2 { font-size: var(--text-head); }
.split-copy .bar + * { margin-top: 28px; }
.split-copy p + p { margin-top: 16px; }
.split-copy > p { color: var(--ink-soft); }
.split-copy mark {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--tint);
  color: var(--ink);
}
.split-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.split-media.landscape { aspect-ratio: 4 / 3; }
.portrait .ph { object-position: 50% 20%; }

.signature {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.signature strong { font-size: var(--text-lead); }
.split-copy .btn { margin-top: 28px; }

@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; gap: 80px; }
  .split.cols-5-7 { grid-template-columns: 5fr 7fr; }
  .split.media-first .split-media { order: -1; }
}

/* ---------- Seu corretor ---------- */

/* Linha de apoio acima do título: o traço dourado da abertura, em versão para fundo claro. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  flex-shrink: 0;
  background: var(--accent);
}
.split-copy .eyebrow + h2 + p { margin-top: 24px; }

/* Selo do CRECI sobre a foto, no canto de baixo. */
.creci {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-btn);
  background: var(--bg);
  box-shadow: var(--shadow);
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
}
.creci svg { color: var(--accent-text); }

.broker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.split-copy .broker-actions .btn { margin-top: 0; }
@media (max-width: 479px) {
  .broker-actions .btn { width: 100%; }
}

/* ---------- Regiões ---------- */

.regions {
  display: grid;
  gap: 24px;
  margin-top: 56px;
}
.region-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.region-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.region-credit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(49, 49, 49, 0.6);
  color: var(--on-dark);
  font-size: 0.75rem;
}
.region-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px;
}
.region-body h3 { font-size: var(--text-title); }
.region-body h3 + p { margin-top: 12px; color: var(--ink-soft); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.chips li {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tint);
  font-size: var(--text-small);
  font-weight: 500;
}
.region-listing {
  margin-top: auto;
  padding-top: 24px;
  font-size: var(--text-small);
}
.region-listing p { color: var(--ink-soft); }
.region-listing ul { margin-top: 8px; }
.region-listing li + li { margin-top: 6px; }
.region-listing a { font-weight: 600; color: var(--accent-text); }

@media (min-width: 768px) {
  .regions { grid-template-columns: 1fr 1fr; }
}

/* ---------- Depoimentos ---------- */

/* Duas faixas em loop infinito: a de cima anda para a direita, a de baixo para a esquerda. */
.marquee {
  display: grid;
  gap: 20px;
  margin-top: 56px;
}
.marquee-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-right: 20px; /* igual ao gap: as duas metades ficam do mesmo tamanho */
  animation: marquee-left var(--duration, 60s) linear infinite;
}
.marquee-row.to-right .marquee-track { animation-name: marquee-right; }
.marquee-row:hover .marquee-track,
.marquee-row:focus-within .marquee-track { animation-play-state: paused; }

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(360px, 82vw);
  padding: 28px;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.quote-accent { background: var(--tint); box-shadow: none; }
.quote blockquote { color: var(--ink); line-height: 1.6; }
.quote footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.quote-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--dark-2);
  color: var(--on-dark);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.quote-accent .quote-avatar { background: var(--accent); color: var(--accent-ink); }
.quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-who { display: grid; min-width: 0; line-height: 1.3; }
.quote-who strong { font-size: var(--text-body); font-weight: 600; }
.quote-who span { font-size: 0.75rem; color: var(--accent-text); }
.quote-stars {
  display: flex;
  gap: 1px;
  margin-left: auto;
  color: var(--line);
}
.quote-stars svg { width: 16px; height: 16px; }
.quote-accent .quote-stars { color: var(--on-dark); }
.quote-stars .on { color: var(--star); }

@media (prefers-reduced-motion: reduce) {
  /* Sem movimento: cada faixa vira uma linha que se arrasta com o dedo. */
  .marquee-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding: 0 var(--gutter); }
  .marquee-track { animation: none; }
  .marquee-track [aria-hidden="true"] { display: none; }
}

/* ---------- Como funciona ---------- */

.steps {
  display: grid;
  gap: 40px;
  margin-top: 56px;
}
.steps li { max-width: 22rem; }
/* Número no mesmo círculo de contorno dos atalhos da abertura (.fcard-ico), em dourado. */
.step-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--accent);
  font-weight: 700;
  color: var(--accent-text);
}
.steps h3 { margin-top: 20px; font-size: var(--text-lead); }
.steps p { margin-top: 8px; color: var(--ink-soft); }

@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Seção branca logo após outra branca: um fio separa as duas. */
.section-rule { padding-top: 0; }
.section-rule > .wrap::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 96px;
  background: var(--line);
}
@media (min-width: 768px) {
  .section-rule { padding-top: 0; }
  .section-rule > .wrap::before { margin-bottom: 128px; }
}

.regions-note {
  margin-top: 32px;
  text-align: center;
  color: var(--ink-soft);
}
.regions-note strong { color: var(--ink); }

/* Atalho de teclado: aparece só ao receber foco com Tab. */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: var(--on-dark);
  font-weight: 600;
  translate: 0 -200%;
}
.skip-link:focus-visible { translate: 0 0; }

/* ---------- Contato ---------- */

.contact-form {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}
.contact-form input {
  height: 56px;
  padding: 0 22px;
  border-radius: var(--radius-field);
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow 200ms, background-color 200ms;
}
.contact-form input:focus {
  outline: none;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.contact-form .btn { min-height: 56px; margin-top: 4px; }
.contact-form .notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  font-size: var(--text-small);
  color: var(--ink-soft);
}

/* ---------- Rodapé ---------- */

.footer {
  padding: 80px 0 32px;
  background: var(--dark);
  color: var(--on-dark-soft);
}
.footer-grid {
  display: grid;
  gap: 40px;
}
.footer .logo { color: var(--on-dark); }
.footer-logo img { display: block; width: 200px; height: auto; }
.footer-about { max-width: 22rem; margin-top: 16px; font-size: var(--text-small); }
.footer h2 {
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.footer-list { margin-top: 16px; }
.footer-list li + li { margin-top: 10px; }
.footer-list a:hover { color: var(--tint); }
/* Redes sociais: só o ícone, num círculo de 44 px (área de toque confortável no celular). */
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--on-dark-line);
  transition: color 0.2s, box-shadow 0.2s;
}
.footer-social:hover,
.footer-social:focus-visible { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.footer-legal {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--on-dark-line);
  font-size: 0.75rem;
  color: var(--on-dark-faint);
}
.footer-legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-legal a:hover { color: var(--on-dark); }
.footer-legal p + p {
  margin-top: 12px;
  font-size: var(--text-small);
  color: var(--on-dark-soft);
}

@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* ======================================================================
   Página do imóvel (estrutura do site exemplo, visual do v2)
   ====================================================================== */

/* Cabeçalho claro: sem foto atrás, fica no fluxo da página. */
.site-head.is-solid {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}
@media (min-width: 900px) {
  .menu-is-open .site-head.is-solid,
  .menu-is-closing .site-head.is-solid { position: relative; }
  .menu-is-open .site-head.is-solid { color: var(--ink); }
  .menu-is-open .site-head.is-solid .menu-toggle:focus-visible { outline-color: var(--accent-text); }
}

/* min-height: o conteúdo vem do JS; sem ela o rodapé aparece no topo e depois é empurrado para baixo (CLS 0,73). */
.prop { min-height: 100svh; padding: 24px 0 112px; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: var(--text-small);
  color: var(--ink-soft);
}
.crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs li + li::before { content: "›"; color: var(--ink-soft); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.crumbs [aria-current] {
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.prop-head { margin-top: 24px; }
.prop-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: var(--text-small);
  font-weight: 700;
}
.prop-head h1 { font-size: var(--text-head); }
.prop-head-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
  font-size: var(--text-small);
  color: var(--ink-soft);
}
.prop-head-line span { display: inline-flex; align-items: center; gap: 6px; }
.prop-head-line svg { color: var(--accent-text); }

/* Celular: galeria → ficha (preço e botões) → conteúdo. Computador: ficha fixa na coluna da direita. */
.prop-grid {
  display: grid;
  grid-template-areas: "gallery" "aside" "content";
  column-gap: 48px;
  margin-top: 32px;
}
.prop-gallery { grid-area: gallery; min-width: 0; }
.prop-aside { grid-area: aside; margin-top: 24px; }
.prop-content { grid-area: content; min-width: 0; }

@media (min-width: 1024px) {
  .prop-grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "gallery aside" "content aside";
  }
  .prop-aside { position: sticky; top: 24px; align-self: start; margin-top: 0; }
}

/* ---------- Galeria ---------- */

.gallery-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.gallery-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  aspect-ratio: 3 / 2;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track li { position: relative; scroll-snap-align: center; }
.gallery-track button { position: absolute; inset: 0; cursor: zoom-in; }
.gallery-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  box-shadow: var(--shadow);
}
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
.gallery-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(49, 49, 49, 0.7);
  color: var(--on-dark);
  font-size: var(--text-small);
  font-weight: 600;
}
.thumbs {
  display: none;
  gap: 8px;
  margin-top: 12px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 200ms;
}
.thumbs button:hover { opacity: 1; }
.thumbs button[aria-current="true"] {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Setas só onde há mouse; no toque, desliza. */
@media (hover: none) {
  .gallery-nav { display: none; }
}
@media (min-width: 640px) {
  .thumbs { display: flex; }
}

/* Tela cheia. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--on-dark);
}
.lightbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 16px;
}
.lightbox-top .btn { min-height: 48px; padding: 0 18px; gap: 8px; }
.lightbox-stage {
  position: relative;
  flex: 1;
}
.lightbox-stage .ph { object-fit: contain; }
.lightbox-stage .nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  transform: translateY(-50%);
}
.lightbox-stage .prev { left: 12px; }
.lightbox-stage .next { right: 12px; }
.lightbox-foot { height: 24px; }

/* ---------- Ficha (coluna fixa no computador) ---------- */

.prop-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.prop-price {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.prop-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: var(--text-small);
  color: var(--ink-soft);
}
.prop-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.prop-facts > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prop-facts svg { flex-shrink: 0; color: var(--accent-text); }
.prop-facts dt { font-size: var(--text-small); color: var(--ink-soft); line-height: 1.3; }
.prop-facts dd { font-weight: 600; }
.prop-actions { display: grid; gap: 10px; margin-top: 24px; }
.prop-actions .btn { min-height: 52px; }
.prop-share { display: flex; gap: 8px; margin-top: 10px; }
.prop-share .btn { flex: 1; gap: 8px; padding: 0 12px; }
.prop-note { margin-top: 16px; font-size: 0.75rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Conteúdo ---------- */

.prop-section { margin-top: 48px; }
.prop-section > h2 { font-size: var(--text-title); }
.prose { max-width: 65ch; margin-top: 16px; color: var(--ink-soft); }
.prose p + p { margin-top: 16px; }

/* ---------- Dúvidas frequentes ---------- */

.faq {
  max-width: 48rem;
  margin: 48px auto 0;
  border-top: 1px solid var(--line);
}
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: var(--text-lead);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* Sinal de + que vira − ao abrir. */
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--accent-text);
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.faq details p { max-width: 65ch; padding-bottom: 24px; color: var(--ink-soft); }

/* ---------- Página de texto (privacidade) ---------- */

.legal .wrap { max-width: 48rem; }
.legal h1 { font-size: var(--text-head); }
.legal h1 + p { margin-top: 8px; }
.legal .prose { margin-top: 32px; }
.legal .prose h2 { margin-top: 40px; color: var(--ink); font-size: var(--text-lead); }
.legal .prose h2 + p { margin-top: 8px; }
.legal .prose a { color: var(--accent-text); text-decoration: underline; }
.legal-back { margin-top: 48px; }

.feature-cols { display: grid; gap: 32px; margin-top: 16px; }
.feature-cols h3 { font-size: var(--text-body); font-weight: 700; letter-spacing: -0.01em; }
.check-list { display: grid; gap: 8px; margin-top: 12px; }
.check-list li { display: flex; gap: 10px; color: var(--ink-soft); }
.check-list svg { margin-top: 4px; color: var(--accent-text); }
@media (min-width: 640px) {
  .feature-cols { grid-template-columns: 1fr 1fr; }
}

.region-box {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.region-box-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.region-box-body { padding: 4px 8px 8px; }
.region-box-body h3 { font-size: var(--text-lead); }
.region-box-body p { margin-top: 8px; font-size: 0.9375rem; color: var(--ink-soft); }
@media (min-width: 640px) {
  .region-box { grid-template-columns: 2fr 3fr; align-items: center; }
}

.prop-others { margin-top: 96px; }
.prop-others .home-grid { margin-top: 32px; }

.not-found { padding: 96px 0; }
.not-found p { max-width: 48ch; margin: 16px 0 32px; color: var(--ink-soft); }

/* ======================================================================
   Painel
   ====================================================================== */

.gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 0 16px;
  background: var(--bg-soft);
}
.gate form {
  width: 100%;
  max-width: 24rem;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.gate h1 { font-size: 2rem; line-height: 1; }
.gate h1 + p { margin-top: 12px; color: var(--ink-soft); }
.gate label {
  display: block;
  margin-top: 24px;
}
.gate input {
  width: 100%;
  height: 56px;
  margin-top: 6px;
  padding: 0 16px;
  border-radius: var(--radius-field);
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: var(--text-lead);
}
.gate label + input + label { margin-top: 16px; }
.gate input[type="password"] { letter-spacing: 0.2em; }
.gate .btn { margin-top: 24px; }

.error {
  color: var(--danger);
}
.gate .error { margin-top: 8px; }

.field:focus,
.gate input:focus {
  background: var(--bg);
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-text);
}

.admin-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.admin-top .btn { min-height: 44px; font-size: var(--text-small); }
.row-gap { display: flex; flex-wrap: wrap; gap: 8px; }

.admin-shell { min-height: 100svh; background: var(--bg-soft); }
.admin-main { padding: 40px var(--gutter); }
.admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.admin-head h1 + p { margin-top: 12px; }

.admin-tools {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
.admin-tools input {
  flex: 1;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-field);
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.admin-tools input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-text);
}

.admin-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.admin-row {
  display: grid;
  gap: 16px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.admin-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.admin-row-info { min-width: 0; }
.admin-row-info .title { margin-top: 4px; line-height: 1.25; font-weight: 700; }
.admin-row-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.status {
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink);
  font-weight: 600;
}
.status:focus { outline: 2px solid var(--accent-text); }
/* Etiqueta de status virando botão de lista: continua pílula, com a seta menor. */
.picker-btn.status { padding: 0 8px 0 14px; gap: 4px; }
.picker-btn.status .picker-chevron { width: 16px; height: 16px; color: currentColor; }
.picker-btn.status:focus { outline: none; }
.picker-btn.status:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px currentColor; }
.status option { background: var(--bg); color: var(--ink); }
.status.s-disponivel { background: var(--ok-bg); color: var(--ok-ink); }
.status.s-reservado { background: var(--warn-bg); color: var(--warn-ink); }
.admin-empty {
  padding: 32px;
  border-radius: var(--radius);
  background: var(--bg);
}

/* Depoimentos no painel */
.admin-reviews { margin-top: 64px; }
.admin-hero { margin-top: 64px; }
.admin-hero-time { display: grid; gap: 6px; min-width: 200px; }
.admin-hero-time .field { margin-top: 0; }
.admin-hero-card > .btn { margin-top: 16px; }
@media (min-width: 768px) {
  .admin-hero .photo-list { grid-template-columns: repeat(3, 1fr); }
}
.review-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.review-row > .row-gap { grid-column: 1 / -1; }
.review-text {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ink-soft);
}
.review-row .btn:disabled { opacity: 0.35; cursor: default; }
@media (min-width: 900px) {
  .review-row { grid-template-columns: 48px 1fr auto; align-items: center; }
  .review-row > .row-gap { grid-column: auto; }
}

/* Prévia do cartão dentro da gaveta: o mesmo .quote do site */
.review-preview {
  display: grid;
  place-items: center;
  margin-top: 24px;
  padding: 32px 16px;
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.admin-settings {
  display: grid;
  gap: 24px;
  margin-top: 64px;
}
.card {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.card h2 + p { margin-top: 8px; }
.card .inline {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.card .inline input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-field);
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.card .inline input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-text); }
.card .btn-sm { margin-top: 16px; }
.card .inline .btn { margin-top: 0; }

.toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  z-index: 60;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .admin-main { padding-top: 56px; padding-bottom: 56px; }
  .admin-tools { flex-direction: row; }
  .admin-row {
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: 24px;
  }
  .admin-thumb { width: 120px; }
  .admin-row .row-gap { justify-content: flex-end; }
  .admin-settings { grid-template-columns: 1fr 1fr; }
}

/* ---------- Formulário do imóvel (painel lateral) ---------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background: rgba(49, 49, 49, 0.55);
}
.drawer form {
  width: 100%;
  max-width: 48rem;
  min-height: 100svh;
  margin-left: auto;
  padding: 20px 20px 112px;
  background: var(--bg);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.drawer-head h2 { font-size: 2rem; line-height: 1; }
.drawer-head .btn { min-height: 44px; padding: 0 16px; gap: 8px; font-size: var(--text-small); }

.fs {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}
.fs legend {
  margin-bottom: 16px;
  font-size: var(--text-lead);
  line-height: 1.35;
  font-weight: 700;
}
.fs-id { margin-top: 32px; }
.fs-values { grid-template-columns: 1fr 1fr; }
.fs label > span:first-child {
  font-size: var(--text-small);
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink-soft);
}
.field {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 6px;
  padding: 0 14px;
  border-radius: var(--radius-field);
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink);
}
.picker-btn.field { display: flex; }
.picker-btn.field:focus { background: var(--bg-soft); }
textarea.field {
  height: auto;
  padding: 10px 14px;
}
.field[readonly] { color: var(--ink-soft); }
.check {
  display: flex;
  align-items: center;
  gap: 12px;
}
.check input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-text);
}
.check span { color: var(--ink) !important; font-size: var(--text-body) !important; font-weight: 500 !important; }
.fs .span-2 { grid-column: span 2; }
.two-cols { display: grid; gap: 16px; }

.photo-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.photo-add .field {
  flex: 1;
  margin-top: 0;
}
.photo-add .btn { min-height: 48px; }
.photo-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.photo-list li {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.photo-list .pic {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.photo-list .badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.photo-list .tools {
  display: flex;
  gap: 4px;
  padding: 6px;
}
.photo-list .tools .btn {
  flex: 1;
  min-height: 44px;
  padding: 0;
  font-size: var(--text-small);
}

.drawer-foot {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 48rem;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.drawer-foot .btn { min-height: 48px; }
.drawer-foot .error { margin-right: auto; }

@media (min-width: 640px) {
  .fs-id { grid-template-columns: repeat(6, 1fr); }
  .fs-id .c6 { grid-column: span 6; }
  .fs-id .c4 { grid-column: span 4; }
  .fs-id .c2 { grid-column: span 2; }
  .fs-values { grid-template-columns: repeat(4, 1fr); }
  .two-cols { grid-template-columns: 1fr 1fr; }
  .photo-add { flex-direction: row; }
  .photo-list { grid-template-columns: repeat(3, 1fr); }
  .drawer-foot {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
}

@media (min-width: 768px) {
  .drawer form { padding-left: 40px; padding-right: 40px; }
  .drawer-foot { padding-left: 40px; padding-right: 40px; }
}

/* ---------- Animações ---------- */


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-bg { animation: none; }
  .fcard:hover,
  .btn:active:not(:disabled),
  .hcard:hover .ph { transform: none; }
  /* Menu: sem deslizar nem girar; painel e itens só aparecem e somem em fade. */
  .menu-sheet,
  .menu-is-open .menu-sheet { transform: none; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .menu-is-open .menu-sheet { opacity: 1; transition: opacity 200ms ease, visibility 0s; }
  .menu-sheet-head .logo,
  .menu-list li,
  .menu-sheet .btn-wa,
  .menu-sheet-foot { translate: none !important; transition-delay: 0s !important; }
  .menu-bars span { transition-duration: 0s !important; transition-delay: 0s !important; }
}