/* Play & Mix Club · estilos del diseño E (portada) + piezas compartidas */
/* Layout: dentro del club. Escenario con láseres a 128 BPM, cinta de titulares, caja de discos 3D, marcador de fichas */
:root {
  color-scheme: dark;
  --ink: #050505;
  --deck: #0f0f0f;
  --deck-2: #181818;
  --line: rgba(255,255,255,.1);
  --text: #f7f7f2;
  --muted: #b8b5aa;
  --gold: #f2bf07;
  --display: "Big Shoulders Display", "Roboto Condensed", "Arial Narrow", sans-serif;
  --body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --cut: 18px;
  --beat: 0;
}
html { scrollbar-color: #3a3a3a var(--ink); }
body { background: var(--ink); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.5; margin: 0; caret-color: var(--gold); }
::selection { background: var(--gold); color: #000; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.cut { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.material-icons { font-size: 22px; line-height: 1; }

/* Cabecera */
/* Fija también en la portada: transparente sobre el escenario y con fondo en cuanto se baja (sitio.js pone .scrolled) */
.head { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.head.scrolled, .head.menu-open { background: rgba(5,5,5,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom-color: var(--line); }
body.admin-bar .head { top: 32px; }
@media (max-width: 782px) { body.admin-bar .head { top: 46px; } }
.head .wrap { display: flex; align-items: center; gap: 28px; height: 80px; }
.head .logo img { height: 46px; width: auto; }
.menu { display: flex; gap: 4px; margin-left: auto; font: 800 17px var(--display); text-transform: uppercase; letter-spacing: .06em; }
.menu a { padding: 10px 12px; position: relative; }
.menu a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.menu a:hover::after, .menu a.on::after { transform: scaleX(1); }
.menu a.on { color: var(--gold); }
.icons { display: flex; gap: 4px; }
.icons button { background: none; border: 0; color: var(--text); width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; }
.icons .burger { display: none; }

/* Escenario */
.stage { position: relative; min-height: 760px; display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: #000; isolation: isolate; }
.stage .photo { position: absolute; inset: 0; z-index: -3; }
.stage .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; filter: grayscale(1) contrast(1.3) brightness(calc(.7 + var(--beat) * .25)); }
.stage .photo::after { content: ""; position: absolute; inset: 0; background: var(--gold); mix-blend-mode: multiply; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.1) 75%), linear-gradient(to top, #000 0%, rgba(0,0,0,0) 40%); }
#lasers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; mix-blend-mode: screen; pointer-events: none; }
.ghost { position: absolute; left: -1vw; bottom: 96px; z-index: -1; font: 900 25vw/.78 var(--display); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(242,191,7,.28); white-space: nowrap; pointer-events: none; user-select: none; letter-spacing: -.01em; }.stage-copy { align-self: center; padding-top: 120px; padding-bottom: 40px; display: grid; gap: 22px; }
.stage h1 { font: 900 clamp(64px, 10vw, 6rem)/.86 var(--display); text-transform: uppercase; margin: 0; max-width: 9ch; text-wrap: balance; text-shadow: 0 0 calc(var(--beat) * 28px) rgba(242,191,7,.55); }
.stage h1 span { color: var(--gold); display: block; }
/* Nombre del DJ que suena: puede ser largo («Dixtorsion & Juls Gold Play») */
.stage h1 #hero-dj { width: max-content; max-width: min(14ch, 82vw); overflow-wrap: anywhere; }
.stage h1 #hero-dj.largo { font-size: .7em; line-height: .92; max-width: min(18ch, 82vw); }
.stage #hero-sesion.sesion { font: 700 clamp(20px, 2vw, 26px)/1.25 var(--display); text-transform: uppercase; letter-spacing: .02em; color: #f7f7f2; }
.stage p { margin: 0; max-width: 42ch; font-size: 19px; color: #e4e1d6; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 800 19px var(--display); text-transform: uppercase; letter-spacing: .06em; padding: 14px 26px; background: var(--gold); color: #000; border: 0; cursor: pointer; transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(242,191,7,.55); }
.btn.line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.btn.line:hover { box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); }
.bpm { display: inline-flex; align-items: center; gap: 10px; font: 800 16px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.bpm i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); transform: scale(calc(.6 + var(--beat) * .8)); box-shadow: 0 0 calc(var(--beat) * 16px) var(--gold); }

.deck { border-top: 1px solid rgba(242,191,7,.35); background: rgba(0,0,0,.75); backdrop-filter: blur(6px); }
.deck .wrap { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 24px; align-items: center; padding-block: 14px; }
.now { display: grid; gap: 2px; min-width: 0; max-width: 300px; }
.now small { font: 800 13px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.now b { font: 800 20px/1.1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now span { color: var(--muted); font-size: 14px; }
#wave { width: 100%; height: 64px; display: block; }

/* Cinta de titulares */
.ticker { background: var(--gold); color: #000; overflow: hidden; border-block: 1px solid #000; }
.ticker-track { display: flex; width: max-content; animation: run 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker a { display: inline-flex; align-items: center; gap: 14px; padding: 14px 28px; font: 900 22px var(--display); text-transform: uppercase; white-space: nowrap; }
.ticker a::after { content: ""; width: 8px; height: 8px; background: #000; transform: rotate(45deg); margin-left: 28px; }
.ticker a:hover { text-decoration: underline; text-underline-offset: 5px; }
@keyframes run { to { transform: translateX(-50%); } }

/* Secciones */
.sec { padding-block: 80px; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }
.h2 { font: 900 clamp(44px, 7vw, 6rem)/.86 var(--display); text-transform: uppercase; margin: 0; }
.more { font: 800 16px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 4px; }
.more:hover { text-decoration: underline; text-underline-offset: 6px; }
.tag { position: absolute; top: 14px; left: 14px; z-index: 2; font: 800 13px var(--display); letter-spacing: .12em; text-transform: uppercase; background: var(--gold); color: #000; padding: 6px 10px; }
.media { position: relative; overflow: hidden; background: var(--deck); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
a:hover .media img { transform: scale(1.05); }
.meta { color: var(--muted); font-size: 15px; }
.playdot { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: #000; display: grid; place-items: center; transition: transform .25s cubic-bezier(.16,1,.3,1); }
a:hover .playdot { transform: scale(1.1); }
.playdot .material-icons { font-size: 28px; }

/* Noticias */
.news { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; }
.news-lead .media { aspect-ratio: 3/2; }
.news-lead h3, .news-lead .news-lead-t { font: 900 clamp(30px, 3.4vw, 46px)/.95 var(--display); text-transform: uppercase; margin: 18px 0 8px; text-wrap: balance; }
.news-lead:hover h3, .news-lead:hover .news-lead-t, .news-row:hover h3 { color: var(--gold); }
.news-list { display: grid; align-content: start; }
.news-row { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); align-items: center; }
.news-row:first-child { border-top: 0; padding-top: 0; }
.news-row .media { aspect-ratio: 4/3; }
.news-row .media .tag { top: 8px; left: 8px; font-size: 11px; padding: 4px 7px; }
.news-row h3 { font: 800 23px/1.02 var(--display); text-transform: uppercase; margin: 0 0 6px; text-wrap: balance; }

/* Caja de discos 3D */
.crate-wrap { background: radial-gradient(ellipse 60% 70% at 30% 40%, rgba(242,191,7,.12), transparent 70%), var(--deck); overflow: hidden; }
.crate-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.crate { position: relative; height: 440px; perspective: 1300px; }
.disc { position: absolute; left: 50%; top: 10px; width: min(360px, 72vw); aspect-ratio: 1; margin-left: calc(min(360px, 72vw) / -2); border: 0; padding: 0; background: #000; cursor: pointer; transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .7s, filter .7s; transform-style: preserve-3d; }
.disc img { width: 100%; height: 100%; object-fit: cover; }
.disc::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40%; background: inherit; background-image: var(--img); background-size: cover; background-position: bottom; transform: scaleY(-1); opacity: .18; -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000); mask-image: linear-gradient(to bottom, transparent 30%, #000); }
.disc.on { box-shadow: 0 30px 60px -20px rgba(242,191,7,.45); }
.crate-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 12px; }
.crate-nav button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: rgba(0,0,0,.5); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, color .2s; }
.crate-nav button:hover { border-color: var(--gold); color: var(--gold); }
.panel h3 { font: 900 clamp(36px, 4vw, 52px)/.9 var(--display); text-transform: uppercase; margin: 0 0 6px; }
.panel .genre { display: inline-block; font: 800 13px var(--display); letter-spacing: .12em; text-transform: uppercase; background: var(--gold); color: #000; padding: 5px 10px; margin-bottom: 14px; }
.ranks { list-style: none; margin: 22px 0 24px; padding: 0; }
.ranks li { display: grid; grid-template-columns: 58px 52px minmax(0,1fr) 44px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ranks .n { font: 900 52px/.8 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); text-align: right; font-variant-numeric: tabular-nums; }
.ranks li:first-child .n { color: var(--gold); -webkit-text-stroke: 0; }
.ranks img { width: 52px; height: 52px; object-fit: cover; }
.ranks .t { font: 800 21px/1.05 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranks .a { color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranks button { background: none; border: 0; color: var(--muted); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; transition: color .2s, background .2s; }
.ranks button:hover { color: #000; background: var(--gold); }
.ranks li:hover .t { color: var(--gold); }
.panel-empty { margin: 22px 0 24px; color: var(--muted); max-width: 40ch; }

/* Evento: marcador de fichas */
.event { background: var(--gold); color: #000; }
.event .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding-block: 72px; }
.event h2 { font: 900 clamp(48px, 7vw, 6rem)/.85 var(--display); text-transform: uppercase; margin: 0 0 16px; text-wrap: balance; }
.event h2 span { color: inherit; }
.event .info { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 18px; font-weight: 700; color: #000; }
.event .info span { display: inline-flex; align-items: center; gap: 8px; }
.event .info .material-icons { color: #000; }
.event .btn { margin-top: 24px; background: #000; color: var(--gold); }
.event .btn:hover { box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
.board { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.unit { display: grid; gap: 10px; text-align: center; }
.unit small { font: 800 14px var(--display); letter-spacing: .16em; text-transform: uppercase; color: #000; }
.flaps { display: flex; gap: 4px; justify-content: center; }
.flap { position: relative; width: 100%; max-width: 64px; aspect-ratio: 3/4.2; background: linear-gradient(#1c1c1c 50%, #141414 50%); color: var(--gold); display: grid; place-items: center; font: 900 clamp(40px, 5vw, 64px)/1 var(--display); font-variant-numeric: tabular-nums; perspective: 300px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.9); }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #000; }
.flap span { display: block; transform-origin: 50% 50%; }
.flap.flip span { animation: flip .45s cubic-bezier(.16,1,.3,1); }
@keyframes flip { 0% { transform: rotateX(90deg); opacity: .3; } 100% { transform: rotateX(0); opacity: 1; } }
.board-note { grid-column: 1 / -1; color: #000; font-size: 15px; font-weight: 700; margin: 6px 0 0; text-align: center; }

/* Productores */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 46%); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
.rail a { scroll-snap-align: start; }
.rail .media { aspect-ratio: 770/405; }
.rail h3 { font: 900 30px/.95 var(--display); text-transform: uppercase; margin: 16px 0 6px; }
.rail a:hover h3 { color: var(--gold); }

/* DJs */
.djs-wrap { background: var(--deck); }
.djs { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 18px; }
.dj .media { aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px transparent; transition: box-shadow .3s; }
.dj:hover .media { box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(242,191,7,.35); }
.dj h3 { font: 800 19px var(--display); text-transform: uppercase; text-align: center; margin: 12px 0 0; }
.dj p { text-align: center; color: var(--muted); font-size: 14px; margin: 2px 0 0; }

.foot { border-top: 1px solid var(--line); padding-block: 28px; color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }

/* Drop: destello y escáner sobre el titular */
.flash { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 60% 15%, rgba(255,240,190,.9), rgba(242,191,7,.25) 45%, transparent 75%); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.stage h1 { position: relative; }
.scan { position: absolute; left: -2%; right: -2%; top: 0; height: 3px; background: var(--gold); box-shadow: 0 0 18px 4px rgba(242,191,7,.7); opacity: 0; pointer-events: none; }
.stage h1.drop .scan { animation: scan .7s cubic-bezier(.16,1,.3,1); }
@keyframes scan { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* Vinilo que sale de la funda */
.vinyl { position: absolute; top: 20px; left: 50%; width: min(340px, 68vw); aspect-ratio: 1; margin-left: calc(min(340px, 68vw) / -2); border-radius: 50%; z-index: 9; background: repeating-radial-gradient(circle at 50% 50%, #0b0b0b 0 2px, #171717 2px 3px); box-shadow: 0 20px 40px -12px rgba(0,0,0,.9), inset 0 0 0 2px #000; transition: transform .8s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.vinyl.out { transform: translateX(46%); }
.vinyl .spin { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,255,255,.09), transparent 20%, rgba(255,255,255,.06) 50%, transparent 70%, rgba(255,255,255,.09)); animation: spin 3.2s linear infinite; }
.vinyl .label { position: absolute; inset: 34%; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 4px var(--gold); animation: spin 3.2s linear infinite; }
.vinyl .label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #000; }
body.playing .vinyl .spin, body.playing .vinyl .label { animation-duration: 1.4s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* DJs en 3D con brillo que sigue al cursor */
.dj { perspective: 700px; }
.dj .media { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: box-shadow .3s, transform .4s cubic-bezier(.16,1,.3,1); }
.dj .media::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,236,160,.45), transparent 55%); opacity: 0; transition: opacity .3s; mix-blend-mode: screen; }
.dj:hover .media::after { opacity: 1; }

@media (max-width: 1100px) {
  .menu { display: none; }
  .icons { margin-left: auto; }
  .icons .burger { display: grid; }
  .djs { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 880px) {
  .stage { min-height: 680px; }
  .stage::before { background: linear-gradient(to top, #000 0%, rgba(0,0,0,.8) 45%, rgba(0,0,0,.2) 100%); }
  .stage-copy { align-self: end; }
  .ghost { bottom: 150px; font-size: 34vw; }
  .news, .crate-grid, .event .wrap { grid-template-columns: minmax(0,1fr); }
  .crate { height: 380px; }
  .rail { grid-auto-columns: 82%; }
  .deck .wrap { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .now { max-width: none; }
}
@media (max-width: 560px) {
  .head .wrap { height: 68px; }
  .head .logo img { height: 38px; }
  .sec { padding-block: 56px; }
  .stage h1 { font-size: 60px; }
  .ticker a { font-size: 18px; padding: 12px 20px; }
  .news-row { grid-template-columns: 110px minmax(0,1fr); gap: 14px; }
  .news-row h3 { font-size: 20px; }
  .crate { height: 320px; }
  .ranks li { grid-template-columns: 40px 46px minmax(0,1fr) 40px; gap: 10px; }
  .ranks .n { font-size: 38px; }
  .ranks img { width: 46px; height: 46px; }
  .ranks .t { font-size: 18px; }
  .board { gap: 8px; }
  .flaps { gap: 2px; }
  .unit small { font-size: 11px; letter-spacing: .08em; }
  .djs { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== Piezas compartidas (parrilla, eventos, productores, line-up, pie, filas del Top 10) ===== */
/* Zonas compartidas por las propuestas C, D y E: parrilla, productores españoles y line-up internacional */

/* Parrilla */
.days { display: flex; flex-wrap: wrap; gap: 6px; }
.days button { font: 800 16px var(--display); letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--muted); border: 2px solid var(--line); padding: 8px 12px; min-width: 58px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.days button:hover { color: var(--text); border-color: rgba(242,191,7,.6); }
.days button.is-today { color: var(--text); border-color: rgba(242,191,7,.55); }
.days button[aria-pressed="true"] { background: var(--gold); color: #000; border-color: var(--gold); }
.ruler { position: relative; display: flex; height: 64px; margin: 34px 0 8px; background: #000; }
.ruler .blk { position: relative; height: 100%; overflow: hidden; border-right: 2px solid #000; background-size: cover; background-position: center; filter: grayscale(1) brightness(.5); transition: filter .4s; }
.ruler .blk:last-of-type { border-right: 0; }
.ruler .blk.ns { background: repeating-linear-gradient(90deg, #1c1c1c 0 3px, #121212 3px 6px); filter: none; }
.ruler .blk.live, .ruler .blk:hover { filter: none; }
.ruler .blk span { position: absolute; left: 8px; right: 6px; bottom: 6px; font: 800 13px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ruler .blk.ns span { color: var(--muted); }
.ruler .now { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 0 0 12px var(--gold); z-index: 2; pointer-events: none; }
.ruler .now::before { content: "Ahora"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font: 800 11px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #000; background: var(--gold); padding: 2px 6px; }
.hours { display: flex; justify-content: space-between; margin-bottom: 30px; font: 700 13px var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.shows { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 36px) / 3)); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.show { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: #111; scroll-snap-align: start; }
.show img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.show:hover img { transform: scale(1.05); }
.show::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,0) 62%); }
.show .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 18px 18px; display: grid; gap: 4px; }
.show .day { font: 800 12px var(--display); letter-spacing: .14em; text-transform: uppercase; color: #d9d5c7; }
.show .time { font: 800 16px var(--display); letter-spacing: .08em; color: var(--gold); font-variant-numeric: tabular-nums; }
.show h3 { font: 900 25px/1 var(--display); text-transform: uppercase; margin: 0; color: #fff; text-wrap: balance; }
.show:hover h3 { color: var(--gold); }
.show .live { position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font: 800 13px var(--display); letter-spacing: .12em; text-transform: uppercase; background: var(--gold); color: #000; padding: 6px 10px; }
.show .live i { width: 8px; height: 8px; border-radius: 50%; background: #000; animation: pm-blink 1.2s steps(2) infinite; }
@keyframes pm-blink { 50% { opacity: .2; } }
.show .bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 4px; background: rgba(255,255,255,.2); }
.show .bar b { display: block; height: 100%; background: var(--gold); }
.grid-note { color: var(--muted); font-size: 15px; margin: 14px 0 0; max-width: 70ch; }

/* Productores españoles */
.prods { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.prod { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #111; }
.prod img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter .5s, transform .6s cubic-bezier(.16,1,.3,1); }
.prod:hover img { filter: none; transform: scale(1.05); }
.prod::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0) 55%); }
.prod h3 { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; margin: 0; font: 900 28px/1 var(--display); text-transform: uppercase; color: #fff; }
.prod:hover h3 { color: var(--gold); }

/* Line-up internacional, como un cartel de festival */
.lineup-sec { background: #000; border-block: 1px solid rgba(242,191,7,.3); }
.lineup { display: grid; gap: 16px; text-align: center; }
.tier { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; }
.tier li { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .95; }
.tier li + li::before { content: ""; display: inline-block; width: .2em; height: .2em; margin: 0 .5em; background: var(--gold); transform: rotate(45deg); }
.tier a { transition: color .2s; }
.tier a:hover { color: var(--gold); }
.t1 li { font-size: clamp(38px, 6vw, 6rem); color: #fff; }
.t2 li { font-size: clamp(24px, 3.2vw, 46px); color: #ece9df; }
.t3 li { font-size: clamp(17px, 1.9vw, 27px); font-weight: 800; color: var(--muted); }
.tier li.has a { color: var(--gold); }
.lineup-key { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 26px 0 0; color: var(--muted); font-size: 15px; }
.lineup-key i { width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); }

/* Top 10: filas con play y carrito que se despliegan en una preescucha */
.ranks li.trk { display: block; padding: 0; }
.ranks .trk-row { display: grid; grid-template-columns: minmax(36px, 64px) 52px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 10px 0; cursor: pointer; }
.ranks .trk-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ranks .trk-row img { width: 52px; height: 52px; object-fit: cover; }
.ranks .trk.open .t { color: var(--gold); }
.trk-acts { display: flex; align-items: center; gap: 4px; }
.ranks .trk-acts button, .ranks .trk-acts a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: var(--gold); cursor: pointer; transition: color .2s, background .2s; }
.ranks .trk-acts button:hover, .ranks .trk-acts a:hover { color: #000; background: var(--gold); }
.eq { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.eq i { width: 4px; background: currentColor; animation: pm-eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes pm-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.trk.playing .trk-play .material-icons { display: none; }
.trk.playing .trk-play .eq { display: flex; }
.trk-prev { display: none; grid-template-columns: 104px minmax(0,1fr) auto; gap: 18px; align-items: center; margin: 0 0 12px; padding: 14px; background: linear-gradient(90deg, rgba(242,191,7,.13), rgba(242,191,7,.03)); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.trk.open .trk-prev { display: grid; animation: pm-open .4s cubic-bezier(.16,1,.3,1); }
@keyframes pm-open { from { opacity: 0; transform: translateY(-6px); } }
.ranks .trk-prev img { width: 104px; height: 104px; object-fit: cover; }
.trk-prev .lbl { font: 800 12px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.trk-prev b { display: block; font: 900 24px/1 var(--display); text-transform: uppercase; color: var(--text); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-prev .who { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.pbar { height: 4px; margin-top: 12px; background: rgba(255,255,255,.16); }
.pbar span { display: block; height: 100%; width: 0; background: var(--gold); }
.tm { display: block; margin-top: 6px; font: 700 13px var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.prev-btns { display: flex; align-items: center; gap: 10px; }
.ranks .prev-btns button { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--gold); color: #000; display: grid; place-items: center; cursor: pointer; transition: transform .2s cubic-bezier(.16,1,.3,1); }
.ranks .prev-btns button:hover { transform: scale(1.06); background: var(--gold); color: #000; }
.ranks .prev-btns button .material-icons { font-size: 32px; }
.prev-btns a { display: inline-flex; align-items: center; gap: 6px; font: 800 14px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--text); border: 2px solid rgba(255,255,255,.3); padding: 9px 12px; transition: border-color .2s, color .2s; }
.prev-btns a:hover { border-color: var(--gold); color: var(--gold); }
.prev-btns a .material-icons { font-size: 18px; }
@media (max-width: 560px) {
  .ranks .trk-row { grid-template-columns: 34px 46px minmax(0,1fr) auto; gap: 10px; }
  .ranks .trk-row img { width: 46px; height: 46px; }
  .ranks .trk-acts button, .ranks .trk-acts a { width: 38px; height: 38px; }
  .trk-prev { grid-template-columns: 72px minmax(0,1fr); }
  .ranks .trk-prev img { width: 72px; height: 72px; }
  .trk-prev b { font-size: 19px; }
  .prev-btns { grid-column: 1 / -1; }
  .prev-btns a span.txt { display: inline; }
}

/* Carrusel de próximos eventos en la franja dorada */
.evc { background: var(--gold); color: #000; }
.evc-in { padding-block: 56px 30px; }
.evc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.evc-top h2 { margin: 0; font: 900 clamp(30px, 4vw, 46px)/1 var(--display); text-transform: uppercase; }
.evc-nav { display: flex; align-items: center; gap: 10px; }
.evc-nav button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #000; color: var(--gold); display: grid; place-items: center; cursor: pointer; transition: transform .2s cubic-bezier(.16,1,.3,1); }
.evc-nav button:hover { transform: scale(1.08); }
.evc-pos { min-width: 48px; text-align: center; font: 800 17px var(--display); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.evc-view { overflow: hidden; touch-action: pan-y; }
.evc-track { display: flex; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.evc-slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: 210px minmax(0,1fr) auto; gap: 40px; align-items: center; padding: 8px 6px 14px; box-sizing: border-box; }
.evc-poster { display: block; aspect-ratio: 4/5; overflow: hidden; background: #000; transform: rotate(-2.5deg); box-shadow: 0 18px 34px -14px rgba(0,0,0,.6); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.evc-poster:hover { transform: rotate(0deg) scale(1.03); }
.evc-poster img { width: 100%; height: 100%; object-fit: cover; }
.evc-genre { display: inline-block; font: 800 13px var(--display); letter-spacing: .12em; text-transform: uppercase; background: #000; color: var(--gold); padding: 5px 10px; }
.evc-slide h3 { margin: 14px 0 14px; font: 900 clamp(40px, 5.6vw, 5.4rem)/.86 var(--display); text-transform: uppercase; text-wrap: balance; }
.evc-info { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 18px; font-weight: 700; }
.evc-info span { display: inline-flex; align-items: center; gap: 8px; }
.evc-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font: 800 19px var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 14px 26px; background: #000; color: var(--gold); transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
.evc-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
.evc-clock { display: grid; grid-template-columns: repeat(4, auto); gap: 12px; align-content: center; }
.evc-unit { display: grid; gap: 8px; text-align: center; }
.evc-unit small { font: 800 13px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.evc-flaps { display: flex; justify-content: center; gap: 3px; }
.evc-flap { position: relative; width: 46px; aspect-ratio: 3/4.2; display: grid; place-items: center; background: linear-gradient(#1c1c1c 50%, #141414 50%); color: var(--gold); font: 900 46px/1 var(--display); font-variant-numeric: tabular-nums; perspective: 300px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.8); }
.evc-flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #000; }
.evc-flap span { display: block; }
.evc-flap.flip span { animation: pm-flip .45s cubic-bezier(.16,1,.3,1); }
@keyframes pm-flip { 0% { transform: rotateX(90deg); opacity: .3; } 100% { transform: rotateX(0); opacity: 1; } }
.evc-note { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; font-size: 14px; font-weight: 700; }
.evc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 26px; padding-top: 20px; border-top: 2px solid rgba(0,0,0,.18); }
.evc-thumbs { display: flex; gap: 10px; }
.evc-thumbs button { width: 52px; aspect-ratio: 4/5; padding: 0; border: 0; background: #000; cursor: pointer; opacity: .5; outline: 3px solid transparent; outline-offset: 2px; transition: opacity .2s, outline-color .2s; }
.evc-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.evc-thumbs button:hover { opacity: .85; }
.evc-thumbs button[aria-current="true"] { opacity: 1; outline-color: #000; }
.evc-cal { display: inline-flex; align-items: center; gap: 8px; font: 800 17px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #000; }
.evc-cal:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 1100px) {
  .evc-slide { grid-template-columns: 170px minmax(0,1fr); gap: 28px; }
  .evc-clock { grid-column: 1 / -1; justify-content: start; }
  .evc-note { text-align: left; }
}
@media (max-width: 560px) {
  .evc-slide { grid-template-columns: 112px minmax(0,1fr); gap: 18px; align-items: start; }
  .evc-slide h3 { font-size: 34px; margin: 10px 0; }
  .evc-info { font-size: 15px; }
  .evc-btn { font-size: 16px; padding: 12px 18px; }
  .evc-clock { gap: 8px; }
  .evc-flap { width: 34px; font-size: 34px; }
  .evc-unit small { font-size: 11px; letter-spacing: .08em; }
  .evc-thumbs button { width: 42px; }
}

/* Pie */
.site-foot { background: #000; border-top: 1px solid rgba(242,191,7,.3); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; padding-block: 72px 56px; }
.foot-cols h2 { font: 900 30px/1 var(--display); text-transform: uppercase; margin: 0 0 16px; padding-bottom: 16px; color: var(--text); background: radial-gradient(circle, var(--gold) 1.6px, transparent 2px) left bottom / 9px 4px repeat-x; }
.foot-cols p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 44ch; }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: 26px; border-top: 1px solid var(--line); }
.foot-legal { margin: 0; font: 800 15px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.foot-legal a { color: var(--gold); }
.foot-legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.social span { font: 800 15px var(--display); letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.social a { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; color: var(--text); font-size: 17px; transition: color .2s, border-color .2s, background .2s; }
.social a:hover { color: #000; background: var(--gold); border-color: var(--gold); }
.foot-note { color: var(--muted); font-size: 13px; padding-block: 0 24px; margin: 0; }

@media (max-width: 880px) {
  .foot-cols { grid-template-columns: minmax(0,1fr); gap: 36px; padding-block: 56px 40px; }
  .shows { grid-auto-columns: 82%; }
  .prods { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ruler .blk span { display: none; }
  .ruler .blk.live span { display: block; }
}
@media (max-width: 560px) {
  /* Equipo en móvil: tira deslizable de fotos pequeñas en lugar de dos fotos enormes por fila */
  .sec .djs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 28%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .sec .djs::-webkit-scrollbar { display: none; }
  .sec .dj { scroll-snap-align: start; }
  .sec .dj h3 { font-size: 15px; margin-top: 8px; }
  .sec .dj p { font-size: 12px; }
  .days button { min-width: 0; padding: 7px 9px; font-size: 14px; }
  .prod h3 { font-size: 21px; }
}

/* Como el tema real: el reproductor cuenta el relleno dentro del ancho (si no, en móvil desborda 10 px) */
#pmt-onair-bar, #pmt-onair-bar * { box-sizing: border-box; }

/* Filtros de listados (Noticias): mismo aspecto que los días de la programación */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.filtros a { font: 800 16px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 2px solid var(--line); padding: 8px 12px; transition: color .2s, border-color .2s, background .2s; }
.filtros a:hover { color: var(--text); border-color: rgba(242,191,7,.6); }
.filtros a[aria-current="page"] { background: var(--gold); color: #000; border-color: var(--gold); }
@media (max-width: 720px) { .filtros a { padding: 7px 9px; font-size: 14px; } }

/* Noticias: rejilla + lateral (buscador, recientes, más vistas) */
.news-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.news-cols .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-side { display: grid; gap: 22px; position: sticky; top: calc(96px + var(--wp-admin--admin-bar--height, 0px)); }
.side-box { background: var(--deck); padding: 22px; }
.side-box h2, .side-search label { display: block; margin: 0 0 14px; font: 900 26px/1 var(--display); text-transform: uppercase; }
.side-search div { display: flex; }
.side-search input { flex: 1; min-width: 0; background: #000; color: var(--text); border: 2px solid var(--line); border-right: 0; padding: 10px 12px; font: inherit; font-size: 16px; }
.side-search input:focus { outline: none; border-color: var(--gold); }
.side-search button { background: var(--gold); color: #000; border: 0; width: 48px; display: grid; place-items: center; cursor: pointer; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; }
.side-list li + li { border-top: 1px solid var(--line); }
.side-list a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 12px 0; }
.side-list .t { grid-column: 2; font: 800 18px/1.1 var(--display); text-transform: uppercase; }
.side-list small { grid-column: 2; color: var(--muted); font-size: 14px; margin-top: 4px; }
.side-list .n { grid-row: span 2; font: 900 32px/1 var(--display); color: transparent; -webkit-text-stroke: 1.2px var(--gold); min-width: 28px; }
.side-list a:hover .t { color: var(--gold); }
@media (max-width: 1100px) { .news-cols { grid-template-columns: minmax(0, 1fr); } .news-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 560px) { .news-cols .cards { grid-template-columns: minmax(0, 1fr); } }