{"id":4469,"date":"2024-01-28T19:46:57","date_gmt":"2024-01-28T19:46:57","guid":{"rendered":"https:\/\/virtuabarcelona.com\/escape-room-vr-arvi-prison\/"},"modified":"2026-05-04T11:19:48","modified_gmt":"2026-05-04T11:19:48","slug":"escape-room-vr-arvi-prison","status":"publish","type":"page","link":"https:\/\/virtuabarcelona.com\/en\/escape-room-vr-arvi-prison\/","title":{"rendered":"Escape Room VR &#8211; ARVI &#8211; Prison"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4469\" class=\"elementor elementor-4469 elementor-1105\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-312575e e-flex e-con-boxed e-con e-parent\" data-id=\"312575e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13aa41b elementor-widget elementor-widget-html\" data-id=\"13aa41b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\r\n======================================================================\r\n THE PRISON \u2014 PAYLOAD ELEMENTOR\r\n Virtua Barcelona | Sin City Noir | 2026\r\n======================================================================\r\n UN SOLO widget \"HTML Personalizado\" en Elementor \u2014 pegar todo esto.\r\n\r\n ANTES DE PUBLICAR:\r\n   1. Sube prison-v8.js a GitHub:\r\n      https:\/\/github.com\/VirtuaBarcelona\/virtua-assets\/upload\/main\r\n   El <script> al final ya apunta a prison-v8.js en el CDN.\r\n   El primer click funciona con el script inline aunque el CDN tarde.\r\n\r\n Eso es todo. La p\u00e1gina funcionar\u00e1 sola.\r\n======================================================================\r\n-->\r\n\r\n<!-- Preload im\u00e1genes cr\u00edticas below-the-fold -->\r\n<link rel=\"preload\" as=\"image\" href=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/electric-chair.webp\">\r\n\r\n<!-- Fuentes Google -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Oswald:wght@600;700&family=Special+Elite&family=Courier+Prime:wght@400;700&family=Bangers&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- CDN \u2014 orden importa -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lenis@1.1.14\/dist\/lenis.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/build\/three.min.js\"><\/script>\r\n\r\n<!-- Intro gate + wheel capture inline \u2014 funciona aunque el CDN de prison-v8.js tarde en propagarse -->\r\n<script>\r\nwindow._prisonOnEnter = null;\r\n\r\n\/* \u2500\u2500 WHEEL SMOOTH SCROLL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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   Diagn\u00f3stico confirm\u00f3: el capture listener funciona (stopImmediatePropagation\r\n   bloque\u00f3 el listener de test). El problema es que el GSAP de Elementor\r\n   cancela el lerp interno de Lenis en cada frame v\u00eda sus scroll handlers.\r\n   Soluci\u00f3n: RAF propio + lenis.scrollTo(immediate:true) cada frame.\r\n   As\u00ed usamos SIEMPRE el immediate que S\u00cd funciona, suavizado por nosotros.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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!function(){\r\n    var _tgt = 0, _cur = 0, _raf = null;\r\n\r\n    function _tick() {\r\n        var d = _tgt - _cur;\r\n        if (Math.abs(d) < 0.5) { _cur = _tgt; _raf = null; }\r\n        else                    { _cur += d * 0.12; _raf = requestAnimationFrame(_tick); }\r\n        var L = window._prisonLenis;\r\n        if (L) L.scrollTo(Math.round(_cur), { immediate: true, force: true });\r\n        else   window.scrollTo(0, Math.round(_cur));\r\n    }\r\n\r\n    window.addEventListener('wheel', function(e) {\r\n        var L = window._prisonLenis;\r\n        if (!L || L.limit === 0) return;\r\n        e.preventDefault();\r\n        e.stopImmediatePropagation();\r\n        var d = e.deltaY;\r\n        if (e.deltaMode === 1) d *= 40;\r\n        if (e.deltaMode === 2) d *= 800;\r\n        if (!_raf) _cur = window.scrollY;   \/\/ arrancar desde posici\u00f3n actual\r\n        _tgt = Math.max(0, Math.min(L.limit, _tgt + d));\r\n        if (!_raf) _raf = requestAnimationFrame(_tick);\r\n    }, { capture: true, passive: false });\r\n\r\n    \/\/ Sincronizar cuando el usuario usa la barra lateral (scroll nativo)\r\n    window.addEventListener('scroll', function() {\r\n        if (!_raf) _cur = _tgt = window.scrollY;\r\n    }, { passive: true });\r\n}();\r\n\r\n!function(){\r\n    function hook(){\r\n        var el = document.getElementById('prison-intro');\r\n        if (!el) { return setTimeout(hook, 50); }\r\n        if (el.dataset.ig) return;\r\n        el.dataset.ig = '1';\r\n        el.addEventListener('click', function go(){\r\n            el.removeEventListener('click', go);\r\n            gsap.to(el, { y: '-100%', duration: 0.85, ease: 'power2.inOut',\r\n                onComplete: function(){\r\n                    el.style.display = 'none';\r\n                    if (typeof window._prisonOnEnter === 'function') window._prisonOnEnter();\r\n                }\r\n            });\r\n        });\r\n    }\r\n    hook();\r\n}();\r\n<\/script>\r\n\r\n<style>\r\n\/* \u2550\u2550 THE PRISON \u2014 CSS v1.0 \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\u2550\u2550\u2550\r\n   Blindado contra Astra \/ Elementor\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\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\r\n\/* \u2500\u2500 CR\u00cdTICO: desbloquear altura scroll (WP\/Astra\/WP-Rocket colapsan html a 100vh) \u2500\u2500 *\/\r\nhtml {\r\n    scroll-behavior: auto !important;\r\n    height: auto !important;\r\n    min-height: 0 !important;\r\n    overflow-y: auto !important;\r\n}\r\n\r\n\/* \u2500\u2500 Override Elementor \/ Astra \u2014 sin restricciones de altura ni overflow \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.elementor-section, .elementor-inner,\r\n.elementor-container, .elementor-row,\r\n.elementor-column, .elementor-column-wrap,\r\n.elementor-widget-wrap, .elementor-widget,\r\n.elementor-widget-html, .elementor-widget-container {\r\n    overflow: visible !important;\r\n    height: auto !important;\r\n    min-height: 0 !important;\r\n    max-height: none !important;\r\n    max-width: 100% !important;\r\n}\r\n\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\nbody {\r\n    background-color: #0A0A0A !important;\r\n    background-image: none !important;\r\n    overflow-x: hidden;\r\n    height: auto !important;\r\n    -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    body { cursor: auto !important; }\r\n}\r\n\r\n\/* \u2500\u2500 Variables globales (para elementos fixed fuera de #sala-prison) \u2500 *\/\r\n:root {\r\n    --prison-black:   #0A0A0A;\r\n    --prison-white:   #F0EDE6;\r\n    --prison-red:     #CC0000;\r\n    --prison-gray-1:  #1A1A1A;\r\n    --prison-gray-2:  #3D3D3D;\r\n    --prison-gray-3:  #7A7A7A;\r\n    --prison-gray-4:  #B8B5AE;\r\n    --prison-sepia:   #C8B89A;\r\n    --trans-fast:     0.18s;\r\n    --trans-mid:      0.38s;\r\n}\r\n@media (min-width: 769px) { body { cursor: none; } }\r\n\r\n\/* \u2500\u2500 Variables scoped \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#sala-prison {\r\n    --prison-black:   #0A0A0A;\r\n    --prison-white:   #F0EDE6;\r\n    --prison-red:     #CC0000;\r\n    --prison-gray-1:  #1A1A1A;\r\n    --prison-gray-2:  #3D3D3D;\r\n    --prison-gray-3:  #7A7A7A;\r\n    --prison-gray-4:  #B8B5AE;\r\n    --prison-sepia:   #C8B89A;\r\n    --panel-gap:      4px;\r\n    --panel-border:   5px solid var(--prison-black);\r\n    --t-hero:         clamp(72px, 11vw, 148px);\r\n    --t-chapter:      clamp(40px, 5.5vw, 88px);\r\n    --t-caption:      clamp(12px, 1.3vw, 17px);\r\n    --t-body:         clamp(14px, 1.5vw, 19px);\r\n    --t-spec:         clamp(11px, 1.1vw, 15px);\r\n    --t-onoma:        clamp(28px, 4.5vw, 68px);\r\n    --trans-fast:     0.18s;\r\n    --trans-mid:      0.38s;\r\n}\r\n\r\n\/* \u2500\u2500 Root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#sala-prison {\r\n    position: relative;\r\n    width: 100vw;\r\n    left: 50%;\r\n    right: 50%;\r\n    margin-left: -50vw;\r\n    margin-right: -50vw;\r\n    overflow: hidden;\r\n    background-color: var(--prison-black);\r\n    color: var(--prison-white);\r\n    font-family: 'Special Elite', cursive;\r\n    z-index: 10;\r\n}\r\n\r\n\/* \u2500\u2500 Blindaje tipogr\u00e1fico contra WP\/Astra \u2500\u2500\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#sala-prison *, #sala-prison *::before, #sala-prison *::after {\r\n    box-sizing: border-box;\r\n}\r\n#sala-prison h1, #sala-prison h2, #sala-prison h3,\r\n#sala-prison h4, #sala-prison h5, #sala-prison h6 {\r\n    color: var(--prison-white) !important;\r\n    word-break: normal !important;\r\n    overflow-wrap: normal !important;\r\n    hyphens: none !important;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n#sala-prison p, #sala-prison span, #sala-prison a {\r\n    color: var(--prison-white) !important;\r\n    margin: 0; padding: 0;\r\n}\r\n#sala-prison button { font-family: inherit; }\r\n#sala-prison img { display: block; }\r\n\r\n\/* \u2500\u2500 Overlay flash negro (reemplaza ink transition) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#prison-flash {\r\n    position: fixed; inset: 0;\r\n    background: var(--prison-black);\r\n    pointer-events: none;\r\n    z-index: 998;\r\n    opacity: 0;\r\n}\r\n\r\n\/* \u2500\u2500 Cursor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#sala-prison * { cursor: none; }\r\n#prison-cursor {\r\n    position: fixed; top: 0; left: 0;\r\n    width: 28px; height: 28px;\r\n    pointer-events: none;\r\n    z-index: 99999;\r\n    transform: translate(-50%, -50%);\r\n    transition: transform 0.1s ease;\r\n}\r\n#prison-cursor.hover { transform: translate(-50%,-50%) scale(1.6); }\r\n@media (max-width: 768px) { #prison-cursor { display: none; } }\r\n\r\n\/* \u2500\u2500 Progress nav \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#prison-progress-nav {\r\n    position: fixed; right: 18px; top: 50%;\r\n    transform: translateY(-50%);\r\n    display: flex; flex-direction: column; gap: 10px;\r\n    z-index: 1000;\r\n}\r\n.pnav-dot {\r\n    width: 10px; height: 10px;\r\n    border-radius: 50% !important;\r\n    background: transparent !important;\r\n    border: 1.5px solid rgba(240,237,230,0.3) !important;\r\n    padding: 0 !important;\r\n    cursor: pointer;\r\n    transition: border-color 0.3s, transform 0.2s;\r\n    appearance: none; -webkit-appearance: none;\r\n    position: relative;\r\n    flex-shrink: 0;\r\n    min-width: 0; min-height: 0;\r\n}\r\n.pnav-dot::after {\r\n    content: '';\r\n    position: absolute;\r\n    width: 4px; height: 4px;\r\n    border-radius: 50%;\r\n    background: transparent;\r\n    top: 50%; left: 50%;\r\n    transform: translate(-50%,-50%);\r\n    transition: background 0.3s;\r\n    pointer-events: none;\r\n}\r\n.pnav-dot.active {\r\n    border-color: var(--prison-red) !important;\r\n    transform: scale(1.2);\r\n}\r\n.pnav-dot.active::after { background: var(--prison-red); }\r\n@media (max-width: 768px) { #prison-progress-nav { display: none; } }\r\n\r\n\/* \u2500\u2500 Pantalla de entrada (gate) \u2014 primer click obligatorio + audio unlock \u2500\u2500 *\/\r\n#prison-intro {\r\n    position: fixed; inset: 0; z-index: 9500;\r\n    background: var(--prison-black);\r\n    display: flex; flex-direction: column;\r\n    align-items: center; justify-content: center;\r\n    cursor: pointer; user-select: none;\r\n    overflow: hidden;\r\n}\r\n.intro-bars-wrap {\r\n    display: none;\r\n}\r\n.intro-content {\r\n    position: relative; z-index: 2;\r\n    text-align: center; padding: 0 24px;\r\n    pointer-events: none;\r\n}\r\n.intro-label {\r\n    font-family: 'Courier Prime', monospace;\r\n    font-size: clamp(10px, 1.1vw, 13px);\r\n    letter-spacing: 0.38em; color: var(--prison-gray-3) !important;\r\n    text-transform: uppercase; display: block; margin-bottom: 18px;\r\n}\r\n.intro-title {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: clamp(100px, 18vw, 240px);\r\n    color: var(--prison-white) !important;\r\n    text-shadow: 5px 5px 0 var(--prison-red), 11px 11px 0 rgba(0,0,0,0.88);\r\n    line-height: 0.85; letter-spacing: 0.02em; display: block;\r\n}\r\n.intro-enter {\r\n    font-family: 'Special Elite', cursive;\r\n    font-size: clamp(13px, 1.3vw, 17px);\r\n    color: var(--prison-red) !important;\r\n    letter-spacing: 0.22em; display: block; margin-top: 40px;\r\n    animation: intro-pulse 1.5s ease-in-out infinite;\r\n}\r\n@keyframes intro-pulse {\r\n    0%, 100% { opacity: 1; }\r\n    50%       { opacity: 0.12; }\r\n}\r\n\r\n\/* \u2500\u2500 Loader \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#prison-loader {\r\n    position: fixed; inset: 0;\r\n    background: var(--prison-black);\r\n    z-index: 9000;\r\n    display: flex; flex-direction: column;\r\n    align-items: center; justify-content: center; gap: 20px;\r\n    transition: opacity 0.8s ease;\r\n}\r\n#prison-loader.hidden { opacity: 0; pointer-events: none; }\r\n.loader-title {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: clamp(56px, 10vw, 120px);\r\n    color: var(--prison-white);\r\n    text-shadow: 4px 4px 0 var(--prison-red), 8px 8px 0 var(--prison-black);\r\n    letter-spacing: 0.08em;\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    animation: loader-in 0.6s 0.4s forwards;\r\n}\r\n.loader-bar-wrap {\r\n    width: 200px; height: 2px; background: var(--prison-gray-1);\r\n    opacity: 0; animation: loader-in 0.4s 0.6s forwards;\r\n}\r\n.loader-bar-fill {\r\n    height: 100%; width: 0; background: var(--prison-red);\r\n    transition: width 1.2s ease;\r\n}\r\n.loader-sub {\r\n    font-family: 'Oswald', sans-serif; font-size: 11px;\r\n    letter-spacing: 0.35em; color: var(--prison-gray-3);\r\n    text-transform: uppercase;\r\n    opacity: 0; animation: loader-in 0.4s 0.8s forwards;\r\n}\r\n@keyframes loader-in {\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* \u2500\u2500 Grain overlay (fuera de #sala-prison para no romper sticky\/fixed) \u2500\u2500 *\/\r\n#prison-grain-overlay {\r\n    position: fixed; inset: 0;\r\n    pointer-events: none;\r\n    z-index: 20;\r\n    mix-blend-mode: screen;\r\n    opacity: 0.40;\r\n    background-image: url(\"data:image\/svg+xml,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/><feColorMatrix type='saturate' values='0'\/><\/filter><rect width='240' height='240' filter='url(%23g)'\/><\/svg>\");\r\n    background-size: 240px;\r\n    animation: grain-anim 0.12s steps(1) infinite;\r\n}\r\n@keyframes grain-anim {\r\n    0%  { background-position:  0px    0px;   }\r\n    20% { background-position: -50px  -30px;  }\r\n    40% { background-position:  30px   15px;  }\r\n    60% { background-position: -15px   50px;  }\r\n    80% { background-position:  60px  -25px;  }\r\n}\r\n\r\n\/* \u2500\u2500 Secciones base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.prison-section {\r\n    position: relative;\r\n    min-height: 100dvh;\r\n    overflow: clip;\r\n    background: var(--prison-black);\r\n}\r\n.has-budget    { height: 250vh; }\r\n.has-budget-lg { height: 400vh; }\r\n.has-budget-md { height: 200vh; }\r\n.has-budget-sm { height: 150vh; }\r\n.sticky-content {\r\n    position: relative;\r\n    height: 100dvh; overflow: hidden;\r\n    background: var(--prison-black);\r\n    z-index: 1;\r\n}\r\n\r\n\/* \u2500\u2500 Im\u00e1genes de fondo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.prison-bg-img {\r\n    position: absolute; inset: 0;\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n    object-fit: cover; object-position: center;\r\n    z-index: 0;\r\n}\r\n\r\n\/* \u2500\u2500 Video de fondo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.prison-bg-video {\r\n    position: absolute; inset: 0;\r\n    width: 100% !important; height: 100% !important;\r\n    object-fit: cover;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n.prison-bg-video.screen-blend { mix-blend-mode: screen; }\r\n\r\n\/* \u2500\u2500 Halftone overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.halftone-overlay {\r\n    position: absolute; inset: 0;\r\n    pointer-events: none; z-index: 2;\r\n    background-image: radial-gradient(closest-side, rgba(0,0,0,0.85) 1px, transparent 0);\r\n    background-size: 4px 4px;\r\n    filter: contrast(21);\r\n    opacity: 0.32;\r\n}\r\n\r\n\/* \u2500\u2500 Comic panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.comic-panel {\r\n    position: relative; overflow: hidden;\r\n    outline: var(--panel-border);\r\n    outline-offset: calc(-1 * var(--panel-border));\r\n    background: var(--prison-black);\r\n}\r\n.comic-panel[data-panel] { opacity: 0; transform: scale(0.85); }\r\n\r\n\/* \u2500\u2500 Caption box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.caption-box {\r\n    display: inline-block;\r\n    font-family: 'Oswald', sans-serif; font-weight: 700;\r\n    font-size: var(--t-caption);\r\n    background: var(--prison-white); color: var(--prison-black);\r\n    border: 3px solid var(--prison-black);\r\n    padding: 6px 14px;\r\n    text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.3;\r\n}\r\n.caption-chapter {\r\n    position: absolute; top: 20px; left: 20px; z-index: 20;\r\n    background: var(--prison-red); color: var(--prison-white) !important;\r\n    border-color: var(--prison-red);\r\n}\r\n\r\n\/* \u2500\u2500 Speech bubble \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.speech-bubble {\r\n    position: absolute; bottom: 64px; left: 28px; max-width: 320px;\r\n    font-family: 'Special Elite', cursive; font-size: var(--t-body);\r\n    background: var(--prison-white); color: var(--prison-black) !important;\r\n    border: 3px solid var(--prison-black); border-radius: 12px;\r\n    padding: 14px 18px; z-index: 15;\r\n    clip-path: inset(0 100% 0 0);\r\n}\r\n.speech-bubble::after {\r\n    content: ''; position: absolute;\r\n    bottom: -20px; left: 24px;\r\n    border-left: 12px solid transparent;\r\n    border-right: 12px solid transparent;\r\n    border-top: 20px solid var(--prison-black);\r\n}\r\n\r\n\/* \u2500\u2500 Hotspot \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.prison-hotspot {\r\n    position: absolute;\r\n    width: 40px; height: 40px;\r\n    background: none; border: none;\r\n    z-index: 25;\r\n    transform: translate(-50%, -50%);\r\n    display: flex; align-items: center; justify-content: center;\r\n    cursor: none;\r\n}\r\n.hotspot-ring {\r\n    display: block !important;\r\n    width: 26px !important; height: 26px !important;\r\n    border-radius: 50% !important;\r\n    border: 2px solid var(--prison-red) !important;\r\n    background: rgba(204,0,0,0.08) !important;\r\n    position: relative;\r\n    flex-shrink: 0;\r\n}\r\n.hotspot-ring::before {\r\n    content: '';\r\n    position: absolute;\r\n    width: 8px; height: 8px;\r\n    border-radius: 50%;\r\n    background: var(--prison-red);\r\n    top: 50%; left: 50%;\r\n    transform: translate(-50%,-50%);\r\n}\r\n.hotspot-ring::after {\r\n    content: ''; position: absolute; inset: -7px;\r\n    border-radius: 50%; border: 1.5px solid rgba(204,0,0,0.45);\r\n    animation: hs-ping 2s cubic-bezier(0,.2,.2,1) infinite;\r\n}\r\n@keyframes hs-ping {\r\n    0%  { transform: scale(0.8); opacity: 1; }\r\n    100%{ transform: scale(2.4); opacity: 0; }\r\n}\r\n\r\n\/* \u2500\u2500 Onomatopeya hover \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.onomatopoeia {\r\n    position: absolute;\r\n    font-family: 'Bangers', cursive;\r\n    font-size: var(--t-onoma);\r\n    color: var(--prison-red);\r\n    text-shadow: 3px 3px 0 var(--prison-black), -1px -1px 0 var(--prison-black);\r\n    letter-spacing: 0.05em; pointer-events: none;\r\n    opacity: 0; transform: scale(0.5);\r\n    z-index: 30;\r\n    transition: opacity 0.2s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);\r\n}\r\n.comic-panel:hover .onomatopoeia { opacity: 1; transform: scale(1); }\r\n\r\n\/* \u2550\u2550 SECCI\u00d3N 0 \u2014 HERO \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\u2550\u2550\u2550\u2550 *\/\r\n#prison-hero .hero-content {\r\n    position: absolute; inset: 0; z-index: 10;\r\n    display: flex; flex-direction: column;\r\n    justify-content: center; align-items: flex-start;\r\n    padding: clamp(24px, 5vw, 80px);\r\n}\r\n.hero-title {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: var(--t-hero);\r\n    color: var(--prison-white) !important;\r\n    text-shadow: 4px 4px 0 var(--prison-red), 8px 8px 0 rgba(0,0,0,0.8);\r\n    letter-spacing: 0.04em; line-height: 0.92;\r\n    margin-bottom: 16px;\r\n    will-change: transform, opacity;\r\n    transform-origin: center center;\r\n}\r\n.hero-subtitle {\r\n    font-family: 'Special Elite', cursive;\r\n    font-size: clamp(15px, 1.8vw, 22px);\r\n    color: var(--prison-gray-4) !important;\r\n    max-width: 480px; line-height: 1.5;\r\n    margin-bottom: 32px;\r\n}\r\n.scroll-cue {\r\n    display: flex; align-items: center; gap: 10px;\r\n    font-family: 'Oswald', sans-serif; font-size: 12px;\r\n    letter-spacing: 0.25em; text-transform: uppercase;\r\n    color: var(--prison-gray-3) !important;\r\n    animation: scroll-bounce 2s ease-in-out infinite;\r\n}\r\n.scroll-cue svg { animation: arrow-drop 2s ease-in-out infinite; }\r\n@keyframes scroll-bounce {\r\n    0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); }\r\n}\r\n@keyframes arrow-drop {\r\n    0%,100%{ transform: translateY(0); } 50%{ transform: translateY(5px); }\r\n}\r\n\r\n\/* \u2500\u2500 Typewriter cursor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.tw-cursor {\r\n    color: var(--prison-red);\r\n    animation: tw-blink 0.65s step-end infinite;\r\n}\r\n@keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }\r\n\r\n\/* \u2550\u2550 SECCI\u00d3N 1 \u2014 LA DETENCI\u00d3N \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.comic-grid-3 {\r\n    display: grid;\r\n    grid-template-columns: 60fr 40fr;\r\n    grid-template-rows: 50dvh 50dvh;\r\n    gap: var(--panel-gap);\r\n    height: 100dvh;\r\n}\r\n.panel-large { grid-row: 1 \/ 3; }\r\n.panel-top   { grid-row: 1; }\r\n.panel-bot   { grid-row: 2; }\r\n\r\n\/* Panel expediente \u2014 interactivo *\/\r\n.panel-clickable {\r\n    border: none; padding: 0; text-align: left;\r\n    display: block; width: 100%;\r\n}\r\n.panel-clickable:hover { filter: brightness(1.15); box-shadow: 0 8px 24px rgba(0,0,0,0.7); }\r\n.panel-clickable::after {\r\n    content: ''; position: absolute;\r\n    top: 10px; right: 10px;\r\n    width: 9px; height: 9px; border-radius: 50%;\r\n    background: var(--prison-red);\r\n    animation: red-dot-pulse 1.8s ease-in-out infinite;\r\n    pointer-events: none; z-index: 30;\r\n}\r\n.photo-hotspot-overlay::after {\r\n    content: ''; position: absolute;\r\n    top: 10px; right: 10px;\r\n    width: 9px; height: 9px; border-radius: 50%;\r\n    background: var(--prison-red);\r\n    animation: red-dot-pulse 1.8s ease-in-out infinite;\r\n    pointer-events: none; z-index: 30;\r\n}\r\n@keyframes red-dot-pulse {\r\n    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(204,0,0,0.5); }\r\n    50%       { transform: scale(1.5); opacity: 0.7; box-shadow: 0 0 0 5px rgba(204,0,0,0); }\r\n}\r\n.panel-hover-hint {\r\n    position: absolute; bottom: 12px; right: 12px; z-index: 20;\r\n    font-family: 'Oswald', sans-serif; font-size: 11px;\r\n    letter-spacing: 0.2em; text-transform: uppercase;\r\n    color: var(--prison-red) !important;\r\n    background: rgba(0,0,0,0.7); padding: 4px 10px;\r\n    border: 1px solid var(--prison-red);\r\n    opacity: 0; transition: opacity 0.2s;\r\n}\r\n.panel-clickable:hover .panel-hover-hint { opacity: 1; }\r\n\r\n@media (max-width: 768px) {\r\n    .comic-grid-3 {\r\n        grid-template-columns: 1fr;\r\n        grid-template-rows: auto;\r\n        height: auto;\r\n    }\r\n    .panel-large { grid-row: auto; min-height: 60vw; }\r\n    .panel-top, .panel-bot { grid-row: auto; min-height: 44vw; }\r\n}\r\n\r\n\/* \u2550\u2550 SECCI\u00d3N 2 \u2014 LA CELDA \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.comic-grid-celda {\r\n    display: grid;\r\n    grid-template-columns: 65fr 35fr;\r\n    grid-template-rows: 50dvh 50dvh;\r\n    gap: var(--panel-gap);\r\n    height: 100dvh;\r\n}\r\n.panel-bars-wrap { grid-row: 1 \/ 3; position: relative; }\r\n#prison-bars-canvas {\r\n    position: absolute; inset: 0;\r\n    width: 100% !important; height: 100% !important;\r\n    z-index: 5;\r\n}\r\n.prison-specs-panel {\r\n    background: var(--prison-gray-1); border: var(--panel-border);\r\n    padding: 14px 16px; overflow: hidden;\r\n    display: flex; flex-direction: column; gap: 4px;\r\n    z-index: 10; position: relative;\r\n}\r\n.spec-line {\r\n    font-family: 'Courier Prime', monospace; font-size: var(--t-spec);\r\n    color: var(--prison-gray-4) !important;\r\n    opacity: 0; transform: translateX(20px);\r\n    border-bottom: 1px solid var(--prison-gray-2); padding-bottom: 4px;\r\n}\r\n.spec-label { color: var(--prison-gray-3) !important; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }\r\n.spec-value { color: var(--prison-white) !important; font-size: var(--t-spec); font-weight: 700; }\r\n.spec-bar-wrap { height: 4px; background: var(--prison-gray-2); margin-top: 4px; }\r\n.spec-bar-fill { height: 100%; background: var(--prison-red); width: 0; }\r\n.spec-genre-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }\r\n.spec-genre-tag {\r\n    font-family: 'Oswald', sans-serif; font-size: 10px;\r\n    letter-spacing: 0.12em; text-transform: uppercase;\r\n    background: rgba(204,0,0,0.12); color: var(--prison-red) !important;\r\n    border: 1px solid rgba(204,0,0,0.4); padding: 2px 8px;\r\n}\r\n.specs-tagline {\r\n    font-family: 'Special Elite', cursive; font-size: 11px;\r\n    color: var(--prison-gray-3) !important; font-style: italic;\r\n    border-top: 1px solid var(--prison-gray-2); padding-top: 6px;\r\n    margin-top: 2px; line-height: 1.3;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .comic-grid-celda { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }\r\n    .panel-bars-wrap { grid-row: auto; height: 60vw; }\r\n    #prison-bars-canvas { display: none; }\r\n    .panel-bars-wrap .prison-bg-img { z-index: 0; }\r\n}\r\n\r\n\/* \u2550\u2550 SECCI\u00d3N 3 \u2014 EL TABLERO \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#prison-cap-3 .sticky-content {\r\n    background-image: url('https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/evidence-board-bg.webp');\r\n    background-size: cover; background-position: center;\r\n}\r\n.evidence-board {\r\n    position: absolute; inset: 0; z-index: 5;\r\n}\r\n.evidence-grid {\r\n    position: absolute; inset: 0;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    grid-template-rows: 1fr 1fr;\r\n    gap: 40px; padding: 60px 80px;\r\n}\r\n.evidence-photo-wrap {\r\n    position: relative; cursor: none;\r\n    display: flex; align-items: center; justify-content: center;\r\n}\r\n.evidence-photo {\r\n    position: relative; z-index: 10;\r\n    opacity: 0; transform: translateY(-30px) rotate(0deg);\r\n    transition: transform 0.3s;\r\n}\r\n.evidence-photo:hover { filter: brightness(1.12); z-index: 20; }\r\n.evidence-photo img {\r\n    width: 200px; height: auto; display: block;\r\n    border: 8px solid var(--prison-white);\r\n    border-bottom: 40px solid var(--prison-white);\r\n    box-shadow: 4px 4px 12px rgba(0,0,0,0.8);\r\n    filter: grayscale(1) contrast(1.2);\r\n}\r\n.photo-hotspot-overlay {\r\n    position: absolute;\r\n    top: 50%; left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 220px; height: 220px;\r\n    z-index: 15;\r\n    background: none; border: none; cursor: none;\r\n}\r\n.evidence-sticky {\r\n    font-family: 'Special Elite', cursive;\r\n    font-size: 12px; line-height: 1.5;\r\n    background: #f5f0d8; color: #2a2a2a !important;\r\n    padding: 10px 12px;\r\n    box-shadow: 2px 3px 8px rgba(0,0,0,0.5);\r\n    max-width: 160px;\r\n    opacity: 0;\r\n    position: absolute;\r\n}\r\n.evidence-strings-svg {\r\n    position: absolute; inset: 0;\r\n    width: 100%; height: 100%;\r\n    pointer-events: none; z-index: 6;\r\n}\r\n.board-caption {\r\n    position: absolute; bottom: 40px; right: 60px; z-index: 20;\r\n    text-align: right;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .evidence-grid {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        grid-template-rows: 1fr 1fr;\r\n        gap: 12px;\r\n        padding: 52px 18px 36px;\r\n        overflow: visible;\r\n        align-items: center;\r\n        justify-items: center;\r\n    }\r\n    .evidence-photo img { width: min(110px, 36vw); }\r\n    .evidence-sticky { max-width: 110px; font-size: 10px; padding: 6px 8px; }\r\n    .board-caption { bottom: 12px; right: 14px; }\r\n}\r\n\r\n\/* \u2550\u2550 SECCI\u00d3N 4 \u2014 LA FICHA \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.comic-grid-mugshot {\r\n    display: grid;\r\n    grid-template-columns: 42fr 58fr;\r\n    gap: var(--panel-gap); height: 100dvh;\r\n}\r\n.mugshot-panel {\r\n    position: relative; overflow: hidden;\r\n    background: var(--prison-gray-1);\r\n    display: flex; flex-direction: column;\r\n    align-items: center; justify-content: center;\r\n    padding: 32px 24px; gap: 16px;\r\n}\r\n.mugshot-panel img { width: 100%; max-width: 280px; display: block; filter: grayscale(1); }\r\n.mugshot-markers {\r\n    position: absolute; inset: 0;\r\n    background-image: repeating-linear-gradient(\r\n        90deg, transparent 0, transparent 48px, rgba(240,237,230,0.07) 48px, rgba(240,237,230,0.07) 49px\r\n    );\r\n    pointer-events: none;\r\n}\r\n.mugshot-number {\r\n    font-family: 'Courier Prime', monospace; font-size: 14px;\r\n    color: var(--prison-gray-3) !important;\r\n    letter-spacing: 0.15em;\r\n}\r\n.mugshot-stamp {\r\n    position: absolute; top: 30px; right: 20px;\r\n    font-family: 'Oswald', sans-serif; font-weight: 700;\r\n    font-size: 22px; letter-spacing: 0.1em;\r\n    color: var(--prison-red) !important;\r\n    border: 3px solid var(--prison-red); padding: 4px 8px;\r\n    transform: rotate(-15deg); opacity: 0.85;\r\n}\r\n.trophies-panel {\r\n    background: var(--prison-black);\r\n    display: flex; flex-direction: column;\r\n    justify-content: flex-start; gap: 2px;\r\n    padding: 56px 0 24px;\r\n    overflow: hidden;\r\n}\r\n.trophy-item {\r\n    border: none; background: none;\r\n    border-top: 1px solid var(--prison-gray-2);\r\n    padding: 11px 22px;\r\n    display: flex; align-items: center; gap: 12px;\r\n    cursor: none; text-align: left;\r\n    transition: background 0.2s;\r\n    opacity: 0; transform: translateX(20px);\r\n    width: 100%;\r\n}\r\n.trophy-item:last-child { border-bottom: 1px solid var(--prison-gray-2); }\r\n.trophy-item:hover, .trophy-item.open { background: var(--prison-gray-1); }\r\n.trophy-item.open { border-color: var(--prison-red); }\r\n.trophy-icon { flex: 0 0 28px; color: var(--prison-gray-3); transition: color 0.2s; }\r\n.trophy-item.open .trophy-icon { color: var(--prison-red); }\r\n.trophy-icon svg { width: 28px; height: 28px; }\r\n.trophy-name {\r\n    font-family: 'Oswald', sans-serif; font-weight: 700;\r\n    font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;\r\n    color: var(--prison-gray-4) !important; transition: color 0.2s;\r\n}\r\n.trophy-item.open .trophy-name { color: var(--prison-white) !important; }\r\n.trophy-desc {\r\n    font-family: 'Special Elite', cursive; font-size: 13px;\r\n    color: var(--prison-gray-3) !important; line-height: 1.5;\r\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease;\r\n    padding: 0 22px 0 62px;\r\n}\r\n.trophy-desc.expanded { max-height: 120px; padding-bottom: 10px; }\r\n\r\n@media (max-width: 768px) {\r\n    .comic-grid-mugshot {\r\n        grid-template-columns: 1fr;\r\n        grid-template-rows: auto 1fr;\r\n        height: 100%;\r\n    }\r\n    .mugshot-panel {\r\n        flex-direction: row;\r\n        padding: 14px 16px;\r\n        gap: 14px;\r\n        justify-content: flex-start;\r\n        align-items: center;\r\n    }\r\n    .mugshot-panel img { max-width: 120px; width: 30vw; flex-shrink: 0; }\r\n    .mugshot-number { font-size: 11px; }\r\n    .mugshot-stamp { font-size: 14px; top: 10px; right: 10px; padding: 3px 6px; }\r\n    .trophies-panel { padding: 0; }\r\n    .trophies-panel > div:first-child { padding: 8px 14px 2px; }\r\n    .trophy-item { padding: 8px 14px; gap: 10px; }\r\n    .trophy-icon { flex: 0 0 22px; }\r\n    .trophy-icon svg { width: 22px; height: 22px; }\r\n    .trophy-name { font-size: 13px; }\r\n    .trophy-desc { font-size: 11px; line-height: 1.4; padding: 0 14px 0 46px; }\r\n    .trophy-desc.expanded { max-height: 72px; padding-bottom: 6px; }\r\n}\r\n\r\n\/* \u2500\u2500 Cap 5 + 6 sticky override \u2014 fondo propio, no negro \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#prison-cap-5 .sticky-content,\r\n#prison-cta .sticky-content {\r\n    background: transparent;\r\n}\r\n\r\n\/* \u2550\u2550 SECCI\u00d3N 5 \u2014 LA SILLA \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#prison-cap-5 { position: relative; }\r\n#prison-chair-canvas {\r\n    position: absolute; inset: 0;\r\n    width: 100% !important; height: 100% !important;\r\n    z-index: 3; pointer-events: none;\r\n}\r\n.chair-content {\r\n    position: absolute; inset: 0; z-index: 10;\r\n    display: flex; flex-direction: column;\r\n    justify-content: flex-end; align-items: flex-start;\r\n    padding: clamp(24px,5vw,80px) clamp(24px,5vw,80px) clamp(60px,8vh,100px);\r\n}\r\n.chair-tagline {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: clamp(36px,5.5vw,80px);\r\n    color: var(--prison-white) !important;\r\n    text-shadow: 3px 3px 0 var(--prison-black);\r\n    line-height: 1.05;\r\n}\r\n.chair-tagline-sub {\r\n    font-family: 'Special Elite', cursive;\r\n    font-size: clamp(12px,1.3vw,16px);\r\n    color: var(--prison-gray-3) !important;\r\n    margin-top: 12px; font-style: italic;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    #prison-chair-canvas { display: none; }\r\n}\r\n\r\n\/* \u2550\u2550 SECCI\u00d3N 6 \u2014 CTA: LA FUGA \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#prison-cta { position: relative; background: var(--prison-black); }\r\n\r\n.prison-slider {\r\n    position: relative; width: 100%; height: 100dvh;\r\n    display: flex; overflow: hidden;\r\n}\r\n.slider-side {\r\n    position: relative; height: 100%; overflow: hidden;\r\n    transition: none;\r\n}\r\n.slider-left  { width: 50%; }\r\n.slider-right { width: 50%; }\r\n.slider-side img {\r\n    position: absolute; inset: 0;\r\n    width: 100% !important; height: 100% !important;\r\n    object-fit: cover; object-position: center;\r\n}\r\n.slider-left img  { object-position: left center; }\r\n.slider-right img { object-position: right center; }\r\n.slider-label {\r\n    position: absolute; top: 24px;\r\n    font-family: 'Oswald', sans-serif; font-weight: 700;\r\n    font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase;\r\n    padding: 6px 14px; z-index: 10;\r\n}\r\n.slider-label-left  { left: 20px;  background: rgba(0,0,0,0.7); color: var(--prison-gray-3) !important; }\r\n.slider-label-right { right: 20px; background: rgba(0,0,0,0.7); color: var(--prison-white) !important; }\r\n\r\n.slider-handle {\r\n    position: absolute; top: 0; left: 50%;\r\n    width: 4px; height: 100%;\r\n    background: var(--prison-white);\r\n    transform: translateX(-50%);\r\n    z-index: 20; cursor: col-resize;\r\n    display: flex; align-items: center; justify-content: center;\r\n}\r\n.slider-handle::before {\r\n    content: '';\r\n    width: 36px; height: 36px;\r\n    border-radius: 50%;\r\n    background: var(--prison-white);\r\n    border: 3px solid var(--prison-black);\r\n    box-shadow: 0 0 0 2px var(--prison-white);\r\n}\r\n\r\n.cta-overlay {\r\n    position: absolute; inset: 0; z-index: 25;\r\n    display: flex; flex-direction: column;\r\n    align-items: center; justify-content: center;\r\n    pointer-events: none; gap: 16px; overflow: hidden;\r\n    background: radial-gradient(ellipse 90% 70% at center, rgba(0,0,0,0.92) 25%, rgba(0,0,0,0) 100%);\r\n}\r\n.cta-title {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: clamp(64px, 10vw, 140px);\r\n    color: var(--prison-white);\r\n    text-shadow: 4px 4px 0 var(--prison-red), 8px 8px 0 rgba(0,0,0,0.9);\r\n    line-height: 0.9; letter-spacing: 0.02em;\r\n    text-align: center;\r\n}\r\n.cta-hook {\r\n    font-family: 'Special Elite', cursive;\r\n    font-size: clamp(15px, 1.8vw, 23px);\r\n    color: var(--prison-gray-4); text-align: center;\r\n    letter-spacing: 0.06em; max-width: 480px; line-height: 1.55;\r\n    margin-top: -4px;\r\n}\r\n.cta-main-btn {\r\n    pointer-events: all;\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: clamp(22px,3.5vw,44px);\r\n    letter-spacing: 0.1em;\r\n    background: var(--prison-red); color: var(--prison-white) !important;\r\n    border: 2px solid var(--prison-red); padding: 14px 44px;\r\n    text-decoration: none; display: inline-block;\r\n    transition: background var(--trans-fast), color var(--trans-fast);\r\n    cursor: none;\r\n    text-align: center;\r\n}\r\n.cta-main-btn:hover {\r\n    background: var(--prison-black);\r\n    color: var(--prison-red) !important;\r\n}\r\n.cta-specs {\r\n    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;\r\n    pointer-events: none;\r\n}\r\n.cta-chip {\r\n    font-family: 'Courier Prime', monospace; font-size: 11px;\r\n    letter-spacing: 0.12em; text-transform: uppercase;\r\n    background: rgba(0,0,0,0.7); color: var(--prison-gray-4) !important;\r\n    border: 1px solid var(--prison-gray-2); padding: 4px 12px;\r\n}\r\n\r\n\/* Wanted Poster \u2014 Photo Upload *\/\r\n.wanted-photo-label {\r\n    display: flex; align-items: center; gap: 8px;\r\n    font-family: 'Courier Prime', monospace; font-size: 12px;\r\n    letter-spacing: 0.14em; text-transform: uppercase;\r\n    color: var(--prison-gray-3) !important;\r\n    border: 1px dashed var(--prison-gray-2); padding: 10px 18px;\r\n    cursor: pointer; transition: border-color 0.2s, color 0.2s;\r\n    flex: 1; min-width: 180px; justify-content: center;\r\n}\r\n.wanted-photo-label:hover { border-color: var(--prison-sepia); color: var(--prison-sepia) !important; }\r\n.wanted-photo-input { display: none; }\r\n.wanted-photo-preview {\r\n    display: none; position: relative; flex: 0 0 auto;\r\n    align-items: flex-start; gap: 10px;\r\n}\r\n.wanted-photo-preview.visible { display: flex; }\r\n.wanted-photo-preview img {\r\n    width: 80px; height: 96px; object-fit: cover; display: block;\r\n    filter: grayscale(1) contrast(1.4);\r\n    border: 3px solid var(--prison-gray-2);\r\n}\r\n.wanted-photo-clear {\r\n    position: absolute; top: -8px; right: -8px;\r\n    background: var(--prison-red); color: var(--prison-white);\r\n    border: none; border-radius: 50%;\r\n    width: 20px; height: 20px; font-size: 11px; line-height: 1;\r\n    cursor: pointer; display: flex; align-items: center; justify-content: center;\r\n    font-family: 'Oswald', sans-serif;\r\n}\r\n\r\n\/* Wanted Poster *\/\r\n.wanted-section {\r\n    padding: clamp(48px,8vh,80px) clamp(24px,5vw,80px);\r\n    background: var(--prison-gray-1);\r\n    display: flex; flex-direction: column;\r\n    align-items: center; gap: 28px;\r\n}\r\n.wanted-title {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: clamp(28px,4vw,52px); letter-spacing: 0.1em;\r\n    color: var(--prison-white) !important; text-align: center;\r\n}\r\n.wanted-form {\r\n    display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;\r\n    max-width: 600px; width: 100%;\r\n}\r\n.wanted-input, .wanted-select {\r\n    font-family: 'Courier Prime', monospace; font-size: 14px;\r\n    background: var(--prison-black); color: var(--prison-white);\r\n    border: 1px solid var(--prison-gray-2); padding: 10px 16px;\r\n    flex: 1; min-width: 180px;\r\n}\r\n.wanted-select option { background: var(--prison-black); }\r\n.wanted-submit {\r\n    font-family: 'Bebas Neue', sans-serif; font-size: 20px;\r\n    letter-spacing: 0.1em;\r\n    background: var(--prison-red); color: var(--prison-white);\r\n    border: none; padding: 10px 28px; cursor: pointer;\r\n    transition: background var(--trans-fast);\r\n}\r\n.wanted-submit:hover { background: var(--prison-gray-2); }\r\n#prison-wanted-canvas { display: none; margin: 0 auto; max-width: 300px; width: 100%; }\r\n.wanted-actions { display: none; gap: 12px; flex-wrap: wrap; justify-content: center; }\r\n.wanted-download, .wanted-share {\r\n    font-family: 'Oswald', sans-serif; font-size: 14px;\r\n    letter-spacing: 0.1em; text-transform: uppercase;\r\n    padding: 8px 20px; border: 1px solid var(--prison-gray-2);\r\n    color: var(--prison-white) !important; text-decoration: none;\r\n    background: var(--prison-black);\r\n    transition: border-color var(--trans-fast); cursor: pointer;\r\n}\r\n.wanted-download:hover, .wanted-share:hover { border-color: var(--prison-white); }\r\n\r\n@media (max-width: 768px) {\r\n    .prison-slider { flex-direction: column; height: auto; }\r\n    .slider-left, .slider-right { width: 100%; height: 40dvh; }\r\n    .slider-handle { display: none; }\r\n    .slider-label { display: none; }\r\n}\r\n\r\n\/* \u2550\u2550 MODAL \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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#prison-modal {\r\n    position: fixed; inset: 0; z-index: 9500;\r\n    display: flex; align-items: center; justify-content: center;\r\n    padding: 20px;\r\n}\r\n.modal-backdrop {\r\n    position: absolute; inset: 0;\r\n    background: rgba(10,10,10,0.92);\r\n}\r\n.modal-content {\r\n    position: relative; z-index: 1;\r\n    background: var(--prison-black);\r\n    border: 2px solid var(--prison-gray-2);\r\n    max-width: 720px; width: 100%;\r\n    max-height: 90dvh; overflow-y: auto;\r\n}\r\n.modal-close {\r\n    position: absolute; top: 12px; right: 14px;\r\n    background: none; border: none;\r\n    font-family: 'Courier Prime', monospace; font-size: 20px;\r\n    color: var(--prison-gray-3) !important; cursor: pointer; z-index: 10;\r\n    transition: color var(--trans-fast);\r\n}\r\n.modal-close:hover { color: var(--prison-white) !important; }\r\n.modal-video-wrapper { position: relative; padding-top: 56.25%; }\r\n.modal-video-wrapper video,\r\n.modal-video-wrapper iframe {\r\n    position: absolute; inset: 0;\r\n    width: 100%; height: 100%; border: none;\r\n}\r\n.modal-file {\r\n    padding: 28px 32px;\r\n    font-family: 'Courier Prime', monospace;\r\n    background: var(--prison-sepia); color: var(--prison-black) !important;\r\n}\r\n.modal-file-header {\r\n    font-family: 'Bebas Neue', sans-serif; font-size: 28px;\r\n    letter-spacing: 0.1em; margin-bottom: 16px;\r\n    color: var(--prison-black) !important;\r\n    border-bottom: 2px solid var(--prison-black); padding-bottom: 8px;\r\n}\r\n.modal-file img { width: 160px; float: left; margin: 0 20px 12px 0; filter: grayscale(1); }\r\n.modal-file-row { font-size: 13px; margin-bottom: 8px; color: var(--prison-black) !important; }\r\n.redacted {\r\n    background: var(--prison-black); color: var(--prison-black);\r\n    letter-spacing: 0.05em;\r\n}\r\n.modal-endings { display: flex; gap: 4px; }\r\n.modal-endings iframe { flex: 1; height: 240px; }\r\n.modal-endings-label {\r\n    display: flex; gap: 4px; padding: 8px;\r\n    background: var(--prison-gray-1);\r\n}\r\n.modal-endings-label span {\r\n    flex: 1; font-family: 'Oswald', sans-serif; font-size: 12px;\r\n    letter-spacing: 0.1em; text-transform: uppercase; text-align: center;\r\n    color: var(--prison-gray-3) !important;\r\n}\r\n<\/style>\r\n\r\n<!-- \u2550\u2550 HTML PAYLOAD \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\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n\r\n<!-- FIXED UI \u2014 FUERA de #sala-prison para evitar el bug filter+position:fixed\r\n     (cualquier ancestro con filter:url() crea un nuevo containing block,\r\n      rompiendo position:fixed de los descendientes) -->\r\n<div id=\"prison-flash\" aria-hidden=\"true\"><\/div>\r\n\r\n<div id=\"prison-cursor\" aria-hidden=\"true\">\r\n    <svg viewBox=\"0 0 28 28\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"28\" height=\"28\">\r\n        <line x1=\"14\" y1=\"2\"  x2=\"14\" y2=\"10\" stroke=\"#F0EDE6\" stroke-width=\"1.5\"\/>\r\n        <line x1=\"14\" y1=\"18\" x2=\"14\" y2=\"26\" stroke=\"#F0EDE6\" stroke-width=\"1.5\"\/>\r\n        <line x1=\"2\"  y1=\"14\" x2=\"10\" y2=\"14\" stroke=\"#F0EDE6\" stroke-width=\"1.5\"\/>\r\n        <line x1=\"18\" y1=\"14\" x2=\"26\" y2=\"14\" stroke=\"#F0EDE6\" stroke-width=\"1.5\"\/>\r\n        <circle cx=\"14\" cy=\"14\" r=\"2.5\" fill=\"#CC0000\"\/>\r\n        <circle cx=\"14\" cy=\"14\" r=\"6\"   stroke=\"#F0EDE6\" stroke-width=\"1\" opacity=\"0.5\"\/>\r\n    <\/svg>\r\n<\/div>\r\n\r\n<nav id=\"prison-progress-nav\" aria-label=\"Chapter navigation\"><\/nav>\r\n\r\n<div id=\"prison-loader\" role=\"status\" aria-label=\"Loading\">\r\n    <div class=\"loader-title\">THE PRISON<\/div>\r\n    <div class=\"loader-bar-wrap\">\r\n        <div class=\"loader-bar-fill\" id=\"prison-loader-fill\"><\/div>\r\n    <\/div>\r\n    <div class=\"loader-sub\">Virtua Barcelona \u00b7 Loading experience<\/div>\r\n<\/div>\r\n\r\n<div id=\"prison-intro\" role=\"button\" tabindex=\"0\" aria-label=\"Enter The Prison \u2014 Virtua Barcelona\">\r\n    <div class=\"intro-bars-wrap\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"intro-content\">\r\n        <span class=\"intro-label\">Virtua Barcelona presents<\/span>\r\n        <span class=\"intro-title\">THE<br>PRISON<\/span>\r\n        <span class=\"intro-enter\">\u2014 Press to enter \u2014<\/span>\r\n    <\/div>\r\n<\/div>\r\n\r\n<div id=\"prison-grain-overlay\" aria-hidden=\"true\"><\/div>\r\n\r\n<!-- \u2550\u2550 CONTENIDO SCROLLABLE \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<div id=\"sala-prison\">\r\n\r\n    <!-- SVG filters globales -->\r\n    <svg style=\"display:none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n        <defs>\r\n            <filter id=\"prison-grain\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\">\r\n                <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.62\" numOctaves=\"3\" stitchTiles=\"stitch\"\/>\r\n                <feColorMatrix type=\"saturate\" values=\"0\"\/>\r\n                <feBlend in=\"SourceGraphic\" mode=\"overlay\" result=\"blend\"\/>\r\n                <feComposite in=\"blend\" in2=\"SourceGraphic\" operator=\"in\"\/>\r\n            <\/filter>\r\n        <\/defs>\r\n    <\/svg>\r\n\r\n    <!-- \u2550\u2550 SECCI\u00d3N 0 \u2014 HERO: EL CRIMEN \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    <section id=\"prison-hero\" class=\"prison-section\" data-chapter=\"0\" data-audio=\"ambient-chains\">\r\n        <div class=\"comic-panel\" style=\"height:100dvh\">\r\n            <picture>\r\n                <img fetchpriority=\"high\" decoding=\"async\" class=\"prison-bg-img\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/intro-woman-red.webp\" alt=\"\" role=\"presentation\" loading=\"eager\" width=\"1920\" height=\"1080\">\r\n            <\/picture>\r\n            <div class=\"halftone-overlay\" aria-hidden=\"true\"><\/div>\r\n\r\n            <div class=\"hero-content\">\r\n                <div class=\"caption-box\" style=\"margin-bottom:20px\">VIRTUA BARCELONA PRESENTS<\/div>\r\n                <h1 class=\"hero-title\">THE<br>PRISON<\/h1>\r\n                <p class=\"hero-subtitle\">\"Only the innocent pray.<br>The guilty plan.\"<\/p>\r\n                <div class=\"scroll-cue\">\r\n                    <svg width=\"14\" height=\"22\" viewBox=\"0 0 14 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <line x1=\"7\" y1=\"0\" x2=\"7\" y2=\"16\" stroke=\"#7A7A7A\" stroke-width=\"2\"\/>\r\n                        <polyline points=\"2,11 7,18 12,11\" stroke=\"#7A7A7A\" stroke-width=\"2\" stroke-linejoin=\"miter\" fill=\"none\"\/>\r\n                    <\/svg>\r\n                    Scroll\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Hotspot \u2014 clip highlight -->\r\n            <button class=\"prison-hotspot\" data-modal=\"clip-highlight\"\r\n                style=\"left:38%;top:52%\" aria-label=\"View gameplay trailer\">\r\n                <span class=\"hotspot-ring\"><\/span>\r\n            <\/button>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550 SECCI\u00d3N 1 \u2014 LA DETENCI\u00d3N \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    <section id=\"prison-cap-1\" class=\"prison-section has-budget\" data-chapter=\"1\" data-audio=\"ambient-recorder\">\r\n        <div class=\"sticky-content\">\r\n            <div class=\"caption-box caption-chapter\">CHAPTER I \u2014 THE ARREST<\/div>\r\n\r\n            <div class=\"comic-grid-3\">\r\n                <!-- Panel A grande izquierda -->\r\n                <div class=\"comic-panel panel-large\" data-panel=\"0\">\r\n                    <img decoding=\"async\" class=\"prison-bg-img\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/interrogation-room.webp\" alt=\"Interrogation room\" loading=\"lazy\">\r\n                    <div class=\"halftone-overlay\" aria-hidden=\"true\"><\/div>\r\n                    <div class=\"speech-bubble\">\"You have 60 minutes.<br>Use them well.\"<\/div>\r\n                    <span class=\"onomatopoeia\" style=\"top:20%;right:15%;transform:rotate(-8deg) scale(0.5)\">CLANG!<\/span>\r\n                <\/div>\r\n\r\n                <!-- Panel B esposas -->\r\n                <div class=\"comic-panel panel-top\" data-panel=\"1\">\r\n                    <img decoding=\"async\" class=\"prison-bg-img\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/handcuffs-crop.webp\" alt=\"\" role=\"presentation\" loading=\"lazy\">\r\n                    <div class=\"halftone-overlay\" aria-hidden=\"true\"><\/div>\r\n                    <div class=\"speech-bubble\" style=\"bottom:auto;top:14px;left:14px;font-size:13px;max-width:200px\">\"Think you can escape?\"<\/div>\r\n                    <span class=\"onomatopoeia\" style=\"bottom:15%;left:10%;top:auto;transform:rotate(5deg) scale(0.5)\">BANG!<\/span>\r\n                <\/div>\r\n\r\n                <!-- Panel C expediente \u2014 clickable -->\r\n                <button class=\"comic-panel panel-bot panel-clickable\" data-panel=\"2\"\r\n                    data-modal=\"criminal-file\" aria-label=\"View criminal file\">\r\n                    <img decoding=\"async\" class=\"prison-bg-img\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/file-folder.webp\" alt=\"Criminal file\" loading=\"lazy\">\r\n                    <div class=\"halftone-overlay\" aria-hidden=\"true\"><\/div>\r\n                    <div class=\"panel-hover-hint\">FILE \u2192<\/div>\r\n                    <span class=\"onomatopoeia\" style=\"top:auto;bottom:20%;right:8%;transform:rotate(-5deg) scale(0.5)\">CLICK!<\/span>\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550 SECCI\u00d3N 2 \u2014 LA CELDA \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    <section id=\"prison-cap-2\" class=\"prison-section has-budget\" data-chapter=\"2\" data-audio=\"ambient-electric-hum\">\r\n        <div class=\"sticky-content\">\r\n            <div class=\"caption-box caption-chapter\">CHAPTER II \u2014 THE CELL<\/div>\r\n\r\n            <div class=\"comic-grid-celda\">\r\n                <!-- Panel A Three.js barras -->\r\n                <div class=\"comic-panel panel-bars-wrap\" data-panel=\"0\">\r\n                    <picture>\r\n                        <source media=\"(max-width:768px)\" srcset=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/corridor-mobile.webp\">\r\n                        <img decoding=\"async\" class=\"prison-bg-img\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/corridor.webp\" alt=\"\" role=\"presentation\" loading=\"lazy\">\r\n                    <\/picture>\r\n                    <div class=\"halftone-overlay\" aria-hidden=\"true\"><\/div>\r\n                    <canvas id=\"prison-bars-canvas\" aria-hidden=\"true\"><\/canvas>\r\n                <\/div>\r\n\r\n                <!-- Panel B specs -->\r\n                <div class=\"comic-panel panel-top prison-specs-panel\" data-panel=\"3\">\r\n                    <div class=\"caption-box\" style=\"margin-bottom:12px;background:var(--prison-red);color:var(--prison-white);border-color:var(--prison-red)\">TECHNICAL DATA \u2014 CASE 47<\/div>\r\n                    <div class=\"spec-line\" data-spec-line>\r\n                        <div class=\"spec-label\">INMATES<\/div>\r\n                        <div class=\"spec-value\">2 \u2014 6 players<\/div>\r\n                    <\/div>\r\n                    <div class=\"spec-line\" data-spec-line>\r\n                        <div class=\"spec-label\">DURATION<\/div>\r\n                        <div class=\"spec-value\">60 minutes<\/div>\r\n                    <\/div>\r\n                    <div class=\"spec-line\" data-spec-line>\r\n                        <div class=\"spec-label\">LEVEL<\/div>\r\n                        <div class=\"spec-value\">HIGH \u00b7 8\/10<\/div>\r\n                        <div class=\"spec-bar-wrap\"><div class=\"spec-bar-fill\" data-fill=\"80\"><\/div><\/div>\r\n                    <\/div>\r\n                    <div class=\"spec-line\" data-spec-line>\r\n                        <div class=\"spec-label\">MINIMUM AGE<\/div>\r\n                        <div class=\"spec-value\">+10 years<\/div>\r\n                    <\/div>\r\n                    <div class=\"spec-line\" data-spec-line>\r\n                        <div class=\"spec-label\">GENRE<\/div>\r\n                        <div class=\"spec-genre-tags\">\r\n                            <span class=\"spec-genre-tag\">Crime<\/span>\r\n                            <span class=\"spec-genre-tag\">Mystery<\/span>\r\n                            <span class=\"spec-genre-tag\">Adventure<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <p class=\"specs-tagline\">\"Here puzzles aren't solved.<br>They are survived.\"<\/p>\r\n                <\/div>\r\n\r\n                <!-- Panel C corredor video + hotspot -->\r\n                <div class=\"comic-panel panel-bot\" data-panel=\"4\" style=\"position:relative\">\r\n                    <video class=\"prison-bg-video\"\r\n                        src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/corridor-ambient.webm\"\r\n                        autoplay loop muted playsinline style=\"pointer-events:none\" aria-hidden=\"true\"><\/video>\r\n                    <div class=\"halftone-overlay\" aria-hidden=\"true\"><\/div>\r\n                    <button class=\"prison-hotspot\" data-modal=\"clip-stealth\"\r\n                        style=\"left:70%;top:65%\" aria-label=\"View gameplay \u2014 guard section\">\r\n                        <span class=\"hotspot-ring\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"caption-box\" style=\"position:absolute;bottom:12px;left:12px;font-size:11px\">\r\n                        THE GUARD HAS A PATTERN. FIND IT.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550 SECCI\u00d3N 3 \u2014 EL TABLERO \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    <section id=\"prison-cap-3\" class=\"prison-section has-budget-lg\" data-chapter=\"3\" data-audio=\"ambient-drip\">\r\n        <div class=\"sticky-content\">\r\n            <div class=\"caption-box caption-chapter\">CHAPTER III \u2014 THE BOARD<\/div>\r\n\r\n            <div class=\"evidence-board\" id=\"prison-evidence-board\">\r\n                <!-- Overlay de oscurecimiento -->\r\n                <div style=\"position:absolute;inset:0;background:rgba(0,0,0,0.45);z-index:2\"><\/div>\r\n\r\n                <div class=\"evidence-grid\">\r\n                    <!-- Foto 1 \u2014 Interrogatorio -->\r\n                    <div class=\"evidence-photo-wrap\">\r\n                        <div class=\"evidence-photo\" data-photo=\"0\" style=\"transform:rotate(-3deg)\">\r\n                            <img decoding=\"async\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/evidence-photo-1.webp\" alt=\"Interrogation zone\" loading=\"lazy\" width=\"200\">\r\n                            <div class=\"caption-box\" style=\"font-size:10px;width:100%;text-align:center;margin-top:4px\">ROOM A \u2014 INTERROGATION<\/div>\r\n                        <\/div>\r\n                        <button class=\"photo-hotspot-overlay\" data-modal=\"clip-interrogation\" aria-label=\"View interrogation room clip\"><\/button>\r\n                        <div class=\"evidence-sticky\" style=\"top:-40px;right:-20px;transform:rotate(4deg)\">\r\n                            Guard pattern:<br>4 min\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Foto 2 \u2014 Celda -->\r\n                    <div class=\"evidence-photo-wrap\">\r\n                        <div class=\"evidence-photo\" data-photo=\"1\" style=\"transform:rotate(2deg)\">\r\n                            <img decoding=\"async\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/evidence-photo-2.webp\" alt=\"Cells zone\" loading=\"lazy\" width=\"200\">\r\n                            <div class=\"caption-box\" style=\"font-size:10px;width:100%;text-align:center;margin-top:4px\">BLOCK B \u2014 CELLS<\/div>\r\n                        <\/div>\r\n                        <button class=\"photo-hotspot-overlay\" data-modal=\"clip-cell\" aria-label=\"View cells zone clip\"><\/button>\r\n                        <div class=\"evidence-sticky\" style=\"bottom:-30px;left:-30px;transform:rotate(-6deg)\">\r\n                            Camera 3<br>blind spot\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Foto 3 \u2014 Lavander\u00eda -->\r\n                    <div class=\"evidence-photo-wrap\">\r\n                        <div class=\"evidence-photo\" data-photo=\"2\" style=\"transform:rotate(5deg)\">\r\n                            <img decoding=\"async\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/evidence-photo-3.webp\" alt=\"Laundry zone\" loading=\"lazy\" width=\"200\">\r\n                            <div class=\"caption-box\" style=\"font-size:10px;width:100%;text-align:center;margin-top:4px\">ZONE C \u2014 LAUNDRY<\/div>\r\n                        <\/div>\r\n                        <button class=\"photo-hotspot-overlay\" data-modal=\"clip-laundry\" aria-label=\"View laundry clip\"><\/button>\r\n                        <div class=\"evidence-sticky\" style=\"top:-35px;right:10px;transform:rotate(-3deg)\">\r\n                            Ventilation<br>access\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Foto 4 \u2014 Ejecuci\u00f3n -->\r\n                    <div class=\"evidence-photo-wrap\">\r\n                        <div class=\"evidence-photo\" data-photo=\"3\" style=\"transform:rotate(-4deg)\">\r\n                            <img decoding=\"async\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/evidence-photo-4.webp\" alt=\"Execution room\" loading=\"lazy\" width=\"200\">\r\n                            <div class=\"caption-box\" style=\"font-size:10px;width:100%;text-align:center;margin-top:4px\">ROOM D \u2014 EXECUTION<\/div>\r\n                        <\/div>\r\n                        <button class=\"photo-hotspot-overlay\" data-modal=\"clip-execution\" aria-label=\"View execution room clip\"><\/button>\r\n                        <div class=\"evidence-sticky\" style=\"bottom:-20px;right:-20px;transform:rotate(7deg)\">\r\n                            Is the key<br>here?\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- SVG strings conectando fotos -->\r\n                <svg class=\"evidence-strings-svg\" aria-hidden=\"true\"><\/svg>\r\n\r\n                <!-- Caption central -->\r\n                <div class=\"board-caption\">\r\n                    <div class=\"caption-box\" style=\"font-size:14px;display:block;padding:10px 20px\">\r\n                        \"Every zone. Every guard.<br>Every second.\"\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550 SECCI\u00d3N 4 \u2014 LA FICHA \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    <section id=\"prison-cap-4\" class=\"prison-section has-budget\" data-chapter=\"4\" data-audio=\"ambient-drip\">\r\n        <div class=\"sticky-content\">\r\n            <div class=\"caption-box caption-chapter\">CHAPTER IV \u2014 THE FILE<\/div>\r\n\r\n            <div class=\"comic-grid-mugshot\">\r\n                <!-- Panel izquierda \u2014 mugshot -->\r\n                <div class=\"mugshot-panel comic-panel\" data-panel=\"0\">\r\n                    <div class=\"mugshot-markers\" aria-hidden=\"true\"><\/div>\r\n                    <div class=\"mugshot-stamp\" aria-hidden=\"true\">OPEN<br>CASE<\/div>\r\n                    <img decoding=\"async\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/mugshot.webp\" alt=\"Mugshot\" loading=\"lazy\" width=\"280\">\r\n                    <p class=\"mugshot-number\">INMATE NO.: #2719-VB<\/p>\r\n                    <div class=\"caption-box\" style=\"font-size:11px;text-align:center\">\r\n                        STATE PRISON \u00b7 BARCELON\u00c9S\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Panel derecha \u2014 trofeos -->\r\n                <div class=\"trophies-panel comic-panel\" data-panel=\"1\">\r\n                    <div style=\"padding:18px 28px 6px\">\r\n                        <div class=\"caption-box\" style=\"background:var(--prison-black);color:var(--prison-gray-3);border-color:var(--prison-gray-2);font-size:10px;letter-spacing:0.2em\">\r\n                            \u2593\u2593 CLASSIFIED FILES \u2593\u2593\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <button class=\"trophy-item\" data-trophy=\"0\" aria-expanded=\"false\">\r\n                        <span class=\"trophy-icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\" \/>\r\n                            <\/svg>\r\n                        <\/span>\r\n                        <span class=\"trophy-name\">Andy Dufresne<\/span>\r\n                    <\/button>\r\n                    <div class=\"trophy-desc\">Escape without asking for a single hint. Patience is rewarded \u2014 just like in Shawshank.<\/div>\r\n\r\n                    <button class=\"trophy-item\" data-trophy=\"1\" aria-expanded=\"false\">\r\n                        <span class=\"trophy-icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\" \/>\r\n                            <\/svg>\r\n                        <\/span>\r\n                        <span class=\"trophy-name\">Frank Morris<\/span>\r\n                    <\/button>\r\n                    <div class=\"trophy-desc\">Escape with more than 30 minutes on the clock. The man who beat Alcatraz didn't improvise. Neither do you.<\/div>\r\n\r\n                    <button class=\"trophy-item\" data-trophy=\"2\" aria-expanded=\"false\">\r\n                        <span class=\"trophy-icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\" \/>\r\n                            <\/svg>\r\n                        <\/span>\r\n                        <span class=\"trophy-name\">The Great Escape<\/span>\r\n                    <\/button>\r\n                    <div class=\"trophy-desc\">6 players. 0 detections. 1 escape. The perfect plan exists. McQueen would be proud.<\/div>\r\n\r\n                    <button class=\"trophy-item\" data-trophy=\"3\" aria-expanded=\"false\">\r\n                        <span class=\"trophy-icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\" \/>\r\n                            <\/svg>\r\n                        <\/span>\r\n                        <span class=\"trophy-name\">The Birdman<\/span>\r\n                    <\/button>\r\n                    <div class=\"trophy-desc\">There is a hidden message in the cell. Few have found it. Stroud knew it \u2014 you can too.<\/div>\r\n\r\n                    <button class=\"trophy-item\" data-trophy=\"4\" aria-expanded=\"false\">\r\n                        <span class=\"trophy-icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\" \/>\r\n                            <\/svg>\r\n                        <\/span>\r\n                        <span class=\"trophy-name\">Papillon<\/span>\r\n                    <\/button>\r\n                    <div class=\"trophy-desc\">Trigger the alternate ending. Henri Charri\u00e8re chose the impossible path. Not everyone has that courage.<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550 SECCI\u00d3N 5 \u2014 LA SILLA \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    <section id=\"prison-cap-5\" class=\"prison-section has-budget-sm\" data-chapter=\"5\" data-audio=\"ambient-static\">\r\n        <div class=\"sticky-content\">\r\n            <picture>\r\n                <source media=\"(max-width:768px)\" srcset=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/electric-chair-mobile.webp\">\r\n                <img decoding=\"async\" class=\"prison-bg-img\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/electric-chair.webp\" alt=\"\" role=\"presentation\" loading=\"eager\" width=\"1920\" height=\"1080\">\r\n            <\/picture>\r\n            <div class=\"halftone-overlay\" style=\"opacity:0.45\" aria-hidden=\"true\"><\/div>\r\n\r\n            <!-- Video arco el\u00e9ctrico -->\r\n            <video class=\"prison-bg-video screen-blend\"\r\n                src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/electric-arc.webm\"\r\n                autoplay loop muted playsinline style=\"pointer-events:none\" aria-hidden=\"true\"><\/video>\r\n\r\n            <!-- Three.js chispas -->\r\n            <canvas id=\"prison-chair-canvas\" aria-hidden=\"true\"><\/canvas>\r\n\r\n            <div class=\"chair-content\">\r\n                <div class=\"caption-box caption-chapter\" style=\"position:static;margin-bottom:20px\">CHAPTER V \u2014 THE SENTENCE<\/div>\r\n                <h2 class=\"chair-tagline\">TWO ENDINGS.<\/h2>\r\n                <h2 class=\"chair-tagline\">ONLY ONE IS WORTH LIVING.<\/h2>\r\n                <p class=\"chair-tagline-sub\">The other one too.<\/p>\r\n            <\/div>\r\n\r\n            <!-- Hotspot silla \u2014 ambos finales -->\r\n            <button class=\"prison-hotspot\" data-modal=\"clip-endings\"\r\n                style=\"left:50%;top:45%\" aria-label=\"View both possible endings\">\r\n                <span class=\"hotspot-ring\" style=\"background:var(--prison-red);box-shadow:0 0 8px var(--prison-red)\"><\/span>\r\n            <\/button>\r\n            <span class=\"onomatopoeia\" style=\"top:25%;right:12%;transform:rotate(6deg)\">BZZT!<\/span>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550 SECCI\u00d3N 6 \u2014 CTA: LA FUGA \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    <section id=\"prison-cta\" class=\"prison-section has-budget-lg\" data-chapter=\"6\" data-audio=\"ambient-wind\" data-scene=\"cta-reveal\">\r\n        <div class=\"sticky-content\">\r\n        <div class=\"caption-box caption-chapter\">CHAPTER VI \u2014 THE ESCAPE<\/div>\r\n\r\n        <!-- Split slider -->\r\n        <div class=\"prison-slider\" id=\"prison-split-slider\">\r\n            <div class=\"slider-side slider-left\" id=\"slider-left\">\r\n                <picture>\r\n                    <source media=\"(max-width:768px)\" srcset=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/hero-outro-bad.webp\">\r\n                    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/hero-outro-bad.webp\" alt=\"\" role=\"presentation\" loading=\"lazy\" width=\"2400\" height=\"1350\">\r\n                <\/picture>\r\n                <div class=\"halftone-overlay\" aria-hidden=\"true\"><\/div>\r\n                <div class=\"slider-label slider-label-left\">IN HERE<\/div>\r\n            <\/div>\r\n            <div class=\"slider-side slider-right\" id=\"slider-right\">\r\n                <picture>\r\n                    <source media=\"(max-width:768px)\" srcset=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/hero-outro-bad.webp\">\r\n                    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2026\/04\/hero-outro-bad.webp\" alt=\"\" role=\"presentation\" loading=\"lazy\" width=\"2400\" height=\"1350\">\r\n                <\/picture>\r\n                <div class=\"slider-label slider-label-right\">OUT THERE<\/div>\r\n            <\/div>\r\n            <div class=\"slider-handle\" id=\"slider-handle\" role=\"separator\" aria-label=\"Drag to compare\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- CTA overlay \u2014 encima del split slider, animado por _animateCTAScene() -->\r\n        <div class=\"cta-overlay\" aria-label=\"Book your sentence\">\r\n            <h2 class=\"cta-title\">THE<br>PRISON<\/h2>\r\n            <p class=\"cta-hook\">Enter if you dare.<br>Leave if you can.<\/p>\r\n            <a href=\"https:\/\/virtuabarcelona.com\/reservas_virtua\/\" class=\"cta-main-btn\" aria-label=\"Book The Prison experience\">BOOK YOUR SENTENCE<\/a>\r\n            <div class=\"cta-specs\">\r\n                <span class=\"cta-chip\">2\u20136 players<\/span>\r\n                <span class=\"cta-chip\">60 min<\/span>\r\n                <span class=\"cta-chip\">VR Escape<\/span>\r\n                <span class=\"cta-chip\">+10 years<\/span>\r\n            <\/div>\r\n        <\/div>\r\n        <\/div><!-- \/.sticky-content -->\r\n    <\/section>\r\n\r\n\r\n<\/div><!-- \/#sala-prison -->\r\n\r\n<!-- JavaScript -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/VirtuaBarcelona\/virtua-assets@main\/prison-v8.js\"><\/script>\r\n\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>THE PRISON Virtua Barcelona \u00b7 Loading experience Virtua Barcelona presents THEPRISON \u2014 Press to enter \u2014 VIRTUA BARCELONA PRESENTS THEPRISON &#8220;Only the innocent pray.The guilty plan.&#8221; Scroll CHAPTER I \u2014 THE ARREST &#8220;You have 60 minutes.Use them well.&#8221; CLANG! &#8220;Think you can escape?&#8221; BANG! FILE \u2192 CLICK! CHAPTER II \u2014 THE CELL TECHNICAL DATA \u2014 [&hellip;]<\/p>\n","protected":false},"author":99992,"featured_media":4576,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-4469","page","type-page","status-publish","has-post-thumbnail","hentry"],"_yoast_wpseo_focuskw":"Prison","_yoast_wpseo_title":null,"_yoast_wpseo_metadesc":"Take on the challenge of 'Escape The Prison' in VR. Can you evade the traps and clear your name in 60 minutes? Book now in Barcelona","yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.3 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Escape Room VR - ARVI - Prison - Virtuabarcelona.com<\/title>\n<meta name=\"description\" content=\"Take on the challenge of &#039;Escape The Prison&#039; in VR. Can you evade the traps and clear your name in 60 minutes? Book now in Barcelona\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/virtuabarcelona.com\/escape-the-prison-vr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Escape Room VR - ARVI - Prison\" \/>\n<meta property=\"og:description\" content=\"Take on the challenge of &#039;Escape The Prison&#039; in VR. Can you evade the traps and clear your name in 60 minutes? Book now in Barcelona\" \/>\n<meta property=\"og:url\" content=\"https:\/\/virtuabarcelona.com\/escape-the-prison-vr\/\" \/>\n<meta property=\"og:site_name\" content=\"Virtuabarcelona.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/virtuabarcelona\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-04T11:19:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2024\/04\/ARVI_VRcovers_PrisonER-min.png\" \/>\n\t<meta property=\"og:image:width\" content=\"322\" \/>\n\t<meta property=\"og:image:height\" content=\"429\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@virtuabarcelona\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/escape-the-prison-vr\\\/\",\"url\":\"https:\\\/\\\/virtuabarcelona.com\\\/escape-the-prison-vr\\\/\",\"name\":\"Escape Room VR - ARVI - Prison - Virtuabarcelona.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/escape-the-prison-vr\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/escape-the-prison-vr\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/virtuabarcelona.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/ARVI_VRcovers_PrisonER-min.png\",\"datePublished\":\"2024-01-28T19:46:57+00:00\",\"dateModified\":\"2026-05-04T11:19:48+00:00\",\"description\":\"Take on the challenge of 'Escape The Prison' in VR. Can you evade the traps and clear your name in 60 minutes? Book now in Barcelona\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/escape-the-prison-vr\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/virtuabarcelona.com\\\/escape-the-prison-vr\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/escape-the-prison-vr\\\/#primaryimage\",\"url\":\"https:\\\/\\\/virtuabarcelona.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/ARVI_VRcovers_PrisonER-min.png\",\"contentUrl\":\"https:\\\/\\\/virtuabarcelona.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/ARVI_VRcovers_PrisonER-min.png\",\"width\":322,\"height\":429},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/escape-the-prison-vr\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/virtuabarcelona.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Escape Room VR &#8211; ARVI &#8211; Prison\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/#website\",\"url\":\"https:\\\/\\\/virtuabarcelona.com\\\/\",\"name\":\"Virtuabarcelona.com\",\"description\":\"Realidad Virtual Barcelona, Experiencias en Realidad Virtual. Arcade de Realidad Virtual. Cumplea\u00f1os Originales, Escape Room VR\",\"publisher\":{\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/virtuabarcelona.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/#organization\",\"name\":\"Virtuabarcelona.com\",\"url\":\"https:\\\/\\\/virtuabarcelona.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/virtuabarcelona.com\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/logotipo-virtua-barcelona.webp\",\"contentUrl\":\"https:\\\/\\\/virtuabarcelona.com\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/logotipo-virtua-barcelona.webp\",\"width\":252,\"height\":67,\"caption\":\"Virtuabarcelona.com\"},\"image\":{\"@id\":\"https:\\\/\\\/virtuabarcelona.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/virtuabarcelona\",\"https:\\\/\\\/x.com\\\/virtuabarcelona\",\"https:\\\/\\\/www.instagram.com\\\/virtuabarcelona\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Escape Room VR - ARVI - Prison - Virtuabarcelona.com","description":"Take on the challenge of 'Escape The Prison' in VR. Can you evade the traps and clear your name in 60 minutes? Book now in Barcelona","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:\/\/virtuabarcelona.com\/escape-the-prison-vr\/","og_locale":"en_US","og_type":"article","og_title":"Escape Room VR - ARVI - Prison","og_description":"Take on the challenge of 'Escape The Prison' in VR. Can you evade the traps and clear your name in 60 minutes? Book now in Barcelona","og_url":"https:\/\/virtuabarcelona.com\/escape-the-prison-vr\/","og_site_name":"Virtuabarcelona.com","article_publisher":"https:\/\/www.facebook.com\/virtuabarcelona","article_modified_time":"2026-05-04T11:19:48+00:00","og_image":[{"width":322,"height":429,"url":"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2024\/04\/ARVI_VRcovers_PrisonER-min.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@virtuabarcelona","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/virtuabarcelona.com\/escape-the-prison-vr\/","url":"https:\/\/virtuabarcelona.com\/escape-the-prison-vr\/","name":"Escape Room VR - ARVI - Prison - Virtuabarcelona.com","isPartOf":{"@id":"https:\/\/virtuabarcelona.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/virtuabarcelona.com\/escape-the-prison-vr\/#primaryimage"},"image":{"@id":"https:\/\/virtuabarcelona.com\/escape-the-prison-vr\/#primaryimage"},"thumbnailUrl":"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2024\/04\/ARVI_VRcovers_PrisonER-min.png","datePublished":"2024-01-28T19:46:57+00:00","dateModified":"2026-05-04T11:19:48+00:00","description":"Take on the challenge of 'Escape The Prison' in VR. Can you evade the traps and clear your name in 60 minutes? Book now in Barcelona","breadcrumb":{"@id":"https:\/\/virtuabarcelona.com\/escape-the-prison-vr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/virtuabarcelona.com\/escape-the-prison-vr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/virtuabarcelona.com\/escape-the-prison-vr\/#primaryimage","url":"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2024\/04\/ARVI_VRcovers_PrisonER-min.png","contentUrl":"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2024\/04\/ARVI_VRcovers_PrisonER-min.png","width":322,"height":429},{"@type":"BreadcrumbList","@id":"https:\/\/virtuabarcelona.com\/escape-the-prison-vr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/virtuabarcelona.com\/en\/"},{"@type":"ListItem","position":2,"name":"Escape Room VR &#8211; ARVI &#8211; Prison"}]},{"@type":"WebSite","@id":"https:\/\/virtuabarcelona.com\/#website","url":"https:\/\/virtuabarcelona.com\/","name":"Virtuabarcelona.com","description":"Realidad Virtual Barcelona, Experiencias en Realidad Virtual. Arcade de Realidad Virtual. Cumplea\u00f1os Originales, Escape Room VR","publisher":{"@id":"https:\/\/virtuabarcelona.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/virtuabarcelona.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/virtuabarcelona.com\/#organization","name":"Virtuabarcelona.com","url":"https:\/\/virtuabarcelona.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/virtuabarcelona.com\/#\/schema\/logo\/image\/","url":"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2023\/06\/logotipo-virtua-barcelona.webp","contentUrl":"https:\/\/virtuabarcelona.com\/wp-content\/uploads\/2023\/06\/logotipo-virtua-barcelona.webp","width":252,"height":67,"caption":"Virtuabarcelona.com"},"image":{"@id":"https:\/\/virtuabarcelona.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/virtuabarcelona","https:\/\/x.com\/virtuabarcelona","https:\/\/www.instagram.com\/virtuabarcelona\/"]}]}},"_links":{"self":[{"href":"https:\/\/virtuabarcelona.com\/en\/wp-json\/wp\/v2\/pages\/4469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/virtuabarcelona.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/virtuabarcelona.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/virtuabarcelona.com\/en\/wp-json\/wp\/v2\/users\/99992"}],"replies":[{"embeddable":true,"href":"https:\/\/virtuabarcelona.com\/en\/wp-json\/wp\/v2\/comments?post=4469"}],"version-history":[{"count":18,"href":"https:\/\/virtuabarcelona.com\/en\/wp-json\/wp\/v2\/pages\/4469\/revisions"}],"predecessor-version":[{"id":30636,"href":"https:\/\/virtuabarcelona.com\/en\/wp-json\/wp\/v2\/pages\/4469\/revisions\/30636"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/virtuabarcelona.com\/en\/wp-json\/wp\/v2\/media\/4576"}],"wp:attachment":[{"href":"https:\/\/virtuabarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=4469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}