/* =====================================================================
   FAQ — section em TEMA CLARO (respiro entre blocos escuros)
   ---------------------------------------------------------------------
   Fundo off-white quente (não branco puro, p/ manter o clima
   cinematográfico), texto carvão e acentos da marca (vermelho/dourado).
   As faixas de gradiente no topo/base fazem a transição suave a partir
   das sections escuras vizinhas (Avaliações acima, Planos abaixo).
   Tudo scoped em `.faq` — nenhuma outra section é afetada.
   ===================================================================== */

/* Tokens locais do tema claro (só valem dentro do FAQ) */
.faq {
  --faq-bg:        #f7f6f3;               /* off-white quente */
  --faq-ink:       #1a1a1e;               /* texto principal (carvão) */
  --faq-ink-soft:  #55555d;               /* texto secundário */
  --faq-line:      rgba(0, 0, 0, 0.10);   /* divisórias */
  --faq-line-str:  rgba(0, 0, 0, 0.18);   /* divisória ativa */

  position: relative;
  background: var(--faq-bg);
  color: var(--faq-ink);
  isolation: isolate;
}

.faq-container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.faq .section-head {
  margin-bottom: 0;
  position: sticky;
  top: 110px;
}

/* Título e descrição em tons escuros sobre o fundo claro */
.faq .section-title { color: var(--faq-ink); }
.faq .section-desc { color: var(--faq-ink-soft); }

.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-bottom: 1px solid var(--faq-line);
  padding: 6px 0;
}
.faq-item[open] { border-bottom-color: var(--faq-line-str); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--faq-ink);
  position: relative;
  transition: color 0.3s;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* Marcador "+" em dourado (acento premium sobre o claro) */
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--gold);
  transition: transform 0.35s var(--ease), color 0.3s;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }

/* Interação: vermelho da marca no hover / aberto */
.faq-item summary:hover { color: var(--red); }
.faq-item summary:hover::after { color: var(--red); }
.faq-item[open] summary { color: var(--red); }

.faq-answer {
  overflow: hidden;
  color: var(--faq-ink-soft);
  font-weight: 300;
  padding-right: 44px;
  animation: faqOpen 0.4s var(--ease);
}
.faq-answer p { padding-bottom: 22px; }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
  .faq-container { grid-template-columns: 1fr; }
  .faq .section-head { position: static; }
}