/* ==========================================================================
   EXATA INVEST — Sistema visual compartilhado
   --------------------------------------------------------------------------
   Editorial de luxo para imobiliária de alto padrão (São Paulo).
   Referências: Sotheby's International Realty, Knight Frank, Savills,
   Christie's Real Estate.

   Sumário
   01. Design tokens (cores, tipografia fluida, espaçamento, movimento)
   02. Suporte a chinês simplificado (html[lang="zh-CN"])
   03. Reset moderno
   04. Base (body, seleção, foco, links, mídia)
   05. Tipografia editorial (display, eyebrow, lead)
   06. Layout (container, seções, grids)
   07. Botões
   08. Header fixo + navegação + seletor de idioma + menu mobile
   09. Hero full-viewport
   10. Painel de busca refinado
   11. Grade de imóveis (cards com hover elegante)
   12. Barra de filtros da listagem
   13. Seções editoriais (split, citação)
   14. Estatísticas (stats)
   15. Chamada para contato (CTA)
   16. Footer completo
   17. Animações reveal-on-scroll
   18. Utilitários
   19. Preferências de movimento reduzido
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Cores — grafite profundo quase preto, marfim quente, dourado discreto */
  --color-bg:            #0c0c0e;
  --color-bg-elevated:   #131316;
  --color-surface:       #1a1a1f;
  --color-surface-2:     #212127;
  --color-line:          rgba(236, 231, 223, 0.09);
  --color-line-strong:   rgba(236, 231, 223, 0.16);

  --color-text:          #ece7df;
  --color-text-soft:     #c9c3b8;
  --color-text-muted:    #97917f;

  --color-gold:          #c6a15b;
  --color-gold-soft:     #dcc08a;
  --color-gold-deep:     #96773d;
  --color-gold-faint:    rgba(198, 161, 91, 0.14);

  --color-danger:        #d08a7e;

  /* Tipografia */
  --font-display: "Playfair Display", "Noto Serif SC", "Songti SC", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala tipográfica fluida (clamp: mínimo / preferido / máximo) */
  --fs-hero:     clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem);
  --fs-display:  clamp(2.1rem, 1.3rem + 3.4vw, 4rem);
  --fs-title:    clamp(1.65rem, 1.15rem + 2vw, 2.6rem);
  --fs-subtitle: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
  --fs-lead:     clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-micro:    0.72rem;

  /* Ritmo vertical / espaçamentos */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Estrutura */
  --container:      76rem;   /* 1216px */
  --container-wide: 88rem;   /* 1408px */
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.75rem;

  /* Bordas e sombras */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-card: 0 18px 50px -18px rgba(0, 0, 0, 0.65);
  --shadow-lift: 0 30px 70px -20px rgba(0, 0, 0, 0.75);

  /* Movimento — curvas longas e suaves, padrão editorial */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast:   240ms;
  --dur-med:    480ms;
  --dur-slow:   900ms;

  /* Camadas */
  --z-header: 100;
  --z-nav:    110;
  --z-float:  90;
}


/* --------------------------------------------------------------------------
   02. CHINÊS SIMPLIFICADO — troca de stacks e respiro tipográfico
   -------------------------------------------------------------------------- */

html[lang="zh-CN"] {
  --font-display: "Noto Serif SC", "Playfair Display", "Songti SC", "SimSun", serif;
  --font-body:    "Noto Sans SC", "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html[lang="zh-CN"] body {
  letter-spacing: 0.015em;
  line-height: 1.85;
}

html[lang="zh-CN"] .eyebrow {
  letter-spacing: 0.42em;
}

html[lang="zh-CN"] .display-1,
html[lang="zh-CN"] .display-2,
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3 {
  font-style: normal;
  letter-spacing: 0.04em;
}


/* --------------------------------------------------------------------------
   03. RESET MODERNO
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  min-height: 100svh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  height: auto;
  font-style: italic; /* alt text enquanto carrega */
  background-color: var(--color-surface);
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

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

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

p,
h1,
h2,
h3,
h4,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   04. BASE
   -------------------------------------------------------------------------- */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
}

::selection {
  background: var(--color-gold);
  color: #131310;
}

