/* =============================================================================
   Grupo Automotores — sitio público
   catalogo.css · grilla de vehículos, barra de filtros y paginación

   FASE 3 DEL REDISEÑO. Cubre `_vehiculos_grid.html`, `vehiculos_list.html` y
   `oportunidades.html`.

   `.ga-vcard` es la tarjeta de vehículo de TODO el sitio: la usan el catálogo,
   "últimos ingresos", la banda 2 del home y los relacionados de la ficha. Si
   cambia acá, cambia en las cuatro — que es exactamente lo que se quería.

   El estado vacío (`.ga-empty`) vive en shell.css: lo comparten seis
   pantallas y shell.css lo carga todo el sitio.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   PANEL DE FILTROS — columna izquierda

   Los filtros van apilados al costado. La grilla pierde el ancho del panel y
   pasa de 4 a 3 columnas; a cambio los siete se leen de corrido con su
   etiqueta encima, en vez de competir por una sola fila horizontal.

   En pantalla chica un panel al costado no existe, y apilado arriba de los
   resultados empuja los autos fuera de la pantalla: ahí colapsa detrás de un
   boton "Filtros" que muestra cuantos hay puestos.

   El sitio anterior tambien tenia sidebar, pero su version mobile abria un
   offcanvas cuyo contenido era el texto "usa el formulario lateral para
   filtrar" — un callejon sin salida. Este colapsa el panel de verdad.
   --------------------------------------------------------------------------- */
.ga-cat {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: var(--ga-s-8);
  align-items: start;
  max-width: var(--ga-wrap);
  margin: 0 auto;
  padding: var(--ga-s-8) var(--ga-gutter) var(--ga-s-16);
}
@media (max-width: 900px) {
  .ga-cat { grid-template-columns: minmax(0, 1fr); gap: var(--ga-s-5); }
}

.ga-fside {
  position: sticky;
  top: calc(var(--ga-nav-h) + var(--ga-s-5));
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r-lg);
  box-shadow: var(--ga-el);
  overflow: hidden;
}
@media (max-width: 900px) { .ga-fside { position: static; } }

.ga-fside__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ga-s-3);
  padding: var(--ga-s-4) var(--ga-s-5);
  border-bottom: 1px solid var(--ga-bone-200);
}
.ga-fside__head h2 {
  font-family: var(--ga-font-mono);
  font-size: var(--ga-t-lab);
  font-weight: var(--ga-w-med);
  letter-spacing: var(--ga-track-lab);
  text-transform: uppercase;
  color: var(--ga-on-bone-mut);
  margin: 0;
}
.ga-fside__limpiar {
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-xs);
  color: var(--ga-gold-ink);
  text-decoration: none;
}
.ga-fside__limpiar:hover { color: var(--ga-on-bone); }
.ga-fside__body { padding: var(--ga-s-5); display: flex; flex-direction: column; gap: var(--ga-s-5); }

/* Un filtro: etiqueta arriba, control abajo. */
.ga-filtro { display: flex; flex-direction: column; gap: var(--ga-s-2); }
.ga-filtro > span,
.ga-filtro > label {
  font-family: var(--ga-font-mono);
  font-size: .625rem;
  font-weight: var(--ga-w-med);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ga-on-bone-mut);
}
.ga-filtro__par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ga-s-2); }

.ga-field {
  display: flex;
  align-items: center;
  gap: var(--ga-s-2);
  background: var(--ga-bone-50);
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r);
  padding: 0 var(--ga-s-3);
  min-height: 42px;
  color: var(--ga-on-bone-mut);
}
.ga-field:focus-within {
  border-color: var(--ga-gold-ink);
  box-shadow: 0 0 0 3px var(--ga-goldink-a16);
}
.ga-field > .bi { flex: none; font-size: .875rem; opacity: .7; }

/* Los controles nativos van desnudos: el borde y el foco los pone `.ga-field`.
   Asi un select y un input se ven iguales, que es lo que Bootstrap no da. */
