# FAQ / Acordeón

> Preguntas frecuentes con expansión progresiva.

Categoría: Feedback · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## FAQ / Acordeón

```html
<div class="rounded-ccs border border-ccs-line bg-white divide-y divide-ccs-line overflow-hidden dark:border-ccs-dark-line dark:divide-ccs-dark-line dark:bg-ccs-dark-surface">
  <details open class="group">
    <summary class="flex items-center gap-4 px-6 py-5 hover:bg-ccs-bg/40 dark:hover:bg-ccs-dark-overlay/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
      <span class="text-sm font-medium flex-1">¿Cómo me hago socio de la Cámara de Comercio?</span>
      <svg class="chev w-5 h-5 text-ccs-blue dark:text-ccs-dark-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
    </summary>
    <div class="px-6 pb-5 text-sm text-ccs-slate leading-relaxed dark:text-ccs-dark-text-2">
      Completa el formulario de inscripción en línea, adjunta los documentos requeridos y nuestro equipo comercial contactará a tu empresa dentro de 48 horas hábiles.
    </div>
  </details>
  <details class="group">
    <summary class="flex items-center gap-4 px-6 py-5 hover:bg-ccs-bg/40 dark:hover:bg-ccs-dark-overlay/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
      <span class="text-sm font-medium flex-1">¿Qué beneficios incluye la membresía?</span>
      <svg class="chev w-5 h-5 text-ccs-slate dark:text-ccs-dark-text-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
    </summary>
    <div class="px-6 pb-5 text-sm text-ccs-slate leading-relaxed dark:text-ccs-dark-text-2">
      Acceso a tu cuenta en línea, descuentos en eventos, suscripción al boletín semanal, participación en comités y estudios sectoriales.
    </div>
  </details>
  <details class="group">
    <summary class="flex items-center gap-4 px-6 py-5 hover:bg-ccs-bg/40 dark:hover:bg-ccs-dark-overlay/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
      <span class="text-sm font-medium flex-1">¿Cómo participo de un comité de trabajo?</span>
      <svg class="chev w-5 h-5 text-ccs-slate dark:text-ccs-dark-text-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
    </summary>
    <div class="px-6 pb-5 text-sm text-ccs-slate leading-relaxed dark:text-ccs-dark-text-2">
      Las empresas socias pueden postular representantes desde su cuenta en línea; cada comité define perfil y disponibilidad.
    </div>
  </details>
  <details class="group">
    <summary class="flex items-center gap-4 px-6 py-5 hover:bg-ccs-bg/40 dark:hover:bg-ccs-dark-overlay/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
      <span class="text-sm font-medium flex-1">¿Dónde se publican las memorias anuales?</span>
      <svg class="chev w-5 h-5 text-ccs-slate dark:text-ccs-dark-text-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
    </summary>
    <div class="px-6 pb-5 text-sm text-ccs-slate leading-relaxed dark:text-ccs-dark-text-2">
      En la sección Nuestra Institución › Memorias. Cada año fiscal incluye PDF descargable y resumen ejecutivo.
    </div>
  </details>
</div>
```