/* Perguntas frequentes da home, no desenho do print de Lucas de 2026-09-24,
   que substitui a composicao de 21/09: ganhos com icone grande em contorno e
   traco ambar, cartoes lisos com divisor terracota e o "+" num anel.

   NENHUMA COR LITERAL ABAIXO
   --------------------------

   Toda a paleta desta secao sai dos tokens por `color-mix`. O painel injeta
   `--brand-primary`, `--brand-secondary` e `--brand-accent` em `/brand.css`, e
   `--marca`, `--marca-luz` e `--marca-luz-quente` leem esses tres. Congelar
   aqui o hexadecimal que a mistura devolve HOJE desligaria a secao do painel
   sem quebrar nada na tela - o pior tipo de defeito.

   As variaveis locais comecam com `--faqh-` e vivem so dentro de `.fx-faq`.
   Nenhuma redeclara token: todas derivam dos que ja existem.

   O VAZIO ACIMA DO TITULO NAO E DAQUI
   -----------------------------------

   Na home cada secao vira um painel de encaixe com a altura da janela
   (`secoes-centralizadas.css`), e conteudo curto fica centralizado nele. */

.fx-faq {
  /* O ambar e tinta em tres lugares so, todos pedidos por Lucas: a sobrancelha,
     o traco embaixo de cada ganho e os numeros das perguntas (24/09). O resto
     fala em terracota, que e o que a home ja fala. */
  --faqh-borda: color-mix(in srgb, var(--cor-texto) 9%, transparent);
  --faqh-borda-viva: color-mix(in srgb, var(--marca) 55%, transparent);
  --faqh-brasa: color-mix(in srgb, var(--marca) 30%, transparent);
  --faqh-divisa: color-mix(in srgb, var(--cor-texto) 14%, transparent);
  /* O marrom bem escuro dos cartoes do print. Local, e nao `--faq-fundo`:
     aquele token tambem pinta a pagina /faq/. */
  --faqh-cartao: color-mix(in srgb, var(--marca) 7%, color-mix(in srgb, var(--cor-superficie) 55%, var(--cor-fundo)));
  --faqh-cartao-aberto: color-mix(in srgb, var(--marca) 10%, color-mix(in srgb, var(--cor-superficie) 70%, var(--cor-fundo)));

  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-inline: calc(-1 * var(--espaco-6));
  padding: clamp(var(--espaco-16), 7vw, var(--espaco-24)) var(--espaco-6);
  background: var(--cor-fundo);
  scroll-margin-top: 94px;
}

/* A ambientacao: o brilho quente do canto de cima e a brasa embaixo, ambos
   estaticos. O arco fino da composicao anterior saiu com o print novo. */
.fx-faq__luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fx-faq__brasa {
  position: absolute;
  inset: auto auto -18% -14%;
  width: min(40rem, 62%);
  aspect-ratio: 1.4;
  background: radial-gradient(ellipse at 40% 60%, var(--faqh-brasa), transparent 68%);
  opacity: .55;
}
.fx-faq::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 55%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 78% 0%,
    color-mix(in srgb, var(--marca-luz-quente) 16%, transparent), transparent 64%);
}

.fx-faq__interno {
  position: relative;
  width: 100%;
  max-width: var(--largura-larga);
  margin-inline: auto;
}

/* Cabecalho: texto a esquerda, ganhos a direita. */
.fx-faq__cabecalho {
  display: grid;
  gap: clamp(var(--espaco-8), 4vw, var(--espaco-16));
  margin-bottom: clamp(var(--espaco-8), 3.5vw, var(--espaco-12));
}

/* O mesmo desenho da `.sobrancelha` do site - traco antes do texto, ambar -,
   um pouco maior aqui, como no print. */
.fx-faq__sobrancelha {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  margin: 0 0 var(--espaco-5);
  font-size: clamp(var(--fs-12), 1.05vw, var(--fs-16));
  font-weight: var(--peso-forte);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cor-texto-luz);
}
.fx-faq__sobrancelha::before {
  content: "";
  flex: none;
  width: clamp(28px, 2.6vw, 38px);
  height: 2px;
  background: currentColor;
}

