/* =============================================================================
   Grupo Automotores — sitio público
   landings.css · consignación, contacto, nuestra historia y sucursales

   FASE 6. Las cuatro pantallas que quedaban con el sistema anterior, más el
   parcial `_seccion_ubicacion.html` que comparten dos de ellas.

   Reutiliza lo que ya existe en vez de duplicarlo:
     · `cotizador.css` — el wizard de consignación es el mismo motor que el de
       la ficha. Esta pantalla ya lo cargaba desde la fase 4.
     · `shell.css`     — `.ga-pagehead`, `.ga-crumbs`, `.ga-btn`, `.ga-lab`.
     · `home.css`      — `.ga-band` y su ritmo carbón/marfil.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   HERO DE LANDING

   Más bajo que el del home: acá el visitante ya sabe a qué vino. El del home
   tiene que vender; éste sólo tiene que ubicar.
   --------------------------------------------------------------------------- */
.ga-lhero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* El halo dorado va en el fondo del ELEMENTO, no en un `::after`.
     `shell.css` usa `::after` para la marca de agua de todas las superficies
     oscuras, y esta hoja carga después: definirlo acá se la comía, y la
     pantalla perdía la textura sin que fallara nada. */
  background:
    radial-gradient(120% 90% at 86% 6%, rgba(197, 161, 73, .16) 0%, transparent 58%),
    var(--ga-ink-900);
}
.ga-lhero__in {
  max-width: var(--ga-wrap);
  margin: 0 auto;
  padding: var(--ga-s-12) var(--ga-gutter) var(--ga-s-10);
}
.ga-lhero 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-ink);
  margin: var(--ga-s-3) 0 0;
  max-width: 18ch;
  text-wrap: balance;
}
.ga-lhero__sub {
  font-size: var(--ga-t-sm);
  color: var(--ga-on-ink-mut);
  margin: var(--ga-s-4) 0 0;
  max-width: 52ch;
}
.ga-lhero .ga-rule { margin-top: var(--ga-s-4); }
.ga-lhero__cta { display: flex; flex-wrap: wrap; gap: var(--ga-s-3); margin-top: var(--ga-s-6); }

/* ---------------------------------------------------------------------------
   PASOS NUMERADOS

   Los números SÍ son estructura acá: consignar es un proceso con orden, y el
   visitante quiere saber qué pasa primero y qué después. En el resto del sitio
   la numeración decorativa se evitó a propósito.
   --------------------------------------------------------------------------- */
.ga-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
@media (max-width: 900px) { .ga-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ga-pasos { grid-template-columns: minmax(0, 1fr); } }
.ga-paso { padding: var(--ga-s-5) var(--ga-s-5) var(--ga-s-6); border-left: 1px solid var(--ga-bone-200); }
.ga-paso:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 900px) {
  .ga-paso:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ga-paso:nth-child(n+3) { border-top: 1px solid var(--ga-bone-200); }
}
@media (max-width: 520px) {
  .ga-paso { border-left: 0; padding-left: 0; }
  .ga-paso + .ga-paso { border-top: 1px solid var(--ga-bone-200); }
}
.ga-paso__n {
  font-family: var(--ga-font-mono);
  font-size: .75rem;
  font-weight: var(--ga-w-mono-bold);
  color: var(--ga-gold-ink);
  letter-spacing: .06em;
}
.ga-paso h3 {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-med);
  font-size: var(--ga-t-h3);
  letter-spacing: var(--ga-track-disp);
  color: var(--ga-on-bone);
  margin: var(--ga-s-3) 0 0;
}
.ga-paso p { font-size: var(--ga-t-xs); color: var(--ga-on-bone-mut); margin: var(--ga-s-2) 0 0; }

/* ---------------------------------------------------------------------------
   SUCURSALES SOBRE CARBÓN

   El bloque dejó de ser una pantalla propia y pasó a ser la última banda de
   "Nosotros", donde el fondo es oscuro: la banda de arriba es clara y la
   alternancia se mantiene. Esto es sólo el repintado, no un componente nuevo
   — misma estructura, mismos hooks (`data-lat` incluido).

   Las variables cambian de par, no de rol: `--ga-bone-*` por `--ga-ink-*` y
   `--ga-on-bone*` por `--ga-on-ink*`. El dorado también cambia de tinta:
   sobre oscuro va `--ga-gold`, nunca `--ga-gold-ink`, que es el que existe
   para llegar a AA sobre claro y acá quedaría apagado.
   --------------------------------------------------------------------------- */
