Mercury

:root {
  /* Color — canvas tibio + índigo magic + neutros */
  --color-canvas: #FBFCFD;        /* --background-default */
  --color-canvas-secondary: #F4F5F9;
  --color-ink: #272735;           /* --text-default */
  --color-ink-soft: #535461;      /* --text-subdued */
  --color-muted: #70707D;
  --color-primary: #5266EB;       /* --surface-magic */
  --color-primary-hover: #4354C8;
  --color-primary-active: #3442A6;
  --color-secondary: #D03275;     /* --text-error */
  --color-accent: #9CB4E8;
  --color-accent-soft: #EDECFB;
  --color-hero-dark: #28253B;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-border: #C3C3CC;        /* --border-subdued */
  --color-border-emphasized: #272735;
  --color-on-primary: #FFFFFF;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Sora', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Scale — pesos reales (serif siempre 400) */
  --f-display-lg: 400 72px/105% var(--font-display);
  --f-display-md: 400 56px/110% var(--font-display);
  --f-heading-lg: 400 40px/115% var(--font-display);
  --f-heading-md: 400 32px/120% var(--font-display);
  --f-body-lg: 400 18px/150% var(--font-body);
  --f-body-md: 400 16px/150% var(--font-body);
  --f-label: 500 14px/140% var(--font-body);

  /* Radius + shadow */
  --radius-md: 0.375rem;   /* 6px */
  --radius-xl: 0.75rem;    /* 12px, CTA + inputs */
  --radius-2xl: 1rem;      /* 16px, cards */
  --radius-3xl: 1.5rem;    /* 24px, hero blocks */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.04);

  /* Spacing — base 4px */
  --space-4: 4px; --space-8: 8px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-56: 56px;
  --space-72: 72px; --space-80: 80px; --space-96: 96px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms; --duration-base: 175ms; --duration-slow: 300ms;
}

@theme {
  /* Color */
  --color-canvas: #FBFCFD;
  --color-canvas-secondary: #F4F5F9;
  --color-ink: #272735;
  --color-ink-soft: #535461;
  --color-muted: #70707D;
  --color-primary: #5266EB;
  --color-primary-hover: #4354C8;
  --color-primary-active: #3442A6;
  --color-secondary: #D03275;
  --color-accent: #9CB4E8;
  --color-accent-soft: #EDECFB;
  --color-hero-dark: #28253B;
  --color-surface: #FFFFFF;
  --color-border: #C3C3CC;
  --color-on-primary: #FFFFFF;

  /* Font families */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Sora', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Font sizes (rem) */
  --text-display-lg: 4.5rem;   /* 72px */
  --text-display-md: 3.5rem;   /* 56px */
  --text-heading-lg: 2.5rem;   /* 40px */
  --text-heading-md: 2rem;     /* 32px */
  --text-body-lg: 1.125rem;    /* 18px */
  --text-body: 1rem;           /* 16px */
  --text-label: 0.875rem;      /* 14px */

  /* Font weights (serif siempre 400) */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Radius */
  --radius-md: 0.375rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;

  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.04);

  /* Spacing */
  --spacing-4: 4px; --spacing-8: 8px; --spacing-16: 16px;
  --spacing-24: 24px; --spacing-32: 32px; --spacing-56: 56px;
  --spacing-72: 72px; --spacing-80: 80px; --spacing-96: 96px;

  /* Easing */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
}

