/* ============================================================
   Perguntas frequentes — <details> nativo: abre sem JS, responde ao
   teclado e ao leitor de tela. O "+" vira "−" girando, nada mais.

   <div class="faq">
       <details class="faq__item">
           <summary class="faq__q"><span>Pergunta</span><span class="faq__toggle"></span></summary>
           <p class="faq__a">Resposta</p>
       </details>
   </div>
   ============================================================ */

.faq { border-top: 1px solid var(--fg-line); }

.faq__item { border-bottom: 1px solid var(--fg-line); }

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: 64px;
    padding-block: var(--space-5);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }

.faq__toggle {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--fg-line);
    transition: background-color var(--dur-base) var(--ease-apple), transform var(--dur-base) var(--ease-apple);
}

.faq__toggle::before,
.faq__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--dur-base) var(--ease-apple);
}
.faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__item[open] .faq__toggle { background: var(--brand); color: #FFFFFF; box-shadow: none; }
.faq__item[open] .faq__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__a {
    max-width: 62ch;
    padding-bottom: var(--space-6);
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--fg-soft);
}