:root {
  /* Rebranding Cotar Frete (2026-10-26) — tema "lime" do protótipo
     escolhido pela cliente. Mantidos os MESMOS nomes de variável do tema
     antigo (preto/dourado), só trocando os VALORES — assim toda regra que
     já usava var(--preto)/var(--dourado)/etc no arquivo inteiro atualiza
     sozinha, sem precisar editar cada uma à mão. */
  --preto: #101b21;        /* era #0b0b0b — fundo principal, agora navy bem escuro */
  --preto-suave: #18272e;  /* era #161616 — fundo de cards */
  --soft: #1c2a31;         /* novo — fundo de seções alternadas (diferenciais, mandala) */
  --dourado: #d2f36e;      /* era #d4af37 — cor de destaque, agora verde-limão */
  --dourado-claro: #d2f36e;/* era #f3d878 — sem variante clara no tema novo, mesma cor */
  /* pedido da cliente 2026-10-26: botões arredondados com brilho 3D, igual
     a referência da Cargo Porto — volta a ser um gradiente (não mais cor
     chapada), só que em tons de verde-limão em vez de dourado. */
  --dourado-gradiente: linear-gradient(180deg, #e8ffa8 0%, #d2f36e 55%, #b7e657 100%);
  --texto-claro: #f4f7f3;  /* era #f5f5f2 */
  --texto-suave: #a8b6bd;  /* era #cfcfcf */
  --cinza-fundo: #101b21;  /* era #f7f6f3 — fundo de inputs, agora escuro (mesmo tom da página) */
  --cinza-borda: #35434b;  /* era #e4e1d8 */
  --onaccent: #14201b;     /* novo — texto escuro sobre botão/destaque verde-limão */
  --radius: 0;             /* era 12px — tema novo usa cantos retos */
  --sombra: 0 18px 50px rgba(0, 0, 0, 0.35); /* era 0 10px 30px rgba(0,0,0,.12) — sombra escura */
}

* { box-sizing: border-box; }

html { max-width: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif; /* pedido da cliente 2026-10-26: voltar pra fonte do site antigo da Cargo Porto, mais harmônica que Arial puro */
  color: var(--texto-claro);
  background: var(--cinza-fundo);
  line-height: 1.5;
  overflow-x: hidden;
  max-width: 100%;
}

h1, h2, h3 { margin: 0 0 0.4em; line-height: 1.15; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px; /* pedido da cliente 2026-10-26: arredondado, igual referência da Cargo Porto */
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-dourado {
  background: var(--dourado-gradiente);
  color: var(--onaccent);
  box-shadow: 0 6px 18px rgba(180, 230, 87, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--dourado);
  color: var(--dourado-claro);
}
.btn-bloco { width: 100%; justify-content: center; font-size: 1.05rem; padding: 15px; }

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--preto);
  border-bottom: 1px solid var(--cinza-borda);
}
#topo, #solucoes, #cotacao, #sobre, #contato, #como, #quando { scroll-margin-top: 78px; }
.header .container {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 10px 20px;
}
.marca { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.marca img { height: 46px; width: auto; }
.nav { display: flex; gap: 26px; }
.nav a { color: var(--texto-claro); font-weight: 600; font-size: 0.95rem; opacity: 0.85; }
.nav a:hover { opacity: 1; color: var(--dourado-claro); }
.header-cta { display: flex; align-items: center; gap: 18px; }
.menu-toggle { display: none; background: none; border: none; color: var(--texto-claro); font-size: 1.6rem; cursor: pointer; }

/* Hero — pedido da cliente 2026-10-26: tirar a foto do caminhão (tinha a
   marca antiga "CargoPorto Express" pintada nela) e colocar o card de
   cotação no lugar, lado a lado com o texto, igual o layout do protótipo
   (2 colunas: texto à esquerda, card à direita). O card de cotação
   (.simulador) agora é a 2ª coluna do grid do hero, não mais uma seção
   separada flutuando por cima com margem negativa. */
.hero {
  background: var(--preto);
  color: var(--texto-claro);
  /* Embaixo reduzido (era 60px nos dois lados) — pedido 2026-10-27:
     "sobe um pouquinho esse item 'Para a sua próxima demanda' para ele
     aparecer junto a página inicial" — menos vão entre o rodapé do hero
     e a faixa logo abaixo dele. */
  padding: 60px 0 28px;
}
.hero-grid {
  display: grid;
  /* Histórico de ajustes 2026-10-27 (várias rodadas, ver memória do
     projeto pro relato completo): 1.1fr/1fr → 1.3fr/0.95fr →
     1.5fr/0.85fr → 1.7fr/0.7fr → 1.3fr/1fr → agora ligeiramente MAIS
     larga de novo pro simulador, porque "Valor mercadoria (R$)" (o
     label mais longo das fileiras de 3 campos) ainda quebrava em 2
     linhas em 1.3fr/1fr. O parágrafo do título (`.hero p.lead`) já tem
     `max-width:480px` — sobra espaço na coluna do título de qualquer
     jeito, então dar um pouco mais pro simulador não "aperta" o
     parágrafo, só o H1 (que precisa continuar cabendo "Vamos
     movimentar." numa linha só — testado nos 2 extremos). */
  grid-template-columns: 1.15fr 1.15fr;
  gap: 50px;
  /* Era "center": com os hero-badges/hero-route-art removidos (abaixo),
     a coluna do título ficou mais curta que o card do simulador —
     "center" deixaria o card ainda mais alto que o título, sobrando
     espaço vazio embaixo em vez de em cima. "start" alinha os dois pelo
     topo, sem vão nenhum acima do card — pedido da cliente: "esta um
     espaço enorme acima da tabela... suba ela". */
  align-items: start;
}
.hero h1 { font-size: 3.4rem; line-height: 1.08; color: var(--texto-claro); letter-spacing: -1.5px; }
.hero h1 .destaque { color: var(--dourado-claro); }
.hero p.lead { color: var(--texto-suave); font-size: 0.92rem; max-width: 480px; }

/* Faixa "Para a sua próxima demanda" — substituiu hero-badges/
   hero-route-art (removidos a pedido da cliente 2026-10-27, "anexo 2")
   por essa faixa fina de atalhos (pedido "inclua os itens igual o anexo
   3"), igual uma régua divisória entre o hero e a próxima seção. */
.faixa-demanda {
  background: var(--preto);
  border-top: 1px solid var(--cinza-borda);
  border-bottom: 1px solid var(--cinza-borda);
}
.faixa-demanda-conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
}
.faixa-demanda-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.faixa-demanda-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--texto-claro);
}
.faixa-demanda-link:hover { color: var(--dourado-claro); }
.faixa-demanda-link .seta { color: var(--dourado-claro); }

