/* /faq/ no print de Lucas de 2026-09-24: a abertura a esquerda (sobrancelha,
   titulo, descricao e, embaixo, os riscos com "Disciplina tambem e
   liberdade"), as perguntas a direita, e o fecho "Nao achou a sua pergunta?"
   com um balao de conversa. Desde 25/09 a frase fica ao lado dos tres riscos,
   na mesma linha, a pedido de Lucas.

   A lista continua sendo `components/_faq_list.html`, com o `<details>` e a
   animacao do `app.css`. Aqui mudam so o enquadramento e o tamanho: tudo fica
   sob `.pagina-faq`, e nenhuma regra da lista muda para outra pagina.

   Sem cor literal: a paleta sai dos tokens por `color-mix`, como no resto. */

/* O brilho quente embaixo a esquerda, como no print. */
.pagina-faq {
  background:
    radial-gradient(ellipse 42% 48% at 0% 64%, color-mix(in srgb, var(--marca) 20%, transparent), transparent 72%),
    radial-gradient(ellipse 36% 30% at 8% 0%, color-mix(in srgb, var(--marca) 7%, transparent), transparent 70%),
    var(--cor-fundo);
}

.faq-pagina {
  display: grid;
  gap: clamp(var(--espaco-10), 5vw, var(--espaco-16));
  padding-block: clamp(var(--espaco-10), 6vw, var(--espaco-24)) clamp(var(--espaco-12), 6vw, var(--espaco-24));
}

/* A abertura: o bloco de texto em cima e a assinatura embaixo. */
.faq-pagina__abertura {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espaco-16);
}
.faq-pagina__sobrancelha {
  display: flex;
  align-items: center;
  gap: var(--espaco-5);
  margin: 0 0 var(--espaco-8);
  font-size: var(--fs-12);
  font-weight: var(--peso-medio);
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--marca);
}
.faq-pagina__sobrancelha::before {
  content: "";
  flex: none;
  width: 2.625rem;
  height: 1px;
  background: currentColor;
}
/* A letra dos titulos do design system: Archivo larga, peso 900. */
.faq-pagina__titulo {
  margin: 0 0 var(--espaco-8);
  font-size: clamp(2.75rem, 5.2vw, 4.75rem);
  font-weight: var(--peso-display);
  font-stretch: var(--largura-titulo);
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--cor-texto);
}
.faq-pagina__titulo > span { display: block; }
.faq-pagina__descricao {
  max-width: 30rem;
  margin: 0;
  font-size: clamp(var(--fs-16), 1.3vw, 1.1875rem);
  line-height: 1.8;
  color: var(--cor-texto-suave);
  text-wrap: pretty;
}

.faq-pagina__assinatura { display: none; }
.faq-pagina__riscos { display: flex; flex: none; gap: var(--espaco-4); height: 4.25rem; padding-inline-start: var(--espaco-2); }
.faq-pagina__riscos i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--marca) 85%, transparent), transparent);
  transform: skewX(-20deg);
}
.faq-pagina__assinatura p {
  margin: 0;
  font-size: var(--fs-12);
  letter-spacing: .42em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.faq-pagina__assinatura p > span { display: block; }
.faq-pagina__assinatura .faq-pagina__linha { display: flex; align-items: center; gap: var(--espaco-4); }
.faq-pagina__linha::after {
  content: "";
  width: clamp(3rem, 8vw, 6rem);
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--marca) 70%, transparent), transparent);
}

/* As perguntas: cartoes no marrom escuro do print, pergunta em peso medio. */
.pagina-faq .faq { gap: var(--espaco-3); }
.pagina-faq .faq__item {
  border-color: color-mix(in srgb, var(--cor-texto) 9%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--marca) 9%, color-mix(in srgb, var(--cor-superficie) 60%, var(--cor-fundo)));
}
.pagina-faq .faq__pergunta {
  min-height: clamp(4rem, 5.4vw, 4.875rem);
  padding: var(--espaco-3) clamp(var(--espaco-5), 2vw, var(--espaco-8));
  border-radius: 14px;
  font-size: clamp(var(--fs-16), 1.35vw, 1.25rem);
  font-weight: var(--peso-medio);
}
.pagina-faq .faq__sinal { width: 2.125rem; height: 2.125rem; }
.pagina-faq .faq__resposta { padding-inline: clamp(var(--espaco-5), 2vw, var(--espaco-8)); }

/* O fecho: texto a esquerda, o balao a direita depois de um fio. */
.pagina-faq .faq__fecho {
  /* `.cartao` ja e flex em coluna; aqui a linha e o que o print pede. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-6);
  margin-block: var(--espaco-8) 0;
  padding: var(--espaco-8) clamp(var(--espaco-5), 2vw, var(--espaco-8));
  border: 1px solid color-mix(in srgb, var(--cor-texto) 9%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cor-superficie) 75%, var(--cor-fundo));
}
.pagina-faq .faq__fecho p:first-child { font-size: clamp(var(--fs-16), 1.3vw, 1.1875rem); color: var(--cor-texto-suave); }
.pagina-faq .faq__fecho .faq__mais { font-size: clamp(var(--fs-16), 1.3vw, 1.1875rem); font-weight: var(--peso-forte); }
.faq-pagina__balao {
  display: grid;
  place-items: center;
  flex: none;
  align-self: stretch;
  padding-inline-start: clamp(var(--espaco-6), 4vw, var(--espaco-12));
  border-inline-start: 1px solid color-mix(in srgb, var(--cor-texto) 10%, transparent);
  color: color-mix(in srgb, var(--cor-texto) 28%, transparent);
}
.faq-pagina__balao svg { width: clamp(2.25rem, 3.4vw, 3.25rem); height: clamp(2.25rem, 3.4vw, 3.25rem); }

@media (min-width: 60rem) {
  .faq-pagina { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); align-items: stretch; }
  .faq-pagina__abertura { padding-block: clamp(var(--espaco-8), 7vw, 6.25rem) clamp(var(--espaco-8), 9vw, 8rem); }
  /* Os riscos e a frase na mesma linha, a frase centrada na altura deles. */
  .faq-pagina__assinatura { display: flex; align-items: center; gap: var(--espaco-6); }
}

@media (forced-colors: active) {
  .pagina-faq { background: Canvas; }
  .faq-pagina__riscos i, .faq-pagina__linha::after { background: CanvasText; }
}