/* ===========================================================================
   1. HERO DA LISTAGEM + RÉGUA DE BUSCA
   ---------------------------------------------------------------------------
   MEDIDO NO SITE NO AR DA BUSCA (2026-09-21) — no print do Sami (1898x883,
   janela de ~1518 CSS px, tela 1,25x) e na cadeia de CSS do legado:

     hero .......... 470px de altura (`.banner-parallax`), largura cheia; no
                     print, 587px ÷ 1,25 = 469,6
     foto .......... `cover`, centrada, com véu de PRETO A 50% por cima
                     (`.banner-inner:before`)
     faixa ......... branco a 69% — `#ffffffb0` —, centrada verticalmente,
                     respiro de 30px em cima e embaixo
     título ........ 25px/20px, 30px até os campos, com a lupa 8px antes.
                     ⚠ O legado escreve Encode Sans Condensed peso 500 e não
                     entrega nem um nem outro: `imoveis-locacao.php` NÃO carrega
                     a fonte (cai em Arial) e a URL do Google não tem o peso
                     500. Aqui: fonte do corpo, peso 400 — ver o @font-face no
                     style.css
     campo ......... 42px, borda 1px #ccc, raio 4, 14px/300 #959595, 6x12 de
                     respiro; 13px de respiro embaixo (`.form-group`)
     botão ......... #3333FF, branco, 11x15 de respiro, raio 4, SEM borda

   ⚠ ABAIXO DE 768 O LEGADO ESCONDE ESTE BLOCO INTEIRO (`hidden-xs`) e mostra
   uma segunda busca, `.advanced-search-mobile`, em vermelho #B61217 — uma
   barra estreita com um campo só e um gatilho que abre o resto. NÃO está
   replicada: aqui o hero encolhe para 350 (a altura que o próprio legado usa
   em `@media(max-width:767px)`) e a régua continua a mesma, empilhada. Se o
   Sami quiser a barra vermelha, é trabalho à parte.

   ⚠ O PARALLAX NÃO VEIO COMO LÁ: o tema empurra a camada da foto em 0,3x da
   rolagem por JS. Aqui é `background-attachment: fixed`, que dá o mesmo efeito
   sem script.
   =========================================================================== */

/* ⚠ `min-height`, NÃO `height`, E A FAIXA NO FLUXO. A faixa era
   `position: absolute` com `top: 50%` dentro de um hero de altura cravada e
   `overflow: hidden`: quando a busca avançada abria, ela crescia para os dois
   lados, subia por baixo do cabeçalho e o que passava dos 470 era cortado — os
   filtros apareciam soltos sobre a foto. Foi o que o print do Sami pegou em
   2026-09-21.

   Com flex a faixa fica centrada enquanto couber nos 470 (o estado fechado, que
   é o medido) e EMPURRA o hero quando abre. */
.hero-busca {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 470px;
}

/* ⚠ 350px ABAIXO DE 768, que é a altura que o próprio legado usa lá
   (`@media(max-width:767px) .banner-parallax { height: 350px !important }`) —
   mesmo ele escondendo o bloco nessa faixa. Ver a nota do celular no topo.

   E A FOTO DEIXA DE SER `fixed`: no iOS o `background-attachment: fixed`
   quebra (a foto congela e some), e no Android custa rolagem. */
@media (max-width: 767.98px) {
    .hero-busca {
        min-height: 350px;
    }

    .hero-busca__foto {
        background-attachment: scroll;
    }
}

