/* =====================================================================
   CSCORRETOR - Sistema visual editorial
   Carlito de Souza - CRECI-SC 6894F

   Princípios:
   1. Espaço em branco é conteúdo. Nada encosta em nada.
   2. Uma serifada para a voz, uma sans para os dados. Só duas.
   3. Cor é acento, nunca ruído. O imóvel é o colorido da página.
   4. Movimento discreto: 200-600ms, curvas suaves, nada saltitante.
   ===================================================================== */

/* ------------------------------------------------------------- fontes */
@font-face {
  font-family: 'Cormorant'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fontes/cormorant-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('fontes/cormorant-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fontes/cormorant-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fontes/cormorant-600.woff2') format('woff2');
}
@font-face {
  font-family: 'InterCS'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fontes/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'InterCS'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fontes/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'InterCS'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fontes/inter-600.woff2') format('woff2');
}

/* ---------------------------------------------- tokens (compatibilidade)
   As variaveis reais moram em tokens.css, carregado ANTES deste arquivo.
   Este bloco so mantem vivos os nomes antigos do sistema editorial para
   que nenhum seletor precise ser reescrito. Nao acrescente cor aqui:
   acrescente em tokens.css.
   -------------------------------------------------------------------- */
:root {
  --topo-altura: 107px;   /* medido no DOM renderizado, nao chutado */

  /* neutros - apontam para os tokens da marca */
  /* [MEDIDO] #9AA0A8 dava 2,64:1 sobre branco - reprovava na regua da
     ficha do imovel. #6E747C da 4,72:1 no branco e 4,47:1 na nuvem. */
  --pedra-clara: #6E747C;
  --linha-suave: #F1F3F6;
  --areia:  var(--nuvem);
  --papel:  var(--branco);

  /* acentos - o champanhe editorial foi aposentado.
     Acento de interface = azul institucional. Acento de acao = degrade. */
  --champanhe:       var(--azul);
  --champanhe-claro: var(--azul-luz);
  --terra:           var(--azul-forte);

  /* tipografia - o titulo padrao agora e a geometrica.
     A serifada sobrevive como --serif e so aparece em escopo escuro. */
  --serif: var(--editorial);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.trava { overflow: hidden; }

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--azul); color: #fff; }

:focus-visible {
  outline: 2px solid var(--champanhe);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Esconde do olho, mantém para o leitor de tela.
   O !important nao e preguica: regras como `.form-rapido input { width:100% }`
   tem especificidade maior (0,1,1 contra 0,1,0) e venciam esta. O efeito era o
   campo honeypot anti-spam esticar a 100% fora da tela e criar rolagem
   horizontal em toda pagina que tem formulario. */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-height: 0 !important; max-width: 1px !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Trava de seguranca: nada deve gerar rolagem lateral no celular. */
html, body { overflow-x: clip; }

/* ---------------------------------------------------------- estruturas */
.env { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.env-estreito { max-width: 940px; }
.secao { padding-block: var(--secao); }
.secao-areia { background: var(--areia); }

/* --------------------------------------------------------- tipografia */
h1, h2, h3 {
  font-family: var(--sans);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-display);
  line-height: var(--altura-titulo);
  margin: 0;
}
h1 { font-weight: var(--peso-display); }

/* A serifada nao morreu: ela e a voz do alto padrao. Vive em escopo
   escuro (porta Itapema, hero LUXE) e onde a classe for pedida. */
.serif,
[data-tema="escuro"] h1, [data-tema="escuro"] h2, [data-tema="escuro"] h3,
.hero-luxe h1, .hero-luxe h2 {
  font-family: var(--editorial);
  font-weight: 600;
  letter-spacing: 0;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.2; }

.olho {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--azul);
  margin: 0 0 1.1rem;
}
.olho-claro { color: var(--champanhe-claro); }

.chamada {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--grafite);
}

.texto-editorial p {
  max-width: var(--largura-texto);
  margin: 0 0 1.35em;
  color: var(--grafite);
}
.texto-editorial p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 3.4em;
  float: left;
  line-height: .8;
  padding: .08em .12em 0 0;
  color: var(--tinta);
}

.cabecalho-secao {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.cabecalho-secao h2 { max-width: 20ch; }

/* -------------------------------------------------------------- links */
.link-linha {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--t-pequeno); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: .3rem; position: relative;
  color: var(--tinta);
}
.link-linha::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform var(--medio);
}
.link-linha:hover::after { transform: scaleX(0); transform-origin: left; }
.link-linha .seta { transition: transform var(--medio); }
.link-linha:hover .seta { transform: translateX(5px); }

/* ------------------------------------------------------------- botoes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: var(--toque); padding: 0 1.9rem;
  font-family: var(--sans); font-size: .9375rem; font-weight: 700;
  letter-spacing: -.005em;
  border: 1.5px solid transparent; border-radius: var(--raio);
  transition: background var(--rapido), color var(--rapido),
              border-color var(--rapido), transform var(--rapido),
              box-shadow var(--rapido);
}
.btn-escuro  { background: var(--tinta); color: var(--branco); }
.btn-escuro:hover { background: var(--grafite); }
.btn-linha   { background: transparent; border-color: currentColor; color: var(--tinta); }
.btn-linha { color: var(--azul); border-color: var(--azul); }
.btn-linha:hover { background: var(--azul-vidro); color: var(--azul-forte); border-color: var(--azul-forte); }
.btn-claro   { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn-claro:hover { background: #fff; color: var(--tinta); }
.btn-azul    { background: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-forte); }

/* ---------------------------------------------------------------------
   BOTAO DE CONVERSAO - um por tela, e ele e o WhatsApp.
   [MEDIDO] Texto branco sobre este degrade da 1,96:1 e reprova na
   WCAG AA. O texto e tinta: 5,56:1 a 9,15:1 em toda a extensao.
   --------------------------------------------------------------------- */
