/* Cápsula musical en el menú principal */
.music-island{position:relative;z-index:4;flex:none;margin-left:3px;color:#111}
.music-trigger{display:flex;align-items:center;justify-content:center;gap:7px;min-width:47px;height:36px;padding:4px 8px 4px 5px;border:1px solid #fff;border-radius:999px;background:linear-gradient(145deg,#fff,#f0f3f6eb 55%,#fff);color:#111;cursor:pointer;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #51617124,0 2px 8px #00000017;backdrop-filter:blur(8px) saturate(1.6);-webkit-backdrop-filter:blur(8px) saturate(1.6);transition:min-width .35s cubic-bezier(.2,.8,.2,1),background .25s}
.music-trigger:hover,.music-trigger[aria-expanded=true]{background:linear-gradient(145deg,#fff,#e6edf3f2 55%,#fff);min-width:61px}
html.glass-refraction .music-trigger{backdrop-filter:url(#ewGlassRefract) blur(3px) saturate(1.45);-webkit-backdrop-filter:url(#ewGlassRefract) blur(3px) saturate(1.45)}
.music-trigger:focus-visible,.music-panel button:focus-visible,.music-panel input:focus-visible{outline:2px solid #111;outline-offset:3px}
.music-vinyl{position:relative;display:grid;place-items:center;width:29px;height:29px;flex:none;border:1px solid #656569;border-radius:50%;background:radial-gradient(circle at 34% 24%,#ffffff1c,transparent 35%),repeating-radial-gradient(circle,#111 0 1px,#242427 1.5px 2px,#0a0a0b 2.5px 3px);box-shadow:0 2px 5px #000a,inset 0 0 0 1px #000;transform:rotate(var(--vinyl-angle,-22deg));will-change:transform}
.music-vinyl::before{position:absolute;inset:2px;border-radius:50%;background:conic-gradient(from 24deg,transparent 0deg,#ffffff25 31deg,transparent 51deg,transparent 188deg,#ffffff13 212deg,transparent 232deg);content:"";pointer-events:none}
.music-vinyl-label{position:relative;display:grid;place-items:center;width:17px;height:17px;border:1px solid #ffffff58;border-radius:50%;background:radial-gradient(circle at 40% 30%,#343438,#101013 72%);box-shadow:0 0 0 1px #0009}
.music-vinyl-label img{display:block;width:14px;height:auto;max-height:10px;object-fit:contain}
.music-island.is-scratching .music-vinyl{border-color:#aaaab0;box-shadow:0 2px 8px #000a,inset 0 0 0 1px #fff3}
.music-island.is-scratching .music-art{border-color:#aaaab0;box-shadow:inset 0 0 0 2px #0a0a0b,0 7px 22px #000a,0 0 0 1px #fff2}
.music-trigger-wave{display:flex;align-items:center;justify-content:center;gap:2px;width:7px;height:14px}
.music-trigger-wave i{display:block;width:2px;height:4px;border-radius:2px;background:#111;opacity:.8}
.music-trigger-wave i:nth-child(2){height:9px}
.music-island.is-playing .music-trigger-wave i{animation:music-wave .7s ease-in-out infinite alternate}
.music-island.is-playing .music-trigger-wave i:nth-child(2){animation-delay:-.4s}
.music-island.is-playing .music-trigger-wave i:nth-child(3){animation-delay:-.2s}
@keyframes music-wave{to{height:13px}}
.music-panel{position:absolute;top:calc(100% + 11px);right:0;isolation:isolate;overflow:hidden;width:min(338px,calc(100vw - 24px));padding:18px;border:1px solid #fff;border-radius:27px;background:linear-gradient(145deg,#ffffffef,#f1f4f7e8 52%,#fffffff0);color:#17191d;box-shadow:0 24px 60px #18212b38,0 5px 18px #00000017,inset 0 2px 2px #fff,inset 0 -3px 5px #53617128,inset 3px 0 4px #fff,inset -3px 0 5px #53617114;backdrop-filter:blur(12px) saturate(1.65) contrast(1.08);-webkit-backdrop-filter:blur(12px) saturate(1.65) contrast(1.08);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",var(--sans);font-weight:400;text-align:left;line-height:1.35;animation:music-panel-in .35s cubic-bezier(.2,.8,.2,1) both}
.music-panel::before{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 100% 70% at 12% -20%,#fff,transparent 75%),radial-gradient(ellipse 85% 95% at 115% 110%,#8da3b82e,transparent 72%),linear-gradient(115deg,#ffffff5c,transparent 38%,#697f931c 67%,#ffffff73);backdrop-filter:blur(8px) saturate(1.8) contrast(1.12);-webkit-backdrop-filter:blur(8px) saturate(1.8) contrast(1.12);content:"";pointer-events:none;z-index:0}
.music-panel::after{position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#fff 0%,#ffffffa6 28%,#7482948c 63%,#fff 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;content:"";pointer-events:none}
.music-panel>*{position:relative;z-index:1}
html.glass-refraction .music-panel{backdrop-filter:url(#ewGlassRefract) blur(3px) saturate(1.6);-webkit-backdrop-filter:url(#ewGlassRefract) blur(3px) saturate(1.6)}
html.glass-refraction .music-panel::before{filter:url(#ewGlassRefract);backdrop-filter:url(#ewGlassRefract) blur(2px) saturate(1.7);-webkit-backdrop-filter:url(#ewGlassRefract) blur(2px) saturate(1.7)}
.music-panel[hidden]{display:none}
@keyframes music-panel-in{from{opacity:0;transform:translateY(-8px) scale(.96);transform-origin:top right}to{opacity:1;transform:none}}
.music-panel-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 15px;color:#68707b;font-size:10px;font-weight:600;letter-spacing:.15em}
.music-panel-top button{display:grid;place-items:center;width:25px;height:25px;border:0;border-radius:50%;background:#1111110d;color:#181b1f;cursor:pointer}
.music-panel-top button:hover{background:#1111111c}
.music-panel svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.music-panel-top svg{width:13px;height:13px}
.music-now{display:flex;align-items:center;gap:14px;min-width:0}
.music-art{position:relative;display:grid;place-items:center;flex:none;width:75px;height:75px;border:1px solid #6b6b70;border-radius:50%;background:radial-gradient(circle at 34% 24%,#ffffff20,transparent 34%),repeating-radial-gradient(circle,#111 0 2px,#27272a 2.5px 3px,#0b0b0d 3.5px 4.5px);box-shadow:inset 0 0 0 2px #0a0a0b,0 7px 18px #0008;transform:rotate(var(--vinyl-angle,-22deg));will-change:transform}
.music-art::before{position:absolute;inset:3px;border-radius:50%;background:conic-gradient(from 24deg,transparent 0deg,#ffffff21 31deg,transparent 51deg,transparent 188deg,#ffffff12 212deg,transparent 232deg);content:"";pointer-events:none}
.music-art::after{position:absolute;top:50%;left:50%;width:4px;height:4px;border-radius:50%;background:#c7c7c9;box-shadow:0 0 0 1px #101012;content:"";transform:translate(-50%,-50%);pointer-events:none}
.music-art img{display:block;width:43px;height:43px;padding:9px 3px;border:1px solid #ffffff42;border-radius:50%;background:radial-gradient(circle at 38% 26%,#38383d,#111114 75%);object-fit:contain;box-sizing:border-box}
.music-now-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.music-eyebrow{font-size:9px;letter-spacing:.14em;color:#626b75}
.music-now-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:600;letter-spacing:-.02em}
.music-now-copy>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#626b75;font-size:12px}
.music-progress{display:flex;align-items:center;gap:9px;margin-top:18px;color:#626b75;font-size:10px;font-variant-numeric:tabular-nums}
.music-progress input,.music-volume input{flex:1;min-width:0;height:16px;accent-color:#17191d;cursor:pointer}
.music-progress input:disabled{cursor:default;opacity:.45}
.music-actions{display:flex;justify-content:center;align-items:center;gap:28px;margin:7px 0 10px}
.music-actions button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:none;color:#17191d;cursor:pointer}
.music-actions button:disabled{opacity:.35;cursor:default}
.music-actions .music-main-action{width:42px;height:42px;border-radius:50%;background:#111;color:#fff;box-shadow:0 4px 12px #0003,inset 0 1px 1px #ffffff47}
.music-actions .music-main-action svg{width:19px;height:19px}
.music-actions .music-main-action .music-icon-play{fill:currentColor;stroke:none;margin-left:2px}
.music-island:not(.is-playing) .music-icon-pause,.music-island.is-playing .music-icon-play{display:none}
.music-volume{display:flex;align-items:center;gap:11px;padding:0 6px;color:#626b75}
.music-volume svg{width:17px;height:17px;flex:none}
@media(max-width:760px){
  .music-island{margin-left:4px;padding-left:8px;border-left:1px solid #00000018}
  .music-trigger,.music-trigger:hover,.music-trigger[aria-expanded=true]{width:40px;min-width:40px;height:40px;padding:4px;gap:0;border-color:transparent;border-radius:11px;background:transparent;box-shadow:none}
  .music-trigger:hover,.music-trigger[aria-expanded=true]{background:#00000009}
  .music-trigger-wave{display:none}
  .music-trigger:focus-visible{outline-color:#111}
  .music-panel{top:calc(100% + 12px);right:-45px;width:min(338px,calc(100vw - 56px))}
}
@media(max-width:360px){.music-island{margin-left:1px;padding-left:5px}.music-trigger,.music-trigger:hover,.music-trigger[aria-expanded=true]{width:36px;min-width:36px}}
@media(prefers-reduced-motion:reduce){.music-vinyl,.music-art{transform:none!important;will-change:auto}.music-trigger-wave i,.music-panel{animation:none!important}.music-trigger{transition:none}}
