Creeer-Web/docs/superpowers/specs/2026-08-19-creeer-rediseno-documento-design.md

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.

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:

   @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.