Franco Maria Ricci. Editore.

:root {
  /* Colors */
  --color-vellum-white: #F6F6F6;
  --color-paper: #FFFFFF;
  --color-gallery-ink: #0A0A0A;
  --color-letterpress-black: #000000;
  --color-silver-wash: #B3B3B3;
  --color-burnished-gold: #BC9C5C;

  /* Roles */
  --color-background: #F6F6F6;
  --color-surface: #FFFFFF;
  --color-surface-dark: #0A0A0A;
  --color-text-primary: #000000;
  --color-text-quiet: #626262;
  --color-text-on-dark: #FFFFFF;
  --color-border: #000000;
  --color-accent-stroke: #BC9C5C;
  --color-gold-text-derived: #7A6228;

  /* Typography */
  --font-display: 'Bodoni Moda', ui-serif, Georgia, serif;
  --font-body: 'Bodoni Moda', ui-serif, Georgia, serif;
  --font-util: Arial, Helvetica, sans-serif;
  --font-weight-regular: 400;

  /* Scale */
  --text-heading: 42px;
  --leading-heading: 0.95;
  --text-subheading: 22px;
  --leading-subheading: 1.25;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --leading-default: 1.25;
  --tracking-util: 0.08em;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 48px;
  --card-padding: 40px;
  --element-gap: 20px;

  /* Radius: cero, en todo */
  --radius-none: 0;

  /* Elevation: ninguna */
  --shadow-none: none;

  /* Motion: ninguno, a proposito */
  --transition-none: none;
}

@theme {
  /* Colors */
  --color-vellum-white: #F6F6F6;
  --color-paper: #FFFFFF;
  --color-gallery-ink: #0A0A0A;
  --color-letterpress-black: #000000;
  --color-silver-wash: #B3B3B3;
  --color-burnished-gold: #BC9C5C;

  /* Typography */
  --font-display: 'Bodoni Moda', ui-serif, Georgia, serif;
  --font-body: 'Bodoni Moda', ui-serif, Georgia, serif;
  --font-util: Arial, Helvetica, sans-serif;

  /* Scale */
  --text-heading: 42px;
  --text-heading--line-height: 0.95;
  --text-subheading: 22px;
  --text-subheading--line-height: 1.25;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.25;
  --text-body: 16px;
  --text-body--line-height: 1.25;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.25;
  --text-caption: 12px;
  --text-caption--line-height: 1.25;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-128: 128px;

  /* Radius */
  --radius-none: 0;

  /* Shadows: ninguna */
  --shadow-none: none;
}

{
  "color": {
    "brand": {
      "letterpressBlack": "#000000",
      "burnishedGold": "#BC9C5C"
    },
    "surface": {
      "vellumWhite": "#F6F6F6",
      "paper": "#FFFFFF",
      "silverWash": "#B3B3B3",
      "galleryInk": "#0A0A0A"
    },
    "text": {
      "primary": "#000000",
      "quiet": "#626262",
      "onDark": "#FFFFFF",
      "goldDerived": "#7A6228"
    },
    "rules": {
      "gold": "solo trazo de 1px, nunca relleno ni texto sobre fondo claro"
    },
    "state": {
      "success": "#000000",
      "warning": "#7A6228",
      "error": "#000000",
      "info": "#000000",
      "note": "el sitio no expone estados: introducir color rompe la disciplina de imprenta"
    }
  },
  "font": {
    "display": "Bodoni Moda",
    "body": "Bodoni Moda",
    "utility": "Arial",
    "original": {
      "display": "BodoniSvntytwoITCStd-Book",
      "italic": "BodoniSvntytwoITCStd-BookIt",
      "utility": "Arial"
    },
    "weights": [400],
    "opticalSize": "6..96, activo: es lo que hace usable una didona a 12px",
    "scale": {
      "heading": { "size": "42px", "lineHeight": 0.95 },
      "subheading": { "size": "22px", "lineHeight": 1.25, "style": "italic" },
      "bodyLg": { "size": "18px", "lineHeight": 1.25 },
      "body": { "size": "16px", "lineHeight": 1.25 },
      "bodySm": { "size": "14px", "lineHeight": 1.25 },
      "caption": { "size": "12px", "lineHeight": 1.25 },
      "utility": { "size": "12px", "lineHeight": 1.25, "tracking": "0.08em", "family": "Arial" }
    }
  },
  "spacing": {
    "base": "8px",
    "scale": ["8px", "16px", "20px", "24px", "32px", "40px", "48px", "64px", "80px", "128px"],
    "density": "spacious",
    "sectionGap": "48px",
    "cardPadding": "40px",
    "elementGap": "20px",
    "maxWidth": "1280px"
  },
  "radius": {
    "all": "0"
  },
  "shadow": {
    "all": "none"
  },
  "motion": {
    "all": "none",
    "note": "la pagina se lee como un catalogo impreso; el movimiento rompe la metafora"
  },
  "contrast": {
    "blackOnVellum": "19.43:1",
    "inkOnVellum": "18.32:1",
    "whiteOnInk": "19.80:1",
    "goldOnInk": "7.59:1",
    "goldOnVellum": "2.41:1",
    "silverOnVellum": "1.94:1",
    "inactiveAt40Percent": "2.81:1"
  }
}

