{"id":5726,"date":"2023-08-08T10:43:27","date_gmt":"2023-08-08T10:43:27","guid":{"rendered":"https:\/\/microestil.webs.clicksun.com\/contact"},"modified":"2025-12-19T14:03:13","modified_gmt":"2025-12-19T14:03:13","slug":"contact","status":"publish","type":"page","link":"https:\/\/microestil.com\/en\/contact","title":{"rendered":"Contact"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5726\" class=\"elementor elementor-5726 elementor-393\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-61a9645 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"61a9645\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;wdt_bg_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;wdt_bg_image_laptop&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;wdt_bg_image_tablet_extra&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;wdt_bg_image_tablet&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;wdt_bg_image_mobile_extra&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;wdt_bg_image_mobile&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;wdt_bg_position&quot;:&quot;center center&quot;,&quot;wdt_animation_effect&quot;:&quot;none&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6dc0ba9\" data-id=\"6dc0ba9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4cc2a56 elementor-widget__width-auto elementor-absolute elementor-invisible elementor-widget elementor-widget-wdt-heading\" data-id=\"4cc2a56\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;wdt_enable_inview_status&quot;:&quot;true&quot;,&quot;wdt_animation_effect&quot;:&quot;none&quot;}\" data-widget_type=\"wdt-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"wdt-heading-holder \" id=\"wdt-heading-4cc2a56\"><h2 class=\"wdt-heading-title-wrapper wdt-heading-align-center wdt-heading-deco-wrapper\"><span class=\"wdt-heading-title\">International <span class=\"wdt-heading-colored-elements\">Offices<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-037e2e0 e-flex e-con-boxed e-con e-parent\" data-id=\"037e2e0\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ca3ce86 elementor-widget__width-auto elementor-widget elementor-widget-shortcode\" data-id=\"ca3ce86\" data-element_type=\"widget\" data-settings=\"{&quot;wdt_animation_effect&quot;:&quot;none&quot;}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <div class=\"map-component-container\">\n        <div class=\"business-map\"><\/div>\n        <div class=\"map-tooltip\"><\/div>\n    <\/div>\n\n    <style>\n        .map-component-container {\n            --map-bg: #ffffff;\n            --map-land: #f0f0f0;\n            --map-border: #e0e0e0;\n            --map-marker: #000000;\n            --map-pulse: rgba(0, 0, 0, 0.15);\n\t\t\tmargin:auto;\n            width: 70%;\n            position: relative;\n            background: var(--map-bg);\n            overflow: hidden;\n            aspect-ratio: 16 \/ 9;\n            min-height: 450px;\n        }\n\n        .map-component-container svg {\n            width: 100%;\n            height: 100%;\n            display: block;\n        }\n\n        .map-component-container .country-path {\n            fill: var(--map-land);\n            stroke: var(--map-border);\n            stroke-width: 0.6px;\n            transition: fill 0.3s ease;\n        }\n\n        .map-component-container .country-path:hover {\n            fill: #e8e8e8;\n        }\n\n        .map-component-container .marker-group {\n            cursor: pointer;\n        }\n\n        .map-component-container .marker-dot {\n            fill: var(--map-marker);\n        }\n\n        .map-component-container .marker-ripple {\n            fill: none;\n            stroke: var(--map-pulse);\n            stroke-width: 1.5px;\n            animation: map-ripple 2.5s infinite;\n        }\n\n        @keyframes map-ripple {\n            0% { transform: scale(1); opacity: 1; }\n            100% { transform: scale(4); opacity: 0; }\n        }\n\n        .map-component-container .map-tooltip {\n            position: absolute;\n            background: #fff;\n            color: #000;\n            padding: 8px 14px;\n            border: 1px solid #000;\n            font-size: 12px;\n            font-weight: bold;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            pointer-events: none;\n            opacity: 0;\n            z-index: 10;\n            transition: opacity 0.2s ease;\n        }\n    <\/style>\n\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", function () {\n\n            document.querySelectorAll(\".map-component-container\").forEach(container => {\n\n                const mapDiv = container.querySelector(\".business-map\");\n                const tooltip = container.querySelector(\".map-tooltip\");\n\n                const locations = [\n                    { n: \"Espa\u00f1a\", c: [-3.7, 40.4] },\n                    { n: \"Canad\u00e1\", c: [-106.3, 56.1] },\n                    { n: \"USA\", c: [-95.7, 37.0] },\n                    { n: \"Puerto Rico\", c: [-66.5, 18.2] },\n                    { n: \"Alemania\", c: [10.4, 51.1] },\n                    { n: \"Polonia\", c: [19.1, 51.9] },\n                    { n: \"Reino Unido\", c: [-3.4, 54.3] },\n                    { n: \"Irlanda\", c: [-8.2, 53.4] },\n                    { n: \"Australia\", c: [133.7, -25.2] },\n                    { n: \"Dinamarca\", c: [9.5, 56.2] },\n                    { n: \"Indonesia\", c: [113.9, -0.7] }\n                ];\n\n                function initMap() {\n\n                    mapDiv.innerHTML = \"\";\n\n                    const width  = container.clientWidth;\n                    const height = container.clientHeight;\n\n                    const svg = d3.select(mapDiv)\n                        .append(\"svg\")\n                        .attr(\"viewBox\", `0 0 ${width} ${height}`)\n                        .attr(\"preserveAspectRatio\", \"xMidYMid meet\");\n\n                    const projection = d3.geoMercator()\n                        .scale(width \/ 6.5)\n                        .translate([width \/ 2.05, height \/ 1.45]);\n\n                    const path = d3.geoPath().projection(projection);\n\n                    d3.json(\"https:\/\/unpkg.com\/world-atlas@2.0.2\/countries-110m.json\")\n                        .then(data => {\n\n                            const countries = topojson.feature(data, data.objects.countries);\n\n                            svg.append(\"g\")\n                                .selectAll(\"path\")\n                                .data(countries.features)\n                                .enter()\n                                .append(\"path\")\n                                .attr(\"class\", \"country-path\")\n                                .attr(\"d\", path);\n\n                            const markers = svg.append(\"g\")\n                                .selectAll(\".marker-group\")\n                                .data(locations)\n                                .enter()\n                                .append(\"g\")\n                                .attr(\"class\", \"marker-group\")\n                                .attr(\"transform\", d => {\n                                    const [x, y] = projection(d.c);\n                                    return `translate(${x}, ${y})`;\n                                })\n                                .on(\"mouseenter\", (event, d) => {\n                                    tooltip.style.opacity = 1;\n                                    tooltip.textContent = d.n;\n                                })\n                                .on(\"mousemove\", event => {\n                                    const rect = container.getBoundingClientRect();\n                                    tooltip.style.left = (event.clientX - rect.left + 15) + \"px\";\n                                    tooltip.style.top  = (event.clientY - rect.top - 40) + \"px\";\n                                })\n                                .on(\"mouseleave\", () => tooltip.style.opacity = 0);\n\n                            markers.append(\"circle\")\n                                .attr(\"class\", \"marker-ripple\")\n                                .attr(\"r\", 4);\n\n                            markers.append(\"circle\")\n                                .attr(\"class\", \"marker-dot\")\n                                .attr(\"r\", 3.5);\n\n                            markers\n                                .attr(\"opacity\", 0)\n                                .transition()\n                                .duration(1000)\n                                .delay((d, i) => i * 80)\n                                .attr(\"opacity\", 1);\n                        });\n                }\n\n                initMap();\n\n                let resizeTimer;\n                window.addEventListener(\"resize\", () => {\n                    clearTimeout(resizeTimer);\n                    resizeTimer = setTimeout(initMap, 300);\n                });\n\n            });\n\n        });\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0eab767 e-flex e-con-boxed e-con e-parent\" data-id=\"0eab767\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-750633c elementor-widget elementor-widget-shortcode\" data-id=\"750633c\" data-element_type=\"widget\" data-settings=\"{&quot;wdt_animation_effect&quot;:&quot;none&quot;}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <style>\n        \/* Contenedor principal *\/\n        .micro-contact-wrapper {\n            max-width: 800px;\n            margin: 0 auto;\n            font-family: sans-serif;\n        }\n        \n        .micro-contact-wrapper h2 {\n            font-size: 28px;\n            margin-bottom: 30px;\n            color: #000;\n        }\n\n        \/* Grid de 2 columnas *\/\n        .micro-form-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr; \/* Dos columnas iguales *\/\n            gap: 20px; \/* Espacio entre columnas *\/\n        }\n\n        \/* Estilos de los inputs para igualar la imagen (Gris claro, sin borde) *\/\n        .micro-input-group input, \n        .micro-input-group textarea {\n            width: 100%;\n            background-color: #f2f2f2; \/* Color de fondo gris claro *\/\n            border: none;\n            padding: 15px;\n            margin-bottom: 20px;\n            font-size: 14px;\n            color: #666;\n            box-sizing: border-box; \/* Para que el padding no rompa el ancho *\/\n        }\n\n        \/* Placeholder color *\/\n        .micro-input-group input::placeholder,\n        .micro-input-group textarea::placeholder {\n            color: #999;\n        }\n\n        \/* El textarea debe ser alto *\/\n        .micro-input-group textarea {\n            height: 180px; \/* Altura fija similar a la imagen *\/\n            resize: none;\n        }\n\n        \/* Bot\u00f3n estilo \"Sage Green\" de la imagen *\/\n        .micro-submit-btn {\n            width: 100%;\n            padding: 15px;\n            background-color: #d9e2d0; \/* Color aproximado de la imagen *\/\n            color: #fff;\n            border: none;\n            font-size: 16px;\n            cursor: pointer;\n            transition: background 0.3s;\n            font-weight: bold;\n            text-transform: uppercase; \/* Opcional, si se quiere en may\u00fasculas *\/\n        }\n\n        .micro-submit-btn:hover {\n            background-color: #c0ccb5;\n        }\n        \n        .micro-submit-btn:disabled {\n            opacity: 0.7;\n            cursor: wait;\n        }\n\n        \/* Mensaje de respuesta estilo alerta verde *\/\n        .form-response {\n            margin-top: 20px;\n            padding: 15px;\n            display: none;\n            font-size: 14px;\n        }\n        \n        .form-response.success {\n            background-color: #eaf7ce; \/* Fondo verde muy claro *\/\n            border: 1px solid #d6e9c6;\n            color: #5c7e1f; \/* Texto verde oscuro *\/\n        }\n        \n        .form-response.error {\n            background-color: #f2dede;\n            border: 1px solid #ebccd1;\n            color: #a94442;\n        }\n\n        \/* Responsiveness: Una columna en m\u00f3viles *\/\n        @media (max-width: 600px) {\n            .micro-form-grid {\n                grid-template-columns: 1fr;\n            }\n            .micro-input-group textarea {\n                height: 120px;\n            }\n        }\n    <\/style>\n\n    <div class=\"micro-contact-wrapper\">\n        <h2>Cont\u00e1ctenos<\/h2>\n        \n        <form id=\"ajax-contact-form\">\n            <div class=\"micro-form-grid\">\n                <div class=\"micro-col-left\">\n                    <div class=\"micro-input-group\">\n                        <input type=\"text\" name=\"nombre\" placeholder=\"Tu nombre*\" required>\n                    <\/div>\n                    <div class=\"micro-input-group\">\n                        <input type=\"text\" name=\"compania\" placeholder=\"Compa\u00f1\u00eda\">\n                    <\/div>\n                    <div class=\"micro-input-group\">\n                        <input type=\"email\" name=\"email\" placeholder=\"Tu correo electr\u00f3nico*\" required>\n                    <\/div>\n                    <div class=\"micro-input-group\">\n                        <button type=\"submit\" id=\"submit-btn\" class=\"micro-submit-btn\">Enviar<\/button>\n                    <\/div>\n                <\/div>\n\n                <div class=\"micro-col-right\">\n                    <div class=\"micro-input-group\">\n                        <input type=\"text\" name=\"asunto\" placeholder=\"Asunto*\" required>\n                    <\/div>\n                    <div class=\"micro-input-group\">\n                        <textarea name=\"mensaje\" placeholder=\"Tu mensaje (opcional)\"><\/textarea>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <input type=\"hidden\" id=\"security\" name=\"security\" value=\"85fd98a93e\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/5726\" \/>            <input type=\"hidden\" name=\"action\" value=\"enviar_email_microestil\">\n            \n            <div id=\"form-message\" class=\"form-response\"><\/div>\n        <\/form>\n    <\/div>\n\n    <script type=\"text\/javascript\">\n    document.addEventListener('DOMContentLoaded', function() {\n        const form = document.getElementById('ajax-contact-form');\n        const messageBox = document.getElementById('form-message');\n        const submitBtn = document.getElementById('submit-btn');\n        const ajaxUrl = \"https:\/\/microestil.com\/wp-admin\/admin-ajax.php\";\n\n        form.addEventListener('submit', function(e) {\n            e.preventDefault();\n\n            \/\/ Estado de carga\n            submitBtn.disabled = true;\n            submitBtn.innerText = 'ENVIANDO...';\n            messageBox.style.display = 'none';\n            messageBox.className = 'form-response';\n\n            const formData = new FormData(form);\n\n            fetch(ajaxUrl, {\n                method: 'POST',\n                body: formData\n            })\n            .then(response => response.json())\n            .then(data => {\n                messageBox.style.display = 'block';\n                if(data.success) {\n                    \/\/ Mensaje con icono de check como en la imagen\n                    messageBox.innerHTML = '\u2714 ' + data.data; \n                    messageBox.classList.add('success');\n                    form.reset();\n                } else {\n                    messageBox.innerText = '\u26a0 ' + data.data;\n                    messageBox.classList.add('error');\n                }\n            })\n            .catch(error => {\n                messageBox.style.display = 'block';\n                messageBox.innerText = 'Error de conexi\u00f3n. Intente nuevamente.';\n                messageBox.classList.add('error');\n            })\n            .finally(() => {\n                submitBtn.disabled = false;\n                submitBtn.innerText = 'Enviar';\n            });\n        });\n    });\n    <\/script>\n    \n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0f67f05 e-con-full e-flex e-con e-child\" data-id=\"0f67f05\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7dfd2e4 elementor-list-item-link-inline elementor-widget-mobile_extra__width-inherit wdt-custom-hotspot-iconbx elementor-align-center elementor-widget__width-initial elementor-icon-list--layout-traditional elementor-widget elementor-widget-icon-list\" data-id=\"7dfd2e4\" data-element_type=\"widget\" data-settings=\"{&quot;wdt_animation_effect&quot;:&quot;none&quot;}\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">C\/ Ses Brodadores, 15 Pol. Ind. Son Lla\u00fct 07320 Santa Mar\u00eda del Camillles Balears<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"mailto:%20info@microestil.com\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">info@microestil.com<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"tel:%20(+34)%20971%20621%20585\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">(+34) 971 621 585<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>International Offices C\/ Ses Brodadores, 15 Pol. Ind. Son Lla\u00fct 07320 Santa Mar\u00eda del Camillles Balears info@microestil.com (+34) 971 621 585<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5726","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/microestil.com\/en\/wp-json\/wp\/v2\/pages\/5726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/microestil.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/microestil.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/microestil.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/microestil.com\/en\/wp-json\/wp\/v2\/comments?post=5726"}],"version-history":[{"count":9,"href":"https:\/\/microestil.com\/en\/wp-json\/wp\/v2\/pages\/5726\/revisions"}],"predecessor-version":[{"id":7130,"href":"https:\/\/microestil.com\/en\/wp-json\/wp\/v2\/pages\/5726\/revisions\/7130"}],"wp:attachment":[{"href":"https:\/\/microestil.com\/en\/wp-json\/wp\/v2\/media?parent=5726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}