/* =====================================================================
   ATADRIVE — FOLHA DE ESTILO COMPARTILHADA (atadrive.css)
   Use este mesmo arquivo em todas as páginas: <link rel="stylesheet" href="atadrive.css">
   Paleta fiel à logo vetorizada: indigo-navy (texto) + azul médio (acento) + branco frio (fundo)
   Logo: texto #1E2455 | ícone gradiente #5AB0DC → #2A7FC0 → #163A6B
   ===================================================================== */
:root {
  --navy-deep: #111B38;        /* navy profundo — base escura seções dark */
  --navy: #163054;             /* navy médio — gradiente logo (base pin) */
  --navy-2: #1E2455;           /* indigo-navy — cor exata do texto da logo */
  --navy-3: #2A7FC0;           /* azul médio — gradiente logo (centro ícone) */
  --gold: #2A93D6;             /* azul aço — gradiente logo (topo ícone) */
  --gold-soft: #5AB0DC;        /* azul aço claro — highlight logo */
  --blue: #1E56B8;
  --bg: #F4F6F9;               /* branco frio limpo — valoriza elementos azuis da logo */
  --white: #fff;
  --line: #E2E8F0;
  --ink: #1E2455;              /* texto corpo = mesma cor do texto da logo */
  --mute: #5A6A82;
  --mute-d: #9FB3C6;
  --maxw: 1280px;
  --disp: 'Cormorant Garamond', Georgia, serif;
  --body: 'Inter', -apple-system, Arial, sans-serif;
  --radius: 14px;
  --shadow: 0 18px 40px rgba(20, 48, 75, .10);

  /* Alturas das barras fixas do mobile — usadas para empilhar
     CTA (topo) > header > conteúdo sem sobreposição. */
  --cta-h: 48px;
  --header-h-mobile: 73px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px
}

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased
}

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

a {
  text-decoration: none;
  color: inherit
}

ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px
}

/* ---- Tipografia / utilitários ---- */
h1,
h2,
h3 {
  font-family: var(--disp);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .4px
}

h2 {
  letter-spacing: .8px
}

h3 {
  letter-spacing: .5px
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy-3);
  display: inline-flex;
  align-items: center;
  gap: 10px
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
  flex-shrink: 0
}

.rule,
.divider-left {
  height: 2px;
  width: 46px;
  background: linear-gradient(90deg, var(--gold-soft) 0%, var(--navy-3) 100%);
  margin: 14px auto 0;
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform .55s cubic-bezier(.4,0,.2,1) .15s, opacity .4s ease .1s
}

.rule.vis,
.divider-left.vis {
  transform: scaleX(1);
  opacity: 1
}

/* ---- Botões ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 6px;
  padding: 14px 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
  cursor: pointer;
  border: 0;
  transition: .18s;
  font-family: var(--body)
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--navy-3) 100%);
  color: #fff;
  animation: glow-pulse 2.8s ease-in-out infinite
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%);
  transform: translateY(-2px);
  animation: none;
  box-shadow: 0 6px 24px rgba(42,147,214,.45)
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(42,147,214,0) }
  50%       { box-shadow: 0 0 18px 4px rgba(42,147,214,.35) }
}

.btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4)
}

.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold)
}

/* .btn-outline nasceu para fundo escuro (texto e borda brancos). Usado
   dentro de uma seção clara ele some. Este fallback inverte as cores
   automaticamente em qualquer contexto claro. */
.sec-light .btn-outline,
.footer .btn-outline,
.rotas-sec .btn-outline {
  color: var(--navy-2);
  border-color: var(--navy-3)
}

.sec-light .btn-outline:hover,
.footer .btn-outline:hover,
.rotas-sec .btn-outline:hover {
  background: var(--navy-2);
  border-color: var(--navy-2);
  color: #fff
}

.btn-dark {
  background: var(--navy-2);
  color: #fff
}

.btn-dark:hover {
  background: var(--navy-3)
}

.btn-block {
  width: 100%
}

/* ---- Seções ---- */
.section-padding {
  padding: 86px 0
}

.sec-dark {
  background: linear-gradient(165deg, var(--navy-2) 0%, var(--navy) 100%);
  color: #fff
}

.sec-light {
  background: var(--bg)
}

.section-title {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 52px
}

.section-title h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin: 10px 0 12px;
  color: var(--navy-2)
}

.sec-dark .section-title h2 {
  color: #fff
}

.section-title p {
  font-size: 16px;
  color: var(--mute);
  margin: 0
}

.sec-dark .section-title p {
  color: var(--mute-d)
}

/* ---- Header ---- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
  border-bottom: 1px solid rgba(14, 34, 54, .08)
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap garante respiro mínimo entre logo e menu mesmo quando o
     space-between "cola" os dois em telas intermediárias */
  gap: 56px;
  padding-top: 12px;
  padding-bottom: 12px
}

/* A logo nunca encolhe nem é empurrada pelo menu */
.logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-right: 8px
}

.nav-menu {
  flex: 0 1 auto;
  margin-left: auto
}

.logo img {
  max-height: 65px;
  width: auto;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), filter .35s ease;
  transform-origin: left center;
  will-change: transform, filter
}

.logo:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px rgba(42, 147, 214, .55)) drop-shadow(0 0 22px rgba(42, 147, 214, .30))
}

.logo:active img {
  transform: scale(1.02)
}

.nav-menu ul {
  display: flex;
  align-items: center;
  gap: 26px
}

.nav-menu a {
  color: #0E2236;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .3px;
  transition: .15s
}

.nav-menu a:hover {
  color: var(--gold)
}

.nav-menu .btn {
  padding: 11px 20px
}

/* Faixa intermediária (notebook): reduz o respiro de forma proporcional
   para o menu não quebrar linha, mas sem encostar na logo. */
@media(min-width:961px) and (max-width:1150px) {
  .header-container {
    gap: 30px
  }

  .nav-menu ul {
    gap: 18px
  }

  .logo img {
    max-height: 56px
  }

  .nav-menu .btn {
    padding: 10px 16px
  }
}

.menu-toggle {
  display: none
}

.menu-icon {
  display: none;
  color: #0E2236;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(8, 20, 33, .94) 0%, rgba(8, 20, 33, .72) 55%, rgba(8, 20, 33, .42) 100%),
    url('img/foto-02.jpg') center/cover no-repeat;
  will-change: background-position;
  transition: background-position .05s linear;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 120px;
  padding-bottom: 70px;
  text-align: center
}

.hero-content h1 {
  font-size: clamp(36px, 6.2vw, 68px);
  max-width: 860px;
  margin: 18px auto 16px
}

.hero-content .eyebrow {
  color: var(--gold-soft)
}

.hero-content .eyebrow::before {
  background: var(--gold-soft)
}

.sec-dark .eyebrow {
  color: var(--gold-soft)
}

.sec-dark .eyebrow::before {
  background: var(--gold-soft)
}

.hero-content h1 .accent {
  color: var(--gold)
}

.hero-content h1 .accent-gradient {
  background: linear-gradient(100deg, var(--gold-soft) 0%, var(--gold) 50%, var(--navy-3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hero-content p {
  font-size: clamp(17px, 2.2vw, 21px);
  color: #E9EEF4;
  max-width: 660px;
  margin: 0 auto 10px
}

.hero-content p i {
  font-family: var(--disp);
  font-style: italic
}

.hero-content p strong {
  color: var(--gold);
  font-weight: 700
}

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px
}

.hero-trust {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12)
}

.hero-trust span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #C7D3E0
}

.hero-trust i {
  color: var(--gold)
}

/* ---- Serviços ---- */
.grid-servicos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.card-servico {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: .2s;
  display: block;
  height: 100%
}

.card-servico:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #D8C18A
}

