/* ==========================================================================
   faq.css — Seção FAQ: accordion acessível
   Depende de tokens.css + main.css (container, secao, secao--marfim, btn, etc.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabeçalho da seção
   -------------------------------------------------------------------------- */

.faq-cabecalho {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.faq-pre-titulo {
  margin-bottom: 0.5rem;
}

.faq-titulo {
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   Lista de itens — max-width confortável para leitura
   -------------------------------------------------------------------------- */

.faq-lista {
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   Item individual
   -------------------------------------------------------------------------- */

.faq-item {
  background-color: var(--branco);
  border: 1.5px solid rgba(12, 59, 90, 0.1);
  border-radius: var(--raio);
  box-shadow: 0 2px 12px -4px rgba(12, 59, 90, 0.08);
  overflow: hidden;
  transition: box-shadow 250ms ease, border-color 250ms ease;
}

.faq-item:hover {
  box-shadow: 0 4px 20px -6px rgba(12, 59, 90, 0.14);
}

/* Acento turquesa na borda esquerda quando aberto */
.faq-item.aberto {
  border-color: var(--turquesa);
  box-shadow: 0 4px 24px -6px rgba(22, 168, 201, 0.18);
}

/* --------------------------------------------------------------------------
   Botão da pergunta
   -------------------------------------------------------------------------- */

.faq-cabecalho-item {
  margin: 0; /* neutraliza h3 */
}

.faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  font-family: var(--fonte-titulo);
  font-size: clamp(0.95rem, 1.5vw + 0.5rem, 1.05rem);
  font-weight: 600;
  color: var(--azul-profundo);
  text-align: left;
  cursor: pointer;
  line-height: 1.35;
  transition: color 200ms ease;
}

.faq-pergunta:hover {
  color: var(--turquesa);
}

.faq-item.aberto .faq-pergunta {
  color: var(--turquesa);
}

/* Span do texto da pergunta (cresce para empurrar ícone para a direita) */
.faq-pergunta-texto {
  flex: 1;
}

/* --------------------------------------------------------------------------
   Ícone (chevron)
   -------------------------------------------------------------------------- */

.faq-icone {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--turquesa);
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rotação quando aberto */
.faq-item.aberto .faq-icone {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Painel de resposta — técnica grid-template-rows para animação suave
   -------------------------------------------------------------------------- */

.faq-resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.aberto .faq-resposta {
  grid-template-rows: 1fr;
}

/* Inner precisa de overflow:hidden para o clamp funcionar */
.faq-resposta__inner {
  overflow: hidden;
}

/* Conteúdo da resposta */
.faq-resposta__inner p {
  padding: 0 1.5rem 1.25rem;
  color: var(--texto-suave);
  font-size: 0.975rem;
  line-height: 1.7;
  max-width: none; /* neutraliza o max-width global de p */
}

/* Separador visual entre pergunta e resposta quando aberto */
.faq-item.aberto .faq-resposta__inner p {
  border-top: 1px solid rgba(22, 168, 201, 0.15);
  padding-top: 1rem;
}

/* --------------------------------------------------------------------------
   CTA abaixo do accordion
   -------------------------------------------------------------------------- */

.faq-cta {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.faq-cta__linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  color: var(--texto-suave);
  font-size: 0.95rem;
}

.faq-cta__linha::before,
.faq-cta__linha::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: rgba(12, 59, 90, 0.15);
}

.faq-cta__texto {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--azul-profundo);
  font-size: 1rem;
}

/* Ícone WhatsApp dentro do botão */
.faq-cta__icone {
  width: 1.15rem;
  height: 1.15rem;
}

/* --------------------------------------------------------------------------
   Reduced-motion — accordion continua funcional, só sem tween
   (animations.css já neutraliza durations; reafirmamos aqui por clareza)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .faq-icone,
  .faq-resposta {
    transition: none;
  }
}