docs: spec, plan, directrices, AGENTS.md (pre-scaffold)

.gitignore

@@ -0,0 +1,30 @@
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files
+.env
+.env*.local
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# superpowers brainstorming (visual companion mockups)
+/superpowers/
+/.superpowers/

AGENTS.md

@@ -0,0 +1,48 @@
+# creeer — Landing page
+
+One-page landing para **creeer**, marca personal de una estratega de crecimiento. Stack: Next.js 14 (App Router) + TypeScript + Tailwind CSS + Framer Motion, exportada como sitio estático. Español.
+
+## Estado del proyecto
+
+**Pre-scaffold** (sin código aún). Diseño completo y aprobado en `docs/superpowers/specs/2026-07-20-creeer-landing-design.md`. Próximo paso: scaffold Next.js + implementar las 7 secciones del spec.
+
+## ⚠️ Lee primero en cada sesión
+
+**`docs/dueña-directrices.md`** — directrices verbatim de la dueña + posicionamiento estratégico + sistema de diseño extraído del pptx. Toda decisión (copy, diseño, código) pasa por su filtro. **Si una propuesta contradice algo, pregunta antes de avanzar.**
+
+## Decisiones bloqueadas (no reabrir sin consultar a la dueña)
+
+- **Tono maestro:** "seguridad + cercanía" + "simple, directo, limpio".
+- **Wordmark:** `cre`**`e`**`er.` **SIEMPRE minúsculas**, Georgia 700 italic, la 2ª "e" en peso 900 + dorado, punto final dorado. **Nunca** `CREEER`, `Creeer`, sans-serif, ni mayúsculas. (Es la regla más fácil de romper por defecto.)
+- **Paleta:** navy `#0A1F44` + dorado tostado `#B8901f` (sobre claro) / dorado `#D4AF37` (sobre oscuro) + blanco cálido `#FBFAF7` / blanco `#FFFFFF`. **Sin amarillo eléctrico** tipo Hormozi.
+- **Tipografía híbrida:** Georgia italic = voz de marca (wordmark + citas); Inter 400/600/900 = voz funcional (headlines Hormozi + body + UI).
+- **Voz:** segunda persona ("tú"/"tu negocio"), sin jerga corporativa.
+- **Sin escasez en el hero:** no mostrar cupos, cohorte ni "Generación Fundadora" arriba (decisión de la dueña).
+
+## Stack y constraints
+
+- Next.js 14 App Router + TypeScript + Tailwind + Framer Motion
+- `output: export` → HTML estático, **sin backend**
+- Contacto por enlaces directos (WhatsApp, email, LinkedIn) — **sin formulario**
+- Deploy: Vercel o Netlify
+- Comandos: se definen al scaffold (`npm run dev`, `npm run build`, `npm run lint`)
+
+## Skills relevantes para este proyecto
+
+- `transformation-positioning` — messaging (vende el hoyo, no el taladro) **obligatorio al escribir copy**
+- `frontend-design`, `web-design-guidelines`, `vercel-react-best-practices`
+- `tailwind-design-system`, `nextjs-app-router-patterns`, `framer-motion-animator`
+- `seo`, `accessibility`, `performance`, `core-web-vitals`
+
+## Docs del proyecto
+
+- `docs/dueña-directrices.md` — source of truth de marca y posicionamiento
+- `docs/hero-finalists.md` — 2 finalistas del hero (**HV-1 Hormozi** / **V-a editorial**), la dueña elige
+- `docs/superpowers/specs/2026-07-20-creeer-landing-design.md` — spec de diseño aprobado (7 secciones, sistema visual, animación, SEO/a11y/perf)
+
+## Reglas operativas
+
+- **No commits** sin aprobación explícita del usuario.
+- **No reabrir** decisiones bloqueadas sin consultar a la dueña.
+- Si la dueña envía un mensaje nuevo (WhatsApp, etc.), agrégalo a `docs/dueña-directrices.md` en "Mensajes verbatim" con fecha y contexto.
+- Mockups del brainstorming visual companion en `.superpowers/brainstorm/` (en `.gitignore`, efímeros).

docs/dueña-directrices.md

