/* 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; }
.bar-id sup { font-size: 9px; margin-left: 2px; color: var(--rojo); }
.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; }

/* ---------- 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-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-t { margin: 20px 0 clamp(32px, 5vw, 64px); }
.contacto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.c-cel { background: var(--bg); padding: clamp(18px, 2.6vw, 32px) var(--gut); display: grid; gap: 6px; min-width: 0; }
.c-cel small { font-size: 10px; letter-spacing: .2em; color: var(--rojo); }
.c-cel span { font-family: var(--sans); font-size: clamp(1.05rem, 2.3vw, 2rem); letter-spacing: -.02em; overflow-wrap: anywhere; }
.c-cel:hover { background: var(--rojo); color: var(--bg); }
.c-cel:hover small { color: var(--bg); }

/* ---------- 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 span:last-child { margin-left: auto; }

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; }
  .contacto { grid-template-columns: 1fr; }
  .generos li::after { display: none; }
}
@media (max-width: 460px) {
  .descargas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}