/* ---------- convite de musica (cartao discreto, estilo aviso de cookies) ---------- */
.mc,.mp{--mp-vidro:color-mix(in srgb,var(--bg) 74%,transparent);
  border:1px solid var(--vidro-fio);background:var(--mp-vidro);color:var(--fg);font:400 14px/1.45 var(--sans);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:0 12px 40px -18px rgba(0,0,0,.45)}
.mc{position:fixed;left:var(--gut);bottom:max(16px,env(safe-area-inset-bottom));z-index:50;width:min(368px,calc(100vw - 2*var(--gut)));
  padding:16px 18px;border-radius:22px;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity 1s var(--ease-nevoa),transform 1s var(--ease-nevoa),visibility 0s linear 1s}
.mc.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mc-t{margin:0 0 12px;font-size:14px;line-height:1.45;color:var(--fg)}
.mc-a{display:flex;align-items:center;gap:8px}
.mc-b{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:999px;cursor:pointer;
  font:500 13px/1 var(--sans);letter-spacing:.01em;white-space:nowrap;color:var(--fg);background:transparent;
  border:1px solid color-mix(in srgb,var(--fg) 34%,transparent);transition:background-color .35s var(--ease),border-color .35s var(--ease),opacity .35s var(--ease)}
.mc-b:hover{background:color-mix(in srgb,var(--fg) 9%,transparent);border-color:color-mix(in srgb,var(--fg) 70%,transparent)}
.mc-sim{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.mc-sim:hover{background:var(--fg);opacity:.86}
.mc-b:focus-visible,.mp button:focus-visible,.mp-bar:focus-visible{outline:2px solid color-mix(in srgb,var(--fg) 80%,transparent);outline-offset:2px}
@media (max-width:1000px){.mc{left:var(--gut);right:var(--gut);width:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 44px + 12px)}}

/* ---------- mini-player: popover no desktop, gaveta no celular ---------- */
.mp{position:fixed;top:72px;right:var(--gut);z-index:60;width:356px;max-height:calc(100svh - 92px);overflow:auto;overscroll-behavior:contain;
  padding:16px 18px 14px;border-radius:22px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s linear .6s}
.mp.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mp-sc{display:none}
.mp-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.mp-x{display:none;width:32px;height:32px;margin:-6px -8px -6px 0;padding:0;border:0;background:none;color:var(--fg);cursor:pointer;place-items:center;opacity:.8}
.mp-x svg{width:18px;height:18px}
.mp-comp{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.mp-obra{margin:3px 0 0;font-size:13.5px;line-height:1.4;color:var(--fg-2)}
.mp-quem{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--fg-3)}
.mp-bar{position:relative;display:block;height:20px;margin-top:14px;cursor:pointer;touch-action:none;border-radius:6px}
.mp-bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:color-mix(in srgb,var(--fg) 20%,transparent)}
.mp-bar i{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:var(--fg);transform-origin:0 50%;transform:scaleX(0)}
.mp-bar[aria-disabled="true"]{cursor:default;opacity:.6}
.mp-tm{display:flex;justify-content:space-between;margin-top:2px;font-size:11.5px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.mp-ct{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 12px}
.mp-ct button{display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:var(--fg);background:transparent;transition:background-color .3s var(--ease),opacity .3s var(--ease)}
.mp-ct button svg{width:20px;height:20px;fill:currentColor}
.mp-ant,.mp-prx{width:40px;height:40px;opacity:.85}
.mp-ant:hover,.mp-prx:hover{background:color-mix(in srgb,var(--fg) 10%,transparent);opacity:1}
.mp-pp{width:48px;height:48px;background:var(--fg)!important;color:var(--bg)!important}
.mp-pp:hover{opacity:.86}
.mp-pp svg{width:22px;height:22px}
.mp .i-pausa{display:none}
.mp[data-tocando="1"] .i-pausa{display:block}
.mp[data-tocando="1"] .i-toca{display:none}
.mp-ls{list-style:none;margin:0;padding:6px 0 0;border-top:1px solid var(--linha)}
.mp-ls button{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;width:100%;min-height:38px;padding:6px 8px;margin:0;border:0;border-radius:10px;
  background:transparent;color:var(--fg-2);font:400 13px/1.3 var(--sans);text-align:left;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.mp-ls button:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
.mp-ls .n{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums;text-align:center}
.mp-ls .d{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.mp-ls .t b{font-weight:600}
.mp-ls .t span{color:var(--fg-3)}
.mp-ls .eq{display:none;width:14px;height:14px;margin:0 auto}
.mp-ls li.cur button{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent)}
.mp-ls li.cur .n{display:none}
.mp-ls li.cur .eq{display:block}
.mp:not([data-tocando="1"]) .eq path{animation-play-state:paused}
.eq path{transform-box:fill-box;transform-origin:50% 100%;animation:mus-b 1.15s ease-in-out infinite}
.eq .b2{animation-delay:-.6s}.eq .b3{animation-delay:-.3s}
.mp-cr{margin:8px 0 0;padding-top:10px;border-top:1px solid var(--linha);font-size:12px;line-height:1.55;color:var(--fg-3)}
@media (max-width:760px){
  .mp{top:auto;left:0;right:0;bottom:0;width:auto;max-height:84svh;border-radius:22px 22px 0 0;border-bottom:0;padding:22px var(--gut) max(16px,env(safe-area-inset-bottom));
    transform:translateY(100%);transition:opacity .4s var(--ease),transform .55s var(--ease),visibility 0s linear .55s;background:color-mix(in srgb,var(--bg) 88%,transparent)}
  .mp::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:4px;background:color-mix(in srgb,var(--fg) 28%,transparent)}
  .mp-x{display:grid}
  .mp-sc{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.32);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
  .mp-sc.on{opacity:1;visibility:visible;transition-delay:0s}
  .mp-ls button{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.mc,.mp,.mp-sc{transition-duration:.01s!important}.mc,.mp{transform:none!important}.eq path{animation:none;transform:scaleY(.7)}}

/* botao pequeno que abre o painel, ao lado do botao de tocar/pausar */
.ico.mus-pl{flex:none;width:40px;height:40px;margin-left:calc(8px - var(--ng,30px));border:1px solid color-mix(in srgb,var(--fg) 42%,transparent);border-radius:50%;opacity:1;
  transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.ico.mus-pl svg{width:18px;height:18px;transition:transform .45s var(--ease)}
.ico.mus-pl[aria-expanded="true"] svg{transform:rotate(180deg)}
.ico.mus-pl:hover{background:color-mix(in srgb,var(--fg) 10%,transparent);border-color:color-mix(in srgb,var(--fg) 75%,transparent)}
.ico.mus-pl:focus-visible,.ico.mus:focus-visible{outline:2px solid color-mix(in srgb,var(--fg) 80%,transparent);outline-offset:2px}
@media (max-width:760px){.ico.mus-pl{margin-left:calc(4px - var(--ng-m,4px))}}

@media (min-width:761px){.mp{top:58px;max-height:calc(100svh - 78px)}}