/* Vão Livre Imóveis · site público · conceito "Planta baixa"
   Ordem: base, peças repetidas (faixa, topo, rodapé, botão, cota, carimbo, cartão),
   depois as páginas. Cores e fontes vêm de tokens.css. */

/* ---------- base ---------- */

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

/* Sem isto, elemento com display definido por classe não some com o atributo hidden. */
[hidden] { display: none !important; }

html {
  -webkit-tap-highlight-color: rgb(180 71 42 / 0.14);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--grafite);
  font: 400 var(--t-texto)/1.55 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Sem o atraso do toque duplo para zoom nos controles. */
a, button, input, select, textarea, label { touch-action: manipulation; }

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

::selection { background: var(--terracota-escura); color: var(--papel); }

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.miolo {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

/* Malha de prancha: quadriculado fino atrás dos cabeçalhos. */
.malha {
  background-image:
    linear-gradient(var(--malha) 1px, transparent 1px),
    linear-gradient(90deg, var(--malha) 1px, transparent 1px);
  background-size: var(--modulo) var(--modulo);
  background-position: center top;
}

/* ---------- faixa de demonstração ---------- */

.faixa {
  padding: 0.5rem var(--margem);
  background: var(--grafite);
  color: var(--papel);
  font: 400 0.6875rem/1.3 var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.pular {
  position: absolute;
  left: var(--margem);
  top: -4rem;
  z-index: 20;
  padding: 0.75rem 1rem;
  background: var(--grafite);
  color: var(--papel);
}

.pular:focus { top: 0.5rem; }

/* ---------- topo ---------- */

.topo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem 1.5rem;
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 1rem var(--margem) 0;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  justify-self: start;
  text-decoration: none;
}

.marca-sinal { width: 1.75rem; height: 1.75rem; flex: none; }
.marca-sinal .giro { color: var(--terracota); }

.marca-nome {
  font: 400 1.625rem/1 var(--fonte-titulo);
  letter-spacing: -0.01em;
}

.marca-ramo {
  font: 400 0.625rem/1 var(--fonte-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite-2);
}

.topo-acao { grid-column: 2; grid-row: 1; justify-self: end; }

.nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 0.25rem 1.5rem;
  margin-inline: calc(var(--margem) * -1);
  padding: 0.25rem var(--margem) 0;
  border-bottom: 1px solid var(--linha);
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar { display: none; }

.nav a {
  position: relative;
  padding: 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--terracota);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio) var(--curva);
}

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

@media (min-width: 52rem) {
  .topo {
    grid-template-columns: auto 1fr auto;
    padding-block: 1.125rem;
    border-bottom: 1px solid var(--linha);
    max-width: none;
    padding-inline: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)));
  }

  .topo-acao { grid-column: 3; }

  .nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    gap: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
  }

  .nav a { padding: 0.5rem 0; }
}

/* ---------- botões, com linha de cota que estica ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 2.875rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--grafite);
  border-radius: 0;
  background: var(--grafite);
  color: var(--papel);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rapido), color var(--rapido), border-color var(--rapido);
}

/* A cota: um traço com dois tiques nas pontas, como em desenho técnico. */
.botao::after {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 0.5rem;
  border-inline: 1px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  transition: width var(--medio) var(--curva);
}

.botao:hover::after,
.botao:focus-visible::after { width: 2.25rem; }

.botao:hover { background: var(--terracota-escura); border-color: var(--terracota-escura); }

.botao-destaque { background: var(--terracota-escura); border-color: var(--terracota-escura); }
.botao-destaque:hover { background: var(--grafite); border-color: var(--grafite); }

.botao-claro { background: transparent; color: var(--grafite); }
.botao-claro:hover { background: var(--grafite); color: var(--papel); border-color: var(--grafite); }

.botao-pequeno { min-height: 2.5rem; padding: 0.5rem 0.875rem; font-size: 0.875rem; }

