/* El marco del sitio alrededor de un nodo: barra de arriba y pie común.

   Todo va con las variables del nodo (`--papel`, `--tinta`, `--deep`, `--oro`,
   `--linea`), que las pinta el generador con el color del arte de cada juego.
   Así la barra de arriba pertenece a la página en la que está y no parece
   pegada de otro sitio.

   ⛔ Alto contenido: la barra es estrecha a propósito. Lo que vende la página es
   la primera pantalla del nodo, y encima de ella no puede haber un bloque que
   compita con el titular. */

.salto { position: absolute; left: -9999px; top: 0; background: var(--deep-2);
  color: var(--sobre); padding: .7rem 1.1rem; z-index: 60; border-radius: 0 0 3px 0; }
.salto:focus { left: 0; }

.marco-cab { position: sticky; top: 0; z-index: 50; background: var(--deep-2); color: var(--sobre);
  border-bottom: 1px solid rgba(255, 255, 255, .1); }
.marco-cab-fila { display: flex; align-items: center; gap: 1.4rem;
  padding: .55rem 0; }
.marco-marca { display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: inherit; margin-right: auto; }
.marco-marca img { width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255, 255, 255, .08); }
.marco-marca strong { display: block; font-size: .92rem; letter-spacing: .06em;
  line-height: 1.1; }
.marco-marca small { display: block; font-size: .68rem; opacity: .68;
  letter-spacing: .02em; }

/* ⛔ El botón de bonos. NO es un menú: es un destino único, y por eso es un
   botón y no una lista. Va delante del buscador y con el oro del nodo, que es
   el color con el que este sitio marca lo accionable. En móvil se queda —la
   lupa encoge, éste no—: es la única entrada al hub que se ve sin bajar. */
.marco-bono {
  flex: 0 0 auto;
  padding: .48rem .95rem;
  border-radius: 999px;
  background: var(--oro, #e9b44c);
  color: #1a1205;
  font-weight: 750;
  font-size: .86rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.marco-bono:hover { filter: brightness(1.06); }

.marco-bono:focus-visible {
  outline: 3px solid var(--oro, #e9b44c);
  outline-offset: 2px;
}

@media (max-width: 30rem) {
  .marco-cab-fila { gap: .6rem; }
  .marco-bono { padding: .42rem .7rem; font-size: .8rem; }
}

/* El buscador ocupa el sitio del menú, que ya no existe: el sitio no tiene
   secciones que listar. El desplegable cuelga del campo —no es una ventana
   modal— para que se lea como parte de la barra y no como una interrupción. */
.marco-busca { position: relative; display: flex; align-items: center; }
.marco-busca-campo { width: 17rem; max-width: 100%; padding: .45rem .9rem .45rem 2.2rem;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--sobre); font: inherit; font-size: .86rem; }
.marco-busca-campo::placeholder { color: var(--sobre-2); opacity: .75; }
.marco-busca-campo:focus { outline: none; border-color: var(--oro);
  background: rgba(255,255,255,.12); }
/* En ancho la lupa vive dentro del campo: es el icono que dice qué es esto. */
.marco-buscar { position: absolute; left: .5rem; top: 50%; transform: translateY(-50%);
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--sobre-2); cursor: pointer; }
.marco-buscar:hover { color: var(--oro); }
.marco-buscar svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; }

.marco-busca-panel { position: absolute; z-index: 60; top: calc(100% + .5rem); right: 0;
  width: min(25rem, 92vw); max-height: min(30rem, 68vh); overflow: auto; padding: .3rem;
  border: 1px solid var(--linea); border-radius: 12px; background: var(--papel);
  color: var(--tinta); box-shadow: 0 1.2rem 3rem rgba(0,0,0,.32); }
.marco-busca-panel[hidden] { display: none; }
.marco-busca-item { display: grid; grid-template-columns: 3.6rem 1fr; gap: .65rem;
  align-items: center; padding: .3rem .4rem; border-radius: 8px; color: var(--tinta);
  text-decoration: none; }
.marco-busca-item img { width: 3.6rem; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 4px; display: block; background: var(--suave); }
.marco-busca-item b { display: block; font-size: .85rem; font-weight: 700; line-height: 1.25; }
.marco-busca-item small { display: block; font-size: .71rem; color: var(--tenue);
  font-variant-numeric: tabular-nums; }
