{"id":58,"date":"2015-12-02T23:52:41","date_gmt":"2015-12-02T23:52:41","guid":{"rendered":"http:\/\/seij.gob.gt\/udisep\/?page_id=58"},"modified":"2026-08-06T17:11:55","modified_gmt":"2026-08-06T23:11:55","slug":"solicitudes-en-linea-2","status":"publish","type":"page","link":"https:\/\/seij.gob.gt\/udisep\/solicitudes-en-linea-2\/","title":{"rendered":"Solicitud de Informaci\u00f3n P\u00fablica"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"58\" class=\"elementor elementor-58\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3592b0ec elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3592b0ec\" data-element_type=\"section\" data-e-type=\"section\">\n\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-da10072\" data-id=\"da10072\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-84a47ea elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"84a47ea\" data-element_type=\"section\" data-e-type=\"section\">\n\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-ff811e0\" data-id=\"ff811e0\" data-element_type=\"column\" data-e-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-6e102ad elementor-widget elementor-widget-spacer\" data-id=\"6e102ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c1ac797 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c1ac797\" data-element_type=\"section\" data-e-type=\"section\">\n\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-b7d0eb3\" data-id=\"b7d0eb3\" data-element_type=\"column\" data-e-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-c072b8b elementor-widget elementor-widget-text-editor\" data-id=\"c072b8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<section class=\"cf-wrapper\" aria-labelledby=\"cf-titulo\">\n  <div class=\"cf-card\">\n\n    <header class=\"cf-header\">\n      <h2 id=\"cf-titulo\">Solicitud de informaci\u00f3n<\/h2>\n      <p class=\"cf-subtitulo\">Completa el formulario y te contactaremos a la brevedad.<\/p>\n    <\/header>\n\n    <!-- FORMULARIO -->\n    <form id=\"cf-form\" class=\"cf-form\" novalidate>\n\n      <!-- Nombre completo -->\n      <div class=\"cf-field\">\n        <label for=\"cf-nombre\">Nombre completo <span class=\"cf-req\">*<\/span><\/label>\n        <input\n          type=\"text\"\n          id=\"cf-nombre\"\n          name=\"nombre\"\n          placeholder=\"Ej. Mar\u00eda P\u00e9rez\"\n          autocomplete=\"name\"\n          required\n        >\n        <span class=\"cf-error\" id=\"err-nombre\" role=\"alert\"><\/span>\n      <\/div>\n\n      <!-- Correo electr\u00f3nico -->\n      <div class=\"cf-field\">\n        <label for=\"cf-email\">Correo electr\u00f3nico <span class=\"cf-req\">*<\/span><\/label>\n        <input\n          type=\"email\"\n          id=\"cf-email\"\n          name=\"email\"\n          placeholder=\"ejemplo@correo.com\"\n          autocomplete=\"email\"\n          required\n        >\n        <span class=\"cf-error\" id=\"err-email\" role=\"alert\"><\/span>\n      <\/div>\n\n      <!-- Tel\u00e9fono (opcional) -->\n      <div class=\"cf-field\">\n        <label for=\"cf-telefono\">Tel\u00e9fono <span class=\"cf-opcional\">(opcional)<\/span><\/label>\n        <input\n          type=\"tel\"\n          id=\"cf-telefono\"\n          name=\"telefono\"\n          placeholder=\"+502 5555 5555\"\n          autocomplete=\"tel\"\n          pattern=\"^\\+?[0-9\\s\\-\\(\\)]{7,20}$\"\n        >\n        <span class=\"cf-error\" id=\"err-telefono\" role=\"alert\"><\/span>\n        <span class=\"cf-hint\">Formato internacional recomendado, ej: +502 5555 5555<\/span>\n      <\/div>\n\n      <!-- Mensaje \/ Detalles -->\n      <div class=\"cf-field\">\n        <label for=\"cf-mensaje\">Mensaje \/ Detalles <span class=\"cf-req\">*<\/span><\/label>\n        <textarea\n          id=\"cf-mensaje\"\n          name=\"mensaje\"\n          rows=\"5\"\n          maxlength=\"500\"\n          placeholder=\"Cu\u00e9ntanos qu\u00e9 informaci\u00f3n necesitas...\"\n          required\n        ><\/textarea>\n        <div class=\"cf-counter-row\">\n          <span class=\"cf-error\" id=\"err-mensaje\" role=\"alert\"><\/span>\n          <span class=\"cf-counter\" id=\"cf-contador\">0 \/ 500<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- Captcha (checkbox de verificaci\u00f3n) -->\n      <div class=\"cf-field cf-captcha\">\n        <label class=\"cf-checkbox-label\">\n          <input type=\"checkbox\" id=\"cf-captcha\" name=\"captcha\" required>\n          <span class=\"cf-checkbox-custom\" aria-hidden=\"true\"><\/span>\n          <span>No soy un robot, confirmo que la informaci\u00f3n es correcta <span class=\"cf-req\">*<\/span><\/span>\n        <\/label>\n        <span class=\"cf-error\" id=\"err-captcha\" role=\"alert\"><\/span>\n      <\/div>\n\n      <!-- Mensaje de error general (fallos de conexi\u00f3n\/env\u00edo al servidor) -->\n      <div class=\"cf-error-general\" id=\"cf-error-general\" role=\"alert\" hidden><\/div>\n\n      <!-- Bot\u00f3n de env\u00edo -->\n      <button type=\"submit\" class=\"cf-btn\" id=\"cf-btn-enviar\">\n        <span id=\"cf-btn-texto\">Enviar solicitud<\/span>\n      <\/button>\n\n    <\/form>\n\n    <!-- MENSAJE DE \u00c9XITO (oculto por defecto) -->\n    <div class=\"cf-success\" id=\"cf-success\" hidden>\n      <svg class=\"cf-success-icon\" viewBox=\"0 0 52 52\" aria-hidden=\"true\">\n        <circle class=\"cf-success-circle\" cx=\"26\" cy=\"26\" r=\"24\" fill=\"none\"\/>\n        <path class=\"cf-success-check\" fill=\"none\" d=\"M14 27l7 7 16-16\"\/>\n      <\/svg>\n      <h3>\u00a1Gracias!<\/h3>\n      <p>Nos pondremos en contacto contigo pronto.<\/p>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  \/* ============================================================\n     VARIABLES DE COLOR \/ ESTILO\n     Cambia estos valores para ajustar la paleta f\u00e1cilmente.\n  ============================================================ *\/\n  .cf-wrapper {\n    --cf-color-principal: #105784;   \/* Color principal (texto, bordes, bot\u00f3n) *\/\n    --cf-color-principal-hover: #0d4468; \/* Color al pasar el cursor sobre el bot\u00f3n *\/\n    --cf-color-texto: #2b2b2b;       \/* Color de texto general *\/\n    --cf-color-fondo: #f7f9fb;       \/* Fondo de la secci\u00f3n *\/\n    --cf-color-tarjeta: #ffffff;     \/* Fondo de la tarjeta del formulario *\/\n    --cf-color-borde: #dbe2e8;       \/* Bordes de inputs *\/\n    --cf-color-error: #d13a3a;       \/* Color de mensajes de error *\/\n    --cf-radius: 12px;\n    --cf-shadow: 0 8px 24px rgba(16, 87, 132, 0.08);\n\n    box-sizing: border-box;\n    width: 100%;\n    background: var(--cf-color-fondo);\n    padding: clamp(24px, 5vw, 56px) 16px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    display: flex;\n    justify-content: center;\n  }\n\n  .cf-wrapper *, .cf-wrapper *::before, .cf-wrapper *::after {\n    box-sizing: border-box;\n  }\n\n  .cf-card {\n    background: var(--cf-color-tarjeta);\n    width: 100%;\n    max-width: 560px;\n    padding: clamp(24px, 4vw, 40px);\n    border-radius: var(--cf-radius);\n    box-shadow: var(--cf-shadow);\n    border: 1px solid var(--cf-color-borde);\n  }\n\n  .cf-header {\n    text-align: center;\n    margin-bottom: 28px;\n  }\n\n  .cf-header h2 {\n    color: var(--cf-color-principal);\n    font-size: clamp(1.4rem, 2.2vw, 1.75rem);\n    margin: 0 0 8px;\n    font-weight: 700;\n  }\n\n  .cf-subtitulo {\n    color: #667685;\n    font-size: 0.95rem;\n    margin: 0;\n  }\n\n  \/* ---------- Campos del formulario ---------- *\/\n  .cf-field {\n    margin-bottom: 20px;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .cf-field label {\n    color: var(--cf-color-texto);\n    font-weight: 600;\n    font-size: 0.92rem;\n    margin-bottom: 6px;\n  }\n\n  .cf-req {\n    color: var(--cf-color-error);\n  }\n\n  .cf-opcional {\n    color: #8a97a3;\n    font-weight: 400;\n    font-size: 0.85rem;\n  }\n\n  .cf-field input[type=\"text\"],\n  .cf-field input[type=\"email\"],\n  .cf-field input[type=\"tel\"],\n  .cf-field textarea {\n    width: 100%;\n    padding: 12px 14px;\n    border: 1.5px solid var(--cf-color-borde);\n    border-radius: 8px;\n    font-size: 0.95rem;\n    color: var(--cf-color-texto);\n    background: #fdfdfd;\n    transition: border-color 0.2s ease, box-shadow 0.2s ease;\n    font-family: inherit;\n  }\n\n  .cf-field textarea {\n    resize: vertical;\n    min-height: 110px;\n  }\n\n  \/* Estado de foco (accesibilidad) *\/\n  .cf-field input:focus,\n  .cf-field textarea:focus {\n    outline: none;\n    border-color: var(--cf-color-principal);\n    box-shadow: 0 0 0 3px rgba(16, 87, 132, 0.15);\n  }\n\n  \/* Estado de error *\/\n  .cf-field.cf-invalid input,\n  .cf-field.cf-invalid textarea {\n    border-color: var(--cf-color-error);\n  }\n\n  .cf-field.cf-invalid input:focus,\n  .cf-field.cf-invalid textarea:focus {\n    box-shadow: 0 0 0 3px rgba(209, 58, 58, 0.15);\n  }\n\n  .cf-error {\n    color: var(--cf-color-error);\n    font-size: 0.82rem;\n    min-height: 18px;\n    margin-top: 4px;\n    display: block;\n  }\n\n  .cf-hint {\n    color: #8a97a3;\n    font-size: 0.78rem;\n    margin-top: 4px;\n  }\n\n  .cf-counter-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  .cf-counter {\n    color: #8a97a3;\n    font-size: 0.78rem;\n    white-space: nowrap;\n    margin-left: 12px;\n  }\n\n  \/* ---------- Captcha (checkbox) ---------- *\/\n  .cf-captcha {\n    background: #f5f8fa;\n    border: 1px solid var(--cf-color-borde);\n    border-radius: 8px;\n    padding: 14px;\n  }\n\n  .cf-checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n    font-weight: 400 !important;\n    font-size: 0.9rem;\n    color: var(--cf-color-texto);\n  }\n\n  .cf-checkbox-label input[type=\"checkbox\"] {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n\n  .cf-checkbox-custom {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    border: 2px solid var(--cf-color-borde);\n    border-radius: 5px;\n    background: #fff;\n    margin-top: 1px;\n    position: relative;\n    transition: all 0.2s ease;\n  }\n\n  .cf-checkbox-label input[type=\"checkbox\"]:checked + .cf-checkbox-custom {\n    background: var(--cf-color-principal);\n    border-color: var(--cf-color-principal);\n  }\n\n  .cf-checkbox-label input[type=\"checkbox\"]:checked + .cf-checkbox-custom::after {\n    content: \"\";\n    position: absolute;\n    left: 6px;\n    top: 2px;\n    width: 5px;\n    height: 10px;\n    border: solid white;\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  .cf-checkbox-label input[type=\"checkbox\"]:focus-visible + .cf-checkbox-custom {\n    box-shadow: 0 0 0 3px rgba(16, 87, 132, 0.25);\n  }\n\n  \/* ---------- Banner de error general (fallo de env\u00edo al servidor) ---------- *\/\n  .cf-error-general {\n    background: #fdecec;\n    border: 1px solid var(--cf-color-error);\n    color: var(--cf-color-error);\n    border-radius: 8px;\n    padding: 10px 14px;\n    font-size: 0.85rem;\n    margin-bottom: 16px;\n  }\n\n  \/* ---------- Bot\u00f3n de env\u00edo ---------- *\/\n  .cf-btn:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  .cf-btn {\n    width: 100%;\n    padding: 14px 20px;\n    background: var(--cf-color-principal);\n    color: #ffffff;\n    border: none;\n    border-radius: 8px;\n    font-size: 1rem;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background-color 0.2s ease, transform 0.1s ease;\n    margin-top: 8px;\n  }\n\n  .cf-btn:hover {\n    background: var(--cf-color-principal-hover);\n  }\n\n  .cf-btn:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(16, 87, 132, 0.35);\n  }\n\n  .cf-btn:active {\n    transform: scale(0.99);\n  }\n\n  \/* ---------- Mensaje de \u00e9xito ---------- *\/\n  .cf-success {\n    text-align: center;\n    padding: 20px 10px;\n    animation: cfFadeIn 0.5s ease forwards;\n  }\n\n  .cf-success h3 {\n    color: var(--cf-color-principal);\n    font-size: 1.4rem;\n    margin: 12px 0 6px;\n  }\n\n  .cf-success p {\n    color: #667685;\n    margin: 0;\n  }\n\n  .cf-success-icon {\n    width: 64px;\n    height: 64px;\n    margin: 0 auto;\n    display: block;\n  }\n\n  .cf-success-circle {\n    stroke: var(--cf-color-principal);\n    stroke-width: 3;\n    stroke-dasharray: 166;\n    stroke-dashoffset: 166;\n    animation: cfCircle 0.6s ease forwards;\n  }\n\n  .cf-success-check {\n    stroke: var(--cf-color-principal);\n    stroke-width: 4;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 48;\n    stroke-dashoffset: 48;\n    animation: cfCheck 0.4s ease 0.5s forwards;\n  }\n\n  @keyframes cfFadeIn {\n    from { opacity: 0; transform: translateY(8px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  @keyframes cfCircle {\n    to { stroke-dashoffset: 0; }\n  }\n\n  @keyframes cfCheck {\n    to { stroke-dashoffset: 0; }\n  }\n\n  \/* ---------- Responsivo ---------- *\/\n  @media (max-width: 480px) {\n    .cf-card {\n      padding: 20px;\n    }\n    .cf-header h2 {\n      font-size: 1.25rem;\n    }\n  }\n\n  \/* Respeta la preferencia de \"reducir movimiento\" del usuario *\/\n  @media (prefers-reduced-motion: reduce) {\n    .cf-success,\n    .cf-success-circle,\n    .cf-success-check {\n      animation: none !important;\n    }\n  }\n<\/style>\n\n<script>\n(function () {\n  \"use strict\";\n\n  const form = document.getElementById(\"cf-form\");\n  const successBox = document.getElementById(\"cf-success\");\n\n  const campoNombre = document.getElementById(\"cf-nombre\");\n  const campoEmail = document.getElementById(\"cf-email\");\n  const campoTelefono = document.getElementById(\"cf-telefono\");\n  const campoMensaje = document.getElementById(\"cf-mensaje\");\n  const campoCaptcha = document.getElementById(\"cf-captcha\");\n  const contador = document.getElementById(\"cf-contador\");\n  const btnEnviar = document.getElementById(\"cf-btn-enviar\");\n  const btnTexto = document.getElementById(\"cf-btn-texto\");\n  const errorGeneral = document.getElementById(\"cf-error-general\");\n\n  \/\/ URL del endpoint de WordPress. Si tu sitio NO est\u00e1 instalado en la ra\u00edz\n  \/\/ del dominio (ej. midominio.com\/blog), cambia esta ruta por la ruta completa,\n  \/\/ ej: \"https:\/\/midominio.com\/blog\/wp-admin\/admin-ajax.php\"\n  const AJAX_URL = \"..\/wp-admin\/admin-ajax.php\";\n\n  \/\/ Actualiza el contador de caracteres del mensaje en tiempo real\n  campoMensaje.addEventListener(\"input\", function () {\n    contador.textContent = campoMensaje.value.length + \" \/ 500\";\n  });\n\n  \/\/ Utilidad: muestra un error en un campo espec\u00edfico\n  function mostrarError(campo, idError, mensaje) {\n    const errorSpan = document.getElementById(idError);\n    const contenedor = campo.closest(\".cf-field\");\n    errorSpan.textContent = mensaje;\n    contenedor.classList.add(\"cf-invalid\");\n  }\n\n  \/\/ Utilidad: limpia el error de un campo espec\u00edfico\n  function limpiarError(campo, idError) {\n    const errorSpan = document.getElementById(idError);\n    const contenedor = campo.closest(\".cf-field\");\n    errorSpan.textContent = \"\";\n    contenedor.classList.remove(\"cf-invalid\");\n  }\n\n  \/\/ Validaci\u00f3n de correo electr\u00f3nico con expresi\u00f3n regular est\u00e1ndar\n  function emailValido(valor) {\n    const patron = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n    return patron.test(valor);\n  }\n\n  \/\/ Validaci\u00f3n de tel\u00e9fono (opcional, pero si se llena debe tener formato v\u00e1lido)\n  function telefonoValido(valor) {\n    if (valor.trim() === \"\") return true; \/\/ opcional\n    const patron = \/^\\+?[0-9\\s\\-()]{7,20}$\/;\n    return patron.test(valor);\n  }\n\n  function validarFormulario() {\n    let esValido = true;\n\n    \/\/ Nombre completo\n    if (campoNombre.value.trim() === \"\") {\n      mostrarError(campoNombre, \"err-nombre\", \"Por favor ingresa tu nombre completo.\");\n      esValido = false;\n    } else {\n      limpiarError(campoNombre, \"err-nombre\");\n    }\n\n    \/\/ Correo electr\u00f3nico\n    if (campoEmail.value.trim() === \"\") {\n      mostrarError(campoEmail, \"err-email\", \"Por favor ingresa tu correo electr\u00f3nico.\");\n      esValido = false;\n    } else if (!emailValido(campoEmail.value.trim())) {\n      mostrarError(campoEmail, \"err-email\", \"Ingresa un correo electr\u00f3nico v\u00e1lido.\");\n      esValido = false;\n    } else {\n      limpiarError(campoEmail, \"err-email\");\n    }\n\n    \/\/ Tel\u00e9fono (opcional)\n    if (!telefonoValido(campoTelefono.value.trim())) {\n      mostrarError(campoTelefono, \"err-telefono\", \"Ingresa un n\u00famero de tel\u00e9fono v\u00e1lido (formato internacional).\");\n      esValido = false;\n    } else {\n      limpiarError(campoTelefono, \"err-telefono\");\n    }\n\n    \/\/ Mensaje \/ Detalles\n    const mensaje = campoMensaje.value.trim();\n    if (mensaje === \"\") {\n      mostrarError(campoMensaje, \"err-mensaje\", \"Por favor cu\u00e9ntanos los detalles de tu solicitud.\");\n      esValido = false;\n    } else if (mensaje.length > 500) {\n      mostrarError(campoMensaje, \"err-mensaje\", \"El mensaje no puede superar los 500 caracteres.\");\n      esValido = false;\n    } else {\n      limpiarError(campoMensaje, \"err-mensaje\");\n    }\n\n    \/\/ Captcha\n    if (!campoCaptcha.checked) {\n      mostrarError(campoCaptcha, \"err-captcha\", \"Debes confirmar la casilla de verificaci\u00f3n.\");\n      esValido = false;\n    } else {\n      limpiarError(campoCaptcha, \"err-captcha\");\n    }\n\n    return esValido;\n  }\n\n  form.addEventListener(\"submit\", function (evento) {\n    evento.preventDefault();\n\n    \/\/ Oculta cualquier error general de un intento anterior\n    errorGeneral.hidden = true;\n    errorGeneral.textContent = \"\";\n\n    if (!validarFormulario()) {\n      \/\/ Enfoca el primer campo con error para mejorar la accesibilidad\n      const primerError = form.querySelector(\".cf-invalid input, .cf-invalid textarea\");\n      if (primerError) primerError.focus();\n      return;\n    }\n\n    \/\/ Prepara los datos para enviarlos a WordPress (admin-ajax.php)\n    const datos = new FormData();\n    datos.append(\"action\", \"enviar_formulario_seij\"); \/\/ debe coincidir con el hook de functions.php\n    datos.append(\"nombre\", campoNombre.value.trim());\n    datos.append(\"email\", campoEmail.value.trim());\n    datos.append(\"telefono\", campoTelefono.value.trim());\n    datos.append(\"mensaje\", campoMensaje.value.trim());\n\n    \/\/ Deshabilita el bot\u00f3n mientras se env\u00eda, para evitar doble env\u00edo\n    btnEnviar.disabled = true;\n    btnTexto.textContent = \"Enviando...\";\n\n    fetch(AJAX_URL, {\n      method: \"POST\",\n      credentials: \"same-origin\",\n      body: datos\n    })\n      .then(function (respuesta) {\n        return respuesta.json();\n      })\n      .then(function (data) {\n        if (data && data.success) {\n          \/\/ Oculta el formulario y muestra el mensaje de \u00e9xito animado\n          form.hidden = true;\n          successBox.hidden = false;\n        } else {\n          const mensajeError = (data && data.data && data.data.mensaje)\n            ? data.data.mensaje\n            : \"No se pudo enviar tu solicitud. Por favor intenta de nuevo.\";\n          errorGeneral.textContent = mensajeError;\n          errorGeneral.hidden = false;\n          btnEnviar.disabled = false;\n          btnTexto.textContent = \"Enviar solicitud\";\n        }\n      })\n      .catch(function () {\n        errorGeneral.textContent = \"Ocurri\u00f3 un error de conexi\u00f3n. Por favor intenta de nuevo m\u00e1s tarde.\";\n        errorGeneral.hidden = false;\n        btnEnviar.disabled = false;\n        btnTexto.textContent = \"Enviar solicitud\";\n      });\n  });\n\n})();\n<\/script>\t\t\t\t\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Solicitud de informaci\u00f3n Completa el formulario y te contactaremos a la brevedad. Nombre completo * Correo electr\u00f3nico * Tel\u00e9fono (opcional) Formato internacional recomendado, ej: +502 5555 5555 Mensaje \/ Detalles * 0 \/ 500 No soy un robot, confirmo que la informaci\u00f3n es correcta * Enviar solicitud \u00a1Gracias! Nos pondremos en contacto contigo pronto.<\/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":"<section aria-labelledby=\"cf-titulo\">\n    <header>\n      <h2 id=\"cf-titulo\">Solicitud de informaci\u00f3n<\/h2>\n      <p>Completa el formulario y te contactaremos a la brevedad.<\/p>\n    <\/header>\n    <!-- FORMULARIO -->\n    <form id=\"cf-form\" novalidate>\n      <!-- Nombre completo -->\n        <label for=\"cf-nombre\">Nombre completo *<\/label>\n        <input\n          type=\"text\"\n          id=\"cf-nombre\"\n          name=\"nombre\"\n          placeholder=\"Ej. Mar\u00eda P\u00e9rez\"\n          autocomplete=\"name\"\n          required\n        >\n      <!-- Correo electr\u00f3nico -->\n        <label for=\"cf-email\">Correo electr\u00f3nico *<\/label>\n        <input\n          type=\"email\"\n          id=\"cf-email\"\n          name=\"email\"\n          placeholder=\"ejemplo@correo.com\"\n          autocomplete=\"email\"\n          required\n        >\n      <!-- Tel\u00e9fono (opcional) -->\n        <label for=\"cf-telefono\">Tel\u00e9fono (opcional)<\/label>\n        <input\n          type=\"tel\"\n          id=\"cf-telefono\"\n          name=\"telefono\"\n          placeholder=\"+502 5555 5555\"\n          autocomplete=\"tel\"\n          pattern=\"^+?[0-9s-()]{7,20}$\"\n        >\n        Formato internacional recomendado, ej: +502 5555 5555\n      <!-- Mensaje \/ Detalles -->\n        <label for=\"cf-mensaje\">Mensaje \/ Detalles *<\/label>\n        <textarea\n          id=\"cf-mensaje\"\n          name=\"mensaje\"\n          rows=\"5\"\n          maxlength=\"500\"\n          placeholder=\"Cu\u00e9ntanos qu\u00e9 informaci\u00f3n necesitas...\"\n          required\n        ><\/textarea>\n          0 \/ 500\n      <!-- Captcha (checkbox de verificaci\u00f3n) -->\n        <label>\n          <input type=\"checkbox\" id=\"cf-captcha\" name=\"captcha\" required>\n          No soy un robot, confirmo que la informaci\u00f3n es correcta *\n        <\/label>\n      <!-- Mensaje de error general (fallos de conexi\u00f3n\/env\u00edo al servidor) -->\n      <!-- Bot\u00f3n de env\u00edo -->\n      <button type=\"submit\" id=\"cf-btn-enviar\">\n        Enviar solicitud\n      <\/button>\n    <\/form>\n    <!-- MENSAJE DE \u00c9XITO (oculto por defecto) -->\n      <svg viewBox=\"0 0 52 52\" aria-hidden=\"true\">\n        <circle cx=\"26\" cy=\"26\" r=\"24\" fill=\"none\"\/>\n        <path fill=\"none\" d=\"M14 27l7 7 16-16\"\/>\n      <\/svg>\n      <h3>\u00a1Gracias!<\/h3>\n      <p>Nos pondremos en contacto contigo pronto.<\/p>\n<\/section>\n<style>\n  \/* ============================================================\n     VARIABLES DE COLOR \/ ESTILO\n     Cambia estos valores para ajustar la paleta f\u00e1cilmente.\n  ============================================================ *\/\n  .cf-wrapper {\n    --cf-color-principal: #105784;   \/* Color principal (texto, bordes, bot\u00f3n) *\/\n    --cf-color-principal-hover: #0d4468; \/* Color al pasar el cursor sobre el bot\u00f3n *\/\n    --cf-color-texto: #2b2b2b;       \/* Color de texto general *\/\n    --cf-color-fondo: #f7f9fb;       \/* Fondo de la secci\u00f3n *\/\n    --cf-color-tarjeta: #ffffff;     \/* Fondo de la tarjeta del formulario *\/\n    --cf-color-borde: #dbe2e8;       \/* Bordes de inputs *\/\n    --cf-color-error: #d13a3a;       \/* Color de mensajes de error *\/\n    --cf-radius: 12px;\n    --cf-shadow: 0 8px 24px rgba(16, 87, 132, 0.08);\n    box-sizing: border-box;\n    width: 100%;\n    background: var(--cf-color-fondo);\n    padding: clamp(24px, 5vw, 56px) 16px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    display: flex;\n    justify-content: center;\n  }\n  .cf-wrapper *, .cf-wrapper *::before, .cf-wrapper *::after {\n    box-sizing: border-box;\n  }\n  .cf-card {\n    background: var(--cf-color-tarjeta);\n    width: 100%;\n    max-width: 560px;\n    padding: clamp(24px, 4vw, 40px);\n    border-radius: var(--cf-radius);\n    box-shadow: var(--cf-shadow);\n    border: 1px solid var(--cf-color-borde);\n  }\n  .cf-header {\n    text-align: center;\n    margin-bottom: 28px;\n  }\n  .cf-header h2 {\n    color: var(--cf-color-principal);\n    font-size: clamp(1.4rem, 2.2vw, 1.75rem);\n    margin: 0 0 8px;\n    font-weight: 700;\n  }\n  .cf-subtitulo {\n    color: #667685;\n    font-size: 0.95rem;\n    margin: 0;\n  }\n  \/* ---------- Campos del formulario ---------- *\/\n  .cf-field {\n    margin-bottom: 20px;\n    display: flex;\n    flex-direction: column;\n  }\n  .cf-field label {\n    color: var(--cf-color-texto);\n    font-weight: 600;\n    font-size: 0.92rem;\n    margin-bottom: 6px;\n  }\n  .cf-req {\n    color: var(--cf-color-error);\n  }\n  .cf-opcional {\n    color: #8a97a3;\n    font-weight: 400;\n    font-size: 0.85rem;\n  }\n  .cf-field input[type=\"text\"],\n  .cf-field input[type=\"email\"],\n  .cf-field input[type=\"tel\"],\n  .cf-field textarea {\n    width: 100%;\n    padding: 12px 14px;\n    border: 1.5px solid var(--cf-color-borde);\n    border-radius: 8px;\n    font-size: 0.95rem;\n    color: var(--cf-color-texto);\n    background: #fdfdfd;\n    transition: border-color 0.2s ease, box-shadow 0.2s ease;\n    font-family: inherit;\n  }\n  .cf-field textarea {\n    resize: vertical;\n    min-height: 110px;\n  }\n  \/* Estado de foco (accesibilidad) *\/\n  .cf-field input:focus,\n  .cf-field textarea:focus {\n    outline: none;\n    border-color: var(--cf-color-principal);\n    box-shadow: 0 0 0 3px rgba(16, 87, 132, 0.15);\n  }\n  \/* Estado de error *\/\n  .cf-field.cf-invalid input,\n  .cf-field.cf-invalid textarea {\n    border-color: var(--cf-color-error);\n  }\n  .cf-field.cf-invalid input:focus,\n  .cf-field.cf-invalid textarea:focus {\n    box-shadow: 0 0 0 3px rgba(209, 58, 58, 0.15);\n  }\n  .cf-error {\n    color: var(--cf-color-error);\n    font-size: 0.82rem;\n    min-height: 18px;\n    margin-top: 4px;\n    display: block;\n  }\n  .cf-hint {\n    color: #8a97a3;\n    font-size: 0.78rem;\n    margin-top: 4px;\n  }\n  .cf-counter-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n  .cf-counter {\n    color: #8a97a3;\n    font-size: 0.78rem;\n    white-space: nowrap;\n    margin-left: 12px;\n  }\n  \/* ---------- Captcha (checkbox) ---------- *\/\n  .cf-captcha {\n    background: #f5f8fa;\n    border: 1px solid var(--cf-color-borde);\n    border-radius: 8px;\n    padding: 14px;\n  }\n  .cf-checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n    font-weight: 400 !important;\n    font-size: 0.9rem;\n    color: var(--cf-color-texto);\n  }\n  .cf-checkbox-label input[type=\"checkbox\"] {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  .cf-checkbox-custom {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    border: 2px solid var(--cf-color-borde);\n    border-radius: 5px;\n    background: #fff;\n    margin-top: 1px;\n    position: relative;\n    transition: all 0.2s ease;\n  }\n  .cf-checkbox-label input[type=\"checkbox\"]:checked + .cf-checkbox-custom {\n    background: var(--cf-color-principal);\n    border-color: var(--cf-color-principal);\n  }\n  .cf-checkbox-label input[type=\"checkbox\"]:checked + .cf-checkbox-custom::after {\n    content: \"\";\n    position: absolute;\n    left: 6px;\n    top: 2px;\n    width: 5px;\n    height: 10px;\n    border: solid white;\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n  .cf-checkbox-label input[type=\"checkbox\"]:focus-visible + .cf-checkbox-custom {\n    box-shadow: 0 0 0 3px rgba(16, 87, 132, 0.25);\n  }\n  \/* ---------- Banner de error general (fallo de env\u00edo al servidor) ---------- *\/\n  .cf-error-general {\n    background: #fdecec;\n    border: 1px solid var(--cf-color-error);\n    color: var(--cf-color-error);\n    border-radius: 8px;\n    padding: 10px 14px;\n    font-size: 0.85rem;\n    margin-bottom: 16px;\n  }\n  \/* ---------- Bot\u00f3n de env\u00edo ---------- *\/\n  .cf-btn:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n  .cf-btn {\n    width: 100%;\n    padding: 14px 20px;\n    background: var(--cf-color-principal);\n    color: #ffffff;\n    border: none;\n    border-radius: 8px;\n    font-size: 1rem;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background-color 0.2s ease, transform 0.1s ease;\n    margin-top: 8px;\n  }\n  .cf-btn:hover {\n    background: var(--cf-color-principal-hover);\n  }\n  .cf-btn:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(16, 87, 132, 0.35);\n  }\n  .cf-btn:active {\n    transform: scale(0.99);\n  }\n  \/* ---------- Mensaje de \u00e9xito ---------- *\/\n  .cf-success {\n    text-align: center;\n    padding: 20px 10px;\n    animation: cfFadeIn 0.5s ease forwards;\n  }\n  .cf-success h3 {\n    color: var(--cf-color-principal);\n    font-size: 1.4rem;\n    margin: 12px 0 6px;\n  }\n  .cf-success p {\n    color: #667685;\n    margin: 0;\n  }\n  .cf-success-icon {\n    width: 64px;\n    height: 64px;\n    margin: 0 auto;\n    display: block;\n  }\n  .cf-success-circle {\n    stroke: var(--cf-color-principal);\n    stroke-width: 3;\n    stroke-dasharray: 166;\n    stroke-dashoffset: 166;\n    animation: cfCircle 0.6s ease forwards;\n  }\n  .cf-success-check {\n    stroke: var(--cf-color-principal);\n    stroke-width: 4;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 48;\n    stroke-dashoffset: 48;\n    animation: cfCheck 0.4s ease 0.5s forwards;\n  }\n  @keyframes cfFadeIn {\n    from { opacity: 0; transform: translateY(8px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes cfCircle {\n    to { stroke-dashoffset: 0; }\n  }\n  @keyframes cfCheck {\n    to { stroke-dashoffset: 0; }\n  }\n  \/* ---------- Responsivo ---------- *\/\n  @media (max-width: 480px) {\n    .cf-card {\n      padding: 20px;\n    }\n    .cf-header h2 {\n      font-size: 1.25rem;\n    }\n  }\n  \/* Respeta la preferencia de \"reducir movimiento\" del usuario *\/\n  @media (prefers-reduced-motion: reduce) {\n    .cf-success,\n    .cf-success-circle,\n    .cf-success-check {\n      animation: none !important;\n    }\n  }\n<\/style>","_et_gb_content_width":"","footnotes":""},"class_list":["post-58","page","type-page","status-publish","hentry"],"nelio_popups_active_popup":"","_links":{"self":[{"href":"https:\/\/seij.gob.gt\/udisep\/wp-json\/wp\/v2\/pages\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seij.gob.gt\/udisep\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seij.gob.gt\/udisep\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seij.gob.gt\/udisep\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seij.gob.gt\/udisep\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":43,"href":"https:\/\/seij.gob.gt\/udisep\/wp-json\/wp\/v2\/pages\/58\/revisions"}],"predecessor-version":[{"id":8371,"href":"https:\/\/seij.gob.gt\/udisep\/wp-json\/wp\/v2\/pages\/58\/revisions\/8371"}],"wp:attachment":[{"href":"https:\/\/seij.gob.gt\/udisep\/wp-json\/wp\/v2\/media?parent=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}