/* ═══════════════════════════════════════════════════════════════════════
   JOKER STOKER ARGENTINA — Vinilo gatefold
   Sistema BYQ « Sound Stories ». Tomado tal cual: la escala tipográfica
   extrema —cuerpo de 16 px contra displays de 100 a 250 px, todo en peso
   ligero y con tracking negativo—, los hombros redondeados de 30 px que
   cosen las bandas oscuras al lienzo, el botón en píldora, la superficie de
   acento única y la profundidad construida sólo con contraste de color,
   sin una sola sombra.
   Adaptado: el pliego fija la paleta —vinilo, fuego, papel de sobre y
   plata de estampación— y las familias condensada para titulares y una
   grotesca neutra para el texto. El acento lima del sistema cede ante el
   naranja de fuego. La fotografía, que en Sound Stories es central, se
   sustituye por tipografía sobre plano: no hay un solo archivo gráfico.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --vinilo:#121212; --vinilo-alto:#1C1C1C;
  --fuego:#FF5A1F;
  --sobre:#F2EFE6;
  --plata:#C7C7C7;
  --sobre-72:rgba(242,239,230,.72);
  --sobre-48:rgba(242,239,230,.48);
  --sobre-16:rgba(242,239,230,.16);
  --vinilo-64:rgba(18,18,18,.64);
  --vinilo-16:rgba(18,18,18,.16);
  --display:Oswald,"Haettenschweiler","Arial Narrow",Impact,sans-serif;
  --cuerpo:Helvetica,Arial,"Helvetica Neue",sans-serif;
  --mono:"Courier New",Courier,monospace;
  --t-caption:12px; --t-body-sm:14px; --t-body:16px; --t-body-lg:30px;
  --t-h-sm:24px; --t-h:40px; --t-h-lg:60px; --t-display-sm:100px;
  --s-4:4px;--s-8:8px;--s-10:10px;--s-16:16px;--s-20:20px;--s-24:24px;--s-32:32px;
  --s-40:40px;--s-64:64px;--s-80:80px;--s-120:120px;--s-140:140px;--s-190:190px;
  --pagina:1280px;
  --r-hombro:30px; --r-tarjeta:16px; --r-pildora:9999px;
  --d:200ms; --e:ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--sobre);color:var(--vinilo);font-family:var(--cuerpo);
  font-size:var(--t-body);line-height:1.5;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid var(--fuego);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1}
h1{font-size:var(--t-display-sm)}
h2{font-size:var(--t-h-lg)}
h3{font-size:var(--t-h-sm);letter-spacing:.02em}
p{margin:0 0 var(--s-16)}
p:last-child{margin-bottom:0}
@media(max-width:991px){h1{font-size:var(--t-h-lg)}h2{font-size:var(--t-h)}}
@media(max-width:479px){h1{font-size:44px}h2{font-size:var(--t-h-sm)}}
.marco{width:100%;max-width:var(--pagina);margin:0 auto;padding-inline:24px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rotulo{display:block;font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fuego)}

/* ═══ Entradas ════════════════════════════════════════════════════════ */
.js-on .revelar{opacity:0;transform:translateY(12px);
  transition:opacity 400ms var(--e),transform 400ms var(--e)}
.js-on .revelar.visto{opacity:1;transform:none}
.filete{height:2px;background:var(--fuego);transform-origin:left}
.js-on .filete{transform:scaleX(0);transition:transform 500ms var(--e)}
.js-on .filete.visto{transform:scaleX(1)}

/* ═══ BLOQUE 3.0 — Lomo del sobre ═══════════════════════════════════ */
.lomo{background:var(--vinilo);color:var(--sobre)}
.lomo .marco{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-16) var(--s-32);
  padding-block:var(--s-16)}
.lomo .titulo{font-family:var(--display);font-size:var(--t-h-sm);text-transform:uppercase;
  letter-spacing:.04em;text-decoration:none;margin-right:auto}
.lomo .titulo small{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.14em;
  color:var(--plata);text-transform:none;margin-left:var(--s-12)}
.lomo nav{display:flex;flex-wrap:wrap;gap:var(--s-24)}
.lomo nav a{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.12em;
  text-transform:uppercase;color:var(--plata);text-decoration:none;
  transition:color var(--d) var(--e)}
.lomo nav a:hover{color:var(--fuego)}
.edad{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.12em;
  border:1px solid var(--sobre-16);border-radius:var(--r-pildora);padding:4px 12px;
  color:var(--plata)}

/* ═══ BLOQUE 4.0 — Portada cuadrada 1:1 ════════════════════════════ */
.portada{background:var(--vinilo);color:var(--sobre);
  border-radius:0 0 var(--r-hombro) var(--r-hombro);padding-block:var(--s-64) var(--s-80)}
