/* ===========================================================
   JuntoCompra — Página de compras abiertas (marketplace)
   =========================================================== */

.market-head{
  padding-block:calc(var(--header-h) + clamp(34px,5vw,58px)) clamp(44px,6vw,74px);
}
/* Versión contenida del mesh: aquí manda el catálogo, no la portada */
.mesh--market{
  background:
    radial-gradient(38% 62% at 88% 28%,
      rgba(216,56,92,.92) 0%,  rgba(216,56,92,.72) 38%,
      rgba(216,56,92,.32) 70%, rgba(216,56,92,0) 100%),
    radial-gradient(26% 44% at 4% 92%,
      rgba(216,56,92,.55) 0%,  rgba(216,56,92,.34) 44%,
      rgba(216,56,92,0) 100%),
    var(--ink);
}
/* El bloque de cifras acaba justo donde acaba la primera línea del
   subtítulo (la "o" de "precio"), no donde acaba su caja.
   Va en rem y no en ch a propósito: `ch` se calcula sobre la fuente de
   cada elemento, y el subtítulo y la lista no tienen el mismo cuerpo,
   así que con `ch` salían dos anchos distintos. */
.market-head .display{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:var(--s4)}
.market-head .lead{color:rgba(255,255,255,.76);max-width:60ch}

/* ── Migas de pan ───────────────────────────────────────── */
.crumbs{
  display:flex;align-items:center;gap:8px;
  margin-bottom:var(--s5);
  font-size:var(--fs-sm);
  color:rgba(255,255,255,.6);
}
.crumbs a{transition:color var(--t-fast)}
.crumbs a:hover{color:var(--white)}
.crumbs [aria-current]{color:rgba(255,255,255,.9);font-weight:600}

/* ── Cifras de cabecera ─────────────────────────────────────
   Mismo recurso que las tarjetas de "¿Cómo funciona?", pero en
   versión compacta: aquí son un dato de apoyo, no el contenido
   principal de la página. */
.market-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:var(--s6);
  max-width:var(--medida-cifras);
}
.mstat{
  display:flex;align-items:center;gap:11px;
  padding:13px 15px;
  color:var(--white);
}
.mstat__icon{
  width:31px;height:31px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
.mstat__icon svg{width:14px;height:14px}
.mstat b{
  display:block;
  font-size:1.14rem;font-weight:800;
  letter-spacing:var(--track-heading);
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.mstat__lbl{
  display:block;
  font-size:.625rem;font-weight:700;
  letter-spacing:.045em;text-transform:uppercase;
  line-height:1.3;
  white-space:nowrap;
  color:rgba(255,255,255,.5);
}

@media (max-width:820px){
  .market-stats{max-width:none}
}
@media (max-width:560px){
  .market-stats{grid-template-columns:1fr;gap:8px}
}

/* El catálogo arranca pegado a la portada: sin la banda intermedia, el
   relleno de sección por defecto dejaba 142px de vacío. */
.market-head + .section{padding-top:var(--s7)}
.market-head + .section .catalog-bar{margin-top:0}