/* ═══════════════════════════════════════════════════════════════════════
   JOKER JEWELS DICE AR — Tabletop Print-and-Play
   Sistema BYQ « Birkform ». Tomado tal cual: el contenedor de 1600 px con
   canaletas de 24 px, el ritmo vertical de 120–160 px por sección, la
   escala tipográfica monumental (display 90–140 px, interlineado 1.0–1.05,
   tracking −0.03em) frente a un cuerpo de 20 px tranquilo, los rótulos de
   navegación y de acción en minúscula, el eyebrow de 12 px en mayúscula con
   0.08em de interletra, la superficie elevada única y la banda invertida en
   tinta para alternar claro y oscuro.
   Adaptado: paleta y tipografías las impone el pliego —cartón kraft, rojo
   de dado, azul noche y papel; Rockwell y Trebuchet MS—, y el radio de
   12 px cede ante el ángulo recto, porque una pieza de cartón troquelado no
   tiene esquinas redondeadas. La fotografía a sangre, que en Birkform es el
   alma del sistema, se sustituye por la mesa vista desde arriba: cartón,
   troquel y sombra de corte, sin un solo archivo gráfico.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --papel:#FBF6EA;          /* mesa y hoja de reglas          */
  --carton:#C8A96B;         /* cartón kraft                   */
  --carton-hondo:#B08F4E;
  --dado:#C0392B;           /* rojo de dado                   */
  --noche:#1B2A4A;          /* azul noche, tinta principal    */
  --noche-72:rgba(27,42,74,.72);
  --noche-48:rgba(27,42,74,.48);
  --noche-24:rgba(27,42,74,.24);
  --noche-12:rgba(27,42,74,.12);
  --display:Rockwell,"Rockwell Nova","Roboto Slab","Courier New",Georgia,serif;
  --cuerpo:"Trebuchet MS",Tahoma,"Segoe UI",Verdana,sans-serif;
  --t-caption:12px; --t-body-sm:14px; --t-body:16px; --t-body-lg:20px;
  --t-sub:26px; --t-h-sm:32px; --t-h:42px; --t-h-lg:56px;
  --t-display-sm:90px; --t-display:140px;
  --s-4:4px;--s-8:8px;--s-12:12px;--s-16:16px;--s-24:24px;--s-32:32px;
  --s-40:40px;--s-52:52px;--s-64:64px;--s-80:80px;--s-120:120px;--s-160:160px;
  --pagina:1600px;
  --grosor:3px;             /* espesor de cartón              */
  --d-hover:200ms; --e:ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--papel);color:var(--noche);font-family:var(--cuerpo);
  font-size:var(--t-body-lg);line-height:1.24;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:3px solid var(--dado);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400}
h1{font-size:var(--t-display-sm);line-height:1.05;letter-spacing:-.03em}
h2{font-size:var(--t-h-lg);line-height:1.21;letter-spacing:-.02em}
h3{font-size:var(--t-h-sm);line-height:1.22;letter-spacing:-.01em}
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:var(--t-h)}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}

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

/* ═══ Pieza de cartón ═════════════════════════════════════════════════
   El troquel del pliego: canto vivo, espesor de 3 px y sombra de corte.
   Sustituye a la tarjeta de 12 px de radio del sistema. */
.carton{background:var(--papel);border:var(--grosor) solid var(--noche);
  box-shadow:6px 6px 0 var(--noche-12);padding:var(--s-32)}
.carton.kraft{background:var(--carton)}
.carton.tinta{background:var(--noche);color:var(--papel);box-shadow:6px 6px 0 var(--carton)}
.troquel{border:var(--grosor) dashed var(--noche-48);padding:var(--s-24)}

/* ═══ BLOQUE 3.0 — Tapa de la caja (no fija: se va con el scroll) ═════ */
.tapa{background:var(--carton);border-bottom:var(--grosor) solid var(--noche)}
.tapa .marco{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-16) var(--s-32);
  padding-block:var(--s-24)}
.tapa .titulo-caja{font-family:var(--display);font-size:var(--t-sub);letter-spacing:-.01em;
  text-decoration:none;margin-right:auto}
