# Rediseño completo · «El documento»

**Fecha:** 19/ago/2026
**Rama:** a crear desde `fix/contraste-y-hero-visible`
**Estado:** aprobado por el usuario (dirección y alcance), pendiente de la dueña

---

## 1. Encargo

Rediseñar la landing por completo. El usuario fijó qué sobrevive:

| Se conserva | Queda libre |
|---|---|
| La paleta entera (tokens de `tailwind.config.ts`) | Estructura y orden de secciones |
| El wordmark `cre≡er` (SVG trazado del manual) | Copy |
| Open Sans | Layout, retícula, escala tipográfica |
| | Sistema gráfico, ilustraciones, fotografía |
| | Movimiento |
| | Arquitectura de componentes |

**Conflicto declarado y aceptado:** `docs/dueña-directrices.md` registra que la dueña pidió el 30/jul "algo de gráfico y movimiento". Esta dirección reduce ambos. Y su doc dice de los dolores y los puntos de inflexión: "ya están escritos en su voz — usarlos, no reescribirlos"; este spec los conserva verbatim (§10), pero reorganiza todo lo demás. Ambas cosas necesitan el visto bueno de la dueña antes de publicar.

## 2. Concepto rector

creeer vende un documento. Su propio deck lo dice: cada etapa "deja algo por escrito", y la etapa 08 *es* un One Year Plan.

**La página se comporta como el entregable en vez de describirlo.** Un documento estratégico escrito sobre el negocio del lector: secciones numeradas, columna de margen, reglas finas, medida de texto disciplinada, cero decoración ambiental. La página demuestra claridad en lugar de prometerla.

De ahí sale todo lo demás. Cuando una decisión no esté en este spec, la pregunta es: *¿esto lo haría un documento estratégico bien compuesto?*

## 3. Estructura: 6 secciones

| # | Sección | Fondo | Origen |
|---|---|---|---|
| 01 | Apertura | blanco | `Hero` |
| 02 | Dónde estás | blanco | `PuntosInflexion` + `Dolores` |
| 03 | Qué cambia | **navy** | `FraseAncla` + lead de `Disciplinas` |
| 04 | El trabajo | blanco | `Proceso` |
| 05 | Para quién · Quién | blanco | `ParaQuien` + `Estratega` |
| 06 | Empezar | **navy** | `ComoEmpezar` + `Cierre` |

### 01 · Apertura
Wordmark (`size="xl"`, con tagline), antetítulo, titular en `display`, una línea de quién, dos CTAs. Sin ilustración, sin campos de puntos. Altura natural — se acabó el `min-h-[80vh]`, que en móvil pelea con la barra del navegador.

Su columna de margen lleva el número `01` y su `MarcaSeccion` en `paso={0}`: las líneas más dispersas de toda la página. El sistema queda establecido desde la primera pantalla.

### 02 · Dónde estás
Los seis puntos de inflexión como tabla de dos columnas: nombre (700) | situación (`cuerpo`), separados por filete `gris-claro`. Se lee entera en segundos.

Debajo, un aparte enmarcado con los cuatro dolores en primera persona, a `sumario` en cursiva, uno por línea con filete entre ellos. Cierra el remate de la dueña ("Esto no se resuelve con más esfuerzo…") a `titulo`, con la resolución en dorado.

**Desaparece el escenario fijado de 600vh**, con su `IntersectionObserver` manual, sus seis fotografías, sus velos, su raíl y su barra de progreso.

### 03 · Qué cambia — navy
El centro emocional y el primer navy. La frase ancla va a `titulo` con la segunda cláusula en dorado — no a `display`, que se gasta una sola vez en toda la página y es del titular de 01 (§4). Debajo, el insight que hoy vive en `Disciplinas`: "No vendemos marketing. Vendemos claridad estratégica". Las tres disciplinas quedan como una línea de texto, no como tres tarjetas con icono.

### 04 · El trabajo — blanco
Las ocho etapas como índice numerado, no como ocho tarjetas con foto. Cada etapa: número tabular, nombre a `sumario`/700, y los entregables como chips `azul-claro` con texto navy. Las tres fases aprobadas (Inmersión → Desafiar supuestos → Estrategia ejecutable) como tira encima del índice.

La etapa 08 se distingue por ser la última y por llevar su nombre a `titulo` en vez de a `sumario`, no por cambiar de color de fondo ni de tarjeta.

**Desaparecen las ocho fotografías** y los 27 iconos de entregable (a 18px con trazo efectivo de 1,2px no se distinguen entre sí).

