/* =============================================================================
   Grupo Automotores — sitio público
   home.css · las siete bandas del inicio

   FASE 5. El home anterior apilaba DOCE bandas del mismo peso visual, con tres
   problemas de fondo:

     · Novedades y Noticias eran dos franjas casi idénticas, pegadas.
     · Los banners de promoción competían con el carrusel del hero: los dos son
       banners administrables desde el panel.
     · "Categorías" y "Últimos ingresos" mandaban los dos al catálogo.
     · Y el hero era decorativo: no se podía buscar un auto desde ahí.

   Quedan siete, alternando carbón y marfil. La regla del ritmo: nunca dos
   bandas oscuras seguidas ni tres claras seguidas.

     1 hero            carbón      5 quiénes somos   carbón
     2 últimos ingresos marfil     6 al día          marfil
     3 servicios       carbón      7 dónde estamos   carbón
     4 entregas        marfil

   Reutiliza `.ga-vcard` y `.ga-grid` de catalogo.css: la tarjeta de vehículo
   es la misma que en el catálogo, no una variante.
   ========================================================================== */

.ga-band { position: relative; }

/* RITMO CARBON / MARFIL

   El orden ideal alterna banda por banda, pero tres de las siete son
   condicionales: sin vehiculos publicados, sin entregas o sin novedades, la
   banda no se dibuja y dos oscuras pueden quedar pegadas. Con la base vacia
   pasa de verdad: sin entregas, "Servicios" queda contra "Quienes somos".

   No se resuelve reordenando —el orden lo manda el contenido, no el color—
   sino garantizando la separacion: cuando dos bandas del mismo color quedan
   juntas, un filete dorado marca el corte. `ga-band--dark` la llevan todas las
   oscuras, el hero incluido, y existe solo para esta adyacencia.

   La adyacencia CLARA no estaba contemplada y es la que pasa hoy: sin
   entregas cargadas —que es el estado real de la base— la banda 3 no se
   dibuja y "Ultimos ingresos" queda contra "Tu usado", las dos sobre marfil.
   Entre las dos hay 128px de padding y ni un solo cambio de color: se leen
   como una sola banda larga que en el medio cambia de tema sin avisar. */
.ga-band--dark + .ga-band--dark { border-top: 1px solid var(--ga-gold-a20); }

/* La costura clara se desvanece hacia los extremos en vez de ser una linea
   entera. Sobre carbon un filete de punta a punta se lee como corte; sobre
   marfil se lee como el subrayado de un titulo o como el borde de una tabla,
   que es justo lo que no es. Desvanecida se lee como lo que es: una costura.

   Es el mismo gradiente que shell.css ya usa para el caso oscuro, y por eso
   va como `background-image`: el `background` de `.ga-band--bone` es una
   abreviatura, asi que esta regla —dos clases contra una— la pisa. */
.ga-band--bone + .ga-band--bone {
  background-image: linear-gradient(90deg,
    transparent, var(--ga-goldink-a30) 18%, var(--ga-goldink-a30) 82%, transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top;
}

.ga-band--ink { background: var(--ga-ink-800); color: var(--ga-on-ink); }
.ga-band--ink-d { background: var(--ga-ink-900); color: var(--ga-on-ink); }
.ga-band--bone { background: var(--ga-bone-50); color: var(--ga-on-bone); }
.ga-band__in {
  max-width: var(--ga-wrap);
  margin: 0 auto;
  padding: var(--ga-s-16) var(--ga-gutter);
}
@media (max-width: 700px) { .ga-band__in { padding: var(--ga-s-12) var(--ga-gutter); } }

/* Encabezado de banda: rótulo en mono, título, y el link "ver todo" a la
   derecha en desktop. */
.ga-bandhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ga-s-5);
  flex-wrap: wrap;
  margin-bottom: var(--ga-s-6);
}
/* Cuando el encabezado lleva la regla de ancho completo debajo, el aire lo
   pone la regla. Sin esto se sumaban los dos márgenes y quedaba una zanja
   entre el título y su contenido. */
