Rutas: /services (y /pricing, que solo redirige) · Archivos principales: apps/web/src/app/services/{page,layout}.tsx, apps/web/src/components/offerings/OfferingsCatalog.tsx, apps/web/src/lib/services-catalog.ts, apps/web/messages/offerings/*.{es,en}.json (incluye _page.*.json), apps/web/src/app/api/trm/route.ts, apps/web/src/app/pricing/* · Prioridad: P0 · Esfuerzo total: XL (≈ 30 días-dev en la Fase 1, de los cuales ≈ 4 ya están hechos en la rama rag-reposicionamiento, pendiente de merge; el resto en las Fases 2 a 5)

Captura de producción antes del reposicionamiento RAG. Páginas relacionadas: Landing de producto, Catálogo de demos, Flujo del cliente, Sistema de demos, Catálogo de productos, Comercial, marketing y legal, Home.

/services es la página donde el visitante resuelve "¿cuánto cuesta y qué compro exactamente?". Es el destino de "Ver planes" en la home, en /rag y en las demos. Tiene que lograr cinco cosas:

1. Mostrar el producto principal primero. Los planes RAG (Piloto, Esencial, Profesional y Empresarial) con su precio exacto en COP y en USD fijos, en la sección #planes-rag.
2. Explicar en 30 segundos la diferencia entre comprar y suscribirse, y decir sin rodeos qué se puede contratar hoy: la suscripción hospedada existe para RAG; para las demás soluciones está en lista de espera (DECISIÓN 7).
3. Llevar cada producto a su landing (/productos/<slug>, DECISIÓN 2) en lugar de abrir un modal sin URL.
4. Quitar las sorpresas: IVA, moneda, qué incluye cada plan, qué cuesta mantenerlo y qué se paga aparte a terceros (nube, IA, mensajería).
5. Dar un siguiente paso por plan: probar la demo, solicitar demo guiada, agendar llamada o unirse a la lista de espera.

Evidencia tomada de la rama main. La rama rag-reposicionamiento ya cambia parte de esto (se indica en cada fila).

Capturas del estado actual

1. El producto principal no se ve. RAG es lo que KopTup vende primero, pero aquí es una tarjeta más entre 27, con precios del catálogo viejo que ya no aplican (los planes RAG los reemplazan).
2. Se ofrece algo que no se puede vender. El selector arranca en SaaS y muestra cuotas mensuales para 27 productos, cuando no hay cobro recurrente ni base multi-tenant (DECISIÓN 7).
3. El precio "Desde" engaña dos veces: usa el plan Profesional (no el más barato) y en SaaS repite el mismo número en todas las tarjetas.
4. El mantenimiento no se entiende. Mantener el software comprado cuesta al año más que comprarlo, y más que la suscripción que incluye hosting. Ningún comprador acepta eso sin una explicación.
5. No se dice nada del IVA ni de qué incluye el mantenimiento, ni de cómo se factura en USD.
6. La TRM "en vivo" genera desconfianza: el precio en USD cambia entre cargas y la etiqueta atribuye el valor a una fuente que a veces no es la real.
7. El detalle del producto vive en un modal sin URL: no se puede compartir, no se indexa, no es accesible y su CTA pierde el plan y la modalidad al llegar a /contact.
8. Textos de plantilla, viñetas repetidas y voseo en los 27 productos. Para un comprador colombiano, el voseo suena a proveedor extranjero.
9. Afirmaciones sin respaldo ("alineado con HIPAA/SOC 2/ISO 27001", "SLA y soporte 24/7" en el registro) que contradicen el horario Lun–Vie publicado.
10. Tres precios distintos para el mismo producto en catálogo, registro/portal y especificación RAG.
11. Navegación pobre del catálogo: 15 chips, categorías de un solo producto y un buscador que no encuentra palabras en español.
12. Restos de la página vieja de precios (page_new.tsx, metadata "desde 499 USD") que pueden volver a publicarse por error.

La página pasa a ser un server component con pocas islas cliente (filtros, selector de moneda, botones con sesión). El orden de secciones es:

El ancla #otras-soluciones la usa la home ("Ver todas las soluciones", ver Home) y #planes-rag la usan la home, /rag, las demos y /pricing.

flowchart TD
  A["Visitante llega a services"] --> B{"¿Qué busca?"}
  B -->|"IA con sus documentos"| C["Planes RAG"]
  B -->|"Otra solución"| D["Otras soluciones a medida"]
  C -->|"Piloto"| E["Modal Solicitar demo con producto y plan precargados"]
  C -->|"Esencial o Profesional"| F["Probar la demo del asistente RAG"]
  C -->|"Empresarial"| G["Agendar llamada"]
  F --> E
  D --> H["Tarjeta del producto"]
  H -->|"Ver producto"| I["Landing productos slug"]
  H -->|"Demo abierta"| J["Demo interactiva"]
  H -->|"Demo por solicitud"| E
  I --> E
  I -->|"Suscripción"| K["Lista de espera: Lead etiquetado"]
  E --> L["Solicitud pendiente + Lead + acuse"]
  G --> L2["Llamada con comercial"]

Ver diagrama como imagen

La rama RAG pide la sección de planes "arriba de todo". El hero queda en una sola franja para que los planes se vean sin desplazarse en escritorio.

• H1: Planes y precios
• Subtítulo: Empieza con un Piloto RAG de 2 semanas o elige una solución a medida. Los precios están en pesos colombianos más IVA si aplica; para empresas fuera de Colombia cotizamos en dólares.
• Tres chips verificables: "Demo antes de comprar" · "Respuesta en máximo 1 día hábil" (promesa de Flujo del cliente) · "Equipo en Colombia".
• Enlaces: "Ver planes RAG" (#planes-rag) y "Ver otras soluciones" (#otras-soluciones).

Ya está implementada en la rama rag-reposicionamiento (etapa E4, commit 5828060), pendiente de fusionar en main. Los datos viven en una sola constante, RAG_PLANS en apps/web/src/lib/rag-plans.ts, que también usan RagPlansTeaser en la home y la tabla de /rag.

Sección #planes-rag en un build de la rama rag-reposicionamiento terminada (pendiente de merge; aún no está en producción). Los botones de las tarjetas ("Agenda tu piloto", "Elegir Esencial", "Elegir Profesional", "Cotizar Empresarial") van hoy a /contact con el plan preseleccionado; la tabla de arriba describe el destino final con el formulario "Solicitar demo".

Notas visibles debajo de la tabla:

• "Pregunta adicional sobre el tope del plan: COP 250 / USD 0,08."
• "Los mensajes de WhatsApp se cobran aparte, a la tarifa de Meta, sin margen."
• "Precios en COP más IVA si aplica. Los precios en USD son fijos y aplican a empresas fuera de Colombia."

Reglas:

• Los USD de los planes RAG son fijos: no se calculan con TRM.
• Mientras no exista el cobro recurrente (Fase 4), la mensualidad se factura manualmente cada mes. La página no menciona "cobro automático" ni "cancela cuando quieras".
• Hasta que el formulario de la Fase 1 esté en producción, "Agenda un piloto" va a /contact (como pide la especificación RAG). Después abre el modal Solicitar demo con el plan precargado.
• "Recomendado" en Profesional es una recomendación comercial, no un dato de ventas: no se escribe "el más elegido".
• Cada clic en una tarjeta o botón de plan envía plan_click con plan y source_page = services.

flowchart LR
  P1["1. Prueba la demo"] --> P2["2. Solicita una demo guiada"]
  P2 --> P3["3. Recibe tu propuesta"]
  P3 --> P4["4. Firma, paga el anticipo y arrancamos"]

Ver diagrama como imagen

El paso 4 enlaza a la explicación del portal en Portal del cliente solo cuando la Fase 3 (propuesta y anticipo en línea) esté lista; antes el texto dice "con el anticipo acordado en la propuesta".

Reemplaza el selector global Comprar/SaaS de las tarjetas. Es una tabla corta y honesta:

Texto bajo la tabla: "¿Quieres una solución a medida como suscripción? Únete a la lista de espera desde la página del producto y te avisamos cuando esté disponible."

Título: Otras soluciones a medida Subtítulo: CRM, ERP, facturación electrónica, mesas de ayuda y más. Cada solución se construye sobre una base probada y se adapta a tu proceso. El código es tuyo.

Controles (isla cliente CatalogFilters, estado en la URL: ?area=ventas&q=factura):

• Buscador con etiqueta visible "Buscar solución". Busca en nombre, frase corta, área y una lista de palabras clave por producto (searchKeywords en messages/offerings/<slug>.*.json), sin distinguir tildes ni mayúsculas. Ejemplo: "nomina" encuentra HRMS y Facturación electrónica.
• 6 chips de área más "Todas" (tabla abajo).
• Selector COP / USD de referencia. Sin "TRM en vivo".
• Contador accesible: "Mostrando 5 de 26 soluciones" (aria-live="polite").
• Estado vacío: "No encontramos esa solución. Cuéntanos qué necesitas y te decimos si la podemos construir." con botón Solicitar demo personalizada.

Áreas de negocio (campo nuevo area en services-catalog.ts; reemplaza las 14 categorías como filtro):

Son 26 productos: el catálogo de 27 sin chatbot-rag-ia, cuya tarjeta sale de aquí porque la reemplazan los planes RAG (especificación RAG) y cuya landing es /rag. La misma área se usa como filtro en el Catálogo de demos.

Tarjeta SolutionCard (sin modal):

• La tarjeta no es un enlace gigante: tiene un enlace en el título y dos botones, así cada acción se anuncia bien a lectores de pantalla.
• Orden por defecto: área y, dentro de cada área, sortOrder del catálogo de demos; los productos con prioridad P1 (crm-ia, helpdesk-ia, facturacion-electronica) van primero en su área.
• qa-automatizado-ia y vpn-empresarial no muestran botón de demo (especificación RAG): su demoSlug pasa a '' en services-catalog.ts.
• Rejilla sm:grid-cols-2 lg:grid-cols-3. En móvil, una columna sin tarjetas anidadas.

Los 26 productos comparten la misma escalera de planes. Se explica una sola vez aquí, con los valores que ya están en services-catalog.ts (IMPL_SEMANAS_BY_TIER, MANT_HORAS_BY_TIER, SUPPORT_BY_TIER, INTEG_BY_TIER). Los límites de cada producto (usuarios, volumen, almacenamiento) van en su landing.

La fila de soporte dice "hábiles" en todos los planes: hoy el plan Enterprise dice "1h crítico" sin aclarar horario, y eso choca con el horario publicado. Si el dueño decide ofrecer atención fuera de horario en Enterprise, se escribe como "según el SLA de tu contrato".

• COP es la moneda base. Se factura en COP a empresas colombianas.
• Planes RAG: USD fijos de la especificación.
• Otras soluciones: USD de referencia = COP ÷ TRM_REFERENCIA (3.300), redondeado a la centena (≥ USD 1.000) o a la decena (< USD 1.000). Ejemplo: COP 56.000.000 → USD 17.000.
• Etiqueta visible: "USD de referencia (1 USD = COP 3.300). Para empresas fuera de Colombia, la propuesta fija el precio en USD."
• Se quitan del catálogo público useLiveTRM, TRM_FALLBACK y la etiqueta "TRM en vivo". La ruta /api/trm también se elimina (ya retirada en la rama rag-reposicionamiento). El armador de propuestas (Fase 3) convierte con TRM_REFERENCIA y guarda la tasa usada en el campo fxRate del Quote.

• Etiqueta junto a cada precio en COP: "+ IVA si aplica".
• Respuesta en la FAQ: "Los precios están en pesos colombianos antes de IVA. El IVA (19 %) se agrega en la factura cuando aplica. Algunos conceptos, como el hosting y los servicios en la nube, pueden estar excluidos según el Estatuto Tributario; tu propuesta detalla cada concepto. Para empresas fuera de Colombia, el tratamiento lo define la propuesta."
• El texto lo valida el contador de KopTup antes de publicarse (tarea 12). La wiki no fija un tratamiento tributario.

Hoy el mantenimiento cuesta ≈ 9 % del setup cada mes. Ejemplo, CRM con IA Básico: setup COP 56.000.000 y mantenimiento COP 5.100.000/mes = COP 61.200.000 al año (109 % del setup), 2,7 veces la cuota SaaS del mismo plan.

Mientras el dueño decide, las tarjetas y las landings muestran "+ mantenimiento según plan (se detalla en tu propuesta)", como en el mockup de la landing, y nunca un número que contradiga la propuesta. La decisión queda registrada en Comercial, marketing y legal.

• Campo nuevo saasStatus en cada producto de services-catalog.ts: disponible o lista_espera. Hoy solo los planes RAG cuentan como disponibles; las 26 soluciones van en lista_espera.
• Los precios SaaS de las 26 se conservan en el código para el futuro, pero no se muestran como contratables.
• "Unirme a la lista de espera" (en la landing y en la ficha) pide email y autorización Ley 1581 y llama a POST /api/contact con offeringSlug, plan y modality = saas:
  • el backend hace upsert del Lead (ver Sistema de demos, modelo Lead) y le agrega la etiqueta saas_lista_espera:<slug>;
  • modality es un campo menor que se suma a los cambios de Contact de la sección 5.2 de esa página.
• Cuando un producto pase a disponible (Fase 4), Admin › Leads filtra por esa etiqueta y el comercial avisa a la lista.

• Se renombran a "Costos de terceros estimados (no incluidos en la compra)": rango en USD/mes, con referencia en COP y el detalle actual (nube, base de datos, IA, mensajería).
• Texto: "Los factura cada proveedor directamente a tu empresa; KopTup no les suma margen. En la suscripción hospedada están incluidos hasta el tope del plan."
• Se elimina la frase actual en voseo y la mezcla "One-time setup".

• 0 se muestra como "A convenir" en COP y en USD (hoy: "Personalizado" y "Custom").
• El plan Enterprise usa "Desde" cuando el setup es un piso y no un precio cerrado.

flowchart LR
  RP["lib/rag-plans.ts: RAG_PLANS"] --> S1["services: planes RAG"]
  RP --> S2["Home: RagPlansTeaser"]
  RP --> S3["Página rag"]
  RP --> S6["Registro y portal: plan elegido"]
  SC["lib/services-catalog.ts: OFFERINGS"] --> S4["services: otras soluciones"]
  SC --> S5["Landing productos slug"]
  SC --> S6
  SC --> S7["Sitemap y JSON-LD"]
  PK["Fase 3: packages/catalog"] -.-> Q["Backend: Quote ampliado"]
  RP -.-> PK
  SC -.-> PK

Ver diagrama como imagen

• Se eliminan los precios escritos a mano en register/page.tsx (PLAN_PREVIEW), dashboard/page.tsx (EmptyView) y admin/page.tsx. El registro y el portal leen el plan desde RAG_PLANS u OFFERINGS; el panel admin usa datos reales (ver Panel de administración).
• Fase 3: las dos fuentes se mueven a un paquete compartido del monorepo, packages/catalog (ya existe la carpeta packages/), para que el Quote ampliado del backend use exactamente los mismos montos que la web.

export type BusinessArea = 'ventas' | 'finanzas' | 'comercio' | 'productividad' | 'sectores' | 'tecnologia';
export type SaasStatus = 'disponible' | 'lista_espera';

export interface Offering {
  slug: string;
  demoSlug: string;          // '' en qa-automatizado-ia y vpn-empresarial
  area: BusinessArea;        // nuevo: reemplaza a category como filtro
  saasStatus: SaasStatus;    // nuevo: DECISIÓN 7
  icon: string;
  gradient: string;
  tiers: Tier[];
}

export const TRM_REFERENCIA = 3300;                     // reemplaza a TRM_FALLBACK
export function minSetupCOP(o: Offering): number { /* mínimo de compra.setupCOP */ }
export function formatUsdReference(cop: number): string { /* COP / TRM_REFERENCIA, redondeo 100 o 10 */ }

