/* ===========================================================================
   home.css — estilos EXCLUSIVOS da página inicial (pages/home.php)
   =========================================================================== */

/* ===========================================================================
   PREENCHIMENTO NO HOVER (igual aos botões .theme-btn do paesi)
   =========================================================================== */
.solucao__link,
.busca-hero__avancada,
.busca-hero__enviar,
.destaque-card__botao {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color .4s ease;
}

.solucao__link::before,
.busca-hero__avancada::before,
.busca-hero__enviar::before,
.destaque-card__botao::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background: var(--preenche, var(--cor-site-1));
    transition: width .4s ease;
}

.solucao__link:hover::before,
.busca-hero__avancada:hover::before,
.busca-hero__enviar:hover::before,
.destaque-card__botao:hover::before {
    left: 0;
    width: 100%;
}

.solucao__link:hover,
.busca-hero__avancada:hover,
.busca-hero__enviar:hover,
.destaque-card__botao:hover {
    transform: none;
    color: var(--cor-branco);
}

/* Botões que já são azuis preenchem de verde (senão o hover não apareceria). */
.busca-hero__enviar {
    --preenche: var(--cor-primaria-escura);
}

/* ===========================================================================
   1. HERO
   =========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    /* Acima das seções seguintes: o cartão de busca e as listas dos dropdowns
       (position:fixed, mas presas ao contexto do hero) invadem a seção de baixo e
       ficavam POR BAIXO dos elementos posicionados dela (títulos, cartões). */
    z-index: 5;
    height: 922px;
    min-height: 620px;
    background: var(--cor-fundo-band);
    /* O cartão de busca desce por cima da seção seguinte (ver "2. BUSCA"), então
       o hero não corta o que passa da base; o corte da foto fica no banner. */
    overflow: visible;
    --busca-saida: 100px;
    margin-bottom: calc(var(--busca-saida) + var(--gap-lg));
}

.hero__banner {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    --carrossel-itens: 1;
}

.hero__banner picture,
.hero__banner img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__banner .carrossel__janela {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
}

.hero__banner .carrossel__trilha {
    height: 100%;
    gap: 0;
    padding-block: 0;
}

.hero__banner .carrossel__item {
    position: relative;
    height: 100%;
}

@media (max-width: 767px) {
    .hero__banner .carrossel__item--sem-mobile {
        display: none;
    }
}
.hero__slide-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    text-align: left;
    color: var(--cor-branco);
}

.hero__slide-titulo {
    font-size: 60px;
    line-height: 75px;
    margin-bottom: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    text-align: left;
}

/* Trecho em destaque do título (o painel manda <span class="hero-title-highlight">…</span>). */
.hero__slide-titulo .hero-title-highlight {
    color: var(--cor-site-5);
}

.hero__slide-subtitulo {
    font-size: 24px;
    font-weight: 500;
    line-height: 35px;
    letter-spacing: 0.04em;
    color: #fff;
    max-width: 670px;
    text-align: left;
}

.hero__slide-botao {
    text-shadow: none;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
}

.hero__overlay .container {
    pointer-events: auto;
}

.hero__overlay .container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-top: 300px;
}






/* ===========================================================================
   1c. SLIDERS (fora do topo/hero — ver Painel::sliders())
   =========================================================================== */
.sliders-secao__carrossel .carrossel__item {
    flex: 0 0 100%;
}

.sliders-secao__carrossel .carrossel__item picture,
.sliders-secao__carrossel .carrossel__item img {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: var(--raio-lg);
}

@media (max-width: 767px) {
    .sliders-secao__carrossel .carrossel__item picture,
    .sliders-secao__carrossel .carrossel__item img {
        height: 320px;
    }
}

/* ===========================================================================
   2. BUSCA (abas + cartão branco, ancorados na base do banner)
   =========================================================================== */
/* Cartão ancorado na base do hero (desce --busca-saida para fora do banner),
   fora do fluxo: o título/subtítulo do slide continuam centralizados no banner. */
.busca-hero {
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: calc(-1 * var(--busca-saida));
    pointer-events: auto;
}

.busca-hero__abas {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-left: 50px;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .06);
}

