/* ===========================================================================
   LISTAGEM DE IMÓVEIS — pages/listagem.php  (/locacao)
   ---------------------------------------------------------------------------
   RÉPLICA DE `imoveis-para-locacao.php` DA PORTO, medida no ar em 2026-09-11
   (viewport 1440, carteira de 42 imóveis):

     área ............ 48px acima (`mt-5`), 120 abaixo (`mb-120`)
     grade ........... 370 de busca + 30 + 770 de resultados (col-lg-4/8)
     busca ........... caixa de 370x2298, borda 2px #ededed, SEM sticky
     barra ........... só o "ordenar", 190x50 à direita, 50 de margem embaixo
     cards ........... 2 colunas de 370 com 30 entre elas; 370x643 cada, com
                       50 de margem embaixo (é o espaço entre linhas)

   Tudo aqui é desta página: o card é o `ltn__product-item-5` de lá e não o
   `.card-imovel` da home, e a coluna de busca é o `includes/locacao/busca.php`.
   =========================================================================== */
.listagem {
    /* `mt-5` + `mb-120` da referência. Os 48 de cima somem contra os 15 de
       margem da faixa (as margens se fundem), e a área nasce em y=371. */
    margin-top: 48px;
    padding-bottom: 120px;
}

/* SEM `align-items: start` AQUI, E ISSO É OBRIGATÓRIO, NÃO DESCUIDO.
   `position: sticky` só corre dentro do PAI. Com `start`, o <form> encolhe até
   a altura do cartão (862px) e o cartão não tem para onde deslizar — fica
   parado no topo enquanto a lista de imóveis rola. Esticado (o padrão
   `stretch`), o <form> ganha a altura da fileira inteira e o cartão acompanha
   a rolagem, exatamente como o `#searchForm` da referência, que mede 303x1919
   com a caixa de 303x862 dentro. */
/* UM TERÇO E DOIS TERÇOS, como o `col-lg-4` + `col-lg-8` de lá — e NÃO 370px
   cravados. A conta do Bootstrap: a fileira é 30 mais larga que o container
   (margens negativas), cada coluna tira 30 de respiro, então a primeira mede
   (100% + 30) / 3 − 30, que é o mesmo que 100%/3 − 20 (a
   divisão vai inteira no `calc`, sem a porcentagem arredondada).

   Em 1440 isso dá os 370 + 30 + 770 medidos; em 1199, 290 + 30 + 610, que é
   onde o valor cravado quebrava — a busca continuava com 370 e os cards
   encolhiam para 250 no lugar dos 290 da referência. */
.listagem__grade {
    display: grid;
    grid-template-columns: calc(100% / 3 - 20px) minmax(0, 1fr);
    gap: 30px;
}

/* ---------------------------------------------------------------------------
   A BUSCA — `includes/locacao/busca.php` DA PORTO
   O MESMO <form> em duas apresentações: coluna no desktop e gaveta lateral no
   celular (ver o @media no fim do arquivo).

   ⚠ FLUXO DE BLOCO, SEM GRID NEM FLEX. As distâncias de lá saem do COLAPSO DE
   MARGENS: o título tem 5 embaixo e o primeiro item da lista 15 em cima, e o
   que aparece é 15, não 20. Num grid com `gap` as margens não colapsam e toda
   lista desceria 5px. Medido item a item: "Tipo do Imóvel" em y=766, o
   primeiro "Apto" em 805 (766 + 23,4 de título + 15).

   A caixa herda Arial 16/1,8 na tinta #5c727d: é o texto corrido de lá, e é
   dele que saem as alturas de linha dos rótulos e do "Valores:".
   --------------------------------------------------------------------------- */
.busca-lateral {
    min-width: 0;
}

/* SEM TETO, SEM ROLAGEM POR DENTRO E SEM STICKY: lá a caixa é `static` e rola
   junto com a página (pedido do Sami, que mostrou a barra de rolagem que havia
   aqui). */
.busca-lateral__caixa {
    padding: 35px 30px 40px 35px;
    border: 2px solid #ededed;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--cor-texto);
}

