/* ==========================================================================
   El Michi — catálogo público
   La vitrina del barrio. Se abre desde un estado de WhatsApp, casi siempre en
   un celular y muchas veces con datos móviles: liviana, clara y directa.
   ========================================================================== */

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

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

.cat-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, var(--oro-100), transparent 62%),
    linear-gradient(180deg, var(--sutil), var(--fondo));
  border-bottom: 1px solid var(--linea-suave);
}
.cat-hero::after {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/ui/textura.png?v=8") center / 128px repeat;
  opacity: .9; pointer-events: none;
}
/* en oscuro se invierte para que el tejido se vea como luz, no como mugre */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cat-hero::after { filter: invert(1); opacity: .16; }
}
:root[data-tema="oscuro"] .cat-hero::after { filter: invert(1); opacity: .16; }

.cat-hero-inner {
  position: relative; z-index: 1;
  max-width: 980px; margin: 0 auto;
  padding: var(--e8) var(--e4) var(--e6);
  text-align: center;
}

.cat-promesas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px var(--e3);
  margin-top: var(--e5); color: var(--texto-suave); font-size: .75rem; font-weight: 700;
}
.cat-promesas span { white-space: nowrap; }

/* El logo tiene fondo transparente y silueta irregular: sombra proyectada
   sobre la forma, no una caja con box-shadow. */
.cat-logo {
  width: min(210px, 52vw); height: auto;
  margin: 0 auto var(--e4);
  filter: drop-shadow(0 10px 18px rgba(32,24,20,.18));
  animation: logo-entra 620ms var(--resorte);
}
@keyframes logo-entra {
  from { opacity: 0; transform: scale(.82) translateY(10px); }
  to { opacity: 1; transform: none; }
}

.cat-lema {
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.025em;
  margin-bottom: var(--e3);
}
.cat-datos {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  justify-content: center; margin-bottom: var(--e4);
}
.cat-datos .pildora { background: var(--superficie); box-shadow: var(--sombra-1); }

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

.cat-main { max-width: 980px; margin: 0 auto; padding: var(--e5) var(--e4); }

.cat-barra {
  position: sticky; top: 0; z-index: 20;
  margin: 0 calc(var(--e4) * -1) var(--e4);
  padding: var(--e3) var(--e4);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--linea-suave) 70%, transparent);
}

.cat-chips { display: flex; gap: 7px; overflow-x: auto; padding: var(--e3) 0 2px; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips button {
  flex: 0 0 auto; white-space: nowrap;
  padding: 9px 15px; border-radius: var(--r-full);
  border: 1.5px solid var(--linea); background: var(--superficie);
  font-weight: 700; font-size: .86rem; cursor: pointer;
  transition: all var(--v-rapido) linear;
}
.cat-chips button[aria-pressed="true"] {
  background: var(--tinta); color: var(--papel); border-color: var(--tinta);
}

.cat-rubro { margin-top: var(--e6); }
.cat-rubro > h2 {
  display: flex; align-items: center; gap: var(--e2);
  margin-bottom: var(--e3); font-size: 1.1rem;
}

.cat-grilla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 640px) { .cat-grilla { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }

.cat-item {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  transition: transform var(--v-medio) var(--entra), box-shadow var(--v-medio) var(--entra),
              border-color var(--v-rapido) linear;
  animation: subir-fila var(--v-medio) var(--entra) backwards;
}
.cat-item:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--rojo-200); }
.cat-item:active { transform: scale(.985); }
.cat-item[data-agotado] { opacity: .55; }

/* En la vitrina la foto es la protagonista: ocupa el ancho de la tarjeta.
   Sin foto, el mismo cuadrado se pinta con el color del rubro y las iniciales,
   así la grilla nunca queda despareja. */
