Oryzo

:root {
  /* Color — canvas verde oliva + crema cálido + naranja thermodynamic */
  --color-canvas: #445231;        /* --color-green, fondo del sitio */
  --color-surface: #4B5C3D;       /* superficie verde tibia */
  --color-surface-elevated: #5D6C49;
  --color-ink: #FFE DD7;          /* --color-white, crema cálido */
  --color-ink-soft: #F6E0C6;      /* --color-green-lightest */
  --color-muted: #6C5F51;         /* --color-grey-brown */
  --color-primary: #DC5000;       /* --color-orange, thermodynamic */
  --color-primary-hover: #E9500E;
  --color-primary-active: #E07010;
  --color-secondary: #FF6B6B;     /* coral alerta */
  --color-accent: #FFA000;        /* ámbar glow */
  --color-accent-soft: #FFE DD7;  /* crema CTA */
  --color-text-dark: #100904;     /* --color-black, texto sobre crema */
  --color-border: #FFE DD7;
  --color-border-subtle: #6C5F51;

  /* Typography */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Literata', Georgia, serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  /* Scale — valores reales del CSS (--h1..--h5, --body1..--body3) */
  --f-h1: 500 164px/100% var(--font-display);
  --f-h2: 500 68px/110% var(--font-display);
  --f-h3: 500 45px/115% var(--font-display);
  --f-body-lg: 400 38px/150% var(--font-body);
  --f-body-md: 400 24px/150% var(--font-body);
  --f-body: 400 18px/145% var(--font-body);
  --f-label: 500 16px/140% var(--font-display);

  /* Radius + shadow + glow */
  --radius-lg: 1rem;        /* 16px */
  --radius-2xl: 2.5rem;     /* 40px, --r real, cards orgánicas */
  --radius-full: 9999px;    /* CTA, badges */
  --shadow-sm: 0 2px 8px 0 rgba(0,0,0,0.25);
  --shadow-glow: 0 0 40px 0 rgba(220, 80, 0, 0.4);

  /* Spacing — base 4px */
  --space-4: 4px; --space-8: 8px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px;
  --space-64: 64px; --space-80: 80px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms; --duration-slow: 800ms; --duration-loop: 1s;
}

@theme {
  /* Color */
  --color-canvas: #445231;
  --color-surface: #4B5C3D;
  --color-surface-elevated: #5D6C49;
  --color-ink: #FFE DD7;
  --color-ink-soft: #F6E0C6;
  --color-muted: #6C5F51;
  --color-primary: #DC5000;
  --color-primary-hover: #E9500E;
  --color-primary-active: #E07010;
  --color-secondary: #FF6B6B;
  --color-accent: #FFA000;
  --color-text-dark: #100904;
  --color-border: #FFE DD7;
  --color-border-subtle: #6C5F51;

  /* Font families */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Literata', Georgia, serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  /* Font sizes (px) — escala real del sitio */
  --text-h1: 164px;
  --text-h2: 68px;
  --text-h3: 45px;
  --text-h4: 32px;
  --text-body-lg: 38px;
  --text-body: 18px;
  --text-label: 16px;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Radius */
  --radius-lg: 1rem;
  --radius-2xl: 2.5rem;
  --radius-full: 9999px;

  /* Shadow + glow */
  --shadow-sm: 0 2px 8px 0 rgba(0,0,0,0.25);
  --shadow-glow: 0 0 40px 0 rgba(220, 80, 0, 0.4);

  /* Spacing */
  --spacing-4: 4px; --spacing-8: 8px; --spacing-16: 16px;
  --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px;
  --spacing-64: 64px; --spacing-80: 80px;

  /* Easing */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}