/* AS TRÊS PEÇAS QUE SÓ EXISTEM NO CELULAR (ver o @media do fim do arquivo):
   o título do cartão, o gatilho que abre cada bloco e o botão "Buscar". No
   desktop nenhuma aparece — lá a coluna é a da referência, com tudo à vista e
   cada filtro aplicando sozinho. */
.busca-titulo--cartao,
.busca-bloco__gatilho,
.busca-buscar {
    display: none;
}

.busca-lateral__campos {
    display: block;
}

/* TÍTULO DE CADA BLOCO — `.ltn__widget-title`: 18px/600 Poppins, linha 23,4,
   5 embaixo. O `capitalize` é de lá, por isso "Tipo Do Imóvel" na tela. */
.busca-titulo {
    margin: 0 0 5px;
    font-family: var(--fonte-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: capitalize;
    color: var(--cor-escura);
}

/* "Cidade" e "Bairro" são `mt-3`: 16 acima, sem fio separando. */
.busca-titulo--afastado {
    margin-top: 16px;
}

/* FIO ENTRE BLOCOS — o <hr> do Bootstrap 5 com o `.widget hr` de lá: 30 acima e
   30 abaixo, 1px #e1e6ff com opacidade .25 (quase branco). Altura 1 CONTANDO a
   borda: é a borda que aparece, o fundo não tem onde pintar. */
.busca-fio {
    height: 1px;
    margin: 30px 0;
    border: 0;
    border-top: 1px solid #e1e6ff;
    background: none;
    opacity: .25;
}

/* --- Código do imóvel ------------------------------------------------------
   MEDIDO: campo de 245,6x50 (80%) e botão de 55,25x49,8 (18%) lado a lado, com
   o espaço de uma letra entre os dois. A linha mede 60,3.

   ⚠ A CASCA É A `.row` DE LÁ: 15 para fora de cada lado e 12 de respiro — por
   isso o campo começa 3px à esquerda do título e o conjunto soma 307.

   ⚠ OS DOIS SÃO `inline-block` NA LINHA DE BASE, e isso decide a altura: o
   campo tem 10 de margem embaixo e o botão pendura a lupa com 14,8 em cima e
   15 embaixo (`.submit-styled-button i`). Ver a nota da lupa abaixo. */
.busca-codigo {
    margin: 0 -15px;
    padding: 0 12px;
}

.busca-codigo input {
    display: inline-block;
    width: 80%;
    height: 50px;
    margin: 0 0 10px;
    padding: 1px 40px 1px 11px;
    border: 1px solid #000;
    border-radius: 0;
    background: #fff;
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #000;
    vertical-align: baseline;
    box-shadow: none;
}

/* Placeholder preto e menor que o texto (14 contra 16), como lá. */
.busca-codigo input::placeholder {
    font-size: 14px;
    color: #000;
    opacity: 1;
}

/* FOCO SEM TROCA DE BORDA: lá a borda preta é `!important` e vence o
   `input:focus` do tema. */
.busca-codigo input:focus,
.busca-codigo input:focus-visible {
    border-color: #000;
    outline: none;
    box-shadow: none;
}

.busca-codigo__botao {
    display: inline-block;
    width: 18%;
    margin: 0;
    padding: 1px 6px;
    border: 1px solid #000;
    border-radius: 0;
    background: var(--cor-primaria-clara);
    font-size: 16px;
    line-height: 1.8;
    color: #fff;
    text-align: center;
    vertical-align: baseline;
    cursor: pointer;
    transition: all .3s ease 0s;
}

/* A LUPA NO LUGAR DO GLIFO: 16x16 com 14,8 acima e 15 abaixo.
   O `vertical-align: -17px` reproduz a linha de base do `<i>` de lá. Numa
   fonte de ícone a base fica 14px abaixo do topo do glifo; num SVG ela é a
   borda de BAIXO da margem. Descendo 17 (15 de margem + 2), a base do botão cai
   no mesmo ponto — e é ela que alinha o botão com o campo na linha. */
.busca-codigo__botao svg {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 14.8px 0 15px;
    vertical-align: -17px;
}

/* --- Cidade e bairro (o `selectpicker` de lá) ------------------------------
   MEDIDO: 307x60, 3px para fora da coluna de cada lado, borda 1px PRETA, sem
   raio e sem seta. Texto 16/24 Poppins preto, cortado seco (sem reticências). */
.busca-lateral .campo--porto {
    display: block;
    margin: 0 -3px;
}

.busca-lateral .campo--porto .dropdown__gatilho {
    height: 60px;
    padding: 17px 15px;
    border: 1px solid #000;
    border-radius: 0;
    background: #fff;
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

.busca-lateral .campo--porto .dropdown__texto,
.busca-lateral .campo--porto .dropdown__texto--vazio {
    color: #000;
    text-overflow: clip;
}

.busca-lateral .campo--porto .dropdown__seta {
    display: none;
}

.busca-lateral .campo--porto .dropdown__gatilho:focus {
    outline: none;
    box-shadow: none;
}

.busca-lateral .campo--porto .dropdown__gatilho:focus-visible {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

/* ESCOLHA ÚNICA (cidade): a opção escolhida é a `.dropdown-item.active` do
   Bootstrap — fundo azul #0d6efd e texto branco, sem ✔. O ✔ da pele comum
   continua valendo para o bairro, que é multi-escolha. */
.busca-lateral .campo--porto [data-dropdown] .dropdown__opcao[aria-selected="true"],
.busca-lateral .campo--porto [data-dropdown] .dropdown__opcao[aria-selected="true"]:hover,
.busca-lateral .campo--porto [data-dropdown] .dropdown__opcao[aria-selected="true"].dropdown__opcao--ativa {
    background: #0d6efd;
    color: #fff;
}

.busca-lateral .campo--porto [data-dropdown] .dropdown__opcao[aria-selected="true"]::after {
    display: none;
}

/* --- Listas de caixas (tipo, mobília, área, quartos, vagas) ----------------
   `.checkbox-item` de lá: item de 14px/500 com 15 em cima, caixa de 16x16 com
   borda 1px #93959e e 30 de recuo para o texto. No hover a caixa inteira pinta
   de azul; marcada, pinta e ganha o visto branco de 5x10 girado. */
.busca-checks {
    margin: 0;
    padding: 0;
}

.busca-checks li {
    display: block;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
}

.checkbox-item {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-left: 30px;
    cursor: pointer;
    user-select: none;
}

.checkbox-item input {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.checkbox-item .checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #93959e;
    background: #fff;
}

.checkbox-item:hover input ~ .checkmark {
    background: var(--cor-primaria);
}

.checkbox-item input:checked ~ .checkmark {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria);
}

.checkbox-item .checkmark::after {
    content: "";
    position: absolute;
    top: 0;
    left: 4px;
    display: none;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}

.checkbox-item input:checked ~ .checkmark::after {
    display: block;
}

/* Lá o campo some e o teclado fica sem sinal nenhum. Aqui a caixa ganha o
   contorno só no foco de TECLADO — clique de mouse não mostra nada. */
.checkbox-item input:focus-visible ~ .checkmark {
    outline: 2px solid var(--cor-escura);
    outline-offset: 2px;
}

/* --- Filtro de valores (o `#sliderRange` do jQuery UI) ---------------------
   MEDIDO: trilho de 3px com 98% da coluna, PRETO, raio 5; trecho escolhido e
   alças de 12x12 no azul. A alça começa NO valor (sem o recuo de meia alça do
   jQuery UI), então a do máximo passa 12px do fim do trilho — lá também. */
.busca-valores__caixa {
    padding-bottom: 13px;
}

.busca-valores__rotulo {
    display: inline-block;
}

.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;
}

.busca-valores__texto {
    margin-top: 16px;
}

/* --- Compartilhar ------------------------------------------------------------
   `.ltn__social-media-2`: quadrados de 40 no cinza #f2f6f7, 10 de margem mais o
   espaço de uma letra entre eles, 16 acima. Hover: azul com ícone branco. */
.busca-social {
    margin: 0;
    padding: 0;
}

.busca-social li {
    display: inline-block;
    margin: 16px 10px 0 0;
}

.busca-social li:last-child {
    margin-right: 0;
}

.busca-social a,
.busca-social button {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--cor-fundo-band);
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 40px;
    color: var(--cor-texto);
    text-align: center;
    cursor: pointer;
    transition: all .3s ease 0s;
}

