/* =========================================================================
   O celular mandando comando para os rastreadores (v3.27.0). Par do
   assets/js/sms-cena.js; o PHP mora em inc/sms-cena.php e as telas do app no
   assets/css/sms-telas.css.
     topo dos Pacotes de SMS   A, Leque: celular > Servidor Smart > rastreadores
     cartão do menu Preços     B, O parque inteiro: a onda e os ladrilhos

   O palco tem tamanho fixo (heroi 560 x 540, cel 360 x 460, menu 320 x 200)
   e encolhe inteiro para a caixa: a escala é a largura da caixa dividida pela
   do palco (tan(atan2())), e o JS dá a escala ao navegador que não sabe fazer
   a conta (--sx-k).

   O PHP imprime o quadro do fim (tudo confirmado). No topo, com a classe
   v3-mv-js no <html>, o que a cena acende começa escondido até o JS pegar o
   palco (classe sx-vivo); se o JS não chegar, tudo aparece em 3 segundos.
   ========================================================================= */

/* ---- quadro e palco ------------------------------------------------------- */
.sx-quadro { position: relative; display: block; width: 100%; container-type: inline-size; }
.sx-quadro--heroi { aspect-ratio: 560 / 540; }
.sx-quadro--cel { aspect-ratio: 360 / 460; }
.sx-quadro--menu { aspect-ratio: 320 / 200; }
.sx-palco {
	position: absolute; left: 0; top: 0; display: block;
	transform: scale(var(--sx-k, 1)); transform-origin: 0 0;
	-webkit-user-select: none; user-select: none; pointer-events: none;
}
.sx--heroi { width: 560px; height: 540px; }
.sx--cel { width: 360px; height: 460px; }
.sx--menu { width: 320px; height: 200px; }
@supports (transform: scale(tan(atan2(100cqw, 390px)))) {
	.sx--heroi { transform: scale(tan(atan2(100cqw, 560px))); }
	.sx--cel { transform: scale(tan(atan2(100cqw, 360px))); }
	.sx--menu { transform: scale(tan(atan2(100cqw, 320px))); }
}
.sx-palco * { box-sizing: border-box; }
/* a volta ao começo do ciclo é seca: nada desliza para trás */
.sx-palco.sx-sem, .sx-palco.sx-sem * { transition: none !important; }

/* ---- antes do JS ------------------------------------------------------------ */
@keyframes sx-socorro { to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	html.v3-mv-js .sx-palco:not(.sx-vivo) :is(.sx-selo, .sx-resumo, .sx-via-aceso, .sx-via-volta, [data-sx-cmd]) {
		opacity: 0;
		animation: sx-socorro .5s 3s both;
	}
}

