/* =====================================================================
   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 var(--navy-2) | ícone gradiente var(--gold-soft) → var(--navy-3) → #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;
  /* Tokens extraídos (2026-10) — valores que se repetiam escritos à mão */
  --navy-card: #16294C;       /* navy do cartão AtaDrive no comparativo e coroa */
  --texto-sobre-navy: #C7D3E0;/* texto secundário sobre navy */
  --texto-claro: #E9EEF4;     /* texto e ícones claros no menu e hero */
  --texto-menu: #0E2236;      /* links do menu no cabeçalho claro */
  --erro: #B42318;            /* mensagens e bordas de erro (6,5:1) */
  --whatsapp: #25D366;        /* verde da marca WhatsApp (só fundo, nunca atrás de texto) */
  --whatsapp-botao: #178540;  /* verde de botão com texto branco (5,1:1) */
  --whatsapp-botao-hover: #136B34;
}

* {
  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: var(--fs-ui);
  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
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(8, 20, 33, .45)
}


.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-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: var(--fs-body);
  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: opacity .2s var(--ease-out)
}

.logo:hover img {
  opacity: .82
}

.logo:active img {
  opacity: .7
}

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

.nav-menu a {
  color: var(--texto-menu);
  font-size: var(--fs-ui);
  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: var(--texto-menu);
  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.webp') center/cover no-repeat
}

.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-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: var(--texto-claro);
  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: var(--fs-meta);
  color: var(--texto-sobre-navy)
}

.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: var(--fs-ui);
  color: var(--mute);
  margin: 0 0 16px
}

.link-saiba-mais {
  font-size: var(--fs-meta);
  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
}

/* ---- 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: var(--fs-body);
  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: var(--fs-meta);
  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: var(--fs-meta);
  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: var(--fs-ui);
  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: var(--fs-ui);
  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 6px 16px -8px rgba(8, 20, 33, .25);
  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: var(--fs-ui);
  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: var(--fs-ui);
  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
}

/* ===== 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: var(--fs-body);
  display: block;
  margin-bottom: 12px
}

.depo .txt {
  font-size: var(--fs-body-sm);
  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: var(--fs-ui);
  color: var(--navy-2)
}

.depo-who .rl {
  font-size: var(--fs-meta);
  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: var(--fs-meta);
  color: var(--texto-claro)
}

.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: var(--fs-body);
  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: var(--fs-body-sm);
  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)
}

/* ---- 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 6px 14px -6px rgba(8, 20, 33, .4);
  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: var(--fs-meta);
  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 }
}

/* ---- 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: var(--fs-body);
  max-width: 520px;
  margin: 0 auto 30px
}

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

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

.form-group label {
  font-size: var(--fs-label);
  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: var(--fs-ui);
  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: var(--fs-meta);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-family: var(--body)
}

.footer a,
.footer p {
  font-size: var(--fs-ui);
  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: var(--fs-body);
  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: var(--fs-ui)
}

.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: var(--fs-meta);
  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: var(--fs-body);
  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: var(--fs-body);
  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: var(--fs-body-sm);
  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: var(--fs-body)
}

.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: var(--fs-ui);
    font-weight: 700;
    font-family: var(--body);
    text-decoration: none;
    letter-spacing: .3px
  }

  .mobile-cta-wpp {
    background: var(--whatsapp);
    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(.16,1,.3,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 2px 4px rgba(0,0,0,.35))
  }

  /* Indicador ativo — ponto embaixo do ícone */
  .bn-item.active::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: 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, var(--whatsapp) 60%, #128C7E);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    margin-top: -22px;
    box-shadow: 0 6px 16px -4px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.25);
    transition: transform .25s cubic-bezier(.16,1,.3,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 10px 22px -6px rgba(0,0,0,.5), 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: var(--whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  box-shadow: 0 10px 24px -8px rgba(8, 20, 33, .5), 0 2px 6px rgba(8, 20, 33, .2);
  transition: .2s
}

.whatsapp-float:hover {
  transform: translateY(-2px)
}

/* ---- 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: var(--fs-body)
}

.solicit-close {
  background: var(--bg);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--mute);
  font-size: var(--fs-ui);
  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: var(--fs-label);
  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 .32s var(--ease-out)
}

.solicit-step.active { display: block }

@keyframes fadeStepIn {
  from { opacity: 0; transform: translateX(10px) }
  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: var(--fs-ui);
  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 var(--ease-out), 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: var(--fs-meta);
  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: var(--fs-label);
  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: var(--fs-body-sm);
  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 var(--ease-out), 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: var(--fs-label);
  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 8px 18px -10px rgba(8, 20, 33, .35), 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: var(--fs-meta);
  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 var(--ease-out), 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 6px 14px -6px rgba(8, 20, 33, .4)
}

/* 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: var(--fs-label);
  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: var(--fs-ui);
  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: var(--fs-body-sm);
  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, var(--whatsapp), #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) ---- */
/* Antes do elemento entrar na tela ele fica invisível e 14px abaixo.
   A entrada é uma animação só com o quadro inicial ("from"): ela termina
   no estilo normal do elemento e depois não sobrescreve mais nada, então
   o hover dos cartões (levantar, borda, sombra) e as transições próprias
   de cada um continuam funcionando. */
.reveal-init:not(.vis) {
  opacity: 0;
  transform: translateY(14px)
}

.reveal-init.vis {
  animation: reveal-in .7s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: var(--reveal-delay, 0ms)
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(14px) }
}

/* =====================================================================
   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: var(--fs-meta);
  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: var(--fs-ui);
  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: var(--fs-body);
  margin: 0 0 18px
}

.check-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: var(--fs-body-sm);
  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: var(--fs-ui);
  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: var(--fs-meta);
  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 h2, .orc-card h3 {
  letter-spacing: .5px;
  font-size: 23px;
  margin: 0 0 16px
}

.orc-card .mini-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: var(--fs-ui);
  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: var(--fs-ui);
  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,
  .selos-grid {
    grid-template-columns: 1fr 1fr
  }

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

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

  .cobertura {
    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: var(--texto-menu);
    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: var(--texto-claro);
    font-size: var(--fs-body-sm)
  }

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

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

@media(max-width:680px) {
  .grid-servicos,
  .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) {
  /* Conteúdo aparece direto, sem esperar entrar na tela */
  .reveal-init:not(.vis) {
    opacity: 1;
    transform: none
  }
  .reveal-init.vis {
    animation: 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: var(--fs-meta);
  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: var(--fs-body-sm);
  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: var(--fs-meta);
  font-weight: 600;
  color: var(--navy-2)
}

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

.pay-note {
  text-align: center;
  color: var(--mute);
  font-size: var(--fs-ui);
  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: var(--navy-card);
  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 var(--navy-card)
}

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

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

.vs-crown {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .5)
}

.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: var(--navy-card)
}

.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: var(--fs-meta);
  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: var(--fs-body-sm);
  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: var(--fs-body-sm)
}

.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
   ===================================================================== */
/* 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(--disp);
  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
}

/* =====================================================================
   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(--disp);
  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(--disp);
  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: var(--fs-body-sm);
  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: var(--fs-meta)
  }

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

  .redes-sociais a {
    width: 34px;
    height: 34px;
    font-size: var(--fs-ui)
  }

  .footer h4 {
    margin-bottom: 10px;
    font-size: var(--fs-label)
  }

  .footer a,
  .footer p {
    font-size: var(--fs-meta);
    margin-bottom: 7px
  }

  .footer-bottom {
    padding: 14px 0
  }

  .footer-bottom p {
    font-size: var(--fs-label)
  }
}

/* ---- 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: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20512%20512'%20fill%3D'%23fff'%3E%3Cpath%20d%3D'M416%20208c0%2045.9-14.9%2088.3-40%20122.7L502.6%20457.4c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L330.7%20376c-34.4%2025.2-76.8%2040-122.7%2040C93.1%20416%200%20322.9%200%20208S93.1%200%20208%200S416%2093.1%20416%20208zM184%20296c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24V232h64c13.3%200%2024-10.7%2024-24s-10.7-24-24-24H232V120c0-13.3-10.7-24-24-24s-24%2010.7-24%2024v64H120c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024h64v64z'%2F%3E%3C%2Fsvg%3E") center / 22px 22px no-repeat, rgba(17, 27, 56, 0);
  opacity: 0;
  transition: .3s
}

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

.gcar-item:hover::after {
  opacity: 1;
  background-color: 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: var(--fs-body-sm);
  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: var(--fs-meta)
  }

  .lightbox-prev {
    left: 8px
  }

  .lightbox-next {
    right: 8px
  }

  .lightbox-close {
    top: 12px;
    right: 12px
  }
}
/* =====================================================================
   V2 — MELHORIAS DE CONVERSÃO / UX / ACESSIBILIDADE (set/2026)
   Camada aditiva: não altera as regras acima, apenas sobrescreve.
   - Dourado real como cor de DETALHE (nunca predominante)
   - Mobile: remove a barra verde do topo, devolve o WhatsApp flutuante
     às páginas internas (landing pages do Google Ads)
   - Botão principal sem pulsação infinita (percepção premium)
   - Foco de teclado visível
   ===================================================================== */
:root {
  --gold-lux: #C6A15B;       /* dourado de detalhe — usar sobre fundos escuros */
  --gold-lux-soft: #E3CB94;  /* dourado claro — estrelas, realces no hero */
  --gold-ink: #8A6A2B;       /* dourado escuro — texto/ícone sobre fundo claro (5,0:1) */
}

/* Detalhes em dourado */
.eyebrow::before { background: var(--gold-lux) }
.sec-dark .eyebrow::before,
.hero-content .eyebrow::before,
.cta-band .eyebrow::before { background: var(--gold-lux) }
.rule, .divider-left { background: linear-gradient(90deg, var(--gold-lux-soft) 0%, var(--gold-lux) 100%) }
.stars, .depo .stars { color: var(--gold-lux) }
.vs-crown { background: var(--gold-lux); color: var(--navy-card); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .5) }
.vs-ata { border-color: var(--gold-lux) }
.vs-ata .vs-list i { color: var(--gold-lux-soft) }

