{"id":1483,"date":"2025-09-24T09:26:44","date_gmt":"2025-09-24T09:26:44","guid":{"rendered":"https:\/\/analuzpacheco.com\/?page_id=1483"},"modified":"2025-11-06T12:01:01","modified_gmt":"2025-11-06T12:01:01","slug":"design","status":"publish","type":"page","link":"https:\/\/analuzpacheco.com\/it\/design\/","title":{"rendered":"Design"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1483\" class=\"elementor elementor-1483\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c88536 e-con-full e-flex e-con e-parent\" data-id=\"3c88536\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;none&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-7f6ecf1 e-flex e-con-boxed e-con e-child\" data-id=\"7f6ecf1\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e8fbe40 elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"e8fbe40\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Social media - website creation and management<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b15955f elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"b15955f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">for Escuela Conciencia Hol\u00edstica (Holistic Awareness School)<\/h2>\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-9544b8b e-flex e-con-boxed e-con e-child\" data-id=\"9544b8b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-413f25a e-con-full e-flex e-con e-child\" data-id=\"413f25a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6153c24 elementor-widget elementor-widget-text-editor\" data-id=\"6153c24\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Colaboro con la <em>Escuela Conciencia Hol\u00edstica<\/em> acompa\u00f1ando su presencia digital: dise\u00f1o, gesti\u00f3n y actualizaci\u00f3n del sitio web, adem\u00e1s de la creaci\u00f3n de contenido org\u00e1nico para redes y apoyo en la comunicaci\u00f3n interna.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e33513 elementor-align-right elementor-widget elementor-widget-button\" data-id=\"4e33513\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/escuelaconcienciaholistica.com\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Website\u2197<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6880ee3 e-con-full e-flex e-con e-child\" data-id=\"6880ee3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6318b5f elementor-widget elementor-widget-html\" data-id=\"6318b5f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.modal {\r\n  display: none;\r\n  position: fixed;\r\n  inset: 0;\r\n  background: rgba(0,0,0,0.85);\r\n  z-index: 999999;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 30px;\r\n}\r\n\r\n.modal-content {\r\n  background: #111;\r\n  border-radius: 15px;\r\n  max-width: 900px;\r\n  width: 90%;\r\n  color: #fff;\r\n  text-align: center;\r\n  position: relative;\r\n  padding: 20px;\r\n}\r\n\r\n.modal img {\r\n  width: 100%;\r\n  border-radius: 10px;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.close {\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 15px;\r\n  font-size: 24px;\r\n  cursor: pointer;\r\n}\r\n\r\n\/* \ud83d\udd39 Imagen de portada (preview) *\/\r\n.preview {\r\n  cursor: pointer;\r\n  display: block;\r\n  margin: 0 auto;\r\n  max-width: 900px;\r\n  border-radius: 15px !important; \/* fuerza los bordes redondeados *\/\r\n  box-shadow: 0 6px 20px rgba(0,0,0,0.3);\r\n  transition: transform 0.3s ease;\r\n  overflow: hidden; \/* asegura que el borde recorte la imagen *\/\r\n}\r\n\r\n.preview:hover {\r\n  transform: scale(1.03);\r\n}\r\n<\/style>\r\n\r\n<!-- Imagen de portada -->\r\n<img decoding=\"async\" src=\"https:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/11\/preview-website-escuela_11.jpg\" alt=\"Escuela Conciencia Hol\u00edstica\" class=\"preview\" onclick=\"document.getElementById(\" style.display=\"flex\" title=\"Design\">\r\n\r\n<!-- Modal -->\r\n<div id=\"modalEscuela\" class=\"modal\" onclick=\"if(event.target===this) this.style.display='none'\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\" onclick=\"document.getElementById('modalEscuela').style.display='none'\">&times;<\/span>\r\n    <h3>Escuela Conciencia Hol\u00edstica<\/h3>\r\n    <img decoding=\"async\" src=\"https:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/11\/escuela-sitio-web_01.jpg\" alt=\"Escuela Sitio Web 01\" title=\"Design\">\r\n    <img decoding=\"async\" src=\"https:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/11\/escuela-sitio-web_02.jpg\" alt=\"Escuela Sitio Web 02\" title=\"Design\">\r\n    <img decoding=\"async\" src=\"https:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/11\/escuela-sitio-web_03.jpg\" alt=\"Escuela Sitio Web 03\" title=\"Design\">\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/11\/escuela-sitio-web_04.jpg\" alt=\"Escuela Sitio Web 04\" title=\"Design\">\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/11\/escuela-sitio-web_05.jpg\" alt=\"Escuela Sitio Web 05\" title=\"Design\">\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const preview = document.querySelector(\".preview\");\r\n  const modal = document.getElementById(\"modalEscuela\");\r\n  const close = modal?.querySelector(\".close\");\r\n\r\n  if (!preview || !modal) return;\r\n\r\n  \/\/ Abrir modal al hacer clic en la preview\r\n  preview.addEventListener(\"click\", () => {\r\n    modal.style.display = \"flex\";\r\n  });\r\n\r\n  \/\/ Cerrar modal al hacer clic en la X\r\n  close?.addEventListener(\"click\", (e) => {\r\n    e.stopPropagation();\r\n    modal.style.display = \"none\";\r\n  });\r\n\r\n  \/\/ Cerrar modal al hacer clic fuera del contenido\r\n  modal.addEventListener(\"click\", (e) => {\r\n    if (e.target === modal) modal.style.display = \"none\";\r\n  });\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\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 class=\"elementor-element elementor-element-388950c elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"388950c\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ebf7ff4 e-con-full e-flex e-con e-parent\" data-id=\"ebf7ff4\" data-element_type=\"container\" id=\"proyecto1\">\n\t\t<div class=\"elementor-element elementor-element-59e61aa e-con-full e-flex e-con e-child\" data-id=\"59e61aa\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c7ce2e0 elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"c7ce2e0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Design for \u201cAlgo Cinefila\u201d Twitch overlays<\/h2>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3c9f0ff e-grid e-con-full e-con e-child\" data-id=\"3c9f0ff\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b27ce7 elementor-widget elementor-widget-html\" data-id=\"1b27ce7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* --- Estilos del bloque y modal --- *\/\r\n.design-item {\r\n  cursor: pointer;\r\n  position: relative;\r\n  display: inline-block;\r\n  overflow: hidden;\r\n}\r\n.design-item img {\r\n  width: 100%;\r\n  display: block;\r\n  border-radius: 12px;\r\n  transition: transform 0.4s ease;\r\n}\r\n.design-item:hover img {\r\n  transform: scale(1.05);\r\n}\r\n.modal {\r\n  display: none;\r\n  position: fixed;\r\n  z-index: 9999;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: rgba(0,0,0,0.9);\r\n  overflow-y: auto;\r\n  padding-top: 60px;\r\n}\r\n.modal-content {\r\n  background: #111;\r\n  padding: 30px;\r\n  border-radius: 15px;\r\n  max-width: 900px;\r\n  width: 90%;\r\n  margin: auto;\r\n  color: white;\r\n  text-align: center;\r\n  position: relative;\r\n}\r\n.modal h3 {\r\n  font-family: 'BODAR', sans-serif;\r\n  color: #F8760D;\r\n  font-size: 28px;\r\n  margin-bottom: 20px;\r\n}\r\n.modal img {\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 10px;\r\n  margin-bottom: 15px;\r\n}\r\n\r\n\/* --- Ajuste del video para que tenga misma proporci\u00f3n que las im\u00e1genes --- *\/\r\n.video-wrapper {\r\n  position: relative;\r\n  width: 100%;\r\n  padding-bottom: 56.25%; \/* Relaci\u00f3n 16:9, pod\u00e9s aumentar si quer\u00e9s m\u00e1s altura *\/\r\n  border-radius: 10px;\r\n  overflow: hidden;\r\n  margin-bottom: 15px;\r\n}\r\n.video-wrapper iframe {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  border: none;\r\n  border-radius: 10px;\r\n}\r\n\r\n.close {\r\n  position: absolute;\r\n  top: 15px;\r\n  right: 20px;\r\n  font-size: 28px;\r\n  color: white;\r\n  cursor: pointer;\r\n}\r\n<\/style>\r\n\r\n<!-- Portada (lo que se ve en la p\u00e1gina) -->\r\n<div class=\"design-item\" onclick=\"openModal('modalFinalDesigns')\">\r\n  <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/logo-entero_confondo_AC-scaled.png\" alt=\"Final designs\" title=\"Design\">\r\n<\/div>\r\n\r\n<!-- Modal (oculto hasta que se hace clic) -->\r\n<div id=\"modalFinalDesigns\" class=\"modal\" aria-hidden=\"true\">\r\n  <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\">\r\n    <span class=\"close\" onclick=\"closeModal('modalFinalDesigns')\" aria-label=\"Cerrar\">&times;<\/span>\r\n    <h3>Final designs<\/h3>\r\n\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/diseno-colo-web_01.jpg\" alt=\"Diseno Colo Web 01\" title=\"Design\">\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/diseno-colo-web_02.jpg\" alt=\"Diseno Colo Web 02\" title=\"Design\">\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/diseno-colo-web_03.jpg\" alt=\"Diseno Colo Web 03\" title=\"Design\">\r\n\r\n    <!-- Embed de YouTube -->\r\n    <div class=\"video-wrapper\">\r\n      <iframe \r\n        src=\"https:\/\/www.youtube.com\/embed\/JIf3vNOyTxQ\"\r\n        title=\"Final designs video\"\r\n        frameborder=\"0\"\r\n        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n        allowfullscreen>\r\n      <\/iframe>\r\n    <\/div>\r\n\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/diseno-colo-web_04.jpg\" alt=\"Diseno Colo Web 04\" title=\"Design\">\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/diseno-colo-web_05.jpg\" alt=\"Diseno Colo Web 05\" title=\"Design\">\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/diseno-colo-web_06.jpg\" alt=\"Diseno Colo Web 06\" title=\"Design\">\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  window.openModal = function(id) {\r\n    const modal = document.getElementById(id);\r\n    if (!modal || modal._isOpen) return;\r\n\r\n    modal.style.display = \"block\";\r\n    modal.setAttribute(\"aria-hidden\", \"false\");\r\n    document.body.style.overflow = \"hidden\";\r\n    modal._isOpen = true;\r\n\r\n    const outsideClickHandler = (e) => {\r\n      const content = modal.querySelector(\".modal-content\");\r\n      if (content && !content.contains(e.target)) closeModal(id);\r\n    };\r\n\r\n    const escHandler = (e) => {\r\n      if (e.key === \"Escape\") closeModal(id);\r\n    };\r\n\r\n    modal._outsideClickHandler = outsideClickHandler;\r\n    modal._escHandler = escHandler;\r\n\r\n    setTimeout(() => {\r\n      document.addEventListener(\"click\", outsideClickHandler);\r\n      document.addEventListener(\"keydown\", escHandler);\r\n    }, 50);\r\n\r\n    const content = modal.querySelector(\".modal-content\");\r\n    if (content && !content._stopPropagationAdded) {\r\n      content.addEventListener(\"click\", (ev) => ev.stopPropagation());\r\n      content._stopPropagationAdded = true;\r\n    }\r\n  };\r\n\r\n  window.closeModal = function(id) {\r\n    const modal = document.getElementById(id);\r\n    if (!modal || !modal._isOpen) return;\r\n\r\n    modal.style.display = \"none\";\r\n    modal.setAttribute(\"aria-hidden\", \"true\");\r\n    document.body.style.overflow = \"auto\";\r\n    modal._isOpen = false;\r\n\r\n    \/\/ Pausar el video de YouTube al cerrar\r\n    const iframe = modal.querySelector(\"iframe\");\r\n    if (iframe) {\r\n      iframe.src = iframe.src;\r\n    }\r\n\r\n    document.removeEventListener(\"click\", modal._outsideClickHandler);\r\n    document.removeEventListener(\"keydown\", modal._escHandler);\r\n  };\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d6f9ab elementor-widget elementor-widget-text-editor\" data-id=\"5d6f9ab\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>In questo progetto ho progettato elementi e sezioni per Twitch partendo da zero, scegliendo la tavolozza dei colori e facendo prove per creare un personaggio del canale che rappresentasse Coloradixx, la proprietaria del canale Twitch di Algo Cinefila. Un progetto digitale autogestito.<\/p><p>\u2190 muestras de dise\u00f1os<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0790e21 e-con-full e-flex e-con e-child\" data-id=\"0790e21\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-73bddee elementor-widget elementor-widget-html\" data-id=\"73bddee\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* --- Estilos espec\u00edficos del bloque 2 --- *\/\r\n.design-item {\r\n  cursor: pointer;\r\n  position: relative;\r\n  display: inline-block;\r\n  overflow: hidden;\r\n  border-radius: 16px;\r\n  transition: transform 0.4s ease;\r\n}\r\n\r\n\/* Contenedor centrador *\/\r\n.design-item-wrapper {\r\n  text-align: center;\r\n  width: 100%;\r\n  margin: 60px 0;\r\n}\r\n\r\n.design-item img {\r\n  width: 100%;\r\n  max-width: 900px;\r\n  display: block;\r\n  margin: 0 auto;\r\n  border-radius: 16px;\r\n  transition: transform 0.4s ease;\r\n  box-shadow: 0 6px 20px rgba(0,0,0,0.35);\r\n}\r\n\r\n.design-item:hover img {\r\n  transform: scale(1.03);\r\n}\r\n\r\n\/* MODAL *\/\r\n.modal {\r\n  display: none;\r\n  position: fixed;\r\n  z-index: 9999;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: rgba(0,0,0,0.9);\r\n  overflow-y: auto;\r\n  padding-top: 60px;\r\n}\r\n.modal-content {\r\n  background: #111;\r\n  padding: 30px;\r\n  border-radius: 15px;\r\n  max-width: 900px;\r\n  width: 90%;\r\n  margin: auto;\r\n  color: white;\r\n  text-align: center;\r\n  position: relative;\r\n}\r\n.modal h3 {\r\n  font-family: 'BODAR', sans-serif;\r\n  color: #F8760D;\r\n  font-size: 28px;\r\n  margin-bottom: 20px;\r\n}\r\n.modal img,\r\n.modal video {\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 10px;\r\n  margin-bottom: 15px;\r\n}\r\n.close {\r\n  position: absolute;\r\n  top: 15px;\r\n  right: 20px;\r\n  font-size: 28px;\r\n  color: white;\r\n  cursor: pointer;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 768px) {\r\n  .design-item img {\r\n    max-width: 95%;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<!-- Portada -->\r\n<div class=\"design-item-wrapper\">\r\n  <div class=\"design-item\" onclick=\"openModal('modalProcessDesigns')\">\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/wacht-the-process-algo-cinefila_11-1.jpg\" alt=\"Process algo cinefila\" title=\"Design\">\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- Modal -->\r\n<div id=\"modalProcessDesigns\" class=\"modal\" aria-hidden=\"true\">\r\n  <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\">\r\n    <span class=\"close\" onclick=\"closeModal('modalProcessDesigns')\" aria-label=\"Cerrar\">&times;<\/span>\r\n    <h3>PROCESS<\/h3>\r\n\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/diseno-colo-web_08.jpg\" alt=\"Diseno Colo Web 08\" title=\"Design\">\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/diseno-colo-web_07.jpg\" alt=\"Diseno Colo Web 07\" title=\"Design\">\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/diseno-colo-web_09.jpg\" alt=\"Diseno Colo Web 09\" title=\"Design\">\r\n    <img decoding=\"async\" src=\"http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/diseno-colo-web_10.jpg\" alt=\"Diseno Colo Web 10\" title=\"Design\">\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  window.openModal = function(id) {\r\n    const modal = document.getElementById(id);\r\n    if (!modal || modal._isOpen) return;\r\n\r\n    modal.style.display = \"block\";\r\n    modal.setAttribute(\"aria-hidden\", \"false\");\r\n    document.body.style.overflow = \"hidden\";\r\n    modal._isOpen = true;\r\n\r\n    const outsideClickHandler = (e) => {\r\n      const content = modal.querySelector(\".modal-content\");\r\n      if (content && !content.contains(e.target)) closeModal(id);\r\n    };\r\n\r\n    const escHandler = (e) => {\r\n      if (e.key === \"Escape\") closeModal(id);\r\n    };\r\n\r\n    modal._outsideClickHandler = outsideClickHandler;\r\n    modal._escHandler = escHandler;\r\n\r\n    setTimeout(() => {\r\n      document.addEventListener(\"click\", outsideClickHandler);\r\n      document.addEventListener(\"keydown\", escHandler);\r\n    }, 50);\r\n\r\n    const content = modal.querySelector(\".modal-content\");\r\n    if (content && !content._stopPropagationAdded) {\r\n      content.addEventListener(\"click\", (ev) => ev.stopPropagation());\r\n      content._stopPropagationAdded = true;\r\n    }\r\n  };\r\n\r\n  window.closeModal = function(id) {\r\n    const modal = document.getElementById(id);\r\n    if (!modal || !modal._isOpen) return;\r\n\r\n    modal.style.display = \"none\";\r\n    modal.setAttribute(\"aria-hidden\", \"true\");\r\n    document.body.style.overflow = \"auto\";\r\n    modal._isOpen = false;\r\n\r\n    document.removeEventListener(\"click\", modal._outsideClickHandler);\r\n    document.removeEventListener(\"keydown\", modal._escHandler);\r\n\r\n    const vids = modal.querySelectorAll(\"video\");\r\n    vids.forEach(v => { try { v.pause(); v.currentTime = 0; } catch(e){} });\r\n  };\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68e6458 elementor-widget elementor-widget-html\" data-id=\"68e6458\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@keyframes slideInRight {\r\n  from { transform: translateX(40px); opacity: 0; }\r\n  to   { transform: translateX(0);    opacity: 1; }\r\n}\r\n\r\n\/* \ud83d\udd39 Nueva parte: en pantallas menores a 768px (celulares) *\/\r\n@media (max-width: 768px) {\r\n  #proyecto1 > div:first-child img {\r\n    opacity: 0.2 !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const CONTAINER_ID = 'proyecto1'; \/\/ \ud83d\udc48 ID del contenedor\r\n  const IMAGE_URL = 'http:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/10\/colito-color_AC-scaled.png';\r\n\r\n  const FINAL_RIGHT = '30px';\r\n  const FINAL_BOTTOM = '20px';\r\n  const MAX_WIDTH = '450px';\r\n  const ANIM_DURATION = 900;\r\n\r\n  const container = document.getElementById(CONTAINER_ID);\r\n  if(!container) return;\r\n\r\n  if(getComputedStyle(container).position === 'static'){\r\n    container.style.position = 'relative';\r\n  }\r\n\r\n  const bg = document.createElement('div');\r\n  bg.style.position = 'absolute';\r\n  bg.style.bottom = '0';\r\n  bg.style.right = `-${parseInt(MAX_WIDTH,10)+200}px`;\r\n  bg.style.maxWidth = MAX_WIDTH;\r\n  bg.style.width = MAX_WIDTH;\r\n  bg.style.opacity = '0';\r\n  bg.style.pointerEvents = 'none';\r\n  bg.style.zIndex = '0';\r\n\r\n  const img = new Image();\r\n  img.src = IMAGE_URL;\r\n  img.style.width = '100%';\r\n  img.style.height = 'auto';\r\n  img.style.display = 'block';\r\n  bg.appendChild(img);\r\n\r\n  container.insertBefore(bg, container.firstChild);\r\n\r\n  Array.from(container.children).forEach(child => {\r\n    if(child !== bg){\r\n      if(getComputedStyle(child).position === 'static'){\r\n        child.style.position = 'relative';\r\n      }\r\n      child.style.zIndex = '2';\r\n    }\r\n  });\r\n\r\n  bg.style.transition = `right ${ANIM_DURATION}ms ease-out, opacity ${ANIM_DURATION}ms ease-out`;\r\n  setTimeout(() => {\r\n    bg.style.right = FINAL_RIGHT;\r\n    bg.style.bottom = FINAL_BOTTOM;\r\n    bg.style.opacity = '1';\r\n    bg.style.animation = `slideInRight ${ANIM_DURATION}ms ease-out forwards`;\r\n  }, 60);\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb00e88 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"cb00e88\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b64fcec e-con-full e-flex e-con e-parent\" data-id=\"b64fcec\" data-element_type=\"container\" id=\"proyecto2\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e41490d elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"e41490d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Design cover for side x<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-224c5c2 e-con-full e-flex e-con e-parent\" data-id=\"224c5c2\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a2770e0 e-grid e-con-full e-con e-child\" data-id=\"a2770e0\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-90148c8 e-con-full e-flex e-con e-child\" data-id=\"90148c8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb03bab elementor-widget elementor-widget-image-carousel\" data-id=\"eb03bab\" data-element_type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;none&quot;,&quot;effect&quot;:&quot;fade&quot;,&quot;speed&quot;:800,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Carrusel de im\u00e1genes\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 di 2\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/11\/Lost-signals-vol1-Nweb.png\" alt=\"lost signals vol1 nweb\" title=\"Design\"><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 di 2\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/11\/Lost-signals-vol1-Bweb.png\" alt=\"lost signals vol1 bweb\" title=\"Design\"><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0358d38 elementor-widget elementor-widget-text-editor\" data-id=\"0358d38\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Proyecto musical Golden Factory SIDE X. Cover para spotify y reel de lanzamiento en instagram.<\/p><p>Dise\u00f1o b\u00e1sico a mano con animacion minimalista.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9cdf8b5 elementor-widget elementor-widget-image-carousel\" data-id=\"9cdf8b5\" data-element_type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;none&quot;,&quot;effect&quot;:&quot;fade&quot;,&quot;speed&quot;:800,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Carrusel de im\u00e1genes\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 di 2\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/11\/Lost-signals-vol2-Nweb.png\" alt=\"lost signals vol2 nweb\" title=\"Design\"><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 di 2\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/analuzpacheco.com\/wp-content\/uploads\/2025\/11\/Lost-signals-vol2-Bweb.png\" alt=\"lost signals vol2 bweb\" title=\"Design\"><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4329f8d elementor-widget elementor-widget-video\" data-id=\"4329f8d\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtube.com\\\/shorts\\\/IvFzau4uYJA&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f34d4f0 elementor-widget elementor-widget-video\" data-id=\"f34d4f0\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtube.com\\\/shorts\\\/gD8xqEFlaTo&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c3e02d0 e-con-full e-flex e-con e-parent\" data-id=\"c3e02d0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-87dce8b elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"87dce8b\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e30657f elementor-widget elementor-widget-html\" data-id=\"e30657f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* ===== INTERRUPTOR ===== *\/\r\n.theme-toggle {\r\n  position: fixed;\r\n  top: 20px;\r\n  right: 25px;\r\n  width: 55px;\r\n  height: 30px;\r\n  background: #127B76;\r\n  border-radius: 30px;\r\n  cursor: pointer;\r\n  transition: background 0.4s ease;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 3px;\r\n  box-shadow: 0 2px 6px rgba(0,0,0,0.25);\r\n  z-index: 9999;\r\n}\r\n.toggle-circle {\r\n  width: 24px;\r\n  height: 24px;\r\n  background: #fff;\r\n  border-radius: 50%;\r\n  transition: transform 0.4s ease;\r\n}\r\n\r\n\/* ===== MODO OSCURO ===== *\/\r\nbody.dark-mode {\r\n  background-color: #1c1c1c !important;\r\n  color: #9CCCB0 !important;\r\n  transition: background-color 0.6s ease, color 0.6s ease;\r\n}\r\n\r\nbody.dark-mode .theme-toggle {\r\n  background: #9CCCB0;\r\n}\r\nbody.dark-mode .toggle-circle {\r\n  transform: translateX(25px);\r\n}\r\n\r\n\/* ===== TEXTOS ===== *\/\r\nbody {\r\n  transition: background-color 0.6s ease, color 0.6s ease;\r\n  color: #000; \/* texto base modo claro *\/\r\n}\r\np, span, li {\r\n  color: inherit;\r\n}\r\n\r\n\/* ===== LINKS ===== *\/\r\na {\r\n  color: #127B76;\r\n  transition: color 0.4s ease;\r\n}\r\nbody.dark-mode a {\r\n  color: #9CCCB0;\r\n}\r\nbody.dark-mode a:hover {\r\n  color: #F8760D;\r\n}\r\n\r\n\/* ===== OTROS ELEMENTOS (por si hay fondos blancos) ===== *\/\r\nbody.dark-mode .elementor-section,\r\nbody.dark-mode .elementor-column,\r\nbody.dark-mode .elementor-widget,\r\nbody.dark-mode .elementor-container {\r\n  background-color: transparent !important;\r\n}\r\n<\/style>\r\n\r\n<!-- INTERRUPTOR -->\r\n<div class=\"theme-toggle\" onclick=\"toggleTheme()\">\r\n  <div class=\"toggle-circle\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* === Guardar y aplicar tema === *\/\r\nfunction applyTheme(theme) {\r\n  if (theme === \"dark\") {\r\n    document.body.classList.add(\"dark-mode\");\r\n  } else {\r\n    document.body.classList.remove(\"dark-mode\");\r\n  }\r\n}\r\n\r\n\/* === Alternar tema === *\/\r\nfunction toggleTheme() {\r\n  const isDark = document.body.classList.toggle(\"dark-mode\");\r\n  localStorage.setItem(\"theme\", isDark ? \"dark\" : \"light\");\r\n}\r\n\r\n\/* === Cargar tema guardado === *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const savedTheme = localStorage.getItem(\"theme\") || \"light\";\r\n  applyTheme(savedTheme);\r\n});\r\n<\/script>\r\n\r\n<style>\r\n\/* Forzar textos negros a blanco en modo oscuro *\/\r\nbody.dark-mode, \r\nbody.dark-mode p, \r\nbody.dark-mode span, \r\nbody.dark-mode h4, \r\nbody.dark-mode h5, \r\nbody.dark-mode li, \r\nbody.dark-mode div.elementor-widget-container {\r\n    color: #ffffff !important;\r\n}\r\n\r\n\/* Mantener tus textos verdes claros y naranja *\/\r\nbody.dark-mode a {\r\n    color: #9CCCB0 !important;\r\n}\r\nbody.dark-mode a:hover {\r\n    color: #F8760D !important;\r\n}\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Social media &#8211; website creation and management for Escuela Conciencia Hol\u00edstica (Holistic Awareness School) Colaboro con la Escuela Conciencia Hol\u00edstica acompa\u00f1ando su presencia digital: dise\u00f1o, gesti\u00f3n y actualizaci\u00f3n del sitio web, adem\u00e1s de la creaci\u00f3n de contenido org\u00e1nico para redes y apoyo en la comunicaci\u00f3n interna. Website\u2197 &times; Escuela Conciencia Hol\u00edstica Design for \u201cAlgo Cinefila\u201d [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1483","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"anitapacheco36@gmail.com","author_link":"https:\/\/analuzpacheco.com\/it\/author\/anitapacheco36gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Social media &#8211; website creation and management for Escuela Conciencia Hol\u00edstica (Holistic Awareness School) Colaboro con la Escuela Conciencia Hol\u00edstica acompa\u00f1ando su presencia digital: dise\u00f1o, gesti\u00f3n y actualizaci\u00f3n del sitio web, adem\u00e1s de la creaci\u00f3n de contenido org\u00e1nico para redes y apoyo en la comunicaci\u00f3n interna. Website\u2197 &times; Escuela Conciencia Hol\u00edstica Design for \u201cAlgo Cinefila\u201d&hellip;","_links":{"self":[{"href":"https:\/\/analuzpacheco.com\/it\/wp-json\/wp\/v2\/pages\/1483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/analuzpacheco.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/analuzpacheco.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/analuzpacheco.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/analuzpacheco.com\/it\/wp-json\/wp\/v2\/comments?post=1483"}],"version-history":[{"count":236,"href":"https:\/\/analuzpacheco.com\/it\/wp-json\/wp\/v2\/pages\/1483\/revisions"}],"predecessor-version":[{"id":2000,"href":"https:\/\/analuzpacheco.com\/it\/wp-json\/wp\/v2\/pages\/1483\/revisions\/2000"}],"wp:attachment":[{"href":"https:\/\/analuzpacheco.com\/it\/wp-json\/wp\/v2\/media?parent=1483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}