/* =====================================================================
   Menú con vista previa (12 nov 2026, pedido de Chucho: "como el de BKT").
   En compu: al pasar por Funciones, Overlays o Cofres se despliega un panel
   con los links de esa parte y, al pasar por cada link, una captura de lo
   que hay en esa página. En el celular: botón de menú con una hoja que baja.
   Lo arma /menu.js sobre la barra que ya tiene cada página.
   ===================================================================== */
.mm-tiene { display: inline-flex; align-items: center; gap: 6px; }
.mm-tiene svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
                transition: transform 250ms var(--curva); }
.mm-tiene[aria-expanded="true"] { color: var(--text-100); background: rgba(255, 255, 255, .05); }
.mm-tiene[aria-expanded="true"] svg { transform: rotate(180deg); }

/* el panel que cuelga de la barra */
.mm-fly { position: fixed; z-index: 59; top: 80px; left: 50%; width: min(860px, calc(100% - 32px)); transform: translateX(-50%);
          pointer-events: none; }
.mm-tarjeta { position: relative; border-radius: 20px; overflow: hidden; background: rgba(14, 11, 22, .96); border: 1px solid var(--line-200);
              box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(149, 0, 255, .08);
              -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
              opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: 50% 0;
              transition: opacity 200ms var(--curva), transform 300ms var(--curva), height 320ms var(--curva); }
.mm-fly.abierto { pointer-events: auto; }
.mm-fly.abierto .mm-tarjeta { opacity: 1; transform: none; }
.mm-panel { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0;
            opacity: 0; visibility: hidden; transition: opacity 220ms var(--curva), transform 320ms var(--curva), visibility 0s linear 220ms; }
.mm-panel.ver { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity 220ms var(--curva) 60ms, transform 320ms var(--curva); }
.mm-panel.desde-der { transform: translateX(24px); }
.mm-panel.desde-izq { transform: translateX(-24px); }
.mm-lista { padding: 18px; display: grid; gap: 4px; align-content: start; }
.mm-lista .mm-ceja { margin: 2px 10px 8px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-300); }
.mm-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 12px;
           transition: background-color 150ms var(--curva); }
.mm-item:hover, .mm-item:focus-visible, .mm-item.activo { background: rgba(255, 255, 255, .05); }
.mm-item .mm-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(149, 0, 255, .10);
                  border: 1px solid rgba(177, 68, 255, .3); transition: background-color 150ms var(--curva), border-color 150ms var(--curva); }
.mm-item.activo .mm-ic { background: rgba(149, 0, 255, .22); border-color: var(--accent-line); }
.mm-item .mm-ic svg { width: 19px; height: 19px; fill: none; stroke: var(--text-100); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mm-item b { display: block; font: 600 15px/1.25 var(--sans); color: var(--text-100); }
.mm-item span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--text-300); }
.mm-vista { position: relative; margin: 14px 14px 14px 0; border-radius: 14px; overflow: hidden; background: #050409; border: 1px solid var(--line-100); min-height: 240px; }
.mm-vista img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0;
                transform: scale(1.03); transition: opacity 280ms var(--curva), transform 420ms var(--curva); }
.mm-vista img.ver { opacity: 1; transform: none; }
.mm-vista img.contener { object-fit: contain; object-position: center; padding: 18px; }
.mm-vista::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; pointer-events: none;
                   background: linear-gradient(to top, rgba(5, 4, 9, .95), transparent); }
.mm-pie { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 3px; }
.mm-pie b { font: 600 15px/1.25 var(--sans); color: var(--text-100); }
.mm-pie span { font-size: 13px; color: var(--text-200); }

/* celular: botón de menú y hoja */
.mm-abrir { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-200); background: rgba(255, 255, 255, .03);
            color: var(--text-100); cursor: pointer; place-items: center; }
.mm-abrir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mm-hoja { position: fixed; z-index: 59; top: 80px; left: 16px; right: 16px; max-height: calc(100dvh - 96px); overflow: auto;
           border-radius: 20px; background: rgba(14, 11, 22, .98); border: 1px solid var(--line-200); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9);
           padding: 10px; display: grid; gap: 4px; opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
           transition: opacity 200ms var(--curva), transform 300ms var(--curva), visibility 0s linear 200ms; }