.busca-hero__aba {
    padding: 23px 58px;
    border: none;
    border-radius: 0;
    background: var(--cor-branco);
    font-size: 20px;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

.busca-hero__aba:hover,
.busca-hero__aba[aria-pressed="true"] {
    background: var(--cor-site-1);
    color: var(--cor-branco);
}

.busca-hero__form {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 25px;
    align-items: end;
    padding: 20px 50px 50px;
    background: var(--cor-branco);
    border-radius: 6px;
    box-shadow: 0 13px 35px #0000000a;
}

/* Rótulo acima do campo, como no paesi (normal, 16px, preto). */
.busca-hero .campo {
    gap: 0;
    margin-top: 30px;
}.busca-hero .campo>label {
    display: block;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #000;
}

/* Todos os controles com a mesma cara: 60px, cantos 12px, sombra suave. */
.busca-hero .campo>input,
.busca-hero .dropdown__gatilho {
    height: 60px;
    padding: 15px 30px;
    border: 1px solid #f1f1f1;
    border-radius: 12px;
    box-shadow: 0 12px 30px #00000012;
    font-size: 14px;
    font-weight: 400;
    color: #818790;
}

.busca-hero .campo>input::placeholder,
.busca-hero .dropdown__texto--vazio {
    color: #818790;
}

/* O X do type="search" no WebKit some: o campo já é limpo com Backspace. */
.busca-hero input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.busca-hero__avancada,
.busca-hero__enviar {
    height: 60px;
    margin-top: 30px;
    padding: 0 1rem;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cor-branco);
}

.busca-hero__avancada {
    background: var(--cor-primaria-escura);
    border-color: var(--cor-primaria-escura);
}

.busca-hero__enviar {
    background: var(--cor-site-1);
    border-color: var(--cor-site-1);
}

.busca-hero__avancada svg,
.busca-hero__enviar svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* --- Lista do dropdown: mesmo menu e animação do paesi (nice-select) ------
   Abre "crescendo" de cima (scale .75 + translateY -21px → 1) com a curva
   cubic-bezier(.5,0,0,1.25), que dá o leve repique. O menu usa o atributo
   `hidden` (display:none), que não anima; aqui o estado fechado vira
   opacity/visibility/transform, então o JS (dropdown*.js) segue o mesmo. */
.busca-hero .dropdown__menu {
    /* Sem barra de rolagem na lista: o JS limita a 264px (inline), aqui isso é
       ignorado — a lista só rola se passar de 70% da altura da tela (ex.: a
       lista de bairros de uma capital). */
    max-height: 70vh !important;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--cor-branco);
    box-shadow: 0 10px 20px #0000000d, 0 0 0 1px rgba(68, 68, 68, .11);
    transform-origin: 50% 0;
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    /* só opacity/transform animam (top/left vêm do JS e não podem deslizar) */
    transition: transform .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out;
}

.busca-hero .dropdown__menu[hidden] {
    display: block;
    /* visibility só some depois da animação de saída */
    transition: transform .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out, visibility 0s linear .2s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.75) translateY(-21px);
}

/* Opções: 40px de altura, texto 14px cinza. Hover, teclado e a opção escolhida
   ficam azul com texto branco; a escolhida em negrito (paesi: .option.selected). */
.busca-hero .dropdown__opcao {
    min-height: 40px;
    padding: 0 30px;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    color: #818790;
    transition: all .2s;
}

.busca-hero .dropdown__opcao:hover,
.busca-hero .dropdown__opcao--ativa,
.busca-hero .dropdown__opcao[aria-selected="true"] {
    background: var(--cor-site-1);
    box-shadow: none;
    color: var(--cor-branco);
}

.busca-hero .dropdown__opcao[aria-selected="true"] {
    font-weight: 700;
}

/* Com o mouse na lista, só a opção sob o ponteiro fica destacada. */
.busca-hero .dropdown__menu:hover .dropdown__opcao:not(:hover) {
    background: transparent;
    color: #818790;
}

/* Seta do gatilho: chevron cinza que gira ao abrir (paesi: rotate 45° → -135°). */
.busca-hero .dropdown__gatilho {
    padding-right: 30px;
}

.busca-hero .dropdown__seta {
    width: 14px;
    height: 14px;
    color: #818790;
    transition: transform .15s ease-in-out;
}

/* ===========================================================================
   RESPONSIVO DO CARD DE BUSCA
   =========================================================================== */
@media (max-width: 1199px) {
    .busca-hero__form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-inline: 30px;
    }

    .busca-hero {
        left: 30px;
        right: 30px;
    }

    .busca-hero__abas {
        margin-left: 20px;
    }
}

