/* ===========================================================================
   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
   =========================================================================== */
/* SEM altura fixa: a busca agora mora dentro do mesmo .hero__conteudo dos
   textos (não mais numa faixa à parte, sobreposta por margin-top negativa),
   então a altura do hero passa a ser ditada pelo conteúdo (min-height só
   garante o piso de 68vh quando NÃO há busca sobrando pra baixo da foto).
   SEM overflow:hidden: é o que permite o conteúdo (com a busca) esticar além
   da foto quando precisar — o carrossel já clipa a si mesmo (.carrossel__janela). */
.hero {
    position: relative;
    isolation: isolate;
    min-height: max(68vh, 380px);
    background: var(--cor-fundo-band);
}

.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: rgba(0, 0, 0, 0.2);
}

/* NÃO É MAIS position:absolute/inset:0: com a busca dentro de .hero__conteudo
   (ver home.php), o conteúdo pode precisar de mais altura que a foto (68vh) —
   em fluxo normal, é ELE quem dita a altura final de .hero (a foto e o véu,
   esses sim absolutos, acompanham essa altura via inset:0). O padding-block
   garante respiro em cima/embaixo tanto no caso curto (sem busca) quanto no
   caso alto (com o cartão de busca) — antes esse respiro de baixo vinha do
   cartão flutuar por cima da foto via margin-top negativo, técnica que não
   se aplica mais aqui dentro. */
.hero__overlay {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: end;
    min-height: max(68vh, 380px);
}


.hero__busca {
    margin-bottom: -55px;
}

.hero__conteudo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--gap-sm);
    width: 100%;
    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;
    letter-spacing: -.015em;
    text-wrap: balance;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.1;
    color: #fff;
}

/* 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;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.1;
    color: #fff;
}

.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. BUSCA RÁPIDA
   ---------------------------------------------------------------------------
   Cartão branco dentro da MESMA div do texto do banner (.hero__conteudo, ver
   home.php) — não mais uma faixa à parte sobreposta por margin-top negativa.
   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-hero-wrap {
    width: 100%;
    margin-top: var(--gap-lg);
}

.busca-hero {
    padding: 15px;
    background: #fafafa;
    border-radius: 0px 10px 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}

.busca-hero__abas {
    display: flex;
}

.busca-hero__aba {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    background: var(--cor-branco);
    font-size: 15px;
    border: 2px solid transparent;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

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

.busca-hero__aba[data-secao="vendas"] {
    border-radius: 10px 0 0 0px;
}

a.busca-hero__aba {
    border-radius: 0 10px 0 0;
}

.busca-hero__form {
    display: flex;
    flex-wrap: nowrap;
    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 175px;
    min-width: 90px;
}

.busca-hero-wrap .campo>input,
.busca-hero-wrap .dropdown__gatilho,
.busca-hero-wrap .campo-moeda,
.busca-hero__enviar {
    height: 50px;
}

.busca-hero-wrap .campo>input,
.busca-hero-wrap .dropdown__gatilho,
.busca-hero-wrap .campo-moeda {
    border: 1.5px solid var(--cor-borda);
    border-radius: 8px;
    background: #fff;
}

.busca-hero-wrap .campo>input:focus,
.busca-hero-wrap .dropdown--aberto .dropdown__gatilho,
.busca-hero-wrap .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-hero-wrap .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-hero-wrap input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

/* Painel do campo "Valor" (Mínimo + Máximo + Aplicar) — flutuante como os
   outros dropdowns (.dropdown__painel, style.css), mas com conteúdo próprio
   em vez de uma lista de opções (ver public/js/dropdown-valor.js). */
.dropdown-valor__painel {
    width: 300px;
    padding: var(--gap-sm);
    gap: var(--gap-xs);
}

.dropdown-valor__campos {
    display: flex;
    gap: var(--gap-xs);
}

.dropdown-valor__campos .campo {
    flex: 1 1 0;
    min-width: 0;
}

