/* DENSO — DJ Presskit. Brutalismo de terminal: casi negro, blanco fósforo, rojo de alarma.
   Sin redondeos, sin sombras, sin degradados suaves. Filetes de 1px. */
:root {
  --bg: #0b0a0a;
  --bg2: #141212;
  --fg: #ecebe8;
  --dim: #8a8682;
  --linea: #2b2827;
  --rojo: #ff2a2a;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Archivo Black", "Arial Black", sans-serif;
  --gut: clamp(16px, 3vw, 40px);
}
* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 52px; }
body {
  background: var(--bg); color: var(--fg);
  font: 400 15px/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* grano general */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
p, li, dd { text-wrap: pretty; }
::selection { background: var(--rojo); color: var(--bg); }

/* ---------- barra ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: stretch; height: 44px;
  background: var(--bg); border-bottom: 1px solid var(--linea);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.bar > * { display: flex; align-items: center; padding: 0 var(--gut); border-right: 1px solid var(--linea); white-space: nowrap; }
.bar-id { font-family: var(--sans); font-size: 15px; letter-spacing: -.01em; }
/* el piloto de grabar en vez de la ®: redondo (la única curva del sitio, es una luz, no interfaz), con brillo y un latido lento */
.bar-id { display: inline-flex; align-items: center; }
.rec { width: 8px; height: 8px; margin-left: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a8a 0 18%, var(--rojo) 55%, #b30f0f 100%); box-shadow: 0 0 6px 1px rgba(255, 42, 42, .75), 0 0 16px 3px rgba(255, 42, 42, .3); animation: grabando 1.6s ease-in-out infinite; }
@keyframes grabando { 50% { opacity: .35; box-shadow: 0 0 3px 0 rgba(255, 42, 42, .4), 0 0 8px 1px rgba(255, 42, 42, .12); } }
.bar-cell { color: var(--dim); }
.dot { width: 7px; height: 7px; background: var(--rojo); margin-right: 8px; animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.lang { margin-left: auto; background: none; border: 0; border-left: 1px solid var(--linea); font: inherit; color: var(--dim); cursor: pointer; letter-spacing: .1em; }
.lang b { font-weight: 400; }
.lang[data-lang="es"] b, .lang:not([data-lang]) b { color: var(--dim); }
.lang .on { color: var(--fg); }
.bar-cta { background: var(--rojo); color: var(--bg); font-weight: 700; border-right: 0; }
.bar-cta:hover { background: var(--fg); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(100svh - 44px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; border-bottom: 1px solid var(--linea); }
.hero-foto, .hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.hero-foto img { filter: contrast(1.15) saturate(1.1); }
.hero-trama {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(11,10,10,.35) 2px 4px),
    radial-gradient(circle, rgba(11,10,10,.55) 1px, transparent 1.3px) 0 0 / 5px 5px,
    linear-gradient(to bottom, rgba(11,10,10,.2), rgba(11,10,10,.1) 50%, rgba(11,10,10,.85));
}
.hero-centro { position: relative; display: grid; place-items: center; align-content: center; gap: 18px; padding: 48px var(--gut) 24px; text-align: center; }
.hero h1 { width: min(78vw, 820px); }
.logo { width: 100%; height: auto; }
.marca { font-size: 11px; letter-spacing: .25em; color: var(--fg); opacity: .8; }
.hero-datos { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea); border-top: 1px solid var(--linea); }
.hero-datos > div { background: rgba(11,10,10,.86); padding: 14px var(--gut); }
.hero-datos dt { font-size: 10px; letter-spacing: .15em; color: var(--rojo); }
.hero-datos dd { font-size: 13px; letter-spacing: .08em; }

/* cinta de aviso */
.cinta { height: 18px; background: repeating-linear-gradient(-45deg, var(--rojo) 0 14px, var(--bg) 14px 28px); border-block: 1px solid var(--linea); }

/* ---------- comunes ---------- */
section { padding: clamp(56px, 9vw, 120px) var(--gut); border-bottom: 1px solid var(--linea); }
.etq { font-size: 11px; letter-spacing: .2em; color: var(--rojo); text-transform: uppercase; }
.etq.dim { color: var(--dim); }
.cab { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--fg); margin-bottom: 0; }
.gigante { font-family: var(--sans); text-transform: uppercase; font-size: clamp(3.4rem, 13vw, 13rem); line-height: .86; letter-spacing: -.045em; }
.rojo { color: var(--rojo); }

/* ---------- bio ---------- */
.bio .gigante { display: flex; flex-wrap: wrap; column-gap: .12em; margin: 24px 0 clamp(40px, 6vw, 80px); }
.bio-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.bio-foto { background: var(--bg); position: relative; }
.bio-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.35); mix-blend-mode: screen; }
.bio-foto::before { content: ""; position: absolute; inset: 0; background: var(--rojo); mix-blend-mode: multiply; z-index: 1; pointer-events: none; }
.bio-foto::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle, rgba(11,10,10,.6) 1px, transparent 1.4px) 0 0 / 4px 4px; }
.bio-foto figcaption { position: absolute; left: 0; bottom: 0; z-index: 3; background: var(--bg); padding: 6px 10px; font-size: 10px; letter-spacing: .15em; color: var(--dim); }
.bio-texto { background: var(--bg); padding: clamp(24px, 4vw, 56px); display: grid; align-content: center; gap: 1.2em; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; color: #cfccc8; }
.bio-texto .lead { font-size: clamp(18px, 1.8vw, 26px); line-height: 1.4; color: var(--fg); }
.bio-texto b { font-family: var(--sans); font-weight: 400; color: var(--rojo); letter-spacing: -.01em; }

/* ---------- estilos ---------- */
.generos { list-style: none; }
.generos li {
  font-family: var(--sans); font-size: clamp(2.4rem, 8.5vw, 8.5rem); line-height: .95; letter-spacing: -.04em;
  padding: .06em 0 .02em; border-bottom: 1px solid var(--linea); position: relative; transition: color .15s steps(2);
}
.generos li:hover { color: var(--rojo); }
.generos li::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font: 400 14px var(--mono); color: var(--dim); }
.bpm { margin-top: clamp(40px, 6vw, 72px); }
.bpm-escala { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); letter-spacing: .1em; }
.bpm-pista { position: relative; height: 34px; margin-top: 8px; border: 1px solid var(--fg);
  background: repeating-linear-gradient(90deg, var(--linea) 0 1px, transparent 1px calc(100% / 50)); }