@media (max-width: 767px) {
    .hero {
        --busca-saida: 60px;
    }

    .busca-hero {
        left: var(--container-pad);
        right: var(--container-pad);
    }

    .busca-hero__abas {
        width: 100%;
        margin-left: 0;
    }

    .busca-hero__aba {
        flex: 1;
        padding: 16px 8px;
        font-size: 15px;
    }

    .busca-hero__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 12px;
        padding: 6px 16px 24px;
    }

    .busca-hero__avancada,
    .busca-hero__enviar {
        grid-column: 1 / -1;
    }
}

@media (max-width: 460px) {
    .busca-hero__form {
        grid-template-columns: 1fr;
    }
}

/* ===========================================================================
   1a. SOLUÇÕES — "Saiba como a <imobiliária> pode te ajudar!"
   =========================================================================== */
.solucoes {
    position: relative;
    overflow: hidden;
    padding: 90px 0 100px;
}

.solucoes__fundo {
    position: absolute;
    left: 0;
    top: 60px;
    width: 330px;
    height: 330px;
    object-fit: contain;
    pointer-events: none;
}

.solucoes__grade {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.solucao {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px;
    height: fit-content;
    border: 2px solid #ededed91;
    border-radius: 12px;
    background: var(--cor-branco);
    box-shadow: 0 10px 17px #0000000a;
    text-align: center;
    transition: border-color .4s ease;
}

.solucao:hover {
    border-color: var(--cor-site-1);
}

.solucao__icone {
    width: auto;
    max-height: 100px;
    margin-bottom: 15px;
}

.solucao__titulo {
    margin: 0 0 10px;
    font-size: 24px;
    transition: color .4s ease;
}

.solucao:hover .solucao__titulo {
    color: var(--cor-site-1);
}

.solucao__texto {
    margin: 0;
    color: var(--cor-texto-suave);
    line-height: 1.7;
}

/* "Botão" do rodapé do cartão: parado é só texto; no hover do próprio botão a
   cor da marca entra da esquerda para a direita (ver "PREENCHIMENTO", abaixo),
   igual aos botões do paesi. Sempre alinhado embaixo do cartão. */
.solucao__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cor-site-1);
}

.solucao__texto {
    margin-bottom: 30px;
}

.solucao__link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@media (max-width: 767px) {
    .solucoes { padding: 60px 0; }
    .solucoes__fundo { width: 200px; height: 200px; top: 20px; }
    .solucoes__cabecalho { margin-bottom: 40px; }
    .solucoes__titulo { font-size: 32px; }
    .solucao { padding: 40px 24px; }
}

/* ===========================================================================
   1a2. DESTAQUES DE VENDA E LOCAÇÃO (carrossel de 3 cards, setas nas laterais)
   Reaproveita o cabeçalho de .solucoes (chapéu com fios + título grande).
   =========================================================================== */
.destaques {
    --dest-gap: 34px;
    padding: 90px 0;
    background: var(--cor-fundo-alt);
}

.destaques__carrossel {
    --carrossel-itens: 3;
    position: relative;
}

.destaques__carrossel .carrossel__trilha {
    gap: var(--dest-gap);
}

.destaques__carrossel .carrossel__item {
    flex-basis: calc((100% - (var(--carrossel-itens) - 1) * var(--dest-gap)) / var(--carrossel-itens));
}

/* Setas quadradas fora da coluna dos cards, centradas na altura da foto. */
.destaques__seta {
    position: absolute;
    top: 200px;
    z-index: 3;
    width: 54px;
    height: 54px;
    border-radius: 0;
}

.destaques__seta {
    border: 2px solid #ededed;
    background: transparent;
    color: #818790;
    transition: background .4s ease, color .4s ease, border-color .4s ease;
}

.destaques__seta:hover:not(:disabled) {
    border-color: transparent;
    background: var(--cor-site-1);
    color: var(--cor-branco);
}

.destaques__seta--anterior { left: -98px; }
.destaques__seta--proxima { right: -98px; }

.destaque-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: var(--cor-branco);
    box-shadow: 0 10px 30px #0000000a;
}

.destaque-card__foto {
    position: relative;
    display: block;
    height: 270px;
    background: var(--cor-fundo-band);
}