.ga-bandhead:has(+ .ga-rule--full) { margin-bottom: 0; }
.ga-bandhead h2 {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-semi);
  font-size: var(--ga-t-h2);
  letter-spacing: var(--ga-track-disp);
  line-height: var(--ga-lh-tight);
  margin: var(--ga-s-2) 0 0;
  text-wrap: balance;
}
.ga-band--ink .ga-bandhead h2,
.ga-band--ink-d .ga-bandhead h2 { color: var(--ga-on-ink); }
.ga-bandhead p {
  font-size: var(--ga-t-sm);
  margin: var(--ga-s-2) 0 0;
  max-width: 56ch;
}
.ga-band--bone .ga-bandhead p { color: var(--ga-on-bone-mut); }
.ga-band--ink .ga-bandhead p,
.ga-band--ink-d .ga-bandhead p { color: var(--ga-on-ink-mut); }

/* ---------------------------------------------------------------------------
   1 · HERO

   El buscador va DENTRO del hero y no en una barra flotante debajo: es lo
   primero que hace alguien que entra a una concesionaria, y antes había que
   scrollear para encontrarlo.
   --------------------------------------------------------------------------- */
/* El hero tiene alto propio y el contenido se apoya ABAJO.

   Antes el alto salía del padding, así que la altura del hero dependía de
   cuánto texto trajera el banner cargado en el panel: con un título corto se
   achicaba a media pantalla y el buscador quedaba pegado al borde superior.
   Con alto fijo y el contenido anclado abajo, el tercio de arriba queda para
   la foto y la barra de búsqueda cae siempre en el mismo lugar. */
.ga-hero {
  position: relative;
  background: var(--ga-ink-900);
  overflow: hidden;
  isolation: isolate;
  /* Ocupa la pantalla entera menos la navbar, que es fija y le come su alto
     al `body` con un `padding-top`. `min-height` y no `height`: si el título
     que carga la agencia es largo, el hero crece en vez de recortarlo.

     `svh` (small viewport height) y no `vh` a secas: en el navegador de un
     teléfono, `100vh` mide la pantalla SIN la barra de direcciones, así que la
     barra de búsqueda —que está apoyada abajo— queda tapada por el chrome del
     navegador hasta que el usuario scrollea. La declaración con `vh` queda
     primero como respaldo para los navegadores que no entienden `svh`. */
  min-height: calc(100vh - var(--ga-nav-h));
  min-height: calc(100svh - var(--ga-nav-h));
  display: flex;
  align-items: flex-end;
}
@media (max-width: 700px) {
  /* En un teléfono el hero a pantalla completa deja el resto del sitio fuera
     de la vista y con el teclado abierto no entra nada. Alcanza con que ocupe
     la mayor parte. */
  .ga-hero { min-height: 0; }
}
.ga-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
/* Velo: sin esto el texto blanco sobre una foto clara es ilegible, y el
   resultado depende de qué foto suba la agencia.

   Hoy la agencia no tiene ningún banner cargado, así que el hero sale SIN
   foto — y eso es lo primero que ve cualquiera que entra. La trama y el halo
   dorado están para que ese caso se sostenga solo, no para decorar el caso
   con foto. El halo lo tapa el velo cuando hay imagen; la trama no, porque va
   por encima (`.ga-trama`, z-index 0) — pero baja a opacidad .22, que es lo
   que la deja como textura en vez de como reja sobre la foto. */
.ga-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(26, 24, 21, .94) 0%, rgba(26, 24, 21, .72) 55%, rgba(26, 24, 21, .55) 100%),
    radial-gradient(110% 80% at 82% 0%, rgba(197, 161, 73, .20) 0%, transparent 60%);
}

/* Sin banner cargado, el fondo queda en el degradé del `::after` —el velo y
   el halo dorado— y el isologo se apoya a la derecha, donde no hay texto.

   Nada de rayas: la textura competía con el degradé, que es lo que le da
   profundidad al hero, y lo aplanaba en un patrón repetido. La retícula volvió
   —`.ga-trama`— pero no como patrón: se disuelve desde el vértice superior
   izquierdo y no llega ni al buscador ni al isotipo, así que no compite con el
   degradé sino que lo acompaña. Una retícula pareja de punta a punta sigue
   estando descartada por el mismo motivo de siempre.

   El isologo va DEBAJO del velo (`z-index: -1`, y el `::after` del hero pinta
   después): así queda teñido por el mismo degradé que el resto del fondo en
   vez de aparecer pegado encima. Del lado derecho el velo es el más
   transparente del gradiente (.55), que es justo lo que lo deja leerse sin
   robarle atención al título.

   Es `background-image` sobre un `<span>` vacío y no un `<img>`: es
   decoración, no contenido — no tiene que estar en el árbol de accesibilidad
   ni aparecer en un lector de pantalla. */
