/* ═══════════════════════════════════════════════════════════════════════
   DEMO JOKER GLITZ — Black/Fuchsia Contact-sheet Journal
   Sistema BYQ « Koda Studio ». Tomado tal cual: la lógica de periódico de
   gran formato con rejillas asimétricas, el titular monumental de tracking
   muy cerrado e interlineado 1.1 que desborda ligeramente el contenedor, el
   filete de 1 px como único separador —el sistema prohíbe expresamente las
   tarjetas con caja—, el botón de 52 px de alto y 6 px de radio, la ausencia
   total de sombras fuera de superposiciones, y el ritmo de 120 px sobre un
   contenedor de 1600 px con canaleta de 24 px.
   Adaptado: el pliego impone lienzo negro; se invierte la relación de tinta
   del sistema y la fucsia toma el papel de única decisión cromática de
   interfaz. Impact y Arial Narrow sustituyen a Satoshi.
   Todo es CSS y tipografía: el diario describe capturas, no las publica.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --negro:#050507; --elevacion:#0E0E12; --plata:#D9DCE4; --fucsia:#FF2CA8;
  --p-72:rgba(217,220,228,.72); --p-48:rgba(217,220,228,.48);
  --filete:rgba(217,220,228,.22); --filete-suave:rgba(217,220,228,.10);
  --display:Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --texto:"Arial Narrow",Arial,"Helvetica Neue",sans-serif;
  --t-caption:13px; --t-body-sm:16px; --t-body:19px; --t-body-lg:24px;
  --t-h-sm:28px; --t-h:34px; --t-h-lg:46px; --t-display-sm:58px; --t-display:130px;
  --s-4:4px;--s-8:8px;--s-12:12px;--s-16:16px;--s-24:24px;--s-32:32px;--s-44:44px;
  --s-52:52px;--s-64:64px;--s-80:80px;--s-100:100px;--s-120:120px;--s-160:160px;
  --pagina:1600px; --folio:64px;
  --r-boton:6px; --r-min:4px; --r-pastilla:9999px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:40px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--negro);color:var(--plata);
  font-family:var(--texto);font-size:var(--t-body);line-height:1.55;overflow-x:clip;
  padding-left:var(--folio)}
@media(max-width:767px){body{padding-left:0}}
a{color:inherit}
:focus-visible{outline:2px solid var(--fucsia);outline-offset:3px}
.marco{width:100%;max-width:var(--pagina);margin:0 auto;padding-inline:24px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-transform:uppercase}
h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.02em}
@media(max-width:991px){h1{font-size:72px}}
@media(max-width:479px){h1{font-size:44px}}
h2{font-size:var(--t-h-lg);line-height:1.08;letter-spacing:-.01em}
@media(max-width:767px){h2{font-size:var(--t-h)}}
h3{font-size:var(--t-h-sm);line-height:1.1}
p{margin:0 0 var(--s-16);max-width:64ch;color:var(--p-72)}
p:last-child{margin-bottom:0}
.seccion{padding-block:var(--s-120)}
@media(max-width:767px){.seccion{padding-block:var(--s-80)}}
.corte{border:0;border-top:1px solid var(--filete);margin:0}
.pie-nota-sec{font-family:var(--texto);font-size:var(--t-caption);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fucsia);margin:0 0 var(--s-32);display:block}
.revelar{opacity:0;transform:translateY(14px);
  transition:opacity 800ms cubic-bezier(.2,0,0,1),transform 800ms cubic-bezier(.2,0,0,1)}
.revelar.visto{opacity:1;transform:none}
html:not(.js-on) .revelar{opacity:1;transform:none}
.enlace{color:var(--plata);text-decoration:underline;text-decoration-color:var(--fucsia);
  text-underline-offset:.2em}
.cta{display:inline-flex;align-items:center;gap:10px;height:52px;padding-inline:32px;
  border-radius:var(--r-boton);background:var(--plata);color:var(--negro);border:0;
  font-family:var(--display);font-size:var(--t-body-sm);letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background 200ms ease}
.cta:hover{background:var(--fucsia);color:var(--plata)}
.chevron{width:6px;height:6px;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg)}
.aviso{display:inline-block;font-size:var(--t-caption);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fucsia);border:1px solid rgba(255,44,168,.42);
  border-radius:var(--r-min);padding:7px 12px}
.divulgacion{font-size:var(--t-caption);line-height:1.7;color:var(--p-48);max-width:88ch;margin:0}

/* ═══ BLOQUE 2.0 — Folio vertical ═════════════════════════════════════
   Franja lateral con el texto girado. Sustituye a la cabecera habitual:
   el pliego prohíbe expresamente un header al uso.                       */