/* ---- tokens ------------------------------------------------------------------ */
.sx {
	--sx-tinta: #111827;
	--sx-tinta-2: #4B5563;
	--sx-tinta-3: #6B7280;
	--sx-fio: rgba(17, 24, 39, .26);
	--sx-laranja: #F16000;
	--sx-laranja-txt: #B84A00;
	--sx-laranja-suave: rgba(241, 96, 0, .13);
	--sx-verde: #16A34A;
	--sx-verde-txt: #15803D;
	--sx-ambar-txt: #B45309;
	--sx-ambar-suave: rgba(245, 158, 11, .2);
	--sx-cinza: #6B7280;
	--sx-cartao: #FFFFFF;
	--sx-linha: #E4E7EB;
	--sx-trilho: #EEF0F3;
	--sx-vidro: rgba(255, 255, 255, .84);
	--sx-vidro-linha: rgba(17, 24, 39, .08);
	--sx-sombra: 0 1px 2px rgba(17, 24, 39, .06), 0 10px 24px -12px rgba(17, 24, 39, .3);
	--sx-sombra-forte: 0 1px 2px rgba(17, 24, 39, .06), 0 24px 48px -18px rgba(17, 24, 39, .38);
	--sx-celula: rgba(70, 60, 120, .085);
	--sx-calor: rgba(241, 96, 0, .07);
	--sx-cel-sombra: 0 2px 3px rgba(17, 24, 39, .16), 0 26px 50px -18px rgba(17, 24, 39, .42), 0 60px 90px -40px rgba(17, 24, 39, .32);
	--sx-cel-aro: 0 0 0 .5px rgba(0, 0, 0, .6);
	--sx-chao: rgba(15, 23, 42, .2);
}
:root:not([data-theme="light"]) .sx {
	--sx-tinta: #EDEFF2;
	--sx-tinta-2: #AEB6C0;
	--sx-tinta-3: #88919C;
	--sx-fio: rgba(255, 255, 255, .24);
	--sx-laranja-txt: #FF9147;
	--sx-laranja-suave: rgba(241, 96, 0, .2);
	--sx-verde: #22C55E;
	--sx-verde-txt: #4ADE80;
	--sx-ambar-txt: #FBBF24;
	--sx-ambar-suave: rgba(251, 191, 36, .16);
	--sx-cinza: #9CA3AF;
	--sx-cartao: #171C22;
	--sx-linha: #262D35;
	--sx-trilho: #262D35;
	--sx-vidro: rgba(23, 28, 34, .82);
	--sx-vidro-linha: rgba(255, 255, 255, .09);
	--sx-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 26px -12px rgba(0, 0, 0, .7);
	--sx-sombra-forte: 0 1px 2px rgba(0, 0, 0, .3), 0 26px 50px -18px rgba(0, 0, 0, .8);
	--sx-celula: rgba(190, 180, 255, .055);
	--sx-calor: rgba(241, 96, 0, .1);
	--sx-cel-sombra: 0 2px 3px rgba(0, 0, 0, .5), 0 30px 60px -20px rgba(0, 0, 0, .85);
	--sx-cel-aro: 0 0 0 1px rgba(255, 255, 255, .09);
	--sx-chao: rgba(0, 0, 0, .45);
}

/* ---- fundo: o céu de células e um calor no meio -------------------------------- */
.sx .sx-fundo { position: absolute; left: -20px; top: -20px; z-index: 0; display: block; width: calc(100% + 40px); height: calc(100% + 40px); max-width: none; color: var(--sx-celula); }
.sx--heroi .sx-fundo, .sx--cel .sx-fundo {
	-webkit-mask-image: radial-gradient(ellipse 58% 60% at 58% 50%, #000 20%, transparent 76%);
	mask-image: radial-gradient(ellipse 58% 60% at 58% 50%, #000 20%, transparent 76%);
}
.sx-calor { position: absolute; z-index: 0; left: 58%; top: 52%; width: 640px; height: 640px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--sx-calor) 0%, transparent 62%); }