.botao-simples {
  padding: 0.25rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--terracota-escura);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.botao-simples:hover { color: var(--grafite); }

/* ---------- cota: rótulo de seção com linha de medida ---------- */

.cota {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font: 400 var(--t-mono)/1.2 var(--fonte-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite-2);
}

.cota-num { color: var(--terracota-escura); }

.cota::after {
  content: "";
  flex: 1;
  height: 0.5rem;
  min-width: 2rem;
  border-inline: 1px solid var(--linha-media);
  background: linear-gradient(var(--linha-media), var(--linha-media)) center / 100% 1px no-repeat;
}

/* ---------- cabeçalho de página ---------- */

.cabecalho {
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-bottom: 1px solid var(--linha);
}

.cabecalho .cota { margin-bottom: 1.25rem; }

.titulo-pagina { font-size: var(--t-h1); }

.cabecalho-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.contagem {
  min-height: 1.2em;
  font: 400 var(--t-pequeno)/1.2 var(--fonte-mono);
  letter-spacing: 0.04em;
  color: var(--grafite-2);
}

/* ---------- selo e carimbo de situação ---------- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  background: var(--papel);
  color: var(--disponivel);
  font: 400 0.6875rem/1 var(--fonte-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.selo::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

/* O carimbo: caixa dupla, torta, como batida à mão sobre a prancha. */
.carimbo {
  display: inline-block;
  padding: 0.4rem 0.7rem 0.35rem;
  border: 2px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 2px;
  background: rgb(244 241 234 / 0.9);
  font: 400 0.8125rem/1 var(--fonte-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-5deg);
}

.carimbo-negociacao { color: var(--negociacao); }
.carimbo-vendido { color: var(--vendido); }
.carimbo-alugado { color: var(--alugado); }

/* ---------- cartão de imóvel ---------- */

.grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 2vw, 2rem);
  list-style: none;
}

@media (min-width: 40rem) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cartao {
  position: relative;
  min-width: 0;
  height: 100%;
  background: var(--papel-claro);
}

/* Contorno do cartão. Na Tarefa de animações ele passa a se desenhar como traço de planta. */
.cartao-traco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.cartao-traco rect {
  fill: none;
  stroke: var(--grafite);
  stroke-width: 1;
}

.cartao-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.cartao-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0.5rem 0.5rem 0;
  overflow: hidden;
  background: var(--papel-fundo);
}

.cartao-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--curva);
}

.cartao-link:hover .cartao-foto img,
.cartao-link:focus-visible .cartao-foto img { transform: scale(1.04); }

.cartao-foto .selo { position: absolute; left: 0.5rem; top: 0.5rem; }
.cartao-foto .carimbo { position: absolute; right: 0.875rem; bottom: 0.875rem; }

.cartao-fechado .cartao-foto img { filter: grayscale(1) contrast(0.92); opacity: 0.82; }

.planta {
  width: 100%;
  height: 100%;
  color: var(--grafite-2);
}

.planta .fino { stroke-width: 0.75; opacity: 0.7; }
.planta .giro { color: var(--terracota); }

.planta-nota {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  font: 400 0.625rem/1 var(--fonte-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite-3);
}

.cartao-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1rem 1.125rem;
}

.cartao-meta {
  font: 400 0.6875rem/1.3 var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite-3);
}

.cartao-titulo {
  font-size: var(--t-h3);
  line-height: 1.05;
}

.cartao-local { font-size: var(--t-pequeno); color: var(--grafite-2); }

.cartao-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linha);
  list-style: none;
  font: 400 var(--t-mono)/1.3 var(--fonte-mono);
  color: var(--grafite-2);
}

.cartao-preco {
  margin-top: auto;
  padding-top: 0.5rem;
  font: 400 1.0625rem/1.2 var(--fonte-mono);
  letter-spacing: -0.01em;
}

