diff --git a/docs/superpowers/specs/2026-07-21-creeer-landing-additions-design.md b/docs/superpowers/specs/2026-07-21-creeer-landing-additions-design.md
new file mode 100644
index 0000000..c9a6188
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-21-creeer-landing-additions-design.md
@@ -0,0 +1,157 @@
+# creeer Landing — Additions: Header + Cómo empezar + Footer
+
+**Date:** 2026-07-21
+**Branch:** `feat/header-comoempezar-footer`
+**Builds on:** `docs/superpowers/specs/2026-07-20-creeer-landing-design.md` (original 7-section landing, already implemented).
+
+## Goal
+
+Complete the page's structural chrome and its conversion on-ramp by adding three pieces to the existing one-page landing:
+
+1. A minimal sticky **Header** (wordmark + persistent CTA).
+2. A new **"Cómo empezar"** section (3 client-facing steps ending in a direct WhatsApp link).
+3. A slim **Footer**.
+
+No new architecture: these reuse the existing primitives, tokens, motion pattern, and content-in-`lib/content.ts` convention. Still a statically-exported Next.js 14 site — no backend, no forms, contact via direct links only.
+
+## Global constraints (inherited — apply to every piece here)
+
+- **Wordmark** always lowercase `creeer.`, rendered via the shared `Wordmark` primitive (never re-implemented, never uppercased).
+- **Paleta (tokens):** `ink #0A1F44` · `gold #B8901f` (accents on LIGHT) · `gold-bright #D4AF37` (accents on DARK) · `base #FBFAF7` (light bg) · `cream #F5EBD0` (text on dark) · `muted`/`muted-dark`.
+- **Tipografía híbrida:** Georgia italic = voz de marca (wordmark + citas + títulos de sección); Inter = body/UI.
+- **Sin backend, sin formularios** — contacto solo por enlaces directos (WhatsApp/mailto/LinkedIn).
+- **Un único `<h1>`** en toda la página — vive en el Hero. New pieces use `<h2>`/`<h3>` or no heading; Header/Footer carry no heading.
+- **Todo el copy** vive en `lib/content.ts` (nuevas claves `comoEmpezar` y `footer`).
+- **Voz** en segunda persona, sin jerga corporativa. **Idioma** español.
+- **Todas las animaciones Framer Motion** se desactivan con `prefers-reduced-motion` via `usePrefersReducedMotion()` + `motionProps(reduced)` (same pattern the 7 sections already use).
+- **`output: export`** — el build estático debe seguir produciendo `out/`.
+
+## File structure (additions)
+
+```
+components/
+├── layout/
+│   ├── Header.tsx            # NEW — sticky bar (server component, pure CSS sticky)
+│   ├── Footer.tsx            # NEW — slim footer strip
+│   └── __tests__/
+│       ├── Header.test.tsx   # NEW
+│       └── Footer.test.tsx   # NEW
+└── sections/
+    ├── ComoEmpezar.tsx       # NEW — section 07 (client component, motion pattern)
+    └── __tests__/
+        └── ComoEmpezar.test.tsx  # NEW
+lib/content.ts                # ADD `comoEmpezar` and `footer` keys
+app/page.tsx                  # compose Header + ComoEmpezar + Footer
+```
+
+## Component 1 — Header (minimal sticky)
+
+**Interface:** `Header()` at `components/layout/Header.tsx`. No props. Server component (no state, no JS — `position: sticky` is pure CSS).
+
+**Layout & style:**
+- `<header>` with `sticky top-0 z-50`, light background (`bg-base/80` or `bg-pure/80`) + `backdrop-blur` + a subtle bottom border (`border-b border-ink/10`). The light bar stays legible while scrolling over both light and dark sections.
+- A `Container`-width inner row, `flex items-center justify-between`, vertical padding ~`py-3`/`py-4`.
+- **Left:** `<Wordmark size="base" />` wrapped in an `<a href="#top">` (or the page top) — the wordmark ink color is the default (dark on the light bar).
+- **Right:** the `CTA` primitive, `variant="light"`, label from `cierre.cta` (`"Define tu siguiente movimiento"` + `→`), `href="#contacto"`. On small screens the CTA stays but may use a slightly smaller padding/label; the wordmark + CTA layout is identical on mobile (no menu, no hamburger).
+- Semantic `<header>`; wrap the CTA link region in `<nav aria-label="Principal">`. No animation (nothing to gate on reduced motion).
+
+**A11y:** the sticky header must not obscure anchor targets — ensure `#contacto` still scrolls into view (the closing section has ample padding; acceptable without extra scroll-margin, but `scroll-mt` on anchor targets may be added if visual testing shows clipping).
+
+## Component 2 — "Cómo empezar" section (07)
+
+**Interface:** `ComoEmpezar()` at `components/sections/ComoEmpezar.tsx`. Client component using the established `motion` + `usePrefersReducedMotion()` + `motionProps(reduced)` + `Container` pattern (mirror `Mecanismo.tsx`/`Disciplinas.tsx`).
+
+**Placement:** inserted between `<Estratega />` (06) and `<Cierre />`. Cierre becomes section 08. This positions the on-ramp right before the contact close.
+
+**Purpose & differentiation:** this is the *client's on-ramp* ("cómo empezar contigo"), distinct from `Mecanismo` which is *her method* ("cómo trabajo"). Framing is the engagement path that ends in the WhatsApp CTA.
+
+**Layout & style:** light section (`bg-base`), `py-24 md:py-32`. Eyebrow + `<h2>` title (Georgia italic), then 3 numbered steps in a `md:grid-cols-3` grid using the Mecanismo visual language (large Georgia-italic numbers `01/02/03` in `gold`, step name `<h3>`, short description in `muted`). A final CTA below the steps.
+
+**Steps (starting copy in `content.ts`, editable by the dueña):**
+1. **Escríbeme** — cuéntame dónde está tu negocio hoy.
+2. **Sesión de diagnóstico** — una conversación para ubicar tu punto de inflexión.
+3. **Estrategia ejecutable** — sales con claridad y tu siguiente movimiento definido.
+
+**CTA (direct WhatsApp with prefilled message):** an `<a>` (or the `CTA` primitive) whose `href` is the WhatsApp click-to-chat URL with a prefilled text, e.g. `https://wa.me/<number>?text=Hola%2C%20quiero%20agendar%20una%20sesi%C3%B3n%20de%20diagn%C3%B3stico`. The base number reuses `cierre.contact.whatsapp` (currently the `520000000000` placeholder — a TODO pending the dueña's real number). The full prefilled href and the un-encoded message live in `content.ts` under `comoEmpezar` so copy/number changes touch only content.
+
+**Light-section token discipline:** accents in `gold` (never `gold-bright`), `bg-base`, `text-ink`/`text-muted` — matching the other light sections.
+
+## Component 3 — Footer (slim strip)
+
+**Interface:** `Footer()` at `components/layout/Footer.tsx`. No props. Static (no motion).
+
+**Rationale:** `Cierre` already renders the closing quote, primary CTA, and the three contact links. The footer therefore does **not** repeat the contact list — that would be redundant and produce a heavy "double dark block" right after the dark Cierre. Instead it is a thin closing strip.
+
+**Layout & style:** `<footer>` with `bg-dark`, a subtle top divider (`border-t border-cream/10`), modest vertical padding (`py-8`/`py-10`), `Container`-width. Contents, centered or space-between:
+- `<Wordmark size="base" onDark />` (small, gold-bright middle-e / period per the primitive).
+- A short tagline: `"tu estratega de crecimiento"` (`text-muted-dark`/`cream`, small).
+- Legal line: `© 2026 creeer` (year from a constant in `content.ts`, or computed — see decision below).
+
+**Decision — year:** use a static `© 2026 creeer` string stored in `content.ts` `footer.legal` (static export → no need for a live `new Date()`; keeps the build deterministic and the copy in one place). The dueña/maintainer updates the year with the rest of the copy.
+
+**Out of scope:** no privacy-policy page / aviso de privacidad, no social-icon set beyond what Cierre already links. These can be added later as their own change.
+
+## Content additions (`lib/content.ts`)
+
+```ts
+export const comoEmpezar = {
+  eyebrow: 'cómo empezar',
+  title: 'Tu siguiente movimiento empieza con una conversación.',  // Georgia-italic h2
+  steps: [
+    { n: '01', name: 'Escríbeme', desc: 'cuéntame dónde está tu negocio hoy.' },
+    { n: '02', name: 'Sesión de diagnóstico', desc: 'una conversación para ubicar tu punto de inflexión.' },
+    { n: '03', name: 'Estrategia ejecutable', desc: 'sales con claridad y tu siguiente movimiento definido.' },
+  ],
+  cta: 'Agenda tu sesión de diagnóstico',
+  // WhatsApp prefilled: base number reused from `cierre.contact.whatsapp`
+  whatsappText: 'Hola, quiero agendar una sesión de diagnóstico',
+};
+
+export const footer = {
+  tagline: 'tu estratega de crecimiento',
+  legal: '© 2026 creeer',
+};
+```
+
+The `ComoEmpezar` component builds the WhatsApp href from the `cierre.contact.whatsapp` number + `encodeURIComponent(comoEmpezar.whatsappText)` so number and message stay single-sourced. All copy above (title, steps, CTA, tagline) is a sensible default that the dueña can edit in `content.ts`.
+
+## Page composition (`app/page.tsx`)
+
+```
+<Header />
+<main>
+  <Hero variant="editorial" />
+  <FraseAncla />
+  <ParaQuien />
+  <Mecanismo />
+  <Disciplinas />
+  <Estratega />
+  <ComoEmpezar />   {/* NEW — 07 */}
+  <Cierre />        {/* now 08 */}
+</main>
+<Footer />
+```
+
+The JSON-LD `<script>` already present in the page is preserved. Single-`<h1>` invariant holds (only Hero).
+
+## Testing (thin, matching the existing per-section pattern)
+
+- **Header:** renders the wordmark text and a CTA link with `href="#contacto"`.
+- **ComoEmpezar:** renders the three step names and a WhatsApp link whose `href` starts with `https://wa.me/` and includes the encoded prefilled `text`.
+- **Footer:** renders the wordmark and the legal/year line; does not introduce a second `<h1>`.
+
+`matchMedia` is already stubbed in `vitest.setup.ts`, so `ComoEmpezar`'s `usePrefersReducedMotion()` works in tests.
+
+## Constraints satisfied
+
+- No backend, no forms; contact via direct links (Header CTA → `#contacto`; ComoEmpezar → `wa.me`).
+- Existing palette/typography/tokens reused; light section uses `gold`, dark footer uses `gold-bright`/`cream`.
+- Single `<h1>` preserved (Hero only).
+- Reduced-motion honored uniformly (ComoEmpezar follows the motion pattern; Header/Footer are static).
+- Static export unaffected (all client interactivity is CSS/anchor links).
+
+## Out of scope (future changes, each its own branch)
+
+- Testimonials / social proof, results/case studies, FAQ.
+- Privacy-policy page, cookie/analytics integration.
+- Real OG image, branded favicon, real portrait photo, real contact details (dueña-pending).