.bpm-rango { position: absolute; top: 0; bottom: 0; left: 20%; width: 60%; background: var(--rojo); }
.bpm-pie { margin-top: 10px; font-size: 12px; letter-spacing: .15em; }

/* ---------- rider ---------- */
.rider-tabla > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) auto; gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.rider-tabla dt { font-size: 11px; letter-spacing: .2em; color: var(--dim); }
.rider-tabla dd { font-family: var(--sans); font-size: clamp(1.3rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; }
.estado { font-size: 10px; letter-spacing: .15em; border: 1px solid var(--dim); color: var(--dim); padding: 3px 7px; }
.estado.ok { border-color: var(--rojo); color: var(--rojo); }

/* ---------- escucha ---------- */
.fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: center; padding: clamp(14px, 2vw, 24px) 0; border-bottom: 1px solid var(--linea); position: relative; isolation: isolate; }
.fila::before { content: ""; position: absolute; inset: 0 calc(var(--gut) * -1); background: var(--rojo); transform: scaleY(0); transform-origin: bottom; transition: transform .25s cubic-bezier(.2,.8,.2,1); z-index: -1; }
.fila:hover::before, .fila:focus-visible::before { transform: scaleY(1); }
.fila:hover, .fila:focus-visible { color: var(--bg); outline: none; }
.fila-n { font-family: var(--sans); font-size: clamp(2.2rem, 7vw, 6.5rem); line-height: .95; letter-spacing: -.04em; }
.fila-d { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.fila:hover .fila-d { color: var(--bg); }
.fila-f { font-size: 14px; letter-spacing: .05em; }

/* ---------- lanzamientos ---------- */
.discos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: 28px; }
.disco { background: var(--bg); display: grid; grid-template-rows: auto 1fr; }
.disco-vista { aspect-ratio: 1; overflow: hidden; background: var(--bg2); }
.disco-vista img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); transition: filter .2s; }
.disco:hover .disco-vista img { filter: none; }
.disco-pie { display: grid; gap: 4px; padding: 12px 14px; border-top: 1px solid var(--linea); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.disco-pie b { font-weight: 700; }
.disco-pie small { color: var(--dim); font-size: 10px; }
.disco:hover .disco-pie { background: var(--rojo); color: var(--bg); }
.disco:hover .disco-pie small { color: var(--bg); }

/* ---------- prensa ---------- */
.descargas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: 28px; }
.pieza { background: var(--bg); display: grid; grid-template-rows: auto auto; }
.pieza-vista { aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; background: var(--bg2); }
.pieza-vista img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); transition: filter .2s; }
.logo-b img, .logo-n img { object-fit: contain; width: 70%; height: auto; }
.logo-n { background: #ecebe8; }
.logo-n img { filter: brightness(0) invert(.06); }
.pieza:hover .pieza-vista img { filter: none; }
.logo-n:hover img, .pieza:hover .logo-n img { filter: brightness(0) invert(.06); }
.grande { font-family: var(--sans); font-size: clamp(2.4rem, 5vw, 4.5rem); letter-spacing: -.04em; }
.pieza-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--linea); font-size: 11px; letter-spacing: .12em; }
.pieza-pie b { font-weight: 700; }
.pieza.armada .pieza-pie { background: var(--rojo); color: var(--bg); }
.pieza.armada .pieza-pie small { color: var(--bg); }