.marco-busca-item:hover, .marco-busca-item.activo, .marco-busca-item:focus-visible {
  background: color-mix(in srgb, var(--verde) 12%, var(--papel)); color: var(--deep); }
/* ⛔ `:focus-visible` también, y faltaba. La regla de arriba cambia el fondo del
   renglón en TRES estados —ratón, teclado y seleccionado— pero esta solo
   arreglaba dos: al llegar con el tabulador, el `small` se quedaba con
   `--tenue` sobre el fondo nuevo y daba 3,94 : 1 (medido en V-3, 09.08). Es la
   misma trampa que la línea pequeña de las tarjetas: un hijo con color propio
   no se entera de que su padre ha cambiado. */
.marco-busca-item:hover small, .marco-busca-item.activo small,
.marco-busca-item:focus-visible small { color: var(--deep); }
.marco-busca-vacio { margin: .7rem .5rem; color: var(--tenue); font-size: .85rem; }

/* ⛔ El pie no hereda `--tenue`, y esto está medido, no supuesto: sobre el
   fondo de la portada y de las páginas de servicio daba 4,31 : 1, por debajo
   del 4,5 que pide la AA. En un nodo daba 5,68 porque allí la paleta la pone
   el juego, así que el defecto solo asomaba en 5 de las 37 páginas y por eso
   llevaba meses ahí. Desde el 09.08 en este pie hay un aviso de edad y los
   enlaces legales — justo lo que no puede quedar flojo.
   La mezcla al 75 % mide 6,2 : 1 en las dos paletas y sigue siendo un pie
   discreto: `--tinta` a pelo daría 13,2 y se pondría a competir con el
   contenido. Los enlaces van aparte, con `--deep`: 7,9–11,3 : 1. */
.marco-pie { background: var(--suave); border-top: 1px solid var(--linea);
  padding: 1.6rem 0 2.2rem; font-size: .84rem;
  color: color-mix(in srgb, var(--tinta) 75%, var(--suave)); }
.marco-pie-fila { display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  align-items: baseline; }
.marco-pie p { margin: 0; max-width: 32rem; }
.marco-pie nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-right: auto; }
/* ⛔ `inline-block` con aire arriba y abajo: en 390 px estos enlaces medían
   20 px de alto y el mínimo AA (WCAG 2.5.8) son 24. El aire es transparente, así
   que la línea del pie no se mueve — solo crece la zona que acepta el dedo. */
.marco-pie a { color: var(--deep); text-decoration: none; font-weight: 600;
  display: inline-block; padding: .25rem 0; }
.marco-pie a:hover { text-decoration: underline; }
.marco-pie-legal { font-variant-numeric: tabular-nums; }

/* En móvil el campo se pliega en una lupa: en 390 px un campo de texto echa la
   marca fuera de la barra. Al abrirlo baja bajo la lupa y el desplegable debajo
   de él, así que la barra sigue midiendo lo mismo. */
@media (max-width: 46rem) {
  /* ⛔ 2,75rem = 44 px, y el número importa: en móvil esta lupa es el ÚNICO
     mando de la barra —el campo está plegado detrás de ella— y medía 36×36,
     por debajo de los 44 que pide un objetivo táctil. Medido el 09.08 en las
     39 páginas. */
  .marco-buscar { position: static; transform: none; width: 2.75rem; height: 2.75rem;
    border: 1px solid rgba(255,255,255,.32); color: var(--sobre); }
  .marco-busca-campo { display: none; }
  /* ⛔ `max-width: none`. La regla base lleva `max-width: 100%`, y aquí el
     bloque contenedor es `.marco-busca`, que en móvil mide lo que mide la lupa:
     2,75rem. El campo salía como un segundo círculo al lado del botón, sin
     sitio para escribir ni una letra. */
  .marco-busca.abierta .marco-busca-campo { display: block; position: absolute;
    top: calc(100% + .45rem); right: 0; width: min(84vw, 20rem); max-width: none;
    padding-left: .9rem; }
  .marco-busca.abierta .marco-busca-panel { top: calc(100% + 3.1rem); width: min(84vw, 20rem); }
  .marco-pie-fila { flex-direction: column; }
}