/* Simulador (card de cotação) — tamanho/fontes reduzidos 2026-10-27
   (pedido da cliente: "precisa reduzir as fontes e o quadro do
   simulador precisa ser menor"), pra caber inteiro ao lado do título
   sem dominar a tela. ALTURA voltou pro valor desta rodada (a rodada
   seguinte, que reduzia ainda mais os campos, foi REVERTIDA a pedido da
   cliente — "volte a altura que estava" — o pedido era de LARGURA, não
   altura; ver mais abaixo no arquivo a redução de largura de verdade,
   em `.hero-grid`). */
.simulador {
  background: var(--preto-suave);
  border-top: 3px solid var(--dourado);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 22px;
  /* CAUSA RAIZ encontrada 2026-10-27 do card não encolher mesmo mudando
     o `grid-template-columns` do `.hero-grid`: por padrão um item de
     grid tem `min-width: auto`, que respeita o min-content do conteúdo
     interno (aqui, as 3 fileiras de campos/selects) — isso faz o
     navegador IGNORAR a fração `fr` configurada e esticar a coluna além
     dela sempre que o conteúdo não coubesse no espaço proporcional.
     `min-width: 0` libera o grid pra respeitar o `fr` de verdade; os
     campos (`width:100%`) encolhem/quebram normalmente dentro do espaço
     que sobrar. */
  min-width: 0;
}
.simulador-titulo { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.simulador-titulo h2 { font-size: 1.15rem; }
.simulador-titulo p { font-size: 0.82rem; }

/* 3 selos (Carga segura/Atendimento/Cobertura) — pedido 2026-10-27,
   corrigido na sequência: "os 3 selos não devem ficar dentro do card e
   sim abaixo da frase [lead do hero]... nesse campo vazio, retire de
   dentro do card". Primeira tentativa colocou dentro de `.simulador`
   (`.simulador-selos`, lado a lado, compactos) — ela pediu pra tirar de
   lá e usar o espaço vazio que sobrava na COLUNA DO TÍTULO (embaixo do
   parágrafo `.lead`), onde fica mais solto — por isso `.hero-selos`
   empilha verticalmente (`flex-direction:column`), igual os antigos
   `.hero-badges` que ficavam exatamente nesse lugar antes de serem
   removidos numa rodada anterior. Reaproveita o mesmo `.selo` (ícone+
   texto) das duas tentativas, só com ícone/fonte um pouco maiores aqui
   (mais espaço disponível que dentro do card estreito). */
/* Grid de 3 colunas fixas (não flex) — pedido 2026-10-27: "os 3 lado a
   lado, mas deixe assim com quebra de linha" (print de referência onde
   "Carga segura e monitorada" quebra em 2 linhas mas os 3 continuam na
   MESMA fileira) — com `flex-wrap` o 3º item as vezes descia pra uma
   2ª linha quando o texto não cabia; grid de 3 colunas nunca quebra a
   FILEIRA, só o texto de cada item quebra dentro da própria coluna. */
.hero-selos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; margin-top: 62px; }
/* min-width:0 no item de grid — mesma pegadinha já documentada acima
   pro `.simulador` (min-content do texto "Em São Paulo, Grande SP..."
   forçaria a coluna a alargar além do 1fr se não tivesse isso, o que
   empurraria o layout e impediria o texto de quebrar em 2 linhas). */
