/* =========================================================================
   AKROS — Seção 10 · As perguntas que todo mundo faz

   Veio da landing page do Akros (componente Faq.tsx +
   customizacao/conteudo/faq.json). As nove perguntas e as nove respostas são
   as de lá, palavra por palavra. O desenho é o daqui.

   `<details>`/`<summary>` NATIVO, como na origem: abre sem JavaScript, é
   navegável por teclado e o leitor de tela anuncia o estado sozinho. O
   `js/faq.js` só fecha os vizinhos quando um abre — se ele não carregar, a
   seção continua inteira e funcionando, com mais de uma resposta aberta.

   🩸 O ERRO QUE ESTA VERSÃO CONSERTA — e ele estava escrito neste arquivo
   antes de acontecer. A primeira montagem deu a cada pergunta um CARTÃO
   branco com fio azul, igual aos seis da seção 7. Lá o cartão funciona
   porque tem conteúdo dentro: ícone, título e um parágrafo. Aqui dentro só
   há UMA LINHA DE TEXTO, e um retângulo de canto reto em volta de uma linha
   de texto não lê como cartão — lê como CAMPO DE FORMULÁRIO. Nove deles em
   duas colunas viram uma ficha de cadastro em branco. O dono viu na hora.

   O conserto não é afinar a cor do fio: é TIRAR A CAIXA. Vira uma LISTA —
   uma coluna, linhas separadas por fio de cabelo, nada em volta. É o que a
   própria landing faz (`divide-y` num container só) e é o que qualquer
   página séria faz com uma sequência de perguntas: a peça é o texto, e
   moldura em volta de texto só compete com ele.

   E COLUNA ÚNICA, não duas. Duas colunas de linhas com fio embaixo leem
   como tabela de duas entradas — o olho procura relação entre a linha da
   esquerda e a da direita, e não existe nenhuma. Em coluna, a leitura é uma
   só, de cima para baixo, e a medida continua fechando: as nove perguntas
   fechadas cabem numa tela, e a seção cresce sozinha se alguém abrir.

   Reaproveita de pipeline.css e estudio.css: .bloco, .faixa, .sechead.
   ========================================================================= */

/* O CINTO DE SEGURANÇA. `.bloco` trava a seção em `height:100svh` no
   desktop, e aqui o conteúdo CRESCE quando alguém abre uma resposta — é a
   única seção do site em que isso acontece. Travada, a resposta mais longa
   cortaria em silêncio, que é exatamente o defeito que a seção 6 já custou
   caro.

   Fechada, a seção continua medindo uma tela exata: o `min-height` mantém o
   ritmo de um capítulo por tela, e o `height:auto` só entra em ação quando o
   leitor pede. Custa nada e fecha a porta. */
@media (min-width:1181px){
  #faq{height:auto;min-height:100svh}
}

/* Mesma pilha das seções 5, 7, 8 e 9, sem uma vírgula de diferença: `flex:1`
   centra o conteúdo na folga, `min-height:0` deixa encolher.

   PROVADO que basta, e vale registrar porque a suspeita era razoável: com a
   seção em altura automática, `min-height:0` autoriza a caixa a fechar mais
   curta que o conteúdo. Medi o pior caso possível — as NOVE respostas
   abertas ao mesmo tempo, com o ouvinte de `js/faq.js` arrancado. Transbordo
   ZERO, a seção estica. Com `min-height:auto` no lugar do zero, os números
   são idênticos. Não há o que trocar. */
.faq__pilha{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(20px,3.6vh,48px);
}

/* ---------------- o cabeçalho, centrado ---------------- */
#faq .sechead{max-width:min(900px,100%);margin:0 auto;text-align:center}
#faq .sechead__eyebrow{margin-bottom:clamp(10px,1.6vh,18px)}
#faq .sechead__eyebrow i{display:none}
#faq .sechead__title{
  font-size:min(clamp(1.95rem,3.6vw,3.35rem),5.6vh);
  margin-bottom:clamp(8px,1.3vh,15px);
  text-wrap:balance;
}
#faq .sechead__sub{max-width:58ch;margin:0 auto}

/* =======================================================================
   A LISTA

   `.faq__col` vira `display:contents`: os dois grupos do HTML somem da
   caixa e as nove perguntas passam a ser filhas diretas da lista, na ordem
   em que estão escritas. O HTML não precisou mudar para a coluna dupla
   virar única — e se um dia a dupla voltar, é uma linha aqui.

   A largura é a mesma do cabeçalho (900px). Lista de texto larga demais
   afasta a pergunta do "+" a ponto de os dois deixarem de parecer a mesma
   linha; e a resposta passaria de 100 caracteres por linha.
   ======================================================================= */
.faq{
  margin:0 auto;width:100%;max-width:min(900px,100%);
  /* o fio de cima fecha a lista como bloco: sem ele a primeira pergunta
     fica solta no branco e a sequência só começa a existir na segunda */
  border-top:1px solid var(--line);
}
.faq__col{display:contents}

