/* =====================================================================
   Grupo Zen: SAFE (soma-se ao base.css; o fim da página é do rede.css)
   A página da locadora dona de todos os caminhões do grupo, em Itaberaba:
   - topo: os nove cavalos Rosário em fila, com a foto reta e, embaixo, o título
     no tamanho display, o apoio e o botão; com movimento, a fila entra da
     esquerda para a direita, como um comboio chegando;
   - o que a Safe faz: a frase grande e a ficha de onde ela fica, e os três
     serviços da fonte;
   - O MAPA (o momento da página): a foto do pátio de Itaberaba se fecha no
     losango de Itaberaba, as seis bases de combustível acendem uma a uma e as
     linhas se desenham com a rolagem. No computador o palco fica preso, com a
     lista das bases ao lado; no celular o mapa fica preso no alto e a lista
     passa embaixo dele (a base que está sendo lida acende, e a que já passou
     some antes de chegar ao mapa). A lista acende o ponto com o mouse, o foco
     ou o toque, e o ponto acende a lista;
   - a frota numa galeria 4:5 uniforme, que abre em tela cheia (kit da base);
   - como contratar um frete: três paradas numa barra que se desenha e, ao
     lado, a mensagem que o botão abre no WhatsApp, palavra por palavra.
   O mapa é uma chapa Carvão de borda reta (tools/novo/mapa-safe.py).
   O HTML de base é o ESTÁTICO; html.mov liga o movimento (ver BASE.md).
   Regras da casa (BASE.md): sem sobretítulo, sem fio, sem degradê, sem sombra
   em repouso, sem vidro; escala de tipo e de espaço pelos tokens da base.
   Mesma media query do safe.js para o palco preso: LARGO =
   (min-width:1024px) and (orientation:landscape) and (min-height:540px).
   ===================================================================== */

:root {
  /* texto que ainda não chegou (Cal a 55% sobre o Asfalto: 5,7:1) */
  --apagado: color-mix(in srgb, var(--texto) 55%, var(--fundo));
}

/* =====================================================================
   1. TOPO
   A foto fica logo abaixo da barra do cabeçalho, na proporção dela (cinema
   deitado, 4:5 em pé), de borda reta; o título fica embaixo dela, sobre o
   Asfalto (nada de texto sobre a foto, então nada de véu). A altura da foto
   nunca passa da largura ÷ 2,39 (a foto tem 1536 px: até 1920 px de tela ela
   amplia no máximo 1,25 vez; acima disso o quadro para em 1920).
   ===================================================================== */
.topo {
  /* a altura do texto embaixo da foto (o título em 2 linhas de display, o apoio em até 3 linhas e o
     botão, empilhados): a foto fica com o resto da tela */
  --texto-h: calc(1.8 * var(--t-display) + 2 * var(--passo) + 4.65 * var(--t-corpo) + 48px);
  --foto-h: clamp(250px, calc(100svh - var(--cab-h) - 2 * var(--vao) - var(--texto-h)), calc(min(100vw, 1920px) / 2.39));
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: max(560px, 100svh);
  background: var(--fundo); color: var(--texto);
}
@media (orientation: portrait) {
  .topo { --foto-h: clamp(250px, calc(100svh - var(--cab-h) - 2 * var(--vao) - var(--texto-h)), 125vw); }
}
/* deitado: o apoio (2 linhas) e o botão ficam lado a lado embaixo do título */
@media (min-width: 720px) and (orientation: landscape) {
  .topo { --texto-h: calc(1.8 * var(--t-display) + var(--passo) + 3.1 * var(--t-corpo)); }
}
/* computador largo: o título em 8 colunas e, ao lado, no pé dele, o apoio e o botão */
@media (min-width: 1280px) and (orientation: landscape) {
  .topo { --texto-h: calc(1.8 * var(--t-display)); }
}
.topo__foto {
  position: absolute; left: 0; right: 0; top: var(--cab-h);
  height: var(--foto-h); overflow: hidden;
  background: #6A5E61;
}
.topo__foto picture { position: absolute; inset: 0; }
.topo__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 58%;
}
@media (orientation: portrait) { .topo__img { object-position: 50% 70%; } }
@media (min-width: 1921px) and (orientation: landscape) {
  .topo__foto { left: calc(50% - 960px); right: auto; width: 1920px; }
}
.topo__texto {
  position: relative; z-index: 2;
  padding: calc(var(--cab-h) + var(--foto-h) + var(--vao)) var(--m) calc(var(--vao) + var(--seguro));
}
/* o título usa a classe .t-display da base ("A frota do Grupo Zen.", 21 caracteres: 2 linhas de 320
   a 1920 px, medido); aqui só a medida: a coluna inteira */
