Acordeón Interactivo de Preguntas Frecuentes

Un componente integral de acordeón FAQ con animaciones suaves, funcionalidad de búsqueda, filtrado por categorías y soporte completo de accesibilidad. Perfecto para páginas de ayuda, secciones de soporte y bases de conocimiento.

Características

• Animaciones Suaves: Animaciones de acordeón basadas en CSS con suavizado
• Funcionalidad de Búsqueda: Búsqueda en tiempo real a través de preguntas y respuestas
• Filtrado por Categorías: Organizar FAQs por categorías con botones de filtro
• Accesibilidad: Navegación completa por teclado y soporte para lectores de pantalla
• Diseño Responsivo: Enfoque mobile-first con interacciones táctiles amigables
• Auto-colapso: Opción para cerrar otros elementos al abrir uno nuevo
• Resaltado de Búsqueda: Los términos de búsqueda se resaltan en los resultados
• Estados de Carga: Animaciones de carga suaves para contenido dinámico
• Amigable para Impresión: Estilos optimizados para impresión

HTML

<section class="faq-section">
  <div class="container">
    <!-- Encabezado -->
    <div class="faq-header">
      <h2 class="faq-title">Preguntas Frecuentes</h2>
      <p class="faq-subtitle">Encuentra respuestas a preguntas comunes sobre nuestros productos y servicios</p>
    </div>

    <!-- Controles de Búsqueda y Filtro -->
    <div class="faq-controls">
      <!-- Barra de Búsqueda -->
      <div class="search-container">
        <div class="search-input-wrapper">
          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.35-4.35"></path>
          </svg>
          <input 
            type="text" 
            id="faqSearch" 
            class="search-input" 
            placeholder="Buscar preguntas..."
            aria-label="Buscar preguntas FAQ"
          >
          <button class="search-clear" id="searchClear" aria-label="Limpiar búsqueda">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>
      </div>

      <!-- Filtro por Categoría -->
      <div class="filter-container">
        <div class="filter-buttons" role="tablist" aria-label="Categorías FAQ">
          <button class="filter-btn active" data-category="all" role="tab" aria-selected="true">
            Todas las Preguntas
          </button>
          <button class="filter-btn" data-category="general" role="tab" aria-selected="false">
            General
          </button>
          <button class="filter-btn" data-category="facturacion" role="tab" aria-selected="false">
            Facturación
          </button>
          <button class="filter-btn" data-category="tecnico" role="tab" aria-selected="false">
            Técnico
          </button>
          <button class="filter-btn" data-category="cuenta" role="tab" aria-selected="false">
            Cuenta
          </button>
        </div>
      </div>
    </div>

    <!-- Información de Resultados FAQ -->
    <div class="faq-results" id="faqResults">
      <span class="results-count">Mostrando <strong>12</strong> preguntas</span>
    </div>

    <!-- Acordeón FAQ -->
    <div class="faq-accordion" id="faqAccordion">
      <!-- Preguntas Generales -->
      <div class="faq-item" data-category="general">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-1">
          <span class="question-text">¿De qué trata su empresa?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-1" aria-hidden="true">
          <div class="answer-content">
            <p>Somos una empresa de tecnología enfocada en crear soluciones innovadoras que ayudan a las empresas a crecer y tener éxito en la era digital. Nuestro equipo de expertos trabaja incansablemente para desarrollar productos y servicios de vanguardia.</p>
            <p>Fundada en 2019, hemos crecido de una pequeña startup a un proveedor líder de soluciones digitales, sirviendo a miles de clientes en todo el mundo.</p>
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="general">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-2">
          <span class="question-text">¿Cuánto tiempo llevan en el negocio?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-2" aria-hidden="true">
          <div class="answer-content">
            <p>Hemos estado en el negocio desde 2019, lo que significa que tenemos más de 5 años de experiencia en la industria. Durante este tiempo, hemos:</p>
            <ul>
              <li>Servido a más de 10,000 clientes</li>
              <li>Lanzado más de 15 productos exitosos</li>
              <li>Expandido a 25 países</li>
              <li>Construido un equipo de más de 100 profesionales</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Preguntas de Facturación -->
      <div class="faq-item" data-category="facturacion">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-3">
          <span class="question-text">¿Qué métodos de pago aceptan?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-3" aria-hidden="true">
          <div class="answer-content">
            <p>Aceptamos todos los métodos de pago principales para hacer conveniente a nuestros clientes:</p>
            <ul>
              <li><strong>Tarjetas de Crédito:</strong> Visa, MasterCard, American Express, Discover</li>
              <li><strong>Billeteras Digitales:</strong> PayPal, Apple Pay, Google Pay</li>
              <li><strong>Transferencias Bancarias:</strong> ACH, Transferencias electrónicas</li>
              <li><strong>Criptomonedas:</strong> Bitcoin, Ethereum (para planes empresariales)</li>
            </ul>
            <p>Todos los pagos se procesan de forma segura utilizando encriptación estándar de la industria.</p>
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="facturacion">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-4">
          <span class="question-text">¿Puedo obtener un reembolso?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-4" aria-hidden="true">
          <div class="answer-content">
            <p>Sí, ofrecemos una garantía de devolución de dinero de 30 días para todos nuestros servicios. Si no está completamente satisfecho, puede solicitar un reembolso completo dentro de los 30 días de su compra.</p>
            <p><strong>Proceso de Reembolso:</strong></p>
            <ol>
              <li>Contacte a nuestro equipo de soporte</li>
              <li>Proporcione su número de pedido</li>
              <li>Explique la razón del reembolso</li>
              <li>Reciba confirmación dentro de 24 horas</li>
              <li>Reembolso procesado dentro de 5-7 días hábiles</li>
            </ol>
          </div>
        </div>
      </div>

      <!-- Preguntas Técnicas -->
      <div class="faq-item" data-category="tecnico">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-5">
          <span class="question-text">¿Cuáles son los requisitos del sistema?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-5" aria-hidden="true">
          <div class="answer-content">
            <p>Nuestra plataforma está diseñada para funcionar en todos los dispositivos y navegadores modernos:</p>
            <div class="requirements-grid">
              <div class="requirement-item">
                <h4>Navegadores de Escritorio</h4>
                <ul>
                  <li>Chrome 80+</li>
                  <li>Firefox 75+</li>
                  <li>Safari 13+</li>
                  <li>Edge 80+</li>
                </ul>
              </div>
              <div class="requirement-item">
                <h4>Dispositivos Móviles</h4>
                <ul>
                  <li>iOS 13+ (Safari)</li>
                  <li>Android 8+ (Chrome)</li>
                  <li>Diseño responsivo</li>
                  <li>Optimizado para táctil</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="tecnico">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-6">
          <span class="question-text">¿Proporcionan acceso a API?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-6" aria-hidden="true">
          <div class="answer-content">
            <p>Sí, proporcionamos acceso integral a API para desarrolladores y empresas que quieren integrar nuestros servicios:</p>
            <ul>
              <li><strong>API REST:</strong> Operaciones CRUD completas con respuestas JSON</li>
              <li><strong>GraphQL:</strong> Consultas flexibles para casos de uso avanzados</li>
              <li><strong>Webhooks:</strong> Notificaciones en tiempo real para eventos</li>
              <li><strong>SDKs:</strong> Disponibles para Python, JavaScript, PHP y más</li>
            </ul>
            <p>La documentación de API y herramientas de prueba interactivas están disponibles en nuestro portal de desarrolladores.</p>
          </div>
        </div>
      </div>

      <!-- Preguntas de Cuenta -->
      <div class="faq-item" data-category="cuenta">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-7">
          <span class="question-text">¿Cómo restablezco mi contraseña?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-7" aria-hidden="true">
          <div class="answer-content">
            <p>Puede restablecer su contraseña fácilmente a través de nuestro proceso seguro de restablecimiento de contraseña:</p>
            <ol>
              <li>Vaya a la página de inicio de sesión</li>
              <li>Haga clic en "¿Olvidó su contraseña?"</li>
              <li>Ingrese su dirección de correo electrónico</li>
              <li>Revise su correo para instrucciones de restablecimiento</li>
              <li>Siga el enlace y cree una nueva contraseña</li>
            </ol>
            <p><strong>Nota de Seguridad:</strong> Los enlaces de restablecimiento expiran después de 1 hora por motivos de seguridad.</p>
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="cuenta">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-8">
          <span class="question-text">¿Puedo cambiar mi dirección de correo electrónico?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-8" aria-hidden="true">
          <div class="answer-content">
            <p>Sí, puede cambiar su dirección de correo electrónico desde la configuración de su cuenta:</p>
            <ol>
              <li>Inicie sesión en su cuenta</li>
              <li>Vaya a Configuración de Cuenta</li>
              <li>Haga clic en "Cambiar Correo"</li>
              <li>Ingrese su nueva dirección de correo electrónico</li>
              <li>Verifique el nuevo correo a través del enlace de confirmación</li>
            </ol>
            <p>Su correo anterior permanecerá activo hasta que confirme el nuevo.</p>
          </div>
        </div>
      </div>

      <!-- Más Preguntas Generales -->
      <div class="faq-item" data-category="general">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-9">
          <span class="question-text">¿Ofrecen soporte al cliente?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-9" aria-hidden="true">
          <div class="answer-content">
            <p>¡Absolutamente! Proporcionamos soporte integral al cliente a través de múltiples canales:</p>
            <ul>
              <li><strong>Chat en Vivo 24/7:</strong> Ayuda instantánea de nuestro equipo de soporte</li>
              <li><strong>Soporte por Correo:</strong> Respuestas detalladas dentro de 4 horas</li>
              <li><strong>Soporte Telefónico:</strong> Línea directa para problemas urgentes</li>
              <li><strong>Base de Conocimientos:</strong> Artículos de autoservicio y tutoriales</li>
              <li><strong>Foro Comunitario:</strong> Conéctese con otros usuarios</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="tecnico">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-10">
          <span class="question-text">¿Están seguros mis datos?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-10" aria-hidden="true">
          <div class="answer-content">
            <p>La seguridad de los datos es nuestra máxima prioridad. Implementamos múltiples capas de protección:</p>
            <ul>
              <li><strong>Encriptación:</strong> Encriptación AES-256 para datos en reposo y en tránsito</li>
              <li><strong>Cumplimiento:</strong> Cumple con SOC 2 Tipo II, GDPR y HIPAA</li>
              <li><strong>Control de Acceso:</strong> Autenticación multifactor y permisos basados en roles</li>
              <li><strong>Monitoreo:</strong> Monitoreo de seguridad 24/7 y detección de amenazas</li>
              <li><strong>Respaldos:</strong> Respaldos automáticos diarios con garantía de tiempo de actividad del 99.9%</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="facturacion">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-11">
          <span class="question-text">¿Puedo actualizar o degradar mi plan?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-11" aria-hidden="true">
          <div class="answer-content">
            <p>Sí, puede cambiar su plan en cualquier momento. Así es como funciona:</p>
            <div class="plan-changes">
              <div class="change-type">
                <h4>Actualización</h4>
                <ul>
                  <li>Acceso inmediato a nuevas características</li>
                  <li>Facturación prorrateada para el período actual</li>
                  <li>Sin interrupción del servicio</li>
                </ul>
              </div>
              <div class="change-type">
                <h4>Degradación</h4>
                <ul>
                  <li>Los cambios toman efecto en el próximo ciclo de facturación</li>
                  <li>Exportación de datos disponible antes de la degradación</li>
                  <li>Crédito aplicado a facturas futuras</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="faq-item" data-category="cuenta">
        <button class="faq-question" aria-expanded="false" aria-controls="faq-12">
          <span class="question-text">¿Cómo elimino mi cuenta?</span>
          <span class="question-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          </span>
        </button>
        <div class="faq-answer" id="faq-12" aria-hidden="true">
          <div class="answer-content">
            <p>¡Lamentamos verte partir! Puede eliminar su cuenta a través del siguiente proceso:</p>
            <ol>
              <li>Inicie sesión en su cuenta</li>
              <li>Vaya a Configuración de Cuenta</li>
              <li>Desplácese a "Zona de Peligro"</li>
              <li>Haga clic en "Eliminar Cuenta"</li>
              <li>Confirme la eliminación por correo electrónico</li>
            </ol>
            <p><strong>Importante:</strong> Esta acción es irreversible. Todos sus datos serán eliminados permanentemente dentro de 30 días.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Mensaje Sin Resultados -->
    <div class="no-results" id="noResults" style="display: none;">
      <div class="no-results-content">
        <svg class="no-results-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="11" cy="11" r="8"></circle>
          <path d="m21 21-4.35-4.35"></path>
        </svg>
        <h3>No se encontraron preguntas</h3>
        <p>Intente ajustar sus términos de búsqueda o explore diferentes categorías.</p>
        <button class="reset-search-btn" onclick="resetSearch()">Limpiar Búsqueda</button>
      </div>
    </div>

    <!-- Contactar Soporte -->
    <div class="faq-footer">
      <div class="support-cta">
        <h3>¿Aún tienes preguntas?</h3>
        <p>¿No puedes encontrar lo que buscas? Nuestro equipo de soporte está aquí para ayudar.</p>
        <div class="support-buttons">
          <a href="#" class="support-btn primary">Contactar Soporte</a>
          <a href="#" class="support-btn secondary">Chat en Vivo</a>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