.ga-hero--sinfoto .ga-hero__marca {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 50%;
  right: var(--ga-gutter);
  transform: translateY(-50%);
  width: min(38vw, 560px);
  aspect-ratio: 555 / 245;    /* el del propio SVG: no lo deforma */
  opacity: .8;
  /* El isotipo, no el isologo: sólo la marca gráfica, sin la palabra. El
     nombre de la agencia ya está escrito dos veces en la misma pantalla —en la
     navbar y en el pie—, así que acá lo que aporta es la forma. */
  background: url("../img/isotipo.1158bc031efe.svg") no-repeat center / contain;
}
@media (max-width: 1100px) {
  /* Por debajo de esto el isologo se le viene encima al título. Entre que se
     pise con el texto y que no esté, no está. */
  .ga-hero--sinfoto .ga-hero__marca { display: none; }
}

/* NO redefine el grano de shell.css: sólo le sube la opacidad. El hero es la
   superficie más grande del sitio y la que más se nota plana. */
.ga-hero::before { opacity: .05; }
.ga-hero__in {
  position: relative;
  /* Explícito por la trama: `.ga-trama` va en z-index 0 para quedar por
     encima del velo, y sin esto el contenido dependería sólo del orden del
     DOM para quedar arriba. */
  z-index: 1;
  width: 100%;
  max-width: var(--ga-wrap);
  margin: 0 auto;
  padding: var(--ga-s-16) var(--ga-gutter) var(--ga-s-10);
}
@media (max-width: 700px) { .ga-hero__in { padding: var(--ga-s-12) var(--ga-gutter) var(--ga-s-10); } }

.ga-hero h1 {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-semi);
  font-size: var(--ga-t-hero);
  letter-spacing: var(--ga-track-disp);
  line-height: 1.08;
  color: var(--ga-on-ink);
  margin: var(--ga-s-4) 0 0;
  max-width: 17ch;
  text-wrap: balance;
}
.ga-hero__sub {
  font-size: var(--ga-t-body);
  color: var(--ga-on-ink-mut);
  margin: var(--ga-s-4) 0 0;
  max-width: 46ch;
}
.ga-hero .ga-rule { margin-top: var(--ga-s-4); }

/* Buscador — barra de celdas divididas, no tarjeta con campos sueltos.

   Era una caja redondeada con tres campos flotando adentro, cada uno con su
   propio borde: cuatro rectángulos dentro de un quinto. La barra del rediseño
   es UNA pieza: filete dorado arriba, celdas separadas por líneas verticales y
   el botón macizo cerrando a la derecha, a toda la altura. Los controles no
   tienen caja propia — la caja es la barra.

   El filete dorado de 2px arriba es lo que la ancla al hero: sin él la barra
   flota sobre la foto como un widget pegado encima. */
.ga-hero__form {
  margin-top: var(--ga-s-10);
  background: rgba(26, 24, 21, .72);
  border-top: 2px solid var(--ga-gold);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: stretch;

  /* Se sale del padding del hero para cruzar la pantalla de borde a borde: la
     barra es el piso del hero, no una caja apoyada adentro. El margen negativo
     es exactamente el gutter, así el interior de las celdas sigue alineado con
     el título de arriba. */
  margin-left: calc(-1 * var(--ga-gutter));
  margin-right: calc(-1 * var(--ga-gutter));
  padding-left: var(--ga-gutter);
}
@media (max-width: 860px) { .ga-hero__form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ga-hero__form { grid-template-columns: minmax(0, 1fr); } }

.ga-hero__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 16px 20px;
  border-right: 1px solid var(--ga-line-ink);
}
/* La primera celda no lleva sangría propia: así su etiqueta cae exactamente
   bajo el título del hero. Con el padding de celda, la barra arrancaba 20px
   corrida respecto de todo lo de arriba y se notaba. */