.ga-sucs--ink .ga-suc {
  background: var(--ga-ink-800);
  border-color: var(--ga-ink-700);
  box-shadow: none;
}
.ga-sucs--ink .ga-suc[data-lat]:hover { border-color: var(--ga-gold); }
.ga-sucs--ink .ga-suc h2,
.ga-sucs--ink .ga-suc h3 { color: var(--ga-on-ink); }
.ga-sucs--ink .ga-suc li { color: var(--ga-on-ink-mut); }
.ga-sucs--ink .ga-suc li .bi { color: var(--ga-gold); }

.ga-sucs--ink #mapaSucursales,
.ga-sucs--ink .ga-mapa-ph { border-color: var(--ga-ink-700); }
.ga-sucs--ink .ga-mapa-ph { background: var(--ga-ink-800); color: var(--ga-on-ink-mut); }
.ga-sucs--ink .ga-mapa-ph .bi { color: var(--ga-gold); }

/* ---------------------------------------------------------------------------
   FORMULARIO DE CONTACTO

   Los campos los renderiza Django desde `ContactoForm`. Los widgets llevan
   `class="form-control ga-input"`: `form-control` es hook del JS de la página
   (`$('.form-control').removeClass('is-invalid')`) y `ga-input` es lo que
   estiliza. Las dos tienen la misma especificidad, así que estas reglas ganan
   por orden de carga — Bootstrap va antes en el <head>.
   --------------------------------------------------------------------------- */
.ga-form { display: grid; gap: var(--ga-s-4); }
.ga-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ga-s-4); }
@media (max-width: 620px) { .ga-form__row { grid-template-columns: minmax(0, 1fr); } }
.ga-form__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ga-form__field > 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-ink-mut);
}
.ga-form__req { color: var(--ga-danger-lit); }

.ga-input,
textarea.ga-input {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  font-family: var(--ga-font-body);
  font-size: var(--ga-t-sm);
  line-height: 1.5;
  color: var(--ga-on-ink);
  background: var(--ga-fill-ink);
  border: 1px solid var(--ga-line-ink);
  border-radius: var(--ga-r);
  appearance: none;
}
textarea.ga-input { min-height: 116px; resize: vertical; }
.ga-input::placeholder { color: var(--ga-on-ink-mut); }
.ga-input:focus {
  outline: none;
  background: var(--ga-fill-ink);
  color: var(--ga-on-ink);
  border-color: var(--ga-gold);
  box-shadow: 0 0 0 3px var(--ga-gold-ring);
}
.ga-input.is-invalid {
  border-color: var(--ga-danger-lit);
  box-shadow: 0 0 0 3px rgba(210, 112, 95, .16);
}
/* `.invalid-feedback` de Bootstrap arranca oculta y la muestra `.is-invalid`;
   acá el JS le escribe el texto directo, así que tiene que verse siempre. */
.ga-form .invalid-feedback {
  display: block;
  font-size: var(--ga-t-xs);
  color: var(--ga-danger-lit);
}

.ga-alert {
  display: flex;
  gap: var(--ga-s-3);
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--ga-r);
  font-size: var(--ga-t-sm);
  margin-bottom: var(--ga-s-4);
}
.ga-alert--ok { background: rgba(74, 124, 89, .14); border: 1px solid rgba(74, 124, 89, .4); color: var(--ga-on-ink); }
.ga-alert--err { background: rgba(210, 112, 95, .12); border: 1px solid rgba(210, 112, 95, .38); color: var(--ga-on-ink); }
.ga-alert .bi { flex: none; margin-top: 2px; }

/* Ficha de datos de contacto, al lado del formulario. */
.ga-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ga-datos li { display: flex; gap: var(--ga-s-4); padding: var(--ga-s-4) 0; border-top: 1px solid var(--ga-line-ink); }
.ga-datos li:last-child { border-bottom: 1px solid var(--ga-line-ink); }
.ga-datos .bi { color: var(--ga-gold); flex: none; margin-top: 3px; }
.ga-datos__k {
  display: block;
  font-family: var(--ga-font-mono);
  font-size: .5625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ga-on-ink-mut);
}
.ga-datos__v { display: block; font-size: var(--ga-t-sm); color: var(--ga-on-ink); margin-top: 3px; }
.ga-datos__v a { color: inherit; text-decoration: none; }
.ga-datos__v a:hover { color: var(--ga-gold); }

