/* ===========================================================================
   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 base
   (www.portoimoveisrs.com.br, 2026-09-10 e 11). Não sobrou bloco da base
   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  [base]
     2. Destaques ........... a vitrine de imóveis em carrossel       [base]
     3. Faixa de banners .... o carrossel de três slides, em mescla   [base]
     4. Como vamos ajudar você? .. os seis cartões com ícone          [base]
     5. Escolha o tipo ...... os cinco ladrilhos com foto             [base]
     6. Responsivo dos destaques                                      [base]

   ⚠ SAÍRAM DAQUI (2026-09-10, a pedido do Sami) as duas seções que restavam da base e que a home da base 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.
   =========================================================================== */

/* ===========================================================================
   0. BANNER DO TOPO (partials/banner-topo.php)
   ---------------------------------------------------------------------------
   MEDIDO no print do cabeçalho (2026-09-21, janela de ~1524 CSS px):

     começa no pixel seguinte ao cabeçalho (y=111 do print = 90 CSS)
     largura cheia, sem container
     altura 495px no print ÷ 1,25 = 397 — que é a largura da janela dividida
       pela proporção do arquivo (1920x500 = 3,84)
     acaba em y=606 do print, e abaixo ficam 60px de respiro branco

   ⚠ O LEGADO TEM TETO DE 500px (`.flexslider { max-height: 500px }`), E NÓS
   NÃO TEMOS MAIS — saiu em 2026-09-22. Ele só fazia diferença acima de 1920px
   de janela, e o preço era CORTAR qualquer banner mais alto que a proporção
   3,84. Ver a nota sobre a altura logo abaixo.

   ⚠ ISTO SUBSTITUI A "FAIXA DE BUSCA COM FOTO DE FUNDO" da base como
   primeira coisa da home. A régua de busca continua existindo, mas agora vem
   DEPOIS do banner e sem foto atrás — ver a seção 1.
   =========================================================================== */

.banner-topo {
    margin: 0 0 60px;
    border-radius: 4px;
    overflow: hidden;
}

/* ⚠ A ALTURA É A DA IMAGEM — SEM TETO E SEM CORTE (Sami, 2026-09-22).
   
   Aqui havia `max-height: 500px` + `object-fit: cover`, medidos do
   `.flexslider { max-height: 500px }` do legado. Funcionava por COINCIDÊNCIA:
   o banner que a Busca cadastrou é 1920x500, exatamente a proporção que o
   teto pressupõe. Qualquer banner mais alto que isso era CORTADO em cima e
   embaixo, calado — "banners com altura maior vão estourar isso".
   
   Com `height: auto` e nada mais, a moldura acompanha a imagem: 1920x500 dá
   os mesmos 396px numa janela de 1520, e um 1920x700 dá 554 sem perder nada.
   
   ⚠ O QUE SE PERDE: acima de 1920px de janela a imagem passa a AMPLIAR em vez
   de ser cortada — o legado preferia cortar. Só aparece em monitor muito
   largo, e ampliar é menos grave do que sumir com metade do banner. Quem
   quiser nitidez lá cadastra um arquivo maior que 1920. */
.banner-topo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------------
   COM DOIS OU MAIS BANNERS: o carrossel compartilhado, em modo MESCLA
   ---------------------------------------------------------------------------
   ⚠ NADA ABAIXO VALE COM UM BANNER SÓ — que é o caso da BUL hoje. O partial
   nem imprime este bloco: sem `.banner-topo--varios` a seção continua sendo a
   `<picture>` solta de sempre, sem trilha, seta, bolinha nem JavaScript.

   MODO MESCLA e não rolagem lateral: o legado chama `flexslider()` sem opção
   nenhuma, e o padrão dele é `animation: "fade"`. Mesma decisão da galeria da
   ficha (ver 8o).

   GRADE NO LUGAR DE `position: absolute`: com todos os slides na MESMA célula,
   a faixa fica com a altura do mais alto e ninguém precisa de altura cravada.
   --------------------------------------------------------------------------- */

.banner-topo--varios {
    position: relative;
}