/* Botões */
.btn-primary { animation: none }
.btn-lg { padding: 17px 30px; font-size: var(--fs-body-sm) }
.btn-sm { padding: 10px 16px; font-size: var(--fs-meta); margin-top: 0 }
.sec-white { background: #fff }
:focus-visible { outline: 3px solid var(--gold-lux); outline-offset: 3px; border-radius: 4px }
.btn:focus-visible { outline-offset: 4px }

/* ---- Hero ---- */
.hero-content h1 .accent-gold {
  display: block;
  background: linear-gradient(100deg, var(--gold-lux-soft) 0%, var(--gold-lux) 60%, #B08A45 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent
}
.hero-content .hero-sub { font-size: clamp(18px, 2.3vw, 22px); color: #fff; font-weight: 500; margin-bottom: 12px }
.hero-content .hero-sub2 { font-size: var(--fs-body); color: var(--texto-sobre-navy); max-width: 620px }
.hero-checks {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: center;
  gap: 10px 26px; margin: 34px auto 0; padding-top: 22px; max-width: 900px;
  border-top: 1px solid rgba(255,255,255,.12)
}
.hero-checks li { display: flex; align-items: center; gap: 9px; font-size: var(--fs-ui); color: var(--texto-claro); text-align: left }
.hero-checks i { color: var(--gold-lux); font-size: var(--fs-meta) }
.hero-rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: var(--fs-meta); color: var(--texto-sobre-navy) }
.hero-rating .stars { color: var(--gold-lux-soft); letter-spacing: 1px }
.hero-rating strong { color: #fff; font-weight: 600 }
.hero-rating .sep { opacity: .5 }
.hero-rating:hover strong { text-decoration: underline }

/* ---- Diferenciais ---- */
.section-title p { max-width: 640px; margin-left: auto; margin-right: auto }
.dif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.dif-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px }
.dif-card > i {
  width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-deep); color: var(--gold-lux); font-size: 18px; margin-bottom: 14px
}
.dif-card h3 { font-family: var(--body); font-size: var(--fs-body); font-weight: 700; letter-spacing: .2px; color: var(--navy-2); margin: 0 0 6px }
.dif-card p { margin: 0; font-size: var(--fs-ui); color: var(--mute); line-height: 1.55 }

/* ---- Serviços com CTA ---- */
.card-servico.svc { display: flex; flex-direction: column }
.card-servico.svc:hover { transform: none; border-color: var(--gold-lux) }
.card-servico.svc > i { background: var(--navy-deep); color: var(--gold-lux) }
.card-servico.svc p { flex: 1 }
.svc-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px }
.svc-actions .link-saiba-mais { color: var(--text-blue) }
.svc-extra { text-align: center; margin: 30px 0 0; color: var(--mute); font-size: var(--fs-ui) }
.svc-extra a { color: var(--text-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px }

/* ---- Destinos (fundo claro) ---- */
.rotas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 48px }
.rota-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; transition: .18s
}
.rota-card:hover { border-color: var(--gold-lux); box-shadow: var(--shadow) }
.rota-cod {
  grid-row: 1 / 3; width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--navy-deep); color: var(--gold-lux); font-weight: 700; font-size: var(--fs-ui); letter-spacing: 1px
}
.rota-nome { font-weight: 700; color: var(--navy-2); font-size: var(--fs-body) }
.rota-cta { font-size: var(--fs-meta); font-weight: 600; color: #128C4A; display: inline-flex; gap: 6px; align-items: center }
.destinos .cobertura h3 { color: var(--navy-2); font-size: 24px }
.destinos .chip { color: var(--navy-2); border-color: var(--line); background: #fff }
.destinos .chip.air { color: var(--navy-2); border-color: rgba(198,161,91,.55); background: #FBF8F1 }
.destinos-links { text-align: center; margin: 36px 0 0; font-size: var(--fs-ui); color: var(--mute) }
.destinos-links a { color: var(--text-blue); font-weight: 600 }

/* ---- Corporativo ---- */
.corp-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center }
.corp-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 4/3 }
.corp-text h2 { font-size: clamp(28px, 3.6vw, 42px); color: var(--navy-2); margin: 10px 0 16px }
.corp-text > p { color: var(--mute); font-size: var(--fs-body); margin: 0 0 20px }
.corp-text .check-list { margin-bottom: 26px }
.corp-text .check-list i { color: var(--gold-ink) }
.corp-text .cta-row { justify-content: flex-start }

/* ---- Frota (5 categorias) ---- */
.grid-frota.frota-5 { grid-template-columns: repeat(5, 1fr); gap: 16px }
.frota-cap { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 4px }
.frota-5 .frota-info h3 { font-size: 22px }

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

/* ---- Como funciona (lista ordenada, visível no mobile) ---- */
ol.passos-grid { list-style: none; margin: 0; padding: 0 }
.passo-icone { border-color: var(--gold-lux) }

/* ---- CTA final ---- */
.cta-final { padding: 84px 22px }
.cta-final .eyebrow { color: var(--gold-lux-soft); justify-content: center; margin-bottom: 8px }
.cta-final p { color: var(--texto-sobre-navy) }
.cta-final .cta-final-tel { margin: 22px auto 0; font-size: var(--fs-ui) }
.cta-final .cta-final-tel a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px }

/* ---- Rodapé ---- */
.footer-grid { grid-template-columns: minmax(250px, 1.6fr) minmax(130px, .8fr) minmax(190px, 1.1fr) minmax(190px, 1.1fr) minmax(240px, 1.3fr) }
.footer-contato a { display: inline-flex; gap: 8px; align-items: center }

/* ---- Navegação inferior: item <button> ---- */
button.bn-item { background: none; border: 0; cursor: pointer; font: inherit }

/* ---- Responsivo ---- */
@media(max-width:1100px) {
  .grid-frota.frota-5 { grid-template-columns: repeat(2, 1fr) }
  .hero-checks { grid-template-columns: repeat(2, auto) }
}
@media(max-width:980px) {
  .dif-grid, .rotas-grid { grid-template-columns: 1fr 1fr }
  .corp-split { grid-template-columns: 1fr; gap: 30px }
  .footer-grid { grid-template-columns: 1fr 1fr }
}
@media(max-width:768px) {
  /* Sem barra verde no topo: header volta ao topo e o conteúdo ganha ~48px */
  .mobile-cta-bar { display: none !important }
  .header { top: 0 }
  body { padding-top: var(--header-h-mobile); padding-bottom: 0 }
  body.has-bottom-nav { padding-bottom: 74px }
  /* WhatsApp flutuante volta em TODAS as páginas internas no celular */
  .whatsapp-float { display: flex; width: 56px; height: 56px; bottom: 18px; right: 16px; font-size: 28px }
  .has-bottom-nav .whatsapp-float { display: none }
  .hero { min-height: auto }
  .hero-content { padding-top: 56px; padding-bottom: 48px }
  .hero-buttons .btn { width: 100% }
  .hero-checks { grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 26px }
  .hero-checks li { font-size: var(--fs-meta) }
  .section-padding { padding: 60px 0 }
  .section-title { margin-bottom: 34px }
  .grid-servicos, .dif-grid, .rotas-grid { grid-template-columns: 1fr }
  .passos-grid { grid-template-columns: 1fr 1fr; gap: 12px }
  .passo-item { padding: 22px 16px }
  .svc-actions .btn { flex: 1 1 100% }
  .section-cta .btn, .cta-final .btn, .corp-text .cta-row .btn { width: 100% }
  .footer-grid { grid-template-columns: 1fr }
}
@media(max-width:420px) {
  .hero-checks { grid-template-columns: 1fr; justify-items: start; max-width: 280px }
  .passos-grid { grid-template-columns: 1fr }
}

/* ---- Páginas legais ---- */
.legal-text { max-width: 780px }
.legal-text h2 { font-size: 26px; color: var(--navy-2); margin: 34px 0 10px }
.legal-text p { color: var(--ink); font-size: var(--fs-body); margin: 0 0 14px }
.legal-text a { color: var(--navy-3); text-decoration: underline }
.legal-date { color: var(--mute) !important; font-size: var(--fs-meta) !important; margin-top: 28px !important }

/* ---- Ajustes pós-revisão visual ---- */
.nav-menu .btn-primary, .nav-menu .btn-primary:hover { color: #fff }
.hero-content .eyebrow { color: var(--gold-lux-soft) }
.section-title { max-width: 720px }
.sec-white .btn-outline { color: var(--navy-2); border-color: var(--navy-3) }
.sec-white .btn-outline:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff }
@media(max-width:768px) {
  .hero-content h1 { font-size: 31px; line-height: 1.15 }
  .hero-content .hero-sub2 { display: none }
  button.bn-item { font-size: 10px; font-weight: 600; letter-spacing: .4px; font-family: var(--body); color: rgba(255,255,255,.45) }
  button.bn-item i { font-size: 22px }
  .passo-item { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 16px }
  .passo-item .passo-icone { grid-row: 1 / 3; margin: 0 }
  .passo-item h3 { margin: 0 0 2px }
  .passo-item p { margin: 0 }
}
@media(max-width:768px) { .hero-rating .sep, .hero-rating .slogan { display: none } }

/* =====================================================================
   RESPONSIVO — ajustes por faixa de tela
   Só corrige o que quebrava em cada tamanho; cores, fontes, textos e
   comportamento continuam os mesmos.
   ===================================================================== */

/* ---- Tablet retrato (681–768px) ----
   O bloco de 768px acima empilhava tudo em 1 coluna, deixando cartões
   e botões esticados na largura inteira do tablet. Aqui volta a 2
   colunas e os botões voltam ao tamanho natural. Abaixo de 681px o
   layout de celular (carrossel de serviços, 1 coluna) continua igual. */
@media (min-width: 681px) and (max-width: 768px) {
  .dif-grid, .rotas-grid, .grid-servicos { grid-template-columns: 1fr 1fr }
  .hero-buttons .btn,
  .section-cta .btn,
  .cta-final .btn,
  .corp-text .cta-row .btn { width: auto }
}

/* ---- Rodapé no celular e tablet ----
   Restaura o rodapé compacto em 2 colunas (marca e contato ocupam a
   linha inteira) que a regra de 1 coluna do bloco de 768px anulava. */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr }
  .footer-brand, .footer-contato, .footer-clima { grid-column: 1 / -1 }
}

/* ---- Rodapé em notebook / tablet deitado (981–1180px) ----
   As 5 colunas somam ~1130px de largura mínima e causavam rolagem
   horizontal nessa faixa. A marca passa para a linha de cima e as
   outras 4 colunas dividem a largura. */
@media (min-width: 981px) and (max-width: 1180px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .footer-brand { grid-column: 1 / -1 }
  .footer-brand p { max-width: 560px }
}

/* ---- Selo do Google em telas muito estreitas (≤360px) ---- */
@media (max-width: 360px) {
  .google-rate { max-width: 100%; padding: 10px 16px; gap: 8px }
}

/* ---- Rótulo (eyebrow) no celular ----
   Com 3,5px de espaçamento, rótulos longos quebravam em 2 linhas e o
   traço dourado ficava sozinho à esquerda. */
@media (max-width: 480px) {
  .eyebrow { letter-spacing: 2px }
}

/* ---- Botões do topo das páginas internas no celular ----
   Empilhados, cada botão tinha uma largura; agora ficam iguais. */
@media (max-width: 480px) {
  .page-hero .cta-row .btn { flex: 1 1 100%; max-width: 340px }
}

/* ---- Toque (celular e tablet) ----
   Áreas de toque de pelo menos ~40px sem mudar o desenho: o espaço
   extra é padding invisível, compensado com margem negativa ou com a
   redução do gap, para o layout não se mexer. */
@media (pointer: coarse) {
  /* Menu lateral: mesmo espaçamento visual, área de toque maior */
  .nav-menu ul { gap: 4px }
  .nav-menu a:not(.btn) { display: block; padding: 10px 0 }

  /* Links de texto dentro de cartões e chamadas */
  .link-saiba-mais, .cta-link, .hero-rating { padding: 10px 0; margin: -10px 0 }

  /* Rodapé */
  .footer-grid a { padding: 7px 0; margin-bottom: 0 }
  .redes-sociais a { width: 44px; height: 44px }

  /* Setas dos carrosséis */
  .gcar-btn, .rcar-btn { width: 44px; height: 44px }

  /* Pontos dos carrosséis: o ponto continua com 8px, mas o botão
     clicável passa a ter 24px (o fundo fica só no centro). */
  .gcar-dots, .rcar-dots, .frota-dots { gap: 0 }
  .gcar-dot, .rcar-dot, .frota-dot {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    padding: 8px;
    background-clip: content-box
  }
}

/* =====================================================================
   TIPOGRAFIA — escala por papel
   Mesmas famílias (Cormorant Garamond nos títulos, Inter no texto) e
   mesma identidade; o que muda é a escala: antes o texto corrido usava
   sete tamanhos entre 13 e 16px e, no celular, o H1 (31px) quase empatava
   com o H2 (30px). Agora cada papel tem um degrau próprio.
   ===================================================================== */
:root {
  --fs-label: 12px;       /* rótulos em caixa alta */
  --fs-meta: 13px;        /* cargo/cidade, copyright, breadcrumb, chips */
  --fs-ui: 14px;          /* botões, menu, rodapé, links de ação */
  --fs-body-sm: 15px;     /* textos de cartão, listas, depoimentos */
  --fs-body: 16px;        /* leitura corrida */
  --measure: 60ch;        /* ~70 caracteres reais por linha no Inter */
}

/* ---- Títulos (Cormorant) ----
   Espaçamento entre letras levemente menor nos tamanhos grandes (o
   espaçamento positivo afrouxava o desenho do serifado) e quebra
   equilibrada para não deixar uma palavra sozinha na última linha. */
h1, h2, h3 { text-wrap: balance }
.hero-content h1 { letter-spacing: .2px; line-height: 1.08 }
.section-title h2, .corp-text h2, .page-hero h1 { letter-spacing: .4px; line-height: 1.1 }
.section-title p, .page-hero .lead, .corp-text > p { text-wrap: pretty }

/* ---- Títulos curtos em Inter (diferenciais, passos, selos, rotas) ----
   Entrelinha 1,1 fazia as linhas encostarem quando o título quebrava. */