{
  "color": {
    "canvas": "#445231",
    "surface": "#4B5C3D",
    "surfaceElevated": "#5D6C49",
    "ink": "#FFE DD7",
    "inkSoft": "#F6E0C6",
    "muted": "#6C5F51",
    "primary": "#DC5000",
    "primaryHover": "#E9500E",
    "primaryActive": "#E07010",
    "secondary": "#FF6B6B",
    "accent": "#FFA000",
    "accentSoft": "#FFE DD7",
    "textDark": "#100904",
    "border": "#FFE DD7",
    "borderSubtle": "#6C5F51"
  },
  "font": {
    "display": { "family": "Hanken Grotesk", "substituteOf": "Halyard Display (variable, self-hosted)" },
    "body": { "family": "Literata", "real": true, "selfHosted": true },
    "mono": { "family": "DM Mono", "real": true, "selfHosted": true }
  },
  "fontSize": {
    "h1": { "px": 164, "weight": 500, "lineHeight": "100%", "tracking": "-0.03em" },
    "h2": { "px": 68, "weight": 500, "lineHeight": "110%", "tracking": "-0.02em" },
    "h3": { "px": 45, "weight": 500, "lineHeight": "115%", "tracking": "-0.01em" },
    "h4": { "px": 32, "weight": 500, "lineHeight": "120%" },
    "bodyLg": { "px": 38, "weight": 400, "lineHeight": "150%" },
    "bodyMd": { "px": 24, "weight": 400, "lineHeight": "150%" },
    "body": { "px": 18, "weight": 400, "lineHeight": "145%" },
    "label": { "px": 16, "weight": 500, "lineHeight": "140%", "tracking": "0.01em" }
  },
  "radius": { "sm": "0.25rem", "md": "0.5rem", "lg": "1rem", "xl": "1.5rem", "2xl": "2.5rem", "full": "9999px" },
  "spacing": { "base": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "32px", "2xl": "48px", "3xl": "64px", "4xl": "80px" },
  "shadow": {
    "none": "none",
    "sm": "0 2px 8px 0 rgba(0,0,0,0.25)",
    "md": "0 8px 24px -8px rgba(0,0,0,0.35)",
    "glow": "0 0 40px 0 rgba(220, 80, 0, 0.4)"
  },
  "motion": {
    "ease": "cubic-bezier(0.16, 1, 0.3, 1)",
    "durationFast": "200ms",
    "durationSlow": "800ms",
    "durationLoop": "1s"
  }
}

---
version: "1.0"
name: "Oryzo"
description: "Sistema visual art-directed para un producto físico de café reimaginado para la era IA: canvas verde oscuro oliva (#445231 / #4B5C3D), texto crema cálido (#FFE DD7), acento naranja thermodynamic (#DC5000), tipografía Halyard (grotesk variable) para display + Literata serif para body. Cinemático, escultórico, con producto 3D como héroe."
colors:
  primary: "#DC5000"
  primary-hover: "#E9500E"
  primary-active: "#E07010"
  secondary: "#FF6B6B"
  accent: "#FFA000"
  accent-soft: "#FFEDD7"
  neutral: "#6C5F51"
  background: "#445231"
  surface: "#4B5C3D"
  surface-elevated: "#5D6C49"
  surface-dark: "#100904"
  surface-light: "#F6E0C6"
  text-primary: "#FFE DD7"
  text-secondary: "#F6E0C6"
  text-muted: "#6C5F51"
  text-on-primary: "#100904"
  text-inverted: "#100904"
  border: "#FFE DD7"
  border-subtle: "#6C5F51"
  border-emphasized: "#100904"
  success: "#5D6C49"
  success-bg: "#445231"
  warning: "#FFA000"
  warning-bg: "#FFEDD7"
  error: "#FF6B6B"
  error-bg: "#382416"
  info: "#DC5000"
  info-bg: "#FFEDD7"
typography:
  display-xl:
    fontFamily: "Halyard Display"
    fontSize: "164px"
    fontWeight: 500
    lineHeight: "100%"
    letterSpacing: "-0.03em"
  display-lg:
    fontFamily: "Halyard Display"
    fontSize: "68px"
    fontWeight: 500
    lineHeight: "110%"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: "Halyard Display"
    fontSize: "45px"
    fontWeight: 500
    lineHeight: "115%"
    letterSpacing: "-0.01em"
  heading:
    fontFamily: "Halyard Display"
    fontSize: "32px"
    fontWeight: 500
    lineHeight: "120%"
  body-lg:
    fontFamily: "Literata"
    fontSize: "38px"
    fontWeight: 400
    lineHeight: "150%"
  body-md:
    fontFamily: "Literata"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "150%"
  body-sm:
    fontFamily: "Literata"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "145%"
  label:
    fontFamily: "Halyard Display"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: "140%"
    letterSpacing: "0.01em"
  mono:
    fontFamily: "DM Mono"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "140%"
rounded:
  sm: "0.25rem"
  md: "0.5rem"
  lg: "1rem"
  xl: "1.5rem"
  2xl: "2.5rem"
  full: "9999px"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  section-padding: "80px"
components:
  button-primary:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.text-on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: "16px 32px"
  button-active:
    backgroundColor: "{colors.text-on-primary}"
    textColor: "{colors.accent-soft}"
    rounded: "{rounded.full}"
    padding: "16px 32px"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border-subtle}"
    rounded: "{radius}"
    padding: "24px"
---

# DESIGN.md - Oryzo

> Sistema de diseño extraído de `https://oryzo.ai` (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 en `screen-unit`, recetas de botones reales). Estados no expuestos se derivan de la familia real, marcados con `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmósfera

Oryzo se siente como una instalación de museo dedicada al café. El canvas no es negro ni blanco: es un verde oliva oscuro profundo (`#445231`, `--color-green` real del CSS) que cubre todo el sitio y actúa como un bosque nocturno o un laboratorio botánico. Sobre ese verde cae un texto crema cálido (`#FFE DD7`, `--color-white` real, nunca blanco puro) que se lee como luz de vela, y un acento naranja thermodynamic (`#DC5000`, `--color-orange` real) que aparece solo en momentos de producto y glow, como una brasa encendida.

