/* ============================================================
   FORJA — PERGUNTAS FREQUENTES
   ------------------------------------------------------------
   Fundo claro, busca em destaque, categorias identificáveis e
   accordions brancos com borda leve. Nenhuma referência a
   ferraria, nenhum selo, nenhuma estrela.

   Também define os blocos compartilhados (.bl-*), porque eles
   nasceram aqui e são usados por planos, serviços, contato e
   página inicial. As páginas que usam os blocos carregam este
   arquivo além do próprio.
   ============================================================ */

/* O atributo hidden precisa vencer qualquer display declarado
   abaixo: a busca esconde item e grupo por ele. */
[hidden] { display: none !important; }

/* =============================================
   ABERTURA
   ============================================= */
.pf-hero {
  background: var(--forja-bg);
  padding-block: clamp(44px, 6vw, 84px) clamp(28px, 3.5vw, 44px);
}

.pf-hero__conteudo { max-width: 62ch; }
.pf-hero h1 { margin-block: 10px 16px; }

/* =============================================
   BUSCA
   ============================================= */
.pf-busca { margin-top: clamp(28px, 4vw, 44px); max-width: 640px; }

.pf-busca__rotulo {
  display: block;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--forja-ink);
  margin-bottom: 10px;
}

.pf-busca__campo {
  position: relative;
  display: flex;
  align-items: center;
}

.pf-busca__lupa {
  position: absolute;
  left: 16px;
  width: 20px;
  height: 20px;
  color: var(--forja-ink-soft);
  pointer-events: none;
}

.pf-busca__entrada {
  width: 100%;
  min-height: 56px;
  padding: 14px 52px 14px 46px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--forja-ink);
  background: var(--forja-surface);
  border: 1px solid var(--forja-border);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.pf-busca__entrada::placeholder { color: var(--forja-ink-soft); opacity: 1; }
.pf-busca__entrada::-webkit-search-cancel-button { display: none; }

.pf-busca__entrada:hover { border-color: var(--forja-ink-soft); }

.pf-busca__entrada:focus {
  outline: none;
  border-color: var(--forja-copper-deep);
  box-shadow: 0 0 0 3px rgba(169, 106, 50, 0.16);
}

.pf-busca__limpar {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--forja-ink-soft);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.pf-busca__limpar svg { width: 18px; height: 18px; }
.pf-busca__limpar:hover { background: var(--forja-bg-alt); color: var(--forja-ink); }

.pf-busca__contagem {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--forja-ink-soft);
}

/* =============================================
   CATEGORIAS
   ============================================= */
.pf-secao-categorias {
  position: sticky;
  /* Altura real do cabeçalho fixo, medida no navegador: 77px de
     480px para cima. Abaixo de 620px esta barra deixa de ser fixa
     (ver a media query no fim do arquivo), então o valor de 69px
     do celular não interfere. */
  top: 77px;
  z-index: 5;
  background: var(--forja-bg);
  padding-block: 14px;
  border-bottom: 1px solid var(--forja-border);
  /* Contém a barra rolável. Sem isto, o transbordo dela ainda
     entrava no scrollWidth dos ancestrais: a página não rolava
     de lado (o body tem overflow-x hidden), mas o documento era
     medido mais largo do que a janela. É seguro aqui porque o
     próprio elemento é o sticky — overflow em um ANCESTRAL é que
     quebraria a fixação. */
  overflow: hidden;
}

.pf-categorias {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.faq-categoria {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 8px 16px;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--forja-ink-soft);
  background: var(--forja-surface);
  border: 1px solid var(--forja-border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.faq-categoria:hover {
  color: var(--forja-ink);
  border-color: var(--forja-ink-soft);
}

/* A categoria ativa não se distingue só pela cor: ganha peso,
   contorno mais forte e aria-pressed. */
.faq-categoria--ativa {
  color: #FFFFFF;
  background: var(--forja-copper-strong);
  border-color: var(--forja-copper-strong);
  font-weight: 700;
}

.faq-categoria__total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding-inline: 6px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--forja-ink-soft);
  background: var(--forja-bg-alt);
  border-radius: 999px;
}

/* Véu escuro, não claro: sobre o cobre, um véu branco a 22%
   deixava o texto branco em 3,37:1 — abaixo do mínimo para um
   número pequeno. Escurecer o fundo resolve sem mudar a cor da
   categoria ativa. */
.faq-categoria--ativa .faq-categoria__total {
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.26);
}

/* =============================================
   LISTA
   ============================================= */
.pf-secao-lista { background: var(--forja-bg); }
.pf-carregando { color: var(--forja-ink-soft); }

.faq-grupo { margin-bottom: clamp(32px, 4vw, 52px); }
.faq-grupo:last-child { margin-bottom: 0; }

.faq-grupo__titulo {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: 6px;
}