.dif-card h3, .passo-item h3, .selo h3 { line-height: 1.3 }
.dif-card h3 { font-size: 17px }
.rota-nome { font-size: var(--fs-body); line-height: 1.35 }

/* ---- Texto de cartão e listas: 15px ---- */
.dif-card p, .card-servico p { font-size: var(--fs-body-sm); line-height: 1.6 }
.depo .txt { font-size: var(--fs-body-sm) }

/* ---- Leitura corrida: 16px com largura limitada ---- */
.faq details p { font-size: var(--fs-body); max-width: var(--measure) }
.corp-text > p { font-size: var(--fs-body) }
.legal-text p { font-size: var(--fs-body); line-height: 1.7; max-width: var(--measure) }
.legal-text h2 { letter-spacing: .3px }

/* ---- Texto claro sobre fundo escuro ----
   Letra clara em fundo escuro parece menor e mais fina; um degrau acima
   e mais entrelinha compensam. */
.passo-item p { font-size: var(--fs-ui); line-height: 1.6 }
.selo p { font-size: var(--fs-ui); line-height: 1.6 }

/* ---- Rodapé ----
   Os títulos das colunas não tinham regra própria e herdavam o tamanho
   padrão do navegador (18,72px). Agora o tamanho é deliberado. */
.footer h3 { font-size: 19px; line-height: 1.2; letter-spacing: .3px }
.footer a, .footer p { font-size: var(--fs-ui) }
.footer-bottom p { font-size: var(--fs-meta) }

/* ---- Metadados ---- */
.depo-who .rl { font-size: var(--fs-meta) }

/* ---- Rótulos em caixa alta ----
   11px com espaçamentos diferentes (3,5 / 1,4 / 0,6px) viram 12px com
   espaçamento proporcional: o rótulo de seção mantém o espaçamento largo
   que é marca da identidade; os rótulos de cartão usam um mais contido. */
.eyebrow { font-size: var(--fs-label); letter-spacing: .26em }
.vs-tag, .frota-cap { font-size: var(--fs-label); letter-spacing: .1em }

/* ---- Números ---- */
.google-rate .rt, .rota-cod { font-variant-numeric: tabular-nums }

/* ---- Celular ----
   H1 33px, H2 26px e títulos de cartão 20–24px: cada nível fica ~25%
   maior que o seguinte, e o título principal volta a mandar. */
@media (max-width: 768px) {
  .hero-content h1 { font-size: 33px; line-height: 1.1 }
  .section-title h2, .corp-text h2 { font-size: 26px }
  .vs-card h3 { font-size: 24px }
}
@media (max-width: 480px) {
  .eyebrow { letter-spacing: .16em }
}

/* =====================================================================
   MOVIMENTO — microinterações e entradas
   Uma curva só para chegadas (desaceleração suave, sem efeito de mola),
   durações curtas e nada que dependa de JavaScript para o conteúdo
   aparecer. Só transform, opacity e clip-path: o navegador anima isso
   sem recalcular layout.
   ===================================================================== */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---- Hero da home: verificação antes da partida ----
   Traço dourado do rótulo se desenha, título sobe, a linha dourada se
   revela da esquerda para a direita e os 4 itens acendem um a um, como
   um check antes de sair. Tudo termina em ~1,3s. */
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px) } }
@keyframes hero-fade { from { opacity: 0 } }
@keyframes rule-draw { from { transform: scaleX(0) } }
@keyframes line-reveal { from { clip-path: inset(0 100% 0 0) } }
.hero-content .eyebrow { animation: hero-fade .6s var(--ease-out) both }
.hero-content .eyebrow::before {
  transform-origin: left center;
  animation: rule-draw .7s var(--ease-out) .1s both
}
.hero-content h1 { animation: hero-rise .8s var(--ease-out) .05s both }
.hero-content h1 .accent-gold { animation: line-reveal .9s var(--ease-in-out) .3s both }
.hero-content .hero-sub { animation: hero-rise .7s var(--ease-out) .35s both }
.hero-content .hero-sub2 { animation: hero-rise .7s var(--ease-out) .42s both }
.hero-buttons { animation: hero-rise .7s var(--ease-out) .5s both }
.hero-rating { animation: hero-fade .6s var(--ease-out) 1.7s both }

/* Topo das páginas internas: mesma linguagem, mais curta */
.page-hero .eyebrow, .page-hero .breadcrumb { animation: hero-fade .6s var(--ease-out) both }
.page-hero h1 { animation: hero-rise .8s var(--ease-out) .05s both }
.page-hero .lead { animation: hero-rise .7s var(--ease-out) .2s both }
.page-hero .cta-row { animation: hero-rise .7s var(--ease-out) .3s both }

/* ---- Entrada de listas: escalonamento curto ----
   Só onde o conteúdo é uma lista de verdade; o atraso total fica em
   no máximo 0,28s. */
:is(.dif-grid, .grid-servicos, .rotas-grid, .grid-frota, .passos-grid, .selos-grid) > :nth-child(2) { --reveal-delay: 70ms }
:is(.dif-grid, .grid-servicos, .rotas-grid, .grid-frota, .passos-grid, .selos-grid) > :nth-child(3) { --reveal-delay: 140ms }
:is(.dif-grid, .grid-servicos, .rotas-grid, .grid-frota, .passos-grid, .selos-grid) > :nth-child(4) { --reveal-delay: 210ms }
:is(.dif-grid, .grid-servicos, .rotas-grid, .grid-frota, .passos-grid, .selos-grid) > :nth-child(n+5) { --reveal-delay: 280ms }

/* ---- Botões: resposta ao clique ----
   Propriedades explícitas (antes era "all") e um leve afundar ao
   pressionar, rápido o bastante para não parecer atraso. */
.btn {
  transition:
    background-color .2s var(--ease-out), color .2s var(--ease-out),
    border-color .2s var(--ease-out), box-shadow .25s var(--ease-out),
    transform .25s var(--ease-out)
}
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s }
.whatsapp-float { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out) }
.whatsapp-float:active { transform: scale(.94) }

/* ---- Cartões: hover com a mesma curva ---- */
.card-servico, .card-frota, .rota-card, .dif-card {
  transition:
    transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
    border-color .25s var(--ease-out)
}
.rota-card:hover .rota-cta i { transform: translateX(2px) }
.rota-cta i { transition: transform .25s var(--ease-out) }

/* ---- Links de ação: a seta desliza ----
   Antes o espaçamento (gap) crescia no hover, o que recalculava o
   layout; agora só a seta se move. */
.card-servico:hover .link-saiba-mais, .cta-link:hover { gap: 6px }
.cta-link:hover { gap: 7px }
.link-saiba-mais i, .cta-link i { transition: transform .25s var(--ease-out) }
.link-saiba-mais:hover i, .card-servico:hover .link-saiba-mais i, .cta-link:hover i { transform: translateX(4px) }

/* ---- Perguntas frequentes: resposta aparece suavemente ---- */
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px) } }
.faq details[open] > :not(summary) { animation: faq-open .3s var(--ease-out) }
.faq summary::after { transition: transform .3s var(--ease-out) }

/* ---- Movimento reduzido ----
   Sem deslocamento, sem desenho de linha e sem escalonamento; ficam só
   esmaecimentos curtos e as mudanças de cor que confirmam uma ação. */
@keyframes reveal-fade { from { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  .hero-content .eyebrow, .hero-content .eyebrow::before, .hero-content h1,
  .hero-content h1 .accent-gold, .hero-content .hero-sub, .hero-content .hero-sub2,
  .hero-buttons, .hero-checks li, .hero-checks li i, .hero-rating,
  .page-hero .eyebrow, .page-hero .breadcrumb, .page-hero h1, .page-hero .lead, .page-hero .cta-row {
    animation: reveal-fade .3s ease-out both;
    animation-delay: 0s
  }
  .hero-content .eyebrow::before { animation: none }
  .faq details[open] > :not(summary) { animation: reveal-fade .2s ease-out }
  .btn:active, .whatsapp-float:active { transform: none }
  .card-servico:hover, .card-frota:hover, .dif-card:hover { transform: none }
  .link-saiba-mais:hover i, .card-servico:hover .link-saiba-mais i, .cta-link:hover i, .rota-card:hover .rota-cta i { transform: none }
}

/* =====================================================================
   DETALHES — confirmações e acabamento
   O site responde como o serviço: com confirmação exata e discreta.
   ===================================================================== */

/* ---- Aviso de confirmação (js/atadrive-delight.js) ----
   Pequeno, navy com o check dourado da marca, acima do WhatsApp
   flutuante e da barra inferior no celular. Some sozinho em ~3s. */
.ad-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  padding: 11px 18px 11px 12px;
  border-radius: 12px;
  background: var(--navy-deep);
  color: #fff;
  font: 500 var(--fs-ui)/1.4 var(--body);
  box-shadow: 0 18px 40px rgba(8, 20, 33, .28), 0 0 0 1px rgba(255, 255, 255, .06);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity .2s ease-in, transform .2s ease-in
}
.ad-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out)
}
.ad-toast-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(198, 161, 91, .16);
  color: var(--gold-lux)
}
@media (max-width: 768px) {
  .ad-toast { bottom: 90px }
  body.has-bottom-nav .ad-toast { bottom: calc(108px + env(safe-area-inset-bottom)) }
}

/* ---- Superfícies do navegador nas cores da marca ---- */
::selection { background: rgba(42, 127, 192, .24); color: inherit }
input, textarea, select { caret-color: var(--blue); accent-color: var(--navy-2) }

/* ---- Links dentro do texto: sublinhado fino e bem espaçado ---- */
.svc-extra a, .destinos-links a, .legal-text a, .cta-final-tel a, .faq details p a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .2s var(--ease-out), color .2s var(--ease-out)
}
.svc-extra a:hover, .destinos-links a:hover, .legal-text a:hover, .cta-final-tel a:hover, .faq details p a:hover {
  text-decoration-color: currentColor
}

/* ---- Perguntas frequentes: a pergunta responde ao ponteiro ---- */
.faq summary { transition: color .2s var(--ease-out) }
.faq summary:hover { color: var(--text-blue) }

/* ---- Rotas: o código do aeroporto "acende" ----
   Um anel dourado fino no bloco navy, como um mostrador que liga. */
.rota-cod { transition: box-shadow .3s var(--ease-out) }
.rota-card:hover .rota-cod, .rota-card:focus-visible .rota-cod {
  box-shadow: inset 0 0 0 1px rgba(198, 161, 91, .7), 0 0 0 3px rgba(198, 161, 91, .12)
}

@media (prefers-reduced-motion: reduce) {
  .ad-toast, .ad-toast.is-on { transform: translate(-50%, 0) }
}

/* =====================================================================
   HERO — CONFIRMAÇÕES ACENDENDO
   (O quadrante com agulha que ficava atrás do título foi removido em
   2026-09-29 a pedido do cliente.) Os 4 checks do hero acendem em
   dourado, um depois do outro, logo após o título entrar.
   ===================================================================== */
.hero-content { z-index: 2 }