.btn-acao,
.btn-ouro {
  background: var(--acao); color: var(--acao-tinta);
  border-radius: var(--raio-pilula); box-shadow: var(--sombra-acao);
  padding-inline: 1.75rem;
}
.btn-acao:hover, .btn-ouro:hover {
  background: var(--acao-forte); color: var(--acao-tinta);
  transform: translateY(-1px);
}
.btn-bloco   { width: 100%; }

/* ==================================================== CABEÇALHO / MENU */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding-block: clamp(1rem, 2vw, 1.6rem);
  transition: background var(--medio), box-shadow var(--medio), padding var(--medio);
}
.topo .env { display: flex; align-items: center; gap: 1.5rem; }
.topo-marca { display: flex; align-items: center; gap: .85rem; }
.topo-marca .marca { flex-shrink: 0; }
@media (max-width: 560px) {
  /* O CRECI CONTINUA VISIVEL no celular. A versao anterior escondia e confiava
     no rodape; num site mobile-first isso deixa a maior parte das visitas sem
     ver o registro sem rolar a pagina. A Res. COFECI 1.065/2007 pede exibicao
     visivel e compulsoria - encolhemos a marca e o texto, nao a obrigacao. */
  .topo-marca { gap: .55rem; }
  .topo-marca .creci { display: inline; font-size: 9.5px; letter-spacing: .1em; opacity: .85; }
  .topo-marca .marca { height: 30px !important; width: 77px !important; }
}
@media (max-width: 360px) {
  .topo-marca .creci { letter-spacing: .04em; }
}
.topo-marca .creci {
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  opacity: .8; white-space: nowrap;
}
.topo-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.topo-nav a {
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  letter-spacing: -.005em; text-transform: none;
  display: inline-flex; align-items: center; min-height: var(--toque);
}
.topo-nav a:hover { color: var(--champanhe); }

/* sobre o hero escuro */
.topo-sobreposto { color: #fff; }
.topo .env { position: relative; z-index: 2; }
.topo-sobreposto::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,9,11,.34), transparent);
  pointer-events: none; transition: opacity var(--medio);
}
/* já rolou a página */
.topo.fixo {
  background: rgba(253,252,250,.94);
  backdrop-filter: saturate(180%) blur(14px);
  color: var(--tinta);
  box-shadow: 0 1px 0 var(--linha);
  padding-block: .85rem;
}
.topo.fixo::before { opacity: 0; }
.topo-sobreposto .creci { opacity: .72; }
.topo-claro { color: var(--tinta); position: sticky; background: var(--papel); border-bottom: 1px solid var(--linha); }

/* --toque = 48px e a regra da casa para dedo em celular. Estava declarada e
   nao aplicada aqui: o botao saia com 38x41 px. */
.menu-botao {
  display: none; background: none; border: 0; padding: .5rem; margin: -.5rem;
  min-width: var(--toque); min-height: var(--toque);
  /* column porque as tres barrinhas sao <span> empilhados: sem isso o flex
     as deitava lado a lado e o icone virava um traco so. */
  flex-direction: column; align-items: center; justify-content: center;
}
.menu-botao span { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 5px 0; transition: transform var(--medio), opacity var(--medio); }

@media (max-width: 880px) {
  .menu-botao { display: flex; margin-left: auto; }
  /* NAO trocar por `inset: 0`.
     O .topo tem backdrop-filter, e backdrop-filter cria bloco de contencao
     para descendentes position:fixed. Com `inset:0` o menu media a altura do
     cabecalho (75px) em vez da tela: translateY(-100%) subia so 75px e os
     links "Rural" e "Falar agora" vazavam por cima do conteudo da ficha no
     celular. Com largura e altura em unidades de viewport o calculo volta a
     ser o da tela, com ou sem bloco de contencao. */
  .topo-nav {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    background: var(--papel); color: var(--tinta);
    flex-direction: column; justify-content: center; gap: 2rem;
    transform: translateY(-100%); transition: transform var(--lento); z-index: 70;
    visibility: hidden;
  }
  .topo-nav.aberto { transform: none; visibility: visible; }
  .topo-nav a { font-size: 1.35rem; font-family: var(--sans); font-weight: 700; text-transform: none; letter-spacing: -.02em; }
}

/* ============================================================ HERO LUXE */
.hero-luxe {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; background: #0d0e10;
}
.hero-luxe video, .hero-luxe .hero-fundo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-luxe::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  /* Duas camadas: uma escurece o topo para o menu ficar legivel, outra
     ancora o texto embaixo. Calibrado para funcionar tanto sobre foto
     clara (ceu, praia) quanto sobre foto escura (interior noturno). */
  background:
    linear-gradient(180deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,.12) 26%, rgba(8,9,11,0) 42%,
                            rgba(8,9,11,.55) 74%, rgba(8,9,11,.88) 100%),
    linear-gradient(90deg, rgba(8,9,11,.34) 0%, rgba(8,9,11,0) 62%);
}
.hero-conteudo { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(4.5rem, 11vh, 7rem); }
.hero-conteudo .local {
  font-size: var(--t-micro); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.82); margin: 0 0 1.2rem;
}
.hero-conteudo h1 {
  font-size: var(--t-display); font-weight: 300; max-width: 15ch;
  text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.28);
}
.hero-rodape {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-top: clamp(1.8rem, 4vh, 3rem);
}
.hero-preco { font-family: var(--editorial); font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 600;
              font-variant-numeric: lining-nums tabular-nums; }
