{"id":1374,"date":"2026-05-08T18:12:21","date_gmt":"2026-05-08T23:12:21","guid":{"rendered":"https:\/\/cafeocampos.com\/?page_id=1374"},"modified":"2026-08-25T13:59:48","modified_gmt":"2026-08-25T18:59:48","slug":"experiencias-ocampos-habitaciones-360","status":"publish","type":"page","link":"https:\/\/cafeocampos.com\/en\/experiencias-ocampos-habitaciones-360\/","title":{"rendered":"Experiencias Ocampos – Habitaciones 360"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nCaf\u00e9 Ocampos \u00b7 Habitaciones 360\u00b0<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;600;700;900&display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n<style>\r\n :root {\r\n --cream: #fff9f1;\r\n --wine: #951638;\r\n --wine-dark: #6e0f28;\r\n --gold: #c9a84c;\r\n --black: #1a1a1a;\r\n --gray: #555555;\r\n --font: 'Montserrat', sans-serif;\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n body {\r\n font-family: var(--font);\r\n background-color: var(--cream);\r\n color: var(--black);\r\n min-height: 100vh;\r\n position: relative;\r\n overflow-x: hidden;\r\n }\r\n\r\n body::before {\r\n content: '';\r\n position: fixed;\r\n inset: 0;\r\n background: url('https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/02\/FONDO-CAFE-OCAMPOS.jpg') center\/cover no-repeat;\r\n opacity: .20;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n \/* \u2500\u2500 HEADER \u2500\u2500 *\/\r\n header {\r\n position: relative;\r\n z-index: 10;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 36px 24px 24px;\r\n border-bottom: 1px solid rgba(149,22,56,.15);\r\n background: rgba(255,249,241,.92);\r\n backdrop-filter: blur(6px);\r\n }\r\n header img.logo {\r\n width: 60px; height: 60px;\r\n object-fit: contain;\r\n margin-bottom: 10px;\r\n filter: drop-shadow(0 2px 6px rgba(149,22,56,.3));\r\n }\r\n header h1 {\r\n font-size: clamp(1.1rem, 3vw, 1.8rem);\r\n font-weight: 900;\r\n letter-spacing: .12em;\r\n text-transform: uppercase;\r\n color: var(--wine);\r\n text-align: center;\r\n }\r\n header p.sub {\r\n font-size: .72rem;\r\n font-weight: 400;\r\n letter-spacing: .22em;\r\n text-transform: uppercase;\r\n color: var(--gray);\r\n margin-top: 5px;\r\n }\r\n .gold-line {\r\n width: 80px; height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\r\n margin: 12px auto 0;\r\n }\r\n\r\n \/* \u2500\u2500 SELECTOR WRAP \u2500\u2500 *\/\r\n .selector-wrap {\r\n position: relative;\r\n z-index: 10;\r\n padding: 24px 24px 0;\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n }\r\n .selector-label {\r\n font-size: .65rem;\r\n font-weight: 700;\r\n letter-spacing: .25em;\r\n text-transform: uppercase;\r\n color: var(--wine);\r\n margin-bottom: 12px;\r\n }\r\n\r\n \/* \u2500\u2500 DESKTOP: botones en fila \u2500\u2500 *\/\r\n .rooms-grid {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n .room-btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 18px;\r\n border: 1.5px solid rgba(149,22,56,.25);\r\n border-radius: 4px;\r\n background: rgba(255,249,241,.9);\r\n cursor: pointer;\r\n font-family: var(--font);\r\n font-size: .75rem;\r\n font-weight: 600;\r\n letter-spacing: .1em;\r\n text-transform: uppercase;\r\n color: var(--gray);\r\n transition: all .25s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .room-btn::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: var(--wine);\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform .3s ease;\r\n z-index: 0;\r\n }\r\n .room-btn span { position: relative; z-index: 1; }\r\n .room-btn:hover::before,\r\n .room-btn.active::before { transform: scaleX(1); }\r\n .room-btn:hover,\r\n .room-btn.active { color: #fff; border-color: var(--wine); }\r\n\r\n \/* \u2500\u2500 HAMBURGER (oculto en desktop) \u2500\u2500 *\/\r\n .hamburger-wrap { display: none; }\r\n\r\n \/* \u2500\u2500 VIEWER \u2500\u2500 *\/\r\n .viewer-stage {\r\n position: relative;\r\n z-index: 10;\r\n max-width: 1100px;\r\n margin: 20px auto 0;\r\n padding: 0 24px;\r\n }\r\n .viewer-frame {\r\n position: relative;\r\n width: 100%;\r\n height: 42vw;\r\n max-height: 480px;\r\n min-height: 220px;\r\n border-radius: 6px;\r\n overflow: hidden;\r\n box-shadow: 0 16px 60px rgba(149,22,56,.18), 0 4px 20px rgba(0,0,0,.12);\r\n border: 1px solid rgba(201,168,76,.3);\r\n background: #111;\r\n }\r\n #canvas-container {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n #canvas-container canvas {\r\n display: block;\r\n width: 100% !important;\r\n height: 100% !important;\r\n }\r\n .viewer-overlay {\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding: 16px 20px;\r\n background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 100%);\r\n pointer-events: none;\r\n }\r\n .room-name-display {\r\n font-size: clamp(.8rem, 2vw, 1.05rem);\r\n font-weight: 700;\r\n letter-spacing: .12em;\r\n text-transform: uppercase;\r\n color: #fff;\r\n text-shadow: 0 1px 6px rgba(0,0,0,.5);\r\n }\r\n .badge-360 {\r\n background: rgba(149,22,56,.85);\r\n color: #fff;\r\n font-size: .62rem;\r\n font-weight: 700;\r\n letter-spacing: .18em;\r\n text-transform: uppercase;\r\n padding: 5px 10px;\r\n border-radius: 3px;\r\n }\r\n .drag-hint {\r\n position: absolute;\r\n bottom: 16px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: rgba(0,0,0,.5);\r\n color: rgba(255,255,255,.85);\r\n font-size: .6rem;\r\n font-weight: 600;\r\n letter-spacing: .14em;\r\n text-transform: uppercase;\r\n padding: 6px 14px;\r\n border-radius: 20px;\r\n pointer-events: none;\r\n white-space: nowrap;\r\n transition: opacity .5s ease;\r\n }\r\n .drag-hint.hidden { opacity: 0; }\r\n\r\n \/* \u2500\u2500 LOADING \u2500\u2500 *\/\r\n #loading-screen {\r\n position: absolute;\r\n inset: 0;\r\n background: #0d0d0d;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 20;\r\n transition: opacity .5s ease;\r\n }\r\n #loading-screen.fade-out { opacity: 0; pointer-events: none; }\r\n .loader-ring {\r\n width: 44px; height: 44px;\r\n border: 3px solid rgba(149,22,56,.25);\r\n border-top-color: var(--wine);\r\n border-radius: 50%;\r\n animation: spin .8s linear infinite;\r\n margin-bottom: 12px;\r\n }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n #loading-screen p {\r\n font-size: .62rem;\r\n font-weight: 600;\r\n letter-spacing: .22em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,.5);\r\n }\r\n\r\n \/* \u2500\u2500 CONTROLS \u2500\u2500 *\/\r\n .controls-row {\r\n display: flex;\r\n gap: 8px;\r\n justify-content: center;\r\n margin-top: 14px;\r\n flex-wrap: wrap;\r\n }\r\n .ctrl-btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 9px 16px;\r\n border: 1.5px solid rgba(149,22,56,.3);\r\n border-radius: 4px;\r\n background: transparent;\r\n font-family: var(--font);\r\n font-size: .62rem;\r\n font-weight: 700;\r\n letter-spacing: .15em;\r\n text-transform: uppercase;\r\n color: var(--wine);\r\n cursor: pointer;\r\n transition: all .2s ease;\r\n }\r\n .ctrl-btn:hover { background: var(--wine); color: #fff; border-color: var(--wine); }\r\n .ctrl-btn.active-auto { background: var(--wine); color: #fff; }\r\n\r\n \/* \u2500\u2500 GALER\u00cdA DE FOTOS POR HABITACI\u00d3N \u2500\u2500 *\/\r\n .gallery-section {\r\n margin-top: 28px;\r\n }\r\n .gallery-label {\r\n font-size: .65rem;\r\n font-weight: 700;\r\n letter-spacing: .25em;\r\n text-transform: uppercase;\r\n color: var(--wine);\r\n margin-bottom: 12px;\r\n }\r\n .gallery-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 10px;\r\n }\r\n .gallery-thumb {\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 4\/3;\r\n border-radius: 5px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n border: 1px solid rgba(201,168,76,.35);\r\n background: #e9e0d2;\r\n }\r\n .gallery-thumb img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform .35s ease;\r\n }\r\n .gallery-thumb:hover img { transform: scale(1.06); }\r\n .gallery-thumb::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.28) 100%);\r\n pointer-events: none;\r\n }\r\n .gallery-thumb .zoom-icon {\r\n position: absolute;\r\n top: 8px; right: 8px;\r\n width: 22px; height: 22px;\r\n border-radius: 50%;\r\n background: rgba(0,0,0,.45);\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: .65rem;\r\n z-index: 1;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }\r\n }\r\n\r\n \/* \u2500\u2500 LIGHTBOX \u2500\u2500 *\/\r\n .lightbox {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(10,8,7,.94);\r\n z-index: 100;\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 40px 20px;\r\n }\r\n .lightbox.open { display: flex; }\r\n .lightbox-img-wrap {\r\n max-width: 900px;\r\n max-height: 82vh;\r\n width: 100%;\r\n position: relative;\r\n }\r\n .lightbox img {\r\n width: 100%;\r\n height: 100%;\r\n max-height: 82vh;\r\n object-fit: contain;\r\n border-radius: 4px;\r\n display: block;\r\n margin: 0 auto;\r\n }\r\n .lightbox-close,\r\n .lightbox-prev,\r\n .lightbox-next {\r\n position: absolute;\r\n background: rgba(255,249,241,.12);\r\n border: 1.5px solid rgba(255,249,241,.4);\r\n color: #fff;\r\n border-radius: 50%;\r\n width: 40px; height: 40px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 1.1rem;\r\n transition: background .2s ease;\r\n }\r\n .lightbox-close:hover,\r\n .lightbox-prev:hover,\r\n .lightbox-next:hover { background: var(--wine); border-color: var(--wine); }\r\n .lightbox-close { top: -54px; right: 0; }\r\n .lightbox-prev { left: -54px; top: 50%; transform: translateY(-50%); }\r\n .lightbox-next { right: -54px; top: 50%; transform: translateY(-50%); }\r\n .lightbox-counter {\r\n position: absolute;\r\n bottom: -34px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n font-size: .62rem;\r\n font-weight: 600;\r\n letter-spacing: .18em;\r\n text-transform: uppercase;\r\n color: rgba(255,249,241,.7);\r\n }\r\n @media (max-width: 640px) {\r\n .lightbox-close { top: -46px; right: 0; width: 34px; height: 34px; }\r\n .lightbox-prev { left: 4px; }\r\n .lightbox-next { right: 4px; }\r\n .lightbox-prev, .lightbox-next { width: 34px; height: 34px; background: rgba(0,0,0,.45); }\r\n }\r\n\r\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n footer {\r\n position: relative;\r\n z-index: 10;\r\n text-align: center;\r\n padding: 28px 24px 36px;\r\n margin-top: 28px;\r\n }\r\n footer .gold-line { margin-bottom: 14px; }\r\n footer p {\r\n font-size: .58rem;\r\n font-weight: 600;\r\n letter-spacing: .22em;\r\n text-transform: uppercase;\r\n color: var(--gray);\r\n }\r\n footer p span { color: var(--wine); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n M\u00d3VIL \u2264 600 px\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 600px) {\r\n\r\n \/* Ocultar selector desktop *\/\r\n .selector-label,\r\n .rooms-grid { display: none; }\r\n\r\n \/* Mostrar hamburguesa *\/\r\n .hamburger-wrap {\r\n display: block;\r\n position: relative;\r\n }\r\n\r\n .hamburger-btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n padding: 13px 16px;\r\n background: #fff9f1;\r\n border: 2px solid var(--wine);\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-family: var(--font);\r\n font-size: .72rem;\r\n font-weight: 700;\r\n letter-spacing: .1em;\r\n text-transform: uppercase;\r\n color: var(--wine);\r\n text-align: left;\r\n transition: background .2s, color .2s;\r\n }\r\n .hamburger-btn.is-open {\r\n background: var(--wine);\r\n color: #fff;\r\n border-bottom-left-radius: 0;\r\n border-bottom-right-radius: 0;\r\n }\r\n .hamburger-btn.is-open .ham-lines span { background: #fff; }\r\n .hamburger-btn.is-open .ham-chevron { transform: rotate(180deg); }\r\n\r\n .ham-lines {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n flex-shrink: 0;\r\n }\r\n .ham-lines span {\r\n display: block;\r\n width: 18px;\r\n height: 2px;\r\n background: var(--wine);\r\n border-radius: 2px;\r\n transition: background .2s;\r\n }\r\n .ham-label { flex: 1; }\r\n .ham-chevron {\r\n font-size: 1.2rem;\r\n line-height: 1;\r\n transition: transform .3s ease;\r\n }\r\n\r\n \/* Men\u00fa desplegable *\/\r\n .hamburger-menu {\r\n background: #fff9f1;\r\n border: 2px solid var(--wine);\r\n border-top: none;\r\n border-bottom-left-radius: 8px;\r\n border-bottom-right-radius: 8px;\r\n overflow: hidden;\r\n max-height: 0;\r\n transition: max-height .35s ease;\r\n box-shadow: 0 8px 20px rgba(149,22,56,.15);\r\n }\r\n .hamburger-menu.open { max-height: 400px; }\r\n\r\n .menu-inner {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n .menu-room-btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n padding: 13px 18px;\r\n background: transparent;\r\n border: none;\r\n border-bottom: 1px solid rgba(149,22,56,.1);\r\n font-family: var(--font);\r\n font-size: .72rem;\r\n font-weight: 600;\r\n letter-spacing: .08em;\r\n text-transform: uppercase;\r\n color: var(--black);\r\n cursor: pointer;\r\n text-align: left;\r\n transition: background .15s, color .15s;\r\n }\r\n .menu-room-btn:last-child { border-bottom: none; }\r\n .menu-room-btn:hover,\r\n .menu-room-btn.active {\r\n background: var(--wine);\r\n color: #fff;\r\n }\r\n .menu-room-btn .icon { font-size: 1.1rem; }\r\n\r\n \/* Viewer vertical 9:16 *\/\r\n .viewer-stage { padding: 0 12px; margin-top: 14px; }\r\n .viewer-frame {\r\n height: 130vw;\r\n max-height: 72vh;\r\n min-height: 260px;\r\n }\r\n\r\n \/* Ocultar pantalla completa y footer *\/\r\n #btnFullscreen { display: none; }\r\n footer { display: none; }\r\n\r\n .controls-row { gap: 6px; margin-top: 10px; }\r\n .ctrl-btn { padding: 8px 12px; font-size: .58rem; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header>\r\n <img decoding=\"async\" class=\"logo\" src=\"https:\/\/cafeocampos.com\/wp-content\/uploads\/2025\/12\/cafe-ocampos-favicon.png\" alt=\"Caf\u00e9 Ocampos\">\r\n <h1>Habitaciones \u00b7 Vista 360\u00b0<\/h1>\r\n <p class=\"sub\">Caf\u00e9 Ocampos Specialty Coffee<\/p>\r\n <div class=\"gold-line\"><\/div>\r\n<\/header>\r\n\r\n<div class=\"selector-wrap\">\r\n\r\n <!-- Desktop -->\r\n <p class=\"selector-label\">Selecciona una habitaci\u00f3n<\/p>\r\n <div class=\"rooms-grid\" id=\"roomsGrid\"><\/div>\r\n\r\n <!-- M\u00f3vil: hamburguesa -->\r\n <div class=\"hamburger-wrap\" id=\"hamburgerWrap\">\r\n <button class=\"hamburger-btn\" id=\"hamburgerBtn\" type=\"button\">\r\n <span class=\"ham-lines\"><span><\/span><span><\/span><span><\/span><\/span>\r\n <span class=\"ham-label\" id=\"hamLabel\">Selecciona una habitaci\u00f3n<\/span>\r\n <span class=\"ham-chevron\">⌄<\/span>\r\n <\/button>\r\n <div class=\"hamburger-menu\" id=\"hamburgerMenu\">\r\n <div class=\"menu-inner\" id=\"menuInner\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"viewer-stage\">\r\n <div class=\"viewer-frame\" id=\"viewerFrame\">\r\n <div id=\"canvas-container\"><\/div>\r\n <div class=\"viewer-overlay\">\r\n <span class=\"room-name-display\" id=\"roomNameDisplay\">\u2014<\/span>\r\n <span class=\"badge-360\">\u27f3 360\u00b0<\/span>\r\n <\/div>\r\n <div class=\"drag-hint\" id=\"dragHint\">\u2726 Arrastra para explorar<\/div>\r\n <div id=\"loading-screen\">\r\n <div class=\"loader-ring\"><\/div>\r\n <p>Cargando panorama\u2026<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"controls-row\">\r\n <button class=\"ctrl-btn\" id=\"btnZoomIn\">\uff0b Acercar<\/button>\r\n <button class=\"ctrl-btn\" id=\"btnZoomOut\">\uff0d Alejar<\/button>\r\n <button class=\"ctrl-btn active-auto\" id=\"btnAuto\">\u23f8 Pausar<\/button>\r\n <button class=\"ctrl-btn\" id=\"btnFullscreen\">\u2922 Pantalla completa<\/button>\r\n <\/div>\r\n\r\n <!-- Galer\u00eda de fotos de la habitaci\u00f3n seleccionada -->\r\n <div class=\"gallery-section\">\r\n <p class=\"gallery-label\">Fotos de la habitaci\u00f3n<\/p>\r\n <div class=\"gallery-grid\" id=\"galleryGrid\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<footer>\r\n <div class=\"gold-line\"><\/div>\r\n <p>\u00a9 Caf\u00e9 Ocampos \u00b7 <span>Eje Cafetero, Colombia<\/span><\/p>\r\n<\/footer>\r\n\r\n<!-- Lightbox -->\r\n<div class=\"lightbox\" id=\"lightbox\">\r\n <div class=\"lightbox-img-wrap\">\r\n <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"Foto de la habitaci\u00f3n\">\r\n <button class=\"lightbox-close\" id=\"lightboxClose\" type=\"button\" aria-label=\"Cerrar\">\u2715<\/button>\r\n <button class=\"lightbox-prev\" id=\"lightboxPrev\" type=\"button\" aria-label=\"Anterior\">\u2039<\/button>\r\n <button class=\"lightbox-next\" id=\"lightboxNext\" type=\"button\" aria-label=\"Siguiente\">\u203a<\/button>\r\n <span class=\"lightbox-counter\" id=\"lightboxCounter\">1 \/ 3<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ \u2500\u2500 Datos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\nconst rooms = [\r\n {\r\n id:'barranquillo', name:'Barranquillo', icon:'\ud83d\udc26',\r\n url:'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/05\/360Barranquillo-scaled.jpg',\r\n photos: [\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HBARRANQUILLO-1.jpg',\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HBARRANQUILLO-2.jpg',\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HBARRANQUILLO-3.jpg'\r\n ]\r\n },\r\n {\r\n id:'carpintero', name:'Carpintero', icon:'\ud83e\udd89',\r\n url:'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/05\/360Carpintero-scaled.jpg',\r\n photos: [\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HCARPINTERO-1.jpg',\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HCARPINTERO-2.jpg',\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HCARPINTERO-3.jpg'\r\n ]\r\n },\r\n {\r\n id:'colibri', name:'Colibr\u00ed', icon:'\ud83c\udf3f',\r\n url:'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/05\/360Colibri-scaled.jpg',\r\n photos: [\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HCOLIBRI-1.jpg',\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HCOLIBRI-2.jpg',\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HCOLIBRI-3.jpg'\r\n ]\r\n },\r\n {\r\n id:'tangara', name:'T\u00e1ngara', icon:'\ud83c\udf38',\r\n url:'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/05\/360Tangara-scaled.jpg',\r\n photos: [\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HTANGARA-1.jpg',\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HTANGARA-2.jpg',\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HTANGARA-3.jpg'\r\n ]\r\n },\r\n {\r\n id:'turpial', name:'Turpial', icon:'\u2600\ufe0f',\r\n url:'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/05\/360Turpial-scaled.jpg',\r\n photos: [\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HTURPIAL-1.jpg',\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HTURPIAL-2.jpg',\r\n 'https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/07\/HTURPIAL-3.jpg'\r\n ]\r\n }\r\n];\r\n\r\n\/\/ \u2500\u2500 Three.js \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nlet renderer, scene, camera, sphere;\r\nlet isDragging = false, prevMouse = {x:0,y:0};\r\nlet phi = Math.PI\/2, theta = 0;\r\nlet fov = 75;\r\nlet autoRotate = true;\r\nlet hintTimeout;\r\nlet pinchStartDist = 0, pinchStartFov = 75;\r\n\r\nconst container = document.getElementById('canvas-container');\r\nconst loadingScreen = document.getElementById('loading-screen');\r\nconst roomNameDisplay = document.getElementById('roomNameDisplay');\r\nconst dragHint = document.getElementById('dragHint');\r\nconst btnAuto = document.getElementById('btnAuto');\r\n\r\nfunction getSize() {\r\n return { w: container.offsetWidth || window.innerWidth,\r\n h: container.offsetHeight || 320 };\r\n}\r\n\r\nfunction initThree() {\r\n const {w,h} = getSize();\r\n scene = new THREE.Scene();\r\n camera = new THREE.PerspectiveCamera(fov, w\/h, 0.1, 1000);\r\n camera.position.set(0,0,0);\r\n\r\n renderer = new THREE.WebGLRenderer({ antialias:true, powerPreference:'high-performance' });\r\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n renderer.setSize(w, h);\r\n container.appendChild(renderer.domElement);\r\n\r\n const geo = new THREE.SphereGeometry(500, 60, 40);\r\n geo.scale(-1,1,1);\r\n sphere = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({color:0x111111}));\r\n scene.add(sphere);\r\n\r\n \/\/ Resize\r\n const ro = new ResizeObserver(() => {\r\n const {w,h} = getSize();\r\n if (!w||!h) return;\r\n camera.aspect = w\/h;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize(w,h);\r\n });\r\n ro.observe(container);\r\n\r\n \/\/ Mouse\r\n renderer.domElement.addEventListener('mousedown', e => {\r\n isDragging = true;\r\n prevMouse = {x:e.clientX, y:e.clientY};\r\n });\r\n window.addEventListener('mouseup', () => { isDragging = false; });\r\n window.addEventListener('mousemove', e => {\r\n if (!isDragging) return;\r\n theta -= (e.clientX - prevMouse.x) * 0.003;\r\n phi -= (e.clientY - prevMouse.y) * 0.003;\r\n phi = Math.max(0.1, Math.min(Math.PI-0.1, phi));\r\n prevMouse = {x:e.clientX, y:e.clientY};\r\n hideHint();\r\n });\r\n\r\n \/\/ Touch\r\n renderer.domElement.addEventListener('touchstart', e => {\r\n if (e.touches.length === 1) {\r\n isDragging = true;\r\n prevMouse = {x:e.touches[0].clientX, y:e.touches[0].clientY};\r\n } else if (e.touches.length === 2) {\r\n isDragging = false;\r\n pinchStartDist = getPinchDist(e);\r\n pinchStartFov = fov;\r\n }\r\n e.preventDefault();\r\n }, {passive:false});\r\n\r\n renderer.domElement.addEventListener('touchend', e => {\r\n if (e.touches.length === 0) isDragging = false;\r\n }, {passive:false});\r\n\r\n renderer.domElement.addEventListener('touchmove', e => {\r\n e.preventDefault();\r\n if (e.touches.length === 1 && isDragging) {\r\n theta -= (e.touches[0].clientX - prevMouse.x) * 0.003;\r\n phi -= (e.touches[0].clientY - prevMouse.y) * 0.003;\r\n phi = Math.max(0.1, Math.min(Math.PI-0.1, phi));\r\n prevMouse = {x:e.touches[0].clientX, y:e.touches[0].clientY};\r\n hideHint();\r\n } else if (e.touches.length === 2) {\r\n const d = getPinchDist(e);\r\n fov = Math.max(30, Math.min(110, pinchStartFov - (d - pinchStartDist)*0.1));\r\n camera.fov = fov;\r\n camera.updateProjectionMatrix();\r\n }\r\n }, {passive:false});\r\n\r\n \/\/ Wheel zoom\r\n renderer.domElement.addEventListener('wheel', e => {\r\n fov = Math.max(30, Math.min(110, fov + e.deltaY*0.05));\r\n camera.fov = fov;\r\n camera.updateProjectionMatrix();\r\n });\r\n\r\n animate();\r\n}\r\n\r\nfunction getPinchDist(e) {\r\n const dx = e.touches[0].clientX - e.touches[1].clientX;\r\n const dy = e.touches[0].clientY - e.touches[1].clientY;\r\n return Math.sqrt(dx*dx + dy*dy);\r\n}\r\n\r\nfunction animate() {\r\n requestAnimationFrame(animate);\r\n if (autoRotate && !isDragging) theta += 0.002;\r\n camera.lookAt(\r\n 500 * Math.sin(phi) * Math.cos(theta),\r\n 500 * Math.cos(phi),\r\n 500 * Math.sin(phi) * Math.sin(theta)\r\n );\r\n renderer.render(scene, camera);\r\n}\r\n\r\nfunction loadRoom(room) {\r\n loadingScreen.classList.remove('fade-out');\r\n loadingScreen.querySelector('p').textContent = 'Cargando panorama\u2026';\r\n roomNameDisplay.textContent = 'Hab. ' + room.name;\r\n const loader = new THREE.TextureLoader();\r\n loader.crossOrigin = 'anonymous';\r\n loader.load(room.url,\r\n tex => {\r\n tex.minFilter = THREE.LinearFilter;\r\n sphere.material = new THREE.MeshBasicMaterial({map:tex});\r\n sphere.material.needsUpdate = true;\r\n setTimeout(() => loadingScreen.classList.add('fade-out'), 250);\r\n showHint();\r\n },\r\n undefined,\r\n () => { loadingScreen.querySelector('p').textContent = 'Error al cargar'; }\r\n );\r\n renderGallery(room);\r\n}\r\n\r\nfunction showHint() {\r\n dragHint.classList.remove('hidden');\r\n clearTimeout(hintTimeout);\r\n hintTimeout = setTimeout(() => dragHint.classList.add('hidden'), 4000);\r\n}\r\nfunction hideHint() {\r\n dragHint.classList.add('hidden');\r\n clearTimeout(hintTimeout);\r\n}\r\n\r\n\/\/ \u2500\u2500 Galer\u00eda de fotos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst galleryGrid = document.getElementById('galleryGrid');\r\nconst lightbox = document.getElementById('lightbox');\r\nconst lightboxImg = document.getElementById('lightboxImg');\r\nconst lightboxCounter = document.getElementById('lightboxCounter');\r\nconst lightboxClose = document.getElementById('lightboxClose');\r\nconst lightboxPrev = document.getElementById('lightboxPrev');\r\nconst lightboxNext = document.getElementById('lightboxNext');\r\n\r\nlet currentGalleryPhotos = [];\r\nlet currentPhotoIndex = 0;\r\n\r\nfunction renderGallery(room) {\r\n currentGalleryPhotos = room.photos || [];\r\n galleryGrid.innerHTML = '';\r\n currentGalleryPhotos.forEach((src, idx) => {\r\n const thumb = document.createElement('div');\r\n thumb.className = 'gallery-thumb';\r\n thumb.innerHTML = `<img decoding=\"async\" src=\"${src}\" alt=\"Foto habitaci\u00f3n ${room.name}\" loading=\"lazy\"><span class=\"zoom-icon\">\u2922<\/span>`;\r\n thumb.addEventListener('click', () => openLightbox(idx));\r\n galleryGrid.appendChild(thumb);\r\n });\r\n}\r\n\r\nfunction openLightbox(idx) {\r\n if (!currentGalleryPhotos.length) return;\r\n currentPhotoIndex = idx;\r\n updateLightboxImage();\r\n lightbox.classList.add('open');\r\n}\r\nfunction updateLightboxImage() {\r\n lightboxImg.src = currentGalleryPhotos[currentPhotoIndex];\r\n lightboxCounter.textContent = (currentPhotoIndex + 1) + ' \/ ' + currentGalleryPhotos.length;\r\n}\r\nfunction closeLightbox() {\r\n lightbox.classList.remove('open');\r\n}\r\nfunction showPrevPhoto() {\r\n currentPhotoIndex = (currentPhotoIndex - 1 + currentGalleryPhotos.length) % currentGalleryPhotos.length;\r\n updateLightboxImage();\r\n}\r\nfunction showNextPhoto() {\r\n currentPhotoIndex = (currentPhotoIndex + 1) % currentGalleryPhotos.length;\r\n updateLightboxImage();\r\n}\r\n\r\nlightboxClose.addEventListener('click', closeLightbox);\r\nlightboxPrev.addEventListener('click', showPrevPhoto);\r\nlightboxNext.addEventListener('click', showNextPhoto);\r\nlightbox.addEventListener('click', e => { if (e.target === lightbox) closeLightbox(); });\r\ndocument.addEventListener('keydown', e => {\r\n if (!lightbox.classList.contains('open')) return;\r\n if (e.key === 'Escape') closeLightbox();\r\n if (e.key === 'ArrowLeft') showPrevPhoto();\r\n if (e.key === 'ArrowRight') showNextPhoto();\r\n});\r\n\r\n\/\/ \u2500\u2500 Botones desktop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst grid = document.getElementById('roomsGrid');\r\nlet activeDesktopBtn = null;\r\n\r\nrooms.forEach(room => {\r\n const btn = document.createElement('button');\r\n btn.className = 'room-btn';\r\n btn.innerHTML = `<span class=\"icon\">${room.icon}<\/span><span>Hab. ${room.name}<\/span>`;\r\n btn.addEventListener('click', () => {\r\n if (activeDesktopBtn) activeDesktopBtn.classList.remove('active');\r\n btn.classList.add('active');\r\n activeDesktopBtn = btn;\r\n loadRoom(room);\r\n });\r\n grid.appendChild(btn);\r\n});\r\n\r\n\/\/ \u2500\u2500 Men\u00fa hamburguesa (m\u00f3vil) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst hamburgerBtn = document.getElementById('hamburgerBtn');\r\nconst hamburgerMenu = document.getElementById('hamburgerMenu');\r\nconst hamLabel = document.getElementById('hamLabel');\r\nconst menuInner = document.getElementById('menuInner');\r\n\r\n\/\/ Poblar lista del men\u00fa\r\nlet activeMenuBtn = null;\r\nrooms.forEach(room => {\r\n const btn = document.createElement('button');\r\n btn.className = 'menu-room-btn';\r\n btn.type = 'button';\r\n btn.innerHTML = `<span class=\"icon\">${room.icon}<\/span><span>Habitaci\u00f3n ${room.name}<\/span>`;\r\n btn.addEventListener('click', () => {\r\n if (activeMenuBtn) activeMenuBtn.classList.remove('active');\r\n btn.classList.add('active');\r\n activeMenuBtn = btn;\r\n hamLabel.textContent = 'Hab. ' + room.name;\r\n closeMenu();\r\n loadRoom(room);\r\n });\r\n menuInner.appendChild(btn);\r\n});\r\n\r\nfunction openMenu() {\r\n hamburgerMenu.classList.add('open');\r\n hamburgerBtn.classList.add('is-open');\r\n}\r\nfunction closeMenu() {\r\n hamburgerMenu.classList.remove('open');\r\n hamburgerBtn.classList.remove('is-open');\r\n}\r\n\r\nhamburgerBtn.addEventListener('click', e => {\r\n e.stopPropagation();\r\n hamburgerMenu.classList.contains('open') ? closeMenu() : openMenu();\r\n});\r\n\r\ndocument.addEventListener('click', e => {\r\n if (!hamburgerBtn.contains(e.target) && !hamburgerMenu.contains(e.target)) {\r\n closeMenu();\r\n }\r\n});\r\n\r\n\/\/ \u2500\u2500 Controles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\ndocument.getElementById('btnZoomIn').addEventListener('click', () => {\r\n fov = Math.max(30, fov-10); camera.fov=fov; camera.updateProjectionMatrix();\r\n});\r\ndocument.getElementById('btnZoomOut').addEventListener('click', () => {\r\n fov = Math.min(110, fov+10); camera.fov=fov; camera.updateProjectionMatrix();\r\n});\r\nbtnAuto.addEventListener('click', () => {\r\n autoRotate = !autoRotate;\r\n btnAuto.classList.toggle('active-auto', autoRotate);\r\n btnAuto.textContent = autoRotate ? '\u23f8 Pausar' : '\u27f3 Auto-rotar';\r\n});\r\ndocument.getElementById('btnFullscreen').addEventListener('click', () => {\r\n const el = document.getElementById('viewerFrame');\r\n document.fullscreenElement ? document.exitFullscreen() : el.requestFullscreen && el.requestFullscreen();\r\n});\r\n\r\n\/\/ \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nrequestAnimationFrame(() => setTimeout(() => {\r\n initThree();\r\n \/\/ Auto-cargar primera habitaci\u00f3n\r\n grid.querySelector('.room-btn').click();\r\n menuInner.querySelector('.menu-room-btn').classList.add('active');\r\n activeMenuBtn = menuInner.querySelector('.menu-room-btn');\r\n}, 0));\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>Caf\u00e9 Ocampos \u00b7 Habitaciones 360\u00b0 Habitaciones \u00b7 Vista 360\u00b0 Caf\u00e9 Ocampos Specialty Coffee Selecciona una habitaci\u00f3n Selecciona una habitaci\u00f3n ⌄ \u2014 \u27f3 360\u00b0 \u2726 Arrastra para explorar Cargando panorama\u2026 \uff0b Acercar \uff0d Alejar ⏸ Pausar \u2922 Pantalla completa Fotos de la habitaci\u00f3n \u00a9 Caf\u00e9 Ocampos \u00b7 Eje Cafetero, Colombia \u2715 \u2039 \u203a 1 \/ 3<\/p>","protected":false},"author":1,"featured_media":1305,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"nf_dc_page":"","_eb_attr":"","_joinchat":[],"footnotes":""},"class_list":["post-1374","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Experiencias Ocampos - Habitaciones 360 - Caf\u00e9 Ocampos<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cafeocampos.com\/en\/experiencias-ocampos-habitaciones-360\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Experiencias Ocampos - Habitaciones 360 - Caf\u00e9 Ocampos\" \/>\n<meta property=\"og:description\" content=\"Caf\u00e9 Ocampos \u00b7 Habitaciones 360\u00b0 Habitaciones \u00b7 Vista 360\u00b0 Caf\u00e9 Ocampos Specialty Coffee Selecciona una habitaci\u00f3n Selecciona una habitaci\u00f3n ⌄ \u2014 \u27f3 360\u00b0 \u2726 Arrastra para explorar Cargando panorama\u2026 \uff0b Acercar \uff0d Alejar ⏸ Pausar \u2922 Pantalla completa Fotos de la habitaci\u00f3n \u00a9 Caf\u00e9 Ocampos \u00b7 Eje Cafetero, Colombia \u2715 \u2039 \u203a 1 \/ 3\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cafeocampos.com\/en\/experiencias-ocampos-habitaciones-360\/\" \/>\n<meta property=\"og:site_name\" content=\"Caf\u00e9 Ocampos\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-25T18:59:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/04\/CASITA-SMALL.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"721\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/experiencias-ocampos-habitaciones-360\\\/\",\"url\":\"https:\\\/\\\/cafeocampos.com\\\/experiencias-ocampos-habitaciones-360\\\/\",\"name\":\"Experiencias Ocampos - Habitaciones 360 - Caf\u00e9 Ocampos\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/experiencias-ocampos-habitaciones-360\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/experiencias-ocampos-habitaciones-360\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cafeocampos.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/CASITA-SMALL.jpg\",\"datePublished\":\"2026-05-08T23:12:21+00:00\",\"dateModified\":\"2026-08-25T18:59:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/experiencias-ocampos-habitaciones-360\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cafeocampos.com\\\/experiencias-ocampos-habitaciones-360\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/experiencias-ocampos-habitaciones-360\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cafeocampos.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/CASITA-SMALL.jpg\",\"contentUrl\":\"https:\\\/\\\/cafeocampos.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/CASITA-SMALL.jpg\",\"width\":1080,\"height\":721},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/experiencias-ocampos-habitaciones-360\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/cafeocampos.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Experiencias Ocampos – Habitaciones 360\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/#website\",\"url\":\"https:\\\/\\\/cafeocampos.com\\\/\",\"name\":\"Caf\u00e9 Ocampos\",\"description\":\"Caf\u00e9 de especialidad | 100% Colombiano\",\"publisher\":{\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cafeocampos.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/#organization\",\"name\":\"Caf\u00e9 Ocampos\",\"url\":\"https:\\\/\\\/cafeocampos.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cafeocampos.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/cropped-CO_COLOR.png\",\"contentUrl\":\"https:\\\/\\\/cafeocampos.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/cropped-CO_COLOR.png\",\"width\":512,\"height\":512,\"caption\":\"Caf\u00e9 Ocampos\"},\"image\":{\"@id\":\"https:\\\/\\\/cafeocampos.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Experiencias Ocampos - Habitaciones 360 - Caf\u00e9 Ocampos","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cafeocampos.com\/en\/experiencias-ocampos-habitaciones-360\/","og_locale":"en_US","og_type":"article","og_title":"Experiencias Ocampos - Habitaciones 360 - Caf\u00e9 Ocampos","og_description":"Caf\u00e9 Ocampos \u00b7 Habitaciones 360\u00b0 Habitaciones \u00b7 Vista 360\u00b0 Caf\u00e9 Ocampos Specialty Coffee Selecciona una habitaci\u00f3n Selecciona una habitaci\u00f3n ⌄ \u2014 \u27f3 360\u00b0 \u2726 Arrastra para explorar Cargando panorama\u2026 \uff0b Acercar \uff0d Alejar ⏸ Pausar \u2922 Pantalla completa Fotos de la habitaci\u00f3n \u00a9 Caf\u00e9 Ocampos \u00b7 Eje Cafetero, Colombia \u2715 \u2039 \u203a 1 \/ 3","og_url":"https:\/\/cafeocampos.com\/en\/experiencias-ocampos-habitaciones-360\/","og_site_name":"Caf\u00e9 Ocampos","article_modified_time":"2026-08-25T18:59:48+00:00","og_image":[{"width":1080,"height":721,"url":"https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/04\/CASITA-SMALL.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cafeocampos.com\/experiencias-ocampos-habitaciones-360\/","url":"https:\/\/cafeocampos.com\/experiencias-ocampos-habitaciones-360\/","name":"Experiencias Ocampos - Habitaciones 360 - Caf\u00e9 Ocampos","isPartOf":{"@id":"https:\/\/cafeocampos.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cafeocampos.com\/experiencias-ocampos-habitaciones-360\/#primaryimage"},"image":{"@id":"https:\/\/cafeocampos.com\/experiencias-ocampos-habitaciones-360\/#primaryimage"},"thumbnailUrl":"https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/04\/CASITA-SMALL.jpg","datePublished":"2026-05-08T23:12:21+00:00","dateModified":"2026-08-25T18:59:48+00:00","breadcrumb":{"@id":"https:\/\/cafeocampos.com\/experiencias-ocampos-habitaciones-360\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cafeocampos.com\/experiencias-ocampos-habitaciones-360\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cafeocampos.com\/experiencias-ocampos-habitaciones-360\/#primaryimage","url":"https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/04\/CASITA-SMALL.jpg","contentUrl":"https:\/\/cafeocampos.com\/wp-content\/uploads\/2026\/04\/CASITA-SMALL.jpg","width":1080,"height":721},{"@type":"BreadcrumbList","@id":"https:\/\/cafeocampos.com\/experiencias-ocampos-habitaciones-360\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/cafeocampos.com\/"},{"@type":"ListItem","position":2,"name":"Experiencias Ocampos – Habitaciones 360"}]},{"@type":"WebSite","@id":"https:\/\/cafeocampos.com\/#website","url":"https:\/\/cafeocampos.com\/","name":"Caf\u00e9 Ocampos","description":"Caf\u00e9 de especialidad | 100% Colombiano","publisher":{"@id":"https:\/\/cafeocampos.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cafeocampos.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cafeocampos.com\/#organization","name":"Caf\u00e9 Ocampos","url":"https:\/\/cafeocampos.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cafeocampos.com\/#\/schema\/logo\/image\/","url":"https:\/\/cafeocampos.com\/wp-content\/uploads\/2025\/01\/cropped-CO_COLOR.png","contentUrl":"https:\/\/cafeocampos.com\/wp-content\/uploads\/2025\/01\/cropped-CO_COLOR.png","width":512,"height":512,"caption":"Caf\u00e9 Ocampos"},"image":{"@id":"https:\/\/cafeocampos.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/cafeocampos.com\/en\/wp-json\/wp\/v2\/pages\/1374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cafeocampos.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cafeocampos.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cafeocampos.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cafeocampos.com\/en\/wp-json\/wp\/v2\/comments?post=1374"}],"version-history":[{"count":5,"href":"https:\/\/cafeocampos.com\/en\/wp-json\/wp\/v2\/pages\/1374\/revisions"}],"predecessor-version":[{"id":1671,"href":"https:\/\/cafeocampos.com\/en\/wp-json\/wp\/v2\/pages\/1374\/revisions\/1671"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cafeocampos.com\/en\/wp-json\/wp\/v2\/media\/1305"}],"wp:attachment":[{"href":"https:\/\/cafeocampos.com\/en\/wp-json\/wp\/v2\/media?parent=1374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}