@keyframes lamp-text { from { opacity: .38 } }
@keyframes lamp-icon {
  0% { color: rgba(233, 238, 244, .35); transform: scale(.86) }
  45% { color: #F1DDAE; transform: scale(1.1) }
  100% { color: var(--gold-lux); transform: scale(1) }
}
.hero-checks li { animation: lamp-text .45s var(--ease-out) var(--lamp, 1.2s) both }
.hero-checks li i { animation: lamp-icon .5s var(--ease-out) var(--lamp, 1.2s) both }
.hero-checks li:nth-child(1) { --lamp: .85s }
.hero-checks li:nth-child(2) { --lamp: 1s }
.hero-checks li:nth-child(3) { --lamp: 1.15s }
.hero-checks li:nth-child(4) { --lamp: 1.3s }

@media (prefers-reduced-motion: reduce) {
  .hero-checks li, .hero-checks li i { animation: none }
}

/* ---- Comparativo "versus": lista no degrau de texto de cartão ---- */
.vs-list li { font-size: var(--fs-body-sm) }

/* ---- Barra inferior do celular: rótulos legíveis ----
   10px ficava abaixo do mínimo de leitura para texto que é botão. */
@media (max-width: 768px) {
  .bottom-nav .bn-item { font-size: 11px; letter-spacing: .2px }
}

/* ---- Tablet em pé: hero na altura do conteúdo ----
   Com 100vh (ex.: 1180px num tablet em pé) sobravam faixas vazias
   acima e abaixo do texto. */
@media (min-width: 769px) and (max-width: 1100px) and (orientation: portrait) {
  .hero { min-height: auto }
  .hero-content { padding-top: 140px; padding-bottom: 96px }
}

/* ---- Frota em notebook (901–1100px): 3 colunas ----
   Com 5 categorias, 5 colunas ficariam estreitas demais nessa faixa
   e 2 colunas deixariam os cartões enormes. */
@media (min-width: 901px) and (max-width: 1100px) {
  .grid-frota.frota-5 { grid-template-columns: repeat(3, 1fr) }
}

/* ---- Páginas internas: mesma escala ----
   Componentes usados só nas páginas de serviço, Empresas, Transporte
   Corporativo e cadastro de motoristas ainda tinham 12,8 / 15,5 / 16,5px. */
.servico-split p { font-size: var(--fs-body); text-wrap: pretty }
.selo h3 { font-size: var(--fs-body) }
.resultado-lista li { font-size: var(--fs-body-sm) }
.mob-intro p { font-size: var(--fs-body); max-width: var(--measure); margin-left: auto; margin-right: auto }
.pf-field label, .pf-file-label, .pf-file-label span { font-size: var(--fs-meta) }

/* =====================================================================
   ACESSIBILIDADE — CONTRASTE MÍNIMO (WCAG AA, 4,5:1)
   Mesmos tons da identidade, só o necessário mais escuros (sobre fundo
   claro) ou mais claros (sobre navy). Medido com o fundo real de cada
   elemento.
   ===================================================================== */
:root {
  --text-blue: #2674AF;   /* Azul Médio para texto sobre claro (5,0:1) */
  --text-green: #107F43;  /* verde de ação do WhatsApp em texto (5,1:1) */
}

/* Rótulos de seção e links em azul sobre fundo claro (antes 3,96–4,29:1) */
.eyebrow { color: var(--text-blue) }
.link-saiba-mais, .svc-actions .link-saiba-mais, .svc-extra a,
.destinos-links a, .legal-text a, .cta-link { color: var(--text-blue) }

/* Os mesmos elementos sobre navy usam o azul claro da iluminação */
.page-hero .eyebrow, .page-hero .cta-link { color: var(--gold-soft) }

/* "Cotar esta rota" (antes 4,31:1) */
.rota-cta { color: var(--text-green) }

/* Depoimentos: cargo/cidade (antes 3,48:1) e estrelas (antes 2,43:1) */
.depo-who .rl { color: #656F7A }
.depo .stars { color: var(--gold-ink) }

/* Inicial do avatar sobre navy (antes 4,34:1) */
.depo-av { color: var(--gold-soft) }

/* Selo "Padrão Executivo" do comparativo (antes 4,29:1) */
.vs-ata .vs-tag { background: var(--gold-soft) }

/* Copyright do rodapé (antes 1,99:1) */
.footer-bottom p { color: #64717D }

/* Estrelas do selo do Google (antes 2,43:1) */
.google-rate .stars { color: var(--gold-ink) }

/* Números dos passos em fundo claro (antes 3,77:1) */
.sec-light .passo-numero { color: var(--blue) }

/* Asterisco de campo obrigatório no cadastro de motoristas (antes 3,36:1) */
.pf-field .req { color: var(--text-blue) }

/* ---- Formulário "Solicitar cotação" da home ----
   Asterisco legível (antes 3,36:1) e mensagem de erro sob o campo, em
   vez de só a borda vermelha. var(--erro) tem 6,5:1 sobre branco. */
.solicit-drawer .req { color: var(--text-blue) }
.solicit-field input.error, .solicit-field select.error { border-color: var(--erro) }
.solicit-erro {
  margin: 6px 0 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--erro)
}
.solicit-erro[hidden] { display: none }
/* A mensagem entra junto com a borda vermelha, sem sacudir o campo. */
.solicit-erro:not([hidden]) { animation: erro-in .24s var(--ease-out) }
@keyframes erro-in { from { opacity: 0; transform: translateY(-3px) } }
@media (prefers-reduced-motion: reduce) {
  .solicit-step, .solicit-erro:not([hidden]) { animation: none }
}
#veiculoErro { margin-top: 10px }

/* ---- Tipografia do formulário "Solicitar cotação" ----
   O painel tinha textos de 9 a 12px, abaixo da escala do site.
   Cada texto volta ao seu degrau (12 rótulo · 13 meta · 14 UI). */
.solicit-drawer .v-disp-badge { font-size: 11px }
/* com o selo em 11px, o ícone desce para não ficar por baixo dele */
.solicit-drawer .veiculo-card { padding-top: 34px }
.solicit-drawer .sp-label { font-size: var(--fs-label) }
.solicit-drawer .veiculo-card small { font-size: var(--fs-meta); line-height: 1.35 }
.solicit-drawer .veiculo-card strong { font-size: var(--fs-ui) }
.solicit-drawer .solicit-field label, .solicit-drawer .solicit-opt { font-size: var(--fs-meta) }
.solicit-drawer .solicit-disclaimer { font-size: var(--fs-meta); line-height: 1.5 }

/* ---- Campos de formulário em telas de toque: 16px ----
   Abaixo de 16px o Safari do iPhone dá zoom na página ao tocar no
   campo, o que desmonta o layout do formulário. */
@media (pointer: coarse) {
  input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
  select, textarea { font-size: var(--fs-body) }
}

/* =====================================================================
   MOLDURA DE INSTRUMENTOS — o painel do hero estendido ao site
   Quatro peças estáticas, só CSS: risco dourado sob os títulos,
   leitura de status no topo das páginas internas, item atual aceso no
   menu e rodapé como painel inferior. Nada se move; a agulha continua
   exclusiva do quadrante da home.
   ===================================================================== */

/* Risco dourado: some nas pontas, ouro real no corpo e um ouro mais claro
   no centro, como um filete gravado e iluminado. */
:root {
  --risco-ouro: linear-gradient(90deg, transparent 0%, var(--gold-lux) 26%, #DCC08A 50%, var(--gold-lux) 74%, transparent 100%);
  --risco-ouro-escuro: linear-gradient(90deg, transparent 0%, var(--gold-lux) 26%, #EBD6A8 50%, var(--gold-lux) 74%, transparent 100%);
  --filete-ouro: linear-gradient(90deg, transparent 0%, rgba(198, 161, 91, .55) 50%, transparent 100%);
}

.rule,
.divider-left {
  width: 88px;
  height: 2px;
  border-radius: 2px;
  background: var(--risco-ouro);
  opacity: 1;
  transform: none;
  transition: none
}
.divider-left { margin-left: 0 }
.sec-dark .rule, .sec-dark .divider-left,
.page-hero .rule, .page-hero .divider-left { background: var(--risco-ouro-escuro) }

/* Leitura de status: os quatro fatos fixos do serviço, com a lâmpada
   acesa no mesmo dourado das confirmações do hero. */
.leitura {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 0;
  width: fit-content;
  max-width: 100%;
  margin: 34px auto 0;
  padding-top: 16px;
  color: var(--texto-sobre-navy);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid transparent;
  border-image: var(--filete-ouro) 1
}
.leitura > span { white-space: nowrap }
.leitura > span + span::before {
  content: "·";
  content: "·" / "";
  margin: 0 .75em;
  color: var(--gold-soft)
}
.leitura .leitura-luz {
  width: 7px;
  height: 7px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--gold-lux)
}
.leitura .leitura-luz + span::before { content: none }
/* Em telas estreitas a leitura quebra em duas linhas fixas (2 + 2 fatos),
   para nenhum separador ficar solto no começo da linha. */
@media (max-width: 600px) {
  .leitura::after { content: ''; flex-basis: 100%; order: 1 }
  .leitura > span:nth-child(n+4) { order: 2 }
  .leitura > span:nth-child(4)::before { content: none }
}
@media (max-width: 360px) {
  .leitura { font-size: 11px; letter-spacing: .06em }
}

/* Menu: a página atual fica acesa com um traço fino na luz do painel. */
.nav-menu a[aria-current]:not(.btn) {
  color: var(--navy-2);
  font-weight: 600;
  text-decoration: underline 2px var(--gold);
  text-underline-offset: 9px
}
@media (max-width: 960px) {
  .nav-menu a[aria-current]:not(.btn) {
    color: #fff;
    text-decoration-color: var(--gold-soft)
  }
}

/* Rodapé como painel inferior: um filete dourado no topo, que some nas
   laterais, e a linha de copyright como barra de status. */
.footer {
  position: relative;
  border-top: 0
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--filete-ouro);
  pointer-events: none
}
.footer-bottom p {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em
}
.footer-bottom p::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--gold-lux);
  vertical-align: middle;
  transform: translateY(-1px)
}

/* =====================================================================
   ACABAMENTO — teclado e leitores de tela
   ===================================================================== */

/* Menu mobile: o checkbox que abre o menu fica fora da vista, mas
   focável (Espaço abre e fecha, com o contorno dourado no ícone). O menu
   fechado some também para o teclado: sem Tab em links invisíveis. */
@media (max-width: 960px) {
  .menu-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none
  }
  .menu-toggle:focus-visible + .menu-icon {
    outline: 3px solid var(--gold-lux);
    outline-offset: 2px
  }
  .nav-menu {
    visibility: hidden;
    transition: left .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s
  }
  .menu-toggle:checked ~ .nav-menu {
    visibility: visible;
    transition: left .3s cubic-bezier(.4, 0, .2, 1), visibility 0s
  }
}

/* "Enviar pelo WhatsApp": texto branco pede o verde de botão (var(--whatsapp-botao),
   5,1:1); o verde de marca var(--whatsapp) dava 2:1. */
.btn-s-send { background: var(--whatsapp-botao) }
.btn-s-send:hover { background: var(--whatsapp-botao-hover) }

/* Pular para o conteúdo: aparece só no primeiro Tab. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--navy-deep);
  color: #fff;
  font-size: var(--fs-ui);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .2s var(--ease-out)
}
.skip-link:focus-visible {
  transform: none;
  outline: 3px solid var(--gold-lux);
  outline-offset: 2px
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none }
}

/* Passo concluído no formulário: número branco pede o azul de texto
   (5:1); o Azul Aço dava 3,4:1. */
.sp-item.done .sp-num { background: var(--text-blue) }

/* Menu (desktop, mouse): o hover antecipa o traço do item aceso, em
   meia-luz. Só cor anima; nada muda de lugar. */
@media (min-width: 961px) and (hover: hover) {
  .nav-menu a:not(.btn) {
    text-decoration: underline 2px transparent;
    text-underline-offset: 9px;
    transition: color .2s var(--ease-out), text-decoration-color .25s var(--ease-out)
  }
  .nav-menu a:not(.btn):hover { text-decoration-color: rgba(42, 147, 214, .45) }
  .nav-menu a[aria-current]:not(.btn) { text-decoration-color: var(--gold) }
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu a:not(.btn) { transition: none }
}

/* Progresso do formulário: passo concluído vira um check, como o painel
   confirmando cada item. O número continua no HTML para leitor de tela. */
.sp-item.done .sp-num { position: relative; color: transparent }
.sp-item.done .sp-num::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: sp-check .3s var(--ease-out)
}
@keyframes sp-check { from { opacity: 0; transform: scale(.6) } }
@media (prefers-reduced-motion: reduce) {
  .sp-item.done .sp-num::after { animation: none }
}

/* =====================================================================
   PASSAGEM DE BASTÃO — o quadrante entrega para o risco dourado
   Único eco do momento do hero: o primeiro risco depois dele se traça
   uma vez, do centro para as pontas, quando o título entra na tela.
   Só clip-path; sem JS ou com movimento reduzido ele já nasce pronto.
   ===================================================================== */
