/* ==========================================================================
   FAQ — título à esquerda, sanfona à direita
   ========================================================================== */

/* --offwhite alterna com o --branco das avaliações acima, e é a cor que a onda
   do rodapé usa: esta passou a ser a última seção antes dele. */
.faq {
    padding: calc(var(--secao-y) + var(--onda-folga)) var(--gutter) var(--secao-y);
    background: var(--offwhite);
}

.faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 4vw, 72px);
    max-width: 1180px;
    margin: 0 auto;
}

.faq__titulo {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 1.1;
    letter-spacing: 0.005em;
    color: var(--pinho);
    text-wrap: balance;
}

/* ---------- sanfona ----------
   <details>/<summary> nativos: abrem sem JS, entram na navegação por teclado e
   já são anunciados como grupo expansível pelo leitor de tela. */
.faq__item {
    border-bottom: 1px solid var(--linha);
}

.faq__item:first-child { border-top: 1px solid var(--linha); }

.faq__pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(14px, 2vw, 28px);
    padding: clamp(16px, 1.8vw, 24px) 0;
    font-size: clamp(15px, 1.15vw, 17.5px);
    font-weight: 800;
    line-height: 1.35;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

/* o triângulo padrão do WebKit some; a seta abaixo é a nossa */
.faq__pergunta::-webkit-details-marker { display: none; }

.faq__pergunta svg {
    width: clamp(18px, 1.5vw, 22px);
    height: clamp(18px, 1.5vw, 22px);
    flex: none;
    color: var(--sage);
    transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__item[open] .faq__pergunta svg { rotate: 180deg; }

.faq__resposta {
    padding-bottom: clamp(16px, 1.8vw, 24px);
    font-size: clamp(14.5px, 1.08vw, 16.5px);
    line-height: 1.6;
    color: rgba(46, 50, 39, 0.8);
}

.faq__resposta b { font-weight: 800; color: var(--ink); }

.faq__nota {
    display: block;
    margin-top: 6px;
    font-size: clamp(12.5px, 0.95vw, 14px);
    color: rgba(46, 50, 39, 0.55);
}

/* ---------- abertura animada ----------
   ::details-content é a única forma de transicionar um <details> sem JS: ele é
   o único gancho para a caixa que o browser cria em volta do conteúdo. Onde o
   seletor não existe (WebKit e Gecko, hoje) o bloco inteiro é ignorado e a
   sanfona abre seca — que é exatamente o comportamento atual, então ninguém
   fica pior do que está.

   interpolate-size fica no .faq, não no :root: ele é herdado, e ligar
   palavra-chave animável no documento inteiro mexeria em transições de outras
   seções sem que ninguém tivesse pedido. */
@supports selector(::details-content) {
    .faq { interpolate-size: allow-keywords; }

    .faq__item::details-content {
        block-size: 0;
        opacity: 0;
        overflow: hidden;
        transition: block-size 320ms cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 240ms ease,
                    content-visibility 320ms allow-discrete;
    }

    .faq__item[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq__item::details-content,
    .faq__pergunta svg { transition: none; }
}