/* ============================================================
   Página «Más juegos» (juegos-para-eventos-barcelona.html)
   ------------------------------------------------------------
   Se carga después de estilo.css y solo en esta página. Va
   aparte para no tocar la hoja común.

   La idea: la caseta de feria. Una marquesina de bombillas en
   la portada (lo único llamativo de la página), y cada juego es
   un billete con su talón troquelado. Al añadirlo al
   presupuesto el billete se sella.
   ============================================================ */

.mj {
  --bombilla: #ffd88a;
  --bombilla-tenue: rgba(255, 216, 138, .22);
  --sello: #e0533f;
  --fondo-seccion: var(--noche);
}

/* ---------- portada ---------- */
.mj-portada {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 6.4rem 0 3.4rem;
  background:
    radial-gradient(70% 60% at 85% 20%, rgba(122, 176, 242, .14), transparent 70%),
    radial-gradient(50% 50% at 10% 90%, rgba(255, 216, 138, .07), transparent 70%),
    var(--noche);
}
.mj-portada__fila { display: grid; gap: 2.8rem; align-items: center; }
.mj-portada .migas { margin-bottom: 1.8rem; }
.mj-portada .migas a { color: var(--hueso-tenue); }

/* La marquesina: el título dentro de un marco de bombillas que se van
   encendiendo por turnos, como el rótulo de una caseta. */
