{"id":10,"date":"2026-05-05T13:42:57","date_gmt":"2026-05-05T13:42:57","guid":{"rendered":"https:\/\/googlecumbia.metricavisual.com\/2026\/05\/05\/blog-4\/"},"modified":"2026-06-21T00:42:56","modified_gmt":"2026-06-21T00:42:56","slug":"2025","status":"publish","type":"post","link":"https:\/\/googlecumbia.metricavisual.com\/?p=10","title":{"rendered":"canciones 2026"},"content":{"rendered":"<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod.<\/p>\n\n\n\u00ab`html\n<!-- FUENTES DEL REPRODUCTOR -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@400;700&#038;display=swap\" rel=\"stylesheet\">\n<link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\">\n\n<div class=\"rabi-player-app\" id=\"rabi-player-app\">\n\n<style>\n\/* ==================================================\n   REPRODUCTOR RABI HUILLCA AISLADO PARA WORDPRESS\n================================================== *\/\n\n#rabi-player-app {\n  --rabi-primary: #f33449;\n  --rabi-white: #ffffff;\n  --rabi-grey: #555555;\n  --rabi-background: #000000;\n\n  position: relative;\n  width: 100%;\n  min-height: 100vh;\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  background: var(--rabi-background);\n  font-family: \"Open Sans\", Arial, sans-serif;\n  font-size: 16px;\n  line-height: 1.5;\n}\n\n#rabi-player-app.rabi-dark {\n  --rabi-white: #111111;\n  --rabi-grey: #ffffff;\n}\n\n#rabi-player-app *,\n#rabi-player-app *::before,\n#rabi-player-app *::after {\n  box-sizing: border-box;\n}\n\n#rabi-player-app button,\n#rabi-player-app input {\n  font: inherit;\n}\n\n#rabi-player-app img {\n  display: block;\n  max-width: 100%;\n}\n\n#rabi-player-app button {\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n#rabi-player-app .rabi-hide {\n  display: none !important;\n}\n\n\/* ==================================================\n   ANIMACIONES\n================================================== *\/\n\n@keyframes rabiFadeIn {\n  0% {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes rabiSpin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes rabiEqualize {\n  0%,\n  100% {\n    transform: scaleY(1);\n  }\n\n  50% {\n    transform: scaleY(0.3);\n  }\n}\n\n\/* ==================================================\n   SECCIONES\n================================================== *\/\n\n#rabi-player-app .rabi-sec {\n  width: 100%;\n  min-height: 100vh;\n  max-width: 460px;\n  margin: 0 auto;\n  background: var(--rabi-white);\n  animation: rabiFadeIn 0.5s ease;\n}\n\n#rabi-player-app .rabi-sec-1 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 16px;\n  min-height: 100vh;\n  padding: 20px;\n  text-align: center;\n}\n\n#rabi-player-app .rabi-sec-1 svg {\n  display: block;\n  width: 90%;\n  max-width: 300px;\n  max-height: 20vh;\n  margin: 0 auto;\n}\n\n#rabi-player-app .rabi-sec-1 h1 {\n  margin: 0;\n  color: var(--rabi-grey);\n  font-size: clamp(32px, 8vw, 40px);\n  font-weight: 700;\n  line-height: 1.15;\n}\n\n#rabi-player-app .rabi-sec-1 h1 > span {\n  color: deeppink;\n}\n\n#rabi-player-app .rabi-sec-1 p {\n  margin: 0;\n  color: #666666;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n#rabi-player-app .rabi-main-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  min-height: 48px;\n  padding: 12px 25px;\n  border: 0;\n  border-radius: 25px;\n  background: deeppink;\n  color: #ffffff;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 1.2;\n  cursor: pointer;\n  transition:\n    transform 0.2s ease,\n    box-shadow 0.2s ease;\n}\n\n#rabi-player-app .rabi-main-button:hover {\n  transform: scale(1.05);\n  box-shadow: 0 10px 25px rgba(255, 20, 147, 0.3);\n}\n\n#rabi-player-app button:focus-visible,\n#rabi-player-app input:focus-visible,\n#rabi-player-app [role=\"button\"]:focus-visible {\n  outline: 3px solid var(--rabi-primary);\n  outline-offset: 3px;\n}\n\n\/* ==================================================\n   IMAGEN PRINCIPAL\n================================================== *\/\n\n#rabi-player-app .rabi-jordan {\n  width: 100%;\n  max-width: 90%;\n  margin: 16px auto;\n  overflow: hidden;\n  border-radius: 20px;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n}\n\n#rabi-player-app .rabi-jordan img {\n  width: 100%;\n  height: auto;\n  margin: 0;\n  object-fit: cover;\n}\n\n\/* ==================================================\n   CABECERA DE LA LISTA\n================================================== *\/\n\n#rabi-player-app .rabi-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 10px;\n  padding: 14px 10px;\n  border-bottom: 2px solid #cccccc;\n}\n\n#rabi-player-app .rabi-header h2 {\n  margin: 0;\n  color: var(--rabi-grey);\n  font-size: 20px;\n  line-height: 1.3;\n}\n\n\/* ==================================================\n   LISTA DE CANCIONES\n================================================== *\/\n\n#rabi-player-app .rabi-music-list {\n  padding-bottom: 90px;\n}\n\n#rabi-player-app .rabi-music {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  padding: 10px;\n  border-bottom: 1px solid #dedede;\n  color: var(--rabi-grey);\n  cursor: pointer;\n  transition:\n    background-color 0.2s ease,\n    color 0.2s ease;\n}\n\n#rabi-player-app .rabi-music:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n\n#rabi-player-app .rabi-music.rabi-active {\n  color: var(--rabi-primary);\n  background: rgba(243, 52, 73, 0.1);\n}\n\n#rabi-player-app .rabi-list-thumbnail {\n  width: 60px;\n  height: 60px;\n  flex: 0 0 60px;\n  overflow: hidden;\n  border-radius: 6px;\n  background: #eeeeee;\n}\n\n#rabi-player-app .rabi-list-thumbnail img {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  object-fit: cover;\n}\n\n#rabi-player-app .rabi-list-content {\n  flex: 1;\n  min-width: 0;\n  padding: 0 15px;\n}\n\n#rabi-player-app .rabi-list-content h3 {\n  overflow: hidden;\n  margin: 0 0 4px;\n  color: inherit;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 1.3;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n#rabi-player-app .rabi-list-content small {\n  display: block;\n  overflow: hidden;\n  font-size: 14px;\n  line-height: 1.3;\n  opacity: 0.7;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n#rabi-player-app .rabi-list-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 50px;\n  height: 50px;\n  flex: 0 0 50px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n\n#rabi-player-app .rabi-list-btn .material-icons {\n  color: inherit;\n  font-size: 28px;\n}\n\n\/* ==================================================\n   ECUALIZADOR\n================================================== *\/\n\n#rabi-player-app .rabi-music .rabi-equalize {\n  display: none;\n}\n\n#rabi-player-app .rabi-music.rabi-active .rabi-list-btn > .material-icons {\n  display: none;\n}\n\n#rabi-player-app .rabi-music.rabi-active .rabi-equalize {\n  display: flex;\n  align-items: flex-end;\n  gap: 2px;\n  height: 20px;\n}\n\n#rabi-player-app .rabi-equalize span {\n  display: block;\n  width: 3px;\n  height: 18px;\n  background: var(--rabi-primary);\n  transform-origin: bottom;\n  animation: rabiEqualize 1s linear infinite;\n}\n\n#rabi-player-app .rabi-equalize span:nth-child(2) {\n  animation-delay: 0.3s;\n}\n\n#rabi-player-app .rabi-equalize span:nth-child(3) {\n  animation-delay: 0.6s;\n}\n\n#rabi-player-app .rabi-equalize.rabi-paused span {\n  animation-play-state: paused !important;\n}\n\n\/* ==================================================\n   REPRODUCTOR INFERIOR\n================================================== *\/\n\n#rabi-player-app .rabi-players {\n  position: fixed;\n  z-index: 99999;\n  bottom: 0;\n  left: 50%;\n  width: 100%;\n  max-width: 460px;\n  overflow: hidden;\n  border-radius: 20px 20px 0 0;\n  background: var(--rabi-white);\n  color: var(--rabi-grey);\n  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);\n  transform: translateX(-50%);\n  transition:\n    height 0.3s ease,\n    background-color 0.3s ease;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: 50%;\n  height: 100vh;\n  max-height: 100vh;\n  padding: 0 20px 30px;\n  overflow-y: auto;\n  border-radius: 0;\n  text-align: center;\n  animation: rabiFadeIn 0.4s ease;\n}\n\n\/* ==================================================\n   BOTONES SUPERIORES\n================================================== *\/\n\n#rabi-player-app .rabi-back-btn,\n#rabi-player-app .rabi-dark-mode-btn {\n  position: absolute;\n  z-index: 20;\n  top: 10px;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 42px;\n  height: 42px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.92);\n  color: #555555;\n  cursor: pointer;\n  transition:\n    background-color 0.2s ease,\n    transform 0.2s ease;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-back-btn,\n#rabi-player-app .rabi-players.rabi-expanded .rabi-dark-mode-btn {\n  display: flex;\n}\n\n#rabi-player-app .rabi-back-btn {\n  left: 10px;\n}\n\n#rabi-player-app .rabi-dark-mode-btn {\n  right: 10px;\n}\n\n#rabi-player-app .rabi-back-btn:hover,\n#rabi-player-app .rabi-dark-mode-btn:hover {\n  background: rgba(243, 52, 73, 0.15);\n  transform: scale(1.05);\n}\n\n\/* ==================================================\n   CONTENIDO DEL REPRODUCTOR\n================================================== *\/\n\n#rabi-player-app .rabi-bottom {\n  display: flex;\n  align-items: center;\n  min-height: 76px;\n  padding: 8px 10px;\n  border-top: 1px solid #cccccc;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-bottom {\n  display: flex;\n  flex-direction: column;\n  min-height: auto;\n  padding: 0;\n  border-top: 0;\n}\n\n#rabi-player-app .rabi-thumbnail {\n  width: 60px;\n  height: 60px;\n  flex: 0 0 60px;\n  overflow: hidden;\n  border-radius: 6px;\n  background: #000000;\n}\n\n#rabi-player-app .rabi-thumbnail img {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  object-fit: cover;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-thumbnail {\n  width: 220px;\n  height: 220px;\n  flex: 0 0 220px;\n  margin: 60px auto 25px;\n  border-radius: 50%;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-thumbnail.rabi-spin {\n  animation: rabiSpin 4s linear infinite;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-thumbnail.rabi-spin.rabi-paused {\n  animation-play-state: paused;\n}\n\n#rabi-player-app .rabi-content {\n  flex: 1;\n  min-width: 0;\n  padding: 0 12px;\n  color: var(--rabi-grey);\n  text-align: left;\n  cursor: pointer;\n}\n\n#rabi-player-app .rabi-content h3 {\n  overflow: hidden;\n  margin: 0 0 4px;\n  color: var(--rabi-primary);\n  font-size: 15px;\n  line-height: 1.3;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n#rabi-player-app .rabi-content small {\n  display: block;\n  overflow: hidden;\n  font-size: 12px;\n  line-height: 1.3;\n  opacity: 0.8;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-content {\n  width: 100%;\n  padding: 0;\n  text-align: center;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-content h3 {\n  overflow: visible;\n  margin-bottom: 8px;\n  font-size: 24px;\n  white-space: normal;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-content small {\n  overflow: visible;\n  font-size: 14px;\n  white-space: normal;\n}\n\n\/* ==================================================\n   PROGRESO\n================================================== *\/\n\n#rabi-player-app .rabi-progress-box {\n  display: none;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  margin: 30px 0 15px;\n  gap: 10px;\n  font-size: 13px;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-progress-box {\n  display: flex;\n}\n\n#rabi-player-app .rabi-progress-bar {\n  position: relative;\n  width: 100%;\n  height: 5px;\n  border: 0;\n  border-radius: 30px;\n  background: #dddddd;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n}\n\n#rabi-player-app .rabi-progress-bar::-webkit-slider-thumb {\n  width: 20px;\n  height: 20px;\n  border: 0;\n  border-radius: 50%;\n  background: var(--rabi-primary);\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n}\n\n#rabi-player-app .rabi-progress-bar::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border: 0;\n  border-radius: 50%;\n  background: var(--rabi-primary);\n  cursor: pointer;\n}\n\n\/* ==================================================\n   HERRAMIENTAS\n================================================== *\/\n\n#rabi-player-app .rabi-tools {\n  display: none;\n  justify-content: space-evenly;\n  width: 100%;\n  margin: 20px 0;\n  gap: 16px;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-tools {\n  display: flex;\n}\n\n#rabi-player-app .rabi-tools button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  cursor: pointer;\n}\n\n#rabi-player-app .rabi-tools .material-icons {\n  color: #777777;\n  font-size: 30px;\n}\n\n#rabi-player-app .rabi-tools button.rabi-active .material-icons,\n#rabi-player-app .rabi-tools button:hover .material-icons {\n  color: var(--rabi-primary);\n}\n\n\/* ==================================================\n   BOTONES DE REPRODUCCI\u00d3N\n================================================== *\/\n\n#rabi-player-app .rabi-btn-group {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  gap: 12px;\n}\n\n#rabi-player-app .rabi-btn-group button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--rabi-primary);\n  cursor: pointer;\n  transition:\n    transform 0.2s ease,\n    background-color 0.2s ease,\n    color 0.2s ease;\n}\n\n#rabi-player-app .rabi-btn-group .material-icons {\n  font-size: 32px;\n}\n\n#rabi-player-app .rabi-prev-btn,\n#rabi-player-app .rabi-next-btn {\n  display: none !important;\n}\n\n#rabi-player-app .rabi-play-btn {\n  background: rgba(243, 52, 73, 0.15) !important;\n}\n\n#rabi-player-app .rabi-play-btn:hover {\n  background: var(--rabi-primary) !important;\n  color: #ffffff !important;\n  transform: scale(1.08);\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-btn-group {\n  width: 100%;\n  margin: 10px 0 20px;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-btn-group button {\n  width: 60px;\n  height: 60px;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-prev-btn,\n#rabi-player-app .rabi-players.rabi-expanded .rabi-next-btn {\n  display: flex !important;\n}\n\n\/* ==================================================\n   VOLUMEN\n================================================== *\/\n\n#rabi-player-app .rabi-volume-box {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin: 5px 0;\n  padding: 10px;\n  gap: 10px;\n}\n\n#rabi-player-app .rabi-players.rabi-expanded .rabi-volume-box {\n  display: flex;\n}\n\n#rabi-player-app .rabi-volume-box button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--rabi-grey);\n  cursor: pointer;\n}\n\n#rabi-player-app .rabi-volume-box .rabi-progress-bar {\n  width: 65%;\n}\n\n\/* ==================================================\n   MODO OSCURO\n================================================== *\/\n\n#rabi-player-app.rabi-dark .rabi-header {\n  border-color: #333333;\n}\n\n#rabi-player-app.rabi-dark .rabi-music {\n  border-color: #333333;\n}\n\n#rabi-player-app.rabi-dark .rabi-music:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n\n#rabi-player-app.rabi-dark .rabi-bottom {\n  border-color: #333333;\n}\n\n#rabi-player-app.rabi-dark .rabi-sec-1 p {\n  color: #cccccc;\n}\n\n\/* ==================================================\n   RESPONSIVE\n================================================== *\/\n\n@media (max-width: 480px) {\n  #rabi-player-app .rabi-sec,\n  #rabi-player-app .rabi-players {\n    max-width: 100%;\n  }\n\n  #rabi-player-app .rabi-header h2 {\n    font-size: 17px;\n  }\n\n  #rabi-player-app .rabi-list-thumbnail {\n    width: 54px;\n    height: 54px;\n    flex-basis: 54px;\n  }\n\n  #rabi-player-app .rabi-list-content {\n    padding: 0 10px;\n  }\n\n  #rabi-player-app .rabi-list-content h3 {\n    font-size: 14px;\n  }\n\n  #rabi-player-app .rabi-thumbnail {\n    width: 54px;\n    height: 54px;\n    flex-basis: 54px;\n  }\n\n  #rabi-player-app .rabi-bottom {\n    min-height: 70px;\n    padding: 7px 8px;\n  }\n\n  #rabi-player-app .rabi-content {\n    padding: 0 8px;\n  }\n\n  #rabi-player-app .rabi-content h3 {\n    font-size: 13px;\n  }\n\n  #rabi-player-app .rabi-play-btn {\n    width: 44px !important;\n    height: 44px !important;\n  }\n\n  #rabi-player-app .rabi-players.rabi-expanded .rabi-thumbnail {\n    width: 200px;\n    height: 200px;\n    flex-basis: 200px;\n  }\n}\n<\/style>\n\n<main class=\"rabi-player-main\">\n\n  <!-- PANTALLA INICIAL -->\n  <section class=\"rabi-sec rabi-sec-1\" id=\"rabi-sec-1\" aria-label=\"Primicias 2026\">\n\n    <figure class=\"rabi-jordan\">\n      <img decoding=\"async\"\n        src=\"https:\/\/i.postimg.cc\/t4nnz9Y9\/giff_rabi.gif\"\n        alt=\"Animaci\u00f3n promocional de Rabi Huillca\"\n        width=\"70%\"\n        height=\"80%\"\n        loading=\"lazy\"\n      >\n    <\/figure>\n\n    <svg\n      id=\"rabi-logo-musical\"\n      role=\"img\"\n      aria-label=\"Logo musical\"\n      viewBox=\"0 0 512 512\"\n      width=\"300\"\n      height=\"350\"\n    >\n      <circle cx=\"256\" cy=\"256\" r=\"200\" fill=\"#f33449\"><\/circle>\n    <\/svg>\n\n    <h1>Primicias<span>2026<\/span><\/h1>\n\n    <p>Rabi Huillca &#8211; Creador de M\u00fasica<\/p>\n\n    <button\n      type=\"button\"\n      class=\"rabi-main-button\"\n      id=\"rabi-show-list\"\n      aria-label=\"Ver lista de canciones\"\n    >\n      \u25b6\ufe0f Escuchar Lista Completa\n    <\/button>\n\n  <\/section>\n\n  <!-- LISTA DE CANCIONES -->\n  <section\n    class=\"rabi-sec rabi-sec-2 rabi-hide\"\n    id=\"rabi-sec-2\"\n    aria-label=\"Lista de canciones\"\n  >\n\n    <header class=\"rabi-header\">\n      <h2>Lista de Canciones &#8211; Rabi Huillca<\/h2>\n    <\/header>\n\n    <div\n      class=\"rabi-music-list\"\n      id=\"rabi-music-list\"\n      role=\"list\"\n      aria-label=\"Lista de canciones\"\n    ><\/div>\n\n    <audio\n      id=\"rabi-audio\"\n      preload=\"metadata\"\n      aria-label=\"Reproductor de m\u00fasica\"\n    ><\/audio>\n\n    <!-- REPRODUCTOR -->\n    <div\n      class=\"rabi-players\"\n      id=\"rabi-players\"\n      role=\"region\"\n      aria-label=\"Reproductor de m\u00fasica\"\n      aria-modal=\"false\"\n    >\n\n      <button\n        type=\"button\"\n        class=\"rabi-back-btn\"\n        id=\"rabi-close-player\"\n        aria-label=\"Cerrar reproductor completo\"\n      >\n        <i class=\"material-icons\" aria-hidden=\"true\">expand_more<\/i>\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"rabi-dark-mode-btn\"\n        id=\"rabi-dark-mode\"\n        aria-label=\"Cambiar modo oscuro\"\n      >\n        <i class=\"material-icons\" aria-hidden=\"true\">invert_colors<\/i>\n      <\/button>\n\n      <div class=\"rabi-bottom\">\n\n        <div class=\"rabi-thumbnail\" id=\"rabi-thumbnail-box\">\n          <img decoding=\"async\"\n            id=\"rabi-thumbnail\"\n            src=\"\"\n            alt=\"Portada de la canci\u00f3n actual\"\n          >\n        <\/div>\n\n        <div\n          class=\"rabi-content\"\n          id=\"rabi-open-player\"\n          tabindex=\"0\"\n          role=\"button\"\n          aria-label=\"Abrir reproductor completo\"\n        >\n          <h3 id=\"rabi-track-name\">Selecciona una canci\u00f3n<\/h3>\n          <small id=\"rabi-track-category\">Rabi Huillca<\/small>\n        <\/div>\n\n        <div\n          class=\"rabi-volume-box\"\n          role=\"group\"\n          aria-label=\"Control de volumen\"\n        >\n          <button\n            type=\"button\"\n            id=\"rabi-volume-down\"\n            aria-label=\"Bajar volumen\"\n          >\n            <i class=\"material-icons\" aria-hidden=\"true\">remove<\/i>\n          <\/button>\n\n          <input\n            type=\"range\"\n            class=\"rabi-progress-bar\"\n            id=\"rabi-volume-bar\"\n            min=\"0\"\n            max=\"100\"\n            value=\"80\"\n            step=\"1\"\n            aria-label=\"Volumen\"\n          >\n\n          <button\n            type=\"button\"\n            id=\"rabi-volume-up\"\n            aria-label=\"Subir volumen\"\n          >\n            <i class=\"material-icons\" aria-hidden=\"true\">add<\/i>\n          <\/button>\n        <\/div>\n\n        <div class=\"rabi-tools\" role=\"group\" aria-label=\"Opciones\">\n\n          <button\n            type=\"button\"\n            class=\"rabi-equaliser rabi-active\"\n            id=\"rabi-toggle-spin\"\n            aria-label=\"Animaci\u00f3n de portada\"\n          >\n            <i class=\"material-icons\" aria-hidden=\"true\">equalizer<\/i>\n          <\/button>\n\n          <button\n            type=\"button\"\n            class=\"rabi-repeat rabi-active\"\n            id=\"rabi-toggle-continuous\"\n            aria-label=\"Reproducci\u00f3n continua activada\"\n          >\n            <i class=\"material-icons\" aria-hidden=\"true\">repeat<\/i>\n          <\/button>\n\n        <\/div>\n\n        <div class=\"rabi-progress-box\">\n\n          <div id=\"rabi-current-time\">00:00<\/div>\n\n          <input\n            type=\"range\"\n            class=\"rabi-progress-bar\"\n            id=\"rabi-progress\"\n            min=\"0\"\n            max=\"100\"\n            value=\"0\"\n            step=\"0.1\"\n            aria-label=\"Progreso de la canci\u00f3n\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-valuenow=\"0\"\n          >\n\n          <div id=\"rabi-total-time\">00:00<\/div>\n\n        <\/div>\n\n        <div class=\"rabi-btn-group\" role=\"group\" aria-label=\"Controles de reproducci\u00f3n\">\n\n          <button\n            type=\"button\"\n            class=\"rabi-prev-btn\"\n            id=\"rabi-prev\"\n            aria-label=\"Canci\u00f3n anterior\"\n          >\n            <i class=\"material-icons\" aria-hidden=\"true\">skip_previous<\/i>\n          <\/button>\n\n          <button\n            type=\"button\"\n            class=\"rabi-play-btn\"\n            id=\"rabi-play\"\n            aria-label=\"Reproducir o pausar\"\n          >\n            <i id=\"rabi-play-icon\" class=\"material-icons\" aria-hidden=\"true\">\n              play_arrow\n            <\/i>\n          <\/button>\n\n          <button\n            type=\"button\"\n            class=\"rabi-next-btn\"\n            id=\"rabi-next\"\n            aria-label=\"Siguiente canci\u00f3n\"\n          >\n            <i class=\"material-icons\" aria-hidden=\"true\">skip_next<\/i>\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/section>\n<\/main>\n\n<script>\n(function () {\n  \"use strict\";\n\n  function iniciarReproductorRabi() {\n\n    const app = document.getElementById(\"rabi-player-app\");\n\n    if (!app || app.dataset.iniciado === \"true\") {\n      return;\n    }\n\n    app.dataset.iniciado = \"true\";\n\n    \/* ==================================================\n       LISTA COMPLETA: 49 CANCIONES\n    ================================================== *\/\n\n    const musicData = [\n\n      {\n        id: 1,\n        Autor: \"RABI HUILLCA\",\n        name: \"ABRAZAME FUERTE\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn721801.ca.archive.org\/0\/items\/demos-cumbias-rabi\/1%20Abr%C3%A1zame%20Fuerte%20%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/yxvMJ4Sc\/EN-ESCENARIO.png\"\n      },\n\n      {\n        id: 2,\n        Autor: \"Rabi Huillca\",\n        name: \"Amistad\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Amistad%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/ZYXkspYN\/amistad.png\"\n      },\n\n      {\n        id: 3,\n        Autor: \"Rabi Huillca\",\n        name: \"Ando buscando tu amor\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Ando%20buscando%20tu%20amor%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/1XwvjgMg\/ando-buscando-tu-amor.png\"\n      },\n\n      {\n        id: 4,\n        Autor: \"Rabi Huillca\",\n        name: \"A\u00f1o Nuevo\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/A%C3%B1o%20Nuevo%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/FKzDQCD1\/ano-nuevo.png\"\n      },\n\n      {\n        id: 5,\n        Autor: \"Rabi Huillca\",\n        name: \"Cara de Idiota\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/CARA%20DE%20IDIOTA%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/fyNck8jk\/cara-de-idiota.png\"\n      },\n\n      {\n        id: 6,\n        Autor: \"Rabi Huillca\",\n        name: \"Cari\u00f1o M\u00edo Vuelve\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Cari%C3%B1o%20m%C3%ADo%2C%20vuelve%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/rFh4LVbZ\/carino-mio-vuelve.png\"\n      },\n\n      {\n        id: 7,\n        Autor: \"Rabi Huillca\",\n        name: \"Cholo Soy\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Cholo%20soy%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/rFpdg6mK\/cholo-soy.png\"\n      },\n\n      {\n        id: 8,\n        Autor: \"Rabi Huillca\",\n        name: \"Colibr\u00ed\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Colibr%C3%AD%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/zv2G4BB3\/colibri.png\"\n      },\n\n      {\n        id: 9,\n        Autor: \"Rabi Huillca\",\n        name: \"Dinero Maldito Dinero\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/DINERO%20MALDITO%20DINERO%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/cH9WLzSZ\/dinero.png\"\n      },\n\n      {\n        id: 10,\n        Autor: \"Rabi Huillca\",\n        name: \"Dec\u00eddete\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Dec%C3%ADdete%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/PJpgrrym\/decidete.png\"\n      },\n\n      {\n        id: 11,\n        Autor: \"Rabi Huillca\",\n        name: \"D\u00e9jalo Ir\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/D%C3%A9jalo%20ir%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/J0XRYQ9Z\/dejalo-ir.png\"\n      },\n\n      {\n        id: 12,\n        Autor: \"Rabi Huillca\",\n        name: \"Estoy Enfermo de Amor\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/ESTOY%20ENFERMO%20DE%20AMOR%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/jSct12Fw\/estoy-enfermo-de-amor.png\"\n      },\n\n      {\n        id: 13,\n        Autor: \"Rabi Huillca\",\n        name: \"Esa Gente\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/ia800801.us.archive.org\/33\/items\/perdo-n-si-te-falle\/Eesa%20gente%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/QN7s30yP\/esa-gente.png\"\n      },\n\n      {\n        id: 14,\n        Autor: \"Rabi Huillca\",\n        name: \"El Perd\u00f3n\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/ia800801.us.archive.org\/33\/items\/perdo-n-si-te-falle\/El%20perd%C3%B3n%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/MH7hjrkp\/el-perdon.png\"\n      },\n\n      {\n        id: 15,\n        Autor: \"Rabi Huillca\",\n        name: \"El Sueldo No Me Alcanza\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/El%20sueldo%20no%20me%20alcanza%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/Pq0cVkTn\/el-sueldo-no-alcanza.png\"\n      },\n\n      {\n        id: 16,\n        Autor: \"Rabi Huillca\",\n        name: \"Entre T\u00fa y Yo\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Entre%20t%C3%BA%20y%20yo%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/cJtkn5wS\/entre-tu-y-yo.png\"\n      },\n\n      {\n        id: 17,\n        Autor: \"Rabi Huillca\",\n        name: \"Hay Vecina Que Linda Est\u00e1s\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/HAY%20VECINA%2C%20QU%C3%89%20LINDA%20EST%C3%81S%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/wBNFvRYq\/hay-vecina-que-linda-estas.png\"\n      },\n\n      {\n        id: 18,\n        Autor: \"Rabi Huillca\",\n        name: \"Hoy o Nunca\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/ia800801.us.archive.org\/33\/items\/perdo-n-si-te-falle\/Hoy%20o%20nunca%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/mZjjtGJM\/hoy-o-nunca.png\"\n      },\n\n      {\n        id: 19,\n        Autor: \"Rabi Huillca\",\n        name: \"Jefe Necesito un Aumento\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/JEFE%2C%20NECESITO%20UN%20AUMENTO%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/7Ycg2PNF\/jefe-necesito-un-aumento.png\"\n      },\n\n      {\n        id: 20,\n        Autor: \"Rabi Huillca\",\n        name: \"Jugadora\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/ia800801.us.archive.org\/33\/items\/perdo-n-si-te-falle\/Jugadora%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/8cc67xf5\/jugadora.png\"\n      },\n\n      {\n        id: 21,\n        Autor: \"Rabi Huillca\",\n        name: \"La Resaca\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/La%20Resaca%20%28El%20D%C3%ADa%20Despu%C3%A9s%29%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/vZf6xrTv\/la-resaca.png\"\n      },\n\n      {\n        id: 22,\n        Autor: \"Rabi Huillca\",\n        name: \"La Monoton\u00eda del trabajo\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/La%20monoton%C3%ADa%20del%20trabajo%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/q7bmgLnj\/la-monotomia-del-trabajo.png\"\n      },\n\n      {\n        id: 23,\n        Autor: \"Rabi Huillca\",\n        name: \"La t\u00f3xica\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Llego%20la%20toxica%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/SRpcK2ZL\/llego-la-toxica.png\"\n      },\n\n      {\n        id: 24,\n        Autor: \"Rabi Huillca\",\n        name: \"Lo justo pe var\u00f3n\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Lo%20justo%20pe%E2%80%99%20var%C3%B3n%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/QNbF7yV3\/lo-justo-pe-varon.png\"\n      },\n\n      {\n        id: 25,\n        Autor: \"Rabi Huillca\",\n        name: \"Maldita tarjeta de cr\u00e9dito\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Maldita%20tarjeta%20de%20cr%C3%A9dito%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/sDhb8tSd\/maldita-targeta-de-credito.png\"\n      },\n\n      {\n        id: 26,\n        Autor: \"Rabi Huillca\",\n        name: \"Malogrando se aprende\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Malogrando%20se%20aprende%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/g2N9q382\/malogrando-se-aprende.png\"\n      },\n\n      {\n        id: 27,\n        Autor: \"Rabi Huillca\",\n        name: \"Me duele el alma\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Me%20duele%20el%20el%20alma%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/sg06gmpC\/me-duele-el-alma.png\"\n      },\n\n      {\n        id: 28,\n        Autor: \"Rabi Huillca\",\n        name: \"Me mata el estr\u00e9s\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Me%20mata%20el%20estr%C3%A9s%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/9Mc755rh\/me-mata-el-estres.png\"\n      },\n\n      {\n        id: 29,\n        Autor: \"Rabi Huillca\",\n        name: \"Mi ratona\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Mi%20Ratona%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/FHjz9Ctk\/mi-ratona.png\"\n      },\n\n      {\n        id: 30,\n        Autor: \"Rabi Huillca\",\n        name: \"Mi mundo se cae\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Mi%20mundo%20se%20cae%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/662Gk0Qy\/mi-mundo-se-cae.png\"\n      },\n\n      {\n        id: 31,\n        Autor: \"Rabi Huillca\",\n        name: \"No metas tu cuchara donde no debes\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/NO%20METAS%20TU%20CUCHARA%20DONDE%20NO%20DEBES%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/nhHrhYnd\/no-metas-tu-cuchara.png\"\n      },\n\n      {\n        id: 32,\n        Autor: \"Rabi Huillca\",\n        name: \"No renuncies\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/No%20renuncies%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/C5STs7PG\/no-renuncies.png\"\n      },\n\n      {\n        id: 33,\n        Autor: \"Rabi Huillca\",\n        name: \"No s\u00e9 por d\u00f3nde empezar\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/No%20s%C3%A9%20por%20d%C3%B3nde%20empezar%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/3xy6pzrT\/no-se-por-donde-empezar.png\"\n      },\n\n      {\n        id: 34,\n        Autor: \"Rabi Huillca\",\n        name: \"Perd\u00f3n si te fall\u00e9\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/ia600801.us.archive.org\/33\/items\/perdo-n-si-te-falle\/PERD%C3%93N%20SI%20TE%20FALL%C3%89%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/3Jk9bpsv\/perdon-si-te-falle.png\"\n      },\n\n      {\n        id: 35,\n        Autor: \"Rabi Huillca\",\n        name: \"Para qu\u00e9 me acostumbraste\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Para%20qu%C3%A9%20me%20acostumbraste%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/zD6TvQQB\/para-que-me-acostumbraste.png\"\n      },\n\n      {\n        id: 36,\n        Autor: \"Rabi Huillca\",\n        name: \"Qu\u00e9 hablen\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Que%20hablen%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/TYjJK6Dd\/que-hablen-de-mi.png\"\n      },\n\n      {\n        id: 37,\n        Autor: \"Rabi Huillca\",\n        name: \"Qu\u00e9 emoci\u00f3n\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Qu%C3%A9%20emoci%C3%B3n%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/q7W3mb3j\/que-emocion.png\"\n      },\n\n      {\n        id: 38,\n        Autor: \"Rabi Huillca\",\n        name: \"Qu\u00e9 ser\u00e1 de tu vida\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Qu%C3%A9%20ser%C3%A1%20de%20tu%20vida%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/GtK91qHy\/que-sera-de-tu-vida.png\"\n      },\n\n      {\n        id: 39,\n        Autor: \"Rabi Huillca\",\n        name: \"Ser\u00e9 tu esclavo\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Ser%C3%A9%20tu%20esclavo%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/JhjrLPFh\/sere-tu-esclavo.png\"\n      },\n\n      {\n        id: 40,\n        Autor: \"Rabi Huillca\",\n        name: \"Solos\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Solos%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/xC02SYMf\/solo-en-este-mundo.png\"\n      },\n\n      {\n        id: 41,\n        Autor: \"Rabi Huillca\",\n        name: \"Somos barrio\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Somos%20barrio.mp3\",\n        image: \"https:\/\/i.postimg.cc\/dV8pQpJg\/somos-barrio.png\"\n      },\n\n      {\n        id: 42,\n        Autor: \"Rabi Huillca\",\n        name: \"Soy inocente\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Soy%20inocente%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/W49vjCnm\/soy-inocente.png\"\n      },\n\n      {\n        id: 43,\n        Autor: \"Rabi Huillca\",\n        name: \"Tu oferta me suena a estafa\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/TU%20OFERTA%20ME%20SUENA%20A%20ESTAFA%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/HkpRx3jz\/tu-oferta-me-suana-a-estafa.png\"\n      },\n\n      {\n        id: 44,\n        Autor: \"Rabi Huillca\",\n        name: \"Te extra\u00f1o tanto\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Te%20extra%C3%B1o%20tanto.mp3\",\n        image: \"https:\/\/i.postimg.cc\/W4x5M7bv\/te-extrano-tanto.png\"\n      },\n\n      {\n        id: 45,\n        Autor: \"Rabi Huillca\",\n        name: \"Tengo hambre de ti\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/ia600801.us.archive.org\/33\/items\/perdo-n-si-te-falle\/Tengo%20hambre%20de%20ti.mp3\",\n        image: \"https:\/\/i.postimg.cc\/2SMQJSpm\/tengo-hambre-de-ti.png\"\n      },\n\n      {\n        id: 46,\n        Autor: \"Rabi Huillca\",\n        name: \"Tu sonrisa\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Tu%20sonrisa.mp3\",\n        image: \"https:\/\/i.postimg.cc\/02rJs10y\/tu-sonrrisa.png\"\n      },\n\n      {\n        id: 47,\n        Autor: \"Rabi Huillca\",\n        name: \"Ya no te aguanto, vete\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/Ya%20no%20te%20aguanto%2C%20vete.mp3\",\n        image: \"https:\/\/i.postimg.cc\/nzRcRM5N\/ya-no-te-aguanto-vete.png\"\n      },\n\n      {\n        id: 48,\n        Autor: \"Rabi Huillca\",\n        name: \"Baila conmigo\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/baila%20conmigo.mp3\",\n        image: \"https:\/\/i.postimg.cc\/gr9pQhK3\/baila-conmigo.png\"\n      },\n\n      {\n        id: 49,\n        Autor: \"Rabi Huillca\",\n        name: \"El aguafiestas\",\n        category: \"Rabi Huillca\",\n        src: \"https:\/\/dn710606.ca.archive.org\/0\/items\/perdo-n-si-te-falle\/el%20aguafiestas%20%281%29.mp3\",\n        image: \"https:\/\/i.postimg.cc\/85JPYTV9\/aguafiestas.png\"\n      }\n\n    ];\n\n    let currentIndex = 0;\n    let continuousMode = true;\n    let musicListCreated = false;\n    let spinEnabled = true;\n\n    const elements = {\n      sec1: app.querySelector(\"#rabi-sec-1\"),\n      sec2: app.querySelector(\"#rabi-sec-2\"),\n      showList: app.querySelector(\"#rabi-show-list\"),\n      playerWindow: app.querySelector(\"#rabi-players\"),\n      audio: app.querySelector(\"#rabi-audio\"),\n      name: app.querySelector(\"#rabi-track-name\"),\n      category: app.querySelector(\"#rabi-track-category\"),\n      thumbnail: app.querySelector(\"#rabi-thumbnail\"),\n      thumbnailBox: app.querySelector(\"#rabi-thumbnail-box\"),\n      playButton: app.querySelector(\"#rabi-play\"),\n      playIcon: app.querySelector(\"#rabi-play-icon\"),\n      progress: app.querySelector(\"#rabi-progress\"),\n      currentTime: app.querySelector(\"#rabi-current-time\"),\n      totalTime: app.querySelector(\"#rabi-total-time\"),\n      volumeBar: app.querySelector(\"#rabi-volume-bar\"),\n      musicList: app.querySelector(\"#rabi-music-list\"),\n      closePlayer: app.querySelector(\"#rabi-close-player\"),\n      openPlayer: app.querySelector(\"#rabi-open-player\"),\n      darkMode: app.querySelector(\"#rabi-dark-mode\"),\n      volumeDown: app.querySelector(\"#rabi-volume-down\"),\n      volumeUp: app.querySelector(\"#rabi-volume-up\"),\n      previous: app.querySelector(\"#rabi-prev\"),\n      next: app.querySelector(\"#rabi-next\"),\n      spinButton: app.querySelector(\"#rabi-toggle-spin\"),\n      continuousButton: app.querySelector(\"#rabi-toggle-continuous\")\n    };\n\n    function formatTime(seconds) {\n      if (!Number.isFinite(seconds)) {\n        return \"00:00\";\n      }\n\n      const minutes = Math.floor(seconds \/ 60);\n      const remainingSeconds = Math.floor(seconds % 60);\n\n      return (\n        String(minutes).padStart(2, \"0\") +\n        \":\" +\n        String(remainingSeconds).padStart(2, \"0\")\n      );\n    }\n\n    function setPlayerExpanded(expanded) {\n      elements.playerWindow.classList.toggle(\"rabi-expanded\", expanded);\n\n      elements.playerWindow.setAttribute(\n        \"aria-modal\",\n        expanded ? \"true\" : \"false\"\n      );\n\n      elements.playerWindow.setAttribute(\n        \"role\",\n        expanded ? \"dialog\" : \"region\"\n      );\n    }\n\n    function updatePlayer(track) {\n      elements.name.textContent = track.name;\n      elements.category.textContent = track.Autor;\n      elements.thumbnail.src = track.image;\n      elements.thumbnail.alt = \"Portada de \" + track.name;\n    }\n\n    function setActiveTrack(id) {\n      const tracks = elements.musicList.querySelectorAll(\".rabi-music\");\n\n      tracks.forEach(function (item) {\n        const isActive = Number(item.dataset.id) === Number(id);\n\n        item.classList.toggle(\"rabi-active\", isActive);\n        item.setAttribute(\"aria-current\", isActive ? \"true\" : \"false\");\n      });\n    }\n\n    function updateEqualizer(paused) {\n      const equalizers = elements.musicList.querySelectorAll(\n        \".rabi-music.rabi-active .rabi-equalize\"\n      );\n\n      equalizers.forEach(function (equalizer) {\n        equalizer.classList.toggle(\"rabi-paused\", paused);\n      });\n\n      elements.thumbnailBox.classList.toggle(\n        \"rabi-paused\",\n        paused\n      );\n    }\n\n    function playTrack(id) {\n      const trackIndex = musicData.findIndex(function (track) {\n        return Number(track.id) === Number(id);\n      });\n\n      if (trackIndex === -1) {\n        return;\n      }\n\n      currentIndex = trackIndex;\n\n      const track = musicData[currentIndex];\n\n      setActiveTrack(track.id);\n      updatePlayer(track);\n\n      elements.progress.value = 0;\n      elements.currentTime.textContent = \"00:00\";\n      elements.totalTime.textContent = \"00:00\";\n\n      elements.audio.src = track.src;\n      elements.audio.load();\n\n      elements.audio.play().catch(function (error) {\n        elements.playIcon.textContent = \"play_arrow\";\n        updateEqualizer(true);\n\n        console.warn(\n          \"El navegador bloque\u00f3 o no pudo iniciar la reproducci\u00f3n:\",\n          error\n        );\n      });\n    }\n\n    function togglePlay() {\n      if (!elements.audio.getAttribute(\"src\")) {\n        playTrack(musicData[currentIndex].id);\n        return;\n      }\n\n      if (elements.audio.paused) {\n        elements.audio.play().catch(function (error) {\n          console.warn(\"No se pudo iniciar el audio:\", error);\n        });\n      } else {\n        elements.audio.pause();\n      }\n    }\n\n    function nextTrack() {\n      currentIndex = (currentIndex + 1) % musicData.length;\n      playTrack(musicData[currentIndex].id);\n    }\n\n    function previousTrack() {\n      currentIndex =\n        currentIndex === 0\n          ? musicData.length - 1\n          : currentIndex - 1;\n\n      playTrack(musicData[currentIndex].id);\n    }\n\n    function setVolume(value) {\n      const normalizedValue = Math.min(\n        100,\n        Math.max(0, Number(value))\n      );\n\n      elements.audio.volume = normalizedValue \/ 100;\n      elements.volumeBar.value = normalizedValue;\n    }\n\n    function seekAudio(value) {\n      if (!Number.isFinite(elements.audio.duration)) {\n        return;\n      }\n\n      elements.audio.currentTime =\n        (Number(value) \/ 100) * elements.audio.duration;\n    }\n\n    function createMusicList() {\n      if (musicListCreated) {\n        return;\n      }\n\n      elements.musicList.innerHTML = \"\";\n\n      musicData.forEach(function (track) {\n        const item = document.createElement(\"div\");\n\n        item.className = \"rabi-music\";\n        item.dataset.id = track.id;\n        item.setAttribute(\"role\", \"listitem\");\n        item.setAttribute(\"tabindex\", \"0\");\n        item.setAttribute(\n          \"aria-label\",\n          \"Reproducir \" + track.name + \" de \" + track.Autor\n        );\n\n        const thumbnail = document.createElement(\"div\");\n        thumbnail.className = \"rabi-list-thumbnail\";\n\n        const image = document.createElement(\"img\");\n        image.src = track.image;\n        image.alt = \"Portada de \" + track.name;\n        image.loading = \"lazy\";\n\n        thumbnail.appendChild(image);\n\n        const content = document.createElement(\"div\");\n        content.className = \"rabi-list-content\";\n\n        const title = document.createElement(\"h3\");\n        title.textContent = track.name;\n\n        const author = document.createElement(\"small\");\n        author.textContent = track.Autor;\n\n        content.appendChild(title);\n        content.appendChild(author);\n\n        const button = document.createElement(\"button\");\n        button.type = \"button\";\n        button.className = \"rabi-list-btn\";\n        button.setAttribute(\n          \"aria-label\",\n          \"Reproducir \" + track.name\n        );\n\n        const playIcon = document.createElement(\"i\");\n        playIcon.className = \"material-icons\";\n        playIcon.setAttribute(\"aria-hidden\", \"true\");\n        playIcon.textContent = \"play_arrow\";\n\n        const equalizer = document.createElement(\"div\");\n        equalizer.className = \"rabi-equalize\";\n        equalizer.setAttribute(\"aria-hidden\", \"true\");\n\n        equalizer.innerHTML =\n          \"<span><\/span><span><\/span><span><\/span>\";\n\n        button.appendChild(playIcon);\n        button.appendChild(equalizer);\n\n        item.appendChild(thumbnail);\n        item.appendChild(content);\n        item.appendChild(button);\n\n        item.addEventListener(\"click\", function () {\n          playTrack(track.id);\n          setPlayerExpanded(true);\n        });\n\n        item.addEventListener(\"keydown\", function (event) {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            playTrack(track.id);\n            setPlayerExpanded(true);\n          }\n        });\n\n        elements.musicList.appendChild(item);\n      });\n\n      musicListCreated = true;\n    }\n\n    function showMusicList() {\n      elements.sec1.classList.add(\"rabi-hide\");\n      elements.sec2.classList.remove(\"rabi-hide\");\n\n      createMusicList();\n      playTrack(musicData[0].id);\n      setPlayerExpanded(true);\n    }\n\n    elements.showList.addEventListener(\"click\", showMusicList);\n\n    elements.closePlayer.addEventListener(\"click\", function () {\n      setPlayerExpanded(false);\n    });\n\n    elements.openPlayer.addEventListener(\"click\", function () {\n      setPlayerExpanded(true);\n    });\n\n    elements.openPlayer.addEventListener(\"keydown\", function (event) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        setPlayerExpanded(true);\n      }\n    });\n\n    elements.darkMode.addEventListener(\"click\", function () {\n      app.classList.toggle(\"rabi-dark\");\n    });\n\n    elements.playButton.addEventListener(\"click\", togglePlay);\n    elements.next.addEventListener(\"click\", nextTrack);\n    elements.previous.addEventListener(\"click\", previousTrack);\n\n    elements.volumeDown.addEventListener(\"click\", function () {\n      setVolume((elements.audio.volume * 100) - 10);\n    });\n\n    elements.volumeUp.addEventListener(\"click\", function () {\n      setVolume((elements.audio.volume * 100) + 10);\n    });\n\n    elements.volumeBar.addEventListener(\"input\", function () {\n      setVolume(elements.volumeBar.value);\n    });\n\n    elements.progress.addEventListener(\"input\", function () {\n      seekAudio(elements.progress.value);\n    });\n\n    elements.spinButton.addEventListener(\"click\", function () {\n      spinEnabled = !spinEnabled;\n\n      elements.spinButton.classList.toggle(\n        \"rabi-active\",\n        spinEnabled\n      );\n\n      elements.thumbnailBox.classList.toggle(\n        \"rabi-spin\",\n        spinEnabled\n      );\n    });\n\n    elements.continuousButton.addEventListener(\"click\", function () {\n      continuousMode = !continuousMode;\n\n      elements.continuousButton.classList.toggle(\n        \"rabi-active\",\n        continuousMode\n      );\n\n      elements.continuousButton.setAttribute(\n        \"aria-label\",\n        continuousMode\n          ? \"Reproducci\u00f3n continua activada\"\n          : \"Reproducci\u00f3n continua desactivada\"\n      );\n    });\n\n    elements.audio.addEventListener(\"play\", function () {\n      elements.playIcon.textContent = \"pause\";\n      updateEqualizer(false);\n    });\n\n    elements.audio.addEventListener(\"pause\", function () {\n      elements.playIcon.textContent = \"play_arrow\";\n      updateEqualizer(true);\n    });\n\n    elements.audio.addEventListener(\"ended\", function () {\n      if (continuousMode) {\n        nextTrack();\n      } else {\n        elements.audio.currentTime = 0;\n        elements.playIcon.textContent = \"play_arrow\";\n        updateEqualizer(true);\n      }\n    });\n\n    elements.audio.addEventListener(\"loadedmetadata\", function () {\n      elements.totalTime.textContent = formatTime(\n        elements.audio.duration\n      );\n    });\n\n    elements.audio.addEventListener(\"timeupdate\", function () {\n      if (!Number.isFinite(elements.audio.duration)) {\n        return;\n      }\n\n      const progress =\n        (elements.audio.currentTime \/ elements.audio.duration) * 100;\n\n      elements.progress.value = progress;\n      elements.progress.setAttribute(\n        \"aria-valuenow\",\n        String(Math.round(progress))\n      );\n\n      elements.currentTime.textContent = formatTime(\n        elements.audio.currentTime\n      );\n    });\n\n    elements.audio.addEventListener(\"error\", function () {\n      elements.playIcon.textContent = \"play_arrow\";\n      updateEqualizer(true);\n\n      console.warn(\n        \"No se pudo cargar la canci\u00f3n seleccionada:\",\n        elements.audio.currentSrc\n      );\n    });\n\n    setVolume(80);\n    elements.thumbnailBox.classList.add(\"rabi-spin\");\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      iniciarReproductorRabi\n    );\n  } else {\n    iniciarReproductorRabi();\n  }\n})();\n<\/script>\n\n<\/div>\n\u00ab`\n\n\n\n\n\n<style>\n\/* ==========================================\n   REPRODUCTOR HLS GOOGLE CUMBIA\n========================================== *\/\n\n.gcp-tv-player,\n.gcp-tv-player * {\n    box-sizing: border-box;\n}\n\n.gcp-tv-player {\n    --gcp-accent: #ff5a00;\n    --gcp-bg: #090909;\n    --gcp-panel: #171717;\n\n    width: 100%;\n    max-width: 1200px;\n    margin: 24px auto;\n    padding: 18px;\n    overflow: hidden;\n    background:\n        radial-gradient(circle at top, rgba(255, 90, 0, 0.12), transparent 42%),\n        var(--gcp-panel);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 20px;\n    color: #fff;\n    font-family: Arial, sans-serif;\n    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.35);\n}\n\n.gcp-tv-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 15px;\n    margin-bottom: 15px;\n}\n\n.gcp-tv-heading {\n    min-width: 0;\n}\n\n.gcp-tv-heading h2 {\n    margin: 0;\n    color: #fff;\n    font-size: clamp(20px, 3vw, 30px);\n    line-height: 1.2;\n}\n\n.gcp-tv-status {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 7px 0 0;\n    color: #bbb;\n    font-size: 14px;\n}\n\n.gcp-tv-status-dot {\n    width: 9px;\n    height: 9px;\n    flex: 0 0 9px;\n    background: #777;\n    border-radius: 50%;\n}\n\n.gcp-tv-status.is-live .gcp-tv-status-dot {\n    background: #21c45a;\n    box-shadow: 0 0 0 5px rgba(33, 196, 90, 0.14);\n}\n\n.gcp-tv-live-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    flex: 0 0 auto;\n    padding: 8px 12px;\n    background: #d90000;\n    border-radius: 999px;\n    color: #fff;\n    font-size: 12px;\n    font-weight: 800;\n    letter-spacing: 0.7px;\n    text-transform: uppercase;\n}\n\n.gcp-tv-live-badge::before {\n    content: \"\";\n    width: 8px;\n    height: 8px;\n    background: #fff;\n    border-radius: 50%;\n    animation: gcp-live-pulse 1.3s ease-in-out infinite;\n}\n\n.gcp-tv-screen {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: #000;\n    border-radius: 16px;\n    aspect-ratio: 16 \/ 9;\n}\n\n.gcp-tv-video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background: #000;\n    object-fit: contain;\n}\n\n\/* Capa inicial y errores *\/\n.gcp-tv-overlay {\n    position: absolute;\n    inset: 0;\n    z-index: 5;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    background:\n        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.78));\n    text-align: center;\n    transition:\n        opacity 0.25s ease,\n        visibility 0.25s ease;\n}\n\n.gcp-tv-overlay.is-hidden {\n    visibility: hidden;\n    opacity: 0;\n    pointer-events: none;\n}\n\n.gcp-tv-overlay-content {\n    width: min(100%, 520px);\n}\n\n.gcp-tv-overlay-icon {\n    display: block;\n    margin-bottom: 12px;\n    font-size: 48px;\n}\n\n.gcp-tv-overlay-title {\n    margin: 0 0 8px;\n    color: #fff;\n    font-size: clamp(21px, 4vw, 30px);\n}\n\n.gcp-tv-overlay-message {\n    margin: 0 0 18px;\n    color: #d4d4d4;\n    font-size: 15px;\n    line-height: 1.6;\n}\n\n.gcp-tv-start-button,\n.gcp-tv-retry-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 9px;\n    min-height: 48px;\n    padding: 12px 22px;\n    border: 0;\n    border-radius: 999px;\n    background: var(--gcp-accent);\n    color: #fff;\n    font-size: 15px;\n    font-weight: 800;\n    cursor: pointer;\n    transition:\n        transform 0.2s ease,\n        filter 0.2s ease;\n}\n\n.gcp-tv-start-button:hover,\n.gcp-tv-retry-button:hover {\n    transform: translateY(-2px);\n    filter: brightness(1.08);\n}\n\n\/* Cargando *\/\n.gcp-tv-loader {\n    display: none;\n    position: absolute;\n    inset: 0;\n    z-index: 4;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n}\n\n.gcp-tv-loader.is-visible {\n    display: flex;\n}\n\n.gcp-tv-spinner {\n    width: 52px;\n    height: 52px;\n    border: 5px solid rgba(255, 255, 255, 0.2);\n    border-top-color: var(--gcp-accent);\n    border-radius: 50%;\n    animation: gcp-spinner 0.8s linear infinite;\n}\n\n\/* Barra inferior informativa *\/\n.gcp-tv-info {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 14px;\n    margin-top: 14px;\n    padding: 12px 14px;\n    background: rgba(255, 255, 255, 0.04);\n    border-radius: 12px;\n}\n\n.gcp-tv-info-text {\n    min-width: 0;\n}\n\n.gcp-tv-info strong {\n    display: block;\n    margin-bottom: 4px;\n    color: #fff;\n}\n\n.gcp-tv-info small {\n    display: block;\n    overflow: hidden;\n    color: #aaa;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.gcp-tv-actions {\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n}\n\n.gcp-tv-action {\n    min-height: 40px;\n    padding: 9px 13px;\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    border-radius: 10px;\n    background: rgba(255, 255, 255, 0.06);\n    color: #fff;\n    font-weight: 700;\n    cursor: pointer;\n}\n\n.gcp-tv-action:hover {\n    background: rgba(255, 255, 255, 0.12);\n}\n\n@keyframes gcp-spinner {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n@keyframes gcp-live-pulse {\n    0%,\n    100% {\n        opacity: 1;\n    }\n\n    50% {\n        opacity: 0.35;\n    }\n}\n\n@media (max-width: 700px) {\n    .gcp-tv-player {\n        margin: 14px auto;\n        padding: 10px;\n        border-radius: 14px;\n    }\n\n    .gcp-tv-screen {\n        border-radius: 10px;\n    }\n\n    .gcp-tv-header {\n        align-items: flex-start;\n    }\n\n    .gcp-tv-info {\n        align-items: stretch;\n        flex-direction: column;\n    }\n\n    .gcp-tv-actions {\n        width: 100%;\n    }\n\n    .gcp-tv-action {\n        flex: 1;\n    }\n}\n<\/style>\n\n<section class=\"gcp-tv-player\" id=\"gcpTvPlayer\">\n    <div class=\"gcp-tv-header\">\n        <div class=\"gcp-tv-heading\">\n            <h2>Televisi\u00f3n en vivo<\/h2>\n\n            <p class=\"gcp-tv-status\" id=\"gcpTvStatus\">\n                <span class=\"gcp-tv-status-dot\"><\/span>\n                <span id=\"gcpTvStatusText\">Preparando se\u00f1al\u2026<\/span>\n            <\/p>\n        <\/div>\n\n        <span class=\"gcp-tv-live-badge\">En vivo<\/span>\n    <\/div>\n\n    <div class=\"gcp-tv-screen\" id=\"gcpTvScreen\">\n        <video\n            class=\"gcp-tv-video\"\n            id=\"gcpHlsVideo\"\n            controls\n            playsinline\n            preload=\"metadata\"\n            crossorigin=\"anonymous\"\n        ><\/video>\n\n        <div class=\"gcp-tv-loader\" id=\"gcpTvLoader\">\n            <span class=\"gcp-tv-spinner\"><\/span>\n        <\/div>\n\n        <div class=\"gcp-tv-overlay\" id=\"gcpTvOverlay\">\n            <div class=\"gcp-tv-overlay-content\">\n                <span class=\"gcp-tv-overlay-icon\" id=\"gcpTvOverlayIcon\">\u25b6<\/span>\n\n                <h3 class=\"gcp-tv-overlay-title\" id=\"gcpTvOverlayTitle\">\n                    Se\u00f1al de televisi\u00f3n\n                <\/h3>\n\n                <p class=\"gcp-tv-overlay-message\" id=\"gcpTvOverlayMessage\">\n                    Pulsa el bot\u00f3n para iniciar la transmisi\u00f3n en vivo.\n                <\/p>\n\n                <button\n                    type=\"button\"\n                    class=\"gcp-tv-start-button\"\n                    id=\"gcpTvStartButton\"\n                >\n                    \u25b6 Ver transmisi\u00f3n\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"gcp-tv-info\">\n        <div class=\"gcp-tv-info-text\">\n            <strong>Canal en vivo<\/strong>\n            <small id=\"gcpTvTechnicalStatus\">HLS \u00b7 Calidad autom\u00e1tica<\/small>\n        <\/div>\n\n        <div class=\"gcp-tv-actions\">\n            <button\n                type=\"button\"\n                class=\"gcp-tv-action\"\n                id=\"gcpTvReload\"\n            >\n                \u21bb Recargar\n            <\/button>\n\n            <button\n                type=\"button\"\n                class=\"gcp-tv-action\"\n                id=\"gcpTvFullscreen\"\n            >\n                \u26f6 Pantalla completa\n            <\/button>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@1\/dist\/hls.min.js\"><\/script>\n\n<script>\n(function () {\n    \"use strict\";\n\n    const STREAM_URL =\n        \"https:\/\/lbgo.bozztv.com\/ssh101\/ssh101\/plaaytv\/chunks.m3u8?lb_backend_hint=7\";\n\n    const video = document.getElementById(\"gcpHlsVideo\");\n    const playerContainer = document.getElementById(\"gcpTvPlayer\");\n    const screen = document.getElementById(\"gcpTvScreen\");\n    const overlay = document.getElementById(\"gcpTvOverlay\");\n    const overlayIcon = document.getElementById(\"gcpTvOverlayIcon\");\n    const overlayTitle = document.getElementById(\"gcpTvOverlayTitle\");\n    const overlayMessage = document.getElementById(\"gcpTvOverlayMessage\");\n    const startButton = document.getElementById(\"gcpTvStartButton\");\n    const loader = document.getElementById(\"gcpTvLoader\");\n    const status = document.getElementById(\"gcpTvStatus\");\n    const statusText = document.getElementById(\"gcpTvStatusText\");\n    const technicalStatus = document.getElementById(\"gcpTvTechnicalStatus\");\n    const reloadButton = document.getElementById(\"gcpTvReload\");\n    const fullscreenButton = document.getElementById(\"gcpTvFullscreen\");\n\n    let hls = null;\n    let started = false;\n    let recoveryAttempts = 0;\n    const MAX_RECOVERY_ATTEMPTS = 3;\n\n    function setLoading(isLoading) {\n        loader.classList.toggle(\"is-visible\", isLoading);\n    }\n\n    function setStatus(message, isLive) {\n        statusText.textContent = message;\n        status.classList.toggle(\"is-live\", Boolean(isLive));\n    }\n\n    function hideOverlay() {\n        overlay.classList.add(\"is-hidden\");\n    }\n\n    function showOverlay(options) {\n        const config = Object.assign(\n            {\n                icon: \"\u26a0\",\n                title: \"No se pudo reproducir\",\n                message: \"La se\u00f1al no est\u00e1 disponible temporalmente.\",\n                button: \"Reintentar\"\n            },\n            options || {}\n        );\n\n        overlayIcon.textContent = config.icon;\n        overlayTitle.textContent = config.title;\n        overlayMessage.textContent = config.message;\n        startButton.textContent = config.button;\n        startButton.className = \"gcp-tv-retry-button\";\n        overlay.classList.remove(\"is-hidden\");\n    }\n\n    function destroyCurrentStream() {\n        if (hls) {\n            hls.destroy();\n            hls = null;\n        }\n\n        video.pause();\n        video.removeAttribute(\"src\");\n        video.load();\n    }\n\n    function tryPlay() {\n        const playPromise = video.play();\n\n        if (playPromise && typeof playPromise.catch === \"function\") {\n            playPromise.catch(function () {\n                \/*\n                 * El navegador puede bloquear el autoplay.\n                 * El usuario podr\u00e1 iniciar la reproducci\u00f3n con los controles.\n                 *\/\n                setStatus(\"Pulsa reproducir para comenzar\", false);\n                technicalStatus.textContent =\n                    \"La se\u00f1al est\u00e1 lista \u00b7 Autoplay bloqueado\";\n            });\n        }\n    }\n\n    function loadNativeHls() {\n        technicalStatus.textContent = \"HLS nativo \u00b7 Calidad autom\u00e1tica\";\n        video.src = STREAM_URL;\n\n        video.addEventListener(\n            \"loadedmetadata\",\n            function () {\n                setLoading(false);\n                setStatus(\"Se\u00f1al conectada\", true);\n                hideOverlay();\n                tryPlay();\n            },\n            { once: true }\n        );\n\n        video.addEventListener(\n            \"error\",\n            function () {\n                setLoading(false);\n                showOverlay({\n                    title: \"Error de reproducci\u00f3n\",\n                    message:\n                        \"El navegador no pudo abrir la se\u00f1al HLS nativa.\",\n                    button: \"Volver a intentar\"\n                });\n                setStatus(\"Se\u00f1al no disponible\", false);\n            },\n            { once: true }\n        );\n    }\n\n    function loadWithHlsJs() {\n        hls = new Hls({\n            enableWorker: true,\n            lowLatencyMode: true,\n            backBufferLength: 60,\n            maxBufferLength: 30,\n            maxMaxBufferLength: 60\n        });\n\n        technicalStatus.textContent =\n            \"hls.js \u00b7 Detectando calidad autom\u00e1ticamente\";\n\n        hls.loadSource(STREAM_URL);\n        hls.attachMedia(video);\n\n        hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {\n            recoveryAttempts = 0;\n            setLoading(false);\n            setStatus(\"Se\u00f1al conectada\", true);\n            hideOverlay();\n\n            const levels = data && data.levels ? data.levels.length : 0;\n\n            technicalStatus.textContent = levels > 1\n                ? \"HLS \u00b7 \" + levels + \" calidades disponibles\"\n                : \"HLS \u00b7 Calidad autom\u00e1tica\";\n\n            tryPlay();\n        });\n\n        hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {\n            const level = hls.levels[data.level];\n\n            if (level && level.height) {\n                technicalStatus.textContent =\n                    \"HLS \u00b7 \" + level.height + \"p \u00b7 En vivo\";\n            }\n        });\n\n        hls.on(Hls.Events.ERROR, function (event, data) {\n            if (!data.fatal) {\n                return;\n            }\n\n            recoveryAttempts += 1;\n\n            if (recoveryAttempts > MAX_RECOVERY_ATTEMPTS) {\n                setLoading(false);\n                setStatus(\"Se\u00f1al interrumpida\", false);\n\n                showOverlay({\n                    title: \"Transmisi\u00f3n no disponible\",\n                    message:\n                        \"La se\u00f1al no respondi\u00f3 despu\u00e9s de varios intentos. Puede estar fuera de l\u00ednea o bloqueando la reproducci\u00f3n externa.\",\n                    button: \"Reintentar se\u00f1al\"\n                });\n\n                destroyCurrentStream();\n                return;\n            }\n\n            switch (data.type) {\n                case Hls.ErrorTypes.NETWORK_ERROR:\n                    setStatus(\"Reconectando se\u00f1al\u2026\", false);\n                    technicalStatus.textContent =\n                        \"Error de red \u00b7 Intentando reconectar\";\n                    hls.startLoad();\n                    break;\n\n                case Hls.ErrorTypes.MEDIA_ERROR:\n                    setStatus(\"Recuperando video\u2026\", false);\n                    technicalStatus.textContent =\n                        \"Error multimedia \u00b7 Recuperando\";\n                    hls.recoverMediaError();\n                    break;\n\n                default:\n                    destroyCurrentStream();\n                    startStream();\n                    break;\n            }\n        });\n    }\n\n    function startStream() {\n        destroyCurrentStream();\n\n        started = true;\n        recoveryAttempts = 0;\n\n        setLoading(true);\n        setStatus(\"Conectando con la se\u00f1al\u2026\", false);\n        technicalStatus.textContent = \"Cargando transmisi\u00f3n HLS\u2026\";\n\n        \/*\n         * Safari y algunos dispositivos Apple reproducen HLS\n         * directamente mediante la etiqueta video.\n         *\/\n        if (video.canPlayType(\"application\/vnd.apple.mpegurl\")) {\n            loadNativeHls();\n            return;\n        }\n\n        \/*\n         * Chrome, Edge, Firefox y muchos dispositivos Android\n         * utilizan hls.js mediante Media Source Extensions.\n         *\/\n        if (window.Hls && Hls.isSupported()) {\n            loadWithHlsJs();\n            return;\n        }\n\n        setLoading(false);\n        setStatus(\"Navegador incompatible\", false);\n\n        showOverlay({\n            icon: \"!\",\n            title: \"Navegador no compatible\",\n            message:\n                \"Este navegador no permite reproducir transmisiones HLS.\",\n            button: \"Intentar nuevamente\"\n        });\n    }\n\n    startButton.addEventListener(\"click\", function () {\n        startStream();\n    });\n\n    reloadButton.addEventListener(\"click\", function () {\n        startStream();\n    });\n\n    fullscreenButton.addEventListener(\"click\", function () {\n        if (document.fullscreenElement) {\n            document.exitFullscreen();\n            return;\n        }\n\n        if (screen.requestFullscreen) {\n            screen.requestFullscreen();\n        } else if (video.webkitEnterFullscreen) {\n            video.webkitEnterFullscreen();\n        }\n    });\n\n    video.addEventListener(\"waiting\", function () {\n        if (started) {\n            setLoading(true);\n            setStatus(\"Almacenando se\u00f1al\u2026\", false);\n        }\n    });\n\n    video.addEventListener(\"playing\", function () {\n        setLoading(false);\n        setStatus(\"Transmitiendo en vivo\", true);\n        hideOverlay();\n    });\n\n    video.addEventListener(\"pause\", function () {\n        if (!video.ended && video.currentTime > 0) {\n            setStatus(\"Transmisi\u00f3n pausada\", false);\n        }\n    });\n\n    video.addEventListener(\"ended\", function () {\n        setStatus(\"La transmisi\u00f3n termin\u00f3\", false);\n    });\n\n    window.addEventListener(\"beforeunload\", function () {\n        destroyCurrentStream();\n    });\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod. \u00ab`html Primicias2026 Rabi Huillca &#8211; Creador de M\u00fasica \u25b6\ufe0f Escuchar Lista\u2026<\/p>\n","protected":false},"author":1,"featured_media":31,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[30,29,31],"class_list":["post-10","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-entretenimiento","tag-30","tag-mis-canciones","tag-rabi-huillca"],"_links":{"self":[{"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=\/wp\/v2\/posts\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":2,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=\/wp\/v2\/posts\/10\/revisions"}],"predecessor-version":[{"id":1138,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=\/wp\/v2\/posts\/10\/revisions\/1138"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=\/wp\/v2\/media\/31"}],"wp:attachment":[{"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}