/* Foco visível consistente em todo o site */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Scrollbar discreta (WebKit) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: #2c2c33;
  border-radius: 8px;
  border: 2px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-deep);
}

/* Link editorial sublinhado */
.link-inline {
  color: var(--color-gold-soft);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color var(--dur-fast) var(--ease-soft),
              background-size var(--dur-med) var(--ease-out);
}
.link-inline:hover {
  color: var(--color-gold);
  background-size: 0 1px;
}

/* Skip link — acessibilidade */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 200;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-gold);
  color: #131310;
  font-size: var(--fs-small);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-soft);
}
.skip-link:focus {
  top: var(--space-sm);
}


/* --------------------------------------------------------------------------
   05. TIPOGRAFIA EDITORIAL
   -------------------------------------------------------------------------- */

.display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.2;
}

.subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  font-weight: 500;
  line-height: 1.3;
}

/* Itálico serifado para ênfase dentro de títulos */
.display-1 em,
.display-2 em,
.title em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-gold-soft);
}

/* Eyebrow — rótulo em versalete com filete dourado */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}

.eyebrow--bare::before {
  content: none;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--color-text-soft);
  font-weight: 300;
  max-width: 56ch;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-gold {
  color: var(--color-gold);
}


/* --------------------------------------------------------------------------
   06. LAYOUT
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: clamp(var(--space-xl), 9vw, var(--space-3xl));
}

.section--tight {
  padding-block: clamp(var(--space-lg), 6vw, var(--space-2xl));
}

.section--elevated {
  background: var(--color-bg-elevated);
}

/* Filete superior dourado para separar capítulos editoriais */
.section--ruled {
  border-top: 1px solid var(--color-line);
  position: relative;
}
.section--ruled::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--gutter);
  width: 5rem;
  height: 1px;
  background: var(--color-gold);
}

/* Cabeçalho de seção: eyebrow + título + texto */
.section-head {
  display: grid;
  gap: var(--space-md);
  max-width: 44rem;
  margin-bottom: clamp(var(--space-lg), 5vw, var(--space-xl));
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.section-head--split {
  max-width: none;
  grid-template-columns: 1fr;
  align-items: end;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}


/* --------------------------------------------------------------------------
   07. BOTÕES
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-color: var(--color-text);
  --btn-border: var(--color-line-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.95em 2.2em;
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* Dourado vazado — o botão assinatura da casa */
.btn--gold {
  --btn-border: var(--color-gold-deep);
  --btn-color: var(--color-gold-soft);
}
.btn--gold:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #171510;
  box-shadow: 0 14px 34px -12px rgba(198, 161, 91, 0.45);
}

/* Sólido claro — para CTAs sobre fotografia escura */
.btn--solid {
  --btn-bg: var(--color-text);
  --btn-color: #17171a;
  --btn-border: var(--color-text);
}
.btn--solid:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #171510;
}

/* Fantasma — mínimo, para ações secundárias */
.btn--ghost {
  --btn-border: transparent;
  --btn-color: var(--color-text-soft);
  padding-inline: 0.4em;
}
.btn--ghost:hover {
  color: var(--color-gold-soft);
  transform: none;
}

.btn .btn__icon {
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--dur-med) var(--ease-out);
}
.btn:hover .btn__icon {
  transform: translateX(4px);
}


/* --------------------------------------------------------------------------
   08. HEADER FIXO + NAVEGAÇÃO
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(12, 12, 14, 0.55), transparent);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-med) var(--ease-soft),
              border-color var(--dur-med) var(--ease-soft),
              backdrop-filter var(--dur-med) var(--ease-soft);
}

/* Estado ao rolar — vidro fosco sobre o conteúdo */
.site-header.is-scrolled {
  background: rgba(12, 12, 14, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: var(--color-line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Marca */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.brand__mark {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-gold);
  transform: translateY(-2px);
}

.brand small {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transform: translateY(-3px);
}

/* Navegação principal (desktop) */
.nav-main {
  display: none;
  align-items: center;
  gap: clamp(var(--space-md), 2.6vw, var(--space-xl));
}

.nav-main a {
  position: relative;
  padding-block: var(--space-2xs);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
  transition: color var(--dur-fast) var(--ease-soft);
}

/* Filete dourado que desliza sob o link */
.nav-main a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-med) var(--ease-out);
}

