Ruta: /productos/[slug] (26 landings; /productos/chatbot-rag-ia redirige a /rag) · Archivos nuevos: apps/web/src/app/productos/[slug]/{page,opengraph-image}.tsx, apps/web/src/components/product-landing/*, apps/web/src/lib/product-landing.ts, apps/web/messages/landings/<slug>.{es,en}.json, apps/web/scripts/validate-landings.mjs · Se modifican: apps/web/src/lib/services-catalog.ts, apps/web/src/app/sitemap.ts, apps/web/next.config.js (redirección y CSP) · Prioridad: P0 (la ruta y la plantilla: son el destino de cada tarjeta de /services) · Esfuerzo total: XL (≈ 25 días-dev de plantilla y componentes + ≈ 12 días de contenido y capturas de la primera ola en la Fase 1; la segunda ola y los videos en la Fase 2)

Mockup de la plantilla. Páginas relacionadas: Servicios y precios, Catálogo de demos, Flujo del cliente (etapa 2), Sistema de demos, Landings SEO y de campaña, Catálogo de productos y las 27 páginas Producto-<slug>.md, que traen el contenido propuesto de cada landing (por ejemplo CRM con IA).

Cada producto de "Otras soluciones a medida" necesita una página que lo venda sola (DECISIÓN 2). En menos de un minuto de lectura, el visitante debe poder responder:

1. ¿Es para mí? Para quién es y qué problema resuelve, con ejemplos de su sector.
2. ¿Qué hace? Módulos, en qué plan se incluye cada uno, integraciones típicas en Colombia.
3. ¿Cómo se ve? Capturas reales de la demo y un video corto.
4. ¿Cuánto cuesta? Planes de compra en COP más IVA si aplica, con USD de referencia; suscripción en lista de espera (DECISIÓN 7).
5. ¿Cómo lo pruebo? Un CTA principal que depende del modo de acceso de la demo y un "Agendar llamada" siempre visible.

Además, la landing es:

• el destino de la pauta de "Otras soluciones" (Landings SEO y de campaña);
• la página que posiciona la intención comercial ("software de … para empresas", "precio de …"), mientras la demo posiciona "demo de …";
• la fuente de la vista previa (capturas y video) que usan /demo/acceso y el catálogo de demos.

La ruta /productos/[slug] no existe. Hoy su papel lo cumplen, a medias, tres piezas:

Contenido que ya existe y se reutiliza:

• messages/offerings/<slug>.{es,en}.json: name, tagline, categoryLabel, tiers.<plan>.{name, description, idealPara, incluye[]}, costoNote. idealPara y costoNote hoy no se muestran en ningún lado.
• services-catalog.ts: precios por plan y modalidad, límites, soporte, horas, semanas de implementación y costos de terceros.
• Las páginas Producto-<slug>.md de esta wiki: hero, problemas, cómo funciona, módulos, integraciones y FAQ propuestos para cada producto.
• El mockup images/mockups/landing-producto.png, la referencia visual de la plantilla.

Lo que existe hoy en lugar de una landing:

1. No hay a dónde mandar a un interesado. Ni la pauta, ni un correo comercial, ni un mensaje de WhatsApp pueden enlazar a "el CRM de KopTup con su precio".
2. Google no ve el producto: solo indexa la demo, que no tiene precio, ni para quién es, ni preguntas frecuentes.
3. El CTA no sabe de qué producto viene: el contacto llega sin producto, plan ni modalidad.
4. El contenido está disperso: precios en código, textos de plantilla en mensajes, propuestas de valor en la wiki. Nada asegura que coincidan.
5. Las demos solicitud quedan sin vitrina: cuando se activen los modos de acceso, su única cara pública indexable será la landing.
6. Dos landings para el mismo producto si no se decide: el chatbot RAG ya tiene /rag y /chatbots-ia.

El modo es el de la semilla de Sistema de demos (sección 4) y se puede cambiar desde el panel; la landing lo lee en cada revalidación.

La primera ola junta los 3 productos P1 y las 5 demos solicitud, porque para estas últimas la landing es su única vista pública con capturas y video.

flowchart TD
  H["Hero: H1, subtítulo y CTA según el modo"] --> W["Para quién es"]
  W --> P["Problemas que resuelve"]
  P --> C["Cómo funciona"]
  C --> M["Qué incluye, con plan mínimo"]
  M --> G["Vista previa: video y capturas"]
  G --> I["Integraciones"]
  I --> PR["Planes y precios"]
  PR --> T["Seguridad y datos, si aplica"]
  T --> F["Preguntas frecuentes"]
  F --> R["Productos relacionados"]
  R --> X["CTA final"]
  H -.->|"CTA principal"| D["Demo o modal Solicitar demo"]
  PR -.->|"Solicitar demo con plan"| D
  PR -.->|"Suscripción"| WL["Lista de espera"]
  X -.-> D

Ver diagrama como imagen

Hero: ejemplo con CRM con IA (textos de CRM con IA):

• Etiqueta: Ventas, marketing y atención · CRM con IA
• H1: CRM con IA para equipos que venden por WhatsApp
• Subtítulo: Pipeline visual, prioridad de leads con IA y mensajes de seguimiento redactados en segundos. El código es tuyo.
• Botones: Probar la demo · Solicitar demo guiada · enlace "Agendar llamada".
• Línea de estado: "Demo abierta · sin registro · datos de ejemplo".
• Frases de confianza: "El código es tuyo (compra)" · "Precios en COP" · "Equipo en Colombia".

ProductCtaGroup aplica la regla de Flujo del cliente (etapa 2) y la extiende a los demás estados. El mismo grupo se usa en el hero, en la barra móvil y en el CTA final.

flowchart TD
  A["ProductCtaGroup"] --> B{"¿El producto tiene demo?"}
  B -->|"No"| N["Agendar llamada y Solicitar propuesta"]
  B -->|"Si"| C{"¿Visitante con acceso vigente?"}
  C -->|"Si"| G["Abrir mi demo y Solicitar propuesta"]
  C -->|"No"| D{"¿Demo activa?"}
  D -->|"No"| I["Solicitar demo, con aviso de mantenimiento"]
  D -->|"Si"| E{"Modo de la demo"}
  E -->|"publico"| P["Probar la demo y Solicitar demo guiada"]
  E -->|"solicitud"| S["Solicitar demo y Agendar llamada"]
  E -->|"privado"| V["Solicitar demo personalizada"]

Ver diagrama como imagen

Reglas de implementación:

• Render en el servidor por modo. El HTML sale con la variante del modo (página estática con revalidación). Solo si existe la cookie de sesión, una isla cliente consulta GET /api/me/demos y cambia a la variante "acceso vigente". El espacio de los botones es fijo para no mover el diseño.
• "Agendar llamada" usa NEXT_PUBLIC_BOOKING_URL. Si la herramienta de agenda acepta parámetros, se envía el producto.
• Las páginas de producto que proponen "Solicitar demo" como botón principal para una demo publico se leen con esta regla: el texto de su hero se mantiene y ProductCtaGroup decide el orden de los botones.
• El mockup muestra la variante con "Solicitar demo" primero y "Probar la demo abierta" como enlace. Es la alternativa que se medirá en la prueba A/B de la Fase 5 (tarea 25), no la regla vigente.

Los textos de cada landing viven en apps/web/messages/landings/<slug>.{es,en}.json. Ningún precio ni número de plan se escribe en estos archivos: los montos, semanas, límites y horas salen de services-catalog.ts, para que nunca se desalineen.

{
  "slug": "crm-ia",
  "status": "publicada",
  "updatedAt": "2026-11-03",
  "seo": {
    "title": "CRM con IA para pymes en Colombia",
    "description": "Pipeline visual, prioridad de leads con IA y seguimiento por WhatsApp. El código es tuyo. Prueba la demo gratis o pide una demo guiada."
  },
  "hero": {
    "title": "CRM con IA para equipos que venden por WhatsApp",
    "subtitle": "Pipeline visual, prioridad de leads con IA y mensajes de seguimiento redactados en segundos. El código es tuyo.",
    "trust": ["El código es tuyo (compra)", "Precios en COP", "Equipo en Colombia"],
    "imageAlt": "Pipeline del CRM con negocios por etapa y sugerencia de la IA"
  },
  "forWhom": [
    { "title": "Equipos comerciales de 5 a 50 vendedores", "text": "Un solo lugar para el pipeline, las tareas y el seguimiento de cada vendedor." }
  ],
  "problems": [
    { "title": "Leads perdidos en WhatsApp personales", "text": "Cuando un vendedor se va, se lleva las conversaciones." }
  ],
  "howItWorks": [
    { "title": "Conectas tus canales", "text": "WhatsApp Business, correo y formularios web." }
  ],
  "modules": [
    { "title": "Pipeline visual", "text": "Arrastra negocios entre etapas y ve el valor de cada una.", "fromTier": "basico" },
    { "title": "Asistente que redacta correos y WhatsApp", "text": "Borradores con el tono y el contexto del negocio.", "fromTier": "avanzado" }
  ],
  "integrations": ["WhatsApp Business", "Gmail y Outlook", "Google Calendar", "Siigo o Alegra", "Wompi o PayU", "Importación desde Excel"],
  "faq": [
    { "q": "¿El código es mío?", "a": "Sí. En la modalidad de compra te entregamos el código fuente y la documentación." },
    { "q": "¿Puedo migrar desde Excel?", "a": "Sí. Importamos tus contactos y negocios desde Excel o CSV y detectamos duplicados." }
  ],
  "related": ["helpdesk-ia", "voice-ai-callcenter"],
  "pricing": { "recommendedTier": "profesional" },
  "requestQuestions": ["¿Cuántos vendedores tiene tu equipo?", "¿Qué usan hoy para el seguimiento: Excel, otro CRM o WhatsApp?"],
  "blocks": ["hero", "forWhom", "problems", "howItWorks", "modules", "media", "integrations", "pricing", "faq", "related", "finalCta"]
}

Validación (apps/web/scripts/validate-landings.mjs, corre en prebuild junto a merge-messages.mjs; el build falla si algo no se cumple):

Preguntas extra por producto (requestQuestions): el modal Solicitar demo las muestra como campos opcionales del paso 2. En la Fase 1 sus respuestas se agregan al final de useCase de la DemoRequest, con el formato "Pregunta: respuesta". Si en la Fase 2 se usan para el puntaje, pasan a un campo propio.

Capturas

Video

Las mismas capturas y el mismo video alimentan la pantalla de vista previa /demo/acceso y la tarjeta del catálogo: un solo origen (DemoCatalogItem).

Sigue el mockup: pestañas Compra (pago único) y Suscripción (mensual).

Pestaña Compra (por defecto):

Pestaña Suscripción:

Suscripción (mensual): lista de espera. Estamos preparando la versión hospedada por KopTup. Déjanos tu email y te avisamos cuando abra, sin compromiso.

Campo de email, casilla de autorización Ley 1581 (obligatoria, sin marcar) y botón Unirme a la lista. Envía POST /api/contact con offeringSlug, modality = saas y source.page; el Lead queda con la etiqueta saas_lista_espera:<slug> (regla de Servicios y precios, sección 7.4). Las cuotas SaaS de services-catalog.ts no se muestran.

Costo estimado del primer año (Fase 2, cuando exista la política de mantenimiento): para Básico y Profesional, setup + 12 meses de mantenimiento + punto medio de costos de terceros, con la nota "estimado; tu propuesta trae el valor exacto".

Metadata (generateMetadata({ params }) en page.tsx):

Una intención por página, para que la landing y la demo no compitan:

Títulos y descripciones de la primera ola (los demás se escriben con la misma regla en cada archivo):

Datos estructurados (JSON-LD), honestos:

• Product con name, description, brand (KopTup), category, image, url y offers:
  • AggregateOffer con los 4 planes de compra: priceCurrency: "COP", lowPrice y highPrice iguales a lo que se ve, offerCount: 4;
  • cada Offer con price, priceSpecification.valueAddedTaxIncluded: false, priceValidUntil (fin del trimestre) y url a #planes.
• Sin aggregateRating ni review hasta que existan reseñas reales y visibles en la página.
• Sin ofertas de suscripción mientras estén en lista de espera.
• BreadcrumbList: Inicio › Soluciones (/services#otras-soluciones) › {producto}.
• FAQPage generado del mismo arreglo visible. Google hoy muestra preguntas frecuentes enriquecidas casi solo en sitios de gobierno y salud: se marca por coherencia, sin esperar el resultado enriquecido.
• VideoObject cuando haya video.

Ejemplo para crm-ia (montos actuales de services-catalog.ts):

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "CRM con IA",
  "description": "CRM a medida con pipeline visual, prioridad de leads con IA y seguimiento por WhatsApp.",
  "brand": { "@type": "Brand", "name": "KopTup" },
  "category": "Software de ventas (CRM)",
  "url": "https://www.koptup.com/productos/crm-ia",
  "offers": {
    "@type": "AggregateOffer",
    "priceCurrency": "COP",
    "lowPrice": 56000000,
    "highPrice": 720000000,
    "offerCount": 4,
    "offers": [
      {
        "@type": "Offer",
        "name": "Plan Básico, compra con pago único",
        "price": 56000000,
        "priceCurrency": "COP",
        "priceSpecification": { "@type": "PriceSpecification", "price": 56000000, "priceCurrency": "COP", "valueAddedTaxIncluded": false },
        "priceValidUntil": "2026-12-31",
        "url": "https://www.koptup.com/productos/crm-ia#planes",
        "seller": { "@type": "Organization", "name": "KopTup" }
      }
    ]
  }
}

(Los otros 3 planes siguen el mismo formato. El JSON-LD se genera desde services-catalog.ts: nunca se escribe a mano.)

Imagen Open Graph por producto (app/productos/[slug]/opengraph-image.tsx, 1200×630 con ImageResponse):

• Logo, nombre del producto, la frase del hero, la etiqueta del área y "Demo interactiva" o "Demo por solicitud".
• Sin precios: LinkedIn y WhatsApp guardan la vista previa por semanas y un precio viejo confunde.
• Usa el patrón ya corregido en la rama RAG para la imagen de la home (degradados con dirección explícita).
• Texto alternativo: "{producto}: {frase del hero}".

Sitemap: sitemap.ts agrega las landings con status = publicada, priority: 0.8 y lastModified igual a updatedAt del archivo (no la fecha del despliegue). /productos/chatbot-rag-ia no entra.

Enlazado interno hacia cada landing:

• tarjetas de /services (botón "Ver producto");
• "Otras soluciones a medida" de la home;
• tarjetas del catálogo /demo ("Ver producto y precios");
• banner y cierre de cada demo ("Ver precios" → #planes);
• pantalla /demo/acceso;
• landings SEO y de sector (Landings SEO);
• "Productos relacionados" de otras landings.

Cada landing enlaza de vuelta a su demo, a /services#otras-soluciones y, si aplica, a /rag.

Para que ninguna tarjeta de /services lleve a un 404, las 26 landings existen desde el primer despliegue:

flowchart LR
  A["Ruta y plantilla"] --> B["26 landings en borrador, sin indexar"]
  B --> C["Ola 1, Fase 1: 3 productos P1 y 5 demos por solicitud"]
  C --> D["Ola 2, Fase 2: 18 productos restantes"]
  D --> E["Fase 5: casos de estudio y versión en inglés"]

Ver diagrama como imagen

El contenido de cada landing se toma de su página Producto-<slug>.md (hero, problemas, cómo funciona, módulos, integraciones y FAQ ya propuestos) y lo revisa el dueño antes de pasar a publicada.

sequenceDiagram
  autonumber
  participant V as Visitante
  participant L as Landing productos slug
  participant F as Modal Solicitar demo
  participant A as API backend
  participant G as Página de gracias
  V->>L: Llega desde Google, pauta o services
  L->>L: Muestra CTA según el modo leído del catálogo de demos
  V->>L: Clic en Solicitar demo del plan Profesional
  L->>F: Abre el modal con producto, plan y demo precargados
  V->>F: Completa los 2 pasos y acepta la autorización Ley 1581
  F->>A: POST /api/demo-requests con source.page y UTM
  A-->>F: 201 con el código de la solicitud
  F->>G: Redirige a solicitar-demo gracias
  G-->>V: Código, qué pasa ahora y Agendar llamada

Ver diagrama como imagen

Eventos de la landing (solo con consentimiento de analítica; sin datos personales):

El detalle de SEO está en la sección 8. Resumen del resto:

i18n

• Español colombiano con "tú" (validado en el build).
• Los archivos landings/<slug>.en.json se preparan en la Fase 2, pero el inglés sigue por cookie y no se declara hreflang hasta la Fase 5 (/en/productos/<slug>).
• El contenido de la landing se lee en el servidor; a las islas cliente solo llegan sus textos.

Accesibilidad

• Un H1; H2 por bloque; H3 en tarjetas.
• Pestañas de planes con role="tablist", aria-selected y flechas del teclado.
• Precios con texto completo para lectores de pantalla ("56 millones de pesos colombianos más IVA").
• Preguntas frecuentes con <details> y <summary> nativos: funcionan sin JavaScript y con teclado.
• Video con subtítulos; visor de capturas con manejo de foco y Esc.
• La barra móvil no tapa contenido (se reserva su alto al final de la página) ni el banner de cookies.
• Contraste AA y prefers-reduced-motion en carruseles y animaciones.

Rendimiento (meta: LCP móvil p75 < 2,5 s, CLS < 0,1, INP < 200 ms)

• Página estática con revalidación. Islas cliente: ProductCtaGroup (solo si hay sesión), pestañas de precios, visor, VideoFacade y el modal.
• Imagen del hero con next/image, priority y dimensiones fijas (≤ 120 KB servida).
• Ningún script de YouTube hasta que el visitante pulsa reproducir.
• Sin fetch en el navegador para precios ni para el modo de la demo.

Metas iniciales a validar con 8 semanas de datos reales (ver la nota de Flujo del cliente).