/* =====================================================================
   SITE PÚBLICO DIGIMOB — a vitrine da imobiliária
   ---------------------------------------------------------------------
   Este arquivo é SEPARADO do css/style.css (que veste o sistema dos
   corretores) de propósito. São dois produtos com objetivos opostos:

     • o sistema é uma ferramenta de trabalho — denso, cheio de dado na
       tela, fundo levemente rosado, pensado para quem passa o dia nele;
     • o site é uma vitrine — branco, arejado, com foto grande e uma
       ação clara por bloco, pensado para quem chega pelo Google e
       decide em 10 segundos se fica ou volta.

   Misturar os dois num arquivo só faria cada ajuste no sistema mexer no
   site sem querer (e vice-versa). Aqui a cor da marca aparece só onde
   ela precisa aparecer: botões, menu, tags e detalhes. O resto é branco.

   Cores oficiais, tiradas do PDF de logomarcas da Digimob:
     azul  #0A4B69   vermelho  #C90000
   ===================================================================== */

:root {
  /* ---- marca ---- */
  --azul: #0a4b69;
  --azul-escuro: #06334a;
  --azul-noite: #042534;
  --azul-suave: #e8f1f6;
  --azul-linha: #cfe1ea;
  --vermelho: #c90000;
  --vermelho-escuro: #a30000;
  --vermelho-suave: #fdecec;

  /* ---- neutros ---- */
  --branco: #ffffff;
  --fundo-suave: #f6f9fb;
  --fundo-cinza: #eef2f5;
  --texto: #16262f;
  --texto-medio: #4c606c;
  --texto-suave: #75868f;
  --borda: #e3e9ed;
  --borda-forte: #cfd8de;

  /* ---- apoio ---- */
  --verde: #12794a;
  --verde-suave: #e6f5ed;
  --ambar: #9a6100;
  --ambar-suave: #fff3e0;

  /* ---- forma ---- */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-full: 999px;
  --sombra-1: 0 1px 2px rgba(10, 75, 105, 0.06), 0 2px 8px rgba(10, 75, 105, 0.06);
  --sombra-2: 0 4px 14px rgba(10, 75, 105, 0.1);
  --sombra-3: 0 18px 45px rgba(10, 75, 105, 0.16);
  --sombra-topo: 0 2px 14px rgba(10, 75, 105, 0.09);

  /* ---- tipografia ---- */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-titulo: "Montserrat", var(--fonte);

  --largura: 1200px;
  --altura-topo: 76px;
}

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

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

/* Quem chega por um link com #ancora não pode ter o título escondido
   atrás do cabeçalho fixo. */
section[id] { scroll-margin-top: calc(var(--altura-topo) + 16px); }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--azul);
  margin: 0 0 12px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 800;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.32rem); }
h4 { font-size: 1.02rem; font-weight: 700; }

p { margin: 0 0 14px; }

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--vermelho); }

img { max-width: 100%; height: auto; display: block; }

button { font-family: inherit; }

:focus-visible {
  outline: 3px solid rgba(10, 75, 105, 0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

.oculto { display: none !important; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.texto-pequeno { font-size: 0.85rem; color: var(--texto-suave); }
.texto-central { text-align: center; }
.so-leitor-tela {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 20px;
}

.secao { padding: 64px 0; }
.secao-suave { background: var(--fundo-suave); }
.secao-cabecalho { max-width: 720px; margin-bottom: 32px; }
.secao-cabecalho.centro { margin-left: auto; margin-right: auto; text-align: center; }
.secao-cabecalho p { color: var(--texto-medio); font-size: 1.05rem; margin: 0; }

.olho {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermelho);
  margin-bottom: 8px;
}

.linha-topo-secao {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* -------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid transparent;
  border-radius: var(--r-full);
  padding: 12px 24px;
  font-size: 0.97rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-primario { background: var(--vermelho); color: #fff; box-shadow: 0 6px 18px rgba(201, 0, 0, 0.22); }
.btn-primario:hover { background: var(--vermelho-escuro); color: #fff; }

.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-escuro); color: #fff; }

.btn-contorno { background: transparent; color: var(--azul); border-color: var(--borda-forte); }
.btn-contorno:hover { background: var(--azul-suave); border-color: var(--azul); color: var(--azul); }

.btn-contorno-branco { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn-contorno-branco:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.btn-branco { background: #fff; color: var(--azul); }
.btn-branco:hover { background: var(--azul-suave); color: var(--azul); }

.btn-pequeno { padding: 9px 18px; font-size: 0.88rem; }
.btn-grande { padding: 15px 32px; font-size: 1.05rem; }
.btn-bloco { width: 100%; }

/* ------------------------------------------------------------ cabeçalho */

.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--borda);
  transition: box-shadow 0.2s ease;
}
.topo.rolou { box-shadow: var(--sombra-topo); }

/* O cabeçalho é mais largo que o resto do site de propósito: são sete
   itens de menu mais a logo e o botão do corretor. Com a mesma largura
   do conteúdo (1200px) o último item passava por baixo do botão. */
.topo .container { max-width: 1340px; }

.topo-interno {
  height: var(--altura-topo);
  display: flex;
  align-items: center;
  gap: 18px;
}

.topo-marca { display: flex; align-items: center; flex-shrink: 0; }
.topo-marca img { height: 40px; width: auto; }

.topo-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  min-width: 0;
}
.topo-nav a {
  padding: 8px 11px;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--texto);
  white-space: nowrap;
}
.topo-nav a:hover { background: var(--azul-suave); color: var(--azul); }
.topo-nav a.ativo { color: var(--azul); background: var(--azul-suave); }

.topo-acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }

.btn-corretor {
  border: 2px solid var(--azul);
  color: var(--azul);
  background: #fff;
  border-radius: var(--r-full);
  padding: 9px 16px;
  font-weight: 700;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.btn-corretor:hover { background: var(--azul); color: #fff; }

.botao-menu {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--azul);
  align-items: center;
  justify-content: center;
}
.botao-menu:hover { background: var(--azul-suave); }

/* menu do celular */
.menu-mobile {
  position: fixed;
  inset: var(--altura-topo) 0 0 0;
  background: #fff;
  z-index: 55;
  padding: 22px 20px 40px;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.menu-mobile.aberto { display: flex; }
.menu-mobile a {
  padding: 15px 12px;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
}
.menu-mobile a:last-of-type { border-bottom: 0; }
.menu-mobile .btn { margin-top: 16px; }
body.menu-travado { overflow: hidden; }

/* ------------------------------------------------------------------ hero */

/* Sem `overflow: hidden` aqui, de propósito: os painéis suspensos da
   caixa de busca (tipo e bairro) nascem dentro do hero e seriam cortados
   na borda dele. A faixa cinza do ::after já fica presa pelo
   `position: relative`, então não precisa de recorte. */
.hero { padding: 46px 0 0; background: #fff; position: relative; }
.hero::after {
  /* faixa suave que "assenta" a caixa de busca sem sujar o branco */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 190px;
  background: var(--fundo-suave);
  z-index: 0;
}
.hero-interno { position: relative; z-index: 1; }

.hero-grade {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 46px;
  align-items: center;
}

.hero-texto h1 { margin-bottom: 16px; }
.hero-texto h1 em { font-style: normal; color: var(--vermelho); }
.hero-texto .chamada {
  font-size: 1.14rem;
  color: var(--texto-medio);
  max-width: 30em;
  margin-bottom: 22px;
}

.hero-selos { display: flex; flex-wrap: wrap; gap: 10px; }
.selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--azul-suave);
  color: var(--azul);
  border-radius: var(--r-full);
  padding: 7px 15px;
  font-size: 0.86rem;
  font-weight: 700;
}
.selo svg { width: 15px; height: 15px; }

/* foto do hero — a família feliz */
.hero-foto {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--azul) 0%, var(--azul-escuro) 62%, #7a0d0d 165%);
  box-shadow: var(--sombra-3);
}
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

/* Enquanto a foto oficial não estiver no lugar, o espaço não pode
   parecer um erro: mostra uma composição da marca no lugar dela. */
.hero-foto-reserva {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  color: #fff;
}
.hero-foto-reserva img { width: 88px; height: auto; opacity: 0.95; }
.hero-foto-reserva strong { font-family: var(--fonte-titulo); font-size: 1.25rem; }
.hero-foto-reserva span { font-size: 0.9rem; opacity: 0.82; max-width: 26em; }

.hero-etiqueta {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--r);
  padding: 12px 16px;
  box-shadow: var(--sombra-2);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 40px);
}
.hero-etiqueta .numero { font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 800; color: var(--vermelho); line-height: 1; }
.hero-etiqueta .rotulo { font-size: 0.82rem; color: var(--texto-medio); line-height: 1.35; }