.busca-social li:hover a,
.busca-social li:hover button {
    background: var(--cor-primaria);
    color: #fff;
}

/* 16 de altura e largura do próprio glifo (10 no Facebook, 16 no X...), como a
   fonte de ícone desenha. O -2px põe a base do SVG onde fica a do glifo. */
.busca-social svg {
    display: inline-block;
    width: auto;
    height: 16px;
    margin: 0 2px;
    vertical-align: -2px;
}

/* --- Reiniciar busca ---------------------------------------------------------
   `.btn.theme-btn-1.btn-effect-1`: 17/40 de respiro, 16/24 Poppins em
   MAIÚSCULAS, azul. No hover ele fica PRETO com o texto em #071c1f.

   ⚠ SEM A VARREDURA BRANCA (`.botao-varredura`) QUE O RESTO DO SITE USA, e isso
   é medido, não esquecimento: lá a faixa existe no CSS (`.btn-effect-1::after`,
   branca, 100% no hover) mas NÃO APARECE — o `z-index: -1` dela contra o
   `z-index: 1` do botão deixa a faixa atrás do fundo preto. Fotografado com o
   :hover forçado nos dois sites em 2026-09-14: lá sai um retângulo preto com o
   texto escuro por cima; com a varredura ligada, o nosso saía branco. */
