/* ===========================================================================
   home.css — estilos EXCLUSIVOS da página inicial (pages/home.php)
   ---------------------------------------------------------------------------
   Carregado depois do style.css, que já traz :root, botões, header, footer e
   os componentes compartilhados (card de imóvel e carrossel). Aqui só o que é
   da home:

     1. Hero (banner do painel 100% da largura + texto sobreposto)
     2. Faixa de busca rápida
     3. Sobre (texto institucional + ficha da imobiliária)
     4. Vitrines de imóveis (venda / locação)
     5. Soluções (comprar, alugar, condomínio)
     4b. Anuncie seu imóvel (texto+CTA + cartão com o passo a passo)
     6. Depoimentos
     7. Chamada final

   DECISÃO DE DESIGN DO BANNER: uma única foto (ou carrossel, se o painel tiver
   2+ slides e o modo aleatório estiver desligado — ver Painel::slides())
   ocupa 100% da largura da tela. Um véu escuro garante contraste para o texto
   e os botões, que ficam sobrepostos por cima da imagem.
   =========================================================================== */

/* ===========================================================================
   1. HERO
   =========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    height: 65vh;
    min-height: 380px;
    background: var(--cor-fundo-band);
    overflow: hidden;
}

.hero__banner {
    position: absolute;
    inset: 0;
    z-index: 0;
    --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;
}

.hero__banner .carrossel__item {
    height: 100%;
}

/* SLIDE SEM IMAGEM MOBILE CADASTRADA NO PAINEL: SÓ CONTA NO DESKTOP — NA TELA
   PEQUENA ELE SOME (EM VEZ DE REPETIR A FOTO DESKTOP CORTADA/ESTICADA). VER
   pages/home.php (marca a classe) E public/js/site.js (ignora item escondido
   na contagem/scroll do carrossel). */
@media (max-width: 767px) {
    .hero__banner .carrossel__item--sem-mobile {
        display: none;
    }
}

/* Véu à esquerda, onde o texto fica: garante leitura sobre qualquer foto
   (clara, escura, com marca d'água) usando o azul-marinho da marca
   (--cor-escura) em vez de um preto/verde genérico — o banner continua "da
   imobiliária" mesmo com o véu por cima. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(5, 32, 80, .82) 0%, rgba(5, 32, 80, .5) 40%, rgba(5, 32, 80, 0) 70%);
}

/* Full-bleed: só serve para centralizar verticalmente o .container por dentro,
   o padding lateral em si vem do próprio .container (mesmo usado no resto do
   site), não de uma fórmula própria — assim o texto nunca fica mais espremido
   aqui do que em qualquer outra seção da página. */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
}

.hero__conteudo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--gap-sm);
    color: var(--cor-branco);
}

.hero__chapeu {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero__chapeu::before {
    content: '';
    width: 24px;
    height: 3px;
    /* Mesmo azul claro do .hero__titulo-destaque, não --cor-primaria (navy):
       sobre o véu escuro do banner o navy quase desaparece. */
    background: #6a9bff;
    flex: none;
}

.hero__titulo {
    margin: 0;
    font-size: clamp(1.6rem, 1.05rem + 1.7vw, 2.7rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.015em;
    text-wrap: balance;
    color: var(--cor-branco);
}

/* Marca-texto: mantido por compatibilidade com título vindo do painel
   (heroTitulo pode trazer <mark> escrito por quem edita o slide lá). */
.hero__titulo mark {
    background: linear-gradient(to top, var(--cor-primaria) 42%, transparent 42%);
    color: var(--cor-primaria-tinta);
    padding-inline: .06em;
}

/* Segunda linha do título padrão (cidade): texto sólido num azul mais claro
   que --cor-primaria, não um mark/highlight — precisa ler bem sobre o véu
   navy escuro do banner, então clareia em vez de destacar com fundo. */
.hero__titulo-destaque {
    color: #6a9bff;
}

.hero__texto {
    margin: 0;
    max-width: 40ch;
    color: rgba(255, 255, 255, .85);
}

.hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
}

/* Linha final: WhatsApp + horário, em corpo pequeno. */
.hero__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-xs) var(--gap);
    padding-top: var(--gap-xs);
    border-top: 1px solid rgba(255, 255, 255, .25);
    width: 100%;
    font-size: var(--fs-sm);
}

.hero__corretor {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--cor-branco);
}

.hero__corretor svg {
    width: 18px;
    height: 18px;
    color: var(--cor-whatsapp);
}

.hero__corretor:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.hero__horario {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255, 255, 255, .75);
}

.hero__horario svg {
    width: 15px;
    height: 15px;
}

