# Nivel 1 · De un PDF a HTML

**Agarra la última propuesta que mandaste en PDF, súbela a tu IA con este prompt y en diez minutos tienes tu primer documento de Cartaventa. No reescribes nada: el contenido es el mismo, el formato es el que cambia.**

Es el mejor primer ejercicio porque el contenido ya está aprobado y solo estás viendo qué hace el formato. Funciona igual con un `.docx`, con un PowerPoint o con una presentación exportada.

## Antes de pegar el prompt

- Sube el PDF a tu IA como archivo adjunto. Si no puede leer archivos, copia el texto y pégalo.
- Ten a la mano el nombre correcto del cliente y la fecha.
- Si el PDF trae logotipos o gráficas que importan, dilo: la IA no ve bien las imágenes dentro de un PDF y prefiere inventar antes que preguntar.

## El prompt

```
Adjunto una propuesta comercial en PDF. Conviértela en un micrositio HTML de una
sola página, para mandársela al cliente por una liga en vez de como archivo adjunto.

CONTENIDO:
- Respeta el contenido tal como está: mismos alcances, mismos precios, mismas cifras,
  mismos plazos. No inventes nada que no esté en el PDF y no agregues secciones nuevas.
- Si algo del PDF es ilegible o ambiguo, NO lo adivines: déjalo marcado como
  [REVISAR: ...] y hazme la lista al final de tu respuesta.
- Ordena el contenido para leerse en pantalla, no en papel: primero el resumen y lo
  que el cliente gana, luego el alcance y el cómo, al final el precio y los siguientes
  pasos.
- Si el PDF trae una tabla de precios o de alcances, consérvala como tabla.

DISEÑO:
- Sobrio y profesional, de consultoría: mucho aire, tipografía grande, una sola
  tipografía, máximo dos colores de acento.
- Una barra de navegación pegajosa arriba, con ligas internas (#seccion) a las
  secciones del documento.
- Cada sección con un título claro, para que se pueda escanear en 30 segundos.
- Móvil primero: en 390 px de ancho se lee sin zoom y sin scroll horizontal.

DATOS DEL DOCUMENTO:
- Cliente: [nombre de la empresa]
- Título: [título de la propuesta]
- Fecha: [mes y año]
- Preparada por: [tu nombre] · [tu empresa]

REGLAS TÉCNICAS DEL ARCHIVO (obligatorias, sin excepción):
- Entrégame UN SOLO archivo .html autocontenido, en UTF-8, de menos de 5 MB.
- Todo el CSS va en una etiqueta <style> dentro del documento. Prohibido <link> a hojas externas.
- Todo el JavaScript va en una etiqueta <script> dentro del documento. Prohibido <script src="..."> a un CDN o a cualquier URL: no hay librerías externas disponibles (nada de Chart.js, Tailwind CDN, jQuery, Alpine, React).
- Si necesitas gráficas, dibújalas con SVG o <canvas> escrito a mano.
- Prohibidos los iframes y los videos embebidos (YouTube, Vimeo, Loom, Calendly, Maps). Usa una liga normal en su lugar.
- Prohibidos los formularios que envían datos. Para contacto usa mailto: o una liga de WhatsApp.
- Prohibido localStorage, sessionStorage y document.cookie: el documento corre en un origen aislado y esas llamadas lanzan error. Guarda el estado en variables de JavaScript.
- Prohibidos alert(), confirm(), prompt() y window.print(): están bloqueados. Los avisos se pintan en la página.
- Prohibidos los campos de contraseña, tarjeta de crédito, CLABE, CVV o NIP.
- No pongas botones de "descargar PDF": el documento no puede generar descargas.
- Tipografías del sistema. Imágenes incrustadas en base64 (data:) o ninguna.
- Pon un <title> descriptivo: "Propuesta · [cliente] · [mes año]".
- Incluye @media print básico para que se imprima decente.

Entrégame el archivo .html completo y listo para descargar, y al final la lista de
[REVISAR].
```

## Después de la primera versión

Casi nunca queda al primer tiro, y no debería. Estas tres iteraciones son las que más rinden:

```
Está bien, ahora:
1. El precio se ve escondido. Súbelo a su propia sección, con la cifra grande y qué
   incluye debajo.
2. Agrega arriba un resumen de tres renglones que se entienda sin leer el resto.
3. Revisa que en celular la tabla de alcances no se salga de la pantalla.
```

Cuando quede, guarda ese archivo: es el insumo del siguiente prompt, [Tu formato base](/guias/tu-formato-base).

## Errores típicos en esta conversión

- **La IA "mejora" los números.** Redondea, actualiza, completa lo que faltaba. Revisa cifra por cifra contra el PDF antes de mandarla; es la única revisión que no te puedes saltar.
- **Se come el pie de página legal.** Vigencia de la oferta, condiciones de pago, qué no incluye. Si estaba en el PDF, tiene que seguir estando.
- **Nombres mal escritos.** El nombre del contacto y el de su empresa, exactos. Es lo primero que ve y lo primero que se nota.

## Qué sigue

[Tu formato base](/guias/tu-formato-base): convierte lo que acabas de hacer en una plantilla que reúses siempre.