{"id":117,"date":"2026-03-18T18:45:54","date_gmt":"2026-03-18T18:45:54","guid":{"rendered":"https:\/\/pangosoft.xyz\/?page_id=117"},"modified":"2026-03-18T19:14:55","modified_gmt":"2026-03-18T19:14:55","slug":"contacto","status":"publish","type":"page","link":"https:\/\/pangosoft.xyz\/index.php\/contacto\/","title":{"rendered":"\u00a1Hablemos de tu Proyecto!"},"content":{"rendered":"\n<!-- FORMULARIO DE CONTACTO DIRECTO - PANGOSOFT -->\n<div class=\"pango-contact-direct\">\n  \n  <div class=\"form-header\">\n    <h2>\ud83d\udcec Queremos conocer tu proyecto y ayudarte con \u00e9l<\/h2>\n    <p>Completa el formulario y tu mensaje llegar\u00e1 inmediatamente a nuestro equipo<\/p>\n  <\/div>\n  \n  <form action=\"https:\/\/formspree.io\/f\/mdawypzy\" method=\"POST\" class=\"form-body\" id=\"contactForm\">\n    \n    <!-- Campos ocultos para configuraci\u00f3n de Formspree -->\n    <input type=\"hidden\" name=\"_subject\" value=\"\ud83d\ude80 Nuevo mensaje desde Pangosoft.xyz\">\n    <input type=\"hidden\" name=\"_to\" value=\"natanaelescobarit@gmail.com,eduardofuentesit@gmail.com\">\n    <input type=\"hidden\" name=\"_next\" value=\"https:\/\/pangosoft.xyz\/gracias-contacto\/\">\n    <input type=\"hidden\" name=\"_autoresponse\" value=\"Gracias por contactarnos. Hemos recibido tu mensaje y te responderemos en menos de 24 horas. \u2014 Equipo Pangosoft\">\n    \n    <!-- Nombre -->\n    <div class=\"form-group\">\n      <label for=\"name\">Nombre completo *<\/label>\n      <input type=\"text\" id=\"name\" name=\"name\" required placeholder=\"Ej: Juan P\u00e9rez\" class=\"elegant-input\">\n    <\/div>\n    \n    <!-- Email -->\n    <div class=\"form-group\">\n      <label for=\"email\">Correo electr\u00f3nico *<\/label>\n      <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"Ej: juan@empresa.com\" class=\"elegant-input\">\n    <\/div>\n    \n    <!-- Tel\u00e9fono y Empresa en l\u00ednea -->\n    <div class=\"form-row\">\n      <div class=\"form-group\">\n        <label for=\"phone\">Tel\u00e9fono<\/label>\n        <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"+502 1234 5678\" class=\"elegant-input\">\n      <\/div>\n      <div class=\"form-group\">\n        <label for=\"company\">Empresa o Negocio<\/label>\n        <input type=\"text\" id=\"company\" name=\"company\" placeholder=\"Ej: Mi negocio\" class=\"elegant-input\">\n      <\/div>\n    <\/div>\n    \n    <!-- Servicio de inter\u00e9s -->\n    <div class=\"form-group\">\n      <label for=\"service\">Servicio de inter\u00e9s *<\/label>\n      <select id=\"service\" name=\"service\" required class=\"elegant-select\">\n        <option value=\"\">Selecciona una opci\u00f3n<\/option>\n        <option value=\"Software a medida\">Software a medida<\/option>\n        <option value=\"Aplicaci\u00f3n m\u00f3vil\">Aplicaci\u00f3n m\u00f3vil<\/option>\n        <option value=\"Sitio web profesional\">Sitio web profesional<\/option>\n        <option value=\"Cloud &#038; VPS\">Cloud &#038; VPS administrados<\/option>\n        <option value=\"Consultor\u00eda digital\">Consultor\u00eda en transformaci\u00f3n digital<\/option>\n        <option value=\"Soporte IT\">Soporte IT &#038; DevOps<\/option>\n        <option value=\"Otro\">Otro \/ Necesito asesor\u00eda<\/option>\n      <\/select>\n    <\/div>\n    \n    <!-- Mensaje -->\n    <div class=\"form-group\">\n      <label for=\"message\">Tu mensaje *<\/label>\n      <textarea id=\"message\" name=\"message\" required placeholder=\"Describe brevemente tu consulta, proyecto o cualquier detalle importante...\" class=\"elegant-textarea\"><\/textarea>\n    <\/div>\n    \n    <!-- Checkbox de privacidad -->\n    <div class=\"form-group form-checkbox\">\n      <label class=\"checkbox-container\">\n        <input type=\"checkbox\" name=\"privacy\" required>\n        <span class=\"checkbox-label\">Acepto la <a href=\"\/politica-de-privacidad\" target=\"_blank\">pol\u00edtica de privacidad<\/a> y el tratamiento de mis datos personales *<\/span>\n      <\/label>\n    <\/div>\n    \n    <!-- Bot\u00f3n de env\u00edo -->\n    <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\n      <span class=\"btn-text\">Enviar mensaje<\/span>\n      <span class=\"btn-loading\" style=\"display: none;\">Enviando&#8230;<\/span>\n    <\/button>\n    \n    <!-- Mensajes de estado -->\n    <div class=\"form-message success\" id=\"successMessage\" style=\"display: none;\">\n      \u2705 \u00a1Mensaje enviado! Te responderemos en menos de 24 horas.\n    <\/div>\n    <div class=\"form-message error\" id=\"errorMessage\" style=\"display: none;\">\n      \u274c Ocurri\u00f3 un error. Por favor intenta nuevamente o escr\u00edbenos directamente.\n    <\/div>\n    \n    <!-- Nota final -->\n    <p class=\"form-note\">\n      \ud83d\udd12 Tus datos est\u00e1n protegidos.<br>\n    <\/p>\n    \n  <\/form>\n  \n<\/div>\n\n<!-- Estilos CSS -->\n<style>\n\/* ===== FORMULARIO CONTACTO DIRECTO - PANGOSOFT ===== *\/\n\n.pango-contact-direct {\n  max-width: 650px;\n  margin: 0 auto;\n  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);\n  padding: 40px 35px;\n  border-radius: 16px;\n  border: 1px solid rgba(212, 175, 55, 0.25);\n  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);\n  font-family: 'Inter', Arial, sans-serif;\n  color: #F4E4BC;\n}\n\n\/* Header *\/\n.form-header {\n  text-align: center;\n  margin-bottom: 35px;\n  padding-bottom: 25px;\n  border-bottom: 1px solid rgba(212, 175, 55, 0.2);\n}\n\n.form-header h2 {\n  color: #D4AF37;\n  font-size: 1.8rem;\n  font-weight: 700;\n  margin: 0 0 10px 0;\n  letter-spacing: 0.5px;\n}\n\n.form-header p {\n  color: #94a3b8;\n  font-size: 1rem;\n  margin: 0;\n  line-height: 1.5;\n}\n\n\/* Cuerpo del formulario *\/\n.form-body {\n  display: flex;\n  flex-direction: column;\n  gap: 22px;\n}\n\n\/* Grupos del formulario *\/\n.form-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.form-group label {\n  color: #D4AF37;\n  font-size: 0.9rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n\/* Inputs *\/\n.elegant-input,\n.elegant-select,\n.elegant-textarea {\n  width: 100%;\n  padding: 12px 16px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(212, 175, 55, 0.3);\n  border-radius: 8px;\n  font-size: 15px;\n  color: #F4E4BC;\n  font-family: 'Inter', Arial, sans-serif;\n  transition: all 0.3s ease;\n  box-sizing: border-box;\n}\n\n.elegant-input:focus,\n.elegant-select:focus,\n.elegant-textarea:focus {\n  outline: none;\n  border-color: #D4AF37;\n  background: rgba(255, 255, 255, 0.08);\n  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);\n}\n\n.elegant-input::placeholder,\n.elegant-textarea::placeholder {\n  color: #64748b;\n}\n\n.elegant-textarea {\n  min-height: 120px;\n  resize: vertical;\n  line-height: 1.5;\n}\n\n\/* Select personalizado *\/\n.elegant-select {\n  appearance: none;\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  background-size: 18px;\n  padding-right: 45px;\n  cursor: pointer;\n}\n\n.elegant-select option {\n  background: #0f172a;\n  color: #F4E4BC;\n  padding: 10px;\n}\n\n\/* Fila de dos columnas *\/\n.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 18px;\n}\n\n\/* Checkbox *\/\n.form-checkbox {\n  margin-top: 8px;\n}\n\n.checkbox-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  cursor: pointer;\n}\n\n.checkbox-container input[type=\"checkbox\"] {\n  width: 18px;\n  height: 18px;\n  min-width: 18px;\n  margin: 2px 0 0 0;\n  accent-color: #D4AF37;\n  cursor: pointer;\n  border: 2px solid rgba(212, 175, 55, 0.5);\n  border-radius: 4px;\n  background: rgba(255, 255, 255, 0.05);\n}\n\n.checkbox-label {\n  color: #94a3b8;\n  font-size: 0.9rem;\n  line-height: 1.5;\n}\n\n.checkbox-label a {\n  color: #FFD700;\n  text-decoration: none;\n  border-bottom: 1px dotted rgba(212, 175, 55, 0.5);\n}\n\n.checkbox-label a:hover {\n  color: #F4E4BC;\n  border-bottom-style: solid;\n}\n\n\/* Bot\u00f3n de env\u00edo *\/\n.submit-btn {\n  width: 100%;\n  padding: 16px 28px;\n  background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);\n  color: #0f172a;\n  border: none;\n  border-radius: 8px;\n  font-size: 16px;\n  font-weight: 700;\n  font-family: 'Inter', Arial, sans-serif;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-top: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n}\n\n.submit-btn:hover {\n  background: linear-gradient(135deg, #FFD700 0%, #D4AF37 100%);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);\n}\n\n.submit-btn:active {\n  transform: translateY(0);\n}\n\n.submit-btn:disabled {\n  opacity: 0.7;\n  cursor: not-allowed;\n  transform: none;\n}\n\n\/* Mensajes de estado *\/\n.form-message {\n  padding: 14px 18px;\n  border-radius: 8px;\n  font-size: 0.95rem;\n  text-align: center;\n  margin-top: 15px;\n}\n\n.form-message.success {\n  background: rgba(16, 185, 129, 0.15);\n  color: #34D399;\n  border: 1px solid rgba(16, 185, 129, 0.4);\n}\n\n.form-message.error {\n  background: rgba(239, 68, 68, 0.15);\n  color: #F87171;\n  border: 1px solid rgba(239, 68, 68, 0.4);\n}\n\n\/* Nota final *\/\n.form-note {\n  text-align: center;\n  margin-top: 25px;\n  padding-top: 20px;\n  border-top: 1px solid rgba(212, 175, 55, 0.15);\n  font-size: 0.85rem;\n  color: #94a3b8;\n  line-height: 1.6;\n}\n\n.form-note a {\n  color: #D4AF37;\n  text-decoration: none;\n}\n\n.form-note a:hover {\n  text-decoration: underline;\n}\n\n\/* Responsive *\/\n@media (max-width: 768px) {\n  .pango-contact-direct {\n    padding: 30px 25px;\n    border-radius: 12px;\n  }\n  \n  .form-header h2 {\n    font-size: 1.5rem;\n  }\n  \n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 0;\n  }\n  \n  .elegant-input,\n  .elegant-select,\n  .elegant-textarea {\n    font-size: 15px;\n    padding: 11px 14px;\n  }\n  \n  .submit-btn {\n    padding: 14px 24px;\n    font-size: 15px;\n  }\n  \n  .checkbox-label {\n    font-size: 0.85rem;\n  }\n}\n\n\/* Animaci\u00f3n de entrada *\/\n@keyframes slideInForm {\n  from { opacity: 0; transform: translateY(25px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.pango-contact-direct {\n  animation: slideInForm 0.6s ease forwards;\n}\n\n\/* Accesibilidad *\/\n@media (prefers-reduced-motion: reduce) {\n  .pango-contact-direct,\n  .submit-btn,\n  .elegant-input,\n  .elegant-select,\n  .elegant-textarea {\n    animation: none;\n    transition: none;\n  }\n}\n\n\/* Focus visible *\/\n.elegant-input:focus-visible,\n.elegant-select:focus-visible,\n.elegant-textarea:focus-visible,\n.submit-btn:focus-visible {\n  outline: 2px solid #FFD700;\n  outline-offset: 2px;\n}\n<\/style>\n\n<!-- JavaScript para manejo del formulario -->\n<script>\ndocument.getElementById('contactForm').addEventListener('submit', async function(e) {\n  e.preventDefault();\n  \n  const form = this;\n  const submitBtn = document.getElementById('submitBtn');\n  const btnText = submitBtn.querySelector('.btn-text');\n  const btnLoading = submitBtn.querySelector('.btn-loading');\n  const successMessage = document.getElementById('successMessage');\n  const errorMessage = document.getElementById('errorMessage');\n  \n  \/\/ Ocultar mensajes previos\n  successMessage.style.display = 'none';\n  errorMessage.style.display = 'none';\n  \n  \/\/ Mostrar estado de env\u00edo\n  submitBtn.disabled = true;\n  btnText.style.display = 'none';\n  btnLoading.style.display = 'inline';\n  \n  \/\/ Obtener datos del formulario\n  const formData = new FormData(form);\n  \n  try {\n    \/\/ Enviar a Formspree\n    const response = await fetch(form.action, {\n      method: 'POST',\n      body: formData,\n      headers: {\n        'Accept': 'application\/json'\n      }\n    });\n    \n    if (response.ok) {\n      \/\/ \u00c9xito\n      successMessage.style.display = 'block';\n      form.reset();\n      successMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n    } else {\n      throw new Error('Error en el env\u00edo');\n    }\n  } catch (error) {\n    console.error('Error:', error);\n    errorMessage.style.display = 'block';\n    errorMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  } finally {\n    \/\/ Restaurar bot\u00f3n\n    submitBtn.disabled = false;\n    btnText.style.display = 'inline';\n    btnLoading.style.display = 'none';\n  }\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcec Queremos conocer tu proyecto y ayudarte con \u00e9l Completa el formulario y tu mensaje llegar\u00e1 inmediatamente a nuestro equipo Nombre completo * Correo electr\u00f3nico * Tel\u00e9fono Empresa o Negocio Servicio de inter\u00e9s * Selecciona una opci\u00f3nSoftware a medidaAplicaci\u00f3n m\u00f3vilSitio web profesionalCloud &#038; VPS administradosConsultor\u00eda en transformaci\u00f3n digitalSoporte IT &#038; DevOpsOtro \/ Necesito asesor\u00eda Tu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":27,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-117","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/pangosoft.xyz\/index.php\/wp-json\/wp\/v2\/pages\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pangosoft.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pangosoft.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pangosoft.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pangosoft.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":6,"href":"https:\/\/pangosoft.xyz\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions"}],"predecessor-version":[{"id":125,"href":"https:\/\/pangosoft.xyz\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions\/125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pangosoft.xyz\/index.php\/wp-json\/wp\/v2\/media\/27"}],"wp:attachment":[{"href":"https:\/\/pangosoft.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}