{"id":1066,"date":"2025-10-16T15:24:57","date_gmt":"2025-10-16T15:24:57","guid":{"rendered":"https:\/\/www.putaendo.cl\/portalturismo\/?page_id=1066"},"modified":"2026-07-13T21:05:35","modified_gmt":"2026-07-13T21:05:35","slug":"mapa-turistico-putaendo","status":"publish","type":"page","link":"https:\/\/www.putaendo.cl\/portalturismo\/fiestas-patrias-putaendo-2025\/mapa-turistico-putaendo\/","title":{"rendered":"MAPA TUR\u00cdSTICO PUTAENDO"},"content":{"rendered":"\n

<\/p>\n\n\n\r\n\r\n\r\n\r\n\r\nMapa Interactivo Putaendo<\/title>\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@500;600;700&display=swap');\r\n\r\n :root{\r\n --celeste: #4FA8CE;\r\n --celeste-osc: #2C7A9E;\r\n --celeste-clarito: #EAF6FB;\r\n --blanco: #ffffff;\r\n --tinta: #1c2b33;\r\n --dorado: #f0b429;\r\n }\r\n * { box-sizing: border-box; }\r\n .pta-map-root { font-family: 'Georgia', 'Times New Roman', serif; color: var(--tinta); }\r\n\r\n .pta-thumb-wrap {\r\n position: relative; max-width: 640px; margin: 0 auto; cursor: pointer;\r\n border-radius: 14px; overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(44,122,158,0.35);\r\n border: 3px solid var(--celeste);\r\n }\r\n .pta-thumb-wrap img { display: block; width: 100%; height: auto; }\r\n .pta-thumb-overlay {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(to top, rgba(28,43,51,0.78), rgba(28,43,51,0) 40%);\r\n display: flex; align-items: flex-end; justify-content: center; padding: 18px;\r\n }\r\n .pta-thumb-label {\r\n color: var(--blanco); font-size: 1.05rem; letter-spacing: 0.03em;\r\n text-transform: uppercase; display: flex; align-items: center; gap: 10px;\r\n font-family: 'Poppins', 'Trebuchet MS', sans-serif;\r\n font-weight: 600;\r\n }\r\n .pta-thumb-label svg { width: 20px; height: 20px; }\r\n\r\n .pta-modal {\r\n position: fixed; inset: 0; background: rgba(12, 30, 38, 0.92);\r\n display: none; align-items: center; justify-content: center;\r\n z-index: 999999; padding: 24px;\r\n }\r\n .pta-modal.open { display: flex; }\r\n\r\n .pta-modal-inner {\r\n position: relative; max-width: 96vw; max-height: 92vh;\r\n background: var(--blanco); border-radius: 16px; padding: 10px;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.5);\r\n }\r\n\r\n .pta-map-frame {\r\n position: relative; display: inline-block; line-height: 0;\r\n border-radius: 10px; overflow: hidden;\r\n }\r\n .pta-map-frame img {\r\n max-width: 82vw; max-height: 78vh; display: block;\r\n user-select: none; -webkit-user-drag: none;\r\n }\r\n\r\n .pta-close-bottom {\r\n position: fixed;\r\n left: 50%;\r\n bottom: 22px;\r\n transform: translateX(-50%);\r\n background: var(--celeste);\r\n color: var(--blanco);\r\n border: 4px solid var(--blanco);\r\n border-radius: 40px;\r\n padding: 14px 34px;\r\n font-size: 1.05rem;\r\n font-family: 'Poppins', 'Trebuchet MS', sans-serif;\r\n font-weight: 600;\r\n letter-spacing: 0.03em;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n cursor: pointer;\r\n box-shadow: 0 6px 20px rgba(0,0,0,0.4);\r\n z-index: 1000001;\r\n }\r\n .pta-close-bottom svg { width: 22px; height: 22px; }\r\n\r\n .pta-hotspot {\r\n position: absolute;\r\n width: 70px; height: 70px;\r\n margin-left: -35px; margin-top: -35px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n background: transparent;\r\n border: none;\r\n }\r\n\r\n .pta-info-card {\r\n position: absolute; width: 300px; max-width: 72vw;\r\n background: var(--blanco); border: 3px solid var(--celeste);\r\n border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.45);\r\n z-index: 30;\r\n opacity: 0; transform: scale(0.97);\r\n pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;\r\n }\r\n .pta-info-card.show { opacity: 1; transform: scale(1); pointer-events: auto; }\r\n\r\n .pta-info-card-inner { overflow: hidden; border-radius: 9px; }\r\n .pta-info-card img { width: 100%; height: 165px; object-fit: cover; display: block; }\r\n .pta-info-card .pta-info-body {\r\n padding: 10px 12px 12px; background: var(--celeste-clarito); text-align:center;\r\n }\r\n .pta-info-card h4 {\r\n margin: 0;\r\n font-size: 0.92rem;\r\n line-height: 1.3;\r\n color: var(--celeste-osc);\r\n font-family: 'Poppins', 'Trebuchet MS', sans-serif;\r\n font-weight: 600;\r\n white-space: normal;\r\n word-break: normal;\r\n overflow-wrap: break-word;\r\n }\r\n .pta-info-timer { height: 4px; background: var(--dorado); width: 100%; transform-origin: left; }\r\n .pta-info-timer.run { animation: pta-countdown linear forwards; }\r\n @keyframes pta-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }\r\n\r\n .pta-tail {\r\n position: absolute;\r\n width: 18px; height: 18px;\r\n background: var(--blanco);\r\n border: 3px solid var(--celeste);\r\n transform: rotate(45deg);\r\n }\r\n .pta-tail.abajo { top: -10px; border-right: none; border-bottom: none; }\r\n .pta-tail.arriba { bottom: -10px; border-left: none; border-top: none; }\r\n\r\n .pta-nav {\r\n position: fixed;\r\n left: 18px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n z-index: 1000001;\r\n background: rgba(255,255,255,0.92);\r\n border: 3px solid var(--celeste);\r\n border-radius: 20px;\r\n padding: 16px 10px;\r\n box-shadow: 0 8px 24px rgba(0,0,0,0.35);\r\n max-width: 90px;\r\n }\r\n .pta-nav-btn {\r\n width: 56px; height: 56px;\r\n border-radius: 50%;\r\n background: var(--celeste);\r\n color: var(--blanco);\r\n border: none;\r\n display: flex; align-items: center; justify-content: center;\r\n cursor: pointer;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\r\n flex-shrink: 0;\r\n }\r\n .pta-nav-btn svg { width: 26px; height: 26px; }\r\n .pta-nav-btn:active { transform: scale(0.92); }\r\n .pta-nav-label {\r\n font-family: 'Poppins', 'Trebuchet MS', sans-serif;\r\n font-weight: 600;\r\n color: var(--celeste-osc);\r\n font-size: 0.78rem;\r\n text-align: center;\r\n line-height: 1.25;\r\n }\r\n\r\n body.pta-modal-open #back-to-top,\r\n body.pta-modal-open #et_pb_scroll_top,\r\n body.pta-modal-open .et_pb_scroll_top,\r\n body.pta-modal-open [class*=\"scroll-top\"],\r\n body.pta-modal-open [class*=\"back-to-top\"],\r\n body.pta-modal-open [id*=\"scroll-top\"],\r\n body.pta-modal-open [id*=\"back-to-top\"] {\r\n display: none !important;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"pta-map-root\">\r\n\r\n <div class=\"pta-thumb-wrap\" id=\"ptaOpenBtn\">\r\n <img decoding=\"async\" src=\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/MAPA-PUTAENDO-OFICIAL-2025-3-scaled.png\" alt=\"Mapa Tur\u00edstico Putaendo\">\r\n <div class=\"pta-thumb-overlay\">\r\n <div class=\"pta-thumb-label\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4M12 8h.01\"\/><\/svg>\r\n Toca para explorar el mapa\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pta-modal\" id=\"ptaModal\">\r\n\r\n <div class=\"pta-nav\">\r\n <button class=\"pta-nav-btn\" id=\"ptaPrev\" aria-label=\"Punto anterior\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\r\n <\/button>\r\n <div class=\"pta-nav-label\">Toca para<br>ver m\u00e1s<\/div>\r\n <button class=\"pta-nav-btn\" id=\"ptaNext\" aria-label=\"Punto siguiente\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"pta-modal-inner\">\r\n <div class=\"pta-map-frame\" id=\"ptaFrame\">\r\n <img decoding=\"async\" src=\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/MAPA-PUTAENDO-OFICIAL-2025-3-scaled.png\" alt=\"Mapa Tur\u00edstico Putaendo\" id=\"ptaMapImg\">\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"pta-close-bottom\" id=\"ptaCloseBtn\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M6 6l12 12M18 6L6 18\"\/><\/svg>\r\n CERRAR\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n\r\n const HOTSPOTS = [\r\n { x:82.2, y:68.9, titulo:\"Calle Comercio\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2023\/09\/FotoHorizontal_0003_PUTAENDO-17.jpg.jpg\" },\r\n { x:87.9, y:57.4, titulo:\"Iglesia San Antonio de Padua\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/06\/A-patitas-por-Putaendo.jpg\" },\r\n { x:64.6, y:23.0, titulo:\"Justo Estay\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2023\/08\/Arriero-Justo-Estay-scaled.jpg\" },\r\n { x:72.7, y:60.1, titulo:\"Escultura de la Temporera\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/Inauguracion-Temporera-2-1024x742-1.jpg\" },\r\n { x:83.2, y:75.9, titulo:\"Centro Cultural Bernardo Parra\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/06\/CCP.jpg\" },\r\n { x:41.1, y:44.1, titulo:\"Capilla Lo Vicu\u00f1a\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/06\/IMG_1020-scaled.jpg\" },\r\n { x:82.5, y:15.9, titulo:\"Embalse Chacrillas\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/06\/Embalse-Chacrillas.jpg\" },\r\n { x:71.0, y:53.6, titulo:\"Puente Cimbra\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/Puente-Cimbra-scaled.jpg\" },\r\n { x:71.8, y:7.6, titulo:\"Corrales del Chalaco\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/06\/Corrales-del-Chalaco.jpg\" },\r\n { x:93.2, y:40.7, titulo:\"Cementerio Parque de Carretas\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/06\/Cementerio-Parque-de-Carretas.jpg\" },\r\n { x:48.5, y:70.9, titulo:\"Cristo de Rinconada de Silva\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/CRISTO-RINCONADA-DE-SILVA.jpg\" },\r\n { x:52.9, y:4.5, titulo:\"Gato Andino\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/GATO-ANDINO.jpeg\" },\r\n { x:92.9, y:10.7, titulo:\"Arboleda de Quillay\",\r\n imagen:\"http:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/ARBOLEDA-DE-QUILLAY.jpg\" }\r\n ];\r\n\r\n const SEGUNDOS_AUTO_CIERRE = 4;\r\n const MARGEN = 14;\r\n\r\n const openBtn = document.getElementById('ptaOpenBtn');\r\n const modal = document.getElementById('ptaModal');\r\n const closeBtn = document.getElementById('ptaCloseBtn');\r\n const frame = document.getElementById('ptaFrame');\r\n const prevBtn = document.getElementById('ptaPrev');\r\n const nextBtn = document.getElementById('ptaNext');\r\n\r\n let activeCard = null;\r\n let autoCloseTimeout = null;\r\n let currentIndex = -1;\r\n let dots = [];\r\n\r\n openBtn.addEventListener('click', () => {\r\n modal.classList.add('open');\r\n document.body.classList.add('pta-modal-open');\r\n currentIndex = -1;\r\n });\r\n\r\n closeBtn.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n modal.classList.remove('open');\r\n document.body.classList.remove('pta-modal-open');\r\n clearCardOnly();\r\n currentIndex = -1;\r\n });\r\n\r\n function clearCardOnly(){\r\n clearTimeout(autoCloseTimeout);\r\n if (activeCard) { activeCard.remove(); activeCard = null; }\r\n }\r\n\r\n function buildHotspots(){\r\n HOTSPOTS.forEach((spot, i) => {\r\n const dot = document.createElement('div');\r\n dot.className = 'pta-hotspot';\r\n dot.style.left = spot.x + '%';\r\n dot.style.top = spot.y + '%';\r\n dot.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n currentIndex = i;\r\n openCard(currentIndex);\r\n });\r\n frame.appendChild(dot);\r\n dots.push(dot);\r\n });\r\n }\r\n\r\n function posicionarTarjeta(card, tail, spot){\r\n const frameW = frame.clientWidth;\r\n const frameH = frame.clientHeight;\r\n const pxX = (spot.x \/ 100) * frameW;\r\n const pxY = (spot.y \/ 100) * frameH;\r\n\r\n const cardW = card.offsetWidth;\r\n const cardH = card.offsetHeight;\r\n\r\n let arriba = false;\r\n let top;\r\n if (pxY + MARGEN + cardH > frameH - 6) {\r\n arriba = true;\r\n top = pxY - MARGEN - cardH;\r\n if (top < 6) top = 6;\r\n } else {\r\n top = pxY + MARGEN;\r\n }\r\n\r\n let left = pxX - cardW \/ 2;\r\n left = Math.max(6, Math.min(left, frameW - cardW - 6));\r\n\r\n card.style.left = left + 'px';\r\n card.style.top = top + 'px';\r\n\r\n let tailLeft = pxX - left;\r\n tailLeft = Math.max(16, Math.min(tailLeft, cardW - 16));\r\n tail.style.left = (tailLeft - 9) + 'px';\r\n tail.className = 'pta-tail ' + (arriba ? 'arriba' : 'abajo');\r\n }\r\n\r\n function openCard(index){\r\n clearTimeout(autoCloseTimeout);\r\n if (activeCard) activeCard.remove();\r\n\r\n const spot = HOTSPOTS[index];\r\n\r\n const card = document.createElement('div');\r\n card.className = 'pta-info-card';\r\n\r\n card.innerHTML = `\r\n <div class=\"pta-tail\"><\/div>\r\n <div class=\"pta-info-card-inner\">\r\n <div class=\"pta-info-timer\" id=\"ptaTimer\"><\/div>\r\n <img decoding=\"async\" src=\"${spot.imagen}\" alt=\"${spot.titulo}\">\r\n <div class=\"pta-info-body\">\r\n <h4>${spot.titulo}<\/h4>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n frame.appendChild(card);\r\n activeCard = card;\r\n\r\n const tail = card.querySelector('.pta-tail');\r\n posicionarTarjeta(card, tail, spot);\r\n\r\n void card.offsetWidth;\r\n card.classList.add('show');\r\n\r\n const timer = card.querySelector('#ptaTimer');\r\n timer.style.animationDuration = SEGUNDOS_AUTO_CIERRE + 's';\r\n void timer.offsetWidth;\r\n timer.classList.add('run');\r\n\r\n autoCloseTimeout = setTimeout(() => {\r\n if (activeCard === card) {\r\n card.classList.remove('show');\r\n setTimeout(() => { if (activeCard === card) { card.remove(); activeCard = null; } }, 200);\r\n }\r\n }, SEGUNDOS_AUTO_CIERRE * 1000);\r\n }\r\n\r\n modal.addEventListener('click', (e) => {\r\n if (!activeCard) return;\r\n const dentroDeLaTarjeta = e.target.closest('.pta-info-card');\r\n const esUnPunto = e.target.closest('.pta-hotspot');\r\n if (!dentroDeLaTarjeta && !esUnPunto) {\r\n clearCardOnly();\r\n }\r\n });\r\n\r\n nextBtn.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n currentIndex++;\r\n if (currentIndex >= HOTSPOTS.length) {\r\n currentIndex = -1;\r\n clearCardOnly();\r\n return;\r\n }\r\n openCard(currentIndex);\r\n });\r\n\r\n prevBtn.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n if (currentIndex === -1) {\r\n currentIndex = HOTSPOTS.length - 1;\r\n openCard(currentIndex);\r\n return;\r\n }\r\n currentIndex--;\r\n if (currentIndex < 0) {\r\n currentIndex = -1;\r\n clearCardOnly();\r\n return;\r\n }\r\n openCard(currentIndex);\r\n });\r\n\r\n buildHotspots();\r\n\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/01.-MAPA-INCLUSIVO_HORZ_rev3-scaled.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" src=\"https:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/01.-MAPA-INCLUSIVO_HORZ_rev3-1024x723.png\" alt=\"\" class=\"wp-image-1474\" srcset=\"https:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/01.-MAPA-INCLUSIVO_HORZ_rev3-1024x723.png 1024w, https:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/01.-MAPA-INCLUSIVO_HORZ_rev3-300x212.png 300w, https:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/01.-MAPA-INCLUSIVO_HORZ_rev3-768x542.png 768w, https:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/01.-MAPA-INCLUSIVO_HORZ_rev3-1536x1085.png 1536w, https:\/\/www.putaendo.cl\/portalturismo\/wp-content\/uploads\/2026\/07\/01.-MAPA-INCLUSIVO_HORZ_rev3-2048x1447.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":1004,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1066","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.putaendo.cl\/portalturismo\/wp-json\/wp\/v2\/pages\/1066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.putaendo.cl\/portalturismo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.putaendo.cl\/portalturismo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.putaendo.cl\/portalturismo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.putaendo.cl\/portalturismo\/wp-json\/wp\/v2\/comments?post=1066"}],"version-history":[{"count":23,"href":"https:\/\/www.putaendo.cl\/portalturismo\/wp-json\/wp\/v2\/pages\/1066\/revisions"}],"predecessor-version":[{"id":1522,"href":"https:\/\/www.putaendo.cl\/portalturismo\/wp-json\/wp\/v2\/pages\/1066\/revisions\/1522"}],"up":[{"embeddable":true,"href":"https:\/\/www.putaendo.cl\/portalturismo\/wp-json\/wp\/v2\/pages\/1004"}],"wp:attachment":[{"href":"https:\/\/www.putaendo.cl\/portalturismo\/wp-json\/wp\/v2\/media?parent=1066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}