.cartao-fechado .cartao-preco { color: var(--grafite-3); font-size: var(--t-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* Cartão fantasma enquanto carrega */
.cartao-fantasma { border: 1px solid var(--linha); }
.cartao-fantasma .cartao-foto { background: var(--papel-fundo); }
.fantasma-linha { height: 0.75rem; background: var(--papel-fundo); }
.fantasma-linha.curta { width: 40%; }
.fantasma-linha.media { width: 70%; height: 1.5rem; }

/* ---------- filtros ---------- */

.busca { min-height: 100vh; padding-block: clamp(1.25rem, 1rem + 1.5vw, 2.25rem) var(--vao); }

.filtros {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.segmento {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--grafite);
}

.segmento label {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

.segmento label + label { border-left: 1px solid var(--grafite); }

/* O rádio cobre o rótulo inteiro, invisível: o toque e o teclado funcionam como num rádio comum. */
.segmento input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmento label:has(input:checked) { background: var(--grafite); color: var(--papel); }
.segmento label:has(input:focus-visible) { outline: 2px solid var(--terracota); outline-offset: 3px; }

.filtros-abrir {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--grafite);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

.filtros-abrir[aria-expanded="true"] { background: var(--papel-fundo); }

.filtros-mais {
  grid-column: 1 / -1;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 0.75rem;
  padding: 1rem;
  border: 1px solid var(--linha);
  background: var(--papel-claro);
}

.filtros-mais.aberto { display: grid; }

.campo { display: grid; gap: 0.375rem; min-width: 0; }

.campo > span {
  font: 400 0.6875rem/1.2 var(--fonte-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite-2);
}

.campo select,
.campo input,
.campo textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--linha-media);
  border-radius: 0;
  background: var(--papel);
  font-size: 1rem;
}

.campo select {
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--grafite) 50%), linear-gradient(135deg, var(--grafite) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 55%, calc(100% - 0.7rem) 55%;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

.campo select:focus-visible,
.campo input:focus-visible,
.campo textarea:focus-visible { outline-offset: 0; border-color: var(--terracota); }

.filtros-limpar { grid-column: 1 / -1; justify-self: start; }

@media (min-width: 64rem) {
  .filtros { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 1rem; }
  .filtros-abrir { display: none; }
  .filtros-mais,
  .filtros-mais.aberto {
    grid-column: auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    padding: 0;
    border: 0;
    background: none;
  }
  .filtros-limpar { grid-column: 1 / -1; }
  /* No computador os seis campos dividem uma linha: letra um pouco menor para o rótulo caber. */
  .filtros-mais .campo select,
  .filtros-mais .campo input { padding-inline: 0.625rem; font-size: 0.9375rem; }
  .filtros-mais .campo select { padding-right: 1.75rem; }
}

/* ---------- estados: carregando, vazio, sem resultado, erro ---------- */

.estado[data-estado="lista"] { display: none; }

.estado-caixa {
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: 38rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px dashed var(--linha-media);
}

.estado-caixa h2 { font-size: var(--t-h3); }
.estado-caixa p { color: var(--grafite-2); }
.estado-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }

/* ---------- rodapé: o "carimbo" da prancha ---------- */

.rodape {
  margin-top: auto;
  border-top: 1px solid var(--grafite);
  background: var(--papel-fundo);
}

.rodape-miolo {
  display: grid;
  gap: 2rem;
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) var(--margem);
}

.rodape-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.rodape-nav a { font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; }
.rodape-nav a:hover { border-bottom-color: currentColor; }

.rodape-contato { display: grid; gap: 0.5rem; justify-items: start; }
.rodape-contato a { font-weight: 500; }

.exemplo {
  font-size: var(--t-pequeno);
  color: var(--grafite-2);
}

.prancha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--grafite);
  background: var(--papel);
  font: 400 0.6875rem/1.35 var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prancha div { padding: 0.625rem 0.75rem; border: 0 solid var(--grafite); min-width: 0; }
