/* ============================================================
   Rapp Imóveis — folha de estilo do site (Etapa 3a)
   Sem estilo embutido no HTML (CSP style-src 'self'). Movimento só aqui e no JS de arquivo próprio,
   sempre desligado em prefers-reduced-motion.
   ============================================================ */

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

/* overflow-x: clip (e não hidden) nos dois: nada vaza para o lado e o body não vira caixa de rolagem, o que quebraria
   o cabeçalho fixo (sticky). scroll-padding-bottom: o foco e as âncoras não ficam embaixo da barra fixa do detalhe. */
html {
  -webkit-text-size-adjust: 100%; overflow-x: clip;
  scroll-padding-top: calc(var(--header-h) + 16px); scroll-padding-bottom: var(--barra-h, 0px);
}

body {
  display: flex; flex-direction: column; min-height: 100dvh;
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}

main { flex: 1 0 auto; }
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--rapp-navy-700); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3 { color: var(--text-heading); font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
h1 em, h2 em { font-style: italic; font-weight: 500; }
/* Cormorant usa algarismos antigos por padrão ("1" parece "I"): preços e números com algarismos alinhados. */
.cartao-preco, .preco-grande, .preco-barra, .numero, .numero-passo, .carrossel-contagem, .contador, .especificacoes strong {
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
}
.sem-quebra { white-space: nowrap; }

.sentinela { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

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

/* ---- foco visível: anel navy nos fundos claros, cream nos escuros ---- */
:focus-visible { outline: 2px solid var(--rapp-navy-700); outline-offset: 2px; }
/* fundos navy: anel creme (contraste acima de 3:1) */
.secao-escura :focus-visible, .lightbox :focus-visible, .rodape :focus-visible, .hero :focus-visible, .whatsapp-fixo:focus-visible {
  outline-color: var(--rapp-cream-50);
}
.whatsapp-fixo:focus-visible { box-shadow: 0 0 0 4px var(--rapp-navy-900); }

.pular {
  position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 18px;
  background: var(--rapp-navy-900); color: var(--rapp-cream-50); font-weight: 600; border-radius: var(--radius-sharp);
}
.pular:focus { top: 12px; outline-color: var(--rapp-cream-50); }

.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--section-pad-x); }
/* padding-block: nunca zerar o padding lateral do .container quando as duas classes estão no mesmo elemento */
.secao { padding-block: var(--section-pad-y); }
.secao-escura { background: var(--surface-dark); color: var(--text-on-dark); }
.secao-escura h2, .secao-escura h3 { color: var(--text-on-dark); }

.eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-eyebrow);
}
.eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--accent); flex: none; }
.secao-escura .eyebrow, .hero .eyebrow, .hero-simples .eyebrow { color: var(--rapp-peach-300); }

.titulo-secao { font-size: var(--text-h2); margin-bottom: 8px; }
.cabeca-link { margin: 0 0 8px; }
.cabeca-secao { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }

/* ---- botões ---- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--radius-sharp); font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: background-color var(--dur-hover) var(--ease-out-expo), color var(--dur-hover) var(--ease-out-expo),
    border-color var(--dur-hover) var(--ease-out-expo), transform var(--dur-hover) var(--ease-out-expo);
}
/* Preenchimento deslizante: a camada ::before entra da esquerda no hover/foco. */
.botao::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--preenche, transparent);
  transform: translateX(-101%); transition: transform 0.45s var(--ease-out-expo);
}
.botao:hover::before, .botao:focus-visible::before { transform: translateX(0); }
.botao:active { transform: translateY(1px); }
.botao-primario { background: var(--rapp-navy-700); color: var(--rapp-cream-50); --preenche: var(--rapp-navy-900); }
.botao-claro { background: var(--rapp-cream-50); color: var(--rapp-navy-900); --preenche: var(--rapp-white); }
.botao-claro:hover { transform: translateY(-2px); }
.botao-contorno { background: transparent; color: var(--rapp-navy-700); border-color: var(--border-field); --preenche: var(--rapp-white); }
.botao-contorno:hover { border-color: var(--rapp-navy-900); }
.botao-contorno-claro { background: transparent; color: var(--rapp-cream-50); border-color: var(--rapp-cream-50); --preenche: rgba(251, 249, 245, 0.16); }
.botao[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.botao[aria-disabled="true"]:hover { transform: none; }
.botao[aria-disabled="true"]::before { display: none; }
.botao-cheio { width: 100%; }
.icone { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ---- cabeçalho fixo, cream, com o menu na mesma linha do logo e do botão ---- */
.cabecalho {
  position: sticky; top: 0; z-index: 50; background: var(--rapp-cream-50); border-bottom: 1px solid var(--rapp-sand-300);
  transition: box-shadow var(--dur-hover) var(--ease-out-expo);
}
.cabecalho[data-rolado="true"] { box-shadow: 0 6px 20px rgba(29, 51, 80, 0.14); }
.cabecalho-interno {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: var(--header-h);
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--section-pad-x);
  transition: height var(--dur-hover) var(--ease-out-expo);
}
.cabecalho[data-rolado="true"] .cabecalho-interno { height: var(--header-h-rolado); }
.logo { display: inline-flex; justify-self: start; }
.logo { padding: 4px 0; }
/* Varredura D2: a 320 px só o símbolo aparece (cerca de 23 px de largura); a área de toque do link vai a 44×44 px
   sem esticar o desenho (o img mantém a altura e a largura automática). */
.logo { min-width: 44px; min-height: 44px; align-items: center; }
/* Logo sempre em vetor (SVG), sem bitmap: nitidez em qualquer tela; largura automática pela proporção. */
.logo img {
  height: 48px; width: auto; shape-rendering: geometricPrecision; image-rendering: auto;
  transition: height var(--dur-hover) var(--ease-out-expo);
}
.cabecalho[data-rolado="true"] .logo img { height: 40px; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500;
  color: var(--text-body); text-decoration: none;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--rapp-navy-700);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hover) var(--ease-out-expo);
}
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--text-heading); }
.menu a[aria-current="page"] { font-weight: 600; }
.cabecalho-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.cta-celular, .hamburguer { display: none; }

.hamburguer {
  width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer;
}
.hamburguer span { display: block; width: 24px; height: 2px; background: var(--rapp-navy-900); position: relative; }
.hamburguer span::before, .hamburguer span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: var(--rapp-navy-900);
}
.hamburguer span::before { top: -7px; }
.hamburguer span::after { top: 7px; }

@media (max-width: 960px) {
  .cabecalho-interno { grid-template-columns: 1fr auto; gap: 12px; }
  .menu, .cta-desktop { display: none; }
  .cta-celular { display: inline-flex; padding: 0 14px; font-size: 14px; }
  .hamburguer { display: inline-flex; }
  .logo img { height: 36px; }
  .cabecalho[data-rolado="true"] .logo img { height: 32px; }
}

/* ---- diálogos (menu do celular, modal de contato, painel de filtros, lightbox) ---- */
dialog { color: var(--text-body); padding: 0; border: 0; background: var(--rapp-cream-50); max-width: 100vw; max-height: 100dvh; }
dialog::backdrop { background: rgba(29, 51, 80, 0.72); }
dialog[open] { animation: aparecer 200ms var(--ease-out-expo); }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.modal { width: min(520px, calc(100vw - 32px)); border-radius: var(--radius-sharp); box-shadow: var(--shadow-modal); overflow: auto; }
.modal-corpo { padding: 28px; }
.modal-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.modal-topo h2 { font-size: 30px; }
.modal-fechar {
  width: 44px; height: 44px; margin: -8px -8px 0 0; background: transparent; border: 0; font-size: 30px; line-height: 1;
  color: var(--rapp-navy-900); cursor: pointer; border-radius: var(--radius-sharp);
}
.modal-apoio { margin-bottom: 16px; font-size: 15px; }

.menu-movel { margin: 0 0 0 auto; width: min(360px, 100vw); height: 100dvh; padding: 8px 24px 32px; }
.menu-movel-topo { display: flex; justify-content: flex-end; }
.menu-movel nav { display: flex; flex-direction: column; margin: 8px 0 24px; }
.menu-movel nav a {
  display: flex; align-items: center; min-height: 52px; font-family: var(--font-display); font-size: 26px; font-weight: 600;
  color: var(--text-heading); text-decoration: none; border-bottom: 1px solid var(--rapp-sand-300);
}
.menu-movel nav a[aria-current="page"] { color: var(--rapp-navy-700); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.painel-filtros { margin: 0 0 0 auto; width: min(400px, 100vw); height: 100dvh; padding: 24px; }
.painel-filtros h2 { font-size: 28px; margin-bottom: 16px; }
.painel-acoes { display: flex; gap: 12px; margin-top: 24px; }
.painel-acoes .botao { flex: 1; }

/* Lightbox em tela cheia: fundo navy-900, foto o maior possível, setas laterais sobre a foto, contador discreto. */
.lightbox { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; background: var(--rapp-navy-900); color: var(--rapp-cream-50); }
.lightbox::backdrop { background: var(--rapp-navy-900); }
.lightbox-corpo { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.lightbox-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 16px 8px 24px; }
.lightbox-topo p { font-size: 14px; letter-spacing: 0.08em; color: var(--text-on-dark-muted); font-variant-numeric: lining-nums tabular-nums; }
.lightbox .modal-fechar { color: var(--rapp-cream-50); margin: 0; }
.lightbox-palco { position: relative; min-height: 0; padding: 0 72px 24px; }
.lightbox-foto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; touch-action: pan-y; }
.lightbox-foto img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-foto .foto-falhou { width: auto; height: auto; padding: 24px; background: transparent; color: var(--text-on-dark); font-size: 16px; }
.galeria-foto .foto-falhou { cursor: zoom-in; }
.lightbox-seta {
  position: absolute; top: 50%; z-index: 1; width: 52px; height: 52px; margin-top: -38px; display: flex; align-items: center; justify-content: center;
  background: rgba(29, 51, 80, 0.72); color: var(--rapp-cream-50); border: 1px solid var(--border-on-dark-strong); border-radius: 50%;
  font-size: 30px; line-height: 1; cursor: pointer; transition: background-color var(--dur-hover) linear;
}
.lightbox-seta:hover { background: var(--rapp-navy-700); }
.lightbox-seta-anterior { left: 12px; }
.lightbox-seta-proxima { right: 12px; }
@media (max-width: 720px) {
  .lightbox-palco { padding: 0 0 16px; }
  .lightbox-seta { width: 44px; height: 44px; font-size: 26px; }
  .lightbox-seta-anterior { left: 6px; }
  .lightbox-seta-proxima { right: 6px; }
}