---
version: "1.0"
name: "Franco Maria Ricci Editore"
description: "Sistema visual de catalogo de galeria art deco: vitela calida (#F6F6F6), una sola voz Bodoni de alto contraste, y un hilo de oro bruñido (#BC9C5C) que solo existe como filete de 1px, nunca como relleno. Radio 0 en todo, ni una sombra, ni un boton relleno: cada accion es texto con una linea debajo."
colors:
  primary: "#000000"
  primary-hover: "#BC9C5C"
  primary-active: "#0A0A0A"
  secondary: "#FFFFFF"
  accent: "#BC9C5C"
  accent-soft: "#EDE4D2"
  neutral: "#B3B3B3"
  background: "#F6F6F6"
  surface: "#FFFFFF"
  surface-elevated: "#0A0A0A"
  text-primary: "#000000"
  text-secondary: "#626262"
  text-muted: "#B3B3B3"
  text-on-primary: "#FFFFFF"
  text-accent: "#7A6228"
  border: "#000000"
  border-subtle: "#BC9C5C"
  success: "#000000"
  success-bg: "#FFFFFF"
  warning: "#7A6228"
  warning-bg: "#EDE4D2"
  error: "#000000"
  error-bg: "#FFFFFF"
  info: "#000000"
  info-bg: "#FFFFFF"
typography:
  heading:
    fontFamily: "Bodoni Moda"
    fontSize: "42px"
    fontWeight: 400
    lineHeight: "0.95"
    letterSpacing: "0"
  subheading:
    fontFamily: "Bodoni Moda"
    fontSize: "22px"
    fontWeight: 400
    lineHeight: "1.25"
    letterSpacing: "0"
  body-lg:
    fontFamily: "Bodoni Moda"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "1.25"
    letterSpacing: "0"
  body:
    fontFamily: "Bodoni Moda"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.25"
    letterSpacing: "0"
  body-sm:
    fontFamily: "Bodoni Moda"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.25"
    letterSpacing: "0"
  caption:
    fontFamily: "Bodoni Moda"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.25"
    letterSpacing: "0"
  utility:
    fontFamily: "Arial"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.25"
    letterSpacing: "0.08em"
rounded:
  sm: "0"
  md: "0"
  lg: "0"
  xl: "0"
  pill: "0"
  full: "0"
spacing:
  base: "8px"
  sm: "16px"
  md: "24px"
  lg: "40px"
  xl: "48px"
  2xl: "80px"
  3xl: "128px"
  gap: "20px"
  section-padding: "48px"
components:
  button-primary:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    fontSize: "14px"
    fontWeight: 400
    letterSpacing: "0"
    padding: "0 0 4px"
    borderRadius: "0"
    border: "none"
    boxShadow: "none"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    fontSize: "14px"
    fontWeight: 400
    letterSpacing: "0"
    padding: "0 0 4px"
    borderRadius: "0"
    border: "none"
    boxShadow: "none"
  input:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    fontSize: "14px"
    padding: "8px 0"
    borderRadius: "0"
    border: "none"
    boxShadow: "none"
  card:
    backgroundColor: "{colors.surface}"
    padding: "40px"
    borderRadius: "0"
    border: "none"
    boxShadow: "none"
  badge:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    fontSize: "12px"
    fontWeight: 400
    letterSpacing: "0.08em"
    padding: "0"
    borderRadius: "0"
    border: "none"
    boxShadow: "none"
---

