/* =============================================================================
   Grupo Automotores — sitio público
   shell.css · navbar, footer, flotantes y base tipográfica

   El chrome que comparte TODO el sitio: reset, tipografía base, botones,
   navbar, footer, flotantes, encabezado de página, estado vacío y el bloque
   "dónde estamos". Todas las pantallas la cargan, así que un componente que
   viva acá no puede quedarse sin estilo por una hoja que alguien olvidó pedir
   -- que fue un bug real, tres veces.

   Las clases llevan prefijo `ga-`. El sitio del que se clonó éste usaba el
   sufijo `-ra`, las iniciales del otro cliente.

   Todo color sale de tokens.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------------- */

/* RESET

   Lo último que quedaba vivo del andamio. Se porta acá con los tokens nuevos:
   el original definía `a { color: var(--green) }` con el verde del otro
   cliente, y una barra de scroll verde sobre fondo negro.

   `margin: 0` en el `*` es deliberado y viene del CSS anterior: todo el
   espaciado del sitio se declara explícito, nunca por el default del
   navegador. Sacarlo ahora movería cada bloque de texto del sitio. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ga-gold-ink); text-decoration: none; transition: color var(--ga-dur-fast) var(--ga-ease); }
a:hover { color: var(--ga-on-bone); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ga-bone-200); }
::-webkit-scrollbar-thumb { background: var(--ga-bone-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ga-gold-ink); }

body {
  font-family: var(--ga-font-body);
  font-size: var(--ga-t-body);
  line-height: var(--ga-lh-body);
  color: var(--ga-on-bone);
  background: var(--ga-bone-50);
  padding-top: var(--ga-nav-h);
}

.ga-disp,
.ga-h1, .ga-h2, .ga-h3 {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-semi);
  letter-spacing: var(--ga-track-disp);
  line-height: var(--ga-lh-tight);
  margin: 0;
  text-wrap: balance;
}
.ga-h1 { font-size: var(--ga-t-h1); }
.ga-h2 { font-size: var(--ga-t-h2); line-height: 1.2; }
.ga-h3 { font-size: var(--ga-t-h3); line-height: var(--ga-lh-snug); }

/* Números y rótulos SIEMPRE en mono con cifras tabulares. Es la regla que
   hace que el sitio se lea técnico, más que cualquier color. */
.ga-num,
.ga-lab {
  font-family: var(--ga-font-mono);
  font-variant-numeric: tabular-nums;
}
.ga-lab {
  font-size: var(--ga-t-lab);
  font-weight: var(--ga-w-med);
  letter-spacing: var(--ga-track-lab);
  text-transform: uppercase;
}

/* El filete: la única firma del dorado. Nunca un relleno grande. */
.ga-rule {
  width: 38px;
  height: 2px;
  border: 0;
  margin: 0;
  background: var(--ga-gold);
  opacity: 1;
}
.ga-rule--ink { background: var(--ga-gold-ink); }

/* Accesibilidad: saltar al contenido. No existía en el sitio anterior. */
.ga-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--ga-gold);
  color: var(--ga-ink-900);
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-med);
  padding: 10px 18px;
  border-radius: 0 0 var(--ga-r) 0;
  text-decoration: none;
}
.ga-skip:focus { left: 0; }

/* ---------------------------------------------------------------------------
   BOTONES
   El dorado sólido queda para UN CTA por pantalla. El resto: filete o fantasma.
   --------------------------------------------------------------------------- */
.ga-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ga-s-2);
  font-family: var(--ga-font-disp);
  font-size: .8125rem;
  font-weight: var(--ga-w-med);
  line-height: 1;
  padding: 11px 17px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--ga-r);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ga-dur-fast) var(--ga-ease),
              border-color var(--ga-dur-fast) var(--ga-ease),
              color var(--ga-dur-fast) var(--ga-ease);
}
.ga-btn--gold { background: var(--ga-gold); color: var(--ga-ink-900); }
.ga-btn--gold:hover { background: var(--ga-gold-lit); color: var(--ga-ink-900); }

.ga-btn--line {
  background: transparent;
  border-color: var(--ga-gold-a30);
  color: var(--ga-gold);
}
.ga-btn--line:hover { border-color: var(--ga-gold); color: var(--ga-gold-lit); }

.ga-btn--ghost {
  background: transparent;
  border-color: var(--ga-line-ink);
  color: var(--ga-on-ink);
}
.ga-btn--ghost:hover { border-color: var(--ga-line-ink-2); color: var(--ga-on-ink); }

.ga-btn--sm { min-height: 32px; padding: 7px 13px; font-size: .75rem; }

/* ---------------------------------------------------------------------------
   NAVBAR — 54px, una sola fila, el menú completo
   --------------------------------------------------------------------------- */