.ga-hero__field:first-child { padding-left: 0; }
@media (max-width: 480px) {
  /* En una columna la línea vertical no separa nada: la divisoria pasa a ser
     horizontal o la barra se lee como una lista de cajas sin relación. */
  .ga-hero__field { border-right: 0; border-bottom: 1px solid var(--ga-line-ink); }
}
.ga-hero__field > span {
  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-ink-mut);
}

/* Los controles SÍ llevan caja, con borde tenue sobre el carbón: sin ella el
   valor elegido se confunde con la etiqueta de arriba y no se ve dónde hay
   que tocar. Lo que no lleva caja es la celda — la divisoria vertical alcanza. */
.ga-hero__field select,
.ga-hero__field input,
.ga-hero__field .ga-dd__trigger {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--ga-font-body);
  font-size: var(--ga-t-body);
  color: var(--ga-on-ink);
  background: transparent;
  border: 1px solid var(--ga-line-ink-2);
  border-radius: var(--ga-r);
  appearance: none;
}
.ga-hero__field .ga-dd__trigger[data-vacio="1"] { color: var(--ga-on-ink); }
.ga-hero__field .ga-dd__trigger .bi { color: var(--ga-gold); }
.ga-hero__field select option { color: var(--ga-on-bone); background: var(--ga-bone-0); }
.ga-hero__field input::placeholder { color: var(--ga-on-ink-mut); }
.ga-hero__field select:focus,
.ga-hero__field input:focus,
.ga-hero__field .ga-dd__trigger:focus-visible {
  outline: none;
  border-color: var(--ga-gold);
}

/* La aclaración bajo el campo de presupuesto. */
.ga-hero__pista {
  font-size: var(--ga-t-xs);
  color: var(--ga-on-ink-mut);
}
/* El panel del desplegable sí es una caja, y cuelga de la celda. */
.ga-hero__field .ga-dd__panel { inset: calc(100% + 14px) auto auto 0; min-width: 220px; }

.ga-hero__buscar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ga-s-2);
  padding: 0 var(--ga-s-8);
  border: 0;
  background: var(--ga-gold);
  color: var(--ga-ink-900);
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-body);
  font-weight: var(--ga-w-semi, 600);
  cursor: pointer;
  transition: background var(--ga-dur-fast) var(--ga-ease);
}
.ga-hero__buscar:hover { background: var(--ga-gold-lit); }
/* Sin padding-right en la barra, el botón termina contra el borde de la
   pantalla: es el cierre de la banda, no un botón dentro de una caja. */
.ga-hero__buscar { padding-right: var(--ga-s-10); }
@media (max-width: 860px) { .ga-hero__buscar { grid-column: 1 / -1; min-height: 52px; } }

/* ---------------------------------------------------------------------------
   2 · ÚLTIMOS INGRESOS
   Los chips reemplazan a la banda "¿Qué estás buscando?": llevan al mismo
   catálogo, pero filtrando, y ocupan una fila en vez de una pantalla.
   --------------------------------------------------------------------------- */
.ga-marcas { display: flex; flex-wrap: wrap; gap: var(--ga-s-2); margin-bottom: var(--ga-s-5); }
.ga-marca {
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-xs);
  padding: 7px 13px;
  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;
  white-space: nowrap;
}
.ga-marca:hover { border-color: var(--ga-gold-ink); color: var(--ga-gold-ink); }
.ga-marca--destacado { background: var(--ga-ink-800); border-color: var(--ga-ink-800); color: var(--ga-gold); }
.ga-marca--destacado:hover { background: var(--ga-ink-700); color: var(--ga-gold-lit); }

/* ---------------------------------------------------------------------------
   3 · ENTREGAS

   Sube de teaser a banda propia. Son fotos reales de clientes recibiendo su
   auto: la única prueba social que ningún competidor puede copiar, y estaba
   enterrada entre dos bandas más ruidosas.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   5 · QUIÉNES SOMOS

   Los números son tipografía, no contadores que suben solos al hacer scroll.
   Ese efecto (y el `.stat-number[data-target]` que lo movía) era lenguaje de
   startup; se fue con la fase 2.
   --------------------------------------------------------------------------- */
