/* ==========================================================================
   FAQ — quinta dobra.

   Depois do branco dos depoimentos, a página volta ao pearl: é a alternância
   que o design system faz entre `.system-section` e `.system-section.pearl`,
   e é o que dá ao card branco de cada pergunta uma superfície para se
   destacar sem precisar de sombra pesada.

   Nada é escondido por CSS. Sem JavaScript as cinco respostas nascem
   ABERTAS e legíveis — quem recolhe os painéis é o assets/js/faq.js, no
   primeiro quadro, e só depois de confirmar que pode fazê-lo. É o mesmo
   contrato das dobras anteriores, aplicado a um componente que normalmente
   erra nisso: um accordion que esconde por folha de estilo perde o conteúdo
   inteiro quando o script falha.

   O acompanhamento do cursor é uma camada de luz (`.faq-item::before`)
   alimentada por duas custom properties que o JS escreve. Não há transform
   nenhum nesta dobra: aqui o cursor move a ILUMINAÇÃO, não o card.
   ========================================================================== */

.faq {
  position: relative;
  padding-block: clamp(96px, 11vw, 160px);
  background: var(--c-pearl);
  isolation: isolate;
  scroll-margin-top: 88px;
}

/* Halo prateado das demais dobras, na intensidade que o pearl comporta — a
   mesma da seção "Sobre", do lado oposto para que as duas não leiam como a
   mesma composição. Recortado no próprio invólucro. */
.faq-aura-wrap {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.faq-aura {
  position: absolute;
  bottom: 4%;
  left: -200px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .42;
  background: var(--c-silver);
  animation: auraDrift 25s ease-in-out infinite alternate;
}

/* ==========================================================================
   1. CABEÇALHO

   Mesma grade da metodologia e dos depoimentos. A introdução é curta de
   propósito: quem manda nesta dobra é a lista.
   ========================================================================== */
.faq-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
  margin-bottom: clamp(44px, 5.4vw, 68px);
}

.faq-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--c-muted);
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.faq-index::before {
  content: '';
  flex: none;
  width: 38px;
  height: 1px;
  background: currentColor;
}

.faq-title {
  max-width: 18ch;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.faq-lead {
  max-width: 42ch;
  padding-top: 8px;
  color: var(--c-graphite-medium);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 300;
  line-height: 1.75;
}

/* ==========================================================================
   2. LISTA

   O teto de 960px é a medida de leitura, não a largura do container: uma
   linha de pergunta que atravessasse os 1280px inteiros obrigaria o olho a
   percorrer da borda esquerda até um ícone perdido na direita. O degrau em
   relação ao cabeçalho é intencional e mantém a mesma espinha à esquerda
   que o resto da página usa.
   ========================================================================== */
.faq-list {
  display: grid;
  gap: clamp(10px, 1.1vw, 14px);
  max-width: 960px;
}

/* --cw guarda as medidas do controle para que a resposta possa se alinhar
   ao texto da pergunta, e não à borda do card. */
.faq-item {
  --faq-sign: 44px;
  --faq-gap: clamp(16px, 1.6vw, 22px);
  --faq-pad-x: clamp(20px, 2.2vw, 30px);
  --faq-pad-y: clamp(18px, 1.8vw, 24px);

  position: relative;
  isolation: isolate;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  transition:
    transform var(--speed-fast) var(--ease-out),
    border-color var(--speed-mid) var(--ease-out),
    box-shadow var(--speed-mid) var(--ease-out);
}

.faq-item:hover { border-color: var(--c-silver); }

/* Aberto, o item ganha corpo: é o sinal visual mais forte do estado, e vem
   somado ao `aria-expanded` — nunca sozinho. */
.faq-item.is-open {
  border-color: var(--c-silver);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Camada de luz

   Fica atrás do conteúdo (`z-index: -1` dentro do contexto de empilhamento
   que o item cria com `isolation: isolate`), portanto é pintada depois do
   fundo branco do card e antes do texto. Herda o raio do card, não captura
   ponteiro e nunca participa do layout.

   A cor é o verde vital do sistema em opacidade muito baixa. Sobre branco,
   prata viraria sujeira; o vital lê como luz. O canal RGB literal segue o
   precedente do components.css, que já escreve `rgba(168, 201, 87, …)` no
   marcador do trilho e na sombra do botão primário.

   O raio é deliberadamente menor que a largura do card: um círculo largo
   demais ilumina o item inteiro de uma vez, e o que deveria ler como um
   feixe pontual acompanhando o cursor passa a ler como o card mudando de
   cor. Contido, ele permanece uma mancha de luz que se desloca — a mesma
   diferença entre uma lanterna de mão e a luz do teto ligada.

   Só existe onde há cursor de verdade.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .faq-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed-mid) var(--ease-out);
    background: radial-gradient(
      circle 190px at var(--faq-x, 50%) var(--faq-y, 50%),
      rgba(168, 201, 87, .16),
      rgba(168, 201, 87, .05) 40%,
      transparent 62%
    );
  }

  .faq-item.is-lit::before { opacity: 1; }

  /* Levantar de 2px, o mesmo gesto que a hero aplica aos botões
     (`.btn:hover`) e que o design system repete em todos os cartões
     (`.color-card`, `.icon-library`, `.metric-card`). Fica aqui dentro,
     junto do resto que depende de cursor, para que em toque o `:hover`
     preso do navegador não deixe a linha flutuando sozinha.

     Só funciona porque o assets/js/faq.js limpa o transform inline ao fim
     da animação de entrada — estilo inline venceria esta regra. */
  .faq-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
}