.rule--calibra.calibra-init:not(.vis) { clip-path: inset(0 50% 0 50%) }
.rule--calibra.calibra-init.vis { animation: risco-traca 1.1s var(--ease-out) .15s both }
@keyframes risco-traca {
  from { clip-path: inset(0 50% 0 50%) }
  to   { clip-path: inset(0 0 0 0) }
}
@media (prefers-reduced-motion: reduce) {
  .rule--calibra.calibra-init:not(.vis) { clip-path: none }
  .rule--calibra.calibra-init.vis { animation: none }
}

/* =====================================================================
   TRANSIÇÃO ENTRE PÁGINAS — View Transitions entre documentos
   Ao seguir um link interno, a página atual se dissolve na próxima em
   ~0,3s e o cabeçalho fica parado no lugar. Chrome, Edge e Safari;
   nos demais navegadores a troca é a normal. Desligada com movimento
   reduzido.
   ===================================================================== */
@view-transition { navigation: auto }

.header { view-transition-name: cabecalho }

::view-transition-old(root) { animation: vt-sai .16s ease-in both }
::view-transition-new(root) { animation: vt-entra .3s var(--ease-out) .04s both }
::view-transition-group(cabecalho) { animation-duration: 0s }

@keyframes vt-sai { to { opacity: 0 } }
@keyframes vt-entra { from { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none }
}

/* =====================================================================
   GALERIA CIRCULAR — as fotos reais num anel em perspectiva
   A da frente grande, com filete dourado; as vizinhas giram para o fundo
   e escurecem no navy do site; a parte de trás do anel fica oculta e as
   bordas se dissolvem. O JS posiciona cada foto (transform); aqui só a
   aparência. Sem JS continua valendo a fila acima (.gcar-anel ausente).
   ===================================================================== */
.gcar-anel .gcar-viewport {
  --gcar-w: clamp(260px, 32vw, 420px);
  position: relative;
  height: calc(var(--gcar-w) * .75 + 56px);
  overflow: hidden;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%)
}
/* perspectiva no próprio trilho e sem preserve-3d: cada foto é projetada
   sozinha e a ordem de empilhamento (z-index) decide quem fica na frente,
   sem as bordas das vizinhas atravessarem a foto principal */
.gcar-anel .gcar-track {
  position: absolute;
  inset: 0;
  display: block;
  perspective: 1500px;
  perspective-origin: 50% 45%;
  transition: none;
  will-change: auto
}
.gcar-anel .gcar-slide {
  position: absolute;
  top: 18px;
  left: 50%;
  width: var(--gcar-w);
  margin-left: calc(var(--gcar-w) / -2);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transition: transform .9s var(--ease-out), opacity .5s var(--ease-out)
}
/* sombra navy sobre as vizinhas: opacidade, não filtro */
.gcar-anel .gcar-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius);
  background: var(--navy-deep);
  opacity: var(--sombra, 0);
  pointer-events: none;
  transition: opacity .6s var(--ease-out)
}
.gcar-anel .gcar-slide.is-oculto {
  opacity: 0;
  pointer-events: none
}
.gcar-anel .gcar-item {
  transition: border-color .5s var(--ease-out), box-shadow .6s var(--ease-out)
}
.gcar-anel .gcar-slide.is-frente .gcar-item {
  border-color: rgba(198, 161, 91, .6);
  box-shadow: 0 28px 56px -18px rgba(0, 0, 0, .6)
}
/* só a foto da frente amplia; as laterais giram até a frente ao clicar */
.gcar-anel .gcar-slide:not(.is-frente) .gcar-item { cursor: pointer }
.gcar-anel .gcar-slide:not(.is-frente) .gcar-item::after { display: none }
.gcar-anel .gcar-slide:not(.is-frente) .gcar-item:hover img { transform: none }
.gcar-anel .gcar-slide:not(.is-frente):hover::before { opacity: calc(var(--sombra, 0) - .15) }

@media (max-width: 680px) {
  .gcar-anel { position: relative; gap: 0 }
  .gcar-anel .gcar-viewport {
    --gcar-w: 66vw;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%)
  }
  .gcar-anel .gcar-btn {
    position: absolute;
    top: 50%;
    z-index: 30;
    transform: translateY(-50%)
  }
  .gcar-anel .gcar-prev { left: 0 }
  .gcar-anel .gcar-next { right: 0 }
}

@media (prefers-reduced-motion: reduce) {
  .gcar-anel .gcar-slide,
  .gcar-anel .gcar-slide::before,
  .gcar-anel .gcar-item { transition: none }
}

/* ---- Frota (4 categorias: Executivo, SUV, SUV Premium, Van Executiva) ----
   Quatro colunas no computador; de 769 a 980px a regra geral de duas
   colunas forma um 2×2; no celular continua o carrossel. */
.grid-frota.frota-4 { grid-template-columns: repeat(4, 1fr); gap: 18px }
.frota-4 .frota-info h3 { font-size: 22px }
@media (min-width: 769px) and (max-width: 980px) {
  .grid-frota.frota-4 { grid-template-columns: repeat(2, 1fr) }
}

/* ---- Balão de atendimento (js/atadrive-delight.js) ----
   Cartão pequeno que sai do WhatsApp flutuante, uma vez por visita:
   quem atende, "digitando…" e a saudação do horário. Branco, navy e um
   filete dourado; entra subindo 8px e some sem pressa. */
.ad-balao {
  position: fixed;
  z-index: 70;
  width: min(290px, calc(100vw - 24px));
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity .2s ease-in, transform .2s ease-in
}
.ad-balao.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .35s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1)
}
.ad-balao-corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 14px;
  border-radius: 16px 16px 4px 16px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-lux);
  box-shadow: 0 18px 40px -12px rgba(17, 27, 56, .35);
  font-family: var(--body)
}
.ad-balao-topo { display: flex; align-items: center; gap: 10px; padding-right: 22px }
.ad-balao-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy-deep);
  color: var(--gold-lux)
}
.ad-balao-topo strong { display: block; font-size: var(--fs-ui); font-weight: 600; line-height: 1.3 }
.ad-balao-topo small { display: block; font-size: var(--fs-label); line-height: 1.35; color: var(--text-green) }
.ad-balao-msg {
  display: block;
  align-self: flex-start;
  min-height: 20px;
  padding: 10px 14px;
  border-radius: 4px 14px 14px 14px;
  background: var(--bg);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--ink)
}
.ad-balao-digitando { display: inline-flex; gap: 4px; align-items: center; height: 20px }
.ad-balao-digitando i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8A97A8;
  animation: ad-digita 1s 2 ease-in-out
}
.ad-balao-digitando i:nth-child(2) { animation-delay: .15s }
.ad-balao-digitando i:nth-child(3) { animation-delay: .3s }
@keyframes ad-digita { 0%, 60%, 100% { opacity: .35 } 30% { opacity: 1 } }
.ad-balao-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-green)
}
.ad-balao-cta svg { transition: transform .2s cubic-bezier(.16, 1, .3, 1) }
.ad-balao-corpo:hover .ad-balao-cta svg { transform: translateX(3px) }
.ad-balao-corpo:focus-visible { outline: 3px solid var(--gold-lux); outline-offset: 3px }
.ad-balao-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mute);
  cursor: pointer
}
.ad-balao-fechar:hover { background: var(--bg); color: var(--navy-2) }
.ad-balao-fechar:focus-visible { outline: 3px solid var(--gold-lux); outline-offset: 1px }
@media (prefers-reduced-motion: reduce) {
  .ad-balao, .ad-balao.is-on { transition: none; transform: none }
  .ad-balao-digitando i { animation: none }
}

/* ---- Painel de atendimento (js/atadrive-delight.js) ----
   Abre no botão do WhatsApp do canto: cinco campos e o envio pronto para
   o WhatsApp. Mesmo cartão do balão: branco, filete dourado, navy. */
.ad-painel {
  position: fixed;
  z-index: 80;
  width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 16px 16px 14px;
  border-radius: 16px 16px 4px 16px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-lux);
  box-shadow: 0 22px 48px -14px rgba(17, 27, 56, .4);
  font-family: var(--body);
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transform-origin: 100% 100%;
  transition: opacity .18s ease-in, transform .18s ease-in
}
.ad-painel[hidden] { display: none }
.ad-painel.is-on {
  opacity: 1;
  transform: none;
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.16, 1, .3, 1)
}
.ad-painel-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px }
.ad-painel-topo > span:nth-child(2) { flex: 1; min-width: 0 }
.ad-painel-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy-deep);
  color: var(--gold-lux)
}
.ad-painel-topo strong { display: block; font-size: var(--fs-ui); font-weight: 600; line-height: 1.3 }
.ad-painel-topo small { display: block; font-size: var(--fs-label); line-height: 1.35; color: var(--mute) }
.ad-painel-fechar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mute);
  cursor: pointer
}
.ad-painel-fechar:hover { background: var(--bg); color: var(--navy-2) }
.ad-painel-form { display: flex; flex-direction: column; gap: 10px }
.ad-painel-linha { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px }
.ad-painel-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.ad-painel-campo label { font-size: var(--fs-label); font-weight: 600; color: var(--navy-2) }
.ad-painel-req { color: var(--text-blue) }
.ad-painel-opc { font-weight: 400; color: var(--mute) }
.ad-painel-campo input,
.ad-painel-campo select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: 400 14px/1.2 var(--body);
  caret-color: var(--navy-3);
  transition: border-color .15s, box-shadow .15s
}
.ad-painel-campo input:focus,
.ad-painel-campo select:focus {
  outline: 0;
  border-color: var(--navy-3);
  box-shadow: 0 0 0 3px rgba(27, 60, 92, .12)
}
.ad-painel-campo input[aria-invalid="true"] { border-color: var(--erro) }
.ad-painel-erro { margin: 2px 0 0; font-size: var(--fs-meta); line-height: 1.35; color: var(--erro) }
.ad-painel-erro[hidden] { display: none }
.ad-painel-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  margin-top: 4px;
  border: 0;
  border-radius: 8px;
  background: var(--whatsapp-botao);
  color: #fff;
  font: 600 15px/1 var(--body);
  cursor: pointer;
  transition: background .2s, transform .08s
}
.ad-painel-enviar:hover { background: var(--whatsapp-botao-hover) }
.ad-painel-enviar:active { transform: scale(.98) }
.ad-painel-direto {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-green);
  text-decoration: underline;
  text-underline-offset: 3px
}
.ad-painel :focus-visible { outline: 3px solid var(--gold-lux); outline-offset: 2px }
.ad-painel-campo input:focus-visible,
.ad-painel-campo select:focus-visible { outline: 0 }
@media (pointer: coarse) {
  .ad-painel-campo input, .ad-painel-campo select { font-size: var(--fs-body); height: 44px }
}
@media (prefers-reduced-motion: reduce) {
  .ad-painel, .ad-painel.is-on { transition: none; transform: none }
}

/* =====================================================================
   HERO — VEÍCULO EM EVIDÊNCIA
   O escurecimento deixa de ser uniforme: uma sombra suave fica só atrás
   do texto central, e o lado direito, onde está o Corolla, clareia. Topo
   e base seguem mais escuros para o menu e a linha de confirmações.
   Ao abrir, um reflexo de showroom passa uma vez pela lataria (luz
   fina, blend screen) e para. Sem loop; sem ele com movimento
   reduzido.
   ===================================================================== */
.hero-overlay {
  background:
    radial-gradient(ellipse 46% 52% at 50% 46%, rgba(8, 20, 33, .62) 0%, rgba(8, 20, 33, .34) 55%, transparent 80%),
    linear-gradient(180deg, rgba(8, 20, 33, .5) 0%, transparent 26%, transparent 66%, rgba(8, 20, 33, .62) 100%),
    linear-gradient(100deg, rgba(8, 20, 33, .9) 0%, rgba(8, 20, 33, .62) 38%, rgba(8, 20, 33, .26) 68%, rgba(8, 20, 33, .14) 100%),
    url('../img/foto-02.webp') center/cover no-repeat
}
.hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 41%, rgba(255, 248, 235, .05) 46%, rgba(255, 255, 255, .16) 50%, rgba(255, 248, 235, .05) 54%, transparent 59%);
  mix-blend-mode: screen;
  transform: translateX(-60%);
  opacity: 0;
  animation: hero-reflexo 2.6s cubic-bezier(.45, 0, .25, 1) 1.2s both
}
@keyframes hero-reflexo {
  0%   { transform: translateX(-60%); opacity: 0 }
  15%  { opacity: 1 }
  85%  { opacity: 1 }
  100% { transform: translateX(60%); opacity: 0 }
}
@media (max-width: 768px) {
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(8, 20, 33, .72) 0%, rgba(8, 20, 33, .58) 45%, rgba(8, 20, 33, .7) 100%),
      url('../img/foto-02.webp') center/cover no-repeat
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-overlay::after { animation: none; opacity: 0 }
}

