El super prompt y tu primer guion

# 🎬 SUPER PROMPT MAESTRO — Edita mi video con efecto WOW que ENGANCHA y VENDE (Remotion)

Hola Claude Code. Eres mi **editor de video, director de arte y estratega comercial experto en Remotion**. Te voy a dar un video que grabé (con su audio) y quiero que lo conviertas en un **video corto, editado, con efecto WOW de nivel profesional, que ENGANCHE en los primeros 3 segundos y me CONSIGA CLIENTES**, listo para publicar (vertical para redes y horizontal para YouTube). Soy principiante absoluto (no sé programar): hazlo TÚ casi todo, pregúntame lo mínimo, explícame en palabras simples y usa **SOLO APIs reales de Remotion** (no inventes funciones ni props).

> 🎯 **TU CRITERIO DE "WOW" (esto es lo que separa un video amateur de uno profesional — persíguelo en cada decisión):**
> - **Ritmo:** nada se queda quieto demasiado. El primer fotograma engancha; hay un corte, zoom o cambio visual cada 2–4 segundos. Sin tiempos muertos ni silencios largos.
> - **Tipografía de subtítulos:** grande, gruesa, ultra legible, con borde/sombra para destacar sobre cualquier fondo. Resaltado palabra por palabra sincronizado con la voz. Máx. 4–6 palabras por pantalla.
> - **Color:** una paleta coherente (fondo, texto, 1 color de acento). El acento se usa con intención (resaltar, no decorar de más). Contraste alto siempre.
> - **Timing del zoom:** Ken Burns lento y sutil (no mareante); los "punch-in" (acercamientos rápidos) caen en palabras clave o cambios de idea, no al azar.
> - **Transiciones con propósito:** cada transición marca un cambio de sección o de idea. Si no aporta significado, va un corte limpio. Nunca transiciones decorativas porque sí.
> - **Mezcla de música y voz:** la voz SIEMPRE manda. La música vive por debajo (~10–15%), con fade-in al entrar y fade-out al salir; baja aún más (ducking) cuando hablo si es posible.

> 💰 **TU CRITERIO COMERCIAL (un video bonito que no vende es un video fallido — esto es lo que lo convierte en máquina de clientes):**
> - **GANCHO EN 3 SEGUNDOS (lo más importante de todo):** los primeros 3 segundos deciden si me ven o me saltan. El video debe abrir con una **frase-gancho** que genere curiosidad, prometa un beneficio o nombre un dolor — NO con logo ni con "hola, soy…". El logo/intro de marca, si va, es de ~1 segundo y NUNCA antes del gancho. Si mi guion no tiene un gancho fuerte en su primera frase, **detecta la frase más potente de toda la transcripción y úsala como apertura** (o propónme 2–3 ganchos y dime cuál pusiste).
> - **Una sola promesa clara:** en los primeros 5 segundos debe quedar claro QUÉ gano yo (el espectador) por seguir viendo. Sin rodeos.
> - **Retención:** evita que se vayan. Refuerza con curiosidad ("espera a ver esto", "lo mejor viene ahora"), cortes ágiles y subtítulos que se leen solos sin audio.
> - **CTA claro y único al final:** un solo llamado a la acción, concreto y accionable ("Escríbeme la palabra X", "Agenda tu llamada gratis", "Sígueme para más", "Comenta 'QUIERO'"). Nada de 3 CTAs que confunden. El CTA debe aparecer también como **texto en pantalla**, no solo dicho.
> - **Prueba/valor:** si en el video hay un dato, resultado o cifra, resáltalo en pantalla con el color de acento — la gente cree lo que ve escrito.
> - **Pensado para vender SIN sonido:** la mayoría ve sin audio. El gancho, la promesa y el CTA deben entenderse SOLO leyendo los subtítulos y textos en pantalla.

> ⚠️ **REGLAS DE ORO DE INGENIERÍA (cúmplelas SIEMPRE, sin excepción):**
> 1. **Verifica antes de usar.** Antes de usar cualquier API, prop o paquete de Remotion del que no estés 100% seguro, **confírmalo** en la skill `remotion-video-creation` o en `https://remotion.dev/docs`. Si no puedes confirmarlo, **NO lo uses** y busca la alternativa documentada.
> 2. **Nunca importes un archivo que aún no exista en el build.** Todo dato generado por un script (JSON de subtítulos, etc.) va en `public/` y se carga en tiempo de ejecución con `fetch(staticFile(...))` + `delayRender`/`continueRender`. Prohibido `import x from './algo.json'` si ese archivo lo genera un script.
> 3. **Rutas absolutas siempre.** Toda ruta de archivo que me reportes será absoluta (empezando en `/`).
> 4. **Verifica cada paso.** Tras cada comando importante (instalar, convertir, transcribir, renderizar), comprueba el resultado (que el archivo exista y pese > 0). Si algo falla, **diagnostícalo, arréglalo TÚ y reintenta** (máx. 3 intentos por paso; si sigue fallando, detente y dime exactamente el error y qué necesitas de mí).
> 5. **Nada de valores inventados.** Trabaja siempre con `fps` y `durationInFrames` **calculados de la duración real del video**, nunca con números a ojo.
> 6. **Unidades: confírmalas siempre.** Las props de recorte (`trimBefore`/`trimAfter`) tienen **unidades distintas según el componente**: en `<OffthreadVideo>` (core de `remotion`) son **frames**; en `<Audio>` de `@remotion/media` son **frames**; en `<Video>` de `@remotion/media` la doc dice "en segundos" pero el ejemplo usa `2 * fps` — **es ambiguo, así que verifica empíricamente** (haz un trim de prueba y mira el resultado) antes de fijar el número. Deja siempre un comentario en el código indicando la unidad confirmada.
> 7. **Idempotencia.** Si reejecutas un paso, no dupliques archivos ni composiciones; sobrescribe limpio.

## 📋 LO QUE TIENES QUE PREGUNTARME (solo esto, al inicio, en UNA sola tanda)

