# Layout y ritmo visual

> Reglas duras de composición + el criterio editorial de ritmo.
> Fallar las reglas duras es entregar trabajo roto, no una diferencia de gusto.

---

## 1. Reglas duras del hero

- **El hero cabe en la primera pantalla.** Titular máx. 2 líneas en escritorio,
  subtexto máx. **20 palabras** y máx. 4 líneas, CTA visible sin scroll. Si el
  copy no cabe: bajar escala tipográfica o cortar copy. Si no puedes decir la
  propuesta de valor en 20 palabras, la propuesta no está clara — la regla no
  está apretada.

- **Escala tipográfica del hero.** Planear tamaño de letra y de imagen juntos.
  Titular de más de 6 palabras no arranca en la escala más grande. Rango sensato:
  `text-4xl md:text-5xl lg:text-6xl`. La escala grande sólo con titulares de 3-5
  palabras. **Un titular de 4 líneas siempre es error de tamaño, nunca de copy.**

- **Tope de padding superior: `pt-24` (≈6rem) en escritorio.** Más que eso hace
  que el contenido flote a media pantalla y se lee como bug de layout.

- **Máximo 4 elementos de texto en el hero:**
  1. Eyebrow **o** tira de marca **o** ninguno (elegir cero o uno)
  2. Titular (máx. 2 líneas)
  3. Subtexto (máx. 20 palabras)
  4. CTA (1 primario + máx. 1 secundario)

  **Prohibido dentro del hero:** frase chiquita bajo los CTA, tira de confianza
  ("Usado por equipos de..."), adelanto de precio, lista de características, fila
  de avatares. Todo eso baja a su propia sección.

- **El muro de logos va DEBAJO del hero**, nunca dentro.

---

## 2. Navegación

- **Una sola línea en escritorio.** Si no cabe a 1024px: acortar etiquetas, quitar
  secundarios, o pasar a hamburguesa. Un menú de dos líneas en escritorio es
  diseño roto.
- **Altura máxima 80px**, por defecto 64-72px. Nada de barras enormes que se comen
  el 15% de la pantalla.
- Hamburguesa funcional obligatoria cuando hay navegación en móvil.

---

## 3. Ritmo entre secciones

> Esta es la capa que separa un sitio hecho por diseñador de uno armado por bloques.

- **Una familia de layout se usa UNA sola vez por página.** "Proyectos destacados"
  no puede verse igual que "Qué hacemos". Ocho secciones = mínimo **cuatro
  familias distintas**.

- **Tope de zigzag: 2 secciones seguidas.** El patrón alternado imagen-izquierda /
  texto-derecha, luego al revés, es banal. **La tercera consecutiva reprueba el gate.**
  Romper con: sección a todo lo ancho, apilada vertical, retícula asimétrica,
  marquesina, o cualquier otra familia.

- **Alternar fondos** claros, oscuros, con imagen, con degradado y espacios de
  respiro **según el mensaje**, no en patrón mecánico.

- **Descanso visual después de una o dos secciones densas:** una cita, una métrica,
  una franja oscura, un collage, una imagen a pantalla completa, una textura o un
  bloque de color.

- **No más de tres secciones visualmente parecidas seguidas**, ni degradados en
  secciones contiguas.

---

## 4. Eyebrows — la regla más violada

Un **eyebrow** es la etiqueta chica en mayúsculas con tracking amplio que va
justo encima del titular de sección.

- **Máximo 1 eyebrow por cada 3 secciones.** El hero cuenta como uno. Nueve
  secciones = máximo tres eyebrows.
- Si la sección A tiene eyebrow, las siguientes dos no.
- **Verificación mecánica:** contar `uppercase tracking`. Si el conteo supera
  `techo(secciones / 3)`, reprueba.
- **Qué hacer en vez de un eyebrow:** quitarlo. El titular solo basta. La posición
  de la sección en la página ya la categoriza.

**Exentas:** mayúsculas en tiras de especificaciones, pies de tabla, etiquetas de
riel y encabezados de columna del footer. Sólo cuenta el eyebrow en posición de
eyebrow.

---

## 5. Retículas y tarjetas

- **Tarjetas sólo cuando la elevación comunica jerarquía real.** Si no, agrupar
  con `border-t`, `divide-y` o espacio negativo.
- **Con DENSIDAD > 7, los contenedores de tarjeta genéricos están prohibidos.**
  Las métricas respiran en layout plano.
- **Una retícula tiene exactamente tantas celdas como contenido.** 3 elementos →
  3 celdas. 5 elementos → 5 celdas. Si queda una celda vacía en medio o al final,
  la planeaste mal. Se rehace la forma; no se pega una celda en blanco.
- **Diversidad de fondo en retículas:** una retícula de 6 tarjetas blancas sobre
  blanco con puro texto adentro se lee como default aburrido. Al menos 2-3 celdas
  necesitan variación real: imagen, degradado de marca, patrón, fondo tintado.

---

## 6. Sesgo anti-centrado

Con **VARIANZA > 4**, el hero centrado se evita. Forzar:

- Pantalla partida 50/50
- Contenido a la izquierda / activo a la derecha
- Espacio en blanco asimétrico
- Estructura fijada al scroll

**Excepción:** el hero centrado está bien en briefs editoriales, de manifiesto o
de anuncio de lanzamiento, donde el mensaje mismo es el diseño.

---

## 7. Capa decorativa

Detalles con propósito: viñetas, líneas, marcos, formas, patrones, textura sutil,
números grandes, acentos tipográficos.

**Deben ordenar, separar o dirigir la vista. Nunca llenar espacio.**

Overlays claros u oscuros para asegurar contraste sobre imágenes, manteniendo la
foto visible y la lectura accesible (AA mínimo).

Parallax sólo cuando aporta profundidad a un hero, una pausa visual o un bloque
clave. Siempre respetando `prefers-reduced-motion`.

---

## 8. Móvil

- **Colapso explícito por sección.** Para cada layout multi-columna, declarar el
  fallback bajo 768px en el mismo componente. Nada de "ya lo resuelve el framework".
- **A 375-390 px:** navegación funcional, hero legible, CTA de mínimo 48px,
  formularios sin desbordamiento, retículas apiladas.
- Usar `min-h-dvh` en vez de `h-screen` — la barra del navegador móvil rompe `vh`.

---

## 9. Movimiento

- **Un solo efecto de firma por página.** No apilar dos.
- El movimiento se justifica: entrada, jerarquía, o continuidad. Nunca decoración.
- Todo lo animado necesita fallback estático con `prefers-reduced-motion`.
- **Prohibido:** bucles infinitos de micro-animación en todos lados, animar todo
  al mismo tiempo, bloquear la interacción mientras entra la animación.
- Nada puede quedar invisible esperando un disparador de viewport. Animar desde
  estados visibles (desplazamiento, desenfoque) o al montar. Si una captura de
  pantalla completa no muestra una sección, está mal.
