# Sistema de diseño Apunto

Referencia del sistema de diseño de Apunto para marketing y asistentes de IA.
Apunto es un software operativo (TMS/ERP) para freight forwarders y agentes de carga.

## Overview

Apunto se lee como un SaaS logístico moderno y confiable: superficies claras, navy
de marca para profundidad, rosa como color de acción y mint como acento positivo.
Una sola familia tipográfica (Inter) en display y cuerpo, tarjetas con borde suave
y radios amplios.

## Colors

- brand-primary: #da456e  (color principal de marca, CTAs y énfasis)
- brand-secondary: #071629 (navy, fondos de profundidad y contraste)
- brand-cta: #68eaae       (mint, acento de acción / positivo)
- brand-cta-dark: #0d5a36  (mint oscuro, texto positivo sobre fondo claro)
- brand-light-pink: #EFE0E5 (fondo suave de secciones CTA)

## Typography

Familia: Inter (display + cuerpo). Fallback monoespaciado para datos numéricos.

| Token     | Tamaño / Interlineado | Peso |
| --------- | --------------------- | ---- |
| display1  | 60 / 60               | 700  |
| h1        | 32 / 38               | 600  |
| h2        | 28 / 34               | 600  |
| h3        | 24 / 30               | 600  |
| h4        | 20 / 26               | 600  |
| p1        | 18 / 26               | 400  |
| p2        | 16 / 24               | 400  |
| caption1  | 14 / 20               | 400  |

## Layout

- Ancho máximo de contenido: 1200px (max-w-grid)
- Padding de contenedor: 16px (mobile) / 24px (desktop)

## Shapes

- rounded-10: 10px
- rounded-20: 20px
- rounded-40: 40px
- Botones: 8px (rounded-lg)

## Elevation

Tarjetas con borde 1px sobre fondo claro; sombras suaves solo en hover.

## Components

- Botón primario: fondo brand-primary (#da456e), texto blanco, rounded-lg.
- Botón secundario: borde 2px brand-primary, texto brand-primary, fondo blanco.
- Botón acento: fondo brand-cta (#68eaae), texto brand-secondary (#071629).
- Feature card: fondo gris claro, borde 1px, radio amplio (rounded-2xl), padding 32px.

## Do's & Don'ts

Do:
- Reserva el rosa (#da456e) para CTAs y énfasis.
- Usa Inter en peso 600-700 para headlines.
- Delimita tarjetas con borde 1px en vez de sombras fuertes.

Don't:
- No introduzcas un segundo color de marca como CTA.
- No mezcles otra familia tipográfica con Inter en el mismo bloque.
- No abuses de sombras pesadas en superficies de marketing.

## Fonts

- Inter — Google Fonts, licencia SIL Open Font.