.tapa .titulo-caja small{display:block;font-family:var(--cuerpo);font-size:var(--t-caption);
  letter-spacing:.08em;text-transform:uppercase;color:var(--noche-72);margin-top:var(--s-4)}
.tapa nav{display:flex;flex-wrap:wrap;gap:var(--s-24)}
.tapa nav a{font-size:var(--t-body-sm);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color var(--d-hover) var(--e)}
.tapa nav a:hover{border-bottom-color:var(--noche)}
.edad{font-family:var(--display);font-size:var(--t-body-sm);border:var(--grosor) solid var(--noche);
  padding:2px 10px;white-space:nowrap}

/* ═══ BLOQUE 4.0 — Mesa: el tiraje desplegado ════════════════════════
   Vista cenital estricta. Las piezas se inclinan ±2°, nunca se proyectan
   en isometría. */
.mesa{padding-block:var(--s-80) var(--s-120);
  background:
    repeating-linear-gradient(90deg,transparent 0 38px,var(--noche-12) 38px 39px),
    repeating-linear-gradient(0deg,transparent 0 38px,var(--noche-12) 38px 39px),
    var(--papel)}
.tendido{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s-40);align-items:start}
@media(max-width:991px){.tendido{grid-template-columns:1fr}}
.brochura{background:var(--papel);border:var(--grosor) solid var(--noche);
  box-shadow:8px 8px 0 var(--noche-12);padding:var(--s-52);transform:rotate(-1.2deg)}
@media(max-width:767px){.brochura{padding:var(--s-32);transform:none}}
.brochura .marca-brochura{font-size:var(--t-caption);letter-spacing:.08em;
  text-transform:uppercase;color:var(--noche-72)}
.brochura h1{margin-top:var(--s-16)}
.brochura .lead{margin-top:var(--s-24);max-width:66ch}
.acciones{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center;margin-top:var(--s-32)}
.piezas-mesa{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-24)}
.pieza-mesa{padding:var(--s-24);border:var(--grosor) solid var(--noche);background:var(--carton);
  box-shadow:5px 5px 0 var(--noche-12)}
.pieza-mesa:nth-child(1){transform:rotate(1.6deg)}
.pieza-mesa:nth-child(2){transform:rotate(-2deg)}
.pieza-mesa:nth-child(3){transform:rotate(-1.4deg)}
.pieza-mesa:nth-child(4){transform:rotate(2deg)}
@media(max-width:479px){.pieza-mesa{transform:none!important}}
.pieza-mesa b{display:block;font-family:var(--display);font-size:var(--t-body-lg)}
.pieza-mesa span{display:block;margin-top:var(--s-8);font-size:var(--t-body-sm);
  line-height:1.42;color:var(--noche-72)}

/* ═══ BLOQUE 5.0 — Contenido de la caja (no son KPI) ═════════════════ */
.contenido{border-block:var(--grosor) solid var(--noche);padding-block:var(--s-24);
  display:flex;flex-wrap:wrap;gap:var(--s-16) var(--s-40)}
.contenido div{display:flex;align-items:baseline;gap:var(--s-8);font-size:var(--t-body-sm)}
.contenido i{width:12px;height:12px;flex:none;background:var(--dado);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);display:block}
.contenido b{font-family:var(--display);font-size:var(--t-body-lg);font-weight:400}
.pendiente{color:var(--dado)}

/* ═══ BLOQUE 4.0/6.0 — Secciones ═════════════════════════════════════ */
.hoja{padding-block:var(--s-120)}
.hoja.corta{padding-block:var(--s-80)}
.hoja.kraft{background:var(--carton)}
.hoja.tinta{background:var(--noche);color:var(--papel)}
.hoja.tinta .filete{background:var(--carton)}
.eyebrow{display:block;font-size:var(--t-caption);letter-spacing:.08em;
  text-transform:uppercase;color:var(--noche-72);margin-bottom:var(--s-16)}
.tinta .eyebrow{color:var(--carton)}
.intro{margin-top:var(--s-24);max-width:70ch}
.dos-col{column-count:2;column-gap:var(--s-40);max-width:none}
.dos-col p{margin-bottom:var(--s-16);break-inside:avoid}
@media(max-width:767px){.dos-col{column-count:1}}