/* carpeta de recursos: cerrada de primeras */
.recursos { margin-top: 28px; border: 1px solid var(--linea); }
.carpeta { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 18px 20px; font-size: 13px; letter-spacing: .14em; user-select: none; }
.carpeta::-webkit-details-marker { display: none; }
.carpeta-signo::before { content: "[ + ]"; color: var(--rojo); }
.recursos[open] .carpeta-signo::before { content: "[ – ]"; }
.carpeta-nombre { font-family: var(--sans); font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -.02em; }
.carpeta-info { margin-left: auto; color: var(--dim); font-size: 10px; }
.carpeta:hover, .carpeta:focus-visible { background: var(--rojo); color: var(--bg); outline: none; }
.carpeta:hover .carpeta-signo::before, .carpeta:hover .carpeta-info { color: var(--bg); }
.recursos[open] .carpeta { border-bottom: 1px solid var(--linea); }
.recursos-nota { margin: 0; padding: 14px 20px; color: var(--dim); font-size: 12px; max-width: 70ch; }
.recursos .descargas { margin-top: 0; border-width: 1px 0 0; }
.pieza-pie small { color: var(--dim); font-size: 10px; }
.pieza:hover .pieza-pie { background: var(--rojo); color: var(--bg); }
.pieza:hover .pieza-pie small { color: var(--bg); }

/* ---------- booking ---------- */
.booking { background: var(--bg2); }
.booking-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.booking-t { font-family: var(--sans); text-transform: uppercase; font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: .92; letter-spacing: -.035em; margin: 18px 0 20px; }
.booking-nota { color: var(--dim); font-size: 13px; max-width: 34ch; }
.contacto { border-top: 1px solid var(--fg); }
.c-fila { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); transition: padding .2s, color .2s; }
.c-fila small { font-size: 10px; letter-spacing: .2em; color: var(--rojo); }
.c-fila span { font-size: clamp(15px, 1.4vw, 18px); letter-spacing: .02em; overflow-wrap: anywhere; }
.c-fila i { font-style: normal; font-size: 11px; color: var(--dim); }
.c-fila:hover { padding-left: 12px; }
.c-fila:hover span, .c-fila:hover i { color: var(--rojo); }