/* ---------------------------------------------------------------------------
   LÍNEA DE TIEMPO — nuestra historia

   Los hooks `timeline-img hito-foto`, `timeline-thumb hito-foto` y
   `timeline-thumbs` los fija `test_hito_imagenes.py` **como string literal**,
   incluido el orden de las clases. No se renombran ni se reordenan.
   --------------------------------------------------------------------------- */
.ga-tl { position: relative; max-width: 820px; margin: 0 auto; }
/* El riel vertical. En mobile se corre a la izquierda en vez de desaparecer:
   es lo que hace legible que los hitos son una secuencia. */
.ga-tl::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--ga-bone-300);
}
.ga-tl__item { position: relative; padding: 0 0 var(--ga-s-8) var(--ga-s-10); }
.ga-tl__item::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ga-gold-ink);
  border: 2px solid var(--ga-bone-50);
}
.ga-tl__anio {
  font-family: var(--ga-font-mono);
  font-size: .75rem;
  font-weight: var(--ga-w-mono-bold);
  letter-spacing: .06em;
  color: var(--ga-gold-ink);
  font-variant-numeric: tabular-nums;
}
.ga-tl__item h3 {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-med);
  font-size: var(--ga-t-h3);
  letter-spacing: var(--ga-track-disp);
  color: var(--ga-on-bone);
  margin: var(--ga-s-2) 0 0;
}
.ga-tl__item p { font-size: var(--ga-t-sm); color: var(--ga-on-bone-mut); margin: var(--ga-s-2) 0 0; max-width: 62ch; }

.timeline-img {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--ga-r-lg);
  border: 1px solid var(--ga-bone-200);
  margin-top: var(--ga-s-4);
  cursor: pointer;
  display: block;
}
.timeline-thumbs { display: flex; gap: var(--ga-s-2); margin-top: var(--ga-s-2); flex-wrap: wrap; }
.timeline-thumb {
  width: 66px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ga-r-xs);
  border: 1px solid var(--ga-bone-200);
  cursor: pointer;
}
.timeline-thumb:hover { border-color: var(--ga-gold-ink); }
.hito-modal-img { width: 100%; display: block; border-radius: var(--ga-r-lg) var(--ga-r-lg) 0 0; }

/* Modales de Bootstrap con la piel del sistema. */
.ga-modal .modal-content {
  background: var(--ga-ink-800);
  color: var(--ga-on-ink);
  border: 1px solid var(--ga-gold-a30);
  border-radius: var(--ga-r-xl);
  overflow: hidden;
}
.ga-modal h2 {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-med);
  font-size: var(--ga-t-h3);
  letter-spacing: var(--ga-track-disp);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   SUCURSALES
   --------------------------------------------------------------------------- */
.ga-sucs { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--ga-s-6); align-items: start; }
@media (max-width: 900px) { .ga-sucs { grid-template-columns: minmax(0, 1fr); } }
.ga-suc {
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r-lg);
  padding: var(--ga-s-5);
  box-shadow: var(--ga-el);
}
.ga-suc + .ga-suc { margin-top: var(--ga-s-3); }
.ga-suc[data-lat] { cursor: pointer; }
.ga-suc[data-lat]:hover { border-color: var(--ga-gold-ink); }
.ga-suc h2,
.ga-suc h3 {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-med);
  font-size: var(--ga-t-h3);
  letter-spacing: var(--ga-track-disp);
  color: var(--ga-on-bone);
  margin: 0;
}
.ga-suc ul { list-style: none; margin: var(--ga-s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ga-s-2); }
.ga-suc li { display: flex; gap: var(--ga-s-2); font-size: var(--ga-t-xs); color: var(--ga-on-bone-mut); }
.ga-suc li .bi { color: var(--ga-gold-ink); flex: none; margin-top: 2px; }
.ga-suc .ga-btn { margin-top: var(--ga-s-4); }