.ga-field input,
.ga-field select {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 9px 0;
  font-family: var(--ga-font-body);
  font-size: var(--ga-t-xs);
  color: var(--ga-on-bone);
  appearance: none;
}
.ga-field input:focus,
.ga-field select:focus { outline: none; }
.ga-field input::placeholder { color: var(--ga-on-bone-mut); }
.ga-field select { cursor: pointer; padding-right: var(--ga-s-4); }
.ga-field--select { position: relative; }
.ga-field--select::after {
  content: '';
  position: absolute;
  right: var(--ga-s-3);
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--ga-on-bone-mut);
  border-bottom: 1.5px solid var(--ga-on-bone-mut);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

/* Control segmentado: label + radio nativo. Anda sin JS y se navega con el
   teclado. En la columna angosta ocupa todo el ancho, repartido en tres. */
.ga-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px;
  gap: 2px;
  background: var(--ga-bone-200);
  border-radius: var(--ga-r-lg);
}
.ga-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ga-seg label {
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-xs);
  color: var(--ga-on-bone-mut);
  padding: 8px 4px;
  border-radius: var(--ga-r);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  transition: background var(--ga-dur-fast) var(--ga-ease),
              color var(--ga-dur-fast) var(--ga-ease);
}
.ga-seg input:checked + label {
  background: var(--ga-bone-0);
  color: var(--ga-on-bone);
  font-weight: var(--ga-w-med);
  box-shadow: var(--ga-el);
}
.ga-seg input:focus-visible + label { outline: 2px solid var(--ga-gold-ink); outline-offset: 1px; }

/* Boton de plegado — solo en pantallas chicas. */
.ga-fside__toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: var(--ga-s-3);
  padding: var(--ga-s-4) var(--ga-s-5);
  background: none;
  border: 0;
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-sm);
  font-weight: var(--ga-w-med);
  color: var(--ga-on-bone);
  cursor: pointer;
  min-height: 48px;
}
.ga-fside__toggle .bi-chevron-down { margin-left: var(--ga-s-2); transition: transform var(--ga-dur-fast) var(--ga-ease); }
.ga-fside__toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.ga-fside__cuenta {
  font-family: var(--ga-font-mono);
  font-size: .6875rem;
  background: var(--ga-ink-800);
  color: var(--ga-gold);
  border-radius: var(--ga-r-xs);
  padding: 2px 7px;
  margin-left: auto;
}
@media (max-width: 900px) {
  .ga-fside__toggle { display: flex; }
  .ga-fside__head { display: none; }
  /* Colapsado por defecto: los autos primero. */
  .ga-fside__panel { display: none; }
  .ga-fside__panel.is-open { display: block; }
}

/* Encabezado de resultados: la cuenta, el orden y los chips de lo filtrado. */
.ga-res__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ga-s-3);
  /* El corte que separa el encabezado de resultados de la grilla. Sin él, el
     conteo y los chips flotaban sobre las tarjetas sin nada que los agrupara. */
  padding-bottom: var(--ga-s-4);
  border-bottom: 2px solid var(--ga-on-bone);
  margin-bottom: var(--ga-s-6);
}
.ga-res__orden { display: flex; align-items: center; gap: var(--ga-s-2); flex: none; }
.ga-res__orden .ga-field { min-height: 38px; }
.ga-res__orden .ga-dd { min-width: 168px; }

/* Conteo, separador y chips comparten renglón con el orden. Los chips estaban
   en una fila propia debajo: entre el encabezado y la primera tarjeta había
   dos renglones de interfaz, y el número de resultados quedaba lejos del
   filtro que lo explica. */
.ga-res__izq {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ga-s-3);
  min-width: 0;
}
.ga-res__sep {
  width: 1px;
  height: 18px;
  background: var(--ga-bone-300);
  flex: none;
}
@media (max-width: 620px) {
  /* En pantalla angosta el separador queda colgando al final de un renglón. */
  .ga-res__sep { display: none; }
}

/* Chips de filtro activo: se quitan de a uno. El sidebar del sitio anterior
   obligaba a volver al panel a buscar que estaba tildado; el chip dice que
   esta puesto y lo saca de un clic. */