.hero-selos .selo { min-width: 0; }
.hero-selos .selo svg { width: 22px; height: 22px; }
.hero-selos .selo span { font-size: 0.88rem; }
.selo { display: flex; align-items: center; gap: 10px; }
.selo svg { width: 16px; height: 16px; color: var(--dourado-claro); flex-shrink: 0; }
.selo span { font-size: 0.72rem; font-weight: 600; color: var(--texto-claro); line-height: 1.25; }

/* .form-grid empilha as "linhas" verticalmente; cada .form-linha-N é o
   grid de verdade (2 ou 3 campos lado a lado) — separado assim (em vez
   de um grid só com spans) pra Origem/Destino (2 campos) e as 2 linhas
   novas de 3 campos (Tipo de carga/Peso/Pallets e Data/Valor/Veículo,
   pedido 2026-10-27) nunca se misturarem na mesma fileira por acidente. */
.form-grid { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.form-linha { display: grid; gap: 12px; }
.form-linha-2 { grid-template-columns: repeat(2, 1fr); }
.form-linha-3 { grid-template-columns: repeat(3, 1fr); }
/* min-width:0 necessário pelo mesmo motivo do `.simulador` acima — os
   itens de `.form-linha-2`/`.form-linha-3` (grids aninhados) também
   respeitavam o min-content do conteúdo interno (o widget do Google
   Places em Origem/Destino, principalmente) e podiam transbordar pra
   fora do card quando o card em si ficou mais estreito. */
.campo { display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; }
.campo.full { grid-column: 1 / -1; }
.campo label { font-weight: 600; font-size: 0.78rem; display: flex; align-items: center; color: var(--texto-claro); }
.campo input, .campo select, .campo textarea {
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--cinza-fundo);
  color: var(--texto-claro);
  color-scheme: dark;
  width: 100%;
  max-width: 100%;
}
/* Pedido 2026-10-27: os "Ex.: 6000"/"Ex.: 12" etc. chamavam atenção
   demais (mesmo cinza-claro do resto do texto suave) — opacity reduzida
   só no placeholder, pra ficar visivelmente mais discreto sem mudar a
   cor usada em mais nenhum outro lugar (var(--texto-suave) continua
   igual pra tudo o mais). */
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-suave); opacity: 0.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--dourado);
  box-shadow: 0 0 0 3px rgba(210, 243, 110, 0.18);
}
/* Origem/Destino (gmp-place-autocomplete, abaixo) viraram altura FIXA
   igual aos outros campos — pedido 2026-10-27: "veja que origem e
   destino estão enorme, elas precisam ficar iguais as demais". O
   componente do Google Maps (Material) não encolhe só com min-height;
   precisa travar a altura de verdade (ver `.gmp-slot` e o `::part(input)`
   mais abaixo). */
