---
titulo: Precios
resumen: "Capítulo «Tu plan mensual»: precio y acción a la izquierda; qué
  incluye y la hoja para reservar una llamada a la derecha."
estado: produccion
nivel: seccion
creado: 2026-10-11
actualizado: 2026-10-13
tokens:
  - panel
  - signal
  - ink-fixed
  - line-2
  - ink-3
relacionados:
  - patrones/estructura-de-seccion
  - componentes/placa
  - componentes/boton
plataformas:
  web:
    estado: produccion
    superficies:
      - id: landing
        fuente: public/site/report.css
        clases:
          - price
          - price-unit
          - checklist
          - call-sheet
          - sheet
          - sheet-title
          - pill-light
id: patrones/precios
url: /designloop/patrones/precios
sync: ok
---

# Precios

Capítulo «Tu plan mensual»: precio y acción a la izquierda; qué incluye y la hoja para reservar una llamada a la derecha.

## Texto del capítulo

```html preview superficie=landing
<div class="chapter-text">
  <h2 class="display">Tu plan mensual</h2>
  <p class="sub">Todas tus necesidades de diseño en una suscripción, sin permanencia. Pausa o cancela cuando quieras.</p>
  <p class="price"><strong>2.000 €</strong><span class="price-unit"><span>/ mes</span> <span>+ IVA</span></span></p>
  <div class="actions"><a class="pill pill-accent" href="#">Empezar</a></div>
  <p class="mono-text">Cancela en los primeros 7 días y te devolvemos el 75 %.</p>
</div>
```

El precio lo escribe `app.js` desde `public/site/config.js` (`monthlyNet`), con el formato del idioma activo.

## Qué incluye

```html preview superficie=landing
<div class="sheet">
  <h3 class="sheet-title">Qué incluye</h3>
  <ul class="checklist">
    <li>Llamada semanal de 30 min</li>
    <li>Definición de producto y MVP</li>
    <li>Flujos, prototipos e interfaces</li>
    <li>Frontend en tu repositorio</li>
    <li>Identidad de marca y logotipo</li>
  </ul>
</div>
```

En producción la lista tiene once elementos; la llamada semanal va siempre la primera.

## Reservar una llamada

```html preview superficie=landing
<div class="sheet call-sheet is-signal">
  <h3>¿Prefieres hablarlo antes?</h3>
  <p>Reserva una llamada de 15 minutos y vemos si encajamos.</p>
  <a class="pill pill-light" href="#">Reservar llamada</a>
</div>
```

## Piezas

| Clase | Qué hace |
| --- | --- |
| `.price` | Cifra en Inter Tight 500, de 52 a 84 px, con la unidad (`.price-unit`) en mono y mayúsculas al lado. |
| `.checklist` | Lista numerada (01, 02…) en `--ink-3` y una marca ✓ al final de cada fila, con separadores `--line-2`. |
| `.call-sheet` | Hoja azul cielo (`.is-signal`) con titular, una frase y el botón claro. |

## Reglas

- Un solo plan, mes a mes. El precio se muestra antes de impuestos.
- «Empezar» va directo a `/subscribe`, sin pasos intermedios.
- La hoja de la llamada es la única hoja azul de la página y su botón es `.pill-light`: nunca oliva sobre azul.

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