/* Barra do carrossel (contador + progresso + setas), sobreposta no canto
   inferior direito do banner. */
.hero__banner .carrossel__barra {
    position: absolute;
    z-index: 2;
    right: var(--gap-md);
    bottom: var(--gap-md);
    width: min(300px, 34%);
    margin: 0;
}

.hero__banner .carrossel__contador {
    color: var(--cor-branco);
}

.hero__banner .carrossel__progresso {
    background: rgba(255, 255, 255, .3);
}

.hero__banner .carrossel__botao {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .55);
    border-color: rgba(255, 255, 255, .3);
    color: var(--cor-branco);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hero__banner .carrossel__botao:hover:not(:disabled) {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
}


/* ===========================================================================
   2. FAIXA DE BUSCA RÁPIDA
   ---------------------------------------------------------------------------
   Cartão branco flutuante, sobreposto à borda de baixo do banner (não no meio
   dele) via margin-top negativa — por isso `.hero` não pode ter overflow
   escondido. Os controles (input, dropdown, campo de valor, botão) têm a
   MESMA altura; dropdown e campo de valor são componentes do style.css, aqui
   fica só o arranjo e o cartão.
   =========================================================================== */
.busca-faixa {
    position: relative;
    z-index: 2;
    margin-top: -85px;
    /* Sem padding-bottom aqui: quem dá o respiro depois do cartão é a seção
       seguinte (regra abaixo), não esta faixa. */
}


.busca-hero {
    background: var(--cor-branco);
    border-radius: 18px;
    box-shadow: var(--sombra-lg);
    padding: var(--gap-md);
}

/* Abas: coladas na borda de cima do cartão (mesmo padrão do site barcellos/),
   cantos arredondados só em cima, a ativa preenchida na cor escura da marca. */
.busca-hero__abas {
    display: flex;
    align-items: flex-end;
    max-width: 460px;
    margin: 0 auto;
    gap: 3px;
}

.busca-hero__aba {
    flex: 1;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.2rem .95rem;
    border: 1.5px solid var(--cor-branco);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    background: var(--cor-branco);
    box-shadow: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--cor-texto);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

.busca-hero__aba svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.busca-hero__aba[aria-pressed="true"] {
    background: var(--cor-escura);
    border-color: var(--cor-escura);
    color: var(--cor-branco);
    font-weight: 700;
    z-index: 2;
}

/* Uma linha: código | cidade | bairro | tipo | mínimo | máximo | buscar.
   O código e os valores ocupam menos que os campos de texto longo. */
.busca-hero__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    align-items: end;
}

.busca-hero__form .campo {
    flex: 1 1 0;
    min-width: 0;
}

.busca-hero__form .campo--codigo {
    flex: 0 1 110px;
}

/* Altura e cara únicas para todos os controles do cartão, no mesmo padrão do
   site barcellos/: fundo levemente cinza, borda mais grossa, foco com anel
   colorido em vez do outline padrão. O `>` é o que importa no primeiro
   seletor: o input do campo de valor mora DENTRO da caixa e não pode receber
   a altura por fora. */
.busca-faixa .campo>input,
.busca-faixa .dropdown__gatilho,
.busca-faixa .campo-moeda,
.busca-hero__enviar {
    height: 48px;
}

.busca-faixa .campo>input,
.busca-faixa .dropdown__gatilho,
.busca-faixa .campo-moeda {
    border: 1.5px solid var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-fundo-alt);
}

.busca-faixa .campo>input:focus,
.busca-faixa .dropdown--aberto .dropdown__gatilho,
.busca-faixa .campo-moeda:focus-within {
    outline: none;
    border-color: var(--cor-site-3);
    background: var(--cor-branco);
    box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}

.busca-faixa .campo-moeda {
    padding-block: 0;
}

/* O X do type="search" no WebKit some: o campo já é limpo com Backspace e o
   ícone quebra o alinhamento com os outros campos. */
.busca-faixa input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.busca-hero__enviar {
    padding-inline: 1.35rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cor-site-1), var(--cor-site-3));
    box-shadow: 0 4px 16px rgba(1, 80, 149, .35);
}

/* ===========================================================================
   3. AUTORIDADE ("por que essa imobiliária")
   ---------------------------------------------------------------------------
   Selo + H1 + texto de um lado, fio vertical no meio, grade 2×2 de números
   (com contagem animada, ver public/js/contador-numeros.js) do outro — sem
   foto de equipe: os NÚMEROS são a prova aqui, não um retrato genérico de
   banco de imagens.
   =========================================================================== */