.hero-preco small { font-family: var(--sans); font-size: .8rem; opacity: .8; letter-spacing: .08em; }

.rolar {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  z-index: 3; display: grid; place-items: center; gap: .6rem;
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.rolar i { display: block; width: 1px; height: 42px; background: linear-gradient(rgba(255,255,255,.9), transparent); animation: desce 2.4s ease-in-out infinite; }
@keyframes desce { 0%,100% { transform: scaleY(.35); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

.som-toggle {
  position: absolute; right: var(--gutter); bottom: 2rem; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.22);
  color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px);
}

/* ======================================================= HERO MOSAICO */
.hero-mosaico { padding-top: clamp(6.5rem, 12vh, 9rem); }
.mosaico {
  display: grid; gap: 10px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: clamp(360px, 62vh, 640px);
  border-radius: 4px; overflow: hidden;
}
.mosaico figure { margin: 0; position: relative; overflow: hidden; background: var(--areia); }
.mosaico figure:first-child { grid-row: span 2; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--suave); }
.mosaico figure:hover img { transform: scale(1.045); }
.mosaico button.abrir-galeria {
  position: absolute; right: 14px; bottom: 14px;
  background: rgba(253,252,250,.92); border: 0; border-radius: 2px;
  padding: .7rem 1.1rem; font-size: var(--t-pequeno); font-weight: 600;
  letter-spacing: .06em; backdrop-filter: blur(8px); min-height: 42px;
  box-shadow: 0 2px 14px rgba(0,0,0,.14);
}
@media (max-width: 880px) {
  .mosaico {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr;
    height: 56vh; gap: 6px;
  }
  .mosaico figure:first-child { grid-column: span 2; grid-row: span 1; }
  .mosaico figure:nth-child(n+4) { display: none; }
}

.hero-titulo-standard { margin-top: clamp(2rem, 4vw, 3rem); }
.hero-titulo-standard .linha {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.hero-titulo-standard h1 { max-width: 20ch; }
.preco-standard {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.6rem); white-space: nowrap;
}
.preco-standard small { font-family: var(--sans); font-size: .78rem; color: var(--pedra); letter-spacing: .08em; display: block; }

/* ============================================================== CARDS */
.grade-imoveis {
  display: grid; gap: clamp(1.6rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.card { position: relative; }
.card-midia {
  position: relative; overflow: hidden; background: var(--nuvem);
  aspect-ratio: 4 / 3; border-radius: var(--raio);
}
.card-midia img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--suave), filter 800ms var(--suave);
}
.card:hover .card-midia img { transform: scale(1.05); }
.card-selo {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(253,252,250,.94); color: var(--tinta);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase; padding: .45rem .8rem; border-radius: var(--raio-pilula);
  backdrop-filter: blur(8px);
}
.card-selo-luxe { background: var(--tinta); color: var(--papel); }
.card-video {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(21,23,27,.55); color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(6px);
}
.card-corpo { padding-top: 1.15rem; }
.card-local {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase; color: var(--pedra); margin: 0 0 .5rem;
}
.card h3 {
  font-size: 1.3rem; margin-bottom: .55rem; text-wrap: balance;
  transition: color var(--medio);
}
.card:hover h3 { color: var(--azul); }
.card-dados {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  font-size: var(--t-pequeno); color: var(--pedra); margin-bottom: .8rem;
}
.card-dados span { display: inline-flex; align-items: center; gap: .3rem; }
.card-dados span + span::before { content: '·'; margin-right: .55rem; color: var(--linha); }
.card-dados strong { color: var(--grafite); font-weight: 600; font-variant-numeric: tabular-nums; }
.card-preco {
  font-family: var(--dados); font-weight: 600; font-size: 1.35rem; color: var(--tinta);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: .4rem;
}
.card-preco small { font-family: var(--sans); font-size: .75rem; color: var(--pedra); }
.card a.cobertura { position: absolute; inset: 0; z-index: 3; }

/* ============================================================= BUSCA */
.busca {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--raio-g); box-shadow: var(--sombra-2);
}
.busca-linha {
  display: grid; gap: 0;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  align-items: stretch;
}
.busca-campo { padding: 1rem 1.25rem; border-right: 1px solid var(--linha-suave); min-width: 0; }
.busca-campo:last-of-type { border-right: 0; }
.busca-campo label {
  display: block; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pedra); margin-bottom: .25rem;
}
.busca-campo input, .busca-campo select {
  width: 100%; border: 0; background: none; padding: 0;
  font-family: var(--sans); font-size: .95rem; color: var(--tinta);
  min-height: 34px; appearance: none;  /* alvo de toque confortavel no celular */
}
.busca-campo { padding-block: .85rem; }
.busca-campo input:focus, .busca-campo select:focus { outline: none; }
.busca-acao { display: grid; place-items: center; padding: .5rem; }
.busca-acao .btn { height: 100%; min-height: 52px; }