La personalidad aparece en la ambición art-directed. Este no es un sitio de marketing tradicional: es una experiencia cinematográfica con producto 3D como héroe, animaciones de scroll controladas, y una tipografía display grotesk (Halyard) que llega a 164px (`--h1` real del CSS) con peso 500, acompañada por una serif Literata para body editorial. El resultado es escultórico y táctil, como si un estudio de diseño industrial hubiera traducido un objeto físico a web.

La traducción digital debe conservar esa mezcla de laboratorio botánico y revista de diseño industrial: canvas verde oscuro uniforme, texto crema cálido, acento naranja como brasa puntual, tipografía display GIGANTE en Halyard, body serif en Literata, y mucho aire negativo para que el producto 3D respire. Cuando el sistema se ve bien, parece el cruce entre una instalación de Museé, un producto de diseño premium y un experimento de IA aplicado a un objeto cotidiano.

**Palabras clave de personalidad**: art-directed, cinematográfico, botánico, táctil, thermodynamic, escultórico, cálido-oscuro

**Densidad del layout**: espaciada (mucho aire negativo, producto como héroe)

**Modo preferido**: oscuro (verde oliva oscuro como canvas)

**Nivel de ornamentación**: alto (producto 3D, animaciones de scroll, glow naranja, tipografía display masiva)

**Audiencia visual objetivo**: diseñadores, estudios creativos y early adopters de IA que aprecian un objeto cotidiano reimaginado con ambición artística

---

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

La paleta real del sitio se organiza en cuatro gestos: un verde oliva oscuro como canvas (`#445231`), un crema cálido como tinta (`#FFE DD7`), un naranja thermodynamic como acento de producto y glow (`#DC5000`), y una familia de apoyos cálidos (marrón `#382416`, verde claro `#5D6C49`, crema más claro `#F6E0C6`). El "blanco" del sitio no es blanco: es crema `#FFE DD7` (`--color-white` real), una decisión que le quita toda frialdad al sistema.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Naranja thermodynamic | `--color-primary` | `#DC5000` | Acento principal, glow, producto, CTA activo (`--color-orange` real) | `#FFE DD7` |
| Naranja hover | `--color-primary-hover` | `#E9500E` | Hover del acento (derivado de la familia naranja) | `#FFE DD7` |
| Naranja activo | `--color-primary-active` | `#E07010` | Pressed state (`#E07010` real del CSS) | `#FFE DD7` |
| Coral alerta | `--color-secondary` | `#FF6B6B` | Acento secundario, alertas suaves (`#FF6B6B` real del CSS) | `#100904` |
| Ámbar glow | `--color-accent` | `#FFA000` | Glow secundario, badges, ilustraciones (`#FFA000` real del CSS) | `#100904` |
| Crema cálido | `--color-accent-soft` | `#FFE DD7` | "Blanco" del sitio, texto principal, CTA (`--color-white` real) | `#100904` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo verde oliva | `--color-bg` | `#445231` | Fondo general del sitio, `--color-green` real del CSS |
| Superficie verde | `--color-surface` | `#4B5C3D` | Superficie tibia observada en el hero (muestreada) |
| Verde claro | `--color-surface-elevated` | `#5D6C49` | Superficie elevada, `--color-green-light` real |
| Crema claro | `--color-surface-light` | `#F6E0C6` | Superficie cálida clara, `--color-green-lightest` real |
| Negro tibio | `--color-surface-dark` | `#100904` | Negro casi-puro tibio, `--color-black` real |
| Marrón café | `--color-surface-brown` | `#382416` | Superficie café oscura, `--color-brown` real |
| Borde crema | `--color-border` | `#FFE DD7` | Borde principal, `--color-white` real |
| Borde sutil | `--color-border-subtle` | `#6C5F51` | Hairlines tibios, `--color-grey-brown` real |
| Borde énfasis | `--color-border-emphasized` | `#100904` | Bordes fuertes sobre crema, `--color-black` real |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto crema | `--color-text` | `#FFE DD7` | Headings, body, `--color-white` real |
| Texto cálido claro | `--color-text-secondary` | `#F6E0C6` | Descripciones, captions, `--color-green-lightest` real |
| Texto muted | `--color-text-muted` | `#6C5F51` | Metadata, notas, `--color-grey-brown` real |
| Texto oscuro | `--color-text-dark` | `#100904` | Texto sobre crema/CTA, `--color-black` real |
| Texto invertido | `--color-text-inverted` | `#100904` | Texto sobre superficies claras |

### Colores de estado