# DESIGN.md - Franco Maria Ricci Editore

Sistema visual extraido de https://www.francomariaricci.com/en.
Fuente de los valores: la ficha publica de refero.design para el dominio, contrastada con
la captura real de portada. Los contrastes WCAG estan medidos aqui, no copiados, y uno de
ellos senala un problema real en un comportamiento que la propia fuente prescribe. Los
valores marcados `(derivado para completar el sistema)` no aparecen en el sitio y se han
construido desde la familia real.

## 1. Tema Visual y Atmosfera

Franco Maria Ricci publica libros de arte, y su web se comporta como uno de sus libros. No
es una tienda con estetica editorial: es un catalogo de galeria que ademas vende. La pagina
es un scroll largo dividido en salas de exposicion, cada una presentada por un titulo en
Bodoni cursiva con un filete de oro debajo.

La decision que define el sistema es que el oro nunca rellena. `#BC9C5C` existe como linea
de 1px y nada mas: subrayado de cabecera de seccion, filete bajo un enlace, borde
decorativo de un titulo. En cuanto se convierte en fondo de boton, la marca pasa de editor
de arte a hotel de lujo.

La segunda decision es que no hay botones. Toda accion es texto con una raya debajo, y las
principales van entre llaves literales, `{ ORDER NOW }`, como convencion tipografica de
imprenta. No hay ni una esquina redondeada, ni una sombra, ni una transicion: la pagina se
lee como papel impreso y el movimiento romperia la metafora.

Palabras clave: vitela, Bodoni, filete de oro, vitrina, cero relleno.

## 2. Paleta de Colores y Roles Semanticos

Seis colores. Cinco son neutros y el sexto es una linea.

### Colores de marca

| Nombre | Hex | Rol |
|---|---|---|
| Letterpress Black | `#000000` | Cuerpo, navegacion, iconos, todos los filetes y bordes, marcas de paginacion. Es la tinta estructural del sistema |
| Burnished Gold | `#BC9C5C` | Subrayado de cabecera de seccion, filete de hover, borde decorativo de titulo. La unica voz cromatica, siempre como trazo de 1px |

### Colores de superficie

| Nombre | Hex | Rol |
|---|---|---|
| Vellum White | `#F6F6F6` | Lienzo de pagina. El blanco roto calido que impide que el Bodoni se lea clinico |
| Paper | `#FFFFFF` | Superficie de card y de columna, un escalon por encima de la vitela |
| Silver Wash | `#B3B3B3` | Panel secundario de hero y ruptura tonal tranquila. Se usa con cuentagotas |
| Gallery Ink | `#0A0A0A` | Banda oscura (bloque de la revista, pie). Es negro de imprenta, no negro de pantalla |

Que la vitela y el papel se diferencien tan poco es intencionado: el escalon de superficie
delimita sin pesar. Lo que separa de verdad son los filetes verticales de 1px entre
columnas.

### Colores de texto

Contrastes medidos con la formula de WCAG, no estimados.

| Nombre | Hex | Rol | Contraste |
|---|---|---|---|
| Letterpress Black | `#000000` | Texto sobre vitela | 19.43:1 sobre `#F6F6F6`, AAA |
| Gallery Ink | `#0A0A0A` | Enfasis tipografico maximo | 18.32:1 sobre `#F6F6F6`, AAA |
| Blanco sobre Ink | `#FFFFFF` | Texto de la banda oscura | 19.80:1 sobre `#0A0A0A`, AAA |
| Burnished Gold sobre Ink | `#BC9C5C` | Oro dentro de la banda oscura | 7.59:1 sobre `#0A0A0A`, AAA |
| Burnished Gold sobre vitela | `#BC9C5C` | Filete de 1px, no texto | 2.41:1 sobre `#F6F6F6`, no apto para texto |
| Silver Wash | `#B3B3B3` | Superficie, no texto | 1.94:1 sobre `#F6F6F6`, decorativo |

Dos cosas que salen de medir y no de mirar:

