# Armar una sección de landing (escritorio 1440 · celular 390)
La web **no sigue el modo oscuro del teléfono**: declara ``.
## Pasos
1. **Carga los tokens**: `tokens.css` y `font-family: var(--fuente)`. Nada de hex.
2. **Una idea por sección.** Eyebrow · título (conclusión con punto) · bajada · contenido · un solo pedido.
3. **Retícula:** contenedor 1200, margen 48 (40 en tablet, 24 en celular), medianil 24, sección 128 de alto de espacio (80 en celular), cabecera 64.
4. **Encendido por pantalla:** el botón (es interfaz) y, como máximo, **un** elemento editorial. El inicio lleva el segundo tiempo del H1 en azul más el botón.
5. **Botón:** «Pedir piloto gratis», píldora azul, 19 B, alto 52, relleno lateral 24; hover `filter:brightness(.92)` en 150 ms; foco con anillo de 2 px azul a 2 px. Mínimo tocable 44.
6. **Teléfono** (W 320 en escritorio, 256 en celular) solo si la sección trata de un chat. Personaje de 240 px (160 en celular) solo en «Cómo funciona», junto a «Tú apruebas cada mensaje antes de que salga.» y con el formulario enviado; nunca en el inicio ni en el precio.
7. **Campos:** radio 8, borde 1 px Apagado, etiqueta arriba 15 R, foco 2 px azul, error `#D70015` con una frase que dice qué corregir.
8. Los enlaces dentro de un párrafo van en tinta con subrayado, no en azul. Íconos: los 28, con su palabra.
9. `prefers-reduced-motion` ya está en `tokens.css`.
## Tokens
| Papel | Escritorio | Celular |
|---|---|---|
| H1 | `--web-h1` 80 B | 42 B |
| H2 | `--web-h2` 58 B | 30 B |
| H3 / bajada | 24 | 19 |
| Cuerpo | 17 R | 17 R |
| Texto chico | 15 R | 15 R |
| Eyebrow / pie | 12 | 12 |
| Botón | 19 B, alto 52 | 19 B, alto 52 |
## Ejemplo mínimo
```html
Cómo funciona
Cada chat entra con su vendedor.
Entra asignado a Ana, Diego o Lucía. Tú abres cualquiera.
Pedir piloto gratis
```
Errores típicos: dos azules editoriales en la misma pantalla, personaje en el inicio o el precio, `lucide-react` con íconos fuera de los 28 (por ejemplo `Sparkles`).