---
titulo: Cómo funciona
resumen: "Tres pasos a la izquierda y tres placas que se pueden usar a la
  derecha: suscribirse, pedir lo que necesites y el loop."
estado: produccion
nivel: seccion
creado: 2026-10-11
actualizado: 2026-10-13
tokens:
  - panel
  - surface
  - signal
  - deep
  - spring
relacionados:
  - patrones/estructura-de-seccion
  - componentes/placa
plataformas:
  web:
    estado: produccion
    superficies:
      - id: landing
        fuente: public/site/report.css
        clases:
          - plate-sub
          - sub-card
          - plate-queue
          - queue
          - plate-chat
          - chat
          - steps
id: patrones/como-funciona
url: /designloop/patrones/como-funciona
sync: ok
---

# Cómo funciona

Tres pasos a la izquierda y tres placas que se pueden usar a la derecha: suscribirse, pedir lo que necesites y el loop.

## Texto del capítulo

```html preview superficie=landing
<div class="chapter-text">
  <h2 class="display">Cómo funciona</h2>
  <p class="sub">Añade peticiones, decide el orden y revisa las entregas desde tu portal.</p>
  <ol class="steps">
    <li><h3 class="step-title"><span class="step-n">01</span><span>Suscríbete</span></h3><div class="step-body"><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></div></li>
    <li><h3 class="step-title"><span class="step-n">02</span><span>Pide lo que necesites</span></h3><div class="step-body"><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></div></li>
    <li><h3 class="step-title"><span class="step-n">03</span><span>El loop se repite</span></h3><div class="step-body"><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></div></li>
  </ol>
</div>
```

## Las tres placas

Funcionan con `report.js`; aquí se describen, no se reproducen.

| Placa | Qué se puede hacer |
| --- | --- |
| **Suscríbete** (`.plate-sub`) | La etiqueta del botón rueda hasta «Suscripción activa» con confeti. Aparecen pausar, reanudar y cancelar como iconos de contorno; cada uno recibe una burbuja de Andrés bajo la tarjeta. |
| **Pide lo que necesites** (`.plate-queue`) | Una cola donde se escribe (Intro o el botón cuadrado) y se reordena arrastrando (la fila entera con ratón, el asa en pantallas táctiles) o con las flechas. La flecha, o soltar una fila en primer lugar, la pone en curso. Una sexta petición entrega la que estaba en curso. |
| **El loop se repite** (`.plate-chat`) | Una conversación de 7 segundos, como la del portal, que lleva la petición de «En revisión» a «En curso». |

## Reglas

- La petición en curso es una tarjeta azul cielo entera con una píldora blanca y texto en tinta. En el chat, «En curso» es una píldora oliva.
- Solo hay una petición en curso a la vez, como en el servicio.
- Las placas de suscripción y de cola no llevan `aria-hidden`: se pueden usar con teclado.
- Con movimiento reducido la cola se reordena sin deslizarse, no hay confeti y la conversación aparece en su estado final.

# 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 | 94e17261a8603f4b |
| `tokens.produccion.json` | Sincronizado | — |