/* Janela do Termo de Privacidade: abre por cima do modal de contato, com rolagem só no texto. */
.termo { width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: var(--radius-sharp); box-shadow: var(--shadow-modal); overflow: hidden; }
.termo-corpo { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); padding: 24px 24px 16px; }
.termo-corpo .modal-topo h2 { font-size: 30px; }
.termo-apoio { margin-bottom: 16px; font-size: 13px; color: var(--text-body); }
.termo-texto { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 8px; font-size: 15px; line-height: 1.6; overscroll-behavior: contain; }
.termo-texto h3 { margin: 24px 0 8px; font-size: 22px; }
.termo-texto h3:first-child { margin-top: 0; }
.termo-texto p + p, .termo-texto ul + p { margin-top: 8px; }
.termo-texto ul { padding-left: 20px; list-style: disc; }
.termo-texto li + li { margin-top: 6px; }
.termo-acoes { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--rapp-sand-300); margin-top: 16px; }
.termo-acoes .botao { min-height: 44px; min-width: 120px; }
@media (max-width: 720px) { .termo-corpo { padding: 16px 16px 12px; } .termo-acoes .botao { width: 100%; } }

/* ---- campos ---- */
.campo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.campo label { font-size: 14px; font-weight: 600; color: var(--text-heading); }
.obrig { color: var(--text-heading); }
.campo input, .campo select, .campo textarea {
  min-height: 48px; padding: 10px 12px; background: var(--rapp-white); border: 1px solid var(--border-field);
  border-radius: var(--radius-sharp); font-size: 16px; color: var(--text-heading);
}
/* min-width: 0 — o input não impõe a largura própria (~20 caracteres) e cabe na coluna. */
.campo input { min-width: 0; width: 100%; }
.campo input:focus-visible, .campo select:focus-visible { outline: 2px solid var(--rapp-navy-700); outline-offset: 2px; }
.campo input[aria-invalid="true"] { border-color: var(--rapp-erro); }
.nota { font-size: 13px; color: var(--text-body); }
.erro-campo { margin: 0; padding-left: 10px; border-left: 3px solid var(--rapp-erro); font-size: 14px; line-height: 1.4; color: var(--rapp-erro); }
.nota-aceite { margin: 0 0 12px; font-size: 14px; color: var(--text-heading); }
.aviso-form { font-size: 13px; line-height: 1.5; margin: 4px 0 18px; }
.aceite { margin-bottom: 16px; }
.aceite-rotulo { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.aceite-rotulo input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--rapp-navy-700); }
.erro {
  margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--accent); font-size: 14px; line-height: 1.4;
  color: var(--text-heading); animation: aparecer 150ms var(--ease-out-expo);
}
.status { margin-top: 12px; font-size: 14px; color: var(--text-heading); }
/* Etapa 3b: resultado do envio (lead.js). Erro na cor de erro do site; o link do WhatsApp com área de toque de 44 px. */
.status[data-tipo] { padding-left: 10px; border-left: 3px solid var(--rapp-navy-700); }
.status[data-tipo="erro"] { border-left-color: var(--rapp-erro); color: var(--rapp-erro); }
.status a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--rapp-navy-700); text-decoration: underline; text-underline-offset: 3px; }
form[aria-busy="true"] button[type="submit"] { cursor: progress; }
/* O verificador anti-robô só aparece quando a Cloudflare pede interação; vazio, não ocupa espaço. */
.turnstile:empty { display: none; }
.acoes-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
/* Varredura S1: os controles do lead ficam num <fieldset disabled> até o lead.js iniciar; o fieldset não desenha nada. */
.form-campos { border: 0; margin: 0; padding: 0; min-width: 0; }
.aviso-sem-js { display: block; }

/* ---- hero com vídeo de fundo (R-22) ---- */
.hero { position: relative; overflow: hidden; background: var(--rapp-navy-900); color: var(--rapp-cream-50); isolation: isolate; }
.hero-midia { position: absolute; inset: 0; z-index: -2; transform-origin: 60% 40%; animation: kenburns 30s ease-in-out infinite alternate; will-change: transform; }
/* Refino de 27/10/2026: o poster fica no fundo do topo; no fim de cada ciclo o vídeo some em fade (data-fim, ui.js) e
   reaparece no início, sem corte seco nem quadro preto. A duração é --video-fade (e FADE_MS no ui.js). */
.hero-midia { background: var(--rapp-navy-900) url("/midia/imoveis-poster.jpg") center / cover no-repeat; }
#hero-video { transition: opacity var(--video-fade, 700ms) ease-in-out; }
#hero-video[data-fim] { opacity: 0; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-midia video { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(29, 51, 80, 0.85); }
.hero-interno { padding-top: 96px; padding-bottom: 120px; animation: aparecer 0.9s var(--ease-out-expo);
  transform: translate3d(0, calc(var(--parallax, 0) * 1px), 0); }
.hero h1 { color: var(--rapp-cream-50); font-size: var(--text-hero); max-width: 18ch; margin-bottom: 32px; text-wrap: balance; }
.hero h1 em { color: var(--rapp-orange-400); }
/* Linha objetiva logo abaixo do slogan (decisão 47, 27/10/2026): o que se faz no site e onde, sem promessa. Encosta no
   título (a margem negativa come parte do respiro do h1) para o topo da home crescer o mínimo. */
.hero-linha { margin: -18px 0 24px; max-width: 640px; font-size: 18px; line-height: 1.5; color: var(--rapp-cream-50); }
@media (max-width: 720px) { .hero-linha { margin: -20px 0 20px; font-size: 16px; } }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.busca { display: flex; gap: 10px; max-width: 640px; margin-bottom: 18px; }
.busca input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; background: var(--rapp-white); color: var(--text-heading);
  border: 1px solid var(--rapp-navy-700); border-radius: var(--radius-sharp);
}
.busca input::placeholder { color: var(--text-body); opacity: 1; }
.busca .botao { border-color: var(--rapp-cream-50); min-height: 52px; }
.atalhos { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-simples .hero-interno { padding-top: 56px; padding-bottom: 56px; }
.hero-simples h1 { max-width: none; font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 12px; }
.hero-simples p { max-width: 62ch; color: var(--text-on-dark-muted); }
/* Topo com vídeo (Anunciar e A Imobiliária, 26/10): texto em cream pleno, que passa de 7:1 sobre o véu navy de 85%
   mesmo no quadro mais claro (o cream esmaecido ficaria perto de 5:1). */
.hero:has(#hero-video) .hero-interno p { color: var(--rapp-cream-50); }
/* Os três topos com vídeo (home, Anunciar, A Imobiliária) têm a mesma medida em cada largura (26/10, Gabriel): uma
   altura única por faixa de largura (--hero-altura, a do maior conteúdo das três páginas), o mesmo espaçamento da
   home e o título no mesmo lugar: a etiqueta (eyebrow) das páginas internas fica no espaço de cima, fora do fluxo. */
/* Alturas medidas em 26/10 (maior conteúdo das três páginas em cada faixa, com folga): sem o parágrafo do topo da
   A Imobiliária, a home é a maior em todas as faixas. Se o texto de um desses topos mudar, conferir com o teste de
   medida do topo. */
/* Remedidas em 27/10/2026 com a linha objetiva da home (decisão 47): 1440: 577 · 1024: 533 · 390: 496 · 320: 544. */
:root { --hero-altura: 584px; --hero-topo: 96px; --hero-base: 120px; }
@media (max-width: 1080px) { :root { --hero-altura: 540px; } }
@media (max-width: 720px) { :root { --hero-altura: 500px; } }
@media (max-width: 389px) { :root { --hero-altura: 548px; } }
.hero:has(#hero-video) { min-height: var(--hero-altura); }
.hero:has(#hero-video) .hero-interno { position: relative; padding-top: var(--hero-topo); padding-bottom: var(--hero-base); }
.hero:has(#hero-video) .hero-interno > .eyebrow { position: absolute; top: calc(var(--hero-topo) - 36px); margin: 0; }
@media (max-width: 720px) { :root { --hero-topo: 48px; --hero-base: 96px; } }
@media (max-width: 720px) {
  .hero-interno { padding-top: 48px; padding-bottom: 96px; }
  .busca { flex-direction: column; }
  /* No celular os dois atalhos têm a mesma largura (alinhados à busca) e o mesmo peso: contorno claro. */
  .atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  .atalhos .botao { padding: 0 12px; }
  .atalhos .botao-claro { background: transparent; color: var(--rapp-cream-50); border-color: var(--rapp-cream-50); --preenche: rgba(251, 249, 245, 0.16); }
  /* Três entradas da A Imobiliária em duas colunas, como os atalhos da home (a terceira ocupa a linha toda): o topo
     fica mais baixo e cabe na altura única dos topos com vídeo. */
  .hero-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  .hero-acoes .botao { padding: 0 12px; }
  .hero-acoes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- controle segmentado ---- */
.segmentado { display: inline-flex; border: 1px solid var(--border-field); border-radius: var(--radius-sharp); overflow: hidden; max-width: 100%; overflow-x: auto; }
.segmentado button {
  min-height: 44px; padding: 0 16px; background: transparent; border: 0; font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--text-heading); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-out-expo);
}
.segmentado button:hover { background: var(--rapp-sand-100); }
.segmentado button[aria-pressed="true"] { background: var(--rapp-navy-700); color: var(--rapp-cream-50); }
.segmentado button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* Seletor da home: três colunas de largura fixa. A contagem que chega depois ("Todos (12)") não empurra as outras
   opções (F02), e a 320 px as três cabem sem recorte (S01). */
#segmentado-home { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 420px); overflow: visible; }
#segmentado-home:has(> button[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#segmentado-home button { padding: 0 8px; text-align: center; }
@media (max-width: 640px) { #segmentado-home { width: 100%; } }
@media (max-width: 360px) { #segmentado-home button { padding: 0 4px; font-size: 13px; } }

/* ---- cartões de imóvel e grade ---- */
.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; transition: opacity 150ms ease-out, transform 150ms ease-out; }
.grade[data-trocando="true"] { opacity: 0; transform: translateY(8px); }
@media (max-width: 1080px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grade .cartao-corpo { padding: 12px 12px 16px; }
  .grade .cartao-titulo { font-size: 19px; }
  .grade .cartao-preco { font-size: 21px; }
  .grade .cartao-meta, .grade .cartao-dados { font-size: 12px; }
  .grade .selo { left: 6px; bottom: 6px; font-size: 11px; padding: 2px 7px; }
}
/* Abaixo de ~560 px, um cartão por linha (S08, aprovado em 26/10): foto 4:3 maior, título e corpo legíveis. */
@media (max-width: 560px) { /* lista-uma-coluna */
  .grade { grid-template-columns: 1fr; gap: 16px; }
  .grade .cartao-corpo { padding: 16px 16px 20px; }
  .grade .cartao-titulo { font-size: 24px; }
  .grade .cartao-preco { font-size: 24px; }
  .grade .cartao-meta, .grade .cartao-dados { font-size: 14px; }
  .grade .selo { left: 10px; bottom: 10px; font-size: 12px; padding: 3px 9px; }
}

.cartao {
  position: relative; display: flex; flex-direction: column; background: var(--rapp-white); border: 1px solid var(--rapp-sand-300);
  border-radius: var(--radius-sharp); overflow: hidden;
  transition: translate var(--dur-hover) var(--ease-out-expo), border-color var(--dur-hover) var(--ease-out-expo), box-shadow var(--dur-hover) var(--ease-out-expo);
}
.cartao:hover, .cartao:focus-within { translate: 0 -4px; border-color: var(--rapp-navy-700); box-shadow: 0 16px 36px rgba(29, 51, 80, 0.16); }
/* Foco por teclado: o contorno abraça o cartão inteiro (o link do título cobre o cartão todo). */
.cartao:focus-within { outline: 2px solid var(--rapp-navy-700); outline-offset: 3px; }
.cartao:focus-within:not(:has(:focus-visible)) { outline: none; }
.cartao-titulo a:focus-visible { outline: none; }
.cartao-foto { position: relative; aspect-ratio: 4 / 3; background: var(--rapp-sand-100); overflow: hidden; }
.cartao-foto img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s linear, transform 0.8s var(--ease-out-expo); }
.cartao-foto img.carregada { opacity: 1; }
.cartao:hover .cartao-foto img, .cartao:focus-within .cartao-foto img { transform: scale(1.06); }
.sem-foto { display: flex; align-items: center; justify-content: center; height: 100%; padding: 12px; text-align: center; font-size: 13px; color: var(--text-body); background: var(--rapp-sand-100); }
.selo {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 3px 9px; background: var(--rapp-navy-700); color: var(--rapp-cream-50);
  font-size: 12px; font-weight: 600; border-radius: var(--radius-sharp); line-height: 1.5;
}
.cartao-corpo { display: flex; flex: 1 0 auto; flex-direction: column; gap: 8px; padding: 16px 16px 24px; }
.cartao-meta { font-size: 14px; color: var(--text-body); }
.cartao-titulo { font-size: 24px; }
.cartao-titulo { overflow-wrap: anywhere; }
.cartao-titulo a { color: inherit; text-decoration: none; }
.cartao-titulo a::after { content: ""; position: absolute; inset: 0; }
/* margin-top: auto — preço e dados ficam no pé do cartão, alinhados entre cartões de títulos com alturas diferentes. */
.cartao-preco { margin-top: auto; font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--rapp-navy-700); }
.cartao-preco small { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--text-body); }
.cartao-dados { font-size: 13px; color: var(--text-body); }

/* ---- vitrine de negócios fechados: cartões sem link, com a foto escolhida pelo Gian (ou o bloco neutro) ---- */
.vitrine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1080px) { .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 560px) { .vitrine { grid-template-columns: 1fr; } }
.vitrine li { display: flex; flex-direction: column; overflow: hidden; background: var(--rapp-cream-50); border: 1px solid var(--rapp-sand-300); border-radius: var(--radius-sharp); }
.vitrine .bloco-neutro { position: relative; aspect-ratio: 4 / 3; background: var(--rapp-sand-100); overflow: hidden; }
.vitrine .bloco-neutro img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Véu escuro na base da foto: o selo claro sobre azul passa de 4,5:1 em qualquer foto. */
.vitrine .bloco-neutro.com-foto::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, rgba(29, 51, 80, 0.78), rgba(29, 51, 80, 0));
}
.vitrine .selo { left: 12px; bottom: 12px; z-index: 2; }
.vitrine .corpo { padding: 16px; font-size: 14px; line-height: 1.5; }
.vitrine h3 { font-family: var(--font-body); font-size: 16px; font-weight: 600; }
/* Vitrine clicável (26/10): cartões em carrossel de 3 em 3 (o mesmo trilho de "Chegaram agora"); cada cartão é um
   botão que abre a janela do negócio fechado. */
