{"id":1539,"date":"2025-05-16T12:21:08","date_gmt":"2025-05-16T17:21:08","guid":{"rendered":"https:\/\/previanza.com\/?page_id=1539"},"modified":"2025-05-20T10:55:59","modified_gmt":"2025-05-20T15:55:59","slug":"convenciones","status":"publish","type":"page","link":"https:\/\/previanza.com\/old2024\/convenciones\/","title":{"rendered":"Convenciones"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1539\" class=\"elementor elementor-1539\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1ff255 e-flex e-con-boxed e-con e-parent\" data-id=\"d1ff255\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19eac6a elementor-widget elementor-widget-html\" data-id=\"19eac6a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ==========  ESTRUCTURA  ========== -->\r\n<div class=\"locations-wrapper\">\r\n  <!-- Mapa \/ vista previa est\u00e1tica -->\r\n  <div id=\"map-holder\">\r\n    <img decoding=\"async\" id=\"staticMap\" class=\"static-preview\"\r\n         src=\"https:\/\/api.mapbox.com\/styles\/v1\/mapbox\/dark-v10\/static\/-79.5,-1.8312,6.3,0\/800x500@2x?access_token=pk.eyJ1Ijoid3VodWlodWFuZzkwIiwiYSI6ImNqZXA5MXVyNzFkMHQzM3BuZWFibTkxZ3AifQ.ZKLS-x6vqhbyoF5MTF3hAw\"\r\n         alt=\"Mapa de ubicaciones \u2014 haz clic para interactuar\" loading=\"lazy\">\r\n  <\/div>\r\n\r\n  <!-- Lista \/ acorde\u00f3n -->\r\n  <div class=\"accordion\" id=\"locationsAccordion\"><\/div>\r\n<\/div>\r\n\r\n<!-- ==========  ESTILOS  ========== -->\r\n<style>\r\n\/* ----- Layout desktop: 65 % mapa \/ 35 % lista ----- *\/\r\n.locations-wrapper{display:flex;flex-wrap:nowrap;gap:1rem;width:100%}\r\n#map-holder           {flex:0 0 65%;min-height:500px;position:relative}\r\n.accordion            {flex:0 0 35%;max-height:500px;overflow:auto;border-left:2px solid #eee}\r\n\r\n\/* Vista previa est\u00e1tica cubre todo el contenedor *\/\r\n.static-preview{width:100%;height:100%;object-fit:cover;cursor:pointer}\r\n\r\n\/* ----- Botones del acorde\u00f3n ----- *\/\r\n.acc-header{\r\n  background:#0d1b25;color:#a9e0f1;font:600 1rem\/1.2 'Arsenal SC',sans-serif;\r\n  padding:1rem 3.5rem 1rem 1.25rem;border:1px solid #133143;border-radius:0.5rem;\r\n  width:100%;display:flex;justify-content:space-between;align-items:center;\r\n  position:relative;cursor:pointer;transition:background .25s ease,box-shadow .25s ease;\r\n}\r\n.acc-header:hover    {background:#122334;box-shadow:0 0 0 3px #1a4358 inset}\r\n.acc-header:focus-visible{outline:3px solid #59b9d3;outline-offset:2px}\r\n.acc-header span:last-child{display:none}\r\n.acc-header::after{\r\n  content:\"\";position:absolute;right:1.25rem;top:50%;\r\n  width:0.55rem;height:0.55rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;\r\n  transform:translateY(-50%) rotate(45deg);transition:transform .3s ease;\r\n}\r\n.acc-header[aria-expanded=\"true\"]::after{transform:translateY(-50%) rotate(135deg)}\r\n\r\n\/* ----- Contenedores y paneles ----- *\/\r\n.acc-item         {margin-bottom:0.5rem;transition:flex-basis .3s ease}\r\n.acc-panel        {max-height:0;overflow:hidden;transition:max-height .35s ease;border-left:1px solid #1a4358}\r\n.acc-panel.open   {padding:0 1rem 1rem}\r\n.acc-panel p      {margin:.5rem 0}\r\n.acc-panel img,\r\n.acc-panel iframe {display:block;width:100%;max-width:100%;height:180px;object-fit:cover;margin:.5rem auto;border:0}\r\n.acc-panel iframe {aspect-ratio:16\/9}\r\n\r\n\/* ----- Mobile: lista arriba en 2 columnas ----- *\/\r\n@media(max-width:768px){\r\n  .locations-wrapper{flex-wrap:wrap}\r\n  .accordion{order:-1;flex:0 0 100%;max-height:none;border-left:0;border-top:2px solid #eee;\r\n             display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}\r\n  .acc-item{grid-column:span 1;width:100%}\r\n  .acc-item.expanded{grid-column:1 \/ -1}\r\n  #map-holder{flex:0 0 100%;min-height:400px}\r\n}\r\n<\/style>\r\n\r\n<!-- ==========  SCRIPT PRINCIPAL  ========== -->\r\n<script>\r\n(function(){\r\n  \/* ----- 1. Datos de ubicaciones ----- *\/\r\n  const locations=[\r\n    {name:\"Quito\",coords:[-78.4832382,-0.1714058],\r\n     address:\"Matriz: Calle Alfonso Pereira y Julio Alarc\u00f3n Ayala, edificio Zaigen, piso 14.\",\r\n     image:\"\/wp-content\/uploads\/2025\/03\/quito.jpg\"},\r\n    {name:\"Guayaquil\",coords:[-79.889754,-2.1553637],\r\n     address:\"Av. Joaqu\u00edn J. Orrantia Gonz\u00e1lez y 1 pasaje 1A NE, Trade Building, torre A, MZ 006\",\r\n     image:\"\/web\/image\/1551-18a6efa4\/2.webp\"},\r\n    {name:\"Loja\",coords:[-79.1980218,-3.993218],\r\n     address:\"Zoilo Rodr\u00edguez y C. Antisana, frente al Hotel Sonesta\",\r\n     image:\"\/web\/image\/1552-91f0c3d7\/3.webp\"},\r\n    {name:\"Cuenca\",coords:[-79.0021985,-2.9085029],\r\n     address:\"Av. Manuel J. Calle 3-91 y Cornelio Merch\u00e1n\",\r\n     video:\"https:\/\/www.youtube.com\/embed\/fsmXvM3hAzA\"},\r\n    {name:\"Ibarra\",coords:[-78.114839,0.339176],\r\n     address:\"Av. Galo Plaza Lasso y Gudi\u00f1o V\u00e1zquez\",\r\n     image:\"\/wp-content\/uploads\/2025\/03\/ibarra.jpg\"},\r\n    {name:\"Manta\",coords:[-80.65445,-0.946852],\r\n     address:\"Av. M1, entre 23 y 24. Edif. Manta Business Center\",\r\n     image:\"\/wp-content\/uploads\/2025\/03\/manta.jpg\"}\r\n  ];\r\n\r\n  \/* ----- 2. Construir acorde\u00f3n ----- *\/\r\n  const acc=document.getElementById('locationsAccordion');\r\n  locations.forEach((loc,i)=>{\r\n    const media = loc.video\r\n      ? `<iframe src=\"${loc.video}\" title=\"${loc.name}\" loading=\"lazy\" allowfullscreen><\/iframe>`\r\n      : `<img decoding=\"async\" src=\"${loc.image}\" alt=\"${loc.name}\" loading=\"lazy\">`;\r\n\r\n    const item=document.createElement('div');item.className='acc-item';\r\n    item.innerHTML=`\r\n      <button class=\"acc-header\" id=\"hdr-${i}\" aria-expanded=\"false\" aria-controls=\"panel-${i}\">\r\n        <span>${loc.name}<\/span><span aria-hidden=\"true\">\u27a4<\/span>\r\n      <\/button>\r\n      <div class=\"acc-panel\" id=\"panel-${i}\" role=\"region\" aria-labelledby=\"hdr-${i}\">\r\n        ${media}\r\n        <p>${loc.address}<\/p>\r\n      <\/div>`;\r\n    acc.appendChild(item);\r\n  });\r\n\r\n  \/* ----- 3. Lazy-load Mapbox ----- *\/\r\n  let mapLoaded=false,map,mapMarkers=[],activePopup=null;\r\n  function loadMap(){\r\n    if(mapLoaded) return;\r\n    mapLoaded=true;\r\n    document.getElementById('staticMap').remove();\r\n\r\n    const css=document.createElement('link');\r\n    css.rel='stylesheet';\r\n    css.href='https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.15.0\/mapbox-gl.css';\r\n    document.head.appendChild(css);\r\n\r\n    const s=document.createElement('script');\r\n    s.src='https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.15.0\/mapbox-gl.js';\r\n    s.async=true;\r\n    s.onload=initMap;\r\n    document.head.appendChild(s);\r\n  }\r\n\r\n  document.getElementById('staticMap').addEventListener('click',loadMap);\r\n\r\n  \/* ----- 4. Inicializar mapa ----- *\/\r\n  function initMap(){\r\n    mapboxgl.accessToken='pk.eyJ1Ijoid3VodWlodWFuZzkwIiwiYSI6ImNqZXA5MXVyNzFkMHQzM3BuZWFibTkxZ3AifQ.ZKLS-x6vqhbyoF5MTF3hAw';\r\n    map=new mapboxgl.Map({\r\n      container:'map-holder',\r\n      style:'mapbox:\/\/styles\/mapbox\/dark-v10?optimize=true',\r\n      center:[-79.5,-1.8312],zoom:6.3,pitch:60,antialias:true\r\n    });\r\n\r\n    locations.forEach((loc,i)=>{\r\n      const m=new mapboxgl.Marker().setLngLat(loc.coords).addTo(map);\r\n      const popup=new mapboxgl.Popup({offset:25}).setHTML(\r\n        `<div class=\"popup-content\"><h3>${loc.name}<\/h3><p>${loc.address}<\/p><\/div>`\r\n      );\r\n      m.setPopup(popup);\r\n      mapMarkers[i]=m;\r\n\r\n      m.getElement().addEventListener('click',evt=>{\r\n        evt.stopPropagation();\r\n        openPanel(i,true);\r\n        showOnlyPopup(i);\r\n      });\r\n    });\r\n  }\r\n\r\n  function showOnlyPopup(idx){\r\n    if(activePopup) activePopup.remove();\r\n    activePopup = mapMarkers[idx].getPopup();\r\n    activePopup.addTo(map);\r\n  }\r\n\r\n  \/* ----- 5. Manejo del acorde\u00f3n ----- *\/\r\n  function openPanel(idx,fromMap=false){\r\n    acc.querySelectorAll('.acc-item').forEach((item,i)=>{\r\n      const panel=item.querySelector('.acc-panel');\r\n      const header=item.querySelector('.acc-header');\r\n      if(i===idx){\r\n        const open=!panel.classList.contains('open');\r\n        panel.classList.toggle('open',open);\r\n        panel.style.maxHeight=open?panel.scrollHeight+'px':0;\r\n        header.setAttribute('aria-expanded',open);\r\n        item.classList.toggle('expanded',open);\r\n\r\n        if(mapLoaded){\r\n          showOnlyPopup(idx);\r\n          if(!fromMap){\r\n            map.flyTo({center:locations[i].coords,zoom:10});\r\n          }\r\n        }\r\n      }else{\r\n        panel.classList.remove('open');\r\n        panel.style.maxHeight=0;\r\n        header.setAttribute('aria-expanded','false');\r\n        item.classList.remove('expanded');\r\n      }\r\n    });\r\n  }\r\n\r\n  acc.addEventListener('click',e=>{\r\n    const btn=e.target.closest('.acc-header');\r\n    if(!btn) return;\r\n    const id=parseInt(btn.id.split('-')[1],10);\r\n    loadMap();\r\n    openPanel(id,false);\r\n\r\n    if(window.innerWidth <= 768){\r\n      setTimeout(()=>document.getElementById('map-holder')\r\n        .scrollIntoView({behavior:'smooth',block:'start'}),100);\r\n    }\r\n  });\r\n})();\r\n<\/script>\r\n\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1539","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/previanza.com\/old2024\/wp-json\/wp\/v2\/pages\/1539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/previanza.com\/old2024\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/previanza.com\/old2024\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/previanza.com\/old2024\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/previanza.com\/old2024\/wp-json\/wp\/v2\/comments?post=1539"}],"version-history":[{"count":14,"href":"https:\/\/previanza.com\/old2024\/wp-json\/wp\/v2\/pages\/1539\/revisions"}],"predecessor-version":[{"id":1660,"href":"https:\/\/previanza.com\/old2024\/wp-json\/wp\/v2\/pages\/1539\/revisions\/1660"}],"wp:attachment":[{"href":"https:\/\/previanza.com\/old2024\/wp-json\/wp\/v2\/media?parent=1539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}