.dropdown-valor__aplicar {
    width: 100%;
}

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

/* --- Mobile: banner mais alto (90vh, igual à referência). Cada campo da
   busca numa linha só (não em pares) — ver override dos blocos @media de
   991px/575px lá embaixo, na seção RESPONSIVO, que senão prevalecem por
   virem depois no arquivo. --- */
@media (max-width: 767px) {
    .hero__overlay { min-height: 90vh; }

    .hero__titulo { font-size: 34px; }
    .hero__texto { font-size: 1rem; }
}

@media (max-width: 480px) {
    .hero__titulo { font-size: 28px; }
}

/* ===========================================================================
   2b. CARTÃO DE RESUMO
   ---------------------------------------------------------------------------
   =========================================================================== */
.resumo {
    padding-block: 100px 60px;
}
.resumo-card {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid var(--cor-borda);
    border-radius: 10px;
    background: var(--cor-branco);
    box-shadow: 0 0 25px 2px rgba(93, 93, 93, .2);
    overflow: hidden;
}

.resumo-card__texto {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px;
}

.resumo-card__bloco-titulo {
    width: 100%;
    border-bottom: 1px solid #dee2e6;
    text-align: center;
}

.resumo-card__titulo {
    margin: 0 0 20px;
    font-size: 2.5rem;
    color: #282828;
    text-align: center;
}

.resumo-card__titulo span {
    color: var(--cor-site-2);
}

.resumo-card__descricao {
    text-align: center;
    font-size: 20px;
    margin: 10px 10px 24px;
    color: #272727;
}

.resumo-card__numeros {
    display: flex;
    gap: 3rem;
    margin: 24px 10px 10px;
}

.resumo-card__numeros h2 {
    margin: 0 0 5px;
    font-size: 30px;
    text-align: center;
    color: #282828;
}

.resumo-card__numeros h2 span {
    color: var(--cor-site-1);
}

.resumo-card__numeros p {
    margin: 0;
    font-size: 1.25rem;
    text-align: center;
    color: #272727;
}

.resumo-card__divisor {
    width: 2px;
    background: var(--cor-borda);
}

.resumo-card__botoes {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: #ebecf1;
    gap: 30px;
}

.resumo-card__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    border-radius: 5px;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 0 25px 2px rgba(93, 93, 93, .2);
}

.resumo-card__botao svg {
    margin-left: .5rem;
    width: 16px;
    height: 16px;
}

