diff --git a/docs/superpowers/specs/2026-08-07-creeer-rediseno-documento-design.md b/docs/superpowers/specs/2026-08-07-creeer-rediseno-documento-design.md new file mode 100644 index 0000000..70c3035 --- /dev/null +++ b/docs/superpowers/specs/2026-08-07-creeer-rediseno-documento-design.md @@ -0,0 +1,247 @@ +# Rediseño completo · «El documento» + +**Fecha:** 7/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 ``: `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. `` (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 `
` — hoy no hay. +- Un solo `

` (01); cada sección con su `

`. +- `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.