.folio{position:fixed;left:0;top:0;bottom:0;width:var(--folio);z-index:40;
  border-right:1px solid var(--filete);background:var(--negro);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding-block:var(--s-24)}
@media(max-width:767px){.folio{position:static;width:100%;height:auto;flex-direction:row;
  border-right:0;border-bottom:1px solid var(--filete);padding:var(--s-16) 24px;
  flex-wrap:wrap;gap:var(--s-16)}}
.folio a,.folio span{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.22em;
  text-transform:uppercase;color:var(--p-48);text-decoration:none;
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
@media(max-width:767px){.folio a,.folio span{writing-mode:horizontal-tb;transform:none;
  letter-spacing:.12em}}
.folio a:hover{color:var(--fucsia)}
.folio .marca{color:var(--plata)}
.folio .edad{color:var(--fucsia)}

/* ═══ BLOQUES 3.0 y 4.0 — Portada y rejilla 2×2 de recortes ══════════ */
.portada{padding-block:var(--s-100) var(--s-64)}
.portada .titular{max-width:none}
.portada .bajada{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-64);
  margin-top:var(--s-52)}
@media(max-width:991px){.portada .bajada{grid-template-columns:1fr;gap:var(--s-32)}}
.rejilla-recortes{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;
  gap:var(--s-24);margin-top:var(--s-64)}
@media(max-width:767px){.rejilla-recortes{grid-template-columns:1fr}}
.recorte{border:1px solid var(--filete);padding:var(--s-32);display:flex;
  flex-direction:column;justify-content:space-between;gap:var(--s-32);min-height:190px}
.recorte.principal{grid-row:span 2;min-height:400px;
  background:linear-gradient(150deg,rgba(255,44,168,.10),transparent 62%)}
.recorte .num{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.2em;
  color:var(--fucsia)}
.recorte .nota{font-size:var(--t-body-sm);line-height:1.6;color:var(--p-72);margin:0}
.recorte .ratio{font-family:var(--display);font-size:var(--t-h-sm);color:var(--plata);
  letter-spacing:.04em}

/* ═══ BLOQUES 5.0–9.0 — Tiras de prueba ══════════════════════════════ */
.tira-prueba{display:grid;grid-template-columns:220px 1fr;gap:var(--s-44);
  padding-block:var(--s-52);border-bottom:1px solid var(--filete-suave)}
@media(max-width:767px){.tira-prueba{grid-template-columns:1fr;gap:var(--s-16)}}
.tira-prueba .idx{font-family:var(--display);font-size:var(--t-h);letter-spacing:.04em;
  color:var(--fucsia);line-height:1}
.tira-prueba .idx small{display:block;font-family:var(--texto);font-size:var(--t-caption);
  letter-spacing:.14em;color:var(--p-48);margin-top:8px}
.tira-prueba h3{margin-bottom:var(--s-12)}
.tira-prueba p{font-size:var(--t-body-sm);line-height:1.7}
.marcas{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-16)}
.marca{font-size:var(--t-caption);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--filete);border-radius:var(--r-min);padding:5px 10px;color:var(--p-48)}
.marca.on{color:var(--fucsia);border-color:rgba(255,44,168,.42)}

/* ═══ BLOQUE 12.0 — Hoja de contactos anotada ════════════════════════ */
.hoja-contactos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--filete);border:1px solid var(--filete)}
@media(max-width:767px){.hoja-contactos{grid-template-columns:repeat(2,1fr)}}
.viñeta{background:var(--negro);padding:var(--s-24);min-height:160px;display:flex;
  flex-direction:column;justify-content:space-between;gap:var(--s-16)}
.viñeta .id{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.18em;
  color:var(--fucsia)}