.busca-avancada { border-top: 1px solid var(--linha-suave); }
.busca-avancada summary {
  list-style: none; cursor: pointer; padding: .85rem 1.25rem;
  font-size: var(--t-pequeno); color: var(--pedra); display: flex; align-items: center; gap: .5rem;
}
.busca-avancada summary::-webkit-details-marker { display: none; }
.busca-avancada summary::after { content: '+'; margin-left: auto; font-size: 1.1rem; }
.busca-avancada[open] summary::after { content: '−'; }
.busca-avancada .campos {
  display: grid; gap: 1rem 1.25rem; padding: 0 1.25rem 1.35rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.busca-avancada .campos input, .busca-avancada .campos select {
  width: 100%; min-height: var(--toque); padding: .55rem .75rem;
  border: 1px solid var(--linha); border-radius: 2px; background: var(--branco);
  font-family: var(--sans); font-size: .9rem;
}

@media (max-width: 880px) {
  .busca-linha { grid-template-columns: 1fr; }
  .busca-campo { border-right: 0; border-bottom: 1px solid var(--linha-suave); }
  .busca-acao { padding: 1rem 1.25rem 1.25rem; }
  .busca-acao .btn { width: 100%; }
}

/* ======================================================= BARRA STICKY */
.barra-resumo {
  /* fixed, nao sticky: em sticky o elemento ocupa espaco no fluxo e empurra
     o hero para baixo, criando uma faixa branca no topo da pagina. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 45;
  background: rgba(253,252,250,.99); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--linha);
  transform: translateY(-101%); transition: transform var(--medio);
}
.barra-resumo.visivel { transform: none; }
/* Quando a barra do imovel sobe, o menu sai: os dois sao fixos no topo e
   competiriam pelo mesmo espaco. A barra ja carrega titulo e CTA. */
/* Cinto e suspensorio do mesmo bug: acima de 640px a barra-resumo existe e
   pode assumir o topo. Abaixo disso ela e display:none, entao transformar o
   .topo so escondia o menu e quebrava o posicionamento do .topo-nav. */
@media (min-width: 641px) {
  body.resumo-ativo .topo { transform: translateY(-102%); pointer-events: none; }
}
.topo { transition: background var(--medio), box-shadow var(--medio), padding var(--medio), transform var(--medio); }
.barra-resumo .env {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: .85rem; flex-wrap: nowrap;
}
.barra-resumo .ref {
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--pedra);
}
.barra-resumo .titulo { font-family: var(--serif); font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-indicadores { display: flex; gap: 1.6rem; margin-left: auto; }
.barra-indicadores div { text-align: right; }
.barra-indicadores dt { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--pedra); }
.barra-indicadores dd { margin: 0; font-size: .95rem; font-weight: 500; }
.barra-resumo .btn { flex-shrink: 0; }
@media (max-width: 1024px) { .barra-indicadores { display: none; } }
@media (max-width: 640px)  { .barra-resumo { display: none; } }

/* ==================================================== FICHA / DADOS */
.ficha {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--linha);
}
.ficha div {
  padding: 1.4rem 1.5rem 1.4rem 0;
  border-bottom: 1px solid var(--linha);
}
.ficha dt {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pedra); margin-bottom: .4rem;
}
.ficha dd { margin: 0; font-size: 1.05rem; }

.destaques-numericos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--linha);
}
.destaques-numericos div { text-align: center; }
.destaques-numericos .num { font-family: var(--sans); font-weight: 800; font-size: clamp(2rem, 4vw, 2.9rem);
                            line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.destaques-numericos .rot { font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--pedra); margin-top: .55rem; }

.lista-caracteristicas {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.lista-caracteristicas li {
  display: flex; align-items: center; gap: .7rem;
  font-size: .95rem; color: var(--grafite);
}
.lista-caracteristicas li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--champanhe); flex-shrink: 0;
}

/* ======================================================= VIZINHANÇA */
.vizinhanca { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .vizinhanca { grid-template-columns: 1fr; } }
.mapa {
  aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden;
  background: var(--areia); border: 1px solid var(--linha); position: relative;
}
.mapa iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.94) brightness(1.04); }
.mapa .aviso-mapa {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 2rem; color: var(--pedra); font-size: var(--t-pequeno);
}
.poi { list-style: none; padding: 0; margin: 0; }
.poi li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .95rem 0; border-bottom: 1px solid var(--linha-suave);
}
.poi .cat { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--champanhe); min-width: 108px; }
.poi .nome { flex: 1; }
.poi .dist { color: var(--pedra); font-size: var(--t-pequeno); white-space: nowrap; }

/* ==================================================== CARD DE CONTATO */
.pagina-imovel { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (max-width: 1080px) { .pagina-imovel { grid-template-columns: 1fr; } }

.card-contato {
  position: sticky; top: 100px;
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: clamp(1.6rem, 2.5vw, 2.1rem);
  box-shadow: 0 18px 48px -30px rgba(21,23,27,.42);
}
@media (max-width: 1080px) { .card-contato { position: static; } }
.card-contato .preco { font-family: var(--dados); font-weight: 600; font-size: 1.9rem; line-height: 1;
                       font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.card-contato .preco small { display: block; font-family: var(--sans); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pedra); margin-top: .5rem; }
.card-contato .custos { margin: 1.2rem 0 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--linha-suave); font-size: .9rem; color: var(--pedra); }
.card-contato .custos div { display: flex; justify-content: space-between; padding: .28rem 0; }
.corretor {
  display: flex; align-items: center; gap: .95rem;
  margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--linha-suave);
}
.corretor img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--areia); }
.corretor .nome { font-weight: 500; font-size: .95rem; }
.corretor .creci { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--pedra); }

.form-rapido { display: grid; gap: .8rem; margin-top: 1.4rem; }
.form-rapido input, .form-rapido textarea {
  width: 100%; min-height: var(--toque); padding: .75rem .9rem;
  border: 1px solid var(--linha); border-radius: 2px; background: var(--papel);
  font-family: var(--sans); font-size: .95rem;
}
.form-rapido textarea { min-height: 84px; resize: vertical; }
.consentimento {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .75rem; line-height: 1.5; color: var(--pedra);
}
.consentimento input { width: 24px; height: 24px; margin-top: 1px; flex-shrink: 0; accent-color: var(--champanhe); }