.autoridade {
    padding-block: var(--gap-xl);
}

.autoridade__grid {
    display: grid;
    grid-template-columns: 1.05fr auto .95fr;
    align-items: center;
    gap: var(--gap-lg);
}

.autoridade__badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem 1rem;
    border: 1px solid #c7d8f7;
    border-radius: var(--raio-pill);
    background: #eef4ff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cor-primaria-escura);
}

.autoridade__badge svg {
    width: 13px;
    height: 13px;
    flex: none;
}

.autoridade__titulo {
    margin: .9rem 0 0;
    font-size: var(--fs-3xl);
    line-height: 1.15;
    max-width: 20ch;
}

.autoridade__titulo span {
    color: var(--cor-primaria);
}

.autoridade__texto-corpo {
    margin: var(--gap-sm) 0 0;
    max-width: 46ch;
    color: var(--cor-texto-suave);
}

.autoridade__texto .btn {
    margin-top: var(--gap);
}

/* Fio central: só decorativo (divide as duas metades), some em telas
   estreitas junto com o grid virando 1 coluna. */
.autoridade__divisor {
    align-self: stretch;
    width: 1px;
    min-height: 220px;
    background: linear-gradient(to bottom, transparent, var(--cor-borda) 15%, var(--cor-borda) 85%, transparent);
}

.autoridade__numeros {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
}

.autoridade__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: var(--gap) var(--gap-sm);
    background: var(--cor-fundo-alt);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao), background var(--transicao);
}

.autoridade__card:hover {
    transform: translateY(-4px);
    background: var(--cor-branco);
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra);
}

.autoridade__card-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--cor-branco);
    color: var(--cor-primaria);
    box-shadow: var(--sombra-sm);
    transition: background var(--transicao), color var(--transicao);
}

.autoridade__card-icone svg {
    width: 19px;
    height: 19px;
}

.autoridade__card:hover .autoridade__card-icone {
    background: var(--cor-primaria);
    color: var(--cor-branco);
}

.autoridade__card-numero {
    margin: 0;
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 1rem + 1.1vw, 1.85rem);
    letter-spacing: -.02em;
    color: var(--cor-escura);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.autoridade__card-rotulo {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.35;
    /* NÃO var(--cor-texto-suave) (#767676): SÓ PASSA NO AA (~4,54:1) EM CIMA DE
       BRANCO — ESTE CARD USA --cor-fundo-alt (#f6f6f6), ONDE CAI PRA ~4,2:1 E
       REPROVA NO LIGHTHOUSE. #5c5c5c FICA ~6,2:1 NESSE FUNDO. */
    color: #5c5c5c;
}

@media (max-width: 991px) {
    .autoridade__grid {
        grid-template-columns: 1fr;
        gap: var(--gap);
    }

    .autoridade__divisor {
        display: none;
    }

    .autoridade__titulo,
    .autoridade__texto-corpo {
        max-width: none;
    }
}

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

/* ===========================================================================
   4. VITRINES
   ---------------------------------------------------------------------------
   Setas de navegação saem do cabeçalho e viram overlay sobre a janela do
   carrossel, escondidas até passar o mouse — mesma ideia da barra de
   carrossel do banner do hero (.hero__banner .carrossel__barra), mas nos
   dois lados em vez de um canto só.
   =========================================================================== */
.carrossel__viewport {
    position: relative;
}

.carrossel__controles--flutuante {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding-inline: var(--gap-xs);
    /* `gap:0`+`justify-content:space-between` acima cancelam o `.carrossel__controles`
       base (flex lado a lado, gap .4rem) sem precisar reescrever o seletor inteiro. */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transicao);
}

.carrossel__viewport:hover .carrossel__controles--flutuante,
.carrossel__viewport:focus-within .carrossel__controles--flutuante {
    opacity: 1;
}

.carrossel__controles--flutuante .carrossel__botao {
    pointer-events: auto;
    box-shadow: var(--sombra);
}

.carrossel__controles--flutuante .carrossel__botao:disabled {
    /* Escondido em vez de só opaco: um botão desabilitado "boiando" sozinho
       de um lado só (primeira/última página) ficaria estranho sem o par. */
    display: none;
}

/* `justify-content: space-between` só funciona com os DOIS botões presentes
   (um em cada ponta). Com o "anterior" escondido (:disabled acima, primeira
   página), o "próximo" vira o ÚNICO filho flex e space-between o empurra pro
   INÍCIO (esquerda) em vez de ficar na direita — botão de avançar aparecia
   flutuando sobre o primeiro card. margin-left:auto garante a direita mesmo
   sozinho (e não muda nada quando os dois estão visíveis). */