.viñeta .txt{font-size:var(--t-caption);line-height:1.6;color:var(--p-48)}
.viñeta.marcada{background:var(--elevacion)}

/* ═══ BLOQUE 13.0 — Colofón de plata ═════════════════════════════════ */
.colofon{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s-32);
  padding-block:var(--s-44);border-top:1px solid var(--filete);border-bottom:1px solid var(--filete)}
.colofon dt{font-size:var(--t-caption);letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-48);margin-bottom:8px}
.colofon dd{margin:0;font-family:var(--display);font-size:var(--t-body-lg);color:var(--plata);
  letter-spacing:.02em}

/* ═══ BLOQUES 14.0 y 20.0 — Archivo y hub ════════════════════════════ */
.archivo{border-top:1px solid var(--filete)}
.archivo a{display:grid;grid-template-columns:90px 1fr auto;gap:var(--s-32);
  align-items:baseline;padding:var(--s-32) 0;border-bottom:1px solid var(--filete);
  text-decoration:none;color:inherit}
@media(max-width:767px){.archivo a{grid-template-columns:64px 1fr}}
.archivo .n{font-family:var(--display);font-size:var(--t-h-sm);color:var(--fucsia);
  letter-spacing:.04em}
.archivo .t{font-family:var(--display);font-size:var(--t-h-sm);text-transform:uppercase;
  letter-spacing:.02em}
.archivo .g{display:block;margin-top:8px;font-family:var(--texto);font-size:var(--t-body-sm);
  text-transform:none;letter-spacing:0;color:var(--p-48);max-width:72ch}
.archivo .ir{font-size:var(--t-caption);letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-48)}
@media(max-width:767px){.archivo .ir{grid-column:2}}
.archivo a:hover .t{color:var(--fucsia)}

/* ═══ BLOQUE 22.0 — Pies de foto plegables ═══════════════════════════ */
.pies{border-top:1px solid var(--filete)}
.pie-foto{border-bottom:1px solid var(--filete)}
.pie-foto .cab{display:flex;align-items:baseline;gap:var(--s-24);width:100%;
  padding:var(--s-32) 0;background:none;border:0;font:inherit;color:inherit;
  text-align:left;cursor:pointer}
.pie-foto .n{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.18em;
  color:var(--fucsia);flex:none}
.pie-foto .q{flex:1;font-family:var(--display);font-size:var(--t-h);text-transform:uppercase;
  letter-spacing:-.01em}
@media(max-width:767px){.pie-foto .q{font-size:var(--t-h-sm)}}
.pie-foto .cuerpo{max-height:0;overflow:hidden;transition:max-height .3s ease}
.pie-foto .cuerpo.abierto{max-height:520px}
.pie-foto .cuerpo .dentro{padding:0 0 var(--s-32) 96px;max-width:76ch}
@media(max-width:767px){.pie-foto .cuerpo .dentro{padding-left:0}}

/* ═══ BLOQUE 19.0 — Marca final responsable ══════════════════════════ */
.marca-final{background:var(--plata);color:var(--negro);padding:var(--s-64) 0}
.marca-final h2,.marca-final h3{color:var(--negro)}
.marca-final p{color:rgba(5,5,7,.74)}
.marca-final .pie-nota-sec{color:#A8006B}
.marca-final .rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s-32);margin-top:var(--s-32)}
.marca-final .rejilla div{border-top:1px solid rgba(5,5,7,.24);padding-top:var(--s-16)}
.marca-final .aviso{color:#A8006B;border-color:rgba(168,0,107,.42)}

/* ═══ BLOQUE 23.0 — Contraportada ════════════════════════════════════ */
.pie-sitio{border-top:1px solid var(--filete);padding-block:var(--s-80)}
.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:.04em;color:var(--plata)}
.pie-nota{margin-top:12px;font-size:var(--t-body-sm);color:var(--p-48)}
.pie-sitio nav{display:flex;flex-wrap:wrap;gap:12px var(--s-32)}
.pie-sitio nav a{font-size:var(--t-body-sm);color:var(--p-48);text-decoration:none}
.pie-sitio nav a:hover{color:var(--fucsia)}
.legal{margin-top:var(--s-24);font-size:var(--t-caption);line-height:1.8;color:var(--p-48);
  max-width:94ch}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}