/* =============================================================================
   Home — o que existe só nesta página.
   =============================================================================
   Carrega depois de css/otimizer.css e obedece à regra do projeto: só classes
   NOVAS, prefixadas por .home-. Nada aqui redefine seletor do padrão.

   A versão anterior deste arquivo não seguia essa regra: abria com
   `.lp{background:var(--bg)}`, mesma especificidade (0,1,0) de
   `.lp-site-header{background:var(--ink-deep)}` do padrão. Como o header carrega
   as duas classes e o CSS da página vem por último, o empate era decidido por
   ordem: o header ficava branco só na home, e a logo (que é a versão branca)
   sumia. Prefixo próprio não tem como colidir com o padrão — é essa a razão da
   regra, e não estética.
   ========================================================================== */

/* ---- pastilhas de segmento ------------------------------------------------
   Os ramos que não têm card próprio na dobra acima. São links, não enfeite:
   entram como <ul> para o leitor de tela anunciar quantos são. */
.home-tags-secao { background: #fff; padding: 0 0 84px }

.home-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-tag {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--pc-linha);
  border-radius: 999px;
  background: #fff;
  color: var(--pc-tinta);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.home-tag:hover,
.home-tag:focus-visible {
  border-color: var(--pc-laranja);
  color: var(--pc-laranja);
  transform: translateY(-2px);
}

/* ---- mapa do Brasil -------------------------------------------------------
   Imagem larga e única, sem cartão em volta: a moldura do .pc-card competiria
   com o contorno do próprio mapa. */
.home-mapa { max-width: 900px; margin-inline: auto }
.home-mapa img { width: 100%; height: auto; display: block }

/* ---- fechamento: CTA + formulário de lead ---------------------------------
   A última dobra da home é a única do site com formulário. As outras páginas
   fecham com blocos/final.php (CTA e cartões de contato); aqui o formulário é
   o que converte quem não quer abrir o WhatsApp na hora, então ele fica, ao
   lado do CTA, dentro da mesma faixa escura .pc-final do padrão. */
.home-fechamento { align-items: start; gap: 44px; text-align: left }
.home-fechamento-cta { margin-top: 28px }

.home-form h3 { font-size: 1.15rem; margin-bottom: 20px }
.home-campo { margin-bottom: 14px }
.home-campo label {
  display: block;
  margin-bottom: 6px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--pc-mudo-claro);
}
.home-campo input,
.home-campo select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font: inherit;
  font-size: .95rem;
}
.home-campo input::placeholder { color: rgba(255, 255, 255, .42) }
.home-campo input:focus,
.home-campo select:focus {
  outline: 2px solid var(--pc-laranja);
  outline-offset: 1px;
  border-color: transparent;
  background: rgba(255, 255, 255, .12);
}
/* O <select> nativo desenha as opções com o fundo do sistema; sem isto, no
   Chrome do Windows a lista abre com texto branco sobre branco. */
.home-campo select option { color: #1a1a1a; background: #fff }

.home-form button[type="submit"] { width: 100%; margin-top: 8px }
.home-form-nota { margin: 14px 0 0; font-size: .82rem; color: var(--pc-mudo-claro) }
.home-form-ok {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(37, 211, 102, .16);
  color: #9ff0c2;
  font-size: .88rem;
  line-height: 1.5;
}
.home-form-ok.is-on { display: block }

@media (max-width: 900px) {
  .home-fechamento { grid-template-columns: 1fr; gap: 32px }
}

@media (max-width: 720px) {
  .home-tags-secao { padding: 0 0 52px }
  .home-tag { font-size: .86rem; padding: 8px 15px }
}