Nivel 4 · Elementos interactivos

Aquí es donde Cartaventa deja de ser "un PDF más bonito". Un elemento interactivo hace que tu cliente le mueva a los números con los suyos — y el que le mueve a la propuesta, la defiende adentro.

La regla para elegir: un elemento interactivo tiene que resolver una objeción o una duda real. Uno que solo se ve bonito distrae; dos o tres que responden lo que el cliente se está preguntando cierran.

Cómo se los pides

Todos los prompts de abajo asumen que ya tienes tu propuesta en HTML y quieres agregarle un bloque: adjunta el archivo, copia el prompt completo y mándalo. Cada uno ya trae adentro las reglas que su elemento suele romper —los elementos interactivos son justo donde la IA mete Chart.js desde un CDN y localStorage—, así que no tienes que agregarles nada.

Si pides varios en la misma conversación, vuelve a pegar las reglas cada tantos mensajes: se le olvidan.

Y en todos, agrega este renglón si la propuesta ya está revisada —que es lo normal cuando le agregas un bloque:

No toques el contenido, los precios, las cifras ni el texto que ya tiene el documento:
solo agregas el bloque nuevo. Si algo del contenido existente te estorba para acomodarlo,
dímelo en vez de cambiarlo.

1 · Calculadora de retorno

La más pedida, y la que más cambia una conversación de precio: deja de discutirse tu costo y empieza a discutirse su beneficio.

Agrega a esta propuesta una CALCULADORA DE RETORNO interactiva, después de la sección
de resultados.

- Controles deslizantes (sliders) para: [variable 1, p. ej. número de vendedores],
  [variable 2, p. ej. ticket promedio], [variable 3, p. ej. tasa de cierre actual].
- Cada control con su valor visible al lado, y arranca en los valores reales del
  cliente: [valores].
- Cada control con mínimo, máximo y salto definidos: [variable 1: de X a Y, de Z en Z].
  Fuera de ese rango no se puede mover. Sin topes, el comité arrastra el control hasta
  el final, sale un retorno absurdo y la calculadora deja de ser creíble.
- Formatea el dinero como $1,234,567 MXN, sin decimales, y los porcentajes con un
  decimal. Nunca muestres números crudos tipo 1234567.8901.
- Calcula y muestra, actualizándose al instante: beneficio anual estimado, retorno
  sobre la inversión y meses para recuperarla, usando la inversión de [precio].
