/* ===========================================================================
   HOME — pages/home.php
   ---------------------------------------------------------------------------
   Cada bloco traz no comentário a medida de origem e a data: é o que permite
   conferir depois sem reabrir o navegador, e é o que evita que um turno futuro
   "arredonde" um valor deliberado.

   TUDO O QUE RESTA AQUI JÁ FOI MEDIDO NO SITE DA PORTO
   (www.portoimoveisrs.com.br, 2026-09-10 e 11). Não sobrou bloco da INOVA
   nesta folha — as duas seções que ainda eram de lá saíram em 2026-09-10.

   Quem mexer aqui, conferir a data no comentário do bloco antes de confiar na
   medida.

   ÍNDICE
     1. Faixa de busca ...... a foto do skyline com a régua por cima  [PORTO]
     2. Destaques ........... a vitrine de imóveis em carrossel       [PORTO]
     3. Faixa de banners .... o carrossel de três slides, em mescla   [PORTO]
     4. Como vamos ajudar você? .. os seis cartões com ícone          [PORTO]
     5. Escolha o tipo ...... os cinco ladrilhos com foto             [PORTO]
     6. Responsivo dos destaques                                      [PORTO]

   ⚠ SAÍRAM DAQUI (2026-09-10, a pedido do Sami) as duas seções que restavam da
   INOVA e que a home da Porto não tem: a FAIXA DE CHAMADA COM FOTO ("Anuncie
   Conosco!" / "Administre com a gente!") e a de NOSSOS SERVIÇOS (fundo cinza,
   cartões com ilustração no hover). O partial `cta-faixa.php` e as sete
   imagens que só elas usavam foram apagados junto.

   O componente de card de imóvel e o de carrossel são compartilhados e moram
   em style.css — aqui só entra o que é exclusivo da home.
   =========================================================================== */

/* ===========================================================================
   1. FAIXA DE BUSCA (no lugar do hero)
   ---------------------------------------------------------------------------
   ⚠ A HOME DA PORTO NÃO TEM BANNER NO TOPO. Onde os sites irmãos põem o hero
   com o slide do painel, aqui vem uma FAIXA com a foto do skyline de Porto
   Alegre ao fundo e a régua de busca por cima. O carrossel de três slides que
   a referência tem fica NO MEIO da página (y=1199 de 4552, entre a vitrine de
   destaques e os cards por tipo), não no topo.

   MEDIDO no site no ar (2026-09-10, viewport 1440):

     .bg-busca ......... 1425x168, logo abaixo do cabeçalho; a foto entra por
                         `background-image` com `background-size: contain`
                         (2200x573 — em 1440 ela não cobre a faixa toda, e é
                         assim que está no ar)
     form .............. 1200x63, flex, centrado nos dois eixos, margem
                         70px em cima e 35 embaixo, padding 0 12px
     "Busca Avançada" .. 264x57 · bg #11509d · 14px/400 Poppins MAIÚSCULO ·
                         padding 17px 40px
     3 campos .......... 166 a 181 de largura x 60 · fundo #f8f9fa ·
                         borda 1px da mesma cor · padding 17px 15px ·
                         texto 16px/400 Poppins #000 · 15px entre eles
     "Alugar" .......... 166x57 · mesmas medidas do primeiro botão

   ABAIXO DE 1200 a régua encolhe; em 768 os itens passam a DOIS por linha
   (`col-md-6` lá) e o primeiro botão fica sozinho e centrado; abaixo de 768
   tudo empilha em largura cheia e a foto troca pela versão vertical
   (442x574).
   =========================================================================== */
.busca-faixa {
    /* CONTÉM A MARGEM DO FORM. O form tem `margin: 70px -15px 35px` (medido), e
       num bloco comum essas margens ESCAPAM para fora da faixa — ela fechava
       81px em vez de 168 e a foto ficava com um filete de altura. Na referência
       quem segura é o `.row` do Bootstrap, que é flex; aqui `flow-root` faz o
       mesmo sem mexer no arranjo. */
    display: flow-root;

    /* ⚠ A FOTO LADRILHA, não estica. MEDIDO na referência:
       `background-size: contain` + `background-position: 0% 0%` +
       `background-repeat: repeat` (o padrão, que ela nunca desliga).

       A imagem é 2200x573 e a faixa tem 168 de altura: com `contain` ela é
       reduzida para 645x168 — e aí o `repeat` a REPETE de lado a lado. Em 1440
       são 2,2 cópias do skyline emendadas. Parece uma foto só à primeira vista;
       olhando, os mesmos prédios aparecem duas vezes.

       Isso não é escolha nossa e não é bug de medição: é o que está no ar. Com
       `no-repeat` a foto sai como um retângulo de 645px no meio de uma faixa
       lisa, que foi o primeiro resultado aqui e não é o desenho de lá. */
    /* A FOTO vem do `style` da faixa (banner do painel, ou o nosso arquivo
       como reserva — ver $fundoBusca em pages/home.php). O `url()` daqui só
       vale se a variável faltar. */
    background-image: var(--busca-fundo, url('../img/home/busca-faixa.webp'));
    background-size: contain;
    background-position: 0 0;
    background-repeat: repeat;
}

/* ⚠ DOIS NEGATIVOS EM SEQUÊNCIA, e é o que a referência faz. Lá a régua está
   dentro de um `.row` do Bootstrap (`margin: 0 -15px`) e o próprio <form>
   também tem `margin: 70px -15px 35px`. Somados, empurram a régua 15px À
   ESQUERDA do centro do container — medido: o centro dela cai em 585 quando o
   do container é 600. Com um negativo só, os cinco itens saem 15px à direita
   do lugar. */
.busca-faixa__linha {
    margin: 0 -15px;
}

.busca-faixa__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* `width: 100%` NÃO É REDUNDANTE COM O NEGATIVO. Sem ela o form é um bloco
       de largura automática e as duas margens negativas o ALARGAM em 30px (o
       centro dele sai 15px à direita e os cinco itens vão junto). Com 100% ele
       mede o container e só DESLIZA 15px para a esquerda, que é o que a
       referência faz — lá isso vem do `.row` do Bootstrap, que já traz
       `width: 100%`. */
    width: 100%;
    /* MEDIDO: `margin: 70px -15px 35px` — os 70/35 dão os 168px da faixa. */
    margin: 70px -15px 35px;
    padding: 0 12px;
}

/* ⚠ O ESPAÇAMENTO DA RÉGUA É IRREGULAR — 15, 30, 45 e 45px entre um campo e o
   seguinte — e é assim NA TELA do site no ar. Não é desleixo de medição: cada
   item de lá é uma coluna do Bootstrap com padding próprio (`col-lg-3` no
   primeiro, `col-lg-2` nos outros) e ainda ganha `ml-0` ou `mcel-2` em alguns,
   o que zera ou dobra a margem em pontos diferentes. Medido item a item em
   1440, com o container em x=113:
 
       "Busca Avançada" .. 53 a 317   (264 de largura)
       Tipo .............. 332 a 513  (181 — é o mais largo dos três)
       Cidade ............ 543 a 709  (166)
       Bairros ........... 754 a 920  (166)
       "Alugar" .......... 965 a 1131 (166)
 
   Aqui cada item é a MESMA caixa externa da referência (294 ou 196 de largura,
   com o padding dela por dentro), e é isso que reproduz os quatro vãos
   diferentes sem cravar posição nenhuma. */
.busca-faixa__item {
    /* MEDIDO: 3px embaixo em todos — é o que faz o form fechar 63 e não 60. */
    margin-bottom: 3px;
}

/* AS LARGURAS SÃO PORCENTAGEM, não pixel — é o que as colunas do Bootstrap
   são na referência, e é por isso que os números batem em toda largura:

     ≥ 992 ..... 25% para o "Busca Avançada" (`col-lg-3`) e 16,667% para os
                 outros quatro (`col-lg-2`). Confere: em 1440 o form tem 1176
                 de conteúdo → 294 e 196; em 992 tem 936 → 234 e 156.
     768–991 ... 50% para todos (`col-md-6`)
     < 768 ..... 100% (`col-12`)

   ⚠ NÃO CRAVAR EM PIXEL: em 992 os itens ficariam largos demais e a régua
   estouraria a linha.

   1 — "Busca Avançada" (`col-lg-3` lá, com margem à esquerda) */
.busca-faixa__item--avancada {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 15px;
    margin-left: 15px;
}

/* 2, 3, 4 — os campos (`col-lg-2`). O PRIMEIRO não tem padding à esquerda
   (`ml-0` na referência), por isso ele sai 15px mais largo que os outros dois. */
.busca-faixa__item--campo {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
    padding: 0 15px;
}

/* O CAMPO "TIPO" NÃO TEM PADDING À ESQUERDA (`ml-0` na referência) — por isso
   ele sai 181 de largura contra os 166 dos outros dois. */
.busca-faixa__item--tipo {
    padding: 0 15px 0 0;
}

/* "Bairros" e "Alugar" ganham 15px de margem à esquerda (`mcel-2` lá).
   ⚠ NÃO USAR `:nth-of-type` AQUI: ele conta TODAS as divs irmãs, e a primeira é
   a do "Busca Avançada" — a regra caía no campo errado. */
.busca-faixa__item--bairros,
.busca-faixa__item--enviar {
    margin-left: 15px;
}

/* 5 — "Alugar" */
.busca-faixa__item--enviar {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
    padding: 0 15px;
}

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

/* MEDIDO: 14px/400 Poppins MAIÚSCULO, padding 17px 40px, sem raio. */
.busca-faixa__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 17px 40px;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
    font-family: var(--fonte-display);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    /* ⚠ 0,3s E COM A COR JUNTO. Medido na referência: o fundo e o texto trocam
       no MESMO tempo da varredura (`.botao-varredura`, style.css). Em 0,2s só
       do fundo, a cor do texto pulava de estalo no meio da animação. */
    transition: background-color .3s ease, color .3s ease;
}

/* ⚠ O HOVER NÃO É "azul mais escuro". MEDIDO na referência: uma faixa BRANCA
   varre o botão da esquerda para a direita em 0,3s, o texto vira #071c1f e o
   fundo por baixo troca para PRETO — é esse preto que aparece na metade direita
   enquanto a varredura corre. A mecânica está em `.botao-varredura`
   (style.css, bloco 3); aqui só as cores. */
