/* GarageLot — estilos propios sobre Bootstrap 6 (alpha).
   Bootstrap aporta el sistema (utilidades, botones, tarjetas, acordeón, modo claro/oscuro);
   aquí solo va la identidad de marca y el maquetado específico de la landing. */

@font-face {
  font-family: "Poppins GL";
  src: url("../fonts/poppins-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --gl-ink: #0f1e3d;
  --gl-ink-2: #1e3566;
  --gl-amber: #ffb020;
  --gl-amber-deep: #f28c00;
  --gl-heading: "Poppins GL", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gl-muted: color-mix(in oklch, var(--bs-fg-body) 72%, transparent);
  --gl-section-y: clamp(3.5rem, 2rem + 5vw, 6rem);
}

/* Tema de marca para los componentes de Bootstrap 6 (.theme-*): ámbar con texto azul tinta */
.theme-garage {
  --bs-theme-base: #ffb020;
  --bs-theme-fg: light-dark(#a85a00, #ffb020);
  --bs-theme-fg-emphasis: light-dark(#7a3f00, #ffd27a);
  --bs-theme-bg: #ffb020;
  --bs-theme-bg-subtle: light-dark(#fff3db, #3a2a08);
  --bs-theme-bg-muted: light-dark(#ffe5b0, #4d3708);
  --bs-theme-border: light-dark(#ffcf70, #8a5f10);
  --bs-theme-focus-ring: light-dark(rgb(255 176 32 / 0.5), rgb(255 176 32 / 0.75));
  --bs-theme-contrast: #0f1e3d;
}

h1,
h2,
h3,
.gl-heading {
  font-family: var(--gl-heading);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.gl-muted {
  color: var(--gl-muted);
}

.gl-section {
  padding-block: var(--gl-section-y);
}

.gl-section-alt {
  background: var(--bs-bg-1);
}

.gl-section-title {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.gl-eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: light-dark(#a85a00, var(--gl-amber));
}

.gl-lead {
  max-width: 40rem;
  font-size: 1.125rem;
  color: var(--gl-muted);
}

/* Iconos de trazo (los <symbol> del sprite heredan estos estilos) */
.gl-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Accesibilidad ---------- */
.gl-skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  z-index: 1000;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--gl-amber);
  color: var(--gl-ink);
  font-weight: 600;
  text-decoration: none;
}
.gl-skip:focus {
  top: 1rem;
}

/* ---------- Cabecera ---------- */
.gl-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklch, var(--bs-bg-body) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bs-border-color);
}
.gl-header-inner {
  min-height: 4.25rem;
}
.gl-logo {
  display: block;
  height: 2.5rem;
  width: auto;
}
/* El logo claro/oscuro se alterna con el modo de color del sistema */
.gl-logo-dark-mode {
  display: none;
}
@media (prefers-color-scheme: dark) {
  .gl-logo-light-mode {
    display: none;
  }
  .gl-logo-dark-mode {
    display: block;
  }
}
/* Selector de idioma */
.gl-lang {
  display: flex;
  gap: 0.15rem;
  padding: 0.15rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.gl-lang a {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: var(--gl-muted);
  text-decoration: none;
}
.gl-lang a:hover,
.gl-lang a:focus-visible {
  color: var(--bs-fg-body);
}
.gl-lang a[aria-current="true"] {
  color: var(--gl-ink);
  background: var(--gl-amber);
}
.gl-brand {
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .gl-header-inner {
    gap: 0.5rem !important;
  }
  .gl-header-inner > div:last-child {
    gap: 0.5rem !important;
  }
  .gl-header .gl-logo {
    height: 1.9rem;
  }
  .gl-header-cta {
    display: none;
  }
}

.gl-navlink {
  color: var(--gl-muted);
  font-weight: 500;
  text-decoration: none;
}
.gl-navlink:hover,
.gl-navlink:focus-visible {
  color: var(--bs-fg-body);
}

/* ---------- Hero ---------- */
.gl-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(60rem 28rem at 85% -10%, rgb(255 176 32 / 0.22), transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%, rgb(79 124 255 / 0.25), transparent 60%),
    linear-gradient(160deg, var(--gl-ink) 0%, #14295a 100%);
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
}
.gl-hero .gl-lead {
  color: rgb(255 255 255 / 0.78);
}
.gl-hero-title {
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
  line-height: 1.08;
  margin-bottom: 1.25rem;
}
.gl-hero-title em {
  font-style: normal;
  color: var(--gl-amber);
}
.gl-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.2);
}
.gl-pill::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gl-amber);
}
.btn-ghost-light {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgb(255 255 255 / 0.4);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(255 255 255 / 0.12);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(255 255 255 / 0.2);
  --bs-btn-active-border-color: #fff;
}
.gl-hero-note {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 0.65);
}