@@ -0,0 +1,189 @@
+# Directrices de la dueña · creeer
+
+> **Source of truth para decisiones de marca, copy y diseño.**
+> Esta es la voz y el criterio de la dueña de creeer. Toda decisión del proyecto debe pasar por este filtro. Si una propuesta contradice algo de aquí, **preguntar antes de avanzar**.
+
+---
+
+## Quién es la dueña
+
+La dueña es **la mente detrás de creeer** — estratega de crecimiento con +30 años construyendo marcas. Su negocio real es **claridad estratégica para empresarios con tracción que llegaron a un punto de inflexión** (no vende marketing, vende la transformación).
+
+El nombre **creeer** es un juego con "creer" (en ti, en mí, en el proyecto) + "career".
+
+---
+
+## Mensajes verbatim de la dueña (contexto y voz)
+
+Estos son los mensajes que la dueña envió por WhatsApp durante el brainstorming, transcritos literalmente. **Preservar su voz y sus palabras.**
+
+### Sobre la sensación que quiere proyectar
+> **"Sabes lo que quiero que proyectemos es seguridad pero cercanía."**
+
+*(3:03 p.m., 20/7/2026)* — Esta es la directriz maestra de tono. **No frío/distante, no agresivo puro. Autoridad accesible.**
+
+### Sobre el wordmark en minúsculas
+> **"Por eso está en minúsculas."**
+
+*(3:04 p.m., 20/7/2026)* — La decisión de escribir `creeer` en minúsculas es **consciente y estratégica**: transmite cercanía, humildad, accesibilidad (frente al frío de los mayúsculas institucionales). **NUNCA usar `CREEER` ni `Creeer` en el wordmark** — siempre `creeer`.
+
+### Sobre la paleta y el estilo
+> **"Creo que el blanco con azul."**
+> **"Simple directo."**
+> **"Limpio."**
+
+*(3:12 p.m., 20/7/2026)* — Tres directrices visuales:
+1. **Blanco con azul** → fondo claro + navy (no dark mode como dirección principal)
+2. **Simple directo** → sin decoración, sin elementos accesorios, copy directo
+3. **Limpio** → mucho aire, blanco, tipografía hace el trabajo
+
+### Referencia a Alex Hormozi
+La dueña mencionó a **Alex Hormozi** como referencia estética/comunicacional. Su ADN:
+- Bold sans-serif gigante, a menudo uppercase
+- Alto contraste (negro/blanco/un acento eléctrico — en creeer, dorado)
+- Copy directo, corto, cuantificado (números, métricas, claims)
+- Palabras clave en caja (background detrás de la palabra)
+- Voz agresiva, results-driven, "sin paja"
+
+> ⚠️ **Tensión a equilibrar:** Hormozi es agresivo/directo, pero la dueña también pidió **cercanía + minúsculas + blanco+azul + limpio**. La síntesis es **"Hormozi en voz, creeer en alma"**: el punch visual de Hormozi (bold sans, palabras en caja) con el dorado tostado, el wordmark serif en minúsculas y la paleta cálida de creeer.
+
+---
+
+## Principios derivados (cómo aplicar los mensajes)
+
+| Directriz de la dueña | Implicación práctica |
+|---|---|
+| "Seguridad + cercanía" | Serif para autoridad + voz en "tú" + fondos cálidos para cercanía |
+| "minúsculas" | Wordmark SIEMPRE `creeer`. Eyebrows y CTAs pueden ser uppercase (system-ui) pero el wordmark jamás |
+| "blanco con azul" | Fondo principal blanco/blanco cálido, navy como tinta y CTA |
+| "Simple directo" | Sin elementos decorativos accesorios. Copy corto, una idea por línea |
+| "Limpio" | Mucho aire (whitespace), máximo 2 familias tipográficas, paleta reducida |
+| Referencia Hormozi | Permitido bold sans uppercase + palabras en caja + métricas, **siempre que** no rompan cercanía |
+
+---
+
+## Posicionamiento estratégico (de su documento de nicho)
+
+Esto NO es copy de landing — es la brújula estratégica que la dueña ya validó. Toda la messaging debe ser coherente con esto.
+
+### Lo que creeer NO es
+- ❌ Un diplomado de marketing
+- ❌ Una consultoría genérica
+- ❌ Clases/asesoría por hora
+- ❌ Venta de disciplinas (Comunicación/Digital/Experiencias) como promesa
+
+### Lo que creeer SÍ es
+- ✅ **Claridad estratégica** para empresarios con tracción en punto de inflexión
+- ✅ Transformación, no horas
+- ✅ Inmersión profunda → desafiar supuestos → estrategia ejecutable
+
+### Cliente ideal
+Empresarios que **ya lograron tracción**, pero llegaron al punto donde **trabajar más ya no basta** — necesitan mejores decisiones estratégicas. NO cualquier PYME. NO empresas en crisis. **Empresas en transición.**
+
+### Frases-ancla aprobadas (de su documento)
+- *"Las empresas no dejan de crecer por falta de talento; dejan de crecer por falta de claridad."*
+- *"Cuando el esfuerzo ya no alcanza, la estrategia se vuelve indispensable."*
+- *"El tiempo no se compra, se invierte."* (institucional)
+- *"Devuélvele claridad al rumbo de tu empresa."* (promesa)
+
+### Tagline de marca
+*"creeer en ti, creeer en mí, creeer en el proyecto."*
+
+### Pilares (disciplinas, NO la promesa)
+**Comunicación · Digital · Experiencias** (+ Integración y acción). Son las herramientas, no el producto. **Viven en sección "cómo", no en el hero.**
+
+---
+
+## Restricciones fijadas (decisiones ya tomadas)
+
+Estas son decisiones bloqueadas durante el brainstorming. **No reabrir sin consultar.**
+
+### Paleta
+- Blanco cálido `#FBFAF7` / Blanco puro `#FFFFFF` (fondos)
+- Navy `#0A1F44` (texto principal + CTAs)
+- Dorado tostado `#B8901f` (acentos sobre claro) / Dorado `#D4AF37` (acentos sobre oscuro)
+- **NO amarillo eléctrico tipo Hormozi** (rompe cercanía)
+
+### Sistema de diseño extraído del pptx (BASE)
+
+El pptx `CREEER_Plantilla_Presentacion.pptx` es la **base visual oficial** de la marca. Estos datos se extrajeron parseando el archivo y deben respetarse:
+
+**Formato:** 16:9 widescreen (33.87 × 19.05 cm)
+
+**Paleta usada en el pptx (100% confirmada):**
+- Dorado `#D4AF37` → **siempre BOLD, para títulos y énfasis** (Master Class, Agenda, sección, "Gracias", y la "e" del wordmark)
+- Navy `#0A1F44` → **body text** (peso regular)
+- Blanco implícito (fondos)
+
+**Tipografía del pptx:**
+- Fuente: **Calibri** (sans-serif) — majorFont y minorFont del tema
+- **Decisión RESUELTA (sistema híbrido):**
+  - **Wordmark** `cre`**`e`**`er.` → **Georgia 700 italic** (minúscula, "e" central en peso 900 + dorado, punto final dorado). El usuario prefiere la elegancia del wordmark serif sobre la fidelidad estricta al pptx sans-serif. El wordmark es la firma de marca.
+  - **Headlines** → **Inter 900** (Google Fonts) uppercase — punch Hormozi.
+  - **Body / eyebrow / CTA** → Inter 400/600.
+  - **Citas institucionales** → Georgia italic (anclan con el wordmark).
+  - Principio: **serif = voz de marca**, **sans = voz funcional**.
+
+**Escala tipográfica (extraída de los slides reales):**
+| Uso | Tamaño | Estilo | Color |
+|---|---|---|---|
+| Caption/tagline | 14pt | regular | navy |
+| Subtítulo | 24pt | regular | navy |
+| Body / lista | 28pt | regular | navy |
+| Cierre | 32pt | regular | dorado |
+| Título de sección | 36pt | **BOLD** | dorado |
+| Título grande / cita | 40pt | **BOLD** | navy o dorado |
+| Hero | 48pt | **BOLD** | dorado |
+
+**Wordmark `cre`+`e`+`er` (confirmado a múltiples tamaños):**
+- "Cre" + "e" (BOLD + `#D4AF37`) + "er"
+- La **2ª "e"** (la del medio) va en dorado + negrita
+- Aparece en 14pt (slide 1) y 28pt (slide 2)
+
+**Logo PNG:** `image1.png` — 1200×400 px, aspect **3:1 horizontal**. En slide 1 ocupa 27.38 × 9.13 cm (es el **protagonista visual**, no un detalle pequeño).
+
+**Patrones de alineación:**
+- `center` (align=ctr) → hero / títulos de impacto
+- `right` (align=r) → momentos asimétricos (slide 2)
+- `left` (align=l) → contenido, citas, cierre
+
+**Recursos visuales recurrentes:**
+- Separador de disciplinas: **" • "** (Comunicación • Digital • Experiencias)
+- Listas numeradas: **"1. " "2. " "3. "** (sin bullets)
+- Smart quotes **"" ""** para citas institucionales
+- Mucho aire/whitespace alrededor de los textos
+
+**Anclas de copy del pptx (verbatim):**
+- Tagline: *"creeer en ti, en mi, en el proyecto"* (slide 1 y 2)
+- Cita institucional: *"El tiempo no se compra, se invierte"* (slide 6, 40pt bold navy)
+- Cierre: *"Gracias por tu tiempo"* + *"CREEER - Comunicación • Digital • Experiencias"* (slide 7)
+
+### Wordmark
+- SIEMPRE en minúsculas: `creeer`
+- La "e" central (2ª de las 3) en dorado + bold
+- Termina con punto dorado: `creeer.`
+
+### Copy
+- Voz en **segunda persona ("tú")** — nunca "el empresario", siempre "tu negocio"
+- Sin jerga corporativa
+- "Simple, directo, limpio" aplica al copy también
+
+### Estructura
+- One-page (single page)
+- Sin backend, contacto por enlaces directos (WhatsApp, email, LinkedIn)
+- Sin escasez en el hero (la dueña pidió quitar cupos/cohorte del hero)
+
+### Pendiente de decisión de la dueña
+- **Hero final:** HV-1 (bold sans sin cajas) vs HV-2 (palabras en caja) — ver `docs/hero-finalists.md`
+
+---
+
+## Cómo usar este archivo
+
+Cuando trabajes en creeer (copy, diseño, código, decisiones de producto):
+
+1. **Lee esto primero** — es la voz de la dueña.
+2. **Pasa cada decisión por el filtro** de "seguridad + cercanía" + "simple, directo, limpio".
+3. **Si una propuesta contradice algo de aquí**, detente y pregunta antes de avanzar.
+4. **Si la dueña envía un mensaje nuevo**, agrégalo a la sección "Mensajes verbatim" con fecha y contexto.
+5. **Las decisiones bloqueadas** (paleta, wordmark, voz) no se reabren sin su aprobación explícita.