> El sitio no expone estados formales (success/warning/error/info). Estos tonos se derivan de las familias cálidas reales para completar el sistema.

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#5D6C49` | `#FFE DD7` |
| Éxito (bg) | `--color-success-bg` | `#445231` | `#FFE DD7` |
| Advertencia | `--color-warning` | `#FFA000` | `#100904` |
| Advertencia (bg) | `--color-warning-bg` | `#FFE DD7` | `#100904` |
| Error | `--color-error` | `#FF6B6B` | `#100904` |
| Error (bg) | `--color-error-bg` | `#382416` | `#FF6B6B` |
| Info | `--color-info` | `#DC5000` | `#FFE DD7` |
| Info (bg) | `--color-info-bg` | `#FFE DD7` | `#DC5000` |

---

## 3. Reglas de Tipografía

```css
/* Display: Halyard Display (variable font, self-hosted, no Google) ->
   sustituto Google: Hanken Grotesk (grotesk humanista con peso 500 y masa similar) */
--font-display: 'Hanken Grotesk', 'Halyard Display', system-ui, sans-serif;

/* Body: Literata (serif variable 200-900, self-hosted en /fonts/Literata.woff2) ->
   disponible en Google Fonts, se conserva por fidelidad */
--font-body: 'Literata', Georgia, serif;

/* Mono: DM Mono (self-hosted en /fonts/DM-Mono-400-Latin.woff2) ->
   disponible en Google Fonts, se conserva por fidelidad */
--font-mono: 'DM Mono', ui-monospace, monospace;

/* Text/UI: Halyard Text (variable font, self-hosted, no Google) ->
   sustituto Google: Hanken Grotesk (mismo sustituto que display) */
--font-text: 'Hanken Grotesk', 'Halyard Text', system-ui, sans-serif;
```

**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=Hanken+Grotesk:wght@300;400;500;600;700&family=Literata:ital,opsz,wght@0,7..72,300;0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
```

**Nota sobre sustitución**: el sitio carga tres familias vía `@font-face` self-hosted:
- **Halyard Display** (variable font, weights 200-900): grotesk para titulares display y labels. No está en Google Fonts.
- **Halyard Text** (variable font): versión text de Halyard para UI. No está en Google Fonts.
- **Literata** (serif variable 200-900, self-hosted en `/fonts/Literata.woff2`): serif para body editorial. Disponible en Google Fonts, se conserva.
- **DM Mono** (self-hosted en `/fonts/DM-Mono-400-Latin.woff2`): mono para specs y datos. Disponible en Google Fonts, se conserva.

`Hanken Grotesk` sustituye a Halyard Display/Text: es una grotesk humanista con pesos 300-700, masa similar, y un humanismo que encaja con el tono cálido-oscuro del sitio. `Literata` y `DM Mono` se conservan por fidelidad (están en Google Fonts y son las reales del sitio).

### Escala tipográfica

> Token · px · line-height · peso · uso. Valores reales del CSS (`--h1` a `--h5`, `--body1` a `--body3`, `--sub1`, `--sub2`, `--btn`, `--link-header`). Los tamaños usan `calc(N * var(--screen-unit))` donde screen-unit escala con el viewport; los valores px son el equivalente en desktop 1920px.

| Token | px equiv. | Line height | Weight | Uso |
|-------|-----------|-------------|--------|-----|
| `--h1` | 164px | 100% | 500 | Hero headline display (Halyard Display) |
| `--h2` | 68px | 110% | 500 | Display secundario |
| `--h3` | 45px | 115% | 500 | Titular de sección |
| `--h4` | 32px | 120% | 500 | Subtítulo de bloque |
| `--h5` | 20px | 130% | 500 | Título pequeño |
| `--body1` | 38px | 150% | 400 | Body display (Literata serif) |
| `--body2` | 24px | 150% | 400 | Body medio |
| `--body3` | 18px | 145% | 400 | Body general |
| `--sub1` | 24px | 140% | 400 | Subtítulo |
| `--sub2` | 16px | 140% | 400 | Label, nav |
| `--btn` | 16px | 140% | 500 | CTA, botones (Halyard Display) |
| `--link-header` | 16px | 140% | 500 | Links de nav |
| `--quote` | 30px | 140% | 400 | Quote editorial |
| `--default` | 18px | 145% | 400 | Default body |

### Pesos tipográficos

```css
--font-light: 300;     /* Halyard Display ligero (raro) */
--font-normal: 400;    /* Literata body, DM Mono */
--font-medium: 500;    /* Halyard Display (predominante), labels, CTAs */
--font-semibold: 600;  /* Énfasis medio */
--font-bold: 700;      /* Raro en display; uso en micro-énfasis */
```

### Letter spacing

```css
--tracking-tight: -0.03em;   /* Display h1 */
--tracking-snug: -0.02em;    /* Display h2 */
--tracking-normal: -0.01em;  /* Display h3, headings */
--tracking-wide: 0.01em;     /* Labels, CTAs */
```

**Regla clave**: el display es MASIVO. h1 = 164px en desktop, con peso 500 (no bold). La escala tipográfica es la firma de la marca: titulares grotesk gigantes que se sienten como instalación, body serif Literata que aporta legibilidad editorial, y mono DM Mono para specs técnicos. El cuerpo nunca compite con el headline; la marca gana por escala y por contraste serif vs grotesk.

---

## 4. Estilos de Componentes

### Botones

**Primario (crema pill sobre verde oscuro)**
```
Background: var(--color-accent-soft) -> #FFE DD7
Color de texto: var(--color-text-on-primary) -> #100904
Padding: 16px 32px
Border-radius: var(--radius-full) -> 9999px (pill)
Font-family: var(--font-display) -> Halyard Display
Font-weight: 500
Font-size: 16px
Letter-spacing: 0.01em
Transicion: background-color 200ms ease, transform 200ms ease

