# Layout

> El layout comunica tanto como el contenido. Definí las reglas del grid, el ritmo de secciones y la filosofía de espacio antes de diseñar cualquier pantalla.

---

## Philosophy

`[ 2-3 oraciones sobre cómo el layout expresa los valores de la marca. Ej: si la marca es directa, el layout es limpio y sin ruido; si es editorial, tiene asimetría y tensión. ]`

Dos o tres principios que gobiernan cada decisión de layout:

1. `[ Principio 1 ]`
2. `[ Principio 2 ]`
3. `[ Principio 3 ]`

---

## Grid System

### Desktop (`[ N ]`px+)
- Container max-width: `[ N ]`px
- Columnas: `[ N ]`
- Gutter: `[ N ]`px
- Margen (borde del container): `[ N ]`px

### Tablet (`[ N ]`px – `[ N ]`px)
- Container max-width: `[ N ]`px
- Columnas: `[ N ]`
- Gutter: `[ N ]`px
- Margen: `[ N ]`px

### Mobile (< `[ N ]`px)
- Container max-width: 100%
- Columnas: `[ N ]`
- Gutter: `[ N ]`px
- Margen: `[ N ]`px

---

## Column Usage

| Layout | Columnas (desktop) | Uso |
|---|---|---|
| Full width | 12/12 | `[ Contextos: hero, footer, secciones full-bleed ]` |
| Ancho completo | 10/12 centrado | `[ Contextos ]` |
| Split asimétrico | `[ N ]`/12 + `[ N ]`/12 | `[ Contextos: texto + imagen ]` |
| Texto / prose | `[ N ]`/12 (max `[ N ]`px) | `[ Bios, cuerpo de texto, about ]` |
| Sidebar | `[ N ]`/12 + `[ N ]`/12 | `[ Contextos: timeline, filtros ]` |

**Regla de prose**: Cualquier bloque de texto corrido máximo `[ N ]`px de ancho, independientemente del container.

---

## Gutter & Margin Rules

- Los gutters son fijos, no fluidos
- Los elementos pueden atravesar gutters — el gutter no es un gap obligatorio entre todo
- Los elementos full-bleed ignoran el container y llegan al borde del viewport
- `[ Otras reglas específicas del sistema ]`

---

## Max Width

| Token | Valor | Uso |
|---|---|---|
| `--container-max` | `[ N ]`px | Container exterior |
| `--prose-max` | `[ N ]`px | Bloques de texto corrido |
| `--narrow-max` | `[ N ]`px | Formularios, CTAs, contenido estrecho |

---

## Whitespace Philosophy

`[ Describí la relación de la marca con el espacio en blanco. ¿Es generoso? ¿Denso? ¿Cómo se usa el espacio para comunicar calidad? ]`

**Padding vertical de secciones:**
- Sección estándar: `[ N ]`px arriba/abajo en desktop, `[ N ]`px en mobile
- Sección feature / full-bleed: `[ N ]`px en desktop
- Sección densa: `[ N ]`px en desktop

---

## Vertical Rhythm

`[ Describí la unidad base de espaciado vertical y cómo se relaciona con los line-heights tipográficos. ]`

Unidad base: **`[ N ]`px**. Todo el espaciado vertical es múltiplo de esta unidad.

---

## Breakpoints

| Nombre | Valor | Comportamiento |
|---|---|---|
| `sm` | `[ N ]`px | `[ Qué cambia acá ]` |
| `md` | `[ N ]`px | `[ Qué cambia acá ]` |
| `lg` | `[ N ]`px | `[ Qué cambia acá ]` |
| `xl` | `[ N ]`px | `[ Container llega a max-width ]` |

**Estrategia**: `[ Mobile-first / Desktop-first ]` — empezar por `[ mobile / desktop ]`, agregar complejidad en cada breakpoint.

---

## Section Types

Definí los tipos de sección que existen en el sistema:

### Full-Bleed
`[ Descripción — qué es, cuándo se usa ]`

### Contained
`[ Descripción ]`

### Split asimétrico
`[ Descripción ]`

### `[ Tipo custom del sistema ]`
`[ Descripción ]`

---

## Section Order (Referencia)

`[ Si el sistema es para un tipo específico de página (portfolio, landing, SaaS), definí el orden recomendado de secciones y por qué. ]`

1. `[ Sección 1 ]` — `[ Propósito ]`
2. `[ Sección 2 ]` — `[ Propósito ]`
3. `[ Sección 3 ]` — `[ Propósito ]`
4. `[ Sección 4 ]` — `[ Propósito ]`
5. `[ Sección 5 ]` — `[ Propósito ]`

---

## Hierarchy & Flow

`[ Una o dos oraciones sobre cómo el visitante debe recorrer la página. Qué debe poder identificar en los primeros 5 segundos. ]`

**Regla de sección**: Cada sección responde una sola pregunta. Si responde dos, son dos secciones.