.card-servico .icon-gold,
.card-servico>i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--navy-2);
  color: var(--gold);
  font-size: 23px;
  margin-bottom: 18px
}

.card-servico h3 {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--disp);
  color: var(--navy-2);
  margin: 0 0 8px;
  letter-spacing: .5px
}

.card-servico p {
  font-size: 14px;
  color: var(--mute);
  margin: 0 0 16px
}

.link-saiba-mais {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: .2s
}

.card-servico:hover .link-saiba-mais {
  gap: 11px
}

.card-servico.is-b2b {
  background: var(--navy-2);
  border-color: var(--navy-2)
}

.card-servico.is-b2b h3 {
  color: #fff
}

.card-servico.is-b2b p {
  color: var(--mute-d)
}

.card-servico.is-b2b>i {
  background: rgba(42, 147, 214, .16)
}

/* ---- Selos de confiança ---- */
.selos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.selo {
  display: flex;
  gap: 16px;
  align-items: flex-start
}

.selo>i {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(42, 147, 214, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 21px
}

.selo h3 {
  margin: 0 0 4px;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff
}

.sec-light .selo h3 {
  color: var(--navy)
}

.sec-light .selo p {
  color: var(--mute)
}

.selo p {
  margin: 0;
  font-size: 13px;
  color: var(--mute-d);
  line-height: 1.5
}

/* ---- Frota ---- */
.frota-carousel-wrap {
  position: relative
}

.frota-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 18px
}

.frota-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
  padding: 0
}

.frota-dot.active {
  background: var(--gold);
  transform: scale(1.3)
}

@media(max-width: 768px) {
  .frota-dots {
    display: flex
  }

  .grid-frota {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 4px;
    scrollbar-width: none
  }

  .grid-frota::-webkit-scrollbar {
    display: none
  }

  .grid-frota .card-frota {
    flex: 0 0 78vw;
    max-width: 320px;
    scroll-snap-align: center
  }
}

.grid-frota {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.card-frota {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: .2s
}

.card-frota:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow)
}

.frota-img-container {
  aspect-ratio: 4/3;
  background: #EEF2F7;
  overflow: hidden
}

.frota-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.frota-info {
  padding: 18px 20px 22px
}

.frota-info h3 {
  font-size: 23px;
  font-weight: 600;
  color: var(--navy-2);
  margin: 0 0 6px
}

.frota-info p {
  font-size: 13px;
  color: var(--mute);
  margin: 0
}

/* ---- Como Funciona ---- */
.passos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.passos-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 860px;
  margin-left: auto;
  margin-right: auto
}

.passo-item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 32px 24px 28px;
  position: relative;
  transition: .2s;
  overflow: hidden
}

.passo-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-soft), var(--navy-3));
  opacity: 0;
  transition: opacity .25s
}

.passo-item:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  transform: translateY(-3px)
}

.passo-item:hover::before {
  opacity: 1
}

.passo-icone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(42,147,214,.18);
  border-radius: 12px;
  margin-bottom: 18px
}

.passo-numero {
  font-family: var(--body);
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1
}

.passo-item h3 {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 8px 0 8px
}

.passo-item p {
  font-size: 13.5px;
  color: var(--mute-d);
  margin: 0;
  line-height: 1.55
}

/* ---- Variante para fundo claro ----
   O bloco acima foi escrito assumindo .sec-dark (fundo translúcido branco
   e texto #fff). Em .sec-light ficava claro sobre claro — ilegível.
   Estas regras deixam o componente utilizável nos dois fundos. */
.sec-light .passo-item {
  background: var(--white);
  border-color: var(--line);
  box-shadow: 0 2px 10px rgba(20, 48, 75, .05)
}

.sec-light .passo-item:hover {
  background: var(--white);
  border-color: var(--gold-soft);
  box-shadow: var(--shadow)
}

.sec-light .passo-icone {
  background: rgba(42, 147, 214, .12)
}

.sec-light .passo-numero {
  color: var(--navy-3)
}

.sec-light .passo-item h3 {
  color: var(--ink)
}

.sec-light .passo-item p {
  color: var(--mute)
}

/* ---- Depoimentos ---- */
.google-rate {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto 40px;
  font-size: 14px;
  color: #3a4a5a;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 40px;
  padding: 10px 22px;
  text-decoration: none;
  transition: .18s;
  cursor: pointer;
  width: auto
}

.google-rate:hover {
  border-color: var(--gold);
  color: var(--navy-2);
  box-shadow: 0 4px 16px rgba(42,147,214,.12);
  transform: translateY(-1px)
}

.google-rate .rt {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-2)
}

.depo-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap
}

.btn-outline-blue {
  background: transparent;
  color: var(--navy-2);
  border: 1.5px solid var(--navy-3);
  border-radius: 6px;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: .18s;
  font-family: var(--body)
}

.btn-outline-blue:hover {
  background: var(--navy-2);
  color: #fff;
  border-color: var(--navy-2)
}

.btn-ghost {
  background: transparent;
  color: var(--mute);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: .18s;
  font-family: var(--body)
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--navy-2)
}


.stars {
  color: var(--gold);
  letter-spacing: 2px
}

.depo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

/* ===== Carrossel de Avaliações ===== */
.rcar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px
}

.rcar-viewport {
  overflow: hidden;
  flex: 1;
  border-radius: 16px;
  padding: 4px
}

.rcar-track {
  display: flex;
  gap: 24px;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform
}

.rcar-slide {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0
}

.rcar-slide .depo {
  height: 100%
}

.rcar-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .18s, background .18s, color .18s;
  z-index: 2
}

.rcar-btn:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff
}

.rcar-btn:disabled {
  opacity: .3;
  cursor: default
}

.rcar-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px
}

.rcar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s
}

.rcar-dot.ativo {
  background: var(--gold);
  transform: scale(1.3)
}

@media(max-width:900px) {
  .rcar-slide {
    flex: 0 0 calc((100% - 24px) / 2)
  }
}

@media(max-width:680px) {
  .rcar-slide {
    flex: 0 0 100%
  }

  .rcar-btn {
    width: 36px;
    height: 36px;
    font-size: .85rem
  }
}

.depo {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 14px 34px rgba(20, 48, 75, .06);
  position: relative
}

.depo .qm {
  position: absolute;
  top: 12px;
  right: 22px;
  font-family: var(--disp);
  font-size: 64px;
  color: var(--gold-soft);
  opacity: .5;
  line-height: 1
}

.depo .stars {
  font-size: 16px;
  display: block;
  margin-bottom: 12px
}

.depo .txt {
  font-size: 14.5px;
  line-height: 1.65;
  color: #33414f;
  font-style: italic;
  margin: 0 0 20px
}

.depo-who {
  display: flex;
  align-items: center;
  gap: 12px
}

.depo-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-2);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700
}

.depo-who .nm {
  font-weight: 700;
  font-size: 14px;
  color: var(--navy-2)
}

.depo-who .rl {
  font-size: 12.5px;
  color: #7E8B99
}

/* ---- Onde Atendemos ---- */
.cobertura {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start
}

.cobertura h3 {
  font-size: 26px;
  color: var(--gold);
  margin: 0 0 16px;
  font-weight: 600
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.chip {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 13px;
  color: #E9EEF4
}

.chip.air {
  border-color: rgba(42, 147, 214, .4);
  color: var(--gold-soft)
}

/* ---- FAQ (details/summary, sem JS) ---- */
.faq {
  max-width: 780px;
  margin: 0 auto
}

.faq details {
  border-bottom: 1px solid var(--line)
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px
}

.faq summary::-webkit-details-marker {
  display: none
}

.faq summary::after {
  content: "+";
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
  transition: .25s;
  flex-shrink: 0
}

.faq details[open] summary::after {
  transform: rotate(45deg)
}

.faq details p {
  font-size: 14.5px;
  color: var(--mute);
  margin: 0 0 22px;
  line-height: 1.65
}

/* FAQ dentro de seção escura */
.sec-dark .faq details {
  border-bottom-color: rgba(255,255,255,.15)
}
.sec-dark .faq summary {
  color: #fff
}
.sec-dark .faq details p {
  color: rgba(255,255,255,.72)
}

/* ---- Parcerias — dois tracks ---- */
.parceria-tracks {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 10px
}

.parceria-track {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  transition: background .2s, border-color .2s, transform .2s
}

.parceria-track:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-3px)
}

