/* Reproductor de música de qfadesign, con la estética de la web: vidrio como la barra y los botones, tipografía itálica pesada,
   botón de play crema con ícono azul (igual que el botón del menú abierto). Cerrado es un círculo chico con una nota musical (se mece si suena);
   al tocarlo se abre una pastilla finita con título, artista, controles y volumen, y se vuelve a esconder solo. */
.mp{position:fixed;z-index:45;left:clamp(12px,2vw,28px);bottom:calc(clamp(12px,2vw,24px) + env(safe-area-inset-bottom,0px));display:flex;align-items:center;box-sizing:border-box;height:46px;max-width:calc(100vw - 24px);border-radius:99px;color:#fff;font-family:var(--f,system-ui,sans-serif);
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06)),rgba(0,0,0,.2);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.2);text-shadow:0 1px 6px rgba(0,0,0,.3);
  opacity:0;translate:0 8px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.8,.2,1),height .4s cubic-bezier(.2,.8,.2,1)}
.mp.ok{opacity:.92;translate:0 0}
.mp.ok:hover,.mp.ok:focus-within,.mp.ok.abierto{opacity:1}
.mp.abierto{height:62px}
html:has(nav.abierto) .mp{opacity:0;pointer-events:none}
.mp button{all:unset;box-sizing:border-box;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%;color:inherit}
.mp button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mp-fab{width:44px;height:44px;flex:none;transition:scale .25s cubic-bezier(.34,1.56,.64,1)}
.mp.abierto .mp-fab{width:58px;height:58px}
.mp-fab:active{scale:.9}
.mp-nota{width:22px;height:22px;fill:currentColor;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));transition:color .3s ease}
.mp.on .mp-nota{color:#f9fbf2;animation:mp-nota 1.4s ease-in-out infinite}
@keyframes mp-nota{0%,100%{translate:0 0;rotate:-6deg}50%{translate:0 -2px;rotate:6deg}}
.mp-panel{display:flex;align-items:center;gap:4px;overflow:hidden;max-width:0;opacity:0;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .25s ease;position:relative}
.mp.abierto .mp-panel{max-width:min(560px,calc(100vw - 110px));opacity:1;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease .12s}
.mp-txt{display:flex;flex-direction:column;justify-content:center;min-width:0;width:170px;line-height:1.2;padding:0 12px 0 6px}
.mp-t{font-family:var(--fh,var(--f,system-ui,sans-serif));font-style:italic;font-weight:900;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-a{font-style:italic;font-weight:400;font-size:13px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-c{width:40px;height:40px;flex:none;opacity:.9;transition:opacity .2s ease,background .2s ease,scale .25s cubic-bezier(.34,1.56,.64,1)}
.mp-c svg{width:17px;height:17px;fill:currentColor}
.mp-c:hover{opacity:1;background:rgba(255,255,255,.12)}
.mp-c:active{scale:.9}
.mp-pp .i2{display:none}
.mp.on .mp-pp .i1{display:none}.mp.on .mp-pp .i2{display:block}
.mp-pp{background:#f9fbf2;color:#0a5cc0;opacity:1;text-shadow:none;box-shadow:0 1px 0 rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.25)}
.mp-pp:hover{background:#fff;scale:1.06}
.mp-pp svg{width:19px;height:19px}
.mp-n{margin-right:2px}
.mp-v{display:flex;align-items:center;margin-right:16px;padding-left:8px}
.mp-m .x{display:none}.mp.mudo .mp-m .w{display:none}.mp.mudo .mp-m .x{display:block}
.mp-m svg{width:20px;height:20px}
.mp-r{-webkit-appearance:none;appearance:none;width:84px;height:22px;margin:0;background:transparent;cursor:pointer;--p:20%}
.mp-r::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#f9fbf2 var(--p),rgba(255,255,255,.2) var(--p))}
.mp-r::-moz-range-track{height:3px;border-radius:3px;background:rgba(255,255,255,.2)}
.mp-r::-moz-range-progress{height:3px;border-radius:3px;background:#f9fbf2}
.mp-r::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:#f9fbf2;border:0;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.mp-r::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#f9fbf2;border:0;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.mp-r:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
.mp-bar{position:relative;margin-top:5px;height:12px;cursor:pointer;touch-action:none}
.mp-bar::before{content:"";position:absolute;left:0;right:0;top:5px;height:3px;border-radius:3px;background:rgba(255,255,255,.2)}
.mp-bar i{position:absolute;left:0;top:5px;height:3px;border-radius:3px;background:#f9fbf2;width:0}
/* en el celu no hay reproductor: solo en compu */
@media(max-width:760px){.mp{display:none!important}}
@media(prefers-reduced-motion:reduce){.mp,.mp-panel{transition:none}.mp.on .mp-nota{animation:none}}