.resumo-card__botao--venda {
    background: linear-gradient(135deg, var(--cor-site-1, #192242), var(--cor-site-2, #1186FB));
    color: var(--cor-branco);
}

.resumo-card__botao--venda:hover {
    color: var(--cor-branco);
}

.resumo-card__botao--locacao {
    background: linear-gradient(135deg, #dadada, var(--cor-branco));
    border: 1px solid var(--cor-borda);
    color: var(--cor-escura);
}

@media (max-width: 767px) {
    .resumo-card__numeros {
        gap: 20px;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .resumo-card__divisor {
        width: 100%;
        height: 1px;
    }

    .resumo-card__botoes {
        flex-direction: column;
        gap: 12px;
    }

    .resumo-card__botao {
        width: 100%;
        max-width: 420px;
    }
}

/* ===========================================================================
   3. AUTORIDADE ("por que essa imobiliária")
   ---------------------------------------------------------------------------
   Título (H1) em largura total, alinhado à esquerda, com o mapa (Leaflet)
   e o texto lado a lado abaixo — mesmo layout do site de referência
   (alice/includes/home/imobiliaria.php, .properties-header/.map-imob), só
   com as classes/tokens deste projeto. Pins do mapa: ver
   public/js/mapa-area-atuacao.js.
   =========================================================================== */
.area-atuacao {
    padding-block: var(--gap-xl);
}

.area-atuacao__titulo {
    margin: 0 0 var(--gap-lg);
    font-size: var(--fs-3xl);
    line-height: 1.15;
    font-weight: 300;
    text-align: left;
    color: #272727;
}

.area-atuacao__titulo span {
    display: inline-block;
    font-weight: 700;
    color: var(--cor-site-1);
}

.area-atuacao__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--gap-lg);
}

.area-atuacao__mapa {
    width: 100%;
    height: 360px;
    border-radius: var(--raio-lg);
    border: 1px solid var(--cor-borda);
    overflow: hidden;
    background: var(--cor-fundo-alt);
}

.area-atuacao__paragrafo {
    margin: 0 0 var(--gap-sm);
    color: #272727;
    font-size: 21px;
}

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

/* Popup dos pins do mapa (ver public/js/mapa-area-atuacao.js) — "Venda" e
   "Locação" ficavam grudados um no outro com o estilo padrão do Leaflet
   (são <a> lado a lado sem espaço nenhum entre eles). */
.pin-popup__title {
    font-weight: 700;
    margin-bottom: .4rem;
}

.pin-popup__actions {
    display: flex;
    gap: .75rem;
}

.pin-popup__btn {
    color: var(--cor-primaria);
    font-weight: 600;
    text-decoration: underline;
}

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

   Título em 2 linhas ("Imóveis em Destaque" + "para X" em azul/negrito) +
   subtítulo — MESMOS VALORES DO SITE DE REFERÊNCIA (alice/css/style.css,
   .properties-header*), SÓ COM AS CLASSES/TOKENS DESTE PROJETO. Só aqui nas
   vitrines, não no .secao__titulo/.secao__chapeu padrão (usado nas outras
   seções da home).
   =========================================================================== */
.vitrine-titulo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 var(--gap-xs);
    font-size: 2.5rem;
    line-height: 1.2;
}

.vitrine-titulo__linha {
    font-weight: 400;
    color: #272727;
}

.vitrine-titulo__destaque {
    font-weight: 700;
    color: var(--cor-primaria-clara);
}

.vitrine-subtitulo {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--cor-texto-suave);
}

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

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

/* Só a partir daqui (tablet/mobile) o formulário quebra em duas linhas —
   até 1200px ele fica numa linha única (5 campos + botão, agora que Valor
   virou um campo só em vez de dois — ver dropdown-valor__painel). */
@media (max-width: 991px) {

    .busca-hero__form {
        flex-wrap: wrap;
    }

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

    .vitrine-titulo {
        font-size: 1.75rem;
    }

    .vitrine-subtitulo {
        font-size: 1rem;
    }

    /* Sobrescreve o pareamento de 2 colunas do bloco de 991px acima: no
       celular cada campo da busca fica sozinho na própria linha. */
    .busca-hero__form .campo {
        flex-basis: 100%;
    }
}

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

    .hero__acoes .btn {
        flex: 1;
        padding-inline: .75rem;
        white-space: nowrap;
    }


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

    .anunciar-imovel__grid,
    .condominio__grid {
        padding: 20px !important;
    }

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

}

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

/* ===========================================================================
   6. ANUNCIE SEU IMÓVEL
   ---------------------------------------------------------------------------
   Cartão foto+véu escuro em largura total, mesma composição do site de
   referência (alice/includes/home/anuncie-seu-imovel.php e
   css/personalizados/home.css, .anunciar-imovel*), só com os tokens deste
   projeto (--cor-primaria em vez de --cor-site-1/-2 fixos).
   =========================================================================== */
.anunciar-imovel-secao {
    padding-block: var(--gap-xl);
}

.anunciar-imovel {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: var(--sombra-lg);
    background: var(--cor-escura);
}

.anunciar-imovel__fundo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 360px at 18% 45%, rgba(12, 52, 205, .28), transparent 62%),
        linear-gradient(180deg, rgba(2, 8, 25, .75) 0%, rgba(2, 8, 25, .55) 55%, rgba(2, 8, 25, .78) 100%),
        url("../img/paginas/home/anuncie/anuncie-seu-imovel-alice-imoveis.webp");
    background-size: cover;
    background-position: center;
}