/* ═══ BLOQUE 8.0 — Tres caras de dado ════════════════════════════════ */
.dados{display:flex;flex-wrap:wrap;gap:var(--s-32);margin-top:var(--s-40)}
.cara{width:150px;aspect-ratio:1;flex:none;border:var(--grosor) solid var(--noche);
  background:var(--papel);box-shadow:5px 5px 0 var(--noche-12);
  display:grid;grid-template-columns:repeat(3,1fr);place-items:center;padding:14px}
.cara i{width:20px;height:20px;border-radius:50%;background:var(--dado);display:block}
.cara i.off{background:transparent}
.cara-pie{font-size:var(--t-body-sm);line-height:1.42;max-width:150px;margin-top:var(--s-8);
  color:var(--noche-72)}
.dado-bloque{display:flex;flex-direction:column}

/* ═══ BLOQUE 9.0 — Tiles de símbolos 4+3+4 ═══════════════════════════ */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-16);margin-top:var(--s-40)}
.tiles .tile:nth-child(5),.tiles .tile:nth-child(6),.tiles .tile:nth-child(7){grid-column:span 1}
@media(max-width:767px){.tiles{grid-template-columns:1fr}}
.tile{aspect-ratio:1;border:var(--grosor) solid var(--noche);background:var(--papel);
  box-shadow:4px 4px 0 var(--noche-12);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s-8);padding:var(--s-16);text-align:center}
.tile.especial{background:var(--carton)}
.tile .glifo{font-family:var(--display);font-size:44px;line-height:1}
.tile .nombre{font-size:var(--t-body-sm)}
.tile .rol{font-size:var(--t-caption);letter-spacing:.08em;text-transform:uppercase;
  color:var(--noche-72)}
@media(max-width:767px){.tile{aspect-ratio:auto;flex-direction:row;justify-content:flex-start;
  text-align:left;gap:var(--s-16)}}

/* ═══ BLOQUE 10.0 — Campo y trazado de líneas ════════════════════════
   El pliego sugería SVG; el proyecto prohíbe todo archivo gráfico y todo
   svg, así que el trazado se dibuja con bordes punteados y el lector de
   pantalla recibe la lista textual de direcciones. */
.campo{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:520px;
  margin-top:var(--s-40);padding:var(--s-16);border:var(--grosor) solid var(--noche);
  background:var(--carton)}
.campo i{aspect-ratio:1;background:var(--papel);border:2px solid var(--noche-24);display:block}
.campo i.marcada{border-color:var(--dado);border-style:dashed;border-width:3px}
.lineas-lista{list-style:none;margin:var(--s-32) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-16)}
.lineas-lista li{display:flex;gap:var(--s-16);align-items:baseline;
  border-top:var(--grosor) solid var(--noche-24);padding-top:var(--s-12)}
.jeton{width:30px;height:30px;flex:none;border:var(--grosor) solid var(--noche);
  border-radius:50%;display:grid;place-items:center;font-family:var(--display);
  font-size:var(--t-body-sm);background:var(--papel)}

/* ═══ BLOQUE 11.0 — Folleto de dos páginas ═══════════════════════════ */
.folleto{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:var(--s-40);
  border:var(--grosor) solid var(--noche);background:var(--papel);
  box-shadow:8px 8px 0 var(--noche-12)}
@media(max-width:767px){.folleto{grid-template-columns:1fr}}
.pagina-folleto{padding:var(--s-52)}
.pagina-folleto+.pagina-folleto{border-left:var(--grosor) solid var(--noche)}
@media(max-width:767px){.pagina-folleto+.pagina-folleto{border-left:0;
  border-top:var(--grosor) solid var(--noche)}}
.pagina-folleto ol{margin:var(--s-24) 0 0;padding-left:1.2em}
.pagina-folleto li{margin-bottom:var(--s-12);font-size:var(--t-body);line-height:1.5}
.colofon{margin-top:var(--s-32);font-size:var(--t-caption);letter-spacing:.08em;
  text-transform:uppercase;color:var(--noche-48)}