.carrossel__controles--flutuante [data-carrossel-proximo] {
    margin-left: auto;
}

/* ===========================================================================
   5. SOLUÇÕES
   ---------------------------------------------------------------------------
   Bento: 2 blocos grandes em cima (comprar/alugar, o negócio em si) + 3
   menores embaixo (serviços de apoio) — a hierarquia real, em peso visual
   (tamanho do bloco), não em conteúdo escondido: título e descrição ficam
   SEMPRE visíveis (sem vão em branco esperando o hover). O hover só troca
   as cores — um véu verde-escuro cobre o card (clip-path, não fade) e o
   texto por cima vira branco, mesma leitura de "selecionado" do resto do
   site (aba ativa, opção do dropdown).
   =========================================================================== */
.bento {
    display: flex;
    flex-direction: column;
}

.bento__linha {
    display: grid;
}

.bento__linha--topo {
    grid-template-columns: repeat(2, 1fr);
}

.bento__linha--base {
    grid-template-columns: repeat(3, 1fr);
}

.bento-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: var(--gap-md);
    border: 1px solid var(--cor-borda);
    overflow: hidden;
    isolation: isolate;
}

/* O véu: cresce por cima do card no hover (`clip-path`, não fade) — mesma
   lógica de "cortina", só que agora só troca cor, sem revelar texto novo. */
.bento-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--cor-escura);
    clip-path: inset(100% 0 0 0);
    transition: clip-path .35s ease;
}

.bento-item:hover::before,
.bento-item:focus-visible::before {
    clip-path: inset(0 0 0 0);
}

.bento-item__icone {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--cor-borda);
    border-radius: 50%;
    color: var(--cor-escura);
    transition: background .35s, border-color .35s, color .35s;
}

.bento-item__icone svg {
    width: 18px;
    height: 18px;
}

.bento-item:hover .bento-item__icone,
.bento-item:focus-visible .bento-item__icone {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
}

.bento-item__titulo {
    position: relative;
    z-index: 1;
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--cor-escura);
    transition: color .35s;
}

.bento__linha--topo .bento-item__titulo {
    font-size: var(--fs-xl);
}

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

.bento-item__desc {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
    transition: color .35s;
}

.bento-item:hover .bento-item__desc,
.bento-item:focus-visible .bento-item__desc {
    color: rgba(255, 255, 255, .85);
}

.bento-item__link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .2rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--cor-escura);
    transition: color .35s;
}

.bento-item__link svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.bento-item:hover .bento-item__link,
.bento-item:focus-visible .bento-item__link {
    color: var(--cor-primaria-clara);
}

@media (max-width: 767px) {

    .bento__linha--topo,
    .bento__linha--base {
        grid-template-columns: 1fr;
    }

    /* Sem hover no touch: o véu de cor não entra, tudo fica no estado
       "parado" (texto escuro sobre branco) o tempo todo. */
    .bento-item::before {
        content: none;
    }
}

/* ===========================================================================
   4b. ANUNCIE SEU IMÓVEL
   ---------------------------------------------------------------------------
   Mesma composição que a antiga seção de Financiamento (removida): texto+CTA
   de um lado, CARTÃO CHEIO do outro — só que aqui o cartão preenche o espaço
   com o passo a passo de quem quer anunciar, em vez de banner+simulador.
   Corrige o vão em branco que a versão em linha do tempo deixava embaixo do
   texto: o cartão escuro estica pra ocupar a MESMA altura da coluna de texto.
   =========================================================================== */
.anuncie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: stretch;
}

.anuncie-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 46ch;
}

.anuncie-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-top: var(--gap-md);
}

.anuncie-cartao {
    padding: var(--gap-lg);
    background: var(--cor-escura);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra);
    color: var(--cor-branco);
}

.anuncie-cartao__chapeu {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: var(--gap-md);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cor-primaria);
}

.anuncie-cartao__chapeu::before {
    content: '';
    width: 24px;
    height: 3px;
    background: var(--cor-primaria);
    flex: none;
}

.anuncie-cartao__lista {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.anuncie-cartao__lista li {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    padding-top: var(--gap-md);
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.anuncie-cartao__lista li:first-child {
    padding-top: 0;
    border-top: none;
}

.anuncie-cartao__icone {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--cor-primaria-clara);
}

.anuncie-cartao__icone svg {
    width: 18px;
    height: 18px;
}

.anuncie-cartao__lista strong {
    display: block;
    margin-bottom: .25rem;
    font-family: var(--fonte-display);
    font-size: var(--fs-base);
}

.anuncie-cartao__lista p {
    margin: 0;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .75);
}

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

    .anuncie-intro {
        max-width: none;
    }
}

