/* BAZ3 — A banda (seis cordas) */
.baz3-cordas{padding:clamp(90px,14vh,160px) var(--baz3-gutter);scroll-margin-top:40px}
.baz3-cordas .intro{max-width:1300px;margin:0 auto 60px}
.baz3-cordas .stage{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,80px);align-items:center}
.baz3-cordas .portrait{position:relative;aspect-ratio:4/5;display:flex;align-items:flex-end}
.baz3-cordas .name-bg{position:absolute;left:-2%;top:6%;font:400 clamp(90px,13vw,210px)/.85 var(--baz3-display);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.18);white-space:nowrap;z-index:0}
.baz3-cordas .photo{position:absolute;inset:0;z-index:1;
  -webkit-mask-image:radial-gradient(70% 72% at 50% 45%,#000 52%,transparent 78%);mask-image:radial-gradient(70% 72% at 50% 45%,#000 52%,transparent 78%)}
.baz3-cordas .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,var(--baz3-red) 10%,transparent 50%,var(--baz3-blue) 90%);mix-blend-mode:color;opacity:.85;pointer-events:none}
.baz3-cordas .photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25) brightness(.95);transition:opacity .35s,transform .6s;mix-blend-mode:lighten}
.baz3-cordas .photo img.swap{opacity:0;transform:scale(1.03)}
.baz3-cordas figcaption{position:relative;z-index:2;padding:0 0 6%;display:grid;gap:4px;text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.8)}
.baz3-cordas figcaption strong{font:400 clamp(44px,5vw,72px)/.9 var(--baz3-display);text-transform:uppercase}
.baz3-cordas figcaption span{font:700 12px var(--baz3-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--baz3-red)}
.baz3-cordas figcaption q{color:#c9c6cf;font-size:15px;max-width:340px;margin-top:6px}

.baz3-cordas .strings{display:grid;gap:4px;position:relative}
/* botão ligar/mudo do som das cordas */
.baz3-cordas .sound{margin-top:22px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border:1px solid var(--baz3-line);border-radius:999px;font:700 11px var(--baz3-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--baz3-muted);transition:border-color .2s,color .2s,background .2s}
.baz3-cordas .sound svg{width:20px;height:20px;flex:none}
.baz3-cordas .sound:hover{border-color:var(--baz3-red);color:var(--baz3-text)}
.baz3-cordas .sound.locked{color:var(--baz3-text);border-color:rgba(255,42,61,.6);background:rgba(255,42,61,.08)}
.baz3-cordas .sound.on{color:var(--baz3-text)}
.baz3-cordas .sound.on svg{color:var(--baz3-red)}
.baz3-cordas .sound.nudge{animation:baz3-nudge .6s ease-in-out 2}
@keyframes baz3-nudge{0%,100%{transform:none;box-shadow:none}30%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(255,42,61,.25)}60%{transform:scale(.98)}}
/* faixa da palheta (só em telas de toque): deslizar aqui toca as cordas sem rolar a página */
.baz3-cordas .strum{position:absolute;top:0;right:0;bottom:0;width:58px;z-index:3;touch-action:none;-webkit-user-select:none;user-select:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(90deg,transparent,rgba(255,42,61,.10) 40%,rgba(61,92,255,.12));border-left:1px dashed rgba(255,255,255,.18);border-radius:14px 0 0 14px}
.baz3-cordas .strum .pick{position:absolute;left:50%;top:50%;width:26px;height:28px;margin-top:-14px;transform:translate(-50%,0);color:var(--baz3-red);filter:drop-shadow(0 0 8px rgba(255,42,61,.8));transition:transform .08s linear}
.baz3-cordas .strum .pick svg{width:100%;height:100%;fill:currentColor;display:block}
.baz3-cordas .strum:not(.active) .pick{animation:baz3-pick 1.6s ease-in-out infinite}
@keyframes baz3-pick{0%,100%{transform:translate(-50%,-34px)}50%{transform:translate(-50%,34px)}}
.baz3-cordas .strum small{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font:700 9px var(--baz3-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--baz3-muted);writing-mode:vertical-rl;rotate:180deg}
.baz3-cordas .strum.active{background:linear-gradient(90deg,transparent,rgba(255,42,61,.22) 40%,rgba(61,92,255,.24))}
.baz3-cordas .string{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;height:76px;cursor:pointer;outline:none}
.baz3-cordas .string:focus-visible{outline:2px solid var(--baz3-red);outline-offset:2px}
.baz3-cordas .num{font:700 12px var(--baz3-mono);color:var(--baz3-muted)}
.baz3-cordas .label{position:absolute;left:58px;top:6px;display:flex;gap:12px;align-items:baseline;z-index:2;pointer-events:none}
.baz3-cordas .label b{font:400 26px/1 var(--baz3-display);text-transform:uppercase;letter-spacing:.02em;transition:color .2s}
.baz3-cordas .label small{font:700 10px var(--baz3-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--baz3-muted)}
.baz3-cordas .string svg{width:100%;height:60px;overflow:visible;margin-top:18px}
.baz3-cordas .string path{fill:none;stroke:url(#baz3-str-grad);stroke-linecap:round}
.baz3-cordas .string:hover .label b,.baz3-cordas .string.active .label b{color:var(--baz3-red)}
.baz3-cordas .string.active .num{color:var(--baz3-text)}
.baz3-cordas .string::after{content:"";position:absolute;left:44px;right:0;top:50%;height:46px;transform:translateY(-30%);background:radial-gradient(50% 50% at var(--hx,50%) 50%,rgba(255,42,61,.18),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.baz3-cordas .string:hover::after,.baz3-cordas .string.active::after{opacity:1}

@media (max-width:980px){
  .baz3-cordas .stage{grid-template-columns:1fr}
  .baz3-cordas .portrait{max-width:520px;width:100%;margin:0 auto}
}
@media (max-width:760px){
  .baz3-cordas .string{height:66px}
  .baz3-cordas .label b{font-size:22px}
}