/* ==========================================================================
   Página do Órbita Gestão (page-app-orbita.php), v3.22.0

   Carrega só nesta página, DEPOIS do app.css (a base que ela divide com as
   páginas do Hybrid, do Smart SMS e do SmartsApp: abas, QR, faixa, "Toque e
   veja", mosaico, fim). Aqui fica o que é só dela:
     1. o céu com as órbitas (os anéis da marca do Órbita e os três
        satélites: azul do financeiro, verde do atendimento, vermelho dos
        avisos) e o brilho laranja
     2. a abertura: o botão do WhatsApp e a cena do computador e do celular
     3. o painel do gerente no computador (1000 por 640, encolhido por --kb)
     4. as telas do celular (390 por 844, encolhidas por --k)
     5. o "Toque e veja", os cartões do mosaico e o fim

   As telas seguem o tema "modern" do Órbita: fundo cinza-claro, cartões
   brancos de borda fina, o semáforo em pílulas com bolinha. A cor de destaque
   das telas é a da central de exemplo (verde-água, --o-m*), e não o laranja
   do Órbita: é assim que o cliente final vê o sistema, com a marca de quem
   assina. No tema escuro do site, as telas vão para o modo escuro do Órbita.

   A cena tem quatro etapas, que o app-orbita.js troca em data-etapa:
   0 a validade vence em 3 dias, 1 o cliente gera o PIX, 2 o PIX é pago (o
   painel recebe o aviso e a validade renova), 3 de volta à área do cliente,
   em dia. O template já sai com data-etapa="3": sem JavaScript, ou com
   "reduzir movimento", fica o fim da história.
   ========================================================================== */

.ah--ob {
	--ah-ceu: #F3F5F8;
	--ah-ceu-alto: #E4E9F0;
	--ob-orbita: rgba(240, 96, 0, .20);
	--ob-brilho-1: rgba(240, 96, 0, .20);
	--ob-brilho-2: rgba(240, 96, 0, .06);
	--ob-laranja: #F06000;
	--ob-azul: #1898C0;
	--ob-verde-sat: #30B060;
	--ob-vermelho-sat: #E85858;
	--ob-verde: #15803D;
	--ob-verde-claro: rgba(34, 197, 94, .16);
	--ob-ambar: #B45309;
	--ob-violeta: #6D28D9;

	/* o Órbita claro (tema modern) */
	--o-corpo: #E7E9EE;
	--o-cont: #F4F6F9;
	--o-fundo: #FAFAFA;
	--o-cartao: #FFFFFF;
	--o-borda: #E2E8F0;
	--o-tinta: #1E293B;
	--o-texto: #334155;
	--o-texto-2: #64748B;
	--o-texto-3: #94A3B8;
	--o-campo: #F1F5F9;
	--o-sombra: 0 1px 2px rgba(15, 23, 42, .05), 0 5px 14px rgba(15, 23, 42, .09);
	--o-vidro: rgba(255, 255, 255, .62);
	--o-verde: #047857;
	--o-verde-f: #ECFDF5;
	--o-verde-b: #A7F3D0;
	--o-verde-p: #10B981;
	--o-ambar: #B45309;
	--o-ambar-f: #FFFBEB;
	--o-ambar-b: #FDE68A;
	--o-ambar-p: #F59E0B;
	--o-verm: #B91C1C;
	--o-verm-f: #FEF2F2;
	--o-verm-b: #FECACA;
	--o-verm-p: #EF4444;
	--o-cinza: #64748B;
	--o-cinza-f: #F1F5F9;
	--o-cinza-b: #E2E8F0;
	--o-violeta: #6D28D9;
	--o-violeta-p: #8B5CF6;

	/* a central de exemplo (Farol Rastreamento): verde-água */
	--o-m50: #E6F6F9;
	--o-m100: #CCEEF4;
	--o-m400: #22B0C9;
	--o-m500: #0E95B0;
	--o-m600: #0B7C93;
	--o-m700: #0A6476;
	--o-m-texto: #0A6476;
	--o-m-suave: rgba(14, 149, 176, .12);
}
:root:not([data-theme="light"]) .ah.ah--ob {
	--ah-ceu: #0A0C10;
	--ah-ceu-alto: #12161E;
	--ob-orbita: rgba(255, 145, 71, .16);
	--ob-brilho-1: rgba(240, 96, 0, .26);
	--ob-brilho-2: rgba(240, 96, 0, .07);
	--ob-verde: #4ADE80;
	--ob-verde-claro: rgba(74, 222, 128, .14);
	--ob-ambar: #FBBF24;
	--ob-violeta: #A78BFA;

	/* o Órbita no modo escuro dele */
	--o-corpo: #08090B;
	--o-cont: #0E0F12;
	--o-fundo: #0B0C0E;
	--o-cartao: #141517;
	--o-borda: rgba(255, 255, 255, .10);
	--o-tinta: #FFFFFF;
	--o-texto: #CBD5E1;
	--o-texto-2: #94A3B8;
	--o-texto-3: #64748B;
	--o-campo: rgba(255, 255, 255, .06);
	--o-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .35);
	--o-vidro: rgba(15, 16, 20, .58);
	--o-verde: #6EE7B7;
	--o-verde-f: rgba(16, 185, 129, .15);
	--o-verde-b: rgba(16, 185, 129, .30);
	--o-ambar: #FCD34D;
	--o-ambar-f: rgba(245, 158, 11, .15);
	--o-ambar-b: rgba(245, 158, 11, .30);
	--o-verm: #FCA5A5;
	--o-verm-f: rgba(239, 68, 68, .15);
	--o-verm-b: rgba(239, 68, 68, .30);
	--o-cinza: #CBD5E1;
	--o-cinza-f: rgba(100, 116, 139, .20);
	--o-cinza-b: rgba(148, 163, 184, .25);
	--o-violeta: #C4B5FD;
	--o-m-texto: #6FCFE0;
	--o-m-suave: rgba(34, 176, 201, .16);
}

/* ---------------------------------------------------------------- 1. céu com as órbitas */
.ob-abertura { padding-bottom: 34px; }
.ob-ceu { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--ah-ceu-alto) 0%, var(--ah-ceu) 62%); }
.ah .ob-orbitas {
	position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; color: var(--ob-orbita);
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 66% 52%, #000 30%, transparent 78%);
	mask-image: radial-gradient(ellipse 70% 80% at 66% 52%, #000 30%, transparent 78%);
}
.ob-sat { stroke: var(--ah-ceu); stroke-width: 3; }
.ob-sat--azul { fill: var(--ob-azul); }
.ob-sat--verde { fill: var(--ob-verde-sat); }
.ob-sat--vermelho { fill: var(--ob-vermelho-sat); }
.ob-brilho {
	position: absolute; z-index: 0; left: 70%; top: 54%; width: 1040px; height: 1040px; border-radius: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, var(--ob-brilho-1) 0%, var(--ob-brilho-2) 34%, transparent 62%);
}

