{"id":6335,"date":"2025-10-24T17:47:09","date_gmt":"2025-10-24T17:47:09","guid":{"rendered":"https:\/\/jglinks.com\/?page_id=6335"},"modified":"2026-03-17T16:05:59","modified_gmt":"2026-03-17T16:05:59","slug":"prehome","status":"publish","type":"page","link":"https:\/\/jglinks.com\/","title":{"rendered":"Prehome"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6335\" class=\"elementor elementor-6335\">\n\t\t\t\t<div class=\"elementor-element elementor-element-61be352 e-flex e-con-boxed e-con e-parent\" data-id=\"61be352\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3352922 e-grid e-con-full e-con e-parent\" data-id=\"3352922\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-7adc5c7 e-con-full e-flex e-con e-child\" data-id=\"7adc5c7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-549729d e-con-full e-flex e-con e-child\" data-id=\"549729d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73d35a2 elementor-widget-tablet__width-initial elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"73d35a2\" 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<style>\r\n\/* Contenedor de la pregunta *\/\r\n#quiz-question-container {\r\n    width: 100%;\r\n    \/* En escritorio, ocupa la altura completa para centrarse *\/\r\n    min-height: 60vh;\r\n    display: flex;\r\n    align-items: center;\r\n    \/* En escritorio, alineado a la izquierda cerca del arco *\/\r\n    justify-content: flex-start;\r\n    padding: 20px;\r\n    box-sizing: border-box;\r\n}\r\n\r\n\/* Estilo del Texto de la Pregunta (Escalable) *\/\r\n#quiz-question-text { \r\n    \/* El tama\u00f1o del texto se adapta fluidamente entre 1.8rem y 3.5rem *\/\r\n    font-size: clamp(1.8rem, 3vw, 3.0rem); \r\n    line-height: 1.0;\r\n    color: #D3B56E; \r\n    text-shadow: 0 0 10px rgba(211, 181, 110, 0.4);\r\n    font-weight: 600;\r\n    margin: 0;\r\n    opacity: 0; \/* Aparecer\u00e1 con animaci\u00f3n *\/\r\n}\r\n\r\n\/* --- M\u00d3VIL Y TABLET (Unificaci\u00f3n) --- *\/\r\n\/* Cuando el espacio es reducido, cambiamos la alineaci\u00f3n *\/\r\n@media (max-width: 991px) {\r\n    #quiz-question-container {\r\n        \/* Altura autom\u00e1tica para no ocupar tanto espacio vertical *\/\r\n        min-height: auto;\r\n        \/* Centrado horizontalmente *\/\r\n        justify-content: center;\r\n        text-align: center;\r\n        padding-bottom: 30px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div id=\"quiz-question-container\">\r\n    <h5 id=\"quiz-question-text\">Cargando pregunta...<\/h5>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-470b261 e-con-full e-flex e-con e-child\" data-id=\"470b261\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bda4e7e elementor-widget-tablet__width-initial elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"bda4e7e\" 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<style>\r\n\/* =========================================\r\n   1. CONTENEDOR DE LA EXPERIENCIA\r\n   ========================================= *\/\r\n#quiz-options-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 85vh;\r\n    perspective: 1500px;\r\n    overflow: visible; \r\n}\r\n\r\n\/* =========================================\r\n   2. DISE\u00d1O DE LAS BOLAS (Cristal Transparente)\r\n   ========================================= *\/\r\n.quiz-option {\r\n    position: absolute; \r\n    cursor: pointer;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    text-align: center;\r\n    padding: 15px;\r\n    box-sizing: border-box;\r\n    border-radius: 50%; \r\n    \r\n    \/* Fondo ultra-transparente ORIGINAL *\/\r\n    background: radial-gradient(130% 130% at 20% 20%, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.01) 100%);\r\n    border: 1px solid rgba(211, 181, 110, 0.5);\r\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);\r\n    \r\n    \/* Desenfocado del fondo (Efecto vidrio) *\/\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    \r\n    \/* Tama\u00f1o escalable *\/\r\n    width: clamp(110px, 25vw, 160px);\r\n    height: clamp(110px, 25vw, 160px);\r\n    \r\n    z-index: 10;\r\n    opacity: 0;\r\n    will-change: transform, opacity, filter;\r\n}\r\n\r\n\/* =========================================\r\n   3. TEXTO (Garamond)\r\n   ========================================= *\/\r\n.option-text {\r\n    color: #ffffff;\r\n    font-size: clamp(0.85rem, 1.2vw, 1.05rem);\r\n    line-height: 1.2;\r\n    font-weight: 500;\r\n    text-shadow: 0 0 10px rgba(0,0,0,0.8);\r\n    pointer-events: none;\r\n    font-family: 'EB Garamond', 'Garamond', serif;\r\n}\r\n\r\n\/* HOVER (Efecto al pasar el mouse) *\/\r\n@media (hover: hover) {\r\n    .quiz-option:hover {\r\n        transform: scale(1.1) !important;\r\n        border-color: #D3B56E;\r\n        background: radial-gradient(130% 130% at 20% 20%, rgba(211, 181, 110, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);\r\n        box-shadow: 0 0 25px rgba(211, 181, 110, 0.6);\r\n        z-index: 100;\r\n    }\r\n}\r\n\r\n\/* =========================================\r\n   4. POSICIONES FINALES DEL ARCO\r\n   ========================================= *\/\r\n.pos-1 { top: 5%;  left: 5%; }\r\n.pos-2 { top: 28%; left: 35%; }\r\n.pos-3 { top: 54%; left: 35%; }\r\n.pos-4 { top: 77%; left: 5%; }\r\n\r\n@media (max-width: 991px) {\r\n    #quiz-options-wrapper { height: 70vh; }\r\n    .pos-1 { top: 6%;  left: 0%; }\r\n    .pos-2 { top: 26%; left: 45%; }\r\n    .pos-3 { top: 52%; left: 45%; }\r\n    .pos-4 { top: 74%; left: 0%; }\r\n}\r\n\r\n\/* =========================================\r\n   5. ANIMACI\u00d3N ANTIGRAVEDAD\r\n   ========================================= *\/\r\n@keyframes floatAntigravity {\r\n    0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n    25% { transform: translate(6px, -12px) rotate(1deg); }\r\n    50% { transform: translate(-4px, 8px) rotate(-1deg); }\r\n    75% { transform: translate(-8px, -4px) rotate(0.5deg); }\r\n}\r\n\r\n.is-floating {\r\n    animation: floatAntigravity 7s ease-in-out infinite;\r\n}\r\n\r\n\/* =========================================\r\n   6. VENTANA DE FEEDBACK\r\n   ========================================= *\/\r\n#quiz-feedback {\r\n    position: fixed;\r\n    top: 50%; left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    background: rgba(0,0,0,0.95);\r\n    padding: 2.5rem;\r\n    border-radius: 20px;\r\n    border: 2px solid #D3B56E;\r\n    text-align: center;\r\n    display: none;\r\n    z-index: 999999;\r\n    width: 85%;\r\n    max-width: 450px;\r\n    box-shadow: 0 0 50px rgba(0,0,0,0.9);\r\n    backdrop-filter: blur(10px);\r\n}\r\n<\/style>\r\n\r\n<div id=\"quiz-options-wrapper\">\r\n    <\/div>\r\n\r\n<div id=\"quiz-feedback\">\r\n    <h2 id=\"feedback-title\" style=\"color:#D3B56E; font-family: 'Space Grotesk', sans-serif; letter-spacing: 3px; margin-bottom: 10px;\"><\/h2>\r\n    <p id=\"feedback-sub\" style=\"color:white; font-family: monospace; opacity: 0.6; font-size: 14px;\"><\/p>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/js-cookie\/3.0.5\/js.cookie.min.js\"><\/script> \r\n\r\n<script>\r\n(function() { \r\n    \/\/ --- 1. BASE DE DATOS DE PREGUNTAS (Tuya original) ---\r\n    const REDIRECT_URL = 'https:\/\/jglinks.com\/index.php\/jglinks-home\/'; \r\n    \r\n    const quizDatabase = [\r\n        {\r\n            question: \"When does an idea become structure rather than opinion?\",\r\n            options: [\r\n                \"When it is stated with absolute confidence.\", \r\n                \"When it is elegant and widely admired.\", \r\n                \"When it is measured, constrained, and reproducible.\", \r\n                \"When it aligns with prior beliefs.\"\r\n            ],\r\n            correctAnswer: \"When it is measured, constrained, and reproducible.\"\r\n        },\r\n        {\r\n            question: \"What turns a claim into knowledge rather than belief?\",\r\n            options: [\r\n                \"Broad consensus.\", \r\n                \"Precise measurement and reproducible outcomes.\", \r\n                \"Authority endorsement.\", \r\n                \"Vivid storytelling.\"\r\n            ], \r\n            correctAnswer: \"Precise measurement and reproducible outcomes.\"\r\n        }\r\n    ];\r\n\r\n    \/\/ --- 2. INICIO DE LA EXPERIENCIA MENTEX ---\r\n    function startExperience() {\r\n        \/\/ Enlaza con tu widget HTML de la izquierda\r\n        const questionTextEl = document.getElementById('quiz-question-text'); \r\n        const optionsWrapper = document.getElementById('quiz-options-wrapper');\r\n        const feedbackEl = document.getElementById('quiz-feedback');\r\n        const titleEl = document.getElementById('feedback-title');\r\n        const subEl = document.getElementById('feedback-sub');\r\n\r\n        if (!optionsWrapper) return;\r\n\r\n        \/\/ SELECCIONA UNA PREGUNTA AL AZAR\r\n        const randomIndex = Math.floor(Math.random() * quizDatabase.length);\r\n        const currentQuiz = quizDatabase[randomIndex];\r\n\r\n        \/\/ ACTUALIZA EL WIDGET 1 Y LO ANIMA\r\n        if(questionTextEl) {\r\n            questionTextEl.textContent = currentQuiz.question;\r\n            gsap.fromTo(questionTextEl, {opacity: 0, y: -30}, {opacity: 1, y: 0, duration: 1.2, ease: \"power2.out\", delay: 0.3});\r\n        }\r\n\r\n        \/\/ --- 3. CREAR BOLAS Y APLICAR LA ESPIRAL ---\r\n        optionsWrapper.innerHTML = ''; \r\n        const bubbles = [];\r\n\r\n        \/\/ Prepara cada bola en el HTML\r\n        currentQuiz.options.forEach((text, index) => {\r\n            const bubble = document.createElement('div');\r\n            bubble.className = `quiz-option pos-${index + 1}`;\r\n            \r\n            const isCorrect = text === currentQuiz.correctAnswer;\r\n            bubble.setAttribute('data-correct', isCorrect ? \"true\" : \"false\");\r\n            \r\n            bubble.innerHTML = `<span class=\"option-text\">${text}<\/span>`;\r\n            \r\n            \/\/ L\u00f3gica de click\r\n            bubble.addEventListener('click', function() {\r\n                if (this.getAttribute('data-correct') === \"true\") {\r\n                    feedbackEl.style.display = \"block\";\r\n                    feedbackEl.style.borderColor = \"#D3B56E\";\r\n                    titleEl.innerText = \"ACCESS GRANTED\";\r\n                    titleEl.style.color = \"#D3B56E\";\r\n                    subEl.innerText = \"SYSTEM_UPDATE: REDIRECTING...\";\r\n                    gsap.fromTo(feedbackEl, {scale: 0.8, opacity: 0}, {scale: 1, opacity: 1, duration: 0.5, ease: \"back.out\"});\r\n                    \r\n                    Cookies.set('access_granted', 'true', { expires: 0.05, secure: true, sameSite: 'Lax' });\r\n                    setTimeout(() => { window.location.href = REDIRECT_URL; }, 2000);\r\n                } else {\r\n                    gsap.to(this, { x: 10, repeat: 5, yoyo: true, duration: 0.05, clearProps: \"x\" });\r\n                    this.style.borderColor = \"#ff4747\";\r\n                    \r\n                    feedbackEl.style.display = \"block\";\r\n                    feedbackEl.style.borderColor = \"#ff4747\";\r\n                    titleEl.innerText = \"INCORRECT\";\r\n                    titleEl.style.color = \"#ff4747\";\r\n                    subEl.innerHTML = '<button id=\"reload-page-btn\" style=\"margin-top:15px; padding:10px 20px; background:#1e1e1e; color:white; border:none; border-radius:5px; cursor:pointer; font-family:sans-serif;\">Try another question<\/button>';\r\n                    \r\n                    gsap.fromTo(feedbackEl, {scale: 0.8, opacity: 0}, {scale: 1, opacity: 1, duration: 0.5});\r\n                }\r\n            });\r\n\r\n            optionsWrapper.appendChild(bubble);\r\n            bubbles.push(bubble);\r\n        });\r\n\r\n        \/\/ CALCULA DESDE D\u00d3NDE NACEN LAS BOLAS (Centro del texto de la pregunta)\r\n        let startX = 0, startY = 0;\r\n        if(questionTextEl) {\r\n            const qRect = questionTextEl.getBoundingClientRect();\r\n            const wRect = optionsWrapper.getBoundingClientRect();\r\n            startX = (qRect.left - wRect.left) + (qRect.width \/ 2);\r\n            startY = (qRect.top - wRect.top) + (qRect.height \/ 2);\r\n        }\r\n\r\n        \/\/ --- 4. ANIMACI\u00d3N \"ESPIRAL DE LA VIDA\" ---\r\n        bubbles.forEach((bubble, i) => {\r\n            gsap.set(bubble, { \r\n                x: startX - 60, \r\n                y: startY - 60, \r\n                scale: 0, \r\n                opacity: 0,\r\n                filter: \"blur(15px)\",\r\n                rotation: -1080 \/\/ Las vueltas de la espiral\r\n            });\r\n\r\n            const tl = gsap.timeline({ delay: 0.6 + (i * 0.2) });\r\n\r\n            tl.to(bubble, {\r\n                opacity: 1,\r\n                filter: \"blur(0px)\",\r\n                scale: 1,\r\n                rotation: 0,\r\n                x: 0, \r\n                y: 0,\r\n                duration: 2.8,\r\n                ease: \"expo.out\",\r\n                onComplete: () => {\r\n                    \/\/ Activar el movimiento antigravedad infinito\r\n                    bubble.classList.add('is-floating');\r\n                    bubble.style.animationDelay = `${i * 0.8}s`;\r\n                }\r\n            });\r\n        });\r\n    }\r\n\r\n    \/\/ --- 5. EJECUCI\u00d3N SEGURA AL CARGAR LA P\u00c1GINA ---\r\n    window.addEventListener('load', () => {\r\n        setTimeout(startExperience, 300);\r\n    });\r\n\r\n    \/\/ Cierra el cuadro de error y recarga si el usuario presiona el bot\u00f3n\r\n    document.addEventListener(\"click\", function (e) {\r\n        if (e.target && e.target.id === \"reload-page-btn\") {\r\n            window.location.reload();\r\n        }\r\n    });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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>Cargando pregunta&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","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":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"disabled","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-6335","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jglinks.com\/index.php\/wp-json\/wp\/v2\/pages\/6335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jglinks.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jglinks.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jglinks.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jglinks.com\/index.php\/wp-json\/wp\/v2\/comments?post=6335"}],"version-history":[{"count":409,"href":"https:\/\/jglinks.com\/index.php\/wp-json\/wp\/v2\/pages\/6335\/revisions"}],"predecessor-version":[{"id":7384,"href":"https:\/\/jglinks.com\/index.php\/wp-json\/wp\/v2\/pages\/6335\/revisions\/7384"}],"wp:attachment":[{"href":"https:\/\/jglinks.com\/index.php\/wp-json\/wp\/v2\/media?parent=6335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}