/* ===========================================================================
   6. DEPOIMENTOS
   ---------------------------------------------------------------------------
   Cabeçalho centralizado com palavra em destaque no h2, aspas grandes no
   cartão, avatar+nome na BASE do cartão (não no topo) e setas nas laterais
   do carrossel (não soltas no cabeçalho) + pontos abaixo — o formato clássico
   de carrossel de depoimentos, nas cores da marca em vez de azul genérico.
   =========================================================================== */
.depoimentos-carrossel {
    --carrossel-itens: 3;
}

.depoimentos-cabecalho {
    max-width: 640px;
    margin: 0 auto var(--gap-lg);
    text-align: center;
}

.depoimentos-cabecalho__chapeu {
    justify-content: center;
}

.depoimentos-cabecalho .secao__titulo mark {
    background: none;
    color: var(--cor-primaria-escura);
}

.depoimentos-cabecalho .secao__texto {
    max-width: none;
}

.depoimentos-cabecalho .secao__texto strong {
    color: var(--cor-escura);
}

/* Setas coladas nas laterais do carrossel (não no cabeçalho) — a janela
   ganha padding lateral pra elas não ficarem por cima do primeiro/último
   cartão. */
.depoimentos-viewport {
    position: relative;
    padding-inline: 56px;
}

.depoimentos-seta {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--cor-borda);
    border-radius: 50%;
    background: var(--cor-branco);
    color: var(--cor-escura);
    box-shadow: var(--sombra-sm);
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}

.depoimentos-seta svg { width: 16px; height: 16px; }

.depoimentos-seta--esq { left: 0; }
.depoimentos-seta--dir { right: 0; }

.depoimentos-seta:hover:not(:disabled) {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
}

.depoimentos-seta:disabled { opacity: .35; cursor: default; }

/* Contador "01 / N" (troca as bolinhas antigas — VER home.php): reaproveita
   .carrossel__contador de style.css, que já é escuro por padrão (pensado pro
   banner do hero tem override próprio em .hero__banner .carrossel__contador,
   não mexe aqui) — só falta centralizar embaixo do carrossel. */
.depoimentos-contador {
    display: block;
    margin-top: var(--gap-md);
    text-align: center;
}

/* ===========================================================================
   DEPOIMENTO ("spotlight")
   ---------------------------------------------------------------------------
   3 cards por vez (--carrossel-itens: 3, acima) — texto alinhado à
   esquerda (não mais centralizado): estrelas + aspas no topo, texto em
   itálico, fio, avatar+nome lado a lado embaixo. Cada card tem a altura do
   PRÓPRIO conteúdo (sem height:100%/margin-top:auto forçando os 3 da
   fileira na mesma altura) — isso deixava um buraco vazio enorme no meio
   de qualquer card com texto mais curto que o vizinho.
   =========================================================================== */
/* height:100% (estica o card pra bater com o mais alto da fileira, ver
   .carrossel__trilha em style.css) + o texto com min-height (embaixo, em
   .depoimento-spot__texto) — as duas coisas juntas fazem os 3 cards da
   fileira alinharem o rodapé (avatar+nome) sem depender de margin-top:auto,
   que jogava um buraco vazio no MEIO do card quando o texto era curto. Aqui
   qualquer sobra de altura fica embaixo do rodapé (invisível, dentro do
   card branco), não entre o texto e o avatar. */
.depoimento-spot {
    position: relative;
    /* <figure> TEM MARGIN PADRÃO DO NAVEGADOR (1em EM CIMA/BAIXO, 40px NAS
       LATERAIS — VER "user agent stylesheet" NO DEVTOOLS). SEM ZERAR AQUI,
       O CARD FICAVA COM UM RECUO ESTRANHO DOS DOIS LADOS DENTRO DA COLUNA
       DO CARROSSEL. */
    margin: 0;
    height: 100%;
    padding: var(--gap-md);
    display: flex;
    flex-direction: column;
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra);
    transition: transform var(--transicao), box-shadow var(--transicao);
}

.depoimento-spot:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-lg);
}

/* Estrelas à esquerda, aspas pequenas à direita — mesma linha, não mais
   uma marca d'água atrás do texto. */
.depoimento-spot__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-sm);
}

.depoimento-spot__aspas {
    font-family: var(--fonte-display);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--cor-primaria-suave);
}

.depoimento-spot__nota {
    display: flex;
    gap: .15rem;
    font-size: .9rem;
    line-height: 1;
}