/* `#mapaSucursales` es el hook del Leaflet propio de esa pantalla. */
#mapaSucursales,
.ga-sucs .ga-mapa-ph {
  height: 520px;
  border-radius: var(--ga-r-xl);
  overflow: hidden;
  border: 1px solid var(--ga-bone-200);
}
@media (max-width: 700px) { #mapaSucursales, .ga-sucs .ga-mapa-ph { height: 320px; } }
.ga-sucs .ga-mapa-ph { background: var(--ga-bone-200); color: var(--ga-on-bone-mut); }
.ga-sucs .ga-mapa-ph .bi { color: var(--ga-gold-ink); }

/* ---------------------------------------------------------------------------
   SECCIÓN "DÓNDE ESTAMOS"  (`_seccion_ubicacion.html`)

   La comparten "nuestra historia" y consignación. El home ya no la incluye:
   en la fase 5 pasó a ser su banda 7, fusionada con el CTA de contacto.
   Reusa `.ga-donde` y `#mapaUbicacion` de home.css.
   --------------------------------------------------------------------------- */


/* ===========================================================================
   CONTACTO — WhatsApp primero
   =========================================================================== */
.ga-contacto__intro {
  font-size: var(--ga-t-body);
  line-height: 1.65;
  color: var(--ga-on-bone-mut);
  margin: 0 0 var(--ga-s-5);
  max-width: 52ch;
}
.ga-contacto__h2 { margin: var(--ga-s-6) 0 var(--ga-s-5); color: var(--ga-on-bone); }

/* Un botón más grande que el resto, porque es el CTA principal de la pantalla
   y compite con un formulario entero. */
.ga-btn--grande { min-height: 52px; padding: 16px 24px; font-size: var(--ga-t-body); }

/* Separador entre el CTA y el formulario. `.ga-hairline` es claro; sobre la
   banda de contacto, que es carbón, hay que invertirlo. */
.ga-hairline--sep { margin: var(--ga-s-6) 0 0; }
.ga-band--dark .ga-hairline { background: var(--ga-line-ink); }


/* ===========================================================================
   ENCABEZADO CLARO — `.ga-lhero--bone`

   Mismo componente, superficie invertida. Lo usan Entregas, Al día y Contacto:
   pantallas de contenido, donde la banda oscura no aportaba nada más que un
   escalón que atravesar. Consignaciones y Nosotros se quedan en carbón, porque
   ahí la portada oscura ES el argumento: son las dos pantallas que tienen que
   convencer, no informar.
   =========================================================================== */
.ga-lhero--bone {
  background: var(--ga-bone-50);
  color: var(--ga-on-bone);
}
.ga-lhero--bone::before,
.ga-lhero--bone::after { display: none; }
.ga-lhero--bone h1 { color: var(--ga-on-bone); }
.ga-lhero--bone .ga-lhero__sub { color: var(--ga-on-bone-mut); }
.ga-lhero--bone .ga-lab { color: var(--ga-gold-ink); }
.ga-lhero--bone .ga-rule {
  width: 100%;
  height: 2px;
  background: var(--ga-on-bone);
  margin-top: var(--ga-s-5);
}
.ga-lhero--bone .ga-lhero__in { padding-bottom: 0; }


/* ===========================================================================
   CONTACTO SOBRE MARFIL

   `.ga-form`, `.ga-input` y `.ga-datos` están escritos para banda oscura, y
   los comparte consignaciones —que sigue siendo oscura—. Así que en vez de
   reescribirlos, la pantalla de contacto los invierte desde su propio
   contenedor. Una hoja, un componente, dos superficies.
   =========================================================================== */
.ga-contacto .ga-lab { color: var(--ga-gold-ink); }
.ga-contacto .ga-h2,
.ga-contacto .ga-h3,
.ga-contacto h2 { color: var(--ga-on-bone); }

.ga-contacto .ga-form__field > label { color: var(--ga-on-bone-mut); }
.ga-contacto .ga-input,
.ga-contacto textarea.ga-input {
  background: var(--ga-bone-0);
  border-color: var(--ga-bone-300);
  color: var(--ga-on-bone);
}
.ga-contacto .ga-input::placeholder { color: var(--ga-on-bone-mut); }
.ga-contacto .ga-input:focus {
  border-color: var(--ga-gold-ink);
  box-shadow: 0 0 0 3px var(--ga-goldink-a16);
}

.ga-contacto .ga-datos li { border-top-color: var(--ga-bone-200); }
.ga-contacto .ga-datos li:last-child { border-bottom-color: var(--ga-bone-200); }
.ga-contacto .ga-datos .bi { color: var(--ga-gold-ink); }
.ga-contacto .ga-datos__k { color: var(--ga-on-bone-mut); }
.ga-contacto .ga-datos a,
.ga-contacto .ga-datos span { color: var(--ga-on-bone); }
.ga-contacto .ga-hairline { background: var(--ga-bone-300); }

/* El mapa y su reemplazo siguen siendo superficies oscuras: son una ventana a
   otra cosa, no parte del formulario. */