/* ---- Topo das páginas internas com a foto da home ----
   .page-hero--foto usa a mesma camada .hero-overlay da home: foto real
   do Corolla, luz do lado do carro e o reflexo que passa uma vez. O
   anel decorativo do topo navy some sobre a foto. */
.page-hero--foto { background: var(--navy-deep) }
.page-hero--foto::after { display: none }
.page-hero--foto .hero-overlay { z-index: 0 }
/* O topo interno é mais baixo que o da home: a sombra atrás do texto
   fica maior e um pouco mais forte para o caminho e o parágrafo não
   caírem sobre a parede clara da foto. */
.page-hero--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 78% at 50% 50%, rgba(8, 20, 33, .66) 0%, rgba(8, 20, 33, .4) 55%, transparent 88%)
}

/* =====================================================================
   ÍCONES EM SVG (no lugar da biblioteca Font Awesome)
   Cada página traz só os desenhos que usa, num <svg> oculto no início do
   <body>; o <i class="fas fa-x"> segue recebendo cor e tamanho das regras
   de sempre. Mesmas proporções da fonte: altura 1em, largura do desenho,
   base um oitavo abaixo da linha.
   ===================================================================== */
:where(i.fas, i.fab, i.fa-solid, i.fa-brands) {
  display: inline-block;
  font-style: normal;
  line-height: 1;
  vertical-align: -.125em
}
.ico {
  display: block;
  height: 1em;
  fill: currentColor;
  overflow: visible
}

/* =====================================================================
   LANDING DO GOOGLE ADS — transfer-executivo.html
   Página de anúncio: sem menu, formulário no topo, prova social logo em
   seguida. Usa os componentes do site; aqui só o que é próprio dela.
   ===================================================================== */
.lp-header .header-container { justify-content: space-between }
.lp-header .logo img { max-height: 56px }
.lp-header-acoes { display: flex; align-items: center; gap: 18px }
.lp-tel { font-size: var(--fs-ui); font-weight: 600; color: var(--navy-2); white-space: nowrap }
.lp-tel:hover { color: var(--text-blue) }

.lp-hero { padding: 132px 0 72px }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; text-align: left }
.lp-hero-txt h1 { margin: 0 0 16px; max-width: 620px; text-align: left }
.lp-hero-txt .lead { margin: 0 0 22px; max-width: 560px; text-align: left }
.lp-hero-fatos { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px }
.lp-hero-fatos li { display: flex; align-items: center; gap: 12px; color: #fff; font-size: var(--fs-body); font-weight: 500 }
.lp-hero-fatos i { color: var(--gold-lux); font-size: 18px; width: 22px; display: inline-flex; justify-content: center }
.lp-nota { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-ui); color: var(--texto-sobre-navy) }
.lp-nota .stars { color: var(--gold-lux-soft); letter-spacing: 1px }
.lp-nota strong { color: #fff }

.lp-form {
  background: linear-gradient(var(--gold-lux), var(--gold-lux)) top / 100% 3px no-repeat, var(--white); color: var(--ink); border-radius: 18px; padding: 30px 26px 22px;
  box-shadow: 0 28px 56px -20px rgba(0, 0, 0, .55);
  display: grid; gap: 12px; text-align: left
}
.lp-form h2 { font-size: 28px; margin: 0; color: var(--navy-2) }
.lp-campo { display: grid; gap: 5px; min-width: 0 }
.lp-campo label { font-size: var(--fs-label); font-weight: 600; color: var(--navy-2) }
.lp-campo .req { color: var(--text-blue) }
.lp-opc { font-weight: 400; color: var(--mute) }
.lp-campo input, .lp-campo select {
  width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--ink); font: 400 var(--fs-ui) var(--body); transition: border-color .15s, box-shadow .15s
}
.lp-campo input:focus, .lp-campo select:focus { outline: 0; border-color: var(--navy-3); box-shadow: 0 0 0 3px rgba(27, 60, 92, .12) }
.lp-campo input[aria-invalid="true"] { border-color: var(--erro) }
.lp-linha { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px }
.lp-enviar {
  margin-top: 4px; width: 100%; justify-content: center; gap: 8px; min-height: 50px;
  background: var(--whatsapp-botao); color: #fff; font-size: var(--fs-body); font-weight: 600
}
.lp-enviar:hover { background: var(--whatsapp-botao-hover); transform: translateY(-1px) }
.lp-form-nota { margin: 0; font-size: var(--fs-meta); color: var(--mute); text-align: center }

.lp-depos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px }
.lp-depos > div { display: flex }
.lp-depos .depo { width: 100% }
.lp-motivos { grid-template-columns: repeat(3, 1fr) }

.lp-rodape { background: var(--navy-deep); color: var(--texto-sobre-navy); padding: 28px 0; font-size: var(--fs-meta); text-align: center }
.lp-rodape p { margin: 0 0 6px }
.lp-rodape a { color: #fff; text-decoration: underline; text-underline-offset: 3px }

@media (max-width: 980px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 32px }
  .lp-form { max-width: 520px }
  .lp-depos, .lp-motivos { grid-template-columns: 1fr }
}
@media (max-width: 768px) {
  .lp-hero { padding: 40px 0 48px }
  .lp-tel { display: none }
  .lp-header .btn { padding: 10px 14px; font-size: var(--fs-meta) }
  .lp-header .logo img { max-height: 44px }
  .lp-form { padding: 22px 18px 18px }
  .lp-form h2 { font-size: 24px }
}
@media (max-width: 360px) {
  .lp-linha { grid-template-columns: 1fr }
}
@media (pointer: coarse) {
  .lp-campo input, .lp-campo select { font-size: 16px }
}
/* landing: ajustes após inspeção */
.lp-hero .lp-hero-grid, .lp-hero .lp-hero-txt { text-align: left }
@media (max-width: 960px) {
  .lp-header .header-container { display: flex; justify-content: space-between; align-items: center; gap: 12px }
  .lp-header .logo { position: static; transform: none; margin: 0; flex: 0 1 auto; min-width: 0 }
  .lp-header .btn { flex: none; white-space: nowrap }
}
/* landing: campos extras do formulário */
.lp-campo[hidden] { display: none }
.lp-check {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px;
  font-size: var(--fs-meta); color: var(--mute); line-height: 1.4; cursor: pointer; transition: border-color .15s, background-color .15s
}
.lp-check strong { color: var(--navy-2) }
.lp-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--navy-2) }
.lp-check:has(input:checked) { border-color: var(--navy-3); background-color: rgba(42, 127, 192, .05) }
.lp-check:focus-within { box-shadow: 0 0 0 3px rgba(27, 60, 92, .12) }
@media (max-width: 420px) { .lp-enviar { font-size: var(--fs-ui); gap: 6px; padding-left: 12px; padding-right: 12px } }
/* landing: formulário numa seção própria, abaixo da foto */
.lp-hero-grid--so-texto { grid-template-columns: minmax(0, 1fr) }
.lp-hero-grid--so-texto .lp-hero-txt { max-width: 680px }
.lp-hero-ctas { justify-content: flex-start; margin: 4px 0 22px }
.lp-hero { padding-bottom: 80px }
.lp-form-sec { padding-top: 64px; padding-bottom: 64px }
.lp-form-sec .lp-form { max-width: 620px; margin: 0 auto; box-shadow: var(--shadow); border: 1px solid var(--line) }
@media (max-width: 768px) {
  .lp-hero-ctas .btn { width: 100% }
  .lp-form-sec { padding-top: 40px; padding-bottom: 44px }
}
/* landing: frase de posicionamento abaixo do título */
.lp-padrao { margin: -4px 0 14px; max-width: 600px; font-family: var(--disp); font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; line-height: 1.3; color: var(--gold-lux-soft) }

/* ---- Landing: formulário em 3 passos ---- */
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0 }
.lp-prog { display: grid; gap: 8px; margin: -2px 0 6px }
.lp-prog-txt { font-size: var(--fs-meta); color: var(--mute) }
.lp-prog-txt b { color: var(--navy-2) }
.lp-prog-barra { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden }
.lp-prog-barra i { display: block; height: 100%; width: 100%; background: var(--gold-lux); border-radius: 4px; transform: scaleX(.3333); transform-origin: left; transition: transform .35s var(--ease-out) }
.lp-passo { display: grid; gap: 14px }
.lp-wiz .lp-passo { display: none }
.lp-wiz .lp-passo.ativo { display: grid; animation: fadeStepIn .32s var(--ease-out) }
.lp-passo-tit { margin: 0; font-family: var(--disp); font-size: 22px; font-weight: 700; color: var(--navy-2); outline: 0 }
.lp-grupo { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0 }
.lp-grupo legend { padding: 0; margin-bottom: 8px; font-size: var(--fs-label); font-weight: 600; color: var(--navy-2) }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px }
.lp-chip input, .lp-seg input { position: absolute; opacity: 0; width: 1px; height: 1px }
.lp-chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--fs-ui); font-weight: 500; color: var(--navy-2); background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s
}
.lp-chip span:hover { border-color: var(--navy-3) }
.lp-chip input:checked + span { background: var(--navy-2); border-color: var(--navy-2); color: #fff }
.lp-chip input:focus-visible + span, .lp-seg input:focus-visible + span { outline: 3px solid var(--gold-lux); outline-offset: 2px }
.lp-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px }
.lp-seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.lp-seg span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px;
  font-size: var(--fs-ui); font-weight: 500; color: var(--navy-2); background: #fff; cursor: pointer; line-height: 1.2; transition: border-color .15s, background-color .15s, color .15s
}
.lp-seg span:hover { border-color: var(--navy-3) }
.lp-seg input:checked + span { background: rgba(42, 127, 192, .08); border-color: var(--navy-3); color: var(--navy-2); font-weight: 600; box-shadow: inset 0 0 0 1px var(--navy-3) }
.lp-dica { margin: 0; font-size: var(--fs-meta); color: var(--mute) }
.lp-avancar { width: 100%; justify-content: center; min-height: 50px; font-size: var(--fs-body) }
.lp-nav { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center }
.lp-voltar { background: none; border: 0; padding: 10px 4px; font: 600 var(--fs-ui) var(--body); color: var(--mute); cursor: pointer; justify-self: start }
.lp-voltar:hover { color: var(--navy-2) }
.lp-garantias { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: var(--fs-meta); color: var(--mute) }
.lp-garantias .stars { color: var(--gold-ink) }
.lp-form .solicit-erro { margin: 0 }