/* ═══ BLOQUE 12.0 — Sello del tiraje ═════════════════════════════════ */
.sello{margin-top:var(--s-40);display:inline-block;border:var(--grosor) solid var(--dado);
  color:var(--dado);padding:var(--s-16) var(--s-24);transform:rotate(-3deg);
  font-family:var(--display);font-size:var(--t-body-sm);line-height:1.5;opacity:.85}
.sello b{display:block;font-size:var(--t-body-lg)}

/* ═══ BLOQUE 13.0 — Solapa demo ══════════════════════════════════════ */
.solapa{margin-top:var(--s-40);border:var(--grosor) solid var(--noche);
  background:var(--papel);padding:var(--s-40);
  clip-path:polygon(0 0,100% 0,100% 100%,40px 100%,0 calc(100% - 40px))}
.solapa .fallo{margin-top:var(--s-24);font-size:var(--t-body-sm);line-height:1.42;
  color:var(--noche-72)}

/* ═══ BLOQUE 14.0 — Cinco fichas en arco ═════════════════════════════ */
.arco{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:var(--s-24);margin-top:var(--s-52)}
.ficha{border:var(--grosor) solid var(--noche);border-radius:50%;background:var(--papel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--s-16);width:var(--diam);height:var(--diam)}
.ficha .n{font-family:var(--display);font-size:var(--t-h-sm);line-height:1}
.ficha span{font-size:var(--t-caption);line-height:1.33;margin-top:var(--s-4)}
.ficha:nth-child(odd){background:var(--carton)}
@media(max-width:767px){.ficha{width:auto!important;height:auto!important;border-radius:0;
  width:100%;flex-direction:row;gap:var(--s-16);text-align:left;justify-content:flex-start}}

/* ═══ BLOQUE 15.0 — Pestaña argentina ════════════════════════════════ */
.pestana{margin-top:var(--s-40);border:var(--grosor) solid var(--noche);
  background:linear-gradient(180deg,#BFD9EF 0 34%,var(--papel) 34% 66%,#BFD9EF 66% 100%);
  padding:var(--s-32);max-width:74ch}

/* ═══ BLOQUE 16.0 — Cajas vecinas en el estante ══════════════════════ */
.estante{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s-16);margin-top:var(--s-40)}
.caja-vecina{border:var(--grosor) solid var(--noche);background:var(--papel);
  padding:var(--s-24);box-shadow:4px 4px 0 var(--noche-12)}
.caja-vecina .lomo{font-family:var(--display);font-size:var(--t-body-lg);line-height:1.1}
.caja-vecina p{margin-top:var(--s-12);font-size:var(--t-body-sm);line-height:1.42;
  color:var(--noche-72)}

/* ═══ BLOQUE 17.0 — Dos planchetas ═══════════════════════════════════ */
.planchetas{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-32);margin-top:var(--s-40)}
@media(max-width:767px){.planchetas{grid-template-columns:1fr}}
.plancheta ul{list-style:none;margin:var(--s-24) 0 0;padding:0}
.plancheta li{padding-block:var(--s-12);border-top:2px solid var(--noche-24);
  font-size:var(--t-body);line-height:1.5}

/* ═══ BLOQUE 18.0 — Nota editorial firmada ═══════════════════════════ */
.nota-firmada{margin-top:var(--s-40);max-width:74ch}
.nota-firmada dl{margin:var(--s-24) 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-16)}
.nota-firmada dt{font-size:var(--t-caption);letter-spacing:.08em;text-transform:uppercase;
  color:var(--noche-72)}
.nota-firmada dd{margin:var(--s-4) 0 0;font-size:var(--t-body)}

/* ═══ BLOQUE 19.0 — Inserto de juego responsable ═════════════════════ */
.inserto{margin-top:var(--s-40);border:var(--grosor) solid var(--papel);padding:var(--s-40)}
.inserto ul{list-style:none;margin:var(--s-24) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-24)}
.inserto li b{display:block;font-family:var(--display);font-size:var(--t-body-lg)}
.inserto li span{display:block;margin-top:var(--s-8);font-size:var(--t-body-sm);
  line-height:1.42;color:var(--carton)}