.faq-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Encabezado */
.faq-header {
  text-align: center;
  margin-bottom: 60px;
}

.faq-title {
  font-size: 3rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 16px;
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-subtitle {
  font-size: 1.25rem;
  color: #4a5568;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Controles */
.faq-controls {
  margin-bottom: 40px;
}

.search-container {
  margin-bottom: 30px;
}

.search-input-wrapper {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #9ca3af;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 16px 50px 16px 50px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
  background: white;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  width: 20px;
  height: 20px;
  color: #9ca3af;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.search-clear.visible {
  opacity: 1;
}

.search-clear:hover {
  color: #6b7280;
}

/* Botones de Filtro */
.filter-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.filter-buttons {
  display: flex;
  gap: 8px;
  background: white;
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

.filter-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  color: #6b7280;
  background: transparent;
}

.filter-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.filter-btn.active {
  background: #4f46e5;
  color: white;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}

/* Información de Resultados */
.faq-results {
  margin-bottom: 30px;
  text-align: center;
}

.results-count {
  color: #6b7280;
  font-size: 0.875rem;
}

/* Acordeón FAQ */
.faq-accordion {
  space-y: 16px;
}

.faq-item {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.2s ease;
  margin-bottom: 16px;
}

.faq-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.faq-question {
  width: 100%;
  padding: 24px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a202c;
  transition: all 0.2s ease;
}

.faq-question:hover {
  background: #f8fafc;
}

.faq-question[aria-expanded="true"] {
  background: #f0f9ff;
  border-bottom: 1px solid #e0f2fe;
}

.question-text {
  flex: 1;
  margin-right: 16px;
}

.question-icon {
  width: 24px;
  height: 24px;
  color: #6b7280;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.faq-question[aria-expanded="true"] .question-icon {
  transform: rotate(180deg);
  color: #0ea5e9;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer.open {
  max-height: 1000px;
}

.answer-content {
  padding: 0 24px 24px;
  color: #4a5568;
  line-height: 1.6;
}

.answer-content p {
  margin-bottom: 16px;
}

.answer-content p:last-child {
  margin-bottom: 0;
}

.answer-content ul,
.answer-content ol {
  margin: 16px 0;
  padding-left: 20px;
}

.answer-content li {
  margin-bottom: 8px;
}

.answer-content strong {
  color: #2d3748;
  font-weight: 600;
}

/* Diseños de Contenido Especial */
.requirements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.requirement-item h4 {
  color: #2d3748;
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 1rem;
}

.plan-changes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.change-type h4 {
  color: #2d3748;
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 1rem;
}

/* Resaltado de Búsqueda */
.highlight {
  background: #fef3c7;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
}

/* Elementos Ocultos */
.faq-item.hidden {
  display: none;
}

/* Sin Resultados */
.no-results {
  text-align: center;
  padding: 60px 20px;
}

.no-results-content {
  max-width: 400px;
  margin: 0 auto;
}

.no-results-icon {
  width: 64px;
  height: 64px;
  color: #9ca3af;
  margin: 0 auto 20px;
}

.no-results h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.no-results p {
  color: #6b7280;
  margin-bottom: 24px;
}

.reset-search-btn {
  background: #4f46e5;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.reset-search-btn:hover {
  background: #4338ca;
}

/* Pie de Página */
.faq-footer {
  margin-top: 80px;
  text-align: center;
}

.support-cta {
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.support-cta h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 12px;
}

.support-cta p {
  color: #6b7280;
  margin-bottom: 24px;
}

.support-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.support-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.support-btn.primary {
  background: #4f46e5;
  color: white;
}

.support-btn.primary:hover {
  background: #4338ca;
  transform: translateY(-1px);
}

.support-btn.secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.support-btn.secondary:hover {
  background: #e5e7eb;
}

/* Diseño Responsivo */
@media (max-width: 768px) {
  .faq-title {
    font-size: 2.25rem;
  }
  
  .faq-question {
    padding: 20px;
    font-size: 1rem;
  }
  
  .answer-content {
    padding: 0 20px 20px;
  }
  
  .filter-buttons {
    justify-content: flex-start;
  }
  
  .support-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .support-btn {
    width: 100%;
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .faq-section {
    padding: 40px 0;
  }
  
  .faq-title {
    font-size: 1.875rem;
  }
  
  .search-input {
    padding: 14px 45px 14px 45px;
  }
  
  .faq-question {
    padding: 16px;
  }
  
  .answer-content {
    padding: 0 16px 16px;
  }
}

/* Estilos de Impresión */
@media print {
  .faq-controls,
  .faq-footer {
    display: none;
  }
  
  .faq-item {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #e5e7eb;
  }
  
  .faq-answer {
    max-height: none !important;
  }
  
  .question-icon {
    display: none;
  }
}

JavaScript

// Controlador de Acordeón FAQ
class FAQController {
  constructor() {
    this.faqItems = document.querySelectorAll('.faq-item');
    this.searchInput = document.getElementById('faqSearch');
    this.searchClear = document.getElementById('searchClear');
    this.filterButtons = document.querySelectorAll('.filter-btn');
    this.resultsElement = document.getElementById('faqResults');
    this.noResultsElement = document.getElementById('noResults');
    this.accordion = document.getElementById('faqAccordion');
    
    this.currentFilter = 'all';
    this.searchTerm = '';
    this.autoCollapse = true; // Establecer en false para permitir múltiples elementos abiertos
    
    this.init();
  }

  init() {
    this.setupEventListeners();
    this.updateResults();
    this.setupKeyboardNavigation();
  }

  setupEventListeners() {
    // Funcionalidad de búsqueda
    this.searchInput.addEventListener('input', (e) => {
      this.searchTerm = e.target.value.toLowerCase();
      this.updateSearchClear();
      this.filterFAQs();
    });

    this.searchClear.addEventListener('click', () => {
      this.clearSearch();
    });

    // Botones de filtro
    this.filterButtons.forEach(button => {
      button.addEventListener('click', (e) => {
        this.setActiveFilter(e.target.dataset.category);
      });
    });

    // Acordeón FAQ
    this.faqItems.forEach((item, index) => {
      const question = item.querySelector('.faq-question');
      const answer = item.querySelector('.faq-answer');
      
      question.addEventListener('click', () => {
        this.toggleFAQ(item, index);
      });
    });
  }

  setupKeyboardNavigation() {
    // Permitir navegación por teclado a través de botones de filtro
    this.filterButtons.forEach((button, index) => {
      button.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft' && index > 0) {
          this.filterButtons[index - 1].focus();
        } else if (e.key === 'ArrowRight' && index < this.filterButtons.length - 1) {
          this.filterButtons[index + 1].focus();
        }
      });
    });

    // Atajos de teclado para entrada de búsqueda
    this.searchInput.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        this.clearSearch();
      }
    });
  }

  toggleFAQ(item, index) {
    const question = item.querySelector('.faq-question');
    const answer = item.querySelector('.faq-answer');
    const isOpen = question.getAttribute('aria-expanded') === 'true';

    if (this.autoCollapse && !isOpen) {
      // Cerrar todos los otros FAQs
      this.faqItems.forEach(otherItem => {
        if (otherItem !== item) {
          this.closeFAQ(otherItem);
        }
      });
    }

    if (isOpen) {
      this.closeFAQ(item);
    } else {
      this.openFAQ(item);
    }

    // Seguimiento de analíticas (opcional)
    this.trackFAQInteraction(item, !isOpen);
  }

  openFAQ(item) {
    const question = item.querySelector('.faq-question');
    const answer = item.querySelector('.faq-answer');
    
    question.setAttribute('aria-expanded', 'true');
    answer.setAttribute('aria-hidden', 'false');
    answer.classList.add('open');
    
    // Desplazamiento suave a la pregunta si no está completamente visible
    setTimeout(() => {
      const rect = question.getBoundingClientRect();
      if (rect.top < 100) {
        question.scrollIntoView({ 
          behavior: 'smooth', 
          block: 'start',
          inline: 'nearest'
        });
      }
    }, 300);
  }

  closeFAQ(item) {
    const question = item.querySelector('.faq-question');
    const answer = item.querySelector('.faq-answer');
    
    question.setAttribute('aria-expanded', 'false');
    answer.setAttribute('aria-hidden', 'true');
    answer.classList.remove('open');
  }

  setActiveFilter(category) {
    this.currentFilter = category;
    
    // Actualizar estados de botones
    this.filterButtons.forEach(button => {
      const isActive = button.dataset.category === category;
      button.classList.toggle('active', isActive);
      button.setAttribute('aria-selected', isActive);
    });
    
    this.filterFAQs();
  }

  filterFAQs() {
    let visibleCount = 0;
    
    this.faqItems.forEach(item => {
      const category = item.dataset.category;
      const questionText = item.querySelector('.question-text').textContent.toLowerCase();
      const answerText = item.querySelector('.answer-content').textContent.toLowerCase();
      
      const matchesFilter = this.currentFilter === 'all' || category === this.currentFilter;
      const matchesSearch = this.searchTerm === '' || 
                           questionText.includes(this.searchTerm) || 
                           answerText.includes(this.searchTerm);
      
      const isVisible = matchesFilter && matchesSearch;
      
      item.classList.toggle('hidden', !isVisible);
      
      if (isVisible) {
        visibleCount++;
        this.highlightSearchTerms(item);
      }
    });
    
    this.updateResults(visibleCount);
    this.toggleNoResults(visibleCount === 0);
  }

  highlightSearchTerms(item) {
    if (!this.searchTerm) return;
    
    const questionText = item.querySelector('.question-text');
    const answerContent = item.querySelector('.answer-content');
    
    [questionText, answerContent].forEach(element => {
      const originalText = element.textContent;
      const regex = new RegExp(`(${this.escapeRegex(this.searchTerm)})`, 'gi');
      const highlightedText = originalText.replace(regex, '<span class="highlight">$1</span>');
      
      if (highlightedText !== originalText) {
        element.innerHTML = highlightedText;
      }
    });
  }

  escapeRegex(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }

  updateResults(count = null) {
    if (count === null) {
      count = this.faqItems.length;
    }
    
    const countElement = this.resultsElement.querySelector('.results-count');
    const questionText = count === 1 ? 'pregunta' : 'preguntas';
    countElement.innerHTML = `Mostrando <strong>${count}</strong> ${questionText}`;
  }

  toggleNoResults(show) {
    this.noResultsElement.style.display = show ? 'block' : 'none';
    this.accordion.style.display = show ? 'none' : 'block';
  }

  updateSearchClear() {
    this.searchClear.classList.toggle('visible', this.searchInput.value.length > 0);
  }

  clearSearch() {
    this.searchInput.value = '';
    this.searchTerm = '';
    this.updateSearchClear();
    this.filterFAQs();
    this.searchInput.focus();
  }

  trackFAQInteraction(item, isOpening) {
    // Opcional: Enviar datos de analíticas
    const questionText = item.querySelector('.question-text').textContent;
    const category = item.dataset.category;
    
    // Ejemplo: Google Analytics 4
    if (typeof gtag !== 'undefined') {
      gtag('event', 'faq_interaction', {
        'event_category': 'FAQ',
        'event_label': questionText,
        'custom_parameter_1': category,
        'custom_parameter_2': isOpening ? 'abrir' : 'cerrar'
      });
    }
    
    console.log(`FAQ ${isOpening ? 'abierto' : 'cerrado'}: ${questionText}`);
  }

  // Métodos públicos para control externo
  openFAQByIndex(index) {
    if (this.faqItems[index]) {
      this.openFAQ(this.faqItems[index]);
    }
  }

  searchFAQs(term) {
    this.searchInput.value = term;
    this.searchTerm = term.toLowerCase();
    this.updateSearchClear();
    this.filterFAQs();
  }

  filterByCategory(category) {
    const button = document.querySelector(`[data-category="${category}"]`);
    if (button) {
      this.setActiveFilter(category);
    }
  }
}