.mj-marquesina {
  position: relative; display: inline-block;
  padding: 1.6rem 1.7rem 1.3rem;
  margin: 0 0 1.6rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(23, 32, 51, .75), rgba(16, 23, 37, .6));
  box-shadow: inset 0 0 0 1px var(--bombilla-tenue), 0 0 60px rgba(255, 216, 138, .06);
}
.mj-bombillas,
.mj-bombillas::after {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 7px;
  background-image: radial-gradient(circle, var(--bombilla) 0 2.6px, transparent 3.4px);
  background-size: 22px 22px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.mj-bombillas { opacity: .45; }
.mj-bombillas::after {
  content: '';
  background-position: 11px 11px;
  filter: drop-shadow(0 0 4px var(--bombilla));
  animation: mj-parpadeo 1.6s steps(1, end) infinite;
}
@keyframes mj-parpadeo {
  0%   { opacity: 1; }
  50%  { opacity: .15; }
}
.mj-marquesina__ante {
  margin: 0 0 .5rem; font-size: .78rem; font-weight: 800; letter-spacing: .24em;
  text-transform: uppercase; color: var(--bombilla);
}
.mj-marquesina h1 { margin: 0; font-size: clamp(2.6rem, 10vw, 5rem); line-height: .98; }
.mj-marquesina h1 em { font-style: normal; display: block; color: var(--azul); }

.mj-portada__entrada { font-size: 1.12rem; color: var(--hueso-tenue); max-width: 46ch; margin-bottom: 1.8rem; }
.mj-portada__entrada strong { color: var(--hueso); }

.mj-indice { display: flex; flex-wrap: wrap; gap: .6rem; }
.mj-indice a {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem .6rem 1.1rem; border-radius: 999px;
  border: 1px solid rgba(233, 238, 247, .22); color: var(--hueso); text-decoration: none;
  font-weight: 700; transition: border-color var(--transicion), transform var(--transicion);
}
.mj-indice a:hover { border-color: var(--azul); transform: translateY(-2px); }
.mj-indice small {
  display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem; border-radius: 999px;
  background: var(--noche-3); color: var(--azul); font-weight: 800; font-size: .8rem;
}

/* Tres fotos clavadas en el tablón de la caseta, una por familia. */
.mj-mosaico { position: relative; height: 300px; }
.mj-mosaico__pieza {
  position: absolute; width: 62%; border-radius: 10px; overflow: hidden;
  border: 6px solid var(--hueso); box-shadow: var(--sombra);
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.mj-mosaico__pieza img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mj-mosaico__pieza--1 { left: 0; top: 10px; transform: rotate(-5deg); z-index: 1; }
.mj-mosaico__pieza--2 { right: 0; top: 0; transform: rotate(4deg); z-index: 2; }
.mj-mosaico__pieza--3 { left: 19%; bottom: 0; transform: rotate(-1.5deg); z-index: 3; }
.mj-mosaico:hover .mj-mosaico__pieza--1 { transform: rotate(-8deg) translate(-8px, -4px); }
.mj-mosaico:hover .mj-mosaico__pieza--2 { transform: rotate(7deg) translate(8px, -6px); }

/* ---------- familias ---------- */
.mj-familia { padding: 3.6rem 0; background: var(--fondo-seccion); overflow-x: clip; }
.mj-familia:nth-of-type(even) { --fondo-seccion: var(--noche-2); }
.mj-familia__cabeza { max-width: 60ch; margin-bottom: 2.2rem; }
.mj-familia__cabeza p:last-child { color: var(--hueso-tenue); margin: 0; }

.mj-billetes { display: grid; gap: 1.6rem; }

/* El billete: foto, texto y un talón separado por un troquel. Las dos
   muescas del troquel se pintan con el color del fondo de la sección. */
.mj-billete {
  position: relative; display: flex; flex-direction: column;
  background: var(--noche-3); border-radius: 16px;
  border: 1px solid rgba(122, 176, 242, .14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  scroll-margin-top: 140px;
}
.mj-billete:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: rgba(122, 176, 242, .3); }
.mj-billete__foto { position: relative; border-radius: 16px 16px 0 0; overflow: hidden; }
.mj-billete__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.mj-billete:hover .mj-billete__img { transform: scale(1.04); }
.mj-billete__etiqueta {
  position: absolute; left: .9rem; bottom: .9rem;
  background: rgba(10, 14, 22, .82); backdrop-filter: blur(6px);
  color: var(--hueso); font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  padding: .35rem .75rem; border-radius: 999px;
}
.mj-billete__cuerpo { padding: 1.4rem 1.4rem 1.2rem; flex: 1; }
.mj-billete__cuerpo h3 { margin-bottom: .4em; font-size: 1.55rem; }
.mj-billete__cuerpo > p { color: var(--hueso-tenue); font-size: .97rem; }
.mj-billete__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mj-billete__datos li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid rgba(233, 238, 247, .07); font-size: .9rem;
}
.mj-billete__datos li:last-child { border-bottom: 0; }
.mj-billete__datos span { color: var(--hueso-tenue); }
.mj-billete__datos b { text-align: right; font-weight: 700; }

.mj-billete__talon {
  position: relative; padding: 1.3rem 1.4rem 1.4rem;
  border-top: 2px dashed rgba(233, 238, 247, .18);
  display: grid; gap: 1rem;
}
.mj-billete__talon::before,
.mj-billete__talon::after {
  content: ''; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--fondo-seccion);
  box-shadow: inset 0 0 0 1px rgba(122, 176, 242, .14);
}
.mj-billete__talon::before { left: -13px; }
.mj-billete__talon::after { right: -13px; }
.mj-billete__precio { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; }
.mj-billete__precio b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--hueso); }
.mj-billete__precio span { font-weight: 700; color: var(--azul); }
.mj-billete__precio small { flex-basis: 100%; color: var(--hueso-tenue); font-size: .84rem; }
.mj-billete__acciones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mj-ficha { color: var(--hueso-tenue); font-weight: 700; font-size: .92rem; text-underline-offset: 3px; }
.mj-ficha:hover { color: var(--azul); }

/* El sello: aparece sobre la foto cuando el juego está en el presupuesto. */
.mj-billete::after {
  content: 'En tu presupuesto';
  position: absolute; top: 1.1rem; right: 1rem; z-index: 2;
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: .95rem;
  color: var(--sello); border: 3px solid var(--sello); border-radius: 8px; padding: .3rem .7rem;
  background: rgba(10, 14, 22, .72);
  transform: rotate(8deg) scale(1.6); opacity: 0;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease;
  pointer-events: none;
}
.mj-billete.esta-anadido::after { opacity: 1; transform: rotate(8deg) scale(1); }
.mj-billete.esta-anadido { border-color: rgba(224, 83, 63, .45); }

/* El botón de añadir: línea azul; pulsado, relleno. */
.mj-anadir {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.2rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--azul); background: transparent; color: var(--azul);
  font: inherit; font-weight: 800; font-size: .95rem; line-height: 1.1;
  transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}
.mj-anadir::before { content: '+'; font-family: 'Anton', sans-serif; font-size: 1.15rem; line-height: 1; }
.mj-anadir:hover { transform: translateY(-2px); background: rgba(122, 176, 242, .12); }
.mj-anadir[aria-pressed='true'] { background: var(--azul); color: var(--noche); }
.mj-anadir[aria-pressed='true']::before { content: '✓'; font-family: inherit; font-size: 1rem; }