docs/hero-finalists.md

@@ -0,0 +1,118 @@
+# Hero finalists · creeer
+
+Dos candidatos finales para el hero de la landing. **Mismo copy, misma paleta, mismo wordmark, mismo layout centrado.** La diferencia es el **tono del headline**:
+
+- **HV-1** → punch Hormozi (headline en Inter 900 uppercase)
+- **V-a** → pureza editorial (headline en Georgia italic, todo serif)
+
+La dueña puede elegir uno. Ambos respetan: wordmark `cre`**`e`**`er.` en Georgia italic, voz en "tú", paleta del pptx, "simple, directo, limpio", sin escasez en el hero.
+
+---
+
+## Base común
+
+**Wordmark:** `cre`**`e`**`er.` en **Georgia 700 italic**, minúscula, con la **"e" central** (2ª de las 3) en peso 900 + dorado `#B8901f`, y punto final dorado. *(El wordmark es la firma de marca — siempre serif italic, sin importar el hero elegido.)*
+
+**Eyebrow:** `— tu estratega de crecimiento —` (small caps, dorado tostado)
+
+**Headline copy:**
+> Tu negocio no necesita más esfuerzo.
+> Necesita más claridad.
+
+**CTA:** `Define tu siguiente movimiento →` (navy fill, white text, chunky)
+
+**Paleta:**
+- Blanco `#FFFFFF` (fondo)
+- Navy `#0A1F44` (texto + CTA)
+- Dorado tostado `#B8901f` (acentos)
+
+**Sin escasez:** NO se muestran cupos, cohorte ni "Generación Fundadora" en el hero (decisión de la dueña). Esos elementos, si aparecen, viven en sección posterior de la página.
+
+**Voz:** segunda persona ("tú"/"tu negocio"), directa, sin jerga corporativa.
+
+---
+
+## HV-1 · Hormozi ligero (punch)
+
+**Tratamiento:**
+- Headline en **Inter 900 uppercase** con tracking negativo (`letter-spacing: -1.5px`)
+- "más **esfuerzo**" en color dorado tostado `#B8901f`
+- "más **claridad**" con **subrayado dorado** grueso (5px solid)
+- Wordmark sigue en Georgia italic (contraste serif/sans intencional)
+
+**Sensación:** punto medio exacto entre la limpieza del pptx y el punch Hormozi. El contraste tipográfico (wordmark serif + headline sans) da energía sin perder clase.
+
+**Trade-off:**
+- ✅ Punch visual, más conversión
+- ✅ Headline memorable, retención media
+- ✅ Mantiene el wordmark serif (marca intacta)
+- ⚠️ Más agresivo que V-a; algo menos de cercanía
+
+**Mejor si la dueña prioriza:** impacto, conversión, diferenciación.
+
+---
+
+## V-a · Editorial minimal (cercanía)
+
+**Tratamiento:**
+- **TODO en Georgia serif italic** — wordmark + eyebrow + headline + CTA
+- "más **esfuerzo**" en color dorado tostado, italic
+- "más **claridad**" subrayada en dorado
+- Sin métricas, sin subhead, sin elementos accesorios. Solo 4 bloques: wordmark → eyebrow → headline → CTA
+
+**Sensación:** calma editorial pura. Máximo aire. "Simple, directo, limpio" llevado al extremo. La cercanía que pidió la dueña en su forma más pura.
+
+**Trade-off:**
+- ✅ Máxima cercanía y limpieza
+- ✅ Coherencia tipográfica total (todo serif)
+- ✅ Elegancia atemporal
+- ⚠️ Menos punch de conversión que HV-1
+- ⚠️ Podría sentirse "demasiado tranquilo" para vender
+
+**Mejor si la dueña prioriza:** "seguridad + cercanía", "simple, directo, limpio", prestigio editorial.
+
+---
+
+## Spectrum visual
+
+| Hero | Cercanía | Punch Hormozi | Estilo |
+|---|---|---|---|
+| **V-a** (todo serif italic) | **Alta** | Bajo | Editorial puro — calma, elegancia |
+| **HV-1** (serif + sans Hormozi) | Media | **Medio-alto** | Hybrid — punch + marca |
+
+---
+
+## Cómo decidir (pregunta para la dueña)
+
+> ¿Prefieres que el hero **respire y se sienta cálido** (V-a), o que **tenga punch e impacte** (HV-1)?
+
+Ambos funcionan. La decisión es de tono, no de calidad. El wordmark, la paleta y el copy son idénticos — solo cambia la energía del headline.
+
+---
+
+## Mockups en vivo
+
+Servidor visual companion (activo durante la sesión de brainstorming):
+```
+http://localhost:55739/?key=7cb508aff417782d47d2fdf9c54062393af1d0d1e6e2d19090228dbf67df333b
+```
+
+Archivos fuente de los mockups:
+- `.superpowers/brainstorm/2447-1784580629/content/three-georgia-heroes.html` (#2 V-a)
+- `.superpowers/brainstorm/2447-1784580629/content/heroes-wordmark-restored.html` (HV-1 con wordmark Georgia)
+- `.superpowers/brainstorm/2447-1784580629/content/va-large-locked.html` (V-a en grande)
+
+---
+
+## Nota técnica (para implementación)
+
+Independientemente de cuál se elija, la implementación es la misma base Next.js + Tailwind + Framer Motion:
+- Componente `<Hero>` con el wordmark, eyebrow, headline y CTA
+- Animación de entrada escalonada (Framer Motion): wordmark → eyebrow → headline → CTA
+- Fuentes: **Georgia** (system serif, no requiere import) + **Inter** (Google Fonts, solo si se usa HV-1)
+
+**Diferencia entre HV-1 y V-a en código:**
+- V-a: headline usa `font-family: Georgia, serif; font-style: italic`
+- HV-1: headline usa `font-family: 'Inter', sans-serif; font-weight: 900; text-transform: uppercase`
+
+Cambiar entre ambos es **trivial** (un `className` condicional). Se puede dejar como prop del componente `<Hero variant="editorial" | "hormozi">` para que la dueña decida en QA.

docs/superpowers/specs/2026-07-20-creeer-landing-design.md

@@ -0,0 +1,289 @@
+# Spec de diseño · creeer landing page
+
+**Fecha:** 2026-07-20
+**Estado:** Borrador (pendiente de revisión de la dueña para la decisión final del hero)
+**Skill usado:** `brainstorming`
+
+> **Lectura obligatoria antes de implementar:** `docs/dueña-directrices.md` (directrices verbatim de la dueña + posicionamiento estratégico). Toda decisión debe pasar por su filtro: **"seguridad + cercanía"** y **"simple, directo, limpio"**.
+
+---
+
+## 1. Visión del proyecto
+
+Landing page **one-page** para **creeer**, marca personal de una estratega de crecimiento. El objetivo es **credibilidad y prestigio** (no venta directa ni generación de leads por formulario). El contacto es por enlaces directos.
+
+**Promesa central:** claridad estratégica para empresarios con tracción que llegaron a un punto de inflexión.
+
+**Tono maestro:** seguridad + cercanía. Autoridad accesible, no distante.
+
+---
+
+## 2. Brief consolidado
+
+| Eje | Decisión |
+|---|---|
+| Tipo de sitio | Landing one-page (single page) |
+| Objetivo #1 | Credibilidad / prestigio |
+| Audiencia | Empresarios con tracción en punto de inflexión |
+| Idioma | Español |
+| Stack | Next.js 14 (App Router) + TypeScript + Tailwind CSS + Framer Motion |
+| Modo | `output: export` (HTML estático, sin backend) |
+| Contacto | Enlaces directos (WhatsApp, email, LinkedIn) — sin formulario |
+| Deploy | Vercel o Netlify |
+
+---
+
+## 3. Sistema de diseño
+
+### 3.1 Paleta
+
+Tokens de color (Tailwind):
+
+| Token | Hex | Uso |
+|---|---|---|
+| `bg-base` | `#FBFAF7` | Fondo base (blanco cálido) |
+| `bg-pure` | `#FFFFFF` | Secciones limpias / hero |
+| `bg-dark` | `#0A1F44` | Secciones oscuras (04 y 07) |
+| `text-primary` | `#0A1F44` | Texto principal (navy) |
+| `text-on-dark` | `#F5EBD0` | Texto sobre fondo oscuro (marfil) |
+| `accent-gold` | `#B8901f` | Dorado tostado — acentos sobre claro |
+| `accent-gold-bright` | `#D4AF37` | Dorado — acentos sobre oscuro |
+| `text-muted` | `#5a5168` | Texto secundario sobre claro |
+| `text-muted-dark` | `#9aa6c2` | Texto secundario sobre oscuro |
+
+**NO usar amarillo eléctrico tipo Hormozi** — rompe la cercanía.
+
+### 3.2 Tipografía
+
+Sistema híbrido (decisión final):
+
+| Uso | Familia | Pesos | Estilo |
+|---|---|---|---|
+| Wordmark + citas institucionales | **Georgia** (system serif) | 700 / 900 | italic |
+| Headlines (Hormozi punch, si HV-1) | **Inter** (Google Fonts) | 900 | uppercase |
+| Body / eyebrow / CTA / UI | **Inter** | 400 / 600 / 700 | normal |
+
+Principio: **serif = voz de marca**, **sans = voz funcional**. Georgia no requiere import (system font). Inter se carga desde Google Fonts.
+
+### 3.3 Escala tipográfica (extraída del pptx)
+
+| Rol | Tamaño (móvil / desktop) | Peso |
+|---|---|---|
+| Hero headline | 32px / 48px | 700 italic (V-a) o 900 uppercase (HV-1) |
+| Sección título | 28px / 36px | 700 |
+| Cita ancla | 24px / 32px | 700 italic |
+| Subtítulo / body large | 18px / 24px | 400 |
+| Body | 16px / 18px | 400 |
+| Eyebrow / label | 11px / 12px | 600 uppercase (tracking +3px) |
+| Caption / métricas label | 10px / 11px | 600 uppercase |
+
+### 3.4 Wordmark
+
+`cre`**`e`**`er.` — siempre en minúsculas, Georgia 700 italic:
+- `cre` en navy `#0A1F44` (sobre claro) o marfil `#F5EBD0` (sobre oscuro)
+- **`e`** (la 2ª de las 3 "e") en **peso 900 + dorado**
+- `er` en el color del "cre"
+- **`.`** (punto final) en dorado
+
+**Tamaño:** base 32–48px según contexto. Es la firma de marca, va en serif italic SIEMPRE (no en sans, no en mayúsculas).
+
+### 3.5 Recursos visuales recurrentes (del pptx)
+
+- Separador de disciplinas: **" • "** (Comunicación • Digital • Experiencias)
+- Listas numeradas: **"1." "2." "3."** (sin bullets)
+- Smart quotes **"" ""** para citas institucionales
+- Flecha **"→"** en CTAs
+- Mucho aire/whitespace
+
+### 3.6 Espaciado y ritmo
+
+- Container max-width: **1152px** (max-w-5xl / 7xl en Tailwind)
+- Padding horizontal: 24px (móvil) / 48px (desktop)
+- Espaciado vertical entre secciones: **96px** desktop / 64px móvil
+- Border-radius: **0** (cuadrado, editorial) o **4px** sutil en cards
+
+### 3.7 Layout de secciones
+
+- Secciones **claras**: hero (01) usa **blanco puro `#FFFFFF`**; el resto (02, 03, 05, 06) usa **blanco cálido `#FBFAF7`**. El contraste sutil separa el hero del cuerpo.
+- Secciones **oscuras** (04, 07): fondo navy `#0A1F44` con texto marfil y acentos dorado `#D4AF37`
+- Esto da **ritmo visual** al scroll y enmarca las partes estratégicas (mecanismo + cierre)
+
+---
+
+## 4. Hero (finalistas pendientes de decisión de la dueña)
+
+Dos finalistas guardados en `docs/hero-finalists.md`. La dueña elige uno. Ambos comparten:
+
+- Wordmark `cre`**`e`**`er.` (Georgia italic)
+- Eyebrow: `— tu estratega de crecimiento —`
+- Headline copy: *"Tu negocio no necesita más esfuerzo. Necesita más claridad."*
+- CTA: `Define tu siguiente movimiento →` (navy, white text, chunky)
+- Fondo blanco `#FFFFFF`
+- Sin escasez (sin cupos/cohorte)
+
+### 4.1 HV-1 · Hormozi ligero
+- Headline en **Inter 900 uppercase**
+- "más esfuerzo" en dorado tostado, "más claridad" subrayado en dorado
+- + punch / conversión, − cercanía
+
+### 4.2 V-a · Editorial minimal
+- Headline en **Georgia 700 italic** (todo serif)
+- Sin subhead, sin métricas. Solo wordmark → eyebrow → headline → CTA
+- + cercanía / limpieza, − punch
+
+**Implementación:** el componente `<Hero>` recibe una prop `variant="hormozi" | "editorial"`. La diferencia es 1 className en el headline. La dueña puede decidir en QA.
+
+---
+
+## 5. Flujo de secciones (one-page, 7 secciones)
+
+### 01 · Hero
+La promesa. HV-1 o V-a. CTA primario.
+
+### 02 · Frase ancla
+Cita a gran escala, Georgia italic centrada:
+> *"Las empresas no dejan de crecer por falta de talento; dejan de crecer por falta de claridad."*
+
+Motivo recurrente de marca. Fondo claro.
+
+### 03 · Para quién (filtro)
+Cualifica al lector. Headline: *"¿Llegaste a tu punto de inflexión?"* + 3 chips/tags:
+- ✓ tienes tracción
+- ✓ más esfuerzo no rinde
+- ✓ necesitas claridad
+
+Lenguaje: "Esto es para ti si..." Fondo claro.
+
+### 04 · Cómo trabajo (mecanismo) — SECCIÓN OSCURA
+El mecanismo único (lo inimitable). Tres pasos en secuencia:
+**Inmersión → Desafiar supuestos → Estrategia ejecutable**
+
+Fondo navy `#0A1F44`, texto marfil, números dorado `#D4AF37`. **Sin iconos** — los números 01/02/03 (Georgia italic, grandes) hacen todo el peso visual.
+
+### 05 · Las disciplinas
+Grid de 3 columnas:
+- **Comunicación**
+- **Digital**
+- **Experiencias**
+
+Framed como **herramientas**, no como la promesa. Borde superior dorado en cada card. Fondo claro.
+
+### 06 · Sobre la estratega
+La mente detrás de creeer. Retrato (foto de la dueña) + bio corta en primera persona. Credibilidad humana. Refuerza "cercanía".
+
+> **Pendiente:** ¿la dueña tiene foto profesional disponible? Si no, se usa placeholder con gradiente navy/dorado y se deja la sección lista para meter la foto después.
+
+### 07 · Cierre + contacto — SECCIÓN OSCURA
+Frase de cierre (Georgia italic sobre navy):
+> *"Devuélvele claridad al rumbo de tu empresa."*
+
+CTA final: `Define tu siguiente movimiento →` (botón dorado). Debajo, enlaces directos:
+- WhatsApp
+- Email
+- LinkedIn
+
+Fondo navy, acentos dorado.
+
+### Recurrencia del CTA
+`Define tu siguiente movimiento →` aparece en **01** y **07**. Ancla el principio y el final.
+
+---
+
+## 6. Messaging y copy
+
+### 6.1 Principio rector
+Aplicar el skill `transformation-positioning`: **vender el hoyo, no el taladro**. La claridad es el producto; estrategia, marketing, comunicación son los medios.
+
+### 6.2 Frases-ancla aprobadas (de la dueña)
+- *"Las empresas no dejan de crecer por falta de talento; dejan de crecer por falta de claridad."* (sección 02)
+- *"Cuando el esfuerzo ya no alcanza, la estrategia se vuelve indispensable."* (uso opcional)
+- *"El tiempo no se compra, se invierte."* (sección 06 o footer)
+- *"Devuélvele claridad al rumbo de tu empresa."* (sección 07)
+
+### 6.3 Voz
+- Segunda persona ("tú" / "tu negocio") — nunca "el empresario"
+- Directa, sin jerga corporativa
+- "Simple, directo, limpio" aplica al copy también
+
+---
+
+## 7. Restricciones técnicas
+
+- **Sin backend** — contacto por enlaces directos (WhatsApp `https://wa.me/...`, email `mailto:`, LinkedIn)
+- **Estático** — `output: export` en `next.config.js`
+- **Sin escasez en el hero** — decisión de la dueña (no mostrar cupos/cohorte/Generación Fundadora en el hero)
+- **Wordmark siempre minúsculas** — `creeer` jamás `CREEER` ni `Creeer`
+
+---
+
+## 8. SEO, accesibilidad y rendimiento
+
+### 8.1 SEO
+- Title tag: `creeer · tu estratega de crecimiento`
+- Meta description: la frase de posicionamiento (150–160 chars)
+- Open Graph image + Twitter card
+- Lang `es` en `<html>`
+- Estructura semántica: `<main>`, `<section>`, `<h1>` único en hero, `<h2>` por sección
+- JSON-LD `Person` o `ProfessionalService` para la estratega
+
+### 8.2 Accesibilidad (WCAG 2.2 AA)
+- Contraste navy `#0A1F44` sobre blanco: 14.6:1 ✅
+- Contraste dorado tostado `#B8901f` sobre blanco: 4.0:1 — usar solo para texto grande o decorativo, no body
+- Contraste marfil `#F5EBD0` sobre navy: 13.1:1 ✅
+- `alt` en el retrato de la dueña (sección 06)
+- `aria-label` en iconos de contacto (WhatsApp, email, LinkedIn)
+- Focus visible en todos los links y botones
+- `prefers-reduced-motion`: desactivar animaciones Framer Motion
+
+### 8.3 Rendimiento (Core Web Vitals)
+- Fuentes: Inter desde Google Fonts con `display: swap` + `preload`. Georgia es system font.
+- LCP: el headline del hero (texto, no imagen) — rápido
+- Animaciones Framer Motion: usar `LazyMotion` + `domAnimation` para reducir bundle
+- Imagen del retrato: `<Image>` de Next con `priority` solo si está above the fold (sección 06 está below the fold, sin priority)
+- Sin JavaScript crítico para el contenido (el hero es texto, se ve sin JS)
+
+---
+
+## 9. Animación (Framer Motion)
+
+Entrada escalonada del hero al montar:
+1. Wordmark (fade + slight Y)
+2. Eyebrow (fade, delay 0.1s)
+3. Headline (fade + Y, delay 0.2s)
+4. CTA (fade + Y, delay 0.3s)
+
+Duración: 0.4–0.6s cada uno. Easing: `[0.22, 1, 0.36, 1]` (easeOutExpo).
+
+En scroll (secciones 02–07): `whileInView` con `viewport={{ once: true }}` — fade + Y de 20px, duración 0.5s.
+
+**Accesibilidad:** todo envuelto en check de `useReducedMotion()` — si el usuario prefiere reducir movimiento, las animaciones se desactivan y el contenido aparece estático.
+
+---
+
+## 10. Pendientes / decisiones abiertas
+
+| Pendiente | Quién decide | Impacto |
+|---|---|---|
+| Hero final: HV-1 vs V-a | Dueña | 1 className en `<Hero>` |
+| Foto de la dueña para sección 06 | Dueña | Si no hay, placeholder gradiente |
+| Casos/testimonios (sección nueva entre 05 y 06) | Dueña | Solo si tiene casos documentados |
+| Datos de contacto reales (WhatsApp, email, LinkedIn) | Dueña | Links del footer/07 |
+| Dominio | Dueña | Deploy |
+| Copy definitivo de cada sección | Redacción posterior | Contenido |
+
+---
+
+## 11. Entregables de diseño
+
+- `docs/dueña-directrices.md` — directrices verbatim + posicionamiento
+- `docs/hero-finalists.md` — HV-1 y V-a con specs completas
+- `docs/superpowers/specs/2026-07-20-creeer-landing-design.md` — este spec
+- Mockups en `.superpowers/brainstorm/2447-1784580629/content/` (sesión visual companion)
+
+---
+
+## 12. Próximos pasos
+
+1. **Dueña revisa** este spec + `hero-finalists.md` y elige HV-1 o V-a
+2. Una vez aprobado, invocar el skill `writing-plans` para crear el **plan de implementación** detallado (sprint por sprint, tareas técnicas, orden de build)
+3. El plan se ejecutará con Next.js scaffold + Tailwind + Framer Motion, un componente por sección