/* Barra de cor no topo de cada track */
.parceria-track-header--comercial + .pt-desc ~ .pt-btn,
.parceria-track::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0
}

.parceria-track:first-child::before {
  background: linear-gradient(90deg, #4FC3F7, #0277BD)
}

.parceria-track:last-child::before {
  background: linear-gradient(90deg, #78909C, var(--navy-3))
}

/* Header do track */
.parceria-track-header {
  display: flex;
  align-items: center;
  gap: 16px
}

.pt-icone {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  color: #fff;
  position: relative
}

.pt-icone::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.2) 0%, transparent 55%);
  pointer-events: none
}

.parceria-track-header--comercial .pt-icone {
  background: linear-gradient(145deg, #4FC3F7, #0277BD);
  box-shadow: 0 5px 16px rgba(2,119,189,.38)
}

.parceria-track-header--operacional .pt-icone {
  background: linear-gradient(145deg, #78909C, #263238);
  box-shadow: 0 5px 16px rgba(38,50,56,.4)
}

.pt-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mute-d);
  margin-bottom: 4px
}

.parceria-track-header h3 {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.25
}

.pt-desc {
  font-size: 14px;
  color: var(--mute-d);
  line-height: 1.65;
  margin: 0
}

.parceria-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1
}

.parceria-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--mute-d)
}

.parceria-list li i {
  color: var(--gold);
  font-size: 11px;
  flex-shrink: 0
}

.pt-btn {
  margin-top: 6px;
  width: 100%;
  justify-content: center;
  text-align: center
}

/* Divisor "ou" entre os dois tracks */
.parceria-tracks-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  position: relative
}

.parceria-tracks-divider::before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,.10)
}

.parceria-tracks-divider span {
  background: var(--navy-deep);
  color: var(--mute-d);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  z-index: 1
}

/* Legados — mantém compatibilidade com outras páginas */
.parceria-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 32px 26px 28px
}

.parceria-icone {
  width: 52px; height: 52px;
  background: rgba(42,147,214,.18);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-size: 22px; color: var(--gold)
}

@media(max-width:900px) {
  .parceria-tracks {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto
  }
  .parceria-tracks-divider {
    padding: 14px 0;
    flex-direction: row
  }
  .parceria-tracks-divider::before {
    top: 50%; bottom: auto;
    left: 0; right: 0; width: auto; height: 1px
  }
}

/* ---- Tabela de repasse (parceiros.html) ---- */
.repasse-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--body);
  font-size: 14px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow)
}

.repasse-table thead tr {
  background: var(--navy-2)
}

.repasse-table thead th {
  padding: 14px 18px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mute-d)
}

.repasse-table tbody tr {
  border-bottom: 1px solid var(--line)
}

.repasse-table tbody tr:nth-child(even) {
  background: var(--bg)
}

.repasse-table tbody td {
  padding: 14px 18px;
  color: var(--ink)
}

.repasse-val {
  font-weight: 700;
  color: var(--navy-3) !important
}

.repasse-exemplo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--navy-deep);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 18px
}

.repasse-exemplo i {
  font-size: 20px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px
}

.repasse-exemplo strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px
}

.repasse-exemplo p {
  font-size: 13px;
  color: var(--mute-d);
  margin: 0;
  line-height: 1.6
}

/* ---- Requisitos (parceiros.html) ---- */
.requisitos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.requisito-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: background .2s, border-color .2s, transform .2s;
  position: relative;
  overflow: hidden
}

.requisito-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-soft), var(--navy-3));
  opacity: 0;
  transition: opacity .25s
}

.requisito-card:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-3px)
}

.requisito-card:hover::before { opacity: 1 }

.req-icone {
  width: 48px;
  height: 48px;
  background: linear-gradient(145deg, var(--gold-soft), var(--navy-3));
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(42,147,214,.3);
  position: relative
}

.req-icone::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,.2) 0%, transparent 55%);
  pointer-events: none
}

.requisito-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px
}

.requisito-card p {
  font-size: 13px;
  color: var(--mute-d);
  line-height: 1.65;
  margin: 0
}

@media(max-width:900px) {
  .requisitos-grid { grid-template-columns: 1fr 1fr }
}

@media(max-width:580px) {
  .requisitos-grid { grid-template-columns: 1fr }
  .repasse-table { font-size: 12px }
  .repasse-table thead th,
  .repasse-table tbody td { padding: 10px 12px }
}

/* ---- CTA band ---- */
.cta-band {
  background: linear-gradient(120deg, var(--navy-2), var(--navy-deep));
  color: #fff;
  text-align: center;
  padding: 70px 22px
}

.cta-band h2 {
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 12px;
  color: #fff
}

.cta-band p {
  color: var(--mute-d);
  font-size: 16px;
  max-width: 520px;
  margin: 0 auto 30px
}

.cta-band .row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap
}

/* ---- Contato ---- */
.contato-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start
}

.contato-info h3 {
  font-size: 26px;
  color: var(--navy-2);
  margin: 0 0 12px
}

.contato-info>p {
  color: var(--mute);
  font-size: 15px;
  margin: 0 0 24px
}

.info-lista li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px
}

.info-lista i {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 18px;
  flex-shrink: 0
}

.info-lista strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--mute);
  font-weight: 700
}

.info-lista span {
  font-size: 15px;
  color: var(--navy-2);
  font-weight: 600
}

.contato-form-wrapper {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--shadow)
}

.form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--mute);
  font-weight: 700
}

.form-group input,
.form-group textarea {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
  font-size: 14px;
  font-family: var(--body);
  color: var(--ink);
  transition: .15s
}

.form-group input:focus,
.form-group textarea:focus {
  outline: 0;
  border-color: var(--navy-3);
  box-shadow: 0 0 0 3px rgba(27, 60, 92, .12)
}

/* ---- Footer ---- */
.footer {
  background: var(--bg);
  color: var(--mute);
  border-top: 1px solid var(--line);
  padding: 56px 0 0
}

/* Rodapé usa o mesmo contêiner padrão do site (--maxw) — mantém as
   margens laterais consistentes com as demais seções da página, em vez
   de um contêiner mais estreito que sobrava espaço morto nas laterais. */
.footer .container {
  max-width: var(--maxw)
}

/* Proporções recalculadas para o e-mail caber sem quebrar no meio da
   palavra e o título "Clima em Araçatuba" não passar para duas linhas.
   A coluna da marca/descrição ganha mais peso (1.8fr) para alongar o
   texto institucional e ocupar melhor a largura do contêiner. */
.footer-grid {
  display: grid;
  /* Cada coluna tem um piso em px igual ao seu conteúdo mais largo, para
     o `fr` não espremer ninguém: e-mail (220), "Transfer → Três Lagoas"
     (158) e o título "Clima em Araçatuba" (170). Sem isso, o rodapé
     quebrava texto no meio da palavra e crescia em altura. */
  grid-template-columns:
    minmax(260px, 1.8fr)
    minmax(140px, .9fr)
    minmax(158px, 1fr)
    minmax(220px, 1.3fr)
    minmax(170px, 1fr);
  column-gap: 32px;
  padding-bottom: 36px
}