/* ------------------------------------------------- caixa de busca (hero) */

.busca-caixa {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
  border: 1px solid var(--borda);
  margin: 40px auto 0;
  overflow: visible;
}

.busca-abas {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
  scrollbar-width: none;
}
.busca-abas::-webkit-scrollbar { display: none; }
.busca-aba {
  border: 0;
  background: none;
  padding: 13px 20px 14px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--texto-medio);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.busca-aba:hover { color: var(--azul); background: var(--fundo-suave); }
.busca-aba.ativa { color: var(--azul); border-bottom-color: var(--vermelho); }

.busca-corpo {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr auto;
  gap: 10px;
  padding: 14px;
  align-items: stretch;
}

.busca-campo {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 9px 14px;
  background: #fff;
  cursor: pointer;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.busca-campo:hover { border-color: var(--borda-forte); }
.busca-campo.aberto { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(10, 75, 105, 0.1); }
.busca-campo > label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 2px;
  pointer-events: none;
}
.busca-valor {
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.busca-valor.vazio { color: var(--texto-suave); font-weight: 500; }

.busca-campo .seta {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-suave);
  pointer-events: none;
  transition: transform 0.18s ease;
}
.busca-campo.aberto .seta { transform: translateY(-50%) rotate(180deg); }

.busca-botao {
  align-self: stretch;
  min-width: 150px;
  border-radius: var(--r);
  padding-left: 26px;
  padding-right: 26px;
}

/* painel suspenso dos campos de busca */
.painel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  box-shadow: var(--sombra-3);
  padding: 12px;
  z-index: 40;
  max-height: 340px;
  overflow-y: auto;
  cursor: default;
}
.painel-busca-interna {
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  margin-bottom: 10px;
  color: var(--texto);
}
.painel-busca-interna:focus { outline: none; border-color: var(--azul); }
.painel-opcoes { display: flex; flex-direction: column; gap: 2px; }
.opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.95rem;
  user-select: none;
}
.opcao:hover { background: var(--fundo-suave); }
.opcao input { accent-color: var(--vermelho); width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; }
.painel-vazio { padding: 14px 10px; color: var(--texto-suave); font-size: 0.9rem; }
.painel-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--borda);
}
.link-limpar {
  background: none; border: 0; padding: 4px;
  color: var(--texto-medio); font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.link-limpar:hover { color: var(--vermelho); text-decoration: underline; }

/* atalhos por tipo, abaixo da busca */
.atalhos-tipo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}
.atalho-tipo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--r-full);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--texto);
  box-shadow: var(--sombra-1);
}
.atalho-tipo:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-1px); }
.atalho-tipo svg { width: 18px; height: 18px; color: var(--vermelho); }

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

.grade-imoveis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}

.card-imovel-site {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  height: 100%;
}
.card-imovel-site:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-3);
  border-color: transparent;
}

.card-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--fundo-cinza) center/cover no-repeat;
  overflow: hidden;
}
.card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card-imovel-site:hover .card-foto img { transform: scale(1.04); }
.card-foto-vazia {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--azul-suave);
}
.card-foto-vazia img { width: 54px; height: auto; opacity: 0.5; object-fit: contain; }