.vitrine.carrossel-trilho { grid-template-columns: none; }
.vitrine .fechado-botao {
  display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; background: none; border: 0; border-radius: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.vitrine .bloco-neutro, .vitrine .corpo, .fechado-tipo, .fechado-cidade { display: block; }
.fechado-tipo { font-size: 16px; font-weight: 600; color: var(--text-heading); }
.vitrine li { transition: border-color var(--dur-hover) var(--ease-out-expo); }
.vitrine li:has(.fechado-botao:hover) { border-color: var(--rapp-navy-700); }
.fechado-botao:hover .fechado-tipo { text-decoration: underline; text-underline-offset: 3px; }
/* O li corta o que passa (overflow: hidden): o anel de foco fica por dentro do cartão. */
.fechado-botao:focus-visible { outline: 2px solid var(--rapp-navy-700); outline-offset: -3px; }
/* Janela do negócio fechado; a página por trás fica parada enquanto ela está aberta. */
html:has(dialog.janela-fechado[open]) { overflow: hidden; }
/* A janela cabe sempre na tela (26/10, capturas 19 e 20). Celular e tablet: uma coluna (topo, foto, texto, rodapé);
   a foto encolhe primeiro (altura entre 180 e 504 px, ajustada pelo cartoes.js) e só então o texto rola. Desktop a
   partir de 1180 px (27/10): duas colunas, foto grande à esquerda com os controles embaixo e texto à direita, com o
   botão fixo no rodapé da coluna. Topo, controles da foto e o botão ficam sempre à vista. */
.janela-fechado {
  --foto-alt: clamp(180px, calc(100dvh - 470px), 504px);
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 2rem); padding: 0; border-radius: var(--radius-sharp); box-shadow: var(--shadow-modal); overflow: hidden;
}
.janela-fechado[open] { display: flex; flex-direction: column; }
.janela-fechado-corpo {
  flex: 1 1 auto; min-height: 0; display: grid; gap: 16px; padding: 20px 24px 0;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "topo" "foto" "texto" "rodape";
}
.janela-fechado .modal-topo { grid-area: topo; align-items: center; margin-bottom: 0; }
.fechado-carrossel { grid-area: foto; min-width: 0; }
.fechado-texto { grid-area: texto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; }
.janela-fechado .lista-carac { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 24px; }
.janela-fechado .selo { position: static; }
.fechado-palco { position: relative; width: min(100%, calc(var(--foto-alt, 504px) * 4 / 3)); margin-inline: auto; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rapp-sand-100); border: 1px solid var(--rapp-sand-300); border-radius: var(--radius-sharp); touch-action: pan-y; }
.fechado-trilho { display: flex; height: 100%; transform: translateX(calc(var(--slide, 0) * -100%)); transition: transform 300ms var(--ease-out-expo); }
.fechado-palco .post-slide img { object-fit: cover; }
.post-slide .foto-falhou { height: 100%; }
.fechado-contador { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-heading); font-variant-numeric: lining-nums tabular-nums; }
.janela-fechado h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; }
.fechado-dados { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 600; color: var(--text-heading); }
.fechado-descricao { white-space: pre-line; }
/* Rodapé fixo, com uma linha fina acima. */
.fechado-contato { grid-area: rodape; margin: 0 -24px; padding: 14px 24px 20px; border-top: 1px solid var(--rapp-sand-300); background: var(--rapp-cream-50); }
@media (max-width: 560px) {
  .janela-fechado-corpo { gap: 12px; padding: 16px 16px 0; }
  .fechado-contato { margin: 0 -16px; padding: 12px 16px 16px; }
  .janela-fechado .post-controles .botao { padding: 0 12px; }
}
@media (min-width: 1180px) {
  /* Foto de até 600x450, limitada pela altura útil (janela menos respiros e controles). */
  .janela-fechado { --foto-alt: min(450px, calc(100dvh - 2rem - 132px)); width: min(1180px, 92vw); }
  .janela-fechado-corpo {
    column-gap: 48px; row-gap: 20px; padding: 32px 40px 0 32px;
    grid-template-columns: calc(var(--foto-alt) * 4 / 3) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "foto topo" "foto texto" "foto rodape";
  }
  .fechado-carrossel { align-self: start; padding-bottom: 32px; }
  .fechado-palco { width: 100%; }
  .janela-fechado h2 { font-size: clamp(28px, 2.2vw, 34px); }
  .fechado-texto { gap: 18px; }
  .fechado-contato { margin: 0; padding: 16px 0 32px; }
}
/* Lista vazia (decisão 47, 27/10/2026): sem imóvel na finalidade, a busca, os filtros e a ordem não têm o que buscar e
   saem da frente; ficam a finalidade (para trocar de lista), os chips do que foi pedido e o convite com o contato. */
[data-sem-imoveis] .busca-lista, [data-sem-imoveis] #abrir-filtros, [data-sem-imoveis] .barra-lista .campo:has(#f-ordem),
[data-sem-imoveis] #dica-ordem { display: none; }
[data-sem-imoveis] .barra-lista { margin-bottom: 12px; }
.aviso-convite { padding: 20px 24px; }
.convite-texto { flex: 1 1 32ch; min-width: 0; }
.convite-texto p + p { margin-top: 6px; }
.vazio-criterios { font-size: 14px; color: var(--text-heading); }
.vitrine-nota { margin-top: 16px; font-size: 13px; }
.titulo-vitrine { margin: 48px 0 16px; font-size: 28px; }
.vitrine-aviso { margin: -8px 0 16px; font-size: 14px; }
.aviso-vazio {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding: 14px 18px;
  background: var(--rapp-cream-50); border: 1px solid var(--rapp-sand-300); border-left: 3px solid var(--rapp-navy-700); border-radius: var(--radius-sharp);
  font-size: 15px; line-height: 1.5; color: var(--text-body);
}

/* ---- carrossel (home) ---- */
/* padding-block: o contorno de foco do cartão (3 px para fora) não é cortado pela rolagem do trilho. */
.carrossel-trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-block: 8px; margin-block: -8px; scroll-padding-inline: 0;
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho > * { scroll-snap-align: start; }
@media (max-width: 1080px) { .carrossel-trilho { grid-auto-columns: calc((100% - 24px) / 2); } }
.carrossel-controle { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; min-width: 0; }
.carrossel-pontos { display: flex; flex-wrap: wrap; min-width: 0; }
/* carrossel-celular */
/* No celular: o trilho vai de borda a borda (o próximo cartão aparece na beirada) e o encaixe respeita a margem
   lateral; no lugar dos pontos (um por cartão, largos demais), a contagem "1 de 12" com as setas. */