.footer-contato p,
.footer-links a,
.footer-brand p {
  overflow-wrap: break-word
}

.footer h4 {
  color: var(--navy-2);
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-family: var(--body)
}

.footer a,
.footer p {
  font-size: 13.5px;
  color: var(--mute);
  margin: 0 0 10px;
  display: block;
  transition: .15s
}

.footer a:hover {
  color: var(--gold)
}

.footer-brand p {
  max-width: 340px;
  line-height: 1.6
}

.redes-sociais {
  display: flex;
  gap: 12px;
  margin-top: 14px
}

.redes-sociais a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mute);
  font-size: 16px;
  margin: 0
}

.redes-sociais a:hover {
  border-color: var(--gold);
  color: var(--gold)
}

.footer-contato p {
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-word;
  min-width: 0
}

.footer-contato p i {
  flex-shrink: 0
}

.clima-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px
}

.clima-box i {
  color: var(--gold)
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 20px 0;
  text-align: center
}

.footer-bottom p {
  font-size: 12.5px;
  color: var(--mute-d);
  margin: 0
}

/* =====================================================================
   Blocos corporativos — usados em transporte-corporativo.html
   ===================================================================== */

/* Texto de abertura de seção, centralizado e com medida de leitura
   confortável (~65 caracteres por linha). */
.mob-intro {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center
}

.mob-intro p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--mute);
  margin: 0 0 14px
}

.sec-dark .mob-intro p {
  color: rgba(255, 255, 255, .80)
}

.mob-destaque {
  font-family: var(--disp);
  font-size: 21px !important;
  font-weight: 600;
  color: var(--navy-2) !important;
  margin-top: 22px !important
}

.sec-dark .mob-destaque {
  color: var(--gold-soft) !important
}

/* ---- Resultado para sua empresa ---- */
.resultado-bloco {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .14)
}

.sec-light .resultado-bloco {
  border-top-color: var(--line)
}

.resultado-bloco h3 {
  font-family: var(--disp);
  font-size: 25px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  margin: 0 0 26px
}

.sec-light .resultado-bloco h3 {
  color: var(--ink)
}

.resultado-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 14px 30px;
  max-width: 900px;
  margin: 0 auto;
  list-style: none;
  padding: 0
}

.resultado-lista li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88)
}

.sec-light .resultado-lista li {
  color: var(--ink)
}

.resultado-lista i {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 10px
}

/* ---- Ideal para ---- */
.ideal-titulo {
  font-family: var(--disp);
  font-size: 25px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  margin: 0 0 26px
}

.sec-light .ideal-titulo {
  color: var(--ink)
}

.ideal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px
}

.ideal-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
  transition: background .2s ease, border-color .2s ease, transform .2s ease
}

.ideal-item:hover {
  background: rgba(255, 255, 255, .10);
  border-color: var(--gold-soft);
  transform: translateY(-2px)
}

.sec-light .ideal-item {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink)
}

.ideal-item i {
  flex: 0 0 auto;
  color: var(--gold-soft);
  font-size: 16px
}

.sec-light .ideal-item i {
  color: var(--gold)
}

@media(max-width:680px) {
  .mob-intro {
    margin-bottom: 34px
  }

  .mob-destaque {
    font-size: 19px !important
  }

  .resultado-bloco {
    margin-top: 38px;
    padding-top: 30px
  }

  .resultado-bloco h3,
  .ideal-titulo {
    font-size: 21px
  }
}

/* ---- Mobile CTA Bar ---- */
.mobile-cta-bar {
  display: none
}

@media(max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    gap: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.18)
  }

  .mobile-cta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--body);
    text-decoration: none;
    letter-spacing: .3px
  }

  .mobile-cta-wpp {
    background: #25D366;
    color: #fff
  }

  .mobile-cta-orcamento {
    background: var(--navy-2);
    color: #fff
  }
}

/* ---- Bottom Nav Mobile ---- */
.bottom-nav {
  display: none
}

@media(max-width: 768px) {
  /* A CTA bar é fixed com z-index 90 e o header é fixed com z-index 50,
     ambos em top:0 — o header (logo + menu) ficava 100% coberto pela barra
     verde. Descer o header para logo abaixo da CTA resolve. */
  .header {
    top: var(--cta-h)
  }

  /* Empurra o conteúdo para não ficar atrás da CTA bar + header (topo)
     nem da bottom nav (rodapé). Elementos fixed ignoram o fluxo, então
     esse padding é o que impede a sobreposição. */
  body {
    padding-bottom: 68px;
    padding-top: calc(var(--cta-h) + var(--header-h-mobile))
  }

  /* Esconde WhatsApp float no mobile (substituído pelo bottom nav) */
  .whatsapp-float {
    display: none
  }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(14, 27, 56, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 24px rgba(0,0,0,.25)
  }

  .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    text-decoration: none;
    color: rgba(255,255,255,.45);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
    font-family: var(--body);
    transition: color .18s
  }

  .bn-item i {
    font-size: 22px;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .2s, color .18s
  }

  /* Ícone inativo — cinza translúcido */
  .bn-item i {
    filter: drop-shadow(0 0 0 transparent)
  }

  /* Ativo / hover — gradiente luminoso */
  .bn-item.active,
  .bn-item:hover {
    color: var(--gold-soft)
  }

  .bn-item.active i,
  .bn-item:hover i {
    transform: translateY(-4px) scale(1.15);
    filter: drop-shadow(0 0 8px rgba(90,176,220,.7)) drop-shadow(0 2px 4px rgba(0,0,0,.3))
  }

  /* Indicador ativo — ponto embaixo do ícone */
  .bn-item.active::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px var(--gold);
    position: absolute;
    bottom: 4px
  }

  /* CTA WhatsApp */
  .bn-item--cta {
    color: #fff !important;
    position: relative
  }

  .bn-item--cta i {
    width: 50px;
    height: 50px;
    background: linear-gradient(145deg, #2ECC71, #25D366 60%, #128C7E);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    margin-top: -22px;
    box-shadow: 0 4px 18px rgba(37,211,102,.5), 0 1px 4px rgba(0,0,0,.25);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    border: 2px solid rgba(255,255,255,.12)
  }

  .bn-item--cta:hover i,
  .bn-item--cta:active i {
    transform: scale(1.14) translateY(-4px);
    box-shadow: 0 8px 28px rgba(37,211,102,.65), 0 2px 8px rgba(0,0,0,.3)
  }

  .bn-item--cta span {
    margin-top: 2px
  }
}

/* ---- WhatsApp float ---- */
.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
  transition: .2s
}

.whatsapp-float:hover {
  transform: scale(1.08)
}

/* ---- Drawer de Solicitação ---- */
.solicit-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5,12,28,.6);
  z-index: 200;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s ease
}

.solicit-backdrop.open {
  display: block;
  opacity: 1
}

.solicit-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 210;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 0 0 calc(80px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.32,0,.67,0);
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none
}

.solicit-drawer::-webkit-scrollbar { display: none }

.solicit-drawer.open {
  transform: translateY(0);
  transition: transform .38s cubic-bezier(.33,1,.68,1)
}

.solicit-handle-bar {
  width: 40px;
  height: 4px;
  background: #D0D8E4;
  border-radius: 4px;
  margin: 12px auto 0
}

.solicit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px
}

.solicit-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-2);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body)
}

.solicit-header h3 i {
  color: var(--gold);
  font-size: 16px
}

.solicit-close {
  background: var(--bg);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--mute);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .18s
}

.solicit-close:hover { background: var(--line) }

/* Progresso */
.solicit-progress {
  display: flex;
  align-items: center;
  padding: 10px 24px 16px;
  gap: 0
}

.sp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px
}

.sp-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--line);
  color: var(--mute);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .25s;
  font-family: var(--body)
}