.card-marcadores {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: calc(100% - 24px);
}
.marcador {
  background: rgba(255, 255, 255, 0.95);
  color: var(--azul);
  border-radius: var(--r-full);
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: var(--sombra-1);
}
.marcador-vermelho { background: var(--vermelho); color: #fff; }
.marcador-azul { background: var(--azul); color: #fff; }

.card-contador-fotos {
  position: absolute;
  right: 12px; bottom: 12px;
  background: rgba(4, 37, 52, 0.72);
  color: #fff;
  border-radius: var(--r-full);
  padding: 4px 11px;
  font-size: 0.76rem;
  font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}
.card-contador-fotos svg { width: 13px; height: 13px; }

.card-corpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-preco {
  font-family: var(--fonte-titulo);
  font-size: 1.36rem;
  font-weight: 800;
  color: var(--azul);
  line-height: 1.15;
}
.card-preco small { font-size: 0.82rem; font-weight: 700; color: var(--texto-medio); }
.card-preco-extra { font-size: 0.82rem; color: var(--texto-suave); margin-top: -3px; }
.card-titulo {
  font-weight: 700;
  font-size: 1rem;
  color: var(--texto);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.card-local {
  font-size: 0.9rem;
  color: var(--texto-medio);
  display: flex; align-items: center; gap: 6px;
}
.card-local svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--vermelho); }
.card-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.85rem;
  color: var(--texto-medio);
  border-top: 1px solid var(--borda);
  padding-top: 11px;
  margin-top: auto;
}
.card-ficha span { display: inline-flex; align-items: center; gap: 5px; }
.card-ficha svg { width: 15px; height: 15px; color: var(--azul); }

/* -------------------------------------------------------- carrossel */