.ga-chips { display: flex; flex-wrap: wrap; gap: var(--ga-s-2); align-items: center; }
.ga-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-s-2);
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-xs);
  padding: 6px 11px;
  border-radius: var(--ga-r);
  background: var(--ga-ink-800);
  border: 1px solid var(--ga-ink-800);
  color: var(--ga-gold);
  text-decoration: none;
  line-height: 1.2;
}
.ga-chip:hover { background: var(--ga-ink-700); color: var(--ga-gold-lit); }
.ga-chip .bi { font-size: .7rem; opacity: .8; }
.ga-chip__k {
  font-family: var(--ga-font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}
.ga-chip--clear { background: transparent; border-color: var(--ga-bone-300); color: var(--ga-on-bone-mut); }
.ga-chip--clear:hover { background: transparent; border-color: var(--ga-gold-ink); color: var(--ga-gold-ink); }

.ga-count { font-family: var(--ga-font-mono); font-size: var(--ga-t-xs); color: var(--ga-on-bone-mut); }
.ga-count b { color: var(--ga-on-bone); font-weight: var(--ga-w-mono-bold); }

/* ---------------------------------------------------------------------------
   CONTROL DE RANGO DE PRECIO

   Dos `input[type=range]` nativos, uno encima del otro. Nativos y no un
   componente propio por dos razones: el teclado y el lector de pantalla los
   manejan gratis, y en un telefono el sistema operativo ya sabe arrastrarlos.

   El truco de los dos superpuestos es el de siempre: los inputs no pintan
   nada (su pista es transparente) y encima se dibuja una pista propia. Para
   que el de abajo tambien se pueda agarrar, los inputs no reciben eventos y
   se los devuelve SOLO al thumb.
   --------------------------------------------------------------------------- */
.ga-rango {
  position: relative;
  height: 26px;
  margin: var(--ga-s-1) 2px var(--ga-s-2);
}

/* La pista visible. Va detras de los mandos y no recibe clics. */
.ga-rango__pista {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  transform: translateY(-50%);
  background: var(--ga-bone-200);
  border-radius: 2px;
  pointer-events: none;
}
/* El tramo elegido: la unica superficie dorada del panel. */
.ga-rango__activo {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--ga-gold-ink);
  border-radius: 2px;
}

.ga-rango__mando {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  /* Sin esto el input de arriba tapa al de abajo en toda su extension y el
     mando inferior no se puede agarrar nunca. */
  pointer-events: none;
}
.ga-rango__mando:focus { outline: none; }

/* El punto. Es lo unico del control que recibe eventos. */
.ga-rango__mando::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  background: var(--ga-bone-0);
  border: 2px solid var(--ga-gold-ink);
  box-shadow: 0 1px 3px rgba(33, 31, 29, .25);
  cursor: grab;
  transition: transform var(--ga-dur-fast) var(--ga-ease),
              box-shadow var(--ga-dur-fast) var(--ga-ease);
}
.ga-rango__mando::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  background: var(--ga-bone-0);
  border: 2px solid var(--ga-gold-ink);
  box-shadow: 0 1px 3px rgba(33, 31, 29, .25);
  cursor: grab;
}
.ga-rango__mando::-moz-range-track { background: none; border: 0; }

.ga-rango__mando:hover::-webkit-slider-thumb { transform: scale(1.12); }
.ga-rango__mando:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); }
.ga-rango__mando:hover::-moz-range-thumb { transform: scale(1.12); }

/* El foco tiene que verse: el control se navega con las flechas del teclado. */
.ga-rango__mando:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--ga-goldink-a16);
}
.ga-rango__mando:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--ga-goldink-a16);
}

/* La lectura del rango. Con los campos numéricos afuera del formulario, es la
   ÚNICA forma de saber en cuánto quedó: pasa de nota al pie a valor del
   control. Dos cajas rotuladas y no una línea "$X — $Y", porque con la línea
   suelta había que deducir cuál de los dos mandos movía cada número.

   Todo en mono con cifras tabulares: al arrastrar, los números no pueden
   bailar de ancho o la caja tiembla. */
/* UNA caja partida por una línea, no dos cajas separadas por aire. Desde y
   Hasta son los dos extremos de un mismo rango: separarlas en dos recuadros
   los presenta como dos filtros independientes. */