/* Estrelas amarelas — cor universal de avaliação, não a cor da marca (que
   já satura o resto da página inteira). */
.depoimento-spot__estrela {
    color: var(--cor-borda);
}

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

/* Itálico, serifada (fonte de display), alinhado à esquerda — igual a uma
   citação de verdade, não um cartão de review genérico. */
/* min-height reserva o espaço de ~5 linhas SEMPRE, mesmo quando o texto real
   é bem mais curto — sem isso, um depoimento de 1 frase deixava o card
   inteiro baixinho ao lado de um vizinho com texto longo, e a fileira
   toda ficava com o rodapé (avatar+nome) desalinhado. */
.depoimento-spot__texto {
    margin: 0;
    min-height: calc(1.55em * 5);
    font-family: var(--fonte-display);
    font-size: var(--fs-sm);
    font-style: italic;
    font-weight: 500;
    line-height: 1.55;
    color: var(--cor-texto);
    text-align: left;
    margin-bottom: var(--gap-sm);
    /* RESPEITA AS QUEBRAS DE LINHA/PARÁGRAFOS DIGITADAS NO PAINEL (\n DO
       TEXTO CRU) — SEM ISSO, white-space:normal (PADRÃO) COLAPSA TUDO NUMA
       LINHA SÓ. NÃO PRECISA DE nl2br() NO PHP: SÓ CSS, MESMO TEXTO ESCAPADO. */
    white-space: pre-line;
}

/* Acima de ~280 caracteres (ver home.php) trava em 5 linhas — o resto abre
   no AlertSami (botão "Ler depoimento inteiro" logo abaixo), pra um
   depoimento gigante não estourar a altura do card. */
.depoimento-spot__texto--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

.depoimento-spot__ver-mais {
    display: inline-block;
    align-self: flex-start;
    margin-top: var(--gap-sm);
    padding: 0;
    border: 0;
    background: none;
    color: var(--cor-primaria-escura);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

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

/* margin-top: auto empurra sempre pro rodapé do card (que tem height:100%,
   ver .depoimento-spot) — com o min-height no texto (ali em cima) reservando
   ~5 linhas mesmo pra depoimento curto, a sobra que esse auto empurra agora
   é só a diferença normal entre os cards, não aquele buraco enorme de antes
   quando o texto sozinho controlava a altura. */
.depoimento-spot__quem {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: auto;
    padding-top: var(--gap-md);
    border-top: 1px solid var(--cor-borda);
}

.depoimento-spot__moldura {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.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-primaria);
    color: var(--cor-primaria-tinta);
    font-weight: 700;
}

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

.depoimento-spot__nome {
    color: var(--cor-escura);
    font-size: var(--fs-sm);
}

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

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

    .depoimentos-viewport {
        padding-inline: 0;
    }

    .depoimentos-seta {
        display: none;
    }

    .depoimento-spot {
        padding: var(--gap-lg) var(--gap-md) var(--gap-md);
    }

    .depoimento-spot__aspas {
        font-size: 6rem;
    }

    .depoimento-spot__texto {
        font-size: var(--fs-lg);
    }
}


/* ===========================================================================
   5b. ÍNDICES
   ---------------------------------------------------------------------------
   Cartão com descrição do índice (o que ele é), o valor do mês em destaque
   e uma mini-tabela com acumulado do ano e últimos 12 meses — as mesmas
   informações de um extrato, com o acento colorido na borda esquerda que já
   é a nossa linguagem para "esse número subiu/caiu".
   =========================================================================== */
/* Sempre 2 colunas (não 3): com poucos índices, um grid auto-fit alargava
   a fileira toda — fixar em 2 mantém os cartões no tamanho de leitura certo
   e ainda funciona com 1, 3 ou mais itens (a última fileira só fica incompleta). */
.indices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
}

.indice {
    --indice-cor: var(--cor-texto-suave);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: var(--gap-md);
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--indice-cor);
    border-radius: var(--raio);
}

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

/* #2e9e5b media ~3,4:1 no branco, abaixo do AA */
.indice--baixa {
    --indice-cor: #c62828;
}

/* #d64545 media ~4,38:1, abaixo do AA (4,5:1) */

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

.indice__sigla {
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cor-escura);
}

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

.indice__descricao {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--cor-texto-suave);
    line-height: 1.4;
}

.indice__principal {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    margin-top: .3rem;
}

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

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

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

.indice__tabela {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: .2rem 0 0;
    padding-top: .5rem;
    border-top: 1px solid var(--cor-borda);
}

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

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

.indice__tabela dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cor-texto);
}

.indice__fonte {
    margin-top: .3rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--indice-cor);
}

