{"id":9,"date":"2026-05-10T20:03:12","date_gmt":"2026-05-10T18:03:12","guid":{"rendered":"https:\/\/25042.ooteca.artedra.net\/?page_id=9"},"modified":"2026-05-20T10:46:37","modified_gmt":"2026-05-20T08:46:37","slug":"elementor-9","status":"publish","type":"page","link":"https:\/\/25042.ooteca.artedra.net\/","title":{"rendered":"Elementor #9"},"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\nBirkin \u2014 Jana Moreno<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:wght@300;400&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n :root {\r\n --orange: #FD780F;\r\n --white: #ffffff;\r\n --black: #111111;\r\n --gray-light: #f5f4f2;\r\n --gray-mid: #e8e6e2;\r\n --font-serif: 'Cormorant Garamond', Georgia, serif;\r\n --font-mono: 'DM Mono', monospace;\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n font-family: var(--font-serif);\r\n background: var(--white);\r\n color: var(--black);\r\n overflow-x: hidden;\r\n cursor: none;\r\n }\r\n\r\n \/* CURSOR PERSONALIZADO *\/\r\n .cursor {\r\n position: fixed;\r\n width: 10px; height: 10px;\r\n background: var(--orange);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 9999;\r\n transform: translate(-50%, -50%);\r\n transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease;\r\n mix-blend-mode: multiply;\r\n }\r\n .cursor.hovering {\r\n width: 40px; height: 40px;\r\n background: var(--orange);\r\n opacity: 0.3;\r\n }\r\n\r\n \/* NAVEGACI\u00d3N *\/\r\n nav {\r\n position: fixed;\r\n top: 0; left: 0; 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: 24px 60px;\r\n background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%);\r\n transition: background 0.4s ease, padding 0.4s ease;\r\n }\r\n nav.scrolled {\r\n background: var(--white);\r\n padding: 30px 60px;\r\n border-bottom: 1px solid var(--gray-mid);\r\n }\r\n nav.scrolled .logo { color: var(--black); }\r\n nav.scrolled .nav-links a { color: var(--black); }\r\n nav .logo {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 0.25em;\r\n text-transform: uppercase;\r\n color: white;\r\n text-decoration: none;\r\n }\r\n nav .nav-links {\r\n display: flex;\r\n gap: 40px;\r\n list-style: none;\r\n }\r\n nav .nav-links a {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.7);\r\n text-decoration: none;\r\n position: relative;\r\n padding-bottom: 2px;\r\n }\r\n nav .nav-links a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0; left: 0;\r\n width: 0; height: 1px;\r\n background: var(--orange);\r\n transition: width 0.4s ease;\r\n }\r\n nav .nav-links a:hover::after { width: 100%; }\r\n\r\n \/* HERO *\/\r\n .hero-header-img {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n }\r\n .hero-header-img img {\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n object-position: center 65%;\r\n display: block;\r\n filter: brightness(0.62);\r\n transform: scale(1.9);\r\n transform-origin: center 65%;\r\n }\r\n\r\n .hero {\r\n min-height: 50vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n padding: 80px 60px 40px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .hero > * { position: relative; z-index: 1; }\r\n .hero-bg-text {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-family: var(--font-serif);\r\n font-size: clamp(120px, 20vw, 260px);\r\n font-weight: 300;\r\n color: transparent;\r\n -webkit-text-stroke: 1px rgba(255,255,255,0.08);\r\n pointer-events: none;\r\n white-space: nowrap;\r\n letter-spacing: -0.02em;\r\n user-select: none;\r\n transition: transform 0.1s linear;\r\n z-index: 1;\r\n }\r\n .hero-tag {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.6);\r\n order: 2;\r\n margin-top: 16px;\r\n margin-bottom: 0;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeUp 0.8s ease 0.3s forwards;\r\n }\r\n .hero-title {\r\n font-family: var(--font-serif);\r\n font-size: clamp(80px, 16vw, 200px);\r\n font-weight: 300;\r\n line-height: 0.88;\r\n order: 1;\r\n letter-spacing: -0.03em;\r\n color: var(--orange);\r\n opacity: 0;\r\n transform: translateY(30px);\r\n animation: fadeUp 1s ease 0.5s forwards;\r\n }\r\n .hero-title span { color: var(--orange); font-style: normal; }\r\n .hero-subtitle {\r\n font-family: var(--font-serif);\r\n font-size: clamp(16px, 2vw, 20px);\r\n font-weight: 300;\r\n font-style: italic;\r\n color: rgba(255,255,255,0.65);\r\n margin-top: 24px;\r\n max-width: 480px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeUp 1s ease 0.7s forwards;\r\n }\r\n .hero-line {\r\n position: absolute;\r\n right: 60px;\r\n bottom: 80px;\r\n width: 1px;\r\n height: 0;\r\n background: var(--orange);\r\n animation: growLine 1.2s ease 1.2s forwards;\r\n z-index: 2;\r\n }\r\n .hero-scroll-hint {\r\n position: absolute;\r\n right: 68px;\r\n bottom: 30px;\r\n font-family: var(--font-mono);\r\n font-size: 9px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.35);\r\n writing-mode: vertical-rl;\r\n opacity: 0;\r\n animation: fadeIn 1s ease 2s forwards;\r\n z-index: 2;\r\n }\r\n\r\n @keyframes fadeUp {\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n @keyframes growLine {\r\n to { height: 40px; }\r\n }\r\n @keyframes fadeIn {\r\n to { opacity: 1; }\r\n }\r\n\r\n \/* \u2500\u2500 AVION \u2500\u2500 *\/\r\n .airplane-strip {\r\n width: 100%;\r\n overflow: hidden;\r\n height: 56px;\r\n position: relative;\r\n background: var(--white);\r\n pointer-events: none;\r\n }\r\n .airplane-path {\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n transform: translateY(-50%);\r\n display: flex;\r\n align-items: center;\r\n gap: 0;\r\n animation: flyAcross 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n will-change: transform, opacity;\r\n }\r\n .airplane-path svg {\r\n width: 44px;\r\n height: 44px;\r\n flex-shrink: 0;\r\n filter: drop-shadow(0 2px 6px rgba(253,120,15,0.25));\r\n }\r\n .airplane-trail {\r\n width: 80px;\r\n height: 1px;\r\n background: repeating-linear-gradient(\r\n to right,\r\n var(--orange) 0px,\r\n var(--orange) 5px,\r\n transparent 5px,\r\n transparent 11px\r\n );\r\n opacity: 0.45;\r\n margin-right: 6px;\r\n flex-shrink: 0;\r\n }\r\n\r\n @keyframes flyAcross {\r\n 0% { transform: translateX(-140px) translateY(-50%); opacity: 0; }\r\n 8% { opacity: 1; }\r\n 80% { opacity: 1; }\r\n 100% { transform: translateX(calc(100vw + 60px)) translateY(-50%); opacity: 0; }\r\n }\r\n\r\n \/* SECCI\u00d3N PORTADA + CONTRAPORTADA *\/\r\n .covers-section {\r\n padding: 100px 60px;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 80px;\r\n align-items: center;\r\n }\r\n .covers-images {\r\n display: flex;\r\n gap: 16px;\r\n align-items: stretch;\r\n }\r\n .cover-img-wrap {\r\n flex: 1;\r\n position: relative;\r\n overflow: hidden;\r\n background: var(--gray-light);\r\n }\r\n .cover-img-wrap::before {\r\n content: '';\r\n display: block;\r\n padding-top: 140%;\r\n }\r\n .cover-img-wrap img {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n .cover-img-wrap:hover img { transform: scale(1.04); }\r\n .cover-img-placeholder {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n .cover-img-placeholder span {\r\n font-family: var(--font-mono);\r\n font-size: 9px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: #bbb;\r\n }\r\n .cover-label {\r\n position: absolute;\r\n bottom: 12px;\r\n left: 12px;\r\n font-family: var(--font-mono);\r\n font-size: 9px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: white;\r\n background: var(--orange);\r\n padding: 4px 8px;\r\n opacity: 1;\r\n transition: opacity 0.3s ease;\r\n pointer-events: none;\r\n }\r\n .cover-img-wrap:hover .cover-label {\r\n opacity: 0;\r\n }\r\n .covers-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 24px;\r\n }\r\n .covers-text .covers-label {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n }\r\n .covers-text .covers-label::after {\r\n content: '';\r\n display: block;\r\n width: 32px; height: 1px;\r\n background: var(--orange);\r\n }\r\n .covers-text h2 {\r\n font-family: var(--font-serif);\r\n font-size: clamp(32px, 3.5vw, 48px);\r\n font-weight: 300;\r\n line-height: 1.05;\r\n letter-spacing: -0.02em;\r\n }\r\n .covers-text h2 em { font-style: italic; color: var(--orange); }\r\n .covers-text p {\r\n font-family: var(--font-serif);\r\n font-size: 17px;\r\n font-weight: 300;\r\n line-height: 1.85;\r\n color: #555;\r\n }\r\n .covers-text .covers-meta {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n border-top: 1px solid var(--gray-mid);\r\n padding-top: 20px;\r\n margin-top: 4px;\r\n }\r\n .covers-text .covers-meta span {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.15em;\r\n color: #999;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .covers-section { grid-template-columns: 1fr; padding: 60px 24px; gap: 48px; }\r\n }\r\n\r\n \/* SECCI\u00d3N: SOBRE EL PROYECTO *\/\r\n .about {\r\n padding: 140px 60px;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 80px;\r\n align-items: center;\r\n }\r\n .about-label {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n margin-bottom: 32px;\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n .about-label::after {\r\n content: '';\r\n display: block;\r\n width: 40px;\r\n height: 1px;\r\n background: var(--orange);\r\n }\r\n .about h2 {\r\n font-family: var(--font-serif);\r\n font-size: clamp(36px, 4vw, 56px);\r\n font-weight: 300;\r\n line-height: 1.1;\r\n letter-spacing: -0.02em;\r\n }\r\n .about h2 em { font-style: italic; color: var(--orange); }\r\n .about-text {\r\n font-family: var(--font-serif);\r\n font-size: 18px;\r\n font-weight: 300;\r\n line-height: 1.8;\r\n color: #444;\r\n }\r\n .about-text p + p { margin-top: 20px; }\r\n .about-detail {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 0.15em;\r\n color: #888;\r\n margin-top: 32px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n }\r\n .about-detail span { border-top: 1px solid var(--gray-mid); padding-top: 8px; }\r\n\r\n \/* SECCI\u00d3N: VIDEO \u2014 ANCHO COMPLETO *\/\r\n .video-section {\r\n padding: 60px 0 120px;\r\n position: relative;\r\n }\r\n .video-section-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n margin-bottom: 40px;\r\n padding: 0 60px;\r\n }\r\n .section-label {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n }\r\n .video-counter {\r\n font-family: var(--font-serif);\r\n font-size: 48px;\r\n font-weight: 300;\r\n color: var(--gray-mid);\r\n font-style: italic;\r\n }\r\n .video-wrapper {\r\n width: 100%;\r\n position: relative;\r\n background: var(--black);\r\n overflow: hidden;\r\n }\r\n .video-wrapper::before {\r\n content: '';\r\n display: block;\r\n padding-top: 56.25%;\r\n }\r\n .video-wrapper video,\r\n .video-wrapper iframe {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n }\r\n .video-caption {\r\n margin-top: 20px;\r\n font-family: var(--font-serif);\r\n font-size: 14px;\r\n font-style: italic;\r\n color: #999;\r\n text-align: right;\r\n padding: 0 60px;\r\n }\r\n\r\n \/* BOT\u00d3 PROTOTIP *\/\r\n .video-btn-wrap {\r\n padding: 28px 60px 0;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n .proto-btn {\r\n display: inline-block;\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 0.25em;\r\n text-transform: uppercase;\r\n color: white;\r\n background: var(--orange);\r\n padding: 14px 36px;\r\n text-decoration: none;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;\r\n cursor: none;\r\n }\r\n .proto-btn:hover {\r\n transform: scale(1.04);\r\n box-shadow: 0 8px 32px rgba(253,120,15,0.35);\r\n background: #e56800;\r\n }\r\n\r\n \/* SECCI\u00d3N: GALER\u00cdA GRID *\/\r\n .gallery-section {\r\n padding: 60px 60px 120px;\r\n }\r\n .gallery-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n margin-bottom: 48px;\r\n }\r\n .gallery-header h3 {\r\n font-family: var(--font-serif);\r\n font-size: clamp(32px, 4vw, 48px);\r\n font-weight: 300;\r\n letter-spacing: -0.02em;\r\n }\r\n .gallery-header h3 em { font-style: italic; color: var(--orange); }\r\n .gallery-grid {\r\n display: grid;\r\n grid-template-columns: repeat(12, 1fr);\r\n grid-template-rows: auto;\r\n gap: 12px;\r\n }\r\n .gallery-item {\r\n overflow: hidden;\r\n position: relative;\r\n background: var(--gray-light);\r\n }\r\n .gallery-item:nth-child(1) { grid-column: 1 \/ 8; grid-row: 1; }\r\n .gallery-item:nth-child(2) { grid-column: 8 \/ 13; grid-row: 1; }\r\n .gallery-item:nth-child(3) { grid-column: 1 \/ 5; grid-row: 2; }\r\n .gallery-item:nth-child(4) { grid-column: 5 \/ 10; grid-row: 2; }\r\n .gallery-item:nth-child(5) { grid-column: 10 \/ 13; grid-row: 2; }\r\n\r\n .gallery-img-wrap {\r\n width: 100%;\r\n padding-top: 70%;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .gallery-item:nth-child(1) .gallery-img-wrap { padding-top: 60%; }\r\n .gallery-item:nth-child(2) .gallery-img-wrap { padding-top: 80%; }\r\n .gallery-item:nth-child(3) .gallery-img-wrap { padding-top: 90%; }\r\n .gallery-item:nth-child(4) .gallery-img-wrap { padding-top: 75%; }\r\n .gallery-item:nth-child(5) .gallery-img-wrap { padding-top: 100%; }\r\n\r\n .gallery-img-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: var(--gray-light);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n }\r\n .gallery-img-bg img {\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n .gallery-item:hover .gallery-img-bg img { transform: scale(1.06); }\r\n .gallery-img-bg .placeholder-text {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: #bbb;\r\n }\r\n .gallery-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(0,0,0,0);\r\n transition: background 0.4s ease;\r\n display: flex;\r\n align-items: flex-end;\r\n padding: 20px;\r\n }\r\n .gallery-item:hover .gallery-overlay { background: rgba(0,0,0,0.3); }\r\n .gallery-overlay-text {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: white;\r\n opacity: 0;\r\n transform: translateY(8px);\r\n transition: opacity 0.3s ease, transform 0.3s ease;\r\n }\r\n .gallery-item:hover .gallery-overlay-text { opacity: 1; transform: translateY(0); }\r\n\r\n \/* SECCI\u00d3N: CITA *\/\r\n .quote-section {\r\n padding: 100px 60px;\r\n background: var(--black);\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .quote-section::before {\r\n content: '\"';\r\n position: absolute;\r\n top: -40px; left: 50%;\r\n transform: translateX(-50%);\r\n font-family: var(--font-serif);\r\n font-size: 400px;\r\n color: rgba(253,120,15,0.05);\r\n line-height: 1;\r\n pointer-events: none;\r\n user-select: none;\r\n }\r\n .quote-text {\r\n font-family: var(--font-serif);\r\n font-size: clamp(24px, 4vw, 48px);\r\n font-weight: 300;\r\n font-style: italic;\r\n color: var(--white);\r\n line-height: 1.3;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n .quote-author {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 0.25em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n margin-top: 32px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* SECCI\u00d3N: CARRUSEL PRINCIPAL *\/\r\n .carousel-section {\r\n padding: 100px 0 120px;\r\n background: var(--white);\r\n overflow: hidden;\r\n }\r\n .carousel-header {\r\n padding: 0 60px;\r\n margin-bottom: 56px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n }\r\n .carousel-header h3 {\r\n font-family: var(--font-serif);\r\n font-size: clamp(32px, 4vw, 48px);\r\n font-weight: 300;\r\n letter-spacing: -0.02em;\r\n }\r\n .carousel-header h3 em { font-style: italic; color: var(--orange); }\r\n .carousel-nav {\r\n display: flex;\r\n gap: 12px;\r\n }\r\n .carousel-btn {\r\n width: 44px; height: 44px;\r\n border: 1px solid var(--gray-mid);\r\n background: none;\r\n cursor: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: border-color 0.3s, background 0.3s;\r\n color: var(--black);\r\n }\r\n .carousel-btn:hover {\r\n border-color: var(--orange);\r\n background: var(--orange);\r\n color: white;\r\n }\r\n .carousel-btn svg { width: 16px; height: 16px; fill: currentColor; }\r\n\r\n .carousel-track-outer {\r\n width: 100%;\r\n overflow: hidden;\r\n }\r\n .carousel-track {\r\n display: flex;\r\n transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);\r\n will-change: transform;\r\n }\r\n .carousel-slide {\r\n flex-shrink: 0;\r\n width: 36vw;\r\n padding: 0 8px;\r\n }\r\n @media (max-width: 900px) {\r\n .carousel-slide { width: 70vw; }\r\n }\r\n .carousel-img-wrap {\r\n width: 100%;\r\n padding-top: 125%;\r\n position: relative;\r\n overflow: hidden;\r\n background: var(--gray-light);\r\n }\r\n .carousel-img-wrap img {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n .carousel-slide:hover .carousel-img-wrap img { transform: scale(1.04); }\r\n .carousel-img-placeholder {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.2em;\r\n color: #ccc;\r\n text-transform: uppercase;\r\n }\r\n .carousel-text-area {\r\n display: none;\r\n }\r\n .carousel-caption {\r\n font-family: var(--font-serif);\r\n font-size: 22px;\r\n font-weight: 300;\r\n font-style: italic;\r\n color: var(--black);\r\n opacity: 0;\r\n transform: translateY(10px);\r\n transition: opacity 0.4s ease, transform 0.4s ease;\r\n max-width: 600px;\r\n }\r\n .carousel-caption.visible { opacity: 1; transform: translateY(0); }\r\n .carousel-caption-sub {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n margin-top: 12px;\r\n opacity: 0;\r\n transition: opacity 0.4s ease 0.1s;\r\n }\r\n .carousel-caption-sub.visible { opacity: 1; }\r\n .carousel-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 32px;\r\n }\r\n .carousel-dot {\r\n width: 6px; height: 6px;\r\n border-radius: 50%;\r\n background: var(--gray-mid);\r\n cursor: none;\r\n transition: background 0.3s, transform 0.3s;\r\n border: none;\r\n padding: 0;\r\n }\r\n .carousel-dot.active {\r\n background: var(--orange);\r\n transform: scale(1.4);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 SECCI\u00d3N REFERENTS \u2014 redise\u00f1ada \u2500\u2500\u2500 *\/\r\n .referents-section {\r\n padding: 100px 60px;\r\n background: var(--white);\r\n }\r\n .referents-section .ref-label {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n margin-bottom: 16px;\r\n }\r\n .referents-section h2 {\r\n font-family: var(--font-serif);\r\n font-size: clamp(36px, 4vw, 56px);\r\n font-weight: 300;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 56px;\r\n }\r\n .referents-section h2 em { font-style: italic; color: var(--orange); }\r\n\r\n \/* Carrusel de referents \u2014 ancho casi completo, centrado *\/\r\n .referents-carousel-wrap {\r\n margin: 0 auto;\r\n max-width: 1200px;\r\n width: 100%;\r\n }\r\n .ref-carousel-outer {\r\n width: 100%;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n .ref-carousel-track {\r\n display: flex;\r\n transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);\r\n will-change: transform;\r\n }\r\n .ref-carousel-slide {\r\n flex-shrink: 0;\r\n width: 100%;\r\n position: relative;\r\n overflow: hidden;\r\n background: var(--gray-light);\r\n }\r\n .referents-carousel-wrap {\r\n margin: 0 auto;\r\n max-width: 500px;\r\n width: 100%;\r\n}\r\n\r\n.ref-carousel-slide img {\r\n width: 100%;\r\n height: 900px;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.7s ease;\r\n}\r\n .ref-carousel-slide:hover img { transform: scale(1.03); }\r\n .ref-carousel-overlay {\r\n position: absolute;\r\n bottom: 0; left: 0; right: 0;\r\n padding: 24px;\r\n background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);\r\n display: flex;\r\n align-items: flex-end;\r\n justify-content: space-between;\r\n }\r\n .ref-carousel-num {\r\n font-family: var(--font-serif);\r\n font-size: 64px;\r\n font-weight: 300;\r\n color: rgba(255,255,255,0.15);\r\n line-height: 1;\r\n font-style: italic;\r\n }\r\n .ref-carousel-counter {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.2em;\r\n color: rgba(255,255,255,0.7);\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* Dots del carrusel de referents *\/\r\n .ref-carousel-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 20px;\r\n }\r\n .ref-carousel-dot {\r\n width: 32px; height: 2px;\r\n background: var(--gray-mid);\r\n border: none;\r\n cursor: pointer;\r\n transition: background 0.3s, transform 0.3s;\r\n padding: 0;\r\n }\r\n .ref-carousel-dot.active {\r\n background: var(--orange);\r\n }\r\n\r\n \/* FOOTER *\/\r\n footer {\r\n padding: 80px 60px 48px;\r\n background: var(--orange);\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr;\r\n gap: 40px;\r\n align-items: end;\r\n }\r\n .footer-brand .f-name {\r\n font-family: var(--font-serif);\r\n font-size: 40px;\r\n font-weight: 300;\r\n font-style: italic;\r\n letter-spacing: -0.02em;\r\n line-height: 1;\r\n color: var(--black);\r\n }\r\n .footer-brand .f-title {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--black);\r\n margin-top: 8px;\r\n }\r\n .footer-center {\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n .footer-center .f-birkin {\r\n font-family: var(--font-serif);\r\n font-size: 13px;\r\n letter-spacing: 0.35em;\r\n text-transform: uppercase;\r\n color: var(--black);\r\n }\r\n .footer-center .f-dot {\r\n width: 8px; height: 8px;\r\n background: var(--black);\r\n border-radius: 50%;\r\n }\r\n .footer-right {\r\n text-align: right;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n align-items: flex-end;\r\n }\r\n .footer-right a {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--black);\r\n text-decoration: none;\r\n transition: opacity 0.3s;\r\n }\r\n .footer-right a:hover { opacity: 0.6; }\r\n .footer-copy {\r\n grid-column: 1 \/ -1;\r\n padding-top: 32px;\r\n border-top: 1px solid rgba(0,0,0,0.15);\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.15em;\r\n color: var(--black);\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n\r\n \/* SCROLL ANIMATIONS *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: opacity 0.8s ease, transform 0.8s ease;\r\n }\r\n .reveal.visible { opacity: 1; transform: translateY(0); }\r\n .reveal-left {\r\n opacity: 0;\r\n transform: translateX(-40px);\r\n transition: opacity 0.9s ease, transform 0.9s ease;\r\n }\r\n .reveal-left.visible { opacity: 1; transform: translateX(0); }\r\n .reveal-right {\r\n opacity: 0;\r\n transform: translateX(40px);\r\n transition: opacity 0.9s ease, transform 0.9s ease;\r\n }\r\n .reveal-right.visible { opacity: 1; transform: translateX(0); }\r\n .reveal-scale {\r\n opacity: 0;\r\n transform: scale(0.95);\r\n transition: opacity 0.9s ease, transform 0.9s ease;\r\n }\r\n .reveal-scale.visible { opacity: 1; transform: scale(1); }\r\n\r\n .delay-1 { transition-delay: 0.1s; }\r\n .delay-2 { transition-delay: 0.2s; }\r\n .delay-3 { transition-delay: 0.3s; }\r\n .delay-4 { transition-delay: 0.4s; }\r\n .delay-5 { transition-delay: 0.5s; }\r\n\r\n .orange-accent {\r\n display: inline-block;\r\n width: 32px;\r\n height: 2px;\r\n background: var(--orange);\r\n vertical-align: middle;\r\n margin-right: 12px;\r\n }\r\n\r\n \/* SECCI\u00d3 WIREFRAME *\/\r\n .wireframe-section {\r\n padding: 100px 60px;\r\n }\r\n .wireframe-section .sec-label {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n margin-bottom: 16px;\r\n }\r\n .wireframe-section h2 {\r\n font-family: var(--font-serif);\r\n font-size: clamp(36px, 4vw, 56px);\r\n font-weight: 300;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 56px;\r\n }\r\n .wireframe-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr;\r\n gap: 40px;\r\n align-items: start;\r\n }\r\n .wireframe-img-wrap {\r\n width: 100%;\r\n height: 380px;\r\n position: relative;\r\n overflow: hidden;\r\n background: var(--gray-light);\r\n cursor: none;\r\n }\r\n .wireframe-pair {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n .wireframe-img-wrap img {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%; height: 100%;\r\n object-fit: contain;\r\n background: white;\r\n transition: opacity 0.5s ease, transform 0.6s ease;\r\n }\r\n .wireframe-img-wrap .img-after {\r\n opacity: 0;\r\n transform: scale(1.04);\r\n }\r\n .wireframe-img-wrap.clicked .img-before { opacity: 0; }\r\n .wireframe-img-wrap.clicked .img-after { opacity: 1; transform: scale(1); }\r\n .wireframe-img-wrap .hover-hint {\r\n position: absolute;\r\n bottom: 12px; right: 12px;\r\n font-family: var(--font-mono);\r\n font-size: 9px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: white;\r\n background: var(--orange);\r\n padding: 4px 8px;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n pointer-events: none;\r\n }\r\n .wireframe-img-wrap:hover .hover-hint { opacity: 1; }\r\n .wireframe-text { padding: 20px 0 0; }\r\n .wireframe-text .wf-title {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n margin-bottom: 8px;\r\n }\r\n .wireframe-text p {\r\n font-family: var(--font-serif);\r\n font-size: 15px;\r\n font-weight: 300;\r\n line-height: 1.7;\r\n color: #555;\r\n }\r\n\r\n \/* SECCI\u00d3 MOCKUP *\/\r\n .mockup-section {\r\n padding: 0 60px 100px;\r\n }\r\n .mockup-section .sec-label {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n margin-bottom: 16px;\r\n }\r\n .mockup-section h2 {\r\n font-family: var(--font-serif);\r\n font-size: clamp(36px, 4vw, 56px);\r\n font-weight: 300;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 40px;\r\n }\r\n .mockup-img-wrap {\r\n width: 100%;\r\n position: relative;\r\n overflow: hidden;\r\n background: var(--gray-light);\r\n }\r\n .mockup-img-wrap img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n background: white;\r\n transition: transform 0.7s ease;\r\n }\r\n .mockup-img-wrap:hover img { transform: scale(1.03); }\r\n\r\n \/* SECCI\u00d3 GUI\u00d3 D'INTERACCI\u00d3 *\/\r\n .guio-section {\r\n padding: 100px 60px;\r\n background: var(--gray-light);\r\n }\r\n .guio-section .sec-label {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n margin-bottom: 16px;\r\n }\r\n .guio-section h2 {\r\n font-family: var(--font-serif);\r\n font-size: clamp(36px, 4vw, 56px);\r\n font-weight: 300;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 8px;\r\n }\r\n .guio-section .guio-intro {\r\n font-family: var(--font-serif);\r\n font-size: 17px;\r\n font-weight: 300;\r\n font-style: italic;\r\n color: #777;\r\n margin-bottom: 64px;\r\n max-width: 560px;\r\n }\r\n .guio-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 2px;\r\n }\r\n .guio-card {\r\n background: white;\r\n padding: 32px 28px;\r\n position: relative;\r\n transition: box-shadow 0.3s ease, transform 0.3s ease;\r\n }\r\n .guio-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.07); transform: translateY(-4px); }\r\n .guio-card .page-num {\r\n font-family: var(--font-mono);\r\n font-size: 9px;\r\n letter-spacing: 0.25em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n margin-bottom: 12px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .guio-card .page-num::after { content: ''; flex: 1; height: 1px; background: var(--gray-mid); }\r\n .guio-card h4 {\r\n font-family: var(--font-serif);\r\n font-size: 20px;\r\n font-weight: 300;\r\n letter-spacing: -0.01em;\r\n margin-bottom: 12px;\r\n color: var(--black);\r\n }\r\n .guio-card p {\r\n font-family: var(--font-serif);\r\n font-size: 14px;\r\n font-weight: 300;\r\n line-height: 1.75;\r\n color: #666;\r\n }\r\n .guio-card .interaction-tag {\r\n display: inline-block;\r\n margin-top: 16px;\r\n font-family: var(--font-mono);\r\n font-size: 9px;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n border: 1px solid var(--orange);\r\n padding: 3px 8px;\r\n }\r\n\r\n \/* DESCRIPCI\u00d3 *\/\r\n .covers-description {\r\n padding: 40px 60px 0;\r\n }\r\n .covers-description .desc-label {\r\n font-family: var(--font-serif);\r\n font-size: clamp(40px, 5vw, 64px);\r\n font-weight: 300;\r\n font-style: italic;\r\n letter-spacing: -0.02em;\r\n color: var(--orange);\r\n margin-bottom: 24px;\r\n display: block;\r\n }\r\n .covers-description p {\r\n font-family: var(--font-serif);\r\n font-size: 18px;\r\n font-weight: 300;\r\n line-height: 1.85;\r\n color: #444;\r\n max-width: 720px;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .wireframe-grid { grid-template-columns: 1fr 1fr; }\r\n .guio-grid { grid-template-columns: 1fr 1fr; }\r\n .ref-carousel-slide img { height: 380px; }\r\n }\r\n @media (max-width: 768px) {\r\n nav { padding: 20px 24px; }\r\n nav .nav-links { gap: 20px; }\r\n .hero { padding: 0 24px 60px; }\r\n .about { padding: 80px 24px; grid-template-columns: 1fr; gap: 40px; }\r\n .video-section { padding: 40px 24px 80px; }\r\n .gallery-section { padding: 40px 24px 80px; }\r\n .gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }\r\n .gallery-item:nth-child(1) { grid-column: 1 \/ 3; }\r\n .gallery-item:nth-child(2) { grid-column: 1 \/ 2; }\r\n .gallery-item:nth-child(3) { grid-column: 2 \/ 3; }\r\n .gallery-item:nth-child(4) { grid-column: 1 \/ 2; }\r\n .gallery-item:nth-child(5) { grid-column: 2 \/ 3; }\r\n .gallery-item .gallery-img-wrap { padding-top: 100% !important; }\r\n .quote-section { padding: 80px 24px; }\r\n .carousel-header { padding: 0 24px; }\r\n footer { padding: 60px 24px 40px; grid-template-columns: 1fr; }\r\n .footer-right { text-align: left; align-items: flex-start; }\r\n .footer-copy { flex-direction: column; gap: 8px; }\r\n .referents-section { padding: 60px 24px; }\r\n .ref-carousel-slide img { height: 260px; }\r\n }\r\n @media (max-width: 600px) {\r\n .wireframe-grid { grid-template-columns: 1fr; }\r\n .guio-grid { grid-template-columns: 1fr; }\r\n .wireframe-section, .mockup-section, .guio-section { padding: 60px 24px; }\r\n .covers-description { padding: 60px 24px 0; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- CURSOR -->\r\n<div class=\"cursor\" id=\"cursor\"><\/div>\r\n\r\n<!-- NAVEGACI\u00d3N -->\r\n<!-- CAMBIO 1 & 2: \"Video\" \u2192 \"V\u00eddeo\" y \"P\u00e1ginas\" \u2192 \"P\u00e0gines\" -->\r\n<nav>\r\n <a href=\"#\" class=\"logo\">Jana Moreno<\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#sobre\">Sobre<\/a><\/li>\r\n <li><a href=\"#video\">V\u00eddeo<\/a><\/li>\r\n <li><a href=\"#carousel\">P\u00e0gines<\/a><\/li>\r\n <\/ul>\r\n<\/nav>\r\n\r\n<!-- HERO -->\r\n<section class=\"hero\">\r\n <div class=\"hero-header-img\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/birkinportada-2.jpg\" alt=\"Birkin \u2014 Jana Moreno\">\r\n <\/div>\r\n <div class=\"hero-tag\">Fanzine Editorial \u00b7 2026<\/div>\r\n <h1 class=\"hero-title\">Birkin<\/h1>\r\n <div class=\"hero-line\"><\/div>\r\n<\/section>\r\n\r\n<!-- IMAGEN INFERIOR AL HERO -->\r\n<section class=\"hero-bottom-img-section\">\r\n <div class=\"hero-bottom-img-wrap reveal-scale\"><\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550 LA HIST\u00d2RIA \u2550\u2550 -->\r\n<section class=\"about\" id=\"sobre\" style=\"padding-top:80px;padding-bottom:80px;\">\r\n <div class=\"reveal-left\">\r\n <h2><span style=\"font-style:normal;color:var(--black)\">La<\/span><br>Hist\u00f2ria<\/h2>\r\n <\/div>\r\n <div class=\"reveal-right delay-2\">\r\n <div class=\"about-text\">\r\n <p>El Birkin d'Herm\u00e8s neix l'any 1984, durant un vol entre Par\u00eds i Londres, quan Jane Birkin comenta a Jean-Louis Dumas que no troba cap bossa que sigui pr\u00e0ctica i bonica alhora. A partir d'aquesta conversa, es crea una bossa pensada per al dia a dia, amb espai, compartiments i una est\u00e8tica elegant i discreta.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 AVION ANIMADO \u2500\u2500 -->\r\n<style>\r\n .airplane-strip {\r\n height: 130px !important;\r\n }\r\n .airplane-path {\r\n gap: 12px;\r\n }\r\n .airplane-smoke {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-right: 4px;\r\n }\r\n .smoke-dot {\r\n display: block;\r\n border-radius: 50%;\r\n background: rgba(253, 120, 15, 0.18);\r\n filter: blur(2px);\r\n animation: smokePulse 1.8s ease-in-out infinite;\r\n }\r\n .smoke-dot:nth-child(1) { width: 18px; height: 18px; opacity: 0.18; animation-delay: 0s; }\r\n .smoke-dot:nth-child(2) { width: 24px; height: 24px; opacity: 0.22; animation-delay: 0.2s; }\r\n .smoke-dot:nth-child(3) { width: 30px; height: 30px; opacity: 0.26; animation-delay: 0.4s; }\r\n .smoke-dot:nth-child(4) { width: 38px; height: 38px; opacity: 0.2; animation-delay: 0.6s; }\r\n .smoke-dot:nth-child(5) { width: 48px; height: 48px; opacity: 0.14; animation-delay: 0.8s; }\r\n @keyframes smokePulse {\r\n 0% { transform: scale(0.85); opacity: 0.1; }\r\n 50% { transform: scale(1.08); opacity: 0.28; }\r\n 100% { transform: scale(0.85); opacity: 0.1; }\r\n }\r\n<\/style>\r\n\r\n<div class=\"airplane-strip\" aria-hidden=\"true\">\r\n <div class=\"airplane-path\" style=\"animation: flyAcross 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;\">\r\n <div class=\"airplane-smoke\">\r\n <span class=\"smoke-dot\"><\/span>\r\n <span class=\"smoke-dot\"><\/span>\r\n <span class=\"smoke-dot\"><\/span>\r\n <span class=\"smoke-dot\"><\/span>\r\n <span class=\"smoke-dot\"><\/span>\r\n <\/div>\r\n <svg viewBox=\"0 0 180 80\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:260px;height:116px;flex-shrink:0;filter:drop-shadow(0 4px 10px rgba(253,120,15,0.28));\">\r\n <g transform=\"rotate(-3 90 40)\">\r\n <path d=\"M7 42 C18 39 32 38 48 38 L78 38 L39 8 C36 6 36 3 41 4 L53 5 C56 5 58 6 60 8 L104 38 L133 37 C151 37 166 42 174 50 C177 53 176 56 171 58 C154 64 137 66 116 65 L91 64 L58 76 C54 78 51 76 54 72 L75 63 L49 61 C35 60 22 57 11 53 C7 51 5 48 8 46 L25 44 L7 42Z\" fill=\"#FD780F\"\/>\r\n <path d=\"M80 63 C90 61 103 61 114 64 C113 70 111 73 107 74 C98 76 88 74 78 69 C76 67 77 65 80 63Z\" fill=\"#FD780F\"\/>\r\n <path d=\"M20 39 L5 18 C3 15 5 12 9 13 L20 14 C23 14 25 16 27 19 L45 38Z\" fill=\"#FD780F\"\/>\r\n <\/g>\r\n <\/svg>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- DESCRIPCI\u00d3 -->\r\n<div class=\"covers-description\">\r\n <div class=\"desc-label reveal\">Descripci\u00f3<\/div>\r\n <p class=\"reveal delay-2\">\u00c9s un fanzine interactiu sobre el Birkin d'Herm\u00e8s que mostra aquesta bossa com un s\u00edmbol de luxe, exclusivitat i estatus. Combina una est\u00e8tica elegant amb imatge, moviment i interactivitat per crear una experi\u00e8ncia visual atractiva.<\/p>\r\n<\/div>\r\n\r\n<!-- CONCEPTE VISUAL -->\r\n<section style=\"padding:100px 60px; background:var(--white);\" id=\"concepte\">\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;\">\r\n <div class=\"reveal-left\">\r\n <h2 style=\"font-family:var(--font-serif);font-size:clamp(36px,4vw,56px);font-weight:300;letter-spacing:-0.02em;line-height:1.05;margin-bottom:32px;\">Concepte visual<br>i <em style=\"font-style:italic;color:var(--black)\">estil<\/em><\/h2>\r\n <\/div>\r\n <div class=\"reveal-right delay-2\" style=\"display:flex;flex-direction:row;gap:12px;align-items:stretch;\">\r\n <div style=\"flex:1;padding:20px 16px;border:1px solid var(--gray-mid);text-align:center;transition:border-color 0.3s,background 0.3s;\" onmouseenter=\"this.style.borderColor='var(--orange)';this.style.background='rgba(253,120,15,0.04)'\" onmouseleave=\"this.style.borderColor='var(--gray-mid)';this.style.background='transparent'\">\r\n <div style=\"font-family:var(--font-serif);font-size:18px;font-weight:300;letter-spacing:0.05em;\">Editorial<\/div>\r\n <\/div>\r\n <div style=\"flex:1;padding:20px 16px;border:1px solid var(--gray-mid);text-align:center;transition:border-color 0.3s,background 0.3s;\" onmouseenter=\"this.style.borderColor='var(--orange)';this.style.background='rgba(253,120,15,0.04)'\" onmouseleave=\"this.style.borderColor='var(--gray-mid)';this.style.background='transparent'\">\r\n <div style=\"font-family:var(--font-serif);font-size:18px;font-weight:300;letter-spacing:0.05em;\">Visual<\/div>\r\n <\/div>\r\n <div style=\"flex:1;padding:20px 16px;border:1px solid var(--gray-mid);text-align:center;transition:border-color 0.3s,background 0.3s;\" onmouseenter=\"this.style.borderColor='var(--orange)';this.style.background='rgba(253,120,15,0.04)'\" onmouseleave=\"this.style.borderColor='var(--gray-mid)';this.style.background='transparent'\">\r\n <div style=\"font-family:var(--font-serif);font-size:18px;font-weight:300;letter-spacing:0.05em;\">Interactiu<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- WIREFRAME \u2014 CAMBIO 3: movido aqu\u00ed, justo despu\u00e9s de #concepte -->\r\n<section class=\"wireframe-section\" id=\"wireframe\">\r\n <div class=\"sec-label reveal\">Wireframe<\/div>\r\n <h2 class=\"reveal delay-1\">Estructura<br><em style=\"font-style:italic;color:var(--orange)\">visual<\/em><\/h2>\r\n <div class=\"wireframe-grid\">\r\n\r\n <div class=\"wireframe-pair reveal delay-1\">\r\n <div class=\"wireframe-img-wrap\">\r\n <img decoding=\"async\" class=\"img-before\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-12-may-2026-12_14_44.png\" alt=\"Wireframe 1\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\">\r\n <img decoding=\"async\" class=\"img-after\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-07-082212.png\">\r\n <span class=\"hover-hint\">Veure detall<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"wireframe-pair reveal delay-2\">\r\n <div class=\"wireframe-img-wrap\">\r\n <img decoding=\"async\" class=\"img-before\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-12-may-2026-12_15_27.png\" alt=\"Wireframe 2\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;\">\r\n <img decoding=\"async\" class=\"img-after\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-07-081838.png\" alt=\"Wireframe 2 detall\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;\">\r\n <span class=\"hover-hint\">Veure detall<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"wireframe-pair reveal delay-3\" style=\"align-self:center;padding-top:40px;\">\r\n <p style=\"font-family:var(--font-serif);font-size:17px;font-weight:300;line-height:1.8;color:#555;font-style:italic;\">\r\n Al principi els wireframes eren molt simples i est\u00e0tics, no transmetien prou for\u00e7a visual. Per aix\u00f2 es va canviar l'enfocament cap a composicions m\u00e9s din\u00e0miques, atractives i atrevides, refor\u00e7ant l'est\u00e8tica editorial del fanzine.\r\n <\/p>\r\n <div style=\"margin-top:20px;width:32px;height:2px;background:var(--orange);\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- TIPOGRAFIA -->\r\n<section style=\"padding:80px 60px;background:var(--black);\" id=\"tipografia\">\r\n <div class=\"reveal\" style=\"font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--orange);margin-bottom:24px;\">Tipografia<\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;\">\r\n <div class=\"reveal delay-1\">\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;\">T\u00edtols<\/div>\r\n <div style=\"font-family:var(--font-serif);font-size:22px;font-weight:300;color:white;letter-spacing:0.08em;margin-bottom:20px;\">MAP Roman Narrow<\/div>\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-14-082408.png\" alt=\"Tipografia de t\u00edtols MAP Roman Narrow\" style=\"width:100%;height:auto;display:block;object-fit:contain;\">\r\n <\/div>\r\n <div class=\"reveal delay-2\">\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;\">Cos de text<\/div>\r\n <div style=\"font-family:var(--font-serif);font-size:22px;font-weight:300;color:white;letter-spacing:0.04em;margin-bottom:20px;\">Minion Pro Regular<\/div>\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-14-082436.png\" alt=\"Tipografia de cos de text Minion Pro Regular\" style=\"width:100%;height:auto;display:block;object-fit:contain;\">\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- T\u00c8CNICA DEL TREBALL -->\r\n<section style=\"padding:100px 60px;background:var(--gray-light);\" id=\"tecnica\">\r\n <div class=\"reveal\" style=\"font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;\">T\u00e8cnica<\/div>\r\n <h2 class=\"reveal delay-1\" style=\"font-family:var(--font-serif);font-size:clamp(36px,4vw,56px);font-weight:300;letter-spacing:-0.02em;margin-bottom:48px;\">T\u00e8cnica del<br><em style=\"font-style:italic;color:var(--orange)\">treball<\/em><\/h2>\r\n <div style=\"display:flex;flex-direction:column;gap:3px;\">\r\n\r\n <div class=\"reveal delay-1\" style=\"display:grid;grid-template-columns:280px 1fr;overflow:hidden;background:white;transition:box-shadow 0.3s;\" onmouseenter=\"this.style.boxShadow='0 4px 24px rgba(0,0,0,0.08)'\" onmouseleave=\"this.style.boxShadow='none'\">\r\n <div style=\"overflow:hidden;height:300px;\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada10.png\" style=\"width:100%;height:100%;object-fit:cover;\">\r\n <\/div>\r\n <div style=\"padding:28px 32px;display:flex;flex-direction:column;justify-content:center;\">\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.25em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;\">01<\/div>\r\n <div style=\"font-family:var(--font-serif);font-size:22px;font-weight:300;margin-bottom:8px;\">Duot\u00f2<\/div>\r\n <p style=\"font-family:var(--font-serif);font-size:14px;font-weight:300;line-height:1.7;color:#666;\">T\u00e8cnica que redueix les imatges a dos colors, creant un efecte visual potent i coherent amb la paleta del fanzine.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal delay-2\" style=\"display:grid;grid-template-columns:280px 1fr;overflow:hidden;background:white;transition:box-shadow 0.3s;\" onmouseenter=\"this.style.boxShadow='0 4px 24px rgba(0,0,0,0.08)'\" onmouseleave=\"this.style.boxShadow='none'\">\r\n <div style=\"overflow:hidden;height:300px;\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-083906.png\" style=\"width:100%;height:100%;object-fit:cover;\">\r\n <\/div>\r\n <div style=\"padding:28px 32px;display:flex;flex-direction:column;justify-content:center;\">\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.25em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;\">02<\/div>\r\n <div style=\"font-family:var(--font-serif);font-size:22px;font-weight:300;margin-bottom:8px;\">Imatges bitmap<\/div>\r\n <p style=\"font-family:var(--font-serif);font-size:14px;font-weight:300;line-height:1.7;color:#666;\">Conversi\u00f3 d'imatges a mode bitmap per obtenir un efecte gr\u00e0fic rug\u00f3s i texturat, proper a l'est\u00e8tica del fanzine tradicional.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal delay-3\" style=\"display:grid;grid-template-columns:280px 1fr;overflow:hidden;background:white;transition:box-shadow 0.3s;\" onmouseenter=\"this.style.boxShadow='0 4px 24px rgba(0,0,0,0.08)'\" onmouseleave=\"this.style.boxShadow='none'\">\r\n <div style=\"overflow:hidden;height:320px;\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-084040.png\" alt=\"M\u00e0scares de retall\" style=\"width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;\" onmouseenter=\"this.style.transform='scale(1.05)'\" onmouseleave=\"this.style.transform='scale(1)'\">\r\n <\/div>\r\n <div style=\"padding:28px 32px;display:flex;flex-direction:column;justify-content:center;\">\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.25em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;\">03<\/div>\r\n <div style=\"font-family:var(--font-serif);font-size:22px;font-weight:300;margin-bottom:8px;\">M\u00e0scares de retall<\/div>\r\n <p style=\"font-family:var(--font-serif);font-size:14px;font-weight:300;line-height:1.7;color:#666;\">T\u00e8cnica per integrar imatges dins de formes tipogr\u00e0fiques o geom\u00e8triques, creant composicions visuals impactants.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal delay-4\" style=\"display:grid;grid-template-columns:280px 1fr;overflow:hidden;background:white;transition:box-shadow 0.3s;\" onmouseenter=\"this.style.boxShadow='0 4px 24px rgba(0,0,0,0.08)'\" onmouseleave=\"this.style.boxShadow='none'\">\r\n <div style=\"overflow:hidden;\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-084153.png\" alt=\"Edici\u00f3 amb Photoshop\" style=\"width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;\" onmouseenter=\"this.style.transform='scale(1.05)'\" onmouseleave=\"this.style.transform='scale(1)'\">\r\n <\/div>\r\n <div style=\"padding:28px 32px;display:flex;flex-direction:column;justify-content:center;\">\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.25em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;\">04<\/div>\r\n <div style=\"font-family:var(--font-serif);font-size:22px;font-weight:300;margin-bottom:8px;\">Edici\u00f3 d'imatges amb Photoshop<\/div>\r\n <p style=\"font-family:var(--font-serif);font-size:14px;font-weight:300;line-height:1.7;color:#666;\">Retoc i composici\u00f3 d'imatges per adaptar-les a l'est\u00e8tica del projecte: neteja de fons, ajustos de color i muntatge editorial.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal delay-5\" style=\"display:grid;grid-template-columns:280px 1fr;overflow:hidden;background:white;transition:box-shadow 0.3s;\" onmouseenter=\"this.style.boxShadow='0 4px 24px rgba(0,0,0,0.08)'\" onmouseleave=\"this.style.boxShadow='none'\">\r\n <div style=\"overflow:hidden;height:140px;\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-07-105034.png\" alt=\"Interaccions amb InDesign\" style=\"width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;\" onmouseenter=\"this.style.transform='scale(1.05)'\" onmouseleave=\"this.style.transform='scale(1)'\">\r\n <\/div>\r\n <div style=\"padding:28px 32px;display:flex;flex-direction:column;justify-content:center;\">\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.25em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;\">05<\/div>\r\n <div style=\"font-family:var(--font-serif);font-size:22px;font-weight:300;margin-bottom:8px;\">Interaccions amb InDesign<\/div>\r\n <p style=\"font-family:var(--font-serif);font-size:14px;font-weight:300;line-height:1.7;color:#666;\">Creaci\u00f3 d'animacions, transicions i elements interactius directament des d'InDesign per donar vida al fanzine digital.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- PROC\u00c9S DE TREBALL -->\r\n<section style=\"padding:100px 60px;background:var(--white);\" id=\"proces\">\r\n <div class=\"reveal\" style=\"font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;\">Proc\u00e9s<\/div>\r\n <h2 class=\"reveal delay-1\" style=\"font-family:var(--font-serif);font-size:clamp(36px,4vw,56px);font-weight:300;letter-spacing:-0.02em;margin-bottom:56px;\">Proc\u00e9s de<br><em style=\"font-style:italic;color:var(--orange)\">treball<\/em><\/h2>\r\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:24px;\">\r\n\r\n <div class=\"reveal delay-1\" style=\"display:flex;flex-direction:column;\">\r\n <div style=\"position:relative;overflow:hidden;background:var(--gray-light);cursor:pointer;\" onclick=\"toggleProcessImg(this)\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-07-124141.png\" alt=\"Exemple 1 inicial\" style=\"width:100%;display:block;object-fit:contain;background:white;transition:opacity 0.5s ease;\" class=\"proc-before\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada.png\" alt=\"Exemple 1 detall\" style=\"width:100%;display:block;object-fit:contain;background:white;position:absolute;inset:0;height:100%;opacity:0;transition:opacity 0.5s ease;\" class=\"proc-after\">\r\n <div style=\"position:absolute;bottom:10px;right:10px;font-family:var(--font-mono);font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:white;background:var(--orange);padding:3px 8px;opacity:0.85;\">Clica<\/div>\r\n <\/div>\r\n <div style=\"padding:20px 0 0;\">\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;\">Exemple 01<\/div>\r\n <p style=\"font-family:var(--font-serif);font-size:15px;font-weight:300;line-height:1.7;color:#555;\">Es va canviar la tipografia i es va fer veure com si estigu\u00e9s en relleu per integrar-la millor a la portada.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal delay-2\" style=\"display:flex;flex-direction:column;\">\r\n <div style=\"position:relative;overflow:hidden;background:var(--gray-light);cursor:pointer;\" onclick=\"toggleProcessImg(this)\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-07-125008.png\" alt=\"Exemple 2 inicial\" style=\"width:100%;display:block;object-fit:contain;background:white;transition:opacity 0.5s ease;\" class=\"proc-before\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-07-125231.png\" alt=\"Exemple 2 detall\" style=\"width:100%;display:block;object-fit:contain;background:white;position:absolute;inset:0;height:100%;opacity:0;transition:opacity 0.5s ease;\" class=\"proc-after\">\r\n <div style=\"position:absolute;bottom:10px;right:10px;font-family:var(--font-mono);font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:white;background:var(--orange);padding:3px 8px;opacity:0.85;\">Clica<\/div>\r\n <\/div>\r\n <div style=\"padding:20px 0 0;\">\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;\">Exemple 02<\/div>\r\n <p style=\"font-family:var(--font-serif);font-size:15px;font-weight:300;line-height:1.7;color:#555;\">S'han utilitzat les ret\u00edcules perqu\u00e8 la composici\u00f3 dels elements sigui m\u00e9s ben estructurada.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal delay-3\" style=\"display:flex;flex-direction:column;\">\r\n <div style=\"position:relative;overflow:hidden;background:var(--gray-light);cursor:pointer;\" onclick=\"toggleProcessImg(this)\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-12-192255.png\" style=\"width:100%;display:block;object-fit:contain;background:white;transition:opacity 0.5s ease;\" class=\"proc-before\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-12-192354.png\" alt=\"Exemple 3 detall\" style=\"width:100%;display:block;object-fit:contain;background:white;position:absolute;inset:0;height:100%;opacity:0;transition:opacity 0.5s ease;\" class=\"proc-after\">\r\n <div style=\"position:absolute;bottom:10px;right:10px;font-family:var(--font-mono);font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:white;background:var(--orange);padding:3px 8px;opacity:0.85;\">Clica<\/div>\r\n <\/div>\r\n <div style=\"padding:20px 0 0;\">\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;\">Exemple 03<\/div>\r\n <p style=\"font-family:var(--font-serif);font-size:15px;font-weight:300;line-height:1.7;color:#555;\">Es van establir unes tipografies m\u00e9s clares i, d'aquesta manera, el resultat visual quedava millor.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- SEPARADOR -->\r\n<div style=\"width:100%;height:2px;background:var(--black);margin:0;\"><\/div>\r\n\r\n<!-- \u2550\u2550 REFERENTS \u2550\u2550 -->\r\n<section class=\"referents-section\" id=\"referents\">\r\n <div class=\"ref-label reveal\">Referents<\/div>\r\n <h2 class=\"reveal delay-1\">Fonts de <em>inspiraci\u00f3<\/em><\/h2>\r\n\r\n <div class=\"referents-carousel-wrap reveal delay-2\">\r\n <div class=\"ref-carousel-outer\">\r\n <div class=\"ref-carousel-track\" id=\"refCarouselTrack\">\r\n\r\n <div class=\"ref-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/1.jpg\" alt=\"Referent 1\">\r\n <div class=\"ref-carousel-overlay\">\r\n <span class=\"ref-carousel-num\">01<\/span>\r\n <span class=\"ref-carousel-counter\" id=\"refCounter\">1 \/ 7<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ref-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/2.jpg\" alt=\"Referent 2\">\r\n <div class=\"ref-carousel-overlay\">\r\n <span class=\"ref-carousel-num\">02<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ref-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/3.jpg\" alt=\"Referent 3\">\r\n <div class=\"ref-carousel-overlay\">\r\n <span class=\"ref-carousel-num\">03<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ref-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/5.jpg\" alt=\"Referent 4\">\r\n <div class=\"ref-carousel-overlay\">\r\n <span class=\"ref-carousel-num\">04<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ref-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/4.jpg\" alt=\"Referent 5\">\r\n <div class=\"ref-carousel-overlay\">\r\n <span class=\"ref-carousel-num\">05<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ref-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/6.jpg\" alt=\"Referent 6\">\r\n <div class=\"ref-carousel-overlay\">\r\n <span class=\"ref-carousel-num\">06<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ref-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/7.jpg\" alt=\"Referent 7\">\r\n <div class=\"ref-carousel-overlay\">\r\n <span class=\"ref-carousel-num\">07<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <div class=\"ref-carousel-dots\" id=\"refCarouselDots\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- SECCI\u00d3N PORTADA + CONTRAPORTADA -->\r\n<section class=\"covers-section\" id=\"coberta\">\r\n <div class=\"covers-images reveal-left\">\r\n <div class=\"cover-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada.png\" alt=\"Birkin \u2014 Portada\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\">\r\n <span class=\"cover-label\">Portada<\/span>\r\n <\/div>\r\n <div class=\"cover-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada29.png\">\r\n <span class=\"cover-label\">Contraportada<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"covers-text reveal-right delay-2\">\r\n <h2>No nom\u00e9s decoren,<br>tamb\u00e9 <em>amaguen<\/em><br>un missatge.<\/h2>\r\n <p>En obrir les p\u00e0gines, la portada i la contraportada funcionen com una entrada simb\u00f2lica dins del bolso i tot el que representa.<\/p>\r\n <div class=\"covers-meta\">\r\n <span>Formato \u2014 A4 \/ 29 p\u00e1ginas<\/span>\r\n <span>Autora \u2014 Jana Moreno, Rub\u00ed \u00b7 2026<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- GUI\u00d3 D'INTERACCI\u00d3 -->\r\n<section class=\"guio-section\" id=\"guio\">\r\n <h2 class=\"reveal delay-1\">Gui\u00f3<br><em style=\"font-style:italic;color:var(--orange)\">d'interacci\u00f3<\/em><\/h2>\r\n <p class=\"guio-intro reveal delay-2\">Cada p\u00e0gina del fanzine cont\u00e9 interaccions dissenyades per crear una experi\u00e8ncia m\u00e9s interactiva.<\/p>\r\n\r\n <div class=\"guio-grid\">\r\n\r\n <div class=\"guio-group-header\" style=\"grid-column:1\/-1;margin-bottom:8px;margin-top:8px;\">\r\n <div style=\"display:flex;align-items:center;gap:20px;\">\r\n <span style=\"font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--black);\">01<\/span>\r\n <h3 style=\"font-family:var(--font-serif);font-size:clamp(22px,2.5vw,32px);font-weight:300;letter-spacing:-0.01em;\">Interaccions de clic<\/h3>\r\n <div style=\"flex:1;height:1px;background:var(--gray-mid);\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"guio-card reveal delay-1\">\r\n <div class=\"page-num\">P\u00e0gina 02<\/div>\r\n <h4>Finestres interactives<\/h4>\r\n <p>Les finestres fan hover i s'amplien lleugerament en passar el cursor. En clicar apareix una guia informativa relacionada amb el tema representat.<\/p>\r\n <span class=\"interaction-tag\">Hover + Clic<\/span>\r\n <div style=\"margin-top:16px;border-top:1px solid var(--gray-mid);padding-top:12px;\">\r\n <button onclick=\"toggleGuioVideo('video-p02')\" style=\"display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);padding:0;\"><span id=\"btn-p02\">\u25b6 Veure v\u00eddeo<\/span><\/button>\r\n <div id=\"video-p02\" style=\"max-height:0;overflow:hidden;transition:max-height 0.5s ease;\"><div style=\"padding-top:12px;\"><div style=\"background:var(--black);aspect-ratio:16\/9;display:flex;align-items:center;justify-content:center;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/5oo5ns5_Fag\" title=\"V\u00eddeo P\u00e0gina 02\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen style=\"width:100%;height:100%;display:block;border:0;\"><\/iframe><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"guio-card reveal delay-2\">\r\n <div class=\"page-num\">P\u00e0gina 05<\/div>\r\n <h4>Jane Birkin<\/h4>\r\n <p>Disc interactiu que gira en clicar, simulant un vinil real. Imatge gran entrant des de la dreta amb objectes amb efectes d'aparici\u00f3 lateral.<\/p>\r\n <span class=\"interaction-tag\">Clic + Rotaci\u00f3<\/span>\r\n <div style=\"margin-top:16px;border-top:1px solid var(--gray-mid);padding-top:12px;\">\r\n <button onclick=\"toggleGuioVideo('video-p05')\" style=\"display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);padding:0;\"><span id=\"btn-p05\">\u25b6 Veure v\u00eddeo<\/span><\/button>\r\n <div id=\"video-p05\" style=\"max-height:0;overflow:hidden;transition:max-height 0.5s ease;\"><div style=\"padding-top:12px;\"><div style=\"background:var(--black);aspect-ratio:16\/9;display:flex;align-items:center;justify-content:center;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/ai3EloGjkDY?si=q5MM9gNJtMvk5PA0\" title=\"V\u00eddeo P\u00e0gina 05\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen style=\"width:100%;height:100%;display:block;border:0;\"><\/iframe><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"guio-card reveal delay-3\">\r\n <div class=\"page-num\">P\u00e0gina 09<\/div>\r\n <h4>Parts del bolso<\/h4>\r\n <p>Bolso interactiu amb parts clicables. Hover amb capa blanca de baixa opacitat. En clicar, s'indica l'element seleccionat del Birkin.<\/p>\r\n <span class=\"interaction-tag\">Hover + Clic<\/span>\r\n <div style=\"margin-top:16px;border-top:1px solid var(--gray-mid);padding-top:12px;\">\r\n <button onclick=\"toggleGuioVideo('video-p09')\" style=\"display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);padding:0;\"><span id=\"btn-p09\">\u25b6 Veure v\u00eddeo<\/span><\/button>\r\n <div id=\"video-p09\" style=\"max-height:0;overflow:hidden;transition:max-height 0.5s ease;\"><div style=\"padding-top:12px;\"><div style=\"background:var(--black);aspect-ratio:16\/9;display:flex;align-items:center;justify-content:center;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/gSwqVRvN3X0?si=__O2fCUdriAmOZ2r\" title=\"V\u00eddeo P\u00e0gina 09\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen style=\"width:100%;height:100%;display:block;border:0;\"><\/iframe><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"guio-group-header\" style=\"grid-column:1\/-1;margin-top:48px;margin-bottom:8px;\">\r\n <div style=\"display:flex;align-items:center;gap:20px;\">\r\n <span style=\"font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--black);\">02<\/span>\r\n <h3 style=\"font-family:var(--font-serif);font-size:clamp(22px,2.5vw,32px);font-weight:300;letter-spacing:-0.01em;\">Aparici\u00f3 i moviment d'elements<\/h3>\r\n <div style=\"flex:1;height:1px;background:var(--gray-mid);\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"guio-card reveal delay-1\">\r\n <div class=\"page-num\">P\u00e0gina 03<\/div>\r\n <h4>P\u00e0gina Herm\u00e8s<\/h4>\r\n <p>Els elements de la p\u00e0gina entren des de diferents direccions: des de la dreta, des de dalt, des de baix o apareixen gradualment, creant ritme visual.<\/p>\r\n <span class=\"interaction-tag\">Animaci\u00f3 d'entrada<\/span>\r\n <div style=\"margin-top:16px;border-top:1px solid var(--gray-mid);padding-top:12px;\">\r\n <button onclick=\"toggleGuioVideo('video-p03')\" style=\"display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);padding:0;\"><span id=\"btn-p03\">\u25b6 Veure v\u00eddeo<\/span><\/button>\r\n <div id=\"video-p03\" style=\"max-height:0;overflow:hidden;transition:max-height 0.5s ease;\"><div style=\"padding-top:12px;\"><div style=\"background:var(--black);aspect-ratio:16\/9;display:flex;align-items:center;justify-content:center;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/hAiS19qx1Ek?si=D4sXvqHw9gA6hjDf\" title=\"V\u00eddeo P\u00e0gina 03\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen style=\"width:100%;height:100%;display:block;border:0;\"><\/iframe><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"guio-card reveal delay-2\">\r\n <div class=\"page-num\">P\u00e0gina 04<\/div>\r\n <h4>Artesania<\/h4>\r\n <p>Els elements gr\u00e0fics apareixen progressivament des de diverses zones, refor\u00e7ant la idea de proc\u00e9s, detall i construcci\u00f3 manual.<\/p>\r\n <span class=\"interaction-tag\">Aparici\u00f3 progressiva<\/span>\r\n <div style=\"margin-top:16px;border-top:1px solid var(--gray-mid);padding-top:12px;\">\r\n <button onclick=\"toggleGuioVideo('video-p04')\" style=\"display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);padding:0;\"><span id=\"btn-p04\">\u25b6 Veure v\u00eddeo<\/span><\/button>\r\n <div id=\"video-p04\" style=\"max-height:0;overflow:hidden;transition:max-height 0.5s ease;\"><div style=\"padding-top:12px;\"><div style=\"background:var(--black);aspect-ratio:16\/9;display:flex;align-items:center;justify-content:center;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/MSJZ_3r57PI?si=aco-rA6EnQHu_UX_\" title=\"V\u00eddeo P\u00e0gina 04\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen style=\"width:100%;height:100%;display:block;border:0;\"><\/iframe><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"guio-card reveal delay-3\">\r\n <div class=\"page-num\">P\u00e0gina 06<\/div>\r\n <h4>Text animat<\/h4>\r\n <p>El text apareix progressivament amb un efecte de revelaci\u00f3 suau, donant ritme a la lectura i evitant que la p\u00e0gina sigui est\u00e0tica.<\/p>\r\n <span class=\"interaction-tag\">Revelaci\u00f3 de text<\/span>\r\n <div style=\"margin-top:16px;border-top:1px solid var(--gray-mid);padding-top:12px;\">\r\n <button onclick=\"toggleGuioVideo('video-p06')\" style=\"display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);padding:0;\"><span id=\"btn-p06\">\u25b6 Veure v\u00eddeo<\/span><\/button>\r\n <div id=\"video-p06\" style=\"max-height:0;overflow:hidden;transition:max-height 0.5s ease;\"><div style=\"padding-top:12px;\"><div style=\"background:var(--black);aspect-ratio:16\/9;display:flex;align-items:center;justify-content:center;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/M5znwfD71ro?si=y9vlQOBlE7J05nka\" title=\"V\u00eddeo P\u00e0gina 06\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen style=\"width:100%;height:100%;display:block;border:0;\"><\/iframe><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"guio-card reveal delay-1\">\r\n <div class=\"page-num\">P\u00e0gina 07<\/div>\r\n <h4>Recorregut visual<\/h4>\r\n <p>La Torre Eiffel i el Big Ben apareixen des de baix. Un avi\u00f3 realitza un recorregut passant prop dels monuments i allunyant-se progressivament.<\/p>\r\n <span class=\"interaction-tag\">Animaci\u00f3 de trajecte<\/span>\r\n <div style=\"margin-top:16px;border-top:1px solid var(--gray-mid);padding-top:12px;\">\r\n <button onclick=\"toggleGuioVideo('video-p07')\" style=\"display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);padding:0;\"><span id=\"btn-p07\">\u25b6 Veure v\u00eddeo<\/span><\/button>\r\n <div id=\"video-p07\" style=\"max-height:0;overflow:hidden;transition:max-height 0.5s ease;\"><div style=\"padding-top:12px;\"><div style=\"background:var(--black);aspect-ratio:16\/9;display:flex;align-items:center;justify-content:center;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/i_Y2DsKXbW0?si=5TYY3UBiXQIoKDvu\" title=\"V\u00eddeo P\u00e0gina 07\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen style=\"width:100%;height:100%;display:block;border:0;\"><\/iframe><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"guio-card reveal delay-2\">\r\n <div class=\"page-num\">P\u00e0gina 10<\/div>\r\n <h4>Moviment del bolso<\/h4>\r\n <p>El bolso rebota sobre la tipografia. Un segon bolso simula el balanceig natural d'una bossa quan es camina, amb moviment suau i org\u00e0nic.<\/p>\r\n <span class=\"interaction-tag\">Animaci\u00f3 en bucle<\/span>\r\n <div style=\"margin-top:16px;border-top:1px solid var(--gray-mid);padding-top:12px;\">\r\n <button onclick=\"toggleGuioVideo('video-p10')\" style=\"display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);padding:0;\"><span id=\"btn-p10\">\u25b6 Veure v\u00eddeo<\/span><\/button>\r\n <div id=\"video-p10\" style=\"max-height:0;overflow:hidden;transition:max-height 0.5s ease;\"><div style=\"padding-top:12px;\"><div style=\"background:var(--black);aspect-ratio:16\/9;display:flex;align-items:center;justify-content:center;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/R6d5dmOxF9Y?si=vv91guS_t2NO4ILK\" title=\"V\u00eddeo P\u00e0gina 10\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen style=\"width:100%;height:100%;display:block;border:0;\"><\/iframe><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"guio-card reveal delay-3\">\r\n <div class=\"page-num\">P\u00e0gina 13<\/div>\r\n <h4>Entrada d'elements<\/h4>\r\n <p>Els elements visuals apareixen des de la dreta i des de l'esquerra, generant una composici\u00f3 amb moviment lateral i una sensaci\u00f3 din\u00e0mica.<\/p>\r\n <span class=\"interaction-tag\">Moviment lateral<\/span>\r\n <div style=\"margin-top:16px;border-top:1px solid var(--gray-mid);padding-top:12px;\">\r\n <button onclick=\"toggleGuioVideo('video-g2')\" style=\"display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);padding:0;\"><span>\u25b6 Veure v\u00eddeo<\/span><\/button>\r\n <div id=\"video-g2\" style=\"max-height:0;overflow:hidden;transition:max-height 0.5s ease;\"><div style=\"padding-top:12px;\"><div style=\"background:var(--black);aspect-ratio:16\/9;display:flex;align-items:center;justify-content:center;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/aGEz4BJkuR0?si=Io4zhuXbx1a05zvC\" title=\"V\u00eddeo P\u00e0gina 13\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen style=\"width:100%;height:100%;display:block;border:0;\"><\/iframe><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- PROGRAMES UTILITZATS -->\r\n<section style=\"padding:80px 60px;background:var(--gray-light);\" id=\"programes\">\r\n <div class=\"reveal\" style=\"font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;\">Eines<\/div>\r\n <h2 class=\"reveal delay-1\" style=\"font-family:var(--font-serif);font-size:clamp(28px,3vw,44px);font-weight:300;letter-spacing:-0.02em;margin-bottom:48px;\">Programes<br><em style=\"font-style:italic;color:var(--orange)\">utilitzats<\/em><\/h2>\r\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:2px;\">\r\n\r\n <div class=\"reveal delay-1\" style=\"background:white;padding:36px 28px;display:flex;align-items:center;gap:20px;transition:box-shadow 0.3s;\" onmouseenter=\"this.style.boxShadow='0 8px 32px rgba(0,0,0,0.08)'\" onmouseleave=\"this.style.boxShadow='none'\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Adobe_InDesign_CC_icon.svg_.png\" alt=\"InDesign\" style=\"width:52px;height:52px;object-fit:contain;flex-shrink:0;border-radius:8px;\">\r\n <div>\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);margin-bottom:6px;\">Maquetaci\u00f3<\/div>\r\n <div style=\"font-family:var(--font-serif);font-size:20px;font-weight:300;\">InDesign<\/div>\r\n <p style=\"font-family:var(--font-serif);font-size:13px;font-weight:300;color:#888;margin-top:6px;line-height:1.6;\">Creaci\u00f3 i maquetaci\u00f3 de totes les p\u00e0gines del fanzine interactiu.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal delay-2\" style=\"background:white;padding:36px 28px;display:flex;align-items:center;gap:20px;transition:box-shadow 0.3s;\" onmouseenter=\"this.style.boxShadow='0 8px 32px rgba(0,0,0,0.08)'\" onmouseleave=\"this.style.boxShadow='none'\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Adobe_Photoshop_CC_icon.svg_-scaled.png\" alt=\"Photoshop\" style=\"width:52px;height:52px;object-fit:contain;flex-shrink:0;border-radius:8px;\">\r\n <div>\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);margin-bottom:6px;\">Edici\u00f3 d'imatges<\/div>\r\n <div style=\"font-family:var(--font-serif);font-size:20px;font-weight:300;\">Photoshop<\/div>\r\n <p style=\"font-family:var(--font-serif);font-size:13px;font-weight:300;color:#888;margin-top:6px;line-height:1.6;\">Retoc, composici\u00f3 i aplicaci\u00f3 de t\u00e8cniques gr\u00e0fiques com el duot\u00f2 i el bitmap.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal delay-3\" style=\"background:white;padding:36px 28px;display:flex;align-items:center;gap:20px;transition:box-shadow 0.3s;\" onmouseenter=\"this.style.boxShadow='0 8px 32px rgba(0,0,0,0.08)'\" onmouseleave=\"this.style.boxShadow='none'\">\r\n <img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Adobe_Illustrator_CC_icon.svg_.png\" alt=\"Illustrator\" style=\"width:52px;height:52px;object-fit:contain;flex-shrink:0;border-radius:8px;\">\r\n <div>\r\n <div style=\"font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--orange);margin-bottom:6px;\">Wireframes<\/div>\r\n <div style=\"font-family:var(--font-serif);font-size:20px;font-weight:300;\">Illustrator<\/div>\r\n <p style=\"font-family:var(--font-serif);font-size:13px;font-weight:300;color:#888;margin-top:6px;line-height:1.6;\">Creaci\u00f3 dels wireframes i composicions vectorials del fanzine.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550 VIDEO FANZINE \u2550\u2550 -->\r\n<section class=\"video-section\" id=\"video\">\r\n <div class=\"video-section-header reveal\">\r\n <span class=\"section-label\" style=\"font-size:13px;letter-spacing:0.25em;\">Fanzine<\/span>\r\n <span class=\"video-counter\">01<\/span>\r\n <\/div>\r\n <div class=\"video-wrapper reveal delay-2\" style=\"width:100%;margin:0;padding:0;\">\r\n <iframe\r\n src=\"https:\/\/www.youtube.com\/embed\/F0_sMGG50S4?autoplay=1&mute=1&loop=1&playlist=F0_sMGG50S4&controls=0&modestbranding=1&showinfo=0&rel=0\"\r\n title=\"Birkin Fanzine\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n allowfullscreen\r\n style=\"position:absolute;inset:0;width:100%;height:100%;display:block;border:0;\">\r\n <\/iframe>\r\n <\/div>\r\n <p class=\"video-caption reveal delay-3\">Fanzine \u00b7 Gravaci\u00f3 de pantalla<\/p>\r\n <div class=\"video-btn-wrap reveal delay-4\">\r\n <a href=\"https:\/\/indd.adobe.com\/view\/88968955-ae16-4e08-bb23-3cd080f00cce\" target=\"_blank\" rel=\"noopener\" class=\"proto-btn\">Veure prototip<\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550 CARRUSEL P\u00c0GINA A P\u00c0GINA \u2550\u2550 -->\r\n<section class=\"carousel-section\" id=\"carousel\">\r\n <div class=\"carousel-header\">\r\n <div class=\"reveal\">\r\n <h3>P\u00e0gina a <span style=\"font-style:italic;\">p\u00e0gina<\/span><\/h3>\r\n <\/div>\r\n <div class=\"carousel-nav\">\r\n <button class=\"carousel-btn\" id=\"prevBtn\" aria-label=\"Anterior\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\r\n <\/button>\r\n <button class=\"carousel-btn\" id=\"nextBtn\" aria-label=\"Siguiente\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"carousel-track-outer\">\r\n <div class=\"carousel-track\" id=\"carouselTrack\">\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada.png\" alt=\"Portada\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada2.png\" alt=\"Birkin Faubourg\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada3.png\" alt=\"Rue du Faubourg\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada4.png\" alt=\"Herm\u00e8s Paris\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada5.png\" alt=\"Herm\u00e8s\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada6.png\" alt=\"LUXE\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada7.png\" alt=\"L'artesania\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada8.png\" alt=\"Par\u00eds\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada9.png\" alt=\"Londres\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada10.png\" alt=\"Jane Birkin\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada11.png\" alt=\"El rostre\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada12.png\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada13.png\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada15.png\" alt=\"Tanca girat\u00f2ria\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada16.png\" alt=\"Anatomia del Birkin\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada17.png\" alt=\"Birkin Bag\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada18.png\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada19.png\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada20.png\" alt=\"El Birkin en moviment\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada21.png\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada22.png\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada23.png\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada24.png\" alt=\"Materials\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada25.png\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada26.png\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada27.png\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada28.png\" alt=\"Contraportada\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;\"><\/div><\/div>\r\n <div class=\"carousel-slide\"><div class=\"carousel-img-wrap\"><img decoding=\"async\" src=\"https:\/\/25042.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada29.png\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"carousel-text-area\">\r\n <p class=\"carousel-caption\" id=\"carouselCaption\"><\/p>\r\n <span class=\"carousel-caption-sub\" id=\"carouselSub\"><\/span>\r\n <div class=\"carousel-dots\" id=\"carouselDots\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- CONCLUSI\u00d3 \u2014 CAMBIO 4: movida aqu\u00ed, justo despu\u00e9s del carrusel #carousel -->\r\n<section style=\"padding:100px 60px;background:var(--black);\" id=\"conclusio\">\r\n <div class=\"reveal\" style=\"font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--orange);margin-bottom:24px;\">Conclusi\u00f3<\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;\">\r\n <div class=\"reveal-left\">\r\n <h2 style=\"font-family:var(--font-serif);font-size:clamp(36px,4vw,56px);font-weight:300;letter-spacing:-0.02em;line-height:1.05;color:white;margin-bottom:32px;\"><em style=\"font-style:italic;color:var(--orange)\">Reflexi\u00f3<\/em><br>final<\/h2>\r\n <\/div>\r\n <div class=\"reveal-right delay-2\">\r\n <p style=\"font-family:var(--font-serif);font-size:18px;font-weight:300;line-height:1.85;color:rgba(255,255,255,0.75);margin-bottom:20px;\">El projecte ha aconseguit crear un fanzine visual i coherent sobre el Birkin i Herm\u00e8s, amb una est\u00e8tica elegant, din\u00e0mica i relacionada amb el luxe. El contingut s'ha organitzat de manera clara perqu\u00e8 el lector entengui la import\u00e0ncia del Birkin sense exc\u00e9s de text.<\/p>\r\n <p style=\"font-family:var(--font-serif);font-size:18px;font-weight:300;line-height:1.85;color:rgba(255,255,255,0.75);margin-bottom:20px;\">Durant el proc\u00e9s, la reelaboraci\u00f3 dels wireframes ha ajudat a donar m\u00e9s ritme i for\u00e7a visual al fanzine. Tamb\u00e9 han funcionat b\u00e9 les interaccions, tot i que es podrien haver desenvolupat m\u00e9s. Una de les principals dificultats ha estat treballar amb v\u00eddeos i dobles p\u00e0gines a InDesign, cosa que ha perm\u00e8s entendre millor les limitacions t\u00e8cniques del programa.<\/p>\r\n <p style=\"font-family:var(--font-serif);font-size:18px;font-weight:300;line-height:1.85;color:rgba(255,255,255,0.75);\">En conjunt, el projecte ha evolucionat d'una idea inicial general a una proposta editorial m\u00e9s definida, professional i coherent, millorant l'\u00fas d'InDesign, la composici\u00f3 visual i la relaci\u00f3 entre imatge, tipografia, color i contingut.<\/p>\r\n <div style=\"width:40px;height:2px;background:var(--orange);margin-top:32px;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- WEBGRAFIA + CR\u00c8DITS -->\r\n<section style=\"padding:80px 60px;background:var(--gray-light);\" id=\"webgrafia\">\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:60px;\">\r\n\r\n <div class=\"reveal\">\r\n <div style=\"font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--orange);margin-bottom:24px;\">Refer\u00e8ncies<\/div>\r\n <h3 style=\"font-family:var(--font-serif);font-size:clamp(28px,3vw,40px);font-weight:300;letter-spacing:-0.02em;margin-bottom:32px;\">Webgrafia<\/h3>\r\n <div id=\"webgrafia-accordion\" style=\"display:flex;flex-direction:column;gap:2px;\">\r\n\r\n <div class=\"acord-item\" style=\"background:white;overflow:hidden;\">\r\n <button onclick=\"toggleAccord(this)\" style=\"width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:none;border:none;cursor:pointer;font-family:var(--font-serif);font-size:15px;font-weight:300;text-align:left;color:var(--black);\">\r\n <span>Highxtar \u2014 Herm\u00e8s, experi\u00e8ncia immersiva<\/span>\r\n <span style=\"font-family:var(--font-mono);font-size:16px;color:var(--orange);transition:transform 0.3s;\" class=\"acord-icon\">+<\/span>\r\n <\/button>\r\n <div class=\"acord-body\" style=\"max-height:0;overflow:hidden;transition:max-height 0.4s ease;padding:0 20px;\">\r\n <p style=\"font-family:var(--font-serif);font-size:13px;font-weight:300;line-height:1.7;color:#666;padding-bottom:16px;\">Highxtar. Herm\u00e8s llan\u00e7a una experi\u00e8ncia immersiva on el luxe forma part del joc.<br><a href=\"https:\/\/highxtar.com\/hermes-lanza-una-experiencia-inmersiva-donde-el-lujo-es-parte-del-juego\/\" target=\"_blank\" style=\"color:var(--orange);font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;word-break:break-all;\">highxtar.com \u2192<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"acord-item\" style=\"background:white;overflow:hidden;\">\r\n <button onclick=\"toggleAccord(this)\" style=\"width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:none;border:none;cursor:pointer;font-family:var(--font-serif);font-size:15px;font-weight:300;text-align:left;color:var(--black);\">\r\n <span>Harper's Bazaar \u2014 Hist\u00f2ria del Birkin<\/span>\r\n <span style=\"font-family:var(--font-mono);font-size:16px;color:var(--orange);transition:transform 0.3s;\" class=\"acord-icon\">+<\/span>\r\n <\/button>\r\n <div class=\"acord-body\" style=\"max-height:0;overflow:hidden;transition:max-height 0.4s ease;padding:0 20px;\">\r\n <p style=\"font-family:var(--font-serif);font-size:13px;font-weight:300;line-height:1.7;color:#666;padding-bottom:16px;\">Harper's Bazaar. Hist\u00f2ria i valor del bolso Herm\u00e8s Birkin.<br><a href=\"https:\/\/www.harpersbazaar.com\/es\/moda\/noticias-moda\/a43639135\/bolso-hermes-birkin-lujo-millones-historia-verdad\/\" target=\"_blank\" style=\"color:var(--orange);font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;word-break:break-all;\">harpersbazaar.com \u2192<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"acord-item\" style=\"background:white;overflow:hidden;\">\r\n <button onclick=\"toggleAccord(this)\" style=\"width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:none;border:none;cursor:pointer;font-family:var(--font-serif);font-size:15px;font-weight:300;text-align:left;color:var(--black);\">\r\n <span>Herm\u00e8s \u2014 P\u00e0gina oficial Birkin<\/span>\r\n <span style=\"font-family:var(--font-mono);font-size:16px;color:var(--orange);transition:transform 0.3s;\" class=\"acord-icon\">+<\/span>\r\n <\/button>\r\n <div class=\"acord-body\" style=\"max-height:0;overflow:hidden;transition:max-height 0.4s ease;padding:0 20px;\">\r\n <p style=\"font-family:var(--font-serif);font-size:13px;font-weight:300;line-height:1.7;color:#666;padding-bottom:16px;\">Herm\u00e8s. P\u00e0gina oficial del Birkin.<br><a href=\"https:\/\/www.hermes.com\/es\/es\/content\/106191-birkin\/\" target=\"_blank\" style=\"color:var(--orange);font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;word-break:break-all;\">hermes.com \u2192<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"acord-item\" style=\"background:white;overflow:hidden;\">\r\n <button onclick=\"toggleAccord(this)\" style=\"width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:none;border:none;cursor:pointer;font-family:var(--font-serif);font-size:15px;font-weight:300;text-align:left;color:var(--black);\">\r\n <span>Wikipedia \u2014 Jane Birkin<\/span>\r\n <span style=\"font-family:var(--font-mono);font-size:16px;color:var(--orange);transition:transform 0.3s;\" class=\"acord-icon\">+<\/span>\r\n <\/button>\r\n <div class=\"acord-body\" style=\"max-height:0;overflow:hidden;transition:max-height 0.4s ease;padding:0 20px;\">\r\n <p style=\"font-family:var(--font-serif);font-size:13px;font-weight:300;line-height:1.7;color:#666;padding-bottom:16px;\">Wikipedia. Jane Birkin.<br><a href=\"https:\/\/es.wikipedia.org\/wiki\/Jane_Birkin\" target=\"_blank\" style=\"color:var(--orange);font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;word-break:break-all;\">wikipedia.org \u2192<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"acord-item\" style=\"background:white;overflow:hidden;\">\r\n <button onclick=\"toggleAccord(this)\" style=\"width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:none;border:none;cursor:pointer;font-family:var(--font-serif);font-size:15px;font-weight:300;text-align:left;color:var(--black);\">\r\n <span>El Espa\u00f1ol \u2014 Diamond Himalaya Birkin<\/span>\r\n <span style=\"font-family:var(--font-mono);font-size:16px;color:var(--orange);transition:transform 0.3s;\" class=\"acord-icon\">+<\/span>\r\n <\/button>\r\n <div class=\"acord-body\" style=\"max-height:0;overflow:hidden;transition:max-height 0.4s ease;padding:0 20px;\">\r\n <p style=\"font-family:var(--font-serif);font-size:13px;font-weight:300;line-height:1.7;color:#666;padding-bottom:16px;\">El Espa\u00f1ol. Diamond Himalaya Birkin, un dels bolsos m\u00e9s cars del m\u00f3n.<br><a href=\"https:\/\/www.elespanol.com\/corazon\/estilo\/20210114\/diamond-himalaya-birkin-bolso-mundo-cuesta-euros\/550945601_0.html\" target=\"_blank\" style=\"color:var(--orange);font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;word-break:break-all;\">elespanol.com \u2192<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"acord-item\" style=\"background:white;overflow:hidden;\">\r\n <button onclick=\"toggleAccord(this)\" style=\"width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:none;border:none;cursor:pointer;font-family:var(--font-serif);font-size:15px;font-weight:300;text-align:left;color:var(--black);\">\r\n <span>Wikipedia \u2014 Bolso Birkin<\/span>\r\n <span style=\"font-family:var(--font-mono);font-size:16px;color:var(--orange);transition:transform 0.3s;\" class=\"acord-icon\">+<\/span>\r\n <\/button>\r\n <div class=\"acord-body\" style=\"max-height:0;overflow:hidden;transition:max-height 0.4s ease;padding:0 20px;\">\r\n <p style=\"font-family:var(--font-serif);font-size:13px;font-weight:300;line-height:1.7;color:#666;padding-bottom:16px;\">Wikipedia. Bolso Birkin.<br><a href=\"http:\/\/es.wikipedia.org\/wiki\/Bolso_Birkin\" target=\"_blank\" style=\"color:var(--orange);font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;word-break:break-all;\">wikipedia.org\/Bolso_Birkin \u2192<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal delay-2\">\r\n <div style=\"font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--orange);margin-bottom:24px;\">Fonts visuals<\/div>\r\n <h3 style=\"font-family:var(--font-serif);font-size:clamp(28px,3vw,40px);font-weight:300;letter-spacing:-0.02em;margin-bottom:32px;\">Cr\u00e8dits d'imatge<\/h3>\r\n <div style=\"display:flex;flex-direction:column;gap:2px;\">\r\n\r\n <a href=\"https:\/\/drive.google.com\/file\/d\/1nrTX0PxqC1zLUmGhz6vLIPQB2NLqzU-J\/view?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"acord-item\" style=\"background:white;overflow:hidden;text-decoration:none;width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-family:var(--font-serif);font-size:15px;font-weight:300;text-align:left;color:var(--black);cursor:pointer;\">\r\n <span>Imatges del bolso Birkin<\/span>\r\n <span style=\"width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M4 10L10 4\" stroke=\"var(--orange)\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/><path d=\"M5 4H10V9\" stroke=\"var(--orange)\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n <\/a>\r\n\r\n <a href=\"https:\/\/drive.google.com\/file\/d\/14e-TFGGnmCp_D77B5IdH7fRMqnmglKh1\/view?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"acord-item\" style=\"background:white;overflow:hidden;text-decoration:none;width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-family:var(--font-serif);font-size:15px;font-weight:300;text-align:left;color:var(--black);cursor:pointer;\">\r\n <span>Fotografies de Jane Birkin<\/span>\r\n <span style=\"width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M4 10L10 4\" stroke=\"var(--orange)\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/><path d=\"M5 4H10V9\" stroke=\"var(--orange)\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n <\/a>\r\n\r\n <a href=\"https:\/\/drive.google.com\/file\/d\/1Tarhr5Pc-FiL-QdWWPC7vd9IXnMk9Dgb\/view?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"acord-item\" style=\"background:white;overflow:hidden;text-decoration:none;width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-family:var(--font-serif);font-size:15px;font-weight:300;text-align:left;color:var(--black);cursor:pointer;\">\r\n <span>Imatges d'artesania i taller<\/span>\r\n <span style=\"width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M4 10L10 4\" stroke=\"var(--orange)\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/><path d=\"M5 4H10V9\" stroke=\"var(--orange)\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n <\/a>\r\n\r\n <a href=\"https:\/\/drive.google.com\/file\/d\/1l9uqS1_H6Q-hpRloH0OP1Dgc1i7EXM5O\/view?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"acord-item\" style=\"background:white;overflow:hidden;text-decoration:none;width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-family:var(--font-serif);font-size:15px;font-weight:300;text-align:left;color:var(--black);cursor:pointer;\">\r\n <span>Imatges de Par\u00eds i monuments<\/span>\r\n <span style=\"width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M4 10L10 4\" stroke=\"var(--orange)\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/><path d=\"M5 4H10V9\" stroke=\"var(--orange)\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<footer>\r\n <div class=\"footer-brand reveal\">\r\n <div class=\"f-name\">Jana Moreno<\/div>\r\n <div class=\"f-title\">Producte Gr\u00e0fic Interactiu \u00b7 Rub\u00ed<\/div>\r\n <\/div>\r\n <div class=\"footer-center reveal delay-2\">\r\n <div class=\"f-dot\"><\/div>\r\n <div class=\"f-birkin\">Birkin Fanzine \u00b7 2026<\/div>\r\n <\/div>\r\n <div class=\"footer-right reveal delay-3\">\r\n <a href=\"mailto:janamoreno20084@gmail.com\">janamoreno20084@gmail.com<\/a>\r\n <\/div>\r\n <div class=\"footer-copy\">\r\n <span>\u00a9 2026 Jana Moreno. Tots els drets reservats.<\/span>\r\n <span>Birkin \u00b7 Fanzine A4 \u00b7 29 p\u00e1ginas<\/span>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n \/\/ \u2500\u2500 NAV SCROLL EFFECT \u2500\u2500\r\n const nav = document.querySelector('nav');\r\n window.addEventListener('scroll', () => {\r\n nav.classList.toggle('scrolled', window.scrollY > 80);\r\n }, { passive: true });\r\n\r\n \/\/ \u2500\u2500 CURSOR PERSONALIZADO \u2500\u2500\r\n const cursor = document.getElementById('cursor');\r\n document.addEventListener('mousemove', e => {\r\n cursor.style.left = e.clientX + 'px';\r\n cursor.style.top = e.clientY + 'px';\r\n });\r\n document.querySelectorAll('a, button, .gallery-item, .carousel-slide').forEach(el => {\r\n el.addEventListener('mouseenter', () => cursor.classList.add('hovering'));\r\n el.addEventListener('mouseleave', () => cursor.classList.remove('hovering'));\r\n });\r\n\r\n \/\/ \u2500\u2500 SCROLL REVEAL \u2500\u2500\r\n const revealObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) entry.target.classList.add('visible');\r\n });\r\n }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });\r\n\r\n document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale').forEach(el => {\r\n revealObserver.observe(el);\r\n });\r\n\r\n \/\/ \u2500\u2500 CARRUSEL PRINCIPAL \u2500\u2500\r\n const captions = [\r\n { text: \"Portada\", sub: \"Coberta del fanzine\" },\r\n { text: \"Birkin Faubourg\", sub: \"L'origen d'una llegenda\" },\r\n { text: \"Rue du Faubourg\", sub: \"El carrer del luxe\" },\r\n { text: \"Herm\u00e8s Paris\", sub: \"Tradici\u00f3 i modernitat des de 1837\" },\r\n { text: \"Herm\u00e8s\", sub: \"L'artesania com a filosofia\" },\r\n { text: \"LUXE\", sub: \"Una paraula, un material, una identitat\" },\r\n { text: \"L'artesania\", sub: \"Cada pe\u00e7a, feta a m\u00e0\" },\r\n { text: \"Par\u00eds\", sub: \"La ciutat on tot comen\u00e7a\" },\r\n { text: \"Londres\", sub: \"Jane Birkin, d'aqu\u00ed al m\u00f3n\" },\r\n { text: \"Jane Birkin\", sub: \"Actriu, cantant, icona brit\u00e0nica\" },\r\n { text: \"El rostre\", sub: \"Una imatge lliure i espont\u00e0nia\" },\r\n { text: \"La cita\", sub: \"\\\"Sempre decoro les meves bosses\\\"\" },\r\n { text: \"La llegenda\", sub: \"Una cistella caiguda dins d'un avi\u00f3\" },\r\n { text: \"Tanca girat\u00f2ria\", sub: \"Anatomia del Birkin\" },\r\n { text: \"Candau, Clochette i Placa\", sub: \"Cada detall, una funci\u00f3\" },\r\n { text: \"Birkin Bag\", sub: \"Nascut el 1984, inmortal per sempre\" },\r\n { text: \"\\\"La mode rapide d\u00e9truit le savoir-faire\\\"\", sub: \"Una cr\u00edtica al luxe ef\u00edmer\" },\r\n { text: \"\\\"La mode rapide d\u00e9truit le savoir-faire\\\"\", sub: \"Pierre-Alexis Dumas, Herm\u00e8s\" },\r\n { text: \"El Birkin en moviment\", sub: \"Poder, riquesa i aspiraci\u00f3\" },\r\n { text: \"La col\u00b7lecci\u00f3\", sub: \"Totes les formes, tots els colors\" },\r\n { text: \"La col\u00b7lecci\u00f3 II\", sub: \"Cada Birkin, una hist\u00f2ria diferent\" },\r\n { text: \"El cuir\", sub: \"La mat\u00e8ria primera del luxe\" },\r\n { text: \"Materials\", sub: \"Alligator, Veau Togo, Ostrich...\" },\r\n { text: \"Birkin Original\", sub: \"Pell natural, costures artesanals\" },\r\n { text: \"Jane amb el seu Birkin\", sub: \"Decorat amb penjolls, com ella volia\" },\r\n { text: \"Birkin Himalaya\", sub: \"El Birkin m\u00e9s exclusiu del m\u00f3n\" },\r\n { text: \"Contraportada\", sub: \"Jana Moreno \u00b7 Rub\u00ed \u00b7 2026\" },\r\n { text: \"Birkin Himalaya\", sub: \"Cocodril Niloticus, or blanc i diamants\" },\r\n ];\r\n\r\n const track = document.getElementById('carouselTrack');\r\n const slides = track.querySelectorAll('.carousel-slide');\r\n const dotsContainer = document.getElementById('carouselDots');\r\n const captionEl = document.getElementById('carouselCaption');\r\n const subEl = document.getElementById('carouselSub');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n\r\n let current = 0;\r\n\r\n function updateCarousel(animated = true) {\r\n const slideWidth = slides[0].offsetWidth;\r\n const containerLeft = 60;\r\n const pos = -current * slideWidth + containerLeft;\r\n track.style.transition = animated ? 'transform 0.7s cubic-bezier(0.77, 0, 0.175, 1)' : 'none';\r\n track.style.transform = `translateX(${pos}px)`;\r\n\r\n slides.forEach((slide, i) => {\r\n slide.style.opacity = i === current ? '1' : '0.4';\r\n slide.style.transition = 'opacity 0.5s ease';\r\n });\r\n\r\n captionEl.classList.remove('visible');\r\n subEl.classList.remove('visible');\r\n setTimeout(() => {\r\n const c = captions[current] || { text: '', sub: '' };\r\n captionEl.textContent = c.text;\r\n subEl.textContent = c.sub;\r\n captionEl.classList.add('visible');\r\n subEl.classList.add('visible');\r\n }, 180);\r\n\r\n dotsContainer.querySelectorAll('.carousel-dot').forEach((dot, i) => {\r\n dot.classList.toggle('active', i === current);\r\n });\r\n }\r\n\r\n slides.forEach((_, i) => {\r\n const dot = document.createElement('button');\r\n dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');\r\n dot.setAttribute('aria-label', 'Ir a imagen ' + (i + 1));\r\n dot.addEventListener('click', () => { current = i; updateCarousel(); });\r\n dotsContainer.appendChild(dot);\r\n });\r\n\r\n prevBtn.addEventListener('click', () => { current = Math.max(0, current - 1); updateCarousel(); });\r\n nextBtn.addEventListener('click', () => { current = Math.min(slides.length - 1, current + 1); updateCarousel(); });\r\n\r\n let touchStart = 0;\r\n track.addEventListener('touchstart', e => { touchStart = e.touches[0].clientX; }, { passive: true });\r\n track.addEventListener('touchend', e => {\r\n const diff = touchStart - e.changedTouches[0].clientX;\r\n if (Math.abs(diff) > 40) { if (diff > 0) nextBtn.click(); else prevBtn.click(); }\r\n }, { passive: true });\r\n\r\n setTimeout(() => updateCarousel(false), 100);\r\n window.addEventListener('resize', () => updateCarousel(false));\r\n\r\n let autoplayTimer = setInterval(() => {\r\n current = current < slides.length - 1 ? current + 1 : 0;\r\n updateCarousel();\r\n }, 4000);\r\n\r\n [prevBtn, nextBtn].forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n clearInterval(autoplayTimer);\r\n autoplayTimer = setInterval(() => {\r\n current = current < slides.length - 1 ? current + 1 : 0;\r\n updateCarousel();\r\n }, 4000);\r\n });\r\n });\r\n\r\n \/\/ \u2500\u2500 CARRUSEL REFERENTS \u2500\u2500\r\n const refTrack = document.getElementById('refCarouselTrack');\r\n const refSlides = refTrack.querySelectorAll('.ref-carousel-slide');\r\n const refDotsContainer = document.getElementById('refCarouselDots');\r\n const refCounter = document.getElementById('refCounter');\r\n let refCurrent = 0;\r\n const REF_TOTAL = refSlides.length;\r\n\r\n function updateRefCarousel(animated = true) {\r\n refTrack.style.transition = animated ? 'transform 0.7s cubic-bezier(0.77, 0, 0.175, 1)' : 'none';\r\n refTrack.style.transform = `translateX(-${refCurrent * 100}%)`;\r\n if (refCounter) refCounter.textContent = (refCurrent + 1) + ' \/ ' + REF_TOTAL;\r\n refDotsContainer.querySelectorAll('.ref-carousel-dot').forEach((dot, i) => {\r\n dot.classList.toggle('active', i === refCurrent);\r\n });\r\n }\r\n\r\n refSlides.forEach((_, i) => {\r\n const dot = document.createElement('button');\r\n dot.className = 'ref-carousel-dot' + (i === 0 ? ' active' : '');\r\n dot.setAttribute('aria-label', 'Referent ' + (i + 1));\r\n dot.addEventListener('click', () => { refCurrent = i; updateRefCarousel(); });\r\n refDotsContainer.appendChild(dot);\r\n });\r\n\r\n let refTouchStart = 0;\r\n refTrack.addEventListener('touchstart', e => { refTouchStart = e.touches[0].clientX; }, { passive: true });\r\n refTrack.addEventListener('touchend', e => {\r\n const diff = refTouchStart - e.changedTouches[0].clientX;\r\n if (Math.abs(diff) > 40) {\r\n if (diff > 0) { refCurrent = Math.min(REF_TOTAL - 1, refCurrent + 1); }\r\n else { refCurrent = Math.max(0, refCurrent - 1); }\r\n updateRefCarousel();\r\n }\r\n }, { passive: true });\r\n\r\n setInterval(() => {\r\n refCurrent = refCurrent < REF_TOTAL - 1 ? refCurrent + 1 : 0;\r\n updateRefCarousel();\r\n }, 4000);\r\n\r\n setTimeout(() => updateRefCarousel(false), 100);\r\n\r\n \/\/ \u2500\u2500 SMOOTH SCROLL NAV \u2500\u2500\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\r\n a.addEventListener('click', e => {\r\n const target = document.querySelector(a.getAttribute('href'));\r\n if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth' }); }\r\n });\r\n });\r\n\r\n \/\/ \u2500\u2500 ACORDI\u00d3 \u2500\u2500\r\n function toggleAccord(btn) {\r\n const body = btn.nextElementSibling;\r\n const icon = btn.querySelector('.acord-icon');\r\n const isOpen = body.style.maxHeight && body.style.maxHeight !== '0px';\r\n document.querySelectorAll('.acord-body').forEach(b => b.style.maxHeight = '0');\r\n document.querySelectorAll('.acord-icon').forEach(i => { i.textContent = '+'; i.style.transform = 'rotate(0deg)'; });\r\n if (!isOpen) {\r\n body.style.maxHeight = body.scrollHeight + 'px';\r\n icon.textContent = '\u00d7';\r\n }\r\n }\r\n\r\n \/\/ \u2500\u2500 WIREFRAME CLIC \u2500\u2500\r\n document.querySelectorAll('.wireframe-img-wrap').forEach(wrap => {\r\n wrap.style.cursor = 'pointer';\r\n wrap.addEventListener('click', () => wrap.classList.toggle('clicked'));\r\n });\r\n\r\n \/\/ \u2500\u2500 PROC\u00c9S CLIC \u2500\u2500\r\n function toggleProcessImg(container) {\r\n const before = container.querySelector('.proc-before');\r\n const after = container.querySelector('.proc-after');\r\n if (!before || !after) return;\r\n const isShowing = after.style.opacity === '1';\r\n before.style.opacity = isShowing ? '1' : '0';\r\n after.style.opacity = isShowing ? '0' : '1';\r\n }\r\n\r\n \/\/ \u2500\u2500 GUI\u00d3 V\u00cdDEO TOGGLE \u2500\u2500\r\n function toggleGuioVideo(id) {\r\n const el = document.getElementById(id);\r\n if (!el) return;\r\n const isOpen = el.style.maxHeight && el.style.maxHeight !== '0px';\r\n el.style.maxHeight = isOpen ? '0' : '500px';\r\n const btnId = 'btn-' + id.replace('video-','');\r\n const btnEl = document.getElementById(btnId);\r\n if (btnEl) btnEl.textContent = isOpen ? '\u25b6 Veure v\u00eddeo' : '\u25bc Tancar v\u00eddeo';\r\n }\r\n<\/script>\r\n\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>Birkin \u2014 Jana Moreno Jana Moreno Sobre V\u00eddeo P\u00e0gines Fanzine Editorial \u00b7 2026 Birkin LaHist\u00f2ria El Birkin d’Herm\u00e8s neix l’any 1984, durant un vol entre Par\u00eds i Londres, quan Jane Birkin comenta a Jean-Louis Dumas que no troba cap bossa que sigui pr\u00e0ctica i bonica alhora. A partir d’aquesta conversa, es crea una bossa pensada […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/25042.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/25042.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/25042.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/25042.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/25042.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":266,"href":"https:\/\/25042.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/25042.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/355"}],"wp:attachment":[{"href":"https:\/\/25042.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}