/* ==========================================================================
   FAQ — acordeão de perguntas frequentes
   Prefixo: faq-
   Tokens usados: --fg --fg-2 --rule --accent --display --ease
   ========================================================================== */


.faq-head .sec-title{margin-inline:auto}
.faq-head .eyebrow{margin-inline:auto}

/* 840px e não a coluna inteira: linha de resposta acima de ~75 caracteres
   cansa, e a pergunta centralizada precisa de bloco mais estreito para não
   ficar solta no meio da tela. */
.faq{max-width:840px;margin-inline:auto;margin-top:clamp(34px,5vh,54px)}

.faq-item{border-top:1px solid var(--rule)}
.faq-item:last-child{border-bottom:1px solid var(--rule)}

.faq-question{
  width:100%;background:none;border:none;color:var(--fg);text-align:left;
  padding:24px 2px;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.02em;
  transition:color .3s;
}
.faq-question:hover{color:var(--accent)}

/* Sinal +/− em duas pseudo-barras: a vertical gira 90° e vira traço. Um
   ícone trocado por outro piscaria; a rotação é contínua. */
.faq-sign{flex:0 0 auto;position:relative;width:13px;height:13px}
.faq-sign::before,.faq-sign::after{
  content:"";position:absolute;background:var(--accent);
  transition:transform .4s var(--ease);
}
.faq-sign::before{left:0;top:6px;width:13px;height:1px}
.faq-sign::after{left:6px;top:0;width:1px;height:13px}
.faq-item.is-open .faq-sign::after{transform:rotate(90deg)}

/* max-height animado, com o valor real medido pelo script. Não dá para
   animar height:auto, e um max-height chutado alto deixa a abertura lenta
   e o fechamento com atraso. */
.faq-answer{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-answer p{padding:0 2px 24px;font-size:17px;line-height:1.6;color:var(--fg-2);max-width:72ch}

@media(prefers-reduced-motion:reduce){
  .faq-answer{transition:none}
  .faq-sign::before,.faq-sign::after{transition:none}
}
