.nota-metodo{max-width:62ch}.lead{color:var(--texto-2);margin:0 0 .6rem;font-size:.95rem}.aviso{color:var(--texto-2);border-left:2px solid var(--naranja);margin:0;padding-left:.7rem;font-size:.82rem}.layout{flex-direction:column;gap:1.75rem;display:flex}.tarjeta{background:var(--bg-3);border:1px solid var(--glass-borde);border-radius:var(--radio-firma);padding:1.3rem 1.2rem;position:relative;overflow:hidden;box-shadow:0 8px 24px #00000059}.tarjeta:after{content:"";border-top:2px solid var(--naranja);border-left:2px solid var(--naranja);opacity:.6;pointer-events:none;border-top-left-radius:3px;width:14px;height:14px;position:absolute;top:11px;left:11px}.col-principal{flex-direction:column;gap:1.4rem;display:flex}@media (width>=860px){.col-principal{grid-template-columns:310px 1fr;grid-template-areas:"generos generos""bombo patron""bombo tempo";align-items:start;gap:1rem 1.2rem;display:grid}.generos{grid-area:generos}.bombo-card{grid-area:bombo}.patron-card{grid-area:patron}.tempo-card{grid-area:tempo}}.generos{flex-wrap:wrap;gap:.5rem;display:flex}.genero-btn{background:var(--fondo-2);border:1px solid var(--glass-borde);color:var(--texto-2);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;border-radius:100px;padding:.5rem .95rem;font-family:Montserrat,sans-serif;font-size:.76rem;font-weight:700;transition:border-color .15s,color .15s}.genero-btn.on{border-color:var(--naranja);color:var(--naranja);background:#ff7a1a14}.genero-btn:hover{border-color:var(--celeste)}.selectores{flex-wrap:wrap;align-items:flex-end;gap:1rem;margin-bottom:1rem;display:flex}.selector .etiqueta-grupo{color:var(--texto-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem;font-size:.72rem;font-weight:600;display:block}.seg{border:1px solid var(--glass-borde);background:var(--fondo-2);border-radius:10px;display:inline-flex;overflow:hidden}.seg button{color:var(--texto-2);cursor:pointer;background:0 0;border:none;padding:9px 13px;font-family:Inter,sans-serif;font-size:.85rem;font-weight:600;line-height:1}.seg button.on{background:var(--naranja);color:var(--fondo)}.seg button .fig{font-family:Georgia,serif;font-size:1.15rem}.grilla-scroll{scrollbar-width:thin;scrollbar-color:var(--bg-3) transparent;padding-bottom:4px;overflow-x:auto}.grilla-scroll::-webkit-scrollbar{height:6px}.grilla-scroll::-webkit-scrollbar-track{background:0 0}.grilla-scroll::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:100px}.patron{gap:5px;min-width:max-content;display:grid}.patron-fila{align-items:center;gap:5px;display:flex}.patron-label{text-transform:uppercase;letter-spacing:.06em;flex:none;width:74px;font-size:.68rem;font-weight:700;line-height:1.2}.patron-label small{text-transform:none;letter-spacing:0;color:var(--texto-2);font-size:.64rem;font-weight:400;display:block}.fila-agudo .patron-label{color:var(--celeste)}.fila-grave .patron-label{color:var(--naranja)}.celda{border:1px solid var(--glass-borde);background:var(--fondo-2);cursor:pointer;border-radius:8px;flex:none;width:34px;height:44px;padding:0;transition:background .1s,border-color .1s,box-shadow .12s,filter .12s;position:relative}.celda.inicio-tiempo{margin-left:9px}.fila-agudo .celda.v1{border-color:var(--celeste);background:#38bdf866}.fila-agudo .celda.v2{background:var(--celeste);border-color:var(--celeste)}.fila-grave .celda.v1{border-color:var(--naranja);background:#ff7a1a66}.fila-grave .celda.v2{background:var(--naranja);border-color:var(--naranja)}.celda.v2:after{content:">";color:var(--fondo);justify-content:center;align-items:center;font-family:Montserrat,sans-serif;font-size:.9rem;font-weight:800;display:flex;position:absolute;inset:0}.celda.playhead{box-shadow:0 0 0 2px var(--texto),0 0 16px 4px #f8fafc99;filter:brightness(1.35);z-index:1}.patron-tiempos{gap:5px;margin-left:79px;display:flex}.patron-tiempos span{text-align:center;width:34px;color:var(--texto-2);flex:none;font-size:.68rem;font-weight:600}.patron-tiempos span.inicio-tiempo{margin-left:9px}.patron-acciones{flex-wrap:wrap;gap:.6rem;margin-top:.9rem;display:flex}.mini-btn{border:1px solid var(--glass-borde);color:var(--texto-2);cursor:pointer;background:0 0;border-radius:100px;padding:.4rem .85rem;font-family:Inter,sans-serif;font-size:.74rem;font-weight:600}.mini-btn:hover{border-color:var(--celeste);color:var(--celeste)}.bombo-card{flex-direction:column;align-items:center;gap:1.1rem;display:flex}.bombo-visual{aspect-ratio:770/840;width:100%;max-width:320px;margin:0 auto;position:relative}.bombo-foto{object-fit:contain;filter:drop-shadow(0 16px 28px #0000008c);user-select:none;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.palito-img{filter:drop-shadow(0 3px 6px #00000073);transform-origin:9% 68%;height:auto;transform:rotate(var(--rot));user-select:none;pointer-events:none;transition:transform 50ms ease-out;position:absolute}.mallet-parche{--rot:-121deg;width:85%;top:69%;left:79%}.mallet-aro{--rot:-55deg;width:55%;top:63%;left:-17%}.anillo-parche{aspect-ratio:1;border:4px solid var(--naranja);opacity:0;pointer-events:none;border-radius:50%;width:11%;position:absolute;top:23%;left:50%;transform:translate(-50%,-50%)scale(.35)}.anillo-parche.acento{border-width:6px}.flash-aro{aspect-ratio:1;opacity:0;pointer-events:none;filter:blur(.5px);background:#ffe3ba;border-radius:50%;width:8%;position:absolute;top:33%;left:14%}.btn-play{min-width:190px;padding:1rem 2rem;font-size:.95rem}.tempo-fila{flex-wrap:wrap;align-items:center;gap:.9rem;display:flex}.bpm-display{color:var(--texto);min-width:96px;font-family:Montserrat,sans-serif;font-size:2.2rem;font-weight:800}.bpm-display small{color:var(--texto-2);text-transform:uppercase;letter-spacing:.08em;margin-top:.15rem;font-family:Inter,sans-serif;font-size:.68rem;font-weight:600;display:block}.stepper{border:1px solid var(--glass-borde);background:var(--fondo);border-radius:9px;align-items:center;display:flex;overflow:hidden}.stepper button{color:var(--texto);cursor:pointer;background:0 0;border:none;width:40px;height:40px;font-size:1.25rem}.stepper button:active{background:var(--glass)}input[type=range]#bpmSlider{-webkit-appearance:none;background:var(--fondo);width:100%;height:5px;accent-color:var(--naranja);border-radius:100px;outline:none;margin-top:.9rem}.tempo-sugerido{color:var(--texto-2);margin:.7rem 0 0;font-size:.76rem}.tempo-sugerido strong{color:var(--celeste);font-weight:600}.volumen{color:var(--texto-2);align-items:center;gap:.6rem;margin-top:.9rem;font-size:.78rem;display:flex}input[type=range]#volSlider{-webkit-appearance:none;background:var(--fondo);width:120px;height:4px;accent-color:var(--celeste);border-radius:100px;outline:none}.instrucciones-titulo{letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);margin:0 0 1.1rem;font-family:Montserrat,sans-serif;font-size:.76rem;font-weight:800}.instrucciones ol{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem 1.6rem;margin:0;padding:0;list-style:none;display:grid}.instrucciones li{color:var(--texto-2);align-items:flex-start;gap:.65rem;font-size:.85rem;line-height:1.5;display:flex}.paso-texto{flex:1;min-width:0}.paso-texto strong{color:var(--texto);font-weight:700}.paso-num{width:22px;height:22px;color:var(--naranja);background:#ff7a1a26;border:1px solid #ff7a1a66;border-radius:50%;flex:none;justify-content:center;align-items:center;margin-top:1px;font-family:Montserrat,sans-serif;font-size:.72rem;font-weight:800;display:flex}.mallet-parche.golpe{animation:.16s ease-out golpeParche}.mallet-aro.golpe{animation:.13s ease-out golpeAro}@keyframes golpeParche{0%{transform:rotate(var(--rot))}35%{transform:rotate(calc(var(--rot) + 13deg))}to{transform:rotate(var(--rot))}}@keyframes golpeAro{0%{transform:rotate(var(--rot))}30%{transform:rotate(calc(var(--rot) - 10deg))}to{transform:rotate(var(--rot))}}.anillo-parche.golpe{animation:.5s ease-out pulsoParche}@keyframes pulsoParche{0%{opacity:.55;transform:translate(-50%,-50%)scale(.35)}to{opacity:0;transform:translate(-50%,-50%)scale(2.6)}}.anillo-parche.acento.golpe{animation:.55s ease-out pulsoParcheAcento}@keyframes pulsoParcheAcento{0%{opacity:.8;transform:translate(-50%,-50%)scale(.35)}to{opacity:0;transform:translate(-50%,-50%)scale(3.1)}}.flash-aro.golpe{animation:.18s ease-out flashAro}@keyframes flashAro{0%{opacity:1}to{opacity:0}}@media (width<=600px){.btn-play{width:100%}}