Presupuestador de Servicios de Filmación, Fotografía, Diseño y Marketing Digital<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Work+Sans:wght@300&display=swap');\n\n \/* Previous CSS styles remain the same *\/\n \/* Applying some visual enhancements *\/\n\n .section {\n position: relative;\n overflow: hidden;\n }\n\n .section::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, var(--primary-color), var(--accent-color));\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .section:hover::before {\n opacity: 1;\n }\n\n button {\n position: relative;\n overflow: hidden;\n }\n\n button::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 5px;\n height: 5px;\n background: rgba(255, 255, 255, 0.5);\n opacity: 0;\n border-radius: 100%;\n transform: translate(-50%, -50%) scale(1);\n transition: transform 0.6s, opacity 0.6s;\n }\n\n button:active::after {\n transform: translate(-50%, -50%) scale(20);\n opacity: 0;\n }\n\n .result-animation {\n animation: slideIn 0.5s ease-out;\n }\n\n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Enhancement for form elements *\/\n select, input[type=\"number\"] {\n background: linear-gradient(145deg, #1a1a1a, #222);\n box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);\n }\n\n \/* Loading animation for download *\/\n .loading {\n display: inline-block;\n width: 20px;\n height: 20px;\n border: 3px solid rgba(255,255,255,.3);\n border-radius: 50%;\n border-top-color: #fff;\n animation: spin 1s ease-in-out infinite;\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n \/* Toast notification styles *\/\n .toast {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background: var(--accent-color);\n color: white;\n padding: 1rem 2rem;\n border-radius: 4px;\n animation: toastIn 0.5s ease-out;\n z-index: 1000;\n }\n\n @keyframes toastIn {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n\n \/* Additional styles for better visual hierarchy *\/\n :root {\n --primary-color: #000080;\n --secondary-color: #ffffff;\n --background-color: #000000;\n --text-color: #ffffff;\n --accent-color: #4CAF50;\n --section-bg: #111111;\n }\n\n body {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n }\n\n .banner {\n background-color: var(--primary-color);\n color: var(--secondary-color);\n padding: 2rem 0;\n text-align: center;\n }\n\n .banner h1 {\n font-family: 'Work Sans', sans-serif;\n color: #ffffff;\n font-size: 2rem;\n letter-spacing: 0.5px;\n margin: 0;\n text-shadow: 1px 1px 3px rgba(0,0,0,0.2);\n }\n\n .container {\n max-width: 800px;\n margin: 2rem auto;\n padding: 2rem;\n background-color: var(--section-bg);\n box-shadow: 0 10px 20px rgba(255,255,255,0.1);\n border-radius: 8px;\n }\n\n h2, h3 {\n color: var(--secondary-color);\n margin-bottom: 1rem;\n }\n\n .section {\n margin-bottom: 2rem;\n padding: 1.5rem;\n background-color: #222222;\n border-radius: 8px;\n transition: all 0.3s ease;\n }\n\n .section:hover {\n box-shadow: 0 5px 15px rgba(255,255,255,0.1);\n }\n\n label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n color: var(--secondary-color);\n }\n\n select, input[type=\"number\"] {\n width: 100%;\n padding: 0.8rem;\n margin-bottom: 1rem;\n border: 1px solid var(--primary-color);\n border-radius: 4px;\n font-size: 1rem;\n transition: border-color 0.3s ease;\n background-color: var(--section-bg);\n color: var(--secondary-color);\n }\n\n select:focus, input[type=\"number\"]:focus {\n outline: none;\n border-color: var(--accent-color);\n }\n\n button {\n background-color: var(--primary-color);\n color: var(--secondary-color);\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease;\n margin-right: 10px;\n margin-bottom: 10px;\n }\n\n button:hover {\n background-color: #000066;\n }\n\n button.active {\n background-color: var(--accent-color);\n }\n\n @keyframes floatClouds {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }\n\n .cloud {\n position: absolute;\n opacity: 0.1;\n z-index: -1;\n animation: floatClouds 60s linear infinite;\n }\n\n .cloud-bg {\n position: relative;\n overflow: hidden;\n background: linear-gradient(to bottom, #000000, #111111);\n border-radius: 12px;\n padding: 2rem;\n }\n\n #resultado {\n background: rgba(17, 17, 17, 0.8);\n backdrop-filter: blur(10px);\n border-radius: 12px;\n padding: 2rem;\n margin: 2rem 0;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n }\n\n #resultado h3 {\n font-family: 'Work Sans', sans-serif;\n font-weight: 200;\n color: #87CEEB;\n letter-spacing: 1px;\n margin-bottom: 2rem;\n }\n\n .thank-you-message {\n margin-top: 2rem;\n padding: 1.5rem;\n background-color: rgba(135, 206, 235, 0.1);\n border-radius: 8px;\n text-align: center;\n font-style: italic;\n color: #87CEEB;\n }\n\n .logo {\n display: block;\n margin: 0 auto 1rem;\n max-width: 150px;\n height: auto;\n }\n\n @media (max-width: 600px) {\n .container {\n padding: 1rem;\n margin: 1rem;\n }\n }\n\n \/* Update input field styling *\/\n .section input[type=\"text\"] {\n width: 100%;\n padding: 1rem;\n margin: 0.5rem 0;\n border: 2px solid var(--primary-color);\n border-radius: 8px;\n font-size: 1.1rem;\n background: linear-gradient(145deg, #1a1a1a, #222);\n color: var(--secondary-color);\n transition: all 0.3s ease;\n box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);\n }\n\n .section input[type=\"text\"]:focus {\n outline: none;\n border-color: var(--accent-color);\n box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);\n transform: translateY(-2px);\n }\n\n .section input[type=\"text\"]::placeholder {\n color: rgba(255,255,255,0.5);\n font-style: italic;\n }\n\n \/* Update section containing service name *\/\n .section:first-of-type {\n background: linear-gradient(145deg, #111111, #1a1a1a);\n border-left: 4px solid var(--accent-color);\n margin-top: 2rem;\n margin-bottom: 2rem;\n padding: 1.5rem 2rem;\n border-radius: 0 8px 8px 0;\n }\n\n .section:first-of-type label {\n font-size: 1.1rem;\n font-weight: 300;\n letter-spacing: 0.5px;\n color: var(--accent-color);\n margin-bottom: 1rem;\n display: block;\n }\n\n .copy-button {\n position: relative;\n background-color: #4CAF50;\n margin-bottom: 20px;\n width: 100%;\n text-align: left;\n padding: 15px;\n }\n\n .copy-button:hover {\n background-color: #45a049;\n }\n\n .copy-button .tooltip {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 0.8em;\n opacity: 0.7;\n }\n\n .copy-button.copied {\n background-color: #45a049;\n animation: flash 0.5s;\n }\n\n @keyframes flash {\n 0% { background-color: #4CAF50; }\n 50% { background-color: #45a049; }\n 100% { background-color: #4CAF50; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"banner\">\n <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i.imgur.com\/YvEDrAv.png\" alt=\"Logo de la empresa, diseño minimalista con letras CDA en azul marino\" class=\"logo\" width=\"150\" height=\"150\">\n <h1>Presupuestador automático de servicios – Gleztin Marketing Digital<\/h1>\n <\/div>\n <div class=\"section\">\n <label for=\"nombreServicio\">Nombre del Servicio (opcional):<\/label>\n <input type=\"text\" id=\"nombreServicio\" placeholder=\"Ej: Campaña Verano 2024\">\n <\/div>\n <div class=\"container cloud-bg\">\n <div class=\"section\">\n <h2>Seleccione los servicios:<\/h2>\n <button id=\"btnFilmacion\" onclick=\"toggleServicio('filmacion')\">Filmación<\/button>\n <button id=\"btnEdicion\" onclick=\"toggleServicio('edicion')\">Edición<\/button>\n <button id=\"btnDiseno\" onclick=\"toggleServicio('diseno')\">Diseño de Imagen<\/button>\n <button id=\"btnHistorias\" onclick=\"toggleServicio('historias')\">Historias<\/button>\n <button id=\"btnCampanas\" onclick=\"toggleServicio('campanas')\">Campañas de Marketing Digital<\/button>\n <button id=\"btnGooglemaps\" onclick=\"toggleServicio('googlemaps')\">Google Maps<\/button>\n <button id=\"btnWebsite\" onclick=\"toggleServicio('website')\">Sitio Web<\/button>\n <button id=\"btnRedsocial\" onclick=\"toggleServicio('redsocial')\">Diseño de Redes Sociales<\/button>\n <button id=\"btnAppweb\" onclick=\"toggleServicio('appweb')\">Aplicación Web Interna<\/button>\n <button id=\"btnPersonalizado\" onclick=\"toggleServicio('personalizado')\">Presupuesto Personalizado<\/button>\n <\/div>\n\n <div id=\"seccionFilmacion\" class=\"section\" style=\"display:none;\">\n <h2>1. Grabación de Sesi\u00f3n<\/h2>\n <label for=\"descripcionFilmacion\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionFilmacion\" rows=\"4\" placeholder=\"Describa los detalles de la filmación...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionFilmacion\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionFilmacion\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <div style=\"margin-bottom: 1rem;\">\n <label>\n <input type=\"checkbox\" id=\"televisionFilmacion\" onchange=\"calcularPresupuesto()\">\n Para Televisi\u00f3n (50% adicional)\n <\/label>\n <\/div>\n <label for=\"duracion\">Duración de la sesión:<\/label>\n <select id=\"duracion\">\n <option value=\"1\">Mínimo: 1 hora – AR$ 41.580<\/option>\n <option value=\"2\">Mínimo: 2 horas – AR$ 81.500<\/option>\n <option value=\"4\">Media jornada: 4 horas – AR$ 159.670<\/option>\n <option value=\"6\">Media jornada plus: 6 horas – AR$ 234.500<\/option>\n <option value=\"8\">Jornada completa: 8 horas – AR$ 306.030<\/option>\n <option value=\"12\">Jornada completa plus: 12 horas – AR$ 449.060<\/option>\n <\/select>\n <label for=\"horasAdicionales\">Horas adicionales:<\/label>\n <input type=\"number\" id=\"horasAdicionales\" min=\"0\" value=\"0\">\n <label for=\"asistente\">Horas de asistente (2da cámara):<\/label>\n <input type=\"number\" id=\"asistente\" min=\"0\" value=\"0\">\n <label for=\"distancia\">Distancia a recorrer (km):<\/label>\n <input type=\"number\" id=\"distancia\" min=\"0\" value=\"0\">\n <\/div>\n\n <div id=\"seccionEdicion\" class=\"section\" style=\"display:none;\">\n <h2>2. Edición de Video<\/h2>\n <label for=\"descripcionEdicion\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionEdicion\" rows=\"4\" placeholder=\"Describa los detalles de la edición...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionEdicion\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionEdicion\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <div style=\"margin-bottom: 1rem;\">\n <label>\n <input type=\"checkbox\" id=\"televisionEdicion\" onchange=\"calcularPresupuesto()\">\n Para Televisi\u00f3n (50% adicional)\n <\/label>\n <\/div>\n <label for=\"minutos\">Minutos de edición:<\/label>\n <input type=\"number\" id=\"minutos\" min=\"0\" value=\"0\">\n <label for=\"complejidad\">Nivel de complejidad:<\/label>\n <select id=\"complejidad\">\n <option value=\"simple\">Simple<\/option>\n <option value=\"intermedio\">Intermedio<\/option>\n <option value=\"avanzado\">Avanzado<\/option>\n <\/select>\n <\/div>\n\n <div id=\"seccionDiseno\" class=\"section\" style=\"display:none;\">\n <h2>3. Diseño de Imagen<\/h2>\n <label for=\"descripcionDiseno\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionDiseno\" rows=\"4\" placeholder=\"Describa los detalles del diseño...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionDiseno\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionDiseno\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadDisenos\">Cantidad de diseños:<\/label>\n <input type=\"number\" id=\"cantidadDisenos\" min=\"1\" value=\"1\">\n <label for=\"complejidadDiseno\">Nivel de complejidad:<\/label>\n <select id=\"complejidadDiseno\">\n <option value=\"simple\">Simple<\/option>\n <option value=\"intermedio\">Intermedio<\/option>\n <option value=\"avanzado\">Avanzado<\/option>\n <\/select>\n <\/div>\n\n <div id=\"seccionHistorias\" class=\"section\" style=\"display:none;\">\n <h2>4. Historias<\/h2>\n <label for=\"descripcionHistorias\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionHistorias\" rows=\"4\" placeholder=\"Describa los detalles de las historias...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionHistorias\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionHistorias\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadHistorias\">Cantidad de historias:<\/label>\n <input type=\"number\" id=\"cantidadHistorias\" min=\"1\" value=\"1\">\n <label for=\"tipoHistoria\">Tipo de historia:<\/label>\n <select id=\"tipoHistoria\">\n <option value=\"simple\">Simple (AR$ 3.000)<\/option>\n <option value=\"intermedia\">Intermedia (AR$ 6.000)<\/option>\n <option value=\"seguimiento\">Con seguimiento (AR$ 9.000)<\/option>\n <\/select>\n <\/div>\n\n <div id=\"seccionCampanas\" class=\"section\" style=\"display:none;\">\n <h2>5. Campañas de Marketing Digital<\/h2>\n <label for=\"descripcionCampanas\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionCampanas\" rows=\"4\" placeholder=\"Describa los detalles de la campaña...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionCampanas\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionCampanas\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadCampanas\">Cantidad de campañas:<\/label>\n <input type=\"number\" id=\"cantidadCampanas\" min=\"1\" value=\"1\">\n <p><strong>Precio por campaña:<\/strong> AR$ 60.000<\/p>\n <\/div>\n\n <div id=\"seccionGooglemaps\" class=\"section\" style=\"display:none;\">\n <h2>Google Maps<\/h2>\n <label for=\"descripcionGooglemaps\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionGooglemaps\" rows=\"4\" placeholder=\"Describa los detalles del proyecto de Google Maps...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionGooglemaps\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionGooglemaps\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadPerfiles\">Cantidad de perfiles:<\/label>\n <input type=\"number\" id=\"cantidadPerfiles\" min=\"1\" value=\"1\">\n <p><strong>Precio base por perfil:<\/strong> AR$ 100.000<\/p>\n <label for=\"cantidadImagenes\">Cantidad de imágenes a diseñar:<\/label>\n <input type=\"number\" id=\"cantidadImagenes\" min=\"1\" value=\"1\">\n <label for=\"cantidadProductos\">Cantidad de productos para cargar:<\/label>\n <input type=\"number\" id=\"cantidadProductos\" min=\"1\" value=\"1\">\n <\/div>\n\n <div id=\"seccionWebsite\" class=\"section\" style=\"display:none;\">\n <h2>Sitio Web<\/h2>\n <label for=\"descripcionWebsite\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionWebsite\" rows=\"4\" placeholder=\"Describa los detalles y requerimientos del sitio web...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionWebsite\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionWebsite\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"tipoWeb\">Tipo de proyecto:<\/label>\n <select id=\"tipoWeb\">\n <option value=\"nuevo\">Sitio Web Nuevo<\/option>\n <option value=\"remodelacion\">Remodelación de Sitio Existente (50% descuento)<\/option>\n <\/select>\n\n <label for=\"cantidadSecciones\">Número de secciones:<\/label>\n <input type=\"number\" id=\"cantidadSecciones\" min=\"1\" value=\"5\">\n <label for=\"cantidadProductosWeb\">Número de productos:<\/label>\n <input type=\"number\" id=\"cantidadProductosWeb\" min=\"1\" value=\"25\">\n <\/div>\n\n <div id=\"seccionRedSocial\" class=\"section\" style=\"display:none;\">\n <h2>Diseño de Redes Sociales<\/h2>\n <label for=\"descripcionRedSocial\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionRedSocial\" rows=\"4\" placeholder=\"Describa los detalles del diseño de redes sociales...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionRedSocial\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionRedSocial\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadRedes\">Cantidad de redes sociales:<\/label>\n <input type=\"number\" id=\"cantidadRedes\" min=\"1\" value=\"1\">\n <label for=\"tipoDiseno\">Tipo de diseño:<\/label>\n <select id=\"tipoDiseno\">\n <option value=\"normal\">Normal (AR$ 40.000)<\/option>\n <option value=\"premium\">Premium (AR$ 60.000)<\/option>\n <\/select>\n <\/div>\n\n <div id=\"seccionAppweb\" class=\"section\" style=\"display:none;\">\n <h2>Aplicación Web Interna<\/h2>\n <label for=\"descripcionAppweb\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionAppweb\" rows=\"4\" placeholder=\"Describa los detalles y requerimientos de la aplicación web interna...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionAppweb\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionAppweb\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadSeccionesApp\">Número de secciones:<\/label>\n <input type=\"number\" id=\"cantidadSeccionesApp\" min=\"1\" value=\"1\">\n <label for=\"tipoPagoApp\">Opción de pago:<\/label>\n <select id=\"tipoPagoApp\">\n <option value=\"unico\">Pago &#xfanico<\/option>\n <option value=\"cuotas\">Dos pagos<\/option>\n <\/select>\n <div style=\"margin-top: 20px;\">\n <label>\n <input type=\"checkbox\" id=\"mantenimientoApp\" onchange=\"calcularPresupuesto()\">\n Incluir mantenimiento mensual (AR$ 25.000)\n <\/label>\n <\/div>\n <div id=\"adicionalesAppweb\" style=\"margin-top: 20px;\">\n <h3>Adicionales<\/h3>\n <label for=\"nombreAdicionalApp\">Nombre del adicional:<\/label>\n <input type=\"text\" id=\"nombreAdicionalApp\" placeholder=\"Ej: Integración API externa\">\n <label for=\"valorAdicionalApp\">Valor del adicional (AR$):<\/label>\n <input type=\"number\" id=\"valorAdicionalApp\" min=\"0\" value=\"0\">\n <button onclick=\"agregarAdicionalAppweb()\" style=\"margin-top: 10px;\">Agregar Adicional<\/button>\n <div id=\"listaAdicionalesAppweb\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"seccionPersonalizado\" class=\"section\" style=\"display:none;\">\n <h2>Presupuesto Personalizado<\/h2>\n <label for=\"descripcionPersonalizado\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionPersonalizado\" rows=\"4\" placeholder=\"Describa los detalles del proyecto personalizado...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionPersonalizado\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionPersonalizado\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"nombrePersonalizado\">Nombre del item:<\/label>\n <input type=\"text\" id=\"nombrePersonalizado\" placeholder=\"Ej: Servicio especial\">\n <label for=\"valorPersonalizado\">Valor (AR$):<\/label>\n <input type=\"number\" id=\"valorPersonalizado\" min=\"0\" value=\"0\">\n <button onclick=\"agregarItemPersonalizado()\">Agregar al presupuesto<\/button>\n <div id=\"itemsPersonalizados\"><\/div>\n <\/div>\n\n <div class=\"section\">\n <h2>6. Opciones Adicionales<\/h2>\n <button onclick=\"copiarTextoIncluido()\" class=\"copy-button\">\n Copiar texto de inclusiones\n <span class=\"tooltip\">Haz clic para copiar<\/span>\n <\/button>\n <label for=\"inflacion\">Porcentaje de inflaci\u00f3n:<\/label>\n <input type=\"number\" id=\"inflacion\" min=\"0\" value=\"0\">\n <p style=\"font-size: 0.8em; color: #666; margin-top: 0.5rem;\">Valores desde febrero del 2025<\/p>\n <label for=\"descuentoAdicional\">Descuento adicional (%):<\/label>\n <input type=\"number\" id=\"descuentoAdicional\" min=\"0\" max=\"100\" value=\"0\">\n <\/div>\n <button onclick=\"calcularPresupuesto()\">Calcular Presupuesto<\/button>\n <div id=\"resultado\"><\/div>\n <button onclick=\"descargarPresupuesto()\" style=\"margin-top: 20px;\">Descargar Presupuesto<\/button>\n <div class=\"cloud\" style=\"width: 100px; height: 100px; background-color: #ffffff; border-radius: 50%; top: 0; left: 0;\"><\/div>\n <div class=\"cloud\" style=\"width: 50px; height: 50px; background-color: #ffffff; border-radius: 50%; top: 50px; left: 100px;\"><\/div>\n <div class=\"cloud\" style=\"width: 150px; height: 150px; background-color: #ffffff; border-radius: 50%; top: 100px; left: 200px;\"><\/div>\n <\/div>\n\n <script src=\"https:\/\/html2canvas.hertzen.com\/dist\/html2canvas.min.js\"><\/script>\n <script>\n let serviciosActivos = {\n filmacion: false,\n edicion: false,\n diseno: false,\n historias: false,\n campanas: false,\n googlemaps: false,\n website: false,\n redsocial: false,\n appweb: false,\n personalizado: false\n };\n let itemsPersonalizados = [];\n let adicionalesAppweb = [];\n\n function showToast(message) {\n const toast = document.createElement('div');\n toast.className = 'toast';\n toast.textContent = message;\n document.body.appendChild(toast);\n setTimeout(() => {\n toast.style.animation = 'toastIn 0.5s ease-out reverse';\n setTimeout(() => document.body.removeChild(toast), 500);\n }, 3000);\n }\n\n function toggleServicio(servicio) {\n if (!servicio) return;\n const buttonId = servicio === 'redsocial' ? 'btnRedsocial' : servicio === 'personalizado' ? 'btnPersonalizado' : `btn${servicio.charAt(0).toUpperCase() + servicio.slice(1)}`;\n const sectionId = servicio === 'redsocial' ? 'seccionRedSocial' : servicio === 'personalizado' ? 'seccionPersonalizado' : `seccion${servicio.charAt(0).toUpperCase() + servicio.slice(1)}`;\n const button = document.getElementById(buttonId);\n const section = document.getElementById(sectionId);\n if (!button || !section) {\n console.error(`Button or section not found for service: ${servicio}`);\n return;\n }\n serviciosActivos[servicio] = !serviciosActivos[servicio];\n button.classList.toggle('active');\n section.style.display = serviciosActivos[servicio] ? 'block' : 'none';\n if (serviciosActivos[servicio]) {\n showToast(`Servicio de ${servicio} activado`);\n }\n if (servicio === 'personalizado' && !serviciosActivos[servicio]) {\n itemsPersonalizados = [];\n actualizarListaItemsPersonalizados();\n calcularPresupuesto();\n }\n if (servicio === 'appweb' && !serviciosActivos[servicio]) {\n adicionalesAppweb = [];\n actualizarListaAdicionalesAppweb();\n calcularPresupuesto();\n }\n }\n\n function calcularDescuento(cantidad, tipo) {\n if (tipo === 'historias') {\n if (cantidad >= 8 && cantidad < 15) {\n return 0.05;\n } else if (cantidad >= 15 && cantidad < 25) {\n return 0.10;\n } else if (cantidad >= 25) {\n return 0.15;\n }\n } else {\n if (cantidad >= 5 && cantidad < 10) {\n return 0.02;\n } else if (cantidad >= 10 && cantidad < 15) {\n return 0.04;\n } else if (cantidad >= 15) {\n return 0.06;\n }\n }\n return 0;\n }\n\n function calcularPresupuesto() {\n let costoGrabacion = 0;\n let costoEdicion = 0;\n let costoDiseno = 0;\n let costoHistorias = 0;\n let costoCampanas = 0;\n let costoGoogleMaps = 0;\n let costoWebsite = 0;\n let costoRedSocial = 0;\n let costoAppweb = 0;\n let costoPersonalizado = 0;\n let cantidadTotal = 0;\n const inflacion = parseInt(document.getElementById('inflacion').value) \/ 100;\n const factorInflacion = 1 + inflacion;\n const descuentoAdicional = parseInt(document.getElementById('descuentoAdicional').value) \/ 100;\n if (serviciosActivos.filmacion) {\n const duracion = parseInt(document.getElementById('duracion').value);\n const horasAdicionales = parseInt(document.getElementById('horasAdicionales').value);\n const asistente = parseInt(document.getElementById('asistente').value);\n const distancia = parseInt(document.getElementById('distancia').value);\n const esTelevision = document.getElementById('televisionFilmacion').checked;\n\n \/\/ PRECIOS ACTUALIZADOS AQU\u00cd (L\u00d3GICA)\n switch (duracion) {\n case 1:\n costoGrabacion = 41580; \n break;\n case 2:\n costoGrabacion = 81500; \n break;\n case 4:\n costoGrabacion = 159670; \n break;\n case 6:\n costoGrabacion = 234500; \n break;\n case 8:\n costoGrabacion = 306030; \n break;\n case 12:\n costoGrabacion = 449060; \n break;\n }\n costoGrabacion += horasAdicionales * (20160); \n costoGrabacion += asistente * (10080); \n costoGrabacion += distancia * 140.07; \n if (esTelevision) {\n costoGrabacion *= 1.5; \n }\n cantidadTotal += 1;\n }\n\n if (serviciosActivos.edicion) {\n const minutos = parseInt(document.getElementById('minutos').value);\n const complejidad = document.getElementById('complejidad').value;\n const esTelevision = document.getElementById('televisionEdicion').checked;\n\n costoEdicion = minutos * (20160);\n switch (complejidad) {\n case 'intermedio':\n costoEdicion *= 1.4;\n break;\n case 'avanzado':\n costoEdicion *= 1.6;\n break;\n }\n if (esTelevision) {\n costoEdicion *= 1.5; \n }\n cantidadTotal += minutos;\n }\n\n if (serviciosActivos.diseno) {\n const cantidadDisenos = parseInt(document.getElementById('cantidadDisenos').value);\n const complejidadDiseno = document.getElementById('complejidadDiseno').value;\n costoDiseno = cantidadDisenos * (18900); \n switch (complejidadDiseno) {\n case 'intermedio':\n costoDiseno *= 1.4;\n break;\n case 'avanzado':\n costoDiseno *= 1.6;\n break;\n }\n cantidadTotal += cantidadDisenos;\n }\n if (serviciosActivos.historias) {\n const cantidadHistorias = parseInt(document.getElementById('cantidadHistorias').value);\n const tipoHistoria = document.getElementById('tipoHistoria').value;\n switch (tipoHistoria) {\n case 'simple':\n costoHistorias = cantidadHistorias * (3600); \n break;\n case 'intermedia':\n costoHistorias = cantidadHistorias * (7200); \n break;\n case 'seguimiento':\n costoHistorias = cantidadHistorias * (10800); \n break;\n }\n const descuentoHistorias = calcularDescuento(cantidadHistorias, 'historias');\n costoHistorias *= 1 - descuentoHistorias;\n cantidadTotal += cantidadHistorias;\n }\n if (serviciosActivos.campanas) {\n const cantidadCampanas = parseInt(document.getElementById('cantidadCampanas').value);\n costoCampanas = cantidadCampanas * (72000); \n cantidadTotal += cantidadCampanas;\n }\n if (serviciosActivos.googlemaps) {\n const cantidadPerfiles = parseInt(document.getElementById('cantidadPerfiles').value);\n const cantidadImagenes = parseInt(document.getElementById('cantidadImagenes').value);\n const cantidadProductos = parseInt(document.getElementById('cantidadProductos').value);\n costoGoogleMaps = 100000 * cantidadPerfiles;\n costoGoogleMaps += cantidadImagenes * 3000;\n costoGoogleMaps += cantidadProductos * 1000;\n if (cantidadPerfiles >= 3) {\n costoGoogleMaps *= 0.85;\n } else if (cantidadPerfiles >= 2) {\n costoGoogleMaps *= 0.90;\n }\n if (cantidadProductos >= 20) {\n costoGoogleMaps *= 0.9;\n } else if (cantidadProductos >= 10) {\n costoGoogleMaps *= 0.95;\n }\n cantidadTotal += cantidadPerfiles;\n }\n if (serviciosActivos.website) {\n const secciones = parseInt(document.getElementById('cantidadSecciones').value);\n const productos = parseInt(document.getElementById('cantidadProductosWeb').value);\n const tipoWeb = document.getElementById('tipoWeb').value;\n const costoPorSeccion = 70000;\n const costoPorProducto = 3000;\n \n costoWebsite = secciones * costoPorSeccion;\n costoWebsite += productos * costoPorProducto;\n\n \/\/ Aplicar descuento por cantidad de secciones\n if (secciones >= 10) {\n costoWebsite *= 0.95; \n }\n\n if (tipoWeb === 'remodelacion') {\n costoWebsite *= 0.5;\n }\n }\n if (serviciosActivos.redsocial) {\n const cantidadRedes = parseInt(document.getElementById('cantidadRedes').value);\n const tipoDiseno = document.getElementById('tipoDiseno').value;\n costoRedSocial = tipoDiseno === 'normal' ? cantidadRedes * 40000 : cantidadRedes * 60000;\n if (cantidadRedes >= 3) {\n costoRedSocial *= 0.85;\n }\n cantidadTotal += cantidadRedes;\n }\n if (serviciosActivos.appweb) {\n const seccionesApp = parseInt(document.getElementById('cantidadSeccionesApp').value);\n const tipoPagoApp = document.getElementById('tipoPagoApp').value;\n costoAppweb = seccionesApp * 50000;\n if (adicionalesAppweb.length > 0) {\n costoAppweb += adicionalesAppweb.reduce((sum, item) => sum + item.valor, 0);\n }\n if (tipoPagoApp === 'cuotas') {\n costoAppweb *= 1.10;\n }\n cantidadTotal += 1;\n }\n if (serviciosActivos.personalizado && itemsPersonalizados.length > 0) {\n costoPersonalizado = itemsPersonalizados.reduce((sum, item) => sum + item.valor, 0);\n }\n const subtotal = costoGrabacion + costoEdicion + costoDiseno + \n costoHistorias + costoCampanas + costoGoogleMaps + costoWebsite + \n costoRedSocial + costoAppweb + costoPersonalizado;\n const descuentoPorCantidad = calcularDescuento(cantidadTotal, 'general');\n const totalConDescuentos = subtotal - subtotal * descuentoPorCantidad - subtotal * descuentoAdicional;\n const total = totalConDescuentos * factorInflacion;\n const costoHoraAdicional = 16800 * factorInflacion;\n const resultado = document.getElementById('resultado');\n resultado.classList.remove('result-animation');\n void resultado.offsetWidth;\n resultado.classList.add('result-animation');\n resultado.innerHTML = `\n ${serviciosActivos.filmacion ? `\n <p><strong>Grabación de Sesi\u00f3n:<\/strong> AR$ ${(costoGrabacion * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionFilmacion').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionFilmacion').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionFilmacion').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionFilmacion').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.edicion ? `\n <p><strong>Edición de Video:<\/strong> AR$ ${(costoEdicion * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionEdicion').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionEdicion').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionEdicion').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionEdicion').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.diseno ? `\n <p><strong>Diseño de Imagen:<\/strong> AR$ ${(costoDiseno * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionDiseno').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionDiseno').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionDiseno').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionDiseno').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.historias ? `\n <p><strong>Historias:<\/strong> AR$ ${(costoHistorias * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionHistorias').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionHistorias').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionHistorias').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionHistorias').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.campanas ? `\n <p><strong>Campañas de Marketing Digital:<\/strong> AR$ ${(costoCampanas * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionCampanas').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionCampanas').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionCampanas').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionCampanas').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.googlemaps ? `\n <p><strong>Google Maps:<\/strong> AR$ ${(costoGoogleMaps * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionGooglemaps').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionGooglemaps').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionGooglemaps').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionGooglemaps').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.website ? `\n <p><strong>Sitio Web:<\/strong> AR$ ${(costoWebsite * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionWebsite').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionWebsite').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionWebsite').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionWebsite').value}<\/p>\n ` : ''}\n <p><strong>Opci\u00f3n en dos cuotas de:<\/strong> AR$ ${((costoWebsite * 1.20) * factorInflacion \/ 2).toFixed(2)}<\/p>\n ` : ''}\n ${serviciosActivos.redsocial ? `\n <p><strong>Diseño de Redes Sociales:<\/strong> AR$ ${(costoRedSocial * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionRedSocial').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionRedSocial').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionRedSocial').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionRedSocial').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.appweb ? `\n <p><strong>Aplicación Web Interna:<\/strong> AR$ ${(costoAppweb * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionAppweb').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionAppweb').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionAppweb').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionAppweb').value}<\/p>\n ` : ''}\n ${document.getElementById('tipoPagoApp').value === 'cuotas' ? `\n <p><strong>Dos cuotas de:<\/strong> AR$ ${(costoAppweb * factorInflacion \/ 2).toFixed(2)}<\/p>\n ` : ''}\n ${document.getElementById('mantenimientoApp').checked ? `\n <p><strong>Mantenimiento mensual:<\/strong> AR$ 30,000.00<\/p>\n ` : ''}\n ${adicionalesAppweb.length > 0 ? `\n <div style=\"margin-top: 1rem;\">\n <strong>Adicionales:<\/strong>\n ${adicionalesAppweb.map(item => `\n <p>${item.nombre}: AR$ ${(item.valor * factorInflacion).toFixed(2)}<\/p>\n `).join('')}\n <\/div>\n ` : ''}\n ` : ''}\n ${itemsPersonalizados.length > 0 ? `\n <div style=\"margin-top: 1rem;\">\n <strong>Items Personalizados:<\/strong>\n ${itemsPersonalizados.map(item => `\n <p>${item.nombre}: AR$ ${(item.valor * factorInflacion).toFixed(2)}<\/p>\n `).join('')}\n <\/div>\n ` : ''}\n ${serviciosActivos.personalizado ? `\n ${document.getElementById('descripcionPersonalizado').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionPersonalizado').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionPersonalizado').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionPersonalizado').value}<\/p>\n ` : ''}\n ` : ''}\n <h3 style=\"font-family: 'Work Sans', sans-serif; font-weight: 200; letter-spacing: 1px;\">\n <strong style=\"display: block; margin-bottom: 0.5rem; font-size: 1.2em;\">TOTAL:<\/strong>\n <span style=\"font-size: 0.6em;\">AR$<\/span> ${total.toFixed(2)}\n <\/h3>\n <div class=\"thank-you-message\">\n \u00a1Gracias por consultar nuestros servicios! Estamos entusiasmados por la posibilidad de trabajar juntos en tu pr\u00f3ximo proyecto. Si tienes alguna pregunta adicional, no dudes en contactarnos.\n <\/div>\n `;\n showToast('\u00a1Presupuesto calculado exitosamente!');\n }\n\n async function descargarPresupuesto() {\n const downloadBtn = event.target;\n const originalText = downloadBtn.textContent;\n downloadBtn.innerHTML = '<span class=\"loading\"><\/span> Generando...';\n downloadBtn.disabled = true;\n try {\n const contenedor = document.createElement('div');\n contenedor.style.width = '800px';\n contenedor.style.padding = '20px';\n contenedor.style.backgroundColor = '#ffffff';\n contenedor.style.color = '#000000';\n const nombreServicio = document.getElementById('nombreServicio').value;\n const clouds = Array.from({\n length: 3\n }, (_, i) => `\n <svg class=\"cloud\" style=\"top: ${20 + i * 30}%; left: ${i * 30}%\" width=\"100\" height=\"40\" viewBox=\"0 0 100 40\">\n <path fill=\"#f0f0f0\" d=\"M10 30 Q25 10 40 30 T70 30 T100 30 V40 H0 Z\"\/>\n <\/svg>\n `).join('');\n contenedor.innerHTML = `\n <div class=\"cloud-bg\" style=\"font-family: 'Work Sans', Arial, sans-serif; padding: 2rem; background: linear-gradient(135deg, #E3F2FD, #ffffff); color: #000000;\">\n ${clouds}\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/YvEDrAv.png\" alt=\"Logo\" style=\"display: block; margin: 0 auto; width: 150px; margin-bottom: 1.5rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));\">\n <div style=\"text-align: center;\">\n <h1 style=\"color: #4682B4; font-weight: 200; margin: 1rem 0; letter-spacing: 1px;\">\n Presupuestador autom\u00e1tico de servicios - Gleztin Marketing Digital\n <\/h1>\n ${nombreServicio ? `\n <h2 style=\"color: #4682B4; font-weight: 300; margin: 1rem 0; letter-spacing: 0.5px;\">\n ${nombreServicio}\n <\/h2>\n ` : ''}\n <\/div>\n <div style=\"margin-top: 2rem; background: rgba(0, 0, 0, 0.05); border-radius: 12px; padding: 2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1);\">\n ${document.getElementById('resultado').innerHTML\n .replace(\/color: #ffffff\/g, 'color: #000000')\n .replace(\/color: #87CEEB\/g, 'color: #4682B4')\n .replace(\/background-color: rgba\$17, 17, 17, 0.8\$\/g, 'background-color: rgba(255, 255, 255, 0.8)')\n .replace(\/background-color: rgba\$135, 206, 235, 0.1\$\/g, 'background-color: rgba(255, 255, 255, 0.8)')\n .replace(\/<h3\/g, '<h3 style=\"color: #000000 !important; font-family: \\'Work Sans\\', sans-serif; font-weight: 200; letter-spacing: 1px; font-size: 1.1em;\"')\n .replace(\/<strong style=\"display: block; margin-bottom: 0.5rem; font-size: 1.2em;\">\/g, '<strong style=\"display: block; margin-bottom: 0.5rem; font-size: 0.9em; color: #000000 !important;\">')\n .replace(\/<strong>\/g, '<strong style=\"color: #000000;\">')\n .replace(\/class=\"thank-you-message\"\/g, 'class=\"thank-you-message\" style=\"color: #000000; background-color: rgba(255, 255, 255, 0.8);\"')}\n <\/div>\n <\/div>\n `;\n document.body.appendChild(contenedor);\n const canvas = await html2canvas(contenedor, {\n backgroundColor: '#ffffff',\n scale: 2,\n logging: false,\n allowTaint: true,\n useCORS: true\n });\n const link = document.createElement('a');\n link.download = 'Presupuesto_Servicios_Completos.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n document.body.removeChild(contenedor);\n showToast('\u00a1Presupuesto descargado exitosamente!');\n } catch (error) {\n console.error('Error al generar la imagen:', error);\n showToast('Error al generar el presupuesto. Intente nuevamente.');\n } finally {\n downloadBtn.innerHTML = originalText;\n downloadBtn.disabled = false;\n }\n }\n\n document.querySelectorAll('input[type=\"number\"]').forEach(input => {\n input.addEventListener('input', function () {\n if (this.value < 0) {\n this.value = 0;\n showToast('El valor no puede ser negativo');\n }\n });\n });\n\n function agregarItemPersonalizado() {\n if (!serviciosActivos.personalizado) {\n showToast('Debe activar primero la secci\u00f3n de presupuesto personalizado');\n return;\n }\n const nombre = document.getElementById('nombrePersonalizado').value;\n const valor = parseFloat(document.getElementById('valorPersonalizado').value);\n if (!nombre || valor <= 0) {\n showToast('Por favor ingrese un nombre y valor v\u00e1lido');\n return;\n }\n itemsPersonalizados.push({\n nombre,\n valor\n });\n actualizarListaItemsPersonalizados();\n calcularPresupuesto();\n document.getElementById('nombrePersonalizado').value = '';\n document.getElementById('valorPersonalizado').value = '0';\n showToast('Item personalizado agregado');\n }\n\n function actualizarListaItemsPersonalizados() {\n const container = document.getElementById('itemsPersonalizados');\n container.innerHTML = itemsPersonalizados.map((item, index) => `\n <div style=\"display: flex; justify-content: space-between; margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 4px;\">\n <span>${item.nombre}: AR$ ${item.valor.toFixed(2)}<\/span>\n <button onclick=\"eliminarItemPersonalizado(${index})\" style=\"background: #ff4444; padding: 2px 8px;\">X<\/button>\n <\/div>\n `).join('');\n }\n\n function eliminarItemPersonalizado(index) {\n itemsPersonalizados.splice(index, 1);\n actualizarListaItemsPersonalizados();\n calcularPresupuesto();\n showToast('Item personalizado eliminado');\n }\n\n function agregarAdicionalAppweb() {\n const nombre = document.getElementById('nombreAdicionalApp').value;\n const valor = parseFloat(document.getElementById('valorAdicionalApp').value);\n if (!nombre || valor <= 0) {\n showToast('Por favor ingrese un nombre y valor v\u00e1lido para el adicional');\n return;\n }\n adicionalesAppweb.push({ nombre, valor });\n actualizarListaAdicionalesAppweb();\n calcularPresupuesto();\n document.getElementById('nombreAdicionalApp').value = '';\n document.getElementById('valorAdicionalApp').value = '0';\n showToast('Adicional agregado');\n }\n\n function actualizarListaAdicionalesAppweb() {\n const container = document.getElementById('listaAdicionalesAppweb');\n container.innerHTML = adicionalesAppweb.map((item, index) => `\n <div style=\"display: flex; justify-content: space-between; margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 4px;\">\n <span>${item.nombre}: AR$ ${item.valor.toFixed(2)}<\/span>\n <button onclick=\"eliminarAdicionalAppweb(${index})\" style=\"background: #ff4444; padding: 2px 8px;\">X<\/button>\n <\/div>\n `).join('');\n }\n\n function eliminarAdicionalAppweb(index) {\n adicionalesAppweb.splice(index, 1);\n actualizarListaAdicionalesAppweb();\n calcularPresupuesto();\n showToast('Adicional eliminado');\n }\n\n function copiarTextoIncluido() {\n const texto = \"Incluye sin cargo: \u2705Carga de contenido crudo en la nube \u2705Tomas de drone\";\n navigator.clipboard.writeText(texto).then(() => {\n const button = document.querySelector('.copy-button');\n button.classList.add('copied');\n button.innerHTML = 'Copiado! <span class=\"tooltip\">\u2713<\/span>';\n setTimeout(() => {\n button.classList.remove('copied');\n button.innerHTML = 'Copiar texto de inclusiones <span class=\"tooltip\">Haz clic para copiar<\/span>';\n }, 2000);\n showToast('Texto copiado al portapapeles');\n }).catch(err => {\n showToast('Error al copiar el texto');\n console.error('Error al copiar:', err);\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div class=\"wp-block-stackable-spacer stk-block-spacer stk--no-padding stk-block stk-ea64c4a\" data-block-id=\"ea64c4a\"><style>.stk-ea64c4a {height:100px !important;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Presupuestador de Servicios de Filmación, Fotografía, Diseño y Marketing Digital Presupuestador automático de servicios – Gleztin Marketing Digital Nombre del Servicio (opcional): Seleccione los servicios: Filmación Edición Diseño de Imagen Historias Campañas de Marketing Digital Google Maps Sitio Web Diseño de Redes Sociales Aplicación Web Interna Presupuesto Personalizado 1. Grabación de Sesi\u00f3n Descripción del proyecto: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_joinchat":[],"footnotes":""},"class_list":["post-1634","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/1634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=1634"}],"version-history":[{"count":18,"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/1634\/revisions"}],"predecessor-version":[{"id":2762,"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/1634\/revisions\/2762"}],"wp:attachment":[{"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=1634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1634,"date":"2024-08-20T00:44:08","date_gmt":"2024-08-20T03:44:08","guid":{"rendered":"https:\/\/gleztin.com.ar\/?page_id=1634"},"modified":"2026-03-22T19:13:33","modified_gmt":"2026-03-22T22:13:33","slug":"presupuestador","status":"publish","type":"page","link":"https:\/\/gleztin.com.ar\/index.php\/presupuestador\/","title":{"rendered":"Presupuestador"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n \n \n \n Presupuestador de Servicios de Filmación, Fotografía, Diseño y Marketing Digital<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Work+Sans:wght@300&display=swap');\n\n \/* Previous CSS styles remain the same *\/\n \/* Applying some visual enhancements *\/\n\n .section {\n position: relative;\n overflow: hidden;\n }\n\n .section::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, var(--primary-color), var(--accent-color));\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .section:hover::before {\n opacity: 1;\n }\n\n button {\n position: relative;\n overflow: hidden;\n }\n\n button::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 5px;\n height: 5px;\n background: rgba(255, 255, 255, 0.5);\n opacity: 0;\n border-radius: 100%;\n transform: translate(-50%, -50%) scale(1);\n transition: transform 0.6s, opacity 0.6s;\n }\n\n button:active::after {\n transform: translate(-50%, -50%) scale(20);\n opacity: 0;\n }\n\n .result-animation {\n animation: slideIn 0.5s ease-out;\n }\n\n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Enhancement for form elements *\/\n select, input[type=\"number\"] {\n background: linear-gradient(145deg, #1a1a1a, #222);\n box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);\n }\n\n \/* Loading animation for download *\/\n .loading {\n display: inline-block;\n width: 20px;\n height: 20px;\n border: 3px solid rgba(255,255,255,.3);\n border-radius: 50%;\n border-top-color: #fff;\n animation: spin 1s ease-in-out infinite;\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n \/* Toast notification styles *\/\n .toast {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background: var(--accent-color);\n color: white;\n padding: 1rem 2rem;\n border-radius: 4px;\n animation: toastIn 0.5s ease-out;\n z-index: 1000;\n }\n\n @keyframes toastIn {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n\n \/* Additional styles for better visual hierarchy *\/\n :root {\n --primary-color: #000080;\n --secondary-color: #ffffff;\n --background-color: #000000;\n --text-color: #ffffff;\n --accent-color: #4CAF50;\n --section-bg: #111111;\n }\n\n body {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n }\n\n .banner {\n background-color: var(--primary-color);\n color: var(--secondary-color);\n padding: 2rem 0;\n text-align: center;\n }\n\n .banner h1 {\n font-family: 'Work Sans', sans-serif;\n color: #ffffff;\n font-size: 2rem;\n letter-spacing: 0.5px;\n margin: 0;\n text-shadow: 1px 1px 3px rgba(0,0,0,0.2);\n }\n\n .container {\n max-width: 800px;\n margin: 2rem auto;\n padding: 2rem;\n background-color: var(--section-bg);\n box-shadow: 0 10px 20px rgba(255,255,255,0.1);\n border-radius: 8px;\n }\n\n h2, h3 {\n color: var(--secondary-color);\n margin-bottom: 1rem;\n }\n\n .section {\n margin-bottom: 2rem;\n padding: 1.5rem;\n background-color: #222222;\n border-radius: 8px;\n transition: all 0.3s ease;\n }\n\n .section:hover {\n box-shadow: 0 5px 15px rgba(255,255,255,0.1);\n }\n\n label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n color: var(--secondary-color);\n }\n\n select, input[type=\"number\"] {\n width: 100%;\n padding: 0.8rem;\n margin-bottom: 1rem;\n border: 1px solid var(--primary-color);\n border-radius: 4px;\n font-size: 1rem;\n transition: border-color 0.3s ease;\n background-color: var(--section-bg);\n color: var(--secondary-color);\n }\n\n select:focus, input[type=\"number\"]:focus {\n outline: none;\n border-color: var(--accent-color);\n }\n\n button {\n background-color: var(--primary-color);\n color: var(--secondary-color);\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease;\n margin-right: 10px;\n margin-bottom: 10px;\n }\n\n button:hover {\n background-color: #000066;\n }\n\n button.active {\n background-color: var(--accent-color);\n }\n\n @keyframes floatClouds {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }\n\n .cloud {\n position: absolute;\n opacity: 0.1;\n z-index: -1;\n animation: floatClouds 60s linear infinite;\n }\n\n .cloud-bg {\n position: relative;\n overflow: hidden;\n background: linear-gradient(to bottom, #000000, #111111);\n border-radius: 12px;\n padding: 2rem;\n }\n\n #resultado {\n background: rgba(17, 17, 17, 0.8);\n backdrop-filter: blur(10px);\n border-radius: 12px;\n padding: 2rem;\n margin: 2rem 0;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n }\n\n #resultado h3 {\n font-family: 'Work Sans', sans-serif;\n font-weight: 200;\n color: #87CEEB;\n letter-spacing: 1px;\n margin-bottom: 2rem;\n }\n\n .thank-you-message {\n margin-top: 2rem;\n padding: 1.5rem;\n background-color: rgba(135, 206, 235, 0.1);\n border-radius: 8px;\n text-align: center;\n font-style: italic;\n color: #87CEEB;\n }\n\n .logo {\n display: block;\n margin: 0 auto 1rem;\n max-width: 150px;\n height: auto;\n }\n\n @media (max-width: 600px) {\n .container {\n padding: 1rem;\n margin: 1rem;\n }\n }\n\n \/* Update input field styling *\/\n .section input[type=\"text\"] {\n width: 100%;\n padding: 1rem;\n margin: 0.5rem 0;\n border: 2px solid var(--primary-color);\n border-radius: 8px;\n font-size: 1.1rem;\n background: linear-gradient(145deg, #1a1a1a, #222);\n color: var(--secondary-color);\n transition: all 0.3s ease;\n box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);\n }\n\n .section input[type=\"text\"]:focus {\n outline: none;\n border-color: var(--accent-color);\n box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);\n transform: translateY(-2px);\n }\n\n .section input[type=\"text\"]::placeholder {\n color: rgba(255,255,255,0.5);\n font-style: italic;\n }\n\n \/* Update section containing service name *\/\n .section:first-of-type {\n background: linear-gradient(145deg, #111111, #1a1a1a);\n border-left: 4px solid var(--accent-color);\n margin-top: 2rem;\n margin-bottom: 2rem;\n padding: 1.5rem 2rem;\n border-radius: 0 8px 8px 0;\n }\n\n .section:first-of-type label {\n font-size: 1.1rem;\n font-weight: 300;\n letter-spacing: 0.5px;\n color: var(--accent-color);\n margin-bottom: 1rem;\n display: block;\n }\n\n .copy-button {\n position: relative;\n background-color: #4CAF50;\n margin-bottom: 20px;\n width: 100%;\n text-align: left;\n padding: 15px;\n }\n\n .copy-button:hover {\n background-color: #45a049;\n }\n\n .copy-button .tooltip {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 0.8em;\n opacity: 0.7;\n }\n\n .copy-button.copied {\n background-color: #45a049;\n animation: flash 0.5s;\n }\n\n @keyframes flash {\n 0% { background-color: #4CAF50; }\n 50% { background-color: #45a049; }\n 100% { background-color: #4CAF50; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"banner\">\n <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i.imgur.com\/YvEDrAv.png\" alt=\"Logo de la empresa, diseño minimalista con letras CDA en azul marino\" class=\"logo\" width=\"150\" height=\"150\">\n <h1>Presupuestador automático de servicios – Gleztin Marketing Digital<\/h1>\n <\/div>\n <div class=\"section\">\n <label for=\"nombreServicio\">Nombre del Servicio (opcional):<\/label>\n <input type=\"text\" id=\"nombreServicio\" placeholder=\"Ej: Campaña Verano 2024\">\n <\/div>\n <div class=\"container cloud-bg\">\n <div class=\"section\">\n <h2>Seleccione los servicios:<\/h2>\n <button id=\"btnFilmacion\" onclick=\"toggleServicio('filmacion')\">Filmación<\/button>\n <button id=\"btnEdicion\" onclick=\"toggleServicio('edicion')\">Edición<\/button>\n <button id=\"btnDiseno\" onclick=\"toggleServicio('diseno')\">Diseño de Imagen<\/button>\n <button id=\"btnHistorias\" onclick=\"toggleServicio('historias')\">Historias<\/button>\n <button id=\"btnCampanas\" onclick=\"toggleServicio('campanas')\">Campañas de Marketing Digital<\/button>\n <button id=\"btnGooglemaps\" onclick=\"toggleServicio('googlemaps')\">Google Maps<\/button>\n <button id=\"btnWebsite\" onclick=\"toggleServicio('website')\">Sitio Web<\/button>\n <button id=\"btnRedsocial\" onclick=\"toggleServicio('redsocial')\">Diseño de Redes Sociales<\/button>\n <button id=\"btnAppweb\" onclick=\"toggleServicio('appweb')\">Aplicación Web Interna<\/button>\n <button id=\"btnPersonalizado\" onclick=\"toggleServicio('personalizado')\">Presupuesto Personalizado<\/button>\n <\/div>\n\n <div id=\"seccionFilmacion\" class=\"section\" style=\"display:none;\">\n <h2>1. Grabación de Sesi\u00f3n<\/h2>\n <label for=\"descripcionFilmacion\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionFilmacion\" rows=\"4\" placeholder=\"Describa los detalles de la filmación...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionFilmacion\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionFilmacion\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <div style=\"margin-bottom: 1rem;\">\n <label>\n <input type=\"checkbox\" id=\"televisionFilmacion\" onchange=\"calcularPresupuesto()\">\n Para Televisi\u00f3n (50% adicional)\n <\/label>\n <\/div>\n <label for=\"duracion\">Duración de la sesión:<\/label>\n <select id=\"duracion\">\n <option value=\"1\">Mínimo: 1 hora – AR$ 41.580<\/option>\n <option value=\"2\">Mínimo: 2 horas – AR$ 81.500<\/option>\n <option value=\"4\">Media jornada: 4 horas – AR$ 159.670<\/option>\n <option value=\"6\">Media jornada plus: 6 horas – AR$ 234.500<\/option>\n <option value=\"8\">Jornada completa: 8 horas – AR$ 306.030<\/option>\n <option value=\"12\">Jornada completa plus: 12 horas – AR$ 449.060<\/option>\n <\/select>\n <label for=\"horasAdicionales\">Horas adicionales:<\/label>\n <input type=\"number\" id=\"horasAdicionales\" min=\"0\" value=\"0\">\n <label for=\"asistente\">Horas de asistente (2da cámara):<\/label>\n <input type=\"number\" id=\"asistente\" min=\"0\" value=\"0\">\n <label for=\"distancia\">Distancia a recorrer (km):<\/label>\n <input type=\"number\" id=\"distancia\" min=\"0\" value=\"0\">\n <\/div>\n\n <div id=\"seccionEdicion\" class=\"section\" style=\"display:none;\">\n <h2>2. Edición de Video<\/h2>\n <label for=\"descripcionEdicion\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionEdicion\" rows=\"4\" placeholder=\"Describa los detalles de la edición...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionEdicion\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionEdicion\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <div style=\"margin-bottom: 1rem;\">\n <label>\n <input type=\"checkbox\" id=\"televisionEdicion\" onchange=\"calcularPresupuesto()\">\n Para Televisi\u00f3n (50% adicional)\n <\/label>\n <\/div>\n <label for=\"minutos\">Minutos de edición:<\/label>\n <input type=\"number\" id=\"minutos\" min=\"0\" value=\"0\">\n <label for=\"complejidad\">Nivel de complejidad:<\/label>\n <select id=\"complejidad\">\n <option value=\"simple\">Simple<\/option>\n <option value=\"intermedio\">Intermedio<\/option>\n <option value=\"avanzado\">Avanzado<\/option>\n <\/select>\n <\/div>\n\n <div id=\"seccionDiseno\" class=\"section\" style=\"display:none;\">\n <h2>3. Diseño de Imagen<\/h2>\n <label for=\"descripcionDiseno\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionDiseno\" rows=\"4\" placeholder=\"Describa los detalles del diseño...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionDiseno\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionDiseno\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadDisenos\">Cantidad de diseños:<\/label>\n <input type=\"number\" id=\"cantidadDisenos\" min=\"1\" value=\"1\">\n <label for=\"complejidadDiseno\">Nivel de complejidad:<\/label>\n <select id=\"complejidadDiseno\">\n <option value=\"simple\">Simple<\/option>\n <option value=\"intermedio\">Intermedio<\/option>\n <option value=\"avanzado\">Avanzado<\/option>\n <\/select>\n <\/div>\n\n <div id=\"seccionHistorias\" class=\"section\" style=\"display:none;\">\n <h2>4. Historias<\/h2>\n <label for=\"descripcionHistorias\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionHistorias\" rows=\"4\" placeholder=\"Describa los detalles de las historias...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionHistorias\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionHistorias\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadHistorias\">Cantidad de historias:<\/label>\n <input type=\"number\" id=\"cantidadHistorias\" min=\"1\" value=\"1\">\n <label for=\"tipoHistoria\">Tipo de historia:<\/label>\n <select id=\"tipoHistoria\">\n <option value=\"simple\">Simple (AR$ 3.000)<\/option>\n <option value=\"intermedia\">Intermedia (AR$ 6.000)<\/option>\n <option value=\"seguimiento\">Con seguimiento (AR$ 9.000)<\/option>\n <\/select>\n <\/div>\n\n <div id=\"seccionCampanas\" class=\"section\" style=\"display:none;\">\n <h2>5. Campañas de Marketing Digital<\/h2>\n <label for=\"descripcionCampanas\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionCampanas\" rows=\"4\" placeholder=\"Describa los detalles de la campaña...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionCampanas\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionCampanas\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadCampanas\">Cantidad de campañas:<\/label>\n <input type=\"number\" id=\"cantidadCampanas\" min=\"1\" value=\"1\">\n <p><strong>Precio por campaña:<\/strong> AR$ 60.000<\/p>\n <\/div>\n\n <div id=\"seccionGooglemaps\" class=\"section\" style=\"display:none;\">\n <h2>Google Maps<\/h2>\n <label for=\"descripcionGooglemaps\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionGooglemaps\" rows=\"4\" placeholder=\"Describa los detalles del proyecto de Google Maps...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionGooglemaps\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionGooglemaps\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadPerfiles\">Cantidad de perfiles:<\/label>\n <input type=\"number\" id=\"cantidadPerfiles\" min=\"1\" value=\"1\">\n <p><strong>Precio base por perfil:<\/strong> AR$ 100.000<\/p>\n <label for=\"cantidadImagenes\">Cantidad de imágenes a diseñar:<\/label>\n <input type=\"number\" id=\"cantidadImagenes\" min=\"1\" value=\"1\">\n <label for=\"cantidadProductos\">Cantidad de productos para cargar:<\/label>\n <input type=\"number\" id=\"cantidadProductos\" min=\"1\" value=\"1\">\n <\/div>\n\n <div id=\"seccionWebsite\" class=\"section\" style=\"display:none;\">\n <h2>Sitio Web<\/h2>\n <label for=\"descripcionWebsite\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionWebsite\" rows=\"4\" placeholder=\"Describa los detalles y requerimientos del sitio web...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionWebsite\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionWebsite\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"tipoWeb\">Tipo de proyecto:<\/label>\n <select id=\"tipoWeb\">\n <option value=\"nuevo\">Sitio Web Nuevo<\/option>\n <option value=\"remodelacion\">Remodelación de Sitio Existente (50% descuento)<\/option>\n <\/select>\n\n <label for=\"cantidadSecciones\">Número de secciones:<\/label>\n <input type=\"number\" id=\"cantidadSecciones\" min=\"1\" value=\"5\">\n <label for=\"cantidadProductosWeb\">Número de productos:<\/label>\n <input type=\"number\" id=\"cantidadProductosWeb\" min=\"1\" value=\"25\">\n <\/div>\n\n <div id=\"seccionRedSocial\" class=\"section\" style=\"display:none;\">\n <h2>Diseño de Redes Sociales<\/h2>\n <label for=\"descripcionRedSocial\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionRedSocial\" rows=\"4\" placeholder=\"Describa los detalles del diseño de redes sociales...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionRedSocial\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionRedSocial\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadRedes\">Cantidad de redes sociales:<\/label>\n <input type=\"number\" id=\"cantidadRedes\" min=\"1\" value=\"1\">\n <label for=\"tipoDiseno\">Tipo de diseño:<\/label>\n <select id=\"tipoDiseno\">\n <option value=\"normal\">Normal (AR$ 40.000)<\/option>\n <option value=\"premium\">Premium (AR$ 60.000)<\/option>\n <\/select>\n <\/div>\n\n <div id=\"seccionAppweb\" class=\"section\" style=\"display:none;\">\n <h2>Aplicación Web Interna<\/h2>\n <label for=\"descripcionAppweb\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionAppweb\" rows=\"4\" placeholder=\"Describa los detalles y requerimientos de la aplicación web interna...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionAppweb\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionAppweb\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"cantidadSeccionesApp\">Número de secciones:<\/label>\n <input type=\"number\" id=\"cantidadSeccionesApp\" min=\"1\" value=\"1\">\n <label for=\"tipoPagoApp\">Opción de pago:<\/label>\n <select id=\"tipoPagoApp\">\n <option value=\"unico\">Pago &#xfanico<\/option>\n <option value=\"cuotas\">Dos pagos<\/option>\n <\/select>\n <div style=\"margin-top: 20px;\">\n <label>\n <input type=\"checkbox\" id=\"mantenimientoApp\" onchange=\"calcularPresupuesto()\">\n Incluir mantenimiento mensual (AR$ 25.000)\n <\/label>\n <\/div>\n <div id=\"adicionalesAppweb\" style=\"margin-top: 20px;\">\n <h3>Adicionales<\/h3>\n <label for=\"nombreAdicionalApp\">Nombre del adicional:<\/label>\n <input type=\"text\" id=\"nombreAdicionalApp\" placeholder=\"Ej: Integración API externa\">\n <label for=\"valorAdicionalApp\">Valor del adicional (AR$):<\/label>\n <input type=\"number\" id=\"valorAdicionalApp\" min=\"0\" value=\"0\">\n <button onclick=\"agregarAdicionalAppweb()\" style=\"margin-top: 10px;\">Agregar Adicional<\/button>\n <div id=\"listaAdicionalesAppweb\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"seccionPersonalizado\" class=\"section\" style=\"display:none;\">\n <h2>Presupuesto Personalizado<\/h2>\n <label for=\"descripcionPersonalizado\">Descripción del proyecto:<\/label>\n <textarea id=\"descripcionPersonalizado\" rows=\"4\" placeholder=\"Describa los detalles del proyecto personalizado...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"aclaracionPersonalizado\">Aclaraciones adicionales:<\/label>\n <textarea id=\"aclaracionPersonalizado\" rows=\"2\" placeholder=\"Agregue cualquier aclaración necesaria...\" style=\"width: 100%; padding: 10px; margin-bottom: 20px; background: var(--section-bg); color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 4px;\"><\/textarea>\n <label for=\"nombrePersonalizado\">Nombre del item:<\/label>\n <input type=\"text\" id=\"nombrePersonalizado\" placeholder=\"Ej: Servicio especial\">\n <label for=\"valorPersonalizado\">Valor (AR$):<\/label>\n <input type=\"number\" id=\"valorPersonalizado\" min=\"0\" value=\"0\">\n <button onclick=\"agregarItemPersonalizado()\">Agregar al presupuesto<\/button>\n <div id=\"itemsPersonalizados\"><\/div>\n <\/div>\n\n <div class=\"section\">\n <h2>6. Opciones Adicionales<\/h2>\n <button onclick=\"copiarTextoIncluido()\" class=\"copy-button\">\n Copiar texto de inclusiones\n <span class=\"tooltip\">Haz clic para copiar<\/span>\n <\/button>\n <label for=\"inflacion\">Porcentaje de inflaci\u00f3n:<\/label>\n <input type=\"number\" id=\"inflacion\" min=\"0\" value=\"0\">\n <p style=\"font-size: 0.8em; color: #666; margin-top: 0.5rem;\">Valores desde febrero del 2025<\/p>\n <label for=\"descuentoAdicional\">Descuento adicional (%):<\/label>\n <input type=\"number\" id=\"descuentoAdicional\" min=\"0\" max=\"100\" value=\"0\">\n <\/div>\n <button onclick=\"calcularPresupuesto()\">Calcular Presupuesto<\/button>\n <div id=\"resultado\"><\/div>\n <button onclick=\"descargarPresupuesto()\" style=\"margin-top: 20px;\">Descargar Presupuesto<\/button>\n <div class=\"cloud\" style=\"width: 100px; height: 100px; background-color: #ffffff; border-radius: 50%; top: 0; left: 0;\"><\/div>\n <div class=\"cloud\" style=\"width: 50px; height: 50px; background-color: #ffffff; border-radius: 50%; top: 50px; left: 100px;\"><\/div>\n <div class=\"cloud\" style=\"width: 150px; height: 150px; background-color: #ffffff; border-radius: 50%; top: 100px; left: 200px;\"><\/div>\n <\/div>\n\n <script src=\"https:\/\/html2canvas.hertzen.com\/dist\/html2canvas.min.js\"><\/script>\n <script>\n let serviciosActivos = {\n filmacion: false,\n edicion: false,\n diseno: false,\n historias: false,\n campanas: false,\n googlemaps: false,\n website: false,\n redsocial: false,\n appweb: false,\n personalizado: false\n };\n let itemsPersonalizados = [];\n let adicionalesAppweb = [];\n\n function showToast(message) {\n const toast = document.createElement('div');\n toast.className = 'toast';\n toast.textContent = message;\n document.body.appendChild(toast);\n setTimeout(() => {\n toast.style.animation = 'toastIn 0.5s ease-out reverse';\n setTimeout(() => document.body.removeChild(toast), 500);\n }, 3000);\n }\n\n function toggleServicio(servicio) {\n if (!servicio) return;\n const buttonId = servicio === 'redsocial' ? 'btnRedsocial' : servicio === 'personalizado' ? 'btnPersonalizado' : `btn${servicio.charAt(0).toUpperCase() + servicio.slice(1)}`;\n const sectionId = servicio === 'redsocial' ? 'seccionRedSocial' : servicio === 'personalizado' ? 'seccionPersonalizado' : `seccion${servicio.charAt(0).toUpperCase() + servicio.slice(1)}`;\n const button = document.getElementById(buttonId);\n const section = document.getElementById(sectionId);\n if (!button || !section) {\n console.error(`Button or section not found for service: ${servicio}`);\n return;\n }\n serviciosActivos[servicio] = !serviciosActivos[servicio];\n button.classList.toggle('active');\n section.style.display = serviciosActivos[servicio] ? 'block' : 'none';\n if (serviciosActivos[servicio]) {\n showToast(`Servicio de ${servicio} activado`);\n }\n if (servicio === 'personalizado' && !serviciosActivos[servicio]) {\n itemsPersonalizados = [];\n actualizarListaItemsPersonalizados();\n calcularPresupuesto();\n }\n if (servicio === 'appweb' && !serviciosActivos[servicio]) {\n adicionalesAppweb = [];\n actualizarListaAdicionalesAppweb();\n calcularPresupuesto();\n }\n }\n\n function calcularDescuento(cantidad, tipo) {\n if (tipo === 'historias') {\n if (cantidad >= 8 && cantidad < 15) {\n return 0.05;\n } else if (cantidad >= 15 && cantidad < 25) {\n return 0.10;\n } else if (cantidad >= 25) {\n return 0.15;\n }\n } else {\n if (cantidad >= 5 && cantidad < 10) {\n return 0.02;\n } else if (cantidad >= 10 && cantidad < 15) {\n return 0.04;\n } else if (cantidad >= 15) {\n return 0.06;\n }\n }\n return 0;\n }\n\n function calcularPresupuesto() {\n let costoGrabacion = 0;\n let costoEdicion = 0;\n let costoDiseno = 0;\n let costoHistorias = 0;\n let costoCampanas = 0;\n let costoGoogleMaps = 0;\n let costoWebsite = 0;\n let costoRedSocial = 0;\n let costoAppweb = 0;\n let costoPersonalizado = 0;\n let cantidadTotal = 0;\n const inflacion = parseInt(document.getElementById('inflacion').value) \/ 100;\n const factorInflacion = 1 + inflacion;\n const descuentoAdicional = parseInt(document.getElementById('descuentoAdicional').value) \/ 100;\n if (serviciosActivos.filmacion) {\n const duracion = parseInt(document.getElementById('duracion').value);\n const horasAdicionales = parseInt(document.getElementById('horasAdicionales').value);\n const asistente = parseInt(document.getElementById('asistente').value);\n const distancia = parseInt(document.getElementById('distancia').value);\n const esTelevision = document.getElementById('televisionFilmacion').checked;\n\n \/\/ PRECIOS ACTUALIZADOS AQU\u00cd (L\u00d3GICA)\n switch (duracion) {\n case 1:\n costoGrabacion = 41580; \n break;\n case 2:\n costoGrabacion = 81500; \n break;\n case 4:\n costoGrabacion = 159670; \n break;\n case 6:\n costoGrabacion = 234500; \n break;\n case 8:\n costoGrabacion = 306030; \n break;\n case 12:\n costoGrabacion = 449060; \n break;\n }\n costoGrabacion += horasAdicionales * (20160); \n costoGrabacion += asistente * (10080); \n costoGrabacion += distancia * 140.07; \n if (esTelevision) {\n costoGrabacion *= 1.5; \n }\n cantidadTotal += 1;\n }\n\n if (serviciosActivos.edicion) {\n const minutos = parseInt(document.getElementById('minutos').value);\n const complejidad = document.getElementById('complejidad').value;\n const esTelevision = document.getElementById('televisionEdicion').checked;\n\n costoEdicion = minutos * (20160);\n switch (complejidad) {\n case 'intermedio':\n costoEdicion *= 1.4;\n break;\n case 'avanzado':\n costoEdicion *= 1.6;\n break;\n }\n if (esTelevision) {\n costoEdicion *= 1.5; \n }\n cantidadTotal += minutos;\n }\n\n if (serviciosActivos.diseno) {\n const cantidadDisenos = parseInt(document.getElementById('cantidadDisenos').value);\n const complejidadDiseno = document.getElementById('complejidadDiseno').value;\n costoDiseno = cantidadDisenos * (18900); \n switch (complejidadDiseno) {\n case 'intermedio':\n costoDiseno *= 1.4;\n break;\n case 'avanzado':\n costoDiseno *= 1.6;\n break;\n }\n cantidadTotal += cantidadDisenos;\n }\n if (serviciosActivos.historias) {\n const cantidadHistorias = parseInt(document.getElementById('cantidadHistorias').value);\n const tipoHistoria = document.getElementById('tipoHistoria').value;\n switch (tipoHistoria) {\n case 'simple':\n costoHistorias = cantidadHistorias * (3600); \n break;\n case 'intermedia':\n costoHistorias = cantidadHistorias * (7200); \n break;\n case 'seguimiento':\n costoHistorias = cantidadHistorias * (10800); \n break;\n }\n const descuentoHistorias = calcularDescuento(cantidadHistorias, 'historias');\n costoHistorias *= 1 - descuentoHistorias;\n cantidadTotal += cantidadHistorias;\n }\n if (serviciosActivos.campanas) {\n const cantidadCampanas = parseInt(document.getElementById('cantidadCampanas').value);\n costoCampanas = cantidadCampanas * (72000); \n cantidadTotal += cantidadCampanas;\n }\n if (serviciosActivos.googlemaps) {\n const cantidadPerfiles = parseInt(document.getElementById('cantidadPerfiles').value);\n const cantidadImagenes = parseInt(document.getElementById('cantidadImagenes').value);\n const cantidadProductos = parseInt(document.getElementById('cantidadProductos').value);\n costoGoogleMaps = 100000 * cantidadPerfiles;\n costoGoogleMaps += cantidadImagenes * 3000;\n costoGoogleMaps += cantidadProductos * 1000;\n if (cantidadPerfiles >= 3) {\n costoGoogleMaps *= 0.85;\n } else if (cantidadPerfiles >= 2) {\n costoGoogleMaps *= 0.90;\n }\n if (cantidadProductos >= 20) {\n costoGoogleMaps *= 0.9;\n } else if (cantidadProductos >= 10) {\n costoGoogleMaps *= 0.95;\n }\n cantidadTotal += cantidadPerfiles;\n }\n if (serviciosActivos.website) {\n const secciones = parseInt(document.getElementById('cantidadSecciones').value);\n const productos = parseInt(document.getElementById('cantidadProductosWeb').value);\n const tipoWeb = document.getElementById('tipoWeb').value;\n const costoPorSeccion = 70000;\n const costoPorProducto = 3000;\n \n costoWebsite = secciones * costoPorSeccion;\n costoWebsite += productos * costoPorProducto;\n\n \/\/ Aplicar descuento por cantidad de secciones\n if (secciones >= 10) {\n costoWebsite *= 0.95; \n }\n\n if (tipoWeb === 'remodelacion') {\n costoWebsite *= 0.5;\n }\n }\n if (serviciosActivos.redsocial) {\n const cantidadRedes = parseInt(document.getElementById('cantidadRedes').value);\n const tipoDiseno = document.getElementById('tipoDiseno').value;\n costoRedSocial = tipoDiseno === 'normal' ? cantidadRedes * 40000 : cantidadRedes * 60000;\n if (cantidadRedes >= 3) {\n costoRedSocial *= 0.85;\n }\n cantidadTotal += cantidadRedes;\n }\n if (serviciosActivos.appweb) {\n const seccionesApp = parseInt(document.getElementById('cantidadSeccionesApp').value);\n const tipoPagoApp = document.getElementById('tipoPagoApp').value;\n costoAppweb = seccionesApp * 50000;\n if (adicionalesAppweb.length > 0) {\n costoAppweb += adicionalesAppweb.reduce((sum, item) => sum + item.valor, 0);\n }\n if (tipoPagoApp === 'cuotas') {\n costoAppweb *= 1.10;\n }\n cantidadTotal += 1;\n }\n if (serviciosActivos.personalizado && itemsPersonalizados.length > 0) {\n costoPersonalizado = itemsPersonalizados.reduce((sum, item) => sum + item.valor, 0);\n }\n const subtotal = costoGrabacion + costoEdicion + costoDiseno + \n costoHistorias + costoCampanas + costoGoogleMaps + costoWebsite + \n costoRedSocial + costoAppweb + costoPersonalizado;\n const descuentoPorCantidad = calcularDescuento(cantidadTotal, 'general');\n const totalConDescuentos = subtotal - subtotal * descuentoPorCantidad - subtotal * descuentoAdicional;\n const total = totalConDescuentos * factorInflacion;\n const costoHoraAdicional = 16800 * factorInflacion;\n const resultado = document.getElementById('resultado');\n resultado.classList.remove('result-animation');\n void resultado.offsetWidth;\n resultado.classList.add('result-animation');\n resultado.innerHTML = `\n ${serviciosActivos.filmacion ? `\n <p><strong>Grabación de Sesi\u00f3n:<\/strong> AR$ ${(costoGrabacion * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionFilmacion').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionFilmacion').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionFilmacion').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionFilmacion').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.edicion ? `\n <p><strong>Edición de Video:<\/strong> AR$ ${(costoEdicion * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionEdicion').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionEdicion').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionEdicion').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionEdicion').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.diseno ? `\n <p><strong>Diseño de Imagen:<\/strong> AR$ ${(costoDiseno * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionDiseno').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionDiseno').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionDiseno').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionDiseno').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.historias ? `\n <p><strong>Historias:<\/strong> AR$ ${(costoHistorias * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionHistorias').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionHistorias').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionHistorias').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionHistorias').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.campanas ? `\n <p><strong>Campañas de Marketing Digital:<\/strong> AR$ ${(costoCampanas * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionCampanas').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionCampanas').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionCampanas').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionCampanas').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.googlemaps ? `\n <p><strong>Google Maps:<\/strong> AR$ ${(costoGoogleMaps * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionGooglemaps').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionGooglemaps').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionGooglemaps').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionGooglemaps').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.website ? `\n <p><strong>Sitio Web:<\/strong> AR$ ${(costoWebsite * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionWebsite').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionWebsite').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionWebsite').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionWebsite').value}<\/p>\n ` : ''}\n <p><strong>Opci\u00f3n en dos cuotas de:<\/strong> AR$ ${((costoWebsite * 1.20) * factorInflacion \/ 2).toFixed(2)}<\/p>\n ` : ''}\n ${serviciosActivos.redsocial ? `\n <p><strong>Diseño de Redes Sociales:<\/strong> AR$ ${(costoRedSocial * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionRedSocial').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionRedSocial').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionRedSocial').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionRedSocial').value}<\/p>\n ` : ''}\n ` : ''}\n ${serviciosActivos.appweb ? `\n <p><strong>Aplicación Web Interna:<\/strong> AR$ ${(costoAppweb * factorInflacion).toFixed(2)}<\/p>\n ${document.getElementById('descripcionAppweb').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionAppweb').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionAppweb').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionAppweb').value}<\/p>\n ` : ''}\n ${document.getElementById('tipoPagoApp').value === 'cuotas' ? `\n <p><strong>Dos cuotas de:<\/strong> AR$ ${(costoAppweb * factorInflacion \/ 2).toFixed(2)}<\/p>\n ` : ''}\n ${document.getElementById('mantenimientoApp').checked ? `\n <p><strong>Mantenimiento mensual:<\/strong> AR$ 30,000.00<\/p>\n ` : ''}\n ${adicionalesAppweb.length > 0 ? `\n <div style=\"margin-top: 1rem;\">\n <strong>Adicionales:<\/strong>\n ${adicionalesAppweb.map(item => `\n <p>${item.nombre}: AR$ ${(item.valor * factorInflacion).toFixed(2)}<\/p>\n `).join('')}\n <\/div>\n ` : ''}\n ` : ''}\n ${itemsPersonalizados.length > 0 ? `\n <div style=\"margin-top: 1rem;\">\n <strong>Items Personalizados:<\/strong>\n ${itemsPersonalizados.map(item => `\n <p>${item.nombre}: AR$ ${(item.valor * factorInflacion).toFixed(2)}<\/p>\n `).join('')}\n <\/div>\n ` : ''}\n ${serviciosActivos.personalizado ? `\n ${document.getElementById('descripcionPersonalizado').value ? `\n <p><strong>Descripción:<\/strong> ${document.getElementById('descripcionPersonalizado').value}<\/p>\n ` : ''}\n ${document.getElementById('aclaracionPersonalizado').value ? `\n <p><strong>Aclaraciones:<\/strong> ${document.getElementById('aclaracionPersonalizado').value}<\/p>\n ` : ''}\n ` : ''}\n <h3 style=\"font-family: 'Work Sans', sans-serif; font-weight: 200; letter-spacing: 1px;\">\n <strong style=\"display: block; margin-bottom: 0.5rem; font-size: 1.2em;\">TOTAL:<\/strong>\n <span style=\"font-size: 0.6em;\">AR$<\/span> ${total.toFixed(2)}\n <\/h3>\n <div class=\"thank-you-message\">\n \u00a1Gracias por consultar nuestros servicios! Estamos entusiasmados por la posibilidad de trabajar juntos en tu pr\u00f3ximo proyecto. Si tienes alguna pregunta adicional, no dudes en contactarnos.\n <\/div>\n `;\n showToast('\u00a1Presupuesto calculado exitosamente!');\n }\n\n async function descargarPresupuesto() {\n const downloadBtn = event.target;\n const originalText = downloadBtn.textContent;\n downloadBtn.innerHTML = '<span class=\"loading\"><\/span> Generando...';\n downloadBtn.disabled = true;\n try {\n const contenedor = document.createElement('div');\n contenedor.style.width = '800px';\n contenedor.style.padding = '20px';\n contenedor.style.backgroundColor = '#ffffff';\n contenedor.style.color = '#000000';\n const nombreServicio = document.getElementById('nombreServicio').value;\n const clouds = Array.from({\n length: 3\n }, (_, i) => `\n <svg class=\"cloud\" style=\"top: ${20 + i * 30}%; left: ${i * 30}%\" width=\"100\" height=\"40\" viewBox=\"0 0 100 40\">\n <path fill=\"#f0f0f0\" d=\"M10 30 Q25 10 40 30 T70 30 T100 30 V40 H0 Z\"\/>\n <\/svg>\n `).join('');\n contenedor.innerHTML = `\n <div class=\"cloud-bg\" style=\"font-family: 'Work Sans', Arial, sans-serif; padding: 2rem; background: linear-gradient(135deg, #E3F2FD, #ffffff); color: #000000;\">\n ${clouds}\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/YvEDrAv.png\" alt=\"Logo\" style=\"display: block; margin: 0 auto; width: 150px; margin-bottom: 1.5rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));\">\n <div style=\"text-align: center;\">\n <h1 style=\"color: #4682B4; font-weight: 200; margin: 1rem 0; letter-spacing: 1px;\">\n Presupuestador autom\u00e1tico de servicios - Gleztin Marketing Digital\n <\/h1>\n ${nombreServicio ? `\n <h2 style=\"color: #4682B4; font-weight: 300; margin: 1rem 0; letter-spacing: 0.5px;\">\n ${nombreServicio}\n <\/h2>\n ` : ''}\n <\/div>\n <div style=\"margin-top: 2rem; background: rgba(0, 0, 0, 0.05); border-radius: 12px; padding: 2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1);\">\n ${document.getElementById('resultado').innerHTML\n .replace(\/color: #ffffff\/g, 'color: #000000')\n .replace(\/color: #87CEEB\/g, 'color: #4682B4')\n .replace(\/background-color: rgba\$17, 17, 17, 0.8\$\/g, 'background-color: rgba(255, 255, 255, 0.8)')\n .replace(\/background-color: rgba\$135, 206, 235, 0.1\$\/g, 'background-color: rgba(255, 255, 255, 0.8)')\n .replace(\/<h3\/g, '<h3 style=\"color: #000000 !important; font-family: \\'Work Sans\\', sans-serif; font-weight: 200; letter-spacing: 1px; font-size: 1.1em;\"')\n .replace(\/<strong style=\"display: block; margin-bottom: 0.5rem; font-size: 1.2em;\">\/g, '<strong style=\"display: block; margin-bottom: 0.5rem; font-size: 0.9em; color: #000000 !important;\">')\n .replace(\/<strong>\/g, '<strong style=\"color: #000000;\">')\n .replace(\/class=\"thank-you-message\"\/g, 'class=\"thank-you-message\" style=\"color: #000000; background-color: rgba(255, 255, 255, 0.8);\"')}\n <\/div>\n <\/div>\n `;\n document.body.appendChild(contenedor);\n const canvas = await html2canvas(contenedor, {\n backgroundColor: '#ffffff',\n scale: 2,\n logging: false,\n allowTaint: true,\n useCORS: true\n });\n const link = document.createElement('a');\n link.download = 'Presupuesto_Servicios_Completos.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n document.body.removeChild(contenedor);\n showToast('\u00a1Presupuesto descargado exitosamente!');\n } catch (error) {\n console.error('Error al generar la imagen:', error);\n showToast('Error al generar el presupuesto. Intente nuevamente.');\n } finally {\n downloadBtn.innerHTML = originalText;\n downloadBtn.disabled = false;\n }\n }\n\n document.querySelectorAll('input[type=\"number\"]').forEach(input => {\n input.addEventListener('input', function () {\n if (this.value < 0) {\n this.value = 0;\n showToast('El valor no puede ser negativo');\n }\n });\n });\n\n function agregarItemPersonalizado() {\n if (!serviciosActivos.personalizado) {\n showToast('Debe activar primero la secci\u00f3n de presupuesto personalizado');\n return;\n }\n const nombre = document.getElementById('nombrePersonalizado').value;\n const valor = parseFloat(document.getElementById('valorPersonalizado').value);\n if (!nombre || valor <= 0) {\n showToast('Por favor ingrese un nombre y valor v\u00e1lido');\n return;\n }\n itemsPersonalizados.push({\n nombre,\n valor\n });\n actualizarListaItemsPersonalizados();\n calcularPresupuesto();\n document.getElementById('nombrePersonalizado').value = '';\n document.getElementById('valorPersonalizado').value = '0';\n showToast('Item personalizado agregado');\n }\n\n function actualizarListaItemsPersonalizados() {\n const container = document.getElementById('itemsPersonalizados');\n container.innerHTML = itemsPersonalizados.map((item, index) => `\n <div style=\"display: flex; justify-content: space-between; margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 4px;\">\n <span>${item.nombre}: AR$ ${item.valor.toFixed(2)}<\/span>\n <button onclick=\"eliminarItemPersonalizado(${index})\" style=\"background: #ff4444; padding: 2px 8px;\">X<\/button>\n <\/div>\n `).join('');\n }\n\n function eliminarItemPersonalizado(index) {\n itemsPersonalizados.splice(index, 1);\n actualizarListaItemsPersonalizados();\n calcularPresupuesto();\n showToast('Item personalizado eliminado');\n }\n\n function agregarAdicionalAppweb() {\n const nombre = document.getElementById('nombreAdicionalApp').value;\n const valor = parseFloat(document.getElementById('valorAdicionalApp').value);\n if (!nombre || valor <= 0) {\n showToast('Por favor ingrese un nombre y valor v\u00e1lido para el adicional');\n return;\n }\n adicionalesAppweb.push({ nombre, valor });\n actualizarListaAdicionalesAppweb();\n calcularPresupuesto();\n document.getElementById('nombreAdicionalApp').value = '';\n document.getElementById('valorAdicionalApp').value = '0';\n showToast('Adicional agregado');\n }\n\n function actualizarListaAdicionalesAppweb() {\n const container = document.getElementById('listaAdicionalesAppweb');\n container.innerHTML = adicionalesAppweb.map((item, index) => `\n <div style=\"display: flex; justify-content: space-between; margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 4px;\">\n <span>${item.nombre}: AR$ ${item.valor.toFixed(2)}<\/span>\n <button onclick=\"eliminarAdicionalAppweb(${index})\" style=\"background: #ff4444; padding: 2px 8px;\">X<\/button>\n <\/div>\n `).join('');\n }\n\n function eliminarAdicionalAppweb(index) {\n adicionalesAppweb.splice(index, 1);\n actualizarListaAdicionalesAppweb();\n calcularPresupuesto();\n showToast('Adicional eliminado');\n }\n\n function copiarTextoIncluido() {\n const texto = \"Incluye sin cargo: \u2705Carga de contenido crudo en la nube \u2705Tomas de drone\";\n navigator.clipboard.writeText(texto).then(() => {\n const button = document.querySelector('.copy-button');\n button.classList.add('copied');\n button.innerHTML = 'Copiado! <span class=\"tooltip\">\u2713<\/span>';\n setTimeout(() => {\n button.classList.remove('copied');\n button.innerHTML = 'Copiar texto de inclusiones <span class=\"tooltip\">Haz clic para copiar<\/span>';\n }, 2000);\n showToast('Texto copiado al portapapeles');\n }).catch(err => {\n showToast('Error al copiar el texto');\n console.error('Error al copiar:', err);\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div class=\"wp-block-stackable-spacer stk-block-spacer stk--no-padding stk-block stk-ea64c4a\" data-block-id=\"ea64c4a\"><style>.stk-ea64c4a {height:100px !important;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Presupuestador de Servicios de Filmación, Fotografía, Diseño y Marketing Digital Presupuestador automático de servicios – Gleztin Marketing Digital Nombre del Servicio (opcional): Seleccione los servicios: Filmación Edición Diseño de Imagen Historias Campañas de Marketing Digital Google Maps Sitio Web Diseño de Redes Sociales Aplicación Web Interna Presupuesto Personalizado 1. Grabación de Sesi\u00f3n Descripción del proyecto: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_joinchat":[],"footnotes":""},"class_list":["post-1634","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/1634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=1634"}],"version-history":[{"count":18,"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/1634\/revisions"}],"predecessor-version":[{"id":2762,"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/1634\/revisions\/2762"}],"wp:attachment":[{"href":"https:\/\/gleztin.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=1634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}