/* GUIALOGG Sprint 2 — refinamento visual, navegação e conversão */
:root { --header-offset: 84px; }

/* Direção visual aprovada: título principal claro e destaque final azul. */
.hero h1 .hero-title-main {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}
.hero h1 .hero-title-accent {
  color: var(--blue-2) !important;
  -webkit-text-fill-color: var(--blue-2) !important;
  text-shadow: 0 0 30px color-mix(in srgb, var(--blue) 26%, transparent);
}

.hero { min-height: min(900px, calc(100svh - var(--header-offset))); padding-block: clamp(42px, 5vw, 76px); }
.hero-grid { align-items: center; }
.hero-content { min-width: 0; }
.hero-sub { line-height: 1.62; }
.map-card { box-shadow: 0 28px 80px rgba(0, 9, 24, .38), 0 0 42px rgba(21, 119, 255, .08); }

/* Navegação informa em qual área o visitante está. */
.nav a { position: relative; padding-block: 12px; }
.nav a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 4px; height: 2px;
  border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: left .2s ease, right .2s ease, opacity .2s ease; opacity: 0;
}
.nav a:hover::after, .nav a.is-active::after { left: 0; right: 0; opacity: 1; }
.nav a.is-active { color: var(--blue-2); opacity: 1; }

/* Ritmo vertical: reduz vazio entre a primeira dobra e os indicadores. */
.hero + .metrics-strip { margin-top: clamp(-34px, -2.2vw, -12px); }
.metrics-strip { position: relative; z-index: 4; }

/* Leitura e hierarquia dos cards de indicadores. */
.metric-card { min-height: 132px; }
.metric-card strong { letter-spacing: -.04em; }
.metric-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--blue) 42%, var(--line)); }

/* Formulários e calculadoras com foco mais evidente. */
:is(input, select, textarea):focus-visible {
  outline: none !important;
  border-color: color-mix(in srgb, var(--blue) 70%, white 5%) !important;
  box-shadow: 0 0 0 4px rgba(20, 125, 255, .13) !important;
}
.contact-form .btn-primary, .freight-card .btn-primary { min-width: 170px; }

/* Barra de progresso discreta no topo. */
.page-progress {
  position: fixed; z-index: 1400; top: 0; left: 0; width: 100%; height: 3px;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green));
  box-shadow: 0 0 12px rgba(25, 145, 255, .5); pointer-events: none;
}

/* CTA móvel permanece acessível sem cobrir o LoggiBot. */
.mobile-cta { display: none; }

@media (max-width: 1180px) {
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-content { max-width: 900px; margin-inline: auto; }
  .map-stage { width: 100%; max-width: 1040px; margin-inline: auto; }
  .hero h1 { max-width: 820px; }
}

@media (max-width: 760px) {
  :root { --header-offset: 72px; }
  body { padding-bottom: 78px; }
  .hero { padding-top: 34px; padding-bottom: 48px; }
  .hero h1 { font-size: clamp(42px, 12vw, 58px); line-height: .98; letter-spacing: -2.5px; }
  .hero-actions .btn { width: 100%; }
  .fleet-grid { grid-template-columns: 1fr; }
  .fleet-card { display: grid; grid-template-columns: 42% 1fr; align-items: center; }
  .fleet-card img { height: 92px; }
  .mobile-cta {
    position: fixed; z-index: 1250; display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; left: 10px; right: 10px; bottom: 10px; padding: 8px;
    border: 1px solid var(--line-strong); border-radius: 18px;
    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px);
    box-shadow: 0 18px 45px rgba(0,0,0,.34);
  }
  .mobile-cta a {
    min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 12px; font-size: 13px; font-weight: 800;
  }
  .mobile-cta-primary { color: #fff; background: linear-gradient(135deg, #176fff, #24d4e9); }
  .mobile-cta-whatsapp { color: #fff; background: linear-gradient(135deg, #21c763, #0da84a); }
  .chatbot-button { bottom: 92px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .page-progress, .nav a::after { transition: none !important; }
}