.ga-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--ga-nav-h);
  z-index: 1030;
  display: flex;
  align-items: center;
  background: var(--ga-ink-900);
  border-bottom: 1px solid var(--ga-gold-a20);
  transition: box-shadow var(--ga-dur-fast) var(--ga-ease);
}
.ga-nav.is-scrolled { box-shadow: 0 1px 0 var(--ga-gold-a20), 0 6px 20px rgba(0, 0, 0, .35); }

.ga-nav__in {
  width: 100%;
  max-width: var(--ga-wrap);
  margin: 0 auto;
  padding: 0 var(--ga-gutter);
  display: flex;
  align-items: center;
  gap: var(--ga-s-4);
}

.ga-brand { display: flex; align-items: center; gap: var(--ga-s-2); flex: none; text-decoration: none; }
.ga-brand__mark { width: 30px; height: auto; display: block; }
.ga-brand__txt { font-family: var(--ga-font-disp); line-height: 1.02; color: var(--ga-gold); }
.ga-brand__txt b {
  display: block;
  font-weight: var(--ga-w-semi);
  font-size: .6875rem;
  letter-spacing: .03em;
}
.ga-brand__txt span {
  display: block;
  font-weight: var(--ga-w-reg);
  font-size: .6875rem;
  letter-spacing: .1em;
}

/* Nueve destinos en 54px. El gap baja de 16 a 13px y el cuerpo de 13 a
   12.5px: con eso suman ~1.115px sobre los 1.200 de ancho útil. */
.ga-menu {
  display: flex;
  align-items: center;
  gap: 13px;
  list-style: none;
  margin: 0 auto 0 var(--ga-s-4);
  padding: 0;
}
.ga-menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ga-s-1);
  font-family: var(--ga-font-disp);
  font-size: .78125rem;
  color: var(--ga-on-ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0 5px;
  border: 0;
  background: none;
  transition: color var(--ga-dur-fast) var(--ga-ease);
}
/* El filete crece desde la izquierda en vez de aparecer de golpe: es el mismo
   gesto del logo —una línea que se estira— aplicado a la navegación. */
.ga-menu__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1.5px;
  width: 0;
  background: var(--ga-gold);
  transition: width var(--ga-dur-fast) var(--ga-ease);
}
.ga-menu__link:hover { color: var(--ga-gold-lit); }
.ga-menu__link:hover::after { width: 100%; background: var(--ga-gold-lit); }
.ga-menu__link.is-active { color: var(--ga-gold); }
.ga-menu__link.is-active::after { width: 100%; }
.ga-menu__link .bi { font-size: .625rem; }

.ga-nav__cta { display: flex; align-items: center; gap: var(--ga-s-2); flex: none; margin-left: auto; }

.ga-burger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ga-line-ink);
  border-radius: var(--ga-r);
  color: var(--ga-on-ink);
  font-size: 1.05rem;
  padding: 0;
}
.ga-burger:hover { border-color: var(--ga-gold-a30); color: var(--ga-gold); }

/* Menú mobile: panel en carbón desplegado por el collapse de Bootstrap. */
.ga-nav__panel {
  position: absolute;
  top: var(--ga-nav-h);
  left: 0;
  right: 0;
  background: var(--ga-ink-900);
  border-bottom: 1px solid var(--ga-gold-a20);
  padding: var(--ga-s-2) var(--ga-gutter) var(--ga-s-5);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
  max-height: calc(100vh - var(--ga-nav-h));
  overflow-y: auto;
}
.ga-nav__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ga-nav__panel .ga-menu__link {
  padding: 12px 0;
  border-bottom: 1px solid var(--ga-line-ink);
  min-height: 44px;                 /* objetivo táctil */
}
.ga-nav__panel .ga-btn { width: 100%; margin-top: var(--ga-s-4); }

@media (max-width: 1179px) {
  .ga-menu { display: none; }
  .ga-burger { display: inline-flex; }
  /* Contacto e Ingresar viven en el panel; el header chico queda con marca
     y hamburguesa, nada más. */
  .ga-nav__cta .ga-btn { display: none; }
}
@media (min-width: 1180px) {
  .ga-nav__panel { display: none !important; }
}

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */
.ga-foot {
  background: var(--ga-ink-900);
  color: var(--ga-on-ink-mut);
  /* 2px de dorado sólido, igual que el borde de la navbar: son los dos cortes
     que cierran el sitio arriba y abajo, y con 1px al 20% no se veía ninguno. */
  border-top: 2px solid var(--ga-gold);
  padding: var(--ga-s-12) 0 var(--ga-s-6);
}
.ga-foot__in { max-width: var(--ga-wrap); margin: 0 auto; padding: 0 var(--ga-gutter); }
.ga-foot__grid {
  display: grid;
  gap: var(--ga-s-8);
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
}
@media (max-width: 860px) { .ga-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ga-foot__grid { grid-template-columns: minmax(0, 1fr); } }

