{"id":216,"date":"2026-05-07T08:51:49","date_gmt":"2026-05-07T06:51:49","guid":{"rendered":"https:\/\/25008.ooteca.artedra.net\/?page_id=216"},"modified":"2026-05-20T09:05:22","modified_gmt":"2026-05-20T07:05:22","slug":"elementor-216","status":"publish","type":"page","link":"https:\/\/25008.ooteca.artedra.net\/","title":{"rendered":"1899"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nProjecte \u2014 Landing Page<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@900&family=Barlow:wght@500&display=swap');\r\n\r\n :root {\r\n --navy: #232F5E;\r\n --crimson: #7B1235;\r\n --gold: #F8BE1A;\r\n --white: #F5F3EE;\r\n --light: #EAE7E0;\r\n --dark: #0E1428;\r\n --font-title: 'Barlow Condensed', 'Akzidenz-Grotesk Next', Impact, sans-serif;\r\n --font-body: 'Barlow', 'Akzidenz-Grotesk Next', Arial, sans-serif;\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n font-family: var(--font-body);\r\n font-weight: 500;\r\n background: var(--white);\r\n color: var(--navy);\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n\r\n .nav-logo img {\r\n height: 90px;\r\n width: auto;\r\n display: block;\r\n}\r\nnav {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 100;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1rem 9rem;\r\n\r\n background: repeating-linear-gradient(\r\n 90deg,\r\n #7b1235 0px,\r\n #7b1235 120px,\r\n #4a1f4a 140px,\r\n #232f5e 200px,\r\n #232f5e 320px\r\n);\r\n );\r\n}\r\n\r\n .nav-logo {\r\n font-family: var(--font-title);\r\n font-size: 1.4rem;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n }\r\n\r\n .nav-logo span { color: var(--gold); }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 2.2rem;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n font-family: var(--font-body);\r\n font-weight: 500;\r\n font-size: 0.8rem;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n color: rgba(245,243,238,0.75);\r\n text-decoration: none;\r\n transition: color 0.2s;\r\n }\r\n\r\n .nav-links a:hover { color: var(--gold); }\r\n\r\n \/* HAMBURGER *\/\r\n .hamburger {\r\n display: none;\r\n flex-direction: column;\r\n gap: 5px;\r\n cursor: pointer;\r\n background: none;\r\n border: none;\r\n padding: 4px;\r\n }\r\n .hamburger span {\r\n display: block;\r\n width: 26px;\r\n height: 2px;\r\n background: var(--white);\r\n transition: 0.3s;\r\n }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n \r\n .hero-main-image{\r\n width: 60%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n.hero-img-frame {\r\n width: 100%;\r\n max-width: 340px;\r\n \r\n background: none !important;\r\n border: none !important;\r\n outline: none !important;\r\n box-shadow: none !important;\r\n\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n overflow: hidden;\r\n}\r\n \r\n#hero {\r\n min-height: 100vh;\r\n background: linear-gradient(\r\n 135deg,\r\n #0B1D51 0%,\r\n #1F264A 35%,\r\n #6A0F2B 75%,\r\n #A50044 100%\r\n);\r\n display: grid;\r\n grid-template-columns: 2fr 1fr;\r\n align-items: center;\r\n padding: 8rem 4rem 4rem;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n \r\n\r\n #hero::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0; left: 0;\r\n width: 100%;\r\n height: 4px;\r\n background: var(--gold);\r\n }\r\n\r\n .hero-content { position: relative; z-index: 2; }\r\n\r\n .hero-tag {\r\n display: inline-block;\r\n background: var(--gold);\r\n color: var(--navy);\r\n font-family: var(--font-body);\r\n font-weight: 500;\r\n font-size: 0.72rem;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n padding: 0.35rem 0.9rem;\r\n margin-bottom: 1.6rem;\r\n }\r\n\r\n .hero-title {\r\n font-family: var(--font-title);\r\n font-size: clamp(3.5rem, 6vw, 6rem);\r\n line-height: 0.95;\r\n letter-spacing: -0.01em;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n margin-bottom: 1.6rem;\r\n }\r\n\r\n .hero-title em {\r\n font-style: normal;\r\n color: var(--gold);\r\n -webkit-text-stroke: 0px;\r\n }\r\n\r\n .hero-desc {\r\n font-size: 1rem;\r\n line-height: 1.65;\r\n color: rgba(245,243,238,0.78);\r\n max-width: 420px;\r\n margin-bottom: 2.5rem;\r\n }\r\n\r\n .hero-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n background: var(--crimson);\r\n color: var(--white);\r\n font-family: var(--font-body);\r\n font-weight: 500;\r\n font-size: 0.82rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n padding: 1rem 2rem;\r\n text-decoration: none;\r\n border: 2px solid transparent;\r\n transition: background 0.2s, border-color 0.2s, color 0.2s;\r\n }\r\n\r\n .hero-cta:hover {\r\n background: transparent;\r\n border-color: var(--crimson);\r\n color: var(--crimson);\r\n }\r\n\r\n .hero-visual {\r\n position: relative;\r\n z-index: 2;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .hero-img-frame {\r\n width: 100%;\r\n max-width: 400px;\r\n aspect-ratio: 4\/3;\r\n background: rgba(255,255,255,0.06);\r\n border: 1px solid rgba(248,190,26,0.3);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n color: rgba(245,243,238,0.4);\r\n font-size: 0.8rem;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-img-frame::before {\r\n content: '';\r\n position: absolute;\r\n top: 12px; left: 12px; right: 12px; bottom: 12px;\r\n border: 1px solid rgba(248,190,26,0.15);\r\n pointer-events: none;\r\n }\r\n\r\n .hero-img-frame svg { opacity: 0.35; }\r\n \r\n\r\n \/* \u2500\u2500 SECTION COMMONS \u2500\u2500 *\/\r\n section { padding: 6rem 4rem; }\r\n\r\n .section-header {\r\n display: flex;\r\n align-items: baseline;\r\n gap: 1.2rem;\r\n margin-bottom: 3.5rem;\r\n }\r\n\r\n .section-number {\r\n font-family: var(--font-title);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--gold);\r\n flex-shrink: 0;\r\n }\r\n\r\n .section-title {\r\n font-family: var(--font-title);\r\n font-size: clamp(2.2rem, 4vw, 3.4rem);\r\n line-height: 1;\r\n text-transform: uppercase;\r\n letter-spacing: -0.01em;\r\n color: var(--navy);\r\n }\r\n\r\n .section-line {\r\n flex: 1;\r\n height: 1px;\r\n background: linear-gradient(to right, var(--navy), transparent);\r\n opacity: 0.15;\r\n align-self: center;\r\n }\r\n\r\n \/* \u2500\u2500 REFERENTS \u2500\u2500 *\/\r\n \r\n#referents {\r\n background:\r\n radial-gradient(\r\n circle at top left,\r\n rgba(140, 0, 55, 0.30) 0%,\r\n transparent 45%\r\n ),\r\n\r\n linear-gradient(\r\n 180deg,\r\n #4a0f22 0%,\r\n #2f1430 38%,\r\n #151c38 72%,\r\n #0b0d16 100%\r\n );\r\n}\r\n #referents .section-title { color: var(--white); }\r\n #referents .section-number { color: var(--gold); }\r\n #referents .section-line { background: linear-gradient(to right, var(--white), transparent); }\r\n\r\n .referents-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 1.5px;\r\n background: rgba(248,190,26,0.12);\r\n border: 1.5px solid rgba(248,190,26,0.12);\r\n }\r\n\r\n .referent-card {\r\n background: var(--dark);\r\n padding: 2rem;\r\n position: relative;\r\n overflow: hidden;\r\n transition: background 0.25s;\r\n cursor: default;\r\n }\r\n\r\n .referent-card:hover { background: #151c38; }\r\n\r\n .referent-img {\r\n width: 100%;\r\n aspect-ratio: 16\/9;\r\n background: rgba(255,255,255,0.05);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: rgba(255,255,255,0.2);\r\n font-size: 0.7rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n margin-bottom: 1.4rem;\r\n border: 1px solid rgba(248,190,26,0.1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .referent-img::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0; left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: var(--crimson);\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.3s;\r\n }\r\n\r\n .referent-card:hover .referent-img::after { transform: scaleX(1); }\r\n\r\n .referent-name {\r\n font-family: var(--font-title);\r\n font-size: 1.15rem;\r\n letter-spacing: 0.04em;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n margin-bottom: 0.4rem;\r\n }\r\n\r\n .referent-link {\r\n font-size: 0.72rem;\r\n letter-spacing: 0.12em;\r\n color: var(--gold);\r\n text-decoration: none;\r\n text-transform: uppercase;\r\n display: inline-block;\r\n margin-bottom: 0.9rem;\r\n }\r\n\r\n .referent-desc {\r\n font-size: 0.88rem;\r\n line-height: 1.6;\r\n color: rgba(245,243,238,0.6);\r\n }\r\n \r\n .referent-img {\r\n width: 100%;\r\n aspect-ratio: 16\/20;\r\n background: rgba(255,255,255,0.05);\r\n border: 1px solid rgba(248,190,26,0.1);\r\n margin-bottom: 1.4rem;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n \/* \u2500\u2500 PROC\u00c9S \u2500\u2500 *\/\r\n #proces { background: var(--light); }\r\n\r\n .proces-tabs {\r\n display: flex;\r\n gap: 0;\r\n margin-bottom: 3rem;\r\n border-bottom: 2px solid rgba(35,47,94,0.12);\r\n overflow-x: auto;\r\n }\r\n \r\n\r\n .proces-tab {\r\n font-family: var(--font-body);\r\n font-weight: 500;\r\n font-size: 0.75rem;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n padding: 0.9rem 1.6rem;\r\n cursor: pointer;\r\n color: rgba(35,47,94,0.5);\r\n border: none;\r\n background: none;\r\n border-bottom: 3px solid transparent;\r\n margin-bottom: -2px;\r\n white-space: nowrap;\r\n transition: color 0.2s, border-color 0.2s;\r\n }\r\n\r\n .proces-tab.active {\r\n color: var(--crimson);\r\n border-bottom-color: var(--crimson);\r\n }\r\n\r\n .proces-tab:hover:not(.active) { color: var(--navy); }\r\n\r\n .proces-panel { display: none; }\r\n .proces-panel.active { display: block; }\r\n\r\n .proces-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));\r\n gap: 1.5rem;\r\n}\r\n\r\n.proces-item {\r\n background: var(--white);\r\n border: 2.5px solid rgba(35,47,94,0.1);\r\n aspect-ratio: 16\/10;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.7rem;\r\n color: rgba(35,47,94,0.35);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n transition: border-color 0.2s;\r\n}\r\n\r\n .proces-item:hover { border-color: var(--crimson); }\r\n\r\n \/* \u2500\u2500 FANZINE \u2500\u2500 *\/\r\n #fanzine {\r\n background: linear-gradient(\r\n 135deg,\r\n #2a2f5e 0%,\r\n #3a2147 25%,\r\n #7f1338 60%,\r\n #7f1338 100%\r\n );\r\n\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 4rem;\r\n align-items: center;\r\n}\r\n\r\n #fanzine .section-title { color: var(--white); }\r\n #fanzine .section-number { color: var(--gold); }\r\n #fanzine .section-line { background: linear-gradient(to right, rgba(255,255,255,0.4), transparent); }\r\n\r\n .fanzine-cover {\r\n width: 100%;\r\n max-width: 380px;\r\n aspect-ratio: 3\/4;\r\n background: rgba(0,0,0,0.2);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: rgba(255,255,255,0.4);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .fanzine-cover::after {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 4px;\r\n height: 100%;\r\n background: var(--gold);\r\n }\r\n\r\n .fanzine-text { color: rgba(255,255,255,0.85); }\r\n\r\n .fanzine-text p {\r\n font-size: 1rem;\r\n line-height: 1.65;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .btn-fanzine {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n background: var(--gold);\r\n color: var(--navy);\r\n font-family: var(--font-body);\r\n font-weight: 500;\r\n font-size: 0.8rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n padding: 1rem 2rem;\r\n text-decoration: none;\r\n border: 2px solid var(--gold);\r\n transition: background 0.2s, color 0.2s;\r\n }\r\n\r\n .btn-fanzine:hover {\r\n background: transparent;\r\n color: var(--gold);\r\n }\r\n\r\n \/* \u2500\u2500 VIDEO \u2500\u2500 *\/\r\n #video { background: var(--navy); }\r\n #video .section-title { color: var(--white); }\r\n #video .section-number { color: var(--gold); }\r\n #video .section-line { background: linear-gradient(to right, rgba(255,255,255,0.3), transparent); }\r\n\r\n .video-wrapper {\r\n width: 100%;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n aspect-ratio: 16\/9;\r\n background: #000;\r\n border: 1px solid rgba(248,190,26,0.2);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .video-placeholder {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 1.2rem;\r\n color: rgba(255,255,255,0.35);\r\n }\r\n\r\n .play-btn {\r\n width: 72px; height: 72px;\r\n border: 2px solid rgba(248,190,26,0.5);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: border-color 0.2s, background 0.2s;\r\n }\r\n\r\n .play-btn:hover {\r\n background: rgba(248,190,26,0.1);\r\n border-color: var(--gold);\r\n }\r\n\r\n .play-btn svg { margin-left: 4px; }\r\n\r\n .video-note {\r\n font-size: 0.75rem;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* \u2500\u2500 CONCLUSIONS \u2500\u2500 *\/\r\n #conclusions { background: var(--white); }\r\n\r\n .conclusions-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr;\r\n gap: 1.5px;\r\n background: rgba(35,47,94,0.08);\r\n border: 1.5px solid rgba(35,47,94,0.08);\r\n }\r\n\r\n .conclusion-block {\r\n background: var(--white);\r\n padding: 2.5rem;\r\n position: relative;\r\n }\r\n\r\n .conclusion-block::before {\r\n content: '';\r\n display: block;\r\n width: 32px;\r\n height: 4px;\r\n background: var(--gold);\r\n margin-bottom: 1.4rem;\r\n }\r\n\r\n .conclusion-block:nth-child(2)::before { background: var(--crimson); }\r\n .conclusion-block:nth-child(3)::before { background: var(--navy); }\r\n\r\n .conclusion-label {\r\n font-family: var(--font-title);\r\n font-size: 1.2rem;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n color: var(--navy);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .conclusion-text {\r\n font-size: 0.92rem;\r\n line-height: 1.72;\r\n color: rgba(35,47,94,0.7);\r\n }\r\n\r\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n footer {\r\n background: var(--dark);\r\n padding: 4rem;\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n align-items: end;\r\n gap: 2rem;\r\n border-top: 3px solid var(--crimson);\r\n position: relative;\r\n }\r\n\r\n footer::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 60px;\r\n height: 3px;\r\n background: var(--gold);\r\n }\r\n\r\n .footer-author-name {\r\n font-family: var(--font-title);\r\n font-size: clamp(2rem, 4vw, 3.5rem);\r\n line-height: 1;\r\n text-transform: uppercase;\r\n letter-spacing: -0.01em;\r\n color: var(--white);\r\n margin-bottom: 0.6rem;\r\n }\r\n\r\n .footer-author-name span { color: var(--gold); }\r\n\r\n .footer-course {\r\n font-size: 0.8rem;\r\n letter-spacing: 0.16em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.45);\r\n margin-bottom: 1.2rem;\r\n }\r\n\r\n .footer-bio {\r\n font-size: 0.92rem;\r\n line-height: 1.65;\r\n color: rgba(255,255,255,0.55);\r\n max-width: 480px;\r\n }\r\n\r\n .footer-avatar {\r\n width: 100px; height: 100px;\r\n background: rgba(255,255,255,0.06);\r\n border: 1px solid rgba(248,190,26,0.3);\r\n border-radius: 2px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: rgba(255,255,255,0.25);\r\n font-size: 0.65rem;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n flex-shrink: 0;\r\n }\r\n\r\n .footer-copy {\r\n grid-column: 1 \/ -1;\r\n padding-top: 2rem;\r\n margin-top: 2rem;\r\n border-top: 1px solid rgba(255,255,255,0.08);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.25);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .footer-copy-dots {\r\n display: flex;\r\n gap: 6px;\r\n }\r\n\r\n .footer-copy-dots span {\r\n width: 6px; height: 6px;\r\n border-radius: 50%;\r\n }\r\n\r\n .footer-copy-dots span:nth-child(1) { background: var(--crimson); }\r\n .footer-copy-dots span:nth-child(2) { background: var(--navy); opacity: 0.8; }\r\n .footer-copy-dots span:nth-child(3) { background: var(--gold); }\r\n\r\n \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(28px);\r\n transition: opacity 0.65s ease, transform 0.65s ease;\r\n }\r\n\r\n .reveal.visible {\r\n opacity: 1;\r\n transform: none;\r\n }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 1024px) {\r\n nav { padding: 1.2rem 2.5rem; }\r\n section { padding: 5rem 2.5rem; }\r\n footer { padding: 3.5rem 2.5rem; }\r\n #hero { padding: 7rem 2.5rem 4rem; }\r\n .referents-grid { grid-template-columns: 1fr 1fr; }\r\n .conclusions-grid { grid-template-columns: 1fr 1fr; }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n nav { padding: 1rem 1.5rem; }\r\n .nav-links { display: none; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--navy); padding: 1rem 0; }\r\n .nav-links.open { display: flex; }\r\n .nav-links a { padding: 0.9rem 1.5rem; display: block; }\r\n .hamburger { display: flex; }\r\n section { padding: 4rem 1.5rem; }\r\n footer { padding: 3rem 1.5rem; grid-template-columns: 1fr; }\r\n #hero { grid-template-columns: 1fr; padding: 6rem 1.5rem 3.5rem; gap: 2.5rem; }\r\n #hero::before { display: none; }\r\n .hero-title { font-size: clamp(2.8rem, 10vw, 4rem); }\r\n #fanzine { grid-template-columns: 1fr; padding: 4rem 1.5rem; gap: 2.5rem; }\r\n .fanzine-cover { max-width: 280px; margin: 0 auto; }\r\n .referents-grid { grid-template-columns: 1fr; }\r\n .conclusions-grid { grid-template-columns: 1fr; }\r\n .section-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .hero-title { font-size: clamp(2.4rem, 12vw, 3.2rem); }\r\n .proces-tabs { gap: 0; }\r\n .proces-tab { padding: 0.8rem 1rem; font-size: 0.68rem; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- NAV -->\r\n<nav>\r\n <div class=\"nav-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/tutureoi.png\" alt=\"Logo\">\r\n<\/div>\r\n <ul class=\"nav-links\" id=\"navLinks\">\r\n <li><a href=\"#hero\">Inici<\/a><\/li>\r\n <li><a href=\"#referents\">Referents<\/a><\/li>\r\n <li><a href=\"#proces\">Proc\u00e9s<\/a><\/li>\r\n <li><a href=\"#fanzine\">Fanzine<\/a><\/li>\r\n <li><a href=\"#video\">V\u00eddeo<\/a><\/li>\r\n <li><a href=\"#conclusions\">Conclusions<\/a><\/li>\r\n <\/ul>\r\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Men\u00fa\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n<\/nav>\r\n\r\n<!-- 1. HERO -->\r\n<section id=\"hero\">\r\n <div class=\"hero-content reveal\">\r\n <div class=\"hero-tag\">Obra Final 2026<\/div>\r\n <h1 class=\"hero-title\">UN FANZINE DEL<br><em>FC BARCELONA<\/em><\/h1>\r\n <p class=\"hero-desc\">El meu projecte d\u2019obra final \u201c1899\u201d consisteix en la creaci\u00f3 d\u2019un \r\nfanzine interactiu centrat en els momenents mes importants de la historia del club i la identitat del FC Barcelona. \r\nLa proposta no busca \u00fanicament explicar els \u00e8xits esportius del club, \r\nsin\u00f3 reflexionar sobre el significat cultural, social i emocional que \r\nrepresenta per a milions de persones.<\/p>\r\n <a href=\"#fanzine\" class=\"hero-cta\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M7 1v12M7 13l-4-4M7 13l4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n Veure Fanzine\r\n <\/a>\r\n <\/div>\r\n<div class=\"hero-img-frame\">\r\n <iframe \r\n allowfullscreen=\"allowfullscreen\" \r\n allow=\"clipboard-write\" \r\n scrolling=\"no\" \r\n class=\"fp-iframe\" \r\n src=\"https:\/\/heyzine.com\/flip-book\/47df2c3ef8.html\"\r\n style=\"border:none; width:100%; height:400px; background:transparent;\">\r\n <\/iframe>\r\n<\/div>\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"><rect x=\"4\" y=\"4\" width=\"32\" height=\"32\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><circle cx=\"14\" cy=\"14\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><path d=\"M4 28l8-8 6 6 6-6 8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n \r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- 2. REFERENTS -->\r\n<section id=\"referents\">\r\n <div class=\"section-header reveal\">\r\n <span class=\"section-number\">02<\/span>\r\n <h2 class=\"section-title\">Referents<\/h2>\r\n <div class=\"section-line\"><\/div>\r\n <\/div>\r\n <div class=\"referents-grid reveal\">\r\n <div class=\"referent-card\">\r\n <div class=\"referent-img\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/\u26bd\ufe0f\u2764\ufe0f.jpeg\" \r\n alt=\"Referent 1\"\r\n class=\"referent-image\"\r\n >\r\n<\/div>\r\n <div class=\"referent-name\">Football magazine<\/div>\r\n \r\n <p class=\"referent-desc\">Aquest referent m\u2019ha ajudat a entendre com explicar el Bar\u00e7a d\u2019una manera m\u00e9s visual i emocional. M\u2019ha influ\u00eft especialment l\u2019\u00fas de fotografies hist\u00f2riques, tipografies contundents superposici\u00f3 d\u2019elements, jerarquia visual marcada, \u00fas agressiu del color i la imatge, els grans titulars i la composici\u00f3 editorial, elements que despr\u00e9s he aplicat al meu fanzine.<\/p>\r\n <\/div>\r\n <div class=\"referent-card\">\r\n<div class=\"referent-img\">\r\n <img decoding=\"async\" src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/descarga-19.jpeg\" alt=\"Referent 3\">\r\n<\/div>\r\n <div class=\"referent-name\">Un sentiment<\/div>\r\n \r\n <p class=\"referent-desc\">Aquest referent ha estat important per refor\u00e7ar la idea principal del projecte: que el Bar\u00e7a \u00e9s molt m\u00e9s que futbol. M\u2019ha ajudat a representar el sentiment de pertinen\u00e7a, la identitat del club i la connexi\u00f3 emocional amb l\u2019afici\u00f3.<\/p>\r\n <\/div>\r\n <div class=\"referent-card\">\r\n <div class=\"referent-img\">\r\n <img decoding=\"async\" src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-125328.jpg\" alt=\"Referent 2\">\r\n<\/div>\r\n <div class=\"referent-name\">Referents de disseny editorial\r\n<\/div>\r\n \r\n <p class=\"referent-desc\">He analitzat diferents revistes i fanzines de disseny editorial per inspirar-me en la composici\u00f3, les tipografies i l\u2019estructura visual. Aix\u00f2 m\u2019ha ajudat a crear una est\u00e8tica m\u00e9s moderna, din\u00e0mica i coherent amb el concepte del projecte.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- 3. PROC\u00c9S -->\r\n<section id=\"proces\">\r\n <div class=\"section-header reveal\">\r\n <span class=\"section-number\">03<\/span>\r\n <h2 class=\"section-title\">Proc\u00e9s de Treball<\/h2>\r\n <div class=\"section-line\"><\/div>\r\n <\/div>\r\n <div class=\"proces-tabs reveal\">\r\n <button class=\"proces-tab active\" data-tab=\"prototip\">Primera idea del projecte<\/button>\r\n <button class=\"proces-tab\" data-tab=\"wireframes\">Wireframes<\/button>\r\n <button class=\"proces-tab\" data-tab=\"mockups\">Mockup<\/button>\r\n <button class=\"proces-tab\" data-tab=\"guio\">Gui\u00f3 d'interacci\u00f3<\/button>\r\n <button class=\"proces-tab\" data-tab=\"marca\">evoluci\u00f3 d'una p\u00e0gina<\/button>\r\n <button class=\"proces-tab\" data-tab=\"finals\">Versions finals<\/button>\r\n <\/div>\r\n <div class=\"proces-panel active\" id=\"panel-prototip\">\r\n <div class=\"proces-grid reveal\">\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-125653.jpg\" \r\n alt=\"Prototip en paper\"\r\n class=\"proces-image\"\r\n >\r\n<\/div>\r\n \r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-174422.jpg\" \r\n alt=\"Prototip en paper\"\r\n class=\"proces-image\"\r\n >\r\n<\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <div class=\"proces-panel\" id=\"panel-wireframes\">\r\n <div class=\"proces-grid reveal\">\r\n\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-174738.jpg\" \r\n alt=\"Wireframe\"\r\n class=\"proces-image\"\r\n >\r\n <\/div>\r\n\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-175051.jpg\" \r\n alt=\"Wireframe 2\"\r\n class=\"proces-image\"\r\n >\r\n<\/div>\r\n \r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-175147.jpg\" \r\n alt=\"Wireframe 2\"\r\n class=\"proces-image\"\r\n >\r\n<\/div>\r\n\r\n<div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-175347.jpg\" \r\n alt=\"Wireframe 2\"\r\n class=\"proces-image\"\r\n >\r\n<\/div>\r\n\r\n \r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"proces-panel\" id=\"panel-mockups\">\r\n <div class=\"proces-grid reveal\">\r\n\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-180945.jpg\"\r\n alt=\"Mockup 1\"\r\n class=\"proces-image\"\r\n >\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"proces-panel\" id=\"panel-guio\">\r\n <div class=\"proces-grid reveal\">\r\n\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-14-084306.jpg\"\r\n alt=\"Gui\u00f3 interacci\u00f3 1\"\r\n class=\"proces-image\"\r\n >\r\n <\/div>\r\n\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-14-084401.jpg\"\r\n alt=\"Gui\u00f3 interacci\u00f3 2\"\r\n class=\"proces-image\"\r\n >\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n \r\n<div class=\"proces-panel\" id=\"panel-marca\">\r\n <div class=\"proces-grid reveal\">\r\n\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-175051.jpg\"\r\n alt=\"Evoluci\u00f3 marca 1\"\r\n class=\"proces-image\"\r\n >\r\n <\/div>\r\n\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-180945.jpg\"\r\n alt=\"Evoluci\u00f3 marca 2\"\r\n class=\"proces-image\"\r\n >\r\n <\/div>\r\n\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-182623.jpg\"\r\n alt=\"Evoluci\u00f3 marca 3\"\r\n class=\"proces-image\"\r\n >\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n<div class=\"proces-panel\" id=\"panel-finals\">\r\n <div class=\"proces-grid reveal\">\r\n\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-183125.jpg\" \r\n alt=\"Versi\u00f3 final 1\"\r\n \r\n >\r\n <\/div>\r\n\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-183612.jpg\" \r\n alt=\"Versi\u00f3 final 2\"\r\n \r\n >\r\n <\/div>\r\n\r\n <div class=\"proces-item\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-183712.jpg\" \r\n alt=\"Versi\u00f3 final 3\"\r\n \r\n >\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n<\/section>\r\n\r\n<!-- 4. FANZINE -->\r\n<section id=\"fanzine\">\r\n <div>\r\n <div class=\"section-header reveal\">\r\n <span class=\"section-number\">04<\/span>\r\n <h2 class=\"section-title\">Fanzine<\/h2>\r\n <div class=\"section-line\"><\/div>\r\n <\/div>\r\n <div class=\"fanzine-text reveal\">\r\n <a href=\"https:\/\/indd.adobe.com\/view\/e15cfe37-f6d8-4109-b38c-9979ea79d688\" class=\"btn-fanzine\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 7h10M7 2l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n Obrir Fanzine\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"reveal\">\r\n <div class=\"fanzine-cover\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada-fanzine-min-1-scaled.jpg\" \r\n alt=\"Portada Fanzine\"\r\n style=\"width:100%; height:100%; object-fit:cover;\"\r\n >\r\n<\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- 5. V\u00cdDEO -->\r\n<section id=\"video\">\r\n <div class=\"section-header reveal\">\r\n <span class=\"section-number\">05<\/span>\r\n <h2 class=\"section-title\">V\u00eddeo Tour<\/h2>\r\n <div class=\"section-line\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"video-wrapper reveal\">\r\n <iframe \r\n width=\"100%\" \r\n height=\"100%\" \r\n src=\"https:\/\/www.youtube.com\/embed\/WUoSHL0LCwc\"\r\n title=\"Video Tour\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n allowfullscreen>\r\n <\/iframe>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- 6. CONCLUSIONS -->\r\n<section id=\"conclusions\">\r\n <div class=\"section-header reveal\">\r\n <span class=\"section-number\">06<\/span>\r\n <h2 class=\"section-title\">Conclusions<\/h2>\r\n <div class=\"section-line\"><\/div>\r\n <\/div>\r\n <div class=\"conclusions-grid reveal\">\r\n <div class=\"conclusion-block\">\r\n <div class=\"conclusion-label\">Reflexi\u00f3 final<\/div>\r\n <p class=\"conclusion-text\">La idea principal era crear un fanzine interactiu sobre el FC Barcelona que no se centr\u00e9s \u00fanicament a explicar la seva hist\u00f2ria esportiva, sin\u00f3 tamb\u00e9 en representar el sentiment pel club tal i cual com jo ho visc. Aquest objectiu s\u2019ha \r\naconseguit a trav\u00e9s de la immersitivitat que t\u00e9 el fanzine, tamb\u00e9 per la composici\u00f3 visual i interacci\u00f3 digital.<\/p>\r\n<br>\r\n<p class=\"conclusion-text\">Un dels aspectes m\u00e9s importants del projecte ha estat la construcci\u00f3 d\u2019una identitat visual pr\u00f2pia. El fanzine no funciona nom\u00e9s com una recopilaci\u00f3 d\u2019informaci\u00f3, sin\u00f3 com una experi\u00e8ncia visual, la jerarquia tipogr\u00e0fica, les composicions \r\nexperimentals i l\u2019estil gr\u00e0fic de cada pagina inspirat en un football magazine.\r\n<\/p>\r\n <\/div>\r\n <div class=\"conclusion-block\">\r\n <div class=\"conclusion-label\">Aprenentatges<\/div>\r\n <p class=\"conclusion-text\">He millorat l\u2019\u00fas d\u2019InDesign, especialment en la maquetaci\u00f3 editorial i en la incorporaci\u00f3 de recursos interactius, animacions, sons, etc. Tamb\u00e9 s\u2019ha aprofundit en l\u2019\u00fas d\u2019Illustrator i Photoshop per desenvolupar el grafisme del projecte i \r\nexperimentar amb composicions visuals m\u00e9s arriscades abans d\u2019incorporar-les a la maquetaci\u00f3 final.\r\n<\/p>\r\n <\/div>\r\n <div class=\"conclusion-block\">\r\n <div class=\"conclusion-label\">Valoraci\u00f3 personal<\/div>\r\n <p class=\"conclusion-text\">En quant a la evoluci\u00f3 del projecte, la idea inicial ha canviat considerablement durant el proc\u00e9s. Al principi la \r\nproposta estava m\u00e9s centrada en la hist\u00f2ria del club i explicar-la, aix\u00f2 ja ho sap tothom, per\u00f2 amb la investigaci\u00f3 i les proves visuals el projecte ha evolucionat cap a una proposta m\u00e9s visual relacionada amb el disseny gr\u00e0fic i sobretot centrada en el sentiment per al Bar\u00e7a. \r\n<\/p>\r\n<br>\r\n<p class=\"conclusion-text\">Aquesta evoluci\u00f3 tambe ha ajudat a construir un projecte m\u00e9s personal per ami, ja que visc el Bar\u00e7a desde que vaig n\u00e9ixer, i poder expressar aquest amor per al club al meu projecte ha sentat bastant significatiu.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- 7. FOOTER -->\r\n<footer>\r\n <div class=\"reveal\">\r\n <div class=\"footer-author-name\">Andr\u00e9s<br><span>COTRINA ACOSTA<\/span><\/div>\r\n <div class=\"footer-course\">M\u00d2DUL D\u2019OBRA FINAL \u2014 \r\nCICLE FORMATIU DE GRAU MITJ\u00c0\r\n D\u2019ASSIST\u00c8NCIA AL PRODUCTE GR\u00c0FIC INTERACTIU \u2014 \r\nCurs 2025\u20132026<\/div>\r\n <p class=\"footer-bio\">ESCOLA D\u2019ART I DISSENY DE RUB\u00cd.<\/p>\r\n <\/div>\r\n<div class=\"footer-avatar reveal\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/25008.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/BAERADSAD-scaled.png\" \r\n alt=\"Foto de l'autor\"\r\n style=\"width:100%; height:100%; object-fit:cover; border-radius:2px;\"\r\n >\r\n<\/div>\r\n<div class=\"footer-copy\">\r\n <span>\u00a9 2026 \u2014 1899-Obra Final-Andr\u00e9s Cotrina Acosta<\/span>\r\n <div class=\"footer-copy-dots\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/div>\r\n<\/div>\r\n<\/footer>\r\n\r\n<script>\r\n \/\/ Hamburger menu\r\n const hamburger = document.getElementById('hamburger');\r\n const navLinks = document.getElementById('navLinks');\r\n hamburger.addEventListener('click', () => navLinks.classList.toggle('open'));\r\n navLinks.querySelectorAll('a').forEach(a => a.addEventListener('click', () => navLinks.classList.remove('open')));\r\n\r\n \/\/ Tabs\r\n document.querySelectorAll('.proces-tab').forEach(tab => {\r\n tab.addEventListener('click', () => {\r\n document.querySelectorAll('.proces-tab').forEach(t => t.classList.remove('active'));\r\n document.querySelectorAll('.proces-panel').forEach(p => p.classList.remove('active'));\r\n tab.classList.add('active');\r\n document.getElementById('panel-' + tab.dataset.tab).classList.add('active');\r\n });\r\n });\r\n\r\n \/\/ Scroll reveal\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach((entry, i) => {\r\n if (entry.isIntersecting) {\r\n setTimeout(() => entry.target.classList.add('visible'), i * 80);\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n\r\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>Projecte \u2014 Landing Page Inici Referents Proc\u00e9s Fanzine V\u00eddeo Conclusions Obra Final 2026 UN FANZINE DELFC BARCELONA El meu projecte d\u2019obra final \u201c1899\u201d consisteix en la creaci\u00f3 d\u2019un fanzine interactiu centrat en els momenents mes importants de la historia del club i la identitat del FC Barcelona. La proposta no busca \u00fanicament explicar els \u00e8xits […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-216","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/25008.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/25008.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/25008.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/25008.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/25008.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=216"}],"version-history":[{"count":644,"href":"https:\/\/25008.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/216\/revisions"}],"predecessor-version":[{"id":900,"href":"https:\/\/25008.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/216\/revisions\/900"}],"wp:attachment":[{"href":"https:\/\/25008.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}