.prancha div:nth-child(odd) { border-right-width: 1px; }
.prancha div:nth-child(n + 3) { border-top-width: 1px; }
.prancha dt { color: var(--grafite-3); }
.prancha dd { margin: 0.125rem 0 0; overflow-wrap: anywhere; }

.rodape-fim {
  padding: 1rem var(--margem);
  border-top: 1px solid var(--linha);
  font-size: var(--t-pequeno);
  color: var(--grafite-2);
  text-align: center;
}

@media (min-width: 52rem) {
  .rodape-miolo { grid-template-columns: 1.1fr 1fr 22rem; align-items: start; }
}

@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;
  }
}

/* ---------- página do imóvel ---------- */

.titulo-imovel { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem); max-width: 22ch; }
.imovel-local { margin-top: 0.75rem; font-size: var(--t-lead); color: var(--grafite-2); }

.imovel-aviso { padding-block: var(--vao); }
.imovel-aviso h1 { font-size: var(--t-h2); }
/* Enquanto carrega, a página ocupa a tela toda: o rodapé não aparece para depois ser empurrado. */
.imovel[data-estado="carregando"] { min-height: 100vh; }

.imovel-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) var(--vao);
}

.imovel-fotos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; min-width: 0; }

.imovel-foto,
.imovel-miniatura {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--grafite);
  background: var(--papel-fundo);
  overflow: hidden;
  cursor: zoom-in;
}

div.imovel-foto { cursor: default; }
.imovel-foto-abrir { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* A moldura corta o que passa da borda: o contorno de foco fica por dentro para não sumir. */
.imovel-foto-abrir:focus-visible { outline-offset: -4px; }
/* Carimbo e selo ficam por cima da foto sem roubar o toque que abre a galeria. */
.imovel-foto .selo, .imovel-foto .carimbo { pointer-events: none; }
.imovel-foto { aspect-ratio: 4 / 3; }
.imovel-miniatura { aspect-ratio: 4 / 3; }

.imovel-foto img,
.imovel-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--curva);
}

.imovel-foto:hover img,
.imovel-miniatura:hover img { transform: scale(1.03); }

.imovel-foto .selo { position: absolute; left: 0.75rem; top: 0.75rem; }
.imovel-foto .carimbo { position: absolute; right: 1.25rem; bottom: 1.25rem; font-size: 1rem; }

.imovel-miniaturas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  min-width: 0;
}

.imovel-mais {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(30 33 36 / 0.62);
  color: var(--papel);
  font: 400 1.125rem/1 var(--fonte-mono);
}

.imovel-lado {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: 1.25rem;
  border: 1px solid var(--grafite);
  background: var(--papel-claro);
}

.imovel-preco { font: 400 clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem)/1.05 var(--fonte-mono); letter-spacing: -0.03em; }
.imovel-fechado { font-size: var(--t-lead); color: var(--grafite-2); }

.imovel-ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1rem;
  padding-block: 1.125rem;
  border-block: 1px solid var(--linha);
  list-style: none;
}

.ficha-numero { font: 400 1.75rem/1 var(--fonte-titulo); }
.ficha-rotulo { font: 400 var(--t-mono)/1.2 var(--fonte-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--grafite-2); }

.imovel-acao { width: 100%; }
.imovel-codigo { font: 400 var(--t-mono)/1.2 var(--fonte-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grafite-3); }

.imovel-texto { display: grid; gap: 1.5rem; justify-items: start; min-width: 0; }
.imovel-texto h2 { font-size: var(--t-h2); }

.imovel-descricao {
  max-width: 62ch;
  font-size: var(--t-lead);
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.imovel-dados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 40rem;
  margin: 0;
  border-top: 1px solid var(--grafite);
}

