FOUDRE

:root {
  /* Colors */
  --color-lipstick-magenta: #DB3C8A;
  --color-forest-ink: #00522D;
  --color-blush-cream: #FCE5DF;
  --color-warm-chalk: #FFF8F6;
  --color-charcoal-black: #000000;
  --color-lilac-mist: #D1CFE4;
  --color-bubblegum: #F29EBD;
  --color-cotton-pink: #E878B2;

  /* Roles */
  --color-background: #FFF8F6;
  --color-surface: #FCE5DF;
  --color-surface-elevated: #E878B2;
  --color-text-primary: #00522D;
  --color-text-accent: #DB3C8A;
  --color-text-on-primary: #000000;
  --color-primary: #DB3C8A;
  --color-primary-hover: #C42F79;
  --color-primary-active: #A82766;
  --color-border: #FCE5DF;
  --color-border-subtle: #D1CFE4;
  --color-success: #00522D;
  --color-success-bg: #E4EFE8;
  --color-warning: #8A5A00;
  --color-warning-bg: #FAF0DC;
  --color-error: #A3123F;
  --color-error-bg: #FCE5DF;

  /* Typography */
  --font-display: 'Archivo Black', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Leading: la regla dura del sistema */
  --leading-display: 0.70;
  --leading-text: 1.20;

  /* Scale */
  --text-display: 230px;
  --text-heading-lg: 130px;
  --text-heading: 94px;
  --text-heading-sm: 80px;
  --text-subheading: 46px;
  --text-body: 20px;
  --text-body-sm: 16px;
  --text-caption: 14px;
  --text-label: 12px;
  --text-micro: 10px;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-140: 140px;

  /* Layout */
  --page-max-width: 1440px;
  --reading-max-width: 60ch;
  --section-gap: 120px;
  --card-padding: 30px;
  --element-gap: 20px;

  /* Radius */
  --radius-button: 10px;
  --radius-badge: 10px;
  --radius-card: 20px;
  --radius-elevated: 25px;
  --radius-full: 9999px;

  /* Elevation: el sistema es plano, esto es literal */
  --shadow-none: none;
}

@theme {
  /* Colors */
  --color-lipstick-magenta: #DB3C8A;
  --color-forest-ink: #00522D;
  --color-blush-cream: #FCE5DF;
  --color-warm-chalk: #FFF8F6;
  --color-charcoal-black: #000000;
  --color-lilac-mist: #D1CFE4;
  --color-bubblegum: #F29EBD;
  --color-cotton-pink: #E878B2;

  /* Typography */
  --font-display: 'Archivo Black', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

  /* Scale */
  --text-display: 230px;
  --text-display--line-height: 0.70;
  --text-heading-lg: 130px;
  --text-heading-lg--line-height: 0.70;
  --text-heading: 94px;
  --text-heading--line-height: 0.70;
  --text-heading-sm: 80px;
  --text-heading-sm--line-height: 0.70;
  --text-subheading: 46px;
  --text-subheading--line-height: 0.70;
  --text-body: 20px;
  --text-body--line-height: 1.20;
  --text-body-sm: 16px;
  --text-body-sm--line-height: 1.20;
  --text-caption: 14px;
  --text-caption--line-height: 1.20;
  --text-label: 12px;
  --text-label--line-height: 1.20;
  --text-micro: 10px;
  --text-micro--line-height: 1.20;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-140: 140px;

  /* Radius */
  --radius-button: 10px;
  --radius-card: 20px;
  --radius-elevated: 25px;
  --radius-full: 9999px;

  /* Shadows: ninguna, a proposito */
  --shadow-none: none;
}