.ga-foot 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-gold);
  margin: 0 0 var(--ga-s-3);
}
.ga-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ga-s-2); }
.ga-foot a { color: var(--ga-on-ink-mut); text-decoration: none; font-size: var(--ga-t-sm); }
.ga-foot a:hover { color: var(--ga-gold); }
.ga-foot__blurb { font-size: var(--ga-t-sm); max-width: 34ch; margin: var(--ga-s-3) 0 0; }

.ga-foot__contact li { display: flex; gap: var(--ga-s-2); font-size: var(--ga-t-sm); }
/* El icono del renglón de contacto va dorado. Antes iba `text-danger` (el rojo
   de Bootstrap), que no pertenece a ninguna paleta de esta marca. */
.ga-foot__contact .bi { color: var(--ga-gold); flex: none; margin-top: 4px; }

.ga-social { display: flex; gap: var(--ga-s-2); margin-top: var(--ga-s-4); }
.ga-social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ga-line-ink);
  border-radius: var(--ga-r);
  color: var(--ga-on-ink);
  font-size: 1rem;
}
.ga-social a:hover { border-color: var(--ga-gold); color: var(--ga-gold); }

.ga-foot__bar {
  margin-top: var(--ga-s-10);
  padding-top: var(--ga-s-5);
  border-top: 1px solid var(--ga-line-ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-s-3);
  align-items: center;
  justify-content: space-between;
  font-size: var(--ga-t-xs);
}

/* ---------------------------------------------------------------------------
   FLOTANTES
   --------------------------------------------------------------------------- */
.ga-wsp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ga-wsp);
  color: #fff;
  /* Cuadrado, como todo lo demás. Era el único círculo del sistema y por eso
     mismo se leía como una pieza importada de otro sitio. */
  font-size: 1.5rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: transform var(--ga-dur-fast) var(--ga-ease);
}
.ga-wsp:hover { color: #fff; transform: translateY(-2px); }

#backToTop {
  position: fixed;
  right: 20px;
  bottom: 82px;
  z-index: 1040;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ga-ink-800);
  color: var(--ga-gold);
  border: 1px solid var(--ga-gold-a30);
  border-radius: var(--ga-r);
  cursor: pointer;
  padding: 0;
}
#backToTop:hover { background: var(--ga-ink-700); border-color: var(--ga-gold); }

@media (max-width: 575px) {
  .ga-wsp { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  #backToTop { right: 14px; bottom: 72px; }
}

/* Foco visible en todo el shell. */
.ga-nav a:focus-visible,
.ga-foot a:focus-visible,
.ga-btn:focus-visible,
.ga-burger:focus-visible,
#backToTop:focus-visible {
  outline: 2px solid var(--ga-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ga-btn, .ga-nav, .ga-wsp { transition: none; }
  .ga-wsp:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   ENCABEZADO DE PÁGINA

   Va en el shell y no en una hoja de pantalla porque lo comparten el catálogo,
   "últimos ingresos" y la ficha de vehículo. Las landings y el contenido usan
   `.ga-lhero` (landings.css), que es el mismo encabezado más bajo: ahí el
   visitante ya sabe a qué vino.
   --------------------------------------------------------------------------- */
/* Sobre MARFIL, no sobre carbón.

   El carbón se reserva para donde es un recurso narrativo: el hero del inicio,
   la portada de consignaciones y la de nosotros. En catálogo y ficha era sólo
   una franja oscura que el visitante tiene que atravesar para llegar a lo que
   vino a ver, y encima le competía el contraste a las fotos de los autos —que
   es literalmente el contenido de esas dos pantallas.

   El corte lo hace la regla de tinta a todo el ancho, no el cambio de fondo. */
.ga-pagehead {
  background: var(--ga-bone-50);
  color: var(--ga-on-bone);
  padding: var(--ga-s-10) 0 0;
}
/* La marca de agua y el halo dorado son de superficie oscura. */
.ga-pagehead::before,
.ga-pagehead::after { display: none; }
/* El filete dorado de 38px deja lugar a la regla documental de ancho completo:
   sobre marfil, un guioncito dorado no separa nada. */
.ga-pagehead .ga-rule {
  width: 100%;
  height: 2px;
  background: var(--ga-on-bone);
  margin-top: var(--ga-s-5);
}
.ga-pagehead__in { max-width: var(--ga-wrap); margin: 0 auto; padding: 0 var(--ga-gutter); }
.ga-pagehead h1 {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-semi);
  font-size: var(--ga-t-h1);
  letter-spacing: var(--ga-track-disp);
  line-height: var(--ga-lh-tight);
  color: var(--ga-on-bone);
  margin: var(--ga-s-3) 0 0;
  max-width: 20ch;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   El título y su bajada comparten renglón, apoyados en la misma línea de base:
   el título a la izquierda y la explicación a la derecha, y recién debajo de
   los dos, la regla a todo el ancho.

   Apilados —título, regla, párrafo— la regla partía al medio un bloque que se
   lee de una sola vez, y el encabezado ocupaba tres renglones altos antes de
   la primera tarjeta. Así ocupa uno y la regla queda donde tiene que estar:
   cerrando el encabezado, no atravesándolo.
   --------------------------------------------------------------------------- */
.ga-pagehead__titulo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ga-s-8);
  flex-wrap: wrap;
}
.ga-pagehead__sub {
  color: var(--ga-on-bone-mut);
  font-size: var(--ga-t-sm);
  line-height: 1.55;
  margin: 0;
  max-width: 46ch;
  /* Sin esto la bajada se estira a todo el sobrante y el título queda
     apretado contra el borde izquierdo. */
  flex: 0 1 46ch;
}
@media (max-width: 820px) {
  /* Envuelto, el `flex-end` deja la bajada pegada al título sin aire. */
  .ga-pagehead__sub { margin-top: var(--ga-s-3); }
}