/* `overflow:hidden` tirado 2026-10-27: cortava a lista de sugestões de
   endereço do próprio componente (ela é renderizada dentro do mesmo
   elemento, então ficava escondida junto com o excesso de altura). A
   altura de 38px já é garantida pelo `height:100%` em cascata abaixo. */
.gmp-slot { display: block; width: 100%; height: 38px; }
.gmp-slot gmp-place-autocomplete {
  display: block; width: 100%; height: 100%;
  color-scheme: dark;
  --gmp-mat-color-primary: var(--dourado);
  --gmp-mat-color-outline: var(--cinza-borda);
  --gmp-mat-color-on-surface-variant: var(--texto-suave);
  --gmp-mat-color-surface: var(--cinza-fundo);
  --gmp-mat-color-on-surface: var(--texto-claro);
  border: 1px solid var(--cinza-borda) !important;
  border-radius: 4px;
  background: var(--cinza-fundo);
}
.gmp-slot gmp-place-autocomplete::part(input) {
  border-color: var(--cinza-borda); background: var(--cinza-fundo); color: var(--texto-claro);
  height: 100%;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.85rem;
}
.gmp-slot gmp-place-autocomplete::part(focus-ring) {
  border-color: var(--dourado) !important;
}
.form-acoes { grid-column: 1 / -1; margin-top: 4px; }
.form-acoes .btn-bloco { padding: 11px; font-size: 0.9rem; }
/* Botão "Limpar" (vassourinha), 2026-10-28: ao lado do botão principal,
   só ícone — o "Limpar" só aparece como tooltip (title) ao passar o
   mouse, pedido explícito da cliente pra não precisar de descrição. */
.form-acoes-linha { display: flex; align-items: stretch; gap: 8px; }
.form-acoes-linha .btn-bloco { flex: 1; width: auto; }
.btn-limpar {
  flex-shrink: 0;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--cinza-borda);
  border-radius: 999px;
  color: var(--texto-suave);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-limpar svg { width: 18px; height: 18px; }
.btn-limpar:hover { border-color: var(--dourado); color: var(--dourado-claro); }
.aviso-privacidade { text-align: center; font-size: 0.78rem; color: var(--texto-suave); margin-top: 8px; }

/* Dropdown nativo do Google Places Autocomplete (widget antigo — hoje o
   site usa PlaceAutocompleteElement, que não usa essa classe; mantido
   tematizado por segurança caso o navegador caia num fallback). */
.pac-container {
  font-family: inherit;
  border-radius: 4px;
  border: 1px solid var(--cinza-borda);
  background: var(--preto-suave);
  color: var(--texto-claro);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
  margin-top: 4px;
}
.pac-item { padding: 8px 10px; font-size: 0.86rem; cursor: pointer; color: var(--texto-claro); }
.pac-item:hover { background: rgba(210, 243, 110, 0.12); }
.pac-item-selected { background: rgba(210, 243, 110, 0.16); }
.pac-icon { display: none; }
.pac-item-query { font-size: 0.9rem; }

