/* ══════════════════════════════════════════════════════════════════════════
   help-center.css — acordeão de FAQ + cartão de contato.
   Carrega DEPOIS de legal.css (cabeçalho, grade e índice vêm de lá).
   Acordeão nativo <details> — acessível e funciona sem JS.
   ══════════════════════════════════════════════════════════════════════════ */

.faq-col { max-width: 70ch; }
.faq-group + .faq-group { margin-top: var(--sp-12); }
.faq-group > h2 {
  font-size: var(--fs-h3); color: var(--ink);
  margin-bottom: var(--sp-5); scroll-margin-top: 96px;
}

.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.faq {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.faq[open] { border-color: var(--green-400); box-shadow: var(--sh-sm); }

.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5); cursor: pointer; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q h3 {
  font-size: var(--fs-lg); font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.4;
  transition: color var(--d-fast) var(--ease);
}
.faq-q:hover h3,
.faq[open] .faq-q h3 { color: var(--green-800); }

/* Marca +/− desenhada com dois traços; ao abrir o vertical some */
.faq-mark { position: relative; flex: 0 0 auto; width: 20px; height: 20px; color: var(--green-800); }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
  transition: transform var(--d) var(--ease), opacity var(--d) var(--ease);
}
.faq-mark::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.faq-mark::after  { left: 9px; top: 2px; width: 2px; height: 16px; }
.faq[open] .faq-mark::after { transform: scaleY(0); opacity: 0; }

.faq-a { padding: 0 var(--sp-5) var(--sp-5); }
.faq-a p { color: var(--ink-2); line-height: var(--lh-body); }
.faq-a a {
  color: var(--green-800); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--lime-300); text-underline-offset: 3px;
  transition: color var(--d-fast) var(--ease);
}
.faq-a a:hover { color: var(--forest); }

/* ── Cartão "ainda com dúvidas?" ────────────────────────────────────────── */
.faq-contact {
  margin-top: var(--sp-12);
  padding: var(--sp-10) var(--sp-8);
  background: var(--wash); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-align: center;
}
.faq-contact h2 { font-size: var(--fs-h3); color: var(--ink); margin-bottom: var(--sp-2); }
.faq-contact p { color: var(--ink-3); margin-bottom: var(--sp-5); max-width: 46ch; margin-inline: auto; }