{"id":16,"date":"2026-04-02T20:33:17","date_gmt":"2026-04-02T20:33:17","guid":{"rendered":"https:\/\/valpito.cl\/yosoytu\/home\/"},"modified":"2026-04-05T03:48:46","modified_gmt":"2026-04-05T06:48:46","slug":"home","status":"publish","type":"page","link":"https:\/\/valpito.cl\/yosoytu\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"16\" class=\"elementor elementor-16\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2fca74c gcb-target e-flex e-con-boxed e-con e-parent\" data-id=\"2fca74c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2bb104f e-con-full e-flex e-con e-child\" data-id=\"2bb104f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4fe0e52 elementor-widget elementor-widget-heading\" data-id=\"4fe0e52\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">13:22:33<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51aafb0 elementor-widget elementor-widget-html\" data-id=\"51aafb0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================\r\n     \ud83d\udd25 Widget Audio Valpito\r\n     ========================= -->\r\n\r\n<div class=\"audio-pro-max\">\r\n\r\n  <!-- \ud83c\udfae CONTROLES -->\r\n  <div class=\"controls\">\r\n    <div class=\"group\">\r\n      <span class=\"jump\">-5<\/span>\r\n      <button class=\"back\">\r\n        <!-- \u23ea SVG -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <polygon points=\"11,19 2,12 11,5\"><\/polygon>\r\n          <polygon points=\"22,19 13,12 22,5\"><\/polygon>\r\n        <\/svg>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <button class=\"play\">\r\n      <!-- \u25b6 SVG -->\r\n      <svg class=\"icon-play\" viewBox=\"0 0 24 24\">\r\n        <polygon points=\"5,3 19,12 5,21\"><\/polygon>\r\n      <\/svg>\r\n      <!-- \u275a\u275a SVG -->\r\n      <svg class=\"icon-pause\" viewBox=\"0 0 24 24\" style=\"display:none;\">\r\n        <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n        <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n      <\/svg>\r\n    <\/button>\r\n\r\n    <div class=\"group\">\r\n      <button class=\"forward\">\r\n        <!-- \u23e9 SVG -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <polygon points=\"2,5 11,12 2,19\"><\/polygon>\r\n          <polygon points=\"13,5 22,12 13,19\"><\/polygon>\r\n        <\/svg>\r\n      <\/button>\r\n      <span class=\"jump\">+5<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \ud83d\udcca BARRA DE TIEMPO -->\r\n  <div class=\"progress-row\">\r\n    <span class=\"current\">--:--:--<\/span>\r\n\r\n    <div class=\"timeline\">\r\n      <div class=\"progress\"><\/div>\r\n      <div class=\"thumb\"><\/div>\r\n    <\/div>\r\n\r\n    <span class=\"duration\">--:--:--<\/span>\r\n  <\/div>\r\n\r\n  <!-- \ud83c\udfa7 AUDIO -->\r\n  <audio preload=\"auto\"\r\n    src=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_155418_v01.mp3\">\r\n  <\/audio>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* \ud83d\udd33 CONTENEDOR PRINCIPAL *\/\r\n.audio-pro-max {\r\n  width: 320px; \/* \ud83d\udccf ancho total *\/\r\n  padding: 12px 20px;\r\n  background: #0d0d0d; \/* \ud83c\udfa8 color fondo *\/\r\n  border-radius: 50px;\r\n  font-family: inherit; \/* usa fuente global de WordPress *\/\r\n}\r\n\r\n\/* \ud83c\udfae CONTROLES *\/\r\n.controls {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 22px; \/* \ud83d\udccf separaci\u00f3n entre botones *\/\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.group {\r\n  display: flex;\r\n  gap: 6px;\r\n  align-items: center;\r\n}\r\n\r\n\/* \u23f1\ufe0f TIEMPOS (hora actual y duraci\u00f3n) *\/\r\n.current, .duration {\r\n  font-size: 13px; \/* \ud83d\udccf tama\u00f1o texto *\/\r\n  color: #fff; \/* \ud83c\udfa8 color texto *\/\r\n  font-family: monospace; \/* \ud83d\udd12 evita que \u201csalte\u201d el n\u00famero *\/\r\n}\r\n\r\n\/* \ud83d\udd39 TEXTO -5 \/ +5 *\/\r\n.jump {\r\n  font-size: 11px;\r\n  color: #888; \/* \ud83c\udfa8 color secundario *\/\r\n}\r\n\r\n\/* \ud83d\udd18 BOTONES *\/\r\n.audio-pro-max button {\r\n  all: unset;\r\n  cursor: pointer;\r\n  width: 30px; \/* \ud83d\udccf tama\u00f1o bot\u00f3n *\/\r\n  height: 30px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: transform 0.15s ease; \/* \ud83d\udd25 suavidad base *\/\r\n}\r\n\r\n\/* \u2728 HOVER BOTONES *\/\r\n.audio-pro-max button:hover {\r\n  transform: scale(1.2); \/* \ud83d\udccf agranda 1.2 *\/\r\n}\r\n\r\n\/* \ud83c\udfaf ICONOS SVG *\/\r\n.audio-pro-max button svg {\r\n  width: 22px; \/* \ud83d\udccf tama\u00f1o iconos *\/\r\n  height: 22px;\r\n  fill: #fff; \/* \ud83c\udfa8 color iconos *\/\r\n  pointer-events: none;\r\n}\r\n\r\n\/* \ud83d\udcca BARRA CONTENEDORA *\/\r\n.progress-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n\/* \ud83d\udccf L\u00cdNEA DE TIEMPO *\/\r\n.timeline {\r\n  flex: 1;\r\n  height: 4px; \/* \ud83d\udccf grosor barra *\/\r\n  background: #2a2a2a; \/* \ud83c\udfa8 fondo barra *\/\r\n  border-radius: 10px;\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n\/* \u2b1c PROGRESO (parte reproducida) *\/\r\n.progress {\r\n  height: 100%;\r\n  width: 0%;\r\n  background: #fff; \/* \ud83c\udfa8 color progreso *\/\r\n  border-radius: 10px;\r\n}\r\n\r\n\/* \u2b55 C\u00cdRCULO (thumb) *\/\r\n.thumb {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 0%;\r\n  width: 12px; \/* \ud83d\udccf tama\u00f1o c\u00edrculo *\/\r\n  height: 12px;\r\n  background: #fff; \/* \ud83c\udfa8 color c\u00edrculo *\/\r\n  border-radius: 50%;\r\n  transform: translate(-50%, -50%);\r\n  cursor: grab;\r\n  touch-action: none; \/* \ud83d\udd25 necesario para mobile *\/\r\n}\r\n\r\n\/* \u270a cuando arrastras *\/\r\n.thumb:active {\r\n  cursor: grabbing;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n\r\nfunction format(sec){\r\n  const h = Math.floor(sec\/3600);\r\n  const m = Math.floor((sec%3600)\/60);\r\n  const s = Math.floor(sec%60);\r\n  return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;\r\n}\r\n\r\n\/* \u23f1\ufe0f obtiene hora desde nombre archivo *\/\r\nfunction getStart(url){\r\n  const m = url.match(\/_(\\d{6})_\/);\r\n  if(!m) return 0;\r\n  const t = m[1];\r\n  return t.slice(0,2)*3600 + t.slice(2,4)*60 + +t.slice(4,6);\r\n}\r\n\r\ndocument.querySelectorAll(\".audio-pro-max\").forEach(player => {\r\n\r\n  if(player.dataset.ready) return;\r\n  player.dataset.ready = \"1\";\r\n\r\n  const audio = player.querySelector(\"audio\");\r\n  const play = player.querySelector(\".play\");\r\n  const back = player.querySelector(\".back\");\r\n  const fwd = player.querySelector(\".forward\");\r\n  const bar = player.querySelector(\".timeline\");\r\n  const prog = player.querySelector(\".progress\");\r\n  const thumb = player.querySelector(\".thumb\");\r\n  const cur = player.querySelector(\".current\");\r\n  const dur = player.querySelector(\".duration\");\r\n\r\n  const iconPlay = play.querySelector(\".icon-play\");\r\n  const iconPause = play.querySelector(\".icon-pause\");\r\n\r\n  let dragging = false;\r\n\r\n  const start = getStart(audio.src);\r\n  cur.textContent = format(start);\r\n\r\n  \/* \u25b6 PLAY \/ PAUSE *\/\r\n  play.onclick = () => audio.paused ? audio.play().catch(()=>{}) : audio.pause();\r\n\r\n  audio.onplay = () => {\r\n    iconPlay.style.display = \"none\";\r\n    iconPause.style.display = \"block\";\r\n  };\r\n\r\n  audio.onpause = () => {\r\n    iconPlay.style.display = \"block\";\r\n    iconPause.style.display = \"none\";\r\n  };\r\n\r\n  \/* \u23ea \u23e9 *\/\r\n  back.onclick = () => audio.currentTime = Math.max(0, audio.currentTime - 5);\r\n  fwd.onclick = () => audio.currentTime = Math.min(audio.duration, audio.currentTime + 5);\r\n\r\n  \/* \u23f1\ufe0f DURACI\u00d3N *\/\r\n  audio.onloadedmetadata = () => {\r\n    dur.textContent = format(start + audio.duration);\r\n  };\r\n\r\n  function updateUI(t){\r\n    const p = (t \/ audio.duration) * 100 || 0;\r\n    prog.style.width = p + \"%\";\r\n    thumb.style.left = p + \"%\";\r\n    cur.textContent = format(start + t);\r\n  }\r\n\r\n  audio.ontimeupdate = () => {\r\n    if(!dragging) updateUI(audio.currentTime);\r\n  };\r\n\r\n  function getTime(clientX){\r\n    const r = bar.getBoundingClientRect();\r\n    const p = Math.max(0, Math.min(1, (clientX - r.left)\/r.width));\r\n    return p * audio.duration;\r\n  }\r\n\r\n  \/* CLICK EN BARRA *\/\r\n  bar.addEventListener(\"click\", e => {\r\n    audio.currentTime = getTime(e.clientX);\r\n  });\r\n\r\n  \/* DRAG (funciona en m\u00f3vil y desktop) *\/\r\n  thumb.addEventListener(\"pointerdown\", e => {\r\n    dragging = true;\r\n    thumb.setPointerCapture(e.pointerId);\r\n  });\r\n\r\n  thumb.addEventListener(\"pointermove\", e => {\r\n    if(!dragging) return;\r\n    updateUI(getTime(e.clientX));\r\n  });\r\n\r\n  thumb.addEventListener(\"pointerup\", e => {\r\n    if(!dragging) return;\r\n    audio.currentTime = getTime(e.clientX);\r\n    dragging = false;\r\n    thumb.releasePointerCapture(e.pointerId);\r\n  });\r\n\r\n  thumb.addEventListener(\"pointercancel\", () => dragging = false);\r\n\r\n});\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ab4c2b elementor-widget elementor-widget-text-editor\" data-id=\"1ab4c2b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/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-ffcf2c0 e-con-full e-flex e-con e-child\" data-id=\"ffcf2c0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e47d80 elementor-widget elementor-widget-image\" data-id=\"1e47d80\" data-element_type=\"widget\" data-e-type=\"widget\" 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:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/elementor\/thumbs\/VALPITO.CL_R30_20230203_155418_v01-rlfkqtopeydbs14r0j63ub698oiw3oczz7es6dig1s.jpg\" title=\"VALPITO.CL_R30_20230203_155418_v01\" alt=\"Reuni\u00f3n 30 de Historias Pr\u00edstinas del Puerto de Valpara\u00edso, encuentro para rescatar memorias y relatos del puerto\" 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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b6b27ea gcb-target e-flex e-con-boxed e-con e-parent\" data-id=\"b6b27ea\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-e18e535 e-con-full e-flex e-con e-child\" data-id=\"e18e535\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e12149 elementor-widget elementor-widget-image\" data-id=\"0e12149\" data-element_type=\"widget\" data-e-type=\"widget\" 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:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/elementor\/thumbs\/VALPITO.CL_R30_20230203_160814_v01-rlfkr7sa9gwmm6k9q79idpm65gleb4wz1572dixjgg.jpg\" title=\"VALPITO.CL_R30_20230203_160814_v01\" alt=\"Reuni\u00f3n 30 de Historias Pr\u00edstinas del Puerto de Valpara\u00edso, encuentro para rescatar memorias y relatos del puerto\" 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-bcca796 e-con-full e-flex e-con e-child\" data-id=\"bcca796\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b816669 elementor-widget elementor-widget-html\" data-id=\"b816669\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================\r\n     \ud83d\udd25 Widget Audio Valpito\r\n     ========================= -->\r\n\r\n<div class=\"audio-pro-max\">\r\n\r\n  <!-- \ud83c\udfae CONTROLES -->\r\n  <div class=\"controls\">\r\n    <div class=\"group\">\r\n      <span class=\"jump\">-5<\/span>\r\n      <button class=\"back\">\r\n        <!-- \u23ea SVG -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <polygon points=\"11,19 2,12 11,5\"><\/polygon>\r\n          <polygon points=\"22,19 13,12 22,5\"><\/polygon>\r\n        <\/svg>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <button class=\"play\">\r\n      <!-- \u25b6 SVG -->\r\n      <svg class=\"icon-play\" viewBox=\"0 0 24 24\">\r\n        <polygon points=\"5,3 19,12 5,21\"><\/polygon>\r\n      <\/svg>\r\n      <!-- \u275a\u275a SVG -->\r\n      <svg class=\"icon-pause\" viewBox=\"0 0 24 24\" style=\"display:none;\">\r\n        <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n        <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n      <\/svg>\r\n    <\/button>\r\n\r\n    <div class=\"group\">\r\n      <button class=\"forward\">\r\n        <!-- \u23e9 SVG -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <polygon points=\"2,5 11,12 2,19\"><\/polygon>\r\n          <polygon points=\"13,5 22,12 13,19\"><\/polygon>\r\n        <\/svg>\r\n      <\/button>\r\n      <span class=\"jump\">+5<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \ud83d\udcca BARRA DE TIEMPO -->\r\n  <div class=\"progress-row\">\r\n    <span class=\"current\">--:--:--<\/span>\r\n\r\n    <div class=\"timeline\">\r\n      <div class=\"progress\"><\/div>\r\n      <div class=\"thumb\"><\/div>\r\n    <\/div>\r\n\r\n    <span class=\"duration\">--:--:--<\/span>\r\n  <\/div>\r\n\r\n  <!-- \ud83c\udfa7 AUDIO -->\r\n  <audio preload=\"auto\"\r\n    src=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_160814_v01.mp3\">\r\n  <\/audio>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* \ud83d\udd33 CONTENEDOR PRINCIPAL *\/\r\n.audio-pro-max {\r\n  width: 320px; \/* \ud83d\udccf ancho total *\/\r\n  padding: 12px 20px;\r\n  background: #0d0d0d; \/* \ud83c\udfa8 color fondo *\/\r\n  border-radius: 50px;\r\n  font-family: inherit; \/* usa fuente global de WordPress *\/\r\n}\r\n\r\n\/* \ud83c\udfae CONTROLES *\/\r\n.controls {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 22px; \/* \ud83d\udccf separaci\u00f3n entre botones *\/\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.group {\r\n  display: flex;\r\n  gap: 6px;\r\n  align-items: center;\r\n}\r\n\r\n\/* \u23f1\ufe0f TIEMPOS (hora actual y duraci\u00f3n) *\/\r\n.current, .duration {\r\n  font-size: 13px; \/* \ud83d\udccf tama\u00f1o texto *\/\r\n  color: #fff; \/* \ud83c\udfa8 color texto *\/\r\n  font-family: monospace; \/* \ud83d\udd12 evita que \u201csalte\u201d el n\u00famero *\/\r\n}\r\n\r\n\/* \ud83d\udd39 TEXTO -5 \/ +5 *\/\r\n.jump {\r\n  font-size: 11px;\r\n  color: #888; \/* \ud83c\udfa8 color secundario *\/\r\n}\r\n\r\n\/* \ud83d\udd18 BOTONES *\/\r\n.audio-pro-max button {\r\n  all: unset;\r\n  cursor: pointer;\r\n  width: 30px; \/* \ud83d\udccf tama\u00f1o bot\u00f3n *\/\r\n  height: 30px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: transform 0.15s ease; \/* \ud83d\udd25 suavidad base *\/\r\n}\r\n\r\n\/* \u2728 HOVER BOTONES *\/\r\n.audio-pro-max button:hover {\r\n  transform: scale(1.2); \/* \ud83d\udccf agranda 1.2 *\/\r\n}\r\n\r\n\/* \ud83c\udfaf ICONOS SVG *\/\r\n.audio-pro-max button svg {\r\n  width: 22px; \/* \ud83d\udccf tama\u00f1o iconos *\/\r\n  height: 22px;\r\n  fill: #fff; \/* \ud83c\udfa8 color iconos *\/\r\n  pointer-events: none;\r\n}\r\n\r\n\/* \ud83d\udcca BARRA CONTENEDORA *\/\r\n.progress-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n\/* \ud83d\udccf L\u00cdNEA DE TIEMPO *\/\r\n.timeline {\r\n  flex: 1;\r\n  height: 4px; \/* \ud83d\udccf grosor barra *\/\r\n  background: #2a2a2a; \/* \ud83c\udfa8 fondo barra *\/\r\n  border-radius: 10px;\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n\/* \u2b1c PROGRESO (parte reproducida) *\/\r\n.progress {\r\n  height: 100%;\r\n  width: 0%;\r\n  background: #fff; \/* \ud83c\udfa8 color progreso *\/\r\n  border-radius: 10px;\r\n}\r\n\r\n\/* \u2b55 C\u00cdRCULO (thumb) *\/\r\n.thumb {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 0%;\r\n  width: 12px; \/* \ud83d\udccf tama\u00f1o c\u00edrculo *\/\r\n  height: 12px;\r\n  background: #fff; \/* \ud83c\udfa8 color c\u00edrculo *\/\r\n  border-radius: 50%;\r\n  transform: translate(-50%, -50%);\r\n  cursor: grab;\r\n  touch-action: none; \/* \ud83d\udd25 necesario para mobile *\/\r\n}\r\n\r\n\/* \u270a cuando arrastras *\/\r\n.thumb:active {\r\n  cursor: grabbing;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n\r\nfunction format(sec){\r\n  const h = Math.floor(sec\/3600);\r\n  const m = Math.floor((sec%3600)\/60);\r\n  const s = Math.floor(sec%60);\r\n  return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;\r\n}\r\n\r\n\/* \u23f1\ufe0f obtiene hora desde nombre archivo *\/\r\nfunction getStart(url){\r\n  const m = url.match(\/_(\\d{6})_\/);\r\n  if(!m) return 0;\r\n  const t = m[1];\r\n  return t.slice(0,2)*3600 + t.slice(2,4)*60 + +t.slice(4,6);\r\n}\r\n\r\ndocument.querySelectorAll(\".audio-pro-max\").forEach(player => {\r\n\r\n  if(player.dataset.ready) return;\r\n  player.dataset.ready = \"1\";\r\n\r\n  const audio = player.querySelector(\"audio\");\r\n  const play = player.querySelector(\".play\");\r\n  const back = player.querySelector(\".back\");\r\n  const fwd = player.querySelector(\".forward\");\r\n  const bar = player.querySelector(\".timeline\");\r\n  const prog = player.querySelector(\".progress\");\r\n  const thumb = player.querySelector(\".thumb\");\r\n  const cur = player.querySelector(\".current\");\r\n  const dur = player.querySelector(\".duration\");\r\n\r\n  const iconPlay = play.querySelector(\".icon-play\");\r\n  const iconPause = play.querySelector(\".icon-pause\");\r\n\r\n  let dragging = false;\r\n\r\n  const start = getStart(audio.src);\r\n  cur.textContent = format(start);\r\n\r\n  \/* \u25b6 PLAY \/ PAUSE *\/\r\n  play.onclick = () => audio.paused ? audio.play().catch(()=>{}) : audio.pause();\r\n\r\n  audio.onplay = () => {\r\n    iconPlay.style.display = \"none\";\r\n    iconPause.style.display = \"block\";\r\n  };\r\n\r\n  audio.onpause = () => {\r\n    iconPlay.style.display = \"block\";\r\n    iconPause.style.display = \"none\";\r\n  };\r\n\r\n  \/* \u23ea \u23e9 *\/\r\n  back.onclick = () => audio.currentTime = Math.max(0, audio.currentTime - 5);\r\n  fwd.onclick = () => audio.currentTime = Math.min(audio.duration, audio.currentTime + 5);\r\n\r\n  \/* \u23f1\ufe0f DURACI\u00d3N *\/\r\n  audio.onloadedmetadata = () => {\r\n    dur.textContent = format(start + audio.duration);\r\n  };\r\n\r\n  function updateUI(t){\r\n    const p = (t \/ audio.duration) * 100 || 0;\r\n    prog.style.width = p + \"%\";\r\n    thumb.style.left = p + \"%\";\r\n    cur.textContent = format(start + t);\r\n  }\r\n\r\n  audio.ontimeupdate = () => {\r\n    if(!dragging) updateUI(audio.currentTime);\r\n  };\r\n\r\n  function getTime(clientX){\r\n    const r = bar.getBoundingClientRect();\r\n    const p = Math.max(0, Math.min(1, (clientX - r.left)\/r.width));\r\n    return p * audio.duration;\r\n  }\r\n\r\n  \/* CLICK EN BARRA *\/\r\n  bar.addEventListener(\"click\", e => {\r\n    audio.currentTime = getTime(e.clientX);\r\n  });\r\n\r\n  \/* DRAG (funciona en m\u00f3vil y desktop) *\/\r\n  thumb.addEventListener(\"pointerdown\", e => {\r\n    dragging = true;\r\n    thumb.setPointerCapture(e.pointerId);\r\n  });\r\n\r\n  thumb.addEventListener(\"pointermove\", e => {\r\n    if(!dragging) return;\r\n    updateUI(getTime(e.clientX));\r\n  });\r\n\r\n  thumb.addEventListener(\"pointerup\", e => {\r\n    if(!dragging) return;\r\n    audio.currentTime = getTime(e.clientX);\r\n    dragging = false;\r\n    thumb.releasePointerCapture(e.pointerId);\r\n  });\r\n\r\n  thumb.addEventListener(\"pointercancel\", () => dragging = false);\r\n\r\n});\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbbfa8d elementor-widget elementor-widget-text-editor\" data-id=\"dbbfa8d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\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<div class=\"elementor-element elementor-element-e7191f4 gcb-target e-flex e-con-boxed e-con e-parent\" data-id=\"e7191f4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-855571c e-con-full e-flex e-con e-child\" data-id=\"855571c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5565028 elementor-widget elementor-widget-html\" data-id=\"5565028\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================\r\n     \ud83d\udd25 Widget Audio Valpito\r\n     ========================= -->\r\n\r\n<div class=\"audio-pro-max\">\r\n\r\n  <!-- \ud83c\udfae CONTROLES -->\r\n  <div class=\"controls\">\r\n    <div class=\"group\">\r\n      <span class=\"jump\">-5<\/span>\r\n      <button class=\"back\">\r\n        <!-- \u23ea SVG -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <polygon points=\"11,19 2,12 11,5\"><\/polygon>\r\n          <polygon points=\"22,19 13,12 22,5\"><\/polygon>\r\n        <\/svg>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <button class=\"play\">\r\n      <!-- \u25b6 SVG -->\r\n      <svg class=\"icon-play\" viewBox=\"0 0 24 24\">\r\n        <polygon points=\"5,3 19,12 5,21\"><\/polygon>\r\n      <\/svg>\r\n      <!-- \u275a\u275a SVG -->\r\n      <svg class=\"icon-pause\" viewBox=\"0 0 24 24\" style=\"display:none;\">\r\n        <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n        <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n      <\/svg>\r\n    <\/button>\r\n\r\n    <div class=\"group\">\r\n      <button class=\"forward\">\r\n        <!-- \u23e9 SVG -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <polygon points=\"2,5 11,12 2,19\"><\/polygon>\r\n          <polygon points=\"13,5 22,12 13,19\"><\/polygon>\r\n        <\/svg>\r\n      <\/button>\r\n      <span class=\"jump\">+5<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \ud83d\udcca BARRA DE TIEMPO -->\r\n  <div class=\"progress-row\">\r\n    <span class=\"current\">--:--:--<\/span>\r\n\r\n    <div class=\"timeline\">\r\n      <div class=\"progress\"><\/div>\r\n      <div class=\"thumb\"><\/div>\r\n    <\/div>\r\n\r\n    <span class=\"duration\">--:--:--<\/span>\r\n  <\/div>\r\n\r\n  <!-- \ud83c\udfa7 AUDIO -->\r\n  <audio preload=\"auto\"\r\n    src=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_161456_v01.mp3\">\r\n  <\/audio>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* \ud83d\udd33 CONTENEDOR PRINCIPAL *\/\r\n.audio-pro-max {\r\n  width: 320px; \/* \ud83d\udccf ancho total *\/\r\n  padding: 12px 20px;\r\n  background: #0d0d0d; \/* \ud83c\udfa8 color fondo *\/\r\n  border-radius: 50px;\r\n  font-family: inherit; \/* usa fuente global de WordPress *\/\r\n}\r\n\r\n\/* \ud83c\udfae CONTROLES *\/\r\n.controls {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 22px; \/* \ud83d\udccf separaci\u00f3n entre botones *\/\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.group {\r\n  display: flex;\r\n  gap: 6px;\r\n  align-items: center;\r\n}\r\n\r\n\/* \u23f1\ufe0f TIEMPOS (hora actual y duraci\u00f3n) *\/\r\n.current, .duration {\r\n  font-size: 13px; \/* \ud83d\udccf tama\u00f1o texto *\/\r\n  color: #fff; \/* \ud83c\udfa8 color texto *\/\r\n  font-family: monospace; \/* \ud83d\udd12 evita que \u201csalte\u201d el n\u00famero *\/\r\n}\r\n\r\n\/* \ud83d\udd39 TEXTO -5 \/ +5 *\/\r\n.jump {\r\n  font-size: 11px;\r\n  color: #888; \/* \ud83c\udfa8 color secundario *\/\r\n}\r\n\r\n\/* \ud83d\udd18 BOTONES *\/\r\n.audio-pro-max button {\r\n  all: unset;\r\n  cursor: pointer;\r\n  width: 30px; \/* \ud83d\udccf tama\u00f1o bot\u00f3n *\/\r\n  height: 30px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: transform 0.15s ease; \/* \ud83d\udd25 suavidad base *\/\r\n}\r\n\r\n\/* \u2728 HOVER BOTONES *\/\r\n.audio-pro-max button:hover {\r\n  transform: scale(1.2); \/* \ud83d\udccf agranda 1.2 *\/\r\n}\r\n\r\n\/* \ud83c\udfaf ICONOS SVG *\/\r\n.audio-pro-max button svg {\r\n  width: 22px; \/* \ud83d\udccf tama\u00f1o iconos *\/\r\n  height: 22px;\r\n  fill: #fff; \/* \ud83c\udfa8 color iconos *\/\r\n  pointer-events: none;\r\n}\r\n\r\n\/* \ud83d\udcca BARRA CONTENEDORA *\/\r\n.progress-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n\/* \ud83d\udccf L\u00cdNEA DE TIEMPO *\/\r\n.timeline {\r\n  flex: 1;\r\n  height: 4px; \/* \ud83d\udccf grosor barra *\/\r\n  background: #2a2a2a; \/* \ud83c\udfa8 fondo barra *\/\r\n  border-radius: 10px;\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n\/* \u2b1c PROGRESO (parte reproducida) *\/\r\n.progress {\r\n  height: 100%;\r\n  width: 0%;\r\n  background: #fff; \/* \ud83c\udfa8 color progreso *\/\r\n  border-radius: 10px;\r\n}\r\n\r\n\/* \u2b55 C\u00cdRCULO (thumb) *\/\r\n.thumb {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 0%;\r\n  width: 12px; \/* \ud83d\udccf tama\u00f1o c\u00edrculo *\/\r\n  height: 12px;\r\n  background: #fff; \/* \ud83c\udfa8 color c\u00edrculo *\/\r\n  border-radius: 50%;\r\n  transform: translate(-50%, -50%);\r\n  cursor: grab;\r\n  touch-action: none; \/* \ud83d\udd25 necesario para mobile *\/\r\n}\r\n\r\n\/* \u270a cuando arrastras *\/\r\n.thumb:active {\r\n  cursor: grabbing;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n\r\nfunction format(sec){\r\n  const h = Math.floor(sec\/3600);\r\n  const m = Math.floor((sec%3600)\/60);\r\n  const s = Math.floor(sec%60);\r\n  return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;\r\n}\r\n\r\n\/* \u23f1\ufe0f obtiene hora desde nombre archivo *\/\r\nfunction getStart(url){\r\n  const m = url.match(\/_(\\d{6})_\/);\r\n  if(!m) return 0;\r\n  const t = m[1];\r\n  return t.slice(0,2)*3600 + t.slice(2,4)*60 + +t.slice(4,6);\r\n}\r\n\r\ndocument.querySelectorAll(\".audio-pro-max\").forEach(player => {\r\n\r\n  if(player.dataset.ready) return;\r\n  player.dataset.ready = \"1\";\r\n\r\n  const audio = player.querySelector(\"audio\");\r\n  const play = player.querySelector(\".play\");\r\n  const back = player.querySelector(\".back\");\r\n  const fwd = player.querySelector(\".forward\");\r\n  const bar = player.querySelector(\".timeline\");\r\n  const prog = player.querySelector(\".progress\");\r\n  const thumb = player.querySelector(\".thumb\");\r\n  const cur = player.querySelector(\".current\");\r\n  const dur = player.querySelector(\".duration\");\r\n\r\n  const iconPlay = play.querySelector(\".icon-play\");\r\n  const iconPause = play.querySelector(\".icon-pause\");\r\n\r\n  let dragging = false;\r\n\r\n  const start = getStart(audio.src);\r\n  cur.textContent = format(start);\r\n\r\n  \/* \u25b6 PLAY \/ PAUSE *\/\r\n  play.onclick = () => audio.paused ? audio.play().catch(()=>{}) : audio.pause();\r\n\r\n  audio.onplay = () => {\r\n    iconPlay.style.display = \"none\";\r\n    iconPause.style.display = \"block\";\r\n  };\r\n\r\n  audio.onpause = () => {\r\n    iconPlay.style.display = \"block\";\r\n    iconPause.style.display = \"none\";\r\n  };\r\n\r\n  \/* \u23ea \u23e9 *\/\r\n  back.onclick = () => audio.currentTime = Math.max(0, audio.currentTime - 5);\r\n  fwd.onclick = () => audio.currentTime = Math.min(audio.duration, audio.currentTime + 5);\r\n\r\n  \/* \u23f1\ufe0f DURACI\u00d3N *\/\r\n  audio.onloadedmetadata = () => {\r\n    dur.textContent = format(start + audio.duration);\r\n  };\r\n\r\n  function updateUI(t){\r\n    const p = (t \/ audio.duration) * 100 || 0;\r\n    prog.style.width = p + \"%\";\r\n    thumb.style.left = p + \"%\";\r\n    cur.textContent = format(start + t);\r\n  }\r\n\r\n  audio.ontimeupdate = () => {\r\n    if(!dragging) updateUI(audio.currentTime);\r\n  };\r\n\r\n  function getTime(clientX){\r\n    const r = bar.getBoundingClientRect();\r\n    const p = Math.max(0, Math.min(1, (clientX - r.left)\/r.width));\r\n    return p * audio.duration;\r\n  }\r\n\r\n  \/* CLICK EN BARRA *\/\r\n  bar.addEventListener(\"click\", e => {\r\n    audio.currentTime = getTime(e.clientX);\r\n  });\r\n\r\n  \/* DRAG (funciona en m\u00f3vil y desktop) *\/\r\n  thumb.addEventListener(\"pointerdown\", e => {\r\n    dragging = true;\r\n    thumb.setPointerCapture(e.pointerId);\r\n  });\r\n\r\n  thumb.addEventListener(\"pointermove\", e => {\r\n    if(!dragging) return;\r\n    updateUI(getTime(e.clientX));\r\n  });\r\n\r\n  thumb.addEventListener(\"pointerup\", e => {\r\n    if(!dragging) return;\r\n    audio.currentTime = getTime(e.clientX);\r\n    dragging = false;\r\n    thumb.releasePointerCapture(e.pointerId);\r\n  });\r\n\r\n  thumb.addEventListener(\"pointercancel\", () => dragging = false);\r\n\r\n});\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41f34fa elementor-widget elementor-widget-text-editor\" data-id=\"41f34fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/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-8d51873 e-con-full e-flex e-con e-child\" data-id=\"8d51873\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f6791b2 elementor-widget elementor-widget-image\" data-id=\"f6791b2\" data-element_type=\"widget\" data-e-type=\"widget\" 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:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/elementor\/thumbs\/VALPITO.CL_R30_20230203_161456_v01-rlfkrfazs56x729ciaiixnpuwjkc0pqtq6ey7qme2o.jpg\" title=\"VALPITO.CL_R30_20230203_161456_v01\" alt=\"Reuni\u00f3n 30 de Historias Pr\u00edstinas del Puerto de Valpara\u00edso, encuentro para rescatar memorias y relatos del puerto\" 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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f7f2c66 gcb-target e-flex e-con-boxed e-con e-parent\" data-id=\"f7f2c66\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9667ce0 e-con-full e-flex e-con e-child\" data-id=\"9667ce0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-28c2fe8 elementor-widget elementor-widget-image\" data-id=\"28c2fe8\" data-element_type=\"widget\" data-e-type=\"widget\" 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:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/elementor\/thumbs\/VALPITO.CL_R30_20230203_163424_v01-rlfkry3onkvxzp5noa8271r253fxmplet6tus411y8.jpg\" title=\"VALPITO.CL_R30_20230203_163424_v01\" alt=\"Reuni\u00f3n 30 de Historias Pr\u00edstinas del Puerto de Valpara\u00edso, encuentro para rescatar memorias y relatos del puerto\" 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-c2e1968 e-con-full e-flex e-con e-child\" data-id=\"c2e1968\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-03a1b6c elementor-widget elementor-widget-text-editor\" data-id=\"03a1b6c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d00fd96 elementor-widget elementor-widget-html\" data-id=\"d00fd96\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================\r\n     \ud83d\udd25 Widget Audio Valpito\r\n     ========================= -->\r\n\r\n<div class=\"audio-pro-max\">\r\n\r\n  <!-- \ud83c\udfae CONTROLES -->\r\n  <div class=\"controls\">\r\n    <div class=\"group\">\r\n      <span class=\"jump\">-5<\/span>\r\n      <button class=\"back\">\r\n        <!-- \u23ea SVG -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <polygon points=\"11,19 2,12 11,5\"><\/polygon>\r\n          <polygon points=\"22,19 13,12 22,5\"><\/polygon>\r\n        <\/svg>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <button class=\"play\">\r\n      <!-- \u25b6 SVG -->\r\n      <svg class=\"icon-play\" viewBox=\"0 0 24 24\">\r\n        <polygon points=\"5,3 19,12 5,21\"><\/polygon>\r\n      <\/svg>\r\n      <!-- \u275a\u275a SVG -->\r\n      <svg class=\"icon-pause\" viewBox=\"0 0 24 24\" style=\"display:none;\">\r\n        <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n        <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n      <\/svg>\r\n    <\/button>\r\n\r\n    <div class=\"group\">\r\n      <button class=\"forward\">\r\n        <!-- \u23e9 SVG -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <polygon points=\"2,5 11,12 2,19\"><\/polygon>\r\n          <polygon points=\"13,5 22,12 13,19\"><\/polygon>\r\n        <\/svg>\r\n      <\/button>\r\n      <span class=\"jump\">+5<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \ud83d\udcca BARRA DE TIEMPO -->\r\n  <div class=\"progress-row\">\r\n    <span class=\"current\">--:--:--<\/span>\r\n\r\n    <div class=\"timeline\">\r\n      <div class=\"progress\"><\/div>\r\n      <div class=\"thumb\"><\/div>\r\n    <\/div>\r\n\r\n    <span class=\"duration\">--:--:--<\/span>\r\n  <\/div>\r\n\r\n  <!-- \ud83c\udfa7 AUDIO -->\r\n  <audio preload=\"auto\"\r\n    src=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_163424_v01.mp3\">\r\n  <\/audio>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* \ud83d\udd33 CONTENEDOR PRINCIPAL *\/\r\n.audio-pro-max {\r\n  width: 320px; \/* \ud83d\udccf ancho total *\/\r\n  padding: 12px 20px;\r\n  background: #0d0d0d; \/* \ud83c\udfa8 color fondo *\/\r\n  border-radius: 50px;\r\n  font-family: inherit; \/* usa fuente global de WordPress *\/\r\n}\r\n\r\n\/* \ud83c\udfae CONTROLES *\/\r\n.controls {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 22px; \/* \ud83d\udccf separaci\u00f3n entre botones *\/\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.group {\r\n  display: flex;\r\n  gap: 6px;\r\n  align-items: center;\r\n}\r\n\r\n\/* \u23f1\ufe0f TIEMPOS (hora actual y duraci\u00f3n) *\/\r\n.current, .duration {\r\n  font-size: 13px; \/* \ud83d\udccf tama\u00f1o texto *\/\r\n  color: #fff; \/* \ud83c\udfa8 color texto *\/\r\n  font-family: monospace; \/* \ud83d\udd12 evita que \u201csalte\u201d el n\u00famero *\/\r\n}\r\n\r\n\/* \ud83d\udd39 TEXTO -5 \/ +5 *\/\r\n.jump {\r\n  font-size: 11px;\r\n  color: #888; \/* \ud83c\udfa8 color secundario *\/\r\n}\r\n\r\n\/* \ud83d\udd18 BOTONES *\/\r\n.audio-pro-max button {\r\n  all: unset;\r\n  cursor: pointer;\r\n  width: 30px; \/* \ud83d\udccf tama\u00f1o bot\u00f3n *\/\r\n  height: 30px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: transform 0.15s ease; \/* \ud83d\udd25 suavidad base *\/\r\n}\r\n\r\n\/* \u2728 HOVER BOTONES *\/\r\n.audio-pro-max button:hover {\r\n  transform: scale(1.2); \/* \ud83d\udccf agranda 1.2 *\/\r\n}\r\n\r\n\/* \ud83c\udfaf ICONOS SVG *\/\r\n.audio-pro-max button svg {\r\n  width: 22px; \/* \ud83d\udccf tama\u00f1o iconos *\/\r\n  height: 22px;\r\n  fill: #fff; \/* \ud83c\udfa8 color iconos *\/\r\n  pointer-events: none;\r\n}\r\n\r\n\/* \ud83d\udcca BARRA CONTENEDORA *\/\r\n.progress-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n\/* \ud83d\udccf L\u00cdNEA DE TIEMPO *\/\r\n.timeline {\r\n  flex: 1;\r\n  height: 4px; \/* \ud83d\udccf grosor barra *\/\r\n  background: #2a2a2a; \/* \ud83c\udfa8 fondo barra *\/\r\n  border-radius: 10px;\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n\/* \u2b1c PROGRESO (parte reproducida) *\/\r\n.progress {\r\n  height: 100%;\r\n  width: 0%;\r\n  background: #fff; \/* \ud83c\udfa8 color progreso *\/\r\n  border-radius: 10px;\r\n}\r\n\r\n\/* \u2b55 C\u00cdRCULO (thumb) *\/\r\n.thumb {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 0%;\r\n  width: 12px; \/* \ud83d\udccf tama\u00f1o c\u00edrculo *\/\r\n  height: 12px;\r\n  background: #fff; \/* \ud83c\udfa8 color c\u00edrculo *\/\r\n  border-radius: 50%;\r\n  transform: translate(-50%, -50%);\r\n  cursor: grab;\r\n  touch-action: none; \/* \ud83d\udd25 necesario para mobile *\/\r\n}\r\n\r\n\/* \u270a cuando arrastras *\/\r\n.thumb:active {\r\n  cursor: grabbing;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n\r\nfunction format(sec){\r\n  const h = Math.floor(sec\/3600);\r\n  const m = Math.floor((sec%3600)\/60);\r\n  const s = Math.floor(sec%60);\r\n  return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;\r\n}\r\n\r\n\/* \u23f1\ufe0f obtiene hora desde nombre archivo *\/\r\nfunction getStart(url){\r\n  const m = url.match(\/_(\\d{6})_\/);\r\n  if(!m) return 0;\r\n  const t = m[1];\r\n  return t.slice(0,2)*3600 + t.slice(2,4)*60 + +t.slice(4,6);\r\n}\r\n\r\ndocument.querySelectorAll(\".audio-pro-max\").forEach(player => {\r\n\r\n  if(player.dataset.ready) return;\r\n  player.dataset.ready = \"1\";\r\n\r\n  const audio = player.querySelector(\"audio\");\r\n  const play = player.querySelector(\".play\");\r\n  const back = player.querySelector(\".back\");\r\n  const fwd = player.querySelector(\".forward\");\r\n  const bar = player.querySelector(\".timeline\");\r\n  const prog = player.querySelector(\".progress\");\r\n  const thumb = player.querySelector(\".thumb\");\r\n  const cur = player.querySelector(\".current\");\r\n  const dur = player.querySelector(\".duration\");\r\n\r\n  const iconPlay = play.querySelector(\".icon-play\");\r\n  const iconPause = play.querySelector(\".icon-pause\");\r\n\r\n  let dragging = false;\r\n\r\n  const start = getStart(audio.src);\r\n  cur.textContent = format(start);\r\n\r\n  \/* \u25b6 PLAY \/ PAUSE *\/\r\n  play.onclick = () => audio.paused ? audio.play().catch(()=>{}) : audio.pause();\r\n\r\n  audio.onplay = () => {\r\n    iconPlay.style.display = \"none\";\r\n    iconPause.style.display = \"block\";\r\n  };\r\n\r\n  audio.onpause = () => {\r\n    iconPlay.style.display = \"block\";\r\n    iconPause.style.display = \"none\";\r\n  };\r\n\r\n  \/* \u23ea \u23e9 *\/\r\n  back.onclick = () => audio.currentTime = Math.max(0, audio.currentTime - 5);\r\n  fwd.onclick = () => audio.currentTime = Math.min(audio.duration, audio.currentTime + 5);\r\n\r\n  \/* \u23f1\ufe0f DURACI\u00d3N *\/\r\n  audio.onloadedmetadata = () => {\r\n    dur.textContent = format(start + audio.duration);\r\n  };\r\n\r\n  function updateUI(t){\r\n    const p = (t \/ audio.duration) * 100 || 0;\r\n    prog.style.width = p + \"%\";\r\n    thumb.style.left = p + \"%\";\r\n    cur.textContent = format(start + t);\r\n  }\r\n\r\n  audio.ontimeupdate = () => {\r\n    if(!dragging) updateUI(audio.currentTime);\r\n  };\r\n\r\n  function getTime(clientX){\r\n    const r = bar.getBoundingClientRect();\r\n    const p = Math.max(0, Math.min(1, (clientX - r.left)\/r.width));\r\n    return p * audio.duration;\r\n  }\r\n\r\n  \/* CLICK EN BARRA *\/\r\n  bar.addEventListener(\"click\", e => {\r\n    audio.currentTime = getTime(e.clientX);\r\n  });\r\n\r\n  \/* DRAG (funciona en m\u00f3vil y desktop) *\/\r\n  thumb.addEventListener(\"pointerdown\", e => {\r\n    dragging = true;\r\n    thumb.setPointerCapture(e.pointerId);\r\n  });\r\n\r\n  thumb.addEventListener(\"pointermove\", e => {\r\n    if(!dragging) return;\r\n    updateUI(getTime(e.clientX));\r\n  });\r\n\r\n  thumb.addEventListener(\"pointerup\", e => {\r\n    if(!dragging) return;\r\n    audio.currentTime = getTime(e.clientX);\r\n    dragging = false;\r\n    thumb.releasePointerCapture(e.pointerId);\r\n  });\r\n\r\n  thumb.addEventListener(\"pointercancel\", () => dragging = false);\r\n\r\n});\r\n\r\n})();\r\n<\/script>\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<div class=\"elementor-element elementor-element-24403db gcb-target e-flex e-con-boxed e-con e-parent\" data-id=\"24403db\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-363126d e-con-full e-flex e-con e-child\" data-id=\"363126d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b7ab188 elementor-widget elementor-widget-html\" data-id=\"b7ab188\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================\r\n     \ud83d\udd25 Widget Audio Valpito\r\n     ========================= -->\r\n\r\n<div class=\"audio-pro-max\">\r\n\r\n  <!-- \ud83c\udfae CONTROLES -->\r\n  <div class=\"controls\">\r\n    <div class=\"group\">\r\n      <span class=\"jump\">-5<\/span>\r\n      <button class=\"back\">\r\n        <!-- \u23ea SVG -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <polygon points=\"11,19 2,12 11,5\"><\/polygon>\r\n          <polygon points=\"22,19 13,12 22,5\"><\/polygon>\r\n        <\/svg>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <button class=\"play\">\r\n      <!-- \u25b6 SVG -->\r\n      <svg class=\"icon-play\" viewBox=\"0 0 24 24\">\r\n        <polygon points=\"5,3 19,12 5,21\"><\/polygon>\r\n      <\/svg>\r\n      <!-- \u275a\u275a SVG -->\r\n      <svg class=\"icon-pause\" viewBox=\"0 0 24 24\" style=\"display:none;\">\r\n        <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n        <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n      <\/svg>\r\n    <\/button>\r\n\r\n    <div class=\"group\">\r\n      <button class=\"forward\">\r\n        <!-- \u23e9 SVG -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <polygon points=\"2,5 11,12 2,19\"><\/polygon>\r\n          <polygon points=\"13,5 22,12 13,19\"><\/polygon>\r\n        <\/svg>\r\n      <\/button>\r\n      <span class=\"jump\">+5<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \ud83d\udcca BARRA DE TIEMPO -->\r\n  <div class=\"progress-row\">\r\n    <span class=\"current\">--:--:--<\/span>\r\n\r\n    <div class=\"timeline\">\r\n      <div class=\"progress\"><\/div>\r\n      <div class=\"thumb\"><\/div>\r\n    <\/div>\r\n\r\n    <span class=\"duration\">--:--:--<\/span>\r\n  <\/div>\r\n\r\n  <!-- \ud83c\udfa7 AUDIO -->\r\n  <audio preload=\"auto\"\r\n    src=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_163440_v01.mp3\">\r\n  <\/audio>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* \ud83d\udd33 CONTENEDOR PRINCIPAL *\/\r\n.audio-pro-max {\r\n  width: 320px; \/* \ud83d\udccf ancho total *\/\r\n  padding: 12px 20px;\r\n  background: #0d0d0d; \/* \ud83c\udfa8 color fondo *\/\r\n  border-radius: 50px;\r\n  font-family: inherit; \/* usa fuente global de WordPress *\/\r\n}\r\n\r\n\/* \ud83c\udfae CONTROLES *\/\r\n.controls {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 22px; \/* \ud83d\udccf separaci\u00f3n entre botones *\/\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.group {\r\n  display: flex;\r\n  gap: 6px;\r\n  align-items: center;\r\n}\r\n\r\n\/* \u23f1\ufe0f TIEMPOS (hora actual y duraci\u00f3n) *\/\r\n.current, .duration {\r\n  font-size: 13px; \/* \ud83d\udccf tama\u00f1o texto *\/\r\n  color: #fff; \/* \ud83c\udfa8 color texto *\/\r\n  font-family: monospace; \/* \ud83d\udd12 evita que \u201csalte\u201d el n\u00famero *\/\r\n}\r\n\r\n\/* \ud83d\udd39 TEXTO -5 \/ +5 *\/\r\n.jump {\r\n  font-size: 11px;\r\n  color: #888; \/* \ud83c\udfa8 color secundario *\/\r\n}\r\n\r\n\/* \ud83d\udd18 BOTONES *\/\r\n.audio-pro-max button {\r\n  all: unset;\r\n  cursor: pointer;\r\n  width: 30px; \/* \ud83d\udccf tama\u00f1o bot\u00f3n *\/\r\n  height: 30px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: transform 0.15s ease; \/* \ud83d\udd25 suavidad base *\/\r\n}\r\n\r\n\/* \u2728 HOVER BOTONES *\/\r\n.audio-pro-max button:hover {\r\n  transform: scale(1.2); \/* \ud83d\udccf agranda 1.2 *\/\r\n}\r\n\r\n\/* \ud83c\udfaf ICONOS SVG *\/\r\n.audio-pro-max button svg {\r\n  width: 22px; \/* \ud83d\udccf tama\u00f1o iconos *\/\r\n  height: 22px;\r\n  fill: #fff; \/* \ud83c\udfa8 color iconos *\/\r\n  pointer-events: none;\r\n}\r\n\r\n\/* \ud83d\udcca BARRA CONTENEDORA *\/\r\n.progress-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n\/* \ud83d\udccf L\u00cdNEA DE TIEMPO *\/\r\n.timeline {\r\n  flex: 1;\r\n  height: 4px; \/* \ud83d\udccf grosor barra *\/\r\n  background: #2a2a2a; \/* \ud83c\udfa8 fondo barra *\/\r\n  border-radius: 10px;\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n\/* \u2b1c PROGRESO (parte reproducida) *\/\r\n.progress {\r\n  height: 100%;\r\n  width: 0%;\r\n  background: #fff; \/* \ud83c\udfa8 color progreso *\/\r\n  border-radius: 10px;\r\n}\r\n\r\n\/* \u2b55 C\u00cdRCULO (thumb) *\/\r\n.thumb {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 0%;\r\n  width: 12px; \/* \ud83d\udccf tama\u00f1o c\u00edrculo *\/\r\n  height: 12px;\r\n  background: #fff; \/* \ud83c\udfa8 color c\u00edrculo *\/\r\n  border-radius: 50%;\r\n  transform: translate(-50%, -50%);\r\n  cursor: grab;\r\n  touch-action: none; \/* \ud83d\udd25 necesario para mobile *\/\r\n}\r\n\r\n\/* \u270a cuando arrastras *\/\r\n.thumb:active {\r\n  cursor: grabbing;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n\r\nfunction format(sec){\r\n  const h = Math.floor(sec\/3600);\r\n  const m = Math.floor((sec%3600)\/60);\r\n  const s = Math.floor(sec%60);\r\n  return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;\r\n}\r\n\r\n\/* \u23f1\ufe0f obtiene hora desde nombre archivo *\/\r\nfunction getStart(url){\r\n  const m = url.match(\/_(\\d{6})_\/);\r\n  if(!m) return 0;\r\n  const t = m[1];\r\n  return t.slice(0,2)*3600 + t.slice(2,4)*60 + +t.slice(4,6);\r\n}\r\n\r\ndocument.querySelectorAll(\".audio-pro-max\").forEach(player => {\r\n\r\n  if(player.dataset.ready) return;\r\n  player.dataset.ready = \"1\";\r\n\r\n  const audio = player.querySelector(\"audio\");\r\n  const play = player.querySelector(\".play\");\r\n  const back = player.querySelector(\".back\");\r\n  const fwd = player.querySelector(\".forward\");\r\n  const bar = player.querySelector(\".timeline\");\r\n  const prog = player.querySelector(\".progress\");\r\n  const thumb = player.querySelector(\".thumb\");\r\n  const cur = player.querySelector(\".current\");\r\n  const dur = player.querySelector(\".duration\");\r\n\r\n  const iconPlay = play.querySelector(\".icon-play\");\r\n  const iconPause = play.querySelector(\".icon-pause\");\r\n\r\n  let dragging = false;\r\n\r\n  const start = getStart(audio.src);\r\n  cur.textContent = format(start);\r\n\r\n  \/* \u25b6 PLAY \/ PAUSE *\/\r\n  play.onclick = () => audio.paused ? audio.play().catch(()=>{}) : audio.pause();\r\n\r\n  audio.onplay = () => {\r\n    iconPlay.style.display = \"none\";\r\n    iconPause.style.display = \"block\";\r\n  };\r\n\r\n  audio.onpause = () => {\r\n    iconPlay.style.display = \"block\";\r\n    iconPause.style.display = \"none\";\r\n  };\r\n\r\n  \/* \u23ea \u23e9 *\/\r\n  back.onclick = () => audio.currentTime = Math.max(0, audio.currentTime - 5);\r\n  fwd.onclick = () => audio.currentTime = Math.min(audio.duration, audio.currentTime + 5);\r\n\r\n  \/* \u23f1\ufe0f DURACI\u00d3N *\/\r\n  audio.onloadedmetadata = () => {\r\n    dur.textContent = format(start + audio.duration);\r\n  };\r\n\r\n  function updateUI(t){\r\n    const p = (t \/ audio.duration) * 100 || 0;\r\n    prog.style.width = p + \"%\";\r\n    thumb.style.left = p + \"%\";\r\n    cur.textContent = format(start + t);\r\n  }\r\n\r\n  audio.ontimeupdate = () => {\r\n    if(!dragging) updateUI(audio.currentTime);\r\n  };\r\n\r\n  function getTime(clientX){\r\n    const r = bar.getBoundingClientRect();\r\n    const p = Math.max(0, Math.min(1, (clientX - r.left)\/r.width));\r\n    return p * audio.duration;\r\n  }\r\n\r\n  \/* CLICK EN BARRA *\/\r\n  bar.addEventListener(\"click\", e => {\r\n    audio.currentTime = getTime(e.clientX);\r\n  });\r\n\r\n  \/* DRAG (funciona en m\u00f3vil y desktop) *\/\r\n  thumb.addEventListener(\"pointerdown\", e => {\r\n    dragging = true;\r\n    thumb.setPointerCapture(e.pointerId);\r\n  });\r\n\r\n  thumb.addEventListener(\"pointermove\", e => {\r\n    if(!dragging) return;\r\n    updateUI(getTime(e.clientX));\r\n  });\r\n\r\n  thumb.addEventListener(\"pointerup\", e => {\r\n    if(!dragging) return;\r\n    audio.currentTime = getTime(e.clientX);\r\n    dragging = false;\r\n    thumb.releasePointerCapture(e.pointerId);\r\n  });\r\n\r\n  thumb.addEventListener(\"pointercancel\", () => dragging = false);\r\n\r\n});\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51bb1e4 elementor-widget elementor-widget-text-editor\" data-id=\"51bb1e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/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-9a653a9 e-con-full e-flex e-con e-child\" data-id=\"9a653a9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c48036d elementor-widget elementor-widget-image\" data-id=\"c48036d\" data-element_type=\"widget\" data-e-type=\"widget\" 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:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/elementor\/thumbs\/VALPITO.CL_R30_20230203_163440_v01-rlfkrzzd18yimx2xdb1bc19zbv6o23svhg4tqny9ls.jpg\" title=\"VALPITO.CL_R30_20230203_163440_v01\" alt=\"Reuni\u00f3n 30 de Historias Pr\u00edstinas del Puerto de Valpara\u00edso, encuentro para rescatar memorias y relatos del puerto\" 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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-acd2514 e-flex e-con-boxed e-con e-parent\" data-id=\"acd2514\" 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-e6e0945 elementor-widget elementor-widget-html\" data-id=\"e6e0945\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================\r\n     \ud83d\udd25 Widget GCB Valpito\r\n     ========================= -->\r\n\r\n<!-- =========================\r\n\ud83d\udc49 IMPORTANTE:\r\nEn cada secci\u00f3n (Elementor):\r\nAvanzado \u2192 Clase CSS: gcb-target\r\n========================= -->\r\n\r\n<!-- =========================\r\n   \ud83d\udd39 Librer\u00edas OwlCarousel\r\n========================= -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/OwlCarousel2\/2.3.4\/assets\/owl.carousel.min.css\"\/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/OwlCarousel2\/2.3.4\/assets\/owl.theme.default.min.css\"\/>\r\n\r\n<script>\r\nif (typeof jQuery === \"undefined\") {\r\n  document.write('<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"><\\\/script>');\r\n}\r\n<\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/OwlCarousel2\/2.3.4\/owl.carousel.min.js\"><\/script>\r\n\r\n<style>\r\n\/* =========================\r\n   \ud83d\udd39 CONTENEDOR CARRUSEL\r\n   ========================= *\/\r\n#gcb-carousel {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  background: rgba(0,0,0,0.85); \/* cambiar color de fondo *\/\r\n  padding: 10px 6px;\r\n  z-index: 9999;\r\n  transition: transform 0.4s ease;\r\n}\r\n.gcb-hidden { transform: translateY(100%); } \/* oculta carrusel *\/\r\n\r\n\/* =========================\r\n   \ud83d\udd39 PESTA\u00d1A ABAJO (estilo AGV)\r\n========================= *\/\r\n#gcb-toggle {\r\n  position: absolute;\r\n  bottom: 100%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  background: #fff; \/* color de fondo pesta\u00f1a *\/\r\n  color: #282828;  \/* color de texto *\/\r\n  padding: 4px 16px; \/* ajustar padding *\/\r\n  border-radius: 10px 10px 0 0; \/* borde superior redondeado *\/\r\n  cursor: pointer;\r\n  font-weight: 500; \/* grosor de fuente pesta\u00f1a *\/\r\n  font-size: 14px;   \/* tama\u00f1o de fuente pesta\u00f1a *\/\r\n  transition: transform 0.2s ease;\r\n}\r\n\r\n\/* fila interna de la pesta\u00f1a *\/\r\n#gcb-toggle-inner {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  white-space: nowrap;\r\n}\r\n\r\n\/* icono c\u00e1mara *\/\r\n.gcb-icon {\r\n  font-size: 16px; \/* tama\u00f1o del \u00edcono *\/\r\n}\r\n\r\n\/* texto \u25b2\u25bc *\/\r\n#gcb-toggle-arrow {\r\n  font-size: 16px; \/* tama\u00f1o flechas *\/\r\n  font-weight: 600; \/* grosor flechas *\/\r\n  transition: transform 0.2s ease;\r\n}\r\n\r\n\/* hover sobre la pesta\u00f1a (flechas tambi\u00e9n) *\/\r\n#gcb-toggle:hover #gcb-toggle-arrow {\r\n  transform: scale(1.2);\r\n}\r\n\r\n\/* =========================\r\n   \ud83d\udd39 ITEMS CARRUSEL\r\n========================= *\/\r\n#gcb-carousel .item { display: flex; justify-content: center; }\r\n.gcb-box { width: 120px; }\r\n\r\n.gcb-photo {\r\n  position: relative;\r\n  width: 120px;\r\n  height: 120px;\r\n  overflow: hidden;\r\n  border-radius: 6px;\r\n}\r\n\r\n.gcb-photo img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.gcb-photo:hover img { transform: scale(1.08); }\r\n\r\n\/* hora sobre foto *\/\r\n.gcb-time {\r\n  position: absolute;\r\n  bottom: 6px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  width: 80px;\r\n  height: 20px;\r\n  background: #fff; \/* fondo hora *\/\r\n  color: #222;      \/* color texto hora *\/\r\n  font-size: 13px;  \/* tama\u00f1o hora *\/\r\n  font-weight: 500; \/* grosor hora *\/\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 4px;\r\n}\r\n\r\n\/* =========================\r\n   \ud83d\udd39 NAV CARRUSEL\r\n========================= *\/\r\n#gcb-carousel .owl-nav button {\r\n  position: absolute;\r\n  top: 35%;\r\n  width: 50px;\r\n  height: 50px;\r\n  background: transparent !important;\r\n  border: none !important;\r\n}\r\n\r\n#gcb-carousel .owl-prev { left: 0; }\r\n#gcb-carousel .owl-next { right: 0; }\r\n\r\n#gcb-carousel .owl-nav svg {\r\n  width: 40px;\r\n  height: 40px;\r\n  stroke: #fff;   \/* color flechas *\/\r\n  stroke-width: 3;\r\n  fill: none;\r\n}\r\n\r\n#gcb-carousel .owl-dots { display: none !important; }\r\n\r\n.gcb-center-few .owl-stage { display: flex; justify-content: center; }\r\n\r\n<\/style>\r\n\r\n<!-- =========================\r\n   \ud83d\udd39 HTML\r\n========================= -->\r\n<div id=\"gcb-carousel\" class=\"gcb-hidden\">\r\n\r\n  <!-- pesta\u00f1a estilo AGV -->\r\n  <div id=\"gcb-toggle\">\r\n    <div id=\"gcb-toggle-inner\">\r\n      <span class=\"gcb-icon\">\ud83d\udcf8<\/span>\r\n      <span id=\"gcb-toggle-text\">5 Fotos<\/span>\r\n      <span id=\"gcb-toggle-arrow\">\u25b2\u25bc<\/span> <!-- texto \u25b2\u25bc -->\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- carousel -->\r\n  <div class=\"owl-carousel\">\r\n\r\n    <div class=\"item\" data-index=\"0\">\r\n      <div class=\"gcb-box\">\r\n        <div class=\"gcb-photo\">\r\n          <img decoding=\"async\" src=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_155418_v01.jpg\">\r\n          <div class=\"gcb-time\">12:12:12<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"item\" data-index=\"1\">\r\n      <div class=\"gcb-box\">\r\n        <div class=\"gcb-photo\">\r\n          <img decoding=\"async\" src=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_160814_v01.jpg\">\r\n          <div class=\"gcb-time\">12:15:45<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"item\" data-index=\"2\">\r\n      <div class=\"gcb-box\">\r\n        <div class=\"gcb-photo\">\r\n          <img decoding=\"async\" src=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_161456_v01.jpg\">\r\n          <div class=\"gcb-time\">12:18:30<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"item\" data-index=\"3\">\r\n      <div class=\"gcb-box\">\r\n        <div class=\"gcb-photo\">\r\n          <img decoding=\"async\" src=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_163424_v01.jpg\">\r\n          <div class=\"gcb-time\">12:21:00<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"item\" data-index=\"4\">\r\n      <div class=\"gcb-box\">\r\n        <div class=\"gcb-photo\">\r\n          <img decoding=\"async\" src=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_163440_v01.jpg\">\r\n          <div class=\"gcb-time\">12:28:00<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- =========================\r\n   \ud83d\udd39 SCRIPT\r\n========================= -->\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function(){\r\n\r\n  const $ = jQuery;\r\n  const owl = $(\"#gcb-carousel .owl-carousel\");\r\n  const totalItems = owl.find(\".item\").length;\r\n  const isFew = totalItems <= 5;\r\n\r\n  \/\/ actualizar texto din\u00e1mico de pesta\u00f1a\r\n  document.getElementById(\"gcb-toggle-text\").textContent = totalItems + \" Fotos\";\r\n\r\n  \/\/ inicializa carousel\r\n  owl.owlCarousel({\r\n    loop: !isFew,\r\n    margin: 6,\r\n    nav: true,\r\n    autoplay: !isFew,\r\n    autoplayTimeout: 6000,\r\n    autoplayHoverPause: true,\r\n    smartSpeed: 600,\r\n    autoWidth: true\r\n  });\r\n\r\n  if (isFew) owl.addClass(\"gcb-center-few\");\r\n\r\n  $(\"#gcb-carousel .owl-prev\").html('<svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>');\r\n  $(\"#gcb-carousel .owl-next\").html('<svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg>');\r\n\r\n  \/\/ array de audios\r\n  const audios = document.querySelectorAll(\"audio\");\r\n\r\n  function getRealContainer(el){\r\n    let current = el;\r\n    while(current){\r\n      if(current.classList && current.classList.contains(\"gcb-target\")) return current;\r\n      current = current.parentElement;\r\n    }\r\n    return el;\r\n  }\r\n\r\n  function scrollToElement(el){\r\n    const rect = el.getBoundingClientRect();\r\n    const absoluteTop = rect.top + window.pageYOffset;\r\n    const headerOffset = document.querySelector(\"header\")?.offsetHeight || 0;\r\n\r\n    \/* \ud83d\udd25 AJUSTES QUE PUEDES MODIFICAR *\/\r\n\r\n    const FACTOR = -0.20;\r\n    \/\/ \ud83d\udc46 Ajuste proporcional (recomendado entre 0.10 y 0.18)\r\n    const AJUSTE_FINE = 20;\r\n    \/\/ \ud83d\udc46 Ajuste en p\u00edxeles (sube m\u00e1s el contenido)\r\n    \/\/ prueba: 0 \/ 20 \/ 40 \/ 60\r\n    \r\n    const dynamicOffset = window.innerHeight * FACTOR;\r\n    const finalPosition = absoluteTop - headerOffset - dynamicOffset - AJUSTE_FINE;\r\n    window.scrollTo({ top: finalPosition, behavior: \"smooth\" });\r\n  }\r\n\r\n  \/\/ reproducir audio y scroll\r\n  audios.forEach((audio,i)=>{\r\n    audio.addEventListener(\"play\", ()=>{\r\n      audios.forEach(other=>{ if(other!==audio){ other.pause(); other.currentTime=0; } });\r\n      scrollToElement(getRealContainer(audio));\r\n    });\r\n    audio.addEventListener(\"ended\", ()=>{ if(audios[i+1]) audios[i+1].play(); });\r\n  });\r\n\r\n  \/\/ clic en foto \u2192 reproducir audio y ocultar carrusel\r\n  $(\"#gcb-carousel .item\").on(\"click\", function(){\r\n    const index = $(this).data(\"index\");\r\n    if(audios[index]){\r\n      audios[index].play();\r\n      scrollToElement(getRealContainer(audios[index]));\r\n      document.getElementById(\"gcb-carousel\").classList.add(\"gcb-hidden\");\r\n    }\r\n  });\r\n\r\n  \/\/ toggle pesta\u00f1a\r\n  document.getElementById(\"gcb-toggle\").addEventListener(\"click\", ()=>{\r\n    document.getElementById(\"gcb-carousel\").classList.toggle(\"gcb-hidden\");\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-e9d422b e-flex e-con-boxed e-con e-parent\" data-id=\"e9d422b\" 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-8ef424b elementor-widget elementor-widget-html\" data-id=\"8ef424b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================\r\n     \ud83d\udd25 Widget Audio Global Valpito\r\n     ========================= -->\r\n\r\n<div id=\"agv-global\" class=\"agv-hidden\">\r\n\r\n  <div id=\"agv-inner\">\r\n    <span class=\"agv-icon\">\ud83c\udfa4<\/span>\r\n\r\n    <span id=\"agv-text\">--:--:--<\/span>\r\n\r\n    <button id=\"agv-play\">\r\n      <!-- \u25b6 -->\r\n      <svg class=\"icon-play\" viewBox=\"0 0 24 24\">\r\n        <polygon points=\"5,3 19,12 5,21\"><\/polygon>\r\n      <\/svg>\r\n      <!-- \u275a\u275a -->\r\n      <svg class=\"icon-pause\" viewBox=\"0 0 24 24\" style=\"display:none;\">\r\n        <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n        <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"><\/rect>\r\n      <\/svg>\r\n    <\/button>\r\n\r\n    <button id=\"agv-stop\">\r\n      <svg viewBox=\"0 0 24 24\">\r\n        <rect x=\"5\" y=\"5\" width=\"14\" height=\"14\"><\/rect>\r\n      <\/svg>\r\n    <\/button>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n#agv-global {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 50%;\r\n  transform: translate(-50%, -100%);\r\n  background: #fff;\r\n  color: #282828;\r\n  padding: 4px 16px;\r\n  border-radius: 0 0 10px 10px;\r\n  z-index: 99999;\r\n  transition: transform 0.2s ease;\r\n}\r\n\r\n\/* visible *\/\r\n#agv-global.agv-visible {\r\n  transform: translate(-50%, 0);\r\n}\r\n\r\n\/* fila \u00fanica *\/\r\n#agv-inner {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  white-space: nowrap;\r\n}\r\n\r\n\/* icono \ud83c\udfa4 *\/\r\n.agv-icon {\r\n  font-size: 22px;\r\n}\r\n\r\n\/* texto tiempo *\/\r\n#agv-text {\r\n  font-size: 13px;\r\n  font-family: monospace;\r\n}\r\n\r\n\/* botones estilo reproductor *\/\r\n#agv-global button {\r\n  all: unset;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: transform 0.2s ease;\r\n}\r\n\r\n\/* hover igual al player *\/\r\n#agv-global button:hover {\r\n  transform: scale(1.2);\r\n}\r\n\r\n\/* svg *\/\r\n#agv-global svg {\r\n  width: 18px;\r\n  height: 18px;\r\n  fill: #282828;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n\r\nlet activeAudio = null;\r\nlet startTime = 0;\r\nlet interval = null;\r\n\r\nfunction format(sec){\r\n  const h = Math.floor(sec\/3600);\r\n  const m = Math.floor((sec%3600)\/60);\r\n  const s = Math.floor(sec%60);\r\n  return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;\r\n}\r\n\r\nfunction getStart(url){\r\n  const m = url.match(\/_(\\d{6})_\/);\r\n  if(!m) return 0;\r\n  const t = m[1];\r\n  return t.slice(0,2)*3600 + t.slice(2,4)*60 + +t.slice(4,6);\r\n}\r\n\r\nconst bar = document.getElementById(\"agv-global\");\r\nconst text = document.getElementById(\"agv-text\");\r\nconst btnPlay = document.getElementById(\"agv-play\");\r\nconst btnStop = document.getElementById(\"agv-stop\");\r\n\r\nconst iconPlay = btnPlay.querySelector(\".icon-play\");\r\nconst iconPause = btnPlay.querySelector(\".icon-pause\");\r\n\r\nfunction update(){\r\n  if(!activeAudio) return;\r\n  const t = startTime + activeAudio.currentTime;\r\n  text.textContent = format(t);\r\n}\r\n\r\nfunction syncIcons(){\r\n  if(!activeAudio) return;\r\n\r\n  if(activeAudio.paused){\r\n    iconPlay.style.display = \"block\";\r\n    iconPause.style.display = \"none\";\r\n  } else {\r\n    iconPlay.style.display = \"none\";\r\n    iconPause.style.display = \"block\";\r\n  }\r\n}\r\n\r\ndocument.querySelectorAll(\"audio\").forEach(audio => {\r\n\r\n  audio.addEventListener(\"play\", () => {\r\n\r\n    document.querySelectorAll(\"audio\").forEach(a => {\r\n      if(a !== audio){\r\n        a.pause();\r\n        a.currentTime = 0;\r\n      }\r\n    });\r\n\r\n    activeAudio = audio;\r\n    startTime = getStart(audio.src);\r\n\r\n    bar.classList.add(\"agv-visible\");\r\n\r\n    clearInterval(interval);\r\n    interval = setInterval(update, 500);\r\n\r\n    update();\r\n    syncIcons();\r\n  });\r\n\r\n  audio.addEventListener(\"pause\", () => {\r\n    if(audio === activeAudio){\r\n      syncIcons();\r\n    }\r\n  });\r\n\r\n  audio.addEventListener(\"ended\", () => {\r\n    if(audio === activeAudio){\r\n      stopGlobal();\r\n    }\r\n  });\r\n\r\n});\r\n\r\nbtnPlay.addEventListener(\"click\", () => {\r\n  if(!activeAudio) return;\r\n\r\n  if(activeAudio.paused){\r\n    activeAudio.play();\r\n  } else {\r\n    activeAudio.pause();\r\n  }\r\n});\r\n\r\nbtnStop.addEventListener(\"click\", stopGlobal);\r\n\r\nfunction stopGlobal(){\r\n  if(!activeAudio) return;\r\n\r\n  activeAudio.pause();\r\n  activeAudio.currentTime = 0;\r\n\r\n  activeAudio = null;\r\n\r\n  bar.classList.remove(\"agv-visible\");\r\n\r\n  clearInterval(interval);\r\n}\r\n\r\nsetInterval(() => {\r\n  if(activeAudio && activeAudio.paused && activeAudio.currentTime === 0){\r\n    bar.classList.remove(\"agv-visible\");\r\n    activeAudio = null;\r\n  }\r\n}, 1000);\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>13:22:33 -5 +5 &#8211;:&#8211;:&#8211; &#8211;:&#8211;:&#8211; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. -5 +5 &#8211;:&#8211;:&#8211; &#8211;:&#8211;:&#8211; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. -5 +5 &#8211;:&#8211;:&#8211; &#8211;:&#8211;:&#8211; Lorem ipsum dolor sit amet, consectetur [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"disabled","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":1091,"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":2261,"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/pages\/16\/revisions\/2261"}],"wp:attachment":[{"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}