{"id":14,"date":"2026-06-26T20:23:40","date_gmt":"2026-06-26T20:23:40","guid":{"rendered":"https:\/\/rekkords.com\/?page_id=14"},"modified":"2026-07-11T22:09:30","modified_gmt":"2026-07-11T22:09:30","slug":"demov1","status":"publish","type":"page","link":"https:\/\/rekkords.com\/","title":{"rendered":"demoV1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14\" class=\"elementor elementor-14\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6530ca7 e-con e-atomic-element e-flexbox-base e-4ad51dd \" data-id=\"6530ca7\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6530ca7\">\n    \t\t<div class=\"elementor-element elementor-element-c3c1f3d elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"c3c1f3d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  :root {\n    --bg: #000000;\n    --surface2: #242528;\n    --card-bg: #2C2C2C;\n    --border: rgba(255,255,255,0.10);\n    --border2: rgba(255,255,255,0.06);\n    --blue: #0A84FF;\n    --red: #FF3B30;\n    --text: #F5F5F7;\n    --text2: #B8B8BE;\n    --text3: #BBBBBB;\n    --lavender: #DFB1FF;\n    --green: #9DFF96;\n    --yellow: #FFFB00;\n    --star-on: #FFEA00;\n\n    \/* \u2500\u2500 V7 UI BUTTON TOKENS \u2500\u2500 *\/\n    --btn-fill-default: #181F2A;\n    --btn-stroke-default: rgba(255,255,255,0); \/* TEMP: apagado a 0% opacidad (era 0.2) \u2014 subir el alpha para reactivar *\/\n    --btn-fill-hover: #1C293D;\n    --btn-stroke-hover: rgba(255,255,255,0); \/* TEMP: apagado a 0% opacidad (era 0.5) \u2014 subir el alpha para reactivar *\/\n    --btn-fill-selected: #3C5C8F;\n    --btn-stroke-selected: rgba(169,188,239,0); \/* TEMP: apagado a 0% opacidad (era #A9BCEF s\u00f3lido) \u2014 subir el alpha para reactivar *\/\n    --btn-text-default: #DADAF1;\n    --btn-text-hover: #FFFFFF;\n  }\n\n  * { box-sizing: border-box; }\n\n  .mc-wrap {\n    background: #0B1013;\n    border: none;\n    border-radius: 2px;\n    padding: 16px 16px 40px;\n    gap: 4px;\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    max-width: 1060px;\n    margin: 16px auto 0;\n    box-shadow: 0px 8px 32px rgba(0,0,0,0.5);\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    -webkit-tap-highlight-color: transparent; \/* TEMP: apaga el resaltado t\u00e1ctil morado\/gris en mobile *\/\n  }\n\n  \/* Apaga el outline nativo del navegador \u2014 lo reemplazamos por el flash animado .mc-tap-flash (ver abajo + JS) *\/\n  .mc-wrap button:focus,\n  .mc-wrap a:focus,\n  .mc-wrap input:focus,\n  .mc-wrap *:focus {\n    outline: none;\n  }\n\n  \/* \u2500\u2500 TAP FLASH \u2014 contorno #49A7FF al 80% que se desvanece en 3s al tocar\/clickear un bot\u00f3n \u2500\u2500 *\/\n  .mc-wrap button, .mc-wrap a {\n    box-shadow: 0 0 0 1px rgba(73,167,255,0);\n    transition: box-shadow 3s ease;\n  }\n  .mc-wrap button.mc-tap-flash, .mc-wrap a.mc-tap-flash {\n    box-shadow: 0 0 0 1px rgba(73,167,255,0.8);\n    transition: none;\n  }\n\n  \/* \u2500\u2500 INFO BAR (below video) \u2500\u2500 *\/\n  .mc-info-bar {\n    display: flex; flex-direction: row;\n    align-items: center; justify-content: space-between;\n    gap: 24px; width: 100%;\n    padding: 6px 8px;\n  }\n  .mc-info-left { display: flex; flex-direction: row; align-items: center; gap: 16px; flex-shrink: 0; min-width: 0; }\n\n  .mc-avatar {\n    width: 64px; height: 64px; border-radius: 6px; flex-shrink: 0;\n    object-fit: cover; display: block;\n  }\n\n  .mc-title-group {\n    display: grid;\n    grid-template-columns: auto auto;\n    grid-template-areas: \"title title\" \"dj loc\";\n    column-gap: 8px; row-gap: 6px;\n    align-items: center; min-width: 0;\n  }\n\n  .mc-set-title {\n    grid-area: title;\n    font-family: 'Inter', sans-serif;\n    font-size: 20px; font-weight: 400; line-height: 130%;\n    white-space: nowrap; text-transform: uppercase;\n    color: #94EFD4;\n  }\n  .mc-set-title.sweep {\n    animation: metalSweep 1.8s ease-in-out forwards;\n  }\n  @keyframes metalSweep {\n    0%   { color: #94EFD4; }\n    30%  { color: #ffffff; }\n    70%  { color: #afffea; }\n    100% { color: #94EFD4; }\n  }\n  .mc-dj-name {\n    grid-area: dj;\n    font-family: 'Inter', sans-serif;\n    font-size: 14px; font-weight: 600; color: #F5F9FD;\n    text-transform: uppercase; white-space: nowrap; line-height: 100%;\n  }\n  .mc-location {\n    grid-area: loc;\n    font-family: 'Inter', sans-serif;\n    font-size: 10px; color: #A9BCEF; text-transform: uppercase; white-space: nowrap; line-height: 100%;\n  }\n\n  \/* Stats row: seguidores \/ vistas (venue oculto por ahora, ver .mc-info-venue) *\/\n  .mc-info-stats {\n    display: flex; flex-direction: row; align-items: center; gap: 21px; flex-shrink: 0; height: 32px;\n  }\n  .mc-info-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; }\n  .mc-info-stat-top { display: flex; align-items: center; gap: 4px; }\n  .mc-info-stat-num { font-size: 14px; font-weight: 700; color: #fff; font-family: 'Inter', sans-serif; line-height: 100%; white-space: nowrap; }\n  .mc-info-stat-label { font-size: 10px; color: #fff; text-transform: uppercase; font-family: 'Inter', sans-serif; line-height: 100%; white-space: nowrap; }\n  .mc-info-divider { width: 0; height: 32px; align-self: stretch; border-left: 0.5px solid rgba(97,140,255,0.4); flex-shrink: 0; }\n  .mc-info-stats .mc-info-divider:last-of-type { display: none; } \/* el venue est\u00e1 oculto, as\u00ed que el divisor que le preced\u00eda queda hu\u00e9rfano \u2014 lo escondemos tambi\u00e9n *\/\n  .mc-info-venue {\n    display: none; \/* TEMP: oculto en este layout \u2014 el bloque sigue en el HTML por si se reactiva *\/\n    align-items: center; gap: 6px; flex-shrink: 0;\n    font-size: 10px; color: #fff; text-transform: uppercase; text-align: right;\n    white-space: nowrap; font-family: 'Inter', sans-serif;\n  }\n\n  \/* Action buttons (Seguir \/ Compartir \/ Lista) \u2014 same token system as player controls *\/\n  .mc-info-actions { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-shrink: 0; }\n  .mc-action-btn {\n    box-sizing: border-box;\n    height: 40px; padding: 12px 16px; border-radius: 2px;\n    border: 1px solid var(--btn-stroke-default); background: var(--btn-fill-default);\n    font-size: 12px; font-weight: 700; font-family: 'Inter', sans-serif;\n    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;\n    text-transform: uppercase; letter-spacing: 0.3px; color: var(--btn-text-default);\n    transition: all 0.15s ease; white-space: nowrap; text-decoration: none;\n  }\n  .mc-action-btn svg { fill: currentColor; stroke: currentColor; }\n  .mc-action-btn:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n  .mc-seguir-btn { width: 91px; }\n  .mc-seguir-btn .mc-btn-plus { color: currentColor; font-weight: 700; font-size: 11px; }\n  .mc-seguir-btn .mc-btn-label { color: currentColor; font-size: 12px; }\n  .mc-seguir-btn.siguiendo { background: var(--btn-fill-selected); border-color: var(--btn-stroke-selected); color: var(--btn-text-hover); }\n  #btnWhatsApp { width: 122px; }\n  #btnLista { width: 83px; }\n\n  \/* \u2500\u2500 VIDEO AREA \u2500\u2500 *\/\n  .mc-video-area {\n    position: relative; width: 100%; cursor: pointer;\n    border-radius: 0;\n  }\n  .mc-canvas {\n    width: 100%; aspect-ratio: 4\/3; height: auto;\n    border-radius: 0; background: #000; display: block;\n    border: 1px solid var(--border2);\n  }\n\n  .mc-play-icon {\n    width: 128px; height: 128px; border-radius: 50%;\n    background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);\n    border: 2px solid rgba(255,255,255,0.3);\n    display: flex; align-items: center; justify-content: center;\n    transition: transform 0.2s ease, background 0.2s ease;\n    cursor: pointer;\n  }\n  .mc-play-overlay:not(.hidden) .mc-play-icon:hover {\n    transform: scale(1.12);\n    background: rgba(255,255,255,0.30);\n  }\n  .mc-play-overlay {\n    position: absolute; inset: 0;\n    display: flex; align-items: center; justify-content: center;\n    pointer-events: none; transition: opacity 2s ease;\n  }\n  .mc-play-overlay.hidden { opacity: 0; pointer-events: none; }\n  .mc-play-overlay:not(.hidden) { pointer-events: all; opacity: 1; }\n\n  \/* \u2500\u2500 DESKTOP OVERLAY \u2500\u2500 *\/\n  .mc-overlay {\n    position: absolute; inset: 0;\n    display: flex; flex-direction: column; justify-content: space-between;\n    padding: 20px; border-radius: 0;\n    pointer-events: none; opacity: 1;\n    transition: max-height 4s ease-in-out, opacity 4s ease-in-out;\n  }\n  .mc-video-area.playing:not(:hover) .mc-overlay { opacity: 0; transition: opacity 3s ease; }\n  .mc-video-area.playing:not(:hover) .mc-overlay-top,\n  .mc-video-area.playing:not(:hover) .mc-overlay-bottom { pointer-events: none; }\n  .mc-video-area:hover .mc-overlay { opacity: 1; transition: opacity 0.3s ease; }\n  .mc-video-area:hover .mc-overlay-top,\n  .mc-video-area:hover .mc-overlay-bottom { pointer-events: all; }\n  .mc-video-area:not(.playing) .mc-overlay { opacity: 1; transition: opacity 0.3s ease; }\n  \/* Fullscreen: :hover is always true (mouse can't leave a fullscreen area), so use a JS-driven idle class instead *\/\n  .mc-video-area.playing.fs-idle .mc-overlay { opacity: 0 !important; transition: opacity 1s ease; pointer-events: none; }\n  .mc-video-area.playing.fs-idle .mc-overlay-top,\n  .mc-video-area.playing.fs-idle .mc-overlay-bottom { pointer-events: none; }\n\n  .mc-overlay-top {\n    display: flex; flex-direction: row; align-items: center; gap: 4px;\n    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);\n    border-radius: 0; pointer-events: all;\n    margin: -20px -20px 0; padding: 12px 12px 24px;\n  }\n  .mc-cam-btn {\n    flex: 1; height: 32px; padding: 0 8px; border-radius: 2px;\n    border: 1px solid var(--btn-stroke-default); background: var(--btn-fill-default);\n    backdrop-filter: blur(6px); color: var(--btn-text-default); font-size: 12px; font-weight: 700;\n    font-family: 'Inter', sans-serif; cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    transition: all 0.15s ease; white-space: nowrap;\n  }\n  .mc-cam-btn:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n  .mc-cam-btn.activo { background: var(--btn-fill-selected); border-color: var(--btn-stroke-selected); color: var(--btn-text-hover); box-shadow: none; }\n  .mc-fullscreen-top-btn {\n    flex-shrink: 0; width: 32px; height: 32px; border-radius: 2px;\n    border: 1px solid var(--btn-stroke-default); background: var(--btn-fill-default);\n    backdrop-filter: blur(6px); cursor: pointer; color: var(--btn-text-default);\n    display: flex; align-items: center; justify-content: center;\n    transition: all 0.15s ease; padding: 0;\n  }\n  .mc-fullscreen-top-btn svg { fill: currentColor; }\n  .mc-fullscreen-top-btn:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n\n  .mc-overlay-bottom {\n    display: flex; flex-direction: column; gap: 16px;\n    padding: 24px 20px 24px;\n    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);\n    border-radius: 0; pointer-events: all;\n    margin: 0 -20px -20px;\n  }\n  .mc-overlay-timeline { display: flex; align-items: center; gap: 12px; flex: 1; }\n  .mc-progress { flex: 1; height: 3px; accent-color: var(--btn-fill-selected); cursor: pointer; }\n  .mc-time { font-size: 11px; color: var(--text2); white-space: nowrap; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }\n\n  .mc-overlay-controls {\n    display: flex; flex-direction: row;\n    align-items: center; gap: 12px;\n  }\n  .mc-controls-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }\n  .mc-controls-left-icons { display: flex; align-items: center; gap: 4px; }\n  .mc-controls-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }\n\n  .mc-btn {\n    width: 40px; height: 40px; border-radius: 2px;\n    border: 1px solid var(--btn-stroke-default);\n    background: var(--btn-fill-default); backdrop-filter: blur(6px);\n    cursor: pointer; display: flex; align-items: center; justify-content: center;\n    transition: all 0.15s ease; padding: 0; color: var(--btn-text-default);\n  }\n  .mc-btn svg { fill: currentColor; stroke: currentColor; }\n  .mc-btn:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n  .mc-btn:active { transform: scale(0.97); }\n  .mc-vol-slider { width: 94px; height: 3px; accent-color: var(--btn-fill-selected); cursor: pointer; }\n\n  \/* \u2500\u2500 QUALITY SELECTOR (AUTO) \u2014 now grouped with play\/pause\/stop \u2500\u2500 *\/\n  .mc-quality-wrap { position: relative; flex-shrink: 0; }\n  .mc-quality-btn {\n    height: 40px; padding: 0 9px; border-radius: 2px; gap: 6px;\n    border: 1px solid var(--btn-stroke-default); background: var(--btn-fill-default);\n    backdrop-filter: blur(6px); color: var(--btn-text-default);\n    font-size: 9px; font-weight: 700; font-family: 'Inter', sans-serif;\n    cursor: pointer; transition: all 0.15s ease; white-space: nowrap;\n    letter-spacing: 0.02em; text-transform: uppercase;\n    display: flex; align-items: center; justify-content: center;\n  }\n  .mc-quality-btn svg { stroke: currentColor; }\n  .mc-quality-btn:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n  .mc-quality-btn.active { background: var(--btn-fill-selected); border-color: var(--btn-stroke-selected); color: var(--btn-text-hover); }\n  .mc-quality-menu {\n    display: none; position: absolute; bottom: 50px; left: 0;\n    background: rgba(20,20,22,0.95); backdrop-filter: blur(12px);\n    border: 1px solid var(--btn-stroke-default); border-radius: 10px;\n    overflow: hidden; min-width: 80px; z-index: 100;\n  }\n  .mc-quality-menu.open { display: block; }\n  .mc-quality-menu button {\n    display: block; width: 100%; padding: 8px 14px;\n    background: none; border: none; color: var(--btn-text-default);\n    font-size: 12px; font-family: 'Inter', sans-serif;\n    cursor: pointer; text-align: left; transition: all 0.1s ease;\n    white-space: nowrap;\n  }\n  .mc-quality-menu button:hover { background: var(--btn-fill-hover); color: var(--btn-text-hover); }\n  .mc-quality-menu button.selected { background: var(--btn-fill-selected); color: var(--btn-text-hover); font-weight: 700; }\n\n  .mc-video-area:fullscreen { border-radius: 0; background: #000; }\n  .mc-video-area:fullscreen .mc-canvas { width: 100vw; height: 100vh; aspect-ratio: unset; border-radius: 0; object-fit: contain; }\n  .mc-video-area:-webkit-full-screen { border-radius: 0; background: #000; }\n  .mc-video-area:-webkit-full-screen .mc-canvas { width: 100vw; height: 100vh; aspect-ratio: unset; border-radius: 0; }\n\n  \/* \u2500\u2500 MOBILE FULLSCREEN \u2500\u2500 *\/\n  .mc-mobile-fs-overlay {\n    display: none; position: fixed; inset: 0; z-index: 9999;\n    background: #000; flex-direction: column; align-items: center; justify-content: center;\n  }\n  .mc-mobile-fs-overlay.active { display: flex; }\n  #fsMobileCanvas {\n    display: block;\n    position: absolute;\n    top: 50%; left: 50%;\n    transform: translate(-50%, -50%);\n    max-width: 100%;\n    max-height: 100%;\n  }\n  .mc-mobile-fs-controls {\n    position: absolute; bottom: 0; left: 0; right: 0; padding: 16px;\n    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);\n    display: flex; flex-direction: column; gap: 12px;\n    opacity: 1; transition: opacity 0.3s ease;\n  }\n  .mc-mobile-fs-controls.hidden { opacity: 0; pointer-events: none; }\n  .mc-mobile-fs-top { display: flex; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; }\n  .mc-mobile-fs-top::-webkit-scrollbar { display: none; }\n  .mc-mobile-fs-cam {\n    flex-shrink: 0; height: 32px; padding: 0 12px; border-radius: 2px;\n    border: 1px solid var(--btn-stroke-default); background: var(--btn-fill-default);\n    color: var(--btn-text-default); font-size: 11px; font-weight: 700; cursor: pointer;\n    display: flex; align-items: center; white-space: nowrap;\n    transition: all 1s ease; flex: 1; justify-content: center;\n  }\n  .mc-mobile-fs-cam:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n  .mc-mobile-fs-cam.activo { background: var(--btn-fill-selected); border-color: var(--btn-stroke-selected); color: var(--btn-text-hover); }\n  .mc-mobile-fs-timeline { display: flex; align-items: center; gap: 8px; }\n  .mc-mobile-fs-progress { flex: 1; height: 3px; accent-color: var(--btn-fill-selected); cursor: pointer; }\n  .mc-mobile-fs-time { font-size: 10px; color: var(--text2); white-space: nowrap; min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; }\n  .mc-mobile-fs-bottom { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }\n  .mc-mobile-fs-left { display: flex; align-items: center; gap: 8px; }\n  .mc-mobile-fs-right { display: flex; align-items: center; gap: 8px; }\n  .mc-fs-btn {\n    width: 40px; height: 40px; border-radius: 2px;\n    border: 1px solid var(--btn-stroke-default); background: var(--btn-fill-default);\n    cursor: pointer; display: flex; align-items: center; justify-content: center;\n    padding: 0; transition: all 0.15s ease; color: var(--btn-text-default);\n  }\n  .mc-fs-btn svg { fill: currentColor; stroke: currentColor; }\n  .mc-fs-btn:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n  .mc-fs-vol { width: 70px; height: 3px; accent-color: var(--btn-fill-selected); cursor: pointer; }\n\n  .mc-mobile-cams-wrap { display: none; }\n  .mc-mobile-timeline { display: none; }\n  .mc-mobile-bar { display: none; }\n\n  \/* \u2500\u2500 REKKOMENDADOS \u2500\u2500 *\/\n  .mc-rekkomendados {\n    display: flex; flex-direction: column; align-items: center; gap: 12px;\n    width: calc(100% + 32px); margin-left: -16px; padding: 12px 0 4px;\n  }\n  .mc-rekk-collapse {\n    display: flex; flex-direction: column; gap: 16px; width: 100%;\n    max-height: 0; opacity: 0; overflow: hidden;\n    padding-top: 3px; margin-top: -3px;\n    transition: max-height 2s ease-in-out, opacity 1s ease-in-out;\n  }\n  .mc-rekk-collapse.open { max-height: 3000px; opacity: 1; }\n  .mc-rekk-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding: 0 20px; }\n  .mc-rekk-title { font-size: 20px; font-weight: 500; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; }\n  .mc-rekk-arrows { display: flex; gap: 8px; }\n  .mc-rekk-arrow {\n    width: 42px; height: 42px; border-radius: 2px;\n    border: 1px solid var(--btn-stroke-default); background: var(--btn-fill-default);\n    cursor: pointer; display: flex; align-items: center; justify-content: center;\n    transition: all 0.15s ease; padding: 0; color: var(--btn-text-default);\n  }\n  .mc-rekk-arrow svg { stroke: currentColor; }\n  .mc-rekk-arrow:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n  .mc-rekk-arrow:active { transform: scale(0.95); }\n\n  .mc-rekk-grid {\n    display: flex; flex-direction: row; gap: 8px; width: 100%;\n    overflow-x: auto; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; scrollbar-width: none;\n    cursor: grab; user-select: none; -webkit-overflow-scrolling: touch;\n    scroll-behavior: smooth; height: auto; align-items: flex-start;\n  }\n  .mc-rekk-grid::-webkit-scrollbar { display: none; }\n  .mc-rekk-grid.dragging { cursor: grabbing; scroll-behavior: auto; }\n\n  .mc-rekk-card {\n    flex-shrink: 0; width: 330px; min-width: 232px;\n    background: #181F2A; box-shadow: 0px 3px 4px rgba(0,0,0,0.6);\n    border-radius: 4px; display: flex; flex-direction: column;\n    align-items: flex-start; padding: 8px 8px 24px; gap: 10px; height: auto;\n  }\n  .mc-rekk-img {\n    position: relative; width: 100%; aspect-ratio: 1\/1;\n    border-radius: 2px; overflow: hidden; flex-shrink: 0; align-self: stretch;\n  }\n  .mc-rekk-img img {\n    position: absolute; inset: 0; width: 100%; height: 100%;\n    object-fit: cover; display: block; pointer-events: none; z-index: 0;\n  }\n  .mc-rekk-img-gradient {\n    position: absolute; inset: 0; z-index: 1; pointer-events: none;\n    background: linear-gradient(180deg, rgba(0,0,0,0) 26.11%, rgba(0,0,0,0.63) 65.09%, rgba(0,0,0,0.9) 100%);\n  }\n  .mc-rekk-badge {\n    position: absolute; top: 10px; left: 10px; z-index: 2;\n    display: flex; align-items: center; gap: 4px;\n    padding: 8px 12px; border-radius: 16px;\n    background: #181F2A; border: 1px solid rgba(255,255,255,0.2);\n    color: #fff; font-size: 11px; font-weight: 500; text-transform: uppercase;\n    font-family: 'Inter', sans-serif; line-height: 100%;\n  }\n  .mc-rekk-title-block {\n    position: absolute; left: 10px; right: 10px; bottom: 16px; z-index: 2;\n    display: flex; flex-direction: column; gap: 16px;\n  }\n  .mc-rekk-name-row { display: flex; flex-direction: column; gap: 0; }\n  .mc-rekk-dj {\n    font-size: 14px; font-weight: 600; color: #B5DBFF; text-transform: uppercase;\n    font-family: 'Inter', sans-serif; line-height: 100%;\n  }\n  .mc-rekk-set {\n    margin-top: 8px;\n    font-size: 29px; font-weight: 400; color: #fff; text-transform: uppercase;\n    font-family: 'Inter', sans-serif; line-height: 120%;\n  }\n  .mc-rekk-venue-inimg {\n    display: none; \/* mobile-only, ver media query *\/\n    margin-top: 10px;\n    font-size: 11px; color: #fff; text-transform: uppercase;\n    font-family: 'Inter', sans-serif; line-height: 100%;\n  }\n  .mc-rekk-play-pill {\n    display: inline-flex; align-items: center; gap: 6px;\n    background: rgba(73,167,255,0.9); border: none; border-radius: 100px;\n    padding: 8px 10px 8px 8px; width: fit-content; cursor: pointer;\n    font-size: 12px; font-weight: 500; color: #181F2A; text-transform: uppercase;\n    font-family: 'Inter', sans-serif; line-height: 100%;\n  }\n  .mc-rekk-play-circle {\n    width: 21px; height: 21px; border-radius: 50%; background: #181F2A;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  }\n  .mc-rekk-info {\n    width: 100%; display: flex; flex-direction: column;\n    align-items: flex-start; padding: 0 8px; gap: 12px; align-self: stretch;\n  }\n  .mc-rekk-genres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }\n  .mc-rekk-genre-pill {\n    padding: 6px 12px; border-radius: 100px; border: 1px solid rgba(181,219,255,0.35);\n    font-size: 10px; color: #fff; text-transform: uppercase; white-space: nowrap;\n    font-family: 'Inter', sans-serif; line-height: 100%;\n  }\n  .mc-rekk-stats-row {\n    display: flex; align-items: flex-end; justify-content: space-between;\n    gap: 12px; width: 100%;\n  }\n  .mc-rekk-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; }\n  .mc-rekk-stat-top { display: flex; align-items: center; gap: 4px; }\n  .mc-rekk-stat-num { font-size: 14px; font-weight: 700; color: #fff; font-family: 'Inter', sans-serif; line-height: 100%; }\n  .mc-rekk-stat-label { font-size: 10px; color: #fff; text-transform: uppercase; font-family: 'Inter', sans-serif; line-height: 100%; }\n  .mc-rekk-stat-divider { width: 0; height: 23.5px; border-left: 0.5px solid rgba(97,140,255,0.4); flex-shrink: 0; }\n  .mc-rekk-venue-stat {\n    display: flex; align-items: center; gap: 6px; flex-shrink: 0;\n    font-size: 10px; color: #fff; text-transform: uppercase; text-align: right;\n    white-space: nowrap; font-family: 'Inter', sans-serif; line-height: 120%;\n  }\n  .mc-rekk-hr { width: 100%; height: 0; border-top: 1px solid rgba(255,255,255,0.08); }\n  .mc-rekk-desc {\n    font-size: 10px; font-family: 'Roboto', sans-serif; color: #fff;\n    line-height: 150%; letter-spacing: -0.1px;\n    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;\n    overflow: hidden; width: 100%;\n  }\n  .mc-rekk-more {\n    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n    height: 40px; padding: 0 16px; border-radius: 2px;\n    border: 1px solid var(--btn-stroke-default); background: var(--btn-fill-default);\n    color: var(--btn-text-default); font-size: 11px; font-weight: 700;\n    font-family: 'Inter', sans-serif; text-decoration: none;\n    text-transform: uppercase; letter-spacing: 0.3px;\n    transition: all 0.15s ease; align-self: center; margin: 4px 0;\n  }\n  .mc-rekk-more:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n  .mc-rekk-toggle-icon { font-size: 14px; font-weight: 700; line-height: 1; }\n\n  @media (max-width: 768px) {\n    .mc-wrap { padding: 8px; gap: 3px; border-radius: 2px; }\n\n    \/* MOBILE CAMS *\/\n    .mc-mobile-cams-wrap {\n      display: flex; gap: 4px; flex-wrap: nowrap;\n      width: 100%; scrollbar-width: none; overflow-x: visible;\n    }\n    .mc-mobile-cams-wrap::-webkit-scrollbar { display: none; }\n    .mc-mobile-cams-wrap button {\n      flex: 1; height: 32px; padding: 0 4px; border-radius: 2px;\n      border: 1px solid var(--btn-stroke-default); background: var(--btn-fill-default);\n      color: var(--btn-text-default); font-size: 11px; font-weight: 700;\n      font-family: 'Inter', sans-serif; cursor: pointer;\n      display: flex; align-items: center; justify-content: center;\n      white-space: nowrap; transition: all 0.15s ease;\n    }\n    .mc-mobile-cams-wrap button:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n    .mc-mobile-cams-wrap button.activo {\n      background: var(--btn-fill-selected); border-color: var(--btn-stroke-selected); color: var(--btn-text-hover);\n      box-shadow: none;\n    }\n\n    \/* VIDEO *\/\n    .mc-video-area { border-radius: 0; }\n    .mc-canvas { border-radius: 0; }\n\n    .mc-overlay { display: none; }\n\n    \/* TIMELINE *\/\n    .mc-mobile-timeline {\n      display: flex; align-items: center; padding: 3px 0; gap: 12px;\n      width: 100%; justify-content: space-between;\n    }\n    .mc-mobile-progress { flex: 1; height: 3px; accent-color: var(--btn-fill-selected); cursor: pointer; }\n    .mc-mobile-time {\n      font-size: 11px; color: var(--text2); white-space: nowrap;\n      min-width: 69px; text-align: right; font-variant-numeric: tabular-nums;\n    }\n\n    \/* CONTROLS BAR *\/\n    .mc-mobile-bar {\n      display: flex; flex-direction: row; justify-content: space-between;\n      align-items: center; padding: 0; gap: 4px; width: 100%;\n    }\n    .mc-mobile-left { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n    .mc-mobile-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; min-width: 0; }\n    .mc-mobile-btn {\n      width: 40px; height: 40px; border-radius: 2px;\n      border: 1px solid var(--btn-stroke-default); background: var(--btn-fill-default);\n      cursor: pointer; display: flex; align-items: center; justify-content: center;\n      transition: all 0.15s ease; padding: 0; flex-shrink: 0; color: var(--btn-text-default);\n    }\n    .mc-mobile-btn svg { fill: currentColor; stroke: currentColor; }\n    .mc-mobile-btn:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n    .mc-mobile-vol { width: 64px; min-width: 64px; flex: none; height: 3px; accent-color: var(--btn-fill-selected); cursor: pointer; }\n\n    \/* INFO BAR *\/\n    .mc-info-bar {\n      display: flex; flex-direction: column; align-items: flex-start;\n      padding: 12px 8px 6px; gap: 16px; width: 100%;\n    }\n    .mc-info-left { width: 100%; gap: 10px; }\n    .mc-avatar { width: 52px; height: 52px; }\n    .mc-title-group {\n      grid-template-columns: 1fr;\n      grid-template-areas: \"dj\" \"title\" \"loc\";\n      row-gap: 4px;\n    }\n    .mc-set-title { font-size: 18px; white-space: normal; }\n    .mc-dj-name { font-size: 12px; }\n    .mc-location { font-size: 10px; }\n    .mc-info-venue { display: none; }\n    .mc-info-stats .mc-info-divider:nth-last-child(2) { display: none; } \/* divisor hu\u00e9rfano del venue oculto *\/\n    .mc-info-stats { width: 100%; gap: 16px; justify-content: center; flex-wrap: nowrap; height: auto; }\n    .mc-info-stat { flex-direction: row; align-items: center; gap: 6px; flex: none; }\n    .mc-info-stat-top { gap: 6px; }\n    .mc-info-stat-top svg { height: 14px; width: auto; flex-shrink: 0; }\n    .mc-info-stat-num { font-size: 13px; }\n    .mc-info-stat-label { font-size: 10px; letter-spacing: 0.3px; }\n    .mc-info-divider { height: 20px; }\n    .mc-info-actions { width: 100%; }\n    .mc-action-btn { font-size: 10px; padding: 0 12px; height: 38px; flex: 1; justify-content: center; }\n\n    \/* PLAY ICON \u2014 mobile smaller *\/\n    .mc-play-icon {\n      width: 72px; height: 72px;\n      border: 1px solid rgba(255,255,255,0.3);\n    }\n    .mc-play-icon svg { width: 24px; height: 24px; }\n\n    \/* REKKOMENDADOS \u2014 crop via mc-wrap overflow:hidden *\/\n    .mc-rekkomendados {\n      width: calc(100% + 16px); margin-left: -8px; padding: 1.5px 0 4px;\n      gap: 6px;\n    }\n    .mc-rekk-grid {\n      display: flex; flex-direction: row; gap: 8px; width: 100%;\n      overflow-x: auto; padding: 0 8px 8px; scrollbar-width: none;\n      cursor: grab; user-select: none; -webkit-overflow-scrolling: touch;\n    }\n\n\n    .mc-rekk-header { padding: 0 8px; }\n    .mc-rekk-title { font-size: 16px; }\n    .mc-rekk-arrows { gap: 3px; }\n    .mc-rekk-arrow {\n      width: 42px; height: 32px; border-radius: 2px;\n      display: flex; align-items: center; justify-content: center;\n      border: 1px solid var(--btn-stroke-default); background: var(--btn-fill-default);\n      color: var(--btn-text-default);\n      cursor: pointer; padding: 3px 11px; transition: all 0.15s ease;\n    }\n    .mc-rekk-arrow:hover { background: var(--btn-fill-hover); border-color: var(--btn-stroke-hover); color: var(--btn-text-hover); }\n    .mc-rekk-arrow:active { transform: scale(0.95); }\n    .mc-rekk-grid::-webkit-scrollbar { display: none; }\n    .mc-rekk-card {\n      flex-shrink: 0; width: 232px; height: auto;\n      background: #181F2A; box-shadow: 0px 3px 4px rgba(0,0,0,0.6);\n      border-radius: 4px; display: flex; flex-direction: column;\n      align-items: flex-start; padding: 8px 8px 20px; gap: 8px; position: relative;\n    }\n    .mc-rekk-badge { padding: 6px 10px; font-size: 9px; top: 8px; left: 8px; }\n    .mc-rekk-title-block { left: 8px; right: 8px; bottom: 12px; gap: 10px; }\n    .mc-rekk-dj { font-size: 10px; }\n    .mc-rekk-set { font-size: 21px; line-height: 115%; margin-top: 6px; }\n    .mc-rekk-venue-inimg { display: block; font-size: 10px; margin-top: 8px; }\n    .mc-rekk-play-pill { font-size: 10px; padding: 6px 8px 6px 6px; }\n    .mc-rekk-play-circle { width: 18px; height: 18px; }\n    .mc-rekk-info { padding: 0 4px; gap: 10px; margin-top: 4px; }\n    .mc-rekk-genre-pill { font-size: 9px; padding: 5px 10px; }\n    .mc-rekk-stats-row { flex-wrap: wrap; gap: 8px; justify-content: center; }\n    .mc-rekk-stat { flex: 1; }\n    .mc-rekk-stat-num { font-size: 12px; }\n    .mc-rekk-stat-label { font-size: 9px; }\n    .mc-rekk-venue-stat { display: none; } \/* se movi\u00f3 arriba, dentro de la imagen *\/\n    .mc-rekk-stats-row .mc-rekk-stat-divider:nth-last-child(2) { display: none; } \/* divisor hu\u00e9rfano del venue oculto *\/\n    .mc-rekk-desc { font-size: 9px; line-height: 14px; }\n    .mc-rekk-more { align-self: center; margin: 2px 0; }\n    .mc-rekk-arrow { display: flex; }\n  }\n<\/style>\n\n<!-- MOBILE FULLSCREEN OVERLAY -->\n<div class=\"mc-mobile-fs-overlay\" id=\"mobileFS\">\n  <canvas id=\"fsMobileCanvas\"><\/canvas>\n  <div class=\"mc-mobile-fs-controls\" id=\"fsControls\">\n    <div class=\"mc-mobile-fs-top\">\n      <button class=\"mc-mobile-fs-cam activo\" onclick=\"setAnguloFS('todos',this)\">\u229e All<\/button>\n      <button class=\"mc-mobile-fs-cam\" onclick=\"setAnguloFS('sup-izq',this)\">\u25a3 Cam 1<\/button>\n      <button class=\"mc-mobile-fs-cam\" onclick=\"setAnguloFS('sup-der',this)\">\u25a3 Cam 2<\/button>\n      <button class=\"mc-mobile-fs-cam\" onclick=\"setAnguloFS('inf-izq',this)\">\u25a3 Cam 3<\/button>\n      <button class=\"mc-mobile-fs-cam\" onclick=\"setAnguloFS('inf-der',this)\">\u25a3 Cam 4<\/button>\n    <\/div>\n    <div class=\"mc-mobile-fs-timeline\">\n      <input type=\"range\" class=\"mc-mobile-fs-progress\" id=\"barraFS\" value=\"0\" min=\"0\" step=\"0.1\">\n      <span class=\"mc-mobile-fs-time\" id=\"tiempoFS\">0:00 \/ 0:00<\/span>\n    <\/div>\n    <div class=\"mc-mobile-fs-bottom\">\n      <div class=\"mc-mobile-fs-left\">\n        <button class=\"mc-fs-btn mc-fs-btn-play\" onclick=\"togglePlayPause()\">\n          <svg id=\"fsPlay\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M6 4L16 10L6 16V4Z\" fill=\"currentColor\"\/><\/svg>\n          <svg id=\"fsPause\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" style=\"display:none\"><rect x=\"4\" y=\"3\" width=\"4\" height=\"14\" rx=\"1\" fill=\"currentColor\"\/><rect x=\"12\" y=\"3\" width=\"4\" height=\"14\" rx=\"1\" fill=\"currentColor\"\/><\/svg>\n        <\/button>\n        <button class=\"mc-fs-btn mc-fs-btn-stop\" onclick=\"detener()\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"2\" fill=\"currentColor\"\/><\/svg>\n        <\/button>\n      <\/div>\n      <div class=\"mc-mobile-fs-right\">\n        <button class=\"mc-fs-btn\" onclick=\"toggleVolumen()\">\n          <svg id=\"fsVolOn\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M11 5L6 9H2V15H6L11 19V5Z\" fill=\"currentColor\"\/>\n            <path d=\"M15.54 8.46C16.48 9.4 17 10.67 17 12C17 13.33 16.48 14.6 15.54 15.54\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n            <path d=\"M19.07 4.93C20.96 6.82 22 9.34 22 12C22 14.66 20.96 17.18 19.07 19.07\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n          <\/svg>\n          <svg id=\"fsVolOff\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"display:none\">\n            <path d=\"M11 5L6 9H2V15H6L11 19V5Z\" fill=\"#6C6C70\"\/>\n            <line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\" stroke=\"#6C6C70\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n            <line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\" stroke=\"#6C6C70\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n          <\/svg>\n        <\/button>\n        <input type=\"range\" class=\"mc-fs-vol\" id=\"volFS\" min=\"0\" max=\"1\" step=\"0.01\" value=\"1\">\n        <button class=\"mc-fs-btn mc-fs-btn-close\" onclick=\"closeMobileFS()\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n            <path d=\"M1 1L13 13M13 1L1 13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n          <\/svg>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- MAIN WRAP -->\n<div class=\"mc-wrap\">\n\n  <div class=\"mc-mobile-cams-wrap\">\n    <button class=\"activo\" onclick=\"setAngulo('todos',this,true)\">\u229e All Cams<\/button>\n    <button onclick=\"setAngulo('sup-izq',this,true)\">\u25a3 Cam 1<\/button>\n    <button onclick=\"setAngulo('sup-der',this,true)\">\u25a3 Cam 2<\/button>\n    <button onclick=\"setAngulo('inf-izq',this,true)\">\u25a3 Cam 3<\/button>\n    <button onclick=\"setAngulo('inf-der',this,true)\">\u25a3 Cam 4<\/button>\n  <\/div>\n\n  <div class=\"mc-video-area\" id=\"videoArea\" onclick=\"handleVideoClick()\">\n    <canvas id=\"multicam-canvas\" class=\"mc-canvas\" width=\"1920\" height=\"1440\"><\/canvas>\n    <div class=\"mc-play-overlay\" id=\"playOverlay\">\n      <div class=\"mc-play-icon\">\n        <svg id=\"svgPlay\" width=\"40\" height=\"40\" viewBox=\"0 0 32 32\" fill=\"none\"><path d=\"M10 6L26 16L10 26V6Z\" fill=\"white\"\/><\/svg>\n        <svg id=\"svgPause\" width=\"40\" height=\"40\" viewBox=\"0 0 32 32\" fill=\"none\" style=\"display:none\">\n          <rect x=\"7\" y=\"5\" width=\"6\" height=\"22\" rx=\"2\" fill=\"white\"\/>\n          <rect x=\"19\" y=\"5\" width=\"6\" height=\"22\" rx=\"2\" fill=\"white\"\/>\n        <\/svg>\n      <\/div>\n    <\/div>\n    <div class=\"mc-overlay\" id=\"mcOverlay\">\n      <div class=\"mc-overlay-top\">\n        <button class=\"mc-cam-btn activo\" onclick=\"event.stopPropagation(); setAngulo('todos',this,false)\">\u229e All Cams<\/button>\n        <button class=\"mc-cam-btn\" onclick=\"event.stopPropagation(); setAngulo('sup-izq',this,false)\">\u25a3 Cam 1<\/button>\n        <button class=\"mc-cam-btn\" onclick=\"event.stopPropagation(); setAngulo('sup-der',this,false)\">\u25a3 Cam 2<\/button>\n        <button class=\"mc-cam-btn\" onclick=\"event.stopPropagation(); setAngulo('inf-izq',this,false)\">\u25a3 Cam 3<\/button>\n        <button class=\"mc-cam-btn\" onclick=\"event.stopPropagation(); setAngulo('inf-der',this,false)\">\u25a3 Cam 4<\/button>\n        <button class=\"mc-fullscreen-top-btn\" onclick=\"event.stopPropagation(); toggleFullscreen()\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 4h-4v2h6v-6h-2v4z\" fill=\"currentColor\"\/>\n          <\/svg>\n        <\/button>\n      <\/div>\n      <div style=\"flex:1;\"><\/div>\n      <div class=\"mc-overlay-bottom\">\n        <div class=\"mc-overlay-timeline\">\n          <input type=\"range\" class=\"mc-progress\" id=\"barra\" value=\"0\" min=\"0\" step=\"0.1\"\n                 onclick=\"event.stopPropagation()\" oninput=\"event.stopPropagation(); video.currentTime=this.value\">\n          <span class=\"mc-time\" id=\"tiempo\">0:00 \/ 0:00<\/span>\n        <\/div>\n        <div class=\"mc-overlay-controls\">\n          <div class=\"mc-controls-left\">\n            <div class=\"mc-quality-wrap\" onclick=\"event.stopPropagation()\">\n              <button class=\"mc-quality-btn\" id=\"qualityBtn\" onclick=\"toggleQualityMenu()\">\n                AUTO\n                <svg width=\"7\" height=\"8\" viewBox=\"0 0 7 8\" fill=\"none\"><path d=\"M1 2.5L3.5 5.5L6 2.5\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n              <\/button>\n              <div class=\"mc-quality-menu\" id=\"qualityMenu\">\n                <button onclick=\"setQuality(1080)\">1080p<\/button>\n                <button onclick=\"setQuality(1440)\">1440p<\/button>\n              <\/div>\n            <\/div>\n            <div class=\"mc-controls-left-icons\">\n              <button class=\"mc-btn mc-btn-play\" onclick=\"event.stopPropagation(); togglePlayPause()\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M6 4L16 10L6 16V4Z\" fill=\"currentColor\"\/><\/svg>\n              <\/button>\n              <button class=\"mc-btn\" onclick=\"event.stopPropagation(); togglePlayPause()\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 18 18\" fill=\"none\"><rect x=\"3\" y=\"2\" width=\"4\" height=\"14\" rx=\"1\" fill=\"currentColor\"\/><rect x=\"11\" y=\"2\" width=\"4\" height=\"14\" rx=\"1\" fill=\"currentColor\"\/><\/svg>\n              <\/button>\n              <button class=\"mc-btn mc-btn-stop\" onclick=\"event.stopPropagation(); detener()\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"2\" fill=\"currentColor\"\/><\/svg>\n              <\/button>\n            <\/div>\n          <\/div>\n          <div class=\"mc-controls-right\">\n            <button class=\"mc-btn\" onclick=\"event.stopPropagation(); toggleVolumen()\">\n              <svg id=\"iconVolOn\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M11 5L6 9H2V15H6L11 19V5Z\" fill=\"currentColor\"\/>\n                <path d=\"M15.54 8.46C16.48 9.4 17 10.67 17 12C17 13.33 16.48 14.6 15.54 15.54\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                <path d=\"M19.07 4.93C20.96 6.82 22 9.34 22 12C22 14.66 20.96 17.18 19.07 19.07\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n              <\/svg>\n              <svg id=\"iconVolOff\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"display:none\">\n                <path d=\"M11 5L6 9H2V15H6L11 19V5Z\" fill=\"#6C6C70\"\/>\n                <line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\" stroke=\"#6C6C70\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                <line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\" stroke=\"#6C6C70\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n              <\/svg>\n            <\/button>\n            <input type=\"range\" class=\"mc-vol-slider\" id=\"volSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"1\"\n                   onclick=\"event.stopPropagation()\" oninput=\"event.stopPropagation(); updateVolSliders(this.value,this.value==0)\">\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"mc-mobile-timeline\">\n    <input type=\"range\" class=\"mc-mobile-progress\" id=\"barraMobile\" value=\"0\" min=\"0\" step=\"0.1\">\n    <span class=\"mc-mobile-time\" id=\"tiempoMobile\">0:00 \/ 0:00<\/span>\n  <\/div>\n\n  <div class=\"mc-mobile-bar\">\n    <div class=\"mc-mobile-left\">\n      <button class=\"mc-mobile-btn mc-mobile-btn-play\" onclick=\"togglePlayPause()\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M6 4L16 10L6 16V4Z\" fill=\"currentColor\"\/><\/svg>\n      <\/button>\n      <button class=\"mc-mobile-btn\" onclick=\"togglePlayPause()\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 18 18\" fill=\"none\"><rect x=\"3\" y=\"2\" width=\"4\" height=\"14\" rx=\"1\" fill=\"currentColor\"\/><rect x=\"11\" y=\"2\" width=\"4\" height=\"14\" rx=\"1\" fill=\"currentColor\"\/><\/svg>\n      <\/button>\n      <button class=\"mc-mobile-btn mc-mobile-btn-stop\" onclick=\"detener()\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"2\" fill=\"currentColor\"\/><\/svg>\n      <\/button>\n    <\/div>\n    <div class=\"mc-mobile-right\">\n      <button class=\"mc-mobile-btn\" onclick=\"toggleVolumen()\">\n        <svg id=\"iconVolOnM\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M11 5L6 9H2V15H6L11 19V5Z\" fill=\"currentColor\"\/>\n          <path d=\"M15.54 8.46C16.48 9.4 17 10.67 17 12C17 13.33 16.48 14.6 15.54 15.54\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n          <path d=\"M19.07 4.93C20.96 6.82 22 9.34 22 12C22 14.66 20.96 17.18 19.07 19.07\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n        <\/svg>\n        <svg id=\"iconVolOffM\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"display:none\">\n          <path d=\"M11 5L6 9H2V15H6L11 19V5Z\" fill=\"#6C6C70\"\/>\n          <line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\" stroke=\"#6C6C70\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n          <line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\" stroke=\"#6C6C70\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n        <\/svg>\n      <\/button>\n      <input type=\"range\" class=\"mc-mobile-vol\" id=\"volSliderMobile\" min=\"0\" max=\"1\" step=\"0.01\" value=\"1\">\n      <button class=\"mc-mobile-btn\" onclick=\"openMobileFS()\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 4h-4v2h6v-6h-2v4z\" fill=\"currentColor\"\/>\n        <\/svg>\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <!-- INFO BAR -->\n  <div class=\"mc-info-bar\">\n    <div class=\"mc-info-left\">\n      <img decoding=\"async\" class=\"mc-avatar\" src=\"https:\/\/rekkords.com\/wp-content\/uploads\/rekkords\/covers\/cover-001_aaround_waxcid-house-v2.jpg\" alt=\"Aaround\">\n      <div class=\"mc-title-group\">\n        <span class=\"mc-set-title\" id=\"setTitle\">Waxcid Sound V2<\/span>\n        <span class=\"mc-dj-name\">Aaround<\/span>\n        <span class=\"mc-location\">@ Territorio Paintball<\/span>\n      <\/div>\n    <\/div>\n    <div class=\"mc-info-stats\">\n      <div class=\"mc-info-divider\"><\/div>\n      <div class=\"mc-info-stat\">\n        <div class=\"mc-info-stat-top\">\n          <svg width=\"17\" height=\"14\" viewBox=\"0 0 17 14\" fill=\"none\"><path d=\"M8.5 0C4.5 0 1.5 3 1.5 6.5V10.5C1.5 11.6 2.4 12.5 3.5 12.5H4.5C5.05 12.5 5.5 12.05 5.5 11.5V8.5C5.5 7.95 5.05 7.5 4.5 7.5H3.2C3.6 4.8 5.8 2.7 8.5 2.7C11.2 2.7 13.4 4.8 13.8 7.5H12.5C11.95 7.5 11.5 7.95 11.5 8.5V11.5C11.5 12.05 11.95 12.5 12.5 12.5H13.5C14.6 12.5 15.5 11.6 15.5 10.5V6.5C15.5 3 12.5 0 8.5 0Z\" fill=\"#fff\"\/><\/svg>\n          <span class=\"mc-info-stat-num\" id=\"seguidoresNum\">420<\/span>\n        <\/div>\n        <span class=\"mc-info-stat-label\">Seguidores<\/span>\n      <\/div>\n      <div class=\"mc-info-divider\"><\/div>\n      <div class=\"mc-info-stat\">\n        <div class=\"mc-info-stat-top\">\n          <svg width=\"21\" height=\"14\" viewBox=\"-1.5 -1.5 24 17\" style=\"overflow:visible\" fill=\"none\"><path d=\"M10.5 0C5 0 1 5 0 7C1 9 5 14 10.5 14C16 14 20 9 21 7C20 5 16 0 10.5 0Z\" stroke=\"#fff\" stroke-width=\"1.3\"\/><circle cx=\"10.5\" cy=\"7\" r=\"3\" fill=\"#fff\"\/><\/svg>\n          <span class=\"mc-info-stat-num\" id=\"viewsNumM\">777<\/span>\n        <\/div>\n        <span class=\"mc-info-stat-label\">Vistas<\/span>\n      <\/div>\n      <div class=\"mc-info-divider\"><\/div>\n      <div class=\"mc-info-venue\">\n        @ Rekkords Studio\n      <\/div>\n    <\/div>\n    <div class=\"mc-info-actions\">\n      <button class=\"mc-action-btn mc-seguir-btn\" onclick=\"toggleSeguir(this)\"><span class=\"mc-btn-plus\">+<\/span><span class=\"mc-btn-label\">Seguir<\/span><\/button>\n      <a class=\"mc-action-btn\" id=\"btnWhatsApp\" href=\"#\" target=\"_blank\">\n        Compartir\n        <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"><circle cx=\"10.5\" cy=\"2.5\" r=\"2\" stroke=\"currentColor\" stroke-width=\"1.1\"\/><circle cx=\"2.5\" cy=\"6.5\" r=\"2\" stroke=\"currentColor\" stroke-width=\"1.1\"\/><circle cx=\"10.5\" cy=\"10.5\" r=\"2\" stroke=\"currentColor\" stroke-width=\"1.1\"\/><path d=\"M4.3 5.6L8.7 3.4M4.3 7.4L8.7 9.6\" stroke=\"currentColor\" stroke-width=\"1.1\"\/><\/svg>\n      <\/a>\n      <button class=\"mc-action-btn\" id=\"btnLista\" onclick=\"addToList()\">\n        Lista\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><circle cx=\"1\" cy=\"2\" r=\"1\" fill=\"currentColor\"\/><circle cx=\"1\" cy=\"6\" r=\"1\" fill=\"currentColor\"\/><circle cx=\"1\" cy=\"10\" r=\"1\" fill=\"currentColor\"\/><path d=\"M4 2H12M4 6H12M4 10H12\" stroke=\"currentColor\" stroke-width=\"1.2\"\/><\/svg>\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <!-- REKKOMENDADOS \u2014 secci\u00f3n animable (colapsada por defecto), bot\u00f3n siempre debajo -->\n  <div class=\"mc-rekkomendados\">\n    <div class=\"mc-rekk-collapse\" id=\"rekkomendadosSection\">\n      <div class=\"mc-rekk-header\">\n        <span class=\"mc-rekk-title\">Rekkomendados<\/span>\n        <div class=\"mc-rekk-arrows\">\n          <button class=\"mc-rekk-arrow\" onclick=\"scrollCarousel(-1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n              <path d=\"M10 3L5 8L10 13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/button>\n          <button class=\"mc-rekk-arrow\" onclick=\"scrollCarousel(1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n              <path d=\"M6 3L11 8L6 13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n      <div class=\"mc-rekk-grid\" id=\"rekkGrid\"><\/div>\n    <\/div>\n    <button class=\"mc-rekk-more\" id=\"rekkToggleBtn\" onclick=\"toggleRekkomendados()\">\n      <span id=\"rekkToggleLabel\">Ver m\u00e1s Rekkords<\/span>\n      <span class=\"mc-rekk-toggle-icon\" id=\"rekkToggleIcon\">+<\/span>\n    <\/button>\n  <\/div>\n\n  <video id=\"multicam-video\" loop preload=\"metadata\" style=\"display:none\" playsinline><\/video>\n<\/div>\n\n<!-- BRANDING CURTAIN -->\n<div id=\"brandCurtain\" style=\"position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;background:#000;pointer-events:none;transition:opacity 0.8s ease;\">\n  <canvas id=\"glitchCanvas\" style=\"position:absolute;inset:0;width:100%;height:100%;opacity:0.6;\"><\/canvas>\n  <img decoding=\"async\" src=\"https:\/\/rekkords.com\/wp-content\/uploads\/2026\/06\/rekkords-logo-white.gif\" style=\"position:relative;z-index:1;max-width:380px;width:60%;image-rendering:auto;\" draggable=\"false\">\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/hls.js\/1.4.12\/hls.min.js\"><\/script>\n<script>\n  \/* \u2500\u2500 BRANDING CURTAIN \u2500\u2500 *\/\n  const curtain = document.getElementById('brandCurtain');\n  const glitchCvs = document.getElementById('glitchCanvas');\n  const glitchCtx = glitchCvs.getContext('2d');\n  let glitchRAF;\n  function resizeGlitch() { glitchCvs.width=window.innerWidth; glitchCvs.height=window.innerHeight; }\n  resizeGlitch();\n  window.addEventListener('resize', resizeGlitch);\n  function drawGlitch() {\n    const W=glitchCvs.width, H=glitchCvs.height;\n    const imgData=glitchCtx.createImageData(W,H); const data=imgData.data;\n    for(let i=0;i<data.length;i+=4){const v=Math.random()>0.85?Math.floor(Math.random()*60):0;const g=Math.random()>0.997;data[i]=g?10+Math.random()*30:v;data[i+1]=g?200+Math.random()*55:v*0.3;data[i+2]=g?255:v*0.6;data[i+3]=255;}\n    const lines=Math.floor(Math.random()*4);\n    for(let l=0;l<lines;l++){const y=Math.floor(Math.random()*H);const h=Math.floor(Math.random()*6)+1;const shift=Math.floor(Math.random()*40)-20;glitchCtx.putImageData(imgData,0,0);const slice=glitchCtx.getImageData(0,y,W,h);glitchCtx.putImageData(slice,shift,y);}\n    glitchCtx.putImageData(imgData,0,0);\n    glitchRAF=requestAnimationFrame(drawGlitch);\n  }\n  drawGlitch();\n  setTimeout(()=>{curtain.style.opacity='0';setTimeout(()=>{curtain.style.display='none';cancelAnimationFrame(glitchRAF);},800);},3200);\n\n  \/* \u2500\u2500 SEGUIR \u2500\u2500 *\/\n  function toggleSeguir(btn){const s=btn.classList.toggle('siguiendo');btn.innerHTML=s?'\u2713 Siguiendo':'<span class=\"mc-btn-plus\">+<\/span><span class=\"mc-btn-label\">Seguir<\/span>';const k='rekkords_siguiendo_aaround';s?localStorage.setItem(k,'1'):localStorage.removeItem(k);}\n  if(localStorage.getItem('rekkords_siguiendo_aaround')){const b=document.querySelector('.mc-seguir-btn');if(b){b.classList.add('siguiendo');b.textContent='\u2713 Siguiendo';}}\n\n  \/* \u2500\u2500 WHATSAPP \u2500\u2500 *\/\n  const waBtn=document.getElementById('btnWhatsApp');\n  waBtn.href='https:\/\/wa.me\/?text='+encodeURIComponent('\ud83c\udfa7 Mir\u00e1 este set en Rekkords.com: Aaround \u2014 Waxcid Sound V2 @ Antrik, San Jos\u00e9\\n'+window.location.href);\n\n  \/* \u2500\u2500 ADD TO LIST \u2500\u2500 *\/\n  function addToList(){const item={dj:'Aaround',set:'Waxcid Sound V2',venue:'@ Antrik, San Jos\u00e9',url:window.location.href,ts:Date.now()};let lista=JSON.parse(localStorage.getItem('rekkords_lista')||'[]');if(lista.find(i=>i.url===item.url)){alert('\u00a1Ya est\u00e1 en tu lista!');return;}if(lista.length>=5){alert('Tu lista est\u00e1 llena (m\u00e1x. 5).');return;}lista.push(item);localStorage.setItem('rekkords_lista',JSON.stringify(lista));alert('\u2705 Agregado a tu lista');}\n\n  \/* \u2500\u2500 METAL SWEEP \u2500\u2500 *\/\n  const setTitleEl=document.getElementById('setTitle');\n  setInterval(()=>{setTitleEl.classList.remove('sweep');void setTitleEl.offsetWidth;setTitleEl.classList.add('sweep');setTimeout(()=>setTitleEl.classList.remove('sweep'),1800);},20000);\n\n  \/* \u2500\u2500 ELEMENTOS \u2500\u2500 *\/\n  const video=document.getElementById('multicam-video');\n\n  const thumbnail=new Image();\n  thumbnail.crossOrigin='anonymous';\n  thumbnail.src='https:\/\/vz-b1977227-6a0.b-cdn.net\/fbc72a4b-e58c-4a51-aa1a-c36d52ec7ca6\/thumbnail.jpg';\n\n  const HLS_URL='https:\/\/vz-b1977227-6a0.b-cdn.net\/fbc72a4b-e58c-4a51-aa1a-c36d52ec7ca6\/playlist.m3u8';\n  let hlsInstance=null;\n  if(Hls.isSupported()){\n    hlsInstance=new Hls();\n    hlsInstance.loadSource(HLS_URL);\n    hlsInstance.attachMedia(video);\n    hlsInstance.on(Hls.Events.MANIFEST_PARSED,()=>{syncQualityMenu();});\n    hlsInstance.on(Hls.Events.LEVEL_SWITCHED,()=>{syncQualityLabel();});\n  } else if(video.canPlayType('application\/vnd.apple.mpegurl')){video.src=HLS_URL;}\n\n  \/* \u2500\u2500 QUALITY \u2500\u2500 *\/\n  function toggleQualityMenu(){\n    event.stopPropagation();\n    document.getElementById('qualityMenu').classList.toggle('open');\n  }\n  document.addEventListener('click',()=>document.getElementById('qualityMenu').classList.remove('open'));\n\n  function setQuality(p){\n    if(!hlsInstance)return;\n    const levels=hlsInstance.levels;\n    let best=-1, bestDiff=9999;\n    levels.forEach((l,i)=>{const diff=Math.abs(l.height-p);if(diff<bestDiff){bestDiff=diff;best=i;}});\n    if(best>=0){\n      hlsInstance.currentLevel=best;\n      hlsInstance.loadLevel=best;\n    }\n    document.querySelectorAll('.mc-quality-menu button').forEach(b=>{\n      b.classList.toggle('selected', parseInt(b.textContent)===p);\n    });\n    document.getElementById('qualityBtn').textContent=p+'p';\n    document.getElementById('qualityBtn').classList.add('active');\n    document.getElementById('qualityMenu').classList.remove('open');\n  }\n\n  function syncQualityMenu(){\n    \/* siempre mostramos las 3 opciones fijas *\/\n  }\n\n  function syncQualityLabel(){\n    if(!hlsInstance||hlsInstance.currentLevel<0)return;\n    const h=hlsInstance.levels[hlsInstance.currentLevel]?.height;\n    if(h){\n      document.getElementById('qualityBtn').textContent=h+'p';\n      document.getElementById('qualityBtn').classList.add('active');\n    }\n  }\n\n  const canvas=document.getElementById('multicam-canvas');\n  const ctx=canvas.getContext('2d');\n  const videoArea=document.getElementById('videoArea');\n  const playOverlay=document.getElementById('playOverlay');\n  const svgPlay=document.getElementById('svgPlay');\n  const svgPause=document.getElementById('svgPause');\n  const barra=document.getElementById('barra');\n  const tiempo=document.getElementById('tiempo');\n  const iconVolOn=document.getElementById('iconVolOn');\n  const iconVolOff=document.getElementById('iconVolOff');\n  const volSlider=document.getElementById('volSlider');\n  const barraMobile=document.getElementById('barraMobile');\n  const tiempoMobile=document.getElementById('tiempoMobile');\n  const iconVolOnM=document.getElementById('iconVolOnM');\n  const iconVolOffM=document.getElementById('iconVolOffM');\n  const volSliderMobile=document.getElementById('volSliderMobile');\n  const grid=document.getElementById('rekkGrid');\n  const mobileFS=document.getElementById('mobileFS');\n  const fsMobileCanvas=document.getElementById('fsMobileCanvas');\n  const fsCtx=fsMobileCanvas.getContext('2d');\n  const fsControls=document.getElementById('fsControls');\n  const barraFS=document.getElementById('barraFS');\n  const tiempoFS=document.getElementById('tiempoFS');\n  const fsPlay=document.getElementById('fsPlay');\n  const fsPause=document.getElementById('fsPause');\n  const fsVolOn=document.getElementById('fsVolOn');\n  const fsVolOff=document.getElementById('fsVolOff');\n  const volFS=document.getElementById('volFS');\n\n  const angulos={'todos':{sx:0,sy:0,sw:1920,sh:1440},'sup-izq':{sx:0,sy:0,sw:960,sh:720},'sup-der':{sx:960,sy:0,sw:960,sh:720},'inf-izq':{sx:0,sy:720,sw:960,sh:720},'inf-der':{sx:960,sy:720,sw:960,sh:720}};\n  let actual=angulos['todos'];\n  let renderIniciado=false,isPlaying=false,isMobileFS=false,fsControlsTimeout=null;\n\n  const JSON_URL='https:\/\/rekkords.com\/wp-content\/uploads\/rekkords\/rekkords-data.json';\n  const BADGE_CONFIG = {\n    mix: {\n      label: 'Mix',\n      icon: '<svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\"><path d=\"M6.5 0V12M3 2.5V9.5M10 2.5V9.5M0.5 4.5V7.5M12.5 4.5V7.5\" stroke=\"#86FFD3\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg>'\n    },\n    vinyl: {\n      label: 'Vinyl',\n      icon: '<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><circle cx=\"6\" cy=\"6\" r=\"5.4\" stroke=\"#86FFD3\" stroke-width=\"1.2\"\/><circle cx=\"6\" cy=\"6\" r=\"1.6\" fill=\"#86FFD3\"\/><\/svg>'\n    },\n    liveset: {\n      label: 'Liveset',\n      icon: '<svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\"><circle cx=\"6.5\" cy=\"6\" r=\"1.8\" fill=\"#86FFD3\"\/><path d=\"M3.6 3.1C2.6 4 2 5.3 2 6.7C2 8.1 2.6 9.4 3.6 10.3M9.4 3.1C10.4 4 11 5.3 11 6.7C11 8.1 10.4 9.4 9.4 10.3\" stroke=\"#86FFD3\" stroke-width=\"1.1\" stroke-linecap=\"round\"\/><\/svg>'\n    }\n  };\n\n  function buildCard(item){\n    const badge = BADGE_CONFIG[item.tipo] || BADGE_CONFIG.mix;\n    return `<div class=\"mc-rekk-card\">\n      <div class=\"mc-rekk-img\">\n        <img decoding=\"async\" src=\"${item.cover}\" alt=\"${item.dj_name}\" draggable=\"false\">\n        <div class=\"mc-rekk-img-gradient\"><\/div>\n        <div class=\"mc-rekk-badge\">\n          ${badge.icon}\n          ${badge.label}\n        <\/div>\n        <div class=\"mc-rekk-title-block\">\n          <div class=\"mc-rekk-name-row\">\n            <span class=\"mc-rekk-dj\">${item.dj_name}<\/span>\n            <span class=\"mc-rekk-set\">${item.set_name}<\/span>\n            <span class=\"mc-rekk-venue-inimg\">${item.venue}<\/span>\n          <\/div>\n          <div class=\"mc-rekk-play-pill\">\n            <span class=\"mc-rekk-play-circle\"><svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\"><path d=\"M0 0L8 4.5L0 9V0Z\" fill=\"#F5F5F7\"\/><\/svg><\/span>\n            Reproducir\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"mc-rekk-info\">\n        <div class=\"mc-rekk-genres\">\n          <span class=\"mc-rekk-genre-pill\">Mix<\/span>\n          <span class=\"mc-rekk-genre-pill\">Live<\/span>\n          <span class=\"mc-rekk-genre-pill\">Rekkords<\/span>\n        <\/div>\n        <div class=\"mc-rekk-stats-row\">\n          <div class=\"mc-rekk-stat\">\n            <div class=\"mc-rekk-stat-top\">\n              <svg width=\"17\" height=\"14\" viewBox=\"0 0 17 14\" fill=\"none\"><path d=\"M8.5 0C4.5 0 1.5 3 1.5 6.5V10.5C1.5 11.6 2.4 12.5 3.5 12.5H4.5C5.05 12.5 5.5 12.05 5.5 11.5V8.5C5.5 7.95 5.05 7.5 4.5 7.5H3.2C3.6 4.8 5.8 2.7 8.5 2.7C11.2 2.7 13.4 4.8 13.8 7.5H12.5C11.95 7.5 11.5 7.95 11.5 8.5V11.5C11.5 12.05 11.95 12.5 12.5 12.5H13.5C14.6 12.5 15.5 11.6 15.5 10.5V6.5C15.5 3 12.5 0 8.5 0Z\" fill=\"#fff\"\/><\/svg>\n              <span class=\"mc-rekk-stat-num\">${item.followers||'\u2014'}<\/span>\n            <\/div>\n            <span class=\"mc-rekk-stat-label\">Seguidores<\/span>\n          <\/div>\n          <div class=\"mc-rekk-stat-divider\"><\/div>\n          <div class=\"mc-rekk-stat\">\n            <div class=\"mc-rekk-stat-top\">\n              <svg width=\"21\" height=\"14\" viewBox=\"-1.5 -1.5 24 17\" style=\"overflow:visible\" fill=\"none\"><path d=\"M10.5 0C5 0 1 5 0 7C1 9 5 14 10.5 14C16 14 20 9 21 7C20 5 16 0 10.5 0Z\" stroke=\"#fff\" stroke-width=\"1.3\"\/><circle cx=\"10.5\" cy=\"7\" r=\"3\" fill=\"#fff\"\/><\/svg>\n              <span class=\"mc-rekk-stat-num\">${item.views||'\u2014'}<\/span>\n            <\/div>\n            <span class=\"mc-rekk-stat-label\">Vistas<\/span>\n          <\/div>\n          <div class=\"mc-rekk-stat-divider\"><\/div>\n          <div class=\"mc-rekk-venue-stat\">\n            ${item.venue}\n          <\/div>\n        <\/div>\n        <div class=\"mc-rekk-hr\"><\/div>\n        <p class=\"mc-rekk-desc\">${item.description}<\/p>\n      <\/div>\n    <\/div>`;\n  }\n  fetch(JSON_URL).then(r=>r.json()).then(data=>{grid.innerHTML=data.filter(item=>item.status==='activo').map(buildCard).join('');}).catch(()=>{grid.innerHTML='<p style=\"color:var(--text2);padding:16px;\">Cargando rekkomendados...<\/p>';});\n\n  function sizeFSCanvas(){\n    const sw=window.innerWidth,sh=window.innerHeight,dpr=window.devicePixelRatio||1;\n    const aspect=4\/3;\n    let w,h;\n    if(sw\/sh>aspect){h=sh;w=Math.round(h*aspect);}else{w=sw;h=Math.round(w\/aspect);}\n    fsMobileCanvas.width=Math.round(w*dpr);fsMobileCanvas.height=Math.round(h*dpr);\n    fsMobileCanvas.style.width=w+'px';fsMobileCanvas.style.height=h+'px';\n  }\n  function openMobileFS(){\n    isMobileFS=true;\n    sizeFSCanvas();\n    mobileFS.classList.add('active');\n    document.body.style.overflow='hidden';\n    if(screen.orientation&&screen.orientation.lock){screen.orientation.lock('landscape').catch(()=>{});}\n    showFSControls();\n    if(!renderIniciado){renderIniciado=true;render();}\n  }\n  function closeMobileFS(){\n    isMobileFS=false;\n    mobileFS.classList.remove('active');\n    document.body.style.overflow='';\n    if(screen.orientation&&screen.orientation.unlock){screen.orientation.unlock();}\n  }\n  function showFSControls(){fsControls.classList.remove('hidden');clearTimeout(fsControlsTimeout);if(isPlaying)fsControlsTimeout=setTimeout(()=>fsControls.classList.add('hidden'),3000);}\n  mobileFS.addEventListener('click',(e)=>{if(e.target===mobileFS||e.target===fsMobileCanvas){if(fsControls.classList.contains('hidden'))showFSControls();else togglePlayPause();}});\n  window.addEventListener('orientationchange',()=>{\n    setTimeout(()=>{\n      const sw=window.innerWidth, sh=window.innerHeight;\n      const isLandscape=sw>sh;\n      const isMobileDevice=Math.min(sw,sh)<=768;\n      if(isLandscape&&isMobileDevice){\n        if(!isMobileFS)openMobileFS();else sizeFSCanvas();\n      } else if(!isLandscape&&isMobileFS) closeMobileFS();\n    },300);\n  });\n  function setAnguloFS(nombre,btn){actual=angulos[nombre];document.querySelectorAll('.mc-mobile-fs-cam').forEach(b=>b.classList.remove('activo'));btn.classList.add('activo');const idx=['todos','sup-izq','sup-der','inf-izq','inf-der'].indexOf(nombre);const mBtns=document.querySelectorAll('.mc-mobile-cams-wrap button');mBtns.forEach(b=>b.classList.remove('activo'));if(mBtns[idx])mBtns[idx].classList.add('activo');showFSControls();if(video.paused)dibujarFrame();}\n  barraFS.addEventListener('input',()=>{video.currentTime=barraFS.value;showFSControls();});\n  volFS.addEventListener('input',()=>{video.volume=parseFloat(volFS.value);video.muted=volFS.value==0;syncVolIcons();showFSControls();});\n\n  \/* \u2500\u2500 CAROUSEL con inercia \u2500\u2500 *\/\n  \/* \u2500\u2500 TOGGLE Rekkomendados (colapsado\/expandido) \u2500\u2500 *\/\n  \/* \u2500\u2500 TAP FLASH \u2014 dispara el contorno #49A7FF en cualquier bot\u00f3n\/link del widget al click o tap \u2500\u2500 *\/\n  \/* capture:true \u2192 se ejecuta ANTES que cualquier stopPropagation() en botones (cams, play, etc.) *\/\n  document.querySelector('.mc-wrap').addEventListener('click',(e)=>{\n    const el=e.target.closest('button, a');\n    if(!el)return;\n    el.classList.remove('mc-tap-flash');\n    void el.offsetWidth; \/* fuerza reflow para reiniciar la transici\u00f3n *\/\n    el.classList.add('mc-tap-flash');\n    requestAnimationFrame(()=>requestAnimationFrame(()=>{\n      el.classList.remove('mc-tap-flash');\n    }));\n  }, true);\n\n  function toggleRekkomendados(){\n    const section=document.getElementById('rekkomendadosSection');\n    const label=document.getElementById('rekkToggleLabel');\n    const icon=document.getElementById('rekkToggleIcon');\n    const isOpen=section.classList.contains('open');\n    if(isOpen){\n      section.classList.remove('open');\n      label.textContent='Ver m\u00e1s Rekkords';\n      icon.textContent='+';\n    } else {\n      section.classList.add('open');\n      label.textContent='Ver menos Rekkords';\n      icon.textContent='\u2212';\n    }\n  }\n\n  function scrollCarousel(dir){const card=grid.querySelector('.mc-rekk-card');const w=card?card.offsetWidth+8:338;grid.scrollBy({left:dir*w,behavior:'smooth'});}\n  let isDragging=false,startX=0,scrollLeft=0,velX=0,lastX=0,lastT=0,rafMomentum=null;\n  function momentumScroll(){if(Math.abs(velX)<0.5)return;grid.scrollLeft+=velX;velX*=0.92;rafMomentum=requestAnimationFrame(momentumScroll);}\n  grid.addEventListener('mousedown',(e)=>{isDragging=true;startX=e.pageX-grid.offsetLeft;scrollLeft=grid.scrollLeft;velX=0;lastX=e.pageX;lastT=Date.now();cancelAnimationFrame(rafMomentum);grid.classList.add('dragging');grid.style.scrollBehavior='auto';});\n  grid.addEventListener('mousemove',(e)=>{if(!isDragging)return;e.preventDefault();const x=e.pageX-grid.offsetLeft;const now=Date.now();const dt=now-lastT||1;velX=(lastX-e.pageX)\/dt*16;lastX=e.pageX;lastT=now;grid.scrollLeft=scrollLeft-(x-startX);});\n  grid.addEventListener('mouseup',()=>{isDragging=false;grid.classList.remove('dragging');rafMomentum=requestAnimationFrame(momentumScroll);});\n  grid.addEventListener('mouseleave',()=>{if(!isDragging)return;isDragging=false;grid.classList.remove('dragging');rafMomentum=requestAnimationFrame(momentumScroll);});\n  let touchStartX=0,touchScrollLeft=0,touchVelX=0,touchLastX=0,touchLastT=0;\n  grid.addEventListener('touchstart',(e)=>{touchStartX=e.touches[0].pageX;touchScrollLeft=grid.scrollLeft;touchVelX=0;touchLastX=e.touches[0].pageX;touchLastT=Date.now();cancelAnimationFrame(rafMomentum);grid.style.scrollBehavior='auto';},{passive:true});\n  grid.addEventListener('touchmove',(e)=>{const x=e.touches[0].pageX;const now=Date.now();const dt=now-touchLastT||1;touchVelX=(touchLastX-x)\/dt*16;touchLastX=x;touchLastT=now;grid.scrollLeft=touchScrollLeft-(x-touchStartX);},{passive:true});\n  grid.addEventListener('touchend',()=>{velX=touchVelX;rafMomentum=requestAnimationFrame(momentumScroll);});\n\n  function updatePlayIcon(){if(isPlaying){svgPlay.style.display='none';svgPause.style.display='block';playOverlay.classList.add('hidden');fsPlay.style.display='none';fsPause.style.display='block';}else{svgPlay.style.display='block';svgPause.style.display='none';playOverlay.classList.remove('hidden');fsPlay.style.display='block';fsPause.style.display='none';}}\n  function syncVolIcons(){const m=video.muted;iconVolOn.style.display=m?'none':'block';iconVolOff.style.display=m?'block':'none';iconVolOnM.style.display=m?'none':'block';iconVolOffM.style.display=m?'block':'none';fsVolOn.style.display=m?'none':'block';fsVolOff.style.display=m?'block':'none';volSlider.value=m?0:video.volume;volSliderMobile.value=m?0:video.volume;volFS.value=m?0:video.volume;}\n\n  function setupMediaSession(){\n    if(!('mediaSession'in navigator))return;\n    navigator.mediaSession.metadata=new MediaMetadata({\n      title:'Aaround : Waxcid Sound V2',\n      artist:'Rekkords',\n      album:'@ Antrik, San Jos\u00e9',\n      artwork:[\n        {src:'https:\/\/rekkords.com\/wp-content\/uploads\/rekkords\/covers\/cover-001_aaround_waxcid-house-v2.jpg',sizes:'512x512',type:'image\/jpeg'},\n        {src:'https:\/\/rekkords.com\/wp-content\/uploads\/rekkords\/covers\/cover-001_aaround_waxcid-house-v2.jpg',sizes:'256x256',type:'image\/jpeg'}\n      ]\n    });\n    navigator.mediaSession.setActionHandler('play',()=>{\n      video.play().catch(()=>{});\n      isPlaying=true;\n      videoArea.classList.add('playing');\n      navigator.mediaSession.playbackState='playing';\n      updatePlayIcon();\n    });\n    navigator.mediaSession.setActionHandler('pause',()=>{\n      video.pause();\n      isPlaying=false;\n      videoArea.classList.remove('playing');\n      navigator.mediaSession.playbackState='paused';\n      updatePlayIcon();\n    });\n    navigator.mediaSession.setActionHandler('stop',()=>detener());\n    navigator.mediaSession.setActionHandler('seekbackward',()=>{video.currentTime=Math.max(0,video.currentTime-10);});\n    navigator.mediaSession.setActionHandler('seekforward',()=>{video.currentTime=Math.min(video.duration,video.currentTime+10);});\n  }\n\n  \/* \u2500\u2500 VIDEO INTRO GLITCH CURTAIN \u2500\u2500 *\/\n  let introDone=false,introRAF=null;\n  function drawIntroCurtain(){\n    const W=canvas.width,H=canvas.height;\n    const imgData=ctx.createImageData(W,H);const d=imgData.data;\n    for(let i=0;i<d.length;i+=4){const rand=Math.random();const v=rand>0.82?Math.floor(Math.random()*80):0;d[i]=rand>0.995?255:v*0.2;d[i+1]=rand>0.997?220:v*0.1;d[i+2]=rand>0.993?255:v*0.9;d[i+3]=255;}\n    ctx.putImageData(imgData,0,0);\n    const sc=Math.floor(Math.random()*8)+3;\n    for(let s=0;s<sc;s++){const y=Math.floor(Math.random()*H);const h=Math.floor(Math.random()*12)+1;const dx=Math.floor(Math.random()*30)-15;const slice=ctx.getImageData(0,y,W,h);ctx.save();ctx.globalAlpha=0.6;ctx.globalCompositeOperation='screen';ctx.putImageData(slice,dx,y);ctx.restore();}\n    ctx.save();ctx.globalAlpha=0.15;ctx.fillStyle='#000';for(let y=0;y<H;y+=4)ctx.fillRect(0,y,W,2);ctx.restore();\n    const grad=ctx.createRadialGradient(W\/2,H\/2,H*0.2,W\/2,H\/2,H*0.85);grad.addColorStop(0,'rgba(0,0,0,0)');grad.addColorStop(1,'rgba(0,0,0,0.85)');ctx.fillStyle=grad;ctx.fillRect(0,0,W,H);\n    introRAF=requestAnimationFrame(drawIntroCurtain);\n  }\n\n  function startIntroCurtain(){\n    if(introDone)return;introDone=true;\n    drawIntroCurtain();\n\n    \/* GIF como <img> flotante \u2014 no se congela *\/\n    const gifEl=document.createElement('img');\n    gifEl.src='https:\/\/rekkords.com\/wp-content\/uploads\/2026\/06\/rekkords-logo-white.gif?t='+Date.now();\n    gifEl.style.cssText='position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:55%;max-width:500px;z-index:5;pointer-events:none;image-rendering:auto;';\n    videoArea.appendChild(gifEl);\n\n    const fadeEl=document.createElement('div');\n    fadeEl.style.cssText='position:absolute;inset:0;border-radius:24px;background:#000;opacity:0;pointer-events:none;transition:opacity 0.8s ease;z-index:10;';\n    videoArea.appendChild(fadeEl);\n\n    \/* GIF fade out 2s antes de que salga la cortina *\/\n    setTimeout(()=>{\n      gifEl.style.transition='opacity 2s ease';\n      gifEl.style.opacity='0';\n    }, 5400);\n\n    setTimeout(()=>{\n      gifEl.remove();\n\n      \/* wrapper con overflow:hidden que sube \u2014 cropea el canvas glitch *\/\n      const clipWrap=document.createElement('div');\n      clipWrap.style.cssText='position:absolute;inset:0;border-radius:24px;overflow:hidden;z-index:8;pointer-events:none;';\n\n      \/* inner que se mueve hacia abajo \u2014 lleva el canvas glitch adentro *\/\n      const inner=document.createElement('div');\n      inner.style.cssText='position:absolute;inset:0;transform:translateY(0);transition:transform 1.5s cubic-bezier(0.76,0,0.24,1);';\n\n      \/* snapshot del canvas en este momento *\/\n      const snap=document.createElement('canvas');\n      snap.width=canvas.width; snap.height=canvas.height;\n      snap.style.cssText='position:absolute;inset:0;width:100%;height:100%;';\n      snap.getContext('2d').drawImage(canvas,0,0);\n\n      inner.appendChild(snap);\n      clipWrap.appendChild(inner);\n      videoArea.appendChild(clipWrap);\n      fadeEl.remove();\n\n      \/* para el glitch del canvas original *\/\n      cancelAnimationFrame(introRAF);\n      ctx.clearRect(0,0,canvas.width,canvas.height);\n\n      \/* dispara el slide *\/\n      requestAnimationFrame(()=>requestAnimationFrame(()=>{\n        inner.style.transform='translateY(105%)';\n        setTimeout(()=>clipWrap.remove(),1600);\n      }));\n    },7400);\n  }\n\n  function handleVideoClick(){togglePlayPause();}\n  function dibujarFrame(){ctx.drawImage(video,actual.sx,actual.sy,actual.sw,actual.sh,0,0,canvas.width,canvas.height);if(isMobileFS)fsCtx.drawImage(video,actual.sx,actual.sy,actual.sw,actual.sh,0,0,fsMobileCanvas.width,fsMobileCanvas.height);}\n  function formatTiempo(s){if(isNaN(s))return'0:00';return`${Math.floor(s\/60)}:${Math.floor(s%60).toString().padStart(2,'0')}`;}\n  function setAngulo(nombre,btn,isMobile){actual=angulos[nombre];if(isMobile)document.querySelectorAll('.mc-mobile-cams-wrap button').forEach(b=>b.classList.remove('activo'));else document.querySelectorAll('.mc-overlay-top .mc-cam-btn').forEach(b=>b.classList.remove('activo'));btn.classList.add('activo');if(video.paused)dibujarFrame();}\n\n  \/* \u2500\u2500 ATAJOS DE TECLADO \u2500\u2500 *\/\n  const ANGULO_KEYS=['todos','sup-izq','sup-der','inf-izq','inf-der'];\n  function setAnguloGlobal(nombre){\n    actual=angulos[nombre];\n    const idx=ANGULO_KEYS.indexOf(nombre);\n    document.querySelectorAll('.mc-overlay-top .mc-cam-btn').forEach((b,i)=>b.classList.toggle('activo',i===idx));\n    document.querySelectorAll('.mc-mobile-cams-wrap button').forEach((b,i)=>b.classList.toggle('activo',i===idx));\n    document.querySelectorAll('.mc-mobile-fs-cam').forEach((b,i)=>b.classList.toggle('activo',i===idx));\n    if(video.paused)dibujarFrame();\n  }\n  document.addEventListener('keydown',(e)=>{\n    const tag=(e.target.tagName||'').toLowerCase();\n    if(tag==='input'||tag==='textarea')return; \/* no interferir con los sliders *\/\n    switch(e.key.toLowerCase()){\n      case 'f': toggleFullscreen(); break;\n      case 'p': togglePlayPause(); break;\n      case ' ': e.preventDefault(); togglePlayPause(); break;\n      case 's': detener(); break;\n      case '5': setAnguloGlobal('todos'); break;\n      case '1': setAnguloGlobal('sup-izq'); break;\n      case '2': setAnguloGlobal('sup-der'); break;\n      case '3': setAnguloGlobal('inf-izq'); break;\n      case '4': setAnguloGlobal('inf-der'); break;\n      case 'm': toggleVolumen(); break;\n      case 'arrowright': video.currentTime=Math.min(video.duration||0,video.currentTime+5); break;\n      case 'arrowleft': video.currentTime=Math.max(0,video.currentTime-5); break;\n      case 'arrowup': e.preventDefault(); video.muted=false; video.volume=Math.min(1,video.volume+0.1); syncVolIcons(); break;\n      case 'arrowdown': e.preventDefault(); video.volume=Math.max(0,video.volume-0.1); if(video.volume===0)video.muted=true; syncVolIcons(); break;\n    }\n  });\n\n  function togglePlayPause(){if(video.paused){video.play();if(!renderIniciado){renderIniciado=true;render();}startIntroCurtain();isPlaying=true;videoArea.classList.add('playing');if('mediaSession'in navigator)navigator.mediaSession.playbackState='playing';}else{video.pause();isPlaying=false;videoArea.classList.remove('playing');if('mediaSession'in navigator)navigator.mediaSession.playbackState='paused';}updatePlayIcon();if(isMobileFS)showFSControls();resetFsIdle();}\n  function detener(){video.pause();video.currentTime=0;isPlaying=false;videoArea.classList.remove('playing');ctx.clearRect(0,0,canvas.width,canvas.height);if(isMobileFS)fsCtx.clearRect(0,0,fsMobileCanvas.width,fsMobileCanvas.height);if('mediaSession'in navigator)navigator.mediaSession.playbackState='none';updatePlayIcon();resetFsIdle();}\n  function toggleFullscreen(){if(!document.fullscreenElement){videoArea.requestFullscreen&&videoArea.requestFullscreen();videoArea.webkitRequestFullscreen&&videoArea.webkitRequestFullscreen();}else{document.exitFullscreen&&document.exitFullscreen();document.webkitExitFullscreen&&document.webkitExitFullscreen();}}\n\n  \/* \u2500\u2500 FULLSCREEN IDLE \u2014 el mouse no puede \"salir\" del \u00e1rea en fullscreen, as\u00ed que :hover no sirve para esconder el overlay \u2500\u2500 *\/\n  let fsIdleTimeout=null;\n  function resetFsIdle(){\n    videoArea.classList.remove('fs-idle');\n    clearTimeout(fsIdleTimeout);\n    if(isPlaying&&document.fullscreenElement){\n      fsIdleTimeout=setTimeout(()=>videoArea.classList.add('fs-idle'),3000);\n    }\n  }\n  document.addEventListener('fullscreenchange',()=>{\n    if(document.fullscreenElement){\n      videoArea.addEventListener('mousemove',resetFsIdle);\n      videoArea.addEventListener('click',resetFsIdle);\n      resetFsIdle();\n    } else {\n      videoArea.removeEventListener('mousemove',resetFsIdle);\n      videoArea.removeEventListener('click',resetFsIdle);\n      clearTimeout(fsIdleTimeout);\n      videoArea.classList.remove('fs-idle');\n    }\n  });\n  document.addEventListener('webkitfullscreenchange',()=>{\n    if(document.webkitFullscreenElement){\n      videoArea.addEventListener('mousemove',resetFsIdle);\n      videoArea.addEventListener('click',resetFsIdle);\n      resetFsIdle();\n    } else {\n      videoArea.removeEventListener('mousemove',resetFsIdle);\n      videoArea.removeEventListener('click',resetFsIdle);\n      clearTimeout(fsIdleTimeout);\n      videoArea.classList.remove('fs-idle');\n    }\n  });\n  function toggleVolumen(){video.muted=!video.muted;syncVolIcons();if(isMobileFS)showFSControls();}\n  function updateVolSliders(val,muted){video.volume=parseFloat(val);video.muted=muted;syncVolIcons();}\n  volSliderMobile.addEventListener('input',()=>updateVolSliders(volSliderMobile.value,volSliderMobile.value==0));\n\n  function updateBarras(current,duration){const t=`${formatTiempo(current)} \/ ${formatTiempo(duration)}`;barra.value=current;tiempo.textContent=t;barraMobile.value=current;tiempoMobile.textContent=t;barraFS.value=current;tiempoFS.textContent=t;}\n  video.addEventListener('timeupdate',()=>{updateBarras(video.currentTime,video.duration);if('mediaSession'in navigator&&!isNaN(video.duration)){navigator.mediaSession.setPositionState({duration:video.duration,playbackRate:video.playbackRate,position:video.currentTime});}});\n  video.addEventListener('loadedmetadata',()=>{barra.max=video.duration;barraMobile.max=video.duration;barraFS.max=video.duration;setupMediaSession();});\n  video.addEventListener('canplay',()=>{if(video.videoWidth>=1920)dibujarFrame();});\n  thumbnail.onload=()=>{ctx.drawImage(thumbnail,0,0,canvas.width,canvas.height);};\n  barraMobile.addEventListener('input',()=>{video.currentTime=barraMobile.value;});\n  video.addEventListener('seeked',()=>{if(video.paused)dibujarFrame();});\n\n  function render(){if(!video.paused&&!video.ended)dibujarFrame();requestAnimationFrame(render);}\n  updatePlayIcon();\n\n  \/* \u2500\u2500 BACKGROUND AUDIO \u2014 evita que la pantalla apagada pause el video \u2500\u2500 *\/\n  document.addEventListener('visibilitychange',()=>{\n    if(document.hidden&&isPlaying){\n      video.play().catch(()=>{});\n    } else if(!document.hidden&&isPlaying){\n      video.play().catch(()=>{});\n    }\n  });\n\n  \/* \u2500\u2500 MEDIA SESSION completo para Android\/iOS \u2500\u2500 *\/\n  let audioCtx=null;\n  function activateAudioSession(){\n    if(audioCtx)return;\n    try{\n      audioCtx=new(window.AudioContext||window.webkitAudioContext)();\n      const src=audioCtx.createMediaElementSource(video);\n      src.connect(audioCtx.destination);\n      if(audioCtx.state==='suspended')audioCtx.resume();\n    }catch(e){}\n  }\n  video.addEventListener('play',()=>{\n    activateAudioSession();\n    if(!('mediaSession'in navigator))return;\n    navigator.mediaSession.playbackState='playing';\n    if(audioCtx&&audioCtx.state==='suspended')audioCtx.resume();\n  });\n  video.addEventListener('pause',()=>{\n    if(!('mediaSession'in navigator))return;\n    if(isPlaying){\n      \/* Android paus\u00f3 el video \u2014 intentar reanudar *\/\n      setTimeout(()=>{if(isPlaying&&video.paused)video.play().catch(()=>{});},300);\n    } else {\n      navigator.mediaSession.playbackState='paused';\n    }\n  });\n\n  \/* Re-setup mediaSession al cambiar visibilidad *\/\n  document.addEventListener('visibilitychange',()=>{\n    if(!document.hidden&&isPlaying){\n      setupMediaSession();\n      video.play().catch(()=>{});\n    }\n  });\n\n  \/* Keep AudioContext alive con silencio peri\u00f3dico *\/\n  setInterval(()=>{\n    if(audioCtx&&audioCtx.state==='suspended')audioCtx.resume();\n  },10000);\n<\/script>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u229e All \u25a3 Cam 1 \u25a3 Cam 2 \u25a3 Cam 3 \u25a3 Cam 4 0:00 \/ 0:00 \u229e All Cams \u25a3 Cam 1 \u25a3 Cam 2 \u25a3 Cam 3 \u25a3 Cam 4 \u229e All Cams \u25a3 Cam 1 \u25a3 Cam 2 \u25a3 Cam 3 \u25a3 Cam 4 0:00 \/ 0:00 AUTO 1080p 1440p 0:00 \/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rekkords.com\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rekkords.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rekkords.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rekkords.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rekkords.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":5,"href":"https:\/\/rekkords.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":352,"href":"https:\/\/rekkords.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/352"}],"wp:attachment":[{"href":"https:\/\/rekkords.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}