/* ⚠ A ALTURA DA FAIXA É A DO **PRIMEIRO** BANNER (Sami, 2026-09-22).
   
   Aqui era `display: grid` com todos os slides em `grid-area: 1/1`. Empilhava
   certo, mas a célula do grid fica com a altura do MAIS ALTO: com o banner 1 em
   3,840 e o banner 2 em 3,197, a faixa PULAVA de 396px para 476px ao trocar de
   slide — medido nos prints do Sami (1520,8 × 396,04 e 1520,8 × 475,76).
   
   AGORA SÓ O PRIMEIRO CONTA PARA A ALTURA: ele fica no fluxo normal e os demais
   saem dele (`position: absolute`), preenchendo a caixa que ele definiu. É por
   isso que a trilha vira `position: relative`.
   
   ⚠ ELE CONTINUA SENDO O PRIMEIRO MESMO QUANDO NÃO ESTÁ À MOSTRA — é o que
   segura a altura constante enquanto os outros passam. */
.banner-topo__trilha {
    position: relative;
    display: block;
    gap: 0;
    overflow: visible;
    scroll-snap-type: none;
}

/* DO SEGUNDO EM DIANTE: fora do fluxo, ocupando a caixa do primeiro. */
.banner-topo__item + .banner-topo__item {
    position: absolute;
    inset: 0;
}

/* E A IMAGEM DELES PREENCHE ESSA CAIXA. `cover` recorta o que sobra em vez de
   espremer — banner espremido fica com as pessoas achatadas. O corte é
   centrado, então o miolo do banner é o que fica.
   
   ⚠ O PRIMEIRO NÃO LEVA ISTO: é ele que dá a medida, e forçá-lo a preencher
   uma caixa que ele mesmo define não faria sentido.
   
   ⚠ O `<picture>` E O `<a>` PRECISAM ENCHER TAMBÉM. `height: 100%` só resolve
   contra pai de altura DEFINIDA, e entre o item e a imagem há o `<picture>`
   (que nasce `inline`) e, quando o banner tem link, um `<a>` — os dois de
   altura automática. Sem esta regra o `height: 100%` da imagem cai em `auto` e
   a faixa volta a pular, sem erro nenhum na tela. */
.banner-topo__item + .banner-topo__item a,
.banner-topo__item + .banner-topo__item picture {
    display: block;
    height: 100%;
}

.banner-topo__item + .banner-topo__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-topo__item {
    opacity: 0;
    /* `visibility` junto da opacidade: banner apagado não recebe clique nem
       entra na ordem do Tab. */
    visibility: hidden;
    /* ⚠ `linear`, NÃO `ease`. A curva do FlexSlider é praticamente reta; com
       `ease` a troca apaga rápido demais no meio e parece um corte. */
    transition: opacity .3s linear, visibility .3s linear;
}

.banner-topo__item.ativo {
    opacity: 1;
    visibility: visible;
}

/* SEM JAVASCRIPT ninguém acende o `.ativo`: o primeiro slide fica à mostra
   pelo `ativo` que o PHP já imprime, e os outros continuam apagados. */
@media (prefers-reduced-motion: reduce) {
    .banner-topo__item {
        transition: none;
    }
}

/* AS SETAS — sobre a imagem, centradas na altura. Somem abaixo de 992, como as
   da referência: no celular quem troca é o gesto (ver o modo mescla do
   site.js) e as bolinhas. */
.banner-topo__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .85);
    color: #333;
    cursor: pointer;
    transition: background .2s;
}

.banner-topo__seta:hover {
    background: #fff;
}

.banner-topo__seta svg {
    width: 16px;
    height: 16px;
    fill: currentcolor;
}

.banner-topo__seta--esq { left: 20px; }
.banner-topo__seta--dir { right: 20px; }

/* ⚠ AS SETAS APARECEM NO CELULAR (Sami, 2026-09-22). Aqui havia um
   `@media (max-width: 991.98px) { .banner-topo__seta { display: none } }`, e a
   troca de slide no telefone dependia do gesto e das bolinhas. O pedido foi
   direto: "quando tiver mais de um banner e aparecer os dots, faça ter as
   setas". A regra agora é essa — **seta onde há bolinha**.

   No telefone elas encolhem para não tapar o banner: 36px em vez de 44, e 10px
   da borda em vez de 20. */