.busca-faixa__botao:hover,
.busca-faixa__botao:focus-visible {
    background: #000;
    color: var(--cor-escura);
}

/* ---- Os três campos ---------------------------------------------------- */

/* O `.campo` do style.css desenha um RÓTULO EM CIMA do campo (11px, caixa
   alta) — é o que a listagem e os formulários usam. Na régua da referência não
   há rótulo nenhum: o nome do campo é o texto DENTRO dele ("Tipo", "Cidade",
   "Bairros"), que é o `placeholder` que passamos no partial.

   O rótulo continua no HTML, só sai da tela: `placeholder` não é rótulo para
   leitor de tela (some quando a pessoa escolhe algo), e o `aria-labelledby` do
   gatilho aponta para ele. Mesmas regras de `.visualmente-oculto`. */
.busca-faixa__form .campo {
    margin: 0;
}

.busca-faixa__form .campo > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.busca-faixa__form .dropdown__gatilho {
    /* MEDIDO: 60 de altura = 17+24+17 + a borda de 1px. */
    width: 100%;
    min-height: 60px;
    padding: 17px 15px;
    border: 1px solid var(--cor-fundo-suave);
    border-radius: 0;
    background: var(--cor-fundo-suave);
    font-family: var(--fonte-display);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
}

.busca-faixa__form .dropdown__texto {
    font-family: var(--fonte-display);
    font-size: 1rem;
    color: #000;
}

/* A SETA DA RÉGUA É UM TRIÂNGULO, não a "asa" (chevron) que o componente usa
   nas outras páginas. MEDIDO no `::after` do `.dropdown-toggle` da referência:
   8x4, cor #999, `position: absolute` com `right: 10px` e `top: 27,5px` — no
   meio vertical do campo de 60.

   O SVG do componente sai da tela e o triângulo é desenhado com borda, que é
   como a referência faz. Só aqui: na listagem e nos formulários a asa continua. */
.busca-faixa__form .dropdown__seta {
    display: none;
}

.busca-faixa__form .dropdown__gatilho {
    position: relative;
}

.busca-faixa__form .dropdown__gatilho::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 27.5px;
    width: 0;
    height: 0;
    border-top: 4px solid #999;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* ---- Larguras ---------------------------------------------------------- */

/* MEDIDO em 768 (viewport 753): os itens passam a METADE da linha
   (`col-md-6`), e o arranjo que sai disso é o da referência —

     linha 1 ... "Busca Avançada" sozinho e centrado
     linha 2 ... Tipo + Cidade lado a lado
     linha 3 ... Bairros sozinho
     linha 4 ... "Alugar" sozinho

   Isso NÃO É REGRA ESCRITA: cai por conta das margens. Os itens 1, 4 e 5 têm
   15px de margem à esquerda, então a caixa deles mede 363 numa linha de 696 —
   dois não cabem. O 2 e o 3 não têm margem (348 + 348 = 696 exatos) e ficam
   juntos. É o que está no ar. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .busca-faixa__item--avancada,
    .busca-faixa__item--campo,
    .busca-faixa__item--enviar {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* MEDIDO abaixo de 768: tudo em largura cheia, empilhado, e a foto troca pela
   versão vertical. O padding dos botões também encolhe. */
@media (max-width: 767.98px) {
    /* MEDIDO abaixo de 768: a referência troca a foto pela versão vertical
       (442x574) usando o atalho `background: url(...)`, que RESETA o
       `background-size` para `auto`. Ou seja: tamanho natural, ladrilhada a
       partir do canto superior esquerdo — não `cover`. Com `cover` o recorte
       sai outro e a foto aparece mais aproximada do que no ar. */
    .busca-faixa {
        background-image: var(--busca-fundo-mobile, url('../img/home/busca-faixa-mobile.webp'));
        background-size: auto;
    }

    .busca-faixa__item--avancada,
    .busca-faixa__item--campo,
    .busca-faixa__item--enviar {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Nesta largura TODOS ficam iguais — inclusive o "Tipo", que acima de 768 é
       o único sem padding à esquerda e sem margem (medido: os cinco em x=5 no
       390, todos com 351 de largura). */
    .busca-faixa__item--tipo {
        padding: 0 15px;
    }

    .busca-faixa__item--campo {
        margin-left: 15px;
    }

}

/* ⚠ OS DOIS BOTÕES DEIXAM DE SER IGUAIS ABAIXO DE 992, e é assim no ar.
   Medido nos dois, janela por janela:

                      "Busca Avançada"   "Alugar"
       1440 .......... 17px 40px          17px 40px   (iguais)
        768 .......... 12px 25px          15px 30px   → 47 e 53 de altura
        390 .......... 10px 20px          12px 30px   → 43 e 47

   É acidente do tema de origem (um é <a class="btn">, o outro é
   <button class="btn">, e as media queries dele não pegam os dois igual), mas
   são 6px de diferença de altura na tela. Sem isto a faixa fecha 14px a mais em
   768 e 10 a mais em 576.

   ⚠ E OS CORTES SÃO 992 E 768, não 768 e 576 — a media query mede a JANELA
   (com a barra de rolagem), não a área útil. Em janela de 768 a área é 753 e
   mesmo assim é a regra de `min-width: 768px` que vale. Já me custou uma
   medição: as duas alturas continuavam em 57 porque eu tinha posto isto no
   bloco de 767,98. */
@media (max-width: 991.98px) {
    .busca-faixa__botao {
        padding: 12px 25px;
    }

    .busca-faixa__item--enviar .busca-faixa__botao {
        padding: 15px 30px;
    }
}

@media (max-width: 767.98px) {
    .busca-faixa__botao {
        padding: 10px 20px;
    }

    .busca-faixa__item--enviar .busca-faixa__botao {
        padding: 12px 30px;
    }
}

/* ===========================================================================
   2. DESTAQUES (a vitrine de imóveis em carrossel)
   ---------------------------------------------------------------------------
   MEDIDO NO SITE NO AR DA PORTO (2026-09-10, viewport 1440), com os cinco
   imóveis em destaque:

     seção ....... respiro de 70px em cima e embaixo
     título ...... CENTRADO, 35px/500 Poppins #071c1f, linha 45,5; 15px de
                   margem embaixo dele e mais 50 no bloco que o embrulha
     slide ....... 400 de largura com respiro de 15 de cada lado → card de 370
     card ........ fundo #fff, borda 1px #f1f8ff, sombra
                   `0 5px 20px rgba(23,44,82,.1)`, 50 de margem embaixo
     foto ........ 368x260
     selo ........ 94x28 no canto, 15 do topo e 18 da direita, fundo #77c720,
                   13px/600 branco MAIÚSCULO, respiro 3px 15px 0
     faixa local . 56,2 no pé da foto, degradê até rgba(0,0,0,.8) em 70%,
                   respiro 0 30px 15px, texto 14px/400 branco
     miolo ....... respiro 30px 30px 1px
     preço ....... 18px/600 Poppins #11509d, 5 até o título
     título ...... 22px/600 Poppins #071c1f MAIÚSCULO, linha 28,6, 15 embaixo
     dados ....... item com valor em cima (14px/500) e rótulo embaixo
                   (14px/400) em #5c727d; 16 acima e 30 à direita de cada um
     bolinhas .... a da vez 15px VERDE (#a9ca3d), as outras 10px em #c0c0c0,
                   passo de 25; 30 de margem embaixo
     setas ....... 50x50, círculo branco com borda #e6ecf0, 15 para dentro das
                   laterais — INVISÍVEIS até o ponteiro entrar na seção

   ⚠ A FONTE DOS TEXTOS SECUNDÁRIOS É ARIAL, não a do corpo do nosso site.
   No legado o `--ltn__body-font` (Nunito Sans) só alcança alguns componentes;
   o resto herda o `body`, que é `Arial, sans-serif`. Medido: no card, só o
   preço e o título saem em Poppins — local, dados, selo e valores são Arial.
   Está replicado. (A pergunta maior — se o CORPO do site inteiro deveria ser
   Arial em vez de Nunito Sans — está no BRIEFING, para o Sami decidir.)

   ⚠ O QUE SAIU DAQUI: a vitrine da Inova (faixa de 40px, título 26px/700 em
   vermelho com subtítulo embaixo, 4 cards por vez, setas sempre visíveis nas
   laterais e sem bolinhas).
   =========================================================================== */
.destaques {
    padding: 70px 0;
}

.destaques__cabecalho {
    margin-bottom: 50px;
    text-align: center;
}

.destaques__titulo {
    margin: 0 0 15px;
    font-family: var(--fonte-display);
    font-size: 35px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

/* O PALCO É A RÉGUA DAS SETAS E DAS BOLINHAS: elas se posicionam contra ELE.

   MEDIDO: ele tem a largura CHEIA do container (1200), não os 1170 de dentro do
   respiro — na referência é um `.row` do Bootstrap, com `margin: 0 -15px`. Sem
   isso o slide sai 390 em vez de 400 e o card 360 em vez de 370. */
.destaques__palco {
    position: relative;
    margin: 0 -15px;
}

/* O COMPONENTE DE CARROSSEL (style.css) nasce com um respiro de 8px na janela
   (com margem negativa igual, para a sombra do card não ser cortada na rolagem)
   e um `gap` de 1rem entre os itens. Nenhum dos dois existe aqui: a separação
   entre os cards é o respiro de 15px do próprio slide, como na referência, e a
   sombra cabe dentro dele. Com os dois ligados a trilha estourava a linha e os
   cards saíam 10px mais estreitos. */
.destaques__palco .carrossel__janela {
    margin: 0;
    padding: 0;
}

.destaques__trilha {
    gap: 0;
}

/* ---- A trilha ---------------------------------------------------------- */

/* MEDIDO: o slide tem 400 e o card 370 — os 15px de cada lado são respiro do
   slide (a coluna do Bootstrap na referência), não `gap` da trilha. */
/* `flex` com `!important`? Não: o seletor com duas classes já vence o
   `.carrossel__item` do componente, que calcula a base descontando o `gap`. */
.destaques__item {
    flex: 0 0 33.3333%;
    padding: 0 15px;
    min-width: 0;
}

/* ---- Setas ------------------------------------------------------------- */

/* MEDIDO no site no ar (2026-09-10), com o ponteiro sobre o carrossel:

     caixa ....... 50x50, círculo branco, borda 1px #e6ecf0, SEM sombra
     ícone ....... 22x20, preto
     vertical .... `top: 50%` da faixa do carrossel + `translateY(-50%)` — o
                   centro fica na METADE DO CARD, não na da foto
     horizontal .. em repouso ficam a 15px POR DENTRO e invisíveis; ao passar
                   o ponteiro DESLIZAM PARA FORA (a `left` vai de 15 para -50)
                   e aparecem. É esse deslize que dá a sensação de que elas
                   "saem" das laterais.
     hover ....... fundo e borda #11509d, ícone branco

   ⚠ SÓ SAEM PARA FORA A PARTIR DE ~1350 DE JANELA. Medido: em 1350 a `left` é
   -50 e em 1340 continua 15 (aí elas aparecem por cima do primeiro e do último
   card). O corte exato está entre 1341 e 1349; 1350 é o valor confirmado.
   Faz sentido: abaixo disso não há folga entre o container de 1200 e a borda
   da janela para caber um botão de 50.

   ⚠ ABAIXO DE 992 ELAS NÃO APARECEM, nem com o ponteiro em cima (medido
   `opacity: 0` em 991, 850 e 800). Ali quem navega é o arrasto e as bolinhas. */
.destaques__seta {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid #e6ecf0;
    border-radius: 50%;
    background: var(--cor-branco);
    color: #000;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition: opacity .3s ease, visibility .3s ease, left .3s ease,
                right .3s ease, background-color .2s ease, color .2s ease,
                border-color .2s ease;
}

.destaques__seta--dir {
    left: auto;
    right: 15px;
}

.destaques__palco:hover .destaques__seta,
.destaques__seta:focus-visible {
    opacity: 1;
    visibility: visible;
}

/* MEDIDO: fundo e borda #11509d, ícone branco. */
.destaques__seta:hover {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
}

/* No fim da trilha o botão não leva a lugar nenhum — o site.js o desabilita. */
.destaques__seta[disabled] {
    opacity: .35;
    cursor: default;
}

.destaques__palco:hover .destaques__seta[disabled] {
    opacity: .35;
}

.destaques__seta[disabled]:hover {
    background: var(--cor-branco);
    border-color: #e6ecf0;
    color: #000;
}

/* MEDIDO: 22x20. O nosso traçado é quadrado, então 20x20 mantém a proporção
   e a mesma altura. */
.destaques__seta svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* O DESLIZE PARA FORA. Só onde cabe — ver a nota acima. */
@media (min-width: 1350px) {
    .destaques__palco:hover .destaques__seta--esq,
    .destaques__seta--esq:focus-visible {
        left: -50px;
    }

    .destaques__palco:hover .destaques__seta--dir,
    .destaques__seta--dir:focus-visible {
        right: -50px;
    }
}

/* ---- Bolinhas ---------------------------------------------------------- */

/* MEDIDO: caixa centrada com 30 de margem embaixo; a da vez tem 15px e é
   VERDE, as outras 10px cinza, com 25px de passo (10 de respiro + a largura).
   Elas ficam ALINHADAS PELO MEIO — a menor desce 2,5px em relação à maior. */
.destaques__bolinhas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* MEDIDO: as bolinhas vêm COLADAS na trilha (sem margem em cima) e têm 30
       de respiro até o fim da seção. Com 20px em cima a seção fechava 17px a
       mais que a referência. */
    margin: 0 0 30px;
    min-height: 16px;
}

.destaques__bolinha {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c0c0c0;
    cursor: pointer;
    transition: width .2s ease, height .2s ease, background-color .2s ease;
}

.destaques__bolinha.ativa {
    width: 15px;
    height: 15px;
    /* O VERDE É O DA MARCA NA LOGO, e é o mesmo do selo "Locação" (medido
       #a9ca3d na bolinha e #77c720 no selo — são dois verdes diferentes no ar,
       não um só). */
    background: #a9ca3d;
}

/* ---- O card ------------------------------------------------------------ */

.card-destaque {
    display: block;
    margin-bottom: 50px;
    border: 1px solid #f1f8ff;
    background: var(--cor-branco);
    box-shadow: 0 5px 20px rgba(23, 44, 82, .1);
}

.card-destaque__foto {
    position: relative;
    line-height: 0;
}

/* ⚠ ALTURA FIXA DE 260, e NÃO `aspect-ratio`. Medido na referência em 1440,
   992, 768, 576 e 390: a foto tem 260px de altura em TODAS — ela recorta mais
   quando o card estreita, não encolhe.

   A primeira versão daqui usava `aspect-ratio: 368/260`, que parece mais
   moderno e é o que os outros sites da casa fazem. O efeito colateral apareceu
   na medida: em 992 a foto caía para 203 e o card inteiro fechava 60px mais
   baixo que o de lá — a seção acumulava a diferença nos cinco cards.

   `object-fit: cover` mantém o enquadramento no centro, sem esticar. */
.card-destaque__foto img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.card-destaque__selo {
    position: absolute;
    top: 15px;
    right: 18px;
    padding: 3px 15px 0;
    background: #77c720;
    color: var(--cor-branco);
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 25px;
    text-transform: uppercase;
}

/* A FAIXA DO LOCAL, colada no pé da foto. O degradê começa transparente e
   fecha em rgba(0,0,0,.8) aos 70% — medido. */
/* MEDIDO: a faixa tem 56,2 de altura e começa 16px ACIMA do texto — na
   referência esse respiro é `margin-top: 16px` no <li> de dentro, e o degradê
   cresce junto. Sem ele a faixa fecha 40,2 e o escurecido sobre a foto fica
   visivelmente mais fino que o de lá. */
.card-destaque__local {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 16px 30px 15px;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 70%);
}

