/* ===== OPA Imóveis, CSS global (compartilhado pelas 6 páginas) =====
   Os estilos de layout ficam inline nos templates (fidelidade ao protótipo).
   Aqui: fontes self-hosted, reset/global, keyframes e as regras responsivas
   que o protótipo fazia via matchMedia. */

/* ---- Inter self-hosted (@fontsource, woff2) ---- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/inter-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/inter-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/inter-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/inter-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- Reset/global (do helmet do protótipo) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #ffffff; color: #12455f; font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
a { color: #2a7ca8; text-decoration: none; }
a:hover { color: #12455f; }
[id] { scroll-margin-top: 96px; }
:focus-visible { outline: 2px solid #2a7ca8; outline-offset: 3px; border-radius: 4px; }
/* O anel de foco e para quem navega pelo teclado. Depois de um clique de mouse o
   foco fica no link e o anel continua desenhado, o que le como borda no card.
   :focus:not(:focus-visible) e exatamente o estado "focado por ponteiro": some no
   mouse e no toque, permanece no Tab. */
:focus:not(:focus-visible) { outline: none; }
/* No mapa de regiões o anel de foco desenharia um retângulo em volta da ilha inteira */
[data-regiao-mapa]:focus, [data-regiao-mapa]:focus-visible { outline: none; }
[data-regiao-mapa]:focus-visible { filter: brightness(1.16) saturate(1.05); }