- **El estado hover que prescribe la fuente vuelve ilegible el enlace.** La ficha de origen
  dice que al pasar el raton sobre un enlace fantasma cambian a oro *el filete y el texto*.
  Medido, ese enlace pasa de 19.43:1 a 2.41:1: un texto de 14px en `#BC9C5C` sobre la vitela
  no se lee. Y no hace falta romper nada para arreglarlo, porque el arreglo ya esta en las
  reglas del propio sistema: **el oro es color de trazo.** El texto se queda en negro y solo
  el filete pasa a oro. La lectura editorial se conserva entera y el enlace sigue cumpliendo.
  Si en algun sitio hace falta un oro que si sea texto, `#7A6228` da 5.39:1 y mantiene el
  tono; conviene marcarlo como derivado, porque no esta en el sitio.
- **La categoria inactiva al 40 por ciento tampoco se lee.** El sistema pinta las categorias
  no activas en negro al 40 por ciento de opacidad, que sobre la vitela resuelve a 2.81:1.
  Para que un rotulo de 22px cumpla el 3:1 de texto grande basta con subirlo al 50 por
  ciento; para que cumpla AA como texto normal hay que llegar al 60 por ciento
  (aproximadamente `#626262`, 5.64:1). Como aqui son rotulos de 22px, el 50 por ciento es
  suficiente y casi no cambia el aspecto.

### Colores de estado

El sitio no expone ninguno. Meter un rojo de validacion introduciria el segundo color
cromatico del sistema y destruiria la disciplina de imprenta.

| Estado | Color | Fondo | Origen |
|---|---|---|---|
| Success | `#000000` | `#FFFFFF` | *(derivado)*: se resuelve en tipografia, no en color |
| Warning | `#7A6228` | `#EDE4D2` | *(derivado)*: oro oscurecido hasta 5.39:1, dentro de la familia |
| Error | `#000000` | `#FFFFFF` | *(derivado)*: el campo con error engrosa su filete a 2px, no se tine |
| Info | `#000000` | `#FFFFFF` | *(derivado)* |

## 3. Reglas de Tipografia

Una sola voz, en redonda y en cursiva, mas una sans de sistema que solo escribe cifras.

### Sustitucion

**Original: Bodoni Svntytwo ITC Std Book y Book Italic -> HTML: Bodoni Moda (Google substitute).**

Aqui hay que decir una cosa en voz alta: Bodoni Moda esta en la lista de tipografias que
este repositorio evita por defecto, junto a Playfair Display y compania. La razon de esa
lista es que son las que un generador elige cuando no sabe que elegir. Este caso es el
contrario: **la voz de la marca literalmente es un Bodoni de 72 puntos**, y Bodoni Moda es
la revision libre mas cercana a ese corte. La regla del repositorio contempla exactamente
esto, la fidelidad manda, asi que se usa.

Se compararon las tres alternativas razonables:

- **Playfair Display** es un transitional con contraste alto, no una didona. Sus terminales
  en gota y su eje ligeramente inclinado se notan de inmediato al lado de un Bodoni real.
- **Libre Bodoni** es un Bodoni de contraste rebajado, pensado para texto. Aguanta mejor a
  12px, pero a 42px pierde justo el filo que hace reconocible al original.
- **Bodoni Moda** trae un eje de tamano optico de 6 a 96, y ese eje es el que resuelve el
  problema clasico de las didonas: a 42px sirve el corte de alto contraste y a 12px sirve
  uno mas robusto, con los trazos finos engordados. Sin ese eje, un Bodoni a 12px se rompe
  en pantalla.

Se elige Bodoni Moda, con cursiva real, y usando el eje `opsz` en vez de dejarlo fijo.

**Arial se queda como Arial.** El sitio usa Arial de verdad para los contadores de
paginacion, los avisos de envio y las etiquetas de formulario. No es una sustitucion ni un
descuido: es la sans neutra del sistema y esta ahi para contrastar con el Bodoni. Al ser
fuente de sistema, no hace falta descargarla.

### Reparto

- **Bodoni Moda redonda**, peso 400. Todo lo editorial: titular, aperturas de seccion,
  cuerpo, metadatos de libro, navegacion, pies.
- **Bodoni Moda cursiva**, peso 400. Solo ornamento: el subtitulo Editore del logotipo, los
  titulos de seccion, las notas poeticas. **La cursiva no es enfasis, es registro.** Una
  linea en cursiva al lado de un titular en redonda cambia el tono de la pagina entera.
- **Arial**, pesos 400 y 700, a 12px y 14px. Contadores de paginacion, etiquetas de
  formulario y metadatos sueltos. Nunca titulares ni texto editorial.

