/* ==========================================================================
   La tienda pública de Mercastock
   --------------------------------------------------------------------------
   Tiene que parecer una tienda en línea de verdad: de eso depende que alguien
   se anime a comprarle una docena a un puesto que no conoce. Pero atiende a
   dos clientes opuestos a la vez — la familia que quiere un pantalón y el
   local que viene por doce — así que el precio al detalle manda en tamaño y
   el de mayoreo va justo debajo, sin pedir registro ni esconderse.

   Distinta del panel a propósito: el panel es herramienta y prioriza
   densidad; acá manda la foto.
   ========================================================================== */

:root{
  --ink:#141518; --ink-2:#3d4047; --ink-3:#6b7079; --ink-4:#9ba1aa;
  --line:#e6e7ea; --line-2:#f3f4f6;
  --bg:#ffffff; --bg-2:#fafbfc;
  --wa:#128c4a; --wa-2:#0e7540;
  --ok:#15803d; --ok-bg:#e8f6ed;
  --bad:#b4302f; --bad-bg:#fdecec;
  --sombra:0 1px 2px rgba(20,21,24,.05), 0 8px 24px -12px rgba(20,21,24,.14);
  /* El aro de los circulos de color. Tiene que contrastar con el fondo,
     no con el color: en modo oscuro un aro negro deja el circulo negro
     invisible, y negro es el color que mas se vende. */
  --aro:rgba(20,21,24,.18);
  /* Los pisa el <style> de cada tienda. Están acá para que la
     hoja sirva sola si ese bloque no llega. */
  --acento:#141518;
  --titulo:var(--sans);--titulo-peso:700;
  --titulo-espacio:-.025em;--titulo-caja:none;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --barra:72px;
}