.topo__titulo { max-width: none; }
.topo__lado {
  margin-top: var(--passo);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--passo);
}
.topo__apoio {
  max-width: 44ch;
  font-size: var(--t-corpo); line-height: 1.55; text-wrap: pretty;
}
@media (max-width: 599.98px) {
  .topo__botao { width: 100%; padding-inline: 12px; }
}
@media (min-width: 720px) and (orientation: landscape) {
  .topo__lado { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 40px; }
}
@media (min-width: 1280px) and (orientation: landscape) {
  .topo__texto {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
    align-items: end;
  }
  .topo__titulo { grid-column: 1 / span 8; }
  .topo__lado { grid-column: 9 / -1; margin-top: 0; flex-direction: column; align-items: flex-start; }
}

/* entrada: a fila entra da esquerda para a direita (animação CSS, desde o 1º quadro: a foto é o LCP e
   não espera o JS; curvas iguais às do GSAP de antes: power3.inOut e expo.out). O texto sobe da
   máscara pelo safe.js; antes de o script montar, ele espera escondido (sem piscar). `backwards`, e não
   `both`: depois do fim o CSS não segura o clip-path nem o transform. Quem chega com âncora, ou aperta
   Tab, cai em .sem-abertura (safe.js) e a foto já está inteira. */
.mov:not(.sem-abertura) .topo__foto { animation: safe-abre 1.3s cubic-bezier(.65, 0, .35, 1) .1s backwards; }
.mov:not(.sem-abertura) .topo__img { animation: safe-chega 1.9s cubic-bezier(.16, 1, .3, 1) .1s backwards; }
@keyframes safe-abre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes safe-chega { from { transform: translateX(-4%) scale(1.1); } }
.mov:not(.pronto):not(.sem-abertura) .topo__texto > * { visibility: hidden; }

/* =====================================================================
   2. O QUE A SAFE FAZ
   Três serviços empilhados (nome em tamanho de chamada e a nota embaixo, em
   caixa normal) e a ficha de onde ela fica. Sem fio: o espaço separa.
   ===================================================================== */
.faz {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vao);
  padding: var(--respiro) var(--m);
}
/* a frase grande (statement): um <p> no tamanho de chamada, na letra do texto (36 px ou menos no
   computador, 24 px ou menos no celular; 3 linhas no computador, 4 no celular) */
.faz__p {
  margin-top: var(--passo); max-width: 34ch;
  font-size: var(--t-chamada); line-height: 1.3; text-wrap: pretty;
}
.servicos { display: grid; row-gap: 32px; margin: 0; padding: 0; list-style: none; }
.servico { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
.servico__nome {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-chamada); line-height: 1.1; letter-spacing: -.01em;
  text-wrap: balance;
}
.servico__nota { font-size: var(--t-legenda); line-height: 1.4; color: var(--texto-2); }

/* a ficha: rótulo em Prata e valor em Cal, na mesma linha, sem fio entre os pares */
.onde { display: grid; row-gap: var(--passo); }
.onde__titulo { margin: 0; }
.onde__ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; }
.onde__par { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
.onde__par dt { font-size: var(--t-legenda); line-height: 1.4; color: var(--texto-2); }
.onde__par dd { margin: 0; font-size: var(--t-corpo); font-weight: 700; line-height: 1.45; }
.onde__coord { font-variant-numeric: tabular-nums; }
.onde__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--passo) 32px; }
@media (max-width: 599.98px) {
  .onde__acoes .botao { width: 100%; }
}
@media (min-width: 1024px) {
  /* o título ocupa a linha inteira (uma linha só); embaixo, à esquerda, a frase grande e a ficha de
     onde fica; à direita, os três serviços (as duas colunas terminam juntas: sem vão embaixo da frase) */
  .faz { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 0; }
  .faz__texto { display: contents; }
  .faz__titulo { grid-column: 1 / -1; margin-bottom: var(--vao); }
  .faz__p { grid-column: 1 / span 6; grid-row: 2; margin-top: 0; }
  .servicos { grid-column: 8 / -1; grid-row: 2 / span 2; align-self: start; row-gap: 40px; }
  .onde { grid-column: 1 / span 6; grid-row: 3; margin-top: var(--vao); }
}