{
  "color": {
    "brand": {
      "lipstickMagenta": "#DB3C8A",
      "forestInk": "#00522D"
    },
    "surface": {
      "warmChalk": "#FFF8F6",
      "blushCream": "#FCE5DF",
      "cottonPink": "#E878B2"
    },
    "support": {
      "bubblegum": "#F29EBD",
      "lilacMist": "#D1CFE4",
      "charcoalBlack": "#000000"
    },
    "text": {
      "primary": "#00522D",
      "accent": "#DB3C8A",
      "onMagenta": "#000000",
      "onForest": "#FCE5DF"
    },
    "state": {
      "success": "#00522D",
      "successBg": "#E4EFE8",
      "warning": "#8A5A00",
      "warningBg": "#FAF0DC",
      "error": "#A3123F",
      "errorBg": "#FCE5DF"
    }
  },
  "font": {
    "display": "Archivo Black",
    "body": "Space Grotesk",
    "original": {
      "display": "Beni",
      "body": "Clash Grotesk"
    },
    "weights": [400, 500, 700],
    "leading": {
      "display": 0.7,
      "text": 1.2
    },
    "tracking": "0 en toda la escala",
    "scale": {
      "display": { "size": "230px", "lineHeightPx": "161px" },
      "headingLg": { "size": "130px", "lineHeightPx": "91px" },
      "heading": { "size": "94px", "lineHeightPx": "66px" },
      "headingSm": { "size": "80px", "lineHeightPx": "56px" },
      "subheading": { "size": "46px", "lineHeightPx": "32px" },
      "body": { "size": "20px", "lineHeightPx": "24px" },
      "bodySm": { "size": "16px", "lineHeightPx": "19px" },
      "caption": { "size": "14px", "lineHeightPx": "17px" },
      "label": { "size": "12px", "lineHeightPx": "14px" },
      "micro": { "size": "10px", "lineHeightPx": "12px" }
    }
  },
  "spacing": {
    "base": "4px",
    "scale": ["8px", "12px", "20px", "30px", "60px", "120px", "140px"],
    "density": "comfortable",
    "sectionGap": "120px",
    "cardPadding": "30px",
    "elementGap": "20px",
    "maxWidth": "1440px",
    "readingMaxWidth": "60ch"
  },
  "radius": {
    "button": "10px",
    "badge": "10px",
    "card": "20px",
    "elevated": "25px",
    "full": "9999px"
  },
  "shadow": {
    "all": "none"
  },
  "contrast": {
    "forestOnChalk": "8.91:1",
    "forestOnBlush": "7.76:1",
    "magentaOnChalk": "3.98:1",
    "blackOnMagenta": "5.03:1",
    "whiteOnMagenta": "4.18:1",
    "magentaOnForest": "2.24:1",
    "blackOnChalk": "20.01:1",
    "bubblegumOnChalk": "1.92:1",
    "lilacOnChalk": "1.45:1"
  }
}

---
version: "1.0"
name: "Agence Foudre"
description: "Sistema visual de portada de revista en rosa pintalabios: lienzo tiza cálida (#FFF8F6), display negro a 230px con interlineado 0.70 que apelmaza las líneas en bloques arquitectónicos, y un verde bosque (#00522D) que hace de cuerpo de texto donde cualquier otra marca pondría gris. Dos círculos rosas en las esquinas son toda la navegación."
colors:
  primary: "#DB3C8A"
  primary-hover: "#C42F79"
  primary-active: "#A82766"
  secondary: "#00522D"
  accent: "#F29EBD"
  accent-soft: "#FCE5DF"
  neutral: "#D1CFE4"
  background: "#FFF8F6"
  surface: "#FCE5DF"
  surface-elevated: "#E878B2"
  text-primary: "#00522D"
  text-secondary: "#DB3C8A"
  text-muted: "#F29EBD"
  text-on-primary: "#000000"
  text-accent: "#DB3C8A"
  border: "#FCE5DF"
  border-subtle: "#D1CFE4"
  success: "#00522D"
  success-bg: "#E4EFE8"
  warning: "#8A5A00"
  warning-bg: "#FAF0DC"
  error: "#A3123F"
  error-bg: "#FCE5DF"
  info: "#00522D"
  info-bg: "#FCE5DF"
typography:
  display:
    fontFamily: "Archivo Black"
    fontSize: "230px"
    fontWeight: 400
    lineHeight: "0.7"
    letterSpacing: "0"
  heading-lg:
    fontFamily: "Archivo Black"
    fontSize: "130px"
    fontWeight: 400
    lineHeight: "0.7"
    letterSpacing: "0"
  heading:
    fontFamily: "Archivo Black"
    fontSize: "94px"
    fontWeight: 400
    lineHeight: "0.7"
    letterSpacing: "0"
  heading-sm:
    fontFamily: "Archivo Black"
    fontSize: "80px"
    fontWeight: 400
    lineHeight: "0.7"
    letterSpacing: "0"
  subheading:
    fontFamily: "Archivo Black"
    fontSize: "46px"
    fontWeight: 400
    lineHeight: "0.7"
    letterSpacing: "0"
  body:
    fontFamily: "Space Grotesk"
    fontSize: "20px"
    fontWeight: 400
    lineHeight: "1.2"
    letterSpacing: "0"
  body-sm:
    fontFamily: "Space Grotesk"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.2"
    letterSpacing: "0"
  caption:
    fontFamily: "Space Grotesk"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "1.2"
    letterSpacing: "0"
  label:
    fontFamily: "Space Grotesk"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: "1.2"
    letterSpacing: "0"
  micro:
    fontFamily: "Space Grotesk"
    fontSize: "10px"
    fontWeight: 500
    lineHeight: "1.2"
    letterSpacing: "0"