.destaque-card__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.destaque-card__selo {
    position: absolute;
    top: 30px;
    left: 30px;
    padding: 9px 18px;
    border-radius: 6px;
    background: var(--cor-branco);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--cor-site-1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.destaque-card__corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 40px 32px 32px;
}

.destaque-card__titulo {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
}

.destaque-card__titulo a { color: #1a1a1a; }

.destaque-card__local {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

.destaque-card__local svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: var(--cor-primaria-escura);
}

.destaque-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 20px 0;
    border-block: 1px solid var(--cor-borda);
    list-style: none;
}

.destaque-card__chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 20px;
    border: 1px solid #f1f1f1;
    border-radius: 12px;
    box-shadow: 0 6px 18px #00000010;
    font-size: 16px;
    color: #818790;
    cursor: pointer;
}
.destaque-card__chips li:hover {
    background-color: var(--cor-site-1);
    color: #fff;
    border-color: transparent;
}

.destaque-card__chips svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Botão sempre embaixo, mesmo com cards de alturas diferentes. */
.destaque-card__botao {
    align-self: center;
    margin-top: auto;
    padding: 15px 40px;
    border-radius: 8px;
    background: var(--cor-primaria-escura);
    font-weight: 700;
    color: var(--cor-branco);
}

.destaque-card__chips + .destaque-card__botao,
.destaque-card__local + .destaque-card__botao { margin-top: 25px; }

@media (max-width: 1499px) {
    .destaques__seta--anterior { left: -12px; }
    .destaques__seta--proxima { right: -12px; }
}

@media (max-width: 1199px) {
    .destaques__carrossel { --carrossel-itens: 2; }
}

@media (max-width: 767px) {
    .destaques { padding: 60px 0; }
    .destaques__carrossel { --carrossel-itens: 1; }
    .destaque-card__foto { height: 220px; }
    .destaque-card__corpo { padding: 28px 22px 24px; }
    .destaques__seta { top: 150px; }
}

/* ===========================================================================
   1b. LINKS RÁPIDOS (faixa verde: ajuda + boletos) E 1b2. IMÓVEL POR TIPO
   =========================================================================== */
.atalhos {
    position: relative;
    padding: 110px 0 260px;
    background: var(--cor-site-2);
}

.atalhos::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(1400px, 100%);
    height: 150px;
    transform: translateX(-50%);
    background: var(--cor-fundo-alt);
}

.atalhos__grade {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px 30px;
}

.atalho {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    max-width: 338px;
    color: var(--cor-branco);
}

.atalho__icone {
    display: grid;
    flex: none;
    place-items: center;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #23293d;
    transition: background .4s ease;
}

.atalho__icone svg {
    width: 26px;
    height: 26px;
    fill: var(--cor-branco);
}

.atalho:hover .atalho__icone {
    background: var(--cor-site-1);
}

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

.atalho__titulo {
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
    color: var(--cor-branco);
}

.atalho__texto {
    line-height: 1.7;
    color: rgba(255, 255, 255, .7);
}

.tipos-home {
    padding: 0 0 150px;
    background: var(--cor-fundo-alt);
}

.tipos-home__carrossel {
    --carrossel-itens: 3;
    --dest-gap: 30px;
    position: relative;
}

.tipos-home__carrossel .carrossel__trilha {
    gap: var(--dest-gap);
}

.tipos-home__carrossel .carrossel__item {
    flex-basis: calc((100% - (var(--carrossel-itens) - 1) * var(--dest-gap)) / var(--carrossel-itens));
}

/* Setas centradas na altura da lista (a base .destaques__seta, acima, fixa a
   posição na altura da foto do card de destaque). */
.tipos-home__seta {
    top: 50%;
    margin-top: -27px;
}

.tipo-home {
    display: block;
    text-align: center;
}

.tipo-home__foto {
    display: block;
    overflow: hidden;
}

.tipo-home__foto img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .4s ease;
}

.tipo-home:hover .tipo-home__foto img {
    transform: scale(1.1);
}

.tipo-home__rotulo {
    display: block;
    margin-top: 35px;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    color: #1a1a1a;
    transition: color .4s ease;
}

.tipo-home:hover .tipo-home__rotulo {
    color: var(--cor-site-1);
}

@media (max-width: 1199px) {
    .atalhos { padding: 80px 0 200px; }
    .tipos-home__carrossel { --carrossel-itens: 2; }
}