/* =====================================================================
   3. O MAPA: base ESTÁTICA (vale sem JS, com "reduzir movimento" e no
   celular deitado): título, a foto do pátio, o mapa inteiro e a lista.
   ===================================================================== */
.rotas {
  --mapa-chao: var(--fundo-2);        /* contorno dos rótulos e miolo dos losangos do SVG (= a chapa) */
  --nome-base: var(--t-chamada);      /* tamanho do nome de cada base na lista */
  padding: var(--respiro) var(--m);
}
.rotas__palco { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vao); }
.rotas__apoio { margin-top: var(--passo); max-width: 38ch; font-size: var(--t-corpo); line-height: 1.55; text-wrap: pretty; }
.rotas__quadro { position: relative; }
/* o mapa é uma chapa: o recorte é reto (mapa-safe.py, sem degradê nas bordas) e o fundo dele é o
   degrau de tom Carvão, como um mapa impresso recortado */
.rotas .mapa-safe { background: var(--grao), var(--fundo-2); }
.rotas__foto { margin: 0 0 28px; }
.rotas__moldura { aspect-ratio: 3 / 2; }
.rotas__legenda { margin-top: 10px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
.rotas__nota { margin-top: 14px; max-width: 56ch; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.45; }
@media (min-width: 720px) {
  .rotas__moldura { aspect-ratio: 2.39 / 1; }
}

/* a lista das bases: um ponto Brasa como o do mapa, o nome e o estado (a ordem é a do cliente;
   o número não informa nada aqui, então a lista não mostra numeração). Sem fio: a linha da vez
   ganha o degrau de tom Grafite. */
.bases { margin: 14px 0 0; padding: 0; list-style: none; }
.base {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px;
  padding: 12px 8px 12px 30px;
}
.base:not(.base--botao)::before, .base__alvo::before {
  content: ""; position: absolute; left: 6px; top: calc(12px + .56 * var(--nome-base) - 5.5px);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--acento); border: 2px solid var(--acento);
  transition: background-color .25s ease, border-color .25s ease, outline-color .25s ease, transform .35s var(--curva);
}
.base__nome {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--nome-base); line-height: 1.1; letter-spacing: -.01em;
  transition: color .25s ease;
}
.base__uf { color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.3; }
.base__extra { flex-basis: 100%; margin-top: 4px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
/* com JS: o nome e o estado viram um botão (acende o ponto no mapa) */
.base--botao { padding: 0; }
.base__alvo {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px;
  width: 100%; min-height: 48px; padding: 12px 8px 12px 30px;
  text-align: left; cursor: pointer;
  transition: background-color .2s ease;
}
.base--botao .base__extra { margin-top: -3px; padding: 0 8px 12px 30px; }
.base.is-foco .base__alvo { background: var(--superficie); }
@media (hover: hover) { .base__alvo:hover { background: var(--superficie); } }
/* o anel de foco fica DENTRO do botão: por fora (offset 2 px + 3 px) ele cobria a linha de baixo
   ("Na mesma cidade…" de Luís Eduardo Magalhães) e a linha da base vizinha */
.base__alvo:focus-visible { outline-offset: -5px; box-shadow: inset 0 0 0 2px var(--texto); /* taste-skill-ignore: anel de foco, só em :focus-visible */ }
.base__alvo:active { background: var(--superficie); }
/* a base que passa por baixo do mapa preso some pela opacidade de cada peça do texto (--sumir, do safe.js) */
.base__nome, .base__uf, .base__extra, .base:not(.base--botao)::before, .base__alvo::before { opacity: var(--sumir, 1); }
/* alvo de toque invisível em volta de cada ponto do mapa (safe.js): o ponto tem 16 px no celular */
.mapa-base__alvo { fill: transparent; stroke: none; pointer-events: all; }
/* o ponto da vez ganha um anel CHAPADO (borda sólida), como o alvo do mapa */
.base.is-foco .base__alvo::before { transform: scale(1.25); outline: 3px solid var(--acento); outline-offset: 3px; }
.base__alvo[aria-pressed="true"] .base__nome { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: .18em; }

@media (min-width: 1024px) {
  .rotas__palco {
    grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr;
    column-gap: var(--g); row-gap: var(--vao); align-items: start;
  }
  .rotas__cabeca { grid-column: 1 / span 4; grid-row: 1; }
  .rotas__lista { grid-column: 1 / span 4; grid-row: 2; }
  .rotas__mapa { grid-column: 5 / -1; grid-row: 1 / span 2; }
  /* o título mora numa coluna de 4 de 12: aqui ele fica entre --t-chamada e --t-titulo (cabe em 2 linhas) */
  .rotas__titulo { font-size: clamp(var(--t-chamada), 3.4vw, var(--t-titulo)); }
}

/* ---------- o SVG: realce (mouse, foco, toque), vale nos dois modos ---------- */
.mapa-safe .mapa-base, .mapa-safe .mapa-unidade, .mapa-safe .mapa-base__halo {
  transform-box: fill-box; transform-origin: center;
}
.mapa-safe .mapa-base, .mapa-safe .mapa-unidade {
  transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.mapa-safe .mapa-rotulo, .mapa-safe .mapa-rota, .mapa-safe .mapa-legenda, .mapa-safe .mapa-nota {
  transition: opacity .35s ease, stroke .2s ease, fill .2s ease;
}
.mapa-ativo .mapa-base, .mapa-ativo .mapa-rotulo--base { cursor: pointer; }
.mapa-safe.tem-foco .mapa-rota:not(.is-foco),
.mapa-safe.tem-foco .mapa-base:not(.is-foco) { opacity: .22; }
/* .66 (era .4): os nomes apagados continuam legíveis no Asfalto (base em Cal 8:1, unidade em Prata 4,9:1) */
.mapa-safe.tem-foco .mapa-rotulo:not(.is-foco),
.mapa-safe.tem-foco .mapa-unidade:not(.is-foco) { opacity: .66; }
.mapa-safe .mapa-rota.is-foco { stroke: var(--texto); stroke-opacity: 1; stroke-width: 3px; }
.mapa-safe--celular .mapa-rota.is-foco { stroke-width: 2.2px; }
.mapa-safe .mapa-base.is-foco { transform: scale(1.32); }
.mapa-safe .mapa-rotulo.is-foco, .mapa-safe .mapa-rotulo.is-foco .mapa-rotulo__sub { fill: var(--texto); }
/* o ponto que corre na linha (desenho e realce; só com movimento): um ponto Cal chapado, sem brilho */
.mapa-cometa { fill: var(--texto); pointer-events: none; }

/* =====================================================================
   3b. O MAPA COM MOVIMENTO (safe.js põe .rotas--viva na seção)
   ===================================================================== */
/* o que ainda não acendeu (a rolagem acende; o realce mostra antes da hora) */
.rotas--viva .mapa-base:not(.is-acesa):not(.is-foco),
.rotas--viva .mapa-unidade:not(.is-acesa):not(.is-foco) { opacity: 0; transform: scale(.2); }
.rotas--viva .mapa-rotulo:not(.is-acesa):not(.is-foco) { opacity: 0; }
/* o ponto que ainda não acendeu não responde ao mouse (safe.js): sem a mãozinha sobre o vazio */
.rotas--viva .mapa-base:not(.is-acesa), .rotas--viva .mapa-rotulo--base:not(.is-acesa) { cursor: auto; }
.rotas--viva .mapa-safe:not(.com-legenda) .mapa-legenda,
.rotas--viva .mapa-safe:not(.com-legenda) .mapa-nota { opacity: 0; }
.rotas--viva .mapa-rota.is-foco { stroke-dashoffset: 0 !important; }
/* a base da vez: maior, e o halo respira */
.rotas--viva .mapa-base.is-atual:not(.is-foco) { transform: scale(1.22); }
.rotas--viva .mapa-base.is-atual .mapa-base__halo { animation: halo-respira 1.1s ease-in-out infinite alternate; }
@keyframes halo-respira { to { transform: scale(1.45); fill-opacity: .32; } }
/* a lista acompanha: o que não acendeu fica apagado (ponto vazado), a da vez em Cal com o ponto maior e o anel chapado */
.rotas--viva .base:not(.is-acesa):not(.is-foco) .base__nome { color: var(--apagado); }
.rotas--viva .base:not(.is-acesa):not(.is-foco) .base__alvo::before { background: transparent; border-color: var(--apagado); }
.rotas--viva .base.is-atual .base__alvo::before { transform: scale(1.3); outline: 3px solid var(--acento); outline-offset: 3px; }

/* ---------- COMPUTADOR: o palco preso (a seção tem 100svh + o curso, 3 telas no total) ---------- */
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  .mov .rotas { height: calc(100svh + 170svh); padding: 0 var(--m); }
  .mov .rotas__palco {
    position: sticky; top: 0; height: 100svh;
    padding: calc(var(--cab-h) + 20px) 0 28px;
    grid-template-rows: auto auto; align-content: center;
  }
  .mov .rotas__cabeca { align-self: end; }
  .mov .rotas__lista { align-self: start; }
  .mov .rotas__mapa { align-self: center; }
  /* o mapa cabe na altura da tela (o SVG largo é 960 × 667) */
  .mov .rotas__quadro { width: min(100%, calc((100svh - var(--cab-h) - 120px) * 1.439)); margin-left: auto; }
  .mov .rotas__nota { margin-left: auto; width: min(100%, calc((100svh - var(--cab-h) - 120px) * 1.439)); max-width: none; }
  .mov .rotas__titulo { font-size: clamp(var(--t-chamada), min(3.4vw, 6.4svh), var(--t-titulo)); }
}
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) and (max-height: 699.98px) {
  .mov .rotas__titulo { font-size: clamp(var(--t-chamada), min(3vw, 5.6svh), var(--t-titulo)); }
  .mov .rotas__apoio { margin-top: 12px; }
  .mov .rotas__palco { row-gap: 20px; }
  .mov .base__alvo { min-height: 44px; padding-block: 8px; }
  .mov .base__alvo::before { top: calc(8px + .56 * var(--nome-base) - 5.5px); }
  .mov .bases { margin-top: 8px; }
}