/* barra fixa mobile - conversão a 1 toque */
.barra-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; gap: .6rem; padding: .7rem var(--gutter);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(253,252,250,.96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--linha);
}
.barra-mobile .preco { flex: 1; min-width: 0; }
.barra-mobile .preco strong { font-family: var(--dados); font-weight: 600; font-size: 1.2rem; display: block;
                              line-height: 1.1; font-variant-numeric: tabular-nums; }
.barra-mobile .preco span { font-size: var(--t-micro); color: var(--pedra); letter-spacing: .1em; text-transform: uppercase; }
.barra-mobile .btn { padding-inline: 1.3rem; }
@media (max-width: 900px) {
  /* Comeca escondida: no topo da pagina o preco ja aparece no hero e a
     barra so competiria com ele. Sobe assim que o visitante rola. */
  .barra-mobile { display: flex; align-items: center; transform: translateY(105%); transition: transform var(--medio); }
  .barra-mobile.visivel { transform: none; }
  body.tem-barra-mobile { padding-bottom: 84px; }
  .rolar { display: none; }
  .som-toggle { bottom: 5.5rem; }
}

/* ============================================================ LIGHTBOX */
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(13,14,16,.97);
  display: none; flex-direction: column; opacity: 0; transition: opacity var(--medio);
}
.lightbox.aberto { display: flex; opacity: 1; }
.lightbox-topo {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem var(--gutter); color: rgba(255,255,255,.9); flex-wrap: wrap;
}
.lightbox-filtros { display: flex; gap: .5rem; overflow-x: auto; flex: 1; scrollbar-width: none; }
.lightbox-filtros::-webkit-scrollbar { display: none; }
.lightbox-filtros button {
  background: none; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.8);
  border-radius: 999px; padding: .5rem 1rem; font-size: var(--t-pequeno);
  white-space: nowrap; min-height: 40px; transition: all var(--rapido);
}
.lightbox-filtros button.ativo { background: #fff; color: var(--tinta); border-color: #fff; }
.lightbox-fechar { background: none; border: 0; color: #fff; font-size: 1.8rem; line-height: 1; padding: .3rem .6rem; }
.lightbox-palco { flex: 1; display: grid; place-items: center; padding: 0 var(--gutter) 1rem; min-height: 0; }
.lightbox-palco img { max-height: 100%; max-width: 100%; object-fit: contain; }
.lightbox-base {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  padding: 1rem var(--gutter) 1.6rem; color: rgba(255,255,255,.72); font-size: var(--t-pequeno);
}
.lightbox-base button {
  background: none; border: 1px solid rgba(255,255,255,.3); color: #fff;
  width: 46px; height: 46px; border-radius: 50%;
}

/* ============================================================= RODAPÉ */
.rodape { background: var(--tinta); color: rgba(255,255,255,.72); padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem; }
.rodape a { color: rgba(255,255,255,.72); }
.rodape a:hover { color: #fff; }
.rodape-grade {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.4fr repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.rodape .marca { font-family: var(--serif); font-size: 1.9rem; color: #fff; margin-bottom: .8rem; }
.rodape h4 { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--champanhe-claro); margin: 0 0 1.1rem; font-weight: 600; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; font-size: .9rem; }
.rodape-base {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.8rem;
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-size: var(--t-pequeno); color: rgba(255,255,255,.5);
}
.selo-creci {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid rgba(255,255,255,.22); border-radius: 2px;
  padding: .55rem .95rem; font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85);
}

/* =========================================================== UTILIDADES */
.revelar { opacity: 0; transform: translateY(26px); transition: opacity var(--lento), transform var(--lento); }
.revelar.visto { opacity: 1; transform: none; }

.paginacao { display: flex; justify-content: center; gap: .5rem; margin-top: clamp(3rem, 6vw, 5rem); flex-wrap: wrap; }
.paginacao a, .paginacao span {
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  border: 1px solid var(--linha); border-radius: 2px; font-size: .9rem; padding-inline: .6rem;
}
.paginacao .atual { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.vazio-busca { text-align: center; padding: clamp(4rem, 10vw, 7rem) 1rem; }
.vazio-busca h2 { margin-bottom: 1rem; }
.vazio-busca p { color: var(--pedra); max-width: 46ch; margin: 0 auto 2rem; }

.aviso-form { padding: .9rem 1rem; border-radius: 2px; font-size: .875rem; margin-bottom: 1rem; }
.aviso-ok  { background: #eaf4ef; color: #1c5e44; border-left: 3px solid #1c5e44; }
.aviso-erro{ background: #fbecec; color: #8f2020; border-left: 3px solid #8f2020; }

/* imagens carregando */
img[loading="lazy"] { background: var(--areia); }

/* =====================================================================
   MARCA — animação de entrada e micro-interação
   Duração total: 1,35 s. É um toque final, não o espetáculo.
   Curva: a mesma do resto do site, para o movimento parecer da mesma mão.
   ===================================================================== */
.marca { display: block; height: auto; overflow: hidden; }
.marca-mono { color: #fff; }

/* respiro: metade da altura do símbolo, como manda a norma da marca */
.marca-envolvente { display: inline-flex; padding: calc(var(--altura-marca, 34px) * 0.5); margin: calc(var(--altura-marca, 34px) * -0.5); }

.marca-luz { opacity: 0; transform: translateX(0); }
.marca-preenchimento { transition: opacity var(--medio); }

/* ------------------------------------------------------ entrada (splash) */
.marca-animada .marca-traco {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: marca-desenhar 1000ms cubic-bezier(.34,.02,.2,1) forwards;
}
.marca-animada .marca-preenchimento {
  opacity: 0;
  animation: marca-preencher 520ms var(--suave) 700ms forwards;
}
.marca-animada .marca-varredura {
  transform: translateX(0);
  animation: marca-varrer 720ms var(--suave) 760ms forwards;
}

@keyframes marca-desenhar {
  0%   { stroke-dashoffset: 1000; opacity: 1; }
  8%   { opacity: 1; }
  72%  { stroke-dashoffset: 0;    opacity: 1; }
  100% { stroke-dashoffset: 0;    opacity: 0; }
}
@keyframes marca-preencher { to { opacity: 1; } }
@keyframes marca-varrer    { to { transform: translateX(var(--varredura, 400px)); } }

/* ------------------------------------------------- micro-interação (hover) */
.marca-link { display: inline-flex; align-items: center; gap: .85rem; }
/* O pulso vai no <svg>, nunca no grupo interno: em SVG2 o atributo
   transform E a propriedade CSS transform sao a mesma coisa, entao mexer
   em transform-origin de um grupo que ja carrega translate+scale de
   layout desloca a marca inteira. Aprendido na pratica. */
.marca-link .marca {
  transform-origin: left center;
  transition: transform 520ms var(--suave);
  will-change: transform;
}
.marca-link:hover .marca,
.marca-link:focus-visible .marca { transform: scale(1.022); }

.marca-link:hover .marca-luz,
.marca-link:focus-visible .marca-luz {
  animation: marca-brilhar 900ms var(--suave);
}
@keyframes marca-brilhar {
  0%   { opacity: 0; transform: translateX(0); }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--percurso, 900px)); }
}

/* -------------------------------------------------------- splash screen */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--papel);
  animation: splash-sair 460ms var(--suave) 1450ms forwards;
}
.splash-escura { background: var(--tinta); }
.splash .marca { width: min(300px, 62vw); }
@keyframes splash-sair {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* --------------------------------- quem pediu menos movimento, recebe menos */
@media (prefers-reduced-motion: reduce) {
  .marca-animada .marca-traco { display: none; }
  .marca-animada .marca-preenchimento { opacity: 1; animation: none; }
  .marca-animada .marca-varredura { transform: translateX(var(--varredura, 400px)); animation: none; }
  .marca-link:hover .marca-simbolo { transform: none; }
  .marca-link:hover .marca-luz { animation: none; }
  .splash { animation: splash-sair 1ms linear 200ms forwards; }
}

/* ------------------------------------------------- mapa com consentimento */
/* [LGPD] Fachada do mapa. O iframe do OpenStreetMap so e criado no clique,
   para que o IP do visitante nao saia do site sem que ele peca. */
.mapa-consentir {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem; padding: 2rem; text-align: center;
  background: var(--areia); border: 0; cursor: pointer;
  transition: background var(--medio);
}
.mapa-consentir:hover { background: var(--linha-suave); }
.mapa-consentir-titulo {
  font-size: var(--t-pequeno); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta);
  border-bottom: 1px solid currentColor; padding-bottom: .3rem;
}
.mapa-consentir-nota {
  font-size: var(--t-micro); line-height: 1.55; color: var(--pedra); max-width: 34ch;
}

/* ------------------------------------------------- alvos de toque (48px) */
/* A regra da casa e --toque: 48px. Estava declarada e nao chegava aos
   controles nativos: os <select> saiam com 34px e o link da marca com 30px.
   Em celular isso e erro de toque, que no site custa lead. */
select, .ordenar select, .busca-campo select, .busca-avancada select {
  min-height: var(--toque);
}
.topo-marca { min-height: var(--toque); padding-block: .35rem; }
@media (hover: none) {
  .link-linha { padding-block: .55rem; }
}

/* ------------------------------------------ menu mobile: saida garantida */
/* O .topo-nav aberto tem z-index 70 e o .topo tem 60: o proprio botao de
   fechar ficava embaixo do menu. Quem abria o menu no celular so saia
   escolhendo um link ou recarregando a pagina. Com o menu aberto o
   cabecalho sobe para 80 e o X volta a ser clicavel. */
/* O .topo-nav e FILHO do .topo. Subir o z-index do pai nao resolve: dentro
   do mesmo contexto de empilhamento o filho com z-index 70 pinta por cima do
   botao. Quem precisa subir e o proprio botao. */
body.trava .topo { z-index: 80; }
body.trava .menu-botao { position: relative; z-index: 90; color: var(--tinta); }

/* =====================================================================
   ============  HOME v2 — AS DUAS PORTAS DE ENTRADA  ==================
   Acrescentado em 31/07/2026 junto com o Sistema de Design v1.0.
   Tudo aqui consome tokens.css. Nenhum hexadecimal escrito a mao.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A dobra. Duas portas, dois publicos, duas linguagens visuais.
   No computador ficam lado a lado e a focada cresce; no celular ficam
   empilhadas e ABERTAS - toque nao tem hover, e uma porta que so se
   revela no hover fica morta em 70% das visitas.
   --------------------------------------------------------------------- */
.portas {
  display: flex; flex-direction: column; gap: 0;
  background: var(--noite);
}
.porta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 62svh;
  padding: clamp(1.6rem, 5vw, 3.6rem);
  padding-bottom: clamp(2.4rem, 5vw, 3.6rem);
  transition: flex var(--medio), filter var(--medio);
}
.porta-fundo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform 1200ms var(--suave);
}
.porta:hover .porta-fundo, .porta:focus-within .porta-fundo { transform: scale(1.10); }
.porta::after {   /* veu de legibilidade - o texto nunca depende da foto */
  content: ''; position: absolute; inset: 0; z-index: -1;
}
.porta-escura::after {
  background: linear-gradient(175deg, rgba(11,15,25,.62) 0%, rgba(11,15,25,.30) 42%, rgba(11,15,25,.93) 100%);
}
.porta-clara::after {
  background: linear-gradient(175deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.50) 38%, rgba(255,255,255,.96) 100%);
}

