# Ornitonautas — DESIGN.md (Opción 1a · "Luminoso y limpio")

Portal de aprendizaje de informática. Formación de FP oficial en España + preparación
para el mercado laboral tech. Referencia de tono: **Brilliant** (limpio, aire, aprender
haciendo, un solo CTA por bloque). Público prioritario: **estudiantes de FP en España**.

---

## 1. Principios

- **Una idea por bloque.** Cada sección tiene un único mensaje y un único CTA.
- **Luminoso.** Fondo blanco, mucho espacio en blanco, sombras suaves.
- **FP España primero.** El CTA principal ("Ver FP de España") lleva a la sección de
  FP, donde estarán los libros y materiales de los ciclos.
- **Ilustración, no decoración.** Se usa el logo (pato-astronauta) como protagonista;
  el resto son estrellas ✦ y formas geométricas simples. Sin ruido gráfico.
- **Micro-interacciones sutiles.** Flotación del logo, twinkle de estrellas y
  elevación (translateY) de tarjetas al hacer hover. Nada agresivo.

## 2. Color

| Rol | Token | Valor | Uso |
|---|---|---|---|
| Navy | `--color-navy` | `#13294b` | Texto principal, footer, nodos de ruta, botón secundario |
| Navy soft | `--color-navy-soft` | `#1c3a63` | Degradados, badges |
| Naranja | `--color-orange` | `#f47a20` | Marca, CTA principal, acentos |
| Naranja tinta | `--color-orange-ink` | `#e26a12` | Enlaces, hover de naranja |
| Rojo | `--color-red` | `#e5241b` | Acento puntual (paso 3 de ruta) |
| Verde | `--color-green` | `#22a05a` | Confirmaciones / "correcto" |
| Texto suave | `--color-text` | `#4a5a72` | Párrafos |
| Texto tenue | `--color-text-muted` | `#8a97a8` | Metadatos, subtítulos |
| Papel | `--color-paper` | `#ffffff` | Fondo base |
| Bruma | `--color-mist` | `#f7f9fc` | Fondo de secciones alternas |
| Línea | `--color-line` | `rgba(19,41,75,.08)` | Bordes y separadores |

## 3. Tipografía

- **Display / titulares:** `Space Grotesk` (700). letter-spacing −.01 a −.02em.
- **Texto / UI:** `Manrope` (400–800).
- Escala: H1 56px · H2 30px · H3 18–19px · cuerpo 16–18px · meta 12–14px.
- `line-height`: 1.0–1.05 en titulares, 1.55–1.6 en cuerpo.

## 4. Componentes

- **Botón primario:** naranja, texto blanco 700, radius 12px, padding 15×26.
- **Botón secundario:** contorno navy 1.5px, texto navy, radius 12px.
- **Tarjeta:** fondo blanco, borde `rgba(19,41,75,.10)`, radius 16px, padding 26px.
  Hover: `translateY(-4px)` + sombra.
- **Badge/pill:** fondo tintado suave, texto 700 12.5px, radius 999px.
- **Icono de ciclo:** cuadrado 52px radius 13px, glifo mono, fondo tintado.
- **Nodo de ruta:** círculo 56px color sólido, número en Space Grotesk.

## 5. Movimiento

- `floaty` (6s): logo del hero, ±14px con leve rotación.
- `twinkle` (2.2–3s): estrellas del hero.
- Hover de tarjetas: elevación 200ms.

## 6. Layout

- Contenedor general: 1280px max-width, padding 40px lados.
- Grid tarjetas FP: 3 columnas gap 22px.
- Rutas: flex center, nodos de 200px, líneas de 90px.
- Mercado laboral: 3 columnas gap 22px.

## 7. Footer

- Background: `#13294b`.
- Texto: `#aeb9c9`.
- Logo + nombre a la izquierda, copyright a la derecha.
- Padding: 28px 40px.