/* Maqueta ilustrativa de la web de un concesionario */
.gl-mock {
  --gl-car-bg: #fff;
  border-radius: 1rem;
  background: #fff;
  color: #1b2a4a;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.08);
  overflow: hidden;
}
.gl-mock-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  background: #eef1f7;
}
.gl-mock-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #cfd6e4;
}
.gl-mock-url {
  flex: 1;
  margin-inline-start: 0.6rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: #fff;
  font-size: 0.75rem;
  color: #6b7793;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-mock-body {
  padding: 1rem;
}
.gl-mock-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.gl-mock-brand {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.45rem;
  background: var(--gl-ink);
}
.gl-sk {
  display: block;
  height: 0.55rem;
  border-radius: 999px;
  background: #e3e8f2;
}
.gl-sk-lg {
  height: 0.8rem;
}
.gl-mock-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.gl-mock-card {
  padding: 0.6rem;
  border: 1px solid #e3e8f2;
  border-radius: 0.75rem;
}
.gl-mock-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  margin-bottom: 0.6rem;
  border-radius: 0.5rem;
  color: var(--gl-ink-2);
  background: linear-gradient(160deg, #e8edf8, #d5dff3);
}
.gl-mock-photo svg {
  width: 62%;
  height: auto;
}
.gl-mock-photo.is-amber {
  color: #c97300;
  background: linear-gradient(160deg, #fff1d6, #ffe0a3);
}
.gl-mock-tag {
  display: inline-block;
  width: 3.2rem;
  height: 0.9rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--gl-amber);
}
.gl-mock-caption {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.6);
}

/* ---------- Tarjetas de características ---------- */
.gl-feature-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  color: var(--gl-ink);
  background: var(--gl-amber);
}
.gl-feature-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* ---------- Planes ---------- */
.gl-plan {
  height: 100%;
}
.gl-plan .card-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
}
.gl-plan-featured {
  border: 2px solid var(--gl-amber);
  box-shadow: 0 20px 40px -24px rgb(255 176 32 / 0.55);
}
.gl-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--gl-heading);
  font-size: clamp(2.2rem, 1.8rem + 1.5vw, 2.9rem);
  line-height: 1;
}
.gl-price small {
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gl-muted);
}
.gl-checks {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}
/* Cabecera del plan (nombre + descripción): misma altura en escritorio para que los precios queden alineados */
@media (min-width: 992px) {
  .gl-plan-head {
    min-height: 5.75rem;
  }
}
.gl-checks li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.gl-checks svg {
  flex: 0 0 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  color: light-dark(#a85a00, var(--gl-amber));
}

/* ---------- Pasos ---------- */
.gl-step-num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  font-family: var(--gl-heading);
  color: #fff;
  background: var(--gl-ink);
}
@media (prefers-color-scheme: dark) {
  .gl-step-num {
    color: var(--gl-ink);
    background: var(--gl-amber);
  }
}

/* ---------- Banda CTA y pie ---------- */
.gl-cta {
  color: #fff;
  text-align: center;
  background:
    radial-gradient(40rem 18rem at 50% 120%, rgb(255 176 32 / 0.25), transparent 65%),
    linear-gradient(160deg, var(--gl-ink), #14295a);
}
.gl-cta .gl-lead {
  margin-inline: auto;
  color: rgb(255 255 255 / 0.78);
}
.gl-footer {
  padding-block: 2.5rem;
  color: rgb(255 255 255 / 0.7);
  background: #0a1530;
}
.gl-footer a {
  color: rgb(255 255 255 / 0.85);
  text-decoration: none;
}
.gl-footer a:hover,
.gl-footer a:focus-visible {
  color: var(--gl-amber);
  text-decoration: underline;
}
.gl-footer .gl-logo {
  display: block;
  height: 2.25rem;
}

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

/* Botón flotante de WhatsApp */
.gl-whatsapp {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  background: #1FA855;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 20px rgb(0 0 0 / .25);
}
.gl-whatsapp:hover,
.gl-whatsapp:focus-visible { background: #178f46; color: #fff; }
.gl-whatsapp .gl-icon { width: 1.4rem; height: 1.4rem; stroke: none; fill: currentColor; }
@media (max-width: 575.98px) {
  .gl-whatsapp span { display: none; }
  .gl-whatsapp { padding: .85rem; }
}