.cuadrado{aspect-ratio:1;max-width:760px;margin-inline:auto;display:flex;flex-direction:column;
  justify-content:space-between;border:2px solid var(--fuego);padding:var(--s-40)}
@media(max-width:767px){.cuadrado{aspect-ratio:auto;padding:var(--s-24)}}
.cuadrado h1{margin-top:var(--s-16)}
.cuadrado .lead{margin-top:var(--s-24);max-width:52ch;color:var(--sobre-72)}
.acciones{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center;margin-top:var(--s-32)}

/* ═══ BLOQUE 5.0 — Track-list de datos ═════════════════════════════ */
.tracklist{list-style:none;margin:var(--s-40) 0 0;padding:0;font-family:var(--mono);
  font-size:var(--t-body-sm)}
.tracklist li{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-16);
  padding-block:var(--s-12);border-bottom:1px solid var(--sobre-16);align-items:baseline}
.claro .tracklist li{border-bottom-color:var(--vinilo-16)}
.tracklist .n{color:var(--fuego)}
.tracklist .v{text-align:right;white-space:nowrap}
.pendiente{color:var(--fuego)}

/* ═══ Secciones ════════════════════════════════════════════════════ */
.banda{padding-block:var(--s-120)}
.banda.corta{padding-block:var(--s-80)}
.banda.oscura{background:var(--vinilo);color:var(--sobre);border-radius:var(--r-hombro)}
.banda.acento{background:var(--fuego);color:var(--vinilo);border-radius:var(--r-hombro)}
.banda h2{margin-top:var(--s-16)}
.intro{margin-top:var(--s-24);max-width:66ch}
.oscura .intro{color:var(--sobre-72)}
.oscura .rotulo{color:var(--plata)}
.acento .rotulo{color:var(--vinilo)}

/* ═══ BLOQUES 8.0/9.0 — Caras A y B, simétricas ════════════════════ */
.caras{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-32);margin-top:var(--s-40)}
@media(max-width:991px){.caras{grid-template-columns:1fr}}
.cara{border:2px solid currentColor;border-radius:var(--r-tarjeta);padding:var(--s-40)}
.cara .letra{font-family:var(--display);font-size:96px;line-height:.8;color:var(--fuego)}
.cara h3{margin-top:var(--s-16)}
.cara p{margin-top:var(--s-16)}
.cara ul{list-style:none;margin:var(--s-24) 0 0;padding:0}
.cara li{padding-block:var(--s-10);border-top:1px solid currentColor;font-size:var(--t-body-sm)}

/* ═══ BLOQUE 11.0 — Matriz de prensado ═════════════════════════════ */
.matriz{margin-top:var(--s-40);border:1px solid var(--sobre-16);border-radius:50%;
  aspect-ratio:1;max-width:420px;margin-inline:auto;display:grid;place-items:center;
  text-align:center;padding:var(--s-40);
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 5px,var(--sobre-16) 5px 6px)}
.matriz div{background:var(--vinilo);border-radius:50%;padding:var(--s-32);
  font-family:var(--mono);font-size:var(--t-caption);line-height:2;letter-spacing:.06em}
.matriz b{display:block;font-family:var(--display);font-size:var(--t-h-sm);
  text-transform:uppercase;letter-spacing:.04em;color:var(--fuego)}
@media(max-width:479px){.matriz{border-radius:var(--r-tarjeta);aspect-ratio:auto}
  .matriz div{border-radius:var(--r-tarjeta)}}

/* ═══ BLOQUE 14.0 — Etiqueta argentina ═════════════════════════════ */
.etiqueta-ar{margin-top:var(--s-40);max-width:70ch;border:2px solid #7CB2D9;
  border-radius:var(--r-tarjeta);padding:var(--s-32);
  background:linear-gradient(180deg,rgba(124,178,217,.18) 0 30%,transparent 30%)}

/* ═══ BLOQUES 16.0/20.0 — Discos vecinos y catálogo ════════════════ */
.catalogo{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--s-24);margin-top:var(--s-40)}
.disco{border:1px solid var(--vinilo-16);border-radius:var(--r-tarjeta);padding:var(--s-32);
  text-decoration:none;display:block;transition:background var(--d) var(--e),color var(--d) var(--e)}
.disco:hover{background:var(--vinilo);color:var(--sobre)}
.oscura .disco{border-color:var(--sobre-16)}
.oscura .disco:hover{background:var(--fuego);color:var(--vinilo)}
.disco .cara-l{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fuego)}
.disco h3{margin-top:var(--s-12)}
.disco p{margin-top:var(--s-12);font-size:var(--t-body-sm)}