.resultado {
  margin-top: 18px;
  border-top: 1px dashed var(--cinza-borda);
  padding-top: 16px;
  display: none;
}
.resultado.ativo { display: block; }
.resultado-erro { color: #ff6b5e; font-weight: 600; font-size: 0.85rem; }
.resultado-unico { display: flex; justify-content: center; }

/* Cards de resposta também reduzidos (mesmo pedido 2026-10-27) —
   padding e fontes menores, só o card de resultado em si, não o
   .btn-bloco inteiro (ele é usado em outros lugares da página). */
.resultado-cotacao {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 100%; max-width: 480px;
  padding: 20px 24px;
  text-align: center;
}

.resultado-label {
  display: flex; align-items: center; gap: 8px;
  color: var(--dourado); font-weight: 700; letter-spacing: 0.06em; font-size: 1.02rem; text-transform: uppercase;
}
.resultado-label svg { width: 22px; height: 22px; flex-shrink: 0; }

.resultado-veiculo-cap { color: var(--texto-suave); font-size: 0.76rem; margin-top: 2px; }
.resultado-preco { font-size: 1.85rem; font-weight: 800; color: var(--dourado); margin-top: 8px; }
.resultado-preco-nota { font-size: 0.66rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.resultado-rota { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 16px; font-size: 0.8rem; color: var(--texto-claro); }
.resultado-rota .distancia { color: var(--texto-suave); font-size: 0.72rem; }
.resultado-nota { font-size: 0.7rem; color: var(--texto-suave); margin-top: 10px; }
.resultado-cotacao .btn-bloco { width: 100%; font-size: 0.92rem; padding: 11px; }

.resultado-alerta { font-size: 0.82rem; color: var(--texto-claro); font-weight: 600; margin-top: 10px; display: flex; gap: 6px; align-items: flex-start; }

/* Frota */
.secao { padding: 70px 0; }
.secao-cabecalho { max-width: 820px; margin-bottom: 36px; }
.frota-subtitulo { color: var(--texto-suave); white-space: nowrap; }
.secao-titulo-grande { font-size: 2.6rem; line-height: 1.14; }
.secao-titulo-grande .destaque { color: var(--dourado); }
/* `display:block` necessário pra `margin-bottom` funcionar — o `.eyebrow`
   é usado como <span> na maioria das seções (só o do hero é <div>), e
   span é inline por padrão (margem vertical não tem efeito nele sem
   isso). Pedido 2026-10-27: "dê um espaço pequeno entre o título...
   e a descrição abaixo... em todos os títulos da página" — como é uma
   classe compartilhada, 1 só ajuste aqui já cobre o hero + as 4 seções
   que usam o mesmo padrão eyebrow+título. */
.eyebrow { display: block; color: var(--dourado); font-weight: 700; letter-spacing: 0.08em; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 10px; }
.frota-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
/* Pedido da cliente 2026-10-26: trocar fotos reais pelo mesmo ícone
   genérico do protótipo (um só SVG repetido pra todos os veículos),
   sem descrição/capacidade — só ícone + nome, igual o modelo. */
.frota-card {
  display: block;
  background: var(--preto-suave); border: 1px solid var(--cinza-borda); border-radius: 5px;
  text-align: center; padding: 22px 8px; font-size: 0.85rem;
  color: var(--texto-claro); font-weight: 600;
  transition: border-color 0.15s ease;
}
.frota-card:hover { border-color: var(--dourado); }
.frota-card svg { width: 70px; height: 40px; color: var(--texto-claro); display: block; margin: 0 auto 14px; }

/* Diferenciais */
.diferenciais { background: var(--soft); color: var(--texto-claro); padding-top: 36px; }
.diferenciais-cabecalho { max-width: 900px; margin: 0 0 44px auto; text-align: right; }
.diferenciais-subtitulo { color: var(--texto-suave); white-space: nowrap; }
.diferenciais-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; text-align: center; }
.diferencial { padding: 0 20px; position: relative; }
.diferencial:not(:last-child)::after {
  content: ""; position: absolute; top: 6px; right: 0; bottom: 6px; width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.diferencial .icone {
  width: 60px; height: 60px; margin: 0 auto 14px;
  color: var(--dourado-claro);
  display: flex; align-items: center; justify-content: center;
}
.diferencial .icone svg { width: 46px; height: 46px; }
.diferencial h3 { font-size: 1.05rem; }
.diferencial p { color: var(--texto-suave); font-size: 0.85rem; }
/* Como funciona (passos) */
.passos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 12px; }
.passo { padding: 20px 0; border-top: 1px solid var(--cinza-borda); }
.passo-num { font-size: 0.78rem; color: var(--dourado); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.passo h3 { font-size: 1.2rem; margin: 14px 0 8px; }
.passo p { font-size: 0.88rem; color: var(--texto-suave); margin: 0; line-height: 1.7; }

/* Quando contar com a Cotar Frete (casos de uso) */
.casos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 12px; }
.caso { border-bottom: 1px solid var(--cinza-borda); padding-bottom: 20px; }
.caso-icone { color: var(--dourado); font-size: 1.4rem; display: block; margin-bottom: 8px; }
.caso h3 { font-size: 1.05rem; margin: 0 0 6px; }
.caso p { font-size: 0.85rem; color: var(--texto-suave); margin: 0; line-height: 1.6; }

/* FAQ */
.faq-secao { background: var(--soft); padding-bottom: 36px; }
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 50px; align-items: start; }
.faq-lista details { border-bottom: 1px solid var(--cinza-borda); padding: 18px 0; }
.faq-lista summary { cursor: pointer; font-size: 1rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; color: var(--texto-claro); }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: "+"; color: var(--dourado); font-weight: 700; }
.faq-lista details[open] summary::after { content: "\2013"; }
.faq-lista details p { color: var(--texto-suave); font-size: 0.9rem; line-height: 1.8; margin: 12px 0 0; }