@media (max-width: 991px) {
    .atalhos__grade { flex-direction: column; }
    .atalho { max-width: none; }
}

@media (max-width: 767px) {
    .atalhos { padding: 60px 0 160px; }
    .atalho__titulo { font-size: 24px; margin-bottom: 10px; }
    .tipos-home { padding-bottom: 80px; }
    .tipos-home__carrossel { --carrossel-itens: 1; }
}

/* ===========================================================================
   SEÇÕES DE BAIXO DA HOME (app, redes, depoimentos, blog, índices)
   =========================================================================== */
.home-secao {
    padding: 90px 0;
}

.home-secao--alt {
    background: var(--cor-fundo-alt);
}

.home-secao--compacta {
    padding: 50px 0;
}

.home-secao__rodape {
    margin-top: 50px;
    text-align: center;
}

/* Botão verde de CTA: 10px; o azul entra da esquerda p/ direita no hover. */
.home-botao {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    border-radius: 10px;
    background: var(--cor-site-2);
    font-size: 16px;
    font-weight: 500;
    color: var(--cor-branco);
    transition: color .4s ease;
}

.home-botao::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background: var(--cor-site-1);
    transition: width .4s ease;
}

.home-botao:hover {
    color: var(--cor-branco);
}

.home-botao:hover::before {
    left: 0;
    width: 100%;
}

.home-botao svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ===========================================================================
   APP — fundo cinza claro, texto à direita do mockup
   =========================================================================== */
.app-promo {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    /* Largura total, degradê da cor 1 (azul) para a cor 2 (verde), com brilhos redondos de fundo. */
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .16), transparent 38%),
        radial-gradient(circle at 4% 96%, rgba(255, 255, 255, .1), transparent 40%),
        linear-gradient(135deg, var(--cor-site-1) 0%, var(--cor-site-2) 100%);
    color: var(--cor-branco);
}

/* Texto e lojas à esquerda, 4 vantagens à direita (dentro do container). */
.app-promo__painel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: 50px;
}

.app-promo__texto,
.app-promo__vantagens {
    position: relative;
}

.app-promo__chapeu {
    position: relative;
    display: block;
    width: fit-content;
    margin-bottom: 15px;
    padding-right: 55px;
    font-size: 18px;
    font-weight: 500;
    color: var(--cor-branco);
}

.app-promo__chapeu::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 50%;
    width: 40px;
    height: 2px;
    background: var(--cor-branco);
}

.app-promo__titulo {
    margin: 0 0 20px;
    font-size: 40px;
    line-height: 1.25;
    color: var(--cor-branco);
}

.app-promo__subtitulo {
    margin: 0 0 30px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .85);
}

.app-promo__rotulo {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
}

.app-promo__lojas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.app-promo__lojas img {
    display: block;
    height: 47px;
    width: auto;
}

.app-promo__vantagens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-promo__vantagens li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 24px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(4px);
    transition: background .4s ease, transform .4s ease;
}

.app-promo__vantagens li:hover {
    background: rgba(255, 255, 255, .18);
    transform: translateY(-4px);
}

.app-promo__icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: var(--cor-branco);
    color: var(--cor-site-1);
}

.app-promo__icone svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.app-promo__vantagens strong {
    font-size: 18px;
    color: var(--cor-branco);
}

.app-promo__vantagens li > span:last-child {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
}

@media (max-width: 991px) {
    .app-promo__painel { grid-template-columns: 1fr; gap: 40px; }
    .app-promo__titulo { font-size: 32px; }
}

@media (max-width: 575px) {
    .app-promo { padding: 60px 0; }
    .app-promo__vantagens { grid-template-columns: 1fr; }
    .app-promo__lojas { justify-content: flex-start; }
}

/* ===========================================================================
   DEPOIMENTOS — carrossel de 3 cartões brancos; setas quadradas nas laterais
   =========================================================================== */
.depoimentos-carrossel {
    --carrossel-itens: 3;
}

.depoimentos-viewport {
    position: relative;
}

.depoimentos-contador {
    display: block;
    margin-top: 30px;
    text-align: center;
}

.depoimento-spot {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 40px 32px 32px;
    border: 2px solid #f4f4f4;
    border-radius: 12px;
    background: var(--cor-branco);
    box-shadow: 0 10px 17px #0000000a;
    transition: border-color .4s ease;
}