.ga-somos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--ga-s-12); align-items: start; }
@media (max-width: 900px) { .ga-somos { grid-template-columns: minmax(0, 1fr); gap: var(--ga-s-8); } }

/* Retícula, no tres cifras separadas por aire. Las líneas —arriba, abajo y
   entre celdas— son lo que las convierte en una tabla de datos de la agencia
   en vez de tres números decorativos flotando. */
.ga-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ga-line-ink);
  border-bottom: 1px solid var(--ga-line-ink);
  margin-top: var(--ga-s-6);
}
.ga-figs .ga-fig { padding: var(--ga-s-4); border-right: 1px solid var(--ga-line-ink); }
.ga-figs .ga-fig:first-child { padding-left: 0; }
.ga-figs .ga-fig:last-child { border-right: 0; padding-right: 0; }
@media (max-width: 600px) { .ga-figs { grid-template-columns: minmax(0, 1fr); gap: var(--ga-s-5); } }
.ga-fig b {
  display: block;
  font-family: var(--ga-font-mono);
  font-weight: var(--ga-w-mono-bold);
  font-size: 2rem;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ga-gold);
  font-variant-numeric: tabular-nums;
}
.ga-fig span { display: block; font-size: var(--ga-t-xs); color: var(--ga-on-ink-mut); margin-top: var(--ga-s-2); }

/* Los cuatro "por qué elegirnos", condensados a una lista con filete. */
/* Dos columnas y no una lista vertical: cuatro razones en fila única
   empujaban la banda a una pantalla entera de scroll y la última quedaba
   siempre fuera de vista. En retícula 2×2 se leen las cuatro de un vistazo,
   que es todo el punto de una lista de razones. */
.ga-razones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--ga-line-ink);
}
.ga-razones li {
  padding: var(--ga-s-4) 0;
  border-top: 1px solid var(--ga-line-ink);
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: var(--ga-s-4);
  align-items: baseline;
}
.ga-razones li { border-right: 1px solid var(--ga-line-ink); }
.ga-razones li:last-child { border-bottom: 1px solid var(--ga-line-ink); }
.ga-razones .n { font-family: var(--ga-font-mono); font-size: .6875rem; color: var(--ga-gold); }
.ga-razones b {
  display: block;
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-med);
  font-size: var(--ga-t-sm);
  color: var(--ga-on-ink);
}
.ga-razones span { display: block; font-size: var(--ga-t-xs); color: var(--ga-on-ink-mut); margin-top: 3px; }

/* ---------------------------------------------------------------------------
   6 · AL DÍA — promociones + novedades y noticias

   Antes eran TRES bandas: promociones, novedades y noticias. Las dos últimas
   compartían maquetado y estaban pegadas una debajo de la otra.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   BANNER DE PROMOCIÓN

   El bloque administrable del home. Tres cosas lo hacían desentonar y las
   tres estaban acá o en el modelo, no en el dato que cargó la agencia:

   1. El fondo entraba como `style="background:<hex>"` desde un selector de
      color libre. Era el único punto del sitio por donde podía pasar un color
      ajeno a tokens.css, y pasó. Ahora `color_fondo` es una de las cuatro
      superficies del sistema y llega como clase.
   2. El velo oscuro se pintaba SIEMPRE. Existe para que el texto se lea sobre
      una foto; sin foto, lo único que hacía era degradar el color de fondo a
      marrón y ensuciarlo. Ahora pide `.ga-promo--foto`.
   3. Un solo banner en una grilla `auto-fit` ocupa los 1600px de la banda: una
      tarjeta de 168px de alto con el texto abajo a la izquierda y el resto
      desierto. `.ga-promo--solo` lo convierte en franja.
   --------------------------------------------------------------------------- */
.ga-promos { display: grid; gap: var(--ga-s-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: var(--ga-s-8); }
.ga-promos__lab { margin-bottom: var(--ga-s-3); }

.ga-promo {
  position: relative;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--ga-s-3);
  padding: var(--ga-s-5);
  border-radius: var(--ga-r);
  overflow: hidden;
  background: var(--ga-ink-800);
  color: var(--ga-on-ink);
  text-decoration: none;
}

