{"product_id":"disena-tu-plan-empresarial-ti","title":"Diseña Tu Plan","description":"\u003cscript src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"\u003e\u003c\/script\u003e\n\n\u003cstyle\u003e\n.pricing-container{\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;\n  margin:20px 0;\n  padding:0 10px;\n}\n\n.card{\n  position:relative;\n  width:100%;\n  max-width:750px;\n  padding:30px 20px;\n  border-radius:20px;\n  background:#120101;\n  color:white;\n  overflow:hidden;\n  border:1px solid rgba(255,0,0,0.7);\n  box-shadow:0 0 35px rgba(255,0,0,0.4);\n  box-sizing:border-box;\n}\n\n.card::before{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:radial-gradient(circle at top,rgba(255,0,0,0.25),transparent 70%);\n}\n\n.card canvas{\n  position:absolute;\n  inset:0;\n  z-index:1;\n  pointer-events:none;\n}\n\n.card-content{\n  position:relative;\n  z-index:2;\n}\n\n.brand-tag{\n  font-size:12px;\n  color:#ff4d4d;\n  font-weight:bold;\n  letter-spacing:2px;\n  margin-bottom:5px;\n  display:block;\n}\n\nh2{\n  font-size:24px;\n  margin-bottom:20px;\n  text-transform:uppercase;\n}\n\n.section{\n  margin-bottom:20px;\n  border-bottom:1px solid rgba(255,255,255,0.1);\n  padding-bottom:15px;\n}\n\n.section-title{\n  color:#ff4d4d;\n  font-weight:bold;\n  margin-bottom:10px;\n  text-transform:uppercase;\n  font-size:14px;\n}\n\n.option{\n  margin-bottom:10px;\n  font-size:14px;\n}\n\n.option label{\n  cursor:pointer;\n}\n\nselect,\ninput[type=\"number\"],\ntextarea{\n  width:100%;\n  padding:10px;\n  border-radius:10px;\n  border:none;\n  margin-top:8px;\n  background:#1d1d1d;\n  color:white;\n  box-sizing:border-box;\n}\n\n.days-container{\n  display:grid;\n  grid-template-columns:repeat(2,1fr);\n  gap:8px;\n}\n\n.total-box{\n  background:white;\n  color:black;\n  padding:20px;\n  border-radius:15px;\n  text-align:center;\n  margin-top:20px;\n}\n\n.total-box h3{\n  margin:0;\n  color:#ff0000;\n  font-size:18px;\n}\n\n.total-price{\n  font-size:35px;\n  font-weight:bold;\n  margin-top:10px;\n}\n\n.btn-group{\n  display:flex;\n  gap:10px;\n  margin-top:20px;\n}\n\n.btn{\n  flex:1;\n  padding:14px;\n  border:none;\n  border-radius:999px;\n  cursor:pointer;\n  font-weight:bold;\n  text-transform:uppercase;\n}\n\n.btn-main{\n  background:white;\n  color:black;\n}\n\n.btn-pdf{\n  background:#ff0000;\n  color:white;\n}\n\n.error{\n  color:#ff8c8c;\n  font-size:12px;\n  margin-top:5px;\n}\n\n@media(max-width:600px){\n  .btn-group{\n    flex-direction:column;\n  }\n}\n\u003c\/style\u003e\n\n\u003cdiv class=\"pricing-container\"\u003e\n\n\u003cdiv class=\"card\"\u003e\n\n\u003ccanvas id=\"moleculeCanvas\"\u003e\u003c\/canvas\u003e\n\n\u003cdiv class=\"card-content\"\u003e\n\n\u003cspan class=\"brand-tag\"\u003e\nSUMERTECCR | PLAN EMPRESARIAL PERSONALIZADO\n\u003c\/span\u003e\n\n\u003ch2\u003eCONFIGURADOR DE SERVICIO TI\u003c\/h2\u003e\n\n\u003cp style=\"text-align:center;color:white;font-weight:bold;margin-bottom:20px;font-size:15px;\"\u003e\nTermina de llenar el configurador para poder obtener el Precio total.\n\u003c\/p\u003e\n\n\u003c!-- HORAS --\u003e\n\u003cdiv class=\"section\"\u003e\n\n\u003cdiv class=\"section-title\"\u003e\nHoras de Trabajo por Día\n\u003c\/div\u003e\n\n\u003cdiv class=\"option\"\u003e\n\u003clabel\u003e\n\u003cinput type=\"radio\" name=\"horas\" value=\"4\" onchange=\"actualizarHoras()\"\u003e\n4 Horas - ₡8.000\n\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"option\"\u003e\n\u003clabel\u003e\n\u003cinput type=\"radio\" name=\"horas\" value=\"8\" onchange=\"actualizarHoras()\"\u003e\n8 Horas - ₡16.000\n\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003c!-- SEMANAS --\u003e\n\u003cdiv class=\"section\"\u003e\n\n\u003cdiv class=\"section-title\"\u003e\nCantidad de Semanas que el Tecnico Asistira\n\u003c\/div\u003e\n\n\u003cselect id=\"semanas\"\u003e\n\u003coption value=\"1\"\u003e1 Semana\u003c\/option\u003e\n\u003coption value=\"2\"\u003e2 Semanas\u003c\/option\u003e\n\u003coption value=\"3\"\u003e3 Semanas\u003c\/option\u003e\n\u003coption value=\"4\"\u003e4 Semanas\u003c\/option\u003e\n\u003c\/select\u003e\n\n\u003c\/div\u003e\n\n\u003c!-- HORARIO --\u003e\n\u003cdiv class=\"section\"\u003e\n\n\u003cdiv class=\"section-title\"\u003e\nHorario del Técnico\n\u003c\/div\u003e\n\n\u003cselect id=\"horaInicio\"\u003e\n\u003coption value=\"\"\u003eHora Inicio\u003c\/option\u003e\n\u003c\/select\u003e\n\n\u003cselect id=\"horaFin\"\u003e\n\u003coption value=\"\"\u003eHora Final\u003c\/option\u003e\n\u003c\/select\u003e\n\n\u003cdiv class=\"error\" id=\"horarioError\"\u003e\u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003c!-- DIAS --\u003e\n\u003cdiv class=\"section\"\u003e\n\n\u003cdiv class=\"section-title\"\u003e\nDías de Servicio\n\u003c\/div\u003e\n\n\u003cdiv class=\"days-container\"\u003e\n\u003clabel\u003e\u003cinput type=\"checkbox\" class=\"dia\"\u003e Lunes\u003c\/label\u003e\n\u003clabel\u003e\u003cinput type=\"checkbox\" class=\"dia\"\u003e Martes\u003c\/label\u003e\n\u003clabel\u003e\u003cinput type=\"checkbox\" class=\"dia\"\u003e Miércoles\u003c\/label\u003e\n\u003clabel\u003e\u003cinput type=\"checkbox\" class=\"dia\"\u003e Jueves\u003c\/label\u003e\n\u003clabel\u003e\u003cinput type=\"checkbox\" class=\"dia\"\u003e Viernes\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003c!-- SERVICIOS --\u003e\n\u003cdiv class=\"section\"\u003e\n\n\u003cdiv class=\"section-title\"\u003e\nServicios Incluidos\n\u003c\/div\u003e\n\n\u003cdiv class=\"option\"\u003e\n\u003clabel\u003e\n\u003cinput type=\"checkbox\" class=\"servicio\" data-price=\"25000\"\u003e\nSoporte TI a Equipos de Computo - ₡25.000\n\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"option\"\u003e\n\u003clabel\u003e\n\u003cinput type=\"checkbox\" class=\"servicio\" data-price=\"35000\"\u003e\nSoporte a Infraestructura en Sistemas, Redes y Cableado - ₡35.000\n\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"option\"\u003e\n\u003clabel\u003e\n\u003cinput type=\"checkbox\" class=\"servicio\" data-price=\"8900\"\u003e\nBeneficios Exclusivos Sumerteccr - ₡8.900\n\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"option\"\u003e\n\u003clabel\u003e\n\u003cinput type=\"checkbox\" class=\"servicio\" data-price=\"40000\"\u003e\nMonitoreo mediante ESET Security - ₡40.000\n\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"option\"\u003e\n\u003clabel\u003e\n\u003cinput type=\"checkbox\" class=\"servicio\" data-price=\"10000\"\u003e\nEvaluación y Recomendaciones - ₡10.000\n\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"option\"\u003e\n\u003clabel\u003e\n\u003cinput type=\"checkbox\" class=\"servicio\" data-price=\"15000\"\u003e\nAdministración de Office 365 y Servidores - ₡15.000\n\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"option\"\u003e\n\u003clabel\u003e\n\u003cinput type=\"checkbox\" class=\"servicio\" data-price=\"8000\"\u003e\nMantenimiento a Impresoras - ₡8.000\n\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"option\"\u003e\n\u003clabel\u003e\n\u003cinput type=\"checkbox\" class=\"servicio\" data-price=\"25000\"\u003e\nSoporte de Urgencia - ₡25.000\n\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"option\"\u003e\n\u003clabel\u003e\n\u003cinput type=\"checkbox\" class=\"servicio\" data-price=\"20000\"\u003e\nMantenimiento de Cámaras y Monitoreo - ₡20.000\n\u003c\/label\u003e\n\u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003c!-- EQUIPOS --\u003e\n\u003cdiv class=\"section\"\u003e\n\n\u003cdiv class=\"section-title\"\u003e\nCantidad de Equipos\n\u003c\/div\u003e\n\n\u003cinput type=\"number\" id=\"equipos\" min=\"1\" placeholder=\"Cantidad de Equipos\"\u003e\n\n\u003cdiv class=\"error\" id=\"equiposError\"\u003e\u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003c!-- MANTENIMIENTO --\u003e\n\u003cdiv class=\"section\"\u003e\n\n\u003cdiv class=\"section-title\"\u003e\nMantenimientos al Año\n\u003c\/div\u003e\n\n\u003cselect id=\"mantenimientos\"\u003e\n\u003coption value=\"0\"\u003eSeleccione\u003c\/option\u003e\n\u003coption value=\"1\"\u003e1 Mantenimiento\u003c\/option\u003e\n\u003coption value=\"2\"\u003e2 Mantenimientos\u003c\/option\u003e\n\u003coption value=\"3\"\u003e3 Mantenimientos\u003c\/option\u003e\n\u003c\/select\u003e\n\n\u003c\/div\u003e\n\n\u003c!-- INFORMACION ADICIONAL --\u003e\n\u003cdiv class=\"section\"\u003e\n\n\u003cdiv class=\"section-title\"\u003e\nInformación Adicional\n\u003c\/div\u003e\n\n\u003ctextarea id=\"infoAdicional\" placeholder=\"Escriba aquí cualquier solicitud adicional...\" style=\"min-height:120px;resize:vertical;\"\u003e\n\u003c\/textarea\u003e\n\n\u003c\/div\u003e\n\n\u003c!-- TOTAL --\u003e\n\u003cdiv class=\"total-box\"\u003e\n\n\u003ch3\u003eTOTAL MENSUAL\u003c\/h3\u003e\n\n\u003cdiv class=\"total-price\" id=\"total\"\u003e\n₡0\n\u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003c!-- BOTONES --\u003e\n\u003cdiv class=\"btn-group\"\u003e\n\n\u003cbutton class=\"btn btn-main\" onclick=\"contactarWhatsApp()\"\u003e\nConsultar Disponibilidad\n\u003c\/button\u003e\n\n\u003cbutton class=\"btn btn-pdf\" onclick=\"descargarPDF()\"\u003e\nDescargar PDF\n\u003c\/button\u003e\n\n\u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\nconst PRECIO_MANTENIMIENTO = 35000;\n\ndocument.querySelectorAll('.dia').forEach(el=\u003e{\nel.addEventListener('change', calcularTotal);\n});\n\ndocument.querySelectorAll('.servicio').forEach(el=\u003e{\nel.addEventListener('change', calcularTotal);\n});\n\ndocument.getElementById('equipos').addEventListener('input', calcularTotal);\ndocument.getElementById('mantenimientos').addEventListener('change', calcularTotal);\ndocument.getElementById('semanas').addEventListener('change', calcularTotal);\n\nfunction actualizarHoras(){\n\nconst inicio = document.getElementById('horaInicio');\nconst fin = document.getElementById('horaFin');\n\ninicio.innerHTML = '\u003coption value=\"\"\u003eHora Inicio\u003c\/option\u003e';\nfin.innerHTML = '\u003coption value=\"\"\u003eHora Final\u003c\/option\u003e';\n\nconst horasDisponibles = [\n\"8:00 AM\",\n\"9:00 AM\",\n\"10:00 AM\",\n\"11:00 AM\",\n\"12:00 PM\",\n\"1:00 PM\",\n\"2:00 PM\",\n\"3:00 PM\",\n\"4:00 PM\",\n\"5:00 PM\"\n];\n\nhorasDisponibles.forEach(h=\u003e{\ninicio.innerHTML += `\u003coption value=\"${h}\"\u003e${h}\u003c\/option\u003e`;\nfin.innerHTML += `\u003coption value=\"${h}\"\u003e${h}\u003c\/option\u003e`;\n});\n\ncalcularTotal();\n\n}\n\nfunction calcularTotal(){\n\nlet total = 0;\n\nconst horas = document.querySelector('input[name=\"horas\"]:checked');\n\nconst dias = document.querySelectorAll('.dia:checked').length;\n\nconst semanas = Number(document.getElementById('semanas').value || 1);\n\nif(horas){\n\nif(horas.value == \"4\"){\ntotal += ((8000 * dias) + (2000 * dias)) * semanas;\n}\n\nif(horas.value == \"8\"){\ntotal += ((16000 * dias) + (4000 * dias)) * semanas;\n}\n\n}\n\ndocument.querySelectorAll('.servicio:checked').forEach(serv=\u003e{\ntotal += Number(serv.dataset.price);\n});\n\nconst equipos = Number(document.getElementById('equipos').value || 0);\n\nif(equipos \u003e 0){\ntotal += equipos * 4000;\n}\n\nconst mantenimientos = Number(document.getElementById('mantenimientos').value || 0);\n\ntotal += mantenimientos * PRECIO_MANTENIMIENTO;\n\ndocument.getElementById('total').innerText =\n\"₡\" + total.toLocaleString('es-CR');\n\n}\n\nfunction validarFormulario(){\n\nlet valido = true;\n\nconst equipos = document.getElementById('equipos').value;\nconst horaInicio = document.getElementById('horaInicio').value;\nconst horaFin = document.getElementById('horaFin').value;\n\ndocument.getElementById('equiposError').innerText = \"\";\ndocument.getElementById('horarioError').innerText = \"\";\n\nif(!equipos || equipos \u003c= 0){\ndocument.getElementById('equiposError').innerText =\n\"La cantidad de equipos es obligatoria.\";\nvalido = false;\n}\n\nif(!horaInicio || !horaFin){\ndocument.getElementById('horarioError').innerText =\n\"Debe seleccionar un horario.\";\nvalido = false;\n}\n\nreturn valido;\n\n}\n\nfunction contactarWhatsApp(){\n\nif(!validarFormulario()){\nreturn;\n}\n\nconst total = document.getElementById('total').innerText;\n\nconst mensaje =\n`Hola Sumerteccr, estoy interesado en un plan empresarial personalizado.\n\nEl total estimado es de ${total}`;\n\nwindow.open(\n`https:\/\/wa.me\/50661916581?text=${encodeURIComponent(mensaje)}`,\n'_blank'\n);\n\n}\n\nfunction descargarPDF(){\n\nif(!validarFormulario()){\nreturn;\n}\n\nconst horas =\ndocument.querySelector('input[name=\"horas\"]:checked')?.parentElement.innerText || \"No seleccionado\";\n\nconst dias =\nArray.from(document.querySelectorAll('.dia:checked'))\n.map(el=\u003eel.parentElement.innerText.trim())\n.join(', ') || \"No seleccionado\";\n\nconst servicios =\nArray.from(document.querySelectorAll('.servicio:checked'))\n.map(el=\u003e`• ${el.parentElement.innerText.trim()}`)\n.join('\u003cbr\u003e') || \"No seleccionado\";\n\nconst semanas =\ndocument.getElementById('semanas').value;\n\nconst equipos =\ndocument.getElementById('equipos').value || \"0\";\n\nconst mantenimientos =\ndocument.getElementById('mantenimientos').value;\n\nconst horaInicio =\ndocument.getElementById('horaInicio').value || \"No seleccionado\";\n\nconst horaFin =\ndocument.getElementById('horaFin').value || \"No seleccionado\";\n\nconst infoAdicional =\ndocument.getElementById('infoAdicional').value || \"Sin información adicional.\";\n\nconst total =\ndocument.getElementById('total').innerText;\n\nconst resumen = document.createElement('div');\n\nresumen.style.background = \"#ffffff\";\nresumen.style.color = \"#000000\";\nresumen.style.padding = \"30px\";\nresumen.style.fontFamily = \"Arial\";\nresumen.style.width = \"100%\";\n\nresumen.innerHTML = `\n\n\u003cdiv style=\"width:100%;\"\u003e\n\n\u003ch1 style=\"color:#b30000;font-size:28px;\"\u003e\nSUMERTECCR\n\u003c\/h1\u003e\n\n\u003ch2 style=\"font-size:18px;color:#222;\"\u003e\nPlan Empresarial Personalizado\n\u003c\/h2\u003e\n\n\u003chr style=\"margin:20px 0;\"\u003e\n\n\u003ch3\u003eHoras Seleccionadas\u003c\/h3\u003e\n\u003cp\u003e${horas}\u003c\/p\u003e\n\n\u003ch3\u003eHorario Seleccionado\u003c\/h3\u003e\n\u003cp\u003e${horaInicio} a ${horaFin}\u003c\/p\u003e\n\n\u003ch3\u003eCantidad de Semanas\u003c\/h3\u003e\n\u003cp\u003e${semanas}\u003c\/p\u003e\n\n\u003ch3\u003eDías Seleccionados\u003c\/h3\u003e\n\u003cp\u003e${dias}\u003c\/p\u003e\n\n\u003ch3\u003eServicios Incluidos\u003c\/h3\u003e\n\u003cp\u003e${servicios}\u003c\/p\u003e\n\n\u003ch3\u003eCantidad de Equipos\u003c\/h3\u003e\n\u003cp\u003e${equipos}\u003c\/p\u003e\n\n\u003ch3\u003eMantenimientos al Año\u003c\/h3\u003e\n\u003cp\u003e${mantenimientos}\u003c\/p\u003e\n\n\u003ch3\u003eInformación Adicional\u003c\/h3\u003e\n\u003cp style=\"border:1px solid #ccc;padding:12px;border-radius:10px;background:#f5f5f5;\"\u003e\n${infoAdicional}\n\u003c\/p\u003e\n\n\u003chr style=\"margin:25px 0;\"\u003e\n\n\u003ch2 style=\"color:#b30000;font-size:26px;\"\u003e\nTOTAL MENSUAL: ${total}\n\u003c\/h2\u003e\n\n\u003c\/div\u003e\n\n`;\n\ndocument.body.appendChild(resumen);\n\nconst opt = {\nmargin:10,\nfilename:'Plan_Empresarial_Sumerteccr.pdf',\nimage:{\ntype:'jpeg',\nquality:1\n},\nhtml2canvas:{\nscale:3,\nuseCORS:true,\nbackgroundColor:\"#ffffff\"\n},\njsPDF:{\nunit:'mm',\nformat:'a4',\norientation:'portrait'\n}\n};\n\nhtml2pdf()\n.set(opt)\n.from(resumen)\n.save()\n.then(()=\u003e{\ndocument.body.removeChild(resumen);\n});\n\n}\n\n\/\/ =========================\n\/\/ MOLECULAS\n\/\/ =========================\n\nconst canvas = document.getElementById('moleculeCanvas');\nconst ctx = canvas.getContext('2d');\n\nlet points = [];\n\nfunction resize(){\ncanvas.width = canvas.parentElement.offsetWidth;\ncanvas.height = canvas.parentElement.offsetHeight;\n}\n\nwindow.addEventListener('resize', resize);\n\nresize();\n\nfor(let i=0;i\u003c45;i++){\n\npoints.push({\nx:Math.random()*canvas.width,\ny:Math.random()*canvas.height,\nr:Math.random()*2+1,\ndx:(Math.random()-0.5)*0.8,\ndy:(Math.random()-0.5)*0.8\n});\n\n}\n\nfunction animate(){\n\nctx.clearRect(0,0,canvas.width,canvas.height);\n\npoints.forEach((p,i)=\u003e{\n\np.x += p.dx;\np.y += p.dy;\n\nif(p.x\u003c0 || p.x\u003ecanvas.width) p.dx*=-1;\nif(p.y\u003c0 || p.y\u003ecanvas.height) p.dy*=-1;\n\nfor(let j=i+1;j\u003cpoints.length;j++){\n\nlet p2 = points[j];\n\nlet dist = Math.hypot(p.x-p2.x,p.y-p2.y);\n\nif(dist \u003c 85){\n\nctx.beginPath();\nctx.moveTo(p.x,p.y);\nctx.lineTo(p2.x,p2.y);\n\nctx.strokeStyle = `rgba(255,0,0,${1-dist\/85})`;\nctx.lineWidth = 0.5;\nctx.stroke();\n\n}\n\n}\n\nctx.beginPath();\n\nctx.arc(p.x,p.y,p.r,0,Math.PI*2);\n\nctx.fillStyle = \"rgba(255,0,0,0.6)\";\nctx.fill();\n\n});\n\nrequestAnimationFrame(animate);\n\n}\n\nanimate();\n\n\u003c\/script\u003e","brand":"Sumerteccr","offers":[{"title":"Default Title","offer_id":42225450188855,"sku":null,"price":0.0,"currency_code":"CRC","in_stock":true}],"url":"https:\/\/www.sumerteccr.com\/products\/disena-tu-plan-empresarial-ti","provider":"Sumerteccr","version":"1.0","type":"link"}