.depoimento-spot:hover {
    border-color: var(--cor-site-1);
}

.depoimento-spot__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.depoimento-spot__aspas {
    font-size: 3.5rem;
    line-height: .8;
    color: var(--cor-site-1);
    opacity: .25;
}

.depoimento-spot__nota {
    display: flex;
    gap: 3px;
    font-size: 18px;
    line-height: 1;
}

.depoimento-spot__estrela {
    color: #e4e4e4;
}

.depoimento-spot__estrela--cheia {
    color: #f5a623;
}

/* min-height reserva ~5 linhas: o rodapé (foto + nome) alinha entre os cartões. */
.depoimento-spot__texto {
    min-height: calc(1.7em * 5);
    margin: 0 0 15px;
    line-height: 1.7;
    color: var(--cor-texto-suave);
    text-align: left;
}

/* Acima de ~280 caracteres (home.php) trava em 5 linhas; o resto abre no AlertSami. */
.depoimento-spot__texto--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

.depoimento-spot__ver-mais {
    align-self: flex-start;
    margin-bottom: 15px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-site-1);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.depoimento-spot__quem {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #f4f4f4;
}

.depoimento-spot__moldura {
    flex: none;
    width: 50px;
    height: 50px;
}

.depoimento-spot__foto,
.depoimento-spot__iniciais {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.depoimento-spot__foto {
    object-fit: cover;
}

.depoimento-spot__iniciais {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-site-1);
    font-weight: 700;
    color: var(--cor-branco);
}

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

.depoimento-spot__nome {
    font-size: 17px;
    color: #1a1a1a;
}

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

@media (max-width: 1199px) {
    .depoimentos-carrossel { --carrossel-itens: 2; }
}

@media (max-width: 767px) {
    .home-secao { padding: 60px 0; }
    .depoimentos-carrossel { --carrossel-itens: 1; }
    .depoimento-spot { padding: 28px 22px 24px; }
}

/* ===========================================================================
   BLOG — 3 cartões; "Ver todos os posts" centralizado embaixo
   =========================================================================== */
.blog-carrossel {
    --carrossel-itens: 3;
    position: relative;
}

.blog-carrossel__lista {
    position: relative;
}

.blog-carrossel .carrossel__trilha {
    gap: 30px;
}

.blog-carrossel .carrossel__item {
    flex-basis: calc((100% - (var(--carrossel-itens) - 1) * 30px) / var(--carrossel-itens));
}

.blog-carrossel .blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 2px solid #f4f4f4;
    border-radius: 12px;
    background: var(--cor-branco);
    box-shadow: 0 13px 25px #0000000a;
    transition: border-color .4s ease;
}

.blog-carrossel .blog-card:hover {
    border-color: var(--cor-site-1);
}

.blog-carrossel .blog-card__foto {
    position: relative;
    height: 230px;
    overflow: hidden;
}

.blog-carrossel .blog-card__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.blog-carrossel .blog-card:hover .blog-card__foto img {
    transform: scale(1.1);
}

.blog-carrossel .blog-card__corpo {
    padding: 30px 32px 32px;
}

.blog-carrossel .blog-card__categoria {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cor-site-1);
}

.blog-carrossel .blog-card__titulo {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.3;
    color: #1a1a1a;
    transition: color .4s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.blog-carrossel .blog-card:hover .blog-card__titulo {
    color: var(--cor-site-1);
}

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

@media (max-width: 1199px) {
    .blog-carrossel { --carrossel-itens: 2; }
}

@media (max-width: 767px) {
    .blog-carrossel { --carrossel-itens: 1; }
}

/* ===========================================================================
   ÍNDICES — cartões com o valor do mês em destaque
   =========================================================================== */
.indices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.indice {
    --indice-cor: var(--cor-texto-suave);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 40px 32px 32px;
    border: 2px solid #f4f4f4;
    border-radius: 12px;
    background: var(--cor-branco);
    box-shadow: 0 10px 17px #0000000a;
    transition: border-color .4s ease;
}

.indice:hover {
    border-color: var(--cor-site-1);
}

.indice--alta { --indice-cor: #237a45; }
.indice--baixa { --indice-cor: #c62828; }

.indice__cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.indice__sigla {
    font-size: 24px;
    font-weight: 700;
    color: var(--cor-site-1);
}

.indice__ref {
    font-size: 14px;
    color: var(--cor-texto-suave);
    font-variant-numeric: tabular-nums;
}

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

.indice__principal {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
}

.indice__seta {
    width: 20px;
    height: 20px;
    flex: none;
    align-self: center;
    fill: var(--indice-cor);
}

.indice__valor {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--indice-cor);
}

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

.indice__tabela {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 0;
    padding-top: 15px;
    border-top: 1px solid #f4f4f4;
}

.indice__tabela div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

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

.indice__tabela dd {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1a1a1a;
}

.indice__fonte {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cor-texto-suave);
}

/* ===========================================================================
   REDES SOCIAIS (FEED INSTAGRAM/FACEBOOK) — pages/home.php
   =========================================================================== */
.redes-feed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    justify-content: center;
}