/* Las cuatro superficies. El dorado y el marfil dan vuelta el par de texto:
   sobre claro el cuerpo va en `--ga-on-bone` y el remate en `--ga-gold-ink`,
   nunca en `--ga-gold` (regla 3 de tokens.css). */
.ga-promo--ink   { background: var(--ga-ink-800); }
.ga-promo--ink-d { background: var(--ga-ink-900); }
.ga-promo--gold  { background: var(--ga-gold); color: var(--ga-ink-900); }
.ga-promo--bone  { background: var(--ga-bone-0); color: var(--ga-on-bone); border: 1px solid var(--ga-bone-200); }

/* Filete dorado arriba: la firma que ya llevan la tarjeta de vehículo y los
   paneles de "Tu usado". Es lo que hace que el banner se lea como una pieza
   de este sitio y no como un recuadro de color pegado encima.
   En el banner dorado sobraría —sería dorado sobre dorado— y en el de foto lo
   tapa la imagen. */
.ga-promo--ink::before,
.ga-promo--ink-d::before,
.ga-promo--bone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg, var(--ga-gold), transparent 62%);
}
.ga-promo--bone::before { background: linear-gradient(90deg, var(--ga-gold-ink), transparent 62%); }

.ga-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* El velo, sólo con foto. */
.ga-promo--foto { background: var(--ga-ink-800); color: var(--ga-on-ink); border: 0; }
.ga-promo--foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(transparent 25%, rgba(26, 24, 21, .86));
}
.ga-promo > * { position: relative; z-index: 2; }

.ga-promo__txt { display: flex; flex-direction: column; }
.ga-promo b {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-semi);
  font-size: var(--ga-t-h3);
  letter-spacing: var(--ga-track-disp);
  line-height: var(--ga-lh-tight);
}
.ga-promo__txt > span { font-size: var(--ga-t-xs); margin-top: var(--ga-s-2); color: var(--ga-on-ink-mut); }
.ga-promo--gold .ga-promo__txt > span,
.ga-promo--bone .ga-promo__txt > span { color: var(--ga-on-bone-mut); }
.ga-promo--foto .ga-promo__txt > span { color: var(--ga-on-ink-mut); }

.ga-promo em {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-s-2);
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-med);
  font-size: var(--ga-t-xs);
  font-style: normal;
  color: var(--ga-gold);
}
.ga-promo--gold em,
.ga-promo--bone em { color: var(--ga-gold-ink); }
.ga-promo--foto em { color: var(--ga-gold); }
.ga-promo em .bi { transition: transform var(--ga-dur-fast) var(--ga-ease); }
a.ga-promo:hover em .bi { transform: translateX(3px); }

/* Franja: cuando hay uno solo. El texto a la izquierda, el remate a la
   derecha, y menos alto — a lo ancho de la banda, 168px de alto es un cartel
   de ruta. */
.ga-promo--solo {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--ga-s-6);
  min-height: 0;
  padding: var(--ga-s-6) var(--ga-s-8);
}
.ga-promo--solo em { flex: none; }
@media (max-width: 620px) {
  .ga-promo--solo {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--ga-s-5);
  }
}

/* El riel horizontal. `novedades-scroll` es hook del JS de las flechas Y de
   los tests del home: no se renombra. */
.ga-rail-wrap { position: relative; }
.novedades-scroll {
  display: flex;
  gap: var(--ga-s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.novedades-scroll::-webkit-scrollbar { display: none; }
.ga-rail-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--ga-el);
}
@media (max-width: 480px) { .ga-rail-card { flex: 0 0 82vw; } }
.ga-rail-card:hover { border-color: var(--ga-bone-300); box-shadow: var(--ga-el-2); }
.ga-rail-card__shot { aspect-ratio: 16 / 10; background: var(--ga-bone-200); display: flex; align-items: center; justify-content: center; }
.ga-rail-card__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ga-rail-card__shot .bi { font-size: 1.75rem; color: var(--ga-bone-300); }
.ga-rail-card__body { padding: var(--ga-s-3) var(--ga-s-4) var(--ga-s-4); }
.ga-rail-card__meta {
  font-family: var(--ga-font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ga-gold-ink);
}
.ga-rail-card__title {
  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);
  margin: var(--ga-s-2) 0 0;
  color: var(--ga-on-bone);
}