@media (max-width: 767.98px) {
    .banner-topo__seta {
        width: 36px;
        height: 36px;
    }

    .banner-topo__seta svg {
        width: 14px;
        height: 14px;
    }

    .banner-topo__seta--esq { left: 10px; }
    .banner-topo__seta--dir { right: 10px; }
}

/* SLIDE SEM ARTE DE CELULAR NÃO EXISTE NO CELULAR — e a bolinha dele também
   não (Sami, 2026-09-22). Quem marca é o `$btSemMobile` do partial.

   ⚠ O CORTE É 767.98, O MESMO DO `<source media="...">` do `<picture>`. Se os
   dois divergirem, existe uma faixa de largura em que o slide aparece já
   usando a arte de computador — justamente o que isto evita. */
@media (max-width: 767.98px) {
    .banner-topo__item[data-sem-mobile],
    .banner-topo__bolinha[data-sem-mobile] {
        display: none;
    }

    /* SOBROU UM BANNER SÓ NO CELULAR: saem a fileira de bolinhas E as duas
       setas. Carrossel de um item não tem para onde ir, e bolinha ou seta que
       não leva a lugar nenhum é pior do que não ter. A faixa vira uma imagem
       parada, que é o certo aí.

       ⚠ É O MESMO MARCADOR PARA OS DOIS, e ele mora no PALCO por isso: as
       setas são IRMÃS da fileira de bolinhas, então de um atributo na fileira
       o CSS não alcançaria as setas. */
    .banner-topo__palco[data-um-no-celular] .banner-topo__bolinhas,
    .banner-topo__palco[data-um-no-celular] .banner-topo__seta {
        display: none;
    }
}

/* AS BOLINHAS — no pé da imagem, centradas. */
.banner-topo__bolinhas {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.banner-topo__bolinha {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .55);
    cursor: pointer;
    transition: background .2s;
}

.banner-topo__bolinha[aria-selected="true"],
.banner-topo__bolinha.ativa {
    background: #fff;
}

/* ===========================================================================
   0b. FAIXA DE SLIDERS (partials/home-sliders.php)
   ---------------------------------------------------------------------------
   A SEGUNDA lista de imagens do painel (tabela `Sliders`) — campanha, parceiro
   ou aviso. NÃO é o banner do topo.

   ⚠ NÃO HÁ O QUE MEDIR: o site no ar da Busca não tem esta faixa. O desenho
   segue o do banner do topo, que é o que já existe aqui, com duas diferenças:
   ela vive DENTRO do container (não é largura cheia) e nada nela é LCP.

   AS REGRAS DE ALTURA SÃO AS MESMAS DE 8ag/8af, e pelos mesmos motivos:
   a altura é a da imagem (sem teto, sem corte), e num carrossel quem manda é o
   PRIMEIRO item — os outros saem do fluxo e preenchem a caixa dele.
   =========================================================================== */

.sliders {
    margin: 0 0 60px;
}

.sliders__item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* --- Com dois ou mais: o carrossel compartilhado ------------------------- */

.sliders__palco {
    position: relative;
}

/* ⚠ SÓ O PRIMEIRO CONTA PARA A ALTURA — mesma armadilha do banner do topo
   (8ag): em `display: grid` a célula fica com a altura do MAIS ALTO e a faixa
   pula ao trocar de slide. Aqui o primeiro fica no fluxo e os outros saem
   dele. */
.sliders__trilha {
    position: relative;
    display: block;
    gap: 0;
    overflow: visible;
    scroll-snap-type: none;
}

.sliders__item + .sliders__item {
    position: absolute;
    inset: 0;
}

/* ⚠ O `<picture>` E O `<a>` PRECISAM ENCHER TAMBÉM: `height: 100%` só resolve
   contra pai de altura DEFINIDA, e os dois nascem de altura automática (o
   `<picture>` ainda por cima é `inline`). Sem isto a imagem cai em `auto` e a
   faixa volta a pular, sem erro nenhum na tela. */