.imovel-dados div { padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--linha); min-width: 0; }
.imovel-dados dt { font: 400 0.6875rem/1.2 var(--fonte-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grafite-3); }
.imovel-dados dd { margin: 0.25rem 0 0; overflow-wrap: anywhere; }

@media (min-width: 60rem) {
  .imovel-corpo { grid-template-columns: minmax(0, 1.75fr) minmax(18rem, 1fr); align-items: start; }
  .imovel-fotos { grid-column: 1; }
  .imovel-lado { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 1.5rem; }
  .imovel-texto { grid-column: 1; }
}

/* ---------- galeria em tela cheia ---------- */

.galeria {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--grafite);
  color: var(--papel);
  overflow: hidden;
}

.galeria::backdrop { background: var(--grafite); }
.galeria, .confirmacao { overscroll-behavior: contain; }
.galeria-aberta { overflow: hidden; }

.galeria-barra {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem var(--margem);
}

.galeria-contador { font: 400 var(--t-pequeno)/1 var(--fonte-mono); letter-spacing: 0.08em; }

.galeria-fechar,
.galeria-seta {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid rgb(244 241 234 / 0.5);
  background: rgb(30 33 36 / 0.6);
  color: var(--papel);
  font: 400 var(--t-pequeno)/1 var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.galeria-fechar:hover,
.galeria-seta:hover { background: var(--papel); color: var(--grafite); }
.galeria-seta[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.galeria-seta[aria-disabled="true"]:hover { background: rgb(30 33 36 / 0.6); color: var(--papel); }

.galeria-seta { position: absolute; top: 50%; z-index: 2; display: none; transform: translateY(-50%); font-size: 1.125rem; }
.galeria-anterior { left: var(--margem); }
.galeria-proxima { right: var(--margem); }

@media (hover: hover) and (pointer: fine) { .galeria-seta { display: block; } }

.galeria-palco { position: absolute; inset: 0; overflow: hidden; }

/* Três quadros lado a lado; o do meio é a foto atual. */
.galeria-trilho {
  display: flex;
  width: 300%;
  height: 100%;
  transform: translateX(calc(-100% / 3));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.galeria-trilho.deslizando { cursor: grabbing; }

.galeria-quadro {
  flex: none;
  width: calc(100% / 3);
  height: 100%;
  display: grid;
  place-items: center;
  padding: 4rem var(--margem) 1.5rem;
}

.galeria-quadro img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- início: abertura ---------- */

/* A abertura ocupa a primeira tela: o que vem depois (destaques, que dependem do banco) entra abaixo dela sem empurrar nada à vista. */
.abertura { display: grid; align-items: center; min-height: calc(100svh - 7.5rem); border-bottom: 1px solid var(--linha); }

.abertura-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2rem, 1.25rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.abertura-texto { display: grid; gap: 1.5rem; min-width: 0; }

/* Título na largura exata da coluna, sem cortar: o tamanho sai da largura da caixa dividida
   pela razão da linha, medida na fonte real (ferramentas/fontes.py grava em medidas.json). */
.abertura-titulo {
  container-type: inline-size;
  display: grid;
  gap: 0.02em;
  line-height: 0.9;
  letter-spacing: 0;
  text-wrap: nowrap;
}

.abertura-linha {
  display: block;
  font-size: min(calc(100cqi / var(--razao, 5)), 11.5rem);
  white-space: nowrap;
}

.abertura-italico { font-style: italic; color: var(--terracota-escura); }

.abertura-lead { max-width: 34rem; font-size: var(--t-lead); color: var(--grafite-2); }

.busca-rapida {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid var(--grafite);
  background: var(--papel-claro);
}

.busca-rapida .segmento,
.busca-rapida .botao { grid-column: 1 / -1; }

@media (min-width: 40rem) {
  .busca-rapida { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .busca-rapida .botao { grid-column: auto; }
}

.abertura-desenho { position: relative; min-width: 0; }
.planta-grande { width: 100%; height: auto; color: var(--grafite); }
.planta-grande .cotas { color: var(--grafite-3); }
.planta-grande .giros { color: var(--terracota); }
.planta-grande text { font: 400 11px var(--fonte-mono); letter-spacing: 0.14em; color: var(--grafite-2); }
.abertura-desenho .planta-nota { position: static; margin-top: 0.5rem; text-align: right; }

@media (min-width: 64rem) {
  .abertura-grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* ---------- seções ---------- */

.secao { padding-block: var(--vao); }
.secao-fundo { background: var(--papel-fundo); border-block: 1px solid var(--linha); }
.secao .cota { margin-bottom: 1.25rem; }
.secao h2 { font-size: var(--t-h2); }

.secao-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

/* Bairros como índice de prancha: nome grande, contagem em mono, linha embaixo. */
.indice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  list-style: none;
  border-top: 1px solid var(--grafite);
}

@media (min-width: 48rem) { .indice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.indice a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linha-media);
  text-decoration: none;
  transition: padding var(--medio) var(--curva), color var(--rapido);
}

.indice a:hover,
.indice a:focus-visible { padding-inline: 0.75rem; color: var(--terracota-escura); }

.indice-nome { font: 400 clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem)/1.1 var(--fonte-titulo); min-width: 0; overflow-wrap: anywhere; }
.indice-total { flex: none; font: 400 var(--t-mono)/1 var(--fonte-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grafite-2); }

.como { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4rem); }
.como-titulo { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.como-titulo .cota { width: 100%; margin-bottom: 0; }

.como-lista { display: grid; gap: 0; list-style: none; counter-reset: passo; border-top: 1px solid var(--grafite); }

.como-lista li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.375rem 0.75rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linha-media);
  counter-increment: passo;
}

