/* ════════════════════════════════════════════════════════════════════
   MERCAO · la vitrina (fase 1, 2026-09-08)

   Identidad propia, no la de SAIOS: verde hoja de fondo y el naranja de
   la casa solo para lo que importa. SAIOS es una herramienta de trabajo
   para quien ya es cliente; esto es una tienda para quien no conoce la
   marca, y tiene que parecerlo.

   El doble toque NO hace zoom (`touch-action: manipulation`): en una
   tienda uno pulsa dos veces seguidas a menudo. El pellizco para
   agrandar la letra SÍ se conserva — por eso no se usa `user-scalable=no`.
   ════════════════════════════════════════════════════════════════════ */
html { touch-action: manipulation; }

:root {
  --fondo: #123028;
  --pantalla: #FFFDF9;
  --tinta: #16130F;
  --tinta-suave: #6E655A;
  --tinta-tenue: #9A9086;
  --naranja: #F39200;
  --naranja-hondo: #C57400;
  --ambar: #B8860B;
  --ambar-claro: #FBF0D5;
  --linea: #EAE3D7;
  --linea-fuerte: #D8CFC0;
  /* El mismo fondo de foto de SAIOS: un producto recortado contra un gris
     cualquiera se ve roto; contra este se ve enmarcado. */
  --foto-fondo: #F2EFE9;
  --r: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pantalla);
  color: var(--tinta);
  font: 400 15px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 40px;
}

/* ── Cinta ──────────────────────────────────────────────────────── */
.cinta {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fondo);
  color: #F2EDE4;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cinta-fila { display: flex; align-items: center; gap: 11px; }