.ga-rail-nav {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-300);
  border-radius: var(--ga-r);
  color: var(--ga-on-bone);
  cursor: pointer;
  box-shadow: var(--ga-el-2);
}
.ga-rail-nav:hover { border-color: var(--ga-gold-ink); color: var(--ga-gold-ink); }
.ga-rail-nav.prev { left: -12px; }
.ga-rail-nav.next { right: -12px; }
@media (max-width: 900px) { .ga-rail-nav { display: none; } }

/* ---------------------------------------------------------------------------
   7 · DÓNDE ESTAMOS + CONTACTO

   Fusiona las dos últimas bandas del home anterior: el mapa y el "¿tenés
   dudas?". Eran dos pantallas de scroll para decir "vení" y "escribinos".

   Los estilos del bloque en sí (`.ga-donde`, `#mapaUbicacion`) viven en
   shell.css: los comparte con `_seccion_ubicacion.html`, que incluyen
   "nuestra historia" y consignación.
   --------------------------------------------------------------------------- */
/* Revelado al hacer scroll — lo engancha ga.js sobre `.reveal`. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--ga-dur) var(--ga-ease), transform var(--ga-dur) var(--ga-ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ===========================================================================
   MOSAICO DE ENTREGAS (banda 4)

   Reemplaza la grilla de tres. Con una grilla regular las entregas se leían
   como "otro listado" al lado del de vehículos, que está dos bandas arriba y
   tiene exactamente la misma forma: mismo ancho de celda, misma proporción de
   foto, misma cadencia. El mosaico las distingue sin gastar un cambio de color
   de banda, que es un recurso escaso (ver el ritmo claro/oscuro del home).

   La primera foto toma dos columnas y dos filas; el resto llena. Aguanta de 1
   a 5: con una sola, la celda grande ocupa todo y no queda hueco.
   =========================================================================== */
/* auto-FIT: son cinco fotos fijas y tienen que llenar el renglón. Con
   auto-fill, en una pantalla de 1900 se abrían once pistas y las cinco fotos
   quedaban chiquitas y amontonadas a la izquierda, con medio renglón vacío —
   exactamente lo contrario de lo que una banda de prueba social tiene que
   hacer. */
.ga-mosaico {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ga-s-3);
}
.ga-mosaico__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ga-ink-700);
  text-decoration: none;
  border: 1px solid transparent;
}
.ga-mosaico__item:hover { border-color: var(--ga-gold); }

.ga-mosaico__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ga-dur) var(--ga-ease);
}
.ga-mosaico__item:hover img { transform: scale(1.04); }

/* La leyenda es una barra sólida al pie, no un degradado sobre la foto: sobre
   una banda carbón el degradado se funde con el fondo y el nombre del cliente
   —que es el dato— queda flotando sin apoyo. */
/* En Sora y no en mono: el mono es para números y rótulos (regla 4 de
   tokens.css). Acá lo que va es el nombre de una persona, y en JetBrains Mono
   "Juan Oscar Collado" se lee como un identificador de sistema, no como un
   cliente. */
.ga-mosaico__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 9px 11px;
  background: var(--ga-ink-900);
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-xs);
  font-weight: var(--ga-w-med);
  color: var(--ga-on-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ga-mosaico__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: rgba(255, 255, 255, .9);
  pointer-events: none;
}

/* CTA opcional del hero (sale del banner cargado en el panel). */
.ga-hero__cta { margin-top: var(--ga-s-5); }

/* Bajada de la banda "quiénes somos". */
.ga-somos__texto {
  font-size: var(--ga-t-sm);
  color: var(--ga-on-ink-mut);
  margin-top: var(--ga-s-4);
  max-width: 52ch;
}


/* ===========================================================================
   AL DÍA — barra de filtro
   =========================================================================== */
.ga-aldia__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ga-s-5);
  flex-wrap: wrap;
  padding: var(--ga-s-4) 0;
  border-bottom: 2px solid var(--ga-on-bone);
  margin-bottom: var(--ga-s-6);
}
.ga-aldia__conteo {
  margin: 0;
  font-family: var(--ga-font-mono);
  font-size: var(--ga-t-xs);
  color: var(--ga-on-bone-mut);
}
.ga-aldia__conteo b { color: var(--ga-on-bone); }