/* ===========================================================================
   7. CHAMADA FINAL
   ---------------------------------------------------------------------------
   Placa de "vende-se/aluga-se" física, não cartão de CTA: o telefone É o
   elemento — tabular, enorme, sozinho num bloco à parte — porque é assim
   que uma placa de imobiliária de verdade comunica (número gigante, resto
   pequeno). Full-bleed com moldura amarela grossa dos dois lados, como a
   borda pintada de uma placa de rua.
   =========================================================================== */
.chamada {
    padding-block: var(--gap-lg);
    border-block: 6px solid var(--cor-primaria);
    background: var(--cor-escura);
    color: var(--cor-branco);
}

.chamada__interno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-lg);
}

.chamada__texto {
    flex: 1 1 320px;
}

.chamada__chapeu {
    display: block;
    margin-bottom: .5rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cor-primaria);
}

.chamada h2 {
    color: var(--cor-branco);
    margin-bottom: .35rem;
}

.chamada p {
    margin: 0;
    max-width: 55ch;
    color: rgba(255, 255, 255, .78);
}

.chamada__whats {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: var(--gap-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--cor-branco);
}

.chamada__whats svg {
    width: 18px;
    height: 18px;
    color: var(--cor-whatsapp);
}

.chamada__whats:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* O bloco-placa: fio grosso amarelo à esquerda separando do texto, número
   em tabular-nums gigante — não um botão, é a peça central da seção. */
.chamada__placa {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-left: var(--gap-lg);
    border-left: 4px solid var(--cor-primaria);
    color: var(--cor-branco);
}

.chamada__placa-rotulo {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    /* .55 media abaixo do AA no fundo preto */
}

.chamada__placa-numero {
    font-family: var(--fonte-display);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--cor-primaria);
}

.chamada__placa:hover .chamada__placa-numero {
    color: var(--cor-branco);
}

/* ===========================================================================
   SLIDER DE IMAGENS DO PAINEL — pages/home.php, seção "5b"
   ---------------------------------------------------------------------------
   Usa o componente [data-carrossel] (mesmo de vitrine/depoimentos/blog) com
   uma foto de cada vez; imagens/links vêm de Painel::sliders() (mesmo padrão
   do site beta/). Ver .carrossel* em style.css pro trilho/botões genéricos.
   =========================================================================== */
.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: 420px;
    object-fit: cover;
    border-radius: var(--raio-lg);
}

.sliders-secao__controles {
    display: flex;
    justify-content: center;
    gap: var(--gap-sm);
    margin-top: var(--gap-sm);
}

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

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

/* ===========================================================================
   RESPONSIVO
   =========================================================================== */
@media (max-width: 1200px) {

    .hero__banner .carrossel__barra {
        width: min(260px, 30%);
    }

    /* Sete controles numa linha só apertam: código, cidade, bairro e tipo em
       cima; os dois valores e o botão embaixo. */
    .busca-hero__form .campo {
        flex-basis: calc(25% - var(--gap-xs) * 3 / 4);
    }

    .busca-hero__enviar {
        flex: 1 1 calc(50% - var(--gap-xs) / 2);
    }
}

@media (max-width: 991px) {

    .busca-hero__form .campo {
        flex-basis: calc(50% - var(--gap-xs) / 2);
    }

    .busca-hero__enviar {
        flex-basis: 100%;
    }

    .sobre {
        grid-template-columns: 1fr;
    }

    .depoimentos-carrossel {
        --carrossel-itens: 2;
    }
}

@media (max-width: 767px) {

    .indices {
        grid-template-columns: 1fr;
    }

    .hero__banner .carrossel__barra {
        right: var(--gap-sm);
        bottom: var(--gap-sm);
        width: min(220px, 42%);
    }
}

@media (max-width: 575px) {
    .hero__acoes {
        width: 100%;
    }

    .hero__acoes .btn {
        flex: 1;
        /* .btn--lg tem padding-inline de 2rem — nos ~160px que cada botão
           tem numa tela de 375px, "Quero comprar" quebrava em duas linhas
           enquanto "Quero alugar" ficava numa só, e o par esticava pra
           mesma altura (align-items:stretch), sobrando respiro desigual
           num botão e não no outro. Menos padding lateral = cabe em uma
           linha só nos dois. */
        padding-inline: .75rem;
        white-space: nowrap;
    }

    /* As abas viram dois blocos de largura igual, ainda lado a lado. */
    .busca-hero__abas>* {
        flex: 1;
        width: auto;
    }

    .busca-hero__aba {
        padding-inline: .5rem;
    }

    .busca-hero__form .campo {
        flex-basis: calc(50% - var(--gap-xs) / 2);
    }

    /* Código deixa de ocupar a linha inteira sozinho: assim ele forma par
       com Cidade (a peça seguinte no HTML) na mesma linha, e os campos
       daí pra baixo (Bairro+Tipo, Mínimo+Máximo) fecham em pares — sem
       sobrar um campo sozinho numa linha, como acontecia com Valor máximo. */

    .chamada {
        padding-block: var(--gap-md);
    }

    .chamada__interno {
        align-items: flex-start;
    }

    .chamada__placa {
        padding-left: 0;
        padding-top: var(--gap);
        border-left: 0;
        border-top: 4px solid var(--cor-primaria);
        width: 100%;
    }

}

