{"id":3121,"date":"2026-01-29T22:53:31","date_gmt":"2026-01-30T04:53:31","guid":{"rendered":"https:\/\/tuconsejeria.com\/?page_id=3121"},"modified":"2026-01-30T17:11:45","modified_gmt":"2026-01-30T23:11:45","slug":"test","status":"publish","type":"page","link":"https:\/\/tuconsejeria.com\/en\/test\/","title":{"rendered":"Test"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n GENDI - Ayuda con Perspectiva de G\u00e9nero<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n :root {\n --primary: #8e44ad;\n --primary-dark: #6c3483;\n --accent: #e91e63;\n --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n --white: #ffffff;\n --text: #2c3e50;\n --text-light: #7f8c8d;\n --success: #27ae60;\n --radius: 16px;\n --chat-bg: #e5ddd5;\n --chat-bubble-user: #dcf8c6;\n --chat-bubble-bot: #ffffff;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n \/* Importante en WordPress: NO forzar layout del body *\/\n body {\n font-family: 'Poppins', sans-serif;\n background: transparent;\n margin: 0;\n padding: 0;\n }\n\n \/* Wrapper seguro para widget *\/\n #gendi-root{\n background: var(--bg-gradient);\n width: 100%;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px;\n }\n\n \/* ============================================\n MODO SELECTOR\n ============================================ *\/\n #mode-selector {\n background: var(--white);\n width: 100%;\n max-width: 520px;\n border-radius: var(--radius);\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n padding: 44px 30px;\n text-align: center;\n }\n\n #mode-selector h1 {\n font-size: 2.2rem;\n margin-bottom: 10px;\n color: var(--primary);\n }\n\n #mode-selector p {\n color: var(--text-light);\n margin-bottom: 28px;\n font-size: 1.05rem;\n }\n\n .mode-options {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n }\n\n .mode-card {\n flex: 1;\n min-width: 200px;\n background: #f8f9fa;\n border: 3px solid transparent;\n border-radius: 16px;\n padding: 26px 18px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .mode-card:hover {\n border-color: var(--primary);\n transform: translateY(-3px);\n box-shadow: 0 8px 20px rgba(142, 68, 173, 0.2);\n }\n\n .mode-card .icon { font-size: 2.8rem; margin-bottom: 12px; }\n .mode-card h3 { color: var(--text); font-size: 1.15rem; margin-bottom: 8px; }\n .mode-card p { color: var(--text-light); font-size: 0.92rem; margin: 0; }\n\n \/* ============================================\n TYPEFORM\n ============================================ *\/\n #gendi-container {\n background: var(--white);\n width: 100%;\n max-width: 620px;\n height: 720px;\n border-radius: var(--radius);\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n display: none;\n flex-direction: column;\n }\n\n #gendi-container.active { display: flex; }\n\n .header {\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\n color: white;\n padding: 26px 20px;\n text-align: center;\n position: relative;\n }\n\n .header h1 {\n font-size: 1.9rem;\n font-weight: 700;\n margin: 0;\n letter-spacing: 2px;\n }\n\n .header p {\n margin: 8px 0 0 0;\n opacity: 0.9;\n font-size: 0.9rem;\n }\n\n .progress-container {\n background: rgba(255,255,255,0.2);\n height: 4px;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n .progress-bar {\n height: 100%;\n background: var(--accent);\n width: 0%;\n transition: width 0.3s ease;\n }\n\n .content {\n flex: 1;\n padding: 32px 22px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n overflow-y: auto;\n }\n\n .screen { display: none; animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }\n .screen.active { display: block; }\n\n @keyframes slideIn {\n from { opacity: 0; transform: translateX(30px); }\n to { opacity: 1; transform: translateX(0); }\n }\n\n .question { margin-bottom: 26px; }\n .question-emoji { font-size: 3.2rem; margin-bottom: 14px; display: block; }\n .question h2 { color: var(--text); font-size: 1.45rem; font-weight: 600; margin-bottom: 10px; line-height: 1.35; }\n .question p { color: var(--text-light); font-size: 1rem; line-height: 1.5; }\n\n .options { display: flex; flex-direction: column; gap: 12px; }\n\n .option-btn {\n background: #f8f9fa !important;\n border: 2px solid transparent !important;\n border-radius: 12px !important;\n padding: 16px 18px !important;\n text-align: left !important;\n cursor: pointer !important;\n transition: all 0.2s ease !important;\n font-size: 1rem !important;\n font-weight: 500 !important;\n color: #2c3e50 !important;\n display: flex !important;\n align-items: center !important;\n gap: 14px !important;\n width: 100% !important;\n text-decoration: none !important;\n }\n\n .option-btn:hover,\n .option-btn:focus,\n .option-btn:active {\n background: #ffffff !important;\n border-color: #8e44ad !important;\n transform: translateX(4px) !important;\n box-shadow: 0 4px 12px rgba(142, 68, 173, 0.15) !important;\n }\n\n .option-btn .emoji { font-size: 1.7rem !important; min-width: 38px !important; line-height: 1 !important; }\n .option-btn .arrow { margin-left: auto !important; opacity: 0 !important; transition: opacity 0.2s !important; font-size: 1.1rem !important; color: #8e44ad !important; }\n .option-btn:hover .arrow { opacity: 1 !important; }\n .option-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n .form-group { margin-bottom: 18px; }\n .form-group label { display: block; font-weight: 600; color: var(--text); margin-bottom: 8px; font-size: 0.95rem; }\n\n .form-group input,\n .form-group textarea {\n width: 100% !important;\n padding: 14px !important;\n border: 2px solid #e9ecef !important;\n border-radius: 10px !important;\n font-family: 'Poppins', sans-serif !important;\n font-size: 1rem !important;\n background: #f8f9fa !important;\n color: #2c3e50 !important;\n }\n\n .form-group input:focus,\n .form-group textarea:focus {\n outline: none !important;\n border-color: #8e44ad !important;\n background: white !important;\n box-shadow: 0 0 0 4px rgba(142, 68, 173, 0.1) !important;\n }\n\n .form-group textarea { min-height: 90px; resize: vertical; }\n\n .call-card {\n background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);\n border-radius: 16px;\n padding: 30px 20px;\n text-align: center;\n margin: 16px 0;\n box-shadow: 0 8px 20px rgba(233, 30, 99, 0.3);\n }\n\n .call-card .emoji { font-size: 3.4rem; margin-bottom: 12px; }\n .call-card h3 { color: white; font-size: 1.2rem; margin-bottom: 12px; }\n .call-card .phone { font-size: 2rem; font-weight: 700; color: white; margin: 16px 0; letter-spacing: 1px; }\n .call-card p { color: rgba(255,255,255,0.9); font-size: 0.9rem; margin-top: 8px; }\n\n .btn-primary {\n background: #8e44ad !important;\n color: white !important;\n border: none !important;\n padding: 14px 18px !important;\n border-radius: 10px !important;\n font-size: 1.05rem !important;\n font-weight: 600 !important;\n cursor: pointer !important;\n width: 100% !important;\n transition: all 0.3s ease !important;\n box-shadow: 0 4px 15px rgba(142, 68, 173, 0.3) !important;\n text-decoration: none !important;\n display: block !important;\n }\n\n .btn-primary:hover { background: #6c3483 !important; transform: translateY(-2px) !important; }\n\n .btn-call {\n background: white !important;\n color: #c44569 !important;\n border: none !important;\n padding: 16px 18px !important;\n border-radius: 50px !important;\n font-size: 1.05rem !important;\n font-weight: 700 !important;\n cursor: pointer !important;\n width: 100% !important;\n transition: all 0.3s ease !important;\n box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;\n text-decoration: none !important;\n display: inline-block !important;\n text-align: center !important;\n }\n\n .btn-call:hover { transform: scale(1.03) !important; }\n\n .btn-secondary {\n background: #f8f9fa !important;\n color: #2c3e50 !important;\n border: 2px solid #dee2e6 !important;\n padding: 12px 16px !important;\n border-radius: 10px !important;\n font-size: 1rem !important;\n font-weight: 500 !important;\n cursor: pointer !important;\n transition: all 0.2s !important;\n }\n\n .btn-secondary:hover { background: white !important; border-color: #8e44ad !important; color: #8e44ad !important; }\n\n .nav-buttons { display: flex; gap: 10px; margin-top: 18px; }\n\n .loader-screen,\n .success-screen { display: none; text-align: center; padding: 50px 20px; }\n\n .loader-screen.active,\n .success-screen.active { display: block; }\n\n .spinner {\n width: 60px; height: 60px;\n border: 4px solid #f3f3f3;\n border-top: 4px solid var(--primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 0 auto 22px;\n }\n\n @keyframes spin { 0% { transform: rotate(0deg);} 100% {transform: rotate(360deg);} }\n\n .success-icon { font-size: 4.6rem; margin-bottom: 12px; }\n .success-screen h2 { color: var(--success); font-size: 1.7rem; margin-bottom: 12px; }\n .success-screen p { color: var(--text-light); font-size: 1.05rem; margin-bottom: 22px; }\n\n .privacy-note {\n text-align: center;\n color: var(--text-light);\n font-size: 0.8rem;\n margin-top: 20px;\n padding: 12px;\n background: #f8f9fa;\n border-radius: 8px;\n }\n\n \/* ============================================\n CHAT\n ============================================ *\/\n #chat-container {\n background: var(--white);\n width: 100%;\n max-width: 620px;\n height: 720px;\n border-radius: var(--radius);\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n display: none;\n flex-direction: column;\n }\n #chat-container.active { display: flex; }\n\n .chat-header {\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\n color: white;\n padding: 18px 16px;\n display: flex;\n align-items: center;\n gap: 12px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n\n .chat-header-avatar {\n width: 42px; height: 42px;\n background: white;\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.4rem;\n }\n\n .chat-header-info h2 { font-size: 1.1rem; margin: 0; }\n .chat-header-info p { font-size: 0.78rem; margin: 2px 0 0 0; opacity: 0.9; }\n\n .chat-messages {\n flex: 1;\n background: var(--chat-bg);\n background-image:\n linear-gradient(45deg, rgba(0,0,0,0.02) 25%, transparent 25%),\n linear-gradient(-45deg, rgba(0,0,0,0.02) 25%, transparent 25%);\n background-size: 20px 20px;\n overflow-y: auto;\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .chat-message { display: flex; animation: messageSlide 0.25s ease; }\n @keyframes messageSlide { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} }\n\n .chat-message.bot { justify-content: flex-start; }\n .chat-message.user { justify-content: flex-end; }\n\n .message-bubble {\n max-width: 78%;\n padding: 12px 14px;\n border-radius: 10px;\n word-wrap: break-word;\n box-shadow: 0 1px 2px rgba(0,0,0,0.1);\n }\n\n .chat-message.bot .message-bubble { background: var(--chat-bubble-bot); border-bottom-left-radius: 2px; }\n .chat-message.user .message-bubble { background: var(--chat-bubble-user); border-bottom-right-radius: 2px; }\n\n .message-bubble .emoji { font-size: 1.35rem; margin-bottom: 6px; display: block; }\n .message-bubble p { margin: 0; line-height: 1.45; color: var(--text); white-space: pre-line; }\n\n .message-time { font-size: 0.7rem; color: var(--text-light); margin-top: 4px; text-align: right; }\n\n .chat-options { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }\n\n .chat-option-btn {\n background: white !important;\n border: 2px solid var(--primary) !important;\n color: var(--primary) !important;\n padding: 11px 14px !important;\n border-radius: 18px !important;\n cursor: pointer !important;\n transition: all 0.2s !important;\n font-size: 0.95rem !important;\n font-weight: 500 !important;\n text-align: left !important;\n display: flex !important;\n align-items: center !important;\n gap: 10px !important;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;\n }\n\n .chat-option-btn:hover { background: var(--primary) !important; color: white !important; transform: translateX(4px) !important; }\n .chat-option-btn .emoji { font-size: 1.25rem; }\n .chat-option-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n .chat-input-area {\n background: #f0f0f0;\n padding: 12px;\n display: flex;\n gap: 10px;\n align-items: center;\n box-shadow: 0 -2px 5px rgba(0,0,0,0.05);\n width: 100%;\n flex-wrap: nowrap;\n }\n\n .chat-input-area input {\n flex: 1;\n min-width: 0;\n padding: 12px 14px !important;\n border: none !important;\n border-radius: 22px !important;\n background: white !important;\n font-size: 1rem !important;\n font-family: 'Poppins', sans-serif !important;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;\n }\n\n .chat-input-area input:focus { outline: none !important; box-shadow: 0 0 0 2px var(--primary) !important; }\n\n .chat-input-area select {\n padding: 12px;\n border: 2px solid #e9ecef;\n border-radius: 22px;\n background: white;\n font-size: 1rem;\n cursor: pointer;\n flex: 0 0 auto;\n max-width: 140px;\n }\n\n .chat-send-btn {\n width: 44px; height: 44px;\n background: var(--primary) !important;\n border: none !important;\n border-radius: 50% !important;\n color: white !important;\n font-size: 1.2rem !important;\n cursor: pointer !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n transition: all 0.2s !important;\n box-shadow: 0 2px 5px rgba(142, 68, 173, 0.3) !important;\n flex: 0 0 auto;\n }\n\n .chat-send-btn:hover { background: var(--primary-dark) !important; transform: scale(1.04) !important; }\n .chat-send-btn:disabled { background: #ccc !important; cursor: not-allowed !important; }\n\n .typing-indicator { display: flex; gap: 4px; padding: 10px 2px; }\n .typing-dot { width: 8px; height: 8px; background: var(--text-light); border-radius: 50%; animation: typing 1.4s infinite; }\n .typing-dot:nth-child(2) { animation-delay: 0.2s; }\n .typing-dot:nth-child(3) { animation-delay: 0.4s; }\n\n @keyframes typing {\n 0%, 60%, 100% { transform: translateY(0); }\n 30% { transform: translateY(-10px); }\n }\n\n .chat-call-bubble {\n background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);\n color: white;\n padding: 18px;\n border-radius: 15px;\n text-align: center;\n margin: 8px 0;\n }\n\n .chat-call-bubble .phone {\n font-size: 1.7rem;\n font-weight: 700;\n margin: 10px 0;\n }\n\n .chat-call-bubble a {\n display: inline-block;\n background: white;\n color: #c44569;\n padding: 10px 24px;\n border-radius: 25px;\n text-decoration: none;\n font-weight: 600;\n margin-top: 10px;\n transition: all 0.2s;\n }\n .chat-call-bubble a:hover { transform: scale(1.03); }\n\n \/* MOBILE FULLSCREEN *\/\n @media (max-width: 600px) {\n #gendi-root{ padding: 0; min-height: 100dvh; }\n #mode-selector, #gendi-container, #chat-container {\n max-width: 100%;\n height: 100dvh;\n border-radius: 0;\n }\n .content { padding: 22px 14px; }\n .header h1 { font-size: 1.6rem; }\n .question h2 { font-size: 1.25rem; }\n .question-emoji { font-size: 2.6rem; }\n .chat-messages { padding: 12px; }\n .chat-input-area { gap: 8px; padding: 10px; }\n .chat-input-area select { max-width: 110px; padding: 10px; font-size: 0.95rem; }\n }\n <\/style>\n<\/head>\n\n<body>\n <div id=\"gendi-root\">\n\n <!-- SELECTOR -->\n <div id=\"mode-selector\">\n <h1>\ud83e\udd16 GENDI<\/h1>\n <p>Elige c\u00f3mo quieres interactuar<\/p>\n <div class=\"mode-options\">\n <div class=\"mode-card\" onclick=\"selectMode('typeform')\">\n <div class=\"icon\">\ud83d\udccb<\/div>\n <h3>Modo Formulario<\/h3>\n <p>Pantallas paso a paso<\/p>\n <\/div>\n <div class=\"mode-card\" onclick=\"selectMode('chat')\">\n <div class=\"icon\">\ud83d\udcac<\/div>\n <h3>Modo Chat<\/h3>\n <p>Conversaci\u00f3n interactiva<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- TYPEFORM -->\n <div id=\"gendi-container\">\n <div class=\"header\">\n <h1>\ud83e\udd16 GENDI<\/h1>\n <p>G\u00e9nero y Desarrollo A.C.<\/p>\n <div class=\"progress-container\">\n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"content\">\n <div class=\"loader-screen\" id=\"screen-loading\">\n <div class=\"spinner\"><\/div>\n <div class=\"question\">\n <h2>Enviando tu solicitud...<\/h2>\n <p>Un momento por favor \u23f3<\/p>\n <\/div>\n <\/div>\n\n <div class=\"success-screen\" id=\"screen-success\">\n <div class=\"success-icon\">\u2705<\/div>\n <h2>\u00a1Solicitud Recibida!<\/h2>\n <p>Nos pondremos en contacto contigo muy pronto.<\/p>\n <button class=\"btn-primary\" onclick=\"resetApp()\">Finalizar<\/button>\n <\/div>\n\n <div class=\"screen active\" id=\"screen-menu\">\n <div class=\"question\">\n <span class=\"question-emoji\">\ud83d\udc4b<\/span>\n <h2>\u00bfC\u00f3mo podemos ayudarte hoy?<\/h2>\n <p>Selecciona la opci\u00f3n que mejor se adapte a tus necesidades<\/p>\n <\/div>\n\n <div class=\"options\">\n <button class=\"option-btn\" onclick=\"showScreen('screen-phone')\">\n <span class=\"emoji\">\ud83d\udcde<\/span>\n <span>L\u00ednea Telef\u00f3nica de Apoyo 24\/7<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n\n <button class=\"option-btn\" onclick=\"showScreen('screen-grupos-quien')\">\n <span class=\"emoji\">\ud83d\udc65<\/span>\n <span>Grupos para Hombres<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n\n <button class=\"option-btn\" onclick=\"showScreen('screen-terapia-quien')\">\n <span class=\"emoji\">\ud83e\udde0<\/span>\n <span>Terapia Individual<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n\n <button class=\"option-btn\" onclick=\"showScreen('screen-servicios-sector')\">\n <span class=\"emoji\">\ud83d\ude80<\/span>\n <span>Servicios y Alianzas<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n\n <button class=\"option-btn\" onclick=\"showScreen('screen-medios-form')\">\n <span class=\"emoji\">\ud83d\udce3<\/span>\n <span>Medios y Eventos<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n\n <div class=\"privacy-note\">\n \ud83d\udd12 Tus datos est\u00e1n protegidos. Consulta nuestro aviso de privacidad en gendes.org.mx\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"screen-phone\">\n <div class=\"question\">\n <span class=\"question-emoji\">\ud83d\udcde<\/span>\n <h2>L\u00ednea de Apoyo 24\/7<\/h2>\n <p>Servicio gratuito disponible los 365 d\u00edas del a\u00f1o<\/p>\n <\/div>\n <div class=\"call-card\">\n <div class=\"emoji\">\u260e\ufe0f<\/div>\n <h3>Ll\u00e1manos ahora<\/h3>\n <div class=\"phone\">55 4757 9288<\/div>\n <p>Atenci\u00f3n profesional confidencial<\/p>\n <\/div>\n <a href=\"tel:+525547579288\" class=\"btn-call\" onclick=\"logAction('LINEA_TELEFONICA','Llamada iniciada')\">\ud83d\udcf1 Llamar Ahora<\/a>\n <div class=\"nav-buttons\">\n <button class=\"btn-secondary\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"screen-grupos-quien\">\n <div class=\"question\">\n <span class=\"question-emoji\">\ud83d\udc65<\/span>\n <h2>Grupos para Hombres<\/h2>\n <p>Espacio seguro para detener ejercicios de violencia. \u00bfPara qui\u00e9n es?<\/p>\n <\/div>\n <div class=\"options\">\n <button class=\"option-btn\" onclick=\"setData('subType','Para m\u00ed'); showScreen('screen-grupos-form')\">\n <span class=\"emoji\">\ud83d\ude4b\u200d\u2642\ufe0f<\/span>\n <span>Para m\u00ed<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <button class=\"option-btn\" onclick=\"setData('subType','Para conocido'); showScreen('screen-grupos-form')\">\n <span class=\"emoji\">\ud83e\udd1d<\/span>\n <span>Para un conocido<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n <div class=\"nav-buttons\">\n <button class=\"btn-secondary\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"screen-grupos-form\">\n <div class=\"question\">\n <span class=\"question-emoji\">\u270d\ufe0f<\/span>\n <h2>Informaci\u00f3n de Contacto<\/h2>\n <p>Completa tus datos para que podamos ayudarte<\/p>\n <\/div>\n <form id=\"form-grupos\" onsubmit=\"handleSubmit(event,'GRUPOS_HOMBRES')\" action=\"\">\n <div class=\"form-group\">\n <label>\ud83d\udcdd Nombre completo<\/label>\n <input name=\"nombre\" placeholder=\"Tu nombre\" required>\n <\/div>\n <div class=\"form-group\">\n <label>\ud83d\udcf1 Tel\u00e9fono o Email<\/label>\n <input name=\"contacto\" placeholder=\"\u00bfC\u00f3mo te contactamos?\" required>\n <\/div>\n <div class=\"form-group\">\n <label>\ud83d\udcac Comentario adicional (opcional)<\/label>\n <textarea name=\"comentario\" placeholder=\"Cu\u00e9ntanos m\u00e1s sobre tu situaci\u00f3n...\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn-primary\">Enviar Solicitud \u2192<\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n <div class=\"nav-buttons\">\n <button class=\"btn-secondary\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"screen-terapia-quien\">\n <div class=\"question\">\n <span class=\"question-emoji\">\ud83e\udde0<\/span>\n <h2>Terapia Individual<\/h2>\n <p>Enfoque \u00e9tico y humanista con perspectiva de g\u00e9nero. \u00bfPara qui\u00e9n es?<\/p>\n <\/div>\n <div class=\"options\">\n <button class=\"option-btn\" onclick=\"setData('subType','Para m\u00ed'); showScreen('screen-terapia-form')\">\n <span class=\"emoji\">\ud83d\udc64<\/span>\n <span>Para m\u00ed<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <button class=\"option-btn\" onclick=\"setData('subType','Para menor de edad'); showScreen('screen-terapia-form')\">\n <span class=\"emoji\">\ud83d\udc76<\/span>\n <span>Para un menor de edad<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n <div class=\"nav-buttons\">\n <button class=\"btn-secondary\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"screen-terapia-form\">\n <div class=\"question\">\n <span class=\"question-emoji\">\ud83d\udccb<\/span>\n <h2>Datos para Terapia<\/h2>\n <p>Ay\u00fadanos con algunos datos b\u00e1sicos<\/p>\n <\/div>\n <form id=\"form-terapia\" onsubmit=\"handleSubmit(event,'TERAPIA_INDIVIDUAL')\" action=\"\">\n <div class=\"form-group\">\n <label>\ud83d\udcdd Nombre completo<\/label>\n <input name=\"nombre\" placeholder=\"Nombre del paciente\" required>\n <\/div>\n <div class=\"form-group\">\n <label>\ud83c\udf82 Edad<\/label>\n <input type=\"number\" name=\"edad\" placeholder=\"Edad\" min=\"1\" max=\"120\" required>\n <\/div>\n <div class=\"form-group\">\n <label>\ud83d\udcf1 Contacto<\/label>\n <input name=\"contacto\" placeholder=\"Tel\u00e9fono o email\" required>\n <\/div>\n <button type=\"submit\" class=\"btn-primary\">Solicitar Terapia \u2192<\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n <div class=\"nav-buttons\">\n <button class=\"btn-secondary\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"screen-servicios-sector\">\n <div class=\"question\">\n <span class=\"question-emoji\">\ud83c\udfe2<\/span>\n <h2>\u00bfA qu\u00e9 sector perteneces?<\/h2>\n <p>Ofrecemos servicios especializados para cada sector<\/p>\n <\/div>\n <div class=\"options\">\n <button class=\"option-btn\" onclick=\"setData('sector','Educativo'); showScreen('screen-servicios-tipo')\">\n <span class=\"emoji\">\ud83c\udf93<\/span>\n <span>Instituci\u00f3n Educativa<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <button class=\"option-btn\" onclick=\"setData('sector','Civil'); showScreen('screen-servicios-tipo')\">\n <span class=\"emoji\">\ud83e\udd32<\/span>\n <span>Organizaci\u00f3n Civil<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <button class=\"option-btn\" onclick=\"setData('sector','Empresa'); showScreen('screen-servicios-tipo')\">\n <span class=\"emoji\">\ud83d\udcbc<\/span>\n <span>Empresa Privada<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n <div class=\"nav-buttons\">\n <button class=\"btn-secondary\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"screen-servicios-tipo\">\n <div class=\"question\">\n <span class=\"question-emoji\">\ud83d\udcda<\/span>\n <h2>\u00bfQu\u00e9 servicio necesitas?<\/h2>\n <p>Selecciona el tipo de servicio que buscas<\/p>\n <\/div>\n <div class=\"options\">\n <button class=\"option-btn\" onclick=\"setData('tipo','Taller'); showScreen('screen-servicios-modalidad')\">\n <span class=\"emoji\">\ud83c\udfaf<\/span>\n <span>Taller \/ Capacitaci\u00f3n<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <button class=\"option-btn\" onclick=\"setData('tipo','Consultor\u00eda'); showScreen('screen-servicios-modalidad')\">\n <span class=\"emoji\">\ud83d\udca1<\/span>\n <span>Consultor\u00eda Especializada<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <button class=\"option-btn\" onclick=\"setData('tipo','Conferencia'); showScreen('screen-servicios-modalidad')\">\n <span class=\"emoji\">\ud83c\udfa4<\/span>\n <span>Conferencia \/ Charla<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n <div class=\"nav-buttons\">\n <button class=\"btn-secondary\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"screen-servicios-modalidad\">\n <div class=\"question\">\n <span class=\"question-emoji\">\ud83c\udf10<\/span>\n <h2>\u00bfEn qu\u00e9 modalidad?<\/h2>\n <p>Elige c\u00f3mo prefieres recibir el servicio<\/p>\n <\/div>\n <div class=\"options\">\n <button class=\"option-btn\" onclick=\"setData('modalidad','Presencial'); showScreen('screen-servicios-form')\">\n <span class=\"emoji\">\ud83c\udfdb\ufe0f<\/span>\n <span>Presencial<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <button class=\"option-btn\" onclick=\"setData('modalidad','Virtual'); showScreen('screen-servicios-form')\">\n <span class=\"emoji\">\ud83d\udcbb<\/span>\n <span>Virtual \/ Online<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <button class=\"option-btn\" onclick=\"setData('modalidad','H\u00edbrida'); showScreen('screen-servicios-form')\">\n <span class=\"emoji\">\ud83d\udd04<\/span>\n <span>H\u00edbrida (Mixta)<\/span>\n <span class=\"arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n <div class=\"nav-buttons\">\n <button class=\"btn-secondary\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"screen-servicios-form\">\n <div class=\"question\">\n <span class=\"question-emoji\">\ud83d\udce7<\/span>\n <h2>\u00daltimos detalles<\/h2>\n <p>Completa esta informaci\u00f3n para enviarte una propuesta<\/p>\n <\/div>\n <form id=\"form-servicios\" onsubmit=\"handleSubmit(event,'SERVICIOS_ALIANZAS')\" action=\"\">\n <div class=\"form-group\">\n <label>\ud83c\udfaf Dirigido a:<\/label>\n <input name=\"dirigido_a\" placeholder=\"Ej: Estudiantes, empleados, comunidad...\" required>\n <\/div>\n <div class=\"form-group\">\n <label>\ud83d\udce7 Tu email<\/label>\n <input type=\"email\" name=\"correo\" placeholder=\"correo@ejemplo.com\" required>\n <\/div>\n <button type=\"submit\" class=\"btn-primary\">Solicitar Propuesta \u2192<\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n <div class=\"nav-buttons\">\n <button class=\"btn-secondary\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"screen-medios-form\">\n <div class=\"question\">\n <span class=\"question-emoji\">\ud83d\udce3<\/span>\n <h2>Invitaci\u00f3n a Medios<\/h2>\n <p>Cu\u00e9ntanos sobre tu evento o espacio medi\u00e1tico<\/p>\n <\/div>\n <form id=\"form-medios\" onsubmit=\"handleSubmit(event,'MEDIOS_EVENTOS')\" action=\"\">\n <div class=\"form-group\">\n <label>\ud83d\udc64 Tu nombre<\/label>\n <input name=\"nombre\" placeholder=\"Nombre completo\" required>\n <\/div>\n <div class=\"form-group\">\n <label>\ud83d\udcfa Medio \/ Organizaci\u00f3n<\/label>\n <input name=\"organizacion\" placeholder=\"Nombre del medio o evento\" required>\n <\/div>\n <div class=\"form-group\">\n <label>\ud83c\udfac Tema del evento<\/label>\n <input name=\"tema\" placeholder=\"\u00bfDe qu\u00e9 trata?\" required>\n <\/div>\n <div class=\"form-group\">\n <label>\ud83d\udcf1 Contacto<\/label>\n <input name=\"contacto\" placeholder=\"Tel\u00e9fono o email\" required>\n <\/div>\n <button type=\"submit\" class=\"btn-primary\">Enviar Invitaci\u00f3n \u2192<\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n <div class=\"nav-buttons\">\n <button class=\"btn-secondary\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <!-- CHAT -->\n <div id=\"chat-container\">\n <div class=\"chat-header\">\n <div class=\"chat-header-avatar\">\ud83e\udd16<\/div>\n <div class=\"chat-header-info\">\n <h2>GENDI<\/h2>\n <p>En l\u00ednea - G\u00e9nero y Desarrollo A.C.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"chat-messages\" id=\"chatMessages\"><\/div>\n\n <div class=\"chat-input-area\" id=\"chatInputArea\" style=\"display:none;\">\n <button class=\"btn-secondary\" onclick=\"goBackInChat()\" style=\"padding: 12px 14px; border-radius: 22px; flex: 0 0 auto; font-size: 0.9rem;\">\u2190 Volver<\/button>\n\n <!-- Selector de pa\u00eds (solo en tel\u00e9fono) -->\n <select id=\"countryCode\" style=\"display:none;\">\n <option value=\"+52\" selected>\ud83c\uddf2\ud83c\uddfd +52<\/option>\n <option value=\"+502\">\ud83c\uddec\ud83c\uddf9 +502<\/option>\n <option value=\"+503\">\ud83c\uddf8\ud83c\uddfb +503<\/option>\n <option value=\"+504\">\ud83c\udded\ud83c\uddf3 +504<\/option>\n <option value=\"+505\">\ud83c\uddf3\ud83c\uddee +505<\/option>\n <option value=\"+506\">\ud83c\udde8\ud83c\uddf7 +506<\/option>\n <option value=\"+507\">\ud83c\uddf5\ud83c\udde6 +507<\/option>\n <option value=\"+57\">\ud83c\udde8\ud83c\uddf4 +57<\/option>\n <option value=\"+51\">\ud83c\uddf5\ud83c\uddea +51<\/option>\n <option value=\"+56\">\ud83c\udde8\ud83c\uddf1 +56<\/option>\n <option value=\"+54\">\ud83c\udde6\ud83c\uddf7 +54<\/option>\n <option value=\"+58\">\ud83c\uddfb\ud83c\uddea +58<\/option>\n <option value=\"+1\">\ud83c\uddfa\ud83c\uddf8 +1<\/option>\n <option value=\"+34\">\ud83c\uddea\ud83c\uddf8 +34<\/option>\n <\/select>\n\n <!-- Selector de edad (solo en edad) -->\n <select id=\"ageSelect\" style=\"display:none;\"><\/select>\n\n <input type=\"text\" id=\"chatInput\" placeholder=\"Escribe tu respuesta...\" \/>\n <button class=\"chat-send-btn\" id=\"chatSendBtn\" onclick=\"sendChatInput()\">\u27a4<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n\n <script>\n \/\/ =============================\n \/\/ CONFIG\n \/\/ =============================\n const WEBHOOK_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbyzXf7G2gVPUNa2Qw97pPtrsZcSKiWEmHtjWl5_q6PL4Ecc2-YKtRM6LqukLVHRjOQb\/exec\";\n\n \/\/ Env\u00edo sin CORS\/preflight (WordPress + Apps Script)\n function sendToAppsScript(payload){\n const normalized = {\n ...payload,\n contacto: payload.contacto || payload.telefono || payload.email || payload.correo || \"\",\n nombre: payload.nombre || payload.nombre_participante || payload.nombre_menor || \"\"\n };\n\n return fetch(WEBHOOK_URL, {\n method: \"POST\",\n mode: \"no-cors\",\n headers: { \"Content-Type\": \"text\/plain;charset=utf-8\" },\n body: JSON.stringify(normalized)\n });\n }\n\n \/\/ =============================\n \/\/ STATE\n \/\/ =============================\n let currentMode = null;\n let screenHistory = ['screen-menu'];\n let formData = { category:'', subType:'', sector:'', tipo:'', modalidad:'' };\n\n let chatState = { step:'menu', flow:null, data:{}, questionIndex:0, currentQuestion:null };\n\n const chatFlows = {\n grupos: {\n questions: [\n { field: 'subType', text: '\u00bfPara qui\u00e9n es el grupo?', type: 'options', options: ['Para m\u00ed', 'Para conocido'] },\n { field: 'nombre', text: '\u00bfCu\u00e1l es tu nombre completo?', type: 'input', validation: 'text' },\n { field: 'contacto_tipo', text: '\u00bfC\u00f3mo prefieres que te contactemos?', type: 'options', options: ['WhatsApp\/Tel\u00e9fono', 'Email', 'Ambos'] },\n { field: 'telefono', text: '\u00bfCu\u00e1l es tu n\u00famero de tel\u00e9fono?', type: 'input', validation: 'phone', conditional: (data) => data.contacto_tipo !== 'Email' },\n { field: 'email', text: '\u00bfCu\u00e1l es tu email?', type: 'input', validation: 'email', conditional: (data) => data.contacto_tipo !== 'WhatsApp\/Tel\u00e9fono' },\n { field: 'comentario', text: '\u00bfQuieres agregar alg\u00fan comentario? (Escribe \"no\" para omitir)', type: 'input', optional: true }\n ],\n category: 'GRUPOS_HOMBRES'\n },\n terapia: {\n questions: [\n { field: 'subType', text: '\u00bfPara qui\u00e9n es la terapia?', type: 'options', options: ['Para m\u00ed', 'Para menor de edad'] },\n { field: 'nombre', text: '\u00bfCu\u00e1l es el nombre completo del paciente?', type: 'input', validation: 'text' },\n { field: 'edad', text: '\u00bfCu\u00e1l es la edad?', type: 'age-select' },\n { field: 'contacto_tipo', text: '\u00bfC\u00f3mo prefieres que te contactemos?', type: 'options', options: ['WhatsApp\/Tel\u00e9fono', 'Email', 'Ambos'] },\n { field: 'telefono', text: '\u00bfCu\u00e1l es tu n\u00famero de tel\u00e9fono?', type: 'input', validation: 'phone', conditional: (data) => data.contacto_tipo !== 'Email' },\n { field: 'email', text: '\u00bfCu\u00e1l es tu email?', type: 'input', validation: 'email', conditional: (data) => data.contacto_tipo !== 'WhatsApp\/Tel\u00e9fono' }\n ],\n category: 'TERAPIA_INDIVIDUAL'\n },\n servicios: {\n questions: [\n { field: 'sector', text: '\u00bfA qu\u00e9 sector perteneces?', type: 'options', options: ['Educativo', 'Civil', 'Empresa'] },\n { field: 'tipo', text: '\u00bfQu\u00e9 servicio requieres?', type: 'options', options: ['Taller', 'Consultor\u00eda', 'Conferencia'] },\n { field: 'modalidad', text: '\u00bfEn qu\u00e9 modalidad?', type: 'options', options: ['Presencial', 'Virtual', 'H\u00edbrida'] },\n { field: 'dirigido_a', text: '\u00bfA qui\u00e9n va dirigido el servicio? (Ej: Estudiantes, empleados, comunidad)', type: 'input', validation: 'text' },\n { field: 'contacto_tipo', text: '\u00bfC\u00f3mo prefieres que te contactemos?', type: 'options', options: ['WhatsApp\/Tel\u00e9fono', 'Email', 'Ambos'] },\n { field: 'telefono', text: '\u00bfCu\u00e1l es tu n\u00famero de tel\u00e9fono?', type: 'input', validation: 'phone', conditional: (data) => data.contacto_tipo !== 'Email' },\n { field: 'email', text: '\u00bfCu\u00e1l es tu email?', type: 'input', validation: 'email', conditional: (data) => data.contacto_tipo !== 'WhatsApp\/Tel\u00e9fono' }\n ],\n category: 'SERVICIOS_ALIANZAS'\n },\n medios: {\n questions: [\n { field: 'nombre', text: '\u00bfCu\u00e1l es tu nombre completo?', type: 'input', validation: 'text' },\n { field: 'organizacion', text: '\u00bfDe qu\u00e9 medio u organizaci\u00f3n eres?', type: 'input', validation: 'text' },\n { field: 'tema', text: '\u00bfCu\u00e1l es el tema del evento?', type: 'input', validation: 'text' },\n { field: 'contacto_tipo', text: '\u00bfC\u00f3mo prefieres que te contactemos?', type: 'options', options: ['WhatsApp\/Tel\u00e9fono', 'Email', 'Ambos'] },\n { field: 'telefono', text: '\u00bfCu\u00e1l es tu n\u00famero de tel\u00e9fono?', type: 'input', validation: 'phone', conditional: (data) => data.contacto_tipo !== 'Email' },\n { field: 'email', text: '\u00bfCu\u00e1l es tu email?', type: 'input', validation: 'email', conditional: (data) => data.contacto_tipo !== 'WhatsApp\/Tel\u00e9fono' }\n ],\n category: 'MEDIOS_EVENTOS'\n }\n };\n\n \/\/ =============================\n \/\/ MODE SELECTOR\n \/\/ =============================\n function selectMode(mode){\n currentMode = mode;\n document.getElementById('mode-selector').style.display = 'none';\n if (mode === 'typeform') {\n document.getElementById('gendi-container').classList.add('active');\n } else {\n document.getElementById('chat-container').classList.add('active');\n initChat();\n }\n }\n\n \/\/ =============================\n \/\/ TYPEFORM NAV\n \/\/ =============================\n function showScreen(screenId){\n document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));\n document.querySelector('.loader-screen').classList.remove('active');\n document.querySelector('.success-screen').classList.remove('active');\n\n const screen = document.getElementById(screenId);\n if (screen) {\n screen.classList.add('active');\n if (screenHistory[screenHistory.length - 1] !== screenId) screenHistory.push(screenId);\n updateProgress();\n }\n }\n\n function goBack(){\n if (screenHistory.length > 1) {\n screenHistory.pop();\n const prev = screenHistory[screenHistory.length - 1];\n document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));\n document.getElementById(prev).classList.add('active');\n updateProgress();\n }\n }\n\n function setData(key, value){ formData[key] = value; }\n\n function updateProgress(){\n const totalScreens = 8;\n const currentIndex = screenHistory.length;\n const pct = Math.min((currentIndex \/ totalScreens) * 100, 100);\n document.getElementById('progressBar').style.width = pct + '%';\n }\n\n function handleSubmit(event, category){\n event.preventDefault();\n\n document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));\n document.getElementById('screen-loading').classList.add('active');\n\n const form = event.target;\n const formObject = Object.fromEntries(new FormData(form).entries());\n\n const finalData = {\n ...formData,\n ...formObject,\n category,\n timestamp: new Date().toISOString(),\n mode: 'typeform'\n };\n\n sendToAppsScript(finalData)\n .then(() => {\n setTimeout(() => {\n document.getElementById('screen-loading').classList.remove('active');\n document.getElementById('screen-success').classList.add('active');\n }, 700);\n })\n .catch(err => {\n console.error('Typeform submit error:', err);\n document.getElementById('screen-loading').classList.remove('active');\n alert('No se pudo enviar. Revisa tu conexi\u00f3n e int\u00e9ntalo de nuevo.');\n showScreen('screen-menu');\n });\n }\n\n function logAction(category, detail){\n sendToAppsScript({ category, detalle: detail, timestamp: new Date().toISOString(), mode: 'log' });\n }\n\n function resetApp(){ location.reload(); }\n\n \/\/ =============================\n \/\/ CHAT\n \/\/ =============================\n function initChat(){\n setTimeout(() => {\n addBotMessage('\ud83d\udc4b', '\u00a1Hola! Soy GENDI, tu asistente virtual.');\n setTimeout(() => showMainMenu(), 900);\n }, 300);\n }\n\n function addBotMessage(emoji, text, options=null){\n const messagesDiv = document.getElementById('chatMessages');\n\n const typingDiv = document.createElement('div');\n typingDiv.className = 'chat-message bot';\n typingDiv.innerHTML = `\n <div class=\"message-bubble\">\n <div class=\"typing-indicator\">\n <div class=\"typing-dot\"><\/div>\n <div class=\"typing-dot\"><\/div>\n <div class=\"typing-dot\"><\/div>\n <\/div>\n <\/div>`;\n messagesDiv.appendChild(typingDiv);\n scrollToBottom();\n\n setTimeout(() => {\n typingDiv.remove();\n\n const messageDiv = document.createElement('div');\n messageDiv.className = 'chat-message bot';\n\n let html = `\n <div class=\"message-bubble\">\n ${emoji ? `<span class=\"emoji\">${emoji}<\/span>` : ''}\n <p>${text}<\/p>\n <div class=\"message-time\">${new Date().toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' })}<\/div>\n `;\n\n if (options) {\n html += '<div class=\"chat-options\">';\n options.forEach(opt => {\n html += `<button class=\"chat-option-btn\" data-value=\"${opt.value}\" data-label=\"${opt.label}\">\n <span class=\"emoji\">${opt.emoji}<\/span><span>${opt.label}<\/span>\n <\/button>`;\n });\n html += '<\/div>';\n }\n\n html += '<\/div>';\n messageDiv.innerHTML = html;\n messagesDiv.appendChild(messageDiv);\n\n if (options) {\n messageDiv.querySelectorAll('.chat-option-btn').forEach(btn => {\n btn.addEventListener('click', function(){\n handleChatOption(this.getAttribute('data-value'), this.getAttribute('data-label'));\n });\n });\n }\n\n scrollToBottom();\n }, 800);\n }\n\n function addUserMessage(text){\n const messagesDiv = document.getElementById('chatMessages');\n const messageDiv = document.createElement('div');\n messageDiv.className = 'chat-message user';\n messageDiv.innerHTML = `\n <div class=\"message-bubble\">\n <p>${text}<\/p>\n <div class=\"message-time\">${new Date().toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' })}<\/div>\n <\/div>`;\n messagesDiv.appendChild(messageDiv);\n scrollToBottom();\n }\n\n function scrollToBottom(){\n const messagesDiv = document.getElementById('chatMessages');\n messagesDiv.scrollTop = messagesDiv.scrollHeight;\n }\n\n function showMainMenu(){\n chatState = { step:'menu', flow:null, data:{}, questionIndex:0, currentQuestion:null };\n\n addBotMessage('\ud83c\udfaf', '\u00bfC\u00f3mo puedo ayudarte hoy?', [\n { emoji: '\ud83d\udcde', label: 'L\u00ednea Telef\u00f3nica 24\/7', value: 'linea' },\n { emoji: '\ud83d\udc65', label: 'Grupos para Hombres', value: 'grupos' },\n { emoji: '\ud83e\udde0', label: 'Terapia Individual', value: 'terapia' },\n { emoji: '\ud83d\ude80', label: 'Servicios y Alianzas', value: 'servicios' },\n { emoji: '\ud83d\udce3', label: 'Medios y Eventos', value: 'medios' }\n ]);\n }\n\n function handleChatOption(value, label){\n addUserMessage(label);\n\n document.querySelectorAll('.chat-option-btn').forEach(btn => {\n btn.disabled = true;\n btn.style.opacity = '0.55';\n btn.style.cursor = 'not-allowed';\n });\n\n if (value === 'menu') { setTimeout(() => showMainMenu(), 400); return; }\n if (value === 'end') { addBotMessage('\ud83d\udc4b', '\u00a1Gracias por contactarnos!'); return; }\n\n if (value === 'linea') { showPhoneLine(); return; }\n\n \/\/ opci\u00f3n dentro de un flujo\n if (chatState.flow && chatFlows[chatState.flow]) {\n const flow = chatFlows[chatState.flow];\n const q = flow.questions[chatState.questionIndex];\n if (q && q.type === 'options') {\n chatState.data[q.field] = value;\n chatState.questionIndex++;\n askNextQuestion();\n return;\n }\n }\n\n \/\/ iniciar flujo\n if (chatFlows[value]) {\n chatState.flow = value;\n chatState.questionIndex = 0;\n chatState.data = { category: chatFlows[value].category };\n askNextQuestion();\n return;\n }\n\n addBotMessage('\u274c', 'Hubo un error. Intenta de nuevo.');\n setTimeout(() => showMainMenu(), 1200);\n }\n\n function showPhoneLine(){\n addBotMessage('\ud83d\udcde', 'L\u00ednea de Apoyo disponible 24\/7, los 365 d\u00edas del a\u00f1o. Es gratuita y confidencial.');\n setTimeout(() => {\n const messagesDiv = document.getElementById('chatMessages');\n const callDiv = document.createElement('div');\n callDiv.className = 'chat-message bot';\n callDiv.innerHTML = `\n <div class=\"message-bubble\">\n <div class=\"chat-call-bubble\">\n <div style=\"font-size:2rem;\">\u260e\ufe0f<\/div>\n <div class=\"phone\">55 4757 9288<\/div>\n <a href=\"tel:+525547579288\" onclick=\"logAction('LINEA_TELEFONICA','Llamada')\">\ud83d\udcf1 Llamar Ahora<\/a>\n <\/div>\n <\/div>`;\n messagesDiv.appendChild(callDiv);\n scrollToBottom();\n\n setTimeout(() => {\n addBotMessage('\ud83e\udd1d', '\u00bfNecesitas algo m\u00e1s?', [\n { emoji:'\ud83c\udfe0', label:'Volver al men\u00fa', value:'menu' }\n ]);\n }, 600);\n }, 700);\n }\n\n function askNextQuestion(){\n if (!chatState.flow || !chatFlows[chatState.flow]) { showMainMenu(); return; }\n const flow = chatFlows[chatState.flow];\n\n while (chatState.questionIndex < flow.questions.length) {\n const q = flow.questions[chatState.questionIndex];\n if (q.conditional && !q.conditional(chatState.data)) {\n chatState.questionIndex++;\n continue;\n }\n break;\n }\n\n if (chatState.questionIndex >= flow.questions.length) {\n submitChatData();\n return;\n }\n\n const question = flow.questions[chatState.questionIndex];\n\n if (question.type === 'options') {\n const options = question.options.map(opt => ({ emoji: getEmojiForOption(opt), label: opt, value: opt }));\n addBotMessage('\u2753', question.text, options);\n return;\n }\n\n \/\/ Edad como dropdown (no 100 botones)\n if (question.type === 'age-select') {\n addBotMessage('\ud83c\udf82', question.text + \"\\n\\nSelecciona una edad en el men\u00fa.\");\n showChatInput({ ...question, validation: 'age' });\n return;\n }\n\n \/\/ input normal\n let prompt = question.text;\n if (question.validation === 'phone') prompt += \"\\n\\n\ud83d\udca1 Escribe solo n\u00fameros. Ej: 5512345678\";\n if (question.validation === 'email') prompt += \"\\n\\n\ud83d\udca1 Formato: ejemplo@correo.com\";\n if (question.optional) prompt += \"\\n\\n(Opcional - escribe \\\"no\\\" para omitir)\";\n addBotMessage('\u270d\ufe0f', prompt);\n showChatInput(question);\n }\n\n function getEmojiForOption(option){\n const map = {\n 'Para m\u00ed': '\ud83d\ude4b\u200d\u2642\ufe0f', 'Para conocido': '\ud83e\udd1d', 'Para menor de edad': '\ud83d\udc76',\n 'Educativo': '\ud83c\udf93', 'Civil': '\ud83e\udd32', 'Empresa': '\ud83d\udcbc',\n 'Taller': '\ud83c\udfaf', 'Consultor\u00eda': '\ud83d\udca1', 'Conferencia': '\ud83c\udfa4',\n 'Presencial': '\ud83c\udfdb\ufe0f', 'Virtual': '\ud83d\udcbb', 'H\u00edbrida': '\ud83d\udd04',\n 'WhatsApp\/Tel\u00e9fono': '\ud83d\udcf1', 'Email': '\ud83d\udce7', 'Ambos': '\ud83d\udcde'\n };\n return map[option] || '\ud83d\udccc';\n }\n\n function showChatInput(question){\n chatState.currentQuestion = question;\n\n const inputArea = document.getElementById('chatInputArea');\n const input = document.getElementById('chatInput');\n const countryCode = document.getElementById('countryCode');\n const ageSelect = document.getElementById('ageSelect');\n\n inputArea.style.display = 'flex';\n\n \/\/ defaults\n countryCode.style.display = 'none';\n ageSelect.style.display = 'none';\n input.style.display = 'block';\n\n if (question && question.validation === 'phone') {\n input.placeholder = '5512345678';\n input.type = 'tel';\n countryCode.style.display = 'block';\n input.focus();\n return;\n }\n\n if (question && question.validation === 'email') {\n input.placeholder = 'ejemplo@correo.com';\n input.type = 'email';\n input.focus();\n return;\n }\n\n if (question && question.validation === 'age') {\n \/\/ edad via dropdown\n input.style.display = 'none';\n ageSelect.style.display = 'block';\n\n if (!ageSelect.dataset.filled) {\n ageSelect.innerHTML = '';\n const ph = document.createElement('option');\n ph.value = '';\n ph.textContent = 'Edad';\n ph.disabled = true;\n ph.selected = true;\n ageSelect.appendChild(ph);\n for (let i=1;i<=100;i++){\n const opt = document.createElement('option');\n opt.value = String(i);\n opt.textContent = i + ' a\u00f1os';\n ageSelect.appendChild(opt);\n }\n ageSelect.dataset.filled = '1';\n }\n\n ageSelect.focus();\n return;\n }\n\n input.placeholder = 'Escribe tu respuesta...';\n input.type = 'text';\n input.focus();\n }\n\n function hideChatInput(){\n document.getElementById('chatInputArea').style.display = 'none';\n document.getElementById('chatInput').value = '';\n const ageSelect = document.getElementById('ageSelect');\n if (ageSelect) ageSelect.value = '';\n }\n\n function goBackInChat(){\n if (!chatState.flow) { showMainMenu(); return; }\n const flow = chatFlows[chatState.flow];\n\n if (chatState.questionIndex > 0) {\n hideChatInput();\n chatState.questionIndex--;\n\n while (chatState.questionIndex > 0) {\n const q = flow.questions[chatState.questionIndex];\n if (q.conditional && !q.conditional(chatState.data)) chatState.questionIndex--;\n else break;\n }\n\n const q = flow.questions[chatState.questionIndex];\n delete chatState.data[q.field];\n\n addBotMessage('\ud83d\udd19', 'Ok, volvamos a la pregunta anterior...');\n setTimeout(() => askNextQuestion(), 700);\n } else {\n addBotMessage('\u2139\ufe0f', '\u00bfPrefieres volver al men\u00fa principal?', [\n { emoji:'\ud83c\udfe0', label:'S\u00ed, volver al men\u00fa', value:'menu' }\n ]);\n }\n }\n\n function validateInput(value, type, countryCode=null){\n if (!type) return { valid: true };\n\n switch(type){\n case 'email': {\n const re = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n return re.test(value) ? { valid:true } : { valid:false, message:'\u274c Email inv\u00e1lido (ejemplo@correo.com)' };\n }\n case 'phone': {\n const clean = String(value).replace(\/[^\\d]\/g,'');\n if (!\/^\\d{10}$\/.test(clean)) return { valid:false, message:'\u274c Deben ser 10 d\u00edgitos. Ej: 5512345678' };\n return { valid:true, normalized: `${countryCode} ${clean}` };\n }\n case 'text': {\n return value.trim().length >= 2 ? { valid:true } : { valid:false, message:'\u274c Escribe al menos 2 caracteres' };\n }\n case 'age': {\n const n = Number(value);\n if (!Number.isFinite(n) || n < 1 || n > 120) return { valid:false, message:'\u274c Selecciona una edad v\u00e1lida' };\n return { valid:true, normalized: String(n) };\n }\n default:\n return { valid:true };\n }\n }\n\n function sendChatInput(){\n const input = document.getElementById('chatInput');\n const countrySelect = document.getElementById('countryCode');\n const ageSelect = document.getElementById('ageSelect');\n\n if (!chatState.flow || !chatFlows[chatState.flow]) return;\n const flow = chatFlows[chatState.flow];\n const question = flow.questions[chatState.questionIndex];\n\n let value = (input.value || '').trim();\n\n \/\/ si es edad, tomamos del dropdown\n if (question && question.type === 'age-select') {\n value = ageSelect && ageSelect.value ? ageSelect.value : '';\n }\n\n if (!value) return;\n\n \/\/ opcional\n if (question && question.optional && ['no','omitir','skip'].includes(value.toLowerCase())) {\n addUserMessage(value);\n hideChatInput();\n chatState.data[question.field] = '';\n chatState.questionIndex++;\n askNextQuestion();\n return;\n }\n\n const countryCode = (question && question.validation === 'phone') ? countrySelect.value : null;\n const validation = validateInput(value, question ? (question.type === 'age-select' ? 'age' : question.validation) : null, countryCode);\n\n if (!validation.valid) {\n addBotMessage('\u26a0\ufe0f', validation.message);\n input.value = '';\n input.focus();\n return;\n }\n\n const displayValue = validation.normalized || value;\n addUserMessage(displayValue);\n hideChatInput();\n\n chatState.data[question.field] = validation.normalized || value;\n chatState.questionIndex++;\n askNextQuestion();\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n const chatInput = document.getElementById('chatInput');\n if (chatInput) {\n chatInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n sendChatInput();\n }\n });\n }\n });\n\n function submitChatData(){\n addBotMessage('\u23f3', 'Perfecto, d\u00e9jame procesar tu informaci\u00f3n...');\n\n const finalData = { ...chatState.data, timestamp: new Date().toISOString(), mode:'chat' };\n\n sendToAppsScript(finalData)\n .then(() => {\n setTimeout(() => {\n addBotMessage('\u2705', '\u00a1Listo! Hemos recibido tu solicitud. Nos pondremos en contacto contigo muy pronto.');\n chatState = { step:'menu', flow:null, data:{}, questionIndex:0, currentQuestion:null };\n setTimeout(() => {\n addBotMessage('\ud83e\udd1d', '\u00bfHay algo m\u00e1s en lo que pueda ayudarte?', [\n { emoji:'\ud83c\udfe0', label:'Volver al men\u00fa', value:'menu' },\n { emoji:'\ud83d\udc4b', label:'Finalizar conversaci\u00f3n', value:'end' }\n ]);\n }, 1000);\n }, 700);\n })\n .catch(err => {\n console.error('submitChatData error:', err);\n addBotMessage('\u274c', 'No se pudo enviar (parece un problema de conexi\u00f3n). Intenta de nuevo o usa la l\u00ednea telef\u00f3nica.');\n setTimeout(() => showMainMenu(), 1500);\n });\n }\n\n updateProgress();\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>GENDI – Ayuda con Perspectiva de G\u00e9nero \ud83e\udd16 GENDI Elige c\u00f3mo quieres interactuar \ud83d\udccb Modo Formulario Pantallas paso a paso \ud83d\udcac Modo Chat Conversaci\u00f3n interactiva \ud83e\udd16 GENDI G\u00e9nero y Desarrollo A.C. Enviando tu solicitud… Un momento por favor \u23f3 \u2705 \u00a1Solicitud Recibida! Nos pondremos en contacto contigo muy pronto. Finalizar \ud83d\udc4b \u00bfC\u00f3mo podemos ayudarte hoy? […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-3121","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Test - TuConsejeria<\/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:\/\/tuconsejeria.com\/en\/test\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Test - TuConsejeria\" \/>\n<meta property=\"og:description\" content=\"GENDI – Ayuda con Perspectiva de G\u00e9nero \ud83e\udd16 GENDI Elige c\u00f3mo quieres interactuar \ud83d\udccb Modo Formulario Pantallas paso a paso \ud83d\udcac Modo Chat Conversaci\u00f3n interactiva \ud83e\udd16 GENDI G\u00e9nero y Desarrollo A.C. Enviando tu solicitud… Un momento por favor \u23f3 \u2705 \u00a1Solicitud Recibida! Nos pondremos en contacto contigo muy pronto. Finalizar \ud83d\udc4b \u00bfC\u00f3mo podemos ayudarte hoy? […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tuconsejeria.com\/en\/test\/\" \/>\n<meta property=\"og:site_name\" content=\"TuConsejeria\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-30T23:11:45+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tuconsejeria.com\/test\/\",\"url\":\"https:\/\/tuconsejeria.com\/test\/\",\"name\":\"Test - TuConsejeria\",\"isPartOf\":{\"@id\":\"https:\/\/www.tuconsejeria.com\/#website\"},\"datePublished\":\"2026-01-30T04:53:31+00:00\",\"dateModified\":\"2026-01-30T23:11:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/tuconsejeria.com\/test\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tuconsejeria.com\/test\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tuconsejeria.com\/test\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.tuconsejeria.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Test\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tuconsejeria.com\/#website\",\"url\":\"https:\/\/www.tuconsejeria.com\/\",\"name\":\"TuConsejeria\",\"description\":\"Promovemos el bienestar emocional y psicol\u00f3gico a grupos vulnerables y desatendidos abordando sus necesidades espec\u00edficas.\",\"publisher\":{\"@id\":\"https:\/\/www.tuconsejeria.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.tuconsejeria.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.tuconsejeria.com\/#organization\",\"name\":\"TuConsejeria\",\"url\":\"https:\/\/www.tuconsejeria.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.tuconsejeria.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/tuconsejeria.com\/wp-content\/uploads\/2024\/11\/e37b110cd866adacdf88851140929316.svg\",\"contentUrl\":\"https:\/\/tuconsejeria.com\/wp-content\/uploads\/2024\/11\/e37b110cd866adacdf88851140929316.svg\",\"width\":184,\"height\":30,\"caption\":\"TuConsejeria\"},\"image\":{\"@id\":\"https:\/\/www.tuconsejeria.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Test - TuConsejeria","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:\/\/tuconsejeria.com\/en\/test\/","og_locale":"en_US","og_type":"article","og_title":"Test - TuConsejeria","og_description":"GENDI – Ayuda con Perspectiva de G\u00e9nero \ud83e\udd16 GENDI Elige c\u00f3mo quieres interactuar \ud83d\udccb Modo Formulario Pantallas paso a paso \ud83d\udcac Modo Chat Conversaci\u00f3n interactiva \ud83e\udd16 GENDI G\u00e9nero y Desarrollo A.C. Enviando tu solicitud… Un momento por favor \u23f3 \u2705 \u00a1Solicitud Recibida! Nos pondremos en contacto contigo muy pronto. Finalizar \ud83d\udc4b \u00bfC\u00f3mo podemos ayudarte hoy? […]","og_url":"https:\/\/tuconsejeria.com\/en\/test\/","og_site_name":"TuConsejeria","article_modified_time":"2026-01-30T23:11:45+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tuconsejeria.com\/test\/","url":"https:\/\/tuconsejeria.com\/test\/","name":"Test - TuConsejeria","isPartOf":{"@id":"https:\/\/www.tuconsejeria.com\/#website"},"datePublished":"2026-01-30T04:53:31+00:00","dateModified":"2026-01-30T23:11:45+00:00","breadcrumb":{"@id":"https:\/\/tuconsejeria.com\/test\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tuconsejeria.com\/test\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tuconsejeria.com\/test\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.tuconsejeria.com\/"},{"@type":"ListItem","position":2,"name":"Test"}]},{"@type":"WebSite","@id":"https:\/\/www.tuconsejeria.com\/#website","url":"https:\/\/www.tuconsejeria.com\/","name":"TuConsejeria","description":"Promovemos el bienestar emocional y psicol\u00f3gico a grupos vulnerables y desatendidos abordando sus necesidades espec\u00edficas.","publisher":{"@id":"https:\/\/www.tuconsejeria.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tuconsejeria.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.tuconsejeria.com\/#organization","name":"TuConsejeria","url":"https:\/\/www.tuconsejeria.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tuconsejeria.com\/#\/schema\/logo\/image\/","url":"https:\/\/tuconsejeria.com\/wp-content\/uploads\/2024\/11\/e37b110cd866adacdf88851140929316.svg","contentUrl":"https:\/\/tuconsejeria.com\/wp-content\/uploads\/2024\/11\/e37b110cd866adacdf88851140929316.svg","width":184,"height":30,"caption":"TuConsejeria"},"image":{"@id":"https:\/\/www.tuconsejeria.com\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tuconsejeria.com\/en\/wp-json\/wp\/v2\/pages\/3121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tuconsejeria.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tuconsejeria.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tuconsejeria.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tuconsejeria.com\/en\/wp-json\/wp\/v2\/comments?post=3121"}],"version-history":[{"count":22,"href":"https:\/\/tuconsejeria.com\/en\/wp-json\/wp\/v2\/pages\/3121\/revisions"}],"predecessor-version":[{"id":3145,"href":"https:\/\/tuconsejeria.com\/en\/wp-json\/wp\/v2\/pages\/3121\/revisions\/3145"}],"wp:attachment":[{"href":"https:\/\/tuconsejeria.com\/en\/wp-json\/wp\/v2\/media?parent=3121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}