.marca { width: 38px; height: 38px; border-radius: 11px; flex: none; background: #fff; }
.cinta-nombre { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.cinta-sub { font-size: .74rem; color: #9CBFAE; margin-top: 3px; }

.buscar input {
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 11px 13px;
  font: inherit;
  background: #fff;
  color: var(--tinta);
}
.buscar input:focus-visible { outline: 3px solid var(--naranja); outline-offset: 1px; }
.conIva { font-size: .74rem; color: #9CBFAE; margin-top: -3px; }

/* ── Categorías ─────────────────────────────────────────────────── */
.categorias {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 11px 14px;
  scrollbar-width: none;
  border-bottom: 1px solid var(--linea);
}
.categorias::-webkit-scrollbar { display: none; }
.categorias button {
  flex: none;
  border: 1.5px solid var(--linea-fuerte);
  background: #fff;
  color: var(--tinta-suave);
  border-radius: 99px;
  padding: 6px 13px;
  font: 600 .82rem inherit;
  white-space: nowrap;
  cursor: pointer;
}
.categorias button.on {
  background: var(--fondo);
  border-color: var(--fondo);
  color: #fff;
}
.categorias button:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* ── Vitrina ────────────────────────────────────────────────────── */
.vitrina {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 12px;
  padding: 14px;
}
.cargando, .vacio {
  grid-column: 1 / -1;
  padding: 44px 14px;
  text-align: center;
  color: var(--tinta-tenue);
}
.vacio b { display: block; color: var(--tinta); font-size: 1.02rem; margin-bottom: 5px; }

.prod {
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.prod:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
/* 🚨 `contain`, NUNCA `cover` — lo cazó él el 9-sep: «es el mismo tamaño
   de imagen publicado para todos, aun si la original tiene otra dimensión».
   Tenía razón y era un defecto mío.

   El marco es cuadrado para que la rejilla no baile, pero la foto entra
   ENTERA dentro de él. Con `cover` la foto se estira hasta llenar el
   cuadrado y lo que sobra se CORTA: medido sobre 40 fotos de producción,
   9 no son cuadradas y las peores pierden casi la mitad — AG010 es
   394×700 y se le iba el 44 %. En una tienda eso es una botella sin tapa
   o una etiqueta partida, que es justo lo que el comprador necesita ver.

   El fondo es el mismo `--foto-fondo` que usa SAIOS: las bandas que
   quedan a los lados se leen como parte del marco, no como un error. */
.prod img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--foto-fondo);
  display: block;
}
.prod img.sinfoto { padding: 22%; opacity: .55; }
.prod .txt { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.prod .nom { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.prod .um { font-size: .7rem; color: var(--tinta-tenue); }
.prod .precio {
  margin-top: auto;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.prod .iva { font-size: .66rem; color: var(--tinta-tenue); font-weight: 400; }

/* Pedir por WhatsApp. Verde de WhatsApp a propósito y no el naranja de la
   casa: la gente reconoce ese verde antes de leer el texto.

   🎨 Va de CONTORNO y no relleno, y no es capricho: son 300 tarjetas, y
   300 botones verdes macizos se comen la tienda — el ojo ve una pared de
   verde y deja de ver los productos, que es lo que se vino a mirar. De
   contorno se reconoce igual y el protagonista sigue siendo el producto.
   Al pasar por encima sí se rellena: ahí ya hay UNO solo. */
.wa {
  display: block;
  margin-top: 8px;
  background: #fff;
  border: 1.5px solid #25D366;
  color: #0B7A3B;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: .76rem;
  padding: 7px 6px;
  border-radius: 10px;
}
.wa:hover { background: #25D366; color: #05331A; }
.wa:focus-visible { outline: 3px solid var(--fondo); outline-offset: 2px; }

.pesa {
  display: inline-block;
  align-self: flex-start;
  background: var(--ambar-claro);
  color: var(--ambar);
  font-size: .64rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}

/* ── La ficha del producto ──────────────────────────────────────── */
/* 🪤 ESTA LÍNEA NO SOBRA. El navegador esconde lo que lleva `hidden` con
   `display: none`, pero cualquier regla de clase le gana por especificidad
   — y `display: flex` de abajo se la comía. Resultado: la ficha vacía
   encima de la tienda SIEMPRE, con todo oscurecido detrás. Se vio en
   producción, no en la prueba: en local solo la miré ABIERTA. */
.ficha[hidden] { display: none; }
.ficha {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(18, 48, 40, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Sube desde abajo, como una hoja: en el teléfono es el gesto que la
   gente ya conoce. En pantalla ancha se centra y no se estira. */
.ficha-caja {
  background: #fff;
  width: 100%;
  max-width: 460px;
  max-height: 92dvh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px 22px;
  position: relative;
}
@media (min-width: 620px) {
  .ficha { align-items: center; }
  .ficha-caja { border-radius: 18px; max-height: 88dvh; }
}
.ficha-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--linea);
  color: var(--tinta);
  font-size: 1rem;
  cursor: pointer;
}
.ficha-x:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* La galería se desliza; nunca empuja la página a lo ancho. */
.f-fotos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.f-fotos img {
  height: 190px;
  flex: none;
  border-radius: 12px;
  object-fit: contain;
  background: var(--foto-fondo);
}
.f-fotos img:only-child { width: 100%; height: 230px; }
/* El champiñón de relleno es un marcador, no una foto: a este tamaño y a
   todo color se comía la ficha entera y parecía el producto. */
.f-fotos img.sinfoto { padding: 16%; opacity: .45; }

.ficha h2 { font-size: 1.06rem; margin: 12px 0 2px; line-height: 1.25; }
.f-marca { font-size: .78rem; color: var(--tinta-tenue); }
.f-precio {
  font-size: 1.45rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin: 10px 0 2px;
}
.f-precio span { font-size: .74rem; font-weight: 400; color: var(--tinta-tenue); }

.f-dato { border-top: 1px solid var(--linea); padding-top: 9px; margin-top: 11px; }
.f-dato b {
  display: block;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 3px;
}
.f-dato p { margin: 0; font-size: .87rem; }

/* Los alérgenos NO son un dato más: van marcados. */
.f-alerg { background: var(--ambar-claro); border-radius: 12px; padding: 10px 12px; margin-top: 11px; }
.f-alerg b { color: var(--ambar); }
.f-fuente { font-size: .72rem; color: var(--tinta-tenue); margin-top: 4px; }

.ficha .wa { margin-top: 16px; padding: 12px; font-size: .92rem; background: #25D366; color: #05331A; }
.ficha .wa:hover { background: #1EBE5A; }

/* ── Pie ────────────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--linea);
  margin-top: 8px;
  padding: 18px 16px 26px;
  color: var(--tinta-suave);
  font-size: .82rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pie p { margin: 0; }
.pie .tenue { color: var(--tinta-tenue); font-size: .76rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}