/* Transvelloz: páginas de rota (/frete/), v3.5 de 09/11/2026. Carrega depois do style.css. Mobile first.
   Esqueleto igual ao da home: o topo usa as classes da home (.hero, .hero-inner, .hero-text, .hero-form, .card-cotacao),
   a faixa de prova é a .faixa da home e o fim da página é o .cta-final da home, com o formulário clonado pelo main.js.
   Aqui fica só o que é próprio da rota: o mapa como marca d'água no topo e as seções de conteúdo.
   Regras de bolso da marca: grafite #262626, preto, laranja #ED6826, branco; texto pequeno no laranja em #141414; Barlow.
   Tudo preso a body.rota. Desde a v3.7 a home também usa body.rota (sem data-rota) para ter o mesmo topo. */

body.rota {
  --texto: #333333;
  --texto-suave: #5C5C5C;     /* 6,7:1 no branco */
  --borda: #E3E3E3;
  --alt: #F4F4F4;
  --grafite: #262626;
  --corpo-escuro: #D6D6D6;
  --nota-escuro: #A8A8A8;
  --destaque-escuro: #FFA860;
}
body.rota .btn-primary, body.rota .btn-wa { color: #141414; }
body.rota .field input:focus { border-color: #141414; box-shadow: 0 0 0 3px rgba(237, 104, 38, .25); }

/* ===== Topo (mesmo esqueleto da home) ===== */
body.rota .hero { background: linear-gradient(180deg, #262626 0%, #1d1d1d 100%); }
body.rota .hero-inner { padding-top: 24px; }
body.rota .hero-text { margin-top: 0; }
body.rota .hero h1 { max-width: 20ch; text-wrap: pretty; }
body.rota .hero-sub { color: var(--corpo-escuro); }
.lp-prazo { margin-top: 12px; color: var(--corpo-escuro); font-size: 1.0625rem; line-height: 1.4; }
.lp-prazo strong { color: var(--destaque-escuro); font-weight: 700; }
.lp-sede { margin-top: 6px; color: var(--nota-escuro); font-size: .9375rem; font-weight: 600; }
body.rota .card-cotacao { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
body.rota .fc-prova span + span { padding-left: 12px; border-left: 1px solid #C9C9C9; }

/* Mapa da rota como marca d'água: atrás do título no celular, entre o texto e o formulário no computador */
.lp-mapa { position: absolute; z-index: 0; top: 6px; right: -72px; width: 300px; opacity: .32; pointer-events: none; }
.lp-mapa svg { display: block; width: 100%; height: auto; }
.lp-mapa text { display: none; }
.lp-mapa .rota-linha { stroke-dasharray: none; animation: none; }
.lp-mapa .rota-ponto { animation: none; opacity: 1; }
.lp-mapa-hub { opacity: .2; }
@media (min-width: 1024px) { .lp-mapa-hub { opacity: .95; } }
.lp-hero .hero-text, .lp-hero .hero-form { position: relative; z-index: 1; }

@media (max-width: 1023px) { .lp-mapa circle { display: none; } }
@media (min-width: 768px) and (max-width: 1023px) {
  /* tablet: texto e formulário lado a lado, como no computador (sem sobra de espaço ao lado do formulário) */
  body.rota .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 28px; align-items: start; padding-top: 36px; padding-bottom: 48px; }
  body.rota .hero-text { grid-column: 1; max-width: none; padding-top: 8px; }
  body.rota .hero-form { grid-column: 2; max-width: none; margin-top: 0; display: flex; flex-direction: column; }
  body.rota .hero-form .selo-otd { order: -1; margin: 0 0 12px; }
  body.rota .hero h1 { font-size: 2.125rem; }
  body.rota .hero .card-cotacao { padding: 20px 20px 14px; }
  body.rota .hero .btn-enviar { font-size: 1.0625rem; }
  body.rota .hero .fc-prova { font-size: .8125rem; flex-wrap: nowrap; white-space: nowrap; }
  .lp-mapa { top: auto; right: auto; left: -24px; bottom: 24px; width: 330px; opacity: .35; }
  .lp-mapa-hub { opacity: .3; }
}
@media (min-width: 1024px) {
  body.rota .hero-inner { --texto-w: clamp(400px, 34vw, 520px); padding-bottom: 48px; min-height: 560px; padding-top: 36px; }
  body.rota .hero-text { align-self: start; padding-top: 8px; }
  body.rota .hero h1 { font-size: 2.875rem; }
  body.rota .hero-sub { font-size: 1.0625rem; }
  .lp-mapa {
    top: 32px; bottom: 32px; right: calc(40px + var(--card-w) + 24px); left: calc(40px + var(--texto-w) + 8px);
    width: auto; opacity: .9; display: flex; align-items: center; justify-content: center;
  }
  .lp-mapa svg { width: 100%; height: 100%; max-width: 460px; max-height: 470px; }
  .lp-mapa text { display: inline; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  /* pouco espaço entre o texto e o formulário: o mapa vai para trás do texto, bem apagado */
  .lp-mapa { left: 40%; right: calc(40px + var(--card-w)); opacity: .35; }
  .lp-mapa text { display: none; }
}

/* ===== Seções (mesmo ritmo da home: .secao e .secao-alt do style.css) ===== */
.lead-curto, .lp-lead { margin: -14px 0 24px; color: var(--texto-suave); font-size: 1.0625rem; line-height: 1.5; max-width: 62ch; }
.bloco-cab { margin-bottom: 28px; }
body.rota .secao .bloco-cab h2 { margin: 0; }

/* Ficha da rota: números grandes, sem caixinha */
.fatos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.fatos.tres { grid-template-columns: 1fr; }
.fato { padding-top: 12px; border-top: 3px solid var(--laranja); }
.fato h3 { font-size: .9375rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 4px; }
.fato .v { color: var(--grafite); font-size: 1.3125rem; font-weight: 700; line-height: 1.2; }
.fato .n { margin-top: 4px; color: var(--texto); font-size: .9375rem; line-height: 1.4; }

/* Cidades em texto corrido */
.cidades { display: block; margin-top: 28px; color: var(--grafite); font-weight: 600; line-height: 1.6; }
.cidades li { display: inline; }
.cidades li:not(:last-child)::after { content: ", "; font-weight: 400; }
.cidades::before { content: "Cidades atendidas: "; font-weight: 400; color: var(--texto-suave); }
.cidades-nota { margin-top: 8px; color: var(--texto-suave); font-size: .9375rem; }

/* Regiões: linhas de uma tabela, nunca grade com buraco */
.regioes { display: grid; border-bottom: 1px solid var(--borda); }
.regiao { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--borda); }
.secao-alt .regioes, .secao-alt .regiao { border-color: #D6D6D6; }
.regiao h3 { font-size: 1.125rem; color: var(--grafite); }
.regiao .c { color: var(--texto); font-size: 1rem; line-height: 1.45; }
.regiao .p { display: flex; flex-direction: column; gap: 2px; font-size: .9375rem; }
.regiao .p span { color: var(--texto-suave); }
.regiao .p strong { color: var(--grafite); }

/* Modalidades: colunas com fio laranja, sem card */
.modos { display: grid; gap: 24px; }
.modo { padding-left: 18px; border-left: 3px solid var(--laranja); }
.modo-tag { display: block; margin-bottom: 4px; color: var(--texto-suave); font-size: .9375rem; font-weight: 700; }
.modo h3 { font-size: 1.1875rem; color: var(--grafite); margin-bottom: 6px; }
.modo p { font-size: 1rem; line-height: 1.5; }
.modo .prazo { margin-top: 10px; color: #141414; font-weight: 700; }
.modo .prazo .ic { display: none; }

.caixa-escura { margin-top: 28px; padding: 18px 20px; border-radius: var(--raio-lg); background: var(--grafite); color: var(--corpo-escuro); }
.caixa-escura strong { display: block; color: #fff; font-size: 1.0625rem; margin-bottom: 4px; }

/* Trajeto: passo a passo de verdade, numerado */
.trajeto { display: grid; gap: 0; counter-reset: etapa; }
.trajeto li { position: relative; padding: 0 0 18px 44px; }
.trajeto li::before {
  counter-increment: etapa; content: counter(etapa);
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--laranja); color: #141414; font-weight: 700; font-size: .9375rem;
}
.trajeto li::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: #F3B48F; }
.trajeto li:last-child { padding-bottom: 0; }
.trajeto li:last-child::after { display: none; }
.trajeto strong { display: block; color: var(--grafite); font-size: 1.0625rem; line-height: 1.3; }
.trajeto span { display: block; margin-top: 2px; color: var(--texto); font-size: 1rem; line-height: 1.45; }

/* O que você manda / o que a gente cuida */
.preparo { display: grid; gap: 16px; }
.preparo-col { padding: 22px 20px; border-radius: var(--raio-lg); }
.preparo-voce { background: #fff; border: 1px solid var(--borda); }
.preparo-nos { background: var(--grafite); color: var(--corpo-escuro); }
.preparo-col h3 { font-size: 1.125rem; margin-bottom: 12px; color: var(--grafite); }
.preparo-nos h3 { color: #fff; }
.preparo-col ul { display: grid; gap: 9px; }
.preparo-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; line-height: 1.45; }
.preparo-col li .ic { width: 19px; height: 19px; margin-top: 2px; color: var(--laranja); stroke-width: 2.5; }
.preparo-nos strong { color: #fff; }
.dica, .sp-linha { margin-top: 20px; padding: 14px 18px; border-left: 4px solid var(--laranja); background: #fff; border-radius: 0 var(--raio) var(--raio) 0; font-size: 1rem; line-height: 1.5; }
.dica strong, .sp-linha strong { color: var(--grafite); }

body.rota[data-rota] .faq summary { font-size: 1.0625rem; color: var(--grafite); }
body.rota .faq summary .ic { color: var(--grafite); }
body.rota .faq-wa a { color: var(--grafite); }

/* Fim da página: o .cta-final da home, sem foto, com a curva da marca saindo da borda (um grafismo por página) */
.lp-cta { background: linear-gradient(180deg, #262626 0%, #141414 100%); }
.lp-cta::after { display: none; }
.lp-cta::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 320px; height: 320px; left: -250px; bottom: -230px;
  border: 24px solid var(--laranja); border-radius: 50%; opacity: .9;
}
.lp-cta .cta-texto p { max-width: 40ch; }
.lp-cta .lp-cta-brasil { margin-top: 14px; color: #fff; font-weight: 600; }
.lp-cta .cta-contatos .btn .ic { width: 22px; height: 22px; }

/* Lista de rotas: linhas iguais, 1, 2 ou 3 colunas (12 itens: sempre par) */
.lp-rotas { display: grid; grid-template-columns: 1fr; column-gap: 32px; }
.lp-rotas li { border-top: 1px solid #D6D6D6; }
.lp-rotas a { display: grid; gap: 2px; padding: 14px 0; color: var(--grafite); text-decoration: none; }
.lp-rotas a strong { font-size: 1.0625rem; text-decoration: underline; text-decoration-color: rgba(237, 104, 38, .6); text-underline-offset: 4px; }
.lp-rotas a:hover strong { text-decoration-color: var(--laranja); }
.lp-rotas .lr-reg { color: var(--texto-suave); font-size: .9375rem; line-height: 1.4; }
.lp-rotas .lr-pz { color: #141414; font-size: .9375rem; font-weight: 700; }
.lp-rotas-nota { margin-top: 24px; color: var(--texto); font-size: 1rem; line-height: 1.5; }
.lp-rotas-nota a { color: var(--grafite); font-weight: 700; text-underline-offset: 3px; }

/* Hub: tabela por origem */
.lp-grupo { margin: 36px 0 12px; font-size: 1.25rem; color: var(--grafite); }
.lp-grupo + .lp-rotas, .lp-grupo + .lp-lead { margin-top: 0; }
.lp-grupo + .lp-lead { margin-bottom: 16px; }
.lp-tabela li:last-child { border-bottom: 1px solid #D6D6D6; }
.secao:not(.secao-alt) .lp-rotas li, .secao:not(.secao-alt) .lp-tabela li:last-child { border-color: var(--borda); }

.trilha { background: var(--alt); border-top: 1px solid var(--borda); font-size: .9375rem; }
.trilha ol { display: flex; flex-wrap: wrap; gap: 4px 8px; padding-top: 12px; padding-bottom: 12px; color: var(--texto-suave); }
.trilha li + li::before { content: "/"; margin-right: 8px; color: #A8A8A8; }
.trilha a { color: var(--grafite); font-weight: 600; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .fatos { grid-template-columns: repeat(4, 1fr); }
  .fatos.tres { grid-template-columns: repeat(3, 1fr); }
  .regiao { grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 20px; align-items: baseline; }
  .modos.n2 { grid-template-columns: 1fr 1fr; gap: 32px; }
  .preparo { grid-template-columns: 1fr 1fr; }
  .trajeto { grid-template-columns: repeat(var(--etapas, 4), 1fr); gap: 20px; }
  .trajeto li { padding: 44px 0 0; }
  .trajeto li::after { left: 34px; right: -14px; top: 14px; bottom: auto; width: auto; height: 2px; }
  .lp-rotas:not(.lp-tabela) { grid-template-columns: 1fr 1fr; }
  .lp-tabela a { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: baseline; }
  .lp-cta::before { width: 460px; height: 460px; left: -360px; bottom: -330px; border-width: 30px; }
}
@media (min-width: 1024px) {
  .modos.n3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .lp-rotas:not(.lp-tabela) { grid-template-columns: repeat(3, 1fr); }
}

/* ===================== v3.6 (09/11/2026): topo com a Scania e o motion da rota =====================
   Celular: título, prova (selo + linha de confiança) e formulário, nessa ordem; a frase da rota vem depois do formulário.
   Tablet: título e frase à esquerda da foto; prova e mapa ao lado do formulário.
   Computador: foto entre o texto e o formulário (como na home); mapa da rota na coluna do texto.
   O motion é só SVG + CSS: a linha se desenha uma vez, o caminhão percorre a rota em laço lento, os pontos pulsam de leve.
   Com prefers-reduced-motion: tudo parado e completo. */
body.rota .hero { background: #1d1d1d; }
body.rota .lp-foto { position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 300px; overflow: hidden; }
body.rota .lp-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% 40%; filter: brightness(1.08) contrast(1.05); }
body.rota .lp-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,20,20,.10) 0%, rgba(20,20,20,.25) 35%, rgba(29,29,29,.85) 72%, #1d1d1d 100%),
    linear-gradient(90deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.15) 55%, rgba(20,20,20,0) 100%);
}
body.rota .hero-inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cab" "prova" "form" "sub"; padding-top: 108px; padding-bottom: 32px; min-height: 0;
}
body.rota .lp-cab { grid-area: cab; }
body.rota .hero h1 { max-width: 20ch; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
body.rota .lp-sub { grid-area: sub; margin-top: 20px; color: var(--corpo-escuro); }
body.rota .lp-prazo-topo { display: none; }
body.rota .lp-prova { grid-area: prova; margin-top: 12px; }
body.rota .lp-prova .selo-otd { margin-top: 0; }
body.rota .lp-confia-linha { margin-top: 6px; color: var(--corpo-escuro); font-size: 1rem; line-height: 1.4; }
body.rota .hero-form { grid-area: form; margin-top: 16px; display: block; max-width: none; }
body.rota .hero-form .selo-otd { display: none; }
body.rota .lp-motion { position: absolute; z-index: 1; top: 8px; left: var(--gutter); width: 96px; height: 96px; pointer-events: none; }

@media (min-width: 768px) {
  body.rota .lp-foto { height: 440px; }
  body.rota .lp-foto img { object-position: 60% 45%; }
  body.rota .lp-foto::after {
    background:
      linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.10) 45%, rgba(29,29,29,.9) 85%, #1d1d1d 100%),
      linear-gradient(90deg, rgba(20,20,20,.85) 0%, rgba(20,20,20,.55) 34%, rgba(20,20,20,0) 52%);
  }
  body.rota .hero-inner {
    grid-template-columns: minmax(0, 1fr) 360px; column-gap: 28px;
    grid-template-areas: "cab ." "sub ." "prazo form" "prova form" "mapa form" ". form";
    grid-template-rows: auto auto auto auto auto 1fr; padding-top: 28px; padding-bottom: 48px;
  }
  body.rota .lp-cab, body.rota .lp-sub { max-width: 330px; }
  body.rota .hero h1 { font-size: 2.125rem; }
  body.rota .lp-sub { margin-top: 12px; font-size: 1rem; }
  body.rota .lp-prova { margin-top: 128px; }
  body.rota .hero-form { margin-top: 128px; }
  body.rota .lp-motion { position: relative; top: auto; left: auto; grid-area: mapa; width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; margin-top: 20px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.rota .lp-prazo-topo { display: block; grid-area: prazo; margin-top: 128px; color: var(--corpo-escuro); font-size: 1rem; }
  body.rota .lp-prova { margin-top: 14px; }
}
@media (min-width: 1024px) {
  body.rota .lp-hero { --texto-w: clamp(340px, 29vw, 430px); --foto-x: calc(40px + var(--texto-w) * .42); }
  body.rota .lp-foto { top: 0; left: var(--foto-x); right: auto; width: calc(100% - var(--foto-x) - 380px - 56px); height: auto; aspect-ratio: 16 / 10;
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent), linear-gradient(90deg, transparent, #000 14%, #000 94%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 74%, transparent), linear-gradient(90deg, transparent, #000 14%, #000 94%, transparent); mask-composite: intersect; }
  body.rota .lp-foto img { object-position: 88% 50%; }
  body.rota .lp-foto::after { background: linear-gradient(90deg, rgba(20,20,20,.9) 0%, rgba(20,20,20,.55) 22%, rgba(20,20,20,0) 40%); }
  body.rota .hero-inner {
    --card-w: 380px; --texto-w: clamp(340px, 29vw, 430px);
    grid-template-columns: minmax(0, 1fr) var(--card-w); column-gap: 24px;
    grid-template-areas: "cab form" "sub form" "prazo form" "prova form" "mapa form" ". form";
    grid-template-rows: auto auto auto auto auto 1fr; padding-top: 36px; padding-bottom: 40px;
  }
  body.rota .lp-cab, body.rota .lp-sub, body.rota .lp-prova, body.rota .lp-prazo-topo { max-width: var(--texto-w); }
  body.rota .hero h1 { font-size: 2.875rem; }
  body.rota .lp-sub { margin-top: 14px; font-size: 1.0625rem; }
  body.rota .lp-prazo-topo { display: block; grid-area: prazo; margin-top: 12px; color: var(--corpo-escuro); font-size: 1.0625rem; }
  body.rota .lp-prazo-topo strong, body.rota .pz-valor { color: var(--destaque-escuro); }
  body.rota .lp-prova { margin-top: 18px; }
  body.rota .hero-form { margin-top: 0; }
  body.rota .lp-motion { margin-top: 16px; max-width: 250px; }
}
@media (min-width: 1440px) {
  body.rota .lp-motion { max-width: 290px; }
}
body.rota .lp-prazo-topo strong { color: var(--destaque-escuro); font-weight: 700; }

/* ---- bloco de confiança (logo depois do formulário) ---- */
.lp-confia { padding: 40px 0 36px; background: #fff; }
.lp-confia h2 { margin: 0 0 20px; font-size: 1.625rem; color: var(--grafite); }
.confia-lista { display: grid; grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--borda); }
.confia-lista li { display: grid; align-content: start; gap: 2px; padding: 12px 0; border-top: 1px solid var(--borda); }
.confia-lista strong { color: var(--grafite); font-size: 1.125rem; line-height: 1.25; }
.confia-lista li[data-otd] strong { color: #141414; }
.confia-lista span { color: var(--texto); font-size: 1rem; line-height: 1.45; }
.confia-lista a { color: var(--grafite); font-weight: 700; text-underline-offset: 3px; text-decoration-color: var(--laranja); }
.confia-setores { margin-top: 18px; color: var(--texto); font-size: 1rem; line-height: 1.5; }
.confia-setores strong { color: var(--grafite); }
@media (min-width: 768px) {
  .lp-confia { padding: 48px 0 44px; }
  .lp-confia h2 { font-size: 2rem; margin-bottom: 24px; }
  .confia-lista { grid-template-columns: 1fr 1fr; column-gap: 32px; border-bottom: 0; }
  .confia-lista li { padding: 14px 0 16px; border-top: 3px solid var(--laranja); }
}
@media (min-width: 1024px) {
  .confia-lista { grid-template-columns: repeat(3, 1fr); column-gap: 36px; row-gap: 8px; }
}

/* ---- bloco de prazo ---- */
.lp-prazo-bloco { padding: 32px 0; background: var(--grafite); color: var(--corpo-escuro); }
.lp-prazo-bloco h2 { margin: 0 0 8px; color: #fff; font-size: 1.375rem; }
.pz-valor { color: var(--destaque-escuro); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.pz-texto { margin-top: 8px; color: var(--corpo-escuro); font-size: 1.0625rem; line-height: 1.5; max-width: 60ch; }
.pz-nota { margin-top: 6px; color: var(--nota-escuro); font-size: .9375rem; }
@media (min-width: 768px) {
  .pz-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: baseline; }
  .lp-prazo-bloco h2 { margin: 0; font-size: 1.625rem; }
  .pz-valor { font-size: 2.25rem; }
}

/* computador largo: o mapa vai para o meio, embaixo da Scania, entre o texto e o formulário (sem faixa vazia) */
@media (min-width: 1200px) {
  body.rota .hero-inner { grid-template-columns: var(--texto-w) minmax(0, 1fr) var(--card-w); grid-template-areas: "cab . form" "sub . form" "prazo . form" "prova . form" ". . form"; }
  body.rota .lp-motion { grid-column: 2; grid-row: 1 / -1; align-self: end; justify-self: center; width: min(100%, 300px); max-width: none; margin: 0 0 -8px; }
}
@media (min-width: 1440px) { body.rota .lp-motion { width: min(100%, 330px); } }
@media (min-width: 1024px) and (max-width: 1199px) { body.rota .lp-motion { max-width: 210px; } }
/* celular: tudo um pouco mais junto para o botão do formulário caber na 1ª tela (390 x 844) */
@media (max-width: 767px) {
  body.rota .hero-inner { padding-top: 80px; }
  body.rota .lp-motion { top: 4px; width: 74px; height: 74px; }
  body.rota .lp-prova { margin-top: 8px; }
  body.rota .hero-form { margin-top: 12px; }
  body.rota .hero .card-cotacao { padding-top: 18px; padding-bottom: 6px; }
  body.rota .hero .fc-head { margin-bottom: 10px; }
  body.rota .hero .field { margin-bottom: 10px; }
}

/* v3.6, revisão da Tecnologia (06/11): no celular, o botão do formulário ficava 23 a 32 px abaixo da 1ª tela
   (interior de SP, SP para Pernambuco). Aperta só o formulário do topo, sem baixar o toque de 44 px. */
@media (max-width: 480px) {
  #cotacao.card-cotacao { padding-top: 14px; }
  #cotacao .fc-titulo { font-size: 22px; }
  #cotacao .field { margin-bottom: 6px; }
  #cotacao input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) { min-height: 44px; height: 46px; }
}

/* v3.6.1 (decisão do Veloz, 06/11): o caminhão faz o trajeto 3 vezes e para no destino; em 360 px ou menos, o mapa sai do topo para o formulário caber na 1ª tela */
@media (max-width: 360px) { .lp-motion { display: none; } }
@media (max-width: 360px) {
  .lp-confia-linha, .fc-sub { display: none; }
  .hero h1 { font-size: 26px; }
  .form-cotacao .field { margin-bottom: 8px; }
  .form-cotacao .field label { margin-bottom: 2px; }
}

/* ===================== v3.8 (10/11/2026): mapa novo da home, vídeo de volta, sem caminhão =====================
   Pedido do senhor (10/11, 09h55): nomes de cidade bem menores, vários pontos nos lugares que a gente já atende,
   sem os caminhões; o vídeo institucional volta. Mapa: contorno das UFs do IBGE, cidades do Cockpit desde agosto
   (origem e destino, sem cliente), arcos finos saindo de Campinas, desenhados uma vez (ferramentas/mapa_v38.py). */
.m8 { margin: 0; }
.m8-svg { display: block; width: 100%; height: auto; overflow: visible; }
.m8-uf { fill: #262626; stroke: #3b3b3b; stroke-width: .7; stroke-linejoin: round; }
.m8-uf-on { fill: #313131; }
.m8-pais { fill: none; stroke: #707070; stroke-width: 1.1; stroke-linejoin: round; }
.m8-arco { fill: none; stroke: #ED6826; stroke-width: 1; stroke-opacity: .6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: m8-desenha 1.1s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(.4s + var(--i, 0) * .06s); }
.m8-ponto { fill: #ED6826; stroke: #1d1d1d; stroke-width: .8; opacity: 0; animation: m8-acende .35s ease-out forwards; animation-delay: calc(1.3s + var(--i, 0) * .06s); }
.m8-base { fill: #FFFFFF; stroke: #ED6826; stroke-width: 2; }
.m8-anel { fill: none; stroke: #ED6826; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: m8-pulsa 2.8s ease-out .2s 3; }
.m8-anel2 { animation-delay: 1.6s; }
.m8-raio { fill: none; stroke: #4a4a4a; stroke-width: .8; stroke-dasharray: 2 4; }
.m8-nome { font-family: inherit; font-size: 14px; font-weight: 600; fill: #D6D6D6; stroke: #1d1d1d; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
.m8-nome-base { font-size: 16px; font-weight: 700; fill: #FFFFFF; }
.m8-nome:not(.m8-nome-base) { opacity: 0; animation: m8-acende .5s ease-out 3.9s forwards; }
.m8-legenda { margin-top: 8px; color: var(--nota-escuro, #A8A8A8); font-size: .875rem; line-height: 1.4; }
/* só com JS: espera o mapa entrar na tela (js/main.js, iniciarMapa); sem JS, anima ao carregar */
.m8-espera .m8-arco, .m8-espera .m8-ponto, .m8-espera .m8-anel, .m8-espera .m8-nome { animation-play-state: paused; }
@keyframes m8-desenha { to { stroke-dashoffset: 0; } }
@keyframes m8-acende { to { opacity: 1; } }
@keyframes m8-pulsa { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
@media (prefers-reduced-motion: reduce) {
  .m8-arco { animation: none; stroke-dashoffset: 0; }
  .m8-ponto { animation: none; opacity: 1; }
  .m8-anel { animation: none; opacity: 0; }
  .m8-nome:not(.m8-nome-base) { animation: none; opacity: 1; }
}

/* home: posição do mapa e do vídeo */
body.home .lp-motion.m8 { position: relative; top: auto; left: auto; width: 100%; height: auto; max-width: none; aspect-ratio: auto; filter: none; }
body.home .lp-motion.m8 .m8-svg { filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
body.home .lp-video { grid-area: video; aspect-ratio: 960 / 544; }
body.home .lp-video .video-cover img { object-fit: cover; }
body.home .lp-video .video-cover::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); pointer-events: none; }
body.home .lp-video .video-play { width: 72px; height: 72px; background: var(--laranja); z-index: 1; }
body.home .lp-video .hero-video-caption { position: absolute; bottom: 12px; left: 14px; right: 14px; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.2; z-index: 1; text-align: left; }
@media (max-width: 767px) {
  body.home .hero-inner { grid-template-areas: "cab" "prova" "form" "sub" "mapa" "video"; }
  body.home .lp-motion.m8 { grid-area: mapa; margin: 28px auto 0; max-width: 360px; }
  body.home .lp-video { margin: 24px calc(var(--gutter) * -1) 0; border-radius: 0; }
  body.home .lp-video .hero-video-caption { font-size: 18px; }
}
@media (min-width: 768px) {
  body.home .hero-inner { grid-template-areas: "cab ." "sub ." "prazo form" "prova form" "video form" "mapa form" ". form"; grid-template-rows: auto auto auto auto auto auto 1fr; }
  body.home .lp-video { margin-top: 20px; max-width: 330px; border-radius: 12px; }
  body.home .lp-motion.m8 { grid-area: mapa; margin-top: 24px; max-width: 300px; }
}
@media (min-width: 1024px) {
  body.home .hero-inner { grid-template-areas: "cab form" "sub form" "prazo form" "prova form" "video form" "mapa form" ". form"; }
  body.home .lp-video { max-width: var(--texto-w); margin-top: 22px; }
}
/* computador largo: o mapa no meio, embaixo da Scania (como na v3.7); o vídeo na coluna do texto */
@media (min-width: 1200px) {
  body.home .hero-inner { grid-template-areas: "cab . form" "sub . form" "prazo . form" "prova . form" "video . form" ". . form"; grid-template-rows: auto auto auto auto auto 1fr; }
  body.home .lp-motion.m8 { grid-column: 2; grid-row: 1 / -1; align-self: end; justify-self: center; width: min(100%, 330px); margin: 0 0 4px; }
}
@media (min-width: 1440px) { body.home .lp-motion.m8 { width: min(100%, 360px); } }

/* celular: o caminhão inteiro numa faixa acima do título (na v3.7 ficava escuro atrás do texto).
   Para o botão seguir na 1ª tela, saem do topo no celular a linha "19 anos de estrada..." (os mesmos fatos abrem o
   bloco "Dá para conferir") e a linha "Preencha e receba..." (o botão já diz "Receber cotação no WhatsApp"), como já era em 360 px. */
@media (max-width: 767px) {
  body.rota .lp-foto { height: 212px; }
  body.rota .lp-foto img { object-position: 62% 60%; filter: none; }
  body.rota .lp-foto::after { background: linear-gradient(180deg, rgba(29,29,29,0) 0%, rgba(29,29,29,0) 70%, rgba(29,29,29,.85) 90%, #1d1d1d 100%); }
  body.rota .hero-inner { padding-top: 196px; }
  body.rota .lp-prova .lp-confia-linha { display: none; }
  body.rota #cotacao .fc-sub { display: none; }
}
@media (max-width: 360px) {
  body.rota .lp-foto { height: 120px; }
  body.rota .hero-inner { padding-top: 104px; }
}

/* ===================== v3.9 (10/11/2026): o mapa da home nas 13 rotas e no /frete/ =====================
   Mesmo desenho da home (UFs do IBGE, cidades atendidas, arcos finos saindo de Campinas, nomes pequenos, sem caminhão).
   O contorno e a rede recuada moram em img/mapa-brasil.svg (um arquivo só, em cache para todas as páginas);
   cada página traz embutido só o que é dela: a rota em laranja cheio. Gerado por ferramentas/mapa_v39.py.
   --k é a escala do recorte (1 = Brasil inteiro): mantém traço, ponto e nome do mesmo tamanho na tela quando a rota aproxima a região. */
body.rota .lp-motion.m8 { position: relative; top: auto; left: auto; width: 100%; height: auto; max-width: none; aspect-ratio: auto; filter: none; pointer-events: none; }
body.rota .lp-motion.m8 .m8-svg { filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.m8-legenda { text-align: center; }
.m9-arco { stroke-opacity: 1; stroke-width: calc(2.2px * var(--k, 1)); animation-duration: 1.2s; animation-delay: calc(.5s + var(--i, 0) * .07s); }
.m9-ponto { stroke-width: calc(.9px * var(--k, 1)); animation-delay: calc(1.5s + var(--i, 0) * .07s); }
.m9 .m8-base { stroke-width: calc(2px * var(--k, 1)); }
.m9 .m8-anel { stroke-width: calc(1.4px * var(--k, 1)); }
.m9 .m8-nome { font-size: calc(15px * var(--k, 1)); stroke-width: calc(3.2px * var(--k, 1)); }
.m9 .m8-nome-base { font-size: calc(16px * var(--k, 1)); }
.m9 .m8-nome:not(.m8-nome-base) { animation-delay: 2.1s; }
/* o grupo #pontos vem sem a cor do grupo pai */
.m9-rede { fill: none; stroke: #ED6826; stroke-linecap: round; }
.m9-muitos .m9-arco { stroke-width: calc(1.3px * var(--k, 1)); stroke-opacity: .85; }
.m9-campinas { fill: #D6D6D6; stroke: #1d1d1d; stroke-width: calc(.8px * var(--k, 1)); }
/* rota curta: aproxima a região e some nas bordas, sem quadrado cortado */
body.rota .lp-motion.m9-zoom .m8-svg { overflow: hidden; filter: none; -webkit-mask-image: radial-gradient(ellipse closest-side, #000 76%, transparent 100%); mask-image: radial-gradient(ellipse closest-side, #000 76%, transparent 100%); }
@media (max-width: 767px) {
  body.rota:not(.home) .hero-inner { grid-template-areas: "cab" "prova" "form" "sub" "mapa"; }
  body.rota .lp-motion.m8 { grid-area: mapa; margin: 28px auto 0; max-width: 360px; }
}
/* em 360 px o mapa saía para o formulário caber; agora ele fica depois do formulário e pode aparecer */
@media (max-width: 360px) { .lp-motion.m8 { display: block; } }
@media (min-width: 768px) { body.rota .lp-motion.m8 { grid-area: mapa; margin-top: 24px; max-width: 300px; } }
@media (min-width: 1200px) { body.rota .lp-motion.m8 { grid-area: auto; grid-column: 2; grid-row: 1 / -1; align-self: end; justify-self: center; width: min(100%, 330px); max-width: none; margin: 0 0 4px; } }
@media (min-width: 1440px) { body.rota .lp-motion.m8 { width: min(100%, 360px); } }

/* v3.9, acabamento: "Dá para conferir antes da primeira carga" tem 4 fatos; em 3 colunas o selo de 97,4% ficava sozinho na 2ª linha */
@media (min-width: 1024px) { .confia-lista { grid-template-columns: repeat(4, 1fr); column-gap: 28px; } }