.mm-hoja.abierta { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 200ms var(--curva), transform 300ms var(--curva); }
.mm-hoja .mm-ceja { margin: 12px 10px 4px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-300); }
.mm-hoja .mm-item { padding: 9px 10px; }
.mm-hoja .mm-solo { display: block; padding: 12px 10px; border-radius: 12px; font: 600 15px var(--sans); color: var(--text-100); }

/* Un solo botón principal por pantalla (12 nov 2026, revisión UX): mientras se ve otro botón violeta
   de la página (el de la portada, el del cierre, «Entra al Discord»…), el «Descargar» del menú queda
   con borde; cuando ninguno está a la vista, se llena. Lo maneja /menu.js; las páginas cuya portada
   tiene su botón violeta lo traen ya con «calla» en el HTML, para que el primer cuadro salga bien.
   El borde va por box-shadow interior: no cambia la medida (la Píldora mide este botón). */
.menu .btn-1.calla { background: transparent; color: var(--text-100); box-shadow: inset 0 0 0 1px var(--accent-line); }
.menu .btn-1.calla:hover { background: rgba(149, 0, 255, .16); }

@media (max-width: 980px) {
  .mm-fly { display: none; }
  .mm-abrir { display: grid; margin-left: auto; }
  .menu .btn-1 { margin-left: 0; }
}
@media (min-width: 981px) { .mm-hoja { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mm-tarjeta, .mm-panel, .mm-vista img, .mm-hoja { transition: none; }
}

/* =====================================================================
   Banderola (movimiento de Moxen, piel de Skalix): la barra fina de arriba
   con la última versión, que lleva a /cambios/. La arma /banderola.js con
   /novedades.json (lo escribe armar-cambios.js).
   El lugar se reserva antes del primer pintado (clase .con-bd que pone el
   script del <head>), así la página no salta cuando aparece. Arriba de todo
   empuja el menú 38 px; al bajar se esconde y el menú vuelve a su sitio.
   ===================================================================== */
.con-bd body { padding-top: 38px; }
.menu { transition: translate 520ms cubic-bezier(.3, 1.35, .5, 1); }
.con-bd:not(.bd-fuera) .menu, .con-bd:not(.bd-fuera) .mm-fly, .con-bd:not(.bd-fuera) .mm-hoja { translate: 0 38px; }
.bd { position: fixed; z-index: 62; top: 0; left: 0; right: 0; height: 38px; display: flex; align-items: center; gap: 10px;
      padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
      background: linear-gradient(90deg, rgba(149, 0, 255, .22), rgba(149, 0, 255, .08) 40%, rgba(14, 11, 22, .92) 75%), #0b0912;
      border-bottom: 1px solid rgba(177, 68, 255, .32); font: 500 13.5px/1 var(--sans); color: var(--text-200);
      transform: translateY(-100%); transition: transform 520ms cubic-bezier(.3, 1.35, .5, 1); }
.con-bd .bd.listo { transform: none; }
.con-bd.bd-fuera .bd.listo { transform: translateY(-100%); transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: 300ms; }
.bd-ventana { position: relative; flex: 1; min-width: 0; height: 100%; perspective: 600px; }
.bd-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0;
          color: inherit; backface-visibility: hidden; }
.bd-msg[aria-hidden="true"] { visibility: hidden; }
.bd-msg:hover .bd-titulo, .bd-msg:focus-visible .bd-titulo { color: var(--text-100); }
.bd-chip { flex: none; padding: 4px 8px; border-radius: 6px; background: var(--accent); color: #fff; font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.bd-tag { flex: none; font: 500 13px/1 var(--mono); color: var(--accent-text); }
.bd-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-100); transition: color 150ms; }
.bd-mas { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--accent-text); font-weight: 600; }
.bd-tramos { flex: none; display: flex; gap: 4px; }
.bd-tramo { width: 22px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.bd-tramo i { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.bd-tramo b { display: block; height: 100%; background: var(--accent-text); transform-origin: 0 50%; transform: scaleX(0); }
.bd-cierra { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--text-300); cursor: pointer;
             display: grid; place-items: center; }
.bd-cierra:hover { color: var(--text-100); background: rgba(255, 255, 255, .06); }
.bd-cierra svg, .bd-mas svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .bd { gap: 6px; font-size: 13px; }
  .bd-msg { justify-content: flex-start; gap: 8px; }
  .bd-mas span, .bd-tramos { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu, .bd, .con-bd.bd-fuera .bd.listo { transition: none; }
}