- La fórmula que quiero es: [descríbela en palabras, p. ej. "beneficio = vendedores ×
  ticket × reuniones extra al mes × tasa de cierre × 12"]. Muestra la fórmula en
  letra chica debajo, para que se pueda auditar.
- Debajo, una línea honesta: "Cálculo con los supuestos que usted ajuste. No es una
  garantía de resultados."
- Si el resultado da negativo o absurdo, que la calculadora lo muestre tal cual en vez
  de esconderlo: la credibilidad vale más que el número bonito.

REGLAS DE ESTE BLOQUE:
- Todo el JavaScript de la calculadora va en un <script> dentro del documento. Nada de
  librerías: sin <script src>, sin Chart.js, sin jQuery.
- Prohibido localStorage y sessionStorage para recordar los valores: el documento corre
  en un origen aislado y esas llamadas lanzan error. El estado vive en variables.
- Sin alert() para mostrar resultados: píntalos en la página.
- Respeta los estilos y las variables CSS que ya tiene el documento.
- Que se pueda mover con el dedo en un celular de 390 px.
Entrégame el archivo .html completo.

2 · Comparador de opciones

Para cuando quieres que elija entre tus tres alcances, en vez de elegir entre tú y tu competencia.

Agrega una SECCIÓN COMPARATIVA de tres opciones: [Esencial / Completo / A la medida].

- Tres columnas en escritorio, apiladas en celular, con la del medio marcada como
  recomendada.
- Cada una con: precio, para quién es en una línea, qué incluye (lista con palomas y
  tachas), plazo y un botón que lleva a mailto:[tu correo] con asunto "Me interesa la
  opción [nombre]".
- Debajo, una tabla de características fila por fila para comparar a detalle, con
  botones que filtren: "todas / solo en lo que difieren".
- Sin trucos de precio: nada de tachar precios ni de contadores de urgencia.

REGLAS DE ESTE BLOQUE:
- Nada de formularios que envíen datos: los botones son ligas mailto:, nada más.
- Todo el CSS y el JavaScript dentro del documento; sin librerías ni <script src>.
- Sin localStorage: si el lector elige una opción, se guarda en una variable.
- En 390 px las tres columnas se apilan y la tabla comparativa no se sale de la pantalla.
Entrégame el archivo .html completo.

3 · Cronograma de implementación

Responde la pregunta que siempre llega tarde: "¿y esto cuánto me va a tomar a mí?".

Agrega un CRONOGRAMA interactivo de la implementación.

- Fases: [lista de fases con sus semanas].
- Dibujado con HTML y CSS (una retícula), o con SVG. Sin librerías.
- Cada fase se puede presionar y abre el detalle: qué hacemos nosotros, QUÉ NECESITAMOS
  DE USTEDES (esto es lo importante: horas de su gente, accesos, decisiones) y qué
  entregamos al final.
- Marca visualmente los hitos de decisión del cliente.
- En celular se convierte en una lista vertical de tarjetas, no en un Gantt diminuto.

REGLAS DE ESTE BLOQUE:
- Dibujado con HTML, CSS o SVG escrito a mano. Prohibido cualquier librería de Gantt o
  de gráficas por CDN: no hay librerías externas disponibles.
- El detalle que se abre y se cierra, con JavaScript dentro del documento; sin
  localStorage para recordar qué fase estaba abierta.
Entrégame el archivo .html completo.

4 · Configurador de alcance

Para ventas modulares. Deja que el cliente arme su paquete y vea el precio moverse.

Agrega un CONFIGURADOR: el cliente elige módulos y ve el precio total actualizarse.

- Módulos disponibles, con su precio y su descripción: [lista].
- [Módulo X] viene marcado y no se puede quitar: es la base.
- Dependencias: si eligen [A], se marca [B] automáticamente y se explica por qué.
- Total siempre visible (pegado abajo del bloque en celular), con el desglose y la
  nota de que los precios son más IVA y cuánto tiempo tienen vigencia.
- Un botón "Mandar esta configuración" que abra mailto:[tu correo] con el asunto
  "Configuración elegida" — como el documento no puede enviar datos, deja el resumen
  de lo elegido escrito también en pantalla para que lo puedan copiar.

REGLAS DE ESTE BLOQUE:
- Prohibido usar un <form> que envíe a ningún lado: no hay servidor al otro lado y el
  documento sería rechazado si apunta a un dominio externo.
- Prohibido localStorage y sessionStorage: la configuración vive en variables de
  JavaScript mientras la página esté abierta. Avísale al lector en una línea que si
  cierra la pestaña se pierde lo que armó.
- Todo el CSS y el JavaScript dentro del documento; sin librerías.
Entrégame el archivo .html completo.

5 · El costo de no hacer nada

El elemento que más cambia una decisión que lleva meses estancada: casi nadie ha calculado lo que le cuesta seguir igual.

Agrega una SECCIÓN DE ESCENARIOS que compare tres caminos a [12 / 24] meses:
"No hacer nada", "[la solución mínima que ya tienen o están considerando]" y "Lo que
proponemos".

- Para cada escenario: qué pasa, cuánto cuesta y qué se deja de ganar, en una tarjeta.
- El escenario "No hacer nada" NO cuesta cero: cuesta [el costo que ellos mismos
  describieron, con su cifra]. Muéstralo como una cifra grande y di de dónde sale.
- Debajo, una línea de tiempo simple que muestre cómo crece esa cifra mes a mes si no
  se hace nada.
- Nada de dramatismo ni de lenguaje de miedo: cifras y su origen. Si el dato es una
  estimación que ellos dieron, dilo ahí mismo.

REGLAS DE ESTE BLOQUE:
- Todo el CSS y el JavaScript dentro del documento; sin librerías ni <script src>.
- Si dibujas la línea de tiempo, en SVG o con CSS a mano, con el eje arrancando en cero.
- No toques el contenido, los precios ni las cifras que ya tiene el documento.
Entrégame el archivo .html completo.

6 · Gráficas sin librerías

Agrega una gráfica de [barras / líneas] que compare [qué]. Los datos son:

[pega aquí las cifras, una por renglón: etiqueta y valor]

El eje Y arranca en cero, siempre: un eje cortado exagera la diferencia y en una
propuesta eso se nota. Dibújala en SVG escrito a mano, dentro del documento: sin Chart.js, sin D3, sin ninguna librería por CDN —están
bloqueadas y la gráfica saldría en blanco. Con ejes rotulados, valores visibles y una
nota de la fuente del dato. Que sea legible en blanco y negro y en 390 px de ancho.
Entrégame el archivo .html completo.

7 · Detalles chicos que rinden

Agrega al documento:
- Un índice pegajoso arriba con ligas internas a las secciones (#alcance, #inversion...).
- Un acordeón de preguntas frecuentes con estas dudas reales del cliente: [lista].
- Un bloque de "qué necesitamos de ustedes para arrancar" con casillas que se puedan
  marcar mientras lo leen (sin guardar nada: solo para la lectura).
- Una barra de progreso de lectura arriba del documento.

Todo con el CSS y el JavaScript dentro del documento, sin librerías ni <script src>.
Las casillas no guardan nada: sin localStorage, solo estado en memoria. Entrégame el
archivo .html completo.

Qué NO pedir

Porque no va a funcionar dentro de Cartaventa, y es mejor saberlo antes que después:

• Formularios que envíen datos. No hay a dónde. Usa mailto: o WhatsApp.
• Guardar el progreso del lector. No hay almacenamiento; si cierra la pestaña, se pierde lo que movió. Dilo en el texto si importa.
• Videos embebidos. Ni YouTube, ni Loom: el iframe queda bloqueado y el hueco sale en blanco. Una liga con una buena carátula.
• Botones de "descargar PDF". El documento no puede generar descargas.
• Firma electrónica dentro del documento. Manda una liga a tu herramienta de firma; abre en pestaña nueva y ahí funciona normal.

Una advertencia de oficio

Cada elemento interactivo es una promesa que alguien va a mover. Si tu calculadora arroja un retorno de 40× con los valores que vienen puestos, tu cliente no se emociona: deja de creerte. Pon los valores conservadores de arranque y deja que sea él quien los suba.

Qué sigue

Cada IA a su manera: cómo sacar el archivo de donde lo estás generando.