/* ==========================================================================
   Demonstração do hub /comandos-rastreadores/ (v3.20.0)

   Carrega só no hub (functions.php, sl_cmd_is_hub), depois do v3.css.
   Marcação em template-parts/cmd-faixa.php e inc/cmd-demo.php; a encenação
   no assets/js/cmd-demo.js.

   O PALCO TEM TAMANHO FIXO: 1152 por 640 no computador e 390 por 600 no
   celular (--cdm-w e --cdm-h), e encolhe inteiro pela escala --s, que o
   script logo abaixo do palco calcula antes da primeira pintura. Sem
   JavaScript vale a escala aproximada de cada faixa de largura (sempre para
   menos, para nunca vazar a página). Por isso tudo aqui dentro é medido em
   pixel do desenho: o voo do SMS, o lugar dos aparelhos e as telas.

   As telas encolhem de novo dentro dos aparelhos: o celular é desenhado em
   390 por 844 (o iPhone, como as telas da página do Smart SMS) e o tablet em
   1180 por 820 (o iPad deitado). --kf e --kt são essas escalas.

   O ESTADO SEM CLASSE NENHUMA É O FIM DA PARTE 1 (comando confirmado, resposta
   na tela, veículo on-line): é o que aparece sem JavaScript e com "reduzir
   movimento". Com .cdm--a2 vale o fim da parte 2. A cena só anda com
   .cdm-roda, e daí cada batida (.cdm-b1 a .cdm-b5 na parte 1, .cdm-c1 a
   .cdm-c6 na parte 2) acende o que já aconteceu.

   Dados inventados: os chips da faixa 5511912340001 a 0009 e as placas de
   exemplo do padrão Mercosul. O app segue o tema do site (no escuro, o modo
   escuro dele); o mapa é claro nos dois temas, como o resto do site.
   ========================================================================== */

/* ---------------------------------------------------------------- o topo do hub com a demonstração */
/* A hero do hub não tem a coluna da foto e ganha a demonstração embaixo:
   o respiro de baixo cresce e o texto pode ocupar a largura toda. */
.v3-cmd-hero--faixa { padding: 64px 0 72px; }
.v3-cmd-hero--faixa .v3-cmd-hero-grid--solo .v3-cmd-hero-copy { max-width: 900px; }

/* ---------------------------------------------------------------- tokens */
.cdm {
	--cdm-w: 1152;
	--cdm-h: 640;
	--s: 1;
	--kf: .62564;               /* tela do celular: 244 / 390 */
	--kt: .66610;               /* tela do tablet: 786 / 1180 */
	--cdm-ida: .3;              /* barriga do arco da ida (fração da corda; o sinal escolhe o lado) */
	--cdm-volta: -.24;          /* e da volta, do outro lado: os dois nunca se cruzam */

	--cdm-laranja: #F16000;
	--cdm-verde: #16A34A;
	--cdm-trilho: rgba(17, 24, 39, .26);
	--cdm-chao: rgba(15, 23, 42, .34);
	--cdm-brilho: rgba(241, 96, 0, .11);

	/* o app Smart SMS (claro), os mesmos tons das telas da página do app */
	--t-fundo: #F0EFF5;
	--t-cartao: #FFFFFF;
	--t-linha: #E5E4E9;
	--t-campo: #E2E1E7;
	--t-trilho: #DEDDE3;
	--t-tinta: #1C1C1E;
	--t-tinta-2: #6E6D74;
	--t-laranja: #EF5500;
	--t-laranja-claro: #F3DED3;
	--t-verde: #15994A;
	--t-verde-claro: #DDF3E4;
	--t-ambar: #B9771D;
	--t-ambar-claro: #F3E6D6;
	--t-vidro: rgba(246, 246, 249, .9);

	/* a plataforma (clara) */
	--p-menu: #FFFFFF;
	--p-cartao: #FFFFFF;
	--p-fundo: #F7F8FA;
	--p-linha: #E5E7EB;
	--p-borda: #D3D9E0;
	--p-trilho: #E8EBEF;
	--p-tinta: #111827;
	--p-tinta-2: #6B7280;
	--p-ativo: #B84A00;
	--p-ativo-fundo: rgba(241, 96, 0, .10);
	--p-verde: #16A34A;
	--p-verde-claro: #DCFCE7;
	--p-sombra: 0 16px 36px -16px rgba(15, 23, 42, .35), 0 2px 6px rgba(15, 23, 42, .06);

	position: relative;
	margin-top: 44px;
}
:root:not([data-theme="light"]) .cdm {
	--cdm-trilho: rgba(255, 255, 255, .26);
	--cdm-chao: rgba(0, 0, 0, .55);
	--cdm-brilho: rgba(241, 96, 0, .16);
	--cdm-verde: #22C55E;

	--t-fundo: #000000;
	--t-cartao: #1C1B20;
	--t-linha: #2C2B31;
	--t-campo: #26252B;
	--t-trilho: #222127;
	--t-tinta: #F2F2F5;
	--t-tinta-2: #9C9BA3;
	--t-laranja-claro: rgba(239, 85, 0, .20);
	--t-verde: #43D17A;
	--t-verde-claro: rgba(67, 209, 122, .16);
	--t-ambar: #E8A53C;
	--t-ambar-claro: rgba(232, 165, 60, .16);
	--t-vidro: rgba(44, 44, 48, .9);

	--p-menu: #12161C;
	--p-cartao: #171C23;
	--p-fundo: #1A2028;
	--p-linha: #262D36;
	--p-borda: #333C47;
	--p-trilho: #262D36;
	--p-tinta: #E8EDF2;
	--p-tinta-2: #9AA4B0;
	--p-ativo: #FF9147;
	--p-ativo-fundo: rgba(241, 96, 0, .16);
	--p-verde: #22C55E;
	--p-verde-claro: rgba(34, 197, 94, .16);
	--p-sombra: 0 16px 36px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04);
}

