{"id":7,"date":"2026-05-05T13:42:57","date_gmt":"2026-05-05T13:42:57","guid":{"rendered":"https:\/\/googlecumbia.metricavisual.com\/2026\/05\/05\/blog-1\/"},"modified":"2026-06-21T01:03:44","modified_gmt":"2026-06-21T01:03:44","slug":"tienda","status":"publish","type":"post","link":"https:\/\/googlecumbia.metricavisual.com\/?p=7","title":{"rendered":"tienda rabi"},"content":{"rendered":"\n\u00ab`html\n<!-- =====================================================\n     TIENDA DIGITAL COMPATIBLE CON WORDPRESS\n     Pegar en un bloque \"HTML personalizado\"\n===================================================== -->\n\n<section\n  id=\"rabi-digital-store\"\n  class=\"rabi-digital-store\"\n  aria-label=\"Tienda Digital\"\n>\n\n  <style>\n    \/* ==================================================\n       CONTENEDOR AISLADO PARA WORDPRESS\n    ================================================== *\/\n\n    #rabi-digital-store {\n      --rds-bg: #f4f4f4;\n      --rds-card: #ffffff;\n      --rds-text: #111111;\n      --rds-muted: #5f6368;\n      --rds-header: #333333;\n      --rds-primary: #4caf50;\n      --rds-whatsapp: #25d366;\n      --rds-yape: #7a1fa2;\n      --rds-paypal: #0070ba;\n      --rds-border: rgba(0, 0, 0, 0.08);\n\n      position: relative;\n      display: block;\n      width: 100%;\n      min-height: 100vh;\n      margin: 0;\n      padding: 0;\n      overflow-x: hidden;\n      background: var(--rds-bg);\n      color: var(--rds-text);\n      font-family: \"Segoe UI\", Arial, sans-serif;\n      font-size: 16px;\n      line-height: 1.5;\n      transition:\n        background-color 0.25s ease,\n        color 0.25s ease;\n    }\n\n    #rabi-digital-store.rds-dark {\n      --rds-bg: #111111;\n      --rds-card: #1e1e1e;\n      --rds-text: #ffffff;\n      --rds-muted: #c7c7c7;\n      --rds-header: #181818;\n      --rds-border: rgba(255, 255, 255, 0.1);\n    }\n\n    #rabi-digital-store *,\n    #rabi-digital-store *::before,\n    #rabi-digital-store *::after {\n      box-sizing: border-box;\n    }\n\n    #rabi-digital-store img {\n      display: block;\n      max-width: 100%;\n    }\n\n    #rabi-digital-store button {\n      font: inherit;\n    }\n\n    #rabi-digital-store button:focus-visible,\n    #rabi-digital-store [tabindex]:focus-visible {\n      outline: 3px solid rgba(76, 175, 80, 0.45);\n      outline-offset: 3px;\n    }\n\n    \/* ==================================================\n       CABECERA\n    ================================================== *\/\n\n    #rabi-digital-store .rds-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 20px;\n      width: 100%;\n      min-height: 66px;\n      padding: 15px 25px;\n      background: var(--rds-header);\n      color: #ffffff;\n      box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2);\n    }\n\n    #rabi-digital-store .rds-brand {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      min-width: 0;\n      font-size: 21px;\n      font-weight: 700;\n      line-height: 1.2;\n    }\n\n    #rabi-digital-store .rds-mode-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 42px;\n      height: 42px;\n      flex: 0 0 42px;\n      padding: 0;\n      border: 0;\n      border-radius: 50%;\n      background: rgba(255, 255, 255, 0.12);\n      color: #ffffff;\n      font-size: 21px;\n      line-height: 1;\n      cursor: pointer;\n      transition:\n        background-color 0.2s ease,\n        transform 0.2s ease;\n    }\n\n    #rabi-digital-store .rds-mode-button:hover {\n      background: rgba(255, 255, 255, 0.22);\n      transform: scale(1.06);\n    }\n\n    \/* ==================================================\n       CUADR\u00cdCULA DE PRODUCTOS\n    ================================================== *\/\n\n    #rabi-digital-store .rds-store {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n      gap: 20px;\n      width: 90%;\n      max-width: 1200px;\n      margin: 25px auto;\n    }\n\n    \/* ==================================================\n       PRODUCTO\n    ================================================== *\/\n\n    #rabi-digital-store .rds-product {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n      overflow: hidden;\n      padding: 15px;\n      border: 1px solid var(--rds-border);\n      border-radius: 14px;\n      background: var(--rds-card);\n      color: var(--rds-text);\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n      transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease,\n        border-color 0.25s ease,\n        background-color 0.25s ease;\n    }\n\n    #rabi-digital-store .rds-product:hover {\n      border-color: rgba(76, 175, 80, 0.45);\n      box-shadow: 0 17px 35px rgba(0, 0, 0, 0.16);\n      transform: translateY(-5px);\n    }\n\n    #rabi-digital-store .rds-product-image {\n      width: 100%;\n      height: 180px;\n      margin: 0;\n      overflow: hidden;\n      border-radius: 10px;\n      background: #f0f0f0;\n    }\n\n    #rabi-digital-store.rds-dark .rds-product-image {\n      background: #292929;\n    }\n\n    #rabi-digital-store .rds-product-image img {\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      border: 0;\n      object-fit: contain;\n      transition: transform 0.3s ease;\n    }\n\n    #rabi-digital-store .rds-product:hover .rds-product-image img {\n      transform: scale(1.04);\n    }\n\n    #rabi-digital-store .rds-product h3 {\n      margin: 12px 0 6px;\n      padding: 0;\n      color: var(--rds-text);\n      font-family: \"Segoe UI\", Arial, sans-serif;\n      font-size: 19px;\n      font-weight: 700;\n      line-height: 1.3;\n    }\n\n    #rabi-digital-store .rds-product-description {\n      flex-grow: 1;\n      margin: 0 0 14px;\n      padding: 0;\n      color: var(--rds-muted);\n      font-size: 14px;\n      line-height: 1.55;\n    }\n\n    #rabi-digital-store .rds-price {\n      margin: 0 0 12px;\n      color: var(--rds-primary);\n      font-size: 20px;\n      font-weight: 700;\n      line-height: 1.2;\n    }\n\n    \/* ==================================================\n       BOTONES\n    ================================================== *\/\n\n    #rabi-digital-store .rds-buttons {\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 8px;\n      width: 100%;\n    }\n\n    #rabi-digital-store .rds-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      min-height: 43px;\n      margin: 0;\n      padding: 10px 14px;\n      border: 0;\n      border-radius: 8px;\n      color: #ffffff;\n      font-size: 14px;\n      font-weight: 700;\n      line-height: 1.2;\n      text-align: center;\n      cursor: pointer;\n      box-shadow: none;\n      transition:\n        filter 0.2s ease,\n        transform 0.2s ease,\n        box-shadow 0.2s ease;\n    }\n\n    #rabi-digital-store .rds-button:hover {\n      color: #ffffff;\n      filter: brightness(0.92);\n      transform: translateY(-2px);\n    }\n\n    #rabi-digital-store .rds-btn-wa {\n      background: var(--rds-whatsapp);\n      box-shadow: 0 7px 18px rgba(37, 211, 102, 0.2);\n    }\n\n    #rabi-digital-store .rds-btn-yape {\n      background: var(--rds-yape);\n      box-shadow: 0 7px 18px rgba(122, 31, 162, 0.2);\n    }\n\n    #rabi-digital-store .rds-btn-paypal {\n      background: var(--rds-paypal);\n      box-shadow: 0 7px 18px rgba(0, 112, 186, 0.2);\n    }\n\n    \/* ==================================================\n       PIE DE P\u00c1GINA\n    ================================================== *\/\n\n    #rabi-digital-store .rds-footer {\n      width: 100%;\n      margin-top: 30px;\n      padding: 18px 15px;\n      background: var(--rds-header);\n      color: #ffffff;\n      font-size: 14px;\n      line-height: 1.6;\n      text-align: center;\n    }\n\n    \/* ==================================================\n       MODAL DE YAPE\n    ================================================== *\/\n\n    #rabi-digital-store .rds-modal {\n      position: fixed;\n      z-index: 2147483000;\n      inset: 0;\n      display: none;\n      align-items: center;\n      justify-content: center;\n      padding: 20px;\n      background: rgba(0, 0, 0, 0.72);\n      backdrop-filter: blur(4px);\n    }\n\n    #rabi-digital-store .rds-modal.rds-active {\n      display: flex;\n    }\n\n    #rabi-digital-store .rds-modal-box {\n      position: relative;\n      width: 90%;\n      max-width: 340px;\n      max-height: calc(100vh - 40px);\n      overflow-y: auto;\n      padding: 22px;\n      border: 1px solid var(--rds-border);\n      border-radius: 16px;\n      background: var(--rds-card);\n      color: var(--rds-text);\n      text-align: center;\n      box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);\n      animation: rdsModalIn 0.25s ease;\n    }\n\n    @keyframes rdsModalIn {\n      from {\n        opacity: 0;\n        transform: translateY(20px) scale(0.97);\n      }\n\n      to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n    }\n\n    #rabi-digital-store .rds-modal-box h3 {\n      margin: 0 0 15px;\n      padding: 0;\n      color: var(--rds-text);\n      font-family: \"Segoe UI\", Arial, sans-serif;\n      font-size: 21px;\n      line-height: 1.3;\n    }\n\n    #rabi-digital-store .rds-modal-box img {\n      width: 100%;\n      height: auto;\n      margin: 0 auto 15px;\n      border: 0;\n      border-radius: 10px;\n    }\n\n    #rabi-digital-store .rds-modal-box p {\n      margin: 8px 0;\n      padding: 0;\n      color: var(--rds-text);\n      font-size: 14px;\n      line-height: 1.5;\n    }\n\n    #rabi-digital-store .rds-modal-total {\n      color: var(--rds-primary);\n      font-size: 18px;\n    }\n\n    #rabi-digital-store .rds-close {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      min-height: 43px;\n      margin-top: 12px;\n      padding: 10px 15px;\n      border: 0;\n      border-radius: 8px;\n      background: #333333;\n      color: #ffffff;\n      font-size: 14px;\n      font-weight: 700;\n      cursor: pointer;\n      transition:\n        background-color 0.2s ease,\n        transform 0.2s ease;\n    }\n\n    #rabi-digital-store .rds-close:hover {\n      background: #111111;\n      color: #ffffff;\n      transform: translateY(-2px);\n    }\n\n    \/* ==================================================\n       RESPONSIVE\n    ================================================== *\/\n\n    @media (max-width: 700px) {\n      #rabi-digital-store .rds-header {\n        padding: 14px 18px;\n      }\n\n      #rabi-digital-store .rds-store {\n        width: calc(100% - 24px);\n        margin: 18px auto;\n        gap: 15px;\n      }\n    }\n\n    @media (max-width: 400px) {\n      #rabi-digital-store .rds-brand {\n        font-size: 18px;\n      }\n\n      #rabi-digital-store .rds-store {\n        grid-template-columns: 1fr;\n      }\n\n      #rabi-digital-store .rds-product {\n        padding: 12px;\n      }\n\n      #rabi-digital-store .rds-product-image {\n        height: 165px;\n      }\n\n      #rabi-digital-store .rds-modal {\n        padding: 10px;\n      }\n    }\n  <\/style>\n\n  <!-- CABECERA -->\n  <header class=\"rds-header\">\n    <div class=\"rds-brand\">\n      <span aria-hidden=\"true\">\ud83d\uded2<\/span>\n      <span>Tienda Digital<\/span>\n    <\/div>\n\n    <button\n      type=\"button\"\n      id=\"rds-mode-button\"\n      class=\"rds-mode-button\"\n      aria-label=\"Activar modo oscuro\"\n      title=\"Cambiar modo de visualizaci\u00f3n\"\n    >\n      <span id=\"rds-mode-icon\" aria-hidden=\"true\">\ud83c\udf19<\/span>\n    <\/button>\n  <\/header>\n\n  <!-- PRODUCTOS -->\n  <div\n    class=\"rds-store\"\n    id=\"rds-store-products\"\n    aria-label=\"Productos y servicios\"\n  ><\/div>\n\n  <!-- PIE DE P\u00c1GINA -->\n  <footer class=\"rds-footer\">\n    \u00a9 2024 Rabi Querub\u00edn Huillca Tapia \u2013 Per\u00fa<br>\n    Pagos v\u00eda Yape y PayPal\n  <\/footer>\n\n  <!-- MODAL YAPE -->\n  <div\n    class=\"rds-modal\"\n    id=\"rds-yape-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"rds-yape-title\"\n    aria-hidden=\"true\"\n  >\n    <div class=\"rds-modal-box\">\n\n      <h3 id=\"rds-yape-title\">Escanea con Yape<\/h3>\n\n      <img decoding=\"async\"\n        src=\"https:\/\/i.postimg.cc\/VkktkgHL\/yape-rabi.jpg\"\n        alt=\"C\u00f3digo QR de Yape de Rabi Querub\u00edn Huillca Tapia\"\n        loading=\"lazy\"\n      >\n\n      <p>\n        <strong id=\"rds-yape-product\"><\/strong>\n      <\/p>\n\n      <p class=\"rds-modal-total\">\n        Total:\n        <strong>\n          S\/ <span id=\"rds-yape-total\"><\/span>\n        <\/strong>\n      <\/p>\n\n      <p>\n        978 424 241<br>\n        Rabi Querub\u00edn Huillca Tapia\n      <\/p>\n\n      <button\n        type=\"button\"\n        class=\"rds-close\"\n        id=\"rds-close-yape\"\n      >\n        Cerrar\n      <\/button>\n\n    <\/div>\n  <\/div>\n\n  <script>\n    (function () {\n      \"use strict\";\n\n      function iniciarTiendaDigital() {\n        const app = document.getElementById(\"rabi-digital-store\");\n\n        if (!app || app.dataset.initialized === \"true\") {\n          return;\n        }\n\n        app.dataset.initialized = \"true\";\n\n        \/* ==================================================\n           CONFIGURACI\u00d3N ORIGINAL\n        ================================================== *\/\n\n        const PAYPAL_URL = \"https:\/\/www.paypal.me\/TUUSUARIO\";\n        const WA_NUMBER = \"51978424241\";\n        const OWNER = \"Rabi Querub\u00edn Huillca Tapia\";\n\n        \/* ==================================================\n           PRODUCTOS ORIGINALES\n        ================================================== *\/\n\n        const products = [\n          {\n            id: 1,\n            name: \"Servicio de mantenimiento y reparaciones\",\n            desc: \"Soporte t\u00e9cnico, mantenimiento preventivo y correctivo.\",\n            price: 99.99,\n            img: \"https:\/\/i.postimg.cc\/mrjJRfmN\/SERVIMUL.png\"\n          },\n          {\n            id: 2,\n            name: \"Publicidad en radio y TV\",\n            desc: \"Promoci\u00f3n profesional para tu marca o negocio.\",\n            price: 50.00,\n            img: \"https:\/\/i.postimg.cc\/qMDP6Trm\/TV-BANDERA.png\"\n          },\n          {\n            id: 3,\n            name: \"Publicidad para aplicaciones\",\n            desc: \"Dise\u00f1o y difusi\u00f3n de anuncios para apps.\",\n            price: 50.00,\n            img: \"https:\/\/i.postimg.cc\/HLTxY3g3\/PARA-APLICASION-MEDIANO.png\"\n          },\n          {\n            id: 4,\n            name: \"Locutores profesionales\",\n            desc: \"Voces comerciales para radio, TV y redes.\",\n            price: 50.00,\n            img: \"https:\/\/i.postimg.cc\/26qR5twt\/LOCUTORES_RADIO.png\"\n          },\n          {\n            id: 5,\n            name: \"Grupo digital\",\n            desc: \"Servicios digitales integrales.\",\n            price: 46.99,\n            img: \"https:\/\/i.postimg.cc\/Px0KvLTZ\/quienes-somos.png\"\n          }\n        ];\n\n        const elements = {\n          store: app.querySelector(\"#rds-store-products\"),\n          modeButton: app.querySelector(\"#rds-mode-button\"),\n          modeIcon: app.querySelector(\"#rds-mode-icon\"),\n          modal: app.querySelector(\"#rds-yape-modal\"),\n          modalBox: app.querySelector(\".rds-modal-box\"),\n          yapeProduct: app.querySelector(\"#rds-yape-product\"),\n          yapeTotal: app.querySelector(\"#rds-yape-total\"),\n          closeYape: app.querySelector(\"#rds-close-yape\")\n        };\n\n        let lastFocusedElement = null;\n\n        function abrirEnNuevaVentana(url) {\n          const newWindow = window.open(\n            url,\n            \"_blank\",\n            \"noopener,noreferrer\"\n          );\n\n          if (newWindow) {\n            newWindow.opener = null;\n          }\n        }\n\n        function pagarWA(name, price) {\n          const message =\n            \"\ud83d\uded2 COMPRA\\n\" +\n            \"Producto: \" + name + \"\\n\" +\n            \"Precio: S\/ \" + price.toFixed(2) + \"\\n\\n\" +\n            \"Yape: 978424241\\n\" +\n            OWNER;\n\n          const whatsappUrl =\n            \"https:\/\/wa.me\/\" +\n            WA_NUMBER +\n            \"?text=\" +\n            encodeURIComponent(message);\n\n          abrirEnNuevaVentana(whatsappUrl);\n        }\n\n        function pagarPayPal(price) {\n          const paypalUrl =\n            PAYPAL_URL.replace(\/\\\/+$\/, \"https:\/\/www.paypal.me\/RabiHuillca\") +\n            \"\/\" +\n            price.toFixed(2);\n\n          abrirEnNuevaVentana(paypalUrl);\n        }\n\n        function openYape(name, price) {\n          lastFocusedElement = document.activeElement;\n\n          elements.yapeProduct.textContent = name;\n          elements.yapeTotal.textContent = price.toFixed(2);\n\n          elements.modal.classList.add(\"rds-active\");\n          elements.modal.setAttribute(\"aria-hidden\", \"false\");\n\n          document.documentElement.style.overflow = \"hidden\";\n\n          window.setTimeout(function () {\n            elements.closeYape.focus();\n          }, 50);\n        }\n\n        function closeYape() {\n          elements.modal.classList.remove(\"rds-active\");\n          elements.modal.setAttribute(\"aria-hidden\", \"true\");\n\n          document.documentElement.style.overflow = \"\";\n\n          if (\n            lastFocusedElement &&\n            typeof lastFocusedElement.focus === \"function\"\n          ) {\n            lastFocusedElement.focus();\n          }\n        }\n\n        function toggleDarkMode() {\n          const darkEnabled =\n            app.classList.toggle(\"rds-dark\");\n\n          elements.modeIcon.textContent =\n            darkEnabled ? \"\u2600\ufe0f\" : \"\ud83c\udf19\";\n\n          elements.modeButton.setAttribute(\n            \"aria-label\",\n            darkEnabled\n              ? \"Activar modo claro\"\n              : \"Activar modo oscuro\"\n          );\n        }\n\n        function createProductCard(product) {\n          const article = document.createElement(\"article\");\n          article.className = \"rds-product\";\n\n          const imageWrapper = document.createElement(\"div\");\n          imageWrapper.className = \"rds-product-image\";\n\n          const image = document.createElement(\"img\");\n          image.src = product.img;\n          image.alt = product.name;\n          image.loading = \"lazy\";\n\n          const title = document.createElement(\"h3\");\n          title.textContent = product.name;\n\n          const description = document.createElement(\"p\");\n          description.className = \"rds-product-description\";\n          description.textContent = product.desc;\n\n          const price = document.createElement(\"div\");\n          price.className = \"rds-price\";\n          price.textContent = \"S\/ \" + product.price.toFixed(2);\n\n          const buttons = document.createElement(\"div\");\n          buttons.className = \"rds-buttons\";\n\n          const whatsappButton = document.createElement(\"button\");\n          whatsappButton.type = \"button\";\n          whatsappButton.className =\n            \"rds-button rds-btn-wa\";\n          whatsappButton.textContent = \"WhatsApp\";\n          whatsappButton.setAttribute(\n            \"aria-label\",\n            \"Comprar \" + product.name + \" por WhatsApp\"\n          );\n\n          const yapeButton = document.createElement(\"button\");\n          yapeButton.type = \"button\";\n          yapeButton.className =\n            \"rds-button rds-btn-yape\";\n          yapeButton.textContent = \"Yape\";\n          yapeButton.setAttribute(\n            \"aria-label\",\n            \"Pagar \" + product.name + \" con Yape\"\n          );\n\n          const paypalButton = document.createElement(\"button\");\n          paypalButton.type = \"button\";\n          paypalButton.className =\n            \"rds-button rds-btn-paypal\";\n          paypalButton.textContent = \"PayPal\";\n          paypalButton.setAttribute(\n            \"aria-label\",\n            \"Pagar \" + product.name + \" con PayPal\"\n          );\n\n          whatsappButton.addEventListener(\n            \"click\",\n            function () {\n              pagarWA(product.name, product.price);\n            }\n          );\n\n          yapeButton.addEventListener(\n            \"click\",\n            function () {\n              openYape(product.name, product.price);\n            }\n          );\n\n          paypalButton.addEventListener(\n            \"click\",\n            function () {\n              pagarPayPal(product.price);\n            }\n          );\n\n          imageWrapper.appendChild(image);\n\n          buttons.appendChild(whatsappButton);\n          buttons.appendChild(yapeButton);\n          buttons.appendChild(paypalButton);\n\n          article.appendChild(imageWrapper);\n          article.appendChild(title);\n          article.appendChild(description);\n          article.appendChild(price);\n          article.appendChild(buttons);\n\n          return article;\n        }\n\n        function renderProducts() {\n          const fragment = document.createDocumentFragment();\n\n          products.forEach(function (product) {\n            fragment.appendChild(\n              createProductCard(product)\n            );\n          });\n\n          elements.store.appendChild(fragment);\n        }\n\n        elements.modeButton.addEventListener(\n          \"click\",\n          toggleDarkMode\n        );\n\n        elements.closeYape.addEventListener(\n          \"click\",\n          closeYape\n        );\n\n        elements.modal.addEventListener(\n          \"click\",\n          function (event) {\n            if (event.target === elements.modal) {\n              closeYape();\n            }\n          }\n        );\n\n        document.addEventListener(\n          \"keydown\",\n          function (event) {\n            if (\n              event.key === \"Escape\" &&\n              elements.modal.classList.contains(\"rds-active\")\n            ) {\n              closeYape();\n            }\n          }\n        );\n\n        renderProducts();\n      }\n\n      if (document.readyState === \"loading\") {\n        document.addEventListener(\n          \"DOMContentLoaded\",\n          iniciarTiendaDigital\n        );\n      } else {\n        iniciarTiendaDigital();\n      }\n    })();\n  <\/script>\n\n<\/section>\n\u00ab`\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\/camotetv\/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","protected":false},"excerpt":{"rendered":"<p>\u00ab`html \ud83d\uded2 Tienda Digital \ud83c\udf19 \u00a9 2024 Rabi Querub\u00edn Huillca Tapia \u2013 Per\u00fa Pagos v\u00eda Yape y PayPal Escanea con Yape Total:\u2026<\/p>\n","protected":false},"author":1,"featured_media":860,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[36],"class_list":["post-7","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-entretenimiento","tag-tienda"],"_links":{"self":[{"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=\/wp\/v2\/posts\/7","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=7"}],"version-history":[{"count":6,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":1143,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions\/1143"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=\/wp\/v2\/media\/860"}],"wp:attachment":[{"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/googlecumbia.metricavisual.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}