rounded:
  sm: "10px"
  md: "10px"
  lg: "20px"
  xl: "25px"
  pill: "9999px"
  full: "9999px"
spacing:
  base: "4px"
  sm: "8px"
  md: "12px"
  lg: "20px"
  xl: "30px"
  2xl: "60px"
  3xl: "120px"
  gap: "20px"
  section-padding: "120px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-primary}"
    fontSize: "16px"
    fontWeight: 700
    letterSpacing: "0"
    padding: "12px 20px"
    borderRadius: "{rounded.md}"
    border: "none"
    boxShadow: "none"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    fontSize: "16px"
    fontWeight: 500
    letterSpacing: "0"
    padding: "12px 0"
    borderRadius: "0"
    border: "none"
    boxShadow: "none"
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text-primary}"
    fontSize: "16px"
    padding: "12px 20px"
    borderRadius: "{rounded.md}"
    border: "1px solid {colors.surface}"
    boxShadow: "none"
  card:
    backgroundColor: "{colors.surface}"
    padding: "30px"
    borderRadius: "{rounded.lg}"
    border: "none"
    boxShadow: "none"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
    fontSize: "12px"
    fontWeight: 500
    letterSpacing: "0"
    padding: "7px 15px"
    borderRadius: "{rounded.pill}"
    border: "none"
    boxShadow: "none"
---

# DESIGN.md - Agence Foudre

Sistema visual extraido de https://www.agencefoudre.com.
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: dos de
ellos cambian una decision que la ficha de origen dejaba abierta. Los valores marcados
`(derivado para completar el sistema)` no aparecen en el sitio y se han construido desde la
familia real para que el sistema sea usable de punta a punta.

## 1. Tema Visual y Atmosfera

Agence Foudre es una portada de revista que decidio no convertirse nunca en interfaz. El
95 por ciento de lo que se ve es tipografia, el 5 por ciento restante son fotos recortadas
y dos circulos rosas en las esquinas. No hay barra de navegacion. No hay rejilla de
tarjetas. Hay una idea por pantalla, escrita tan grande que no cabe.

La decision que define el sistema es el interlineado del display: 0.70. A 130px eso
significa que la linea de abajo empieza antes de que termine la de arriba, y el bloque de
texto deja de leerse como parrafo para leerse como arquitectura. La ultra negra hace el
resto; no hace falta tocar el tracking porque el peso ya cierra los huecos.

La segunda decision es el verde. El cuerpo de texto de esta web es `#00522D`, un verde
bosque saturado, sobre una tiza calida con un punto de rosa. Casi nadie escribe el cuerpo
en verde, y eso es exactamente lo que hace que la pagina no se parezca a otra: el rosa
grita, el verde sostiene, y el gris no aparece por ningun lado.

Palabras clave: revista, rosa pintalabios, verde bosque, ultra negra, aire.

## 2. Paleta de Colores y Roles Semanticos

Ocho colores y ni uno neutro. Ni un gris, ni un negro de texto. El unico color frio es un
lila que solo hace de susurro.

### Colores de marca

| Nombre | Hex | Rol |
|---|---|---|
| Lipstick Magenta | `#DB3C8A` | Titulares display, circulos de navegacion, acentos. Se lleva el 100 por ciento del reconocimiento de marca |
| Forest Ink | `#00522D` | Cuerpo de texto, enlaces, iconografia, pie. El verde profundo sobre crema da una gravedad editorial que ningun neutro consigue |

Los dos no compiten porque no comparten trabajo: el rosa es exclamacion, el verde es voz.
En cuanto el rosa empieza a rellenar areas grandes, el sistema se convierte en otra cosa.

### Colores de superficie

| Nombre | Hex | Rol |
|---|---|---|
| Warm Chalk | `#FFF8F6` | Lienzo de pagina. Es la base sobre la que se apoya todo |
| Blush Cream | `#FCE5DF` | Superficie tenida: fondo de pildora, bloque de lavado suave, estado hover |
| Cotton Pink | `#E878B2` | Superficie elevada de acento, para el momento raro en el que una card tiene que destacar |

Warm Chalk y Blush Cream se diferencian en 1.15:1: son casi el mismo color. Esa cercania es
intencionada, porque el salto de superficie aqui no separa nada, solo tine. Lo que separa
son los 120px de aire entre bloques.

### Colores de apoyo

| Nombre | Hex | Rol |
|---|---|---|
| Bubblegum | `#F29EBD` | Rosa bajado de intensidad: display en eco, lavados, borde de boton fantasma |
| Lilac Mist | `#D1CFE4` | Tinte decorativo de tipo, divisor sutil, trazo de contorno. El unico color frio |
| Charcoal Black | `#000000` | Iconos, line art, rellenos de SVG. Nunca cuerpo de texto |

