Cotizador Web Express<\/title>\r\n \r\n <template id="kotrjmaOao5Mly6ArD1D"></template><\/script>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body { font-family: 'Urbanist', sans-serif; background-color: #FFFFFF; color: #0F172A; }\r\n input[type=number]::-webkit-inner-spin-button, \r\n input[type=number]::-webkit-outer-spin-button { \r\n -webkit-appearance: none; margin: 0; \r\n }\r\n \r\n \/* Estilos para impresi\u00f3n (Generaci\u00f3n de PDF) *\/\r\n @media print {\r\n \/* 1. Ocultar elementos externos de la web (WordPress\/Temas) *\/\r\n header, footer, nav, aside, .sidebar, .wp-block-template-part, #header, #footer { \r\n display: none !important; \r\n }\r\n \r\n \/* 2. Limpieza de p\u00e1gina *\/\r\n @page { margin: 1cm; size: auto; }\r\n body { background: white !important; color: black !important; -webkit-print-color-adjust: exact; }\r\n \r\n \/* 3. Ocultar controles de usuario dentro del cotizador *\/\r\n .no-print { display: none !important; }\r\n \r\n \/* 4. Forzar que el \u00e1rea de impresi\u00f3n ocupe todo el ancho *\/\r\n #root, .max-w-\\[1500px\\], .grid {\r\n display: block !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n \r\n .print-area { \r\n display: block !important; \r\n position: static !important; \r\n width: 100% !important; \r\n margin: 0 !important; \r\n padding: 0 !important;\r\n box-shadow: none !important;\r\n border: none !important;\r\n }\r\n\r\n .shadow-2xl, .shadow-xl { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }\r\n \r\n \/* Colores de impresi\u00f3n *\/\r\n .bg-sky-600 { background-color: #0284c7 !important; color: white !important; }\r\n .bg-slate-50 { background-color: #f8fafc !important; }\r\n .bg-white { background-color: white !important; }\r\n .text-white { color: white !important; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-white\">\r\n <div id=\"root\"><\/div>\r\n\r\n \r\n <template id="kZzWryUIXghnWHLzkwOY"></template><\/script>\r\n <template id="hOFk6cgtCgiaV1F5tU4f"></template><\/script>\r\n <template id="7zAbhu707MRs6Oph92uR"></template><\/script>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useEffect } = React;\r\n\r\n \/\/ Componente de Icono SVG Robusto\r\n const Icon = ({ name, className = \"w-5 h-5\", ...props }) => {\r\n const icons = {\r\n CheckCircle: <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" \/>,\r\n Plus: <path d=\"M5 12h14m-7-7v14\" \/>,\r\n Minus: <path d=\"M5 12h14\" \/>,\r\n Info: <><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/>,\r\n CreditCard: <><rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"\/><line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\"\/><\/>,\r\n Zap: <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\" \/>,\r\n Globe: <><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" x2=\"22\" y1=\"12\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/>,\r\n Search: <><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/>,\r\n ShoppingCart: <><circle cx=\"8\" cy=\"21\" r=\"1\"\/><circle cx=\"19\" cy=\"21\" r=\"1\"\/><path d=\"M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12\"\/><\/>,\r\n Calendar: <><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\"\/><line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\"\/><line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\"\/><\/>,\r\n Layers: <><polygon points=\"12 2 2 7 12 12 22 7 12 2\"\/><polyline points=\"2 17 12 22 22 17\"\/><polyline points=\"2 12 12 17 22 12\"\/><\/>,\r\n Check: <polyline points=\"20 6 9 17 4 12\" \/>,\r\n ShieldCheck: <><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/>,\r\n BarChart3: <><path d=\"M3 3v18h18\"\/><path d=\"M18 17V9\"\/><path d=\"M13 17V5\"\/><path d=\"M8 17v-3\"\/><\/>,\r\n MessageCircle: <path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\" \/>,\r\n Sparkles: <><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M19 17v4\"\/><path d=\"M3 5h4\"\/><path d=\"M17 19h4\"\/><\/>,\r\n Loader2: <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" \/>,\r\n Send: <><line x1=\"22\" x2=\"11\" y1=\"2\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/>,\r\n Printer: <><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><rect width=\"12\" height=\"8\" x=\"6\" y=\"14\"\/><\/>,\r\n FileText: <><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" x2=\"8\" y1=\"13\" y2=\"13\"\/><line x1=\"16\" x2=\"8\" y1=\"17\" y2=\"17\"\/><line x1=\"10\" x2=\"8\" y1=\"9\" y2=\"9\"\/><\/>,\r\n Wallet: <><path d=\"M20 12V8H6a2 2 0 0 1-2-2c0-1.1.9-2 2-2h12v4\"\/><rect width=\"16\" height=\"14\" x=\"4\" y=\"8\" rx=\"2\"\/><path d=\"M16 15h.01\"\/><\/>\r\n };\r\n\r\n return (\r\n <svg \r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\" \r\n viewBox=\"0 0 24 24\" \r\n fill=\"none\" \r\n stroke=\"currentColor\" \r\n strokeWidth=\"2\" \r\n strokeLinecap=\"round\" \r\n strokeLinejoin=\"round\" \r\n className={className}\r\n {...props}\r\n >\r\n {icons[name] || null}\r\n <\/svg>\r\n );\r\n };\r\n\r\n const App = () => {\r\n const apiKey = \"\"; \r\n\r\n const PLANS = {\r\n explorer: {\r\n id: 'explorer',\r\n name: 'Web Express Explorer',\r\n monthlyBase: 100,\r\n sections: 5,\r\n description: 'Dise\u00f1o integral en plataforma WordPress (Hasta 5 secciones).',\r\n features: [\r\n 'Hasta 5 secciones incluidas',\r\n 'Formulario de Contacto',\r\n 'Bot\u00f3n de chat con WhatsApp',\r\n 'Integraci\u00f3n multimedia (Video\/Audio)',\r\n 'Iconos RRSS (Conectar\/Seguir\/Compartir)',\r\n 'Complementos de seguridad web',\r\n 'SEO B\u00e1sico (5 secciones)',\r\n 'Google & Bing Search Console \/ Analytics',\r\n 'Mantenimiento por 1 a\u00f1o'\r\n ]\r\n },\r\n expedition: {\r\n id: 'expedition',\r\n name: 'Web Express Expedition',\r\n monthlyBase: 150,\r\n sections: 12,\r\n description: 'Dise\u00f1o integral en plataforma WordPress (Hasta 12 secciones).',\r\n features: [\r\n 'Hasta 12 secciones incluidas',\r\n 'Formulario de Contacto',\r\n 'Bot\u00f3n de chat con WhatsApp',\r\n 'Integraci\u00f3n multimedia avanzada',\r\n 'Iconos RRSS (Conectar\/Seguir\/Compartir)',\r\n 'Complementos de seguridad web reforzada',\r\n 'SEO B\u00e1sico (12 secciones)',\r\n 'Google & Bing Search Console \/ Analytics',\r\n 'Mantenimiento por 1 a\u00f1o'\r\n ]\r\n }\r\n };\r\n\r\n const EXTRAS = [\r\n { id: 'seo_mensual', name: 'SEO Mensual (SERP + AI Tracking)', price: 100, isMonthly: true, icon: \"Search\", desc: 'Seguimiento en buscadores y motores de IA (ChatGPT\/Gemini).' },\r\n { id: 'catalogo', name: 'Cat\u00e1logo de productos o servicios', price: 250, isMonthly: false, icon: \"ShoppingCart\", desc: 'Configuraci\u00f3n profesional con WooCommerce.' },\r\n { id: 'pasarela', name: 'Pasarela de Pago & Carrito', price: 200, isMonthly: false, icon: \"CreditCard\", desc: 'E-commerce completo con carrito de compra.' },\r\n { id: 'booking', name: 'Booking de citas online', price: 150, isMonthly: false, icon: \"Calendar\", desc: 'Gesti\u00f3n de reservas y citas online.' }\r\n ];\r\n\r\n const [selectedPlan, setSelectedPlan] = useState(PLANS.explorer);\r\n const [selectedExtras, setSelectedExtras] = useState([]);\r\n const [extraPages, setExtraPages] = useState(0);\r\n const [blogPosts, setBlogPosts] = useState(0);\r\n const [initialPercent, setInitialPercent] = useState(30); \r\n const [totals, setTotals] = useState({ annual: 0, discounted: 0, downPayment: 0, monthlyInstallment: 0 });\r\n const [businessNiche, setBusinessNiche] = useState(\"\");\r\n const [aiResponse, setAiResponse] = useState(null);\r\n const [isAiLoading, setIsAiLoading] = useState(false);\r\n\r\n useEffect(() => {\r\n let annualTotal = selectedPlan.monthlyBase * 12;\r\n selectedExtras.forEach(id => {\r\n const item = EXTRAS.find(e => e.id === id);\r\n annualTotal += (item.isMonthly ? item.price * 12 : item.price);\r\n });\r\n annualTotal += (extraPages * 50) + (blogPosts * 50);\r\n\r\n const downPayment = annualTotal * (initialPercent \/ 100);\r\n const remaining = annualTotal - downPayment;\r\n const monthlyInstallment = Math.ceil(remaining \/ 11); \r\n\r\n setTotals({ annual: annualTotal, discounted: annualTotal * 0.80, downPayment, monthlyInstallment });\r\n }, [selectedPlan, selectedExtras, extraPages, blogPosts, initialPercent]);\r\n\r\n const toggleExtra = (id) => {\r\n setSelectedExtras(prev => prev.includes(id) ? prev.filter(e => e !== id) : [...prev, id]);\r\n };\r\n\r\n const generateAiStrategy = async () => {\r\n if (!businessNiche.trim()) return;\r\n setIsAiLoading(true);\r\n\r\n const prompt = `Negocio: \"${businessNiche}\". Plan: ${selectedPlan.name}. Responde JSON con sitemap de ${selectedPlan.sections + extraPages} paginas, valueProp impactante y aiStrategy breve sobre como ser indexado por buscadores y LLMs (ChatGPT\/Gemini).`;\r\n\r\n const fetchWithRetry = async (url, options, retries = 5, delay = 1000) => {\r\n for (let i = 0; i <= retries; i++) {\r\n try {\r\n const res = await fetch(url, options);\r\n if (res.ok) return res;\r\n if (res.status !== 429 && res.status < 500) break; \r\n } catch (e) {}\r\n if (i < retries) await new Promise(r => setTimeout(r, delay * Math.pow(2, i)));\r\n }\r\n throw new Error(\"No se pudo conectar con el servidor.\");\r\n };\r\n\r\n try {\r\n const response = await fetchWithRetry(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({\r\n contents: [{ parts: [{ text: prompt }] }],\r\n generationConfig: { responseMimeType: \"application\/json\" }\r\n })\r\n });\r\n const result = await response.json();\r\n setAiResponse(JSON.parse(result.candidates?.[0]?.content?.parts?.[0]?.text || \"{}\"));\r\n } catch (err) { \r\n console.error(err);\r\n } finally { \r\n setIsAiLoading(false); \r\n }\r\n };\r\n\r\n return (\r\n <div className=\"min-h-screen text-slate-900 p-4 md:p-8\">\r\n <div className=\"max-w-[1500px] mx-auto\">\r\n <header className=\"text-center mb-10 no-print\">\r\n <div className=\"inline-flex items-center gap-2 bg-sky-100 text-sky-700 px-4 py-1 rounded-full text-[10px] font-black mb-4 uppercase tracking-[0.2em]\">Propuesta Flexible e Inteligente 2026<\/div>\r\n <h1 className=\"text-4xl md:text-5xl font-black text-slate-900 mb-2 tracking-tighter\">Cotizador Web Express<\/h1>\r\n <p className=\"text-slate-500 max-w-2xl mx-auto text-sm\">Define tu presencia digital con claridad y total transparencia de costos.<\/p>\r\n <\/header>\r\n\r\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-start\">\r\n <div className=\"lg:col-span-8 space-y-6 no-print\">\r\n \r\n {\/* 1. Planes *\/}\r\n <div className=\"bg-blue-50 rounded-[2.5rem] p-8 border border-blue-100\">\r\n <h2 className=\"text-2xl font-black mb-8 flex items-center gap-2 text-blue-900\"><Icon name=\"Globe\" className=\"w-6 h-6 text-blue-600\" \/> 1. Elige tu Plan de Dise\u00f1o<\/h2>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n {Object.values(PLANS).map((plan) => (\r\n <div key={plan.id} onClick={() => setSelectedPlan(plan)} className={`p-6 rounded-[2rem] border-2 cursor-pointer transition-all duration-300 ${selectedPlan.id === plan.id ? 'border-blue-600 bg-white shadow-lg' : 'border-blue-200 bg-white\/50 hover:bg-white'}`}>\r\n <div className=\"flex justify-between items-start mb-2\">\r\n <h3 className=\"text-xl font-bold text-blue-900\">{plan.name}<\/h3>\r\n {selectedPlan.id === plan.id && <Icon name=\"CheckCircle\" className=\"w-6 h-6 text-blue-600\" \/>}\r\n <\/div>\r\n <ul className=\"space-y-2 mb-6\">\r\n {plan.features.map((f, i) => <li key={i} className=\"flex items-start gap-2 text-[11px] text-slate-600 leading-tight\"><Icon name=\"Check\" className=\"w-3 h-3 text-emerald-600 mt-0.5 shrink-0\" \/> {f}<\/li>)}\r\n <\/ul>\r\n <div className=\"text-2xl font-black text-blue-700\">${plan.monthlyBase * 12} <span className=\"text-[10px] text-slate-400 uppercase tracking-widest font-bold\">Inversi\u00f3n Anual<\/span><\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* 2. Contadores *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div className=\"bg-indigo-50 rounded-[1.5rem] p-5 border border-indigo-100 flex items-center justify-between\">\r\n <div className=\"flex items-center gap-3\"><Icon name=\"Layers\" className=\"w-6 h-6 text-indigo-600\" \/><div><h3 className=\"font-bold text-xs uppercase tracking-wider text-indigo-900\">Secciones Extra<\/h3><p className=\"text-[10px] text-indigo-600\/70\">$50 c\/u<\/p><\/div><\/div>\r\n <div className=\"flex items-center gap-3 bg-white rounded-xl p-1.5 border border-indigo-200 shadow-sm\">\r\n <button onClick={() => setExtraPages(Math.max(0, extraPages - 1))} className=\"w-8 h-8 flex items-center justify-center hover:bg-indigo-50 rounded-lg text-indigo-600 font-bold\">-<\/button>\r\n <span className=\"font-black text-lg w-6 text-center text-slate-900\">{extraPages}<\/span>\r\n <button onClick={() => setExtraPages(extraPages + 1)} className=\"w-8 h-8 flex items-center justify-center hover:bg-indigo-50 rounded-lg text-indigo-600 font-bold\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n <div className=\"bg-emerald-50 rounded-[1.5rem] p-5 border border-emerald-100 flex items-center justify-between\">\r\n <div className=\"flex items-center gap-3\"><Icon name=\"FileText\" className=\"w-6 h-6 text-emerald-600\" \/><div><h3 className=\"font-bold text-xs uppercase tracking-wider text-emerald-900\">Blog Posts Pro<\/h3><p className=\"text-[10px] text-emerald-600\/70\">$50 c\/u<\/p><\/div><\/div>\r\n <div className=\"flex items-center gap-3 bg-white rounded-xl p-1.5 border border-emerald-200 shadow-sm\">\r\n <button onClick={() => setBlogPosts(Math.max(0, blogPosts - 1))} className=\"w-8 h-8 flex items-center justify-center hover:bg-emerald-50 rounded-lg text-emerald-600 font-bold\">-<\/button>\r\n <span className=\"font-black text-lg w-6 text-center text-slate-900\">{blogPosts}<\/span>\r\n <button onClick={() => setBlogPosts(blogPosts + 1)} className=\"w-8 h-8 flex items-center justify-center hover:bg-emerald-50 rounded-lg text-emerald-600 font-bold\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* 3. Extras *\/}\r\n <div className=\"bg-amber-50 rounded-[2.5rem] p-8 border border-amber-100\">\r\n <h2 className=\"text-2xl font-black mb-6 flex items-center gap-2 text-amber-900\"><Icon name=\"Zap\" className=\"w-6 h-6 text-amber-600\" \/> 3. Potenciadores de Conversi\u00f3n<\/h2>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\r\n {EXTRAS.map((e) => (\r\n <div key={e.id} onClick={() => toggleExtra(e.id)} className={`p-4 rounded-[1.5rem] border-2 cursor-pointer transition-all duration-300 ${selectedExtras.includes(e.id) ? 'border-amber-500 bg-white shadow-md' : 'border-amber-200 bg-white\/50 hover:bg-white'}`}>\r\n <div className=\"flex justify-between items-center mb-1\">\r\n <div className=\"flex items-center gap-2\">\r\n <Icon name={e.icon} className={`w-5 h-5 ${selectedExtras.includes(e.id) ? 'text-amber-600' : 'text-slate-400'}`} \/>\r\n <h4 className=\"font-bold text-xs text-slate-800\">{e.name}<\/h4>\r\n <\/div>\r\n <span className=\"font-black text-amber-700 text-sm\">${e.price}<\/span>\r\n <\/div>\r\n <p className=\"text-[10px] text-slate-500 italic\">{e.desc}<\/p>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* 4. Flexibilidad de pago *\/}\r\n <div className=\"bg-sky-50 rounded-[2.5rem] p-8 border border-sky-100\">\r\n <h2 className=\"text-2xl font-black mb-6 flex items-center gap-2 text-sky-900\"><Icon name=\"Wallet\" className=\"w-6 h-6 text-sky-600\" \/> 4. Inversi\u00f3n Inicial Flexible<\/h2>\r\n <div className=\"space-y-6\">\r\n <div className=\"flex justify-between items-end\"><p className=\"text-sm text-sky-900\">Porcentaje de entrega inicial:<\/p><span className=\"text-4xl font-black text-sky-600\">{initialPercent}%<\/span><\/div>\r\n <input type=\"range\" min=\"20\" max=\"50\" step=\"5\" value={initialPercent} onChange={(e) => setInitialPercent(parseInt(e.target.value))} className=\"w-full h-3 bg-sky-200 rounded-lg appearance-none cursor-pointer accent-sky-600\" \/>\r\n <div className=\"grid grid-cols-2 gap-6 pt-6 border-t border-sky-200\">\r\n <div className=\"bg-white p-4 rounded-2xl border border-sky-100 shadow-sm\"><p className=\"text-[10px] uppercase font-bold text-slate-400 mb-1 tracking-widest\">Entrega Hoy<\/p><p className=\"text-3xl font-black text-slate-900\">${Math.round(totals.downPayment).toLocaleString()}<\/p><\/div>\r\n <div className=\"bg-white p-4 rounded-2xl border border-sky-100 shadow-sm\"><p className=\"text-[10px] uppercase font-bold text-slate-400 mb-1 tracking-widest\">11 Cuotas de<\/p><p className=\"text-3xl font-black text-slate-900\">${totals.monthlyInstallment.toLocaleString()}<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* AI Hub \u2728 *\/}\r\n <div className=\"bg-slate-100 rounded-[2.5rem] p-8 border border-slate-200 relative overflow-hidden group\">\r\n <div className=\"relative z-10\">\r\n <div className=\"flex items-center gap-2 mb-4\">\r\n <Icon name=\"Sparkles\" className=\"w-6 h-6 text-slate-600\" \/>\r\n <div><h3 className=\"font-bold text-lg text-slate-900\">Asistente Estrat\u00e9gico AI<\/h3><p className=\"text-[10px] text-slate-500 uppercase tracking-widest font-bold\">Arquitectura web personalizada<\/p><\/div>\r\n <\/div>\r\n <div className=\"flex flex-col sm:flex-row gap-3\">\r\n <input type=\"text\" placeholder=\"Giro de tu negocio...\" className=\"flex-1 bg-white border border-slate-300 rounded-2xl px-5 py-4 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-400\" value={businessNiche} onChange={(e) => setBusinessNiche(e.target.value)} \/>\r\n <button onClick={generateAiStrategy} disabled={isAiLoading || !businessNiche} className=\"bg-slate-800 hover:bg-slate-900 text-white px-8 py-4 rounded-2xl text-sm font-black transition-all disabled:opacity-50\">\r\n {isAiLoading ? <Icon name=\"Loader2\" className=\"w-5 h-5 animate-spin mx-auto\" \/> : \"GENERAR \u2728\"}\r\n <\/button>\r\n <\/div>\r\n {aiResponse && (\r\n <div className=\"mt-8 p-6 bg-white rounded-3xl border border-slate-200 shadow-sm animate-in fade-in slide-in-from-top-4 duration-500\">\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8 mb-4\">\r\n <div><p className=\"text-[10px] font-black text-slate-400 mb-3 uppercase tracking-widest\">Sitemap sugerido:<\/p><div className=\"flex flex-wrap gap-2\">{aiResponse.sitemap?.map((s, i) => <span key={i} className=\"text-[10px] bg-slate-100 text-slate-700 px-3 py-1.5 rounded-lg border border-slate-200 font-medium\">{s}<\/span>)}<\/div><\/div>\r\n <div><p className=\"text-[10px] font-black text-slate-400 mb-3 uppercase tracking-widest\">Eslogan:<\/p><p className=\"text-lg italic text-slate-800 font-bold leading-tight\">\"{aiResponse.valueProp}\"<\/p><\/div>\r\n <\/div>\r\n <div className=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\"><p className=\"text-xs text-slate-600 leading-relaxed\">{aiResponse.aiStrategy}<\/p><\/div>\r\n <\/div>\r\n )}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Sidebar de Resumen - \u00c1REA DE IMPRESI\u00d3N *\/}\r\n <div className=\"lg:col-span-4 sticky top-8 print-area\">\r\n <div className=\"bg-white rounded-[2.5rem] p-8 shadow-2xl border border-slate-100 relative overflow-hidden\">\r\n <div className=\"absolute top-0 left-0 w-full h-1.5 bg-sky-500\"><\/div>\r\n \r\n {\/* Cabecera Formal de Cotizaci\u00f3n (Solo visible en PDF) *\/}\r\n <div className=\"hidden print:block mb-8 border-b pb-6\">\r\n <h1 className=\"text-3xl font-black text-slate-900 tracking-tighter uppercase\">Cotizaci\u00f3n de Servicios Web<\/h1>\r\n <div className=\"flex justify-between mt-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest\">\r\n <span>Web Express Explorer 2026<\/span>\r\n <span>Fecha: {new Date().toLocaleDateString()}<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <h2 className=\"text-2xl font-black text-slate-900 mb-8 flex items-center gap-2\"><Icon name=\"BarChart3\" className=\"w-6 h-6 text-sky-500\" \/> Cotizaci\u00f3n Personalizada<\/h2>\r\n \r\n <div className=\"space-y-5 mb-8 text-sm\">\r\n {\/* Detalle del Plan seleccionado *\/}\r\n <div className=\"border-b border-slate-100 pb-3\">\r\n <div className=\"flex justify-between items-center mb-2\">\r\n <span className=\"text-slate-500 uppercase text-[10px] font-bold tracking-widest\">Plan Base Anual<\/span>\r\n <span className=\"text-slate-900 font-black\">{selectedPlan.name}<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between items-center text-slate-900 font-bold mb-4\">\r\n <span>Subtotal<\/span>\r\n <span>${(selectedPlan.monthlyBase * 12).toLocaleString()}<\/span>\r\n <\/div>\r\n {\/* Listado de beneficios en el PDF *\/}\r\n <ul className=\"hidden print:block space-y-1 mb-4 bg-slate-50 p-3 rounded-xl border border-slate-100\">\r\n {selectedPlan.features.map((f, i) => (\r\n <li key={i} className=\"text-[9px] text-slate-500 flex items-center gap-1\">\r\n <Icon name=\"Check\" className=\"w-2.5 h-2.5 text-emerald-500\" \/> {f}\r\n <\/li>\r\n ))}\r\n <\/ul>\r\n <\/div>\r\n\r\n {\/* Desglose de Adicionales en el PDF *\/}\r\n {(extraPages > 0 || blogPosts > 0 || selectedExtras.length > 0) && (\r\n <div className=\"hidden print:block border-b border-slate-100 pb-3 mb-3\">\r\n <span className=\"text-slate-500 uppercase text-[10px] font-bold tracking-widest block mb-2\">Servicios Adicionales Seleccionados<\/span>\r\n <ul className=\"space-y-1.5\">\r\n {extraPages > 0 && (\r\n <li className=\"text-[9px] text-slate-700 flex justify-between\">\r\n <span>\u2022 {extraPages} Secciones adicionales ($50 c\/u)<\/span>\r\n <span className=\"font-bold\">${(extraPages * 50).toLocaleString()}<\/span>\r\n <\/li>\r\n )}\r\n {blogPosts > 0 && (\r\n <li className=\"text-[9px] text-slate-700 flex justify-between\">\r\n <span>\u2022 {blogPosts} Blog Posts Pro ($50 c\/u)<\/span>\r\n <span className=\"font-bold\">${(blogPosts * 50).toLocaleString()}<\/span>\r\n <\/li>\r\n )}\r\n {selectedExtras.map(id => {\r\n const item = EXTRAS.find(e => e.id === id);\r\n const itemPrice = item.isMonthly ? item.price * 12 : item.price;\r\n return (\r\n <li key={id} className=\"text-[9px] text-slate-700 flex justify-between\">\r\n <span>\u2022 {item.name} {item.isMonthly ? '(Inversi\u00f3n Anual)' : ''}<\/span>\r\n <span className=\"font-bold\">${itemPrice.toLocaleString()}<\/span>\r\n <\/li>\r\n );\r\n })}\r\n <\/ul>\r\n <\/div>\r\n )}\r\n\r\n {\/* Resumen de Inversi\u00f3n Final *\/}\r\n <div className=\"bg-slate-50 p-4 rounded-2xl space-y-3\">\r\n <div className=\"flex justify-between text-[10px] font-black uppercase text-sky-600 tracking-widest\">\r\n <span>Total Inversi\u00f3n Proyecto<\/span>\r\n <span className=\"text-base\">${totals.annual.toLocaleString()} USD<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between text-slate-600 border-t border-slate-200 pt-2\">\r\n <span>Entrega Inicial ({initialPercent}%)<\/span>\r\n <span className=\"font-black text-slate-900\">${Math.round(totals.downPayment).toLocaleString()}<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between pt-2 border-t border-slate-200 text-slate-600\">\r\n <span>Saldo en 11 Cuotas de:<\/span>\r\n <span className=\"font-black text-slate-900 text-base\">${totals.monthlyInstallment.toLocaleString()}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Bot\u00f3n de Impresi\u00f3n *\/}\r\n <button onClick={() => window.print()} className=\"w-full py-5 bg-slate-900 hover:bg-black text-white font-black rounded-2xl mb-8 no-print flex items-center justify-center gap-3 shadow-xl transition-all active:scale-95\">\r\n <Icon name=\"Printer\" className=\"w-5 h-5\" \/> GENERAR PDF COTIZACI\u00d3N\r\n <\/button>\r\n\r\n {\/* Oferta de Contado *\/}\r\n <div className=\"bg-gradient-to-br from-sky-600 to-indigo-700 rounded-[2rem] p-7 text-white shadow-xl relative group overflow-hidden\">\r\n <div className=\"absolute top-0 right-0 w-24 h-24 bg-white\/10 rounded-full blur-2xl -mr-12 -mt-12 group-hover:scale-150 transition-transform\"><\/div>\r\n <div className=\"relative z-10\">\r\n <div className=\"flex items-center gap-2 mb-3\"><Icon name=\"Zap\" className=\"w-4 h-4 fill-amber-300 text-amber-300\" \/><p className=\"text-[10px] font-black uppercase tracking-[0.2em]\">OFERTA PAGO DE CONTADO<\/p><\/div>\r\n <div className=\"mb-4\">\r\n <span className=\"text-[10px] font-bold opacity-60 line-through tracking-wider\">Monto Regular: ${totals.annual.toLocaleString()}<\/span>\r\n <div className=\"flex items-baseline gap-2\">\r\n <span className=\"text-5xl font-black tracking-tighter\">${Math.round(totals.discounted).toLocaleString()}<\/span>\r\n <span className=\"text-white\/60 font-black text-xs uppercase font-bold\">Neto<\/span>\r\n <\/div>\r\n <\/div>\r\n <div className=\"bg-white\/20 px-4 py-2 rounded-xl inline-flex items-center gap-2 text-[11px] font-black border border-white\/20 backdrop-blur-lg\">AHORRO DIRECTO: 20%<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Pie de p\u00e1gina de la cotizaci\u00f3n formal *\/}\r\n <div className=\"mt-8 flex gap-2 text-[10px] text-slate-400 font-medium italic border-t border-slate-100 pt-6 leading-relaxed\">\r\n <Icon name=\"Info\" className=\"w-4 h-4 shrink-0 text-sky-500 mt-0.5\" \/>\r\n <div>\r\n <p>Presupuesto profesional v\u00e1lido por 15 d\u00edas calendario.<\/p>\r\n <p className=\"hidden print:block mt-1 text-[9px] text-slate-400 leading-tight\">Esta cotizaci\u00f3n incluye mantenimiento t\u00e9cnico, actualizaciones de seguridad y soporte durante 12 meses de vigencia del contrato.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <footer className=\"mt-20 border-t border-slate-100 pt-12 pb-16 opacity-30 text-center no-print\">\r\n <p className=\"text-[10px] tracking-widest font-bold\">\u00a9 2026 WEB EXPRESS EXPLORER \u2022 SOLUCIONES DIGITALES DE ALTO NIVEL<\/p>\r\n <\/footer>\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cotizador Web Express<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_joinchat":[],"footnotes":""},"class_list":["post-8621","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"David Jose Lazo","author_link":"https:\/\/innovame.com\/en\/author\/davidperez\/"},"uagb_comment_info":0,"uagb_excerpt":"Cotizador Web Express","_links":{"self":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/pages\/8621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/comments?post=8621"}],"version-history":[{"count":0,"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/pages\/8621\/revisions"}],"wp:attachment":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/media?parent=8621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n Cotizador Web Express<\/title>\r\n \r\n <template id="kotrjmaOao5Mly6ArD1D"></template><\/script>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body { font-family: 'Urbanist', sans-serif; background-color: #FFFFFF; color: #0F172A; }\r\n input[type=number]::-webkit-inner-spin-button, \r\n input[type=number]::-webkit-outer-spin-button { \r\n -webkit-appearance: none; margin: 0; \r\n }\r\n \r\n \/* Estilos para impresi\u00f3n (Generaci\u00f3n de PDF) *\/\r\n @media print {\r\n \/* 1. Ocultar elementos externos de la web (WordPress\/Temas) *\/\r\n header, footer, nav, aside, .sidebar, .wp-block-template-part, #header, #footer { \r\n display: none !important; \r\n }\r\n \r\n \/* 2. Limpieza de p\u00e1gina *\/\r\n @page { margin: 1cm; size: auto; }\r\n body { background: white !important; color: black !important; -webkit-print-color-adjust: exact; }\r\n \r\n \/* 3. Ocultar controles de usuario dentro del cotizador *\/\r\n .no-print { display: none !important; }\r\n \r\n \/* 4. Forzar que el \u00e1rea de impresi\u00f3n ocupe todo el ancho *\/\r\n #root, .max-w-\\[1500px\\], .grid {\r\n display: block !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n \r\n .print-area { \r\n display: block !important; \r\n position: static !important; \r\n width: 100% !important; \r\n margin: 0 !important; \r\n padding: 0 !important;\r\n box-shadow: none !important;\r\n border: none !important;\r\n }\r\n\r\n .shadow-2xl, .shadow-xl { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }\r\n \r\n \/* Colores de impresi\u00f3n *\/\r\n .bg-sky-600 { background-color: #0284c7 !important; color: white !important; }\r\n .bg-slate-50 { background-color: #f8fafc !important; }\r\n .bg-white { background-color: white !important; }\r\n .text-white { color: white !important; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-white\">\r\n <div id=\"root\"><\/div>\r\n\r\n \r\n <template id="kZzWryUIXghnWHLzkwOY"></template><\/script>\r\n <template id="hOFk6cgtCgiaV1F5tU4f"></template><\/script>\r\n <template id="7zAbhu707MRs6Oph92uR"></template><\/script>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useEffect } = React;\r\n\r\n \/\/ Componente de Icono SVG Robusto\r\n const Icon = ({ name, className = \"w-5 h-5\", ...props }) => {\r\n const icons = {\r\n CheckCircle: <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" \/>,\r\n Plus: <path d=\"M5 12h14m-7-7v14\" \/>,\r\n Minus: <path d=\"M5 12h14\" \/>,\r\n Info: <><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/>,\r\n CreditCard: <><rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"\/><line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\"\/><\/>,\r\n Zap: <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\" \/>,\r\n Globe: <><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" x2=\"22\" y1=\"12\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/>,\r\n Search: <><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/>,\r\n ShoppingCart: <><circle cx=\"8\" cy=\"21\" r=\"1\"\/><circle cx=\"19\" cy=\"21\" r=\"1\"\/><path d=\"M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12\"\/><\/>,\r\n Calendar: <><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\"\/><line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\"\/><line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\"\/><\/>,\r\n Layers: <><polygon points=\"12 2 2 7 12 12 22 7 12 2\"\/><polyline points=\"2 17 12 22 22 17\"\/><polyline points=\"2 12 12 17 22 12\"\/><\/>,\r\n Check: <polyline points=\"20 6 9 17 4 12\" \/>,\r\n ShieldCheck: <><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/>,\r\n BarChart3: <><path d=\"M3 3v18h18\"\/><path d=\"M18 17V9\"\/><path d=\"M13 17V5\"\/><path d=\"M8 17v-3\"\/><\/>,\r\n MessageCircle: <path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\" \/>,\r\n Sparkles: <><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M19 17v4\"\/><path d=\"M3 5h4\"\/><path d=\"M17 19h4\"\/><\/>,\r\n Loader2: <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" \/>,\r\n Send: <><line x1=\"22\" x2=\"11\" y1=\"2\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/>,\r\n Printer: <><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><rect width=\"12\" height=\"8\" x=\"6\" y=\"14\"\/><\/>,\r\n FileText: <><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" x2=\"8\" y1=\"13\" y2=\"13\"\/><line x1=\"16\" x2=\"8\" y1=\"17\" y2=\"17\"\/><line x1=\"10\" x2=\"8\" y1=\"9\" y2=\"9\"\/><\/>,\r\n Wallet: <><path d=\"M20 12V8H6a2 2 0 0 1-2-2c0-1.1.9-2 2-2h12v4\"\/><rect width=\"16\" height=\"14\" x=\"4\" y=\"8\" rx=\"2\"\/><path d=\"M16 15h.01\"\/><\/>\r\n };\r\n\r\n return (\r\n <svg \r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\" \r\n viewBox=\"0 0 24 24\" \r\n fill=\"none\" \r\n stroke=\"currentColor\" \r\n strokeWidth=\"2\" \r\n strokeLinecap=\"round\" \r\n strokeLinejoin=\"round\" \r\n className={className}\r\n {...props}\r\n >\r\n {icons[name] || null}\r\n <\/svg>\r\n );\r\n };\r\n\r\n const App = () => {\r\n const apiKey = \"\"; \r\n\r\n const PLANS = {\r\n explorer: {\r\n id: 'explorer',\r\n name: 'Web Express Explorer',\r\n monthlyBase: 100,\r\n sections: 5,\r\n description: 'Dise\u00f1o integral en plataforma WordPress (Hasta 5 secciones).',\r\n features: [\r\n 'Hasta 5 secciones incluidas',\r\n 'Formulario de Contacto',\r\n 'Bot\u00f3n de chat con WhatsApp',\r\n 'Integraci\u00f3n multimedia (Video\/Audio)',\r\n 'Iconos RRSS (Conectar\/Seguir\/Compartir)',\r\n 'Complementos de seguridad web',\r\n 'SEO B\u00e1sico (5 secciones)',\r\n 'Google & Bing Search Console \/ Analytics',\r\n 'Mantenimiento por 1 a\u00f1o'\r\n ]\r\n },\r\n expedition: {\r\n id: 'expedition',\r\n name: 'Web Express Expedition',\r\n monthlyBase: 150,\r\n sections: 12,\r\n description: 'Dise\u00f1o integral en plataforma WordPress (Hasta 12 secciones).',\r\n features: [\r\n 'Hasta 12 secciones incluidas',\r\n 'Formulario de Contacto',\r\n 'Bot\u00f3n de chat con WhatsApp',\r\n 'Integraci\u00f3n multimedia avanzada',\r\n 'Iconos RRSS (Conectar\/Seguir\/Compartir)',\r\n 'Complementos de seguridad web reforzada',\r\n 'SEO B\u00e1sico (12 secciones)',\r\n 'Google & Bing Search Console \/ Analytics',\r\n 'Mantenimiento por 1 a\u00f1o'\r\n ]\r\n }\r\n };\r\n\r\n const EXTRAS = [\r\n { id: 'seo_mensual', name: 'SEO Mensual (SERP + AI Tracking)', price: 100, isMonthly: true, icon: \"Search\", desc: 'Seguimiento en buscadores y motores de IA (ChatGPT\/Gemini).' },\r\n { id: 'catalogo', name: 'Cat\u00e1logo de productos o servicios', price: 250, isMonthly: false, icon: \"ShoppingCart\", desc: 'Configuraci\u00f3n profesional con WooCommerce.' },\r\n { id: 'pasarela', name: 'Pasarela de Pago & Carrito', price: 200, isMonthly: false, icon: \"CreditCard\", desc: 'E-commerce completo con carrito de compra.' },\r\n { id: 'booking', name: 'Booking de citas online', price: 150, isMonthly: false, icon: \"Calendar\", desc: 'Gesti\u00f3n de reservas y citas online.' }\r\n ];\r\n\r\n const [selectedPlan, setSelectedPlan] = useState(PLANS.explorer);\r\n const [selectedExtras, setSelectedExtras] = useState([]);\r\n const [extraPages, setExtraPages] = useState(0);\r\n const [blogPosts, setBlogPosts] = useState(0);\r\n const [initialPercent, setInitialPercent] = useState(30); \r\n const [totals, setTotals] = useState({ annual: 0, discounted: 0, downPayment: 0, monthlyInstallment: 0 });\r\n const [businessNiche, setBusinessNiche] = useState(\"\");\r\n const [aiResponse, setAiResponse] = useState(null);\r\n const [isAiLoading, setIsAiLoading] = useState(false);\r\n\r\n useEffect(() => {\r\n let annualTotal = selectedPlan.monthlyBase * 12;\r\n selectedExtras.forEach(id => {\r\n const item = EXTRAS.find(e => e.id === id);\r\n annualTotal += (item.isMonthly ? item.price * 12 : item.price);\r\n });\r\n annualTotal += (extraPages * 50) + (blogPosts * 50);\r\n\r\n const downPayment = annualTotal * (initialPercent \/ 100);\r\n const remaining = annualTotal - downPayment;\r\n const monthlyInstallment = Math.ceil(remaining \/ 11); \r\n\r\n setTotals({ annual: annualTotal, discounted: annualTotal * 0.80, downPayment, monthlyInstallment });\r\n }, [selectedPlan, selectedExtras, extraPages, blogPosts, initialPercent]);\r\n\r\n const toggleExtra = (id) => {\r\n setSelectedExtras(prev => prev.includes(id) ? prev.filter(e => e !== id) : [...prev, id]);\r\n };\r\n\r\n const generateAiStrategy = async () => {\r\n if (!businessNiche.trim()) return;\r\n setIsAiLoading(true);\r\n\r\n const prompt = `Negocio: \"${businessNiche}\". Plan: ${selectedPlan.name}. Responde JSON con sitemap de ${selectedPlan.sections + extraPages} paginas, valueProp impactante y aiStrategy breve sobre como ser indexado por buscadores y LLMs (ChatGPT\/Gemini).`;\r\n\r\n const fetchWithRetry = async (url, options, retries = 5, delay = 1000) => {\r\n for (let i = 0; i <= retries; i++) {\r\n try {\r\n const res = await fetch(url, options);\r\n if (res.ok) return res;\r\n if (res.status !== 429 && res.status < 500) break; \r\n } catch (e) {}\r\n if (i < retries) await new Promise(r => setTimeout(r, delay * Math.pow(2, i)));\r\n }\r\n throw new Error(\"No se pudo conectar con el servidor.\");\r\n };\r\n\r\n try {\r\n const response = await fetchWithRetry(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({\r\n contents: [{ parts: [{ text: prompt }] }],\r\n generationConfig: { responseMimeType: \"application\/json\" }\r\n })\r\n });\r\n const result = await response.json();\r\n setAiResponse(JSON.parse(result.candidates?.[0]?.content?.parts?.[0]?.text || \"{}\"));\r\n } catch (err) { \r\n console.error(err);\r\n } finally { \r\n setIsAiLoading(false); \r\n }\r\n };\r\n\r\n return (\r\n <div className=\"min-h-screen text-slate-900 p-4 md:p-8\">\r\n <div className=\"max-w-[1500px] mx-auto\">\r\n <header className=\"text-center mb-10 no-print\">\r\n <div className=\"inline-flex items-center gap-2 bg-sky-100 text-sky-700 px-4 py-1 rounded-full text-[10px] font-black mb-4 uppercase tracking-[0.2em]\">Propuesta Flexible e Inteligente 2026<\/div>\r\n <h1 className=\"text-4xl md:text-5xl font-black text-slate-900 mb-2 tracking-tighter\">Cotizador Web Express<\/h1>\r\n <p className=\"text-slate-500 max-w-2xl mx-auto text-sm\">Define tu presencia digital con claridad y total transparencia de costos.<\/p>\r\n <\/header>\r\n\r\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-start\">\r\n <div className=\"lg:col-span-8 space-y-6 no-print\">\r\n \r\n {\/* 1. Planes *\/}\r\n <div className=\"bg-blue-50 rounded-[2.5rem] p-8 border border-blue-100\">\r\n <h2 className=\"text-2xl font-black mb-8 flex items-center gap-2 text-blue-900\"><Icon name=\"Globe\" className=\"w-6 h-6 text-blue-600\" \/> 1. Elige tu Plan de Dise\u00f1o<\/h2>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n {Object.values(PLANS).map((plan) => (\r\n <div key={plan.id} onClick={() => setSelectedPlan(plan)} className={`p-6 rounded-[2rem] border-2 cursor-pointer transition-all duration-300 ${selectedPlan.id === plan.id ? 'border-blue-600 bg-white shadow-lg' : 'border-blue-200 bg-white\/50 hover:bg-white'}`}>\r\n <div className=\"flex justify-between items-start mb-2\">\r\n <h3 className=\"text-xl font-bold text-blue-900\">{plan.name}<\/h3>\r\n {selectedPlan.id === plan.id && <Icon name=\"CheckCircle\" className=\"w-6 h-6 text-blue-600\" \/>}\r\n <\/div>\r\n <ul className=\"space-y-2 mb-6\">\r\n {plan.features.map((f, i) => <li key={i} className=\"flex items-start gap-2 text-[11px] text-slate-600 leading-tight\"><Icon name=\"Check\" className=\"w-3 h-3 text-emerald-600 mt-0.5 shrink-0\" \/> {f}<\/li>)}\r\n <\/ul>\r\n <div className=\"text-2xl font-black text-blue-700\">${plan.monthlyBase * 12} <span className=\"text-[10px] text-slate-400 uppercase tracking-widest font-bold\">Inversi\u00f3n Anual<\/span><\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* 2. Contadores *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div className=\"bg-indigo-50 rounded-[1.5rem] p-5 border border-indigo-100 flex items-center justify-between\">\r\n <div className=\"flex items-center gap-3\"><Icon name=\"Layers\" className=\"w-6 h-6 text-indigo-600\" \/><div><h3 className=\"font-bold text-xs uppercase tracking-wider text-indigo-900\">Secciones Extra<\/h3><p className=\"text-[10px] text-indigo-600\/70\">$50 c\/u<\/p><\/div><\/div>\r\n <div className=\"flex items-center gap-3 bg-white rounded-xl p-1.5 border border-indigo-200 shadow-sm\">\r\n <button onClick={() => setExtraPages(Math.max(0, extraPages - 1))} className=\"w-8 h-8 flex items-center justify-center hover:bg-indigo-50 rounded-lg text-indigo-600 font-bold\">-<\/button>\r\n <span className=\"font-black text-lg w-6 text-center text-slate-900\">{extraPages}<\/span>\r\n <button onClick={() => setExtraPages(extraPages + 1)} className=\"w-8 h-8 flex items-center justify-center hover:bg-indigo-50 rounded-lg text-indigo-600 font-bold\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n <div className=\"bg-emerald-50 rounded-[1.5rem] p-5 border border-emerald-100 flex items-center justify-between\">\r\n <div className=\"flex items-center gap-3\"><Icon name=\"FileText\" className=\"w-6 h-6 text-emerald-600\" \/><div><h3 className=\"font-bold text-xs uppercase tracking-wider text-emerald-900\">Blog Posts Pro<\/h3><p className=\"text-[10px] text-emerald-600\/70\">$50 c\/u<\/p><\/div><\/div>\r\n <div className=\"flex items-center gap-3 bg-white rounded-xl p-1.5 border border-emerald-200 shadow-sm\">\r\n <button onClick={() => setBlogPosts(Math.max(0, blogPosts - 1))} className=\"w-8 h-8 flex items-center justify-center hover:bg-emerald-50 rounded-lg text-emerald-600 font-bold\">-<\/button>\r\n <span className=\"font-black text-lg w-6 text-center text-slate-900\">{blogPosts}<\/span>\r\n <button onClick={() => setBlogPosts(blogPosts + 1)} className=\"w-8 h-8 flex items-center justify-center hover:bg-emerald-50 rounded-lg text-emerald-600 font-bold\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* 3. Extras *\/}\r\n <div className=\"bg-amber-50 rounded-[2.5rem] p-8 border border-amber-100\">\r\n <h2 className=\"text-2xl font-black mb-6 flex items-center gap-2 text-amber-900\"><Icon name=\"Zap\" className=\"w-6 h-6 text-amber-600\" \/> 3. Potenciadores de Conversi\u00f3n<\/h2>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\r\n {EXTRAS.map((e) => (\r\n <div key={e.id} onClick={() => toggleExtra(e.id)} className={`p-4 rounded-[1.5rem] border-2 cursor-pointer transition-all duration-300 ${selectedExtras.includes(e.id) ? 'border-amber-500 bg-white shadow-md' : 'border-amber-200 bg-white\/50 hover:bg-white'}`}>\r\n <div className=\"flex justify-between items-center mb-1\">\r\n <div className=\"flex items-center gap-2\">\r\n <Icon name={e.icon} className={`w-5 h-5 ${selectedExtras.includes(e.id) ? 'text-amber-600' : 'text-slate-400'}`} \/>\r\n <h4 className=\"font-bold text-xs text-slate-800\">{e.name}<\/h4>\r\n <\/div>\r\n <span className=\"font-black text-amber-700 text-sm\">${e.price}<\/span>\r\n <\/div>\r\n <p className=\"text-[10px] text-slate-500 italic\">{e.desc}<\/p>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* 4. Flexibilidad de pago *\/}\r\n <div className=\"bg-sky-50 rounded-[2.5rem] p-8 border border-sky-100\">\r\n <h2 className=\"text-2xl font-black mb-6 flex items-center gap-2 text-sky-900\"><Icon name=\"Wallet\" className=\"w-6 h-6 text-sky-600\" \/> 4. Inversi\u00f3n Inicial Flexible<\/h2>\r\n <div className=\"space-y-6\">\r\n <div className=\"flex justify-between items-end\"><p className=\"text-sm text-sky-900\">Porcentaje de entrega inicial:<\/p><span className=\"text-4xl font-black text-sky-600\">{initialPercent}%<\/span><\/div>\r\n <input type=\"range\" min=\"20\" max=\"50\" step=\"5\" value={initialPercent} onChange={(e) => setInitialPercent(parseInt(e.target.value))} className=\"w-full h-3 bg-sky-200 rounded-lg appearance-none cursor-pointer accent-sky-600\" \/>\r\n <div className=\"grid grid-cols-2 gap-6 pt-6 border-t border-sky-200\">\r\n <div className=\"bg-white p-4 rounded-2xl border border-sky-100 shadow-sm\"><p className=\"text-[10px] uppercase font-bold text-slate-400 mb-1 tracking-widest\">Entrega Hoy<\/p><p className=\"text-3xl font-black text-slate-900\">${Math.round(totals.downPayment).toLocaleString()}<\/p><\/div>\r\n <div className=\"bg-white p-4 rounded-2xl border border-sky-100 shadow-sm\"><p className=\"text-[10px] uppercase font-bold text-slate-400 mb-1 tracking-widest\">11 Cuotas de<\/p><p className=\"text-3xl font-black text-slate-900\">${totals.monthlyInstallment.toLocaleString()}<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* AI Hub \u2728 *\/}\r\n <div className=\"bg-slate-100 rounded-[2.5rem] p-8 border border-slate-200 relative overflow-hidden group\">\r\n <div className=\"relative z-10\">\r\n <div className=\"flex items-center gap-2 mb-4\">\r\n <Icon name=\"Sparkles\" className=\"w-6 h-6 text-slate-600\" \/>\r\n <div><h3 className=\"font-bold text-lg text-slate-900\">Asistente Estrat\u00e9gico AI<\/h3><p className=\"text-[10px] text-slate-500 uppercase tracking-widest font-bold\">Arquitectura web personalizada<\/p><\/div>\r\n <\/div>\r\n <div className=\"flex flex-col sm:flex-row gap-3\">\r\n <input type=\"text\" placeholder=\"Giro de tu negocio...\" className=\"flex-1 bg-white border border-slate-300 rounded-2xl px-5 py-4 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-400\" value={businessNiche} onChange={(e) => setBusinessNiche(e.target.value)} \/>\r\n <button onClick={generateAiStrategy} disabled={isAiLoading || !businessNiche} className=\"bg-slate-800 hover:bg-slate-900 text-white px-8 py-4 rounded-2xl text-sm font-black transition-all disabled:opacity-50\">\r\n {isAiLoading ? <Icon name=\"Loader2\" className=\"w-5 h-5 animate-spin mx-auto\" \/> : \"GENERAR \u2728\"}\r\n <\/button>\r\n <\/div>\r\n {aiResponse && (\r\n <div className=\"mt-8 p-6 bg-white rounded-3xl border border-slate-200 shadow-sm animate-in fade-in slide-in-from-top-4 duration-500\">\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8 mb-4\">\r\n <div><p className=\"text-[10px] font-black text-slate-400 mb-3 uppercase tracking-widest\">Sitemap sugerido:<\/p><div className=\"flex flex-wrap gap-2\">{aiResponse.sitemap?.map((s, i) => <span key={i} className=\"text-[10px] bg-slate-100 text-slate-700 px-3 py-1.5 rounded-lg border border-slate-200 font-medium\">{s}<\/span>)}<\/div><\/div>\r\n <div><p className=\"text-[10px] font-black text-slate-400 mb-3 uppercase tracking-widest\">Eslogan:<\/p><p className=\"text-lg italic text-slate-800 font-bold leading-tight\">\"{aiResponse.valueProp}\"<\/p><\/div>\r\n <\/div>\r\n <div className=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\"><p className=\"text-xs text-slate-600 leading-relaxed\">{aiResponse.aiStrategy}<\/p><\/div>\r\n <\/div>\r\n )}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Sidebar de Resumen - \u00c1REA DE IMPRESI\u00d3N *\/}\r\n <div className=\"lg:col-span-4 sticky top-8 print-area\">\r\n <div className=\"bg-white rounded-[2.5rem] p-8 shadow-2xl border border-slate-100 relative overflow-hidden\">\r\n <div className=\"absolute top-0 left-0 w-full h-1.5 bg-sky-500\"><\/div>\r\n \r\n {\/* Cabecera Formal de Cotizaci\u00f3n (Solo visible en PDF) *\/}\r\n <div className=\"hidden print:block mb-8 border-b pb-6\">\r\n <h1 className=\"text-3xl font-black text-slate-900 tracking-tighter uppercase\">Cotizaci\u00f3n de Servicios Web<\/h1>\r\n <div className=\"flex justify-between mt-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest\">\r\n <span>Web Express Explorer 2026<\/span>\r\n <span>Fecha: {new Date().toLocaleDateString()}<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <h2 className=\"text-2xl font-black text-slate-900 mb-8 flex items-center gap-2\"><Icon name=\"BarChart3\" className=\"w-6 h-6 text-sky-500\" \/> Cotizaci\u00f3n Personalizada<\/h2>\r\n \r\n <div className=\"space-y-5 mb-8 text-sm\">\r\n {\/* Detalle del Plan seleccionado *\/}\r\n <div className=\"border-b border-slate-100 pb-3\">\r\n <div className=\"flex justify-between items-center mb-2\">\r\n <span className=\"text-slate-500 uppercase text-[10px] font-bold tracking-widest\">Plan Base Anual<\/span>\r\n <span className=\"text-slate-900 font-black\">{selectedPlan.name}<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between items-center text-slate-900 font-bold mb-4\">\r\n <span>Subtotal<\/span>\r\n <span>${(selectedPlan.monthlyBase * 12).toLocaleString()}<\/span>\r\n <\/div>\r\n {\/* Listado de beneficios en el PDF *\/}\r\n <ul className=\"hidden print:block space-y-1 mb-4 bg-slate-50 p-3 rounded-xl border border-slate-100\">\r\n {selectedPlan.features.map((f, i) => (\r\n <li key={i} className=\"text-[9px] text-slate-500 flex items-center gap-1\">\r\n <Icon name=\"Check\" className=\"w-2.5 h-2.5 text-emerald-500\" \/> {f}\r\n <\/li>\r\n ))}\r\n <\/ul>\r\n <\/div>\r\n\r\n {\/* Desglose de Adicionales en el PDF *\/}\r\n {(extraPages > 0 || blogPosts > 0 || selectedExtras.length > 0) && (\r\n <div className=\"hidden print:block border-b border-slate-100 pb-3 mb-3\">\r\n <span className=\"text-slate-500 uppercase text-[10px] font-bold tracking-widest block mb-2\">Servicios Adicionales Seleccionados<\/span>\r\n <ul className=\"space-y-1.5\">\r\n {extraPages > 0 && (\r\n <li className=\"text-[9px] text-slate-700 flex justify-between\">\r\n <span>\u2022 {extraPages} Secciones adicionales ($50 c\/u)<\/span>\r\n <span className=\"font-bold\">${(extraPages * 50).toLocaleString()}<\/span>\r\n <\/li>\r\n )}\r\n {blogPosts > 0 && (\r\n <li className=\"text-[9px] text-slate-700 flex justify-between\">\r\n <span>\u2022 {blogPosts} Blog Posts Pro ($50 c\/u)<\/span>\r\n <span className=\"font-bold\">${(blogPosts * 50).toLocaleString()}<\/span>\r\n <\/li>\r\n )}\r\n {selectedExtras.map(id => {\r\n const item = EXTRAS.find(e => e.id === id);\r\n const itemPrice = item.isMonthly ? item.price * 12 : item.price;\r\n return (\r\n <li key={id} className=\"text-[9px] text-slate-700 flex justify-between\">\r\n <span>\u2022 {item.name} {item.isMonthly ? '(Inversi\u00f3n Anual)' : ''}<\/span>\r\n <span className=\"font-bold\">${itemPrice.toLocaleString()}<\/span>\r\n <\/li>\r\n );\r\n })}\r\n <\/ul>\r\n <\/div>\r\n )}\r\n\r\n {\/* Resumen de Inversi\u00f3n Final *\/}\r\n <div className=\"bg-slate-50 p-4 rounded-2xl space-y-3\">\r\n <div className=\"flex justify-between text-[10px] font-black uppercase text-sky-600 tracking-widest\">\r\n <span>Total Inversi\u00f3n Proyecto<\/span>\r\n <span className=\"text-base\">${totals.annual.toLocaleString()} USD<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between text-slate-600 border-t border-slate-200 pt-2\">\r\n <span>Entrega Inicial ({initialPercent}%)<\/span>\r\n <span className=\"font-black text-slate-900\">${Math.round(totals.downPayment).toLocaleString()}<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between pt-2 border-t border-slate-200 text-slate-600\">\r\n <span>Saldo en 11 Cuotas de:<\/span>\r\n <span className=\"font-black text-slate-900 text-base\">${totals.monthlyInstallment.toLocaleString()}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Bot\u00f3n de Impresi\u00f3n *\/}\r\n <button onClick={() => window.print()} className=\"w-full py-5 bg-slate-900 hover:bg-black text-white font-black rounded-2xl mb-8 no-print flex items-center justify-center gap-3 shadow-xl transition-all active:scale-95\">\r\n <Icon name=\"Printer\" className=\"w-5 h-5\" \/> GENERAR PDF COTIZACI\u00d3N\r\n <\/button>\r\n\r\n {\/* Oferta de Contado *\/}\r\n <div className=\"bg-gradient-to-br from-sky-600 to-indigo-700 rounded-[2rem] p-7 text-white shadow-xl relative group overflow-hidden\">\r\n <div className=\"absolute top-0 right-0 w-24 h-24 bg-white\/10 rounded-full blur-2xl -mr-12 -mt-12 group-hover:scale-150 transition-transform\"><\/div>\r\n <div className=\"relative z-10\">\r\n <div className=\"flex items-center gap-2 mb-3\"><Icon name=\"Zap\" className=\"w-4 h-4 fill-amber-300 text-amber-300\" \/><p className=\"text-[10px] font-black uppercase tracking-[0.2em]\">OFERTA PAGO DE CONTADO<\/p><\/div>\r\n <div className=\"mb-4\">\r\n <span className=\"text-[10px] font-bold opacity-60 line-through tracking-wider\">Monto Regular: ${totals.annual.toLocaleString()}<\/span>\r\n <div className=\"flex items-baseline gap-2\">\r\n <span className=\"text-5xl font-black tracking-tighter\">${Math.round(totals.discounted).toLocaleString()}<\/span>\r\n <span className=\"text-white\/60 font-black text-xs uppercase font-bold\">Neto<\/span>\r\n <\/div>\r\n <\/div>\r\n <div className=\"bg-white\/20 px-4 py-2 rounded-xl inline-flex items-center gap-2 text-[11px] font-black border border-white\/20 backdrop-blur-lg\">AHORRO DIRECTO: 20%<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Pie de p\u00e1gina de la cotizaci\u00f3n formal *\/}\r\n <div className=\"mt-8 flex gap-2 text-[10px] text-slate-400 font-medium italic border-t border-slate-100 pt-6 leading-relaxed\">\r\n <Icon name=\"Info\" className=\"w-4 h-4 shrink-0 text-sky-500 mt-0.5\" \/>\r\n <div>\r\n <p>Presupuesto profesional v\u00e1lido por 15 d\u00edas calendario.<\/p>\r\n <p className=\"hidden print:block mt-1 text-[9px] text-slate-400 leading-tight\">Esta cotizaci\u00f3n incluye mantenimiento t\u00e9cnico, actualizaciones de seguridad y soporte durante 12 meses de vigencia del contrato.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <footer className=\"mt-20 border-t border-slate-100 pt-12 pb-16 opacity-30 text-center no-print\">\r\n <p className=\"text-[10px] tracking-widest font-bold\">\u00a9 2026 WEB EXPRESS EXPLORER \u2022 SOLUCIONES DIGITALES DE ALTO NIVEL<\/p>\r\n <\/footer>\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cotizador Web Express<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_joinchat":[],"footnotes":""},"class_list":["post-8621","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"David Jose Lazo","author_link":"https:\/\/innovame.com\/en\/author\/davidperez\/"},"uagb_comment_info":0,"uagb_excerpt":"Cotizador Web Express","_links":{"self":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/pages\/8621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/comments?post=8621"}],"version-history":[{"count":0,"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/pages\/8621\/revisions"}],"wp:attachment":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/media?parent=8621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}