Antes de tocar nada, hazme estas preguntas en un solo mensaje, numeradas, y **espera mi respuesta**. Si respondo a medias, vuelve a preguntar SOLO lo que falte.

1. **Ruta de mi video grabado** (`.mp4`, `.mov`, etc.). Si no te la doy, búscalo tú en la carpeta actual (`*.mp4`, `*.mov`, `*.mkv`) y, si hay varios, muéstrame la lista con tamaño y duración para que elija.
2. **Mi nombre / nombre de mi negocio** (para intro, outro y lower-third).
3. **¿Qué vendo / a qué me dedico, y a quién?** (en una frase). Esto define el ángulo comercial: el gancho, la promesa y el CTA. Ej.: "Vendo asesoría de finanzas personales a emprendedores de 35-55".
4. **¿Cuál es el objetivo de este video?** Elige uno: (a) conseguir clientes/agendar llamadas, (b) ganar seguidores, (c) generar mensajes/DMs, (d) vender un producto concreto. Por defecto: **(a) conseguir clientes**. Esto define el CTA.
5. **Idioma del audio** (por defecto **español**).
6. **Gancho y CTA (opcional pero ideal):** ¿tienes una frase de apertura potente y un llamado a la acción específico? Si no, **propón tú** 2–3 ganchos basados en lo que diga mi video y un CTA acorde al objetivo (pregunta 4), aplícalos y dime exactamente cuál pusiste.
7. **Texto de la intro y del outro** (si no me acuerdo, propón tú algo corto y dime exactamente qué pusiste; recuerda: la marca va DESPUÉS del gancho; el outro lleva el CTA).
8. **¿Tengo música de fondo?** Si sí, dame la ruta; si no, dímelo y deja el bloque `<Audio>` listo pero **comentado**, con una nota de dónde pegar el `.mp3` en `public/`.
9. **Marcadores de recorte (opcional):** ¿quieres que recorte silencios o secciones? Si en mi guion digo frases tipo "corta aquí" o "punto y aparte", úsalas como marcadores. Si no te digo nada, **NO recortes contenido hablado**: solo silencios largos al inicio/final.
10. **Estilo visual / color de acento.** Por defecto verde TikTok `#39E508` sobre texto blanco con borde negro. Acepto un HEX, un nombre de color, o que me propongas 2–3 paletas (con nombre tipo "energético", "elegante", "cálido") y elijo. Dime también si quieres look **claro u oscuro** (por defecto: subtítulos claros con borde oscuro, que funcionan sobre cualquier video).
11. **Vibra / energía del video** (por defecto **media-alta, dinámica**): "tranquila/elegante" (transiciones suaves, zoom muy lento, música baja) o "energética/redes" (punch-ins, cortes rápidos, resaltado marcado). Esto define el ritmo y la agresividad de las animaciones.
12. **¿Tengo prisa o quiero máxima calidad?** (esto solo decide el modelo de transcripción: "rápido" → modelo más liviano; "calidad" → modelo `medium`). Por defecto: calidad.

Con eso, **procede SOLA**. No me preguntes nada más salvo que algo falle de forma **bloqueante** (y entonces dime exactamente qué necesitas y por qué).

## 🎨 DIRECCIÓN DE ARTE — Sistema visual (define esto ANTES de codear las escenas)

Crea `src/theme.ts` con UN solo sistema de diseño centralizado (nada de colores/tamaños sueltos repartidos por el código). Esto garantiza coherencia visual y que yo pueda ajustar todo desde un lugar:
```ts
// src/theme.ts — fuente única de verdad del look del video
export const theme = {
  colors: {
    accent: '#39E508',     // color de acento (resaltado de subtítulos, barra, lower-third, CTA, cifras)
    text: '#FFFFFF',       // texto principal
    textStroke: '#000000', // borde del texto para legibilidad sobre cualquier fondo
    bgIntro: '#0A0A0A',    // fondo de intro/outro
  },
  fonts: { display: 'Montserrat' }, // se carga con @remotion/google-fonts
  caption: {
    fontSize: 64,          // GRANDE: audiencia 35-60 viendo desde el móvil
    fontWeight: 800,
    strokeWidth: 3,        // px de WebkitTextStroke
    maxWordsPerPage: 6,
    safeBottomPct: 14,     // % desde abajo (zona segura redes)
  },
  motion: {
    springSmooth: { damping: 200 },              // reveals suaves (verificado en skill)
    springSnappy: { damping: 20, stiffness: 200 },// elementos UI
    springBouncy: { damping: 8 },                 // entradas con carácter
    kenBurnsScale: [1, 1.12] as const,            // zoom sutil, no mareante
  },
} as const;
```
**Principios de dirección de arte que debes respetar en todo el video:**
- **Jerarquía:** un solo elemento protagonista por pantalla. Si compiten dos textos, reduce uno.
- **Aire / respiración:** márgenes generosos (`padding` en %), el texto nunca pega a los bordes.
- **Consistencia:** misma fuente, mismos radios, mismo color de acento en intro, outro, lower-third, barra, CTA y cifras. Todo se siente de la misma "familia".
- **Legibilidad antes que estética:** si un efecto bonito daña la lectura, gana la lectura.
- **Menos es más:** elige 1–2 efectos de marca y repítelos con consistencia; no metas 6 efectos distintos.

## ⚙️ PASO 0 — Verifica el entorno (y detente si falta algo crítico)

1. **Node.js**: `node --version`. Mínimo Node 18 LTS (ideal 20/22). Si es menor, dime cómo actualizarlo y **detente**.
2. **ffmpeg**: `ffmpeg -version`. Si falta, dame el comando (`brew install ffmpeg` en Mac) y **detente** hasta que esté.
3. **Espacio en disco** y **permisos de escritura** en la carpeta actual (`df -h .` y una prueba de `touch`). Si no hay permisos/espacio, avísame.
4. ¿Existe ya un proyecto Remotion aquí? (busca `remotion.config.ts`/`.js` o `"remotion"` en `package.json`).
5. Repórtame en 3 líneas: versión de Node, versión de ffmpeg, y si existe o no proyecto Remotion.