@media (max-width: 640px) {
  .carrossel-trilho {
    grid-auto-columns: 82%; gap: 16px; margin-inline: calc(-1 * var(--section-pad-x));
    padding-inline: var(--section-pad-x); scroll-padding-inline: var(--section-pad-x);
  }
  .carrossel-pontos { display: none; }
}
/* fim-carrossel-celular */
.carrossel-pontos button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; }
.carrossel-pontos button i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--rapp-navy-700); background: transparent; transition: background-color var(--dur-hover) linear; }
.carrossel-pontos button[aria-current="true"] i { background: var(--rapp-navy-700); }
.carrossel-contagem { font-size: 14px; margin-right: auto; }
.carrossel-seta { width: 44px; padding: 0; }
/* "Chegaram agora" com poucos imóveis (decisão 47, 27/10/2026): com 1 ou 2, os cartões ficam na largura natural (um
   terço da linha) ao lado do título e do "Ver todos", em vez de um cartão solto embaixo do título e um vão enorme ao
   lado. O home.js marca data-quantidade ("1", "2", "3" ou "muitos"), sem número nenhum na tela; com 3 ou mais vale o
   carrossel de sempre. Só no desktop: abaixo de 1081 px o trilho já mostra 2 ou 1 cartão por vez. */
@media (min-width: 1081px) {
  #chegaram-agora:has(.carrossel-trilho[data-quantidade="1"]) .container,
  #chegaram-agora:has(.carrossel-trilho[data-quantidade="2"]) .container {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 24px;
  }
  #chegaram-agora:has(.carrossel-trilho[data-quantidade="1"]) .cabeca-secao,
  #chegaram-agora:has(.carrossel-trilho[data-quantidade="2"]) .cabeca-secao { flex-direction: column; align-items: flex-start; gap: 24px; }
  #chegaram-agora:has(.carrossel-trilho[data-quantidade="1"]) .cabeca-secao,
  #chegaram-agora:has(.carrossel-trilho[data-quantidade="1"]) .secao-rodape,
  #chegaram-agora:has(.carrossel-trilho[data-quantidade="2"]) .cabeca-secao,
  #chegaram-agora:has(.carrossel-trilho[data-quantidade="2"]) .secao-rodape { grid-column: 1; }
  #chegaram-agora:has(.carrossel-trilho[data-quantidade="1"]) .secao-rodape,
  #chegaram-agora:has(.carrossel-trilho[data-quantidade="2"]) .secao-rodape { grid-row: 2; align-self: end; margin: 0; }
  .carrossel-trilho[data-quantidade="1"], .carrossel-trilho[data-quantidade="2"] {
    grid-row: 1 / span 2; grid-auto-columns: minmax(0, 1fr); overflow: visible;
  }
  .carrossel-trilho[data-quantidade="1"] { grid-column: 2; } /* logo ao lado do título; a terceira coluna fica livre */
  .carrossel-trilho[data-quantidade="2"] { grid-column: 2 / span 2; }
}

/* estado vazio da home: bloco mais presente */
.aviso-grande { padding: 28px 32px; font-size: 18px; margin-top: 8px; }
.aviso-grande p span:first-child { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--text-heading); display: block; }
/* Abas de Conteúdos com o mesmo formato nos três sites (27/10/2026): "em breve", "em preparação" e falha. */
.aviso-grande .aviso-titulo { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--text-heading); }
.aviso-grande .botoes { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) {
  .conteudos .aviso-grande, .post-pagina .aviso-grande { padding: 20px; }
  .post-pagina .aviso-grande .botoes, .post-pagina .aviso-grande .botao { width: 100%; }
}

/* ---- faixa de diferenciais da home (26/10): identidade da antiga faixa navy de números ----
   Fundo navy (secao-escura), valor grande em Cormorant claro e legenda pequena embaixo, centralizados, com os mesmos
   espaçamentos da faixa de números; agora com os 4 diferenciais aprovados, sem número de estoque. Estática no HTML:
   não desloca nada (CLS). Quatro lado a lado no desktop e 2x2 no celular; só informativa. */
.diferenciais-home { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1100px; margin-inline: auto; text-align: center; }
.diferenciais-home li { display: flex; flex-direction: column; align-items: center; }
.faixa-valor { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; line-height: 1; color: var(--rapp-cream-50); }
.faixa-legenda { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--text-on-dark-muted); }
@media (max-width: 720px) {
  .diferenciais-home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .faixa-valor { font-size: clamp(21px, 6.6vw, 30px); } /* "Transparência" inteira na coluna a partir de 320 px */
  .faixa-legenda { font-size: 12px; }
}

/* ---- cidades (home, só com imóveis disponíveis) ---- */
.cidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 721px) { .cidades { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1081px) { .cidades { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cidade {
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 88px; padding: 16px; background: var(--rapp-sand-100);
  border: 1px solid var(--rapp-sand-300); border-radius: var(--radius-sharp); text-decoration: none; color: var(--text-heading);
  transition: translate var(--dur-hover) var(--ease-out-expo), border-color var(--dur-hover) var(--ease-out-expo);
}
.cidade:hover { translate: 0 -4px; border-color: var(--rapp-navy-700); }
.cidade strong { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.2; overflow-wrap: break-word; }
@media (min-width: 721px) and (max-width: 1080px) { .cidade strong { font-size: clamp(20px, 2.6vw, 26px); } }
.cidade span { font-size: 14px; color: var(--text-body); }
@media (min-width: 721px) { .cidade { min-height: 136px; padding: 24px; } }
.cidades:empty { display: none; }
/* Celular: tamanho fluido e quebra só entre palavras, para "Itaquaquecetuba" caber inteira a partir de 320 px. */
@media (max-width: 720px) {
  .cidade { padding: 12px; }
  .cidade strong { font-size: clamp(15px, 4.8vw, 22px); }
  .cidade span { font-size: 13px; }
}

/* ---- faixa de chamada: tom navy-700 e divisor, para não emendar no rodapé navy-900 ---- */
.secao-chamada { background: var(--surface-dark-card); border-top: 1px solid var(--border-on-dark-strong); border-bottom: 1px solid var(--border-on-dark-strong); }
.chamada { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.chamada h2 { font-size: var(--text-h2); max-width: 28ch; }
.chamada p { max-width: 52ch; margin-top: 8px; color: var(--text-on-dark-muted); }

/* ---- listagem ---- */
/* Enquanto a lista não chega, o rodapé fica abaixo da dobra: sem isso ele aparece no celular (a barra ficou mais
   baixa com os filtros no painel) e salta quando os cartões entram (CLS). */
main[data-fin-padrao] > .secao { min-height: calc(100svh - var(--header-h)); }
.barra-lista { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 24px 0 16px; }
.barra-lista > .segmentado, .barra-lista > .botao { height: 44px; min-height: 44px; }
.barra-lista .campo label { font-weight: 500; font-size: 16px; line-height: 1; }
.barra-lista .campo { margin: 0; flex-direction: row; align-items: center; gap: 8px; }
/* Mesma fonte (16 px) em todos os controles da barra. */
.barra-lista .campo select, .barra-lista .botao, .barra-lista .segmentado button { min-height: 44px; font-size: 16px; }
.barra-lista .campo select { padding-block: 0; }
.busca-lista { display: flex; gap: 8px; flex: 1 1 100%; max-width: 640px; }
.busca-lista .campo { flex: 1; }
.busca-lista input { min-height: 44px; padding: 0 12px; background: var(--rapp-white); border: 1px solid var(--border-field); border-radius: var(--radius-sharp); font-size: 16px; color: var(--text-heading); }
.busca-lista input:focus-visible { outline: 2px solid var(--rapp-navy-700); outline-offset: 2px; }
.botao[aria-disabled="true"], .segmentado button[aria-disabled="true"], select:disabled { cursor: not-allowed; }
/* No celular cada controle ocupa a linha: segmentado, Filtros (tipo, cidade, quartos e vagas ficam no painel desde
   26/10) e Ordenar. */
@media (max-width: 640px) {
  .barra-lista > .segmentado { display: flex; width: 100%; }
  .barra-lista > .segmentado button { flex: 1; padding: 0 8px; }
  .barra-lista > .botao, .barra-lista > .campo { flex: 1 1 100%; min-width: 0; }
  .barra-lista > .campo:has(#f-ordem) select { flex: 1; width: auto; min-width: 0; }
}
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; background: var(--rapp-sand-100); border: 0; border-radius: var(--radius-sharp); font-size: 13px; color: var(--text-heading); cursor: pointer; }
/* Contador de resultados: sem número de estoque à vista (decisão do Gabriel, 26/10); continua anunciado ao leitor
   de tela, que precisa do retorno de cada filtro. */
.contador {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dica { font-size: 13px; }
.filtros-faixa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Grupos de múltipla escolha no painel (26/10): legenda com o nome e quantas opções a pessoa marcou; cada opção é
   um rótulo inteiro clicável de 44 px, em duas colunas. */
.grupo-filtro { min-width: 0; margin: 20px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--border-light); }
.grupo-filtro legend { display: flex; align-items: baseline; gap: 8px; padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.grupo-filtro legend + * { clear: both; }
.grupo-nome { font-weight: 600; font-size: 16px; color: var(--text-heading); }
.grupo-marcados { font-size: 14px; color: var(--text-body); }
.grupo-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.opcao { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; font-size: 16px; color: var(--text-heading); cursor: pointer; }
.opcao span { min-width: 0; overflow-wrap: anywhere; }
.opcao input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--rapp-navy-900); cursor: pointer; }
.opcao input:focus-visible { outline: 2px solid var(--rapp-navy-700); outline-offset: 2px; }

/* ---- detalhe do imóvel ---- */
.migalha { padding: 16px 0 8px; font-size: 14px; }
.migalha ol { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; min-width: 0; }
.migalha li { flex: none; }
/* Uma linha só, alinhada pela base do texto; o título longo termina em reticências (o h1 logo abaixo tem o nome todo). */
#migalha-titulo { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#mig-titulo { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* post (Conteúdos) */
#migalha-titulo:empty { display: none; }
.migalha li + li::before { content: "/"; margin-right: 6px; }
/* Reserva de altura enquanto o imóvel carrega: a página não salta quando a galeria e o título chegam (CLS). */
.esqueleto-detalhe { min-height: calc(100dvh - var(--header-h)); }
.esqueleto-detalhe .esqueleto-foto { aspect-ratio: auto; height: 448px; margin-bottom: 24px; }
.esqueleto-detalhe .esqueleto-linha { margin-bottom: 12px; }
.esqueleto-detalhe .esqueleto-linha:nth-child(2) { height: 40px; width: 60%; }
@media (max-width: 960px) { .esqueleto-detalhe .esqueleto-foto { height: 314px; } }
.galeria-wrap { position: relative; margin-bottom: 24px; }
.galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 8px; }
.galeria figure:nth-of-type(n+6) { display: none; } /* no desktop só as 5 primeiras; as demais ficam no lightbox */
.galeria-foto { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
/* Foco da foto (F01): o `figure` corta o que passa da borda, então o anel fica DENTRO do botão e por cima da foto,
   em duas cores — cream na borda e navy logo dentro — para aparecer em foto clara e em foto escura. */
.galeria-foto:focus-visible { outline: 3px solid var(--rapp-cream-50); outline-offset: -3px; }
.galeria-foto:focus-visible::after {
  content: ""; position: absolute; inset: 3px; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 3px var(--rapp-navy-900);
}
.galeria figure { overflow: hidden; background: var(--rapp-sand-100); }
.galeria figure:first-child { grid-row: span 2; }
.galeria img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s linear, transform 0.8s var(--ease-out-expo); }
.galeria img.carregada { opacity: 1; }
.galeria figure:hover img { transform: scale(1.05); }
.galeria-todas { position: absolute; right: 12px; bottom: 12px; z-index: 1; min-height: 44px; padding: 0 14px; background: var(--rapp-cream-50); border: 1px solid var(--rapp-navy-700); color: var(--text-heading); font-weight: 600; font-size: 14px; border-radius: var(--radius-sharp); cursor: pointer; }
.galeria-vazia { display: flex; align-items: center; justify-content: center; min-height: 220px; margin-bottom: 24px; padding: 24px; background: var(--rapp-sand-100); border: 1px solid var(--rapp-sand-300); text-align: center; }
.detalhe-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; padding-bottom: 72px; }
.detalhe-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.detalhe-topo .selo { position: static; }
.detalhe h1 { font-size: clamp(32px, 3.4vw, 46px); margin-bottom: 16px; }
.caixa { background: var(--rapp-white); border: 1px solid var(--rapp-sand-300); padding: 24px; margin-bottom: 24px; border-radius: var(--radius-sharp); }
.preco-grande { font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--rapp-navy-700); line-height: 1.15; }
.preco-detalhe { margin-top: 8px; font-size: 14px; }
/* Encargos do detalhe (decisão 47, 27/10/2026): um por linha, valores alinhados numa coluna, o ausente como "não
   informado". O rótulo é inline-block (e não flex) para o texto lido continuar "Condomínio R$ 700/mês" numa linha só. */
