:root{--yellow:#f9db16;--pink:#fa087e;--black:#10110e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--yellow);color:var(--black);font-family:Arial,Helvetica,sans-serif}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.poster{height:100svh;min-height:600px;position:relative;isolation:isolate;overflow:hidden;background:var(--yellow)}.poster::before{content:'';position:absolute;inset:-30%;z-index:-1;background:repeating-conic-gradient(from 15deg at 50% 60%,var(--yellow) 0 10deg,var(--pink) 10deg 14deg,var(--black) 14deg 16deg,var(--yellow) 16deg 27deg);transform:rotate(-10deg)}.poster img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:normal}.down{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:grid;place-items:center;background:var(--pink);color:var(--black);width:48px;height:48px;border:3px solid var(--black);box-shadow:4px 4px var(--black);font-size:28px;font-weight:900;text-decoration:none}.music{padding:55px 6% 80px;position:relative;overflow:hidden;border-top:8px solid var(--black);background:var(--yellow)}.music::after{content:'';position:absolute;width:280px;height:280px;right:-180px;bottom:-160px;border:25px solid var(--pink);border-radius:50%;box-shadow:0 0 0 10px var(--black);pointer-events:none}.music-top{max-width:1120px;margin:0 auto 35px;display:flex;align-items:center;justify-content:space-between;gap:25px}.music-top h2{font:900 clamp(38px,6vw,76px)/1 Impact,'Arial Black',sans-serif;letter-spacing:-1px;margin:0;transform:rotate(-3deg);text-shadow:3px 3px var(--pink)}.music-top>span{font-size:60px;line-height:1;color:var(--black)}.playlists{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.playlist{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:225px;padding:24px;border:3px solid var(--black);box-shadow:7px 7px var(--black);background:var(--pink);color:var(--black);text-decoration:none;transform:rotate(-2deg)}.playlist:nth-child(2){transform:rotate(2deg);background:var(--black);color:var(--yellow);border-color:var(--black);box-shadow:7px 7px var(--pink)}.playlist:nth-child(3){transform:rotate(-1deg)}.playlist-index{font:700 12px 'Courier New',monospace;letter-spacing:1px}.playlist-title{font:900 clamp(24px,3vw,38px)/1.1 Impact,'Arial Black',sans-serif;overflow-wrap:anywhere;margin:32px 0 25px;max-width:90%}.playlist-state{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;font-weight:800;letter-spacing:1px}.playlist-state span:last-child{font-size:24px}a.playlist:hover{transform:translateY(-6px)}a:focus-visible{outline:4px solid white;outline-offset:6px}@media(max-width:700px){.poster{height:auto;min-height:0}.poster img{height:auto;width:100%;object-fit:initial}.down{width:42px;height:42px;font-size:24px;bottom:14px}.music{padding:38px 7% 60px;border-top-width:5px}.music-top{margin-bottom:28px}.music-top h2{font-size:46px}.music-top>span{font-size:40px}.playlists{grid-template-columns:1fr;gap:25px}.playlist{min-height:165px;padding:20px}.playlist-title{font-size:32px;margin:20px 0}.playlist:nth-child(2){transform:rotate(1deg)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

:root{--fg:#10110e}html[data-palette="violeta-verde"]{--yellow:#53208b;--pink:#c0ee24;--fg:#d9bcf3}html[data-palette="naranja-cyan"]{--yellow:#ff6410;--pink:#00d6ed;--fg:#10110e}html[data-palette="azul-coral"]{--yellow:#1239bc;--pink:#ff8358;--fg:#fff0ce}.music{color:var(--fg)}.music-top>span{color:var(--fg)}.palette-picker{position:fixed;top:18px;right:18px;z-index:10;display:flex;gap:12px;padding:13px 16px;background:#10110eef;border:1px solid #ffffff55;border-radius:50px;box-shadow:3px 3px 0 #0005}.palette-picker button{width:27px;height:27px;border-radius:50%;border:3px solid var(--edge);background:var(--swatch);cursor:pointer;padding:0}.palette-picker button[aria-pressed="true"]{outline:2px solid #fff;outline-offset:3px}.palette-picker button:focus-visible{outline:3px solid #fff;outline-offset:4px}@media(max-width:700px){.palette-picker{top:12px;right:12px;gap:11px;padding:11px 14px}.palette-picker button{width:24px;height:24px}}
.playlist:nth-child(2){color:var(--pink)}.music-top h2{text-shadow:2px 2px var(--black)}

/* Paisaje ilustrado continuo en escritorio; póster original en móvil. */
.poster{height:auto;min-height:0;aspect-ratio:16/9;background:var(--yellow)}.poster::before{display:none}.poster picture{display:block;width:100%;height:100%}.poster img{width:100%;height:100%;object-fit:cover}@media(max-width:700px){.poster{aspect-ratio:auto}.poster picture{height:auto}.poster img{height:auto;object-fit:initial}}