• incluyeCount se elimina: el componente recorre el arreglo real tiers.<plan>.incluye.
• BILLING_CYCLES y calcularCicloPago se eliminan, o se dejan documentados para la Fase 4. No se publican descuentos que no se pueden cobrar.
• El arreglo OFFERINGS deja de incluir chatbot-rag-ia. Sus datos viejos se borran: los precios del chatbot son los de RAG_PLANS.

Componente FaqSection; el JSON-LD FAQPage se genera del mismo arreglo visible.

• Título: ¿No sabes qué plan te conviene?
• Texto: Cuéntanos qué quieres resolver y en una demo guiada te recomendamos el plan y la modalidad, con números.
• Botones: Solicitar demo guiada (modal, source.page = /services) · Agendar llamada (NEXT_PUBLIC_BOOKING_URL, reemplaza el mailto:).

• Se reemplaza app/pricing/page.tsx por una redirección permanente en next.config.js (redirects(), código 301) hacia /services#planes-rag. Así no se ejecuta ningún componente.
• Se borran pricing/page.tsx, pricing/page_new.tsx, pricing/layout.tsx y la entrada seoConfig.pricing (que dice "desde 499 USD").
• La navbar cambia "Quiero esto" (hoy a /pricing) por Solicitar demo, que abre el modal. Es un cambio global descrito en Home y en Plan por sección.

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