/* ---------- CELULAR E TABLET EM PÉ: o mapa preso no alto, a lista passa embaixo ---------- */
@media (max-width: 1023.98px), (orientation: portrait) {
  /* tablet grande em pé (1024 px ou mais): uma coluna só, como no celular */
  .mov .rotas { --nome-base: var(--t-titulo); }
  .mov .rotas__palco { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .mov .rotas__cabeca, .mov .rotas__mapa, .mov .rotas__lista { grid-column: 1; grid-row: auto; }
  .mov .rotas__mapa {
    position: sticky; top: var(--cab-h); z-index: 3;
    margin: calc(var(--cab-h) - 40px) calc(-1 * var(--m)) 0;
    padding: 0 var(--m) 10px;
    background: var(--grao), var(--fundo);
  }
  /* cobre a faixa do cabeçalho (quando ele some ao descer, a lista não aparece em cima do mapa) */
  .mov .rotas__mapa::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--cab-h);
    background: var(--grao), var(--fundo);
  }
  /* a lista que passa por baixo do mapa some ANTES de chegar nele (safe.js: opacidade pela distância
     até a borda do mapa), então nenhum nome fica coberto por ele; sem degradê */
  .mov .rotas__nota { margin-top: 6px; }
  .mov .rotas__lista { position: relative; z-index: 1; }
  /* o vão antes da 1ª base é o tempo da foto se fechar em Itaberaba. Depois da última base, só o
     bastante para a história terminar com o mapa ainda preso. Cada base ocupa um trecho da rolagem;
     o nome fica no meio dele (a linha de leitura do safe.js cai no meio do trecho, logo abaixo do
     mapa: o nome que acende é o que se lê) */
  .mov .bases { margin-top: 10svh; padding-bottom: 4svh; }
  .mov .base { min-height: 16svh; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: stretch; }
  .mov .base__alvo::before { top: calc(14px + .525 * var(--nome-base) - 5.5px); }
  .mov .base__nome { line-height: 1.05; }
  .mov .base__uf { flex-basis: 100%; margin-top: 4px; }
  .mov .base__alvo { padding-block: 14px 10px; }
}

