{"id":5578,"date":"2026-01-18T11:52:03","date_gmt":"2026-01-18T11:52:03","guid":{"rendered":"https:\/\/jairohdz.com\/f1-unlocked\/?page_id=5578"},"modified":"2026-01-25T15:04:23","modified_gmt":"2026-01-25T15:04:23","slug":"collectibles","status":"publish","type":"page","link":"https:\/\/jairohdz.com\/f1-unlocked\/collectibles\/","title":{"rendered":"Collectibles"},"content":{"rendered":"    <style>\n        \/* Contenedor Principal *\/\n        .f1-nav-wrapper {\n            display: flex;\n            justify-content: center;\n            background: linear-gradient(90deg, transparent 0%, rgba(21, 21, 30, 0.8) 20%, rgba(21, 21, 30, 0.8) 80%, transparent 100%);\n        }\n\n        .f1-nav-bar {\n            display: flex;\n            gap: 15px;\n            padding-bottom: 30px;\n        }\n\n        \/* Bot\u00f3n Base *\/\n        .f1-nav-link {\n            position: relative;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 180px;\n            height: 50px;\n            background: #1b1b24; \/* Carbono suave *\/\n            color: #fff;\n            text-decoration: none !important;\n            font-family: 'Rajdhani', sans-serif;\n            font-weight: 800;\n            font-size: 14px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            \n            \/* La Magia F1: Inclinaci\u00f3n *\/\n            transform: skewX(-20deg);\n            border-left: 4px solid #444;\n            transition: all 0.3s ease;\n            cursor: pointer;\n            box-shadow: 0 4px 10px rgba(0,0,0,0.3);\n            overflow: hidden;\n        }\n\n        \/* Texto (Deshacer inclinaci\u00f3n para que se lea bien) *\/\n        .f1-nav-link span {\n            transform: skewX(20deg); \/* Contrarrestar skew del padre *\/\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        \/* Iconos *\/\n        .f1-nav-link i { font-size: 14px; color: #888; transition: 0.3s; }\n\n        \/* --- ESTADOS --- *\/\n\n        \/* Hover *\/\n        .f1-nav-link:hover {\n            background: #333;\n            border-left-color: #fff;\n            color: #fff !important;\n            transform: skewX(-20deg) translateY(-2px);\n            box-shadow: 0 10px 20px rgba(0,0,0,0.5);\n        }\n\n        \/* Activo (P\u00e1gina Actual) *\/\n        .f1-nav-link.active {\n            background: #e10600; \/* F1 Red *\/\n            border-left-color: #fff;\n            box-shadow: 0 0 15px rgba(225, 6, 0, 0.4);\n        }\n\n        .f1-nav-link.active i { color: #fff; }\n\n        \/* Decoraci\u00f3n Tech (L\u00ednea fina arriba) *\/\n        .f1-nav-link::before {\n            content: '';\n            position: absolute;\n            top: 0; left: 0; width: 100%; height: 2px;\n            background: rgba(255,255,255,0.1);\n        }\n\n        \/* RESPONSIVE *\/\n        @media (max-width: 600px) {\n            .f1-nav-link { width: 140px; font-size: 14px; }\n            .f1-nav-wrapper { padding: 5px; }\n        }\n        \n\/* --- 1. MEN\u00da DE PESTA\u00d1AS (SUB-NAV) --- *\/\n        .f1-nav-wrapper {\n            display: flex;\n            justify-content: center;\n            margin-bottom: 50px;\n            border-bottom: 1px solid rgba(255,255,255,0.1);\n            padding-bottom: 20px;\n            background: linear-gradient(90deg, transparent 0%, rgba(21, 21, 30, 0.5) 50%, transparent 100%);\n        }\n\n        .f1-nav-bar {\n            display: flex;\n            gap: 15px;\n        }\n\n        .f1-nav-link {\n            position: relative;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 12px 30px;\n            background: rgba(255,255,255,0.05);\n            color: #888;\n            text-decoration: none !important;\n            font-weight: 800;\n            font-size: 14px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            transform: skewX(-15deg);\n            border: 1px solid rgba(255,255,255,0.1);\n            transition: all 0.3s ease;\n        }\n\n        .f1-nav-link span { transform: skewX(15deg); } \/* Enderezar texto *\/\n\n        .f1-nav-link:hover {\n            background: #333;\n            color: #fff !important;\n            border-color: #666;\n            transform: skewX(-15deg) translateY(-2px);\n        }\n\n        .f1-nav-link.active {\n            background: var(--f1-red);\n            color: #fff !important;\n            border-color: var(--f1-red);\n            box-shadow: 0 0 15px rgba(225, 6, 0, 0.4);\n        }\n \/* --- RESPONSIVE MOBILE (NAV MENU SCROLL & TEXTOS) --- *\/\n        @media (max-width: 900px) {\n            \n            \/* Scroll Horizontal Men\u00fa *\/\n            .f1-nav-wrapper {\n                justify-content: flex-start; \/* Alinear izq *\/\n                overflow-x: auto; \/* Scroll *\/\n                padding: 15px 0;\n                margin-left: -20px; margin-right: -20px; \/* Desbordar contenedor *\/\n                padding-left: 20px; padding-right: 20px; \/* Relleno interno *\/\n                -webkit-overflow-scrolling: touch;\n                scrollbar-width: none; \/* Firefox *\/\n                background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(20,20,20,1) 100%);\n            }\n            .f1-nav-wrapper::-webkit-scrollbar { display: none; } \/* Chrome *\/\n\n            .f1-nav-bar { width: max-content; gap: 10px; }\n\n            .f1-nav-link {\n                width: auto; min-width: 120px;\n                padding: 10px 15px; font-size: 12px;\n                flex: 0 0 auto; \/* No encoger *\/\n            }\n\n            \/* Ajustes Tipograf\u00eda M\u00f3vil *\/\n            h1.f1-h1 { font-size: 32px; padding-left: 15px; border-width: 4px; margin-top: 30px; }\n            h2.f1-h2 { font-size: 24px; }\n            p.f1-text { font-size: 16px; }\n            \n            .f1-btn-action { width: 100%; text-align: center; box-sizing: border-box; }\n        }\n\n\n\n\n\n    <\/style>\n\n    <div class=\"f1-nav-wrapper\">\n        <div class=\"f1-nav-bar\">\n\n            <a href=\"https:\/\/jairohdz.com\/f1-unlocked\/prizes\/\" class=\"f1-nav-link \">\n                <span>\n                    PRIZES\n                <\/span>\n            <\/a>\n\n            <a href=\"https:\/\/jairohdz.com\/f1-unlocked\/collectibles\/\" class=\"f1-nav-link \">\n                <span>\n                    COLLECTIBLES\n                <\/span>\n            <\/a>\n            \n            <a href=\"https:\/\/jairohdz.com\/f1-unlocked\/mystery-boxes\/\" class=\"f1-nav-link \">\n                <span>\n                    MYSTERY BOXES\n                <\/span>\n            <\/a>\n\n            <a href=\"https:\/\/jairohdz.com\/f1-unlocked\/trading-cards\/\" class=\"f1-nav-link \">\n                <span>\n                    TRADING CARDS\n                <\/span>\n            <\/a>\n            \n            <a href=\"https:\/\/jairohdz.com\/f1-unlocked\/card-packs\/\" class=\"f1-nav-link \">\n                <span>\n                    CARDS PACKS\n                <\/span>\n            <\/a>\n\n        <\/div>\n    <\/div>\n    \n\n\n    <style>\n        .f1-collection-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n            gap: 30px;\n            font-family: 'Rajdhani', sans-serif;\n        }\n        .asset-card-container { perspective: 1200px; height: 520px; cursor: pointer; }\n        .asset-card {\n            position: relative; width: 100%; min-height: 320px;\n            transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);\n            transform-style: preserve-3d;\n            background: linear-gradient(145deg, #23232c 0%, #15151e 100%);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%);\n        }\n        .asset-card-container:hover .asset-card { transform: rotateY(12deg) rotateX(6deg) translateY(-5px); border-color: #e10600; }\n        \n        .rare-Legendary { border-bottom: 5px solid #ff00ff !important; }\n        .rare-Epic { border-bottom: 5px solid #dfff00 !important; }\n        .rare-Rare { border-bottom: 5px solid #00d4ff !important; }\n        .rare-Uncommon { border-bottom: 5px solid #00ff00 !important; }\n        .rare-Common { border-bottom: 5px solid #888 !important; }\n\n        .asset-visual { height: 60%; display: flex; align-items: center; justify-content: center; padding: 0px; }\n        .asset-visual img { max-width: 85%; height: auto; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.7)); transition: 0.6s; }\n        .asset-card-container:hover img { transform: scale(1.1) translateZ(50px); }\n\n        .asset-info { padding: 20px 20px 20px 30px; background: linear-gradient(to top, rgba(10,10,14,0.9), transparent); }\n        .asset-name { color: #fff; text-transform: uppercase; font-style: italic; margin: 0; font-size: 20px; font-weight: 800; }\n\n        \/* Modal 3D Master Layout *\/\n        #f1-3d-modal {\n            position: fixed; \n            top: 0; \n            left: 0; \n            width: 100vw; \n            height: 100vh;\n            background-color: rgba(0, 0, 0, 0.5); \n            z-index: 9999999 !important; \/* Aumentado dr\u00e1sticamente *\/\n            display: none; \n            flex-direction: column; \n            justify-content: center; \n            align-items: center;\n            backdrop-filter: blur(15px);\n            -webkit-backdrop-filter: blur(15px);\n        }\n        \n        \/* El Visor: Obligatorio definir dimensiones expl\u00edcitas *\/\n        model-viewer { \n            width: 90vw; \n            height: 70vh; \n            background: transparent;\n            --progress-bar-color: #e10600;\n        }\n\n        .close-3d { \n            position: absolute; top: 30px; right: 40px; \n            color: white; font-size: 50px; cursor: pointer; \n            font-family: 'Rajdhani'; transition: 0.3s;\n        }\n        .close-3d:hover { color: #e10600; transform: rotate(90deg); }\n\n        #modal-title { \n            color: white; font-family: 'Rajdhani'; \n            text-transform: uppercase; font-style: italic; \n            font-size: 32px; font-weight: 800; margin-bottom: 10px;\n        }\n    <\/style>\n\n    <h2 style=\"margin:0; font-family:'Rajdhani'; font-weight:800; font-style:italic;\">Collectibles available<\/h2><br>\n\n    <div class=\"f1-collection-grid\">\n\n                    <div class=\"asset-card-container\" onclick=\"open3DPlayer('https:\/\/jairohdz.com\/f1-unlocked\/wp-content\/uploads\/sites\/2\/2026\/01\/Charm-Track.glb', 'F1 Track Layout Charm')\">\n                <div class=\"asset-card rare-Rare\">\n                    <div class=\"asset-visual\"><img decoding=\"async\" src=\"https:\/\/jairohdz.com\/f1-unlocked\/wp-content\/uploads\/sites\/2\/2026\/01\/Silverstone-Racing-Circuit-charm-731x1024.png\"><\/div>\n                    <div class=\"asset-info\">\n                        <div style=\"color:#e10600; font-size:10px; font-weight:700; letter-spacing:1px;\">SCAN_ASSET \/\/ #5619<\/div>\n                        <h3 class=\"asset-name\">F1 Track Layout Charm<\/h3>\n                    <\/div>\n                <\/div>\n            <\/div>\n                    <div class=\"asset-card-container\" onclick=\"open3DPlayer('https:\/\/jairohdz.com\/f1-unlocked\/wp-content\/uploads\/sites\/2\/2026\/01\/FIA_Car_Concept_2026.glb', 'FIA Car Concept 2026')\">\n                <div class=\"asset-card rare-Legendary\">\n                    <div class=\"asset-visual\"><img decoding=\"async\" src=\"https:\/\/jairohdz.com\/f1-unlocked\/wp-content\/uploads\/sites\/2\/2026\/01\/FIA-Car-Concept-2026-731x1024.png\"><\/div>\n                    <div class=\"asset-info\">\n                        <div style=\"color:#e10600; font-size:10px; font-weight:700; letter-spacing:1px;\">SCAN_ASSET \/\/ #5624<\/div>\n                        <h3 class=\"asset-name\">FIA Car Concept 2026<\/h3>\n                    <\/div>\n                <\/div>\n            <\/div>\n                    <div class=\"asset-card-container\" onclick=\"open3DPlayer('https:\/\/jairohdz.com\/f1-unlocked\/wp-content\/uploads\/sites\/2\/2026\/01\/f1_helmet_zhouguanyu_chinesegp_helmet.glb', 'Special Edition Helmet')\">\n                <div class=\"asset-card rare-Epic\">\n                    <div class=\"asset-visual\"><img decoding=\"async\" src=\"https:\/\/jairohdz.com\/f1-unlocked\/wp-content\/uploads\/sites\/2\/2026\/01\/Kick-Sauber-Stake-F1-Zhou-Guanyu-2024-731x1024.png\"><\/div>\n                    <div class=\"asset-info\">\n                        <div style=\"color:#e10600; font-size:10px; font-weight:700; letter-spacing:1px;\">SCAN_ASSET \/\/ #5602<\/div>\n                        <h3 class=\"asset-name\">Special Edition Helmet<\/h3>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <\/div>\n\n    <div id=\"f1-3d-modal\">\n        <span class=\"close-3d\" onclick=\"close3DPlayer()\">\u00d7<\/span>\n        <h2 id=\"modal-title\"><\/h2>\n        <div style=\"background: rgba(225, 6, 0, 0.1); border: 1px solid #e10600; padding: 5px 15px; border-radius: 20px; color: #fff; font-size: 12px; margin-bottom: 20px;\">\n            DRAG TO ROTATE \/\/ PINCH TO ZOOM\n        <\/div>\n        \n        <model-viewer id=\"viewer\" src=\"\" auto-rotate camera-controls shadow-intensity=\"2\" environment-image=\"neutral\" exposure=\"1.2\" ar ar-modes=\"webxr scene-viewer quick-look\">\n            <button slot=\"ar-button\" style=\"background-color: white; border-radius: 4px; border: none; position: absolute; top: 16px; right: 16px; padding: 10px; font-family: 'Rajdhani'; font-weight: 800;\">\n                VIEW IN YOUR SPACE (AR)\n            <\/button>\n        <\/model-viewer>\n    <\/div>\n\n    <script>\n    function open3DPlayer(url, title) {\n        if(!url || url === \"\") { \n            alert(\"ENGINE ERROR: 3D data not found for this asset.\"); \n            return; \n        }\n        document.getElementById('modal-title').innerText = title;\n        const viewer = document.getElementById('viewer');\n        viewer.src = url;\n        document.getElementById('f1-3d-modal').style.display = 'flex';\n        document.body.style.overflow = 'hidden';\n    }\n\n    function close3DPlayer() {\n        document.getElementById('f1-3d-modal').style.display = 'none';\n        document.getElementById('viewer').src = '';\n        document.body.style.overflow = 'auto';\n    }\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-5578","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/jairohdz.com\/f1-unlocked\/wp-json\/wp\/v2\/pages\/5578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jairohdz.com\/f1-unlocked\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jairohdz.com\/f1-unlocked\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jairohdz.com\/f1-unlocked\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jairohdz.com\/f1-unlocked\/wp-json\/wp\/v2\/comments?post=5578"}],"version-history":[{"count":5,"href":"https:\/\/jairohdz.com\/f1-unlocked\/wp-json\/wp\/v2\/pages\/5578\/revisions"}],"predecessor-version":[{"id":7341,"href":"https:\/\/jairohdz.com\/f1-unlocked\/wp-json\/wp\/v2\/pages\/5578\/revisions\/7341"}],"wp:attachment":[{"href":"https:\/\/jairohdz.com\/f1-unlocked\/wp-json\/wp\/v2\/media?parent=5578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}