{"id":4409,"date":"2025-09-29T10:31:15","date_gmt":"2025-09-29T13:31:15","guid":{"rendered":"https:\/\/hubvitacura.glympses.cl\/home\/?page_id=4409"},"modified":"2025-10-10T12:09:10","modified_gmt":"2025-10-10T15:09:10","slug":"comercio","status":"publish","type":"page","link":"https:\/\/hubvitacura.cl\/home\/comercio\/","title":{"rendered":"Comercio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4409\" class=\"elementor elementor-4409\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b8eccab e-flex e-con-boxed e-con e-parent\" data-id=\"b8eccab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2da1e0a e-con-full e-flex e-con e-child\" data-id=\"2da1e0a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-328ff6f elementor-widget elementor-widget-html\" data-id=\"328ff6f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Inicio del C\u00f3digo de Programas Hub Vitacura (BAZAR) con Apex New -->\r\n<style>\r\n    @import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.4\/css\/all.min.css');\r\n  \r\n    \/* ===============================\r\n       1) Cargar fuentes Apex New\r\n       =============================== *\/\r\n    @font-face {\r\n      font-family: 'Apex New Heavy';\r\n      src: url('\/fonts\/ApexNew-Heavy.woff2') format('woff2'),\r\n           url('\/fonts\/ApexNew-Heavy.woff') format('woff');\r\n      font-weight: 800;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n    @font-face {\r\n      font-family: 'Apex New Light';\r\n      src: url('\/fonts\/ApexNew-Light.woff2') format('woff2'),\r\n           url('\/fonts\/ApexNew-Light.woff') format('woff');\r\n      font-weight: 400;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n    @font-face {\r\n      font-family: 'Apex New Light';\r\n      src: url('\/fonts\/ApexNew-LightBold.woff2') format('woff2'),\r\n           url('\/fonts\/ApexNew-LightBold.woff') format('woff');\r\n      font-weight: 700;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n  \r\n    :root {\r\n      --f-title:'Apex New Heavy',system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n      --f-text:'Apex New Light',system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  \r\n      --fs-title-main:27px; \/* Heavy *\/\r\n      --fs-title-sec:23px;  \/* Light *\/\r\n      --fs-body:18px;       \/* Light *\/\r\n      --lh-body:1.55;\r\n  \r\n      --c-text:#333;\r\n      --c-muted:#555;\r\n      --c-border:#f0f0f0;\r\n      --c-cardbg:#fff;\r\n      --c-shadow:rgba(0,0,0,0.05);\r\n      --c-shadow-h:rgba(0,0,0,0.1);\r\n    }\r\n  \r\n    #hub-programas-container {\r\n      font-family:var(--f-text);\r\n      color:var(--c-text);\r\n      max-width:1200px;\r\n      margin:40px auto;\r\n      padding:0 16px;\r\n      font-size:var(--fs-body);\r\n      line-height:var(--lh-body);\r\n    }\r\n  \r\n    .hub-programas-grid {\r\n      display:grid;\r\n      grid-template-columns: repeat(auto-fill,minmax(260px,1fr));\r\n      gap:24px;\r\n    }\r\n  \r\n    .hub-programa-card {\r\n      background-color:var(--c-cardbg);\r\n      border:1px solid var(--c-border);\r\n      border-radius:12px;\r\n      box-shadow:0 4px 12px var(--c-shadow);\r\n      overflow:hidden;\r\n      display:flex;\r\n      flex-direction:column;\r\n      transition:transform .2s ease, box-shadow .2s ease;\r\n    }\r\n    .hub-programa-card:hover {\r\n      transform:translateY(-5px);\r\n      box-shadow:0 8px 20px var(--c-shadow-h);\r\n    }\r\n  \r\n    .hub-programa-card a.card-link-wrapper {\r\n      text-decoration:none;\r\n      color:inherit;\r\n      display:flex;\r\n      flex-direction:column;\r\n      height:100%;\r\n    }\r\n  \r\n    .hub-programa-card .card-image img {\r\n      width:100%;\r\n      height:180px;\r\n      object-fit:cover;\r\n      display:block;\r\n    }\r\n  \r\n    .hub-programa-card .card-content {\r\n      padding:16px;\r\n      flex-grow:1;\r\n    }\r\n  \r\n    \/* T\u00edtulo de tarjeta con Apex New Light 23px *\/\r\n    .hub-programa-card .card-title {\r\n      font-family:var(--f-text);\r\n      font-size:var(--fs-title-sec);\r\n      font-weight:400;\r\n      margin:0 0 12px;\r\n      line-height:1.3;\r\n      text-transform:uppercase;\r\n      letter-spacing:.02em;\r\n      display:-webkit-box;\r\n      -webkit-line-clamp:2;\r\n      -webkit-box-orient:vertical;\r\n      overflow:hidden;\r\n    }\r\n  \r\n    .hub-programa-card .card-meta {\r\n      font-family:var(--f-text);\r\n      font-size:var(--fs-body);\r\n      color:var(--c-muted);\r\n      line-height:var(--lh-body);\r\n    }\r\n    .hub-programa-card .card-meta span {\r\n      display:block;\r\n      margin-bottom:8px;\r\n    }\r\n    .hub-programa-card .card-meta span:last-child {\r\n      margin-bottom:0;\r\n    }\r\n    .hub-programa-card .card-meta i {\r\n      margin-right:8px;\r\n      color:#888;\r\n      width:15px;\r\n      text-align:center;\r\n    }\r\n  \r\n    .hub-programa-card .card-meta .card-location {\r\n      display:-webkit-box;\r\n      -webkit-line-clamp:1;\r\n      -webkit-box-orient:vertical;\r\n      overflow:hidden;\r\n      text-overflow:ellipsis;\r\n      white-space:normal;\r\n    }\r\n  \r\n    .hub-programa-card .card-footer {\r\n      padding:16px;\r\n      border-top:1px solid var(--c-border);\r\n      display:flex;\r\n      justify-content:space-between;\r\n      align-items:center;\r\n      font-family:var(--f-text);\r\n      font-size:var(--fs-body);\r\n      font-weight:700; \/* negrita Light *\/\r\n    }\r\n  \r\n    .hub-programa-card .card-status {\r\n      color:var(--c-text);\r\n    }\r\n    .hub-programa-card .card-share-icon {\r\n      color:#888;\r\n      cursor:pointer;\r\n    }\r\n  \r\n    #hub-programas-grid>p {\r\n      font-family:var(--f-text);\r\n      font-size:var(--fs-body);\r\n    }\r\n  <\/style>\r\n  \r\n  <div id=\"hub-programas-container\">\r\n    <div id=\"hub-programas-grid\" class=\"hub-programas-grid\">\r\n      <p style=\"text-align:center;\">Cargando programas...<\/p>\r\n    <\/div>\r\n  <\/div>\r\n  \r\n  <script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    const gridContainer = document.getElementById('hub-programas-grid');\r\n  \r\n    const API_BASE_URL = 'https:\/\/admin.hubvitacura.cl\/programas\/api\/';\r\n    const TIPO_DE_PROGRAMA = 'COMERCIO';\r\n    const PAGINA_DETALLE_URL = '\/detalle-programa\/';\r\n  \r\n    let apiUrl = API_BASE_URL;\r\n    if (TIPO_DE_PROGRAMA) {\r\n      apiUrl += `?tipo=${encodeURIComponent(TIPO_DE_PROGRAMA)}`;\r\n    }\r\n  \r\n    fetch(apiUrl)\r\n      .then(response => {\r\n        if (!response.ok) throw new Error('La respuesta del servidor no fue exitosa.');\r\n        return response.json();\r\n      })\r\n      .then(programas => {\r\n        gridContainer.innerHTML = '';\r\n  \r\n        if (!Array.isArray(programas) || programas.length === 0) {\r\n          gridContainer.innerHTML = '<p>No hay programas disponibles en esta categor\u00eda.<\/p>';\r\n          return;\r\n        }\r\n  \r\n        programas.forEach(programa => {\r\n          const cardWrapper = document.createElement('div');\r\n          cardWrapper.className = 'hub-programa-card';\r\n  \r\n          \/\/ Usar imagen miniatura si existe, sino usar la imagen principal\r\n          const imagenUrl = programa.imagen_miniatura_url || programa.imagen_url;\r\n  \r\n          \/\/ Formatear fecha de inicio del evento\r\n          const fechaInicioEvento = new Date(programa.fecha_inicio);\r\n          const fechaEventoFormateada = fechaInicioEvento.toLocaleDateString('es-ES', {\r\n            day: 'numeric', month: 'long'\r\n          });\r\n  \r\n          \/\/ Formatear fechas de postulaci\u00f3n (convocatoria)\r\n          let fechasPostulacionHTML = '';\r\n          \r\n          if (programa.fecha_inicio_postulacion && programa.fecha_fin_postulacion) {\r\n            \/\/ Ambas fechas disponibles - formato compacto \"Convocatoria 5 - 10 octubre\"\r\n            const fechaInicio = new Date(programa.fecha_inicio_postulacion);\r\n            const fechaFin = new Date(programa.fecha_fin_postulacion);\r\n            \r\n            const diaInicio = fechaInicio.getDate();\r\n            const diaFin = fechaFin.getDate();\r\n            const mesFin = fechaFin.toLocaleDateString('es-ES', { month: 'long' });\r\n            \r\n            fechasPostulacionHTML = `\r\n              <span class=\"card-date\">\r\n                <i class=\"fas fa-calendar-alt\"><\/i>\r\n                Convocatoria ${diaInicio} - ${diaFin} ${mesFin}\r\n              <\/span>\r\n            `;\r\n          } else if (programa.fecha_inicio_postulacion) {\r\n            \/\/ Solo fecha de inicio\r\n            const fechaInicio = new Date(programa.fecha_inicio_postulacion);\r\n            const fechaInicioFormateada = fechaInicio.toLocaleDateString('es-ES', {\r\n              day: 'numeric', month: 'long'\r\n            });\r\n            \r\n            fechasPostulacionHTML = `\r\n              <span class=\"card-date\">\r\n                <i class=\"fas fa-calendar-alt\"><\/i>\r\n                Inicio postulaci\u00f3n: ${fechaInicioFormateada}\r\n              <\/span>\r\n            `;\r\n          } else if (programa.fecha_fin_postulacion) {\r\n            \/\/ Solo fecha de cierre\r\n            const fechaFin = new Date(programa.fecha_fin_postulacion);\r\n            const fechaFinFormateada = fechaFin.toLocaleDateString('es-ES', {\r\n              day: 'numeric', month: 'long'\r\n            });\r\n            \r\n            fechasPostulacionHTML = `\r\n              <span class=\"card-date\">\r\n                <i class=\"fas fa-calendar-check\"><\/i>\r\n                Cierre postulaci\u00f3n: ${fechaFinFormateada}\r\n              <\/span>\r\n            `;\r\n          }\r\n  \r\n          cardWrapper.innerHTML = `\r\n            <a href=\"${PAGINA_DETALLE_URL}?id=${encodeURIComponent(programa.id)}\" class=\"card-link-wrapper\">\r\n              <div class=\"card-image\">\r\n                <img decoding=\"async\" src=\"${imagenUrl}\" alt=\"${programa.titulo}\">\r\n              <\/div>\r\n              <div class=\"card-content\">\r\n                <h3 class=\"card-title\">${programa.titulo}<\/h3>\r\n                <div class=\"card-meta\">\r\n                  ${fechasPostulacionHTML}\r\n                  <span class=\"card-date\">\r\n                    <i class=\"fas fa-calendar-day\"><\/i>\r\n                    Evento: ${fechaEventoFormateada}\r\n                  <\/span>\r\n                  <span class=\"card-location\">\r\n                    <i class=\"fas fa-map-marker-alt\"><\/i>\r\n                    ${programa.ubicacion || ''}\r\n                  <\/span>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"card-footer\">\r\n                <span class=\"card-status\">${programa.modalidad_inscripcion || ''}<\/span>\r\n                <span class=\"card-share-icon\"><i class=\"fas fa-share-alt\"><\/i><\/span>\r\n              <\/div>\r\n            <\/a>\r\n          `;\r\n          gridContainer.appendChild(cardWrapper);\r\n        });\r\n      })\r\n      .catch(error => {\r\n        console.error('No hay bazares por el momento:', error);\r\n        gridContainer.innerHTML = '<p style=\"color:black;\">No hay bazares disponibles por el momento.<\/p>';\r\n      });\r\n  });\r\n  <\/script>\r\n  <!-- Fin del C\u00f3digo de Programas Hub Vitacura (BAZAR) con Apex New -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cargando programas&#8230;<\/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-4409","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/pages\/4409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/comments?post=4409"}],"version-history":[{"count":31,"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/pages\/4409\/revisions"}],"predecessor-version":[{"id":10470,"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/pages\/4409\/revisions\/10470"}],"wp:attachment":[{"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/media?parent=4409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}