:root{--fondo:#F5F5F3;--tinta:#121212;--suave:#6b6b6b;--linea:#d3d3cf;--chip:#ebebe7}
 *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
 body{margin:0;background:var(--fondo);color:var(--tinta);
      font-family:'Poppins',system-ui,sans-serif;font-weight:300}
 header{padding:26px 16px 10px;text-align:center}
 .logos{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:14px}
 .logos img{height:52px;width:auto}
 .logos .div{width:1px;height:38px;background:var(--linea)}
 h1{font-family:'Poiret One',serif;font-size:30px;letter-spacing:.06em;margin:0}
 h1 span{display:block;font-family:'Great Vibes',cursive;font-size:30px;margin-top:-6px}
 .meta{color:var(--suave);font-size:12px;margin-top:8px}
 .filtros{position:sticky;top:0;z-index:20;background:var(--fondo);
          padding:12px 10px;border-bottom:1px solid var(--linea);
          display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
 .filtros::-webkit-scrollbar{display:none}
 .filtros button{flex:0 0 auto;border:1px solid var(--linea);background:transparent;
   color:var(--suave);border-radius:999px;padding:7px 15px;font-size:12.5px;
   font-family:inherit;font-weight:400;cursor:pointer}
 .filtros button.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
 .buscar{padding:10px 14px 0}
 .buscar input{width:100%;padding:11px 14px;border:1px solid var(--linea);
   background:#fff;border-radius:10px;font-family:inherit;font-size:14px;font-weight:300}
 .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
       gap:20px;padding:16px 14px 60px;max-width:1280px;margin:0 auto}
 .card{background:#fff;border:1px solid var(--linea);overflow:hidden;
       display:flex;flex-direction:column}
 .foto{position:relative;width:100%;aspect-ratio:3/4;background:#efefec;overflow:hidden}
 .foto img{width:100%;height:100%;object-fit:cover;display:block;
   opacity:1;transition:opacity .18s ease}
 .foto img.cambiando{opacity:0}
 .cat{position:absolute;left:0;bottom:0;background:rgba(255,255,255,.92);
   padding:5px 12px;font-size:10.5px;letter-spacing:.11em;font-weight:500}
 /* boton para bajar la foto con el nombre y el codigo escritos encima */
 .bajar{position:absolute;top:9px;right:9px;width:35px;height:35px;
   display:flex;align-items:center;justify-content:center;
   border:none;border-radius:50%;cursor:pointer;color:var(--tinta);
   background:rgba(255,255,255,.93);box-shadow:0 1px 4px rgba(0,0,0,.16);
   transition:transform .15s ease,background .15s ease}
 .bajar:hover{background:#fff;transform:scale(1.08)}
 .bajar:active{transform:scale(.94)}
 .bajar.trabajando{opacity:.45;pointer-events:none}
 @media (max-width:520px){ .bajar{width:39px;height:39px;top:8px;right:8px} }
 .cuerpo{padding:13px 14px 16px}
 .nombre{font-family:'Poiret One',serif;font-size:17px;line-height:1.22;
   letter-spacing:.02em;min-height:42px}
 .tallas{font-size:13px;margin-top:9px}
 .codigo{font-size:11.5px;font-weight:500;letter-spacing:.06em;margin-top:8px}
 .codigo small{display:block;font-size:8.5px;color:var(--suave);letter-spacing:.14em;font-weight:400}
 .precio{font-size:16px;margin-top:9px}
 .paleta{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap;align-items:center}
 .paleta .rot{width:100%;font-size:8.5px;letter-spacing:.14em;color:var(--suave);
   font-weight:500;margin-bottom:-4px}
 .sw{width:26px;height:26px;border:1px solid var(--linea);cursor:pointer;
   padding:0;background-clip:padding-box;position:relative;transition:transform .12s}
 .sw:active{transform:scale(.92)}
 .sw.on{outline:1.6px solid var(--tinta);outline-offset:2px;border-color:var(--tinta)}
 .unidades{display:flex;gap:4px;margin-top:14px;flex-wrap:wrap}
 .u{border:1px solid var(--linea);min-width:31px;text-align:center;padding:3px 0}
 .u b{display:block;font-size:10.5px;font-weight:500}
 .u span{display:block;font-size:9px;color:var(--suave)}
 .u.no{border-color:#ececea;color:#c3c3bf}
 .u.no b,.u.no span{color:#c3c3bf}
 .vacio{text-align:center;color:var(--suave);padding:50px 20px;font-size:14px}
 footer{text-align:center;color:var(--suave);font-size:10.5px;
   letter-spacing:.12em;padding:0 0 34px}