.busca-reiniciar {
    margin-top: 30px;
    text-align: center;
}

.busca-reiniciar__botao {
    display: inline-block;
    margin: 0;
    padding: 17px 40px;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--cor-primaria);
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #fff;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: pointer;
    transition: all .3s ease 0s;
}

.busca-reiniciar__botao:hover {
    background: #000;
    color: var(--cor-escura);
}

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

/* `.ltn__shop-options`: 770x50 com 50 embaixo. Só o "ordenar" mora aqui — o
   contador foi para a migalha. */
.listagem__barra {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 50px;
    margin: 0 0 50px;
}

/* --- Ordenar: o `nice-select` de lá ------------------------------------------
   MEDIDO: 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. */
.listagem__barra .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 -----------------------------------------------------------------
   `col-xl-6 col-sm-6 col-12`: DUAS colunas de 1200 até 576 e uma abaixo. Os 30
   do meio são o respiro das colunas. ENTRE LINHAS NÃO HÁ GAP: é a margem de 50
   do card, e o card NÃO ESTICA até a altura do vizinho (`align-items: start`)
   — lá a coluna estica, mas o card dentro dela não. */
.listagem__resultados .grid-imoveis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 30px;
    align-items: start;
    padding: 0;
}

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

/* MEDIDO: abaixo de 1200 a caixa perde respiro dos lados (20 no lugar de 30 e
   35); em cima e embaixo continua 35/40. */
@media (max-width: 1199.98px) {
    .busca-lateral__caixa {
        padding-right: 20px;
        padding-left: 20px;
    }
}

/* ---------------------------------------------------------------------------
   O CARD — `ltn__product-item-4 ltn__product-item-5` DA PORTO
   MEDIDO (370 de largura): borda 1px #f1f8ff, sombra 0 5px 20px da cor da
   marca a 10%, foto de 368x260 ESTICADA (`object-fit: fill`, de propósito lá),
   corpo com 30/30/1 de respiro e rodapé com fio #e5eaee.

   ⚠ AS DISTÂNCIAS DO CORPO TAMBÉM SAEM DE COLAPSO DE MARGENS e de linha de
   base: o título tem 15 embaixo e a localização 16 em cima (dá 16); os
   atributos são `inline-block` com 16 em cima numa linha de 28,8, quebrados por
   um <br> antes do condomínio. Por isso a marcação é a de lá, com os espaços
   entre os itens — mexer nela muda as alturas.
   --------------------------------------------------------------------------- */