.porta-escura { color: var(--claro); }
.porta-clara  { color: var(--tinta); }

.porta .rotulo {
  font-family: var(--dados); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  margin: 0 0 .9rem; display: flex; align-items: center; gap: .55rem;
}
.porta-escura .rotulo { color: var(--azul-luz); }
.porta-clara  .rotulo { color: var(--azul); }
.porta .rotulo::before {
  content: ''; width: 26px; height: 1px; background: currentColor; opacity: .7;
}

.porta h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 0 0 .7rem; }
.porta-escura h2 { font-family: var(--editorial); font-weight: 600; letter-spacing: 0; }
.porta-clara  h2 { font-family: var(--sans); font-weight: 800; letter-spacing: var(--tracking-display); }
.porta p.linha { max-width: 40ch; font-size: 1rem; margin: 0 0 1.5rem; }
.porta-escura p.linha { color: var(--claro-2); }
/* [MEDIDO] --pedra sobre a arte da porta clara dava 4,01:1. O texto
   nao pode depender da imagem: sobe para --grafite. */
.porta-clara  p.linha { color: var(--grafite); }

/* O dado com fonte. TER-04: numero sem procedencia nao entra na tela. */
.indice-porta {
  display: inline-flex; flex-direction: column; gap: .18rem;
  padding: .8rem 1.1rem; border-radius: var(--raio);
  margin-bottom: 1.6rem; align-self: flex-start;
  font-variant-numeric: tabular-nums;
}
.porta-escura .indice-porta { background: rgba(255,255,255,.07); border: 1px solid var(--noite-linha); }
.porta-clara  .indice-porta { background: var(--azul-vidro); border: 1px solid rgba(21,90,157,.14); }
.indice-porta .num { font-family: var(--sans); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; line-height: 1.1; }
.indice-porta .var { font-size: var(--t-pequeno); font-weight: 600; }
.porta-escura .indice-porta .var { color: var(--azul-luz); }
.porta-clara  .indice-porta .var { color: var(--sucesso); }
.indice-porta .fonte { font-size: var(--t-micro); opacity: .72; letter-spacing: .02em; }