/* CTA de fechamento (fundo chapado verde-limão, igual o tema do protótipo) */
.fechamento { background: var(--dourado-gradiente); color: var(--onaccent); padding: 55px 0; }
.fechamento-caixa { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.fechamento h2 { font-size: 1.9rem; margin: 0 0 8px; }
.fechamento p { color: #334325; margin: 0; }
.btn-fechamento { background: var(--preto); color: var(--texto-claro); }
/* Botão "Simular meu frete agora" + ícones de WhatsApp/e-mail lado a
   lado — pedido 2026-10-27: "Deixe o ícone Iniciar cotação e ao lado os
   botões de whatsapp e e-mail... Retire o fundo preto, deixe apenas o
   ícone" (o card escuro `.card-b2b.card-fale-time` que envolvia os
   ícones foi removido, ver comentário mais abaixo — ficaram só os
   círculos soltos direto no fundo lime do `.fechamento`). */
.fechamento-acoes { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* B2B + Rastreio (card-rastreio/rastreio-* ficam sem uso no HTML hoje —
   removido a pedido da cliente em 2026-10-01, CSS deixado de propósito
   pra restaurar rápido depois; ver memória do projeto). `.card-b2b`/
   `.tag`/`.coluna-contato`/`.card-fale-time` TAMBÉM ficaram sem uso
   2026-10-27 — a seção "Fretes recorrentes" (único lugar que usava
   `.card-b2b`/`.coluna-contato`) foi excluída a pedido da cliente, e o
   card escuro "Fale com nosso time" (`.card-fale-time`) foi removido do
   `.fechamento` (ver `.fechamento-acoes` acima) — mesmo critério:
   deixar a CSS pronta pra restaurar rápido, não apagar. */
.duo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; }
.card-b2b, .card-rastreio { border-radius: var(--radius); padding: 30px; color: var(--texto-claro); }
.card-b2b {
  background: var(--preto-suave);
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}
.card-b2b .tag { color: var(--dourado-claro); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.card-b2b ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.card-b2b li { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.coluna-contato { display: flex; flex-direction: column; gap: 20px; }
.card-fale-time { gap: 16px; }
.contato-icones { display: flex; gap: 16px; }
.contato-icone-btn {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--dourado-gradiente); color: var(--onaccent);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(180, 230, 87, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.15s ease;
}
.contato-icone-btn:hover { transform: translateY(-2px); }
.contato-icone-btn svg { width: 24px; height: 24px; }
.card-rastreio { background: var(--preto-suave); }
.rastreio-form { display: flex; gap: 8px; margin-top: 16px; }
.rastreio-form input {
  flex: 1; border-radius: 4px; border: 1px solid var(--cinza-borda); background: var(--cinza-fundo); color: var(--texto-claro); padding: 11px 12px;
}
.rastreio-nota { font-size: 0.78rem; color: var(--texto-suave); margin-top: 10px; }

/* Footer */
.footer { background: var(--preto); color: var(--texto-suave); padding: 40px 0 20px; }
.footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
.footer-marca { display: flex; align-items: center; gap: 10px; }
.footer-marca img { height: 38px; }
.footer-linha { border-top: 1px solid var(--cinza-borda); margin-top: 26px; padding-top: 16px; text-align: left; font-size: 0.78rem; color: var(--texto-suave); }

/* Modal de e-mail */
.modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.ativo { display: flex; }
.modal-caixa {
  background: var(--preto-suave); border-top: 3px solid var(--dourado); border-radius: var(--radius);
  padding: 32px; max-width: 440px; width: 100%;
  position: relative; max-height: 90vh; overflow-y: auto;
  color: var(--texto-claro);
}
.modal-caixa h3 { font-size: 1.3rem; margin-bottom: 4px; color: var(--texto-claro); }
.modal-subtitulo { color: var(--texto-suave); font-size: 0.88rem; margin-bottom: 20px; }
.modal-fechar {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--cinza-fundo); color: var(--texto-suave);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-caixa form { display: flex; flex-direction: column; gap: 14px; }
.campo-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.email-status { font-size: 0.85rem; text-align: center; margin: 0; }
.email-status.sucesso { color: #8ee6a0; }
.email-status.erro { color: #ff6b5e; }

.whatsapp-flutuante {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  background: #25d366; color: #fff; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.whatsapp-flutuante svg { width: 30px; height: 30px; }

@media (max-width: 900px) {
  /* Pré-existente antes do rebranding: sem isso, o botão "Fale conosco"
     ficava cortado no mobile (container do header sem wrap, gap fixo de
     32px empurrando o botão pra fora da tela de 390px). */
  .header .container { gap: 10px; padding: 10px 14px; }
  .marca img { height: 36px; }
  .header-cta .btn { padding: 8px 14px; font-size: 0.85rem; white-space: nowrap; }
  .hero { padding: 40px 0 50px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 2.3rem; }
  .faixa-demanda-conteudo { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 20px; }
  .simulador { padding: 16px; }
  .form-linha-2, .form-linha-3 { grid-template-columns: 1fr; }
  .resultado-cotacao { padding: 24px; }
  .duo { grid-template-columns: 1fr; }
  .nav { display: none; }
  .menu-toggle { display: block; }
  .frota-grid {
    grid-template-columns: repeat(6, 130px);
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .diferenciais-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .diferencial:nth-child(2)::after { display: none; }
  .diferencial:last-child::after { display: none; }
  .secao-titulo-grande { font-size: 1.9rem; }
  .diferenciais-subtitulo { white-space: normal; }
  .frota-subtitulo { white-space: normal; }
  .passos-grid { grid-template-columns: 1fr; gap: 10px; }
  .casos-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 20px; }
  .fechamento-caixa { display: block; text-align: center; }
  .fechamento .btn-fechamento { margin-top: 20px; }
}