/* ═══ BLOQUE 20.0/21.0 — Estante de materiales y mapa de URL ═════════ */
.materiales{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s-16);margin-top:var(--s-40)}
.material{border:var(--grosor) solid var(--noche);background:var(--papel);padding:var(--s-24);
  text-decoration:none;display:block;transition:background var(--d-hover) var(--e)}
.material:hover{background:var(--carton)}
.material .idx{font-size:var(--t-caption);letter-spacing:.08em;text-transform:uppercase;
  color:var(--noche-72)}
.material h3{margin-top:var(--s-8);font-size:var(--t-body-lg);line-height:1.2}
.material p{margin-top:var(--s-8);font-size:var(--t-body-sm);line-height:1.42;
  color:var(--noche-72)}

/* ═══ BLOQUE 22.0 — FAQ en tarjetas con esquina doblada ══════════════ */
.tarjetas-faq{margin-top:var(--s-40);display:grid;gap:var(--s-16)}
.tarjeta-faq{border:var(--grosor) solid var(--noche);background:var(--papel);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
.tarjeta-faq .tirador{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-24);background:none;border:0;padding:var(--s-24);cursor:pointer;
  text-align:left;font-family:var(--display);font-size:var(--t-body-lg);color:inherit}
.mas{width:16px;height:16px;flex:none;position:relative}
.mas::before,.mas::after{content:"";position:absolute;background:var(--dado)}
.mas::before{left:0;right:0;top:7px;height:2px}
.mas::after{top:0;bottom:0;left:7px;width:2px;transition:transform var(--d-hover) var(--e)}
.tirador[aria-expanded="true"] .mas::after{transform:scaleY(0)}
.cuerpo-faq{max-height:0;overflow:hidden;transition:max-height var(--d-hover) var(--e)}
.cuerpo-faq.abierto{max-height:420px}
.cuerpo-faq:not(.abierto) .dentro{visibility:hidden}
.dentro{padding:0 var(--s-24) var(--s-24);font-size:var(--t-body);line-height:1.5;max-width:70ch}

/* ═══ Acción, aviso y divulgación ════════════════════════════════════ */
.cta{display:inline-flex;align-items:center;gap:var(--s-12);background:var(--dado);
  color:var(--papel);border:var(--grosor) solid var(--noche);box-shadow:4px 4px 0 var(--noche);
  padding:14px 26px;font-family:var(--display);font-size:var(--t-body-lg);
  text-decoration:none;transition:transform var(--d-hover) var(--e)}
.cta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--noche)}
.cta.papel{background:var(--papel);color:var(--noche)}
.chevron{display:inline-block;width:8px;height:8px;flex:none;
  border-right:3px solid currentColor;border-top:3px solid currentColor;transform:rotate(45deg)}
.aviso{font-size:var(--t-caption);letter-spacing:.08em;text-transform:uppercase;
  color:var(--noche-72)}
.tinta .aviso,.inserto .aviso{color:var(--carton)}
.divulgacion{margin-top:var(--s-24);font-size:var(--t-body-sm);line-height:1.42;
  color:var(--noche-72);max-width:78ch}
.tinta .divulgacion{color:var(--carton)}
.enlace{color:inherit;text-decoration:underline;text-decoration-color:var(--dado);
  text-underline-offset:3px}

/* ═══ BLOQUE 23.0 — Plegado de la caja / pie ═════════════════════════ */
.pie-sitio{background:var(--noche);color:var(--papel);padding-block:var(--s-80)}
.pie-cols{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-52)}
@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-sm);line-height:1.1}
.pie-nota{margin-top:var(--s-12);font-size:var(--t-body-sm);line-height:1.42;color:var(--carton)}
.pie-sitio nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-12) var(--s-24)}
.pie-sitio nav a{font-size:var(--t-body-sm);color:var(--carton);text-decoration:none;
  transition:color var(--d-hover) var(--e)}
.pie-sitio nav a:hover{color:var(--papel)}
.legal{margin-top:var(--s-24);font-size:var(--t-caption);line-height:1.6;
  color:rgba(251,246,234,.66);max-width:96ch}