/* Cada pergunta é uma LINHA, não uma peça. Todo o desenho é um fio de
   cabelo embaixo — o mesmo `--line` das divisórias do resto do site. */
.faq__i{
  border-bottom:1px solid var(--line);
  transition:background .34s var(--ease);
}
/* No hover a linha inteira ganha um sopro de tinta, do jeito que uma linha
   de lista clicável responde. Nada se move e nada muda de tamanho: a lista
   tem de continuar parecendo lista. */
.faq__i:hover{background:rgba(10,128,226,.035)}
.faq__i[open]{background:rgba(10,128,226,.045)}

/* ---------------- a pergunta ----------------
   `list-style:none` + a regra do ::-webkit-details-marker apagam o
   triangulinho padrão nos dois motores; sem as duas, o Safari mantém o dele
   e a linha nasce 14px deslocada em relação ao Chrome. */
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(15px,2.5vh,27px) clamp(12px,1.2vw,22px);
  cursor:pointer;list-style:none;
  font-size:clamp(.98rem,1.12vw,1.2rem);font-weight:600;letter-spacing:-.018em;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
.faq__i[open] .faq__q{color:var(--accent-ink)}
.faq__i:hover .faq__q{color:var(--accent-ink)}

/* O sinal de mais que vira X. Duas barras cruzadas e uma rotação de 135°:
   fechado é "+", aberto é "×". Escolhi assim em vez de um chevron porque a
   seta obriga a decidir se aponta para o que está (baixo) ou para o que vai
   acontecer (cima), e as duas leituras convivem na mesma tela. O "×" não
   tem essa ambiguidade: ele diz FECHAR, que é a única ação disponível
   quando a resposta já está aberta. Verificado na foto — a 135° o "+" fica
   mesmo um "×", não um "−". */
.faq__sinal{
  flex:none;position:relative;width:18px;height:18px;
  color:rgba(10,31,69,.38);
  transition:transform .42s var(--ease-pop),color .34s var(--ease);
}
.faq__sinal::before,.faq__sinal::after{
  content:"";position:absolute;left:50%;top:50%;
  width:14px;height:1.6px;background:currentColor;
  transform:translate(-50%,-50%);
}
.faq__sinal::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__i[open] .faq__sinal{transform:rotate(135deg);color:var(--accent)}
.faq__i:hover .faq__sinal{color:var(--accent)}

/* ---------------- a resposta ----------------
   `<details>` não anima a altura, e forçá-lo a animar custa JavaScript que
   quebra teclado e leitor de tela. O que se anima é o TEXTO: ele entra
   deslizando e clareando, e a mudança de altura passa a parecer causada
   pelo conteúdo em vez de um salto. Uma `animation` roda quando o elemento
   aparece — uma `transition` não teria como, porque o navegador esconde o
   conteúdo fechado.

   A resposta é mais estreita que a linha e fica no mesmo recuo da pergunta:
   é o que diz "isto pertence à linha de cima" sem precisar de traço, seta
   ou moldura. */
.faq__a{
  margin:0;
  padding:0 clamp(12px,1.2vw,22px) clamp(16px,2.4vh,26px);
  max-width:82ch;
  font-size:clamp(.89rem,.98vw,1.05rem);line-height:1.6;color:var(--body);
}
.faq__a b{color:var(--ink);font-weight:600}
.faq__i[open] .faq__a{animation:faq-abre .42s var(--ease) both}
@keyframes faq-abre{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:none}
}

/* =======================================================================
   RESPONSIVO — nove linhas numa coluna só pedem menos altura por linha
   quando a janela é baixa; a seção pode crescer, mas crescer sem motivo
   quebraria o ritmo de um capítulo por tela.
   ======================================================================= */
@media (min-width:1181px) and (max-height:1040px){
  .faq__pilha{gap:clamp(16px,2.8vh,36px)}
  .faq__q{padding:clamp(12px,2vh,20px) clamp(11px,1.1vw,18px);font-size:1.03rem}
  .faq__a{font-size:.93rem;line-height:1.56}
}
@media (min-width:1181px) and (max-height:860px){
  .faq__pilha{gap:clamp(13px,2.2vh,26px)}
  /* o subtitulo NAO some aqui. Esta secao e' de altura automatica no
     desktop (min-height:100svh), entao esconder uma linha nao compra
     nada — so' tira conteudo da tela. Mesmo erro que a secao 9 levou. */
  .faq__q{padding:clamp(10px,1.7vh,16px) clamp(10px,1vw,16px);font-size:.97rem}
  .faq__a{padding-bottom:clamp(12px,1.8vh,18px);font-size:.87rem;line-height:1.5}
}

@media (max-width:640px){
  .faq__q{gap:14px;font-size:.96rem}
  .faq__a{font-size:.88rem}
}

@media (prefers-reduced-motion:reduce){
  .faq__i[open] .faq__a{animation:none}
  .faq__sinal{transition:none}
}