.como-lista li::before {
  content: counter(passo, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 0.4rem;
  font: 400 var(--t-mono)/1 var(--fonte-mono);
  letter-spacing: 0.08em;
  color: var(--terracota-escura);
}

.como-lista h3 { font-size: var(--t-h3); }
.como-lista p { grid-column: 2; color: var(--grafite-2); }

@media (min-width: 60rem) { .como { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

.chamada { border-top: 1px solid var(--linha); }
.chamada-miolo { display: grid; gap: 1.25rem; justify-items: start; padding-block: var(--vao); }
.chamada h2 { font-size: var(--t-h2); }
.chamada p { max-width: 34rem; font-size: var(--t-lead); color: var(--grafite-2); }

/* ---------- sobre ---------- */

.sobre { display: grid; gap: var(--vao); padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) var(--vao); }
.sobre section { display: grid; gap: 1.25rem; justify-items: start; }
.sobre section > * { max-width: 46rem; }
.sobre .cota, .sobre .como-lista, .sobre .imovel-dados { width: 100%; }
.sobre h2 { font-size: var(--t-h2); }
.lead { font-size: var(--t-lead); }
.sobre-lista { max-width: 46rem; }

/* ---------- contato ---------- */

.contato {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) var(--vao);
}

.contato h2 { font-size: var(--t-h3); }
.contato-form { display: grid; gap: 1rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 1px solid var(--grafite); background: var(--papel-claro); }
.contato-form .botao { justify-self: start; }
.contato-nota { color: var(--grafite-2); }
.campo textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.campo-erro { margin-top: -0.5rem; font-size: var(--t-pequeno); color: var(--erro); }
.contato-dados { display: grid; gap: 1.25rem; align-content: start; }

@media (min-width: 60rem) { .contato { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

/* ---------- animações ----------
   Tudo aqui vale só para quem não pediu "reduzir movimento". As classes .anima e .visto são
   postas pelo animacoes.js: sem JavaScript nenhuma regra de esconder se aplica. */

@keyframes subir { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
@keyframes surgir { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes bater {
  0% { opacity: 0; transform: rotate(-14deg) scale(1.7); }
  60% { opacity: 1; transform: rotate(-4deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-5deg) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Abertura: só CSS, para o título não depender do JavaScript para aparecer. */
  .abertura .cota { animation: surgir 700ms var(--curva) both; }
  .abertura-linha { animation: subir 900ms var(--curva) 80ms both; }
  .abertura-linha-2 { animation-delay: 220ms; }
  .abertura-lead { animation: surgir 800ms var(--curva) 380ms both; }
  .busca-rapida { animation: surgir 800ms var(--curva) 500ms both; }

  /* A planta se desenha: cotas, depois paredes, depois o giro das portas. */
  .planta-grande path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracar 1100ms var(--curva) forwards; }
  .planta-grande .cotas path { animation-delay: 150ms; }
  .planta-grande .paredes path { animation-duration: 1500ms; animation-delay: 350ms; }
  .planta-grande .paredes path:nth-child(2) { animation-delay: 650ms; }
  .planta-grande .paredes path:nth-child(3) { animation-delay: 800ms; }
  .planta-grande .paredes path:nth-child(4) { animation-delay: 950ms; }
  .planta-grande .paredes path:nth-child(5) { animation-delay: 1100ms; }
  .planta-grande .giros path { animation-duration: 600ms; animation-delay: 1700ms; }
  .planta-grande .rotulos { animation: surgir 600ms var(--curva) 1900ms both; }

  /* Trechos fixos e itens de lista que entram ao rolar. */
  .anima { transition: opacity 600ms var(--curva) var(--atraso, 0ms), transform 600ms var(--curva) var(--atraso, 0ms); }
  .anima:not(.visto):not(.cartao) { opacity: 0; transform: translateY(0.75rem); }

  /* Cartão: o contorno se desenha como traço de planta, a foto entra por dentro,
     o texto sobe e a situação bate como carimbo. */
  .cartao.anima { transition: background-color 500ms var(--curva) var(--atraso, 0ms); }
  .cartao.anima .cartao-traco rect { stroke-dasharray: 1; transition: stroke-dashoffset 950ms var(--curva) var(--atraso, 0ms); }
  .cartao.anima .cartao-foto { transition: clip-path 650ms var(--curva) calc(var(--atraso, 0ms) + 140ms); }
  /* O texto entra cedo: é ele que a pessoa veio ler. */
  .cartao.anima .cartao-corpo { transition: opacity 360ms var(--curva) calc(var(--atraso, 0ms) + 120ms), transform 360ms var(--curva) calc(var(--atraso, 0ms) + 120ms); }
  .cartao.anima .selo { transition: opacity 400ms var(--curva) calc(var(--atraso, 0ms) + 520ms); }

  .cartao.anima:not(.visto) { background-color: transparent; }
  .cartao.anima:not(.visto) .cartao-traco rect { stroke-dashoffset: 1; }
  .cartao.anima:not(.visto) .cartao-foto { clip-path: inset(0 100% 0 0); }
  .cartao.anima:not(.visto) .cartao-corpo { opacity: 0; transform: translateY(0.5rem); }
  .cartao.anima:not(.visto) .selo,
  .cartao.anima:not(.visto) .carimbo { opacity: 0; }

  .cartao.anima .cartao-traco rect { stroke-dashoffset: 0; }
  .cartao.anima .cartao-foto { clip-path: inset(0); }
  .cartao.anima.visto .carimbo { animation: bater 420ms cubic-bezier(0.2, 1.4, 0.4, 1) calc(var(--atraso, 0ms) + 640ms) both; }

  /* Página do imóvel: o carimbo bate na foto principal. */
  .imovel-foto .carimbo { animation: bater 420ms cubic-bezier(0.2, 1.4, 0.4, 1) 450ms both; }
  .titulo-imovel, .imovel-local { animation: subir 800ms var(--curva) both; }
  .imovel-local { animation-delay: 120ms; }
}