import { useState } from "react"; const phases = [ { id: "pipeline", label: "Pipeline", icon: "⬡" }, { id: "qualificacion", label: "Cualificación", icon: "◈" }, { id: "outreach", label: "Outreach", icon: "◎" }, { id: "llamada", label: "Llamada", icon: "△" }, { id: "propuesta", label: "Propuesta", icon: "▣" }, { id: "cierre", label: "Cierre", icon: "◆" }, { id: "upsell", label: "Retención", icon: "✦" }, ]; const styles = ` @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } .os-root { min-height: 100vh; background: #080c10; color: #e2e8f0; font-family: 'Syne', sans-serif; position: relative; overflow-x: hidden; } .os-root::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 40% at 80% 10%, rgba(0,212,170,0.04) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 10% 90%, rgba(99,102,241,0.05) 0%, transparent 50%); pointer-events: none; z-index: 0; } .grid-bg { position: fixed; inset: 0; background-image: linear-gradient(rgba(0,212,170,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,170,0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } .os-inner { position: relative; z-index: 1; } /* HEADER */ .os-header { border-bottom: 1px solid rgba(0,212,170,0.15); padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; background: rgba(8,12,16,0.8); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; } .os-logo { display: flex; flex-direction: column; gap: 2px; } .os-logo-name { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: #00d4aa; letter-spacing: 0.25em; text-transform: uppercase; } .os-logo-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: #f1f5f9; } .os-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #00d4aa; border: 1px solid rgba(0,212,170,0.3); padding: 4px 10px; letter-spacing: 0.15em; background: rgba(0,212,170,0.05); } /* NAV */ .os-nav { display: flex; gap: 2px; padding: 16px 28px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255,255,255,0.05); } .os-nav::-webkit-scrollbar { display: none; } .nav-btn { display: flex; align-items: center; gap: 7px; padding: 8px 16px; background: transparent; border: 1px solid transparent; color: #64748b; font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; white-space: nowrap; transition: all 0.15s; } .nav-btn:hover { color: #94a3b8; border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); } .nav-btn.active { color: #00d4aa; border-color: rgba(0,212,170,0.3); background: rgba(0,212,170,0.06); } .nav-icon { font-size: 14px; } .nav-num { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #334155; margin-left: 2px; } .nav-btn.active .nav-num { color: rgba(0,212,170,0.5); } /* CONTENT */ .os-content { padding: 28px; max-width: 960px; } /* SECTION HEADERS */ .section-header { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 28px; } .section-number { font-family: 'JetBrains Mono', monospace; font-size: 60px; font-weight: 300; color: rgba(0,212,170,0.08); line-height: 1; letter-spacing: -0.04em; } .section-title-block {} .section-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #00d4aa; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 4px; } .section-title { font-size: 28px; font-weight: 800; color: #f1f5f9; letter-spacing: -0.03em; line-height: 1.1; } /* CARDS */ .card { background: rgba(15,23,35,0.8); border: 1px solid rgba(255,255,255,0.06); padding: 20px 22px; margin-bottom: 12px; } .card:hover { border-color: rgba(0,212,170,0.15); } .card-title { font-size: 13px; font-weight: 700; color: #00d4aa; letter-spacing: 0.05em; margin-bottom: 10px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; } .card-title-dot { width: 6px; height: 6px; background: #00d4aa; border-radius: 50%; flex-shrink: 0; } .card-body { font-size: 14px; color: #94a3b8; line-height: 1.65; } .card-body strong { color: #e2e8f0; font-weight: 600; } /* PIPELINE */ .pipeline-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 24px; } .pipe-stage { background: rgba(15,23,35,0.8); border: 1px solid rgba(255,255,255,0.06); padding: 14px 10px; text-align: center; cursor: pointer; transition: all 0.15s; position: relative; } .pipe-stage::after { content: '→'; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #1e293b; z-index: 2; } .pipe-stage:last-child::after { display: none; } .pipe-stage:hover { border-color: rgba(0,212,170,0.3); background: rgba(0,212,170,0.04); } .pipe-stage.active-stage { border-color: #00d4aa; background: rgba(0,212,170,0.08); } .pipe-icon { font-size: 18px; margin-bottom: 6px; } .pipe-name { font-size: 10px; font-weight: 700; color: #64748b; letter-spacing: 0.08em; text-transform: uppercase; } .pipe-stage.active-stage .pipe-name { color: #00d4aa; } .pipe-rate { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; color: #475569; margin-top: 4px; } .pipe-stage.active-stage .pipe-rate { color: #00d4aa; } /* CRITERIA */ .criteria-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .criterion { background: rgba(15,23,35,0.8); border: 1px solid rgba(255,255,255,0.06); padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; cursor: pointer; transition: all 0.15s; } .criterion:hover { border-color: rgba(0,212,170,0.2); } .criterion.checked { border-color: rgba(0,212,170,0.35); background: rgba(0,212,170,0.04); } .criterion-check { width: 20px; height: 20px; border: 1.5px solid #334155; border-radius: 3px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; transition: all 0.15s; margin-top: 1px; } .criterion.checked .criterion-check { background: #00d4aa; border-color: #00d4aa; color: #080c10; } .criterion-text {} .criterion-name { font-size: 13px; font-weight: 700; color: #e2e8f0; margin-bottom: 4px; } .criterion-desc { font-size: 12px; color: #64748b; line-height: 1.5; } .criterion.checked .criterion-name { color: #00d4aa; } .qual-score { margin-top: 16px; background: rgba(15,23,35,0.8); border: 1px solid rgba(255,255,255,0.06); padding: 14px 18px; display: flex; align-items: center; gap: 14px; } .score-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #64748b; letter-spacing: 0.15em; } .score-bar { flex: 1; height: 4px; background: #1e293b; border-radius: 2px; overflow: hidden; } .score-fill { height: 100%; background: #00d4aa; border-radius: 2px; transition: width 0.3s; } .score-verdict { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 2px; } .verdict-no { background: rgba(239,68,68,0.15); color: #ef4444; } .verdict-maybe { background: rgba(234,179,8,0.15); color: #eab308; } .verdict-yes { background: rgba(0,212,170,0.15); color: #00d4aa; } /* SCRIPTS */ .script-box { background: rgba(8,12,16,0.9); border: 1px solid rgba(0,212,170,0.15); border-left: 3px solid #00d4aa; padding: 16px 20px; margin: 10px 0; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #94a3b8; line-height: 1.8; position: relative; } .script-box strong { color: #e2e8f0; } .script-box em { color: #00d4aa; font-style: normal; } .script-tag { font-size: 9px; letter-spacing: 0.2em; color: #00d4aa; text-transform: uppercase; margin-bottom: 10px; font-family: 'Syne', sans-serif; font-weight: 700; opacity: 0.7; } .copy-btn { position: absolute; top: 10px; right: 12px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; color: #334155; background: transparent; border: 1px solid #1e293b; padding: 3px 8px; cursor: pointer; transition: all 0.15s; } .copy-btn:hover { color: #00d4aa; border-color: rgba(0,212,170,0.3); } /* CALL FRAMEWORK */ .call-timeline { position: relative; padding-left: 28px; } .call-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, #00d4aa, rgba(0,212,170,0.1)); } .call-step { position: relative; margin-bottom: 18px; background: rgba(15,23,35,0.8); border: 1px solid rgba(255,255,255,0.06); padding: 14px 16px; transition: all 0.15s; } .call-step::before { content: ''; position: absolute; left: -24px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: #1e293b; border: 2px solid #334155; } .call-step:hover { border-color: rgba(0,212,170,0.2); } .call-step:hover::before { border-color: #00d4aa; background: rgba(0,212,170,0.2); } .call-step-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .call-step-name { font-size: 13px; font-weight: 700; color: #e2e8f0; } .call-step-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #00d4aa; letter-spacing: 0.1em; } .call-step-content { font-size: 13px; color: #64748b; line-height: 1.6; } .call-step-content strong { color: #94a3b8; } /* OBJECTIONS */ .objection-item { background: rgba(15,23,35,0.8); border: 1px solid rgba(255,255,255,0.06); margin-bottom: 10px; overflow: hidden; cursor: pointer; } .objection-q { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #94a3b8; font-weight: 600; } .objection-q::before { content: '"'; color: rgba(239,68,68,0.4); font-size: 20px; margin-right: 10px; flex-shrink: 0; } .objection-chevron { font-size: 10px; color: #334155; transition: transform 0.2s; } .objection-item.open .objection-chevron { transform: rotate(180deg); } .objection-a { padding: 0 18px; max-height: 0; overflow: hidden; transition: all 0.25s; } .objection-item.open .objection-a { padding: 4px 18px 16px; max-height: 200px; } .objection-a-inner { background: rgba(0,212,170,0.04); border-left: 2px solid #00d4aa; padding: 12px 14px; font-size: 12.5px; color: #94a3b8; line-height: 1.65; font-family: 'JetBrains Mono', monospace; } .objection-a-inner strong { color: #00d4aa; } /* PROPUESTA */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } .price-tier { background: rgba(15,23,35,0.8); border: 1px solid rgba(255,255,255,0.06); padding: 20px 16px; text-align: center; transition: all 0.15s; } .price-tier.featured { border-color: rgba(0,212,170,0.4); background: rgba(0,212,170,0.05); } .price-tier:hover { border-color: rgba(0,212,170,0.25); } .tier-name { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: #475569; text-transform: uppercase; margin-bottom: 10px; } .price-tier.featured .tier-name { color: #00d4aa; } .tier-price { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 500; color: #f1f5f9; margin-bottom: 4px; } .tier-setup { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #475569; margin-bottom: 14px; } .tier-features { text-align: left; } .tier-feat { font-size: 11.5px; color: #64748b; padding: 5px 0; border-top: 1px solid rgba(255,255,255,0.04); display: flex; gap: 8px; align-items: flex-start; } .tier-feat::before { content: '—'; color: rgba(0,212,170,0.4); flex-shrink: 0; } .price-tier.featured .tier-feat { color: #94a3b8; } /* UPSELL */ .upsell-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .upsell-card { background: rgba(15,23,35,0.8); border: 1px solid rgba(255,255,255,0.06); padding: 16px 18px; } .upsell-title { font-size: 12px; font-weight: 700; color: #e2e8f0; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .upsell-trigger { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #00d4aa; margin-bottom: 10px; } .upsell-desc { font-size: 12px; color: #64748b; line-height: 1.5; } .upsell-val { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #475569; margin-top: 8px; } /* TABS within sections */ .subtabs { display: flex; gap: 4px; margin-bottom: 16px; } .subtab { padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #475569; background: transparent; border: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: all 0.15s; } .subtab.active { color: #080c10; background: #00d4aa; border-color: #00d4aa; } .subtab:hover:not(.active) { color: #94a3b8; border-color: rgba(255,255,255,0.1); } /* MISC */ .divider { border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 20px 0; } .tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; margin-right: 6px; } .tag-green { background: rgba(0,212,170,0.12); color: #00d4aa; } .tag-yellow { background: rgba(234,179,8,0.1); color: #eab308; } .tag-red { background: rgba(239,68,68,0.1); color: #ef4444; } .tag-blue { background: rgba(99,102,241,0.12); color: #818cf8; } .note-box { background: rgba(234,179,8,0.04); border: 1px solid rgba(234,179,8,0.15); border-left: 3px solid #eab308; padding: 12px 16px; font-size: 12px; color: #a16207; line-height: 1.6; margin: 12px 0; } .note-box strong { color: #eab308; } @media (max-width: 640px) { .pipeline-row { grid-template-columns: repeat(4, 1fr); } .criteria-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .upsell-row { grid-template-columns: 1fr; } .os-content { padding: 16px; } } `; const criteriaList = [ { name: "Dueño responde directamente", desc: "No hay recepcionista/filtro. El que decide es el que atiende el WhatsApp o el DM.", }, { name: "Pain point documentado", desc: "Confirmado en Google Reviews o en bio de Instagram, no inferido. Quejas de espera, no contestar, reservas perdidas.", }, { name: "ROI obvio desde 1 reserva", desc: "Un servicio de ticket alto (>150€) recuperado = setup pagado. El número tiene que ser evidente sin cálculo.", }, { name: "Urgencia estacional", desc: "El verano se les viene encima. Julio-Agosto es su temporada. Si lo instalan ahora cogen toda la temporada.", }, { name: "WhatsApp activo como canal", desc: "Ya tienen un número de negocio o lo usan para reservas. No necesitan cambiar comportamiento.", }, ]; const objections = [ { q: "No tengo tiempo para esto ahora mismo", a: `Ese es exactamente el problema. Ahora mismo, cada día que no tienes el sistema activo estás perdiendo reservas de gente que te escribe por WhatsApp o Instagram y no obtiene respuesta. El setup lo hago yo, tú solo me dedicas 30 minutos. El primer mes lo recuperas solo con las reservas que habría perdido.`, }, { q: "Es muy caro / no me llega el presupuesto", a: `Entiendo. Dime una cosa: ¿cuánto vale un cliente tuyo de media? Si es una embarcación de 4 horas a 200€, con que el sistema recupere dos reservas al mes ya cubre su coste. No es un gasto, es el sistema que convierte interés en dinero real.`, }, { q: "Ya tenemos a alguien que gestiona las reservas", a: `Perfecto. Este sistema no reemplaza a esa persona, la multiplica. Tu equipo no puede estar despierto a las 11pm cuando un turista desde Alemania pregunta disponibilidad. El bot cierra la ventana de interés, ellos gestionan la logística. Menos fricción, más cierres.`, }, { q: "¿Y si falla el sistema?", a: `Buen punto. Por eso el bot siempre tiene un fallback humano configurado: si no puede resolver, escala a vosotros directamente. No hay riesgo de dejar a un cliente en el aire. Además incluyo soporte el primer mes para ajustar cualquier caso edge.`, }, { q: "Necesito pensarlo / hablarlo con mi socio", a: `Por supuesto. Una pregunta: ¿qué información le faltaría a tu socio para tomar la decisión? Si me lo dices te preparo un resumen ejecutivo de 1 página con el ROI estimado y los casos reales. Así la conversación la tienes en 5 minutos.`, }, { q: "¿Tú eres el único que lo sabe arreglar si hay un problema?", a: `No. El sistema corre en infraestructura estándar (n8n + WhatsApp Business API). Si en algún momento decides cambiar de proveedor, todo el código es tuyo y está documentado. No eres rehén de nada.`, }, ]; function CopyButton({ text }) { const [copied, setCopied] = useState(false); return ( ); } function PipelineView() { const stages = [ { icon: "🎯", name: "Lead", rate: "∞" }, { icon: "✓", name: "Cualif.", rate: "~30%" }, { icon: "💬", name: "Contacto", rate: "~60%" }, { icon: "📞", name: "Llamada", rate: "~40%" }, { icon: "📄", name: "Propuesta", rate: "~70%" }, { icon: "🤝", name: "Cierre", rate: "~50%" }, { icon: "↑", name: "Upsell", rate: "~40%" }, ]; return (
01
Sistema de Ventas
Pipeline Overview
{stages.map((s, i) => (
{s.icon}
{s.name}
{s.rate}
))}
Canales de entrada
Canal 1 — Contenido orgánico (IG/TikTok @beltranintelligence)
Atracción → ManyChat comment trigger → DM automatizado → Cualificación → Tú cierras.

Canal 2 — Cold outreach activo
Lead scraper ("busca negocios de X en Y") → Revisión manual de los 5 criterios → WhatsApp/DM frío → Llamada → Cierre.

Canal 3 — Boca a oreja + referidos
Clientes activos que refieren. Cada cliente entregado debe saber que tienes un programa de referidos (50€–100€ por cierre). Actívalo desde el mes 1.
Métricas objetivo (mensual)
Leads prospectados: 80–120 negocios revisados manualmente.
Cualificados (5/5 criterios): ~25–35 leads de calidad.
Contactados: ~25–35 mensajes enviados.
Respuestas: ~8–15 (tasa objetivo >30% con outreach segmentado).
Llamadas: ~5–8 calls cerradas.
Cierres: 2–4 clientes nuevos. Con ticket medio de 800€ setup + 150€/mes → 1.600€–3.200€ mensuales.
Regla de oro: Nunca contactes a un lead sin haber confirmado los 5 criterios. El problema anterior de 0 respuestas venía de volumen sin cualificación. Calidad sobre cantidad, siempre.
); } function CualificacionView() { const [checked, setChecked] = useState([]); const toggle = (i) => { setChecked((prev) => prev.includes(i) ? prev.filter((x) => x !== i) : [...prev, i]); }; const score = checked.length; const pct = (score / 5) * 100; const verdict = score === 5 ? "CONTACTAR YA" : score >= 3 ? "REVISAR MÁS" : "DESCARTAR"; const verdictClass = score === 5 ? "verdict-yes" : score >= 3 ? "verdict-maybe" : "verdict-no"; return (
02
Filtro de Lead
Los 5 Criterios
Usa este checklist antes de contactar a cualquier negocio. Si no pasa todos los criterios, pasa al siguiente. El tiempo es el recurso más escaso.
{criteriaList.map((c, i) => (
toggle(i)}>
{checked.includes(i) ? "✓" : ""}
{c.name}
{c.desc}
))}
{score}/5 CRITERIOS
{verdict}

Sectores prioritarios ahora mismo
ALTA PRIORIDAD Náutica y ocio de alto ticket en Baleares (embarcaciones, chárter, excursiones).

ALTA PRIORIDAD Detailing multi-empleado en Andalucía y Valencia (PPF, ceramic, wrapping).

MEDIA Clínicas estéticas, fisioterapia y centros de salud privados con citas.

MEDIA Academias de formación, autoescuelas, centros deportivos.

EXPANSIÓN Restaurantes con reservas propias (sin Covermanager/TheFork) en zonas turísticas.
); } function OutreachView() { const [tab, setTab] = useState("whatsapp"); const waScript = `Hola [Nombre] 👋 Vi que tenéis [servicio] en [zona] y tengo una pregunta directa: ¿Cuántas consultas recibes por WhatsApp o Instagram que no se convierten en reserva porque nadie responde a tiempo? Ayudo a negocios como el tuyo a automatizar esa parte con IA. El bot responde al instante, recoge los datos del cliente y agenda directamente en tu calendario. Sin coste de personal extra. Sin perder reservas por las noches o fines de semana. ¿Tienes 15 minutos esta semana para que te lo enseñe?`; const dmScript = `Hola [Nombre] 👋 Vi [detalle específico de su cuenta/bio/reviews] y me surgió la duda directa: ¿Cuántas reservas creéis que perdéis porque los clientes preguntan fuera de horario y no hay respuesta? Trabajo con negocios de [sector] automatizando ese proceso con IA. La respuesta es inmediata, la reserva se agenda sola, y vosotros solo gestionáis los confirmados. ¿Te interesa ver cómo funciona en 10 minutos?`; const followUp1 = `Hola [Nombre], te escribí hace unos días sobre automatizar las reservas. Entiendo que estáis a tope, por eso lo digo rápido: Uno de mis clientes en [sector similar] recuperó [X reservas/€X] el primer mes. ¿Vale la pena explorar si os puede pasar lo mismo? 5 minutos por videollamada.`; const followUp2 = `Último mensaje, lo prometo. Dejé un vídeo corto mostrando cómo funciona el sistema para negocios como el vuestro: [enlace a Reel/TikTok relevante] Si alguna vez queréis verlo en directo, aquí estaré. Que vaya bien la temporada 🙌`; const callOpener = `"Hola, buenos días, ¿hablo con [Nombre/el responsable del negocio]?" [Confirman] "Perfecto, te llamo brevemente — soy Aitor, trabajo con negocios de [sector] en [zona] ayudándoles a no perder reservas cuando no pueden atender el teléfono o el WhatsApp. Te pregunto directo porque no quiero quitarte tiempo: ¿os pasa que a veces os escriben o llaman y no podéis responder a tiempo y la reserva se cae?"`; const callPitch = `[Si dicen SÍ] "Exactamente eso es lo que soluciono. Tengo un sistema de IA que responde al instante, recoge los datos del cliente y agenda solo en vuestro calendario — sin que vosotros tengáis que hacer nada. ¿Tienes 15 minutos esta semana para que te lo enseñe por videollamada? Te muestro cómo funciona con un negocio de [sector] real." [Si dicen NO / "nosotros sí respondemos"] "Me alegra escucharlo, eso ya os diferencia. La mayoría no llegan a tiempo. En ese caso, ¿tenéis ya algún sistema para responder fuera de horario, fines de semana o cuando estáis con un cliente?" → Escucha. Casi siempre hay un hueco ahí.`; const callObjection = `[Si dicen "no me interesa" o "ya tenemos de todo"] "Entendido, no te robo más tiempo. Solo una última cosa: ¿estaría bien que te mandara un vídeo de 2 minutos mostrando cómo funciona para que lo tengas de referencia? Sin compromiso, por si en algún momento os surge la necesidad." → Si dicen sí: envía el Reel/TikTok más relevante por WhatsApp o email. → Si dicen no: agradece y cierra con elegancia. Anota para reintentar en 6 semanas.`; return (
03
Primer Contacto
Scripts de Outreach
{["whatsapp", "instagram", "llamada", "followup"].map((t) => ( ))}
{tab === "whatsapp" && ( <>
Timing: Lunes–Miércoles, 10:00–11:30 o 16:00–17:30. Evitar viernes tarde y fines de semana para negocios de hostelería (máximo caos operativo).

Tono: Directo y específico. Nunca genérico. El mensaje tiene que demostrar que conoces su negocio en la primera línea.
Mensaje inicial — WhatsApp
{waScript.split("\n").map((line, i) => (
{line ||
}
))}
Personalización obligatoria: El nombre del negocio, la zona, y el detalle específico (ej: "vi que tenéis reviews mencionando que 'no siempre contestan'"). Sin esto, la tasa de respuesta cae al <5%.
)} {tab === "instagram" && ( <>
Cuándo usar DM de Instagram: Cuando el negocio tiene presencia activa en IG pero no aparece un WhatsApp Business claro. También como canal secundario si no responden al WA.

Regla: Siempre referencia algo específico de su cuenta (publicación reciente, bio, una review que viste). Nunca copy-paste genérico.
Mensaje inicial — Instagram DM
{dmScript.split("\n").map((line, i) => (
{line ||
}
))}
)} {tab === "llamada" && ( <>
Cuándo llamar en frío: Cuando tienes el número de teléfono del negocio y prefieres el contacto directo, o como canal de seguimiento si el WA no ha tenido respuesta en 5+ días.

Timing: Martes–Jueves, 10:00–11:00 o 16:30–18:00. Evita lunes por la mañana y viernes tarde. Nunca en horario de comida (14:00–16:00).

Objetivo de la llamada: No vender. Conseguir una videollamada de 15 minutos. Nada más.
Apertura — Los primeros 20 segundos
{callOpener.split("\n").map((line, i) => (
{line ||
}
))}
Pitch y cierre a videollamada
{callPitch.split("\n").map((line, i) => (
{line ||
}
))}
Gestión del "no me interesa"
{callObjection.split("\n").map((line, i) => (
{line ||
}
))}
Regla de oro en llamada fría: Si en los primeros 30 segundos no has conseguido que digan algo más que "sí" o "no", estás monologando. Para, pregunta, escucha. La llamada ideal dura 3–5 minutos y termina con una fecha de videollamada confirmada.
Follow-up tras llamada sin respuesta — WhatsApp / Día 1
{`Hola [Nombre], soy Aitor — te llamé antes pero no pude pillarte. Te escribo rápido por aquí: trabajo con negocios de [sector] en [zona] automatizando la gestión de reservas con IA para no perder clientes cuando no se puede atender. ¿Tienes 15 minutos esta semana para que te lo explique por videollamada?`.split("\n").map((line, i) => (
{line ||
}
))}
Follow-up tras llamada con interés pero sin fecha — Día 3
{`Hola [Nombre], hablamos el [día] sobre automatizar las reservas de [negocio]. Te mando esto para que lo veas antes de la llamada: [enlace a Reel/demo/caso real] ¿Te va bien el [día] a las [hora] para la videollamada?`.split("\n").map((line, i) => (
{line ||
}
))}
Follow-up tras llamada con fecha acordada — 1h antes
{`Hola [Nombre] 👋 Te confirmo nuestra videollamada hoy a las [hora]. Aquí el enlace para entrar: [Google Meet / Zoom] Nos vemos en un rato.`.split("\n").map((line, i) => (
{line ||
}
))}
)} {tab === "followup" && ( <>
Cadencia de seguimiento: Día 0 → mensaje inicial. Día 4 → Follow-up 1. Día 10 → Follow-up 2 (cierre). Si no hay respuesta, archivar y volver en 6 semanas (cambio de contexto estacional).
Follow-up 1 — Día 4
{followUp1.split("\n").map((line, i) => (
{line ||
}
))}
Follow-up 2 — Día 10 (cierre)
{followUp2.split("\n").map((line, i) => (
{line ||
}
))}
)}
); } function LlamadaView() { const steps = [ { name: "Apertura y rapport", time: "MIN 0–3", content: `"Antes de nada, muchas gracias por el tiempo." Confirmar que tienen 20–30 min. Pregunta rompehielos sobre el negocio: ¿lleváis mucho tiempo en [zona]? ¿Cómo está siendo esta temporada?`, }, { name: "Diagnóstico del problema", time: "MIN 3–12", content: `Preguntas de descubrimiento:
• "¿Cuántos mensajes de WhatsApp/DM recibes a la semana preguntando por disponibilidad o precios?"
• "¿Qué porcentaje diríais que acaban reservando vs. los que preguntan?"
• "¿Tenéis alguien dedicado a responder esos mensajes o lo hacéis vosotros directamente?"
• "¿Ha habido veces que una reserva se ha caído por no responder a tiempo?"

Escucha más de lo que hablas. Anota los números exactos que digan.`, }, { name: "Demo mental / impacto", time: "MIN 12–18", content: `"Deja que te enseñe cómo funciona exactamente."

Muestra: flujo WhatsApp → bot responde → recoge datos → agenda en calendario → confirmación automática → si hay pago, link de Stripe.

Luego haz el cálculo en voz alta: "Si recuperáis 3 reservas al mes que antes se perdían, a [su precio medio], eso son [X€]. El sistema cuesta [Y€]/mes."`, }, { name: "Manejo de fricciones", time: "MIN 18–24", content: `No esperes a que pregunten. Anticipa:
• "Sé que lo primero que os preguntáis es cuánto tiempo os lleva a vosotros. La respuesta es 30 minutos de onboarding y listo."
• "Y si en algún momento queréis cambiarlo, todo es vuestro."

Si hay objeciones, usa el banco de respuestas (sección Cierre).`, }, { name: "Cierre / próximo paso", time: "MIN 24–30", content: `Nunca cierres con "¿Te lo piensas?"

Cierre directo: "¿Qué necesitas para decir que sí hoy?"
Cierre de urgencia: "Estoy cogiendo 2 clientes más este mes para tener el setup listo antes de julio. Si lo cerramos esta semana, te garantizo que estáis activos para la temporada alta."

Si piden tiempo: pide una fecha concreta para la respuesta y envía propuesta en menos de 2h.`, }, ]; return (
04
Discovery Call
Framework de Llamada
Objetivo de la llamada: Que el cliente se diagnostique a sí mismo. Tu trabajo es hacer las preguntas correctas y calcular su ROI en voz alta delante de ellos. Quien habla más pierde.

Antes de la llamada: Revisa su perfil, sus reviews, su Instagram. Entra sabiendo 1–2 puntos de dolor concretos para poder nombrarlos.
{steps.map((s, i) => (
{s.name}
{s.time}
))}
); } function PropuestaView() { return (
05
Oferta Comercial
Propuesta y Pricing
Starter
600€
+ 300€/mes mantenimiento
{["Bot WhatsApp con FAQ + captación de lead", "Integración Google Calendar", "Flujo de confirmación automático", "Soporte 30 días"].map((f, i) => (
{f}
))}
⭐ Advanced (recomendado)
900€
+ 500€/mes mantenimiento
{["Todo lo de Starter", "Cobro online integrado (Stripe)", "Voice agent para llamadas perdidas", "CRM básico en Google Sheets", "Reportes mensuales de conversión", "Soporte 60 días prioritario"].map((f, i) => (
{f}
))}
Expert
1.700€
+ 900€/mes mantenimiento
{["Todo lo de Advanced", "Múltiples canales (WA + IG + web)", "Agente de voz avanzado (Vapi)", "Integración Odoo/CRM existente", "Formación al equipo", "SLA garantizado"].map((f, i) => (
{f}
))}
Estructura de la propuesta (enviar en <2h)
1. El problema (su problema, con sus palabras): Resume lo que dijeron en la llamada. Que se vean reflejados.

2. El impacto económico: Calcula en €/mes lo que están perdiendo. Hazlo conservador para que sea creíble.

3. La solución: Explica el sistema en 3 bullets. Sin tecnicismos. Qué hace, no cómo lo hace.

4. El plan de implementación: Semana 1: setup. Semana 2: pruebas. Semana 3: live.

5. La inversión: Una opción recomendada y una alternativa. No des tres opciones iguales de precio similar.

6. Garantía: "Si en 30 días no ves una mejora medible, te devuelvo el setup." (Esto cierra muchas dudas.)
Formato: PDF de 1–2 páginas o Notion page compartida. Nunca un email largo de texto. El primero que responde después del silencio pierde posición: envía la propuesta y espera mínimo 24h antes del primer follow-up.
); } function CierreView() { const [open, setOpen] = useState(null); return (
06
Gestión de Objeciones
Banco de Respuestas
Principio: Toda objeción es una petición de más información o más confianza, nunca un "no" definitivo. Responde con calma, empatía y una pregunta que devuelva el control. Pulsa cada objeción para ver la respuesta.
{objections.map((o, i) => (
setOpen(open === i ? null : i)}>
{o.q}
))}
Señales de compra — actúa aquí
"¿Y cuánto tardáis en tenerlo listo?" → Están imaginando que lo tienen. Cierra ahora.

"¿Podríais empezar en [fecha concreta]?" → Ya están planificando. Dales esa fecha si es viable.

"¿Qué necesito para empezar?" → Pregunta directa de cierre. Responde: "Tu firma y el 50% del setup. Lo demás lo gestiono yo."

"¿Y si lo probamos un mes?" → Acepta. Un cliente que prueba y ve resultados renueva el 80% de las veces.

Próximos pasos — cliente cerrado
🟢 En la llamada misma, antes de colgar:
Confirma en voz alta: plan contratado, fecha de inicio, y quién será el contacto técnico de su lado (acceso al WA Business, Google Calendar, etc.).

"Perfecto, entonces arrancamos el [fecha]. Te mando ahora mismo un mensaje con los próximos pasos para que lo tengas por escrito."
WA post-cierre — enviar en los primeros 30 min
{`¡Hola [Nombre]! 🙌 Encantado de trabajar juntos. Te resumo los próximos pasos para arrancar: 1️⃣ Te envío el contrato/presupuesto por email para que lo firmes (2 min). 2️⃣ Una vez firmado, te paso el link de pago del 50% inicial. 3️⃣ Me mandas acceso a: número de WhatsApp Business + Google Calendar (o me dices cómo lo gestionáis). 4️⃣ Agendamos una sesión de onboarding de 30 min para repasar el flujo juntos. Objetivo: sistema activo antes del [fecha límite acordada]. Cualquier duda aquí estoy. ¡Vamos! 🚀`.split("\n").map((line, i) => (
{line ||
}
))}
WA si no firman/pagan en 24h — recordatorio suave
{`Hola [Nombre], ¿todo bien? Te escribo porque quiero asegurarme de reservar tu slot esta semana para tener todo listo antes de [fecha urgencia — ej: "el puente de mayo" / "julio"]. ¿Pudiste revisar el contrato? Si tienes alguna duda antes de firmarlo, dímela y la resolvemos ahora.`.split("\n").map((line, i) => (
{line ||
}
))}
Checklist de onboarding (semana 1)
□ Contrato firmado y 50% cobrado — No empieces sin esto.

□ Accesos recibidos — WhatsApp Business API / número, Google Calendar, Stripe (si aplica).

□ Sesión de onboarding de 30 min — Repasar: FAQs del negocio, horarios, servicios, precios, excepciones.

□ Flujo montado y testeado internamente — Tú haces 3 pruebas antes de mostrárselo.

□ Demo en vivo con el cliente — Le enseñas el bot funcionando. Le pides feedback.

□ Sistema live — Activo y monitorizando las primeras 48h.

□ Check-in día 7 — WA breve: "¿Cómo va todo? ¿Ha habido alguna consulta que el bot no haya resuelto bien?"
Regla del 50/50: Siempre cobra el 50% al firmar y el 50% al entregar el sistema live. Nunca trabajes sin cobro inicial — filtra a los clientes no comprometidos y protege tu tiempo.

Próximos pasos — no cerrado
Hay 4 situaciones distintas de "no cierre". Cada una tiene su protocolo. No las trates igual.
{[ { situation: "\"Me lo tengo que pensar\"", tag: "NURTURE", tagClass: "tag-yellow", dos: [ "Pregunta: \"¿Qué es lo que necesitarías ver para tomar la decisión?\" — identifica el bloqueo real.", "Envía la propuesta por escrito si no lo has hecho aún (máx. 2h después de la llamada).", "Fija una fecha concreta: \"¿Te va bien que te llame el jueves?\" No dejes el seguimiento en el aire.", ], donts: [ "Llamar al día siguiente sin haber dado espacio.", "Reenviar la misma propuesta sin cambiar nada.", "Desaparecer sin fecha de contacto acordada.", ], followup: `Hola [Nombre], ¿pudiste darle una vuelta a lo que hablamos? Te pregunto porque quiero asegurarme de que tienes toda la información para decidir con tranquilidad. Si hay algo que no quedó claro o quieres ver algún ejemplo real, dímelo y te lo resuelvo ahora. ¿Hablamos el [día] a las [hora]?`, followupTag: "WA día 3 — si no hay respuesta", }, { situation: "\"Ahora no es el momento\"", tag: "REACTIVAR", tagClass: "tag-blue", dos: [ "Acepta sin presionar. Pregunta: \"¿Cuándo crees que sería mejor momento?\" — anota la fecha.", "Marca en tu CRM para contactar 2 semanas antes de esa fecha o del inicio de temporada.", "Manda contenido de valor (Reel, caso de éxito) cada 3–4 semanas para mantenerte presente.", ], donts: [ "Insistir en la misma semana. Quemarás el contacto.", "Desaparecer completamente — en 6 semanas habrán olvidado quién eres.", "Volver con el mismo pitch exacto. Adapta el mensaje al nuevo contexto.", ], followup: `Hola [Nombre], hablamos hace unas semanas sobre automatizar las reservas de [negocio]. El verano se acerca y quería ver si ahora el momento tiene más sentido. En [mes] ya tenemos varios negocios de [sector] en [zona] con el sistema activo. ¿Te interesa que retomemos la conversación esta semana?`, followupTag: "WA reactivación — 4-6 semanas después", }, { situation: "\"No me interesa\" / rechazo directo", tag: "ARCHIVAR", tagClass: "tag-red", dos: [ "Agradece su tiempo con una sola frase. Sin alargarlo.", "Deja la puerta abierta con algo de valor: \"Si en algún momento cambia la situación, aquí estaré.\"", "Archiva el lead con nota del motivo. Puede ser útil en 6 meses.", ], donts: [ "Insistir. Si ya dijeron no, insistir solo daña la marca.", "Pedir que expliquen por qué. No es tu terapeuta, es un lead frío.", "Eliminarlo del CRM — puede reactivarse o referir a alguien.", ], followup: `Hola [Nombre], entendido, sin problema. Si en algún momento la situación cambia o conocéis algún negocio al que le pueda venir bien lo que hago, estaré por aquí. Que vaya muy bien la temporada 🙌`, followupTag: "WA de cierre elegante — inmediato", }, { situation: "Propuesta enviada — sin respuesta", tag: "SEGUIMIENTO", tagClass: "tag-green", dos: [ "Espera mínimo 24h antes del primer follow-up. Nunca el mismo día.", "Día 2: WA breve recordando que enviaste la propuesta y preguntando si tienen dudas.", "Día 5: Segundo toque con un ángulo nuevo (caso de éxito, urgencia de temporada).", "Día 10: Cierre definitivo — \"Si no es el momento, sin problema, solo dímelo.\"", ], donts: [ "Más de 3 follow-ups en 10 días — te conviertes en spam.", "Mensajes del tipo \"¿leíste la propuesta?\" — suena desesperado.", "Cambiar el precio sin que te lo hayan pedido — devalúa tu oferta.", ], followup: `Hola [Nombre], te escribo porque quiero asegurarme de que llegó bien la propuesta que te mandé. Si tienes alguna duda sobre el sistema o los precios, dímela ahora y la resolvemos en 5 minutos. Si el momento no es el adecuado, sin problema — solo dímelo y lo dejamos para cuando tenga más sentido. 🙌`, followupTag: "WA día 5 — propuesta sin respuesta", }, ].map((item, idx) => (
{item.situation}
{item.tag}
✓ SÍ HACER
{item.dos.map((d, i) => (
{d}
))}
✗ NO HACER
{item.donts.map((d, i) => (
{d}
))}
{item.followupTag}
{item.followup.split("\n").map((line, i) => (
{line ||
}
))}
))}
Regla de los 3 toques: Ningún lead recibe más de 3 mensajes de seguimiento sin respuesta antes de archivarlo. Más de eso daña tu reputación y tu marca. Un "no" sin respuesta sigue siendo un "no". Archiva, pon fecha de reactivación, y pasa al siguiente.
); } function UpsellView() { const upsells = [ { title: "Voice Agent", trigger: "MES 1-2 — cuando el bot está activo", desc: "Añade un agente de voz (Vapi) que responde llamadas perdidas. Perfecto para negocios que reciben llamadas fuera de horario.", val: "+ 400–600€ setup / + 80€/mes", }, { title: "Integración CRM / Odoo", trigger: "MES 2-3 — cuando escalan", desc: "Conectar el flujo de reservas con su CRM existente o montar uno básico en Google Sheets con reporting automático.", val: "+ 600–1.000€ setup", }, { title: "Automatización de reviews", trigger: "MES 1 — fácil de proponer", desc: "Bot que después de cada servicio manda un WA pidiendo review en Google. Multiplica su reputación online pasivamente.", val: "+ 200€ setup / + 40€/mes", }, { title: "Canal Instagram + Web", trigger: "MES 2 — cuando ven resultados", desc: "Replicar el sistema en más canales. El mismo bot atendiendo DMs de Instagram y el chat de su web simultáneamente.", val: "+ 300–500€ setup", }, { title: "Segundo negocio referido", trigger: "MES 1 — proponlo activamente", desc: "Programa de referidos: 75€ por cada nuevo cliente que cierren. La mejor forma de activar boca a oreja estructurado.", val: "75€/referido cerrado", }, { title: "Mantenimiento extendido", trigger: "MES 3 — renovación de contrato", desc: "Aumentar la cuota mensual a cambio de mejoras continuas, actualizaciones de prompts y reporting mensual avanzado.", val: "De 97€ → 197€/mes", }, ]; return (
07
Post-venta
Retención y Expansión
Primeras 48h tras el cierre: Mensaje de bienvenida + link al formulario de onboarding. Establece expectativas claras de timeline. La experiencia post-venta construye el upsell.

Semana 3: Envía el primer reporte de actividad del bot (mensajes procesados, reservas generadas). Los números hacen el trabajo de venta del siguiente servicio.
{upsells.map((u, i) => (
{u.title}
{u.trigger}
{u.desc}
{u.val}
))}

Objetivo LTV por cliente
Setup medio (800€) + mantenimiento 12 meses (147€ × 12 = 1.764€) + 1 upsell medio (400€) = ~2.964€ LTV año 1.

Con 10 clientes activos eso son ~29.600€ en 12 meses sin contar nuevos cierres. El MRR de mantenimiento es la base que estabiliza el negocio. Prioriza retención sobre adquisición masiva.
); } const views = { pipeline: PipelineView, qualificacion: CualificacionView, outreach: OutreachView, llamada: LlamadaView, propuesta: PropuestaView, cierre: CierreView, upsell: UpsellView, }; export default function BeltranSalesOS() { const [active, setActive] = useState("pipeline"); const View = views[active]; return ( <>
Beltran Intelligence
Sales Operating System
v1.0 — 2025
); }