.nav-main a:hover,
.nav-main a[aria-current="page"] {
  color: var(--color-text);
}

.nav-main a:hover::after,
.nav-main a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Seletor de idioma */
.lang-selector {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-left: var(--space-md);
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-line-strong);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lang-selector,
.lang-option {
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-soft);
}

.lang-option:hover {
  color: var(--color-text);
}

.lang-option[aria-current="true"] {
  color: var(--color-gold);
  pointer-events: none;
}

.lang-option + .lang-option::before {
  content: "·";
  margin-right: 0.6rem;
  color: var(--color-line-strong);
}

/* Ações do header (busca/contato) */
.header-actions {
  display: none;
  align-items: center;
  gap: var(--space-sm);
  margin-left: var(--space-md);
}

/* Botão hamburger — mobile */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  z-index: calc(var(--z-nav) + 1);
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-text);
  transition: transform var(--dur-med) var(--ease-out),
              opacity var(--dur-fast) var(--ease-soft);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Painel de navegação mobile — tela cheia, editorial */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + var(--space-lg)) var(--gutter) var(--space-xl);
  background: rgba(12, 12, 14, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-soft),
              visibility 0s var(--dur-med);
}

.nav-mobile.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-med) var(--ease-soft);
}

.nav-mobile a {
  display: block;
  padding-block: var(--space-xs);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 500;
  color: var(--color-text-soft);
  border-bottom: 1px solid var(--color-line);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              color var(--dur-fast) var(--ease-soft);
}

.nav-mobile.is-open a {
  opacity: 1;
  transform: translateY(0);
}

.nav-mobile a:hover {
  color: var(--color-gold-soft);
}

/* Escalonamento dos links do menu mobile */
.nav-mobile.is-open li:nth-child(1) a { transition-delay: 60ms; }
.nav-mobile.is-open li:nth-child(2) a { transition-delay: 90ms; }
.nav-mobile.is-open li:nth-child(3) a { transition-delay: 150ms; }
.nav-mobile.is-open li:nth-child(4) a { transition-delay: 210ms; }
.nav-mobile.is-open li:nth-child(5) a { transition-delay: 270ms; }
.nav-mobile.is-open li:nth-child(6) a { transition-delay: 330ms; }

.nav-mobile .lang-selector {
  display: inline-flex;
  margin: var(--space-lg) 0 0;
  padding: 0;
  border: 0;
  font-size: var(--fs-small);
}

@media (min-width: 1024px) {
  .nav-main,
  .lang-selector,
  .header-actions {
    display: inline-flex;
  }
  .menu-toggle,
  .nav-mobile {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   09. HERO FULL-VIEWPORT
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  animation: hero-settle 2.8s var(--ease-out) forwards;
}

@keyframes hero-settle {
  from { transform: scale(1.12); }
  to   { transform: scale(1.04); }
}

/* Véu cinematográfico: escurece a base para o texto respirar */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(12, 12, 14, 0.92) 0%,
      rgba(12, 12, 14, 0.45) 34%,
      rgba(12, 12, 14, 0.12) 62%,
      rgba(12, 12, 14, 0.38) 100%);
}

.hero__content {
  position: relative;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  /* topo livre para o header fixo: eyebrow/título nunca passam por baixo dele */
  padding: calc(96px + var(--space-md)) var(--gutter) clamp(var(--space-2xl), 12vh, var(--space-3xl));
  display: grid;
  gap: var(--space-md);
}

.hero__content {
  max-width: 46rem;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.hero__subtitle {
  max-width: 34rem;
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--color-text-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Indicador de rolagem */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-lg);
  display: none;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  writing-mode: vertical-rl;
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 3.4rem;
  background: linear-gradient(to bottom, var(--color-gold), transparent);
  animation: scroll-hint 2.2s var(--ease-soft) infinite;
}