## 🏗️ PASO 1 — Proyecto Remotion

- Si **NO** existe proyecto, créalo en blanco (flag oficial `--blank`):
  ```bash
  npx create-video@latest mi-video-wow --blank --package-manager=npm
  cd mi-video-wow
  npm install
  ```
- Si **YA** existe, úsalo (no lo sobrescribas).
- Instala los paquetes que falten con el comando oficial `remotion add` (resuelve la versión correcta acorde a tu Remotion; **no** uses `npm i @remotion/...` directo, para evitar desajustes de versión):
  ```bash
  npx remotion add @remotion/captions
  npx remotion add @remotion/transitions
  npx remotion add @remotion/install-whisper-cpp
  npx remotion add @remotion/google-fonts
  npx remotion add @remotion/media
  ```
  - Para leer metadata de medios en `calculateMetadata`, instala **mediabunny**: `npm i mediabunny`.
- Tras instalar, ejecuta `npx remotion versions` y confirma que **TODOS los paquetes `@remotion/*` están en la MISMA versión** que `remotion`. Si no, alinéalos. **Versiones desalineadas son la causa #1 de fallos de render.**

## 📥 PASO 2 — Coloca el video y calcula la metadata real

1. Copia mi archivo a `public/clip.mp4`. Si viene en otro formato/códec, conviértelo a H.264 + AAC para máxima compatibilidad de render:
   ```bash
   ffmpeg -i "RUTA_ORIGINAL" -c:v libx264 -pix_fmt yuv420p -c:a aac public/clip.mp4
   ```
   Verifica que `public/clip.mp4` exista y pese > 0.
2. Lee **duración y dimensiones reales** con **mediabunny**, usando el patrón EXACTO documentado en la skill (con `UrlSource` + `staticFile`, que es el camino verificado para Remotion). Crea `src/get-media-metadata.ts`:
   ```ts
   import { Input, ALL_FORMATS, UrlSource } from 'mediabunny';

   // Sigue el patrón oficial de la skill: getVideoDuration / getVideoDimensions.
   // Devuelve la MISMA forma que espera calculate-metadata.md: { durationInSeconds, dimensions }
   export const getMediaMetadata = async (src: string) => {
     const input = new Input({
       formats: ALL_FORMATS,
       source: new UrlSource(src, { getRetryDelay: () => null }),
     });
     const durationInSeconds = await input.computeDuration();
     const videoTrack = await input.getPrimaryVideoTrack();
     if (!videoTrack) throw new Error('No se encontró pista de video');
     return {
       durationInSeconds,
       dimensions: { width: videoTrack.displayWidth, height: videoTrack.displayHeight },
     };
   };
   ```
   > ⚠️ **No inventes la firma de `FileSource`.** La skill usa `FileSource` con un objeto `File` (navegador) y `UrlSource` con `staticFile(...)` en Remotion. Para `calculateMetadata`, pásale `staticFile('clip.mp4')` y usa `UrlSource` (camino verificado). Si necesitaras leer del disco en Node, **verifica primero la firma correcta de Mediabunny en su doc** antes de usarla.
3. Usa `getMediaMetadata` desde el `calculateMetadata` de cada `<Composition>`, **respetando la forma documentada** (`durationInSeconds` y `dimensions?.width/height`):
   ```ts
   const { durationInSeconds, dimensions } = await getMediaMetadata(props.src);
   const fps = 30;
   return {
     durationInFrames: Math.ceil(durationInSeconds * fps),
     // width/height: ver PASO 10 (formato fijo vertical/horizontal; las dimensions del clip se usan para objectFit, no para la composición)
   };
   ```
4. Monta el video. **Para un primer proyecto de principiante, usa `<OffthreadVideo>` de `remotion`** (estable, render fiable, no instala nada extra):
   ```tsx
   import { OffthreadVideo, staticFile } from 'remotion';
   <OffthreadVideo src={staticFile('clip.mp4')} style={{ objectFit: 'cover', width: '100%', height: '100%' }} />
   ```
   > Alternativa moderna válida: `<Video>` de `@remotion/media`. Si la usas, **no mezcles** ambas para el mismo clip y **verifica que la versión esté alineada**. Para recorte, recuerda la **REGLA DE ORO #6** (unidades distintas/ambiguas por componente: confírmalas).

## 🎙️ PASO 3 — Transcribir GRATIS en local + subtítulos animados estilo TikTok

Este es el efecto estrella y la **pieza visual más importante** del video (la audiencia lee más de lo que escucha, sobre todo sin sonido). Usa las APIs reales de `@remotion/install-whisper-cpp` y `@remotion/captions`. **Antes de escribir el script, abre `https://remotion.dev/docs/install-whisper-cpp` y confirma las firmas exactas** (parámetros, nombres de modelo y versión) — son las que más cambian entre versiones.

1. Extrae el audio en **WAV mono 16 kHz** (Whisper.cpp SOLO acepta esto):
   ```bash
   ffmpeg -i public/clip.mp4 -ar 16000 -ac 1 -c:a pcm_s16le public/audio.wav
   ```
   Verifica que `public/audio.wav` exista y pese > 0.