Hover:
  Background: var(--color-primary) -> #DC5000
  Color: var(--color-text) -> #FFE DD7
  Transform: translateY(-1px)

Active/Pressed:
  Background: var(--color-text-on-primary) -> #100904
  Color: var(--color-accent-soft) -> #FFE DD7
  Transform: translateY(0)

Disabled:
  Opacity: 0.4
  Cursor: not-allowed

Focus:
  Outline: 2px solid var(--color-primary) -> #DC5000
  Outline-offset: 3px
```

> Receta real del CSS: `--btn-color: var(--color-white)` (#FFE DD7), `--btn-text-color: var(--color-black)` (#100904), `--btn-active-color: var(--color-black)`, `--btn-active-text-color: var(--color-white)`. El botón es un pill que invierte colores en active.

**Secundario (outline crema)**
```
Background: transparent
Color de texto: var(--color-text) -> #FFE DD7
Border: 1px solid var(--color-border) -> #FFE DD7
Border-radius: var(--radius-full) -> 9999px
Padding: 16px 32px

Hover:
  Background: rgba(255, 237, 215, 0.08)
  Border-color: var(--color-primary) -> #DC5000
  Color: var(--color-primary) -> #DC5000
```

**Ghost / Texto**
```
Background: transparent
Color: var(--color-text) -> #FFE DD7
Border: none
Padding: 8px 16px
Border-radius: var(--radius-md)

Hover:
  Color: var(--color-primary) -> #DC5000
```

**Destructivo** (derivado para completar el sistema)
```
Background: var(--color-error) -> #FF6B6B
Color: var(--color-text-dark) -> #100904
Border-radius: var(--radius-full)
Padding: 16px 32px
```

### Inputs de texto

```
Background: transparent
Border: 1px solid var(--color-border-subtle) -> #6C5F51
Border-radius: var(--radius-lg) -> 1rem
Padding: 14px 18px
Font-family: var(--font-body) -> Literata
Font-size: 18px
Color: var(--color-text) -> #FFE DD7
Placeholder: var(--color-text-muted) -> #6C5F51

Hover:
  Border-color: var(--color-text) -> #FFE DD7

Focus:
  Border-color: var(--color-primary) -> #DC5000
  Box-shadow: 0 0 0 3px rgba(220, 80, 0, 0.18)
  Outline: none

Error:
  Border-color: var(--color-error) -> #FF6B6B

Disabled:
  Opacity: 0.5
```

### Cards

```
Background: var(--color-surface) -> #4B5C3D
Border: 1px solid var(--color-border-subtle) -> #6C5F51
Border-radius: var(--radius-2xl) -> 2.5rem (var(--r) real del CSS)
Padding: 24px

Hover (si es clickeable):
  Border-color: var(--color-border) -> #FFE DD7
  Transform: translateY(-2px)
```

> El radio `--r: 2.5rem` (40px) es el radio real del CSS, usado para cards y bloques grandes. Es generoso, casi orgánico, en línea con el tono botánico del sistema.

### Badges / Chips

```
Padding: 5px 12px
Border-radius: var(--radius-full)
Font-family: var(--font-display) -> Halyard Display
Font-size: 12px
Font-weight: 500
Letter-spacing: 0.01em

Default:
  Background: var(--color-surface-elevated) -> #5D6C49
  Color: var(--color-text) -> #FFE DD7

Thermodynamic:
  Background: var(--color-primary) -> #DC5000
  Color: var(--color-text) -> #FFE DD7

Cream:
  Background: var(--color-accent-soft) -> #FFE DD7
  Color: var(--color-text-dark) -> #100904
```

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

```
Padding: 16px 20px
Border-radius: var(--radius-lg) -> 1rem
Border-left: 4px solid currentColor
Font-family: var(--font-body) -> Literata
Font-size: 18px

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: transparent sobre el canvas verde oscuro
Height: 21px (var(--site-header) real, minimal)
Padding horizontal: 3.125vw (var(--site-padding-x) real)