@keyframes scroll-hint {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (min-width: 1024px) {
  .hero__scroll {
    display: inline-flex;
  }
}

/* Hero interno (páginas de listagem/sobre) — meia altura */
.hero--inner {
  min-height: 62vh;
  min-height: 62svh;
}


/* --------------------------------------------------------------------------
   10. PAINEL DE BUSCA REFINADO
   -------------------------------------------------------------------------- */

.search-panel {
  position: relative;
  margin-top: calc(-1 * clamp(var(--space-xl), 8vw, var(--space-2xl)));
  z-index: 2;
}

.search-panel__card {
  background: rgba(19, 19, 22, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--color-line);
  border-top: 1px solid var(--color-gold-deep);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-md), 3vw, var(--space-lg));
  box-shadow: var(--shadow-card);
}

.search-form {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .search-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .search-form {
    grid-template-columns: 1.1fr 1fr 1fr 1fr auto;
    align-items: end;
  }
}

.field {
  display: grid;
  gap: var(--space-2xs);
}

.field label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.field input,
.field select {
  width: 100%;
  padding: 0.85em 1em;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--fs-small);
  transition: border-color var(--dur-fast) var(--ease-soft),
              background-color var(--dur-fast) var(--ease-soft);
}

.field input::placeholder {
  color: var(--color-text-muted);
}

.field input:hover,
.field select:hover {
  border-color: var(--color-line-strong);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-gold-deep);
  background: var(--color-surface-2);
}

/* Select com chevron customizado */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c6a15b' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
}

.field select:invalid {
  color: var(--color-text-muted);
}

.search-form .btn {
  height: 100%;
  min-height: 3.05rem;
}


/* --------------------------------------------------------------------------
   11. GRADE DE IMÓVEIS — CARDS COM HOVER ELEGANTE
   -------------------------------------------------------------------------- */

.property-grid {
  display: grid;
  gap: clamp(var(--space-md), 3vw, var(--space-lg));
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .property-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .property-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.property-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-soft),
              box-shadow var(--dur-med) var(--ease-out);
}

.property-card:hover {
  transform: translateY(-6px);
  border-color: rgba(198, 161, 91, 0.35);
  box-shadow: var(--shadow-lift);
}

/* Mídia do card — zoom contido e véu gradiente */
.property-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.property-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
}

.property-card:hover .property-card__media img {
  transform: scale(1.06);
  filter: brightness(1.04);
}

.property-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(12, 12, 14, 0.55) 0%,
    transparent 38%);
  opacity: 0.6;
  transition: opacity var(--dur-med) var(--ease-soft);
}

.property-card:hover .property-card__media::after {
  opacity: 1;
}

/* Selo de finalidade (Venda / Locação / Exclusivo) */
.property-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1;
  padding: 0.45em 1em;
  background: rgba(12, 12, 14, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(198, 161, 91, 0.4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
}

/* Overlay "Ver detalhes" que emerge no hover */
.property-card__overlay {
  position: absolute;
  inset: auto var(--space-sm) var(--space-sm);
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}

.property-card:hover .property-card__overlay,
.property-card:focus-within .property-card__overlay {
  opacity: 1;
  transform: translateY(0);
}

.property-card__overlay span {
  padding: 0.55em 1.2em;
  background: var(--color-gold);
  color: #171510;
  border-radius: var(--radius-sm);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Corpo do card */
.property-card__body {
  display: grid;
  gap: var(--space-xs);
  padding: clamp(var(--space-md), 2.4vw, var(--space-lg));
}

.property-card__location {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.property-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  font-weight: 500;
  line-height: 1.3;
}

.property-card__title a {
  transition: color var(--dur-fast) var(--ease-soft);
}

.property-card__title a:hover {
  color: var(--color-gold-soft);
}

/* Link esticado: o card inteiro é clicável mantendo acessibilidade */
.property-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.property-card__price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-gold-soft);
  letter-spacing: 0.01em;
}

.property-card__price small {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Metadados: área, quartos, banhos, vagas */
.property-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-line);
  list-style: none;
  padding-left: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.property-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.property-card__meta svg {
  width: 1.05em;
  height: 1.05em;
  color: var(--color-gold-deep);
}

/* Card oculto pelo filtro */
.property-card.is-hidden {
  display: none;
}


