/* ============================== TOKENS ============================== */
  :root {
    --carbon-950: #080808;
    --carbon-900: #0b0b0b;
    --carbon-800: #171717;
    --carbon-700: #242424;
    --paper-100: #f6f0e5;
    --paper-200: #f1e9da;
    --paper-300: #dfd4c2;
    --paper-400: #b9ab96;
    --red-400: #ff3b3b; /* 5.4:1 sobre carbon: unico rojo valido en pequeno */
    --red-500: #d52831;
    --red-600: #b91f27;
    --red-700: #8f171e;
    --tan-300: #e6d5a5; /* crema calido del titular del dossier */
    --albero-400: #d7a51d;
    --albero-500: #c79a21;
    --albero-700: #8b6913;
    --atlantic-500: #27778a;
    --atlantic-700: #1e3f4d;
    --atlantic-900: #162a31;

    /* Titulares: Impact por indicacion del cliente. No es webfont y no
     existe en Linux -> Anton (Google) es el clon mas cercano. */
    --font-display:
      Impact, "Haettenschweiler", "Arial Narrow Bold", Anton, sans-serif;
    /* serif de titulares: es lo que da el aire editorial del dossier */
    --font-serif: "Playfair Display", Georgia, serif;
    /* condensada urbana para los titulos de cancion (alternativa: Oswald) */
    --font-cond: "Big Shoulders Display", Oswald, "Arial Narrow", sans-serif;
    --font-marker: "Permanent Marker", cursive;
    /* manuscrita legible para textos largos (las letras) */
    --font-hand: Kalam, "Reenie Beanie", Caveat, cursive;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --font-body: Archivo, system-ui, sans-serif;
    /* tracking 15 = 15/1000 em (unidad de Photoshop/InDesign): en em escala
     con el cuerpo, 20px fijos abrian demasiado los titulares grandes */
  --title-tracking: 0.015em;

    --fs-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
    --fs-sm: clamp(0.84rem, 0.8rem + 0.25vw, 0.95rem);
    --fs-md: clamp(1rem, 0.96rem + 0.3vw, 1.125rem);
    --fs-lg: clamp(1.22rem, 1.05rem + 0.9vw, 1.65rem);
    --fs-xl: clamp(1.7rem, 1.2rem + 2.4vw, 3rem);
    --fs-2xl: clamp(2.6rem, 1.4rem + 6vw, 6rem);
    --fs-3xl: clamp(4.5rem, 2rem + 12vw, 12rem);

    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;
    --s8: 4rem;
    --s9: 6rem;
    --pad-x: clamp(16px, 3.4vw, 48px);
    --maxw: 1440px;

    --torn: url(#torn);
    --sheen-hi: 0.22;
    --sheen-lo: 0.1;
    --blend-light: screen;
    --paper-bg: var(--paper-200);
  }

  /* ============================ TEXTURAS ==============================
   Numeros de la tabla calibrada. No tocar sin re-medir: el tono medio
   del papel crema debe quedar en ~227/255 con desviacion 3-4. */
  :root {
    --tex-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.35' intercept='0.26'/%3E%3CfeFuncG type='linear' slope='1.35' intercept='0.26'/%3E%3CfeFuncB type='linear' slope='1.35' intercept='0.26'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23f)' opacity='0.255'/%3E%3C/svg%3E");
    --tex-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-0.55'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-0.55'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-0.55'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23f)' opacity='0.166'/%3E%3C/svg%3E");
    --tex-laid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16 0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.15' intercept='0.6'/%3E%3CfeFuncG type='linear' slope='1.15' intercept='0.6'/%3E%3CfeFuncB type='linear' slope='1.15' intercept='0.6'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23f)' opacity='0.55'/%3E%3C/svg%3E");
    --tex-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.5' intercept='0.52'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.52'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.52'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E");
    --tex-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.45' intercept='-0.42'/%3E%3CfeFuncG type='linear' slope='1.45' intercept='-0.42'/%3E%3CfeFuncB type='linear' slope='1.45' intercept='-0.42'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)'/%3E%3C/svg%3E");
    /* Subrayado de boli: doble pasada, sin filtros. */
    --ink-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23b91f27' stroke-linecap='round'%3E%3Cpath d='M6 12 C 52 7, 104 15, 158 10 S 252 6, 294 11' stroke-width='4.6'/%3E%3Cpath d='M14 17 C 84 13, 176 18, 286 13' stroke-width='3.4' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E");
    --ink-strike-wide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 20' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23b91f27' stroke-linecap='round'%3E%3Cpath d='M8 12 C 200 8, 420 14, 660 10 S 1000 7, 1192 11' stroke-width='2.2'/%3E%3Cpath d='M40 15 C 300 12, 700 16, 1160 12' stroke-width='1.5' opacity='0.75'/%3E%3C/g%3E%3C/svg%3E");
  --ink-strike: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23b91f27' stroke-linecap='round'%3E%3Cpath d='M6 24 C 74 15, 152 30, 294 16' stroke-width='5'/%3E%3Cpath d='M288 11 C 206 26, 108 12, 10 27' stroke-width='4' opacity='0.85'/%3E%3C/g%3E%3C/svg%3E");
  }

  /* ============================== BASE ================================ */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    overflow-x: clip;
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    /* las piezas rotadas y sus ::before (inset -9px) sobresalen a proposito;
       clip aqui evita que eso crezca el scrollWidth */
    overflow-x: clip;
    background: var(--carbon-900);
    color: var(--paper-100);
    font: 400 var(--fs-md) / 1.62 var(--font-body);
    -webkit-font-smoothing: antialiased;
  }
  /* Lienzo: grano fino + veladura a opacity .075. Negro medido ~17/255. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* solo grano fino y parejo: la veladura (--tex-mottle) hacia manchas
       claras que se leian como un degradado */
    background-image: var(--tex-fine);
    background-blend-mode: screen;
    opacity: 0.055;
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* sin degradados ni vineta: el fondo es un unico negro plano */
    background: none;
  }
  body > * {
    position: relative;
    z-index: 1;
  }
  img {
    max-width: 100%;
    display: block;
  }
  h1,
  h2,
  h3,
  h4 {
    margin: 0;
  }
  p {
    margin: 0 0 var(--s4);
  }
  a {
    color: inherit;
  }
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  section {
    padding: var(--s9) 0;
    scroll-margin-top: 92px;
  }

  .skip {
    position: absolute;
    left: var(--s4);
    top: -100px;
    z-index: 60;
    background: var(--paper-100);
    color: var(--carbon-900);
    padding: var(--s2) var(--s4);
    font: 600 var(--fs-sm) var(--font-mono);
    transition: top 0.15s;
  }
  .skip:focus {
    top: var(--s4);
  }

  :where(a, button, input, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--red-500);
    outline-offset: 3px;
  }
  .on-paper :where(a, button, input):focus-visible {
    outline-color: var(--red-700);
  }

  /* ============================ TIPOGRAFIA ============================ */
  .display {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--title-tracking);
    /* 0.86 solapa las lineas: Impact/Anton llenan casi toda la caja em */
    line-height: 1;
    /* Impact/Anton no tienen sintesis de negrita: nada de font-weight:900. */
  }
  .marker {
    font-family: var(--font-marker);
    font-weight: 400;
    letter-spacing: 0.01em;
  }
  .mono {
    font-family: var(--font-mono);
  }
  /* Sobre papel las etiquetas parecen escritas por el, no mecanografiadas.
     Permanent Marker necesita mas cuerpo y nada de versalitas para leerse. */
  .on-paper .kicker,
  .note figcaption,
  .hand {
    font-family: var(--font-marker);
    font-weight: 400;
    font-size: var(--fs-sm);
    text-transform: none;
    letter-spacing: 0.01em;
  }
  .kicker {
    font: 600 var(--fs-xs) / 1.3 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
  }
  .u-red {
    background: var(--ink-underline) no-repeat 0 100%;
    background-size: 100% 0.34em;
    padding-bottom: 0.18em;
  }
  /* El subrayado es un background del inline: en un titular de varias
     lineas se pinta sobre todas y parece un tachado. Para titulares,
     .u-under dibuja UN trazo debajo del bloque entero. */
  .u-under {
    /* en inline con varias lineas el ::after se ancla al primer fragmento y
       el trazo acababa sobre la fecha: como bloque queda dentro del titular */
    display: block;
    position: relative;
    padding-bottom: 0.42em;
  }
  .sec-title .u-under {
    display: inline-block;
    padding-bottom: 0.3em;
  }
  .sec-title .u-under::after {
    width: 100%;
    height: 0.34em;
  }
  .u-under::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(100%, 22ch);
    height: 0.3em;
    background: var(--ink-underline) no-repeat 0 100% / 100% 100%;
  }
  .t-red {
    color: var(--red-500);
  }
  /* red-x sobre carbon es 3.1-3.9:1 -> prohibido como texto pequeno.
     En oscuro el acento pequeno es albero-400 (7.4:1). */
  .kicker.t-red {
    color: var(--red-400);
  }
  /* Etiqueta de seccion del dossier: rojo, versalitas, filete rojo debajo */
  /* Paginas de letra: titulo en Impact, grande y a caja alta */
  .song-title {
    font-family: var(--font-cond);
    font-weight: 700;
    /* tal cual esta escrito: mayuscula inicial y el resto en minuscula */
    text-transform: none;
    letter-spacing: 0.005em;
    font-size: clamp(2.3rem, 1.6rem + 2.8vw, 4.2rem);
    line-height: 0.94;
    color: var(--tan-300);
    margin-bottom: var(--s5);
  }
  /* La columna del titulo acompana a la letra al hacer scroll (sin cambiar
     el estilo: sigue siendo la columna de siempre, solo que fija). */
  .song-col {
    position: sticky;
    top: 73px;
    align-self: start;
  }
  @media (max-width: 940px) {
    .song-col {
      position: static;
    }
  }

  /* titulo y EP en la misma linea, alineados por la base */
  .song-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2) var(--s4);
    margin-bottom: var(--s5);
  }
  .song-head .song-title {
    margin-bottom: 0;
  }
  .song-ep {
    font: 600 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--red-400);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .song-ep:hover {
    border-bottom-color: currentColor;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  /* Titulo de seccion: cuadro rojo con el nombre y nada mas */
  .sec-label {
    display: inline-block;
    /* el sangrado del cuadro se compensa con margen negativo: asi las letras
       quedan a plomo con el contenido de la seccion */
    /* nunca mas alla del margen de la pagina: en movil pad-x es 16px */
    margin: 0 0 var(--s8) max(-0.9em, calc(-1 * var(--pad-x) + 1px));
    padding: 0.42em 0.9em;
    background: var(--red-700);
    color: var(--paper-100);
    font: 600 var(--fs-lg) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  /* etiqueta de formato (EP) junto al titulo del lanzamiento */
  /* el mismo cuadro, pero cuando cae sobre papel */
  /* dentro de un papel no puede asomar por el borde */
  .sec-label--paper {
    margin: 0 0 var(--s4);
  }
  /* .sec-label se declara despues que .sr-only y le devolvia el padding */
  .sec-label.sr-only {
    padding: 0;
    margin: -1px;
  }
  .serif small {
    font: 500 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--red-400);
    vertical-align: middle;
  }
  .serif {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.01em;
  }
  .sec-title {
    font-size: var(--fs-xl);
    margin-bottom: var(--s6);
  }
  .on-paper .t-red {
    color: var(--red-700);
  } /* 7.5:1 sobre papel */
  .big-red {
    color: var(--red-600);
  } /* 5.3:1 sobre papel, >=24px */

  /* ============================== PIEZA ===============================
   El elemento lleva el contenido; dos pseudoelementos hacen el papel.
   La cuadricula y el pautado van en .ruling, FUERA del filtro. */
  .piece {
    position: relative;
    isolation: isolate;
    color: var(--carbon-900);
    padding: var(--s6);
    transform: rotate(-0.7deg);
  }
  .piece::before,
  .piece::after {
    content: "";
    position: absolute;
    inset: -9px;
    z-index: -1;
  }
  .piece::before {
    /* papel fino: sombra corta y mate, sin halo blanco ni volumen de carton */
    filter: var(--torn) drop-shadow(0 1px 0.7px rgba(24, 19, 15, 0.22))
      drop-shadow(2px 4px 4px rgba(24, 19, 15, 0.16));
    background-color: var(--paper-bg);
    background-image:
      var(--tex-dark), var(--tex-light), var(--tex-laid),
      radial-gradient(60% 42% at 12% 88%, rgba(72, 68, 60, 0.06), transparent 70%),
      radial-gradient(46% 34% at 88% 14%, rgba(72, 68, 60, 0.05), transparent 70%),
      linear-gradient(
        152deg,
        rgba(255, 255, 255, var(--sheen-hi)) 0%,
        transparent 34%,
        rgba(0, 0, 0, 0.04) 68%,
        rgba(0, 0, 0, var(--sheen-lo)) 100%
      ),
      var(--tex-mottle);
    background-blend-mode:
      multiply, var(--blend-light), soft-light, normal, normal, soft-light,
      multiply;
  }
  .piece::after {
    filter: var(--torn);
    box-shadow:
      inset 0 0 0 0.6px rgba(96, 68, 38, 0.16),
      inset 0 0 7px rgba(96, 68, 38, 0.07);
  }
  .edge-b {
    --torn: url(#torn-b);
  }
  .edge-c {
    --torn: url(#torn-c);
  }
  .tilt-a {
    transform: rotate(1.4deg);
  }
  .tilt-b {
    transform: rotate(-1.9deg);
  }
  .tilt-c {
    transform: rotate(1.7deg);
  }
  .tilt-0 {
    transform: none;
  }

  .piece--copy {
    --paper-bg: #ded4c3;
    /* que la trama de fotocopia se deforme con el desgarro esta bien */
  }
  .piece--copy::before {
    background-image:
      radial-gradient(rgba(11, 11, 11, 0.15) 1px, transparent 1.25px),
      var(--tex-dark), var(--tex-light), var(--tex-laid),
      radial-gradient(
        60% 42% at 12% 88%,
        rgba(120, 84, 42, 0.09),
        transparent 70%
      ),
      radial-gradient(
        46% 34% at 88% 14%,
        rgba(120, 84, 42, 0.07),
        transparent 70%
      ),
      linear-gradient(
        152deg,
        rgba(255, 255, 255, var(--sheen-hi)) 0%,
        transparent 34%,
        rgba(0, 0, 0, 0.04) 68%,
        rgba(0, 0, 0, var(--sheen-lo)) 100%
      ),
      var(--tex-mottle);
    background-size:
      4px 4px,
      auto,
      auto,
      auto,
      auto,
      auto,
      auto,
      auto;
    background-blend-mode:
      multiply, multiply, var(--blend-light), soft-light, normal, normal,
      soft-light, multiply;
  }
  /* Libreta: casi sin grano, y veta neutra (gris medio = neutro en soft-light) */
  .piece--grid,
  .piece--lined {
    --paper-bg: #f3ecdc;
    --tex-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.35' intercept='0.26'/%3E%3CfeFuncG type='linear' slope='1.35' intercept='0.26'/%3E%3CfeFuncB type='linear' slope='1.35' intercept='0.26'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23f)' opacity='0.04'/%3E%3C/svg%3E");
    --tex-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-0.55'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-0.55'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-0.55'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23f)' opacity='0.028'/%3E%3C/svg%3E");
    --tex-laid: linear-gradient(#808080, #808080);
  }
  .piece--lined {
    --paper-bg: #f4eddd;
    padding-left: calc(var(--s6) + 34px);
  }
  /* Variante limpia: papel liso, canto recto y sin grano ni trama. Para los
     textos cortos que tienen que leerse de un golpe. */
  .piece--clean {
    --torn: none;
    --paper-bg: var(--paper-100);
  }
  .piece--clean::before {
    background-image: linear-gradient(
      152deg,
      rgba(255, 255, 255, 0.18) 0%,
      transparent 45%,
      rgba(0, 0, 0, 0.03) 100%
    );
    background-blend-mode: soft-light;
  }
  .piece--clean::after {
    box-shadow: inset 0 0 0 1px rgba(96, 68, 38, 0.22);
  }
  /* Cinta antigua: tira de cinta de papel amarilleada, translucida, con la
     fibra marcada y los cantos oscurecidos. Bordes casi rectos (torn-thin). */
  .piece--tape {
    --torn: url(#torn-thin);
    --paper-bg: #c9b382; /* ocre de cinta amarilleada, no crema */
    --sheen-hi: 0.06;
    --sheen-lo: 0.26;
  }
  .piece--tape::before {
    background-image:
      repeating-linear-gradient(
        92deg,
        rgba(255, 255, 255, 0.06) 0 2px,
        rgba(90, 70, 40, 0.05) 2px 4px
      ),
      linear-gradient(
        180deg,
        rgba(60, 45, 20, 0.14) 0,
        transparent 9%,
        transparent 91%,
        rgba(60, 45, 20, 0.16) 100%
      ),
      radial-gradient(120% 60% at 20% 30%, rgba(120, 92, 44, 0.18), transparent 72%),
      var(--tex-laid);
    background-blend-mode: overlay, multiply, multiply, soft-light;
    opacity: 0.97;
  }
  .piece--tape::after {
    box-shadow:
      inset 0 0 0 1px rgba(80, 56, 26, 0.3),
      inset 0 0 30px rgba(80, 56, 26, 0.3);
  }
  /* la cinta pega sobre el fondo: multiplica en lugar de tapar */
  .piece--tape::before {
    mix-blend-mode: multiply;
  }
  .piece--kraft {
    --paper-bg: #c9b795;
    --sheen-hi: 0.4;
  }
  .piece--dark,
  .piece--red {
    color: var(--paper-100);
    --blend-light: overlay;
    --sheen-hi: 0.14;
    --sheen-lo: 0.3; /* impreso oscuro no brilla */
  }
  .piece--dark {
    --paper-bg: var(--carbon-800);
  }
  .piece--red {
    --paper-bg: var(--red-600);
  }

  /* Pautas rectas: hijo sin filtrar. */
  .ruling {
    position: absolute;
    inset: 4px;
    z-index: -1;
    pointer-events: none;
  }
  .piece--grid > .ruling {
    background-image:
      linear-gradient(rgba(64, 96, 128, 0.18) 1px, transparent 1px),
      linear-gradient(90deg, rgba(64, 96, 128, 0.18) 1px, transparent 1px);
    background-size: 22px 22px;
  }
  .piece--lined > .ruling {
    background-image:
      linear-gradient(rgba(52, 86, 124, 0.15) 1px, transparent 1px),
      linear-gradient(
        90deg,
        transparent 42px,
        rgba(185, 31, 39, 0.38) 42px,
        rgba(185, 31, 39, 0.38) 44px,
        transparent 44px
      );
    background-size:
      100% 27px,
      100% 100%;
  }

  /* Sujeciones */
  .tape {
    position: absolute;
    width: 118px;
    height: 30px;
    background: linear-gradient(
      100deg,
      rgba(226, 210, 178, 0.86),
      rgba(206, 188, 152, 0.7) 48%,
      rgba(230, 216, 186, 0.84)
    );
    mix-blend-mode: multiply;
    filter: url(#torn-thin);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  }
  .tape--tl {
    top: -14px;
    left: -22px;
    transform: rotate(-34deg);
  }
  .tape--tr {
    top: -16px;
    right: -24px;
    transform: rotate(34deg);
  }
  .tape--top {
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
  }
  /* Marcas de boli sobre elementos */
  .mark {
    position: absolute;
    pointer-events: none;
    color: var(--red-600);
  }
  .mark--circle {
    width: 180px;
    height: 100px;
  }
  .mark--slash {
    width: 120px;
    height: 170px;
  }

  /* ============================== PLATE ===============================
   Contenedor de imagen con trama de fotocopia. Al llegar las fotos
   reales entra un <img> aqui dentro sin tocar el CSS. */
  .plate {
    position: relative;
    overflow: hidden;
    background: var(--carbon-800);
    /* en color por defecto; el B/N es opcional con .plate--bw */
    filter: contrast(1.12) saturate(0.94);
  }
  .plate--bw {
    filter: grayscale(1) contrast(1.28);
  }
  .plate > img {
    width: 100%;
    height: auto; /* height:100% sin caja de referencia deformaba la portada */
    display: block;
  }
  .plate::after {
    content: "";
    position: absolute;
    inset: 0;
    /* sin trama en las fotos pequenas; solo la grande del hero la lleva */
    background-image: radial-gradient(#000 1.1px, transparent 1.4px);
    background-size: 4.2px 4.2px;
    opacity: 0;
  }
  .plate--paper::after {
    opacity: 0;
  }
  .plate__ph {
    aspect-ratio: 4/5;
    display: grid;
    place-content: center;
    gap: var(--s2);
    background: linear-gradient(155deg, #3a3a3a, #101010 60%, #262626);
    color: var(--paper-400);
    text-align: center;
    padding: var(--s4);
    font: 500 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .frame {
    padding: 12px;
    background: var(--paper-100);
    box-shadow:
      0 2px 3px rgba(0, 0, 0, 0.45),
      8px 12px 20px rgba(0, 0, 0, 0.4);
  }

  /* ============================= BOTONES ============================== */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    border: 2px solid currentColor;
    background: transparent;
    padding: 0.82em 1.5em;
    cursor: pointer;
    text-decoration: none;
    font: 600 var(--fs-sm) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition:
      transform 0.12s,
      box-shadow 0.12s,
      background-color 0.12s,
      color 0.12s;
  }
  .btn::before {
    content: "[";
  }
  .btn::after {
    content: "]";
  }
  .btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 currentColor;
  }
  .btn:active {
    transform: translate(1px, 1px);
    box-shadow: none;
  }
  .on-paper .btn {
    color: var(--carbon-900);
  }
  .btn--red {
    color: var(--red-700);
  }
  /* .on-paper .btn gana por especificidad, hay que igualarla o el texto
     sale en tinta sobre rojo (3.9:1) */
  .btn--solid,
  .on-paper .btn--solid {
    background: var(--red-700);
    color: var(--paper-100);
    border-color: var(--paper-100);
  }
  .btn--solid:hover {
    box-shadow: 4px 4px 0 var(--carbon-900);
  }

  .link-red {
    display: inline-flex;
    align-items: center;
    gap: 0.6ch;
    text-decoration: none;
    font: 500 var(--fs-sm) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--paper-100);
    background: var(--ink-underline) no-repeat 0 100%;
    background-size: 0 0.3em;
    transition: background-size 0.22s;
  }
  .on-paper .link-red {
    color: var(--red-700);
  }
  /* sobre kraft y cinta el papel es mas oscuro: red-700 se queda en 4.4:1 */
  .piece--kraft .link-red,
  .piece--tape .link-red {
    color: #6f1218;
  }
  .link-red:hover,
  .link-red:focus-visible {
    background-size: 100% 0.3em;
  }
  .link-red svg {
    width: 34px;
    height: 14px;
    transition: transform 0.18s;
  }
  .link-red:hover svg {
    transform: translateX(4px);
  }

  .chip,
  .tag {
    display: inline-block;
    padding: 0.3em 0.8em;
    border: 2px dashed currentColor;
    transform: rotate(-11deg);
    font: 600 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .tag--albero {
    background: var(--albero-500);
    color: var(--carbon-900);
    border-style: solid;
  }

  /* ============================== HEADER ============================== */
  .hdr {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(11, 11, 11, 0.86);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(246, 240, 229, 0.14);
    /* jamas rotar el header */
  }
  .hdr__in {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--s3) var(--pad-x);
    display: flex;
    align-items: center;
    gap: var(--s5);
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 0.5ch;
    text-decoration: none;
    font-family: var(--font-display);
    text-transform: uppercase;
    /* en em, para que no se abra al crecer la caja como hacian los 6px fijos */
    letter-spacing: 0.08em;
    color: var(--tan-300); /* el mismo crema calido del "¿te atreves...?" */
    font-size: var(--fs-lg);
    line-height: 1;
  }
  .nav {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s2) var(--s4);
  }
  .nav a {
    text-decoration: none;
    padding: 0.3em 0;
    font: 500 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    background: var(--ink-underline) no-repeat 0 100%;
    background-size: 0 0.3em;
    transition: background-size 0.22s;
  }
  /* separador entre secciones del nav: rombo rojo dibujado con fondo, sin
     content de texto para que ningun lector de pantalla lo lea */
  .nav > a {
    position: relative;
  }
  /* punto final: cuadradito de 2px a la altura de la base del texto */
  .nav > a::after {
    content: "";
    position: absolute;
    /* -9px = mitad del hueco de 16px, para que quede centrado entre entradas */
    right: -9px;
    top: 50%;
    margin-top: -1px;
    width: 2px;
    height: 2px;
    background: var(--red-500);
  }
  .nav > a:last-of-type {
    padding-right: 0;
  }

  .nav > a:last-of-type::after {
    display: none;
  }
  .nav a[aria-current="true"] {
    background-size: 100% 0.3em;
  }
  /* redes en la cabecera: iniciales, con el nombre real en aria-label */
  .hdr__social {
    display: inline-flex;
    gap: var(--s2);
    margin-left: var(--s3);
    padding-left: var(--s3);
    border-left: 1px solid rgba(246, 240, 229, 0.22);
  }
  @media (max-width: 940px) {
    /* el nav se oculta, pero las redes siguen a la vista junto al menu */
    .hdr__social {
      margin-left: auto;
      padding-left: 0;
      border-left: 0;
    }
  }
  @media (max-width: 420px) {
    .hdr__social {
      gap: 4px;
    }
    .hdr__social a {
      width: 26px;
      height: 26px;
    }
  }
  .hdr__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    text-decoration: none;
    border: 1px solid rgba(246, 240, 229, 0.28);
  }
  .hdr__social svg {
    width: 16px;
    height: 16px;
  }
  .hdr__social a:hover {
    background: var(--paper-100);
    color: var(--carbon-900);
    border-color: var(--paper-100);
  }
  .burger {
    margin-left: auto;
    display: none;
    background: none;
    border: 2px solid currentColor;
    color: inherit;
    padding: 0.4em 0.7em;
    cursor: pointer;
    font: 600 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .mnav {
    display: none;
  }
  .mnav[data-open="true"] {
    display: block;
    padding: 0 var(--pad-x) var(--s5);
  }
  .mnav ul {
    display: grid;
    gap: var(--s3);
  }
  .mnav li:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
  }
  .mnav a {
    text-decoration: none;
    font: 600 var(--fs-md) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* =============================== HERO =============================== */
  .hero {
    padding-top: var(--s8);
    padding-bottom: var(--s5);
  }
  #musica {
    padding-top: var(--s6);
  }
  .hero__grid {
    display: grid;
    gap: var(--s6) var(--s8);
    align-items: start;
    grid-template-columns: 7fr 5fr;
    /* la nota vive bajo el texto y la foto ocupa las dos filas: asi puede
       colarse por debajo del titular */
    grid-template-areas: "lead shot";
  }
  .hero__lead {
    grid-area: lead;
  }
  .hero__shot {
    grid-area: shot;
  }
  /* Bloque principal: editorial de rock. Tipografia grande sobre negro,
     sin papel; el collage de papeles vive en el resto de la portada. */
  .hero__lead {
    padding-top: var(--s2);
  }
  .hero__title {
    font-size: var(--fs-2xl);
    margin-bottom: var(--s5);
    color: var(--tan-300);
  }
  .hero__brush {
    display: inline-block;
    /* dentro del h1: hay que resetear el tracking y la caja de display */
    font-family: var(--font-marker);
    font-size: 0.84em;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.1;
    color: var(--paper-100);
    isolation: isolate;
    padding: 0.05em 0.1em 0.09em;
    margin: 0.08em 0 0;
    position: relative;
  }
  .hero__brush::before {
    content: "";
    position: absolute;
    left: -0.12em;
    right: -0.12em;
    bottom: 0.01em;
    height: 0.88em;
    z-index: -1;
    background: var(--red-600);
    opacity: 0.9;
    clip-path: polygon(
      0 18%, 3% 9%, 26% 13%, 52% 6%, 78% 12%, 100% 3%,
      99% 84%, 96% 94%, 73% 88%, 49% 97%, 23% 89%, 1% 96%
    );
    transform: rotate(-0.5deg);
  }
  .hero__brush::after {
    content: "";
    position: absolute;
    left: -0.02em;
    right: 0.04em;
    bottom: 0.23em;
    height: 0.13em;
    z-index: -1;
    background: var(--red-500);
    opacity: 0.5;
    clip-path: polygon(0 38%, 18% 16%, 46% 31%, 75% 10%, 100% 26%, 98% 82%, 62% 68%, 28% 91%, 2% 74%);
  }
  .hero__claim {
    /* fs-xl (>=27px) para que "cabreado" en rojo cumpla el 3:1 de texto grande */
    font: 500 var(--fs-xl) / 1.2 var(--font-mono);
    margin-bottom: var(--s4);
  }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s5);
    margin-top: var(--s6);
  }
  .hero__award {
    max-width: 54ch;
    margin: var(--s5) 0 0;
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    color: var(--paper-300);
    font: 500 var(--fs-xs) / 1.5 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .hero__award strong {
    color: var(--red-400);
    font-size: 1.12em;
  }
  /* Como en la referencia editorial: la foto sangra por la derecha, sin caja,
     y se funde en el negro por los otros tres lados. */
  .hero__shot {
    position: relative;
    z-index: 0; /* por debajo del texto */
    margin-right: calc(-1 * var(--pad-x));
    /* mas grande que su columna y subida, para que el megafono caiga al lado
       de "diferente?" y la guitarra quede casi fuera */
    margin-left: -24%;
    margin-top: -6rem;
    /* auto absorbe los margenes negativos de ambos lados: la foto conserva
       el solape izquierdo y llega hasta el borde derecho sin dejar un corte */
    width: auto;
    --fade-x: linear-gradient(
      90deg,
      transparent 0,
      rgba(0, 0, 0, 0.45) 9%,
      rgba(0, 0, 0, 0.9) 26%,
      #000 42%,
      #000 82%,
      rgba(0, 0, 0, 0.72) 91%,
      transparent 100%
    );
    --fade-y: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.85) 12%,
      #000 30%,
      #000 44%,
      transparent 100%
    );
    -webkit-mask-image: var(--fade-x), var(--fade-y);
    -webkit-mask-composite: source-in;
    mask-image: var(--fade-x), var(--fade-y);
    mask-composite: intersect;
  }
  .hero__lead {
    position: relative;
    z-index: 1; /* el titular siempre por encima de la foto */
  }
  /* contraste alto y trama muy baja: la foto manda, no la fotocopia */
  .hero__shot .plate {
    /* la del hero va en blanco y negro; el unico color del bloque es el rojo */
    filter: grayscale(1) contrast(1.3) brightness(0.98);
  }
  .hero__shot .plate::after {
    opacity: 0.07;
  }

  /* =============================== MUSICA ============================= */
  .two {
    display: grid;
    gap: var(--s8);
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
  /* titular del EP: grande y en mayusculas */
  .ep__title {
    display: inline-block;
    padding: var(--s4) var(--s5) var(--s3);
    margin-bottom: var(--s5);
  }
  /* "Vol. I" / "Vol. II" a tres cuartos del cuerpo del titulo */
  .ep__vol {
    font-size: 0.75em;
  }
  /* misma tipografia que los titulos de seccion: mono en versalitas */
  .ep__title h3,
  .ep-title {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.22rem);
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.12em;
  }

  /* un bloque por EP: portada + tracklist */
  .ep + .ep {
    margin-top: var(--s9);
  }
  .cover {
    position: relative;
    max-width: 420px;
  }
  .cover__ph {
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    padding: var(--s5);
    text-align: center;
    background: linear-gradient(160deg, #2b2b2b, #0d0d0d);
    color: var(--paper-200);
    font-family: var(--font-marker);
    font-size: var(--fs-lg);
  }
  .tracks {
    counter-reset: t;
  }
  .tracks li {
    counter-increment: t;
    display: grid;
    grid-template-columns: 2.6em 1fr auto;
    gap: var(--s3);
    align-items: baseline;
    padding: 0.62em 0;
    border-bottom: 1px solid rgba(246, 240, 229, 0.16);
  }
  .tracks li::before {
    content: "0" counter(t) ".";
    font: 600 var(--fs-sm) var(--font-mono);
    color: var(--red-400); /* unico rojo que pasa AA en pequeno sobre negro */
  }
  .tracks__name {
    font: 500 var(--fs-md) var(--font-body);
  }
  .tracks__dur {
    font: 400 var(--fs-xs) var(--font-mono);
    color: var(--paper-400);
  }
  /* Plataformas: fila de enlaces, no un boton por cada una */
  .platforms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    margin-top: var(--s4);
  }
  .platforms a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(246, 240, 229, 0.28);
    text-decoration: none;
  }
  .platforms svg {
    width: 17px;
    height: 17px;
  }
  .platforms a:hover {
    background: var(--paper-100);
    color: var(--carbon-900);
    border-color: var(--paper-100);
  }
  /* Color de marca de cada plataforma. Los logos negros (Tidal, TikTok) van
     en crema: sobre el carbon no se verian. Todos cumplen el 3:1 de
     contraste no textual. */
  .platforms a[aria-label="Spotify"] {
    color: #1ed760;
  }
  .hdr__social a[aria-label="Facebook"] {
    color: #0866ff;
  }
  .platforms a[aria-label="Apple Music"] {
    color: #fa243c;
  }
  .platforms a[aria-label="YouTube Music"],
  .hdr__social a[aria-label="YouTube"] {
    color: #ff0000;
  }
  .platforms a[aria-label="Amazon Music"] {
    color: #25d1da;
  }
  .platforms a[aria-label="Deezer"] {
    color: #a238ff;
  }
  .platforms a[aria-label="SoundCloud"] {
    color: #ff5500;
  }
  .platforms a[aria-label="Tidal"],
  .hdr__social a[aria-label="TikTok"] {
    color: var(--paper-100);
  }
  .hdr__social a[aria-label="Instagram"] {
    color: #ff0069;
  }
  /* al pasar por encima, el borde toma el color del logo */
  .platforms a:hover,
  .hdr__social a:hover {
    background: transparent;
    border-color: currentColor;
  }
  .vol2 {
    margin-top: var(--s7);
    padding: var(--s5);
    border: 2px dashed rgba(246, 240, 229, 0.3);
  }

  /* ============================ DESCONCIERTOS ========================= */
  .gig {
    display: grid;
    gap: var(--s7);
    grid-template-columns: 8fr 4fr;
    align-items: start;
  }
  .gig__title {
    font-size: var(--fs-2xl);
    margin: var(--s4) 0 var(--s6);
  }
  .gig__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s4);
    margin-bottom: var(--s5);
  }
  .gig__date {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    letter-spacing: 8px;
    color: var(--red-600);
  }
  .gig__city {
    font: 600 var(--fs-md) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .gig__quote {
    font: 500 var(--fs-lg) / 1.4 var(--font-body);
    font-style: italic;
    margin-bottom: var(--s5);
  }
  .gig__aside {
    display: grid;
    gap: var(--s4);
  }
  .dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4em var(--s4);
    margin: 0;
  }
  .dl dt {
    font: 600 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--paper-400); /* sobre negro: el marron daba 2.3:1 */
  }
  .on-paper .dl dt {
    color: #5a4b38;
  }
  .dl dd {
    margin: 0;
    font: 500 var(--fs-sm) var(--font-body);
  }

  /* Fila de concierto desplegable: los datos de sala salen al pinchar */
  .gigrow {
    border-bottom: 1px solid rgba(11, 11, 11, 0.18);
  }
  .gigrow__head,
  .gigrow--row,
  .gigrow > summary {
    display: grid;
    /* la ultima columna es para el +/- del ::after: sin ella caia a otra fila */
    grid-template-columns: 7em 9em 1fr auto 1.5em;
    gap: var(--s4);
    align-items: center;
    padding: 0.85em 0;
    cursor: pointer;
    font: 500 var(--fs-sm) var(--font-mono);
    list-style: none;
  }
  .gigrow > summary::-webkit-details-marker {
    display: none;
  }
  .gigrow > summary::after {
    content: "+";
    font-weight: 600;
    text-align: right;
  }
  .gigrow[open] > summary::after {
    content: "–";
  }
  .gigrow--row,
  .gigrow__head {
    color: inherit;
    text-decoration: none;
  }
  /* el estilo del desplegable, pero sin desplegar: cabecera + ficha debajo */
  .gigrow--open > .gigrow__head {
    border-bottom: 1px dashed rgba(11, 11, 11, 0.22);
  }
  a.gigrow__head:hover .d-city,
  a.gigrow--row:hover .d-city,
  .gigrow > summary:hover .d-city {
    color: var(--red-700);
  }
  /* sin desplegable no hay +: solo las filas con summary lo llevan */
  .gigrow--row::after,
  .gigrow__head::after {
    content: none;
  }
  /* la sangria de 7em era para la ficha desplegada; la cabecera va a plomo.
     En .gigrow--row los hijos directos son las propias celdas de la rejilla
     (fechas futuras): con la sangria la fecha se quedaba en 0px. */
  .gigrow:not(.gigrow--row) > :not(summary):not(.gigrow__head) {
    margin: 0 0 var(--s4) 7em;
  }
  /* el enlace del cartel, alineado a la derecha de la fila */
  .gigrow > p:last-of-type {
    text-align: right;
    margin-left: 0;
  }
  .gigrow[open] > summary {
    border-bottom: 1px dashed rgba(11, 11, 11, 0.25);
    margin-bottom: var(--s4);
  }
  /* un unico trazo de boli que cruza la fila entera, de lado a lado */
  .gigrow--open.is-done > .gigrow__head,
  .gigrow--row.is-done,
  .gigrow--row.is-cancel {
    position: relative;
  }
  .gigrow--open.is-done > .gigrow__head::before,
  .gigrow--row.is-done::before,
  .gigrow--row.is-cancel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1.1em;
    transform: translateY(-50%);
    background: var(--ink-strike-wide) no-repeat center / 100% 100%;
    pointer-events: none;
  }
  /* en las filas desplegables (si vuelven) el trazo va sobre el texto */
  .gigrow.is-cancel > summary .d-city,
  .gigrow.is-cancel > summary .d-venue {
    background: var(--ink-strike) no-repeat center / 100% 1.4em;
  }
  @media (max-width: 560px) {
    .gigrow__head,
    .gigrow--row,
    .gigrow > summary {
      grid-template-columns: 1fr auto 1.5em;
      gap: var(--s2) var(--s3);
    }
    .gigrow__head .d-venue,
    .gigrow--row .d-venue,
    .gigrow > summary .d-venue {
      grid-column: 1 / -1;
    }
    .gigrow > :not(summary) {
      margin-left: 0;
    }
    .gigrow--open > .dl {
      margin-left: 0;
    }
  }
  .dates li {
    display: grid;
    grid-template-columns: 6.5em 8em 1fr auto;
    gap: var(--s4);
    align-items: center;
    padding: 0.85em 0;
    border-bottom: 1px solid rgba(11, 11, 11, 0.18);
    font: 500 var(--fs-sm) var(--font-mono);
  }
  .dates .d-city {
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .dates .d-venue {
    color: #4d4132;
  }
  .state {
    font: 600 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .state--on {
    color: var(--red-700);
  }
  .state--out {
    color: var(--carbon-900);
  }
  .state--off {
    color: #4d4132;
  }
  /* Cancelado: tachado a boli, nunca line-through. Y el estado va tambien
   en texto: el color no es el unico portador. */
  .is-cancel .d-city,
  .is-cancel .d-venue {
    background: var(--ink-strike) no-repeat center/100% 1.5em;
  }

  /* ============================== LETRAS ============================== */
  .three {
    display: grid;
    gap: var(--s7);
    grid-template-columns: 4fr 5fr 3fr;
    align-items: start;
  }
  /* Letra completa: estrofas separadas, versos sin justificar */
  .lyrics .lyric {
    margin: 0 0 1.2em;
    /* interlineado exacto de la pauta (27px) para que los versos caigan
       sobre las lineas del cuaderno */
    /* Kalam tiene la x mas alta que Reenie Beanie: menos cuerpo. Misma
       pauta de 27px para que los versos caigan sobre las lineas. */
    font: 400 clamp(1.02rem, 0.95rem + 0.32vw, 1.18rem) / 27px var(--font-hand);
  }
  .lyrics .lyric:last-child {
    margin-bottom: 0;
  }
  .navletras {
    margin-top: var(--s7);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s5);
    justify-content: space-between;
  }
  .lyric {
    font: 500 var(--fs-lg) / 1.75 var(--font-body);
    white-space: pre-line;
  }
  .lyric__by {
    font: 600 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: var(--s5);
  }
  /* temas sin letra publicada: se listan, pero no enlazan */
  .tracks.is-off .tracks__name,
  .repertoire .is-off {
    color: var(--paper-400);
  }
  .repertoire .is-off span,
  .tracks.is-off .tracks__dur {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--paper-400);
  }
  .repertoire li {
    padding: 0.4em 0;
    border-bottom: 1px dashed rgba(246, 240, 229, 0.2);
    font: 400 var(--fs-sm) var(--font-mono);
  }


  /* Fotos descargables del dossier */
  .fotos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s6);
  }
  .fotos figure {
    margin: 0;
  }
  .fotos figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    justify-content: space-between;
    margin-top: var(--s3);
    font: 500 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--paper-300);
  }

  /* ============================ BIO / CONTACTO ======================== */
  .bio__p {
    font-size: var(--fs-md);
  }
  .bio__award {
    margin: var(--s5) 0 var(--s6);
    padding-top: var(--s3);
    border-top: 1px solid rgba(246, 240, 229, 0.2);
    color: var(--tan-300);
    font: 600 var(--fs-sm) / 1.55 var(--font-mono);
    display: flex;
    align-items: center;
    gap: var(--s4);
  }
  /* El pez del Premio del Público: PNG ya recortado, sin caja ni fondo,
     un pelo torcido como los papeles. */
  .award__logo {
    flex: none;
    align-self: center;
    width: 56px;
    height: auto;
    transform: rotate(-4deg);
  }
  .hero__award .award__logo { width: 64px; }
  /* Sobre papel claro (dossier) el crema no se lee: tinta roja oscura. */
  .piece--clean .bio__award {
    color: var(--red-700);
    border-top-color: rgba(96, 68, 38, 0.22);
  }
  /* Cita destacada del dossier: comillas rojas grandes, texto en cursiva */
  .pull {
    margin: var(--s6) 0;
    padding-left: var(--s5);
    border-left: 3px solid var(--red-500);
    font: italic 400 var(--fs-lg) / 1.4 var(--font-body);
    color: var(--paper-100);
  }
  /* La firma de la bio repite la pasada de Edding del hero a escala de cuerpo. */
  .brush {
    position: relative;
    display: inline-block;
    isolation: isolate;
    padding: 0 0.1em;
    color: var(--paper-100);
    white-space: nowrap;
  }
  .brush::before {
    content: "";
    position: absolute;
    left: -0.12em;
    right: -0.12em;
    bottom: -0.05em;
    height: 1.02em;
    z-index: -1;
    background: var(--red-600);
    opacity: 0.9;
    clip-path: polygon(
      0 18%, 3% 9%, 26% 13%, 52% 6%, 78% 12%, 100% 3%,
      99% 84%, 96% 94%, 73% 88%, 49% 97%, 23% 89%, 1% 96%
    );
    transform: rotate(-0.5deg);
  }
  .brush::after {
    content: "";
    position: absolute;
    left: -0.02em;
    right: 0.04em;
    bottom: 0.23em;
    height: 0.13em;
    z-index: -1;
    background: var(--red-500);
    opacity: 0.5;
    clip-path: polygon(0 38%, 18% 16%, 46% 31%, 75% 10%, 100% 26%, 98% 82%, 62% 68%, 28% 91%, 2% 74%);
  }
  .contact h3 {
    font-family: var(--font-marker);
    font-size: var(--fs-xl);
    color: var(--red-700);
    margin-bottom: var(--s4);
  }
  .contact__rows {
    display: grid;
    gap: var(--s4);
    margin-bottom: var(--s5);
  }
  .social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
  }
  .social a {
    text-decoration: none;
    border: 2px solid currentColor;
    padding: 0.3em 0.7em;
    font: 500 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .social a:hover {
    background: var(--carbon-900);
    color: var(--paper-100);
  }
  .news {
    display: grid;
    gap: var(--s3);
    margin-top: var(--s5);
  }
  .news label {
    font: 600 var(--fs-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .news__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
  }
  .news input {
    flex: 1 1 220px;
    min-width: 0;
    border: 2px solid var(--carbon-900);
    background: rgba(255, 255, 255, 0.5);
    color: var(--carbon-900);
    padding: 0.6em 0.8em;
    font: 400 var(--fs-sm) var(--font-mono);
  }
  .news__msg {
    font: 500 var(--fs-xs) var(--font-mono);
    min-height: 1.4em;
  }
  .news__msg[data-kind="err"] {
    color: var(--red-700);
  }

  /* ============================== FOOTER ============================== */
  .ftr {
    border-top: 1px solid rgba(246, 240, 229, 0.16);
    padding: var(--s8) 0 var(--s7);
  }
  .ftr__grid {
    display: grid;
    gap: var(--s7);
    /* dos columnas: la caja roja y los enlaces (fuera el claim del pie) */
    grid-template-columns: auto 1fr;
    align-items: start;
  }
  .ftr__claim {
    display: flex;
    gap: var(--s4);
    align-items: flex-start;
  }
  .ftr__box {
    background: var(--red-700);
    color: var(--paper-100);
    padding: var(--s5);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    letter-spacing: var(--title-tracking);
    text-transform: uppercase;
    line-height: 1.06;
  }
  .ftr__links {
    display: grid;
    gap: var(--s2);
  }
  .ftr__links a {
    font: 400 var(--fs-sm) var(--font-mono);
    text-decoration: none;
  }
  .ftr__links a:hover {
    color: var(--red-500);
  }
  .ftr__legal {
    margin-top: var(--s7);
    padding-top: var(--s4);
    border-top: 1px solid rgba(246, 240, 229, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    justify-content: space-between;
    font: 400 var(--fs-xs) var(--font-mono);
    color: var(--paper-400);
  }

  /* ============================= RESPONSIVE =========================== */
  @media (max-width: 1100px) {
    .three {
      grid-template-columns: 1fr 1fr;
    }
    .three > :last-child {
      grid-column: 1/-1;
    }
    .ftr__grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 940px) {
    /* la portada del EP no aporta en movil y empuja el tracklist */
    .cover {
      display: none;
    }
    .nav {
      display: none;
    }
    .burger {
      display: inline-block;
    }
    .hero__grid {
      grid-template-areas: "lead" "shot";
    }
    .hero__shot {
      margin-left: 0;
      margin-top: 0;
      width: auto;
    }
    .hero__grid,
    .two,
    .gig,
    .three,
    .ftr__grid {
      grid-template-columns: 1fr;
    }
    .cover {
      max-width: none;
    }
  }
  @media (max-width: 560px) {
    section {
      padding: var(--s7) 0;
    }
    .piece {
      padding: var(--s5);
    }
    .piece--lined {
      padding-left: calc(var(--s5) + 30px);
    }
    .tape {
      width: 74px;
      height: 22px;
    }
    .tape--tl {
      top: -8px;
      left: -6px;
    }
    .tape--tr {
      top: -8px;
      right: -6px;
    }
    /* las marcas de boli no pueden volar fuera del viewport en movil */
    .mark--slash {
      width: 84px;
      height: 120px;
      right: 10px !important;
      bottom: 14px !important;
    }
    .dates li {
      grid-template-columns: 1fr auto;
      gap: var(--s2) var(--s3);
    }
    .dates .d-venue {
      grid-column: 1/-1;
    }
    .gig__meta {
      gap: var(--s3);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }