/* ------------------------------------------------------------------
   La baraja de tus derechos. Prefijo .bj-
   Cada carta mide 63 x 88 mm (tamano de naipe). En pantalla se ve igual
   que impresa. Al imprimir salen 9 por hoja, con linea de corte.
   ------------------------------------------------------------------ */

.bjhero{padding:44px 0 34px;background:var(--white);border-bottom:1px solid var(--line)}
.bjhero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:46px;align-items:center}
.bjhero h1{font-size:clamp(32px,4vw,54px);max-width:15ch}
.bjhero .lead{margin-top:14px;font-size:19px;max-width:48ch}
.bjhero .gnota{margin-top:18px;border-left:3px solid var(--brass);padding-left:14px;font-size:15px;color:var(--muted);max-width:48ch}
.bjhero .bj-abanico{display:flex;justify-content:center;align-items:center;min-height:250px}
.bjhero .bj-abanico .bj-c{margin:0 -54px;transform-origin:bottom center}
.bjhero .bj-abanico .bj-c:nth-child(1){transform:rotate(-13deg) translateY(10px) scale(.74)}
.bjhero .bj-abanico .bj-c:nth-child(2){transform:rotate(0deg) translateY(-6px) scale(.8);z-index:2}
.bjhero .bj-abanico .bj-c:nth-child(3){transform:rotate(13deg) translateY(10px) scale(.74)}

/* --------------------------- barra de modos --------------------------- */
.bj-modos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.bj-modos button{height:46px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--white);font-family:var(--sans);font-size:15.5px;font-weight:700;color:var(--muted);cursor:pointer}
.bj-modos button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* --------------------------- familias --------------------------- */
.bj-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.bj-chips button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--white);font-family:var(--sans);font-size:14.5px;font-weight:600;
  color:var(--ink);cursor:pointer}
.bj-chips button i{width:11px;height:11px;border-radius:3px;display:block;flex:none}
.bj-chips button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

.bj-acc{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 26px}
.bj-acc .btn{height:48px}
.bj-acc .bj-cuenta{font-size:15px;color:var(--muted);margin-left:auto}
.bj-acc .bj-cuenta b{color:var(--ink)}

/* --------------------------- la carta --------------------------- */
.bj-rejilla{display:flex;flex-wrap:wrap;gap:24px}
.bj-pieza{position:relative}
.bj-pieza .bj-marca{position:absolute;top:9px;right:9px;z-index:4;width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.28);color:#fff;cursor:pointer;
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.bj-pieza[data-sel="1"] .bj-marca{background:var(--green);border-color:#fff}
.bj-pieza[data-sel="0"] .bj-c{opacity:.4;filter:grayscale(.55)}
.bj-pieza .bj-c.claro ~ .bj-marca,
.bj-pieza[data-claro="1"] .bj-marca{border-color:rgba(0,0,0,.3);background:rgba(0,0,0,.14)}

.bj-c{
  width:236px;height:330px;flex:none;font-size:10.2px;
  border-radius:11px;padding:15px 14px;position:relative;overflow:hidden;
  color:#fff;background:linear-gradient(150deg,var(--f1) 0%,var(--f2) 100%);
  box-shadow:0 18px 34px -24px rgba(12,28,56,.85);
  display:flex;flex-direction:column;font-family:var(--sans);
}
.bj-c.claro .bj-top,.bj-c.claro .bj-der,.bj-c.claro .bj-sello{border-color:rgba(0,0,0,.2)}
.bj-c.claro{color:var(--ink);box-shadow:0 18px 34px -26px rgba(122,90,18,.7)}
.bj-c::after{content:"";position:absolute;right:-30px;bottom:-34px;width:118px;height:118px;border-radius:50%;
  border:1px solid currentColor;opacity:.13;pointer-events:none}

.bj-c .bj-top{display:flex;align-items:center;gap:.6em;padding-bottom:.55em;margin-bottom:.7em;
  border-bottom:1px solid rgba(255,255,255,.26)}
.bj-c .bj-top em{font-style:normal;font-size:.72em;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fa)}
.bj-c .bj-top span{margin-left:auto;font-size:.72em;font-weight:700;letter-spacing:.06em;opacity:.72}

