Gol\u00f3metro \u2014 Top 10 en Vivo<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@400;700;900&family=Barlow:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n<style>\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --green: #8eb713;\n --green-l: #a3cc1a;\n --blue-d: #00477f;\n --blue-m: #05779b;\n --blue-l: #5ba4c5;\n --gold: #f5c518;\n --silver: #b8c8d4;\n --bronze: #cd7f32;\n --bg: #000d1c;\n}\n\nhtml, body {\n width: 100%; height: 100%;\n overflow: hidden;\n background: var(--bg);\n font-family: 'Barlow Condensed', sans-serif;\n color: #fff;\n -webkit-font-smoothing: antialiased;\n}\n\n\/* \u2500\u2500\u2500 BACKGROUND \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#bg-canvas {\n position: fixed; inset: 0; z-index: 0;\n width: 100%; height: 100%;\n}\n.bg-glow {\n position: fixed; inset: 0; z-index: 1; pointer-events: none;\n background:\n radial-gradient(ellipse 70% 55% at 20% 50%, rgba(0,71,127,0.30) 0%, transparent 65%),\n radial-gradient(ellipse 55% 45% at 80% 20%, rgba(5,119,155,0.20) 0%, transparent 60%),\n radial-gradient(ellipse 40% 50% at 75% 90%, rgba(142,183,19,0.10) 0%, transparent 60%);\n}\n.scanlines {\n position: fixed; inset: 0; z-index: 2; pointer-events: none;\n background: repeating-linear-gradient(\n 0deg, transparent, transparent 3px,\n rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px\n );\n}\n\n\/* \u2500\u2500\u2500 SCREEN GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.screen {\n position: relative; z-index: 3;\n width: 100vw; height: 100vh;\n display: grid;\n grid-template-rows: 78px 44px 1fr 48px;\n overflow: hidden;\n}\n\n\/* \u2500\u2500\u2500 ROW 1: TOP NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.top-nav {\n display: flex; align-items: center;\n padding: 0 40px;\n background: rgba(0,8,20,0.75);\n backdrop-filter: blur(8px);\n border-bottom: 1px solid rgba(255,255,255,0.06);\n gap: 0;\n}\n.logo-wrap { display:flex; align-items:center; flex-shrink:0; width:210px; }\n.logo-svg { height:44px; width:auto; display:block; }\n\n.nav-center { flex:1; text-align:center; }\n.nav-title {\n font-size: clamp(26px, 3.2vw, 52px);\n font-weight: 900; text-transform: uppercase; letter-spacing:.06em; line-height:1;\n}\n.nav-title .hi { color:var(--green); }\n.nav-sub {\n font-size:clamp(10px,.9vw,14px); letter-spacing:.2em;\n text-transform:uppercase; color:rgba(255,255,255,.35); margin-top:2px;\n}\n\n.nav-right {\n display:flex; align-items:center; gap:16px;\n flex-shrink:0; width:210px; justify-content:flex-end;\n}\n.live-badge {\n display:flex; align-items:center; gap:7px;\n background:rgba(142,183,19,0.14);\n border:1px solid rgba(142,183,19,0.40);\n padding:5px 14px; border-radius:20px;\n}\n.live-dot {\n width:7px; height:7px; border-radius:50%; background:var(--green);\n animation:ldot 1.4s ease-in-out infinite;\n}\n@keyframes ldot{\n 0%,100%{box-shadow:0 0 0 0 rgba(142,183,19,0.6);opacity:1}\n 50%{box-shadow:0 0 0 5px rgba(142,183,19,0);opacity:.7}\n}\n.live-txt {\n font-size:clamp(10px,.9vw,13px); font-weight:700;\n letter-spacing:.12em; text-transform:uppercase; color:var(--green-l);\n}\n.clock-wrap { text-align:right; }\n.clock-time {\n font-size:clamp(20px,2vw,30px); font-weight:900;\n color:rgba(255,255,255,.85); letter-spacing:.04em; line-height:1;\n}\n.clock-date {\n font-size:clamp(9px,.75vw,11px); color:rgba(255,255,255,.3);\n letter-spacing:.1em; text-transform:uppercase; margin-top:2px;\n}\n\n\/* \u2500\u2500\u2500 ROW 2: EVENT BAND \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.event-band {\n display:flex; align-items:center; justify-content:space-between;\n padding:0 40px;\n background:linear-gradient(90deg,\n rgba(0,71,127,.60) 0%, rgba(5,119,155,.35) 50%, rgba(142,183,19,.15) 100%);\n border-bottom:1px solid rgba(255,255,255,.06);\n}\n.event-left { display:flex; align-items:center; gap:14px; }\n.brand-slot {\n display:flex; align-items:center; gap:8px;\n border:1.5px dashed rgba(255,255,255,.22);\n padding:4px 14px; border-radius:6px;\n font-size:clamp(10px,.9vw,13px); font-weight:700;\n letter-spacing:.12em; text-transform:uppercase;\n color:rgba(255,255,255,.35);\n}\n.sep { width:1px; height:20px; background:rgba(255,255,255,.14); }\n.event-name {\n font-size:clamp(11px,1.1vw,16px); font-weight:700;\n letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5);\n}\n.event-stats { display:flex; gap:8px; }\n.estat {\n background:rgba(255,255,255,.06);\n border:1px solid rgba(255,255,255,.1);\n padding:3px 12px; border-radius:6px; text-align:center;\n}\n.estat-n {\n font-size:clamp(14px,1.5vw,22px); font-weight:900; color:var(--green); line-height:1;\n}\n.estat-l {\n font-size:clamp(8px,.68vw,10px); font-weight:400;\n letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3);\n}\n\n\/* \u2500\u2500\u2500 ROW 3: MAIN RANKING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.ranking-grid {\n display:grid; grid-template-columns:42% 58%;\n min-height:0; overflow:hidden;\n}\n\n\/* LEFT \u2014 podio #1 *\/\n.podium {\n padding:18px 26px 18px 44px;\n display:flex; flex-direction:column; justify-content:center;\n border-right:1px solid rgba(255,255,255,.07);\n position:relative; overflow:hidden;\n}\n.podium::after {\n content:'1';\n position:absolute; right:-8px; bottom:-20px;\n font-size:clamp(180px,20vw,280px); font-weight:900;\n color:rgba(245,197,24,.035); line-height:1;\n pointer-events:none; user-select:none;\n}\n.podium::before {\n content:'';\n position:absolute; left:-80px; top:50%; transform:translateY(-50%);\n width:400px; height:400px; border-radius:50%;\n background:radial-gradient(circle,rgba(0,71,127,.25) 0%,transparent 70%);\n pointer-events:none;\n}\n\n.podium-crown {\n font-size:clamp(24px,2.8vw,44px); margin-bottom:6px;\n filter:drop-shadow(0 0 18px rgba(245,197,24,.7));\n animation:crownFloat 3s ease-in-out infinite;\n width:fit-content; position:relative; z-index:1;\n}\n@keyframes crownFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}\n\n.podium-badge {\n display:inline-flex; align-items:center; gap:7px;\n background:rgba(245,197,24,.12); border:1px solid rgba(245,197,24,.4);\n padding:4px 14px; border-radius:20px;\n margin-bottom:10px; width:fit-content; position:relative; z-index:1;\n}\n.podium-badge span {\n font-size:clamp(10px,.9vw,13px); font-weight:700;\n letter-spacing:.12em; text-transform:uppercase; color:var(--gold);\n}\n\n.podium-name {\n font-size:clamp(32px,4vw,66px); font-weight:900;\n text-transform:uppercase; line-height:.95;\n color:#fff; margin-bottom:4px;\n text-shadow:0 0 50px rgba(245,197,24,.18);\n word-break:break-word; position:relative; z-index:1;\n}\n.podium-db {\n font-size:clamp(60px,7.5vw,108px); font-weight:900;\n line-height:1; color:var(--green);\n text-shadow:0 0 60px rgba(142,183,19,.4);\n letter-spacing:-.02em; position:relative; z-index:1;\n}\n.podium-unit {\n font-size:clamp(12px,1.3vw,20px); font-weight:400;\n color:rgba(255,255,255,.4); letter-spacing:.1em;\n text-transform:uppercase; margin-bottom:12px; position:relative; z-index:1;\n}\n.podium-bar-bg {\n background:rgba(255,255,255,.08); border-radius:5px;\n height:8px; overflow:hidden; margin-bottom:8px; position:relative; z-index:1;\n}\n.podium-bar-fill {\n height:100%; border-radius:5px;\n background:linear-gradient(90deg,var(--green),var(--blue-m),var(--gold));\n transition:width 1.2s cubic-bezier(.4,0,.2,1);\n}\n.podium-meta {\n font-size:clamp(10px,.85vw,13px); color:rgba(255,255,255,.3);\n letter-spacing:.07em; position:relative; z-index:1;\n}\n\n\/* RIGHT \u2014 positions 2-10 *\/\n.list-side {\n padding:8px 34px 8px 22px;\n display:flex; flex-direction:column;\n gap:3px; justify-content:center;\n overflow:hidden; min-height:0;\n}\n\n.rrow {\n display:grid;\n grid-template-columns:44px 1fr auto;\n align-items:center; gap:12px;\n padding:9px 14px;\n border-radius:8px;\n background:rgba(255,255,255,.03);\n border:1px solid rgba(255,255,255,.05);\n position:relative; overflow:hidden;\n flex-shrink:0;\n animation:rowIn .5s ease both;\n}\n.rrow::before {\n content:''; position:absolute; left:0; top:0; bottom:0;\n width:3px; border-radius:3px 0 0 3px; background:transparent;\n}\n.rrow.p2 { border-color:rgba(184,200,212,.2); }\n.rrow.p2::before { background:var(--silver); }\n.rrow.p3 { border-color:rgba(205,127,50,.2); }\n.rrow.p3::before { background:var(--bronze); }\n.rrow-bar {\n position:absolute; bottom:0; left:0; right:0; height:2px;\n background:rgba(255,255,255,.04);\n}\n.rrow-bar-fill {\n height:100%;\n background:linear-gradient(90deg,var(--green),var(--blue-m));\n transition:width 1.2s ease;\n}\n@keyframes rowIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}\n.rrow:nth-child(1){animation-delay:.04s}.rrow:nth-child(2){animation-delay:.08s}\n.rrow:nth-child(3){animation-delay:.12s}.rrow:nth-child(4){animation-delay:.16s}\n.rrow:nth-child(5){animation-delay:.20s}.rrow:nth-child(6){animation-delay:.24s}\n.rrow:nth-child(7){animation-delay:.28s}.rrow:nth-child(8){animation-delay:.32s}\n.rrow:nth-child(9){animation-delay:.36s}\n\n.rrow-pos {\n font-size:clamp(18px,2vw,30px); font-weight:900;\n text-align:center; color:rgba(255,255,255,.22); line-height:1;\n}\n.rrow.p2 .rrow-pos { color:var(--silver); }\n.rrow.p3 .rrow-pos { color:var(--bronze); }\n.rrow-info { min-width:0; }\n.rrow-name {\n font-size:clamp(13px,1.5vw,22px); font-weight:700;\n text-transform:uppercase; white-space:nowrap;\n overflow:hidden; text-overflow:ellipsis; color:#fff; line-height:1.1;\n}\n.rrow-ago {\n font-size:clamp(8px,.7vw,11px); color:rgba(255,255,255,.28);\n letter-spacing:.1em; text-transform:uppercase; margin-top:1px;\n}\n.rrow-score { text-align:right; flex-shrink:0; }\n.rrow-db {\n font-size:clamp(18px,2.2vw,34px); font-weight:900;\n color:var(--blue-l); line-height:1;\n}\n.rrow.p2 .rrow-db { color:var(--silver); }\n.rrow.p3 .rrow-db { color:var(--bronze); }\n.rrow-unit {\n font-size:clamp(7px,.65vw,10px); color:rgba(255,255,255,.28);\n letter-spacing:.1em; text-transform:uppercase;\n}\n\n\/* \u2500\u2500\u2500 ROW 4: TICKER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.ticker {\n display:flex; align-items:center;\n border-top:1px solid rgba(255,255,255,.07);\n background:rgba(0,8,20,.8);\n overflow:hidden; flex-shrink:0;\n}\n.ticker-tag {\n flex-shrink:0; background:var(--blue-m); height:100%; padding:0 18px;\n display:flex; align-items:center;\n font-size:clamp(10px,.9vw,13px); font-weight:700;\n letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;\n}\n.ticker-track { flex:1; overflow:hidden; }\n.ticker-inner {\n display:flex; align-items:center; white-space:nowrap;\n animation:tick 30s linear infinite;\n}\n@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}\n.tick-item {\n display:inline-flex; align-items:center; gap:9px;\n padding:0 28px; font-size:clamp(11px,1vw,15px); font-weight:600;\n color:rgba(255,255,255,.5);\n border-right:1px solid rgba(255,255,255,.07);\n}\n.tick-item .tn { color:#fff; }\n.tick-item .td { color:var(--green); font-weight:900; }\n<\/style>\n<\/head>\n<body>\n\n<canvas id=\"bg-canvas\"><\/canvas>\n<div class=\"bg-glow\"><\/div>\n<div class=\"scanlines\"><\/div>\n\n<div class=\"screen\">\n\n \n <div class=\"top-nav\">\n\n \n <div class=\"logo-wrap\">\n <svg class=\"logo-svg\" viewBox=\"0 0 230 58\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n \n <path d=\"M 4 6 L 4 52 L 14 52 L 14 36 L 24 36\n C 36 36 44 28 44 21 C 44 13 36 6 24 6 Z\n M 14 14 L 24 14 C 30 14 34 17 34 21\n C 34 25 30 28 24 28 L 14 28 Z\"\n fill=\"#00477f\"\/>\n \n <path d=\"M 14 14 L 28 14 C 34 14 38 17 38 21\n C 38 25 34 28 28 28 L 14 28 Z\"\n fill=\"#05779b\"\/>\n <ellipse cx=\"28\" cy=\"21\" rx=\"9\" ry=\"7\" fill=\"#5ba4c5\" opacity=\".55\"\/>\n \n <text x=\"52\" y=\"40\"\n font-family=\"'Barlow Condensed',Arial,sans-serif\"\n font-weight=\"900\" font-size=\"38\" fill=\"#ffffff\" letter-spacing=\"0.5\">rofile<\/text>\n \n <text x=\"52\" y=\"54\"\n font-family=\"'Barlow Condensed',Arial,sans-serif\"\n font-weight=\"400\" font-size=\"11\" fill=\"rgba(255,255,255,0.42)\" letter-spacing=\"3.5\">INTERACTIVE MEDIA<\/text>\n \n <g transform=\"translate(218,4)\">\n <circle r=\"5\" fill=\"none\" stroke=\"#8eb713\" stroke-width=\"1.2\"\/>\n <text x=\"-3\" y=\"3.5\" font-family=\"Arial,sans-serif\" font-size=\"7\" fill=\"#8eb713\">R<\/text>\n <\/g>\n <\/svg>\n <\/div>\n\n <div class=\"nav-center\">\n <div class=\"nav-title\">TOP <span class=\"hi\">10<\/span> \u2014 GOL\u00d3METRO<\/div>\n <div class=\"nav-sub\">Ranking en Vivo \u00b7 Tu Marca Aqu\u00ed<\/div>\n <\/div>\n\n <div class=\"nav-right\">\n <div class=\"live-badge\">\n <div class=\"live-dot\"><\/div>\n <span class=\"live-txt\">En Vivo<\/span>\n <\/div>\n <div class=\"clock-wrap\">\n <div class=\"clock-time\" id=\"clock\">00:00:00<\/div>\n <div class=\"clock-date\" id=\"clockDate\">\u2014<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"event-band\">\n <div class=\"event-left\">\n <div class=\"brand-slot\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\n <rect x=\".65\" y=\".65\" width=\"11.7\" height=\"11.7\" rx=\"2.2\"\n stroke=\"rgba(255,255,255,.3)\" stroke-width=\"1.3\" stroke-dasharray=\"3 2\"\/>\n <path d=\"M3.5 6.5h6M6.5 3.5v6\"\n stroke=\"rgba(255,255,255,.3)\" stroke-width=\"1.3\" stroke-linecap=\"round\"\/>\n <\/svg>\n Tu Logo Aqu\u00ed\n <\/div>\n <div class=\"sep\"><\/div>\n <div class=\"event-name\">Nombre del Evento 2026<\/div>\n <\/div>\n <div class=\"event-stats\">\n <div class=\"estat\">\n <div class=\"estat-n\" id=\"sPart\">247<\/div>\n <div class=\"estat-l\">Participantes<\/div>\n <\/div>\n <div class=\"estat\">\n <div class=\"estat-n\" id=\"sMax\">94<\/div>\n <div class=\"estat-l\">M\u00e1x. dB<\/div>\n <\/div>\n <div class=\"estat\">\n <div class=\"estat-n\" id=\"sAvg\">76<\/div>\n <div class=\"estat-l\">Promedio<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ranking-grid\">\n\n \n <div class=\"podium\">\n <div class=\"podium-crown\">\ud83d\udc51<\/div>\n <div class=\"podium-badge\"><span>\ud83e\udd47 Lugar #1 \u2014 L\u00edder<\/span><\/div>\n <div class=\"podium-name\" id=\"p1name\">Carlos M\u00e9ndez<\/div>\n <div class=\"podium-db\" id=\"p1db\">92<\/div>\n <div class=\"podium-unit\">Decibeles<\/div>\n <div class=\"podium-bar-bg\">\n <div class=\"podium-bar-fill\" id=\"p1bar\" style=\"width:97%\"><\/div>\n <\/div>\n <div class=\"podium-meta\" id=\"p1meta\">Registrado hace 4 min \u00b7 Grito l\u00edder de la noche<\/div>\n <\/div>\n\n \n <div class=\"list-side\" id=\"listSide\"><\/div>\n\n <\/div>\n\n \n <div class=\"ticker\">\n <div class=\"ticker-tag\">\ud83c\udf99\ufe0f Gol\u00f3metro en Vivo<\/div>\n <div class=\"ticker-track\">\n <div class=\"ticker-inner\" id=\"tickerInner\"><\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n\/* \u2500\u2500\u2500 DATA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst players = [\n {name:'Carlos M\u00e9ndez', db:92, ago:'4 min'},\n {name:'Ana Garc\u00eda', db:88, ago:'7 min'},\n {name:'Miguel Torres', db:85, ago:'11 min'},\n {name:'Luc\u00eda Ram\u00edrez', db:81, ago:'14 min'},\n {name:'Jos\u00e9 P\u00e9rez', db:79, ago:'18 min'},\n {name:'Sof\u00eda Morales', db:77, ago:'21 min'},\n {name:'Andr\u00e9s L\u00f3pez', db:74, ago:'25 min'},\n {name:'Valeria Cruz', db:72, ago:'28 min'},\n {name:'Diego Hern\u00e1ndez', db:69, ago:'33 min'},\n {name:'Mariana Vega', db:67, ago:'38 min'},\n];\nconst medals = ['\ud83e\udd47','\ud83e\udd48','\ud83e\udd49'];\nconst posCls = ['','p2','p3','','','','','','',''];\n\n\/* \u2500\u2500\u2500 STAR CANVAS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n(function(){\n const c = document.getElementById('bg-canvas');\n const ctx = c.getContext('2d');\n let stars = [];\n function resize(){\n c.width = innerWidth; c.height = innerHeight;\n stars = Array.from({length:130},()=>({\n x:Math.random()*c.width, y:Math.random()*c.height,\n r:Math.random()*1.1+0.2, a:Math.random()*Math.PI*2,\n sp:Math.random()*0.35+0.08\n }));\n }\n function draw(){\n ctx.clearRect(0,0,c.width,c.height);\n stars.forEach(s=>{\n s.a += s.sp*0.01;\n ctx.globalAlpha = (Math.sin(s.a)+1)\/2*0.45+0.04;\n ctx.fillStyle = '#fff';\n ctx.beginPath(); ctx.arc(s.x,s.y,s.r,0,Math.PI*2); ctx.fill();\n });\n ctx.globalAlpha=1;\n requestAnimationFrame(draw);\n }\n window.addEventListener('resize',resize);\n resize(); draw();\n})();\n\n\/* \u2500\u2500\u2500 CLOCK \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction tick(){\n const n = new Date();\n document.getElementById('clock').textContent = n.toLocaleTimeString('es-GT',{hour12:false});\n document.getElementById('clockDate').textContent =\n n.toLocaleDateString('es-GT',{weekday:'long',day:'numeric',month:'long'});\n}\ntick(); setInterval(tick,1000);\n\n\/* \u2500\u2500\u2500 RENDER LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction renderList(){\n const side = document.getElementById('listSide');\n const maxDB = Math.max(...players.map(p=>p.db));\n side.innerHTML = '';\n players.slice(1).forEach((p,i)=>{\n const pos = i+2;\n const pct = Math.round(p.db\/maxDB*100);\n const d = document.createElement('div');\n d.className = `rrow ${posCls[i+1]||''}`;\n d.innerHTML = `\n <div class=\"rrow-pos\">${medals[i+1]||pos}<\/div>\n <div class=\"rrow-info\">\n <div class=\"rrow-name\">${p.name}<\/div>\n <div class=\"rrow-ago\">hace ${p.ago}<\/div>\n <\/div>\n <div class=\"rrow-score\">\n <div class=\"rrow-db\">${p.db}<\/div>\n <div class=\"rrow-unit\">dB<\/div>\n <\/div>\n <div class=\"rrow-bar\"><div class=\"rrow-bar-fill\" style=\"width:${pct}%\"><\/div><\/div>`;\n side.appendChild(d);\n });\n}\nrenderList();\n\n\/* \u2500\u2500\u2500 RENDER TICKER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction renderTicker(){\n const all = [...players,...players];\n document.getElementById('tickerInner').innerHTML =\n all.map((p,i)=>`\n <div class=\"tick-item\">\n <span>${medals[i%10]||'#'+(i%10+1)}<\/span>\n <span class=\"tn\">${p.name}<\/span>\n <span class=\"td\">${p.db} dB<\/span>\n <\/div>`).join('');\n}\nrenderTicker();\n\n\/* \u2500\u2500\u2500 UPDATE PODIUM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction updatePodium(){\n const p = players[0];\n const maxDB = Math.max(...players.map(q=>q.db));\n document.getElementById('p1name').textContent = p.name;\n document.getElementById('p1db').textContent = p.db;\n document.getElementById('p1bar').style.width = Math.round(p.db\/maxDB*100)+'%';\n document.getElementById('p1meta').textContent =\n `Registrado hace ${p.ago} \u00b7 Grito l\u00edder de la noche`;\n}\n\n\/* \u2500\u2500\u2500 LIVE SIMULATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nlet partCount = 247;\nsetInterval(()=>{\n const idx = Math.floor(Math.random()*players.length);\n players[idx].db = Math.min(99,Math.max(55,players[idx].db+Math.floor(Math.random()*5)-2));\n players[idx].ago = Math.random()>.5 ? 'ahora' : `${Math.ceil(Math.random()*4)} min`;\n players.sort((a,b)=>b.db-a.db);\n updatePodium(); renderList(); renderTicker();\n partCount += Math.floor(Math.random()*3);\n document.getElementById('sPart').textContent = partCount;\n document.getElementById('sMax').textContent = Math.max(...players.map(p=>p.db));\n document.getElementById('sAvg').textContent =\n Math.round(players.reduce((s,p)=>s+p.db,0)\/players.length);\n}, 7000);\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Gol\u00f3metro \u2014 Top 10 en Vivo rofile INTERACTIVE MEDIA R TOP 10 \u2014 GOL\u00d3METRO Ranking en Vivo \u00b7 Tu Marca Aqu\u00ed En Vivo 00:00:00 \u2014 Tu Logo Aqu\u00ed Nombre del Evento 2026 247 Participantes 94 M\u00e1x. dB 76 Promedio \ud83d\udc51 \ud83e\udd47 Lugar #1 \u2014 L\u00edder Carlos M\u00e9ndez 92 Decibeles Registrado hace 4 min \u00b7 Grito […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"pantalla","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/profileim.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=33"}],"version-history":[{"count":3,"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/profileim.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":33,"date":"2026-04-30T23:49:48","date_gmt":"2026-04-30T23:49:48","guid":{"rendered":"https:\/\/profileim.tech\/?page_id=33"},"modified":"2026-05-01T00:06:39","modified_gmt":"2026-05-01T00:06:39","slug":"top-10-golometros","status":"publish","type":"page","link":"https:\/\/profileim.tech\/?page_id=33","title":{"rendered":"TOP 10 – Golometros"},"content":{"rendered":"\n\n\n\n\n\nGol\u00f3metro \u2014 Top 10 en Vivo<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@400;700;900&family=Barlow:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n<style>\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --green: #8eb713;\n --green-l: #a3cc1a;\n --blue-d: #00477f;\n --blue-m: #05779b;\n --blue-l: #5ba4c5;\n --gold: #f5c518;\n --silver: #b8c8d4;\n --bronze: #cd7f32;\n --bg: #000d1c;\n}\n\nhtml, body {\n width: 100%; height: 100%;\n overflow: hidden;\n background: var(--bg);\n font-family: 'Barlow Condensed', sans-serif;\n color: #fff;\n -webkit-font-smoothing: antialiased;\n}\n\n\/* \u2500\u2500\u2500 BACKGROUND \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#bg-canvas {\n position: fixed; inset: 0; z-index: 0;\n width: 100%; height: 100%;\n}\n.bg-glow {\n position: fixed; inset: 0; z-index: 1; pointer-events: none;\n background:\n radial-gradient(ellipse 70% 55% at 20% 50%, rgba(0,71,127,0.30) 0%, transparent 65%),\n radial-gradient(ellipse 55% 45% at 80% 20%, rgba(5,119,155,0.20) 0%, transparent 60%),\n radial-gradient(ellipse 40% 50% at 75% 90%, rgba(142,183,19,0.10) 0%, transparent 60%);\n}\n.scanlines {\n position: fixed; inset: 0; z-index: 2; pointer-events: none;\n background: repeating-linear-gradient(\n 0deg, transparent, transparent 3px,\n rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px\n );\n}\n\n\/* \u2500\u2500\u2500 SCREEN GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.screen {\n position: relative; z-index: 3;\n width: 100vw; height: 100vh;\n display: grid;\n grid-template-rows: 78px 44px 1fr 48px;\n overflow: hidden;\n}\n\n\/* \u2500\u2500\u2500 ROW 1: TOP NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.top-nav {\n display: flex; align-items: center;\n padding: 0 40px;\n background: rgba(0,8,20,0.75);\n backdrop-filter: blur(8px);\n border-bottom: 1px solid rgba(255,255,255,0.06);\n gap: 0;\n}\n.logo-wrap { display:flex; align-items:center; flex-shrink:0; width:210px; }\n.logo-svg { height:44px; width:auto; display:block; }\n\n.nav-center { flex:1; text-align:center; }\n.nav-title {\n font-size: clamp(26px, 3.2vw, 52px);\n font-weight: 900; text-transform: uppercase; letter-spacing:.06em; line-height:1;\n}\n.nav-title .hi { color:var(--green); }\n.nav-sub {\n font-size:clamp(10px,.9vw,14px); letter-spacing:.2em;\n text-transform:uppercase; color:rgba(255,255,255,.35); margin-top:2px;\n}\n\n.nav-right {\n display:flex; align-items:center; gap:16px;\n flex-shrink:0; width:210px; justify-content:flex-end;\n}\n.live-badge {\n display:flex; align-items:center; gap:7px;\n background:rgba(142,183,19,0.14);\n border:1px solid rgba(142,183,19,0.40);\n padding:5px 14px; border-radius:20px;\n}\n.live-dot {\n width:7px; height:7px; border-radius:50%; background:var(--green);\n animation:ldot 1.4s ease-in-out infinite;\n}\n@keyframes ldot{\n 0%,100%{box-shadow:0 0 0 0 rgba(142,183,19,0.6);opacity:1}\n 50%{box-shadow:0 0 0 5px rgba(142,183,19,0);opacity:.7}\n}\n.live-txt {\n font-size:clamp(10px,.9vw,13px); font-weight:700;\n letter-spacing:.12em; text-transform:uppercase; color:var(--green-l);\n}\n.clock-wrap { text-align:right; }\n.clock-time {\n font-size:clamp(20px,2vw,30px); font-weight:900;\n color:rgba(255,255,255,.85); letter-spacing:.04em; line-height:1;\n}\n.clock-date {\n font-size:clamp(9px,.75vw,11px); color:rgba(255,255,255,.3);\n letter-spacing:.1em; text-transform:uppercase; margin-top:2px;\n}\n\n\/* \u2500\u2500\u2500 ROW 2: EVENT BAND \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.event-band {\n display:flex; align-items:center; justify-content:space-between;\n padding:0 40px;\n background:linear-gradient(90deg,\n rgba(0,71,127,.60) 0%, rgba(5,119,155,.35) 50%, rgba(142,183,19,.15) 100%);\n border-bottom:1px solid rgba(255,255,255,.06);\n}\n.event-left { display:flex; align-items:center; gap:14px; }\n.brand-slot {\n display:flex; align-items:center; gap:8px;\n border:1.5px dashed rgba(255,255,255,.22);\n padding:4px 14px; border-radius:6px;\n font-size:clamp(10px,.9vw,13px); font-weight:700;\n letter-spacing:.12em; text-transform:uppercase;\n color:rgba(255,255,255,.35);\n}\n.sep { width:1px; height:20px; background:rgba(255,255,255,.14); }\n.event-name {\n font-size:clamp(11px,1.1vw,16px); font-weight:700;\n letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5);\n}\n.event-stats { display:flex; gap:8px; }\n.estat {\n background:rgba(255,255,255,.06);\n border:1px solid rgba(255,255,255,.1);\n padding:3px 12px; border-radius:6px; text-align:center;\n}\n.estat-n {\n font-size:clamp(14px,1.5vw,22px); font-weight:900; color:var(--green); line-height:1;\n}\n.estat-l {\n font-size:clamp(8px,.68vw,10px); font-weight:400;\n letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3);\n}\n\n\/* \u2500\u2500\u2500 ROW 3: MAIN RANKING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.ranking-grid {\n display:grid; grid-template-columns:42% 58%;\n min-height:0; overflow:hidden;\n}\n\n\/* LEFT \u2014 podio #1 *\/\n.podium {\n padding:18px 26px 18px 44px;\n display:flex; flex-direction:column; justify-content:center;\n border-right:1px solid rgba(255,255,255,.07);\n position:relative; overflow:hidden;\n}\n.podium::after {\n content:'1';\n position:absolute; right:-8px; bottom:-20px;\n font-size:clamp(180px,20vw,280px); font-weight:900;\n color:rgba(245,197,24,.035); line-height:1;\n pointer-events:none; user-select:none;\n}\n.podium::before {\n content:'';\n position:absolute; left:-80px; top:50%; transform:translateY(-50%);\n width:400px; height:400px; border-radius:50%;\n background:radial-gradient(circle,rgba(0,71,127,.25) 0%,transparent 70%);\n pointer-events:none;\n}\n\n.podium-crown {\n font-size:clamp(24px,2.8vw,44px); margin-bottom:6px;\n filter:drop-shadow(0 0 18px rgba(245,197,24,.7));\n animation:crownFloat 3s ease-in-out infinite;\n width:fit-content; position:relative; z-index:1;\n}\n@keyframes crownFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}\n\n.podium-badge {\n display:inline-flex; align-items:center; gap:7px;\n background:rgba(245,197,24,.12); border:1px solid rgba(245,197,24,.4);\n padding:4px 14px; border-radius:20px;\n margin-bottom:10px; width:fit-content; position:relative; z-index:1;\n}\n.podium-badge span {\n font-size:clamp(10px,.9vw,13px); font-weight:700;\n letter-spacing:.12em; text-transform:uppercase; color:var(--gold);\n}\n\n.podium-name {\n font-size:clamp(32px,4vw,66px); font-weight:900;\n text-transform:uppercase; line-height:.95;\n color:#fff; margin-bottom:4px;\n text-shadow:0 0 50px rgba(245,197,24,.18);\n word-break:break-word; position:relative; z-index:1;\n}\n.podium-db {\n font-size:clamp(60px,7.5vw,108px); font-weight:900;\n line-height:1; color:var(--green);\n text-shadow:0 0 60px rgba(142,183,19,.4);\n letter-spacing:-.02em; position:relative; z-index:1;\n}\n.podium-unit {\n font-size:clamp(12px,1.3vw,20px); font-weight:400;\n color:rgba(255,255,255,.4); letter-spacing:.1em;\n text-transform:uppercase; margin-bottom:12px; position:relative; z-index:1;\n}\n.podium-bar-bg {\n background:rgba(255,255,255,.08); border-radius:5px;\n height:8px; overflow:hidden; margin-bottom:8px; position:relative; z-index:1;\n}\n.podium-bar-fill {\n height:100%; border-radius:5px;\n background:linear-gradient(90deg,var(--green),var(--blue-m),var(--gold));\n transition:width 1.2s cubic-bezier(.4,0,.2,1);\n}\n.podium-meta {\n font-size:clamp(10px,.85vw,13px); color:rgba(255,255,255,.3);\n letter-spacing:.07em; position:relative; z-index:1;\n}\n\n\/* RIGHT \u2014 positions 2-10 *\/\n.list-side {\n padding:8px 34px 8px 22px;\n display:flex; flex-direction:column;\n gap:3px; justify-content:center;\n overflow:hidden; min-height:0;\n}\n\n.rrow {\n display:grid;\n grid-template-columns:44px 1fr auto;\n align-items:center; gap:12px;\n padding:9px 14px;\n border-radius:8px;\n background:rgba(255,255,255,.03);\n border:1px solid rgba(255,255,255,.05);\n position:relative; overflow:hidden;\n flex-shrink:0;\n animation:rowIn .5s ease both;\n}\n.rrow::before {\n content:''; position:absolute; left:0; top:0; bottom:0;\n width:3px; border-radius:3px 0 0 3px; background:transparent;\n}\n.rrow.p2 { border-color:rgba(184,200,212,.2); }\n.rrow.p2::before { background:var(--silver); }\n.rrow.p3 { border-color:rgba(205,127,50,.2); }\n.rrow.p3::before { background:var(--bronze); }\n.rrow-bar {\n position:absolute; bottom:0; left:0; right:0; height:2px;\n background:rgba(255,255,255,.04);\n}\n.rrow-bar-fill {\n height:100%;\n background:linear-gradient(90deg,var(--green),var(--blue-m));\n transition:width 1.2s ease;\n}\n@keyframes rowIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}\n.rrow:nth-child(1){animation-delay:.04s}.rrow:nth-child(2){animation-delay:.08s}\n.rrow:nth-child(3){animation-delay:.12s}.rrow:nth-child(4){animation-delay:.16s}\n.rrow:nth-child(5){animation-delay:.20s}.rrow:nth-child(6){animation-delay:.24s}\n.rrow:nth-child(7){animation-delay:.28s}.rrow:nth-child(8){animation-delay:.32s}\n.rrow:nth-child(9){animation-delay:.36s}\n\n.rrow-pos {\n font-size:clamp(18px,2vw,30px); font-weight:900;\n text-align:center; color:rgba(255,255,255,.22); line-height:1;\n}\n.rrow.p2 .rrow-pos { color:var(--silver); }\n.rrow.p3 .rrow-pos { color:var(--bronze); }\n.rrow-info { min-width:0; }\n.rrow-name {\n font-size:clamp(13px,1.5vw,22px); font-weight:700;\n text-transform:uppercase; white-space:nowrap;\n overflow:hidden; text-overflow:ellipsis; color:#fff; line-height:1.1;\n}\n.rrow-ago {\n font-size:clamp(8px,.7vw,11px); color:rgba(255,255,255,.28);\n letter-spacing:.1em; text-transform:uppercase; margin-top:1px;\n}\n.rrow-score { text-align:right; flex-shrink:0; }\n.rrow-db {\n font-size:clamp(18px,2.2vw,34px); font-weight:900;\n color:var(--blue-l); line-height:1;\n}\n.rrow.p2 .rrow-db { color:var(--silver); }\n.rrow.p3 .rrow-db { color:var(--bronze); }\n.rrow-unit {\n font-size:clamp(7px,.65vw,10px); color:rgba(255,255,255,.28);\n letter-spacing:.1em; text-transform:uppercase;\n}\n\n\/* \u2500\u2500\u2500 ROW 4: TICKER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.ticker {\n display:flex; align-items:center;\n border-top:1px solid rgba(255,255,255,.07);\n background:rgba(0,8,20,.8);\n overflow:hidden; flex-shrink:0;\n}\n.ticker-tag {\n flex-shrink:0; background:var(--blue-m); height:100%; padding:0 18px;\n display:flex; align-items:center;\n font-size:clamp(10px,.9vw,13px); font-weight:700;\n letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;\n}\n.ticker-track { flex:1; overflow:hidden; }\n.ticker-inner {\n display:flex; align-items:center; white-space:nowrap;\n animation:tick 30s linear infinite;\n}\n@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}\n.tick-item {\n display:inline-flex; align-items:center; gap:9px;\n padding:0 28px; font-size:clamp(11px,1vw,15px); font-weight:600;\n color:rgba(255,255,255,.5);\n border-right:1px solid rgba(255,255,255,.07);\n}\n.tick-item .tn { color:#fff; }\n.tick-item .td { color:var(--green); font-weight:900; }\n<\/style>\n<\/head>\n<body>\n\n<canvas id=\"bg-canvas\"><\/canvas>\n<div class=\"bg-glow\"><\/div>\n<div class=\"scanlines\"><\/div>\n\n<div class=\"screen\">\n\n \n <div class=\"top-nav\">\n\n \n <div class=\"logo-wrap\">\n <svg class=\"logo-svg\" viewBox=\"0 0 230 58\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n \n <path d=\"M 4 6 L 4 52 L 14 52 L 14 36 L 24 36\n C 36 36 44 28 44 21 C 44 13 36 6 24 6 Z\n M 14 14 L 24 14 C 30 14 34 17 34 21\n C 34 25 30 28 24 28 L 14 28 Z\"\n fill=\"#00477f\"\/>\n \n <path d=\"M 14 14 L 28 14 C 34 14 38 17 38 21\n C 38 25 34 28 28 28 L 14 28 Z\"\n fill=\"#05779b\"\/>\n <ellipse cx=\"28\" cy=\"21\" rx=\"9\" ry=\"7\" fill=\"#5ba4c5\" opacity=\".55\"\/>\n \n <text x=\"52\" y=\"40\"\n font-family=\"'Barlow Condensed',Arial,sans-serif\"\n font-weight=\"900\" font-size=\"38\" fill=\"#ffffff\" letter-spacing=\"0.5\">rofile<\/text>\n \n <text x=\"52\" y=\"54\"\n font-family=\"'Barlow Condensed',Arial,sans-serif\"\n font-weight=\"400\" font-size=\"11\" fill=\"rgba(255,255,255,0.42)\" letter-spacing=\"3.5\">INTERACTIVE MEDIA<\/text>\n \n <g transform=\"translate(218,4)\">\n <circle r=\"5\" fill=\"none\" stroke=\"#8eb713\" stroke-width=\"1.2\"\/>\n <text x=\"-3\" y=\"3.5\" font-family=\"Arial,sans-serif\" font-size=\"7\" fill=\"#8eb713\">R<\/text>\n <\/g>\n <\/svg>\n <\/div>\n\n <div class=\"nav-center\">\n <div class=\"nav-title\">TOP <span class=\"hi\">10<\/span> \u2014 GOL\u00d3METRO<\/div>\n <div class=\"nav-sub\">Ranking en Vivo \u00b7 Tu Marca Aqu\u00ed<\/div>\n <\/div>\n\n <div class=\"nav-right\">\n <div class=\"live-badge\">\n <div class=\"live-dot\"><\/div>\n <span class=\"live-txt\">En Vivo<\/span>\n <\/div>\n <div class=\"clock-wrap\">\n <div class=\"clock-time\" id=\"clock\">00:00:00<\/div>\n <div class=\"clock-date\" id=\"clockDate\">\u2014<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"event-band\">\n <div class=\"event-left\">\n <div class=\"brand-slot\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\n <rect x=\".65\" y=\".65\" width=\"11.7\" height=\"11.7\" rx=\"2.2\"\n stroke=\"rgba(255,255,255,.3)\" stroke-width=\"1.3\" stroke-dasharray=\"3 2\"\/>\n <path d=\"M3.5 6.5h6M6.5 3.5v6\"\n stroke=\"rgba(255,255,255,.3)\" stroke-width=\"1.3\" stroke-linecap=\"round\"\/>\n <\/svg>\n Tu Logo Aqu\u00ed\n <\/div>\n <div class=\"sep\"><\/div>\n <div class=\"event-name\">Nombre del Evento 2026<\/div>\n <\/div>\n <div class=\"event-stats\">\n <div class=\"estat\">\n <div class=\"estat-n\" id=\"sPart\">247<\/div>\n <div class=\"estat-l\">Participantes<\/div>\n <\/div>\n <div class=\"estat\">\n <div class=\"estat-n\" id=\"sMax\">94<\/div>\n <div class=\"estat-l\">M\u00e1x. dB<\/div>\n <\/div>\n <div class=\"estat\">\n <div class=\"estat-n\" id=\"sAvg\">76<\/div>\n <div class=\"estat-l\">Promedio<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ranking-grid\">\n\n \n <div class=\"podium\">\n <div class=\"podium-crown\">\ud83d\udc51<\/div>\n <div class=\"podium-badge\"><span>\ud83e\udd47 Lugar #1 \u2014 L\u00edder<\/span><\/div>\n <div class=\"podium-name\" id=\"p1name\">Carlos M\u00e9ndez<\/div>\n <div class=\"podium-db\" id=\"p1db\">92<\/div>\n <div class=\"podium-unit\">Decibeles<\/div>\n <div class=\"podium-bar-bg\">\n <div class=\"podium-bar-fill\" id=\"p1bar\" style=\"width:97%\"><\/div>\n <\/div>\n <div class=\"podium-meta\" id=\"p1meta\">Registrado hace 4 min \u00b7 Grito l\u00edder de la noche<\/div>\n <\/div>\n\n \n <div class=\"list-side\" id=\"listSide\"><\/div>\n\n <\/div>\n\n \n <div class=\"ticker\">\n <div class=\"ticker-tag\">\ud83c\udf99\ufe0f Gol\u00f3metro en Vivo<\/div>\n <div class=\"ticker-track\">\n <div class=\"ticker-inner\" id=\"tickerInner\"><\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n\/* \u2500\u2500\u2500 DATA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst players = [\n {name:'Carlos M\u00e9ndez', db:92, ago:'4 min'},\n {name:'Ana Garc\u00eda', db:88, ago:'7 min'},\n {name:'Miguel Torres', db:85, ago:'11 min'},\n {name:'Luc\u00eda Ram\u00edrez', db:81, ago:'14 min'},\n {name:'Jos\u00e9 P\u00e9rez', db:79, ago:'18 min'},\n {name:'Sof\u00eda Morales', db:77, ago:'21 min'},\n {name:'Andr\u00e9s L\u00f3pez', db:74, ago:'25 min'},\n {name:'Valeria Cruz', db:72, ago:'28 min'},\n {name:'Diego Hern\u00e1ndez', db:69, ago:'33 min'},\n {name:'Mariana Vega', db:67, ago:'38 min'},\n];\nconst medals = ['\ud83e\udd47','\ud83e\udd48','\ud83e\udd49'];\nconst posCls = ['','p2','p3','','','','','','',''];\n\n\/* \u2500\u2500\u2500 STAR CANVAS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n(function(){\n const c = document.getElementById('bg-canvas');\n const ctx = c.getContext('2d');\n let stars = [];\n function resize(){\n c.width = innerWidth; c.height = innerHeight;\n stars = Array.from({length:130},()=>({\n x:Math.random()*c.width, y:Math.random()*c.height,\n r:Math.random()*1.1+0.2, a:Math.random()*Math.PI*2,\n sp:Math.random()*0.35+0.08\n }));\n }\n function draw(){\n ctx.clearRect(0,0,c.width,c.height);\n stars.forEach(s=>{\n s.a += s.sp*0.01;\n ctx.globalAlpha = (Math.sin(s.a)+1)\/2*0.45+0.04;\n ctx.fillStyle = '#fff';\n ctx.beginPath(); ctx.arc(s.x,s.y,s.r,0,Math.PI*2); ctx.fill();\n });\n ctx.globalAlpha=1;\n requestAnimationFrame(draw);\n }\n window.addEventListener('resize',resize);\n resize(); draw();\n})();\n\n\/* \u2500\u2500\u2500 CLOCK \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction tick(){\n const n = new Date();\n document.getElementById('clock').textContent = n.toLocaleTimeString('es-GT',{hour12:false});\n document.getElementById('clockDate').textContent =\n n.toLocaleDateString('es-GT',{weekday:'long',day:'numeric',month:'long'});\n}\ntick(); setInterval(tick,1000);\n\n\/* \u2500\u2500\u2500 RENDER LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction renderList(){\n const side = document.getElementById('listSide');\n const maxDB = Math.max(...players.map(p=>p.db));\n side.innerHTML = '';\n players.slice(1).forEach((p,i)=>{\n const pos = i+2;\n const pct = Math.round(p.db\/maxDB*100);\n const d = document.createElement('div');\n d.className = `rrow ${posCls[i+1]||''}`;\n d.innerHTML = `\n <div class=\"rrow-pos\">${medals[i+1]||pos}<\/div>\n <div class=\"rrow-info\">\n <div class=\"rrow-name\">${p.name}<\/div>\n <div class=\"rrow-ago\">hace ${p.ago}<\/div>\n <\/div>\n <div class=\"rrow-score\">\n <div class=\"rrow-db\">${p.db}<\/div>\n <div class=\"rrow-unit\">dB<\/div>\n <\/div>\n <div class=\"rrow-bar\"><div class=\"rrow-bar-fill\" style=\"width:${pct}%\"><\/div><\/div>`;\n side.appendChild(d);\n });\n}\nrenderList();\n\n\/* \u2500\u2500\u2500 RENDER TICKER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction renderTicker(){\n const all = [...players,...players];\n document.getElementById('tickerInner').innerHTML =\n all.map((p,i)=>`\n <div class=\"tick-item\">\n <span>${medals[i%10]||'#'+(i%10+1)}<\/span>\n <span class=\"tn\">${p.name}<\/span>\n <span class=\"td\">${p.db} dB<\/span>\n <\/div>`).join('');\n}\nrenderTicker();\n\n\/* \u2500\u2500\u2500 UPDATE PODIUM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction updatePodium(){\n const p = players[0];\n const maxDB = Math.max(...players.map(q=>q.db));\n document.getElementById('p1name').textContent = p.name;\n document.getElementById('p1db').textContent = p.db;\n document.getElementById('p1bar').style.width = Math.round(p.db\/maxDB*100)+'%';\n document.getElementById('p1meta').textContent =\n `Registrado hace ${p.ago} \u00b7 Grito l\u00edder de la noche`;\n}\n\n\/* \u2500\u2500\u2500 LIVE SIMULATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nlet partCount = 247;\nsetInterval(()=>{\n const idx = Math.floor(Math.random()*players.length);\n players[idx].db = Math.min(99,Math.max(55,players[idx].db+Math.floor(Math.random()*5)-2));\n players[idx].ago = Math.random()>.5 ? 'ahora' : `${Math.ceil(Math.random()*4)} min`;\n players.sort((a,b)=>b.db-a.db);\n updatePodium(); renderList(); renderTicker();\n partCount += Math.floor(Math.random()*3);\n document.getElementById('sPart').textContent = partCount;\n document.getElementById('sMax').textContent = Math.max(...players.map(p=>p.db));\n document.getElementById('sAvg').textContent =\n Math.round(players.reduce((s,p)=>s+p.db,0)\/players.length);\n}, 7000);\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Gol\u00f3metro \u2014 Top 10 en Vivo rofile INTERACTIVE MEDIA R TOP 10 \u2014 GOL\u00d3METRO Ranking en Vivo \u00b7 Tu Marca Aqu\u00ed En Vivo 00:00:00 \u2014 Tu Logo Aqu\u00ed Nombre del Evento 2026 247 Participantes 94 M\u00e1x. dB 76 Promedio \ud83d\udc51 \ud83e\udd47 Lugar #1 \u2014 L\u00edder Carlos M\u00e9ndez 92 Decibeles Registrado hace 4 min \u00b7 Grito […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"pantalla","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/profileim.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=33"}],"version-history":[{"count":3,"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/profileim.tech\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/profileim.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}