/* SATORI — Servicios (servicios.html) */ const { useState, useEffect } = React; const SERVICIOS_EN = [ { num: "01", tag: "Brand", titulo: "Own brand", subtitulo: "Identity · Presence · Authority", descripcion: "The identity a serious entrepreneur deserves. We define how you look, sound and how you're remembered.", benefits: [ "Naming, manual and brand kit", "Complete visual & verbal identity", "Positioning for CEOs", "Templates for the whole team" ], img: "assets/marca-propia.png" }, { num: "02", tag: "Image", titulo: "Online positioning", subtitulo: "Reputation · Visibility · Trust", descripcion: "Your company in front of the right people. We build real authority — and we also make sure AI models like ChatGPT, Claude and Gemini recommend you when prospects ask.", benefits: [ "Social media management", "Paid advertising & campaigns", "SEO & organic content", "Verifiable reputation", "Recommendations in ChatGPT / Claude / Gemini" ], img: "assets/posicionamiento.png" }, { num: "03", tag: "AI", titulo: "AI Solutions", subtitulo: "Automation · Data · Scale", descripcion: "Custom tools that automate tasks, attend clients and summarize information non-stop.", benefits: [ "Personal finance bots", "Automated news for your sector", "WhatsApp chat & group summaries", "Sales bots on social media" ], img: "assets/marketing-ia.png" } ]; const PAQUETES_EN = [ { nombre: "Essential", descripcion: "For those building their first serious digital presence.", features: [ "Basic identity and brand manual", "2 social media channels managed", "8 posts / month", "Monthly report", "WhatsApp support" ], cta: "Quote Essential", tono: "claro" }, { nombre: "Professional", descripcion: "For entrepreneurs who need to accelerate brand, content and acquisition.", features: [ "Complete identity + CEO positioning", "3 channels + LinkedIn", "16 posts / month + reels", "1 active ads campaign", "Basic WhatsApp automation", "Bi-weekly meeting with Rodrigo" ], cta: "Quote Professional", tono: "oro", destacado: true }, { nombre: "Premium AI", descripcion: "Complete digital operation for companies growing seriously.", features: [ "Everything in Professional", "AI Solutions implemented", "Multi-channel campaigns", "CRM and automated funnels", "SEO & positioning", "Weekly meetings + direct Slack" ], cta: "Quote Premium", tono: "oscuro" } ]; const SERVICIOS = [ { num: "01", tag: "Marca", titulo: "Marca propia", subtitulo: "Identidad · Presencia · Autoridad", descripcion: "La identidad que un empresario serio merece. Definimos cómo te ves, cómo suenas y cómo te recuerdan.", benefits: [ "Naming, manual y kit de marca", "Identidad visual y verbal completa", "Posicionamiento para CEO", "Plantillas para todo el equipo" ], img: "assets/marca-propia.png" }, { num: "02", tag: "Imagen", titulo: "Posicionamiento online", subtitulo: "Reputación · Visibilidad · Confianza", descripcion: "Tu empresa frente a las personas correctas. Construimos autoridad real — y también nos enfocamos en que los modelos de IA como ChatGPT, Claude y Gemini te recomienden cuando los prospectos pregunten.", benefits: [ "Gestión de redes sociales", "Publicidad pagada y campañas", "SEO y contenido orgánico", "Reputación verificable", "Recomendaciones en ChatGPT / Claude / Gemini" ], img: "assets/posicionamiento.png" }, { num: "03", tag: "IA", titulo: "Soluciones con IA", subtitulo: "Automatización · Datos · Escala", descripcion: "Herramientas a tu medida que automatizan tareas, atienden clientes y resumen información sin parar.", benefits: [ "Bots de finanzas personales", "Noticias automatizadas de tu sector", "Resúmenes de chats y grupos de WhatsApp", "Bots de venta en redes sociales" ], img: "assets/marketing-ia.png" } ]; const PAQUETES = [ { nombre: "Esencial", descripcion: "Para quienes están construyendo su primera presencia digital seria.", features: [ "Identidad básica y manual de marca", "Gestión de 2 redes sociales", "8 publicaciones / mes", "Reporte mensual", "Soporte por WhatsApp" ], cta: "Cotizar Esencial", tono: "claro" }, { nombre: "Profesional", descripcion: "Para empresarios que necesitan acelerar marca, contenido y captación.", features: [ "Identidad completa + posicionamiento CEO", "Gestión de 3 redes + LinkedIn", "16 publicaciones / mes + reels", "1 campaña de ads activa", "Automatización WhatsApp básica", "Reunión quincenal con Rodrigo" ], cta: "Cotizar Profesional", tono: "oro", destacado: true }, { nombre: "Premium IA", descripcion: "Operación digital completa para empresas en crecimiento serio.", features: [ "Todo lo de Profesional", "Soluciones con IA implementadas", "Campañas multi-canal", "CRM y embudos automatizados", "SEO y posicionamiento", "Reuniones semanales y Slack directo" ], cta: "Cotizar Premium", tono: "oscuro" } ]; // ---------- HERO ---------- function ServiciosHero() { const [lang] = useLang(); const c = lang === "en" ? { eyebrow: "Three solutions. One partner.", title: "Services.", accent: "With discernment.", sub: "Each service is designed for entrepreneurs who grow with strategy. Start with what you need today and we scale when it makes sense." } : { eyebrow: "Tres soluciones. Un socio.", title: "Servicios.", accent: "Con criterio.", sub: "Cada servicio está diseñado para empresarios que crecen con estrategia. Empieza por lo que necesitas hoy y escalamos cuando tenga sentido." }; return ( ); } // ---------- SERVICIOS DETALLE (más compactos, animados) ---------- function ServiciosDetalle() { const [lang] = useLang(); const list = lang === "en" ? SERVICIOS_EN : SERVICIOS; const ctaInteresa = lang === "en" ? "I'm interested" : "Me interesa"; return (
{list.map((s, i) => (
{s.titulo}
))}
); } // ---------- PAQUETES (sin precios) ---------- function Paquetes() { const [lang] = useLang(); const list = lang === "en" ? PAQUETES_EN : PAQUETES; const tagline = lang === "en" ? "Packages" : "Paquetes"; const h1 = lang === "en" ? "Three paths." : "Tres rutas."; const h2 = lang === "en" ? "One conversation." : "Una conversación."; const popular = lang === "en" ? "Most chosen" : "Más elegido"; const askMore = lang === "en" ? "Need something different?" : "¿Necesitas algo distinto?"; const customLink = lang === "en" ? "Custom quote" : "Cotiza a medida"; return (