.hero-busca__foto {
    position: absolute;
    inset: 0;
    background-image: url('../img/listagem/hero.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* O VÉU DE 50% — `.banner-inner:before`. Ele escurece a FOTO, não a régua: no
   legado a faixa está numa camada acima (a `.banner-caption` tem z-index 2 e a
   foto vive dentro de um `.banner-bg-wrap` com z-index 0). */
.hero-busca__foto::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

.hero-busca__faixa {
    position: relative;
    width: 100%;
    padding: 30px 0;
    background: #ffffffb0;
}

.hero-busca__titulo {
    display: flex;
    align-items: center;
    margin: 0 0 30px;
    font-size: 25px;
    /* ⚠ 400, E O LEGADO ESCREVE 500 — ver a nota no topo do bloco. */
    font-weight: 400;
    line-height: 20px;
    color: var(--cor-escura);
}

.hero-busca__lupa {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* A FILEIRA DE CAMPOS — no legado são colunas do Bootstrap 3: quatro de
   `col-lg-2` e dois botões de `col-md-2`, ou seja SEIS colunas de 1/6 da
   largura acima de 1200. Abaixo disso elas viram 1/3 e 1/2 e a régua quebra em
   duas linhas — é o que se vê lá. */
.hero-busca__linha {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.hero-busca__campo {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
    /* `.advanced-search .form-group { margin-bottom: 13px }` */
    margin-bottom: 13px;
}

@media (min-width: 768px) {
    .hero-busca__campo {
        flex-basis: 33.3333%;
        max-width: 33.3333%;
    }
}

@media (min-width: 1200px) {
    .hero-busca__campo {
        flex-basis: 16.6667%;
        max-width: 16.6667%;
    }
}

/* ---- O campo, no desenho da referência (`.form-control`) ---------------- */

/* Vale para o <select> e para o <input> de código; os dropdowns da casa entram
   pela mesma porta com `campo--caixa`, logo abaixo. */
.campo-caixa,
.campo--caixa .dropdown__gatilho {
    display: block;
    width: 100%;
    height: 42px;
    padding: 6px 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background: var(--cor-branco);
    font-family: inherit;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.42857143;
    color: #959595;
    text-align: left;
}

.campo-caixa:focus,
.campo--caixa .dropdown__gatilho:focus {
    border-color: #f17478;
    outline: 0;
    box-shadow: none;
}

/* O dropdown da casa é um <button> com o texto e uma seta; aqui ele veste a
   roupa do `.form-control` de lá. */
.campo--caixa .dropdown__gatilho {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.campo--caixa .dropdown__texto,
.campo--caixa .dropdown__texto--vazio {
    color: #959595;
    font-size: 14px;
    font-weight: 300;
}

/* ---- Os dois botões ----------------------------------------------------- */

/* `.btn` do tema (11x15, raio 4, SEM borda, 14px/500) + `.btn-primary` e
   `.advance-btn`, que pintam os dois do MESMO azul #3333FF. */
.hero-busca__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    padding: 11px 15px;
    border: none;
    border-radius: 4px;
    background: #3333ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857143;
    color: var(--cor-branco);
    cursor: pointer;
}

.hero-busca__btn:hover {
    opacity: .9;
}

.hero-busca__btn-icone {
    width: 15px;
    height: 15px;
    margin-right: 6px;
}

/* ---- Os campos da "Busca Avançada" -------------------------------------- */

/* `.advance-fields { padding-top: 13px; display: none }` — fechado até o
   clique; quem abre é o busca.js.

   ⚠ OS CAMPOS DE DENTRO SÃO OS MESMOS DA RÉGUA (`.hero-busca__linha` e
   `.hero-busca__campo`), na mesma grade de seis colunas: no site no ar a busca
   avançada é uma FILEIRA de campos, não um painel. Aqui isto era um grid
   próprio de `minmax(190px, 1fr)` com listas de caixas abertas dentro, e o
   resultado ocupava mais de 400px de altura. */
.hero-busca__avancados {
    padding-top: 13px;
}

/* A RÉGUA DE VALORES ocupa a largura inteira, abaixo dos campos: ela não cabe
   numa coluna de 42px como os outros. */
.hero-busca__valores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding: 0 15px;
}

.hero-busca__valores-rotulo {
    font-size: 14px;
    font-weight: 500;
    color: var(--cor-escura);
}

.hero-busca__valores-texto {
    font-size: 14px;
    font-weight: 300;
    color: #959595;
}

.hero-busca__valores .faixa {
    flex: 1 1 200px;
    max-width: 320px;
}

/* O "Reiniciar busca" é o mesmo botão dos outros dois, em cinza — ele limpa,
   não busca, e pintá-lo do mesmo azul disputaria a atenção com o "Buscar". */
.hero-busca__btn--limpar {
    background: #959595;
}

/* ===========================================================================
   2. MIGALHAS E TÍTULO — SÓ O QUE É DA LISTAGEM
   ---------------------------------------------------------------------------
   O COMPONENTE INTEIRO MUDOU-SE PARA O style.css (bloco 2e) em 2026-09-22,
   quando o /sobre passou a precisar da mesma caixa cinza: a faixa, a lista de
   migalhas, o chevron, o ícone de casa e o título são os mesmos em toda página
   interna do site no ar. Aqui ficou só o que a LISTAGEM faz de diferente, que
   é o campo "ordenar" dentro da caixa.
   =========================================================================== */

/* ⚠ 40, E NÃO OS 30 DO LEGADO (`.breadcrumb-top { padding: 30px 0 30px }`).
   Escolha do Sami em 2026-09-21, olhando a tela: com o título sozinho na linha
   de baixo, 30 deixava tudo apertado contra o hero e contra os cards.
   (O degrau de 22 abaixo de 992 é o do legado e ficou no style.css.) */
.page-titulo {
    padding: 40px 0;
}

/* O DEGRAU DE 22 PRECISA SER REPETIDO AQUI. Ele existe no style.css, mas numa
   media query — e esta folha carrega DEPOIS, com uma regra sem media query que
   venceria em qualquer largura. Sem estas quatro linhas a faixa ficaria com 40
   de respiro no celular. */
@media (max-width: 991.98px) {
    .page-titulo {
        padding: 22px 0;
    }
}

/* A FAIXA CINZA — a migalha à esquerda, o "ordenar" à direita, e o título
   sozinho na linha de baixo (pedido do Sami, 2026-09-21).

   AQUI A CAIXA NÃO É A LISTA: ela envolve as duas coisas, e por isso a
   migalha entra SEM o modificador `--caixa`. O fundo, o raio e o respiro
   horizontal de 4px são os mesmos do bloco 2e.

   ⚠ O RESPIRO VERTICAL AQUI É 8, NÃO 14/17. Lá dentro da caixa do legado só há
   texto de 12px, e aquele respiro fecha os 44,8px medidos no print. Aqui entra
   um campo de 50px de altura: com 14/17 a faixa iria a 81px e viraria uma
   tarja. Com 8, fecha 66 — que é o campo mais um respiro de cada lado.

   ⚠ E O SITE NO AR NÃO TEM ORDENAÇÃO NA LISTAGEM: a faixa dele guarda só a
   migalha. Se o campo sair um dia, a lista volta a levar o `--caixa` e este
   bloco inteiro sai.

   ⚠ 35 DE MARGEM, e não os 20 do bloco 2e. Mesma escolha do Sami e pelo mesmo
   motivo: o título precisa respirar embaixo da faixa. */
.page-titulo__faixa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 35px;
    padding: 8px 4px;
    border-radius: 4px;
    background: #f5f5f5;
}

/* ===========================================================================
   3. A LISTA
   =========================================================================== */

/* ⚠ SEM COLUNA LATERAL. Aqui havia a grade de 1/3 + 2/3 da base (busca à
   esquerda, cards à direita). Na Busca os filtros estão no hero e a lista
   ocupa a largura inteira do container. */
.listagem {
    padding-bottom: 120px;
}

.faixa {
    position: relative;
    width: 98%;
    height: 3px;
    border-radius: 5px;
    background: #000;
    touch-action: none;
}

.faixa__intervalo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: var(--cor-primaria);
}

.faixa__alca {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 100%;
    background: var(--cor-primaria);
    cursor: default;
}

.faixa__alca:focus {
    outline: none;
}

.faixa__alca:focus-visible {
    outline: 2px solid var(--cor-escura);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   OS RESULTADOS
   --------------------------------------------------------------------------- */
.listagem__resultados {
    min-width: 0;
}

/* --- Ordenar ------------------------------------------------------------
   ⚠ ELE MORAVA NUMA BARRA PRÓPRIA acima dos cards (`.listagem__barra`, o
   `.ltn__shop-options` da base, 770x50 com 50 embaixo). Em 2026-09-21 subiu
   para a LINHA DO TÍTULO, a pedido do Sami — ver `.page-titulo__linha`.

   O desenho continua o de lá: 190x50, borda 2px #ededed, sem raio, 14px Arial
   com linha de 46 e o texto em 500. Seta de 5x5 desenhada com duas bordas de
   2px #999, que gira para cima quando abre.

   ⚠ O SITE NO AR DA BUSCA NÃO TEM ORDENAÇÃO NA LISTAGEM. O campo é nosso. */
.page-titulo__ordenar .campo--dropdown {
    flex: none;
    min-width: 190px;
}

.campo--ordenar .dropdown__gatilho {
    position: relative;
    height: 50px;
    padding: 0 30px 0 18px;
    border: 2px solid #ededed;
    border-radius: 0;
    background: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 46px;
    color: var(--cor-texto);
}

.campo--ordenar .dropdown__texto {
    font-weight: 500;
    color: inherit;
}

.campo--ordenar .dropdown__seta {
    display: none;
}

.campo--ordenar .dropdown__gatilho::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 5px;
    height: 5px;
    margin-top: -4px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    transform: rotate(45deg);
    transform-origin: 66% 66%;
    transition: all .15s ease-in-out;
    pointer-events: none;
}

.campo--ordenar .dropdown--aberto .dropdown__gatilho::after {
    transform: rotate(-135deg);
}

/* A LISTA: 186 de largura (a caixa por dentro da borda), 4px abaixo dela, raio
   5 e um anel de sombra de 1px em vez de borda. Entra crescendo de 75% — é a
   animação do nice-select, com o mesmo "passar do ponto" da curva.
   Os 2px de `margin` compensam a borda: o JS encosta o painel na caixa de
   FORA do campo, e lá a lista nasce dentro da borda. */
.campo--ordenar .dropdown__menu {
    max-width: 186px;
    margin: 2px 0 0 2px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, .11);
    overflow: hidden;
    transform: scale(.75) translateY(-21px);
    transform-origin: 50% 0;
    transition: all .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out;
}

