:root { color-scheme: dark; --ink:#111211; --paper:#e5e4dd; --line:#55564e; --acid:#e5f05b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--paper); font:16px Arial,Helvetica,sans-serif; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; background:url('/material/texturas/2.jpg') center/900px; z-index:0; }
body[data-view="home"],body[data-view="batea"] { background:#10110f; }
body[data-view="home"]:before,body[data-view="batea"]:before { opacity:1; background-image:linear-gradient(#08090894,#08090894),url('/material/fondos/tienda-fondo.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat; }
body[data-view="disco"]:before { opacity:1; background-color:#646058; background-image:var(--record-background,url('/material/fondos/disco-fondo.jpg')),url('/material/fondos/disco-fondo.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat; }
a { color:inherit; }
button { font:inherit; color:inherit; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:3px solid var(--acid); outline-offset:7px; }
button:disabled { opacity:.3; cursor:default; }
.skip { position:absolute; top:-100px; }
.skip:focus { top:0; z-index:10; background:black; padding:20px; }
header { height:96px; margin:0; padding:0 4%; display:flex; justify-content:space-between; align-items:center; background:#050505; border-bottom:1px solid #292a26; gap:25px; position:relative; z-index:10; }
.brand { width:min(320px,36%); display:block; }
.brand img { width:100%; display:block; }
nav { display:flex; gap:32px; }
nav a { text-decoration:none; padding:10px 0; }
nav a[aria-current=page] { border-bottom:2px solid var(--acid); color:var(--acid); }
main { min-height:calc(100vh - 177px); outline:none; position:relative; z-index:1; }
.shop { max-width:1450px; height:100%; margin:auto; padding:clamp(45px,8vh,90px) 5% clamp(25px,5vh,60px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5%; position:relative; isolation:isolate; align-content:start; }
.crate-choice { text-decoration:none; min-width:0; position:relative; z-index:1; }

.divider { position:relative; z-index:0; display:flex; align-items:center; gap:7px; margin:0 15% -9px; padding:7px 10px 13px; min-height:0; transform:rotate(-2deg); color:#292016; background:#d4c18d url('/material/bateas/carton.jpg') center/cover no-repeat; border-radius:2px 3px 0 0; border-top:2px solid #ecdbb4; box-shadow:2px 3px 5px #0008; }
.divider:after { content:none; }
.crate-choice:nth-child(2) .divider { transform:rotate(1.5deg); }
.crate-choice:nth-child(3) .divider { transform:rotate(-.7deg); }
h1 { margin:0; }
.divider h1 { font-family:Impact,'Arial Narrow',sans-serif; text-transform:uppercase; font-size:clamp(13px,1.35vw,19px); line-height:1.02; letter-spacing:.015em; }
.number { align-self:center; font:9px monospace; border-bottom:1px solid #665039; padding:3px 0; }
.corner { display:none; }
.bin { --wood:#60432d url('/material/bateas/madera.jpg') center/cover no-repeat; position:relative; aspect-ratio:1.16; perspective:900px; isolation:isolate; filter:drop-shadow(0 22px 16px #0009); }
.bin-back { position:absolute; inset:13% 8% 8%; background:linear-gradient(#0009,#000b),url('/material/bateas/madera.jpg') center/cover; border:9px solid #493322; border-top-color:#806044; box-shadow:inset 0 12px 18px #000; z-index:0; }
.bin:before,.bin:after { content:""; position:absolute; top:14%; bottom:2%; width:12%; background:var(--wood); z-index:3; pointer-events:none; }
.bin:before { left:2%; clip-path:polygon(50% 0,100% 0,100% 100%,0 90%); box-shadow:inset -5px 0 5px #0009; }
.bin:after { right:2%; clip-path:polygon(0 0,50% 0,100% 90%,0 100%); box-shadow:inset 5px 0 5px #0009; }
.bin-shell { position:absolute; top:72%; bottom:2%; left:2%; width:96%; z-index:4; background:var(--wood); border-top:6px solid #896448; border-bottom:5px solid #281b13; border-radius:1px 1px 3px 3px; box-shadow:0 -5px 8px #0008,inset 0 2px 1px #c9a37a55,inset 0 -2px 3px #0008; pointer-events:none; }
.bin-shell:before,.bin-shell:after { content:""; position:absolute; top:18%; bottom:17%; width:4px; background:radial-gradient(circle,#17130f 1px,#9a7858 1.5px,transparent 2px) top/4px 50% repeat-y; }
.bin-shell:before { left:3%; }
.bin-shell:after { right:3%; }
.sleeve { width:100%; aspect-ratio:1; object-fit:cover; display:block; border:0; box-shadow:1px 2px 3px #0009,0 -3px 5px #0006; }
.behind { position:absolute; left:14%; top:calc(12% - var(--depth)*3%); width:72%; transform:translateX(calc(var(--depth)*1px)) scale(calc(1 - var(--depth)*.018)) rotate(calc(var(--depth)*-.8deg)); filter:brightness(.72); z-index:1; }
.front-cover { position:absolute; display:block; padding:0; border:0; background:none; left:14%; top:14%; width:72%; z-index:2; transform-origin:bottom; transition:transform .22s; cursor:pointer; }
.crate-choice:hover .front-cover { transform:translateY(-13px) rotate(-2deg); }
.bin-front { position:absolute; top:72%; bottom:2%; left:2%; width:96%; z-index:5; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.bin-code { font:11px monospace; letter-spacing:.1em; color:#342b20; background:#e1d6ba url('/material/bateas/papel.jpg') center/cover no-repeat; padding:8px 17px; transform:rotate(-2deg); box-shadow:1px 2px 3px #0007; border:1px solid #b3a487; }
.crate-caption { display:flex; justify-content:space-between; padding:25px 0; border-bottom:1px solid var(--line); font:12px monospace; letter-spacing:.08em; }
.crate-caption span:last-child { color:var(--acid); }
footer { margin:0 4%; min-height:65px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; font:11px monospace; letter-spacing:.09em; color:#a9aaa0; position:relative; z-index:1; }
.breadcrumb { display:flex; gap:35px; align-items:center; padding:30px 4%; font-size:14px; }
.breadcrumb button { border:0; background:none; padding:10px 0; }
nav a, .breadcrumb button, .breadcrumb span { font:12px monospace; letter-spacing:.08em; }
nav a, .breadcrumb button { text-transform:uppercase; }
.breadcrumb span { color:#aaa; }
.dig-view { max-width:660px; margin:0 auto; padding:0 35px 15px; text-align:center; }
.paper-title { display:inline-block; max-width:90%; margin:0 0 -8px; border-radius:2px 3px 0 0; border-top:2px solid #e7d4ae; box-shadow:2px 2px 4px #0006; background:#d4c18d url('/material/bateas/carton.jpg') center/cover no-repeat; color:var(--ink); font:clamp(28px,4vw,43px) Impact,'Arial Narrow',sans-serif; text-transform:uppercase; padding:7px 15px 12px; transform:rotate(-2deg); position:relative; z-index:0; }
.dig-view .bin { width:min(100%,38vh); max-width:540px; margin:auto; }
.interactive { touch-action:pan-y; }
.interactive .front-cover { touch-action:pan-y; cursor:grab; }
.interactive .front-cover:active { cursor:grabbing; }
.interactive .front-cover { transition:transform 380ms cubic-bezier(.16,1,.3,1); user-select:none; }
.interactive .front-cover.dragging { transition:none; }
.travel-cover { position:fixed; z-index:100; pointer-events:none; object-fit:cover; border:0; box-shadow:0 18px 35px #0007; }
.record-caption { margin:10px 0 12px; display:grid; gap:5px; }
.record-caption strong { font-size:20px; }
.record-caption span { font:11px monospace; color:#aaa; }
.dig-controls { display:flex; justify-content:center; align-items:center; gap:27px; }
.dig-controls button { width:49px; height:44px; background:transparent; border:1px solid #777; font-size:23px; }
.dig-controls output { font:16px monospace; }
.dig-controls output span { color:#9a9b91; }
.hint { font-size:13px; line-height:1.7; color:#aaa; }
.record-detail { max-width:1440px; margin:20px auto 70px; padding:0 5%; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:5%; align-items:start; }
.record-art { position:relative; width:70%; isolation:isolate; transform:perspective(1000px) rotate(-1deg); transition:transform 220ms ease-out; }
.record-art > .sleeve { position:relative; z-index:1; box-shadow:4px 5px 8px #000b,0 15px 25px #0005; }
.vinyl { position:absolute; width:94%; aspect-ratio:1; top:3%; left:0; transform:translateX(46%); border-radius:50%; background:repeating-radial-gradient(circle at center,transparent 0 2px,#ffffff0b 2.5px,transparent 3px 4px),conic-gradient(from 25deg,#080808,#333 15%,#0a0a0a 28%,#111 48%,#393939 64%,#090909 78%,#080808); box-shadow:inset 0 0 0 2px #141414,2px 8px 16px #0008; animation:vinyl-emerge 800ms 450ms cubic-bezier(.2,.7,.2,1) both; }
.vinyl-label { position:absolute; width:34%; height:34%; left:33%; top:33%; border-radius:50%; object-fit:cover; filter:brightness(.85) saturate(.85); }
.vinyl:after { content:""; position:absolute; width:3%; height:3%; left:48.5%; top:48.5%; border-radius:50%; background:#121212; box-shadow:0 0 0 2px #0006; }
@keyframes vinyl-emerge { from { transform:translateX(0); } to { transform:translateX(46%); } }
.art-stamp { z-index:2; display:inline-block; background:var(--acid); color:#111; font:13px monospace; position:absolute; bottom:-12px; right:15px; padding:9px 15px; transform:rotate(3deg); }
.eyebrow { font:12px monospace; letter-spacing:.1em; margin:0 0 18px; }
.record-info h1,.editorial h1 { font:clamp(40px,5vw,68px)/.98 Impact,'Arial Narrow',sans-serif; text-transform:uppercase; letter-spacing:-.02em; }
.record-info h1 { font-size:clamp(34px,3.8vw,54px); }
.artist { font-size:15px; color:#bdbeb5; }
.review { font-size:15px; line-height:1.65; margin:20px 0 12px; }
.sample-note { font-size:12px; line-height:1.6; color:#a4a59b; }
.player { margin:20px 0 24px; }
.player iframe { border:0; display:block; border-radius:12px; background:#222; }
.player a { display:inline-block; margin-top:12px; font-size:13px; text-underline-offset:4px; }
.tags { border-top:1px solid var(--line); padding-top:24px; }
.tags a { display:inline-block; border:1px solid #777; text-decoration:none; padding:12px; margin:0 5px 8px 0; font-size:14px; }
.tags a:hover { background:var(--acid); color:#111; }
.editorial { max-width:850px; padding:65px 5% 150px; margin:auto; }
.editorial p:not(.eyebrow) { font-size:20px; line-height:1.6; margin:35px 0; }
@media (min-width:701px) {
  body[data-view="home"],body[data-view="batea"] { position:fixed; inset:0; width:100%; height:100dvh; overflow:hidden; overscroll-behavior:none; }
  body[data-view="home"] main,body[data-view="batea"] main { height:calc(100dvh - 161px); min-height:0; }
}
@media (min-width:1600px) { .shop { padding-top:150px; } }
@media (max-width:700px) {
  header { height:108px; padding:12px 4%; flex-direction:column; gap:12px; justify-content:center; }
  .brand { width:210px; max-width:75%; }
  nav { gap:28px; }
  nav a { padding:3px 0 6px; }
  .shop { grid-template-columns:1fr; max-width:440px; padding:65px 30px; gap:65px; }
  .divider h1 { font-size:17px; }
  .crate-caption { padding:18px 0; }
  .breadcrumb { gap:20px; padding:20px 6%; flex-wrap:wrap; }
  .dig-view { padding:10px 24px 35px; }
  .dig-view .bin { max-width:400px; }
  .record-detail { grid-template-columns:1fr; gap:45px; padding:0 7%; margin-top:15px; }
  .record-art { max-width:315px; width:70%; margin:0 30% 0 0; }
  .record-info h1 { font-size:40px; }
  footer { font-size:10px; align-items:flex-start; padding:20px 0; line-height:1.6; }
  footer span:first-child { max-width:220px; }
}
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

body[data-view='batea'] .breadcrumb { padding-top:20px; padding-bottom:20px; }
.dig-view .paper-title { font-size:clamp(16px,1.6vw,21px); }
@media (max-width:700px) { .dig-view .bin { width:min(100%,400px); } }

/* Carteles rectos y composición de la batea con guía lateral. */
.divider,.crate-choice:nth-child(2) .divider,.crate-choice:nth-child(3) .divider,.paper-title { transform:none; }
.divider { justify-content:center; padding-left:26px; padding-right:26px; }
.divider h1 { text-align:center; }
.divider .number { position:absolute; left:9px; }
.dig-view { max-width:1440px; padding:0 4% 16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,min(56vh,620px)) minmax(0,1fr); gap:30px; align-items:center; }
.dig-stage { grid-column:2; min-width:0; }
.dig-view .bin { width:100%; max-width:none; }
.dig-view .paper-title { text-align:center; }
.dig-hints { grid-column:3; text-align:left; justify-self:start; display:grid; gap:24px; padding:20px 16px; background:#11100dcc; border-left:1px solid #d4c18d66; max-width:220px; }
.dig-hints > div { display:flex; gap:12px; align-items:center; }
.dig-hints svg { width:25px; height:25px; flex:none; color:#d4c18d; }
.dig-hints p { font-size:13px; line-height:1.5; margin:0; color:#eee8db; }
.dig-hints span { display:block; color:#bbb6ab; font-size:12px; }
@media (min-width:701px) and (max-height:760px) { body[data-view='batea'] .breadcrumb { padding-top:10px; padding-bottom:10px; } .dig-view { grid-template-columns:minmax(0,1fr) minmax(0,min(53vh,620px)) minmax(0,1fr); } }
@media (min-width:701px) and (max-width:1000px) { .dig-view { grid-template-columns:minmax(0,1fr) 180px; gap:20px; max-width:820px; } .dig-stage { grid-column:1; width:min(100%,53vh); justify-self:center; } .dig-hints { grid-column:2; } }
@media (max-width:700px) { .dig-view { display:block; padding:10px 24px 35px; } .dig-stage { max-width:440px; margin:auto; } .dig-view .bin { width:100%; } .dig-hints { max-width:440px; margin:24px auto 0; grid-template-columns:repeat(3,1fr); gap:14px; border-left:0; border-top:1px solid #d4c18d66; padding:16px 10px; } .dig-hints > div { flex-direction:column; text-align:center; gap:8px; } .dig-hints p,.dig-hints span { font-size:11px; } }
@media (min-width:701px) and (max-height:620px) { body[data-view='batea'] { position:static; overflow:auto; } body[data-view='batea'] main { height:auto; min-height:calc(100dvh - 161px); } }

/* Ajustes de lectura y navegación junto a la batea. */
.divider h1,.dig-view .paper-title { font-family:'Arial Narrow',Arial,Helvetica,sans-serif; font-weight:700; letter-spacing:.025em; }
.dig-hints { border:0; }
body[data-view='batea'] .breadcrumb { width:min(56vh,620px); margin:0 auto; padding:16px 0 12px; justify-content:space-between; gap:16px; }
body[data-view='batea'] .breadcrumb span { font-size:10px; }
@media (min-width:701px) and (max-height:760px) { body[data-view='batea'] .breadcrumb { width:min(53vh,620px); padding-top:10px; padding-bottom:10px; } }
@media (min-width:701px) and (max-width:1000px) { body[data-view='batea'] .breadcrumb { width:auto; max-width:820px; padding-left:6%; padding-right:6%; } }
@media (max-width:700px) { body[data-view='batea'] .breadcrumb { width:calc(100% - 48px); max-width:440px; padding:16px 0 4px; } .dig-hints { border:0; } }

.crate-back { position:absolute; top:26%; right:92%; width:112px; min-height:44px; padding:13px 24px 13px 12px; z-index:0; border:0; border-radius:7px 0 0 7px; background:#e1d6ba url('/material/bateas/papel.jpg') center/cover; color:#292016; box-shadow:-2px 3px 5px #0006; font:12px monospace; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.crate-back:hover { background-color:#eee3c7; filter:brightness(1.08); }
body[data-view='batea'] .breadcrumb { justify-content:flex-end; min-height:50px; }
@media (min-width:701px) and (max-width:1000px) { .dig-stage { width:min(calc(100% - 65px),53vh); margin-left:65px; } }
@media (max-width:700px) { .dig-stage { width:calc(100% - 60px); margin-left:60px; margin-right:0; } .crate-back { width:92px; padding-left:9px; padding-right:19px; font-size:11px; } }

/* Batea fotográfica modular: la imagen enmarca las carátulas y conserva su proporción. */
.bin { aspect-ratio:762/1240; filter:drop-shadow(0 20px 15px #000a); }
.bin-back,.bin:before,.bin:after,.bin-shell,.bin-front { display:none; }
.bin-back { display:block; position:absolute; inset:0; border:0; box-shadow:none; background:var(--crate-background,url('/material/bateas/batea-fondo.webp')) center/100% 100% no-repeat; z-index:0; }
.bin-shell { display:block; position:absolute; inset:0; width:100%; border:0; border-radius:0; box-shadow:none; background:var(--crate-foreground,url('/material/bateas/batea-frente.webp')) center/100% 100% no-repeat; z-index:4; pointer-events:none; }
.bin-shell:before,.bin-shell:after { display:none; }
.behind { left:17%; top:calc(-5% - var(--depth)*1.15%); width:66%; transform:translateY(calc(var(--depth)*-1px)) scale(calc(1 - var(--depth)*.012)); filter:brightness(.72); z-index:1; }
.front-cover { left:17%; top:-5%; width:66%; z-index:2; }
.crate-choice:hover .front-cover { transform:translateY(-8px); }
.divider { z-index:6; margin-bottom:10%; }
.crate-caption { position:absolute; z-index:6; top:calc(28% + 56px); left:7%; right:7%; margin:0; padding:0; border:0; color:#e8e4d9; font-size:11px; }
.crate-caption span:last-child { color:var(--acid); }
.dig-stage { position:relative; }
.bin-wrap { position:relative; }
.dig-stage .paper-title { position:relative; z-index:6; margin-bottom:10%; }
.bin-panel-ui { position:absolute; z-index:6; left:5%; right:5%; top:28%; height:10%; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; color:#eeeae0; }
.bin-panel-ui .record-caption { margin:0; min-width:0; }
.bin-panel-ui .record-caption strong { font-size:clamp(13px,1.35vw,19px); }
.bin-panel-ui .dig-controls { gap:12px; flex:none; }
.bin-panel-ui .dig-controls button { width:40px; height:38px; }
.bin-panel-ui .dig-controls output { font-size:13px; }
.interactive .crate-back { top:17%; right:92%; z-index:-1; }
@media (min-width:701px) {
  .shop { padding-top:clamp(24px,4vh,50px); }
  .dig-view { grid-template-columns:minmax(0,1fr) minmax(0,min(43vh,470px)) minmax(0,1fr); align-items:start; }
  .dig-hints { margin-top:34%; }
  body[data-view='batea'] .breadcrumb { width:min(43vh,470px); }
}
@media (max-width:700px) {
  .shop { padding-top:45px; }
  .crate-caption { margin-top:0; }
  .dig-stage { width:calc(100% - 48px); margin-left:48px; }
  .bin-panel-ui { left:6%; right:6%; gap:8px; }
  .bin-panel-ui .record-caption strong { font-size:12px; }
  .bin-panel-ui .record-caption span { font-size:8px; }
  .bin-panel-ui .dig-controls { gap:6px; }
  .bin-panel-ui .dig-controls button { width:36px; height:36px; font-size:18px; }
  .bin-panel-ui .dig-controls output { font-size:10px; }
  .interactive .crate-back { right:90%; }
}

/* El mueble completo puede superar la altura de la ventana. */
body[data-view='home'],body[data-view='batea'] { position:relative; height:auto; overflow:auto; }
body[data-view='home'] main,body[data-view='batea'] main { height:auto; min-height:calc(100dvh - 161px); }

/* Encuadre y señalética: las portadas protagonizan la batea abierta. */
.shop { padding-top:clamp(95px,14vh,155px); }
.divider,.dig-stage .paper-title { background:#fff; color:#111; border:0; border-radius:0; }
.divider h1,.dig-stage .paper-title { font-family:Arial,Helvetica,sans-serif; font-weight:900; letter-spacing:0; }
.divider { min-height:42px; padding:8px 20px; }
.divider h1 { font-size:clamp(12px,1.1vw,16px); white-space:nowrap; }
.crate-caption { top:28%; height:10%; left:auto; right:7%; display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:8px; text-align:right; font-size:11px; }
.dig-view { max-width:1600px; grid-template-columns:minmax(95px,1fr) minmax(0,min(67vw,calc((100dvh - 230px)*1.3),760px)) minmax(175px,1fr); gap:24px; }
.dig-stage { width:100%; max-width:none; margin:0; }
.dig-hints { margin-top:clamp(100px,15vw,230px); }
body[data-view='batea'] .breadcrumb { width:min(60vw,760px); }
.bin-panel-ui .record-caption strong { font-size:clamp(16px,1.7vw,24px); }
.bin-panel-ui .dig-controls button { width:44px; height:44px; }
.bin-panel-ui { justify-content:flex-end; }
.bin-panel-ui .record-caption { position:absolute; left:50%; transform:translateX(-50%); width:48%; text-align:center; gap:3px; }
.bin-panel-ui .record-caption strong,
.bin-panel-ui .record-caption span { font-family:Arial,Helvetica,sans-serif; }
.bin-panel-ui .record-caption strong { font-weight:700; line-height:1.05; }
.bin-panel-ui .record-caption strong { font-family:Impact,'Arial Narrow',sans-serif; font-weight:400; letter-spacing:.015em; }
.bin-panel-ui .record-caption span { font-size:10px; font-weight:400; letter-spacing:.08em; color:#c8c8c2; }
@media (min-width:701px) { .dig-view { max-height:calc(100dvh - 215px); min-height:480px; overflow:hidden; overflow:clip; padding-top:4px; } .interactive .crate-back { right:calc(100% - 24px); } }
@media (min-width:701px) and (max-width:1000px) { .dig-view { grid-template-columns:minmax(0,1fr) 170px; padding-left:90px; gap:18px; } }
@media (max-width:700px) {
  .shop { padding-top:80px; }
  .dig-view { display:block; padding:10px 14px 30px; }
  .dig-stage { width:calc(100% - 38px); margin-left:38px; }
  .dig-stage { height:calc(72vw + 80px); clip-path:inset(-100px -100px 0 -100px); }
  .dig-hints { position:relative; z-index:7; margin:30px auto 0; background:#11100df2; }
  .bin-panel-ui .record-caption strong { font-size:12px; }
  .bin-panel-ui .record-caption { left:45%; width:38%; }
  .bin-panel-ui .record-caption span { font-size:8px; }
  .bin-panel-ui .dig-controls { gap:4px; }
  .bin-panel-ui .dig-controls button { width:36px; height:40px; }
  .interactive .crate-back { width:82px; right:calc(100% - 32px); padding-left:4px; padding-right:30px; font-size:10px; letter-spacing:0; }
  body[data-view='batea'] .breadcrumb { width:calc(100% - 48px); }
}

/* Pestaña de últimas adiciones: pegada al borde izquierdo y centrada a lo
   alto. La imagen es todo el botón; el ancho manda y el alto lo pone ella. */
.side-tab { position:fixed; top:50%; z-index:20; display:flex; }
.side-tab-latest { left:0; width:58px; transform:translateY(-50%); filter:drop-shadow(0 10px 25px #0008); }
.side-tab-latest img { display:block; width:100%; height:auto; }
.side-tab-latest:hover { filter:drop-shadow(0 10px 25px #0008) brightness(1.08); }
@media (max-width:700px) {
  .side-tab-latest { width:42px; }
}

/* El reproductor de YouTube es apaisado; el de Spotify es una barra. */
.player-video iframe { width:100%; height:auto; aspect-ratio:16/9; }