.anunciar-imovel__textura {
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .2) 0 1px, transparent 2px),
        radial-gradient(circle at 60% 70%, rgba(255, 255, 255, .12) 0 1px, transparent 2px),
        radial-gradient(circle at 80% 40%, rgba(255, 255, 255, .1) 0 1px, transparent 2px);
    background-size: 22px 22px, 28px 28px, 34px 34px;
    pointer-events: none;
}

.anunciar-imovel__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--gap-md);
    padding: 42px;
}

.anunciar-imovel__selo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    border-radius: var(--raio-pill);
    font-weight: 800;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    width: fit-content;
}

.anunciar-imovel__titulo {
    margin: 0;
    color: var(--cor-branco);
    font-weight: 400;
    font-size: var(--fs-3xl);
    line-height: 1.15;
}

.anunciar-imovel__marca {
    font-weight: 700;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .65) 25%, var(--cor-primaria-clara) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.anunciar-imovel__descricao {
    margin: 0;
    color: rgba(255, 255, 255, .86);
    max-width: 60ch;
}

.anunciar-imovel__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.anunciar-imovel__botao {
    height: 46px;
    padding: 0 1.1rem;
    border-radius: var(--raio-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), border-color var(--transicao);
}

.anunciar-imovel__botao:hover {
    transform: translateY(-1px);
}

.anunciar-imovel__botao--primario {
    color: var(--cor-branco);
    background: linear-gradient(90deg, var(--cor-site-1, #0c34cd), var(--cor-site-2, #000ca5));
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 14px 30px rgba(12, 52, 205, .22);
}

.anunciar-imovel__botao--contorno {
    color: var(--cor-branco);
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .22);
}

.anunciar-imovel__botao--contorno:hover {
    border-color: rgba(255, 255, 255, .34);
}

.anunciar-imovel__botao--vidro {
    color: var(--cor-branco);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
}

.anunciar-imovel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.anunciar-imovel__chip {
    padding: .45rem .7rem;
    border-radius: var(--raio-pill);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}

@media (max-width: 480px) {
    .anunciar-imovel__titulo {
        font-size: var(--fs-2xl);
    }
}

/* ===========================================================================
   7. SIMULE SEU FINANCIAMENTO
   ---------------------------------------------------------------------------
   Grade de logos dos bancos, cada um linkando pro simulador oficial. Mesma
   composição do site de referência (alice/includes/home/simule-financiamento.php
   e css/personalizados/home.css, .banks*), só com as classes/tokens deste
   projeto.
   =========================================================================== */
.financiamento {
    padding-block: var(--gap-xl);
}

.financiamento__titulo {
    margin: 0 0 var(--gap-sm);
    font-size: var(--fs-3xl);
    line-height: 1.15;
    font-weight: 300;
    color: #272727;
}

.financiamento__titulo span {
    font-weight: 700;
    color: var(--cor-site-1);
}

.financiamento__subtitulo {
    margin: 0 0 var(--gap-lg);
    color: var(--cor-texto-suave);
}

.financiamento__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--gap-sm);
}

.financiamento__card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    padding: var(--gap-sm);
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}

.financiamento__card:hover {
    transform: translateY(-2px);
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra);
}

.financiamento__logo {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.financiamento__nota {
    margin: var(--gap-sm) 0 0;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--cor-texto-suave);
}

@media (max-width: 1200px) {
    .financiamento__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

    .financiamento__card {
        height: 82px;
    }

    .financiamento__titulo {
        font-size: var(--fs-2xl);
    }
}

/* ===========================================================================
   8. ADMINISTRAÇÃO DE CONDOMÍNIOS
   ---------------------------------------------------------------------------
   Mesmo padrão visual da seção "Anuncie seu imóvel" (foto+véu escuro), com
   chips de benefícios + CTA "vidro" no rodapé — mesma composição do site de
   referência (alice/includes/home/condominio.php e
   css/personalizados/home.css, .condominio*), só com os tokens deste projeto.
   =========================================================================== */