/* Miga de pan: en mono, como el resto de los rótulos del sistema. */
.ga-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-s-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--ga-font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ga-crumbs a { color: var(--ga-on-ink-mut); text-decoration: none; }
.ga-crumbs a:hover { color: var(--ga-gold); }
.ga-crumbs li + li::before { content: '/'; margin-right: var(--ga-s-2); color: var(--ga-ink-600); }
.ga-crumbs [aria-current] { color: var(--ga-gold); }

/* ---------------------------------------------------------------------------
   BLOQUE "DÓNDE ESTAMOS" — compartido

   Lo usan tres pantallas: la banda 7 del home, y el parcial
   `_seccion_ubicacion.html` que incluyen "nuestra historia" y consignación.

   Vive acá y no en home.css ni en landings.css porque no es de ninguna de las
   dos: es chrome compartido, como el encabezado de página. Y shell.css lo
   carga todo el sitio, así que ninguna pantalla tiene que acordarse de pedirlo.

   `#mapaUbicacion` es el hook de `_mapa_assets_js.html`.
   --------------------------------------------------------------------------- */
.ga-donde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--ga-s-10); align-items: center; }
@media (max-width: 900px) { .ga-donde { grid-template-columns: minmax(0, 1fr); gap: var(--ga-s-6); } }
.ga-donde__datos { list-style: none; margin: var(--ga-s-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ga-s-3); }
.ga-donde__datos li { display: flex; gap: var(--ga-s-3); font-size: var(--ga-t-sm); color: var(--ga-on-ink-mut); }
.ga-donde__datos .bi { color: var(--ga-gold); flex: none; margin-top: 3px; }
.ga-donde__acciones { display: flex; flex-wrap: wrap; gap: var(--ga-s-3); margin-top: var(--ga-s-6); }

/* `#mapaUbicacion` es el hook de `_mapa_assets_js.html`. */
#mapaUbicacion,
.ga-mapa-ph {
  height: 380px;
  border-radius: var(--ga-r-xl);
  overflow: hidden;
  border: 1px solid var(--ga-gold-a20);
}
@media (max-width: 700px) { #mapaUbicacion, .ga-mapa-ph { height: 280px; } }
.ga-mapa-ph {
  background: var(--ga-ink-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ga-s-2);
  color: var(--ga-on-ink-mut);
}
.ga-mapa-ph .bi { font-size: 1.75rem; color: var(--ga-gold); opacity: .55; }
.ga-mapa-ph span { font-family: var(--ga-font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }


/* ---------------------------------------------------------------------------
   ESTADO VACÍO — compartido

   Lo usan el catálogo, "nuestra historia", sucursales y (fase 7) entregas,
   noticias y novedades. Vivía en catalogo.css, y eso ya era un bug: la
   pantalla de historia sin hitos cargados dibujaba su estado vacío **sin
   estilo**, porque no pedía esa hoja.

   Va en shell.css por la misma razon que el bloque de ubicación: lo carga
   todo el sitio, así que ninguna pantalla tiene que acordarse de pedirlo.
   --------------------------------------------------------------------------- */
.ga-empty {
  text-align: center;
  padding: var(--ga-s-16) var(--ga-gutter);
  border: 1px dashed var(--ga-bone-300);
  border-radius: var(--ga-r-xl);
  background: var(--ga-bone-0);
}
.ga-empty .bi { font-size: 2rem; color: var(--ga-bone-300); }
.ga-empty h2,
.ga-empty h3 {
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-h3);
  font-weight: var(--ga-w-semi);
  letter-spacing: var(--ga-track-disp);
  color: var(--ga-on-bone);
  margin: var(--ga-s-3) 0 var(--ga-s-2);
}
.ga-empty p { color: var(--ga-on-bone-mut); font-size: var(--ga-t-sm); margin: 0 auto var(--ga-s-5); max-width: 42ch; }

/* Sobre carbón el mismo estado vacío: sólo cambia el par de variables. Existe
   porque el bloque de sucursales de "Nosotros" va sobre banda oscura y su
   `{% empty %}` es el caso real de una base recién instalada. */
.ga-empty--ink { border-color: var(--ga-ink-700); background: var(--ga-ink-800); }
.ga-empty--ink .bi { color: var(--ga-ink-700); }
.ga-empty--ink h2,
.ga-empty--ink h3 { color: var(--ga-on-ink); }
.ga-empty--ink p { color: var(--ga-on-ink-mut); }

/* ---------------------------------------------------------------------------
   ATMÓSFERA — textura de las superficies oscuras

   El sistema quedaba austero de más: bandas de color plano con un filete
   dorado y poco más. Un carbón plano de CSS no se lee premium, se lee sin
   terminar; una superficie premium siempre tiene grano.

   Tres capas, todas muy por debajo del umbral de "decoración":

     1. GRANO — ruido SVG al 3,5 %. Rompe el plano sin que se note qué lo
        rompe. Va como data-URI: no agrega un pedido de red.
     2. MARCA DE AGUA — el isotipo real a 620px y 3,5 % de opacidad, sangrando
        por el borde. No es un adorno genérico: es la marca, usada como
        textura. Es lo que hace que la superficie sea de ESTA empresa.
     3. TRAMA — la retícula. Es la capa 3 que este comentario venía
        prometiendo desde el principio sin que existiera ninguna regla que la
        dibujara: la versión "líneas doradas cada 44px" se había sacado porque
        una retícula pareja de punta a punta se lee como papel milimetrado y
        aplana la superficie. Vive abajo como `.ga-trama`, y lo que la hace
        funcionar es que NO es pareja: se desvanece.

        A diferencia de las otras dos, no se aplica sola — hay que poner el
        `<span class="ga-trama">`. Es a propósito: no toda banda oscura la
        quiere, y las tres que la usan hoy son las que tienen que sostener una
        pantalla entera casi vacía.

   `isolation: isolate` + `z-index` negativos: las capas van detrás del
   contenido sin necesidad de que cada hijo declare su propio apilamiento.
   --------------------------------------------------------------------------- */
.ga-band--ink,
.ga-band--ink-d,
.ga-lhero,
.ga-hero,
.ga-foot { position: relative; isolation: isolate; }

.ga-band--ink::before,
.ga-band--ink-d::before,
.ga-lhero::before,
.ga-hero::before,
.ga-foot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity: .035;
}

