Cómo funciona

Tres pasos numerados con un mosaico ilustrado, título y texto. Explica el ciclo de la suscripción.

Sección #how de la landing. En producción lleva también la clase how, que no tiene estilos. Usa la estructura de sección y el mosaico.

Ejemplo

Textos del diccionario en español de producción. Las ilustraciones animadas se omiten.

html · landing

<section class="section" aria-labelledby="how-title">
  <div class="wrap">
    <div class="section-head">
      <h2 id="how-title">Cómo funciona</h2>
      <p>Añade peticiones, decide el orden y revisa las entregas desde tu portal.</p>
    </div>
    <ol class="steps">
      <li class="step">
        <div class="tile tile-sand"></div>
        <span class="step-num">01</span>
        <h3>Suscríbete</h3>
        <p>Al suscribirte recibes acceso a tu portal y reservas la primera llamada. Hablamos de tu producto y tus objetivos, y decidimos por dónde empezar.</p>
      </li>
      <li class="step">
        <div class="tile tile-sky"></div>
        <span class="step-num">02</span>
        <h3>Pide lo que necesites</h3>
        <p>Añade peticiones a tu cola y ordénalas por prioridad. Si no sabes por dónde empezar, te ayudamos a decidir. Trabajamos en una petición cada vez.</p>
      </li>
      <li class="step">
        <div class="tile tile-night"></div>
        <span class="step-num">03</span>
        <h3>El loop se repite</h3>
        <p>Recibes el diseño en Figma o Paper, el código en tu repositorio o los archivos de tu marca y tus presentaciones. Revisas la entrega, pides cambios y seguimos con la siguiente petición. Como orientación, hacemos una entrega cada 48 a 72 horas en días laborables.</p>
      </li>
    </ol>
  </div>
</section>

Piezas

Clase	Qué hace
`.steps`	Lista ordenada en tres columnas con `clamp(20px, 2.4vw, 32px)` de separación. Una columna y 48 px de separación en pantallas estrechas.
`.step`	Rejilla vertical con 10 px entre piezas; el mosaico deja 14 px más debajo.
`.step-num`	Número de dos cifras en `--text-xs`, `--faint` y cifras tabulares.
`.step p`	Texto en 15 px, `--muted`, hasta 36 caracteres por línea.

Reglas

Regla	Cómo se comprueba
Tres pasos, en orden, como `<ol>`.	`ol.steps` con tres `li.step`.
Número con dos cifras («01»).	Texto de `.step-num`.
Orden de cada paso: mosaico, número, título (`h3`) y texto.	Marcado de `index.html`.
Títulos con verbo y en segunda persona.	`step1Title` «Suscríbete», `step2Title` «Pide lo que necesites».

Antipatrones

Más de tres pasos: si el proceso necesita más, se simplifica el proceso, no la rejilla.
Número como imagen o icono: el número es texto.

Tokens que usa

--text-xs--faint--muted

Enlace con producción

Superficie	Fuente	Estado	Huella	Revisada en
Landing	public/site/styles.css .steps .step .step-num 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, wrap, section-head, step, tile, tile-sand, step-num, tile-sky, tile-night

Relacionados

patrones/como-funciona · Actualizado el 2026-10-11