.sliders__item + .sliders__item a,
.sliders__item + .sliders__item picture {
    display: block;
    height: 100%;
}

.sliders__item + .sliders__item img {
    height: 100%;
    object-fit: cover;
}

/* ⚠ O APAGADO VALE SÓ DENTRO DO CARROSSEL. Escrito em `.sliders__item` solto,
   ele alcançaria também a imagem ÚNICA — que não tem `.ativo` porque não há
   carrossel — e a faixa ficaria invisível. Prendendo a regra ao `__palco`, o
   caso de um slider só não precisa de exceção nenhuma. */
.sliders__palco .sliders__item {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s linear, visibility .3s linear;
}

.sliders__palco .sliders__item.ativo {
    opacity: 1;
    visibility: visible;
}

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

/* AS SETAS E AS BOLINHAS — o mesmo desenho do banner do topo. */
.sliders__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .85);
    color: #333;
    cursor: pointer;
    transition: background .2s;
}

.sliders__seta:hover {
    background: #fff;
}

.sliders__seta svg {
    width: 16px;
    height: 16px;
    fill: currentcolor;
}

.sliders__seta--esq { left: 20px; }
.sliders__seta--dir { right: 20px; }

.sliders__bolinhas {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.sliders__bolinha {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .55);
    cursor: pointer;
    transition: background .2s;
}

.sliders__bolinha[aria-selected="true"],
.sliders__bolinha.ativa {
    background: #fff;
}

/* NO CELULAR as setas encolhem, como as do banner do topo — e continuam à
   vista, porque aqui também vale "seta onde há bolinha".

   ⚠ E SLIDER SEM ARTE DE CELULAR SOME, com a bolinha dele junto — a MESMA
   regra do banner (8ah). Nasceu ao contrário (copiei a decisão da base, que
   mantém o item) e o Sami mandou igualar em 2026-09-22: com a altura travada
   na do primeiro, a arte de computador espremida na caixa do celular vira um
   recorte sem sentido.

   ⚠ O CORTE É 767.98, O MESMO DO `<source media="...">` do `<picture>`. Se os
   dois divergirem, existe uma faixa de largura em que o slider aparece já
   usando a arte de computador — justamente o que isto evita. */
@media (max-width: 767.98px) {
    .sliders {
        margin-bottom: 40px;
    }

    .sliders__seta {
        width: 36px;
        height: 36px;
    }

    .sliders__seta svg {
        width: 14px;
        height: 14px;
    }

    .sliders__seta--esq { left: 10px; }
    .sliders__seta--dir { right: 10px; }

    .sliders__item[data-sem-mobile],
    .sliders__bolinha[data-sem-mobile] {
        display: none;
    }

    /* SOBROU UM SÓ: saem as duas setas E a fileira de bolinhas. Carrossel de um
       item não tem para onde ir. */
    .sliders__palco[data-um-no-celular] .sliders__bolinhas,
    .sliders__palco[data-um-no-celular] .sliders__seta {
        display: none;
    }
}

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

/* ===========================================================================
   2. DESTAQUES (a vitrine de imóveis em carrossel)
   ---------------------------------------------------------------------------
   MEDIDO NO SITE NO AR DA base (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 base (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;
}

/* 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);
}

/* ===========================================================================
   4. COMO PODEMOS TE AJUDAR? (partials/ajuda.php)
   ---------------------------------------------------------------------------
   MEDIDO em 2026-09-21 na cadeia de CSS do site no ar da Busca — a tabela
   inteira está no cabeçalho do partial. Em resumo:

     seção ..... 55px de respiro (35 abaixo de 768)
     título .... 28px, #777, centrado, 23 de margem embaixo
     cartão .... raio 8, `overflow: hidden`, 30 de margem embaixo
     ícone ..... 256x256 no tamanho natural
     frente .... degradê preto no pé, texto branco colado embaixo
     verso ..... branco a 90%, texto preto no meio, botão #3333FF
     troca ..... 0,9s `cubic-bezier(.19, 1, .22, 1)`, uma face saindo pela
                 esquerda e a outra entrando pela direita

   ⚠ O CARTÃO TEM A ALTURA DO ÍCONE, não uma altura própria: no legado o
   `.team-block` só contém a imagem (as duas faces são `position: absolute`).
   Acima de 768 a coluna é mais larga que 256, então sobra fundo à direita do
   ícone — é assim no site no ar, não é engano daqui.

   ⚠ TROCA POR `:hover` É TROCA QUE NÃO EXISTE NO CELULAR. O legado tem
   `.team-block:focus` junto, mas `:focus` num <div> não acontece. Aqui o
   cartão é um <a>, então `:focus-visible` funciona de verdade — e abaixo de
   992, onde não há ponteiro, o VERSO fica à mostra o tempo todo: é a única
   forma de o botão existir para quem está no celular.
   =========================================================================== */