.bj-c h3{font-family:var(--serif);font-size:1.58em;line-height:1.04;margin:0 0 .5em;color:var(--fa);
  letter-spacing:-.01em}
.bj-c .bj-q{margin:0;padding-left:1.15em;font-size:.95em;line-height:1.32}
.bj-c .bj-q li{margin-bottom:.42em}
.bj-c .bj-q li::marker{font-weight:700;color:var(--fa)}

.bj-c .bj-der{margin-top:auto;border-top:1px solid rgba(255,255,255,.26);padding-top:.6em;font-size:.9em;line-height:1.28}
.bj-c .bj-der b{display:block;font-size:.76em;letter-spacing:.1em;text-transform:uppercase;color:var(--fa);margin-bottom:.25em}
.bj-c .bj-pie{display:flex;gap:.6em;align-items:flex-end;margin-top:.55em;font-size:.76em;line-height:1.25;opacity:.8}
.bj-c .bj-pie strong{color:var(--fa);font-weight:700;opacity:1}
.bj-c .bj-pie span:last-child{margin-left:auto;text-align:right}

/* reverso comun */
.bj-c.rev{align-items:center;justify-content:center;text-align:center;gap:.7em}
.bj-c.rev img{width:54px;height:54px;opacity:.95}
.bj-c.rev b{font-family:var(--serif);font-size:1.5em;line-height:1.1;color:var(--fa)}
.bj-c.rev small{font-size:.82em;opacity:.78;max-width:22ch}

/* caras del memorama */
.bj-c.mini h3{font-size:1.72em;margin-bottom:.4em}
.bj-c.mini .bj-texto{font-size:1.02em;line-height:1.35}
.bj-c.mini .bj-sello{margin-top:auto;padding-top:.6em;border-top:1px solid rgba(255,255,255,.26);font-size:.74em;
  letter-spacing:.09em;text-transform:uppercase;opacity:.75}