El sistema tiene un unico peso, 400, en toda su voz principal. No hay negrita en el Bodoni
en ningun sitio.

### Escala tipografica

| Rol | Fuente | Tamano | Peso | Interlineado |
|---|---|---|---|---|
| heading | Bodoni Moda | 42px | 400 | 0.95 |
| subheading | Bodoni Moda cursiva | 22px | 400 | 1.25 |
| body-lg | Bodoni Moda | 18px | 400 | 1.25 |
| body | Bodoni Moda | 16px | 400 | 1.25 |
| body-sm | Bodoni Moda | 14px | 400 | 1.25 |
| caption | Bodoni Moda | 12px | 400 | 1.25 |
| utility | Arial | 12px o 14px | 400 o 700 | 1.25 |

El interlineado de 0.95 en el titular de 42px no es un descuido: es lo que hace que las
mayusculas altas del Bodoni se traben en un solo objeto tipografico. Subirlo a 1.2 deshace
el bloque.

Fuera de ese titular, todo el sistema vive en 1.25. Es una escala corta y muy plana, y esa
falta de jerarquia intermedia es lo que le da el aire de pagina impresa.

### Letter spacing

Normal en todo el Bodoni. La unica excepcion es la palabra MAGAZINE bajo el logotipo de la
revista, en Arial de 12px con el tracking abierto, y las etiquetas de utilidad. El Bodoni
no lleva tracking en ningun tamano: abrirlo o cerrarlo estropea su ritmo de trazo fino y
trazo grueso.

## 4. Estilos de Componentes

Radio 0 en todo. Sin sombras. Sin rellenos. Es probablemente el sistema mas austero de la
galeria.

### Acciones

**Enlace fantasma (la accion del sistema)**

```css
background: transparent;
color: #000000;
font: 400 14px/1.25 "Bodoni Moda";
padding: 0 0 4px;
border: none;
border-bottom: 1px solid #000000;
border-radius: 0;
```

Estado hover, **corregido respecto a la fuente**:

```css
border-bottom-color: #BC9C5C;   /* solo el filete pasa a oro */
color: #000000;                  /* el texto se queda en negro */
```

La fuente original cambia tambien el color del texto, y eso deja el enlace en 2.41:1. Como
el propio sistema declara que el oro es color de trazo, la correccion no inventa nada.

**Variante entre llaves**

```
{ ORDER NOW }
```

Las llaves son caracteres literales, no un borde estilado. Es una convencion de imprenta y
se usa para la accion principal de un bloque. Mismo filete de 1px debajo.

Estados *(derivados para completar el sistema)*:

| Estado | Cambio |
|---|---|
| active | `border-bottom-width: 2px` |
| focus-visible | `outline: 1px solid #000000; outline-offset: 4px` |
| disabled | `color: #626262; border-bottom-color: #B3B3B3` |

### Barra superior

Una sola fila horizontal, transparente sobre la vitela. A la izquierda el monograma, un
emblema circular con una letra serif en negro. A la derecha, el logotipo Franco Maria Ricci
en Bodoni de 14px con el subtitulo Editore en cursiva de 12px debajo, y despues dos iconos
de linea de 16px con trazo de 1px: bolsa y menu. Sin fondo, sin borde, sin sombra. No es
pegajosa. Padding vertical de 40px.

### Bloque de hero

Reparto en dos: un tercio de texto a la izquierda y dos tercios de plancha ilustrada a la
derecha. El titular a 42px con interlineado 0.95, el parrafo a 16px con un ancho maximo de
unos 320px, y debajo la accion entre llaves. La plancha no lleva marco, ni radio, ni
recorte: se apoya directamente en la vitela.

### Titulo de seccion con filete de oro

Texto centrado en Bodoni cursiva de 22px en negro, y debajo un filete horizontal de 1px en
`#BC9C5C` que abarca todo el ancho de la columna. Aparece antes de cada banda de seleccion.
Es el gesto cromatico del sistema y avisa de que empieza una sala nueva.

### Rejilla de tres columnas

Tres columnas iguales separadas por **filetes verticales de 1px en negro a toda la altura**.
Cada columna lleva 40px de padding interno y superficie blanca. Las portadas van centradas
con mucho aire arriba y abajo.

La regla dura: los filetes no se pueden sustituir por gutters ni por padding. Los divisores
son la arquitectura, y sin ellos las columnas dejan de parecer vitrinas contiguas y pasan a
parecer tarjetas.

