MAKE IT ONCE.
RUN IT EVERYWHERE

:root {
  /* Color - tema oscuro + gradiente azul + acentos vivos */
  --color-canvas: #000000;
  --color-surface: #1B1B1B;
  --color-surface-light: #F5F5F5;
  --color-surface-blue: #E5EDFA;
  --color-ink: #FFFFFF;
  --color-ink-soft: #F5F5F5;
  --color-muted: #4D4D4D;
  --color-primary: #034BFF;
  --color-secondary: #33B6FF;
  --color-accent: #D1B310;       /* oro */
  --color-gold: #D1B310;
  --color-purple: #8B53D0;
  --color-green: #257D64;
  --color-red: #EE3238;
  --color-orange: #F25502;
  --color-border: rgba(255,255,255,0.125);

  /* Gradiente hero (firma de marca) */
  --hero-gradient: linear-gradient(180deg, #113A74 0%, #0C6FE9 50%, #30B0FC 100%);

  /* Typography */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Sora', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Scale - peso 700 dominante, condensada */
  --f-display-xl: 700 120px/95% var(--font-display);
  --f-display-lg: 700 80px/100% var(--font-display);
  --f-display-md: 700 48px/105% var(--font-display);
  --f-body-md: 400 16px/160% var(--font-body);
  --f-label: 700 14px/140% var(--font-body);

  /* Radius + shadow */
  --radius-lg: 12px;      /* predominante, 23 ocurrencias */
  --radius-xl: 14px;
  --radius-pill: 999px;   /* CTA, 6 ocurrencias */
  --shadow-card: 0 18px 50px rgba(0,0,0,0.28);
  --shadow-glow: 0 0 20px 5px rgba(255,255,255,1);

  /* Spacing */
  --space-4: 4px; --space-8: 8px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-80: 80px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms; --duration-carousel: 8000ms;
}

@theme {
  --color-canvas: #000000;
  --color-surface: #1B1B1B;
  --color-surface-light: #F5F5F5;
  --color-ink: #FFFFFF;
  --color-primary: #034BFF;
  --color-secondary: #33B6FF;
  --color-accent: #D1B310;
  --color-border: rgba(255,255,255,0.125);

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Sora', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-display-xl: 120px;
  --text-display-lg: 80px;
  --text-body: 16px;
  --text-label: 14px;

  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 18px 50px rgba(0,0,0,0.28);
  --shadow-glow: 0 0 20px 5px rgba(255,255,255,1);
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}

{
  "color": {
    "canvas": "#000000",
    "surface": "#1B1B1B",
    "surfaceLight": "#F5F5F5",
    "ink": "#FFFFFF",
    "primary": "#034BFF",
    "secondary": "#33B6FF",
    "accent": "#D1B310",
    "gold": "#D1B310",
    "purple": "#8B53D0",
    "green": "#257D64",
    "red": "#EE3238",
    "orange": "#F25502"
  },
  "gradient": {
    "hero": "linear-gradient(180deg, #113A74 0%, #0C6FE9 50%, #30B0FC 100%)"
  },
  "font": {
    "display": { "family": "Sora", "substituteOf": "Control Compressed (Commercial Type)" },
    "body": { "family": "Sora", "substituteOf": "Control (Commercial Type)" },
    "mono": { "family": "JetBrains Mono", "substituteOf": "PP Neue Montreal" }
  },
  "fontSize": {
    "displayXl": { "px": 120, "weight": 700, "lineHeight": "95%", "tracking": "-0.03em" },
    "displayLg": { "px": 80, "weight": 700, "lineHeight": "100%" },
    "displayMd": { "px": 48, "weight": 700, "lineHeight": "105%" },
    "bodyMd": { "px": 16, "weight": 400, "lineHeight": "160%" },
    "label": { "px": 14, "weight": 700, "lineHeight": "140%" }
  },
  "radius": { "lg": "12px", "xl": "14px", "pill": "999px" },
  "spacing": { "base": "4px", "section": "80px" },
  "shadow": { "card": "0 18px 50px rgba(0,0,0,0.28)", "glow": "0 0 20px 5px rgba(255,255,255,1)" },
  "motion": { "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "durationFast": "200ms" }
}

---
version: "1.0"
name: "Air"
description: "Sistema visual de plataforma de creative operations: tema oscuro con hero de gradiente azul vibrante (#113A74 -> #30B0FC), tipografía Control Compressed (display) + Control (body) + Riccione-Serial-ExtraLight (acentos) + PP Neue Montreal, peso 700 dominante, y una paleta de acentos vivos (oro #D1B310, azul #034BFF, cyan #33B6FF). Oscuro cinematográfico con colores vibrantes y personalidad de estudio creativo."
colors:
  primary: "#034BFF"
  secondary: "#33B6FF"
  accent: "#D1B310"
  accent-soft: "#E5EDFA"
  neutral: "#1B1B1B"
  background: "#000000"
  surface: "#1B1B1B"
  surface-light: "#F5F5F5"
  surface-blue: "#E5EDFA"
  text-primary: "#FFFFFF"
  text-secondary: "#F5F5F5"
  text-muted: "#4D4D4D"
  text-on-primary: "#FFFFFF"
  text-on-light: "#221F20"
  border: "#FFFFFF20"
  border-subtle: "#FFFFFF10"
  hero-blue-dark: "#113A74"
  hero-blue: "#0C6FE9"
  hero-blue-light: "#30B0FC"
  gold: "#D1B310"
  cream: "#FFF8DC"
  purple: "#8B53D0"
  green: "#257D64"
  red: "#EE3238"
  orange: "#F25502"
  success: "#4CAF53"
  warning: "#D1B310"
  error: "#EE3238"
  info: "#034BFF"
typography:
  display-xl:
    fontFamily: "Control Compressed"
    fontSize: "120px"
    fontWeight: 700
    lineHeight: "95%"
    letterSpacing: "-0.03em"
  display-lg:
    fontFamily: "Control Compressed"
    fontSize: "80px"
    fontWeight: 700
    lineHeight: "100%"
  display-md:
    fontFamily: "Control Compressed"
    fontSize: "48px"
    fontWeight: 700
    lineHeight: "105%"
  heading:
    fontFamily: "Control"
    fontSize: "24px"
    fontWeight: 700
    lineHeight: "130%"
  body-lg:
    fontFamily: "Control"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "160%"
  body-md:
    fontFamily: "Control"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "160%"
  body-sm:
    fontFamily: "Control"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "150%"
  label:
    fontFamily: "Control"
    fontSize: "14px"
    fontWeight: 700
    lineHeight: "140%"
    letterSpacing: "0.02em"
  mono:
    fontFamily: "PP Neue Montreal"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "140%"
rounded:
  sm: "4px"
  md: "8px"
  lg: "12px"
  xl: "14px"
  2xl: "16px"
  pill: "999px"
  full: "50%"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  gap: "16px"
  section-padding: "80px"
components:
  button-primary:
    backgroundColor: "{colors.text-primary}"
    textColor: "{colors.background}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "14px 28px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    borderColor: "{colors.border}"
    rounded: "{rounded.pill}"
    padding: "14px 28px"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    rounded: "{rounded.lg}"
    padding: "24px"
---

# DESIGN.md - Air

> Sistema de diseño extraído de `https://air.inc` (sitio de marketing, junio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Valores observados del HTML + 5 CSS externos del sitio (Next.js, CSS Modules, Storyblok CMS). Estados derivados marcados con `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmósfera

Air se siente como un estudio creativo que se viste de campaña de producto. El sitio es de tema oscuro (`theme: dark` real del CSS), con un hero que es un gradiente azul vibrante completo de `#113A74` (azul oscuro profundo) a `#30B0FC` (azul cyan brillante), muestreado del hero real. Este gradiente no es un detalle: es el fondo completo del hero, una decisión art-directed que se siente como un cielo azul digital, como una campaña de producto premium que ocupa toda la pantalla.

La personalidad aparece en la tipografía commercial y los acentos vivos. Air usa **Control Compressed** (commercial, 7 ocurrencias) para display con peso 700, una grotesk condensada que se siente como la voz de un estudio de diseño premium. **Control** (commercial, 2+2 ocurrencias) cubre el body, y **Riccione-Serial-ExtraLight** (6 ocurrencias) aparece como acento editorial ligero. **PP Neue Montreal** (2 ocurrencias) se usa en contextos específicos. El peso 700 es dominante (9 ocurrencias), seguido de 900 (7) y 400 (11), creando una jerarquía de contraste fuerte.

La traducción digital debe conservar esa mezcla de estudio creativo y campaña cinematográfica: tema oscuro, gradiente azul vibrante como hero, Control Compressed para display con peso 700, acentos vivos (oro `#D1B310`, cyan `#33B6FF`, azul `#034BFF`) como gestos puntuales, y una paleta que se siente como un estudio de creative operations premium, no un SaaS genérico.

**Palabras clave de personalidad**: creative-ops, gradiente-azul, oscuro-vibrante, estudio, condensada, campaign, premium

**Densidad del layout**: cómoda (aire editorial, hero full-bleed)

**Modo preferido**: oscuro (negro con gradiente azul hero)

**Nivel de ornamentación**: medio-alto (gradiente azul hero, tipografía condensada commercial, acentos vivos, Storyblok CMS con contenido art-directed)

**Audiencia visual objetivo**: equipos creativos y de marketing que buscan una plataforma de creative operations premium, que aprecian un sistema con personalidad de estudio de diseño

---

## 2. Paleta de Colores y Roles Semánticos

La paleta real del sitio se organiza con un tema oscuro (`--bg: var(--black)`, `--fg: var(--white)`) más un gradiente azul hero y acentos vivos puntuales. El sistema usa variables CSS con RGB variants (`--fg-rgb`, `--bg-rgb`).

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Azul | `--color-primary` | `#034BFF` | Acento primary, links, CTA (`#034BFF` real, 2 ocurrencias CSS) | `#FFFFFF` |
| Cyan | `--color-secondary` | `#33B6FF` | Acento secundario, highlight (`#33B6FF` real, 2 ocurrencias CSS) | `#FFFFFF` |
| Oro | `--color-accent` | `#D1B310` | Acento cálido, premium, badge (`#D1B310` real, 2 ocurrencias CSS) | `#000000` |
| Azul medio | `--color-blue` | `#0563E9` | Variante azul (`#0563E9` real, 2 ocurrencias CSS) | `#FFFFFF` |
| Azul claro | `--color-blue-light` | `#1095ED` | Variante azul claro (`#1095ED` real, 2 ocurrencias CSS) | `#FFFFFF` |

### Gradiente hero (firma de marca)

> El hero es un gradiente azul completo que ocupa toda la pantalla. Es la firma visual de Air.

| Nombre | Hex | Posición | Uso |
|--------|-----|----------|-----|
| Azul oscuro profundo | `#113A74` | Top | Inicio del gradiente (muestreado) |
| Azul medio | `#0C6FE9` | Mid | Centro del gradiente (muestreado) |
| Azul cyan brillante | `#30B0FC` | Bottom | Final del gradiente (muestreado) |

```css
--hero-gradient: linear-gradient(180deg, #113A74 0%, #0C6FE9 50%, #30B0FC 100%);
```

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo negro | `--bg` | `#000000` | Fondo general, `--black` real (18 ocurrencias CSS) |
| Superficie oscura | `--color-surface` | `#1B1B1B` | Cards, paneles (`#1B1B1B` real, 3 ocurrencias CSS) |
| Superficie clara | `--color-surface-light` | `#F5F5F5` | Secciones claras (`#F5F5F5` real, 16 ocurrencias HTML) |
| Azul claro suave | `--color-surface-blue` | `#E5EDFA` | Fondos de énfasis (`#E5EDFA` real, 9 ocurrencias CSS) |
| Crema | `--color-cream` | `#FFF8DC` | Acento cálido suave (`#FFF8DC` real, 2 ocurrencias CSS) |
| Borde translúcido | `--color-border` | `#FFFFFF20` | Bordes sobre oscuro (alpha 12.5%) |
| Borde sutil | `--color-border-subtle` | `#FFFFFF10` | Hairlines sobre oscuro (alpha 6%) |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto blanco | `--fg` | `#FFFFFF` | Headings, body sobre oscuro (`--white` real, 44+10 ocurrencias) |
| Texto claro | `--color-text-light` | `#F5F5F5` | Variante texto claro (`#F5F5F5` real) |
| Texto oscuro | `--color-text-dark` | `#221F20` | Texto sobre superficies claras (`#221F20` real) |
| Texto muted | `--color-text-muted` | `#4D4D4D` | Metadata (`#4D4D4D` real) |
| Texto secondary dark | `--color-text-secondary-dark` | `#222` | Texto secundario sobre claro (`#222` real, 2 ocurrencias) |

### Acentos vivos (paleta de marca secundaria)

> Air usa una paleta de acentos vivos para categorías, badges y highlights. Todos son reales del CSS.

| Nombre | Hex | Uso |
|--------|-----|-----|
| Púrpura | `#8B53D0` | Categoría, badge (2 ocurrencias) |
| Verde | `#257D64` | Categoría, success (2 ocurrencias) |
| Verde claro | `#4CAF53` | Success alternativo (2 ocurrencias) |
| Rojo | `#EE3238` | Error, danger (2 ocurrencias) |
| Rojo alternativo | `#E41A2F` | Variante rojo (2 ocurrencias) |
| Naranja | `#F25502` | Categoría, highlight (2 ocurrencias) |
| Rosa | `#E5AAD8` | Categoría suave (2 ocurrencias) |
| Marrón | `#AF7757` | Categoría cálida (2 ocurrencias) |
| Lima | `#B2D08D` | Categoría suave (2 ocurrencias) |
| Azul medio | `#4C96F7` | Variante azul (2 ocurrencias) |
| Crema | `#FFF8DC` | Acento suave cálido (2 ocurrencias) |
| Teal | `#005E78` | Categoría oscura (2 ocurrencias) |

### Colores de estado

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#4CAF53` | `#FFFFFF` |
| Advertencia | `--color-warning` | `#D1B310` | `#000000` |
| Error | `--color-error` | `#EE3238` | `#FFFFFF` |
| Info | `--color-info` | `#034BFF` | `#FFFFFF` |

---

## 3. Reglas de Tipografía

```css
/* Display: Control Compressed (commercial, self-hosted, 7 ocurrencias) ->
   sustituto Google: Sora (geometrica humanista condensada con peso 700) */
--font-display: 'Sora', 'Control Compressed', Arial, Helvetica, sans-serif;

/* Body + Headings + Labels: Control (commercial, self-hosted, 2+2 ocurrencias) ->
   sustituto Google: Sora (mismo sustituto, cubre body y headings) */
--font-body: 'Sora', 'Control', Arial, Helvetica, sans-serif;

/* Acento editorial: Riccione-Serial-ExtraLight (commercial, 6 ocurrencias) ->
   sustituto Google: Fraunces (serif de display con peso 200-400, óptica variable) */
--font-serif: 'Fraunces', 'Riccione-Serial-ExtraLight', Georgia, serif;

/* Mono/Alternativa: PP Neue Montreal (commercial, 2 ocurrencias) ->
   sustituto Google: JetBrains Mono (mono geometrica) */
--font-mono: 'JetBrains Mono', 'PP Neue Montreal', monospace;
```

**Google Fonts (sustitutos):**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@200;400;500;600;700;800;900&family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;0,9..144,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

**Nota sobre sustitución**: el sitio carga cuatro fuentes commercial:
- **Control Compressed** (grotesk condensada, 7 ocurrencias): la voz display de la marca, usada para titulares con peso 700. No en Google Fonts. Es de Commercial Type.
- **Control** (grotesk, 2+2 ocurrencias): voz body, headings y labels. No en Google Fonts. Es de Commercial Type.
- **Riccione-Serial-ExtraLight** (serif ultra-light, 6 ocurrencias): acento editorial ligero. No en Google Fonts.
- **PP Neue Montreal** (sans, 2 ocurrencias): contexto específico. No en Google Fonts. Es de Pangram Pangram.

`Sora` sustituye a Control Compressed/Control: es una grotesk geometrico-humanista con pesos 200-900, masa similar, y una condensación que encaja con el tono creative-ops de Air. `Fraunces` sustituye a Riccione: es una serif de display con peso 200-400 y óptica variable.

### Escala tipográfica

> Token · px · line-height · peso · uso. Pesos reales del CSS: 200 (5), 400 (11), 500 (2), 600 (3), 700 (9, dominante display), 800 (3), 900 (7).

| Token | px equiv. | Line height | Weight | Uso |
|-------|-----------|-------------|--------|-----|
| `--f-display-xl` | 120px | 95% | 700 | Hero headline (Control Compressed) |
| `--f-display-lg` | 80px | 100% | 700 | Display secundario |
| `--f-display-md` | 48px | 105% | 700 | Titular de sección |
| `--f-heading` | 24px | 130% | 700 | Subtítulo |
| `--f-body-lg` | 18px | 160% | 400 | Intro paragraphs |
| `--f-body-md` | 16px | 160% | 400 | Body general |
| `--f-body-sm` | 14px | 150% | 400 | Body secundario |
| `--f-label` | 14px | 140% | 700 | Labels, CTAs, nav |
| `--f-mono` | 14px | 140% | 400 | Specs (PP Neue Montreal) |

### Pesos tipográficos

```css
--font-extralight: 200;  /* 5 ocurrencias, Riccione acento editorial */
--font-regular: 400;     /* 11 ocurrencias, body */
--font-medium: 500;      /* 2 ocurrencias, énfasis medio */
--font-semibold: 600;    /* 3 ocurrencias, subheadings */
--font-bold: 700;        /* 9 ocurrencias, DOMINANTE: display, headings, labels */
--font-heavy: 800;       /* 3 ocurrencias, énfasis fuerte */
--font-black: 900;       /* 7 ocurrencias, máximo display */
```

> El peso 700 es el dominante para display, headings y labels (9 ocurrencias). El peso 900 (7 ocurrencias) se usa para máximo impacto display. La jerarquía se logra por tamaño y por el contraste condensada (display) vs regular (body) vs extra-light serif (acentos editoriales).

### Letter spacing

```css
--tracking-tight: -0.03em;   /* Display xl */
--tracking-normal: 0em;      /* Body, headings */
--tracking-label: 0.02em;    /* Labels */
```

**Regla clave**: Control Compressed va en peso 700 para display, con tracking tight. La condensación de la fuente es la firma: se siente como un titular de campaña de estudio creativo, no como un SaaS. El cuerpo en Control peso 400 nunca compite con el headline condensado en peso 700; la marca gana por contraste de condensación y peso.

---

## 4. Estilos de Componentes

### Botones

**Primario (blanco pill sobre oscuro)**
```
Background: var(--fg) -> #FFFFFF
Color de texto: var(--bg) -> #000000
Padding: 14px 28px
Border-radius: 999px (pill, 6 ocurrencias CSS)
Font-family: var(--font-body) -> Control
Font-weight: 700
Font-size: 14px
Letter-spacing: 0.02em
Transicion: background-color 200ms ease, transform 200ms ease

Hover:
  Transform: translateY(-1px)
  Box-shadow: 0 0 20px 5px var(--fg) (glow blanco, real del CSS)

Disabled:
  Opacity: 0.4
  Cursor: not-allowed

Focus:
  Outline: 2px solid var(--fg)
  Outline-offset: 3px
```

> El botón primario es blanco pill sobre oscuro, con un glow blanco `0 0 20px 5px var(--fg)` en hover (real del CSS). Es la firma de interacción de Air: de la sobriedad del blanco al glow cinematográfico.

**Secundario (outline)**
```
Background: transparent
Color de texto: var(--fg) -> #FFFFFF
Border: 1px solid var(--border) -> #FFFFFF20
Border-radius: 999px
Padding: 14px 28px

Hover:
  Background: rgba(255, 255, 255, 0.06)
  Border-color: var(--fg) -> #FFFFFF
```

### Inputs de texto

```
Background: transparent
Border: 1px solid var(--border) -> #FFFFFF20
Border-radius: 12px (predominante, 23 ocurrencias CSS)
Padding: 12px 16px
Font-family: var(--font-body) -> Control
Font-size: 16px
Font-weight: 400
Color: var(--fg) -> #FFFFFF
Placeholder: var(--color-text-muted) -> #4D4D4D

Focus:
  Border-color: var(--fg) -> #FFFFFF
  Box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) (real del CSS)
  Outline: none
```

### Cards

```
Background: var(--color-surface) -> #1B1B1B
Border: 1px solid var(--border) -> #FFFFFF20
Border-radius: 12px (23 ocurrencias CSS, predominante)
Padding: 24px
Box-shadow: 0 18px 50px rgba(0,0,0,.28) (real del CSS, sombra cinematográfica)

Hover (si es clickeable):
  Box-shadow: 0 18px 40px rgba(0,0,0,.2) (real del CSS)
```

> El radio `12px` es el predominante absoluto (23 ocurrencias). La sombra `0 18px 50px rgba(0,0,0,.28)` (1 ocurrencia real) es cinematográfica: larga y suave, da una sensación de flotación teatral.

### Badges / Chips

```
Padding: 4px 12px
Border-radius: 999px (pill)
Font-family: var(--font-body) -> Control
Font-size: 12px
Font-weight: 700

Default:
  Background: rgba(255, 255, 255, 0.08)
  Color: var(--fg) -> #FFFFFF

Oro:
  Background: var(--gold) -> #D1B310
  Color: #000000

Azul:
  Background: var(--primary) -> #034BFF
  Color: #FFFFFF
```

### Navegación / Header

```
Background: transparent sobre el gradiente azul del hero
Height: 64px aprox
Padding horizontal: 24px

Logo:
  Blanco #FFFFFF, peso 700, Control Compressed

Links de nav:
  Color: rgba(255, 255, 255, 0.7)
  Font-family: var(--font-body) -> Control
  Font-size: 14px
  Font-weight: 700
  Hover: Color #FFFFFF

CTA del nav:
  Pill blanco #FFFFFF, texto negro, 14px 28px, radius 999px
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
```

> Base de 4px. El padding de sección es 80px, con 64px en franjas full-bleed.

### Contenedores

```css
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1080px;
--container-xl: 1280px;
```

### Grid

```
Sistema: columnas variables (--cols-large: 4, --cols-medium: 4)
Gutter: 16px
Margin lateral: 24px en desktop, 16px en tablet, 12px en mobile
Patrones base: hero full-bleed con gradiente azul y titular display condensado,
grid de 2-3 columnas para features (Organize, Approve, Multiply), secciones
de storytelling con triptych, y franjas de producto con captura del dashboard.
```

### Filosofía de espaciado

Air necesita aire para que la tipografía Control Compressed respire y para que el gradiente azul del hero tenga presencia cinematográfica full-bleed. No es una marca de dashboards densos: el espacio sirve para que cada titular condensado en peso 700 se lea como una decisión de campaña de estudio creativo. Alterna secciones oscuras con secciones claras `#F5F5F5` y franjas azul claro `#E5EDFA`; ese cambio de ritmo es parte del lenguaje, no solo decoración.

---

## 6. Profundidad y Elevación

La marca es **flat-first con sombras cinematográficas**. Su sensación premium viene del gradiente azul hero, la tipografía condensada, y sombras largas y suaves que dan flotación teatral a las cards.

### Sistema de sombras

```css
--shadow-none: none;
--shadow-card: 0 18px 50px rgba(0,0,0,.28);    /* real del CSS, cinematográfica */
--shadow-hover: 0 18px 40px rgba(0,0,0,.2);     /* real del CSS */
--shadow-glow: 0 0 20px 5px var(--fg);           /* real del CSS, glow blanco */
--shadow-focus: 0 0 0 3px rgba(var(--fg-rgb),.14); /* real del CSS */
```

> Las sombras son cinematográficas: `0 18px 50px rgba(0,0,0,.28)` tiene un blur de 50px que da una sensación de flotación teatral. El glow `0 0 20px 5px var(--fg)` es un halo blanco que aparece en hover de botones primarios.

### Niveles de elevación

| Nivel | Token de sombra | Uso |
|-------|----------------|-----|
| 0 - Base | `--shadow-none` | Secciones, gradiente hero |
| 1 - Card | `--shadow-card` | Cards (0 18px 50px, cinematográfica) |
| 2 - Hover | `--shadow-hover` | Cards en hover |
| 3 - Glow | `--shadow-glow` | Botón primario hover (glow blanco) |
| 4 - Focus | `--shadow-focus` | Focus rings (3px ring) |

### Radios de borde

```css
--radius-none: 0;
--radius-sm: 4px;     /* elementos pequeños (7 ocurrencias) */
--radius-md: 8px;     /* elementos medianos (10 ocurrencias) */
--radius-lg: 12px;    /* cards, inputs (23 ocurrencias, PREDOMINANTE) */
--radius-xl: 14px;    /* elementos grandes (10 ocurrencias) */
--radius-2xl: 16px;   /* hero blocks (6 ocurrencias) */
--radius-pill: 999px; /* CTA, badges (6 ocurrencias) */
--radius-full: 50%;   /* circulares (11 ocurrencias) */
```

> El radio `12px` es el predominante absoluto (23 ocurrencias). Para CTA, pill `999px`. Para circulares, `50%` (11 ocurrencias). El sistema es generoso y variado: amigable pero preciso.

---

## 7. Lo que Sí y lo que No

### Sí hacer

1. **Usa el gradiente azul `#113A74 -> #30B0FC` como hero full-bleed** - es la firma visual de Air; un cielo azul digital que ocupa toda la pantalla.
2. **Mantén Control Compressed para display con peso 700** - la condensación es la firma tipográfica; se siente como un titular de campaña de estudio.
3. **Usa el tema oscuro `#000000` con texto blanco `#FFFFFF`** - el contraste negro-blanco deja que el gradiente azul y los acentos vivos sean los gestos.
4. **Combina Control Compressed (display) con Control (body)** - el contraste condensada vs regular es la jerarquía, no el peso.
5. **Usa acentos vivos (oro `#D1B310`, cyan `#33B6FF`, azul `#034BFF`) como gestos puntuales** - badges, highlights, categorías.
6. **Usa pills `999px` para CTA y `12px` para cards** - la combinación de pill + preciso es el tono creative-ops.

### No hacer

1. **No uses el gradiente azul como fondo de todo el sitio** - es un gesto de hero full-bleed; bañar todo el sitio lo vuelve agresivo.
2. **No uses tipografía no-condensada para display** - la marca es Control Compressed; una sans regular en el headline borra la personalidad de estudio.
3. **No uses peso 400 para display** - el peso 700 es la firma; 400 se siente demasiado ligero para el tono de campaña.
4. **No uses sombras material con blur corto** - la identidad usa sombras cinematográficas (50px blur), no sombras tight.
5. **No introduzcas colores fuera de la paleta de acentos vivos** - la paleta es azul gradiente + acentos específicos (oro, cyan, púrpura, verde, rojo, naranja).
6. **No uses el tema claro como default** - el sitio es dark-first; el claro (`#F5F5F5`) es solo para secciones específicas, no el canvas general.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
/* Mobile first — Next.js, CSS Modules */
/* sm: */ @media (min-width: 640px) { }
/* md: */ @media (min-width: 768px) { }
/* lg: */ @media (min-width: 1024px) { }
/* xl: */ @media (min-width: 1280px) { }
```

### Cambios por breakpoint

**Mobile (< 640px)**
- Navegación: logo + menú hamburguesa
- Grid: 1 columna, --cols-small: 0
- Display H1: reducido (aprox. 56px, no 120px)
- Padding de contenedor: 16px
- Gradiente hero: conservado pero más compacto

**Tablet (640px - 1024px)**
- Navegación: logo + links + CTA
- Grid: 2 columnas, --cols-medium: 4
- Display H1: 80px aprox.
- Padding de contenedor: 24px

**Desktop (> 1024px)**
- Navegación: full nav visible
- Grid: 3-4 columnas, --cols-large: 4
- Display H1: 120px (display-xl), condensada
- Gradiente hero: full-bleed completo
- Sección padding: 80px vertical

### Touch targets (mobile)

- Botones mínimo: 44x44px (el pill CTA con 14px 28px + 14px font cumple)
- Links de navegación: altura mínima 44px
- Inputs: altura mínima 44px

### Filosofía responsive

Mobile-first con ambición de campaña. En pequeño formato la marca debe seguir sintiéndose como un estudio creativo premium, no como un sitio recortado. Prioriza el gradiente azul hero (aunque más compacto), un titular Control Compressed contundente (aunque reducido), y un CTA pill blanco claro por viewport.

---

## 9. Guía de Prompts para Agentes

### Prompt de inicialización de sesión

```text
Estás trabajando con el sistema de diseño de Air.

PALETA: Tema oscuro #000000 con texto blanco #FFFFFF. Hero con gradiente azul
vibrante #113A74 -> #0C6FE9 -> #30B0FC (full-bleed). Acentos vivos: oro #D1B310,
cyan #33B6FF, azul #034BFF. Superficie clara #F5F5F5 para secciones alternas.
TIPOGRAFÍA: Display en Sora (sustituto de Control Compressed) peso 700, condensada.
Body en Sora peso 400. Labels en peso 700. Acento editorial en Fraunces (sustituto
de Riccione-Serial-ExtraLight) peso 200-400.
ESTILO: Creative ops, oscuro vibrante, gradiente azul cinematográfico.
Sombras cinematográficas (0 18px 50px). Pills 999px para CTA, 12px para cards.
TOKENS: Usa siempre variables CSS; no hardcodees colores fuera del sistema.
MODO: Oscuro (negro con gradiente azul hero).
```

### Prompt: Crear nueva pantalla

```text
Crea una pantalla de [FUNCIONALIDAD] para Air.

Requisitos:
- Debe sentirse como un estudio creativo premium, no como un SaaS genérico
- Usa fondo negro #000000 con texto blanco #FFFFFF
- Gradiente azul #113A74 -> #30B0FC solo en hero, full-bleed
- Titulares en Sora peso 700 (sustituto de Control Compressed), condensada
- Acentos vivos: oro #D1B310, cyan #33B6FF, azul #034BFF como gestos puntuales
- Pills 999px para CTA, 12px para cards
- Sombras cinematográficas (0 18px 50px rgba(0,0,0,.28))
- Responsive, con CTA principal blanco pill con glow en hover
```

### Prompt: Añadir componente al UI kit

```text
Añade un componente de [TIPO] al sistema de Air.

Debe:
- Usar solo tokens del DESIGN.md de Air
- Mantener radios de 999px para CTA, 12px para cards, 14px para elementos grandes
- Tener versión default, hover (con glow), active, focus y disabled
- Sentirse como estudio creativo premium, no corporativo ni frío
- Sombras cinematográficas (0 18px 50px), glow blanco en hover de primario
- Tipografía: Sora 700 para títulos/labels, 400 para body
```

### Prompt: Revisión de consistencia

```text
Revisa esta interfaz y detecta qué no sigue el sistema de Air.

Verifica:
1. Si el tema es oscuro #000000 con texto blanco (no tema claro por defecto)
2. Si los titulares display están en peso 700 (no 400 ni 500)
3. Si el gradiente azul aparece solo en hero (no como baño)
4. Si los CTA son pills 999px (no rectángulos)
5. Si las sombras son cinematográficas (50px blur, no tight)
6. Si los acentos vivos (oro, cyan, azul) se usan con intención
```

### Prompt: Variante de campaña

```text
Genera una variante [feature / producto / caso] para Air manteniendo el sistema base.

Conserva:
- Negro #000000 como canvas
- Texto blanco #FFFFFF
- Sora peso 700 para display
- Gradiente azul en hero

Puedes variar:
- El gradiente del hero (azul -> púrpura, azul -> cyan, azul -> teal)
- Los acentos vivos entre oro #D1B310, cyan #33B6FF, púrpura #8B53D0
- El bloque visual de producto (dashboard, library, board)
```

---

## 10. Movimiento (Motion)

Air usa motion cinematográfico y controlado, consistente con el tono de estudio creativo. Las transiciones son suaves (200ms) para hover, con glows y sombras cinematográficas. Next.js con Lenis (`data-lenis="true"` real del HTML) para smooth scroll.

**Nivel de motion**: cinematográfico

**Duraciones**: 200ms (hover, transiciones de color), 400ms (transiciones medias), 800ms (scroll reveal), 900ms (entrada orquestada del hero), 8000ms (carousel delay, `--delay: 8000ms` real), 26s (ken-burns del hero)

**Easings**: `ease` (transiciones generales), `cubic-bezier(0.16, 1, 0.3, 1)` (para reveals escalonados)

**Propiedades animadas**: opacity, transform (translateY, scale), background-color, color, border-color, box-shadow (glow)

**Patrones de motion**:
- Entrada escalonada del hero con `animation-delay`
- Scroll reveal por sección (fade-up 26px, 800ms) con Lenis smooth scroll
- Ken-burns lento en la captura del hero (26s, alternate, scale 1 -> 1.07)
- Transiciones de 200ms en hover de botones (glow blanco)
- Carousel con delay 8000ms (`--delay` real del CSS)
- Micro-lift en hover de botones (translateY -1px)

```css
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
--duration-fast: 200ms;
--duration-base: 400ms;
--duration-slow: 800ms;
--duration-carousel: 8000ms;
--duration-kenburns: 26s;
```

> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)` y reduce todos los gestos a cambios de color sin desplazamiento. El ken-burns del hero, el carousel y los reveals escalonados se desactivan; el contenido aparece estático.

---

## Anexo: Stack técnico detectado

- **Plataforma / builder**: Next.js (App Router, `data-precedence="next"` y chunks `_next/static/` visibles), desplegado en Vercel
- **CMS**: Storyblok (`a.storyblok.com` para imágenes y contenido, `f/338771/` namespace visible)
- **Framework CSS**: CSS Modules con nombres hashed (`Header_root`, `Grid_root`, `StorytellingTriptych_root`, `TabBar_root`), Tailwind v4 para utils (`--tw-*`), variables CSS con RGB variants (`--fg-rgb`, `--bg-rgb`)
- **Smooth scroll**: Lenis (`data-lenis="true"` real del HTML)
- **Tipografía**: cuatro fuentes commercial:
  - **Control Compressed** (grotesk condensada, 7 ocurrencias): display de Commercial Type. No en Google Fonts.
  - **Control** (grotesk, 2+2 ocurrencias): body de Commercial Type. No en Google Fonts.
  - **Riccione-Serial-ExtraLight** (serif ultra-light, 6 ocurrencias): acento editorial. No en Google Fonts.
  - **PP Neue Montreal** (sans, 2 ocurrencias): contexto específico de Pangram Pangram. No en Google Fonts.
- **Animación**: CSS-first + Lenis smooth scroll. No se detectaron librerías de motion pesadas (GSAP, Framer).
- **3D / WebGL**: no detectado.
- **CDN / assets**: `a.storyblok.com` para imágenes (formato webp con filters), `/_next/static/` para CSS/JS
- **Comportamiento**: sitio de marketing de plataforma de creative operations, estructura con hero full-bleed gradiente azul, grid de features (Organize, Approve, Multiply), storytelling triptych, y sección de latest news