{"id":3736,"date":"2026-04-11T00:59:50","date_gmt":"2026-04-11T04:59:50","guid":{"rendered":"https:\/\/valpito.cl\/yosoytu\/?page_id=3736"},"modified":"2026-04-24T03:31:07","modified_gmt":"2026-04-24T07:31:07","slug":"inicio78","status":"publish","type":"page","link":"https:\/\/valpito.cl\/yosoytu\/","title":{"rendered":"Inicio78"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3736\" class=\"elementor elementor-3736\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c98864 e-flex e-con-boxed e-con e-parent\" data-id=\"0c98864\" 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-63930ea e-con-full e-flex e-con e-child\" data-id=\"63930ea\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0ba53e0 elementor-widget elementor-widget-heading\" data-id=\"0ba53e0\" 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\">15:54:18<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e501633 e-con-full e-flex e-con e-child\" data-id=\"e501633\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-329183f elementor-widget elementor-widget-image\" data-id=\"329183f\" 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 fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"1280\" src=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_155418_v02.jpg\" class=\"attachment-full size-full wp-image-4120\" alt=\"Fotograf\u00eda de la reuni\u00f3n 30 de Historias Pr\u00edstinas del Puerto de Valpara\u00edso, realizada por valpito.cl\" srcset=\"https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_155418_v02.jpg 1920w, https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_155418_v02-300x200.jpg 300w, https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_155418_v02-1024x683.jpg 1024w, https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_155418_v02-768x512.jpg 768w, https:\/\/valpito.cl\/yosoytu\/wp-content\/uploads\/2026\/04\/VALPITO.CL_R30_20230203_155418_v02-1536x1024.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\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-e161a64 e-con-full e-flex e-con e-child\" data-id=\"e161a64\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5311071 elementor-widget elementor-widget-html\" data-id=\"5311071\" 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.cl - Reuni\u00f3n: 30\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        <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      <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      <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        <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-1.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;\r\n  padding: 12px 20px;\r\n\r\n  \/* \ud83d\udd25 ESTADO BASE (TRANSPARENTE) *\/\r\n  background: transparent;\r\n  border: 1.5px solid rgba(255,255,255,0.45);\r\n  \r\n  \/* \ud83d\udd25 EFECTO VIDRIO *\/\r\n  backdrop-filter: blur(6px);\r\n  -webkit-backdrop-filter: blur(6px);\r\n\r\n  border-radius: 9999px;\r\n  font-family: inherit;\r\n\r\n  \/* \ud83d\udd25 TRANSICI\u00d3N SUAVE ENTRE ESTADOS *\/\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n\/* =====================================\r\n   \ud83d\udd25 ESTADO ACTIVO (CUANDO HAY INTERACCI\u00d3N)\r\n   ===================================== *\/\r\n.audio-pro-max.active {\r\n  background: #3b8183;\r\n  border: 1.5px solid rgba(255,255,255,0);\r\n\r\n  box-shadow: none; \/* Sombra reproductor *\/\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;\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\/* \ud83d\udd25 TIPOGRAF\u00cdA PRO (RELOJ REAL) *\/\r\n.current, .duration {\r\n  font-size: 14px;\r\n  color: #fff;\r\n\r\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, monospace;\r\n  font-weight: 500;\r\n\r\n  font-variant-numeric: tabular-nums;\r\n  font-feature-settings: \"tnum\";\r\n\r\n  letter-spacing: 0.5px;\r\n  line-height: 1;\r\n}\r\n\r\n\/* \ud83d\udd39 TEXTO -5 \/ +5 *\/\r\n.jump {\r\n  font-size: 13px;\r\n  color: #fff;\r\n  opacity: 0.75;\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;\r\n  height: 30px;\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.audio-pro-max button:hover {\r\n  transform: scale(1.2);\r\n}\r\n\r\n\/* \ud83c\udfaf ICONOS *\/\r\n.audio-pro-max button svg {\r\n  width: 22px;\r\n  height: 22px;\r\n  fill: #fff;\r\n  pointer-events: none;\r\n}\r\n\r\n\/* \ud83d\udcca BARRA *\/\r\n.progress-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n.timeline {\r\n  flex: 1;\r\n  height: 4px;\r\n  background: rgba(255,255,255,0.15);\r\n  border-radius: 10px;\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n.progress {\r\n  height: 100%;\r\n  width: 0%;\r\n  background: #fff;\r\n  border-radius: 10px;\r\n}\r\n\r\n.thumb {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 0%;\r\n  width: 12px;\r\n  height: 12px;\r\n  background: #fff;\r\n  border-radius: 50%;\r\n  transform: translate(-50%, -50%);\r\n  cursor: grab;\r\n  touch-action: none;\r\n}\r\n\r\n.thumb:active {\r\n  cursor: grabbing;\r\n}\r\n\r\n\/* \ud83d\udcf1 ANCHO EN TABLET *\/\r\n@media (min-width: 768px) and (max-width: 1024px){\r\n  .audio-pro-max{\r\n    width: 280px;\r\n  }\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\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  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    \/* \ud83d\udd25 ACTIVAR ESTADO VISUAL *\/\r\n    player.classList.add(\"active\");\r\n  };\r\n\r\n  audio.onpause = () => {\r\n    iconPlay.style.display = \"block\";\r\n    iconPause.style.display = \"none\";\r\n\r\n    \/* \ud83d\udd25 IMPORTANTE:\r\n       NO quitamos active \u2192 sigue encendido en pausa *\/\r\n  };\r\n\r\n  \/* \ud83d\udd25 CUANDO TERMINA EL AUDIO \u2192 se apaga *\/\r\n  audio.onended = () => {\r\n    player.classList.remove(\"active\");\r\n  };\r\n\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  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    \/* \ud83d\udd25 OPCIONAL PRO:\r\n       Si vuelve a 0 manualmente \u2192 se apaga *\/\r\n    if(audio.currentTime === 0 && audio.paused){\r\n      player.classList.remove(\"active\");\r\n    }\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  bar.addEventListener(\"click\", e => {\r\n    audio.currentTime = getTime(e.clientX);\r\n  });\r\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>15:54:18 -5 +5 &#8211;:&#8211;:&#8211; &#8211;:&#8211;:&#8211;<\/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-3736","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/pages\/3736","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=3736"}],"version-history":[{"count":409,"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/pages\/3736\/revisions"}],"predecessor-version":[{"id":4291,"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/pages\/3736\/revisions\/4291"}],"wp:attachment":[{"href":"https:\/\/valpito.cl\/yosoytu\/wp-json\/wp\/v2\/media?parent=3736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}