.card-locacao {
    position: relative;
    margin-bottom: 50px;
    border: 1px solid #f1f8ff;
    background: #fff;
    box-shadow: 0 5px 20px 0 rgba(23, 44, 82, .1);
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--cor-texto);
}

.card-locacao__foto {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 260px;
    overflow: hidden;
}

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

/* No hover a foto cresce 10% em meio segundo, presa na moldura. */
.card-locacao__foto img {
    position: relative;
    display: inline;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: all .5s ease 0s;
}

.card-locacao:hover .card-locacao__foto img {
    transform: scale(1.1);
}

/* IMÓVEL SEM FOTO: hoje a carteira não tem nenhum, mas o bloco é montado pelo
   PHP e pelo JS (e o site.js troca uma foto quebrada por ele), então precisa ter
   desenho — senão sairia ícone e texto soltos sobre o branco. Ocupa a mesma
   moldura de 368x260 da foto. */
.card-locacao__foto .sem-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    background: var(--cor-fundo-band);
    color: var(--cor-texto);
}

.card-locacao__foto .sem-foto__icone {
    width: 40px;
    height: 40px;
}

.card-locacao__foto .sem-foto__texto {
    font-size: 14px;
}

.card-locacao__info {
    padding: 30px 30px 1px;
}

/* "LOCAÇÃO | CÓD. IMÓVEL 250": 16px/600 azul, linha de 25 dentro da de 28,8. */
.card-locacao__selo {
    margin-bottom: 15px;
}

.card-locacao__selo span {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    color: var(--cor-primaria);
    text-transform: uppercase;
}

.card-locacao__titulo {
    margin: 0 0 15px;
    font-family: var(--fonte-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--cor-escura);
    text-transform: uppercase;
    text-wrap: wrap;
}

.card-locacao a {
    transition: all .3s ease 0s;
}

.card-locacao__titulo a {
    color: inherit;
}

.card-locacao__titulo a:hover,
.card-locacao__local a:hover {
    color: var(--cor-primaria);
}

.card-locacao__local {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.8;
}

.card-locacao__local a {
    color: var(--cor-texto);
}

/* O `flaticon-pin` de lá: 14px na cor da marca, 2 de respiro à direita.
   SEM `vertical-align`: essa fonte declara descida ZERO (asc=300 de 300 no
   flaticon.ttf dela), então o desenho já nasce inteiro acima da linha de base —
   é onde o glifo fica. Os do Font Awesome, que têm descida, pedem os -2px. */
.card-locacao__pino {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 2px;
    color: var(--cor-primaria);
}

.card-locacao__atributos {
    margin: 0 0 20px;
    padding: 0;
}

.card-locacao__atributos li {
    display: inline-block;
    margin: 16px 10px 0 0;
    font-size: 14px;
    line-height: 1.8;
}

.card-locacao__atributos li:last-child {
    margin-right: 0;
}

.card-locacao__atributos span {
    font-weight: 500;
}

.card-locacao__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px 15px;
    border-top: 1px solid #e5eaee;
}

.card-locacao__preco {
    margin-bottom: 5px;
    font-family: var(--fonte-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--cor-primaria);
}

@media (max-width: 991px) {
    /* `body { font-size: 14px }` da responsive.css de lá: o card inteiro
       encolhe, e com ele a linha dos atributos (25,2 no lugar de 28,8) — são os
       6px que sobravam na altura do card em toda tela abaixo de 992. */
    .card-locacao {
        font-size: 14px;
    }

    .card-locacao__info {
        padding: 30px 20px 1px;
    }

    .card-locacao__titulo {
        font-size: 20px;
    }

    .card-locacao__rodape {
        flex-flow: wrap-reverse;
        padding: 20px;
    }
}

