{"id":936,"date":"2025-12-29T12:45:35","date_gmt":"2025-12-29T12:45:35","guid":{"rendered":"https:\/\/roberto.nytelweb.net\/?page_id=936"},"modified":"2025-12-31T09:42:09","modified_gmt":"2025-12-31T09:42:09","slug":"cuestionario-a-medida","status":"publish","type":"page","link":"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/","title":{"rendered":"Cuestionario 100% a medida"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Cuestionario IA<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Urbanist:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* ===== VARIABLES DE COLORES ===== *\/\r\n :root {\r\n --color-amarillo: #FED513;\r\n --color-amarillo-hover: #e5c011;\r\n --color-fondo: #fafafa;\r\n --color-texto: #1a1a1a;\r\n --color-texto-secundario: #666666;\r\n --color-borde: #e5e5e5;\r\n --color-tarjeta: #ffffff;\r\n --color-boton-texto: #1a1a1a;\r\n --color-icono-fondo: #f0f0f0;\r\n --color-icono: #555555;\r\n }\r\n\r\n \/* ===== ESTILOS BASE ===== *\/\r\n .ia-container * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n .ia-container {\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n background-color: var(--color-fondo);\r\n color: var(--color-texto);\r\n line-height: 1.6;\r\n width: 100%;\r\n }\r\n\r\n \/* ===== LAYOUT PRINCIPAL ===== *\/\r\n .cuestionario-wrapper {\r\n max-width: 1100px;\r\n margin: 40px auto;\r\n padding: 20px;\r\n display: flex;\r\n gap: 32px;\r\n }\r\n\r\n .cuestionario-container {\r\n flex: 1;\r\n max-width: 700px;\r\n padding: 40px;\r\n background: var(--color-tarjeta);\r\n border-radius: 16px;\r\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n \/* ===== RESUMEN LATERAL (Tu columna derecha) ===== *\/\r\n .resumen-container {\r\n width: 300px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .resumen-lateral {\r\n background: var(--color-tarjeta);\r\n padding: 24px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);\r\n position: sticky;\r\n top: 40px;\r\n }\r\n\r\n .resumen-titulo {\r\n font-family: 'Urbanist', sans-serif;\r\n font-size: 16px;\r\n font-weight: 700;\r\n color: var(--color-texto);\r\n margin-bottom: 24px;\r\n padding-bottom: 16px;\r\n border-bottom: 1px solid var(--color-borde);\r\n }\r\n\r\n .resumen-item {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .resumen-item-label {\r\n font-size: 12px;\r\n color: var(--color-texto-secundario);\r\n margin-bottom: 6px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .resumen-item-valor {\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: var(--color-texto);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .resumen-item-valor.sin-responder {\r\n color: #aaa;\r\n font-style: italic;\r\n font-weight: 400;\r\n }\r\n\r\n .punto-amarillo {\r\n width: 8px;\r\n height: 8px;\r\n background-color: var(--color-amarillo);\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* ===== RESPONSIVE ===== *\/\r\n @media (max-width: 900px) {\r\n .cuestionario-wrapper {\r\n flex-direction: column;\r\n }\r\n .resumen-container {\r\n width: 100%;\r\n order: -1;\r\n }\r\n .resumen-lateral {\r\n position: static;\r\n }\r\n }\r\n\r\n \/* ===== PROGRESO ===== *\/\r\n .progreso-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 8px;\r\n font-size: 14px;\r\n color: var(--color-texto-secundario);\r\n }\r\n\r\n .progreso-barra {\r\n width: 100%;\r\n height: 6px;\r\n background-color: var(--color-borde);\r\n border-radius: 3px;\r\n margin-bottom: 40px;\r\n overflow: hidden;\r\n }\r\n\r\n .progreso-barra-fill {\r\n height: 100%;\r\n background-color: var(--color-amarillo);\r\n border-radius: 3px;\r\n transition: width 0.4s ease;\r\n }\r\n\r\n \/* ===== PASOS ===== *\/\r\n .paso {\r\n display: none;\r\n }\r\n\r\n .paso.activo {\r\n display: block;\r\n animation: fadeIn 0.4s ease;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .pregunta-titulo {\r\n font-family: 'Urbanist', sans-serif;\r\n font-size: 24px;\r\n font-weight: 700;\r\n margin-bottom: 32px;\r\n color: var(--color-texto);\r\n }\r\n\r\n \/* ===== GRID OPCIONES ===== *\/\r\n .opciones-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 16px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .opciones-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n .opcion-tarjeta {\r\n position: relative;\r\n padding: 24px;\r\n border: 2px solid var(--color-borde);\r\n border-radius: 12px;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n background: var(--color-tarjeta);\r\n }\r\n\r\n .opcion-tarjeta:hover {\r\n border-color: var(--color-amarillo);\r\n box-shadow: 0 4px 12px rgba(254, 213, 19, 0.15);\r\n }\r\n\r\n .opcion-tarjeta.seleccionada {\r\n border-color: var(--color-amarillo);\r\n background-color: rgba(254, 213, 19, 0.08);\r\n }\r\n\r\n .opcion-tarjeta input[type=\"radio\"] {\r\n position: absolute;\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n\r\n \/* ===== ICONOS ===== *\/\r\n .opcion-icono {\r\n width: 48px;\r\n height: 48px;\r\n background-color: var(--color-icono-fondo);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .opcion-icono svg {\r\n width: 24px;\r\n height: 24px;\r\n stroke: var(--color-icono);\r\n fill: none;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .opcion-titulo {\r\n font-family: 'Urbanist', sans-serif;\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n color: var(--color-texto);\r\n }\r\n\r\n .opcion-descripcion {\r\n font-size: 14px;\r\n color: var(--color-texto-secundario);\r\n line-height: 1.5;\r\n }\r\n\r\n \/* ===== INPUTS ===== *\/\r\n .campo-texto-container {\r\n margin-bottom: 32px;\r\n }\r\n\r\n .campo-label {\r\n display: block;\r\n font-size: 14px;\r\n font-weight: 500;\r\n margin-bottom: 12px;\r\n color: var(--color-texto);\r\n }\r\n\r\n .campo-texto {\r\n width: 100%;\r\n padding: 16px;\r\n border: 2px solid var(--color-borde);\r\n border-radius: 10px;\r\n font-size: 14px;\r\n font-family: 'Inter', sans-serif;\r\n resize: vertical;\r\n min-height: 120px;\r\n transition: border-color 0.2s ease;\r\n }\r\n\r\n .campo-input {\r\n width: 100%;\r\n padding: 14px 16px;\r\n border: 2px solid var(--color-borde);\r\n border-radius: 10px;\r\n font-size: 14px;\r\n font-family: 'Inter', sans-serif;\r\n transition: border-color 0.2s ease;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .campo-input:focus,\r\n .campo-texto:focus {\r\n outline: none;\r\n border-color: var(--color-amarillo);\r\n }\r\n\r\n \/* ===== BOTONES ===== *\/\r\n .botones-navegacion {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-top: 24px;\r\n padding-top: 24px;\r\n border-top: 1px solid var(--color-borde);\r\n }\r\n\r\n .btn-atras {\r\n background: none;\r\n border: none;\r\n color: var(--color-texto-secundario);\r\n font-size: 14px;\r\n font-family: 'Inter', sans-serif;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 16px;\r\n transition: color 0.2s ease;\r\n }\r\n\r\n .btn-siguiente,\r\n .btn-enviar {\r\n background-color: var(--color-amarillo);\r\n color: var(--color-boton-texto);\r\n border: none;\r\n padding: 14px 32px;\r\n border-radius: 8px;\r\n font-size: 15px;\r\n font-family: 'Urbanist', sans-serif;\r\n font-weight: 600;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .btn-siguiente:hover,\r\n .btn-enviar:hover {\r\n background-color: var(--color-amarillo-hover);\r\n transform: translateY(-1px);\r\n }\r\n \r\n .btn-enviar:disabled {\r\n opacity: 0.7;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n \/* ===== MENSAJE DE \u00c9XITO ===== *\/\r\n .mensaje-exito {\r\n text-align: center;\r\n padding: 60px 20px;\r\n }\r\n\r\n .mensaje-exito-icono {\r\n width: 80px;\r\n height: 80px;\r\n background-color: var(--color-amarillo);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 24px;\r\n font-size: 40px;\r\n }\r\n\r\n .mensaje-exito h2 {\r\n font-family: 'Urbanist', sans-serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 12px;\r\n }\r\n\r\n \/* Spinner para carga *\/\r\n .loading-spinner {\r\n border: 3px solid rgba(0,0,0,0.1);\r\n border-left-color: #000;\r\n border-radius: 50%;\r\n width: 20px;\r\n height: 20px;\r\n animation: spin 1s linear infinite;\r\n display: none;\r\n }\r\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"ia-container\"> <div class=\"cuestionario-wrapper\">\r\n \r\n <div class=\"cuestionario-container\">\r\n <form id=\"cuestionarioForm\">\r\n \r\n <div class=\"progreso-header\">\r\n <span id=\"indicadorPaso\">Paso 1 de 4<\/span>\r\n <span id=\"seccionActual\">Funcionalidad<\/span>\r\n <\/div>\r\n <div class=\"progreso-barra\">\r\n <div class=\"progreso-barra-fill\" id=\"barraProgreso\" style=\"width: 25%;\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"paso activo\" id=\"paso1\">\r\n <h2 class=\"pregunta-titulo\">\u00bfCu\u00e1l es la funcionalidad principal que necesitas?<\/h2>\r\n <div class=\"opciones-grid\">\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"funcionalidad\" value=\"Chatbot & NLP\" required>\r\n <div class=\"opcion-icono\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"opcion-titulo\">Chatbot & NLP<\/div>\r\n <div class=\"opcion-descripcion\">Soporte automatizado, b\u00fasqueda sem\u00e1ntica.<\/div>\r\n <\/label>\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"funcionalidad\" value=\"Anal\u00edtica Predictiva\">\r\n <div class=\"opcion-icono\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M18 20V10\"><\/path><path d=\"M12 20V4\"><\/path><path d=\"M6 20v-6\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"opcion-titulo\">Anal\u00edtica Predictiva<\/div>\r\n <div class=\"opcion-descripcion\">Pron\u00f3stico de tendencias y ventas.<\/div>\r\n <\/label>\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"funcionalidad\" value=\"Visi\u00f3n por Computador\">\r\n <div class=\"opcion-icono\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\r\n <\/div>\r\n <div class=\"opcion-titulo\">Visi\u00f3n por Computador<\/div>\r\n <div class=\"opcion-descripcion\">Reconocimiento de im\u00e1genes y control calidad.<\/div>\r\n <\/label>\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"funcionalidad\" value=\"Integraci\u00f3n Personalizada\">\r\n <div class=\"opcion-icono\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"opcion-titulo\">Integraci\u00f3n a Medida<\/div>\r\n <div class=\"opcion-descripcion\">Conectar modelos IA a tu software actual.<\/div>\r\n <\/label>\r\n <\/div>\r\n <div class=\"botones-navegacion\">\r\n <div><\/div>\r\n <button type=\"button\" class=\"btn-siguiente\" onclick=\"siguientePaso(2)\">Siguiente <span>\u2192<\/span><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"paso\" id=\"paso2\">\r\n <h2 class=\"pregunta-titulo\">\u00bfCu\u00e1l es el estado actual de tus datos?<\/h2>\r\n <div class=\"opciones-grid\">\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"estado_datos\" value=\"Datos organizados\">\r\n <div class=\"opcion-icono\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"opcion-titulo\">Datos Organizados<\/div>\r\n <div class=\"opcion-descripcion\">Datos limpios listos para usar.<\/div>\r\n <\/label>\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"estado_datos\" value=\"Datos parciales\">\r\n <div class=\"opcion-icono\"><svg viewBox=\"0 0 24 24\"><path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"><\/path><\/svg><\/div>\r\n <div class=\"opcion-titulo\">Datos Parciales<\/div>\r\n <div class=\"opcion-descripcion\">Necesitan limpieza o estructuraci\u00f3n.<\/div>\r\n <\/label>\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"estado_datos\" value=\"Sin datos\">\r\n <div class=\"opcion-icono\"><svg viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><\/svg><\/div>\r\n <div class=\"opcion-titulo\">Sin Datos<\/div>\r\n <div class=\"opcion-descripcion\">Comenzamos desde cero.<\/div>\r\n <\/label>\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"estado_datos\" value=\"No estoy seguro\">\r\n <div class=\"opcion-icono\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"><\/path><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line><\/svg><\/div>\r\n <div class=\"opcion-titulo\">No Estoy Seguro<\/div>\r\n <div class=\"opcion-descripcion\">Necesito auditor\u00eda previa.<\/div>\r\n <\/label>\r\n <\/div>\r\n <div class=\"botones-navegacion\">\r\n <button type=\"button\" class=\"btn-atras\" onclick=\"anteriorPaso(1)\"><span>\u2190<\/span> Atr\u00e1s<\/button>\r\n <button type=\"button\" class=\"btn-siguiente\" onclick=\"siguientePaso(3)\">Siguiente <span>\u2192<\/span><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"paso\" id=\"paso3\">\r\n <h2 class=\"pregunta-titulo\">\u00bfCu\u00e1l es tu l\u00ednea de tiempo preferida?<\/h2>\r\n <div class=\"opciones-grid\">\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"timeline\" value=\"Urgente (1-2 semanas)\">\r\n <div class=\"opcion-icono\"><svg viewBox=\"0 0 24 24\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"><\/polygon><\/svg><\/div>\r\n <div class=\"opcion-titulo\">Urgente<\/div>\r\n <div class=\"opcion-descripcion\">Necesito resultados en 1-2 semanas.<\/div>\r\n <\/label>\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"timeline\" value=\"Corto plazo (1-2 meses)\">\r\n <div class=\"opcion-icono\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg><\/div>\r\n <div class=\"opcion-titulo\">Corto Plazo<\/div>\r\n <div class=\"opcion-descripcion\">Tenemos 1-2 meses.<\/div>\r\n <\/label>\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"timeline\" value=\"Flexible (3+ meses)\">\r\n <div class=\"opcion-icono\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg><\/div>\r\n <div class=\"opcion-titulo\">Flexible<\/div>\r\n <div class=\"opcion-descripcion\">Podemos tomarnos 3 meses o m\u00e1s.<\/div>\r\n <\/label>\r\n <label class=\"opcion-tarjeta\">\r\n <input type=\"radio\" name=\"timeline\" value=\"Solo explorando\">\r\n <div class=\"opcion-icono\"><svg viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><\/svg><\/div>\r\n <div class=\"opcion-titulo\">Solo Explorando<\/div>\r\n <div class=\"opcion-descripcion\">Estamos investigando opciones.<\/div>\r\n <\/label>\r\n <\/div>\r\n <div class=\"botones-navegacion\">\r\n <button type=\"button\" class=\"btn-atras\" onclick=\"anteriorPaso(2)\"><span>\u2190<\/span> Atr\u00e1s<\/button>\r\n <button type=\"button\" class=\"btn-siguiente\" onclick=\"siguientePaso(4)\">Siguiente <span>\u2192<\/span><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"paso\" id=\"paso4\">\r\n <h2 class=\"pregunta-titulo\">\u00bfC\u00f3mo podemos contactarte?<\/h2>\r\n <div class=\"campo-texto-container\">\r\n <label class=\"campo-label\">Nombre completo *<\/label>\r\n <input type=\"text\" class=\"campo-input\" name=\"nombre\" placeholder=\"Tu nombre\" required>\r\n \r\n <label class=\"campo-label\">Correo electr\u00f3nico *<\/label>\r\n <input type=\"email\" class=\"campo-input\" name=\"email\" placeholder=\"tu@correo.com\" required>\r\n \r\n <label class=\"campo-label\">Tel\u00e9fono (opcional)<\/label>\r\n <input type=\"tel\" class=\"campo-input\" name=\"telefono\" placeholder=\"+34 600 000 000\">\r\n \r\n <label class=\"campo-label\">Empresa (opcional)<\/label>\r\n <input type=\"text\" class=\"campo-input\" name=\"empresa\" placeholder=\"Nombre de tu empresa\">\r\n \r\n <label class=\"campo-label\">Comentarios adicionales<\/label>\r\n <textarea class=\"campo-texto\" name=\"comentarios_finales\" placeholder=\"Cu\u00e9ntanos m\u00e1s sobre tu proyecto...\"><\/textarea>\r\n <\/div>\r\n <div class=\"botones-navegacion\">\r\n <button type=\"button\" class=\"btn-atras\" onclick=\"anteriorPaso(3)\"><span>\u2190<\/span> Atr\u00e1s<\/button>\r\n <button type=\"submit\" class=\"btn-enviar\" id=\"btnEnviar\">\r\n <span class=\"btn-texto\">Enviar Solicitud<\/span>\r\n <div class=\"loading-spinner\"><\/div>\r\n <span>\u2192<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"paso\" id=\"pasoExito\">\r\n <div class=\"mensaje-exito\">\r\n <div class=\"mensaje-exito-icono\">\u2713<\/div>\r\n <h2>\u00a1Gracias por tu respuesta!<\/h2>\r\n <p>Hemos recibido tu cuestionario correctamente. Nuestro equipo de IA analizar\u00e1 tu caso y te contactar\u00e1 en breve.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/form>\r\n <\/div>\r\n\r\n <div class=\"resumen-container\">\r\n <div class=\"resumen-lateral\">\r\n <div class=\"resumen-titulo\">Resumen de tus respuestas<\/div>\r\n \r\n <div class=\"resumen-item\">\r\n <div class=\"resumen-item-label\">Tipo de servicio<\/div>\r\n <div class=\"resumen-item-valor sin-responder\" id=\"resumen-funcionalidad\">\r\n Sin responder\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"resumen-item\">\r\n <div class=\"resumen-item-label\">Estado de datos<\/div>\r\n <div class=\"resumen-item-valor sin-responder\" id=\"resumen-datos\">\r\n Sin responder\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"resumen-item\">\r\n <div class=\"resumen-item-label\">L\u00ednea de tiempo<\/div>\r\n <div class=\"resumen-item-valor sin-responder\" id=\"resumen-timeline\">\r\n Sin responder\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"resumen-item\">\r\n <div class=\"resumen-item-label\">Contacto<\/div>\r\n <div class=\"resumen-item-valor sin-responder\" id=\"resumen-contacto\">\r\n Sin responder\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n<\/div>\r\n\r\n<script>\r\n const TOTAL_PASOS = 4;\r\n \r\n const NOMBRES_SECCIONES = {\r\n 1: 'Funcionalidad',\r\n 2: 'Estado de Datos', \r\n 3: 'L\u00ednea de Tiempo',\r\n 4: 'Contacto'\r\n };\r\n\r\n function siguientePaso(numeroPaso) {\r\n document.querySelectorAll('.paso').forEach(paso => {\r\n paso.classList.remove('activo');\r\n });\r\n document.getElementById('paso' + numeroPaso).classList.add('activo');\r\n actualizarProgreso(numeroPaso);\r\n }\r\n\r\n function anteriorPaso(numeroPaso) {\r\n document.querySelectorAll('.paso').forEach(paso => {\r\n paso.classList.remove('activo');\r\n });\r\n document.getElementById('paso' + numeroPaso).classList.add('activo');\r\n actualizarProgreso(numeroPaso);\r\n }\r\n\r\n function actualizarProgreso(numeroPaso) {\r\n const porcentaje = (numeroPaso \/ TOTAL_PASOS) * 100;\r\n document.getElementById('barraProgreso').style.width = porcentaje + '%';\r\n document.getElementById('indicadorPaso').textContent = 'Paso ' + numeroPaso + ' de ' + TOTAL_PASOS;\r\n document.getElementById('seccionActual').textContent = NOMBRES_SECCIONES[numeroPaso] || '';\r\n }\r\n\r\n \/\/ Eventos para actualizar el Resumen Lateral\r\n document.querySelectorAll('.opcion-tarjeta').forEach(tarjeta => {\r\n tarjeta.addEventListener('click', function() {\r\n const input = this.querySelector('input');\r\n const nombreGrupo = input.name;\r\n \r\n document.querySelectorAll('input[name=\"' + nombreGrupo + '\"]').forEach(otroInput => {\r\n otroInput.closest('.opcion-tarjeta').classList.remove('seleccionada');\r\n });\r\n \r\n this.classList.add('seleccionada');\r\n actualizarResumen(nombreGrupo, input.value);\r\n });\r\n });\r\n\r\n \/\/ Actualizar resumen de contacto al escribir\r\n const inputsContacto = document.querySelectorAll('input[name=\"nombre\"], input[name=\"email\"]');\r\n inputsContacto.forEach(input => {\r\n input.addEventListener('input', function() {\r\n const nombre = document.querySelector('input[name=\"nombre\"]').value;\r\n const email = document.querySelector('input[name=\"email\"]').value;\r\n const resumenEl = document.getElementById('resumen-contacto');\r\n \r\n if (nombre || email) {\r\n resumenEl.innerHTML = '<span class=\"punto-amarillo\"><\/span>' + (nombre || email);\r\n resumenEl.classList.remove('sin-responder');\r\n } else {\r\n resumenEl.innerHTML = 'Sin responder';\r\n resumenEl.classList.add('sin-responder');\r\n }\r\n });\r\n });\r\n\r\n function actualizarResumen(nombreGrupo, valor) {\r\n let resumenId = '';\r\n switch(nombreGrupo) {\r\n case 'funcionalidad': resumenId = 'resumen-funcionalidad'; break;\r\n case 'estado_datos': resumenId = 'resumen-datos'; break;\r\n case 'timeline': resumenId = 'resumen-timeline'; break;\r\n }\r\n \r\n if (resumenId) {\r\n const resumenEl = document.getElementById(resumenId);\r\n resumenEl.innerHTML = '<span class=\"punto-amarillo\"><\/span>' + valor;\r\n resumenEl.classList.remove('sin-responder');\r\n }\r\n }\r\n\r\n \/\/ ==========================================\r\n \/\/ L\u00d3GICA DE ENV\u00cdO AJAX A WORDPRESS (A\u00d1ADIDA)\r\n \/\/ ==========================================\r\n document.getElementById('cuestionarioForm').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n \r\n const btn = document.getElementById('btnEnviar');\r\n const spinner = btn.querySelector('.loading-spinner');\r\n const texto = btn.querySelector('.btn-texto');\r\n\r\n \/\/ Estado de carga\r\n btn.disabled = true;\r\n texto.style.opacity = '0.7';\r\n spinner.style.display = 'block';\r\n\r\n const formData = new FormData(this);\r\n \/\/ Acci\u00f3n que coincide con el Snippet de PHP del PASO 1\r\n formData.append('action', 'enviar_cuestionario_ia');\r\n\r\n fetch('\/wp-admin\/admin-ajax.php', {\r\n method: 'POST',\r\n body: formData\r\n })\r\n .then(response => response.json())\r\n .then(res => {\r\n if(res.success) {\r\n \/\/ Ocultar formulario y mostrar \u00e9xito\r\n document.querySelectorAll('.paso').forEach(p => p.classList.remove('activo'));\r\n document.getElementById('pasoExito').classList.add('activo');\r\n \/\/ Opcional: Ocultar resumen en m\u00f3vil al finalizar\r\n } else {\r\n alert('Error: ' + (res.data || 'Error desconocido'));\r\n btn.disabled = false;\r\n texto.style.opacity = '1';\r\n spinner.style.display = 'none';\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n alert('Hubo un error de conexi\u00f3n.');\r\n btn.disabled = false;\r\n texto.style.opacity = '1';\r\n spinner.style.display = 'none';\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cuestionario IA Paso 1 de 4 Funcionalidad \u00bfCu\u00e1l es la funcionalidad principal que necesitas? Chatbot & NLP Soporte automatizado, b\u00fasqueda sem\u00e1ntica. Anal\u00edtica Predictiva Pron\u00f3stico de tendencias y ventas. Visi\u00f3n por Computador Reconocimiento de im\u00e1genes y control calidad. Integraci\u00f3n a Medida Conectar modelos IA a tu software actual. Siguiente \u2192 \u00bfCu\u00e1l es el estado actual de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-936","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cuestionario 100% a medida - Pruebas Roberto<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cuestionario 100% a medida - Pruebas Roberto\" \/>\n<meta property=\"og:description\" content=\"Cuestionario IA Paso 1 de 4 Funcionalidad \u00bfCu\u00e1l es la funcionalidad principal que necesitas? Chatbot & NLP Soporte automatizado, b\u00fasqueda sem\u00e1ntica. Anal\u00edtica Predictiva Pron\u00f3stico de tendencias y ventas. Visi\u00f3n por Computador Reconocimiento de im\u00e1genes y control calidad. Integraci\u00f3n a Medida Conectar modelos IA a tu software actual. Siguiente \u2192 \u00bfCu\u00e1l es el estado actual de […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/\" \/>\n<meta property=\"og:site_name\" content=\"Pruebas Roberto\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-31T09:42:09+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/\",\"url\":\"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/\",\"name\":\"Cuestionario 100% a medida - Pruebas Roberto\",\"isPartOf\":{\"@id\":\"https:\/\/roberto.nytelweb.net\/#website\"},\"datePublished\":\"2025-12-29T12:45:35+00:00\",\"dateModified\":\"2025-12-31T09:42:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/roberto.nytelweb.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cuestionario 100% a medida\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/roberto.nytelweb.net\/#website\",\"url\":\"https:\/\/roberto.nytelweb.net\/\",\"name\":\"Pruebas Roberto\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/roberto.nytelweb.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/roberto.nytelweb.net\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/roberto.nytelweb.net\/#organization\",\"name\":\"Pruebas Roberto\",\"url\":\"https:\/\/roberto.nytelweb.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/roberto.nytelweb.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/roberto.nytelweb.net\/wp-content\/uploads\/2025\/10\/Cecil.IA-4.webp\",\"contentUrl\":\"https:\/\/roberto.nytelweb.net\/wp-content\/uploads\/2025\/10\/Cecil.IA-4.webp\",\"width\":500,\"height\":300,\"caption\":\"Pruebas Roberto\"},\"image\":{\"@id\":\"https:\/\/roberto.nytelweb.net\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cuestionario 100% a medida - Pruebas Roberto","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Cuestionario 100% a medida - Pruebas Roberto","og_description":"Cuestionario IA Paso 1 de 4 Funcionalidad \u00bfCu\u00e1l es la funcionalidad principal que necesitas? Chatbot & NLP Soporte automatizado, b\u00fasqueda sem\u00e1ntica. Anal\u00edtica Predictiva Pron\u00f3stico de tendencias y ventas. Visi\u00f3n por Computador Reconocimiento de im\u00e1genes y control calidad. Integraci\u00f3n a Medida Conectar modelos IA a tu software actual. Siguiente \u2192 \u00bfCu\u00e1l es el estado actual de […]","og_url":"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/","og_site_name":"Pruebas Roberto","article_modified_time":"2025-12-31T09:42:09+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/","url":"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/","name":"Cuestionario 100% a medida - Pruebas Roberto","isPartOf":{"@id":"https:\/\/roberto.nytelweb.net\/#website"},"datePublished":"2025-12-29T12:45:35+00:00","dateModified":"2025-12-31T09:42:09+00:00","breadcrumb":{"@id":"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/roberto.nytelweb.net\/index.php\/cuestionario-a-medida\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/roberto.nytelweb.net\/"},{"@type":"ListItem","position":2,"name":"Cuestionario 100% a medida"}]},{"@type":"WebSite","@id":"https:\/\/roberto.nytelweb.net\/#website","url":"https:\/\/roberto.nytelweb.net\/","name":"Pruebas Roberto","description":"","publisher":{"@id":"https:\/\/roberto.nytelweb.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/roberto.nytelweb.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/roberto.nytelweb.net\/#organization","name":"Pruebas Roberto","url":"https:\/\/roberto.nytelweb.net\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/roberto.nytelweb.net\/#\/schema\/logo\/image\/","url":"https:\/\/roberto.nytelweb.net\/wp-content\/uploads\/2025\/10\/Cecil.IA-4.webp","contentUrl":"https:\/\/roberto.nytelweb.net\/wp-content\/uploads\/2025\/10\/Cecil.IA-4.webp","width":500,"height":300,"caption":"Pruebas Roberto"},"image":{"@id":"https:\/\/roberto.nytelweb.net\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/roberto.nytelweb.net\/index.php\/wp-json\/wp\/v2\/pages\/936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roberto.nytelweb.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roberto.nytelweb.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roberto.nytelweb.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roberto.nytelweb.net\/index.php\/wp-json\/wp\/v2\/comments?post=936"}],"version-history":[{"count":10,"href":"https:\/\/roberto.nytelweb.net\/index.php\/wp-json\/wp\/v2\/pages\/936\/revisions"}],"predecessor-version":[{"id":951,"href":"https:\/\/roberto.nytelweb.net\/index.php\/wp-json\/wp\/v2\/pages\/936\/revisions\/951"}],"wp:attachment":[{"href":"https:\/\/roberto.nytelweb.net\/index.php\/wp-json\/wp\/v2\/media?parent=936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}