El sistema tiene un recurso propio que conviene nombrar: la misma frase se escribe dos
veces, una en `#DB3C8A` a intensidad plena y otra en `#FCE5DF` o `#F29EBD` como eco
apagado, en otra seccion. Es dialogo entre bloques, no decoracion.

### Colores de texto

Contrastes medidos con la formula de WCAG, no estimados.

| Nombre | Hex | Rol | Contraste |
|---|---|---|---|
| Forest Ink | `#00522D` | Cuerpo, enlaces, etiquetas sobre lienzo | 8.91:1 sobre `#FFF8F6`, AAA |
| Forest Ink sobre Blush | `#00522D` | Texto dentro de pildora o bloque tenido | 7.76:1 sobre `#FCE5DF`, AAA |
| Lipstick Magenta | `#DB3C8A` | Display y acentos sobre lienzo | 3.98:1 sobre `#FFF8F6`, solo texto grande |
| Charcoal Black | `#000000` | Iconos y line art | 20.01:1 sobre `#FFF8F6`, AAA |
| Bubblegum | `#F29EBD` | Display en eco | 1.92:1 sobre `#FFF8F6`, decorativo |
| Cotton Pink | `#E878B2` | Superficie elevada | 2.58:1 sobre `#FFF8F6`, decorativo |
| Lilac Mist | `#D1CFE4` | Divisor, tinte | 1.45:1 sobre `#FFF8F6`, decorativo |

Dos cosas que salen de medir y no de mirar:

- **El rosa de marca no es un color de texto a tamano de lectura.** `#DB3C8A` sobre el
  lienzo da 3.98:1, por debajo del 4.5:1 que pide AA para texto normal y justo por encima
  del 3:1 que pide para texto grande. Como el sistema lo usa entre 46px y 230px, en la
  practica cumple siempre. El problema aparece en el unico sitio donde la ficha de origen
  lo deja entrar a tamano pequeno: el acento de enlace y el subrayado de hover, a 16px o
  20px. Ahi hay que dejar el enlace en verde y reservar el rosa para el subrayado, que es
  decoracion y no texto.
- **Sobre el rosa, el glifo va en negro, no en blanco.** Medido: negro sobre `#DB3C8A` da
  5.03:1 y pasa AA; blanco sobre el mismo rosa se queda en 4.18:1 y no llega. La ficha de
  origen describe el circulo de menu con un glifo "oscuro o blanco" y deja la eleccion
  abierta; medido, la eleccion no esta abierta. Negro.

Y una tercera que conviene saber antes de disenar una card: **el rosa y el verde no se
pueden tocar.** `#DB3C8A` sobre `#00522D` da 2.24:1 en cualquiera de los dos ordenes. Son
los dos colores de marca y no pueden ir uno encima del otro como texto. Sobre verde se
escribe en crema (7.76:1) o en tiza (8.91:1).

### Colores de estado

El sitio no expone ninguno: es un portfolio sin formularios de validacion. Se derivan
manteniendo el verde como voz correcta y buscando en la propia paleta antes que fuera.

| Estado | Color | Fondo | Origen |
|---|---|---|---|
| Success | `#00522D` | `#E4EFE8` | *(derivado)*: el verde de marca ya es el color del sistema, no hace falta un segundo verde |
| Warning | `#8A5A00` | `#FAF0DC` | *(derivado para completar el sistema)* |
| Error | `#A3123F` | `#FCE5DF` | *(derivado)*: un rojo tirando a magenta, para que caiga dentro de la familia del rosa |
| Info | `#00522D` | `#FCE5DF` | *(derivado)* |

Regla dura: el estado de error no puede resolverse con `#DB3C8A`. Es el color de marca y
convertirlo en alarma quema las dos cosas.

## 3. Reglas de Tipografia

Dos familias y ninguna mas. Ni serif, ni monoespaciada, ni decorativa. Ninguna de las dos
esta en Google Fonts, asi que esta ficha las sustituye.

### Sustitucion

**Original: Beni -> HTML: Archivo Black (Google substitute).**

Beni es una display ultra negra, ancha y de terminales planos, con las contraformas casi
cerradas: a 230px se lee como un muro. La ficha de origen propone Druk Wide Heavy, Tungsten
Bold o Antonio Black, y ahi hay una trampa, porque las dos primeras son anchas y la tercera
es condensada. La captura de portada resuelve la duda: las formas de FOUDRE son anchas, la
O es casi circular y la R tiene la pierna recta. Se compararon tres candidatas de Google:

- **Anton** es la que primero viene a la cabeza por peso, pero es condensada. A 130px con
  interlineado 0.70 el bloque sale alto y estrecho, que es justo lo contrario.