/* --------------------------------------------------------------------------
   12. BARRA DE FILTROS DA LISTAGEM
   -------------------------------------------------------------------------- */

.listing-header {
  display: grid;
  gap: var(--space-lg);
  margin-bottom: clamp(var(--space-lg), 5vw, var(--space-xl));
}

.filter-bar {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
  padding: var(--space-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
  }
}

.filter-bar__reset {
  justify-self: start;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}

.filter-bar__reset:hover {
  color: var(--color-gold-soft);
  border-bottom-color: var(--color-gold-deep);
}

.filter-count {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.filter-count strong {
  font-family: var(--font-display);
  font-size: 1.15em;
  color: var(--color-gold-soft);
}

.filter-empty {
  padding: var(--space-xl) var(--gutter);
  text-align: center;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.filter-empty[hidden] {
  display: none;
}


/* --------------------------------------------------------------------------
   13. SEÇÕES EDITORIAIS (SPLIT + CITAÇÃO)
   -------------------------------------------------------------------------- */

.editorial {
  display: grid;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .editorial--reverse .editorial__media {
    order: 2;
  }
}

.editorial__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.editorial__media img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  max-height: 40rem;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.editorial__media:hover img {
  transform: scale(1.045);
}

/* Filete dourado deslocado — detalhe de assinatura */
.editorial__media::before {
  content: "";
  position: absolute;
  inset: var(--space-sm);
  border: 1px solid rgba(198, 161, 91, 0.35);
  border-radius: var(--radius-sm);
  z-index: 1;
  pointer-events: none;
}

.editorial__body {
  display: grid;
  gap: var(--space-md);
  max-width: 34rem;
}

.editorial__body p {
  color: var(--color-text-soft);
  font-weight: 300;
}

/* Citação em destaque */
.quote {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: var(--space-md);
  justify-items: center;
}

.quote blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
}

.quote blockquote::before {
  content: "“";
  display: block;
  font-size: 3.4em;
  line-height: 0.4;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.quote cite {
  font-style: normal;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   14. ESTATÍSTICAS
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  text-align: center;
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: left;
  }
}

.stat {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line-strong);
  position: relative;
}

.stat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.2rem;
  height: 1px;
  background: var(--color-gold);
}

@media (max-width: 1023px) {
  .stat::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

.stat__number {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--color-text);
}

.stat__number sup {
  font-size: 0.42em;
  color: var(--color-gold);
  margin-left: 0.12em;
}

.stat__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   15. CHAMADA PARA CONTATO (CTA)
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  padding: clamp(var(--space-xl), 8vw, var(--space-3xl)) var(--gutter);
  text-align: center;
  isolation: isolate;
}

.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 14, 0.78);
  background: linear-gradient(rgba(12, 12, 14, 0.82), rgba(12, 12, 14, 0.68));
}

.cta__content {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  max-width: 40rem;
  margin-inline: auto;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}


/* --------------------------------------------------------------------------
   16. FOOTER COMPLETO
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: clamp(var(--space-xl), 9vw, var(--space-3xl));
  background: #09090b;
  border-top: 1px solid var(--color-line);
  position: relative;
}

/* Filete dourado de coroamento */
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-gold-deep) 30%,
    var(--color-gold) 50%,
    var(--color-gold-deep) 70%,
    transparent 100%);
  opacity: 0.6;
}

.footer-main {
  display: grid;
  gap: var(--space-xl);
  padding-block: clamp(var(--space-xl), 7vw, var(--space-2xl));
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

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

.footer-brand {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  max-width: 26rem;
}

.footer-brand p {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--color-text-muted);
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
  list-style: none;
  padding-left: 0;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-med) var(--ease-out);
}

.footer-social a:hover {
  color: var(--color-gold);
  border-color: var(--color-gold-deep);
  transform: translateY(-3px);
}

.footer-social svg {
  width: 1.05rem;
  height: 1.05rem;
}

.footer-col h3 {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.footer-col ul {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: var(--space-xs);
}

.footer-col a {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-soft),
              padding-left var(--dur-fast) var(--ease-soft);
}

.footer-col a:hover {
  color: var(--color-text);
  padding-left: 0.35rem;
}

