Preguntas frecuentes
Introducción fija a la izquierda y lista de preguntas desplegables a la derecha, sobre fondo papel.
Sección #faq de la landing. Cada pregunta es un <details> nativo: funciona sin JavaScript.
Ejemplo
Tres preguntas con los textos del diccionario en español de producción.
<section class="section faq" aria-labelledby="faq-title">
<div class="wrap faq-inner">
<div class="faq-intro">
<h2 id="faq-title">Preguntas</h2>
<p>¿Te queda alguna duda?</p>
<a class="text-link" href="#"><span>Escríbenos</span><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a>
</div>
<div class="faq-list">
<details open><summary><span>¿Qué significa trabajar con un partner de diseño?</span><i aria-hidden="true"></i></summary><div class="faq-answer"><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></div></details>
<details><summary><span>¿Qué cuenta como una petición?</span><i aria-hidden="true"></i></summary><div class="faq-answer"><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></div></details>
<details><summary><span>¿Por qué solo una petición en curso?</span><i aria-hidden="true"></i></summary><div class="faq-answer"><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></div></details>
</div>
</div>
</section>Piezas
| Clase | Qué hace |
|---|---|
.faq |
Fondo --paper-2: la única sección de la landing con fondo propio antes del pie. |
.faq-inner |
Dos columnas en proporción 4:7; una en pantallas estrechas. |
.faq-intro |
Título, entradilla en --text-lg y enlace de texto. Se queda fija al hacer scroll (sticky, 112 px). |
.faq-list summary |
Pregunta en serif a 21 px (19 px en móvil) con un «+» que gira 45° al abrir. |
.faq-answer p |
Respuesta en --muted, hasta 64 caracteres por línea. |
La apertura se anima con interpolate-size y ::details-content en los navegadores que lo soportan, en --dur-ui con --ease-out.
Reglas
| Regla | Cómo se comprueba |
|---|---|
Pregunta y respuesta con <details> y <summary>, sin JavaScript. |
Marcado de .faq-list. |
| El «+» es decorativo. | <i aria-hidden="true">. |
| La pregunta va en primera persona de quien pregunta; la respuesta empieza por la respuesta. | faq1Q «¿Qué cuenta como una petición?» → «Un trabajo concreto…». |
| La introducción ofrece una salida: escribir al estudio. | .text-link a mailto: con faqLink. |
Antipatrones
- Acordeón exclusivo con JavaScript: abrir una pregunta no cierra las demás.
- Respuestas de marketing: si la respuesta no contesta en la primera frase, se reescribe (con aprobación; ver Voz y tono).
Tokens que usa
Enlace con producción
| Superficie | Fuente | Estado | Huella | Revisada en |
|---|---|---|---|---|
| Landing | public/site/styles.css .faq .faq-inner .faq-intro .faq-list .faq-answer El archivo no existe en producción. | No está en producción | — | — |
Producción en el commit 455e861 (2026-10-13). Sync del 2026-10-13.
Aviso: Clases de los ejemplos que no existen: section, faq, wrap, faq-inner, faq-intro, text-link, faq-list, faq-answer
Relacionados
- Patrones › Estructura de sección
El esqueleto común de las secciones de la landing. Espaciado vertical, ancho máximo y cabecera con título y entradilla.
En producción - Componentes › Enlace de texto
Enlace subrayado con flecha opcional, para acciones secundarias dentro de un bloque.
En producción - Fundamentos › Voz y tono
Directa, cercana y tranquila. Los textos aprobados no se reescriben sin petición expresa.
En producción
patrones/preguntas-frecuentes · Actualizado el 2026-10-11