/* Sin modo oscuro a proposito: la ropa se fotografia sobre fondo
   claro y sobre negro queda como parches flotando. Las tiendas de
   ropa de verdad fuerzan el blanco por esta misma razon. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom));
}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--wa);outline-offset:2px}

.marco{max-width:1180px;margin:0 auto;padding:0 16px}
@media (min-width:760px){.marco{padding:0 24px}}

/* ---------- cabecera ---------- */
.tope{
  position:sticky;top:0;z-index:40;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.tope .fila{display:flex;align-items:center;gap:14px;padding:13px 0}
.tope .casa{min-width:0;flex:1}
.tope .nombre{
  font-size:18px;font-weight:750;letter-spacing:-.022em;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tope .donde{
  font-size:12.5px;color:var(--ink-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tope .buscar{flex:none}
.tope .buscar input{
  width:150px;border:1px solid var(--line);border-radius:999px;
  padding:9px 14px;background:var(--bg-2);font-size:13.5px;
}
.tope .buscar input::placeholder{color:var(--ink-4)}
@media (min-width:620px){.tope .buscar input{width:230px}}
@media (min-width:760px){
  .tope .fila{padding:17px 0}
  .tope .nombre{font-size:21px}
}

/* ---------- filtros ---------- */
.filtros{border-bottom:1px solid var(--line);background:var(--bg-2)}
.grupo{padding:12px 0;border-bottom:1px solid var(--line-2)}
.grupo:last-child{border-bottom:0}
.grupo .rotulo{
  font:700 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:9px;
}
.opciones{display:flex;gap:7px;flex-wrap:wrap}
.opcion{
  border:1px solid var(--line);border-radius:999px;background:var(--bg);
  padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:border-color .12s,background .12s;
}
.opcion:hover{border-color:var(--ink-4)}
.opcion[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* El filtro que llegó por enlace, para poder quitárselo. Baymard: lo que
   nunca hay que hacer es filtrar sin decir que se está filtrando. */
.puesto{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--ink);border-radius:999px;background:var(--ink);
  padding:7px 13px;font-size:13px;font-weight:600;color:var(--bg);
}
.puesto .bola{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px var(--aro)}
.puesto .quitar{font-size:16px;line-height:1;opacity:.65;margin-left:1px}
.puesto:hover .quitar{opacity:1}

/* colores como círculos: nadie elige ropa leyendo una lista de palabras */
.tintas{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.tinta{display:flex;flex-direction:column;align-items:center;gap:5px;width:54px}
.tinta .bola{
  width:30px;height:30px;border-radius:50%;
  box-shadow:0 0 0 1px var(--aro);
  transition:box-shadow .12s,transform .12s;
}
.tinta .nom{
  font-size:10.5px;color:var(--ink-3);text-align:center;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.tinta:hover .bola{transform:scale(1.07)}
.tinta[aria-current="true"] .bola{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ink)}
.tinta[aria-current="true"] .nom{color:var(--ink);font-weight:650}
.tinta.todas .bola{
  background:conic-gradient(#2b4a73,#17181c,#a8bacb,#6b4a35,#2b4a73);
}

/* ---------- rejilla ---------- */
.rejilla{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px 14px;
  padding:20px 0 28px;
}
@media (min-width:620px){.rejilla{grid-template-columns:repeat(3,1fr);gap:26px 20px}}
@media (min-width:980px){.rejilla{grid-template-columns:repeat(4,1fr)}}

.ficha{display:block}
.lienzo{
  aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--line-2);
  position:relative;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra);
}
.lienzo img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ficha:hover .lienzo img{transform:scale(1.035)}
.lienzo .sinfoto{color:var(--ink-4)}
.lienzo .sinfoto svg{width:30px;height:30px}
.sello{
  position:absolute;left:8px;top:8px;
  font:700 9.5px/1 var(--mono);letter-spacing:.06em;
  padding:5px 8px;border-radius:999px;
  background:var(--bad-bg);color:var(--bad);
}
.sello.mayor{background:var(--ok-bg);color:var(--ok)}

.ficha .datos{padding:11px 2px 0}
.ficha .codigo{font:600 10px/1 var(--mono);letter-spacing:.08em;color:var(--ink-4);margin-bottom:5px}
.ficha .titulo{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.ficha .valor{font-size:16px;font-weight:750;margin-top:7px;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.ficha .mayoreo{font-size:11.5px;color:var(--ok);font-weight:650;margin-top:3px;font-variant-numeric:tabular-nums}
.ficha .bolitas{display:flex;gap:4px;margin-top:9px}
.ficha .bolitas i{
  width:13px;height:13px;border-radius:50%;display:block;
  box-shadow:0 0 0 1px var(--aro);
}
.ficha .bolitas span{font:600 10px/13px var(--mono);color:var(--ink-4);margin-left:2px}
.ficha .medidas{font:600 10.5px/1.4 var(--mono);color:var(--ink-4);margin-top:7px;letter-spacing:.04em}

/* ---------- ficha de producto ---------- */
.pieza{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:860px){
  .pieza{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;padding:26px 0 10px;align-items:start}
}
.galeria{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--line)}
.galeria>*{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:3/4;background:var(--line-2)}
.galeria img{width:100%;height:100%;object-fit:cover}
@media (min-width:860px){
  .galeria{display:grid;grid-template-columns:1fr;gap:10px;overflow:visible;background:none;border-radius:12px}
  .galeria>*{border-radius:12px;overflow:hidden}
}
.sinfoto-grande{
  aspect-ratio:3/4;background:var(--line-2);border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-4);
}
.sinfoto-grande svg{width:44px;height:44px}

.detalle{padding:20px 0 10px}
@media (min-width:860px){.detalle{padding:0;position:sticky;top:92px}}
.detalle .codigo{font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink-4);margin-bottom:9px}
.detalle h1{font-size:24px;margin:0;letter-spacing:-.025em;line-height:1.18;text-wrap:balance}
@media (min-width:860px){.detalle h1{font-size:28px}}
.detalle .clase{
  display:inline-block;margin-top:11px;
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-3);
}
.detalle .cuento{margin:16px 0 0;font-size:14.5px;color:var(--ink-2)}

/* el bloque de precios: lo que separa a esta tienda de un catálogo */
.precios{
  margin-top:20px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.precios .uno{padding:15px 17px;display:flex;align-items:baseline;gap:11px}
.precios .uno b{font-size:28px;font-weight:780;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.precios .uno span{font-size:13px;color:var(--ink-3)}
.precios .mayor{
  padding:13px 17px;background:var(--ok-bg);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
}
.precios .mayor .et{
  font:700 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ok);opacity:.85;
}
.precios .mayor b{font-size:19px;font-weight:750;color:var(--ok);font-variant-numeric:tabular-nums}
.precios .mayor small{font-size:12.5px;color:var(--ok);opacity:.9;font-variant-numeric:tabular-nums}

.elige{margin-top:22px}
.elige .rotulo{
  font:700 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:11px;display:flex;align-items:baseline;gap:9px;
}
.elige .rotulo em{font-style:normal;font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-2);font-weight:600}

.tintas-g{display:flex;gap:11px;flex-wrap:wrap}
/* Flex en columna, no por capricho: .bola y .nom son <span>, o sea
   inline, y a un elemento inline el navegador le ignora width, height
   y margin. Sin esto la bola mide cero y el borde de 1px queda como
   una rayita al lado del nombre. */
.tinta-g{position:relative;width:60px;display:flex;flex-direction:column;align-items:center}
.tinta-g input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.tinta-g .bola{
  width:38px;height:38px;border-radius:50%;margin:0 auto;
  box-shadow:0 0 0 1px var(--aro);transition:box-shadow .12s;
}
.tinta-g .nom{
  font-size:10.5px;color:var(--ink-3);text-align:center;margin-top:6px;line-height:1.25;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tinta-g input:checked ~ .bola{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ink)}
.tinta-g input:checked ~ .nom{color:var(--ink);font-weight:650}
.tinta-g input:focus-visible ~ .bola{outline:2px solid var(--wa);outline-offset:3px}

.medidas-g{display:flex;gap:8px;flex-wrap:wrap}
.medida{position:relative}
.medida input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.medida span{
  display:block;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);
  padding:13px 16px;font:700 15px/1 var(--mono);color:var(--ink-2);
  min-width:56px;text-align:center;transition:border-color .12s;
}
.medida:hover span{border-color:var(--ink-4)}
.medida input:checked + span{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.medida input:focus-visible + span{outline:2px solid var(--wa);outline-offset:2px}
.medida .poco{
  /* Hereda de `.medida span` el borde, el relleno y el ancho mínimo, y
     entonces «QUEDAN 2» se dibuja como una píldora idéntica a las tallas:
     parece que se puede pulsar y no se puede. Es un aviso, no un botón. */
  display:block;border:0;background:none;padding:0;min-width:0;
  text-align:center;font:600 9px/1 var(--mono);
  color:var(--bad);margin-top:5px;letter-spacing:.04em;
}
.nota-elige{font-size:12.5px;color:var(--ink-4);margin:11px 0 0}

/* cuántos: lo que hace saltar el precio de mayoreo */
.cuantos{display:flex;align-items:center;gap:13px;margin-top:22px}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.stepper button{
  width:46px;height:48px;border:0;background:var(--bg);font-size:20px;
  color:var(--ink-2);cursor:pointer;line-height:1;
}
.stepper button:hover{background:var(--bg-2)}
.stepper input{
  width:58px;height:48px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font:700 17px/1 var(--mono);background:var(--bg);
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.atajos{display:flex;gap:7px;flex-wrap:wrap}
.atajo{
  border:1px solid var(--line);border-radius:9px;background:var(--bg);
  padding:9px 13px;font-size:12.5px;font-weight:650;color:var(--ink-2);cursor:pointer;
}
.atajo:hover{border-color:var(--ink-4)}
.atajo b{color:var(--ok)}

.agotado{
  margin-top:20px;padding:15px 17px;border-radius:12px;
  background:var(--bad-bg);color:var(--bad);font-size:14px;
}
.agotado b{display:block;margin-bottom:3px}

/* ---------- la barra de pedir ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--bg);border-top:1px solid var(--line);
  padding:11px 0 calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 20px -8px rgba(20,21,24,.16);
}
.barra .marco{display:flex;align-items:center;gap:14px}
.barra .cuenta{min-width:0;flex:1}
.barra .cuenta b{display:block;font-size:19px;font-weight:780;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.barra .cuenta span{
  display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.barra .cuenta span.ahorro{color:var(--ok);font-weight:650}
.pedir{
  flex:none;border:0;border-radius:12px;padding:15px 22px;background:var(--wa);color:#fff;
  font-size:15.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
}
.pedir:hover{background:var(--wa-2)}
.pedir svg{width:19px;height:19px;fill:currentColor;flex:none}

/* ---------- también te puede servir ---------- */
.tambien{border-top:1px solid var(--line);margin-top:34px;padding-top:22px}
.tambien h2{font-size:16px;margin:0 0 15px;letter-spacing:-.015em}

/* ---------- vacío y pie ---------- */
.nada{padding:60px 20px;text-align:center;color:var(--ink-3)}
.nada h2{font-size:18px;margin:0 0 8px;color:var(--ink)}
.nada p{margin:0 auto 20px;font-size:14.5px;max-width:34ch}
.volver{display:inline-block;border:1px solid var(--line);border-radius:10px;padding:12px 18px;font-size:14px;font-weight:650}

.pie{border-top:1px solid var(--line);margin-top:36px;padding:26px 0 30px;font-size:13px;color:var(--ink-3)}
.pie .nom{font-weight:700;color:var(--ink);font-size:14.5px}
.pie .dato{margin-top:5px}
.pie .firma{margin-top:16px;font-size:12px;color:var(--ink-4)}
.pie a{text-decoration:underline}

.atras{display:inline-flex;align-items:center;gap:7px;padding:16px 0 0;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.atras:hover{color:var(--ink)}

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

/* ---------- aviso de tienda de muestra ---------- */
/* Decirlo es obligatorio, pero tres renglones de letra chica antes de la
   primera prenda es regalarle la mejor parte de la pantalla al aviso. Una
   línea con un signo: quien quiera leerlo, lo abre. */
.aviso-demo{background:var(--bg-2);border-bottom:1px solid var(--line)}
.aviso-demo summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:8px 16px;max-width:1180px;margin:0 auto;
  font-size:12.5px;color:var(--ink-3);list-style:none;
}
.aviso-demo summary::-webkit-details-marker{display:none}
.aviso-demo .signo{
  flex:none;width:17px;height:17px;border-radius:50%;
  background:var(--ink-4);color:var(--bg);
  font:700 11px/17px var(--sans);text-align:center;
}
.aviso-demo .que{font-weight:600;color:var(--ink-2)}
.aviso-demo .mas{margin-left:auto;font-size:11.5px;text-decoration:underline}
.aviso-demo[open] .mas{text-decoration:none}
.aviso-demo p{
  max-width:1180px;margin:0 auto;padding:0 16px 11px 41px;
  font-size:12.5px;line-height:1.5;color:var(--ink-3);
}

/* ---------- la letra elegida ---------- */
/* Sólo los títulos cambian de familia. El cuerpo se queda en la del
   teléfono siempre: es la que se lee rápido y la que ya está cargada. */
.tope .nombre,.portada h1,.detalle h1,.tambien h2,.nada h2{
  font-family:var(--titulo);font-weight:var(--titulo-peso);
  letter-spacing:var(--titulo-espacio);text-transform:var(--titulo-caja);
}
.ficha .titulo{font-family:var(--titulo);text-transform:var(--titulo-caja)}

/* El acento manda en lo que es plata: el precio de mayoreo y el sello. */
.ficha .mayoreo,.precios .mayor b,.precios .mayor small,.precios .mayor .et{color:var(--acento)}
.sello.mayor{background:color-mix(in srgb,var(--acento) 12%,var(--bg));color:var(--acento)}

/* ---------- portada ---------- */
/* Lo primero que se ve. Tiene que decir de qué tienda se trata antes de que
   nadie mire una prenda, y caber en media pantalla de teléfono para que la
   mercadería asome por abajo: una portada a pantalla completa parece el
   final de la página y la gente no baja. */
.portada{
  background:var(--bg-2);border-bottom:1px solid var(--line);
  padding:38px 0;text-align:center;
}
.portada h1{font-size:27px;margin:0;line-height:1.15;text-wrap:balance}
.portada p{
  margin:11px auto 0;font-size:14.5px;color:var(--ink-3);
  max-width:46ch;line-height:1.5;
}
.portada.con-foto{
  background-size:cover;background-position:center;border-bottom:0;
  padding:62px 0;color:#fff;
}
.portada.con-foto h1{color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.portada.con-foto p{color:rgba(255,255,255,.93);text-shadow:0 1px 12px rgba(0,0,0,.35)}
@media (min-width:860px){
  .portada{padding:54px 0}
  .portada.con-foto{padding:92px 0}
  .portada h1{font-size:36px}
}