/* sorpresa.css — «Tinc una sorpresa per tu!» + «Les meves cançons» (01/11/2026). Sense vermell. */
.sor-icona{position:fixed;left:12px;bottom:12px;z-index:900;width:40px;height:40px;border-radius:50%;border:2px solid #7c8cf8;background:#1e2352;color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;padding:0}
.sor-icona:hover,.sor-icona:focus-visible{opacity:1}
.sor-icona:focus-visible,.sor-btn:focus-visible,.sor-tanca:focus-visible,.sor-rang:focus-visible{outline:3px solid #ffd54a;outline-offset:2px}
.sor-baf{position:fixed;left:12px;bottom:60px;z-index:2147482500;max-width:min(320px,calc(100vw - 24px));background:#fff;color:#1b1f3b;border:3px solid #3f51b5;border-radius:20px;padding:14px 16px 16px;box-shadow:0 8px 28px rgba(0,0,0,.35);font:600 18px/1.3 system-ui,sans-serif;animation:sor-entra .35s ease-out}
.sor-baf::after{content:"";position:absolute;left:18px;bottom:-14px;border:10px solid transparent;border-top-color:#3f51b5}
.sor-baf p{margin:0 0 10px}
.sor-baf-fila{display:flex;align-items:center;gap:12px}
.sor-play{width:72px;height:72px;border-radius:50%;border:0;background:#2e7d32;color:#fff;font-size:34px;cursor:pointer;padding:0}
.sor-mesTard{background:none;border:0;color:#3f51b5;font:600 15px system-ui,sans-serif;text-decoration:underline;cursor:pointer;padding:8px}
.sor-fons{position:fixed;inset:0;z-index:2147482600;background:rgba(10,10,30,.6);display:flex;align-items:center;justify-content:center;padding:12px}
.sor-panell{background:#fff;color:#1b1f3b;border-radius:18px;width:min(560px,100%);max-height:calc(100vh - 24px);overflow:auto;padding:18px 18px 22px;position:relative;font:16px/1.45 system-ui,sans-serif}
.sor-panell h2{margin:0 36px 12px 0;font-size:22px}
.sor-tanca{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:2px solid #3f51b5;background:#fff;color:#3f51b5;font-size:20px;cursor:pointer;padding:0}
.sor-canco{border-top:2px solid #e3e6ff;padding-top:12px;margin-top:12px}
.sor-canco h3{margin:0 0 8px;font-size:19px}
.sor-rep{display:flex;align-items:center;gap:10px}
.sor-btn{width:48px;height:48px;border-radius:50%;border:0;background:#2e7d32;color:#fff;font-size:22px;cursor:pointer;flex:none;padding:0}
.sor-rang{flex:1;min-width:0;accent-color:#3f51b5}
.sor-temps{font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}
.sor-lletra{white-space:pre-wrap;margin:12px 0 0;font:17px/1.5 Georgia,serif;background:#f4f5ff;border-radius:12px;padding:12px}
.sor-buit{color:#555}
@keyframes sor-entra{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sor-baf{animation:none}}
@media (max-width:480px){.sor-baf{left:8px;bottom:58px}.sor-icona{left:8px;bottom:8px}}