:root{--paper:#F7F5F0;--card:#FFFDF8;--ink:#1F2328;--ink-2:#47505A;--muted:#6E7781;--line:#E3DFD6;--accent:#C2410C;--accent-soft:#FBE6D9;--ok:#15803D;--ok-soft:#DCFCE7;--warn:#B45309;--blue:#1D4ED8;
--serif:"Iowan Old Style",Georgia,serif;--sans:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--r:16px;--sh:0 1px 2px rgba(0,0,0,.04),0 8px 24px -8px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.05);--wrap:1120px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans)}
a{color:var(--accent)}img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}.read{max-width:720px}
header.top{position:sticky;top:0;z-index:20;background:rgba(247,245,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:16px;height:62px}
.logo{font:700 22px var(--serif);color:var(--ink);text-decoration:none;display:flex;gap:8px;align-items:center}.logo svg{width:28px;height:28px}
nav.main{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}nav.main a{color:var(--ink-2);text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:600;font-size:15px}
nav.main a:hover,nav.main a[aria-current]{background:var(--accent-soft);color:var(--accent)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:20px}
@media(max-width:760px){.menu-btn{display:block}nav.main{display:none;position:absolute;top:62px;left:0;right:0;background:var(--paper);flex-direction:column;padding:10px 20px;border-bottom:1px solid var(--line)}nav.main.open{display:flex}}
h1,h2,h3{font-family:var(--serif);line-height:1.2}h1{font-size:clamp(30px,5vw,48px);margin:.4em 0}h2{font-size:clamp(24px,3.4vw,32px);margin-top:1.6em}
.hero{padding:44px 0 20px}.lead{font-size:19px;color:var(--ink-2);max-width:680px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:12px;padding:12px 20px;font:600 16px var(--sans);cursor:pointer;text-decoration:none}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--sh)}.btn.sm{padding:7px 12px;font-size:14px;border-radius:9px}
.btn:disabled{opacity:.5}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:20px}.card h3{margin:.2em 0 .4em;font-size:21px}
a.card{color:inherit;text-decoration:none;transition:transform .2s}a.card:hover{transform:translateY(-3px)}
.app{background:var(--card);border-radius:22px;box-shadow:var(--sh);padding:18px;margin:18px 0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.tabs button{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 14px;font:600 14px var(--sans);cursor:pointer;color:var(--ink-2)}
.tabs button[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}label.f{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:4px;font-weight:600}
select,input[type=number]{font:16px var(--sans);padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;min-width:0}
.tuner{display:grid;grid-template-columns:1fr;gap:14px;justify-items:center;text-align:center}
.gauge{width:100%;max-width:440px}.note-big{font:700 72px/1 var(--serif)}.note-big sub{font-size:28px;color:var(--muted)}
.cents{font-weight:700;font-size:18px}.freq{color:var(--muted);font-variant-numeric:tabular-nums}
.in-tune .note-big{color:var(--ok)}.strings{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.strings button{min-width:56px;padding:10px 8px;border-radius:12px;border:2px solid var(--line);background:#fff;font:700 17px var(--sans);cursor:pointer}
.strings button.target{border-color:var(--accent);background:var(--accent-soft)}.strings button.done{border-color:var(--ok);background:var(--ok-soft)}
.strings button small{display:block;font-weight:500;font-size:11px;color:var(--muted)}
.hint{font-size:14px;color:var(--muted);max-width:560px}.status{font-size:14px;padding:6px 12px;border-radius:999px;background:var(--paper)}
.diag{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.chordcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center;cursor:pointer}
.chordcard:hover{border-color:var(--accent)}.chordcard b{font-size:18px}.chordcard svg{width:100%;height:auto}
.metro .bpm{font:700 84px/1 var(--serif);font-variant-numeric:tabular-nums}.beats{display:flex;gap:10px;justify-content:center;margin:14px 0;flex-wrap:wrap}
.beat{width:34px;height:34px;border-radius:50%;background:var(--line);border:2px solid transparent;cursor:pointer}.beat.acc{border-color:var(--accent)}.beat.mute{opacity:.25}.beat.on{background:var(--accent);transform:scale(1.15)}
input[type=range]{width:100%;max-width:440px;accent-color:var(--accent)}
.ad{border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:12px;text-align:center;padding:26px;margin:24px 0}
table{border-collapse:collapse;width:100%;font-size:15px}td,th{border-bottom:1px solid var(--line);padding:8px;text-align:left}
.faq details{background:var(--card);border-radius:12px;box-shadow:var(--sh);padding:12px 16px;margin:10px 0}.faq summary{font-weight:700;cursor:pointer}
footer{margin-top:60px;border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:14px}footer a{color:var(--ink-2);margin-right:14px}
.crumbs{font-size:14px;color:var(--muted);margin-top:18px}.crumbs a{color:var(--muted)}
.metro .hint,.tuner .hint{margin-left:auto;margin-right:auto}
.head{width:100%;display:flex;justify-content:center}
.hs .str.on .sline{animation:vib .09s linear infinite alternate}
@keyframes vib{from{transform:translateX(-.8px)}to{transform:translateX(.8px)}}
.hs .peg:hover .knob{filter:brightness(1.08)}
@media(prefers-reduced-motion:reduce){.hs .str.on .sline{animation:none}}
/* Paneles de herramientas oscuros */
.app{background:radial-gradient(120% 90% at 50% 0%,#2a2d33 0%,#17191d 55%,#0d0e10 100%);color:#ECE7DD;box-shadow:0 20px 50px -20px rgba(0,0,0,.55),0 0 0 1px rgba(212,165,55,.18);border:1px solid #2c2f35}
.app .hint,.app label.f,.app .freq{color:#A9A399}.app h3{color:#F3EEE4}
.app .tabs button{background:#22252a;border-color:#3a3e45;color:#CFC9BE}.app .tabs button[aria-selected=true]{background:linear-gradient(#e7c66a,#b8892a);color:#1a1405;border-color:#d4a537}
.app select,.app input[type=number]{background:#1f2227;color:#F1ECE2;border-color:#3e424a}
.app .status{background:#24272c;color:#D8D2C6}
.app .note-big{color:#F7F2E8}.app .note-big sub{color:#9c968c}.app.in-tune .note-big,.app .in-tune .note-big{color:#4ADE80}
.app .gauge path:first-of-type{stroke:#33373e}.app .gauge circle{fill:#E9D9A8}.app .gauge text{fill:#9c968c}
.app .strings button{background:#1f2227;border-color:#3e424a;color:#F1ECE2}.app .strings button small{color:#9c968c}
.app .strings button.target{background:#3a2112;border-color:#E07A3A}.app .strings button.done{background:#12301d;border-color:#22c55e}
.app .btn.ghost{background:#24272c;color:#EDE7DC;box-shadow:0 0 0 1px #3e424a}
.app .chordcard{background:#1d2025;border-color:#353941;color:#F1ECE2}.app .chordcard:hover{border-color:#d4a537}
.app .chordcard line{stroke:#bdb6a8}.app .chordcard text{fill:#d9d3c7}.app .chordcard text[fill="#6E7781"]{fill:#9c968c}
.app .chordcard svg>rect[fill="#1F2328"]{fill:#E9D9A8}.app .chordcard circle[fill="none"]{stroke:#E9D9A8}
.app .metro .bpm{color:#F7F2E8}.app .beat{background:#3a3e45}.app .beat.on{background:#E07A3A;box-shadow:0 0 14px #E07A3A}.app .beat.acc{border-color:#d4a537}
.app input[type=range]{accent-color:#d4a537}
.app .head svg{filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
.app .head .peg ellipse{stroke:#8a7444;stroke-width:1.4}
.neck{margin:6px 0 4px;border-radius:14px;overflow:hidden;filter:drop-shadow(0 10px 20px rgba(0,0,0,.55))}
.nstr.vib .sl{animation:nvib .045s linear infinite alternate,nglow 1.6s ease-out forwards;filter:url(#nkgl)}
@keyframes nvib{from{transform:translateY(calc(var(--amp,2px)*-1))}to{transform:translateY(var(--amp,2px))}}
@keyframes nglow{0%{stroke:#ffb27a}60%{stroke:#ffd9b8}}
.pk .key.ct.w{fill:#ffe1c9}.pk .key.ct.b{fill:#a8441a}.pk .key.lit{fill:#f08a4a!important;filter:drop-shadow(0 0 8px #f08a4a)}
@media(prefers-reduced-motion:reduce){.nstr.vib .sl{animation:nglow 1.6s ease-out forwards}}
.hs2.vib .hl{animation:hvib .04s linear infinite alternate;filter:url(#hpgl);stroke:#ffd9b8}
.hm .lit{fill:#f08a4a!important;filter:drop-shadow(0 0 8px #f08a4a)}
@keyframes hvib{from{transform:translateX(-1.5px)}to{transform:translateX(1.5px)}}
/* Vidrio esmerilado oscuro + fondo de color suave detrás */
main.wrap{position:relative}
main.wrap::before{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;top:120px;height:1100px;pointer-events:none;
 background:radial-gradient(38% 40% at 18% 30%,rgba(255,140,80,.55),transparent 70%),radial-gradient(35% 38% at 82% 22%,rgba(110,120,255,.45),transparent 70%),radial-gradient(40% 40% at 60% 75%,rgba(60,200,170,.38),transparent 70%),radial-gradient(30% 30% at 30% 85%,rgba(230,90,200,.32),transparent 70%);filter:blur(30px)}
.app{position:relative;background:linear-gradient(160deg,rgba(38,40,46,.72),rgba(14,15,18,.80));-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
 border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.03),0 24px 60px -24px rgba(0,0,0,.6)}
.app::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.app>*{position:relative}
html,body{overflow-x:clip}

.progress-tn{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 8px;font-weight:700;color:#cfe9d6;font-size:.95rem}
.strings button.tuned{border-color:#22c55e!important;background:#12301d!important;color:#bbf7d0!important;position:relative}
.strings button.tuned::after{content:"✓";position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:#22c55e;color:#fff;font-size:12px;line-height:18px;text-align:center}
.head .peg.tuned .knob{filter:sepia(1) hue-rotate(75deg) saturate(2.6) brightness(1.05) drop-shadow(0 0 4px rgba(34,197,94,.8))}
.all-tuned .progress-tn{color:#4ADE80;text-shadow:0 0 12px rgba(74,222,128,.6)}
.all-tuned .tuner{box-shadow:0 0 0 1px rgba(74,222,128,.35),0 0 38px rgba(74,222,128,.22);border-radius:18px;transition:box-shadow .6s}

.digi{display:none;flex-direction:column;align-items:center;gap:6px;margin:4px auto 10px}
.digital .gauge{display:none}.digital .digi{display:flex}
.digi .dl{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#a8a29e}
.dcols{display:flex;gap:10px;padding:10px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.05)}
.dcol{display:flex;flex-direction:column;gap:3px}
.seg{display:block;width:92px;height:7px;border-radius:2px;background:#1c1d20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);transition:background .08s,box-shadow .12s,opacity .12s}
.seg[data-k="0"]{height:10px}
.seg.g{--c:#22e06b;--d:rgba(34,224,107,.17)}.seg.y{--c:#facc15;--d:rgba(250,204,21,.14)}.seg.r{--c:#ef4444;--d:rgba(239,68,68,.15)}
.seg{background:var(--d)}
.seg.on{background:var(--c);opacity:.72;box-shadow:0 0 8px var(--c)}
.seg.cur{opacity:1;box-shadow:0 0 6px #fff8,0 0 16px var(--c),0 0 28px var(--c);filter:brightness(1.25)}
.seg.pk{background:var(--c);opacity:.9;box-shadow:0 0 10px var(--c)}
@media(max-width:520px){.seg{width:64px;height:6px}.seg[data-k="0"]{height:9px}}

.mtoggle{display:flex;width:max-content;margin:6px auto 14px;padding:4px;gap:4px;border-radius:999px;background:rgba(0,0,0,.4);box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
.mtoggle button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:#bdb6aa;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.mtoggle button:hover{color:#fff}
.mtoggle button[aria-pressed=true]{background:linear-gradient(180deg,#f0a24a,#d2691e);color:#1b1006;box-shadow:0 0 0 1px #f6c27a,0 0 16px rgba(240,140,50,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.mtoggle button:focus-visible{outline:2px solid #f6c27a;outline-offset:2px}
/* ---- Compositor ---- */
.cmp{position:relative;color:#ece7de}
.cmp .row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:10px}
.cmp .grow{flex:1 1 200px}.cmp .grow input{width:100%}
.cmp input[type=text],.cmp .c-title,.cmp .c-lyric,.cmp .c-tempo{background:rgba(0,0,0,.35);color:#f5f1ea;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px 10px;font:inherit}
.cmp .chk,.cmp .sw{display:flex;align-items:center;gap:6px;font-size:.9rem;color:#d6d0c6;min-height:40px}
.ctools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border-radius:14px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);margin-bottom:10px}
.ctools .tb{min-width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#f2ede4;font-size:1.25rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ctools .tb[aria-pressed=true]{background:linear-gradient(180deg,#f0a24a,#d2691e);color:#1b1006;border-color:#f6c27a;box-shadow:0 0 12px rgba(240,140,50,.5)}
.ctools .sep{width:1px;height:28px;background:rgba(255,255,255,.15);margin:0 4px}
.ctools .lyr{margin-left:auto}.ctools .lyr input{width:170px}
.paper{background:#fbf9f4;border-radius:14px;overflow-x:auto;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.06);-webkit-overflow-scrolling:touch}
.score-wrap svg{display:block;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
.score-wrap .nn.sel{fill:#c2410c;stroke:#c2410c}.score-wrap line.nn.sel{stroke:#c2410c}.score-wrap ellipse.nn.sel[fill=none]{fill:none}
.score-wrap .nn.play{fill:#16a34a;stroke:#16a34a}.score-wrap line.nn.play{stroke:#16a34a}.score-wrap ellipse.nn.play[fill=none]{fill:none}
.score-wrap text.nn.sel{fill:#c2410c}.score-wrap .cs{cursor:pointer}.score-wrap .cs:hover{text-decoration:underline}
.chelp{font-size:.82rem;margin:8px 2px 10px;color:#a9a39a!important}
.cpop{position:absolute;z-index:20;display:flex;gap:6px;align-items:center;padding:10px;border-radius:12px;background:rgba(20,20,24,.96);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.12)}
.cpop[hidden]{display:none}.cpop select{min-height:38px}
.mini{display:flex;justify-content:center;margin:6px 0 14px}.mk{cursor:pointer}.mk.on{fill:#f0a24a}.mk.bk.on{fill:#d2691e}
.cplay,.cmet{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);margin-bottom:10px}
.cmet .mt{align-self:center;color:#f6c27a}
.sw input{display:none}.sw span{width:42px;height:24px;border-radius:12px;background:#3a3a3f;position:relative;transition:.2s;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.sw span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#ddd;transition:.2s}
.sw input:checked+span{background:#d2691e;box-shadow:0 0 10px rgba(240,140,50,.5)}.sw input:checked+span::after{left:21px;background:#fff}
.mlights{display:flex;gap:8px;align-items:center;margin-left:auto;min-height:40px}
.mlights i{width:16px;height:16px;border-radius:50%;background:#2c2c31;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.mlights i.a{width:20px;height:20px}.mlights i.on{background:#f0a24a;box-shadow:0 0 12px #f0a24a}.mlights i.a.on{background:#22e06b;box-shadow:0 0 14px #22e06b}
.dl{position:relative}.dl summary{list-style:none;cursor:pointer}.dl summary::-webkit-details-marker{display:none}
.dlm{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;min-width:210px;padding:6px;border-radius:12px;background:rgba(20,20,24,.97);box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.12)}
.dlm button,.dlm label{all:unset;padding:10px 12px;border-radius:8px;color:#f2ede4;cursor:pointer;font-size:.95rem}.dlm button:hover,.dlm label:hover{background:rgba(255,255,255,.08)}
.cprog{display:flex;gap:10px;align-items:center;margin:6px 0}.cprog[hidden]{display:none}.cprog .bar{flex:1;height:8px;border-radius:4px;background:#2c2c31;overflow:hidden}.cprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f0a24a,#22e06b)}
.cinst-h{margin:16px 0 6px;color:#f2ede4}
.cinst>.row,.cinst .cur,.cinst>h3,.cinst .key{display:none!important}
@media(max-width:600px){.ctools .lyr{margin-left:0;width:100%}.ctools .lyr input{width:100%}.mlights{margin-left:0}.cbar .grow{flex-basis:100%}}
@media print{header.top,footer,.ad,.hero,.cmp>*:not(.paper),.read,.faq,h2{display:none!important}.app{background:none!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important}.paper{box-shadow:none;overflow:visible}}