- **League Spartan** a 900 tiene la anchura, pero su geometria de circulo perfecto suaviza
  demasiado el bloque y le quita el filo de revista.
- **Archivo Black** tiene el peso, la anchura y los terminales planos, y mantiene las
  contraformas pequenas cuando las lineas se solapan al 0.70.

Se elige Archivo Black. Viene en un unico corte, que declara peso 400 pero pinta como una
negra: no hay que pedirle 900 ni sintetizarlo.

**Original: Clash Grotesk -> HTML: Space Grotesk (Google substitute).**

La ficha de origen propone Inter, Satoshi o General Sans. Inter esta descartada por
politica del repo y las otras dos no estan en Google. Clash Grotesk es una grotesca
geometrica con detalles algo raros, y de las disponibles la que comparte ese caracter es
**Space Grotesk**: misma base geometrica, misma sensacion de grotesca corregida a mano, con
una g y una a que le dan voz al cuerpo. Frente a Outfit, que es mas limpia y mas anonima,
Space Grotesk aguanta mejor la vecindad de un display de 230px sin desaparecer.

### Reparto

- **Archivo Black** para display y nada mas, de 46px hacia arriba. Interlineado 0.70
  siempre, tracking 0.
- **Space Grotesk**, pesos 400, 500 y 700. Cuerpo, etiquetas, navegacion, botones, pildoras
  y enlaces. Interlineado 1.20 en toda la escala de texto.

Bajar el display por debajo de 30px es el error tipico. Esta pensada para funcionar como
mancha, y a tamano de cuerpo se convierte en un bloque ilegible.

### Escala tipografica

El sitio no usa una razon constante: salta de 20px a 46px y de ahi a 80, 94, 130 y 230. El
hueco entre cuerpo y display es la escala.

| Rol | Fuente | Tamano | Peso | Interlineado | Tracking |
|---|---|---|---|---|---|
| display | Archivo Black | 230px | 400 | 0.70 (161px) | 0 |
| heading-lg | Archivo Black | 130px | 400 | 0.70 (91px) | 0 |
| heading | Archivo Black | 94px | 400 | 0.70 (66px) | 0 |
| heading-sm | Archivo Black | 80px | 400 | 0.70 (56px) | 0 |
| subheading | Archivo Black | 46px | 400 | 0.70 (32px) | 0 |
| body | Space Grotesk | 20px | 400 | 1.20 (24px) | 0 |
| body-sm | Space Grotesk | 16px | 400 | 1.20 (19px) | 0 |
| caption | Space Grotesk | 14px | 500 | 1.20 (17px) | 0 |
| label | Space Grotesk | 12px | 500 | 1.20 (14px) | 0 |
| micro | Space Grotesk | 10px | 500 | 1.20 (12px) | 0 |

Los interlineados del sitio estan escritos en pixeles absolutos, no en proporcion. Aqui se
dan las dos formas porque la proporcion es lo que se puede reproducir, pero el valor
original es el pixel.

### Pesos tipograficos

| Peso | Valor | Uso |
|---|---|---|
| Black | 400 en Archivo Black, que pinta como 900 | Todo el display |
| Regular | 400 | Cuerpo |
| Medium | 500 | Etiquetas, enlaces, pildoras |
| Bold | 700 | Botones y estado activo |

### Letter spacing

Cero en toda la escala. Es raro y es deliberado: el display ya es tan pesado que abrir o
cerrar el tracking solo estropea el bloque, y el cuerpo a 1.20 de interlineado no lo
necesita. Si algo pide tracking en este sistema, casi siempre esta pidiendo otro tamano.

## 4. Estilos de Componentes

Hay poquisimos componentes, y esa escasez es parte del sistema. Todo es plano: ni sombras,
ni gradientes, ni cristal.

### Circulos de navegacion

```css
width: 50px;
height: 50px;
border-radius: 9999px;
background: #DB3C8A;
color: #000000;
border: none;
box-shadow: none;
display: grid;
place-items: center;
```

Son dos y solo dos: el disparador de menu arriba a la izquierda y la marca arriba a la
derecha. Mismo diametro, mismo relleno, posicion fija. Su simetria es lo que los declara
como los unicos dos puntos interactivos de la pantalla. El glifo va en negro por contraste
medido, no por gusto.

Estados *(derivados para completar el sistema)*:

| Estado | Cambio |
|---|---|
| hover | `background: #C42F79` |
| active | `background: #A82766` |
| focus-visible | `outline: 2px solid #00522D; outline-offset: 3px` |

### Boton

```css
background: #DB3C8A;
color: #000000;
font: 700 16px/1.2 "Space Grotesk";
padding: 12px 20px;
border-radius: 10px;
border: none;
box-shadow: none;
```

