{"id":22,"date":"2026-05-21T11:07:06","date_gmt":"2026-05-21T11:07:06","guid":{"rendered":"https:\/\/abogados.onsistems.com\/?page_id=22"},"modified":"2026-05-21T11:07:06","modified_gmt":"2026-05-21T11:07:06","slug":"contacto","status":"publish","type":"page","link":"https:\/\/abogados.onsistems.com\/?page_id=22","title":{"rendered":"Contacto"},"content":{"rendered":"\n<style>\n  \/* Secci\u00f3n de contacto con fondo oscuro de vuelta *\/\n  .contacto-seccion {\n    background: #0a0a0f;\n    padding: 100px 40px;\n    font-family: 'Lato', Arial, sans-serif;\n  }\n\n  \/* Layout dos columnas: izquierda = info, derecha = formulario *\/\n  .contacto-grid {\n    display: grid;\n    grid-template-columns: 1fr 1.4fr;\n    gap: 80px;\n    max-width: 1100px;\n    margin: 0 auto;\n    align-items: start;\n  }\n\n  \/* \u2500\u2500 COLUMNA IZQUIERDA: informaci\u00f3n de contacto \u2500\u2500 *\/\n  .contacto-info h2 {\n    font-family: 'Playfair Display', Georgia, serif;\n    font-size: clamp(1.8rem, 3vw, 2.8rem);\n    color: #f0ece4;\n    font-weight: 700;\n    margin: 0 0 20px;\n    line-height: 1.2;\n  }\n\n  .contacto-info p {\n    color: #8a8a9a;\n    line-height: 1.8;\n    margin-bottom: 40px;\n    font-size: 0.95rem;\n  }\n\n  \/* Cada dato de contacto (tel\u00e9fono, email, direcci\u00f3n) *\/\n  .dato-contacto {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    margin-bottom: 28px;\n    padding-bottom: 28px;\n    border-bottom: 1px solid rgba(255,255,255,0.06);\n  }\n\n  .dato-contacto:last-child {\n    border-bottom: none;\n  }\n\n  \/* El icono circular dorado *\/\n  .dato-icono {\n    width: 44px;\n    height: 44px;\n    border: 1px solid rgba(201, 168, 76, 0.4);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: #c9a84c;\n  }\n\n  .dato-icono svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  \/* El texto del dato de contacto *\/\n  .dato-texto label {\n    display: block;\n    font-size: 0.65rem;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    color: #c9a84c;\n    margin-bottom: 4px;\n    font-weight: 700;\n  }\n\n  .dato-texto span {\n    display: block;\n    color: #f0ece4;\n    font-size: 0.95rem;\n  }\n\n  \/* \u2500\u2500 COLUMNA DERECHA: el formulario \u2500\u2500 *\/\n  .contacto-formulario {\n    background: #12121a;\n    padding: 48px;\n    position: relative;\n  }\n\n  \/* L\u00ednea dorada decorativa arriba del formulario *\/\n  .contacto-formulario::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 2px;\n    background: linear-gradient(to right, #c9a84c, transparent);\n  }\n\n  \/* T\u00edtulo del formulario *\/\n  .formulario-titulo {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.5rem;\n    color: #f0ece4;\n    margin: 0 0 8px;\n  }\n\n  .formulario-subtitulo {\n    color: #8a8a9a;\n    font-size: 0.85rem;\n    margin: 0 0 36px;\n  }\n\n  \/* Grupo de campo: label + input *\/\n  .campo-grupo {\n    margin-bottom: 24px;\n  }\n\n  \/* Dos campos en la misma fila *\/\n  .campos-fila {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n  }\n\n  \/* La etiqueta de cada campo *\/\n  .campo-grupo label {\n    display: block;\n    font-size: 0.72rem;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    color: #8a8a9a;\n    margin-bottom: 8px;\n    font-weight: 700;\n  }\n\n  \/*\n    Estilo base para inputs, select y textarea.\n    Ponemos todos los selectores juntos separados por comas\n    para no repetir el mismo CSS tres veces.\n  *\/\n  .campo-grupo input,\n  .campo-grupo select,\n  .campo-grupo textarea {\n    width: 100%;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(255,255,255,0.1);\n    color: #f0ece4;\n    padding: 14px 18px;\n    font-family: 'Lato', Arial, sans-serif;\n    font-size: 0.9rem;\n    \/* outline: none quita el borde azul por defecto del navegador *\/\n    outline: none;\n    transition: border-color 0.3s ease, background 0.3s ease;\n    \/* box-sizing: border-box = el padding no aumenta el ancho total *\/\n    box-sizing: border-box;\n    -webkit-appearance: none;    \/* Quita estilos por defecto en Safari *\/\n    appearance: none;\n  }\n\n  \/* Cuando el usuario hace clic en el campo (focus) *\/\n  .campo-grupo input:focus,\n  .campo-grupo select:focus,\n  .campo-grupo textarea:focus {\n    border-color: #c9a84c;\n    background: rgba(201, 168, 76, 0.05);\n  }\n\n  \/* El select necesita una flecha personalizada *\/\n  .select-wrapper {\n    position: relative;\n  }\n\n  \/* Flecha del select dibujada con CSS *\/\n  .select-wrapper::after {\n    content: '\u203a';\n    position: absolute;\n    right: 18px;\n    top: 50%;\n    transform: translateY(-50%) rotate(90deg); \/* Apunta hacia abajo *\/\n    color: #c9a84c;\n    pointer-events: none;        \/* No bloquea los clics al select *\/\n    font-size: 1.2rem;\n  }\n\n  \/* El textarea (caja de texto grande) *\/\n  .campo-grupo textarea {\n    height: 120px;\n    resize: vertical;            \/* Solo se puede cambiar de tama\u00f1o verticalmente *\/\n  }\n\n  \/* Texto de placeholder (lo que aparece antes de escribir) *\/\n  .campo-grupo input::placeholder,\n  .campo-grupo textarea::placeholder {\n    color: rgba(138, 138, 154, 0.5);\n  }\n\n  \/* Checkbox de privacidad *\/\n  .campo-privacidad {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 28px;\n  }\n\n  .campo-privacidad input[type=\"checkbox\"] {\n    width: 18px;\n    height: 18px;\n    flex-shrink: 0;\n    accent-color: #c9a84c;       \/* Color del checkbox cuando est\u00e1 marcado *\/\n    margin-top: 2px;\n    cursor: pointer;\n  }\n\n  .campo-privacidad label {\n    font-size: 0.8rem;\n    color: #8a8a9a;\n    line-height: 1.6;\n    cursor: pointer;\n  }\n\n  .campo-privacidad a {\n    color: #c9a84c;\n    text-decoration: none;\n  }\n\n  \/* Bot\u00f3n de env\u00edo *\/\n  .btn-enviar {\n    width: 100%;\n    padding: 18px;\n    background: #c9a84c;\n    color: #0a0a0f;\n    border: 2px solid #c9a84c;\n    font-family: 'Lato', Arial, sans-serif;\n    font-size: 0.85rem;\n    font-weight: 700;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n  }\n\n  .btn-enviar:hover {\n    background: transparent;\n    color: #c9a84c;\n  }\n\n  \/* Mensaje de \u00e9xito (oculto por defecto) *\/\n  .mensaje-exito {\n    display: none;               \/* Oculto hasta que se env\u00ede el formulario *\/\n    text-align: center;\n    padding: 32px;\n    border: 1px solid rgba(201, 168, 76, 0.3);\n    background: rgba(201, 168, 76, 0.05);\n    margin-top: 20px;\n  }\n\n  .mensaje-exito.mostrar {\n    display: block;              \/* Se muestra cuando a\u00f1adimos la clase 'mostrar' *\/\n    animation: aparecerArriba 0.5s ease forwards;\n  }\n\n  .mensaje-exito p {\n    color: #c9a84c;\n    font-size: 0.9rem;\n    margin: 8px 0 0;\n  }\n\n  .mensaje-exito h4 {\n    color: #f0ece4;\n    font-family: 'Playfair Display', serif;\n    margin: 8px 0 4px;\n  }\n\n  \/* RESPONSIVE *\/\n  @media screen and (max-width: 900px) {\n    .contacto-grid {\n      grid-template-columns: 1fr;\n      gap: 50px;\n    }\n    .contacto-formulario {\n      padding: 36px 28px;\n    }\n  }\n\n  @media screen and (max-width: 560px) {\n    .contacto-seccion {\n      padding: 60px 20px;\n    }\n    .campos-fila {\n      grid-template-columns: 1fr; \/* En m\u00f3vil, los campos van uno debajo de otro *\/\n    }\n  }\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HTML \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"contacto-seccion\" id=\"contacto\">\n  <div class=\"contacto-grid\">\n\n    <!-- Columna izquierda: informaci\u00f3n -->\n    <div class=\"contacto-info\">\n      <span class=\"etiqueta-dorada\" style=\"\n        display:inline-block;\n        font-size:0.7rem;\n        letter-spacing:0.25em;\n        text-transform:uppercase;\n        color:#c9a84c;\n        font-weight:700;\n        margin-bottom:20px;\n        padding-bottom:12px;\n        border-bottom:1px solid #c9a84c;\n      \">Contacto<\/span>\n\n      <h2>Hablemos de tu caso<\/h2>\n      <p>\n        La primera consulta es gratuita y sin compromiso.\n        Cu\u00e9ntanos tu situaci\u00f3n y te daremos una valoraci\u00f3n honesta.\n        Respondemos en menos de 24 horas.\n      <\/p>\n\n      <!-- Datos de contacto -->\n      <div class=\"dato-contacto\">\n        <div class=\"dato-icono\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n            <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.18 2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.54a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"dato-texto\">\n          <label>Tel\u00e9fono<\/label>\n          <span>+34 910 000 000<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"dato-contacto\">\n        <div class=\"dato-icono\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n            <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/>\n            <polyline points=\"22,6 12,13 2,6\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"dato-texto\">\n          <label>Email<\/label>\n          <span>info@tudespacho.es<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"dato-contacto\">\n        <div class=\"dato-icono\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n            <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/>\n            <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"dato-texto\">\n          <label>Direcci\u00f3n<\/label>\n          <span>Calle Gran V\u00eda, 28, Madrid<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"dato-contacto\">\n        <div class=\"dato-icono\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n            <polyline points=\"12 6 12 12 16 14\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"dato-texto\">\n          <label>Horario<\/label>\n          <span>Lun \u2013 Vie: 9:00 \u2013 19:00<\/span>\n        <\/div>\n      <\/div>\n\n    <\/div><!-- fin .contacto-info -->\n\n    <!-- Columna derecha: el formulario -->\n    <div class=\"contacto-formulario\">\n      <h3 class=\"formulario-titulo\">Solicitar consulta<\/h3>\n      <p class=\"formulario-subtitulo\">Primera consulta gratuita \u00b7 Sin compromiso<\/p>\n\n      <!--\n        El formulario. action=\"#\" = no va a ning\u00fan lado (solo dise\u00f1o visual).\n        Para que funcione de verdad, usa WPForms o Contact Form 7 en WordPress.\n        novalidate = desactivamos la validaci\u00f3n del navegador (la hacemos con JS)\n      -->\n      <form id=\"formulario-contacto\" novalidate>\n\n        <!-- Fila con nombre y apellidos juntos -->\n        <div class=\"campos-fila\">\n          <div class=\"campo-grupo\">\n            <label for=\"nombre\">Nombre *<\/label>\n            <input type=\"text\" id=\"nombre\" name=\"nombre\" placeholder=\"Tu nombre\" required>\n          <\/div>\n          <div class=\"campo-grupo\">\n            <label for=\"apellidos\">Apellidos *<\/label>\n            <input type=\"text\" id=\"apellidos\" name=\"apellidos\" placeholder=\"Tus apellidos\" required>\n          <\/div>\n        <\/div>\n\n        <!-- Email y tel\u00e9fono juntos -->\n        <div class=\"campos-fila\">\n          <div class=\"campo-grupo\">\n            <label for=\"email\">Email *<\/label>\n            <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"tu@email.com\" required>\n          <\/div>\n          <div class=\"campo-grupo\">\n            <label for=\"telefono\">Tel\u00e9fono<\/label>\n            <input type=\"tel\" id=\"telefono\" name=\"telefono\" placeholder=\"+34 600 000 000\">\n          <\/div>\n        <\/div>\n\n        <!-- Select (men\u00fa desplegable) del \u00e1rea de derecho -->\n        <div class=\"campo-grupo\">\n          <label for=\"area\">\u00c1rea de consulta *<\/label>\n          <div class=\"select-wrapper\">\n            <select id=\"area\" name=\"area\" required>\n              <option value=\"\" disabled selected>Selecciona el \u00e1rea de derecho<\/option>\n              <option value=\"laboral\">Derecho Laboral<\/option>\n              <option value=\"administrativo\">Derecho Administrativo<\/option>\n              <option value=\"penal\">Derecho Penal<\/option>\n              <option value=\"extranjeria\">Extranjer\u00eda<\/option>\n              <option value=\"otro\">Otro \/ No s\u00e9<\/option>\n            <\/select>\n          <\/div>\n        <\/div>\n\n        <!-- Textarea para el mensaje -->\n        <div class=\"campo-grupo\">\n          <label for=\"mensaje\">Cu\u00e9ntanos tu caso *<\/label>\n          <textarea id=\"mensaje\" name=\"mensaje\" placeholder=\"Describe brevemente tu situaci\u00f3n para que podamos orientarte mejor...\" required><\/textarea>\n        <\/div>\n\n        <!-- Checkbox de privacidad (obligatorio en Espa\u00f1a por la LOPD) -->\n        <div class=\"campo-privacidad\">\n          <input type=\"checkbox\" id=\"privacidad\" name=\"privacidad\" required>\n          <label for=\"privacidad\">\n            He le\u00eddo y acepto la\n            <a href=\"\/politica-de-privacidad\">pol\u00edtica de privacidad<\/a>.\n            Los datos facilitados ser\u00e1n tratados conforme al RGPD.\n          <\/label>\n        <\/div>\n\n        <!-- Bot\u00f3n de env\u00edo -->\n        <button type=\"submit\" class=\"btn-enviar\">\n          Solicitar consulta gratuita\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n          <\/svg>\n        <\/button>\n\n      <\/form><!-- fin form -->\n\n      <!-- Mensaje que aparece cuando el formulario se \"env\u00eda\" correctamente -->\n      <div class=\"mensaje-exito\" id=\"mensajeExito\">\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#c9a84c\" stroke-width=\"1.5\">\n          <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/>\n          <polyline points=\"22 4 12 14.01 9 11.01\"\/>\n        <\/svg>\n        <h4>\u00a1Solicitud recibida!<\/h4>\n        <p>Nos pondremos en contacto contigo en menos de 24 horas.<\/p>\n      <\/div>\n\n    <\/div><!-- fin .contacto-formulario -->\n\n  <\/div><!-- fin .contacto-grid -->\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 JAVASCRIPT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n  \/*\n    Gesti\u00f3n del formulario de contacto.\n    \n    Hacemos dos cosas:\n    1. Validar que todos los campos requeridos est\u00e9n rellenos antes de \"enviar\"\n    2. Mostrar un mensaje de \u00e9xito (simulado, ya que el env\u00edo real\n       lo gestionar\u00e1 WordPress con un plugin)\n  *\/\n\n  \/\/ Buscamos el formulario por su id\n  const formulario = document.getElementById('formulario-contacto');\n  const mensajeExito = document.getElementById('mensajeExito');\n\n  \/\/ A\u00f1adimos un \"listener\" (escuchador) al evento 'submit' del formulario\n  formulario.addEventListener('submit', function(evento) {\n    \/*\n      evento.preventDefault() = evita que la p\u00e1gina se recargue\n      al hacer clic en Enviar. Por defecto los formularios recargan la p\u00e1gina.\n    *\/\n    evento.preventDefault();\n\n    \/\/ Comprobamos que todos los campos requeridos tienen valor\n    const campos = formulario.querySelectorAll('[required]');\n    let formularioValido = true;\n\n    campos.forEach(campo => {\n      \/\/ Quitamos el marcado de error anterior\n      campo.style.borderColor = '';\n\n      \/\/ Comprobamos si el campo est\u00e1 vac\u00edo o si es un checkbox sin marcar\n      if (!campo.value || (campo.type === 'checkbox' && !campo.checked)) {\n        \/\/ Si hay un error, pintamos el borde en rojo\n        campo.style.borderColor = '#e05555';\n        formularioValido = false;\n      }\n    });\n\n    if (!formularioValido) {\n      \/\/ Si hay errores, hacemos scroll hasta el primer campo con error\n      const primerError = formulario.querySelector('[style*=\"e05555\"]');\n      if (primerError) primerError.focus();\n      return; \/\/ Detenemos la funci\u00f3n aqu\u00ed\n    }\n\n    \/*\n      Si todo est\u00e1 correcto:\n      1. Ocultamos el formulario\n      2. Mostramos el mensaje de \u00e9xito\n      \n      NOTA: Para el env\u00edo real del email, necesitas WPForms o similar.\n      Este c\u00f3digo solo simula la acci\u00f3n visual.\n    *\/\n    formulario.style.opacity = '0';\n    formulario.style.transition = 'opacity 0.4s ease';\n\n    \/\/ setTimeout espera 400ms (mientras se desvanece) antes de mostrar el mensaje\n    setTimeout(() => {\n      formulario.style.display = 'none';\n      mensajeExito.classList.add('mostrar');\n    }, 400);\n  });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Contacto Hablemos de tu caso La primera consulta es gratuita y sin compromiso. Cu\u00e9ntanos tu situaci\u00f3n y te daremos una valoraci\u00f3n honesta. Respondemos en menos de 24 horas. Tel\u00e9fono +34 910 000 000 Email info@tudespacho.es Direcci\u00f3n Calle Gran V\u00eda, 28, Madrid Horario Lun \u2013 Vie: 9:00 \u2013 19:00 Solicitar consulta Primera consulta gratuita \u00b7 Sin&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"boxed","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abogados.onsistems.com\/index.php?rest_route=\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abogados.onsistems.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abogados.onsistems.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abogados.onsistems.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abogados.onsistems.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22"}],"version-history":[{"count":1,"href":"https:\/\/abogados.onsistems.com\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/abogados.onsistems.com\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/abogados.onsistems.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}