/* ===== paginas de ferramentas ===== */
.tool-main{padding:clamp(110px,14vw,150px) 0 clamp(60px,8vw,100px);min-height:70vh}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--mute);margin-bottom:clamp(26px,4vw,40px)}
.crumbs a{color:var(--mute);text-decoration:none}.crumbs a:hover{color:var(--chalk)}.crumbs b{color:var(--chalk);font-weight:600}
.tool-head{max-width:820px;margin-bottom:clamp(30px,5vw,56px)}
.tool-head .eyebrow{font:700 15px var(--body);color:var(--amber);display:flex;gap:10px;align-items:center;margin-bottom:14px}
.tool-head h1{font-size:clamp(58px,10vw,150px);line-height:.85}
.tool-head h1 span{color:var(--red)}
.tool-head .lead{color:var(--mute);font-size:clamp(17px,1.4vw,20px);margin-top:20px;max-width:58ch}

.panel{background:var(--stage2);border:1px solid rgba(243,241,236,.09);border-radius:28px;padding:clamp(20px,3.4vw,44px);box-shadow:0 40px 80px rgba(0,0,0,.35)}
.panel+.panel{margin-top:22px}
.lbl,.panel legend,.sel{display:block;font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;background:var(--stage);border:1px solid rgba(243,241,236,.08)}
.seg button{border:0;background:none;color:var(--chalk);font:700 15px var(--body);padding:10px 14px;border-radius:10px;cursor:pointer;min-width:44px;transition:background .2s,color .2s}
.seg button:hover{background:rgba(243,241,236,.07)}
.seg button.on{background:var(--chalk);color:var(--stage)}
.rnd{width:56px;height:56px;border-radius:50%;border:1px solid rgba(243,241,236,.2);background:var(--stage);color:var(--chalk);font-size:18px;cursor:pointer;flex:none;transition:background .2s,transform .1s}
.rnd:hover{background:rgba(243,241,236,.08)}.rnd:active{transform:scale(.94)}
.play{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:999px;background:var(--red);color:#fff;font:800 18px var(--body);padding:20px 38px;cursor:pointer;transition:transform .15s,background .2s;min-width:200px}
.play:hover{background:#c92c24}.play:active{transform:scale(.97)}
.ghost{border:1px solid rgba(243,241,236,.25);background:none;color:var(--chalk);font:700 16px var(--body);padding:18px 26px;border-radius:999px;cursor:pointer;transition:background .2s,transform .1s}
.ghost:hover{background:rgba(243,241,236,.07)}
.ghost.sm{font-size:13px;padding:8px 14px}
.ghost.hit{animation:hit .25s}
@keyframes hit{50%{transform:scale(.94);background:rgba(226,56,47,.25)}}
select{appearance:none;background:var(--stage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A49E97' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center;border:1px solid rgba(243,241,236,.15);color:var(--chalk);font:600 16px var(--body);padding:13px 42px 13px 16px;border-radius:12px;margin-top:8px;display:block;min-width:190px;text-transform:none;letter-spacing:0}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--red) var(--p,40%),rgba(243,241,236,.12) var(--p,40%));outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--chalk);border:5px solid var(--red);cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--chalk);border:5px solid var(--red);cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* metronomo */
.metro{display:grid;gap:clamp(24px,4vw,48px)}
@media(min-width:960px){.metro{grid-template-columns:1.25fr .75fr;align-items:center}}
.m-stage{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.m-beats{display:flex;gap:12px;justify-content:center}
.m-beats i{width:20px;height:20px;border-radius:50%;background:rgba(243,241,236,.12);transition:background .08s,transform .08s}
.m-beats i.acc{box-shadow:0 0 0 2px rgba(226,56,47,.5)}
.m-beats i.on{background:var(--chalk);transform:scale(1.35)}
.m-beats i.acc.on{background:var(--red)}
.m-bpm{display:flex;align-items:center;gap:clamp(14px,3vw,34px)}
.m-num{display:flex;flex-direction:column;align-items:center;min-width:clamp(170px,22vw,260px)}
.m-num output{font:900 clamp(110px,15vw,200px)/.8 var(--disp);font-variant-numeric:tabular-nums;transition:transform .08s}
.metro.hit .m-num output{animation:pulse .12s}
@keyframes pulse{50%{transform:scale(calc(1 + .04 * var(--pulse,1)))}}
.m-num span{font:700 14px var(--body);letter-spacing:.2em;color:var(--mute);margin-top:12px}
.m-num em{font-style:normal;font:700 16px var(--body);color:var(--amber);margin-top:6px}
.m-stage input[type=range]{max-width:520px}
.m-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.m-opts{display:grid;gap:22px}
.m-opts fieldset{border:0}
.vol{display:block;font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.vol input{margin-top:14px;--p:80%}
.chk{display:flex;gap:10px;align-items:center;font-weight:600;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--red)}

/* afinador */
.tuner{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.t-top{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;width:100%}
.t-gauge{width:min(460px,100%)}
.t-gauge svg{width:100%;overflow:visible}
.t-gauge .arc{fill:none;stroke:rgba(243,241,236,.1);stroke-width:14;stroke-linecap:round}
.t-gauge line{stroke:rgba(243,241,236,.3);stroke-width:2;stroke-linecap:round}
.t-gauge line.big{stroke:rgba(243,241,236,.6)}
.t-gauge line.mid{stroke:#3DDC84;stroke-width:4}
#tNeedle{stroke:var(--red);stroke-width:5;transform-origin:150px 150px;transition:transform .12s linear,stroke .2s}
.t-gauge .hub{fill:var(--chalk)}
.tuner.ok #tNeedle{stroke:#3DDC84}
.t-note{font:900 clamp(96px,14vw,170px)/.8 var(--disp);transition:color .2s}
.t-note sub{font-size:.3em;color:var(--mute);vertical-align:baseline;margin-left:4px}
.tuner.ok .t-note{color:#3DDC84}
.t-info{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.t-info span:first-child{font-weight:700;font-size:18px}
.t-info span:last-child{color:var(--mute);font-variant-numeric:tabular-nums}
.t-strings{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.t-strings button{display:grid;grid-template-columns:auto auto;gap:2px 10px;align-items:center;text-align:left;padding:12px 16px;border-radius:16px;border:1px solid rgba(243,241,236,.14);background:var(--stage);color:var(--chalk);cursor:pointer;transition:.2s}
.t-strings b{font:900 30px/1 var(--disp);grid-row:span 2}
.t-strings small{font-size:12px;color:var(--mute)}
.t-strings i{font-size:12px;color:var(--mute)}
.t-strings button.on{border-color:var(--red);background:rgba(226,56,47,.12)}
.t-msg{color:var(--mute);font-size:14px;max-width:48ch}
#tStart.on{background:var(--stage);border:1px solid rgba(243,241,236,.25)}

/* acordes */
.c-pick{display:grid;gap:24px}
@media(min-width:980px){.c-pick{grid-template-columns:auto 1fr;align-items:start}}
.keys12{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-width:440px}
.keys12 button{border:1px solid rgba(243,241,236,.14);background:var(--chalk);color:var(--stage);font:900 22px/1 var(--disp);padding:12px 4px;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.15s}
.keys12 button.sus{background:#1d1a1e;color:var(--chalk)}
.keys12 small{font:600 10px var(--body);opacity:.6}
.keys12 button.on{background:var(--red);color:#fff;border-color:var(--red)}
.wrap-seg{display:flex}
.wrap-seg button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.wrap-seg small{font-size:12px;opacity:.6;font-weight:600}
.c-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin:clamp(26px,4vw,40px) 0 8px;padding-top:clamp(22px,3vw,30px);border-top:1px solid rgba(243,241,236,.1)}
.c-head h2{font:900 clamp(64px,8vw,110px)/.85 var(--disp)}
.c-head p{color:var(--mute);font-weight:600}
.c-voicings{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:20px}
.voice{background:var(--stage);border:1px solid rgba(243,241,236,.08);border-radius:22px;padding:18px 14px 16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.voice svg{width:100%;max-width:200px}
.voice .nut{fill:var(--chalk)}.voice .fret{stroke:rgba(243,241,236,.25);stroke-width:1.5}.voice .str{stroke:rgba(243,241,236,.55)}
.voice .dot{fill:var(--chalk)}.voice .dot.root{fill:var(--red)}.voice .barre{fill:var(--chalk)}
.voice .op{fill:none;stroke:var(--chalk);stroke-width:2}.voice .mx{fill:var(--mute);font:700 18px var(--body)}
.voice .fr{fill:var(--mute);font:700 14px var(--body)}
.voice figcaption{font-weight:700;font-size:14px;color:var(--mute);text-align:center}

/* transpositor e campo harmonico */
.tr-bar{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-bottom:22px}
.stepper{display:flex;align-items:center;gap:16px}
.stepper output{display:block;font:900 54px/.9 var(--disp);text-align:center;min-width:70px;font-variant-numeric:tabular-nums}
.stepper small{display:block;text-align:center;font-size:12px;color:var(--mute);font-weight:700}
.capo{color:var(--amber);font-weight:600;flex:1;min-width:220px}
.tr-cols{display:grid;gap:18px}
@media(min-width:900px){.tr-cols{grid-template-columns:1fr 1fr}}
.tr-cols .lbl{display:flex;justify-content:space-between;align-items:center;min-height:34px}
textarea,.out{width:100%;min-height:320px;background:var(--stage);border:1px solid rgba(243,241,236,.12);border-radius:16px;color:var(--chalk);font:500 15px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:18px;resize:vertical;white-space:pre;overflow:auto;tab-size:4}
.out b{color:var(--amber);font-weight:700}
.f-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.f-top h2{font:900 clamp(40px,5vw,70px)/.9 var(--disp);text-transform:uppercase}
.f-ctl{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.f-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.deg{display:flex;flex-direction:column;gap:4px;padding:18px 16px;border-radius:18px;background:var(--stage);border:1px solid rgba(243,241,236,.08);text-decoration:none;transition:border-color .2s,transform .2s}
.deg:hover{border-color:var(--red);transform:translateY(-3px)}
.deg .gr{font:700 13px var(--body);color:var(--red)}
.deg b{font:900 44px/.9 var(--disp)}
.deg small{color:var(--mute);font-weight:600}
.deg em{font-style:normal;font-size:12px;color:var(--amber);font-weight:700;margin-top:4px}
.f-note{color:var(--mute);margin-top:16px}

/* dicas */
.tips{margin-top:clamp(40px,6vw,70px)}
.tips h2{font:900 clamp(36px,4.6vw,64px)/.9 var(--disp);text-transform:uppercase;margin-bottom:22px}
.tip-grid{display:grid;gap:14px}
@media(min-width:800px){.tip-grid{grid-template-columns:repeat(3,1fr)}}
.tip-grid div{padding:22px;border-radius:20px;border:1px solid rgba(243,241,236,.1)}
.tip-grid b{display:block;font-size:18px;margin-bottom:6px}
.tip-grid p{color:var(--mute);font-size:15px}

/* central de ferramentas */
.hub{display:grid;gap:16px}
@media(min-width:760px){.hub{grid-template-columns:1fr 1fr}}
.hub-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(24px,3vw,38px);border-radius:28px;background:var(--stage2);border:1px solid rgba(243,241,236,.09);text-decoration:none;overflow:hidden;transition:transform .3s,border-color .3s}
.hub-card:hover{transform:translateY(-4px);border-color:rgba(226,56,47,.6)}
.hub-card .ic{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:var(--red);font-size:26px;margin-bottom:14px}
.hub-card h2{font:900 clamp(34px,3.6vw,52px)/.9 var(--disp);text-transform:uppercase}
.hub-card p{color:var(--mute)}
.hub-card .go{margin-top:10px;font-weight:700;display:flex;gap:8px;align-items:center}
.hub-card:hover .go i{transform:translateX(4px)}.hub-card .go i{transition:transform .25s}

/* chamada final */
.tool-cta{padding:0 0 clamp(60px,8vw,100px)}
.cta-box{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:clamp(28px,4vw,56px);border-radius:28px;background:linear-gradient(120deg,#E2382F,#8E1712)}
.cta-box h2{font-size:clamp(40px,5vw,76px);line-height:.88}
.cta-box h2 span{color:var(--stage)}
.cta-box p{margin-top:10px;max-width:44ch;color:rgba(255,255,255,.88)}
.cta-box .btn{background:var(--stage)}
@media(prefers-reduced-motion:reduce){.metro.hit .m-num output{animation:none}}
.voice .s0{stroke-width:2.4}.voice .s1{stroke-width:2.1}.voice .s2{stroke-width:1.8}.voice .s3{stroke-width:1.5}.voice .s4{stroke-width:1.2}.voice .s5{stroke-width:1}

/* transpositor: ajustes */
.keyshow{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:14px;background:var(--stage);border:1px solid rgba(243,241,236,.08)}
.keyshow span{font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.keyshow b{font:900 34px/1 var(--disp);min-width:1.4em;text-align:center}
.keyshow b:last-child{color:var(--red)}
.keyshow i{color:var(--mute);font-size:14px}
textarea,.out{min-height:230px;height:230px}
@media(min-width:900px){.f-grid{grid-template-columns:repeat(7,1fr)}}
@media(max-width:560px){.f-grid{grid-template-columns:repeat(2,1fr)}.tr-bar{gap:14px}.capo{min-width:0}}