.ajuda {
    padding: 55px 0;
}

@media (max-width: 767.98px) {
    .ajuda {
        padding: 35px 0;
    }
}

/* `.labelBanner` do legado: 28px com `!important`. Não é <h2>: no HTML de lá é
   um <label> solto, e virar título de nível 2 mudaria a hierarquia da página
   sem que a referência peça.

   ⚠ DOIS VALORES CORRIGIDOS EM 2026-09-21, medidos no print do Sami e depois
   confirmados na ordem de carga do legado:

   1. A COR É #6c757d, NÃO #777. O `.text-muted` que vale é o do
      `bootstrap.min.css` (Bootstrap 4, com `!important`), não o #777 do
      Bootstrap 3 que o `bootstrap.css` traz antes. No print o texto sai
      rgb(108,117,125), que é exatamente #6c757d.
   2. É NEGRITO. O `styles.css` declara `label { font-weight: 400 }`, mas o
      `bootstrap.css` vem DEPOIS e traz o `label { font-weight: 700 }` do
      Bootstrap 3. No print a haste da letra mede 4,8px — espessura de 700 a
      28px, não de 400 (que daria ~2,6).

   A LINHA É 1,42857 (a do corpo), não 1,2: com 28px dá 40px de caixa, e é
   dela que sai a posição medida do texto no print. */
.ajuda__titulo {
    margin: 0 0 23px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.42857143;
    color: #6c757d;
    text-align: center;
}

/* A GRADE DO BOOTSTRAP 3, em flex: goteira de 30 (15 de cada lado), que é o
   que a `.row` de lá faz com a margem negativa. */
.ajuda__grade {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.ajuda__coluna {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .ajuda__coluna {
        flex-basis: 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .ajuda__coluna {
        flex-basis: 33.3333%;
        max-width: 33.3333%;
    }
}

.ajuda__cartao {
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 8px;
    text-decoration: none;
}

.ajuda__icone {
    display: block;
    width: 256px;
    max-width: 100%;
    height: auto;
}

/* ---- As duas faces ------------------------------------------------------ */

.ajuda__frente,
.ajuda__verso {
    position: absolute;
    inset: 0;
    display: block;
    transition: transform .9s cubic-bezier(.19, 1, .22, 1);
}

/* O DEGRADÊ: transparente até 0%, 20% de preto aos 65% e 80% no pé. É o mesmo
   SVG em base64 que o legado usa; escrito como `linear-gradient`, que é o que
   o navegador de hoje lê da própria folha dele (a regra traz as duas). */
.ajuda__frente {
    background-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .2) 65%,
        rgba(0, 0, 0, .8) 100%);
}

.ajuda__verso {
    background-color: rgba(255, 255, 255, .9);
    transform: translate3d(100%, 0, 0);
}

.ajuda__cartao:hover .ajuda__frente,
.ajuda__cartao:focus-visible .ajuda__frente {
    transform: translate3d(-100%, 0, 0);
}

.ajuda__cartao:hover .ajuda__verso,
.ajuda__cartao:focus-visible .ajuda__verso {
    transform: translate3d(0, 0, 0);
}

/* O MIOLO de cada face: `left: 0; right: 0`, respiro 15x20, centrado. A
   frente cola no pé; o verso fica no meio da altura. */
.ajuda__frente-miolo,
.ajuda__verso-miolo {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    padding: 15px 20px;
    text-align: center;
}