.carrossel { position: relative; }
.carrossel-trilho {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 18px;
  margin: -6px -4px 0;
  scrollbar-width: none;
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho > * {
  scroll-snap-align: start;
  flex: 0 0 clamp(270px, 31%, 380px);
}
.carrossel-seta {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: #fff;
  color: var(--azul);
  box-shadow: var(--sombra-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.carrossel-seta:hover { background: var(--azul); color: #fff; }
.carrossel-seta[disabled] { opacity: 0; pointer-events: none; }
.carrossel-seta.esquerda { left: -14px; }
.carrossel-seta.direita { right: -14px; }

.carrossel-pontos { display: flex; justify-content: center; gap: 7px; margin-top: 6px; }
.carrossel-pontos button {
  width: 8px; height: 8px; padding: 0;
  border-radius: var(--r-full);
  border: 0;
  background: var(--borda-forte);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.carrossel-pontos button.ativo { width: 26px; background: var(--vermelho); }

/* ---------------------------------------------------- empreendimentos */

.card-empreendimento {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: linear-gradient(150deg, var(--azul) 0%, var(--azul-noite) 100%);
  box-shadow: var(--sombra-2);
}
.card-empreendimento img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card-empreendimento:hover img { transform: scale(1.05); }
.card-empreendimento::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 37, 52, 0.92) 8%, rgba(4, 37, 52, 0.55) 42%, rgba(4, 37, 52, 0.1) 78%);
}
.card-empreendimento .conteudo { position: relative; z-index: 2; padding: 26px; width: 100%; }
.card-empreendimento h3 { color: #fff; margin-bottom: 6px; font-size: 1.3rem; }
.card-empreendimento .local { font-size: 0.92rem; opacity: 0.9; display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.card-empreendimento .local svg { width: 14px; height: 14px; }
.card-empreendimento .preco { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.2rem; margin-bottom: 12px; }
.card-empreendimento .informacoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.85rem;
  opacity: 0.92;
  margin-bottom: 16px;
}
.card-empreendimento .informacoes span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.card-empreendimento .marcador { position: absolute; top: 20px; left: 20px; z-index: 2; }

/* ------------------------------------------------------- conteúdo/blog */

.grade-conteudo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.card-conteudo {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  height: 100%;
}
.card-conteudo:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); }
.card-conteudo .capa {
  height: 8px;
  background: linear-gradient(90deg, var(--vermelho) 0%, var(--azul) 100%);
}
.card-conteudo .corpo { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-conteudo h3 { font-size: 1.08rem; margin: 0; color: var(--texto); line-height: 1.35; }
.card-conteudo:hover h3 { color: var(--azul); }
.card-conteudo p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--texto-medio);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-conteudo .rodape-conteudo {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.etiqueta-fonte {
  background: var(--azul-suave);
  color: var(--azul);
  border-radius: var(--r-full);
  padding: 4px 11px;
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

/* --------------------------------------------------------- prova social */

.faixa-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
/* Para as listas de seis itens (anuncie / seja parceiro): três por linha
   fecha em dois blocos certinhos, em vez de quatro em cima e dois
   sobrando embaixo. */
.faixa-valores.tres { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.valor-item {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  padding: 26px 24px;
}
.valor-item .icone {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--vermelho-suave);
  color: var(--vermelho);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.valor-item .icone svg { width: 22px; height: 22px; }
.valor-item h3 { font-size: 1.06rem; margin-bottom: 6px; }
.valor-item p { margin: 0; font-size: 0.93rem; color: var(--texto-medio); }

.mural-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.foto-cliente {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin: 0;
  background: linear-gradient(160deg, var(--azul-suave), var(--fundo-cinza));
  box-shadow: var(--sombra-1);
}
.foto-cliente img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.foto-cliente:hover img { transform: scale(1.05); }
.foto-cliente figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(4, 37, 52, 0.9), transparent);
  color: #fff;
  font-size: 0.83rem;
  font-weight: 600;
}
.foto-cliente-reserva {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 16px; text-align: center;
  color: var(--azul);
}
.foto-cliente-reserva img { width: 34px; opacity: 0.55; }
.foto-cliente-reserva span { font-size: 0.76rem; color: var(--texto-suave); line-height: 1.35; }

.numeros-casa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.numero-item {
  text-align: center;
  padding: 22px 14px;
  border-radius: var(--r);
  background: var(--azul-suave);
}
.numero-item strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 800;
  color: var(--azul);
  line-height: 1;
}
.numero-item span { font-size: 0.87rem; color: var(--texto-medio); }

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

.faixa-cta {
  background: linear-gradient(120deg, var(--azul) 0%, var(--azul-noite) 68%, #6b0d0d 190%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.faixa-cta h2 { color: #fff; margin-bottom: 8px; }
.faixa-cta p { color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 46em; }
.faixa-cta .acoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------- rodapé */

.rodape {
  background: var(--azul-noite);
  color: rgba(255, 255, 255, 0.78);
  padding: 56px 0 26px;
  margin-top: 0;
}
.rodape-grade {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 36px;
}
.rodape h4 {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.rodape a { color: rgba(255, 255, 255, 0.78); font-size: 0.94rem; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rodape-marca img { height: 46px; margin-bottom: 14px; }
.rodape-marca p { font-size: 0.93rem; max-width: 32em; }
.rodape-contato { display: flex; flex-direction: column; gap: 9px; font-size: 0.94rem; }
.rodape-contato a { display: inline-flex; align-items: center; gap: 9px; }
.rodape-contato svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.rodape-fim {
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------------- botão flutuante */

.botao-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--vermelho);
  color: #fff;
  border: 0;
  border-radius: var(--r-full);
  padding: 14px 22px;
  font-weight: 700;
  font-size: 0.96rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(201, 0, 0, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}
.botao-flutuante:hover { background: var(--vermelho-escuro); transform: translateY(-2px); }
.botao-flutuante svg { width: 19px; height: 19px; }

/* ---------------------------------------------------------------- modal */

.fundo-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 37, 52, 0.62);
  backdrop-filter: blur(3px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: aparecer 0.16s ease;
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.modal-caixa-site {
  background: #fff;
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--sombra-3);
  animation: subir 0.2s ease;
}
@keyframes subir { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 24px 0;
}
.modal-topo h3 { margin-bottom: 4px; }
.modal-topo p { margin: 0; font-size: 0.93rem; color: var(--texto-medio); }
.modal-fechar {
  background: none; border: 0; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--texto-medio); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.modal-fechar:hover { background: var(--fundo-cinza); color: var(--texto); }
.modal-corpo { padding: 20px 24px 26px; }

.resumo-imovel-modal {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--fundo-suave);
  border-radius: var(--r);
  padding: 12px;
  margin-bottom: 18px;
}
.resumo-imovel-modal img { width: 72px; height: 60px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; }
.resumo-imovel-modal strong { font-size: 0.94rem; display: block; color: var(--texto); }
.resumo-imovel-modal span { font-size: 0.84rem; color: var(--texto-medio); }

/* --------------------------------------------------------- formulários */

.campo-site { margin-bottom: 15px; }
.campo-site label {
  display: block;
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 6px;
}
.campo-site input,
.campo-site select,
.campo-site textarea {
  width: 100%;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--texto);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo-site textarea { resize: vertical; min-height: 96px; }
.campo-site input:focus,
.campo-site select:focus,
.campo-site textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(10, 75, 105, 0.12);
}
.campo-site .ajuda { font-size: 0.82rem; color: var(--texto-suave); margin-top: 5px; }
.campo-erro { color: var(--vermelho); font-size: 0.85rem; margin-top: 6px; font-weight: 600; }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.aviso-privacidade {
  font-size: 0.79rem;
  color: var(--texto-suave);
  margin: 14px 0 0;
  line-height: 1.5;
}

.caixa-sucesso {
  text-align: center;
  padding: 16px 0 4px;
}
.caixa-sucesso .marca-ok {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--verde-suave);
  color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.caixa-sucesso .marca-ok svg { width: 30px; height: 30px; }

/* --------------------------------------------------------- página busca */

.busca-topo {
  background: var(--fundo-suave);
  border-bottom: 1px solid var(--borda);
  padding: 22px 0;
}
.busca-topo .busca-caixa { margin-top: 0; box-shadow: var(--sombra-2); }

.busca-layout {
  display: grid;
  grid-template-columns: 288px 1fr;
  gap: 30px;
  align-items: start;
  padding: 30px 0 64px;
}

.filtros-painel {
  position: sticky;
  top: calc(var(--altura-topo) + 16px);
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  padding: 20px;
  max-height: calc(100vh - var(--altura-topo) - 40px);
  overflow-y: auto;
}
.filtros-painel h3 { font-size: 1.05rem; margin-bottom: 4px; }
.filtro-grupo { padding: 16px 0; border-bottom: 1px solid var(--borda); }
.filtro-grupo:last-of-type { border-bottom: 0; }
.filtro-grupo > strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 10px;
}
.filtro-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filtro-grupo input,
.filtro-grupo select {
  width: 100%;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 0.93rem;
  font-family: inherit;
  color: var(--texto);
  background: #fff;
}
.filtro-grupo input:focus,
.filtro-grupo select:focus { outline: none; border-color: var(--azul); }

.pilulas { display: flex; flex-wrap: wrap; gap: 7px; }
.pilula {
  border: 1px solid var(--borda-forte);
  background: #fff;
  border-radius: var(--r-full);
  padding: 7px 15px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto-medio);
  cursor: pointer;
  transition: all 0.14s ease;
}
.pilula:hover { border-color: var(--azul); color: var(--azul); }
.pilula.ativa { background: var(--azul); border-color: var(--azul); color: #fff; }

.caixa-check { display: flex; flex-direction: column; gap: 3px; max-height: 210px; overflow-y: auto; }
.item-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.91rem; padding: 5px 2px; cursor: pointer;
  color: var(--texto-medio);
}
.item-check:hover { color: var(--texto); }
.item-check input { accent-color: var(--vermelho); width: 16px; height: 16px; cursor: pointer; }

.resultados-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.resultados-topo h1 { font-size: 1.42rem; margin: 0; }
.resultados-topo .contagem { font-size: 0.92rem; color: var(--texto-medio); }
.ordenar-caixa { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--texto-medio); }
.ordenar-caixa select {
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  background: #fff;
  color: var(--texto);
}

.marcas-ativas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.marca-ativa {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--azul-suave); color: var(--azul);
  border: 0; border-radius: var(--r-full);
  padding: 6px 8px 6px 14px;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.marca-ativa:hover { background: var(--azul-linha); }
