{"id":1734,"date":"2023-11-08T14:24:22","date_gmt":"2023-11-08T19:24:22","guid":{"rendered":"https:\/\/acemaingenieria.com\/?page_id=1734"},"modified":"2026-01-27T08:05:52","modified_gmt":"2026-01-27T13:05:52","slug":"contactanos","status":"publish","type":"page","link":"https:\/\/acemaingenieria.com\/en\/contactanos\/","title":{"rendered":"Contact us"},"content":{"rendered":"

[et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb background_color=\u00bb#FFFFFF\u00bb background_enable_image=\u00bboff\u00bb background_blend=\u00bbmultiply\u00bb custom_margin=\u00bb0px|0px|0px|0px|false|false\u00bb custom_padding=\u00bb0px|0px|0px|0px|true|true\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row disabled_on=\u00bbon|on|on\u00bb _builder_version=\u00bb4.22.2″ _module_preset=\u00bbdefault\u00bb disabled=\u00bbon\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.22.2″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.23.1″ _module_preset=\u00bbdefault\u00bb text_font=\u00bbMontserrat||||||||\u00bb text_text_color=\u00bb#FFFFFF\u00bb text_font_size=\u00bb40px\u00bb text_line_height=\u00bb1.4em\u00bb header_font=\u00bbMontserrat||||||||\u00bb header_text_color=\u00bb#FFFFFF\u00bb text_orientation=\u00bbcenter\u00bb text_font_size_tablet=\u00bb40px\u00bb text_font_size_phone=\u00bb26px\u00bb text_font_size_last_edited=\u00bbon|phone\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n

<\/span><\/p>\n

<\/span><\/span>\u00a1CONT\u00c1CTANOS!<\/strong><\/span><\/p>\n

[\/et_pb_text][et_pb_contact_form use_spam_service=\u00bbon\u00bb email=\u00bbcomercial@acemaingenieria.com\u00bb custom_message=\u00bbPAGINA PRINCIPAL – ACEMA Ingenier\u00eda||et_pb_line_break_holder||——————————————————–||et_pb_line_break_holder||||et_pb_line_break_holder||De : %%Name%% %%Last_Name%%||et_pb_line_break_holder||Correo electr\u00f3nico: %%Email%%||et_pb_line_break_holder||N\u00famero de contacto: %%Numero_contacto%%||et_pb_line_break_holder||Mensaje: %%Message%%\u00bb use_redirect=\u00bbon\u00bb redirect_url=\u00bbhttps:\/\/acemaingenieria.com\/gracias\u00bb submit_button_text=\u00bbEnviar\u00bb _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb _unique_id=\u00bb24f4c78c-4604-495c-ad90-56d883d02d5a\u00bb form_field_text_color=\u00bb#000000″ title_font=\u00bbMontserrat||||||||\u00bb title_text_color=\u00bb#000000″ captcha_font=\u00bbMontserrat||||||||\u00bb captcha_text_color=\u00bb#000000″ custom_button=\u00bbon\u00bb button_text_size=\u00bb20px\u00bb button_text_color=\u00bb#FFFFFF\u00bb button_bg_color=\u00bb#2058DB\u00bb button_border_width=\u00bb0px\u00bb button_border_radius=\u00bb25px\u00bb button_letter_spacing=\u00bb0px\u00bb button_font=\u00bb|700|||||||\u00bb button_use_icon=\u00bboff\u00bb module_alignment=\u00bbcenter\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb box_shadow_style=\u00bbpreset1″ box_shadow_color=\u00bb#215BA0″ box_shadow_style_button=\u00bbpreset1″ global_colors_info=\u00bb{}\u00bb][et_pb_contact_field field_id=\u00bbName\u00bb field_title=\u00bbNombres\u00bb allowed_symbols=\u00bbletters\u00bb _builder_version=\u00bb4.27.4″ form_field_font=\u00bbMontserrat||||||||\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb box_shadow_style=\u00bbpreset1″ box_shadow_color=\u00bb#215BA0″ global_colors_info=\u00bb{}\u00bb button_text_size__hover_enabled=\u00bboff\u00bb button_one_text_size__hover_enabled=\u00bboff\u00bb button_two_text_size__hover_enabled=\u00bboff\u00bb button_text_color__hover_enabled=\u00bboff\u00bb button_one_text_color__hover_enabled=\u00bboff\u00bb button_two_text_color__hover_enabled=\u00bboff\u00bb button_border_width__hover_enabled=\u00bboff\u00bb button_one_border_width__hover_enabled=\u00bboff\u00bb button_two_border_width__hover_enabled=\u00bboff\u00bb button_border_color__hover_enabled=\u00bboff\u00bb button_one_border_color__hover_enabled=\u00bboff\u00bb button_two_border_color__hover_enabled=\u00bboff\u00bb button_border_radius__hover_enabled=\u00bboff\u00bb button_one_border_radius__hover_enabled=\u00bboff\u00bb button_two_border_radius__hover_enabled=\u00bboff\u00bb button_letter_spacing__hover_enabled=\u00bboff\u00bb button_one_letter_spacing__hover_enabled=\u00bboff\u00bb button_two_letter_spacing__hover_enabled=\u00bboff\u00bb button_bg_color__hover_enabled=\u00bboff\u00bb button_one_bg_color__hover_enabled=\u00bboff\u00bb button_two_bg_color__hover_enabled=\u00bboff\u00bb][\/et_pb_contact_field][et_pb_contact_field field_id=\u00bbLast_Name\u00bb field_title=\u00bbApellidos\u00bb allowed_symbols=\u00bbletters\u00bb _builder_version=\u00bb4.27.0″ form_field_font=\u00bbMontserrat||||||||\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb box_shadow_style=\u00bbpreset1″ box_shadow_color=\u00bb#215BA0″ global_colors_info=\u00bb{}\u00bb button_text_size__hover_enabled=\u00bboff\u00bb button_one_text_size__hover_enabled=\u00bboff\u00bb button_two_text_size__hover_enabled=\u00bboff\u00bb button_text_color__hover_enabled=\u00bboff\u00bb button_one_text_color__hover_enabled=\u00bboff\u00bb button_two_text_color__hover_enabled=\u00bboff\u00bb button_border_width__hover_enabled=\u00bboff\u00bb button_one_border_width__hover_enabled=\u00bboff\u00bb button_two_border_width__hover_enabled=\u00bboff\u00bb button_border_color__hover_enabled=\u00bboff\u00bb button_one_border_color__hover_enabled=\u00bboff\u00bb button_two_border_color__hover_enabled=\u00bboff\u00bb button_border_radius__hover_enabled=\u00bboff\u00bb button_one_border_radius__hover_enabled=\u00bboff\u00bb button_two_border_radius__hover_enabled=\u00bboff\u00bb button_letter_spacing__hover_enabled=\u00bboff\u00bb button_one_letter_spacing__hover_enabled=\u00bboff\u00bb button_two_letter_spacing__hover_enabled=\u00bboff\u00bb button_bg_color__hover_enabled=\u00bboff\u00bb button_one_bg_color__hover_enabled=\u00bboff\u00bb button_two_bg_color__hover_enabled=\u00bboff\u00bb][\/et_pb_contact_field][et_pb_contact_field field_id=\u00bbNumero_contacto\u00bb field_title=\u00bbN\u00famero de contacto\u00bb allowed_symbols=\u00bbnumbers\u00bb _builder_version=\u00bb4.27.0″ _module_preset=\u00bbdefault\u00bb form_field_font=\u00bbMontserrat||||||||\u00bb width_tablet=\u00bb\u00bb width_phone=\u00bb100%\u00bb width_last_edited=\u00bbon|phone\u00bb max_width=\u00bb100%\u00bb max_width_tablet=\u00bb100%\u00bb max_width_phone=\u00bb100%\u00bb max_width_last_edited=\u00bbon|phone\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb box_shadow_style=\u00bbpreset1″ box_shadow_color=\u00bb#215BA0″ global_colors_info=\u00bb{}\u00bb][\/et_pb_contact_field][et_pb_contact_field field_id=\u00bbEmail\u00bb field_title=\u00bbCorreo electr\u00f3nico\u00bb field_type=\u00bbemail\u00bb _builder_version=\u00bb4.27.0″ form_field_font=\u00bbMontserrat||||||||\u00bb max_width=\u00bb100%\u00bb max_width_tablet=\u00bb\u00bb max_width_phone=\u00bb100%\u00bb max_width_last_edited=\u00bbon|phone\u00bb custom_margin=\u00bb||||false|false\u00bb module_alignment_tablet=\u00bbcenter\u00bb module_alignment_phone=\u00bbright\u00bb module_alignment_last_edited=\u00bbon|phone\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb box_shadow_style=\u00bbpreset1″ box_shadow_color=\u00bb#215BA0″ global_colors_info=\u00bb{}\u00bb button_text_size__hover_enabled=\u00bboff\u00bb button_one_text_size__hover_enabled=\u00bboff\u00bb button_two_text_size__hover_enabled=\u00bboff\u00bb button_text_color__hover_enabled=\u00bboff\u00bb button_one_text_color__hover_enabled=\u00bboff\u00bb button_two_text_color__hover_enabled=\u00bboff\u00bb button_border_width__hover_enabled=\u00bboff\u00bb button_one_border_width__hover_enabled=\u00bboff\u00bb button_two_border_width__hover_enabled=\u00bboff\u00bb button_border_color__hover_enabled=\u00bboff\u00bb button_one_border_color__hover_enabled=\u00bboff\u00bb button_two_border_color__hover_enabled=\u00bboff\u00bb button_border_radius__hover_enabled=\u00bboff\u00bb button_one_border_radius__hover_enabled=\u00bboff\u00bb button_two_border_radius__hover_enabled=\u00bboff\u00bb button_letter_spacing__hover_enabled=\u00bboff\u00bb button_one_letter_spacing__hover_enabled=\u00bboff\u00bb button_two_letter_spacing__hover_enabled=\u00bboff\u00bb button_bg_color__hover_enabled=\u00bboff\u00bb button_one_bg_color__hover_enabled=\u00bboff\u00bb button_two_bg_color__hover_enabled=\u00bboff\u00bb][\/et_pb_contact_field][et_pb_contact_field field_id=\u00bbrequest_type\u00bb field_title=\u00bbTipo de solicitud\u00bb field_type=\u00bbselect\u00bb select_options=\u00bb%91{%22value%22:%22Servicios solares%22,%22checked%22:0,%22dragID%22:-1},{%22value%22:%22Servicios el\u00e9ctricos%22,%22checked%22:0,%22dragID%22:0},{%22value%22:%22Trabaja con nosotros%22,%22checked%22:0,%22dragID%22:1}%93″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_contact_field][et_pb_contact_field field_id=\u00bbMessage\u00bb field_title=\u00bbEscribe tu mensaje…\u00bb field_type=\u00bbtext\u00bb fullwidth_field=\u00bbon\u00bb _builder_version=\u00bb4.27.0″ form_field_font=\u00bbMontserrat||||||||\u00bb border_radii=\u00bbon|5px|5px|5px|5px\u00bb box_shadow_style=\u00bbpreset1″ box_shadow_color=\u00bb#215BA0″ global_colors_info=\u00bb{}\u00bb button_text_size__hover_enabled=\u00bboff\u00bb button_one_text_size__hover_enabled=\u00bboff\u00bb button_two_text_size__hover_enabled=\u00bboff\u00bb button_text_color__hover_enabled=\u00bboff\u00bb button_one_text_color__hover_enabled=\u00bboff\u00bb button_two_text_color__hover_enabled=\u00bboff\u00bb button_border_width__hover_enabled=\u00bboff\u00bb button_one_border_width__hover_enabled=\u00bboff\u00bb button_two_border_width__hover_enabled=\u00bboff\u00bb button_border_color__hover_enabled=\u00bboff\u00bb button_one_border_color__hover_enabled=\u00bboff\u00bb button_two_border_color__hover_enabled=\u00bboff\u00bb button_border_radius__hover_enabled=\u00bboff\u00bb button_one_border_radius__hover_enabled=\u00bboff\u00bb button_two_border_radius__hover_enabled=\u00bboff\u00bb button_letter_spacing__hover_enabled=\u00bboff\u00bb button_one_letter_spacing__hover_enabled=\u00bboff\u00bb button_two_letter_spacing__hover_enabled=\u00bboff\u00bb button_bg_color__hover_enabled=\u00bboff\u00bb button_one_bg_color__hover_enabled=\u00bboff\u00bb button_two_bg_color__hover_enabled=\u00bboff\u00bb][\/et_pb_contact_field][et_pb_contact_field field_id=\u00bbPol\u00edticas\u00bb field_title=\u00bbPol\u00edticas de privacidad\u00bb field_type=\u00bbcheckbox\u00bb checkbox_options=\u00bb%91{%22value%22:%22Acepto%22,%22checked%22:0,%22dragID%22:-1,%22link_url%22:%22https:\/\/acemaingenieria.com\/politica-privacidad\/%22}%93″ fullwidth_field=\u00bbon\u00bb _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb form_field_background_color=\u00bb#FFFFFF\u00bb form_field_text_color=\u00bb#000000″ form_field_focus_background_color=\u00bb#000000″ form_field_focus_text_color=\u00bb#FFFFFF\u00bb form_field_font=\u00bbMontserrat||||||||\u00bb background_color=\u00bb#FFFFFF\u00bb background_enable_color=\u00bbon\u00bb transform_scale=\u00bb91%|91%\u00bb width_tablet=\u00bb\u00bb width_phone=\u00bb\u00bb width_last_edited=\u00bbon|phone\u00bb max_width=\u00bb26%\u00bb max_width_tablet=\u00bb26%\u00bb max_width_phone=\u00bb49%\u00bb max_width_last_edited=\u00bbon|phone\u00bb custom_margin=\u00bb|||30px|false|false\u00bb custom_margin_tablet=\u00bb|||30px|false|false\u00bb custom_margin_phone=\u00bb|||10px|false|false\u00bb custom_margin_last_edited=\u00bbon|phone\u00bb custom_padding=\u00bb10px||10px||true|false\u00bb custom_padding_tablet=\u00bb10px||10px||true|false\u00bb custom_padding_phone=\u00bb10px||10px||true|false\u00bb custom_padding_last_edited=\u00bbon|phone\u00bb link_option_url=\u00bbhttps:\/\/acemaingenieria.com\/politica-privacidad\/\u00bb link_option_url_new_window=\u00bbon\u00bb module_alignment_tablet=\u00bb\u00bb module_alignment_phone=\u00bb\u00bb module_alignment_last_edited=\u00bbon|phone\u00bb custom_css_main_element=\u00bbcolor:black;||border-radius:20px;\u00bb border_radii=\u00bbon|5px|5px|5px|5px\u00bb box_shadow_style=\u00bbpreset1″ box_shadow_color=\u00bb#215BA0″ global_colors_info=\u00bb{}\u00bb][\/et_pb_contact_field][\/et_pb_contact_form][\/et_pb_column][\/et_pb_row][et_pb_row disabled_on=\u00bboff|off|off\u00bb _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb background_color=\u00bb#FFFFFF\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb background_color=\u00bb#FFFFFF\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n\n

\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n

    \n<\/p>\n\n\t\n \n \n\t\tFormulario Minimalista\n\t\t<\/title>\n\t\t<style>\n \/* =========================================\n ESTILOS MEJORADOS - MINIMALISTA CON BUEN UX\n ========================================= *\/\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n background-color: #f8fafc;\n margin: 0;\n padding: 0;\n color: #334155;\n line-height: 1.6;\n }\n\n .formulario-acema {\n background: white;\n border-radius: 16px;\n padding: 48px 40px;\n width: 100%;\n \n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);\n border: 1px solid rgba(226, 232, 240, 0.6);\n position: relative;\n overflow: hidden;\n }\n\n \/* Burbujas decorativas transparentes en esquinas *\/\n .formulario-acema::before {\n content: '';\n position: absolute;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(33, 91, 160, 0.08), rgba(33, 91, 160, 0));\n border-radius: 50%;\n top: -80px;\n right: -80px;\n pointer-events: none;\n z-index: 0;\n }\n\n .formulario-acema::after {\n content: '';\n position: absolute;\n width: 250px;\n height: 250px;\n background: radial-gradient(circle, rgba(64, 163, 53, 0.08), rgba(64, 163, 53, 0));\n border-radius: 50%;\n bottom: -120px;\n left: -100px;\n pointer-events: none;\n z-index: 0;\n }\n\n \/* Asegurar que el contenido est\u00e9 sobre las burbujas *\/\n .formulario-acema h2 {\n position: relative;\n z-index: 1;\n color:#40a335;\n text-align: center;\n font-weight: 900;\n font-size: 32px;\n margin-bottom: 40px;\n letter-spacing: -0.5px;\n }\n\n \/* Grid mejorado con mejor espaciado *\/\n .grid-layout {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 24px;\n margin-bottom: 24px;\n position: relative;\n z-index: 1;\n }\n\n .column {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n \/* Select row mejorado *\/\n .select-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n margin-bottom: 24px;\n position: relative;\n z-index: 1;\n }\n\n \/* Campos de formulario - minimalista *\/\n .formulario-acema input[type=\"text\"],\n .formulario-acema input[type=\"email\"],\n .formulario-acema input[type=\"tel\"],\n .formulario-acema select,\n .formulario-acema textarea,\n .formulario-acema input[type=\"file\"] {\n width: 100%;\n background-color: transparent;\n color: #727272a8;\n border: none;\n border-bottom: 2px solid #e2e8f0;\n border-radius: 0;\n padding: 14px 0 8px;\n font-size: 15px;\n font-family: inherit;\n transition: all 0.25s ease;\n appearance: none;\n cursor: pointer;\n }\n\n \/* Estilo espec\u00edfico para el select \"Tipo de solicitud\" *\/\n .formulario-acema select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n background-size: 16px;\n padding-right: 40px;\n background-color: white;\n }\n\n \/* Estados hover y focus para select *\/\n .formulario-acema select:hover {\n border-bottom-color: #93c5fd;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23215ba0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n }\n\n .formulario-acema select:focus {\n outline: none;\n border-bottom-color: #7eb3f3;\n background-color: transparent;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23215ba0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n box-shadow: 0 2px 0 0 rgba(33, 91, 160, 0.1);\n }\n \n\n \/* Estilo para cuando se ha seleccionado una opci\u00f3n *\/\n .formulario-acema select:valid:not([value=\"\"]) {\n color: #334155;\n font-weight: 500;\n }\n\n \/* Estilo para la opci\u00f3n por defecto *\/\n .formulario-acema select option[value=\"\"] {\n color: #215ba0;\n font-style: italic;\n }\n\n \/* Estilo para las opciones del dropdown *\/\n .formulario-acema select option {\n background-color: white;\n color: #215ba0;\n padding: 12px 16px;\n font-size: 15px;\n font-family: inherit;\n transition: all 0.2s ease;\n border-bottom: 1px solid #f1f5f9;\n }\n\n \/* Estilo para la \u00faltima opci\u00f3n (sin borde inferior) *\/\n .formulario-acema select option:last-child {\n border-bottom: none;\n }\n\n \/* Estilo para opciones al hacer hover en el dropdown *\/\n .formulario-acema select option:hover {\n background-color: #dbeafe;\n color: #215ba0;\n padding-left: 20px;\n cursor: pointer;\n }\n\n \/* Estilo para opci\u00f3n seleccionada en el dropdown *\/\n .formulario-acema select option:checked {\n background: linear-gradient(135deg, #215ba0 0%, #2563eb 100%);\n color:#215ba0;\n border-radius: 15px;\n font-weight: 500;\n position: relative;\n }\n\n \/* Flecha decorativa para opci\u00f3n seleccionada *\/\n .formulario-acema select option:checked::after {\n content: \"\u2713\";\n position: absolute;\n right: 16px;\n font-size: 14px;\n font-weight: bold;\n }\n\n \/* Estados focus mejorados *\/\n .formulario-acema input:focus,\n .formulario-acema select:focus,\n .formulario-acema textarea:focus {\n outline: none;\n border-bottom-color: #215ba0;\n box-shadow: 0 2px 0 0 rgba(33, 91, 160, 0.1);\n background-color: transparent;\n }\n\n \/* Placeholders elegantes *\/\n .formulario-acema input::placeholder,\n .formulario-acema textarea::placeholder {\n color: transparent;\n opacity: 1;\n transition: color 0.2s ease;\n }\n\n .formulario-acema input:focus::placeholder,\n .formulario-acema textarea:focus::placeholder {\n color:#929292a8;\n }\n\n \/* \u00c1rea de mensaje *\/\n .formulario-acema textarea {\n height: 140px;\n resize: vertical;\n min-height: 140px;\n margin-bottom: 32px;\n font-family: inherit;\n line-height: 1.5;\n border: 1px solid rgb(214, 212, 212);\n border-radius: 13px ;\n \n }\n\n \/* Estilos para etiquetas flotantes *\/\n .field-container {\n position: relative;\n margin-bottom: 8px;\n z-index: 1;\n }\n\n .field-label {\n position: absolute;\n top: 18px;\n left: 0;\n font-size: 15px;\n font-weight: 500;\n color:#929292a8; ;\n pointer-events: none;\n transition: all 0.2s ease;\n transform-origin: left center;\n margin: 0;\n padding: 0;\n }\n\n \/* Estados de la etiqueta flotante *\/\n .field-container.focused .field-label,\n .field-container.has-value .field-label {\n top: 0;\n font-size: 12px;\n color: #215ba0;\n transform: translateY(0);\n font-weight: 600;\n }\n\n .field-container select ~ .field-label {\n background-color: white;\n padding-right: 30px;\n padding-left: 4px;\n z-index: 1;\n }\n\n \/* Campos con valor pero sin foco *\/\n .field-container input:not(:placeholder-shown) ~ .field-label,\n .field-container textarea:not(:placeholder-shown) ~ .field-label,\n .field-container select:valid:not([value=\"\"]) ~ .field-label {\n top: 0;\n font-size: 12px;\n color: #64748b;\n font-weight: 500;\n }\n\n \/* Select enfocado *\/\n .field-container select:focus ~ .field-label {\n color: #215ba0;\n font-weight: 600;\n }\n\n \/* Privacidad - m\u00e1s minimalista *\/\n .privacy-card {\n background: #f8fafc;\n border-radius: 12px;\n padding: 16px;\n margin: 0 0 32px 0;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n border: 1px solid #e2e8f0;\n width: fit-content;\n position: relative;\n z-index: 1;\n }\n\n .privacy-title {\n color: #1e293b;\n font-weight: 600;\n font-size: 15px;\n margin: 0;\n }\n\n .privacy-card a {\n color: #40a335;\n font-weight: 500;\n text-decoration: none;\n transition: color 0.2s ease;\n font-size: 14px;\n }\n\n .privacy-card a:hover {\n color: #047857;\n text-decoration: underline;\n }\n\n \/* Checkbox wrapper mejorado *\/\n .checkbox-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 4px;\n }\n\n \/* Checkbox personalizado *\/\n .wpcf7-list-item {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .formulario-acema .privacy-card input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n border-radius: 3px;\n border: 1.5px solid #cbd5e1;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n }\n\n .formulario-acema .privacy-card input[type=\"checkbox\"]:checked {\n background-color: #40a335;\n border-color: #059669;\n }\n\n .wpcf7-list-item-label {\n color: #475569;\n font-size: 13px;\n cursor: pointer;\n margin: 0;\n }\n\n \/* Bot\u00f3n de enviar - CENTRADO HORIZONTALMENTE *\/\n .submit-wrapper {\n text-align: center;\n width: 100%;\n margin-top: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n z-index: 1;\n }\n\n .formulario-acema input[type=\"submit\"] {\n background-color: #215ba0;\n color: white;\n padding: 16px 48px;\n border-radius: 12px;\n border: none;\n font-weight: 600;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.25s ease;\n display: inline-block;\n letter-spacing: 0.3px;\n min-width: 220px;\n box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);\n }\n\n .formulario-acema input[type=\"submit\"]:hover {\n background-color: #1d4ed8;\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25);\n }\n\n .formulario-acema input[type=\"submit\"]:active {\n transform: translateY(-1px);\n }\n\n \/* Campo de archivo mejorado *\/\n .hidden-cv {\n display: none;\n opacity: 0;\n transform: translateY(-10px);\n transition: all 0.3s ease;\n }\n\n .hidden-cv.active {\n display: flex;\n flex-direction: column;\n gap: 16px;\n opacity: 1;\n transform: translateY(0);\n }\n\n .file-wrapper {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 12px;\n flex-wrap: nowrap;\n }\n\n .hidden-cv p {\n color: #215ba0;\n font-weight: 600;\n font-size: 12px;\n text-align: left;\n margin: 0;\n flex: 0 0 auto;\n white-space: nowrap;\n padding: 0;\n align-self: center;\n }\n\n \/* Input file personalizado - minimalista y compacto *\/\n .formulario-acema input[type=\"file\"] {\n padding: 8px;\n cursor: pointer;\n border: 2px dashed #e2e8f0;\n background-color: white;\n border-radius: 6px;\n width: auto;\n display: inline-block;\n flex: 0 0 auto;\n font-size: 13px;\n }\n\n .vacante-input {\n flex: 1 1 auto;\n min-width: 140px;\n padding: 14px 0 8px;\n border: none;\n border-bottom: 2px solid #e2e8f0;\n font-family: inherit;\n font-size: 15px;\n background-color: transparent;\n color: #727272a8;\n width: 100%;\n transition: all 0.25s ease;\n }\n\n .formulario-acema input[type=\"file\"]:hover {\n border-color: #3b82f6;\n background-color: #f8fafc;\n }\n\n \/* Placeholder visible para vacante input *\/\n .vacante-input::placeholder {\n color: #929292a8;\n opacity: 1;\n }\n\n .formulario-acema input[type=\"file\"]::-webkit-file-upload-button {\n background-color: #215ba0;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n margin-right: 8px;\n cursor: pointer;\n font-family: inherit;\n font-size: 12px;\n font-weight: 500;\n transition: all 0.2s ease;\n }\n\n .formulario-acema input[type=\"file\"]::-webkit-file-upload-button:hover {\n background-color: #1d4ed8;\n transform: translateY(-1px);\n }\n\n \/* Mensaje de error *\/\n .error-message {\n color: #ef4444;\n font-size: 13px;\n font-weight: 500;\n margin-top: 8px;\n display: none;\n animation: slideIn 0.3s ease;\n }\n\n .error-message.show {\n display: block;\n }\n\n \/* Alerta de archivo faltante *\/\n .file-alert {\n background-color: #fee2e2;\n border: 1px solid #fecaca;\n border-radius: 8px;\n padding: 10px 12px;\n margin-top: 8px;\n display: none;\n font-size: 13px;\n color: #991b1b;\n font-weight: 500;\n }\n\n .file-alert.show {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .file-alert::before {\n content: \"\u26a0\";\n font-size: 16px;\n flex-shrink: 0;\n }\n\n \/* =========================================\n ESTILOS PARA EL POPUP\/MODAL\n ========================================= *\/\n .success-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .success-modal.active {\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 1;\n }\n\n .modal-content {\n background: white;\n border-radius: 20px;\n padding: 32px 32px;\n width: 90%;\n max-width: 420px;\n text-align: center;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n border: 1px solid rgba(226, 232, 240, 0.8);\n transform: translateY(30px) scale(0.95);\n opacity: 0;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n position: relative;\n overflow: hidden;\n }\n\n .success-modal.active .modal-content {\n transform: translateY(0) scale(1);\n opacity: 1;\n }\n\n \/* Icono de \u00e9xito *\/\n .modal-icon {\n width: 70px;\n height: 70px;\n background: linear-gradient(135deg, #215ba0 0%, #40a335 100%);\n border-radius: 50%;\n margin: 0 auto 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: iconPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;\n }\n\n .modal-icon svg {\n width: 40px;\n height: 40px;\n fill: white;\n }\n\n @keyframes iconPop {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 70% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n }\n\n \/* T\u00edtulo del modal *\/\n .modal-title {\n color: #1e293b;\n font-weight: 700;\n font-size: 24px;\n margin-bottom: 12px;\n letter-spacing: -0.5px;\n }\n\n \/* Mensaje del modal *\/\n .modal-message {\n color: #64748b;\n font-size: 15px;\n line-height: 1.5;\n margin-bottom: 24px;\n max-width: 380px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* Bot\u00f3n del modal *\/\n .modal-button {\n background: linear-gradient(135deg, #215ba0 0%, #2563eb 100%);\n color: white;\n border: none;\n padding: 16px 40px;\n border-radius: 12px;\n font-weight: 600;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: inline-block;\n letter-spacing: 0.3px;\n box-shadow: 0 4px 20px rgba(33, 91, 160, 0.2);\n }\n\n .modal-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(33, 91, 160, 0.3);\n }\n\n .modal-button:active {\n transform: translateY(-1px);\n }\n\n \/* Animaci\u00f3n de confeti *\/\n .confetti {\n position: absolute;\n width: 10px;\n height: 10px;\n background: #f59e0b;\n opacity: 0;\n }\n\n \/* Decoraci\u00f3n sutil *\/\n .modal-decoration {\n position: absolute;\n width: 200px;\n height: 200px;\n background: linear-gradient(135deg, rgba(33, 91, 160, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);\n border-radius: 50%;\n top: -100px;\n right: -100px;\n z-index: -1;\n }\n\n .modal-decoration:nth-child(2) {\n width: 150px;\n height: 150px;\n background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);\n bottom: -75px;\n left: -75px;\n top: auto;\n right: auto;\n }\n\n \/* Animaciones sutiles *\/\n .formulario-acema input,\n .formulario-acema select,\n .formulario-acema textarea {\n animation: fadeIn 0.3s ease-out;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(5px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Animaci\u00f3n para el select cuando cambia *\/\n @keyframes selectChange {\n 0% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-2px);\n }\n 100% {\n transform: translateY(0);\n }\n }\n\n .formulario-acema select.changed {\n animation: selectChange 0.3s ease;\n }\n\n \/* Responsivo mejorado *\/\n @media (max-width: 768px) {\n .formulario-acema {\n padding: 32px 24px;\n margin: 0;\n }\n\n .formulario-acema h2 {\n font-size: 28px;\n margin-bottom: 32px;\n }\n\n .grid-layout {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .select-row {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .privacy-card {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n margin-bottom: 24px;\n }\n\n \/* Bot\u00f3n centrado en m\u00f3vil *\/\n .submit-wrapper {\n margin-top: 16px;\n }\n\n .formulario-acema input[type=\"submit\"] {\n width: 100%;\n max-width: 280px;\n padding: 16px;\n }\n\n \/* Ajuste para select en m\u00f3viles *\/\n .formulario-acema select {\n font-size: 16px; \/* Previene zoom en iOS *\/\n padding: 16px 0 10px;\n }\n\n \/* Modal responsive *\/\n .modal-content {\n padding: 28px 24px;\n margin: 20px;\n width: calc(100% - 40px);\n }\n\n .modal-title {\n font-size: 22px;\n margin-bottom: 10px;\n }\n\n .modal-message {\n font-size: 14px;\n padding: 0 10px;\n margin-bottom: 20px;\n }\n\n .modal-icon {\n width: 65px;\n height: 65px;\n margin-bottom: 14px;\n }\n\n \/* ...existing code... *\/\n }\n\n \/* Para pantallas muy peque\u00f1as *\/\n @media (max-width: 480px) {\n body {\n padding: 12px;\n }\n\n .formulario-acema {\n padding: 24px 20px;\n border-radius: 12px;\n }\n\n .formulario-acema h2 {\n font-size: 24px;\n margin-bottom: 28px;\n }\n\n .formulario-acema input[type=\"submit\"] {\n min-width: auto;\n width: 100%;\n padding: 16px 24px;\n }\n\n .modal-content {\n padding: 24px 18px;\n }\n\n .modal-title {\n font-size: 20px;\n margin-bottom: 8px;\n }\n\n \/* ...existing code... *\/\n }\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<div class=\"formulario-acema\">\n\t\t\t<h2>\u00a1CONT\u00c1CTANOS!\n\t\t\t<\/h2>\n\t\t\t<div class=\"grid-layout\">\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"nombre\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"text\" name=\"nombre\" \/><\/span><br \/>\n<span class=\"field-label\">Nombres<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"apellidos\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"text\" name=\"apellidos\" \/><\/span><br \/>\n<span class=\"field-label\">Apellidos<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"telefono\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"tel\" name=\"telefono\" \/><\/span><br \/>\n<span class=\"field-label\">Tel\u00e9fono<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"correo\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"email\" name=\"correo\" \/><\/span><br \/>\n<span class=\"field-label\">Correo electr\u00f3nico<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"select-row\">\n\t\t\t\t<div class=\"select-wrapper\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><select id=\"tipo-solicitud\" name=\"destino\" required>\n <option value=\"\" selected disabled>Tipo de solicitud<\/option>\n <option value=\"comercial.solar@acemaingenieria.com\">Servicios solares<\/option>\n <option value=\"comercial@acemaingenieria.com\">Servicios el\u00e9ctricos<\/option>\n <option value=\"desarrollo.humano@acemaingenieria.com\">Trabaja con nosotros<\/option>\n <\/select><br \/>\n<span class=\"field-label\"><\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div id=\"cv-wrapper\" class=\"hidden-cv\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><input type=\"text\" name=\"vacante\" id=\"vacante\" class=\"vacante-input\" placeholder=\" \" \/><br \/>\n<span class=\"field-label\">Vacante a la que aplica<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"file-wrapper\">\n\t\t\t\t\t\t<p>Adjunta tu hoja de vida\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"hoja_de_vida\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-file\" accept=\".pdf,.doc,.docx\" aria-invalid=\"false\" type=\"file\" name=\"hoja_de_vida\" \/><\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<div class=\"file-alert\" id=\"file-alert\">\n\t\t\t\t\t\t\t<p>Archivo requerido\n\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"error-message\" id=\"file-error\">\n\t\t\t\t\t\t\t<p>Por favor, adjunta tu hoja de vida\n\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"field-container\">\n\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"mensaje\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"\" name=\"mensaje\"><\/textarea><\/span><br \/>\n<span class=\"field-label\">Mensaje<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t<div class=\"privacy-card\">\n\t\t\t\t<p><span class=\"privacy-title\">Pol\u00edticas de privacidad<\/span><br \/>\n<a href=\"\/politica-privacidad\" target=\"_blank\">Ver pol\u00edticas<\/a>\n\t\t\t\t<\/p>\n\t\t\t\t<div class=\"checkbox-wrapper\">\n\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"acepto\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"acepto\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Acepto<\/span><\/label><\/span><\/span><\/span>\n\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"submit-wrapper\">\n\t\t\t\t<p><input type=\"submit\" value=\"Enviar mensaje\" id=\"submit-button\" \/>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n \n <!-- Este div se usa para ocultar cualquier mensaje de confirmaci\u00f3n de Contact Form 7 -->\n\t\t\t<div style=\"display: none;\">\n\t\t\t\t<div class=\"wpcf7-response-output\" aria-hidden=\"true\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"wpcf7-mail-sent-ok\" style=\"display: none;\">\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n <!-- Modal de \u00e9xito -->\n\t\t<div class=\"success-modal\" id=\"successModal\">\n\t\t\t<div class=\"modal-content\">\n\t\t\t\t<div class=\"modal-decoration\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"modal-decoration\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"modal-icon\">\n\t\t\t\t\t<p><svg viewBox=\"0 0 24 24\">\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/>\n <\/svg>\n\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t\t<h3 class=\"modal-title\">\u00a1Mensaje Enviado!\n\t\t\t\t<\/h3>\n\t\t\t\t<p class=\"modal-message\"><br \/>\nGracias por tu mensaje. Ha sido enviado correctamente.\n\t\t\t\t<\/p>\n\t\t\t\t<p>Nos pondremos en contacto contigo pronto.\n\t\t\t\t<\/p>\n\t\t\t\t<p><button class=\"modal-button\" id=\"closeModal\">Aceptar<\/button>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<p><script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const selectDestino = document.getElementById(\"tipo-solicitud\");\n const cvWrapper = document.getElementById(\"cv-wrapper\");\n const fileInput = cvWrapper ? cvWrapper.querySelector('input[type=\"file\"]') : null;\n const errorMessage = document.getElementById(\"file-error\");\n const fileAlert = document.getElementById(\"file-alert\");\n const form = document.querySelector('.formulario-acema');\n const submitButton = document.getElementById(\"submit-button\");\n const successModal = document.getElementById(\"successModal\");\n const closeModalBtn = document.getElementById(\"closeModal\");\n\n \/\/ Ocultar cualquier mensaje de Contact Form 7 que pueda aparecer\n function hideCF7Messages() {\n \/\/ Ocultar todos los mensajes de Contact Form 7\n const cf7Messages = document.querySelectorAll('.wpcf7-response-output, .wpcf7-mail-sent-ok, .wpcf7-mail-sent-ng, .wpcf7-spam-blocked, .wpcf7-validation-errors');\n cf7Messages.forEach(message => {\n message.style.display = 'none';\n message.setAttribute('aria-hidden', 'true');\n });\n \n \/\/ Tambi\u00e9n ocultar cualquier mensaje dentro del formulario\n const allMessages = document.querySelectorAll('.formulario-acema div[role=\"alert\"], .formulario-acema .alert, .formulario-acema .success-message');\n allMessages.forEach(message => {\n message.style.display = 'none';\n });\n }\n\n \/\/ Funci\u00f3n para inicializar etiquetas flotantes\n function initFloatingLabels() {\n const fieldContainers = document.querySelectorAll('.field-container');\n \n fieldContainers.forEach(container => {\n const input = container.querySelector('input, textarea, select');\n const label = container.querySelector('.field-label');\n \n if (!input || !label) return;\n \n \/\/ Inicializar estado\n updateLabelState(input, container);\n \n \/\/ Eventos para input\n input.addEventListener('focus', function() {\n container.classList.add('focused');\n updateLabelState(this, container);\n \n \/\/ Efecto especial para select\n if (this.tagName === 'SELECT') {\n this.style.borderBottomColor = '#215ba0';\n }\n });\n \n input.addEventListener('blur', function() {\n container.classList.remove('focused');\n updateLabelState(this, container);\n \n \/\/ Reset para select\n if (this.tagName === 'SELECT') {\n if (!this.value) {\n this.style.borderBottomColor = '#e2e8f0';\n }\n }\n });\n \n \/\/ Evento para cambios (para select y input)\n input.addEventListener('change', function() {\n updateLabelState(this, container);\n \n \/\/ Animaci\u00f3n para select cuando cambia\n if (this.tagName === 'SELECT' && this.value) {\n this.classList.add('changed');\n setTimeout(() => {\n this.classList.remove('changed');\n }, 300);\n }\n });\n \n \/\/ Evento para input (para campos de texto)\n input.addEventListener('input', function() {\n updateLabelState(this, container);\n });\n \n \/\/ Inicializar con el valor actual (para campos precargados)\n if (input.value) {\n container.classList.add('has-value');\n }\n });\n }\n \n function updateLabelState(input, container) {\n const label = container.querySelector('.field-label');\n \n if (input.tagName === 'SELECT') {\n \/\/ Para select\n if (input.value && input.value !== \"\") {\n container.classList.add('has-value');\n label.style.color = '#64748b';\n input.style.color = '#334155';\n } else {\n container.classList.remove('has-value');\n input.style.color = '#94a3b8';\n }\n } else if (input.tagName === 'TEXTAREA') {\n \/\/ Para textarea\n if (input.value.trim()) {\n container.classList.add('has-value');\n } else {\n container.classList.remove('has-value');\n }\n } else {\n \/\/ Para inputs normales\n if (input.value.trim()) {\n container.classList.add('has-value');\n } else {\n container.classList.remove('has-value');\n }\n }\n }\n\n \/\/ Funci\u00f3n para mostrar el modal de \u00e9xito\n function showSuccessModal() {\n \/\/ Primero ocultamos cualquier mensaje de CF7\n hideCF7Messages();\n \n \/\/ Luego mostramos nuestro modal\n successModal.classList.add('active');\n document.body.style.overflow = 'hidden'; \/\/ Previene scroll\n \n \/\/ Crear efecto de confeti simple\n createConfetti();\n }\n\n \/\/ Funci\u00f3n para cerrar el modal\n function closeSuccessModal() {\n successModal.classList.remove('active');\n document.body.style.overflow = 'auto'; \/\/ Restaura scroll\n \n \/\/ Limpiar el formulario despu\u00e9s de enviar\n if (form) {\n form.reset();\n \n \/\/ Resetear las etiquetas flotantes\n const fieldContainers = document.querySelectorAll('.field-container');\n fieldContainers.forEach(container => {\n container.classList.remove('has-value');\n const input = container.querySelector('input, textarea, select');\n if (input && input.tagName === 'SELECT') {\n input.style.color = '#94a3b8';\n }\n });\n \n \/\/ Resetear el campo CV\n if (cvWrapper) {\n cvWrapper.classList.remove(\"active\");\n if (fileInput) {\n fileInput.removeAttribute(\"required\");\n }\n }\n }\n \n \/\/ Asegurarnos de que los mensajes de CF7 permanezcan ocultos\n setTimeout(hideCF7Messages, 100);\n }\n\n \/\/ Funci\u00f3n para crear efecto de confeti simple\n function createConfetti() {\n const modalContent = document.querySelector('.modal-content');\n const colors = ['#215ba0', '#2563eb', '#10b981', '#f59e0b', '#ef4444'];\n \n for (let i = 0; i < 20; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.left = Math.random() * 100 + '%';\n confetti.style.top = '-10px';\n confetti.style.transform = `rotate(${Math.random() * 360}deg)`;\n confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';\n \n modalContent.appendChild(confetti);\n \n \/\/ Animaci\u00f3n\n setTimeout(() => {\n confetti.style.transition = 'all 1s cubic-bezier(0.1, 0.8, 0.3, 1)';\n confetti.style.opacity = '1';\n confetti.style.transform = `translateY(${window.innerHeight}px) rotate(${Math.random() * 720}deg)`;\n \n \/\/ Eliminar despu\u00e9s de la animaci\u00f3n\n setTimeout(() => {\n confetti.remove();\n }, 1000);\n }, i * 50);\n }\n }\n\n \/\/ Event listeners para el modal\n if (closeModalBtn) {\n closeModalBtn.addEventListener('click', closeSuccessModal);\n }\n\n \/\/ Cerrar modal al hacer clic fuera del contenido\n if (successModal) {\n successModal.addEventListener('click', function(e) {\n if (e.target === this) {\n closeSuccessModal();\n }\n });\n }\n\n \/\/ Cerrar modal con la tecla Escape\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && successModal.classList.contains('active')) {\n closeSuccessModal();\n }\n });\n\n if (selectDestino && cvWrapper) {\n \/\/ Funci\u00f3n para mostrar\/ocultar el campo CV\n function toggleCVField() {\n const selectedOption = selectDestino.options[selectDestino.selectedIndex];\n const selectedText = selectedOption ? selectedOption.text : '';\n const fileAlert = document.getElementById(\"file-alert\");\n\n if (selectedText === \"Trabaja con nosotros\") {\n cvWrapper.classList.add(\"active\");\n if (fileInput) {\n fileInput.setAttribute(\"required\", \"required\");\n fileInput.parentElement.style.borderColor = \"#ef4444\";\n }\n } else {\n cvWrapper.classList.remove(\"active\");\n if (fileInput) {\n fileInput.removeAttribute(\"required\");\n fileInput.parentElement.style.borderColor = \"\";\n errorMessage.classList.remove(\"show\");\n if (fileAlert) {\n fileAlert.classList.remove(\"show\");\n }\n }\n }\n }\n\n \/\/ Ejecutar al cambiar la selecci\u00f3n\n selectDestino.addEventListener(\"change\", function() {\n toggleCVField();\n \n \/\/ Cambiar color del texto cuando se selecciona una opci\u00f3n v\u00e1lida\n if (this.value) {\n this.style.color = '#334155';\n } else {\n this.style.color = '#94a3b8';\n }\n });\n\n \/\/ Ejecutar al cargar la p\u00e1gina\n toggleCVField();\n\n \/\/ Validar archivo antes de enviar\n if (form && submitButton) {\n submitButton.addEventListener(\"click\", function(e) {\n const selectedOption = selectDestino.options[selectDestino.selectedIndex];\n const selectedText = selectedOption ? selectedOption.text : '';\n const fileAlert = document.getElementById(\"file-alert\");\n \n if (selectedText === \"Trabaja con nosotros\" && fileInput && !fileInput.value) {\n e.preventDefault();\n fileInput.focus();\n fileInput.parentElement.style.borderColor = \"#ef4444\";\n fileInput.parentElement.style.boxShadow = \"0 0 0 3px rgba(239, 68, 68, 0.1)\";\n errorMessage.classList.add(\"show\");\n if (fileAlert) {\n fileAlert.classList.add(\"show\");\n }\n return false;\n }\n \n \/\/ Simular env\u00edo exitoso (en producci\u00f3n, esto se har\u00eda con AJAX)\n e.preventDefault();\n console.log('Mostrando modal...'); \/\/ Debug\n showSuccessModal();\n });\n }\n\n \/\/ Limpiar el error cuando se selecciona un archivo\n if (fileInput) {\n fileInput.addEventListener(\"change\", function() {\n const fileAlert = document.getElementById(\"file-alert\");\n if (this.value) {\n this.parentElement.style.borderColor = \"#e2e8f0\";\n this.parentElement.style.boxShadow = \"none\";\n errorMessage.classList.remove(\"show\");\n if (fileAlert) {\n fileAlert.classList.remove(\"show\");\n }\n }\n });\n }\n }\n\n \/\/ Mejorar la experiencia del checkbox\n const checkboxes = document.querySelectorAll('input[type=\"checkbox\"]');\n checkboxes.forEach(checkbox => {\n checkbox.addEventListener('change', function() {\n if(this.checked) {\n this.style.boxShadow = '0 0 0 3px rgba(5, 150, 105, 0.1)';\n } else {\n this.style.boxShadow = 'none';\n }\n });\n });\n\n \/\/ Cambiar texto del bot\u00f3n file input a espa\u00f1ol\n if (fileInput) {\n fileInput.setAttribute('accept', '.pdf,.doc,.docx');\n \/\/ Para navegadores que soportan el atributo capture\n const fileLabel = fileInput.parentElement;\n if (fileLabel) {\n \/\/ Crear un wrapper personalizado con etiqueta en espa\u00f1ol\n const customLabel = document.createElement('label');\n customLabel.style.cursor = 'pointer';\n customLabel.style.display = 'inline-flex';\n customLabel.style.alignItems = 'center';\n customLabel.style.gap = '8px';\n \n \/\/ El input mantiene su funcionalidad pero est\u00e1 oculto\n fileInput.style.display = 'none';\n \n const buttonSpan = document.createElement('span');\n buttonSpan.textContent = 'Seleccionar archivo';\n buttonSpan.style.backgroundColor = '#215ba0';\n buttonSpan.style.color = 'white';\n buttonSpan.style.padding = '6px 12px';\n buttonSpan.style.borderRadius = '4px';\n buttonSpan.style.fontSize = '12px';\n buttonSpan.style.fontWeight = '500';\n buttonSpan.style.cursor = 'pointer';\n buttonSpan.style.transition = 'all 0.2s ease';\n buttonSpan.style.fontFamily = 'inherit';\n \n const fileNameSpan = document.createElement('span');\n fileNameSpan.textContent = 'Ning\u00fan archivo seleccionado';\n fileNameSpan.style.fontSize = '12px';\n fileNameSpan.style.color = '#64748b';\n fileNameSpan.style.fontFamily = 'inherit';\n \n customLabel.appendChild(buttonSpan);\n customLabel.appendChild(fileNameSpan);\n \n fileInput.parentElement.insertBefore(customLabel, fileInput);\n \n \/\/ Actualizar nombre del archivo cuando se selecciona\n fileInput.addEventListener('change', function() {\n if (this.files && this.files[0]) {\n fileNameSpan.textContent = this.files[0].name;\n fileNameSpan.style.color = '#215ba0';\n fileNameSpan.style.fontWeight = '500';\n buttonSpan.style.backgroundColor = '#1d4ed8';\n }\n });\n \n \/\/ Hover effect\n buttonSpan.addEventListener('mouseenter', function() {\n this.style.backgroundColor = '#1d4ed8';\n this.style.transform = 'translateY(-1px)';\n });\n \n buttonSpan.addEventListener('mouseleave', function() {\n this.style.backgroundColor = fileInput.files && fileInput.files[0] ? '#1d4ed8' : '#215ba0';\n this.style.transform = 'translateY(0)';\n });\n \n \/\/ Click en el label activa el input file\n customLabel.addEventListener('click', function(e) {\n if (e.target !== fileInput) {\n fileInput.click();\n }\n });\n }\n }\n\n \/\/ Inicializar etiquetas flotantes\n initFloatingLabels();\n \n \/\/ Ocultar mensajes de CF7 al cargar la p\u00e1gina\n hideCF7Messages();\n \n \/\/ Observador para detectar y ocultar mensajes que aparezcan din\u00e1micamente\n const observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(mutation) {\n if (mutation.addedNodes && mutation.addedNodes.length > 0) {\n hideCF7Messages();\n }\n });\n });\n \n \/\/ Observar cambios en el formulario\n if (form) {\n observer.observe(form, { childList: true, subtree: true });\n }\n });\n <\/script>\n\t\t<\/p>\n\t<\/body>\n<\/html><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row disabled_on=\u00bbon|on|on\u00bb _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb disabled=\u00bbon\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f3675-o2\" lang=\"es-ES\" dir=\"ltr\" data-wpcf7-id=\"3675\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/1734#wpcf7-f3675-o2\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulario de contacto\" enctype=\"multipart\/form-data\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"3675\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"es_ES\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f3675-o2\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><!DOCTYPE html>\n<\/p>\n<html lang=\"es\">\n\t<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n\t\t<title>Formulario Minimalista\n\t\t<\/title>\n\t\t<style>\n \/* =========================================\n ESTILOS MEJORADOS - MINIMALISTA CON BUEN UX\n ========================================= *\/\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n background-color: #f8fafc;\n margin: 0;\n padding: 0;\n color: #334155;\n line-height: 1.6;\n }\n\n .formulario-acema {\n background: white;\n border-radius: 16px;\n padding: 48px 40px;\n width: 100%;\n \n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);\n border: 1px solid rgba(226, 232, 240, 0.6);\n position: relative;\n overflow: hidden;\n }\n\n \/* Burbujas decorativas transparentes en esquinas *\/\n .formulario-acema::before {\n content: '';\n position: absolute;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(33, 91, 160, 0.08), rgba(33, 91, 160, 0));\n border-radius: 50%;\n top: -80px;\n right: -80px;\n pointer-events: none;\n z-index: 0;\n }\n\n .formulario-acema::after {\n content: '';\n position: absolute;\n width: 250px;\n height: 250px;\n background: radial-gradient(circle, rgba(64, 163, 53, 0.08), rgba(64, 163, 53, 0));\n border-radius: 50%;\n bottom: -120px;\n left: -100px;\n pointer-events: none;\n z-index: 0;\n }\n\n \/* Asegurar que el contenido est\u00e9 sobre las burbujas *\/\n .formulario-acema h2 {\n position: relative;\n z-index: 1;\n color:#40a335;\n text-align: center;\n font-weight: 900;\n font-size: 32px;\n margin-bottom: 40px;\n letter-spacing: -0.5px;\n }\n\n \/* Grid mejorado con mejor espaciado *\/\n .grid-layout {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 24px;\n margin-bottom: 24px;\n position: relative;\n z-index: 1;\n }\n\n .column {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n \/* Select row mejorado *\/\n .select-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n margin-bottom: 24px;\n position: relative;\n z-index: 1;\n }\n\n \/* Campos de formulario - minimalista *\/\n .formulario-acema input[type=\"text\"],\n .formulario-acema input[type=\"email\"],\n .formulario-acema input[type=\"tel\"],\n .formulario-acema select,\n .formulario-acema textarea,\n .formulario-acema input[type=\"file\"] {\n width: 100%;\n background-color: transparent;\n color: #727272a8;\n border: none;\n border-bottom: 2px solid #e2e8f0;\n border-radius: 0;\n padding: 14px 0 8px;\n font-size: 15px;\n font-family: inherit;\n transition: all 0.25s ease;\n appearance: none;\n cursor: pointer;\n }\n\n \/* Estilo espec\u00edfico para el select \"Tipo de solicitud\" *\/\n .formulario-acema select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n background-size: 16px;\n padding-right: 40px;\n background-color: white;\n }\n\n \/* Estados hover y focus para select *\/\n .formulario-acema select:hover {\n border-bottom-color: #93c5fd;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23215ba0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n }\n\n .formulario-acema select:focus {\n outline: none;\n border-bottom-color: #7eb3f3;\n background-color: transparent;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23215ba0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n box-shadow: 0 2px 0 0 rgba(33, 91, 160, 0.1);\n }\n \n\n \/* Estilo para cuando se ha seleccionado una opci\u00f3n *\/\n .formulario-acema select:valid:not([value=\"\"]) {\n color: #334155;\n font-weight: 500;\n }\n\n \/* Estilo para la opci\u00f3n por defecto *\/\n .formulario-acema select option[value=\"\"] {\n color: #215ba0;\n font-style: italic;\n }\n\n \/* Estilo para las opciones del dropdown *\/\n .formulario-acema select option {\n background-color: white;\n color: #215ba0;\n padding: 12px 16px;\n font-size: 15px;\n font-family: inherit;\n transition: all 0.2s ease;\n border-bottom: 1px solid #f1f5f9;\n }\n\n \/* Estilo para la \u00faltima opci\u00f3n (sin borde inferior) *\/\n .formulario-acema select option:last-child {\n border-bottom: none;\n }\n\n \/* Estilo para opciones al hacer hover en el dropdown *\/\n .formulario-acema select option:hover {\n background-color: #dbeafe;\n color: #215ba0;\n padding-left: 20px;\n cursor: pointer;\n }\n\n \/* Estilo para opci\u00f3n seleccionada en el dropdown *\/\n .formulario-acema select option:checked {\n background: linear-gradient(135deg, #215ba0 0%, #2563eb 100%);\n color:#215ba0;\n border-radius: 15px;\n font-weight: 500;\n position: relative;\n }\n\n \/* Flecha decorativa para opci\u00f3n seleccionada *\/\n .formulario-acema select option:checked::after {\n content: \"\u2713\";\n position: absolute;\n right: 16px;\n font-size: 14px;\n font-weight: bold;\n }\n\n \/* Estados focus mejorados *\/\n .formulario-acema input:focus,\n .formulario-acema select:focus,\n .formulario-acema textarea:focus {\n outline: none;\n border-bottom-color: #215ba0;\n box-shadow: 0 2px 0 0 rgba(33, 91, 160, 0.1);\n background-color: transparent;\n }\n\n \/* Placeholders elegantes *\/\n .formulario-acema input::placeholder,\n .formulario-acema textarea::placeholder {\n color: transparent;\n opacity: 1;\n transition: color 0.2s ease;\n }\n\n .formulario-acema input:focus::placeholder,\n .formulario-acema textarea:focus::placeholder {\n color:#929292a8;\n }\n\n \/* \u00c1rea de mensaje *\/\n .formulario-acema textarea {\n height: 140px;\n resize: vertical;\n min-height: 140px;\n margin-bottom: 32px;\n font-family: inherit;\n line-height: 1.5;\n border: 1px solid rgb(214, 212, 212);\n border-radius: 13px ;\n \n }\n\n \/* Estilos para etiquetas flotantes *\/\n .field-container {\n position: relative;\n margin-bottom: 8px;\n z-index: 1;\n }\n\n .field-label {\n position: absolute;\n top: 18px;\n left: 0;\n font-size: 15px;\n font-weight: 500;\n color:#929292a8; ;\n pointer-events: none;\n transition: all 0.2s ease;\n transform-origin: left center;\n margin: 0;\n padding: 0;\n }\n\n \/* Estados de la etiqueta flotante *\/\n .field-container.focused .field-label,\n .field-container.has-value .field-label {\n top: 0;\n font-size: 12px;\n color: #215ba0;\n transform: translateY(0);\n font-weight: 600;\n }\n\n .field-container select ~ .field-label {\n background-color: white;\n padding-right: 30px;\n padding-left: 4px;\n z-index: 1;\n }\n\n \/* Campos con valor pero sin foco *\/\n .field-container input:not(:placeholder-shown) ~ .field-label,\n .field-container textarea:not(:placeholder-shown) ~ .field-label,\n .field-container select:valid:not([value=\"\"]) ~ .field-label {\n top: 0;\n font-size: 12px;\n color: #64748b;\n font-weight: 500;\n }\n\n \/* Select enfocado *\/\n .field-container select:focus ~ .field-label {\n color: #215ba0;\n font-weight: 600;\n }\n\n \/* Privacidad - m\u00e1s minimalista *\/\n .privacy-card {\n background: #f8fafc;\n border-radius: 12px;\n padding: 16px;\n margin: 0 0 32px 0;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n border: 1px solid #e2e8f0;\n width: fit-content;\n position: relative;\n z-index: 1;\n }\n\n .privacy-title {\n color: #1e293b;\n font-weight: 600;\n font-size: 15px;\n margin: 0;\n }\n\n .privacy-card a {\n color: #40a335;\n font-weight: 500;\n text-decoration: none;\n transition: color 0.2s ease;\n font-size: 14px;\n }\n\n .privacy-card a:hover {\n color: #047857;\n text-decoration: underline;\n }\n\n \/* Checkbox wrapper mejorado *\/\n .checkbox-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 4px;\n }\n\n \/* Checkbox personalizado *\/\n .wpcf7-list-item {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .formulario-acema .privacy-card input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n border-radius: 3px;\n border: 1.5px solid #cbd5e1;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n }\n\n .formulario-acema .privacy-card input[type=\"checkbox\"]:checked {\n background-color: #40a335;\n border-color: #059669;\n }\n\n .wpcf7-list-item-label {\n color: #475569;\n font-size: 13px;\n cursor: pointer;\n margin: 0;\n }\n\n \/* Bot\u00f3n de enviar - CENTRADO HORIZONTALMENTE *\/\n .submit-wrapper {\n text-align: center;\n width: 100%;\n margin-top: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n z-index: 1;\n }\n\n .formulario-acema input[type=\"submit\"] {\n background-color: #215ba0;\n color: white;\n padding: 16px 48px;\n border-radius: 12px;\n border: none;\n font-weight: 600;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.25s ease;\n display: inline-block;\n letter-spacing: 0.3px;\n min-width: 220px;\n box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);\n }\n\n .formulario-acema input[type=\"submit\"]:hover {\n background-color: #1d4ed8;\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25);\n }\n\n .formulario-acema input[type=\"submit\"]:active {\n transform: translateY(-1px);\n }\n\n \/* Campo de archivo mejorado *\/\n .hidden-cv {\n display: none;\n opacity: 0;\n transform: translateY(-10px);\n transition: all 0.3s ease;\n }\n\n .hidden-cv.active {\n display: block;\n opacity: 1;\n transform: translateY(0);\n }\n\n .file-wrapper {\n position: relative;\n }\n\n .hidden-cv p {\n color: #215ba0;\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 10px;\n text-align: left;\n }\n\n \/* Input file personalizado *\/\n .formulario-acema input[type=\"file\"] {\n padding: 12px;\n cursor: pointer;\n border: 2px dashed #e2e8f0;\n background-color: white;\n border-radius: 8px;\n }\n\n .formulario-acema input[type=\"file\"]:hover {\n border-color: #3b82f6;\n background-color: #f8fafc;\n }\n\n .formulario-acema input[type=\"file\"]::-webkit-file-upload-button {\n background-color: #215ba0;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 6px;\n margin-right: 12px;\n cursor: pointer;\n font-family: inherit;\n font-size: 14px;\n transition: all 0.2s ease;\n }\n\n .formulario-acema input[type=\"file\"]::-webkit-file-upload-button:hover {\n background-color: #1d4ed8;\n transform: translateY(-1px);\n }\n\n \/* Mensaje de error *\/\n .error-message {\n color: #ef4444;\n font-size: 13px;\n font-weight: 500;\n margin-top: 8px;\n display: none;\n animation: slideIn 0.3s ease;\n }\n\n .error-message.show {\n display: block;\n }\n\n \/* Alerta de archivo faltante *\/\n .file-alert {\n background-color: #fee2e2;\n border: 1px solid #fecaca;\n border-radius: 8px;\n padding: 10px 12px;\n margin-top: 8px;\n display: none;\n font-size: 13px;\n color: #991b1b;\n font-weight: 500;\n }\n\n .file-alert.show {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .file-alert::before {\n content: \"\u26a0\";\n font-size: 16px;\n flex-shrink: 0;\n }\n\n \/* =========================================\n ESTILOS PARA EL POPUP\/MODAL\n ========================================= *\/\n .success-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .success-modal.active {\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 1;\n }\n\n .modal-content {\n background: white;\n border-radius: 20px;\n padding: 32px 32px;\n width: 90%;\n max-width: 420px;\n text-align: center;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n border: 1px solid rgba(226, 232, 240, 0.8);\n transform: translateY(30px) scale(0.95);\n opacity: 0;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n position: relative;\n overflow: hidden;\n }\n\n .success-modal.active .modal-content {\n transform: translateY(0) scale(1);\n opacity: 1;\n }\n\n \/* Icono de \u00e9xito *\/\n .modal-icon {\n width: 70px;\n height: 70px;\n background: linear-gradient(135deg, #215ba0 0%, #40a335 100%);\n border-radius: 50%;\n margin: 0 auto 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: iconPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;\n }\n\n .modal-icon svg {\n width: 40px;\n height: 40px;\n fill: white;\n }\n\n @keyframes iconPop {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 70% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n }\n\n \/* T\u00edtulo del modal *\/\n .modal-title {\n color: #1e293b;\n font-weight: 700;\n font-size: 24px;\n margin-bottom: 12px;\n letter-spacing: -0.5px;\n }\n\n \/* Mensaje del modal *\/\n .modal-message {\n color: #64748b;\n font-size: 15px;\n line-height: 1.5;\n margin-bottom: 24px;\n max-width: 380px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* Bot\u00f3n del modal *\/\n .modal-button {\n background: linear-gradient(135deg, #215ba0 0%, #2563eb 100%);\n color: white;\n border: none;\n padding: 16px 40px;\n border-radius: 12px;\n font-weight: 600;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: inline-block;\n letter-spacing: 0.3px;\n box-shadow: 0 4px 20px rgba(33, 91, 160, 0.2);\n }\n\n .modal-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(33, 91, 160, 0.3);\n }\n\n .modal-button:active {\n transform: translateY(-1px);\n }\n\n \/* Animaci\u00f3n de confeti *\/\n .confetti {\n position: absolute;\n width: 10px;\n height: 10px;\n background: #f59e0b;\n opacity: 0;\n }\n\n \/* Decoraci\u00f3n sutil *\/\n .modal-decoration {\n position: absolute;\n width: 200px;\n height: 200px;\n background: linear-gradient(135deg, rgba(33, 91, 160, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);\n border-radius: 50%;\n top: -100px;\n right: -100px;\n z-index: -1;\n }\n\n .modal-decoration:nth-child(2) {\n width: 150px;\n height: 150px;\n background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);\n bottom: -75px;\n left: -75px;\n top: auto;\n right: auto;\n }\n\n \/* Animaciones sutiles *\/\n .formulario-acema input,\n .formulario-acema select,\n .formulario-acema textarea {\n animation: fadeIn 0.3s ease-out;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(5px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Animaci\u00f3n para el select cuando cambia *\/\n @keyframes selectChange {\n 0% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-2px);\n }\n 100% {\n transform: translateY(0);\n }\n }\n\n .formulario-acema select.changed {\n animation: selectChange 0.3s ease;\n }\n\n \/* Responsivo mejorado *\/\n @media (max-width: 768px) {\n .formulario-acema {\n padding: 32px 24px;\n margin: 0;\n }\n\n .formulario-acema h2 {\n font-size: 28px;\n margin-bottom: 32px;\n }\n\n .grid-layout {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .select-row {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .privacy-card {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n margin-bottom: 24px;\n }\n\n \/* Bot\u00f3n centrado en m\u00f3vil *\/\n .submit-wrapper {\n margin-top: 16px;\n }\n\n .formulario-acema input[type=\"submit\"] {\n width: 100%;\n max-width: 280px;\n padding: 16px;\n }\n\n \/* Ajuste para select en m\u00f3viles *\/\n .formulario-acema select {\n font-size: 16px; \/* Previene zoom en iOS *\/\n padding: 16px 0 10px;\n }\n\n \/* Modal responsive *\/\n .modal-content {\n padding: 28px 24px;\n margin: 20px;\n width: calc(100% - 40px);\n }\n\n .modal-title {\n font-size: 22px;\n margin-bottom: 10px;\n }\n\n .modal-message {\n font-size: 14px;\n padding: 0 10px;\n margin-bottom: 20px;\n }\n\n .modal-icon {\n width: 65px;\n height: 65px;\n margin-bottom: 14px;\n }\n\n \/* ...existing code... *\/\n }\n\n \/* Para pantallas muy peque\u00f1as *\/\n @media (max-width: 480px) {\n body {\n padding: 12px;\n }\n\n .formulario-acema {\n padding: 24px 20px;\n border-radius: 12px;\n }\n\n .formulario-acema h2 {\n font-size: 24px;\n margin-bottom: 28px;\n }\n\n .formulario-acema input[type=\"submit\"] {\n min-width: auto;\n width: 100%;\n padding: 16px 24px;\n }\n\n .modal-content {\n padding: 24px 18px;\n }\n\n .modal-title {\n font-size: 20px;\n margin-bottom: 8px;\n }\n\n \/* ...existing code... *\/\n }\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<div class=\"formulario-acema\">\n\t\t\t<h2>CONT\u00c1CTANOS\n\t\t\t<\/h2>\n\t\t\t<div class=\"grid-layout\">\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"nombre\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"text\" name=\"nombre\" \/><\/span><br \/>\n<span class=\"field-label\">Nombres<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"apellidos\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"text\" name=\"apellidos\" \/><\/span><br \/>\n<span class=\"field-label\">Apellidos<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"telefono\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"tel\" name=\"telefono\" \/><\/span><br \/>\n<span class=\"field-label\">Tel\u00e9fono<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"correo\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"email\" name=\"correo\" \/><\/span><br \/>\n<span class=\"field-label\">Correo electr\u00f3nico<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"select-row\">\n\t\t\t\t<div class=\"select-wrapper\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><select id=\"tipo-solicitud\" name=\"destino\" required>\n <option value=\"\" selected disabled>Tipo de solicitud<\/option>\n <option value=\"comercial.solar@acemaingenieria.com\n\">Servicios solares<\/option>\n <option value=\"comercial@acemaingenieria.com\">Servicios el\u00e9ctricos<\/option>\n <option value=\"desarrollo.humano@acemaingenieria.com\">Trabaja con nosotros<\/option>\n <\/select><br \/>\n<span class=\"field-label\"><\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div id=\"cv-wrapper\" class=\"hidden-cv\">\n\t\t\t\t\t<div class=\"file-wrapper\">\n\t\t\t\t\t\t<p>Adjunta tu hoja de vida\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"hoja_de_vida\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-file\" accept=\".pdf,.doc,.docx\" aria-invalid=\"false\" type=\"file\" name=\"hoja_de_vida\" \/><\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<div class=\"file-alert\" id=\"file-alert\">\n\t\t\t\t\t\t\t<p>Archivo requerido\n\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"error-message\" id=\"file-error\">\n\t\t\t\t\t\t\t<p>Por favor, adjunta tu hoja de vida\n\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"field-container\">\n\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"mensaje\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"\" name=\"mensaje\"><\/textarea><\/span><br \/>\n<span class=\"field-label\">Mensaje<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t<div class=\"privacy-card\">\n\t\t\t\t<p><span class=\"privacy-title\">Pol\u00edticas de privacidad<\/span><br \/>\n<a href=\"\/politica-privacidad\" target=\"_blank\">Ver pol\u00edticas<\/a>\n\t\t\t\t<\/p>\n\t\t\t\t<div class=\"checkbox-wrapper\">\n\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"acepto\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"acepto\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Acepto<\/span><\/label><\/span><\/span><\/span>\n\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"submit-wrapper\">\n\t\t\t\t<p><input type=\"submit\" value=\"Enviar mensaje\" id=\"submit-button\" \/>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n \n <!-- Este div se usa para ocultar cualquier mensaje de confirmaci\u00f3n de Contact Form 7 -->\n\t\t\t<div style=\"display: none;\">\n\t\t\t\t<div class=\"wpcf7-response-output\" aria-hidden=\"true\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"wpcf7-mail-sent-ok\" style=\"display: none;\">\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n <!-- Modal de \u00e9xito -->\n\t\t<div class=\"success-modal\" id=\"successModal\">\n\t\t\t<div class=\"modal-content\">\n\t\t\t\t<div class=\"modal-decoration\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"modal-decoration\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"modal-icon\">\n\t\t\t\t\t<p><svg viewBox=\"0 0 24 24\">\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/>\n <\/svg>\n\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t\t<h3 class=\"modal-title\">\u00a1Mensaje Enviado!\n\t\t\t\t<\/h3>\n\t\t\t\t<p class=\"modal-message\"><br \/>\nGracias por tu mensaje. Ha sido enviado correctamente.\n\t\t\t\t<\/p>\n\t\t\t\t<p>Nos pondremos en contacto contigo pronto.\n\t\t\t\t<\/p>\n\t\t\t\t<p><button class=\"modal-button\" id=\"closeModal\">Aceptar<\/button>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<p><script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const selectDestino = document.getElementById(\"tipo-solicitud\");\n const cvWrapper = document.getElementById(\"cv-wrapper\");\n const fileInput = cvWrapper ? cvWrapper.querySelector('input[type=\"file\"]') : null;\n const errorMessage = document.getElementById(\"file-error\");\n const fileAlert = document.getElementById(\"file-alert\");\n const form = document.querySelector('.formulario-acema');\n const submitButton = document.getElementById(\"submit-button\");\n const successModal = document.getElementById(\"successModal\");\n const closeModalBtn = document.getElementById(\"closeModal\");\n\n \/\/ Ocultar cualquier mensaje de Contact Form 7 que pueda aparecer\n function hideCF7Messages() {\n \/\/ Ocultar todos los mensajes de Contact Form 7\n const cf7Messages = document.querySelectorAll('.wpcf7-response-output, .wpcf7-mail-sent-ok, .wpcf7-mail-sent-ng, .wpcf7-spam-blocked, .wpcf7-validation-errors');\n cf7Messages.forEach(message => {\n message.style.display = 'none';\n message.setAttribute('aria-hidden', 'true');\n });\n \n \/\/ Tambi\u00e9n ocultar cualquier mensaje dentro del formulario\n const allMessages = document.querySelectorAll('.formulario-acema div[role=\"alert\"], .formulario-acema .alert, .formulario-acema .success-message');\n allMessages.forEach(message => {\n message.style.display = 'none';\n });\n }\n\n \/\/ Funci\u00f3n para inicializar etiquetas flotantes\n function initFloatingLabels() {\n const fieldContainers = document.querySelectorAll('.field-container');\n \n fieldContainers.forEach(container => {\n const input = container.querySelector('input, textarea, select');\n const label = container.querySelector('.field-label');\n \n if (!input || !label) return;\n \n \/\/ Inicializar estado\n updateLabelState(input, container);\n \n \/\/ Eventos para input\n input.addEventListener('focus', function() {\n container.classList.add('focused');\n updateLabelState(this, container);\n \n \/\/ Efecto especial para select\n if (this.tagName === 'SELECT') {\n this.style.borderBottomColor = '#215ba0';\n }\n });\n \n input.addEventListener('blur', function() {\n container.classList.remove('focused');\n updateLabelState(this, container);\n \n \/\/ Reset para select\n if (this.tagName === 'SELECT') {\n if (!this.value) {\n this.style.borderBottomColor = '#e2e8f0';\n }\n }\n });\n \n \/\/ Evento para cambios (para select y input)\n input.addEventListener('change', function() {\n updateLabelState(this, container);\n \n \/\/ Animaci\u00f3n para select cuando cambia\n if (this.tagName === 'SELECT' && this.value) {\n this.classList.add('changed');\n setTimeout(() => {\n this.classList.remove('changed');\n }, 300);\n }\n });\n \n \/\/ Evento para input (para campos de texto)\n input.addEventListener('input', function() {\n updateLabelState(this, container);\n });\n \n \/\/ Inicializar con el valor actual (para campos precargados)\n if (input.value) {\n container.classList.add('has-value');\n }\n });\n }\n \n function updateLabelState(input, container) {\n const label = container.querySelector('.field-label');\n \n if (input.tagName === 'SELECT') {\n \/\/ Para select\n if (input.value && input.value !== \"\") {\n container.classList.add('has-value');\n label.style.color = '#64748b';\n input.style.color = '#334155';\n } else {\n container.classList.remove('has-value');\n input.style.color = '#94a3b8';\n }\n } else if (input.tagName === 'TEXTAREA') {\n \/\/ Para textarea\n if (input.value.trim()) {\n container.classList.add('has-value');\n } else {\n container.classList.remove('has-value');\n }\n } else {\n \/\/ Para inputs normales\n if (input.value.trim()) {\n container.classList.add('has-value');\n } else {\n container.classList.remove('has-value');\n }\n }\n }\n\n \/\/ Funci\u00f3n para mostrar el modal de \u00e9xito\n function showSuccessModal() {\n \/\/ Primero ocultamos cualquier mensaje de CF7\n hideCF7Messages();\n \n \/\/ Luego mostramos nuestro modal\n successModal.classList.add('active');\n document.body.style.overflow = 'hidden'; \/\/ Previene scroll\n \n \/\/ Crear efecto de confeti simple\n createConfetti();\n }\n\n \/\/ Funci\u00f3n para cerrar el modal\n function closeSuccessModal() {\n successModal.classList.remove('active');\n document.body.style.overflow = 'auto'; \/\/ Restaura scroll\n \n \/\/ Limpiar el formulario despu\u00e9s de enviar\n if (form) {\n form.reset();\n \n \/\/ Resetear las etiquetas flotantes\n const fieldContainers = document.querySelectorAll('.field-container');\n fieldContainers.forEach(container => {\n container.classList.remove('has-value');\n const input = container.querySelector('input, textarea, select');\n if (input && input.tagName === 'SELECT') {\n input.style.color = '#94a3b8';\n }\n });\n \n \/\/ Resetear el campo CV\n if (cvWrapper) {\n cvWrapper.classList.remove(\"active\");\n if (fileInput) {\n fileInput.removeAttribute(\"required\");\n }\n }\n }\n \n \/\/ Asegurarnos de que los mensajes de CF7 permanezcan ocultos\n setTimeout(hideCF7Messages, 100);\n }\n\n \/\/ Funci\u00f3n para crear efecto de confeti simple\n function createConfetti() {\n const modalContent = document.querySelector('.modal-content');\n const colors = ['#215ba0', '#2563eb', '#10b981', '#f59e0b', '#ef4444'];\n \n for (let i = 0; i < 20; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.left = Math.random() * 100 + '%';\n confetti.style.top = '-10px';\n confetti.style.transform = `rotate(${Math.random() * 360}deg)`;\n confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';\n \n modalContent.appendChild(confetti);\n \n \/\/ Animaci\u00f3n\n setTimeout(() => {\n confetti.style.transition = 'all 1s cubic-bezier(0.1, 0.8, 0.3, 1)';\n confetti.style.opacity = '1';\n confetti.style.transform = `translateY(${window.innerHeight}px) rotate(${Math.random() * 720}deg)`;\n \n \/\/ Eliminar despu\u00e9s de la animaci\u00f3n\n setTimeout(() => {\n confetti.remove();\n }, 1000);\n }, i * 50);\n }\n }\n\n \/\/ Event listeners para el modal\n if (closeModalBtn) {\n closeModalBtn.addEventListener('click', closeSuccessModal);\n }\n\n \/\/ Cerrar modal al hacer clic fuera del contenido\n if (successModal) {\n successModal.addEventListener('click', function(e) {\n if (e.target === this) {\n closeSuccessModal();\n }\n });\n }\n\n \/\/ Cerrar modal con la tecla Escape\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && successModal.classList.contains('active')) {\n closeSuccessModal();\n }\n });\n\n if (selectDestino && cvWrapper) {\n \/\/ Funci\u00f3n para mostrar\/ocultar el campo CV\n function toggleCVField() {\n const selectedOption = selectDestino.options[selectDestino.selectedIndex];\n const selectedText = selectedOption ? selectedOption.text : '';\n const fileAlert = document.getElementById(\"file-alert\");\n\n if (selectedText === \"Trabaja con nosotros\") {\n cvWrapper.classList.add(\"active\");\n if (fileInput) {\n fileInput.setAttribute(\"required\", \"required\");\n fileInput.parentElement.style.borderColor = \"#ef4444\";\n }\n } else {\n cvWrapper.classList.remove(\"active\");\n if (fileInput) {\n fileInput.removeAttribute(\"required\");\n fileInput.parentElement.style.borderColor = \"\";\n errorMessage.classList.remove(\"show\");\n if (fileAlert) {\n fileAlert.classList.remove(\"show\");\n }\n }\n }\n }\n\n \/\/ Ejecutar al cambiar la selecci\u00f3n\n selectDestino.addEventListener(\"change\", function() {\n toggleCVField();\n \n \/\/ Cambiar color del texto cuando se selecciona una opci\u00f3n v\u00e1lida\n if (this.value) {\n this.style.color = '#334155';\n } else {\n this.style.color = '#94a3b8';\n }\n });\n\n \/\/ Ejecutar al cargar la p\u00e1gina\n toggleCVField();\n\n \/\/ Validar archivo antes de enviar\n if (form && submitButton) {\n submitButton.addEventListener(\"click\", function(e) {\n const selectedOption = selectDestino.options[selectDestino.selectedIndex];\n const selectedText = selectedOption ? selectedOption.text : '';\n const fileAlert = document.getElementById(\"file-alert\");\n \n if (selectedText === \"Trabaja con nosotros\" && fileInput && !fileInput.value) {\n e.preventDefault();\n fileInput.focus();\n fileInput.parentElement.style.borderColor = \"#ef4444\";\n fileInput.parentElement.style.boxShadow = \"0 0 0 3px rgba(239, 68, 68, 0.1)\";\n errorMessage.classList.add(\"show\");\n if (fileAlert) {\n fileAlert.classList.add(\"show\");\n }\n return false;\n }\n \n \/\/ Simular env\u00edo exitoso (en producci\u00f3n, esto se har\u00eda con AJAX)\n e.preventDefault();\n console.log('Mostrando modal...'); \/\/ Debug\n showSuccessModal();\n });\n }\n\n \/\/ Limpiar el error cuando se selecciona un archivo\n if (fileInput) {\n fileInput.addEventListener(\"change\", function() {\n const fileAlert = document.getElementById(\"file-alert\");\n if (this.value) {\n this.parentElement.style.borderColor = \"#e2e8f0\";\n this.parentElement.style.boxShadow = \"none\";\n errorMessage.classList.remove(\"show\");\n if (fileAlert) {\n fileAlert.classList.remove(\"show\");\n }\n }\n });\n }\n }\n\n \/\/ Mejorar la experiencia del checkbox\n const checkboxes = document.querySelectorAll('input[type=\"checkbox\"]');\n checkboxes.forEach(checkbox => {\n checkbox.addEventListener('change', function() {\n if(this.checked) {\n this.style.boxShadow = '0 0 0 3px rgba(5, 150, 105, 0.1)';\n } else {\n this.style.boxShadow = 'none';\n }\n });\n });\n\n \/\/ Inicializar etiquetas flotantes\n initFloatingLabels();\n \n \/\/ Ocultar mensajes de CF7 al cargar la p\u00e1gina\n hideCF7Messages();\n \n \/\/ Observador para detectar y ocultar mensajes que aparezcan din\u00e1micamente\n const observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(mutation) {\n if (mutation.addedNodes && mutation.addedNodes.length > 0) {\n hideCF7Messages();\n }\n });\n });\n \n \/\/ Observar cambios en el formulario\n if (form) {\n observer.observe(form, { childList: true, subtree: true });\n }\n });\n <\/script>\n\t\t<\/p>\n\t<\/body>\n<\/html><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.22.2″ _module_preset=\u00bbdefault\u00bb min_height=\u00bb130.7px\u00bb custom_margin=\u00bb0px||0px||false|false\u00bb custom_padding=\u00bb27px||27px||true|false\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.27.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.27.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.27.0″ _module_preset=\u00bbdefault\u00bb text_font_size=\u00bb28px\u00bb custom_padding=\u00bb||15px|||\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p style=\"text-align: center;\"><span style=\"color: #000000;\"><strong>\u00a1Hacemos realidad tus proyectos el\u00e9ctricos!<\/strong><\/span><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a1CONT\u00c1CTANOS!\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f3666-o3\" lang=\"es-ES\" dir=\"ltr\" data-wpcf7-id=\"3666\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/1734#wpcf7-f3666-o3\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulario de contacto\" enctype=\"multipart\/form-data\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"3666\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"es_ES\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f3666-o3\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><!DOCTYPE html>\n<\/p>\n<html lang=\"es\">\n\t<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n\t\t<title>Formulario Minimalista\n\t\t<\/title>\n\t\t<style>\n \/* =========================================\n ESTILOS MEJORADOS - MINIMALISTA CON BUEN UX\n ========================================= *\/\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n background-color: #f8fafc;\n margin: 0;\n padding: 0;\n color: #334155;\n line-height: 1.6;\n }\n\n .formulario-acema {\n background: white;\n border-radius: 16px;\n padding: 48px 40px;\n width: 100%;\n \n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);\n border: 1px solid rgba(226, 232, 240, 0.6);\n position: relative;\n overflow: hidden;\n }\n\n \/* Burbujas decorativas transparentes en esquinas *\/\n .formulario-acema::before {\n content: '';\n position: absolute;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(33, 91, 160, 0.08), rgba(33, 91, 160, 0));\n border-radius: 50%;\n top: -80px;\n right: -80px;\n pointer-events: none;\n z-index: 0;\n }\n\n .formulario-acema::after {\n content: '';\n position: absolute;\n width: 250px;\n height: 250px;\n background: radial-gradient(circle, rgba(64, 163, 53, 0.08), rgba(64, 163, 53, 0));\n border-radius: 50%;\n bottom: -120px;\n left: -100px;\n pointer-events: none;\n z-index: 0;\n }\n\n \/* Asegurar que el contenido est\u00e9 sobre las burbujas *\/\n .formulario-acema h2 {\n position: relative;\n z-index: 1;\n color:#40a335;\n text-align: center;\n font-weight: 900;\n font-size: 32px;\n margin-bottom: 40px;\n letter-spacing: -0.5px;\n }\n\n \/* Grid mejorado con mejor espaciado *\/\n .grid-layout {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 24px;\n margin-bottom: 24px;\n position: relative;\n z-index: 1;\n }\n\n .column {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n \/* Select row mejorado *\/\n .select-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n margin-bottom: 24px;\n position: relative;\n z-index: 1;\n }\n\n \/* Campos de formulario - minimalista *\/\n .formulario-acema input[type=\"text\"],\n .formulario-acema input[type=\"email\"],\n .formulario-acema input[type=\"tel\"],\n .formulario-acema select,\n .formulario-acema textarea,\n .formulario-acema input[type=\"file\"] {\n width: 100%;\n background-color: transparent;\n color: #727272a8;\n border: none;\n border-bottom: 2px solid #e2e8f0;\n border-radius: 0;\n padding: 14px 0 8px;\n font-size: 15px;\n font-family: inherit;\n transition: all 0.25s ease;\n appearance: none;\n cursor: pointer;\n }\n\n \/* Estilo espec\u00edfico para el select \"Tipo de solicitud\" *\/\n .formulario-acema select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n background-size: 16px;\n padding-right: 40px;\n background-color: white;\n }\n\n \/* Estados hover y focus para select *\/\n .formulario-acema select:hover {\n border-bottom-color: #93c5fd;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23215ba0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n }\n\n .formulario-acema select:focus {\n outline: none;\n border-bottom-color: #7eb3f3;\n background-color: transparent;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23215ba0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n box-shadow: 0 2px 0 0 rgba(33, 91, 160, 0.1);\n }\n \n\n \/* Estilo para cuando se ha seleccionado una opci\u00f3n *\/\n .formulario-acema select:valid:not([value=\"\"]) {\n color: #334155;\n font-weight: 500;\n }\n\n \/* Estilo para la opci\u00f3n por defecto *\/\n .formulario-acema select option[value=\"\"] {\n color: #215ba0;\n font-style: italic;\n }\n\n \/* Estilo para las opciones del dropdown *\/\n .formulario-acema select option {\n background-color: white;\n color: #215ba0;\n padding: 12px 16px;\n font-size: 15px;\n font-family: inherit;\n transition: all 0.2s ease;\n border-bottom: 1px solid #f1f5f9;\n }\n\n \/* Estilo para la \u00faltima opci\u00f3n (sin borde inferior) *\/\n .formulario-acema select option:last-child {\n border-bottom: none;\n }\n\n \/* Estilo para opciones al hacer hover en el dropdown *\/\n .formulario-acema select option:hover {\n background-color: #dbeafe;\n color: #215ba0;\n padding-left: 20px;\n cursor: pointer;\n }\n\n \/* Estilo para opci\u00f3n seleccionada en el dropdown *\/\n .formulario-acema select option:checked {\n background: linear-gradient(135deg, #215ba0 0%, #2563eb 100%);\n color:#215ba0;\n border-radius: 15px;\n font-weight: 500;\n position: relative;\n }\n\n \/* Flecha decorativa para opci\u00f3n seleccionada *\/\n .formulario-acema select option:checked::after {\n content: \"\u2713\";\n position: absolute;\n right: 16px;\n font-size: 14px;\n font-weight: bold;\n }\n\n \/* Estados focus mejorados *\/\n .formulario-acema input:focus,\n .formulario-acema select:focus,\n .formulario-acema textarea:focus {\n outline: none;\n border-bottom-color: #215ba0;\n box-shadow: 0 2px 0 0 rgba(33, 91, 160, 0.1);\n background-color: transparent;\n }\n\n \/* Placeholders elegantes *\/\n .formulario-acema input::placeholder,\n .formulario-acema textarea::placeholder {\n color: transparent;\n opacity: 1;\n transition: color 0.2s ease;\n }\n\n .formulario-acema input:focus::placeholder,\n .formulario-acema textarea:focus::placeholder {\n color:#929292a8;\n }\n\n \/* \u00c1rea de mensaje *\/\n .formulario-acema textarea {\n height: 140px;\n resize: vertical;\n min-height: 140px;\n margin-bottom: 32px;\n font-family: inherit;\n line-height: 1.5;\n border: 1px solid rgb(214, 212, 212);\n border-radius: 13px ;\n \n }\n\n \/* Estilos para etiquetas flotantes *\/\n .field-container {\n position: relative;\n margin-bottom: 8px;\n z-index: 1;\n }\n\n .field-label {\n position: absolute;\n top: 18px;\n left: 0;\n font-size: 15px;\n font-weight: 500;\n color:#929292a8; ;\n pointer-events: none;\n transition: all 0.2s ease;\n transform-origin: left center;\n margin: 0;\n padding: 0;\n }\n\n \/* Estados de la etiqueta flotante *\/\n .field-container.focused .field-label,\n .field-container.has-value .field-label {\n top: 0;\n font-size: 12px;\n color: #215ba0;\n transform: translateY(0);\n font-weight: 600;\n }\n\n .field-container select ~ .field-label {\n background-color: white;\n padding-right: 30px;\n padding-left: 4px;\n z-index: 1;\n }\n\n \/* Campos con valor pero sin foco *\/\n .field-container input:not(:placeholder-shown) ~ .field-label,\n .field-container textarea:not(:placeholder-shown) ~ .field-label,\n .field-container select:valid:not([value=\"\"]) ~ .field-label {\n top: 0;\n font-size: 12px;\n color: #64748b;\n font-weight: 500;\n }\n\n \/* Select enfocado *\/\n .field-container select:focus ~ .field-label {\n color: #215ba0;\n font-weight: 600;\n }\n\n \/* Privacidad - m\u00e1s minimalista *\/\n .privacy-card {\n background: #f8fafc;\n border-radius: 12px;\n padding: 16px;\n margin: 0 0 32px 0;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n border: 1px solid #e2e8f0;\n width: fit-content;\n position: relative;\n z-index: 1;\n }\n\n .privacy-title {\n color: #1e293b;\n font-weight: 600;\n font-size: 15px;\n margin: 0;\n }\n\n .privacy-card a {\n color: #40a335;\n font-weight: 500;\n text-decoration: none;\n transition: color 0.2s ease;\n font-size: 14px;\n }\n\n .privacy-card a:hover {\n color: #047857;\n text-decoration: underline;\n }\n\n \/* Checkbox wrapper mejorado *\/\n .checkbox-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 4px;\n }\n\n \/* Checkbox personalizado *\/\n .wpcf7-list-item {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .formulario-acema .privacy-card input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n border-radius: 3px;\n border: 1.5px solid #cbd5e1;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n }\n\n .formulario-acema .privacy-card input[type=\"checkbox\"]:checked {\n background-color: #40a335;\n border-color: #059669;\n }\n\n .wpcf7-list-item-label {\n color: #475569;\n font-size: 13px;\n cursor: pointer;\n margin: 0;\n }\n\n \/* Bot\u00f3n de enviar - CENTRADO HORIZONTALMENTE *\/\n .submit-wrapper {\n text-align: center;\n width: 100%;\n margin-top: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n z-index: 1;\n }\n\n .formulario-acema input[type=\"submit\"] {\n background-color: #215ba0;\n color: white;\n padding: 16px 48px;\n border-radius: 12px;\n border: none;\n font-weight: 600;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.25s ease;\n display: inline-block;\n letter-spacing: 0.3px;\n min-width: 220px;\n box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);\n }\n\n .formulario-acema input[type=\"submit\"]:hover {\n background-color: #1d4ed8;\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25);\n }\n\n .formulario-acema input[type=\"submit\"]:active {\n transform: translateY(-1px);\n }\n\n \/* Campo de archivo mejorado *\/\n .hidden-cv {\n display: none;\n opacity: 0;\n transform: translateY(-10px);\n transition: all 0.3s ease;\n }\n\n .hidden-cv.active {\n display: flex;\n flex-direction: column;\n gap: 16px;\n opacity: 1;\n transform: translateY(0);\n }\n\n .file-wrapper {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 12px;\n flex-wrap: nowrap;\n }\n\n .hidden-cv p {\n color: #215ba0;\n font-weight: 600;\n font-size: 12px;\n text-align: left;\n margin: 0;\n flex: 0 0 auto;\n white-space: nowrap;\n padding: 0;\n align-self: center;\n }\n\n \/* Input file personalizado - minimalista y compacto *\/\n .formulario-acema input[type=\"file\"] {\n padding: 8px;\n cursor: pointer;\n border: 2px dashed #e2e8f0;\n background-color: white;\n border-radius: 6px;\n width: auto;\n display: inline-block;\n flex: 0 0 auto;\n font-size: 13px;\n }\n\n .vacante-input {\n flex: 1 1 auto;\n min-width: 140px;\n padding: 14px 0 8px;\n border: none;\n border-bottom: 2px solid #e2e8f0;\n font-family: inherit;\n font-size: 15px;\n background-color: transparent;\n color: #727272a8;\n width: 100%;\n transition: all 0.25s ease;\n }\n\n .formulario-acema input[type=\"file\"]:hover {\n border-color: #3b82f6;\n background-color: #f8fafc;\n }\n\n \/* Placeholder visible para vacante input *\/\n .vacante-input::placeholder {\n color: #929292a8;\n opacity: 1;\n }\n\n .formulario-acema input[type=\"file\"]::-webkit-file-upload-button {\n background-color: #215ba0;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n margin-right: 8px;\n cursor: pointer;\n font-family: inherit;\n font-size: 12px;\n font-weight: 500;\n transition: all 0.2s ease;\n }\n\n .formulario-acema input[type=\"file\"]::-webkit-file-upload-button:hover {\n background-color: #1d4ed8;\n transform: translateY(-1px);\n }\n\n \/* Mensaje de error *\/\n .error-message {\n color: #ef4444;\n font-size: 13px;\n font-weight: 500;\n margin-top: 8px;\n display: none;\n animation: slideIn 0.3s ease;\n }\n\n .error-message.show {\n display: block;\n }\n\n \/* Alerta de archivo faltante *\/\n .file-alert {\n background-color: #fee2e2;\n border: 1px solid #fecaca;\n border-radius: 8px;\n padding: 10px 12px;\n margin-top: 8px;\n display: none;\n font-size: 13px;\n color: #991b1b;\n font-weight: 500;\n }\n\n .file-alert.show {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .file-alert::before {\n content: \"\u26a0\";\n font-size: 16px;\n flex-shrink: 0;\n }\n\n \/* =========================================\n ESTILOS PARA EL POPUP\/MODAL\n ========================================= *\/\n .success-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .success-modal.active {\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 1;\n }\n\n .modal-content {\n background: white;\n border-radius: 20px;\n padding: 32px 32px;\n width: 90%;\n max-width: 420px;\n text-align: center;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n border: 1px solid rgba(226, 232, 240, 0.8);\n transform: translateY(30px) scale(0.95);\n opacity: 0;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n position: relative;\n overflow: hidden;\n }\n\n .success-modal.active .modal-content {\n transform: translateY(0) scale(1);\n opacity: 1;\n }\n\n \/* Icono de \u00e9xito *\/\n .modal-icon {\n width: 70px;\n height: 70px;\n background: linear-gradient(135deg, #215ba0 0%, #40a335 100%);\n border-radius: 50%;\n margin: 0 auto 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: iconPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;\n }\n\n .modal-icon svg {\n width: 40px;\n height: 40px;\n fill: white;\n }\n\n @keyframes iconPop {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 70% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n }\n\n \/* T\u00edtulo del modal *\/\n .modal-title {\n color: #1e293b;\n font-weight: 700;\n font-size: 24px;\n margin-bottom: 12px;\n letter-spacing: -0.5px;\n }\n\n \/* Mensaje del modal *\/\n .modal-message {\n color: #64748b;\n font-size: 15px;\n line-height: 1.5;\n margin-bottom: 24px;\n max-width: 380px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* Bot\u00f3n del modal *\/\n .modal-button {\n background: linear-gradient(135deg, #215ba0 0%, #2563eb 100%);\n color: white;\n border: none;\n padding: 16px 40px;\n border-radius: 12px;\n font-weight: 600;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: inline-block;\n letter-spacing: 0.3px;\n box-shadow: 0 4px 20px rgba(33, 91, 160, 0.2);\n }\n\n .modal-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(33, 91, 160, 0.3);\n }\n\n .modal-button:active {\n transform: translateY(-1px);\n }\n\n \/* Animaci\u00f3n de confeti *\/\n .confetti {\n position: absolute;\n width: 10px;\n height: 10px;\n background: #f59e0b;\n opacity: 0;\n }\n\n \/* Decoraci\u00f3n sutil *\/\n .modal-decoration {\n position: absolute;\n width: 200px;\n height: 200px;\n background: linear-gradient(135deg, rgba(33, 91, 160, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);\n border-radius: 50%;\n top: -100px;\n right: -100px;\n z-index: -1;\n }\n\n .modal-decoration:nth-child(2) {\n width: 150px;\n height: 150px;\n background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);\n bottom: -75px;\n left: -75px;\n top: auto;\n right: auto;\n }\n\n \/* Animaciones sutiles *\/\n .formulario-acema input,\n .formulario-acema select,\n .formulario-acema textarea {\n animation: fadeIn 0.3s ease-out;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(5px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Animaci\u00f3n para el select cuando cambia *\/\n @keyframes selectChange {\n 0% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-2px);\n }\n 100% {\n transform: translateY(0);\n }\n }\n\n .formulario-acema select.changed {\n animation: selectChange 0.3s ease;\n }\n\n \/* Responsivo mejorado *\/\n @media (max-width: 768px) {\n .formulario-acema {\n padding: 32px 24px;\n margin: 0;\n }\n\n .formulario-acema h2 {\n font-size: 28px;\n margin-bottom: 32px;\n }\n\n .grid-layout {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .select-row {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .privacy-card {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n margin-bottom: 24px;\n }\n\n \/* Bot\u00f3n centrado en m\u00f3vil *\/\n .submit-wrapper {\n margin-top: 16px;\n }\n\n .formulario-acema input[type=\"submit\"] {\n width: 100%;\n max-width: 280px;\n padding: 16px;\n }\n\n \/* Ajuste para select en m\u00f3viles *\/\n .formulario-acema select {\n font-size: 16px; \/* Previene zoom en iOS *\/\n padding: 16px 0 10px;\n }\n\n \/* Modal responsive *\/\n .modal-content {\n padding: 28px 24px;\n margin: 20px;\n width: calc(100% - 40px);\n }\n\n .modal-title {\n font-size: 22px;\n margin-bottom: 10px;\n }\n\n .modal-message {\n font-size: 14px;\n padding: 0 10px;\n margin-bottom: 20px;\n }\n\n .modal-icon {\n width: 65px;\n height: 65px;\n margin-bottom: 14px;\n }\n\n \/* ...existing code... *\/\n }\n\n \/* Para pantallas muy peque\u00f1as *\/\n @media (max-width: 480px) {\n body {\n padding: 12px;\n }\n\n .formulario-acema {\n padding: 24px 20px;\n border-radius: 12px;\n }\n\n .formulario-acema h2 {\n font-size: 24px;\n margin-bottom: 28px;\n }\n\n .formulario-acema input[type=\"submit\"] {\n min-width: auto;\n width: 100%;\n padding: 16px 24px;\n }\n\n .modal-content {\n padding: 24px 18px;\n }\n\n .modal-title {\n font-size: 20px;\n margin-bottom: 8px;\n }\n\n \/* ...existing code... *\/\n }\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<div class=\"formulario-acema\">\n\t\t\t<h2>\u00a1CONT\u00c1CTANOS!\n\t\t\t<\/h2>\n\t\t\t<div class=\"grid-layout\">\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"nombre\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"text\" name=\"nombre\" \/><\/span><br \/>\n<span class=\"field-label\">Nombres<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"apellidos\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"text\" name=\"apellidos\" \/><\/span><br \/>\n<span class=\"field-label\">Apellidos<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"telefono\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"tel\" name=\"telefono\" \/><\/span><br \/>\n<span class=\"field-label\">Tel\u00e9fono<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"correo\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"email\" name=\"correo\" \/><\/span><br \/>\n<span class=\"field-label\">Correo electr\u00f3nico<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"select-row\">\n\t\t\t\t<div class=\"select-wrapper\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><select id=\"tipo-solicitud\" name=\"destino\" required>\n <option value=\"\" selected disabled>Tipo de solicitud<\/option>\n <option value=\"comercial.solar@acemaingenieria.com\">Servicios solares<\/option>\n <option value=\"comercial@acemaingenieria.com\">Servicios el\u00e9ctricos<\/option>\n <option value=\"desarrollo.humano@acemaingenieria.com\">Trabaja con nosotros<\/option>\n <\/select><br \/>\n<span class=\"field-label\"><\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div id=\"cv-wrapper\" class=\"hidden-cv\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><input type=\"text\" name=\"vacante\" id=\"vacante\" class=\"vacante-input\" placeholder=\" \" \/><br \/>\n<span class=\"field-label\">Vacante a la que aplica<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"file-wrapper\">\n\t\t\t\t\t\t<p>Adjunta tu hoja de vida\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"hoja_de_vida\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-file\" accept=\".pdf,.doc,.docx\" aria-invalid=\"false\" type=\"file\" name=\"hoja_de_vida\" \/><\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<div class=\"file-alert\" id=\"file-alert\">\n\t\t\t\t\t\t\t<p>Archivo requerido\n\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"error-message\" id=\"file-error\">\n\t\t\t\t\t\t\t<p>Por favor, adjunta tu hoja de vida\n\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"field-container\">\n\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"mensaje\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"\" name=\"mensaje\"><\/textarea><\/span><br \/>\n<span class=\"field-label\">Mensaje<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t<div class=\"privacy-card\">\n\t\t\t\t<p><span class=\"privacy-title\">Pol\u00edticas de privacidad<\/span><br \/>\n<a href=\"\/politica-privacidad\" target=\"_blank\">Ver pol\u00edticas<\/a>\n\t\t\t\t<\/p>\n\t\t\t\t<div class=\"checkbox-wrapper\">\n\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"acepto\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"acepto\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Acepto<\/span><\/label><\/span><\/span><\/span>\n\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"submit-wrapper\">\n\t\t\t\t<p><input type=\"submit\" value=\"Enviar mensaje\" id=\"submit-button\" \/>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n \n <!-- Este div se usa para ocultar cualquier mensaje de confirmaci\u00f3n de Contact Form 7 -->\n\t\t\t<div style=\"display: none;\">\n\t\t\t\t<div class=\"wpcf7-response-output\" aria-hidden=\"true\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"wpcf7-mail-sent-ok\" style=\"display: none;\">\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n <!-- Modal de \u00e9xito -->\n\t\t<div class=\"success-modal\" id=\"successModal\">\n\t\t\t<div class=\"modal-content\">\n\t\t\t\t<div class=\"modal-decoration\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"modal-decoration\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"modal-icon\">\n\t\t\t\t\t<p><svg viewBox=\"0 0 24 24\">\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/>\n <\/svg>\n\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t\t<h3 class=\"modal-title\">\u00a1Mensaje Enviado!\n\t\t\t\t<\/h3>\n\t\t\t\t<p class=\"modal-message\"><br \/>\nGracias por tu mensaje. Ha sido enviado correctamente.\n\t\t\t\t<\/p>\n\t\t\t\t<p>Nos pondremos en contacto contigo pronto.\n\t\t\t\t<\/p>\n\t\t\t\t<p><button class=\"modal-button\" id=\"closeModal\">Aceptar<\/button>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<p><script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const selectDestino = document.getElementById(\"tipo-solicitud\");\n const cvWrapper = document.getElementById(\"cv-wrapper\");\n const fileInput = cvWrapper ? cvWrapper.querySelector('input[type=\"file\"]') : null;\n const errorMessage = document.getElementById(\"file-error\");\n const fileAlert = document.getElementById(\"file-alert\");\n const form = document.querySelector('.formulario-acema');\n const submitButton = document.getElementById(\"submit-button\");\n const successModal = document.getElementById(\"successModal\");\n const closeModalBtn = document.getElementById(\"closeModal\");\n\n \/\/ Ocultar cualquier mensaje de Contact Form 7 que pueda aparecer\n function hideCF7Messages() {\n \/\/ Ocultar todos los mensajes de Contact Form 7\n const cf7Messages = document.querySelectorAll('.wpcf7-response-output, .wpcf7-mail-sent-ok, .wpcf7-mail-sent-ng, .wpcf7-spam-blocked, .wpcf7-validation-errors');\n cf7Messages.forEach(message => {\n message.style.display = 'none';\n message.setAttribute('aria-hidden', 'true');\n });\n \n \/\/ Tambi\u00e9n ocultar cualquier mensaje dentro del formulario\n const allMessages = document.querySelectorAll('.formulario-acema div[role=\"alert\"], .formulario-acema .alert, .formulario-acema .success-message');\n allMessages.forEach(message => {\n message.style.display = 'none';\n });\n }\n\n \/\/ Funci\u00f3n para inicializar etiquetas flotantes\n function initFloatingLabels() {\n const fieldContainers = document.querySelectorAll('.field-container');\n \n fieldContainers.forEach(container => {\n const input = container.querySelector('input, textarea, select');\n const label = container.querySelector('.field-label');\n \n if (!input || !label) return;\n \n \/\/ Inicializar estado\n updateLabelState(input, container);\n \n \/\/ Eventos para input\n input.addEventListener('focus', function() {\n container.classList.add('focused');\n updateLabelState(this, container);\n \n \/\/ Efecto especial para select\n if (this.tagName === 'SELECT') {\n this.style.borderBottomColor = '#215ba0';\n }\n });\n \n input.addEventListener('blur', function() {\n container.classList.remove('focused');\n updateLabelState(this, container);\n \n \/\/ Reset para select\n if (this.tagName === 'SELECT') {\n if (!this.value) {\n this.style.borderBottomColor = '#e2e8f0';\n }\n }\n });\n \n \/\/ Evento para cambios (para select y input)\n input.addEventListener('change', function() {\n updateLabelState(this, container);\n \n \/\/ Animaci\u00f3n para select cuando cambia\n if (this.tagName === 'SELECT' && this.value) {\n this.classList.add('changed');\n setTimeout(() => {\n this.classList.remove('changed');\n }, 300);\n }\n });\n \n \/\/ Evento para input (para campos de texto)\n input.addEventListener('input', function() {\n updateLabelState(this, container);\n });\n \n \/\/ Inicializar con el valor actual (para campos precargados)\n if (input.value) {\n container.classList.add('has-value');\n }\n });\n }\n \n function updateLabelState(input, container) {\n const label = container.querySelector('.field-label');\n \n if (input.tagName === 'SELECT') {\n \/\/ Para select\n if (input.value && input.value !== \"\") {\n container.classList.add('has-value');\n label.style.color = '#64748b';\n input.style.color = '#334155';\n } else {\n container.classList.remove('has-value');\n input.style.color = '#94a3b8';\n }\n } else if (input.tagName === 'TEXTAREA') {\n \/\/ Para textarea\n if (input.value.trim()) {\n container.classList.add('has-value');\n } else {\n container.classList.remove('has-value');\n }\n } else {\n \/\/ Para inputs normales\n if (input.value.trim()) {\n container.classList.add('has-value');\n } else {\n container.classList.remove('has-value');\n }\n }\n }\n\n \/\/ Funci\u00f3n para mostrar el modal de \u00e9xito\n function showSuccessModal() {\n \/\/ Primero ocultamos cualquier mensaje de CF7\n hideCF7Messages();\n \n \/\/ Luego mostramos nuestro modal\n successModal.classList.add('active');\n document.body.style.overflow = 'hidden'; \/\/ Previene scroll\n \n \/\/ Crear efecto de confeti simple\n createConfetti();\n }\n\n \/\/ Funci\u00f3n para cerrar el modal\n function closeSuccessModal() {\n successModal.classList.remove('active');\n document.body.style.overflow = 'auto'; \/\/ Restaura scroll\n \n \/\/ Limpiar el formulario despu\u00e9s de enviar\n if (form) {\n form.reset();\n \n \/\/ Resetear las etiquetas flotantes\n const fieldContainers = document.querySelectorAll('.field-container');\n fieldContainers.forEach(container => {\n container.classList.remove('has-value');\n const input = container.querySelector('input, textarea, select');\n if (input && input.tagName === 'SELECT') {\n input.style.color = '#94a3b8';\n }\n });\n \n \/\/ Resetear el campo CV\n if (cvWrapper) {\n cvWrapper.classList.remove(\"active\");\n if (fileInput) {\n fileInput.removeAttribute(\"required\");\n }\n }\n }\n \n \/\/ Asegurarnos de que los mensajes de CF7 permanezcan ocultos\n setTimeout(hideCF7Messages, 100);\n }\n\n \/\/ Funci\u00f3n para crear efecto de confeti simple\n function createConfetti() {\n const modalContent = document.querySelector('.modal-content');\n const colors = ['#215ba0', '#2563eb', '#10b981', '#f59e0b', '#ef4444'];\n \n for (let i = 0; i < 20; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.left = Math.random() * 100 + '%';\n confetti.style.top = '-10px';\n confetti.style.transform = `rotate(${Math.random() * 360}deg)`;\n confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';\n \n modalContent.appendChild(confetti);\n \n \/\/ Animaci\u00f3n\n setTimeout(() => {\n confetti.style.transition = 'all 1s cubic-bezier(0.1, 0.8, 0.3, 1)';\n confetti.style.opacity = '1';\n confetti.style.transform = `translateY(${window.innerHeight}px) rotate(${Math.random() * 720}deg)`;\n \n \/\/ Eliminar despu\u00e9s de la animaci\u00f3n\n setTimeout(() => {\n confetti.remove();\n }, 1000);\n }, i * 50);\n }\n }\n\n \/\/ Event listeners para el modal\n if (closeModalBtn) {\n closeModalBtn.addEventListener('click', closeSuccessModal);\n }\n\n \/\/ Cerrar modal al hacer clic fuera del contenido\n if (successModal) {\n successModal.addEventListener('click', function(e) {\n if (e.target === this) {\n closeSuccessModal();\n }\n });\n }\n\n \/\/ Cerrar modal con la tecla Escape\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && successModal.classList.contains('active')) {\n closeSuccessModal();\n }\n });\n\n if (selectDestino && cvWrapper) {\n \/\/ Funci\u00f3n para mostrar\/ocultar el campo CV\n function toggleCVField() {\n const selectedOption = selectDestino.options[selectDestino.selectedIndex];\n const selectedText = selectedOption ? selectedOption.text : '';\n const fileAlert = document.getElementById(\"file-alert\");\n\n if (selectedText === \"Trabaja con nosotros\") {\n cvWrapper.classList.add(\"active\");\n if (fileInput) {\n fileInput.setAttribute(\"required\", \"required\");\n fileInput.parentElement.style.borderColor = \"#ef4444\";\n }\n } else {\n cvWrapper.classList.remove(\"active\");\n if (fileInput) {\n fileInput.removeAttribute(\"required\");\n fileInput.parentElement.style.borderColor = \"\";\n errorMessage.classList.remove(\"show\");\n if (fileAlert) {\n fileAlert.classList.remove(\"show\");\n }\n }\n }\n }\n\n \/\/ Ejecutar al cambiar la selecci\u00f3n\n selectDestino.addEventListener(\"change\", function() {\n toggleCVField();\n \n \/\/ Cambiar color del texto cuando se selecciona una opci\u00f3n v\u00e1lida\n if (this.value) {\n this.style.color = '#334155';\n } else {\n this.style.color = '#94a3b8';\n }\n });\n\n \/\/ Ejecutar al cargar la p\u00e1gina\n toggleCVField();\n\n \/\/ Validar archivo antes de enviar\n if (form && submitButton) {\n submitButton.addEventListener(\"click\", function(e) {\n const selectedOption = selectDestino.options[selectDestino.selectedIndex];\n const selectedText = selectedOption ? selectedOption.text : '';\n const fileAlert = document.getElementById(\"file-alert\");\n \n if (selectedText === \"Trabaja con nosotros\" && fileInput && !fileInput.value) {\n e.preventDefault();\n fileInput.focus();\n fileInput.parentElement.style.borderColor = \"#ef4444\";\n fileInput.parentElement.style.boxShadow = \"0 0 0 3px rgba(239, 68, 68, 0.1)\";\n errorMessage.classList.add(\"show\");\n if (fileAlert) {\n fileAlert.classList.add(\"show\");\n }\n return false;\n }\n \n \/\/ Simular env\u00edo exitoso (en producci\u00f3n, esto se har\u00eda con AJAX)\n e.preventDefault();\n console.log('Mostrando modal...'); \/\/ Debug\n showSuccessModal();\n });\n }\n\n \/\/ Limpiar el error cuando se selecciona un archivo\n if (fileInput) {\n fileInput.addEventListener(\"change\", function() {\n const fileAlert = document.getElementById(\"file-alert\");\n if (this.value) {\n this.parentElement.style.borderColor = \"#e2e8f0\";\n this.parentElement.style.boxShadow = \"none\";\n errorMessage.classList.remove(\"show\");\n if (fileAlert) {\n fileAlert.classList.remove(\"show\");\n }\n }\n });\n }\n }\n\n \/\/ Mejorar la experiencia del checkbox\n const checkboxes = document.querySelectorAll('input[type=\"checkbox\"]');\n checkboxes.forEach(checkbox => {\n checkbox.addEventListener('change', function() {\n if(this.checked) {\n this.style.boxShadow = '0 0 0 3px rgba(5, 150, 105, 0.1)';\n } else {\n this.style.boxShadow = 'none';\n }\n });\n });\n\n \/\/ Cambiar texto del bot\u00f3n file input a espa\u00f1ol\n if (fileInput) {\n fileInput.setAttribute('accept', '.pdf,.doc,.docx');\n \/\/ Para navegadores que soportan el atributo capture\n const fileLabel = fileInput.parentElement;\n if (fileLabel) {\n \/\/ Crear un wrapper personalizado con etiqueta en espa\u00f1ol\n const customLabel = document.createElement('label');\n customLabel.style.cursor = 'pointer';\n customLabel.style.display = 'inline-flex';\n customLabel.style.alignItems = 'center';\n customLabel.style.gap = '8px';\n \n \/\/ El input mantiene su funcionalidad pero est\u00e1 oculto\n fileInput.style.display = 'none';\n \n const buttonSpan = document.createElement('span');\n buttonSpan.textContent = 'Seleccionar archivo';\n buttonSpan.style.backgroundColor = '#215ba0';\n buttonSpan.style.color = 'white';\n buttonSpan.style.padding = '6px 12px';\n buttonSpan.style.borderRadius = '4px';\n buttonSpan.style.fontSize = '12px';\n buttonSpan.style.fontWeight = '500';\n buttonSpan.style.cursor = 'pointer';\n buttonSpan.style.transition = 'all 0.2s ease';\n buttonSpan.style.fontFamily = 'inherit';\n \n const fileNameSpan = document.createElement('span');\n fileNameSpan.textContent = 'Ning\u00fan archivo seleccionado';\n fileNameSpan.style.fontSize = '12px';\n fileNameSpan.style.color = '#64748b';\n fileNameSpan.style.fontFamily = 'inherit';\n \n customLabel.appendChild(buttonSpan);\n customLabel.appendChild(fileNameSpan);\n \n fileInput.parentElement.insertBefore(customLabel, fileInput);\n \n \/\/ Actualizar nombre del archivo cuando se selecciona\n fileInput.addEventListener('change', function() {\n if (this.files && this.files[0]) {\n fileNameSpan.textContent = this.files[0].name;\n fileNameSpan.style.color = '#215ba0';\n fileNameSpan.style.fontWeight = '500';\n buttonSpan.style.backgroundColor = '#1d4ed8';\n }\n });\n \n \/\/ Hover effect\n buttonSpan.addEventListener('mouseenter', function() {\n this.style.backgroundColor = '#1d4ed8';\n this.style.transform = 'translateY(-1px)';\n });\n \n buttonSpan.addEventListener('mouseleave', function() {\n this.style.backgroundColor = fileInput.files && fileInput.files[0] ? '#1d4ed8' : '#215ba0';\n this.style.transform = 'translateY(0)';\n });\n \n \/\/ Click en el label activa el input file\n customLabel.addEventListener('click', function(e) {\n if (e.target !== fileInput) {\n fileInput.click();\n }\n });\n }\n }\n\n \/\/ Inicializar etiquetas flotantes\n initFloatingLabels();\n \n \/\/ Ocultar mensajes de CF7 al cargar la p\u00e1gina\n hideCF7Messages();\n \n \/\/ Observador para detectar y ocultar mensajes que aparezcan din\u00e1micamente\n const observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(mutation) {\n if (mutation.addedNodes && mutation.addedNodes.length > 0) {\n hideCF7Messages();\n }\n });\n });\n \n \/\/ Observar cambios en el formulario\n if (form) {\n observer.observe(form, { childList: true, subtree: true });\n }\n });\n <\/script>\n\t\t<\/p>\n\t<\/body>\n<\/html><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f3675-o4\" lang=\"es-ES\" dir=\"ltr\" data-wpcf7-id=\"3675\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/1734#wpcf7-f3675-o4\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulario de contacto\" enctype=\"multipart\/form-data\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"3675\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"es_ES\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f3675-o4\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><!DOCTYPE html>\n<\/p>\n<html lang=\"es\">\n\t<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n\t\t<title>Formulario Minimalista\n\t\t<\/title>\n\t\t<style>\n \/* =========================================\n ESTILOS MEJORADOS - MINIMALISTA CON BUEN UX\n ========================================= *\/\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n background-color: #f8fafc;\n margin: 0;\n padding: 0;\n color: #334155;\n line-height: 1.6;\n }\n\n .formulario-acema {\n background: white;\n border-radius: 16px;\n padding: 48px 40px;\n width: 100%;\n \n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);\n border: 1px solid rgba(226, 232, 240, 0.6);\n position: relative;\n overflow: hidden;\n }\n\n \/* Burbujas decorativas transparentes en esquinas *\/\n .formulario-acema::before {\n content: '';\n position: absolute;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(33, 91, 160, 0.08), rgba(33, 91, 160, 0));\n border-radius: 50%;\n top: -80px;\n right: -80px;\n pointer-events: none;\n z-index: 0;\n }\n\n .formulario-acema::after {\n content: '';\n position: absolute;\n width: 250px;\n height: 250px;\n background: radial-gradient(circle, rgba(64, 163, 53, 0.08), rgba(64, 163, 53, 0));\n border-radius: 50%;\n bottom: -120px;\n left: -100px;\n pointer-events: none;\n z-index: 0;\n }\n\n \/* Asegurar que el contenido est\u00e9 sobre las burbujas *\/\n .formulario-acema h2 {\n position: relative;\n z-index: 1;\n color:#40a335;\n text-align: center;\n font-weight: 900;\n font-size: 32px;\n margin-bottom: 40px;\n letter-spacing: -0.5px;\n }\n\n \/* Grid mejorado con mejor espaciado *\/\n .grid-layout {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 24px;\n margin-bottom: 24px;\n position: relative;\n z-index: 1;\n }\n\n .column {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n \/* Select row mejorado *\/\n .select-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n margin-bottom: 24px;\n position: relative;\n z-index: 1;\n }\n\n \/* Campos de formulario - minimalista *\/\n .formulario-acema input[type=\"text\"],\n .formulario-acema input[type=\"email\"],\n .formulario-acema input[type=\"tel\"],\n .formulario-acema select,\n .formulario-acema textarea,\n .formulario-acema input[type=\"file\"] {\n width: 100%;\n background-color: transparent;\n color: #727272a8;\n border: none;\n border-bottom: 2px solid #e2e8f0;\n border-radius: 0;\n padding: 14px 0 8px;\n font-size: 15px;\n font-family: inherit;\n transition: all 0.25s ease;\n appearance: none;\n cursor: pointer;\n }\n\n \/* Estilo espec\u00edfico para el select \"Tipo de solicitud\" *\/\n .formulario-acema select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n background-size: 16px;\n padding-right: 40px;\n background-color: white;\n }\n\n \/* Estados hover y focus para select *\/\n .formulario-acema select:hover {\n border-bottom-color: #93c5fd;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23215ba0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n }\n\n .formulario-acema select:focus {\n outline: none;\n border-bottom-color: #7eb3f3;\n background-color: transparent;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23215ba0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n box-shadow: 0 2px 0 0 rgba(33, 91, 160, 0.1);\n }\n \n\n \/* Estilo para cuando se ha seleccionado una opci\u00f3n *\/\n .formulario-acema select:valid:not([value=\"\"]) {\n color: #334155;\n font-weight: 500;\n }\n\n \/* Estilo para la opci\u00f3n por defecto *\/\n .formulario-acema select option[value=\"\"] {\n color: #215ba0;\n font-style: italic;\n }\n\n \/* Estilo para las opciones del dropdown *\/\n .formulario-acema select option {\n background-color: white;\n color: #215ba0;\n padding: 12px 16px;\n font-size: 15px;\n font-family: inherit;\n transition: all 0.2s ease;\n border-bottom: 1px solid #f1f5f9;\n }\n\n \/* Estilo para la \u00faltima opci\u00f3n (sin borde inferior) *\/\n .formulario-acema select option:last-child {\n border-bottom: none;\n }\n\n \/* Estilo para opciones al hacer hover en el dropdown *\/\n .formulario-acema select option:hover {\n background-color: #dbeafe;\n color: #215ba0;\n padding-left: 20px;\n cursor: pointer;\n }\n\n \/* Estilo para opci\u00f3n seleccionada en el dropdown *\/\n .formulario-acema select option:checked {\n background: linear-gradient(135deg, #215ba0 0%, #2563eb 100%);\n color:#215ba0;\n border-radius: 15px;\n font-weight: 500;\n position: relative;\n }\n\n \/* Flecha decorativa para opci\u00f3n seleccionada *\/\n .formulario-acema select option:checked::after {\n content: \"\u2713\";\n position: absolute;\n right: 16px;\n font-size: 14px;\n font-weight: bold;\n }\n\n \/* Estados focus mejorados *\/\n .formulario-acema input:focus,\n .formulario-acema select:focus,\n .formulario-acema textarea:focus {\n outline: none;\n border-bottom-color: #215ba0;\n box-shadow: 0 2px 0 0 rgba(33, 91, 160, 0.1);\n background-color: transparent;\n }\n\n \/* Placeholders elegantes *\/\n .formulario-acema input::placeholder,\n .formulario-acema textarea::placeholder {\n color: transparent;\n opacity: 1;\n transition: color 0.2s ease;\n }\n\n .formulario-acema input:focus::placeholder,\n .formulario-acema textarea:focus::placeholder {\n color:#929292a8;\n }\n\n \/* \u00c1rea de mensaje *\/\n .formulario-acema textarea {\n height: 140px;\n resize: vertical;\n min-height: 140px;\n margin-bottom: 32px;\n font-family: inherit;\n line-height: 1.5;\n border: 1px solid rgb(214, 212, 212);\n border-radius: 13px ;\n \n }\n\n \/* Estilos para etiquetas flotantes *\/\n .field-container {\n position: relative;\n margin-bottom: 8px;\n z-index: 1;\n }\n\n .field-label {\n position: absolute;\n top: 18px;\n left: 0;\n font-size: 15px;\n font-weight: 500;\n color:#929292a8; ;\n pointer-events: none;\n transition: all 0.2s ease;\n transform-origin: left center;\n margin: 0;\n padding: 0;\n }\n\n \/* Estados de la etiqueta flotante *\/\n .field-container.focused .field-label,\n .field-container.has-value .field-label {\n top: 0;\n font-size: 12px;\n color: #215ba0;\n transform: translateY(0);\n font-weight: 600;\n }\n\n .field-container select ~ .field-label {\n background-color: white;\n padding-right: 30px;\n padding-left: 4px;\n z-index: 1;\n }\n\n \/* Campos con valor pero sin foco *\/\n .field-container input:not(:placeholder-shown) ~ .field-label,\n .field-container textarea:not(:placeholder-shown) ~ .field-label,\n .field-container select:valid:not([value=\"\"]) ~ .field-label {\n top: 0;\n font-size: 12px;\n color: #64748b;\n font-weight: 500;\n }\n\n \/* Select enfocado *\/\n .field-container select:focus ~ .field-label {\n color: #215ba0;\n font-weight: 600;\n }\n\n \/* Privacidad - m\u00e1s minimalista *\/\n .privacy-card {\n background: #f8fafc;\n border-radius: 12px;\n padding: 16px;\n margin: 0 0 32px 0;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n border: 1px solid #e2e8f0;\n width: fit-content;\n position: relative;\n z-index: 1;\n }\n\n .privacy-title {\n color: #1e293b;\n font-weight: 600;\n font-size: 15px;\n margin: 0;\n }\n\n .privacy-card a {\n color: #40a335;\n font-weight: 500;\n text-decoration: none;\n transition: color 0.2s ease;\n font-size: 14px;\n }\n\n .privacy-card a:hover {\n color: #047857;\n text-decoration: underline;\n }\n\n \/* Checkbox wrapper mejorado *\/\n .checkbox-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 4px;\n }\n\n \/* Checkbox personalizado *\/\n .wpcf7-list-item {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .formulario-acema .privacy-card input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n border-radius: 3px;\n border: 1.5px solid #cbd5e1;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n }\n\n .formulario-acema .privacy-card input[type=\"checkbox\"]:checked {\n background-color: #40a335;\n border-color: #059669;\n }\n\n .wpcf7-list-item-label {\n color: #475569;\n font-size: 13px;\n cursor: pointer;\n margin: 0;\n }\n\n \/* Bot\u00f3n de enviar - CENTRADO HORIZONTALMENTE *\/\n .submit-wrapper {\n text-align: center;\n width: 100%;\n margin-top: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n z-index: 1;\n }\n\n .formulario-acema input[type=\"submit\"] {\n background-color: #215ba0;\n color: white;\n padding: 16px 48px;\n border-radius: 12px;\n border: none;\n font-weight: 600;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.25s ease;\n display: inline-block;\n letter-spacing: 0.3px;\n min-width: 220px;\n box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);\n }\n\n .formulario-acema input[type=\"submit\"]:hover {\n background-color: #1d4ed8;\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25);\n }\n\n .formulario-acema input[type=\"submit\"]:active {\n transform: translateY(-1px);\n }\n\n \/* Campo de archivo mejorado *\/\n .hidden-cv {\n display: none;\n opacity: 0;\n transform: translateY(-10px);\n transition: all 0.3s ease;\n }\n\n .hidden-cv.active {\n display: block;\n opacity: 1;\n transform: translateY(0);\n }\n\n .file-wrapper {\n position: relative;\n }\n\n .hidden-cv p {\n color: #215ba0;\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 10px;\n text-align: left;\n }\n\n \/* Input file personalizado *\/\n .formulario-acema input[type=\"file\"] {\n padding: 12px;\n cursor: pointer;\n border: 2px dashed #e2e8f0;\n background-color: white;\n border-radius: 8px;\n }\n\n .formulario-acema input[type=\"file\"]:hover {\n border-color: #3b82f6;\n background-color: #f8fafc;\n }\n\n .formulario-acema input[type=\"file\"]::-webkit-file-upload-button {\n background-color: #215ba0;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 6px;\n margin-right: 12px;\n cursor: pointer;\n font-family: inherit;\n font-size: 14px;\n transition: all 0.2s ease;\n }\n\n .formulario-acema input[type=\"file\"]::-webkit-file-upload-button:hover {\n background-color: #1d4ed8;\n transform: translateY(-1px);\n }\n\n \/* Mensaje de error *\/\n .error-message {\n color: #ef4444;\n font-size: 13px;\n font-weight: 500;\n margin-top: 8px;\n display: none;\n animation: slideIn 0.3s ease;\n }\n\n .error-message.show {\n display: block;\n }\n\n \/* Alerta de archivo faltante *\/\n .file-alert {\n background-color: #fee2e2;\n border: 1px solid #fecaca;\n border-radius: 8px;\n padding: 10px 12px;\n margin-top: 8px;\n display: none;\n font-size: 13px;\n color: #991b1b;\n font-weight: 500;\n }\n\n .file-alert.show {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .file-alert::before {\n content: \"\u26a0\";\n font-size: 16px;\n flex-shrink: 0;\n }\n\n \/* =========================================\n ESTILOS PARA EL POPUP\/MODAL\n ========================================= *\/\n .success-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .success-modal.active {\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 1;\n }\n\n .modal-content {\n background: white;\n border-radius: 20px;\n padding: 32px 32px;\n width: 90%;\n max-width: 420px;\n text-align: center;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n border: 1px solid rgba(226, 232, 240, 0.8);\n transform: translateY(30px) scale(0.95);\n opacity: 0;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n position: relative;\n overflow: hidden;\n }\n\n .success-modal.active .modal-content {\n transform: translateY(0) scale(1);\n opacity: 1;\n }\n\n \/* Icono de \u00e9xito *\/\n .modal-icon {\n width: 70px;\n height: 70px;\n background: linear-gradient(135deg, #215ba0 0%, #40a335 100%);\n border-radius: 50%;\n margin: 0 auto 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: iconPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;\n }\n\n .modal-icon svg {\n width: 40px;\n height: 40px;\n fill: white;\n }\n\n @keyframes iconPop {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 70% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n }\n\n \/* T\u00edtulo del modal *\/\n .modal-title {\n color: #1e293b;\n font-weight: 700;\n font-size: 24px;\n margin-bottom: 12px;\n letter-spacing: -0.5px;\n }\n\n \/* Mensaje del modal *\/\n .modal-message {\n color: #64748b;\n font-size: 15px;\n line-height: 1.5;\n margin-bottom: 24px;\n max-width: 380px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* Bot\u00f3n del modal *\/\n .modal-button {\n background: linear-gradient(135deg, #215ba0 0%, #2563eb 100%);\n color: white;\n border: none;\n padding: 16px 40px;\n border-radius: 12px;\n font-weight: 600;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: inline-block;\n letter-spacing: 0.3px;\n box-shadow: 0 4px 20px rgba(33, 91, 160, 0.2);\n }\n\n .modal-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(33, 91, 160, 0.3);\n }\n\n .modal-button:active {\n transform: translateY(-1px);\n }\n\n \/* Animaci\u00f3n de confeti *\/\n .confetti {\n position: absolute;\n width: 10px;\n height: 10px;\n background: #f59e0b;\n opacity: 0;\n }\n\n \/* Decoraci\u00f3n sutil *\/\n .modal-decoration {\n position: absolute;\n width: 200px;\n height: 200px;\n background: linear-gradient(135deg, rgba(33, 91, 160, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);\n border-radius: 50%;\n top: -100px;\n right: -100px;\n z-index: -1;\n }\n\n .modal-decoration:nth-child(2) {\n width: 150px;\n height: 150px;\n background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);\n bottom: -75px;\n left: -75px;\n top: auto;\n right: auto;\n }\n\n \/* Animaciones sutiles *\/\n .formulario-acema input,\n .formulario-acema select,\n .formulario-acema textarea {\n animation: fadeIn 0.3s ease-out;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(5px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Animaci\u00f3n para el select cuando cambia *\/\n @keyframes selectChange {\n 0% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-2px);\n }\n 100% {\n transform: translateY(0);\n }\n }\n\n .formulario-acema select.changed {\n animation: selectChange 0.3s ease;\n }\n\n \/* Responsivo mejorado *\/\n @media (max-width: 768px) {\n .formulario-acema {\n padding: 32px 24px;\n margin: 0;\n }\n\n .formulario-acema h2 {\n font-size: 28px;\n margin-bottom: 32px;\n }\n\n .grid-layout {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .select-row {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .privacy-card {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n margin-bottom: 24px;\n }\n\n \/* Bot\u00f3n centrado en m\u00f3vil *\/\n .submit-wrapper {\n margin-top: 16px;\n }\n\n .formulario-acema input[type=\"submit\"] {\n width: 100%;\n max-width: 280px;\n padding: 16px;\n }\n\n \/* Ajuste para select en m\u00f3viles *\/\n .formulario-acema select {\n font-size: 16px; \/* Previene zoom en iOS *\/\n padding: 16px 0 10px;\n }\n\n \/* Modal responsive *\/\n .modal-content {\n padding: 28px 24px;\n margin: 20px;\n width: calc(100% - 40px);\n }\n\n .modal-title {\n font-size: 22px;\n margin-bottom: 10px;\n }\n\n .modal-message {\n font-size: 14px;\n padding: 0 10px;\n margin-bottom: 20px;\n }\n\n .modal-icon {\n width: 65px;\n height: 65px;\n margin-bottom: 14px;\n }\n\n \/* ...existing code... *\/\n }\n\n \/* Para pantallas muy peque\u00f1as *\/\n @media (max-width: 480px) {\n body {\n padding: 12px;\n }\n\n .formulario-acema {\n padding: 24px 20px;\n border-radius: 12px;\n }\n\n .formulario-acema h2 {\n font-size: 24px;\n margin-bottom: 28px;\n }\n\n .formulario-acema input[type=\"submit\"] {\n min-width: auto;\n width: 100%;\n padding: 16px 24px;\n }\n\n .modal-content {\n padding: 24px 18px;\n }\n\n .modal-title {\n font-size: 20px;\n margin-bottom: 8px;\n }\n\n \/* ...existing code... *\/\n }\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<div class=\"formulario-acema\">\n\t\t\t<h2>CONT\u00c1CTANOS\n\t\t\t<\/h2>\n\t\t\t<div class=\"grid-layout\">\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"nombre\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"text\" name=\"nombre\" \/><\/span><br \/>\n<span class=\"field-label\">Nombres<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"apellidos\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"text\" name=\"apellidos\" \/><\/span><br \/>\n<span class=\"field-label\">Apellidos<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"telefono\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"tel\" name=\"telefono\" \/><\/span><br \/>\n<span class=\"field-label\">Tel\u00e9fono<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"column\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"correo\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\" value=\"\" type=\"email\" name=\"correo\" \/><\/span><br \/>\n<span class=\"field-label\">Correo electr\u00f3nico<\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"select-row\">\n\t\t\t\t<div class=\"select-wrapper\">\n\t\t\t\t\t<div class=\"field-container\">\n\t\t\t\t\t\t<p><select id=\"tipo-solicitud\" name=\"destino\" required>\n <option value=\"\" selected disabled>Tipo de solicitud<\/option>\n <option value=\"comercial.solar@acemaingenieria.com\n\">Servicios solares<\/option>\n <option value=\"comercial@acemaingenieria.com\">Servicios el\u00e9ctricos<\/option>\n <option value=\"desarrollo.humano@acemaingenieria.com\">Trabaja con nosotros<\/option>\n <\/select><br \/>\n<span class=\"field-label\"><\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div id=\"cv-wrapper\" class=\"hidden-cv\">\n\t\t\t\t\t<div class=\"file-wrapper\">\n\t\t\t\t\t\t<p>Adjunta tu hoja de vida\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"hoja_de_vida\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-file\" accept=\".pdf,.doc,.docx\" aria-invalid=\"false\" type=\"file\" name=\"hoja_de_vida\" \/><\/span>\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<div class=\"file-alert\" id=\"file-alert\">\n\t\t\t\t\t\t\t<p>Archivo requerido\n\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"error-message\" id=\"file-error\">\n\t\t\t\t\t\t\t<p>Por favor, adjunta tu hoja de vida\n\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"field-container\">\n\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"mensaje\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"\" name=\"mensaje\"><\/textarea><\/span><br \/>\n<span class=\"field-label\">Mensaje<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t<div class=\"privacy-card\">\n\t\t\t\t<p><span class=\"privacy-title\">Pol\u00edticas de privacidad<\/span><br \/>\n<a href=\"\/politica-privacidad\" target=\"_blank\">Ver pol\u00edticas<\/a>\n\t\t\t\t<\/p>\n\t\t\t\t<div class=\"checkbox-wrapper\">\n\t\t\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"acepto\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"acepto\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Acepto<\/span><\/label><\/span><\/span><\/span>\n\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"submit-wrapper\">\n\t\t\t\t<p><input type=\"submit\" value=\"Enviar mensaje\" id=\"submit-button\" \/>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n \n <!-- Este div se usa para ocultar cualquier mensaje de confirmaci\u00f3n de Contact Form 7 -->\n\t\t\t<div style=\"display: none;\">\n\t\t\t\t<div class=\"wpcf7-response-output\" aria-hidden=\"true\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"wpcf7-mail-sent-ok\" style=\"display: none;\">\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n <!-- Modal de \u00e9xito -->\n\t\t<div class=\"success-modal\" id=\"successModal\">\n\t\t\t<div class=\"modal-content\">\n\t\t\t\t<div class=\"modal-decoration\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"modal-decoration\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"modal-icon\">\n\t\t\t\t\t<p><svg viewBox=\"0 0 24 24\">\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/>\n <\/svg>\n\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t\t<h3 class=\"modal-title\">\u00a1Mensaje Enviado!\n\t\t\t\t<\/h3>\n\t\t\t\t<p class=\"modal-message\"><br \/>\nGracias por tu mensaje. Ha sido enviado correctamente.\n\t\t\t\t<\/p>\n\t\t\t\t<p>Nos pondremos en contacto contigo pronto.\n\t\t\t\t<\/p>\n\t\t\t\t<p><button class=\"modal-button\" id=\"closeModal\">Aceptar<\/button>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<p><script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const selectDestino = document.getElementById(\"tipo-solicitud\");\n const cvWrapper = document.getElementById(\"cv-wrapper\");\n const fileInput = cvWrapper ? cvWrapper.querySelector('input[type=\"file\"]') : null;\n const errorMessage = document.getElementById(\"file-error\");\n const fileAlert = document.getElementById(\"file-alert\");\n const form = document.querySelector('.formulario-acema');\n const submitButton = document.getElementById(\"submit-button\");\n const successModal = document.getElementById(\"successModal\");\n const closeModalBtn = document.getElementById(\"closeModal\");\n\n \/\/ Ocultar cualquier mensaje de Contact Form 7 que pueda aparecer\n function hideCF7Messages() {\n \/\/ Ocultar todos los mensajes de Contact Form 7\n const cf7Messages = document.querySelectorAll('.wpcf7-response-output, .wpcf7-mail-sent-ok, .wpcf7-mail-sent-ng, .wpcf7-spam-blocked, .wpcf7-validation-errors');\n cf7Messages.forEach(message => {\n message.style.display = 'none';\n message.setAttribute('aria-hidden', 'true');\n });\n \n \/\/ Tambi\u00e9n ocultar cualquier mensaje dentro del formulario\n const allMessages = document.querySelectorAll('.formulario-acema div[role=\"alert\"], .formulario-acema .alert, .formulario-acema .success-message');\n allMessages.forEach(message => {\n message.style.display = 'none';\n });\n }\n\n \/\/ Funci\u00f3n para inicializar etiquetas flotantes\n function initFloatingLabels() {\n const fieldContainers = document.querySelectorAll('.field-container');\n \n fieldContainers.forEach(container => {\n const input = container.querySelector('input, textarea, select');\n const label = container.querySelector('.field-label');\n \n if (!input || !label) return;\n \n \/\/ Inicializar estado\n updateLabelState(input, container);\n \n \/\/ Eventos para input\n input.addEventListener('focus', function() {\n container.classList.add('focused');\n updateLabelState(this, container);\n \n \/\/ Efecto especial para select\n if (this.tagName === 'SELECT') {\n this.style.borderBottomColor = '#215ba0';\n }\n });\n \n input.addEventListener('blur', function() {\n container.classList.remove('focused');\n updateLabelState(this, container);\n \n \/\/ Reset para select\n if (this.tagName === 'SELECT') {\n if (!this.value) {\n this.style.borderBottomColor = '#e2e8f0';\n }\n }\n });\n \n \/\/ Evento para cambios (para select y input)\n input.addEventListener('change', function() {\n updateLabelState(this, container);\n \n \/\/ Animaci\u00f3n para select cuando cambia\n if (this.tagName === 'SELECT' && this.value) {\n this.classList.add('changed');\n setTimeout(() => {\n this.classList.remove('changed');\n }, 300);\n }\n });\n \n \/\/ Evento para input (para campos de texto)\n input.addEventListener('input', function() {\n updateLabelState(this, container);\n });\n \n \/\/ Inicializar con el valor actual (para campos precargados)\n if (input.value) {\n container.classList.add('has-value');\n }\n });\n }\n \n function updateLabelState(input, container) {\n const label = container.querySelector('.field-label');\n \n if (input.tagName === 'SELECT') {\n \/\/ Para select\n if (input.value && input.value !== \"\") {\n container.classList.add('has-value');\n label.style.color = '#64748b';\n input.style.color = '#334155';\n } else {\n container.classList.remove('has-value');\n input.style.color = '#94a3b8';\n }\n } else if (input.tagName === 'TEXTAREA') {\n \/\/ Para textarea\n if (input.value.trim()) {\n container.classList.add('has-value');\n } else {\n container.classList.remove('has-value');\n }\n } else {\n \/\/ Para inputs normales\n if (input.value.trim()) {\n container.classList.add('has-value');\n } else {\n container.classList.remove('has-value');\n }\n }\n }\n\n \/\/ Funci\u00f3n para mostrar el modal de \u00e9xito\n function showSuccessModal() {\n \/\/ Primero ocultamos cualquier mensaje de CF7\n hideCF7Messages();\n \n \/\/ Luego mostramos nuestro modal\n successModal.classList.add('active');\n document.body.style.overflow = 'hidden'; \/\/ Previene scroll\n \n \/\/ Crear efecto de confeti simple\n createConfetti();\n }\n\n \/\/ Funci\u00f3n para cerrar el modal\n function closeSuccessModal() {\n successModal.classList.remove('active');\n document.body.style.overflow = 'auto'; \/\/ Restaura scroll\n \n \/\/ Limpiar el formulario despu\u00e9s de enviar\n if (form) {\n form.reset();\n \n \/\/ Resetear las etiquetas flotantes\n const fieldContainers = document.querySelectorAll('.field-container');\n fieldContainers.forEach(container => {\n container.classList.remove('has-value');\n const input = container.querySelector('input, textarea, select');\n if (input && input.tagName === 'SELECT') {\n input.style.color = '#94a3b8';\n }\n });\n \n \/\/ Resetear el campo CV\n if (cvWrapper) {\n cvWrapper.classList.remove(\"active\");\n if (fileInput) {\n fileInput.removeAttribute(\"required\");\n }\n }\n }\n \n \/\/ Asegurarnos de que los mensajes de CF7 permanezcan ocultos\n setTimeout(hideCF7Messages, 100);\n }\n\n \/\/ Funci\u00f3n para crear efecto de confeti simple\n function createConfetti() {\n const modalContent = document.querySelector('.modal-content');\n const colors = ['#215ba0', '#2563eb', '#10b981', '#f59e0b', '#ef4444'];\n \n for (let i = 0; i < 20; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.left = Math.random() * 100 + '%';\n confetti.style.top = '-10px';\n confetti.style.transform = `rotate(${Math.random() * 360}deg)`;\n confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';\n \n modalContent.appendChild(confetti);\n \n \/\/ Animaci\u00f3n\n setTimeout(() => {\n confetti.style.transition = 'all 1s cubic-bezier(0.1, 0.8, 0.3, 1)';\n confetti.style.opacity = '1';\n confetti.style.transform = `translateY(${window.innerHeight}px) rotate(${Math.random() * 720}deg)`;\n \n \/\/ Eliminar despu\u00e9s de la animaci\u00f3n\n setTimeout(() => {\n confetti.remove();\n }, 1000);\n }, i * 50);\n }\n }\n\n \/\/ Event listeners para el modal\n if (closeModalBtn) {\n closeModalBtn.addEventListener('click', closeSuccessModal);\n }\n\n \/\/ Cerrar modal al hacer clic fuera del contenido\n if (successModal) {\n successModal.addEventListener('click', function(e) {\n if (e.target === this) {\n closeSuccessModal();\n }\n });\n }\n\n \/\/ Cerrar modal con la tecla Escape\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && successModal.classList.contains('active')) {\n closeSuccessModal();\n }\n });\n\n if (selectDestino && cvWrapper) {\n \/\/ Funci\u00f3n para mostrar\/ocultar el campo CV\n function toggleCVField() {\n const selectedOption = selectDestino.options[selectDestino.selectedIndex];\n const selectedText = selectedOption ? selectedOption.text : '';\n const fileAlert = document.getElementById(\"file-alert\");\n\n if (selectedText === \"Trabaja con nosotros\") {\n cvWrapper.classList.add(\"active\");\n if (fileInput) {\n fileInput.setAttribute(\"required\", \"required\");\n fileInput.parentElement.style.borderColor = \"#ef4444\";\n }\n } else {\n cvWrapper.classList.remove(\"active\");\n if (fileInput) {\n fileInput.removeAttribute(\"required\");\n fileInput.parentElement.style.borderColor = \"\";\n errorMessage.classList.remove(\"show\");\n if (fileAlert) {\n fileAlert.classList.remove(\"show\");\n }\n }\n }\n }\n\n \/\/ Ejecutar al cambiar la selecci\u00f3n\n selectDestino.addEventListener(\"change\", function() {\n toggleCVField();\n \n \/\/ Cambiar color del texto cuando se selecciona una opci\u00f3n v\u00e1lida\n if (this.value) {\n this.style.color = '#334155';\n } else {\n this.style.color = '#94a3b8';\n }\n });\n\n \/\/ Ejecutar al cargar la p\u00e1gina\n toggleCVField();\n\n \/\/ Validar archivo antes de enviar\n if (form && submitButton) {\n submitButton.addEventListener(\"click\", function(e) {\n const selectedOption = selectDestino.options[selectDestino.selectedIndex];\n const selectedText = selectedOption ? selectedOption.text : '';\n const fileAlert = document.getElementById(\"file-alert\");\n \n if (selectedText === \"Trabaja con nosotros\" && fileInput && !fileInput.value) {\n e.preventDefault();\n fileInput.focus();\n fileInput.parentElement.style.borderColor = \"#ef4444\";\n fileInput.parentElement.style.boxShadow = \"0 0 0 3px rgba(239, 68, 68, 0.1)\";\n errorMessage.classList.add(\"show\");\n if (fileAlert) {\n fileAlert.classList.add(\"show\");\n }\n return false;\n }\n \n \/\/ Simular env\u00edo exitoso (en producci\u00f3n, esto se har\u00eda con AJAX)\n e.preventDefault();\n console.log('Mostrando modal...'); \/\/ Debug\n showSuccessModal();\n });\n }\n\n \/\/ Limpiar el error cuando se selecciona un archivo\n if (fileInput) {\n fileInput.addEventListener(\"change\", function() {\n const fileAlert = document.getElementById(\"file-alert\");\n if (this.value) {\n this.parentElement.style.borderColor = \"#e2e8f0\";\n this.parentElement.style.boxShadow = \"none\";\n errorMessage.classList.remove(\"show\");\n if (fileAlert) {\n fileAlert.classList.remove(\"show\");\n }\n }\n });\n }\n }\n\n \/\/ Mejorar la experiencia del checkbox\n const checkboxes = document.querySelectorAll('input[type=\"checkbox\"]');\n checkboxes.forEach(checkbox => {\n checkbox.addEventListener('change', function() {\n if(this.checked) {\n this.style.boxShadow = '0 0 0 3px rgba(5, 150, 105, 0.1)';\n } else {\n this.style.boxShadow = 'none';\n }\n });\n });\n\n \/\/ Inicializar etiquetas flotantes\n initFloatingLabels();\n \n \/\/ Ocultar mensajes de CF7 al cargar la p\u00e1gina\n hideCF7Messages();\n \n \/\/ Observador para detectar y ocultar mensajes que aparezcan din\u00e1micamente\n const observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(mutation) {\n if (mutation.addedNodes && mutation.addedNodes.length > 0) {\n hideCF7Messages();\n }\n });\n });\n \n \/\/ Observar cambios en el formulario\n if (form) {\n observer.observe(form, { childList: true, subtree: true });\n }\n });\n <\/script>\n\t\t<\/p>\n\t<\/body>\n<\/html><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\u00a1Hacemos realidad tus proyectos el\u00e9ctricos!<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"class_list":["post-1734","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/acemaingenieria.com\/en\/wp-json\/wp\/v2\/pages\/1734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/acemaingenieria.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/acemaingenieria.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/acemaingenieria.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/acemaingenieria.com\/en\/wp-json\/wp\/v2\/comments?post=1734"}],"version-history":[{"count":83,"href":"https:\/\/acemaingenieria.com\/en\/wp-json\/wp\/v2\/pages\/1734\/revisions"}],"predecessor-version":[{"id":3681,"href":"https:\/\/acemaingenieria.com\/en\/wp-json\/wp\/v2\/pages\/1734\/revisions\/3681"}],"wp:attachment":[{"href":"https:\/\/acemaingenieria.com\/en\/wp-json\/wp\/v2\/media?parent=1734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}