.ga-rango__cajas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--ga-bone-300);
  background: var(--ga-bone-0);
  margin: 0 0 var(--ga-s-3);
}
.ga-rango__caja {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
}
.ga-rango__caja + .ga-rango__caja { border-left: 1px solid var(--ga-bone-300); }
.ga-rango__caja > span {
  font-family: var(--ga-font-mono);
  font-size: var(--ga-t-lab);
  letter-spacing: var(--ga-track-lab);
  text-transform: uppercase;
  color: var(--ga-on-bone-mut);
}
.ga-rango__caja > b {
  font-family: var(--ga-font-mono);
  font-size: .8125rem;
  font-weight: var(--ga-w-med);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--ga-on-bone);
}

/* Los extremos absolutos del stock, debajo de la pista. Son referencia, no
   valor: por eso van chicos, apagados y con `aria-hidden` — el lector ya
   escucha el rango elegido por el `aria-live` de las cajas. */
.ga-rango__topes {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--ga-font-mono);
  font-size: var(--ga-t-lab);
  font-variant-numeric: tabular-nums;
  color: var(--ga-on-bone-mut);
}

@media (prefers-reduced-motion: reduce) {
  .ga-rango__mando::-webkit-slider-thumb { transition: none; }
  .ga-rango__mando:hover::-webkit-slider-thumb,
  .ga-rango__mando:active::-webkit-slider-thumb { transform: none; }
  .ga-rango__mando:hover::-moz-range-thumb { transform: none; }
}

/* ---------------------------------------------------------------------------
   GRILLA
   --------------------------------------------------------------------------- */
.ga-wrap { max-width: var(--ga-wrap); margin: 0 auto; padding: 0 var(--ga-gutter); }
.ga-sect { padding: var(--ga-s-10) 0 var(--ga-s-16); }

/* auto-FILL y no un número fijo de columnas: con el sitio a sangre, cuatro
   columnas en una pantalla de 1900 son tarjetas de 450px. Y auto-fill —no
   auto-fit— porque acá la lista está paginada: con auto-fit, una última página
   de dos autos los dibujaría con el ancho de seis. */
.ga-grid {
  display: grid;
  gap: var(--ga-s-4);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
@media (max-width: 1100px) { .ga-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .ga-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .ga-grid { grid-template-columns: minmax(0, 1fr); } }

/* Dentro del catálogo la grilla convive con el panel lateral, así que la
   columna útil es ~300px más angosta que la ventana. Pero el mínimo lo sigue
   poniendo `minmax`, no un número fijo de columnas: con el sitio a sangre,
   clavarla en 3 daba tarjetas de 490px en un monitor de 1900.

   Acá había además un salto invertido —2 columnas a 1180, 3 a 900, 2 otra
   vez a 820—, así que entre 820 y 900px la grilla SUMABA una columna al
   achicar la ventana. Con `minmax` el problema desaparece solo: el número de
   columnas sale del ancho disponible y no hay saltos que mantener a mano. */
.ga-cat .ga-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 480px) { .ga-cat .ga-grid { grid-template-columns: minmax(0, 1fr); } }

/* Mientras se recarga por AJAX. Sin spinner: la grilla se atenúa y deja de
   aceptar clics, que es información suficiente para una espera de ~200ms. */
.ga-loading { opacity: .45; pointer-events: none; transition: opacity var(--ga-dur-fast) var(--ga-ease); }

/* ---------------------------------------------------------------------------
   TARJETA DE VEHÍCULO
   --------------------------------------------------------------------------- */
.ga-vcard {
  display: flex;
  flex-direction: column;
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r-lg);
  overflow: hidden;
  box-shadow: var(--ga-el);
  transition: border-color var(--ga-dur-fast) var(--ga-ease),
              box-shadow var(--ga-dur-fast) var(--ga-ease);
}
.ga-vcard:hover { border-color: var(--ga-bone-300); box-shadow: var(--ga-el-2); }
.ga-vcard:focus-within { border-color: var(--ga-gold-ink); }

/* Un filete dorado que crece sobre el borde superior: el mismo gesto que el
   subrayado del menú, y la firma de la marca repetida donde se mira. */
.ga-vcard::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  height: 2px;
  width: 0;
  background: var(--ga-gold-ink);
  border-radius: var(--ga-r-lg) 0 0 0;
  transition: width 320ms var(--ga-ease);
  z-index: 2;
}
.ga-vcard:hover::before,
.ga-vcard:focus-within::before { width: calc(100% + 2px); }