/* ===========================================================================
   DUO — los dos servicios, lado a lado sobre marfil

   No es una banda de color: es un bloque tipográfico entre dos bandas que sí
   lo son. La línea vertical del medio y la de abajo son toda su estructura.
   =========================================================================== */
/* Dos paneles, no dos columnas de texto.

   Eran dos `<div>` separados por un `border-right`, sin límite propio ni
   superficie: sobre el marfil de la banda no había nada que dijera dónde
   terminaba una opción y empezaba la otra, y como la banda tampoco tenía
   encabezado, el conjunto se leía como dos párrafos flotando en el hueco que
   dejan las bandas de arriba y de abajo. El encabezado lo puso el template;
   acá va la otra mitad.

   La superficie y el filete son EXACTAMENTE los de `.ga-vcard` (catalogo.css):
   blanco sobre marfil, borde de 1px y el hilo dorado que crece sobre el borde
   superior al pasar por encima. No es una tarjeta nueva — es la misma pieza
   que el visitante ya vio dos bandas más arriba, con otro contenido. */
.ga-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--ga-s-5);
  margin-top: var(--ga-s-8);
}

.ga-duo__op {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--ga-s-8);
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--ga-dur-fast) var(--ga-ease);
}
.ga-duo__op:hover,
.ga-duo__op:focus-visible { border-color: var(--ga-bone-300); color: inherit; }
.ga-duo__op:focus-visible { outline: 2px solid var(--ga-gold-ink); outline-offset: 2px; }

/* El filete que crece: mismo gesto y misma duración que la tarjeta de
   vehículo. Es la firma de la marca repetida donde se mira. */
.ga-duo__op::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  height: 2px;
  width: 0;
  background: var(--ga-gold-ink);
  transition: width 320ms var(--ga-ease);
}
.ga-duo__op:hover::before,
.ga-duo__op:focus-visible::before { width: calc(100% + 2px); }

/* El icono es el ancla visual de cada camino: sin él las dos piezas arrancan
   con un rótulo en versalitas del mismo color y del mismo largo, y a un metro
   de distancia son la misma cosa. Cuadrado con filete, como todo el sistema:
   nada de círculo con relleno. */
.ga-duo__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--ga-s-5);
  border: 1px solid var(--ga-bone-300);
  color: var(--ga-gold-ink);
  font-size: 1.0625rem;
  transition: border-color var(--ga-dur-fast) var(--ga-ease);
}
.ga-duo__op:hover .ga-duo__ico { border-color: var(--ga-gold-ink); }

.ga-duo h3 {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-semi);
  font-size: 1.375rem;   /* 22px */
  letter-spacing: var(--ga-track-disp);
  line-height: 1.15;
  color: var(--ga-on-bone);
  margin: var(--ga-s-2) 0 0;
  text-wrap: balance;
}
.ga-duo p {
  margin: var(--ga-s-3) 0 var(--ga-s-6);
  font-size: var(--ga-t-sm);
  line-height: 1.6;
  color: var(--ga-on-bone-mut);
  max-width: 46ch;
}

/* `margin-top: auto` alinea los dos llamados a la acción aunque los párrafos
   midan distinto. Con los botones a distinta altura las dos opciones no se
   leen como equivalentes, que es justo lo que son.

   Ya no es un `.ga-btn`: el panel entero es el enlace, así que un botón
   adentro sería un link dentro de otro link (HTML inválido). Queda como
   rótulo con su flecha — el mismo remate que `.ga-vcard__go`. */
.ga-duo__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ga-s-2);
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-med);
  font-size: var(--ga-t-sm);
  color: var(--ga-gold-ink);
}
.ga-duo__cta .bi { transition: transform var(--ga-dur-fast) var(--ga-ease); }
.ga-duo__op:hover .ga-duo__cta .bi { transform: translateX(3px); }

@media (max-width: 700px) {
  .ga-duo { margin-top: var(--ga-s-6); }
  .ga-duo__op { padding: var(--ga-s-6); }
}