El boton rectangular de 10px aparece solo dentro de piezas de contenido, como la card de
caso del mes. Es el componente menos protagonista del sistema y esta bien que lo sea.

### Pildora o etiqueta

```css
background: #FCE5DF;
color: #00522D;
font: 500 12px/1.2 "Space Grotesk";
padding: 7px 15px;
border-radius: 9999px;
border: none;
```

Verde sobre crema, 7.76:1. Es la unica pieza de chrome que se repite, y aparece con cuenta
gotas para etiquetar sin competir con el display.

### Bloque de titular display

No es un componente, es la pagina.

```css
font: 400 130px/0.70 "Archivo Black";
letter-spacing: 0;
color: #DB3C8A;
margin: 0;
text-align: left;
```

Anclado abajo a la izquierda o arriba a la izquierda del bloque, nunca centrado. El color
rota entre `#DB3C8A` a intensidad plena, `#F29EBD` a media y `#FCE5DF` como lavado, para
que la misma frase pueda decirse dos veces con distinto volumen.

### Titular en eco

Mismo tratamiento que el anterior en `#FCE5DF` o `#F29EBD`, a 80px o 130px, colocado en
otra seccion. Es la version fantasma de algo que la pagina acaba de decir en alto.

### Etiqueta de seccion

Space Grotesk 400 o 500, 12px a 14px, en `#00522D` o en rosa apagado, justo encima del
titular que describe. Sin caja, sin fondo, sin subrayado. Un susurro antes del grito.

### Parrafo

Space Grotesk 400, 16px a 20px, interlineado 1.20, `#00522D`, ancho maximo 60ch. Entre
bloques, de 30px a 60px. El verde sobre crema es la experiencia de lectura principal del
sitio y no se sustituye por un gris.

### Enlace de texto

Space Grotesk 500, hereda el tamano del cuerpo, color `#00522D`. Sin subrayado en reposo;
al pasar el raton aparece el subrayado en `#DB3C8A`. El texto se queda verde: el rosa a
16px no pasa contraste, pero un subrayado no es texto y ahi si funciona.

### Boton de icono fantasma

Sin fondo y sin borde. Icono en `#000000` o `#00522D`, de 20px a 24px. Al pasar el raton
cambia a `#DB3C8A`. Se usa donde el circulo rosa seria demasiado ruidoso.

### Card de contenido

```css
background: #FCE5DF;
padding: 30px;
border-radius: 20px;
border: none;
box-shadow: none;
```

La card elevada usa 25px de radio y puede tener fondo `#E878B2`. Es el unico sitio donde el
rosa medio hace de superficie, y aun asi lleva el texto en un valor que contraste, no en
verde.

## 5. Principios de Layout

### Escala de espaciado

Base de 4px, pero el sitio solo usa seis valores y estan muy separados: no hay escala fina
porque no hay densidad que gestionar.

| Token | Valor | Uso |
|---|---|---|
| `--spacing-8` | 8px | Separacion minima dentro de un control |
| `--spacing-12` | 12px | Padding vertical de boton |
| `--spacing-20` | 20px | Padding horizontal de boton, gap entre elementos |
| `--spacing-30` | 30px | Padding de card, separacion entre parrafos |
| `--spacing-60` | 60px | Separacion entre bloques dentro de una seccion |
| `--spacing-120` | 120px | Gap entre secciones |
| `--spacing-140` | 140px | Respiro de bloque grande |

### Contenedores

Ancho maximo de 1440px. El texto de lectura se limita a 60ch pase lo que pase con el
viewport, y el display no se limita a nada: puede salirse.

### Grid

Columna unica a sangre. Cada seccion tiende a ocupar una pantalla entera, anclada por el
bloque de display abajo a la izquierda o arriba a la izquierda. Sin rejilla de tarjetas,
sin multicolumna, sin barra lateral.

### Filosofia de espaciado

El espacio no separa contenido, lo enmarca. Entre dos ideas hay 120px porque cada idea
tiene que llegar sola, sin la siguiente asomando por abajo. Es lo contrario de una web de
producto, donde el aire es un lujo: aqui el aire es el 60 por ciento de la pagina.

## 6. Profundidad y Elevacion

No hay sombras, no hay gradientes y no hay cristal. La profundidad se comunica con dos
recursos: el contraste de color y la escala tipografica.

| Nivel | Nombre | Hex | Uso |
|---|---|---|---|
| 1 | Warm Chalk | `#FFF8F6` | Lienzo de pagina |
| 2 | Blush Cream | `#FCE5DF` | Superficie tenida: pildoras, lavados |
| 3 | Cotton Pink | `#E878B2` | Superficie elevada de acento, uso raro |