.card-destaque__local a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--cor-branco);
    text-decoration: none;
    /* ⚠ A CAIXA ALTA É NOSSA, o texto de lá já vem assim do ERP: a API que este
       site usa normaliza cidade e bairro para "Porto Alegre". Mesmo resultado
       na tela. */
    text-transform: uppercase;
}

/* MEDIDO: o glifo de lá é 14x16 dentro de uma caixa de 18 (2px de respiro de
   cada lado), e entre ele e o texto ainda há o ESPAÇO LITERAL do HTML — ~22,5px
   até a primeira letra. O nosso ícone tem o viewBox 3:4, então 14x16 é a
   proporção dele; os 8,5 de gap fecham a conta. */
/* 14x14, e não 14x16: o glifo é quadrado (em de 300), e esticar a altura
   deformava o pino. */
.card-destaque__pino {
    width: 14px;
    height: 14px;
    flex: none;
    fill: currentColor;
}

/* 4px: lá o que separa é a CAIXA do glifo (18 de avanço para 14 de desenho)
   mais o espaço do HTML; com 8,5 o texto começava 4,5 adiante. */
.card-destaque__local a {
    gap: 4px;
}

/* ⚠ O MIOLO HERDA 16px/28,8 EM ARIAL, e não os 14px/21 em Nunito Sans do
   corpo do nosso site. Não é enfeite: é esse contexto que decide a altura das
   linhas onde os itens de dados são `inline-block`, e é dele que saem os
   respiros de 1,6px que fazem o card de lá fechar 554,5. Os itens em si são
   14px — a regra está mais abaixo. Ver a nota sobre Arial no cabeçalho da
   seção. */
.card-destaque__info {
    padding: 30px 30px 1px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

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

.card-destaque__titulo {
    margin: 0 0 15px;
    font-family: var(--fonte-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
}

.card-destaque__titulo a {
    color: var(--cor-escura);
    text-decoration: none;
}

.card-destaque__titulo a:hover {
    color: var(--cor-primaria);
}

/* ---- Os dois blocos de dados ------------------------------------------- */

/* MEDIDO: cada item é `inline-block` com `margin: 16px 30px 0 0` — o respiro de
   cima é do ITEM, não da lista, e por isso a primeira linha também o tem. */
/* A LISTA NÃO MUDA A FONTE — ela fica com os 16px/28,8 herdados do miolo, como
   na referência. Quem é 14px é o ITEM (regra abaixo). Trocar o tamanho aqui
   parece inofensivo e não é: encolhe a linha da lista e come os 1,6px de
   respiro que separam as duas fileiras. */
.card-destaque__dados,
.card-destaque__valores {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--cor-texto);
}

/* ⚠ OS 16px VÃO DEPOIS DA SEGUNDA FILEIRA, NÃO ENTRE AS DUAS.

   Na referência os dois blocos são UMA lista só, com um `<br>` solto no meio
   (marcação inválida — só <li> pode ser filho de <ul>), e o `margin-bottom: 16`
   é da lista inteira: ou seja, o respiro fica no PÉ DO CARD. As duas fileiras
   ficam separadas apenas pelo `margin-top: 16` do próprio item.

   Aqui são duas listas. Pondo os 16 na primeira, o card fechava a mesma altura
   mas a fileira "Condomínio / IPTU" descia 16px e o pé do card ficava com 2px
   de respiro em vez de 18 — foi exatamente o que o Sami apontou comparando os
   dois lado a lado. Com o respiro na SEGUNDA lista, as duas fileiras e o pé
   caem no lugar de lá. */
.card-destaque__valores {
    margin-bottom: 16px;
}

.card-destaque__dados li,
.card-destaque__valores li {
    position: relative;      /* âncora do fio, logo abaixo */
    display: inline-block;
    margin: 16px 30px 0 0;
    /* ⚠ SEM `vertical-align: top`, de propósito. Com o alinhamento pela BASE
       (o padrão, que é o da referência) a linha da lista ganha o respiro do
       descendente da fonte — 1,6px abaixo do item — e é ele que separa as duas
       fileiras e fecha a altura do card. Com `top` esse respiro some e o card
       encurta. Os itens de uma fileira têm todos a mesma altura, então a base
       os alinha igual. */
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}

/* ⚠ SÓ O ÚLTIMO ITEM DA SEGUNDA FILEIRA PERDE A MARGEM.

   Na referência as duas fileiras são UMA lista, e o `:last-child` alcança
   apenas o último item de todos — o "Área Privativa", que fecha a primeira
   fileira, CONTINUA com os 30px à direita.

   Isso não é detalhe: num card de 330 (janela de 768) o miolo tem 290 de
   largura útil, e a fileira com três dados mede 51+30 + 64+30 + 88+30 = 293.
   Com a margem, ela QUEBRA EM DUAS LINHAS e o card cresce 67px — é o que se vê
   no site no ar. Tirando a margem do último item de cada lista, como estava
   aqui, a conta cai para 263, tudo cabe numa linha e aquele card ficava 40px
   mais baixo que o de lá. */
.card-destaque__valores li:last-child {
    margin-right: 0;
}

/* O FIO VERTICAL ENTRE OS ITENS. MEDIDO: 1px de largura por 100% da altura do
   item, PRETO A 20% de opacidade, `position: absolute` com `right: -15px` —
   exatamente no meio dos 30px de respiro — e centrado na vertical.
   É o `::before` do `.ltn__list-item-2-before` da referência.

   ⚠ O ÚLTIMO ITEM DE CADA LINHA FICA SEM FIO. Na referência as duas linhas são
   uma lista só e a regra é `:last-child`, então o fio SAI depois de "Área
   Privativa" (fim da primeira linha) e NÃO sai depois do IPTU. Aqui, com duas
   listas, é o mesmo desenho: a de dados mantém o fio no último item e a de
   valores não. */
.card-destaque__dados li::before,
.card-destaque__valores li::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    width: 1px;
    height: 100%;
    background: #000;
    opacity: .2;
    transform: translateY(-50%);
}