.encargos { margin-top: 12px; font-size: 14px; }
.encargos li { padding-block: 6px; border-top: 1px solid var(--rapp-sand-300); }
.encargos li:first-child { border-top: 0; padding-top: 0; }
.encargo-rotulo { display: inline-block; min-width: 112px; }
.encargo-valor { font-weight: 600; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.encargo-ausente .encargo-valor { font-weight: 400; color: var(--text-body); }
.preco-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rapp-sand-300); font-size: 15px; font-weight: 600; color: var(--text-heading); }
/* Colunas fixas: 3 (ou 2 quando são 2 ou 4 itens), nunca um item sozinho na última linha. */
.especificacoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.especificacoes[data-n="2"], .especificacoes[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.especificacoes[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.especificacoes div { background: var(--rapp-white); border: 1px solid var(--rapp-sand-300); padding: 16px; font-size: 14px; }
.especificacoes strong { display: block; color: var(--text-heading); font-size: 18px; }
@media (max-width: 400px) { .especificacoes div { padding: 12px; font-size: 13px; } }
.ancoras { position: sticky; top: var(--header-h-rolado); z-index: 5; display: flex; gap: 24px; padding: 6px 0; margin-bottom: 24px; background: var(--rapp-cream-50); border-top: 1px solid var(--rapp-sand-300); border-bottom: 1px solid var(--rapp-sand-300); }
.ancoras a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--text-body); text-decoration: none; border-bottom: 2px solid transparent; }
.ancoras a[aria-current="true"] { color: var(--text-heading); font-weight: 600; border-bottom-color: var(--rapp-navy-700); }
.bloco-detalhe { margin-bottom: 24px; }
.bloco-detalhe h2 { font-size: 30px; margin-bottom: 16px; }
.bloco-detalhe > .caixa { margin-bottom: 0; }
.bloco-detalhe .botao { margin-top: 16px; }
.nota-aba { font-size: 13px; color: var(--text-body); }
.descricao { white-space: pre-line; max-width: 70ch; }
.descricao[data-recolhida="true"] { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.lista-carac { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 24px; }
.lista-carac li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--accent); vertical-align: middle; }
.contato-card { position: sticky; top: calc(var(--header-h-rolado) + 16px); background: var(--rapp-white); border: 1px solid var(--rapp-sand-300); padding: 22px; border-radius: var(--radius-sharp); }
.contato-card h2 { font-size: 28px; margin-bottom: 14px; }
.contato-card .ou { margin: 14px 0 10px; font-size: 14px; text-align: center; }
.barra-fixa { display: none; }
@media (max-width: 960px) {
  .galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; }
  .galeria figure, .galeria figure:nth-of-type(n+6) { display: block; flex: 0 0 86%; height: 260px; scroll-snap-align: start; }
  .galeria-todas { position: static; width: 100%; margin-top: 10px; }
  .detalhe-grade { grid-template-columns: 1fr; gap: 24px; padding-bottom: 120px; }
  .contato-card { position: static; }
  /* Grade preço | WhatsApp | Dados: cada coluna pode encolher (min-width: 0), nada passa da borda nem em 320 px. */
  .barra-fixa {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 8px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--rapp-cream-50); border-top: 1px solid var(--rapp-sand-300);
    box-shadow: 0 -6px 20px rgba(29, 51, 80, 0.1);
    transition: transform var(--dur-hover) var(--ease-out-expo), visibility 0s linear 0s;
  }
  .barra-fixa > * { min-width: 0; }
  .barra-fixa .botao { width: 100%; padding: 0 12px; }
  .barra-fixa .preco-barra { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--rapp-navy-700); line-height: 1.15; white-space: nowrap; }
  /* Com o formulário de contato na tela, a barra sai (ela repetiria o que já está visível e cobriria o envio). */
  .barra-fixa[data-escondida="true"] { transform: translateY(110%); visibility: hidden; transition: transform var(--dur-hover) var(--ease-out-expo), visibility 0s linear var(--dur-hover); }
  .com-barra-fixa { --barra-h: 76px; }
  html:has(.com-barra-fixa) { --barra-h: 76px; }
  .com-barra-fixa .whatsapp-fixo { display: none; }
}
/* Abaixo de 400 px: WhatsApp só com o ícone (o nome continua para o leitor de tela) e o rótulo curto "Dados". */
@media (max-width: 399px) {
  /* WhatsApp só com o ícone (44 px) e "Tenho interesse" com o resto da linha; se faltar espaço, o rótulo quebra em
     duas linhas dentro do botão, sem cortar. */
  .barra-fixa { gap: 6px; padding-inline: 12px; grid-template-columns: auto 44px 1fr; }
  .barra-fixa .preco-barra { font-size: 18px; }
  .barra-fixa .rotulo-whats { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra-fixa .botao { padding: 0 8px; }
  #barra-interesse { padding: 4px 8px; font-size: 14px; line-height: 1.15; white-space: normal; text-align: center; }
}

.titulo-erro { margin: 24px 0 16px; font-size: clamp(32px, 3.4vw, 46px); }

/* ---- página "já foi alugado/vendido" ---- */
.situacao { padding: 56px 0 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.situacao h1 { font-size: clamp(36px, 4.4vw, 56px); }
.situacao .selo-grande {
  padding: 4px 12px; border: 1px solid var(--rapp-navy-700); border-radius: var(--radius-sharp); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-heading);
}
.situacao-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.parecidos { border-top: 1px solid var(--rapp-sand-300); padding: 32px 0 72px; }
.parecidos h2 { font-size: 30px; margin-bottom: 20px; }
@media (max-width: 640px) {
  .situacao-botoes .botao { width: 100%; }
  .parecidos .grade { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; grid-template-columns: none; }
  .parecidos .grade > * { scroll-snap-align: start; }
}

/* ---- páginas institucionais ---- */
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.tres-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 960px) { .duas-colunas, .tres-colunas { grid-template-columns: 1fr; gap: 24px; } }
.duas-colunas .passo + .passo { margin-top: 20px; }
.passo { background: var(--rapp-white); border: 1px solid var(--rapp-sand-300); padding: 22px; border-radius: var(--radius-sharp); }
.passo .numero-passo { display: inline-block; margin-bottom: 8px; font-family: var(--font-display); font-size: 36px; font-weight: 600; color: var(--rapp-navy-700); line-height: 1; border-bottom: 2px solid var(--accent); padding-bottom: 4px; }
.passo h3 { font-size: 24px; margin-bottom: 6px; }
.beneficio { padding: 18px 0; border-top: 1px solid var(--rapp-sand-300); }
.beneficio h3 { font-size: 24px; margin-bottom: 4px; }
.consultor { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 48px; align-items: center; }
.consultor-nome { font-size: clamp(32px, 3.4vw, 44px); margin-bottom: 8px; }
.consultor-cargo { margin-bottom: 24px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-heading); }
.consultor-lista { display: flex; flex-direction: column; gap: 16px; max-width: 52ch; margin-bottom: 32px; }
.caixa-form .consultor-lista { margin: 16px 0 8px; }
.consultor-lista li { padding-left: 20px; position: relative; font-size: 17px; }
.consultor-lista li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 2px; background: var(--accent); }
/* Abertura da A Imobiliária: frase de destaque larga à esquerda, atalhos à direita (a seção não fica rala). */
.abertura { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.abertura-destaque { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; line-height: 1.3; color: var(--text-heading); }
.abertura-acoes { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (max-width: 960px) { .abertura { grid-template-columns: 1fr; gap: 24px; } }
/* Faixa navy com o formulário em cartão branco: texto escuro e foco navy dentro do cartão. */
.secao-escura .caixa-form { color: var(--text-body); }
.secao-escura .caixa-form h2 { color: var(--text-heading); }
.secao-escura .caixa-form :focus-visible { outline-color: var(--rapp-navy-700); }
.secao-escura .texto-corrido p { color: var(--text-on-dark-muted); }
.retrato img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sharp); background: var(--rapp-navy-900); }
.retrato figcaption { margin-top: 10px; font-size: 14px; color: var(--text-body); }
.espaco-reservado {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 160px; padding: 16px; text-align: center;
  background: var(--rapp-sand-100); border: 1px dashed var(--border-field); font-size: 13px; color: var(--text-body);
}
/* Perfil do corretor (S02): até 960 px em coluna única, com o retrato limitado em altura (em 768 px o texto não fica
   espremido ao lado da foto). */