/* A letra dos titulos do design system: Archivo larga, peso 900. */
.fx-faq__titulo {
  margin: 0 0 var(--espaco-6);
  font-size: clamp(2.5rem, 5.2vw, 4.75rem);
  font-weight: var(--peso-display);
  font-stretch: var(--largura-titulo);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.fx-faq__titulo-a, .fx-faq__titulo-b { display: block; }
.fx-faq__titulo-a { color: var(--cor-texto); }
/* A mesma cor do destaque de "Historias de quem treina.", por `--marca`, que
   continua acompanhando o painel. */
.fx-faq__titulo-b { color: var(--marca); }

.fx-faq__descricao {
  max-width: 34rem;
  margin: 0;
  font-size: clamp(var(--fs-16), 1.45vw, 1.3125rem);
  line-height: 1.5;
  color: var(--cor-texto-suave);
  text-wrap: pretty;
}

/* Os ganhos sao informacao, nao acao: lista, sem link e sem botao. */
.fx-faq__ganhos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.fx-faq__ganho {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(var(--espaco-4), 2vw, var(--espaco-8));
  padding: clamp(var(--espaco-3), 1.4vw, var(--espaco-5)) clamp(var(--espaco-2), 1.4vw, var(--espaco-5));
  text-align: center;
}
.fx-faq__ganho + .fx-faq__ganho { border-inline-start: 1px solid var(--faqh-divisa); }
/* O icone em contorno terracota e, embaixo dele, o traco ambar do print. */
.fx-faq__medalha {
  display: grid;
  justify-items: center;
  gap: clamp(var(--espaco-4), 2vw, var(--espaco-6));
  color: var(--marca);
}
.fx-faq__medalha::after {
  content: "";
  width: clamp(2rem, 3vw, 2.75rem);
  height: 3px;
  border-radius: 2px;
  background: var(--cor-texto-luz);
}
.fx-faq__icone { width: clamp(2.25rem, 3.6vw, 3.25rem); height: clamp(2.25rem, 3.6vw, 3.25rem); }
.fx-faq__ganho-texto {
  display: grid;
  gap: 2px;
  font-size: clamp(var(--fs-14), 1.3vw, 1.1875rem);
  font-weight: var(--peso-semi);
  line-height: 1.35;
  color: var(--cor-texto);
}
.fx-faq__ganho-texto > span { font-size: .92em; font-weight: 400; color: var(--cor-texto-suave); }

/* A lista: cartoes lisos, sem fio de luz nem brilho por cima. */
.fx-faq__lista { display: grid; gap: clamp(var(--espaco-3), 1vw, var(--espaco-4)); }

.fx-faq__item {
  position: relative;
  border: 1px solid var(--faqh-borda);
  border-radius: 14px;
  background: var(--faqh-cartao);
  transition: border-color var(--mov-base) var(--ease-padrao);
}
.fx-faq__item:is([open], :hover) { border-color: var(--faqh-borda-viva); }
.fx-faq__item[open] { background: var(--faqh-cartao-aberto); }
.fx-faq__item:has(.fx-faq__pergunta:focus-visible) { border-color: var(--faqh-borda-viva); }

.fx-faq__pergunta {
  display: flex;
  align-items: center;
  gap: clamp(var(--espaco-4), 2.3vw, var(--espaco-8));
  min-height: clamp(4.5rem, 7.2vw, 6.5rem);
  padding: var(--espaco-3) clamp(var(--espaco-5), 2.4vw, var(--espaco-8));
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
}
.fx-faq__pergunta::-webkit-details-marker { display: none; }

/* Os numeros em ambar, pedido de Lucas (24/09). */
.fx-faq__numero {
  flex: none;
  width: 2.2ch;
  font-size: clamp(var(--fs-16), 1.45vw, 1.3125rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-luz);
}
.fx-faq__divisor { flex: none; width: 2px; height: clamp(2rem, 4vw, 3.625rem); background: var(--marca); }
.fx-faq__texto {
  flex: 1;
  min-width: 0;
  font-size: clamp(var(--fs-16), 1.5vw, 1.375rem);
  font-weight: var(--peso-medio);
  line-height: 1.35;
  color: var(--cor-texto);
  text-wrap: pretty;
}

/* O sinal tem TRES caixas - anel, barra deitada, barra em pe -, e um `summary`
   so oferece dois pseudo-elementos. Por isso ele e um `<span>` proprio, com o
   mesmo raciocinio do `.faq__sinal` da pagina /faq/. */
.fx-faq__sinal {
  position: relative;
  flex: none;
  width: clamp(2.75rem, 4vw, 3.625rem);
  height: clamp(2.75rem, 4vw, 3.625rem);
  border: 1.5px solid var(--marca);
  border-radius: 50%;
  transition: background-color var(--mov-base) var(--ease-padrao);
}
.fx-faq__sinal::before, .fx-faq__sinal::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  background: var(--cor-texto);
  border-radius: 1px;
}
.fx-faq__sinal::before { width: 38%; height: 2px; }
.fx-faq__sinal::after { width: 2px; height: 38%; transition: scale var(--mov-base) var(--ease-padrao); }
.fx-faq__item[open] .fx-faq__sinal::after { scale: 1 0; }
.fx-faq__item:is([open], :hover) .fx-faq__sinal { background: color-mix(in srgb, var(--marca) 16%, transparent); }