// Funciones globales para uso externo
function resetSearch() {
  if (window.faqController) {
    window.faqController.clearSearch();
    window.faqController.setActiveFilter('all');
  }
}

function openFAQ(index) {
  if (window.faqController) {
    window.faqController.openFAQByIndex(index);
  }
}

function searchFAQs(term) {
  if (window.faqController) {
    window.faqController.searchFAQs(term);
  }
}

// Inicializar cuando el DOM esté cargado
document.addEventListener('DOMContentLoaded', () => {
  window.faqController = new FAQController();
  
  // Opcional: Auto-abrir FAQ desde hash de URL
  const hash = window.location.hash;
  if (hash && hash.startsWith('#faq-')) {
    const index = parseInt(hash.replace('#faq-', '')) - 1;
    if (index >= 0) {
      setTimeout(() => {
        window.faqController.openFAQByIndex(index);
      }, 100);
    }
  }
});

// Opcional: Actualizar hash de URL cuando se abre FAQ
document.addEventListener('click', (e) => {
  if (e.target.classList.contains('faq-question')) {
    const faqItem = e.target.closest('.faq-item');
    const index = Array.from(document.querySelectorAll('.faq-item')).indexOf(faqItem) + 1;
    
    if (e.target.getAttribute('aria-expanded') === 'false') {
      history.replaceState(null, null, `#faq-${index}`);
    } else {
      history.replaceState(null, null, window.location.pathname);
    }
  }
});