/* La flecha se corre. Detalle chico, pero es lo que hace que la tarjeta se
   sienta viva al pasar por encima. */
.ga-vcard__go .bi { transition: transform var(--ga-dur-fast) var(--ga-ease); }
.ga-vcard:hover .ga-vcard__go .bi { transform: translateX(3px); }

.ga-vcard__shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ga-bone-200);
  overflow: hidden;
}
/* La foto se acerca apenas al pasar el mouse. Es el único movimiento de la
   tarjeta: el sitio anterior le hacía un tilt 3D, que es otra cosa. */
.ga-vcard__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ga-ease);
}
.ga-vcard:hover .ga-vcard__shot img { transform: scale(1.035); }

/* Placeholder: rayas diagonales finas en vez de un rectángulo gris con un
   icono adentro. Una unidad sin foto sigue siendo un hueco, pero deja de
   parecer que la página no cargó. */
.ga-vcard__ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ga-bone-300);
  font-size: 2.25rem;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ga-bone-200) 0 8px,
    var(--ga-bone-50) 8px 16px);
}

/* Los badges van en un contenedor flex, no posicionados uno en cada esquina.

   Antes el segundo se empujaba con un `style="left:auto;right:9px"` inline: la
   distancia entre los dos dependía del largo del texto y de lo ancha que
   quedara la tarjeta, así que no había forma de que se vieran parejos. En una
   fila flex el gap es fijo, se envuelven solos si no entran, y ninguno puede
   pisar al otro. */
.ga-vcard__badges {
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  /* Sin z-index a propósito: los badges van DESPUÉS de la foto en el DOM, así
     que ya pintan encima. Y un z-index acá los levantaría por sobre la capa
     invisible que hace clickeable la tarjeta — que es exactamente el bug que
     tenía el botón "Ver". Lo fija un test. */
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  pointer-events: none;   /* la tarjeta entera es el link: no interceptan clics */
}
.ga-vcard__badge {
  font-family: var(--ga-font-mono);
  font-size: .625rem;
  font-weight: var(--ga-w-med);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
  padding: 4px 8px;
  border-radius: var(--ga-r-xs);
  background: var(--ga-ink-800);
  /* Borde transparente en el badge base para que TODAS las variantes midan lo
     mismo. La variante "nuevo ingreso" agregaba 1px de borde y quedaba 2px más
     alta que la de al lado: era el desalineado que se veía. */
  border: 1px solid transparent;
  color: var(--ga-gold);
}
/* La distinción es un filete dorado, no un segundo color de fondo. Antes era
   blanco: poco contraste sobre una foto clara, y dos lenguajes distintos
   conviviendo en la misma esquina. */
.ga-vcard__badge--nuevo { border-color: var(--ga-gold); }

.ga-vcard__body { padding: 13px 14px 15px; display: flex; flex-direction: column; flex: 1; }

/* Chip de estado con punto: dice que hay un sistema detrás — y lo hay, el dato
   sale del peritaje y de la galería. */
.ga-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-s-2);
  font-family: var(--ga-font-mono);
  font-size: .6875rem;
  color: var(--ga-on-bone-mut);
}
.ga-stat::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ga-gold-ink);
  flex: none;
}

.ga-vcard__name {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-med);
  font-size: .9375rem;
  line-height: var(--ga-lh-snug);
  letter-spacing: var(--ga-track-name);
  color: var(--ga-on-bone);
  margin: var(--ga-s-2) 0 0;
}
.ga-vcard__name a { color: inherit; text-decoration: none; }
.ga-vcard__name a::after { content: ''; position: absolute; inset: 0; }

/* Filete fino entre el nombre y el pie. Sin él, precio y modelo se leen como
   un solo bloque de texto y el precio —que es lo que la gente vino a ver—
   pierde su renglón propio. No es el filete dorado: es estructura. */
/* Una sola línea entre el nombre y el pie. Había dos —ésta y el `border-top`
   del pie— separadas por unos pocos píxeles, y se leían como un renglón vacío
   en vez de como un corte. */
.ga-vcard__rule {
  display: block;
  height: 1px;
  background: var(--ga-bone-200);
  margin: var(--ga-s-3) 0 0;
}