@media (max-width: 767px) {
    .card-locacao__titulo {
        font-size: 18px;
    }

    /* MEDIDO: abaixo de 768 o respiro das colunas cai de 15 para 8 de cada lado
       (a fileira de lá passa a ter margem -8), então o vão entre os dois cards
       vira 16 e cada um ganha 7px. */
    .listagem__resultados .grid-imoveis {
        column-gap: 16px;
    }
}

/* 576 CRAVADO (não 575,98): é o ponto da referência, e nela o selo do card
   passa a ter linha de 20 em vez de 25 — com a mesma letra de 16px, porque o
   `font-size: 12px` da regra de lá perde para o do `ltn__product-item-5`. */
@media (max-width: 576px) {
    .card-locacao__selo span {
        line-height: 20px;
    }
}

/* ---------------------------------------------------------------------------
   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. */

/* ===========================================================================
   O CELULAR E O TABLET — como na referência
   ---------------------------------------------------------------------------
   MEDIDO no ar em 2026-09-14, largura por largura:

     ≥ 992 ......... coluna ao lado dos cards (um terço)
     760 a 991 ..... a MESMA coluna, inteira, EMPILHADA acima dos cards e com a
                     largura toda; 100px acima dela e nada entre ela e os
                     resultados
     ≤ 759 ......... a coluna vira o cartão "Filtre sua busca": sem títulos,
                     cada filtro numa caixa fechada de 60px, e um botão
                     "Buscar" no pé

   OS DOIS PONTOS DE CORTE SÃO OS DELA, e estão no style.css dela:
       @media screen and (min-width: 760px) { .d-lg-block { display: block } }
       @media only screen and (max-width: 600px) { .d-xs-block { display: block } }
   ou seja: a coluna aparece de 760 para cima e o cartão só de 600 para baixo.

   ⚠ ENTRE 601 E 759 A REFERÊNCIA NÃO MOSTRA BUSCA NENHUMA — as duas versões
   dela ficam escondidas ao mesmo tempo e o visitante não tem como filtrar.
   Aqui o cartão começa em 759, tapando o buraco (decisão do Sami em
   2026-09-14).

   ⚠ E O CARTÃO LEVA TODOS OS FILTROS, não os seis de lá: Mobília, Área
   Privativa e o Filtro de Valores entram junto (mesma decisão) — quem está no
   celular filtra igual a quem está no computador.

   ⚠ AQUI MORAVAM A GAVETA LATERAL E A BARRA FIXA ("Filtrar"/"Buscar"), que
   vieram da base da Inova. Saíram inteiras: a referência não tem gaveta.
   =========================================================================== */
