{"id":3505,"date":"2026-03-03T11:33:17","date_gmt":"2026-03-03T16:33:17","guid":{"rendered":"https:\/\/incajungletrail.com\/?page_id=3505"},"modified":"2026-03-05T17:34:04","modified_gmt":"2026-03-05T22:34:04","slug":"mapa","status":"publish","type":"page","link":"https:\/\/incajungletrail.com\/en\/mapa\/","title":{"rendered":"MAP"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3505\" class=\"elementor elementor-3505\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af57910 e-flex e-con-boxed e-con e-parent\" data-id=\"af57910\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-765980a elementor-widget elementor-widget-html\" data-id=\"765980a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u2705 MAPA INTERACTIVO PRO (Elementor HTML Widget) -->\r\n<div class=\"ijt-map\" id=\"ijtMap\">\r\n  <!-- Top bar -->\r\n  <div class=\"ijt-topbar\">\r\n    <div class=\"ijt-title\">\r\n      <strong>Inca Jungle Trail<\/strong>\r\n      <span>Mapa interactivo<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"ijt-controls\">\r\n      <button type=\"button\" class=\"ijt-btn\" data-action=\"zoomIn\" aria-label=\"Zoom in\">\uff0b<\/button>\r\n      <button type=\"button\" class=\"ijt-btn\" data-action=\"zoomOut\" aria-label=\"Zoom out\">\uff0d<\/button>\r\n      <button type=\"button\" class=\"ijt-btn\" data-action=\"reset\" aria-label=\"Reset\">Reset<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"ijt-filters\" role=\"group\" aria-label=\"Filtrar por d\u00eda\">\r\n      <button type=\"button\" class=\"ijt-chip is-active\" data-day=\"all\">Todo<\/button>\r\n      <button type=\"button\" class=\"ijt-chip\" data-day=\"1\">D\u00eda 1<\/button>\r\n      <button type=\"button\" class=\"ijt-chip\" data-day=\"2\">D\u00eda 2<\/button>\r\n      <button type=\"button\" class=\"ijt-chip\" data-day=\"3\">D\u00eda 3<\/button>\r\n      <button type=\"button\" class=\"ijt-chip\" data-day=\"4\">D\u00eda 4<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Stage -->\r\n  <div class=\"ijt-stage\" aria-label=\"Mapa interactivo\">\r\n    <div class=\"ijt-viewport\" id=\"ijtViewport\">\r\n      <!-- \ud83d\udd01 CAMBIA ESTA IMAGEN POR TU MAPA -->\r\n      <img decoding=\"async\"\r\n        class=\"ijt-mapimg\"\r\n        src=\"https:\/\/incajungletrail.com\/wp-content\/uploads\/2026\/03\/Diseno-sin-titulo-2.png\"\r\n        alt=\"Mapa Inca Jungle Trail\"\r\n        draggable=\"false\"\r\n      \/>\r\n\r\n      <!-- Markers (se insertan por JS) -->\r\n      <div class=\"ijt-markers\" id=\"ijtMarkers\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Tooltip -->\r\n    <div class=\"ijt-tooltip\" id=\"ijtTooltip\" role=\"tooltip\" aria-hidden=\"true\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Modal -->\r\n  <div class=\"ijt-modal\" id=\"ijtModal\" aria-hidden=\"true\">\r\n    <div class=\"ijt-modal__backdrop\" data-close=\"true\"><\/div>\r\n    <div class=\"ijt-modal__card\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"ijtModalTitle\">\r\n      <button class=\"ijt-modal__close\" type=\"button\" data-close=\"true\" aria-label=\"Cerrar\">\u2715<\/button>\r\n      <h3 id=\"ijtModalTitle\" class=\"ijt-modal__title\">T\u00edtulo<\/h3>\r\n      <div class=\"ijt-modal__meta\" id=\"ijtModalMeta\"><\/div>\r\n      <div class=\"ijt-modal__body\" id=\"ijtModalBody\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  \/* ========= Base ========= *\/\r\n  .ijt-map{\r\n    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    background: #0b1220;\r\n    border: 1px solid rgba(255,255,255,.08);\r\n    box-shadow: 0 18px 60px rgba(0,0,0,.35);\r\n  }\r\n  .ijt-topbar{\r\n    display:flex;\r\n    gap:12px;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n    padding:12px 12px;\r\n    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));\r\n    border-bottom: 1px solid rgba(255,255,255,.08);\r\n    flex-wrap:wrap;\r\n  }\r\n  .ijt-title{\r\n    display:flex; flex-direction:column; line-height:1.1;\r\n    color:#fff;\r\n  }\r\n  .ijt-title span{ opacity:.75; font-size:12px; }\r\n\r\n  .ijt-controls{ display:flex; gap:8px; }\r\n  .ijt-btn{\r\n    appearance:none; border:0;\r\n    padding:8px 10px;\r\n    border-radius:12px;\r\n    background: rgba(255,255,255,.10);\r\n    color:#fff;\r\n    cursor:pointer;\r\n    transition: transform .12s ease, background .12s ease;\r\n    font-weight:700;\r\n  }\r\n  .ijt-btn:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); }\r\n\r\n  .ijt-filters{ display:flex; gap:8px; flex-wrap:wrap; }\r\n  .ijt-chip{\r\n    appearance:none; border:0;\r\n    padding:7px 10px;\r\n    border-radius:999px;\r\n    background: rgba(255,255,255,.08);\r\n    color:#fff;\r\n    cursor:pointer;\r\n    font-size:12px;\r\n    transition: background .12s ease, transform .12s ease;\r\n    white-space:nowrap;\r\n  }\r\n  .ijt-chip:hover{ background: rgba(255,255,255,.14); transform: translateY(-1px); }\r\n  .ijt-chip.is-active{\r\n    background: rgba(99, 102, 241, .35);\r\n    border: 1px solid rgba(99, 102, 241, .55);\r\n  }\r\n\r\n  \/* ========= Stage ========= *\/\r\n  .ijt-stage{\r\n  position:relative;\r\n  width:100%;\r\n  height: 800px;   \/* AQUI AUMENTAS LA ALTURA *\/\r\n  background:#0b1220;\r\n  user-select:none;\r\n  touch-action:none;\r\n}\r\n  .ijt-viewport{\r\n    position:absolute;\r\n    inset:0;\r\n    transform-origin: 50% 50%;\r\n    cursor: grab;\r\n  }\r\n  .ijt-viewport:active{ cursor: grabbing; }\r\n\r\n  .ijt-mapimg{\r\n    width:100%;\r\n    height:100%;\r\n    object-fit: contain; \/* si tu mapa ya viene con fondo *\/\r\n    display:block;\r\n    pointer-events:none;\r\n  }\r\n  .ijt-markers{\r\n    position:absolute; inset:0;\r\n  }\r\n\r\n  \/* ========= Marker ========= *\/\r\n  .ijt-marker{\r\n    position:absolute;\r\n    transform: translate(-50%, -100%);\r\n    display:flex;\r\n    align-items:center;\r\n    gap:8px;\r\n    cursor:pointer;\r\n  }\r\n  .ijt-pin{\r\n    width:14px; height:14px;\r\n    background:#ef4444;\r\n    border-radius:999px;\r\n    border:2px solid #fff;\r\n    box-shadow: 0 10px 24px rgba(239,68,68,.35);\r\n    position:relative;\r\n  }\r\n  .ijt-pin::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    left:50%; top:50%;\r\n    transform: translate(-50%,-50%);\r\n    width:34px; height:34px;\r\n    border-radius:999px;\r\n    background: rgba(239,68,68,.18);\r\n    animation: ijtPulse 1.8s infinite ease-out;\r\n  }\r\n  @keyframes ijtPulse{\r\n    0%{ transform: translate(-50%,-50%) scale(.35); opacity: .9; }\r\n    100%{ transform: translate(-50%,-50%) scale(1.1); opacity: 0; }\r\n  }\r\n\r\n  .ijt-label{\r\n    font-size:12px;\r\n    color:#fff;\r\n    background: rgba(0,0,0,.55);\r\n    border: 1px solid rgba(255,255,255,.12);\r\n    padding:6px 8px;\r\n    border-radius: 999px;\r\n    backdrop-filter: blur(6px);\r\n    box-shadow: 0 12px 40px rgba(0,0,0,.25);\r\n    max-width: 180px;\r\n    white-space:nowrap;\r\n    overflow:hidden;\r\n    text-overflow:ellipsis;\r\n  }\r\n\r\n  \/* ========= Tooltip ========= *\/\r\n  .ijt-tooltip{\r\n    position:absolute;\r\n    z-index:50;\r\n    padding:8px 10px;\r\n    border-radius:12px;\r\n    background: rgba(0,0,0,.75);\r\n    color:#fff;\r\n    font-size:12px;\r\n    border: 1px solid rgba(255,255,255,.12);\r\n    backdrop-filter: blur(6px);\r\n    transform: translate(-50%, calc(-100% - 10px));\r\n    pointer-events:none;\r\n    opacity:0;\r\n    transition: opacity .12s ease;\r\n  }\r\n  .ijt-tooltip.is-on{ opacity:1; }\r\n\r\n  \/* ========= Modal ========= *\/\r\n  .ijt-modal{\r\n    position:fixed;\r\n    inset:0;\r\n    z-index:999999;\r\n    display:none;\r\n  }\r\n  .ijt-modal.is-open{ display:block; }\r\n  .ijt-modal__backdrop{\r\n    position:absolute; inset:0;\r\n    background: rgba(0,0,0,.6);\r\n  }\r\n  .ijt-modal__card{\r\n    position:absolute;\r\n    left:50%; top:50%;\r\n    transform: translate(-50%,-50%);\r\n    width:min(620px, calc(100% - 24px));\r\n    background: rgba(15, 23, 42, .96);\r\n    border: 1px solid rgba(255,255,255,.10);\r\n    border-radius: 18px;\r\n    padding: 16px;\r\n    color:#fff;\r\n    box-shadow: 0 30px 90px rgba(0,0,0,.55);\r\n  }\r\n  .ijt-modal__close{\r\n    position:absolute;\r\n    right:12px; top:10px;\r\n    appearance:none; border:0;\r\n    background: rgba(255,255,255,.10);\r\n    color:#fff;\r\n    width:36px; height:36px;\r\n    border-radius:12px;\r\n    cursor:pointer;\r\n  }\r\n  .ijt-modal__title{ margin:0 40px 6px 0; font-size:18px; }\r\n  .ijt-modal__meta{ opacity:.8; font-size:13px; margin-bottom:10px; }\r\n  .ijt-modal__body{ font-size:14px; line-height:1.5; }\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const root = document.getElementById(\"ijtMap\");\r\n  const viewport = document.getElementById(\"ijtViewport\");\r\n  const markersEl = document.getElementById(\"ijtMarkers\");\r\n  const tooltip = document.getElementById(\"ijtTooltip\");\r\n\r\n  const modal = document.getElementById(\"ijtModal\");\r\n  const modalTitle = document.getElementById(\"ijtModalTitle\");\r\n  const modalMeta  = document.getElementById(\"ijtModalMeta\");\r\n  const modalBody  = document.getElementById(\"ijtModalBody\");\r\n\r\n  \/\/ \u2705 EDITA AQU\u00cd: puntos del mapa (x,y en porcentaje sobre la imagen)\r\n  \/\/ Tip: para mover un punto, cambia x\/y (0\u2013100)\r\n  const stops = [\r\n    { id:\"cusco\",       name:\"Cusco\",            day:1, x: 16, y: 37, meta:\"Inicio\", desc:\"Recojo y salida hacia el Valle Sagrado.\" },\r\n    { id:\"pisaq\",       name:\"Pisaq\",            day:1, x: 14, y: 53, meta:\"Parada\", desc:\"Parada panor\u00e1mica \/ ruta hacia Ollantaytambo.\" },\r\n    { id:\"ollanta\",     name:\"Ollantaytambo\",    day:1, x: 35, y: 50, meta:\"Ruta\", desc:\"Conexi\u00f3n principal del Valle Sagrado.\" },\r\n    { id:\"abra\",        name:\"Abra M\u00e1laga\",      day:1, x: 45, y: 61, meta:\"4,316 m\", desc:\"Punto alto del tour. Inicio del biking.\" },\r\n    { id:\"santamaria\",  name:\"Santa Mar\u00eda\",      day:1, x: 78, y: 92, meta:\"Noche 1\", desc:\"Llegada y descanso. Actividades opcionales.\" },\r\n    { id:\"santateresa\", name:\"Santa Teresa\",     day:2, x: 89, y: 54, meta:\"Hot Springs\", desc:\"Aguas termales. Noche 2.\" },\r\n    { id:\"aguas\",       name:\"Aguas Calientes\",  day:3, x: 68, y: 50, meta:\"Pueblo base\", desc:\"Camino hacia Machu Picchu. Noche 3.\" },\r\n    { id:\"machu\",       name:\"Machu Picchu\",     day:4, x: 76, y: 41, meta:\"2,430 m\", desc:\"Visita guiada y tiempo libre.\" },\r\n  ];\r\n\r\n  \/\/ ========= Render markers =========\r\n  function renderMarkers(day=\"all\"){\r\n    markersEl.innerHTML = \"\";\r\n    const list = (day === \"all\") ? stops : stops.filter(s => String(s.day) === String(day));\r\n    list.forEach(s => {\r\n      const m = document.createElement(\"button\");\r\n      m.type = \"button\";\r\n      m.className = \"ijt-marker\";\r\n      m.style.left = s.x + \"%\";\r\n      m.style.top  = s.y + \"%\";\r\n      m.setAttribute(\"aria-label\", s.name);\r\n\r\n      m.innerHTML = `\r\n        <span class=\"ijt-pin\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"ijt-label\">${s.name}<\/span>\r\n      `;\r\n\r\n      \/\/ Tooltip\r\n      m.addEventListener(\"mouseenter\", (e)=> showTooltip(e, s));\r\n      m.addEventListener(\"mousemove\",  (e)=> moveTooltip(e));\r\n      m.addEventListener(\"mouseleave\", hideTooltip);\r\n\r\n      \/\/ Mobile tooltip\r\n      m.addEventListener(\"touchstart\", (e)=>{\r\n        e.preventDefault();\r\n        showTooltip(e.touches[0], s);\r\n      }, {passive:false});\r\n\r\n      \/\/ Modal\r\n      m.addEventListener(\"click\", ()=>{\r\n        openModal(s);\r\n      });\r\n\r\n      markersEl.appendChild(m);\r\n    });\r\n  }\r\n\r\n  function showTooltip(evt, s){\r\n    tooltip.textContent = `D\u00eda ${s.day} \u00b7 ${s.name}`;\r\n    tooltip.classList.add(\"is-on\");\r\n    tooltip.setAttribute(\"aria-hidden\",\"false\");\r\n    moveTooltip(evt);\r\n  }\r\n  function moveTooltip(evt){\r\n    const rect = root.querySelector(\".ijt-stage\").getBoundingClientRect();\r\n    const x = evt.clientX - rect.left;\r\n    const y = evt.clientY - rect.top;\r\n    tooltip.style.left = x + \"px\";\r\n    tooltip.style.top  = y + \"px\";\r\n  }\r\n  function hideTooltip(){\r\n    tooltip.classList.remove(\"is-on\");\r\n    tooltip.setAttribute(\"aria-hidden\",\"true\");\r\n  }\r\n\r\n  \/\/ ========= Modal =========\r\n  function openModal(s){\r\n    modalTitle.textContent = s.name;\r\n    modalMeta.textContent  = `D\u00eda ${s.day} \u00b7 ${s.meta || \"\"}`.trim();\r\n    modalBody.textContent  = s.desc || \"\";\r\n    modal.classList.add(\"is-open\");\r\n    modal.setAttribute(\"aria-hidden\",\"false\");\r\n  }\r\n  function closeModal(){\r\n    modal.classList.remove(\"is-open\");\r\n    modal.setAttribute(\"aria-hidden\",\"true\");\r\n  }\r\n  modal.addEventListener(\"click\", (e)=>{\r\n    if(e.target && e.target.dataset && e.target.dataset.close) closeModal();\r\n  });\r\n  document.addEventListener(\"keydown\", (e)=>{\r\n    if(e.key === \"Escape\") closeModal();\r\n  });\r\n\r\n  \/\/ ========= Zoom + Pan =========\r\n  let scale = 1;\r\n  let tx = 0, ty = 0;\r\n  let dragging = false;\r\n  let startX = 0, startY = 0;\r\n\r\n  function applyTransform(){\r\n    viewport.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;\r\n  }\r\n  function clamp(v, min, max){ return Math.max(min, Math.min(max, v)); }\r\n\r\n  \/\/ Buttons\r\n  root.querySelectorAll(\"[data-action]\").forEach(btn=>{\r\n    btn.addEventListener(\"click\", ()=>{\r\n      const a = btn.dataset.action;\r\n      if(a===\"zoomIn\")  scale = clamp(scale + 0.15, 1, 3);\r\n      if(a===\"zoomOut\") scale = clamp(scale - 0.15, 1, 3);\r\n      if(a===\"reset\"){ scale = 1; tx = 0; ty = 0; }\r\n      applyTransform();\r\n    });\r\n  });\r\n\r\n  \/\/ Drag\r\n  viewport.addEventListener(\"mousedown\", (e)=>{\r\n    dragging = true;\r\n    startX = e.clientX - tx;\r\n    startY = e.clientY - ty;\r\n  });\r\n  window.addEventListener(\"mousemove\", (e)=>{\r\n    if(!dragging) return;\r\n    tx = e.clientX - startX;\r\n    ty = e.clientY - startY;\r\n    applyTransform();\r\n  });\r\n  window.addEventListener(\"mouseup\", ()=> dragging = false);\r\n\r\n  \/\/ Wheel zoom (Ctrl optional)\r\n  root.querySelector(\".ijt-stage\").addEventListener(\"wheel\", (e)=>{\r\n    e.preventDefault();\r\n    const delta = Math.sign(e.deltaY);\r\n    scale = clamp(scale + (delta > 0 ? -0.10 : 0.10), 1, 3);\r\n    applyTransform();\r\n  }, {passive:false});\r\n\r\n  \/\/ Touch pan (1 finger)\r\n  let lastTouch = null;\r\n  viewport.addEventListener(\"touchstart\", (e)=>{\r\n    if(e.touches.length === 1){\r\n      lastTouch = { x: e.touches[0].clientX, y: e.touches[0].clientY };\r\n    }\r\n  }, {passive:true});\r\n  viewport.addEventListener(\"touchmove\", (e)=>{\r\n    if(e.touches.length === 1 && lastTouch){\r\n      const nx = e.touches[0].clientX, ny = e.touches[0].clientY;\r\n      tx += (nx - lastTouch.x);\r\n      ty += (ny - lastTouch.y);\r\n      lastTouch = { x:nx, y:ny };\r\n      applyTransform();\r\n    }\r\n  }, {passive:true});\r\n  viewport.addEventListener(\"touchend\", ()=> lastTouch = null);\r\n\r\n  \/\/ ========= Filters =========\r\n  root.querySelectorAll(\".ijt-chip\").forEach(chip=>{\r\n    chip.addEventListener(\"click\", ()=>{\r\n      root.querySelectorAll(\".ijt-chip\").forEach(c=> c.classList.remove(\"is-active\"));\r\n      chip.classList.add(\"is-active\");\r\n      renderMarkers(chip.dataset.day);\r\n    });\r\n  });\r\n\r\n  \/\/ Init\r\n  renderMarkers(\"all\");\r\n  applyTransform();\r\n})();\r\n<\/script>\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>Inca Jungle Trail Mapa interactivo \uff0b \uff0d Reset Todo D\u00eda 1 D\u00eda 2 D\u00eda 3 D\u00eda 4 \u2715 T\u00edtulo<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-3505","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/incajungletrail.com\/en\/wp-json\/wp\/v2\/pages\/3505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/incajungletrail.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/incajungletrail.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/incajungletrail.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/incajungletrail.com\/en\/wp-json\/wp\/v2\/comments?post=3505"}],"version-history":[{"count":28,"href":"https:\/\/incajungletrail.com\/en\/wp-json\/wp\/v2\/pages\/3505\/revisions"}],"predecessor-version":[{"id":4373,"href":"https:\/\/incajungletrail.com\/en\/wp-json\/wp\/v2\/pages\/3505\/revisions\/4373"}],"wp:attachment":[{"href":"https:\/\/incajungletrail.com\/en\/wp-json\/wp\/v2\/media?parent=3505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}