Logo:
  Crema #FFE DD7, peso 500, Halyard Display

Links de nav:
  Color: var(--color-text) -> #FFE DD7
  Font-family: var(--font-display) -> Halyard Display
  Font-size: 16px
  Font-weight: 500
  Hover: Color var(--color-primary) -> #DC5000

CTA del nav:
  Pill crema #FFE DD7, texto #100904, 16px 32px, radius 9999px
```

---

## 5. Principios de Layout

### Escala de espaciado

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

> El sitio usa `var(--site-padding-x): 3.125vw` para márgenes laterales y `var(--screen-unit)` para escalar tipografía con el viewport. El padding de sección es generoso (80px+), con `var(--site-padding-y)` basado en site-row-height.

### Contenedores

```css
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1080px;
--container-xl: 1920px;  /* el sitio está diseñado para 1920px desktop */
--inner-width: calc(100vw - var(--site-padding-x) * 2);
```

### Grid

```
Sistema: 16 columnas (--grid-columns: 16 real del CSS)
Gutter: calc basado en viewport (--grid-gap-width)
Margin lateral: 3.125vw (--site-padding-x real)
Patrones base: hero a una columna con producto 3D centrado y titular display
gigante encima o debajo, franjas full-bleed de producto con scroll horizontal,
secciones de características en grid de 16 columnas con spans variables,
y quotes editoriales en Literata serif a gran tamaño.
```

### Filosofía de espaciado

Oryzo necesita aire negativo para que el producto 3D respire y para que la tipografía display masiva (164px) tenga presencia escultórica. No es una marca de dashboards densos: el espacio sirve para que cada titular se lea como una instalación, no como ruido. El canvas verde oscuro uniforme hace que el aire se sienta como un bosque nocturno, no como vacío. El vertical rhythm es generoso y el padding lateral escala con el viewport (3.125vw) para mantener proporciones en cualquier tamaño.

---

## 6. Profundidad y Elevación

La marca es **flat-first con glow naranja puntual**. Su sensación cinematográfica no viene de sombras dramáticas, sino del canvas verde oscuro uniforme, el contraste crema sobre verde, y un glow naranja (`--glow-color: rgba(220, 80, 0, 0)` real del CSS) que aparece solo alrededor del producto 3D. La profundidad es atmosférica, no material.

### Sistema de sombras

```css
--shadow-none: none;
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
--shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
--shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.45);
--shadow-glow: 0 0 40px 0 rgba(220, 80, 0, 0.4);
```

> El sitio no declara sombras formales; la profundidad viene del canvas oscuro y del glow naranja. Las sombras se derivan para completar el sistema, usando alpha alto por el fondo oscuro.

### Niveles de elevación

| Nivel | Token de sombra | Uso |
|-------|----------------|-----|
| 0 - Base | `--shadow-none` | Canvas verde, secciones full-bleed |
| 1 - Raised | `--shadow-xs` | Inputs, botones sobre canvas |
| 2 - Card | `--shadow-sm` | Cards informativas |
| 3 - Floating | `--shadow-md` | Popovers, modales |
| 4 - Glow | `--shadow-glow` | Producto 3D, CTA con halo naranja |
| 5 - Spotlight | `--shadow-lg` | Producto destacado del hero (derivado) |

### Radios de borde

```css
--radius-none: 0px;
--radius-sm: 0.25rem;   /* 4px */
--radius-md: 0.5rem;    /* 8px */
--radius-lg: 1rem;      /* 16px */
--radius-xl: 1.5rem;    /* 24px */
--radius-2xl: 2.5rem;   /* 40px, --r real del CSS, cards y bloques */
--radius-full: 9999px;  /* CTA, badges */
```

> El radio predominante para cards y bloques grandes es `2.5rem` (40px, `--r` real del CSS), un radio generoso casi orgánico en línea con el tono botánico. Para CTA y badges, pill completo (`9999px`).

---

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

### Sí hacer

1. **Usa el verde oliva oscuro `#445231` como canvas uniforme** - es la firma atmosférica de la marca; un bosque nocturno botánico que hace que el producto 3D respire.
2. **Mantén el texto en crema `#FFE DD7`, nunca blanco puro** - el crema cálido es el "blanco" del sitio (`--color-white` real); el blanco puro rompería la atmósfera cálida.
3. **Usa el naranja `#DC5000` solo como glow y acento de producto** - es la brasa del sistema; aparece en hover, focus y alrededor del producto 3D, nunca como baño.
4. **Haz la tipografía display MASIVA (h1 = 164px)** - la escala es la firma; un titular pequeño pierde el carácter de instalación.
5. **Combina Halyard Display (grotesk) para titulares con Literata (serif) para body** - el contraste grotesk vs serif es parte del lenguaje editorial-botánico.
6. **Deja mucho aire negativo entre secciones** - el producto 3D y la tipografía display necesitan espacio escultórico, no densidad.

