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

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.