.campo--ordenar .dropdown__menu--visivel {
    transform: none;
}

.campo--ordenar .dropdown__menu .dropdown__opcao {
    padding: 10px 5px 10px 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--cor-texto);
    transition: all .2s;
}

.campo--ordenar .dropdown__menu .dropdown__opcao--ativa,
.campo--ordenar .dropdown__menu .dropdown__opcao:hover,
.campo--ordenar .dropdown__menu .dropdown__opcao[aria-selected="true"]:hover,
.campo--ordenar .dropdown__menu .dropdown__opcao[aria-selected="true"].dropdown__opcao--ativa {
    background: #f6f6f6;
    color: var(--cor-texto);
}

/* A escolhida vai em NEGRITO e só — sem o ✔ da pele comum. */
.campo--ordenar .dropdown__menu .dropdown__opcao[aria-selected="true"] {
    font-weight: 700;
}

.campo--ordenar .dropdown__menu .dropdown__opcao[aria-selected="true"]::after {
    display: none;
}

/* --- A grade -----------------------------------------------------------------
   TRÊS COLUNAS, como o `.grid-view-3-col` do site no ar
   (`.grid-view-3-col .item-wrap { width: 33.33% }`), com 12px de goteira — os
   6px de cada lado que o legado escreve INLINE em cada `.col-md-4`.

   ⚠ ERAM DUAS COLUNAS com 30 de vão: a grade da base. A largura do card muda
   junto (370 contra 378), e é essa a diferença que se vê de longe.

   Abaixo de 1200 o legado cai para duas colunas (`.grid-view .item-wrap`) e,
   abaixo de 768, para uma (`.grid-view-3-col .item-wrap { width: 100% }`). */