### 05 · Para quién · Quién — blanco
Dos columnas separadas por filete vertical: "Sí es para ti" / "No es para ti", cuatro criterios cada una. Sin losa navy — el navy está reservado a 03 y 06.

Debajo, quién está detrás: hueco de retrato (`aspect-[4/5]`), el 30+ como cifra estática, bio y la cita institucional. **La cifra ya no cuenta hacia arriba.**

### 06 · Empezar — navy
Los tres pasos como lista numerada, el CTA principal a WhatsApp, y los tres enlaces de contacto. Cierra con el wordmark y el legal. Absorbe el footer.

## 4. Sistema tipográfico

Open Sans, cinco roles. Reemplazan a `ancla` y `seccion`, que se eliminan.

```ts
fontSize: {
  display: ['clamp(3.5rem, 9vw, 7rem)',      { lineHeight: '0.94', letterSpacing: '-0.03em' }],
  titulo:  ['clamp(2.25rem, 4.5vw, 3.5rem)', { lineHeight: '1',    letterSpacing: '-0.02em' }],
  sumario: ['clamp(1.375rem, 2vw, 1.75rem)', { lineHeight: '1.35', letterSpacing: '-0.01em' }],
  cuerpo:  ['1.0625rem',                     { lineHeight: '1.7' }],
  rotulo:  ['0.75rem',                       { lineHeight: '1.2',  letterSpacing: '0.3em' }],
}
```

**Reglas duras:**

- `display` aparece **exactamente una vez** en toda la página: el titular de 01. Hoy hay cinco elementos empatados en 4,5rem, y por eso ninguno es el más grande.
- Medida máxima de texto corrido: **68 caracteres** (`max-w-[68ch]`).
- Pesos: 400 cuerpo · 600 énfasis y rótulos · 700 títulos · 800 display. **Prohibido `font-black`**: Open Sans llega a 800 y `layout.tsx` carga hasta 800, así que los 34 usos actuales caen a 800 de todos modos. Se elimina el peso 900 del vocabulario.
- Números de sección y de etapa con `font-variant-numeric: tabular-nums`.
- `text-balance` en titulares, `text-pretty` en párrafos.

## 5. Retícula

```
│ 02      │  DÓNDE ESTÁS                          │
│ ≡       │                                       │
│         │  Seis situaciones. Reconoce la tuya.  │
│         │                                       │
│         │  Crecer          El siguiente salto   │
│         │                  no tiene mapa.       │
```

- Contenedor: `max-w-content` sube de 1152px a **1280px**, con `px-6 md:px-12`.
- `Seccion` monta `grid md:grid-cols-[7rem_minmax(0,1fr)] gap-x-10`. Columna izquierda: número tabular + `MarcaSeccion`. Columna derecha: todo el contenido.
- En móvil colapsa a una columna; el número y la marca van en línea sobre el antetítulo.
- La tensión entre reglas anchas y texto angosto (68ch dentro de 1280px) es deliberada: es lo que hace que la composición se lea editorial.

**Ritmo vertical**, tres niveles — hoy ocho secciones comparten `py-16 md:py-24` y la página va como un metrónomo:

| Nivel | Padding | Dónde |
|---|---|---|
| `compacta` | `py-20 md:py-28` | 04, 05 |
| `normal` | `py-28 md:py-40` | 02 |
| `momento` | `py-36 md:py-56` | 01, 03, 06 |

01 va en `momento` y sin `min-height`: la apertura respira por padding, no por alto de viewport.

## 6. Color

Los tokens no cambian. Cambia la disciplina de uso.

- **Un solo blanco.** Se eliminan `hondo-blanco` y `hondo-claro`: sus gradientes se solapan (`hondo-claro` empieza en `#FFFFFF`) y hacían indistinguibles cuatro secciones seguidas. Fondo claro = `#FFFFFF` plano.
- **`gris-claro`** deja de ser fondo de sección: solo filetes y rellenos de ficha.
- **Navy exactamente dos veces**, en 03 y 06. Se conserva `hondo-navy` para darles relieve.
- **Dorado, tres trabajos y ninguno más:** el `≡` del wordmark, `MarcaSeccion`, y una palabra de acento por declaración. Se elimina el dorado como relleno de icono y como campo ambiental. Se eliminan `velo-dorado`, `velo-frio` y `dorado-metal`.
- **`azul-claro #C8EEF5`** — hoy declarado y sin usar — pasa a ser el fondo de los chips de entregables en 04, con texto navy: **13,5:1**.
- Se conserva `dorado-texto #8A6520` para texto pequeño dorado sobre claro.