/* ===========================================================================
   7b. DIFERENCIAIS — "Por que escolher a Barcellos?"
   ---------------------------------------------------------------------------
   Grid de 6 cards (2 fileiras x 3), cabeçalho centralizado — mesma
   composição do site antigo (dif-section/dif-grid/dif-card), com o ícone
   em caixa arredondada que já é a linguagem do resto do site (ver
   .sobre-valor__icone) em vez do ícone solto do site antigo.
   =========================================================================== */
.diferenciais-cabecalho {
    max-width: 640px;
    margin: 0 auto var(--gap-lg);
    text-align: center;
}

.diferenciais-cabecalho__chapeu {
    justify-content: center;
}

.diferenciais-cabecalho .secao__titulo mark {
    background: none;
    color: var(--cor-primaria-escura);
}

.diferenciais-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-md);
}

.diferencial-card {
    padding: var(--gap-md);
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.diferencial-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--sombra);
}

.diferencial-card__icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--gap-sm);
    border-radius: var(--raio);
    background: color-mix(in srgb, var(--cor-primaria) 10%, transparent);
    color: var(--cor-primaria-escura);
    transition: background var(--transicao), color var(--transicao);
}

.diferencial-card:hover .diferencial-card__icone {
    background: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
}

.diferencial-card__icone svg {
    width: 26px;
    height: 26px;
}

.diferencial-card__titulo {
    margin: 0 0 .4rem;
    font-size: var(--fs-base);
}

.diferencial-card__texto {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
    line-height: 1.6;
}

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

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

/* SITE NÃO TEM REGRA GENÉRICA DE <mark> (VIRARIA AMARELO PADRÃO DO
   NAVEGADOR) — CADA SEÇÃO QUE USA <mark> NO TÍTULO PRECISA DA PRÓPRIA REGRA
   (MESMO PADRÃO DE OUTRAS SEÇÕES COM chapeu/titulo EM contato.css/sobre.css). */
.redes-secao .secao__titulo mark {
    background: none;
    color: var(--cor-primaria-escura);
}

/* ===========================================================================
   REDES SOCIAIS (FEED INSTAGRAM/FACEBOOK) — pages/home.php
   ---------------------------------------------------------------------------
   CADA ITEM É O embed_code CRU DO INSTAGRAM/FACEBOOK (SDK DELES REDESENHA O
   <blockquote>/<div> POR DENTRO — POR ISSO SÓ CONTROLAMOS A GRADE EM VOLTA,
   NÃO O CONTEÚDO INTERNO DO CARD). auto-fit/minmax PORQUE A LARGURA "NATIVA"
   DE UM EMBED É FIXA (~326PX) — GRID COMUM QUEBRARIA ISSO.
   =========================================================================== */
.redes-feed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    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) — SEM ISSO O CARD "PULA" DE ALTURA
       QUANDO O POST DE VERDADE ENTRA, PREJUDICANDO O CLS. */
    min-height: 460px;
    background: var(--cor-fundo-alt);
    border-radius: var(--raio-lg);
}

/* LARGURA MÁXIMA "NATIVA" DE UM EMBED DO INSTAGRAM/FACEBOOK — SEM ISSO,
   NUMA GRADE DE 1 COLUNA SÓ (POUCOS POSTS), O ITEM ESTICAVA ATÉ A LARGURA
   INTEIRA DO CONTAINER E O SDK REDESENHAVA O POST GIGANTE, PROPORCIONAL A
   ESSA LARGURA. */
.redes-feed__item,
.redes-feed__item > * {
    max-width: 380px;
    width: 100%;
}

/* Embeds do Instagram/Facebook trazem sua própria largura fixa via JS —
   sem isso, ficavam maiores que a coluna em telas estreitas. */
.redes-feed__item iframe,
.redes-feed__item > * {
    max-width: 100%;
}