Que el nivel 1 y el nivel 2 se diferencien en 1.15:1 no es un fallo: la superficie no
separa, tine. Lo que separa es la escala del tipo, y de eso hay de sobra.

### Radios de borde

| Token | Valor | Uso |
|---|---|---|
| `--radius-badge` | 10px | Badges y botones |
| `--radius-card` | 20px | Cards |
| `--radius-elevated` | 25px | Cards elevadas |
| `--radius-full` | 9999px | Pildoras, etiquetas y los dos circulos de navegacion |

Aqui hay un desacuerdo entre la ficha de origen y la portada real que conviene resolver a
favor de la segunda: **la ficha dice que las fotos van sin radio, como losas rectangulares,
y en la captura las tres fotos del hero tienen las esquinas claramente redondeadas**, en el
entorno de los 20px a 25px de la familia de cards. La imagen aqui no es una excepcion al
sistema de radios: participa de el. Lo que si es cierto es que no llevan marco ni sombra.

## 7. Lo que Si y lo que No

### Si hacer

- Usar el display con interlineado 0.70 siempre. La compresion es lo que convierte un
  titular grande en un bloque arquitectonico.
- Dejar `#FFF8F6` como lienzo y usar `#FCE5DF` solo como acento de superficie, nunca como
  fondo de pagina completo.
- Emparejar el rosa pleno con su version apagada del mismo tono para crear dialogo entre
  secciones: una frase en alto y su eco.
- Escribir todo el cuerpo y todos los enlaces en `#00522D`. Es la firma del sistema y
  ademas da 8.91:1.
- Dejar que el blanco haga el trabajo estructural: de 60px a 120px entre bloques, y que
  cada bloque de display pueda ocupar una pantalla entera.
- Poner los dos circulos interactivos a 50px con radio completo y relleno `#DB3C8A`, con el
  glifo en negro.
- Limitar el texto de lectura a 60ch pase lo que pase.

### No hacer

- No usar `#000000` para el cuerpo. El negro es para iconos y line art; la voz es verde.
- No bajar el display por debajo de 30px. Esta hecha para mancha, no para lectura.
- No montar layouts de tarjetas. El sistema respira por tipo y espacio, no por densidad.
- No usar `#DB3C8A` en areas grandes de fondo. Es exclamacion, no papel pintado.
- No poner sombras, gradientes ni efectos de cristal. El sistema es plano a proposito.
- No meter una tercera familia. Ni serif, ni mono, ni decorativa.
- No centrar. Todo alinea a la izquierda o se coloca en asimetria deliberada.
- No dejar las fotos con esquina viva: en la portada real llevan el radio de la familia de
  cards, aunque la ficha de origen diga lo contrario.
- No escribir rosa sobre verde ni verde sobre rosa: 2.24:1 en los dos sentidos.
- No poner un enlace de 16px en rosa: 3.98:1 sobre el lienzo, y a ese tamano no basta.

## 8. Comportamiento Responsive

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

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

### Cambios por breakpoint

- **Display:** de 230px baja a 64px en movil, conservando el 0.70. La compresion es
  identidad, no ajuste optico, y si se relaja el bloque se deshace.
- **Gap de seccion:** de 120px a 60px. Sigue siendo mucho, y tiene que serlo.
- **Circulos de navegacion:** se quedan a 50px y en las esquinas. No colapsan en una barra,
  porque no hay barra que recuperar.
- **Parrafo:** el limite de 60ch ya lo resuelve; en movil solo cambia el padding lateral,
  de 20px.
- **Card de caso:** de dos columnas (imagen mas texto) a pila, imagen primero.
- **Fotos:** se mantienen a sangre y sin radio, recortando por los lados.

### Touch targets

Los circulos de 50px ya pasan los 44px. El enlace de texto es el problema: a 16px sin
subrayado necesita 12px de padding vertical invisible en movil para ser tocable, sin
cambiar su aspecto. *(derivado para completar el sistema)*

### Filosofia responsive

El sistema es tipografico antes que espacial: cuando falta ancho, lo primero que baja es la
escala del display, y solo despues se reorganiza nada. El lienzo, el verde del cuerpo y el
0.70 no cambian en ningun breakpoint.

## 9. Guia de Prompts para Agentes

### Referencia rapida de color

- texto: `#00522D`
- fondo: `#FFF8F6`
- superficie tenida: `#FCE5DF`
- acento: `#DB3C8A`
- acento secundario: `#F29EBD`
- iconos y line art: `#000000`
- accion: no hay color de CTA distinto del rosa de marca

### Prompt de inicializacion de sesion