**Contraste mínimo exigido:** 4,5:1 texto normal, 3:1 texto grande y gráficos con significado. Esto cierra los pendientes que quedaron abiertos en la revisión: el acento del titular, el 30+ de Estratega, la flecha entre fases y los iconos dorados sobre blanco — todos desaparecen o se recolorean.

## 7. `MarcaSeccion`: el ≡ como sistema

La única idea gráfica de la página, y la respuesta a "le falta gráfico".

Cada sección lleva su marca en la columna de margen, y **la marca progresa al bajar**: muchas líneas desordenadas al principio, tres barras alineadas al final. La filosofía del manual (Complejidad → Enfoque → Claridad) deja de estar ilustrada en un rincón y pasa a ser el mobiliario del documento.

**Implementación:** reutiliza la geometría ya probada de `lib/simbolo.ts` (`VIEWBOX_SIMBOLO`, `LINEAS_SIMBOLO`, `BARRAS_SIMBOLO`) y las posiciones dispersas de `SecuenciaClaridad`. `MarcaSeccion({ paso })` con `paso` de 0 a 5 interpola **estáticamente** cada línea entre su posición dispersa y su barra destino con factor `paso/5`; las líneas no supervivientes bajan de opacidad con el mismo factor. En `paso === 5` quedan las tres barras del `≡` exactas.

Sin animación, sin estado, sin JS: es un SVG calculado en render. Server component.

**Sustituye a todo el aparato gráfico actual.** Se eliminan diecisiete primitivas: `FondoPuntos`, `PatronPuntos`, `Resplandor`, `IlustracionNudo`, `IlustracionBifurcacion`, `IlustracionInflexion`, `IlustracionConvergencia`, `SecuenciaClaridad`, `SimboloMarca`, `TarjetaSpotlight`, `MarcoRetrato`, `EscenaDialogo`, `ParDialogo`, `FondoFoto`, `TextoDesenfoque`, `ContadorNumero`, `ProgresoLectura`, y el sistema de iconos `Icono` con sus 41 glifos.

## 8. Movimiento

**Un solo gesto: `revelar`.** 12px de subida + fade, 400ms, `cubic-bezier(0.22, 1, 0.36, 1)`, una vez, al entrar en viewport, escalonado 60ms entre hermanos.

Se eliminan: parallax, scroll fijado, contadores, spotlight, hover-lift, blur palabra a palabra, barra de progreso de lectura, compactación del header, dibujado de ilustraciones y puntos reactivos al cursor.

**Montado al revés de como está hoy — este es el punto crítico.** El export actual manda 112 elementos en `opacity: 0`; si el JS no llega, la página no se lee.

1. `app/layout.tsx` incluye un script inline bloqueante en `<head>`: `document.documentElement.classList.add('js')`.
2. `globals.css`:
   ```css
   @media (prefers-reduced-motion: no-preference) {
     .js [data-revelar]                { opacity: 0; transform: translateY(12px); }
     .js [data-revelar][data-visible]  { animation: revelar 400ms cubic-bezier(.22,1,.36,1) both;
                                          animation-delay: calc(var(--i, 0) * 60ms); }
   }
   @keyframes revelar { to { opacity: 1; transform: none; } }
   ```
3. `<Revelar indice>` (client) pinta un envoltorio con `data-revelar` y `style={{ '--i': indice }}`. Un único `IntersectionObserver` a nivel de módulo, compartido por todas las instancias, marca `data-visible` al entrar y deja de observar. `indice` lo pasa la sección: es la posición del bloque entre sus hermanos, y sirve solo para escalonar el retardo. Cuando se omite, vale 0.

**Consecuencias:** sin JS, todo visible. Con `prefers-reduced-motion: reduce`, el estado oculto nunca llega a aplicarse — no hace falta el hook `usePrefersReducedMotion` ni el spread `motionProps` en ninguna sección.

## 9. Arquitectura

- **Fuera `framer-motion`** (53,6 kB del bundle compartido) y **fuera `embla-carousel`** + `embla-carousel-autoplay`, que ya no usa nadie.
- **Las secciones vuelven a ser server components.** Hoy las diez son `'use client'`. El único componente cliente será `Revelar`.
- **Siete primitivas**, frente a las ~20 actuales:

  | Primitiva | Papel |
  |---|---|
  | `Container` | ancho y padding horizontal |
  | `Seccion` | la retícula de margen + el ritmo vertical + fondo |
  | `MarcaSeccion` | la progresión del ≡ |
  | `Antetitulo` | el rótulo dorado (ya existe) |
  | `CTA` | los botones (ya existe) |
  | `Wordmark` | el logotipo (ya existe, intacto) |
  | `Revelar` | el único gesto de movimiento |