.marca-ativa svg { width: 13px; height: 13px; }

.btn-filtros-mobile { display: none; }
.fechar-filtros {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--borda);
}
.fechar-filtros strong { font-family: var(--fonte-titulo); font-size: 1.1rem; color: var(--azul); }
.fechar-filtros button {
  background: none; border: 0; cursor: pointer; color: var(--texto-medio);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.fechar-filtros button:hover { background: var(--fundo-cinza); }
.barra-aplicar-filtros {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--borda);
  z-index: 81;
}

.estado-vazio-site {
  text-align: center;
  padding: 66px 20px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r-lg);
  background: var(--fundo-suave);
}
.estado-vazio-site img { width: 66px; margin: 0 auto 16px; opacity: 0.45; }
.estado-vazio-site h3 { margin-bottom: 6px; }
.estado-vazio-site p { color: var(--texto-medio); max-width: 36em; margin: 0 auto 18px; }

/* esqueleto de carregamento */
.esqueleto {
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--fundo-cinza) 30%, #f7fafc 50%, var(--fundo-cinza) 70%);
  background-size: 220% 100%;
  animation: brilho 1.2s infinite linear;
}
@keyframes brilho { from { background-position: 180% 0; } to { background-position: -60% 0; } }
.esqueleto-card { height: 356px; }
.esqueleto-linha { height: 14px; border-radius: var(--r-sm); margin-bottom: 8px; }

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

.trilha {
  font-size: 0.86rem;
  color: var(--texto-suave);
  padding: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.trilha a { color: var(--texto-medio); }
.trilha a:hover { color: var(--vermelho); }

.galeria {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  border-radius: var(--r-lg);
  overflow: hidden;
  max-height: 480px;
}
.galeria-principal { position: relative; cursor: zoom-in; height: 100%; min-height: 300px; }
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-lado { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.galeria-lado > div { position: relative; cursor: zoom-in; overflow: hidden; }
.galeria-lado img { width: 100%; height: 100%; object-fit: cover; }
.galeria-mais {
  position: absolute; inset: 0;
  background: rgba(4, 37, 52, 0.62);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem;
  font-family: var(--fonte-titulo);
}

.imovel-layout {
  display: grid;
  grid-template-columns: 1fr 356px;
  gap: 34px;
  align-items: start;
  padding: 30px 0 70px;
}

.bloco { margin-bottom: 34px; }
.bloco h2 { font-size: 1.28rem; margin-bottom: 14px; }

.ficha-destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
}
.ficha-destaque {
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 15px;
  text-align: center;
}
.ficha-destaque svg { width: 22px; height: 22px; color: var(--azul); margin-bottom: 6px; }
.ficha-destaque strong { display: block; font-size: 1.06rem; color: var(--texto); font-family: var(--fonte-titulo); }
.ficha-destaque span { font-size: 0.8rem; color: var(--texto-suave); }

.tabela-ficha { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabela-ficha td { padding: 11px 0; border-bottom: 1px solid var(--borda); }
.tabela-ficha td:first-child { color: var(--texto-medio); }
.tabela-ficha td:last-child { text-align: right; font-weight: 700; color: var(--texto); }

.lista-caracteristicas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-caracteristicas li {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.94rem; color: var(--texto-medio);
}
.lista-caracteristicas svg { width: 16px; height: 16px; color: var(--verde); flex-shrink: 0; }

.descricao-imovel { white-space: pre-line; color: var(--texto-medio); font-size: 1rem; }

.tabela-plantas { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.tabela-plantas th {
  text-align: left; padding: 10px 12px;
  background: var(--fundo-suave);
  color: var(--azul); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.tabela-plantas td { padding: 11px 12px; border-bottom: 1px solid var(--borda); }
.tabela-plantas tr:last-child td { border-bottom: 0; }

.mapa-area {
  height: 300px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--borda);
  background: var(--fundo-cinza);
}
.mapa-area iframe { width: 100%; height: 100%; border: 0; }
.aviso-mapa { font-size: 0.84rem; color: var(--texto-suave); margin-top: 8px; }

.caixa-contato {
  position: sticky;
  top: calc(var(--altura-topo) + 16px);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--sombra-2);
  background: #fff;
}
.caixa-contato .preco-grande {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 800;
  color: var(--azul);
  line-height: 1.1;
  margin-bottom: 2px;
}
.caixa-contato .preco-grande small { font-size: 0.95rem; color: var(--texto-medio); }
.caixa-contato .preco-extra { font-size: 0.88rem; color: var(--texto-medio); margin-bottom: 16px; }
.caixa-contato .btn { margin-bottom: 10px; }
.lista-vantagens { list-style: none; padding: 16px 0 0; margin: 8px 0 0; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: 9px; }
.lista-vantagens li { display: flex; gap: 9px; font-size: 0.87rem; color: var(--texto-medio); }
.lista-vantagens svg { width: 15px; height: 15px; color: var(--verde); flex-shrink: 0; margin-top: 3px; }

.codigo-imovel {
  font-size: 0.78rem;
  color: var(--texto-suave);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* visualizador de fotos em tela cheia */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(3, 20, 28, 0.95);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: var(--r-sm); }
.lightbox-fechar, .lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.14);
  border: 0; color: #fff;
  width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-fechar:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox-fechar { top: 18px; right: 18px; }
.lightbox-nav.anterior { left: 18px; }
.lightbox-nav.proxima { right: 18px; }
.lightbox-contador {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85); font-size: 0.88rem;
}

/* ------------------------------------------------- páginas institucionais */

.capa-pagina {
  background: linear-gradient(120deg, var(--azul) 0%, var(--azul-noite) 75%);
  color: #fff;
  padding: 56px 0;
}
.capa-pagina h1 { color: #fff; margin-bottom: 10px; }
.capa-pagina p { color: rgba(255, 255, 255, 0.85); font-size: 1.08rem; max-width: 44em; margin: 0; }

.texto-longo { max-width: 760px; }
.texto-longo h2 { margin-top: 34px; }
.texto-longo h2:first-child { margin-top: 0; }
.texto-longo p, .texto-longo li { color: var(--texto-medio); font-size: 1.02rem; }
.texto-longo ul { padding-left: 20px; }
.texto-longo li { margin-bottom: 8px; }

.duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}