.ga-vcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ga-s-3);
  margin-top: auto;
  padding-top: var(--ga-s-3);
  border-top: 1px solid var(--ga-bone-200);
}
/* 20px: es el numero que se compara al recorrer la grilla. */
.ga-price {
  font-family: var(--ga-font-mono);
  font-weight: var(--ga-w-mono-bold);
  font-size: 1.25rem;
  letter-spacing: var(--ga-track-num);
  font-variant-numeric: tabular-nums;
  color: var(--ga-on-bone);
}
.ga-price small {
  display: block;
  font-family: var(--ga-font-mono);
  font-weight: var(--ga-w-reg);
  font-size: .625rem;
  letter-spacing: .03em;
  color: var(--ga-on-bone-mut);
  margin-top: 2px;
}
.ga-vcard__go {
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-xs);
  font-weight: var(--ga-w-med);
  color: var(--ga-gold-ink);
  white-space: nowrap;
  text-decoration: none;
}

/* La tarjeta entera es clickeable: `.ga-vcard__name a::after` la cubre con
   una capa invisible.

   NO se le sube el z-index a nada de adentro. La versión anterior levantaba
   `.ga-vcard__badge` y `.ga-vcard__go` "para que la capa no los tape", pero la
   capa no tiene fondo: no tapaba nada visualmente, sólo interceptaba clics.
   Levantarlos los dejaba POR ENCIMA de la capa, y el resultado era que "Ver"
   —el único punto de la tarjeta que parece un botón— era el único que no
   respondía al clic, y encima sin cursor de mano.

   `.ga-vcard__go` además es ahora un link de verdad, así que funciona aunque
   alguien vuelva a tocar el apilamiento. */
.ga-vcard { position: relative; }
.ga-vcard__go:hover { color: var(--ga-gold-ink); }

/* ---------------------------------------------------------------------------
   PAGINACIÓN
   Clases propias: `.pagination` de Bootstrap la comparten entregas, noticias
   y novedades, que se rediseñan en la fase 7.
   --------------------------------------------------------------------------- */
.ga-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ga-s-2);
  margin-top: var(--ga-s-10);
}
.ga-pager a,
.ga-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--ga-s-3);
  font-family: var(--ga-font-mono);
  font-size: var(--ga-t-xs);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--ga-bone-300);
  border-radius: var(--ga-r);
  background: var(--ga-bone-0);
  color: var(--ga-on-bone);
  text-decoration: none;
}
.ga-pager a:hover { border-color: var(--ga-gold-ink); color: var(--ga-gold-ink); }
.ga-pager .is-current {
  background: var(--ga-ink-800);
  border-color: var(--ga-ink-800);
  color: var(--ga-gold);
  font-weight: var(--ga-w-med);
}


/* Una grilla de 3 para las bandas del home: ahí se muestran 6 vehículos y 3
   entregas, y en 4 columnas quedaban filas huérfanas —4+2 y 3+1— que leen como
   si faltara contenido. En el catálogo, donde la página se llena, siguen 4. */
/* La banda del inicio trae SIEMPRE seis: acá sí conviene auto-fit, para que
   las seis llenen el renglón en vez de dejar una pista vacía al final. */
.ga-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 480px) { .ga-grid--3 { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .ga-vcard__shot img { transition: none; }
  .ga-vcard:hover .ga-vcard__shot img { transform: none; }
  .ga-vcard::before { transition: none; }
}


/* ===========================================================================
   PANEL DE FILTROS — columna, no tarjeta

   Era una tarjeta blanca con radio y sombra flotando al costado de la grilla.
   El kit lo resuelve como una COLUMNA del documento: fondo del mismo color,
   un borde a la derecha que la separa de los resultados, y un filete por
   filtro. Es la diferencia entre "un widget al lado del contenido" y "la
   primera columna de la página".
   =========================================================================== */
@media (min-width: 901px) {
  .ga-fside {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--ga-bone-300);
    box-shadow: none;
    padding-right: var(--ga-s-6);
  }
  .ga-fside__body { gap: 0; }
  .ga-filtro {
    padding: var(--ga-s-4) 0;
    border-bottom: 1px solid var(--ga-bone-200);
  }
  .ga-filtro:last-of-type { border-bottom: 0; }
}