{"id":2558,"date":"2025-08-27T15:16:21","date_gmt":"2025-08-27T21:16:21","guid":{"rendered":"https:\/\/webtotal.com.mx\/?page_id=2558"},"modified":"2026-04-26T17:32:38","modified_gmt":"2026-04-26T23:32:38","slug":"carta-compromiso-y-de-colaboracion","status":"publish","type":"page","link":"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/","title":{"rendered":"Carta Compromiso y de Colaboracion"},"content":{"rendered":"\n<div style=\"height:18px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex\">\n<div style=\"height:100px;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-6388d5dc\"><\/div>\n\n\n\n<p>Es indispensable que leas las CLAUSULAS de la carta compromiso antes de firmarla, asi como las POLITICAS, TERMINOS Y CONDICIONES Y PROCESO DE TRABAJO, al generar la carta y descargarla, se acepta que se hizo este proceso antes de aceptar.<br><\/p>\n\n\n\n<div style=\"height:100px;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-6388d5dc\"><\/div>\n<\/div>\n\n\n\n<div style=\"height:13px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div id=\"wbt-compromiso-original\">\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n\n    <style>\n        \/* ==========================================================================\n           ESTILO ORIGINAL RESTAURADO (TEMA CLARO \/ MODERNO) + ENCAPSULACI\u00d3N\n           ========================================================================== *\/\n        #wbt-compromiso-original {\n            --azul-oscuro: #0A2342;\n            --azul-medio: #1E88E5;\n            --naranja: #FF6B35;\n            --gris-claro: #f8f9fa;\n            --gris-borde: #e0e0e0;\n            --rojo-error: #dc3545;\n            font-family: 'Segoe UI', Tahoma, sans-serif;\n            background: transparent;\n            padding: 20px 10px;\n            margin: 0 auto;\n            max-width: 1200px;\n        }\n\n        #wbt-compromiso-original * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        #wbt-compromiso-original .container {\n            background: white;\n            border-radius: 20px;\n            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);\n            overflow: hidden;\n            animation: fadeIn 0.8s ease-in-out;\n            color: #333;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(20px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        #wbt-compromiso-original .header {\n            background: linear-gradient(45deg, var(--azul-oscuro), var(--azul-medio));\n            color: white;\n            padding: 40px 20px;\n            text-align: center;\n            position: relative;\n        }\n\n        #wbt-compromiso-original .header h1 {\n            font-size: clamp(1.8rem, 4vw, 2.5rem);\n            margin-bottom: 5px;\n            letter-spacing: 1px;\n            color: white;\n            font-weight: bold;\n        }\n\n        #wbt-compromiso-original .header p {\n            opacity: 0.9;\n            font-size: 1.1rem;\n            color: white;\n        }\n\n        #wbt-compromiso-original .main-content {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n        }\n\n        #wbt-compromiso-original .form-section {\n            padding: 30px;\n            background: white;\n        }\n\n        #wbt-compromiso-original .preview-section {\n            display: flex;\n            flex-direction: column;\n            padding: 30px;\n            border-left: 3px solid var(--azul-medio);\n            background: white;\n            max-height: 950px;\n        }\n\n        #wbt-compromiso-original .section-title {\n            font-size: 1.3rem;\n            color: var(--azul-oscuro);\n            border-bottom: 3px solid var(--naranja);\n            padding-bottom: 8px;\n            margin-bottom: 20px;\n            font-weight: bold;\n        }\n\n        #wbt-compromiso-original .form-group {\n            margin-bottom: 20px;\n        }\n\n        #wbt-compromiso-original .form-group label {\n            font-weight: 600;\n            font-size: 0.95rem;\n            margin-bottom: 6px;\n            display: block;\n            color: var(--azul-oscuro);\n        }\n\n        #wbt-compromiso-original input[type=\"text\"],\n        #wbt-compromiso-original input[type=\"tel\"],\n        #wbt-compromiso-original input[type=\"email\"] {\n            width: 100%;\n            padding: 12px;\n            border-radius: 8px;\n            border: 1.5px solid var(--gris-borde);\n            font-size: 0.95rem;\n            outline: none;\n            transition: 0.3s;\n            background: #fff;\n            color: #333;\n        }\n\n        #wbt-compromiso-original input:focus {\n            border-color: var(--naranja);\n            box-shadow: 0 0 6px rgba(255, 107, 53, 0.3);\n        }\n\n        \/* Estilo de error para validaci\u00f3n *\/\n        #wbt-compromiso-original input.error-border {\n            border-color: var(--rojo-error);\n            background: #fff5f5;\n        }\n\n        #wbt-compromiso-original .error-text {\n            color: var(--rojo-error);\n            font-size: 0.85rem;\n            font-weight: 600;\n            margin-top: 4px;\n            display: none;\n        }\n\n        #wbt-compromiso-original .options-group {\n            display: grid;\n            gap: 10px;\n            margin-top: 10px;\n        }\n\n        #wbt-compromiso-original .option-item {\n            background: white;\n            border: 2px solid var(--gris-borde);\n            border-radius: 10px;\n            padding: 12px;\n            cursor: pointer;\n            transition: 0.3s;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            font-weight: 600;\n            color: #444;\n            font-size: 0.95rem;\n        }\n\n        #wbt-compromiso-original .option-item:hover {\n            border-color: var(--naranja);\n            background: #fff8f3;\n        }\n\n        #wbt-compromiso-original .option-item input {\n            transform: scale(1.3);\n            accent-color: var(--naranja);\n            cursor: pointer;\n        }\n\n        #wbt-compromiso-original .option-item.error-border {\n            border-color: var(--rojo-error);\n        }\n\n        #wbt-compromiso-original .generate-btn {\n            width: 100%;\n            padding: 16px;\n            background: linear-gradient(45deg, var(--naranja), #ff8c5c);\n            color: white;\n            border: none;\n            border-radius: 12px;\n            font-size: 1.1rem;\n            font-weight: 600;\n            cursor: pointer;\n            margin-top: 15px;\n            transition: 0.3s;\n            text-transform: uppercase;\n        }\n\n        #wbt-compromiso-original .generate-btn:hover {\n            transform: translateY(-2px) scale(1.02);\n            box-shadow: 0 10px 18px rgba(255, 107, 53, 0.35);\n        }\n\n        \/* VISTA PREVIA Y BOTONES *\/\n        #wbt-compromiso-original .contract-preview {\n            font-family: 'Times New Roman', serif;\n            font-size: 14px;\n            line-height: 1.6;\n            color: #333;\n            overflow-y: auto;\n            flex-grow: 1;\n            padding-right: 10px;\n            border: 1px solid var(--gris-borde);\n            border-radius: 8px;\n            background: #fff;\n            margin-bottom: 20px;\n            box-shadow: inset 0 0 10px rgba(0,0,0,0.05);\n        }\n\n        #wbt-compromiso-original .contract-preview h2 { text-align: center; text-transform: uppercase; margin-bottom: 10px; font-size: 18px; color: var(--azul-oscuro); }\n        #wbt-compromiso-original .contract-preview h3 { font-size: 14px; margin: 20px 0 10px; text-transform: uppercase; color: var(--naranja); border-bottom: 1px solid var(--gris-borde); padding-bottom: 4px; }\n        #wbt-compromiso-original .clause { margin-bottom: 15px; text-align: justify; }\n        #wbt-compromiso-original .highlight { background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: var(--azul-oscuro); }\n\n        #wbt-compromiso-original .action-btns {\n            display: none;\n            flex-direction: column;\n            gap: 10px;\n        }\n\n        #wbt-compromiso-original .download-btn,\n        #wbt-compromiso-original .whatsapp-btn {\n            width: 100%;\n            padding: 16px;\n            color: white;\n            border: none;\n            border-radius: 12px;\n            font-size: 1.1rem;\n            font-weight: 600;\n            cursor: pointer;\n            transition: 0.3s;\n            text-align: center;\n        }\n\n        #wbt-compromiso-original .download-btn { background: linear-gradient(45deg, var(--azul-oscuro), var(--azul-medio)); }\n        #wbt-compromiso-original .download-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 18px rgba(30, 136, 229, 0.35); }\n\n        #wbt-compromiso-original .whatsapp-btn { background: linear-gradient(45deg, #25D366, #128C7E); }\n        #wbt-compromiso-original .whatsapp-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 18px rgba(37, 211, 102, 0.35); }\n\n        @media (max-width: 850px) {\n            #wbt-compromiso-original .main-content { grid-template-columns: 1fr; }\n            #wbt-compromiso-original .preview-section { border-left: none; border-top: 3px solid var(--azul-medio); max-height: none; }\n            #wbt-compromiso-original .contract-preview { min-height: 400px; }\n        }\n    <\/style>\n\n    <div class=\"container\">\n        <div class=\"header\">\n            <h1>\ud83d\udcc4 Carta Compromiso<\/h1>\n            <p><strong>Soluciones Digitales Integrales de M\u00e9xico SAS<\/strong><\/p>\n        <\/div>\n\n        <div class=\"main-content\">\n            <div class=\"form-section\">\n                <form id=\"carta-form\" novalidate>\n                    <div class=\"section-title\">\ud83d\udccb Datos del Cliente<\/div>\n                    \n                    <div class=\"form-group\">\n                        <label>Raz\u00f3n Social (Empresa o Persona F\u00edsica) *<\/label>\n                        <input type=\"text\" id=\"f_rsocial\" placeholder=\"Ej. Juan P\u00e9rez \/ Empresa SA de CV\">\n                        <div class=\"error-text\" id=\"err_rsocial\">Requerido<\/div>\n                    <\/div>\n                    \n                    <div class=\"form-group\">\n                        <label>Contratante (Representante Legal) *<\/label>\n                        <input type=\"text\" id=\"f_contratante\" placeholder=\"Nombre de quien firma\">\n                        <div class=\"error-text\" id=\"err_contratante\">Requerido<\/div>\n                    <\/div>\n                    \n                    <div class=\"form-group\">\n                        <label>RFC *<\/label>\n                        <input type=\"text\" id=\"f_rfc\" placeholder=\"RFC del contratante\/empresa\">\n                        <div class=\"error-text\" id=\"err_rfc\">Requerido<\/div>\n                    <\/div>\n                    \n                    <div class=\"form-group\">\n                        <label>Domicilio Completo *<\/label>\n                        <input type=\"text\" id=\"f_domicilio\" placeholder=\"Calle, N\u00famero, Colonia, CP\">\n                        <div class=\"error-text\" id=\"err_domicilio\">Requerido<\/div>\n                    <\/div>\n                    \n                    <div class=\"form-group\">\n                        <label>Ciudad y Estado *<\/label>\n                        <input type=\"text\" id=\"f_ciudad\" placeholder=\"Ciudad de emisi\u00f3n\">\n                        <div class=\"error-text\" id=\"err_ciudad\">Requerido<\/div>\n                    <\/div>\n\n                    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 15px;\">\n                        <div class=\"form-group\">\n                            <label>Tel\u00e9fono \/ WhatsApp *<\/label>\n                            <input type=\"tel\" id=\"f_telefono\" placeholder=\"10 d\u00edgitos\">\n                            <div class=\"error-text\" id=\"err_telefono\">Requerido<\/div>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label>Correo Electr\u00f3nico *<\/label>\n                            <input type=\"email\" id=\"f_email\" placeholder=\"correo@ejemplo.com\">\n                            <div class=\"error-text\" id=\"err_email\">Requerido<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"section-title\" style=\"margin-top: 10px;\">\ud83d\udcbc Plan a Contratar<\/div>\n                    <div class=\"form-group\">\n                        <div class=\"options-group\">\n                            <label class=\"option-item\" id=\"opt_1\">\n                                \ud83c\udf10 Identidad Express\n                                <input type=\"radio\" name=\"f_plan\" value=\"Identidad Express\">\n                            <\/label>\n                            <label class=\"option-item\" id=\"opt_2\">\n                                \ud83e\udd1d Socio Tecnol\u00f3gico (SaaS)\n                                <input type=\"radio\" name=\"f_plan\" value=\"Socio Tecnol\u00f3gico\">\n                            <\/label>\n                            <label class=\"option-item\" id=\"opt_3\">\n                                \ud83d\uded2 Despliegue Comercial\n                                <input type=\"radio\" name=\"f_plan\" value=\"Despliegue Comercial\">\n                            <\/label>\n                            <label class=\"option-item\" id=\"opt_4\">\n                                \ud83d\udee1\ufe0f Autogesti\u00f3n Soberana\n                                <input type=\"radio\" name=\"f_plan\" value=\"Autogesti\u00f3n Soberana\">\n                            <\/label>\n                            <label class=\"option-item\" id=\"opt_5\">\n                                \ud83c\udfe2 Arquitectura Enterprise\n                                <input type=\"radio\" name=\"f_plan\" value=\"Arquitectura Enterprise\">\n                            <\/label>\n                        <\/div>\n                        <div class=\"error-text\" id=\"err_plan\" style=\"text-align: center; margin-top: 8px;\">Por favor selecciona un plan.<\/div>\n                    <\/div>\n\n                    <button type=\"button\" class=\"generate-btn\" onclick=\"GeneradorApp.procesar()\">\ud83c\udfaf Generar Carta Compromiso<\/button>\n                <\/form>\n            <\/div>\n\n            <div class=\"preview-section\">\n                <div class=\"section-title\">\ud83d\udc41\ufe0f Vista Previa del Documento<\/div>\n                \n                <div id=\"contract-canvas\" class=\"contract-preview\">\n                    <div id=\"documento-imprimible\" style=\"padding: 20px; background-color: #ffffff;\">\n                        <p style=\"text-align:center; color:#999; padding:40px;\">\n                            Complete todos los campos del formulario para generar la vista previa oficial&#8230;\n                        <\/p>\n                    <\/div>\n                <\/div>\n\n                <div id=\"wbt-instructions\" style=\"display: none; background: #fff5f5; border: 2px solid #dc3545; padding: 15px; border-radius: 8px; margin-bottom: 15px;\">\n                    <p style=\"color: #dc3545; font-size: 0.9rem; font-weight: bold; margin-bottom: 10px; text-align: justify; line-height: 1.4;\">\n                        \u00a1AVISO PREVIO!: ASEG\u00daRATE DE QUE EL BOT\u00d3N DIGA &#8220;GENERANDO IMAGEN&#8230;&#8221; Y ESPERA DE 15 A 30 SEGUNDOS HASTA QUE SE GENERE, SI NO SE GENERA DALE CLIC OTRA VEZ, PERO NO SIMULT\u00c1NEAMENTE O SE TRABAR\u00c1 Y GENERAR\u00c1 MUCHAS IM\u00c1GENES.\n                    <\/p>\n                    <ol style=\"color: #0A2342; font-size: 0.95rem; font-weight: 600; padding-left: 20px; margin-bottom: 0;\">\n                        <li style=\"margin-bottom: 5px;\">DESCARGAR LA IMAGEN EN PNG.<\/li>\n                        <li style=\"margin-bottom: 5px;\">ENVIAR MEDIANTE WHATSAPP DANDO CLIC AL BOT\u00d3N QUE VIENE AQU\u00cd MISMO.<\/li>\n                        <li>ESPERAR EL SEGUIMIENTO.<\/li>\n                    <\/ol>\n                <\/div>\n\n                <div id=\"action-buttons\" class=\"action-btns\">\n                    <button class=\"download-btn\" onclick=\"GeneradorApp.descargarPNG()\">\u2b07\ufe0f Descargar Carta Oficial (Imagen PNG)<\/button>\n                    <button class=\"whatsapp-btn\" onclick=\"GeneradorApp.enviarWA()\">\ud83d\udcf1 Confirmar y Pagar por WhatsApp<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\nconst GeneradorApp = (function() {\n    \n    \/\/ Tabulador oficial\n    const tabulador = {\n        \"Identidad Express\": { setup: \"$1,299.00 MXN\", poliza: \"$0.00 (No aplica)\" },\n        \"Socio Tecnol\u00f3gico\": { setup: \"$2,999.00 MXN\", poliza: \"$1,200.00 \/ mes\" },\n        \"Despliegue Comercial\": { setup: \"$5,999.00 MXN\", poliza: \"$3,500.00 \/ pagados D\u00eda 1 (Anual)\" },\n        \"Autogesti\u00f3n Soberana\": { setup: \"$12,000.00+ MXN\", poliza: \"$300.00 - $500.00 \/ mes\" },\n        \"Arquitectura Enterprise\": { setup: \"$5,000.00 MXN (Diagn\u00f3stico)\", poliza: \"A cotizar\" }\n    };\n\n    let dataActual = null;\n    const camposTexto = ['f_rsocial', 'f_contratante', 'f_rfc', 'f_domicilio', 'f_ciudad', 'f_telefono', 'f_email'];\n\n    function limpiarErrores() {\n        camposTexto.forEach(id => {\n            document.getElementById(id).classList.remove('error-border');\n            document.getElementById('err_' + id.replace('f_', '')).style.display = 'none';\n        });\n        document.querySelectorAll('.option-item').forEach(el => el.classList.remove('error-border'));\n        document.getElementById('err_plan').style.display = 'none';\n    }\n\n    function validarFormulario() {\n        limpiarErrores();\n        let esValido = true;\n\n        \/\/ Validar textos\n        camposTexto.forEach(id => {\n            const input = document.getElementById(id);\n            if (!input.value.trim()) {\n                input.classList.add('error-border');\n                document.getElementById('err_' + id.replace('f_', '')).style.display = 'block';\n                esValido = false;\n            }\n        });\n\n        \/\/ Validar Plan\n        const planSelect = document.querySelector('input[name=\"f_plan\"]:checked');\n        if (!planSelect) {\n            document.querySelectorAll('.option-item').forEach(el => el.classList.add('error-border'));\n            document.getElementById('err_plan').style.display = 'block';\n            esValido = false;\n        }\n\n        return esValido;\n    }\n\n    \/\/ Limpiar alertas al escribir\n    camposTexto.forEach(id => {\n        document.getElementById(id).addEventListener('input', function() {\n            this.classList.remove('error-border');\n            document.getElementById('err_' + this.id.replace('f_', '')).style.display = 'none';\n        });\n    });\n\n    document.querySelectorAll('input[name=\"f_plan\"]').forEach(radio => {\n        radio.addEventListener('change', function() {\n            document.querySelectorAll('.option-item').forEach(el => el.classList.remove('error-border'));\n            document.getElementById('err_plan').style.display = 'none';\n        });\n    });\n\n    return {\n        procesar: function() {\n            if (!validarFormulario()) return;\n\n            const planSeleccionado = document.querySelector('input[name=\"f_plan\"]:checked').value;\n            const config = tabulador[planSeleccionado];\n\n            dataActual = {\n                rsocial: document.getElementById('f_rsocial').value.trim(),\n                contratante: document.getElementById('f_contratante').value.trim(),\n                rfc: document.getElementById('f_rfc').value.trim(),\n                domicilio: document.getElementById('f_domicilio').value.trim(),\n                ciudad: document.getElementById('f_ciudad').value.trim(),\n                telefono: document.getElementById('f_telefono').value.trim(),\n                email: document.getElementById('f_email').value.trim(),\n                plan: planSeleccionado,\n                setup: config.setup,\n                poliza: config.poliza,\n                fecha: new Date().toLocaleDateString(\"es-MX\", { year: \"numeric\", month: \"long\", day: \"numeric\" })\n            };\n\n            \/\/ Inyectamos el HTML dentro del div #documento-imprimible\n            const htmlContrato = `\n                <div style=\"font-family: 'Times New Roman', serif; color: #333; line-height: 1.6; font-size: 14px;\">\n                    <div style=\"text-align: center; margin-bottom: 20px;\">\n                        <h2 style=\"font-size: 18px; margin-bottom: 5px; color: #0A2342; text-transform: uppercase;\">CARTA COMPROMISO<\/h2>\n                        <strong style=\"color: #333;\">SOLUCIONES DIGITALES INTEGRALES DE M\u00c9XICO SAS<\/strong>\n                    <\/div>\n\n                    <h3 style=\"font-size: 14px; margin: 20px 0 10px; text-transform: uppercase; color: #FF6B35; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px;\">1. PRESTADOR DE SERVICIOS<\/h3>\n                    <div style=\"margin-bottom: 15px; text-align: justify;\">\n                        \u2022 Raz\u00f3n Social: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">Soluciones Digitales Integrales de M\u00e9xico SAS<\/span><br>\n                        \u2022 Comercial: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">Web Total M\u00e9xico<\/span><br>\n                        \u2022 Representante: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">Luis Roberto Sandoval Garc\u00eda<\/span><br>\n                        \u2022 RFC: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">SAGL010822K81<\/span><br>\n                        \u2022 Domicilio: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">Sur 14 C 48, Ciudad de M\u00e9xico<\/span><br>\n                        \u2022 Contacto: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">56-4345-1631 \/ contacto@webtotal.com.mx<\/span>\n                    <\/div>\n\n                    <h3 style=\"font-size: 14px; margin: 20px 0 10px; text-transform: uppercase; color: #FF6B35; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px;\">2. DATOS DEL CLIENTE<\/h3>\n                    <div style=\"margin-bottom: 15px; text-align: justify;\">\n                        \u2022 Raz\u00f3n Social: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.rsocial}<\/span><br>\n                        \u2022 Contratante: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.contratante}<\/span><br>\n                        \u2022 RFC: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.rfc}<\/span><br>\n                        \u2022 Domicilio: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.domicilio}<\/span><br>\n                        \u2022 Ciudad: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.ciudad}<\/span><br>\n                        \u2022 Tel\u00e9fono: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.telefono}<\/span><br>\n                        \u2022 Correo: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.email}<\/span>\n                    <\/div>\n\n                    <h3 style=\"font-size: 14px; margin: 20px 0 10px; text-transform: uppercase; color: #FF6B35; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px;\">3. SERVICIO CONTRATADO<\/h3>\n                    <div style=\"margin-bottom: 15px; text-align: justify;\">\n                        Arquitectura Seleccionada: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.plan}<\/span><br>\n                        Inversi\u00f3n de Ingenier\u00eda (Setup): <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.setup}<\/span><br>\n                        P\u00f3liza de Supervisi\u00f3n Normativa: <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.poliza}<\/span>\n                    <\/div>\n\n                    <h3 style=\"font-size: 14px; margin: 20px 0 10px; text-transform: uppercase; color: #FF6B35; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px;\">4. ACUERDOS Y DECLARACIONES<\/h3>\n                    <div style=\"margin-bottom: 15px; text-align: justify;\">\n                        Ambas partes acuerdan cumplir de buena fe con las obligaciones establecidas. Aceptar, firmar o descargar esta carta compromiso, ASEGURA que ha le\u00eddo: las pol\u00edticas operativas, t\u00e9rminos y condiciones de contrataci\u00f3n y nuestro m\u00e9todo de trabajo. El pago inicial estipulado activa formalmente el cronograma de desarrollo en servidores.\n                    <\/div>\n\n                    <div style=\"text-align: center; margin-top: 30px;\">\n                        Dada en <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.ciudad}<\/span>, el <span style=\"background: #fff4e6; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #0A2342;\">${dataActual.fecha}<\/span>.\n                    <\/div>\n\n                    <div style=\"display:flex; justify-content:space-between; margin-top:60px; padding-bottom: 30px;\">\n                        <div style=\"text-align:center; width:45%;\">\n                            __________________________<br>\n                            <strong>EL CLIENTE<\/strong><br>\n                            ${dataActual.rsocial}<br>\n                            ${dataActual.contratante}\n                        <\/div>\n                        <div style=\"text-align:center; width:45%;\">\n                            __________________________<br>\n                            <strong>EL PRESTADOR<\/strong><br>\n                            Soluciones Digitales Integrales SAS<br>\n                            Representante Legal\n                        <\/div>\n                    <\/div>\n                <\/div>\n            `;\n\n            document.getElementById('documento-imprimible').innerHTML = htmlContrato;\n            \n            \/\/ Mostrar instrucciones y botones\n            document.getElementById('wbt-instructions').style.display = \"block\";\n            document.getElementById('action-buttons').style.display = \"flex\";\n\n            \/\/ Hacer Scroll hacia la vista previa si se est\u00e1 en celular\n            if (window.innerWidth <= 850) {\n                document.getElementById('contract-canvas').scrollIntoView({ behavior: 'smooth' });\n            }\n        },\n\n        descargarPNG: function() {\n            if(!dataActual) return;\n            \n            const elementoVisible = document.getElementById('documento-imprimible');\n            const boton = document.querySelector('.download-btn');\n            \n            \/\/ Efecto de cargando en el bot\u00f3n\n            const textoOriginal = boton.innerHTML;\n            boton.innerHTML = \"\u23f3 GENERANDO IMAGEN...\";\n            boton.style.opacity = \"0.7\";\n            \n            \/\/ Toma una captura \"fotogr\u00e1fica\" del elemento que tiene el contenido\n            html2canvas(elementoVisible, {\n                scale: 2, \/\/ Calidad alta (Retina)\n                backgroundColor: '#ffffff',\n                useCORS: true\n            }).then(canvas => {\n                \/\/ Restaurar bot\u00f3n\n                boton.innerHTML = textoOriginal;\n                boton.style.opacity = \"1\";\n                \n                \/\/ Forzar descarga del PNG\n                const link = document.createElement('a');\n                link.download = `Carta_Compromiso_${dataActual.rsocial.replace(\/\\s+\/g, '_')}.png`;\n                link.href = canvas.toDataURL('image\/png');\n                link.click();\n            }).catch(err => {\n                boton.innerHTML = \"\u274c Error. Intente de nuevo.\";\n                console.error(\"Error al generar PNG:\", err);\n                setTimeout(() => { boton.innerHTML = textoOriginal; boton.style.opacity = \"1\"; }, 3000);\n            });\n        },\n\n        enviarWA: function() {\n            if(!dataActual) return;\n            const mensaje = `\u2705 *CARTA COMPROMISO APROBADA*\\n\\nHola Web Total M\u00e9xico, he generado mi Carta Compromiso y acepto los t\u00e9rminos para iniciar mi proyecto:\\n\\n*1. ARQUITECTURA:*\\n\u2022 Plan: ${dataActual.plan}\\n\u2022 Costo Ingenier\u00eda: ${dataActual.setup}\\n\u2022 P\u00f3liza: ${dataActual.poliza}\\n\\n*2. DATOS DEL CLIENTE:*\\n\u2022 Raz\u00f3n Social: ${dataActual.rsocial}\\n\u2022 Contratante: ${dataActual.contratante}\\n\u2022 RFC: ${dataActual.rfc}\\n\\nPor favor, env\u00edenme los datos bancarios para realizar mi pago inicial.`;\n            window.open(`https:\/\/wa.me\/525643451631?text=${encodeURIComponent(mensaje)}`, '_blank');\n        }\n    };\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Es indispensable que leas las CLAUSULAS de la carta compromiso antes de firmarla, asi como las POLITICAS, TERMINOS Y CONDICIONES Y PROCESO DE TRABAJO, al generar la carta y descargarla, se acepta que se hizo este proceso antes de aceptar. \ud83d\udcc4 Carta Compromiso Soluciones Digitales Integrales de M\u00e9xico SAS \ud83d\udccb Datos del Cliente Raz\u00f3n Social [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width-page.php","meta":{"footnotes":""},"class_list":["post-2558","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Carta Compromiso y de Colaboracion - Web Total M\u00e9xico<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Carta Compromiso y de Colaboracion - Web Total M\u00e9xico\" \/>\n<meta property=\"og:description\" content=\"Es indispensable que leas las CLAUSULAS de la carta compromiso antes de firmarla, asi como las POLITICAS, TERMINOS Y CONDICIONES Y PROCESO DE TRABAJO, al generar la carta y descargarla, se acepta que se hizo este proceso antes de aceptar. \ud83d\udcc4 Carta Compromiso Soluciones Digitales Integrales de M\u00e9xico SAS \ud83d\udccb Datos del Cliente Raz\u00f3n Social [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Total M\u00e9xico\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webtotalmx\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-26T23:32:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtotal.com.mx\/wp-content\/uploads\/2025\/08\/cropped-cropped-LOGO-WEB-TOTAL-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"819\" \/>\n\t<meta property=\"og:image:height\" content=\"819\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@webtotalmx\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/\",\"url\":\"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/\",\"name\":\"Carta Compromiso y de Colaboracion - Web Total M\u00e9xico\",\"isPartOf\":{\"@id\":\"https:\/\/webtotal.com.mx\/#website\"},\"datePublished\":\"2025-08-27T21:16:21+00:00\",\"dateModified\":\"2026-04-26T23:32:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/webtotal.com.mx\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Carta Compromiso y de Colaboracion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webtotal.com.mx\/#website\",\"url\":\"https:\/\/webtotal.com.mx\/\",\"name\":\"Web Total M\u00e9xico\",\"description\":\"Consultor\u00eda inform\u00e1tica, Dise\u00f1o Web e integraci\u00f3n de inteligencia artificial sustentable\",\"publisher\":{\"@id\":\"https:\/\/webtotal.com.mx\/#organization\"},\"alternateName\":\"Web Total\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webtotal.com.mx\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webtotal.com.mx\/#organization\",\"name\":\"WebTotal M\u00e9xico\",\"url\":\"https:\/\/webtotal.com.mx\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/webtotal.com.mx\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webtotal.com.mx\/wp-content\/uploads\/2025\/08\/cropped-cropped-LOGO-WEB-TOTAL-1.png\",\"contentUrl\":\"https:\/\/webtotal.com.mx\/wp-content\/uploads\/2025\/08\/cropped-cropped-LOGO-WEB-TOTAL-1.png\",\"width\":819,\"height\":819,\"caption\":\"WebTotal M\u00e9xico\"},\"image\":{\"@id\":\"https:\/\/webtotal.com.mx\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webtotalmx\",\"https:\/\/x.com\/webtotalmx\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Carta Compromiso y de Colaboracion - Web Total M\u00e9xico","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/","og_locale":"es_MX","og_type":"article","og_title":"Carta Compromiso y de Colaboracion - Web Total M\u00e9xico","og_description":"Es indispensable que leas las CLAUSULAS de la carta compromiso antes de firmarla, asi como las POLITICAS, TERMINOS Y CONDICIONES Y PROCESO DE TRABAJO, al generar la carta y descargarla, se acepta que se hizo este proceso antes de aceptar. \ud83d\udcc4 Carta Compromiso Soluciones Digitales Integrales de M\u00e9xico SAS \ud83d\udccb Datos del Cliente Raz\u00f3n Social [&hellip;]","og_url":"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/","og_site_name":"Web Total M\u00e9xico","article_publisher":"https:\/\/www.facebook.com\/webtotalmx","article_modified_time":"2026-04-26T23:32:38+00:00","og_image":[{"width":819,"height":819,"url":"https:\/\/webtotal.com.mx\/wp-content\/uploads\/2025\/08\/cropped-cropped-LOGO-WEB-TOTAL-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@webtotalmx","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/","url":"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/","name":"Carta Compromiso y de Colaboracion - Web Total M\u00e9xico","isPartOf":{"@id":"https:\/\/webtotal.com.mx\/#website"},"datePublished":"2025-08-27T21:16:21+00:00","dateModified":"2026-04-26T23:32:38+00:00","breadcrumb":{"@id":"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webtotal.com.mx\/index.php\/carta-compromiso-y-de-colaboracion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/webtotal.com.mx\/"},{"@type":"ListItem","position":2,"name":"Carta Compromiso y de Colaboracion"}]},{"@type":"WebSite","@id":"https:\/\/webtotal.com.mx\/#website","url":"https:\/\/webtotal.com.mx\/","name":"Web Total M\u00e9xico","description":"Consultor\u00eda inform\u00e1tica, Dise\u00f1o Web e integraci\u00f3n de inteligencia artificial sustentable","publisher":{"@id":"https:\/\/webtotal.com.mx\/#organization"},"alternateName":"Web Total","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webtotal.com.mx\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/webtotal.com.mx\/#organization","name":"WebTotal M\u00e9xico","url":"https:\/\/webtotal.com.mx\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/webtotal.com.mx\/#\/schema\/logo\/image\/","url":"https:\/\/webtotal.com.mx\/wp-content\/uploads\/2025\/08\/cropped-cropped-LOGO-WEB-TOTAL-1.png","contentUrl":"https:\/\/webtotal.com.mx\/wp-content\/uploads\/2025\/08\/cropped-cropped-LOGO-WEB-TOTAL-1.png","width":819,"height":819,"caption":"WebTotal M\u00e9xico"},"image":{"@id":"https:\/\/webtotal.com.mx\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webtotalmx","https:\/\/x.com\/webtotalmx"]}]}},"_links":{"self":[{"href":"https:\/\/webtotal.com.mx\/index.php\/wp-json\/wp\/v2\/pages\/2558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webtotal.com.mx\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webtotal.com.mx\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webtotal.com.mx\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webtotal.com.mx\/index.php\/wp-json\/wp\/v2\/comments?post=2558"}],"version-history":[{"count":20,"href":"https:\/\/webtotal.com.mx\/index.php\/wp-json\/wp\/v2\/pages\/2558\/revisions"}],"predecessor-version":[{"id":3211,"href":"https:\/\/webtotal.com.mx\/index.php\/wp-json\/wp\/v2\/pages\/2558\/revisions\/3211"}],"wp:attachment":[{"href":"https:\/\/webtotal.com.mx\/index.php\/wp-json\/wp\/v2\/media?parent=2558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}