@media (max-width: 960px) {
  .consultor { grid-template-columns: 1fr; gap: 24px; }
  .retrato img { width: auto; max-width: 100%; max-height: 360px; }
}
@media (max-width: 640px) {
  .consultor { grid-template-columns: 1fr; }
  .retrato img { width: auto; max-width: 100%; max-height: 320px; }
}
.texto-corrido { max-width: 68ch; }
.texto-corrido p + p { margin-top: 14px; }
.caixa-form { background: var(--rapp-white); border: 1px solid var(--rapp-sand-300); padding: 28px; border-radius: var(--radius-sharp); }
.caixa-form h2 { font-size: 30px; margin-bottom: 12px; }
.caixa-form p:has(> .botao) { margin: 16px 0 8px; }
.caixa-form { align-self: start; }
.caixa-form .ou { margin: 16px 0 12px; }
.pagina-simples { padding-block: 72px; min-height: 50vh; }
.pagina-simples h1 { font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 16px; }
.pagina-simples p { max-width: 60ch; margin-bottom: 24px; }
.pagina-simples .botoes { display: flex; flex-wrap: wrap; gap: 12px; }
/* ---- A Imobiliária (auditoria externa, 26/10): perfis, processo, benefícios, regiões e perguntas ---- */
.texto-grande { font-size: 17px; }
.secao-apoio { max-width: 62ch; margin-bottom: 24px; }
.secao-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.secao-cta p { font-weight: 600; color: var(--text-heading); }
.secao-escura .secao-cta p { color: var(--text-on-dark); }
.perfis { margin-top: 24px; }
.perfil {
  display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--rapp-white);
  border: 1px solid var(--rapp-sand-300); border-radius: var(--radius-sharp);
}
.perfil h3 { font-size: 26px; }
.perfil dl { display: flex; flex-direction: column; gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--rapp-sand-300); }
.perfil dt { margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-heading); }
.perfil dd { margin: 0; font-size: 15px; }
/* margin-top: auto — o botão fica no pé do cartão, alinhado entre os três perfis. */
.perfil .botao { margin-top: auto; align-self: flex-start; }
/* Processo em 4 passos: uma coluna no celular, duas no tablet, quatro no desktop. */
.processo { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
@media (min-width: 641px) { .processo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1081px) { .processo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.nota-processo { max-width: 70ch; margin-top: 24px; font-size: 15px; }
.beneficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 16px; }
.secao-escura .beneficio { border-top-color: var(--border-on-dark-strong); }
.secao-escura .beneficio p { color: var(--text-on-dark-muted); }
/* Link do Instagram com alvo de toque de 44 px sem esticar a linha. */
/* Cartões de corretores da A Imobiliária: com um só, foto e texto lado a lado (layout do .consultor); com dois ou
   três, a grade vira colunas de cartões verticais. Abaixo de 961 px, sempre um embaixo do outro. */
.equipe { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 8px; }
.corretor { padding: 24px; background: var(--rapp-white); border: 1px solid var(--rapp-sand-300); border-radius: var(--radius-sharp); }
/* Um corretor só: sem moldura, como o perfil em destaque (a grade não parece um cartão solto num espaço vazio). */
.equipe > .corretor:only-child { padding: 0; background: none; border: 0; }
/* Sem título visível acima (26/10): o cartão começa no respiro da seção, como os blocos vizinhos. */
.sr-only + .equipe { margin-top: 0; }
/* Botão da chamada final da A Imobiliária, logo abaixo do texto (26/10). */
.corretor .consultor-cargo { margin-bottom: 0; }
.corretor .texto-corrido { margin-top: 16px; }
@media (min-width: 961px) {
  .equipe:has(> .corretor + .corretor) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .equipe:has(> .corretor + .corretor) .corretor { grid-template-columns: 1fr; gap: 16px; align-items: start; }
}
.pagina-simples p a:not(.botao) {
  display: inline-block; min-height: 44px; padding-block: 12px; margin-block: -12px; line-height: 20px;
}
.regioes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.regioes li {
  display: flex; align-items: center; min-height: 64px; padding: 12px 16px; background: var(--rapp-white);
  border: 1px solid var(--rapp-sand-300); border-left: 3px solid var(--accent); border-radius: var(--radius-sharp);
  font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--text-heading); overflow-wrap: anywhere;
}
@media (min-width: 721px) { .regioes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1081px) { .regioes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* No celular o nome mais longo (Itaquaquecetuba) cabe inteiro na coluna de 360 px, sem quebra no meio da palavra. */
@media (max-width: 720px) { .regioes { gap: 10px; } .regioes li { font-size: 18px; padding: 10px 10px 10px 12px; } }
@media (max-width: 359px) { .regioes li { font-size: 16px; } }
.faq { max-width: 880px; margin-top: 16px; border-top: 1px solid var(--rapp-sand-300); }
.faq details { border-bottom: 1px solid var(--rapp-sand-300); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0;
  font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--text-heading);
  list-style: none; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
/* Sinal "+" que gira para "×" ao abrir; com movimento reduzido a troca é imediata (regra geral abaixo). */
.faq summary::after {
  content: "+"; flex: none; font-family: var(--font-body); font-size: 26px; font-weight: 400; line-height: 1; color: var(--rapp-navy-700);
  transition: transform var(--dur-hover) var(--ease-out-expo);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--rapp-navy-700); }
.faq details p { max-width: 70ch; padding: 0 0 20px; }
@media (max-width: 960px) { .beneficios { grid-template-columns: 1fr; } }
/* A Imobiliária no celular (S01): o mesmo conteúdo em menos telas — seções e cartões mais compactos, número do passo
   ao lado do título, cidades e perguntas com alvo de 44+ px sem altura sobrando. */
@media (max-width: 720px) {
  .institucional .secao { padding-block: 40px; }
  .institucional .titulo-secao { margin-bottom: 4px; }
  .institucional .texto-grande { font-size: 16px; }
  .institucional .hero-simples .hero-interno { padding-top: 40px; padding-bottom: 40px; }
  .institucional .hero-acoes { margin-top: 20px; }
  .institucional .consultor { gap: 24px; }
  .institucional .consultor-cargo, .institucional   .institucional .consultor-lista { gap: 10px; margin-bottom: 20px; }
  .institucional .consultor-lista li { font-size: 16px; }
  .institucional .tres-colunas { gap: 16px; }
  .perfil { gap: 12px; padding: 18px; }
  .perfil h3 { font-size: 24px; }
  .perfil dl { gap: 8px; padding-top: 12px; }
  .perfil dd { font-size: 14px; }
  .processo { gap: 12px; }
  .processo .passo { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 16px; }
  .processo .numero-passo { grid-row: span 2; align-self: start; margin: 0; font-size: 30px; }
  .processo .passo h3 { font-size: 21px; margin-bottom: 4px; }
  .processo .passo p { font-size: 15px; }
  .nota-processo { margin-top: 16px; font-size: 14px; }
  .institucional .secao-cta { margin-top: 20px; }
  .institucional .beneficio { padding: 12px 0; }
  .institucional .beneficio h3 { font-size: 21px; }
  .regioes li { min-height: 48px; }
  .faq summary { min-height: 48px; padding: 8px 0; }
}
@media (max-width: 720px) { .faq summary { font-size: 20px; } }

/* ---- Conteúdos: lista (CNT-IMO-lista) e página do post (CNT-IMO-post), provisórias até a Etapa 5a ---- */
.conteudos, .post-pagina { padding-block: 40px 72px; }
/* Os estados (lista, "em breve", post, "em preparação", falha) só entram depois da leitura da view: com a área
   ocupando a tela, o rodapé fica abaixo da dobra e não salta quando um deles aparece (CLS). */
.conteudos, .post-pagina { min-height: calc(100svh - var(--header-h)); }
.conteudos-topo h1, .post-titulo { font-size: clamp(34px, 3.6vw, 48px); font-weight: 500; line-height: 1.08; }
.conteudos-topo h1::after, .post-titulo::after { content: ""; display: block; width: 44px; height: 1px; margin-top: 10px; background: var(--accent); }
.conteudos-topo p { margin: 12px 0 24px; font-size: 15px; }
.filtro-rotulo { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-body); }
.filtros-conteudo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filtro-botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; background: transparent;
  border: 1px solid var(--border-field); border-radius: var(--radius-sharp); font-size: 14px; font-weight: 600; color: var(--rapp-navy-700);
  cursor: pointer; transition: background-color var(--dur-hover) var(--ease-out-expo), color var(--dur-hover) var(--ease-out-expo);
}
.filtros-tema .filtro-botao { border-color: rgba(37, 64, 97, 0.35); font-size: 13px; }
.filtro-botao:hover { background: var(--rapp-sand-100); }
.filtro-botao[aria-pressed="true"] { background: var(--rapp-navy-700); border-color: var(--rapp-navy-700); color: var(--rapp-cream-50); }
.contador-posts { margin: 4px 0 16px; font-size: 14px; }
.contador-posts:empty { display: none; }
.grade-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; transition: opacity 200ms linear; }
.grade-posts[data-trocando="true"] { opacity: 0; transition: none; }
@media (max-width: 1080px) { .grade-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-cartao {
  position: relative; display: flex; flex-direction: column; background: var(--rapp-white); border: 1px solid var(--rapp-sand-300);
  border-radius: var(--radius-sharp); overflow: hidden;
  transition: translate var(--dur-hover) var(--ease-out-expo), border-color var(--dur-hover) var(--ease-out-expo);
}
.post-cartao:hover, .post-cartao:focus-within { translate: 0 -2px; border-color: var(--rapp-navy-700); }
.post-cartao:focus-within { outline: 2px solid var(--rapp-navy-700); outline-offset: 3px; }
.post-cartao-titulo a:focus-visible { outline: none; }
.post-cartao-capa { aspect-ratio: 4 / 5; background: var(--rapp-sand-100); border-bottom: 1px solid var(--rapp-sand-300); }
.post-cartao-capa img { width: 100%; height: 100%; object-fit: cover; }
/* Faixa da home: capa horizontal (16:9), como no exemplo; a lista de Conteúdos e o post seguem com o 4:5. No celular
   o cartão é em linha, com a capa estreita (regra do fim deste bloco). */
@media (min-width: 641px) {
  #destaque-posts .post-cartao-capa { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
  #destaque-posts .post-cartao-capa img { position: absolute; inset: 0; object-position: center 28%; }
}
/* Capa ou cartão que não carregou (D03): o aviso ocupa o mesmo espaço 4:5, sem salto. */
.post-cartao-capa .foto-falhou, .post-slide .foto-falhou { aspect-ratio: 4 / 5; height: auto; min-height: 100%; }
.post-cartao-corpo { display: flex; flex: 1 0 auto; flex-direction: column; gap: 8px; padding: 16px 16px 20px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.selo-categoria {
  padding: 2px 8px; border: 1px solid var(--rapp-navy-700); border-radius: var(--radius-sharp); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--rapp-navy-700);
}
.post-tema { font-size: 13px; color: var(--text-body); }
.post-cartao-titulo { font-size: 24px; line-height: 1.15; }
.post-cartao-titulo a { color: inherit; text-decoration: none; }
.post-cartao-titulo a::after { content: ""; position: absolute; inset: 0; } /* o card inteiro abre o post */
.post-data { margin-top: auto; font-size: 13px; color: var(--text-body); }
.posts-vazio { margin-top: 8px; }
.carregar-mais-linha { margin: 24px 0 0; text-align: center; }
.carregar-mais-linha:has(> [hidden]) { display: none; }
/* Celular: categorias em grade de 2 colunas, temas deslizando numa linha e cards horizontais (capa à esquerda,
   sem o resumo), como no quadro mobile. */
@media (max-width: 640px) {
  .filtros-categoria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros-categoria .filtro-botao { padding: 0 8px; text-align: center; }
  .filtros-tema { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--section-pad-x)); padding-right: var(--section-pad-x); }
  .filtros-tema .filtro-botao { flex: none; }
  .grade-posts { grid-template-columns: 1fr; gap: 12px; }
  .post-cartao { flex-direction: row; }
  .post-cartao-capa { flex: none; width: 96px; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--rapp-sand-300); }
  .post-cartao-capa img { aspect-ratio: 4 / 5; height: auto; }
  /* flex 1 1 + min-width 0: o corpo encolhe ao lado da capa e o título quebra linha (sem ser cortado). */
  .post-cartao-corpo { flex: 1 1 auto; padding: 12px 14px; gap: 6px; min-width: 0; }
  .post-cartao-titulo { font-size: 20px; overflow-wrap: break-word; }
  .carregar-mais-linha .botao { width: 100%; }
}

