<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Propuesta IA - Mutual Corredores</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8f9fa;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
.tab-button {
padding: 0.75rem 1rem;
cursor: pointer;
border-bottom: 3px solid transparent;
color: #4b5563;
font-weight: 500;
transition: all 0.3s ease;
}
.tab-button.active {
border-bottom-color: #1d4ed8;
color: #1d4ed8;
font-weight: 700;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.sub-tab-button {
padding: 0.5rem 1rem;
cursor: pointer;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
background-color: #ffffff;
color: #374151;
font-weight: 500;
transition: all 0.3s ease;
}
.sub-tab-button.active {
background-color: #1d4ed8;
color: #ffffff;
border-color: #1d4ed8;
}
.sub-tab-content {
display: none;
}
.sub-tab-content.active {
display: block;
}
</style>
</head>
<body class="text-gray-800">
<!--
Chosen Palette: Calm Neutrals (BG: f8f9fa, Cards: white, Text: gray-800, Accent: blue-700)
Application Structure Plan: Se eligió una estructura de navegación por pestañas (Tabs) para segmentar la propuesta en secciones lógicas: Inicio (Resumen), Análisis Comparativo, Solución Recomendada, Plan de Implementación, Inversión y ROI, y Riesgos/Próximos Pasos. Esta arquitectura no lineal permite a los diferentes interesados (Finanzas, TI, Comercial) saltar directamente a la sección de su interés, a diferencia de un documento lineal. El 'Análisis Comparativo' tiene sub-pestañas para facilitar la comparación detallada (Finanzas, Técnica, etc.), que es crucial para la toma de decisión. El flujo de usuario ideal es: ver el problema/solución en 'Inicio', validar la elección en 'Análisis Comparativo', entender los detalles en 'Solución', 'Plan' y 'ROI', y ver la acción en 'Próximos Pasos'.
Visualization & Content Choices:
- Inicio (Métricas): Stat cards (HTML/CSS) -> Goal: Informar -> Muestra el 'gap' actual vs meta.
- Comparativo Financiero: Grouped Bar Chart (Chart.js) para 'Costo vs Beneficio' y Horizontal Bar (Chart.js) para 'Breakeven'. -> Goal: Comparar -> Permite una comparación visual rápida de las 3 opciones. Interacción: Tooltips.
- Comparativo Técnico/Operativo: Tablas HTML responsivas -> Goal: Comparar -> Detalle denso, mejor en formato tabla.
- Matriz Final: Radar Chart (Chart.js) -> Goal: Comparar -> Muestra el 'perfil' y fortalezas/debilidades de cada proveedor de forma multidimensional.
- Plan de Implementación: Lista vertical estilizada (HTML/CSS) -> Goal: Organizar/Cambio -> Muestra el flujo de tiempo de forma clara y responsive.
- Inversión ROI: Doughnut Chart (Chart.js) para 'Desglose Inversión' y Bar Chart (Chart.js) para 'Análisis de Sensibilidad'. -> Goal: Informar/Comparar -> Muestra proporciones y escenarios de riesgo/recompensa.
- Textos/Listas/Tablas: HTML/Tailwind para el resto del contenido (Desafíos, Características, Riesgos) -> Goal: Informar/Organizar.
CONFIRMATION: NO SVG graphics used. NO Mermaid JS used.
-->
<div class="container mx-auto p-4 md:p-8 max-w-7xl">
<header class="mb-6 pb-4 border-b border-gray-300">
<h1 class="text-3xl md:text-4xl font-bold text-blue-800">Propuesta: Sistema de Automatización con IA</h1>
<p class="text-xl text-gray-600 mt-1">Cliente: <span class="font-semibold">Mutual Corredores de Seguros</span></p>
<p class="text-sm text-gray-500">Preparado por: Alta Estrategia | Fecha: 29 de octubre, 2025</p>
</header>
<nav class="flex flex-wrap border-b border-gray-200 mb-6">
<button class="tab-button active" data-tab="inicio">Inicio y Resumen</button>
<button class="tab-button" data-tab="comparativo">Análisis Comparativo</button>
<button class="tab-button" data-tab="solucion">Solución Recomendada</button>
<button class="tab-button" data-tab="plan">Plan de Implementación</button>
<button class="tab-button" data-tab="roi">Inversión y ROI</button>
<button class="tab-button" data-tab="riesgos">Riesgos y Próximos Pasos</button>
</nav>
<main>
<div id="inicio-content" class="tab-content active p-4 bg-white rounded-lg shadow-sm">
<p class="text-lg text-gray-700 mb-6">
Bienvenido al resumen ejecutivo de la propuesta. Esta sección destaca el objetivo estratégico, la brecha entre la situación actual y las metas deseadas, y los desafíos críticos que la automatización con IA busca resolver para Mutual Corredores.
</p>
<h2 class="text-2xl font-bold text-blue-700 mb-4">Métricas Clave: Actual vs. Meta (Mes 6)</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-8">
<div class="bg-gray-50 p-4 rounded-lg shadow-inner text-center">
<span class="text-sm text-gray-500 block">Leads/mes</span>
<span class="text-2xl font-bold text-gray-800">133</span>
<span class="text-xl font-semibold text-green-600 block">→ 200</span>
</div>
<div class="bg-gray-50 p-4 rounded-lg shadow-inner text-center">
<span class="text-sm text-gray-500 block">Tasa Conversión</span>
<span class="text-2xl font-bold text-gray-800">8%</span>
<span class="text-xl font-semibold text-green-600 block">→ 12%</span>
</div>
<div class="bg-gray-50 p-4 rounded-lg shadow-inner text-center">
<span class="text-sm text-gray-500 block">Clientes Nuevos/mes</span>
<span class="text-2xl font-bold text-gray-800">11</span>
<span class="text-xl font-semibold text-green-600 block">→ 24</span>
</div>
<div class="bg-gray-50 p-4 rounded-lg shadow-inner text-center">
<span class="text-sm text-gray-500 block">Tiempo Respuesta</span>
<span class="text-2xl font-bold text-gray-800">2+ hrs</span>
<span class="text-xl font-semibold text-green-600 block">→ <5 min</span>
</div>
<div class="bg-gray-50 p-4 rounded-lg shadow-inner text-center">
<span class="text-sm text-gray-500 block">Costo / Cliente</span>
<span class="text-2xl font-bold text-gray-800">$46</span>
<span class="text-xl font-semibold text-green-600 block">→ $28</span>
</div>
</div>
<h2 class="text-2xl font-bold text-blue-700 mb-4">Desafíos Críticos Identificados</h2>
<ul class="list-none space-y-2">
<li class="flex items-center text-lg"><span class="text-red-500 mr-2 text-xl">❌</span> WhatsApp manual: Demoras de horas, pérdida de leads calientes.</li>
<li class="flex items-center text-lg"><span class="text-red-500 mr-2 text-xl">❌</span> Cotizador aislado: Sin integración con seguimiento ni CRM.</li>
<li class="flex items-center text-lg"><span class="text-red-500 mr-2 text-xl">❌</span> Sin nurturing: Leads abandonados sin seguimiento automatizado.</li>
<li class="flex items-center text-lg"><span class="text-red-500 mr-2 text-xl">❌</span> Falta de datos: Sin visibilidad de KPIs para optimización.</li>
</ul>
</div>
<div id="comparativo-content" class="tab-content p-4 bg-white rounded-lg shadow-sm">
<p class="text-lg text-gray-700 mb-6">
Esta sección es fundamental para la decisión. Aquí comparamos las tres propuestas (AI For The World, S1erra Studio, ITIS Support) bajo criterios financieros, técnicos, operativos y una matriz de evaluación final. Use los botones para navegar entre las comparaciones.
</p>
<div class="flex flex-wrap gap-2 mb-6">
<button class="sub-tab-button active" data-subtab="financiero">Financiero</button>
<button class="sub-tab-button" data-subtab="tecnico">Técnico</button>
<button class="sub-tab-button" data-subtab="operativo">Operativo</button>
<button class="sub-tab-button" data-subtab="matriz">Matriz Final</button>
</div>
<div id="financiero-content" class="sub-tab-content active">
<h3 class="text-xl font-bold text-blue-700 mb-2">Comparación Financiera (12 meses)</h3>
<p class="text-sm text-gray-600 mb-4">Análisis del costo total, beneficio neto proyectado y velocidad de recuperación de la inversión.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="chart-container">
<canvas id="financialComparisonChart"></canvas>
</div>
<div class="chart-container">
<canvas id="breakevenChart"></canvas>
</div>
</div>
</div>
<div id="tecnico-content" class="sub-tab-content">
<h3 class="text-xl font-bold text-blue-700 mb-2">Comparación Técnica</h3>
<p class="text-sm text-gray-600 mb-4">Evaluación de las capacidades clave de cada plataforma.</p>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Capacidad</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AI For The World</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">S1erra Studio</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ITIS Support</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">WhatsApp Business</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600 font-semibold">✅ API nativa</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600">✅ API integrada</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600">✅ Conector</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Multicanal (FB, IG, etc.)</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600 font-semibold">✅ Incluido</td>
<td class="px-6 py-4 whitespace-nowrap text-yellow-600">⚠️ Desarrollo adicional</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600">✅ Conectores</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Integración cotizador</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600 font-semibold">✅ API bidireccional</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600">✅ Nativa</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600">✅ Power Automate</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">CRM sincronización</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600 font-semibold">✅ Tiempo real</td>
<td class="px-6 py-4 whitespace-nowrap text-yellow-600">⚠️ A implementar</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600">✅ Dataverse</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Lead scoring auto.</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600 font-semibold">✅ Incluido</td>
<td class="px-6 py-4 whitespace-nowrap text-yellow-600">⚠️ A definir</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600">✅ Configurable</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Nurturing automatizado</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600 font-semibold">✅ Secuencias inteligentes</td>
<td class="px-6 py-4 whitespace-nowrap text-red-600">❌ No especificado</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600">✅ Flujos Power Automate</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">IA Generativa</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600 font-semibold">✅ Propietaria avanzada</td>
<td class="px-6 py-4 whitespace-nowrap text-yellow-600">⚠️ A definir</td>
<td class="px-6 py-4 whitespace-nowrap text-green-600">✅ Azure OpenAI</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="operativo-content" class="sub-tab-content">
<h3 class="text-xl font-bold text-blue-700 mb-2">Comparación Operativa</h3>
<p class="text-sm text-gray-600 mb-4">Factores de implementación, soporte y dependencia tecnológica.</p>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Factor</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AI For The World</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">S1erra Studio</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ITIS Support</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Implementación</td>
<td class="px-6 py-4 whitespace-nowrap font-semibold text-yellow-600">7 semanas</td>
<td class="px-6 py-4 whitespace-nowrap font-semibold text-yellow-600">7 semanas</td>
<td class="px-6 py-4 whitespace-nowrap text-yellow-600">9 semanas</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Ubicación</td>
<td class="px-6 py-4 whitespace-nowrap">Miami, FL</td>
<td class="px-6 py-4 whitespace-nowrap font-semibold text-green-600">Guatemala (local) ✓</td>
<td class="px-6 py-4 whitespace-nowrap">Bogotá, Colombia</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Soporte</td>
<td class="px-6 py-4 whitespace-nowrap font-semibold text-green-600">24/7 español/inglés</td>
<td class="px-6 py-4 whitespace-nowrap">Horario local</td>
<td class="px-6 py-4 whitespace-nowrap">Horario Colombia</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Propiedad código</td>
<td class="px-6 py-4 whitespace-nowrap">Proveedor</td>
<td class="px-6 py-4 whitespace-nowrap font-semibold text-green-600">Cliente ✓</td>
<td class="px-6 py-4 whitespace-nowrap">Proveedor</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Dependencia</td>
<td class="px-6 py-4 whitespace-nowrap">Plataforma propietaria</td>
<td class="px-6 py-4 whitespace-nowrap">Independiente</td>
<td class="px-6 py-4 whitespace-nowrap">Ecosistema Microsoft</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="matriz-content" class="sub-tab-content">
<h3 class="text-xl font-bold text-blue-700 mb-2">Matriz de Evaluación Final</h3>
<p class="text-sm text-gray-600 mb-4">Puntuación ponderada final basada en los criterios clave. La calificación más alta es la recomendada.</p>
<div class="chart-container">
<canvas id="matrixChart"></canvas>
</div>
<div class="mt-6 text-center">
<span class="text-2xl font-bold">Calificación Total:</span>
<span class="text-2xl font-bold text-green-600 mx-2">AI For The World: 9.2/10 ⭐</span>
<span class="text-xl font-semibold text-gray-700 mx-2">S1erra Studio: 7.8/10</span>
<span class="text-xl font-semibold text-gray-500 mx-2">ITIS Support: 6.5/10</span>
</div>
</div>
</div>
<div id="solucion-content" class="tab-content p-4 bg-white rounded-lg shadow-sm">
<p class="text-lg text-gray-700 mb-6">
Basado en el análisis, recomendamos "AI For The World - Gloria". Esta sección detalla por qué es la mejor opción, sus características clave y el modelo comercial transparente propuesto.
</p>
<h2 class="text-2xl font-bold text-blue-700 mb-4">¿Por qué Gloria?</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-gray-50 p-6 rounded-lg">
<h3 class="text-lg font-semibold mb-2 text-green-700">✅ Menor Riesgo Financiero y Retorno Rápido</h3>
<ul class="list-disc list-inside space-y-1 text-gray-700">
<li>Inversión inicial: $1,300 (vs. $10k+)</li>
<li>Recuperación en 1.3 meses (vs. 6.7-9 meses)</li>
<li>ROI superior: 134%</li>
<li>Modelo de pago por éxito alineado a resultados</li>
</ul>
</div>
<div class="bg-gray-50 p-6 rounded-lg">
<h3 class="text-lg font-semibold mb-2 text-green-700">✅ Capacidades Superiores y Soporte</h3>
<ul class="list-disc list-inside space-y-1 text-gray-700">
<li>Omnicanal completo (WA, FB, IG, SMS) desde día 1</li>
<li>Lead scoring y nurturing automatizado incluido</li>
<li>Plataforma probada (4 semanas implementación)</li>
<li>Soporte 24/7 en español</li>
</ul>
</div>
</div>
<h2 class="text-2xl font-bold text-blue-700 mb-4">Características Clave y Beneficios</h2>
<div class="overflow-x-auto mb-8">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Funcionalidad</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Beneficio para Mutual</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Respuesta instantánea <5 min</td>
<td class="px-6 py-4">Aumenta conversión 8x vs. respuesta manual</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Calificación automática de leads</td>
<td class="px-6 py-4">Prioriza leads calientes para equipo ventas</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Integración cotizador web</td>
<td class="px-6 py-4">Sincronización bidireccional tiempo real</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Nurturing automatizado</td>
<td class="px-6 py-4">Recupera leads abandonados con secuencias</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Analytics avanzado</td>
<td class="px-6 py-4">Optimización continua basada en datos</td>
</tr>
</tbody>
</table>
</div>
<h2 class="text-2xl font-bold text-blue-700 mb-4">Modelo Comercial</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Concepto</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Monto</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descripción</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Desarrollo e Implementación</td>
<td class="px-6 py-4 whitespace-nowrap font-bold">$1,300 (pago único)</td>
<td class="px-6 py-4">Diseño, configuración, integraciones, QA, go-live</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Mantenimiento y Soporte</td>
<td class="px-6 py-4 whitespace-nowrap font-bold">$250/mes</td>
<td class="px-6 py-4">Soporte técnico, actualizaciones, operación continua</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-medium">Modelo de Éxito</td>
<td class="px-6 py-4 whitespace-nowrap font-bold">$0.99/interacción exitosa</td>
<td class="px-6 py-4">Pago solo por resultados (lead calificado, cotización)</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="plan-content" class="tab-content p-4 bg-white rounded-lg shadow-sm">
<p class="text-lg text-gray-700 mb-6">
Un proyecto exitoso requiere un plan claro. Aquí detallamos el cronograma de 7 semanas para la implementación, seguido del plan de escalamiento de marketing digital necesario para alcanzar los objetivos de generación de leads.
</p>
<h2 class="text-2xl font-bold text-blue-700 mb-4">Cronograma de Implementación (7 Semanas)</h2>
<div class="space-y-6">
<div class="border-l-4 border-blue-600 pl-4">
<h3 class="text-xl font-semibold text-blue-600">FASE 1: Preparación y Contratación (Semana 1)</h3>
<p class="text-gray-700">Definición de SLAs, "interacción exitosa", topes de costos y firma de contrato.</p>
<p class="text-sm font-medium text-red-600 mt-1">Hito Crítico: Tope costos variables ($500/mes) y SLA (99.5%) definidos.</p>
</div>
<div class="border-l-4 border-blue-600 pl-4">
<h3 class="text-xl font-semibold text-blue-600">FASE 2: Configuración Técnica (Semanas 2-5)</h3>
<p class="text-gray-700">Integración de APIs (WhatsApp, Cotizador, CRM). Configuración de flujos de IA, base de conocimiento y lead scoring.</p>
<p class="text-sm font-medium text-red-600 mt-1">Requiere de Mutual: Accesos API, documentación de productos, reglas de negocio.</p>
</div>
<div class="border-l-4 border-blue-600 pl-4">
<h3 class="text-xl font-semibold text-blue-600">FASE 3: Pruebas y Capacitación (Semanas 6-7)</h3>
<p class="text-gray-700">Pruebas QA con casos de uso reales, correcciones y capacitación a equipos de ventas y administradores.</p>
<p class="text-sm font-medium text-red-600 mt-1">Entregable: Sistema 100% funcional y equipo certificado.</p>
</div>
<div class="border-l-4 border-blue-600 pl-4">
<h3 class="text-xl font-semibold text-blue-600">FASE 4: Lanzamiento y Optimización (Mes 3)</h3>
<p class="text-gray-700">Go-live, monitoreo intensivo y inicio de optimización continua basada en KPIs reales.</p>
<p class="text-sm font-medium text-red-600 mt-1">KPIs: Tasa de resolución del bot, tiempo de respuesta, tasa de conversión.</p>
</div>
</div>
<h2 class="text-2xl font-bold text-blue-700 mt-8 mb-4">FASE 5: Escalamiento Marketing Digital (Meses 3-7)</h2>
<p class="text-gray-700 mb-4">Plan incremental para pasar de 133 a 200+ leads/mes.</p>
<ul class="list-decimal list-inside space-y-2">
<li><span class="font-semibold">Prioridad 1 (Mes 3):</span> Optimizar Facebook Ads + Activar WhatsApp Catalog. (Inversión: $200/mes)</li>
<li><span class="font-semibold">Prioridad 2 (Mes 4-5):</span> Lanzar Google Ads Search + Retargeting. (Inversión: $650/mes)</li>
<li><span class="font-semibold">Prioridad 3 (Mes 6-7):</span> SEO local + Blog + Programa de referidos. (Inversión: $800/mes)</li>
</ul>
</div>
<div id="roi-content" class="tab-content p-4 bg-white rounded-lg shadow-sm">
<p class="text-lg text-gray-700 mb-6">
El análisis financiero es clave. Esta sección desglosa la inversión total requerida (plataforma + marketing), el retorno esperado y un análisis de sensibilidad para entender los posibles escenarios.
</p>
<h2 class="text-2xl font-bold text-blue-700 mb-4">Inversión y Rentabilidad (Año 1)</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-xl font-bold text-blue-700 mb-2 text-center">Desglose Inversión Año 1: $15,251</h3>
<div class="chart-container" style="height: 300px; max-height: 350px;">
<canvas id="investmentChart"></canvas>
</div>
</div>
<div>
<h3 class="text-xl font-bold text-blue-700 mb-2 text-center">Análisis de Rentabilidad (Escenario Base)</h3>
<div class="grid grid-cols-2 gap-4 mt-8">
<div class="bg-blue-50 p-4 rounded-lg shadow-inner text-center">
<span class="text-sm text-blue-900 block">Inversión Total Año 1</span>
<span class="text-3xl font-bold text-blue-800">$15,251</span>
</div>
<div class="bg-green-50 p-4 rounded-lg shadow-inner text-center">
<span class="text-sm text-green-900 block">Ingresos Incrementales</span>
<span class="text-3xl font-bold text-green-700">$25,824</span>
</div>
<div class="bg-green-100 p-4 rounded-lg shadow-inner text-center col-span-2">
<span class="text-sm text-green-900 block">Beneficio Neto Año 1</span>
<span class="text-4xl font-bold text-green-800">$10,573</span>
</div>
<div class="bg-gray-50 p-4 rounded-lg shadow-inner text-center">
<span class="text-sm text-gray-500 block">ROI</span>
<span class="text-3xl font-bold text-gray-800">69.3%</span>
</div>
<div class="bg-gray-50 p-4 rounded-lg shadow-inner text-center">
<span class="text-sm text-gray-500 block">Punto de Equilibrio</span>
<span class="text-3xl font-bold text-gray-800">Mes 7</span>
</div>
</div>
</div>
</div>
<h2 class="text-2xl font-bold text-blue-700 mt-10 mb-4">Análisis de Sensibilidad (Beneficio Neto Año 1)</h2>
<p class="text-sm text-gray-600 mb-4 text-center">El proyecto es rentable en el escenario base (meta), pero depende críticamente de la ejecución del plan de marketing.</p>
<div class="chart-container">
<canvas id="sensitivityChart"></canvas>
</div>
</div>
<div id="riesgos-content" class="tab-content p-4 bg-white rounded-lg shadow-sm">
<p class="text-lg text-gray-700 mb-6">
Finalmente, revisamos los factores críticos para el éxito, los riesgos identificados con sus planes de mitigación, y los próximos pasos requeridos para la aprobación y arranque del proyecto.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h2 class="text-2xl font-bold text-blue-700 mb-4">Factores Críticos de Éxito</h2>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li class="font-semibold text-red-700">Volumen de leads (Crítico): Ejecutar plan de marketing incremental ($800/mes).</li>
<li class="font-semibold text-red-700">Calidad de leads (Crítico): Optimizar lead scoring y segmentación.</li>
<li>Optimización continua IA: Revisión semanal de conversaciones.</li>
<li>Velocidad de seguimiento: Alertas automáticas para equipo de ventas.</li>
</ul>
<h2 class="text-2xl font-bold text-blue-700 mt-8 mb-4">Aprobaciones y Próximos Pasos</h2>
<p class="font-semibold mb-2">Aprobaciones Requeridas:</p>
<ul class="list-none space-y-2 mb-4">
<li class="flex items-center"><span class="mr-2">☐</span> <span class="font-medium">Financiera:</span> $1,300 inicial + $1,050/mes promedio (Plataforma + Mkt)</li>
<li class="flex items-center"><span class="mr-2">☐</span> <span class="font-medium">Operativa:</span> Dedicar recursos internos y capacitar equipo.</li>
<li class="flex items-center"><span class="mr-2">☐</span> <span class="font-medium">Técnica:</span> Provisión de accesos API (cotizador, WA, CRM).</li>
</ul>
<p class="font-semibold mb-2">Acción Inmediata (Esta Semana):</p>
<ul class="list-decimal list-inside space-y-1">
<li>Agendar demo detallada con AI For The World.</li>
<li>Revisar contrato y SLAs propuestos con Legal Mutual.</li>
<li>Preparar documentación de productos.</li>
<li>Decisión final y firma de contrato.</li>
</ul>
</div>
<div>
<h2 class="text-2xl font-bold text-blue-700 mb-4">Matriz de Riesgos</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Riesgo</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Prob.</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Impacto</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Mitigación</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-3 font-medium">No alcanzar 200 leads/mes</td>
<td class="px-4 py-3">Media</td>
<td class="px-4 py-3 text-red-600">Alto</td>
<td class="px-4 py-3">Plan marketing incremental + monitoreo.</td>
</tr>
<tr>
<td class="px-4 py-3 font-medium">Costos variables exceden</td>
<td class="px-4 py-3">Baja</td>
<td class="px-4 py-3 text-yellow-600">Medio</td>
<td class="px-4 py-3">Tope contractual ($500/mes).</td>
</tr>
<tr>
<td class="px-4 py-3 font-medium">Calidad de leads baja</td>
<td class="px-4 py-3">Media</td>
<td class="px-4 py-3 text-red-600">Alto</td>
<td class="px-4 py-3">Lead scoring + ajuste campañas.</td>
</tr>
<tr>
<td class="px-4 py-3 font-medium">Resistencia equipo al cambio</td>
<td class="px-4 py-3">Baja</td>
<td class="px-4 py-3 text-yellow-600">Medio</td>
<td class="px-4 py-3">Capacitación intensiva + soporte.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const tabs = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
const subTabs = document.querySelectorAll('.sub-tab-button');
const subTabContents = document.querySelectorAll('.sub-tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(item => item.classList.remove('active'));
tab.classList.add('active');
const targetContent = document.getElementById(tab.dataset.tab + '-content');
tabContents.forEach(content => content.classList.remove('active'));
targetContent.classList.add('active');
});
});
subTabs.forEach(tab => {
tab.addEventListener('click', () => {
subTabs.forEach(item => item.classList.remove('active'));
tab.classList.add('active');
const targetContent = document.getElementById(tab.dataset.subtab + '-content');
subTabContents.forEach(content => content.classList.remove('active'));
targetContent.classList.add('active');
});
});
document.querySelector('.tab-button[data-tab="inicio"]').click();
document.querySelector('.sub-tab-button[data-subtab="financiero"]').click();
const chartOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
tooltip: {
mode: 'index',
intersect: false,
}
},
scales: {
x: {
stacked: false,
},
y: {
stacked: false,
beginAtZero: true
}
}
};
const wrapText = (ctx, text, maxWidth) => {
const words = text.split(' ');
let lines = [];
let currentLine = words[0];
for (let i = 1; i < words.length; i++) {
const word = words[i];
const width = ctx.measureText(currentLine + " " + word).width;
if (width < maxWidth) {
currentLine += " " + word;
} else {
lines.push(currentLine);
currentLine = word;
}
}
lines.push(currentLine);
return lines;
};
const renderFinancialChart = () => {
const ctx = document.getElementById('financialComparisonChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['AI For The World', 'S1erra Studio', 'ITIS Support'],
datasets: [
{
label: 'Costo Total Año 1 ($)',
data: [7864, 10256, 14160],
backgroundColor: 'rgba(59, 130, 246, 0.7)',
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 1
},
{
label: 'Beneficio Neto Año 1 ($)',
data: [10559, 8167, 4263],
backgroundColor: 'rgba(16, 185, 129, 0.7)',
borderColor: 'rgba(16, 185, 129, 1)',
borderWidth: 1
}
]
},
options: { ...chartOptions, plugins: { ...chartOptions.plugins, title: { display: true, text: 'Costo Total vs. Beneficio Neto (Año 1)' } } }
});
};
const renderBreakevenChart = () => {
const ctx = document.getElementById('breakevenChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['AI For The World', 'S1erra Studio', 'ITIS Support'],
datasets: [
{
label: 'Punto de Equilibrio (Meses)',
data: [1.3, 6.7, 9.0],
backgroundColor: 'rgba(239, 68, 68, 0.7)',
borderColor: 'rgba(239, 68, 68, 1)',
borderWidth: 1
}
]
},
options: { ...chartOptions, indexAxis: 'y', plugins: { ...chartOptions.plugins, title: { display: true, text: 'Punto de Equilibrio (Meses)' } } }
});
};
const renderMatrixChart = () => {
const ctx = document.getElementById('matrixChart').getContext('2d');
new Chart(ctx, {
type: 'radar',
data: {
labels: ['ROI y Rentabilidad', 'Riesgo Financiero', 'Capacidades Técnicas', 'Time-to-Value', 'Soporte y Servicio'],
datasets: [
{
label: 'AI For The World (9.2)',
data: [10, 10, 9, 10, 8],
fill: true,
backgroundColor: 'rgba(16, 185, 129, 0.2)',
borderColor: 'rgba(16, 185, 129, 1)',
pointBackgroundColor: 'rgba(16, 185, 129, 1)',
},
{
label: 'S1erra Studio (7.8)',
data: [7, 6, 8, 7, 9],
fill: true,
backgroundColor: 'rgba(59, 130, 246, 0.2)',
borderColor: 'rgba(59, 130, 246, 1)',
pointBackgroundColor: 'rgba(59, 130, 246, 1)',
},
{
label: 'ITIS Support (6.5)',
data: [4, 5, 9, 5, 9],
fill: true,
backgroundColor: 'rgba(107, 114, 128, 0.2)',
borderColor: 'rgba(107, 114, 128, 1)',
pointBackgroundColor: 'rgba(107, 114, 128, 1)',
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'top' },
title: { display: true, text: 'Matriz de Evaluación Final (Puntaje /10)' }
},
scales: {
r: {
beginAtZero: true,
max: 10,
ticks: { stepSize: 2 }
}
}
}
});
};
const renderInvestmentChart = () => {
const ctx = document.getElementById('investmentChart').getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Plataforma AI Gloria ($7,151)', 'Marketing Digital Incremental ($8,100)'],
datasets: [{
data: [7151, 8100],
backgroundColor: ['rgba(59, 130, 246, 0.8)', 'rgba(234, 179, 8, 0.8)'],
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom' },
title: { display: false }
}
}
});
};
const renderSensitivityChart = () => {
const ctx = document.getElementById('sensitivityChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Conservador (150 leads, 10%)', 'Base (200 leads, 12%)', 'Optimista (250 leads, 15%)'],
datasets: [
{
label: 'Beneficio Neto Año 1 ($)',
data: [-3155, 10573, 27841],
backgroundColor: (context) => {
const value = context.raw;
return value < 0 ? 'rgba(239, 68, 68, 0.7)' : 'rgba(16, 185, 129, 0.7)';
},
borderColor: (context) => {
const value = context.raw;
return value < 0 ? 'rgba(239, 68, 68, 1)' : 'rgba(16, 185, 129, 1)';
},
borderWidth: 1
}
]
},
options: { ...chartOptions, plugins: { ...chartOptions.plugins, title: { display: true, text: 'Análisis de Sensibilidad (Beneficio Neto)' } } }
});
};
renderFinancialChart();
renderBreakevenChart();
renderMatrixChart();
renderInvestmentChart();
renderSensitivityChart();
});
</script>
</body>
</html>