### Plancha de portada

Portada centrada con 24px de margen desde el filete. Sin pie, sin precio y sin boton de
compra a nivel de rejilla: la interaccion la implica el propio objeto. Proporciones
originales, sin recorte y sin marco.

### Banda de la revista

Franja a sangre de en torno al 40 por ciento de la altura del viewport, con superficie
`#0A0A0A`. En la mitad izquierda una portada de revista a color; en la derecha, el logotipo
en Bodoni de 42px en blanco y debajo la palabra MAGAZINE en Arial de 12px con el tracking
abierto. Es la unica ruptura oscura de todo el scroll.

### Indicador de paginacion

Esquina inferior derecha. Formato `2 / 5` flanqueado por flechas finas, en Bodoni cursiva de
14px o en Arial de 12px. Sin fondo y sin borde. Opcionalmente un filete de 1px encima,
alineado al borde de la pagina con 20px de retranqueo.

### Trio de categorias

Rotulo de tres partes repartido por la rejilla: la categoria activa en Bodoni cursiva de
22px en negro con un subrayado de 1px en oro, y las inactivas en redonda y rebajadas de
opacidad. Como se explica arriba, el 40 por ciento que declara la fuente se queda en 2.81:1;
al 50 por ciento cumple el umbral de texto grande sin cambiar apenas de aspecto.

## 5. Principios de Layout

### Escala de espaciado

Base de 8px, densidad espaciosa. Es un sistema que se permite el aire.

| Token | Valor | Uso |
|---|---|---|
| `--spacing-8` | 8px | Unidad base |
| `--spacing-16` | 16px | Separacion minima entre lineas de bloque |
| `--spacing-20` | 20px | Gap entre elementos, retranqueo de paginacion |
| `--spacing-24` | 24px | Margen de la portada respecto al filete |
| `--spacing-32` | 32px | Separacion dentro de bloque |
| `--spacing-40` | 40px | Padding interno de columna, padding vertical de la barra |
| `--spacing-48` | 48px | Gap entre secciones |
| `--spacing-64` | 64px | Padding horizontal del contenedor |
| `--spacing-80` | 80px | Aire entre bandas |
| `--spacing-128` | 128px | Respiro de sala |

### Contenedores

Ancho maximo de 1280px, centrado, con 40px de padding horizontal en el contenedor exterior.
La plancha del hero y la banda de la revista se salen a sangre.

### Grid

La pagina alterna dos formas: rejillas de tres columnas con filetes verticales y bloques
editoriales de una sola columna a sangre. No hay barra lateral, no hay mega menu y no hay
chrome de pie visible por encima del pliegue. La paginacion es la unica ayuda de navegacion
persistente.

### Filosofia de espaciado

El aire esta entre objetos, no dentro de ellos. Dentro de la columna hay 40px de padding y
poco mas; entre bandas hay 48px o mas. Es la logica de una sala de museo: las piezas
respiran, la pared no.

## 6. Profundidad y Elevacion

No hay sombras. Ninguna. Tampoco desenfoques ni brillos.

La elevacion se comunica con dos recursos: la superposicion tonal de los cinco neutros y el
filete de 1px, en negro o en oro.

| Nivel | Nombre | Hex | Uso |
|---|---|---|---|
| 0 | Vellum | `#F6F6F6` | Lienzo base |
| 1 | Paper | `#FFFFFF` | Cards y columnas |
| 2 | Silver Wash | `#B3B3B3` | Paneles apagados de hero |
| 3 | Gallery Ink | `#0A0A0A` | Bloques editoriales oscuros |
| 4 | Letterpress Black | `#000000` | La superficie oscura mas dramatica |

### Radios de borde

| Token | Valor | Uso |
|---|---|---|
| `--radius-none` | 0 | Todo. Botones, cards, inputs, imagenes, etiquetas |

Cero curvas. La suavidad de este sistema viene de la tipografia y del blanco, no de las
esquinas.

## 7. Lo que Si y lo que No

### Si hacer

- Usar el oro solo como trazo de 1px: subrayado de seccion, filete de hover, borde de
  titulo.
- Poner el titular a 42px con interlineado 0.95, que es lo que traba las mayusculas del
  Bodoni en un solo bloque.
- Reservar la cursiva para el ornamento: subtitulo del logotipo, apertura de seccion, nota
  al margen. La redonda lleva el peso.