/* ---------------------------------------------------------------- 2. abertura */
.ob-abertura-grade { display: grid; grid-template-columns: minmax(0, 450px) minmax(0, 1fr); gap: 30px; align-items: center; }
.ob-abertura-texto { position: relative; z-index: 3; padding-bottom: 40px; }
.ah .ob-h1 { margin: 24px 0 20px; font-size: clamp(40px, 4.2vw, 58px); font-variation-settings: "wdth" 106, "wght" 660; }
.ah .ob-lede { margin: 0; max-width: 450px; font-size: 18px; }
.ah .ob-acoes { justify-content: flex-start; margin-top: 30px; gap: 12px 14px; }
.ah .ob-icone-app { background: #15171C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ah .ob-icone-app svg { width: 28px; height: 28px; }

/* sem o vídeo da abertura, o botão do vídeo é um link para a galeria (v3.23.0) */
.ah a.ah-botao-video { text-decoration: none; }

/* o botão do WhatsApp: verde do próprio WhatsApp, com o número embaixo (é o
   único destino da página, no lugar dos selos das lojas e dos planos) */
.ah .ob-botao-zap {
	display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px 0 9px; border-radius: 16px;
	background: #128C4A; color: #fff; text-decoration: none;
	box-shadow: 0 16px 32px -16px rgba(18, 140, 74, .75), inset 0 0 0 1px rgba(255, 255, 255, .10);
	-webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none;
	transition: transform .16s cubic-bezier(.23, 1, .32, 1), box-shadow .25s ease, background-color .2s ease;
}
.ob-botao-zap-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #25D366; }
.ob-botao-zap-ico svg { width: 25px; height: 25px; color: #fff; }
.ob-botao-zap-txt { display: grid; gap: 4px; text-align: left; }
.ob-botao-zap-txt b { font: 650 16px/1.1 var(--v3-body); color: #fff; }
.ob-botao-zap-txt small { font: 500 12px/1 var(--v3-mono); letter-spacing: .02em; color: rgba(255, 255, 255, .75); }
.ah .ob-botao-zap > .ah-ico { width: 18px; height: 18px; margin-left: 2px; color: rgba(255, 255, 255, .75); transition: transform .2s cubic-bezier(.23, 1, .32, 1), color .2s ease; }
.ah .ob-botao-zap:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
	.ah .ob-botao-zap:hover { background: #0F7A40; box-shadow: 0 18px 38px -14px rgba(18, 140, 74, .85), inset 0 0 0 1px rgba(255, 255, 255, .16); }
	.ah .ob-botao-zap:hover > .ah-ico { color: #fff; transform: translate(2px, -2px); }
}
.ah .ob-botao-funcoes {
	display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 20px; border-radius: 999px;
	border: 1px solid var(--ah-linha); background: var(--ah-vidro); color: var(--ah-tinta); text-decoration: none;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	font: 600 15px/1 var(--v3-body);
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
	transition: border-color .2s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}
.ah .ob-botao-funcoes .ah-ico { width: 17px; height: 17px; color: var(--ah-laranja); }
.ah .ob-botao-funcoes:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
	.ah .ob-botao-funcoes:hover { border-color: var(--ah-laranja); }
}

/* a cena: o painel no computador atrás, o celular do cliente na frente */
/* --kb: a escala do painel de 1000 px dentro do navegador desenhado. Mora na
   cena porque o celular e a etiqueta dele também se posicionam por ela. */
.ob-cena { --kb: .56; position: relative; z-index: 2; height: 690px; }
.ob-dono {
	position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px;
	background: var(--ah-vidro); border: 1px solid var(--ah-vidro-linha); box-shadow: var(--ah-sombra-aviso);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	font: 600 11px/1 var(--v3-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ah-texto-2); white-space: nowrap;
}
.ob-dono::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ob-dono--painel { left: 286px; top: 34px; }
.ob-dono--painel::before { background: var(--ob-laranja); box-shadow: 0 0 0 3px rgba(240, 96, 0, .2); }
.ob-dono--cli { left: 500px; top: 128px; }
.ob-dono--cli::before { background: var(--o-m500); box-shadow: 0 0 0 3px var(--o-m-suave); }

/* o navegador: a barra com o endereço (o da central, não o nosso) e o painel */
.ob-nave {
	position: absolute; left: 6px; top: 74px; z-index: 2; width: calc(1000px * var(--kb)); overflow: hidden;
	border-radius: 14px; background: var(--o-corpo);
	box-shadow: 0 40px 80px -36px rgba(15, 23, 42, .5), 0 0 0 1px rgba(15, 23, 42, .10);
}
:root:not([data-theme="light"]) .ob-nave { box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .10); }
.ob-nave-barra { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; background: var(--o-cartao); border-bottom: 1px solid var(--o-borda); }
.ob-nave-end { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 20px; padding: 0 12px; border-radius: 999px; background: var(--o-campo); font: 500 11px/1 var(--v3-mono); color: var(--o-texto-2); white-space: nowrap; overflow: hidden; }
.ob-nave-end svg { flex: none; width: 10px; height: 10px; color: var(--o-verde-p); }
.ob-nave-tela { position: relative; width: calc(1000px * var(--kb)); height: calc(640px * var(--kb)); overflow: hidden; }
.ob-nave-tela > .ob-p { position: absolute; left: 0; top: 0; transform: scale(var(--kb)); transform-origin: 0 0; }

/* o celular do cliente */
.ob-cel { --w: calc(var(--wn) * 1px); --k: calc(var(--wn) * .94 / 390); }
.ob-cena .ob-cel {
	position: absolute; z-index: 3;
	-webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 99%);
	mask-image: linear-gradient(180deg, #000 84%, transparent 99%);
}
.ob-cel--cli { --wn: 226; left: 480px; top: 166px; }

/* o vidro com o recebido do mês no Mercado Pago (sobe quando o PIX cai) */
.ob-flutua {
	position: absolute; z-index: 5;
	background: var(--ah-vidro); border: 1px solid var(--ah-vidro-linha); box-shadow: var(--ah-sombra-aviso);
	-webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.ob-recebido { left: 0; top: 0; width: 250px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: end; padding: 13px 16px 14px; border-radius: 20px; }
.ah .ob-recebido-rot { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; margin: 0; font: 500 11.5px/1.2 var(--v3-body); color: var(--ah-texto-2); }
.ob-recebido-rot i { width: 8px; height: 8px; border-radius: 50%; background: var(--o-violeta-p); flex: none; }
.ob-recebido > b { font: 700 22px/1 var(--v3-display); letter-spacing: -.02em; color: var(--ah-tinta); font-variation-settings: "wdth" 106, "wght" 700; font-variant-numeric: tabular-nums; }
.ob-recebido-barras { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.ob-recebido-barras i { width: 7px; height: calc(var(--h) * 1%); border-radius: 3px 3px 2px 2px; background: color-mix(in srgb, var(--o-violeta-p) 32%, transparent); }
.ob-recebido-barras .ob-recebido-agora { height: 76%; background: var(--o-violeta-p); transition: height .7s cubic-bezier(.23, 1, .32, 1); }
.ob-cena:is([data-etapa="2"], [data-etapa="3"]) .ob-recebido-agora { height: 100%; }

/* a régua das três etapas, embaixo */
.ob-regua {
	position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0; padding: 12px 10px; list-style: none; border-radius: 20px;
	background: var(--ah-vidro); border: 1px solid var(--ah-vidro-linha); box-shadow: var(--ah-sombra-aviso);
	-webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.ob-regua li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-items: center; padding: 4px 10px; }
.ob-regua li + li { border-left: 1px solid var(--ah-linha); }
.ob-regua i {
	grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ah-pino-vazio); background: transparent;
	transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.ob-regua b { font: 650 13.5px/1.2 var(--v3-body); color: var(--ah-tinta-2); white-space: nowrap; transition: color .4s ease; }
.ob-regua span { font: 500 12px/1.25 var(--v3-body); color: var(--ah-tinta-2); transition: color .4s ease; }
.ob-regua-1 { --c: #E59A22; }
.ob-regua-2 { --c: var(--o-violeta-p); }
.ob-regua-3 { --c: #22A355; }
/* feito: a bolinha pinta; atual: ganha o anel */
.ob-regua-1 i,
.ob-cena:is([data-etapa="2"], [data-etapa="3"]) .ob-regua-2 i,
.ob-cena[data-etapa="3"] .ob-regua-3 i { border-color: var(--c); background: var(--c); }
.ob-regua-1 :is(b, span),
.ob-cena:is([data-etapa="1"], [data-etapa="2"], [data-etapa="3"]) .ob-regua-2 :is(b, span),
.ob-cena[data-etapa="3"] .ob-regua-3 :is(b, span) { color: var(--ah-texto); }
.ob-cena[data-etapa="1"] .ob-regua-2 i { border-color: var(--c); }
.ob-cena[data-etapa="0"] .ob-regua-1 i,
.ob-cena:is([data-etapa="1"], [data-etapa="2"]) .ob-regua-2 i,
.ob-cena[data-etapa="3"] .ob-regua-3 i { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); }
.ob-cena[data-etapa="0"] .ob-regua-1 b,
.ob-cena:is([data-etapa="1"], [data-etapa="2"]) .ob-regua-2 b,
.ob-cena[data-etapa="3"] .ob-regua-3 b { color: var(--ah-tinta); }

/* as variantes da cena: só a da etapa atual fica à mostra */
.ob-troca { display: inline-grid; justify-items: start; align-items: center; vertical-align: middle; }
.ob-troca--bloco { display: grid; align-items: start; }
.ob-troca > .ob-so {
	grid-area: 1 / 1; display: inline-flex; align-items: center; min-width: 0;
	transition: opacity .35s ease, transform .45s cubic-bezier(.23, 1, .32, 1), filter .35s ease, visibility .35s;
}
.ob-troca--bloco > .ob-so { display: block; }
[data-etapa="0"] .ob-so:not(.ob-e0),
[data-etapa="1"] .ob-so:not(.ob-e1),
[data-etapa="2"] .ob-so:not(.ob-e2),
[data-etapa="3"] .ob-so:not(.ob-e3) { opacity: 0; visibility: hidden; transform: translateY(5px) scale(.97); filter: blur(2px); }
/* a volta ao começo do ciclo é seca: nada desliza para trás */
.ob-cena.ob-sem-transicao *,
.ob-cena.ob-sem-transicao *::before,
.ob-cena.ob-sem-transicao *::after { transition: none !important; }
.ob-cena .ob-tela, .ob-cena .ob-nave-tela { transition: opacity .3s ease; }
.ob-cena.ob-apagando .ob-tela, .ob-cena.ob-apagando .ob-nave-tela { opacity: .35; }

/* ---------------------------------------------------------------- 3. o painel no computador (1000 x 640) */
.ob-p {
	width: 1000px; height: 640px; display: grid; grid-template-columns: 196px minmax(0, 1fr); background: var(--o-corpo);
	color: var(--o-texto); font: 400 14px/1.3 var(--v3-body); text-align: left; letter-spacing: 0;
	-webkit-user-select: none; user-select: none; pointer-events: none;
}
.ob-p svg, .ob-t svg { display: block; flex: none; max-width: none; }
.ob-p b, .ob-t b { font-weight: 650; }
.ob-p em, .ob-p i, .ob-t em, .ob-t i { font-style: normal; }
.ob-p-menu { display: flex; flex-direction: column; margin: 10px 0 10px 10px; padding: 14px 10px; border-radius: 16px; background: var(--o-vidro); border: 1px solid var(--o-borda); }
.ob-p-marca { display: flex; align-items: center; gap: 9px; padding: 2px 6px 16px; }
.ob-p-marca b { font-size: 14.5px; line-height: 1.15; color: var(--o-tinta); }
.ob-p-menu ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ob-p-menu li { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 10px; font-weight: 500; font-size: 13.5px; color: var(--o-texto-2); }
.ob-p-menu li svg { width: 18px; height: 18px; }
.ob-p-menu li.aberto { color: var(--o-tinta); background: var(--o-cont); box-shadow: 2px 2px 6px rgba(148, 163, 184, .30), -2px -2px 6px rgba(255, 255, 255, .9); }
:root:not([data-theme="light"]) .ob-p-menu li.aberto { box-shadow: 2px 2px 6px rgba(0, 0, 0, .5), -2px -2px 6px rgba(255, 255, 255, .03); }
.ob-p-baixo { margin-left: auto; }
.ob-p-baixo svg { width: 14px; height: 14px; }
.ob-p-menu li.filho { height: 28px; margin-left: 18px; padding-left: 14px; border-left: 1.5px solid var(--o-texto-3); border-radius: 0 8px 8px 0; font-size: 12.5px; }
.ob-p-menu li.filho.sel { color: var(--o-m-texto); font-weight: 600; }
.ob-p-menu-pe { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; font-weight: 500; font-size: 13.5px; color: var(--o-texto-2); }
.ob-p-menu-pe svg { width: 18px; height: 18px; }
.ob-p-cont { position: relative; display: flex; flex-direction: column; margin: 10px; border-radius: 18px; background: var(--o-cont); border: 1px solid var(--o-borda); overflow: hidden; }
.ob-p-topo { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 22px; border-bottom: 1px solid var(--o-borda); }
.ob-p-topo > b { font-size: 17px; color: var(--o-tinta); white-space: nowrap; }
.ob-p-busca { display: flex; align-items: center; gap: 8px; width: 270px; height: 34px; margin-left: auto; padding: 0 14px; border-radius: 999px; background: var(--o-campo); font-size: 12.5px; color: var(--o-texto-3); white-space: nowrap; }
.ob-p-busca svg { width: 15px; height: 15px; }
.ob-p-sino { position: relative; color: var(--o-texto-2); }
.ob-p-sino svg { width: 20px; height: 20px; }
.ob-p-sino::after { content: ""; position: absolute; right: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--o-verm-p); }
.ob-p-ola { font-size: 12.5px; color: var(--o-texto-2); white-space: nowrap; }
.ob-p-filtros { display: flex; align-items: center; gap: 8px; padding: 16px 22px 12px; }
.ob-p-filtros > span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--o-cartao); border: 1px solid var(--o-borda); font-size: 12.5px; font-weight: 600; color: var(--o-texto); }
.ob-p-filtros > span.sel { box-shadow: 0 0 0 2px var(--o-m100); border-color: var(--o-m400); }
.ob-p-filtros > span b { color: var(--o-tinta); }
.ob-p-filtros > em { margin-left: auto; font-size: 12px; color: var(--o-texto-2); white-space: nowrap; }
.ob-p-filtros > em b { color: var(--o-tinta); }
.ob-p-tabela { margin: 0 22px; border-radius: 16px; background: var(--o-cartao); border: 1px solid var(--o-borda); box-shadow: var(--o-sombra); overflow: hidden; }
.ob-p-cab, .ob-p-linha { display: grid; grid-template-columns: 92px 178px 118px 128px 104px 48px; align-items: center; column-gap: 12px; padding: 0 16px; }
.ob-p-cab { height: 38px; border-bottom: 1px solid var(--o-borda); font-size: 11.5px; font-weight: 600; color: var(--o-texto-2); white-space: nowrap; }
.ob-p-linha { height: 60px; border-bottom: 1px solid var(--o-borda); font-size: 13px; color: var(--o-texto); transition: background-color .5s ease; }
.ob-p-linha:last-child { border-bottom: 0; }
.ob-p-nome { display: grid; gap: 3px; min-width: 0; }
.ob-p-nome b { font-size: 13.5px; color: var(--o-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-p-nome small, .ob-p-data small { font-size: 11px; color: var(--o-texto-3); }
.ob-p-data { display: grid; gap: 3px; white-space: nowrap; }
.ob-p-data--nova { color: var(--o-verde); font-weight: 600; }
.ob-p-data--nova small { color: var(--o-verde); font-weight: 500; }
.ob-p-vazio { color: var(--o-texto-3); }
.ob-p-wa { justify-self: start; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #059669; color: #fff; }
.ob-p-wa svg { width: 16px; height: 16px; }
.ob-p-pe { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 16px; font-size: 12px; color: var(--o-texto-2); }
.ob-p-pags { display: flex; gap: 4px; }
.ob-p-pags i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; border: 1px solid var(--o-borda); font-size: 12px; font-weight: 600; color: var(--o-texto); }
.ob-p-pags i:first-child { background: var(--o-m500); border-color: var(--o-m500); color: #fff; }
.ob-p-pags svg { width: 13px; height: 13px; }
/* a linha da história ganha o fundo da marca enquanto o PIX acontece */
.ob-cena:is([data-etapa="1"], [data-etapa="2"]) .ob-p-linha--marcos { background: var(--o-m50); }
:root:not([data-theme="light"]) .ob-cena:is([data-etapa="1"], [data-etapa="2"]) .ob-p-linha--marcos { background: rgba(34, 176, 201, .08); }
/* o aviso "PIX recebido", no canto de cima, só na etapa 2 */
.ob-p-toast {
	position: absolute; right: 180px; top: 66px; z-index: 3; display: flex; align-items: center; gap: 12px; width: 330px; padding: 13px 16px 15px; overflow: hidden;
	border-radius: 14px; background: var(--o-cartao); border: 1px solid var(--o-borda); box-shadow: 0 16px 36px -14px rgba(15, 23, 42, .45);
	opacity: 0; transform: translateY(-10px) scale(.97); visibility: hidden;
	transition: opacity .3s ease, transform .45s cubic-bezier(.23, 1, .32, 1), visibility .3s;
}
.ob-p-toast > i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--o-verde-f); color: var(--o-verde-p); }
.ob-p-toast > i svg { width: 17px; height: 17px; }
.ob-p-toast div { display: grid; gap: 3px; min-width: 0; }
.ob-p-toast b { font-size: 14px; color: var(--o-tinta); }
.ob-p-toast span { font-size: 12px; color: var(--o-texto-2); white-space: nowrap; }
.ob-p-toast > em { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--o-verde-p); transform-origin: 0 50%; }
.ob-cena[data-etapa="2"] .ob-p-toast { opacity: 1; transform: none; visibility: visible; transition-delay: .25s; }
.ob-cena[data-etapa="2"] .ob-p-toast > em { animation: ob-esvazia 3.4s linear .25s both; }
@keyframes ob-esvazia { to { transform: scaleX(0); } }

/* ---------------------------------------------------------------- 4. as telas do celular (390 x 844) */
.ob-tela {
	position: relative; overflow: hidden; aspect-ratio: 390 / 844; border-radius: 12.65% / 5.85%;
	background: var(--o-fundo); isolation: isolate;
}
.ob-tela .ob-t,
.ob-tela .ah-tela-html > .ob-t { position: absolute; left: 0; top: 0; }
.ob-t {
	width: 390px; height: 844px; overflow: hidden; transform: scale(var(--k)); transform-origin: 0 0;
	background: var(--o-fundo); color: var(--o-texto);
	font: 400 15px/1.3 var(--v3-body); text-align: left; letter-spacing: 0;
	-webkit-user-select: none; user-select: none; pointer-events: none;
}
.ah .ob-t p { margin: 0; color: var(--o-texto-2); }
.ob-t svg { width: 20px; height: 20px; }

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

/* o topo: o menu, a logo da central e o título */
.ob-t-topo { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px; border-bottom: 1px solid var(--o-borda); background: var(--o-fundo); }
.ob-t-topo b { font-size: 18px; color: var(--o-tinta); }
.ob-t-menu { position: relative; color: var(--o-texto); }
.ob-t-menu svg { width: 24px; height: 24px; }
.ob-t-menu em { position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--o-verm-p); border: 2px solid var(--o-fundo); }
.ob-t-logo { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--o-m400), var(--o-m600)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ob-t-logo svg { width: 21px; height: 21px; }
.ob-t-corpo { display: grid; gap: 12px; padding: 14px 16px 24px; }
.ah .ob-t .ob-t-ola { font-size: 15px; color: var(--o-texto-2); }
.ob-t-ola b { color: var(--o-tinta); }
.ob-t-cartao { padding: 16px; border-radius: 16px; background: var(--o-cartao); border: 1px solid var(--o-borda); box-shadow: var(--o-sombra); }
.ob-t-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px !important; font: 600 13px/1.2 var(--v3-body); color: var(--o-texto-2) !important; }
.ob-t-sub svg { width: 17px; height: 17px; }
.ob-t-sub em { margin-left: auto; padding: 4px 8px; border-radius: 6px; background: var(--o-m-suave); color: var(--o-m-texto); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.ob-t-rot { display: flex; align-items: center; justify-content: space-between; font: 600 12.5px/1.2 var(--v3-body); color: var(--o-texto) !important; }
.ob-t-rot em { font-weight: 500; color: var(--o-m-texto); }

/* pílulas do semáforo, botões e interruptores */
.ob-t-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12px/1 var(--v3-body); white-space: nowrap; border: 1px solid; }
.ob-t-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ob-t-chip--verde { color: var(--o-verde); background: var(--o-verde-f); border-color: var(--o-verde-b); }
.ob-t-chip--ambar { color: var(--o-ambar); background: var(--o-ambar-f); border-color: var(--o-ambar-b); }
.ob-t-chip--verm { color: var(--o-verm); background: var(--o-verm-f); border-color: var(--o-verm-b); }
.ob-t-chip--cinza { color: var(--o-cinza); background: var(--o-cinza-f); border-color: var(--o-cinza-b); }
.ob-t-botao { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 9px; background: linear-gradient(135deg, var(--o-m500), var(--o-m400)); color: #fff; font: 600 14px/1 var(--v3-body); white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(11, 124, 147, .55); }
.ob-t-botao svg { width: 17px; height: 17px; }
.ob-t-botao--peq { height: 32px; padding: 0 12px; font-size: 12.5px; }
.ob-t-botao--linha { background: var(--o-cartao); color: var(--o-texto); border: 1px solid var(--o-borda); box-shadow: none; }
.ob-t-botao--verde { height: 30px; padding: 0 10px; margin-left: auto; background: #059669; font-size: 12px; box-shadow: none; }
.ob-t-botao--verde svg { width: 14px; height: 14px; }
.ob-t-chave { position: relative; flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--o-cinza-b); }
.ob-t-chave::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .3); }
.ob-t-chave--on { background: var(--o-m500); }
.ob-t-chave--on::after { left: 21px; }
.ob-t-p { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ob-t-p--verde { background: var(--o-verde-p); }
.ob-t-p--ambar { background: var(--o-ambar-p); }
.ob-t-p--verm { background: var(--o-verm-p); }
.ob-t-p--asaas { background: #10B981; }
.ob-t-p--mp { background: #8B5CF6; }
.ob-t-p--marca { background: var(--o-m500); }
.ob-t-p--cinza { background: #94A3B8; }
.ob-t-cor-verde { color: var(--o-verde) !important; }
.ob-t-cor-ambar { color: var(--o-ambar) !important; }
.ob-t-cor-verm { color: var(--o-verm) !important; }
.ob-t-cor-violeta { color: var(--o-violeta) !important; }
.ob-t-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--o-m-suave); color: var(--o-m-texto); font: 650 12.5px/1 var(--v3-body); }

/* a validade (o círculo com os dias) */
.ob-t-val { display: flex; align-items: center; gap: 16px; }
.ob-t-val-circulo { position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; }
.ob-t-val-circulo::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid currentColor; opacity: .25; }
.ob-t-val--ambar .ob-t-val-circulo { background: #F59E0B; color: #F59E0B; }
.ob-t-val--verde .ob-t-val-circulo { background: #10B981; color: #10B981; }
.ob-t-val-circulo b { font: 800 30px/1 var(--v3-body); color: #fff; }
.ob-t-val-circulo small { margin-top: 3px; font: 600 10.5px/1.15 var(--v3-body); color: rgba(255, 255, 255, .92); }
.ob-t-val-txt { display: grid; gap: 7px; justify-items: start; min-width: 0; }
.ah .ob-t .ob-t-val-txt p { font-size: 14px; line-height: 1.35; color: var(--o-texto); }
.ob-t-val-txt > span { font-size: 12px; color: var(--o-texto-2); }
.ob-t-val-txt > span b { color: var(--o-tinta); }

/* pague com PIX */
.ob-t-pague { display: flex; gap: 12px; }
.ob-t-pague-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--o-m-suave); color: var(--o-m-texto); }
.ob-t-pague-ico svg { width: 22px; height: 22px; }
.ob-t-pague-ico--ok { background: var(--o-verde-f); color: var(--o-verde); }
.ob-t-pague > div { display: grid; gap: 4px; min-width: 0; }
.ob-t-pague b { font-size: 15.5px; color: var(--o-tinta); }
.ob-t-pague span { font-size: 12.5px; line-height: 1.35; color: var(--o-texto-2); }
.ob-t-pague-pe { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--o-borda); }
.ob-t-pague-pe > b { font: 700 22px/1 var(--v3-body); color: var(--o-tinta); }

/* veículos, contratos e suporte */
.ob-t-veic { display: flex; align-items: center; gap: 12px; }
.ob-t-veic-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--o-campo); color: var(--o-texto); }
.ob-t-veic > div { display: grid; gap: 2px; }
.ob-t-veic b { font-size: 20px; color: var(--o-tinta); }
.ob-t-veic span { font-size: 12.5px; color: var(--o-texto-2); }
.ob-t-veic-pontos { display: flex; gap: 5px; margin-left: auto; }
.ob-t-veic-pontos i { width: 10px; height: 10px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.ob-t-contrato-aviso { display: flex; align-items: center; gap: 12px; }
.ob-t-contrato-aviso > i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--o-m-suave); color: var(--o-m-texto); }
.ob-t-contrato-aviso > div { flex: 1; display: grid; gap: 3px; min-width: 0; }
.ob-t-contrato-aviso b { font-size: 14.5px; color: var(--o-tinta); }
.ob-t-contrato-aviso span { font-size: 12px; line-height: 1.3; color: var(--o-texto-2); }
.ob-t-suporte { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; background: #059669; border-color: transparent; color: #fff; font: 600 14.5px/1 var(--v3-body); }

/* a folha do PIX que sobe de baixo (só na abertura) */
.ob-t-veu { position: absolute; inset: 0; z-index: 4; background: rgba(15, 23, 42, .5); opacity: 0; transition: opacity .4s ease; }
.ob-t-folha {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 10px 20px 26px; border-radius: 26px 26px 0 0;
	background: var(--o-cartao); box-shadow: 0 -20px 40px -20px rgba(15, 23, 42, .4);
	transform: translateY(104%); transition: transform .55s cubic-bezier(.32, .72, 0, 1);
}
.ob-cena:is([data-etapa="1"], [data-etapa="2"]) .ob-t-veu { opacity: 1; }
.ob-cena:is([data-etapa="1"], [data-etapa="2"]) .ob-t-folha { transform: none; }
.ob-t-folha-alca { display: block; width: 44px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--o-cinza-b); }
.ob-t-folha-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ob-t-folha-cab b { font-size: 17px; color: var(--o-tinta); }
.ob-t-folha-cab i { color: var(--o-texto-2); }
.ob-t-folha-miolo { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 7px; text-align: center; }
.ah .ob-t .ob-t-folha-ola { font-size: 13px; }
.ob-t-folha-valor { font: 700 30px/1 var(--v3-body); color: var(--o-tinta); }
.ah .ob-t .ob-t-folha-nota { padding: 7px 12px; border-radius: 9px; background: var(--o-m50); font-size: 12.5px; color: var(--o-m-texto); }
:root:not([data-theme="light"]) .ah .ob-t .ob-t-folha-nota { background: var(--o-m-suave); }
.ob-t-folha-qr { padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--o-borda); }
.ob-t .ob-t-qr { width: 168px; height: 168px; }
.ob-t-folha .ob-t-qr { width: 132px; height: 132px; }
.ob-t-copia { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 6px 0 12px; border-radius: 10px; background: var(--o-campo); border: 1px solid var(--o-borda); }
.ob-t-copia span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1 var(--v3-mono); color: var(--o-texto-2); }
.ob-t-copia em { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--o-m500); color: #fff; font: 600 12.5px/1 var(--v3-body); }
.ob-t-copia em svg { width: 14px; height: 14px; }
.ob-t-folha-espera { display: flex; align-items: center; gap: 8px; font-size: 13px !important; }
.ob-t-folha-espera i { width: 9px; height: 9px; border-radius: 50%; background: var(--o-m500); animation: ob-pisca 1.2s ease-in-out infinite; }
@keyframes ob-pisca { 50% { opacity: .25; } }
.ob-t-folha-miolo--pago { padding: 34px 0 30px; }
.ob-t-folha-ok { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #ECFDF5; color: #059669; }
.ob-t-folha-ok svg { width: 34px; height: 34px; stroke-width: 2.6; }
.ob-t-folha-pago { font-size: 21px; color: var(--o-tinta); }
.ah .ob-t .ob-t-folha-pe { margin-top: 14px; font-size: 11.5px; text-align: center; color: var(--o-texto-3); }
.ob-cena[data-etapa="2"] .ob-t-folha-ok { animation: ob-pop .5s cubic-bezier(.23, 1, .32, 1) .35s both; }
@keyframes ob-pop { from { transform: scale(.6); opacity: 0; } }

/* a página do PIX (o link de pagamento) */
.ob-t-pagar { display: grid; justify-items: center; gap: 14px; height: 790px; padding: 18px 18px 0; background: var(--o-campo); }
:root:not([data-theme="light"]) .ob-t-pagar { background: var(--o-fundo); }
.ob-t-pagar-marca { display: flex; align-items: center; gap: 10px; }
.ob-t-pagar-marca b { font-size: 16px; color: var(--o-tinta); }
.ob-t-pagar-cartao { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 9px; width: 100%; padding: 20px 18px; border-radius: 20px; background: var(--o-cartao); border: 1px solid var(--o-borda); text-align: center; }
.ah .ob-t .ob-t-pagar-ola { font-size: 14px; color: var(--o-texto); }
.ob-t-pagar-valor { font: 700 34px/1 var(--v3-body); color: var(--o-tinta); }
.ah .ob-t .ob-t-pagar-desc { font-size: 13px; }
.ah .ob-t .ob-t-pagar-nota { padding: 7px 12px; border-radius: 9px; background: var(--o-m50); font-size: 12.5px; color: var(--o-m-texto); }
:root:not([data-theme="light"]) .ah .ob-t .ob-t-pagar-nota { background: var(--o-m-suave); }
.ob-t-passos { display: grid; gap: 6px; width: 100%; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--o-borda); list-style: none; counter-reset: p; text-align: left; }
.ob-t-passos li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--o-texto-2); counter-increment: p; }
.ob-t-passos li::before { content: counter(p); flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--o-m-suave); color: var(--o-m-texto); font: 700 11px/1 var(--v3-body); }
.ah .ob-t .ob-t-pagar-pe { max-width: 300px; font-size: 11.5px; text-align: center; color: var(--o-texto-3); }