/* barra fixa do celular */
.lp-barra { display: none }
@media (max-width: 768px) {
  .lp-barra {
    display: flex; gap: 10px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(8, 20, 33, .3);
    transform: translateY(110%); transition: transform .3s var(--ease-out)
  }
  .lp-barra.on { transform: none }
  .lp-barra .btn { flex: 1; justify-content: center; min-height: 48px }
  .lp-barra-wa { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--whatsapp-botao); color: #fff; font-size: 22px }
  body.lp .whatsapp-float { display: none }
  body.lp { padding-bottom: calc(68px + env(safe-area-inset-bottom)) }
  .lp-seg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (prefers-reduced-motion: reduce) {
  .lp-barra, .lp-prog-barra i { transition: none }
  .lp-wiz .lp-passo.ativo { animation: none }
}

/* ---- Landing: formulário simples (origem e destino) ---- */
.lp-form-sub { margin: -4px 0 4px; font-size: var(--fs-ui); color: var(--mute) }
.lp-rapidos { display: grid; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line) }
.lp-rapidos-tit { margin: 0; font-size: var(--fs-label); font-weight: 600; color: var(--navy-2) }
.lp-rapidos-lista { display: flex; flex-wrap: wrap; gap: 8px }
.lp-rapido {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
  font: 500 var(--fs-ui) var(--body); color: var(--navy-2); background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s
}
.lp-rapido:hover { border-color: var(--navy-3) }
.lp-rapido[aria-pressed="true"] { background: var(--navy-2); border-color: var(--navy-2); color: #fff }
.lp-rapido:focus-visible { outline: 3px solid var(--gold-lux); outline-offset: 2px }

/* ---- Landing: prova em primeiro lugar ---- */
.lp-hero-grid--prova { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: clamp(36px, 5vw, 72px); align-items: center }
.lp-hero-grid--prova .lp-hero-txt { max-width: 640px }
.lp-hero-grid--prova .lp-hero-ctas { margin-bottom: 0 }
.lp-prova {
  position: relative; display: grid; gap: 20px; padding: 30px 30px 26px; border-radius: 18px; text-align: left;
  background: var(--risco-ouro-escuro) top / 100% 1px no-repeat, rgba(12, 22, 44, .9);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7)
}
.lp-prova-nota { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .12) }
.lp-prova-num { font-family: var(--disp); font-size: 76px; font-weight: 700; line-height: .85; color: #fff; letter-spacing: -1px }
.lp-prova-estrelas { display: flex; gap: 4px; color: var(--gold-lux); font-size: 18px; margin-bottom: 8px }
.lp-prova-estrelas i { animation: lpEstrela .5s var(--ease-out) backwards }
.lp-prova-estrelas i:nth-child(1) { animation-delay: .35s }
.lp-prova-estrelas i:nth-child(2) { animation-delay: .45s }
.lp-prova-estrelas i:nth-child(3) { animation-delay: .55s }
.lp-prova-estrelas i:nth-child(4) { animation-delay: .65s }
.lp-prova-estrelas i:nth-child(5) { animation-delay: .75s }
@keyframes lpEstrela { from { opacity: .15; transform: scale(.7) } }
.lp-prova-qtd { display: block; font-size: var(--fs-ui); color: var(--texto-sobre-navy) }
.lp-prova-cit { margin: 0 }
.lp-prova-cit p { margin: 0 0 12px; font-size: var(--fs-body); font-style: italic; line-height: 1.6; color: var(--texto-claro) }
.lp-prova-cit footer { font-size: var(--fs-meta); color: var(--texto-sobre-navy) }
.lp-prova-cit b { color: #fff; font-weight: 600 }
.lp-prova-link { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: var(--fs-ui); font-weight: 600; color: var(--texto-claro); text-decoration: underline; text-decoration-color: var(--gold-lux); text-underline-offset: 4px; text-decoration-thickness: 1px }
.lp-prova-link i { font-size: 12px; transition: transform .2s var(--ease-out) }
.lp-prova-link:hover { color: #fff }
.lp-prova-link:hover i { transform: translateX(3px) }

/* o cartão de cotação sobe sobre o fim da foto */
.lp-hero:has(.lp-prova) { padding-bottom: 150px }
.lp-form-sec--sobe { padding: 0 0 72px; background: var(--white) }
.lp-form-sec--sobe .lp-form { position: relative; z-index: 2; margin-top: -96px; border: 0; box-shadow: 0 28px 56px -24px rgba(8, 20, 33, .35); scroll-margin-top: 110px }
.lp-form-sec--sobe { scroll-margin-top: 0 }

@media (max-width: 980px) {
  .lp-hero-grid--prova { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .lp-prova { max-width: 560px }
}
@media (max-width: 768px) {
  .lp-hero:has(.lp-prova) { padding-bottom: 96px }
  .lp-prova { padding: 22px 20px 20px; gap: 16px }
  .lp-prova-nota { gap: 14px; padding-bottom: 16px }
  .lp-prova-num { font-size: 56px }
  .lp-prova-estrelas { font-size: 16px; margin-bottom: 6px }
  .lp-form-sec--sobe { padding-bottom: 48px }
  .lp-form-sec--sobe .lp-form { margin-top: -60px }
}
@media (prefers-reduced-motion: reduce) {
  .lp-prova-estrelas i { animation: none }
  .lp-prova-link i { transition: none }
}

/* revisão: estrelas acendem quando a placa aparece, acento dourado,
   sombra mais funda atrás do texto, eixo único no tablet, celular enxuto */
.lp-prova-estrelas i { animation: none; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out) }
.lp-prova.js-estrelas:not(.on) .lp-prova-estrelas i { opacity: .18; transform: scale(.7) }
.lp-prova.on .lp-prova-estrelas i:nth-child(2) { transition-delay: .1s }
.lp-prova.on .lp-prova-estrelas i:nth-child(3) { transition-delay: .2s }
.lp-prova.on .lp-prova-estrelas i:nth-child(4) { transition-delay: .3s }
.lp-prova.on .lp-prova-estrelas i:nth-child(5) { transition-delay: .4s }
.lp-hero-txt h1 .accent-gold { color: var(--gold-lux-soft) }
.lp-hero .hero-overlay {
  background:
    linear-gradient(180deg, rgba(8, 20, 33, .5) 0%, transparent 26%, transparent 66%, rgba(8, 20, 33, .62) 100%),
    linear-gradient(100deg, rgba(8, 20, 33, .95) 0%, rgba(8, 20, 33, .86) 46%, rgba(8, 20, 33, .4) 74%, rgba(8, 20, 33, .2) 100%),
    url('../img/foto-02.webp') center top/cover no-repeat
}
.depo .stars .ico { margin-right: 2px }
@media (max-width: 980px) {
  .lp-prova { width: 100%; max-width: 620px; margin-inline: auto }
}
@media (max-width: 768px) {
  .lp-hero-txt .lead, .lp-prova-link { display: none }
  .lp-hero-grid--prova { gap: 24px }
}
@media (prefers-reduced-motion: reduce) {
  .lp-prova.js-estrelas:not(.on) .lp-prova-estrelas i { opacity: 1; transform: none }
  .lp-prova-estrelas i { transition: none }
}

.lp-hero .lp-padrao { color: var(--texto-claro) }

/* ---- Landing: destinos como letreiro ---- */
.lp-letreiro { display: block; overflow: hidden; padding: 6px 0; margin: -6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) }
.lp-letreiro-trilho { display: flex; gap: 8px; width: max-content; animation: lpLetreiro 26s linear infinite }
.lp-letreiro-trilho .lp-rapido { flex: none }
.lp-letreiro:hover .lp-letreiro-trilho, .lp-letreiro:focus-within .lp-letreiro-trilho, .lp-letreiro:active .lp-letreiro-trilho { animation-play-state: paused }
@keyframes lpLetreiro { to { transform: translateX(calc(-50% - 4px)) } }
@media (prefers-reduced-motion: reduce) { .lp-letreiro-trilho { animation: none } }

/* =====================================================================
   LANDING: COROLLA EM DESTAQUE
   Topo dividido: texto sobre navy à esquerda e a foto real do Corolla
   inteira à direita, sem filtro sobre o carro (só a borda esquerda se
   funde no navy). Formulário e avaliação lado a lado logo abaixo da
   foto. Seção "Conheça o nosso Toyota Corolla" com o detalhe da mesma
   foto e a ficha do serviço.
   ===================================================================== */
.lp-hero--carro { --lp-txt: 540px; isolation: isolate; background: #081421; padding-bottom: 84px }
.lp-hero--carro::after { display: none }
.lp-hero--carro .container { position: static }
.lp-hero-grid--carro { grid-template-columns: minmax(0, var(--lp-txt)) }
.lp-hero-grid--carro .lp-hero-txt { max-width: var(--lp-txt) }
.lp-hero-grid--carro .lead { max-width: 480px }
.lp-hero-grid--carro .lp-hero-ctas { margin-bottom: 20px }
/* a foto começa onde o texto termina: o trecho já transparente do degradê
   (12%) fica sempre 16px depois da coluna de texto, em qualquer largura */
.lp-carro-palco { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: calc((max(22px, (100% - 1280px) / 2 + 22px) + var(--lp-txt) + 16px - 12%) / 0.88); margin: 0 }
.lp-carro-palco img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100% }
.lp-carro-palco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #081421 0%, #081421 6%, rgba(8, 20, 33, .55) 12%, rgba(8, 20, 33, 0) 24%),
    linear-gradient(0deg, rgba(8, 20, 33, .28) 0%, rgba(8, 20, 33, 0) 14%)
}
.lp-nota-estrelas { display: inline-flex; gap: 3px; color: var(--gold-lux); font-size: 14px }
.lp-nota:hover strong { text-decoration: underline; text-underline-offset: 3px }

/* formulário + avaliação, lado a lado logo abaixo da foto */
.lp-form-sec--duo { padding: 56px 0 72px }
.lp-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 28px; align-items: stretch; max-width: 1180px }
.lp-form-sec--duo .lp-form { max-width: none; margin: 0; border: 0; box-shadow: var(--shadow); padding: 30px 30px 24px }
.lp-rota { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px }
.lp-form-sec--duo .lp-prova {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  background: var(--risco-ouro-escuro) top / 100% 1px no-repeat, var(--navy-deep); box-shadow: var(--shadow)
}

/* seção do carro */
.lp-carro { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 76px); align-items: center }
.lp-carro-foto { margin: 0 }
.lp-carro-img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px;
  background: var(--navy-deep); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6)
}
.lp-carro-foto figcaption { margin-top: 12px; font-size: var(--fs-meta); color: var(--mute-d) }
.lp-carro-txt h2 { font-size: clamp(30px, 4.4vw, 46px); margin: 12px 0; color: #fff }
.lp-carro-intro { margin: 0 0 30px; max-width: 50ch; font-size: var(--fs-body); line-height: 1.7; color: var(--texto-sobre-navy) }

@media (max-width: 980px) {
  .lp-hero--carro { padding-bottom: 40px }
  .lp-hero-grid--carro { grid-template-columns: minmax(0, 1fr) }
  .lp-hero-grid--carro .lp-hero-txt { max-width: none }
  .lp-carro-palco { position: relative; z-index: auto; left: auto; margin: 22px -22px 26px; aspect-ratio: 16 / 9; overflow: hidden }
  .lp-carro-palco img { object-position: 100% 92% }
  .lp-carro-palco::after { background: linear-gradient(0deg, rgba(8, 20, 33, .22) 0%, rgba(8, 20, 33, 0) 18%) }
  .lp-duo { grid-template-columns: minmax(0, 1fr); max-width: 620px }
  .lp-carro { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 620px }
}
@media (max-width: 768px) {
  .lp-hero-grid--carro .lp-hero-fatos { display: none }
  .lp-form-sec--duo { padding: 36px 0 48px }
  .lp-form-sec--duo .lp-form { padding: 22px 18px 18px }
  .lp-form-sec--duo .lp-prova-link { display: inline-flex }
}
@media (min-width: 981px) and (max-width: 1320px) {
  .lp-hero--carro { --lp-txt: 460px }
  .lp-hero-grid--carro h1 { font-size: 48px }
  .lp-hero-grid--carro .lp-padrao { font-size: 21px }
}
@media (max-width: 600px) {
  .lp-carro-palco { aspect-ratio: 16 / 10; margin: 18px -22px 22px }
  .lp-rota { grid-template-columns: minmax(0, 1fr); gap: 12px }
  .lp-carro-txt .btn { width: 100%; justify-content: center }
}

/* =====================================================================
   LANDING: PACOTES (Básico, Padrão, Premium)
   Sem preço publicado: cada cartão leva à cotação e marca o pacote no
   formulário. O Premium usa a linguagem do cartão em destaque do site
   (navy com borda dourada e selo).
   ===================================================================== */
.lp-pacotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; max-width: 1080px; margin: 0 auto }
.lp-pacote {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px 28px 28px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out)
}
.lp-pacote:hover { transform: translateY(-4px); box-shadow: var(--shadow) }
.lp-pacote h3 { margin: 0; font-family: var(--disp); font-size: 30px; font-weight: 700; color: var(--navy-2) }
.lp-pacote > ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; align-content: start; flex: 1 }
.lp-pacote > ul > li { display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-body-sm); color: var(--ink) }
.lp-pacote > ul > li > i { flex: none; color: var(--gold-ink); font-size: 15px }
.lp-pacote-valor { margin: 0; font-size: var(--fs-meta); color: var(--mute) }
.lp-pacote-cta { width: 100%; justify-content: center }
.lp-pacote--premium { background: linear-gradient(165deg, var(--navy-2) 0%, var(--navy-deep) 100%); background-color: var(--navy-deep); border-color: var(--gold-lux) }
.lp-pacote--premium h3 { color: #fff }
.lp-pacote--premium > ul { border-top-color: rgba(255, 255, 255, .14) }
.lp-pacote--premium > ul > li { color: var(--texto-claro) }
.lp-pacote--premium > ul > li > i { color: var(--gold-lux) }
.lp-pacote--premium .lp-pacote-valor { color: var(--texto-sobre-navy) }
.lp-pacote-selo {
  position: absolute; top: -12px; left: 28px; padding: 4px 12px; border-radius: 30px;
  background: var(--gold-lux); color: var(--navy-2); font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase
}
.lp-pacote-itens { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px }
.lp-pacote-itens li { position: relative; padding-left: 14px; font-size: var(--fs-ui); color: var(--texto-sobre-navy) }
.lp-pacote-itens li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-lux) }
/* linha do pacote no formulário */
.lp-pacote-escolha legend { margin-bottom: 8px }
.lp-dica:empty { display: none }
.lp-pacotes-sec .section-title p { margin-top: 18px }
.lp-form .lp-dica { margin-top: 2px }
@media (max-width: 980px) {
  .lp-pacotes { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 28px }
}
@media (prefers-reduced-motion: reduce) {
  .lp-pacote { transition: none }
  .lp-pacote:hover { transform: none }
}