/* --------------------------- el juego --------------------------- */
.bj-juego{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:start}
.bj-tablero{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.bj-tablero.ancho{grid-template-columns:repeat(5,minmax(0,1fr))}
.bj-ficha{aspect-ratio:3/4;perspective:900px;background:none;border:0;padding:0;cursor:pointer}
.bj-ficha .gira{position:relative;width:100%;height:100%;transition:transform .45s cubic-bezier(.3,.8,.3,1);
  transform-style:preserve-3d}
.bj-ficha[aria-pressed="true"] .gira,.bj-ficha.hecha .gira{transform:rotateY(180deg)}
.bj-ficha .cara{position:absolute;inset:0;backface-visibility:hidden;border-radius:9px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:11px 10px;text-align:left;
  font-family:var(--sans);box-shadow:0 10px 22px -16px rgba(12,28,56,.8)}
.bj-ficha .atras{background:linear-gradient(150deg,#0C1C38,#1D3B66);display:flex;align-items:center;justify-content:center}
.bj-ficha .atras img{width:40%;max-width:46px;opacity:.9}
.bj-ficha .frente{transform:rotateY(180deg);background:linear-gradient(150deg,var(--f1),var(--f2));color:#fff}
.bj-ficha .frente.claro{color:var(--ink)}
.bj-ficha .frente em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fa)}
.bj-ficha .frente b{font-family:var(--serif);font-size:15px;line-height:1.1;font-weight:600}
.bj-ficha .frente small{font-size:10.5px;line-height:1.3;opacity:.88}
.bj-ficha.hecha{opacity:.42}
.bj-ficha.falla .frente{animation:bjtiembla .4s}
@keyframes bjtiembla{0%,100%{transform:rotateY(180deg) translateX(0)}25%{transform:rotateY(180deg) translateX(-5px)}75%{transform:rotateY(180deg) translateX(5px)}}

.bj-marcador{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 18px;font-size:15px;color:var(--muted)}
.bj-marcador b{color:var(--ink);font-size:21px;font-family:var(--serif);display:block}
.bj-gana{background:var(--green-soft);border-left:4px solid var(--green);padding:18px 20px;border-radius:8px;
  margin-bottom:18px;font-size:16px;line-height:1.5}
.bj-gana b{display:block;font-family:var(--serif);font-size:21px;margin-bottom:4px}
.bj-sel{margin-bottom:16px}
.bj-sel label{display:block;font-size:14.5px;font-weight:600;margin-bottom:6px}
.bj-sel select{width:100%;height:46px;border:1px solid var(--line);border-radius:6px;background:var(--white);
  padding:0 12px;font-family:var(--sans);font-size:15.5px;color:var(--ink)}

.bj-nota{margin-top:26px;font-size:14.5px;color:var(--muted);line-height:1.6;max-width:66ch}
.bj-nota b{color:var(--ink)}

@media (max-width:1080px){
  .bjhero .wrap{grid-template-columns:1fr;gap:26px}
  .bjhero .bj-abanico{display:none}
  .bj-juego{grid-template-columns:1fr;gap:26px}
}
@media (max-width:520px){
  .bj-rejilla{justify-content:center}
  .bj-tablero{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .bj-tablero.ancho{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bj-ficha .frente b{font-size:13px}
  .bj-ficha .frente small{font-size:9.5px}
}

/* --------------------------- impresion --------------------------- */
#bj-print{display:none}
#bj-print .bj-hoja{display:flex;flex-wrap:wrap;align-content:flex-start}
#bj-print .bj-portada{font-family:var(--sans);padding:0 0 8mm}
#bj-print .bj-portada h2{font-family:var(--serif);font-size:22pt;margin-bottom:3mm}
#bj-print .bj-portada p{font-size:10pt;line-height:1.5;max-width:150mm;color:#333}

@media print{
  body.bj-imp > *{display:none!important}
  body.bj-imp > #bj-print{display:block!important}
  body.bj-imp{background:#fff}
  #bj-print .bj-c.rev img{width:15mm;height:15mm}
  #bj-print .bj-c{
    width:63mm;height:88mm;font-size:2.62mm;border-radius:2.4mm;padding:4mm 3.6mm;
    box-shadow:none;outline:.2mm dashed #B4B4B4;outline-offset:0;
    break-inside:avoid;page-break-inside:avoid;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  #bj-print .bj-hoja{gap:0}
  @page{margin:9mm}
}

/* --------------------------- las reglas --------------------------- */
.bj-reglas{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:34px 36px;margin-bottom:34px}
.bj-reglas-tit h2{font-size:clamp(26px,3vw,38px)}
.bj-reglas-tit p{margin-top:10px;font-size:17.5px;color:var(--muted);max-width:60ch;line-height:1.55}
.bj-pasos{counter-reset:bjp;list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.bj-pasos li{counter-increment:bjp;position:relative;padding:16px 16px 16px 50px;border-radius:10px;
  background:var(--green-soft);font-size:15.5px;line-height:1.45}
.bj-pasos li::before{content:counter(bjp);position:absolute;left:14px;top:14px;width:24px;height:24px;
  border-radius:50%;background:var(--green);color:#fff;font-weight:700;font-size:13.5px;
  display:flex;align-items:center;justify-content:center;font-family:var(--sans)}
.bj-pasos li b{display:block}
.bj-otras{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:24px;
  padding-top:24px;border-top:1px solid var(--line)}
.bj-otras div{font-size:15px;line-height:1.5;color:var(--muted)}
.bj-otras b{display:block;color:var(--ink);font-family:var(--serif);font-size:19px;margin-bottom:5px}
.bj-intro{font-size:17px;color:var(--muted);max-width:62ch;margin-bottom:20px;line-height:1.55}
.bj-juego .sub{margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.55}
.bj-juego h2{font-size:30px}
@media print{body.bj-imp .bj-reglas{display:none!important}}