SEO

• Título: "Planes y precios de sistemas RAG y software" (43 caracteres; 52 con " | KopTup"). Se verifica con npm run check-titles (rama RAG).
• Descripción: "Precios en COP y USD: Piloto RAG de 2 semanas, planes de IA con tus documentos y 26 soluciones a medida. IVA, mantenimiento y costos de terceros, claros." (153 caracteres).
• Canónico: https://www.koptup.com/services (rama RAG).
• JSON-LD:
  • Se quita: el ProfessionalService actual con servicios que no existen en el catálogo.
  • Se agrega: BreadcrumbList, ItemList con los 26 productos (cada ListItem con la URL de su landing) y FAQPage generado de la sección 8.
  • Los Offer con precio viven en /rag (planes RAG, Service, ver Landings SEO) y en cada landing (Product, ver Landing de producto). Así cada precio está una sola vez en los datos estructurados.
• Un solo H1. Secciones en H2 y nombres de producto en H3.
• Las 26 tarjetas se renderizan en el HTML del servidor con enlaces normales a /productos/<slug>: es el principal enlazado interno hacia las landings.

i18n

• Todos los textos en español colombiano con "tú": se reescriben _page.es.json y los 26 messages/offerings/<slug>.es.json (descripciones propias, viñetas sin duplicados, sin "tier").
• El inglés sigue por cookie hasta la Fase 5. Los textos EN se actualizan en la misma tarea para que no queden desalineados.
• Las tarjetas solo necesitan name, tagline y searchKeywords. El resto del contenido del producto (planes, viñetas, FAQ) se lee en el servidor de la landing y deja de viajar a todas las páginas.

Accesibilidad

• El selector de moneda es un grupo de radio (role="radiogroup", flechas para moverse); los chips de área usan aria-pressed.
• El buscador tiene <label> visible y el contador de resultados se anuncia con aria-live.
• Los precios se leen completos: "Desde 56 millones de pesos colombianos más IVA" (texto sr-only junto al número formateado).
• Contraste AA en los textos blancos sobre degradados de las tarjetas (hoy text-white/90 sobre tonos claros).
• Foco visible en chips, botones y enlaces. Al desaparecer el modal, desaparecen también sus problemas de foco y Esc.

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

• page.tsx server component. Islas cliente: CatalogFilters, selector de moneda y botones con sesión.
• Sin fetch('/api/trm') en el navegador.
• Íconos de Heroicons importados por producto, no un mapa con 27 íconos dentro del bundle cliente.

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