/**
 * Tema das páginas de apoio: hub de bairro, guia e satélite.
 *
 * Elas eram o ponto fraco visual do site. A home tem uma identidade resolvida — fundo preto,
 * laranja nos detalhes, tipografia consistente — e as páginas de apoio herdavam o tema claro
 * genérico do `site.css`, feito para a landing do empreendimento. O resultado era um site que
 * mudava de cara conforme a página, e, no caso do hub, texto branco sobre fundo branco: a
 * seção usava `--brand-dark`, que só existe no tema injetado por empreendimento e portanto
 * não existia ali.
 *
 * Este arquivo unifica as três no tema da home. Ele é carregado DEPOIS do `site.css` e
 * sobrescreve o que precisa, em vez de o `site.css` tentar servir a dois temas.
 *
 * A paleta mora no `site.css`, no `:root`, para que home e apoio usem literalmente os mesmos
 * valores — se a marca mudar de laranja, muda nos dois de uma vez.
 */

.apoio-page {
  margin: 0;
  color: var(--home-white);
  background: var(--home-black);
  font-family: Inter, var(--body-font), Arial, sans-serif;
}
.apoio-page h1, .apoio-page h2, .apoio-page h3, .apoio-page strong { color: var(--home-white); }
.apoio-page p, .apoio-page li { color: rgba(247, 244, 239, .74); }
.apoio-page a { color: inherit; }

/* O olho da seção é laranja, como na home. É o único acento de cor do site. */
.apoio-page .eyebrow, .apoio-page .home-kicker { color: var(--home-orange); letter-spacing: .2em; }

/* Todas as faixas ficam no mesmo preto. A alternância clara/escura que existia na landing
   fazia sentido lá, onde a foto do produto manda; aqui só produzia remendo. */
.apoio-page .section,
.apoio-page .contact,
.apoio-page .facts,
.apoio-page .busca-imoveis,
.apoio-page .guia-consultor,
.apoio-page .hub-vizinhos,
.apoio-page .satellite-body { background: transparent; color: var(--home-white); }

/* Um fio de separação entre seções, no lugar da troca de fundo. */
.apoio-page .section + .section { border-top: 1px solid var(--home-line); }

/* ------------------------------------------------------------------ cabeçalho */
.apoio-page .site-header,
.apoio-page .site-header--projeto,
.apoio-page .site-header--brand {
  position: sticky; top: 0;
  background: rgba(5, 5, 5, .58);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: none;
  color: var(--home-white);
}
.apoio-page .desktop-nav a { color: rgba(255, 255, 255, .78); opacity: 1; }
.apoio-page .desktop-nav a:hover, .apoio-page .desktop-nav a:focus-visible { color: var(--home-orange); opacity: 1; }

/* ------------------------------------------------------------------ hero com imagem */
.apoio-hero { position: relative; display: grid; align-items: end; min-height: clamp(420px, 62svh, 620px); overflow: hidden; }
.apoio-hero-fundo { position: absolute; inset: 0; }
.apoio-hero-fundo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.05); }
/* A imagem alterna a cada abertura; as demais entram escondidas e o JS troca qual aparece. */
.apoio-hero-fundo img[hidden] { display: none; }
.apoio-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 9, 9, .35) 0%, rgba(9, 9, 9, .55) 45%, rgba(9, 9, 9, .93) 100%);
}
.apoio-hero-conteudo { position: relative; z-index: 2; padding-block: clamp(38px, 6vw, 76px); }
.apoio-hero h1 { margin: 10px 0 12px; font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.06; letter-spacing: -.02em; }
.apoio-hero p { max-width: 620px; margin: 0; color: rgba(247, 244, 239, .8); font-size: clamp(.98rem, 1.6vw, 1.1rem); }
.apoio-hero .breadcrumb { margin-bottom: 14px; }
.apoio-hero .breadcrumb, .apoio-hero .breadcrumb a { color: rgba(247, 244, 239, .62); }
.apoio-hero .breadcrumb a:hover { color: var(--home-orange); }

