{"id":12,"date":"2026-04-29T21:08:42","date_gmt":"2026-04-29T19:08:42","guid":{"rendered":"https:\/\/www.25019.ooteca.artedra.net\/?page_id=12"},"modified":"2026-05-20T21:57:39","modified_gmt":"2026-05-20T19:57:39","slug":"atelion-commune","status":"publish","type":"page","link":"https:\/\/www.25019.ooteca.artedra.net\/","title":{"rendered":"atelion commune"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8497423 e-flex e-con-boxed e-con e-parent\" data-id=\"8497423\" 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-5b68572 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"5b68572\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<header class=\"main-header\">\r\n\r\n  <div class=\"header-inner\">\r\n\r\n    <!-- LOGO -->\r\n    <div class=\"logo\">\r\n      <img decoding=\"async\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/at-cm-lgo-5.png\" alt=\"logo\">\r\n    <\/div>\r\n\r\n    <!-- MEN\u00da -->\r\n    <nav class=\"menu\">\r\n      <a href=\"#referents\">Referents<\/a>\r\n      <a href=\"#proces\">Proc\u00e9s<\/a>\r\n      <a href=\"#fanzine\">Fanzine<\/a>\r\n      <a href=\"#video\">Video Tour<\/a>\r\n      <a href=\"#conclusions\">Conclusions<\/a>\r\n    <\/nav>\r\n\r\n  <\/div>\r\n\r\n<\/header>\r\n\r\n<style>\r\nbody {\r\n  margin: 0;\r\n  padding-top: 110px;\r\n}\r\n\r\n\/* HEADER *\/\r\n.main-header {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 110px;\r\n  background: black;\r\n  z-index: 9999;\r\n  box-shadow: 0 12px 40px rgba(255,255,255,0.18);\r\n}\r\n\r\n\/* CONTENEDOR *\/\r\n.header-inner {\r\n  width: 100%;\r\n  max-width: 1800px;\r\n  margin: 0 auto;\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 0 80px;\r\n\r\n  \/* \ud83d\udd25 un poco m\u00e1s abajo *\/\r\n  transform: translateY(7px);\r\n}\r\n\r\n\/* LOGO *\/\r\n.logo img {\r\n  height: 65px;\r\n  object-fit: contain;\r\n}\r\n\r\n\/* MEN\u00da *\/\r\n.menu {\r\n  flex: 1;\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 60px;\r\n}\r\n\r\n\/* LINKS *\/\r\n.menu a {\r\n  color: white;\r\n  text-decoration: none;\r\n  font-size: 16px;\r\n  letter-spacing: 1px;\r\n  transition: color 0.3s ease;\r\n}\r\n\r\n.menu a:hover {\r\n  color: red;\r\n}\r\n<\/style>\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-e7976df e-flex e-con-boxed e-con e-parent\" data-id=\"e7976df\" 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-1341279 elementor-widget elementor-widget-html\" data-id=\"1341279\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\nbody {\r\n  cursor: none;\r\n}\r\n\r\n#cursorCanvas {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  pointer-events: none;\r\n  z-index: 999999;\r\n}\r\n<\/style>\r\n\r\n<canvas id=\"cursorCanvas\"><\/canvas>\r\n\r\n<script>\r\n(function() {\r\n\r\n  const canvas = document.getElementById(\"cursorCanvas\");\r\n  if (!canvas) return;\r\n\r\n  const ctx = canvas.getContext(\"2d\");\r\n\r\n  function resize() {\r\n    const dpr = window.devicePixelRatio || 1;\r\n\r\n    canvas.width = window.innerWidth * dpr;\r\n    canvas.height = window.innerHeight * dpr;\r\n\r\n    canvas.style.width = window.innerWidth + \"px\";\r\n    canvas.style.height = window.innerHeight + \"px\";\r\n\r\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n  }\r\n\r\n  resize();\r\n  window.addEventListener(\"resize\", resize);\r\n\r\n  let mouse = { x: window.innerWidth \/ 2, y: window.innerHeight \/ 2 };\r\n  let particles = [];\r\n\r\n  document.addEventListener(\"mousemove\", (e) => {\r\n    mouse.x = e.clientX;\r\n    mouse.y = e.clientY;\r\n\r\n    particles.push({\r\n      x: mouse.x,\r\n      y: mouse.y,\r\n      size: Math.random() * 5 + 2,\r\n      life: 1\r\n    });\r\n  });\r\n\r\n  function drawCircle(x, y, size, alpha, main = false) {\r\n    ctx.beginPath();\r\n    ctx.globalAlpha = alpha;\r\n    ctx.arc(x, y, size, 0, Math.PI * 2);\r\n\r\n    ctx.strokeStyle = \"#ff0000\";\r\n    ctx.lineWidth = main ? 2 : 1;\r\n    ctx.stroke();\r\n\r\n    ctx.globalAlpha = 1;\r\n  }\r\n\r\n  function animate() {\r\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n    \/\/ trail\r\n    for (let i = particles.length - 1; i >= 0; i--) {\r\n      let p = particles[i];\r\n\r\n      drawCircle(p.x, p.y, p.size, p.life);\r\n\r\n      p.size *= 0.97;\r\n      p.life -= 0.04;\r\n\r\n      if (p.life <= 0) particles.splice(i, 1);\r\n    }\r\n\r\n    \/\/ cursor principal\r\n    drawCircle(mouse.x, mouse.y, 8, 1, true);\r\n\r\n    requestAnimationFrame(animate);\r\n  }\r\n\r\n  animate();\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-16465ef e-con-full e-transform e-flex e-con e-parent\" data-id=\"16465ef\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_transform_translateY_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-74,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c976b1 e-transform elementor-widget elementor-widget-image\" data-id=\"7c976b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_scale_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.3,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/04\/Diseno-sin-titulo.gif\" title=\"Diseno-sin-titulo\" alt=\"Diseno-sin-titulo\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b3ef46 e-flex e-con-boxed e-con e-parent\" data-id=\"1b3ef46\" 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-7d154cc elementor-widget__width-inherit e-transform e-transform elementor-widget elementor-widget-image\" data-id=\"7d154cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_scale_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.4,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"960\" height=\"50\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/04\/download-2-1.gif\" class=\"attachment-large size-large wp-image-21\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\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-cb8e4f2 e-flex e-con-boxed e-con e-parent\" data-id=\"cb8e4f2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t\t\t\t<p class=\"e-80b7ab5-681db9f e-paragraph-base\" data-interaction-id=\"80b7ab5\"  >\n\t\t\t\t\t\t\t\tLa idea principal \u00e9s desenvolupar un fanzine en format revista sobre la marca inventada Atelion Commune 104, centrada en roba estil archive swag, on la publicaci\u00f3 reflecteix aquest desordre creatiu, una est\u00e8tica experimental i un enfocament innovador.\n\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-576c618 e-flex e-con-boxed e-con e-parent\" data-id=\"576c618\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t\n<hr class=\"e-1df66c7-0efcd1f e-divider-base\" data-interaction-id=\"1df66c7\"   \/>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9118307 e-flex e-con-boxed e-con e-parent\" data-id=\"9118307\" 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-1e2193e elementor-widget elementor-widget-html\" data-id=\"1e2193e\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"referents\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"typing-container\">\r\n  <h2 class=\"typing-effect\" data-text=\"Referents\"><\/h2>\r\n<\/div>\r\n\r\n<style>\r\n.typing-container {\r\n  display: flex;\r\n  justify-content: flex-start; \r\n  margin: 20px 0;\r\n}\r\n\r\n.typing-effect {\r\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n  font-size: 2.5rem;\r\n  font-weight: bold;\r\n  \/* Cambio a color rojo *\/\r\n  color: #ff0000; \r\n  margin: 0;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  \/* Eliminamos el borde que hac\u00eda de cursor *\/\r\n  border-right: none; \r\n  width: 0;\r\n}\r\n\r\n.typing-effect.start-typing {\r\n  \/* Ahora solo ejecutamos la animaci\u00f3n de escritura *\/\r\n  animation: typing 2s steps(40, end) forwards;\r\n}\r\n\r\n@keyframes typing {\r\n  from { width: 0 }\r\n  to { width: 100% }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  const observerOptions = {\r\n    threshold: 0.5 \r\n  };\r\n\r\n  const observer = new IntersectionObserver((entries, observer) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        const target = entry.target;\r\n        target.textContent = target.getAttribute('data-text');\r\n        target.classList.add('start-typing');\r\n        observer.unobserve(target);\r\n      }\r\n    });\r\n  }, observerOptions);\r\n\r\n  const titles = document.querySelectorAll('.typing-effect');\r\n  titles.forEach(title => observer.observe(title));\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-dc1bd53 e-flex e-con-boxed e-con e-parent\" data-id=\"dc1bd53\" 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-0be2464 elementor-widget elementor-widget-html\" data-id=\"0be2464\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"floating-container\">\r\n\r\n  <!-- BURBUJA 1: MAISON MARGIELA -->\r\n  <div class=\"bubble b1\" onclick=\"openBubble(this)\">\r\n    <!-- Pon aqu\u00ed la flotante en 'src' y la de interior en 'data-active-src' -->\r\n    <img decoding=\"async\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/04\/Maison-Margiela-Paris-Logo-Vector.jpg\" \r\n         data-active-src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/B2E62936-41D1-4D60-BCB3-B4C142F32DB4.jpg\" \/>\r\n    <div class=\"content\">\r\n      <p style=\"font-size: 18px; font-weight: bold; color: black;\">Maison Margiela<\/p>\r\n      <p style=\"color: blue;\">\r\n        <a href=\"https:\/\/www.maisonmargiela.com\" target=\"_blank\" onclick=\"event.stopPropagation();\">\r\n          https:\/\/www.maisonmargiela.com\r\n        <\/a>\r\n      <\/p>\r\n      <p style=\"font-size: 14px\">\r\n          Desordre i deconstrucci\u00f3, amb una est\u00e8tica d\u2019arxiu on l\u2019anonimat \u00e9s part clau de la identitat.\r\n      <\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- BURBUJA 2: CHROME HEARTS -->\r\n  <div class=\"bubble b2\" onclick=\"openBubble(this)\">\r\n    <img decoding=\"async\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/04\/chrome-hearts.jpg\" \r\n         data-active-src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/91FD3BFE-77DE-4A00-952D-AEA0655E5A33.jpg\" \/>\r\n    <div class=\"content\">\r\n        <p style=\"font-size: 18px; font-weight: bold; color: black;\">Chrome Hearts<\/p>\r\n        <p style=\"color: blue;\">\r\n        <a href=\"https:\/\/www.chromehearts.com\/on\/demandware.store\/Sites-ChromeHearts-Site\/en_US\/Default-Start\" target=\"_blank\" onclick=\"event.stopPropagation();\">\r\n         https:\/\/www.chromehearts.com\/\r\n        <\/a>\r\n      <\/p>\r\n       <p style=\"font-size: 14px\">\r\n         Inspirat en la web per la seva composici\u00f3 fora de l\u2019estructura t\u00edpica, amb una est\u00e8tica de barreja de materials i un logo molt marcat.\r\n       <\/p>\r\n      <\/div>\r\n  <\/div>\r\n\r\n  <!-- BURBUJA 3: ACNE STUDIOS -->\r\n  <div class=\"bubble b3\" onclick=\"openBubble(this)\">\r\n    <img decoding=\"async\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/04\/acne-studios.jpg\" \r\n         data-active-src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/E4BB71EE-1A45-4098-AA2D-759EF75C324D.jpg\" \/>\r\n    <div class=\"content\">\r\n      <p style=\"font-size: 18px; font-weight: bold; color: black;\">Acne Studios<\/p>\r\n      <p style=\"color: blue;\">\r\n        <a href=\"https:\/\/www.acnestudios.com\/eu\/en\/home?srsltid=AfmBOoqI8l1zwV3R1YFr2Owr8whtwbe8V5wofDGdx3L1T-UlOHYMyuCV\" target=\"_blank\" onclick=\"event.stopPropagation();\">\r\n         https:\/\/www.acnestudios.com\/\r\n        <\/a>\r\n      <\/p>\r\n       <p style=\"font-size: 14px\">\r\n         Est\u00e8tica desgastada i amb efecte antic d\u2019algunes peces, aportant m\u00e9s personalitat i un acabat menys net i m\u00e9s unic.\r\n       <\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- BURBUJA 4: RICK OWENS -->\r\n  <div class=\"bubble b4\" onclick=\"openBubble(this)\">\r\n    <img decoding=\"async\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/rick-owensss.jpg\" \r\n         data-active-src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/F3729C7E-36A3-43A0-B588-C7C7061E11AE.png\" \/>\r\n    <div class=\"content\">\r\n        <p style=\"font-size: 18px; font-weight: bold; color: black;\">Rick Owens<\/p>\r\n         <p style=\"color: blue;\">\r\n        <a href=\"https:\/\/www.rickowens.eu\/\" target=\"_blank\" onclick=\"event.stopPropagation();\">\r\n         https:\/\/www.rickowens.eu\/\r\n        <\/a>\r\n      <\/p>\r\n       <p style=\"font-size: 14px\">\r\n        Destaca per una est\u00e8tica experimental basada en la superposici\u00f3 de capes, teles i textures que generen formes i volums poc comuns.\r\n       <\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- BURBUJA 5: JNCO JEANS -->\r\n  <div class=\"bubble b5\" onclick=\"openBubble(this)\">\r\n    <img decoding=\"async\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/jnco-2-1.jpg\" \r\n         data-active-src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/CBF96B70-6A53-4C71-BDF9-6AFB03703549.jpg\" \/>\r\n    <div class=\"content\">\r\n        <p style=\"font-size: 18px; font-weight: bold; color: black;\">Jnco Jeans<\/p>\r\n     <p style=\"color: blue;\">\r\n        <a href=\"https:\/\/jnco.com\/?srsltid=AfmBOorqt27fg4gZ5uKc4hc4LPbKMFtMgxb6nstp-zus-YVLUdBk68Pw\" target=\"_blank\" onclick=\"event.stopPropagation();\">\r\n        https:\/\/jnco.com\/\r\n        <\/a>\r\n      <\/p>\r\n       <p style=\"font-size: 14px\">\r\n        Refer\u00e8ncia m\u00e9s diferent, est\u00e8tica m\u00e9s grafitera, baggy i skater inspirada en els anys 2000 i en peces m\u00e9s exagerades i cridaneres.\r\n       <\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"overlay\" onclick=\"closeBubble()\"><\/div>\r\n\r\n<style>\r\nbody {\r\n  margin: 0;\r\n  overflow-x: hidden;\r\n  font-family: sans-serif;\r\n}\r\n\r\n.floating-container {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100vh;\r\n}\r\n\r\n\/* BURBUJAS *\/\r\n.bubble {\r\n  position: absolute;\r\n  width: 280px;\r\n  height: 380px;\r\n  border-radius: 25px;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);\r\n  box-shadow: 0 20px 40px rgba(0,0,0,0.15);\r\n  background: white;\r\n}\r\n\r\n\/* POSICIONES *\/\r\n.b1 { top: 15%; left: 12%; z-index: 3; }\r\n.b2 { top: 55%; left: 25%; z-index: 5; }\r\n.b3 { top: 25%; left: 45%; z-index: 2; }\r\n.b4 { top: 65%; left: 60%; z-index: 4; }\r\n.b5 { top: 35%; left: 75%; z-index: 6; }\r\n\r\n\/* IM\u00c1GENES *\/\r\n.bubble img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: contain;\r\n  background: white;\r\n}\r\n\r\n\/* TEXTO *\/\r\n.bubble .content {\r\n  display: none;\r\n}\r\n\r\n\/* ANIMACIONES *\/\r\n.b1 { animation: float1 18s ease-in-out infinite; }\r\n.b2 { animation: float2 20s ease-in-out infinite; }\r\n.b3 { animation: float3 19s ease-in-out infinite; }\r\n.b4 { animation: float4 21s ease-in-out infinite; }\r\n.b5 { animation: float5 17s ease-in-out infinite; }\r\n\r\n@keyframes float1 {\r\n  0%   { transform: translate(0,0) rotate(-6deg); }\r\n  25%  { transform: translate(120px,-60px) rotate(-2deg); }\r\n  50%  { transform: translate(-80px,-140px) rotate(-8deg); }\r\n  75%  { transform: translate(90px,-40px) rotate(-3deg); }\r\n  100% { transform: translate(0,0) rotate(-6deg); }\r\n}\r\n\r\n@keyframes float2 {\r\n  0%   { transform: translate(0,0) rotate(4deg); }\r\n  25%  { transform: translate(-130px,-50px) rotate(7deg); }\r\n  50%  { transform: translate(90px,-150px) rotate(2deg); }\r\n  75%  { transform: translate(-60px,-60px) rotate(5deg); }\r\n  100% { transform: translate(0,0) rotate(4deg); }\r\n}\r\n\r\n@keyframes float3 {\r\n  0%   { transform: translate(0,0) rotate(-3deg); }\r\n  25%  { transform: translate(140px,-70px) rotate(1deg); }\r\n  50%  { transform: translate(-90px,-160px) rotate(-6deg); }\r\n  75%  { transform: translate(80px,-50px) rotate(-2deg); }\r\n  100% { transform: translate(0,0) rotate(-3deg); }\r\n}\r\n\r\n@keyframes float4 {\r\n  0%   { transform: translate(0,0) rotate(6deg); }\r\n  25%  { transform: translate(-140px,-60px) rotate(9deg); }\r\n  50%  { transform: translate(80px,-140px) rotate(3deg); }\r\n  75%  { transform: translate(-90px,-40px) rotate(7deg); }\r\n  100% { transform: translate(0,0) rotate(6deg); }\r\n}\r\n\r\n@keyframes float5 {\r\n  0%   { transform: translate(0,0) rotate(-5deg); }\r\n  25%  { transform: translate(130px,-70px) rotate(-1deg); }\r\n  50%  { transform: translate(-70px,-150px) rotate(-7deg); }\r\n  75%  { transform: translate(100px,-30px) rotate(-4-deg); }\r\n  100% { transform: translate(0,0) rotate(-5deg); }\r\n}\r\n\r\n\/* OVERLAY *\/\r\n.overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  display: none;\r\n  backdrop-filter: blur(8px);\r\n  background: rgba(0,0,0,0.4);\r\n  z-index: 10;\r\n}\r\n\r\n\/* ACTIVO *\/\r\n.bubble.active {\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  width: 500px;\r\n  transform: translate(-50%, -50%);\r\n  z-index: 20;\r\n  animation: none;\r\n  background: white;\r\n  border-radius: 30px;\r\n  box-shadow: 0 30px 80px rgba(0,0,0,0.25);\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n\/* IMAGEN GRANDE *\/\r\n.bubble.active img {\r\n  height: 260px;\r\n  object-fit: contain;\r\n}\r\n\r\n\/* TEXTO *\/\r\n.bubble.active .content {\r\n  display: block;\r\n  padding: 15px 20px;\r\n  color: #333;\r\n}\r\n\r\n.bubble.active .content p {\r\n  margin: 0;\r\n  font-size: 18px;\r\n}\r\n<\/style>\r\n\r\n<script>\r\nfunction openBubble(el) {\r\n  \/\/ Primero cerramos cualquier otra burbuja activa para evitar bugs con las im\u00e1genes\r\n  closeBubble();\r\n\r\n  const img = el.querySelector('img');\r\n  const activeSrc = img.getAttribute('data-active-src');\r\n\r\n  if (activeSrc) {\r\n    \/\/ Guardamos la imagen flotante original para no perderla\r\n    img.setAttribute('data-original-src', img.src);\r\n    \/\/ Cambiamos a la nueva imagen de interior\r\n    img.src = activeSrc;\r\n  }\r\n\r\n  el.classList.add('active');\r\n  document.querySelector('.overlay').style.display = 'block';\r\n}\r\n\r\nfunction closeBubble() {\r\n  document.querySelectorAll('.bubble.active').forEach(b => {\r\n    const img = b.querySelector('img');\r\n    const originalSrc = img.getAttribute('data-original-src');\r\n    \r\n    if (originalSrc) {\r\n      \/\/ Devolvemos la imagen original al cerrar\r\n      img.src = originalSrc;\r\n    }\r\n    b.classList.remove('active');\r\n  });\r\n  \r\n  document.querySelector('.overlay').style.display = 'none';\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-0865ddf e-flex e-con-boxed e-con e-parent\" data-id=\"0865ddf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t\n<hr class=\"e-14050ef-c074aea e-divider-base\" data-interaction-id=\"14050ef\"   \/>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff606e0 elementor-widget elementor-widget-html\" data-id=\"ff606e0\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"proces\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"typing-container\">\r\n  <!-- He a\u00f1adido una variable CSS (--letters: 6) para calcular los pasos exactos -->\r\n  <h2 class=\"typing-effect\" data-text=\"Proc\u00e9s\" style=\"--letters: 6;\"><\/h2>\r\n<\/div>\r\n\r\n<style>\r\n\/* Importamos una tipograf\u00eda cuadrada (monoespaciada) y muy bold desde Google Fonts *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto+Mono:wght@900&display=swap');\r\n\r\n.typing-container {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  margin: 40px 0; \/* M\u00e1s margen para el tama\u00f1o de letra *\/\r\n}\r\n\r\n.typing-effect {\r\n  \/* 1. TIPOGRAF\u00cdA M\u00c1S CUADRADA Y BOLD *\/\r\n  font-family: 'Roboto Mono', monospace; \/* Tipograf\u00eda sans-serif monoespaciada *\/\r\n  font-weight: 900; \/* Extra-bold *\/\r\n  \r\n  \/* 2. TIPOGRAF\u00cdA M\u00c1S GRANDE *\/\r\n  font-size: 10rem; \/* Tama\u00f1o mucho mayor *\/\r\n  \r\n  \/* Mantener el color rojo y los estilos base *\/\r\n  color: #ff0000;\r\n  margin: 0;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  border-right: none;\r\n  width: 0;\r\n}\r\n\r\n.typing-effect.start-typing {\r\n  \/* 3. EFECTO DE ESCRIBIR M\u00c1S LENTO (5s) *\/\r\n  \/* He ajustado los steps al n\u00famero de letras (6) para que la animaci\u00f3n sea perfecta *\/\r\n  animation: typing 5s steps(var(--letters), end) forwards;\r\n}\r\n\r\n@keyframes typing {\r\n  from { width: 0; }\r\n  \/* Usamos calc() y la unidad ch (ancho del car\u00e1cter) para el final exacto *\/\r\n  to { width: calc(var(--letters) * 1ch); }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ El JavaScript permanece igual, ya que su funci\u00f3n es detectar la visibilidad.\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  const observerOptions = {\r\n    threshold: 0.5\r\n  };\r\n\r\n  const observer = new IntersectionObserver((entries, observer) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        const target = entry.target;\r\n        target.textContent = target.getAttribute('data-text');\r\n        target.classList.add('start-typing');\r\n        observer.unobserve(target);\r\n      }\r\n    });\r\n  }, observerOptions);\r\n\r\n  const titles = document.querySelectorAll('.typing-effect');\r\n  titles.forEach(title => observer.observe(title));\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-d79c45d e-flex e-con-boxed e-con e-parent\" data-id=\"d79c45d\" 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-f5ea201 elementor-widget elementor-widget-html\" data-id=\"f5ea201\" 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>Listado Interactivo Horizontal<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@900&display=swap\" rel=\"stylesheet\">\r\n  <link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n\r\n  <div class=\"li-wrap\" id=\"liWrap\">\r\n    <ul class=\"li-list\" id=\"liList\">\r\n      <li class=\"li-item\" data-img-left=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/D7AFB3D1-DCE0-46B7-8B03-6D91921F0C0E.jpg, https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/E1BB168A-1F3E-4AFE-AD58-0AC7A13B69E8.jpg\">\r\n        <span class=\"li-word\">Ideaci\u00f3<\/span>\r\n      <\/li>\r\n      <li class=\"li-item\" data-img-left=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/7420E80A-A834-4E48-9428-6434DE7146FC.jpg, https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/AFBFF26B-55E9-476A-AC69-4FEF528E2267.jpg, https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/18DDE70D-782A-4080-B7C4-D14F77F66884.jpg, https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/F5F7C80A-8A32-4EEE-83C4-9F9D5EEE7AAF.jpg, https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/576B2C4D-6081-4E93-A732-9D31E4305223.jpg, https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/A08FF51C-FDB2-4866-8193-CF54FC79C3CC.jpg\">\r\n        <span class=\"li-word\">Wireframe<\/span>\r\n      <\/li>\r\n      <li class=\"li-item\" data-img-left=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/mokup-at104-entero_page-0001-1.jpg \">\r\n        <span class=\"li-word\">Mockup<\/span>\r\n      <\/li>\r\n      <li class=\"li-item\" data-img-left=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/49F2A092-23DC-4DD4-834F-843BCB31BB30.jpg, https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/150ACDA6-72DF-4883-B6A0-8B1CB7ECA859.jpg, https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/06C019E6-B991-4C90-BB34-DCB53B6C3606.jpg, https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/7136DC36-E767-4DA0-BD01-1A1441755641.jpg, https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/A7C967E8-4431-4832-9BCB-C20EA9E71FD3.jpg, https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/ADD1CF1F-A100-49C1-B0D5-E7048C505B11.jpg\">\r\n        <span class=\"li-word\">Gui\u00f3 d'interacci\u00f3<\/span>\r\n      <\/li>\r\n      <li class=\"li-item\" data-img-left=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/65372A1B-01FB-4BDD-B280-BB8E5E3F4484.jpg\">\r\n        <span class=\"li-word\">Maquetaci\u00f3 final<\/span>\r\n      <\/li>\r\n    <\/ul>\r\n\r\n    <div class=\"li-img li-img-right\" id=\"liImgLeft\">\r\n      <div class=\"blur-layer\" id=\"liImgLeftSrc\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script src=\"script.js\"><\/script>\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-5f61ee3 e-flex e-con-boxed e-con e-parent\" data-id=\"5f61ee3\" 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-2909edf elementor-widget elementor-widget-html\" data-id=\"2909edf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"typing-container\">\r\n  <h2 class=\"typing-effect\" data-text=\"Creaci\u00f3 de la marca\"><\/h2>\r\n<\/div>\r\n\r\n<style>\r\n.typing-container {\r\n  display: flex;\r\n  justify-content: flex-start; \r\n  margin: 20px 0;\r\n}\r\n\r\n.typing-effect {\r\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n  font-size: 2.5rem;\r\n  font-weight: bold;\r\n  \/* Cambio a color rojo *\/\r\n  color: #ff0000; \r\n  margin: 0;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  \/* Eliminamos el borde que hac\u00eda de cursor *\/\r\n  border-right: none; \r\n  width: 0;\r\n}\r\n\r\n.typing-effect.start-typing {\r\n  \/* Ahora solo ejecutamos la animaci\u00f3n de escritura *\/\r\n  animation: typing 2s steps(40, end) forwards;\r\n}\r\n\r\n@keyframes typing {\r\n  from { width: 0 }\r\n  to { width: 100% }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  const observerOptions = {\r\n    threshold: 0.5 \r\n  };\r\n\r\n  const observer = new IntersectionObserver((entries, observer) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        const target = entry.target;\r\n        target.textContent = target.getAttribute('data-text');\r\n        target.classList.add('start-typing');\r\n        observer.unobserve(target);\r\n      }\r\n    });\r\n  }, observerOptions);\r\n\r\n  const titles = document.querySelectorAll('.typing-effect');\r\n  titles.forEach(title => observer.observe(title));\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-143ad17 elementor-widget elementor-widget-html\" data-id=\"143ad17\" 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>Proceso Creativo<\/title>\r\n  <link rel=\"stylesheet\" href=\"accordion-marca.css\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n\r\n<!-- =============================================\r\n     SECCI\u00d3N: PROCESO CREATIVO\r\n     Para usar en WordPress: pega este bloque\r\n     dentro de un bloque HTML personalizado.\r\n     Aseg\u00farate de enlazar accordion-marca.css\r\n     y accordion-marca.js en tu tema o plugin.\r\n============================================= -->\r\n\r\n<section class=\"acc-section\" aria-label=\"Proceso creativo de la marca\">\r\n\r\n  <h2 class=\"acc-heading\"><\/h2>\r\n  <p class=\"acc-sub\"><\/p>\r\n\r\n  <div class=\"acc-container\" id=\"accContainer\">\r\n\r\n    <!-- TARJETA 1: Bocetos del logo -->\r\n    <div class=\"acc-card\" role=\"button\" tabindex=\"0\" aria-label=\"Bocetos del logo\">\r\n      <!-- IMAGEN: reemplaza 'TU-IMAGEN-1.jpg' con la URL de tu imagen -->\r\n      <img decoding=\"async\" class=\"acc-image\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-19-at-09.29.26.jpeg\" alt=\"Bocetos del logo\" loading=\"lazy\">\r\n      <div class=\"acc-overlay\"><\/div>\r\n      <span class=\"acc-num\" aria-hidden=\"true\">01<\/span>\r\n      <div class=\"acc-label-vertical\" aria-hidden=\"true\"><span>esborranys logo<\/span><\/div>\r\n      <div class=\"acc-content\">\r\n        <span class=\"acc-tag\">Identitat<\/span>\r\n        <h3 class=\"acc-title\">Esborranys logo<\/h3>\r\n        <p class=\"acc-desc\">Les primeras idees sobre la marca visual.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- TARJETA 2: El logo -->\r\n    <div class=\"acc-card\" role=\"button\" tabindex=\"0\" aria-label=\"El logo\">\r\n      <!-- IMAGEN: reemplaza 'TU-IMAGEN-2.jpg' con la URL de tu imagen -->\r\n      <img decoding=\"async\" class=\"acc-image\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/8484ECB0-E17C-4F58-AF8A-3DB5831C57EE.png\" alt=\"Logo de la marca\" loading=\"lazy\">\r\n      <div class=\"acc-overlay\"><\/div>\r\n      <span class=\"acc-num\" aria-hidden=\"true\">02<\/span>\r\n      <div class=\"acc-label-vertical\" aria-hidden=\"true\"><span>Logo<\/span><\/div>\r\n      <div class=\"acc-content\">\r\n        <span class=\"acc-tag\">Identitat<\/span>\r\n        <h3 class=\"acc-title\">El logo<\/h3>\r\n        <p class=\"acc-desc\">El resultat final: el s\u00edmbol que representa la marca.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- TARJETA 3: Colores de la marca -->\r\n    <div class=\"acc-card\" role=\"button\" tabindex=\"0\" aria-label=\"Colores de la marca\">\r\n      <!-- IMAGEN: reemplaza 'TU-IMAGEN-3.jpg' con la URL de tu imagen -->\r\n      <img decoding=\"async\" class=\"acc-image\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/845B96FF-196F-4300-9DAD-632E4D23232E.jpg\" alt=\"Paleta de colores de la marca\" loading=\"lazy\">\r\n      <div class=\"acc-overlay\"><\/div>\r\n      <span class=\"acc-num\" aria-hidden=\"true\">03<\/span>\r\n      <div class=\"acc-label-vertical\" aria-hidden=\"true\"><span>Colors<\/span><\/div>\r\n      <div class=\"acc-content\">\r\n        <span class=\"acc-tag\">Identitat<\/span>\r\n        <h3 class=\"acc-title\">Colors de la marca<\/h3>\r\n        <p class=\"acc-desc\">La paleta crom\u00e1tica que defineix la personalitat de la marca.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- TARJETA 4: Bocetos de la ropa -->\r\n    <div class=\"acc-card\" role=\"button\" tabindex=\"0\" aria-label=\"Bocetos de la ropa\">\r\n      <!-- IMAGEN: reemplaza 'TU-IMAGEN-4.jpg' con la URL de tu imagen -->\r\n      <img decoding=\"async\" class=\"acc-image\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/94738653-ACD9-407B-B0F7-05564C198196.png\" alt=\"Bocetos de la ropa\" loading=\"lazy\">\r\n      <div class=\"acc-overlay\"><\/div>\r\n      <span class=\"acc-num\" aria-hidden=\"true\">04<\/span>\r\n      <div class=\"acc-label-vertical\" aria-hidden=\"true\"><span>Creaci\u00f3 roba<\/span><\/div>\r\n      <div class=\"acc-content\">\r\n        <span class=\"acc-tag\">Disseny<\/span>\r\n        <h3 class=\"acc-title\">Creaci\u00f3 de la roba<\/h3>\r\n        <p class=\"acc-desc\">El proc\u00e9s de la creaci\u00f3 de les prendes.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- TARJETA 5: La ropa -->\r\n    <div class=\"acc-card\" role=\"button\" tabindex=\"0\" aria-label=\"La ropa\">\r\n      <!-- IMAGEN: reemplaza 'TU-IMAGEN-5.jpg' con la URL de tu imagen -->\r\n      <img decoding=\"async\" class=\"acc-image\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/FE967C3B-5A72-492C-B9BF-6EAE8866D679.jpg\" alt=\"La colecci\u00f3n de ropa\" loading=\"lazy\">\r\n      <div class=\"acc-overlay\"><\/div>\r\n      <span class=\"acc-num\" aria-hidden=\"true\">05<\/span>\r\n      <div class=\"acc-label-vertical\" aria-hidden=\"true\"><span>La roba<\/span><\/div>\r\n      <div class=\"acc-content\">\r\n        <span class=\"acc-tag\">Colecci\u00f3<\/span>\r\n        <h3 class=\"acc-title\">La roba<\/h3>\r\n        <p class=\"acc-desc\">La colecci\u00f3 final: cada prenda amb el seu disseny, materials i acabats definitius.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script src=\"accordion-marca.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\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-ee7ea98 e-flex e-con-boxed e-con e-parent\" data-id=\"ee7ea98\" 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-52eddae elementor-widget elementor-widget-html\" data-id=\"52eddae\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"fanzine\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"typing-container\">\r\n  <h2 class=\"typing-effect\" data-text=\"Fanzine\"><\/h2>\r\n<\/div>\r\n\r\n<style>\r\n.typing-container {\r\n  display: flex;\r\n  justify-content: flex-start; \r\n  margin: 20px 0;\r\n}\r\n\r\n.typing-effect {\r\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n  font-size: 2.5rem;\r\n  font-weight: bold;\r\n  \/* Cambio a color rojo *\/\r\n  color: #ff0000; \r\n  margin: 0;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  \/* Eliminamos el borde que hac\u00eda de cursor *\/\r\n  border-right: none; \r\n  width: 0;\r\n}\r\n\r\n.typing-effect.start-typing {\r\n  \/* Ahora solo ejecutamos la animaci\u00f3n de escritura *\/\r\n  animation: typing 2s steps(40, end) forwards;\r\n}\r\n\r\n@keyframes typing {\r\n  from { width: 0 }\r\n  to { width: 100% }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  const observerOptions = {\r\n    threshold: 0.5 \r\n  };\r\n\r\n  const observer = new IntersectionObserver((entries, observer) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        const target = entry.target;\r\n        target.textContent = target.getAttribute('data-text');\r\n        target.classList.add('start-typing');\r\n        observer.unobserve(target);\r\n      }\r\n    });\r\n  }, observerOptions);\r\n\r\n  const titles = document.querySelectorAll('.typing-effect');\r\n  titles.forEach(title => observer.observe(title));\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46f4483 elementor-widget elementor-widget-html\" data-id=\"46f4483\" 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>Escritorio interactivo<\/title>\r\n\r\n<style>\r\n  * {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  body, html {\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow-x: hidden;\r\n    font-family: Arial, sans-serif;\r\n  }\r\n\r\n  \/* ===== FONDO ESCRITORIO ===== *\/\r\n  .hero {\r\n    width: 100%;\r\n    height: 90vh;\r\n    background-image: url(\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Gemini_Generated_Image_cr1xyucr1xyucr1x-2.png\");\r\n    background-size: cover;\r\n    background-position: center;\r\n    position: relative;\r\n\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  \/* oscurecer un poco para contraste *\/\r\n  .hero::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: rgba(0,0,0,0.10);\r\n  }\r\n\r\n  \/* ===== FOLIO (IMAGEN CLICABLE) ===== *\/\r\n  .folio {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: inline-block;\r\n    cursor: pointer;\r\n    transition: transform 0.25s ease;\r\n  }\r\n\r\n  .folio img {\r\n    width: 300px;\r\n    height: auto;\r\n    border-radius: 6px;\r\n    box-shadow: 0 20px 40px rgba(0,0,0,0.35);\r\n    display: block;\r\n  }\r\n\r\n  \/* hover zoom *\/\r\n  .folio:hover {\r\n    transform: scale(1.08);\r\n  }\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<section class=\"hero\">\r\n\r\n  <!-- EL CAMBIO EST\u00c1 EN ESTA L\u00cdNEA (target=\"_blank\") -->\r\n  <a class=\"folio\" href=\"https:\/\/indd.adobe.com\/view\/93385c04-6865-4a0f-93b7-5b6f5a7cd793\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n    <img decoding=\"async\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/B1B8F2F2-9B0A-4F47-A586-CA6BB433D36D.png\" alt=\"Documento\">\r\n  <\/a>\r\n\r\n<\/section>\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-296d1de e-flex e-con-boxed e-con e-parent\" data-id=\"296d1de\" 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-5ca8d2e elementor-widget elementor-widget-html\" data-id=\"5ca8d2e\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"video\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"typing-container\">\r\n  <h2 class=\"typing-effect\" data-text=\"Video Tour\"><\/h2>\r\n<\/div>\r\n\r\n<style>\r\n.typing-container {\r\n  display: flex;\r\n  justify-content: flex-start; \r\n  margin: 20px 0;\r\n}\r\n\r\n.typing-effect {\r\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n  font-size: 2.5rem;\r\n  font-weight: bold;\r\n  \/* Cambio a color rojo *\/\r\n  color: #ff0000; \r\n  margin: 0;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  \/* Eliminamos el borde que hac\u00eda de cursor *\/\r\n  border-right: none; \r\n  width: 0;\r\n}\r\n\r\n.typing-effect.start-typing {\r\n  \/* Ahora solo ejecutamos la animaci\u00f3n de escritura *\/\r\n  animation: typing 2s steps(40, end) forwards;\r\n}\r\n\r\n@keyframes typing {\r\n  from { width: 0 }\r\n  to { width: 100% }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  const observerOptions = {\r\n    threshold: 0.5 \r\n  };\r\n\r\n  const observer = new IntersectionObserver((entries, observer) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        const target = entry.target;\r\n        target.textContent = target.getAttribute('data-text');\r\n        target.classList.add('start-typing');\r\n        observer.unobserve(target);\r\n      }\r\n    });\r\n  }, observerOptions);\r\n\r\n  const titles = document.querySelectorAll('.typing-effect');\r\n  titles.forEach(title => observer.observe(title));\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-815de8f elementor-widget elementor-widget-html\" data-id=\"815de8f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"lupa-wrapper\" id=\"lupaSection\">\r\n    <!-- Capa 1: El video de YouTube (estar\u00e1 debajo) -->\r\n    <div class=\"video-background\">\r\n        <div id=\"player\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Capa 2: El \"Velo\" negro con el agujero -->\r\n    <div class=\"lupa-overlay\" id=\"lupaOverlay\">\r\n        <div class=\"lupa-circle\" id=\"lupaCircle\">\r\n            <span class=\"lupa-label\">CLICK<\/span>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.lupa-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 600px;\r\n    background: #000;\r\n    overflow: hidden;\r\n    cursor: none;\r\n}\r\n\r\n.video-background {\r\n    position: absolute;\r\n    top: 0; left: 0;\r\n    width: 100%; height: 100%;\r\n    pointer-events: none;\r\n}\r\n\r\n#player {\r\n    width: 100%; height: 100%;\r\n    transform: scale(1.1);\r\n}\r\n\r\n.lupa-overlay {\r\n    position: absolute;\r\n    top: 0; left: 0;\r\n    width: 100%; height: 100%;\r\n    z-index: 10;\r\n    background: radial-gradient(\r\n        circle 100px at var(--x, 50%) var(--y, 50%), \r\n        transparent 99%, \r\n        rgba(0, 0, 0, 0.95) 100%\r\n    );\r\n    pointer-events: auto;\r\n    transition: opacity 0.8s ease;\r\n}\r\n\r\n.lupa-circle {\r\n    position: absolute;\r\n    width: 200px; height: 200px;\r\n    border: 2px solid #ff0000;\r\n    border-radius: 50%;\r\n    top: var(--y, 50%);\r\n    left: var(--x, 50%);\r\n    transform: translate(-50%, -50%);\r\n    pointer-events: none;\r\n    display: flex; align-items: center; justify-content: center;\r\n}\r\n\r\n.lupa-label {\r\n    color: white; font-family: sans-serif; font-size: 10px; letter-spacing: 2px; font-weight: bold;\r\n}\r\n\r\n.lupa-wrapper.active .lupa-overlay {\r\n    opacity: 0;\r\n    pointer-events: none;\r\n}\r\n.lupa-wrapper.active {\r\n    cursor: default;\r\n}\r\n<\/style>\r\n\r\n<script>\r\nvar tag = document.createElement('script');\r\ntag.src = \"https:\/\/www.youtube.com\/iframe_api\";\r\nvar firstScriptTag = document.getElementsByTagName('script')[0];\r\nfirstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n\r\nvar player;\r\nfunction onYouTubeIframeAPIReady() {\r\n    player = new YT.Player('player', {\r\n        videoId: 'sjIramXczmQ', \r\n        playerVars: { \r\n            'autoplay': 0, \/\/ No arranca solo\r\n            'mute': 0,     \/\/ Empieza con sonido (ya que requiere click)\r\n            'controls': 1, \r\n            'rel': 0,\r\n            'showinfo': 0\r\n        }\r\n    });\r\n}\r\n\r\nconst wrapper = document.getElementById('lupaSection');\r\n\r\nwrapper.addEventListener('mousemove', e => {\r\n    if (wrapper.classList.contains('active')) return;\r\n    const rect = wrapper.getBoundingClientRect();\r\n    const x = e.clientX - rect.left;\r\n    const y = e.clientY - rect.top;\r\n    \r\n    wrapper.style.setProperty('--x', x + 'px');\r\n    wrapper.style.setProperty('--y', y + 'px');\r\n});\r\n\r\nwrapper.addEventListener('click', () => {\r\n    if (!wrapper.classList.contains('active')) {\r\n        wrapper.classList.add('active');\r\n        player.playVideo(); \/\/ Arranca el video al hacer clic\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-58183cf e-flex e-con-boxed e-con e-parent\" data-id=\"58183cf\" 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-821f4d7 elementor-widget elementor-widget-html\" data-id=\"821f4d7\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"conclusions\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"typing-container\">\r\n  <h2 class=\"typing-effect\" data-text=\"Conclusi\u00f3\"><\/h2>\r\n<\/div>\r\n\r\n<style>\r\n.typing-container {\r\n  display: flex;\r\n  justify-content: center; \r\n  margin: 20px 0;\r\n  width: 100%;\r\n  \/* --- NUEVAS PROPIEDADES --- *\/\r\n  position: relative; \/* Necesario para que z-index funcione *\/\r\n  z-index: 999;       \/* Un valor alto para que flote sobre lo dem\u00e1s *\/\r\n}\r\n\r\n.typing-effect {\r\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n  font-size: 3.5rem; \r\n  font-weight: bold;\r\n  color: #ff0000; \r\n  margin: 0;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  border-right: none; \r\n  width: 0;\r\n  text-align: center;\r\n  line-height: 1.2;\r\n}\r\n\r\n.typing-effect.start-typing {\r\n  animation: typing 2s steps(40, end) forwards;\r\n}\r\n\r\n@keyframes typing {\r\n  from { width: 0 }\r\n  to { width: 100% } \r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  const observerOptions = {\r\n    threshold: 0.5 \r\n  };\r\n\r\n  const observer = new IntersectionObserver((entries, observer) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        const target = entry.target;\r\n        target.textContent = target.getAttribute('data-text');\r\n        target.classList.add('start-typing');\r\n        observer.unobserve(target);\r\n      }\r\n    });\r\n  }, observerOptions);\r\n\r\n  const titles = document.querySelectorAll('.typing-effect');\r\n  titles.forEach(title => observer.observe(title));\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-630525b e-transform elementor-widget elementor-widget-html\" data-id=\"630525b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_translateX_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-73,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =============================================\r\n   conclusiones.html \u2014 VERSI\u00d3N ELEMENTOR\r\n   Pega todo esto en un widget \"HTML\" de Elementor\r\n   CSS \u2192 Elementor > Personalizar > CSS adicional\r\n   JS  \u2192 Plugin \"Header Footer Code Manager\" antes del <\/body>\r\n============================================= -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@300;400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<div class=\"con-wrap\" id=\"conWrap\">\r\n  <p class=\"con-title\"><\/p>\r\n\r\n  <div class=\"con-scene-wrap\">\r\n    <div class=\"con-scene\">\r\n      <div class=\"con-carousel\" id=\"conCarousel\">\r\n\r\n        <!-- TARJETA 1\r\n             Para cambiar el t\u00edtulo: edita \"Primera reflexi\u00f3n\" aqu\u00ed y en el JS -->\r\n        <div class=\"con-card\" data-index=\"0\">\r\n          <div class=\"con-card-inner\">\r\n            <div class=\"con-line\"><\/div>\r\n            <span class=\"con-num\">01<\/span>\r\n            <span class=\"con-tag\">Conclusi\u00f3<\/span>\r\n            <span class=\"con-label\">Reflexi\u00f3<br><\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- TARJETA 2 -->\r\n        <div class=\"con-card\" data-index=\"1\">\r\n          <div class=\"con-card-inner\">\r\n            <div class=\"con-line\"><\/div>\r\n            <span class=\"con-num\">02<\/span>\r\n            <span class=\"con-tag\">Conclusi\u00f3<\/span>\r\n            <span class=\"con-label\">Aprenentatges<br><\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- TARJETA 3 -->\r\n        <div class=\"con-card\" data-index=\"2\">\r\n          <div class=\"con-card-inner\">\r\n            <div class=\"con-line\"><\/div>\r\n            <span class=\"con-num\">03<\/span>\r\n            <span class=\"con-tag\">Conclusi\u00f3<\/span>\r\n            <span class=\"con-label\">Valoraci\u00f3<br><\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n      <div class=\"con-glow\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"con-hint\" id=\"conHint\">\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\">\r\n      <path d=\"M7 12H3m0 0l4-4m-4 4l4 4M17 12h4m0 0l-4-4m4 4l-4 4\"\/>\r\n    <\/svg>\r\n    Arrosegar per girar \u00b7 Click per llegir\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- MODAL \u2014 fuera del wrap para no quedar cortado -->\r\n<div class=\"con-modal-bg\" id=\"conModalBg\" role=\"dialog\" aria-modal=\"true\">\r\n  <div class=\"con-modal\" id=\"conModal\">\r\n    <button class=\"con-close\" id=\"conClose\" aria-label=\"Cerrar\">\u2715<\/button>\r\n    <div class=\"con-modal-line\"><\/div>\r\n    <span class=\"con-modal-tag\" id=\"conModalTag\"><\/span>\r\n    <h2 class=\"con-modal-title\" id=\"conModalTitle\"><\/h2>\r\n    <!-- El p\u00fablico lee este texto \u2014 ed\u00edtalo en el JS -->\r\n    <p class=\"con-modal-text\" id=\"conModalText\"><\/p>\r\n    <div class=\"con-modal-footer\">Click fora per tancar<\/div>\r\n  <\/div>\r\n<\/div>\r\n\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-95aa9a2 e-flex e-con-boxed e-con e-parent\" data-id=\"95aa9a2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dd1b53d e-transform e-flex e-con-boxed e-con e-parent\" data-id=\"dd1b53d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_transform_scale_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.1,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8fb67fc e-con-full e-flex e-con e-child\" data-id=\"8fb67fc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-15a661a e-transform elementor-widget elementor-widget-image\" data-id=\"15a661a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_translateX_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-232,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-12,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.25019.ooteca.artedra.net\/wp-content\/uploads\/elementor\/thumbs\/at-cm-lgo-5-rmyai015okpp0bgeoe1sovl17atbnqe379k950m93m.png\" title=\"at cm lgo\" alt=\"at cm lgo\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-51bf6aa e-con-full e-flex e-con e-child\" data-id=\"51bf6aa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t\t\t\t<p class=\"e-35577a7-e439f7f e-paragraph-base\" data-interaction-id=\"35577a7\"  >\n\t\t\t\t\t\t\t\tSam Ortiz Corchero<br>Apgi 2\n\t\t\t\t\t<\/p>\n\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>Referents Proc\u00e9s Fanzine Video Tour Conclusions La idea principal \u00e9s desenvolupar un fanzine en format revista sobre la marca inventada Atelion Commune 104, centrada en roba estil archive swag, on la publicaci\u00f3 reflecteix aquest desordre creatiu, una est\u00e8tica experimental i un enfocament innovador. Maison Margiela https:\/\/www.maisonmargiela.com Desordre i deconstrucci\u00f3, amb una est\u00e8tica d\u2019arxiu on l\u2019anonimat [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.25019.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.25019.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.25019.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.25019.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.25019.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":376,"href":"https:\/\/www.25019.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":592,"href":"https:\/\/www.25019.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/592"}],"wp:attachment":[{"href":"https:\/\/www.25019.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}