Cómo debe ser el HTML

Si copias los prompts de este manual, ya traen todas estas reglas adentro: no necesitas leer nada de aquí. Esta página es para dos momentos: cuando escribas tu propio prompt, y cuando algo te rebote y necesites entender el aviso.

Un documento de Cartaventa es un solo archivo .html que se basta a sí mismo: el CSS y el JavaScript van adentro, no afuera. Es justo como una IA genera estas páginas, pero conviene saber dónde están las paredes.

Tu documento se abre dentro de una caja cerrada, sin permisos propios, para que ni el documento ni nadie que lo manipule pueda tocar tu cuenta, leer la sesión de tu cliente ni quitarse la barra de encima. Esa caja es lo que hace que compartir una propuesta privada sea defendible — y también es de dónde salen todas las reglas de abajo.

Lo que sí

Qué	Cómo
Un solo archivo	.html, UTF-8, máximo 5 MB ya publicado. Puedes subir hasta 25 MB: las imágenes incrustadas se comprimen solas al publicar.
CSS	Todo dentro de un <style> en el documento. También style="" en línea.
JavaScript	Todo dentro de un <script> en el documento. Calculadoras, pestañas, acordeones, gráficas dibujadas a mano con SVG o <canvas>: todo funciona.
Imágenes	Incrustadas en base64 (data:) es lo recomendable. Una imagen desde una URL pública también carga.
Tipografías	Las del sistema van de lujo. Si quieres una de Google Fonts, tiene que entrar con @font-face dentro de tu <style>, apuntando al archivo de la fuente.
Ligas	Funcionan y abren solas en pestaña nueva. Las ligas internas (href="#precios") navegan dentro del documento, así que un índice de secciones funciona bien.
Impresión	Puedes incluir @media print para que tu cliente imprima bonito desde el menú de su navegador.

Lo que no

Esto no es capricho: cada punto es una pared del aislamiento, y el resultado es siempre el mismo —se ve bien en la vista previa de tu IA y sale roto en Cartaventa—. Dícelo a tu IA antes de que genere, no después; cada punto trae, en cursivas, la frase con la que se lo dices cuando ya metió la pata.

• Nada de <script src="https://…">. Una librería es un pedazo de programa ya hecho que la IA trae de otro sitio de internet en vez de escribirlo; un CDN es el sitio de donde lo trae. Aquí están bloqueadas todas: Chart.js, Tailwind por CDN, jQuery, Alpine, lo que sea. Si quieres una gráfica, que la dibuje con SVG o <canvas> a mano. Si quieres estilos, CSS escrito en el documento. «Quita la librería externa y escribe ese código a mano dentro del documento: no puedo cargar nada desde un CDN.»
• Nada de <link rel="stylesheet" href="https://…">. Mismo caso, incluida la hoja de Google Fonts. «Mueve todo el CSS a una etiqueta <style> dentro del documento y usa tipografías del sistema.»
• Nada de iframes ni videos embebidos. Un iframe es una ventana a otro sitio metida dentro de tu página: así es como se pega un video de YouTube. Aquí no cargan: YouTube, Vimeo, Loom, Calendly, Google Maps. Pon una liga con una buena carátula; abre en pestaña nueva y ahí el video funciona normal. «Cambia el iframe por una liga normal con una carátula clicable.»
• Nada de formularios que envíen datos. No hay a dónde mandarlos. Si quieres respuesta, pon mailto: o una liga de WhatsApp. «Quita el formulario y deja una liga mailto: con el asunto ya escrito.»
• Nada de localStorage, sessionStorage ni cookies. Son la memoria del navegador, donde una página guarda lo que hiciste para cuando vuelvas. El documento no tiene dónde guardar: esas llamadas no solo no guardan, truenan y se llevan el resto de tu JavaScript si no están dentro de un try. Lo que el lector cambie en la calculadora vive en memoria mientras la página esté abierta, y eso está bien. «Quita todo el localStorage y sessionStorage: guarda el estado en variables de JavaScript.»
• Nada de alert(), confirm(), prompt() ni window.print() desde un botón. Están bloqueados. Para avisos, pinta un mensaje en la página. «Sustituye los alert() por un mensaje pintado en la página.»
• Nada de campos de contraseña, tarjeta, CLABE o NIP. Un documento que los trae no se publica: es la regla que evita que Cartaventa sirva para phishing. «Quita cualquier campo de contraseña o de datos de pago; ese documento sería rechazado.»
• Nada de botones de "descargar PDF". El documento no puede fabricar descargas. La descarga en PDF va a vivir en la barra de Cartaventa, no en tu HTML. «Quita el botón de descargar; el documento no puede generar archivos.»

Dos detalles de maquetación

• La barra de Cartaventa vive abajo, fuera de tu documento (56 px en escritorio, 76 px en celular). Tu documento recibe el resto de la pantalla con su propio scroll, así que 100vh adentro se refiere a tu espacio y no se mete debajo de la barra.
• Móvil primero. La mayoría de estas propuestas se abren por primera vez en el celular, en el estacionamiento, antes de una junta. Si tu IA te entrega tres columnas fijas, pídele que las apile.

El bloque que le pegas a tu IA

Para qué sirve y qué haces con él, en concreto:

1. No tienes que usarlo si copias un prompt del manual: todos ya lo traen adentro. Este bloque es para cuando escribas tu propio prompt.
2. Cuando escribas el tuyo —"hazme una propuesta para Acme con esto que te paso"—, copia el bloque de abajo y pégalo al final, después de tus instrucciones, antes de mandar el mensaje.
3. Si la conversación se alarga y la IA empieza a meter librerías o iframes otra vez, vuelve a pegarlo. Es normal: se le olvida.

Si lo tuyo no es pegar bloques, hay un camino más cómodo: deja que la IA lea el manual completo y se encargue ella.

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: el documento sería rechazado al publicarse.
- No pongas botones de "descargar PDF": el documento no puede generar descargas.
- Tipografías del sistema. Si usas una tipografía web, incrústala con @font-face dentro del <style>.
- Imágenes incrustadas en base64 (data:) o ninguna. Nada de logotipos traídos de una URL que mañana puede cambiar.
- Diseño móvil primero: en una pantalla de 390 px de ancho se tiene que leer sin zoom y sin scroll horizontal.
- El documento debe verse bien impreso: incluye @media print básico.

Cómo compruebas que quedó bien

1. Ábrelo en tu navegador con doble clic. Si ya ahí se ve mal, no lo subas.
2. Súbelo y usa Ver en el detalle. Esa apertura no cuenta como apertura de cliente.
3. Revisa que los botones y la calculadora respondan dentro de Cartaventa, no solo en la vista previa de tu IA. Es donde salen los localStorage y los CDN que se colaron.
4. Ábrelo en tu celular con tu propia liga antes de mandárselo a nadie.

Qué sigue

Los prompts si todavía no tienes el archivo, o Subir y publicar un documento si ya lo traes.