{"id":24784,"date":"2024-03-02T09:03:25","date_gmt":"2024-03-02T17:03:25","guid":{"rendered":"https:\/\/home.ievolutionpro.com\/?page_id=24784"},"modified":"2025-10-24T22:15:29","modified_gmt":"2025-10-25T05:15:29","slug":"c_recov_pw","status":"publish","type":"page","link":"https:\/\/vida-sabia.com\/es\/c_recov_pw\/","title":{"rendered":"c_recov_pw"},"content":{"rendered":"
\n\t\t\t\t
\n\t\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 Vida Sabia - Recuperar Contrase\u00f1a<\/title>\n <style>\n \/* \u2500\u2500\u2500 Modern Font Stack with Elegant Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: #ffffff;\n color: #1a1a2e;\n overflow-x: hidden;\n position: relative;\n min-height: 100vh;\n font-weight: 400;\n letter-spacing: -0.011em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n \/* \u2500\u2500\u2500 Vida Sabia Light Background with Gradient Mesh \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n body::before {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: \n linear-gradient(135deg, #ffffff 0%, #f8fdf9 50%, #f1f8f3 100%),\n radial-gradient(ellipse at top left, rgba(124, 179, 66, 0.08) 0%, transparent 50%),\n radial-gradient(ellipse at bottom right, rgba(45, 122, 62, 0.08) 0%, transparent 50%),\n radial-gradient(ellipse at center, rgba(197, 225, 165, 0.06) 0%, transparent 50%);\n z-index: -2;\n }\n\n \/* Grid pattern overlay - subtle *\/\n body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n linear-gradient(rgba(45, 122, 62, 0.02) 1px, transparent 1px),\n linear-gradient(90deg, rgba(45, 122, 62, 0.02) 1px, transparent 1px);\n background-size: 60px 60px;\n z-index: -1;\n }\n\n \/* Floating gradient orbs *\/\n .gradient-orb {\n position: fixed;\n border-radius: 50%;\n filter: blur(100px);\n opacity: 0.15;\n animation: floatOrb 25s infinite ease-in-out;\n z-index: -1;\n }\n\n .orb1 {\n width: 600px;\n height: 600px;\n background: radial-gradient(circle, rgba(124, 179, 66, 0.3) 0%, transparent 70%);\n top: -300px;\n right: -300px;\n animation-delay: 0s;\n }\n\n .orb2 {\n width: 500px;\n height: 500px;\n background: radial-gradient(circle, rgba(45, 122, 62, 0.25) 0%, transparent 70%);\n bottom: -250px;\n left: -250px;\n animation-delay: 10s;\n }\n\n .orb3 {\n width: 400px;\n height: 400px;\n background: radial-gradient(circle, rgba(197, 225, 165, 0.3) 0%, transparent 70%);\n top: 50%;\n left: 50%;\n animation-delay: 15s;\n }\n\n \/* \u2500\u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n @keyframes floatOrb {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 25% { transform: translate(30px, -30px) scale(1.05); }\n 50% { transform: translate(-20px, 20px) scale(0.95); }\n 75% { transform: translate(25px, 25px) scale(1.02); }\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes shimmer {\n 0% { \n background-position: -1000px 0;\n }\n 100% { \n background-position: 1000px 0;\n }\n }\n\n \/* \u2500\u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .c_login_container {\n display: flex !important;\n justify-content: center !important;\n align-items: center !important;\n min-height: 100vh;\n padding: 2rem;\n position: relative;\n z-index: 1;\n }\n\n \/* \u2500\u2500\u2500 Card with Enhanced Glassmorphism \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .card {\n position: relative;\n width: 100%;\n max-width: 500px;\n background: rgba(255, 255, 255, 0.85);\n backdrop-filter: blur(40px) saturate(150%);\n -webkit-backdrop-filter: blur(40px) saturate(150%);\n border: 1px solid rgba(124, 179, 66, 0.2);\n border-radius: 32px;\n padding: 3rem 2.5rem;\n box-shadow: \n 0 30px 60px rgba(45, 122, 62, 0.15),\n 0 0 0 1px rgba(124, 179, 66, 0.1) inset,\n 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;\n animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.320, 1);\n overflow: visible;\n z-index: 1;\n }\n\n \/* Subtle gradient border *\/\n .card::before {\n content: '';\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border-radius: 32px;\n background: linear-gradient(135deg, \n rgba(124, 179, 66, 0.4) 0%, \n rgba(45, 122, 62, 0.4) 50%,\n rgba(197, 225, 165, 0.4) 100%);\n z-index: -1;\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n\n .card:hover::before {\n opacity: 1;\n }\n\n \/* \u2500\u2500\u2500 Logo Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .logo-container {\n text-align: center;\n margin-bottom: 2.5rem;\n animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.320, 1) 0.1s both;\n }\n\n .logo-container a {\n display: inline-block;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n }\n\n .logo-container a:hover {\n transform: scale(1.05) translateY(-2px);\n }\n\n .card-img-top {\n display: block !important;\n max-width: 200px !important;\n height: auto;\n margin: 3rem auto 2rem !important;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n }\n\n .card-img-top:hover {\n transform: scale(1.05) translateY(-2px);\n }\n\n .logo-subtitle {\n color: #2d7a3e;\n font-size: 0.75rem;\n font-weight: 500;\n letter-spacing: 0.2em;\n margin-top: 1rem;\n text-transform: uppercase;\n font-family: 'Space Grotesk', sans-serif;\n background: linear-gradient(90deg, #7cb342, #2d7a3e, #9ccc65);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n background-size: 200% auto;\n animation: shimmer 3s linear infinite;\n }\n\n \/* \u2500\u2500\u2500 Form Title \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .form-title {\n text-align: center;\n margin-bottom: 2rem;\n animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.320, 1) 0.2s both;\n }\n\n .form-title h2 {\n font-size: 1.75rem;\n font-weight: 600;\n color: #1a1a2e;\n margin-bottom: 0.5rem;\n letter-spacing: -0.03em;\n font-family: 'Space Grotesk', sans-serif;\n line-height: 1.2;\n }\n\n .form-title p {\n color: #4a5568;\n font-size: 0.9rem;\n font-weight: 400;\n line-height: 1.6;\n letter-spacing: -0.01em;\n }\n\n \/* \u2500\u2500\u2500 Form Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .form-group {\n margin-bottom: 1.5rem;\n animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.320, 1) 0.3s both;\n }\n\n .form-group label {\n display: block;\n font-weight: 500;\n font-size: 0.875rem;\n color: #1a1a2e;\n margin-bottom: 0.625rem;\n letter-spacing: -0.01em;\n }\n\n .form-control {\n width: 100%;\n padding: 1rem 1.5rem;\n background: rgba(255, 255, 255, 0.7);\n border: 1.5px solid rgba(124, 179, 66, 0.2);\n border-radius: 12px;\n font-size: 0.9375rem;\n color: #1a1a2e;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n outline: none;\n font-family: 'Inter', sans-serif;\n font-weight: 400;\n letter-spacing: -0.01em;\n }\n\n .form-control::placeholder {\n color: #a0aec0;\n opacity: 1;\n font-weight: 400;\n }\n\n .form-control:focus {\n background: rgba(255, 255, 255, 0.95);\n border-color: #7cb342;\n box-shadow: \n 0 0 0 4px rgba(124, 179, 66, 0.12),\n 0 4px 12px rgba(45, 122, 62, 0.1);\n transform: translateY(-1px);\n }\n\n .form-control:hover:not(:focus) {\n border-color: rgba(124, 179, 66, 0.3);\n background: rgba(255, 255, 255, 0.85);\n }\n\n \/* \u2500\u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .btn {\n width: 100% !important;\n padding: 1rem 2rem !important;\n background: linear-gradient(135deg, #7cb342 0%, #2d7a3e 100%) !important;\n background-size: 200% 100% !important;\n background-position: 0% 50% !important;\n border: none !important;\n border-radius: 12px !important;\n color: #ffffff !important;\n font-size: 0.95rem !important;\n font-weight: 600 !important;\n cursor: pointer !important;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1) !important;\n box-shadow: \n 0 6px 24px rgba(124, 179, 66, 0.3),\n 0 2px 4px rgba(0, 0, 0, 0.1) !important;\n position: relative !important;\n overflow: hidden !important;\n font-family: 'Space Grotesk', sans-serif !important;\n letter-spacing: 0.03em !important;\n text-transform: uppercase !important;\n z-index: 1 !important;\n text-decoration: none !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }\n\n .btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n transition: left 0.6s ease;\n }\n\n .btn:hover {\n transform: translateY(-2px) !important;\n box-shadow: \n 0 8px 30px rgba(124, 179, 66, 0.4),\n 0 2px 6px rgba(0, 0, 0, 0.2) !important;\n background-position: 100% 50% !important;\n }\n\n .btn:hover::before {\n left: 100%;\n }\n\n .btn:active {\n transform: translateY(0) !important;\n box-shadow: \n 0 4px 20px rgba(124, 179, 66, 0.3),\n 0 1px 3px rgba(0, 0, 0, 0.1) !important;\n }\n\n .btn:disabled {\n opacity: 0.5 !important;\n cursor: not-allowed !important;\n transform: none !important;\n }\n\n \/* Secondary button style for \"Regresar\" *\/\n .btn-secondary {\n background: rgba(124, 179, 66, 0.08) !important;\n color: #2d7a3e !important;\n border: 1.5px solid rgba(124, 179, 66, 0.3) !important;\n box-shadow: 0 4px 12px rgba(124, 179, 66, 0.15) !important;\n }\n\n .btn-secondary:hover {\n background: rgba(124, 179, 66, 0.15) !important;\n border-color: #7cb342 !important;\n color: #2d7a3e !important;\n }\n\n \/* \u2500\u2500\u2500 Row & Column Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .row {\n display: flex;\n gap: 1rem;\n margin-top: 2rem;\n animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.320, 1) 0.5s both;\n }\n\n .col-md-6 {\n flex: 1;\n }\n\n .btn-full-height {\n height: 100%;\n min-height: 48px;\n }\n\n \/* \u2500\u2500\u2500 Spacing utilities \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .mt-4 {\n margin-top: 2rem;\n }\n\n .mb-3 {\n margin-bottom: 1rem;\n }\n\n \/* \u2500\u2500\u2500 Responsive Design \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n @media (max-width: 768px) {\n .card {\n padding: 2.5rem 2rem;\n border-radius: 24px;\n }\n \n .card-img-top {\n max-width: 160px !important;\n margin: 2rem auto 1.5rem !important;\n }\n\n .form-title h2 {\n font-size: 1.5rem;\n }\n \n .row {\n flex-direction: column;\n }\n\n .form-control {\n padding: 0.875rem 1.25rem;\n }\n\n .btn {\n padding: 0.875rem 1.5rem !important;\n font-size: 0.875rem !important;\n }\n }\n\n \/* \u2500\u2500\u2500 Loading State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .btn.loading {\n color: transparent !important;\n pointer-events: none;\n }\n\n .btn.loading::after {\n content: '';\n position: absolute;\n width: 20px;\n height: 20px;\n top: 50%;\n left: 50%;\n margin-left: -10px;\n margin-top: -10px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n border-top-color: #ffffff;\n animation: spin 0.8s linear infinite;\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body>\n <!-- Animated gradient orbs -->\n <div class=\"gradient-orb orb1\"><\/div>\n <div class=\"gradient-orb orb2\"><\/div>\n <div class=\"gradient-orb orb3\"><\/div>\n\n <div class=\"d-flex justify-content-start align-items-center c_login_container\">\n <div class=\"card\">\n <!-- Logo -->\n <div class=\"logo-container\">\n <a href=\"https:\/\/vida-sabia.com\/es\/\">\n <img decoding=\"async\" src=\"https:\/\/vida-sabia.com\/wp-content\/uploads\/2025\/10\/Result%20(90).webp\" \n class=\"card-img-top\" \n alt=\"Vida Sabia\">\n <\/a>\n <p class=\"logo-subtitle\">Recuperar Contrase\u00f1a<\/p>\n <\/div>\n\n <!-- Form Title -->\n <div class=\"form-title\">\n <h2>Restablecer Contrase\u00f1a<\/h2>\n <p>Ingresa tu correo para recibir el c\u00f3digo de verificaci\u00f3n<\/p>\n <\/div>\n\n <div class=\"card-body\">\n <form id=\"recovery-form\" class=\"\" action=\"\">\n <div class=\"form-group\">\n <label for=\"email\">Email o Usuario:<\/label>\n <input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\" placeholder=\"correo@ejemplo.com\" required>\n <\/div>\n\n <button type=\"button\" class=\"btn btn-primary btn-send-otp\">Enviar C\u00f3digo de Verificaci\u00f3n<\/button>\n\n <div class=\"form-group mt-4\">\n <label for=\"otp\">C\u00f3digo de verificaci\u00f3n:<\/label>\n <input type=\"text\" class=\"form-control\" id=\"otp\" name=\"otp\" placeholder=\"Ingresa el c\u00f3digo\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"new-password\">Nueva Contrase\u00f1a:<\/label>\n <input type=\"password\" class=\"form-control\" id=\"new-password\" name=\"new-password\" placeholder=\"M\u00ednimo 8 caracteres\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"confirm-password\">Confirmar Contrase\u00f1a:<\/label>\n <input type=\"password\" class=\"form-control\" id=\"confirm-password\" name=\"confirm-password\" placeholder=\"Confirma tu contrase\u00f1a\" required>\n <\/div>\n\n <div class=\"row d-flex align-items-stretch\">\n <div class=\"col-md-6 mb-3\">\n <a href=\"\/es\/c_login\/\" class=\"btn btn-secondary btn-block btn-full-height\">Volver<\/a>\n <\/div>\n \n <div class=\"col-md-6 mb-3\">\n <button type=\"button\" class=\"btn btn-block btn-full-height btn-recover-pw\" disabled>\n Cambiar Contrase\u00f1a\n <\/button>\n <\/div>\n <\/div>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"es\"\/><\/form>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n jQuery(document).ready(function($) {\n function validateFormFields() {\n const email = $('#email').val().trim();\n const otp = $('#otp').val().trim();\n const newPassword = $('#new-password').val().trim();\n const confirmPassword = $('#confirm-password').val().trim();\n \n \/\/ Enable the \"Reset Password\" button only if all fields are filled\n if (email && otp && newPassword && confirmPassword && newPassword === confirmPassword) {\n $('.btn-recover-pw').prop('disabled', false);\n } else {\n $('.btn-recover-pw').prop('disabled', true);\n }\n }\n\n function sendOTP() {\n const email = $('#email').val();\n const $btn = $('.btn-send-otp');\n \n $btn.addClass('loading');\n $btn.prop('disabled', true);\n\n \/\/ Send AJAX request to send the OTP\n $.ajax({\n type: 'POST',\n url: ajax_object.ajax_url,\n data: {\n action: 'send_otp',\n email: email\n },\n success: function(response) {\n console.log('request ok', response);\n $btn.removeClass('loading');\n $btn.prop('disabled', false);\n \n Swal.fire({\n icon: 'success',\n title: '\u00c9xito',\n text: response,\n confirmButtonColor: '#7cb342'\n });\n },\n error: function(error) {\n $btn.removeClass('loading');\n $btn.prop('disabled', false);\n \n Swal.fire({\n icon: 'error',\n title: 'Error',\n text: 'No se pudo enviar el c\u00f3digo. Verifica tu email.',\n confirmButtonColor: '#2d7a3e'\n });\n }\n });\n }\n\n function submitForm() {\n const email = $('#email').val();\n const otp = $('#otp').val();\n const newPassword = $('#new-password').val();\n const $btn = $('.btn-recover-pw');\n\n \/\/ Submit the form via AJAX\n $btn.addClass('loading');\n $btn.prop('disabled', true);\n\n $.ajax({\n type: 'POST',\n url: ajax_object.ajax_url,\n data: {\n action: 'verify_and_update_password',\n email: email,\n otp: otp,\n new_password: newPassword\n },\n success: function(response) {\n Swal.fire({\n icon: 'success',\n title: '\u00c9xito',\n text: response,\n confirmButtonColor: '#7cb342'\n }).then(() => {\n \/\/ Redirect to the login page after the success message\n window.location.href = \"\/c_login\";\n });\n },\n error: function(error) {\n $btn.removeClass('loading');\n $btn.prop('disabled', false);\n \n Swal.fire({\n icon: 'error',\n title: 'Error',\n text: error.responseText || 'Ocurri\u00f3 un error. Intenta nuevamente.',\n confirmButtonColor: '#2d7a3e'\n });\n }\n });\n }\n\n \/\/ Attach event listeners\n $('#email, #otp, #new-password, #confirm-password').on('input', validateFormFields);\n $('.btn-send-otp').on('click', sendOTP);\n $('.btn-recover-pw').on('click', submitForm);\n\n \/\/ Parallax effect for gradient orbs\n document.addEventListener('mousemove', (e) => {\n const mouseX = e.clientX \/ window.innerWidth;\n const mouseY = e.clientY \/ window.innerHeight;\n \n const orb1 = document.querySelector('.orb1');\n const orb2 = document.querySelector('.orb2');\n const orb3 = document.querySelector('.orb3');\n \n if (orb1) {\n orb1.style.transform = `translate(${mouseX * 20}px, ${mouseY * 20}px)`;\n }\n if (orb2) {\n orb2.style.transform = `translate(${-mouseX * 15}px, ${-mouseY * 15}px)`;\n }\n if (orb3) {\n orb3.style.transform = `translate(${mouseX * 10}px, ${-mouseY * 10}px)`;\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Vida Sabia - Recuperar Contrase\u00f1a Recuperar Contrase\u00f1a Restablecer Contrase\u00f1a Ingresa tu correo para recibir el c\u00f3digo de verificaci\u00f3n Email o Usuario: Enviar C\u00f3digo de Verificaci\u00f3n C\u00f3digo de Verificaci\u00f3n: Nueva Contrase\u00f1a: Confirmar Contrase\u00f1a: Regresar Cambiar Contrase\u00f1a<\/p>","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-24784","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vida-sabia.com\/es\/wp-json\/wp\/v2\/pages\/24784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vida-sabia.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vida-sabia.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vida-sabia.com\/es\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/vida-sabia.com\/es\/wp-json\/wp\/v2\/comments?post=24784"}],"version-history":[{"count":91,"href":"https:\/\/vida-sabia.com\/es\/wp-json\/wp\/v2\/pages\/24784\/revisions"}],"predecessor-version":[{"id":68682,"href":"https:\/\/vida-sabia.com\/es\/wp-json\/wp\/v2\/pages\/24784\/revisions\/68682"}],"wp:attachment":[{"href":"https:\/\/vida-sabia.com\/es\/wp-json\/wp\/v2\/media?parent=24784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}