.porta .acoes { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.btn-fantasma {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--toque); padding: 0 1.5rem;
  font-family: var(--sans); font-weight: 700; font-size: .9375rem;
  border-radius: var(--raio); border: 1.5px solid rgba(255,255,255,.34);
  color: var(--claro); background: transparent;
  transition: border-color var(--rapido), color var(--rapido), background var(--rapido);
}
.btn-fantasma:hover { border-color: var(--azul-luz); color: var(--azul-luz); background: rgba(121,182,236,.08); }

.porta .creci-porta {
  position: absolute; right: clamp(1.6rem, 5vw, 3.6rem); bottom: 1rem;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .1em; opacity: .8;
}

@media (min-width: 900px) {
  .portas { flex-direction: row; min-height: calc(100svh - var(--topo-altura)); }
  .porta  { flex: 1; min-height: 0; }
  /* Escurece as irmas, nao a focada. Ganho de foco sem piscar. */
  .portas:hover .porta:not(:hover) { filter: brightness(.82) saturate(.9); }
  .porta:hover, .porta:focus-within { flex: 1.16; }
}
@media (prefers-reduced-motion: reduce) {
  .porta, .porta-fundo, .portas:hover .porta:not(:hover) { transition: none; filter: none; }
}

/* ---------------------------------------------------------------------
   Faixa de credencial. Compliance como argumento de venda, nao como
   letra miuda de rodape.
   --------------------------------------------------------------------- */
.faixa-credencial {
  background: var(--tinta); color: var(--claro);
  padding: 1.1rem var(--gutter);
}
.faixa-credencial .env {
  display: flex; flex-wrap: wrap; gap: .9rem clamp(1.2rem, 3vw, 2.8rem);
  align-items: center; justify-content: center; text-align: center;
  font-size: var(--t-pequeno);
}
.faixa-credencial span { display: inline-flex; align-items: center; gap: .5rem; }
.faixa-credencial svg { flex: none; color: var(--azul-luz); }

/* ---------------------------------------------------------------------
   Painel de dado proprietario. Cada numero traz fonte e data ao lado.
   --------------------------------------------------------------------- */
.painel-dados { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
@media (min-width: 760px) { .painel-dados { grid-template-columns: repeat(3, 1fr); } }
.painel-dados > div { background: var(--branco); padding: clamp(1.4rem, 3vw, 2.2rem); }
.painel-dados .num {
  font-family: var(--sans); font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3rem);
  letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--tinta); margin: 0 0 .35rem;
}
.painel-dados .rot { font-family: var(--sans); font-weight: 700; font-size: 1rem; margin: 0 0 .5rem; }
.painel-dados .exp { font-size: .9rem; color: var(--pedra); margin: 0 0 1rem; line-height: 1.5; }
.painel-dados .fonte {
  font-size: var(--t-micro); color: var(--pedra); letter-spacing: .04em;
  border-top: 1px solid var(--linha); padding-top: .7rem; margin: 0;
}
.painel-dados .fonte a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------
   Destaque cinematografico do imovel de capa.
   --------------------------------------------------------------------- */