/* ---- Landing: para quem é indicado (centralizado, 4 lado a lado) ---- */
.lp-publico-sec .section-title p { margin-top: 18px }
.lp-publico-lista { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px }
.lp-publico-lista > li { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center }
.lp-publico-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--navy-deep); color: var(--gold-lux); font-size: 20px }
.lp-publico-lista h3 { margin: 4px 0 8px; font-family: var(--body); font-size: 17px; font-weight: 700; letter-spacing: .2px; color: var(--navy-2) }
.lp-publico-lista p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--mute) }
@media (max-width: 1100px) {
  .lp-publico-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; gap: 40px 32px }
}
@media (max-width: 600px) {
  .lp-publico-lista { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 34px }
}

/* ---- Landing: formulário completo (nome, passageiros e bagagem) ---- */
.lp-detalhes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px }
.lp-seg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.lp-bag .lp-seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 600px) {
  .lp-detalhes { grid-template-columns: minmax(0, 1fr); gap: 12px }
}

/* ---- Landing: seguro passageiro em destaque ---- */
.lp-hero-provas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px }
.lp-seguro-nota { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-ui); color: var(--texto-sobre-navy) }
.lp-seguro-nota i { color: var(--gold-lux); font-size: 15px }
.lp-seguro-nota strong { color: #fff; font-weight: 600 }
.lp-seguro { display: flex; align-items: center; gap: 14px; max-width: 46ch; margin: -10px 0 28px; padding: 14px 18px 14px 14px; border: 1px solid rgba(198, 161, 91, .45); border-radius: 12px; background: rgba(8, 20, 33, .28) }
.lp-seguro-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--navy-deep); color: var(--gold-lux); font-size: 17px }
.lp-seguro p { margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: var(--texto-sobre-navy) }
.lp-seguro strong { display: block; color: #fff; font-size: var(--fs-body); font-weight: 600 }

/* ---- Landing: redes sociais no rodapé ---- */
.lp-redes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 0 0 18px }
.lp-redes-tit { margin-right: 4px; font-size: var(--fs-meta); color: var(--texto-sobre-navy) }
.lp-rodape .lp-redes a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); color: var(--texto-claro); font-size: 17px; text-decoration: none;
  transition: border-color .2s, color .2s
}
.lp-rodape .lp-redes a:hover { border-color: var(--gold-lux); color: var(--gold-lux) }
@media (prefers-reduced-motion: reduce) { .lp-rodape .lp-redes a { transition: none } }

/* ---- Rodapé da home simplificado: marca com redes sociais + contato ----
   As colunas de navegação e serviços saíram (pedido do dono, 2026-10-07);
   as regras de 5 colunas acima não valem para esta grade. */
.footer-grid.footer-grid--simples { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; max-width: 980px }
.footer-grid--simples .footer-brand, .footer-grid--simples .footer-contato { grid-column: auto }
.footer-bottom a { color: var(--navy-2); text-decoration: underline; text-underline-offset: 3px }
@media (max-width: 768px) {
  .footer-grid.footer-grid--simples { grid-template-columns: minmax(0, 1fr); gap: 32px }
}

/* =====================================================================
   FROTA: destaque nos cartões (home e landing)
   Ao entrar na tela, cada carro "chega" ao cartão, deslizando da esquerda
   em sequência. Com o mouse, o cartão sobe, a borda ganha um toque
   dourado, o carro avança um pouco e uma linha dourada cresce sob o nome.
   Sem mouse (celular), a linha dourada fica visível. Só transform e
   opacity; com movimento reduzido, nada se mexe.
   ===================================================================== */
.card-frota.vis .frota-img-container img { animation: frotaChega .9s var(--ease-out) backwards; animation-delay: calc(var(--reveal-delay, 0ms) + 180ms) }
@keyframes frotaChega { from { opacity: 0; transform: translateX(-36px) } }
.frota-img-container img { transition: transform .5s var(--ease-out) }
.card-frota .frota-img-container { background: #fff }
.frota-info h3 { position: relative; padding-bottom: 10px; margin-bottom: 10px }
.frota-info h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; border-radius: 2px;
  background: var(--gold-lux); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out)
}
.card-frota:hover { border-color: rgba(198, 161, 91, .6) }
.card-frota:hover .frota-img-container img { transform: scale(1.05) translateX(6px) }
.card-frota:hover .frota-info h3::after { transform: scaleX(1) }
@media (hover: none) { .frota-info h3::after { transform: scaleX(1) } }
@media (prefers-reduced-motion: reduce) {
  .card-frota.vis .frota-img-container img { animation: none }
  .frota-img-container img, .frota-info h3::after { transition: none }
  .card-frota:hover .frota-img-container img { transform: none }
}

/* =====================================================================
   FORMULÁRIO DE COTAÇÃO DA HOME — visual profissional (2026-10-08)
   No computador vira uma janela central de 580px (antes ocupava a tela
   inteira); no celular continua a gaveta que sobe de baixo. Faixa dourada
   no topo, título em Cormorant, campos iguais aos da landing, veículos
   com as fotos da frota, pagamento com ícones navy (sem fundos coloridos),
   "Próximo" no azul de ação e "Enviar" no verde do WhatsApp.
   ===================================================================== */
.solicit-drawer { background: linear-gradient(var(--gold-lux), var(--gold-lux)) top / 100% 3px no-repeat, #fff }
.solicit-header { padding: 16px 24px 2px }
.solicit-header h3 { gap: 10px; font-family: var(--disp); font-size: 26px; font-weight: 700; letter-spacing: .3px; color: var(--navy-2) }
.solicit-header h3 i { color: var(--gold-lux); font-size: 18px }
.solicit-sub { margin: 0; padding: 0 24px 4px; font-size: var(--fs-ui); color: var(--mute) }
.solicit-progress { padding: 14px 24px 18px }
.sp-line.done { background: var(--gold-lux) }
.sp-item.done .sp-num { background: var(--navy-2) }
.solicit-step { padding: 0 24px }
.solicit-field-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .3px; color: var(--navy-2) }
.solicit-field { margin-bottom: 16px }
.solicit-drawer .solicit-field label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .3px; color: var(--navy-2) }
.solicit-field input, .solicit-field select {
  height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; font-size: var(--fs-ui);
  transition: border-color .15s, box-shadow .15s
}
.solicit-field select {
  padding-right: 38px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E2455' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px
}
.solicit-field input:focus, .solicit-field select:focus { border-color: var(--navy-3); box-shadow: 0 0 0 3px rgba(27, 60, 92, .12) }
.solicit-field input.error, .solicit-field select.error { border-color: var(--erro) }
@media (pointer: coarse) { .solicit-field input, .solicit-field select { font-size: 16px } }
.tipo-btn { min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px }
.tipo-btn.active { box-shadow: 0 6px 16px -10px rgba(8, 20, 33, .6) }
.tipo-btn.active .tipo-svg { transform: none; filter: none }
.pix-aviso { border-width: 1px }
.solicit-drawer .pagamento-agendada { margin-bottom: 18px }

/* veículos com as fotos da frota */
.solicit-drawer .veiculo-grid { gap: 12px }
.solicit-drawer .veiculo-card {
  align-items: stretch; gap: 2px; padding: 10px 12px 12px; border: 1px solid var(--line); text-align: left; background: #fff;
  transition: border-color .15s, box-shadow .15s, background-color .15s
}
.solicit-drawer .veiculo-card:hover { border-color: var(--navy-3) }
.v-foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; margin: 0 0 8px }
.solicit-drawer .veiculo-card strong { font-size: var(--fs-body-sm); color: var(--navy-2) }
.solicit-drawer .veiculo-card small { font-size: var(--fs-meta); color: var(--mute) }
.solicit-drawer .v-disp-badge { z-index: 1 }
.solicit-drawer .veiculo-card:has(input:checked) { transform: none; border-color: var(--navy-2); box-shadow: inset 0 0 0 1px var(--navy-2); background: rgba(42, 127, 192, .05) }
.solicit-drawer .veiculo-card:has(input:focus-visible), .solicit-drawer .pagamento-card:has(input:focus-visible) { outline: 3px solid var(--gold-lux); outline-offset: 2px }

/* pagamento: ícones navy, sem fundos coloridos */
.solicit-drawer .pagamento-card { border: 1px solid var(--line); border-radius: 10px }
.solicit-drawer .pagamento-card:hover { border-color: var(--navy-3) }
.solicit-drawer .p-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(30, 36, 85, .06); box-shadow: none }
.solicit-drawer .p-icon::after { display: none }
.solicit-drawer .p-icon svg { color: var(--navy-2) }
.solicit-drawer .pagamento-card:hover .p-icon, .solicit-drawer .pagamento-card:has(input:checked) .p-icon { transform: none; box-shadow: none }
.solicit-drawer .pagamento-card:has(input:checked), .solicit-drawer .pagamento-sel { border-color: var(--navy-2); box-shadow: inset 0 0 0 1px var(--navy-2); background: rgba(42, 127, 192, .05) }

/* botões */
.btn-s-next { background: var(--blue); border-radius: 9px }
.btn-s-next:hover { background: #1A4CA0 }
.btn-s-send { background: var(--whatsapp-botao); border-radius: 9px }
.btn-s-send:hover { background: var(--whatsapp-botao-hover) }
.btn-s-back { border-radius: 9px }

/* computador: janela central em vez da gaveta na largura toda */
@media (min-width: 769px) {
  .solicit-drawer {
    top: 50%; bottom: auto; left: 50%; right: auto; width: min(580px, calc(100vw - 48px)); max-height: min(780px, calc(100vh - 48px));
    padding: 0; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; visibility: hidden; transform: translate(-50%, -47%) scale(.98);
    transition: transform .3s var(--ease-out), opacity .2s, visibility 0s linear .3s;
    box-shadow: 0 40px 80px -30px rgba(8, 20, 33, .55)
  }
  .solicit-drawer.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: transform .35s var(--ease-out), opacity .25s }
  .solicit-handle-bar { display: none }
  .solicit-header { padding-top: 22px }
  #solicitForm { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 6px }
  .solicit-footer { position: static; padding: 14px 24px; z-index: auto }
  .solicit-disclaimer { padding: 0 24px 18px }
}
@media (prefers-reduced-motion: reduce) {
  .solicit-drawer, .solicit-drawer.open { transition: none }
}
/* viagem imediata: só o Executivo aparece no passo do veículo */
.solicit-drawer .veiculo-card[hidden] { display: none }
.solicit-drawer .veiculo-grid.veiculo-grid--um { grid-template-columns: minmax(0, 260px) }
.solicit-dica-imediata { margin: -4px 0 12px; font-size: var(--fs-meta); color: var(--mute) }
.solicit-dica-imediata[hidden] { display: none }