{"id":29439,"date":"2026-04-11T22:33:24","date_gmt":"2026-04-11T22:33:24","guid":{"rendered":"https:\/\/staging.lacongasecreta.com\/?page_id=29439"},"modified":"2026-05-07T20:05:51","modified_gmt":"2026-05-07T20:05:51","slug":"tocando","status":"publish","type":"page","link":"https:\/\/staging.lacongasecreta.com\/it\/tocando\/","title":{"rendered":"tocando"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nToca las Congas | La Conga Secreta<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n:root {\r\n --rojo: #C8271A; --rojo-vivo: #E83222; --oro: #C9A84C;\r\n --negro: #0A0A0A; --gris-oscuro: #161616; --gris-borde: rgba(255,255,255,0.07);\r\n --blanco: #F4EFE8; --sans: 'DM Sans',sans-serif; --display: 'Bebas Neue',sans-serif;\r\n}\r\nbody {\r\n background: var(--negro); color: var(--blanco);\r\n font-family: var(--sans); -webkit-font-smoothing: antialiased;\r\n overflow-x: hidden; user-select: none; -webkit-user-select: none;\r\n}\r\n.section { max-width: 780px; margin: 0 auto; padding: 60px 4vw 80px; }\r\n\r\n\/* \u2500\u2500 HEADER \u2500\u2500 *\/\r\n.eyebrow {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n border: 1px solid rgba(200,39,26,0.3); background: rgba(200,39,26,0.08);\r\n border-radius: 2px; padding: 5px 14px;\r\n font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #E07068;\r\n margin-bottom: 20px;\r\n}\r\n.eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rojo-vivo); animation: blink 2s ease-in-out infinite; }\r\n@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.15} }\r\n.headline { font-family: var(--display); font-size: clamp(44px,8vw,88px); line-height:.92; margin-bottom:6px; }\r\n.headline .acc { color: var(--rojo-vivo); }\r\n.sub { font-size:14px; font-weight:300; color:rgba(255,255,255,.45); margin-bottom:36px; line-height:1.6; max-width:480px; }\r\n.sub strong { color: var(--blanco); font-weight:500; }\r\n\r\n\/* \u2500\u2500 KEYBOARD HINTS \u2500\u2500 *\/\r\n.kb-hints {\r\n display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;\r\n}\r\n.kb-hint {\r\n display: flex; align-items: center; gap: 6px;\r\n font-size: 11px; color: rgba(255,255,255,.35);\r\n}\r\n.kb-key {\r\n background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);\r\n border-radius: 4px; padding: 2px 7px; font-size: 11px;\r\n font-family: monospace; color: rgba(255,255,255,.5);\r\n}\r\n\r\n\/* \u2500\u2500 STAGE \u2500\u2500 *\/\r\n.stage {\r\n display: flex; justify-content: center; align-items: flex-end;\r\n gap: clamp(12px,3vw,32px);\r\n padding: 32px 0 24px;\r\n position: relative;\r\n}\r\n.stage::before {\r\n content: '';\r\n position: absolute; bottom: 0; left: 5%; right: 5%; height: 1px;\r\n background: linear-gradient(to right, transparent, rgba(255,255,255,.08) 40%, rgba(255,255,255,.08) 60%, transparent);\r\n}\r\n\r\n\/* \u2500\u2500 CONGA INDIVIDUAL \u2500\u2500 *\/\r\n.conga-wrap {\r\n display: flex; flex-direction: column; align-items: center; gap: 10px;\r\n position: relative;\r\n}\r\n\r\n.conga-label {\r\n font-size: 10px; letter-spacing: .16em; text-transform: uppercase;\r\n color: rgba(255,255,255,.3); font-weight: 500;\r\n}\r\n\r\n.conga-svg-wrap {\r\n position: relative; cursor: pointer;\r\n transition: transform .08s ease;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n.conga-svg-wrap:active { transform: scale(.97); }\r\n\r\n\/* Ripple de golpe *\/\r\n.ripple {\r\n position: absolute; border-radius: 50%;\r\n border: 2px solid rgba(200,39,26,0.8);\r\n pointer-events: none; opacity: 0;\r\n transform: scale(.3);\r\n transition: none;\r\n}\r\n.ripple.fire {\r\n animation: rippleAnim .4s ease-out forwards;\r\n}\r\n@keyframes rippleAnim {\r\n 0% { opacity: .9; transform: scale(.3); }\r\n 100% { opacity: 0; transform: scale(1.5); }\r\n}\r\n\r\n\/* Flash en el parche al golpear *\/\r\n.parche-flash { transition: opacity .08s; }\r\n.conga-svg-wrap.hit .parche-flash { opacity: 1 !important; }\r\n\r\n\/* Nombre del golpe flotante *\/\r\n.hit-label {\r\n position: absolute; top: -28px; left: 50%;\r\n transform: translateX(-50%);\r\n font-size: 11px; font-weight: 500; letter-spacing: .1em;\r\n text-transform: uppercase; color: var(--rojo-vivo);\r\n white-space: nowrap; opacity: 0;\r\n pointer-events: none;\r\n transition: none;\r\n}\r\n.hit-label.show {\r\n animation: labelPop .7s ease-out forwards;\r\n}\r\n@keyframes labelPop {\r\n 0% { opacity: 1; transform: translateX(-50%) translateY(0); }\r\n 70% { opacity: 1; transform: translateX(-50%) translateY(-14px); }\r\n 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }\r\n}\r\n\r\n\/* Zonas de golpe invisibles sobre el SVG *\/\r\n.zona {\r\n position: absolute; border-radius: 50%;\r\n cursor: pointer; -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n\/* \u2500\u2500 SCORE & COMBO \u2500\u2500 *\/\r\n.hud {\r\n display: flex; align-items: center; justify-content: center;\r\n gap: 24px; margin: 24px 0 0;\r\n}\r\n.hud-item { text-align: center; }\r\n.hud-num {\r\n font-family: var(--display); font-size: 36px; line-height: 1;\r\n color: var(--blanco); font-variant-numeric: tabular-nums;\r\n}\r\n.hud-num.gold { color: var(--oro); }\r\n.hud-lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-top: 2px; }\r\n\r\n\/* Combo flash *\/\r\n@keyframes comboFlash { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }\r\n.combo-flash { animation: comboFlash .2s ease; }\r\n\r\n\/* \u2500\u2500 GOLPES RECIENTES \u2500\u2500 *\/\r\n.recent-hits {\r\n display: flex; gap: 6px; justify-content: center;\r\n flex-wrap: wrap; min-height: 28px; margin-top: 10px;\r\n}\r\n.recent-pill {\r\n font-size: 10px; letter-spacing: .1em; text-transform: uppercase;\r\n padding: 3px 9px; border-radius: 99px;\r\n border: 1px solid rgba(200,39,26,0.3);\r\n background: rgba(200,39,26,0.08); color: #E07068;\r\n animation: pillIn .2s ease both;\r\n}\r\n@keyframes pillIn { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }\r\n\r\n\/* \u2500\u2500 PROGRESO GAMIFICADO \u2500\u2500 *\/\r\n.progress-section { margin-top: 28px; }\r\n.prog-row {\r\n display: flex; align-items: center; justify-content: space-between;\r\n margin-bottom: 8px;\r\n}\r\n.prog-title { font-size: 12px; color: rgba(255,255,255,.4); letter-spacing: .06em; }\r\n.prog-level { font-size: 11px; font-weight: 500; color: var(--oro); letter-spacing: .1em; text-transform: uppercase; }\r\n.prog-track {\r\n height: 5px; background: rgba(255,255,255,.06);\r\n border-radius: 99px; overflow: hidden;\r\n}\r\n.prog-fill {\r\n height: 100%; background: var(--rojo);\r\n border-radius: 99px;\r\n width: 0%; transition: width .5s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n\/* \u2500\u2500 CTA DESBLOQUEADO \u2500\u2500 *\/\r\n.cta-unlock {\r\n background: var(--gris-oscuro);\r\n border: 1px solid rgba(200,39,26,0.3);\r\n border-radius: 8px; padding: 20px 24px;\r\n margin-top: 24px;\r\n display: flex; align-items: center; gap: 16px;\r\n opacity: 0; transform: translateY(12px);\r\n transition: opacity .5s ease, transform .5s ease;\r\n}\r\n.cta-unlock.visible { opacity: 1; transform: translateY(0); }\r\n.cta-unlock-text { flex: 1; }\r\n.cta-unlock-title { font-size: 14px; font-weight: 500; color: var(--blanco); margin-bottom: 4px; }\r\n.cta-unlock-sub { font-size: 12px; font-weight: 300; color: rgba(255,255,255,.4); line-height: 1.5; }\r\n.btn-cta-small {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: var(--rojo); color: #fff;\r\n font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;\r\n padding: 11px 20px; border-radius: 2px; border: none; cursor: pointer;\r\n text-decoration: none; white-space: nowrap; flex-shrink: 0;\r\n transition: background .2s;\r\n}\r\n.btn-cta-small:hover { background: var(--rojo-vivo); }\r\n\r\n\/* \u2500\u2500 LOGRO \u2500\u2500 *\/\r\n.logro-toast {\r\n position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);\r\n background: #1a1a1a; border: 1px solid var(--oro);\r\n border-radius: 8px; padding: 12px 20px;\r\n display: flex; align-items: center; gap: 12px;\r\n font-size: 13px; color: var(--blanco);\r\n transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .4s;\r\n opacity: 0; z-index: 100; white-space: nowrap;\r\n}\r\n.logro-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }\r\n.logro-icon { color: var(--oro); font-size: 18px; }\r\n\r\n\/* \u2500\u2500 INSTRUCCI\u00d3N M\u00d3VIL \u2500\u2500 *\/\r\n.tap-hint {\r\n text-align: center; font-size: 12px; color: rgba(255,255,255,.2);\r\n margin-top: 8px; letter-spacing: .06em;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!--\r\n BLOQUE \u2014 CONGA INTERACTIVA\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Sonidos sintetizados con Web Audio API.\r\n Para sustituir por audios reales:\r\n 1. Sube los MP3\/OGG a tu Biblioteca de Medios\r\n 2. En el objeto SOUNDS reemplaza cada funci\u00f3n synth\r\n por: new Audio('URL_DEL_ARCHIVO')\r\n 3. Llama a audio.cloneNode(true).play() para\r\n permitir golpes r\u00e1pidos simult\u00e1neos.\r\n\r\n TECLADO: A S D = tumbadora | J K L = conga | B N M = quinto\r\n-->\r\n\r\n<section class=\"section\">\r\n\r\n <div class=\"eyebrow\"><span class=\"eyebrow-dot\"><\/span>Pru\u00e9balo ahora<\/div>\r\n\r\n <h2 class=\"headline\">Toca las<br><span class=\"acc\">Congas<\/span><\/h2>\r\n <p class=\"sub\">\r\n <strong>Haz clic o toca cada zona del tambor.<\/strong> Cada golpe tiene un nombre y una t\u00e9cnica.\r\n Descubre cu\u00e1ntos conoces \u2014 y cu\u00e1les te faltan.\r\n <\/p>\r\n\r\n <div class=\"kb-hints\" id=\"kbHints\">\r\n <div class=\"kb-hint\"><span class=\"kb-key\">A<\/span><span class=\"kb-key\">S<\/span><span class=\"kb-key\">D<\/span> Tumbadora<\/div>\r\n <div class=\"kb-hint\"><span class=\"kb-key\">J<\/span><span class=\"kb-key\">K<\/span><span class=\"kb-key\">L<\/span> Conga<\/div>\r\n <div class=\"kb-hint\"><span class=\"kb-key\">B<\/span><span class=\"kb-key\">N<\/span><span class=\"kb-key\">M<\/span> Quinto<\/div>\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 ESCENARIO \u2500\u2500 -->\r\n <div class=\"stage\" id=\"stage\">\r\n\r\n <!-- TUMBADORA (m\u00e1s grande, izquierda) -->\r\n <div class=\"conga-wrap\">\r\n <div class=\"conga-label\">Tumbadora<\/div>\r\n <div class=\"conga-svg-wrap\" id=\"conga-0\">\r\n <svg width=\"130\" height=\"220\" viewBox=\"0 0 130 220\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <!-- Cuerpo -->\r\n <path d=\"M22 55 Q18 130 20 180 Q35 205 65 208 Q95 205 110 180 Q112 130 108 55 Z\" fill=\"#2a1a0a\" stroke=\"#5a3820\" stroke-width=\"1.5\"\/>\r\n <!-- Aros met\u00e1licos -->\r\n <ellipse cx=\"65\" cy=\"55\" rx=\"43\" ry=\"10\" fill=\"#1a1a1a\" stroke=\"#444\" stroke-width=\"1\"\/>\r\n <ellipse cx=\"65\" cy=\"62\" rx=\"43\" ry=\"10\" fill=\"#222\" stroke=\"#555\" stroke-width=\".5\"\/>\r\n <!-- Parche -->\r\n <ellipse cx=\"65\" cy=\"55\" rx=\"40\" ry=\"9\" fill=\"#c8a878\" stroke=\"#a08050\" stroke-width=\".8\"\/>\r\n <ellipse class=\"parche-flash\" cx=\"65\" cy=\"55\" rx=\"40\" ry=\"9\" fill=\"rgba(255,220,150,0)\" stroke=\"none\"\/>\r\n <!-- Tensores -->\r\n <line x1=\"25\" y1=\"65\" x2=\"22\" y2=\"100\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"40\" y1=\"68\" x2=\"37\" y2=\"103\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"65\" y1=\"70\" x2=\"65\" y2=\"105\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"90\" y1=\"68\" x2=\"93\" y2=\"103\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"105\" y1=\"65\" x2=\"108\" y2=\"100\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <!-- Cintura decorativa -->\r\n <path d=\"M21 120 Q30 116 65 116 Q100 116 109 120\" stroke=\"#5a3820\" stroke-width=\"1\" fill=\"none\"\/>\r\n <!-- Aro inferior -->\r\n <ellipse cx=\"65\" cy=\"195\" rx=\"43\" ry=\"8\" fill=\"#1a1a1a\" stroke=\"#444\" stroke-width=\"1\"\/>\r\n <!-- Pie -->\r\n <rect x=\"40\" y=\"202\" width=\"50\" height=\"6\" rx=\"3\" fill=\"#333\"\/>\r\n <\/svg>\r\n <!-- Zonas t\u00e1ctiles -->\r\n <div class=\"zona\" id=\"z0-0\" data-drum=\"0\" data-zona=\"0\" style=\"width:80px;height:18px;top:47px;left:25px;border-radius:50%\"><\/div>\r\n <div class=\"zona\" id=\"z0-1\" data-drum=\"0\" data-zona=\"1\" style=\"width:60px;height:16px;top:40px;left:35px;border-radius:50%\"><\/div>\r\n <div class=\"zona\" id=\"z0-2\" data-drum=\"0\" data-zona=\"2\" style=\"width:40px;height:12px;top:35px;left:45px;border-radius:50%\"><\/div>\r\n <div class=\"ripple\" id=\"rip0\" style=\"width:80px;height:18px;top:47px;left:25px\"><\/div>\r\n <div class=\"hit-label\" id=\"hl0\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- CONGA (mediana, centro) -->\r\n <div class=\"conga-wrap\">\r\n <div class=\"conga-label\">Conga<\/div>\r\n <div class=\"conga-svg-wrap\" id=\"conga-1\">\r\n <svg width=\"110\" height=\"200\" viewBox=\"0 0 110 200\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M19 47 Q15 115 17 165 Q30 188 55 191 Q80 188 93 165 Q95 115 91 47 Z\" fill=\"#2a1a0a\" stroke=\"#5a3820\" stroke-width=\"1.5\"\/>\r\n <ellipse cx=\"55\" cy=\"47\" rx=\"36\" ry=\"8.5\" fill=\"#1a1a1a\" stroke=\"#444\" stroke-width=\"1\"\/>\r\n <ellipse cx=\"55\" cy=\"54\" rx=\"36\" ry=\"8.5\" fill=\"#222\" stroke=\"#555\" stroke-width=\".5\"\/>\r\n <ellipse cx=\"55\" cy=\"47\" rx=\"33\" ry=\"7.5\" fill=\"#c8a878\" stroke=\"#a08050\" stroke-width=\".8\"\/>\r\n <ellipse class=\"parche-flash\" cx=\"55\" cy=\"47\" rx=\"33\" ry=\"7.5\" fill=\"rgba(255,220,150,0)\" stroke=\"none\"\/>\r\n <line x1=\"22\" y1=\"57\" x2=\"19\" y2=\"88\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"38\" y1=\"60\" x2=\"35\" y2=\"91\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"55\" y1=\"62\" x2=\"55\" y2=\"93\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"72\" y1=\"60\" x2=\"75\" y2=\"91\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"88\" y1=\"57\" x2=\"91\" y2=\"88\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <path d=\"M18 108 Q27 104 55 104 Q83 104 92 108\" stroke=\"#5a3820\" stroke-width=\"1\" fill=\"none\"\/>\r\n <ellipse cx=\"55\" cy=\"178\" rx=\"36\" ry=\"7\" fill=\"#1a1a1a\" stroke=\"#444\" stroke-width=\"1\"\/>\r\n <rect x=\"33\" y=\"184\" width=\"44\" height=\"6\" rx=\"3\" fill=\"#333\"\/>\r\n <\/svg>\r\n <div class=\"zona\" id=\"z1-0\" data-drum=\"1\" data-zona=\"0\" style=\"width:66px;height:15px;top:40px;left:22px;border-radius:50%\"><\/div>\r\n <div class=\"zona\" id=\"z1-1\" data-drum=\"1\" data-zona=\"1\" style=\"width:50px;height:13px;top:34px;left:30px;border-radius:50%\"><\/div>\r\n <div class=\"zona\" id=\"z1-2\" data-drum=\"1\" data-zona=\"2\" style=\"width:32px;height:10px;top:29px;left:39px;border-radius:50%\"><\/div>\r\n <div class=\"ripple\" id=\"rip1\" style=\"width:66px;height:15px;top:40px;left:22px\"><\/div>\r\n <div class=\"hit-label\" id=\"hl1\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- QUINTO (m\u00e1s peque\u00f1o, derecha) -->\r\n <div class=\"conga-wrap\">\r\n <div class=\"conga-label\">Quinto<\/div>\r\n <div class=\"conga-svg-wrap\" id=\"conga-2\">\r\n <svg width=\"90\" height=\"180\" viewBox=\"0 0 90 180\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M15 40 Q11 100 13 145 Q25 166 45 168 Q65 166 77 145 Q79 100 75 40 Z\" fill=\"#2a1a0a\" stroke=\"#5a3820\" stroke-width=\"1.5\"\/>\r\n <ellipse cx=\"45\" cy=\"40\" rx=\"30\" ry=\"7\" fill=\"#1a1a1a\" stroke=\"#444\" stroke-width=\"1\"\/>\r\n <ellipse cx=\"45\" cy=\"46\" rx=\"30\" ry=\"7\" fill=\"#222\" stroke=\"#555\" stroke-width=\".5\"\/>\r\n <ellipse cx=\"45\" cy=\"40\" rx=\"27\" ry=\"6\" fill=\"#c8a878\" stroke=\"#a08050\" stroke-width=\".8\"\/>\r\n <ellipse class=\"parche-flash\" cx=\"45\" cy=\"40\" rx=\"27\" ry=\"6\" fill=\"rgba(255,220,150,0)\" stroke=\"none\"\/>\r\n <line x1=\"17\" y1=\"49\" x2=\"14\" y2=\"76\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"31\" y1=\"52\" x2=\"28\" y2=\"79\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"45\" y1=\"53\" x2=\"45\" y2=\"80\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"59\" y1=\"52\" x2=\"62\" y2=\"79\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <line x1=\"73\" y1=\"49\" x2=\"76\" y2=\"76\" stroke=\"#666\" stroke-width=\".8\"\/>\r\n <path d=\"M13 94 Q21 91 45 91 Q69 91 77 94\" stroke=\"#5a3820\" stroke-width=\"1\" fill=\"none\"\/>\r\n <ellipse cx=\"45\" cy=\"156\" rx=\"30\" ry=\"6\" fill=\"#1a1a1a\" stroke=\"#444\" stroke-width=\"1\"\/>\r\n <rect x=\"26\" y=\"161\" width=\"38\" height=\"5\" rx=\"2.5\" fill=\"#333\"\/>\r\n <\/svg>\r\n <div class=\"zona\" id=\"z2-0\" data-drum=\"2\" data-zona=\"0\" style=\"width:54px;height:12px;top:34px;left:18px;border-radius:50%\"><\/div>\r\n <div class=\"zona\" id=\"z2-1\" data-drum=\"2\" data-zona=\"1\" style=\"width:40px;height:10px;top:28px;left:25px;border-radius:50%\"><\/div>\r\n <div class=\"zona\" id=\"z2-2\" data-drum=\"2\" data-zona=\"2\" style=\"width:24px;height:8px;top:23px;left:33px;border-radius:50%\"><\/div>\r\n <div class=\"ripple\" id=\"rip2\" style=\"width:54px;height:12px;top:34px;left:18px\"><\/div>\r\n <div class=\"hit-label\" id=\"hl2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"tap-hint\">Toca el parche \u00b7 usa el teclado \u00b7 o haz clic<\/div>\r\n\r\n <!-- HUD -->\r\n <div class=\"hud\">\r\n <div class=\"hud-item\">\r\n <div class=\"hud-num\" id=\"scoreNum\">0<\/div>\r\n <div class=\"hud-lbl\">golpes<\/div>\r\n <\/div>\r\n <div class=\"hud-item\">\r\n <div class=\"hud-num gold\" id=\"comboNum\">x1<\/div>\r\n <div class=\"hud-lbl\">combo<\/div>\r\n <\/div>\r\n <div class=\"hud-item\">\r\n <div class=\"hud-num\" id=\"tiposNum\">0\/9<\/div>\r\n <div class=\"hud-lbl\">t\u00e9cnicas<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Golpes recientes -->\r\n <div class=\"recent-hits\" id=\"recentHits\"><\/div>\r\n\r\n <!-- Barra de progreso -->\r\n <div class=\"progress-section\">\r\n <div class=\"prog-row\">\r\n <span class=\"prog-title\">T\u00e9cnicas descubiertas<\/span>\r\n <span class=\"prog-level\" id=\"progLevel\">Conguero novato<\/span>\r\n <\/div>\r\n <div class=\"prog-track\"><div class=\"prog-fill\" id=\"progFill\"><\/div><\/div>\r\n <\/div>\r\n\r\n <!-- CTA que se desbloquea -->\r\n <div class=\"cta-unlock\" id=\"ctaUnlock\">\r\n <div class=\"cta-unlock-text\">\r\n <div class=\"cta-unlock-title\" id=\"ctaTitle\">\u00a1Desbloqueaste tu primera t\u00e9cnica!<\/div>\r\n <div class=\"cta-unlock-sub\" id=\"ctaSub\">Cada golpe que sientes tiene nombre, posici\u00f3n y secreto. Diego te los ense\u00f1a todos.<\/div>\r\n <\/div>\r\n <a href=\"#planes\" class=\"btn-cta-small\">\r\n Aprender con Diego\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<!-- Toast de logro -->\r\n<div class=\"logro-toast\" id=\"logroToast\">\r\n <span class=\"logro-icon\">\u2605<\/span>\r\n <span id=\"logroText\">\u00a1Logro desbloqueado!<\/span>\r\n<\/div>\r\n\r\n<script>\r\nvar AudioCtx = window.AudioContext || window.webkitAudioContext;\r\nvar actx = null;\r\nfunction getCtx() { if (!actx) actx = new AudioCtx(); return actx; }\r\n\r\n\/* \u2500\u2500 S\u00cdNTESIS DE SONIDOS \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 *\/\r\n\/*\r\n Para sustituir por audio real:\r\n Reemplaza la funci\u00f3n de cada sonido por:\r\n var a = new Audio('URL_ARCHIVO');\r\n a.play();\r\n Y guarda la URL en el objeto de configuraci\u00f3n.\r\n*\/\r\nfunction synth(type, freq, dur, decay, gain, filtFreq, filtType) {\r\n var ctx = getCtx();\r\n var o = ctx.createOscillator();\r\n var g = ctx.createGain();\r\n var f = ctx.createBiquadFilter();\r\n o.type = type; o.frequency.setValueAtTime(freq, ctx.currentTime);\r\n f.type = filtType || 'lowpass'; f.frequency.value = filtFreq || 800;\r\n g.gain.setValueAtTime(gain, ctx.currentTime);\r\n g.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + dur);\r\n o.connect(f); f.connect(g); g.connect(ctx.destination);\r\n o.start(); o.stop(ctx.currentTime + dur);\r\n if (decay) o.frequency.exponentialRampToValueAtTime(freq * decay, ctx.currentTime + dur);\r\n}\r\nfunction synthNoise(dur, gain, filtFreq) {\r\n var ctx = getCtx();\r\n var buf = ctx.createBuffer(1, ctx.sampleRate * dur, ctx.sampleRate);\r\n var data = buf.getChannelData(0);\r\n for (var i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1;\r\n var src = ctx.createBufferSource();\r\n var f = ctx.createBiquadFilter();\r\n var g = ctx.createGain();\r\n src.buffer = buf; f.type = 'bandpass'; f.frequency.value = filtFreq;\r\n g.gain.setValueAtTime(gain, ctx.currentTime);\r\n g.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + dur);\r\n src.connect(f); f.connect(g); g.connect(ctx.destination);\r\n src.start(); src.stop(ctx.currentTime + dur);\r\n}\r\n\r\nvar SONIDOS = {\r\n \/* Tumbadora *\/\r\n '0-0': { fn: function() { synth('sine',80,1.2,.15,.9,300); synthNoise(.08,.4,200); }, nombre: 'Bajo', desc: 'Golpe de palma abierta' },\r\n '0-1': { fn: function() { synth('sine',120,.7,.2,.7,500); synthNoise(.05,.3,400); }, nombre: 'Tono abierto', desc: 'Dedo anular en el aro' },\r\n '0-2': { fn: function() { synth('sine',160,.3,.4,.5,700); synthNoise(.03,.5,1200); }, nombre: 'Slap', desc: 'Chasquido del pulgar' },\r\n \/* Conga *\/\r\n '1-0': { fn: function() { synth('sine',110,.9,.18,.8,400); synthNoise(.06,.35,300); }, nombre: 'Bajo', desc: 'Golpe de palma abierta' },\r\n '1-1': { fn: function() { synth('sine',160,.55,.22,.65,600); synthNoise(.04,.28,500); }, nombre: 'Tono abierto', desc: 'Dedo anular libre' },\r\n '1-2': { fn: function() { synth('sine',220,.25,.45,.45,900); synthNoise(.025,.55,1400); }, nombre: 'Slap', desc: 'Chasquido seco' },\r\n \/* Quinto *\/\r\n '2-0': { fn: function() { synth('sine',160,.7,.2,.7,500); synthNoise(.05,.3,350); }, nombre: 'Bajo', desc: 'Golpe de palma' },\r\n '2-1': { fn: function() { synth('sine',240,.45,.25,.6,700); synthNoise(.04,.25,600); }, nombre: 'Tono abierto', desc: 'Tono brillante' },\r\n '2-2': { fn: function() { synth('sine',320,.2,.5,.4,1100); synthNoise(.02,.6,1600); }, nombre: 'Slap', desc: 'Slap agudo' },\r\n};\r\n\r\n\/* \u2500\u2500 ESTADO \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\nvar score = 0, combo = 1, lastHit = 0, comboTimer = null;\r\nvar discovered = new Set();\r\nvar LEVELS = [\r\n { min: 0, label: 'Conguero novato', cta: '\u00a1Escuchaste tu primer golpe! Cada uno tiene nombre y t\u00e9cnica.' },\r\n { min: 2, label: 'Explorando ritmos', cta: 'Ya sientes la diferencia entre golpes. Hay mucho m\u00e1s por descubrir.' },\r\n { min: 5, label: 'Con feeling', cta: 'Tu o\u00eddo ya distingue los sonidos. Diego te ense\u00f1a la t\u00e9cnica detr\u00e1s de cada uno.' },\r\n { min: 8, label: 'Conguero en progreso',cta: '\u00a1Descubriste todas las t\u00e9cnicas b\u00e1sicas! Esto es solo el comienzo.' },\r\n];\r\nvar LOGROS = [\r\n { hits: 1, text: 'Primer golpe \u2014 bienvenido al ritmo' },\r\n { hits: 5, text: '5 golpes \u2014 ya tienes feeling' },\r\n { hits: 10, text: '10 golpes \u2014 \u00a1combo activado!' },\r\n { hits: 20, text: 'Conguero imparable \u2014 20 golpes' },\r\n { disc: 3, text: '3 t\u00e9cnicas descubiertas' },\r\n { disc: 6, text: '6 t\u00e9cnicas \u2014 mitad del camino' },\r\n { disc: 9, text: '\u00a19\/9 t\u00e9cnicas desbloqueadas! Maestro del parche' },\r\n];\r\nvar logrosDone = new Set();\r\n\r\nfunction golpear(drum, zona) {\r\n var key = drum + '-' + zona;\r\n var s = SONIDOS[key]; if (!s) return;\r\n s.fn();\r\n\r\n score++;\r\n var now = Date.now();\r\n if (now - lastHit < 600) { combo = Math.min(combo + 1, 16); }\r\n else { combo = 1; }\r\n lastHit = now;\r\n if (comboTimer) clearTimeout(comboTimer);\r\n comboTimer = setTimeout(function() { combo = 1; updateHUD(); }, 1200);\r\n\r\n discovered.add(key);\r\n updateHUD();\r\n showHitLabel(drum, s.nombre);\r\n fireRipple(drum);\r\n addRecentPill(s.nombre);\r\n updateProgress();\r\n checkLogros();\r\n updateCTA();\r\n}\r\n\r\nfunction showHitLabel(drum, nombre) {\r\n var el = document.getElementById('hl' + drum);\r\n el.textContent = nombre;\r\n el.classList.remove('show');\r\n void el.offsetWidth;\r\n el.classList.add('show');\r\n var wrap = document.getElementById('conga-' + drum);\r\n wrap.classList.add('hit');\r\n var pf = wrap.querySelector('.parche-flash');\r\n if (pf) { pf.style.fill = 'rgba(255,200,100,0.25)'; setTimeout(function() { pf.style.fill = 'rgba(255,220,150,0)'; }, 80); }\r\n setTimeout(function() { wrap.classList.remove('hit'); }, 80);\r\n}\r\n\r\nfunction fireRipple(drum) {\r\n var rip = document.getElementById('rip' + drum);\r\n rip.classList.remove('fire'); void rip.offsetWidth; rip.classList.add('fire');\r\n}\r\n\r\nfunction addRecentPill(nombre) {\r\n var wrap = document.getElementById('recentHits');\r\n var pill = document.createElement('div');\r\n pill.className = 'recent-pill';\r\n pill.textContent = nombre;\r\n wrap.appendChild(pill);\r\n if (wrap.children.length > 6) wrap.removeChild(wrap.firstChild);\r\n}\r\n\r\nfunction updateHUD() {\r\n document.getElementById('scoreNum').textContent = score;\r\n var cel = document.getElementById('comboNum');\r\n cel.textContent = 'x' + combo;\r\n if (combo > 1) { cel.classList.remove('combo-flash'); void cel.offsetWidth; cel.classList.add('combo-flash'); }\r\n document.getElementById('tiposNum').textContent = discovered.size + '\/9';\r\n}\r\n\r\nfunction updateProgress() {\r\n var pct = Math.round(discovered.size \/ 9 * 100);\r\n document.getElementById('progFill').style.width = pct + '%';\r\n var lvl = LEVELS[0];\r\n for (var i = LEVELS.length - 1; i >= 0; i--) {\r\n if (discovered.size >= LEVELS[i].min) { lvl = LEVELS[i]; break; }\r\n }\r\n document.getElementById('progLevel').textContent = lvl.label;\r\n}\r\n\r\nfunction updateCTA() {\r\n var cta = document.getElementById('ctaUnlock');\r\n if (score >= 1) cta.classList.add('visible');\r\n var lvl = LEVELS[0];\r\n for (var i = LEVELS.length - 1; i >= 0; i--) {\r\n if (discovered.size >= LEVELS[i].min) { lvl = LEVELS[i]; break; }\r\n }\r\n document.getElementById('ctaSub').textContent = lvl.cta;\r\n if (discovered.size >= 9) {\r\n document.getElementById('ctaTitle').textContent = '\u00a1Maestro! Descubriste las 9 t\u00e9cnicas b\u00e1sicas.';\r\n } else if (discovered.size >= 5) {\r\n document.getElementById('ctaTitle').textContent = '\u00a1Ya tienes feeling! Hay mucho m\u00e1s por aprender.';\r\n } else if (score >= 1) {\r\n document.getElementById('ctaTitle').textContent = '\u00a1As\u00ed se siente! Cada golpe tiene un nombre.';\r\n }\r\n}\r\n\r\nfunction checkLogros() {\r\n LOGROS.forEach(function(l, i) {\r\n if (logrosDone.has(i)) return;\r\n var trigger = (l.hits && score === l.hits) || (l.disc && discovered.size === l.disc);\r\n if (trigger) { logrosDone.add(i); showLogro(l.text); }\r\n });\r\n}\r\n\r\nfunction showLogro(text) {\r\n var el = document.getElementById('logroToast');\r\n document.getElementById('logroText').textContent = text;\r\n el.classList.add('show');\r\n setTimeout(function() { el.classList.remove('show'); }, 2800);\r\n}\r\n\r\n\/* \u2500\u2500 EVENTOS TOUCH \/ CLICK \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 *\/\r\ndocument.querySelectorAll('.zona').forEach(function(z) {\r\n function handle(e) {\r\n e.preventDefault();\r\n golpear(parseInt(z.dataset.drum), parseInt(z.dataset.zona));\r\n }\r\n z.addEventListener('touchstart', handle, { passive: false });\r\n z.addEventListener('mousedown', handle);\r\n});\r\n\r\n\/* Clic en el cuerpo del SVG tambi\u00e9n dispara zona 0 *\/\r\ndocument.querySelectorAll('.conga-svg-wrap').forEach(function(w, i) {\r\n w.addEventListener('mousedown', function(e) {\r\n if (!e.target.classList.contains('zona')) golpear(i, 0);\r\n });\r\n w.addEventListener('touchstart', function(e) {\r\n if (!e.target.classList.contains('zona')) { e.preventDefault(); golpear(i, 0); }\r\n }, { passive: false });\r\n});\r\n\r\n\/* \u2500\u2500 TECLADO \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\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\nvar KEYS = {\r\n 'a':0,'s':1,'d':2, \/* tumbadora *\/\r\n 'j':3,'k':4,'l':5, \/* conga *\/\r\n 'b':6,'n':7,'m':8 \/* quinto *\/\r\n};\r\ndocument.addEventListener('keydown', function(e) {\r\n if (e.repeat) return;\r\n var idx = KEYS[e.key.toLowerCase()];\r\n if (idx === undefined) return;\r\n var drum = Math.floor(idx \/ 3), zona = idx % 3;\r\n golpear(drum, zona);\r\n});\r\n\r\n\/* Ocultar hints de teclado en m\u00f3vil *\/\r\nif ('ontouchstart' in window) document.getElementById('kbHints').style.display = 'none';\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Toca las Congas | La Conga Secreta Pru\u00e9balo ahora Toca lasCongas Haz clic o toca cada zona del tambor. Cada golpe tiene un nombre y una t\u00e9cnica. Descubre cu\u00e1ntos conoces \u2014 y cu\u00e1les te faltan. ASD Tumbadora JKL Conga BNM Quinto Tumbadora Conga Quinto Toca el parche \u00b7 usa el teclado \u00b7 o haz clic […]<\/p>\n","protected":false},"author":26,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-29439","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/staging.lacongasecreta.com\/it\/wp-json\/wp\/v2\/pages\/29439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.lacongasecreta.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.lacongasecreta.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.lacongasecreta.com\/it\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.lacongasecreta.com\/it\/wp-json\/wp\/v2\/comments?post=29439"}],"version-history":[{"count":5,"href":"https:\/\/staging.lacongasecreta.com\/it\/wp-json\/wp\/v2\/pages\/29439\/revisions"}],"predecessor-version":[{"id":29445,"href":"https:\/\/staging.lacongasecreta.com\/it\/wp-json\/wp\/v2\/pages\/29439\/revisions\/29445"}],"wp:attachment":[{"href":"https:\/\/staging.lacongasecreta.com\/it\/wp-json\/wp\/v2\/media?parent=29439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}