/* configurações do financeiro */
.ob-t-abinhas { display: flex; gap: 6px; overflow: hidden; }
.ob-t-abinhas span { flex: none; padding: 8px 12px; border-radius: 999px; font: 600 12.5px/1 var(--v3-body); color: var(--o-texto-2); background: var(--o-cartao); border: 1px solid var(--o-borda); }
.ob-t-abinhas span.sel { color: var(--o-m-texto); background: var(--o-m-suave); border-color: transparent; }
.ob-t-integ { display: grid; gap: 12px; padding: 14px; }
.ob-t-integ-cab { display: flex; align-items: center; gap: 11px; }
.ob-t-integ-cab > div { display: grid; gap: 3px; min-width: 0; }
.ob-t-integ-cab b { font-size: 15px; color: var(--o-tinta); }
.ob-t-integ-cab span { font-size: 12px; color: var(--o-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-t-integ-logo { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.ob-t-integ-logo svg { width: 21px; height: 21px; }
.ob-t-integ-logo--mp { background: #00A8E8; }
.ob-t-integ-logo--asaas { background: #1C5BD8; }
.ob-t-integ-logo--bloq { background: var(--o-verm-p); }
.ob-t-ok { display: flex; align-items: center; gap: 5px; color: var(--o-verde) !important; font-weight: 600; }
.ob-t-ok svg { width: 15px; height: 15px; }
.ob-t-linha-chave { display: flex; align-items: center; gap: 12px; padding-top: 11px; border-top: 1px solid var(--o-borda); }
.ob-t-linha-chave > div { flex: 1; display: grid; gap: 3px; min-width: 0; }
.ob-t-linha-chave b { font-size: 13.5px; line-height: 1.25; color: var(--o-tinta); }
.ob-t-linha-chave span { font-size: 11.5px; line-height: 1.3; color: var(--o-texto-2); }
.ob-t-modos { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 10px; background: var(--o-campo); }
.ob-t-modos span { padding: 8px 0; border-radius: 8px; text-align: center; font: 600 12.5px/1 var(--v3-body); color: var(--o-texto-2); }
.ob-t-modos span.sel { background: var(--o-cartao); color: var(--o-verm); box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }
.ah .ob-t .ob-t-integ-nota { font-size: 12.5px; line-height: 1.4; }
.ob-t-integ-nota b { color: var(--o-tinta); }

/* cobranças do Mercado Pago */
.ob-t-periodo { display: flex; align-items: center; gap: 6px; }
.ob-t-periodo span { padding: 8px 12px; border-radius: 9px; background: var(--o-cartao); border: 1px solid var(--o-borda); font: 600 12.5px/1 var(--v3-body); color: var(--o-tinta); }
.ob-t-periodo em { margin-left: auto; padding: 8px 12px; border-radius: 9px; background: var(--o-m-suave); color: var(--o-m-texto); font: 600 12.5px/1 var(--v3-body); }
.ob-t-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-t-kpis > div { display: grid; gap: 6px; padding: 13px; border-radius: 13px; background: var(--o-cartao); border: 1px solid var(--o-borda); box-shadow: var(--o-sombra); }
.ob-t-kpis span { font-size: 11.5px; font-weight: 600; color: var(--o-texto-2); }
.ob-t-kpis b { font: 700 18px/1 var(--v3-body); color: var(--o-tinta); white-space: nowrap; }
.ob-t-lista { display: grid; padding: 4px 14px; }
.ob-t-lista-linha { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--o-borda); }
.ob-t-lista-linha:last-child { border-bottom: 0; }
.ob-t-lista-linha > div { flex: 1; display: grid; gap: 3px; min-width: 0; }
.ob-t-lista-linha b { font-size: 13.5px; color: var(--o-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-t-lista-linha span { font-size: 11.5px; color: var(--o-texto-2); }

/* dashboard */
.ob-t-semaforo { display: flex; align-items: center; gap: 12px; justify-self: start; padding: 9px 14px; border-radius: 999px; background: var(--o-cartao); border: 1px solid var(--o-borda); box-shadow: var(--o-sombra); font: 650 13.5px/1 var(--v3-body); color: var(--o-tinta); }
.ob-t-semaforo > span { display: inline-flex; align-items: center; gap: 5px; }
.ob-t-semaforo small { font-weight: 500; font-size: 12px; color: var(--o-texto-2); }
.ob-t-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-t-bento > div { display: grid; gap: 5px; padding: 12px; border-radius: 12px; background: var(--o-cont); box-shadow: 4px 4px 10px #DDE3EC, -4px -4px 10px #FFFFFF; }
:root:not([data-theme="light"]) .ob-t-bento > div { box-shadow: 4px 4px 10px #06070A, -4px -4px 10px #1C2027; }
.ob-t-bento span { font-size: 11px; font-weight: 600; color: var(--o-texto-2); }
.ob-t-bento b { font: 700 18px/1 var(--v3-body); color: var(--o-tinta); white-space: nowrap; }
.ob-t-bento small { font-size: 10.5px; color: var(--o-texto-3); }
.ob-t-faixa-fin { display: grid; gap: 8px; padding: 12px 14px; }
.ob-t-faixa-fin p { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.ob-t-faixa-fin b { color: var(--o-tinta); }
.ob-t-graf { display: grid; gap: 14px; }
.ob-t-graf-cab { display: flex; align-items: center; justify-content: space-between; }
.ob-t-graf-cab b { font-size: 15px; color: var(--o-tinta); }
.ob-t-seg { display: flex; padding: 3px; border-radius: 8px; background: var(--o-campo); }
.ob-t-seg em { padding: 5px 10px; border-radius: 6px; font: 600 11.5px/1 var(--v3-body); color: var(--o-texto-2); }
.ob-t-seg em.sel { background: var(--o-cartao); color: var(--o-tinta); box-shadow: 0 1px 2px rgba(15, 23, 42, .15); }
.ob-t-selo { padding: 5px 9px; border-radius: 999px; background: var(--o-m-suave); color: var(--o-m-texto); font: 600 11.5px/1 var(--v3-body); }
.ob-t-barras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; height: 190px; padding: 0 2px; border-bottom: 1px solid var(--o-borda); }
.ob-t-barras > span { display: grid; justify-items: center; align-content: end; gap: 7px; height: 100%; padding-bottom: 6px; font: 600 11px/1 var(--v3-body); color: var(--o-texto-3); }
.ob-t-barras > span.sel { color: var(--o-tinta); }
.ob-t-barras > span > i { display: flex; flex-direction: column-reverse; width: 100%; height: calc((var(--a) + var(--m) + var(--r)) * 1.5px); border-radius: 6px 6px 3px 3px; overflow: hidden; }
.ob-t-b-a { height: calc(var(--a) * 1.5px); background: #10B981; }
.ob-t-b-m { height: calc(var(--m) * 1.5px); background: #8B5CF6; }
.ob-t-b-r { height: calc(var(--r) * 1.5px); background: var(--o-m500); }
.ob-t-barras > span:not(.sel) > i { opacity: .55; }
.ob-t-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--o-texto-2); }
.ob-t-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ob-t-rosca-linha { display: flex; align-items: center; gap: 18px; }
.ob-t-rosca {
	flex: none; position: relative; width: 120px; height: 120px; border-radius: 50%; display: grid; place-content: center; text-align: center;
	background: conic-gradient(#10B981 0 60%, #8B5CF6 60% 91%, #94A3B8 91% 100%);
}
.ob-t-rosca::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--o-cartao); }
.ob-t-rosca b, .ob-t-rosca small { position: relative; }
.ob-t-rosca b { font: 700 24px/1 var(--v3-body); color: var(--o-tinta); }
.ob-t-rosca small { font: 600 9px/1 var(--v3-body); letter-spacing: .08em; text-transform: uppercase; color: var(--o-texto-2); }
.ob-t-rosca-leg { flex: 1; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ob-t-rosca-leg li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--o-texto); }
.ob-t-rosca-leg b { margin-left: auto; color: var(--o-tinta); }

/* contrato */
.ob-t-assinar { display: grid; gap: 11px; }
.ob-t-assinar-cab { display: flex; gap: 11px; }
.ob-t-assinar-cab > i { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--o-m-suave); color: var(--o-m-texto); }
.ob-t-assinar-cab > div { display: grid; gap: 3px; }
.ob-t-assinar-cab b { font-size: 15px; line-height: 1.2; color: var(--o-tinta); }
.ob-t-assinar-cab span { font-size: 11.5px; color: var(--o-texto-2); }
.ah .ob-t .ob-t-assinar-ler { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--o-m-texto); }
.ob-t-assinar-ler svg { width: 17px; height: 17px; }
.ob-t-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-t-dados span { padding: 9px 10px; border-radius: 9px; background: var(--o-campo); font-size: 12px; color: var(--o-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-t-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-t-fotos > span { position: relative; display: grid; place-items: end center; aspect-ratio: 3 / 3.4; padding: 6px; border-radius: 10px; border: 1.5px solid #10B981; background: linear-gradient(160deg, #CBD5E1, #94A3B8); font: 600 10.5px/1.15 var(--v3-body); color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.ob-t-fotos > span > i { position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #10B981; color: #fff; }
.ob-t-fotos > span > i svg { width: 12px; height: 12px; stroke-width: 3; }
.ob-t-quadro { height: 96px; border-radius: 10px; border: 1.5px dashed #CBD5E1; background: #fff; color: #0F172A; display: grid; place-items: center; }
.ob-t-quadro .ob-t-rubrica { width: 200px; height: 74px; }
.ah .ob-t .ob-t-marca-caixa { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--o-texto); }
.ob-t-marca-caixa > i { flex: none; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; background: var(--o-m500); color: #fff; }
.ob-t-marca-caixa > i svg { width: 13px; height: 13px; stroke-width: 3; }
.ob-t-assinar-pe { display: grid; grid-template-columns: auto 1fr; gap: 8px; }

/* declaração */
.ob-t-decl-item { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.ob-t-decl-item > i { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--o-m-suave); color: var(--o-m-texto); }
.ob-t-decl-item > div { display: grid; gap: 3px; }
.ob-t-decl-item b { font-size: 14px; color: var(--o-tinta); }
.ob-t-decl-item span { font-size: 11.5px; color: var(--o-texto-2); }
.ob-t-papel { position: relative; display: grid; gap: 8px; padding: 0 16px 16px; border-radius: 6px; background: #FFFFFF; color: #334155; box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .4), 0 0 0 1px rgba(15, 23, 42, .06); overflow: hidden; }
.ob-t-papel-faixa { height: 6px; margin: 0 -16px; background: var(--o-m500); }
.ob-t-papel-topo { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.ob-t-papel-topo .ob-t-logo { width: 24px; height: 24px; border-radius: 7px; }
.ob-t-papel-topo .ob-t-logo svg { width: 16px; height: 16px; }
.ob-t-papel-topo > b { font-size: 11.5px; color: #1E293B; }
.ob-t-papel-topo > span { display: grid; gap: 2px; margin-left: auto; text-align: right; font: 700 10px/1 var(--v3-body); color: var(--o-m600); }
.ob-t-papel-topo > span small { font-weight: 500; font-size: 8.5px; color: #64748B; }
.ah .ob-t .ob-t-papel-titulo { font: 700 11px/1.3 var(--v3-body); color: #1E293B; text-align: center; }
.ob-t-papel-traco { justify-self: center; width: 34px; height: 2px; background: var(--o-m500); }
.ah .ob-t .ob-t-papel-texto { font-size: 9.5px; line-height: 1.5; color: #475569; text-align: justify; }
.ob-t-papel-caixa { display: grid; gap: 3px; padding: 7px 9px; border: 1px solid #E2E8F0; border-radius: 4px; }
.ob-t-papel-caixa small { font: 700 7.5px/1 var(--v3-body); letter-spacing: .08em; color: #64748B; }
.ob-t-papel-caixa span { font-size: 9.5px; color: #1E293B; }
.ob-t-papel-assina { display: grid; justify-items: center; gap: 2px; margin-top: 2px; color: #0F172A; }
.ob-t-papel-assina .ob-t-rubrica { width: 110px; height: 40px; }
.ob-t-papel-assina > i { width: 140px; height: 1px; background: #94A3B8; }
.ob-t-papel-assina > span { font-size: 9px; color: #475569; }
.ob-t-decl-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* instalador */
.ob-t-kpis--2 > div { gap: 8px; }
.ob-t-sub--agenda { margin-top: 2px !important; }
.ob-t-visita { display: grid; gap: 11px; padding: 14px; }
.ob-t-visita-cab { display: flex; align-items: center; gap: 11px; }
.ob-t-hora { flex: none; width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; background: var(--o-m50); color: var(--o-m700); font: 700 15px/1 var(--v3-body); }
:root:not([data-theme="light"]) .ob-t-hora { background: var(--o-m-suave); color: var(--o-m-texto); }
.ob-t-visita-cab > div { display: grid; gap: 3px; min-width: 0; }
.ob-t-visita-cab b { font-size: 15px; color: var(--o-tinta); }
.ob-t-visita-cab span { font-size: 12px; color: var(--o-texto-2); }
.ah .ob-t .ob-t-visita-end { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ob-t-visita-end svg { width: 15px; height: 15px; }
.ob-t-visita-end em { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 6px 9px; border-radius: 8px; background: var(--o-campo); color: var(--o-texto); font-weight: 600; font-size: 11.5px; white-space: nowrap; }
.ob-t-visita-prog { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 11.5px; color: var(--o-texto-2); }
.ob-t-visita-prog b { color: var(--o-tinta); }
.ob-t-visita-prog > i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--o-campo); overflow: hidden; }
.ob-t-visita-prog > i > i { display: block; width: 50%; height: 100%; border-radius: inherit; background: #10B981; }
.ob-t-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px; background: var(--o-campo); font-size: 12.5px; color: var(--o-tinta); }
.ob-t-visita--depois { opacity: .75; }
.ob-t-ficha-rast { display: grid; gap: 3px; padding: 11px 13px; border-radius: 12px; background: var(--o-verde-f); border: 1px solid var(--o-verde-b); }
.ob-t-ficha-rast b { font-size: 14px; color: var(--o-tinta); }
.ob-t-ficha-rast span { font: 500 11.5px/1.2 var(--v3-mono); color: var(--o-texto-2); }
.ob-t-fotos--4 { grid-template-columns: repeat(4, 1fr); }
.ob-t-fotos--4 > span { aspect-ratio: 1; padding: 0; border: 0; }
.ob-t-fotos--4 > .ob-t-foto--1 { background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, .55) 56%), linear-gradient(150deg, #CBD5E1 0%, #64748B 75%); }
.ob-t-fotos--4 > .ob-t-foto--2 { background: radial-gradient(circle at 62% 38%, #4ADE80 0 7%, transparent 8%), radial-gradient(circle at 40% 38%, #FBBF24 0 7%, transparent 8%), linear-gradient(160deg, #334155, #0F172A); }
.ob-t-fotos--4 > .ob-t-foto--3 { background: linear-gradient(90deg, transparent 46%, #EF4444 46% 50%, transparent 50%), linear-gradient(90deg, transparent 58%, #111827 58% 62%, transparent 62%), linear-gradient(160deg, #E2E8F0, #94A3B8); }
.ob-t-fotos--4 > .ob-t-foto-mais { display: grid; place-items: center; border-radius: 10px; border: 1.5px dashed var(--o-texto-3); background: transparent; color: var(--o-texto-3); }
.ob-t-testes { display: grid; gap: 9px; padding: 13px; }
.ob-t-testes-cab { display: flex; align-items: center; justify-content: space-between; }
.ob-t-testes-cab b { font-size: 14.5px; color: var(--o-tinta); }
.ob-t-teste { display: flex; align-items: center; gap: 10px; }
.ob-t-teste-ok { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #10B981; color: #fff; }
.ob-t-teste-ok svg { width: 14px; height: 14px; stroke-width: 3; }
.ob-t-teste > div { display: grid; gap: 2px; }
.ob-t-teste b { font-size: 13px; color: var(--o-tinta); }
.ob-t-teste span { font-size: 11.5px; color: var(--o-verde); }
.ob-t-duas-ass { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-t-duas-ass > span { display: grid; justify-items: center; gap: 2px; padding: 6px 4px 6px; border-radius: 10px; border: 1.5px dashed #CBD5E1; background: #fff; color: #0F172A; }
.ob-t-duas-ass .ob-t-rubrica { width: 120px; height: 44px; }
.ob-t-duas-ass small { font-size: 10.5px; color: #64748B; }
.ob-t-ficha-pe { display: grid; gap: 9px; }
.ob-t-ficha-pe > span { font-size: 12.5px; color: var(--o-texto-2); }
.ob-t-ficha-pe > span b { color: var(--o-tinta); }
.ob-t-ficha-pe .ob-t-botao { height: 44px; }

/* a tela de entrada da central (sempre escura, com a aurora da cor dela) */
.ob-t--escura { background: #0A0B0D; color: #E2E8F0; }
.ob-t--escura .ob-t-status { color: #fff; }
.ob-t-login { position: relative; display: grid; align-content: center; height: 790px; padding: 0 22px 40px; overflow: hidden; }
.ob-t-aurora { position: absolute; border-radius: 50%; filter: blur(50px); }
.ob-t-aurora--1 { left: -60px; top: 40px; width: 300px; height: 300px; background: rgba(14, 149, 176, .45); }
.ob-t-aurora--2 { right: -80px; bottom: 60px; width: 320px; height: 320px; background: rgba(11, 124, 147, .35); }
.ob-t-login-cartao { position: relative; display: grid; gap: 8px; padding: 26px 22px; border-radius: 22px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.ob-t-login-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ob-t-login-marca .ob-t-logo { width: 40px; height: 40px; border-radius: 12px; }
.ob-t-login-marca .ob-t-logo svg { width: 27px; height: 27px; }
.ob-t-login-marca b { font-size: 17px; color: #fff; }
.ah .ob-t .ob-t-login-titulo { font: 700 26px/1.1 var(--v3-body); color: #fff; }
.ah .ob-t .ob-t-login-sub { margin-bottom: 10px; font-size: 14px; color: #9CA3AF; }
.ah .ob-t .ob-t-login-rot { margin-top: 4px; font: 700 11px/1 var(--v3-body); letter-spacing: .08em; color: #AEB3BA; }
.ob-t-login-campo { display: flex; align-items: center; gap: 10px; height: 47px; padding: 0 14px; border-radius: 13px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10); font-size: 14px; color: #E5E7EB; }
.ob-t-login-campo svg { width: 18px; height: 18px; color: #9CA3AF; }
.ob-t-login-campo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah .ob-t .ob-t-login-manter { display: flex; align-items: center; gap: 9px; margin: 6px 0 4px; font-size: 12.5px; color: #D1D5DB; }
.ob-t-login-manter > i { flex: none; width: 19px; height: 19px; border-radius: 5px; display: grid; place-items: center; background: var(--o-m500); color: #fff; }
.ob-t-login-manter > i svg { width: 12px; height: 12px; stroke-width: 3; }
.ob-t-login-entrar { display: grid; place-items: center; height: 48px; border-radius: 13px; background: linear-gradient(135deg, var(--o-m500), var(--o-m400)); color: #fff; font: 650 15.5px/1 var(--v3-body); box-shadow: 0 12px 24px -10px rgba(14, 149, 176, .7); }
.ah .ob-t .ob-t-login-nota { margin-top: 8px; font-size: 12px; line-height: 1.4; color: #9CA3AF; text-align: center; }

/* a tela de início do celular, com o app instalado */
.ob-t-inicio { position: relative; display: grid; align-content: start; gap: 26px; height: 790px; padding: 12px 22px 0; background: linear-gradient(170deg, #1B3A4B 0%, #0E2230 46%, #132A2F 100%); }
.ob-t-noti { display: flex; gap: 11px; padding: 13px 14px; border-radius: 22px; background: rgba(245, 245, 247, .82); color: #111827; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.ob-t-noti-ico .ob-t-logo { width: 38px; height: 38px; border-radius: 10px; }
.ob-t-noti-ico .ob-t-logo svg { width: 26px; height: 26px; }
.ob-t-noti > div { flex: 1; display: grid; gap: 3px; min-width: 0; }
.ah .ob-t .ob-t-noti p { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: #111827; }
.ob-t-noti small { font-size: 12px; color: #6B7280; }
.ob-t-noti > div > span { font-size: 13.5px; line-height: 1.3; color: #1F2937; }
.ob-t-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 18px; padding: 0 6px; }
.ob-t-app { display: grid; justify-items: center; gap: 6px; }
.ob-t-app > i { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; background: rgba(255, 255, 255, .16); }
.ob-t-app > small { width: 48px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .28); }
.ob-t-app--1 > i { background: linear-gradient(150deg, #60A5FA, #2563EB); }
.ob-t-app--2 > i { background: linear-gradient(150deg, #FCD34D, #F59E0B); }
.ob-t-app--3 > i { background: linear-gradient(150deg, #F9A8D4, #DB2777); }
.ob-t-app--4 > i { background: linear-gradient(150deg, #A7F3D0, #10B981); }
.ob-t-app--5 > i { background: linear-gradient(150deg, #E5E7EB, #9CA3AF); }
.ob-t-app--6 > i { background: linear-gradient(150deg, #C4B5FD, #7C3AED); }
.ob-t-app--7 > i { background: linear-gradient(150deg, #FDBA74, #EA580C); }
.ob-t-app--marca > i { background: transparent; }
.ob-t-app--marca .ob-t-logo { width: 62px; height: 62px; border-radius: 16px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 10px 22px -6px rgba(14, 149, 176, .9); }
.ob-t-app--marca .ob-t-logo svg { width: 42px; height: 42px; }
.ob-t-app--marca > small { width: auto; height: auto; background: transparent; font: 600 12px/1 var(--v3-body); color: #fff; }
.ob-t-instalado { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .10); font: 500 12px/1.2 var(--v3-body); color: #E5E7EB; }
.ob-t-instalado svg { width: 16px; height: 16px; }
.ob-t-doca { position: absolute; left: 14px; right: 14px; bottom: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 14px 18px; border-radius: 30px; background: rgba(255, 255, 255, .16); }
.ob-t-doca i { justify-self: center; width: 58px; height: 58px; border-radius: 15px; background: rgba(255, 255, 255, .22); }

/* ---------------------------------------------------------------- 5. Toque e veja */
.ah--ob .ah-cel--grande { --wn: 340; }
.ah--ob .ah-parada { padding-left: 66px; }
.ah--ob .ah-parada-pino {
	left: 14px; top: 13px; width: 38px; height: 38px; border: 0; border-radius: 12px; display: grid; place-items: center;
	background: var(--ah-laranja-suave); color: var(--ah-laranja); box-shadow: none; transition: background-color .25s ease, color .25s ease;
}
.ah--ob .ah-parada-pino .ah-ico { width: 19px; height: 19px; }
.ah--ob .ah-parada[aria-selected="true"] .ah-parada-pino { background: var(--ah-laranja); color: #fff; box-shadow: none; }
.ah--ob .ah-parada-nome { min-height: 38px; }
@media (min-width: 980px) {
	.ah--ob .ah-toque-texto > .ah-h2,
	.ah--ob .ah-toque-texto > .ah-secao-lede { margin-left: 0; }
}
/* de quem é a tela à mostra: uma etiqueta em cima do celular */
.ob-cel-dono {
	position: absolute; z-index: 3; left: 50%; top: -15px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px;
	background: var(--ah-cartao); border: 1px solid var(--ah-linha); box-shadow: var(--ah-sombra-aviso);
	font: 600 11px/1 var(--v3-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ah-texto-2); white-space: nowrap;
	opacity: 0; transform: translate(-50%, 6px); transition: opacity .3s ease, transform .35s cubic-bezier(.23, 1, .32, 1);
}
.ob-cel-dono::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.ob-cel-dono--cliente::before { background: var(--o-m500); box-shadow: 0 0 0 3px var(--o-m-suave); }
.ob-cel-dono--painel::before { background: var(--ob-laranja); box-shadow: 0 0 0 3px rgba(240, 96, 0, .2); }
.ob-cel-dono--instalador::before { background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); }
.ah-cel:has(.ah-tela-atual[data-dono="cliente"]) .ob-cel-dono--cliente,
.ah-cel:has(.ah-tela-atual[data-dono="painel"]) .ob-cel-dono--painel,
.ah-cel:has(.ah-tela-atual[data-dono="instalador"]) .ob-cel-dono--instalador { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- 6. mosaico */
.ob-bento .ob-bloco--cobrar { grid-column: span 7; background: #0E1B1F; border-color: rgba(255, 255, 255, .06); }
.ob-bento .ob-bloco--bloq { grid-column: span 5; }
.ob-bento .ob-bloco--login { grid-column: span 4; }
.ob-bento .ob-bloco--pedido { grid-column: span 8; }
.ob-bento .ob-bloco--equipe, .ob-bento .ob-bloco--avisos { grid-column: span 6; }

/* cobrança com um toque: o cartão escuro, com a mensagem pronta */
.ah .ob-bloco--cobrar h3 { color: #fff; }
.ah .ob-bloco--cobrar p { color: #A8BCC2; }
.ob-bloco--cobrar .ah-bloco-ico { color: #4ADE80; background: rgba(37, 211, 102, .16); }
.ob-bloco--cobrar::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(70% 60% at 88% 92%, rgba(37, 211, 102, .20), transparent 70%), radial-gradient(50% 45% at 8% 0%, rgba(240, 96, 0, .14), transparent 70%);
}
.ob-bloco--cobrar > * { position: relative; z-index: 1; }
.ob-cobrar-ui { display: grid; gap: 10px; margin-top: auto; padding-top: 20px; max-width: 520px; }
.ob-cobrar-linha { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.ob-cobrar-linha .ob-t-chip { --o-ambar: #FCD34D; --o-ambar-f: rgba(245, 158, 11, .16); --o-ambar-b: rgba(245, 158, 11, .32); }
.ob-cobrar-linha > span { flex: 1; display: grid; gap: 3px; min-width: 0; }
.ob-cobrar-linha b { font: 600 14.5px/1.2 var(--v3-body); color: #fff; }
.ob-cobrar-linha small { font-size: 12.5px; color: #A8BCC2; }
.ob-cobrar-wa { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #25D366; color: #fff; }
.ob-cobrar-wa svg { width: 19px; height: 19px; }
.ob-cobrar-balao { position: relative; justify-self: end; max-width: 88%; padding: 10px 12px 8px; border-radius: 12px 0 12px 12px; background: #005C4B; }
.ob-cobrar-balao::before { content: ""; position: absolute; top: 0; right: -8px; width: 8px; height: 13px; background: #005C4B; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ah .ob-cobrar-balao p { max-width: none; font: 400 14px/1.4 var(--v3-body); color: #E9EDEF; }
.ob-cobrar-balao u { color: #53BDEB; text-decoration: none; }
.ob-cobrar-balao span { display: block; margin-top: 2px; font-size: 11px; text-align: right; color: rgba(233, 237, 239, .6); }
.ob-cobrar-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-cobrar-botoes span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #E2E8F0; font: 600 13px/1 var(--v3-body); }
.ob-cobrar-botoes .ob-cobrar-enviar { background: #25D366; color: #06291A; }
.ob-cobrar-botoes svg { width: 16px; height: 16px; }
/* a mensagem chega quando o cartão aparece (app-orbita.js) */
.ob-bento.ob-espera .ob-cobrar-balao { opacity: 0; transform: translateY(8px) scale(.96); }
.ob-bento.ob-anima .ob-cobrar-balao { transition: opacity .4s ease .35s, transform .6s cubic-bezier(.23, 1, .32, 1) .35s; transform-origin: 100% 0; }

/* bloqueio por atraso */
.ob-bloq-ui { display: grid; gap: 12px; margin-top: auto; padding-top: 18px; }
.ob-bloq-modos { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 12px; background: var(--ah-cartao-2); }
.ob-bloq-modos span { padding: 9px 0; border-radius: 9px; text-align: center; font: 600 13px/1 var(--v3-body); color: var(--ah-texto-2); }
.ob-bloq-modos span.sel { background: var(--ah-cartao); color: #DC2626; box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }
:root:not([data-theme="light"]) .ob-bloq-modos span.sel { color: #F87171; }
.ah .ob-bloq-regra { font: 500 13.5px/1.3 var(--v3-body); color: var(--ah-texto); }
.ob-bloq-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ob-bloq-lista li { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 13px; background: var(--ah-cartao-2); }
.ob-bloq-st { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.ob-bloq-st svg { width: 17px; height: 17px; }
.ob-bloq-st--fecha { background: rgba(239, 68, 68, .14); color: #DC2626; }
.ob-bloq-st--abre { background: var(--ob-verde-claro); color: var(--ob-verde); }
:root:not([data-theme="light"]) .ob-bloq-st--fecha { color: #F87171; }
.ob-bloq-lista span { display: grid; gap: 2px; min-width: 0; }
.ob-bloq-lista b { font: 600 14px/1.2 var(--v3-body); color: var(--ah-tinta); }
.ob-bloq-lista small { font-size: 12.5px; color: var(--ah-texto-2); }

/* o mesmo login da plataforma */
.ob-login-ui { display: grid; gap: 8px; margin-top: auto; padding-top: 18px; }
.ob-login-campo { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--ah-cartao-2); font: 500 14px/1 var(--v3-body); color: var(--ah-tinta); }
.ob-login-campo svg { width: 17px; height: 17px; color: var(--ah-texto-2); }
.ob-login-entrar { display: grid; place-items: center; height: 44px; border-radius: 12px; background: var(--ah-laranja); color: #fff; font: 650 14.5px/1 var(--v3-body); }

/* pedidos do cliente */
.ob-pedido-ui { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; margin-top: auto; padding-top: 18px; }
.ob-pedido-tipos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ob-pedido-tipos li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--ah-cartao-2); font: 500 13.5px/1.2 var(--v3-body); color: var(--ah-tinta); }
.ob-pedido-tipos li.sel { box-shadow: inset 0 0 0 1.5px var(--ah-laranja); }
.ob-pedido-tipos svg { width: 18px; height: 18px; color: var(--ah-laranja); }
.ob-pedido-chamado { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; padding: 14px; border-radius: 16px; background: var(--ah-cartao); border: 1px solid var(--ah-linha); box-shadow: var(--ah-sombra-aviso); }
.ob-pedido-novo { padding: 5px 8px; border-radius: 7px; background: #DBEAFE; color: #1D4ED8; font: 700 10.5px/1 var(--v3-body); letter-spacing: .05em; text-transform: uppercase; }
:root:not([data-theme="light"]) .ob-pedido-novo { background: rgba(59, 130, 246, .18); color: #93C5FD; }
.ob-pedido-chamado > span:nth-child(2) { display: grid; gap: 4px; }
.ob-pedido-chamado b { font: 600 14px/1.25 var(--v3-body); color: var(--ah-tinta); }
.ob-pedido-chamado small { font-size: 12.5px; line-height: 1.35; color: var(--ah-texto-2); }
.ob-pedido-chamado em { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border-radius: 10px; background: var(--ah-laranja); color: #fff; font: 600 13.5px/1 var(--v3-body); font-style: normal; }
.ob-pedido-chamado em svg { width: 16px; height: 16px; }

/* equipe */
.ob-equipe-ui { display: grid; gap: 8px; margin-top: auto !important; padding-top: 18px !important; }
.ob-equipe-ui li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--ah-cartao-2); }
.ob-equipe-ui li > i { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--ah-laranja-suave); color: var(--ah-laranja-texto); font: 600 13px/1 var(--v3-body); font-style: normal; }
.ob-equipe-ui li.ob-equipe-sub > i { background: rgba(24, 152, 192, .14); color: #0E7490; }
:root:not([data-theme="light"]) .ob-equipe-ui li.ob-equipe-sub > i { color: #67E8F9; }
.ob-equipe-ui li > span { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ob-equipe-ui b { font: 600 14.5px/1.2 var(--v3-body); color: var(--ah-tinta); }
.ob-equipe-ui small { font-size: 12.5px; color: var(--ah-texto-2); }

/* avisos no celular */
.ob-avisos-ui { display: grid; gap: 8px; margin-top: auto !important; padding-top: 18px !important; }
.ob-avisos-ui li { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 16px; background: var(--ah-cartao); border: 1px solid var(--ah-linha); box-shadow: var(--ah-sombra-aviso); }
.ob-avisos-ui li > span { display: grid; gap: 3px; min-width: 0; }
.ob-avisos-ui b { font: 600 14px/1.2 var(--v3-body); color: var(--ah-tinta); }
.ob-avisos-ui small { font-size: 12px; color: var(--ah-texto-2); }
.ob-aviso-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.ob-aviso-ico svg { width: 18px; height: 18px; }
.ob-aviso-ico--ambar { background: rgba(245, 158, 11, .16); color: #B45309; }
.ob-aviso-ico--verde { background: var(--ob-verde-claro); color: var(--ob-verde); }
.ob-aviso-ico--marca { background: var(--ah-laranja-suave); color: var(--ah-laranja-texto); }
:root:not([data-theme="light"]) .ob-aviso-ico--ambar { color: #FBBF24; }
/* os avisos chegam um a um quando o cartão aparece (app-orbita.js) */
.ob-bento.ob-espera .ob-avisos-ui li { opacity: 0; transform: translateY(-8px); }
.ob-bento.ob-anima .ob-avisos-ui li { transition: opacity .4s ease, transform .55s cubic-bezier(.23, 1, .32, 1); transition-delay: calc(var(--i) * .18s + .25s); }

/* ---------------------------------------------------------------- 7. fim */
.ah .ob-chegada .ah-h2 { font-size: clamp(32px, 3.5vw, 48px); }
.ah .ob-chegada-pino { width: 40px; height: 40px; left: 30px; top: 46px; background: #15171C; box-shadow: 0 0 0 7px rgba(240, 96, 0, .14); }
.ah .ob-chegada-pino svg { width: 30px; height: 30px; }
.ob-chegada-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.ob-chegada-principal { overflow: hidden; isolation: isolate; }
.ob-chegada-principal::after {
	content: ""; position: absolute; z-index: -1; right: -120px; top: 50%; width: 520px; height: 220px; border-radius: 50%;
	border: 1.5px solid var(--ob-orbita); transform: translateY(-50%) rotate(-12deg);
}

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1180px) {
	.ob-abertura-grade { grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: 16px; }
	/* a cena tem 712 px de largura desenhada: entre 980 e 1180 ela encolhe
	   para caber na coluna, em três degraus (a margem negativa devolve a
	   altura que o encolhimento tira) */
	.ob-cena { width: 712px; transform: scale(.88); transform-origin: 0 50%; margin-block: -41px; }
}
@media (max-width: 1100px) {
	.ob-cena { transform: scale(.8); margin-block: -69px; }
}
@media (max-width: 1040px) {
	.ob-cena { transform: scale(.72); margin-block: -97px; }
}
@media (max-width: 979px) {
	.ob-abertura-grade { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.ob-abertura-texto { max-width: 640px; margin-inline: auto; padding-bottom: 0; text-align: center; }
	.ah .ob-lede { margin-inline: auto; }
	.ah .ob-acoes { justify-content: center; }
	.ob-cena { width: 712px; max-width: 100%; margin: 26px auto 0; transform: none; }
	.ah--ob .ah-cel--grande { --wn: 272; }
	.ah--ob .ah-parada { padding-left: 42px; }
	.ah--ob .ah-parada-pino { left: 9px; top: 50%; width: 26px; height: 26px; border-radius: 8px; translate: 0 -50%; }
	.ah--ob .ah-parada-pino .ah-ico { display: block; width: 14px; height: 14px; }
	.ah--ob .ah-parada-nome { min-height: 0; }
	.ob-bento .ob-bloco--cobrar, .ob-bento .ob-bloco--pedido { grid-column: 1 / -1; }
	.ob-bento .ob-bloco--bloq, .ob-bento .ob-bloco--login, .ob-bento .ob-bloco--equipe, .ob-bento .ob-bloco--avisos { grid-column: span 6; }
}
@media (max-width: 760px) {
	.ah .ob-h1 { font-size: 38px; }
	.ah .ob-lede { font-size: 17px; }
	.ah .ob-botao-zap { height: 54px; }
	/* a cena no celular: o navegador na largura toda (o painel encolhe pelo
	   --kb, que o app-orbita.js mede; o CSS dá um valor perto do certo para
	   quem está sem JavaScript), o celular do cliente por cima, no canto, e a
	   régua embaixo */
	.ob-cena { height: auto; display: grid; padding-top: 8px; }
	.ob-recebido { display: none; }
	.ob-dono { padding: 6px 10px 6px 8px; font-size: 9.5px; gap: 6px; }
	.ob-dono::before { width: 7px; height: 7px; }
	.ob-dono--painel { left: 8px; top: -10px; }
	.ob-dono--cli { left: auto; right: 0; top: calc(var(--kb) * 640px * .52); }
	.ob-cena { --kb: .5; }
	.ob-nave { position: relative; left: auto; top: auto; width: 100%; grid-area: 1 / 1; }
	.ob-nave-tela { width: 100%; }
	.ob-cena .ob-cel { position: relative; left: auto; top: auto; grid-area: 1 / 1; justify-self: end; margin-top: calc(var(--kb) * 640px * .52 + 34px); margin-right: 8px; }
	.ob-cel--cli { --wn: 168; }
	.ob-regua { position: relative; left: auto; right: auto; bottom: auto; margin-top: -40px; padding: 10px 6px; }
	.ob-regua li { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 5px; padding: 2px 6px; }
	.ob-regua i { grid-row: auto; width: 16px; height: 16px; }
	.ob-regua b { font-size: 12px; white-space: normal; }
	.ob-regua span { font-size: 11px; }
	.ob-bento .ob-bloco--bloq, .ob-bento .ob-bloco--login, .ob-bento .ob-bloco--equipe, .ob-bento .ob-bloco--avisos { grid-column: 1 / -1; }
	.ob-pedido-ui { grid-template-columns: minmax(0, 1fr); }
	.ah .ob-chegada-pino { left: 0; top: 0; }
}
@media (max-width: 420px) {
	.ob-cena { --kb: .36; }
	.ob-cel--cli { --wn: 150; }
}
@media (max-width: 359px) {
	.ob-cena { --kb: .3; }
	.ob-cel--cli { --wn: 132; }
}
@media (prefers-reduced-motion: reduce) {
	.ob-t-folha-espera i { animation: none; }
	.ob-bento.ob-espera .ob-cobrar-balao, .ob-bento.ob-espera .ob-avisos-ui li { opacity: 1; transform: none; }
}
.ah--calmo .ob-t-folha-espera i { animation: none; }

/* ==========================================================================
   8. Pagamento direto na plataforma (v3.23.0)

   A plataforma de rastreamento da central de exemplo, com o aviso do Órbita
   no meio da tela (inc/app-orbita-plataforma.php). Uma raiz de tamanho fixo
   (.ob-v) encolhida inteira por --kp, que o app-orbita.js mede pela largura
   da tela desenhada: no computador, um navegador de 1200 por 740; até 760 px,
   um celular de 390 por 844 com a mesma plataforma no jeito do celular. O
   CSS dá um --kp perto do certo para quem está sem JavaScript.

   As quatro etapas (data-etapa no .ob-pl): 0 o aviso, 1 o PIX aberto, 2 o
   pagamento recebido, 3 o próximo acesso, com a frota. As partes do aviso
   abrem e fecham a altura (grid-template-rows de 0fr a 1fr): o aviso cresce
   como o de verdade cresce para caber o QR.
   ========================================================================== */
.ob-plat {
	position: relative; padding-block: 84px 0;
	--g-fundo: #F3F5F8; --g-topo: #FFFFFF; --g-lado: #FFFFFF; --g-cromo: #E8EBF0; --g-borda: #E3E8EE; --g-campo: #F1F4F7;
	--g-tinta: #0F172A; --g-texto: #334155; --g-texto-2: #64748B; --g-texto-3: #94A3B8;
	--g-terra: #EEF0EA; --g-quadra: #E3E2DB; --g-parque: #D3EBCB; --g-agua: #BCDCF1; --g-rua: #FFFFFF; --g-rua-borda: #D8D5CC;
	--g-via: #FBE39A; --g-via-borda: #E2C05A; --g-rotulo: #6B7280; --g-agua-texto: #4A86B0; --g-parque-texto: #4D8A4A; --g-halo: rgba(255, 255, 255, .95);
	--g-modal: #FFFFFF; --g-veu: rgba(15, 23, 42, .26);
	--g-ambar: #B45309; --g-verde: #15803D; --g-verde-n: #16A34A; --g-verde-f: #F0FDF4; --g-verde-b: #BBF7D0;
}
:root:not([data-theme="light"]) .ob-plat {
	--g-fundo: #0E1013; --g-topo: #16191E; --g-lado: #16191E; --g-cromo: #1F2329; --g-borda: rgba(255, 255, 255, .09); --g-campo: rgba(255, 255, 255, .06);
	--g-tinta: #F1F5F9; --g-texto: #CBD5E1; --g-texto-2: #94A3B8; --g-texto-3: #64748B;
	--g-terra: #1A1E24; --g-quadra: #21262D; --g-parque: #1C2E22; --g-agua: #16324A; --g-rua: #2B313A; --g-rua-borda: #111419;
	--g-via: #5A4A1C; --g-via-borda: #382E12; --g-rotulo: #8B95A3; --g-agua-texto: #6EA6CF; --g-parque-texto: #6FAE6B; --g-halo: rgba(0, 0, 0, .55);
	--g-modal: #17191D; --g-veu: rgba(0, 0, 0, .36);
	--g-ambar: #FCD34D; --g-verde: #4ADE80; --g-verde-n: #4ADE80; --g-verde-f: rgba(34, 197, 94, .12); --g-verde-b: rgba(34, 197, 94, .3);
}

/* a cena: a moldura (navegador ou celular) e a tela encolhida */
.ob-pl { --kp: .9167; position: relative; }
.ob-pl-moldura {
	position: relative; max-width: 1100px; margin-inline: auto; border-radius: 16px; overflow: hidden; background: var(--g-cromo);
	box-shadow: 0 50px 100px -50px rgba(15, 23, 42, .55), 0 0 0 1px rgba(15, 23, 42, .10);
	transform-origin: 50% 100%; transition: transform 1.1s cubic-bezier(.23, 1, .32, 1), opacity .8s ease;
}
:root:not([data-theme="light"]) .ob-pl-moldura { box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .10); }
/* a plataforma chega deitada e se endireita quando aparece (app-orbita.js) */
.ob-pl.ob-pl-espera .ob-pl-moldura { transform: perspective(1800px) rotateX(14deg) scale(.94); opacity: .55; }
.ob-pl-tela { position: relative; height: calc(740px * var(--kp)); overflow: hidden; }
.ob-v {
	position: absolute; left: 0; top: 0; width: 1200px; height: 740px; display: grid; grid-template-rows: 40px 700px;
	transform: scale(var(--kp)); transform-origin: 0 0;
	color: var(--g-texto); font: 400 13px/1.3 var(--v3-body); text-align: left; letter-spacing: 0;
	-webkit-user-select: none; user-select: none; pointer-events: none;
}
.ob-v svg { display: block; flex: none; max-width: none; }
.ob-v b { font-weight: 650; }
.ob-v em, .ob-v i { font-style: normal; }
.ah .ob-v p { margin: 0; }
.ob-v-status { display: none; }

/* a barra do navegador */
.ob-v-barra { display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--g-cromo); border-bottom: 1px solid var(--g-borda); }
.ob-v-bolas { display: flex; gap: 7px; }
.ob-v-bolas i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.ob-v-bolas i + i { background: #FEBC2E; }
.ob-v-bolas i + i + i { background: #28C840; }
.ob-v-end {
	display: inline-flex; align-items: center; gap: 7px; height: 26px; margin-inline: auto; padding: 0 16px; border-radius: 999px;
	background: var(--g-topo); color: var(--g-texto-2); font: 500 12.5px/1 var(--v3-mono); white-space: nowrap;
}
.ob-v-end svg { width: 12px; height: 12px; color: var(--o-verde-p); }
.ob-v-abas { width: 48px; display: flex; justify-content: flex-end; color: var(--g-texto-3); }
.ob-v-abas svg { width: 18px; height: 18px; }

/* a plataforma */
.ob-g { position: relative; display: grid; grid-template-rows: 52px 648px; overflow: hidden; background: var(--g-fundo); transition: opacity .28s ease; }
/* um novo acesso: a plataforma pisca como uma página que recarrega */
.ob-pl.ob-pl-recarrega .ob-g { opacity: .3; }
.ob-g-topo { display: flex; align-items: center; gap: 11px; padding: 0 18px; background: var(--g-topo); border-bottom: 1px solid var(--g-borda); }
.ob-g-menu { display: none; color: var(--g-texto); }
.ob-g-menu svg { width: 22px; height: 22px; }
.ob-g-nome { font-size: 14.5px; color: var(--g-tinta); white-space: nowrap; }
.ob-g-nav { display: flex; gap: 4px; margin-left: 26px; }
.ob-g-nav > span { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--g-texto-2); }
.ob-g-nav svg { width: 17px; height: 17px; }
.ob-g-nav > span.sel { background: var(--o-m-suave); color: var(--o-m-texto); }
.ob-g-quem { display: flex; align-items: center; gap: 9px; margin-left: auto; font-size: 13px; color: var(--g-tinta); }
.ob-g-quem > i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--o-m-suave); color: var(--o-m-texto); font-weight: 650; font-size: 12px; }
.ob-g-quem svg { width: 16px; height: 16px; color: var(--g-texto-3); }

.ob-g-corpo { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 0; }
.ob-g-lado { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 12px 12px; background: var(--g-lado); border-right: 1px solid var(--g-borda); }
.ob-g-busca { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--g-campo); color: var(--g-texto-3); }
.ob-g-busca svg { width: 16px; height: 16px; }
.ob-g-abas { display: flex; gap: 18px; padding: 2px 4px 0; border-bottom: 1px solid var(--g-borda); font-weight: 600; font-size: 13px; color: var(--g-texto-2); }
.ob-g-abas > * { padding-bottom: 9px; }
.ob-g-abas > b { color: var(--o-m-texto); box-shadow: inset 0 -2px 0 var(--o-m500); }
.ob-g-grupo { display: flex; align-items: center; gap: 9px; padding: 2px 8px; color: var(--g-tinta); }
.ob-g-grupo > em { padding: 3px 8px; border-radius: 999px; background: var(--g-campo); font-weight: 600; font-size: 11px; color: var(--g-texto-2); }
.ob-g-grupo > svg { width: 15px; height: 15px; margin-left: auto; color: var(--g-texto-3); }
.ob-g-caixa { flex: none; width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; background: var(--o-m500); color: #fff; }
.ob-g-caixa svg { width: 12px; height: 12px; stroke-width: 3; }
.ob-g-veic { display: grid; grid-template-columns: 17px 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 12px; }
.ob-g-veic.sel { background: var(--o-m-suave); }
.ob-g-st { width: 10px; height: 10px; border-radius: 50%; }
.ob-g-st--anda { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); }
.ob-g-st--parado { background: var(--o-m500); box-shadow: 0 0 0 3px var(--o-m-suave); }
.ob-g-veic > span { display: grid; gap: 3px; min-width: 0; }
.ob-g-veic > span b { font-size: 13.5px; color: var(--g-tinta); }
.ob-g-veic small { font: 500 11.5px/1 var(--v3-mono); color: var(--g-texto-2); }
.ob-g-veic > em { display: grid; gap: 4px; justify-items: end; }
.ob-g-veic > em b { font-size: 12.5px; color: var(--g-texto); }
.ob-g-veic > em b.ob-g-vel { color: var(--g-verde-n); }
.ob-g-veic > em small { font: 400 11px/1 var(--v3-body); color: var(--g-texto-3); }
.ob-g-detalhe { display: grid; gap: 5px; margin-top: auto; padding: 13px; border-radius: 14px; background: var(--g-campo); }
.ob-g-detalhe > b { font-size: 13px; color: var(--g-tinta); }
.ob-g-detalhe > small { font-size: 12px; color: var(--g-texto-2); }
.ob-g-dados { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.ob-g-dados > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: var(--g-lado); border: 1px solid var(--g-borda); font-size: 11.5px; color: var(--g-texto); }
.ob-g-dados svg { width: 14px; height: 14px; color: var(--o-m-texto); }
.ob-g-atual { text-align: center; font-size: 11px; color: var(--g-texto-3); }

/* o mapa */
.ob-g-mapa { position: relative; overflow: hidden; background: var(--g-terra); }
.ob-g-mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-g-terra { fill: var(--g-terra); }
.ob-g-quadra rect { fill: var(--g-quadra); }
.ob-g-parque { fill: var(--g-parque); }
.ob-g-lago { fill: var(--g-agua); }
.ob-g-agua { stroke: var(--g-agua); stroke-width: 44; stroke-linecap: round; }
.ob-g-ruas-borda path, .ob-g-ruas path { fill: none; stroke-linecap: round; }
.ob-g-ruas-borda .ob-g-av { stroke: var(--g-rua-borda); stroke-width: 18; }
.ob-g-ruas-borda .ob-g-r { stroke: var(--g-rua-borda); stroke-width: 11; }
.ob-g-ruas .ob-g-av { stroke: var(--g-rua); stroke-width: 14; }
.ob-g-ruas .ob-g-r { stroke: var(--g-rua); stroke-width: 8; }
.ob-g-via-borda { fill: none; stroke: var(--g-via-borda); stroke-width: 19; stroke-linecap: round; stroke-linejoin: round; }
.ob-g-via { fill: none; stroke: var(--g-via); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.ob-g-nomes text { font: 500 10px var(--v3-body); fill: var(--g-rotulo); letter-spacing: .02em; }
.ob-g-nomes .ob-g-nome-agua { font-style: italic; font-size: 11.5px; fill: var(--g-agua-texto); }
.ob-g-nomes .ob-g-nome-parque { font-size: 11.5px; fill: var(--g-parque-texto); }
.ob-g-rota-halo { fill: none; stroke: var(--g-halo); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.ob-g-rota { fill: none; stroke: var(--o-m500); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ob-g-rota-ini { fill: #fff; stroke: var(--o-m500); stroke-width: 3; }
.ob-g-parado > circle { fill: #475569; stroke: #fff; stroke-width: 3; }
.ob-g-parado > text { fill: #fff; font: 700 12px var(--v3-body); text-anchor: middle; }
.ob-g-parado rect, .ob-g-movel rect { fill: var(--g-topo); stroke: var(--g-borda); stroke-width: 1; }
.ob-g-parado g text, .ob-g-movel text { fill: var(--g-tinta); font: 600 10.5px var(--v3-mono); text-anchor: middle; }
.ob-g-movel circle { fill: var(--o-m500); stroke: #fff; stroke-width: 3.5; }
.ob-g-movel path { fill: #fff; }
.ob-g-zoom { position: absolute; right: 14px; top: 14px; display: grid; border-radius: 10px; overflow: hidden; background: var(--g-topo); box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .35), 0 0 0 1px var(--g-borda); }
.ob-g-zoom > i { width: 36px; height: 36px; display: grid; place-items: center; color: var(--g-texto); }
.ob-g-zoom > i + i { border-top: 1px solid var(--g-borda); }
.ob-g-zoom svg { width: 18px; height: 18px; }
.ob-g-escala { position: absolute; left: 14px; bottom: 12px; display: grid; gap: 3px; font: 600 10.5px/1 var(--v3-mono); color: var(--g-texto-2); }
.ob-g-escala > i { width: 72px; height: 6px; border: 2px solid var(--g-texto-2); border-top: 0; }

/* os popups que o gerente colou na plataforma: o véu, a barra e o cartão do meio */
.ob-g-veu { position: absolute; inset: 0; z-index: 5; background: var(--g-veu); }
.ob-g-barra {
	position: absolute; z-index: 6; left: 304px; top: 66px; width: 300px; height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 12px 0 14px;
	border-radius: 11px; background: var(--o-m500); color: #fff; font-weight: 600; font-size: 13px;
	box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5);
	transition: opacity .35s ease, transform .45s cubic-bezier(.23, 1, .32, 1), visibility .35s;
}
.ob-g-barra > b { flex: 1; font-weight: 650; }
.ob-g-barra > svg { width: 16px; height: 16px; }
.ob-g-barra-ponto { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.ob-g-barra-ponto::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: ob-g-pulsa 1.6s ease-out infinite; }
@keyframes ob-g-pulsa { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
.ob-g-selo { padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 11.5px; transition: background-color .3s ease, color .3s ease; }
.ob-pl[data-etapa="2"] .ob-g-selo { background: #fff; color: var(--o-m700); }
.ob-pl[data-etapa="2"] .ob-g-barra-ponto::after { animation: none; opacity: 0; }
.ob-pl[data-etapa="3"] .ob-g-barra { opacity: 0; visibility: hidden; transform: translateY(-10px); }

.ob-g-camada { position: absolute; z-index: 7; left: 290px; top: 52px; right: 0; bottom: 0; display: grid; place-items: center; padding: 20px; }
.ob-g-modal {
	position: relative; width: 360px; padding: 20px 22px 14px; border-radius: 16px; background: var(--g-modal); color: var(--g-tinta);
	box-shadow: 0 34px 70px -24px rgba(15, 23, 42, .6), 0 0 0 1px var(--g-borda);
}
.ob-pl[data-etapa="3"] .ob-g-modal { animation: ob-g-reabre .7s cubic-bezier(.23, 1, .32, 1); }
@keyframes ob-g-reabre { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.ob-g-fecha { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--g-texto-3); }
.ob-g-fecha svg { width: 16px; height: 16px; }
.ob-g-dobra { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s cubic-bezier(.23, 1, .32, 1), opacity .35s ease; }
.ob-g-dobra-miolo { min-height: 0; overflow: hidden; }
.ob-pl[data-etapa="0"] .ob-d0,
.ob-pl[data-etapa="1"] .ob-d1,
.ob-pl[data-etapa="2"] .ob-d2,
.ob-pl[data-etapa="3"] .ob-d3 { grid-template-rows: 1fr; opacity: 1; }
.ob-g-aviso-tit { display: flex; align-items: center; gap: 9px; padding-right: 24px; color: var(--g-ambar); }
.ob-g-aviso-tit svg { width: 20px; height: 20px; }
.ob-g-aviso-tit b { font-size: 14.5px; line-height: 1.25; font-weight: 700; }
.ob-g-valor { display: block; margin-top: 10px; font: 700 29px/1 var(--v3-body); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--g-tinta); }
.ob-g-venc { display: block; margin-top: 5px; font-size: 12.5px; color: var(--g-texto-2); }
.ob-g-pagar {
	display: block; margin-top: 15px; padding: 12px; border-radius: 11px; background: var(--o-m500); color: #fff; text-align: center; font-weight: 700; font-size: 14px;
	transition: transform .15s cubic-bezier(.23, 1, .32, 1), filter .15s ease;
}
.ob-pl.ob-pl-clica .ob-g-pagar { transform: scale(.96); filter: brightness(.88); }
.ob-g-pix { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 7px; margin-top: 13px; padding: 14px 14px 12px; border: 1px solid var(--g-borda); border-radius: 12px; text-align: center; }
.ob-g-pix .ob-t-qr { width: 138px; height: 138px; }
.ob-g-pix-ate { font-size: 11.5px; color: var(--g-texto-2); }
.ah .ob-g-pix p { font-size: 12px; line-height: 1.4; color: var(--g-texto); }
.ob-g-pix-codigo { width: 100%; padding: 8px 9px; border: 1px solid var(--g-borda); border-radius: 8px; background: var(--g-campo); font: 500 11px/1 var(--v3-mono); color: var(--g-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ob-g-pix-copiar { width: 100%; padding: 10px; border-radius: 9px; background: var(--o-m500); color: #fff; font-weight: 700; font-size: 13px; }
.ob-g-pix-espera { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--g-texto-3); }
.ob-g-pix-espera i { width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; animation: ob-g-espera 1.2s ease-in-out infinite; }
@keyframes ob-g-espera { 50% { opacity: .3; } }
.ob-g-pago { display: grid; justify-items: center; gap: 5px; margin-top: 13px; padding: 16px 14px; border-radius: 12px; background: var(--g-verde-f); border: 1px solid var(--g-verde-b); text-align: center; }
.ob-g-pago > i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #16A34A; color: #fff; }
.ob-g-pago > i svg { width: 20px; height: 20px; stroke-width: 3; }
.ob-g-pago > b { font-size: 15px; font-weight: 700; color: var(--g-verde); }
.ob-g-pago > span { font-size: 12.5px; line-height: 1.4; color: var(--g-texto); }
.ob-g-emdia { display: grid; gap: 4px; padding-right: 18px; }
.ob-g-ola { font-size: 17px; font-weight: 700; color: var(--g-tinta); }
.ob-g-emdia > span:not(.ob-g-frota) { font-size: 13px; line-height: 1.45; color: var(--g-texto-2); }
.ob-g-frota { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px -18px 0 0; }
.ob-g-frota > span { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--g-borda); border-radius: 11px; text-align: center; }
.ob-g-frota b { font-size: 22px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.ob-g-frota small { font-size: 9.5px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--g-texto-3); }
.ob-g-n--anda { color: var(--g-verde-n); }
.ob-g-n--marca { color: var(--o-m500); }
:root:not([data-theme="light"]) .ob-g-n--marca { color: var(--o-m400); }
.ob-g-n--zero { color: var(--g-texto-3); }
.ob-g-frota-pe { display: block; margin-top: 9px; font-size: 11.5px; line-height: 1.4; color: var(--g-texto-3); }
.ob-g-assina { display: block; margin-top: 14px; text-align: center; font-weight: 600; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--g-texto-3); }

/* o cursor: vai até o "Pagar com PIX" e aperta (app-orbita.js); no celular
   ele vira o toque do dedo */
.ob-g-cursor {
	position: absolute; z-index: 9; left: 0; top: 0; width: 26px; height: 26px; opacity: 0;
	transform: translate(calc(var(--cx, 1060) * 1px), calc(var(--cy, 610) * 1px));
	transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .3s ease;
}
.ob-g-cursor svg { width: 26px; height: 26px; fill: #0F172A; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.ob-g-cursor::after { content: ""; position: absolute; left: -11px; top: -11px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--o-m500); opacity: 0; }
.ob-pl.ob-pl-cursor .ob-g-cursor { opacity: 1; }
.ob-pl.ob-pl-clica .ob-g-cursor::after { animation: ob-g-clique .5s ease-out; }
@keyframes ob-g-clique { from { opacity: 1; transform: scale(.5); } to { opacity: 0; transform: scale(1.6); } }
/* quem está com o mouse também pode apertar o botão do aviso */
.ob-pl[data-etapa="0"] .ob-g-pagar { pointer-events: auto; cursor: pointer; }

/* os quatro passos, embaixo: mostram a etapa e trocam a cena */
.ah .ob-pl-passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1100px; margin: 26px auto 0; }
.ob-pl-passos > li { display: flex; }
.ah .ob-pl-passo {
	position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-content: start; width: 100%;
	padding: 18px 16px 16px; border: 1px solid var(--ah-linha); border-radius: 18px; background: var(--ah-cartao); text-align: left; cursor: pointer;
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
	transition: border-color .25s ease, box-shadow .25s ease, transform .15s cubic-bezier(.23, 1, .32, 1);
}
.ob-pl-passos > li:nth-child(1) .ob-pl-passo { --c: #E59A22; }
.ob-pl-passos > li:nth-child(2) .ob-pl-passo { --c: #8B5CF6; }
.ob-pl-passos > li:nth-child(3) .ob-pl-passo { --c: #22A355; }
.ob-pl-passos > li:nth-child(4) .ob-pl-passo { --c: #0E95B0; }
.ob-pl-passo-fio { position: absolute; left: 18px; right: 18px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ah-linha); overflow: hidden; }
.ob-pl-passo-fio > i { display: block; height: 100%; background: var(--c); transform: scaleX(0); transform-origin: 0 50%; }
.ob-pl-passo.feito .ob-pl-passo-fio > i,
.ob-pl-passos:not(.ob-pl-auto) .ob-pl-passo[aria-current="step"] .ob-pl-passo-fio > i { transform: scaleX(1); }
.ob-pl-passos.ob-pl-auto .ob-pl-passo[aria-current="step"] .ob-pl-passo-fio > i { animation: ob-pl-enche var(--dur, 4s) linear forwards; }
.ob-pl-passos.ob-pl-pausa .ob-pl-passo-fio > i { animation-play-state: paused; }
@keyframes ob-pl-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ob-pl-passo-n {
	grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
	background: var(--ah-cartao-2); color: var(--ah-texto-2); font: 650 13px/1 var(--v3-mono);
	transition: background-color .25s ease, color .25s ease;
}
.ob-pl-passo[aria-current="step"] .ob-pl-passo-n, .ob-pl-passo.feito .ob-pl-passo-n { background: var(--c); color: #fff; }
.ob-pl-passo > b { font: 650 15px/1.25 var(--v3-body); color: var(--ah-tinta); }
.ob-pl-passo-desc { font-size: 13.5px; line-height: 1.4; color: var(--ah-texto-2); }
.ah .ob-pl-passo[aria-current="step"] { border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--c) 75%, transparent); }
.ah .ob-pl-passo:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
	.ah .ob-pl-passo:not([aria-current="step"]):hover { border-color: color-mix(in srgb, var(--c) 40%, transparent); }
}
.ah .ob-pl-nota { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ah-texto-2); }

@media (max-width: 1180px) { .ob-pl { --kp: .82; } }
@media (max-width: 1040px) { .ob-pl { --kp: .74; } }
@media (max-width: 979px) {
	.ob-plat { padding-top: 64px; }
	.ob-pl { --kp: .66; }
	.ah .ob-pl-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* até 760 px: a plataforma no celular, sem a lista de veículos */
@media (max-width: 760px) {
	.ob-plat { padding-top: 50px; }
	.ob-pl { --kp: .78; }
	.ob-pl-moldura {
		--w: min(318px, 86vw);
		width: var(--w); padding: calc(var(--w) * .03); border-radius: calc(var(--w) * .155);
		background: linear-gradient(150deg, #5b5f68 0%, #2a2d33 22%, #15171b 55%, #0c0d10 100%);
		box-shadow: var(--ah-sombra-cel), inset 0 0 0 1.5px rgba(255, 255, 255, .22), inset 0 0 0 calc(var(--w) * .014) #0b0c0f;
	}
	.ob-pl-tela { height: calc(844px * var(--kp)); border-radius: 12.65% / 5.85%; background: var(--g-topo); }
	.ob-v { width: 390px; height: 844px; grid-template-rows: 50px 46px 748px; }
	.ob-v-status { display: block; background: var(--g-topo); }
	.ob-v-status .ob-t-status { height: 50px; padding-top: 2px; color: var(--g-tinta); }
	.ob-v-barra { gap: 10px; padding: 0 12px; background: var(--g-topo); }
	.ob-v-bolas { display: none; }
	.ob-v-end { flex: 1; margin: 0; height: 32px; padding: 0 12px; background: var(--g-campo); font-size: 12px; overflow: hidden; }
	.ob-v-abas { width: auto; }
	.ob-g { grid-template-rows: 50px 698px; }
	.ob-g-topo { gap: 10px; padding: 0 14px; }
	.ob-g-menu { display: block; }
	.ob-g-nav, .ob-g-quem > b, .ob-g-quem > svg { display: none; }
	.ob-g-corpo { grid-template-columns: minmax(0, 1fr); }
	.ob-g-lado { display: none; }
	.ob-g-barra { left: 10px; top: 60px; width: 244px; height: 38px; gap: 8px; padding: 0 10px 0 12px; font-size: 12px; white-space: nowrap; }
	.ob-g-camada { left: 0; top: 50px; padding: 16px; }
	.ob-g-modal { width: 340px; }
	.ob-g-zoom { top: 60px; }
	.ob-g-cursor svg { display: none; }
	.ob-g-cursor::before { content: ""; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(15, 23, 42, .28); border: 2px solid rgba(255, 255, 255, .9); }
	.ah .ob-pl-passos { gap: 10px; margin-top: 22px; }
	.ah .ob-pl-passo { grid-template-columns: minmax(0, 1fr); padding: 16px 14px 14px; row-gap: 6px; }
	.ob-pl-passo-n { grid-row: auto; width: 26px; height: 26px; font-size: 12px; }
	.ob-pl-passo > b { font-size: 14px; }
	.ob-pl-passo-desc { font-size: 12.5px; }
	.ah .ob-pl-nota { font-size: 14px; }
}
@media (max-width: 420px) { .ob-pl { --kp: .7; } }
@media (prefers-reduced-motion: reduce) {
	.ob-pl.ob-pl-espera .ob-pl-moldura { transform: none; opacity: 1; }
	.ob-g-barra-ponto::after, .ob-g-pix-espera i { animation: none; }
	.ob-pl[data-etapa="3"] .ob-g-modal { animation: none; }
	/* os passos trocam a cena na hora, sem o aviso abrindo e fechando */
	.ob-g-dobra, .ob-g-barra, .ob-g-cursor, .ob-pl-moldura, .ob-g { transition: none; }
}
.ah--calmo .ob-g-barra-ponto::after, .ah--calmo .ob-g-pix-espera i { animation: none; }