{"id":52,"date":"2026-05-12T21:58:15","date_gmt":"2026-05-12T19:58:15","guid":{"rendered":"https:\/\/25007.ooteca.artedra.net\/?page_id=52"},"modified":"2026-05-21T10:27:59","modified_gmt":"2026-05-21T08:27:59","slug":"elementor-52","status":"publish","type":"page","link":"https:\/\/25007.ooteca.artedra.net\/","title":{"rendered":"Elementor #52"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"52\" class=\"elementor elementor-52\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9462797 e-flex e-con-boxed e-con e-parent\" data-id=\"9462797\" 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-11bbd3f elementor-widget elementor-widget-html\" data-id=\"11bbd3f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Inter:wght@400;700;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<div class=\"caja-imagen-fondo\">\r\n  <div class=\"contenido-hero\">\r\n    <h1 class=\"texto-animado-dinamico\">HISTORY OS<\/h1>\r\n    \r\n    <p class=\"subtitulo-animado\">Explora l'evoluci\u00f3 del disseny i les tend\u00e8ncies a trav\u00e9s d'un escriptori interactiu.<\/p>\r\n    \r\n    <a href=\"#seccion-concepto\" class=\"boton-animado\">Comencem<\/a>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Estilos para el contenedor principal *\/\r\n.caja-imagen-fondo {\r\n  \/* A\u00f1adido un degradado (linear-gradient) para oscurecer un poco el fondo y resaltar el texto *\/\r\n  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('https:\/\/frutigeraeroarchive.org\/images\/wallpapers\/mac_os\/mac_os_37.jpg');\r\n  background-size: cover;\r\n  background-position: center;\r\n  \/* Cambiado a min-height y viewport height para adaptarse mejor a la pantalla completa *\/\r\n  min-height: 700px;\r\n  height: 100vh; \r\n  display: flex;\r\n  align-items: center; \r\n  justify-content: center; \r\n  overflow: hidden; \r\n  padding: 20px; \/* Margen de seguridad para m\u00f3viles *\/\r\n}\r\n\r\n\/* Contenedor para alinear los elementos en columna *\/\r\n.contenido-hero {\r\n  text-align: center;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 20px; \/* Espacio entre t\u00edtulo, subt\u00edtulo y bot\u00f3n *\/\r\n}\r\n\r\n\/* Estilos y animaci\u00f3n para el texto principal *\/\r\n.texto-animado-dinamico {\r\n  font-family: 'Inter', sans-serif; \r\n  font-weight: 900; \r\n  color: #ffffff; \r\n  \/* Responsive: M\u00ednimo 3rem, ideal 8vw, m\u00e1ximo 6rem *\/\r\n  font-size: clamp(3rem, 8vw, 6rem); \r\n  margin: 0;\r\n  letter-spacing: -2px; \r\n  text-shadow: \r\n    0px 10px 20px rgba(0,0,0,0.8),\r\n    0px 0px 15px rgba(100, 200, 255, 0.7);\r\n  opacity: 0; \r\n  animation: \r\n    entrarConRebote 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,\r\n    flotarSuave 3s ease-in-out 1s infinite alternate; \r\n}\r\n\r\n\/* Estilos para el nuevo subt\u00edtulo *\/\r\n.subtitulo-animado {\r\n  font-family: 'Inter', sans-serif;\r\n  font-weight: 400;\r\n  color: #e0e0e0;\r\n  font-size: clamp(1.2rem, 3vw, 1.5rem);\r\n  max-width: 600px;\r\n  margin: 0;\r\n  opacity: 0;\r\n  \/* Entra un poco despu\u00e9s del t\u00edtulo *\/\r\n  animation: aparecerArriba 1s ease forwards 0.4s; \r\n}\r\n\r\n\/* Estilos para el nuevo bot\u00f3n *\/\r\n.boton-animado {\r\n  font-family: 'Inter', sans-serif;\r\n  font-weight: 700;\r\n  text-decoration: none;\r\n  color: #fff;\r\n  background: linear-gradient(135deg, #007bff, #0056b3); \/* Azul tecnol\u00f3gico *\/\r\n  padding: 15px 35px;\r\n  border-radius: 50px;\r\n  font-size: 1.2rem;\r\n  margin-top: 15px;\r\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n  opacity: 0;\r\n  \/* Entra al final *\/\r\n  animation: aparecerArriba 1s ease forwards 0.8s;\r\n  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);\r\n}\r\n\r\n.boton-animado:hover {\r\n  transform: translateY(-5px);\r\n  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.6);\r\n}\r\n\r\n\/* --- KEYFRAMES --- *\/\r\n\r\n@keyframes entrarConRebote {\r\n  0% { transform: translateY(60px) scale(0.8); opacity: 0; }\r\n  100% { transform: translateY(0) scale(1); opacity: 1; }\r\n}\r\n\r\n@keyframes flotarSuave {\r\n  0% { transform: translateY(0); }\r\n  100% { transform: translateY(-12px); }\r\n}\r\n\r\n\/* Nueva animaci\u00f3n para el subt\u00edtulo y el bot\u00f3n *\/\r\n@keyframes aparecerArriba {\r\n  0% { transform: translateY(20px); opacity: 0; }\r\n  100% { transform: translateY(0); opacity: 1; }\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-106decf e-flex e-con-boxed e-con e-parent\" data-id=\"106decf\" 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-a466edb elementor-widget elementor-widget-html\" data-id=\"a466edb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"seccion-concepto\" class=\"seccion-concepto\">\r\n  <div class=\"concepto-contenedor\">\r\n    \r\n    <div class=\"concepto-cabecera animacion-degradado\">\r\n      <h2 class=\"concepto-titulo-principal\">IDEA I CONCEPTE<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"concepto-lista\">\r\n      \r\n      <label class=\"item-concepto animacion-degradado\">\r\n        <input type=\"checkbox\" class=\"checkbox-oculto\"> \r\n        <div class=\"boton-flecha\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n        <\/div>\r\n        <span class=\"titulo-concepto-visible\">El Tema:<\/span>\r\n        <div class=\"contenido-desplegable\">\r\n          <div class=\"texto-mascara\">\r\n            <p class=\"texto-concepto\">Explorar l'evoluci\u00f3 del disseny des d'una perspectiva hist\u00f2rica i sociol\u00f2gica.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/label>\r\n\r\n      <label class=\"item-concepto animacion-degradado\">\r\n        <input type=\"checkbox\" class=\"checkbox-oculto\">\r\n        <div class=\"boton-flecha\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n        <\/div>\r\n        <span class=\"titulo-concepto-visible\">L'Objectiu:<\/span>\r\n        <div class=\"contenido-desplegable\">\r\n          <div class=\"texto-mascara\">\r\n            <p class=\"texto-concepto\">Demostrar que el disseny \u00e9s una resposta a les necessitats de cada \u00e8poca.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/label>\r\n\r\n      <label class=\"item-concepto animacion-degradado\">\r\n        <input type=\"checkbox\" class=\"checkbox-oculto\">\r\n        <div class=\"boton-flecha\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n        <\/div>\r\n        <span class=\"titulo-concepto-visible\">El Format:<\/span>\r\n        <div class=\"contenido-desplegable\">\r\n          <div class=\"texto-mascara\">\r\n            <p class=\"texto-concepto\">Un fanzine interactiu digital que simula un l'ordinador. <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/label>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* --- Estils Generals de la Secci\u00f3 --- *\/\r\n.seccion-concepto {\r\n  background-color: #f6f7f9; \r\n  padding: 80px 20px;\r\n  font-family: 'Inter', sans-serif !important; \r\n}\r\n\r\n.concepto-contenedor {\r\n  max-width: 1200px;\r\n  margin: 0 auto; \r\n  width: 100%;\r\n}\r\n\r\n.concepto-cabecera {\r\n  margin-bottom: 50px; \r\n}\r\n\r\n.concepto-titulo-principal {\r\n  font-family: 'Inter', sans-serif !important; \r\n  font-size: 3.5rem; \r\n  color: #111827; \r\n  margin: 0;\r\n  font-weight: 900; \r\n  letter-spacing: -1.5px; \r\n  text-transform: uppercase; \r\n}\r\n\r\n\/* --- Estils de la Llista --- *\/\r\n.concepto-lista {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 30px; \r\n}\r\n\r\n.item-concepto {\r\n  display: flex;\r\n  align-items: center;\r\n  cursor: pointer; \r\n  width: fit-content; \r\n  position: relative;\r\n  padding: 5px;\r\n  border-radius: 25px;\r\n}\r\n\r\n.checkbox-oculto { display: none; }\r\n\r\n.boton-flecha {\r\n  width: 48px;\r\n  height: 48px;\r\n  background-color: #111827; \r\n  color: #ffffff;\r\n  border-radius: 50%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  transition: background-color 0.3s ease;\r\n  z-index: 2;\r\n}\r\n\r\n.boton-flecha svg {\r\n  width: 24px;\r\n  height: 24px;\r\n  transition: transform 0.4s ease; \r\n}\r\n\r\n.item-concepto:hover .boton-flecha {\r\n  background-color: #374151; \r\n}\r\n\r\n\/* --- ESTIL DEL T\u00cdTOL AMB SUBRATLLAT OCULT D'INICI --- *\/\r\n.titulo-concepto-visible {\r\n  font-family: 'Inter', sans-serif !important;\r\n  font-size: 1.15rem;\r\n  font-weight: 700;\r\n  color: #111827;\r\n  margin-left: 15px; \r\n  white-space: nowrap;\r\n  \r\n  \/* Preparem el subratllat a l'estil de la imatge, per\u00f2 transparent *\/\r\n  text-decoration: underline;\r\n  text-decoration-color: transparent;\r\n  text-decoration-thickness: 4px; \/* Gruix similar al de la teva imatge *\/\r\n  text-underline-offset: 6px; \/* Separaci\u00f3 neta del text *\/\r\n  transition: text-decoration-color 0.3s ease; \/* Transici\u00f3 suau *\/\r\n}\r\n\r\n\/* --- L'EFECTE HOVER NOM\u00c9S AL T\u00cdTOL --- *\/\r\n.item-concepto:hover .titulo-concepto-visible {\r\n  text-decoration-color: #111827; \/* Apareix el color fosc *\/\r\n}\r\n\r\n\/* Capa desplegable *\/\r\n.contenido-desplegable {\r\n  display: grid;\r\n  grid-template-columns: 0fr; \r\n  opacity: 0;\r\n  transition: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, margin-left 0.5s ease;\r\n}\r\n\r\n.texto-mascara { overflow: hidden; }\r\n\r\n.texto-concepto {\r\n  font-family: 'Inter', sans-serif !important; \r\n  font-size: 1.15rem;\r\n  color: #4b5563; \r\n  margin: 0; \r\n  line-height: 1.5;\r\n  width: max-content; \r\n  white-space: nowrap;\r\n  \/* Eliminada la transici\u00f3 de subratllat d'aqu\u00ed perqu\u00e8 ja no en tindr\u00e0 *\/\r\n}\r\n\r\n\/* Estresem l'animaci\u00f3 quan el checkbox est\u00e0 actiu *\/\r\n.checkbox-oculto:checked ~ .contenido-desplegable {\r\n  grid-template-columns: 1fr; \r\n  opacity: 1;\r\n  margin-left: 6px; \/* Espaiat curt mantingut *\/\r\n}\r\n\r\n.checkbox-oculto:checked ~ .boton-flecha svg {\r\n  transform: rotate(180deg); \r\n}\r\n\r\n\/* --- ANIMACI\u00d3 DE DEGRADAT --- *\/\r\n.seccion-concepto .animacion-degradado {\r\n  position: relative;\r\n  overflow: hidden; \r\n}\r\n\r\n.seccion-concepto .animacion-degradado::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0; width: 100%; height: 100%;\r\n  background: linear-gradient(135deg, rgba(229, 231, 235, 1) 0%, rgba(243, 244, 246, 1) 100%);\r\n  z-index: 10; \r\n  opacity: 1; \r\n  pointer-events: none; \r\n  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);\r\n  will-change: opacity;\r\n}\r\n\r\n.seccion-concepto .animacion-degradado .concepto-titulo-principal,\r\n.seccion-concepto .animacion-degradado .boton-flecha,\r\n.seccion-concepto .animacion-degradado .titulo-concepto-visible {\r\n  opacity: 0; \r\n  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; \r\n}\r\n\r\n.seccion-concepto .animacion-degradado.visible::before { opacity: 0; }\r\n\r\n.seccion-concepto .animacion-degradado.visible .concepto-titulo-principal,\r\n.seccion-concepto .animacion-degradado.visible .boton-flecha,\r\n.seccion-concepto .animacion-degradado.visible .titulo-concepto-visible {\r\n  opacity: 1;\r\n}\r\n\r\n\/* Ajust responsive *\/\r\n@media (max-width: 768px) {\r\n  .concepto-titulo-principal {\r\n    font-size: 2.2rem;\r\n  }\r\n  .item-concepto {\r\n    display: grid;\r\n    grid-template-columns: auto 1fr;\r\n    gap: 10px;\r\n    width: 100%;\r\n    border-radius: 10px;\r\n  }\r\n  .titulo-concepto-visible {\r\n    margin-left: 0;\r\n  }\r\n  .checkbox-oculto:checked ~ .contenido-desplegable {\r\n    grid-column: 1 \/ -1;\r\n    margin-left: 0;\r\n    margin-top: 2px;\r\n  }\r\n  .texto-concepto {\r\n    width: 100%; \r\n    font-size: 1rem;\r\n    white-space: normal; \r\n  }\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-5c26fcc e-flex e-con-boxed e-con e-parent\" data-id=\"5c26fcc\" 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-ef3535a elementor-widget elementor-widget-html\" data-id=\"ef3535a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;900&display=swap\" rel=\"stylesheet\">\r\n\r\n\r\n\r\n<section id=\"seccion-referents\" class=\"seccion-referentes\">\r\n\r\n  <div class=\"referentes-contenedor\">\r\n\r\n    \r\n\r\n    <div class=\"referentes-cabecera animacion-degradado\">\r\n\r\n      <h2 class=\"referentes-titulo-principal\">REFERENTS<\/h2>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"referentes-grid\">\r\n\r\n      \r\n\r\n      <label class=\"tarjeta-ref animacion-degradado\">\r\n\r\n        <input type=\"checkbox\" class=\"checkbox-oculto\"> \r\n\r\n        <div class=\"tarjeta-ref-imagen\" style=\"background-image: url('https:\/\/st3.idealista.com\/news\/archivos\/styles\/open_graph\/public\/2025-06\/images\/1_bauhaus.jpg?VersionId=A4K_Atw9FAAhSzZGuNHaEyEjou.wcvns&itok=sT1uAGkA');\"><\/div> \r\n\r\n        <div class=\"tarjeta-ref-contenido\">\r\n\r\n          <h3 class=\"tarjeta-ref-titulo\">La Bauhaus (Escola de Disseny)<\/h3>\r\n\r\n          <p class=\"tarjeta-ref-texto\">El pas de l\u2019ornament a la racionalitat. <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/label>\r\n\r\n\r\n\r\n      <label class=\"tarjeta-ref animacion-degradado\">\r\n\r\n        <input type=\"checkbox\" class=\"checkbox-oculto\">\r\n\r\n        <div class=\"tarjeta-ref-imagen\" style=\"background-image: url('https:\/\/cdn.freebiesupply.com\/logos\/large\/2x\/i-love-new-york-logo-png-transparent.png'); background-size: contain; background-color: #ffffff;\"><\/div>\r\n\r\n        <div class=\"tarjeta-ref-contenido\">\r\n\r\n          <h3 class=\"tarjeta-ref-titulo\">Milton Glaser (I \u2764\ufe0f NY)<\/h3>\r\n\r\n          <p class=\"tarjeta-ref-texto\">El disseny com a s\u00edmbol d'identitat emocional i pertinen\u00e7a.<\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/label>\r\n\r\n\r\n\r\n      <label class=\"tarjeta-ref animacion-degradado\">\r\n\r\n        <input type=\"checkbox\" class=\"checkbox-oculto\">\r\n\r\n        <div class=\"tarjeta-ref-imagen\" style=\"background-image: url('https:\/\/www.letemsvetemapplem.eu\/wp-content\/uploads\/2020\/05\/iMac-G3-Internet.jpg');\"><\/div>\r\n\r\n        <div class=\"tarjeta-ref-contenido\">\r\n\r\n          <h3 class=\"tarjeta-ref-titulo\">Apple (iMac G3)<\/h3>\r\n\r\n          <p class=\"tarjeta-ref-texto\">Humanitzar la tecnologia a trav\u00e9s del color y la transpar\u00e8ncia.<\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/label>\r\n\r\n\r\n\r\n      <label class=\"tarjeta-ref animacion-degradado\">\r\n\r\n        <input type=\"checkbox\" class=\"checkbox-oculto\">\r\n\r\n        <div class=\"tarjeta-ref-imagen\" style=\"background-image: url('https:\/\/store.sonymusic.es\/cdn\/shop\/articles\/Captura_de_pantalla_2025-06-16_a_las_17.21.13.png?v=1750087402');\"><\/div>\r\n\r\n        <div class=\"tarjeta-ref-contenido\">\r\n\r\n          <h3 class=\"tarjeta-ref-titulo\">Zara Larsson (Midnight Sun)<\/h3>\r\n\r\n          <p class=\"tarjeta-ref-texto\">La s\u00edntesi moderna: elevar la cultura del meme a producte de disseny.<\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/label>\r\n\r\n\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<style>\r\n\r\n\/* --- Estilos Generales de la Secci\u00f3n --- *\/\r\n\r\n.seccion-referentes {\r\n\r\n  background-color: #f3f4f6; \r\n\r\n  padding: 60px 20px;\r\n\r\n  font-family: 'Inter', sans-serif !important; \r\n\r\n}\r\n\r\n\r\n\r\n.referentes-contenedor {\r\n\r\n  max-width: 1200px;\r\n\r\n  margin: 0 auto; \r\n\r\n}\r\n\r\n\r\n\r\n.referentes-cabecera {\r\n\r\n  margin-bottom: 40px; \r\n\r\n}\r\n\r\n\r\n\r\n.referentes-titulo-principal {\r\n\r\n  font-family: 'Inter', sans-serif !important; \r\n\r\n  font-size: 3rem; \r\n\r\n  color: #111827; \r\n\r\n  margin: 0;\r\n\r\n  font-weight: 900; \r\n\r\n  letter-spacing: -1.5px; \r\n\r\n  text-transform: uppercase; \r\n\r\n}\r\n\r\n\r\n\r\n.referentes-grid {\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n\r\n  gap: 20px; \r\n\r\n}\r\n\r\n\r\n\r\n\/* --- Estilos de las Tarjetas (Ajustados para Overlay) --- *\/\r\n\r\n.tarjeta-ref {\r\n\r\n  background-color: #ffffff;\r\n\r\n  border-radius: 10px;\r\n\r\n  overflow: hidden; \r\n\r\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); \r\n\r\n  border: 1px solid #e5e7eb;\r\n\r\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n\r\n  display: block; \r\n\r\n  cursor: pointer; \r\n\r\n  \r\n\r\n  \/* Necesario para posicionar el degradado encima *\/\r\n\r\n  position: relative; \r\n\r\n}\r\n\r\n\r\n\r\n.tarjeta-ref:hover {\r\n\r\n  transform: translateY(-5px);\r\n\r\n  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); \r\n\r\n}\r\n\r\n\r\n\r\n.checkbox-oculto {\r\n\r\n  display: none;\r\n\r\n}\r\n\r\n\r\n\r\n.tarjeta-ref-imagen {\r\n\r\n  height: 160px; \r\n\r\n  background-color: #e5e7eb; \r\n\r\n  background-size: cover; \r\n\r\n  background-position: center; \r\n\r\n  background-repeat: no-repeat;\r\n\r\n  border-bottom: 1px solid #f3f4f6;\r\n\r\n  transition: opacity 0.3s ease;\r\n\r\n}\r\n\r\n\r\n\r\n.tarjeta-ref:hover .tarjeta-ref-imagen {\r\n\r\n  opacity: 0.9;\r\n\r\n}\r\n\r\n\r\n\r\n.tarjeta-ref-contenido {\r\n\r\n  padding: 25px 20px 20px 20px; \r\n\r\n}\r\n\r\n\r\n\r\n.tarjeta-ref-titulo {\r\n\r\n  font-family: 'Inter', sans-serif !important; \r\n\r\n  font-size: 1.15rem;\r\n\r\n  font-weight: 700;\r\n\r\n  color: #111827;\r\n\r\n  margin: 0; \r\n\r\n  line-height: 1.3;\r\n\r\n}\r\n\r\n\r\n\r\n.tarjeta-ref-texto {\r\n\r\n  font-family: 'Inter', sans-serif !important; \r\n\r\n  font-size: 0.95rem;\r\n\r\n  color: #6b7280; \r\n\r\n  text-align: left; \r\n\r\n  line-height: 1.6; \r\n\r\n  max-height: 0; \r\n\r\n  opacity: 0;\r\n\r\n  margin: 0;\r\n\r\n  overflow: hidden;\r\n\r\n  transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;\r\n\r\n}\r\n\r\n\r\n\r\n.checkbox-oculto:checked ~ .tarjeta-ref-contenido .tarjeta-ref-texto {\r\n\r\n  max-height: 150px; \r\n\r\n  opacity: 1;\r\n\r\n  margin-top: 15px; \r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n\r\n   ESTILOS DE LA ANIMACI\u00d3N DE DEGRADADO (NUEVO)\r\n\r\n=========================================== *\/\r\n\r\n\r\n\r\n\/* Clase base para los elementos que tendr\u00e1n el efecto *\/\r\n\r\n.animacion-degradado {\r\n\r\n  position: relative;\r\n\r\n  overflow: hidden; \/* Asegura que el degradado no se salga de las esquinas redondeadas *\/\r\n\r\n}\r\n\r\n\r\n\r\n\/* 1. EL DEGRADADO QUE APARECE PRIMERO (La capa superior) *\/\r\n\r\n.animacion-degradado::before {\r\n\r\n  content: '';\r\n\r\n  position: absolute;\r\n\r\n  top: 0; left: 0; width: 100%; height: 100%;\r\n\r\n  \r\n\r\n  \/* AQU\u00cd DEFINES TU DEGRADADO. He puesto uno elegante de gris a transparente *\/\r\n\r\n  background: linear-gradient(135deg, rgba(229, 231, 235, 1) 0%, rgba(243, 244, 246, 1) 100%);\r\n\r\n  \r\n\r\n  z-index: 10; \/* Encima de todo el contenido *\/\r\n\r\n  opacity: 1; \/* Totalmente visible al principio *\/\r\n\r\n  pointer-events: none; \/* No interfiere con los clics *\/\r\n\r\n  \r\n\r\n  \/* Transici\u00f3n suave para cuando se difumine *\/\r\n\r\n  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);\r\n\r\n  will-change: opacity;\r\n\r\n}\r\n\r\n\r\n\r\n\/* 2. EL CONTENIDO REAL (Empieza invisible detr\u00e1s del degradado) *\/\r\n\r\n.animacion-degradado .referentes-titulo-principal,\r\n\r\n.animacion-degradado .tarjeta-ref-imagen,\r\n\r\n.animacion-degradado .tarjeta-ref-contenido {\r\n\r\n  opacity: 0; \/* Invisible inicialmente *\/\r\n\r\n  \r\n\r\n  \/* Transici\u00f3n suave para que aparezca, con un peque\u00f1o delay para que el degradado act\u00fae primero *\/\r\n\r\n  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; \r\n\r\n  will-change: opacity;\r\n\r\n}\r\n\r\n\r\n\r\n\/* 3. ESTADO ACTIVO (Cuando entra en pantalla) *\/\r\n\r\n\r\n\r\n\/* El degradado se difumina (pasa a transparente) *\/\r\n\r\n.animacion-degradado.visible::before {\r\n\r\n  opacity: 0;\r\n\r\n}\r\n\r\n\r\n\r\n\/* El contenido real aparece (pasa a visible) *\/\r\n\r\n.animacion-degradado.visible .referentes-titulo-principal,\r\n\r\n.animacion-degradado.visible .tarjeta-ref-imagen,\r\n\r\n.animacion-degradado.visible .tarjeta-ref-contenido {\r\n\r\n  opacity: 1;\r\n\r\n}\r\n\r\n\r\n\r\n@media (max-width: 768px) {\r\n\r\n  .referentes-titulo-principal {\r\n\r\n    font-size: 2.2rem;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<script>\r\n\r\n  document.addEventListener(\"DOMContentLoaded\", function() {\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n\r\n      entries.forEach(entry => {\r\n\r\n        if (entry.isIntersecting) {\r\n\r\n          entry.target.classList.add('visible');\r\n\r\n        }\r\n\r\n      });\r\n\r\n    }, {\r\n\r\n      threshold: 0.1 \/\/ Se activa sutilmente cuando asoma el 10%\r\n\r\n    });\r\n\r\n\r\n\r\n    document.querySelectorAll('.animacion-degradado').forEach(el => observer.observe(el));\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-02f5a79 e-flex e-con-boxed e-con e-parent\" data-id=\"02f5a79\" 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-abdcf67 elementor-widget elementor-widget-html\" data-id=\"abdcf67\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Inter:wght@400;600;700;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<section id=\"seccion-proces-treball\" class=\"seccion-referentes\">\r\n  <div class=\"referentes-contenedor\">\r\n    \r\n    <div class=\"referentes-cabecera animacion-degradado\">\r\n      <h2 class=\"referentes-titulo-principal\">PROC\u00c9S DE TREBALL<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"referentes-grid\">\r\n      \r\n      <a href=\"#vista-paso-1\" class=\"tarjeta-ref animacion-degradado\">\r\n        <div class=\"tarjeta-ref-imagen\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Wireframe-1-scaled.jpg');\"><\/div> \r\n        <div class=\"tarjeta-ref-contenido\">\r\n          <h3 class=\"tarjeta-ref-titulo\">Prototip en paper i Wireframes<\/h3>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/www.figma.com\/design\/UFIRSoT3qgRBCswZ6Qp4fM\/MOCKUP_Pau-Cos-Aguado?node-id=1-3&t=44Zt8B67Vxf0szS6-1\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"tarjeta-ref animacion-degradado\">\r\n        <div class=\"tarjeta-ref-imagen\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-15-121057.jpg');\"><\/div>\r\n        <div class=\"tarjeta-ref-contenido\">\r\n          <h3 class=\"tarjeta-ref-titulo\">Mockup<\/h3>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"#vista-paso-3\" class=\"tarjeta-ref animacion-degradado\">\r\n        <div class=\"tarjeta-ref-imagen\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-20-201342.png');\"><\/div>\r\n        <div class=\"tarjeta-ref-contenido\">\r\n          <h3 class=\"tarjeta-ref-titulo\">Gui\u00f3 d\u2019interacci\u00f3<\/h3>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"#vista-paso-4\" class=\"tarjeta-ref animacion-degradado\">\r\n        <div class=\"tarjeta-ref-imagen\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-12-220539-scaled.png');\"><\/div>\r\n        <div class=\"tarjeta-ref-contenido\">\r\n          <h3 class=\"tarjeta-ref-titulo\">Versions finals<\/h3>\r\n        <\/div>\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<div id=\"vista-paso-1\" class=\"modal-css\">\r\n  <a href=\"#seccion-proces-treball\" class=\"modal-fondo\"><\/a> \r\n  <div class=\"modal-caja\">\r\n    <a href=\"#seccion-proces-treball\" class=\"modal-boton-cerrar\">&times;<\/a>\r\n    \r\n    <div class=\"contenedor-carrusel-radio\">\r\n      <input type=\"radio\" name=\"carrusel-1\" id=\"foto1\" checked class=\"radio-oculto\">\r\n      <input type=\"radio\" name=\"carrusel-1\" id=\"foto2\" class=\"radio-oculto\">\r\n      <input type=\"radio\" name=\"carrusel-1\" id=\"foto3\" class=\"radio-oculto\">\r\n\r\n      <div class=\"envoltura-fotos\">\r\n        <div class=\"foto-slide f1\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Wireframe-1-scaled.jpg');\"><\/div>\r\n        <div class=\"foto-slide f2\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Wireframe-2-scaled.jpg');\"><\/div>\r\n        <div class=\"foto-slide f3\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Wireframe-3-scaled.jpg');\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"controles-flechas cf1\">\r\n        <label for=\"foto3\" class=\"flecha-carrusel izq\">\u276e<\/label>\r\n        <label for=\"foto2\" class=\"flecha-carrusel der\">\u276f<\/label>\r\n      <\/div>\r\n      <div class=\"controles-flechas cf2\">\r\n        <label for=\"foto1\" class=\"flecha-carrusel izq\">\u276e<\/label>\r\n        <label for=\"foto3\" class=\"flecha-carrusel der\">\u276f<\/label>\r\n      <\/div>\r\n      <div class=\"controles-flechas cf3\">\r\n        <label for=\"foto2\" class=\"flecha-carrusel izq\">\u276e<\/label>\r\n        <label for=\"foto1\" class=\"flecha-carrusel der\">\u276f<\/label>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <h3 class=\"modal-titulo\">Prototip en paper i Wireframes<\/h3>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"vista-paso-3\" class=\"modal-css\">\r\n  <a href=\"#seccion-proces-treball\" class=\"modal-fondo\"><\/a>\r\n  <div class=\"modal-caja\">\r\n    <a href=\"#seccion-proces-treball\" class=\"modal-boton-cerrar\">&times;<\/a>\r\n    <div class=\"modal-imagen-grande\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-20-201342.png');\"><\/div> \r\n    <h3 class=\"modal-titulo\">Gui\u00f3 d\u2019interacci\u00f3<\/h3>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"vista-paso-4\" class=\"modal-css\">\r\n  <a href=\"#seccion-proces-treball\" class=\"modal-fondo\"><\/a>\r\n  <div class=\"modal-caja\">\r\n    <a href=\"#seccion-proces-treball\" class=\"modal-boton-cerrar\">&times;<\/a>\r\n    \r\n    <div class=\"contenedor-carrusel-radio\">\r\n      <input type=\"radio\" name=\"carrusel-4\" id=\"vfoto1\" checked class=\"radio-oculto\">\r\n      <input type=\"radio\" name=\"carrusel-4\" id=\"vfoto2\" class=\"radio-oculto\">\r\n      <input type=\"radio\" name=\"carrusel-4\" id=\"vfoto3\" class=\"radio-oculto\">\r\n      <input type=\"radio\" name=\"carrusel-4\" id=\"vfoto4\" class=\"radio-oculto\">\r\n      <input type=\"radio\" name=\"carrusel-4\" id=\"vfoto5\" class=\"radio-oculto\">\r\n\r\n      <div class=\"envoltura-fotos\">\r\n        <div class=\"foto-slide vf1\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-12-220539-scaled.png');\"><\/div>\r\n        <div class=\"foto-slide vf2\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-Pop-Art.jpg');\"><\/div>\r\n        <div class=\"foto-slide vf3\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-15-121824-scaled.png');\"><\/div>\r\n        <div class=\"foto-slide vf4\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-12-220646-scaled.png');\"><\/div>\r\n        <div class=\"foto-slide vf5\" style=\"background-image: url('https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Captura-de-pantalla-2026-05-12-220620-scaled.png');\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"controles-flechas vcf1\">\r\n        <label for=\"vfoto5\" class=\"flecha-carrusel izq\">\u276e<\/label>\r\n        <label for=\"vfoto2\" class=\"flecha-carrusel der\">\u276f<\/label>\r\n      <\/div>\r\n      <div class=\"controles-flechas vcf2\">\r\n        <label for=\"vfoto1\" class=\"flecha-carrusel izq\">\u276e<\/label>\r\n        <label for=\"vfoto3\" class=\"flecha-carrusel der\">\u276f<\/label>\r\n      <\/div>\r\n      <div class=\"controles-flechas vcf3\">\r\n        <label for=\"vfoto2\" class=\"flecha-carrusel izq\">\u276e<\/label>\r\n        <label for=\"vfoto4\" class=\"flecha-carrusel der\">\u276f<\/label>\r\n      <\/div>\r\n      <div class=\"controles-flechas vcf4\">\r\n        <label for=\"vfoto3\" class=\"flecha-carrusel izq\">\u276e<\/label>\r\n        <label for=\"vfoto5\" class=\"flecha-carrusel der\">\u276f<\/label>\r\n      <\/div>\r\n      <div class=\"controles-flechas vcf5\">\r\n        <label for=\"vfoto4\" class=\"flecha-carrusel izq\">\u276e<\/label>\r\n        <label for=\"vfoto1\" class=\"flecha-carrusel der\">\u276f<\/label>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <h3 class=\"modal-titulo\">Versions finals<\/h3>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* --- Estilos Generales de la Secci\u00f3n --- *\/\r\n.seccion-referentes {\r\n  background-color: #f3f4f6; \r\n  padding: 60px 20px;\r\n  font-family: 'Inter', sans-serif !important; \r\n}\r\n\r\n.referentes-contenedor {\r\n  max-width: 1200px;\r\n  margin: 0 auto; \r\n}\r\n\r\n.referentes-cabecera {\r\n  margin-bottom: 40px; \r\n}\r\n\r\n.referentes-titulo-principal {\r\n  font-family: 'Inter', sans-serif !important; \r\n  font-size: 3rem; \r\n  color: #111827; \r\n  margin: 0;\r\n  font-weight: 900; \r\n  letter-spacing: -1.5px; \r\n  text-transform: uppercase; \r\n}\r\n\r\n.referentes-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n  gap: 20px; \r\n}\r\n\r\n\/* --- Estilos de las Tarjetas (Botones) --- *\/\r\n.tarjeta-ref {\r\n  background-color: #ffffff;\r\n  border-radius: 10px;\r\n  overflow: hidden; \r\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); \r\n  border: 1px solid #e5e7eb;\r\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n  display: block; \r\n  text-decoration: none; \r\n  cursor: pointer;\r\n}\r\n\r\n.tarjeta-ref:hover {\r\n  transform: translateY(-5px);\r\n  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); \r\n}\r\n\r\n.tarjeta-ref-imagen {\r\n  height: 160px; \r\n  background-color: #e5e7eb; \r\n  background-size: cover; \r\n  background-position: center; \r\n  background-repeat: no-repeat;\r\n  border-bottom: 1px solid #f3f4f6;\r\n}\r\n\r\n.tarjeta-ref-contenido {\r\n  padding: 20px; \r\n}\r\n\r\n.tarjeta-ref-titulo {\r\n  font-family: 'Inter', sans-serif !important; \r\n  font-size: 1.15rem;\r\n  font-weight: 700;\r\n  color: #111827;\r\n  margin: 0; \r\n  line-height: 1.3;\r\n  text-align: center;\r\n}\r\n\r\n\/* ==========================================\r\n   ESTILOS DE LA ANIMACI\u00d3N DE DEGRADADO\r\n=========================================== *\/\r\n.animacion-degradado {\r\n  position: relative;\r\n  overflow: hidden; \r\n}\r\n\r\n.animacion-degradado::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0; width: 100%; height: 100%;\r\n  background: linear-gradient(135deg, rgba(229, 231, 235, 1) 0%, rgba(243, 244, 246, 1) 100%);\r\n  z-index: 10; \r\n  opacity: 1; \r\n  pointer-events: none; \r\n  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);\r\n  will-change: opacity;\r\n}\r\n\r\n.animacion-degradado .referentes-titulo-principal,\r\n.animacion-degradado .tarjeta-ref-imagen,\r\n.animacion-degradado .tarjeta-ref-contenido {\r\n  opacity: 0; \r\n  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; \r\n  will-change: opacity;\r\n}\r\n\r\n.animacion-degradado.visible::before {\r\n  opacity: 0;\r\n}\r\n\r\n.animacion-degradado.visible .referentes-titulo-principal,\r\n.animacion-degradado.visible .tarjeta-ref-imagen,\r\n.animacion-degradado.visible .tarjeta-ref-contenido {\r\n  opacity: 1;\r\n}\r\n\r\n\/* ========================================== *\/\r\n\/* ESTILOS DE LA VENTANA EMERGENTE (MODAL)    *\/\r\n\/* ========================================== *\/\r\n.modal-css {\r\n  position: fixed;\r\n  top: 0; left: 0; right: 0; bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.85); \r\n  z-index: 99999; \r\n  opacity: 0; \r\n  visibility: hidden;\r\n  transition: opacity 0.3s ease, visibility 0.3s ease;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 20px;\r\n}\r\n\r\n.modal-css:target {\r\n  opacity: 1;\r\n  visibility: visible;\r\n}\r\n\r\n.modal-fondo {\r\n  position: absolute;\r\n  top: 0; left: 0; right: 0; bottom: 0;\r\n  cursor: default;\r\n}\r\n\r\n.modal-caja {\r\n  position: relative;\r\n  background-color: #ffffff;\r\n  padding: 20px;\r\n  border-radius: 12px;\r\n  max-width: 900px; \r\n  width: 100%;\r\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);\r\n  z-index: 2;\r\n  transform: scale(0.9);\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.modal-css:target .modal-caja {\r\n  transform: scale(1); \r\n}\r\n\r\n\/* --- CRUZ EXACTA DEL USUARIO (SIN CAMBIOS) --- *\/\r\n.modal-boton-cerrar {\r\n  position: absolute;\r\n  top: 15px;      \r\n  right: 20px;   \r\n  font-size: 2.5rem;\r\n  color: #111827;\r\n  text-decoration: none;\r\n  font-weight: 900;\r\n  line-height: 1;\r\n  transition: color 0.2s ease;\r\n}\r\n\r\n.modal-boton-cerrar:hover {\r\n  color: #ef4444; \r\n}\r\n\r\n.modal-imagen-grande {\r\n  width: 100%;\r\n  height: 60vh; \r\n  background-color: #e5e7eb;\r\n  background-size: contain; \r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  border-radius: 6px;\r\n  margin-top: 45px; \r\n  margin-bottom: 20px;\r\n}\r\n\r\n.modal-titulo {\r\n  font-family: 'Inter', sans-serif !important;\r\n  font-size: 1.5rem;\r\n  font-weight: 700;\r\n  color: #111827;\r\n  margin: 0;\r\n  text-align: center;\r\n}\r\n\r\n\/* ========================================== *\/\r\n\/* ESTILOS CARRUSEL RADIO                     *\/\r\n\/* ========================================== *\/\r\n.contenedor-carrusel-radio {\r\n  width: 100%;\r\n  height: 60vh;\r\n  background-color: #e5e7eb;\r\n  border-radius: 6px;\r\n  margin-top: 45px;\r\n  margin-bottom: 20px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* ARREGLO DE COMPATIBILIDAD (No usamos display: none;) *\/\r\n.radio-oculto { \r\n  position: absolute;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.foto-slide {\r\n  position: absolute;\r\n  top: 0; left: 0; width: 100%; height: 100%;\r\n  background-size: contain;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  opacity: 0;\r\n  transition: opacity 0.4s ease;\r\n}\r\n\r\n\/* L\u00f3gica Visibilidad Carrusel 1 (3 fotos) *\/\r\n#foto1:checked ~ .envoltura-fotos .f1,\r\n#foto2:checked ~ .envoltura-fotos .f2,\r\n#foto3:checked ~ .envoltura-fotos .f3 {\r\n  opacity: 1;\r\n  z-index: 1;\r\n}\r\n\r\n\/* L\u00f3gica Visibilidad Carrusel 4 (5 fotos) *\/\r\n#vfoto1:checked ~ .envoltura-fotos .vf1,\r\n#vfoto2:checked ~ .envoltura-fotos .vf2,\r\n#vfoto3:checked ~ .envoltura-fotos .vf3,\r\n#vfoto4:checked ~ .envoltura-fotos .vf4,\r\n#vfoto5:checked ~ .envoltura-fotos .vf5 {\r\n  opacity: 1;\r\n  z-index: 1;\r\n}\r\n\r\n.controles-flechas {\r\n  display: none;\r\n  position: absolute;\r\n  top: 0; left: 0; width: 100%; height: 100%;\r\n  pointer-events: none;\r\n  z-index: 2;\r\n}\r\n\r\n\/* Mostrar flechas Carrusel 1 *\/\r\n#foto1:checked ~ .cf1,\r\n#foto2:checked ~ .cf2,\r\n#foto3:checked ~ .cf3 { display: block; }\r\n\r\n\/* Mostrar flechas Carrusel 4 *\/\r\n#vfoto1:checked ~ .vcf1,\r\n#vfoto2:checked ~ .vcf2,\r\n#vfoto3:checked ~ .vcf3,\r\n#vfoto4:checked ~ .vcf4,\r\n#vfoto5:checked ~ .vcf5 { display: block; }\r\n\r\n\r\n.flecha-carrusel {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  pointer-events: auto;\r\n  background-color: rgba(255, 255, 255, 0.8);\r\n  color: #111827;\r\n  width: 40px;\r\n  height: 40px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  font-size: 1.2rem;\r\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n  transition: background-color 0.2s, transform 0.2s;\r\n  user-select: none;\r\n}\r\n\r\n.flecha-carrusel:hover {\r\n  background-color: #ffffff;\r\n  transform: translateY(-50%) scale(1.1);\r\n}\r\n\r\n.izq { left: 15px; }\r\n.der { right: 15px; }\r\n\r\n\/* --- RESPONSIVO --- *\/\r\n@media (max-width: 768px) {\r\n  .referentes-titulo-principal { font-size: 2.2rem; }\r\n  .modal-imagen-grande, .contenedor-carrusel-radio { height: 40vh; margin-top: 40px; }\r\n  .flecha-carrusel { width: 35px; height: 35px; font-size: 1rem; }\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-822513f e-flex e-con-boxed e-con e-parent\" data-id=\"822513f\" 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-3254c38 elementor-widget elementor-widget-html\" data-id=\"3254c38\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Inter:wght@400;600;700;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<section id=\"seccion-fanzine\" class=\"seccion-fanzine\">\r\n  <div class=\"fanzine-contenedor\">\r\n    \r\n    <div class=\"fanzine-cabecera animacion-degradado\">\r\n      <h2 class=\"fanzine-titulo-principal\">FANZINE<\/h2>\r\n    <\/div>\r\n\r\n    <a href=\"https:\/\/www.figma.com\/design\/MfZqtTOse1rPWBzg0GmBnL\/Projecte-Final_Pau-Cos-Aguado--Vista-Ordinador-?node-id=0-1&t=xNjSidLLhqJ3Fj1q-1\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"enlace-gigante animacion-degradado\">\r\n      \r\n      <div class=\"contenedor-imagen-relativo\">\r\n        <img decoding=\"async\" src=\"https:\/\/25007.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/C-_Users_pauco_Downloads_Captura-de-pantalla-2026-05-14-223520-scaled.jpg\" alt=\"Vista pr\u00e8via del Fanzine a Figma\" class=\"imagen-fanzine-img\">\r\n        <span class=\"indicador-figma\">Obrir a Figma \u2197<\/span>\r\n      <\/div>\r\n\r\n    <\/a>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* --- Estilos Generales de la Secci\u00f3n --- *\/\r\n.seccion-fanzine {\r\n  background-color: #f3f4f6; \r\n  padding: 60px 20px;\r\n  font-family: 'Inter', sans-serif !important; \r\n}\r\n\r\n.fanzine-contenedor {\r\n  max-width: 1200px;\r\n  margin: 0 auto; \r\n}\r\n\r\n.fanzine-cabecera {\r\n  margin-bottom: 40px; \r\n}\r\n\r\n.fanzine-titulo-principal {\r\n  font-family: 'Inter', sans-serif !important; \r\n  font-size: 3rem; \r\n  color: #111827; \r\n  margin: 0;\r\n  font-weight: 900; \r\n  letter-spacing: -1.5px; \r\n  text-transform: uppercase; \r\n}\r\n\r\n\/* --- Estilos del Enlace y la Imagen --- *\/\r\n.enlace-gigante {\r\n  display: block; \r\n  text-decoration: none;\r\n  border-radius: 12px; \r\n  overflow: hidden; \/* Mantiene las esquinas redondeadas sobre la imagen *\/\r\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); \r\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n\r\n.enlace-gigante:hover {\r\n  transform: translateY(-8px); \r\n  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15); \r\n}\r\n\r\n.contenedor-imagen-relativo {\r\n  position: relative;\r\n  display: flex; \/* Ayuda a eliminar espacios en blanco por defecto de las im\u00e1genes *\/\r\n  width: 100%;\r\n}\r\n\r\n.imagen-fanzine-img {\r\n  width: 100%;\r\n  height: auto; \/* Esto hace que la altura se ajuste perfectamente sin distorsionar *\/\r\n  display: block;\r\n}\r\n\r\n\/* --- Etiqueta flotante para indicar la acci\u00f3n --- *\/\r\n.indicador-figma {\r\n  position: absolute;\r\n  bottom: 30px;\r\n  right: 30px;\r\n  background-color: #ffffff; \/* Fondo del \u00f3valo en blanco *\/\r\n  color: #111827; \/* Texto en oscuro \"azul negro\" *\/\r\n  padding: 12px 24px;\r\n  border-radius: 50px; \r\n  font-weight: 600;\r\n  font-size: 1rem;\r\n  letter-spacing: 0.5px;\r\n  box-shadow: 0 4px 10px rgba(0,0,0,0.3);\r\n  transition: background-color 0.2s ease, color 0.2s ease;\r\n  z-index: 2; \/* Asegura que quede por encima de la imagen *\/\r\n}\r\n\r\n.enlace-gigante:hover .indicador-figma {\r\n  background-color: #e5e7eb; \r\n  color: #000000;\r\n}\r\n\r\n\/* ==========================================\r\n   ESTILOS DE LA ANIMACI\u00d3N DE DEGRADADO (FANZINE)\r\n=========================================== *\/\r\n.animacion-degradado {\r\n  position: relative;\r\n  overflow: hidden; \r\n}\r\n\r\n.animacion-degradado::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0; width: 100%; height: 100%;\r\n  background: linear-gradient(135deg, rgba(229, 231, 235, 1) 0%, rgba(243, 244, 246, 1) 100%);\r\n  z-index: 10; \r\n  opacity: 1; \r\n  pointer-events: none; \r\n  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);\r\n  will-change: opacity;\r\n}\r\n\r\n\/* Hacemos invisibles los elementos reales del Fanzine al inicio *\/\r\n.animacion-degradado .fanzine-titulo-principal,\r\n.animacion-degradado .contenedor-imagen-relativo {\r\n  opacity: 0; \r\n  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; \r\n  will-change: opacity;\r\n}\r\n\r\n\/* Cuando entra en pantalla: el degradado desaparece *\/\r\n.animacion-degradado.visible::before {\r\n  opacity: 0;\r\n}\r\n\r\n\/* Cuando entra en pantalla: el contenido aparece *\/\r\n.animacion-degradado.visible .fanzine-titulo-principal,\r\n.animacion-degradado.visible .contenedor-imagen-relativo {\r\n  opacity: 1;\r\n}\r\n\r\n\/* Ajustes responsive para pantallas peque\u00f1as *\/\r\n@media (max-width: 768px) {\r\n  .fanzine-titulo-principal {\r\n    font-size: 2.2rem;\r\n  }\r\n  .indicador-figma {\r\n    font-size: 0.9rem;\r\n    padding: 10px 20px;\r\n    bottom: 15px; \/* Lo acercamos un poco m\u00e1s al borde en m\u00f3vil *\/\r\n    right: 15px;\r\n  }\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-8669b03 e-flex e-con-boxed e-con e-parent\" data-id=\"8669b03\" 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-003ba67 elementor-widget elementor-widget-html\" data-id=\"003ba67\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Inter:wght@400;600;700;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<section id=\"seccion-video-tour\" class=\"seccion-video\">\r\n  <div class=\"video-contenedor\">\r\n    \r\n    <div class=\"video-cabecera animacion-degradado\">\r\n      <h2 class=\"video-titulo-principal\">VIDEO TOUR<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"contenedor-iframe animacion-degradado\">\r\n      <iframe src=\"https:\/\/www.youtube.com\/embed\/-kfLwHsvnXM?rel=0\" title=\"Video Tour\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<section id=\"seccion-conclusiones\" class=\"seccion-conclusiones\">\r\n  <div class=\"conclusiones-contenedor\">\r\n    \r\n    <div class=\"conclusiones-cabecera animacion-degradado\">\r\n      <h2 class=\"conclusiones-titulo-principal\">CONCLUSIONS<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"conclusiones-lista\">\r\n      \r\n      <label class=\"item-conclusion animacion-degradado\">\r\n        <input type=\"checkbox\" class=\"checkbox-oculto\"> \r\n        <div class=\"boton-flecha\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n        <\/div>\r\n        <span class=\"titulo-conclusion-visible\">Reflexi\u00f3 final sobre el projecte:<\/span>\r\n        <div class=\"contenido-desplegable\">\r\n          <div class=\"texto-mascara\">\r\n            <p class=\"texto-conclusion\">El bon disseny utilitza les eines del seu temps per entendre i millorar la realitat.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/label>\r\n\r\n      <label class=\"item-conclusion animacion-degradado\">\r\n        <input type=\"checkbox\" class=\"checkbox-oculto\">\r\n        <div class=\"boton-flecha\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n        <\/div>\r\n        <span class=\"titulo-conclusion-visible\">Aprenentatges:<\/span>\r\n        <div class=\"contenido-desplegable\">\r\n          <div class=\"texto-mascara\">\r\n            <p class=\"texto-conclusion\">El format digital i la narrativa no lineal transformen l'usuari en un investigador actiu.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/label>\r\n\r\n      <label class=\"item-conclusion animacion-degradado\">\r\n        <input type=\"checkbox\" class=\"checkbox-oculto\">\r\n        <div class=\"boton-flecha\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n        <\/div>\r\n        <span class=\"titulo-conclusion-visible\">Valoraci\u00f3 personal:<\/span>\r\n        <div class=\"contenido-desplegable\">\r\n          <div class=\"texto-mascara\">\r\n            <p class=\"texto-conclusion\">S'ha demostrat que el disseny mai es crea en el buit, \u00e9s un mirall directe de la societat.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/label>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* --- Estilos Generales --- *\/\r\n.seccion-video, .seccion-conclusiones {\r\n  background-color: #f6f7f9; \r\n  padding: 80px 20px;\r\n  font-family: 'Inter', sans-serif !important; \r\n}\r\n\r\n.video-contenedor, .conclusiones-contenedor {\r\n  max-width: 1200px;\r\n  margin: 0 auto; \r\n  width: 100%;\r\n}\r\n\r\n.video-cabecera, .conclusiones-cabecera {\r\n  margin-bottom: 50px; \r\n}\r\n\r\n.video-titulo-principal, .conclusiones-titulo-principal {\r\n  font-family: 'Inter', sans-serif !important; \r\n  font-size: 3.5rem; \r\n  color: #111827; \r\n  margin: 0;\r\n  font-weight: 900; \r\n  letter-spacing: -1.5px; \r\n  text-transform: uppercase; \r\n}\r\n\r\n\/* --- Estilos Espec\u00edficos del Video --- *\/\r\n.contenedor-iframe {\r\n  position: relative;\r\n  width: 100%;\r\n  padding-bottom: 56.25%; \r\n  border-radius: 12px;\r\n  overflow: hidden;\r\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);\r\n  background-color: #000;\r\n}\r\n\r\n.contenedor-iframe iframe {\r\n  position: absolute;\r\n  top: 0; left: 0; width: 100%; height: 100%;\r\n  border: none;\r\n}\r\n\r\n\/* --- Estilos de la Lista de Conclusiones --- *\/\r\n.conclusiones-lista {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 30px; \r\n}\r\n\r\n.item-conclusion {\r\n  display: flex;\r\n  align-items: center;\r\n  cursor: pointer; \r\n  width: fit-content; \r\n  position: relative;\r\n  padding: 5px;\r\n  border-radius: 25px;\r\n}\r\n\r\n.checkbox-oculto { display: none; }\r\n\r\n.boton-flecha {\r\n  width: 48px;\r\n  height: 48px;\r\n  background-color: #111827; \r\n  color: #ffffff;\r\n  border-radius: 50%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  transition: background-color 0.3s ease;\r\n  z-index: 2;\r\n}\r\n\r\n.boton-flecha svg {\r\n  width: 24px;\r\n  height: 24px;\r\n  transition: transform 0.4s ease; \r\n}\r\n\r\n.item-conclusion:hover .boton-flecha {\r\n  background-color: #374151; \r\n}\r\n\r\n\/* --- ESTIL DEL T\u00cdTOL --- *\/\r\n.titulo-conclusion-visible {\r\n  font-family: 'Inter', sans-serif !important;\r\n  font-size: 1.15rem;\r\n  font-weight: 700; \/* Tornem a posar-ho en bold per defecte *\/\r\n  color: #111827;\r\n  margin-left: 15px; \r\n  white-space: nowrap;\r\n  \r\n  \/* Subratllat preparat a l'estil de la imatge *\/\r\n  text-decoration: underline;\r\n  text-decoration-color: transparent;\r\n  text-decoration-thickness: 4px; \r\n  text-underline-offset: 6px; \r\n  transition: text-decoration-color 0.3s ease;\r\n}\r\n\r\n\/* --- HOVER NOM\u00c9S SUBRATLLAT (Sense ombra\/fals bold) --- *\/\r\n.item-conclusion:hover .titulo-conclusion-visible {\r\n  text-decoration-color: #111827; \r\n}\r\n\r\n\/* Capa desplegable descriptiva *\/\r\n.contenido-desplegable {\r\n  display: grid;\r\n  grid-template-columns: 0fr; \r\n  opacity: 0;\r\n  transition: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, margin-left 0.5s ease;\r\n}\r\n\r\n.texto-mascara { overflow: hidden; }\r\n\r\n.texto-conclusion {\r\n  font-family: 'Inter', sans-serif !important; \r\n  font-size: 1.15rem;\r\n  color: #4b5563; \r\n  margin: 0; \r\n  line-height: 1.5;\r\n  width: max-content; \r\n  white-space: nowrap; \r\n}\r\n\r\n\/* Acci\u00f3 de desplegar el contingut amb un espaiat redu\u00eft (6px) *\/\r\n.checkbox-oculto:checked ~ .contenido-desplegable {\r\n  grid-template-columns: 1fr; \r\n  opacity: 1;\r\n  margin-left: 6px; \r\n}\r\n\r\n.checkbox-oculto:checked ~ .boton-flecha svg {\r\n  transform: rotate(180deg); \r\n}\r\n\r\n\/* --- ANIMACI\u00d3N DE DEGRADADO --- *\/\r\n.animacion-degradado {\r\n  position: relative;\r\n  overflow: hidden; \r\n}\r\n\r\n.animacion-degradado::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0; width: 100%; height: 100%;\r\n  background: linear-gradient(135deg, rgba(229, 231, 235, 1) 0%, rgba(243, 244, 246, 1) 100%);\r\n  z-index: 10; \r\n  opacity: 1; \r\n  pointer-events: none; \r\n  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);\r\n  will-change: opacity;\r\n}\r\n\r\n.animacion-degradado .video-titulo-principal,\r\n.animacion-degradado .conclusiones-titulo-principal,\r\n.animacion-degradado .boton-flecha,\r\n.animacion-degradado .titulo-conclusion-visible,\r\n.animacion-degradado iframe {\r\n  opacity: 0; \r\n  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; \r\n}\r\n\r\n.animacion-degradado.visible::before { opacity: 0; }\r\n\r\n.animacion-degradado.visible .video-titulo-principal,\r\n.animacion-degradado.visible .conclusiones-titulo-principal,\r\n.animacion-degradado.visible .boton-flecha,\r\n.animacion-degradado.visible .titulo-conclusion-visible,\r\n.animacion-degradado.visible iframe {\r\n  opacity: 1;\r\n}\r\n\r\n\/* Ajuste responsive optimizado *\/\r\n@media (max-width: 768px) {\r\n  .video-titulo-principal, .conclusiones-titulo-principal {\r\n    font-size: 2.2rem;\r\n  }\r\n  .item-conclusion {\r\n    display: grid;\r\n    grid-template-columns: auto 1fr;\r\n    gap: 10px;\r\n    width: 100%;\r\n    border-radius: 10px;\r\n  }\r\n  .titulo-conclusion-visible {\r\n    margin-left: 0;\r\n  }\r\n  .checkbox-oculto:checked ~ .contenido-desplegable {\r\n    grid-column: 1 \/ -1;\r\n    margin-left: 0;\r\n    margin-top: 2px;\r\n  }\r\n  .texto-conclusion {\r\n    width: 100%; \r\n    font-size: 1rem;\r\n    white-space: normal; \r\n  }\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>HISTORY OS Explora l&#8217;evoluci\u00f3 del disseny i les tend\u00e8ncies a trav\u00e9s d&#8217;un escriptori interactiu. Comencem IDEA I CONCEPTE El Tema: Explorar l&#8217;evoluci\u00f3 del disseny des d&#8217;una perspectiva hist\u00f2rica i sociol\u00f2gica. L&#8217;Objectiu: Demostrar que el disseny \u00e9s una resposta a les necessitats de cada \u00e8poca. El Format: Un fanzine interactiu digital que simula un l&#8217;ordinador. REFERENTS [&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-52","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/25007.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/25007.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/25007.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/25007.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/25007.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=52"}],"version-history":[{"count":355,"href":"https:\/\/25007.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":451,"href":"https:\/\/25007.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/52\/revisions\/451"}],"wp:attachment":[{"href":"https:\/\/25007.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}