/* La marca de agua sangra por la derecha. Se apaga en pantallas chicas: ahí
   compite con el texto en vez de acompañarlo. */
.ga-band--ink-d::after,
.ga-lhero::after,
.ga-foot::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
  width: 620px;
  height: 274px;
  pointer-events: none;
  background: url("../img/isotipo.1158bc031efe.svg") no-repeat center / contain;
  opacity: .035;
}
/* TRAMA — retícula que arranca en una esquina y se disuelve.

   La usan el hero del inicio, el hero del login y el encabezado del portal
   del cliente: las tres pantallas que tienen que sostenerse con poco
   contenido encima. Vive acá y no en cada hoja porque ya estaba escrita dos
   veces en `acceso.css` y el inicio iba a ser la tercera copia.

   Por qué ésta funciona donde la retícula pareja no: el `mask-image` la hace
   arrancar fuerte en el vértice y desvanecerse hacia el lado opuesto. Una
   retícula de punta a punta se lee como papel milimetrado —es un patrón, y un
   patrón aplana—; ésta se lee como luz cayendo sobre una superficie, que es
   lo contrario. Es la misma razón por la que las líneas van en el color de
   borde y no en dorado: es textura, no un elemento de marca.

   Es un `<span>` vacío con `aria-hidden` y no un `::before`, porque los dos
   pseudo-elementos de estas superficies ya están tomados por el grano y por
   la marca de agua (y, en el hero del inicio, por el velo sobre la foto).

   `z-index: 0` y no negativo: en el hero del inicio tiene que quedar POR
   ENCIMA del velo. El velo arranca en 94 % de opacidad justo del lado
   izquierdo, que es donde la trama es más fuerte, así que por debajo no se
   vería nada. El contenido igual le gana: `.ga-hero__in`, `.ga-login__heroin`
   y `.ga-pt-hero__in` están posicionados y van después en el DOM. */
