{"id":278,"date":"2026-07-13T07:38:46","date_gmt":"2026-07-13T05:38:46","guid":{"rendered":"https:\/\/hermanolejano.org\/web\/?page_id=278"},"modified":"2026-07-13T07:44:06","modified_gmt":"2026-07-13T05:44:06","slug":"contacto-2","status":"publish","type":"page","link":"https:\/\/hermanolejano.org\/web\/index.php\/contacto-2\/","title":{"rendered":"Contacto"},"content":{"rendered":"<p><\/p>\t\t\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n  .hl-contacto, .hl-contacto * { box-sizing: border-box; }\n  .hl-contacto {\n    --hl-navy: #1E3654;\n    --hl-navy-deep: #142338;\n    --hl-gold: #D99A34;\n    --hl-gold-deep: #B87C1F;\n    --hl-sand: #FAF6EF;\n    --hl-card: #FFFFFF;\n    --hl-ink: #2A2A28;\n    --hl-slate: #647186;\n    --hl-line: #E7DFCF;\n    background: var(--hl-sand);\n    color: var(--hl-ink);\n    font-family: 'Work Sans', sans-serif;\n    line-height: 1.55;\n    padding: 64px 20px 80px;\n    position: relative;\n    overflow: hidden;\n  }\n  .hl-contacto h1, .hl-contacto h2, .hl-contacto h3 {\n    font-family: 'Fraunces', serif;\n    color: var(--hl-navy-deep);\n    margin: 0 0 14px;\n    line-height: 1.15;\n  }\n  .hl-contacto a { text-decoration: none; color: inherit; }\n  \/* ---------- Camino punteado decorativo (elemento firma) ---------- *\/\n  .hl-ruta {\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    pointer-events: none;\n    z-index: 0;\n  }\n  .hl-ruta svg { width: 100%; height: 100%; }\n  .hl-wrap {\n    max-width: 1120px;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n  }\n  \/* ---------- Encabezado ---------- *\/\n  .hl-hero {\n    text-align: center;\n    max-width: 760px;\n    margin: 0 auto 56px;\n  }\n  .hl-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: .14em;\n    text-transform: uppercase;\n    color: var(--hl-gold-deep);\n    margin-bottom: 14px;\n  }\n  .hl-eyebrow::before, .hl-eyebrow::after {\n    content: \"\";\n    width: 22px; height: 1px;\n    background: var(--hl-gold-deep);\n  }\n  .hl-hero h1 { font-size: clamp(32px, 4.4vw, 46px); font-weight: 600; }\n  .hl-hero p {\n    font-size: 17px;\n    color: var(--hl-slate);\n    margin: 0;\n  }\n  \/* ---------- Layout principal ---------- *\/\n  .hl-grid {\n    display: grid;\n    grid-template-columns: 1fr 1.15fr;\n    gap: 40px;\n    align-items: start;\n  }\n  @media (max-width: 860px) {\n    .hl-grid { grid-template-columns: 1fr; }\n  }\n  \/* ---------- Columna izquierda: datos + mapa ---------- *\/\n  .hl-info-card {\n    background: var(--hl-navy);\n    background-image: radial-gradient(circle at 85% 0%, rgba(217,154,52,.18), transparent 55%);\n    color: #F3EEE2;\n    border-radius: 18px;\n    padding: 38px 32px;\n    margin-bottom: 24px;\n  }\n  .hl-info-card h2 { color: #fff; font-size: 22px; font-weight: 600; }\n  .hl-info-card > p {\n    color: #C6D0DE;\n    font-size: 15px;\n    margin-bottom: 26px;\n  }\n  .hl-item-list { list-style: none; margin: 0; padding: 0; }\n  .hl-item-list li {\n    display: flex;\n    gap: 14px;\n    align-items: flex-start;\n    padding: 14px 0;\n    border-top: 1px solid rgba(255,255,255,.12);\n  }\n  .hl-item-list li:first-child { border-top: none; }\n  .hl-ico {\n    flex: none;\n    width: 38px; height: 38px;\n    border-radius: 10px;\n    background: rgba(217,154,52,.16);\n    border: 1px solid rgba(217,154,52,.35);\n    display: flex; align-items: center; justify-content: center;\n  }\n  .hl-ico svg { width: 18px; height: 18px; stroke: var(--hl-gold); }\n  .hl-item-text .hl-item-label {\n    display: block;\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: .08em;\n    color: #9AABC0;\n    margin-bottom: 3px;\n  }\n  .hl-item-text a, .hl-item-text span {\n    font-size: 15.5px;\n    font-weight: 500;\n    color: #F3EEE2;\n  }\n  .hl-item-text a:hover { color: var(--hl-gold); }\n  .hl-map-card {\n    background: var(--hl-card);\n    border: 1px solid var(--hl-line);\n    border-radius: 18px;\n    overflow: hidden;\n  }\n  .hl-map-card iframe {\n    width: 100%;\n    height: 300px;\n    border: 0;\n    display: block;\n    filter: grayscale(12%) contrast(1.02);\n  }\n  .hl-map-caption {\n    padding: 16px 20px;\n    font-size: 13.5px;\n    color: var(--hl-slate);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .hl-map-caption svg { width: 15px; height: 15px; stroke: var(--hl-gold-deep); flex: none; }\n  \/* ---------- Columna derecha: formulario ---------- *\/\n  .hl-form-card {\n    background: var(--hl-card);\n    border: 1px solid var(--hl-line);\n    border-radius: 18px;\n    padding: 40px 38px;\n    box-shadow: 0 30px 60px -34px rgba(20,35,56,.28);\n  }\n  .hl-form-card h2 { font-size: 24px; font-weight: 600; }\n  .hl-form-card > p.hl-sub {\n    color: var(--hl-slate);\n    font-size: 15px;\n    margin-bottom: 28px;\n  }\n  .hl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }\n  @media (max-width: 520px) { .hl-row { grid-template-columns: 1fr; } }\n  .hl-field { margin-bottom: 18px; }\n  .hl-field label {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--hl-navy-deep);\n    margin-bottom: 7px;\n  }\n  .hl-field input,\n  .hl-field select,\n  .hl-field textarea {\n    width: 100%;\n    font-family: 'Work Sans', sans-serif;\n    font-size: 15px;\n    color: var(--hl-ink);\n    background: #FCFAF5;\n    border: 1.5px solid var(--hl-line);\n    border-radius: 10px;\n    padding: 12px 14px;\n    transition: border-color .15s ease, box-shadow .15s ease;\n  }\n  .hl-field textarea { min-height: 130px; resize: vertical; }\n  .hl-field input:focus,\n  .hl-field select:focus,\n  .hl-field textarea:focus {\n    outline: none;\n    border-color: var(--hl-gold);\n    box-shadow: 0 0 0 3px rgba(217,154,52,.18);\n  }\n  .hl-submit {\n    width: 100%;\n    background: var(--hl-gold);\n    color: var(--hl-navy-deep);\n    font-family: 'Work Sans', sans-serif;\n    font-weight: 700;\n    font-size: 15.5px;\n    border: none;\n    border-radius: 10px;\n    padding: 15px 20px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 9px;\n    transition: background .15s ease, transform .1s ease;\n  }\n  .hl-submit:hover { background: var(--hl-gold-deep); }\n  .hl-submit:active { transform: translateY(1px); }\n  .hl-submit svg { width: 17px; height: 17px; stroke: var(--hl-navy-deep); }\n  .hl-privacidad {\n    font-size: 12.5px;\n    color: var(--hl-slate);\n    margin-top: 14px;\n    text-align: center;\n  }\n  \/* Honeypot anti-spam (oculto para personas, visible para bots) *\/\n  .hl-hp { position: absolute; left: -9999px; opacity: 0; }\n<\/style>\n<section>\n  <!-- camino punteado de fondo -->\n    <svg viewBox=\"0 0 1200 900\" preserveAspectRatio=\"none\">\n      <path d=\"M -50 120 C 250 40, 350 260, 650 190 S 1050 60, 1300 160\"\n            fill=\"none\" stroke=\"#D99A34\" stroke-width=\"2\" stroke-dasharray=\"1 14\"\n            stroke-linecap=\"round\" opacity=\"0.35\"\/>\n      <path d=\"M -50 780 C 250 860, 400 640, 700 720 S 1000 900, 1300 760\"\n            fill=\"none\" stroke=\"#1E3654\" stroke-width=\"2\" stroke-dasharray=\"1 14\"\n            stroke-linecap=\"round\" opacity=\"0.18\"\/>\n    <\/svg>\n      Contacto\n      <h1>Hablemos<\/h1>\n      <p>Fundaci\u00f3n Hermano Lejano busca continuar desarrollando programas que aporten bienestar emocional y fortalezcan a las comunidades. Escr\u00edbenos y con gusto te responderemos.<\/p>\n      <!-- ===================== COLUMNA IZQUIERDA ===================== -->\n          <h2>Fundaci\u00f3n Hermano Lejano<\/h2>\n          <p>Direcci\u00f3n y datos de contacto<\/p>\n          <ul>\n            <li>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21Z\"\/><circle cx=\"12\" cy=\"9.5\" r=\"2.5\"\/><\/svg>\n                Direcci\u00f3n\n                3476 Briarvale St.<br>Corona, CA 92879\n            <\/li>\n            <li>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 12a10 10 0 1 1-5.2-8.8\"\/><path d=\"M22 4 12 14.5 9 11.5\"\/><\/svg>\n                Correo\n                <a href=\"mailto:fundacionhermanolejano@gmail.com\">fundacionhermanolejano@gmail.com<\/a>\n            <\/li>\n            <li>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .6 2.9a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.4c.9.3 1.9.5 2.9.6a2 2 0 0 1 1.7 2Z\"\/><\/svg>\n                Tel\u00e9fono\n                <a href=\"tel:+18188240326\">(818) 824-0326<\/a>\n            <\/li>\n          <\/ul>\n          <iframe\n            src=\"https:\/\/www.google.com\/maps?q=3476+Briarvale+St,+Corona,+CA+92879&output=embed\"\n            loading=\"lazy\"\n            referrerpolicy=\"no-referrer-when-downgrade\"\n            title=\"Ubicaci\u00f3n de Fundaci\u00f3n Hermano Lejano\">\n          <\/iframe>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21Z\"\/><circle cx=\"12\" cy=\"9.5\" r=\"2.5\"\/><\/svg>\n            3476 Briarvale St., Corona, CA 92879\n      <!-- ===================== COLUMNA DERECHA: FORMULARIO ===================== -->\n        <h2>Env\u00edanos un mensaje<\/h2>\n        <p>Cu\u00e9ntanos en qu\u00e9 podemos ayudarte y te contactaremos lo antes posible.<\/p>\n        <form action=\"https:\/\/formsubmit.co\/fundacionhermanolejano@gmail.com\" method=\"POST\">\n          <!-- Configuraci\u00f3n de FormSubmit: ver notas de instalaci\u00f3n -->\n          <input type=\"hidden\" name=\"_subject\" value=\"Nuevo mensaje desde el sitio web \u2014 Hermano Lejano\">\n          <input type=\"hidden\" name=\"_template\" value=\"table\">\n          <input type=\"hidden\" name=\"_captcha\" value=\"false\">\n          <input type=\"text\" name=\"_honey\" tabindex=\"-1\" autocomplete=\"off\">\n              <label for=\"hl-nombre\">Nombre completo<\/label>\n              <input type=\"text\" id=\"hl-nombre\" name=\"Nombre\" required>\n              <label for=\"hl-telefono\">Tel\u00e9fono<\/label>\n              <input type=\"tel\" id=\"hl-telefono\" name=\"Tel\u00e9fono\">\n            <label for=\"hl-correo\">Correo electr\u00f3nico<\/label>\n            <input type=\"email\" id=\"hl-correo\" name=\"Correo\" required>\n            <label for=\"hl-motivo\">Motivo de contacto<\/label>\n            <select id=\"hl-motivo\" name=\"Motivo\">\n              <option>Informaci\u00f3n general<\/option>\n              <option>\u00bfC\u00f3mo participar?<\/option>\n              <option>Donaciones<\/option>\n              <option>Horarios<\/option>\n              <option>Otro<\/option>\n            <\/select>\n            <label for=\"hl-mensaje\">Mensaje<\/label>\n            <textarea id=\"hl-mensaje\" name=\"Mensaje\" required><\/textarea>\n          <button type=\"submit\">\n            Enviar mensaje\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 2 11 13\"\/><path d=\"M22 2 15 22l-4-9-9-4 20-7Z\"\/><\/svg>\n          <\/button>\n          <p>Tu informaci\u00f3n solo se usar\u00e1 para responder a tu mensaje. No compartimos tus datos con terceros.<\/p>\n        <\/form>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Contacto Hablemos Fundaci\u00f3n Hermano Lejano busca continuar desarrollando programas que aporten bienestar emocional y fortalezcan a las comunidades. Escr\u00edbenos y con gusto te responderemos. Fundaci\u00f3n Hermano Lejano Direcci\u00f3n y datos de contacto Direcci\u00f3n 3476 Briarvale St.Corona, CA 92879 Correo fundacionhermanolejano@gmail.com Tel\u00e9fono (818) 824-0326 3476 Briarvale St., Corona, CA 92879 Env\u00edanos un mensaje Cu\u00e9ntanos en qu\u00e9 [&hellip;]<\/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-278","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hermanolejano.org\/web\/index.php\/wp-json\/wp\/v2\/pages\/278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hermanolejano.org\/web\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hermanolejano.org\/web\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hermanolejano.org\/web\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hermanolejano.org\/web\/index.php\/wp-json\/wp\/v2\/comments?post=278"}],"version-history":[{"count":7,"href":"https:\/\/hermanolejano.org\/web\/index.php\/wp-json\/wp\/v2\/pages\/278\/revisions"}],"predecessor-version":[{"id":287,"href":"https:\/\/hermanolejano.org\/web\/index.php\/wp-json\/wp\/v2\/pages\/278\/revisions\/287"}],"wp:attachment":[{"href":"https:\/\/hermanolejano.org\/web\/index.php\/wp-json\/wp\/v2\/media?parent=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}