- Separar las columnas con filetes verticales de 1px en negro a toda la altura. El divisor
  es la arquitectura.
- Mantener todos los radios en 0.
- Usar `#F6F6F6` como lienzo, no blanco puro, para que el Bodoni no se lea clinico.
- Expresar toda accion como texto con filete debajo, y usar las llaves literales para la
  principal.
- Dejar el texto del enlace en negro al pasar el raton y mover solo el filete a oro.

### No hacer

- No meter sombras, desenfoques ni brillos. El sistema es plano y su elevacion es tonal.
- No usar el oro como relleno de fondo en botones, badges ni superficies. Es color de trazo.
- No redondear ninguna esquina.
- No introducir un segundo acento cromatico. La paleta es monocroma mas un oro.
- No usar Arial para titulares ni para texto editorial.
- No subir el interlineado del titular de 42px por encima de 0.95.
- No anadir animaciones de hover, transiciones ni microinteracciones. La pagina se lee como
  un catalogo impreso y el movimiento rompe la metafora.
- No poner texto en `#BC9C5C` sobre fondo claro: 2.41:1.
- No dejar las categorias inactivas al 40 por ciento de opacidad: 2.81:1.

## 8. Comportamiento Responsive

### Breakpoints *(derivados para completar el sistema)*

| Nombre | Ancho |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px, ancho maximo del contenedor |

### Cambios por breakpoint

- **Hero:** el reparto de un tercio de texto y dos tercios de plancha se apila. La plancha
  va primero, porque el objeto es la pieza.
- **Titular:** de 42px baja a 30px conservando el 0.95. La compresion es identidad.
- **Rejilla de tres columnas:** pasa a dos y despues a una. Al apilarse, **los filetes
  verticales se convierten en horizontales**, no desaparecen: sin divisor las columnas dejan
  de ser vitrinas.
- **Padding de columna:** de 40px a 24px.
- **Gap de seccion:** de 48px a 32px.
- **Banda de la revista:** de dos mitades a pila, con la portada arriba.
- **Paginacion:** se queda en la esquina inferior derecha, con 20px de retranqueo.

### Touch targets

Aqui esta el punto debil del sistema en movil: los enlaces son texto de 14px con un filete,
sin caja. Necesitan 14px de padding vertical invisible para llegar a los 44px, sin cambiar
su aspecto. Los iconos de 16px de la barra necesitan un area de 44px por el mismo motivo.
*(derivado para completar el sistema)*

### Filosofia responsive

Lo que se protege primero son los filetes, porque son la estructura. Despues, el aire entre
bandas. La escala del titular es lo primero que cede, y puede ceder mucho sin que el sistema
se resienta.

## 9. Guia de Prompts para Agentes

### Referencia rapida de color

- texto: `#000000`
- fondo: `#F6F6F6`
- superficie de card: `#FFFFFF`
- filete: `#000000`, 1px
- trazo de acento: `#BC9C5C`, 1px
- banda oscura: `#0A0A0A`
- accion: no hay color de accion, es texto con filete

### Prompt de inicializacion de sesion

```
Trabaja con el sistema Franco Maria Ricci. Lienzo #F6F6F6, texto #000000, cards
#FFFFFF, banda oscura #0A0A0A, gris de apoyo #B3B3B3. Un unico color cromatico,
#BC9C5C, y solo como trazo de 1px: nunca relleno, nunca texto sobre fondo claro.
Tipografia: Bodoni Moda peso 400 para todo lo editorial, en redonda y en cursiva, con
el eje de tamano optico activo; Arial 12px y 14px solo para contadores y etiquetas de
utilidad. Titular a 42px con interlineado 0.95; el resto del sistema a 1.25. Espaciado
base 8px, 48px entre secciones, 40px de padding de columna. border-radius 0 en todo.
Prohibidas las sombras, los rellenos de boton y las transiciones.
```

### Prompt: crear pantalla nueva