.redes-feed__item {
    display: flex;
    justify-content: center;
    /* Reserva altura antes do SDK processar o embed (carrega só ao rolar até aqui —
       ver script em home.php), senão o cartão "pula" e prejudica o CLS. */
    min-height: 460px;
    padding: 10px;
    border: 2px solid #f4f4f4;
    border-radius: 12px;
    background: var(--cor-branco);
    box-shadow: 0 10px 17px #0000000a;
}

/* Largura máxima "nativa" de um embed (~380px): sem isso, com poucos posts o item
   esticava até o container inteiro e o SDK redesenhava o post gigante. */
.redes-feed__item,
.redes-feed__item > * {
    max-width: 380px;
    width: 100%;
}

.redes-feed__item--iframe {
    min-height: 0;
}

.redes-feed__instagram {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 560px;
    border: 0;
    border-radius: 8px;
    background: var(--cor-branco);
}

.redes-feed__item--sem-embed {
    align-self: start;
    min-height: 0;
}

.redes-feed__item iframe,
.redes-feed__item > * {
    max-width: 100%;
}

/* ===========================================================================
   HERO + BUSCA NO CELULAR (igual ao paesi)
   =========================================================================== */
@media (max-width: 767px) {
    .hero {
        --busca-saida: 0px;
        height: auto;
        min-height: 0;
        margin-bottom: 0;
    }

    .hero__banner {
        position: relative;
        inset: auto;
        height: 200px;
    }

    .hero__overlay {
        position: static;
        display: block;
        padding: 50px 0 60px;
    }

    .hero__overlay .container {
        display: block;
        margin: 0;
    }

    /* Texto por cima do banner (a caixa do hero é o ancestral posicionado). */
    .hero__slide-texto {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        padding-inline: var(--container-pad);
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        pointer-events: auto;
    }

    .hero__slide-titulo {
        margin-bottom: 8px;
        font-size: 28px;
        line-height: 34px;
    }

    .hero__slide-subtitulo {
        font-size: 15px;
        line-height: 22px;
    }

    .busca-hero {
        position: static;
    }

    .busca-hero__abas {
        width: max-content;
        max-width: 100%;
        margin-left: 0;
    }

    .busca-hero__aba {
        flex: none;
        padding: 16px 26px;
        font-size: 15px;
    }

    .busca-hero__form {
        padding: 6px 30px 30px;
    }
}

/* ===========================================================================
   SETAS LATERAIS sobre o banner e sobre os slides do painel — mesmos botões do carrossel de imóveis
   (quadrados, borda 2px, hover azul), nas laterais e na altura do meio da imagem.
   =========================================================================== */
.hero__banner,
.sliders-secao__carrossel {
    --seta-borda: #ededed;
}

.seta-lateral {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 54px;
    height: 54px;
    margin-top: -27px;
    border: 2px solid var(--seta-borda, #ededed);
    border-radius: 0;
    background: var(--cor-branco);
    color: #818790;
    transition: background .4s ease, color .4s ease, border-color .4s ease;
}

.seta-lateral:hover:not(:disabled) {
    border-color: transparent;
    background: var(--cor-site-1);
    color: var(--cor-branco);
}

.seta-lateral--anterior { left: 20px; }
.seta-lateral--proxima { right: 20px; }

.sliders-secao__carrossel { position: relative; }

@media (max-width: 767px) {
    .seta-lateral { width: 38px; height: 38px; margin-top: -19px; }
    .seta-lateral--anterior { left: 10px; }
    .seta-lateral--proxima { right: 10px; }
}