/* ==========================================================================
   FAQ — Subpágina de dúvidas frequentes (tema claro)
   --------------------------------------------------------------------------
   Depende de styles.css: reusa o markup e a mecânica da seção .faq-section
   da LP (acordeão, sticky, animações, responsivo) e sobrescreve aqui apenas
   cores e respiros para o fundo branco das subpáginas. Tudo escopado em
   .faq-page para não vazar para a LP, onde a mesma seção continua escura.
   ========================================================================== */

.faq-page {
  --fq-bg:      #FFFFFF;
  --fq-ink:     #0B0B12;   /* títulos                    */
  --fq-ink-2:   #55555F;   /* texto corrido              */
  --fq-ink-3:   #8B8B98;   /* metadados / notas          */
  --fq-line:    #E8E8EF;
  --fq-purple:  #7913fc;
  --fq-purple-ink: #5B0FC0; /* roxo legível sobre branco */

  --fq-font: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  background: var(--fq-bg);
  color: var(--fq-ink-2);
  font-family: var(--fq-font);
}

.faq-page ::selection {
  background: rgba(121, 19, 252, 0.16);
  color: var(--fq-ink);
}

/* ==========================================================================
   Header — versão sólida para fundo branco (mesma receita das subpáginas)
   ========================================================================== */
.header--faq .nav-container,
.header--faq.scrolled .nav-container {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1px solid rgba(11, 11, 18, 0.08) !important;
  box-shadow: 0 10px 30px rgba(11, 11, 18, 0.06),
              inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

/* ==========================================================================
   Seção FAQ sobre branco
   ========================================================================== */
.faq-page .faq-section {
  --faq-rule: rgba(11, 11, 18, 0.09);
  --faq-rule-hover: rgba(11, 11, 18, 0.18);

  /* Halo roxo bem tênue no topo, só para a página não abrir clínica demais */
  background: radial-gradient(ellipse 90% 46% at 50% 0%, rgba(121, 19, 252, 0.05), transparent 70%),
              var(--fq-bg);
  padding: 176px 24px 128px; /* topo maior: compensa o header fixo */
}

/* O filete de emenda e o grão anti-banding são coisas do fundo preto da LP */
.faq-page .faq-section::before,
.faq-page .faq-section::after {
  display: none;
}

/* ---------- Coluna de contexto ---------- */
.faq-page .faq-eyebrow {
  color: var(--fq-ink-3);
}

.faq-page .faq-title {
  color: var(--fq-ink);
  /* É o h1 da página: um degrau acima do tamanho que a seção usa na LP */
  font-size: clamp(1.9rem, 2.8vw, 2.35rem);
}

.faq-page .faq-title em {
  font-style: normal;
  color: var(--fq-purple);
}

.faq-page .faq-contact-label {
  color: var(--fq-ink-3);
}

.faq-page .faq-contact-link {
  color: var(--fq-purple-ink);
}

.faq-page .faq-contact-link:hover {
  color: var(--fq-ink);
}

.faq-page .faq-contact-note {
  color: #A6A6B2;
}

/* ---------- Linhas de pergunta ---------- */
/* Varredura roxa de abertura, recalibrada para leitura sobre branco */
.faq-page .faq-item::before {
  background: linear-gradient(90deg, rgba(121, 19, 252, 0.7), rgba(121, 19, 252, 0.18) 70%, transparent);
}

.faq-page .faq-question {
  color: var(--fq-ink);
}

.faq-page .faq-question::before {
  background: linear-gradient(90deg, rgba(11, 11, 18, 0.035), rgba(11, 11, 18, 0) 68%);
}

.faq-page .faq-question:focus-visible {
  outline-color: rgba(121, 19, 252, 0.55);
}

.faq-page .faq-index {
  color: rgba(11, 11, 18, 0.32);
}

.faq-page .faq-question:hover .faq-index {
  color: rgba(11, 11, 18, 0.55);
}

.faq-page .faq-item.is-open .faq-index {
  color: var(--fq-purple-ink);
}

.faq-page .faq-question-text {
  color: rgba(11, 11, 18, 0.86);
}

.faq-page .faq-question:hover .faq-question-text,
.faq-page .faq-item.is-open .faq-question-text {
  color: var(--fq-ink);
}

/* Ícone +/− */
.faq-page .faq-icon {
  border-color: rgba(11, 11, 18, 0.14);
}

.faq-page .faq-question:hover .faq-icon {
  border-color: rgba(11, 11, 18, 0.3);
  background-color: rgba(11, 11, 18, 0.04);
}

.faq-page .faq-icon::before,
.faq-page .faq-icon::after {
  background: rgba(11, 11, 18, 0.55);
}

.faq-page .faq-item.is-open .faq-icon {
  border-color: rgba(121, 19, 252, 0.4);
  background-color: rgba(121, 19, 252, 0.07);
}

.faq-page .faq-item.is-open .faq-icon::before,
.faq-page .faq-item.is-open .faq-icon::after {
  background: var(--fq-purple-ink);
}

/* ---------- Respostas ---------- */
.faq-page .faq-answer-body p {
  color: var(--fq-ink-2);
}

/* ==========================================================================
   Responsivo — reafirma o que o styles.css redefine nessas larguras,
   porque as regras daqui têm especificidade maior que as de lá
   ========================================================================== */
@media (max-width: 768px) {
  .faq-page .faq-section {
    padding: 140px 20px 88px;
  }

  .faq-page .faq-title {
    font-size: 1.75rem;
  }
}