{"id":898,"date":"2025-10-23T19:47:27","date_gmt":"2025-10-23T19:47:27","guid":{"rendered":"https:\/\/productoshubin.com\/?page_id=898"},"modified":"2026-02-17T15:47:12","modified_gmt":"2026-02-17T21:47:12","slug":"contacto","status":"publish","type":"page","link":"https:\/\/productoshubin.com\/en\/contacto\/","title":{"rendered":"Contacto"},"content":{"rendered":"
\n
\n
\n
\n\n\n \n \n Contacto - Productos Hubin<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #FF6B35;\n --primary-dark: #E85A2A;\n --primary-light: #FF8C5A;\n --secondary: #004E89;\n --accent: #F7B801;\n --text-dark: #1A1A2E;\n --text-light: #6B7280;\n --bg-main: #FAFAFA;\n --bg-card: #FFFFFF;\n --border: #E5E7EB;\n --success: #10B981;\n --error: #EF4444;\n --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);\n --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);\n --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);\n }\n\n .hubin-contact-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .hubin-contact-wrapper {\n font-family: 'Outfit', sans-serif;\n background: linear-gradient(135deg, #FAFAFA 0%, #F0F0F0 100%);\n color: var(--text-dark);\n line-height: 1.6;\n padding: 40px 20px;\n }\n\n .container {\n max-width: 1400px;\n margin: 0 auto;\n }\n\n \/* Header - SIN ANIMACI\u00d3N PESADA *\/\n .header {\n text-align: center;\n margin-bottom: 60px;\n \/* QUITADO: animation: fadeInDown 0.8s ease-out; *\/\n }\n\n .header h1 {\n font-size: clamp(2.5rem, 6vw, 3.5rem);\n font-weight: 700;\n color: var(--text-dark);\n margin-bottom: 15px;\n letter-spacing: -1.5px;\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .header p {\n font-size: 1.2rem;\n color: var(--text-light);\n font-weight: 300;\n }\n\n \/* Layout en dos columnas *\/\n .main-grid {\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 40px;\n margin-bottom: 40px;\n }\n\n \/* Secci\u00f3n de Informaci\u00f3n de Contacto - SIN ANIMACI\u00d3N *\/\n .contact-info-section {\n background: var(--bg-card);\n border-radius: 24px;\n padding: 40px;\n box-shadow: var(--shadow-lg);\n \/* QUITADO: animation: fadeInLeft 0.8s ease-out; *\/\n position: sticky;\n top: 20px;\n height: fit-content;\n }\n\n .contact-info-title {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--text-dark);\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .contact-info-subtitle {\n color: var(--text-light);\n font-size: 0.95rem;\n margin-bottom: 30px;\n }\n\n .contact-card {\n background: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, rgba(255, 107, 53, 0.02) 100%);\n border: 2px solid var(--border);\n border-radius: 16px;\n padding: 20px;\n margin-bottom: 15px;\n transition: border-color 0.2s ease, box-shadow 0.2s ease; \/* OPTIMIZADO *\/\n }\n\n .contact-card:hover {\n \/* QUITADO: transform: translateX(5px); *\/\n border-color: var(--primary);\n box-shadow: var(--shadow-md);\n }\n\n .contact-card-header {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n }\n\n .contact-icon {\n font-size: 2rem;\n width: 50px;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border-radius: 12px;\n box-shadow: var(--shadow-sm);\n }\n\n .contact-label {\n font-weight: 600;\n color: var(--text-dark);\n font-size: 1rem;\n }\n\n .contact-value {\n color: var(--secondary);\n font-size: 1rem;\n font-weight: 500;\n display: block;\n margin-left: 62px;\n }\n\n .contact-value a {\n color: var(--secondary);\n text-decoration: none;\n transition: color 0.2s ease; \/* OPTIMIZADO *\/\n }\n\n .contact-value a:hover {\n color: var(--primary);\n }\n\n .divider {\n height: 2px;\n background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);\n margin: 30px 0;\n }\n\n .horarios-section {\n margin-top: 25px;\n }\n\n .horario-item {\n display: flex;\n justify-content: space-between;\n padding: 10px 0;\n border-bottom: 1px solid var(--border);\n }\n\n .horario-item:last-child {\n border-bottom: none;\n }\n\n .horario-dia {\n font-weight: 500;\n color: var(--text-dark);\n }\n\n .horario-hora {\n color: var(--text-light);\n }\n\n \/* Formulario - SIN ANIMACI\u00d3N *\/\n .form-wrapper {\n background: var(--bg-card);\n border-radius: 24px;\n padding: 50px;\n box-shadow: var(--shadow-lg);\n \/* QUITADO: animation: fadeInRight 0.8s ease-out; *\/\n }\n\n \/* Category Selection Mejorada *\/\n .category-section {\n margin-bottom: 40px;\n }\n\n .section-label {\n font-size: 0.9rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n color: var(--text-light);\n margin-bottom: 25px;\n display: block;\n }\n\n .category-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n margin-bottom: 15px;\n }\n\n .category-option {\n position: relative;\n cursor: pointer;\n }\n\n .category-option input[type=\"radio\"] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n }\n\n .category-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 30px 20px;\n border: 2px solid var(--border);\n border-radius: 20px;\n background: var(--bg-card);\n transition: border-color 0.2s ease, box-shadow 0.2s ease; \/* OPTIMIZADO *\/\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .category-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n opacity: 0;\n transition: opacity 0.2s ease; \/* OPTIMIZADO *\/\n z-index: 0;\n }\n\n .category-card > * {\n position: relative;\n z-index: 1;\n }\n\n .category-option input[type=\"radio\"]:checked + .category-card::before {\n opacity: 0.1;\n }\n\n .category-option input[type=\"radio\"]:checked + .category-card {\n border-color: var(--primary);\n \/* QUITADO: transform: translateY(-5px) scale(1.02); *\/\n box-shadow: 0 12px 30px rgba(255, 107, 53, 0.25);\n }\n\n .category-card:hover {\n border-color: var(--primary-light);\n \/* QUITADO: transform: translateY(-3px); *\/\n box-shadow: var(--shadow-md);\n }\n\n .category-icon {\n font-size: 4rem;\n margin-bottom: 15px;\n filter: grayscale(100%);\n opacity: 0.5;\n transition: filter 0.2s ease, opacity 0.2s ease; \/* OPTIMIZADO *\/\n }\n\n .category-option input[type=\"radio\"]:checked + .category-card .category-icon {\n filter: grayscale(0%);\n opacity: 1;\n \/* QUITADO: transform: scale(1.15) rotate(5deg); *\/\n }\n\n .category-title {\n font-weight: 600;\n font-size: 1.1rem;\n color: var(--text-dark);\n margin-bottom: 8px;\n }\n\n .category-desc {\n font-size: 0.9rem;\n color: var(--text-light);\n line-height: 1.4;\n }\n\n \/* Form Fields - SIN ANIMACI\u00d3N PESADA *\/\n .form-section {\n margin-bottom: 40px;\n \/* QUITADO: opacity: 0; *\/\n \/* QUITADO: animation: fadeIn 0.6s ease-out forwards; *\/\n \/* QUITADO: animation-delay: 0.4s; *\/\n }\n\n .form-group {\n margin-bottom: 25px;\n }\n\n .form-label {\n display: block;\n font-weight: 600;\n font-size: 0.95rem;\n color: var(--text-dark);\n margin-bottom: 10px;\n }\n\n .form-label .required {\n color: var(--error);\n margin-left: 3px;\n }\n\n .form-input,\n .form-textarea,\n .form-select {\n width: 100%;\n padding: 16px 20px;\n border: 2px solid var(--border);\n border-radius: 14px;\n font-family: 'Outfit', sans-serif;\n font-size: 1rem;\n color: var(--text-dark);\n background: var(--bg-card);\n transition: border-color 0.2s ease, box-shadow 0.2s ease; \/* OPTIMIZADO *\/\n }\n\n .form-input:focus,\n .form-textarea:focus,\n .form-select:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);\n \/* QUITADO: transform: translateY(-2px); *\/\n }\n\n .form-textarea {\n resize: vertical;\n min-height: 140px;\n }\n\n .form-row {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n }\n\n \/* Conditional Fields *\/\n .conditional-field {\n display: none;\n opacity: 0;\n max-height: 0;\n overflow: hidden;\n transition: opacity 0.3s ease, max-height 0.3s ease; \/* OPTIMIZADO *\/\n }\n\n .conditional-field.active {\n display: block;\n opacity: 1;\n max-height: 2000px;\n }\n\n \/* File Upload mejorado *\/\n .file-upload-wrapper {\n position: relative;\n }\n\n .file-input {\n display: none;\n }\n\n .file-label {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 35px;\n border: 2px dashed var(--border);\n border-radius: 16px;\n cursor: pointer;\n transition: border-color 0.2s ease, background 0.2s ease; \/* OPTIMIZADO *\/\n background: var(--bg-main);\n }\n\n .file-label:hover {\n border-color: var(--primary);\n background: rgba(255, 107, 53, 0.05);\n \/* QUITADO: transform: scale(1.02); *\/\n }\n\n .file-label-content {\n text-align: center;\n }\n\n .file-icon {\n font-size: 3rem;\n margin-bottom: 12px;\n opacity: 0.6;\n }\n\n .file-text {\n color: var(--text-light);\n font-size: 1rem;\n }\n\n .file-name {\n margin-top: 15px;\n padding: 12px 20px;\n background: var(--success);\n color: white;\n border-radius: 10px;\n font-size: 0.95rem;\n display: none;\n }\n\n .file-name.active {\n display: block;\n }\n\n \/* Submit Button - OPTIMIZADO *\/\n .submit-section {\n margin-top: 50px;\n text-align: center;\n }\n\n .submit-button {\n padding: 18px 60px;\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\n color: white;\n border: none;\n border-radius: 14px;\n font-size: 1.15rem;\n font-weight: 600;\n cursor: pointer;\n transition: box-shadow 0.2s ease; \/* OPTIMIZADO - solo sombra *\/\n box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);\n font-family: 'Outfit', sans-serif;\n position: relative;\n overflow: hidden;\n }\n\n \/* QUITADO EFECTO ::before PESADO *\/\n\n .submit-button:hover:not(:disabled) {\n \/* QUITADO: transform: translateY(-3px); *\/\n box-shadow: 0 12px 35px rgba(255, 107, 53, 0.4);\n }\n\n .submit-button:active:not(:disabled) {\n \/* QUITADO: transform: translateY(-1px); *\/\n }\n\n .submit-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n \/* Success Message *\/\n .success-message {\n display: none;\n padding: 25px;\n background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.15) 100%);\n border-left: 5px solid var(--success);\n border-radius: 16px;\n margin-top: 25px;\n }\n\n .success-message.active {\n display: block;\n }\n\n .success-message-title {\n font-weight: 700;\n color: var(--success);\n margin-bottom: 8px;\n font-size: 1.1rem;\n }\n\n \/* Loading - SIN BACKDROP-FILTER PESADO *\/\n .loading-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.7); \/* M\u00e1s oscuro para compensar sin blur *\/\n z-index: 1000;\n align-items: center;\n justify-content: center;\n \/* QUITADO: backdrop-filter: blur(5px); - ESTO CAUSABA LAG *\/\n }\n\n .loading-overlay.active {\n display: flex;\n }\n\n .spinner {\n width: 60px;\n height: 60px;\n border: 5px solid rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n border-top-color: var(--primary);\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n \/* Responsive MEJORADO *\/\n @media (max-width: 1024px) {\n .main-grid {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n\n .contact-info-section {\n position: relative;\n top: 0;\n }\n\n .category-grid {\n grid-template-columns: 1fr;\n }\n }\n\n @media (max-width: 768px) {\n .hubin-contact-wrapper {\n padding: 20px 10px;\n }\n\n .container {\n max-width: 100%;\n }\n\n .header {\n margin-bottom: 35px;\n }\n\n .header h1 {\n font-size: 2rem;\n letter-spacing: -1px;\n line-height: 1.2;\n }\n\n .header p {\n font-size: 1rem;\n }\n\n \/* Secci\u00f3n de contacto m\u00f3vil *\/\n .contact-info-section {\n padding: 25px 18px;\n border-radius: 18px;\n }\n\n .contact-info-title {\n font-size: 1.25rem;\n flex-wrap: wrap;\n }\n\n .contact-info-subtitle {\n font-size: 0.9rem;\n margin-bottom: 20px;\n }\n\n .contact-card {\n padding: 15px;\n border-radius: 14px;\n margin-bottom: 12px;\n }\n\n .contact-card-header {\n gap: 10px;\n margin-bottom: 10px;\n }\n\n .contact-icon {\n font-size: 1.5rem;\n width: 42px;\n height: 42px;\n }\n\n .contact-label {\n font-size: 0.9rem;\n }\n\n .contact-value {\n font-size: 0.85rem;\n margin-left: 52px;\n word-break: break-word;\n line-height: 1.5;\n }\n\n .divider {\n margin: 20px 0;\n }\n\n .horarios-section {\n margin-top: 20px;\n }\n\n .horarios-section h3 {\n font-size: 1rem !important;\n margin-bottom: 12px !important;\n }\n\n .horario-item {\n padding: 8px 0;\n font-size: 0.85rem;\n }\n\n \/* Formulario m\u00f3vil *\/\n .form-wrapper {\n padding: 25px 16px;\n border-radius: 18px;\n }\n\n .category-section {\n margin-bottom: 30px;\n }\n\n .section-label {\n font-size: 0.8rem;\n letter-spacing: 1.2px;\n margin-bottom: 18px;\n }\n\n .category-grid {\n gap: 12px;\n }\n\n .category-card {\n padding: 22px 15px;\n border-radius: 16px;\n }\n\n .category-icon {\n font-size: 3rem;\n margin-bottom: 12px;\n }\n\n .category-title {\n font-size: 1rem;\n }\n\n .category-desc {\n font-size: 0.85rem;\n }\n\n .form-section {\n margin-bottom: 28px;\n }\n\n .form-group {\n margin-bottom: 18px;\n }\n\n .form-label {\n font-size: 0.9rem;\n margin-bottom: 8px;\n }\n\n .form-input,\n .form-textarea,\n .form-select {\n padding: 14px 16px;\n font-size: 0.95rem;\n border-radius: 12px;\n }\n\n .form-row {\n grid-template-columns: 1fr;\n gap: 0;\n }\n\n .form-textarea {\n min-height: 120px;\n }\n\n .file-label {\n padding: 28px 16px;\n border-radius: 14px;\n }\n\n .file-icon {\n font-size: 2.5rem;\n margin-bottom: 10px;\n }\n\n .file-text {\n font-size: 0.9rem;\n }\n\n .submit-section {\n margin-top: 35px;\n }\n\n .submit-button {\n width: 100%;\n padding: 16px 40px;\n font-size: 1rem;\n border-radius: 12px;\n }\n\n .success-message {\n padding: 20px 16px;\n border-radius: 14px;\n }\n\n .success-message-title {\n font-size: 1rem;\n }\n\n .success-message p {\n font-size: 0.9rem;\n }\n }\n\n \/* M\u00f3viles peque\u00f1os *\/\n @media (max-width: 480px) {\n .hubin-contact-wrapper {\n padding: 15px 8px;\n }\n\n .header h1 {\n font-size: 1.75rem;\n }\n\n .header p {\n font-size: 0.95rem;\n }\n\n .contact-info-section {\n padding: 20px 15px;\n }\n\n .contact-info-title {\n font-size: 1.15rem;\n }\n\n .contact-value {\n font-size: 0.8rem;\n margin-left: 48px;\n }\n\n .form-wrapper {\n padding: 20px 12px;\n }\n\n .category-card {\n padding: 20px 12px;\n }\n\n .category-icon {\n font-size: 2.75rem;\n }\n\n .category-title {\n font-size: 0.95rem;\n }\n\n .category-desc {\n font-size: 0.8rem;\n }\n\n .form-input,\n .form-textarea,\n .form-select {\n padding: 12px 14px;\n font-size: 0.9rem;\n }\n\n .submit-button {\n padding: 14px 30px;\n font-size: 0.95rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"hubin-contact-wrapper\">\n <div class=\"loading-overlay\" id=\"loadingOverlay\">\n <div class=\"spinner\"><\/div>\n <\/div>\n\n <div class=\"container\">\n <div class=\"header\">\n <h1>\u00bfC\u00f3mo podemos ayudarte?<\/h1>\n <p>Estamos aqu\u00ed para ti. Selecciona el tipo de consulta y compl\u00e9tanos los datos<\/p>\n <\/div>\n\n <div class=\"main-grid\">\n <!-- Informaci\u00f3n de Contacto -->\n <aside class=\"contact-info-section\">\n <h2 class=\"contact-info-title\">\n <span>\ud83d\udcde<\/span> Informaci\u00f3n de Contacto\n <\/h2>\n <p class=\"contact-info-subtitle\">Tambi\u00e9n puedes contactarnos directamente<\/p>\n\n <div class=\"contact-card\">\n <div class=\"contact-card-header\">\n <div class=\"contact-icon\">\ud83d\udcbc<\/div>\n <div class=\"contact-label\">Recursos Humanos<\/div>\n <\/div>\n <span class=\"contact-value\">\n <a href=\"mailto:recursoshumanos@productoshubin.com.mx\">recursoshumanos@productoshubin.com.mx<\/a>\n <\/span>\n <\/div>\n\n <div class=\"contact-card\">\n <div class=\"contact-card-header\">\n <div class=\"contact-icon\">\ud83d\udea8<\/div>\n <div class=\"contact-label\">Quejas, Dudas o Sugerencias<\/div>\n <\/div>\n <span class=\"contact-value\">\n <a href=\"mailto:qds@productoshubin.com.mx\">qds@productoshubin.com.mx<\/a>\n <br>\n <a href=\"tel:+523312867082\">+523312867082<\/a>\n <\/span>\n<\/div>\n\n <div class=\"contact-card\">\n <div class=\"contact-card-header\">\n <div class=\"contact-icon\">\ud83d\udecd\ufe0f<\/div>\n <div class=\"contact-label\">Cotizaci\u00f3n o Promociones (Mayor a 10 cajas)<\/div>\n <\/div>\n <span class=\"contact-value\">\n <a href=\"mailto:vlinea@productoshubin.com.mx\">vlinea@productoshubin.com.mx<\/a>\n <br>\n <a href=\"tel:+523312733299\">+52 33 1273 3299<\/a>\n <\/span>\n<\/div>\n\n <div class=\"contact-card\">\n <div class=\"contact-card-header\">\n <div class=\"contact-icon\">\ud83d\udccd<\/div>\n <div class=\"contact-label\">Ubicaci\u00f3n<\/div>\n <\/div>\n <span class=\"contact-value\">\n Carretera Yahualica 1703, Tepatitl\u00e1n de Morelos, Jalisco\n <\/span>\n <\/div>\n\n <div class=\"horarios-section\">\n <h3 style=\"font-size: 1.1rem; margin-bottom: 15px; color: var(--text-dark);\">\u23f0 Horarios de Atenci\u00f3n<\/h3>\n <div class=\"horario-item\">\n <span class=\"horario-dia\">Lunes - Viernes<\/span>\n <span class=\"horario-hora\">08:00 A.M. - 06:30 P.M.<\/span>\n <\/div>\n <div class=\"horario-item\">\n <span class=\"horario-dia\">S\u00e1bado<\/span>\n <span class=\"horario-hora\">08:00 A.M. - 02:00 P.M.<\/span>\n <\/div>\n <div class=\"horario-item\">\n <span class=\"horario-dia\">Domingo<\/span>\n <span class=\"horario-hora\">Cerrado<\/span>\n <\/div>\n <\/div>\n <\/aside>\n\n <!-- Formulario -->\n <div class=\"form-wrapper\">\n <form id=\"contactForm\" method=\"POST\" enctype=\"multipart\/form-data\">\n <!-- Category Selection -->\n <div class=\"category-section\">\n <label class=\"section-label\">Tipo de Consulta<\/label>\n <div class=\"category-grid\">\n <label class=\"category-option\">\n <input type=\"radio\" name=\"category\" value=\"trabajo\" data-destination=\"recursoshumanos@productoshubin.com.mx\" required>\n <div class=\"category-card\">\n <div class=\"category-icon\">\ud83d\udcbc<\/div>\n <div class=\"category-title\">\u00danete A Nosotros<\/div>\n <div class=\"category-desc\">Forma parte de nuestro equipo<\/div>\n <\/div>\n <\/label>\n\n <label class=\"category-option\">\n <input type=\"radio\" name=\"category\" value=\"reporte\" data-destination=\"qds@productoshubin.com.mx\">\n <div class=\"category-card\">\n <div class=\"category-icon\">\ud83d\udea8<\/div>\n <div class=\"category-title\">Reportar Problema<\/div>\n <div class=\"category-desc\">Soporte t\u00e9cnico y asistencia<\/div>\n <\/div>\n <\/label>\n\n <label class=\"category-option\">\n <input type=\"radio\" name=\"category\" value=\"ventas\" data-destination=\"vlinea@productoshubin.com.mx\">\n <div class=\"category-card\">\n <div class=\"category-icon\">\ud83d\udecd\ufe0f<\/div>\n <div class=\"category-title\">Ventas Mayoristas<\/div>\n <div class=\"category-desc\">Venta Mayor a 100 cajas<\/div>\n <\/div>\n <\/label>\n <\/div>\n <\/div>\n\n <!-- Personal Information -->\n <div class=\"form-section\">\n <label class=\"section-label\">Informaci\u00f3n de Contacto<\/label>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label class=\"form-label\">Nombre Completo <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" class=\"form-input\" name=\"nombre\" placeholder=\"Juan P\u00e9rez Garc\u00eda\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\">Email <span class=\"required\">*<\/span><\/label>\n <input type=\"email\" class=\"form-input\" name=\"email\" placeholder=\"tu@email.com\" required>\n <\/div>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label class=\"form-label\">Tel\u00e9fono <span class=\"required\">*<\/span><\/label>\n <input type=\"tel\" class=\"form-input\" name=\"telefono\" placeholder=\"+52 123 456 7890\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\">Empresa \/ Organizaci\u00f3n<\/label>\n <input type=\"text\" class=\"form-input\" name=\"empresa\" placeholder=\"Nombre de tu empresa (opcional)\">\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Conditional Fields for Employment -->\n <div class=\"form-section conditional-field\" id=\"trabajoFields\">\n <label class=\"section-label\">Informaci\u00f3n Profesional<\/label>\n\n <div class=\"form-group\">\n <label class=\"form-label\">A\u00f1os de Experiencia<\/label>\n <input type=\"number\" class=\"form-input\" name=\"experiencia\" placeholder=\"Ej: 5\" min=\"0\">\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\">CV \/ Portafolio (PDF, DOC, DOCX - Max 5MB)<\/label>\n <div class=\"file-upload-wrapper\">\n <input type=\"file\" class=\"file-input\" id=\"cvFile\" name=\"cv\" accept=\".pdf,.doc,.docx\">\n <label for=\"cvFile\" class=\"file-label\">\n <div class=\"file-label-content\">\n <div class=\"file-icon\">\ud83d\udcc4<\/div>\n <div class=\"file-text\">Haz clic o arrastra tu CV aqu\u00ed<\/div>\n <\/div>\n <\/label>\n <div class=\"file-name\" id=\"fileName\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Conditional Fields for Support -->\n <div class=\"form-section conditional-field\" id=\"reporteFields\">\n <label class=\"section-label\">Detalles del Problema<\/label>\n \n <div class=\"form-group\">\n <label class=\"form-label\">Prioridad <span class=\"required\">*<\/span><\/label>\n <select class=\"form-select\" name=\"prioridad\">\n <option value=\"\">Selecciona la prioridad<\/option>\n <option value=\"baja\">\ud83d\udfe2 Baja - Puede esperar<\/option>\n <option value=\"media\">\ud83d\udfe1 Media - Necesario pronto<\/option>\n <option value=\"alta\">\ud83d\udfe0 Alta - Urgente<\/option>\n <option value=\"critica\">\ud83d\udd34 Cr\u00edtica - Requiere atenci\u00f3n inmediata<\/option>\n <\/select>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\">Tipo de Problema<\/label>\n <select class=\"form-select\" name=\"tipo_problema\">\n <option value=\"\">Selecciona el tipo<\/option>\n <option value=\"tecnico\">T\u00e9cnico<\/option>\n <option value=\"facturacion\">Facturaci\u00f3n<\/option>\n <option value=\"cuenta\">Cuenta<\/option>\n <option value=\"otro\">Otro<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <!-- Conditional Fields for Sales -->\n <div class=\"form-section conditional-field\" id=\"ventasFields\">\n <label class=\"section-label\">Informaci\u00f3n Comercial<\/label>\n \n <div class=\"form-group\">\n <label class=\"form-label\">Producto\/Servicio de Inter\u00e9s<\/label>\n <input type=\"text\" class=\"form-input\" name=\"producto_interes\" placeholder=\"\u00bfQu\u00e9 producto te interesa?\">\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\">Presupuesto Estimado<\/label>\n <select class=\"form-select\" name=\"presupuesto\">\n <option value=\"\">Selecciona un rango<\/option>\n <option value=\"menos-10k\">Menos de $10,000<\/option>\n <option value=\"10k-50k\">$10,000 - $50,000<\/option>\n <option value=\"50k-100k\">$50,000 - $100,000<\/option>\n <option value=\"mas-100k\">M\u00e1s de $100,000<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <!-- Message Section -->\n <div class=\"form-section\">\n <label class=\"section-label\">Tu Mensaje<\/label>\n \n <div class=\"form-group\">\n <label class=\"form-label\">Asunto <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" class=\"form-input\" name=\"asunto\" placeholder=\"Resumen breve de tu consulta\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\">Mensaje <span class=\"required\">*<\/span><\/label>\n <textarea class=\"form-textarea\" name=\"mensaje\" placeholder=\"Describe tu consulta en detalle...\" required><\/textarea>\n <\/div>\n <\/div>\n\n <!-- Submit -->\n <div class=\"submit-section\">\n <button type=\"submit\" class=\"submit-button\" id=\"submitBtn\">\n Enviar Mensaje\n <\/button>\n <\/div>\n\n <div class=\"success-message\" id=\"successMessage\">\n <div class=\"success-message-title\">\u2705 \u00a1Mensaje Enviado Exitosamente!<\/div>\n <p>Tu consulta ha sido recibida. Nos pondremos en contacto contigo muy pronto.<\/p>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script type=\"text\/javascript\">\n \/\/ Variables globales para WordPress (si aplica)\n var smartContactAjaxUrl = \"https:\/\/productoshubin.com\/wp-admin\/admin-ajax.php\";\n var smartContactNonce = \"972b64f805\";\n\n (function() {\n 'use strict';\n\n document.addEventListener('DOMContentLoaded', function() {\n const form = document.getElementById('contactForm');\n if (!form) return;\n\n \/\/ Manejo de categor\u00edas\n const radios = document.querySelectorAll('input[name=\"category\"]');\n const sections = {\n trabajo: document.getElementById('trabajoFields'),\n reporte: document.getElementById('reporteFields'),\n ventas: document.getElementById('ventasFields')\n };\n\n radios.forEach(radio => {\n radio.addEventListener('change', function() {\n \/\/ Ocultar todas las secciones\n Object.values(sections).forEach(sec => {\n if (sec) sec.classList.remove('active');\n });\n \n \/\/ Mostrar la seleccionada\n const selected = sections[this.value];\n if (selected) {\n setTimeout(() => {\n selected.classList.add('active');\n }, 100);\n }\n });\n });\n\n \/\/ Manejo de archivos\n const fileInput = document.getElementById('cvFile');\n const fileName = document.getElementById('fileName');\n \n if (fileInput && fileName) {\n fileInput.addEventListener('change', function() {\n if (this.files && this.files[0]) {\n fileName.textContent = '\ud83d\udcce ' + this.files[0].name;\n fileName.classList.add('active');\n } else {\n fileName.classList.remove('active');\n }\n });\n }\n\n \/\/ Env\u00edo del formulario\n form.addEventListener('submit', async function(e) {\n e.preventDefault();\n\n const submitBtn = document.getElementById('submitBtn');\n const loader = document.getElementById('loadingOverlay');\n const successMsg = document.getElementById('successMessage');\n\n \/\/ Mostrar loading\n if (loader) loader.classList.add('active');\n if (submitBtn) {\n submitBtn.disabled = true;\n submitBtn.innerHTML = 'Enviando...';\n }\n\n const formData = new FormData(form);\n formData.append('action', 'submit_smart_contact_form');\n formData.append('security', smartContactNonce);\n\n try {\n const response = await fetch(smartContactAjaxUrl, {\n method: 'POST',\n body: formData\n });\n\n const result = await response.json();\n\n if (result.success) {\n \/\/ Mostrar mensaje de \u00e9xito\n if (successMsg) successMsg.classList.add('active');\n \n \/\/ Reset form\n form.reset();\n Object.values(sections).forEach(sec => {\n if (sec) sec.classList.remove('active');\n });\n \n \/\/ Scroll to success message\n successMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });\n \n \/\/ Ocultar mensaje despu\u00e9s de 5 segundos\n setTimeout(() => {\n if (successMsg) successMsg.classList.remove('active');\n }, 5000);\n } else {\n alert(result.data.message || 'Error al enviar el formulario');\n }\n } catch (error) {\n console.error('Error:', error);\n alert('Error de conexi\u00f3n con el servidor. Por favor, intenta nuevamente.');\n } finally {\n \/\/ Ocultar loading\n if (loader) loader.classList.remove('active');\n if (submitBtn) {\n submitBtn.disabled = false;\n submitBtn.innerHTML = 'Enviar Mensaje';\n }\n }\n });\n });\n })();\n <\/script>\n<\/body>\n<\/html><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-898","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/productoshubin.com\/en\/wp-json\/wp\/v2\/pages\/898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/productoshubin.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/productoshubin.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/productoshubin.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/productoshubin.com\/en\/wp-json\/wp\/v2\/comments?post=898"}],"version-history":[{"count":0,"href":"https:\/\/productoshubin.com\/en\/wp-json\/wp\/v2\/pages\/898\/revisions"}],"wp:attachment":[{"href":"https:\/\/productoshubin.com\/en\/wp-json\/wp\/v2\/media?parent=898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}