/* ══════════════════════════════════════════════════════════════════════
   Vistas previas animadas de los minijuegos. Solo HTML y CSS: cada una
   reproduce en pequeño lo que se ve jugando, en bucle (12 s el quiz y el
   crucigrama; 16,5 s el dogma central, que cuenta sus tres etapas).
   Se usan en dos sitios y a dos tamaños: la tarjeta destacada del index
   (.gp--hero, cuadrada) y las tarjetas del catálogo de /minijuegos
   (banner ancho). El markup vive en el index (estático) y en
   js/minijuego-previews.js (catálogo): los dos salen de
   generate_dogma_preview.py, que también escribe el bloque del dogma de aquí
   abajo. Ese mismo JS sortea en cada carga los nucleótidos del dogma.
   ══════════════════════════════════════════════════════════════════════ */
.gp{
  /* Tope de ancho: en la tarjeta del catálogo (~212 px) manda el 100%, pero
     en /videos/<id> la tarjeta ocupa toda la columna y sin esto la previa se
     estiraba a 800 px de ancho por 106 de alto. */
  max-width:360px;
  --pA:#1A8070; --pT:#C05060; --pG:#2A6A8A; --pC:#7040A8; --pU:#B07010;
  --qz-ok:var(--bs-life-1); --qz-bad:var(--bs-life-0); --qz-idle:var(--bs-surface-1);
  --cw-cell:var(--bs-surface-1); --cw-hl:color-mix(in srgb,var(--bs-life-2) 30%,var(--bs-surface-1));
  --cw-ok:color-mix(in srgb,var(--bs-life-1) 34%,var(--bs-surface-1));
  position:relative; width:100%; height:106px; overflow:hidden;
  border:1px solid var(--bs-border); border-radius:14px;
  background:var(--bs-page-bg);
}
.gp--hero{flex:0 0 auto; width:clamp(148px,20vw,186px); max-width:none; height:auto; aspect-ratio:1; border-radius:16px}
.gp-scene{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; padding:8px}

/* ── Dogma central: las tres etapas del juego y la proteína ──
   Escenas de 16.5 s en total: replicación (0–4 s), transcripción (4–8 s),
   traducción con la rueda del código (8–14 s) y la proteína terminada.
   En las dos primeras el jugador se equivoca una vez con la base señuelo de
   esa etapa; la tarjeta acusa el golpe como el screenHit del juego.
   Los nucleótidos que se ven aquí son los de reserva (sin JS): el sorteo
   coherente lo hace el cliente en js/minijuego-previews.js.
   Bloque generado por generate_dogma_preview.py: no tocar a mano. */
