/* DENSO — página de enlaces. Mismo sistema que el presskit, en una columna para el móvil. */
: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;
}
* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 400 14px/1.45 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
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%; }
::selection { background: var(--rojo); color: var(--bg); }

.hoja { width: min(100%, 560px); margin: 0 auto; min-height: 100svh; border-inline: 1px solid var(--linea); background: var(--bg); }

.cabeza { position: relative; min-height: 340px; display: grid; align-items: end; overflow: hidden; }
.cabeza-foto, .cabeza-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.cabeza-foto img { filter: contrast(1.15) saturate(1.1); }
.cabeza-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,.15), rgba(11,10,10,.9));
}
.cabeza-txt { position: relative; display: grid; justify-items: center; gap: 14px; padding: 40px 16px 26px; text-align: center; }
.cabeza h1 { width: min(82%, 380px); }
.logo { width: 100%; height: auto; }
.marca { font-size: 10px; letter-spacing: .25em; opacity: .8; }
.sub { font-size: 9.5px; line-height: 1.7; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); opacity: .78; }
/* Madrid, Spain en su propia línea, con más presencia que los estilos (13 oct 2026: antes «Madrid» quedaba suelto al final, como una viuda). */
.lugar { margin: -4px 0 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--rojo); white-space: nowrap; }

.cinta { height: 14px; background: repeating-linear-gradient(-45deg, var(--rojo) 0 12px, var(--bg) 12px 24px); border-block: 1px solid var(--linea); }

section { padding: 28px 16px 8px; }
.etq { font-size: 11px; font-weight: 400; letter-spacing: .2em; color: var(--rojo); padding-bottom: 10px; border-bottom: 1px solid var(--fg); }

.fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n f" "d f"; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linea); transition: padding .2s; }
.fila span { grid-area: n; font-family: var(--sans); font-size: 19px; letter-spacing: -.01em; text-transform: uppercase; }
.fila small { grid-area: d; font-size: 11px; letter-spacing: .06em; color: var(--dim); }
.fila i { grid-area: f; align-self: center; font-style: normal; font-size: 11px; color: var(--dim); }
.fila:hover, .disco:hover { padding-left: 10px; }
.fila:hover span, .fila:hover i, .disco:hover .disco-t { color: var(--rojo); }
.fila-roja { background: var(--rojo); color: var(--bg); padding-inline: 12px; margin-top: 12px; border-bottom: 0; }
.fila-roja small, .fila-roja i { color: var(--bg); }
.fila-roja:hover { padding-left: 22px; }
.fila-roja:hover span, .fila-roja:hover i { color: var(--bg); }

.disco { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "c t" "c d"; column-gap: 14px; align-content: center; padding: 10px 0; border-bottom: 1px solid var(--linea); transition: padding .2s; }
.disco img { grid-area: c; width: 64px; height: 64px; object-fit: cover; filter: grayscale(.25) contrast(1.05); }
.disco-t { grid-area: t; align-self: end; font-family: var(--sans); font-size: 16px; letter-spacing: -.01em; text-transform: uppercase; }
.disco small { grid-area: d; align-self: start; font-size: 11px; color: var(--dim); }

.pie { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 16px; border-top: 1px solid var(--linea); font-size: 10px; letter-spacing: .15em; color: var(--dim); }
.codigo { width: 90px; height: 18px; 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; }

a:focus-visible { outline: 2px solid var(--rojo); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* una fila, dos perfiles: Denso manda, Densonido acompaña */
.fila-doble { grid-template-areas: "n f"; align-items: center; }
.fila-doble:hover { padding-left: 0; }
.fila-doble:hover > span:first-child { color: inherit; }
.fila-doble > .botones { grid-area: f; display: flex; gap: 8px; }
.fila-doble > span:first-child { grid-area: n; }
.boton { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 9px 12px; 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 { background: var(--fg); border-color: var(--fg); }
.boton-2 { color: var(--dim); }
.boton-2:hover { color: var(--fg); border-color: var(--fg); }
@media (max-width: 480px) {
  .fila-doble { grid-template-columns: 1fr; grid-template-areas: "n" "f"; row-gap: 12px; }
  .fila-doble > .botones { justify-content: flex-start; }
  .fila-doble .boton { flex: 1 1 0; text-align: center; }
}

/* 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; }
}