.passos { display: grid; gap: 18px; counter-reset: passo; }
.passo {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
}
.passo::before {
  counter-increment: passo;
  content: counter(passo);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.1rem;
}
.passo h3 { font-size: 1.06rem; margin-bottom: 4px; }
.passo p { margin: 0; color: var(--texto-medio); font-size: 0.96rem; }

.caixa-formulario {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sombra-2);
}

.faq-item {
  border: 1px solid var(--borda);
  border-radius: var(--r);
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
}
.faq-item summary {
  padding: 16px 20px;
  font-weight: 700;
  cursor: pointer;
  color: var(--azul);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--vermelho); line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item .resposta { padding: 0 20px 18px; color: var(--texto-medio); font-size: 0.96rem; }

/* ------------------------------------------------------------- avisos */

.aviso-site {
  border-radius: var(--r);
  padding: 15px 18px;
  font-size: 0.93rem;
  border-left: 4px solid;
  margin-bottom: 18px;
}
.aviso-site.info { background: var(--azul-suave); border-color: var(--azul); color: var(--azul-escuro); }
.aviso-site.alerta { background: var(--ambar-suave); border-color: var(--ambar); color: var(--ambar); }
.aviso-site.erro { background: var(--vermelho-suave); border-color: var(--vermelho); color: var(--vermelho-escuro); }

/* -------------------------------------------------- página de notícia */

.artigo-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  margin-top: 14px; color: rgba(255, 255, 255, 0.75); font-size: 0.9rem;
}

.guias-relacionados {
  display: grid; gap: 10px; margin: 28px 0; padding: 0; list-style: none;
}
.guias-relacionados a {
  display: block; padding: 14px 18px; border: 1px solid var(--borda); border-radius: var(--r);
  color: var(--azul); font-weight: 600; font-size: 0.96rem; background: #fff;
}
.guias-relacionados a:hover { border-color: var(--azul); background: var(--azul-suave); }

/* A fonte original fica discreta de propósito: é referência, não é o
   destino do clique — o destino é ficar no site. */
.fonte-original {
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--borda);
  color: var(--texto-suave); font-size: 0.82rem;
}
.fonte-original a { color: var(--texto-suave); text-decoration: underline; }
.fonte-original a:hover { color: var(--texto-medio); }