.ga-trama {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ga-line-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ga-line-ink) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(115% 90% at 12% 0%, #000 0%, transparent 74%);
  mask-image: radial-gradient(115% 90% at 12% 0%, #000 0%, transparent 74%);
}

/* Variante del login: ahí el vértice no es el borde de arriba sino el ángulo,
   porque la columna es alta y angosta y el contenido está centrado. */
.ga-trama--angulo {
  -webkit-mask-image: radial-gradient(120% 90% at 20% 20%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 20% 20%, #000 0%, transparent 78%);
}

/* Sobre una foto de portada la trama compite con la imagen en vez de darle
   textura: ahí el fondo ya no está liso, que es el problema que ésta resuelve.
   Se apaga con la misma clase que decide el resto del caso con foto. */
.ga-hero:not(.ga-hero--sinfoto) .ga-trama { opacity: .22; }

@media (max-width: 900px) {
  .ga-band--ink-d::after,
  .ga-lhero::after,
  .ga-foot::after { display: none; }
}

/* Los separadores entre bandas dejan de ser un corte seco: el filete dorado se
   desvanece hacia los extremos, como la línea del isotipo. */
.ga-band--dark + .ga-band--dark {
  border-top: 0;
  background-image: linear-gradient(90deg,
    transparent, var(--ga-gold-a30) 18%, var(--ga-gold-a30) 82%, transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top;
}

/* Reemplazo del mapa cuando la sucursal no tiene coordenadas cargadas — que
   es el estado actual, no un caso raro. Muestra la dirección y el botón, así
   que sigue sirviendo para llegar; ver `_partials/mapa.html`. */
.ga-mapa-ph--dir {
  gap: var(--ga-s-4);
  padding: var(--ga-s-6);
  text-align: center;
  border-style: dashed;
}
.ga-mapa-ph__dir {
  font-family: var(--ga-font-body);
  font-size: var(--ga-t-sm);
  color: var(--ga-on-ink);
  margin: 0;
  max-width: 30ch;
  text-transform: none;
  letter-spacing: 0;
}
/* Sobre marfil (sucursales) el texto del reemplazo tiene que invertirse. */
.ga-sucs .ga-mapa-ph--dir .ga-mapa-ph__dir { color: var(--ga-on-bone); }


/* ===========================================================================
   REDISEÑO 2026 — utilidades que salieron de los `style=` inline

   Las plantillas tenían decenas de `style="color:var(--ga-gold)"` y
   `style="margin-top:var(--ga-s-4)"`. Usaban tokens, así que no eran colores
   hardcodeados, pero igual repetían la misma decisión en 20 lugares y hacían
   imposible cambiarla de una. Y en la tarjeta de vehículo hay un test que
   directamente prohíbe el `style=` inline.
   =========================================================================== */

/* El rótulo dorado tiene DOS variantes y no se pueden cruzar: sobre marfil el
   dorado de marca no llega a contraste AA (2.6:1). Ver la regla 3 de
   tokens.css. */
.ga-lab--gold     { color: var(--ga-gold); }
.ga-lab--gold-ink { color: var(--ga-gold-ink); }

/* Título sobre banda oscura. */
.ga-h2--ink { color: var(--ga-on-ink); margin-top: var(--ga-s-2); }

/* El filete cuando separa un bloque del título que tiene encima. */
.ga-rule--sep { margin-top: var(--ga-s-4); }

/* Filete fino de separación interna (dentro de una tarjeta, un panel). No es
   el filete dorado: es una línea de estructura. */
.ga-hairline {
  display: block;
  height: 1px;
  background: var(--ga-bone-300);
  margin: var(--ga-s-3) 0;
}

/* Fila de botones que envuelve. */
.ga-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-s-3);
  margin-top: var(--ga-s-8);
}

/* Filete claro: el `--line` sobre banda oscura, cuando el dorado ya lo está
   usando otro botón de la misma fila. */
.ga-btn--line-light {
  background: transparent;
  border-color: var(--ga-line-ink-2);
  color: var(--ga-on-ink);
}
.ga-btn--line-light:hover { border-color: var(--ga-gold); color: var(--ga-gold-lit); }

/* Compartir: sobre marfil, así que borde de papel y texto de tinta. Antes era
   un `--ghost` con dos overrides inline, y el `--ghost` está pensado para
   fondo oscuro: sobre marfil quedaba texto claro sobre claro. */
.ga-btn--compartir {
  background: transparent;
  border-color: var(--ga-bone-300);
  color: var(--ga-on-bone);
}
.ga-btn--compartir:hover { border-color: var(--ga-gold-ink); color: var(--ga-gold-ink); }


/* ===========================================================================
   MIGAS sobre banda clara
   `.ga-crumbs` está pensado para el hero oscuro. En una pantalla de fondo
   marfil hay que invertir, o el texto sale gris claro sobre marfil.
   =========================================================================== */
/* `.ga-pagehead` y `.ga-lhero--bone` se sumaron cuando los encabezados de
   página pasaron a marfil: sin ellos las migas quedaban en el gris de banda
   oscura (#A8A196) sobre marfil, casi ilegibles. */
.ga-band--bone .ga-crumbs,
.ga-pagehead .ga-crumbs,
.ga-lhero--bone .ga-crumbs,
.ga-crumbs--bone { color: var(--ga-on-bone-mut); }
.ga-band--bone .ga-crumbs a,
.ga-pagehead .ga-crumbs a,
.ga-lhero--bone .ga-crumbs a,
.ga-crumbs--bone a { color: var(--ga-on-bone-mut); }
.ga-band--bone .ga-crumbs a:hover,
.ga-pagehead .ga-crumbs a:hover,
.ga-lhero--bone .ga-crumbs a:hover,
.ga-crumbs--bone a:hover { color: var(--ga-gold-ink); }
.ga-band--bone .ga-crumbs [aria-current],
.ga-pagehead .ga-crumbs [aria-current],
.ga-lhero--bone .ga-crumbs [aria-current],
.ga-crumbs--bone [aria-current] { color: var(--ga-gold-ink); }
.ga-band--bone .ga-crumbs li + li::before,
.ga-pagehead .ga-crumbs li + li::before,
.ga-lhero--bone .ga-crumbs li + li::before,
.ga-crumbs--bone li + li::before { color: var(--ga-bone-300); }


/* ===========================================================================
   BACK TO TOP
   El botón lo CREA `ga.js` (`$('<button id="backToTop">')`), no existe en
   ninguna plantilla. Si no se estila acá, aparece como un botón del navegador
   sin forma en la esquina — y un rediseño que sólo mire templates no se
   entera de que existe.
   =========================================================================== */
#backToTop {
  position: fixed;
  right: var(--ga-s-5);
  bottom: calc(var(--ga-s-5) + 64px);
  z-index: 900;
  display: none;              /* ga.js lo pasa a flex al pasar los 500px */
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--ga-gold-a30);
  border-radius: var(--ga-r);
  background: var(--ga-ink-800);
  color: var(--ga-gold);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color var(--ga-dur-fast) var(--ga-ease),
              color var(--ga-dur-fast) var(--ga-ease);
}
#backToTop:hover { border-color: var(--ga-gold); color: var(--ga-gold-lit); }

