{"id":325,"date":"2026-04-24T19:58:31","date_gmt":"2026-04-24T19:58:31","guid":{"rendered":""},"modified":"2026-04-27T12:17:23","modified_gmt":"2026-04-27T12:17:23","slug":"kiosco","status":"publish","type":"page","link":"https:\/\/hotelscsm.panoram4.com\/pt\/kiosco\/","title":{"rendered":"In\u00edcio"},"content":{"rendered":"        <style>\n            .kiosk-wrap {\n                height:100vh;\n                width:100%;\n                overflow:hidden;\n                display:flex;\n                flex-direction:column;\n                justify-content:flex-end;\n                padding:40px 32px 100px 32px;\n                box-sizing:border-box;\n                position:relative;\n            }\n\n            .sub-grid-wrapper {\n                max-height:0;\n                opacity:0;\n                visibility:hidden;\n                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;\n                border-radius:20px;\n                margin-bottom:0;\n                width:100%;\n            }\n\n            .sub-grid-wrapper.active {\n                max-height:250px;\n                opacity:1;\n                visibility:visible;\n                transform:translateY(0);\n                margin-bottom:20px;\n            }\n\n            .sub-grid .kt {\n                opacity:0;\n                transform:scale(0.9);\n                transition:all 0.4s ease;\n            }\n\n            .sub-grid-wrapper.active .sub-grid .kt {\n                opacity:1;\n                transform:scale(1);\n            }\n\n            .kiosk-grid {\n                display:flex;\n                flex-direction:row;\n                height:180px;\n                align-items:flex-end;\n                overflow-x:auto;\n                overflow-y:hidden;\n                scrollbar-width:none;\n                -ms-overflow-style:none;\n                width:100%;\n                overscroll-behavior-x:contain;\n                touch-action:pan-x;\n            }\n\n            .kiosk-grid > * + * {\n                \/* margin-left:15px; *\/\n                margin-inline-start:15px;\n            }\n\n            .kiosk-grid::-webkit-scrollbar {\n                display:none;\n            }\n\n            .kt {\n                position:relative;\n                flex:0 0 270px;\n                height:150px;\n                width:270px;\n                background-size:cover;\n                background-position:center;\n                border-radius:14px;\n                text-decoration:none;\n                display:block;\n                transition:transform 0.3s, border 0.3s;\n            }\n\n            .kt-shadow::after {\n                content:'';\n                position:absolute;\n                left:0;\n                right:0;\n                bottom:0;\n                height:60%;\n                background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));\n                pointer-events:none;\n                border-radius:0 0 14px 14px;\n            }\n\n            .kt:hover { transform:translateY(-8px); }\n\n            .kt-label {\n                position:absolute;\n                left:0;\n                right:0;\n                bottom:20px;\n                color:#fff;\n                text-align:center;\n                font-size:1.1rem;\n                letter-spacing:2px;\n                z-index:1;\n                margin-inline:5px;\n            }\n\n            .kiosk-nav-arrow {\n                position:absolute;\n                bottom:90px;\n                width:60px;\n                height:160px;\n                display:flex;\n                align-items:center;\n                justify-content:center;\n                z-index:10;\n                cursor:pointer;\n                color:white;\n                font-size:40px;\n                opacity:0.5;\n                transition:opacity 0.3s, background 0.3s;\n                user-select:none;\n            }\n\n            .kiosk-nav-arrow:hover,\n            .kiosk-nav-arrow:focus {\n                opacity:1;\n            }\n\n            .kiosk-nav-left  { left:0; }\n            .kiosk-nav-right { right:0; }\n\n            html[dir=\"rtl\"] .kiosk-nav-left {\n                transform: rotate(180deg);\n            }\n\n            html[dir=\"rtl\"] .kiosk-nav-right {\n                transform: rotate(180deg);\n            }\n\n            .kt-mobile-only { display:none !important; }\n            .is-information { color:black !important; }\n\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            @media (max-width: 1024px) {\n                body { background:black !important; }\n                .kiosk-nav-arrow { display:none !important; }\n                .sub-grid-wrapper { display:none !important; }\n\n                .kiosk-wrap {\n                    height:auto;\n                    min-height:100vh;\n                    overflow-y:auto;\n                    justify-content:flex-start;\n                    padding:20px;\n                }\n\n                .kiosk-grid#kioskGrid {\n                    flex-direction:column;\n                    height:auto;\n                    width:100%;\n                    overflow-x:visible;\n                    overflow-y:visible;\n                    align-items:center;\n                    touch-action:auto;\n                    scroll-behavior: smooth; \/* Opcional si prefieres un toque nativo *\/\n                    will-change: scroll-left;\n                }\n\n                .kiosk-grid#kioskGrid > * + * {\n                    margin-left:0;\n                    margin-inline-start:0;\n                    margin-top:20px;\n                }\n\n                .kt {\n                    flex:0 0 auto;\n                    width:100%;\n                    max-width:360px;\n                    height:180px;\n                }\n\n                .kt-desktop-only { display:none !important; }\n                .kt-mobile-only { display:block !important; }\n                .kt[data-content-type=\"venta\"] { display:none !important; }\n            }\n        <\/style>\n\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\" role=\"button\" tabindex=\"0\" aria-label=\"Previous items\">\u2039<\/div>\n            <div class=\"kiosk-nav-arrow kiosk-nav-right\" id=\"kioskNext\" role=\"button\" tabindex=\"0\" aria-label=\"Next items\">\u203a<\/div>\n\n            <div class=\"kiosk-grid\" id=\"kioskGrid\">\n                \n                                            <a\n                            class=\"kt\"\n                            data-content-type=\"informativo\"\n                            href=\"https:\/\/hotelscsm.panoram4.com\/pt\/information\/\"\n                            style=\"background-image:url('https:\/\/hotelscsm.panoram4.com\/wp-content\/uploads\/panoram4-buttons\/default-info.jpg')\"\n                        >\n                                                            <span class=\"kt-label is-information\">Information<\/span>\n                                                    <\/a>\n                    \n                \n                                            <a\n                            class=\"kt\"\n                            data-content-type=\"venta\"\n                            href=\"https:\/\/hotelscsm.panoram4.com\/pt\/dining-service\/\"\n                            style=\"background-image:url('https:\/\/hotelscsm.panoram4.com\/wp-content\/uploads\/panoram4-buttons\/default-dining.jpg')\"\n                        >\n                                                            <span class=\"kt-label\">Dining Service<\/span>\n                                                    <\/a>\n                    \n                \n                                            <a\n                            class=\"kt\"\n                            data-content-type=\"venta\"\n                            href=\"https:\/\/hotelscsm.panoram4.com\/pt\/room-services\/\"\n                            style=\"background-image:url('https:\/\/hotelscsm.panoram4.com\/wp-content\/uploads\/panoram4-buttons\/default-room.jpg')\"\n                        >\n                                                            <span class=\"kt-label\">Room Services<\/span>\n                                                    <\/a>\n                    \n                \n                                            <a\n                            class=\"kt\"\n                            data-content-type=\"venta\"\n                            href=\"https:\/\/hotelscsm.panoram4.com\/pt\/hotel-services\/\"\n                            style=\"background-image:url('https:\/\/hotelscsm.panoram4.com\/wp-content\/uploads\/panoram4-buttons\/default-hotel.jpg')\"\n                        >\n                                                            <span class=\"kt-label\">Hotel Services<\/span>\n                                                    <\/a>\n                    \n                \n                                            <a\n                            class=\"kt\"\n                            data-content-type=\"venta\"\n                            href=\"https:\/\/hotelscsm.panoram4.com\/pt\/experiences\/\"\n                            style=\"background-image:url('https:\/\/hotelscsm.panoram4.com\/wp-content\/uploads\/panoram4-buttons\/default-experiences.jpg')\"\n                        >\n                                                            <span class=\"kt-label\">Experiences<\/span>\n                                                    <\/a>\n                    \n                            <\/div>\n        <\/div>\n\n        <script>\n        (function() {\n            'use strict';\n\n            const kioskData = {\"main:Information\":{\"key\":\"main:Information\",\"title\":\"Information\",\"action_type\":\"page\",\"content_type\":\"informativo\",\"link\":\"https:\\\/\\\/hotelscsm.panoram4.com\\\/pt\\\/information\\\/\",\"img\":\"https:\\\/\\\/hotelscsm.panoram4.com\\\/wp-content\\\/uploads\\\/panoram4-buttons\\\/default-info.jpg\",\"is_panorama\":true,\"display_title\":1,\"display_shadow\":0,\"parent_title\":\"\",\"children\":[]},\"main:Dining Service\":{\"key\":\"main:Dining Service\",\"title\":\"Dining Service\",\"action_type\":\"page\",\"content_type\":\"venta\",\"link\":\"https:\\\/\\\/hotelscsm.panoram4.com\\\/pt\\\/dining-service\\\/\",\"img\":\"https:\\\/\\\/hotelscsm.panoram4.com\\\/wp-content\\\/uploads\\\/panoram4-buttons\\\/default-dining.jpg\",\"is_panorama\":true,\"display_title\":1,\"display_shadow\":0,\"parent_title\":\"\",\"children\":[]},\"main:Room Services\":{\"key\":\"main:Room Services\",\"title\":\"Room Services\",\"action_type\":\"page\",\"content_type\":\"venta\",\"link\":\"https:\\\/\\\/hotelscsm.panoram4.com\\\/pt\\\/room-services\\\/\",\"img\":\"https:\\\/\\\/hotelscsm.panoram4.com\\\/wp-content\\\/uploads\\\/panoram4-buttons\\\/default-room.jpg\",\"is_panorama\":true,\"display_title\":1,\"display_shadow\":0,\"parent_title\":\"\",\"children\":[]},\"main:Hotel Services\":{\"key\":\"main:Hotel Services\",\"title\":\"Hotel Services\",\"action_type\":\"page\",\"content_type\":\"venta\",\"link\":\"https:\\\/\\\/hotelscsm.panoram4.com\\\/pt\\\/hotel-services\\\/\",\"img\":\"https:\\\/\\\/hotelscsm.panoram4.com\\\/wp-content\\\/uploads\\\/panoram4-buttons\\\/default-hotel.jpg\",\"is_panorama\":true,\"display_title\":1,\"display_shadow\":0,\"parent_title\":\"\",\"children\":[]},\"main:Experiences\":{\"key\":\"main:Experiences\",\"title\":\"Experiences\",\"action_type\":\"page\",\"content_type\":\"venta\",\"link\":\"https:\\\/\\\/hotelscsm.panoram4.com\\\/pt\\\/experiences\\\/\",\"img\":\"https:\\\/\\\/hotelscsm.panoram4.com\\\/wp-content\\\/uploads\\\/panoram4-buttons\\\/default-experiences.jpg\",\"is_panorama\":true,\"display_title\":1,\"display_shadow\":0,\"parent_title\":\"\",\"children\":[]}};\n            const isMobileTablet = window.matchMedia('(max-width: 1024px)');\n\n            window.handleTileClick = function(event, titleKey) {\n                if (isMobileTablet.matches) {\n                    return;\n                }\n\n                event.preventDefault();\n\n                const tile = kioskData[titleKey];\n                if (!tile || tile.action_type !== 'buttons') {\n                    return;\n                }\n\n                const wrap = document.getElementById('subWrapper');\n                const grid = document.getElementById('subGrid');\n                if (!wrap || !grid) {\n                    return;\n                }\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                    window.setTimeout(function() {\n                        buildSubMenu(titleKey, wrap, grid);\n                    }, 320);\n                } else {\n                    buildSubMenu(titleKey, wrap, grid);\n                }\n            };\n\n            function buildSubMenu(titleKey, wrap, grid) {\n                const tile = kioskData[titleKey];\n                if (!tile) return;\n\n                grid.innerHTML = '';\n\n                (tile.children || []).forEach(function(childKey, index) {\n                    const child = kioskData[childKey];\n                    if (!child) return;\n\n                    const a = document.createElement('a');\n                    a.className = 'kt' + (parseInt(child.display_shadow, 10) === 1 ? ' kt-shadow' : '');\n                    a.href = child.link || '#';\n                    a.style.backgroundImage = child.img ? 'url(\"' + child.img.replace(\/\"\/g, '\\\\\"') + '\")' : '';\n                    a.style.transitionDelay = (index * 0.06) + 's';\n\n                    if (parseInt(child.display_title, 10) === 1) {\n                        const span = document.createElement('span');\n                        span.className = 'kt-label' + (child.title === 'Information' ? ' is-information' : '');\n                        span.textContent = child.title || '';\n                        a.appendChild(span);\n                    }\n\n                    grid.appendChild(a);\n                });\n\n                if (tile.children && tile.children.length) {\n                    wrap.classList.add('active');\n                    wrap.dataset.current = titleKey;\n                    grid.scrollLeft = 0;\n                } else {\n                    wrap.classList.remove('active');\n                    wrap.dataset.current = '';\n                }\n            }\n\n            function scrollGrid(grid, amount) {\n                if (!grid) return;\n\n                if (typeof grid.scrollBy === 'function') {\n                    grid.scrollBy({ left: amount, behavior: 'smooth' });\n                } else {\n                    grid.scrollLeft += amount;\n                }\n            }\n\n            function setupHorizontalNavigation() {\n                const grid = document.getElementById('kioskGrid');\n                const prev = document.getElementById('kioskPrev');\n                const next = document.getElementById('kioskNext');\n                if (!grid || !prev || !next) return;\n\n                const step = 300;\n\n                prev.addEventListener('click', function() {\n                    scrollGrid(grid, -step);\n                });\n\n                next.addEventListener('click', function() {\n                    scrollGrid(grid, step);\n                });\n\n                [prev, next].forEach(function(button) {\n                    button.addEventListener('keydown', function(event) {\n                        if (event.key === 'Enter' || event.key === ' ') {\n                            event.preventDefault();\n                            button.click();\n                        }\n                    });\n                });\n\n                let animationFrameId = null;\n\n                function startContinuousScroll(direction) {\n                    \/\/ Cancelamos cualquier animaci\u00f3n previa para evitar acumulaci\u00f3n\n                    if (animationFrameId) return;\n\n                    function stepScroll() {\n                        \/\/ Multiplicamos por una velocidad constante y fluida por frame\n                        scrollGrid(grid, direction * 16); \n                        \/\/ Solicitamos el siguiente frame al navegador (60hz\/120hz fluido)\n                        animationFrameId = window.requestAnimationFrame(stepScroll);\n                    }\n\n                    animationFrameId = window.requestAnimationFrame(stepScroll);\n                }\n\n                function stopContinuousScroll() {\n                    if (animationFrameId) {\n                        window.cancelAnimationFrame(animationFrameId);\n                        animationFrameId = null;\n                    }\n                }\n\n                prev.addEventListener('mouseenter', function() { startContinuousScroll(-1); });\n                prev.addEventListener('mouseleave', stopContinuousScroll);\n                next.addEventListener('mouseenter', function() { startContinuousScroll(1); });\n                next.addEventListener('mouseleave', stopContinuousScroll);\n\n                grid.addEventListener('wheel', function(event) {\n                    if (Math.abs(event.deltaY) > Math.abs(event.deltaX) && grid.scrollWidth > grid.clientWidth) {\n                        event.preventDefault();\n                        grid.scrollLeft += event.deltaY;\n                    }\n                }, { passive: false });\n            }\n\n            function setupKeyboardNavigation() {\n                document.addEventListener('keydown', function(event) {\n                    const grid = document.getElementById('kioskGrid');\n                    if (!grid) return;\n\n                    if (event.key === 'ArrowRight') {\n                        scrollGrid(grid, 300);\n                        event.preventDefault();\n                    } else if (event.key === 'ArrowLeft') {\n                        scrollGrid(grid, -300);\n                        event.preventDefault();\n                    }\n                });\n            }\n\n            document.addEventListener('DOMContentLoaded', function() {\n                setupHorizontalNavigation();\n                setupKeyboardNavigation();\n            });\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-325","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hotelscsm.panoram4.com\/pt\/wp-json\/wp\/v2\/pages\/325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hotelscsm.panoram4.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hotelscsm.panoram4.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hotelscsm.panoram4.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hotelscsm.panoram4.com\/pt\/wp-json\/wp\/v2\/comments?post=325"}],"version-history":[{"count":0,"href":"https:\/\/hotelscsm.panoram4.com\/pt\/wp-json\/wp\/v2\/pages\/325\/revisions"}],"wp:attachment":[{"href":"https:\/\/hotelscsm.panoram4.com\/pt\/wp-json\/wp\/v2\/media?parent=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}