.sp-label {
  font-size: 10px;
  color: var(--mute);
  font-weight: 600;
  letter-spacing: .4px;
  font-family: var(--body)
}

.sp-item.active .sp-num {
  background: var(--navy-2);
  color: #fff
}

.sp-item.active .sp-label { color: var(--navy-2) }

.sp-item.done .sp-num {
  background: var(--gold);
  color: #fff
}

.sp-line {
  flex: 1;
  height: 2px;
  background: var(--line);
  margin: 0 6px 14px;
  transition: background .3s
}

.sp-line.done { background: var(--gold) }

/* Steps */
.solicit-step {
  display: none;
  padding: 0 20px;
  animation: fadeStepIn .22s ease
}

.solicit-step.active { display: block }

@keyframes fadeStepIn {
  from { opacity: 0; transform: translateX(14px) }
  to   { opacity: 1; transform: translateX(0) }
}

/* Tipo toggle */
.tipo-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 18px
}

.tipo-btn {
  flex: 1;
  padding: 11px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--mute);
  cursor: pointer;
  font-family: var(--body);
  transition: .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px
}

.tipo-btn.active {
  background: var(--navy-2);
  border-color: var(--navy-2);
  color: #fff
}

/* SVG no tipo-btn */
.tipo-svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), filter .18s
}

.tipo-btn .tipo-svg { color: var(--mute) }
.tipo-btn.active .tipo-svg {
  color: #fff;
  transform: scale(1.15);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.3))
}

/* Fields */
.solicit-field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-2);
  margin: 0 0 10px;
  font-family: var(--body)
}

.solicit-field {
  margin-bottom: 14px
}

.solicit-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--mute);
  margin-bottom: 6px;
  font-family: var(--body);
  letter-spacing: .3px
}

.req { color: var(--gold) }
.solicit-opt { font-weight: 400; color: var(--mute) }

.solicit-field input,
.solicit-field select {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  font-family: var(--body);
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .18s;
  -webkit-appearance: none;
  appearance: none
}

.solicit-field input:focus,
.solicit-field select:focus {
  border-color: var(--gold)
}

.solicit-field input.error,
.solicit-field select.error {
  border-color: #e53935
}

.solicit-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

/* Veículos */
.veiculo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.veiculo-card {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: .18s;
  text-align: center;
  position: relative
}

.veiculo-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}

/* App Icon — ícones de veículo estilo premium */
.v-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
  position: relative;
  flex-shrink: 0
}

.v-icon svg {
  width: 26px;
  height: 26px;
  color: #fff
}

/* Reflexo interno tipo vidro */
.v-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.22) 0%, transparent 55%);
  pointer-events: none
}

/* Sedan Confort — azul médio */
.v-icon--sedan {
  background: linear-gradient(145deg, #4FC3F7 0%, #0277BD 100%);
  box-shadow: 0 5px 16px rgba(2,119,189,.38), 0 1px 3px rgba(0,0,0,.18)
}

/* SUV Confort — verde petróleo */
.v-icon--suv {
  background: linear-gradient(145deg, #4DB6AC 0%, #00695C 100%);
  box-shadow: 0 5px 16px rgba(0,105,92,.35), 0 1px 3px rgba(0,0,0,.18)
}

/* Sedan Executivo — dourado âmbar */
.v-icon--exec {
  background: linear-gradient(145deg, #FFD54F 0%, #E65100 100%);
  box-shadow: 0 5px 16px rgba(230,81,0,.35), 0 1px 3px rgba(0,0,0,.18)
}

/* SUV Executiva — navy profundo premium */
.v-icon--suv-exec {
  background: linear-gradient(145deg, #7986CB 0%, #1A237E 100%);
  box-shadow: 0 5px 16px rgba(26,35,126,.42), 0 1px 3px rgba(0,0,0,.2)
}

/* Van — cinza slate */
.v-icon--van {
  background: linear-gradient(145deg, #78909C 0%, #263238 100%);
  box-shadow: 0 5px 16px rgba(38,50,56,.38), 0 1px 3px rgba(0,0,0,.2)
}

/* Hover e selecionado */
.veiculo-card:hover .v-icon,
.veiculo-card:has(input:checked) .v-icon {
  transform: scale(1.1) translateY(-3px)
}

.v-icon--sedan:is(.veiculo-card:has(input:checked) *) { box-shadow: 0 8px 22px rgba(2,119,189,.55) }
.v-icon--suv:is(.veiculo-card:has(input:checked) *) { box-shadow: 0 8px 22px rgba(0,105,92,.5) }
.v-icon--exec:is(.veiculo-card:has(input:checked) *) { box-shadow: 0 8px 22px rgba(230,81,0,.5) }
.v-icon--suv-exec:is(.veiculo-card:has(input:checked) *) { box-shadow: 0 8px 22px rgba(26,35,126,.58) }
.v-icon--van:is(.veiculo-card:has(input:checked) *) { box-shadow: 0 8px 22px rgba(38,50,56,.5) }

.veiculo-card i {
  font-size: 24px;
  color: var(--mute);
  transition: color .18s
}

.veiculo-card strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy-2);
  font-family: var(--body)
}

.veiculo-card small {
  font-size: 10px;
  color: var(--mute);
  font-family: var(--body)
}

.veiculo-card:has(input:checked) {
  border-color: var(--gold);
  background: rgba(42,147,214,.06);
  box-shadow: 0 4px 18px rgba(42,147,214,.18), 0 1px 4px rgba(0,0,0,.08);
  transform: translateY(-2px)
}

.veiculo-card:has(input:checked) i { color: var(--gold) }

.veiculo-card--full {
  grid-column: span 2
}

/* Aviso PIX */
.pix-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F0FDF9;
  border: 1.5px solid #32BCAD;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #0f5f57;
  font-family: var(--body);
  line-height: 1.4
}

.pix-aviso i { font-size: 20px; flex-shrink: 0 }

/* Badge de disponibilidade */
.v-disp-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  font-family: var(--body);
  padding: 2px 6px;
  border-radius: 20px
}

.disp-ok {
  color: #1b7a3e;
  background: #e6f9ee
}

.disp-no {
  color: #b71c1c;
  background: #fdecea
}

/* Card indisponível */
.veiculo-indisponivel {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none
}

/* Pagamento agendada */
.pagamento-agendada {
  margin-bottom: 6px
}

.pagamento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 4px
}

.pagamento-card {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: .18s;
  text-align: center;
  position: relative
}

.pagamento-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}

/* App Icon — ícones de pagamento */
.p-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
  position: relative;
  flex-shrink: 0
}

.p-icon svg {
  width: 22px;
  height: 22px;
  color: #fff
}

.p-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.22) 0%, transparent 55%);
  pointer-events: none
}

