/* Vidriera de maquinas.

   Las tarjetas de filtro y las migas NO se estilan aca: son las de Parametros 76
   (.pcard, .pok, .pfoto, .pfil, .pk, .pops, .pmig en parametros.css). Si algun
   dia cambia el aspecto de las tarjetas alla, cambia aca solo. Lo propio de
   esta pantalla es la cinta, el tamano de las tarjetas y la grilla de maquinas. */

/* La pantalla arranca en los filtros, sin titulo arriba: la cinta se pega
   directo a la barra negra. */
.catzona{margin-top:0}
.catzona .pfil{margin-bottom:30px}
.catzona .pfil:last-of-type{margin-bottom:0}

/* ---- El tamano de las tarjetas ----
   Un solo par de medidas, en variables, para que el paso 2 en adelante y las
   maquinas no se puedan desincronizar. */
.catzona{--gmin:260px;--gmax:340px}

/* PASO 1 (tipo de maquina): tarjeta chica. Es la portada del catalogo, una
   fila de botones con foto, y tiene que entrar entera en la primera pantalla.
   En Parametros repartir todo el ancho queda bien porque las filas siempre
   tienen varias tarjetas; aca una rama puede tener dos opciones y con auto-fit
   cada una se comeria media pantalla. Por eso el tope. */
.catzona .pops{grid-template-columns:repeat(auto-fit,minmax(150px,200px));justify-content:center}

/* PASO 2 EN ADELANTE: la misma tarjeta que las maquinas que van a aparecer
   debajo. A esa altura el visitante ya esta mirando producto, y una tarjeta
   mas chica que la de abajo se lee como algo secundario. */
.catzona .pops.grande{grid-template-columns:repeat(auto-fit,minmax(var(--gmin),var(--gmax)))}
.catzona .pops.grande .pfoto.op{aspect-ratio:4/3}

/* Alto de dos renglones aunque el nombre entre en uno: sin esto "Estabilizadores
   de tension" estira su tarjeta y deja la fila despareja. */
.catzona .pcard .tx b{display:block;min-height:2.6em}

/* La cinta: misma idea que .pcab en Parametros, pero encajada en .wrap.
   Los margenes negativos la estiran hasta los bordes del contenido; sin eso,
   al pasar las tarjetas por detras se verian asomar por los costados. El fondo
   tiene que ser opaco por el mismo motivo. */
.ccab{position:sticky;top:var(--hdr);z-index:40;background:var(--paper);
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin:0 -24px 26px;padding:14px 24px 15px;border-bottom:1px solid var(--line)}
.ccab .k{font-size:13px;color:var(--mut);flex:none}
.ccab b{font-size:14px;font-weight:600;flex:none}
.ccambiar{margin-left:auto;font-size:12.5px;color:var(--mut);cursor:pointer;
border-bottom:1px solid var(--line2);flex:none}
.ccambiar:hover{color:var(--red);border-bottom-color:var(--red)}

.mqgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--gmin),var(--gmax)));
gap:18px;justify-content:center;margin-top:34px}
.mq76{background:var(--paper);border:1px solid var(--line);border-radius:12px;
overflow:hidden;display:flex;flex-direction:column;transition:.24s}
.mq76:hover{border-color:var(--red);
box-shadow:0 0 0 1px var(--red),0 16px 36px rgba(217,28,38,.12)}

.mqfoto{aspect-ratio:4/3;background:var(--surf2);display:flex;align-items:center;
justify-content:center;overflow:hidden;border-bottom:1px solid var(--line)}
.mqfoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.mq76:hover .mqfoto img{transform:scale(1.04)}
.mqsin{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:#B9B9B4}

.mqcuerpo{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
.mqtipo{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.15em;
text-transform:uppercase;color:var(--red)}
.mq76 h3{font-size:15.5px;font-weight:600;line-height:1.32}
.mqmeta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--mut)}
.mqmeta i{width:3px;height:3px;border-radius:50%;background:var(--line2);display:block;flex:none}
.mq76 p{font-size:13.5px;color:var(--mut);line-height:1.5}

.catmsg{border:1px solid var(--line);border-radius:4px;background:var(--surf);
padding:26px;text-align:center;font-size:14.5px;color:var(--mut);margin-top:34px}

/* Aire despues de la grilla para que el ultimo salto pueda dejar los
   resultados arriba de todo. Solo cuando hay algo abajo: mientras quede un
   filtro por elegir, la zona esta vacia y reservarle una pantalla dejaria un
   hueco enorme debajo de las tarjetas. */
#catres.con{min-height:calc(100vh - var(--hdr) - 160px)}

@media(max-width:640px){
.catzona{--gmin:220px;--gmax:1fr}
.catzona .pops{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.ccab{gap:7px;padding:11px 24px 12px}
.ccab .k{display:none}
}