### No hacer

1. **No uses blanco puro `#FFFFFF` ni negro puro `#000000` en el marketing** - el sistema es cálido-oscuro; los puros rompen la paleta crema y verde oliva.
2. **No introduzcas azules, verdes brillantes ni colores fríos** - la paleta es cálida (verde oliva, crema, naranja, marrón); un frío destruye la atmósfera botánica.
3. **No reduzcas la tipografía display a tamaños modestos** - si h1 no se siente como instalación, perdiste la firma de la marca.
4. **No llenes el canvas de sombras dramáticas ni glassmorphism** - la profundidad es atmosférica (canvas oscuro + glow naranja puntual), no material.
5. **No uses sans-serif para body editorial** - Literata serif es la voz editorial; una sans en el body aplana el contraste grotesk-serif.
6. **No mezcles la paleta con acentos no presentes en el sitio** - solo naranja thermodynamic, crema y familia verde-marrón; cualquier otro acento fragmenta el sistema.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
/* Mobile first — Astro, breakpoint único real del CSS */
/* md: */ @media (min-width: 768px) { }
/* mobile: */ @media (max-width: 767.98px) { }
```

> El sitio declara un único breakpoint en 768px. Por debajo, ajusta `--screen-unit` y reduce tipografía display. Por encima, usa la escala completa 1920px.

### Cambios por breakpoint

**Mobile (< 768px)**
- Navegación: logo + menú compacto, CTA pill reducido
- Grid: 1 columna, spans simplificados
- Display H1: reducido proporcionalmente vía `--screen-unit` (aprox. 80-100px, no 164px)
- Padding de contenedor: `3.125vw` (se mantiene, escala con viewport)
- Producto 3D: visible arriba del fold, escala proporcional
- Touch targets: mínimo 44x44px

**Desktop (> 768px)**
- Navegación: full nav visible, links con hover a naranja
- Grid: 16 columnas con spans variables
- Display H1: 164px (escala con `--screen-unit` hasta 1920px)
- Padding de contenedor: `3.125vw` lateral
- Sección padding: generoso, basado en `--site-padding-y`
- Producto 3D: hero a tamaño completo con glow naranja

### Touch targets (mobile)

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

### Filosofía responsive

Mobile-first con ambición art-directed. En pequeño formato la marca debe seguir sintiéndose como una instalación, no como un sitio recortado. Prioriza el producto 3D, un titular display contundente (aunque reducido), y el canvas verde oscuro uniforme. El glow naranja se conserva como momento de producto. La escala tipográfica via `--screen-unit` asegura proporciones consistentes en cualquier 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 Oryzo.

PALETA: Canvas verde oliva oscuro #445231, texto crema cálido #FFE DD7 (nunca blanco
puro), acento naranja thermodynamic #DC5000 para glow y producto. Marrón café #382416
y verde claro #5D6C49 como apoyos.
TIPOGRAFÍA: Display en Hanken Grotesk (sustituto de Halyard Display) peso 500, GIGANTE
(h1 = 164px). Body en Literata serif. Labels en Hanken Grotesk 500. Mono en DM Mono.
ESTILO: Art-directed, cinematográfico, botánico, táctil. Canvas verde oscuro uniforme,
glow naranja puntual, producto 3D como héroe. Flat-first con profundidad atmosférica.
TOKENS: Usa siempre variables CSS; no hardcodees colores fuera del sistema.
MODO: Oscuro (verde oliva).
```

### Prompt: Crear nueva pantalla

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

Requisitos:
- Debe sentirse como una instalación de museo botánico, no como un sitio de marketing
- Usa fondo verde oliva oscuro #445231 y texto crema #FFE DD7 (nunca blanco puro)
- Titulares display GIGANTES en Hanken Grotesk peso 500 (h1 mínimo 100px)
- Body en Literata serif para contraste editorial
- Acento naranja #DC5000 solo en glow, hover y producto, nunca como baño
- Mucho aire negativo entre secciones (80px+), ritmo escultórico
- Responsive, con CTA principal pill crema sobre verde oscuro
```

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

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

Debe:
- Usar solo tokens del DESIGN.md de Oryzo
- Mantener radios de 2.5rem (40px) para cards, pill (9999px) para CTA y badges
- Tener versión default, hover, active, focus y disabled
- Sentirse art-directed y táctil, no corporativo ni genérico
- Sombras atmosféricas (alpha alto por fondo oscuro), glow naranja solo si es producto
- Tipografía: Hanken Grotesk 500 para títulos/labels, Literata para body
```

### Prompt: Revisión de consistencia

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

