/* Visa Imóveis: a placa de preço âmbar sobre o verde escuro é a assinatura; o resto fica quieto.
   Fraunces (serifa com eixo óptico) nos títulos, Manrope no texto e nos números. Cantos redondos como placa de rua. */
:root {
  --verde: #173f33;
  --verde-escuro: #0e2a21;
  --verde-claro: #dde6dd;
  --papel: #eef0ea;
  --branco: #ffffff;
  --tinta: #131d18;
  --cinza: #5b655f;
  --linha: rgba(19, 29, 24, .14);
  --ambar: #e9b949;
  --ambar-tinta: #231a02;
  --foco: #173f33;
  --margem: 16px;
  --largura: 1200px;
  --altura-topo: 112px;
  --raio: 14px;
}
@media (min-width: 760px) { :root { --margem: 32px; } }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
h1, h2, h3, .serifa {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.8rem, 5.6vw, 2.8rem); }
h3 { font-size: 1.2rem; line-height: 1.2; }

/* ---------- faixa da prévia e topo (ficam fixos juntos) ---------- */
.fixo { position: sticky; top: 0; z-index: 50; }
.faixa-previa {
  margin: 0; padding: 7px var(--margem);
  background: var(--tinta); color: #e3e9e5;
  font-size: 13px; line-height: 1.35; text-align: center;
}
.topo {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 8px var(--margem);
  background: rgba(238, 240, 234, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.topo__marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--verde); text-decoration: none;
  font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; font-weight: 600; font-size: 21px; letter-spacing: -0.01em;
}
.marca { width: 28px; height: 28px; flex: none; }
.topo__nav { display: none; }
.topo__wa {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px;
  background: var(--verde); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
}
.topo__wa svg { width: 20px; height: 20px; }
.topo__wa:hover { background: var(--verde-escuro); }
@media (min-width: 980px) {
  .topo__nav { display: flex; gap: 28px; margin-left: 40px; }
  .topo__nav a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 0; border-bottom: 2px solid transparent; }
  .topo__nav a:hover { border-color: var(--ambar); }
}

/* ---------- botões ---------- */
.botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border: 2px solid var(--verde); border-radius: 999px;
  background: transparent; color: var(--verde);
  font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; text-align: center;
}
.botao svg { width: 22px; height: 22px; flex: none; }
.botao--forte { background: var(--verde); color: #fff; }
.botao--forte:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.botao:not(.botao--forte):not(.botao--wa):hover { background: rgba(23, 63, 51, .08); }
.botao--wa { background: #1a7f45; border-color: #1a7f45; color: #fff; }
.botao--wa:hover { background: #146a39; border-color: #146a39; }
@media (max-width: 420px) { .capa .botoes .botao { flex: 1 1 100%; } }

/* ---------- placa de preço (a assinatura) ---------- */
.preco-placa {
  display: inline-block; padding: 8px 12px; border-radius: 8px;
  background: var(--ambar); color: var(--ambar-tinta);
  font-weight: 800; font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.preco-placa--consulta { background: #fff; color: var(--verde); font-size: 15px; }

/* ---------- capa ---------- */
.capa { display: grid; gap: 28px; max-width: var(--largura); margin: 0 auto; padding: 36px var(--margem) 44px; }
.capa__creci { margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--cinza); }
.capa h1 { font-size: clamp(2.35rem, 9.4vw, 4.9rem); font-weight: 500; line-height: .98; letter-spacing: -0.025em; color: var(--verde); }
.capa__sub { margin: 18px 0 26px; font-size: 1.08rem; color: var(--cinza); max-width: 44ch; }
.destaque {
  position: relative; display: block; overflow: hidden; border-radius: var(--raio);
  background: var(--verde-claro); color: #fff; text-decoration: none;
}
.destaque img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.destaque::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(8, 18, 13, .82), rgba(8, 18, 13, 0)); }
.destaque__placa { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.destaque__rotulo { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; opacity: .9; }
.destaque__titulo { display: block; font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; font-weight: 500; font-size: 1.3rem; line-height: 1.1; text-wrap: balance; }
.destaque__onde { display: block; margin-top: 4px; font-size: 14px; opacity: .9; }
.destaque:hover img { filter: brightness(1.04); }
@media (min-width: 900px) {
  .capa { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; padding-top: 64px; padding-bottom: 72px; }
  .destaque img { aspect-ratio: 4 / 4.4; }
  .destaque__titulo { font-size: 1.6rem; }
  .destaque__placa { left: 22px; right: 22px; bottom: 22px; }
  .capa__sub { font-size: 1.15rem; }
}

/* ---------- imóveis ---------- */
.imoveis { max-width: var(--largura); margin: 0 auto; padding: 24px var(--margem) 72px; }
.imoveis__cabeca { display: grid; gap: 10px; margin-bottom: 22px; }
.imoveis__cabeca p { color: var(--cinza); max-width: 62ch; }
.imoveis__cabeca a { color: var(--verde); font-weight: 700; text-underline-offset: 3px; }
.filtros { display: grid; gap: 12px; margin-bottom: 14px; }
.segmento { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 320px; padding: 4px; border-radius: 999px; background: var(--verde-claro); }
.segmento button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--verde); font-weight: 700; font-size: 16px; cursor: pointer; }
.segmento button[aria-pressed="true"] { background: var(--verde); color: #fff; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--margem) * -1); padding: 2px var(--margem) 6px; }
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: none; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--verde); border-radius: 999px;
  background: #fff; color: var(--verde); font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
}
.chips button[aria-pressed="true"] { background: var(--verde); color: #fff; }
.imoveis__contagem { margin-bottom: 14px; font-size: 15px; color: var(--cinza); }
.cards { display: grid; gap: 18px; }
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .filtros { grid-template-columns: auto 1fr; align-items: center; gap: 18px; }
  .chips { margin: 0; padding: 0; }
}
@media (min-width: 1060px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

.card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--raio); background: #fff; box-shadow: 0 1px 0 var(--linha), 0 10px 30px -22px rgba(19, 29, 24, .35); }
.card__foto {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; overflow: hidden;
  background: var(--verde-claro); cursor: pointer;
}
.card__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.card__foto:hover img { transform: scale(1.03); }
.card__foto:focus-visible { outline: 4px solid var(--ambar); outline-offset: -4px; }
.card__foto .preco-placa { position: absolute; left: 12px; bottom: 12px; }
.card__fotos { position: absolute; right: 12px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(8, 18, 13, .72); color: #fff; font-size: 13px; font-weight: 600; }
.card__etiqueta { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--tinta); font-size: 13px; font-weight: 700; }
.card__corpo { display: grid; gap: 8px; align-content: start; padding: 16px 16px 18px; }
.card__onde { font-size: 14px; font-weight: 600; color: var(--cinza); }
.card__titulo { font-size: 1.32rem; }
.specs { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; }
.specs span { display: inline-flex; align-items: center; gap: 6px; }
.specs svg { width: 18px; height: 18px; flex: none; color: var(--verde); }
.card__acoes { display: flex; gap: 8px; margin-top: 8px; }
.card__acoes .botao { min-height: 46px; padding: 0 16px; font-size: 15px; }
.card__acoes .botao--ver { flex: 1; }
.card__acoes .botao--wa { padding: 0 14px; }