{
  "color": {
    "canvas": "#FBFCFD",
    "canvasSecondary": "#F4F5F9",
    "ink": "#272735",
    "inkSoft": "#535461",
    "muted": "#70707D",
    "primary": "#5266EB",
    "primaryHover": "#4354C8",
    "primaryActive": "#3442A6",
    "secondary": "#D03275",
    "accent": "#9CB4E8",
    "accentSoft": "#EDECFB",
    "heroDark": "#28253B",
    "surface": "#FFFFFF",
    "surfaceElevated": "#FFFFFF",
    "surfaceInverted": "#1E1E2A",
    "border": "#C3C3CC",
    "borderEmphasized": "#272735",
    "onPrimary": "#FFFFFF"
  },
  "font": {
    "display": { "family": "Fraunces", "substituteOf": "Tiempos Headline/Tiempos Fine (Klim)" },
    "body": { "family": "Sora", "substituteOf": "Arcadia (Klim)" },
    "mono": { "family": "IBM Plex Mono", "real": true }
  },
  "fontSize": {
    "displayLg": { "rem": "4.5rem", "px": 72, "weight": 400, "lineHeight": "105%", "tracking": "-0.02em" },
    "displayMd": { "rem": "3.5rem", "px": 56, "weight": 400, "lineHeight": "110%", "tracking": "-0.02em" },
    "headingLg": { "rem": "2.5rem", "px": 40, "weight": 400, "lineHeight": "115%", "tracking": "-0.01em" },
    "headingMd": { "rem": "2rem", "px": 32, "weight": 400, "lineHeight": "120%", "tracking": "-0.01em" },
    "headingSm": { "rem": "1.5rem", "px": 24, "weight": 400, "lineHeight": "130%" },
    "bodyLg": { "rem": "1.125rem", "px": 18, "weight": 400, "lineHeight": "150%" },
    "bodyMd": { "rem": "1rem", "px": 16, "weight": 400, "lineHeight": "150%" },
    "label": { "rem": "0.875rem", "px": 14, "weight": 500, "lineHeight": "140%", "tracking": "0.01em" }
  },
  "radius": { "sm": "0.25rem", "md": "0.375rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "3xl": "1.5rem", "4xl": "2rem", "5xl": "2.5rem" },
  "spacing": { "base": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "32px", "2xl": "56px", "3xl": "80px", "4xl": "96px" },
  "shadow": {
    "none": "none",
    "xs": "0 1px 2px 0 rgba(0,0,0,0.04)",
    "sm": "0 1px 2px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.04)",
    "md": "0 4px 12px 0 rgba(0,0,0,0.06)"
  },
  "motion": {
    "ease": "cubic-bezier(0.4, 0, 0.2, 1)",
    "durationFast": "150ms",
    "durationBase": "175ms",
    "durationSlow": "300ms"
  }
}

---
version: "1.0"
name: "Mercury"
description: "Sistema visual de banking para startups: canvas casi-blanco tibio, acento índigo 'magic' (#5266eb), tipografía serif Tiempos (Klim) para display + grotesk Arcadia para UI, hero oscuro cinematográfico con producto fotográfico. Editorial y fintech a la vez, con calor controlado."
colors:
  primary: "#5266EB"
  primary-hover: "#4354C8"
  primary-active: "#3442A6"
  secondary: "#D03275"
  accent: "#9CB4E8"
  accent-soft: "#EDECFB"
  neutral: "#535461"
  background: "#FBFCFD"
  surface: "#FFFFFF"
  surface-elevated: "#FFFFFF"
  surface-secondary: "#F4F5F9"
  surface-magic: "#5266EB"
  surface-frosted: "#7073931A"
  surface-inverted: "#1E1E2A"
  surface-hero-dark: "#28253B"
  text-primary: "#5266EB"
  text-default: "#272735"
  text-emphasized: "#1E1E2A"
  text-subdued: "#535461"
  text-muted: "#70707D"
  text-on-primary: "#FFFFFF"
  text-inverted: "#EDEDF3"
  border-default: "#535461"
  border-subdued: "#C3C3CC"
  border-emphasized: "#272735"
  border-primary: "#5266EB"
  border-focus: "#5266EB"
  border-input: "#70739338"
  border-frosted: "#70739338"
  success: "#1F2D24"
  success-bg: "#E7F1EA"
  warning: "#38231A"
  warning-bg: "#FAEAE3"
  error: "#D03275"
  error-bg: "#FCEAF0"
  info: "#5266EB"
  info-bg: "#EDECFB"
typography:
  display-lg:
    fontFamily: "Tiempos Headline"
    fontSize: "72px"
    fontWeight: 400
    lineHeight: "105%"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: "Tiempos Headline"
    fontSize: "56px"
    fontWeight: 400
    lineHeight: "110%"
    letterSpacing: "-0.02em"
  heading-lg:
    fontFamily: "Tiempos Fine"
    fontSize: "40px"
    fontWeight: 400
    lineHeight: "115%"
    letterSpacing: "-0.01em"
  heading-md:
    fontFamily: "Tiempos Fine"
    fontSize: "32px"
    fontWeight: 400
    lineHeight: "120%"
    letterSpacing: "-0.01em"
  heading-sm:
    fontFamily: "Tiempos Fine"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "130%"
  body-lg:
    fontFamily: "Arcadia"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "150%"
  body-md:
    fontFamily: "Arcadia"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "150%"
  body-sm:
    fontFamily: "Arcadia"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "145%"
  label-md:
    fontFamily: "Arcadia"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "140%"
    letterSpacing: "0.01em"
  mono:
    fontFamily: "IBM Plex Mono"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "140%"
rounded:
  sm: "0.25rem"
  md: "0.375rem"
  lg: "0.5rem"
  xl: "0.75rem"
  2xl: "1rem"
  3xl: "1.5rem"
  4xl: "2rem"
  5xl: "2.5rem"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "56px"
  3xl: "80px"
  4xl: "96px"
  5xl: "128px"
  gap: "16px"
  section-padding: "80px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    padding: "12px 20px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.text-default}"
    borderColor: "{colors.border-emphasized}"
    rounded: "{rounded.xl}"
    padding: "12px 20px"
  button-magic:
    backgroundColor: "{colors.surface-magic}"
    textColor: "{colors.text-on-primary}"
    rounded: "{rounded.xl}"
    padding: "12px 20px"
  card:
    backgroundColor: "{colors.surface-elevated}"
    borderColor: "{colors.border-subdued}"
    rounded: "{rounded.2xl}"
    padding: "24px"
---

# DESIGN.md - Mercury