.girando {
  width: 17px; height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
  display: inline-block;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- respostas */

@media (max-width: 1080px) {
  /* No celular a busca é a primeira coisa da página — antes até da foto
     e do texto do hero — para quem já sabe o que procura não precisar
     rolar a tela. */
  .hero-interno { display: flex; flex-direction: column; }
  .busca-caixa { order: -1; margin-top: 0; }
  .hero-grade { order: 1; margin-top: 24px; grid-template-columns: 1fr; gap: 30px; }
  .atalhos-tipo { order: 2; }
  .hero-foto { aspect-ratio: 16 / 9; max-height: 380px; }
  .busca-corpo { grid-template-columns: 1fr 1fr; }
  .busca-botao { grid-column: 1 / -1; }
  .imovel-layout { grid-template-columns: 1fr; }
  .caixa-contato { position: static; }
  .rodape-grade { grid-template-columns: 1fr 1fr; gap: 30px; }
  .carrossel-seta.esquerda { left: 4px; }
  .carrossel-seta.direita { right: 4px; }
}

@media (max-width: 1260px) {
  .topo-nav { display: none; }
  .botao-menu { display: flex; }
}

@media (max-width: 900px) {
  /* Ordem das seções da home só no mobile: pesquisa, atalhos por tipo,
     destaques, empreendimentos, o texto/foto de apresentação do hero,
     quem somos, mercado imobiliário e por último a prova real (fotos
     de clientes). No desktop a ordem no HTML continua sendo a que
     vale — aqui o #hero é "desmontado" (display: contents) para a
     busca e os atalhos furarem na frente dos destaques enquanto o
     texto de apresentação passa a vir só depois dos empreendimentos. */
  #conteudo-principal { display: flex; flex-direction: column; }
  #hero, #hero .hero-interno { display: contents; }
  /* `display: contents` tira o .hero da árvore de caixas — ele deixa de
     existir como elemento posicionado, e o ::after decorativo (a faixa
     cinza-clara que "assenta" a caixa de busca) passa a se posicionar
     contra o próximo ancestral posicionado, aparecendo flutuando por
     cima de qualquer seção da página. Sem função no mobile mesmo (a
     caixa de busca já não fica mais "sentada" em cima dela), então some. */
  .hero::after { display: none; }

  .busca-caixa { order: 1; margin-top: 30px; padding-left: 20px; padding-right: 20px; }
  .atalhos-tipo { order: 2; padding-left: 20px; padding-right: 20px; }
  #destaques { order: 3; }
  #empreendimentos { order: 4; }
  .hero-grade { order: 5; margin-top: 0; padding: 34px 20px; }
  #sobre { order: 6; }
  #conteudo { order: 7; }
  #prova-real { order: 8; }
  #cta-final { order: 9; }

  .topo-acoes .btn-corretor { display: none; }
  .busca-layout { grid-template-columns: 1fr; }
  .filtros-painel {
    position: fixed;
    inset: 0;
    z-index: 80;
    border-radius: 0;
    max-height: 100vh;
    padding: 20px 20px 90px;
    display: none;
  }
  .filtros-painel.aberto { display: block; }
  .filtros-painel.aberto ~ .barra-aplicar-filtros { display: block; }
  .filtros-painel .fechar-filtros { display: flex; }
  .btn-filtros-mobile { display: inline-flex; }
  .faixa-cta { grid-template-columns: 1fr; padding: 32px 26px; }
  .duas-colunas { grid-template-columns: 1fr; gap: 30px; }
  .galeria { grid-template-columns: 1fr; max-height: none; }
  .galeria-lado { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .galeria-lado > div { aspect-ratio: 4 / 3; }
}

@media (max-width: 620px) {
  .secao { padding: 46px 0; }
  .busca-corpo { grid-template-columns: 1fr; }
  .busca-aba { padding: 12px 14px; font-size: 0.92rem; }
  .rodape-grade { grid-template-columns: 1fr; }
  .hero { padding-top: 30px; }
  .hero-etiqueta { left: 12px; bottom: 12px; padding: 10px 13px; }
  .grade-imoveis { grid-template-columns: 1fr; }
  .carrossel-trilho > * { flex-basis: 84%; }
  .faixa-cta { padding: 28px 20px; }
  .botao-flutuante { padding: 13px 18px; font-size: 0.9rem; right: 14px; bottom: 14px; }
  .linha-campos { grid-template-columns: 1fr; }
  .modal-corpo, .modal-topo { padding-left: 18px; padding-right: 18px; }
}


/* =====================================================================
   PÁGINA DE VENDA DO CORRETOR  (/corretor/ana-souza)
   ---------------------------------------------------------------------
   O link que o corretor manda para o cliente dele no WhatsApp.

   Ela usa as mesmas peças do site (cartão de imóvel, galeria, caixa de
   contato) e muda só o ENQUADRAMENTO: aqui não existe menu para o
   cliente sair, a captação do corretor vem em tamanho grande e o resto
   do catálogo fica recolhido lá embaixo.

   Toda regra daqui começa com .pv- para nunca esbarrar no resto do site.
   ===================================================================== */

.corpo-pagina-venda { background: var(--branco); }
body.pv-travado { overflow: hidden; }

/* ------------------------------------------------------- o cabeçalho */
/* Sem menu, de propósito: qualquer link para /comprar ou /sobre levaria
   o cliente para a vitrine geral, onde o lead cai no rodízio dos
   gestores — ou seja, o corretor perderia o cliente que ele mesmo
   trouxe. Aqui só a marca, o nome de quem mandou o link e o botão. */
.pv-topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--borda);
}
.pv-topo-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.pv-logo { height: 46px; width: auto; }
.pv-topo-corretor { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pv-topo-nome { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pv-topo-nome strong {
  font-size: 0.92rem;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-topo-nome span { font-size: 0.76rem; color: var(--texto-suave); }

/* O botão do topo só entra depois que a capa sai da tela: em cima ele
   seria o terceiro botão dizendo a mesma coisa. */
.pv-topo-botao {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.pv-topo-compacto .pv-topo-botao { opacity: 1; transform: none; pointer-events: auto; }

/* ------------------------------------------------------------- a capa */
.pv-capa {
  background: linear-gradient(160deg, var(--azul-suave) 0%, #fff 62%);
  border-bottom: 1px solid var(--borda);
  padding: 44px 0 52px;
}
.pv-capa-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  align-items: start;
}
.pv-capa-texto h1 {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.14;
  margin: 10px 0 12px;
  color: var(--azul-noite);
}
.pv-subtitulo {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--texto-medio);
  margin: 0 0 18px;
  max-width: 56ch;
}
.pv-recado {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--vermelho);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--sombra-1);
  max-width: 62ch;
}
.pv-recado p { margin: 0 0 10px; color: var(--texto-medio); }
.pv-recado p:last-child { margin-bottom: 0; }
.pv-capa-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ------------------------------------------- o cartão do corretor */
/* O cliente precisa reconhecer, em um segundo, que é a mesma pessoa com
   quem ele já falou no WhatsApp. Foto, nome e CRECI fazem isso. */
.pv-cartao-corretor {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  padding: 24px 22px;
  text-align: center;
  position: sticky;
  top: 88px;
}
.pv-cartao-corretor > strong {
  display: block;
  margin-top: 12px;
  font-size: 1.12rem;
  font-family: var(--fonte-titulo);
  color: var(--azul-noite);
}
.pv-cartao-creci { display: block; font-size: 0.86rem; color: var(--vermelho); font-weight: 600; }
.pv-cartao-casa { display: block; font-size: 0.78rem; color: var(--texto-suave); margin-top: 4px; }

.pv-retrato {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  background: var(--azul-suave);
  border: 3px solid var(--branco);
  box-shadow: 0 0 0 1px var(--azul-linha);
  flex-shrink: 0;
}
.pv-retrato-letras { color: var(--azul); font-weight: 800; font-family: var(--fonte-titulo); }

.pv-selos {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}
.pv-selos li { display: flex; gap: 9px; font-size: 0.84rem; color: var(--texto-medio); }
.pv-selos svg { width: 15px; height: 15px; color: var(--verde); flex-shrink: 0; margin-top: 3px; }

/* --------------------------------------- os imóveis do corretor */
.pv-secao-meus { padding-top: 52px; }
.pv-grade { margin-top: 22px; }

/* O primeiro imóvel da ordem ganha a página inteira. É aqui que a
   escolha "qual imóvel aparece primeiro", feita no editor, vira o
   imóvel que o cliente vê em tamanho grande antes de rolar a tela. */
.pv-destaque {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--branco);
  box-shadow: var(--sombra-2);
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.pv-destaque:hover { box-shadow: var(--sombra-3); transform: translateY(-2px); }
.pv-destaque:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.pv-destaque-foto { position: relative; min-height: 300px; background: var(--fundo-cinza); }
.pv-destaque-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-marcador-destaque { position: absolute; top: 14px; left: 14px; }
.pv-destaque-corpo { padding: 28px 30px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.pv-destaque-tipo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--texto-suave);
}
.pv-destaque-corpo h3 {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  margin: 0;
  color: var(--azul-noite);
  line-height: 1.2;
}
.pv-destaque-preco { font-size: 1.7rem; font-weight: 800; color: var(--vermelho); }
.pv-destaque-preco small { font-size: 0.95rem; color: var(--texto-medio); font-weight: 700; }
.pv-destaque-descricao {
  color: var(--texto-medio);
  font-size: 0.94rem;
  margin: 4px 0 0;
}
.pv-destaque-botao { align-self: flex-start; margin-top: 14px; pointer-events: none; }