Verifica:
1. Si el canvas es verde oliva oscuro #445231 (no negro ni gris)
2. Si el texto es crema #FFE DD7 (no blanco puro)
3. Si la tipografía display es GIGANTE (h1 mínimo 100px, peso 500)
4. Si el body está en Literata serif (no en sans-serif)
5. Si el naranja #DC5000 aparece solo como glow/acento, no como baño
6. Si hay elementos fríos, genéricos o no-art-directed (azules, blancos puros, sombras material)
```

### Prompt: Variante de campaña

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

Conserva:
- Verde oliva oscuro #445231 como canvas
- Crema #FFE DD7 como texto
- Hanken Grotesk 500 para display GIGANTE
- Literata serif para body
- Glow naranja #DC5000 puntual

Puedes variar:
- El acento principal entre naranja #DC5000, ámbar #FFA000 o coral #FF6B6B
- El bloque visual de producto (3D, ilustración, foto)
- El balance entre aire negativo y densidad de contenido
```

---

## 10. Movimiento (Motion)

Oryzo usa motion cinematográfico y controlado, consistente con el tono art-directed. El hero tiene producto 3D con animación de scroll, hay pulsos de botón (`bikini-btn-pulse-animation`), blinks de dots (`hero-card-dot-blink`), y un loading state para newsletter (`newsletter-btn-loading`). El movimiento apoya la sensación de instalación, no la compite. Las animaciones son de bucle lento (1s ease-in-out infinite) para crear atmósfera, no para distraer.

**Nivel de motion**: alto (cinematográfico, art-directed)

**Duraciones**: 200ms (hover, transiciones de color), 500ms (media tab fade), 800ms (scroll reveal), 900ms (entrada orquestada del hero), 1s (animaciones de bucle: pulse, blink, loading), 26s (ken-burns del hero)

**Easings**: `ease-in-out` (animaciones de bucle, real del CSS), `ease` (transiciones generales), `linear` (wheel-dash animation), `cubic-bezier(0.16, 1, 0.3, 1)` (para reveals escalonados)

**Propiedades animadas**: opacity, transform (translateY, scale, rotate), background-color, color, border-color, stroke-dashoffset, filter

**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)
- Pulse de botón (`bikini-btn-pulse-animation`, 1s ease-in-out infinite)
- Blink de dots decorativos (`hero-card-dot-blink`, 1s)
- Wheel-dash animado (`grip-instruction-wheel-dash`, 1s linear infinite)
- Loading state de newsletter (`newsletter-btn-loading`, 1s ease-in-out infinite)

```css
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: ease-in-out;
--ease-linear: linear;
--duration-fast: 200ms;
--duration-base: 500ms;
--duration-slow: 800ms;
--duration-entrance: 900ms;
--duration-loop: 1s;
--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, los pulses y los blinks se desactivan; el contenido aparece estático.

---

## Anexo: Stack técnico detectado

- **Plataforma / builder**: Astro (framework, rutas `/_astro/` visibles en HTML y CSS), sitio estático con hydración selectiva
- **Framework CSS**: CSS custom con variables en `:root` (no Tailwind), sistema de grid de 16 columnas con `calc()` y `var(--screen-unit)` para escalar tipografía con el viewport
- **Tipografía**: cuatro familias, dos self-hosted y dos disponibles en Google Fonts:
  - **Halyard Display** (variable font, weights 200-900, self-hosted): grotesk para display y labels. No en Google Fonts.
  - **Halyard Text** (variable font, self-hosted): versión text de Halyard para UI. No en Google Fonts.
  - **Literata** (serif variable 200-900, self-hosted en `/fonts/Literata.woff2`): serif para body editorial. Disponible en Google Fonts.
  - **DM Mono** (self-hosted en `/fonts/DM-Mono-400-Latin.woff2`): mono para specs. Disponible en Google Fonts.
- **Animación**: CSS-first con `@keyframes` reales (`bikini-btn-pulse-animation`, `hero-card-dot-blink`, `grip-instruction-wheel-dash`, `newsletter-btn-loading`), todas de 1s con bucle infinite. El hero usa producto 3D con animación de scroll (librería no detectable desde el HTML estático, posiblemente WebGL/Three.js cargado por el JS hoisted).
- **3D / WebGL / Three.js**: probable (el sitio es de Lusion, estudio creativo conocido por WebGL), pero no verificable desde el HTML estático. El JS se carga desde `/_astro/hoisted.CRsATKbF.js`.
- **CDN / assets**: Cloudflare (`static.cloudflareinsights.com`), assets self-hosted en `/_astro/` y `/fonts/` y `/meta/`
- **Comportamiento**: sitio art-directed para un producto físico de café reimaginado para la era IA, experiencia cinematográfica con producto 3D como héroe, scroll horizontal en secciones de producto, y quotes editoriales en Literata serif
- **Autor**: Lusion (estudio creativo, declarado en `<meta name="author">`)