/* ---------- a foto do pátio sobre o mapa (com movimento, nos dois desenhos) ---------- */
.mov .rotas__foto { position: absolute; inset: 0; z-index: 2; margin: 0; pointer-events: none; }
.mov .rotas__moldura { position: absolute; inset: 0; aspect-ratio: auto; }
.mov .rotas__legenda {
  position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px);
  margin: 0; padding: 8px 12px;
  background: var(--veu-tarja); color: var(--texto);
}

/* =====================================================================
   4. A FROTA (galeria do kit, 4:5, todas do mesmo tamanho)
   ===================================================================== */
.frota { padding: var(--respiro) 0; }
.frota__topo { padding: 0 var(--m); margin-bottom: var(--vao); }
.frota__titulo { max-width: none; }
/* "1 de 5": 15 px Prata, junto da barra de progresso (a tira corta a próxima foto na borda) */
.frota__conta {
  flex: none; margin: 0; min-width: 3.4em; text-align: right; white-space: nowrap;
  font-size: var(--t-legenda); line-height: 1.4; color: var(--texto-2); font-variant-numeric: tabular-nums;
}
.frota__kit { --kg-w: min(72vw, 340px); }
/* tablet (600 a 1023 px): duas fotos e um bom pedaço da terceira (30 a 40%), para o corte da borda convidar a rolar */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .frota__kit { --kg-w: calc((100vw - var(--m)) / 2.35); }
}
.frota__item figcaption { color: var(--texto); }
/* o lugar de cada foto abre a legenda, em caixa normal, na mesma linha */
.frota__lugar { font-weight: 700; color: var(--texto-2); }

