/* INSUMOS Y REPUESTOS

   LAS TARJETAS DEL PRIMER PASO NO SE ESTILAN ACA. Son las mismas de Parametros
   76 (.pcard, .pok, .pfoto, .pfil, .pk, .pops en parametros.css) con los
   tamanos de la vidriera de maquinas (catalogo.css), y por eso el contenedor
   lleva la clase .catzona: hereda todo de ahi. Si algun dia cambia el aspecto
   de esas tarjetas, cambia aca solo y sin tocar este archivo.
   Lo propio de esta pantalla es del segundo paso para abajo: los chips de
   familia, el buscador y la grilla de productos.

   Todo lleva prefijo ins- para no chocar con las mq- de maquinas. */

.insz{margin-top:0}

/* ---- segundo paso: familia y buscador ----
   No es sticky a proposito: la cinta (.ccab) ya lo es, y dos barras pegadas
   una arriba de la otra se comen media pantalla en una notebook. */
.insbarra{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:26px 0 0}

.inschips{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.inschip{font:500 12.5px/1 'IBM Plex Sans',system-ui,sans-serif;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line,#e6e6ea);background:var(--paper,#fff);
  color:var(--mut,#6b6b73);transition:.15s}
.inschip:hover{border-color:var(--red,#e11b22);color:var(--ink,#141416)}
.inschip.on{background:var(--ink,#141416);border-color:var(--ink,#141416);color:#fff}

.insbus{flex:none;width:250px}
.insbus input{width:100%;padding:9px 13px;border-radius:8px;outline:0;
  border:1px solid var(--line,#e6e6ea);background:var(--paper,#fff);
  font:400 14px 'IBM Plex Sans',system-ui,sans-serif;color:var(--ink,#141416)}
.insbus input:focus{border-color:var(--red,#e11b22)}

.inscuenta{padding:14px 0 0;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;letter-spacing:.04em;color:var(--mut,#6b6b73)}

/* ---- la grilla de productos ---- */
.insgrid{display:grid;gap:18px;padding:16px 0 8px;
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}

.inscard{display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper,#fff);border:1px solid var(--line,#e6e6ea);
  border-radius:12px;transition:.24s}
.inscard:hover{border-color:var(--red,#e11b22);
  box-shadow:0 0 0 1px var(--red,#e11b22),0 16px 36px rgba(217,28,38,.12)}

/* contain y no cover: son fotos de producto sobre fondo claro, muchas sacadas
   con el celular en el deposito. Recortarlas para llenar el cuadrado le corta
   la mitad al tubo o al panal. El multiply funde los fondos blancos con el gris
   de la celda para que no se vea el recuadro de la foto. */
.insfoto{aspect-ratio:1/1;background:var(--surf2,#fafafb);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line,#e6e6ea)}
.insfoto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.inssin{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#B9B9B4}

.inscuerpo{display:flex;flex-direction:column;flex:1;padding:14px 15px 15px}
.insfam{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--red,#e11b22);margin-bottom:7px}
.inscuerpo h3{font-size:14.5px;font-weight:600;line-height:1.32;margin:0 0 6px}

/* Dos lineas y corta. Las descripciones de Tienda Nube van de una linea a
   veinte, y sin tope las tarjetas quedan de alturas distintas y la grilla se
   desarma. */
.inscuerpo p{margin:0 0 12px;font-size:12.8px;line-height:1.5;
  color:var(--mut,#6b6b73);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* margin-top:auto empuja precio y boton al fondo: asi quedan alineados entre
   tarjetas aunque los nombres ocupen distinta cantidad de lineas. */
.inspie{margin-top:auto;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.insp{font-family:'Days One',sans-serif;font-size:17px}
.insst{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:#1a7f37;
  background:#e9f6ed;padding:4px 8px;border-radius:999px}

.insbtn{margin-top:12px;display:block;text-align:center;text-decoration:none;
  background:var(--red,#e11b22);color:#fff;border-radius:8px;padding:10px;
  font:600 13px 'IBM Plex Sans',system-ui,sans-serif}
.insbtn:hover{background:#c4161c}

.insmsg{border:1px solid var(--line,#e6e6ea);border-radius:4px;
  background:var(--surf,#fafafb);padding:26px;text-align:center;
  font-size:14.5px;color:var(--mut,#6b6b73);margin-top:26px}

/* Aire despues de la grilla para que el salto al elegir familia pueda dejar
   los resultados arriba de todo. Solo cuando hay algo abajo: mientras no se
   eligio Insumos o Repuestos, la zona esta vacia y reservarle una pantalla
   dejaria un hueco enorme debajo de las dos tarjetas. */
#insres.con{min-height:calc(100vh - var(--hdr,60px) - 160px)}

@media(max-width:640px){
  .insbus{width:100%}
  .insgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .inscuerpo{padding:11px 12px 12px}
  .insp{font-size:15px}
}