/* ========================================================================== NEXUS theme-final / sections/faq.css Território exclusivo da seção #faq (accordion de nove perguntas frequentes, spec do dono item L, 06/08/2026). Só consome tokens de 01-tokens.css e primitivos de 02-base.css/ 04-sections.css (.section, .section__head, .eyebrow, .lead). Nenhum hex, nenhum !important, nenhum vh — a única unidade de viewport usada em qualquer folha de seção do projeto é svh no hero, e nem isso se aplica aqui. Motion: só transform e opacity animam; toda duração usa calc(var(--dur-*) * var(--motion)) para o interruptor do estúdio. Índice: 0. Cabeçalho da seção (título reduzido, só aqui) 1. Lista (duas colunas independentes, qualquer contagem par ou ímpar) 2. Item, cabeçalho clicável e índice numérico 3. Painel expansível (texto da resposta) 4. Telas muito estreitas PADRÃO COPIADO de sections/capacidades.css (mesmo pedido do dono): item com borda, botão de largura cheia, chevron que gira, painel que fecha por [hidden] (sem altura animada, proibida pelo contrato) e abre com fade + leve translação (nunca layout). Diferenças: FAQ não tem palco nem ícone por item (o dado de content.faq não traz `icone`), e não há "uma linha ativa por vez" — cada pergunta abre/fecha por conta própria (partials/faq.js, cabeçalho do arquivo, explica o porquê). */ /* -------------------------------------------------------------------------- 0. Cabeçalho da seção TÍTULO REDUZIDO, SÓ AQUI (06/08/2026, item 5 da rodada: "o título da seção está grande demais na captura dele; reduza um pouco (só nesta seção...)"). `#faq-title` herdava `--fs-h2` puro (02-base.css), o MESMO tamanho de toda seção do site — sem exceção nenhuma registrada em nenhum lugar para o FAQ especificamente. `calc(var(--fs-h2) * 0.75)` em vez de um clamp novo escrito à mão: continua a MESMA curva responsiva de --fs-h2 (mesmos pontos de ruptura, mesma proporção entre viewport estreita e larga), só encolhida uniformemente — é a definição de "coerente com a escala tipográfica do resto" que o pedido cobra, não um número solto. Cai entre --fs-h3 (1,75rem no teto) e --fs-h2 (3,25rem no teto): título de seção ainda claramente maior que uma pergunta, só que sem competir com o tamanho gigante das seções vizinhas. `.faq__trigger-title` também encolheu (mesmo item, "ajuste também o tamanho do texto das perguntas se ficar desproporcional depois"): com o título da seção menor, a MESMA `--fs-h3` de antes (1,75rem no teto) ficava perto demais do título reduzido (2,4375rem no teto) — vão de ~0,7rem, contra ~1,5rem antes da mudança. `* 0.85` devolve um vão parecido ao original sem crescer o corpo da resposta (`.faq__text`, §3, continua em --fs-sm, não mexe aqui — o ajuste em si mora junto da regra de `.faq__trigger-title` já existente, "2. Item", mais abaixo, em vez de duplicar o seletor aqui). */ #faq-title { font-size: calc(var(--fs-h2) * 0.75); } /* -------------------------------------------------------------------------- 1. Lista DUAS COLUNAS INDEPENDENTES DE VERDADE (06/08/2026, item 6 da rodada seguinte: "hoje as duas colunas alinham por linha, então uma pergunta de duas linhas cria um vão na coluna vizinha"). A versão anterior desta regra era `display: grid` com duas colunas — e Grid, por definição da spec, sincroniza a ALTURA DA LINHA entre as duas células dela: não existe propriedade de Grid que escape disso, célula 1 e célula 2 da mesma linha sempre compartilham trilha de altura. `align-items: start` (que a versão anterior usava) só evita que o VIZINHO estique verticalmente — não evita a LINHA DA GRADE crescer para caber a maior célula, que é exatamente o vão relatado ("o espaço do 2 pro 1 está diferente"). A correção troca a grade por duas listas de fluxo independente (partials/faq.js, renderColunas(): ímpares na coluna A, pares na coluna B, por PARIDADE DO ÍNDICE — funciona para qualquer contagem, par ou ímpar). Cada `.faq__col` é o SEU PRÓPRIO container de bloco; abrir um item nela muda só a altura DAQUELA coluna, nunca a da vizinha, porque as duas nunca compartilham linha nenhuma. ABAIXO DE 60rem as duas colunas colapsam numa só (`.faq__col` vira `display: contents`, ver abaixo): os itens saem soltos, direto como filhos do flex de `.faq__list`, e o `order` inline de cada `.faq__item` (partials/faq.js) devolve a leitura estritamente sequencial 01→02→03→...→N — sem isso a ordem visual seria "01, 03, 05 ... depois 02, 04" (a ordem física da coluna A seguida da coluna B), errada para quem só vê uma coluna. Mesmo ponto de quebra (60rem) da versão anterior, mesmo raciocínio: accordion de duas colunas em tela estreita é onde a leitura embaralha. */ .faq__list { display: flex; flex-direction: column; gap: var(--space-3); } /* `display: contents` some com a PRÓPRIA caixa (a coluna não existe mais como elemento de layout abaixo de 60rem), mas não tira nada da árvore de acessibilidade: `.faq__col` já é `role="presentation"` (partials/faq.js), ou seja, já estava fora da árvore de acessibilidade por ARIA antes mesmo de qualquer CSS — as duas técnicas resolvem problemas diferentes (layout vs. leitor de tela) sem pisar uma na outra. Os `.faq__item` (role="listitem") viram filhos diretos do flex de `.faq__list` para fins de LAYOUT, e o `order` inline (partials/faq.js) decide a posição real de cada um nesse fluxo único. */ .faq__col { display: contents; } @media (min-width: 60rem) { .faq__list { flex-direction: row; align-items: flex-start; column-gap: var(--space-6); } .faq__col { display: flex; flex-direction: column; flex: 1 1 0; min-inline-size: 0; gap: var(--space-3); } } /* -------------------------------------------------------------------------- 2. Item e cabeçalho clicável -------------------------------------------------------------------------- */ .faq__item { border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-lg); background-color: hsl(var(--card)); overflow: hidden; transition: border-color calc(var(--dur-fast) * var(--motion)) var(--ease-out); } .faq__item:has(.faq__trigger[aria-expanded="true"]) { border-color: hsl(var(--primary) / 0.45); } .faq__item-heading { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal; } .faq__trigger { display: flex; align-items: center; inline-size: 100%; min-block-size: var(--tap-min); gap: var(--space-4); padding: var(--space-5); background-color: transparent; border: 0; color: hsl(var(--foreground)); font-family: var(--font-body); text-align: start; cursor: pointer; transition: background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out); } .faq__trigger:hover { background-color: hsl(var(--accent) / 0.5); } /* Toque/ativo próprio (item novo da rodada de 06/08/2026: ver 02-base.css, `html { -webkit-tap-highlight-color: transparent }` — o realce nativo do navegador desligou site inteiro, e o botão do FAQ, sendo `