---
titulo: Beneficios
resumen: "Capítulo «Así trabajamos con tu equipo»: seis puntos numerados en una
  hoja, a dos columnas."
estado: produccion
nivel: seccion
creado: 2026-10-11
actualizado: 2026-10-13
tokens:
  - panel
  - ink-2
  - ink-3
relacionados:
  - patrones/estructura-de-seccion
  - componentes/placa
plataformas:
  web:
    estado: produccion
    superficies:
      - id: landing
        fuente: public/site/report.css
        clases:
          - benefits
          - b-n
          - sheet
id: patrones/beneficios
url: /designloop/patrones/beneficios
sync: ok
---

# Beneficios

Capítulo «Así trabajamos con tu equipo»: seis puntos numerados en una hoja, a dos columnas.

## Ejemplo

```html preview superficie=landing
<div class="sheet">
  <ol class="benefits">
    <li><span class="b-n">01</span><h3>Pensamos contigo</h3><p>Trabajamos de forma honesta. Si algo no nos convence, te lo decimos.</p></li>
    <li><span class="b-n">02</span><h3>Parte de tu equipo</h3><p>Trabajamos en tu repositorio, en Figma y Paper y con las herramientas de tu equipo, junto a las personas que ya tienes.</p></li>
    <li><span class="b-n">03</span><h3>Design Engineering</h3><p>Diseñamos la interfaz y escribimos el frontend como parte del mismo trabajo. Así mantenemos el mismo criterio en Figma, Paper y el producto.</p></li>
    <li><span class="b-n">04</span><h3>Coherencia</h3><p>Siempre trabajas con la misma persona. Tu producto, tu marca, tu web y tus presentaciones comparten el mismo criterio de diseño.</p></li>
  </ol>
</div>
```

En producción son seis: también «Según el momento» y «Reglas para agentes de IA». El titular del capítulo es «Así trabajamos con tu equipo», en dos líneas.

## Piezas

| Clase | Qué hace |
| --- | --- |
| `.benefits` | Rejilla de dos columnas (una por debajo de 960 px), 44 × 40 px de separación. |
| `.b-n` | Número en mono de 13 px, `--ink-3`. |
| `.benefits h3` | Inter Tight 500, de 22 a 30 px. |
| `.benefits p` | 17 px, `--ink-2`. |

## Reglas

- Siempre un número de pares: la rejilla es de dos columnas.
- Cada punto: un titular corto y una o dos frases. Sin iconos.

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