.vazio { display: grid; gap: 10px; justify-items: start; padding: 28px; border: 1.5px dashed rgba(19, 29, 24, .3); border-radius: var(--raio); background: #fff; }
.vazio p { color: var(--cinza); max-width: 50ch; }
.vazio .botao { margin-top: 6px; }

/* ---------- vendidos ---------- */
.vendidos { padding: 48px var(--margem) 56px; background: var(--verde-claro); }
.vendidos > * { max-width: var(--largura); margin-left: auto; margin-right: auto; }
.vendidos__intro { margin: 8px 0 22px; color: var(--cinza); }
.vendidos__lista { display: grid; gap: 12px; }
.vendido { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 12px; background: #fff; }
.vendido img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.vendido__selo { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; background: var(--verde); color: #fff; font-size: 12px; font-weight: 800; }
.vendido strong { display: block; font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; font-weight: 500; font-size: 1.1rem; line-height: 1.15; }
.vendido span.vendido__onde { display: block; margin-top: 2px; font-size: 14px; color: var(--cinza); }
@media (min-width: 760px) { .vendidos__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .vendidos__lista { grid-template-columns: repeat(3, 1fr); } }

/* ---------- vender ---------- */
.vender { padding: 64px var(--margem); background: var(--verde); color: #f1f5f1; }
.vender__texto { display: grid; gap: 18px; justify-items: start; max-width: 660px; margin: 0 auto; }
.vender h2 { color: #fff; }
.vender p { font-size: 1.05rem; color: #cfdad2; }
.vender .botao--forte { background: var(--ambar); border-color: var(--ambar); color: var(--ambar-tinta); }
.vender .botao--forte:hover { background: #f0c75c; border-color: #f0c75c; }
.vender .botao--forte svg { color: var(--ambar-tinta); }

/* ---------- sobre ---------- */
.sobre { max-width: var(--largura); margin: 0 auto; padding: 64px var(--margem); }
.sobre__texto { display: grid; gap: 18px; max-width: 680px; }
.sobre__texto > p { font-size: 1.05rem; color: var(--cinza); }
.sobre__fatos { display: grid; gap: 4px; margin: 6px 0 8px; }
.sobre__fatos li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--linha); }
.sobre__fatos strong { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; font-weight: 600; font-size: 1.25rem; color: var(--verde); }
.sobre__fatos span { font-size: 15px; color: var(--cinza); }
@media (min-width: 900px) {
  .sobre__texto { max-width: none; }
  .sobre__texto > p { max-width: 62ch; }
  .sobre__fatos { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

/* ---------- contato ---------- */
.contato { display: grid; gap: 28px; max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem) 72px; }
.contato__lista { display: grid; gap: 14px; margin: 22px 0; }
.contato__lista > div { display: grid; gap: 2px; }
.contato__lista dt { font-size: 13px; font-weight: 700; color: var(--cinza); }
.contato__lista dd { font-size: 1.05rem; font-weight: 600; }
.contato__lista a { color: var(--verde); text-underline-offset: 3px; }
.contato__mapa { overflow: hidden; border-radius: var(--raio); }
@media (min-width: 900px) {
  .contato { grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
  .contato__mapa { aspect-ratio: 4 / 3.2; }
}

/* ---------- rodapé ---------- */
.rodape { padding: 48px var(--margem) 110px; background: var(--verde-escuro); color: #b8c6bd; font-size: 15px; }
.rodape > * { max-width: var(--largura); margin-left: auto; margin-right: auto; }
.rodape__nome { margin-bottom: 14px; font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.7rem, 6vw, 3rem); line-height: 1; color: #fff; }
.rodape p + p { margin-top: 8px; }
.rodape__previa { margin-top: 22px !important; max-width: 68ch; font-size: 14px; color: #8fa397; }

/* ---------- janela de detalhes do imóvel ---------- */
.detalhe {
  width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; border: 0;
  background: var(--papel); color: var(--tinta); overflow: auto; overscroll-behavior: contain;
}
.detalhe::backdrop { background: rgba(8, 16, 12, .72); }
.detalhe__fechar-area { position: sticky; top: 0; z-index: 3; height: 0; margin: 0; }
.detalhe__fechar {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; color: var(--tinta); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.detalhe__corpo { display: grid; }
.galeria { position: relative; background: #0e1a15; }
.galeria__faixa { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.galeria__faixa::-webkit-scrollbar { display: none; }
.galeria__faixa > figure { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.galeria__faixa img { width: 100%; aspect-ratio: 4 / 5; max-height: 72dvh; object-fit: cover; background: #0e1a15; }
.galeria__nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #fff; pointer-events: none; }
.galeria__nav button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--tinta); font-size: 22px; line-height: 1; cursor: pointer; pointer-events: auto; }
.galeria__nav button:disabled { opacity: .35; cursor: default; }
.galeria__contador { padding: 4px 10px; border-radius: 999px; background: rgba(8, 18, 13, .72); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.detalhe__info { display: grid; gap: 16px; align-content: start; padding: 22px var(--margem) 110px; }
.detalhe__onde { font-size: 14px; font-weight: 700; color: var(--cinza); }
.detalhe__titulo { font-size: clamp(1.6rem, 6vw, 2.3rem); }
.detalhe__preco { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.detalhe__preco .preco-placa { padding: 10px 14px; font-size: 22px; box-shadow: none; }
.detalhe__de { font-size: 15px; color: var(--cinza); text-decoration: line-through; }
.tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--verde-claro); color: var(--verde); font-size: 13px; font-weight: 700; }
.tag--alerta { background: #f6e3c3; color: #6b4a00; }
.detalhe__texto p + p { margin-top: 10px; }
.detalhe h3 { margin-top: 6px; font-size: 1.1rem; }
.lista-check { display: grid; gap: 6px; }
.lista-check li { position: relative; padding-left: 26px; font-size: 16px; }
.lista-check li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 13px; height: 7px; border-left: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde); transform: rotate(-45deg); }
.detalhe__acoes { display: grid; gap: 10px; margin-top: 8px; }
.detalhe__fonte { font-size: 13px; color: var(--cinza); }
.detalhe__fonte a { color: var(--verde); }
@media (min-width: 900px) {
  .detalhe { width: min(1120px, 94vw); height: auto; max-height: 92dvh; border-radius: 18px; }
  .detalhe__corpo { grid-template-columns: 1.05fr .95fr; }
  .galeria { min-height: 100%; }
  .galeria__faixa { height: 100%; }
  .galeria__faixa > figure { height: 100%; }
  .galeria__faixa img { height: 100%; max-height: 92dvh; aspect-ratio: auto; }
  .detalhe__info { max-height: 92dvh; overflow-y: auto; padding: 36px 36px 40px; }
  .detalhe__acoes { grid-template-columns: 1fr 1fr; }
  .detalhe__acoes .botao--wa { grid-column: 1 / -1; }
}

/* WhatsApp flutuante: cantos mais fechados para combinar com os botões */
.wa-flutuante { border-radius: 999px; }