.footer-contact {
  display: grid;
  gap: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.footer-contact strong {
  display: block;
  font-weight: 600;
  color: var(--color-text-soft);
  letter-spacing: 0.06em;
}

.footer-contact a {
  color: var(--color-gold-soft);
  transition: color var(--dur-fast) var(--ease-soft);
}

.footer-contact a:hover {
  color: var(--color-gold);
}

/* Barra legal */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.footer-legal nav {
  display: flex;
  gap: var(--space-md);
}

.footer-legal a {
  transition: color var(--dur-fast) var(--ease-soft);
}

.footer-legal a:hover {
  color: var(--color-gold-soft);
}

/* Botão flutuante de WhatsApp */
.whatsapp-float {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--color-gold);
  color: #171510;
  box-shadow: 0 16px 40px -10px rgba(198, 161, 91, 0.5);
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}

.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 22px 50px -10px rgba(198, 161, 91, 0.65);
}

.whatsapp-float svg {
  width: 1.5rem;
  height: 1.5rem;
}


/* --------------------------------------------------------------------------
   17. ANIMAÇÕES REVEAL-ON-SCROLL
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal--left {
  transform: translateX(-2.2rem);
}

.reveal--right {
  transform: translateX(2.2rem);
}

.reveal--zoom {
  transform: scale(0.965);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Escalonamento utilitário: aplique --reveal-delay nos irmãos */
.reveal-stagger > *:nth-child(2) { --reveal-delay: 90ms; }
.reveal-stagger > *:nth-child(3) { --reveal-delay: 180ms; }
.reveal-stagger > *:nth-child(4) { --reveal-delay: 270ms; }
.reveal-stagger > *:nth-child(5) { --reveal-delay: 360ms; }
.reveal-stagger > *:nth-child(6) { --reveal-delay: 450ms; }

/* Fallback sem JS: tudo visível por padrão se o script não carregar */
.no-js .reveal {
  opacity: 1;
  transform: none;
}


/* --------------------------------------------------------------------------
   18. UTILITÁRIOS
   -------------------------------------------------------------------------- */

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

.text-center { text-align: center; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.divider-gold {
  width: 4.5rem;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, var(--color-gold), transparent);
  margin-block: var(--space-md);
}

/* Imagem com tratamento editorial (leve dessaturação que cede no hover) */
.img-editorial {
  filter: saturate(0.88) contrast(1.03);
  transition: filter var(--dur-slow) var(--ease-soft);
}
.img-editorial:hover {
  filter: saturate(1) contrast(1);
}


/* --------------------------------------------------------------------------
   19. MOVIMENTO REDUZIDO — respeito às preferências do usuário
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__media img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   CONCIERGE IA — botão flutuante + painel de chat (Hunyuan A13B via /api/concierge)
   -------------------------------------------------------------------------- */
.concierge-fab {
  position: fixed;
  right: 24px;
  bottom: 104px; /* acima do botão WhatsApp */
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--color-gold-deep);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-gold-deep), var(--color-gold));
  color: #14100a;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.concierge-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(198, 161, 91, 0.35);
}
.concierge-fab svg { flex: none; }

.concierge-panel {
  position: fixed;
  right: 24px;
  bottom: 100px;
  z-index: 71;
  width: min(380px, calc(100vw - 32px));
  /* nunca alcança a zona do header (76px + margem), mesmo em viewports baixos */
  height: min(520px, calc(100dvh - 190px));
  max-height: calc(100dvh - 190px);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line-strong);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.concierge-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.concierge-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-line);
}
.concierge-panel__head strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-text);
}
.concierge-panel__head small {
  color: var(--color-gold-soft);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.concierge-panel__close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.concierge-panel__close:hover { color: var(--color-text); }

.concierge-panel__log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}

.concierge-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.concierge-msg--bot {
  align-self: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
}
.concierge-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--color-gold-deep), var(--color-gold));
  color: #14100a;
  border-bottom-right-radius: 4px;
}
.concierge-msg--wait {
  color: var(--color-text-muted);
  font-style: italic;
  animation: concierge-pulse 1.4s ease-in-out infinite;
}
@keyframes concierge-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.concierge-panel__form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--color-line);
}
.concierge-panel__form input {
  flex: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: 10px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
}
.concierge-panel__form input:focus { border-color: var(--color-gold); }
.concierge-panel__form button {
  background: var(--color-gold);
  border: none;
  border-radius: 10px;
  color: #14100a;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 16px;
  cursor: pointer;
}
.concierge-panel__form button:hover { background: var(--color-gold-soft); }