@media (max-width: 620px) {
  /* En pantalla chica el WhatsApp flotante ya ocupa esa esquina. */
  #backToTop { display: none !important; }
}


/* Más utilidades que salieron de `style=` inline repetidos. Van en shell.css
   —que carga todo el sitio— porque las comparten cuatro pantallas y ninguna
   es dueña de la regla. */
.ga-h3--sep      { margin-top: var(--ga-s-2); }
.ga-btn--sep     { margin-top: var(--ga-s-5); }
.ga-btn--inicio  { align-self: flex-start; }
.ga-datos--sep   { margin-top: var(--ga-s-4); }
.ga-pagehead--corto { padding-bottom: var(--ga-s-6); }
.ga-contacto__mapa  { margin-top: var(--ga-s-5); }
.ga-hito-modal__pie { padding: var(--ga-s-4); }

/* La bajada de "quiénes somos" sobre banda oscura. `--suelto` es la variante
   que no cuelga de un filete y por eso lleva su propio margen inferior. */
.ga-somos__texto--suelto { margin: var(--ga-s-4) 0 var(--ga-s-8); }


/* La regla de ancho completo bajo el encabezado de cada banda.

   No es el filete dorado: `.ga-rule` son 38px de dorado y es una firma de
   marca, se usa una vez por bloque. Esta es estructura — la línea que separa
   el título de su contenido y le da al sitio la lectura de documento en vez
   de landing. Va en tinta, y sólo sobre carbón cambia a dorado, porque ahí
   una línea oscura no se ve. */
.ga-rule--full {
  border: 0;
  border-top: 2px solid var(--ga-on-bone);
  margin: var(--ga-s-5) 0 var(--ga-s-7);
}
.ga-band--dark .ga-rule--full { border-top-color: var(--ga-line-ink-2); }
/* Dorado sólido: es el corte estructural de una banda, y al 30% de opacidad
   sobre carbón directamente no se leía. */
.ga-rule--full-oro { border-top-color: var(--ga-gold); }

/* Botón de filete sobre marfil. `.ga-btn--line` es dorado de marca, que sobre
   claro no llega a contraste AA (ver la regla 3 de tokens.css). */
.ga-btn--line-ink {
  background: transparent;
  border-color: var(--ga-bone-300);
  color: var(--ga-gold-ink);
}
.ga-btn--line-ink:hover { border-color: var(--ga-gold-ink); color: var(--ga-gold-ink); }


/* ===========================================================================
   AJUSTES DEL SITIO A SANGRE (--ga-wrap: 100%)
   =========================================================================== */

/* Margen menor en pantalla chica: 40px se comen media pantalla en un teléfono. */
@media (max-width: 700px) {
  :root { --ga-gutter: 20px; }
}

/* El filete dorado que apoya la navbar sobre el hero. Sin él, con el hero
   oscuro y la navbar oscura, la cabecera no tiene dónde terminar. */
.ga-nav { border-bottom: 2px solid var(--ga-gold); }

/* El destino activo se marca con un filete dorado debajo del texto, no con un
   cambio de color: sobre carbón, "más claro" no alcanza para leerse como
   estado. */
.ga-menu__link { position: relative; }
.ga-menu__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: var(--ga-gold);
}

/* Botón de WhatsApp de la navbar: es el canal por el que la agencia atiende,
   así que es el CTA dorado de la cabecera. */
