/* ==========================================================================
   FAQ — acordeão (itens gerados por js/componentes/faq.js)
   A animação de abrir/fechar usa grid-template-rows (0fr -> 1fr): suave e
   sem precisar medir a altura com JavaScript.
   ========================================================================== */

.faq { background: var(--cinza-50); }
.faq .container { max-width: 56rem; }
.faq .secao__cabecalho { margin-bottom: 3.5rem; }

.faq__lista { display: grid; gap: 1rem; }
.faq-item {
  overflow: hidden; border-radius: var(--raio-md); background: #fff;
  border: 1px solid var(--cinza-200); box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.faq-item__botao {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 1.25rem 1.5rem; border: 0; background: none; cursor: pointer;
  color: var(--azul-900); font-weight: 700; text-align: left; transition: background-color .2s;
}
.faq-item__botao:hover { background: var(--cinza-50); }
.faq-item__botao .icone { color: var(--vermelho-600); transition: transform .3s; }
.faq-item.is-aberto .faq-item__botao .icone { transform: rotate(180deg); }

.faq-item__conteudo {
  display: grid; grid-template-rows: 0fr; background: var(--cinza-50);
  transition: grid-template-rows .3s ease;
}
.faq-item.is-aberto .faq-item__conteudo { grid-template-rows: 1fr; }
.faq-item__conteudo > div { min-height: 0; overflow: hidden; padding-inline: 1.5rem; }
.faq-item__conteudo p {
  padding-block: 1rem; border-top: 1px solid var(--cinza-200);
  color: var(--cinza-600); font-size: .875rem; line-height: 1.7;
}
@media (min-width: 640px) { .faq-item__conteudo p { font-size: 1rem; } }

/* Bloco "Não encontrou sua dúvida?" */
.faq__ajuda {
  position: relative; overflow: hidden; margin-top: 3rem; padding: 2rem;
  border-radius: 1.5rem; background: var(--azul-900); border: 1px solid var(--azul-800); box-shadow: var(--sombra-xl);
}
.faq__ajuda::before {            /* brilho vermelho no canto */
  content: ""; position: absolute; top: -6rem; right: -6rem; width: 18rem; aspect-ratio: 1;
  border-radius: 50%; background: rgba(220,38,38,.3); filter: blur(64px); pointer-events: none;
}
.faq__ajuda-conteudo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.faq__ajuda-icone {
  display: grid; place-items: center; flex-shrink: 0; width: 4rem; height: 4rem; border-radius: 1rem;
  background: rgba(220,38,38,.15); border: 1px solid rgba(220,38,38,.3); color: var(--vermelho-500); font-size: 1.5rem;
}
.faq__ajuda h3 { margin-bottom: .5rem; color: #fff; font-size: 1.25rem; font-weight: 700; }
.faq__ajuda p { color: var(--cinza-300); font-size: .875rem; line-height: 1.7; }
.faq__ajuda .btn { width: 100%; padding: .875rem 1.75rem; font-size: 1rem; }

@media (min-width: 640px) {
  .faq__ajuda { padding: 2.5rem; }
  .faq__ajuda h3 { font-size: 1.5rem; }
  .faq__ajuda p { font-size: 1rem; }
}
@media (min-width: 768px) {
  .faq__ajuda-conteudo { flex-direction: row; gap: 2rem; text-align: left; }
  .faq__ajuda-conteudo > div:nth-child(2) { flex: 1; }
  .faq__ajuda .btn { width: auto; }
}