/* ═══ BLOQUE 17.0 — Dos columnas de estado ═════════════════════════ */
.surcos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-40);margin-top:var(--s-40)}
@media(max-width:767px){.surcos{grid-template-columns:1fr}}
.surco ul{list-style:none;margin:var(--s-24) 0 0;padding:0}
.surco li{padding-block:var(--s-12);border-top:1px solid var(--vinilo-16);
  font-size:var(--t-body);line-height:1.5}
.oscura .surco li{border-top-color:var(--sobre-16)}

/* ═══ BLOQUE 18.0 — Créditos del disco ═════════════════════════════ */
.creditos{margin-top:var(--s-40);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-24);max-width:900px}
.creditos dt{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fuego)}
.creditos dd{margin:var(--s-8) 0 0;font-size:var(--t-body)}

/* ═══ BLOQUE 19.0 — Encarte de juego responsable ═══════════════════ */
.encarte ul{list-style:none;margin:var(--s-24) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-24)}
.encarte li b{display:block;font-family:var(--display);font-size:var(--t-h-sm);
  text-transform:uppercase;letter-spacing:.02em}
.encarte li span{display:block;margin-top:var(--s-8);font-size:var(--t-body-sm);line-height:1.5}

/* ═══ BLOQUE 22.0 — Preguntas en surcos ════════════════════════════ */
.consultas{margin-top:var(--s-40);border-top:2px solid currentColor}
.consulta{border-bottom:1px solid var(--vinilo-16)}
.oscura .consulta{border-bottom-color:var(--sobre-16)}
.consulta .tirador{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-24);background:none;border:0;padding:var(--s-24) 0;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:var(--t-h-sm);text-transform:uppercase;
  letter-spacing:.02em;color:inherit}
.aguja{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--fuego);
  position:relative;transition:transform var(--d) var(--e)}
.aguja::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--fuego)}
.tirador[aria-expanded="true"] .aguja{transform:scale(.72)}
.cuerpo-q{max-height:0;overflow:hidden;transition:max-height var(--d) var(--e)}
.cuerpo-q.abierto{max-height:460px}
.cuerpo-q:not(.abierto) .dentro{visibility:hidden}
.dentro{padding-bottom:var(--s-32);max-width:68ch}

/* ═══ Acción, aviso y divulgación ══════════════════════════════════ */
.cta{display:inline-flex;align-items:center;gap:var(--s-12);background:var(--fuego);
  color:var(--vinilo);border-radius:var(--r-pildora);padding:14px 28px;
  font-family:var(--display);font-size:var(--t-body);text-transform:uppercase;
  letter-spacing:.06em;text-decoration:none;transition:background var(--d) var(--e)}
.cta:hover{background:var(--sobre);color:var(--vinilo)}
.acento .cta{background:var(--vinilo);color:var(--sobre)}
.chevron{display:inline-block;width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.aviso{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.1em;
  text-transform:uppercase;color:var(--plata)}
.claro .aviso,.acento .aviso{color:var(--vinilo-64)}
.divulgacion{margin-top:var(--s-24);font-size:var(--t-body-sm);line-height:1.5;
  color:var(--sobre-48);max-width:76ch}
.claro .divulgacion,.acento .divulgacion{color:var(--vinilo-64)}
.enlace{color:inherit;text-decoration:underline;text-decoration-color:var(--fuego);
  text-underline-offset:3px}
.fallo{margin-top:var(--s-24);font-size:var(--t-body-sm);line-height:1.5;color:var(--sobre-48)}
.claro .fallo{color:var(--vinilo-64)}

/* ═══ BLOQUE 23.0 — Contratapa ═════════════════════════════════════ */
.pie-sitio{background:var(--vinilo);color:var(--sobre);border-radius:var(--r-hombro) var(--r-hombro) 0 0;
  padding-block:var(--s-80);margin-top:var(--s-40)}
.pie-cols{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-64)}
@media(max-width:767px){.pie-cols{grid-template-columns:1fr;gap:var(--s-32)}}
.pie-marca{font-family:var(--display);font-size:var(--t-h);text-transform:uppercase;
  letter-spacing:.02em}
.pie-nota{margin-top:var(--s-12);font-size:var(--t-body-sm);line-height:1.5;color:var(--plata)}
.pie-sitio nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-10) var(--s-24)}
.pie-sitio nav a{font-family:var(--mono);font-size:var(--t-body-sm);color:var(--plata);
  text-decoration:none;transition:color var(--d) var(--e)}
.pie-sitio nav a:hover{color:var(--fuego)}
.legal{margin-top:var(--s-24);font-size:var(--t-caption);line-height:1.8;
  color:var(--sobre-48);max-width:96ch}