.condominio-secao {
    padding-block: var(--gap-xl);
}

.condominio {
    position: relative;
    overflow: hidden;
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    background: var(--cor-escura);
}

.condominio__fundo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 360px at 18% 45%, rgba(12, 52, 205, .28), transparent 62%),
        linear-gradient(180deg, rgba(2, 8, 25, .75) 0%, rgba(2, 8, 25, .55) 55%, rgba(2, 8, 25, .78) 100%),
        url("../img/paginas/home/condominio/administracao-de-condominios-alice-imoveis.png");
    background-size: cover;
    background-position: center;
}

.condominio__textura {
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .2) 0 1px, transparent 2px),
        radial-gradient(circle at 60% 70%, rgba(255, 255, 255, .12) 0 1px, transparent 2px),
        radial-gradient(circle at 80% 40%, rgba(255, 255, 255, .1) 0 1px, transparent 2px);
    background-size: 22px 22px, 28px 28px, 34px 34px;
    pointer-events: none;
}

.condominio__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--gap-md);
    padding: 42px;
}

.condominio__selo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    border-radius: var(--raio-pill);
    font-weight: 800;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    width: fit-content;
}

.condominio__titulo {
    margin: 0;
    color: var(--cor-branco);
    font-weight: 400;
    font-size: var(--fs-3xl);
    line-height: 1.15;
}

.condominio__marca {
    font-weight: 700;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .65) 25%, var(--cor-primaria-clara) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.condominio__descricao {
    margin: 0;
    color: rgba(255, 255, 255, .86);
    max-width: 60ch;
}

.condominio__rodape {
    display: grid;
    grid-template-columns: 1.2fr .9fr;
    gap: var(--gap-md);
    align-items: end;
    margin-top: .3rem;
}

.condominio__chips {
    display: grid;
    gap: .75rem;
    align-items: start;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    font-weight: 700;
    font-size: var(--fs-sm);
    width: fit-content;
    max-width: 100%;
    border-radius: var(--raio-lg);
    padding: .6rem;
}

.condominio__chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.condominio__check {
    color: #40d67c;
    font-weight: 800;
}

.condominio__cta {
    width: 100%;
    border-radius: var(--raio-lg);
    padding: var(--gap-sm) var(--gap-sm) .85rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .25);
}

