{"id":1212,"date":"2024-12-16T21:24:50","date_gmt":"2024-12-16T20:24:50","guid":{"rendered":"https:\/\/www.upo.es\/investiga\/proyectofactibles\/?page_id=1212"},"modified":"2026-04-19T13:58:27","modified_gmt":"2026-04-19T11:58:27","slug":"experiencias","status":"publish","type":"page","link":"https:\/\/www.upo.es\/investiga\/proyectofactibles\/experiencias\/","title":{"rendered":"EXPERIENCIAS"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Experiencias &#8211; FACTibles<\/title>\n    <style>\n        * { margin: 0; padding: 0; box-sizing: border-box; }\n\n        .hex-wrap {\n            width: 100%;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 2rem 0;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n            overflow: hidden;\n        }\n\n        .hex-title-block {\n            text-align: center;\n            margin-bottom: 2.5rem;\n        }\n\n        .hex-title {\n            font-size: 22px;\n            font-weight: 300;\n            letter-spacing: 5px;\n            text-transform: uppercase;\n            color: #3a3a3a;\n            margin-bottom: 12px;\n            white-space: nowrap;\n        }\n\n        .hex-title-line {\n            width: 60px;\n            height: 3px;\n            background: #E85321;\n            margin: 0 auto;\n            border-radius: 2px;\n        }\n\n        .hex-desktop {\n            position: relative;\n            width: 1101px;\n            height: 451px;\n        }\n\n        .hex-mobile { display: none; }\n\n        .hex-item {\n            position: absolute;\n            width: 153px;\n            height: 177px;\n            text-decoration: none;\n        }\n\n        .hex-inner {\n            width: 100%; height: 100%;\n            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            padding: 18px;\n            position: relative;\n        }\n\n        .hex-inner::after {\n            content: '';\n            position: absolute;\n            top: 0; left: 0; right: 0; bottom: 0;\n            background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.2) 0%, transparent 50%);\n            pointer-events: none;\n        }\n\n        .hex-label {\n            font-size: 13px;\n            font-weight: 600;\n            line-height: 1.3;\n            color: #fff;\n            letter-spacing: 0.5px;\n            pointer-events: none;\n            position: relative;\n            z-index: 1;\n        }\n\n        .hex-icon {\n            width: 26px; height: 26px;\n            margin-bottom: 6px;\n            opacity: 0.85;\n            position: relative;\n            z-index: 1;\n            pointer-events: none;\n        }\n\n        .hex-arrow {\n            position: relative;\n            z-index: 1;\n            pointer-events: none;\n            opacity: 0;\n            transform: translateY(3px);\n            transition: opacity 0.3s ease, transform 0.3s ease;\n            margin-top: 6px;\n        }\n\n        .hex-color {\n            cursor: pointer;\n            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;\n        }\n        .hex-color:hover {\n            transform: scale(1.1);\n            filter: drop-shadow(0 8px 20px rgba(0,0,0,0.18));\n            z-index: 10;\n        }\n        .hex-color:active { transform: scale(0.96); }\n        .hex-color:hover .hex-arrow { opacity: 0.8; transform: translateY(0); }\n\n        .hex-gray .hex-inner { background: #E6E6E6; }\n        .hex-fade .hex-inner { background: #EFEFEF; opacity: 0.6; }\n\n        @media (max-width: 1130px) {\n            .hex-desktop {\n                transform: scale(0.65);\n                transform-origin: top center;\n                height: 293px;\n            }\n        }\n\n        @media (max-width: 740px) {\n            .hex-desktop {\n                transform: scale(0.48);\n                transform-origin: top center;\n                height: 217px;\n            }\n        }\n\n        @media (max-width: 600px) {\n            .hex-title {\n                font-size: 14px;\n                letter-spacing: 3px;\n                white-space: nowrap;\n            }\n\n            .hex-title-block {\n                margin-bottom: 1.5rem;\n            }\n\n            .hex-desktop { display: none; }\n            .hex-mobile {\n                display: block;\n                position: relative;\n                width: 246px;\n                height: 628px;\n            }\n\n            .hex-mobile .hex-item {\n                width: 110px;\n                height: 128px;\n            }\n\n            .hex-mobile .hex-inner { padding: 14px; }\n            .hex-mobile .hex-label { font-size: 11px; }\n            .hex-mobile .hex-icon { width: 20px; height: 20px; margin-bottom: 4px; }\n            .hex-mobile .hex-arrow { display: none; }\n\n            .hex-mobile .hex-color:active {\n                transform: scale(0.95);\n                filter: brightness(1.1);\n            }\n\n            .hex-mobile .hex-fade .hex-inner { background: #EFEFEF; opacity: 0.6; }\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"hex-wrap\">\n\n    <div class=\"hex-title-block\">\n        <h2 class=\"hex-title\">Experiencias<\/h2>\n        <div class=\"hex-title-line\"><\/div>\n    <\/div>\n\n    <div class=\"hex-desktop\">\n\n        <!-- ROW 0: 3 gray -->\n        <div class=\"hex-item hex-fade\" style=\"left: 237px; top: 0;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n        <div class=\"hex-item hex-gray\" style=\"left: 395px; top: 0;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n        <div class=\"hex-item hex-gray\" style=\"left: 553px; top: 0;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n\n        <!-- ROW 1: gray + 4 color centered + gray + gray\n             Positions: 0, 158, 316, 474, 632, 790, 948\n             Colors at 2-5: 316, 474, 632, 790 \u2192 but need gray at edges\n             Actually: gray@158, color@316, color@474, color@632, color@790, gray@948\n             = 6 hexs (dise\u00f1o B sin el primero)\n        -->\n        <div class=\"hex-item hex-gray\" style=\"left: 158px; top: 137px;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n\n        <!-- Cinema Usera -->\n        <a href=\"https:\/\/www.upo.es\/investiga\/proyectofactibles\/muestras-de-experiencias-ii\/\" class=\"hex-item hex-color\" style=\"left: 316px; top: 137px;\">\n            <div class=\"hex-inner\" style=\"background: #F5A489;\">\n                <svg class=\"hex-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2.18\"\/><line x1=\"7\" y1=\"2\" x2=\"7\" y2=\"22\"\/><line x1=\"17\" y1=\"2\" x2=\"17\" y2=\"22\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/><line x1=\"2\" y1=\"7\" x2=\"7\" y2=\"7\"\/><line x1=\"2\" y1=\"17\" x2=\"7\" y2=\"17\"\/><line x1=\"17\" y1=\"7\" x2=\"22\" y2=\"7\"\/><line x1=\"17\" y1=\"17\" x2=\"22\" y2=\"17\"\/>\n                <\/svg>\n                <span class=\"hex-label\">Cinema Usera<\/span>\n                <svg class=\"hex-arrow\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M4 8h8M9 5l3 3-3 3\"\/><\/svg>\n            <\/div>\n        <\/a>\n\n        <!-- Kaldarte -->\n        <a href=\"https:\/\/www.upo.es\/investiga\/proyectofactibles\/muestras-de-experiencias-iii\/\" class=\"hex-item hex-color\" style=\"left: 474px; top: 137px;\">\n            <div class=\"hex-inner\" style=\"background: #ED805C;\">\n                <svg class=\"hex-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M12 19l7-7 3 3-7 7-3-3z\"\/><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"\/><path d=\"M2 2l7.586 7.586\"\/><circle cx=\"11\" cy=\"11\" r=\"2\"\/>\n                <\/svg>\n                <span class=\"hex-label\">Kaldarte<\/span>\n                <svg class=\"hex-arrow\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M4 8h8M9 5l3 3-3 3\"\/><\/svg>\n            <\/div>\n        <\/a>\n\n        <!-- Paredes y persianas -->\n        <a href=\"https:\/\/www.upo.es\/investiga\/proyectofactibles\/muestras-de-experiencias-i\/\" class=\"hex-item hex-color\" style=\"left: 632px; top: 137px;\">\n            <div class=\"hex-inner\" style=\"background: #EB734C;\">\n                <svg class=\"hex-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/>\n                <\/svg>\n                <span class=\"hex-label\">Paredes y persianas<\/span>\n                <svg class=\"hex-arrow\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M4 8h8M9 5l3 3-3 3\"\/><\/svg>\n            <\/div>\n        <\/a>\n\n        <!-- Pol\u00edgono Sur -->\n        <a href=\"https:\/\/www.upo.es\/investiga\/proyectofactibles\/muestras-de-experiencias-iv\/\" class=\"hex-item hex-color\" style=\"left: 790px; top: 137px;\">\n            <div class=\"hex-inner\" style=\"background: #E85321;\">\n                <svg class=\"hex-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"10\" r=\"3\"\/><path d=\"M12 21.7C17.3 17 20 13 20 10a8 8 0 10-16 0c0 3 2.7 7 8 11.7z\"\/>\n                <\/svg>\n                <span class=\"hex-label\">Pol\u00edgono Sur<\/span>\n                <svg class=\"hex-arrow\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M4 8h8M9 5l3 3-3 3\"\/><\/svg>\n            <\/div>\n        <\/a>\n\n        <div class=\"hex-item hex-gray\" style=\"left: 948px; top: 137px;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n\n        <!-- ROW 2: 3 gray -->\n        <div class=\"hex-item hex-gray\" style=\"left: 395px; top: 274px;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n        <div class=\"hex-item hex-gray\" style=\"left: 553px; top: 274px;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n        <div class=\"hex-item hex-gray\" style=\"left: 711px; top: 274px;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n\n    <\/div>\n\n    <!-- MOBILE -->\n    <div class=\"hex-mobile\">\n\n        <div class=\"hex-item hex-fade\" style=\"left: 10px; top: 0;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n        <div class=\"hex-item hex-gray\" style=\"left: 125px; top: 0;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n\n        <!-- Cinema Usera -->\n        <a href=\"https:\/\/www.upo.es\/investiga\/proyectofactibles\/muestras-de-experiencias-ii\/\" class=\"hex-item hex-color\" style=\"left: 68px; top: 100px;\">\n            <div class=\"hex-inner\" style=\"background: #F5A489;\">\n                <svg class=\"hex-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2.18\"\/><line x1=\"7\" y1=\"2\" x2=\"7\" y2=\"22\"\/><line x1=\"17\" y1=\"2\" x2=\"17\" y2=\"22\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/>\n                <\/svg>\n                <span class=\"hex-label\">Cinema Usera<\/span>\n            <\/div>\n        <\/a>\n\n        <div class=\"hex-item hex-gray\" style=\"left: 10px; top: 200px;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n\n        <!-- Kaldarte -->\n        <a href=\"https:\/\/www.upo.es\/investiga\/proyectofactibles\/muestras-de-experiencias-iii\/\" class=\"hex-item hex-color\" style=\"left: 125px; top: 200px;\">\n            <div class=\"hex-inner\" style=\"background: #ED805C;\">\n                <svg class=\"hex-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M12 19l7-7 3 3-7 7-3-3z\"\/><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"\/><circle cx=\"11\" cy=\"11\" r=\"2\"\/>\n                <\/svg>\n                <span class=\"hex-label\">Kaldarte<\/span>\n            <\/div>\n        <\/a>\n\n        <!-- Paredes y persianas -->\n        <a href=\"https:\/\/www.upo.es\/investiga\/proyectofactibles\/muestras-de-experiencias-i\/\" class=\"hex-item hex-color\" style=\"left: 68px; top: 300px;\">\n            <div class=\"hex-inner\" style=\"background: #EB734C;\">\n                <svg class=\"hex-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/>\n                <\/svg>\n                <span class=\"hex-label\">Paredes y persianas<\/span>\n            <\/div>\n        <\/a>\n\n        <div class=\"hex-item hex-gray\" style=\"left: 10px; top: 400px;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n\n        <!-- Pol\u00edgono Sur -->\n        <a href=\"https:\/\/www.upo.es\/investiga\/proyectofactibles\/muestras-de-experiencias-iv\/\" class=\"hex-item hex-color\" style=\"left: 125px; top: 400px;\">\n            <div class=\"hex-inner\" style=\"background: #E85321;\">\n                <svg class=\"hex-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"10\" r=\"3\"\/><path d=\"M12 21.7C17.3 17 20 13 20 10a8 8 0 10-16 0c0 3 2.7 7 8 11.7z\"\/>\n                <\/svg>\n                <span class=\"hex-label\">Pol\u00edgono Sur<\/span>\n            <\/div>\n        <\/a>\n\n        <div class=\"hex-item hex-fade\" style=\"left: 68px; top: 500px;\">\n            <div class=\"hex-inner\"><\/div>\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Experiencias &#8211; FACTibles Experiencias Cinema Usera Kaldarte Paredes y persianas Pol\u00edgono Sur Cinema Usera Kaldarte Paredes y persianas Pol\u00edgono Sur<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1212","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.upo.es\/investiga\/proyectofactibles\/wp-json\/wp\/v2\/pages\/1212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.upo.es\/investiga\/proyectofactibles\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.upo.es\/investiga\/proyectofactibles\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.upo.es\/investiga\/proyectofactibles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.upo.es\/investiga\/proyectofactibles\/wp-json\/wp\/v2\/comments?post=1212"}],"version-history":[{"count":21,"href":"https:\/\/www.upo.es\/investiga\/proyectofactibles\/wp-json\/wp\/v2\/pages\/1212\/revisions"}],"predecessor-version":[{"id":1544,"href":"https:\/\/www.upo.es\/investiga\/proyectofactibles\/wp-json\/wp\/v2\/pages\/1212\/revisions\/1544"}],"wp:attachment":[{"href":"https:\/\/www.upo.es\/investiga\/proyectofactibles\/wp-json\/wp\/v2\/media?parent=1212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}