/* ============================================================================
   VITRINE PÚBLICA (§5.11) — folha PRÓPRIA. Nada de Bootstrap e nada de app.css:
   a página que o visitante anônimo abre num 4G de interior não carrega o shell
   do produto inteiro (D11 — VM de 1 GB dividida com o Cents).

   REGRAS DESTA FOLHA
   ------------------
   1. COR SÓ POR TOKEN. Nenhum valor de cor literal aqui — nem hexadecimal, nem
      função de canal, nem notação de matiz (cli/lint/tema.php varre por eles) — e
      isso não é burocracia: é o que garante que a vitrine nasça correta nos dois
      temas. A identidade da imobiliária entra como DADO, na custom property
      `--vitrine-cor` (injetada pelo layout a partir de `vitrines.cor_tema`), e
      TODO uso é `var(--vitrine-cor, var(--keys-...))` — sem a cor da casa, cai no
      token do produto, que já tem contraste auditado. Trocar a aparência nunca é
      migração (achado de UX do Code49, registrado no backlog).
   2. A COR DA CASA É PREENCHIMENTO, NUNCA TEXTO. Um amarelo-claro escolhido pelo
      dono seria ilegível como texto sobre o fundo claro, e um azul-escuro seria
      ilegível no tema escuro — nenhum valor único satisfaz os dois temas. Então a
      cor da casa pinta botões, etiquetas e destaques (onde ela aparece de verdade)
      e o TEXTO continua nos tokens já auditados (`--keys-primaria-texto`,
      `--keys-tinta`). O que vai POR CIMA da cor da casa é `--vitrine-tinta`,
      escolhida NO SERVIDOR pela luminância do hex (`Vitrine::corTexto`) entre dois
      tons neutros e estáveis nos dois temas — assim nunca existe texto invisível, e
      a decisão é determinística em vez de depender de suporte a `color-mix`.
   3. Layout fluido de verdade (grid com `auto-fit`), sem media query por
      aparelho: a grade se ajusta de 1 a 4 colunas sozinha.
   4. Foco visível SEMPRE (`:focus-visible`) — a vitrine é navegável por teclado.
   5. FOLHA PRÓPRIA COMEÇA PELO RESET. Ver o bloco logo abaixo: "própria" quer
      dizer autossuficiente, e o preço de não carregar o Bootstrap é que nada
      vem de graça — nem `box-sizing`.
   ============================================================================ */

/* ============================================================================
   O MÍNIMO QUE TODA FOLHA PRÓPRIA PRECISA — e o defeito que custou esta linha
   ----------------------------------------------------------------------------
   Medido por CDP na conta de demonstração (05/08/2026, emulação MÓVEL), a
   listagem pública `/{slug}` — a página que o COMPRADOR abre vindo do Google —
   saía de escala em TODO celular:

     | viewport | window.innerWidth | documentElement.scrollWidth |
     |----------|-------------------|------------------------------|
     | 360      | **364**           | 364                          |
     | 390      | **394**           | 394                          |
     | 576      | **580**           | 580                          |

   Cadeia medida a 390: `p.vt-campo` 176 numa coluna de 156 →
   `div.vt-filtros-grade` 344 em 324 → `section.vt-wrap` → `main.vt-main`
   394 em 390.

   A CAUSA não é do layout: é o `box-sizing` padrão do CSS. Esta folha declara
   no próprio cabeçalho que não carrega Bootstrap nem app.css, e carrega só o
   `tokens.css` — e NENHUM dos dois declarava `box-sizing: border-box`. Com o
   `content-box` do padrão, `.vt-campo input { width: 100%; padding: .45rem
   .55rem; border: 1px }` mede a coluna INTEIRA e ainda soma padding e borda por
   fora: ~19,6px a mais por campo, em cada um dos 13 campos do filtro.

   Prova causal, na MESMA carga de página: aplicando `box-sizing: border-box`
   nos campos pelo DevTools Protocol, `innerWidth` voltou a 360/360, 390/390 e
   576/576, e `scrollWidth` junto.

   ⚠️ E o que interessa não é o caso, é o CONJUNTO. As folhas que dispensam o
   Bootstrap perdem o `*,::after,::before{box-sizing:border-box}` do reboot dele,
   e cada uma tem de repor esse mínimo por conta própria. Em 05/08/2026 havia
   QUATRO layouts de documento inteiro sem Bootstrap; `landing.css` e
   `impressao.css` já repunham, `vitrine.css` e `portal.css` não. As duas que
   faltavam são exatamente as duas páginas PÚBLICAS com formulário.

   Quem fiscaliza o conjunto daqui para a frente é a REGRA 14 de
   `tests/Unit/LarguraCelularTest.php`: ela varre TODA view que abre `<html>`,
   resolve a cascata das folhas que aquele layout carrega e cobra `border-box`
   universal — sem lista de exceção. Folha própria nova nasce cobrada no dia em
   que for escrita, e não na primeira reclamação de comprador.
   ============================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* Sem cor configurada, a vitrine usa a primária do produto. */
    --vitrine-borda: var(--keys-borda);
    --vitrine-raio: var(--keys-raio);
    --vitrine-raio-sm: var(--keys-raio-sm);
    --vitrine-max: 74rem;
}

