/* Catálogo público de El Michi — vitrina del barrio. */

.pagina-catalogo { padding-bottom: 96px; }

/* ------------------------------------------------------------------ hero -- */

.cat-hero {
  background:
    radial-gradient(1000px 420px at 80% -10%, color-mix(in srgb, var(--amarillo) 42%, transparent), transparent 70%),
    linear-gradient(170deg, var(--crema), color-mix(in srgb, var(--crema) 70%, #fff));
  border-bottom: 3px solid var(--cacao);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cat-hero {
    background:
      radial-gradient(1000px 420px at 80% -10%, color-mix(in srgb, var(--rojo) 30%, transparent), transparent 70%),
      linear-gradient(170deg, #241C18, #17120F);
  }
}
.cat-hero::after {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/img/patron.webp") center/300px repeat;
  opacity: .07; pointer-events: none;
}
.cat-hero-inner {
  position: relative; z-index: 1;
  max-width: 1040px; margin: 0 auto;
  padding: var(--s-8) var(--s-4) var(--s-6);
  text-align: center;
}
.cat-logo { width: min(240px, 62vw); margin: 0 auto var(--s-3); }
.cat-lema { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--s-3); }
.cat-datos {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  justify-content: center; font-size: .88rem; color: var(--suave);
  margin-bottom: var(--s-4);
}

/* ------------------------------------------------------------------ main -- */

.cat-main { max-width: 1040px; margin: 0 auto; padding: var(--s-5) var(--s-4); }

.cat-buscador { position: sticky; top: 0; z-index: 20; padding: var(--s-3) 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px); margin-bottom: var(--s-3); }

.cat-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips button {
  white-space: nowrap; padding: 8px 14px; border-radius: var(--r-full);
  border: 1.5px solid var(--borde); background: var(--superficie);
  font-weight: 700; font-size: .88rem; cursor: pointer; flex: 0 0 auto;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.cat-chips button[aria-pressed="true"] { background: var(--cacao); color: var(--crema); border-color: var(--cacao); }

.cat-rubro { margin-top: var(--s-6); }
.cat-rubro h2 { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); font-size: 1.15rem; }

.cat-grilla { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
@media (min-width: 700px) { .cat-grilla { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); } }

.cat-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-4);
  background: var(--superficie);
  border: 1.5px solid var(--borde-2);
  border-radius: var(--r-md);
  position: relative;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.cat-item:hover { border-color: var(--rojo); box-shadow: var(--sombra-sm); }
.cat-item.agotado { opacity: .55; }
.cat-item .nombre { font-weight: 800; line-height: 1.25; }
.cat-item .meta { font-size: .78rem; color: var(--suave); }
.cat-item .precio { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: auto; padding-top: var(--s-2); }
.cat-item .etiqueta-estado { position: absolute; top: 8px; right: 8px; }

.cat-agregar {
  margin-top: var(--s-2);
  display: flex; align-items: center; gap: var(--s-2);
}
.cat-agregar .btn { flex: 1; min-height: 40px; }
.cat-pasos { display: flex; align-items: center; gap: 4px; width: 100%; }
.cat-pasos button {
  width: 36px; height: 40px; border-radius: var(--r-sm);
  border: 1.5px solid var(--borde); background: var(--superficie);
  font-weight: 800; cursor: pointer; font-size: 1.1rem;
}
.cat-pasos .n { flex: 1; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- carrito --- */

.cat-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: var(--s-3) var(--s-4);
  padding-bottom: calc(var(--s-3) + var(--safe-b));
  background: var(--cacao); color: var(--crema);
  display: flex; align-items: center; gap: var(--s-3);
  box-shadow: 0 -8px 26px rgba(42,33,28,.28);
  transform: translateY(120%);
  transition: transform var(--t);
}
.cat-barra.visible { transform: none; }
.cat-barra .info { flex: 1; min-width: 0; }
.cat-barra .info strong { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cat-barra .info span { font-size: .8rem; opacity: .8; }

.cat-vacio { text-align: center; padding: var(--s-10) var(--s-4); }
.cat-vacio img { width: 170px; margin: 0 auto var(--s-4); }

/* ---------------------------------------------------------------- pie ---- */

.cat-pie {
  text-align: center; padding: var(--s-8) var(--s-4) var(--s-10);
  border-top: 1px solid var(--borde-2); margin-top: var(--s-8);
}
.cat-pie img { width: 56px; margin: 0 auto var(--s-3); }

/* ---------------------------------------------------------- seguimiento -- */

.pedido-estado { max-width: 620px; margin: 0 auto; padding: var(--s-6) var(--s-4); }
.pedido-pasos { display: flex; gap: var(--s-2); margin: var(--s-5) 0; }
.pedido-pasos > div { flex: 1; text-align: center; }
.pedido-pasos .bolita {
  width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 6px;
  display: grid; place-items: center; font-size: 1rem;
  background: var(--superficie-2); border: 2px solid var(--borde);
}
.pedido-pasos .hecho .bolita { background: var(--ok); border-color: var(--ok); color: #fff; }
.pedido-pasos .actual .bolita { background: var(--amarillo); border-color: var(--amarillo); }
.pedido-pasos small { font-size: .72rem; color: var(--suave); font-weight: 700; }