.condominio__cta-botao {
    height: 54px;
    padding: 0 1.1rem;
    border-radius: var(--raio-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--cor-branco);
    background: linear-gradient(90deg, var(--cor-site-1, #0c34cd), var(--cor-site-2, #000ca5));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 16px 34px rgba(12, 52, 205, .22);
    transition: transform var(--transicao), box-shadow var(--transicao);
}

.condominio__cta-botao:hover {
    color: var(--cor-branco);
    transform: translateY(-1px);
    box-shadow: 0 20px 44px rgba(12, 52, 205, .3);
}

.condominio__cta-seta {
    font-size: 1.3rem;
    line-height: 1;
    opacity: .9;
}

.condominio__cta-texto {
    margin: .6rem 0 0;
    font-size: var(--fs-xs);
    line-height: 1.35;
    color: rgba(255, 255, 255, .75);
    text-align: center;
}

@media (max-width: 992px) {
    .condominio__titulo {
        font-size: var(--fs-2xl);
    }

    .condominio__rodape {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

/* ===========================================================================
   9. NOSSAS UNIDADES
   ---------------------------------------------------------------------------
   =========================================================================== */
.unidades-secao {
    padding: 60px 0;
}

.unidades__titulo {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 15px;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
    color: #2d3748;
}

.unidades__titulo-principal {
    font-weight: 400;
}

.unidades__titulo-destaque {
    font-weight: 600;
    color: #0c34cd;
}

.unidades__subtitulo {
    margin: 0 0 25px;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.6;
    color: #718096;
}

.unidades__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

@media (max-width: 992px) {
    .unidades__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.unidade-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(8, 36, 107, .1);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.unidade-card:hover {
    transform: translateY(-4px);
    border-color: rgba(12, 52, 205, .25);
    box-shadow: 0 18px 46px rgba(8, 36, 107, .16);
}

.unidade-card__topo {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, #0c34cd, #000ca5);
}

.unidade-card__cabecalho {
    padding: 18px 20px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.unidade-card__nome {
    margin: 10px 0 6px;
    font-size: 22px;
    font-weight: 900;
    color: #333333;
}

.unidade-card__corpo {
    padding: 10px 20px 16px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.unidade-card__linha {
    display: grid;
    grid-template-columns: 37px auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    text-decoration: none;
}

.unidade-card__linha + .unidade-card__linha {
    border-top: 1px dashed rgba(0, 0, 0, .1);
}

.unidade-card__icone {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 52, 205, .1);
    color: #0c34cd;
    margin-top: 1px;
}

.unidade-card__icone svg {
    width: 16px;
    height: 16px;
}

.unidade-card__rotulo {
    font-weight: 900;
    color: #333333;
    font-size: 13px;
    padding-top: 8px;
}

.unidade-card__valor {
    color: #666666;
    font-size: 14px;
    line-height: 1.45;
    padding-top: 7px;
}

.unidade-card__linha:hover .unidade-card__valor {
    color: #001c72;
}

.unidade-card__linha--endereco {
    cursor: default;
}

.unidade-card__rodape {
    padding: 16px 20px 18px;
    display: grid;
    text-align: center;
    grid-template-columns: 1fr;
    gap: 12px;
}

.unidade-card__botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #0c34cd, #000ca5);
    box-shadow: 0 12px 30px rgba(50, 99, 237, .2);
    color: #fff;
    border: none;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
    transition: background 1s;
}

.unidade-card__botao:hover {
    background: linear-gradient(135deg, #22449a, #001c72);
    color: #fff;
}

@media (max-width: 992px) {
    .unidades__titulo {
        font-size: 26px;
    }
}

/* ===========================================================================
   10. CONTATO (CTA FINAL)
   ---------------------------------------------------------------------------
   Cópia literal do site de referência (alice/includes/home/cta.php e
   css/personalizados/home.css, .final-cta*), só com os nomes de classe
   deste projeto.
   =========================================================================== */
.contato-cta-secao {
    padding: 60px 0;
}

.contato-cta {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    padding: 22px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
}

.contato-cta__chapeu {
    display: block;
    margin-bottom: 6px;
    font-size: 1.75rem;
    font-weight: 400;
    color: #2d3748;
    line-height: 1.2;
}

.contato-cta__titulo {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: #0c34cd;
}

.contato-cta__texto {
    margin: 10px 0 0;
    max-width: 760px;
    color: #666666;
    font-size: 15px;
    line-height: 1.6;
}

.contato-cta__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.contato-cta__botao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 900;
    text-decoration: none;
    transition: .18s ease;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #333333;
}

.contato-cta__botao svg {
    width: 16px;
    height: 16px;
}

.contato-cta__botao:hover {
    transform: translateY(-1px);
    border-color: rgba(12, 52, 205, .3);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
    color: #333333;
}

.contato-cta__botao--primario {
    background: #0c34cd;
    color: #fff;
    border-color: transparent;
}

.contato-cta__botao--primario:hover {
    filter: brightness(1.05);
    color: #fff;
    border-color: transparent;
    box-shadow: none;
}

.contato-cta__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #e0e0e0;
    color: #666666;
    font-size: 13px;
}

.contato-cta__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contato-cta__meta-item svg {
    width: 14px;
    height: 14px;
    color: #0c34cd;
}

@media (max-width: 700px) {
    .contato-cta {
        padding: 18px;
    }

    .contato-cta__botao {
        width: 100%;
        justify-content: center;
    }

    .contato-cta__meta {
        flex-direction: column;
    }
}