/* ==========================================================================
   Tema Interior — camada sobre o desenho base do site público.

   Carregada só nas páginas de /sites/* e sempre escopada em
   `body.tema-interior`, então ela nunca alcança o tema 0 nem o admin. Ela
   veste o markup que já existe: nada aqui esconde campo, filtro ou botão.

   As cores saem dos tokens do site_config (o tema propõe uma paleta na aba
   Tema, o cliente ajusta na aba Estilo) — nenhum hexadecimal de marca é
   fixado aqui, só os pretos e brancos de contraste.
   ========================================================================== */

body.tema-interior {
    /* A barra de topo e o rodapé são escuros: derivam do tom dos títulos. */
    --nav-bg: var(--titulo);
    --nav-fg: #ffffff;
    --nav-fg-fraco: rgba(255, 255, 255, .62);
    --linha: color-mix(in srgb, var(--texto) 13%, transparent);
    --sombra-bloco: 0 18px 40px -24px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   Tipografia e ritmo — geométrica, títulos em peso alto, sem serifa.
   -------------------------------------------------------------------------- */

body.tema-interior h1,
body.tema-interior h2,
body.tema-interior h3,
body.tema-interior h4 {
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.18;
}

body.tema-interior .eyebrow {
    letter-spacing: .18em;
    color: var(--destaque);
}
body.tema-interior .eyebrow::before { display: none; }

/* Blocos da home alternando branco e cinza. Ancorado no `.hero` para valer
   só onde ele existe (a home) — listagem e detalhe seguem no fundo limpo. */
body.tema-interior main > section.hero ~ section:nth-of-type(even) {
    background: var(--bg-alt);
}

/* O cabeçalho de seção da referência é centralizado, com o "ver todos"
   embaixo em vez de na mesma linha. */
body.tema-interior main > section.hero ~ section .section-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
body.tema-interior main > section.hero ~ section .section-head__lead {
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Botões — retangulares, rótulo em caixa alta.
   -------------------------------------------------------------------------- */

body.tema-interior .btn {
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 700;
    font-size: 12.5px;
    padding: 15px 30px;
}
body.tema-interior .btn--sm { padding: 10px 20px; font-size: 11px; }
body.tema-interior .btn--primary { color: #fff; }
body.tema-interior .btn--primary:hover {
    background: color-mix(in srgb, var(--link) 84%, black);
    transform: none;
    box-shadow: none;
}
body.tema-interior .btn--ghost:hover { color: #fff; }

body.tema-interior .pill {
    border-radius: 2px;
    letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   Busca dentro da foto — abas soltas acima de uma barra branca única.
   -------------------------------------------------------------------------- */

/* Dentro do hero a busca não é um `.container`: ela se mede pela caixa
   central, senão os 92vw do container estouram a largura. */
body.tema-interior .hero-interior__busca .busca-wrap {
    width: 100%;
    margin: 0;
}

body.tema-interior .hero-interior__busca .busca {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

body.tema-interior .busca__tabs { gap: 5px; }
body.tema-interior .hero-interior__busca .busca__tabs {
    justify-content: center;
    margin: 0;
}
body.tema-interior .busca__tab {
    border-radius: 3px;
    padding: 13px 32px;
    letter-spacing: .1em;
    background: color-mix(in srgb, var(--nav-bg) 78%, transparent);
    color: #fff;
    backdrop-filter: blur(6px);
}
body.tema-interior .busca__tab:hover { background: var(--nav-bg); }
body.tema-interior .busca__tab.active { background: var(--link); color: #fff; }

body.tema-interior .hero-interior__busca .busca__grid {
    width: 100%;
    background: rgba(255, 255, 255, .95);
    border-radius: 3px;
    padding: 8px;
    gap: 0;
    align-items: stretch;
    box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .65);
}
body.tema-interior .hero-interior__busca .busca__grid .busca__field {
    justify-content: center;
    padding: 6px 16px;
    gap: 3px;
    border-right: 1px solid rgba(0, 0, 0, .09);
    min-width: 0;
}
body.tema-interior .hero-interior__busca .busca__grid .busca__field:last-child { border-right: 0; }
/* Na barra única nada se corta: a célula tem no mínimo o rótulo e o escolhido. */
body.tema-interior .hero-interior__busca .busca-wrap--barra .busca__grid .busca__field { min-width: min-content; }
body.tema-interior .hero-interior__busca .busca-wrap--barra .busca__grid .busca__field label { letter-spacing: .1em; }
body.tema-interior .hero-interior__busca .busca__grid .busca__field label {
    color: #08086c;
    letter-spacing: .16em;
}
body.tema-interior .hero-interior__busca .busca__grid .busca__field > input,
body.tema-interior .hero-interior__busca .busca__grid .busca__field > select,
body.tema-interior .hero-interior__busca .busca__grid .escolha__gatilho {
    border: 0;
    background: transparent;
    padding: 3px 0;
    font-size: 14px;
    color: var(--nav-bg);
    min-width: 0;
}
body.tema-interior .hero-interior__busca .busca__grid .busca__field > input:focus,
body.tema-interior .hero-interior__busca .busca__grid .busca__field > select:focus,
body.tema-interior .hero-interior__busca .busca__grid .escolha__gatilho:focus {
    box-shadow: none;
    outline: 2px solid var(--link);
    outline-offset: 2px;
}
body.tema-interior .hero-interior__busca .busca__grid .busca__field--cta { padding: 0; }
body.tema-interior .hero-interior__busca .busca__grid .busca__field--cta .btn {
    border-radius: 3px;
}

@media (max-width: 900px) {
    body.tema-interior .hero-interior__busca .busca__grid { padding: 6px; }
    body.tema-interior .hero-interior__busca .busca__grid .busca__field {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .09);
    }
    body.tema-interior .busca__tab { padding: 11px 20px; }
}

/* A mesma busca no topo da listagem: cartão branco sobre o fundo da página. */
body.tema-interior .busca {
    border-radius: 3px;
    box-shadow: var(--sombra-bloco);
}

/* --------------------------------------------------------------------------
   Cards — no formato horizontal, a coluna do preço à direita.
   -------------------------------------------------------------------------- */

body.tema-interior .card {
    border-radius: 3px;
    border-color: var(--linha);
}
body.tema-interior .card:hover {
    transform: none;
    box-shadow: var(--sombra-bloco);
}
body.tema-interior .card__titulo {
    font-size: 1.1rem;
    font-weight: 600;
}
body.tema-interior .card__local {
    letter-spacing: .1em;
    color: var(--destaque);
}
body.tema-interior .card__ref {
    border-radius: 2px;
    background: color-mix(in srgb, var(--nav-bg) 88%, transparent);
}
body.tema-interior .grid-imoveis--lista .card__specs li {
    border-left-color: var(--linha);
}
body.tema-interior .card__valor { font-weight: 700; }
body.tema-interior .card__cta {
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11.5px;
}

@container (min-width: 760px) {
    /* As três zonas do card horizontal (foto | texto | preço+botão) nasceram
       aqui, mas hoje são do modo "lista" da listagem — valem em qualquer tema
       e moram em parts/card_imovel_css.html, pela largura da lista. O que
       sobra para o tema são as linhas e os cantos dele. */
    body.tema-interior .grid-imoveis--lista .card--estilo2 .card__specs {
        border-top-color: var(--linha);
    }
    body.tema-interior .grid-imoveis--lista .card--estilo2 .card__preco {
        border-left-color: var(--linha);
    }
    body.tema-interior .grid-imoveis--lista .card--estilo2 .card__cta {
        border-radius: 3px;
        color: #fff;
    }
    body.tema-interior .grid-imoveis--lista .card--estilo2:hover .card__cta {
        background: color-mix(in srgb, var(--link) 84%, black);
    }
}

@media (min-width: 720px) {
    /* Na vitrine da home o card volta a empilhar: em meia largura o horizontal
       corta o título e as specs. A listagem, que tem a linha inteira, é quem
       deita — e lá quem decide é o modo escolhido pelo visitante. */
    body.tema-interior main > section.hero ~ section .grid-imoveis {
        grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    }
    body.tema-interior main > section.hero ~ section .card--estilo2 {
        flex-direction: column;
    }
    body.tema-interior main > section.hero ~ section .card--estilo2 .card__figure {
        flex: none;
        aspect-ratio: 4 / 3;
    }
}

/* --------------------------------------------------------------------------
   Listagem — filtros na coluna, com os grupos numéricos segmentados.
   -------------------------------------------------------------------------- */

body.tema-interior .filtros {
    border-radius: 3px;
    border-color: var(--linha);
}
body.tema-interior .filtros__nums button {
    border-radius: 0;
    border-color: var(--linha);
    font-weight: 600;
}
body.tema-interior .filtros__nums button:first-of-type { border-radius: 3px 0 0 3px; }
body.tema-interior .filtros__nums button:last-of-type { border-radius: 0 3px 3px 0; }
body.tema-interior .filtros__nums button.ativo { color: #fff; border-color: var(--link); }
body.tema-interior .filtros .escolha__gatilho,
body.tema-interior .filtros__faixa input,
body.tema-interior .filtros__lupa { border-radius: 3px; }
body.tema-interior .filtros .escolha__gatilho,
body.tema-interior .filtros__faixa input { border-color: var(--linha); }

body.tema-interior .ordenar summary,
body.tema-interior .btn-filtrar-mobile { border-radius: 3px; }

/* O rodapé é peça própria do tema (temas/interior/footer.html). */

/* --------------------------------------------------------------------------
   Formulários e blocos de conteúdo — mesmos cantos retos do resto.
   -------------------------------------------------------------------------- */

body.tema-interior input,
body.tema-interior select,
body.tema-interior textarea { border-radius: 3px; }

body.tema-interior .sec-chamada { text-align: center; }