feat: rebrand a Manual de Identidad Visual v1.0

Migra todo el sitio a la marca oficial aprobada por la dueña:
- Logotipo cre≡er (el símbolo ≡ reemplaza la 'e' central, en dorado)
- Paleta: Azul Profundo #0A1D5D + Dorado Estratégico #C4942E + Blanco + neutros
- Tipografía: Aptos (Inter como fallback web), fin del sistema híbrido Georgia/Inter
- Tagline 'CLARIDAD · DIRECCIÓN · CRECIMIENTO' + eslogan 'Estrategia que transforma.'

Componentes, tokens de Tailwind, lib/content.ts, docs (dueña-directrices + spec)
y tests actualizados. Typecheck, lint, 27/27 tests y build estática verdes.

Basado en docs/branding.jpeg (Manual v1.0, mayo 2026).

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

@@ -35,65 +35,68 @@ Landing page **one-page** para **creeer**, marca personal de una estratega de cr
 
 ## 3. Sistema de diseño
 
+> **Actualizado 28/jul/2026** — Basado en el Manual de Identidad Visual v1.0 (mayo 2026). Ver `docs/branding.jpeg` y `docs/dueña-directrices.md`.
+
 ### 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 |
+| `bg-white` | `#FFFFFF` | Fondo base y hero |
+| `bg-azul-profundo` | `#0A1D5D` | Secciones oscuras (04 y 07) |
+| `text-azul-profundo` | `#0A1D5D` | Texto principal |
+| `text-white` | `#FFFFFF` | Texto sobre fondo oscuro |
+| `text-dorado` / `bg-dorado` | `#C4942E` | Dorado Estratégico — acentos, títulos, símbolo ≡ |
+| `bg-azul-claro` | `#C8EEF5` | Fondos alternativos, secciones suaves |
+| `bg-gris-claro` | `#F2F2F2` | Fondos neutros, separadores |
+| `text-gris-medio` | `#AAAAAA` | Texto secundario / placeholders |
 
 **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 |
+| Headlines, body, CTA, UI | **Aptos** | Light–Black | normal |
+| Taglines, subtítulos compactos | **Aptos Narrow** | Light–Black | normal |
 
-Principio: **serif = voz de marca**, **sans = voz funcional**. Georgia no requiere import (system font). Inter se carga desde Google Fonts.
+> **Nota web:** Aptos (Microsoft) no está en Google Fonts. Se autoaloja como .woff2 o se usa **Inter** como fallback métricamente similar (cargado desde Google Fonts como respaldo).
 
-### 3.3 Escala tipográfica (extraída del pptx)
+### 3.3 Escala tipográfica
 
 | 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 |
+| Hero headline | 32px / 48px | Bold o Black |
+| Sección título | 28px / 36px | Bold |
+| Cita ancla | 24px / 32px | Bold italic |
+| Subtítulo / body large | 18px / 24px | Regular |
+| Body | 16px / 18px | Regular |
+| Eyebrow / label | 11px / 12px | Medium uppercase (tracking +3px) |
+| Caption / métricas label | 10px / 11px | Medium uppercase |
 
-### 3.4 Wordmark
+### 3.4 Wordmark / Logotipo
 
-`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**
+**`cre≡er`** — siempre en minúsculas, Aptos (o Inter como fallback):
+- `cre` en Azul Profundo `#0A1D5D` (sobre claro) o blanco `#FFFFFF` (sobre oscuro)
+- **`≡`** (símbolo de tres líneas, reemplaza la "e" central) en **Dorado Estratégico `#C4942E`**
 - `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).
+**Tagline debajo:** `CLARIDAD · DIRECCIÓN · CRECIMIENTO`
+**Eslogan:** *"Estrategia que transforma."*
 
-### 3.5 Recursos visuales recurrentes (del pptx)
+**Tamaño:** base 32–48px según contexto. Es la firma de marca, siempre en minúsculas.
+
+### 3.5 Recursos visuales recurrentes
 
 - 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
+- **Patrón de puntos** (grid de puntos dorados) — recurso del branding
+- **Líneas y divisores** en dorado o azul profundo
+- **Iconografía:** líneas simples, geométricas, consistentes en grosor
 
 ### 3.6 Espaciado y ritmo
 
@@ -104,8 +107,8 @@ Principio: **serif = voz de marca**, **sans = voz funcional**. Georgia no requie
 
 ### 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`
+- Secciones **claras**: fondo blanco `#FFFFFF`. Alternar con `#F2F2F2` (gris claro) o `#C8EEF5` (azul claro) para ritmo visual.
+- Secciones **oscuras** (04, 07): fondo Azul Profundo `#0A1D5D` con texto blanco y acentos Dorado `#C4942E`
 - Esto da **ritmo visual** al scroll y enmarca las partes estratégicas (mecanismo + cierre)
 
 ---
@@ -114,20 +117,20 @@ Principio: **serif = voz de marca**, **sans = voz funcional**. Georgia no requie
 
 Dos finalistas guardados en `docs/hero-finalists.md`. La dueña elige uno. Ambos comparten:
 
-- Wordmark `cre`**`e`**`er.` (Georgia italic)
+- Logotipo `cre≡er` (Aptos / Inter)
 - 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)
+- CTA: `Define tu siguiente movimiento →` (Azul Profundo, 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
+- Headline en **Aptos Black uppercase**
+- "más esfuerzo" en dorado, "más claridad" subrayado en dorado
 - + punch / conversión, − cercanía
 
 ### 4.2 V-a · Editorial minimal
-- Headline en **Georgia 700 italic** (todo serif)
+- Headline en **Aptos Bold**
 - Sin subhead, sin métricas. Solo wordmark → eyebrow → headline → CTA
 - + cercanía / limpieza, − punch