.cinema { position: relative; isolation: isolate; overflow: hidden; background: var(--noite); color: var(--claro); }
.cinema img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cinema::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11,15,25,.92) 0%, rgba(11,15,25,.62) 46%, rgba(11,15,25,.24) 100%); }
.cinema .env { padding-block: clamp(4rem, 10vw, 7.5rem); }
.cinema h2 { font-family: var(--editorial); font-weight: 600; letter-spacing: 0; max-width: 16ch; margin: 0 0 1rem; }
.cinema .preco { font-family: var(--sans); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 0 0 1.6rem; }
.cinema .atributos { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: var(--claro-2);
  font-size: .9rem; margin: 0 0 1.8rem; font-variant-numeric: tabular-nums; }
.cinema .acoes { display: flex; gap: .7rem; flex-wrap: wrap; }

/* --------------------------------------------------- selo de autorizacao */
.selo-autorizado {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .04em;
  padding: .32rem .65rem; border-radius: var(--raio-pilula);
  background: var(--sucesso-suave); color: var(--sucesso); margin-bottom: 1rem;
}
.cinema .selo-autorizado { background: rgba(18,128,92,.20); color: #6FD9B4; }

/* O cabecalho encolhe no celular; a dobra tem que saber disso. */
@media (max-width: 560px) { :root { --topo-altura: 81px; } }

/* Botao de acao no topo. No celular ele desce para dentro do menu. */
.topo-acao { padding-inline: 1.25rem; }

/* =====================================================================
   ACABAMENTO DE ERGONOMIA — 31/07/2026
   Encontrado medindo o DOM renderizado, nao lendo o CSS: a auditoria
   com Playwright a 390 e 1366 px flagrou oito controles abaixo de 44 px.
   O DESIGN_SYSTEM.md manda 48 px; link corrido dentro de frase e a unica
   excecao (WCAG 2.2, criterio 2.5.8, excecao "inline").
   ===================================================================== */

/* O campo de valor da busca vinha com 34 px. Era o unico controle de
   formulario fora da regra em todo o site. */
.busca-campo { padding-block: .35rem; }
.busca-campo input, .busca-campo select {
  min-height: var(--toque);   /* o alvo e o proprio controle, nao a caixa */
  font-size: 16px;            /* abaixo disso o iOS da zoom sozinho */
}

/* Link de secao ("Ver a carteira completa") e alvo isolado, nao inline. */
.link-linha { min-height: var(--toque); }

/* Listas do rodape: item de lista nao tem a excecao de link corrido. */
.rodape ul { gap: 0; }
.rodape ul li a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: .25rem;
}

/* "consultar", "Ver a fonte": ficam dentro de frase, mas ganham folga
   para chegar aos 24 px minimos do criterio 2.5.8. */
.painel-dados .fonte a, .fonte a { display: inline-block; padding-block: .35rem; }

/* Links soltos em lista de texto corrido (politica de privacidade) e o
   "Ver a fonte" da ficha: 24 px minimos do criterio 2.5.8. */
.texto-editorial li a, .texto-editorial a, .fonte-dado a, a.fonte-dado {
  display: inline-block; padding-block: .3rem;
}

/* ---------------------------------------------------------------------
   O botao de conversao fica FORA do <nav>. No celular o nav vira gaveta;
   se o WhatsApp morasse dentro dele, o unico caminho de conversao sumiria
   da dobra em ~70% das visitas. Ele fica sempre visivel; abaixo de 420 px
   encolhe para o icone, para nao espremer a marca (e o CRECI, que e
   obrigatorio - Res. COFECI 1.065/2007).
   --------------------------------------------------------------------- */
.topo-acao { margin-left: auto; padding-inline: 1.25rem; }
@media (min-width: 901px) { .topo-acao { margin-left: 0; order: 3; } }
@media (max-width: 900px) {
  .menu-botao { margin-left: .6rem; }
}
@media (max-width: 420px) {
  .topo-acao { padding-inline: 0; width: var(--toque); }
  .topo-acao span { display: none; }
}

/* Cabecalho sobre foto escura: o botao contornado precisa de cor clara. */
.topo-sobreposto .topo-acao-discreta {
  color: #fff; border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08); backdrop-filter: blur(6px);
}
.topo-sobreposto .topo-acao-discreta:hover { background: #fff; color: var(--tinta); border-color: #fff; }

/* ---------------------------------------------------------------------
   Tarja do modo demonstracao. z-index 95: fica ABAIXO do lightbox (120)
   e do menu aberto (90/70 sao do cabecalho, que e outro contexto), e
   no RODAPE - no topo ela interceptava o clique nos filtros da galeria.
   --------------------------------------------------------------------- */
.tarja-demo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--erro); color: #fff;
  display: flex; align-items: center; justify-content: center;
  gap: .3rem 1rem; flex-wrap: wrap; text-align: center;
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom, 0px));
  font-family: var(--dados); font-size: var(--t-pequeno); line-height: 1.4;
}
.tarja-demo strong { letter-spacing: .1em; font-weight: 700; }
.tarja-demo span { opacity: .92; }
body:has(.tarja-demo) { padding-bottom: 64px; }
.selo-pendente { background: var(--alerta-suave); color: var(--alerta); }
.cinema .selo-pendente { background: rgba(154,91,0,.28); color: #F2C078; }

/* A tarja de demonstracao e fixa no rodape da TELA e cobria o CRECI que
   fica no rodape de cada porta - achado medindo o pixel, nao lendo o CSS.
   Com a tarja no ar, o CRECI sobe. Res. COFECI 1.065/2007 pede exibicao
   visivel: coberto por uma tarja vermelha nao conta. */
body:has(.tarja-demo) .porta .creci-porta { bottom: 4.2rem; }
@media (max-width: 900px) {
  body:has(.tarja-demo) .porta:not(:last-child) .creci-porta { bottom: 1rem; }
}