.vt {
    margin: 0;
    background: var(--keys-fundo);
    color: var(--keys-tinta);
    font-family: var(--keys-fonte);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

.vt-wrap { max-width: var(--vitrine-max); margin: 0 auto; padding: 0 1rem; }

.vt-pular {
    position: absolute; left: -9999px; top: 0; padding: .5rem .75rem; z-index: 10;
    background: var(--keys-superficie); color: var(--keys-tinta); border-radius: var(--vitrine-raio-sm);
}
.vt-pular:focus { left: .5rem; top: .5rem; }

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

/* ---------- Topo ---------- */
.vt-topo {
    background: var(--keys-superficie);
    border-bottom: 1px solid var(--vitrine-borda);
    position: sticky; top: 0; z-index: 5;
}
.vt-topo-linha {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; padding-block: .6rem;
}
.vt-marca { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.vt-logo { max-height: 3rem; width: auto; max-width: 12rem; object-fit: contain; }
.vt-marca-texto {
    font-family: var(--keys-fonte-titulo); font-size: 1.15rem; font-weight: 700;
    color: var(--keys-tinta);
}
.vt-topo-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.vt-idiomas { display: inline-flex; gap: .1rem; }
.vt-idiomas a {
    padding: .2rem .45rem; font-size: .8rem; text-decoration: none; border-radius: var(--keys-raio-xs);
    color: var(--keys-texto-2);
}
.vt-idiomas a[aria-current] { background: var(--keys-superficie-2); color: var(--keys-tinta); font-weight: 700; }

.vt-tema {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; cursor: pointer;
    background: transparent; color: var(--keys-texto-2);
    border: 1px solid var(--vitrine-borda); border-radius: var(--keys-raio-xs);
}

/* ---------- Botões ---------- */
.vt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .5rem .9rem; border: 1px solid transparent; border-radius: var(--vitrine-raio-sm);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.vt-btn-primario { background: var(--vitrine-cor, var(--keys-primaria)); color: var(--vitrine-tinta, var(--keys-sobre-primaria)); }
.vt-btn-secundario { background: var(--keys-superficie); color: var(--keys-tinta); border-color: var(--keys-borda-forte); }
.vt-btn-limpar { background: transparent; color: var(--keys-primaria-texto); border-color: var(--keys-borda-forte); }
.vt-btn-wa { background: var(--keys-receita); color: var(--keys-sobre-primaria); }
.vt-btn-mini { padding: .3rem .6rem; font-size: .85rem; background: var(--keys-superficie); color: var(--keys-tinta); border-color: var(--keys-borda-forte); }
.vt-btn:hover { filter: brightness(.95); }

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--keys-anel-foco); outline-offset: 2px;
}