/* Página do post: carrossel grande (4:5 reservado, sem salto) ao lado da legenda em texto. */
.post-pagina .migalha { padding-top: 0; margin-bottom: 16px; }
.post-pagina .post-meta { margin-bottom: 12px; }
.post-linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 16px 0 24px; font-size: 14px; color: var(--text-body); }
.post-instagram { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 13px; color: var(--text-body); text-underline-offset: 3px; }
.post-corpo-grade { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 960px) { .post-corpo-grade { grid-template-columns: 1fr; gap: 28px; } .post-carrossel { max-width: 520px; } }
.post-palco { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rapp-sand-100); border: 1px solid var(--rapp-sand-300); border-radius: var(--radius-sharp); touch-action: pan-y; }
.post-trilho { display: flex; height: 100%; transform: translateX(calc(var(--slide, 0) * -100%)); transition: transform 300ms var(--ease-out-expo); }
.post-slide { flex: 0 0 100%; height: 100%; }
.post-slide img { width: 100%; height: 100%; object-fit: cover; }
.post-controles { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.post-contador { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-heading); font-variant-numeric: lining-nums tabular-nums; }
.post-legenda h2 { margin-bottom: 12px; font-size: 26px; }
.post-legenda p { line-height: 1.7; }
.post-legenda p + p { margin-top: 14px; }
.post-outros { margin-top: 48px; }
.post-outros h2 { margin-bottom: 16px; font-size: 28px; }
.post-outros-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .post-outros-grade { grid-template-columns: 1fr; } }
.post-outro { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; background: var(--rapp-white); border: 1px solid var(--rapp-sand-300); border-radius: var(--radius-sharp); }
.post-outro h3 { font-size: 20px; }
.post-outro h3 a { color: inherit; text-decoration: none; }
.post-outro h3 a::after { content: ""; position: absolute; inset: 0; }
.post-aviso { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rapp-sand-300); font-size: 14px; }
.post-aviso p + p { margin-top: 4px; }
.post-whatsapp {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; background: none; border: 0; font-size: 14px;
  color: var(--rapp-navy-700); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.post-whatsapp .icone { width: 16px; height: 16px; }

/* Anunciar no desktop: o cartão "Prefere falar agora?" acompanha o formulário ao rolar. */
@media (min-width: 961px) { .caixa-form.acompanha { position: sticky; top: calc(var(--header-h-rolado) + 24px); } }

/* ---- WhatsApp fixo ---- */
.whatsapp-fixo {
  position: fixed; right: 16px; bottom: 16px; z-index: 45; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: var(--rapp-navy-700); color: var(--rapp-cream-50); border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 4px 16px rgba(29, 51, 80, 0.3); opacity: 0; transform: translateY(12px); pointer-events: none;
  /* Invisível = fora do foco também (visibility), não um botão focável transparente. */
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo), background-color var(--dur-hover) linear, visibility 0s linear 0.6s;
}
.whatsapp-fixo[data-visivel="true"] { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.whatsapp-fixo:hover { background: var(--rapp-navy-900); }
/* O botão sai da frente sobre o rodapé e sobre um formulário de contato (não cobre texto nem o botão de envio). */
.whatsapp-fixo[data-sobre-rodape="true"], .whatsapp-fixo[data-sobre-form="true"] {
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; transition-delay: 0s, 0s, 0s, 0.6s;
}
.whatsapp-fixo .icone { width: 26px; height: 26px; }
/* Abaixo de 960 px o cabeçalho já tem o botão WhatsApp sempre à vista: o flutuante não existe (decisão do Gabriel,
   26/10/2026), nem visível nem no foco. */
@media (max-width: 960px) { .whatsapp-fixo { display: none; } }

/* ---- rodapé ---- */
.rodape { background: var(--rapp-navy-900); color: var(--text-on-dark-muted); padding: 56px 0 96px; } /* folga: o botão flutuante não cobre o texto */
@media (max-width: 960px) { .com-barra-fixa .rodape { padding-bottom: 112px; } }
/* Home sem imóveis: a seção de cidades some e a faixa navy de diferenciais encosta no rodapé navy; um filete
   separa os dois (26/10). */
main:has(> #cidades[hidden]) + .rodape { border-top: 1px solid var(--border-on-dark-strong); } /* e a barra fixa do detalhe também não */
.rodape a { color: var(--rapp-cream-50); }
/* Rodapé (26/10): marca, Serviços, Quem somos e Contato e Conteúdo; 4 colunas no desktop, 2x2 no tablet, 1 no celular. */
.rodape-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 32px; }
/* Letras menores no rodapé (26/10): 13 px nos links e na frase, 12 px na faixa de cidades e no ©; o alvo de 44 px
   no celular vem da altura mínima, não do tamanho da letra. */
.rodape-grupo a, .rodape-whatsapp, .rodape-marca p { font-size: 13px; }
.rodape-marca p { max-width: 32ch; line-height: 1.6; }
/* Identificação da imobiliária (decisão 46, varredura D4): legível, em cream pleno, logo abaixo da descrição. */
.rodape-marca .rodape-registro { margin-top: 8px; color: var(--rapp-cream-50); font-weight: 600; letter-spacing: 0.02em; }
.rodape-whatsapp {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 1px no-repeat;
  border: 0; color: var(--rapp-cream-50); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background-size 0.35s var(--ease-out-expo);
}
.rodape-whatsapp:hover, .rodape-whatsapp:focus-visible { background-size: 100% 1px; }
.rodape-whatsapp .icone { width: 18px; height: 18px; }
.rodape-cidades { padding-block: 16px; border-top: 1px solid rgba(251, 249, 245, 0.18); font-size: 12px; line-height: 1.7; }
.rodape img { height: 56px; width: auto; margin-bottom: 16px; shape-rendering: geometricPrecision; }
.rodape h2 { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rapp-peach-300); margin-bottom: 12px; }
.rodape ul { display: flex; flex-direction: column; }
/* Rodada 2 (27/10/2026): a linha de texto do rodapé (horário) com o mesmo estilo e o mesmo espaço dos links. */
.rodape-grupo li { font-size: 13px; color: var(--rapp-cream-50); }
.rodape-grupo li:not(:has(a, button)) { display: flex; align-items: center; min-height: 36px; }
.rodape li a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.rodape li a, .migalha a {
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease-out-expo);
}
.rodape li a:hover, .migalha a:hover, .rodape li a:focus-visible { background-size: 100% 1px; }
.texto-corrido a, .nota a, .aviso-form a, .modal-apoio a, .rodape-fim a, .rodape-grade p a {
  text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness 0.2s linear, text-underline-offset 0.2s linear;
}
.texto-corrido a:hover, .nota a:hover, .aviso-form a:hover, .modal-apoio a:hover, .rodape-fim a:hover, .rodape-grade p a:hover {
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.rodape-fim { border-top: 1px solid rgba(251, 249, 245, 0.18); padding-top: 20px; font-size: 12px; }
@media (max-width: 960px) { .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }
@media (max-width: 560px) { .rodape-grade { grid-template-columns: 1fr; gap: 24px; } }

/* ---- revelar ao rolar (IntersectionObserver); sem JS ou com movimento reduzido tudo aparece ---- */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo); transition-delay: calc(var(--ordem, 0) * 90ms); }
.revelar.visivel { opacity: 1; transform: none; }
/* O título de "Chegaram agora" fica parado: com 1 ou 2 imóveis ele troca de coluna quando os cartões chegam, e a entrada
   (opacidade + deslocamento) ao mesmo tempo era contada como salto de layout (CLS > 0,1, decisão 47). */
#chegaram-agora .cabeca-secao.revelar { opacity: 1; transform: none; transition: none; }
/* A elevação do hover usa a propriedade `translate` (separada de `transform`, que é da revelação): as duas convivem. */
.cartao.revelar, .cidade.revelar {
  transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo),
    translate var(--dur-hover) var(--ease-out-expo), border-color var(--dur-hover) var(--ease-out-expo), box-shadow var(--dur-hover) var(--ease-out-expo);
  transition-delay: calc(var(--ordem, 0) * 90ms), calc(var(--ordem, 0) * 90ms), 0s, 0s, 0s;
}
.vitrine li.revelar { transform: translateY(8px); }

#carregando:has(+ .esqueleto), [data-carregando]:has(+ .esqueleto), [data-carregando]:has(+ .carrossel-trilho > .esqueleto) {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.erro-carga { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