/* ---------- pie ---------- */
.pie { display: flex; align-items: center; gap: 24px; padding: 18px var(--gut); font-size: 11px; letter-spacing: .15em; color: var(--dim); }
.codigo { width: 120px; height: 22px; background: repeating-linear-gradient(90deg, var(--fg) 0 2px, transparent 2px 4px, var(--fg) 4px 5px, transparent 5px 9px, var(--fg) 9px 12px, transparent 12px 14px); opacity: .7; }
.pie-web { margin-left: auto; font-size: 10px; letter-spacing: .1em; text-transform: lowercase; opacity: .6; }
.pie-web:hover { color: var(--rojo); opacity: 1; }
.pie-web.pie-web-2 { margin-left: 0; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--rojo); outline-offset: -2px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hide-m { display: none !important; }
  .descargas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .hide-s { display: none !important; }
  .hero-datos { grid-template-columns: repeat(2, 1fr); }
  .bio-rejilla { grid-template-columns: 1fr; }
  .rider-tabla > div { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
  .rider-tabla dt { grid-column: 1 / -1; }
  .fila { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-d { display: none; }
  .booking-rejilla { grid-template-columns: 1fr; }
  .c-fila { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .generos li::after { display: none; }
}
@media (max-width: 460px) {
  .descargas { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .discos { grid-template-columns: 1fr; }
  .disco { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: none; }
  .disco-pie { border-top: 0; border-left: 1px solid var(--linea); align-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* una fila, dos perfiles: Denso manda, Densonido acompaña */
.fila-doble::before { display: none; }
.fila-doble:hover { color: inherit; }
.fila-doble > .botones { grid-column: 2 / -1; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.boton { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 12px 18px; border: 1px solid var(--linea); white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.boton-1 { background: var(--rojo); border-color: var(--rojo); color: var(--bg); font-weight: 700; }
.boton-1:hover, .boton-1:focus-visible { background: var(--fg, #ecebe8); border-color: var(--fg, #ecebe8); outline: none; }
.boton-2 { color: var(--dim); }
.boton-2:hover, .boton-2:focus-visible { color: var(--fg, #ecebe8); border-color: var(--fg, #ecebe8); outline: none; }
@media (max-width: 700px) { .fila-doble { grid-template-columns: 1fr; gap: 14px; } .fila-doble > .botones { justify-content: flex-start; } }

/* recursos agrupados */
.grupo { margin: 0; padding: 14px 20px 10px; font-size: 11px; letter-spacing: .18em; color: var(--rojo); border-top: 1px solid var(--linea); }
.recursos .descargas + .grupo { margin-top: 0; }
.logo-x { background: #050505; }
.logo-x img, .logo-x video { width: 100%; height: 100%; object-fit: contain; filter: none; }
.logo-b img[src*="press/"] { object-fit: contain; width: 80%; height: 80%; }
.logo-n img[src*="press/"] { object-fit: contain; width: 70%; height: 80%; filter: none; }
.recursos-drive { margin: 0; padding: 16px 20px; border-top: 1px solid var(--linea); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.recursos-drive a:hover { color: var(--rojo); }

/* ---------- densessions (reproductor propio sobre el widget de SoundCloud) ---------- */
.ses { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--linea); background: var(--bg2); margin: 8px 0 24px; }
.ses-player { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--linea); }
.ses-play { width: clamp(72px, 9vw, 104px); aspect-ratio: 1; border: 0; border-right: 1px solid var(--linea); background: var(--rojo); color: var(--bg); cursor: pointer; display: grid; place-items: center; }
.ses-play:disabled { background: var(--linea); color: var(--dim); cursor: default; }
.ses-play svg { width: 34%; height: 34%; }
.ses-play .i-pause, .ses.sonando .ses-play .i-play { display: none; }
.ses.sonando .ses-play .i-pause { display: block; }
.ses-play:not(:disabled):hover { background: var(--fg); }
.ses-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 6px 16px; padding: 14px clamp(14px, 2vw, 24px); align-content: center; }
.ses-etq { grid-column: 1 / -1; }
.ses-titulo { font-family: var(--sans); font-size: clamp(18px, 2.6vw, 30px); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-tiempo { grid-row: 2; grid-column: 2; align-self: end; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ses-barra { grid-column: 1 / -1; height: 14px; position: relative; cursor: pointer; background: repeating-linear-gradient(90deg, var(--linea) 0 2px, transparent 2px 6px); }
.ses-barra:focus-visible { outline: 1px solid var(--rojo); outline-offset: 2px; }
.ses-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--rojo); }
.ses-lista { list-style: none; }
.ses-lista li { border-bottom: 1px solid var(--linea); }
.ses-lista button { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px clamp(14px, 2vw, 24px); border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; position: relative; isolation: isolate; }
.ses-lista button::before { content: ""; position: absolute; inset: 0; background: var(--rojo); transform: scaleY(0); transform-origin: bottom; transition: transform .2s cubic-bezier(.2,.8,.2,1); z-index: -1; }
.ses-lista button:hover::before, .ses-lista button:focus-visible::before { transform: scaleY(1); }
.ses-lista button:hover, .ses-lista button:focus-visible { color: var(--bg); outline: none; }
.ses-lista .marca { width: 8px; height: 8px; border: 1px solid currentColor; }
.ses-lista .actual .marca { background: var(--rojo); border-color: var(--rojo); }
.ses-lista .actual button:hover .marca { background: var(--bg); border-color: var(--bg); }
.ses-lista .t { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-lista .d { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ses-lista button:hover .d { color: inherit; }
.ses-sc { display: block; padding: 12px clamp(14px, 2vw, 24px); font-size: 11px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; }
.ses-sc:hover { color: var(--rojo); }

/* ---------- sesión en directo (YouTube encuadrado) ---------- */
.vid { border: 1px solid var(--linea); background: var(--bg2); margin: 0 0 24px; }
.vid-marco { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #050404; cursor: pointer; }
/* zoom de 1/0,88 anclado arriba a la izquierda: fuera queda el logo grabado en la esquina
   derecha del vídeo; dentro, el iframe es 120 px más alto que el marco y sube 60, así las franjas
   de YouTube de arriba (título) y de abajo (barra, logo, sugerencias) quedan fuera de vista */
.vid-zoom { position: absolute; inset: 0; transform: scale(1.1364); transform-origin: 0 0; }
.vid-player, .vid-player iframe { position: absolute; left: 0; top: -60px; width: 100%; height: calc(100% + 120px); border: 0; pointer-events: none; }
.vid-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.vid.activo .vid-poster { opacity: 0; pointer-events: none; }
.vid-gran { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border: 0; background: var(--rojo); color: var(--bg); cursor: pointer; display: grid; place-items: center; }
.vid-gran svg { width: 36%; height: 36%; }
.vid-gran:hover { background: var(--fg); }
.vid.activo .vid-gran { display: none; }
.vid-etq { position: absolute; left: 12px; top: 10px; background: var(--bg); padding: 4px 8px; }
.vid.activo .vid-etq { display: none; }
.vid-ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; border-top: 1px solid var(--linea); }
.vid-play, .vid-full { width: 48px; height: 44px; border: 0; background: none; color: var(--fg); cursor: pointer; display: grid; place-items: center; }
.vid-play { border-right: 1px solid var(--linea); }
.vid-full { border-left: 1px solid var(--linea); }
.vid-play svg, .vid-full svg { width: 16px; height: 16px; }
.vid-play:hover, .vid-full:hover { color: var(--rojo); }
.vid-play .i-pause, .vid.sonando .vid-play .i-play { display: none; }
.vid.sonando .vid-play .i-pause { display: block; }
.vid-barra { margin: 0 14px; height: 12px; position: relative; cursor: pointer; background: repeating-linear-gradient(90deg, var(--linea) 0 2px, transparent 2px 6px); }
.vid-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--rojo); }
.vid-tiempo { font-size: 12px; color: var(--dim); padding: 0 14px; font-variant-numeric: tabular-nums; }
.vid:fullscreen { display: flex; flex-direction: column; justify-content: center; background: #050404; }
.vid:fullscreen .vid-marco { width: min(100vw, calc((100vh - 46px) * 16 / 9)); margin: 0 auto; }


/* ---------- plataformas plegadas (YouTube) ---------- */
.plat { border-bottom: 1px solid var(--linea); }
.plat-fila { list-style: none; cursor: pointer; border-bottom: 0; }
.plat-fila::-webkit-details-marker { display: none; }
.plat-signo::before { content: "[ + ]"; }
.plat[open] .plat-signo::before { content: "[ – ]"; }
.plat-cuerpo { padding: 4px 0 28px; display: grid; gap: 12px; }
.plat-cuerpo .grupo { margin: 10px 0 0; }
.plat-video { position: relative; aspect-ratio: 16 / 9; background: var(--bg2); border: 1px solid var(--linea); }
.plat-video iframe, .plat-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
.plat-sesion { position: relative; display: block; border: 1px solid var(--linea); background: var(--bg2); }
.plat-sesion img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(.25) contrast(1.05); transition: filter .25s; }
.plat-play { position: absolute; left: 50%; top: calc(50% - 22px); translate: -50% -50%; width: clamp(56px, 8vw, 84px); aspect-ratio: 1; background: var(--rojo); color: var(--bg); display: grid; place-items: center; }
.plat-play svg { width: 36%; height: 36%; }
.plat-pie { display: flex; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--linea); font-size: 11px; letter-spacing: .14em; }
.plat-sesion:hover .plat-pie { background: var(--rojo); color: var(--bg); }
.plat-sesion:hover img { filter: none; }


/* ---------- barra inferior de las Densessions ---------- */
.ses-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch;
  background: var(--bg); border-top: 1px solid var(--rojo); transform: translateY(105%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.ses-dock.visible { transform: none; }
.dock-play, .dock-cerrar { width: 56px; border: 0; background: var(--rojo); color: var(--bg); cursor: pointer; display: grid; place-items: center; }
.dock-cerrar { background: none; color: var(--dim); border-left: 1px solid var(--linea); }
.dock-cerrar:hover { color: var(--rojo); }
.dock-play:hover { background: var(--fg); }
.dock-play svg { width: 16px; height: 16px; }
.dock-cerrar svg { width: 14px; height: 14px; }
.dock-play .i-pause, .ses-dock.sonando .dock-play .i-play { display: none; }
.ses-dock.sonando .dock-play .i-pause { display: block; }
.dock-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 16px 9px; }
.dock-t { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-t::before { content: "DENSESSIONS · "; color: var(--rojo); }
.dock-time { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.dock-barra { grid-column: 1 / -1; height: 6px; position: relative; cursor: pointer; background: var(--linea); }
.dock-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--rojo); }
body.con-dock { padding-bottom: 64px; }
@media (max-width: 600px) { .dock-t::before { content: none; } .dock-info { padding: 9px 12px 8px; } }


/* live set híbrido, aparte de las Densessions */
.ses-live { border-top: 1px solid var(--rojo); }
.ses-live-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 14px clamp(14px, 2vw, 24px) 10px; }
.ses-live-desc { font-size: 12px; color: var(--dim); letter-spacing: .04em; }
.ses-live .ses-lista li:last-child { border-bottom: 1px solid var(--linea); }


/* CAOS /// CONTROL en una sola línea: el cuerpo se calcula para que la frase entera quepa
   en el ancho de la columna a cualquier tamaño de pantalla */
.bio .gigante-linea { display: block; font-size: min(13rem, calc((100vw - 2 * var(--gut)) / 9.95)); }
.bio .gigante-linea .gig-pre { display: block; font-size: max(.2em, 15px); letter-spacing: .02em; line-height: 1; margin-bottom: .25em; color: var(--dim); }
.bio .gigante-linea .gig-linea { display: flex; flex-wrap: nowrap; white-space: nowrap; column-gap: .12em; }

/* la foto de la bio llena su columna aunque el texto crezca (en móvil sigue cuadrada) */
@media (min-width: 761px) { .bio-foto img { aspect-ratio: auto; height: 100%; min-height: 100%; } }
/* la barra inferior, del todo fuera mientras no suena nada */
.ses-dock:not(.visible) { visibility: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; }

/* Cursor de píxel duro, guiño a Diablo en clave brutalista (13 oct 2026): flecha 16×16 en blanco fósforo
   con contorno negro y gema cuadrada roja; sobre lo que se pulsa se invierte a rojo. Solo con ratón. */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: url("img/cursor.svg") 1 1, auto; }
  a, button, summary, label, select, [role="button"], [data-confirma],
  .carpeta, .ses-barra, .vid-marco, .vid-barra, .plat-fila, .dock-barra, .lang { cursor: url("img/cursor-activo.svg") 1 1, pointer !important; }
  button:disabled { cursor: url("img/cursor.svg") 1 1, default !important; }
  input:not([type=checkbox]):not([type=radio]), textarea { cursor: text; }
}