Formulario de Diagn\u00f3stico - C807<\/title>\n <style>\n \/* Reset Global para eliminar m\u00e1rgenes del contenedor de Elementor *\/\n html, body {\n margin: 0 !important;\n padding: 0 !important;\n width: 100% !important;\n overflow-x: hidden;\n background-color: #f6f8fa;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n \/* STICKY HEADER FULL WIDTH (Borde a Borde) *\/\n .sticky-header {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 1000;\n background-color: #ffffff;\n border-bottom: 1px solid #e2e8f0;\n padding: 14px 40px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);\n }\n\n .header-logo {\n display: flex;\n align-items: center;\n }\n\n .header-logo a {\n display: inline-block;\n text-decoration: none;\n }\n\n .header-logo img {\n height: 42px;\n width: auto;\n object-fit: contain;\n }\n\n .header-info {\n text-align: right;\n font-size: 11px;\n font-weight: 700;\n color: #1a202c;\n letter-spacing: 0.5px;\n line-height: 1.3;\n }\n\n \/* CONTENEDOR PRINCIPAL *\/\n .main-container {\n max-width: 900px;\n margin: 0 auto;\n padding: 40px 20px 80px 20px;\n }\n\n .page-title {\n text-align: center;\n font-size: 28px;\n font-weight: 800;\n color: #0c3823;\n margin-bottom: 8px;\n }\n\n .page-subtitle {\n text-align: center;\n font-size: 15px;\n color: #718096;\n margin-bottom: 35px;\n }\n\n \/* TARJETA DEL FORMULARIO *\/\n .card-wrapper {\n max-width: 620px;\n margin: 0 auto;\n background: #ffffff;\n border-radius: 20px;\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);\n overflow: hidden;\n border: 1px solid #edf2f7;\n }\n\n \/* Header de la Tarjeta *\/\n .card-header {\n background-color: #074728;\n padding: 16px;\n text-align: center;\n color: #ffffff;\n }\n\n .step-text {\n font-size: 13px;\n color: #a3e635;\n font-weight: 600;\n margin-bottom: 6px;\n }\n\n .dots-indicator {\n display: flex;\n justify-content: center;\n gap: 6px;\n }\n\n .dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #1b5e3a;\n transition: background-color 0.3s;\n }\n\n .dot.active {\n background-color: #a3e635;\n }\n\n \/* Cuerpo del Formulario *\/\n .card-body {\n padding: 30px 25px;\n }\n\n .question-title {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n font-size: 16px;\n font-weight: 700;\n color: #1a202c;\n margin-bottom: 20px;\n }\n\n .step-number-badge {\n background-color: #a3e635;\n color: #074728;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 13px;\n font-weight: 800;\n flex-shrink: 0;\n }\n\n \/* Grid de Opciones *\/\n .options-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 25px;\n }\n\n .option-card {\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n padding: 14px 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 13px;\n font-weight: 600;\n color: #2d3748;\n background-color: #ffffff;\n transition: all 0.2s ease;\n user-select: none;\n }\n\n .option-card:hover {\n border-color: #a3e635;\n background-color: #fbfdf8;\n }\n\n .option-card.selected {\n border: 2px solid #a3e635;\n background-color: #f7fee7;\n color: #074728;\n }\n\n \/* Formulario Contacto *\/\n .contact-form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n margin-bottom: 25px;\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .form-group.full-width {\n grid-column: span 2;\n }\n\n .form-group label {\n font-size: 13px;\n font-weight: 600;\n color: #4a5568;\n }\n\n .form-group input, .form-group select {\n padding: 10px 14px;\n border: 1px solid #cbd5e0;\n border-radius: 8px;\n font-size: 14px;\n outline: none;\n transition: border-color 0.2s;\n }\n\n .form-group input:focus, .form-group select:focus {\n border-color: #074728;\n }\n\n \/* Campo oculto para 'Otro pa\u00eds' *\/\n #group-otro-pais {\n display: none;\n margin-top: 10px;\n }\n\n \/* Botones *\/\n .button-group {\n display: flex;\n gap: 10px;\n }\n\n .btn {\n width: 100%;\n background-color: #074728;\n color: #ffffff;\n border: none;\n border-radius: 8px;\n padding: 14px;\n font-size: 15px;\n font-weight: 700;\n cursor: pointer;\n transition: background-color 0.2s;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n }\n\n .btn:hover {\n background-color: #05331c;\n }\n\n .btn-secondary {\n background-color: #edf2f7;\n color: #4a5568;\n width: 30%;\n }\n\n .btn-secondary:hover {\n background-color: #e2e8f0;\n }\n\n .step-panel {\n display: none;\n }\n\n .step-panel.active {\n display: block;\n }\n\n \/* Adaptaci\u00f3n Mobile & Tablet *\/\n @media (max-width: 768px) {\n .sticky-header {\n padding: 10px 16px;\n }\n .header-logo img {\n height: 32px;\n }\n .header-info {\n font-size: 9px;\n }\n .options-grid {\n grid-template-columns: 1fr;\n }\n .contact-form {\n grid-template-columns: 1fr;\n }\n .form-group.full-width {\n grid-column: span 1;\n }\n .page-title {\n font-size: 22px;\n }\n .page-subtitle {\n font-size: 13px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <header class=\"sticky-header\">\n <div class=\"header-logo\">\n <a href=\"https:\/\/c807.com\/gt\">\n <img decoding=\"async\" src=\"https:\/\/c807.com\/gt\/wp-content\/uploads\/sites\/2\/2025\/04\/001.png\" alt=\"C807 Operador Log\u00edstico\">\n <\/a>\n <\/div>\n <div class=\"header-info\">\n CENTRO DE DISTRIBUCI\u00d3N<br>\n <span style=\"color: #718096; font-weight: 500;\">VASTO LOGISTICS, KM 17<\/span>\n <\/div>\n <\/header>\n\n \n <main class=\"main-container\">\n <h1 class=\"page-title\">\u00bfCu\u00e1l es su principal problema de almacenaje?<\/h1>\n <p class=\"page-subtitle\">Complete el formulario y conozca la soluci\u00f3n que realmente necesita.<\/p>\n\n <div class=\"card-wrapper\">\n \n <div class=\"card-header\">\n <div class=\"step-text\" id=\"step-indicator-text\">Paso 1 de 5<\/div>\n <div class=\"dots-indicator\">\n <div class=\"dot active\"><\/div>\n <div class=\"dot\"><\/div>\n <div class=\"dot\"><\/div>\n <div class=\"dot\"><\/div>\n <div class=\"dot\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card-body\">\n \n \n <div class=\"step-panel active\" data-step=\"1\">\n <div class=\"question-title\">\n <span class=\"step-number-badge\">1<\/span>\n <span>\u00bfCu\u00e1l de estas necesidades describe mejor su operaci\u00f3n actualmente?<\/span>\n <\/div>\n <div class=\"options-grid single-select\">\n <div class=\"option-card\" data-points=\"25\" data-value=\"Necesito mayor capacidad de almacenamiento.\">\ud83d\udce6 Necesito mayor capacidad de almacenamiento.<\/div>\n <div class=\"option-card\" data-points=\"30\" data-value=\"Necesito mejorar el control de inventarios.\">\ud83d\udcc9 Necesito mejorar el control de inventarios.<\/div>\n <div class=\"option-card\" data-points=\"20\" data-value=\"Necesito optimizar la preparaci\u00f3n y despacho de pedidos.\">\u26a1 Necesito optimizar preparaci\u00f3n y despacho.<\/div>\n <div class=\"option-card\" data-points=\"20\" data-value=\"Necesito distribuir a nivel regional.\">\ud83d\ude9a Necesito distribuir a nivel regional.<\/div>\n <div class=\"option-card\" data-points=\"25\" data-value=\"Busco un operador log\u00edstico integral (3PL).\">\ud83c\udf10 Busco operador log\u00edstico integral (3PL).<\/div>\n <div class=\"option-card\" data-points=\"30\" data-value=\"Necesito reducir mis costos de almacenamiento\">\ud83d\udee0\ufe0f Necesito reducir costos de almacenamiento.<\/div>\n <div class=\"option-card\" data-points=\"10\" data-value=\"No identifico mi necesidad.\">\ud83e\udd14 No identifico mi necesidad.<\/div>\n <\/div>\n <button class=\"btn btn-next\" onclick=\"nextStep(1)\">Continuar<\/button>\n <\/div>\n\n \n <div class=\"step-panel\" data-step=\"2\">\n <div class=\"question-title\">\n <span class=\"step-number-badge\">2<\/span>\n <span>\u00bfC\u00f3mo describir\u00eda el volumen aproximado de su operaci\u00f3n?<\/span>\n <\/div>\n <div class=\"options-grid single-select\">\n <div class=\"option-card\" data-points=\"10\" data-value=\"Menos de 200 pallets al mes.\">Menos de 200 pallets al mes.<\/div>\n <div class=\"option-card\" data-points=\"15\" data-value=\"Entre 201 y 500 pallets.\">Entre 201 y 500 pallets.<\/div>\n <div class=\"option-card\" data-points=\"25\" data-value=\"Entre 501 y 1000 pallets.\">Entre 501 y 1000 pallets.<\/div>\n <div class=\"option-card\" data-points=\"30\" data-value=\"M\u00e1s de 1000 pallets.\">M\u00e1s de 1000 pallets.<\/div>\n <div class=\"option-card\" data-points=\"5\" data-value=\"Prefiero comentarlo durante la reuni\u00f3n.\">Prefiero comentarlo en reuni\u00f3n.<\/div>\n <\/div>\n <div class=\"button-group\">\n <button class=\"btn btn-secondary\" onclick=\"prevStep(2)\">Atr\u00e1s<\/button>\n <button class=\"btn\" onclick=\"nextStep(2)\">Continuar<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" data-step=\"3\">\n <div class=\"question-title\">\n <span class=\"step-number-badge\">3<\/span>\n <span>\u00bfEn cu\u00e1nto tiempo necesita implementar una soluci\u00f3n?<\/span>\n <\/div>\n <div class=\"options-grid single-select\">\n <div class=\"option-card\" data-points=\"25\" data-value=\"Inmediatamente.\">Inmediatamente.<\/div>\n <div class=\"option-card\" data-points=\"25\" data-value=\"Durante el pr\u00f3ximo mes.\">Durante el pr\u00f3ximo mes.<\/div>\n <div class=\"option-card\" data-points=\"20\" data-value=\"En los pr\u00f3ximos 3 meses.\">En los pr\u00f3ximos 3 meses.<\/div>\n <div class=\"option-card\" data-points=\"15\" data-value=\"En los pr\u00f3ximos 6 meses.\">En los pr\u00f3ximos 6 meses.<\/div>\n <div class=\"option-card\" data-points=\"10\" data-value=\"Solo estoy solicitando informaci\u00f3n.\">Solo estoy solicitando informaci\u00f3n.<\/div>\n <\/div>\n <div class=\"button-group\">\n <button class=\"btn btn-secondary\" onclick=\"prevStep(3)\">Atr\u00e1s<\/button>\n <button class=\"btn\" onclick=\"nextStep(3)\">Continuar<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" data-step=\"4\">\n <div class=\"question-title\">\n <span class=\"step-number-badge\">4<\/span>\n <span>\u00bfQu\u00e9 tipo de productos necesita almacenar o distribuir? (Selecci\u00f3n m\u00faltiple)<\/span>\n <\/div>\n <div class=\"options-grid multi-select\">\n <div class=\"option-card\" data-points=\"10\" data-value=\"Materias primas\">Materias primas<\/div>\n <div class=\"option-card\" data-points=\"15\" data-value=\"Productos alimenticios\">Productos alimenticios<\/div>\n <div class=\"option-card\" data-points=\"15\" data-value=\"Bebidas\">Bebidas<\/div>\n <div class=\"option-card\" data-points=\"15\" data-value=\"Productos de consumo masivo\">Consumo masivo<\/div>\n <div class=\"option-card\" data-points=\"10\" data-value=\"Tecnolog\u00eda\">Tecnolog\u00eda<\/div>\n <div class=\"option-card\" data-points=\"5\" data-value=\"Repuestos\">Repuestos<\/div>\n <div class=\"option-card\" data-points=\"5\" data-value=\"Productos promocionales\">Productos promocionales<\/div>\n <div class=\"option-card\" data-points=\"10\" data-value=\"Farmac\u00e9uticos\">Farmac\u00e9uticos<\/div>\n <div class=\"option-card\" data-points=\"10\" data-value=\"Cuidado personal\">Cuidado personal<\/div>\n <\/div>\n <div class=\"button-group\">\n <button class=\"btn btn-secondary\" onclick=\"prevStep(4)\">Atr\u00e1s<\/button>\n <button class=\"btn\" onclick=\"nextStep(4)\">Continuar<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" data-step=\"5\">\n <div class=\"question-title\">\n <span class=\"step-number-badge\">5<\/span>\n <span>Datos de contacto<\/span>\n <\/div>\n <form id=\"form-contacto\" onsubmit=\"submitForm(event)\">\n <div class=\"contact-form\">\n <div class=\"form-group full-width\">\n <label>Nombre completo *<\/label>\n <input type=\"text\" id=\"nombre\" required placeholder=\"Ej. Juan P\u00e9rez\">\n <\/div>\n <div class=\"form-group\">\n <label>Empresa *<\/label>\n <input type=\"text\" id=\"empresa\" required placeholder=\"Nombre de la empresa\">\n <\/div>\n <div class=\"form-group\">\n <label>Cargo<\/label>\n <input type=\"text\" id=\"cargo\" placeholder=\"Gerente de Operaciones\">\n <\/div>\n <div class=\"form-group\">\n <label>Correo electr\u00f3nico *<\/label>\n <input type=\"email\" id=\"email\" required placeholder=\"correo@empresa.com\">\n <\/div>\n <div class=\"form-group\">\n <label>Tel\u00e9fono \/ WhatsApp *<\/label>\n <input type=\"tel\" id=\"telefono\" required placeholder=\"+502 0000 0000\">\n <\/div>\n <div class=\"form-group full-width\">\n <label>Pa\u00eds *<\/label>\n <select id=\"pais\" required onchange=\"toggleOtroPais(this.value)\">\n <option value=\"\">Seleccione un pa\u00eds<\/option>\n <option value=\"Guatemala\">Guatemala<\/option>\n <option value=\"El Salvador\">El Salvador<\/option>\n <option value=\"Honduras\">Honduras<\/option>\n <option value=\"Nicaragua\">Nicaragua<\/option>\n <option value=\"Costa Rica\">Costa Rica<\/option>\n <option value=\"Panam\u00e1\">Panam\u00e1<\/option>\n <option value=\"Otro\">Otro<\/option>\n <\/select>\n\n <div id=\"group-otro-pais\">\n <input type=\"text\" id=\"otro_pais_input\" placeholder=\"Escriba su pa\u00eds\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"button-group\">\n <button type=\"button\" class=\"btn btn-secondary\" onclick=\"prevStep(5)\">Atr\u00e1s<\/button>\n <button type=\"submit\" class=\"btn\" id=\"btn-submit\">Enviar Formulario<\/button>\n <\/div>\n <\/form>\n <\/div>\n\n <\/div>\n <\/div>\n <\/main>\n\n <script>\n let currentStep = 1;\n const totalSteps = 5;\n\n \/\/ Puntaje m\u00e1ximo total posible (30 + 30 + 25 + 100)\n const PUNTAJE_MAXIMO_POSIBLE = 185;\n\n const formData = {\n respuestas: {\n paso1: null,\n paso2: null,\n paso3: null,\n paso4: []\n },\n puntos: {\n paso1: 0,\n paso2: 0,\n paso3: 0,\n paso4: 0\n }\n };\n\n function toggleOtroPais(val) {\n const container = document.getElementById('group-otro-pais');\n const input = document.getElementById('otro_pais_input');\n \n if (val === 'Otro') {\n container.style.display = 'block';\n input.setAttribute('required', 'true');\n input.focus();\n } else {\n container.style.display = 'none';\n input.removeAttribute('required');\n input.value = '';\n }\n }\n\n document.querySelectorAll('.single-select').forEach(container => {\n container.querySelectorAll('.option-card').forEach(card => {\n card.addEventListener('click', () => {\n container.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n card.classList.add('selected');\n });\n });\n });\n\n document.querySelectorAll('.multi-select .option-card').forEach(card => {\n card.addEventListener('click', () => {\n card.classList.toggle('selected');\n });\n });\n\n function updateStepHeader(step) {\n document.getElementById('step-indicator-text').innerText = `Paso ${step} de ${totalSteps}`;\n const dots = document.querySelectorAll('.dot');\n dots.forEach((dot, idx) => {\n if (idx < step) {\n dot.classList.add('active');\n } else {\n dot.classList.remove('active');\n }\n });\n }\n\n function nextStep(step) {\n const currentPanel = document.querySelector(`.step-panel[data-step=\"${step}\"]`);\n \n if (step === 4) {\n const selected = currentPanel.querySelectorAll('.option-card.selected');\n if (selected.length === 0) {\n alert(\"Por favor seleccione al menos una opci\u00f3n.\");\n return;\n }\n formData.respuestas.paso4 = Array.from(selected).map(el => el.getAttribute('data-value'));\n formData.puntos.paso4 = Array.from(selected).reduce((acc, el) => acc + parseInt(el.getAttribute('data-points')), 0);\n } else if (step < 4) {\n const selected = currentPanel.querySelector('.option-card.selected');\n if (!selected) {\n alert(\"Por favor seleccione una opci\u00f3n para continuar.\");\n return;\n }\n formData.respuestas[`paso${step}`] = selected.getAttribute('data-value');\n formData.puntos[`paso${step}`] = parseInt(selected.getAttribute('data-points'));\n }\n\n currentPanel.classList.remove('active');\n currentStep = step + 1;\n document.querySelector(`.step-panel[data-step=\"${currentStep}\"]`).classList.add('active');\n updateStepHeader(currentStep);\n }\n\n function prevStep(step) {\n document.querySelector(`.step-panel[data-step=\"${step}\"]`).classList.remove('active');\n currentStep = step - 1;\n document.querySelector(`.step-panel[data-step=\"${currentStep}\"]`).classList.add('active');\n updateStepHeader(currentStep);\n }\n\n async function submitForm(e) {\n e.preventDefault();\n\n const btnSubmit = document.getElementById('btn-submit');\n btnSubmit.innerText = \"Enviando...\";\n btnSubmit.disabled = true;\n\n \/\/ Suma total de puntos obtenidos\n const totalPoints = Object.values(formData.puntos).reduce((acc, curr) => acc + curr, 0);\n\n \/\/ C\u00c1LCULO DEL PORCENTAJE (Redondeado a n\u00famero entero)\n const porcentajeCompatibilidad = Math.round((totalPoints \/ PUNTAJE_MAXIMO_POSIBLE) * 100);\n\n const paisSelect = document.getElementById('pais').value;\n const paisFinal = (paisSelect === 'Otro') \n ? document.getElementById('otro_pais_input').value.trim() \n : paisSelect;\n\n const payload = {\n nombre: document.getElementById('nombre').value,\n empresa: document.getElementById('empresa').value,\n cargo: document.getElementById('cargo').value,\n email: document.getElementById('email').value,\n telefono: document.getElementById('telefono').value,\n pais: paisFinal,\n puntaje_total: totalPoints,\n puntaje_maximo: PUNTAJE_MAXIMO_POSIBLE,\n porcentaje: porcentajeCompatibilidad,\n respuestas: formData.respuestas\n };\n\n try {\n const response = await fetch('\/enviar-formulario.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify(payload)\n });\n\n if (response.ok) {\n \/\/ REDIRECCI\u00d3N A LA P\u00c1GINA DE GRACIAS\n window.location.href = \"https:\/\/c807.com\/gt\/formulario-cotizacion-almacenaje-gracias\";\n } else {\n alert(\"Hubo un error al enviar el formulario. Por favor int\u00e9ntelo de nuevo.\");\n btnSubmit.innerText = \"Enviar Formulario\";\n btnSubmit.disabled = false;\n }\n } catch (err) {\n console.error(err);\n alert(\"Ocurri\u00f3 un problema de conexi\u00f3n.\");\n btnSubmit.innerText = \"Enviar Formulario\";\n btnSubmit.disabled = false;\n }\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t <\/div>\r\n <\/div>\r\n \t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Formulario de Diagn\u00f3stico – C807 CENTRO DE DISTRIBUCI\u00d3N VASTO LOGISTICS, KM 17 \u00bfCu\u00e1l es su principal problema de almacenaje? Complete el formulario y conozca la soluci\u00f3n que realmente necesita. Paso 1 de 5 1 \u00bfCu\u00e1l de estas necesidades describe mejor su operaci\u00f3n actualmente? \ud83d\udce6 Necesito mayor capacidad de almacenamiento. \ud83d\udcc9 Necesito mejorar el control de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-12074","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/pages\/12074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/comments?post=12074"}],"version-history":[{"count":22,"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/pages\/12074\/revisions"}],"predecessor-version":[{"id":12105,"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/pages\/12074\/revisions\/12105"}],"wp:attachment":[{"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/media?parent=12074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\n \n

\r\n

\r\n \r\n \t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Formulario de Diagn\u00f3stico - C807<\/title>\n <style>\n \/* Reset Global para eliminar m\u00e1rgenes del contenedor de Elementor *\/\n html, body {\n margin: 0 !important;\n padding: 0 !important;\n width: 100% !important;\n overflow-x: hidden;\n background-color: #f6f8fa;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n \/* STICKY HEADER FULL WIDTH (Borde a Borde) *\/\n .sticky-header {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 1000;\n background-color: #ffffff;\n border-bottom: 1px solid #e2e8f0;\n padding: 14px 40px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);\n }\n\n .header-logo {\n display: flex;\n align-items: center;\n }\n\n .header-logo a {\n display: inline-block;\n text-decoration: none;\n }\n\n .header-logo img {\n height: 42px;\n width: auto;\n object-fit: contain;\n }\n\n .header-info {\n text-align: right;\n font-size: 11px;\n font-weight: 700;\n color: #1a202c;\n letter-spacing: 0.5px;\n line-height: 1.3;\n }\n\n \/* CONTENEDOR PRINCIPAL *\/\n .main-container {\n max-width: 900px;\n margin: 0 auto;\n padding: 40px 20px 80px 20px;\n }\n\n .page-title {\n text-align: center;\n font-size: 28px;\n font-weight: 800;\n color: #0c3823;\n margin-bottom: 8px;\n }\n\n .page-subtitle {\n text-align: center;\n font-size: 15px;\n color: #718096;\n margin-bottom: 35px;\n }\n\n \/* TARJETA DEL FORMULARIO *\/\n .card-wrapper {\n max-width: 620px;\n margin: 0 auto;\n background: #ffffff;\n border-radius: 20px;\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);\n overflow: hidden;\n border: 1px solid #edf2f7;\n }\n\n \/* Header de la Tarjeta *\/\n .card-header {\n background-color: #074728;\n padding: 16px;\n text-align: center;\n color: #ffffff;\n }\n\n .step-text {\n font-size: 13px;\n color: #a3e635;\n font-weight: 600;\n margin-bottom: 6px;\n }\n\n .dots-indicator {\n display: flex;\n justify-content: center;\n gap: 6px;\n }\n\n .dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #1b5e3a;\n transition: background-color 0.3s;\n }\n\n .dot.active {\n background-color: #a3e635;\n }\n\n \/* Cuerpo del Formulario *\/\n .card-body {\n padding: 30px 25px;\n }\n\n .question-title {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n font-size: 16px;\n font-weight: 700;\n color: #1a202c;\n margin-bottom: 20px;\n }\n\n .step-number-badge {\n background-color: #a3e635;\n color: #074728;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 13px;\n font-weight: 800;\n flex-shrink: 0;\n }\n\n \/* Grid de Opciones *\/\n .options-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 25px;\n }\n\n .option-card {\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n padding: 14px 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 13px;\n font-weight: 600;\n color: #2d3748;\n background-color: #ffffff;\n transition: all 0.2s ease;\n user-select: none;\n }\n\n .option-card:hover {\n border-color: #a3e635;\n background-color: #fbfdf8;\n }\n\n .option-card.selected {\n border: 2px solid #a3e635;\n background-color: #f7fee7;\n color: #074728;\n }\n\n \/* Formulario Contacto *\/\n .contact-form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n margin-bottom: 25px;\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .form-group.full-width {\n grid-column: span 2;\n }\n\n .form-group label {\n font-size: 13px;\n font-weight: 600;\n color: #4a5568;\n }\n\n .form-group input, .form-group select {\n padding: 10px 14px;\n border: 1px solid #cbd5e0;\n border-radius: 8px;\n font-size: 14px;\n outline: none;\n transition: border-color 0.2s;\n }\n\n .form-group input:focus, .form-group select:focus {\n border-color: #074728;\n }\n\n \/* Campo oculto para 'Otro pa\u00eds' *\/\n #group-otro-pais {\n display: none;\n margin-top: 10px;\n }\n\n \/* Botones *\/\n .button-group {\n display: flex;\n gap: 10px;\n }\n\n .btn {\n width: 100%;\n background-color: #074728;\n color: #ffffff;\n border: none;\n border-radius: 8px;\n padding: 14px;\n font-size: 15px;\n font-weight: 700;\n cursor: pointer;\n transition: background-color 0.2s;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n }\n\n .btn:hover {\n background-color: #05331c;\n }\n\n .btn-secondary {\n background-color: #edf2f7;\n color: #4a5568;\n width: 30%;\n }\n\n .btn-secondary:hover {\n background-color: #e2e8f0;\n }\n\n .step-panel {\n display: none;\n }\n\n .step-panel.active {\n display: block;\n }\n\n \/* Adaptaci\u00f3n Mobile & Tablet *\/\n @media (max-width: 768px) {\n .sticky-header {\n padding: 10px 16px;\n }\n .header-logo img {\n height: 32px;\n }\n .header-info {\n font-size: 9px;\n }\n .options-grid {\n grid-template-columns: 1fr;\n }\n .contact-form {\n grid-template-columns: 1fr;\n }\n .form-group.full-width {\n grid-column: span 1;\n }\n .page-title {\n font-size: 22px;\n }\n .page-subtitle {\n font-size: 13px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <header class=\"sticky-header\">\n <div class=\"header-logo\">\n <a href=\"https:\/\/c807.com\/gt\">\n <img decoding=\"async\" src=\"https:\/\/c807.com\/gt\/wp-content\/uploads\/sites\/2\/2025\/04\/001.png\" alt=\"C807 Operador Log\u00edstico\">\n <\/a>\n <\/div>\n <div class=\"header-info\">\n CENTRO DE DISTRIBUCI\u00d3N<br>\n <span style=\"color: #718096; font-weight: 500;\">VASTO LOGISTICS, KM 17<\/span>\n <\/div>\n <\/header>\n\n \n <main class=\"main-container\">\n <h1 class=\"page-title\">\u00bfCu\u00e1l es su principal problema de almacenaje?<\/h1>\n <p class=\"page-subtitle\">Complete el formulario y conozca la soluci\u00f3n que realmente necesita.<\/p>\n\n <div class=\"card-wrapper\">\n \n <div class=\"card-header\">\n <div class=\"step-text\" id=\"step-indicator-text\">Paso 1 de 5<\/div>\n <div class=\"dots-indicator\">\n <div class=\"dot active\"><\/div>\n <div class=\"dot\"><\/div>\n <div class=\"dot\"><\/div>\n <div class=\"dot\"><\/div>\n <div class=\"dot\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card-body\">\n \n \n <div class=\"step-panel active\" data-step=\"1\">\n <div class=\"question-title\">\n <span class=\"step-number-badge\">1<\/span>\n <span>\u00bfCu\u00e1l de estas necesidades describe mejor su operaci\u00f3n actualmente?<\/span>\n <\/div>\n <div class=\"options-grid single-select\">\n <div class=\"option-card\" data-points=\"25\" data-value=\"Necesito mayor capacidad de almacenamiento.\">\ud83d\udce6 Necesito mayor capacidad de almacenamiento.<\/div>\n <div class=\"option-card\" data-points=\"30\" data-value=\"Necesito mejorar el control de inventarios.\">\ud83d\udcc9 Necesito mejorar el control de inventarios.<\/div>\n <div class=\"option-card\" data-points=\"20\" data-value=\"Necesito optimizar la preparaci\u00f3n y despacho de pedidos.\">\u26a1 Necesito optimizar preparaci\u00f3n y despacho.<\/div>\n <div class=\"option-card\" data-points=\"20\" data-value=\"Necesito distribuir a nivel regional.\">\ud83d\ude9a Necesito distribuir a nivel regional.<\/div>\n <div class=\"option-card\" data-points=\"25\" data-value=\"Busco un operador log\u00edstico integral (3PL).\">\ud83c\udf10 Busco operador log\u00edstico integral (3PL).<\/div>\n <div class=\"option-card\" data-points=\"30\" data-value=\"Necesito reducir mis costos de almacenamiento\">\ud83d\udee0\ufe0f Necesito reducir costos de almacenamiento.<\/div>\n <div class=\"option-card\" data-points=\"10\" data-value=\"No identifico mi necesidad.\">\ud83e\udd14 No identifico mi necesidad.<\/div>\n <\/div>\n <button class=\"btn btn-next\" onclick=\"nextStep(1)\">Continuar<\/button>\n <\/div>\n\n \n <div class=\"step-panel\" data-step=\"2\">\n <div class=\"question-title\">\n <span class=\"step-number-badge\">2<\/span>\n <span>\u00bfC\u00f3mo describir\u00eda el volumen aproximado de su operaci\u00f3n?<\/span>\n <\/div>\n <div class=\"options-grid single-select\">\n <div class=\"option-card\" data-points=\"10\" data-value=\"Menos de 200 pallets al mes.\">Menos de 200 pallets al mes.<\/div>\n <div class=\"option-card\" data-points=\"15\" data-value=\"Entre 201 y 500 pallets.\">Entre 201 y 500 pallets.<\/div>\n <div class=\"option-card\" data-points=\"25\" data-value=\"Entre 501 y 1000 pallets.\">Entre 501 y 1000 pallets.<\/div>\n <div class=\"option-card\" data-points=\"30\" data-value=\"M\u00e1s de 1000 pallets.\">M\u00e1s de 1000 pallets.<\/div>\n <div class=\"option-card\" data-points=\"5\" data-value=\"Prefiero comentarlo durante la reuni\u00f3n.\">Prefiero comentarlo en reuni\u00f3n.<\/div>\n <\/div>\n <div class=\"button-group\">\n <button class=\"btn btn-secondary\" onclick=\"prevStep(2)\">Atr\u00e1s<\/button>\n <button class=\"btn\" onclick=\"nextStep(2)\">Continuar<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" data-step=\"3\">\n <div class=\"question-title\">\n <span class=\"step-number-badge\">3<\/span>\n <span>\u00bfEn cu\u00e1nto tiempo necesita implementar una soluci\u00f3n?<\/span>\n <\/div>\n <div class=\"options-grid single-select\">\n <div class=\"option-card\" data-points=\"25\" data-value=\"Inmediatamente.\">Inmediatamente.<\/div>\n <div class=\"option-card\" data-points=\"25\" data-value=\"Durante el pr\u00f3ximo mes.\">Durante el pr\u00f3ximo mes.<\/div>\n <div class=\"option-card\" data-points=\"20\" data-value=\"En los pr\u00f3ximos 3 meses.\">En los pr\u00f3ximos 3 meses.<\/div>\n <div class=\"option-card\" data-points=\"15\" data-value=\"En los pr\u00f3ximos 6 meses.\">En los pr\u00f3ximos 6 meses.<\/div>\n <div class=\"option-card\" data-points=\"10\" data-value=\"Solo estoy solicitando informaci\u00f3n.\">Solo estoy solicitando informaci\u00f3n.<\/div>\n <\/div>\n <div class=\"button-group\">\n <button class=\"btn btn-secondary\" onclick=\"prevStep(3)\">Atr\u00e1s<\/button>\n <button class=\"btn\" onclick=\"nextStep(3)\">Continuar<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" data-step=\"4\">\n <div class=\"question-title\">\n <span class=\"step-number-badge\">4<\/span>\n <span>\u00bfQu\u00e9 tipo de productos necesita almacenar o distribuir? (Selecci\u00f3n m\u00faltiple)<\/span>\n <\/div>\n <div class=\"options-grid multi-select\">\n <div class=\"option-card\" data-points=\"10\" data-value=\"Materias primas\">Materias primas<\/div>\n <div class=\"option-card\" data-points=\"15\" data-value=\"Productos alimenticios\">Productos alimenticios<\/div>\n <div class=\"option-card\" data-points=\"15\" data-value=\"Bebidas\">Bebidas<\/div>\n <div class=\"option-card\" data-points=\"15\" data-value=\"Productos de consumo masivo\">Consumo masivo<\/div>\n <div class=\"option-card\" data-points=\"10\" data-value=\"Tecnolog\u00eda\">Tecnolog\u00eda<\/div>\n <div class=\"option-card\" data-points=\"5\" data-value=\"Repuestos\">Repuestos<\/div>\n <div class=\"option-card\" data-points=\"5\" data-value=\"Productos promocionales\">Productos promocionales<\/div>\n <div class=\"option-card\" data-points=\"10\" data-value=\"Farmac\u00e9uticos\">Farmac\u00e9uticos<\/div>\n <div class=\"option-card\" data-points=\"10\" data-value=\"Cuidado personal\">Cuidado personal<\/div>\n <\/div>\n <div class=\"button-group\">\n <button class=\"btn btn-secondary\" onclick=\"prevStep(4)\">Atr\u00e1s<\/button>\n <button class=\"btn\" onclick=\"nextStep(4)\">Continuar<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" data-step=\"5\">\n <div class=\"question-title\">\n <span class=\"step-number-badge\">5<\/span>\n <span>Datos de contacto<\/span>\n <\/div>\n <form id=\"form-contacto\" onsubmit=\"submitForm(event)\">\n <div class=\"contact-form\">\n <div class=\"form-group full-width\">\n <label>Nombre completo *<\/label>\n <input type=\"text\" id=\"nombre\" required placeholder=\"Ej. Juan P\u00e9rez\">\n <\/div>\n <div class=\"form-group\">\n <label>Empresa *<\/label>\n <input type=\"text\" id=\"empresa\" required placeholder=\"Nombre de la empresa\">\n <\/div>\n <div class=\"form-group\">\n <label>Cargo<\/label>\n <input type=\"text\" id=\"cargo\" placeholder=\"Gerente de Operaciones\">\n <\/div>\n <div class=\"form-group\">\n <label>Correo electr\u00f3nico *<\/label>\n <input type=\"email\" id=\"email\" required placeholder=\"correo@empresa.com\">\n <\/div>\n <div class=\"form-group\">\n <label>Tel\u00e9fono \/ WhatsApp *<\/label>\n <input type=\"tel\" id=\"telefono\" required placeholder=\"+502 0000 0000\">\n <\/div>\n <div class=\"form-group full-width\">\n <label>Pa\u00eds *<\/label>\n <select id=\"pais\" required onchange=\"toggleOtroPais(this.value)\">\n <option value=\"\">Seleccione un pa\u00eds<\/option>\n <option value=\"Guatemala\">Guatemala<\/option>\n <option value=\"El Salvador\">El Salvador<\/option>\n <option value=\"Honduras\">Honduras<\/option>\n <option value=\"Nicaragua\">Nicaragua<\/option>\n <option value=\"Costa Rica\">Costa Rica<\/option>\n <option value=\"Panam\u00e1\">Panam\u00e1<\/option>\n <option value=\"Otro\">Otro<\/option>\n <\/select>\n\n <div id=\"group-otro-pais\">\n <input type=\"text\" id=\"otro_pais_input\" placeholder=\"Escriba su pa\u00eds\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"button-group\">\n <button type=\"button\" class=\"btn btn-secondary\" onclick=\"prevStep(5)\">Atr\u00e1s<\/button>\n <button type=\"submit\" class=\"btn\" id=\"btn-submit\">Enviar Formulario<\/button>\n <\/div>\n <\/form>\n <\/div>\n\n <\/div>\n <\/div>\n <\/main>\n\n <script>\n let currentStep = 1;\n const totalSteps = 5;\n\n \/\/ Puntaje m\u00e1ximo total posible (30 + 30 + 25 + 100)\n const PUNTAJE_MAXIMO_POSIBLE = 185;\n\n const formData = {\n respuestas: {\n paso1: null,\n paso2: null,\n paso3: null,\n paso4: []\n },\n puntos: {\n paso1: 0,\n paso2: 0,\n paso3: 0,\n paso4: 0\n }\n };\n\n function toggleOtroPais(val) {\n const container = document.getElementById('group-otro-pais');\n const input = document.getElementById('otro_pais_input');\n \n if (val === 'Otro') {\n container.style.display = 'block';\n input.setAttribute('required', 'true');\n input.focus();\n } else {\n container.style.display = 'none';\n input.removeAttribute('required');\n input.value = '';\n }\n }\n\n document.querySelectorAll('.single-select').forEach(container => {\n container.querySelectorAll('.option-card').forEach(card => {\n card.addEventListener('click', () => {\n container.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n card.classList.add('selected');\n });\n });\n });\n\n document.querySelectorAll('.multi-select .option-card').forEach(card => {\n card.addEventListener('click', () => {\n card.classList.toggle('selected');\n });\n });\n\n function updateStepHeader(step) {\n document.getElementById('step-indicator-text').innerText = `Paso ${step} de ${totalSteps}`;\n const dots = document.querySelectorAll('.dot');\n dots.forEach((dot, idx) => {\n if (idx < step) {\n dot.classList.add('active');\n } else {\n dot.classList.remove('active');\n }\n });\n }\n\n function nextStep(step) {\n const currentPanel = document.querySelector(`.step-panel[data-step=\"${step}\"]`);\n \n if (step === 4) {\n const selected = currentPanel.querySelectorAll('.option-card.selected');\n if (selected.length === 0) {\n alert(\"Por favor seleccione al menos una opci\u00f3n.\");\n return;\n }\n formData.respuestas.paso4 = Array.from(selected).map(el => el.getAttribute('data-value'));\n formData.puntos.paso4 = Array.from(selected).reduce((acc, el) => acc + parseInt(el.getAttribute('data-points')), 0);\n } else if (step < 4) {\n const selected = currentPanel.querySelector('.option-card.selected');\n if (!selected) {\n alert(\"Por favor seleccione una opci\u00f3n para continuar.\");\n return;\n }\n formData.respuestas[`paso${step}`] = selected.getAttribute('data-value');\n formData.puntos[`paso${step}`] = parseInt(selected.getAttribute('data-points'));\n }\n\n currentPanel.classList.remove('active');\n currentStep = step + 1;\n document.querySelector(`.step-panel[data-step=\"${currentStep}\"]`).classList.add('active');\n updateStepHeader(currentStep);\n }\n\n function prevStep(step) {\n document.querySelector(`.step-panel[data-step=\"${step}\"]`).classList.remove('active');\n currentStep = step - 1;\n document.querySelector(`.step-panel[data-step=\"${currentStep}\"]`).classList.add('active');\n updateStepHeader(currentStep);\n }\n\n async function submitForm(e) {\n e.preventDefault();\n\n const btnSubmit = document.getElementById('btn-submit');\n btnSubmit.innerText = \"Enviando...\";\n btnSubmit.disabled = true;\n\n \/\/ Suma total de puntos obtenidos\n const totalPoints = Object.values(formData.puntos).reduce((acc, curr) => acc + curr, 0);\n\n \/\/ C\u00c1LCULO DEL PORCENTAJE (Redondeado a n\u00famero entero)\n const porcentajeCompatibilidad = Math.round((totalPoints \/ PUNTAJE_MAXIMO_POSIBLE) * 100);\n\n const paisSelect = document.getElementById('pais').value;\n const paisFinal = (paisSelect === 'Otro') \n ? document.getElementById('otro_pais_input').value.trim() \n : paisSelect;\n\n const payload = {\n nombre: document.getElementById('nombre').value,\n empresa: document.getElementById('empresa').value,\n cargo: document.getElementById('cargo').value,\n email: document.getElementById('email').value,\n telefono: document.getElementById('telefono').value,\n pais: paisFinal,\n puntaje_total: totalPoints,\n puntaje_maximo: PUNTAJE_MAXIMO_POSIBLE,\n porcentaje: porcentajeCompatibilidad,\n respuestas: formData.respuestas\n };\n\n try {\n const response = await fetch('\/enviar-formulario.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify(payload)\n });\n\n if (response.ok) {\n \/\/ REDIRECCI\u00d3N A LA P\u00c1GINA DE GRACIAS\n window.location.href = \"https:\/\/c807.com\/gt\/formulario-cotizacion-almacenaje-gracias\";\n } else {\n alert(\"Hubo un error al enviar el formulario. Por favor int\u00e9ntelo de nuevo.\");\n btnSubmit.innerText = \"Enviar Formulario\";\n btnSubmit.disabled = false;\n }\n } catch (err) {\n console.error(err);\n alert(\"Ocurri\u00f3 un problema de conexi\u00f3n.\");\n btnSubmit.innerText = \"Enviar Formulario\";\n btnSubmit.disabled = false;\n }\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t <\/div>\r\n <\/div>\r\n \t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Formulario de Diagn\u00f3stico – C807 CENTRO DE DISTRIBUCI\u00d3N VASTO LOGISTICS, KM 17 \u00bfCu\u00e1l es su principal problema de almacenaje? Complete el formulario y conozca la soluci\u00f3n que realmente necesita. Paso 1 de 5 1 \u00bfCu\u00e1l de estas necesidades describe mejor su operaci\u00f3n actualmente? \ud83d\udce6 Necesito mayor capacidad de almacenamiento. \ud83d\udcc9 Necesito mejorar el control de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-12074","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/pages\/12074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/comments?post=12074"}],"version-history":[{"count":22,"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/pages\/12074\/revisions"}],"predecessor-version":[{"id":12105,"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/pages\/12074\/revisions\/12105"}],"wp:attachment":[{"href":"https:\/\/c807.com\/gt\/wp-json\/wp\/v2\/media?parent=12074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}