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.

html · landing
<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

--paper-2--serif--muted--text-lg--dur-ui--ease-out--ink

Enlace con producción

SuperficieFuenteEstadoHuellaRevisada en
Landingpublic/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/preguntas-frecuentes · Actualizado el 2026-10-11