/* =====================================================================
 *  Pagina /mercado -- rejilla de vehiculos en venta, sin sesion.
 *  Igual que ranking.css, usa guia.css SOLO para .gu-volver/.gu-marca y
 *  landing.css SOLO para la familia .mp-tarjeta (la misma que ya pinta
 *  el widget de la portada). Todo lo demas vive aqui.
 * ===================================================================== */

.mpg-body {
  background-image:
    linear-gradient(rgba(11, 11, 13, .62), rgba(11, 11, 13, .86) 58%, var(--fondo) 96%),
    url("/img/gamerol-fondo.jpg");
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
}

.mpg-pagina {
  max-width: 1040px;
  margin: 0 auto;
  padding: 96px 24px 80px;
}

.mpg-entradilla {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texto-tenue);
}
.mpg-entradilla a { color: var(--dorado-suave); font-weight: 700; }
.mpg-entradilla a:hover { color: var(--dorado); }

.mpg-cargando,
.mpg-error,
.mpg-vacio {
  text-align: center;
  color: var(--texto-tenue);
  font-size: 13.5px;
  padding: 40px 0;
  grid-column: 1 / -1;
}

.mpg-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
/* La tarjeta (.mp-tarjeta, de landing.css) nace con un ancho fijo
   pensada para la tira con scroll horizontal de la portada -- aqui, en
   rejilla, se deja crecer a la columna que le toque. */
.mpg-rejilla .mp-tarjeta { width: auto; }
.mpg-rejilla .mp-tarjeta-foto { height: 96px; }

@media (max-width: 560px) {
  .mpg-pagina { padding: 34px 16px 60px; }
}