.faq-grupo__texto {
  font-size: var(--fs-small);
  color: var(--forja-ink-soft);
  margin-bottom: 18px;
}

.faq-grupo__itens {
  display: grid;
  gap: 10px;
}

.faq-item {
  background: var(--forja-surface);
  border: 1px solid var(--forja-border);
  border-radius: 12px;
  overflow: hidden;
  /* Cabeçalho (77px) + barra de categorias, para que o link direto
     não deixe a pergunta escondida atrás dos dois. */
  scroll-margin-top: 150px;
}

.faq-item__cabecalho { margin: 0; font-size: inherit; font-weight: inherit; }

.faq-item__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 16px 20px;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  color: var(--forja-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.faq-item__botao:hover { color: var(--forja-copper-deep); }
.faq-item__botao:focus-visible { outline-offset: -3px; }

/* O sinal é decorativo: o estado real vai em aria-expanded. */
.faq-item__sinal {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--forja-copper-deep);
}

.faq-item__sinal::before,
.faq-item__sinal::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.faq-item__sinal::after { transform: translateY(-50%) rotate(90deg); }

.faq-item__botao[aria-expanded="true"] .faq-item__sinal::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.faq-item__painel { padding: 0 20px 20px; }

.faq-item__resposta {
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--forja-ink-soft);
  max-width: 72ch;
}

.faq-item__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
}

.faq-item__ancora { margin-top: 14px; }

.faq-item__link {
  font-size: 0.78rem;
  color: var(--forja-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-item__link:hover { color: var(--forja-copper-deep); }

/* =============================================
   ESTADO SEM RESULTADO
   ============================================= */
.pf-vazio {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: clamp(32px, 5vw, 56px) 24px;
  margin-bottom: 28px;
  text-align: center;
  background: var(--forja-surface);
  border: 1px solid var(--forja-border);
  border-radius: 14px;
}

.pf-vazio__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  color: var(--forja-copper-deep);
  background: var(--forja-bg-alt);
  border-radius: 12px;
}

.pf-vazio__icone svg { width: 24px; height: 24px; }

.pf-vazio__titulo {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--forja-ink);
}

.pf-vazio__texto {
  font-size: var(--fs-small);
  color: var(--forja-ink-soft);
  margin-bottom: 10px;
}

/* ============================================================
   BLOCOS COMPARTILHADOS
   ============================================================ */

/* ---- Clareza antes da contratação ---- */
.bl-confianca {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 620px) { .bl-confianca { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .bl-confianca { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bl-confianca__item {
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--forja-surface);
  border: 1px solid var(--forja-border);
  border-radius: 14px;
}

.bl-confianca__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  color: var(--forja-copper-deep);
  background: var(--forja-bg-alt);
  border-radius: 11px;
}

.bl-confianca__icone svg { width: 21px; height: 21px; }

.bl-confianca__titulo {
  font-size: 1rem;
  margin-bottom: 6px;
}

.bl-confianca__texto {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--forja-ink-soft);
}

/* ---- Informações importantes ----
   Aviso, não alarme: fundo claro e borda cobre discreta. */
.bl-info {
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--forja-surface);
  border: 1px solid var(--forja-copper);
  border-left-width: 3px;
  border-radius: 12px;
}

.bl-info__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.bl-info__icone {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--forja-copper-deep);
}

.bl-info__icone svg { width: 20px; height: 20px; }

.bl-info__titulo {
  font-size: 1rem;
  margin: 0;
}

.bl-info__lista {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bl-info__lista li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--forja-ink-soft);
}

.bl-info__lista li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--forja-copper);
  border-radius: 50%;
}

/* ---- FAQ contextual: link para a página completa ---- */
.faq__todas { margin-top: 20px; }

.faq__corpo { padding-bottom: 2px; }

.faq__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 12px;
}

/* Um <button> usado como link precisa parecer link. */
button.link-arrow {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* =============================================
   RESPONSIVO
   ============================================= */
@media (max-width: 620px) {
  .pf-busca__entrada { min-height: 52px; }
  .faq-item__botao { padding: 14px 16px; }
  .faq-item__painel { padding: 0 16px 16px; }
  .pf-secao-categorias { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__sinal::before,
  .faq-item__sinal::after,
  .pf-busca__entrada,
  .faq-categoria { transition: none; }
}

/* ============================================================
   PÁGINA 404
   ============================================================ */
.erro-404 {
  background: var(--forja-bg);
  padding-block: clamp(56px, 9vw, 120px);
}

.erro-404__inner { max-width: 62ch; }
.erro-404 h1 { margin-block: 10px 16px; }

.erro-404__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.erro-404__apoio {
  margin-top: 24px;
  font-size: var(--fs-small);
  color: var(--forja-ink-soft);
}

.erro-404__apoio a {
  color: var(--forja-copper-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .erro-404__acoes .btn { width: 100%; }
}