- `lib/content.ts` sigue siendo el source of truth del copy.
- `lib/motion.ts` se elimina.

## 10. Copy

**Verbatim, sin tocar** (son palabras de la dueña, de su deck):

- Los seis puntos de inflexión (nombre + situación).
- Los cuatro dolores en primera persona.
- El remate: "Esto no se resuelve con más esfuerzo. Se resuelve con una estrategia clara."
- Las frases-ancla aprobadas.
- Los nombres de las ocho etapas y sus entregables.
- El insight: "No vendemos marketing. Vendemos claridad estratégica."

**Se escribe nuevo** solo el tejido conectivo que pide la estructura nueva: antetítulos y títulos de las seis secciones, y los sumarios de una línea bajo cada uno. Se recortan las respuestas largas del recorrido, que existían para llenar seis pantallas fijadas.

**Se mantiene la prohibición de escasez** en 01 (`cupos|cohorte|generación fundadora`), decisión explícita de la dueña.

Los placeholders `TODO dueña` (WhatsApp, email, LinkedIn, dominio, retrato) siguen siendo placeholders. No se inventan valores.

## 11. Accesibilidad

- Skip link al `<main>` — hoy no hay.
- Un solo `<h1>` (01); cada sección con su `<h2>`.
- `100svh`/`100dvh` en vez de `100vh` donde haga falta.
- Foco visible con contraste ≥ 3:1 **contra el fondo sobre el que aparece**: anillo navy sobre claro, dorado sobre navy. El dorado global de hoy da 2,76:1 sobre blanco.
- Nada de contenido oculto tras estado de scroll.

## 12. Tests

Se mantiene la convención del repo: **copy y contrato de marca, no estilos**, salvo cuando el estilo *es* el contrato (contraste, contenido oculto).

Se conservan intactos: `simbolo.test.ts`, `Wordmark.test.tsx`, `Antetitulo.test.tsx`, `CTA.test.tsx`, `Container.test.tsx`, `contraste.test.ts` y `content.test.ts`.

Se reescriben, no se conservan, los tests de sección: las seis secciones nuevas no se corresponden una a una con las diez viejas. Cada una estrena su test de copy, y el test negativo de escasez viaja de `Hero.test.tsx` al de la sección 01.

Se añaden:

1. **Guarda de contenido oculto**, generalizada a las seis secciones: ninguna renderiza elementos con `style.opacity === '0'` ni `style.filter` con blur. Es el fallo que ya nos mordió una vez.
2. **`MarcaSeccion`**: `paso={5}` produce exactamente las tres barras de `LINEAS_SIMBOLO`; `paso={0}` produce las nueve líneas dispersas.
3. **Guarda de escala**: la página monta exactamente un elemento con `text-display`.

Se eliminan los tests de los componentes eliminados.

## 13. Criterios de aceptación

1. `pnpm test`, `npx tsc --noEmit` y `pnpm lint` limpios.
2. `pnpm build` correcto, y `out/index.html` con **cero** ocurrencias de `opacity:0` y de `filter:blur`.
3. `framer-motion` y `embla-carousel` no aparecen en `package.json` ni en el bundle.
4. Exactamente **dos** secciones navy y **un** elemento a escala `display`.
5. Todo par texto/fondo cumple 4,5:1 (normal) o 3:1 (grande y gráficos).
6. Con JavaScript desactivado, la página se lee completa.

## 14. Fuera de alcance

- El retrato real de la estratega y los datos de contacto: siguen pendientes de la dueña.
- Los dos casos de proyectos reales que la dueña prometió el 29/jul.
- Cualquier decisión sobre si la escasez ("Generación Fundadora") puede vivir fuera del hero.

## 15. Riesgos

1. **Va contra el último encargo de la dueña.** Pidió "algo de gráfico y movimiento"; esto reduce ambos. El argumento a favor es que el ≡ progresivo es más gráfico que diez adornos ambientales, y que un solo gesto de movimiento se nota más que doce repartidos. Es su marca: necesita aprobarlo.
2. **Se retira trabajo real.** El recorrido fijado, cinco ilustraciones SVG, catorce fotografías acreditadas y el sistema de iconos son semanas de trabajo. Queda todo en git, pero sale de la página.
3. **Con una sola familia tipográfica, la distinción depende entera de la composición.** Si el resultado se siente genérico, la salida natural sería una segunda familia para display — y eso choca con la decisión de tipografía que el usuario marcó como intocable.