/* ==========================================================================
   3. GATILHO

   O botão ocupa a linha inteira: a área clicável é o card todo, não o
   ícone. Grade de três colunas — controle, pergunta e o selo opcional de
   pendência.
   ========================================================================== */
.faq-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--faq-gap);
  padding: var(--faq-pad-y) var(--faq-pad-x);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* O contorno global (base.css) com offset negativo para não sangrar para
   fora do card — o card tem apenas 1px de borda e o foco ficaria cortado
   pelo item vizinho. */
.faq-trigger:focus-visible {
  outline: 2px solid var(--c-graphite-medium);
  outline-offset: -4px;
}

/* --------------------------------------------------------------------------
   Controle + / ×

   Duas barras de um fio dentro de um círculo. Girar 45° o conjunto inteiro
   transforma o `+` em `×` — um único transform, sem trocar ícone e sem
   biblioteca.
   -------------------------------------------------------------------------- */
.faq-sign {
  position: relative;
  flex: none;
  width: var(--faq-sign);
  height: var(--faq-sign);
  border: 1px solid var(--c-border);
  border-radius: 50%;
  color: var(--c-ink);
  transition:
    transform var(--speed-mid) var(--ease-out),
    border-color var(--speed-mid) var(--ease-out),
    background var(--speed-mid) var(--ease-out),
    color var(--speed-mid) var(--ease-out);
}

.faq-sign::before,
.faq-sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: opacity var(--speed-mid) var(--ease-out);
}

.faq-sign::before {
  width: 14px;
  height: 1px;
  margin: -.5px 0 0 -7px;
}

.faq-sign::after {
  width: 1px;
  height: 14px;
  margin: -7px 0 0 -.5px;
}

.faq-item:hover .faq-sign { border-color: var(--c-silver); }

/* Aberto: círculo cheio em grafite com as barras em branco — o mesmo
   tratamento que o design system dá ao botão de ícone (`.ui-button.icon-only`). */
.faq-item.is-open .faq-sign {
  transform: rotate(45deg);
  border-color: transparent;
  background: var(--c-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Pergunta
   -------------------------------------------------------------------------- */
.faq-question { margin: 0; }

.faq-label {
  min-width: 0;
  color: var(--c-ink);
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.015em;
  transition: color var(--speed-fast) ease;
}

/* Selo de pendência — mesma peça do `.about-record-flag`, para as perguntas
   cuja resposta ainda depende de confirmação do profissional. Remover junto
   com o placeholder quando a resposta definitiva chegar. */
.faq-flag {
  flex: none;
  padding: 3px 10px 2px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   4. RESPOSTA

   O painel nasce aberto. `overflow: hidden` está aqui desde sempre porque é
   o que o JS precisa para animar a altura sem recorte visível — e, com
   altura automática, não recorta nada.
   ========================================================================== */
.faq-panel { overflow: hidden; }

.faq-answer {
  /* Alinhada ao texto da pergunta, não à borda do card: o recuo é a largura
     do controle mais o vão da grade. */
  padding-left: calc(var(--faq-pad-x) + var(--faq-sign) + var(--faq-gap));
  padding-right: var(--faq-pad-x);
  padding-bottom: clamp(22px, 2.2vw, 30px);
}

.faq-answer p {
  max-width: 62ch;
  color: var(--c-graphite-medium);
  font-size: clamp(15px, 1.05vw, 16px);
  font-weight: 300;
  line-height: 1.8;
}

.faq-answer p + p { margin-top: 14px; }

/* Placeholder de conteúdo, no mesmo tom neutro que a dobra "Sobre" usa para
   registros ainda não confirmados. */
.faq-answer .is-placeholder {
  color: var(--c-silver);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
}

/* ==========================================================================
   5. RESPONSIVO
   ========================================================================== */
@media (max-width: 900px) {
  .faq-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .faq-lead {
    padding-top: 0;
    max-width: 56ch;
  }

  .faq-list { max-width: none; }
}

@media (max-width: 640px) {
  .faq { padding-block: clamp(80px, 16vw, 104px); }

  .faq-item {
    --faq-sign: 38px;
    --faq-gap: 14px;
    --faq-pad-x: 18px;
    --faq-pad-y: 16px;
  }

  .faq-sign::before { width: 12px; margin-left: -6px; }
  .faq-sign::after { height: 12px; margin-top: -6px; }

  .faq-label { font-size: 15px; line-height: 1.4; }

  /* No estreito o selo desceria a pergunta para duas linhas só para caber ao
     lado dela; passa a ocupar a própria linha, abaixo do texto. */
  .faq-trigger { grid-template-columns: auto minmax(0, 1fr); }

  .faq-flag {
    grid-column: 2;
    justify-self: start;
    margin-top: 8px;
  }

  .faq-answer {
    padding-left: var(--faq-pad-x);
    padding-right: var(--faq-pad-x);
    padding-bottom: 20px;
  }

  .faq-answer p { font-size: 15px; }
}

/* ==========================================================================
   6. MOVIMENTO REDUZIDO

   O accordion continua inteiro — o JS apenas troca a animação por um corte
   seco. Aqui desligamos o ambiente e as transições de estado.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .faq-aura { animation: none; }
  .faq-item::before { display: none; }
  .faq-item:hover { transform: none; }

  .faq-item,
  .faq-sign,
  .faq-label { transition: none; }
}