```
Monta la pantalla sobre #F6F6F6 con contenedor de 1280px y 40px de padding lateral.
Barra superior transparente con monograma a la izquierda y logotipo mas iconos de linea
a la derecha, sin fondo y sin borde. Hero partido: un tercio de texto a la izquierda con
titular en Bodoni Moda 42px, interlineado 0.95, y accion { ORDER NOW } en 14px con
filete de 1px negro debajo; dos tercios de plancha ilustrada a la derecha, sin marco y
sin radio. Debajo, titulo de seccion centrado en cursiva de 22px con filete de 1px en
#BC9C5C, y una rejilla de tres columnas sobre blanco separadas por filetes verticales de
1px negros a toda la altura, con 40px de padding interno. Sin sombras, sin curvas y sin
transiciones.
```

### Prompt: anadir componente al kit

```
Anade el componente con radio 0, sin sombra y sin relleno de color. Si necesita
separarse, usa un filete de 1px en negro o un cambio de superficie entre #F6F6F6 y
#FFFFFF. Si necesita una accion, escribela como texto con filete debajo, opcionalmente
entre llaves. El oro solo puede aparecer como linea de 1px. Si el componente lleva
cifras o etiquetas de utilidad, esas van en Arial; todo lo demas va en Bodoni.
```

### Prompt: revision de consistencia

```
Revisa la pantalla contra el sistema Franco Maria Ricci y senala: 1) cualquier
border-radius distinto de 0, 2) cualquier box-shadow, 3) cualquier uso de #BC9C5C como
relleno o como color de texto sobre fondo claro, 4) cualquier boton con fondo, 5) Arial
usada en un titular o en texto editorial, 6) el titular de 42px con interlineado por
encima de 0.95, 7) una rejilla de tres columnas sin filetes verticales, 8) cualquier
transicion o animacion de hover, 9) un segundo color cromatico, 10) categorias inactivas
por debajo del 50 por ciento de opacidad.
```

### Prompt: variante de campana

```
Para una campana puedes dedicar una pantalla entera a una sola plancha ilustrada, a
sangre, con el titular en Bodoni cursiva encima del blanco y la accion entre llaves
abajo. Tambien puedes usar la banda oscura como apertura en vez de como ruptura. Lo que
no puedes cambiar: el radio 0, la ausencia de sombra, el oro como trazo y la escala
plana de 1.25.
```

## 10. Movimiento (Motion)

Este es el unico sistema de la galeria en el que la respuesta correcta es **ninguno**. La
fuente lo dice explicitamente: sin animaciones de hover, sin transiciones y sin
microinteracciones, porque la pagina se lee como un catalogo impreso.

| Elemento | Propiedad | Duracion | Curva |
|---|---|---|---|
| Enlace, hover | border-bottom-color | 0ms | cambio inmediato |
| Paginacion, cambio de plancha | opacity | 0ms | corte |
| Cualquier otro | ninguna | 0ms | ninguna |

Si se decide anadir algo, el techo razonable es un cambio de color de filete de 100ms sin
desplazamiento ni escala. *(derivado para completar el sistema)*. Respetar siempre
`prefers-reduced-motion`, que en este sistema no cambia nada porque no hay nada que reducir.

## Anexo: Stack tecnico detectado

| Aspecto | Valor |
|---|---|
| URL de origen | https://www.francomariaricci.com/en |
| Tema | light |
| Familia de color | neutral, con un unico acento en oro |
| Color dominante declarado | `#000000` |
| Tipografias reales | BodoniSvntytwoITCStd-Book y -BookIt, mas Arial de sistema |
| Disponibles en Google Fonts | El Bodoni no. Sustituido por Bodoni Moda con eje de tamano optico. Arial se queda como Arial, que es lo que usa el sitio |
| Unidad base de espaciado | 8px |
| Densidad | espaciosa |
| Ancho maximo | 1280px |
| Radios | 0 en todo |
| Sombras | ninguna |
| Gradientes | ninguno |
| Imagenes | planchas de arte a gran escala sin marco ni recorte, y portadas de libro de frente sobre blanco. Tratadas como objetos de museo. Iconos de 16px con trazo de 1px |

Nota de fidelidad: la identidad central (paleta, escala, uso del oro como trazo, radio 0,
ausencia de sombra y de movimiento) sale del sitio real y de su ficha publica. La
sustitucion tipografica esta declarada arriba, incluida la razon por la que se usa una
familia que este repositorio evita por defecto. Los estados de interaccion, los colores
semanticos, los breakpoints y el techo de motion estan marcados como derivados alli donde
aparecen. El estado hover del enlace se aparta de lo que dice la fuente porque medido deja
el texto en 2.41:1, y la correccion se apoya en una regla del propio sistema.