/* PIX — verde Banco Central */
.p-icon--pix {
  background: linear-gradient(145deg, #26D0BF 0%, #0D7A6F 100%);
  box-shadow: 0 4px 14px rgba(13,122,111,.35)
}

/* Link — azul AtaDrive */
.p-icon--link {
  background: linear-gradient(145deg, var(--gold-soft) 0%, var(--navy-3) 100%);
  box-shadow: 0 4px 14px rgba(42,147,214,.35)
}

/* Crédito — azul Visa */
.p-icon--credito {
  background: linear-gradient(145deg, #42A5F5 0%, #1565C0 100%);
  box-shadow: 0 4px 14px rgba(21,101,192,.35)
}

/* Débito — verde escuro */
.p-icon--debito {
  background: linear-gradient(145deg, #66BB6A 0%, #2E7D32 100%);
  box-shadow: 0 4px 14px rgba(46,125,50,.32)
}

.pagamento-card:hover .p-icon,
.pagamento-card:has(input:checked) .p-icon {
  transform: scale(1.12) translateY(-2px)
}

.pagamento-card i {
  font-size: 22px
}

.pagamento-card span {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy-2);
  font-family: var(--body)
}

.pagamento-card:has(input:checked),
.pagamento-sel {
  border-color: var(--gold);
  background: rgba(42,147,214,.06)
}

.pagamento-card:has(input:checked) span {
  color: var(--navy-2)
}

/* Footer do drawer */
.solicit-footer {
  position: fixed;
  bottom: calc(68px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  display: none;
  align-items: center;
  gap: 10px;
  z-index: 220
}

.solicit-drawer.open .solicit-footer { display: flex }

.btn-s-back {
  background: var(--bg);
  border: none;
  color: var(--mute);
  padding: 13px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--body);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: .18s;
  white-space: nowrap
}

.btn-s-next,
.btn-s-send {
  flex: 1;
  background: linear-gradient(135deg, var(--gold), var(--navy-3));
  border: none;
  color: #fff;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: .18s
}

.btn-s-send { background: linear-gradient(135deg, #25D366, #1da851) }

.solicit-disclaimer {
  font-size: 11px;
  color: var(--mute);
  text-align: center;
  padding: 8px 20px 0;
  margin: 0;
  font-family: var(--body)
}

/* ---- Reveal on scroll (progressive enhancement) ---- */
.reveal-init {
  opacity: 0;
  transform: translateY(24px)
}

.reveal-init.vis {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease
}

/* =====================================================================
   PÁGINAS INTERNAS (serviços) — componentes reutilizáveis
   ===================================================================== */
.page-hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy-2) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 150px 0 72px;
  overflow: hidden
}

.page-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 360px;
  height: 360px;
  border: 1.5px solid rgba(42, 147, 214, .16);
  border-radius: 50%;
  pointer-events: none
}

.page-hero .container {
  position: relative;
  z-index: 2;
  text-align: center
}

.breadcrumb {
  font-size: 13px;
  color: var(--mute-d);
  margin-bottom: 16px;
  letter-spacing: .3px
}

.breadcrumb a {
  color: var(--mute-d)
}

.breadcrumb a:hover {
  color: var(--gold)
}

.page-hero h1 {
  font-size: clamp(34px, 5.5vw, 56px);
  max-width: 760px;
  margin: 8px auto 16px
}

.page-hero .lead {
  font-size: clamp(16px, 2vw, 19px);
  color: #D7E0EA;
  max-width: 620px;
  margin: 0 auto 30px
}

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center
}

.cta-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: .2s
}

.cta-link:hover {
  gap: 11px
}

.servico-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center
}

.servico-split img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  object-fit: cover
}

.servico-split h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  color: var(--navy-2);
  margin: 0 0 16px
}

.servico-split p {
  color: var(--mute);
  font-size: 15.5px;
  margin: 0 0 18px
}

.check-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--ink)
}

.check-list i {
  color: var(--gold);
  margin-top: 3px
}

@media(max-width:980px) {
  .servico-split {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

@media(max-width:680px) {
  .page-hero {
    padding: 120px 0 56px
  }
}

/* ---- Formulários (orçamento / contato) ---- */
.form-group select {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
  font-size: 14px;
  font-family: var(--body);
  color: var(--ink);
  background: #fff;
  transition: .15s
}

.form-group select:focus {
  outline: 0;
  border-color: var(--navy-3);
  box-shadow: 0 0 0 3px rgba(27, 60, 92, .12)
}

.form-grid {
  display: grid;
  gap: 16px
}

.form-grid.duas-colunas {
  grid-template-columns: 1fr 1fr
}

.form-grid.tres-colunas {
  grid-template-columns: 1fr 1fr 1fr
}

.form-sec-title {
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--navy-2);
  font-weight: 700;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 10px;
  margin: 28px 0 18px
}

.form-sec-title.first {
  margin-top: 0
}

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px;
  box-shadow: var(--shadow)
}

.orcamento-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 30px;
  align-items: start
}

.orc-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 100px
}

.orc-card {
  background: linear-gradient(165deg, var(--navy-2), var(--navy));
  color: #fff;
  border-radius: 18px;
  padding: 28px
}

.orc-card h3 {
  font-size: 23px;
  margin: 0 0 16px
}

.orc-card .mini-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  color: #D7E0EA;
  margin-bottom: 13px
}

.orc-card .mini-list i {
  color: var(--gold);
  margin-top: 3px
}

.orc-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 10px
}

.orc-contact {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px
}

.orc-contact .ci {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--navy-2)
}

.orc-contact .ci:last-child {
  margin-bottom: 0
}

.orc-contact i {
  color: var(--gold);
  width: 20px;
  text-align: center
}

@media(max-width:980px) {
  .orcamento-grid {
    grid-template-columns: 1fr
  }

  .orc-aside {
    position: static
  }

  .form-grid.tres-colunas {
    grid-template-columns: 1fr
  }
}

@media(max-width:680px) {
  .form-grid.duas-colunas {
    grid-template-columns: 1fr
  }

  .form-card {
    padding: 22px
  }
}

/* ---- Responsivo ---- */
@media(max-width:980px) {

  .grid-servicos,
  .depo-grid,
  .selos-grid {
    grid-template-columns: 1fr 1fr
  }

  .grid-frota,
  .passos-grid {
    grid-template-columns: 1fr 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .cobertura,
  .contato-grid {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

/* ── Header/nav: vira menu hambúrguer a partir de telas de notebook/tablet
     para não espremer os itens do menu (evita quebra e itens "grandes") ── */
@media(max-width:960px) {
  /* Grid de 3 colunas: [hambúrguer] [logo] [espelho].
     Substitui o posicionamento absoluto da logo, que a fazia encostar
     (e em telas de até ~390px, sobrepor) o ícone do menu. */
  .header-container {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    column-gap: 16px;
    position: static;
    padding-top: 10px;
    padding-bottom: 10px
  }

  .logo {
    grid-column: 2;
    grid-row: 1;
    position: static;
    transform: none;
    justify-self: center;
    padding-right: 0;
    min-width: 0
  }

  .logo img {
    max-height: 52px;
    max-width: 100%;
    height: auto
  }

  /* ── Hamburguer na esquerda ── */
  .menu-icon {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(14, 34, 54, .06);
    color: #0E2236;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    z-index: 1
  }

  /* ── Drawer da esquerda ── */
  .nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    right: auto;
    height: 100vh;
    width: 76%;
    max-width: 320px;
    background: var(--navy-deep);
    transition: .3s cubic-bezier(.4,0,.2,1);
    padding: 80px 32px 32px;
    box-shadow: 10px 0 40px rgba(0, 0, 0, .4);
    z-index: 55;
    overflow-y: auto
  }

  .menu-toggle:checked~.nav-menu {
    left: 0
  }

  .nav-menu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px
  }

  .nav-menu a {
    color: #E9EEF4;
    font-size: 15px
  }

  .nav-menu a:hover {
    color: var(--gold)
  }

  .nav-menu .btn {
    width: 100%
  }
}

@media(max-width:680px) {
  .grid-servicos,
  .depo-grid,
  .selos-grid,
  .grid-frota,
  .passos-grid,
  .footer-grid {
    grid-template-columns: 1fr
  }

  .section-padding {
    padding: 62px 0
  }

  .hero-trust {
    gap: 16px
  }
}

@media(prefers-reduced-motion:reduce) {
  .reveal-init {
    opacity: 1;
    transform: none;
    transition: none
  }

  html {
    scroll-behavior: auto
  }
}

/* ===== Faixa de números (autoridade) ===== */
.numeros-band {
  background: linear-gradient(120deg, var(--navy), var(--navy-2));
  padding: 46px 0
}

.numeros-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1000px;
  margin: 0 auto
}