/* ---------- tira de selección ---------- */
.mj-seleccion {
  position: fixed; left: 0; right: 0; top: 68px; z-index: 45;
  background: rgba(16, 23, 37, .94); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(224, 83, 63, .35);
  animation: mj-baja .3s ease both;
}
.mj-seleccion[hidden] { display: none; }
@keyframes mj-baja { from { transform: translateY(-100%); opacity: 0; } }
.mj-seleccion__fila { display: flex; align-items: center; gap: .8rem 1.2rem; padding: .55rem 0; }
.mj-seleccion .boton { flex: none; }
.mj-seleccion__texto { margin: 0; font-size: .92rem; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-seleccion__texto b { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; color: var(--sello); margin-right: .4rem; }
.mj-seleccion__texto span { color: var(--hueso-tenue); }
.mj-seleccion__nota { display: none; margin: 0; font-size: .82rem; color: var(--bombilla); font-weight: 700; }

/* ---------- combinaciones ---------- */
.mj-combos-seccion { padding: 3.6rem 0; position: relative; }
.mj-combos-cabeza { display: grid; gap: 1.6rem; margin-bottom: 2.2rem; }
.mj-combos-cabeza h2 { margin: 0; }
.mj-transporte {
  margin: 0; display: flex; gap: 1rem; align-items: center;
  padding: 1.1rem 1.3rem; border-radius: 14px;
  border: 1px dashed var(--bombilla-tenue); background: rgba(255, 216, 138, .04);
}
.mj-transporte b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 2.4rem; color: var(--bombilla); line-height: 1; flex: none; }
.mj-transporte span { color: var(--hueso-tenue); font-size: .93rem; }
.mj-combos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.mj-combo {
  padding: 1.5rem; border-radius: 16px; background: var(--noche-3);
  border: 1px solid rgba(122, 176, 242, .14);
  display: flex; flex-direction: column; align-items: flex-start;
}
.mj-combo h3 { margin: .9rem 0 .4em; }
.mj-combo > p:not(.mj-combo__piezas) { color: var(--hueso-tenue); font-size: .96rem; flex: 1; }
.mj-combo__piezas { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mj-combo__piezas span {
  font-size: .8rem; font-weight: 800; padding: .3rem .7rem; border-radius: 999px;
  background: rgba(122, 176, 242, .12); color: var(--azul-claro);
}
.mj-combo__piezas i { font-style: normal; font-family: 'Anton', sans-serif; color: var(--bombilla); }

/* ---------- comparativa ---------- */
.mj-tabla-marco { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(122, 176, 242, .16); }
.mj-tabla { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .95rem; }
.mj-tabla th, .mj-tabla td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid rgba(233, 238, 247, .07); }
.mj-tabla thead th {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--azul);
  background: var(--noche-2);
}
.mj-tabla tbody tr:nth-child(even) { background: rgba(23, 32, 51, .45); }
.mj-tabla tbody tr:hover { background: rgba(122, 176, 242, .07); }
.mj-tabla tbody th a { color: var(--hueso); font-weight: 700; text-decoration: none; }
.mj-tabla tbody th a:hover { color: var(--azul); }
.mj-tabla td small { color: var(--hueso-tenue); }
.mj-tabla tbody tr:last-child > * { border-bottom: 0; }

/* ---------- aparición al bajar ---------- */
.mj-aparece { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
.mj-aparece.esta-visible { opacity: 1; transform: none; }

/* ---------- pantallas más anchas ---------- */
@media (min-width: 700px) {
  .mj-billetes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mj-combos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mj-mosaico { height: 420px; }
  .mj-seleccion__nota { display: block; }
  .mj-familia, .mj-combos-seccion { padding: 5rem 0; }
}
@media (min-width: 980px) {
  .mj-portada { padding: 8.6rem 0 5rem; }
  .mj-portada__fila { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 3.4rem; }
  .mj-mosaico { height: 470px; }
  .mj-billetes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mj-combos-cabeza { grid-template-columns: 1fr minmax(0, 30rem); align-items: end; }
  .mj-combos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .mj-bombillas::after { animation: none; opacity: 1; }
  .mj-aparece { opacity: 1; transform: none; }
}