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

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