/* ---------------------------------------------------------------- palco */
.cdm-quadro { position: relative; height: calc(var(--cdm-h) * var(--s) * 1px); }
.cdm-palco {
	position: absolute; left: 0; top: 0;
	width: calc(var(--cdm-w) * 1px); height: calc(var(--cdm-h) * 1px);
	transform: scale(var(--s)); transform-origin: 0 0;
	pointer-events: none; -webkit-user-select: none; user-select: none;
}
/* um brilho morno atrás dos aparelhos, e a sombra de cada um no chão */
.cdm-palco::before {
	content: ""; position: absolute; left: 120px; right: 0; top: 40px; bottom: -20px;
	background: radial-gradient(ellipse 52% 56% at 52% 58%, var(--cdm-brilho), transparent 72%);
}
.cdm-chao { position: absolute; border-radius: 50%; background: var(--cdm-chao); filter: blur(16px); }
.cdm-chao--fone { left: 30px; top: 594px; width: 210px; height: 26px; }
.cdm-chao--tab { left: 372px; top: 594px; width: 740px; height: 30px; }

/* ---------------------------------------------------------------- o celular */
.cdm-fone {
	position: absolute; z-index: 3; left: 4px; top: 64px; width: 260px; height: 544px; padding: 8px;
	border-radius: 42px;
	background: linear-gradient(150deg, #5b5f68 0%, #2a2d33 22%, #15171b 55%, #0c0d10 100%);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), inset 0 0 0 4px #0b0c0f,
		0 46px 80px -34px rgba(30, 41, 59, .55), 0 20px 40px -26px rgba(241, 96, 0, .32);
}
.cdm-fone::before, .cdm-fone::after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: #3a3d44; }
.cdm-fone::before { left: -2px; top: 104px; height: 26px; box-shadow: 0 44px 0 0 #3a3d44, 0 88px 0 0 #3a3d44; }
.cdm-fone::after { right: -2px; top: 150px; height: 62px; }
.cdm-fone-tela {
	position: relative; overflow: hidden; width: 244px; height: 528px; border-radius: 35px;
	background: var(--t-fundo); isolation: isolate;
}
/* o vidro: um reflexo leve na diagonal */
.cdm-fone-tela::after,
.cdm-tab-tela::after {
	content: ""; position: absolute; inset: 0; z-index: 9; border-radius: inherit; pointer-events: none;
	background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 32%);
}
:root:not([data-theme="light"]) .cdm-fone { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .26), inset 0 0 0 4px #0b0c0f, 0 0 0 1px rgba(255, 255, 255, .07), 0 46px 80px -34px rgba(0, 0, 0, .8), 0 20px 50px -26px rgba(241, 96, 0, .4); }

/* ---------------------------------------------------------------- o tablet */
.cdm-tab {
	position: absolute; z-index: 2; left: 330px; top: 26px; width: 822px; height: 582px; padding: 3px;
	border-radius: 36px;
	background: linear-gradient(160deg, #8d929b 0%, #42464e 26%, #1f2227 62%, #50545c 100%);
	box-shadow: 0 50px 90px -40px rgba(30, 41, 59, .5), 0 26px 50px -34px rgba(241, 96, 0, .24);
}
.cdm-tab-vidro {
	position: relative; width: 100%; height: 100%; padding: 15px; border-radius: 33px;
	background: #0b0c0f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
/* a câmera da frente, no meio da borda de cima (o iPad deitado) */
.cdm-tab-vidro::before {
	content: ""; position: absolute; left: 50%; top: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #3d4452, #101217 62%);
}
.cdm-tab-tela { position: relative; overflow: hidden; width: 786px; height: 546px; border-radius: 16px; background: var(--p-menu); isolation: isolate; }
:root:not([data-theme="light"]) .cdm-tab { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 90px -40px rgba(0, 0, 0, .8), 0 26px 60px -34px rgba(241, 96, 0, .3); }

/* ---------------------------------------------------------------- a tela do app (390 por 844) */
.cdm-t {
	position: absolute; left: 0; top: 0; width: 390px; height: 844px; overflow: hidden;
	transform: scale(var(--kf)); transform-origin: 0 0;
	background: var(--t-fundo); color: var(--t-tinta);
	font: 400 16px/1.25 var(--v3-body); text-align: left; letter-spacing: 0;
	transition: opacity .35s ease;
}
.cdm-t svg { display: block; width: 22px; height: 22px; max-width: none; flex: none; }
.cdm-t b, .cdm-t strong { font-weight: 700; }
.cdm-t small, .cdm-t em, .cdm-t i { font-style: normal; }

.cdm-t-status { position: relative; z-index: 3; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 44px; background: var(--t-fundo); }
.cdm-t-status b { font: 600 17px/1 var(--v3-body); letter-spacing: -.01em; }
.cdm-t-ilha { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.cdm-t-sinais { display: flex; align-items: center; gap: 6px; }
.cdm-t-sinais svg { fill: currentColor; height: 12px; }
.cdm-t-sinais svg:first-child { width: 18px; }
.cdm-t-sinais svg:nth-child(2) { width: 16px; }
.cdm-t-sinais svg:last-child { width: 27px; height: 13px; }

.cdm-t-topo { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; height: 58px; padding: 6px 16px 0; background: var(--t-fundo); }
.cdm-t-topo > b { flex: 1; font: 700 28px/1 var(--v3-body); letter-spacing: -.01em; }
.cdm-t-saldinho { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border-radius: 15px; background: var(--t-campo); font: 600 15px/1 var(--v3-body); color: var(--t-tinta-2); }
.cdm-t-saldinho svg { width: 16px; height: 16px; }
.cdm-t-perfil svg { width: 25px; height: 25px; }

/* o que rola na parte 2 (o formulário sobe e a lista ganha a tela) */
.cdm-t-rola { position: relative; z-index: 1; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }

.cdm-t-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 12px 16px 0; padding: 4px; height: 50px; border-radius: 25px; background: var(--t-trilho); }
.cdm-t-seg span { display: flex; align-items: center; justify-content: center; border-radius: 21px; font: 500 16.5px/1 var(--v3-body); color: var(--t-tinta-2); white-space: nowrap; }
.cdm-t-seg span.sel { background: var(--t-laranja); color: #fff; font-weight: 600; box-shadow: 0 6px 14px -6px rgba(239, 85, 0, .7); }

.cdm-t-campo {
	position: relative; display: flex; align-items: center; gap: 16px; height: 52px; margin: 14px 16px 0; padding: 0 18px;
	border-radius: 14px; background: var(--t-campo); font-size: 17px; color: var(--t-tinta);
	box-shadow: 0 0 0 0 rgba(239, 85, 0, 0); transition: box-shadow .35s ease;
}
.cdm-t-campo > i { color: var(--t-tinta-2); }
.cdm-t-campo--num > span { font: 600 17px/1 var(--v3-body); letter-spacing: .01em; }
.cdm-t-digitado { font: 500 17px/1.2 var(--v3-body); white-space: nowrap; }
.cdm-t-cursor { width: 2px; height: 22px; margin-left: -14px; border-radius: 1px; background: var(--t-laranja); opacity: 0; }
.cdm-t-dica { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--t-tinta-2); }
.cdm-t-campo--cmd:has(.cdm-t-digitado:not(:empty)) .cdm-t-dica { opacity: 0; }

.cdm-t-linha { display: flex; align-items: center; justify-content: space-between; margin: 12px 16px 0; }
.cdm-t-cont { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 9px; border-radius: 13px; background: var(--t-campo); font: 500 13px/1 var(--v3-body); color: var(--t-tinta-2); }
.cdm-t-cont svg { width: 15px; height: 15px; }
.cdm-t-usar { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 14px; background: var(--t-laranja-claro); font: 600 16.5px/1 var(--v3-body); color: var(--t-laranja); }
.cdm-t-usar svg { width: 20px; height: 20px; }

.cdm-t-botao {
	display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin: 14px 16px 0; border-radius: 14px;
	background: var(--t-laranja); color: #fff; font: 700 18px/1 var(--v3-body);
	transition: transform .14s cubic-bezier(.23, 1, .32, 1), filter .14s ease;
}
.cdm-t-botao svg { width: 21px; height: 21px; }

.cdm-t-sec { display: flex; align-items: flex-start; justify-content: space-between; margin: 22px 16px 10px; }
.cdm-t-sec b { display: block; font: 700 19.5px/1.2 var(--v3-body); }
.cdm-t-sec small { display: block; margin-top: 3px; font-size: 13px; color: var(--t-tinta-2); }
.cdm-t-sec i { color: var(--t-tinta-2); margin-top: 4px; }

/* coluna flex, e não grade: linha recolhida não deixa o vão dela para trás */
.cdm-t-lista { display: flex; flex-direction: column; padding: 0 16px; }
.cdm-t-envio {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 5px; align-items: center;
	max-height: 96px; overflow: hidden; flex: none; margin-bottom: 9px; padding: 13px 15px; border-radius: 14px; background: var(--t-cartao); border: 1px solid var(--t-linha);
	transition: max-height .45s cubic-bezier(.23, 1, .32, 1), opacity .3s ease, padding .45s cubic-bezier(.23, 1, .32, 1), margin .45s cubic-bezier(.23, 1, .32, 1), border-width .45s ease, box-shadow .35s ease;
}
.cdm-t-envio > b { font: 700 16px/1.1 var(--v3-body); letter-spacing: .01em; }
.cdm-t-copiar { color: var(--t-tinta-2); }
.cdm-t-copiar svg { width: 16px; height: 16px; }
.cdm-t-cmd { grid-column: 1; overflow: hidden; font: 400 15.5px/1.2 var(--v3-body); color: var(--t-tinta-2); white-space: nowrap; text-overflow: ellipsis; }
.cdm-t-envio small { grid-column: 2 / -1; justify-self: end; font: 400 12.5px/1 var(--v3-body); color: var(--t-tinta-2); white-space: nowrap; }
/* linha recolhida (ainda não entrou) */
.cdm--a1 [data-cdm-linha2],
.cdm-t-envio[data-cdm-vis="0"],
.cdm-roda.cdm--a1:not(.cdm-b2) [data-cdm-linha1] { max-height: 0; opacity: 0; padding-block: 0; border-width: 0; margin-bottom: 0; }

/* o status: os três nomes no mesmo lugar, só a cor e a opacidade mudam */
.cdm-t-st { display: inline-grid; justify-items: end; }
.cdm-t-st > span {
	grid-area: 1 / 1; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px;
	font: 600 12.5px/1 var(--v3-body); white-space: nowrap; opacity: 0; transition: opacity .25s ease;
}
.cdm-t-st--env { background: var(--t-campo); color: var(--t-tinta-2); }
.cdm-t-st--op { background: var(--t-ambar-claro); color: var(--t-ambar); }
.cdm-t-st--ok { background: var(--t-verde-claro); color: var(--t-verde); }
.cdm-t-st[data-cdm-st="env"] .cdm-t-st--env,
.cdm-t-st[data-cdm-st="op"] .cdm-t-st--op,
.cdm-t-st[data-cdm-st="ok"] .cdm-t-st--ok { opacity: 1; }

.cdm-t-abas {
	position: absolute; z-index: 4; left: 15px; right: 15px; bottom: 30px; height: 72px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
	border-radius: 36px; background: var(--t-cartao); box-shadow: 0 10px 30px -10px rgba(20, 10, 40, .25), 0 0 0 1px var(--t-linha);
}
.cdm-t-aba { display: grid; justify-items: center; gap: 4px; font: 500 12.5px/1 var(--v3-body); color: var(--t-tinta-2); }
.cdm-t-aba i { position: relative; display: grid; place-items: center; width: 62px; height: 34px; border-radius: 17px; }
.cdm-t-aba--sel { color: var(--t-laranja); font-weight: 600; }
.cdm-t-aba--sel i { background: var(--t-laranja); color: #fff; }
.cdm-t-aba em { position: absolute; top: -3px; right: 12px; display: grid; width: 17px; height: 17px; border-radius: 50%; background: #C8102E; color: #fff; font: 700 10.5px/17px var(--v3-body); text-align: center; }
.cdm-t-aba em > span { grid-area: 1 / 1; transition: opacity .2s ease; }
.cdm-t-badge-a { opacity: 0; }

/* o que rola por baixo da barra de abas some num degradê, como no app */
.cdm-t::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 128px; background: linear-gradient(180deg, transparent, var(--t-fundo) 52%); pointer-events: none; }

/* a resposta chega como aviso no alto da tela */
.cdm-t-ancora { position: absolute; width: 1px; height: 1px; }
.cdm-t-aviso {
	position: absolute; z-index: 6; left: 10px; right: 10px; top: 10px; display: flex; align-items: center; gap: 12px; padding: 13px 15px;
	border-radius: 26px; background: var(--t-vidro); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45), 0 0 0 1px var(--t-linha);
	-webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
	transition: transform .5s cubic-bezier(.23, 1, .32, 1), opacity .3s ease;
}
.cdm-t-aviso-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: #2E2E32; }
.cdm-t-aviso-ico svg { width: 34px; height: 34px; }
.cdm-t-aviso-txt { display: grid; gap: 3px; min-width: 0; flex: 1; }
.cdm-t-aviso-txt small { display: flex; justify-content: space-between; font: 600 12.5px/1 var(--v3-body); letter-spacing: .02em; text-transform: uppercase; color: var(--t-tinta-2); }
.cdm-t-aviso-txt small em { font-weight: 500; text-transform: none; letter-spacing: 0; }
.cdm-t-aviso-txt b { font: 700 16px/1.2 var(--v3-body); }
.cdm-t-aviso-txt > span { font: 500 16px/1.25 var(--v3-body); }

/* ---------------------------------------------------------------- a tela da plataforma (1180 por 820) */
.cdm-p {
	position: absolute; left: 0; top: 0; width: 1180px; height: 820px; overflow: hidden;
	transform: scale(var(--kt)); transform-origin: 0 0;
	background: var(--p-fundo); color: var(--p-tinta);
	font: 400 16px/1.3 var(--v3-body); text-align: left; letter-spacing: 0;
	transition: opacity .35s ease;
}
.cdm-p svg { display: block; width: 20px; height: 20px; max-width: none; flex: none; }
.cdm-p i, .cdm-p em { font-style: normal; }

.cdm-p-menu {
	position: absolute; z-index: 3; left: 0; top: 0; width: 236px; height: 820px; display: flex; flex-direction: column; gap: 3px;
	padding: 16px 14px 18px; background: var(--p-menu); border-right: 1px solid var(--p-linha);
}
.cdm-p-marca { display: flex; align-items: center; gap: 10px; height: 54px; margin: 0 0 12px; padding: 0 8px 12px; border-bottom: 1px solid var(--p-linha); }
.cdm-p .cdm-p-marca svg { width: 32px; height: 30px; }
.cdm-p-marca b { font: 700 18.5px/1 var(--v3-body); letter-spacing: -.01em; color: var(--p-tinta); white-space: nowrap; }
.cdm-p-item {
	display: flex; align-items: center; gap: 13px; height: 44px; padding: 0 12px; border-radius: 10px; flex: none;
	font: 500 15.5px/1 var(--v3-body); color: var(--p-tinta-2); white-space: nowrap;
	transition: background-color .3s ease, color .3s ease;
}
.cdm-p-item--conta { margin-top: auto; border-top: 1px solid var(--p-linha); border-radius: 0; padding-top: 14px; height: 58px; }
.cdm--a1 .cdm-p-item--veiculos,
.cdm--a2 .cdm-p-item--configurar { background: var(--p-ativo-fundo); color: var(--p-ativo); font-weight: 600; }

.cdm-p-mapa { position: absolute; z-index: 1; left: 236px; top: 0; width: 944px; height: 820px; overflow: hidden; background: var(--v3-map-paper); }
.cdm-p .cdm-p-ruas { display: block; width: 944px; height: 820px; }

/* os veículos (seta, nunca foto) */
.cdm-p-v {
	position: absolute; z-index: 2; width: 32px; height: 36px; margin: -18px 0 0 -16px; color: var(--cor);
	transform: rotate(var(--r)); filter: drop-shadow(0 2px 2.5px rgba(15, 23, 42, .4));
	transition: color .4s ease;
}
.cdm-p .cdm-p-v svg { width: 32px; height: 36px; }
.cdm-p-v path { fill: currentColor; stroke: #fff; stroke-width: 2.6; stroke-linejoin: round; }
.cdm-p-v--verde { --cor: #16A34A; }
.cdm-p-v--amarelo { --cor: #E0A100; }
.cdm-p-v--azul { --cor: #2563EB; }
.cdm-p-v--vermelho { --cor: #DC2626; }
.cdm-p-v--alvo { --cor: #16A34A; z-index: 4; }
.cdm-p-ancora { position: absolute; width: 1px; height: 1px; }

/* as ondas quando o SMS chega (parte 1) e quando o veículo novo aparece (parte 2) */
.cdm-p-onda { position: absolute; z-index: 3; width: 0; height: 0; }
.cdm-p-onda > i { position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; border-radius: 50%; border: 3px solid var(--cdm-laranja); opacity: 0; }
.cdm-p-onda--a2 > i { border-color: var(--p-verde); }
@keyframes cdm-onda { from { opacity: .9; transform: scale(.35); } to { opacity: 0; transform: scale(1.9); } }

/* os cartões dos veículos */
.cdm-p-cartao {
	position: absolute; z-index: 5; width: 300px; display: grid; gap: 9px; padding: 14px 16px 15px;
	border-radius: 16px; background: var(--p-cartao); border: 1px solid var(--p-linha); box-shadow: var(--p-sombra);
	transition: opacity .35s ease, transform .45s cubic-bezier(.23, 1, .32, 1);
}
.cdm-p-cartao--a2 { width: 270px; }
.cdm-p-cartao::after {
	content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; transform: rotate(45deg);
	background: var(--p-cartao); border-right: 1px solid var(--p-linha); border-bottom: 1px solid var(--p-linha); border-radius: 0 0 4px 0;
}
/* o do Sportage fica embaixo do veículo (os arcos do SMS chegam por cima) */
.cdm-p-cartao--abaixo::after { top: -8px; bottom: auto; transform: rotate(225deg); }
.cdm-p-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cdm-p-cartao-topo b { font: 700 19px/1.1 var(--v3-body); }
.cdm-p-placa {
	position: relative; padding: 8px 9px 4px; border-radius: 5px; background: #fff; border: 1.5px solid #1F2937;
	font: 600 13.5px/1 var(--v3-mono); letter-spacing: .06em; color: #111827; white-space: nowrap;
}
.cdm-p-placa::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; border-radius: 4px 4px 0 0; background: #1E3A8A; }
.cdm-p-cartao-chip {
	display: flex; align-items: center; gap: 8px; margin: 0 -8px; padding: 5px 8px; border-radius: 9px;
	font: 400 15px/1.2 var(--v3-body); color: var(--p-tinta-2);
	box-shadow: 0 0 0 0 rgba(241, 96, 0, 0); transition: background-color .35s ease, box-shadow .35s ease;
}
.cdm-p .cdm-p-cartao-chip svg { width: 18px; height: 18px; }
.cdm-p-cartao-chip b { font: 600 15.5px/1 var(--v3-body); letter-spacing: .01em; color: var(--p-tinta); }
.cdm-p-cartao-st { display: grid; font: 600 15px/1.2 var(--v3-body); }
.cdm-p-cartao-st > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .3s ease; }
.cdm-p-cartao-st i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.cdm-p-st--off { color: var(--p-tinta-2); }
.cdm-p-st--sms { color: var(--cdm-laranja); }
.cdm-p-st--on { color: var(--p-verde); }
.cdm-p-cartao[data-cdm-st="off"] .cdm-p-st--off,
.cdm-p-cartao[data-cdm-st="sms"] .cdm-p-st--sms,
.cdm-p-cartao[data-cdm-st="on"] .cdm-p-st--on,
.cdm-p-cartao--a2 .cdm-p-st--on { opacity: 1; }

.cdm-p-zoom { position: absolute; z-index: 4; right: 18px; top: 18px; display: grid; border-radius: 11px; background: var(--p-cartao); box-shadow: var(--p-sombra); }
.cdm-p-zoom i { display: grid; place-items: center; width: 44px; height: 44px; color: var(--p-tinta); }
.cdm-p-zoom i + i { border-top: 1px solid var(--p-linha); }
.cdm-p-camadas { position: absolute; z-index: 4; right: 18px; top: 120px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--p-cartao); box-shadow: var(--p-sombra); color: var(--p-tinta); }

/* a tela "Configurar rastreador" (parte 2): sai de baixo do menu */
.cdm-p-painel {
	position: absolute; z-index: 2; left: 236px; top: 0; width: 430px; height: 820px;
	background: var(--p-cartao); border-right: 1px solid var(--p-linha); box-shadow: 18px 0 40px -24px rgba(15, 23, 42, .3);
	transform: translateX(-100%); transition: transform .6s cubic-bezier(.32, .72, 0, 1);
}
.cdm--a1 .cdm-p-painel { box-shadow: none; }
.cdm--a2 .cdm-p-painel { transform: none; }
.cdm-p-painel-topo { display: flex; align-items: center; gap: 12px; height: 74px; padding: 0 22px; border-bottom: 1px solid var(--p-linha); }
.cdm-p-voltar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--p-borda); color: var(--p-tinta); }
.cdm-p-painel-ico { color: var(--cdm-laranja); }
.cdm-p .cdm-p-painel-ico svg { width: 22px; height: 22px; }
.cdm-p-painel-topo b { font: 600 21px/1 var(--v3-body); letter-spacing: -.01em; }
.cdm-p-painel-corpo { display: flex; flex-direction: column; padding: 22px 24px; }
.cdm-p-rot { margin-bottom: 8px; font: 600 15px/19px var(--v3-body); color: var(--p-tinta); }
.cdm-p-campo {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 50px; margin-bottom: 18px; padding: 0 16px;
	border-radius: 12px; border: 1px solid var(--p-borda); background: var(--p-cartao); font: 400 17px/1 var(--v3-body); color: var(--p-tinta);
	box-shadow: 0 0 0 0 rgba(241, 96, 0, 0); transition: box-shadow .3s ease, border-color .3s ease;
}
.cdm-p-campo svg { color: var(--p-tinta-2); }
.cdm-p-campo--modelo { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.cdm-p-campo--modelo > span { grid-row: 1; grid-column: 1; transition: opacity .25s ease; }
.cdm-p-modelo-a { color: var(--p-tinta-2); opacity: 0; }
.cdm-p-modelo-b { font-weight: 600; }
.cdm-p-nota { margin: -4px 0 18px; font: 400 14.5px/21px var(--v3-body); color: var(--p-tinta-2); }
.cdm-p-enviar {
	display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; margin-top: 4px; border-radius: 12px;
	background: var(--p-verde); color: #fff; font: 600 17.5px/1 var(--v3-body);
	transition: transform .14s cubic-bezier(.23, 1, .32, 1), filter .14s ease;
}
.cdm-p-prog {
	display: flex; flex-direction: column; margin-top: 18px; padding: 16px 18px 12px; border-radius: 14px;
	border: 1px solid var(--p-linha); background: var(--p-fundo);
	transition: opacity .35s ease, transform .45s cubic-bezier(.23, 1, .32, 1);
}
.cdm-p-prog-topo { display: flex; align-items: center; justify-content: space-between; height: 22px; font: 600 16.5px/1 var(--v3-body); }
.cdm-p-prog-topo > b { font: 600 16px/1 var(--v3-body); font-variant-numeric: tabular-nums; color: var(--p-tinta-2); }
.cdm-p-prog-tit { display: grid; }
.cdm-p-prog-tit > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: opacity .3s ease; }
.cdm-p-prog-a { opacity: 0; }
.cdm-p-prog-b { color: var(--p-verde); }
.cdm-p .cdm-p-prog-b svg { width: 20px; height: 20px; stroke-width: 2.6; }
.cdm-p-prog-barra { display: block; height: 8px; margin: 12px 0 10px; border-radius: 4px; background: var(--p-trilho); overflow: hidden; }
.cdm-p-prog-barra i { display: block; height: 100%; border-radius: 4px; background: var(--p-verde); transform-origin: 0 50%; transform: scaleX(var(--cdm-prog, 1)); transition: transform .45s cubic-bezier(.23, 1, .32, 1); }
.cdm-p-prog-item { display: flex; align-items: center; gap: 12px; height: 36px; font: 400 16px/1 var(--v3-body); color: var(--p-tinta); transition: color .25s ease; }
.cdm-p .cdm-p-prog-marca svg { width: 24px; height: 24px; }
.cdm-p-prog-marca circle { fill: var(--p-verde); stroke: var(--p-verde); stroke-width: 2; transition: fill .25s ease, stroke .25s ease; }
.cdm-p-prog-marca path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s ease; }
.cdm-p-prog-item[data-cdm-st="espera"] { color: var(--p-tinta-2); }
.cdm-p-prog-item[data-cdm-st="espera"] circle { fill: none; stroke: var(--p-borda); }
.cdm-p-prog-item[data-cdm-st="espera"] path,
.cdm-p-prog-item[data-cdm-st="envia"] path { opacity: 0; }
.cdm-p-prog-item[data-cdm-st="envia"] circle { fill: none; stroke: var(--cdm-laranja); stroke-dasharray: 38 19; }
.cdm-p-prog-item[data-cdm-st="envia"] .cdm-p-prog-marca svg { animation: cdm-gira .8s linear infinite; }
@keyframes cdm-gira { to { transform: rotate(360deg); } }

/* o ponteiro do mouse: escolhe o modelo e clica em Enviar configurações */
.cdm-p-mouse {
	position: absolute; z-index: 8; left: 0; top: 0; width: 26px; height: 30px; opacity: 0;
	transform: translate(587px, 241px); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
	transition: transform .7s cubic-bezier(.65, 0, .35, 1), opacity .3s ease;
}
.cdm-p .cdm-p-mouse svg { width: 26px; height: 30px; }
.cdm-p-mouse path { fill: #111; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.cdm-p-clique { position: absolute; left: -19px; top: -20px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--cdm-laranja); opacity: 0; }

/* ---------------------------------------------------------------- o voo do SMS (por cima dos dois aparelhos) */
.cdm-palco .cdm-voo { position: absolute; z-index: 6; left: 0; top: 0; width: calc(var(--cdm-w) * 1px); height: calc(var(--cdm-h) * 1px); max-width: none; overflow: visible; }
.cdm-voo-trilho { fill: none; stroke: var(--cdm-trilho); stroke-width: 2; stroke-dasharray: 1.5 7; stroke-linecap: round; opacity: 0; transition: opacity .35s ease; }
.cdm-voo-rastro { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .35s ease; }
.cdm-voo-rastro--ida { stroke: var(--cdm-laranja); filter: drop-shadow(0 0 4px rgba(241, 96, 0, .55)); }
.cdm-voo-rastro--volta { stroke: var(--cdm-verde); filter: drop-shadow(0 0 4px rgba(22, 163, 74, .5)); }
.cdm-pacote { opacity: 0; transition: opacity .2s ease; }
.cdm-pacote circle { fill: var(--cdm-laranja); }
.cdm-pacote--volta circle { fill: var(--cdm-verde); }
.cdm-pacote .cdm-pacote-halo { opacity: .22; }
.cdm-pacote-ico { fill: #fff; }
.cdm-pacote-ico--traco { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cdm-voo[data-ida="1"] .cdm-pacote--ida,
.cdm-voo[data-volta="1"] .cdm-pacote--volta,
.cdm-voo[data-ida="1"] .cdm-voo-trilho--ida,
.cdm-voo[data-ida="2"] .cdm-voo-trilho--ida,
.cdm-voo[data-ida="1"] .cdm-voo-rastro--ida,
.cdm-voo[data-ida="2"] .cdm-voo-rastro--ida,
.cdm-voo[data-volta="1"] .cdm-voo-trilho--volta,
.cdm-voo[data-volta="2"] .cdm-voo-trilho--volta,
.cdm-voo[data-volta="1"] .cdm-voo-rastro--volta,
.cdm-voo[data-volta="2"] .cdm-voo-rastro--volta { opacity: 1; }

/* ---------------------------------------------------------------- parte 1 (estado do fim = sem classe) */
/* o mesmo chip, aceso nos dois aparelhos enquanto o SMS vai e volta */
.cdm-1id .cdm-t-campo--num { box-shadow: 0 0 0 3px rgba(239, 85, 0, .55); }
.cdm-1id .cdm-p-cartao--a1 .cdm-p-cartao-chip { background: rgba(241, 96, 0, .12); box-shadow: 0 0 0 2px rgba(241, 96, 0, .6); }
.cdm-1id .cdm-t-envio[data-cdm-linha1] { box-shadow: 0 0 0 3px rgba(239, 85, 0, .45); }

.cdm-roda.cdm--a1:not(.cdm-b1) .cdm-t-cursor { opacity: 1; animation: cdm-pisca 1s steps(2, jump-none) infinite; }
@keyframes cdm-pisca { 50% { opacity: 0; } }
.cdm-aperta .cdm-t-botao { transform: scale(.96); filter: brightness(.9); }

.cdm-roda.cdm--a1:not(.cdm-b4) .cdm-t-aviso,
.cdm--a2 .cdm-t-aviso { opacity: 0; transform: translateY(-130%); }
.cdm-roda.cdm--a1:not(.cdm-b4) .cdm-t-badge-a { opacity: 1; }
.cdm-roda.cdm--a1:not(.cdm-b4) .cdm-t-badge-b { opacity: 0; }

.cdm-roda.cdm--a1:not(.cdm-b5) .cdm-p-v--alvo { --cor: #9CA3AF; }
.cdm-b3 .cdm-p-onda--a1 > i { animation: cdm-onda 1.1s cubic-bezier(.23, 1, .32, 1) both; }
.cdm-b3 .cdm-p-onda--a1 > i + i { animation-delay: .22s; }

/* a parte 2 tira o cartão do Sportage e devolve o veículo novo */
.cdm--a2 .cdm-p-cartao--a1 { opacity: 0; transform: translateY(8px); }
.cdm--a1 .cdm-p-cartao--a2,
.cdm--a1 [data-cdm-novo] { opacity: 0; }
.cdm--a1 .cdm-p-cartao--a2 { transform: translateY(8px); }
.cdm--a1 .cdm-p-prog,
.cdm-roda.cdm--a2:not(.cdm-c3) .cdm-p-prog { opacity: 0; transform: translateY(10px); }

/* ---------------------------------------------------------------- parte 2 */
.cdm--a2 .cdm-t-rola { transform: translateY(-322px); }
.cdm-roda.cdm--a2:not(.cdm-c1) .cdm-p-modelo-a { opacity: 1; }
.cdm-roda.cdm--a2:not(.cdm-c1) .cdm-p-modelo-b { opacity: 0; }
.cdm-2foco .cdm-p-campo--modelo { border-color: var(--cdm-laranja); box-shadow: 0 0 0 4px rgba(241, 96, 0, .18); }
.cdm-roda.cdm--a2.cdm-c2:not(.cdm-2some) .cdm-p-mouse { opacity: 1; }
.cdm-2mira .cdm-p-mouse { transform: translate(448px, 466px); }
.cdm-2clique .cdm-p-clique { animation: cdm-onda .6s cubic-bezier(.23, 1, .32, 1) both; }
.cdm-2aperta .cdm-p-enviar { transform: scale(.97); filter: brightness(.9); }
.cdm-roda.cdm--a2:not(.cdm-c4) .cdm-p-prog-a { opacity: 1; }
.cdm-roda.cdm--a2:not(.cdm-c4) .cdm-p-prog-b { opacity: 0; }
.cdm-roda.cdm--a2:not(.cdm-c5) [data-cdm-novo] { opacity: 0; transform: rotate(var(--r)) scale(.4); }
.cdm-roda.cdm--a2 [data-cdm-novo] { transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.cdm-c5 .cdm-p-onda--a2 > i { animation: cdm-onda 1.2s cubic-bezier(.23, 1, .32, 1) both; }
.cdm-c5 .cdm-p-onda--a2 > i + i { animation-delay: .25s; }
.cdm-roda.cdm--a2:not(.cdm-c6) .cdm-p-cartao--a2 { opacity: 0; transform: translateY(8px); }

/* a volta do laço: as telas apagam e acendem de novo, em vez de desmontar à vista */
.cdm-sai .cdm-t,
.cdm-sai .cdm-p,
.cdm-sai .cdm-voo { opacity: 0; }
.cdm-palco .cdm-voo { transition: opacity .35s ease; }

/* trava de um quadro nos saltos (começo, botões das partes, volta do laço) */
.cdm-mudo,
.cdm-mudo * { transition: none !important; }

/* ---------------------------------------------------------------- controles (fora do palco) */
.cdm-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 26px; }
.cdm-pausa[hidden], .cdm-atos[hidden] { display: none; }
.cdm-pausa {
	display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
	border: 1px solid var(--v3-line-strong); background: transparent; color: var(--v3-ink-2); cursor: pointer;
	touch-action: manipulation; -webkit-tap-highlight-color: transparent;
	transition: border-color .18s ease, color .18s ease, transform .14s cubic-bezier(.23, 1, .32, 1);
}
.cdm-pausa:active { transform: scale(.95); }
.cdm-pausa-ico { display: block; width: 15px; height: 15px; fill: currentColor; }
.cdm-pausa-ico-b { display: none; }
.cdm.is-parado .cdm-pausa-ico-a { display: none; }
.cdm.is-parado .cdm-pausa-ico-b { display: block; }
.cdm-so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cdm-atos { display: flex; flex-wrap: wrap; gap: 10px; }
.cdm-ato {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 9px;
	min-width: 236px; padding: 10px 16px 11px 11px; border-radius: 14px;
	border: 1px solid var(--v3-line); background: var(--v3-card); color: var(--v3-ink-3-strong);
	font: 600 14.5px/1.2 var(--v3-body); text-align: left; cursor: pointer;
	touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
	transition: border-color .2s ease, color .2s ease, transform .14s cubic-bezier(.23, 1, .32, 1);
}
.cdm-ato:active { transform: scale(.98); }
.cdm-ato[aria-pressed="true"] { color: var(--v3-ink); border-color: var(--v3-line-strong); }
.cdm-ato-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--v3-page-alt); color: var(--v3-ink-2); font: 700 12.5px/1 var(--v3-body); transition: background-color .2s ease, color .2s ease; }
.cdm-ato[aria-pressed="true"] .cdm-ato-n { background: var(--v3-brand); color: #fff; }
.cdm-ato-barra { grid-column: 1 / -1; display: block; height: 3px; border-radius: 2px; background: var(--v3-line); overflow: hidden; }
.cdm-ato-barra i { display: block; height: 100%; background: var(--v3-brand); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.cdm-ato[aria-pressed="true"] .cdm-ato-barra i { transform: scaleX(var(--p, 1)); }
@media (hover: hover) and (pointer: fine) {
	.cdm-pausa:hover { color: var(--v3-ink); border-color: var(--v3-ink-3); }
	.cdm-ato:hover { color: var(--v3-ink); }
}

.cdm-legendas { display: grid; flex-basis: 100%; }
.cdm .cdm-legenda { grid-area: 1 / 1; max-width: 640px; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--v3-ink-2); transition: opacity .35s ease; }
.cdm--a1 .cdm-legenda--2,
.cdm--a2 .cdm-legenda--1 { opacity: 0; }

/* ---------------------------------------------------------------- escala sem JavaScript (sempre para menos) */
@media (max-width: 1216px) { .cdm { --s: .898; } }
@media (max-width: 1099px) { .cdm { --s: .811; } }
@media (max-width: 999px)  { .cdm { --s: .725; } }
@media (max-width: 899px)  { .cdm { --s: .638; } }
@media (max-width: 799px)  { .cdm { --s: .551; } }

/* ---------------------------------------------------------------- celular: o tablet em cima, o celular na frente */
@media (max-width: 699px) {
	.v3-cmd-hero--faixa { padding: 48px 0 56px; }
	.cdm { --cdm-w: 390; --cdm-h: 600; --s: .8; --kf: .42051; --kt: .29831; max-width: 440px; margin: 34px auto 0; }

	.cdm-palco::before { left: 0; top: 60px; bottom: 0; background: radial-gradient(ellipse 60% 50% at 60% 55%, var(--cdm-brilho), transparent 72%); }
	.cdm-chao--fone { left: 214px; top: 570px; width: 160px; height: 22px; }
	.cdm-chao--tab { left: 20px; top: 262px; width: 350px; height: 18px; filter: blur(12px); opacity: .7; }

	.cdm-tab { left: 8px; top: 8px; width: 374px; height: 267px; padding: 2px; border-radius: 22px; }
	.cdm-tab-vidro { padding: 9px; border-radius: 20px; }
	.cdm-tab-vidro::before { top: 2.5px; width: 4px; height: 4px; margin-left: -2px; }
	.cdm-tab-tela { width: 352px; height: 245px; border-radius: 9px; }

	.cdm-fone { left: 206px; top: 217px; width: 176px; height: 367px; padding: 6px; border-radius: 30px; }
	.cdm-fone::before { top: 70px; height: 18px; box-shadow: 0 30px 0 0 #3a3d44, 0 60px 0 0 #3a3d44; }
	.cdm-fone::after { top: 100px; height: 42px; }
	.cdm-fone-tela { width: 164px; height: 355px; border-radius: 24px; }

	.cdm { --cdm-ida: -.2; --cdm-volta: .26; display: grid; }

	/* Os controles sobem para o canto livre do palco, embaixo do tablet e ao
	   lado do celular. Na mesma célula da grade que o palco: se a legenda for
	   maior que o canto, a célula cresce e nada invade a seção de baixo. */
	.cdm-quadro, .cdm-controles { grid-area: 1 / 1; }
	.cdm-controles {
		position: relative; z-index: 1; align-self: start; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 9px;
		width: calc(192px * var(--s)); margin: calc(284px * var(--s)) 0 0 calc(6px * var(--s));
	}
	.cdm-atos { flex-direction: column; gap: 7px; }
	.cdm-ato { min-width: 0; padding: 8px 10px 9px 8px; font-size: 12.5px; column-gap: 8px; row-gap: 7px; border-radius: 12px; }
	.cdm-ato-n { width: 20px; height: 20px; font-size: 11px; }
	.cdm .cdm-legenda { font-size: 12.5px; line-height: 1.42; }
	.cdm-legendas { order: 2; }
	.cdm-pausa { order: 3; width: 36px; height: 36px; }
}
@media (max-width: 359px) {
	.cdm { --s: .69; }
	.cdm-ato { font-size: 12.5px; }
	.cdm .cdm-legenda { font-size: 12px; }
}

/* ---------------------------------------------------------------- movimento reduzido */
/* O JS não põe .cdm-roda: a cena fica parada no fim da parte 1, e os botões
   das partes trocam o retrato. Nada desliza nem pisca. */
@media (prefers-reduced-motion: reduce) {
	.cdm *, .cdm *::before, .cdm *::after { transition: none !important; }
}