/* pa: frente 3 da home v3 — tiles, confiança, casas, ocasião, FAQ, rodapé (28/09/2026).
   Carregado DEPOIS do pa.css: aqui só entra o que muda ou nasce nesta frente.
   pa.css é de outra frente e não pode ser tocado — tudo abaixo vence por
   ordem ou por especificidade. Régua: conhecimento/padrao-ui.md §1 (tokens),
   §2, §3.9, §3.10, §3.11, §3.14; plano/2026-09-28-home-v3-tasks.md. */

/* =========================================================================
   Task 12 + decisão 2 — FAIXA DE CONFIANÇA ÚNICA
   Funde a antiga faixa de 5 garantias (.pa-garantias, removida do HTML) com
   os 3 cards escuros (.pa-provas, idem). Forma: régua §3.10 com 4 itens.
   ========================================================================= */
/* O pa.css em produção ainda traz --pa-tinta-2: #736E79, que dá 4,34:1 no
   marfim e REPROVA no AA (a régua §1 já fixou #6A6570, 4,95:1, mas o token
   vive no pa.css, que é de outra frente). Aqui o valor da régua entra
   escopado nesta seção — nada de hex solto no corpo das regras. */
.pa-confianca-faixa {
  --pa-tinta-2: #6A6570;
  background: var(--pa-marfim);
  color: var(--pa-tinta);
  padding: var(--pa-e-32) var(--pa-gutter);
  text-align: center;
}
.pa-confianca-faixa ul {
  display: flex;
  gap: var(--pa-e-16);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--pa-max);
}
.pa-confianca-faixa ul::-webkit-scrollbar { display: none; }
.pa-confianca-faixa li { flex: 0 0 150px; }
/* ícone: conjunto A, traço fino âmbar (§3.14), 40x40, stroke 1,5 */
.pa-confianca-faixa svg {
  width: 40px; height: 40px;
  display: block; margin: 0 auto;
  stroke: var(--pa-ambar);
  stroke-width: 1.5;
  fill: none;
}
.pa-confianca-faixa h3 {
  font-family: var(--pa-sans);
  font-size: var(--pa-fs-12);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pa-tinta);            /* 13,06:1 sobre o marfim */
  margin: var(--pa-e-12) 0 0;
  line-height: 1.35;
}
.pa-confianca-faixa p {
  font-size: var(--pa-fs-14);
  color: var(--pa-tinta-2);          /* 4,95:1 sobre o marfim */
  margin: var(--pa-e-4) 0 0;
  line-height: 1.35;
}
.pa-confianca-faixa__acao { display: flex; justify-content: center; }
.pa-confianca-faixa .pa-vertodos { margin-top: var(--pa-e-24); }

/* =========================================================================
   Task 13 — casas: todas na mesma cor
   O pa.css pinta a casa sem página em --pa-tinta-2 (cinza), o que lê como
   "desabilitado". Gate visual do arquiteto: mesmo visual para as seis; só
   muda o fato de ser link ou texto (e o hover, que só o link tem).
   ========================================================================= */
.pa-casas > li > .pa-wordmark { color: var(--pa-tinta); }

/* =========================================================================
   Task 14 — "Escolha pela ocasião": abas + trilho de cards
   Abas, trilho e card reusam .pa-abas / .pa-pista / .pa-card do pa.css (mesmo
   componente da vitrine). Só falta a regra de painel escondido: .pa-pista é
   display:flex e, sem isto, o atributo [hidden] não esconde nada.
   ========================================================================= */
.pa-ocasiao [role="tabpanel"][hidden] { display: none; }

/* =========================================================================
   Task 16 — rodapé escuro
   ========================================================================= */
/* 13px e 11px são tamanhos proibidos pela régua §1; sobem para a escala. */
.pa-rodape { font-size: var(--pa-fs-14); }
.pa-rodape .pa-rodape__legal { font-size: var(--pa-fs-12); }
/* área de toque §5: cada link do rodapé vira alvo de 44px de altura */
.pa-rodape .pa-rodape__grade li { margin-bottom: 0; }
.pa-rodape .pa-rodape__grade li a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
/* a grade tinha 4 colunas fixas; com 2 colunas no ar as faixas ficavam
   estreitas demais. Coluna de largura fixa: a 3ª volta sem mexer no CSS. */
@media (min-width: 768px) {
  .pa-rodape .pa-rodape__grade { grid-template-columns: repeat(auto-fit, 220px); }
}

/* =========================================================================
   Desktop (>= 900px)
   ========================================================================= */
@media (min-width: 900px) {
  .pa-confianca-faixa { padding: var(--pa-e-40) var(--pa-gutter-desk); }
  .pa-confianca-faixa ul { justify-content: center; gap: 0; overflow: visible; }
  .pa-confianca-faixa li {
    flex: 1 1 0;
    padding: 0 var(--pa-e-24);
    border-right: 1px solid var(--pa-linha);
  }
  .pa-confianca-faixa li:last-child { border-right: 0; }

}