---
titulo: Preguntas frecuentes
resumen: "Capítulo «Preguntas»: un acordeón en una hoja, con un enlace para
  escribir si queda alguna duda."
estado: produccion
nivel: seccion
creado: 2026-10-11
actualizado: 2026-10-13
tokens:
  - panel
  - line-2
  - ink-2
  - ease
relacionados:
  - patrones/estructura-de-seccion
  - componentes/placa
plataformas:
  web:
    estado: produccion
    superficies:
      - id: landing
        fuente: public/site/report.css
        clases:
          - faq-sheet
          - sheet
id: patrones/preguntas-frecuentes
url: /designloop/patrones/preguntas-frecuentes
sync: ok
---

# Preguntas frecuentes

Capítulo «Preguntas»: un acordeón en una hoja, con un enlace para escribir si queda alguna duda.

## Ejemplo

```html preview superficie=landing
<div class="sheet faq-sheet">
  <details open><summary><span>¿Qué significa trabajar con un partner de diseño?</span><i aria-hidden="true"></i></summary><p>Tienes un diseñador senior que conoce tu producto y participa en las decisiones de tu equipo. La suscripción te da la flexibilidad de un estudio externo para contar con ese apoyo cuando lo necesitas y pausar cuando baja el trabajo.</p></details>
  <details><summary><span>¿Qué cuenta como una petición?</span><i aria-hidden="true"></i></summary><p>Un trabajo concreto, como un logotipo, una pantalla, un flujo, una presentación, un componente o una auditoría. Si es grande, lo dividimos en entregas más pequeñas.</p></details>
  <details><summary><span>¿Por qué solo una petición en curso?</span><i aria-hidden="true"></i></summary><p>Trabajamos en una petición hasta terminarla antes de empezar la siguiente. Puedes añadir tantas como quieras a la cola y decidir su orden.</p></details>
</div>
```

En producción son diez preguntas. A la izquierda, el capítulo dice «Preguntas», «¿Te queda alguna duda?» y un `.pill` «Escríbenos» que abre el correo a hola@designloop.app.

## Piezas

| Pieza | Qué hace |
| --- | --- |
| `details` / `summary` | Acordeón nativo. La pregunta en Inter Tight 500, de 19 a 24 px; separadores `--line-2` entre preguntas. |
| `summary i` | Un más que se convierte en menos al abrir (gira 90° en 0,3 s). |
| `details p` | Respuesta de 17 px en `--ink-2`, como mucho 62 caracteres por línea. |

## Reglas

- Todas cerradas al cargar.
- Una pregunta, una respuesta corta. Si la respuesta necesita una lista, va a otra parte de la landing.

# Web

Estado: En producción. Sin implementación documentada.

# iOS

Estado: Sin iniciar. Sin implementación documentada.

# Android

Estado: Sin iniciar. Sin implementación documentada.

# Enlace con producción

| Fuente | Estado | Huella |
| --- | --- | --- |
| `public/site/report.css` | Sincronizado | b136fe69e56010ed |
| `tokens.produccion.json` | Sincronizado | — |