@media (max-width: 991px) {
    /* UMA COLUNA SÓ, e SEM vão entre a busca e os resultados: lá a coluna
       termina e a barra do "ordenar" começa no pixel seguinte. */
    .listagem__grade {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    /* O `mt-100` da coluna de lá. */
    .busca-lateral {
        margin-top: 100px;
    }

    /* O TEXTO HERDADO CAI PARA 14 — é o `body { font-size: 14px }` da
       responsive.css dela, o mesmo que encolhe o card. Quem sente na coluna é
       o "Valores:" e o texto da régua, que valem 7px na altura do bloco. */
    .busca-lateral__caixa {
        font-size: 14px;
    }

    /* MEDIDO: abaixo de 992 o respiro do botão cai de 17/40 para 12/25 (as
       regras de `.btn` da responsive.css dela), e ele fecha 184x50. */
    .busca-reiniciar__botao {
        padding: 12px 25px;
    }
}

@media (max-width: 759.98px) {
    /* ⚠ O CARTÃO DO CELULAR TEM MENOS FILTROS QUE O DESKTOP — é o que o site no
       ar faz. Lá o "Filtre sua busca" traz só Código, Cidade, Bairro, Tipo,
       Quartos e Vagas; Mobília, Área Privativa e Filtro de Valores não entram
       (conferido a 390 no cartão dela). No desktop os três continuam. */
    .busca-bloco--so-desktop {
        display: none;
    }

    /* --- O cartão "Filtre sua busca" -------------------------------------- */
    /* Título do cartão: 18/600 como os outros, com os 5px de recuo do `ml-2`
       de lá. Os títulos de cada filtro SOMEM — o nome passa a ser o texto da
       caixa fechada, como nos `selectpicker` dela. */
    .busca-titulo--cartao {
        display: block;
        margin: 0 0 5px 5px;
    }

    .busca-lateral .busca-titulo:not(.busca-titulo--cartao) {
        display: none;
    }

    /* Fio, compartilhar e a lupa do código não existem no cartão dela. */
    .busca-fio,
    .busca-social,
    .busca-codigo__botao {
        display: none;
    }

    /* CADA CAMPO OCUPA A LARGURA TODA, com 10 entre um e outro. O recuo de 4px
       é o que sobra da fileira de lá (respiro 12 numa fileira de -8). */
    .busca-codigo,
    .busca-lateral .campo--porto,
    .busca-bloco {
        margin: 0 -8px 10px;
        padding: 0 12px;
    }

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

    .busca-codigo input {
        width: 100%;
        margin-bottom: 0;
        padding: 1px 40px 1px 20px;
        border-radius: 12px;
    }

    .busca-lateral .campo--porto .dropdown__gatilho {
        border-radius: 12px;
    }

    /* 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-lateral .campo--porto .dropdown__texto--vazio[data-rotulo-mobile] {
        font-size: 0;
    }

    .busca-lateral .campo--porto .dropdown__texto--vazio[data-rotulo-mobile]::after {
        content: attr(data-rotulo-mobile);
        font-size: 16px;
    }

    /* --- A caixa fechada de cada filtro ----------------------------------- */
    /* Mesma medida dos `selectpicker` de lá: 60 de altura, borda 1px preta,
       raio 12 e o nome do filtro em 14px. Com opção marcada, o texto vira a
       lista delas. */
    .busca-bloco__gatilho {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        padding: 17px 15px;
        border: 1px solid #000;
        border-radius: 12px;
        background: #fff;
        font-family: var(--fonte-display);
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #000;
        text-align: left;
        cursor: pointer;
    }

    .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;
    }

    /* --- Os dois botões do pé -------------------------------------------- */
    /* MEDIDO: "Buscar" 47 de altura (respiro 12/30) **40px** abaixo do último
       campo, e "Reiniciar busca" 43 (respiro 10/20) outros 30 abaixo. Os dois
       ocupam a largura inteira do cartão.

       ⚠ 40, e não 30: lá o respiro do último campo (10) SOMA com o do botão
       (30), porque a marcação dela separa os dois. Aqui os dois são irmãos e as
       margens COLAPSAM — 30 com 10 dá 30, e a caixa fechava 10 mais curta. */
    .busca-buscar {
        display: block;
        margin-top: 40px;
    }

    .busca-buscar__botao {
        width: 100%;
        padding: 12px 30px;
        border: 1px solid transparent;
        border-radius: 0;
        background: var(--cor-primaria);
        font-family: var(--fonte-display);
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        color: #fff;
        text-transform: uppercase;
        cursor: pointer;
        transition: all .3s ease 0s;
    }

    .busca-buscar__botao:hover {
        background: #000;
        color: var(--cor-escura);
    }

    .busca-reiniciar {
        margin-top: 30px;
    }

    .busca-reiniciar__botao {
        width: 100%;
    }

}

@media (max-width: 767px) {
    /* O BOTÃO ENCOLHE OUTRA VEZ: 10/20 de respiro em 14px, fechando 43 de
       altura (é o `.btn` da responsive.css dela abaixo de 768). Vale também na
       faixa 760–767, onde a coluna ainda aparece empilhada. */
    .busca-reiniciar__botao {
        padding: 10px 20px;
        font-size: 14px;
        line-height: 21px;
    }

    /* MEDIDO: abaixo de 768 a barra do "ordenar" alinha pelo topo e cada peça
       ganha 5px de respiro em cima e embaixo. */
    .listagem__barra {
        align-items: flex-start;
    }

    .listagem__barra > * {
        margin-block: 5px;
    }
}