{tagline}

{h1} {h2}

{list.map((p) => { const oscuro = p.tono === "oscuro"; const oro = p.tono === "oro"; const bg = oscuro ? SATORI.INK : SATORI.WHITE; const fg = oscuro ? SATORI.CREAM : SATORI.INK; const accent = SATORI.GOLD; return (
{p.destacado && (
{popular}
)}
{p.nombre}
{p.nombre}

{p.descripcion}

    {p.features.map((f) => (
  • + {f}
    • ))}
{p.cta} →
); })}

{askMore} {customLink}

); } // ---------- FAQ ---------- function Faq() { const [lang] = useLang(); const itemsEs = [ { q: "¿Cuánto tarda en ver resultados?", a: "Marca propia: primeras semanas. Posicionamiento: 1–3 meses. Soluciones con IA: desde la activación." }, { q: "¿Necesito saber de tecnología?", a: "Para nada. Nos encargamos de toda la parte técnica. Tú nos cuentas tu negocio, nosotros hacemos el resto." }, { q: "¿Firmo contrato largo?", a: "No. Trabajamos mes a mes. Cancela cuando quieras, con 30 días de aviso." }, { q: "¿Qué necesito para empezar?", a: "Una llamada de 30 minutos. Entendemos tu negocio, proponemos la ruta, te damos un precio claro." }, { q: "¿Con qué tipo de negocios trabajan?", a: "Empresarios y pymes en México — despachos, constructoras, clínicas, consultoras y servicios profesionales." }, { q: "¿Ofrecen garantía?", a: "30 días. Si no sientes que el valor supera la inversión, seguimos 20 días más sin costo. Sin preguntas." } ]; const itemsEn = [ { q: "How long until I see results?", a: "Own brand: first weeks. Positioning: 1–3 months. AI Solutions: from activation." }, { q: "Do I need to know tech?", a: "Not at all. We handle everything technical. You tell us your business, we do the rest." }, { q: "Do I sign a long contract?", a: "No. Month-to-month. Cancel anytime with 30 days notice." }, { q: "What do I need to start?", a: "A 30-minute call. We understand your business, propose the path, give you a clear price." }, { q: "What kinds of businesses?", a: "Entrepreneurs and SMEs in Mexico — firms, contractors, clinics, consultancies and professional services." }, { q: "Do you offer a guarantee?", a: "30 days. If you don't feel value exceeds the investment, we continue 20 days at no cost. No questions." } ]; const items = lang === "en" ? itemsEn : itemsEs; const eyebrowTxt = lang === "en" ? "FAQ" : "Preguntas frecuentes"; const headPre = lang === "en" ? "The" : "Lo"; const headAccent = lang === "en" ? "essentials." : "esencial."; const [open, setOpen] = useState(0); return (

{eyebrowTxt}

{headPre} {headAccent}

{items.map((it, i) => { const isOpen = open === i; return (
{isOpen && (
{it.a}
)}
); })}
); } // ---------- APP ---------- function App() { useEffect(() => { const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) e.target.setAttribute("data-revealed", "1"); }); }, { threshold: 0.01, rootMargin: "0px 0px 200px 0px" } ); document.querySelectorAll("[data-reveal]").forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); return (
); } ReactDOM.createRoot(document.getElementById("root")).render();