/* ── Componente: FAQ (acordeão) — modelo Dan Barros ──
   Itens com fios, ícone que gira, ABERTURA EXCLUSIVA (um por vez)
   e TRANSIÇÃO SUAVE de altura via grid-template-rows (0fr → 1fr).
   Comportamento por JS: alterna `.open` em `.ob-faq__item`
   (ver init no final do HTML). 100% orientado por tokens do DS. */

.ob-faq { display: flex; flex-direction: column; }

.ob-faq__item { border-top: var(--border-1) solid var(--rule); }
.ob-faq__item:last-child { border-bottom: var(--border-1) solid var(--rule); }

.ob-faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-24);
  background: none; border: none; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
}
.ob-faq__qt {
  font-family: var(--fh);
  font-size: var(--fs-xl); font-weight: var(--fw-semibold);
  color: var(--ink); line-height: var(--lh-snug);
}
.ob-faq__ic {
  width: var(--icon-md); height: var(--icon-md); flex-shrink: 0;
  color: var(--teal);
  transition: transform var(--duration-base) var(--easing-standard);
}
.ob-faq__item.open .ob-faq__ic { transform: rotate(45deg); }

/* Painel animado: a linha de grade colapsa de 0fr a 1fr */
.ob-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--easing-standard);
}
.ob-faq__item.open .ob-faq__panel { grid-template-rows: 1fr; }
.ob-faq__inner { overflow: hidden; min-height: 0; }
.ob-faq__a {
  font-size: var(--fs-lg); color: var(--ink-m);
  line-height: var(--lh-relaxed);
  padding-bottom: var(--space-28); max-width: 64ch;
}

@media (prefers-reduced-motion: reduce) {
  .ob-faq__panel, .ob-faq__ic { transition: none; }
}