@keyframes opaPop { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes opaVeuSai { 0%, 58% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes opaMarcaEntra {
  0% { opacity: 0; transform: scale(1.06); letter-spacing: .1em; }
  26% { opacity: 1; transform: scale(1); letter-spacing: 0; }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.985); }
}
@keyframes opaSobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes opaSurge { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-intro] { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* Páginas internas (body[data-header="solido"]): sem véu de intro, as
   animações de entrada não devem atrasar nada. */
body[data-header="solido"] [data-intro] { animation: none !important; opacity: 1 !important; }

/* Visita repetida na mesma sessão: o véu já cumpriu o papel de marca e passa a
   ser só 1,35s de atraso no LCP. A classe é aplicada por um script inline no
   <head> (antes da 1ª pintura), então não há flash do véu. */
html.opa-sem-veu [data-intro="veu"] { display: none !important; }
html.opa-sem-veu [data-intro] { animation: none !important; opacity: 1 !important; }

/* ---- Nav ampla x compacta (o protótipo alternava via matchMedia 900px) ---- */
@media (max-width: 900px) {
  .nav-ampla { display: none !important; }
}
@media (min-width: 900.02px) {
  .nav-compacta { display: none !important; }
  .busca-botao { display: none !important; }
}

/* O "Entrar" da equipe (08/10/2026) acrescentou um item a um topo que ja
   chegava justo: em 920px o menu de hoje terminava exatamente na margem, e
   o icone novo o empurrava 37px para fora. Os !important vencem o estilo
   inline do header.html.
   - 900 a 1120px: os itens ficam mais juntos, so nessa faixa.
   - ate 480px: a margem do topo fica em 32px, a mesma do conteudo das
     paginas no celular (era 34), e o espaco minimo entre logo e icones cai
     de 38 para 16px. Com os valores antigos o menu passava da tela num
     celular de 360px. Os margin-right negativos do coracao e do "Entrar"
     acompanham o gap menor (com os antigos eles se sobrepunham em 10px).
   - abaixo de 360px: o botao Menu fica so com o icone. Em 360px sobram 6px. */
@media (min-width: 900.02px) and (max-width: 1120px) {
  #site-header .nav-ampla { gap: 20px !important; }
  #site-header > div { gap: 26px !important; }
}
@media (max-width: 480px) {
  #site-header > div { padding: 0 32px !important; gap: 16px !important; }
  #site-header .fav-topo.nav-compacta { margin-right: -6px !important; }
  #site-header .login-topo { margin-right: -6px !important; }
}
@media (max-width: 359.98px) {
  #btn-menu { padding: 0 14px !important; }
  #btn-menu .menu-rotulo { display: none; }
}

/* ---- Busca do hero no mobile: botão "Buscar imóveis" abre os campos ---- */
@media (max-width: 900px) {
  .busca-hero:not(.aberta) .busca-campos { display: none !important; }
  .busca-hero.aberta .busca-botao { display: none !important; }
}

/* ---- Trilha de destaques: esconder scrollbar (WebKit) ---- */
.trilha-sem-scrollbar::-webkit-scrollbar { display: none; }

/* Cards da trilha: 3 por vez no desktop (inline); no mobile, um card quase
   inteiro por vez para não ficar ilegível. */
@media (max-width: 700px) {
  .card-destaque { flex: 0 0 86% !important; }
}

/* ---- Dropdowns da busca ---- */
.menu-drop { display: none; }
.menu-drop.aberto { display: flex; }
.opcao-ativa { background: #eaf3f8 !important; color: #12455f !important; font-weight: 600 !important; }

/* ---- Toggle Venda/Aluguel do hero ---- */
.neg-btn.neg-on { background: #ffffff !important; color: #12455f !important; box-shadow: 0 6px 18px rgba(9,44,62,0.18); cursor: default; }
.neg-btn:not(.neg-on):hover { background: rgba(255,255,255,0.18); color: #ffffff; }

/* ---- Abas da seção Exclusivos ---- */
.abas-exclusivos > button {
  border: 1px solid #cddde6 !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  color: #5b7284;
  background: #ffffff;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.abas-exclusivos > button:hover { border-color: #2a7ca8 !important; color: #12455f; }
.aba-ativa {
  background: #12455f !important;
  border-color: #12455f !important;
  color: #ffffff !important;
  /* segue clicavel: e a mesma superficie das outras abas */
}
.aba-ativa:hover { color: #ffffff !important; }

/* ---- Inputs (o protótipo usava style-focus, que o motor não processa) ---- */
.input-opa:focus { border-color: #2a7ca8 !important; }

/* ---- Só para leitores de tela e buscadores (não dá para fazer inline: precisa de clip-path) ---- */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Zoom suave na foto do card do imóvel ----
   O container já tem overflow:hidden, então a foto cresce por dentro da moldura
   e a página não reflui. Só transform/opacity (composicionado na GPU), sem
   animar width/height. Em telas de toque o :hover fica preso após o tap, por
   isso o efeito só existe onde há mouse de verdade. */
@media (hover: hover) and (pointer: fine) {
  a:hover > div > img.foto-card { transform: scale(1.045); }
}
img.foto-card {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  img.foto-card { transition: none; }
  a:hover > div > img.foto-card { transform: none; }
}

/* ---- Imóvel vendido ----
   Dois sinais, e so dois: a foto em duotone azul distingue o card a distancia,
   e uma unica faixa no centro diz o estado. Nao ha tag no canto - a faixa
   central e o rotulo, para nao repetir a mesma informacao em dois lugares.
   Como o texto e uma palavra so, a faixa usa versalete espacado: e o que da
   presenca a ela sem precisar de corpo grande. */
/* Vale para QUALQUER img dentro do cartao, nao so a .foto-card: a foto do popup
   do mapa (src/js/busca.js) nao leva essa classe e ficava colorida enquanto o
   resto do site mostrava o imovel em P&B. */
.card-vendido img {
  /* Duotone: primeiro tira a cor, depois o veu abaixo puxa o cinza para o azul
     da OPA. Nao e foto azul - e preto e branco com temperatura, para o card sair
     do neutro sem competir com as fotos coloridas dos imoveis disponiveis. */
  filter: grayscale(1);
  /* nao da zoom no hover: o imovel nao esta mais disponivel */
  transform: none !important;
}
/* O veu do duotone. Vive no cartao, nao na imagem, porque `filter` na propria
   img nao consegue tingir: so multiplicar o cinza por uma cor faz isso.
   z-index 2 o poe sobre a foto e sob a faixa (z-index 3), e pointer-events:none
   garante que ele nao intercepta o clique do link que envolve o card. */
.card-vendido::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #2a7ca8;
  mix-blend-mode: multiply;
  /* 0.22 saiu de uma comparacao lado a lado das variantes reais no navegador.
     Acima disso (0.38) a foto escurece e a faixa perde separacao do fundo;
     com `color` no lugar de `multiply` a foto vira azul, nao P&B com azul. */
  opacity: 0.22;
}
.faixa-vendido {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  background: rgba(42, 124, 168, 0.92);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  /* Sem text-indent de compensacao: medido neste layout, o texto ja fica em
     30px/30px dentro da pilula. Acrescentar o indent classico de 0.18em e que
     desalinhava (32,3px/30px) - o navegador ja trata o espaco da ultima letra. */
  text-transform: uppercase;
  text-align: center;
  padding: 13px 30px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Cartao pequeno (busca no mobile, carrossel de sugestoes) e popup do mapa, que
   e estreito ate no desktop: a faixa encolhe para nao dominar a foto. Quem manda
   e a largura do proprio cartao, nao a da tela - por isso container query.
   ATENCAO: aqui e `inline-size`, nunca `size`. Com `size` o navegador passa a
   exigir altura propria do cartao, e este nao tem (quem da altura e a foto
   dentro dele): medido, o popup do mapa colapsa para 0px de altura. */
.card-vendido { container-type: inline-size; }
@container (max-width: 280px) {
  .faixa-vendido { font-size: 11px; padding: 10px 22px; }
}

/* Formulário do off-market: vive sobre fundo escuro (#0f3d55), então o texto
   digitado, o placeholder e o foco precisam de contraste próprio. */
#off-market .input-opa { color: #ffffff; }
#off-market .input-opa::placeholder { color: rgba(255, 255, 255, 0.5); }
#off-market .input-opa:focus { border-color: #ffffff !important; }

/* Formulário de interesse na ficha de LANÇAMENTO: mesmo caso do off-market,
   sobre o fecho escuro (#253A47). Mesma razão, mesmas três regras. O rótulo
   das perguntas herda por variável (ver .passo-2--sutil), então aqui basta
   trocar a cor — sem isso o rótulo sai #5b7284 sobre escuro e some. */
.form-lanc-interesse .input-opa { color: #ffffff; }
.form-lanc-interesse .input-opa::placeholder { color: rgba(255, 255, 255, 0.45); }
.form-lanc-interesse .input-opa:focus { border-color: #ffffff !important; }
/* A cor do rótulo das perguntas NÃO mora aqui: ela precisa vir depois de
   .passo-2--sutil para vencer (mesma especificidade, ganha a última). Ver
   .passo-2--lanc junto das outras variantes do passo 2. */

/* ---- Rodapé no mobile ----
   Logo, frase e ícones empilham; centralizados ficam melhor que encostados
   à esquerda com o resto do bloco vazio ao lado. */
@media (max-width: 900px) {
  .rod-topo { justify-content: center !important; text-align: center; }
  .rod-logo { justify-content: center !important; width: 100%; }
  .rod-social { align-items: center !important; width: 100%; }
  .rod-icones { justify-content: center !important; }
  /* Buscas: os links viravam uma lista longa e irregular, com as duas ultimas
     linhas sobrando. Centralizados e com espaco maior entre eles, leem melhor. */
  .rod-buscas { text-align: center; }
  .rod-links { justify-content: center !important; gap: 14px 22px !important; }
  /* Empresa e contato ficavam em cantos opostos (um a esquerda, outro a
     direita) e desalinhados ao empilhar. */
  .rod-legal { justify-content: center !important; text-align: center; gap: 22px !important; }
  .rod-empresa { align-items: center !important; width: 100%; line-height: 1.6; }
  .rod-contato { align-items: center !important; width: 100%; }
  /* Assinatura da GCompass: o botao flutuante do WhatsApp (60px + 24px da
     borda) fica sobre o canto inferior direito e tapava o fim da logo. As
     caixas nao se sobrepoem — o FAB so paira por cima —, entao so medir
     retangulo nao acusa: foi visto na captura de tela. Espaco reservado a
     direita, e o padding extra embaixo tira a assinatura de sob o botao. */
  .rod-autoria { padding: 16px 96px 30px 24px !important; }
}

/* ---- Grade de cards de imóvel ----
   Três por linha no desktop, sempre. Antes cada grade usava auto-fit/auto-fill
   com minmax(~280px), o que rendia 4 colunas em 1320px e deixava os cards
   estreitos, e uma segunda linha órfã quando a lista tinha 4 itens.
   Fixar 3 vale para busca, landings de SEO e "imóveis relacionados", de modo
   que o card tenha sempre a mesma largura em todas as páginas. */
.grade-imoveis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .grade-imoveis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .grade-imoveis { grid-template-columns: minmax(0, 1fr); }
}

/* Mensagens da página interna /ativacao-base/: 2x2 no desktop, uma coluna no
   celular. São 4 blocos de texto longo — em 3 colunas a quarta ficava sozinha,
   e a 900px o texto já fica estreito demais para ler corrido. */
.secao-mensagens { padding-left: 32px; padding-right: 32px; }
.grade-mensagens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .grade-mensagens { grid-template-columns: minmax(0, 1fr); }
}
/* Numa tela de 375px, os 32px da secao mais os 24px do card deixavam ~40% da
   largura em respiro. O texto e o produto desta pagina: encolher as duas
   camadas devolve a linha de leitura. Ver a nota sobre padding duplicado. */
@media (max-width: 560px) {
  .secao-mensagens { padding-left: 18px; padding-right: 18px; }
  .grade-mensagens article { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   LINK-BIO (/links/, /marco/, /cristian/, /luana/, /june-rocha/)
   Migrado do Next.js em 25/08/2026. O original usava framer-motion; aqui as
   animacoes sao CSS e o IntersectionObserver mora em src/js/linkbio.js.
   Prefixo lb- para nao colidir com o resto do site.
   ============================================================ */
.lb-hero {
  position: relative;
  min-height: 100svh;          /* svh: no celular a barra do navegador nao corta */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lb-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.lb-hero-veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(9,44,62,.62) 0%, rgba(9,44,62,.28) 42%, rgba(9,44,62,.86) 100%),
    linear-gradient(90deg, rgba(42,124,168,.18), transparent 48%, rgba(18,69,95,.22));
}
.lb-hero-conteudo {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 24px;
}
.lb-logo {
  height: 80px; width: auto; max-width: min(320px, 78vw);
  object-fit: contain;
  margin-bottom: 28px;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.35));
  animation: lb-entra .9s cubic-bezier(.25,.46,.45,.94) both;
}
.lb-hero-chamada {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 1.05rem; font-weight: 300;
  letter-spacing: .18em; text-transform: uppercase;
  animation: lb-entra .9s cubic-bezier(.25,.46,.45,.94) .25s both;
}
.lb-seta {
  margin-top: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: rgba(255,255,255,.9);
  animation: lb-pula 1.4s cubic-bezier(.45,0,.55,1) infinite;
}
.lb-seta-traco {
  display: block; width: 2px; height: 20px; border-radius: 2px;
  background: rgba(255,255,255,.6);
}
@keyframes lb-entra { from { opacity: 0; transform: translateY(-14px) } to { opacity: 1; transform: none } }
@keyframes lb-pula  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(12px) } }

.lb-corpo {
  position: relative;
  max-width: 1120px; margin: 0 auto;
  padding: 48px 24px 78px;
  background: #fff;
}
.lb-corpo::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: #e2edf3;
}
.lb-corpo-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 24px;
  color: #6b8494;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.lb-corpo-topo img {
  width: auto;
  height: 34px;
  display: block;
}
.lb-abas-caixa { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 30px; }
.lb-dica {
  color: #6b8494;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lb-abas {
  display: flex; gap: 4px; padding: 4px;
  background: #f2f8fb; border: 1px solid #d8e7ef;
  border-radius: 999px;
  max-width: 100%; overflow-x: auto;   /* 3 abas nao cabem em 375px */
  scrollbar-width: none;
}
.lb-abas::-webkit-scrollbar { display: none }
.lb-aba {
  flex: 0 0 auto;
  padding: 9px 18px; border: 0; border-radius: 999px;
  background: transparent; color: #5b7284;
  font: inherit; font-size: .875rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .25s, color .25s;
}
.lb-aba:hover { color: #12455f }
.lb-aba-on { background: #12455f; color: #fff; box-shadow: 0 8px 18px rgba(9,44,62,.16) }
.lb-aba-on:hover { color: #fff }
.lb-aba:focus-visible { outline: 2px solid #2a7ca8; outline-offset: 2px }

.lb-painel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.lb-oculto { display: none }

.lb-card {
  --cor: #2a7ca8;
  position: relative;
  display: flex; align-items: center; gap: 18px;
  min-height: 112px;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid #dbe9f0;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(9,44,62,.08);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
  /* estado inicial da revelacao; o .lb-vis entra pelo IntersectionObserver */
  opacity: 0; transform: translateY(22px);
}
.lb-card::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 5px;
  border-radius: 8px 0 0 8px;
  background: var(--cor);
}
.lb-card:hover { transform: translateY(-4px); border-color: #b9d5e3; box-shadow: 0 20px 44px rgba(9,44,62,.14); background: #fbfdfe }
.lb-card:focus-visible { outline: 2px solid var(--cor); outline-offset: 3px }
.lb-card-icone {
  flex: 0 0 auto; width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: #f2f8fb;
  border: 1px solid color-mix(in srgb, var(--cor) 28%, #dbe9f0);
  color: var(--cor);
  transition: transform .3s ease;
}
.lb-card:hover .lb-card-icone { transform: scale(1.09) }
.lb-card-icone svg { width: 27px; height: 27px }
.lb-card-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.lb-card-titulo { color: #12455f; font-weight: 700; font-size: 1.06rem; line-height: 1.25 }
.lb-card-desc {
  color: #6b8494; font-size: .85rem; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-card-seta {
  flex: 0 0 auto; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 999px;
  background: #2a7ca8;
  color: #fff;
  transition: transform .3s ease, background .2s ease;
}
.lb-card:hover .lb-card-seta { background: #12455f }
.lb-card:hover .lb-card-seta { transform: translateX(3px) }

.lb-imovel {
  background: #fff; border: 1px solid #dbe9f0;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 12px 34px rgba(9,44,62,.08);
  opacity: 0; transform: translateY(22px);
}
#painel-imoveis {
  max-width: 820px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
}
/* Depois de .lb-card E de .lb-imovel de proposito: mesma especificidade, entao
   quem vence e quem vem por ultimo. Subir esta regra deixa o card do imovel
   invisivel ao trocar de aba. */
.lb-card.lb-vis, .lb-imovel.lb-vis {
  opacity: 1; transform: none;
  transition: opacity .5s ease var(--atraso,0s), transform .5s ease var(--atraso,0s);
}

.lb-imovel-foto { position: relative; display: block }
.lb-imovel-foto img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block }
.lb-badge {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: #12455f;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.lb-imovel-texto { padding: 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start }
.lb-imovel-titulo { margin: 0; color: #12455f; font-size: 1.16rem; line-height: 1.3 }
.lb-imovel-local { margin: 0; color: #6b8494; font-size: .82rem }
.lb-imovel-desc { margin: 0 0 6px; color: #45677a; font-size: .9rem; line-height: 1.5 }
.lb-imovel-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  background: #2a7ca8; color: #fff;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: background .2s ease;
}
.lb-imovel-btn:hover { background: #12455f; color: #fff }
.lb-imovel-btn svg { transition: transform .2s ease }
.lb-imovel-btn:hover svg { transform: translateX(3px) }

.lb-rodape { margin: 44px 0 0; text-align: center; color: #6b8494; font-size: .82rem }
.lb-rodape a { color: #12455f; font-weight: 600 }

@media (max-width: 560px) {
  /* Padding duplicado e a armadilha nº1 deste repo: o respiro sai so do .lb-corpo,
     o card mantem o seu. Medir os dois lados ao mexer. */
  .lb-corpo { padding-left: 16px; padding-right: 16px }
  /* Tres abas somavam 363px em 328 disponiveis e a terceira ficava escondida,
     sem sinal de que havia mais. Rolagem lateral numa barra de 3 itens e pior
     que texto menor: as tres passam a caber e nada fica invisivel. */
  .lb-abas {
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
  }
  .lb-aba {
    padding: 12px 10px;
    min-height: 44px;                /* alvo de toque: e o controle principal
                                        da pagina no celular */
    font-size: .78rem; letter-spacing: -.01em;
    min-width: 0;
  }
  .lb-card { padding: 18px; gap: 14px }
  .lb-card-icone { width: 46px; height: 46px }
  .lb-card-icone svg { width: 23px; height: 23px }
  .lb-card-titulo { font-size: .98rem }
  .lb-imovel-texto { padding: 18px }
  .lb-logo { height: 62px }
  .lb-hero-chamada { font-size: .9rem; letter-spacing: .14em }
}
@media (max-width: 760px) {
  .lb-painel { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) {
  .lb-logo, .lb-hero-chamada, .lb-seta { animation: none }
  .lb-card, .lb-imovel { opacity: 1; transform: none }
  .lb-vis { transition: none }
}

/* ============================================================
   Centrais de links: /central-opa-2026/ (equipe) e /central-corretores/.
   Visual de 05/10/2026, no estilo da central de links da G Compass (topo com
   foto, busca encaixada na borda, pilulas, secoes de cartoes em linha).
   Prefixo cl- proprio: o /pop-cadastro/ ainda usa as tres int- abaixo.
   ============================================================ */
.int-topo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.int-titulo {
  margin: 0;
  color: #12455f;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -.035em;
}
.int-sub {
  max-width: 58ch;
  margin: 16px 0 0;
  color: #5b7284;
  font-size: .98rem;
  line-height: 1.55;
}
@media (max-width: 560px) {
  .int-topo { padding-left: 16px; padding-right: 16px; align-items: flex-start; flex-direction: column }
  .int-titulo { font-size: 2rem }
}

.cl-pagina {
  min-height: 100vh;
  background: radial-gradient(1100px 520px at 0% 0%, #e4eff6 0%, rgba(228,239,246,0) 70%), #f5f9fb;
  color: #12455f;
}
.cl-corpo { max-width: 1120px; margin: 0 auto; padding: 24px 24px 96px }

.cl-hero {
  padding: 30px 40px 68px;
  border-radius: 26px;
  color: #fff;
  background:
    linear-gradient(100deg, rgba(7,30,43,.94) 0%, rgba(9,38,54,.80) 48%, rgba(9,38,54,.30) 100%),
    url("/assets/img/linkbio-hero.webp") center / cover no-repeat #0a2634;
}
.cl-hero-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 38px }
.cl-hero-topo img { display: block; width: auto; height: 30px }
.cl-selo {
  padding: 6px 13px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 500;
  white-space: nowrap;
}
.cl-titulo {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.035em;
}
.cl-sub { max-width: 52ch; margin: 12px 0 0; color: rgba(255,255,255,.78); font-size: .98rem; line-height: 1.5 }

.cl-busca-caixa {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  margin: -30px 24px 0;
  padding: 0 14px 0 22px;
  background: #fff;
  border: 1px solid #e1ebf1;
  border-radius: 999px;
  color: #2a7ca8;
  box-shadow: 0 14px 34px rgba(9,44,62,.12);
}
.cl-busca-caixa:focus-within { border-color: #2a7ca8 }
.cl-busca { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #12455f; font: inherit; font-size: 1rem }
.cl-busca::placeholder { color: #8ba0ad }
.cl-busca:focus { outline: none }
.cl-tecla {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d8e7ef;
  border-radius: 8px;
  color: #6b8494;
  font: inherit;
  font-size: .82rem;
}

.cl-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0 }
.cl-filtro {
  padding: 9px 17px;
  border: 1px solid #d8e7ef;
  border-radius: 999px;
  background: #fff;
  color: #12455f;
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.cl-filtro:hover { border-color: #b9d5e3 }
.cl-filtro-on, .cl-filtro-on:hover { background: #12455f; border-color: #12455f; color: #fff }
.cl-filtro:focus-visible { outline: 2px solid #2a7ca8; outline-offset: 2px }

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

.cl-secao { margin-top: 44px }
.cl-secao[hidden] { display: none }
.cl-secao-titulo { margin: 0 0 14px; color: #12455f; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em }
/* stretch: os cartoes de uma linha ficam da mesma altura, mesmo quando uma
   descricao quebra em duas linhas e a vizinha nao. */
.cl-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch }
@media (max-width: 900px) { .cl-grade { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 620px) { .cl-grade { grid-template-columns: minmax(0, 1fr); gap: 12px } }

.cl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6eef3;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(9,44,62,.04), 0 6px 18px rgba(9,44,62,.05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cl-card:hover { border-color: #c9dde8; box-shadow: 0 1px 2px rgba(9,44,62,.04), 0 12px 28px rgba(9,44,62,.09); transform: translateY(-1px) }
.cl-card[hidden] { display: none }
.cl-link {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 16px 54px 16px 16px;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}
.cl-link:hover { color: inherit }
.cl-link:focus-visible { outline: 2px solid #2a7ca8; outline-offset: 2px }
.cl-icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eef5f9;
  color: #2a7ca8;
}
.cl-icone svg { width: 20px; height: 20px }
.cl-icone-foto { background: none }
.cl-icone-foto img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover }
.cl-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.cl-card-titulo { color: #12455f; font-size: .95rem; font-weight: 600; line-height: 1.3 }
.cl-card-desc { color: #6b8494; font-size: .82rem; line-height: 1.4 }

.cl-copiar {
  position: absolute;
  top: calc(50% - 19px);
  right: 10px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #8ba0ad;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cl-copiar:hover { background: #eef5f9; color: #12455f }
.cl-copiar:focus-visible { outline: 2px solid #2a7ca8; outline-offset: 2px }
.cl-copiado, .cl-copiado:hover { color: #1f8a5b }
.cl-copiar[data-aviso]::after {
  content: attr(data-aviso);
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  padding: 5px 9px;
  border-radius: 8px;
  background: #12455f;
  color: #fff;
  font-size: .74rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}

/* Card de prompt: abaixo da linha, o "como usar", o botao e o texto recolhido. */
.cl-prompt { padding: 0 16px 16px; border-top: 1px solid #eef3f6 }
.cl-prompt-como { margin: 12px 0; color: #5b7284; font-size: .82rem; line-height: 1.5 }
.cl-btn {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: #2a7ca8;
  color: #fff;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.cl-btn:hover { background: #12455f }
.cl-btn.cl-copiado { background: #1f8a5b; color: #fff }
.cl-btn:focus-visible { outline: 2px solid #2a7ca8; outline-offset: 2px }
.cl-prompt-ver { margin-top: 12px }
.cl-prompt-ver summary { cursor: pointer; color: #2a7ca8; font-size: .82rem; font-weight: 600 }
.cl-prompt-ver summary:focus-visible { outline: 2px solid #2a7ca8; outline-offset: 2px }
.cl-prompt-texto {
  margin: 10px 0 0; max-height: 260px; overflow: auto; padding: 12px;
  background: #f6fafc; border: 1px solid #e2edf3; border-radius: 10px;
  color: #3f5868; font-family: inherit; font-size: .76rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.cl-vazio { margin: 48px 0 0; text-align: center; color: #6b8494 }

@media (max-width: 560px) {
  /* Padding so no corpo; o hero e os cartoes mantem o deles. Medir os dois lados. */
  .cl-corpo { padding: 16px 16px 72px }
  .cl-hero {
    padding: 22px 22px 58px;
    border-radius: 22px;
    background:
      linear-gradient(100deg, rgba(7,30,43,.94) 0%, rgba(9,38,54,.82) 60%, rgba(9,38,54,.5) 100%),
      url("/assets/img/linkbio-hero-mobile.webp") center / cover no-repeat #0a2634;
  }
  .cl-hero-topo { margin-bottom: 28px }
  .cl-hero-topo img { height: 26px }
  .cl-titulo { font-size: 2.1rem }
  .cl-sub { font-size: .92rem }
  .cl-busca-caixa { height: 54px; margin: -27px 10px 0; padding-left: 18px }
  .cl-tecla { display: none }
  .cl-filtros { justify-content: flex-start; margin-top: 22px }
  .cl-secao { margin-top: 34px }
}

/* ---------- /interno/pop-cadastro/ ---------- */
.pop-corpo { max-width: 780px; margin: 0 auto; padding: 28px 24px 72px }
.pop-secao { margin: 0 0 20px; color: #fff; font-size: 1.3rem; font-weight: 500 }
.pop-passos { list-style: none; margin: 0 0 42px; padding: 0; display: flex; flex-direction: column; gap: 14px }
.pop-passo {
  display: flex; gap: 16px; padding: 22px;
  background: #0E3142; border: 1px solid rgba(255,255,255,.10); border-radius: 18px;
}
.pop-num {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 999px;
  background: #2A82B0; color: #fff; font-size: .82rem; font-weight: 700;
}
.pop-passo-corpo { flex: 1; min-width: 0 }
.pop-passo-titulo { margin: 3px 0 8px; color: #fff; font-size: 1.05rem; line-height: 1.3 }
.pop-passo-desc { margin: 0; color: rgba(255,255,255,.76); font-size: .9rem; line-height: 1.55 }
.pop-lista { margin: 12px 0 0; padding-left: 20px; color: rgba(255,255,255,.7); font-size: .86rem; line-height: 1.7 }
.pop-alerta {
  margin: 14px 0 0; padding: 10px 14px;
  background: rgba(230,160,60,.10); border-left: 3px solid #e6a03c; border-radius: 0 8px 8px 0;
  color: #f0c48a; font-size: .84rem; line-height: 1.5;
}
.pop-resp { margin: 14px 0 0; color: rgba(255,255,255,.45); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em }

.pop-check {
  padding: 26px;
  background: #0E3142; border: 1px solid rgba(255,255,255,.10); border-left: 4px solid #1f8a5b;
  border-radius: 4px 18px 18px 4px;
}
.pop-check-titulo { margin: 0 0 6px; color: #fff; font-size: 1.15rem; font-weight: 500 }
.pop-check-nota { margin: 0 0 18px; color: rgba(255,255,255,.5); font-size: .8rem; line-height: 1.5 }
.pop-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px; border-radius: 10px; border: 1px solid transparent;
  color: rgba(255,255,255,.85); font-size: .89rem; line-height: 1.45;
  cursor: pointer; transition: background .15s;
}
.pop-item:hover { background: rgba(255,255,255,.05) }
.pop-item input { flex: 0 0 auto; width: 19px; height: 19px; margin: 1px 0 0; accent-color: #1f8a5b; cursor: pointer }
.pop-item:has(input:checked) span { color: rgba(255,255,255,.5); text-decoration: line-through }
.pop-progresso { margin: 16px 0 0; color: rgba(255,255,255,.5); font-size: .82rem }
.pop-completo { color: #4ad295; font-weight: 600 }
.pop-limpar {
  margin-top: 14px; padding: 9px 16px; min-height: 40px;
  background: transparent; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: rgba(255,255,255,.75); font: inherit; font-size: .78rem; cursor: pointer;
}
.pop-limpar:hover { background: rgba(255,255,255,.06); color: #fff }
.pop-limpar:focus-visible { outline: 2px solid #7cc3e8; outline-offset: 2px }

@media (max-width: 560px) {
  .pop-corpo { padding-left: 16px; padding-right: 16px }
  .pop-passo { padding: 18px; gap: 12px }
  .pop-check { padding: 20px }
}

/* ============================================================
   MÍDIA KITS (/kit-marco/, /kit-opa/) — noindex.
   Migrado em 25/08/2026. O original tinha 1.209 linhas de CSS proprio e dois
   layouts distintos; por decisao do usuario o conteudo foi remontado no
   padrao da casa, um template so para os dois.
   ============================================================ */
.mk-capa {
  position: relative; min-height: 90svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
}
.mk-capa-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.mk-capa-veu { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,27,37,.72), rgba(6,27,37,.55) 45%, rgba(6,27,37,.88)) }
.mk-capa-conteudo { position: relative; z-index: 1; padding: 60px 24px; max-width: 900px }
.mk-eyebrow {
  display: block; margin-bottom: 18px;
  color: #7cc3e8; font-size: .74rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
}
.mk-h1 { margin: 0 0 14px; color: #fff; font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.05; font-weight: 600; letter-spacing: -.02em }
.mk-apelido { display: block; margin-top: 6px; color: rgba(255,255,255,.45); font-size: .38em; font-weight: 300; letter-spacing: .1em }
.mk-chamada { margin: 0 0 10px; color: rgba(255,255,255,.9); font-size: clamp(1rem, 2.4vw, 1.2rem); font-weight: 300 }
.mk-specs { margin: 0; color: rgba(255,255,255,.55); font-size: .84rem; line-height: 1.7 }
.mk-destaques { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px }
.mk-destaque {
  min-width: 150px; padding: 16px 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
}
.mk-destaque-num { display: block; color: #fff; font-size: 1.15rem; font-weight: 600 }
.mk-destaque-rotulo { display: block; margin-top: 4px; color: rgba(255,255,255,.55); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase }

.mk-corpo { max-width: 900px; margin: 0 auto; padding: 0 24px 80px }
.mk-secao { padding: 56px 0; border-bottom: 1px solid rgba(255,255,255,.08) }
.mk-rotulo {
  display: block; margin-bottom: 12px;
  color: #7cc3e8; font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}
.mk-rotulo-fraco { color: rgba(255,255,255,.4) }
.mk-h2 { margin: 0 0 22px; color: #fff; font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.25; font-weight: 500; letter-spacing: -.01em }
.mk-texto p { margin: 0 0 16px; color: rgba(255,255,255,.78); font-size: .97rem; line-height: 1.75 }
.mk-texto p:last-child { margin-bottom: 0 }
.mk-lead { margin: 0 0 18px; color: rgba(255,255,255,.88); font-size: 1.08rem; line-height: 1.7; font-weight: 300 }
.mk-abertura { border-bottom: 0 }

.mk-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start }
@media (max-width: 760px) { .mk-duas { grid-template-columns: 1fr; gap: 26px } }
.mk-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.mk-lista li {
  padding: 11px 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  color: rgba(255,255,255,.8); font-size: .86rem;
}
.mk-foto img { width: 100%; height: auto; border-radius: 16px; display: block }

.mk-metricas { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-bottom: 34px }
@media (max-width: 700px) { .mk-metricas { grid-template-columns: 1fr } }
.mk-metrica { padding: 22px; background: #165676; border: 1px solid rgba(255,255,255,.08); border-radius: 16px }
.mk-metrica-num { display: block; color: #fff; font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em }
.mk-metrica-rotulo { display: block; margin-top: 6px; color: rgba(255,255,255,.62); font-size: .8rem; line-height: 1.4 }

.mk-perfil { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 26px }
@media (max-width: 700px) { .mk-perfil { grid-template-columns: 1fr; gap: 22px } }
.mk-perfil-linha {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78); font-size: .89rem;
}
.mk-perfil-linha:last-child { border-bottom: 0 }
.mk-perfil-destaque { color: #7cc3e8; font-weight: 600 }
.mk-conclusao {
  margin: 0 0 26px; padding: 18px 20px;
  background: rgba(124,195,232,.08); border-left: 3px solid #7cc3e8; border-radius: 0 10px 10px 0;
  color: rgba(255,255,255,.88); font-size: .93rem; line-height: 1.65;
}
.mk-barra { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.08); border-radius: 12px; overflow: hidden }
@media (max-width: 760px) { .mk-barra { grid-template-columns: repeat(2, minmax(0,1fr)) } }
.mk-barra-item { padding: 16px 14px; background: #0d2a38 }
.mk-barra-rotulo { display: block; color: rgba(255,255,255,.45); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase }
.mk-barra-valor { display: block; margin-top: 6px; color: #fff; font-size: .88rem; font-weight: 500 }

.mk-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px }
@media (max-width: 860px) { .mk-cards { grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 600px) { .mk-cards { grid-template-columns: 1fr } }
.mk-card { padding: 24px; background: #165676; border: 1px solid rgba(255,255,255,.08); border-radius: 16px }
.mk-card-num { display: block; margin-bottom: 12px; color: #7cc3e8; font-size: .78rem; font-weight: 700; letter-spacing: .14em }
.mk-card-titulo { margin: 0 0 10px; color: #fff; font-size: 1.02rem; line-height: 1.3; font-weight: 600 }
.mk-card-texto { margin: 0; color: rgba(255,255,255,.74); font-size: .88rem; line-height: 1.6 }
.mk-nota { margin: 26px 0 0; color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.7 }

.mk-contato { display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: center; padding: 50px 0 40px }
@media (max-width: 700px) { .mk-contato { grid-template-columns: 1fr; justify-items: start } }
.mk-contato-nome { margin: 8px 0 2px; color: #fff; font-size: 1.3rem; font-weight: 600 }
.mk-contato-handle { margin: 0 0 16px; color: #7cc3e8; font-size: .92rem }
.mk-contato-linha { margin: 0 0 4px; color: rgba(255,255,255,.66); font-size: .88rem }
.mk-assinatura { margin: 18px 0 0; color: rgba(255,255,255,.5); font-size: .88rem; font-style: italic; line-height: 1.6 }
.mk-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 22px; padding: 13px 26px; min-height: 44px;
  background: #2a7ca8; border-radius: 999px;
  color: #fff; font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: background .2s;
}
.mk-cta:hover { background: #3691c0 }
.mk-cta:focus-visible { outline: 2px solid #7cc3e8; outline-offset: 3px }
.mk-qr { text-align: center }
.mk-qr img { width: 132px; height: 132px; border-radius: 12px; background: #fff; padding: 8px; display: block }
.mk-qr-rotulo { display: block; margin-top: 10px; color: rgba(255,255,255,.45); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase }

.mk-rodape { margin: 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08); text-align: center; color: rgba(255,255,255,.42); font-size: .78rem }
.mk-rodape a { color: rgba(255,255,255,.62) }

@media (max-width: 560px) {
  /* Padding so no corpo; card e caixa mantem o deles. */
  .mk-corpo { padding-left: 16px; padding-right: 16px }
  .mk-secao { padding: 40px 0 }
  .mk-card { padding: 20px }
}

/* ============================================================
   /cadastro-imovel/ — 41 perguntas, uma por tela.
   Migrado de CadastroImovelForm.tsx em 25/08/2026. Convive com
   /anuncie-seu-imovel/ (formulario curto) por decisao do usuario: aquele e
   o primeiro contato, este e a ficha completa.
   ============================================================ */
.ci-largura { max-width: 640px; margin: 0 auto; padding: 0 24px }
.ci-topo { padding: 44px 0 8px }
.ci-eyebrow { display: block; margin-bottom: 10px; color: #2a7ca8; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase }
.ci-h1 { margin: 0 0 10px; color: #12455f; font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.2 }
.ci-sub { margin: 0; color: #5a6b75; font-size: .96rem; line-height: 1.6 }
.ci-corpo { padding-bottom: 72px }

.ci-retomar {
  margin: 24px 0 0; padding: 18px 20px;
  background: #eef6fa; border: 1px solid #cfe4ef; border-radius: 14px;
}
.ci-retomar p { margin: 0 0 12px; color: #12455f; font-size: .92rem }
.ci-retomar-acoes { display: flex; flex-wrap: wrap; gap: 10px }

/* Link fixo: com quem o proprietario esta falando (cadastro-imovel.js). */
.ci-corretor {
  margin: 24px 0 0; padding: 14px 18px; display: flex; align-items: center; gap: 14px;
  background: #ffffff; border: 1px solid #d8e2e8; border-radius: 14px;
}
.ci-corretor[hidden] { display: none }
.ci-corretor img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none }
.ci-corretor img[hidden] { display: none }
.ci-corretor p { margin: 0; color: #12455f; font-size: .95rem; line-height: 1.45 }

.ci-form { margin-top: 26px }

.ci-progresso { margin-bottom: 24px }
.ci-progresso-barra { height: 4px; background: #e3ebef; border-radius: 999px; overflow: hidden }
.ci-progresso-barra span { display: block; height: 100%; width: 0; background: #2a7ca8; border-radius: 999px; transition: width .3s ease }
.ci-progresso-texto { margin: 8px 0 0; color: #7a8b95; font-size: .8rem }

.ci-passo { border: 0; margin: 0; padding: 0; min-width: 0 }
.ci-secao { display: block; margin-bottom: 8px; color: #2a7ca8; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase }
.ci-label { padding: 0; color: #12455f; font-size: clamp(1.15rem, 3.6vw, 1.42rem); font-weight: 600; line-height: 1.3 }
.ci-obrig { color: #c0563f; margin-left: 3px }
.ci-desc { margin: 8px 0 0; color: #5a6b75; font-size: .89rem; line-height: 1.55 }

.ci-campo {
  width: 100%; margin-top: 18px; padding: 14px 16px;
  border: 1.5px solid #d5e0e6; border-radius: 12px;
  background: #fff; color: #12455f; font: inherit; font-size: 1rem;
}
.ci-campo::placeholder { color: #9aa9b2 }
.ci-campo:focus { outline: none; border-color: #2a7ca8; box-shadow: 0 0 0 3px rgba(42,124,168,.14) }
textarea.ci-campo { resize: vertical; min-height: 110px }
.ci-outro { margin-top: 10px }

.ci-opcoes { display: flex; flex-direction: column; gap: 9px; margin-top: 18px }
.ci-opcao {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; min-height: 52px;
  border: 1.5px solid #d5e0e6; border-radius: 12px; background: #fff;
  color: #2c3e48; font-size: .95rem; line-height: 1.4;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.ci-opcao:hover { border-color: #9fc4d8; background: #f7fbfd }
.ci-opcao input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: #2a7ca8; cursor: pointer }
.ci-opcao:has(input:checked) { border-color: #2a7ca8; background: #eef6fa }

.ci-erro { margin: 12px 0 0; color: #c0563f; font-size: .87rem }
.ci-passo-erro .ci-campo, .ci-passo-erro .ci-opcoes { border-color: #c0563f }

.ci-resumo { margin: 20px 0 0; display: grid; grid-template-columns: 1fr; gap: 0 }
.ci-resumo dt { margin-top: 14px; color: #7a8b95; font-size: .78rem; line-height: 1.4 }
.ci-resumo dd {
  margin: 3px 0 0; padding: 9px 12px;
  background: #f4f8fa; border: 1px solid #e3ebef; border-radius: 9px;
  color: #12455f; font-size: .92rem; line-height: 1.45; cursor: pointer;
}
.ci-resumo dd:hover { border-color: #2a7ca8 }
.ci-resumo dd:focus-visible { outline: 2px solid #2a7ca8; outline-offset: 2px }
.ci-vazio { color: #9aa9b2; font-style: italic }
.ci-lgpd { margin: 18px 0 0; color: #7a8b95; font-size: .8rem; line-height: 1.5 }

.ci-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px }
.ci-btn {
  flex: 1 1 auto; min-height: 50px; padding: 14px 26px;
  border: 0; border-radius: 12px;
  background: #2a7ca8; color: #fff;
  font: inherit; font-size: .96rem; font-weight: 600; cursor: pointer;
  transition: background .2s;
}
.ci-btn:hover { background: #12455f }
.ci-btn:focus-visible { outline: 2px solid #12455f; outline-offset: 3px }
.ci-btn:disabled { opacity: .6; cursor: default }
.ci-btn-fraco { flex: 0 0 auto; background: transparent; border: 1.5px solid #d5e0e6; color: #5a6b75 }
.ci-btn-fraco:hover { background: #f4f8fa; border-color: #9fc4d8; color: #12455f }
.ci-btn-enviar { background: #12455f }
.ci-falha { margin: 16px 0 0; padding: 13px 16px; background: #fdf0ed; border: 1px solid #f0cfc7; border-radius: 10px; color: #a4402c; font-size: .89rem; line-height: 1.5 }

@media (max-width: 560px) {
  /* Respiro so na largura; o campo e a opcao mantem o padding deles. */
  .ci-largura { padding-left: 16px; padding-right: 16px }
  .ci-acoes { position: sticky; bottom: 0; padding: 12px 0; background: #fff; box-shadow: 0 -8px 16px rgba(255,255,255,.9) }
}

/* ---------- /cadastro-imovel/enviado/ ----------
   Confirmacao do cadastro. Sem cabecalho e rodape de proposito: a pessoa
   acabou de terminar 41 perguntas, e o unico caminho util aqui e o
   Lancamento OPA. Nao oferece WhatsApp: o cadastro ja chegou, ninguem
   precisa reenviar nada. */
.ce-tela {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  background: linear-gradient(158deg, #0a2d40 0%, #12455f 48%, #1d6486 100%);
}
.ce-caixa { width: 100%; max-width: 620px; color: #fff }
.ce-selo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 24px;
  border-radius: 999px; background: rgba(255,255,255,.14); color: #fff;
}
.ce-h1 { margin: 0 0 16px; font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.1; font-weight: 600; letter-spacing: -.03em }
.ce-texto { margin: 0; font-size: 1.05rem; line-height: 1.7; font-weight: 300; color: rgba(255,255,255,.85) }

.ce-lanc {
  margin: 38px 0 0; padding: 26px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
}
.ce-lanc-texto { margin: 0 0 18px; font-size: 1rem; line-height: 1.55; font-weight: 300; color: rgba(255,255,255,.85) }
.ce-lanc-texto strong { font-weight: 600; color: #fff }
.ce-btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 14px 26px;
  background: #fff; color: #12455f; border-radius: 999px;
  font-size: .92rem; font-weight: 600; text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.ce-btn:hover { background: #2a7ca8; color: #fff }
.ce-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px }
.ce-voltar {
  display: inline-block; margin-top: 30px;
  color: rgba(255,255,255,.6); font-size: .88rem; text-decoration: none;
}
.ce-voltar:hover { color: #fff; text-decoration: underline }

/* logo no topo do cadastro, que nao tem mais header */
.ci-voltar-home { display: inline-block; margin-bottom: 26px }
.ci-voltar-home img { display: block; height: 38px; width: auto }


/* ---------- Perguntas de comprador (src/partials/perguntas-comprador.html) ----------
   O partial entra em seis formularios, em fundo claro e escuro. As regras ficam
   aqui, e nao inline, porque um <style> dentro do partial se repetiria em cada
   inclusao — a home tem dois formularios de comprador na mesma pagina.

   O rotulo copia o dos campos antigos do formulario (13.5px / 500 / #12455f).
   Medido: com 12.5px / 400 / #5b7284 as perguntas pareciam de outro
   formulario, coladas logo abaixo de rotulos mais escuros e maiores. */
.perg-campo {
  display: flex;
  flex-direction: column;
  gap: var(--perg-gap, 10px);
  font-size: var(--perg-rotulo-tam, 13.5px);
  font-weight: var(--perg-rotulo-peso, 500);
  line-height: 1.45;
  letter-spacing: var(--perg-rotulo-ls, -0.01em);
  color: var(--perg-rotulo-cor, #12455f);
}
.perg-campo select,
.perg-campo textarea {
  border: 0;
  border-bottom: 1px solid #d5e2ea;
  background: transparent;
  padding: 0 0 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: #12455f;
  outline: none;
  transition: border-color .3s ease;
}
/* O select do sistema vem com altura e recuo proprios; sem isto ele fica ~2px
   mais alto que os inputs ao lado e a linha de base do formulario desalinha. */
.perg-campo select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  line-height: 1.45;
  /* seta desenhada em CSS: o select sem appearance perde a do sistema */
  background-image: linear-gradient(45deg, transparent 50%, #5b7284 50%),
                    linear-gradient(135deg, #5b7284 50%, transparent 50%);
  background-position: right 6px top 8px, right 1px top 8px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.perg-campo textarea { resize: vertical; min-height: 92px; }
.perg-campo select:focus,
.perg-campo textarea:focus { border-color: #2a7ca8; }

/* Fundo escuro: #12455f sobre #0f3d55 fica ilegivel. */
.perg-escuro { --perg-rotulo-cor: rgba(255, 255, 255, 0.88); }
.perg-escuro .perg-campo select,
.perg-escuro .perg-campo textarea { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.35); }
.perg-escuro .perg-campo select:focus,
.perg-escuro .perg-campo textarea:focus { border-color: #ffffff; }
.perg-escuro .perg-campo select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.7) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.7) 50%, transparent 50%);
}
.perg-escuro .perg-campo textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
/* A lista aberta do <select> e desenhada pelo sistema, com fundo claro: sem
   isto, no fundo escuro as opcoes ficam branco sobre branco. */
.perg-escuro .perg-campo option { color: #12455f; }

/* ---------- Layout das duas etapas ----------
   O `display` mora aqui, e NAO no style inline, por um motivo medido: ao
   revelar a etapa o JS limpa `style.display` (para o atributo `hidden` poder
   mandar), o que apagava junto o `display:flex` inline. O bloco caia para
   `block`, o `gap` deixava de valer e as tres perguntas ficavam coladas —
   0px entre elas, contra 26px entre os campos vizinhos. */
.passo-2 { display: flex; flex-direction: column; gap: 26px; }
.passo-2--largo { grid-column: 1 / -1; }
/* O formulario de visita usa rotulo menor e mais leve que os demais (12px/400,
   com espacamento positivo). O rotulo das perguntas herda o estilo de CADA
   formulario por variavel, em vez de impor um tamanho unico: fixo em 13.5/500
   ele casava com o contato e destoava aqui, no mesmo bloco. */
.passo-2--grade {
  --perg-rotulo-tam: 12px;
  --perg-rotulo-peso: 400;
  --perg-rotulo-ls: 0.02em;
  --perg-gap: 9px;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px 20px;
  align-items: end;
}
/* A ficha do imovel usa rotulo menor e cinza (12.5px/400/#5b7284) — o bloco
   inteiro e mais discreto que o formulario da pagina de contato. */
.passo-2--sutil {
  --perg-rotulo-tam: 12.5px;
  --perg-rotulo-peso: 400;
  --perg-rotulo-cor: #5b7284;
  --perg-gap: 8px;
  gap: 20px;
}
/* A ficha de LANÇAMENTO usa o mesmo bloco discreto, mas sobre fundo escuro:
   herda tamanho e peso do --sutil e troca só a cor do rótulo.
   ORDEM IMPORTA: as duas regras têm a mesma especificidade (uma classe), então
   esta precisa vir DEPOIS de .passo-2--sutil. Medido no navegador: com ela
   antes, o rótulo saía #5b7284 (cinza claro) sobre o fundo escuro. */
.passo-2--lanc { --perg-rotulo-cor: rgba(255, 255, 255, 0.6); }
/* A lista aberta do <select> é desenhada pelo sistema, sobre fundo claro:
   sem isto o texto da opção sai branco no branco. */
.passo-2--lanc select.input-opa option { color: #12455f; }

.passo-2b { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: center; }

/* O botao que fecha a etapa ganha um respiro maior que o gap entre campos:
   ele encerra o formulario, nao e mais um campo da lista. */
.passo-2 > [data-enviar] { margin-top: 6px; align-self: flex-start; }

/* A pergunta aberta ("conta um pouco...") e um convite a escrever: dentro da
   grade ela ocupa a linha inteira. Mirar o campo pelo data-campo, e nao por
   :last-of-type — no formulario de visita existem outros <label> depois dela
   (data, periodo, "vem de onde"), e a regra por posicao caia no label errado.
   Medido: a caixa de texto ficava com 200px de 640. */
.passo-2--grade .perg-campo:has([data-campo="historia_ilhabela"]) { grid-column: 1 / -1; }

/* O passo 2 nasce com o atributo `hidden`. Com o display vindo de classe (e
   nao mais inline), o `hidden` sozinho ainda perderia para a classe — por isso
   o !important continua necessario aqui. */
[data-passo-1][hidden],
[data-passo-2][hidden],
[data-passo-2b][hidden] { display: none !important; }

/* ---- Favoritos (src/js/favoritos.js) ----
   O coração entra por JS em todo card com data-codigo, sobre a foto, no canto
   oposto aos selos ("Lançamento OPA", tipo de negócio). z-index 4 fica acima
   do véu do vendido (2) e da faixa (3). A cor do coração salvo é a única do
   recurso fora da paleta azul: é um estado, e precisa ler de longe. */
:root { --fav-cor: #d9485f; }
.fav-coracao {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #12455f;
  box-shadow: 0 2px 10px rgba(9, 44, 62, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.fav-coracao svg,
.fav-ficha svg,
.fav-topo svg {
  display: block;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill .2s ease, color .2s ease;
}
.fav-coracao svg { width: 20px; height: 20px; }
.fav-coracao[aria-pressed="true"],
.fav-ficha[aria-pressed="true"] svg { color: var(--fav-cor); }
.fav-coracao[aria-pressed="true"] svg,
.fav-ficha[aria-pressed="true"] svg { fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .fav-coracao:hover { background: #ffffff; transform: scale(1.08); }
}
.fav-pulso svg { animation: favPulso .38s cubic-bezier(.22, .61, .36, 1); }
@keyframes favPulso {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Botão "Salvar" da ficha do imóvel, ao lado do "Falar no WhatsApp". */
.fav-ficha {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px 0 15px;
  border: 1px solid #cddde6;
  border-radius: 999px;
  background: #ffffff;
  color: #12455f;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.fav-ficha svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .fav-ficha:hover { border-color: #2a7ca8; background: #f4f9fb; }
}
/* Variante sobre o hero escuro da ficha de lançamento. */
.fav-ficha--escuro {
  height: auto;
  padding: 16px 28px 16px 24px;
  font-size: 16px;
  /* <button> não herda a entrelinha do body como os <a> vizinhos: sem isto
     ficava 2px mais baixo que o "Ver Tour Completo" (53px contra 55px). */
  line-height: inherit;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.fav-ficha--escuro svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .fav-ficha--escuro:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2); }
}

/* Ícone do topo com o contador. A cor segue o --nav do cabeçalho (branco
   sobre o hero, azul quando o topo fica sólido). */
.fav-topo {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--nav);
  transition: color .34s ease, opacity .2s ease;
}
.fav-topo svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .fav-topo:hover { opacity: 0.65; color: var(--nav); }
}
.fav-contagem {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--fav-cor);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}
/* Botão verde da página /favoritos/ e as duas opções que ele abre. */
.fav-zap-grupo { position: relative; }
.fav-btn-zap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #4f9f6f;
  color: #ffffff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s ease;
}
.fav-btn-zap:hover { background: #3d8459; color: #ffffff; }
.fav-seta { flex-shrink: 0; transition: transform .2s ease; }
.fav-btn-zap[aria-expanded="true"] .fav-seta { transform: rotate(180deg); }
.fav-opcoes {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 100%;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e2edf3;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(9, 44, 62, 0.14);
}
.fav-opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 10px;
  color: #12455f;
  text-align: left;
}
.fav-opcao:hover { background: #f4f9fb; color: #12455f; }
/* Divisória reta: um border-top herdava o raio da opção e virava moldura. */
.fav-opcao + .fav-opcao::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: #e8eff3;
}
.fav-opcao-titulo { font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.fav-opcao-texto { font-size: 13px; font-weight: 300; line-height: 1.45; color: #5b7284; }

/* Página /favoritos/: no celular os botões empilham com a mesma largura, em
   vez de cada um ter a do próprio texto (204px e 199px, medido). */
@media (max-width: 520px) {
  #fav-acoes { width: 100%; }
  #fav-acoes > * { flex: 1 1 100%; }
  #fav-zap-grupo .fav-btn-zap { width: 100%; }
  /* Sem isto a caixa crescia com a frase do corretor e ia até a borda da tela
     (medido: 32px à esquerda, 0 à direita), fora do alinhamento do botão. */
  #fav-zap-opcoes { width: 100%; max-width: none; }
}
/* hidden perde para display vindo de classe; aqui ele precisa ganhar */
.fav-contagem[hidden],
#fav-pagina [hidden] { display: none !important; }

/* Aviso "Salvo nos favoritos". No celular sobe acima do botão do WhatsApp e da
   barra de CTA da ficha, que ocupam o rodapé. */
.fav-aviso {
  position: fixed;
  left: 50%;
  bottom: 28px;
  /* acima do véu (9999) e do painel de cookies (10000): o aviso sobe para
     cima do painel e não pode ficar tingido pelo véu */
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 18px;
  /* width explícita: com left:50% e largura automática, o navegador só dá ao
     aviso a metade direita da tela (187px num celular de 375px), e o texto
     quebrava palavra por palavra. max-content + teto resolve nas duas larguras. */
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 14px 16px 14px 22px;
  border-radius: 14px;
  background: #12455f;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: 0 14px 34px rgba(9, 44, 62, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .25s ease, transform .25s ease;
}
.fav-aviso-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
/* break-word, não anywhere: só parte palavra que não cabe sozinha na linha
   (o link cru, quando copiar falha). "anywhere" partia "favorito/s". */
.fav-aviso > span { overflow-wrap: break-word; min-width: 0; }
.fav-aviso-acao {
  flex-shrink: 0;
  margin-left: auto;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: #8fc4dd;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fav-aviso-acao:hover { color: #ffffff; }
@media (max-width: 860px) {
  .fav-aviso { bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .fav-pulso svg { animation: none; }
  .fav-aviso { transition: none; }
  .fav-coracao { transition: none; }
}