/* ══════════════════════════════════════════════════════════════
   faq.css — Página de preguntas frecuentes completas (faq/index.php)
   .faq-list/.faq-item/.faq-btn/.faq-body son las MISMAS clases que
   ya usaba la sección corta del inicio — copiadas aquí porque
   css/inicio.css solo se carga en la página de inicio.
═══════════════════════════════════════════════════════════════ */

.faq-grupo { margin-top: 34px; }
.faq-grupo:first-of-type { margin-top: 8px; }
.faq-grupo-titulo {
  font-size: .78rem; font-weight: 800; color: var(--g2);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px;
}

.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; text-align: left; font-size: .9rem; font-weight: 700; color: var(--text-1); }
.faq-arr { flex-shrink: 0; transition: transform .2s ease; }
.faq-item.open .faq-arr { transform: rotate(45deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; padding: 0 18px; }
.faq-body p { font-size: .85rem; color: var(--text-2); line-height: 1.7; padding-bottom: 16px; }
.faq-item.open .faq-body { max-height: 400px; }