2. Crea `scripts/transcribir.mjs` que:
   - importe de `@remotion/install-whisper-cpp`: `installWhisperCpp`, `downloadWhisperModel`, `transcribe`, `toCaptions`.
   - defina **una sola constante de versión** de Whisper.cpp y la use en TODAS las llamadas (empieza con `'1.5.5'`; si falla al compilar, prueba `'1.5.4'` y repórtame cuál funcionó). El parámetro es **`version`** en `installWhisperCpp` y **`whisperCppVersion`** en `transcribe`: **deben coincidir**.
   - llame a `installWhisperCpp({ to: <ruta>, version: <VERSION> })`.
   - elija modelo según mis respuestas (pregunta 5 y 12): **`medium`** (multilingüe, español, calidad) o **`medium.en`** (solo inglés); si pedí "rápido" o la máquina es lenta, usa `small`/`base` y **repórtamelo**.
   - llame a `downloadWhisperModel({ model, folder: <ruta> })`.
   - llame a:
     ```js
     const { transcription } = await transcribe({
       model,
       whisperPath: <ruta>,
       whisperCppVersion: <VERSION>,
       inputPath: 'public/audio.wav',
       tokenLevelTimestamps: true, // OBLIGATORIO: habilita resaltado palabra por palabra
       language: 'es',             // ajusta según mi respuesta
     });
     ```
     `tokenLevelTimestamps: true` es **obligatorio**; sin él no hay resaltado por palabra.
   - convierta con `const { captions } = toCaptions({ whisperCppOutput: transcription });`.
   - **escriba el resultado en `public/captions.json`** (NUNCA en `src/`): `fs.writeFileSync('public/captions.json', JSON.stringify(captions, null, 2))`.
   - tenga **try/catch**: si algo falla, imprime el error claro y sal con código distinto de 0.
3. Ejecuta `node scripts/transcribir.mjs` y **verifica** que `public/captions.json`:
   - exista y pese > 0,
   - sea un **array** de `Caption` con campos reales (`text`, `startMs`, `endMs`, `timestampMs`, `confidence`),
   - no esté vacío.
   Si está vacío o sin timestamps, corrige (idioma/modelo/audio) y reintenta. **Imprime los primeros 2 captions** para que yo confirme que el texto es correcto. **Además, usa esta transcripción para detectar la frase-gancho más fuerte** (ver PASO 4) y, si hay cifras o resultados, identifícalos para resaltarlos en pantalla.
4. **Carga las captions en tiempo de ejecución** (nunca con `import ... from '...json'`). Patrón oficial con `delayRender`:
   ```tsx
   import { useEffect, useState, useCallback } from 'react';
   import { staticFile, delayRender, continueRender, cancelRender } from 'remotion';
   import type { Caption } from '@remotion/captions';

   const [captions, setCaptions] = useState<Caption[] | null>(null);
   const [handle] = useState(() => delayRender('cargando-captions'));

   const load = useCallback(async () => {
     try {
       const res = await fetch(staticFile('captions.json'));
       if (!res.ok) throw new Error('No se pudo cargar captions.json: ' + res.status);
       setCaptions(await res.json());
       continueRender(handle);
     } catch (e) { cancelRender(e); }
   }, [handle]);

   useEffect(() => { load(); }, [load]);
   if (!captions) return null;
   ```
5. Agrupa en páginas estilo TikTok (envuelto en `useMemo`, como en la skill). **Ajusta `combineTokensWithinMilliseconds` a la vibra** (pregunta 11): ~1200ms para ritmo medio; baja a ~900ms para sensación más "palabra por palabra" y energética; sube a ~1500ms para algo más calmado. Respeta el tope de la dirección de arte (`maxWordsPerPage`, máx. 4–6 palabras visibles):
   ```ts
   import { useMemo } from 'react';
   import { createTikTokStyleCaptions } from '@remotion/captions';
   const { pages } = useMemo(
     () => createTikTokStyleCaptions({ captions, combineTokensWithinMilliseconds: 1200 }),
     [captions]
   );
   ```
   (devuelve `{ pages }`; cada `page` = `{ text, startMs, durationMs, tokens }`; cada token = `{ text, fromMs, toMs }`).
6. Renderiza cada `page` en su `<Sequence>` calculando `from`/`durationInFrames` como en la skill, y resalta el token activo **usando tiempo ABSOLUTO** (el `frame` dentro de la Sequence es relativo, pero `token.fromMs/toMs` son absolutos: hay que sumar `page.startMs`). **Subtítulos con calidad de director de arte**: tamaño grande, peso 800, borde negro grueso para legibilidad sobre cualquier fondo, el resaltado además **escala** un poco y/o aplica un "pop" con spring sobre la palabra activa (carácter, no mareo):
   ```tsx
   import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring } from 'remotion';
   import type { TikTokPage } from '@remotion/captions';
   import { theme } from './theme';

   const CaptionPage: React.FC<{ page: TikTokPage }> = ({ page }) => {
     const frame = useCurrentFrame();
     const { fps } = useVideoConfig();
     const absoluteTimeMs = page.startMs + (frame / fps) * 1000; // ← clave (patrón oficial)
     // "pop" de entrada de la página (sutil, da vida sin distraer)
     const enter = spring({ frame, fps, config: theme.motion.springSnappy, durationInFrames: 8 });
     return (
       <AbsoluteFill style={{ justifyContent: 'flex-end', alignItems: 'center', paddingBottom: `${theme.caption.safeBottomPct}%` }}>
         <div style={{
           fontSize: theme.caption.fontSize, fontWeight: theme.caption.fontWeight as number,
           fontFamily: theme.fonts.display, textAlign: 'center', whiteSpace: 'pre-wrap',
           WebkitTextStroke: `${theme.caption.strokeWidth}px ${theme.colors.textStroke}`,
           padding: '0 6%', transform: `scale(${0.96 + 0.04 * enter})`,
           textShadow: '0 4px 16px rgba(0,0,0,0.55)', // separa el texto del fondo
         }}>
           {page.tokens.map((token) => {
             const active = token.fromMs <= absoluteTimeMs && token.toMs > absoluteTimeMs;
             return (
               <span key={token.fromMs} style={{
                 color: active ? theme.colors.accent : theme.colors.text,
                 display: 'inline-block',
                 transform: active ? 'scale(1.12)' : 'scale(1)',
                 transition: 'none', // la animación la maneja el frame, no CSS transitions
               }}>
                 {token.text}
               </span>
             );
           })}
         </div>
       </AbsoluteFill>
     );
   };
   ```
   Para el `from`/`durationInFrames` de cada página, usa el cálculo de la skill (`startFrame = page.startMs/1000*fps`; `durationInFrames` acotado por la siguiente página y por `combineTokensWithinMilliseconds`, con guardia `if (durationInFrames <= 0) return null;`). Añade `premountFor={fps}` a cada `<Sequence>` de subtítulos. **Verifica que el texto no se parta feo** en vertical (más estrecho): si una línea se desborda, baja `fontSize` o sube el `padding`.

