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