/* ------------------------------------------------------------------ busca e cards */
.apoio-page .busca-campo span { color: var(--home-orange-soft); }
.apoio-page .busca-campo input, .apoio-page .busca-campo select {
  border: 1px solid var(--home-line); border-radius: 0; background: rgba(255, 255, 255, .05); color: var(--home-white);
}
.apoio-page .busca-campo input:focus, .apoio-page .busca-campo select:focus { border-color: var(--home-orange); outline: none; }
.apoio-page .imovel-card { border: 1px solid var(--home-line); border-radius: 0; background: #131313; }
.apoio-page .imovel-card:hover { border-color: var(--home-orange); }
.apoio-page .imovel-card-selo { border-radius: 0; background: rgba(9, 9, 9, .82); color: var(--home-white); }
.apoio-page .imovel-card-local { color: var(--home-orange-soft); }
.apoio-page .imovel-card-fatos { color: var(--home-muted); }

/* ------------------------------------------------------------------ botões */
.apoio-page .button {
  border-radius: 0; border: 1px solid var(--home-orange); background: var(--home-orange); color: #0a0a0a;
  font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem;
}
.apoio-page .button:hover { background: var(--home-orange-soft); border-color: var(--home-orange-soft); }
.apoio-page .button--ghost, .apoio-page .button--light {
  background: transparent; color: var(--home-white); border-color: rgba(255, 255, 255, .38);
}
.apoio-page .button--ghost:hover, .apoio-page .button--light:hover { border-color: var(--home-orange); color: var(--home-orange); background: transparent; }

/* ------------------------------------------------------------------ perguntas */
.apoio-page .faq details { border-bottom: 1px solid var(--home-line); background: transparent; }
.apoio-page .faq summary { color: var(--home-white); }
.apoio-page .faq summary:hover { color: var(--home-orange); }
.apoio-page .faq p { color: rgba(247, 244, 239, .72); }

/* ------------------------------------------------------------------ links de saída */
.apoio-page .hub-links a, .apoio-page .guia-card, .apoio-page .satelite-link {
  border: 1px solid var(--home-line); border-radius: 0; background: #111; color: var(--home-white);
}
.apoio-page .hub-links a:hover, .apoio-page .guia-card:hover, .apoio-page .satelite-link:hover { border-color: var(--home-orange); }
.apoio-page .hub-vizinhos-titulo { color: var(--home-orange-soft); opacity: 1; }
.apoio-page .busca-ampliar a { color: var(--home-orange); }

/* ------------------------------------------------------------------ formulário da satélite */
.apoio-page .form-imoveis { border: 1px solid var(--home-line); border-radius: 0; background: #101010; }
.apoio-page .form-imoveis label { color: var(--home-orange-soft); }
.apoio-page .form-imoveis input { border: 1px solid var(--home-line); border-radius: 0; background: rgba(255, 255, 255, .05); color: var(--home-white); }
.apoio-page .form-imoveis input:focus { border-color: var(--home-orange); outline: none; }
.apoio-page .contact-benefits li { color: rgba(247, 244, 239, .78); }

/* ------------------------------------------------------------------ galeria e plantas */
.apoio-page .gallery-tile, .apoio-page .plan-card { border-radius: 0; background: #131313; }
.apoio-page .plan-card { border: 1px solid var(--home-line); }
.apoio-page .typology-card { border: 1px solid var(--home-line); border-radius: 0; background: #111; color: var(--home-white); }

/* ------------------------------------------------------------------ rodapé */
.apoio-page .site-footer { border-top: 1px solid var(--home-line); background: #050505; color: var(--home-white); }
.apoio-page .site-footer a { color: rgba(247, 244, 239, .7); }
.apoio-page .site-footer a:hover { color: var(--home-orange); }