.ajuda__frente-miolo {
    bottom: 0;
}

.ajuda__verso-miolo {
    top: 50%;
    transform: translateY(-50%);
}

/* ---- Texto -------------------------------------------------------------- */

.ajuda__nome {
    display: block;
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--cor-branco);
}

.ajuda__linha {
    display: block;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--cor-branco);
}

.ajuda__linha--verso {
    color: #000;
}

.ajuda__descricao {
    display: block;
    margin: 15px 0 20px;
    font-size: 14px;
    font-weight: 300;
    line-height: 23px;
    color: rgba(0, 0, 0, .7);
}

/* O BOTÃO — `.btn.btn-danger`, que de "danger" só tem o nome: o `.btn-danger`
   do tema repinta o fundo de **#3333FF** (azul).

   ⚠ TRÊS VALORES ERRADOS AQUI ATÉ 2026-09-21, e os três porque eu li o `.btn`
   do BOOTSTRAP em vez do `.btn` do tema, que vem depois e vence:

     padding ....... era 6px 12px; o certo é **11px 15px** → o botão fecha 42
                     de altura, não 34
     borda ......... eu desenhei `1px solid #d43f3a`, a `border-color` que o
                     `.btn-danger` declara. Mas o `.btn` do tema diz
                     **`border: none`**, e borda que não existe não tem cor:
                     no site no ar o botão é azul CHAPADO, sem moldura
     peso .......... era 400; o `.btn` do tema usa **500**

   Medido no print do Sami (2026-09-21), que é do site no ar: o azul começa no
   primeiro pixel da caixa (nada de moldura vermelha), a caixa tem 42px de
   altura e o texto nasce 11px abaixo do topo dela.

   ⚠ E OS 8px A MAIS DO BOTÃO MEXEM NO CARTÃO INTEIRO: o verso é centrado
   verticalmente, então o bloco todo sobe 4px. Com os valores errados o título
   caía em 64,5 e o botão em 160,5; com estes, em 60,5 e 156,5 — que é o que o
   print mede. */
.ajuda__botao {
    display: inline-block;
    padding: 11px 15px;
    border: none;
    border-radius: 4px;
    background-color: #3333ff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857143;
    color: var(--cor-branco);
    text-align: center;
}

/* ---- Sem ponteiro: o cartão fica na FRENTE ------------------------------
   ⚠ AQUI O VERSO FICAVA ABERTO, e era decisão errada (corrigida em
   2026-09-22, com o print do celular do Sami): sem ponteiro os três cartões
   apareciam virados, com o ícone lavado atrás do véu branco a 90% e a frente
   — que é o desenho da referência — nunca aparecendo.

   No site no ar a troca é `:hover`, e no toque o navegador só dispara isso
   DEPOIS do primeiro toque. Ou seja: lá o celular mostra a FRENTE, como o
   desktop antes de passar o mouse.

   O botão do verso não faz falta no toque: o cartão INTEIRO é o link, e vai
   para o mesmo lugar que o botão. Ver a nota no partials/ajuda.php. */ 

/* ===========================================================================
   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%;
    }

    /* 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;
    }

    /* 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;
    }
}

/* ===========================================================================
   BLOG NA HOME (partials/blog-home.php)
   ---------------------------------------------------------------------------
   Recurso do painel, que o site no ar não tem: não há medida a copiar. Só o
   INVÓLUCRO mora aqui — o cabeçalho, o respiro da seção e o botão do pé.

   ⚠ A GRADE E O CARTÃO NÃO ESTÃO AQUI. `.blog-grade` e `.blog-card*` são
   componente compartilhado com a /blog e vivem no bloco 5b do style.css.
   Estilo de cartão escrito neste arquivo só vale na home e faz as duas telas
   divergirem calado.

   FUNDO BRANCO, ao contrário dos depoimentos (`--cor-fundo-alt`): as duas
   seções são vizinhas, e duas faixas cinzas seguidas apagariam a divisão
   entre elas.
   =========================================================================== */
.blog-home {
    padding: 90px 0 100px;
}

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

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

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

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

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

    .blog-home__cabecalho {
        margin-bottom: 30px;
    }

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