.gp-dogma{--z1x:0; --z1y:-85.19px; --z2x:-85.19px; --z2y:0}
.dgp-sc{--o:0s}
.dgp-tra{--o:4s}
.dgp-row{display:flex; gap:3px; position:relative}
.dgp-row i{--sz:16px; width:var(--sz); height:var(--sz); border-radius:4px;
  display:grid; place-items:center; font-family:'JetBrains Mono',monospace;
  font-weight:700; font-size:9px; font-style:normal; color:#EBF2F0}
.gp--hero .dgp-row i{--sz:18px; font-size:10px}
.gp--hero .dgp-keys{--sz:18px}
.gp--hero .dgp-keys b{font-size:10px}
.gp-dogma [data-b="A"]{background:var(--pA)} .gp-dogma [data-b="T"]{background:var(--pT)}
.gp-dogma [data-b="G"]{background:var(--pG)} .gp-dogma [data-b="C"]{background:var(--pC)}
.gp-dogma [data-b="U"]{background:var(--pU)}
.dgp-new i{opacity:0; animation:dgp-fill 16.5s linear calc(var(--d) + var(--o)) infinite}
.dgp-bonds{height:5px}
.dgp-bonds s{width:16px; height:5px; text-decoration:none; opacity:0;
  border-left:2px dotted var(--bs-text-2); margin-left:7px;
  animation:dgp-bond 16.5s linear calc(var(--d) + var(--o)) infinite}
.gp--hero .dgp-bonds s{width:18px; margin-left:8px}
.dgp-enz{--w:19px; position:absolute; top:-13px; left:1px; width:14px; height:11px;
  border-radius:50% 58% 44% 62%/60% 44% 56% 44%; background:var(--bs-primary);
  box-shadow:0 0 9px -1px var(--bs-primary)}
.gp--hero .dgp-enz{--w:21px}
/* La ARN polimerasa lleva el color del ARN del juego: la segunda pasada no la
   hace la misma enzima. */
.dgp-tra .dgp-enz{background:var(--bs-life-3); box-shadow:0 0 9px -1px var(--bs-life-3)}
.dgp-keys{--sz:16px; display:flex; gap:4px; margin-top:4px}
.dgp-keys b{width:var(--sz); height:var(--sz); border-radius:5px; display:grid;
  place-items:center; font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:8px; color:#EBF2F0}
.dgp-rep{animation:dgp-scene-a 16.5s linear infinite}
.dgp-tra{animation:dgp-scene-b 16.5s linear infinite}
.dgp-wheel{padding-bottom:16px; animation:dgp-scene-c 16.5s linear infinite}
.dgp-prot{animation:dgp-scene-d 16.5s linear infinite}
/* Cada etapa lleva su fallo con la base señuelo que el juego castiga: en la
   replicación se pulsa U (el ADN no tiene uracilo) y en la transcripción T
   (en el ARNm va U). La tecla se sacude en rojo y se retoma la cadencia. */
.dgp-keys{position:relative; --kw:calc(var(--sz) + 4px)}
.dgp-pk{position:absolute; top:0; left:calc(var(--kw) * var(--x)); width:var(--sz);
  height:var(--sz); border-radius:5px; opacity:0; pointer-events:none;
  background:rgba(255,255,255,.22); box-shadow:0 0 0 2px var(--bs-text-0);
  animation-duration:16.5s; animation-timing-function:linear;
  animation-iteration-count:infinite; animation-delay:var(--o)}
.dgp-rep .p1{animation-name:dgp-pa1}
.dgp-rep .p2{animation-name:dgp-pa2}
.dgp-rep .p3{animation-name:dgp-pa3}
.dgp-rep .p4{animation-name:dgp-pa4}
.dgp-rep .p5{animation-name:dgp-pa5}
.dgp-rep .p6{animation-name:dgp-pa6}
.dgp-rep .px{animation-name:dgp-pax}
.dgp-rep .dgp-enz{animation:dgp-enz-a 16.5s linear infinite}
.dgp-tra .p1{animation-name:dgp-pb1}
.dgp-tra .p2{animation-name:dgp-pb2}
.dgp-tra .p3{animation-name:dgp-pb3}
.dgp-tra .p4{animation-name:dgp-pb4}
.dgp-tra .p5{animation-name:dgp-pb5}
.dgp-tra .p6{animation-name:dgp-pb6}
.dgp-tra .px{animation-name:dgp-pbx}
.dgp-tra .dgp-enz{animation:dgp-enz-b 16.5s linear var(--o) infinite}
/* Late en la costura del bucle, con la tarjeta en negro: es la señal que
   usa el cliente para sortear otros nucleótidos sin que se vea el cambio. */
.dgp-tick{position:absolute; width:0; height:0; opacity:0; pointer-events:none;
  animation:dgp-tick 16.5s linear 16.22s infinite}
/* El golpe de fidelidad: la tarjeta parpadea en rojo, como el screenHit del
   juego cuando la base no encaja. */
.dgp-hit{position:absolute; inset:0; border-radius:14px; pointer-events:none; opacity:0;
  box-shadow:inset 0 0 20px -4px var(--bs-life-0), inset 0 0 0 1.5px var(--bs-life-0);
  animation:dgp-hit 16.5s linear infinite}
.gp--hero .dgp-hit{border-radius:16px}
/* Etapa 1/2/3, los mismos tres segmentos que el HUD del juego. */
.dgp-prog{position:absolute; left:50%; bottom:7px; transform:translateX(-50%);
  display:flex; gap:3px; width:46%; max-width:104px}
.dgp-prog i{position:relative; flex:1; height:3px; border-radius:99px;
  background:var(--bs-surface-1); overflow:hidden}
.dgp-prog i::after{content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  border-radius:99px; background:var(--bs-primary)}
.dgp-prog i:nth-child(1)::after{animation:dgp-seg1 16.5s linear infinite}
.dgp-prog i:nth-child(2)::after{animation:dgp-seg2 16.5s linear 4s infinite}
.dgp-prog i:nth-child(3)::after{animation:dgp-seg3 16.5s linear 8s infinite}
/* La rueda del código, con los cuatro anillos del juego: 1ª base, 2ª, 3ª y
   aminoácido. Los anillos 2 y 3 son circunferencias punteadas con
   pathLength=360, así el patrón se mide en grados. La cámara se acerca al
   cuadrante de la 1ª base y luego gira al del segundo codón. */
.dgp-wsvg{width:auto; height:96%; display:block}
.dgp-wsvg text{font-family:Outfit,sans-serif; font-weight:700; fill:#EBF2F0;
  text-anchor:middle; dominant-baseline:central}
.dgp-wsvg .l3{font-family:'JetBrains Mono',monospace; opacity:.85}
.dgp-wsvg .rg{fill:none}
.dgp-wsvg .band{fill:none; stroke:var(--bs-surface-1)}
.dgp-wsvg .bandsep{fill:none; stroke:var(--bs-page-bg); opacity:.7}
.dgp-wsvg .hub{fill:var(--bs-surface-1); stroke:var(--bs-border); stroke-width:.5}
.dgp-wsvg .hubt{font-family:'JetBrains Mono',monospace; fill:var(--bs-text-0)}
.dgp-wsvg .fl{opacity:0; stroke:var(--bs-text-0); stroke-width:.8;
  filter:brightness(1.45)}
.dgp-wsvg .slice{opacity:0; fill:var(--bs-primary); stroke:var(--bs-text-0); stroke-width:.4}
.dgp-wsvg .slice.start{fill:var(--bs-life-1)}
.dgp-wsvg .slice.stop{fill:var(--bs-life-0)}
.dgp-zoom{transform-box:view-box; transform-origin:0 0;
  animation:dgp-zoom 16.5s linear infinite}
.dgp-wsvg .f1a{animation:dgp-f1a 16.5s linear infinite}
.dgp-wsvg .f1b{animation:dgp-f1b 16.5s linear infinite}
.dgp-wsvg .f1c{animation:dgp-f1c 16.5s linear infinite}
.dgp-wsvg .s1{animation:dgp-s1 16.5s linear infinite}
.dgp-wsvg .f2a{animation:dgp-f2a 16.5s linear infinite}
.dgp-wsvg .f2b{animation:dgp-f2b 16.5s linear infinite}
.dgp-wsvg .f2c{animation:dgp-f2c 16.5s linear infinite}
.dgp-wsvg .s2{animation:dgp-s2 16.5s linear infinite}
/* HUD de la traducción: el codón que lee el ribosoma y el aminoácido que
   coloca. Va en la esquina que la rueda deja libre; en formato banner se
   pega a ella en vez de irse al borde. */
.dgp-hud{position:absolute; top:6px; left:max(6px,calc(50% - 78px));
  display:flex; align-items:center; gap:4px}
.dgp-stack{display:grid}
.dgp-stack > *{grid-area:1/1}
.dgp-arrow{font-family:Outfit,sans-serif; font-style:normal; font-size:9px;
  line-height:1; color:var(--bs-text-2)}
.dgp-cod{display:flex; gap:2px; opacity:0}
.dgp-cod i{width:11px; height:11px; border-radius:3px; display:grid; place-items:center;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:7px;
  font-style:normal; color:#EBF2F0; opacity:.45}
.gp--hero .dgp-cod i{width:12px; height:12px; font-size:7.5px}
.dgp-bead{opacity:0; padding:2px 6px; border-radius:99px; font-family:Outfit,sans-serif;
  font-weight:600; font-size:7.5px; line-height:1.35; white-space:nowrap;
  color:var(--bs-btn-primary-fg,#040D14);
  background:linear-gradient(135deg,var(--bs-life-1),var(--bs-primary))}
.dgp-bead.stop{background:linear-gradient(135deg,var(--bs-life-0),#8D63D4);
  color:var(--bs-text-0)}
.dgp-cod.c1{animation:dgp-chip1 16.5s linear infinite}
.dgp-cod.c1 i:nth-child(1){animation:dgp-cl11 16.5s linear infinite}
.dgp-cod.c1 i:nth-child(2){animation:dgp-cl12 16.5s linear infinite}
.dgp-cod.c1 i:nth-child(3){animation:dgp-cl13 16.5s linear infinite}
.dgp-bead.b1{animation:dgp-bead1 16.5s linear infinite}
.dgp-cod.c2{animation:dgp-chip2 16.5s linear infinite}
.dgp-cod.c2 i:nth-child(1){animation:dgp-cl21 16.5s linear infinite}
.dgp-cod.c2 i:nth-child(2){animation:dgp-cl22 16.5s linear infinite}
.dgp-cod.c2 i:nth-child(3){animation:dgp-cl23 16.5s linear infinite}
.dgp-bead.b2{animation:dgp-bead2 16.5s linear infinite}
/* Y la proteína que sale de todo esto: la cadena se monta cuenta a cuenta,
   con el paro al final, igual que la fila de aminoácidos del juego. */
.dgp-prot{padding:10px 12px 20px}
.dgp-chain{display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:4px 6px}
.dgp-chain b{position:relative; opacity:0; padding:2px 5px; border-radius:99px;
  font-family:Outfit,sans-serif; font-weight:600; font-size:7px; line-height:1.4;
  color:var(--bs-btn-primary-fg,#040D14);
  background:linear-gradient(135deg,var(--bs-life-1),var(--bs-primary));
  animation:dgp-pop 16.5s linear var(--d) infinite}
.gp--hero .dgp-chain b{font-size:7.5px}
.dgp-chain b.stop{background:linear-gradient(135deg,var(--bs-life-0),#8D63D4);
  color:var(--bs-text-0)}
.dgp-chain b:not(:last-child)::after{content:''; position:absolute; left:100%; top:50%;
  width:6px; height:2px; margin-top:-1px; background:var(--bs-border)}

@keyframes dgp-scene-a{0%{opacity:1}22.424%{opacity:1}25.455%{opacity:0}98.485%{opacity:0}100%{opacity:1}}
@keyframes dgp-scene-b{0%,22.424%{opacity:0}25.455%{opacity:1}46.97%{opacity:1}49.091%{opacity:0}100%{opacity:0}}
@keyframes dgp-scene-c{0%,47.576%{opacity:0}49.697%{opacity:1}84.545%{opacity:1}86.97%{opacity:0}100%{opacity:0}}
@keyframes dgp-scene-d{0%,85.152%{opacity:0}87.576%{opacity:1}96.364%{opacity:1}98.182%{opacity:0}100%{opacity:0}}
@keyframes dgp-fill{0%,0.303%{opacity:0;transform:scale(.35)}1.03%{opacity:1;transform:scale(1.14)}1.758%,29.091%{opacity:1;transform:scale(1)}29.818%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-bond{0%,0.303%{opacity:0}1.333%,29.091%{opacity:.5}29.818%,100%{opacity:0}}
@keyframes dgp-pa1{0%,1.091%{opacity:0;transform:scale(1)}1.455%{opacity:1;transform:scale(.86)}2.909%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pa2{0%,4.121%{opacity:0;transform:scale(1)}4.485%{opacity:1;transform:scale(.86)}5.939%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pa3{0%,7.152%{opacity:0;transform:scale(1)}7.515%{opacity:1;transform:scale(.86)}8.97%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pa4{0%,12.727%{opacity:0;transform:scale(1)}13.091%{opacity:1;transform:scale(.86)}14.545%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pa5{0%,15.636%{opacity:0;transform:scale(1)}16%{opacity:1;transform:scale(.86)}17.455%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pa6{0%,18.545%{opacity:0;transform:scale(1)}18.909%{opacity:1;transform:scale(.86)}20.364%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pax{0%,10.182%{opacity:0;transform:translateX(0) scale(1);box-shadow:0 0 0 2px var(--bs-text-0)}10.242%{opacity:1;transform:translateX(0px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}10.667%{opacity:1;transform:translateX(-4px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}11.152%{opacity:1;transform:translateX(4px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}11.636%{opacity:1;transform:translateX(-3px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}12.121%{opacity:1;transform:translateX(3px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}12.606%{opacity:1;transform:translateX(0px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}13.091%,100%{opacity:0;transform:translateX(0) scale(1);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}}
@keyframes dgp-enz-a{0%,2.848%{transform:translateX(0)}3.939%{transform:translateX(calc(var(--w) * 1))}5.879%{transform:translateX(calc(var(--w) * 1))}6.97%{transform:translateX(calc(var(--w) * 2))}8.909%{transform:translateX(calc(var(--w) * 2))}10%{transform:translateX(calc(var(--w) * 3))}14.485%{transform:translateX(calc(var(--w) * 3))}15.576%{transform:translateX(calc(var(--w) * 4))}17.394%{transform:translateX(calc(var(--w) * 4))}18.485%{transform:translateX(calc(var(--w) * 5))}25.455%{transform:translateX(calc(var(--w) * 5))}25.758%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes dgp-pb1{0%,1.091%{opacity:0;transform:scale(1)}1.455%{opacity:1;transform:scale(.86)}2.909%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pb2{0%,6.364%{opacity:0;transform:scale(1)}6.727%{opacity:1;transform:scale(.86)}8.182%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pb3{0%,9.273%{opacity:0;transform:scale(1)}9.636%{opacity:1;transform:scale(.86)}11.091%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pb4{0%,12.182%{opacity:0;transform:scale(1)}12.545%{opacity:1;transform:scale(.86)}14%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pb5{0%,15.091%{opacity:0;transform:scale(1)}15.455%{opacity:1;transform:scale(.86)}16.909%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pb6{0%,18%{opacity:0;transform:scale(1)}18.364%{opacity:1;transform:scale(.86)}19.818%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-pbx{0%,3.758%{opacity:0;transform:translateX(0) scale(1);box-shadow:0 0 0 2px var(--bs-text-0)}3.818%{opacity:1;transform:translateX(0px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}4.242%{opacity:1;transform:translateX(-4px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}4.727%{opacity:1;transform:translateX(4px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}5.212%{opacity:1;transform:translateX(-3px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}5.697%{opacity:1;transform:translateX(3px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}6.182%{opacity:1;transform:translateX(0px) scale(1.06);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}6.667%,100%{opacity:0;transform:translateX(0) scale(1);box-shadow:0 0 0 2px var(--bs-life-0),0 0 12px -2px var(--bs-life-0)}}
@keyframes dgp-enz-b{0%,2.848%{transform:translateX(0)}3.939%{transform:translateX(calc(var(--w) * 1))}8.121%{transform:translateX(calc(var(--w) * 1))}9.212%{transform:translateX(calc(var(--w) * 2))}11.03%{transform:translateX(calc(var(--w) * 2))}12.121%{transform:translateX(calc(var(--w) * 3))}13.939%{transform:translateX(calc(var(--w) * 3))}15.03%{transform:translateX(calc(var(--w) * 4))}16.848%{transform:translateX(calc(var(--w) * 4))}17.939%{transform:translateX(calc(var(--w) * 5))}25.455%{transform:translateX(calc(var(--w) * 5))}25.758%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes dgp-hit{0%{opacity:0}10.182%{opacity:0}10.545%{opacity:1}12.727%{opacity:0}28%{opacity:0}28.364%{opacity:1}30.545%{opacity:0}100%{opacity:0}}
@keyframes dgp-tick{0%,100%{opacity:0}}
@keyframes dgp-seg1{0%,2.424%{width:0}19.879%{width:100%}100%{width:100%}}
@keyframes dgp-seg2{0%,2.424%{width:0}19.333%{width:100%}75.758%{width:100%}76.061%,100%{width:0}}
@keyframes dgp-seg3{0%,3.636%{width:0}32.121%{width:100%}51.515%{width:100%}51.818%,100%{width:0}}
@keyframes dgp-zoom{0%,53.333%{transform:none;animation-timing-function:cubic-bezier(.3,1,.5,1)}56.667%{transform:translate(var(--z1x),var(--z1y)) scale(1.8519)}68.485%{transform:translate(var(--z1x),var(--z1y)) scale(1.8519);animation-timing-function:cubic-bezier(.3,1,.5,1)}72.727%{transform:translate(var(--z2x),var(--z2y)) scale(1.8519)}82.424%{transform:translate(var(--z2x),var(--z2y)) scale(1.8519);animation-timing-function:cubic-bezier(.3,1,.5,1)}85.152%{transform:none}100%{transform:none}}
@keyframes dgp-f1a{0%,57.576%{opacity:0}58.303%{opacity:1}68.485%{opacity:1}69.697%{opacity:0}100%{opacity:0}}
@keyframes dgp-f1b{0%,60%{opacity:0}60.727%{opacity:1}68.485%{opacity:1}69.697%{opacity:0}100%{opacity:0}}
@keyframes dgp-f1c{0%,62.424%{opacity:0}63.152%{opacity:1}68.485%{opacity:1}69.697%{opacity:0}100%{opacity:0}}
@keyframes dgp-s1{0%,64.848%{opacity:0}65.576%{opacity:1}100%{opacity:1}}
@keyframes dgp-f2a{0%,73.636%{opacity:0}74.364%{opacity:1}100%{opacity:1}}
@keyframes dgp-f2b{0%,76.061%{opacity:0}76.788%{opacity:1}100%{opacity:1}}
@keyframes dgp-f2c{0%,78.485%{opacity:0}79.212%{opacity:1}100%{opacity:1}}
@keyframes dgp-s2{0%,80.606%{opacity:0}81.333%{opacity:1}100%{opacity:1}}
@keyframes dgp-chip1{0%,50.909%{opacity:0}52.424%{opacity:1}68.788%{opacity:1}70%{opacity:0}100%{opacity:0}}
@keyframes dgp-cl11{0%,57.576%{opacity:.45;transform:scale(1);box-shadow:none}58.182%{opacity:1;transform:scale(1.2);box-shadow:0 0 0 1.5px var(--bs-text-0)}59.394%,100%{opacity:1;transform:scale(1);box-shadow:none}}
@keyframes dgp-cl12{0%,60%{opacity:.45;transform:scale(1);box-shadow:none}60.606%{opacity:1;transform:scale(1.2);box-shadow:0 0 0 1.5px var(--bs-text-0)}61.818%,100%{opacity:1;transform:scale(1);box-shadow:none}}
@keyframes dgp-cl13{0%,62.424%{opacity:.45;transform:scale(1);box-shadow:none}63.03%{opacity:1;transform:scale(1.2);box-shadow:0 0 0 1.5px var(--bs-text-0)}64.242%,100%{opacity:1;transform:scale(1);box-shadow:none}}
@keyframes dgp-bead1{0%,64.848%{opacity:0;transform:scale(.5)}65.939%{opacity:1;transform:scale(1.12)}66.788%{opacity:1;transform:scale(1)}68.788%{opacity:1;transform:scale(1)}70.303%,100%{opacity:0;transform:scale(1)}}
@keyframes dgp-chip2{0%,70.606%{opacity:0}72.121%{opacity:1}100%{opacity:1}}
@keyframes dgp-cl21{0%,73.636%{opacity:.45;transform:scale(1);box-shadow:none}74.242%{opacity:1;transform:scale(1.2);box-shadow:0 0 0 1.5px var(--bs-text-0)}75.455%,100%{opacity:1;transform:scale(1);box-shadow:none}}
@keyframes dgp-cl22{0%,76.061%{opacity:.45;transform:scale(1);box-shadow:none}76.667%{opacity:1;transform:scale(1.2);box-shadow:0 0 0 1.5px var(--bs-text-0)}77.879%,100%{opacity:1;transform:scale(1);box-shadow:none}}
@keyframes dgp-cl23{0%,78.485%{opacity:.45;transform:scale(1);box-shadow:none}79.091%{opacity:1;transform:scale(1.2);box-shadow:0 0 0 1.5px var(--bs-text-0)}80.303%,100%{opacity:1;transform:scale(1);box-shadow:none}}
@keyframes dgp-bead2{0%,80.606%{opacity:0;transform:scale(.5)}81.697%{opacity:1;transform:scale(1.12)}82.545%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes dgp-pop{0%{opacity:0;transform:scale(.5)}1.091%{opacity:1;transform:scale(1.14)}1.939%,10.303%{opacity:1;transform:scale(1)}10.909%,100%{opacity:0;transform:scale(1)}}

/* ── Verdadero / Falso: se responde, se colorea y entra la siguiente ── */
.gp-quiz{display:flex; flex-direction:column; justify-content:center; gap:7px; padding:12px 14px}
.gp-quiz > *{width:100%; max-width:300px; margin-inline:auto}
.qzp-bar{height:4px; border-radius:99px; background:var(--bs-surface-1); overflow:hidden}
.qzp-bar i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--qz-ok),color-mix(in srgb,var(--qz-ok) 45%,var(--bs-page-bg))); animation:qzp-bar 12s linear infinite}
.qzp-card{display:flex; flex-direction:column; gap:4px; animation:qzp-card 12s linear infinite}
.qzp-card u{display:block; height:5px; width:var(--w); border-radius:99px;
  background:var(--bs-text-2); opacity:.5; text-decoration:none}
.qzp-opts{display:flex; gap:7px; margin-top:2px}
.qzp-opts b{flex:1; height:22px; border-radius:99px; display:grid; place-items:center;
  font-family:Outfit,sans-serif; font-weight:700; font-size:11px;
  border:1.5px solid var(--bs-border); background:var(--qz-idle); color:var(--bs-text-1)}
.qzp-v{animation:qzp-v 12s linear infinite}
.qzp-f{animation:qzp-f 12s linear infinite}

/* ── Crucigrama: se escribe la horizontal, se valida, y luego la vertical ── */
.gp-cross{display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 14px}
.cwp-grid{display:grid; grid-template-columns:repeat(3,18px); gap:2px; flex:none}
.cwp-grid i{position:relative; width:18px; height:18px; border-radius:3px;
  background:var(--cw-cell); border:1px solid var(--bs-border);
  display:grid; place-items:center; font-style:normal}
.cwp-grid i.void{background:transparent; border-color:transparent}
.cwp-grid em{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:9px;
  font-style:normal; color:transparent}
.cwp-grid sup{position:absolute; top:0; left:2px; font-size:5px; line-height:1;
  color:var(--bs-text-2); font-family:'JetBrains Mono',monospace}
.cwp-side{flex:0 1 150px; min-width:0; display:flex; flex-direction:column; gap:8px}
.cwp-clue{display:flex; flex-direction:column; gap:4px; animation:cwp-clue 12s linear infinite}
.cwp-clue u{display:block; height:5px; width:var(--w); border-radius:99px;
  background:var(--bs-text-2); opacity:.5; text-decoration:none}
.cwp-bar{height:4px; border-radius:99px; background:var(--bs-surface-1); overflow:hidden}
.cwp-bar i{display:block; height:100%; width:6%; border-radius:99px;
  background:linear-gradient(90deg,var(--bs-life-2),color-mix(in srgb,var(--bs-life-2) 45%,var(--bs-page-bg))); animation:cwp-bar 12s linear infinite}

/* ── La tarjeta de /videos/<id> ocupa toda la columna ──
   Ahí la previa en formato banner dejaba un hueco enorme a su derecha. Se
   dispone en dos columnas: la animación cuadrada a la izquierda y el texto
   al lado. Va con grid y no con flex para no tener que envolver el texto en
   un contenedor extra: la previa ocupa las tres filas de la primera columna
   y título, descripción y llamada caen en la segunda. */
.minijuego-card .game-card{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:center; column-gap:1.4rem; row-gap:.35rem;
}
.minijuego-card .game-card > .gp,
.minijuego-card .game-card > .game-card-emoji{
  grid-column:1; grid-row:1 / span 3; align-self:center;
  width:clamp(150px,24vw,196px); max-width:none; height:auto; aspect-ratio:1;
  border-radius:16px;
}
.minijuego-card .game-card > .game-card-emoji{display:grid; place-items:center}
.minijuego-card .game-card-title{grid-column:2; align-self:end}
.minijuego-card .game-card-desc{grid-column:2}
.minijuego-card .game-card-cta{grid-column:2; align-self:start; margin-top:0}
@media (max-width:600px){
  .minijuego-card .game-card{grid-template-columns:minmax(0,1fr)}
  .minijuego-card .game-card > .gp,
  .minijuego-card .game-card > .game-card-emoji{
    grid-column:1; grid-row:auto; width:100%; aspect-ratio:auto; height:106px}
  .minijuego-card .game-card-title,
  .minijuego-card .game-card-desc,
  .minijuego-card .game-card-cta{grid-column:1}
}

/* Sin animación: se congela un fotograma legible, no una tarjeta vacía. */
@media (prefers-reduced-motion:reduce){
  .gp *{animation:none!important}
  .gp *::after{animation:none!important}
  .dgp-rep{opacity:1} .dgp-tra,.dgp-wheel,.dgp-prot{opacity:0}
  .dgp-new i,.dgp-bonds s{opacity:1}
  .dgp-rep .dgp-enz{transform:translateX(calc(var(--w) * 5))}
  .dgp-prog i:nth-child(1)::after{width:100%}
  .qzp-bar i{width:66%} .cwp-bar i{width:48%}
  .cwp-grid em{color:var(--bs-text-0)}
}
.cwp-grid .c-A01{animation:cwp-cross 12s linear infinite}
.cwp-grid .c-T11{animation:cwp-T11 12s linear infinite}
.cwp-grid .c-P21{animation:cwp-P21 12s linear infinite}
.cwp-grid .c-N00{animation:cwp-N00 12s linear infinite}
.cwp-grid .c-D02{animation:cwp-D02 12s linear infinite}
.cwp-grid .c-H03{animation:cwp-H03 12s linear infinite}

@keyframes qzp-v{0%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}12.92%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}13.33%{transform:scale(.9);background:var(--qz-idle);color:var(--bs-text-0);border-color:var(--qz-ok)}15.83%{transform:scale(.9);background:var(--qz-idle);color:var(--bs-text-0);border-color:var(--qz-ok)}16.25%{transform:scale(1);background:var(--qz-ok);color:var(--bs-btn-primary-fg,#040D14);border-color:var(--qz-ok)}29.17%{transform:scale(1);background:var(--qz-ok);color:var(--bs-btn-primary-fg,#040D14);border-color:var(--qz-ok)}29.58%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}82.5%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}82.92%{transform:scale(1);background:var(--qz-ok);color:var(--bs-btn-primary-fg,#040D14);border-color:var(--qz-ok)}95.83%{transform:scale(1);background:var(--qz-ok);color:var(--bs-btn-primary-fg,#040D14);border-color:var(--qz-ok)}96.25%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}100%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}}
@keyframes qzp-f{0%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}46.25%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}46.67%{transform:scale(.9);background:var(--qz-idle);color:var(--bs-text-0);border-color:var(--qz-ok)}49.17%{transform:scale(.9);background:var(--qz-idle);color:var(--bs-text-0);border-color:var(--qz-ok)}49.58%{transform:scale(1);background:var(--qz-ok);color:var(--bs-btn-primary-fg,#040D14);border-color:var(--qz-ok)}62.5%{transform:scale(1);background:var(--qz-ok);color:var(--bs-btn-primary-fg,#040D14);border-color:var(--qz-ok)}62.92%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}79.58%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}80%{transform:scale(.9);background:var(--qz-idle);color:var(--qz-bad);border-color:var(--qz-bad)}82.5%{transform:scale(.9);background:var(--qz-idle);color:var(--qz-bad);border-color:var(--qz-bad)}82.92%{transform:scale(1);background:transparent;color:var(--qz-bad);border-color:var(--qz-bad)}95.83%{transform:scale(1);background:transparent;color:var(--qz-bad);border-color:var(--qz-bad)}96.25%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}100%{transform:scale(1);background:var(--qz-idle);color:var(--bs-text-1);border-color:var(--bs-border)}}
@keyframes qzp-card{0%{opacity:1;transform:translateX(0)}-2.92%{opacity:0;transform:translateX(10px)}0%{opacity:1;transform:translateX(0)}29.17%{opacity:1;transform:translateX(0)}30.42%{opacity:0;transform:translateX(10px)}33.33%{opacity:1;transform:translateX(0)}62.5%{opacity:1;transform:translateX(0)}63.75%{opacity:0;transform:translateX(10px)}66.67%{opacity:1;transform:translateX(0)}95.83%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(0)}}
@keyframes qzp-bar{0%{width:0}14.17%{width:0%}17.5%{width:33%}47.5%{width:33%}50.83%{width:66%}80.83%{width:66%}84.17%{width:100%}100%{width:100%}}
@keyframes cwp-A01{0%,6.25%{color:transparent;background:var(--cw-cell)}6.67%{color:var(--bs-text-0);background:var(--cw-hl)}25.42%{color:var(--bs-text-0);background:var(--cw-hl)}25.83%,100%{color:var(--bs-text-0);background:var(--cw-ok)}}
@keyframes cwp-T11{0%,12.08%{color:transparent;background:var(--cw-cell)}12.5%{color:var(--bs-text-0);background:var(--cw-hl)}25.42%{color:var(--bs-text-0);background:var(--cw-hl)}25.83%,100%{color:var(--bs-text-0);background:var(--cw-ok)}}
@keyframes cwp-P21{0%,17.92%{color:transparent;background:var(--cw-cell)}18.33%{color:var(--bs-text-0);background:var(--cw-hl)}25.42%{color:var(--bs-text-0);background:var(--cw-hl)}25.83%,100%{color:var(--bs-text-0);background:var(--cw-ok)}}
@keyframes cwp-N00{0%,37.92%{color:transparent;background:var(--cw-cell)}38.33%{color:var(--bs-text-0);background:var(--cw-hl)}57.08%{color:var(--bs-text-0);background:var(--cw-hl)}57.5%,100%{color:var(--bs-text-0);background:var(--cw-ok)}}
@keyframes cwp-D02{0%,43.75%{color:transparent;background:var(--cw-cell)}44.17%{color:var(--bs-text-0);background:var(--cw-hl)}57.08%{color:var(--bs-text-0);background:var(--cw-hl)}57.5%,100%{color:var(--bs-text-0);background:var(--cw-ok)}}
@keyframes cwp-H03{0%,49.58%{color:transparent;background:var(--cw-cell)}50%{color:var(--bs-text-0);background:var(--cw-hl)}57.08%{color:var(--bs-text-0);background:var(--cw-hl)}57.5%,100%{color:var(--bs-text-0);background:var(--cw-ok)}}
@keyframes cwp-cross{0%,6.25%{color:transparent;background:var(--cw-cell)}6.67%{color:var(--bs-text-0);background:var(--cw-hl)}25.42%{background:var(--cw-hl)}25.83%,37.5%{background:var(--cw-ok)}38.33%,57.08%{background:var(--cw-hl)}57.5%,100%{background:var(--cw-ok);color:var(--bs-text-0)}}
@keyframes cwp-bar{0%,5%{width:6%}25.83%,55%{width:48%}57.5%,100%{width:100%}}
@keyframes cwp-clue{0%{opacity:.5}25.83%{opacity:.5}28.33%{opacity:1}57.5%{opacity:1}100%{opacity:1}}