@media (max-width: 767px) {
  /* no mobile o FAB vira só ícone: não cobre botões/textos da página */
  .concierge-fab {
    right: 16px;
    bottom: 88px;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .concierge-fab span { display: none; }
  .concierge-panel {
    right: 8px;
    left: 8px;
    bottom: 146px;
    width: auto;
    height: min(60dvh, 480px);
    max-height: calc(100dvh - 190px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .concierge-panel,
  .concierge-fab { transition: none; }
  .concierge-msg--wait { animation: none; }
}

/* --------------------------------------------------------------------------
   20. PÁGINA DE DETALHE DO IMÓVEL (<lang>/imovel/<codigo>.html)
   Breadcrumb, cabeçalho do imóvel, galeria com miniaturas, layout em duas
   colunas (descrição + aside de especificações), amenidades e relacionados.
   -------------------------------------------------------------------------- */

/* Breadcrumb editorial */
.breadcrumb {
  padding-top: calc(var(--header-h) + var(--space-md));
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2xs);
  color: var(--color-line-strong);
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-soft);
}

.breadcrumb a:hover {
  color: var(--color-gold-soft);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-gold);
}

/* Cabeçalho do imóvel */
.pdp-head {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-md) var(--space-lg);
}

.pdp-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.pdp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
}

.pdp-price__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  font-weight: 600;
  color: var(--color-gold-soft);
}

.pdp-price__fx {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Galeria — foto principal + faixa de miniaturas */
.pdp-gallery {
  display: grid;
  gap: var(--space-sm);
}

.pdp-gallery__main {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
}

.pdp-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-med) var(--ease-soft);
}

.pdp-gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(6.5rem, 12vw, 9rem);
  gap: var(--space-2xs);
  overflow-x: auto;
  padding-bottom: var(--space-2xs);
  scrollbar-width: thin;
}

.pdp-gallery__thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  aspect-ratio: 4 / 3;
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}

.pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-gallery__thumb:hover {
  opacity: 0.85;
  border-color: var(--color-line-strong);
}

.pdp-gallery__thumb.is-active {
  opacity: 1;
  border-color: var(--color-gold);
}

/* Layout em duas colunas: descrição + aside de especificações */
.pdp-layout {
  display: grid;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .pdp-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

.pdp-description {
  display: grid;
  gap: var(--space-md);
}

.pdp-description p {
  color: var(--color-text-soft);
  font-weight: 300;
  line-height: 1.8;
}

/* Aside com especificações, fatos e CTA */
.pdp-aside {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-top: 1px solid var(--color-gold-deep);
  border-radius: var(--radius-md);
}

@media (min-width: 1024px) {
  .pdp-aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-md));
  }
}

.pdp-specs {
  display: grid;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
}

.pdp-specs li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-small);
  color: var(--color-text-soft);
}

.pdp-specs li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pdp-specs svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  color: var(--color-gold-deep);
}

.pdp-specs strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin-right: var(--space-2xs);
}

.pdp-facts {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.pdp-facts strong {
  color: var(--color-text-soft);
  font-weight: 600;
}

/* Amenidades em grade */
.pdp-amenities {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
}

@media (min-width: 640px) {
  .pdp-amenities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pdp-amenities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pdp-amenities li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  transition: border-color var(--dur-med) var(--ease-soft);
}

.pdp-amenities li:hover {
  border-color: rgba(198, 161, 91, 0.35);
}

.pdp-amenities svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  color: var(--color-gold);
}

/* Link "voltar aos imóveis" */
.pdp-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-soft);
}

.pdp-back:hover {
  color: var(--color-gold-soft);
}

@media (prefers-reduced-motion: reduce) {
  .pdp-gallery__main img,
  .pdp-gallery__thumb,
  .pdp-amenities li {
    transition: none;
  }
}