/* 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}

/* AIRE ENTRE PASOS. Cada paso es una pregunta distinta y tiene que leerse como
   tal: con poco espacio, las tarjetas de un paso y las del siguiente se ven
   como una sola grilla larga y el titulo del medio se pierde adentro. */
.catzona .pfil{margin-bottom:52px}
.catzona .pfil:last-of-type{margin-bottom:0}

/* El primero necesita aire ARRIBA tambien: sin eso su titulo queda pegado a la
   cinta negra de arriba -- o a la barra del sitio cuando todavia no hay cinta --
   y se lee como parte de esa franja en vez de como el encabezado de la fila de
   tarjetas que tiene debajo. */
.catzona .pfil:first-of-type{padding-top:30px}

/* EL TITULO DE CADA PASO, grande y centrado.
   Estaba en el tamano de una etiqueta al pie y quedaba flotando arriba a la
   izquierda de una fila de fotos: se perdia justo cuando es lo que dice QUE
   hay que elegir. Centrado queda sobre el conjunto de tarjetas -- sobre la del
   medio si son tres, entre las dos si son dos -- y se lee como el titulo de
   ese grupo y no como una nota suelta.
   El espaciado entre letras se mantiene ancho: es lo que le da aire de rotulo
   y lo distingue de un titulo de contenido. */
.catzona .pk{text-align:center;font-size:16.5px;letter-spacing:.2em;
  margin-bottom:22px;color:var(--mut)}

/* ---- 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:280px;--gmax:360px}

/* 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 tarjeta de filtro CON foto: el texto va encima ----
   Sin foto la tarjeta es un rectangulo gris con el nombre abajo, y esta bien:
   no hay nada que mostrar. Cuando SI hay foto, poner el nombre debajo parte la
   tarjeta en dos y le roba a la foto un tercio del alto justo cuando la foto
   es lo que se vino a ver.

   Solo aplica en la vidriera. En Parametros 76 las fotos de operacion llevan
   la palabra grabada en el material (la de cortar es CORTAR cortado en MDF) y
   un rotulo encima taparia justo eso. */
.catzona .pcard.confoto{background:#111113}
.catzona .pcard.confoto .pfoto.op{aspect-ratio:1/1}
.catzona .pops.grande .pcard.confoto .pfoto.op{aspect-ratio:4/3}
.catzona .pcard.confoto .tx{position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:26px 12px 11px;
background:linear-gradient(180deg,rgba(10,10,12,0) 0%,rgba(10,10,12,.34) 34%,rgba(10,10,12,.82) 100%)}
.catzona .pcard.confoto .tx b{color:#fff;min-height:0;
text-shadow:0 1px 10px rgba(0,0,0,.5)}
.catzona .pcard.confoto .tx span{color:rgba(255,255,255,.78);margin-top:1px;
text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* 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. */
.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)}

/* ---- LA TARJETA DE MAQUINA ----

   TODAS SE VEN IGUAL: la imagen ocupa la celda entera y el texto se apoya
   encima. No hay dos formatos segun si la maquina tiene foto cargada o no.

   POR QUE: antes las que tenian foto quedaban oscuras con el texto encima y
   las que no, con una caja blanca debajo del gris del placeholder. En una
   misma fila convivian tarjetas negras y blancas, y esa diferencia -que solo
   dice "a esta le falta la foto", un dato interno nuestro- se leia como si
   fueran dos clases de producto.

   LA FOTO VA CUADRADA. Con 4/3 el texto encima se comia casi la mitad del alto
   y de la maquina se veia la tapa nomas. El cuadrado le da altura a la imagen
   sin ensanchar la tarjeta: el mismo texto pasa a ocupar un tercio.

   La clase confoto que pone catalogo.js quedo sin efecto propio: se conserva
   porque distingue en el HTML cual tiene imagen de verdad. */
.mqgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--gmin),var(--gmax)));
gap:20px;justify-content:center;margin-top:12px}

.mq76{position:relative;background:#111113;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)}

/* El fondo oscuro tambien cuando falta la foto: es lo que deja que el texto
   blanco se lea igual en las dos. */
.mqfoto{aspect-ratio:1/1;background:#1B1B20;display:flex;align-items:center;
justify-content:center;overflow:hidden}
.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:rgba(255,255,255,.32)}

/* El texto, apoyado sobre el borde de abajo. El degrade arranca transparente y
   termina casi opaco: tapa lo justo para que se lea y deja ver la foto. */
.mqcuerpo{position:absolute;left:0;right:0;bottom:0;z-index:2;
display:flex;flex-direction:column;gap:5px;padding:44px 15px 14px;
background:linear-gradient(180deg,rgba(10,10,12,0) 0%,rgba(10,10,12,.42) 36%,rgba(10,10,12,.9) 100%)}

/* El rojo de la marca se aclara: sobre foto oscura, el #d91c26 plano pierde
   contraste y se lee apagado. */
.mqtipo{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.15em;
text-transform:uppercase;color:#FF7A80;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.mq76 h3{font-size:15.5px;font-weight:600;line-height:1.32;color:#fff;
text-shadow:0 1px 10px rgba(0,0,0,.55)}
.mqmeta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
font-family:"IBM Plex Mono",monospace;font-size:11.5px;
color:rgba(255,255,255,.80);text-shadow:0 1px 8px rgba(0,0,0,.55)}
.mqmeta i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.45);
display:block;flex:none}

/* El resumen, a dos renglones: es lo unico de largo variable y sin tope se
   comeria la foto en las maquinas que tienen descripcion larga. */
.mq76 p{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.74);
text-shadow:0 1px 8px rgba(0,0,0,.55);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.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}

/* SEPARACION ENTRE EL ULTIMO PASO Y LOS RESULTADOS.
   Es el corte mas importante de la pantalla: arriba se elige, abajo aparece lo
   elegido. Pegados, las maquinas parecian un cuarto paso mas de filtros. */
#catres{margin-top:40px;padding-top:36px;border-top:1px solid var(--line)}

/* Aire despues de la grilla para que el ultimo salto pueda dejar los
   resultados arriba de todo. Solo cuando hay algo abajo. */
#catres.con{min-height:calc(100vh - var(--hdr) - 160px)}
/* Vacia no lleva ni linea ni aire: no separa nada. */
#catres:not(.con){margin-top:0;padding-top:0;border-top:0}

@media(max-width:640px){
.catzona{--gmin:220px;--gmax:1fr}
.catzona .pops{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.catzona .pfil{margin-bottom:38px}
.catzona .pfil:first-of-type{padding-top:22px}
.catzona .pk{font-size:14px;letter-spacing:.16em;margin-bottom:16px}
.ccab{gap:7px;padding:11px 24px 12px}
.ccab .k{display:none}
#catres{margin-top:28px;padding-top:26px}
/* En pantalla chica la tarjeta es mas angosta y el texto encima ocupa
   proporcionalmente mas: se achica el aire de arriba del degrade. */
.mqcuerpo{padding:34px 12px 12px}
}