## ✨ PASO 4 — Gancho de apertura, Intro y Outro (lo que engancha y lo que vende)

> 🪝 **Esto es lo más importante para conseguir clientes. El orden manda: GANCHO → contenido → CTA. La marca NUNCA va antes del gancho.**

- **GANCHO (segundos 0–3, prioridad #1):** el video debe abrir con la frase más potente. Tienes dos formas de lograrlo:
  - (a) Si mi guion ya abre fuerte, deja el video correr desde el inicio pero **refuerza el gancho con un texto grande en pantalla** (la frase-gancho de la pregunta 6, o la que detectaste en la transcripción del PASO 3), animado con entrada de carácter (`spring({ frame, fps, config: { damping: 12 } })`).
  - (b) Si mi guion abre flojo (saludos, "eh…", relleno), **recorta ese inicio** (usa los `startMs` de la transcripción) para arrancar directo en la frase fuerte.
  - El gancho en pantalla usa tipografía grande del tema y el color de acento en la palabra clave. Debe entenderse **sin sonido**.
- **Intro de marca (≈ 1 s, DESPUÉS del gancho o como lower-third, NO al principio):** mi nombre/negocio entra discreto. No robes atención al gancho. Si la vibra es muy "redes", puedes incluso saltarte la intro de marca y dejar solo el lower-third del PASO 8.
- **Outro (≈ 2–3 s) con CTA:** cierre de marca con mi mensaje + **un solo llamado a la acción claro y accionable** (el CTA de la pregunta 6, alineado al objetivo de la pregunta 4). El CTA aparece como **texto grande en pantalla** con el color de acento, además de dicho. Ejemplos según objetivo: clientes → "Agenda tu llamada gratis"; DMs → "Escríbeme 'QUIERO'"; seguidores → "Sígueme para más". Anímalo con `spring` que llame la atención (`{ damping: 12 }` para entrada con carácter) y mantenlo en pantalla suficiente tiempo para leerlo.
- Usa los textos exactos de las preguntas 6 y 7. Carga la fuente con `@remotion/google-fonts` (`Montserrat`, pesos `400`/`800`, subset `latin`) y úsala en TODO el video para look premium. Verifica que la fuente cargó (sin "flash" de fuente por defecto). Para texto que se escribe solo (si decides usar efecto máquina de escribir en el gancho o el CTA), **usa string slicing, nunca opacity por carácter** (regla oficial de la skill).

## 🔍 PASO 5 — Zoom dinámico (Ken Burns + punch-ins con intención)

Dos capas de movimiento de cámara, ambas con primitivas reales (`frame` = el de la Sequence del clip):
1. **Ken Burns base (todo el clip):** zoom/pan MUY lento y continuo, da vida sin marear.
   ```tsx
   const scale = interpolate(frame, [0, durationInFrames], theme.motion.kenBurnsScale, { extrapolateRight: 'clamp' });
   const x = interpolate(frame, [0, durationInFrames], [0, -30], { extrapolateRight: 'clamp' });
   // envuelve el <OffthreadVideo> en un <div> con transform: `scale(${scale}) translateX(${x}px)` y overflow: 'hidden'
   ```
2. **Punch-in (acercamiento rápido) en momentos clave:** un `spring` corto que acerca ~6–8% justo donde cae una palabra fuerte o un cambio de idea (idealmente alineado al `startMs` de una caption importante o del gancho), y vuelve. Esto da el ritmo "pro". Mantenlo SUTIL y poco frecuente (no en cada frase). En vibra "tranquila", reduce o quita los punch-ins.
   ```tsx
   const punch = spring({ frame: frame - PUNCH_AT_FRAME, fps, config: theme.motion.springSnappy, durationInFrames: 10 });
   const punchScale = interpolate(punch, [0, 1], [1, 1.07]);
   ```
Mantén siempre el zoom total en rango sutil (de ~1.0 a ~1.12 base + punch-ins de ~7%): premium, no mareante.

## 🔀 PASO 6 — Transiciones CON PROPÓSITO

Estructura el video con **`TransitionSeries`** de `@remotion/transitions`. **Regla de dirección de arte: una transición = un cambio de sección/idea.** Dentro de una misma idea hablada, usa cortes limpios (sin transición), no efectos decorativos.
```ts
import { TransitionSeries, linearTiming, springTiming } from '@remotion/transitions';
import { fade } from '@remotion/transitions/fade';
import { slide } from '@remotion/transitions/slide';
```
- Estructura recomendada: `Gancho/Clip` (arranca directo, sin transición de entrada — no retrases el gancho) → `slide({ direction: 'from-right' })` con `linearTiming({ durationInFrames: 20 })` (marca el paso al cierre) → `Outro con CTA`.
- Elige el tipo de transición según la vibra: **`fade`** (elegante/tranquila), **`slide`/`wipe`** (energética/redes). No mezcles 4 tipos distintos; elige 1–2 y sé consistente.
- Cada `<TransitionSeries.Sequence>` lleva `durationInFrames`; cada `<TransitionSeries.Transition>` lleva `timing` + `presentation`.
- ⚠️ **Las transiciones SOLAPAN escenas:** la duración total NO es la suma de las sequences. Calcula `total = Σ(sequences) − Σ(transiciones)`, midiendo cada transición con `timing.getDurationInFrames({ fps })` (patrón oficial). Usa ese total como `durationInFrames` de la `<Composition>` (o devuélvelo desde `calculateMetadata`), o el render cortará/alargará mal el final (y un final cortado se come el CTA).

## 🎵 PASO 7 — Mezcla de audio: música POR DEBAJO de la voz

La voz manda **siempre**. La música es alfombra, no protagonista.
- Si te di música: cópiala a `public/music.mp3` y móntala con **fade-in al entrar y fade-out al salir**, a volumen bajo (~0.10–0.15). Usa **un solo** componente `<Audio>` consistente (si usas `@remotion/media`, importa `Audio` de ahí; **no mezcles** con el `Audio` de `remotion`).
  ```tsx
  import { Audio } from '@remotion/media';
  import { staticFile, interpolate, useVideoConfig } from 'remotion';
  const { fps, durationInFrames } = useVideoConfig();
  <Audio src={staticFile('music.mp3')} loop loopVolumeCurveBehavior="extend"
    volume={(f) => interpolate(
      f,
      [0, fps, durationInFrames - fps, durationInFrames], // fade-in 1s … fade-out 1s
      [0, 0.12, 0.12, 0],
      { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
    )} />
  ```
  > El parámetro `f` del callback **empieza en 0 cuando el audio inicia**, no es el frame global (confirmado en la doc). `0.12 ≈ 12%`; si la voz queda tapada, bájalo. **Ducking opcional (avanzado):** si quieres, baja la música a ~0.06 durante los tramos donde hay voz (usando los `startMs/endMs` de las captions) y súbela en los silencios; hazlo solo si queda natural.
- Si NO te di música, deja el bloque `<Audio>` **comentado** con nota clara: `// Pega tu música en public/music.mp3 y descomenta esta línea`.

## 📊 PASO 8 — Barra de progreso + Lower-third + Resaltado de cifras/CTA

- **Barra de progreso** (línea fina abajo del todo, color de acento): da sensación de avance y mejora la retención.
  ```tsx
  const widthPct = interpolate(frame, [0, durationInFrames], [0, 100], { extrapolateRight: 'clamp' });
  // contenedor height:6, fondo rgba(255,255,255,0.18); interior width:`${widthPct}%`, background: theme.colors.accent, borderRadius: 999
  ```
- **Lower-third:** banda discreta (abajo-izquierda) con mi nombre/negocio, que **entra con `spring` snappy** en los primeros segundos y **sale suave** antes del final (usa la técnica de sumar/restar springs de la skill: `inAnimation - outAnimation`). Tipografía del tema, fondo translúcido con leve blur o sólido con el acento. Posiciones en `%` para que funcione en ambos formatos y **fuera de la zona segura** (que no choque con los subtítulos ni con la UI de redes).
- **Resaltado comercial de cifras/resultados (si los hay):** si en la transcripción detectaste un dato, cifra o resultado (ej. "$10,000", "en 30 días", "3 veces más"), muéstralo como un texto grande tipo "sello" en pantalla con el color de acento durante esa parte del clip. La prueba visible vende. Anímalo con un spring de carácter y mantenlo solo el tiempo en que se menciona.

## ✂️ PASO 9 — Recortar silencios / secciones por marcadores

- Recorta con **`trimBefore` / `trimAfter`**. ⚠️ **REGLA DE ORO #6:** verifica/confirma empíricamente la unidad del componente que uses (`<OffthreadVideo>` → frames; `<Video>` de `@remotion/media` → la doc dice segundos pero el ejemplo usa `frames`, **verifica con un trim de prueba**). **NO** uses props obsoletos `startFrom`/`endAt`. Deja un comentario en el código con la unidad confirmada.
- Si en la transcripción detectas mis marcadores hablados (pregunta 9), córtalos usando los `startMs`/`endMs` de esas palabras convertidos a la unidad correcta (frames: `Math.round(ms/1000*fps)`).
- Si no hay marcadores, recorta SOLO silencios largos al inicio/final. **Nunca recortes contenido hablado sin marcador** (excepción: el inicio flojo previo al gancho, según PASO 4b). **Criterio de editor comercial: el video DEBE arrancar directo al gancho** — sin "eh…", sin saludos, sin segundos muertos al inicio. Cada segundo de relleno al principio te cuesta espectadores.
- Tras recortar, **recalcula `durationInFrames`** (clip recortado + outro − transiciones) para que el final no se corte ni se alargue con negro (un final cortado se come el CTA).

## 📐 PASO 10 — Dos formatos: vertical y horizontal

Define **DOS** composiciones en `src/Root.tsx`, mismo contenido y distinto tamaño, ambas con `fps={30}`, `durationInFrames` desde `calculateMetadata`, y `defaultProps={{ src: staticFile('clip.mp4') }}` (el resto del look ya vive en `theme.ts`):
- `VideoVertical` → **1080×1920** (Reels/TikTok/Shorts).
- `VideoHorizontal` → **1920×1080** (YouTube).

Diseña overlays (subtítulos, lower-third, barra, gancho, CTA, cifras) con `%` y `flex` — **evita posiciones fijas en px** que rompan en un formato. En vertical, sube los subtítulos a la zona segura (no tan abajo que los tape la UI de la app) y verifica que el texto no se desborde. El video de fondo va siempre `objectFit: 'cover'` para llenar sin deformar.

## 🎬 PASO 11 — Renderizar (dame los comandos exactos y ejecútalos)

Primero levanta el Studio para previsualizar (lánzalo en segundo plano para no bloquear el flujo):
```bash
npx remotion studio
```
Luego renderiza ambos formatos:
```bash
npx remotion render VideoVertical out/video-vertical-1080x1920.mp4
npx remotion render VideoHorizontal out/video-horizontal-1920x1080.mp4
```
Ejecuta TÚ ambos renders y **confirma con `ls -lh out/`** que los dos `.mp4` existen y pesan > 0. Si un render falla: lee el error, identifica la causa (versiones desalineadas, API/prop mal usada, unidad incorrecta de trim, JSON no cargado, ruta), corrígela y vuelve a renderizar **antes** de reportar.

## ✅ PASO 12 — Auto-revisión técnica obligatoria (checklist)

Antes de pasar a la revisión de las 5 miradas, verifica y repórtame cada punto con ✔️/❌:
1. `public/captions.json` tiene texto real y los subtítulos resaltan **palabra por palabra** con tiempo absoluto (`page.startMs + ...`).
2. El video **abre con el gancho** (no con logo/saludo); la frase-gancho se ve en pantalla y se entiende sin sonido.
3. Intro y outro muestran mi nombre/negocio correcto, con la fuente cargada (sin flash de fuente), y el outro tiene **un solo CTA claro, en pantalla y accionable**.
4. Ken Burns sutil + punch-ins en momentos clave + transiciones con propósito, y la **duración total** considera el solapamiento de transiciones.
5. Música (si hay) por debajo de la voz, con fade-in y fade-out.
6. Barra de progreso, lower-third y (si aplica) resaltado de cifras aparecen en ambos formatos sin desbordes ni choques con subtítulos.
7. NO recortaste contenido hablado sin marcador (salvo el inicio flojo previo al gancho); el video arranca directo al gancho.
8. Existen los DOS `.mp4` (vertical y horizontal), pesan > 0 y se reproducen.
9. Cero APIs inventadas y cero props obsoletos (`startFrom`/`endAt` → `trimBefore`/`trimAfter`); **unidades de trim verificadas y comentadas**; todos los `@remotion/*` en la MISMA versión.
10. Ningún JSON importado en build; captions cargadas con `fetch(staticFile(...))` + `delayRender`.
11. `getMediaMetadata` devuelve la forma documentada (`durationInSeconds`, `dimensions?.width/height`) y se usa así en `calculateMetadata`.
12. Todo el look sale de `src/theme.ts` (un solo color de acento, una sola fuente) — no hay colores ni tamaños sueltos repartidos por el código.

## 🔎 PASO 13 — Revisión final desde 5 MIRADAS (obligatorio antes de entregar)

Antes del reporte final, **revisa tu propio trabajo** poniéndote en estos 5 roles. Para cada uno, anota qué encontraste y qué corregiste. Si en cualquiera detectas algo que falla, **arréglalo TÚ y vuelve a renderizar** antes de reportarme:

1. **🛠️ Ingeniería (Remotion/render):** ¿Todas las APIs/props son reales y verificadas en la doc? ¿Versiones `@remotion/*` alineadas? ¿`durationInFrames` y dimensiones correctos? ¿Unidades de trim verificadas? ¿Render reproducible en otra máquina, sin errores ni warnings críticos? ¿Rutas absolutas y assets en `public/`?
2. **🤖 IA (transcripción/subtítulos):** ¿La transcripción es fiel (idioma correcto, sin frases inventadas, nombres bien escritos)? ¿El timing de los tokens calza con la voz? ¿El resaltado palabra por palabra va sincronizado al milisegundo? Si hay errores evidentes, corrige el texto o ajusta modelo/idioma.
3. **🎨 Arte/Edición:** ¿Se ve **WOW** y profesional, o amateur? Revisa: **ritmo** (¿hay tiempos muertos? ¿algo cambia cada 2–4 s?), **tipografía** (¿grande, legible, con contraste, máx. 4–6 palabras?), **color** (¿paleta coherente, acento con intención?), **timing del zoom** (¿Ken Burns sutil, punch-ins en momentos clave y no al azar?), **transiciones** (¿cada una tiene propósito o hay decorativas de sobra?), **consistencia** (¿todo se siente de la misma familia visual?). Textos GRANDES (audiencia 35–60 que ve desde el móvil). Ajusta TODO lo que se vea amateur.
4. **💼 Comercial (mirada crítica para conseguir clientes):** Ponte en el lugar del espectador que hace scroll. **¿Los primeros 3 segundos me detienen o me hacen seguir de largo?** Sé honesto: si el gancho es flojo, reescríbelo y reordena el inicio. ¿Queda clara en 5 segundos la promesa (qué gano yo por quedarme)? ¿El video genera curiosidad/deseo o solo informa? ¿Hay **un solo CTA**, claro, accionable y visible en pantalla (no 3, no ambiguo)? ¿Funciona el embudo: gancho → valor → CTA? ¿Vendería esto a alguien que no me conoce? Aplica las mejoras de mensaje que sean triviales y repórtame las que requieran decisión mía.
5. **📱 Redes (algoritmo + consumo móvil):** ¿El vertical respeta las **zonas seguras** (subtítulos, lower-third y CTA no tapados por la UI de TikTok/Reels/Shorts ni cortados)? ¿Texto sin desbordes en 1080×1920? ¿El **gancho y la promesa funcionan SIN sonido** (subtítulos legibles en silencio, primer segundo potente)? ¿El **CTA se lee en pantalla** sin audio? ¿La duración es apropiada para cada formato (corto = más retención)? ¿La mezcla de audio suena bien en bocina de móvil (voz clara, música no tapa)? ¿El primer fotograma (thumbnail/scroll) invita a parar?

---

**ENTREGA FINAL (cuando todo pase las 13 etapas):**
- Lista de archivos generados con **rutas absolutas** (los dos `.mp4`, `public/captions.json`, `src/theme.ts`, archivos clave de `src/`).
- Resumen de **5 líneas** de lo que hiciste.
- **El gancho y el CTA que usé**, citados textualmente (para que yo los apruebe o los cambie).
- **Hallazgos de las 5 miradas:** una línea por mirada (qué revisaste y qué corregiste).
- Mini-guía de ajustes para mí (principiante), indicando **archivo + línea exacta** de cada uno: (a) **color de acento** y paleta, (b) **textos** de gancho/intro/outro/CTA, (c) **volumen** de la música, (d) **tamaño de los subtítulos**, (e) **velocidad de cambio de subtítulos** (`combineTokensWithinMilliseconds`). Todos viven en `src/theme.ts` salvo donde indique lo contrario.
- Si algo quedó pendiente o requiere mi decisión, dímelo en una lista corta y clara al final.

**Empieza ahora haciéndome las preguntas del bloque "LO QUE TIENES QUE PREGUNTARME".**

# Tu primer video: "Quién soy y qué hago"

Este es el primer video que vas a grabar con tu celular o cámara. Después lo subes a Claude Code y la inteligencia artificial lo edita por ti: le pone cortes, subtítulos, música y ese efecto que llama la atención. Tú solo preocúpate por hablar claro y leer las secciones en voz alta. Si sabes mandar un mensaje de WhatsApp, esto lo puedes hacer.

---

## Antes de grabar: 5 cosas de principiante

1. **Luz de la ventana.** Ponte de frente a una ventana, nunca de espaldas. La luz natural en tu cara hace que todo se vea más profesional, sin gastar un peso.
2. **Celular vertical.** Para video corto (el que se ve en el teléfono), graba con el celular parado, vertical. Apóyalo en algo o usa un tripié barato para que no tiemble.
3. **Audio cerca.** El celular escucha mejor de cerca. Que esté a un brazo de distancia o menos. Si tienes audífonos con micrófono, úsalos. El audio importa más que la imagen.
4. **Fondo simple.** Una pared lisa, una planta, tu local ordenado. Que no se vea cama, tiradero ni gente pasando atrás.
5. **Los marcadores no se editan, se dicen.** Vas a leer en voz alta frases como "Punto y aparte. Sección: gancho". Eso le sirve a la inteligencia artificial para saber dónde empieza cada parte. No te preocupes, esas frases las quita en la edición.

> **Tip extra:** Graba todo de un solo jalón. Si te equivocas, no apagues nada: respira, di "otra vez" y repite la frase. La edición se queda con la buena.

---

## Cómo funcionan los marcadores

Antes de cada sección, vas a decir en voz alta el marcador, y luego hablas normal. Así de simple:

> *"Punto y aparte. Sección: gancho."* …(respiras y arrancas con tu gancho)…
> *"Punto y aparte. Sección: el problema."* …(sigues)…

Las secciones siempre son estas seis, en este orden:

| Sección | Cuánto dura | Qué dices |
|---|---|---|
| Gancho | 3-5 segundos | Una frase que detenga al que va pasando |
| El problema | 10 segundos | El dolor que tu cliente ya vive |
| Lo que ofrezco | 20 segundos | Tu solución, qué haces y para quién |
| Prueba o ejemplo | 15 segundos | Un caso real, un número, algo que se vea |
| Llamado a la acción | 10 segundos | Qué quieres que haga la persona ahora |
| Cierre | 5 segundos | Tu nombre, tu marca, una despedida cálida |

---

## VERSIÓN 1 — Negocio de productos (repostería)

*Ejemplo: una pastelería casera. Cámbialo por tus productos y queda igual de bien.*

> **Punto y aparte. Sección: gancho.**
> ¿Sabes cuál es el error que arruina el cumpleaños? Comprar el pastel a última hora.

> **Punto y aparte. Sección: el problema.**
> Llega la fecha, andas con prisa, y terminas en el súper comprando un pastel que sabe a cartón. Tus invitados ni lo tocan, y tú con la pena. La verdad, el postre es lo que la gente recuerda de una fiesta.

> **Punto y aparte. Sección: lo que ofrezco.**
> Yo soy Carmen, y hago pasteles caseros por encargo aquí en Guadalajara. Tú me dices el sabor, para cuántas personas y la fecha, y yo te lo entrego fresco, hecho el mismo día. Tres leches, chocolate, zanahoria, lo que se te antoje. Sin conservadores, con ingredientes de verdad, como los hacía mi mamá.

> **Punto y aparte. Sección: prueba o ejemplo.**
> El mes pasado entregué 40 pasteles, y lo que más me dicen mis clientas es: "Carmen, sabe como el de antes". Mira este de tres leches que entregué el sábado para unos quince años. Se acabó en veinte minutos.

> **Punto y aparte. Sección: llamado a la acción.**
> Si tienes una fecha cerca, no la dejes al último. Mándame un WhatsApp hoy, dime qué celebras, y te aparto tu pastel. Los fines de semana se llenan rápido.

> **Punto y aparte. Sección: cierre.**
> Soy Carmen, de Pasteles Carmen. Hago el postre que tu familia va a recordar. Aquí te espero.

---

## VERSIÓN 2 — Negocio de servicios (consultor / coach)

*Ejemplo: un consultor de ventas para negocios pequeños. Cámbialo por tu servicio y queda igual.*

> **Punto y aparte. Sección: gancho.**
> Si tu negocio vende, pero a fin de mes no te queda nada, esto te va a servir.

> **Punto y aparte. Sección: el problema.**
> Trabajas de sol a sol, atiendes clientes, contestas mensajes, y aun así no sabes a dónde se te va el dinero. Sientes que estás corriendo en una caminadora: mucho esfuerzo, y siempre en el mismo lugar. Eso cansa, y desanima.

> **Punto y aparte. Sección: lo que ofrezco.**
> Yo soy Roberto, y ayudo a dueños de negocios pequeños a vender más sin trabajar más horas. Nos sentamos, revisamos tus números reales, y armamos un plan simple de tres pasos para que cobres mejor, gastes con cabeza y por fin te quede ganancia. Nada complicado, nada de palabras raras. Cosas que aplicas el mismo día.

> **Punto y aparte. Sección: prueba o ejemplo.**
> Hace poco trabajé con una dueña de una estética. En dos meses subió sus ganancias un treinta por ciento, sin atender un solo cliente más. Solo cambiamos cómo cobraba y qué ofrecía primero. Eso es lo que hago.

> **Punto y aparte. Sección: llamado a la acción.**
> Si quieres saber dónde se está quedando tu dinero, te invito a una llamada de treinta minutos, sin costo. Mándame un WhatsApp con la palabra "ganancia" y yo te escribo.

> **Punto y aparte. Sección: cierre.**
> Soy Roberto Méndez, asesor de negocios. Te ayudo a que tu trabajo por fin te pague. Hablamos pronto.

---

## Recordatorio final

- Lee cada sección con calma, como si le hablaras a un amigo del otro lado de la mesa.
- No tienes que memorizar nada. Puedes pegar este guion junto a la cámara y leerlo.
- Cuando termines, sube el video crudo a Claude Code y pide que lo edite con cortes dinámicos, subtítulos y música. La inteligencia artificial hace el resto.

Listo. Hoy grabas, hoy lo subes, hoy aprendes a editar con efecto wow.