{"id":181,"date":"2026-05-12T12:18:19","date_gmt":"2026-05-12T10:18:19","guid":{"rendered":"https:\/\/25022.ooteca.artedra.net\/?page_id=181"},"modified":"2026-05-21T09:22:40","modified_gmt":"2026-05-21T07:22:40","slug":"elementor-181","status":"publish","type":"page","link":"https:\/\/25022.ooteca.artedra.net\/","title":{"rendered":"Elementor #181"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"181\" class=\"elementor elementor-181\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb0e472 e-flex e-con-boxed e-con e-parent\" data-id=\"fb0e472\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b0783ae elementor-widget elementor-widget-html\" data-id=\"b0783ae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Fuentes de Alta Gama -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@400;700;900&family=Inter:wght@300;400;600&display=swap\">\r\n\r\n<style>\r\n:root {\r\n    --electric-blue: #0047FF;\r\n    --deep-dark: #000000;\r\n    --font-header: 'League Spartan', sans-serif;\r\n    --font-body: 'Inter', sans-serif;\r\n}\r\n\r\n.hero-custom {\r\n    width: 100vw;\r\n    position: relative;\r\n    left: 50%;\r\n    margin-left: -50vw;\r\n    height: 100vh;\r\n    background: #ffffff;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* Collage de Impacto Visual *\/\r\n.collage-container {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 1;\r\n}\r\n\r\n.collage-item {\r\n    position: absolute;\r\n    width: 280px; \/* Tama\u00f1o m\u00e1s imponente *\/\r\n    height: auto;\r\n    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.12));\r\n    pointer-events: none;\r\n    will-change: transform;\r\n}\r\n\r\n\/* Animaciones de Flotaci\u00f3n \"Luxury\" (m\u00e1s lentas y fluidas) *\/\r\n@keyframes luxuryFloat {\r\n    0%, 100% { transform: translateY(0) rotate(var(--rot)); }\r\n    50% { transform: translateY(-30px) rotate(calc(var(--rot) + 2deg)); }\r\n}\r\n\r\n.img-1 { top: 5%; left: 3%; --rot: -10deg; animation: luxuryFloat 12s infinite ease-in-out; }\r\n.img-2 { top: 60%; left: -2%; --rot: 15deg; animation: luxuryFloat 15s infinite ease-in-out; width: 320px; }\r\n.img-3 { top: 8%; right: 2%; --rot: 8deg; animation: luxuryFloat 14s infinite ease-in-out; }\r\n.img-4 { top: 5%; right: 0%; --rot: -12deg; animation: luxuryFloat 16s infinite ease-in-out; width: 300px; }\r\n.img-5 { bottom: -5%; left: 35%; --rot: 2deg; animation: luxuryFloat 18s infinite ease-in-out; width: 250px; opacity: 0.8; }\r\n\r\n\/* Marketing Copy & Typography *\/\r\n.marketing-content {\r\n    position: relative;\r\n    z-index: 10;\r\n    text-align: center;\r\n    max-width: 900px;\r\n    padding: 0 5%;\r\n}\r\n\r\n.eyebrow {\r\n    font-family: var(--font-header);\r\n    text-transform: uppercase;\r\n    letter-spacing: 5px;\r\n    font-weight: 700;\r\n    font-size: 0.9rem;\r\n    color: var(--electric-blue);\r\n    margin-bottom: 20px;\r\n    display: block;\r\n    animation: fadeInUp 1s ease forwards;\r\n}\r\n\r\n.main-title {\r\n    font-family: var(--font-header);\r\n    font-size: clamp(4rem, 8vw, 7.5rem); \/* Responsive e impactante *\/\r\n    font-weight: 900;\r\n    color: var(--deep-dark);\r\n    line-height: 0.8;\r\n    margin-bottom: 30px;\r\n    margin-top: -70px;\r\n    letter-spacing: -5px;\r\n    animation: fadeInUp 1.2s ease forwards;\r\n}\r\n\r\n.highlight-blue {\r\n    color: var(--electric-blue);\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.description-text {\r\n    font-family: var(--font-body);\r\n    font-size: 1.2rem;\r\n    line-height: 1.6;\r\n    color: #333;\r\n    max-width: 550px;\r\n    margin: 0 auto;\r\n    font-weight: 400;\r\n    letter-spacing: -0.2px;\r\n    opacity: 0.8;\r\n    animation: fadeInUp 1.4s ease forwards;\r\n}\r\n\r\n@keyframes fadeInUp {\r\n    from { opacity: 0; transform: translateY(30px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* Efecto de m\u00e1scara para el scroll *\/\r\n.hero-custom::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 15vh;\r\n    background: linear-gradient(to top, #ffffff, transparent);\r\n    z-index: 15;\r\n}\r\n<\/style>\r\n\r\n<section class=\"hero-custom\">\r\n    <!-- Colecci\u00f3n de Objetos -->\r\n    <div class=\"collage-container\">\r\n        <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/tex-4.png\" class=\"collage-item img-1\">\r\n        <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/forma-anadida-2.png\" class=\"collage-item img-2\">\r\n        <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/figura-8.png\" class=\"collage-item img-3\">\r\n        <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/tex-2.png\" class=\"collage-item img-4\">\r\n        <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/color-5.png\" class=\"collage-item img-5\">\r\n    <\/div>\r\n\r\n    <div class=\"marketing-content\">\r\n        <span class=\"eyebrow\"><\/span>\r\n        <h1 class=\"main-title\">\r\n            El teu m\u00f3n, <br>\r\n            <span class=\"highlight-blue\">a la teva\r\n            manera.<\/span>\r\n        <\/h1>\r\n        <p class=\"description-text\">\r\n            No personalitzem objectes, creem extensions de la teva identitat. On la t\u00e8cnica de precisi\u00f3 es troba amb l'art absolut.\r\n        <\/p>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/\/ Parallax Din\u00e1mico: Los objetos reaccionan al movimiento del rat\u00f3n y al scroll\r\ndocument.addEventListener('mousemove', (e) => {\r\n    const { clientX, clientY } = e;\r\n    const centerX = window.innerWidth \/ 2;\r\n    const centerY = window.innerHeight \/ 2;\r\n    \r\n    document.querySelectorAll('.collage-item').forEach((item, index) => {\r\n        const factor = (index + 1) * 0.02;\r\n        const moveX = (clientX - centerX) * factor;\r\n        const moveY = (clientY - centerY) * factor;\r\n        item.style.transform = `translate(${moveX}px, ${moveY}px) rotate(var(--rot))`;\r\n    });\r\n});\r\n\r\nwindow.addEventListener('scroll', function() {\r\n    const scroll = window.scrollY;\r\n    const hero = document.querySelector('.hero-custom');\r\n    \r\n    \/\/ El t\u00edtulo se hunde sutilmente mientras desaparece\r\n    document.querySelector('.marketing-content').style.transform = `translateY(${scroll * 0.4}px)`;\r\n    hero.style.opacity = Math.max(1 - scroll \/ 900, 0);\r\n    \r\n}, { passive: true });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f6f663f e-flex e-con-boxed e-con e-parent\" data-id=\"f6f663f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0ab1196 elementor-widget elementor-widget-html\" data-id=\"0ab1196\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@900&family=Inter:wght@300;400&display=swap\">\r\n\r\n<style>\r\n\/* Reset local para evitar conflictos *\/\r\n.ref-section *, .ref-section *::before, .ref-section *::after {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n:root {\r\n    --accent-color: #0047FF; \/* Tu azul corporativo *\/\r\n    --font-header: 'League Spartan', sans-serif;\r\n    --font-body: 'Inter', sans-serif;\r\n}\r\n\r\n.ref-section {\r\n    padding: 100px 5%; \/* Reducido el padding lateral para ganar espacio *\/\r\n    background: #ffffff;\r\n    display: flex;\r\n    justify-content: center;\r\n    font-family: var(--font-body);\r\n    width: 100%;\r\n}\r\n\r\n.ref-container {\r\n    position: relative;\r\n    max-width: 100%; \/* Ahora puede ocupar todo el ancho disponible *\/\r\n    width: 100%;\r\n    display: grid;\r\n    grid-template-columns: 60px 1fr; \/* Espacio fijo para la l\u00ednea, el resto para texto *\/\r\n    gap: 20px;\r\n}\r\n\r\n\/* El Punto y la L\u00ednea Progresiva *\/\r\n.ref-indicator {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n\r\n.ref-dot {\r\n    width: 12px;\r\n    height: 12px;\r\n    background: #000;\r\n    border-radius: 50%;\r\n    z-index: 2;\r\n    margin-top: 15px;\r\n}\r\n\r\n.ref-line-path {\r\n    width: 2px;\r\n    height: 0; \r\n    background: var(--accent-color);\r\n    transition: height 1.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n    margin-top: 10px;\r\n}\r\n\r\n\/* Bloque de Texto *\/\r\n.ref-content {\r\n    width: 100%; \/* Asegura que el contenido use todo el espacio *\/\r\n}\r\n\r\n.ref-id {\r\n    font-family: var(--font-header);\r\n    font-size: 0.9rem;\r\n    font-weight: 700;\r\n    letter-spacing: 4px;\r\n    color: #aaa;\r\n    display: block;\r\n    margin-bottom: 5px;\r\n}\r\n\r\n.ref-title {\r\n    font-family: var(--font-header);\r\n    font-size: clamp(2rem, 22vw, 6.5rem); \/* T\u00edtulo m\u00e1s flexible y grande *\/\r\n    font-weight: 800;\r\n    color: #000;\r\n    line-height: 0.85;\r\n    margin-bottom: 50px;\r\n    text-transform: uppercase;\r\n    letter-spacing: -3px;\r\n    width: 100%;\r\n}\r\n\r\n.ref-description {\r\n    font-size: 1.3rem; \/* Un poco m\u00e1s grande para elegancia *\/\r\n    line-height: 1.6;\r\n    color: #333;\r\n    font-weight: 300;\r\n    border-top: 1px solid #eee; \r\n    padding-top: 40px;\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 1.2s ease 0.4s;\r\n    \r\n    \/* ELIMINADO EL MAX-WIDTH PARA QUE LLEGUE AL FINAL *\/\r\n    width: 100%; \r\n    max-width: none; \r\n    text-align: justify; \/* Opcional: hace que el bloque se vea muy limpio en los bordes *\/\r\n}\r\n\r\n\/* Estado Activo al hacer Scroll *\/\r\n.ref-section.is-visible .ref-line-path {\r\n    height: 180px; \/* L\u00ednea m\u00e1s larga *\/\r\n}\r\n\r\n.ref-section.is-visible .ref-description {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* Ajuste para pantallas peque\u00f1as *\/\r\n@media (max-width: 768px) {\r\n    .ref-container {\r\n        grid-template-columns: 40px 1fr;\r\n    }\r\n    .ref-title {\r\n        letter-spacing: -1px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"ref-section\" id=\"refSection\">\r\n    <div class=\"ref-container\">\r\n        <div class=\"ref-indicator\">\r\n            <div class=\"ref-dot\"><\/div>\r\n            <div class=\"ref-line-path\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ref-content\">\r\n            <span class=\"ref-id\"><\/span>\r\n            <h2 class=\"ref-title\">Referents<\/h2>\r\n            <p class=\"ref-description\">\r\n                Aquests referents demostren que l\u2019objecte pot ser una eina de comunicaci\u00f3 identi\r\nt\u00e0ria. AutoCustom recull aquesta her\u00e8ncia per crear un sistema on l\u2019usuari deixa de \r\nser un consumidor de s\u00e8ries iguals.\r\n            <\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\nconst observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n            entry.target.classList.add('is-visible');\r\n        }\r\n    });\r\n}, { threshold: 0.2 }); \/\/ Se activa antes para que la animaci\u00f3n fluya mejor\r\n\r\nobserver.observe(document.getElementById('refSection'));\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a4dc066 e-flex e-con-boxed e-con e-parent\" data-id=\"a4dc066\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd8495a elementor-widget elementor-widget-html\" data-id=\"cd8495a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Importaci\u00f3n de Tipograf\u00eda -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  .seccion-referentes-pro {\r\n    --azul-corporativo: #0047FF;\r\n    --velocidad: 30s;\r\n    \r\n    \/* Forzamos que rompa los m\u00e1rgenes del contenedor de WordPress si es necesario *\/\r\n    width: 100vw;\r\n    position: relative;\r\n    left: 50%;\r\n    right: 50%;\r\n    margin-left: -50vw;\r\n    margin-right: -50vw;\r\n    \r\n    overflow: hidden;\r\n    padding: 80px 0;\r\n    background-color: transparent;\r\n    font-family: 'League Spartan', sans-serif;\r\n  }\r\n\r\n  .referentes-track {\r\n    display: flex;\r\n    \/* Ajustamos el ancho din\u00e1micamente seg\u00fan el n\u00famero de tarjetas *\/\r\n    width: max-content; \r\n    animation: scroll-referentes var(--velocidad) linear infinite;\r\n    animation-play-state: paused; \r\n  }\r\n\r\n  .seccion-referentes-pro.in-view .referentes-track {\r\n    animation-play-state: running;\r\n  }\r\n\r\n  .referente-card-premium {\r\n    width: 450px; \/* Un poco m\u00e1s anchas para mayor elegancia *\/\r\n    margin: 0 30px;\r\n    flex-shrink: 0;\r\n    background: #ffffff;\r\n    border-radius: 24px;\r\n    overflow: hidden;\r\n    box-shadow: 0 20px 40px rgba(0,0,0,0.08);\r\n    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\r\n    border-bottom: 6px solid var(--azul-corporativo);\r\n\r\n    \/* Estado inicial para la animaci\u00f3n de scroll *\/\r\n    opacity: 0;\r\n    transform: translateY(60px) scale(0.8);\r\n  }\r\n\r\n  \/* Clase que se activa y desactiva al hacer scroll *\/\r\n  .referente-card-premium.animate-in {\r\n    opacity: 1;\r\n    transform: translateY(0) scale(1);\r\n  }\r\n\r\n  .referente-card-premium:hover {\r\n    transform: translateY(-20px) !important;\r\n    box-shadow: 0 30px 60px rgba(0,63,255,0.15);\r\n  }\r\n\r\n  .referente-imagen {\r\n    width: 100%;\r\n    height: 280px;\r\n    background-color: #f8f8f8;\r\n  }\r\n\r\n  .referente-imagen img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n  }\r\n\r\n  .referente-info {\r\n    padding: 30px;\r\n  }\r\n\r\n  \/* --- CAMBIO DE TAMA\u00d1O DE LETRA AQU\u00cd --- *\/\r\n  .referente-info h3 {\r\n    font-size: 2rem; \/* Tama\u00f1o del t\u00edtulo de la tarjeta *\/\r\n    margin-bottom: 12px;\r\n    color: var(--azul-corporativo);\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .referente-info p {\r\n    font-size: 1.15rem; \/* Tama\u00f1o del texto descriptivo *\/\r\n    color: #444;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  @keyframes scroll-referentes {\r\n    0% { transform: translateX(0); }\r\n    100% { transform: translateX(-50%); } \/* El 50% es exacto para el bucle *\/\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .referente-card-premium { width: 320px; margin: 0 15px; }\r\n    .seccion-referentes-pro { padding: 40px 0; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"seccion-referentes-pro\" id=\"seccionReferentes\">\r\n  <div class=\"referentes-track\">\r\n    \r\n    <!-- Bloque Original (4 tarjetas) -->\r\n    <div class=\"referente-card-premium\">\r\n      <div class=\"referente-imagen\"><img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/the-panton-chair-verner-panton-1959.jpg\" alt=\"1\"><\/div>\r\n      <div class=\"referente-info\"><h3>Panton Chair<\/h3><p> Una sola pe\u00e7a de \r\npl\u00e0stic ondulat. \u00c9s com una curba congelada on t\u2019hi pots seure, sense potes.<\/p><\/div>\r\n    <\/div>\r\n    <div class=\"referente-card-premium\">\r\n      <div class=\"referente-imagen\"><img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/random__black_set_3x_d13677d7-b6f1-4ca0-b354-794417cb205c.webp\" alt=\"2\"><\/div>\r\n      <div class=\"referente-info\"><h3>Random Light<\/h3><p>Representa el caos controlat. Una bola de fil gegant i \r\nlleugera. El desordre dels seus fils crea una llum suau i natural.<\/p><\/div>\r\n    <\/div>\r\n    <div class=\"referente-card-premium\">\r\n      <div class=\"referente-imagen\"><img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/2015_NYR_11035_0002_000a_pair_of_python_armadillo_boots_alexander_mcqueen_2015100611-scaled.jpg\" alt=\"3\"><\/div>\r\n      <div class=\"referente-info\"><h3>Armadillo Boots<\/h3><p> Sabates que semblen ghepes o closques. No busquen la comoditat, \r\nsin\u00f3 convertir el peu en una pe\u00e7a d\u2019art.<\/p><\/div>\r\n    <\/div>\r\n    <div class=\"referente-card-premium\">\r\n      <div class=\"referente-imagen\"><img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Best-Ergonomic-Keyboards-for-Carpal-Tunnel-featured.jpg\" alt=\"4\"><\/div>\r\n      <div class=\"referente-info\"><h3>Ergonomic Keyboard<\/h3><p> Un \r\nteclat \u201ctrencat\u201d a prop\u00f2sit. Es divideix i s\u2019inclina perqu\u00e8 les mans descansin en la seva \r\nposici\u00f3 m\u00e9s natural.<\/p><\/div>\r\n    <\/div>\r\n\r\n    <!-- Duplicado para Bucle Infinito -->\r\n    <div class=\"referente-card-premium\">\r\n      <div class=\"referente-imagen\"><img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/the-panton-chair-verner-panton-1959.jpg\" alt=\"1\"><\/div>\r\n      <div class=\"referente-info\"><h3>Panton Chair<\/h3><p>Una sola pe\u00e7a de \r\npl\u00e0stic ondulat. \u00c9s com una curba congelada on t\u2019hi pots seure, sense potes.<\/p><\/div>\r\n    <\/div>\r\n    <div class=\"referente-card-premium\">\r\n      <div class=\"referente-imagen\"><img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/random__black_set_3x_d13677d7-b6f1-4ca0-b354-794417cb205c.webp\" alt=\"2\"><\/div>\r\n      <div class=\"referente-info\"><h3>Random Light<\/h3><p>Representa el caos controlat. Una bola de fil gegant i \r\nlleugera. El desordre dels seus fils crea una llum suau i natural.<\/p><\/div>\r\n    <\/div>\r\n    <div class=\"referente-card-premium\">\r\n      <div class=\"referente-imagen\"><img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/2015_NYR_11035_0002_000a_pair_of_python_armadillo_boots_alexander_mcqueen_2015100611-scaled.jpg\" alt=\"3\"><\/div>\r\n      <div class=\"referente-info\"><h3>Armadillo Boots<\/h3><p> Sabates que semblen ghepes o closques. No busquen la comoditat, \r\nsin\u00f3 convertir el peu en una pe\u00e7a d\u2019art.<\/p><\/div>\r\n    <\/div>\r\n    <div class=\"referente-card-premium\">\r\n      <div class=\"referente-imagen\"><img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Best-Ergonomic-Keyboards-for-Carpal-Tunnel-featured.jpg\" alt=\"4\"><\/div>\r\n      <div class=\"referente-info\"><h3>Ergonomic Keyboard<\/h3><p> Un \r\nteclat \u201ctrencat\u201d a prop\u00f2sit. Es divideix i s\u2019inclina perqu\u00e8 les mans descansin en la seva \r\nposici\u00f3 m\u00e9s natural.<\/p><\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", function() {\r\n    const seccion = document.getElementById('seccionReferentes');\r\n    const cards = seccion.querySelectorAll('.referente-card-premium');\r\n\r\n    const observerOptions = {\r\n      threshold: 0.1\r\n    };\r\n\r\n    const observer = new IntersectionObserver(function(entries) {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          \/\/ Entra en pantalla\r\n          seccion.classList.add('in-view');\r\n          cards.forEach((card, index) => {\r\n            setTimeout(() => {\r\n              card.classList.add('animate-in');\r\n            }, index * 100);\r\n          });\r\n        } else {\r\n          \/\/ Sale de pantalla: quitamos las clases para que la animaci\u00f3n se repita al volver\r\n          seccion.classList.remove('in-view');\r\n          cards.forEach((card) => {\r\n            card.classList.remove('animate-in');\r\n          });\r\n        }\r\n      });\r\n    }, observerOptions);\r\n\r\n    observer.observe(seccion);\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-09be945 e-flex e-con-boxed e-con e-parent\" data-id=\"09be945\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb2775e elementor-widget elementor-widget-html\" data-id=\"bb2775e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Fuente League Spartan e Inter -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@900&family=Inter:wght@300;400&display=swap\">\r\n\r\n<style>\r\n.ref-section {\r\n    padding: 100px 5%;\r\n    background: #ffffff;\r\n    display: flex;\r\n    justify-content: center;\r\n    font-family: 'Inter', sans-serif;\r\n    width: 100%;\r\n    overflow: hidden;\r\n}\r\n\r\n.ref-container {\r\n    display: grid;\r\n    grid-template-columns: 60px 1fr;\r\n    gap: 20px;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n}\r\n\r\n.ref-indicator {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n\r\n\/* DOT: Animaci\u00f3n de escala inicial *\/\r\n.ref-dot {\r\n    width: 12px;\r\n    height: 12px;\r\n    background: #000;\r\n    border-radius: 50%;\r\n    margin-top: 15px;\r\n    transform: scale(0);\r\n    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n}\r\n\r\n.ref-section.is-visible .ref-dot {\r\n    transform: scale(1);\r\n}\r\n\r\n\/* LA L\u00cdNEA: Ahora con un gradiente y sombra de ne\u00f3n *\/\r\n.ref-line-path {\r\n    width: 3px; \/* Un poco m\u00e1s gruesa *\/\r\n    height: 0; \r\n    background: linear-gradient(to bottom, #0047FF, #00D1FF);\r\n    box-shadow: 0 0 15px rgba(0, 71, 255, 0.3);\r\n    transition: height 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;\r\n    margin-top: 10px;\r\n    display: block !important; \r\n}\r\n\r\n.ref-section.is-visible .ref-line-path {\r\n    height: 350px; \/* M\u00e1s larga para que destaque *\/\r\n}\r\n\r\n\/* T\u00cdTULO: Aparece con un ligero zoom y desenfoque *\/\r\n.ref-title {\r\n    font-family: 'League Spartan', sans-serif;\r\n    font-size: clamp(2.5rem, 10vw, 6.5rem); \r\n    font-weight: 900;\r\n    color: #000;\r\n    line-height: 0.85;\r\n    margin-bottom: 50px;\r\n    text-transform: uppercase;\r\n    letter-spacing: -3px;\r\n    \r\n    opacity: 0;\r\n    filter: blur(10px);\r\n    transform: scale(0.9) translateX(-20px);\r\n    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.ref-section.is-visible .ref-title {\r\n    opacity: 1;\r\n    filter: blur(0);\r\n    transform: scale(1) translateX(0);\r\n}\r\n\r\n\/* DESCRIPCI\u00d3N: Aparece al final *\/\r\n.ref-description {\r\n    font-size: 1.3rem;\r\n    line-height: 1.6;\r\n    color: #333;\r\n    border-top: 1px solid #eee; \r\n    padding-top: 40px;\r\n    max-width: 600px;\r\n    \r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 1s ease 0.8s; \/* Mayor retraso para esperar al t\u00edtulo *\/\r\n}\r\n\r\n.ref-section.is-visible .ref-description {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n<\/style>\r\n\r\n<section class=\"ref-section\" id=\"refSectionUnique\">\r\n    <div class=\"ref-container\">\r\n        <div class=\"ref-indicator\">\r\n            <div class=\"ref-dot\"><\/div>\r\n            <div class=\"ref-line-path\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ref-content\">\r\n            <h2 class=\"ref-title\">Proc\u00e8s de <br> Treball<\/h2>\r\n            <p class=\"ref-description\">\r\n                El desenvolupament d\u2019AutoCustom s\u2019ha articulat en cinc fases consecutives, on s\u2019ha \r\nprioritzat la coher\u00e8ncia entre el disseny gr\u00e0fic, la psicologia i la implementaci\u00f3 \r\ntecnol\u00f2gica\r\n            <\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function() {\r\n    const runObserver = () => {\r\n        const section = document.getElementById('refSectionUnique');\r\n        if (!section) return;\r\n\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    section.classList.add('is-visible');\r\n                } else {\r\n                    \/\/ Opcional: quitar la clase para que se repita la animaci\u00f3n al hacer scroll\r\n                    \/\/ section.classList.remove('is-visible');\r\n                }\r\n            });\r\n        }, { threshold: 0.2 }); \r\n\r\n        observer.observe(section);\r\n    };\r\n\r\n    if (document.readyState === 'complete') {\r\n        runObserver();\r\n    } else {\r\n        window.addEventListener('load', runObserver);\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9c62fa0 e-flex e-con-boxed e-con e-parent\" data-id=\"9c62fa0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dcca389 elementor-widget elementor-widget-html\" data-id=\"dcca389\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Carga de fuentes -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@800&family=Inter:wght@300&display=swap\" rel=\"stylesheet\">\r\n\r\n<div class=\"fixed-viewport-split\">\r\n    <!-- IZQUIERDA: MEN\u00da COMPACTO -->\r\n    <div class=\"content-panel\">\r\n        <div class=\"menu-compact\">\r\n            \r\n            <div class=\"step-link active-item\" data-idx=\"0\">\r\n                <span class=\"step-no\">01<\/span>\r\n                <div class=\"step-meta\">\r\n                    <h2>PROTOTIP<\/h2>\r\n                    <p>L'origen del caos visual i la recerca narrativa.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"step-link\" data-idx=\"1\">\r\n                <span class=\"step-no\">02<\/span>\r\n                <div class=\"step-meta\">\r\n                    <h2>WIREFRAMES<\/h2>\r\n                    <p>Arquitectura brutalista i disseny su\u00eds.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"step-link\" data-idx=\"2\">\r\n                <span class=\"step-no\">03<\/span>\r\n                <div class=\"step-meta\">\r\n                    <h2>MOCKUPS<\/h2>\r\n                    <p>On posar les interaccions?<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"step-link\" data-idx=\"3\">\r\n                <span class=\"step-no\">04<\/span>\r\n                <div class=\"step-meta\">\r\n                    <h2>GUI\u00d3 D\u2019INTERACCI\u00d3<\/h2>\r\n                    <p>Que fa?<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"step-link\" data-idx=\"4\">\r\n                <span class=\"step-no\">05<\/span>\r\n                <div class=\"step-meta\">\r\n                    <h2>PSICOLOGIA  <\/h2>\r\n                    <p>L'objecte f\u00edsic com es representa?<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"step-link\" data-idx=\"5\">\r\n                <span class=\"step-no\"><\/span>\r\n                <div class=\"step-meta\">\r\n                    <h2><\/h2>\r\n                    <p><\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- DERECHA: FOTO PERFECTA -->\r\n    <div class=\"visual-panel\">\r\n        <div class=\"image-wrapper\">\r\n            <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Collash-web-4.png\" class=\"slide-img active-img\">\r\n            <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-192404.png\" class=\"slide-img\">\r\n            <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/mokups.jpg\" class=\"slide-img\">\r\n            <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-14-090826.png\" class=\"slide-img\">\r\n            <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-194510.png\" class=\"slide-img\">\r\n            <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-13-195446.png\" class=\"slide-img\">\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Reset estructural para WordPress *\/\r\n.fixed-viewport-split {\r\n    display: flex;\r\n    width: 100%;\r\n    height: 100vh; \/* Obliga a medir exactamente la pantalla *\/\r\n    background: #fff;\r\n    font-family: 'League Spartan', sans-serif;\r\n    overflow: hidden; \/* Proh\u00edbe el scroll *\/\r\n    position: relative;\r\n}\r\n\r\n\/* Panel Izquierdo *\/\r\n.content-panel {\r\n    width: 50%;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center; \/* Centra el bloque de 6 t\u00edtulos verticalmente *\/\r\n    padding: 0 5% 0 8%;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.menu-compact {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    height: 90%; \/* Ocupa casi todo el alto para distribuir espacio *\/\r\n}\r\n\r\n.step-link {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    margin: 1vh 0; \/* Espaciado basado en el alto de pantalla *\/\r\n    cursor: pointer;\r\n    opacity: 0.15;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.step-link:hover, .step-link.active-item {\r\n    opacity: 1;\r\n    transform: translateX(15px);\r\n}\r\n\r\n.step-no {\r\n    font-family: 'Inter', sans-serif;\r\n    font-size: 0.8rem;\r\n    margin-right: 1.5rem;\r\n    margin-top: 0.6rem;\r\n    color: #0047FF;\r\n}\r\n\r\n.step-meta h2 {\r\n    \/* El tama\u00f1o se ajusta seg\u00fan el alto de la pantalla (vh) para que no desborde *\/\r\n    font-size: clamp(1.5rem, 6vh, 3.8rem); \r\n    font-weight: 800;\r\n    line-height: 0.85;\r\n    margin: 0;\r\n    white-space: nowrap;\r\n}\r\n\r\n.step-meta p {\r\n    font-family: 'Inter', sans-serif;\r\n    font-size: 0.9rem;\r\n    color: #666;\r\n    margin: 0.3rem 0 0 0;\r\n    max-width: 300px;\r\n    opacity: 0;\r\n    transition: opacity 0.3s ease;\r\n}\r\n\r\n.step-link:hover p, .step-link.active-item p {\r\n    opacity: 1;\r\n}\r\n\r\n\/* Panel Derecho *\/\r\n.visual-panel {\r\n    width: 50%;\r\n    height: 100%;\r\n    background: #000;\r\n}\r\n\r\n.image-wrapper {\r\n    width: 100%;\r\n    height: 100%;\r\n    position: relative;\r\n}\r\n\r\n.slide-img {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover; \/* La foto se adapta sin deformarse *\/\r\n    opacity: 0;\r\n    transition: opacity 0.5s ease-in-out;\r\n}\r\n\r\n.slide-img.active-img {\r\n    opacity: 1;\r\n}\r\n\r\n\/* Responsivo r\u00e1pido *\/\r\n@media (max-width: 800px) {\r\n    .fixed-viewport-split { flex-direction: column; height: auto; overflow: visible; }\r\n    .content-panel, .visual-panel { width: 100%; height: auto; }\r\n    .visual-panel { height: 350px; order: -1; }\r\n    .content-panel { padding: 30px; }\r\n    .step-link { opacity: 1; margin: 20px 0; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n    const links = document.querySelectorAll(\".step-link\");\r\n    const imgs = document.querySelectorAll(\".slide-img\");\r\n\r\n    links.forEach((link, i) => {\r\n        link.addEventListener(\"mouseenter\", () => {\r\n            links.forEach(l => l.classList.remove(\"active-item\"));\r\n            imgs.forEach(img => img.classList.remove(\"active-img\"));\r\n            \r\n            link.classList.add(\"active-item\");\r\n            if(imgs[i]) imgs[i].classList.add(\"active-img\");\r\n        });\r\n    });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1423fed e-flex e-con-boxed e-con e-parent\" data-id=\"1423fed\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01ba1bb elementor-widget elementor-widget-html\" data-id=\"01ba1bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Fuente League Spartan e Inter -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@900&family=Inter:wght@300;400&display=swap\">\r\n\r\n<style>\r\n.fnc-wrapper-section {\r\n    padding: 120px 5%; \/* M\u00e1s espacio para permitir el scroll *\/\r\n    background: #ffffff;\r\n    display: flex;\r\n    justify-content: center;\r\n    font-family: 'Inter', sans-serif;\r\n    width: 100%;\r\n    overflow: hidden;\r\n}\r\n\r\n.fnc-main-grid {\r\n    display: grid;\r\n    grid-template-columns: 60px 1fr;\r\n    gap: 20px;\r\n    width: 100%;\r\n}\r\n\r\n.fnc-side-indicator {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n\r\n.fnc-top-dot {\r\n    width: 14px;\r\n    height: 14px;\r\n    background: #000;\r\n    border-radius: 50%;\r\n    margin-top: 15px;\r\n}\r\n\r\n\/* L\u00cdNEA: Animaci\u00f3n m\u00e1s lenta y fluida *\/\r\n.fnc-vertical-line {\r\n    width: 2px;\r\n    height: 0; \r\n    background: #0047FF; \r\n    \/* Curva de velocidad dram\u00e1tica *\/\r\n    transition: height 2s cubic-bezier(0.22, 1, 0.36, 1);\r\n    margin-top: 12px;\r\n    display: block !important; \r\n}\r\n\r\n\/* Activaci\u00f3n por JS: Mayor altura final *\/\r\n.fnc-wrapper-section.fnc-active .fnc-vertical-line {\r\n    height: 350px; \r\n}\r\n\r\n.fnc-main-title {\r\n    font-family: 'League Spartan', sans-serif;\r\n    font-size: clamp(2.5rem, 10vw, 6.5rem); \r\n    font-weight: 900;\r\n    color: #000;\r\n    line-height: 0.85;\r\n    margin-bottom: 50px;\r\n    text-transform: uppercase;\r\n    letter-spacing: -3px;\r\n    \/* Aparece con fade lateral *\/\r\n    opacity: 0;\r\n    transform: translateX(-30px);\r\n    transition: all 1.2s ease;\r\n}\r\n\r\n.fnc-wrapper-section.fnc-active .fnc-main-title {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n}\r\n\r\n.fnc-text-block {\r\n    font-size: 1.3rem;\r\n    line-height: 1.6;\r\n    color: #333;\r\n    border-top: 1px solid #eee; \r\n    padding-top: 40px;\r\n    opacity: 0;\r\n    \/* Movimiento de subida acentuado *\/\r\n    transform: translateY(60px);\r\n    \/* Retraso largo para que la l\u00ednea gu\u00ede la mirada primero *\/\r\n    transition: all 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;\r\n}\r\n\r\n.fnc-wrapper-section.fnc-active .fnc-text-block {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .fnc-wrapper-section.fnc-active .fnc-vertical-line {\r\n        height: 200px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"fnc-wrapper-section\" id=\"fancineSectionUnique\">\r\n    <div class=\"fnc-main-grid\">\r\n        <div class=\"fnc-side-indicator\">\r\n            <div class=\"fnc-top-dot\"><\/div>\r\n            <div class=\"fnc-vertical-line\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"fnc-content-area\">\r\n            <span style=\"font-family: 'League Spartan'; letter-spacing: 4px; color: #aaa; font-size: 0.9rem;\"><\/span>\r\n            <h2 class=\"fnc-main-title\">FANZINE<\/h2>\r\n            <p class=\"fnc-text-block\">\r\n                S\u2019ha utilitzat per al disseny de la UX\/UI del q\u00fcestionari interactiu. Figma ha \r\nperm\u00e8s definir el flux de navegaci\u00f3.\r\n            <\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function() {\r\n    const initFancineObserver = () => {\r\n        const section = document.getElementById('fancineSectionUnique');\r\n        if (!section) return;\r\n\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                \/\/ Se activa cuando el 30% del elemento es visible\r\n                if (entry.isIntersecting) {\r\n                    section.classList.add('fnc-active');\r\n                }\r\n            });\r\n        }, { threshold: 0.3 }); \r\n\r\n        observer.observe(section);\r\n    };\r\n\r\n    if (document.readyState === 'complete') {\r\n        initFancineObserver();\r\n    } else {\r\n        window.addEventListener('load', initFancineObserver);\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5f9ee7a e-flex e-con-boxed e-con e-parent\" data-id=\"5f9ee7a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d52f943 elementor-widget elementor-widget-html\" data-id=\"d52f943\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>V\u00eddeo de YouTube con Bot\u00f3n Redondeado<\/title>\r\n    <style>\r\n        \/* Contenedor principal para delimitar el tama\u00f1o m\u00e1ximo en la web *\/\r\n        .wrapper-video {\r\n            width: 100%;\r\n            max-width: 1000px; \/* Ajusta el ancho m\u00e1ximo de tu v\u00eddeo aqu\u00ed *\/\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* Contenedor relativo que mantiene la proporci\u00f3n de YouTube (16:9) *\/\r\n        .video-container {\r\n            position: relative;\r\n            width: 100%;\r\n            padding-top: 56.25%; \/* Relaci\u00f3n de aspecto 16:9 *\/\r\n            overflow: hidden;\r\n            border-radius: 12px; \/* Bordes suavemente redondeados para el reproductor *\/\r\n            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);\r\n        }\r\n\r\n        \/* Hace que el iframe de YouTube ocupe todo el espacio disponible *\/\r\n        .video-container iframe {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            border: none;\r\n        }\r\n\r\n        \/* Estilos modificados para el bot\u00f3n azul (m\u00e1s grande y sin esquinas) *\/\r\n        .boton-video {\r\n            position: absolute;\r\n            bottom: 25px; \/* Distancia desde la parte inferior *\/\r\n            right: 25px;  \/* Distancia desde la derecha *\/\r\n            background-color: #007BFF; \/* Color azul original *\/\r\n            color: white;\r\n            padding: 16px 32px; \/* M\u00e1s grande: espacio interno aumentado *\/\r\n            font-size: 18px; \/* M\u00e1s grande: tama\u00f1o de letra aumentado *\/\r\n            font-family: Arial, sans-serif;\r\n            font-weight: bold;\r\n            border: none;\r\n            border-radius: 50px; \/* Sin esquinas: completamente redondo\/ovalado *\/\r\n            cursor: pointer;\r\n            text-decoration: none;\r\n            z-index: 10; \/* Asegura que se posicione por encima del v\u00eddeo de YouTube *\/\r\n            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;\r\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);\r\n        }\r\n\r\n        \/* Efecto al pasar el rat\u00f3n por encima (Hover) *\/\r\n        .boton-video:hover {\r\n            background-color: #4da3ff; \/* Efecto: Se vuelve un azul m\u00e1s CLARO *\/\r\n            transform: scale(1.06); \/* Crece ligeramente al poner el cursor *\/\r\n            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); \/* Sombra m\u00e1s de bot\u00f3n flotante *\/\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"wrapper-video\">\r\n        <div class=\"video-container\">\r\n            \r\n            <!-- Tu v\u00eddeo ya est\u00e1 configurado aqu\u00ed con su ID correcto (05ALEjRLyyY) -->\r\n            <iframe \r\n                src=\"https:\/\/www.youtube-nocookie.com\/embed\/05ALEjRLyyY?autoplay=1&mute=1&loop=1&playlist=05ALEjRLyyY&controls=1&rel=0\" \r\n                title=\"Reproductor de v\u00eddeo de YouTube\" \r\n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" \r\n                allowfullscreen>\r\n            <\/iframe>\r\n\r\n            <!-- Bot\u00f3n adaptado: Recuerda cambiar el enlace por tu web de destino -->\r\n            <a href=\"https:\/\/www.figma.com\/proto\/Vd7CcQmV6yT24mgNxIXVNW\/Sin-t%C3%ADtulo?node-id=0-1&t=qVvZieW7bZ4Ny8zK-1\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"boton-video\">\r\n                clic aqu\u00ed\r\n            <\/a>\r\n            \r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f0432d2 e-flex e-con-boxed e-con e-parent\" data-id=\"f0432d2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-179d42f elementor-widget elementor-widget-html\" data-id=\"179d42f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Fuente League Spartan e Inter -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@900&family=Inter:wght@300;400&display=swap\">\r\n\r\n<style>\r\n.vt-main-section {\r\n    padding: 120px 5%; \/* Un poco m\u00e1s de aire arriba y abajo *\/\r\n    background: #ffffff;\r\n    display: flex;\r\n    justify-content: center;\r\n    font-family: 'Inter', sans-serif;\r\n    width: 100%;\r\n    overflow: hidden;\r\n}\r\n\r\n.vt-content-grid {\r\n    display: grid;\r\n    grid-template-columns: 60px 1fr;\r\n    gap: 20px;\r\n    width: 100%;\r\n}\r\n\r\n.vt-indicator-col {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n\r\n.vt-indicator-dot {\r\n    width: 14px; \/* Un poco m\u00e1s grande *\/\r\n    height: 14px;\r\n    background: #000;\r\n    border-radius: 50%;\r\n    margin-top: 15px;\r\n}\r\n\r\n\/* L\u00ednea animada: M\u00e1s lenta y con m\u00e1s recorrido *\/\r\n.vt-indicator-line {\r\n    width: 2px;\r\n    height: 0; \r\n    background: #0047FF; \r\n    \/* Curva de movimiento m\u00e1s dram\u00e1tica *\/\r\n    transition: height 2s cubic-bezier(0.22, 1, 0.36, 1);\r\n    margin-top: 12px;\r\n    display: block !important; \r\n}\r\n\r\n\/* Animaci\u00f3n activa: L\u00ednea m\u00e1s larga *\/\r\n.vt-main-section.vt-visible .vt-indicator-line {\r\n    height: 350px; \/* De 200px a 350px para que se note m\u00e1s *\/\r\n}\r\n\r\n.vt-title-text {\r\n    font-family: 'League Spartan', sans-serif;\r\n    font-size: clamp(2.5rem, 10vw, 6.5rem); \r\n    font-weight: 900;\r\n    color: #000;\r\n    line-height: 1;\r\n    margin-bottom: 60px;\r\n    text-transform: uppercase;\r\n    letter-spacing: -3px;\r\n    white-space: nowrap;\r\n    \/* El t\u00edtulo tambi\u00e9n entra con un ligero fade *\/\r\n    opacity: 0;\r\n    transform: translateX(-20px);\r\n    transition: all 1.2s ease;\r\n}\r\n\r\n.vt-main-section.vt-visible .vt-title-text {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n}\r\n\r\n.vt-desc-block {\r\n    font-size: 1.3rem;\r\n    line-height: 1.6;\r\n    color: #333;\r\n    border-top: 1px solid #eee; \r\n    padding-top: 40px;\r\n    opacity: 0;\r\n    \/* Movimiento de subida m\u00e1s exagerado para que se note el desplazamiento *\/\r\n    transform: translateY(50px);\r\n    \/* Retraso de 0.6s para que primero crezca la l\u00ednea y luego aparezca el texto *\/\r\n    transition: all 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;\r\n    max-width: 850px;\r\n}\r\n\r\n.vt-main-section.vt-visible .vt-desc-block {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .vt-title-text {\r\n        letter-spacing: -1px;\r\n        white-space: normal;\r\n    }\r\n    .vt-main-section.vt-visible .vt-indicator-line {\r\n        height: 200px; \/* M\u00e1s corto en m\u00f3vil para no romper el layout *\/\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"vt-main-section\" id=\"vtUniqueSection\">\r\n    <div class=\"vt-content-grid\">\r\n        <div class=\"vt-indicator-col\">\r\n            <div class=\"vt-indicator-dot\"><\/div>\r\n            <div class=\"vt-indicator-line\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"vt-body-area\">\r\n            <h2 class=\"vt-title-text\">VIDEO TOUR<\/h2>\r\n            <p class=\"vt-desc-block\">\r\n                Aqu\u00ed es pot veure el recorregut que pots fer pel meu fanzine, i depenent de les teves respostes obtens un resultat o un altre.\r\n            <\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function() {\r\n    const startVtObserver = () => {\r\n        const el = document.getElementById('vtUniqueSection');\r\n        if (!el) return;\r\n\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                \/\/ He subido el threshold a 0.3 para que el usuario \r\n                \/\/ tenga que ver un 30% de la secci\u00f3n antes de que dispare\r\n                if (entry.isIntersecting) {\r\n                    el.classList.add('vt-visible');\r\n                }\r\n            });\r\n        }, { threshold: 0.3 }); \r\n\r\n        observer.observe(el);\r\n    };\r\n\r\n    if (document.readyState === 'complete') {\r\n        startVtObserver();\r\n    } else {\r\n        window.addEventListener('load', startVtObserver);\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5c75035 e-flex e-con-boxed e-con e-parent\" data-id=\"5c75035\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1920502 elementor-widget elementor-widget-html\" data-id=\"1920502\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* Contenedor de recorte para que el zoom no tape otros elementos de la web *\/\r\n.wp-zoom-wrapper {\r\n    overflow: hidden; \/* Cambia a 'visible' si quieres que la imagen se salga de su sitio al ampliar *\/\r\n    width: 100%;\r\n    max-width: 1100px;\r\n    margin: 40px auto;\r\n    border-radius: 8px;\r\n}\r\n\r\n\/* Contenedor principal con efecto de gran zoom *\/\r\n.wp-zoom-mockup {\r\n    position: relative;\r\n    width: 100%;\r\n    line-height: 0;\r\n    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); \/* Transici\u00f3n m\u00e1s suave y profesional *\/\r\n    cursor: zoom-in;\r\n    \r\n    \/* Centramos el punto de zoom en la zona del monitor *\/\r\n    transform-origin: 45% 45%; \r\n}\r\n\r\n\/* Efecto de gran ampliaci\u00f3n al pasar el rat\u00f3n *\/\r\n.wp-zoom-mockup:hover {\r\n    transform: scale(2.2); \/* Ampl\u00eda a m\u00e1s del doble *\/\r\n}\r\n\r\n\/* Imagen de escritorio *\/\r\n.wp-zoom-img {\r\n    width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    box-shadow: 0 15px 40px rgba(0,0,0,0.2);\r\n}\r\n\r\n\/* El v\u00eddeo se mantiene perfectamente posicionado durante el zoom *\/\r\n.wp-zoom-video-container {\r\n    position: absolute;\r\n    top: 45.1%; \r\n    left: 45.2%;\r\n    width: 23.4%; \r\n    height: 28.8%; \r\n    transform: translate(-50%, -50%);\r\n    background: #000;\r\n    overflow: hidden;\r\n}\r\n\r\n.wp-zoom-video-container iframe {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    border: none;\r\n}\r\n\r\n\/* Desactivar zoom en m\u00f3viles para evitar problemas de usabilidad *\/\r\n@media (max-width: 768px) {\r\n    .wp-zoom-mockup:hover {\r\n        transform: none;\r\n    }\r\n    .wp-zoom-wrapper {\r\n        overflow: visible;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"wp-zoom-wrapper\">\r\n    <div class=\"wp-zoom-mockup\">\r\n        <!-- Imagen de fondo -->\r\n        <img decoding=\"async\" src=\"https:\/\/25022.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/escritorio-1.jpg\" alt=\"Escritorio Close-up\" class=\"wp-zoom-img\">\r\n\r\n        <!-- V\u00eddeo que se ampl\u00eda junto a la imagen -->\r\n        <div class=\"wp-zoom-video-container\">\r\n            <iframe \r\n                src=\"https:\/\/www.youtube.com\/embed\/IUaiJYfJKTo?autoplay=1&mute=1&loop=1&playlist=IUaiJYfJKTo&controls=0&modestbranding=1&rel=0&iv_load_policy=3\" \r\n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \r\n                allowfullscreen>\r\n            <\/iframe>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-13ac88a e-flex e-con-boxed e-con e-parent\" data-id=\"13ac88a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f4cff2a elementor-widget elementor-widget-html\" data-id=\"f4cff2a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Fuente League Spartan e Inter -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@900&family=Inter:wght@300;400&display=swap\">\r\n\r\n<style>\r\n.cns-wrapper-section {\r\n    padding: 120px 5%;\r\n    background: #ffffff;\r\n    display: flex;\r\n    justify-content: center;\r\n    font-family: 'Inter', sans-serif;\r\n    width: 100%;\r\n    overflow: hidden;\r\n}\r\n\r\n.cns-main-grid {\r\n    display: grid;\r\n    grid-template-columns: 60px 1fr;\r\n    gap: 20px;\r\n    width: 100%;\r\n}\r\n\r\n.cns-side-indicator {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n\r\n.cns-top-dot {\r\n    width: 14px;\r\n    height: 14px;\r\n    background: #000;\r\n    border-radius: 50%;\r\n    margin-top: 15px;\r\n}\r\n\r\n\/* L\u00cdNEA: Animaci\u00f3n lenta y fluida con 350px de recorrido *\/\r\n.cns-vertical-line {\r\n    width: 2px;\r\n    height: 0; \r\n    background: #0047FF; \r\n    transition: height 2s cubic-bezier(0.22, 1, 0.36, 1);\r\n    margin-top: 12px;\r\n    display: block !important; \r\n}\r\n\r\n\/* Activaci\u00f3n por Scroll *\/\r\n.cns-wrapper-section.cns-active .cns-vertical-line {\r\n    height: 350px; \r\n}\r\n\r\n.cns-main-title {\r\n    font-family: 'League Spartan', sans-serif;\r\n    font-size: clamp(2.5rem, 10vw, 6.5rem); \r\n    font-weight: 900;\r\n    color: #000;\r\n    line-height: 0.85;\r\n    margin-bottom: 50px;\r\n    text-transform: uppercase;\r\n    letter-spacing: -3px;\r\n    opacity: 0;\r\n    transform: translateX(-30px);\r\n    transition: all 1.2s ease;\r\n}\r\n\r\n.cns-wrapper-section.cns-active .cns-main-title {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n}\r\n\r\n.cns-text-block {\r\n    font-size: 1.3rem;\r\n    line-height: 1.6;\r\n    color: #333;\r\n    border-top: 1px solid #eee; \r\n    padding-top: 40px;\r\n    opacity: 0;\r\n    transform: translateY(60px);\r\n    transition: all 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;\r\n}\r\n\r\n.cns-wrapper-section.cns-active .cns-text-block {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .cns-wrapper-section.cns-active .cns-vertical-line {\r\n        height: 200px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"cns-wrapper-section\" id=\"conclusionsSectionUnique\">\r\n    <div class=\"cns-main-grid\">\r\n        <div class=\"cns-side-indicator\">\r\n            <div class=\"cns-top-dot\"><\/div>\r\n            <div class=\"cns-vertical-line\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"cns-content-area\">\r\n            <h2 class=\"cns-main-title\">CONCLUSIONS<\/h2>\r\n            <p class=\"cns-text-block\">\r\n                \r\n            <\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function() {\r\n    const initConclusionsObserver = () => {\r\n        const section = document.getElementById('conclusionsSectionUnique');\r\n        if (!section) return;\r\n\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    section.classList.add('cns-active');\r\n                }\r\n            });\r\n        }, { threshold: 0.3 }); \r\n\r\n        observer.observe(section);\r\n    };\r\n\r\n    if (document.readyState === 'complete') {\r\n        initConclusionsObserver();\r\n    } else {\r\n        window.addEventListener('load', initConclusionsObserver);\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-eed33f7 e-flex e-con-boxed e-con e-parent\" data-id=\"eed33f7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc6a7cf elementor-widget elementor-widget-html\" data-id=\"dc6a7cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.cns-grid-conclusions {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n    gap: 30px;\r\n    max-width: 1200px;\r\n    margin: -120px auto;\r\n    padding: 0 20px;\r\n}\r\n\r\n.cns-card {\r\n    background: #f9f9f9;\r\n    padding: 40px;\r\n    border-top: 5px solid #000;\r\n    \/* Estado inicial para la animaci\u00f3n *\/\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    transition: \r\n        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), \r\n        opacity 0.8s ease,\r\n        background 0.3s ease,\r\n        border-color 0.3s ease;\r\n}\r\n\r\n\/* Clase que activa la animaci\u00f3n mediante JS *\/\r\n.cns-card.cns-revealed {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n.cns-card:hover {\r\n    background: #fff;\r\n    transform: translateY(-10px);\r\n    box-shadow: 0 20px 40px rgba(0,0,0,0.05);\r\n    border-top-color: #0047FF;\r\n}\r\n\r\n.cns-number {\r\n    font-family: 'League Spartan', sans-serif;\r\n    font-size: 0.9rem;\r\n    color: #0047FF;\r\n    display: block;\r\n    margin-bottom: 15px;\r\n}\r\n\r\n.cns-card-title {\r\n    font-family: 'League Spartan', sans-serif;\r\n    font-size: 2rem;\r\n    line-height: 1;\r\n    margin-bottom: 20px;\r\n    text-transform: uppercase;\r\n    color: #111;\r\n}\r\n\r\n\/* Delays para efecto cascada (entra una tras otra) *\/\r\n.cns-card:nth-child(2) { transition-delay: 0.2s; }\r\n.cns-card:nth-child(3) { transition-delay: 0.4s; }\r\n<\/style>\r\n\r\n<div class=\"cns-grid-conclusions\" id=\"conclusionsGrid\">\r\n    <div class=\"cns-card\">\r\n        <span class=\"cns-number\">01<\/span>\r\n        <h3 class=\"cns-card-title\">Reflexi\u00f3<\/h3>\r\n        <p>An\u00e0lisi sobre com l'autoconstrucci\u00f3 trenca els esquemes de l'arquitectura gen\u00e8rica.<\/p>\r\n    <\/div>\r\n    <div class=\"cns-card\">\r\n        <span class=\"cns-number\">02<\/span>\r\n        <h3 class=\"cns-card-title\">Aprenentatges<\/h3>\r\n        <p>Domini de noves eines i la comprensi\u00f3 de la mat\u00e8ria com a eina de comunicaci\u00f3 identit\u00e0ria.<\/p>\r\n    <\/div>\r\n    <div class=\"cns-card\">\r\n        <span class=\"cns-number\">03<\/span>\r\n        <h3 class=\"cns-card-title\">Valoraci\u00f3<\/h3>\r\n        <p>Aquest projecte reafirma la necessitat de dissenys que desafi\u00efn la homogene\u00eftat actual.<\/p>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n    const revealConclusions = () => {\r\n        const cards = document.querySelectorAll('.cns-card');\r\n        \r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                \/\/ Se activa cuando se ve al menos el 20% de la secci\u00f3n\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('cns-revealed');\r\n                }\r\n            });\r\n        }, { threshold: 0.2 });\r\n\r\n        cards.forEach(card => observer.observe(card));\r\n    };\r\n\r\n    \/\/ Ejecutar al cargar la p\u00e1gina\r\n    if (document.readyState === 'complete') {\r\n        revealConclusions();\r\n    } else {\r\n        window.addEventListener('load', revealConclusions);\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\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>El teu m\u00f3n, a la teva manera. No personalitzem objectes, creem extensions de la teva identitat. On la t\u00e8cnica de precisi\u00f3 es troba amb l&#8217;art absolut. Referents Aquests referents demostren que l\u2019objecte pot ser una eina de comunicaci\u00f3 identi t\u00e0ria. AutoCustom recull aquesta her\u00e8ncia per crear un sistema on l\u2019usuari deixa de ser un consumidor [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-181","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/25022.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/25022.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/25022.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/25022.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/25022.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=181"}],"version-history":[{"count":343,"href":"https:\/\/25022.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/181\/revisions"}],"predecessor-version":[{"id":714,"href":"https:\/\/25022.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/181\/revisions\/714"}],"wp:attachment":[{"href":"https:\/\/25022.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}