{"id":157,"date":"2026-06-25T07:15:52","date_gmt":"2026-06-25T07:15:52","guid":{"rendered":"http:\/\/hotel-panoram4.hotelscsm.panoram4.com\/kiosco\/"},"modified":"2026-06-25T07:16:44","modified_gmt":"2026-06-25T07:16:44","slug":"kiosco","status":"publish","type":"page","link":"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/","title":{"rendered":"Inicio"},"content":{"rendered":"        <style>\n            .kiosk-wrap {\n                height:100vh; width:100%; overflow:hidden;\n                display:flex; flex-direction:column; justify-content:flex-end;\n                padding:40px 32px; box-sizing:border-box; position:relative;\n            }\n            .sub-grid-wrapper {\n                max-height:0; opacity:0; visibility:hidden; overflow:hidden;\n                transform:translateY(30px);\n                transition:\n                    max-height 0.5s cubic-bezier(0.4,0,0.2,1),\n                    opacity 0.4s ease,\n                    transform 0.5s cubic-bezier(0.4,0,0.2,1),\n                    margin 0.4s ease; border-radius:20px; margin-bottom:0;\n                width: 100%;\n            }\n            .sub-grid-wrapper.active { max-height:250px; opacity:1; visibility:visible; transform:translateY(0); margin-bottom: 20px; }\n            .sub-grid .kt { opacity:0; transform:scale(0.9); transition:all 0.4s ease; }\n            .sub-grid-wrapper.active .sub-grid .kt { opacity:1; transform:scale(1); }\n            \n            .kiosk-grid { display:flex; flex-direction:row; height:180px; align-items:flex-end; gap:15px; overflow-x:auto; scrollbar-width:none; width: 100%; }\n            .kiosk-grid::-webkit-scrollbar { display:none; }\n            \n            .kt {\n                position:relative; flex-shrink:0; height:160px; width:280px;\n                background-size:cover; background-position:center; border-radius:14px;\n                text-decoration:none; display:block; transition:transform 0.3s, border 0.3s;\n            }\n            \/* Nueva clase limpia para controlar la sombra oscura (degradado) *\/\n            .kt-shadow::after {\n                content:''; position:absolute; left:0; right:0; bottom:0; height:60%;\n                background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));\n                pointer-events:none; border-radius:0 0 14px 14px;\n            }\n            .kt:hover { transform:translateY(-8px); }\n            .kt-label {\n                position:absolute; left:0; right:0; bottom:20px;\n                color:#fff; text-align:center; font-size:1.1rem; letter-spacing:2px; z-index:1;\n            }\n            .kiosk-nav-arrow {\n                position:absolute; bottom:40px; width:60px; height:160px;\n                display:flex; align-items:center; justify-content:center;\n                z-index:10; cursor:pointer; color:white; font-size:40px;\n                opacity:0.5; transition:opacity 0.3s;\n            }\n            .kiosk-nav-arrow:hover { opacity:1; }\n            .kiosk-nav-left  { left:0; }\n            .kiosk-nav-right { right:0; }\n\n            .kt-mobile-only { display: none !important; }\n\n            .is-information {\n                color: black !important;\n            }\n\n            \/* Si estamos en modo debug, forzamos un fondo *\/\n            .kiosk-debug-mode {\n                background-image: url('\/wp-content\/uploads\/2026\/06\/debug-bg.png') !important;\n                background-repeat: no-repeat;\n                background-size: cover;\n            }\n\n            \/* =========================================================\n               RESPONSIVE: TABLET Y MOVIL (< 1024px)\n            ========================================================= *\/\n            @media (max-width: 1024px) {\n                body { background: black !important }\n                \/* ARREGLARLO PARA MOVIL! *\/\n                .kiosk-nav-arrow { display:none !important; }\n                \/*  .kiosk-nav-arrow { opacity: 0.6; }  *\/\n                .sub-grid-wrapper { display:none !important; }\n                \n                .kiosk-wrap { height:auto; min-height:100vh; overflow-y:auto; justify-content:flex-start; padding:20px; }\n                \n                .kiosk-grid#kioskGrid { flex-direction:column; height:auto; width:100%; overflow-x:visible; align-items:center; gap: 20px; }\n                \n                .kt { width:100%; max-width:360px; height:180px; }\n\n                .kt-desktop-only { display: none !important; }\n                .kt-mobile-only { display: block !important; }\n                \n                .kt[data-content-type=\"venta\"] { display: none !important; }\n            }\n        <\/style>\n\n                <div class=\"kiosk-wrap\" id=\"kioskApp\">\n            <div class=\"sub-grid-wrapper\" id=\"subWrapper\" data-current=\"\">\n                <div class=\"kiosk-grid sub-grid\" id=\"subGrid\"><\/div>\n            <\/div>\n            \n            <div class=\"kiosk-nav-arrow kiosk-nav-left\"  id=\"kioskPrev\">\u2039<\/div>\n            <div class=\"kiosk-nav-arrow kiosk-nav-right\" id=\"kioskNext\">\u203a<\/div>\n            \n            <div class=\"kiosk-grid\" id=\"kioskGrid\">\n                                        <a class=\"kt\"\n                           data-content-type=\"informativo\"\n                           href=\"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/informacion\/\"\n                           style=\"background-image:url('https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/wp-content\/uploads\/sites\/11\/2026\/06\/Informacion.png')\">\n                                                                                            <span class=\"kt-label is-information\">Information<\/span>\n                                                    <\/a>\n                                            <a class=\"kt\"\n                           data-content-type=\"venta\"\n                           href=\"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/dining-service\/\"\n                           style=\"background-image:url('https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/wp-content\/uploads\/sites\/11\/2026\/06\/Restauracion.jpg')\">\n                                                                                            <span class=\"kt-label\">Dining Service<\/span>\n                                                    <\/a>\n                                            <a class=\"kt\"\n                           data-content-type=\"venta\"\n                           href=\"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/habitaciones\/\"\n                           style=\"background-image:url('https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/wp-content\/uploads\/sites\/11\/2026\/06\/Servicios-de-habitaciones.jpg')\">\n                                                                                            <span class=\"kt-label\">Room Services<\/span>\n                                                    <\/a>\n                                            <a class=\"kt\"\n                           data-content-type=\"venta\"\n                           href=\"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/servicios\/\"\n                           style=\"background-image:url('https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/wp-content\/uploads\/sites\/11\/2026\/06\/Servicios-del-hotel.jpg')\">\n                                                                                            <span class=\"kt-label\">Hotel Services<\/span>\n                                                    <\/a>\n                                            <a class=\"kt\"\n                           data-content-type=\"venta\"\n                           href=\"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/experiences\/\"\n                           style=\"background-image:url('https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/wp-content\/uploads\/sites\/11\/2026\/06\/Actividades-recomendadas.jpg')\">\n                                                                                            <span class=\"kt-label\">Experiences<\/span>\n                                                    <\/a>\n                                            <a class=\"kt\"\n                           data-content-type=\"informativo\"\n                           href=\"https:\/\/www.civitatis.com\/es\/\"\n                           style=\"background-image:url('https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/wp-content\/uploads\/sites\/11\/2026\/06\/Civitatis-1.png')\">\n                                                    <\/a>\n                                <\/div>\n        <\/div>\n\n        <script>\n        const isMobileTablet = window.matchMedia('(max-width: 1024px)');\n\n        function handleTileClick(event, titleKey) {\n            if (isMobileTablet.matches) return; \n\n            event.preventDefault();\n            const kioskData = {\"main:Information\":{\"title\":\"Information\",\"action_type\":\"page\",\"content_type\":\"informativo\",\"link\":\"https:\\\/\\\/hotel-panoram4.hotelscsm.panoram4.com\\\/en\\\/informacion\\\/\",\"img\":\"https:\\\/\\\/hotel-panoram4.hotelscsm.panoram4.com\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/06\\\/Informacion.png\",\"is_panorama\":true,\"children\":[],\"display_title\":1,\"display_shadow\":0},\"main:Dining Service\":{\"title\":\"Dining Service\",\"action_type\":\"page\",\"content_type\":\"venta\",\"link\":\"https:\\\/\\\/hotel-panoram4.hotelscsm.panoram4.com\\\/en\\\/dining-service\\\/\",\"img\":\"https:\\\/\\\/hotel-panoram4.hotelscsm.panoram4.com\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/06\\\/Restauracion.jpg\",\"is_panorama\":true,\"children\":[],\"display_title\":1,\"display_shadow\":0},\"main:Room Services\":{\"title\":\"Room Services\",\"action_type\":\"page\",\"content_type\":\"venta\",\"link\":\"https:\\\/\\\/hotel-panoram4.hotelscsm.panoram4.com\\\/en\\\/habitaciones\\\/\",\"img\":\"https:\\\/\\\/hotel-panoram4.hotelscsm.panoram4.com\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/06\\\/Servicios-de-habitaciones.jpg\",\"is_panorama\":true,\"children\":[],\"display_title\":1,\"display_shadow\":0},\"main:Hotel Services\":{\"title\":\"Hotel Services\",\"action_type\":\"page\",\"content_type\":\"venta\",\"link\":\"https:\\\/\\\/hotel-panoram4.hotelscsm.panoram4.com\\\/en\\\/servicios\\\/\",\"img\":\"https:\\\/\\\/hotel-panoram4.hotelscsm.panoram4.com\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/06\\\/Servicios-del-hotel.jpg\",\"is_panorama\":true,\"children\":[],\"display_title\":1,\"display_shadow\":0},\"main:Experiences\":{\"title\":\"Experiences\",\"action_type\":\"page\",\"content_type\":\"venta\",\"link\":\"https:\\\/\\\/hotel-panoram4.hotelscsm.panoram4.com\\\/en\\\/experiences\\\/\",\"img\":\"https:\\\/\\\/hotel-panoram4.hotelscsm.panoram4.com\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/06\\\/Actividades-recomendadas.jpg\",\"is_panorama\":true,\"children\":[],\"display_title\":1,\"display_shadow\":0},\"main:Civitatis\":{\"title\":\"Civitatis\",\"action_type\":\"external\",\"content_type\":\"informativo\",\"link\":\"https:\\\/\\\/www.civitatis.com\\\/es\\\/\",\"img\":\"https:\\\/\\\/hotel-panoram4.hotelscsm.panoram4.com\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/06\\\/Civitatis-1.png\",\"is_panorama\":false,\"children\":[],\"display_title\":0,\"display_shadow\":0}};\n            const tile = kioskData[titleKey];\n            if (!tile) return;\n\n            const wrap = document.getElementById('subWrapper');\n            const grid = document.getElementById('subGrid');\n\n            if (wrap.classList.contains('active') && wrap.dataset.current === titleKey) {\n                wrap.classList.remove('active');\n                wrap.dataset.current = '';\n                return;\n            }\n\n            if (wrap.classList.contains('active')) {\n                wrap.classList.remove('active');\n                setTimeout(() => buildSubMenu(titleKey, wrap, grid, kioskData), 320);\n            } else {\n                buildSubMenu(titleKey, wrap, grid, kioskData);\n            }\n        }\n\n        function buildSubMenu(titleKey, wrap, grid, kioskData) {\n            const tile = kioskData[titleKey];\n            if (!tile) return;\n            grid.innerHTML = '';\n\n            (tile.children || []).forEach((childKey, i) => {\n                const c = kioskData[childKey];\n                if (!c) return; \n\n                const a = document.createElement('a');\n                \n                \/\/ Construcci\u00f3n de clases limpia seg\u00fan los flags de aspecto del JS\n                let tileClasses = 'kt';\n                if (parseInt(c.display_shadow) === 1) {\n                    tileClasses += ' kt-shadow';\n                }\n                a.className = tileClasses;\n                \n                a.href = c.link;\n                a.style.backgroundImage = c.img ? `url(${c.img})` : '';\n                a.style.transitionDelay  = (i * 0.06) + 's';\n                \n                \/\/ Renderizado condicional del t\u00edtulo bas\u00e1ndonos en la configuraci\u00f3n\n                if (parseInt(c.display_title) === 1) {\n                    \/\/ AQU\u00cd EST\u00c1 EL CAMBIO:\n                    const infoClass = (c.title === 'Information') ? ' is-information' : '';\n                    a.innerHTML = `<span class=\"kt-label ${infoClass}\">${c.title}<\/span>`;\n                } else {\n                    a.innerHTML = '';\n                }\n                \n                grid.appendChild(a);\n            });\n\n            wrap.classList.add('active');\n            wrap.dataset.current = titleKey;\n\n        }\n\n        \/* Scroll horizontal por hover en flechas *\/\n        (function(){\n            let si;\n            const go = (id, dir) => {\n                const btn = document.getElementById(id);\n                const g   = document.getElementById('kioskGrid');\n                if (!btn || !g) return;\n                btn.addEventListener('mouseenter', () => { \n                    \/\/if (!isMobileTablet.matches) {\n                        si = setInterval(() => { g.scrollLeft += dir * 10; }, 16); \n                    \/\/}\n                });\n                btn.addEventListener('mouseleave', () => clearInterval(si));\n            };\n            go('kioskPrev', -1);\n            go('kioskNext',  1);\n        })();\n\n        \/* D-pad navigation: ArrowLeft\/ArrowRight scroll kioskGrid *\/\n        document.addEventListener('keydown', function(e) {\n            var g = document.getElementById('kioskGrid');\n            if (!g) return;\n            if (e.key === 'ArrowRight') { g.scrollLeft += 300; e.preventDefault(); }\n            else if (e.key === 'ArrowLeft') { g.scrollLeft -= 300; e.preventDefault(); }\n        });\n        <\/script>\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-157","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/wp-json\/wp\/v2\/pages\/157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":1,"href":"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/wp-json\/wp\/v2\/pages\/157\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/wp-json\/wp\/v2\/pages\/157\/revisions\/158"}],"wp:attachment":[{"href":"https:\/\/hotel-panoram4.hotelscsm.panoram4.com\/en\/wp-json\/wp\/v2\/media?parent=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}