.ga-btn--wsp-nav {
  background: var(--ga-gold);
  color: var(--ga-ink-900);
  border-color: var(--ga-gold);
}
.ga-btn--wsp-nav:hover { background: var(--ga-gold-lit); color: var(--ga-ink-900); }


/* ===========================================================================
   EL FILETE DORADO SOBRE MARFIL — corrección de contraste

   `.ga-btn--line` es el dorado de marca (#C5A149) sobre transparente, y está
   pensado para banda oscura. Sobre marfil da 2.6:1, que es exactamente lo que
   la regla 3 de tokens.css prohíbe. Estaba puesto así en cinco lugares: dos
   botones "Ver todo" del inicio, el "Volver" de las notas y los dos
   "Contactarnos" del reemplazo de mapa.

   Se corrige por CONTEXTO y no botón por botón: cualquier `--line` que caiga
   en una superficie clara pasa solo al dorado que sí cumple AA
   (--ga-gold-ink, 4.6:1). Así el próximo que se escriba tampoco falla, en vez
   de depender de que alguien se acuerde de usar la variante correcta.
   =========================================================================== */
.ga-band--bone .ga-btn--line,
.ga-cat .ga-btn--line,
.ga-sect .ga-btn--line,
.ga-vd__main .ga-btn--line,
.ga-vd-rel .ga-btn--line,
.ga-art .ga-btn--line,
.ga-sucs .ga-btn--line,
.ga-empty .ga-btn--line {
  border-color: var(--ga-bone-300);
  color: var(--ga-gold-ink);
}
.ga-band--bone .ga-btn--line:hover,
.ga-cat .ga-btn--line:hover,
.ga-sect .ga-btn--line:hover,
.ga-vd__main .ga-btn--line:hover,
.ga-vd-rel .ga-btn--line:hover,
.ga-art .ga-btn--line:hover,
.ga-sucs .ga-btn--line:hover,
.ga-empty .ga-btn--line:hover {
  border-color: var(--ga-gold-ink);
  color: var(--ga-gold-ink);
}


/* ===========================================================================
   IMPRESIÓN

   Alguien imprime una ficha de vehículo para llevársela, o la lleva el
   vendedor a una reunión. Sin esto salen seis páginas con la navbar fija
   pisando el contenido, el botón de WhatsApp en el medio de la hoja y el
   cotizador —que en papel no hace nada— ocupando media carilla.
   =========================================================================== */
@media print {
  .ga-nav,
  .ga-wsp,
  #backToTop,
  .ga-skip,
  .ga-foot,
  .ga-cot-card,
  .ga-hero__form,
  .ga-fside,
  .ga-pager,
  .ga-rail-nav,
  .ga-vd-rel { display: none !important; }

  body { padding-top: 0; background: #fff; }

  /* Las bandas oscuras en papel son un cartucho de tinta. */
  .ga-band--dark,
  .ga-band--ink,
  .ga-band--ink-d,
  .ga-hero,
  .ga-lhero,
  .ga-pagehead {
    background: #fff !important;
    color: #000 !important;
  }
  .ga-band--dark *,
  .ga-hero *,
  .ga-lhero *,
  .ga-pagehead * { color: #000 !important; }

  /* La dirección de un enlace no se ve en papel: se imprime al lado. */
  .ga-art a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; }

  .ga-vd { grid-template-columns: minmax(0, 1fr) !important; }
  a, img, .ga-vcard { break-inside: avoid; }
}


/* ===========================================================================
   RETÍCULAS — lo que separa es una línea, no un hueco

   Todo el sistema se apoya en esto: la ficha técnica, el panel de filtros, la
   escala de estado y el desglose del cotizador son TABLAS, y se leen como
   tales cuando sus celdas comparten bordes. Con `gap` cada celda quedaba
   flotando por su cuenta y el conjunto perdía la lectura tabular.
   =========================================================================== */

/* --- Escala de estado 1-5: UN marco partido, no cinco cajas --- */
.ga-escala {
  gap: 0;
  border: 1px solid var(--ga-bone-300);
  background: var(--ga-bone-0);
}
.ga-escala label + input + label,
.ga-escala label:not(:first-of-type) { border-left: 1px solid var(--ga-bone-300); }
.ga-escala .ga-escala-box { border: 0; }

/* --- Desglose del cotizador: una línea por renglón --- */
.ga-cot-desglose > div + div { border-top: 1px solid var(--ga-line-ink); }

/* --- Datos del usado en el cotizador: tabla, no campos sueltos --- */
.ga-cot-sub .ga-cot-row { gap: 0; }
.ga-cot-sub .ga-cot-row > .ga-cot-field {
  padding: var(--ga-s-3);
  margin-bottom: 0;
  border-right: 1px solid var(--ga-bone-200);
  border-bottom: 1px solid var(--ga-bone-200);
}
.ga-cot-sub .ga-cot-row > .ga-cot-field:nth-child(2n) { border-right: 0; }