/* ---- linhas ---------------------------------------------------------------------- */
.sx .sx-vias { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
.sx-via path { fill: none; }
.sx-chao { fill: var(--sx-chao); }
.sx-via-base { stroke: var(--sx-fio); stroke-width: 1.2; stroke-dasharray: 2.5 5; stroke-linecap: round; }
.sx-via-aceso { stroke: var(--sx-laranja); stroke-width: 1.4; stroke-linecap: round; opacity: .45; transition: opacity .6s ease; }
.sx-via-volta { stroke: var(--sx-verde); stroke-width: 1.5; stroke-linecap: round; transition: opacity .6s ease; }
.sx-via-rastro { stroke: var(--sx-laranja); stroke-linecap: round; }
.sx-via-rastro--1 { stroke-width: 1.6; opacity: .22; }
.sx-via-rastro--2 { stroke-width: 2.2; opacity: .5; }
.sx-via-rastro--3 { stroke-width: 2.8; opacity: .95; }
.sx-via circle.sx-via-cabeca { fill: #FFF4EC; }
.sx-via circle.sx-via-cabeca-v { fill: var(--sx-verde); }
:root:not([data-theme="light"]) .sx-via-aceso { opacity: .6; }
.sx-palco.sx-apaga .sx-via-aceso, .sx-palco.sx-apaga .sx-via-volta { opacity: 0; }
.sx-onda { fill: none; stroke: var(--sx-laranja); stroke-width: 1.8; }

/* ---- o celular --------------------------------------------------------------------
   Titânio escuro: a borda de metal com o brilho dos dois lados (onde o metal
   faz a curva), o vidro preto, a tela, os botões de lado e um reflexo leve. */
.sx-cel { position: absolute; z-index: 3; }
.sx-cel::after {
	content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: -12px; height: 26px;
	background: radial-gradient(closest-side, var(--sx-chao), transparent);
}
.sx-cel-corpo {
	position: absolute; inset: 0; border-radius: var(--r);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .28) 0, rgba(255, 255, 255, 0) 1.1%, rgba(255, 255, 255, 0) 98.9%, rgba(255, 255, 255, .14) 100%),
		linear-gradient(90deg, #222429 0%, #8F939A 1.3%, #44474D 3.4%, #2C2E33 7%, #2C2E33 93%, #44474D 96.6%, #8F939A 98.7%, #222429 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), var(--sx-cel-aro), var(--sx-cel-sombra);
}
.sx-cel-vidro {
	position: absolute; inset: var(--b1); overflow: hidden; border-radius: calc(var(--r) - var(--b1));
	background: #040405; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.sx-cel-tela {
	position: absolute; inset: var(--b2); overflow: hidden; isolation: isolate;
	border-radius: calc(var(--r) - var(--b1) - var(--b2));
	background: var(--t-fundo);
}
.sx-cel-tela > .sm-t { position: absolute; left: 0; top: 0; }
.sx-cel-tela > .sm-t[hidden] { display: none; }
.sx-cel-brilho {
	position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
	background: linear-gradient(116deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 23%, rgba(255, 255, 255, 0) 41%);
}
.sx-cel-bt { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #1A1B1F, #767980 55%, #2B2D32); }
.sx-cel-bt--acao { left: -2.2px; top: 17%; height: 4.6%; }
.sx-cel-bt--mais { left: -2.2px; top: 24.6%; height: 8.4%; }
.sx-cel-bt--menos { left: -2.2px; top: 35%; height: 8.4%; }
.sx-cel-bt--liga { right: -2.2px; top: 27%; height: 13%; }
.sx--menu .sx-cel { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.sx--menu .sx-cel::after { display: none; }
/* o toque do dedo, no espaço da tela (390 x 844) */
.sx-toque { position: absolute; z-index: 5; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(120, 120, 128, .38); opacity: 0; pointer-events: none; }
.sx .sm-t-campo--cmd .sm-t-valor { overflow: hidden; }
.sx .sm-t-cursor { flex: none; }
.sx .sm-t-barra i { transition: width .45s cubic-bezier(.23, 1, .32, 1); }

/* ---- o Servidor Smart ------------------------------------------------------------- */
.sx-hub {
	position: absolute; z-index: 2; display: grid; place-items: center;
	border-radius: 30%; background: var(--sx-cartao); border: 1px solid var(--sx-linha); box-shadow: var(--sx-sombra);
	color: var(--sx-cinza); transition: color .3s ease, border-color .3s ease, box-shadow .4s ease;
}
.sx-hub svg { display: block; width: 44%; height: 44%; }
.sx-hub small {
	position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
	font: 500 10px/1 var(--v3-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: var(--sx-tinta-3);
}
.sx--cel .sx-hub small { top: calc(100% + 7px); width: 64px; white-space: normal; text-align: center; line-height: 1.25; font-size: 9px; }
.sx-hub-onda { position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--sx-laranja); opacity: 0; }
.sx-hub.is-on { color: var(--sx-laranja); border-color: rgba(241, 96, 0, .45); box-shadow: 0 0 0 6px var(--sx-laranja-suave), var(--sx-sombra); }
.sx-palco.sx-apaga .sx-hub.is-on { color: var(--sx-cinza); border-color: var(--sx-linha); box-shadow: var(--sx-sombra); }

/* ---- os rastreadores ------------------------------------------------------------------ */
.sx-rast { position: absolute; z-index: 2; display: block; }
.sx-rast > svg { display: block; width: 100%; height: auto; max-width: none; overflow: visible; }
.sx-led { transition: fill .25s ease; }
.sx-led--gsm { fill: #1E4D30; animation: sx-led-calmo 2.6s steps(1, end) var(--sx-atraso, 0s) infinite; }
.sx-led--gps { fill: #2457A8; }
@keyframes sx-led-calmo { 0%, 86% { fill: #1E4D30; } 87%, 100% { fill: #2BBF62; } }
@keyframes sx-led-pisca { 50% { fill: #3A2618; filter: none; } }
.sx-rast.is-chega .sx-led--gsm { fill: #FF8A3D; filter: drop-shadow(0 0 4px rgba(255, 120, 40, .95)); animation: sx-led-pisca .14s steps(2, jump-none) 6; }
.sx-rast.is-ok .sx-led--gsm { fill: #2BD46C; filter: drop-shadow(0 0 4px rgba(43, 212, 108, .9)); animation: none; }
.sx-rast.is-ok .sx-led--gps { fill: #4C8DF6; filter: drop-shadow(0 0 3px rgba(76, 141, 246, .8)); }
.sx-palco.sx-apaga .sx-rast.is-ok .sx-led { filter: none; }
/* o visto verde no canto (no celular e no menu, onde o selo não cabe) */
.sx-rast-ok {
	position: absolute; right: -2px; top: -6px; width: 17px; height: 17px; border-radius: 50%;
	display: grid; place-items: center; background: var(--sx-verde); color: #fff;
	box-shadow: 0 0 0 2px var(--sx-cartao), 0 4px 10px -3px rgba(22, 163, 74, .7);
	opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.sx-rast-ok svg { display: block; width: 11px; height: 11px; }
.sx-rast.is-ok .sx-rast-ok { opacity: 1; transform: none; }
.sx-palco.sx-apaga .sx-rast-ok { opacity: 0; transform: scale(.6); }

/* ---- o selo de status de cada rastreador ---------------------------------------------- */
.sx-selo {
	position: absolute; z-index: 4; display: grid; height: 24px; padding: 0 10px 0 8px; border-radius: 12px;
	background: var(--sx-vidro); border: 1px solid var(--sx-vidro-linha); box-shadow: var(--sx-sombra);
	-webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
	font: 600 11.5px/1 var(--v3-body); white-space: nowrap;
	opacity: 0; transform: translateY(5px) scale(.95);
	transition: opacity .3s ease, transform .5s cubic-bezier(.23, 1, .32, 1);
}
.sx-selo.is-on { opacity: 1; transform: none; }
.sx-palco.sx-apaga .sx-selo { opacity: 0; transform: translateY(-3px); }
.sx-selo > span {
	grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px;
	opacity: 0; filter: blur(3px); transform: translateY(3px);
	transition: opacity .22s ease, filter .22s ease, transform .3s cubic-bezier(.23, 1, .32, 1);
}
.sx-selo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sx-selo svg { display: block; width: 14px; height: 14px; flex: none; }
.sx-st--env { color: var(--sx-cinza); }
.sx-st--env i { animation: sx-respira 1s ease-in-out infinite; }
.sx-st--op { color: var(--sx-ambar-txt); }
.sx-st--op i { box-shadow: 0 0 0 3px var(--sx-ambar-suave); }
.sx-st--ok { color: var(--sx-verde-txt); }
.sx-selo[data-st="env"] .sx-st--env,
.sx-selo[data-st="op"] .sx-st--op,
.sx-selo[data-st="ok"] .sx-st--ok { opacity: 1; filter: none; transform: none; }
@keyframes sx-respira { 50% { opacity: .3; } }

/* ---- os ladrilhos do parque (cartão do menu) ----------------------------------------------- */
.sx-lad {
	position: absolute; z-index: 2; display: grid; justify-items: center; align-content: center;
	border-radius: 13px; background: var(--sx-cartao); border: 1px solid var(--sx-linha);
	box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
	transition: border-color .35s ease, background-color .45s ease, box-shadow .35s ease;
}
.sx-lad > svg { display: block; width: 72%; height: auto; max-width: none; overflow: visible; }
.sx-lad .sx-rast-ok { right: -5px; top: -5px; width: 16px; height: 16px; }
.sx-lad .sx-rast-ok svg { width: 10px; height: 10px; }
.sx-lad[data-st="chega"] { border-color: var(--sx-laranja); box-shadow: 0 0 0 4px var(--sx-laranja-suave); }
.sx-lad[data-st="chega"] .sx-led--gsm { fill: #FF8A3D; filter: drop-shadow(0 0 3px rgba(255, 120, 40, .95)); animation: sx-led-pisca .14s steps(2, jump-none) 4; }
.sx-lad[data-st="op"] { border-color: rgba(217, 119, 6, .45); background: color-mix(in srgb, var(--sx-cartao) 90%, #F59E0B); }
.sx-lad[data-st="op"] .sx-led--gsm { fill: #F59E0B; animation: sx-led-pisca 1s steps(2, jump-none) infinite; }
.sx-lad[data-st="ok"] { border-color: rgba(22, 163, 74, .42); background: color-mix(in srgb, var(--sx-cartao) 91%, #16A34A); }
.sx-lad[data-st="ok"] .sx-led--gsm { fill: #2BD46C; filter: drop-shadow(0 0 3px rgba(43, 212, 108, .9)); animation: none; }
.sx-lad[data-st="ok"] .sx-rast-ok { opacity: 1; transform: none; }

/* ---- o relatório de entrega ------------------------------------------------------------------ */
.sx-resumo {
	position: absolute; z-index: 6; display: grid; gap: 9px; padding: 14px 16px 15px; border-radius: 18px;
	background: var(--sx-vidro); border: 1px solid var(--sx-vidro-linha); box-shadow: var(--sx-sombra-forte);
	-webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
	opacity: 0; transform: translateY(12px) scale(.97); transform-origin: 50% 100%;
	transition: opacity .35s ease, transform .6s cubic-bezier(.23, 1, .32, 1);
}
.sx-resumo.is-on { opacity: 1; transform: none; }
.sx-palco.sx-apaga .sx-resumo { opacity: 0; transform: translateY(6px); }
.sx-resumo-rot { font: 600 9.5px/1 var(--v3-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sx-laranja-txt); }
.sx-resumo-linha { display: flex; align-items: center; gap: 8px; font: 650 16px/1.1 var(--v3-body); letter-spacing: -.01em; color: var(--sx-tinta); white-space: nowrap; }
.sx-resumo-linha svg { display: block; width: 19px; height: 19px; flex: none; color: var(--sx-verde); }
.sx-resumo-barra { display: block; height: 6px; border-radius: 3px; background: var(--sx-trilho); overflow: hidden; }
.sx-resumo-barra i { display: block; height: 100%; border-radius: inherit; background: var(--sx-verde); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s cubic-bezier(.23, 1, .32, 1) .15s; }
.sx-resumo.is-on .sx-resumo-barra i { transform: none; }
.sx-resumo small { font: 500 12px/1.2 var(--v3-body); color: var(--sx-tinta-3); white-space: nowrap; }
.sx-resumo small b { font-weight: 650; color: var(--sx-tinta-2); }

/* ---- no topo dos Pacotes de SMS: o formato que cabe na coluna ---------------------------------- */
.v3-sms-hero-visual--cena { container-type: inline-size; }
.v3-sms-hero-visual--cena .sx-quadro--heroi { max-width: 560px; margin-inline: auto; }
.v3-sms-hero-visual--cena .sx-quadro--cel { display: none; max-width: 420px; margin-inline: auto; }
@container (max-width: 469.98px) {
	.v3-sms-hero-visual--cena .sx-quadro--heroi { display: none; }
	.v3-sms-hero-visual--cena .sx-quadro--cel { display: block; }
}

/* ---- no cartão do menu Preços --------------------------------------------------------------------- */
.sl-header .sl-nav .v3-mega-arte > .sx-quadro {
	position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
	transition: scale .3s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
	.sl-header .sl-nav .v3-mega-card:hover .v3-mega-arte > .sx-quadro { scale: 1.03; }
}

/* ---- reduzir movimento: o quadro do fim, parado ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sx-led--gsm, .sx-st--env i, .sx .sm-t-cursor { animation: none !important; }
}