> Sistema de diseño extraído de `https://mercury.com` (sitio de marketing, junio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Valores observados del HTML + CSS del sitio (variables CSS nombradas en `:root`, escalas tipográficas, recetas de componentes reales en Tailwind v4). Estados no expuestos en el marketing se derivan de la familia real, marcados con `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmósfera

Mercury se siente como un banco que decidió vestirse de revista. El canvas no es blanco puro: es un casi-blanco tibio con un dejo índigo (`#FBFCFD`, `--background-default` real del CSS) que le quita la frialdad clínica del fintech genérico. Sobre ese fondo cae una serif de Klim Type Foundry (Tiempos) para todo lo display y editorial: titulares con peso 400, jerarquía por tamaño y por itálica, no por bold. Es la decisión más fuerte de la marca: banking serio sin volverse corporativo, cercano a una publicación de diseño más que a un dashboard.

La personalidad aparece en el contraste entre el hero oscuro cinematográfico (índigo profundo `#28253B` con producto fotográfico cálido) y el cuerpo del sitio, que es luminoso y ventilado. El acento índigo `#5266EB` (llamado "magic" en las variables del CSS, `--surface-magic`) organiza toda la interacción: CTA, links, focus rings, badges. Un rosa magenta `#D03275` (`--text-error`, `--icon-error`) aparece solo en estados de error y acentos puntuales. El sistema tiene variantes de tema (`.neutral-theme`, `.purple-theme`) pero el neutral es el dominante del marketing.

La traducción digital debe conservar esa mezcla de editorial serif y fintech preciso: titulares en Tiempos con peso 400, body en Arcadia (grotesk humanista de Klim), mucho aire entre secciones, hero oscuro con producto, y acento índigo como gesto único de interacción. Cuando el sistema se ve bien, parece el cruce entre una revista de negocios, un producto SaaS premium y un banco que se atreve a tener personalidad tipográfica.

**Palabras clave de personalidad**: editorial, serif-led, fintech, índigo, cinematográfico, ventilado, preciso, cálido

**Densidad del layout**: cómoda (mucho aire entre bloques, ritmo editorial)

**Modo preferido**: claro (con hero oscuro cinematográfico)

**Nivel de ornamentación**: medio (tipografía serif protagonista, hero fotográfico, pero UI limpio y sin decoración superficial)

**Audiencia visual objetivo**: founders, startups y pequeñas empresas que quieren banking moderno sin estética de banco tradicional

---

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

La paleta real del sitio se organiza en cuatro gestos: un casi-blanco tibio como canvas, un índigo "magic" como acento único de interacción, una familia de neutros tibios (`#272735`, `#535461`, `#C3C3CC`) que sostienen texto y bordes, y un hero oscuro índigo-violeta (`#28253B`) que aparece solo en la parte superior del hero. El rosa `#D03275` es el error real del sistema (`--text-error`, `--icon-error`, `--border-error`).

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Índigo magic | `--color-primary` | `#5266EB` | CTA principal, links, focus, badges, `--surface-magic` real | `#FFFFFF` |
| Índigo hover | `--color-primary-hover` | `#4354C8` | Hover del CTA y elementos mágicos (`--surface-magic-hover` real) | `#FFFFFF` |
| Índigo activo | `--color-primary-active` | `#3442A6` | Pressed state (`--surface-magic-active` real) | `#FFFFFF` |
| Rosa error | `--color-secondary` | `#D03275` | Error, alertas, acentos puntuales (`--text-error` real) | `#FFFFFF` |
| Índigo claro | `--color-accent` | `#9CB4E8` | Acento suave, badges, ilustraciones (`--accent` real) | `#1E1E2A` |
| Lavanda tibia | `--color-accent-soft` | `#EDECFB` | Fondos de énfasis suaves, hover de superficies (`--accent-soft` real) | `#1E1E2A` |
| Hero oscuro | `--color-surface-hero-dark` | `#28253B` | Fondo del hero cinematográfico, nav superior oscura | `#EDEDF3` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo base | `--color-bg` | `#FBFCFD` | Fondo general del sitio, `--background-default` real |
| Fondo secundario | `--color-bg-secondary` | `#F4F5F9` | Secciones alternas, `--background-secondary` real |
| Superficie elevada | `--color-surface-elevated` | `#FFFFFF` | Cards, modales, `--surface-elevated` real |
| Superficie input | `--color-surface-input` | `#FBFCFD` | Inputs, `--surface-input` real |
| Superficie default | `--color-surface-default` | `#EDEDF3` | Paneles neutros, `--surface-default` real |
| Superficie mágica | `--color-surface-magic` | `#5266EB` | CTA sólido, badges primarios, `--surface-magic` real |
| Superficie frosted | `--color-surface-frosted` | `#7073931A` | Glassmorphism sutil, `--surface-frosted` real |
| Superficie invertida | `--color-surface-inverted` | `#1E1E2A` | Modo oscuro, footer, `--surface-inverted` real |
| Borde default | `--color-border` | `#535461` | Bordes tibios, `--border-default` real |
| Borde sutil | `--color-border-subtle` | `#C3C3CC` | Hairlines, `--border-subdued` real |
| Borde énfasis | `--color-border-emphasized` | `#272735` | Bordes fuertes, `--border-emphasized` real |
| Borde input | `--color-border-input` | `#70739338` | Bordes de input con alpha, `--border-input` real |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto default | `--color-text` | `#272735` | Body, headings, `--text-default` real |
| Texto emphasized | `--color-text-emphasized` | `#1E1E2A` | Titulares fuertes, `--text-emphasized` real |
| Texto subdued | `--color-text-subdued` | `#535461` | Descripciones, captions, `--text-subdued` real |
| Texto muted | `--color-text-muted` | `#70707D` | Metadata, placeholders, `--text-disabled` real |
| Texto primary | `--color-text-primary` | `#5266EB` | Links, texto sobre acento, `--text-primary` real |
| Texto on-primary | `--color-text-on-primary` | `#FFFFFF` | Texto sobre índigo mágico, `--text-on-primary` real |
| Texto invertido | `--color-text-inverted` | `#EDEDF3` | Texto sobre hero oscuro, `--text-default-inverted` real |

### Colores de estado

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#1F2D24` | `#E7F1EA` |
| Éxito (bg) | `--color-success-bg` | `#E7F1EA` | `#1F2D24` |
| Advertencia | `--color-warning` | `#38231A` | `#FAEAE3` |
| Advertencia (bg) | `--color-warning-bg` | `#FAEAE3` | `#38231A` |
| Error | `--color-error` | `#D03275` | `#FFFFFF` |
| Error (bg) | `--color-error-bg` | `#FCEAF0` | `#D03275` |
| Info | `--color-info` | `#5266EB` | `#FFFFFF` |
| Info (bg) | `--color-info-bg` | `#EDECFB` | `#1E1E2A` |

> Los colores de estado success/warning son derivaciones de las familias tibias real observadas en el CSS (`#E7F1EA`, `#FAEAE3` aparecen como fondos tibios en bloques de producto). Error e info son reales del sistema (`--text-error`, `--surface-magic`).

---

## 3. Reglas de Tipografía

```css
/* Display + Headings: Tiempos / Tiempos Fine / Tiempos Headline (Klim, commercial) ->
   sustituto Google: Fraunces (serif de display con peso 400, óptica suave, itálica) */
--font-display: 'Fraunces', 'Tiempos Headline', Georgia, serif;
--font-heading: 'Fraunces', 'Tiempos Fine', Georgia, serif;

/* Body + UI: Arcadia (Klim, grotesk humanista, commercial) ->
   sustituto Google: Söhne no está; la opción más cercana con humanismo controlado es
   Geist (Vercel) o Söhne-ish: usamos Söhne no disponible, substituto: Inter Tight
   como sans humanista cercana, pero por AI-slop policy y fidelidad, usamos
   "Söhne" -> sustituto Google: "Sora" (geometrica humanista, no AI-slop) */
--font-body: 'Sora', 'Arcadia', system-ui, sans-serif;

/* Mono: IBM Plex Mono (fuente REAL del sitio, var(--font-ibm-plex-mono)) */
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, 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=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=IBM+Plex+Mono:wght@400;500&family=Sora:wght@300;400;500;600;700&display=swap" rel="stylesheet">
```

**Nota sobre sustitución**: el sitio carga tres familias custom self-hosted desde `cdn.mercury.com` (woff2 preload):
- **Tiempos Headline / Tiempos Fine / Tiempos** (Klim Type Foundry, commercial): serif para todo lo display y editorial. Es la firma tipográfica de la marca.
- **Arcadia / ArcadiaDisplay** (Klim, commercial): grotesk humanista para UI, body y labels.
- **IBM Plex Mono** para mono (real, disponible en Google Fonts).

`Fraunces` es el sustituto operativo de Tiempos en Google Fonts: es una serif de display con peso 400 suave, óptica variable, itálica expresiva, y un humanismo que encaja con el tono editorial de Mercury. `Sora` sustituye a Arcadia: es una grotesk geometrico-humanista con pesos 300-700, no está en la lista AI-slop, y su leve calidez moderna encaja con el casi-blanco tibio del canvas. `IBM Plex Mono` se conserva por fidelidad (es real del sitio).

### Escala tipográfica

> Token · rem · px · line-height · peso · tracking · uso. Pesos reales observados: Tiempos solo en 400, Arcadia en 400/500.

| Token | rem | px equiv. | Line height | Weight | Tracking | Uso |
|-------|-----|-----------|-------------|--------|----------|-----|
| `--f-display-lg` | 4.5rem | 72px | 105% | 400 | -0.02em | Hero headline (Tiempos Headline) |
| `--f-display-md` | 3.5rem | 56px | 110% | 400 | -0.02em | Display secundario |
| `--f-heading-lg` | 2.5rem | 40px | 115% | 400 | -0.01em | Titular de sección (Tiempos Fine) |
| `--f-heading-md` | 2rem | 32px | 120% | 400 | -0.01em | Subtítulo de bloque |
| `--f-heading-sm` | 1.5rem | 24px | 130% | 400 | 0em | Título de card |
| `--f-body-lg` | 1.125rem | 18px | 150% | 400 | 0em | Intro paragraphs (Arcadia) |
| `--f-body-md` | 1rem | 16px | 150% | 400 | 0em | Body general (Arcadia) |
| `--f-body-sm` | 0.875rem | 14px | 145% | 400 | 0em | Body secundario |
| `--f-label-md` | 0.875rem | 14px | 140% | 500 | 0.01em | Labels, CTAs, nav (Arcadia 500) |
| `--f-mono` | 0.8125rem | 13px | 140% | 400 | 0em | Datos, specs (IBM Plex Mono) |

### Pesos tipográficos

```css
--font-normal: 400;     /* Tiempos (todas las serif), Arcadia body */
--font-medium: 500;     /* Arcadia labels, CTAs, nav */
--font-semibold: 600;   /* Énfasis medio (derivado) */
--font-bold: 700;       /* Raro en serif; uso en badges y micro-énfasis */
```

### Letter spacing

```css
--tracking-tight: -0.02em;   /* Display serif */
--tracking-snug: -0.01em;    /* Headings serif */
--tracking-normal: 0em;      /* Body grotesk */
--tracking-wide: 0.01em;     /* Labels, nav */
```

**Regla clave**: las serif (Tiempos) siempre van en peso 400, nunca en bold. La jerarquía se logra cambiando tamaño y usando itálica, no subiendo peso. El body en Arcadia es 400; solo labels y CTAs suben a 500. Esta restricción es la firma editorial de Mercury: banking sin gritar.

---

## 4. Estilos de Componentes

### Botones

**Primario (índigo magic)**
```
Background: var(--color-primary) -> #5266EB
Color de texto: var(--color-text-on-primary) -> #FFFFFF
Padding: 12px 20px
Border-radius: var(--radius-xl) -> 0.75rem (12px)
Font-family: var(--font-body) -> Arcadia
Font-weight: 500
Font-size: 14px
Letter-spacing: 0.01em
Transicion: background-color 150ms cubic-bezier(.4,0,.2,1), transform 150ms

Hover:
  Background: var(--color-primary-hover) -> #4354C8
  Transform: translateY(-1px)

Active/Pressed:
  Background: var(--color-primary-active) -> #3442A6
  Transform: translateY(0)

Disabled:
  Background: var(--color-primary)
  Opacity: 0.4
  Cursor: not-allowed

Focus:
  Outline: 2px solid var(--border-focus) -> #5266EB
  Outline-offset: 2px
```

> El radio del CTA es `0.75rem` (12px), confirmado por `rounded-xl` en las clases Tailwind del sitio. No es pill: es un rectángulo suave, más editorial que tech.

**Secundario (outline)**
```
Background: transparent
Color de texto: var(--color-text-default) -> #272735
Border: 1px solid var(--color-border-emphasized) -> #272735
Border-radius: var(--radius-xl) -> 12px
Padding: 12px 20px

Hover:
  Background: rgba(39, 39, 53, 0.06)
  Border-color: var(--color-text-emphasized) -> #1E1E2A
```

**Ghost / Texto**
```
Background: transparent
Color: var(--color-text-default) -> #272735
Border: none
Padding: 8px 12px
Border-radius: var(--radius-md) -> 6px

Hover:
  Color: var(--color-text-primary) -> #5266EB
```

**Destructivo** (derivado para completar el sistema)
```
Background: var(--color-error) -> #D03275
Color: #FFFFFF
Border-radius: var(--radius-xl) -> 12px
Padding: 12px 20px
```

### Inputs de texto

```
Background: var(--color-surface-input) -> #FBFCFD
Border: 1px solid var(--color-border-input) -> #70739338 (alpha 0.22)
Border-radius: var(--radius-xl) -> 12px
Padding: 12px 16px
Font-family: var(--font-body) -> Arcadia
Font-size: 15px
Color: var(--color-text-default) -> #272735
Placeholder: var(--color-text-muted) -> #70707D

Hover:
  Background: var(--color-surface-input-hover) -> #FFFFFF
  Border-color: #70739359

Focus:
  Border-color: var(--border-focus) -> #5266EB
  Box-shadow: 0 0 0 3px rgba(82, 102, 235, 0.18)
  Outline: none

Error:
  Border-color: var(--color-error) -> #D03275
  Box-shadow: 0 0 0 3px rgba(208, 50, 117, 0.14)

Disabled:
  Background: var(--color-surface-input-disabled) -> #EDEDF3
  Opacity: 0.6
```

### Cards

```
Background: var(--color-surface-elevated) -> #FFFFFF
Border: 1px solid var(--color-border-subtle) -> #C3C3CC
Border-radius: var(--radius-2xl) -> 1rem (16px)
Padding: 24px
Box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04)

Hover (si es clickeable):
  Border-color: var(--color-border-emphasized) -> #272735
  Box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06)
```

> El radio de cards es `1rem` (16px), `rounded-2xl` en Tailwind v4 del sitio. Es el radio más frecuente para superficies grandes.

### Badges / Chips

```
Padding: 4px 10px
Border-radius: var(--radius-md) -> 6px
Font-family: var(--font-body) -> Arcadia
Font-size: 12px
Font-weight: 500
Letter-spacing: 0.01em

Default:
  Background: var(--color-surface-default) -> #EDEDF3
  Color: var(--color-text-default) -> #272735

Magic:
  Background: var(--color-surface-magic) -> #5266EB
  Color: var(--color-text-on-primary) -> #FFFFFF

Soft:
  Background: var(--color-accent-soft) -> #EDECFB
  Color: var(--color-text-primary) -> #5266EB
```

### Alertas / Toasts (derivados para completar el sistema)

```
Padding: 16px 20px
Border-radius: var(--radius-2xl) -> 16px
Border-left: 4px solid currentColor
Font-family: var(--font-body) -> Arcadia
Font-size: 14px

Success: background var(--color-success-bg), color var(--color-success)
Warning: background var(--color-warning-bg), color var(--color-warning)
Error:   background var(--color-error-bg), color var(--color-error)
Info:    background var(--color-info-bg), color var(--color-info)
```

### Navegación / Header

```
Background: var(--color-surface-hero-dark) -> #28253B (hero top oscuro)
  o var(--color-bg) -> #FBFCFD (nav sticky al hacer scroll)
Backdrop-filter: blur(12px) cuando es sticky
Border-bottom: 1px solid var(--color-border-subtle) -> #C3C3CC
Height: 72px (var(--navbar-height) -> var(--spacing-72))
Padding horizontal: 24px

Logo:
  Blanco sobre hero oscuro, #272735 sobre canvas claro
  Serif Tiempos o wordmark custom

Links de nav:
  Color: var(--color-text-subdued) -> #535461 (sobre canvas claro)
         var(--color-text-inverted) -> #EDEDF3 (sobre hero oscuro)
  Font-family: var(--font-body) -> Arcadia
  Font-size: 14px
  Font-weight: 500
  Hover: Color var(--color-text-primary) -> #5266EB

CTA del nav:
  Rectángulo índigo #5266EB, texto blanco, 12px 20px, radius 12px
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-0: 0px;
--space-1: 1px;
--space-2: 2px;
--space-4: 4px;
--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-56: 56px;
--space-64: 64px;
--space-72: 72px;
--space-80: 80px;
--space-96: 96px;
--space-112: 112px;
--space-128: 128px;
--space-144: 144px;
--space-160: 160px;
--space-192: 192px;
--space-224: 224px;
--space-240: 240px;
```

> Base nominal de 4px, pero la escala real incluye impares (1, 2, 12, 20, 56) por el sistema Tailwind v4 del sitio. El padding de sección predominante es 80px, con 96-128px en franjas full-bleed.

### Contenedores

```css
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1080px;
--container-xl: 1280px;
--container-max: 1952px;  /* --grid-max-width real del CSS */
```

### Grid

```
Sistema: 12 columnas (--grid-total-columns real)
Gutter: 16px (--gap-md real, --grid-gutters = var(--gap-md))
Margin lateral: 24px (--grid-margins = var(--gap-lg))
Max width: 1952px (--grid-max-width real)
Patrones base: hero a una columna con titular serif display centrado o alineado
a la izquierda sobre fondo oscuro, producto fotográfico a un lado, franjas full-bleed
de producto con bloque de copy + bloque visual, mosaicos 3xN para tarjetas de
características, y bandas de color suave (lavanda #EDECFB, verde tibio #E7F1EA) que
rompen el ritmo sin saturar.
```

### Filosofía de espaciado

Mercury necesita aire para que la serif Tiempos respiren y para que el hero cinematográfico tenga presencia. No es una marca de dashboards densos: el espacio sirve para que cada titular serif en peso 400 se lea como una decisión editorial, no como ruido. Alterna secciones casi-blancas con paneles tibios (`#F4F5F9`) y franjas suaves de lavanda o verde tibio en momentos de producto; ese cambio de ritmo y temperatura es parte del lenguaje, no solo decoración. El vertical rhythm es generoso: 80px entre secciones, 32-48px entre bloques dentro de una sección.

---

## 6. Profundidad y Elevación

La marca es **flat-first con frosted-glass sutil**. Su sensación premium no viene de sombras dramáticas, sino de la tipografía serif, el contraste índigo sobre casi-blanco, y las capas de superficie tibia. Las sombras son casi invisibles: hairlines tibias y una capa de blur muy sutil (8-12px) para los elementos frosted (`--surface-frosted: #7073931A` con `--blur-sm: 8px`).

### Sistema de sombras

```css
--shadow-none: none;
--shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.04);
--shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px 0 rgba(0,0,0,0.06);
--shadow-lg: 0 24px 40px -12px rgba(0,0,0,0.12);
--shadow-frosted: 0 8px 24px -12px rgba(40, 37, 59, 0.18);
```

> El sitio usa Tailwind v4 con `--tw-shadow` ring shadows; las sombras reales observadas son minimal. `--shadow-frosted` se deriva del `--surface-frosted` + `--blur-sm` real para el efecto glass sutil.

### Niveles de elevación

| Nivel | Token de sombra | Uso |
|-------|----------------|-----|
| 0 - Base | `--shadow-none` | Secciones de color, franjas editoriales, fondos |
| 1 - Raised | `--shadow-xs` | Inputs, botones sobre superficie |
| 2 - Card | `--shadow-sm` | Cards informativas, paneles |
| 3 - Floating | `--shadow-md` | Popovers, dropdowns, modales pequeños |
| 4 - Frosted | `--shadow-frosted` | Glass panels, nav sticky con blur |
| 5 - Hero spotlight | `--shadow-lg` | Producto destacado del hero (derivado) |

### Radios de borde

```css
--radius-none: 0px;
--radius-sm: 0.25rem;   /* 4px */
--radius-md: 0.375rem;  /* 6px */
--radius-lg: 0.5rem;    /* 8px */
--radius-xl: 0.75rem;   /* 12px — CTA, inputs */
--radius-2xl: 1rem;     /* 16px — cards, bloques */
--radius-3xl: 1.5rem;   /* 24px — hero blocks, modales */
--radius-4xl: 2rem;     /* 32px — secciones grandes */
--radius-5xl: 2.5rem;   /* 40px — hero cards envolventes */
```

> Todos los radios son valores reales del CSS (`--radius-*` en `:root`). El radio predominante para CTAs e inputs es `0.75rem` (12px), y para cards `1rem` (16px). El sistema es consistente: cada radio tiene un rol, no se mezclan aleatoriamente.

---

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

### Sí hacer

1. **Usa la serif Tiempos (Fraunces en sustitución) para todo lo display y editorial** - es la firma tipográfica de la marca; banking serio que se viste de revista.
2. **Mantén las serif en peso 400, nunca en bold** - la jerarquía se logra por tamaño e itálica, no por peso; subir a bold aplana la firma editorial.
3. **Usa el índigo `#5266EB` como único acento de interacción** - CTA, links, focus, badges; el "magic" organiza toda la jerarquía visual.
4. **Deja mucho aire entre secciones (80px+)** - la serif necesita respirar; el espacio es parte del mensaje editorial.
5. **Usa el hero oscuro cinematográfico (`#28253B`) con producto fotográfico** - es el momento de contraste dramático en un sistema luminoso; no lo repitas en cada sección.
6. **Apoya el sistema con superficies tibias (`#F4F5F9`, `#EDECFB`, `#E7F1EA`)** - el calor sutil diferencia el sistema de un blanco-frío genérico y lo acerca a editorial.

### No hacer

1. **No introduzcas azules corporativos genéricos ni verdes banking tradicionales** - el índigo `#5266EB` es el único acento; cualquier otro azul rompe la unidad.
2. **No uses sans-serif para titulares display** - la marca es serif-led; una sans en el headline borra la personalidad editorial.
3. **No pongas las serif en bold** - peso 400 siempre; el bold en serif es un gesto de banco tradicional que Mercury evita.
4. **No llenes el canvas de sombras dramáticas ni glassmorphism pesado** - la identidad es flat-first; el frosted es sutil (alpha 0.1, blur 8-12px), no un efecto de cristal.
5. **No uses el rosa `#D03275` fuera de estados de error** - es el error real del sistema; usarlo como acento decorativo diluye su rol semántico.
6. **No mezcles tipografías serif adicionales** - solo Tiempos (Fraunces); cualquier otra serif compite con la firma y fragmenta el sistema.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
/* Mobile first — Tailwind v4 defaults del sitio */
/* sm: */ @media (min-width: 40rem) { }   /* 640px */
/* md: */ @media (min-width: 48rem) { }   /* 768px */
/* lg: */ @media (min-width: 64rem) { }   /* 1024px */
/* xl: */ @media (min-width: 80rem) { }   /* 1280px */
/* 2xl: */ @media (min-width: 96rem) { }  /* 1536px */
```

> El CSS del sitio declara `@media (min-width: 40rem)` para ajustes de tipografía y grid. Sigue la convención Tailwind v4 en rem.

### Cambios por breakpoint

**Mobile (< 640px)**
- Navegación: logo + menú hamburguesa, CTA compacto
- Grid: 1 columna
- Display H1: 40px (display-md reducido), no 72px
- Heading de sección: 24px (heading-sm)
- Padding de contenedor: 16px
- Hero: producto apilado debajo del titular, fondo oscuro recortado
- Touch targets: mínimo 44x44px

**Tablet (640px - 1024px)**
- Navegación: logo + links primarios visibles + CTA
- Grid: 2 columnas para producto + copy, 3 columnas para mosaicos
- Display H1: 56px (display-md)
- Padding de contenedor: 24px

**Desktop (> 1024px)**
- Navegación: full nav visible, links con hover a índigo
- Grid: 3-4 columnas en galerías, hero a una columna con titular serif display, franjas full-bleed
- Display H1: 72px (display-lg), capaz de crecer a 96px+ en hero editorial
- Padding de contenedor: auto con `max-width: 1952px`
- Sección padding: 80px vertical

### Touch targets (mobile)

- Botones mínimo: 44x44px (el CTA con 12px 20px de padding + 14px font cumple)
- Links de navegación: altura mínima 44px
- Inputs: altura mínima 44px (12px 16px de padding + 15px font cumple)
- Iconos interactivos: hitbox mínimo 44x44px

### Filosofía responsive

Mobile-first, pero con ambición editorial. En pequeño formato la marca debe seguir sintiéndose como una publicación de diseño, no como un dashboard recortado. Prioriza un titular serif contundente, un bloque de copy claro y un CTA índigo por viewport. Las franjas cálidas (lavanda, verde tibio) se apilan sin perder su carácter de golpe puntual. El hero oscuro se simplifica pero conserva su contraste cinematográfico.

---

## 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 Mercury.

PALETA: Canvas casi-blanco tibio #FBFCFD, índigo "magic" #5266EB como único acento
de interacción, hero oscuro #28253B para momentos cinematográficos. Serif Tiempos
(Fraunces en sustitución) para display, grotesk Arcadia (Sora) para UI. Rosa #D03275
solo para error.
TIPOGRAFÍA: Display en Fraunces peso 400 (nunca bold). Body en Sora 400. Labels en
Sora 500. Mono en IBM Plex Mono.
ESTILO: Editorial serif-led, fintech preciso, hero cinematográfico oscuro, mucho aire.
Flat-first con frosted-glass sutil. Acento índigo único.
TOKENS: Usa siempre variables CSS; no hardcodees colores fuera del sistema.
MODO: Claro (con hero oscuro puntual).
```

### Prompt: Crear nueva pantalla

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

Requisitos:
- Debe sentirse como una publicación de diseño + fintech premium, no como un banco tradicional
- Usa fondo casi-blanco #FBFCFD y deja que el índigo #5266EB sea el único acento de interacción
- Titulares en Fraunces peso 400 (serif, nunca bold), body en Sora
- Mucho aire entre bloques (80px), ritmo editorial
- Si incluye hero, puede usar fondo oscuro #28253B con producto fotográfico
- Responsive, con CTA principal índigo radius 12px
```

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

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

Debe:
- Usar solo tokens del DESIGN.md de Mercury
- Mantener radios de 12px para CTA/inputs, 16px para cards, 24px+ para hero blocks
- Tener versión default, hover, active, focus y disabled
- Sentirse editorial y preciso, no corporativo ni juguetón
- Sombras casi invisibles (flat-first), frosted-glass solo si es nav o panel flotante
- Tipografía: Fraunces 400 para títulos del componente, Sora para labels y body
```

### Prompt: Revisión de consistencia

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

Verifica:
1. Si los titulares display están en Fraunces peso 400 (no bold, no sans)
2. Si el índigo #5266EB es el único acento de interacción (no otros azules ni verdes)
3. Si la interfaz conserva aire editorial (80px entre secciones)
4. Si el rosa #D03275 aparece solo en estados de error
5. Si hay elementos demasiado fríos, genéricos o banking-tradicional (verdes, sans-serif en display)
```

### Prompt: Variante de campaña

```text
Genera una variante [producto / audiencia / promo] para Mercury manteniendo el sistema base.

Conserva:
- Índigo #5266EB como acento único
- Canvas casi-blanco tibio #FBFCFD
- Fraunces peso 400 para display, Sora para UI
- Flat-first, mucho aire

Puedes variar:
- El bloque visual de producto (captura, ilustración, foto)
- El balance entre hero oscuro y secciones claras
- Las franjas suaves de color (lavanda #EDECFB, verde tibio #E7F1EA, melocotón #FAEAE3)
```

---

## 10. Movimiento (Motion)

Mercury usa motion sutil y controlado, consistente con el tono editorial. No hay animaciones cinematográficas pesadas en el cuerpo del sitio (las reserva para el hero visual). El movimiento apoya la lectura serif, no la compite. La entrada de página es orquestada con reveals escalonados, y los bloques aparecen con un fade-up corto al hacer scroll. Los hovers de botón son un micro-lift de 1-2px con cambio de color directo.

**Nivel de motion**: sutil

**Duraciones**: 150ms (default, hover y transiciones de color), 175ms (transiciones de visibility), 300ms (reset y transiciones más largas), 500ms (media tab fade), 800ms (scroll reveal), 900ms (entrada orquestada del hero)

**Easings**: `cubic-bezier(0.4, 0, 0.2, 1)` (default, ease-in-out real del CSS), `cubic-bezier(0.4, 0, 1, 1)` (ease-in real), `cubic-bezier(0, 0, 0.2, 1)` (ease-out real), `cubic-bezier(0.16, 1, 0.3, 1)` (para reveals escalonados)

**Propiedades animadas**: opacity, transform (translateY), background-color, color, border-color, visibility

**Patrones de motion**:
- Entrada escalonada del hero con `animation-delay` (titular, lede, flags, captura)
- Scroll reveal por sección (fade-up 26px, 800ms)
- Ken-burns lento en la captura del hero (26s, alternate, scale 1 -> 1.07)
- Micro-lift en hover de botones (translateY -1px o -2px)
- Cambio de color directo en links y badges (150ms)
- Media tab fade (500ms) en transiciones de contenido tabulado

```css
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
--duration-fast: 150ms;
--duration-base: 175ms;
--duration-slow: 300ms;
--duration-reveal: 800ms;
--duration-entrance: 900ms;
```

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

---

## Anexo: Stack técnico detectado

- **Plataforma / builder**: Next.js (App Router, chunks `_next/static/` en `cdn.mercury.com/fem/`), React Server Components visible en el HTML stream
- **Framework CSS**: Tailwind v4 (CSS-first con `@theme`, variables `--tw-*` en inline styles, clases `rounded-2xl`, `bg-surface-frosted`, `border-border-frosted`), sistema de design tokens completo en `:root` (`--background-*`, `--surface-*`, `--text-*`, `--border-*`, `--icon-*`, `--spacing-*`, `--radius-*`, `--gap-*`)
- **Tipografía**: tres familias custom self-hosted vía `@font-face` desde `cdn.mercury.com/fem/_next/static/media/` (woff2 preload): **Tiempos Headline / Tiempos Fine / Tiempos** (Klim Type Foundry, commercial, serif para display y editorial), **Arcadia / ArcadiaDisplay** (Klim, commercial, grotesk humanista para UI y body), **IBM Plex Mono** (para mono, disponible en Google Fonts)
- **Sistema de temas**: variantes `.neutral-theme` (default del marketing) y `.purple-theme` (variante con fondo lavanda `#F5F4FD`), declaradas en `:root` con override de `--background-default`
- **Animación**: no se detectaron librerías de motion pesadas (GSAP, Framer, Lottie) en el HTML del marketing. El motion es CSS-first (transitions y `@keyframes`), con duraciones y easings declarados como variables (`--default-transition-duration: 0.15s`, `--default-transition-timing-function: cubic-bezier(.4,0,.2,1)`)
- **3D / WebGL / Three.js**: no detectado en el marketing
- **CDN / assets**: `cdn.mercury.com/fem/` para fuentes, CSS y JS chunks
- **Comportamiento**: sitio de marketing de business banking para startups, estructura editorial con hero cinematográfico oscuro, secciones de producto alternando canvas claro y franjas tibias, y blog/resources al final