/* Juego "Brigada Tapa Baches": tarjeta de la portada y de /baches (.in-juego) y los personajes que cruzan la pantalla (.jp-*).
   Lo anima js/juego-promo.js (lo arma juego-fuente/armar-juego.py). El juego está en /juego. */
.in-juego-sec { padding: clamp(.2rem, 1vw, .6rem) 0 clamp(.6rem, 1.5vw, 1rem); background: #FFFFFF; scroll-margin-top: 7rem; }
.in-juego-sec .wrap { max-width: 68rem; }
.bc .in-juego-sec { background: transparent; padding: clamp(1.2rem, 3vw, 2rem) 0; }
.in-juego { display: grid; grid-template-columns: minmax(0, 20rem) 1fr auto; align-items: center; gap: .8rem 1.2rem;
  padding: .8rem 1.3rem .8rem .8rem; border: 2px solid #EC8300; border-radius: 18px; background: #17142f; color: #FFFFFF;
  text-decoration: none; box-shadow: 0 16px 32px -20px rgba(16,32,61,.8); transition: transform .2s ease; }
.in-juego:hover, .in-juego:focus-visible { transform: translateY(-3px); color: #FFFFFF; }
.in-juego:focus-visible { outline: 3px solid #EC8300; outline-offset: 2px; }
.in-juego-escena { display: block; width: 100%; height: auto; aspect-ratio: 160 / 64; border-radius: 10px; background: #0d0b1e; image-rendering: pixelated; }
.in-juego-txt { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; line-height: 1.35; color: #D9D6EC; }
.in-juego-txt b { font-size: 1.15rem; color: #FFFFFF; }
.in-juego-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FFC857; }
.in-juego em { font-style: normal; font-weight: 800; font-size: .95rem; padding: .6rem 1.1rem; background: #EC8300; color: #2a1600;
  border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 0 #8a4c00; animation: jpLatido 1.6s ease-in-out infinite; }
@keyframes jpLatido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (max-width: 760px) {
  .in-juego { grid-template-columns: 1fr; padding: .8rem; gap: .7rem; }
  .in-juego em { text-align: center; }
}

/* Miguel y el Jefe malo cruzan la pantalla, perseguidos por la Aplanadora (una vez por visita) */
/* corren por arriba de los botones flotantes de abajo ("¿Qué necesitás?" y la flecha), no detrás */
.jp-paseo { position: fixed; left: 0; bottom: calc(4.4rem + env(safe-area-inset-bottom)); z-index: 39; pointer-events: none; image-rendering: pixelated; }
.jp-tocar { position: fixed; bottom: calc(4.4rem + env(safe-area-inset-bottom)); z-index: 39; display: block; }
.jp-burbuja { position: fixed; left: 50%; bottom: 4.6rem; z-index: 46; transform: translateX(-50%); width: min(22rem, calc(100vw - 1.8rem));
  display: flex; align-items: center; gap: .5rem; padding: .7rem; background: #17142f; color: #FFFFFF; border: 2px solid #EC8300;
  border-radius: 16px; box-shadow: 0 16px 32px -14px rgba(0,0,0,.6); animation: jpEntra .35s ease-out; }
.jp-burbuja.jp-alto { bottom: 12.5rem; }
.jp-burbuja a { flex: 1; display: flex; align-items: center; gap: .7rem; color: #FFFFFF; text-decoration: none; font-size: .88rem; line-height: 1.35; }
.jp-burbuja canvas { flex: none; width: 40px; height: 66px; image-rendering: pixelated; }
.jp-burbuja b { display: block; color: #FFC857; font-size: .95rem; }
.jp-burbuja .jp-ir { display: inline-block; margin-top: .35rem; padding: .3rem .8rem; border-radius: 999px; background: #EC8300; color: #2a1600; font-weight: 800; }
.jp-cerrar { flex: none; align-self: flex-start; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.12);
  color: #FFFFFF; font-size: 1.1rem; line-height: 1; cursor: pointer; }
@keyframes jpEntra { from { opacity: 0; transform: translate(-50%, 1rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .in-juego, .in-juego em, .jp-burbuja { animation: none; transition: none; } }