```
Trabaja con el sistema Agence Foudre. Lienzo #FFF8F6, cuerpo y enlaces en #00522D
(verde bosque, nunca gris ni negro), acento #DB3C8A, superficie tenida #FCE5DF, eco
#F29EBD, iconos #000000. Tipografia: Archivo Black para display de 46px hacia arriba
con line-height 0.70 y tracking 0; Space Grotesk 400/500/700 para todo lo demas con
line-height 1.20. Espaciado base 4px con saltos de 20, 30, 60 y 120px. Radios: 10px
botones y badges, 20px cards, 25px elevadas, 9999px pildoras y circulos. Prohibido
box-shadow, gradiente y cristal. Prohibido centrar.
```

### Prompt: crear pantalla nueva

```
Monta la seccion a pantalla completa sobre #FFF8F6, contenedor de 1440px y 120px de
separacion con la siguiente. Etiqueta de seccion en Space Grotesk 500, 14px, #00522D.
Debajo, titular en Archivo Black a 130px, line-height 0.70, tracking 0, color #DB3C8A,
alineado a la izquierda y anclado abajo. Parrafo en Space Grotesk 400, 20px,
line-height 1.20, #00522D, maximo 60ch. Sin tarjetas, sin sombras y sin centrar.
```

### Prompt: anadir componente al kit

```
Anade el componente plano, sin sombra y con el radio que le toque: 10px si es boton o
badge, 20px si es card, 9999px si es pildora o circulo. El texto va en #00522D salvo
que el fondo sea verde, en cuyo caso va en #FCE5DF. Nunca escribas rosa sobre verde ni
verde sobre rosa. Si el componente necesita un acento, usa #DB3C8A en un borde, un
subrayado o un relleno pequeno, no en un area grande.
```

### Prompt: revision de consistencia

```
Revisa la pantalla contra el sistema Agence Foudre y senala: 1) cualquier gris o negro
usado como color de cuerpo, 2) cualquier display con line-height por encima de 0.70,
3) cualquier uso de la display por debajo de 30px, 4) cualquier box-shadow, gradiente o
efecto de cristal, 5) cualquier bloque centrado, 6) rosa sobre verde o verde sobre rosa,
7) rosa a tamano de cuerpo, 8) #DB3C8A rellenando un area grande de fondo, 9) una
tercera familia tipografica.
```

### Prompt: variante de campana

```
Para una campana puedes subir el display por encima de 230px y dejar que el titular se
salga del encuadre, como hace la portada con la palabra FOUDRE. Tambien puedes apilar
fotos recortadas encima del tipo. Lo que no puedes cambiar: el verde del cuerpo, el
0.70 del display, el lienzo tiza y la ausencia total de sombra.
```

## 10. Movimiento (Motion)

El sitio se apoya en el movimiento mucho menos de lo que su energia visual sugiere. La
tabla es *(derivada para completar el sistema)* a partir del comportamiento observado.

| Elemento | Propiedad | Duracion | Curva |
|---|---|---|---|
| Circulo de navegacion, hover | background-color | 150ms | ease-out |
| Enlace de texto, hover | text-decoration-color | 120ms | ease-out |
| Titular al entrar en pantalla | opacity, transform | 600ms | cubic-bezier(.2,.8,.2,1) |
| Card, hover | background-color | 180ms | ease-out |
| Foto, hover | transform scale(1.02) | 400ms | ease-out |

Principios: el movimiento acompana la escala, no la contradice. Un titular de 230px puede
entrar despacio; un boton de 16px no puede rebotar. Respetar siempre
`prefers-reduced-motion`.

## Anexo: Stack tecnico detectado

| Aspecto | Valor |
|---|---|
| URL de origen | https://www.agencefoudre.com |
| Tema | light |
| Familia de color | red (magenta) |
| Color dominante declarado | `#DB3C8A` |
| Tipografias reales | Beni, Clash Grotesk |
| Disponibles en Google Fonts | Ninguna de las dos. Sustituidas por Archivo Black y Space Grotesk |
| Unidad base de espaciado | 4px |
| Densidad | comoda |
| Ancho maximo | 1440px, y 60ch para el texto de lectura |
| Radios | 10px, 20px, 25px y 9999px |
| Sombras | ninguna |
| Gradientes | ninguno |
| Imagenes | fotografia editorial recortada, con esquinas redondeadas de 20px a 25px segun la portada real, sin marco y sin sombra. Iconos de linea en negro o verde, nunca rellenos de color |

Nota de fidelidad: la identidad central (paleta, escala, interlineado del display, familia
de radios, ausencia de sombra) sale del sitio real y de su ficha publica. La sustitucion
tipografica esta declarada arriba. Los estados de interaccion, los colores semanticos, los
breakpoints y la tabla de motion estan marcados como derivados alli donde aparecen. Los
contrastes se han calculado para esta ficha, y dos de ellos cierran decisiones que la
fuente original dejaba abiertas.