.card-destaque__valores li:last-child::before {
    display: none;
}

/* O VALOR FICA EM CIMA E O RÓTULO EMBAIXO: o <span> é bloco, então quebra a
   linha sozinho. É o desenho da referência. */
.card-destaque__dados span,
.card-destaque__valores span {
    display: block;
    font-weight: 500;
}

/* ⚠ QUADRADO, e não os 14x16 do glifo da referência. Lá o ícone é uma FONTE
   (flaticon), cuja caixa é mais alta que larga sem deformar o desenho; o nosso
   é SVG com viewBox quadrado — forçar 14x16 o estica. 16x16 mantém a proporção
   e ocupa a mesma altura de linha. */
/* MESMA CAIXA DO GLIFO DELA: o flaticon tem em de 300 e descida ZERO, então o
   desenho ocupa 14x14 apoiado na linha de base (a caixa do <i> fecha 14x16 por
   causa da entrelinha). Em 16x16 esticados o ícone saía maior e empurrava o
   texto 2px. */
.card-destaque__icone {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ===========================================================================
   3. FAIXA DE BANNERS (partials/banners.php)
   ---------------------------------------------------------------------------
   ⚠ ELA FICA NO MEIO DA HOME, depois da vitrine de destaques — não no topo.
   Ver a nota no cabeçalho do partial.

   MEDIDO NO SITE NO AR (2026-09-10, viewport 1440):

     faixa ....... 1425x528 — altura do slide MAIS ALTO, não valor fixo
     slide ....... respiro 90px em cima e 100 embaixo; foto `cover` no centro
     véu ......... `rgba(7, 28, 31, .6)` sobre a foto inteira (é o
                   `bg-overlay-theme-black-60` do tema), num `::before` com
                   `z-index: -1`
     texto ....... bloco de 650 centrado; parágrafo travado em 450
     título ...... 50px/500 Poppins branco, linha 50, 20 até o texto
     parágrafo ... 16px/400 Arial linha 28,8 branco, 24 embaixo
     botão ....... 40px abaixo do texto, respiro 17px 40px, 16px/400 Poppins
                   linha 24, branco sobre o azul da marca
     setas ....... 60x60 QUADRADAS (raio 0), borda 1px #e5eaee, fundo
                   transparente, seta branca de 20px, 40px para dentro das
                   laterais, centradas na vertical — invisíveis até o ponteiro
                   entrar na faixa
     bolinhas .... três, a da vez 15px #a9ca3d e as outras 10px #c0c0c0,
                   66px acima do pé (medido `top: 462` numa faixa de 528)
   =========================================================================== */
.banners {
    /* A ALTURA É DO CONTEÚDO: o slide mais alto manda, como na referência.
       Nada de `height` fixo aqui. */
    position: relative;
}

/* ⚠ FUNDO ESCURO ATRÁS DOS SLIDES (`section-bg-2` dela, #171b2a). Sem ele, no
   meio da mesclagem os dois slides ficam meio transparentes ao mesmo tempo e o
   BRANCO da página aparece pelos dois — dava um clarão na troca. Com o fundo
   escuro por baixo, a passagem é só mesclagem. */
.banners {
    background: #171b2a;
}

.banners__palco {
    position: relative;
}

/* O COMPONENTE DE CARROSSEL (style.css) dá 8px de respiro à janela, com margem
   negativa igual, para a sombra do card não ser cortada na rolagem. Aqui não há
   sombra nenhuma e esses 8+8 entravam na altura da faixa: 541 em vez de 525. */
.banners__palco .carrossel__janela {
    margin: 0;
    padding: 0;
}

/* ---- A troca é por MESCLA, não por rolagem -----------------------------
   MEDIDO no site no ar (2026-09-10, amostrando a opacidade quadro a quadro
   durante a troca):

       t=8ms    1,00 / 0,00
       t=91ms   0,72 / 0,28
       t=174ms  0,44 / 0,56
       t=258ms  0,17 / 0,83
       t=341ms  0,00 / 1,00

   Ou seja: **crossfade de ~350ms**, com os dois slides animando ao mesmo tempo
   — o que sai apaga enquanto o que entra acende. Os três ficam empilhados
   (medido: todos em x=0, `opacity` 1 no da vez e 0 nos outros).

   ⚠ A PRIMEIRA VERSÃO DAQUI ROLAVA DE LADO, porque reaproveitou a trilha da
   vitrine de destaques — que rola mesmo. O Sami apontou. A vitrine continua
   rolando; quem manda é o `data-carrossel-fade` no HTML.

   ⚠ E A MEDIÇÃO QUASE PASSOU BATIDO: o `medir.py` injeta
   `*{transition-duration:0s!important}` para congelar animação, e com isso a
   troca parecia INSTANTÂNEA. Para medir animação é o `agir.py`, sem `--parado`.

   GRADE NO LUGAR DE `position: absolute`: com todos os slides na mesma célula,
   a faixa continua com a altura do mais alto e ninguém precisa de altura
   cravada. */
.banners__trilha {
    display: grid;
    gap: 0;
    overflow: visible;
    scroll-snap-type: none;
}

.banners__item {
    grid-area: 1 / 1;
    opacity: 0;
    /* `visibility` junto da opacidade: slide apagado não recebe clique nem
       entra na ordem do Tab. */
    visibility: hidden;
    /* ⚠ `linear`, NÃO `ease`. A curva de lá é praticamente reta (0,72 / 0,44 /
       0,17 em 1/4, 1/2 e 3/4 do caminho); com `ease` a nossa apagava muito
       mais rápido no meio (0,62 / 0,22 / 0,05) e a troca parecia um corte. */
    transition: opacity .3s linear, visibility .3s linear;
}

.banners__item.ativo {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .banners__item {
        transition: none;
    }
}

.banners__item {
    position: relative;
    /* O item de carrossel nasce com base calculada pelo `gap`; aqui é um slide
       de largura cheia. */
    flex: 0 0 100%;
    max-width: 100%;
    /* ⚠ PISO DE 528, medido em TODAS as larguras (1440, 992, 768 e 390). É ele
       que segura a faixa: sem o `min-height` o slide encolhe com o texto e a
       seção fechava 483 no celular, contra os 528 de lá. */
    min-height: 528px;
    padding: 90px 0 100px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    /* Sem isto o `::before` do véu, que é `z-index: -1`, cai ATRÁS da faixa e
       some — ele precisa de um contexto de empilhamento no próprio slide. */
    z-index: 0;
}

/*
 * ⚠ A FOTO DO SLIDE NÃO ENTRA NO CARREGAMENTO DA PÁGINA — ver
 * `[data-foto-adiada]` no site.js.
 *
 * Esta faixa fica NO MEIO da home, longe da primeira tela, e são TRÊS fotos
 * (só uma aparece; as outras duas esperam a seta). Medido no celular em
 * 2026-09-15: 221kB pedidos aos 1,7s, terminando aos 4,9s — disputando banda
 * justamente com a foto da régua de busca, que é o LCP. Agora elas entram
 * quando a faixa se aproxima da tela.
 *
 * `html:not(.com-js)`: sem JS não há quem ligue a foto depois, então ela entra
 * de uma vez, como antes (a classe `com-js` sai do script da cortina, no
 * header). */
.banners__item.foto-pronta,
html:not(.com-js) .banners__item {
    background-image: var(--banner-foto);
}

/* O VÉU. `z-index: -1` como na referência: fica sobre a foto (que é fundo do
   próprio elemento) e sob o texto, sem precisar empilhar o conteúdo. */
.banners__item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(7, 28, 31, .6);
}

/* O container entre o slide e o texto vira item flex: sem largura cheia ele
   encolheria para o tamanho do texto e perderia a centralização. */
.banners__item > .container {
    width: 100%;
}

/* --- ANIMAÇÃO DOS TEXTOS -------------------------------------------------
   Igual à dela (`.ltn__slide-animation`): cada filho do bloco de texto ENTRA
   de baixo com `fadeInUp`, um depois do outro. Atraso e duração crescem junto
   — 0,5s no primeiro, 1s no segundo, 1,5s no terceiro —, e é por isso que o
   parágrafo demora mais a assentar que o título (medido no site no ar: título
   de 500 a 1000ms, texto de 1000 a 2000ms).

   Enquanto o slide não é o da vez os filhos ficam apagados; ao virar `.ativo` a
   regra volta a casar e a animação RECOMEÇA sozinha, a cada troca. */
@keyframes banner-sobe {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to   { opacity: 1; transform: none; }
}

.banners__texto > * {
    opacity: 0;
    visibility: hidden;
}

.banners__item.ativo .banners__texto > * {
    opacity: 1;
    visibility: visible;
    animation-name: banner-sobe;
    animation-fill-mode: both;
}

.banners__item.ativo .banners__texto > *:nth-child(1) {
    animation-delay: .5s;
    animation-duration: .5s;
}

.banners__item.ativo .banners__texto > *:nth-child(2) {
    animation-delay: 1s;
    animation-duration: 1s;
}

.banners__item.ativo .banners__texto > *:nth-child(3) {
    animation-delay: 1.5s;
    animation-duration: 1.5s;
}

/* Quem pediu menos movimento vê o texto direto, sem entrada. */
@media (prefers-reduced-motion: reduce) {
    .banners__texto > * {
        opacity: 1;
        visibility: visible;
    }

    .banners__item.ativo .banners__texto > * {
        animation: none;
    }
}