/* Pergunta e resposta no mesmo branco, pedido de Lucas (24/09). */
.fx-faq__resposta {
  margin: 0;
  padding: 0 clamp(var(--espaco-5), 2.4vw, var(--espaco-8)) var(--espaco-6);
  color: var(--cor-texto);
  line-height: 1.65;
}

/* Rodape da secao. */
.fx-faq__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--espaco-6);
  margin-top: clamp(var(--espaco-6), 2.5vw, var(--espaco-10));
}
.fx-faq__mais {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-3);
  min-height: var(--alvo-toque);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-marca);
  text-decoration-color: color-mix(in srgb, var(--cor-texto-marca) 45%, transparent);
  text-underline-offset: 6px;
}
.fx-faq__mais:hover { color: var(--marca-hover); text-decoration-color: currentColor; }
.fx-faq__mais > span { transition: translate var(--mov-base) var(--ease-saida); }
.fx-faq__mais:hover > span { translate: 4px 0; }

/* Manuscrito nao existe no projeto - as familias instaladas sao a Archivo e a
   Oswald. O tratamento e italico: le como assinatura sem imitar caligrafia.
   Em branco desde 24/09, a pedido de Lucas; era terracota. */
.fx-faq__assinatura {
  margin: 0;
  font-size: clamp(var(--fs-15), 1.2vw, var(--fs-20));
  font-style: italic;
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
}

@media (min-width: 64rem) {
  .fx-faq__cabecalho { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

@media (max-width: 47.99rem) {
  .fx-faq { padding-block: clamp(var(--espaco-12), 9vw, var(--espaco-16)); }
  .fx-faq__ganho { padding-inline: var(--espaco-1); }
  .fx-faq__ganho-texto { font-size: var(--fs-12); }
  .fx-faq__pergunta { min-height: var(--altura-controle); gap: var(--espaco-3); padding-inline: var(--espaco-4); }
  .fx-faq__sinal { width: var(--alvo-toque); height: var(--alvo-toque); }
  .fx-faq__divisor { height: 1.5rem; }
  .fx-faq__resposta { padding-inline: var(--espaco-4); }
  .fx-faq__rodape { flex-direction: column; align-items: start; gap: var(--espaco-4); }
}

/* Abaixo de 26rem as tres colunas nao cabem: "Acompanhamento" sozinho passa da
   coluna e encosta na vizinha. Viram linhas, com o icone ao lado do texto. */
@media (max-width: 26rem) {
  .fx-faq__ganhos { grid-template-columns: 1fr; }
  .fx-faq__ganho {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: var(--espaco-4);
    padding: var(--espaco-3) 0;
    text-align: start;
  }
  .fx-faq__ganho + .fx-faq__ganho {
    border-inline-start: 0;
    border-top: 1px solid var(--faqh-divisa);
  }
  .fx-faq__ganho-texto { font-size: var(--fs-13, .8125rem); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-faq__item, .fx-faq__sinal, .fx-faq__sinal::after, .fx-faq__mais > span { transition: none; }
  .fx-faq__mais:hover > span { translate: none; }
}

/* Sem cor o contorno some. O estado aberto continua dito pelo proprio
   `<details>`, e o sinal segue trocando de figura: mais e menos sao formas,
   nao cores. */
@media (forced-colors: active) {
  .fx-faq__luz, .fx-faq::after { display: none; }
  .fx-faq__item { border-color: CanvasText; }
  .fx-faq__titulo-b { color: CanvasText; }
  .fx-faq__sinal { border-color: CanvasText; }
  .fx-faq__sinal::before, .fx-faq__sinal::after, .fx-faq__divisor, .fx-faq__medalha::after { background: CanvasText; }
}