/* ---- esqueleto de carregamento das listas (mesma proporção dos cartões, sem salto de layout) ---- */
.esqueleto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1080px) { .esqueleto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .esqueleto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 560px) { .esqueleto { grid-template-columns: 1fr; gap: 16px; } } /* como a lista (S08) */
/* Esqueleto dentro do carrossel da home (F02): uma fileira com as mesmas colunas do trilho, sem quebrar linha. Antes de
   o JS montá-lo (e enquanto a página não fica pronta), o trilho vazio já reserva a altura de um cartão. */
.carrossel-trilho:has(> .esqueleto) { display: block; overflow: hidden; }
.carrossel-trilho > .esqueleto { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; }
.carrossel-trilho .esqueleto-corpo { min-height: 190px; }
body:not([data-pronto]) .carrossel-trilho:empty { min-height: 420px; }
@media (max-width: 1080px) { .carrossel-trilho > .esqueleto { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .carrossel-trilho > .esqueleto { grid-auto-columns: 82%; gap: 16px; } }
.esqueleto-cartao { background: var(--rapp-white); border: 1px solid var(--rapp-sand-300); border-radius: var(--radius-sharp); overflow: hidden; }
.esqueleto-foto, .esqueleto-linha {
  background: linear-gradient(100deg, var(--rapp-sand-100) 30%, var(--rapp-cream-50) 50%, var(--rapp-sand-100) 70%) 0 0 / 200% 100%;
  animation: brilho 1.4s linear infinite;
}
.esqueleto-foto { aspect-ratio: 4 / 3; }
.esqueleto-corpo { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.esqueleto-linha { height: 14px; width: 70%; }
.esqueleto-linha:nth-child(2) { width: 90%; height: 20px; }
.esqueleto-linha:nth-child(3) { width: 45%; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- transição de página com fade curto (navegadores que suportam; os demais navegam normal) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }

/* ---- botão do vídeo do topo (varredura D1, WCAG 2.2.2): discreto, no canto de baixo, alvo de 44 px ---- */
.video-pausa {
  position: absolute; right: 16px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid rgba(251, 249, 245, 0.55); border-radius: 50%;
  background: rgba(29, 51, 80, 0.45); color: var(--rapp-cream-50); cursor: pointer;
  transition: background-color var(--dur-hover) linear, border-color var(--dur-hover) linear;
}
.video-pausa:hover { background: rgba(29, 51, 80, 0.75); border-color: var(--rapp-cream-50); }
.video-pausa:focus-visible { outline: 2px solid var(--rapp-cream-50); outline-offset: 3px; }
.video-pausa-icone { position: relative; display: block; width: 14px; height: 14px; }
/* Tocando: duas barras (pausar). Parado: triângulo (reproduzir). Desenhado no CSS, sem imagem. */
.video-pausa-icone::before, .video-pausa-icone::after {
  content: ""; position: absolute; top: 0; width: 4px; height: 14px; background: currentColor;
}
.video-pausa-icone::before { left: 2px; }
.video-pausa-icone::after { right: 2px; }
.video-pausa[data-estado="pausado"] .video-pausa-icone::before {
  left: 3px; width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent currentColor;
}
.video-pausa[data-estado="pausado"] .video-pausa-icone::after { display: none; }
@media (forced-colors: active) { .video-pausa { border-color: ButtonText; } }
/* No celular, mais perto da borda: não encosta no link do topo. */
@media (max-width: 720px) { .video-pausa { right: 12px; bottom: 8px; } }

/* ---- diferenciais (rodada 2, item 14, 27/10/2026): sobre o navy, cartões discretos com ícone de linha, valor e frase,
   filete laranja no topo; hover sobe 3 px com borda laranja. Mesma linguagem nas três marcas. ---- */
.dif-icone { display: block; width: 32px; height: 32px; flex: none; color: var(--rapp-peach-300); }
.diferenciais-home li.diferencial { position: relative; gap: 10px; padding: 28px 16px 8px; }
.diferenciais-home li.diferencial::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 32px; height: 2px; margin-left: -16px; background: var(--accent);
  transition: width var(--dur-hover) var(--ease-out-expo), margin-left var(--dur-hover) var(--ease-out-expo);
}
.diferenciais-home li.diferencial:hover::before { width: 56px; margin-left: -28px; }
@media (min-width: 721px) { .diferenciais-home li.diferencial + li.diferencial { border-left: 1px solid rgba(251, 249, 245, 0.14); } }
.diferenciais-home .faixa-legenda { margin-top: 0; }
.beneficio .dif-icone { margin-bottom: 12px; }
@media (max-width: 720px) { .diferenciais-home li.diferencial { padding: 20px 10px 18px; } .dif-icone { width: 28px; height: 28px; } }
/* Entrada escalonada curta (12 px, 400 ms, 60 ms entre itens); com movimento reduzido tudo já aparece. */
.diferenciais-home li.revelar, .beneficio.revelar { transform: translateY(12px); transition: opacity 400ms var(--ease-out-expo), transform 400ms var(--ease-out-expo),
  translate var(--dur-hover) var(--ease-out-expo), border-color var(--dur-hover) linear;
  transition-delay: calc(var(--ordem, 0) * 60ms), calc(var(--ordem, 0) * 60ms), 0s, 0s; }

/* ---- item 17 da rodada 2 (27/10/2026): menos "caixas". Cartões sem contorno, com sombra muito suave; cidades como
   lista editorial com filete fino; faixas de fundo alternadas; títulos da home com mais escala e respiro; "Onde atuamos"
   em duas colunas assimétricas no desktop (título de um lado, cidades do outro). ---- */
.cartao, .vitrine li {
  border-color: transparent; box-shadow: 0 1px 2px rgba(29, 51, 80, 0.06), 0 8px 24px rgba(29, 51, 80, 0.07);
}
.cartao:hover, .cartao:focus-within { border-color: transparent; box-shadow: 0 2px 4px rgba(29, 51, 80, 0.08), 0 18px 40px rgba(29, 51, 80, 0.14); }
.vitrine li:has(.fechado-botao:hover) { border-color: transparent; box-shadow: 0 2px 4px rgba(29, 51, 80, 0.08), 0 18px 40px rgba(29, 51, 80, 0.14); }
.aviso-vazio { border-color: transparent; border-left-color: var(--accent); }
#chegaram-agora .titulo-secao, #cidades .titulo-secao, #conteudos .titulo-secao, #negocios-recentes .titulo-secao {
  font-size: clamp(34px, 4vw, 56px); line-height: 1.1;
}
#chegaram-agora .cabeca-secao, #conteudos .cabeca-secao { margin-bottom: 40px; }
#cidades { background: var(--rapp-white); }
.cidade {
  min-height: 0; padding: 18px 0 14px; background: transparent; border: 0; border-top: 1px solid var(--rapp-sand-300);
  border-radius: 0; transition: border-color var(--dur-hover) linear;
}
.cidade:hover { translate: none; border-top-color: var(--accent); }
.cidade span { position: relative; padding-bottom: 2px; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease-out-expo); align-self: flex-start; }
.cidade:hover span, .cidade:focus-visible span { background-size: 100% 1px; }
@media (min-width: 721px) { .cidade { min-height: 0; padding: 22px 0 18px; } }
/* Item 20 da rodada 2 e adendo de 27/10/2026: no desktop o título quebra em "Explore os imóveis disponíveis" / "em São Paulo,
   Alto Tietê e Região" (a 2ª linha num span em bloco); até 720 px, quebra natural. */
#titulo-cidades .quebra-linha { display: block; }
@media (max-width: 720px) { #titulo-cidades .quebra-linha { display: inline; } }
@media (min-width: 1081px) { #cidades .cidades { column-gap: 40px; row-gap: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-midia, .esqueleto-foto, .esqueleto-linha { animation: none; }
  .hero-interno { transform: none; }
  .botao::before { display: none; }
  .botao:hover, .botao:active, .grade[data-trocando="true"] { transform: none; }
  .cartao:hover .cartao-foto img, .cartao:focus-within .cartao-foto img, .galeria figure:hover img { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .revelar { opacity: 1; transform: none; }
  .whatsapp-fixo { transform: none; }
  .barra-fixa[data-escondida="true"] { transform: none; }
  .cartao:hover, .cartao:focus-within, .cidade:hover { translate: none; }
  .faq summary::after { transition: none; }
  .post-trilho, .fechado-trilho, .grade-posts { transition: none; }
  .post-cartao:hover, .post-cartao:focus-within { translate: none; }
}

/* alvos-44 */
@media (max-width: 720px) {
  .rodape li a, .rodape-whatsapp, .rodape-grupo li:not(:has(a, button)) { min-height: 44px; }
  .migalha a, #d-mapa { display: inline-flex; align-items: center; min-height: 44px; }
  .chip { min-height: 44px; padding: 0 14px; }
  .aceite-rotulo { min-height: 44px; align-items: center; }
  /* Alvo de 44 px sem esticar a linha: o enchimento vertical é compensado por margem negativa. */
  .aceite-rotulo a { display: inline-block; min-height: 44px; padding-block: 12px; margin-block: -12px; line-height: 20px; }
  .nota a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* fim-alvos-44 */

/* ---- alto contraste do sistema (Windows): estados que dependiam só de cor ganham cores do sistema ---- */
@media (forced-colors: active) {
  [aria-pressed="true"], .segmentado button[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .carrossel-pontos button i { border-color: CanvasText; }
  .carrossel-pontos button[aria-current="true"] i { background: CanvasText; forced-color-adjust: none; }
  .whatsapp-fixo, .lightbox-seta { outline: 2px solid ButtonText; }
  .selo { border: 1px solid CanvasText; }
  .cartao:focus-within { outline-color: Highlight; }
}

/* ---- utilitários de seção ---- */
.secao-faixa, .secao-clara { background: var(--rapp-sand-100); }
.secao-rodape { margin-top: 28px; }
.topo-botao { margin-top: 24px; }
.galeria[data-n="1"] { grid-template-columns: 1fr; grid-template-rows: 420px; }
.galeria[data-n="1"] figure:first-child { grid-row: auto; }
.galeria[data-n="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 320px; }
.galeria[data-n="2"] figure:first-child { grid-row: auto; }
.galeria[data-n="3"] { grid-template-columns: 2fr 1fr; }

/* Página estática do post (pré-renderizada, Etapa 5c): os cartões empilhados, sem o carrossel que precisa de JavaScript. */
.post-estatico { display: grid; gap: 16px; max-width: 520px; }
.post-estatico figure { margin: 0; border: 1px solid var(--rapp-sand-300); background: var(--rapp-sand-100); }
.post-estatico img { width: 100%; height: auto; }