/* =========================================================
   Component — FAQ Accordion (Seção 5)
   ========================================================= */

.faq__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  margin-block-end: var(--space-7);
}
.faq__title strong { font-weight: var(--fw-semibold); }

.faq__list {
  border-block-start: 1px solid var(--border-subtle);
}

.faq__item {
  border-block-end: 1px solid var(--border-subtle);
}

.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: 1.625rem;          /* ~26px → linha de ~80px como no protótipo */
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-std);
}
.faq__trigger:hover { color: var(--color-sage-ink); }
.faq__trigger::-webkit-details-marker { display: none; } /* remove seta nativa */

/* Ícone +/− — usa os SVGs de assets/icons (plus.svg / -.svg) via mask,
   herdando a cor do texto (currentColor) p/ acompanhar o hover.
   Fechado = "+", aberto = "−". */
.faq__sign {
  width: 1.5rem; height: 1.5rem;    /* 24px = viewBox do ícone */
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("../../assets/icons/plus.svg") center / contain no-repeat;
          mask: url("../../assets/icons/plus.svg") center / contain no-repeat;
}
.faq__item[open] .faq__sign {
  -webkit-mask-image: url("../../assets/icons/-.svg");
          mask-image: url("../../assets/icons/-.svg");
}

.faq__panel {
  padding-block-end: var(--space-6);
  padding-inline-end: var(--space-8);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: 1.6;
  /* sem limite estreito: acompanha a largura da pergunta (até o ícone +/−) */
  max-width: none;
}