/* =====================================================================
   5. COMO CONTRATAR: três paradas numa barra e a mensagem que o botão abre
   A barra (4 px, trilho Grafite e preenchimento Cal) é a ordem dos passos:
   com movimento ela se desenha com a rolagem e cada parada acende quando
   a barra chega; no estático ela já está inteira. Ao lado dos passos
   (embaixo deles no celular), a mensagem do botão, palavra por palavra,
   numa chapa Carvão (degrau de tom: sem borda, sem sombra, sem balão).
   ===================================================================== */
.parceria {
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: var(--respiro) var(--m);
}
.parceria__titulo { max-width: none; }
.passos {
  --linha: 1;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 44px;
  margin: var(--vao) 0 0; padding: 0 0 0 44px; list-style: none;
}
/* a barra vertical: o trilho e, por cima, o preenchimento */
.passos::before, .passos::after {
  content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 4px;
}
.passos::before { background: var(--superficie); }
.passos::after { background: var(--texto); transform-origin: 50% 0; transform: scaleY(var(--linha)); }
.passo { position: relative; }
.passo__marca {
  position: absolute; left: -44px; top: 2px; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--acento);
  outline: 6px solid var(--fundo);       /* separa a parada da barra (anel na cor do fundo, não sombra) */
  transition: background-color .3s ease, transform .45s var(--curva);
}
.passo__titulo {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-chamada); line-height: 1.1; letter-spacing: -.01em;
  text-wrap: balance;
}
.passo__p { margin-top: 10px; max-width: 34ch; font-size: var(--t-corpo); line-height: 1.5; text-wrap: pretty; }
/* a mensagem: o texto que vai no WhatsApp, no tamanho de chamada; os dois campos em negrito,
   cada um na sua linha, como chegam no aplicativo */
.mensagem { margin: var(--vao) 0 0; }
.mensagem__chapa {
  display: grid; row-gap: 8px;
  padding: clamp(24px, 2.4vw + 12px, 48px);
  background: var(--grao), var(--fundo-2);
}
.mensagem__texto { margin-bottom: 16px; max-width: 30ch; font-size: var(--t-chamada); line-height: 1.3; text-wrap: pretty; }
.mensagem__campo { font-size: var(--t-chamada); line-height: 1.3; font-weight: 700; }
.mensagem__legenda { margin-top: 12px; max-width: 52ch; font-size: var(--t-legenda); line-height: 1.4; color: var(--texto-2); }
.parceria__acoes { margin-top: var(--passo); }
@media (min-width: 1024px) {
  /* os passos à esquerda, a mensagem e o botão à direita */
  .parceria { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
  .parceria__cabeca { grid-column: 1 / -1; }
  .passos { grid-column: 1 / span 6; grid-row: 2 / span 2; }
  /* a mesma coluna dos serviços (8 de 12): a página tem poucas bordas esquerdas, repetidas */
  .mensagem { grid-column: 8 / -1; grid-row: 2; }
  .parceria__acoes { grid-column: 8 / -1; grid-row: 3; }
}
/* no tablet o botão fica do tamanho do texto, como o do topo (a barra vermelha de lado a lado pesava) */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .parceria__acoes .botao { width: auto; padding-inline: 24px; }
}
/* com movimento: a parada ainda não alcançada é um ponto Grafite; acende (Brasa) quando a barra chega */
.mov .passo:not(.is-chegou) .passo__marca { background: var(--superficie); transform: scale(.82); }

/* =====================================================================
   REDUZIR MOVIMENTO: nada anda (o realce do mapa troca na hora)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mapa-safe .mapa-base, .mapa-safe .mapa-unidade, .mapa-safe .mapa-rotulo, .mapa-safe .mapa-rota,
  .mapa-safe .mapa-legenda, .mapa-safe .mapa-nota, .mapa-safe .mapa-base__halo,
  .base::before, .base__alvo::before, .base__nome, .base__alvo, .passo__marca { transition: none !important; animation: none !important; }
}