.listagem__resultados .grid-imoveis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    align-items: start;
    padding: 0;
}

@media (max-width: 1199.98px) {
    .listagem__resultados .grid-imoveis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .listagem__resultados .grid-imoveis {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   O CARD — `.property-item.item-grid` DO SITE NO AR DA BUSCA
   MEDIDO em 2026-09-21, no print do Sami e na cadeia de CSS do legado. A
   tabela completa está no cabeçalho de cardHTML(), em public/js/busca.js.

   ⚠ O QUE SAIU DAQUI: o `.card-locacao` da base — borda #f1f8ff, sombra
   azulada, selo "Locação | Cód. Imóvel 33", título à esquerda, linha de
   localização com pino e o preço num rodapé branco com fio em cima. A Busca
   põe o preço SOBRE a foto e centraliza o texto.
   --------------------------------------------------------------------------- */

/* A CAIXA DE AVISO quando a lista vem vazia (ou a rede falha) — ver
   `avisoDeListaVazia()` em paginacao.js.

   O DESENHO É O `.not-found` DO TEMA DE LÁ (`background-color: #fff;
   padding: 20px`), que existe no CSS do legado e nenhuma página dele chega a
   usar. Ocupa a fileira inteira da grade, senão ficaria espremida numa das
   três colunas. */
.listagem__vazio {
    grid-column: 1 / -1;
    margin: 0;
    padding: 20px;
    background: var(--cor-branco);
    font-size: 14px;
    line-height: 22px;
    color: var(--cor-texto);
    text-align: center;
}

.listagem__vazio a {
    color: #022a3b;
    font-weight: 500;
}

.listagem__vazio a:hover {
    color: #3333ff;
}

/* `.property-item { background-color: #fff; padding: 8px }` — o respiro de 8
   em volta é o que faz a foto "flutuar" dentro do cartão branco. */
.card-imovel {
    padding: 8px;
    background: var(--cor-branco);
}

/* `.grid-view .figure-block { height: 276px; overflow: hidden }` — a caixa da
   foto tem altura fixa e RECORTA o que passar. */
.card-imovel__foto {
    position: relative;
    height: 276px;
    overflow: hidden;
}

.card-imovel__foto > a {
    display: block;
    height: 100%;
}

/* `.minHei { height: 280px; width: 100%; background-size: cover; border-radius: 9px }`
   — a imagem é 4px mais alta que a caixa, de propósito lá. `object-fit: cover`
   faz aqui o que o `background-size: cover` faz no `background` de lá. */
.card-imovel__foto img {
    display: block;
    width: 100%;
    height: 280px;
    border-radius: 9px;
    object-fit: cover;
}

.card-imovel__foto .sem-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 9px;
    background: #f3f4f6;
    color: #9b9b9b;
}

.card-imovel__foto .sem-foto__icone {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
}

.card-imovel__foto .sem-foto__texto {
    font-size: 13px;
}

/* A ETIQUETA — `.label-wrap.label-right` + `.label.label-default`: canto
   superior direito a 12px das bordas, fundo #333, 10px/11 em maiúsculas com
   respiro 3x6 e raio 2. */
.card-imovel__etiqueta {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    padding: 3px 6px;
    border-radius: 2px;
    background: #333333;
    font-size: 10px;
    font-weight: 500;
    line-height: 11px;
    color: var(--cor-branco);
    text-transform: uppercase;
}

/* O PREÇO — `.item-thumb .price` está a 12px da esquerda e a `top: 237px` na
   foto de 276, ou seja colado no pé. Aqui é `bottom: 12px`, que dá no mesmo e
   não quebra quando a foto muda de altura no celular.

   `.price h3` é 18px/18 peso 500, branco, sobre preto a 50% com respiro 5x10. */
.card-imovel__preco {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 4;
    padding: 5px 10px;
    background: rgba(0, 0, 0, .5);
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    color: var(--cor-branco);
}

/* AS DUAS AÇÕES — `.item-thumb .actions`: canto inferior direito, quadrados de
   28px com raio 4, pretos a 60%, 3px entre eles. No hover viram #3333FF a 80%. */
.card-imovel__acoes {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    display: flex;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card-imovel__acao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, .6);
    color: var(--cor-branco);
    cursor: pointer;
}