.num-item {
  text-align: center;
  padding: 6px 14px;
  position: relative
}

.num-item+.num-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 46px;
  width: 1px;
  background: rgba(255, 255, 255, .12)
}

.num-item .num {
  font-family: var(--disp);
  font-size: 42px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1
}

.num-item .num i {
  font-size: 26px
}

.num-item .num-label {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #AFC0D2;
  font-weight: 500
}

@media(max-width:680px) {
  .numeros-band {
    padding: 36px 0
  }

  .numeros-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 8px
  }

  .num-item:nth-child(odd)::before {
    display: none
  }

  .num-item .num {
    font-size: 34px
  }
}

/* ===== Comparativo: destaque escuro (spotlight) ===== */
.comparativo {
  position: relative;
  overflow: hidden
}

.comparativo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 70% at 28% 38%, rgba(42, 147, 214, .18), transparent 70%);
  pointer-events: none
}

.comparativo>.container {
  position: relative;
  z-index: 1
}

/* ===== Quebra de objeção: valor fixo / pagamento / garantia ===== */
.garantias-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px
}

.garantia-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow)
}

.garantia-card .gc-ic {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--navy), var(--navy-2));
  color: var(--gold);
  font-size: 22px;
  margin-bottom: 16px
}

.garantia-card h3 {
  font-size: 21px;
  color: var(--navy);
  margin: 0 0 8px
}

.garantia-card p {
  margin: 0;
  color: var(--mute);
  font-size: 14.5px;
  line-height: 1.6
}

.pay-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 34px
}

.pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-2)
}

.pay-chip i {
  color: var(--gold)
}

.pay-note {
  text-align: center;
  color: var(--mute);
  font-size: 13.5px;
  margin-top: 14px
}

@media(max-width:860px) {
  .garantias-grid {
    grid-template-columns: 1fr
  }
}

/* ===== Comparativo "versus" (dois cartões) ===== */
.vs-wrap {
  position: relative;
  max-width: 940px;
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: center
}

.vs-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold);
  color: #16294C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 21px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  border: 4px solid #16294C
}

.vs-card {
  border-radius: 20px;
  padding: 34px 30px;
  position: relative
}

.vs-ata {
  background: linear-gradient(165deg, #20406E, #16294C);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(42, 147, 214, .3), 0 30px 64px rgba(0, 0, 0, .5), 0 0 60px rgba(42, 147, 214, .20);
  transform: scale(1.05);
  z-index: 2
}

.vs-crown {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold);
  color: #16294C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
  box-shadow: 0 10px 22px rgba(42, 147, 214, .45)
}

.vs-app {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13)
}

.vs-app .vs-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #8FA0B2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 14px
}

.vs-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 14px
}

.vs-ata .vs-tag {
  background: var(--gold);
  color: #16294C
}

.vs-app .vs-tag {
  background: rgba(255, 255, 255, .09);
  color: #9FB0C2
}

.vs-card h3 {
  font-size: 28px;
  margin: 0 0 4px
}

.vs-ata h3 {
  color: #fff
}

.vs-app h3 {
  color: #E6ECF2
}

.vs-sub {
  font-size: 13px;
  margin: 0 0 22px
}

.vs-ata .vs-sub {
  color: #9FC4E8
}

.vs-app .vs-sub {
  color: #8FA0B2
}

.vs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.vs-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.45
}

.vs-ata .vs-list li {
  color: #EAF0F6
}

.vs-app .vs-list li {
  color: #8FA0B2
}

.vs-list i {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 15px
}

.vs-ata .vs-list i {
  color: var(--gold)
}

.vs-app .vs-list i {
  color: #C45A4E
}

.vs-ata .vs-list li strong {
  color: #fff
}

.vs-foot {
  text-align: center;
  margin-top: 38px
}

@media(max-width:760px) {
  .vs-wrap {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .vs-badge {
    display: none
  }

  .vs-ata {
    transform: none
  }

  .vs-card {
    padding: 28px 24px
  }
}


/* ===== Paleta da logo: botões em azul royal ===== */
.btn-primary {
  background: var(--blue);
  color: #fff;
  border: 0
}

.btn-primary:hover {
  background: #1A4CA0;
  color: #fff
}

/* =====================================================================
   VITRINE DE PARCEIROS — homepage
   ===================================================================== */
.parceiros-vitrine-bloco {
  margin-top: 48px
}

.parceiros-vitrine-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--gold);
}

.parceiros-vitrine-titulo i {
  font-size: 1.4rem;
  color: var(--gold)
}

.parceiros-vitrine-titulo h3 {
  font-size: 1.25rem;
  font-family: var(--head);
  color: var(--navy);
  margin: 0
}

.parceiros-vitrine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

/* Card parceiro real (futuro uso) */
.parceiro-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  transition: box-shadow .2s, transform .2s
}

.parceiro-card:hover {
  box-shadow: 0 6px 28px rgba(11,30,61,.1);
  transform: translateY(-3px)
}

/* Card vaga disponível */
.parceiro-vaga {
  border-style: dashed;
  border-color: var(--line);
  background: rgba(200,168,75,.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px
}

.parceiro-vaga-icone {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(200,168,75,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px
}

.parceiro-vaga-icone i {
  font-size: 1.5rem;
  color: var(--gold)
}

.parceiro-vaga-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold)
}

.parceiro-vaga p {
  font-size: 0.88rem;
  color: var(--mute);
  margin: 0;
  line-height: 1.5
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.8rem;
  border-radius: 8px;
  margin-top: 4px
}

.parceiros-vitrine-cta {
  text-align: center;
  margin-top: 52px;
  padding: 44px 32px;
  background: var(--navy);
  border-radius: 16px;
  border: 1px solid rgba(200,168,75,.2)
}

.parceiros-vitrine-cta .eyebrow {
  color: var(--gold)
}

.parceiros-vitrine-cta h3 {
  color: #fff;
  font-family: var(--head);
  font-size: 1.4rem;
  margin: 12px 0 10px
}

.parceiros-vitrine-cta p {
  color: var(--mute-d);
  margin-bottom: 24px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto
}

@media (max-width: 768px) {
  .parceiros-vitrine-grid {
    grid-template-columns: 1fr
  }
}

/* =====================================================================
   FORMULÁRIO CADASTRO PARCEIRO MOTORISTA
   ===================================================================== */
.parceiro-form {
  margin-top: 40px
}

.pf-bloco {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
  margin-bottom: 20px
}

.pf-titulo {
  font-family: var(--head);
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px
}

.pf-titulo i {
  color: var(--gold);
  font-size: 1rem
}

.pf-grid {
  display: grid;
  gap: 16px
}

.pf-grid-2 { grid-template-columns: 1fr 1fr }
.pf-grid-3 { grid-template-columns: 1fr 1fr 1fr }

.pf-grid + .pf-grid { margin-top: 16px }

.pf-field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.pf-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy-2);
  letter-spacing: .3px
}

.pf-field label i {
  color: var(--gold);
  margin-right: 4px
}

.req { color: var(--gold) }

.pf-field input[type="text"],
.pf-field input[type="tel"],
.pf-field input[type="email"],
.pf-field input[type="number"],
.pf-field select {
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 0.9rem;
  font-family: var(--body);
  color: var(--navy);
  background: var(--bg);
  outline: none;
  transition: border-color .18s
}

.pf-field input:focus,
.pf-field select:focus {
  border-color: var(--gold)
}

.pf-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px
}

.pf-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--navy-2);
  cursor: pointer;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 7px 14px;
  transition: border-color .15s, background .15s
}

.pf-check:has(input:checked) {
  border-color: var(--gold);
  background: rgba(200,168,75,.08);
  color: var(--navy)
}