/* Os cartões abrem a ficha aqui dentro, então são <article> e não <a>.
   Precisam parecer clicáveis do mesmo jeito. */
.pv-cartao { cursor: pointer; }
.pv-cartao:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

/* ------------------------------------------- os outros imóveis */
/* Discreto de propósito: menor, mais apagado e depois de tudo. Existe
   para o cliente que não gostou da captação do corretor não fechar a
   aba — e não para competir com ela. */
.pv-secao-outros { border-top: 1px solid var(--borda); }
.pv-convite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--fundo-suave);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r-lg);
  padding: 24px 26px;
}
.pv-convite h2 { font-size: 1.2rem; margin: 0 0 6px; color: var(--texto); font-family: var(--fonte-titulo); }
.pv-convite p { margin: 0; color: var(--texto-medio); font-size: 0.94rem; max-width: 70ch; }
.pv-convite-aberto { border-style: solid; background: var(--branco); margin-bottom: 24px; }

.pv-outros-lista { margin-top: 4px; }
.pv-filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.pv-filtro-busca {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
}
.pv-filtro-busca svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--texto-suave); }
.pv-filtro-busca input { padding-left: 38px; }
.pv-filtros input,
.pv-filtros select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--texto);
  background: var(--branco);
}
.pv-filtros select { width: auto; flex: 0 1 auto; }
.pv-filtros input:focus,
.pv-filtros select:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.pv-contagem { font-size: 0.86rem; color: var(--texto-suave); margin-left: auto; }

/* O cartão do "plano B" é menor e mais quieto que o da captação. */
.pv-cartao-discreto .card-foto { height: 168px; }
.pv-cartao-discreto .card-corpo { padding: 13px 15px 15px; gap: 5px; }
.pv-cartao-discreto .card-preco { font-size: 1.02rem; }
.pv-cartao-discreto .card-titulo { font-size: 0.92rem; }
.pv-cartao-discreto { box-shadow: none; border-color: var(--borda); }

.pv-vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 20px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r);
  color: var(--texto-medio);
}
.pv-vazio p { margin: 0 0 8px; }

/* --------------------------------------------------- o fechamento */
.pv-fechamento {
  background: var(--azul-noite);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.pv-fechamento h2 { font-family: var(--fonte-titulo); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 10px; }
.pv-fechamento p { color: rgba(255, 255, 255, 0.82); max-width: 62ch; margin: 0 auto 24px; }
.pv-fechamento-acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------ o rodapé */
.pv-rodape {
  background: var(--azul-escuro);
  color: rgba(255, 255, 255, 0.8);
  padding: 30px 0;
  text-align: center;
  font-size: 0.84rem;
}
.pv-rodape img { height: 40px; width: auto; opacity: 0.9; }
.pv-rodape p { margin: 10px 0 0; }
.pv-rodape-aviso { max-width: 66ch; margin: 10px auto 0 !important; opacity: 0.6; font-size: 0.78rem; }

/* ------------------------------------- a ficha, por cima da página */
/* Clicar num imóvel NÃO navega para /imovel/ID: abre este painel. É o
   que mantém o cliente dentro do contexto do corretor — inclusive no
   botão de contato, que continua sendo o dele. */
.pv-ficha {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 37, 52, 0.55);
  overflow-y: auto;
  padding: 24px 16px;
  animation: pv-surgir 0.18s ease;
}
@keyframes pv-surgir { from { opacity: 0; } to { opacity: 1; } }

.pv-ficha-caixa {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--branco);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-3);
}
.pv-ficha-fechar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  color: var(--texto);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-2);
}
.pv-ficha-fechar:hover { background: #fff; color: var(--vermelho); }
.pv-ficha-caixa .galeria { border-radius: 0; max-height: 420px; }
.pv-ficha-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  padding: 26px 30px 34px;
}
.pv-ficha-principal h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  margin: 4px 0 8px;
  color: var(--azul-noite);
}
.pv-ficha-bloco { margin-top: 24px; }
.pv-ficha-bloco h3 {
  font-size: 1.05rem;
  font-family: var(--fonte-titulo);
  margin: 0 0 10px;
  color: var(--azul-noite);
}
.pv-ficha-lado .caixa-contato { position: sticky; top: 0; }

/* ------------------------------------------------------ celular */
@media (max-width: 900px) {
  .pv-capa-grade { grid-template-columns: 1fr; }
  .pv-cartao-corretor { position: static; order: -1; text-align: left; display: grid;
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "foto nome"; gap: 4px 14px;
    align-items: center; padding: 16px 18px; }
  .pv-cartao-corretor .pv-retrato { grid-area: foto; grid-row: span 3; }
  .pv-cartao-corretor > strong { margin-top: 0; }
  .pv-selos { display: none; }
  .pv-cartao-corretor .btn { grid-column: 1 / -1; margin-top: 12px; }
  .pv-destaque { grid-template-columns: 1fr; }
  .pv-destaque-foto { min-height: 220px; }
  .pv-destaque-corpo { padding: 20px 20px 24px; }
  .pv-ficha-corpo { grid-template-columns: 1fr; padding: 22px 20px 28px; }
  .pv-ficha-lado .caixa-contato { position: static; }
}

@media (max-width: 620px) {
  .pv-topo-nome { display: none; }
  .pv-logo { height: 38px; }
  .pv-capa { padding: 28px 0 36px; }
  .pv-capa-acoes .btn { width: 100%; }
  .pv-convite { padding: 20px; }
  .pv-convite .btn { width: 100%; }
  .pv-contagem { margin-left: 0; width: 100%; }
  .pv-filtros select { flex: 1 1 100%; width: 100%; }
  .pv-ficha { padding: 0; }
  .pv-ficha-caixa { border-radius: 0; min-height: 100%; }
  .pv-fechamento-acoes .btn { width: 100%; }
}

@media print {
  .pv-topo, .pv-fechamento, .pv-secao-outros { display: none !important; }
}

/* Quem pediu menos animação no sistema operacional recebe menos animação. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .topo, .rodape, .botao-flutuante, .caixa-contato .btn, .carrossel-seta { display: none !important; }
}