.banners__texto {
    max-width: 650px;
    margin-inline: auto;
    text-align: center;
}

/* --- ALINHAMENTO DE CADA SLIDE ------------------------------------------
   São os três jeitos que a referência usa (`text-center`, `text-right` e
   `text-left`), inclusive a LINHA de 1px ao lado do parágrafo: à esquerda no
   alinhado à esquerda, à direita no alinhado à direita e ausente no centrado
   (`.ltn__slide-item-2 .slide-brief` e as variantes dela). */
.banners__texto--direita {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

.banners__texto--direita .banners__descricao {
    margin-left: auto;
    margin-right: 0;
    padding-right: 30px;
    border-right: 1px solid #576466;
}

.banners__texto--esquerda {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.banners__texto--esquerda .banners__descricao {
    margin-left: 0;
    margin-right: auto;
    padding-left: 30px;
    border-left: 1px solid #576466;
}

/* Abaixo de 1200 o recuo da linha da ESQUERDA cai para 15 (regra dela); o da
   direita continua em 30. */
@media (max-width: 1199.98px) {
    .banners__texto--esquerda .banners__descricao {
        padding-left: 15px;
    }
}

.banners__titulo {
    margin: 0 0 20px;
    font-family: var(--fonte-display);
    font-size: 50px;
    font-weight: 500;
    line-height: 1;
    color: var(--cor-branco);
}

/* MEDIDO: o parágrafo é mais estreito que o bloco — 450 contra 650.

   ⚠ `hyphens: auto` NÃO É ENFEITE. A referência hifeniza ("simplifica o pro-
   cesso", "Oferecemos ino-vação") e com isso o texto do primeiro slide fecha em
   QUATRO linhas. Sem hifenização ele vai para cinco, o slide cresce 28,8px e a
   faixa inteira sobe de 528 para 544. Depende do `lang` do <html> estar certo —
   está, é `pt-br`. */
/* ⚠ SEM MARGEM EMBAIXO. Na referência o afastamento até o botão vem TODO do
   embrulho dele (40px acima de 992, 20 abaixo) — o parágrafo não tem margem
   nenhuma no pé. Com os 24 que estavam aqui, o colapso entre as duas escolhia
   24 quando a do embrulho caía para 20, e a faixa fechava 3px a mais nas
   janelas estreitas, onde o slide passa da altura mínima. */
.banners__descricao {
    max-width: 450px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--cor-branco);
    hyphens: auto;
}

/* MEDIDO: 40px acima do botão — e a margem mora no EMBRULHO, não no botão
   (ver a nota em banners.php). */
.banners__acao {
    margin-top: 40px;
}

.banners__botao {
    display: inline-block;
    padding: 17px 40px;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    /* ⚠ 0,3s E COM A COR JUNTO. Medido na referência: o fundo e o texto trocam
       no MESMO tempo da varredura (`.botao-varredura`, style.css). Em 0,2s só
       do fundo, a cor do texto pulava de estalo no meio da animação. */
    transition: background-color .3s ease, color .3s ease;
}

/* MESMO HOVER DOS BOTÕES DA BUSCA — ver `.busca-faixa__botao:hover`. */
.banners__botao:hover,
.banners__botao:focus-visible {
    background: #000;
    color: var(--cor-escura);
}

/* ---- Setas -------------------------------------------------------------
   ⚠ QUADRADAS, ao contrário das da vitrine de destaques, que são círculos.
   São dois componentes diferentes no mesmo site — não unificar. */
.banners__seta {
    position: absolute;
    top: 50%;
    left: 40px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 1px solid #e5eaee;
    border-radius: 0;
    background: transparent;
    color: var(--cor-branco);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    /* `left`/`right` ENTRAM NA TRANSIÇÃO: lá a seta não só aparece, ela desliza
       de 40 para 60 quando o mouse entra na faixa (`.slick-slide-arrow-1`). */
    transition: opacity .3s ease, visibility .3s ease, left .3s ease,
                right .3s ease, background-color .2s ease;
}

.banners__seta--dir {
    left: auto;
    right: 40px;
}

.banners__palco:hover .banners__seta,
.banners__seta:focus-visible {
    opacity: 1;
    visibility: visible;
    left: 60px;
}

.banners__palco:hover .banners__seta--dir,
.banners__seta--dir:focus-visible {
    left: auto;
    right: 60px;
}

.banners__seta:hover {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.banners__seta svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ---- Bolinhas -----------------------------------------------------------
   Mesma pele das da vitrine (o partial reaproveita as classes `destaques__`),
   só que POR CIMA da foto, no pé da faixa. */
.banners__bolinhas {
    position: absolute;
    left: 0;
    right: 0;
    /* MEDIDO: `top: 462` numa faixa de 528 — 66px acima do pé. */
    bottom: 50px;
    margin: 0;
}

/* ---- Larguras ----------------------------------------------------------
   MEDIDO no site no ar, janela por janela:

       janela      respiro do slide   título        parágrafo   faixa
       1920 ......  90px / 100px      65px/65       16px        675
       1600 ......  90px / 100px      65px/65       16px        675
       1599 ......  90px / 100px      50px/50       16px        528
       1440 ......  90px / 100px      50px/50       16px        528
        992 ......  90px / 100px      50px/50       16px        528 (555 lá)
        768 ......  90px / 100px      40px/40       14px        528
        390 ...... 120px / 100px      30px/30       14px        528

   ⚠ O CORTE DE CIMA É EXATAMENTE 1600: em 1600 a faixa mede 675 e em 1599, 528.
   Foi o que o Sami apontou comparando os dois prints — a tela dele é larga, e
   nessa faixa o título dobra de linha e a seção cresce 147px.

   ⚠ O RESPIRO NÃO ENCOLHE EM 768 — ele AUMENTA em 390 (120 em cima). Foi o
   contrário do que eu tinha suposto (60/70), e com o piso de 528 isso muda o
   quanto o texto respira dentro da faixa.

   ⚠ A media query mede a JANELA: `max-width: 991.98px` vale em 768 e não em
   992, que é o que a referência faz. */
/* ⚠ ACIMA DE 1600 A FAIXA CRESCE. O título vai para 65px/65 e, com o bloco de
   650, "Encontre o seu novo Lar!" passa a ocupar DUAS linhas (130 de altura
   contra 50) — é o que o primeiro print do Sami mostra.

   ⚠ O `min-height: 675px` É MEDIDA, NÃO CONTA. Somando o conteúdo do slide mais
   alto dá 555,2 (90 + 130 + 20 + 115,2 + 40 + 60 + 100), e mesmo assim a caixa
   de lá mede 675: o `.ltn__slide-item-inner` fica 120px mais alto que o próprio
   conteúdo e centra o texto dentro. Não achei a regra que faz isso no tema
   deles — o que está aqui reproduz a caixa medida. Se um dia alguém descobrir a
   origem, dá para trocar por ela. */
@media (min-width: 1600px) {
    /* ⚠ SÓ AQUI O TEXTO VAI PARA O MEIO DA ALTURA. Até 1599 a referência deixa
       o conteúdo logo abaixo do respiro de cima e a sobra do piso de 528 fica
       embaixo — medido dy=90 em 1440. A partir de 1600, com o piso em 675, ela
       centraliza (dy=149,9). Ligar o `center` em todas as larguras empurrava o
       texto 26px para baixo em 1440. */
    .banners__item {
        min-height: 675px;
        display: flex;
        align-items: center;
    }

    .banners__titulo {
        font-size: 65px;
    }
}

/* ⚠ O DEGRAU DESTA FAIXA É 1200, NÃO 992 — medido janela por janela. É aí que
   a referência tira as setas E acrescenta 30px de respiro embaixo do bloco de
   texto. Esses 30 não são enfeite: com eles o slide mais alto passa de 528 para
   555 em 992, e a seção inteira cresce junto (a altura dela é a do slide mais
   alto, não um valor fixo). Sem isso a faixa ficava 27px curta e TUDO abaixo
   dela subia 27px na janela de 992 a 1199. */
@media (max-width: 1199.98px) {
    .banners__texto {
        margin-bottom: 30px;
    }

    .banners__seta {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .banners__titulo {
        font-size: 40px;
    }

    .banners__descricao {
        font-size: 14px;
    }

    /* O BOTÃO SEGUE OS DEGRAUS DO `.btn` DA REFERÊNCIA — os mesmos do botão da
       faixa "Anuncie um imóvel". */
    .banners__botao {
        padding: 12px 25px;
    }

    /* MEDIDO: o respiro entre o texto e o botão cai de 40 para 20 em 992. Só
       aparece nas janelas estreitas, onde o slide passa dos 528 de altura
       mínima — mas lá são 20px de diferença na seção inteira. */
    .banners__acao {
        margin-top: 20px;
    }
}

@media (max-width: 767.98px) {
    .banners__item.foto-pronta,
    html:not(.com-js) .banners__item {
        background-image: var(--banner-foto-mobile);
    }

    .banners__botao {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* ⚠ ESTES DOIS DEGRAUS SÃO DE 768, NÃO DE 576. Estavam em 576 (medição
       feita só em 390) e por isso, de 576 a 767, o título saía 40px em vez de
       30 e o respiro de cima 90 em vez de 120 — a faixa inteira fechava fora do
       lugar. Medido janela por janela em 2026-09-11. */
    .banners__item {
        padding-top: 120px;
    }

    .banners__titulo {
        font-size: 30px;
    }
}

/* ===========================================================================
   4. COMO VAMOS AJUDAR VOCÊ? (partials/ajuda.php)
   ---------------------------------------------------------------------------
   A última seção de conteúdo da home, logo abaixo da faixa de banners.

   MEDIDO no site no ar da Porto (2026-09-10), janela por janela:

       janela     por fileira   vão entre colunas   texto do cartão
       ≥ 992 ....      3               0            20px / 26
       768–991 ..      2              30px          18px / 23,4
       576–767 ..      2              16px          17px / 22,1
       < 576 ....      1               —            17px / 22,1

   O QUE NÃO MUDA EM NENHUMA LARGURA: o respiro da seção (115 em cima, 70
   embaixo), o título (35px/500, linha 45,5, com 50+15 de respiro embaixo), o
   ícone (112x112 com 16 até o texto) e o cartão (respiro 40px 30px 35px,
   margem 30 embaixo, borda 1px #f6f6f6).

   ⚠ A MARGEM DE 30 FICA NO CARTÃO, NÃO VIRA `gap` DA GRADE. Na referência ela
   existe também na ÚLTIMA fileira: a fileira mede 302 (272 do cartão mais alto
   + 30) e a seção fecha em 885. Trocando por `row-gap` a última fileira perde
   os 30 e a seção encolhe para 855.

   ⚠ OS CARTÕES NÃO SE ESTICAM PARA A ALTURA DA FILEIRA. Os de uma linha de
   texto são 26px mais curtos que os de duas e ficam alinhados pelo TOPO — daí
   o `align-items: start`. Com o `stretch` padrão da grade as bordas de baixo
   sairiam todas na mesma altura, que não é o que está no ar.

   ⚠ NO ≥992 O VÃO É ZERO DE PROPÓSITO: os cartões ENCOSTAM e as duas bordas de
   1px ficam lado a lado, formando uma linha de 2px entre eles. É o desenho da
   referência (`.ltn__custom-gutter` zera o respiro das colunas do Bootstrap a
   partir do `lg`), não descuido.

   ⚠ A FONTE DO CARTÃO É POPPINS, mas o `<a>` da referência herda Arial do
   `body` — como não sobra texto nenhum fora do `h4`, isso não aparece na tela.
   Aqui o texto já nasce em Poppins e o resultado é o mesmo.
   =========================================================================== */
.ajuda {
    padding: 115px 0 70px;
}

.ajuda__cabecalho {
    margin-bottom: 50px;
    text-align: center;
}

/* MESMO DESENHO DO "Destaque para locações" — medido, os dois títulos de seção
   da home são idênticos. Não vira uma classe só porque o respiro de baixo e o
   embrulho diferem; se aparecer um terceiro igual, aí sim. */
.ajuda__titulo {
    margin: 0 0 15px;
    font-family: var(--fonte-display);
    font-size: 35px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

.ajuda__grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
}

.ajuda__cartao {
    position: relative;
    display: block;
    margin-bottom: 30px;
    padding: 40px 30px 35px;
    border: 1px solid #f6f6f6;
    text-align: center;
    text-decoration: none;
    color: var(--cor-texto);
}

/* ⚠ SEM `transition` NO CARTÃO, DE PROPÓSITO. Na referência a declaração é
   `transition: all` — sem duração, o que vale zero: a sombra aparece NA HORA.
   Só a régua de baixo é animada. */
.ajuda__cartao:hover,
.ajuda__cartao:focus-visible {
    box-shadow: 0 16px 32px 0 rgba(7, 28, 31, .1);
}

/* A RÉGUA AZUL do pé do cartão: nasce com largura zero à esquerda e cresce até
   a largura toda em meio segundo. */
.ajuda__cartao::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: var(--cor-primaria);
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}

.ajuda__cartao:hover::before,
.ajuda__cartao:focus-visible::before {
    width: 100%;
    opacity: 1;
    visibility: visible;
}

.ajuda__icone {
    display: block;
    width: 112px;
    height: 112px;
    margin: 0 auto 16px;
}

/* ⚠ OS 15px DE BAIXO NÃO SÃO ENFEITE: na referência o texto é um `h4` com
   `margin-bottom: 15px`, e como o cartão tem respiro embaixo essa margem NÃO
   colapsa para fora — ela entra na altura. Sem ela cada cartão fecha 257 em vez
   de 272 e a seção inteira encolhe 15px POR FILEIRA (30 no desktop, 90 no
   celular, onde são seis fileiras). Medido em 2026-09-11. */
.ajuda__texto {
    display: block;
    margin: 0 0 15px;
    font-family: var(--fonte-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

@media (max-width: 991.98px) {
    .ajuda__grade {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 30px;
    }

    .ajuda__texto {
        font-size: 18px;
    }
}

@media (max-width: 767.98px) {
    .ajuda__grade {
        column-gap: 16px;
    }

    .ajuda__texto {
        font-size: 17px;
    }

    /* ⚠ A RÉGUA SOME ABAIXO DE 768 — e é assim no site no ar. A folha de lá
       tem `@media (max-width:767px){ .ltn__feature-item-6::before {
       background-color: #fff } }`: a régua continua crescendo, branca sobre
       fundo branco. Aqui ela é desligada, que dá a mesma tela sem pintar de
       branco por cima do nada. Em tela de toque não há hover mesmo. */
    .ajuda__cartao::before {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ajuda__grade {
        grid-template-columns: 1fr;
    }
}

/* ===========================================================================
   5. ESCOLHA O TIPO DE IMÓVEL QUE VOCÊ PRECISA (partials/tipos.php)
   ---------------------------------------------------------------------------
   Os cinco ladrilhos com foto, logo abaixo de "Como vamos ajudar você?".

   MEDIDO no site no ar da Porto (2026-09-11), janela por janela:

       janela      por fileira   1º ladrilho   pílula   nome do ladrilho
       ≥ 1200 ...      3           2 colunas    16px    24px / 31,2
       992–1199 .      3           2 colunas    16px    22px / 28,6
       768–991 ..      2           1 coluna     15px    20px / 26
       < 768 ....      1           1 coluna     14px    18px / 23,4

   O QUE NÃO MUDA EM NENHUMA LARGURA: o respiro da seção (115 em cima, NENHUM
   embaixo), o vão de 30 entre as colunas, o título (35px/500) e o ladrilho —
   350 de altura fixa, margem 30 embaixo, véu preto a 30%.

   ⚠ A SEÇÃO NÃO TEM RESPIRO EMBAIXO, e não é esquecimento: quem faz o fôlego
   do pé é a MARGEM DE 30 do último ladrilho. Somando, 115 + 91 (cabeçalho) +
   50 + 760 (duas fileiras de 380) = 1016, que é a altura medida.

   ⚠ O TEXTO NÃO FICA NO CENTRO EXATO DO LADRILHO: fica 5px ACIMA. Na
   referência ele mora numa caixa com 30 de respiro e 10 de margem embaixo, e é
   essa margem que empurra o conjunto para cima quando o flex centraliza. Está
   replicado — sem a margem de 10 o nome desce 5px e a comparação acusa.

   ⚠ A PÍLULA NÃO TEM FUNDO PRÓPRIO: o verde vem de um `::before` do tamanho
   dela a 10% de opacidade. Pintar o fundo direto em #a9ca3d daria um verde
   chapado, muito mais forte que o de lá.
   =========================================================================== */
.tipos {
    padding: 115px 0 0;
}

.tipos__cabecalho {
    margin-bottom: 50px;
    text-align: center;
}

/* A PÍLULA "Imóveis para locação". O `position: relative` é o que segura o véu
   verde do `::before` — sem ele o verde escapa para o container. */
.tipos__rotulo {
    position: relative;
    display: inline-block;
    margin: 0 0 15px;
    padding: 5px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cor-primaria);
}

/* O VERDE É O MESMO DA BOLINHA ATIVA DO CARROSSEL (#a9ca3d, o da logo) — aqui
   a 10% de opacidade, que é o que dá o tom lavado do site no ar. */
.tipos__rotulo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 25px;
    background: #a9ca3d;
    opacity: .1;
}

/* MESMO DESENHO DOS OUTROS DOIS TÍTULOS DE SEÇÃO DA HOME. Os 15px de baixo
   COLAPSAM com os 50 do cabeçalho (o maior vence), exatamente como na
   referência — o respiro real até a grade é 50. */
.tipos__titulo {
    margin: 0 0 15px;
    font-family: var(--fonte-display);
    font-size: 35px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

/* TRÊS COLUNAS, e o primeiro ladrilho ocupa duas. A auto-colocação da grade
   resolve o resto: sobra uma coluna na 1ª fileira (Lojas) e os outros três
   descem inteiros para a 2ª. */
.tipos__grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
}

/* ⚠ A MARGEM DE 30 FICA NO LADRILHO, NÃO VIRA `row-gap`: ela existe também
   depois da ÚLTIMA fileira, e é ela que faz o respiro do pé da seção. */
.tipos__ladrilho {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    margin-bottom: 30px;
    /* ⚠ A FOTO ENTRA DEPOIS, pelo `[data-foto-adiada]` — mesmo motivo dos
       slides do banner: são cinco fotos (157kB) numa seção que fica bem abaixo
       da primeira tela e que saíam junto com o LCP. */
    background: center / cover no-repeat;
    /* ⚠ A COR DO LINK É BRANCA E NÃO MUDA NO HOVER. Na referência o ladrilho
       tem `.text-color-white` e fica branco nos dois estados; sem estas duas
       linhas o nosso herdava a cor de texto do site e o `a:hover` global o
       pintava de azul. Hoje não apareceria (o rótulo tem cor própria), mas
       qualquer coisa dentro do ladrilho que use `currentColor` sairia azul. */
    color: var(--cor-branco);
    text-align: center;
    text-decoration: none;
}

.tipos__ladrilho.foto-pronta,
html:not(.com-js) .tipos__ladrilho {
    background-image: var(--tipo-foto);
}

.tipos__ladrilho:hover,
.tipos__ladrilho:focus-visible {
    color: var(--cor-branco);
}

.tipos__ladrilho--largo {
    grid-column: span 2;
}

/* O VÉU. Sem ele a foto engole o texto branco. */
.tipos__ladrilho::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: .3;
    transition: opacity .4s;
}

.tipos__ladrilho:hover::before,
.tipos__ladrilho:focus-visible::before {
    opacity: .15;
}

/* O `position: relative` põe o nome ACIMA do véu — sem ele o preto a 30% passa
   por cima do texto e o branco fica cinza. */
.tipos__nome {
    position: relative;
    display: block;
    margin-bottom: 10px;
    padding: 30px;
    font-family: var(--fonte-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    /* A cor vem do ladrilho — ver o comentário lá em cima. */
}

/* ⚠ O NOME AZUL COM O PONTEIRO EM CIMA DELE é da referência: lá o rótulo é um
   <a> dentro do <h3>, e o `a:hover` global o pinta de #11509d — mesmo sobre a
   foto escura.

   O GATILHO É O PRÓPRIO RÓTULO, não o ladrilho: aqui quem é link é o ladrilho
   inteiro (ver o partial), então sem esta regra o nome acenderia com o ponteiro
   em QUALQUER canto da foto, o que é bem mais chamativo que lá. Com ela, a área
   que acende é a caixa do texto — a mesma coisa, a menos dos 30px de respiro
   dele. */
.tipos__nome:hover {
    color: var(--cor-primaria);
}

@media (max-width: 1199.98px) {
    .tipos__nome {
        font-size: 22px;
    }
}

@media (max-width: 991.98px) {
    /* DUAS COLUNAS E TODOS DO MESMO TAMANHO: o ladrilho largo perde o vão
       duplo (é o `col-md-6` da referência, que vale para os cinco). */
    .tipos__grade {
        grid-template-columns: repeat(2, 1fr);
    }

    .tipos__ladrilho--largo {
        grid-column: auto;
    }

    .tipos__rotulo {
        font-size: 15px;
    }

    .tipos__nome {
        font-size: 20px;
    }
}

@media (max-width: 767.98px) {
    .tipos__grade {
        grid-template-columns: 1fr;
    }

    .tipos__rotulo {
        font-size: 14px;
    }

    .tipos__nome {
        font-size: 18px;
    }
}

/* ===========================================================================
   6. RESPONSIVO DOS DESTAQUES
   ---------------------------------------------------------------------------
   MEDIDO no site no ar (2026-09-10), janela por janela:

       janela        cards/vez   respiro do slide   miolo do card   título
       ≥ 992 ......      3            15px          30px 30px 1px   22px/28,6
       768–991 ....      2            15px          30px 20px 1px   20px/26
       580–767 ....      2             8px          30px 20px 1px   18px/23,4
       < 580 ......      1             8px          30px 20px 1px   18px/23,4

   ⚠ O CARD ENCOLHE POR DENTRO, não só de largura: o respiro lateral do miolo
   cai de 30 para 20 já em 768, e o título desce dois degraus (22 → 20 → 18).
   Sem isso o card fica com o texto grande demais para a caixa estreita — foi o
   que aconteceu aqui antes de medir: em 390 a seção fechava 47px a mais que a
   referência.

   ⚠ E A MARGEM NEGATIVA DA TRILHA MUDA: -15px até 767 e -8px abaixo disso (o
   respiro do slide acompanha). Em 390 isso é a diferença entre um slide de 375
   e um de 361.

   O TÍTULO DA SEÇÃO não muda em nenhuma largura: 35px/500 em todas.
   =========================================================================== */
@media (max-width: 991.98px) {
    .destaques__item {
        flex-basis: 50%;
    }

    /* ⚠ O CONTEXTO CAI PARA 14px/25,2 AQUI. Medido em 768 e em 390: o miolo do
       card da referência herda 14px abaixo de 992 (em 1440 e 992 são 16). São
       1,6px por fileira de dados — 3,2 no card — e a seção acumulava isso nos
       cinco. */
    .card-destaque__info {
        padding: 30px 20px 1px;
        font-size: 14px;
    }

    .card-destaque__titulo {
        font-size: 20px;
        line-height: 1.3;
    }

    /* MEDIDO: a caixa das bolinhas fecha 15 abaixo de 992 e 16 daí para cima —
       é 1px, mas entra na altura da seção. */
    .destaques__bolinhas {
        min-height: 15px;
    }

    /* ⚠ AS SETAS SOMEM ABAIXO DE 992, e nem com o ponteiro em cima elas voltam
       (medido `opacity: 0` em 991, 850 e 800). Daqui para baixo quem navega é
       o ARRASTO e as bolinhas — que é o certo, porque nessas larguras a tela
       costuma ser de toque. */
    .destaques__seta {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .destaques__palco {
        margin: 0 -8px;
    }

    /* ⚠ AQUI SÓ O RESPIRO MUDA: continuam DOIS cards por tela. */
    .destaques__item {
        padding: 0 8px;
    }

    .card-destaque__titulo {
        font-size: 18px;
    }

    /* MEDIDO: o respiro abaixo das bolinhas cai de 30 para 15. */
    .destaques__bolinhas {
        margin-bottom: 15px;
    }
}

/* ⚠ O CARD SÓ FICA SOZINHO ABAIXO DE 580, e não em 768 como estava aqui.
   Medido janela por janela: em 580 ainda são dois cards de 247; em 579 vira um
   de 510. É um número solto do carrossel da referência (o `breakpoint: 580` do
   slick), não um degrau do Bootstrap — daí o 579.98 e não 575.98.

   Custava 90px: de 580 a 767 o nosso mostrava UM card, mais largo e portanto
   mais baixo, e a seção fechava 856 contra os 946 de lá — com tudo abaixo dela
   subindo junto. */
@media (max-width: 579.98px) {
    .destaques__item {
        flex-basis: 100%;
    }
}

/* ===========================================================================
   DEPOIMENTOS — recurso do painel novo, sem referência no site antigo.
   O carrossel reaproveita as classes da vitrine (.destaques__palco,
   __item, __seta, __bolinhas): mesmas setas, bolinhas e 3/2/1 colunas.
   Aqui fica só o que é do depoimento.
   =========================================================================== */
.depoimentos {
    padding: 90px 0 100px;
    background: var(--cor-fundo-alt);
}

.depoimentos__cabecalho {
    margin-bottom: 50px;
    text-align: center;
}

.depoimentos__titulo {
    margin: 0 0 10px;
    font-family: var(--fonte-display);
    font-size: 35px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

.depoimentos__subtitulo {
    margin: 0;
    color: var(--cor-texto);
}

.depoimento {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 30px;
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
}

.depoimento__nota {
    display: flex;
    gap: 3px;
    margin-bottom: 16px;
}

.depoimento__estrela {
    width: 18px;
    height: 18px;
    fill: var(--cor-borda);
}

.depoimento__estrela--cheia {
    fill: #f5a623;
}

/* SEIS LINHAS NO MÁXIMO: os cartões ficam da mesma altura na fileira. */
.depoimento__texto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    flex: 1;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    font-style: italic;
    line-height: 1.7;
    color: var(--cor-texto);
}

/* "LER MAIS" — cara de link: azul e sublinhado. */
.depoimento__ler-mais {
    align-self: flex-start;
    margin: -14px 0 24px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    color: var(--cor-primaria);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.depoimento__ler-mais:hover,
.depoimento__ler-mais:focus-visible {
    color: var(--cor-primaria-forte);
}

/* MODAL DO TEXTO COMPLETO */
.depoimento-modal {
    width: calc(100% - 32px);
    max-width: 640px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
}

.depoimento-modal::backdrop {
    background: rgba(7, 28, 31, .7);
}

/* Página parada atrás do modal. */
html:has(.depoimento-modal[open]) {
    overflow: hidden;
}

.depoimento-modal__caixa {
    position: relative;
}

.depoimento-modal__fechar {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 1;
    padding: 0;
    border: 0;
    background: none;
    font-size: 32px;
    line-height: 1;
    color: var(--cor-texto-suave);
    cursor: pointer;
}

.depoimento-modal__fechar:hover {
    color: var(--cor-escura);
}

.depoimento--completo {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 40px;
}

.depoimento--completo .depoimento__texto {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.depoimento__autor {
    display: flex;
    align-items: center;
    gap: 14px;
}

.depoimento__foto {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cor-primaria);
    color: var(--cor-branco);
    font-family: var(--fonte-display);
    font-size: 22px;
    font-weight: 500;
}

.depoimento__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.depoimento__dados {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.depoimento__nome {
    font-family: var(--fonte-display);
    font-weight: 500;
    color: var(--cor-escura);
}

.depoimento__sub {
    font-size: 14px;
    color: var(--cor-texto-suave);
}

.depoimentos .destaques__bolinhas {
    margin-top: 25px;
}

.depoimentos__acao {
    margin-top: 40px;
    text-align: center;
}

.depoimentos__botao {
    display: inline-block;
    padding: 14px 34px;
    background: var(--cor-primaria);
    color: var(--cor-branco);
    font-family: var(--fonte-display);
    text-decoration: none;
    transition: background var(--transicao);
}

.depoimentos__botao:hover,
.depoimentos__botao:focus-visible {
    background: var(--cor-primaria-forte);
    color: var(--cor-branco);
}

/* COM ATÉ 3 DEPOIMENTOS, SETA SÓ NO CELULAR: no desktop e no tablet todos
   já estão à vista (3 ou 2 por vez). */
@media (min-width: 580px) {
    .depoimentos__palco--poucos .destaques__seta {
        display: none;
    }
}

/* UM DEPOIMENTO POR VEZ (abaixo de 580, a mesma virada da vitrine): setas
   sempre visíveis nas laterais, botão branco com seta preta. Aqui não dá
   para contar com o hover que as revela no desktop. */
@media (max-width: 579.98px) {
    .depoimentos .destaques__seta {
        display: grid;
        width: 40px;
        height: 40px;
        border-color: var(--cor-borda);
        background: var(--cor-branco);
        color: #000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
        opacity: 1;
        visibility: visible;
    }

    .depoimentos .destaques__seta--esq {
        left: -2px;
    }

    .depoimentos .destaques__seta--dir {
        right: -2px;
    }

    .depoimentos .destaques__seta:hover,
    .depoimentos .destaques__seta:focus-visible {
        border-color: var(--cor-borda);
        background: var(--cor-branco);
        color: #000;
    }

    .depoimentos .destaques__seta[disabled] {
        opacity: .4;
    }

    /* Respiro para a seta não cobrir o texto do cartão. */
    .depoimentos .depoimento {
        padding-left: 36px;
        padding-right: 36px;
    }
}

@media (max-width: 767.98px) {
    .depoimentos {
        padding: 60px 0 70px;
    }

    .depoimentos__titulo {
        font-size: 28px;
    }
}


/* ===========================================================================
   ÍNDICES ECONÔMICOS — recurso do painel, logo abaixo dos depoimentos. O site
   antigo tinha o bloco, mas nunca o publicou: não há medida a copiar. O
   cartão segue o dos depoimentos (fundo branco, borda, cantos de 4px).
   =========================================================================== */
.indices {
    padding: 90px 0 100px;
    background: var(--cor-fundo-band);
}

.indices__cabecalho {
    margin-bottom: 50px;
    text-align: center;
}

.indices__titulo {
    margin: 0 0 10px;
    font-family: var(--fonte-display);
    font-size: 35px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

.indices__subtitulo {
    margin: 0;
    color: var(--cor-texto);
}

/* UM, DOIS OU TRÊS CARTÕES — sempre centrados, sem esticar um cartão só até a
   largura toda. */
.indices__grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    justify-content: center;
}

.indices__grade--1 {
    grid-template-columns: minmax(0, 380px);
}

.indices__grade--2 {
    grid-template-columns: repeat(2, minmax(0, 380px));
}

.indice {
    display: flex;
    flex-direction: column;
    padding: 35px 30px 30px;
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-top: 4px solid var(--cor-primaria);
    border-radius: 4px;
    text-align: center;
}

.indice__nome {
    margin: 0 0 6px;
    font-family: var(--fonte-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cor-escura);
}

.indice__descricao {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--cor-texto-suave);
}

.indice__referencia {
    margin: 0 0 20px;
    font-size: 15px;
    color: var(--cor-texto);
}

.indice__referencia strong {
    color: var(--cor-primaria);
}

.indice__linhas {
    margin: 0 0 24px;
    text-align: left;
}

.indice__linha {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cor-borda);
}

.indice__linha:last-child {
    border-bottom: 0;
}

.indice__linha dt {
    color: var(--cor-texto);
}

.indice__linha dd {
    margin: 0;
    font-family: var(--fonte-display);
    font-weight: 600;
    color: var(--cor-escura);
    white-space: nowrap;
}

.indice__linha dd.indice__negativo {
    color: #b3261e;
}

.indice__fonte {
    margin-top: auto;
    font-size: 14px;
    color: var(--cor-primaria);
    text-decoration: none;
}

.indice__fonte:hover,
.indice__fonte:focus-visible {
    color: var(--cor-primaria-forte);
    text-decoration: underline;
}

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

@media (max-width: 767.98px) {
    .indices {
        padding: 60px 0 70px;
    }

    .indices__titulo {
        font-size: 28px;
    }

    .indices__grade,
    .indices__grade--1,
    .indices__grade--2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===========================================================================
   REDES SOCIAIS (FEED) — pages/partials/redes-feed.php. Recurso do painel,
   sem referência no site no ar; base portada do beta/ (home.css, "REDES
   SOCIAIS").

   Cada item é o embed_code CRU do Instagram/Facebook: o SDK deles redesenha o
   post por dentro, então aqui só se controla a grade em volta. Colunas de 300
   a 380px porque o embed tem largura "nativa" (~326px) — mais largo que isso,
   o SDK desenha o post gigante (bug já visto no beta/).
   =========================================================================== */
.redes {
    padding: 90px 0 100px;
}

/* INSTAGRAM E FACEBOOK SEGUIDOS: sem isto os dois respiros somam 190px. */
.redes + .redes {
    padding-top: 0;
}

.redes__cabecalho {
    margin-bottom: 50px;
    text-align: center;
}

.redes__titulo {
    margin: 0 0 10px;
    font-family: var(--fonte-display);
    font-size: 35px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

.redes__subtitulo {
    margin: 0;
    color: var(--cor-texto);
}

.redes__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
    justify-content: center;
    align-items: start;
    gap: 30px;
}

.redes__item {
    position: relative;
    container-type: inline-size;
    min-width: 0;
}

/* ⚠ CARTÃO DE ALTURA FIXA — todos os posts da mesma rede com a MESMA altura
   (pedido do Sami, 2026-09-16, depois de três prints).

   POR QUE FIXA: a altura do iframe é a rede que dá (embed.js/sdk.js), e ela
   vinha MAIOR que o conteúdo — sobrava um vão branco abaixo de "Adicione um
   comentário" — e diferente de um post para outro. Aqui o CARTÃO manda: o
   post fica colado no topo e o que passar da altura é cortado. Post mais
   baixo que o cartão deixa branco no fim, dentro da borda.

   A BORDA É NOSSA: a do iframe do Instagram é zerada abaixo, senão sairia
   borda dupla e a de baixo sumiria no corte.

   A ALTURA acompanha a largura do cartão (`cqw` = 1% da largura do
   `.redes__item`, que é o container — por isso o cartão é um <div> DENTRO
   dele: um elemento não mede a si mesmo), e é A MESMA NAS DUAS REDES (pedido
   do Sami): 150px fixos mais a foto em 4:5 (1,25 da largura), o retrato
   padrão do Instagram.
     Instagram ... o corte cai no meio da caixa de comentário; foto 3:4 perde
                   também a linha de curtidas.
     Facebook .... o post tem TEXTO acima da foto, então perde mais do fim —
                   em geral a barra de reações.
   Sem suporte a `cqw` (navegador antigo) a altura é ignorada e cada post fica
   com a altura que a rede der. */
.redes__post {
    height: calc(125cqw + 150px);
    overflow: hidden;
    background: var(--cor-branco);
    border: 1px solid #dbdbdb;
    border-radius: 4px;
}

.redes__post iframe {
    display: block;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* CARREGANDO — altura reservada (a página não pula quando o post entra) e um
   spinner no meio. O embed fica ESCONDIDO até a rede desenhá-lo: o
   <blockquote> cru é uma caixa branca com sombra própria e o link "Ver post",
   que não é para ser visto enquanto o post ainda vem. */
.redes__item[data-carregando] {
    min-height: 460px;
    background: var(--cor-fundo-band);
    border-radius: 4px;
}

.redes__item[data-carregando] > * {
    visibility: hidden;
}

.redes__item[data-carregando]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--cor-primaria-suave);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: redes-girar .8s linear infinite;
}

@keyframes redes-girar {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .redes__item[data-carregando]::after {
        animation-duration: 2.4s;
    }
}

/* O embed traz largura e margem no `style` do próprio elemento
   (min-width:326px; margin:1px) — só `!important` vence. Sem isso ele passa
   da coluna no celular. */
.redes__post > *,
.redes__post iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* CARROSSEL (mais de 2 posts): o da vitrine, mas com DOIS POSTS POR VEZ
   (pedido do Sami) — as setas levam ao terceiro em diante. Um só abaixo de
   580, como na vitrine.

   LARGURA: a mesma da grade de dois posts (2 x 380 + 30 de vão), centrada —
   a seção não muda de tamanho quando passa de 2 para 3 posts. Os 15px de
   respiro de cada slide são o vão; a margem negativa de 15 compensa. */
.redes__palco {
    max-width: 820px;
    margin: 0 auto;
}

.redes__palco .destaques__item {
    flex-basis: 50%;
}

/* ⚠ CADA POST COM A SUA ALTURA. O trilho do carrossel estica todo item até o
   mais alto da fileira (bom para os cards de imóvel, ver style.css); aqui um
   post de legenda longa deixava os outros com um vão branco embaixo. */
.redes__palco .destaques__trilha {
    align-items: flex-start;
}


.redes__palco .destaques__bolinhas {
    margin: 25px 0 0;
}

/* SETAS SEMPRE À VISTA, em toda largura: na vitrine elas só aparecem com o
   ponteiro em cima (e somem abaixo de 992), mas aqui são o jeito de chegar ao
   terceiro post — e na tela de toque não há ponteiro. Ficam por fora dos
   cards, na lateral do carrossel. */
.redes__palco .destaques__seta {
    display: grid;
    width: 40px;
    height: 40px;
    border-color: var(--cor-borda);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    opacity: 1;
    visibility: visible;
}

.redes__palco .destaques__seta--esq,
.redes__palco:hover .destaques__seta--esq {
    left: -45px;
}

.redes__palco .destaques__seta--dir,
.redes__palco:hover .destaques__seta--dir {
    right: -45px;
}

.redes__palco .destaques__seta[disabled] {
    opacity: .35;
}

/* SEM FOLGA NA LATERAL (tablet e celular), as setas entram por cima da borda
   dos cards. */
@media (max-width: 991.98px) {
    .redes__palco .destaques__seta--esq,
    .redes__palco:hover .destaques__seta--esq {
        left: 0;
    }

    .redes__palco .destaques__seta--dir,
    .redes__palco:hover .destaques__seta--dir {
        right: 0;
    }
}

@media (max-width: 579.98px) {
    .redes__palco .destaques__item {
        flex-basis: 100%;
    }
}

@media (max-width: 767.98px) {
    .redes {
        padding: 60px 0 70px;
    }

    .redes__titulo {
        font-size: 28px;
    }

    .redes__grade {
        grid-template-columns: minmax(0, 380px);
        gap: 20px;
    }
}

/* ===========================================================================
   PERGUNTAS FREQUENTES — pages/partials/faq.php. Recurso do painel, sem
   referência no site no ar. Acordeão nativo (<details>); o desenho segue os
   cartões das outras seções do painel (borda, cantos de 4px).
   =========================================================================== */
.faq {
    padding: 90px 0 100px;
}

.faq__cabecalho {
    margin-bottom: 45px;
    text-align: center;
}

.faq__titulo {
    margin: 0 0 10px;
    font-family: var(--fonte-display);
    font-size: 35px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

.faq__subtitulo {
    margin: 0;
    color: var(--cor-texto);
}

.faq__lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 860px;
    margin: 0 auto;
}

.faq__item {
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    transition: border-color .2s ease;
}

.faq__item[open] {
    border-color: var(--cor-primaria);
}

.faq__pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    font-family: var(--fonte-display);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--cor-escura);
    /* PERGUNTA LONGA SEM ESPAÇO (uma URL, por exemplo) quebra em vez de
       estourar o cartão. */
    overflow-wrap: anywhere;
    cursor: pointer;
    list-style: none;
}

.faq__pergunta::-webkit-details-marker {
    display: none;
}

/* O "+" VIRA "×" AO ABRIR. */
.faq__pergunta::after {
    content: "+";
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria);
    font-size: 22px;
    line-height: 1;
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.faq__item[open] .faq__pergunta::after {
    background: var(--cor-primaria);
    color: var(--cor-branco);
    transform: rotate(45deg);
}

.faq__pergunta:hover {
    color: var(--cor-primaria);
}

.faq__pergunta:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: -2px;
}

.faq__resposta {
    padding: 0 24px 22px;
    line-height: 1.7;
    color: var(--cor-texto);
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .faq__item,
    .faq__pergunta::after {
        transition: none;
    }
}

@media (max-width: 767.98px) {
    .faq {
        padding: 60px 0 70px;
    }

    .faq__titulo {
        font-size: 28px;
    }

    .faq__pergunta {
        padding: 16px 18px;
        font-size: 16px;
    }

    .faq__resposta {
        padding: 0 18px 18px;
    }
}