Opciones de Personalización

Contenido

• Preguntas y Respuestas: Modificar los elementos FAQ en el HTML
• Categorías: Agregar o cambiar filtros de categoría
• Enlaces de Soporte: Actualizar URLs de contacto y soporte
• Marca: Personalizar colores y tipografía

Funcionalidad

• Auto-colapso: Establecer autoCollapse en false para permitir múltiples elementos abiertos
• Alcance de Búsqueda: Modificar búsqueda para incluir/excluir cierto contenido
• Analíticas: Agregar seguimiento para interacciones FAQ
• Enrutamiento de URL: Habilitar enlaces profundos a FAQs específicos

Estilo

• Esquema de Colores: Actualizar propiedades personalizadas CSS para temas consistentes
• Velocidad de Animación: Ajustar duraciones de transición
• Diseño: Modificar diseños de cuadrícula para diferentes tamaños de pantalla
• Iconos: Reemplazar iconos SVG con su conjunto de iconos preferido

Características de Accesibilidad

• Etiquetas ARIA: Etiquetado apropiado para lectores de pantalla
• Navegación por Teclado: Soporte completo de teclado
• Gestión de Foco: Orden lógico de tabulación e indicadores de foco
• Soporte para Lectores de Pantalla: Texto descriptivo y anuncios de estado
• Alto Contraste: Relaciones de contraste de color suficientes

Compatibilidad de Navegadores

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+
• ⚠️ IE 11 (con polyfills)

Notas de Rendimiento

• Manipulación eficiente del DOM con reflujos mínimos
• Animaciones basadas en CSS para rendimiento suave a 60fps
• Búsqueda con rebote para rendimiento óptimo
• Soporte de carga perezosa para listas grandes de FAQ
• Estilos optimizados para impresión