{"id":23,"date":"2025-07-29T20:33:51","date_gmt":"2025-07-29T20:33:51","guid":{"rendered":"https:\/\/capresem.cl\/1\/contact\/"},"modified":"2026-06-01T05:39:29","modified_gmt":"2026-06-01T05:39:29","slug":"contact","status":"publish","type":"page","link":"https:\/\/capresem.cl\/1\/contact\/","title":{"rendered":"Contacto"},"content":{"rendered":"\n\n\n<!--\nP\u00e1gina: Contacto - CAPRESEM SPA\nCon direcci\u00f3n y mapa de Google Maps\n-->\n\n<style>\n    \/* ===== ESTILOS ===== *\/\n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n    body {\n        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;\n        color: #1f2937;\n        line-height: 1.5;\n    }\n    .container {\n        max-width: 1200px;\n        margin: 0 auto;\n        padding: 0 20px;\n    }\n    section {\n        padding: 60px 0;\n    }\n    .section-title {\n        text-align: center;\n        font-size: 32px;\n        margin-bottom: 40px;\n        color: #0f2b3d;\n    }\n    .section-title span {\n        border-bottom: 4px solid #3b82f6;\n        padding-bottom: 10px;\n    }\n    \/* Hero *\/\n    .hero {\n        background: linear-gradient(135deg, #0f2b3d 0%, #1a4a6f 100%);\n        color: white;\n        padding: 80px 0;\n        text-align: center;\n    }\n    .hero h1 {\n        font-size: 48px;\n        margin-bottom: 20px;\n    }\n    .hero p {\n        font-size: 18px;\n        max-width: 600px;\n        margin: 0 auto;\n        opacity: 0.9;\n    }\n    \/* Grid de contacto *\/\n    .contact-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 40px;\n    }\n    \/* Tarjetas de informaci\u00f3n *\/\n    .info-card {\n        background: #f9fafb;\n        padding: 30px;\n        border-radius: 20px;\n        box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n        margin-bottom: 25px;\n    }\n    .info-card h3 {\n        color: #0f2b3d;\n        margin-bottom: 20px;\n        font-size: 24px;\n    }\n    .contact-item {\n        display: flex;\n        align-items: center;\n        margin-bottom: 20px;\n        font-size: 18px;\n    }\n    .contact-icon {\n        font-size: 28px;\n        margin-right: 15px;\n        min-width: 40px;\n    }\n    .contact-item a {\n        color: #3b82f6;\n        text-decoration: none;\n    }\n    .contact-item a:hover {\n        text-decoration: underline;\n    }\n    \/* Mapa *\/\n    .mapa-card {\n        background: #f9fafb;\n        padding: 30px;\n        border-radius: 20px;\n        box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n    }\n    .mapa-container {\n        border-radius: 16px;\n        overflow: hidden;\n        margin-top: 15px;\n    }\n    .mapa-container iframe {\n        width: 100%;\n        height: 300px;\n        border: 0;\n    }\n    \/* Formulario *\/\n    .form-card {\n        background: white;\n        padding: 30px;\n        border-radius: 20px;\n        box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n        border: 1px solid #e5e7eb;\n    }\n    .form-group {\n        margin-bottom: 20px;\n    }\n    label {\n        display: block;\n        font-weight: 600;\n        margin-bottom: 8px;\n        color: #1f2937;\n    }\n    .required:after {\n        content: \" *\";\n        color: #ef4444;\n    }\n    input, select, textarea {\n        width: 100%;\n        padding: 12px 16px;\n        border: 1px solid #d1d5db;\n        border-radius: 12px;\n        font-size: 15px;\n        font-family: inherit;\n        transition: all 0.2s;\n    }\n    input:focus, textarea:focus {\n        outline: none;\n        border-color: #3b82f6;\n        box-shadow: 0 0 0 3px rgba(59,130,246,0.2);\n    }\n    button {\n        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n        color: white;\n        border: none;\n        padding: 14px 24px;\n        width: 100%;\n        font-size: 16px;\n        font-weight: 700;\n        border-radius: 50px;\n        cursor: pointer;\n        transition: transform 0.1s;\n    }\n    button:hover {\n        transform: translateY(-1px);\n    }\n    .alert-message {\n        padding: 14px 18px;\n        border-radius: 14px;\n        margin-bottom: 20px;\n        display: none;\n    }\n    .alert-success {\n        background: #dcfce7;\n        color: #166534;\n        border: 1px solid #bbf7d0;\n    }\n    .alert-error {\n        background: #fee2e2;\n        color: #991b1b;\n        border: 1px solid #fecaca;\n    }\n    .btn-volver {\n        display: inline-block;\n        background: #3b82f6;\n        color: white;\n        padding: 12px 30px;\n        border-radius: 50px;\n        text-decoration: none;\n        font-weight: 600;\n        margin-top: 20px;\n    }\n    .btn-volver:hover {\n        background: #2563eb;\n    }\n    @media (max-width: 768px) {\n        .hero h1 { font-size: 36px; }\n        .contact-grid { grid-template-columns: 1fr; }\n        section { padding: 40px 0; }\n    }\n<\/style>\n\n<!-- Hero -->\n<section class=\"hero\">\n    <div class=\"container\">\n        <h1>Contacto<\/h1>\n        <p>Estamos aqu\u00ed para resolver tus dudas y ayudarte con tu proceso de capacitaci\u00f3n.<\/p>\n    <\/div>\n<\/section>\n\n<!-- Contenido principal -->\n<section>\n    <div class=\"container\">\n        <div class=\"contact-grid\">\n            <!-- Columna izquierda: Informaci\u00f3n -->\n            <div>\n                <div class=\"info-card\">\n                    <h3>\ud83d\udcf1 Datos de contacto<\/h3>\n                    <div class=\"contact-item\">\n                        <div class=\"contact-icon\">\ud83d\udcde<\/div>\n                        <div>+56 9 3617 8269<\/div>\n                    <\/div>\n                    <div class=\"contact-item\">\n                        <div class=\"contact-icon\">\ud83d\udcac<\/div>\n                        <div><a href=\"https:\/\/wa.me\/56936178269?text=Hola%2C%20quisiera%20informaci\u00f3n%20sobre%20los%20cursos\" target=\"_blank\">WhatsApp: +56 9 3617 8269<\/a><\/div>\n                    <\/div>\n                    <div class=\"contact-item\">\n                        <div class=\"contact-icon\">\u2709\ufe0f<\/div>\n                        <div><a href=\"mailto:consultas@capresem.cl\">consultas@capresem.cl<\/a><\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"info-card\">\n                    <h3>\ud83d\udccd Horario de atenci\u00f3n<\/h3>\n                    <div class=\"contact-item\">\n                        <div class=\"contact-icon\">\ud83d\udd50<\/div>\n                        <div>Lunes a Viernes: 09:00 &#8211; 18:00 hrs<\/div>\n                    <\/div>\n                    <div class=\"contact-item\">\n                        <div class=\"contact-icon\">\ud83d\udcc5<\/div>\n                        <div>S\u00e1bados: 09:00 &#8211; 13:00 hrs<\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"mapa-card\">\n                    <h3>\ud83c\udfe2 Nuestra oficina<\/h3>\n                    <div class=\"contact-item\">\n                        <div class=\"contact-icon\">\ud83d\udccd<\/div>\n                        <div>\n                            <strong>Las Bellotas 199, Oficina 62<\/strong><br>\n                            Providencia, Santiago, Chile\n                        <\/div>\n                    <\/div>\n                    <div class=\"mapa-container\">\n                        <iframe \n                            src=\"https:\/\/maps.google.com\/maps?q=Las+Bellotas+199+Providencia+Santiago&#038;t=&#038;z=16&#038;ie=UTF8&#038;iwloc=&#038;output=embed\" \n                            title=\"Mapa CAPRESEM - Las Bellotas 199, Providencia\"\n                            allowfullscreen=\"\">\n                        <\/iframe>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Columna derecha: Formulario -->\n            <div>\n                <div class=\"form-card\">\n                    <h3>\ud83d\udcdd Escr\u00edbenos<\/h3>\n                    <p style=\"margin-bottom: 20px; color: #6b7280;\">Completa el formulario y te responderemos a la brevedad.<\/p>\n                    \n                    <div id=\"formAlert\" class=\"alert-message\"><\/div>\n                    \n                    <form id=\"contactForm\">\n                        <div class=\"form-group\">\n                            <label class=\"required\">Nombre completo<\/label>\n                            <input type=\"text\" id=\"nombre\" required placeholder=\"Ej: Juan P\u00e9rez\">\n                        <\/div>\n                        \n                        <div class=\"form-group\">\n                            <label class=\"required\">Correo electr\u00f3nico<\/label>\n                            <input type=\"email\" id=\"email\" required placeholder=\"juan@ejemplo.cl\">\n                        <\/div>\n                        \n                        <div class=\"form-group\">\n                            <label class=\"required\">Tel\u00e9fono<\/label>\n                            <input type=\"tel\" id=\"telefono\" required placeholder=\"+56 9 XXXX XXXX\">\n                        <\/div>\n                        \n                        <div class=\"form-group\">\n                            <label class=\"required\">Mensaje<\/label>\n                            <textarea id=\"mensaje\" rows=\"4\" required placeholder=\"\u00bfEn qu\u00e9 podemos ayudarte?\"><\/textarea>\n                        <\/div>\n                        \n                        <button type=\"submit\">Enviar mensaje<\/button>\n                    <\/form>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Call to Action -->\n<section style=\"background: #f9fafb;\">\n    <div class=\"container\">\n        <div style=\"text-align: center; padding: 40px 20px;\">\n            <h2>\u00bfPrefieres una respuesta r\u00e1pida?<\/h2>\n            <p style=\"margin: 15px 0;\">Escr\u00edbenos directamente por WhatsApp y te atenderemos al instante.<\/p>\n            <a href=\"https:\/\/wa.me\/56936178269?text=Hola%2C%20quisiera%20informaci\u00f3n%20sobre%20los%20cursos\" class=\"btn-volver\" style=\"background: #25D366;\">\ud83d\udcf1 Ir a WhatsApp<\/a>\n            <a href=\"\/1\/\" class=\"btn-volver\" style=\"background: #3b82f6; margin-left: 10px;\">\u2190 Volver al inicio<\/a>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n    \/\/ N\u00famero de WhatsApp para recibir los mensajes del formulario\n    const numeroWhatsApp = '56936178269';\n    \n    document.getElementById('contactForm').addEventListener('submit', function(e) {\n        e.preventDefault();\n        \n        \/\/ Obtener valores\n        const nombre = document.getElementById('nombre').value.trim();\n        const email = document.getElementById('email').value.trim();\n        const telefono = document.getElementById('telefono').value.trim();\n        const mensaje = document.getElementById('mensaje').value.trim();\n        const alertDiv = document.getElementById('formAlert');\n        \n        \/\/ Validaciones\n        if (!nombre || !email || !telefono || !mensaje) {\n            alertDiv.className = 'alert-message alert-error';\n            alertDiv.style.display = 'block';\n            alertDiv.innerHTML = '\u274c Por favor, completa todos los campos obligatorios.';\n            setTimeout(() => {\n                alertDiv.style.display = 'none';\n            }, 4000);\n            return;\n        }\n        \n        if (!email.includes('@') || !email.includes('.')) {\n            alertDiv.className = 'alert-message alert-error';\n            alertDiv.style.display = 'block';\n            alertDiv.innerHTML = '\u274c Ingresa un correo electr\u00f3nico v\u00e1lido.';\n            setTimeout(() => {\n                alertDiv.style.display = 'none';\n            }, 4000);\n            return;\n        }\n        \n        \/\/ Construir mensaje para WhatsApp\n        const textoMensaje = `*NUEVO CONTACTO DESDE LA WEB*%0A%0A` +\n            `*Nombre:* ${encodeURIComponent(nombre)}%0A` +\n            `*Email:* ${encodeURIComponent(email)}%0A` +\n            `*Tel\u00e9fono:* ${encodeURIComponent(telefono)}%0A` +\n            `*Mensaje:* ${encodeURIComponent(mensaje)}%0A%0A` +\n            `_Formulario enviado desde capresem.cl\/contacto_`;\n        \n        const urlWhatsApp = `https:\/\/wa.me\/${numeroWhatsApp}?text=${textoMensaje}`;\n        \n        \/\/ Mostrar mensaje de \u00e9xito\n        alertDiv.className = 'alert-message alert-success';\n        alertDiv.style.display = 'block';\n        alertDiv.innerHTML = '\u2705 \u00a1Mensaje enviado! Ser\u00e1s redirigido a WhatsApp para completar el env\u00edo.<br><br>\ud83d\udcf1 Si no eres redirigido autom\u00e1ticamente, <a href=\"' + urlWhatsApp + '\" target=\"_blank\" style=\"color: #166534; font-weight: bold;\">haz clic aqu\u00ed<\/a>.';\n        \n        \/\/ Limpiar formulario\n        this.reset();\n        \n        \/\/ Redirigir a WhatsApp despu\u00e9s de 1.5 segundos\n        setTimeout(() => {\n            window.open(urlWhatsApp, '_blank');\n        }, 1500);\n        \n        \/\/ Ocultar alerta despu\u00e9s de 10 segundos\n        setTimeout(() => {\n            alertDiv.style.display = 'none';\n        }, 10000);\n    });\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contacto Estamos aqu\u00ed para resolver tus dudas y ayudarte con tu proceso de capacitaci\u00f3n. \ud83d\udcf1 Datos de contacto \ud83d\udcde +56 9 3617 8269 \ud83d\udcac WhatsApp: +56 9 3617 8269 \u2709\ufe0f consultas@capresem.cl \ud83d\udccd Horario de atenci\u00f3n \ud83d\udd50 Lunes a Viernes: 09:00 &#8211; 18:00 hrs \ud83d\udcc5 S\u00e1bados: 09:00 &#8211; 13:00 hrs \ud83c\udfe2 Nuestra oficina \ud83d\udccd Las Bellotas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":{"th53304":{"from_email":"$email","cont_subject":"Contact Page Form","cont_header":"$name,$email,$subject,$message"}},"_pagelayer_content":"","footnotes":""},"class_list":["post-23","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/capresem.cl\/1\/wp-json\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/capresem.cl\/1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/capresem.cl\/1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/capresem.cl\/1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/capresem.cl\/1\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":8,"href":"https:\/\/capresem.cl\/1\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/capresem.cl\/1\/wp-json\/wp\/v2\/pages\/23\/revisions\/141"}],"wp:attachment":[{"href":"https:\/\/capresem.cl\/1\/wp-json\/wp\/v2\/media?parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}