.card-imovel__acao:hover {
    background: rgba(51, 51, 255, .8);
}

.card-imovel__acao svg {
    width: 14px;
    height: 14px;
}

/* `.property-item.item-grid .item-body { padding: 15px 12px 7px }` */
.card-imovel__corpo {
    padding: 15px 12px 7px;
    text-align: center;
}

/* O TÍTULO — `h2.text-center.text-muted.h5 > a`: 14px (do `.h5` do Bootstrap 3)
   com linha de 20, e a cor vem do LINK de dentro: `a { color: #022a3b }`, o
   azul-petróleo do tema.

   ⚠ NEM CONDENSADO NEM 500, embora a folha do tema escreva os dois. A família
   morre no `h1,h2,h3,h4,h5,h6 { font-family: inherit }` do `bootstrap.css`
   (que carrega depois), e o peso 500 não existe para baixar. Corrigido em
   2026-09-22 — ver o @font-face no style.css. */
.card-imovel__titulo {
    margin: 0 0 7px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.card-imovel__titulo a {
    color: #022a3b;
    text-decoration: none;
}

.card-imovel__titulo a:hover {
    color: #3333ff;
}

/* "Cod: 0008 | base ALEGRE - RS" — `h4.text-muted.h5`, mesmo tamanho do
   título, na cor #6c757d do `.text-muted`. Mesma história da família: o
   `font-family: inherit` do bootstrap apaga a condensada do tema. */
.card-imovel__cod {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #6c757d;
}

/* OS QUATRO ATRIBUTOS — `ul.abas3 { margin-top: 30px }`, com as colunas do
   Bootstrap 3: 2/12 para dormitórios e vagas, 4/12 para área e código. O ícone
   fica EM CIMA do valor (há um <br> entre os dois no HTML de lá). */
.card-imovel__atributos {
    display: flex;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.card-imovel__atributo {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
    font-size: 14px;
    line-height: 20px;
    color: var(--cor-texto);
}

.card-imovel__atributo:nth-child(3),
.card-imovel__atributo:nth-child(4) {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
}

/* O ícone é `.text-muted` no legado — a mesma cor da linha do código. */
.card-imovel__atributo-icone {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto 4px;
    color: #6c757d;
}

.card-imovel__atributo-valor {
    display: block;
}

/* ⚠ SAÍRAM DAQUI OS AJUSTES DE CELULAR DO CARD DA base (`.card-locacao` a
   14px abaixo de 992, título menor, rodapé invertido e o selo com linha de 20
   abaixo de 576). O card da Busca não muda de tamanho: o legado dela não tem
   regra nenhuma de responsivo para `.property-item.item-grid` além do número
   de colunas da grade, que já está lá em cima.

   ⚠ O QUE FALTA CONFERIR AQUI é a altura da foto no celular: `.figure-block`
   guarda 276px em toda largura, e numa coluna de 100% a foto fica mais larga
   do que alta — o recorte muda. Só um print do celular resolve. */

/* ---------------------------------------------------------------------------
   PAGINAÇÃO — `includes/locacao/paginacao.php` DE LÁ
   Círculos de 50 com borda 2px #ededed; a página atual e o hover pintam de
   azul. As setas são o `fa-angle-double-*` — 14x16 no corpo de 16, que é a caixa
   do glifo. Sai só com mais de uma página.
   --------------------------------------------------------------------------- */
.listagem-paginacao {
    text-align: center;
}

.listagem-paginacao ul {
    margin: 0;
    padding: 0;
}

.listagem-paginacao li {
    display: inline-block;
    margin-right: 10px;
}

.listagem-paginacao li:last-child {
    margin-right: 0;
}

.listagem-paginacao a {
    display: block;
    width: 50px;
    height: 50px;
    border: 2px solid #ededed;
    border-radius: 100%;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 46px;
    color: var(--cor-texto);
    text-align: center;
    transition: all .3s ease 0s;
}

.listagem-paginacao li:hover a,
.listagem-paginacao li.ativa a {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria);
    color: #fff;
}

.listagem-paginacao svg {
    display: inline-block;
    width: auto;
    height: 16px;
    vertical-align: -2px;
}

@media (max-width: 767px) {
    .listagem-paginacao li {
        margin-right: 5px;
        font-size: 14px;
    }

    .listagem-paginacao a {
        width: 40px;
        height: 40px;
        line-height: 36px;
    }
}

/* ⚠ AQUI MORAVAM AS REGRAS DO VÉU DE CARREGAMENTO (.busca-carregando, o giro e
   o @keyframes dele). Saíram com o véu em 2026-09-14 — ver a nota em
   pages/listagem.php. */

@media (max-width: 759.98px) {

    /* Âncora do painel que abre (ver `.busca-bloco--aberto` abaixo). */
    .busca-bloco {
        position: relative;
    }

    /* CAMPO VAZIO MOSTRA O NOME DO FILTRO ("Cidade", "Bairro"), como no cartão
       dela — no desktop, onde existe título em cima, ele mostra "Todas opções"
       e "Selecione um bairro". Só o texto muda: o nome que o leitor de tela
       anuncia continua vindo do <label> escondido do campo. */
    /* O MESMO RÓTULO CURTO nos blocos de caixas (Tipo, Vagas): o texto longo
       fica com fonte 0 e o curto entra pelo `::after`. Só enquanto nada está
       escolhido — com escolha, o gatilho mostra os itens, como lá. */
    .busca-bloco__texto--vazio[data-rotulo-mobile] {
        font-size: 0;
    }

    .busca-bloco__texto--vazio[data-rotulo-mobile]::after {
        content: attr(data-rotulo-mobile);
        font-size: 14px;
    }

    .busca-bloco__texto {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: clip;
    }

    /* A LISTA NASCE FECHADA e abre no toque — é o que substitui o painel
       flutuante do selectpicker. Os <input> são os mesmos do desktop: nada de
       marcação duplicada nem de estado em dois lugares. */
    .busca-bloco .busca-checks,
    .busca-bloco .busca-valores__caixa {
        display: none;
    }

    /* ABERTA, A LISTA É UM PAINEL — a mesma pele dos outros filtros do cartão
       (Cidade e Bairro) e do `selectpicker` dela: fundo branco, borda de 1px
       rgba(0,0,0,.15), raio 4 e rolagem própria quando a lista é comprida.
       Antes as caixas ficavam soltas embaixo do gatilho, empurrando o resto do
       cartão para baixo. Os 12px de cada lado são o recuo do próprio bloco, e
       é o que faz o painel nascer exatamente sobre a largura do gatilho. */
    .busca-bloco--aberto .busca-checks,
    .busca-bloco--aberto .busca-valores__caixa {
        position: absolute;
        top: 100%;
        left: 12px;
        right: 12px;
        z-index: 95;
        display: block;
        max-height: 60vh;
        overflow-y: auto;
        margin-top: 4px;
        padding: .2rem;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: 4px;
        background: var(--cor-branco);
    }

    /* Cada opção com a medida da opção de dropdown: 4/16 de respiro em 16px,
       linha 1,8 — os mesmos 37px de altura da lista dela. */
    .busca-bloco--aberto .busca-checks li {
        margin: 0;
        padding: 4px 16px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
    }

}