.cat-item .mini {
  width: 100%; height: auto; aspect-ratio: 1;
  border-radius: var(--r-md);
  margin: calc(var(--e2) * -1) 0 var(--e3);
  font-size: 1.6rem;
}
.cat-item .mini.con-foto { box-shadow: var(--sombra-1); }
.cat-item .nombre { font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.cat-item .meta { font-size: .76rem; color: var(--texto-tenue); min-height: 1.1em; }
.cat-item .precio {
  margin-top: auto; padding-top: var(--e3);
  font-size: 1.24rem; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.cat-item .precio small { font-size: .7rem; font-weight: 700; color: var(--texto-tenue); }
/* La señal de stock va POR ENCIMA de la foto: antes quedaba debajo y solo se
   veía asomar un pedacito. */
.cat-item .marca-estado {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  box-shadow: 0 1px 6px rgba(32,24,20,.22);
}

.cat-sumar { margin-top: var(--e3); }
.cat-sumar .btn { width: 100%; min-height: 42px; }
.cat-pasos { display: flex; align-items: center; gap: 6px; }
.cat-pasos button {
  width: 40px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-sm); border: 1.5px solid var(--linea);
  background: var(--superficie); color: var(--texto); cursor: pointer;
  transition: all var(--v-rapido) var(--entra);
}
.cat-pasos button:hover { border-color: var(--rojo-400); color: var(--rojo-600); }
.cat-pasos button:active { transform: scale(.9); }
.cat-pasos .n { flex: 1; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

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

.cat-carrito {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: var(--e3) var(--e4) calc(var(--e3) + var(--safe-b));
  background: var(--tinta); color: var(--papel);
  display: flex; align-items: center; gap: var(--e3);
  box-shadow: 0 -10px 30px rgba(35,24,20,.3);
  transform: translateY(120%);
  transition: transform var(--v-lento) var(--entra);
}
.cat-carrito[data-visible] { transform: none; }
.cat-carrito .info { flex: 1; min-width: 0; }
.cat-carrito .info strong { display: block; font-size: 1.22rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.cat-carrito .info span { font-size: .78rem; opacity: .74; }

@media (min-width: 760px) {
  .cat-carrito {
    left: 50%; right: auto; bottom: var(--e4); width: min(700px, calc(100vw - 32px));
    transform: translate(-50%, 150%); border-radius: var(--r-xl);
    padding: var(--e3); border: 1px solid rgba(255,255,255,.12);
  }
  .cat-carrito[data-visible] { transform: translate(-50%, 0); }
}

/* ------------------------------------------------ checkout del pedido --- */

.resumen-pedido {
  border: 1px solid var(--linea-suave); border-radius: var(--r-lg);
  background: var(--sutil); overflow: hidden;
}
.resumen-pedido > summary {
  padding: var(--e3); color: var(--texto); background: var(--superficie);
}
.resumen-pedido > summary::after { display: none; }
.resumen-pedido > summary > span:not(.ficha) { display: flex; flex-direction: column; }
.resumen-pedido > summary small { color: var(--texto-tenue); font-weight: 600; }
.resumen-pedido[open] > summary > .i-sm { transform: rotate(90deg); }
.resumen-pedido > .lista { padding: var(--e2); border-top: 1px solid var(--linea-suave); }

.checkout-seccion {
  margin-top: var(--e4); padding: var(--e4);
  border: 1px solid var(--linea-suave); border-radius: var(--r-lg);
  background: var(--sutil);
}
.checkout-titulo { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }
.checkout-titulo > div { display: flex; flex-direction: column; }
.checkout-titulo small { color: var(--texto-tenue); font-size: .75rem; font-weight: 600; }
.checkout-num {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: var(--tinta); color: var(--papel); font-size: .78rem; font-weight: 800;
}

.entrega-opciones { display: grid; gap: var(--e2); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--e4); }
.opcion-entrega {
  min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px;
  padding: var(--e3); border: 1.5px solid var(--linea); border-radius: var(--r-md);
  background: var(--superficie); color: var(--texto); text-align: left; cursor: pointer;
  transition: border-color var(--v-rapido) linear, box-shadow var(--v-medio) var(--entra), transform var(--v-rapido) var(--entra);
}
.opcion-entrega > span:not(.ficha) { min-width: 0; display: flex; flex-direction: column; }
.opcion-entrega strong { font-size: .84rem; line-height: 1.25; }
.opcion-entrega small { color: var(--texto-tenue); font-size: .71rem; }
.opcion-entrega > .i-sm { opacity: 0; color: var(--ok-500); }
.opcion-entrega[aria-checked="true"] { border-color: var(--ok-500); box-shadow: 0 0 0 3px var(--ok-100); }
.opcion-entrega[aria-checked="true"] > .i-sm { opacity: 1; }
.opcion-entrega:active { transform: scale(.98); }

.checkout-opcional { margin: var(--e4) 0; }
.checkout-opcional > summary { padding-inline: var(--e2); }
.checkout-opcional > .campo { padding: var(--e2); }

@media (max-width: 480px) {
  .cat-hero-inner { padding-top: var(--e6); }
  .cat-logo { width: min(170px, 46vw); margin-bottom: var(--e3); }
  .cat-lema { font-size: 1rem; }
  .cat-promesas { max-width: 330px; margin-inline: auto; }
  .checkout-seccion { padding: var(--e3); }
  .entrega-opciones { grid-template-columns: 1fr; }
}

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

.cat-pie {
  text-align: center; padding: var(--e9) var(--e4) var(--e9);
  border-top: 1px solid var(--linea-suave); margin-top: var(--e8);
}
.cat-pie img { width: 64px; margin: 0 auto var(--e3); }

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

.pedido-estado { max-width: 620px; margin: 0 auto; padding: var(--e7) var(--e4) var(--e9); }
.pedido-pasos { display: flex; gap: var(--e2); margin: var(--e6) 0; }
.pedido-pasos > div { flex: 1; text-align: center; }
.pedido-pasos .bolita {
  width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 8px;
  display: grid; place-items: center;
  background: var(--hundida); border: 2px solid var(--linea); color: var(--texto-tenue);
}
.pedido-pasos .bolita svg { width: 18px; height: 18px; }
.pedido-pasos .hecho .bolita { background: var(--ok-500); border-color: var(--ok-500); color: #fff; }
.pedido-pasos .actual .bolita {
  background: var(--oro-500); border-color: var(--oro-500); color: var(--tinta);
  animation: pulso 2s var(--entra) infinite;
}
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253,190,1,.5); }
  50% { box-shadow: 0 0 0 10px rgba(253,190,1,0); }
}
.pedido-pasos small { font-size: .7rem; color: var(--texto-tenue); font-weight: 800; }

/* ==========================================================================
   La puerta — nombre y WhatsApp antes de ver los precios
   Es lo primero que ve el vecino que llega del estado de WhatsApp, así que
   tiene que explicarse solo y pedir lo mínimo. Dos campos y adentro.
   ========================================================================== */

.puerta {
  max-width: 480px;
  margin: var(--e6) auto 0;
  padding: 0 var(--e4);
  animation: subir-fila var(--v-lento) var(--entra) backwards;
}
.puerta-caja {
  background: var(--superficie);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-2);
  padding: var(--e7) var(--e5) var(--e6);
  text-align: center;
}
.puerta-titulo {
  margin: 0 0 var(--e2);
  font-size: 1.32rem; font-weight: 800; letter-spacing: -.03em;
  text-wrap: balance;
}
.puerta-texto {
  margin: 0 auto var(--e5);
  max-width: 34ch;
  color: var(--texto-suave);
  font-size: .94rem;
  text-wrap: pretty;
}
.puerta-form { text-align: left; }
.puerta-form .btn { margin-top: var(--e3); }
.puerta-pie {
  margin: var(--e4) 0 0;
  font-size: .78rem;
  color: var(--texto-tenue);
}