/* ---------- Hero ---------- */
.vt-hero { padding: 2rem 0 1rem; }
.vt-hero-curto { padding-bottom: .5rem; }
.vt-h1 { font-family: var(--keys-fonte-titulo); font-size: 1.6rem; line-height: 1.25; margin: 0 0 .35rem; }
.vt-h2 { font-family: var(--keys-fonte-titulo); font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
.vt-hero-sobre { margin: 0; max-width: 48rem; color: var(--keys-texto-2); }
.vt-fraco { color: var(--keys-texto-2); font-size: .9rem; }

/* ---------- Filtros ---------- */
.vt-filtros {
    background: var(--keys-superficie); border: 1px solid var(--vitrine-borda);
    border-radius: var(--vitrine-raio); padding: 1rem; margin: 1rem 0;
}
.vt-filtros-grade {
    display: grid; gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.vt-campo { margin: 0; display: flex; flex-direction: column; gap: .2rem; }
.vt-campo-largo { grid-column: span 2; }
.vt-campo label { font-size: .8rem; font-weight: 600; color: var(--keys-texto-2); }
.vt-campo input, .vt-campo select, .vt-campo textarea {
    font: inherit; padding: .45rem .55rem; border-radius: var(--keys-raio-xs);
    border: 1px solid var(--keys-borda-forte);
    background: var(--keys-superficie); color: var(--keys-tinta);
    min-width: 0; width: 100%;
}
.vt-filtros-dica { margin: .6rem 0 0; font-size: .82rem; color: var(--keys-texto-3); }
.vt-filtros-acoes { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }

.vt-resultado-linha {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-bottom: .5rem;
}
.vt-contagem { margin: 0; }
.vt-contagem .vt-fraco { margin-left: .4rem; }
.vt-ordem { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.vt-ordem select { font: inherit; padding: .25rem .4rem; border-radius: var(--keys-raio-xs);
    border: 1px solid var(--keys-borda-forte); background: var(--keys-superficie); color: var(--keys-tinta); }

.vt-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; }
.vt-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem;
    font-size: .82rem; text-decoration: none; border-radius: 999px;
    background: var(--keys-superficie-2); color: var(--keys-tinta); border: 1px solid var(--vitrine-borda);
}

/* ---------- Grade de imóveis ---------- */
.vt-grade {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
.vt-card {
    background: var(--keys-superficie); border: 1px solid var(--vitrine-borda);
    border-radius: var(--vitrine-raio); overflow: hidden;
}
.vt-card:hover { box-shadow: var(--keys-sombra-2); }
.vt-card-link { display: block; text-decoration: none; color: inherit; height: 100%; }
.vt-card-foto { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--keys-superficie-2); }
.vt-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-tag {
    position: absolute; top: .5rem; padding: .15rem .5rem; font-size: .72rem; font-weight: 700;
    border-radius: 999px; background: var(--keys-superficie); color: var(--keys-tinta);
    border: 1px solid var(--vitrine-borda);
}
.vt-tag-finalidade { left: .5rem; background: var(--vitrine-cor, var(--keys-primaria)); color: var(--vitrine-tinta, var(--keys-sobre-primaria)); border-color: transparent; }
.vt-tag-destaque { right: .5rem; background: var(--keys-aviso); color: var(--keys-sobre-primaria); border-color: transparent; }
.vt-tag-virtual { left: .5rem; bottom: .5rem; top: auto; background: var(--keys-info); color: var(--keys-superficie); border-color: transparent; }

.vt-card-corpo { display: block; padding: .75rem .85rem 1rem; }
.vt-card-titulo { display: block; font-weight: 700; line-height: 1.3; }
.vt-card-local { display: block; font-size: .85rem; color: var(--keys-texto-2); margin-top: .1rem; }
.vt-card-atributos { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .82rem; color: var(--keys-texto-2); margin-top: .5rem; }
.vt-card-preco {
    display: block; margin-top: .5rem; font-weight: 700; font-size: 1.1rem;
    color: var(--keys-primaria-texto);
}
.vt-card-preco em { font-style: normal; font-size: .95rem; font-weight: 600; color: var(--keys-texto-2); }
.vt-card-codigo { display: block; margin-top: .25rem; font-size: .75rem; color: var(--keys-texto-3); }

.vt-paginacao { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
.vt-paginacao a { color: var(--keys-primaria-texto); }

/* ---------- Vazio ---------- */
.vt-vazio {
    background: var(--keys-superficie); border: 1px dashed var(--keys-borda-forte);
    border-radius: var(--vitrine-raio); padding: 2rem 1rem; text-align: center;
}
.vt-vazio-titulo { font-weight: 700; font-size: 1.05rem; margin: 0 0 .35rem; }

/* ---------- Página do imóvel ---------- */
.vt-imovel { padding-bottom: 2rem; }
.vt-migalhas { padding: 1rem 0 .5rem; font-size: .9rem; }
.vt-migalhas a { color: var(--keys-primaria-texto); }
.vt-imovel-cabeca { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.vt-imovel-etiquetas { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; flex-wrap: wrap; }
.vt-imovel-etiquetas .vt-tag { position: static; }
.vt-imovel-local { margin: 0; color: var(--keys-texto-2); }
.vt-imovel-preco-bloco { text-align: right; }
.vt-imovel-preco {
    margin: 0; font-family: var(--keys-fonte-titulo); font-size: 1.5rem; font-weight: 700;
    color: var(--keys-primaria-texto);
}
.vt-imovel-preco-bloco p + p { margin: .15rem 0 0; }

.vt-galeria { margin: 1rem 0 1.5rem; }
.vt-galeria-principal { position: relative; margin: 0; background: var(--keys-superficie-2); border-radius: var(--vitrine-raio); overflow: hidden; }
.vt-galeria-principal img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.vt-galeria-miniaturas {
    list-style: none; display: flex; gap: .5rem; padding: .5rem 0 0; margin: 0;
    overflow-x: auto; scroll-snap-type: x proximity;
    /* Caixa que rola de lado tem de conter até o que é `position: absolute` — e o
       `.visually-hidden` (o rótulo de leitor de tela) é abspos. Sem `position: relative` aqui, um
       rótulo desses dentro da tira ficaria pendurado no bloco contêiner inicial, no lugar
       estático: além da borda da tela, esticando o documento até o celular afastar o zoom e a
       página sair de escala inteira. Medido em 05/08/2026 no app (/relatorios/aging: innerWidth
       456 numa viewport de 390, por UM rótulo invisível). REGRA 3-C do LarguraCelularTest. */
    position: relative;
}
.vt-galeria-miniaturas li { flex: 0 0 auto; scroll-snap-align: start; }
.vt-galeria-miniaturas img {
    width: 6.5rem; height: 4.9rem; object-fit: cover; display: block;
    border-radius: var(--keys-raio-xs); border: 2px solid transparent;
}
.vt-galeria-miniaturas a[aria-current] img { border-color: var(--vitrine-cor, var(--keys-primaria)); }
.vt-galeria-vazia { text-align: center; padding: .75rem 0 0; }

.vt-imovel-colunas { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: start; }
.vt-imovel-conteudo section:first-child .vt-h2 { margin-top: 0; }
.vt-atributos, .vt-caracteristicas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.vt-atributos li, .vt-caracteristicas li {
    padding: .3rem .65rem; border-radius: 999px; font-size: .88rem;
    background: var(--keys-superficie-2); border: 1px solid var(--vitrine-borda);
}
.vt-texto { max-width: 44rem; }
.vt-link-externo { color: var(--keys-primaria-texto); }

.vt-imovel-lado { display: grid; gap: 1rem; position: sticky; top: 4.5rem; }
.vt-caixa {
    background: var(--keys-superficie); border: 1px solid var(--vitrine-borda);
    border-radius: var(--vitrine-raio); padding: 1rem;
}
.vt-caixa .vt-h2 { margin-top: 0; }

/* ---------- Formulário de interesse ---------- */
.vt-interesse { margin: 2.5rem 0 1rem; }
.vt-form { margin-top: .75rem; }
.vt-form-grade { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.vt-form-lgpd { font-size: .78rem; color: var(--keys-texto-3); margin: .75rem 0 0; }
.vt-form-acoes { display: flex; gap: .5rem; margin: .75rem 0 0; flex-wrap: wrap; }
/* HONEYPOT: fora da tela, mas NÃO `display:none` (robô esperto ignora o que está
   escondido assim). Nenhum humano vê, nenhum leitor de tela chega — o campo está
   marcado com aria-hidden e tabindex=-1 no HTML. */
.vt-armadilha { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Recibo / 404 ---------- */
.vt-recibo { padding: 3rem 1rem; max-width: 40rem; text-align: center; }
.vt-recibo-texto { font-size: 1.05rem; }
.vt-recibo-erro {
    background: var(--keys-despesa-suave); border-left: 4px solid var(--keys-despesa);
    padding: .75rem 1rem; border-radius: var(--keys-raio-xs); text-align: left;
}
.vt-recibo-acoes { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }

/* ---------- Rodapé ---------- */
.vt-rodape { margin-top: 3rem; border-top: 1px solid var(--vitrine-borda); background: var(--keys-superficie); }
.vt-rodape-grade {
    display: grid; gap: 1.5rem; padding: 2rem 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.vt-rodape-grade p { margin: 0 0 .25rem; font-size: .9rem; }
.vt-rodape-titulo { font-weight: 700; margin-bottom: .5rem; }
.vt-rodape a { color: var(--keys-primaria-texto); }
.vt-rodape-legal {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1rem 0 1.5rem; border-top: 1px solid var(--vitrine-borda);
    font-size: .82rem; color: var(--keys-texto-3);
}
/* O selo do plano Grátis (§8): presente e discreto — outdoor, não intrusão. */
.vt-selo { color: var(--keys-texto-2); text-decoration: none; }
.vt-selo:hover { text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
    .vt-card, .vt-btn { transition: box-shadow .15s ease, filter .15s ease; }
}

/* Impressão: o visitante que imprime a página do imóvel quer as informações, não
   os botões nem o filtro. */
@media print {
    .vt-topo, .vt-rodape, .vt-filtros, .vt-form, .vt-compartilhar, .vt-pular, .vt-paginacao { display: none; }
    .vt { background: transparent; }
    .vt-galeria-miniaturas { display: none; }
}

/* ---------- Logo da imobiliária no tema escuro (contraste, 23/10/2026) ----------
   O logo é uma imagem ENVIADA PELA CASA — em geral PNG transparente com letra escura. No tema
   escuro (fundo petróleo) ele sumia: letra escura sobre fundo escuro. Não dá para medir contraste
   de imagem, então a regra é estrutural: no escuro o logo ganha uma PLACA clara por trás
   (--keys-placa-logo, tokens.css), com respiro e cantos; no claro nada muda. */
[data-bs-theme="dark"] .vt-logo {
    background: var(--keys-placa-logo);
    border-radius: var(--keys-raio-xs);
    padding: .3rem .6rem;
}