.pf-check input[type="checkbox"] {
  accent-color: var(--gold);
  width: 15px;
  height: 15px;
  cursor: pointer
}

/* Upload de foto */
.pf-file-box { position: relative }

.pf-file-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}

.pf-file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  border: 2px dashed var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color .18s, background .18s;
  background: var(--bg)
}

.pf-file-label:hover {
  border-color: var(--gold);
  background: rgba(200,168,75,.05)
}

.pf-file-label i {
  font-size: 1.4rem;
  color: var(--gold)
}

.pf-file-label span {
  font-size: 0.78rem;
  color: var(--mute);
  font-weight: 600
}

@media (max-width: 768px) {
  .pf-grid-2,
  .pf-grid-3 {
    grid-template-columns: 1fr
  }
}

/* =====================================================================
   CARDS — altura igual e alinhamento consistente
   ===================================================================== */
.selos-grid,
.requisitos-grid,
.beneficios-grid {
  align-items: stretch
}

.selo,
.requisito-card,
.beneficio-item {
  height: 100%
}

.requisito-card {
  display: flex;
  flex-direction: column
}

.requisito-card p {
  flex: 1
}

/* Parceiro-card altura uniforme no carrossel */
.pcar-slide .parceiro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px
}

/* =====================================================================
   CARROSSEL DE PARCEIROS — homepage
   ===================================================================== */
.pcar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px
}

.pcar-viewport {
  overflow: hidden;
  flex: 1;
  border-radius: 16px
}

.pcar-track {
  display: flex;
  gap: 20px;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  will-change: transform
}

.pcar-slide {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0
}

.pcar-slide .parceiro-card {
  height: 100%
}

.pcar-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .18s, background .18s, color .18s;
  z-index: 2
}

.pcar-btn:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff
}

.pcar-btn:disabled {
  opacity: .3;
  cursor: default
}

.pcar-dots {
  display: flex;
  justify-content: center;
  gap: 8px
}

.pcar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s
}

.pcar-dot.ativo {
  background: var(--gold);
  transform: scale(1.3)
}

.pcar-categoria {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy-2);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px
}

.pcar-categoria i { color: var(--gold) }

@media (max-width: 900px) {
  .pcar-slide { flex: 0 0 calc((100% - 20px) / 2) }
}

@media (max-width: 560px) {
  .pcar-slide { flex: 0 0 100% }
  .pcar-btn { width: 36px; height: 36px; font-size: .85rem }
}

/* =====================================================================
   CRITÉRIOS DE PARCERIA — parceiros-hoteis-restaurantes
   ===================================================================== */
.criterios-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px
}

.criterio-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center
}

.criterio-card--destaque {
  border-color: var(--gold);
  box-shadow: 0 6px 28px rgba(200,168,75,.15)
}

.criterio-num {
  font-family: var(--head);
  font-size: 4rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1
}

.criterio-label {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy);
  margin: 6px 0 16px
}

.criterio-card p {
  font-size: .88rem;
  color: var(--mute);
  line-height: 1.55;
  margin: 0
}

.beneficios-conquista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

@media (max-width: 640px) {
  .criterios-grid {
    grid-template-columns: 1fr
  }

  .beneficios-conquista {
    grid-template-columns: 1fr
  }
}

/* ---- Mensagem de sucesso dos formulários ---- */
.form-sucesso {
  text-align: center;
  padding: 48px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow)
}

.form-sucesso i.fa-circle-check {
  font-size: 52px;
  color: #2E9E5B;
  margin-bottom: 16px;
  display: block
}

.form-sucesso h3 {
  font-family: var(--disp);
  font-size: 26px;
  color: var(--navy-2);
  margin: 0 0 10px
}

.form-sucesso p {
  color: var(--mute);
  font-size: 15px;
  max-width: 420px;
  margin: 0 auto 22px
}

/* ---- Seções ocultas no mobile ---- */
@media (max-width: 680px) {
  .hide-mobile {
    display: none !important
  }
}

/* ---- Footer compacto no mobile ---- */
@media (max-width: 680px) {
  .footer {
    padding: 34px 0 0
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
    padding-bottom: 22px
  }

  .footer-brand {
    grid-column: 1 / -1;
    text-align: center
  }

  .footer-contato,
  .footer-clima {
    grid-column: 1 / -1
  }

  .footer-contato p {
    white-space: nowrap
  }

  .footer-brand p {
    max-width: 100%;
    font-size: 13px
  }

  .redes-sociais {
    justify-content: center;
    margin-top: 12px
  }

  .redes-sociais a {
    width: 34px;
    height: 34px;
    font-size: 14px
  }

  .footer h4 {
    margin-bottom: 10px;
    font-size: 12px
  }

  .footer a,
  .footer p {
    font-size: 13px;
    margin-bottom: 7px
  }

  .footer-bottom {
    padding: 14px 0
  }

  .footer-bottom p {
    font-size: 11.5px
  }
}

/* ---- Serviços: carrossel horizontal no mobile ---- */
@media (max-width: 680px) {
  .grid-servicos {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin: 0 -22px;
    padding: 4px 22px 18px;
    scrollbar-width: none;
  }

  .grid-servicos::-webkit-scrollbar {
    display: none
  }

  .grid-servicos .card-servico {
    flex: 0 0 76%;
    max-width: 300px;
    scroll-snap-align: center;
    padding: 24px 20px
  }

  .grid-servicos .card-servico h3 {
    font-size: 20px
  }
}

/* ===== Galeria de Atendimentos Reais — Carrossel automático ===== */
.gcar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px
}

.gcar-viewport {
  overflow: hidden;
  flex: 1;
  border-radius: var(--radius)
}

.gcar-track {
  display: flex;
  gap: 16px;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform
}

.gcar-slide {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0
}

.gcar-item {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: zoom-in;
  border: 1px solid rgba(255, 255, 255, .1)
}

.gcar-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1)
}

.gcar-item::after {
  content: '\f00e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: rgba(17, 27, 56, 0);
  opacity: 0;
  transition: .3s
}

.gcar-item:hover img {
  transform: scale(1.08)
}

.gcar-item:hover::after {
  opacity: 1;
  background: rgba(17, 27, 56, .45)
}

.gcar-btn {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
  z-index: 2
}

.gcar-btn:hover {
  background: var(--navy-3);
  border-color: var(--navy-3)
}

.gcar-btn:disabled {
  opacity: .3;
  cursor: default
}

.gcar-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px
}

.gcar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s
}

.gcar-dot.ativo {
  background: var(--gold-soft);
  transform: scale(1.3)
}

.galeria-cta {
  text-align: center;
  margin-top: 40px
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(8, 14, 26, .96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px
}

.lightbox.is-open {
  display: flex
}

.lightbox-img {
  max-width: min(90vw, 1100px);
  max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  animation: lbFade .25s ease
}

@keyframes lbFade {
  from {
    opacity: 0;
    transform: scale(.97)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  transition: .2s
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: var(--navy-3);
  border-color: var(--navy-3)
}

.lightbox-close {
  top: 22px;
  right: 22px
}

.lightbox-prev {
  left: 22px;
  top: 50%;
  transform: translateY(-50%)
}

.lightbox-next {
  right: 22px;
  top: 50%;
  transform: translateY(-50%)
}

@media(max-width:900px) {
  .gcar-slide {
    flex: 0 0 calc((100% - 16px) / 2)
  }
}

@media(max-width:680px) {
  .gcar-slide {
    flex: 0 0 100%
  }

  .gcar-btn {
    width: 38px;
    height: 38px;
    font-size: 13px
  }

  .lightbox-prev {
    left: 8px
  }

  .lightbox-next {
    right: 8px
  }

  .lightbox-close {
    top: 12px;
    right: 12px
  }
}