/* ==========================================================================
   Página do app Rastreamento Hybrid (page-app.php), v3.18.0

   Carrega só nesta página (functions.php, sl_ah_e_pagina()), depois do
   v3.css. Tudo mora dentro de .ah e as classes começam com ah- para não
   esbarrar no main-final.css. Aprovada a partir do protótipo em
   prototipo-app-hybrid/ (raiz do projeto).

   Céu claro (cinza azulado) com o sol laranja nascendo atrás dos celulares;
   no tema escuro, a noite com as luzes da cidade. Mesma convenção de tema do
   site: data-theme="light" no <html> = claro; sem o atributo = escuro.

   Os títulos repetem font-variation-settings porque o v3.css fixa "wdth" 110
   e "wght" 700 em h1 e h2, e font-variation-settings vence font-weight e
   font-stretch.
   ========================================================================== */

.ah {
	--ah-ceu: #F2F5F9;
	--ah-ceu-alto: #DCE5EF;
	--ah-rua: rgba(51, 65, 85, .10);
	--ah-sol-1: rgba(255, 128, 48, .50);
	--ah-sol-2: rgba(255, 186, 138, .30);
	--ah-tinta: #0E1116;
	--ah-tinta-2: #7B8594;
	--ah-texto: #3E4653;
	--ah-texto-2: #5D6673;
	--ah-linha: rgba(14, 17, 22, .09);
	--ah-cartao: #FFFFFF;
	--ah-cartao-2: #E9EEF4;
	--ah-laranja: #F16000;
	--ah-laranja-forte: #D45400;
	--ah-laranja-texto: #B84A00;
	--ah-laranja-suave: rgba(241, 96, 0, .14);
	--ah-rota-plano: rgba(14, 17, 22, .24);
	--ah-pino-vazio: #C2CBD6;
	--ah-vidro: rgba(255, 255, 255, .82);
	--ah-vidro-linha: rgba(255, 255, 255, .95);
	--ah-sombra-cel: 0 50px 90px -30px rgba(30, 41, 59, .45), 0 24px 44px -26px rgba(241, 96, 0, .35);
	--ah-sombra-cartao: 0 30px 60px -44px rgba(15, 23, 42, .40);
	--ah-sombra-aviso: 0 18px 40px -18px rgba(15, 23, 42, .35);

	position: relative;
	isolation: isolate;
	overflow-x: clip;
	background: var(--ah-ceu);
	color: var(--ah-texto);
	font-family: var(--v3-body);
	font-size: 17px;
	line-height: 1.55;
}
:root:not([data-theme="light"]) .ah {
	--ah-ceu: #0A0E15;
	--ah-ceu-alto: #111C2E;
	--ah-rua: rgba(148, 163, 184, .085);
	--ah-sol-1: rgba(241, 96, 0, .42);
	--ah-sol-2: rgba(241, 96, 0, .12);
	--ah-tinta: #EEF1F5;
	--ah-tinta-2: #7F8A9A;
	--ah-texto: #B4BCC7;
	--ah-texto-2: #8F98A5;
	--ah-linha: rgba(255, 255, 255, .08);
	--ah-cartao: #121823;
	--ah-cartao-2: #1A2230;
	--ah-laranja-texto: #FF9147;
	--ah-laranja-suave: rgba(241, 96, 0, .20);
	--ah-rota-plano: rgba(255, 255, 255, .24);
	--ah-pino-vazio: #3A4658;
	--ah-vidro: rgba(18, 24, 35, .78);
	--ah-vidro-linha: rgba(255, 255, 255, .09);
	--ah-sombra-cel: 0 50px 90px -30px rgba(0, 0, 0, .85), 0 0 80px -24px rgba(241, 96, 0, .40);
	--ah-sombra-cartao: 0 30px 60px -44px rgba(0, 0, 0, .85);
	--ah-sombra-aviso: 0 18px 40px -18px rgba(0, 0, 0, .7);
}

.ah *, .ah *::before, .ah *::after { box-sizing: border-box; }
.ah p { margin: 0; color: var(--ah-texto); }
.ah ul { margin: 0; padding: 0; list-style: none; }
.ah figure { margin: 0; }
.ah button { font: inherit; color: inherit; }
.ah :focus-visible { outline: 3px solid var(--ah-laranja); outline-offset: 3px; border-radius: 6px; }
.ah [hidden] { display: none !important; }
.ah--foto *, .ah--foto *::before, .ah--foto *::after { transition: none !important; }

.ah-embrulho { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.ah-camada { position: relative; z-index: 2; }
.ah .ah-ico { width: 20px; height: 20px; flex: none; display: block; }

/* ---------------------------------------------------------------- títulos */
.ah .ah-h1,
.ah .ah-h2,
.ah h3 {
	margin: 0;
	color: var(--ah-tinta);
	font-family: var(--v3-display);
	text-wrap: balance;
}
.ah .ah-h1 {
	margin: 26px 0 22px;
	font-size: clamp(42px, 6.4vw, 82px);
	line-height: .98;
	letter-spacing: -.032em;
	font-variation-settings: "wdth" 116, "wght" 660;
}
.ah .ah-h2 {
	margin: 0 0 18px;
	font-size: clamp(34px, 4.4vw, 58px);
	line-height: 1;
	letter-spacing: -.028em;
	font-variation-settings: "wdth" 116, "wght" 680;
}
.ah .ah-h1 > span,
.ah .ah-h2 > span { display: block; }
.ah .ah-tom { color: var(--ah-tinta-2); }
.ah .ah-secao-lede { max-width: 520px; font-size: 18px; color: var(--ah-texto); }

/* ---------------------------------------------------------------- rota (a assinatura da página) */
.ah-rota { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; max-width: none; }
.ah-rota-plano { fill: none; stroke: var(--ah-rota-plano); stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; }
.ah-rota-feita { fill: none; stroke: var(--ah-laranja); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
:root:not([data-theme="light"]) .ah-rota-feita { filter: drop-shadow(0 0 5px rgba(241, 96, 0, .65)); }
.ah-carro-halo { fill: var(--ah-laranja-suave); }
.ah--calmo .ah-rota-carro { display: none; }

/* ---------------------------------------------------------------- abertura */
.ah-abertura { position: relative; overflow: clip; padding-top: 64px; }
.ah-ceu { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--ah-ceu-alto) 0%, var(--ah-ceu) 58%); }
.ah-ruas {
	position: absolute; inset: 0; z-index: 0; color: var(--ah-rua);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, #000 20%, transparent 78%);
	mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, #000 20%, transparent 78%);
}
.ah-ruas .ruas { width: 100%; height: 100%; max-width: none; }
.ah-sol {
	position: absolute; z-index: 0; left: 50%; bottom: -560px; width: 1180px; height: 1180px; border-radius: 50%;
	transform: translateX(-50%);
	background: radial-gradient(circle, var(--ah-sol-1) 0%, var(--ah-sol-2) 34%, transparent 62%);
}
.ah-abertura-texto { text-align: center; max-width: 860px; }
.ah .ah-selo {
	display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 5px 16px 5px 5px; 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: 500 14px/1 var(--v3-body); color: var(--ah-tinta);
}
.ah-selo small { font: inherit; color: var(--ah-texto-2); }
.ah-icone-app { width: 32px; height: 32px; border-radius: 9px; background: #333333; display: grid; place-items: center; flex: none; }
.ah-icone-app svg { width: 26px; height: 26px; }
.ah .ah-lede { margin: 0 auto; max-width: 600px; font-size: 19px; }
.ah-acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 18px; margin-top: 34px; }
.ah-lojas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.ah-loja { display: block; border-radius: 9px; }
.ah-loja img { height: 48px; width: auto; }
.ah-loja-breve {
	display: inline-flex; align-items: center; height: 48px; padding: 0 18px; border-radius: 10px;
	border: 1px dashed var(--ah-pino-vazio); color: var(--ah-texto-2); font: 500 14px/1 var(--v3-body);
	background: color-mix(in srgb, var(--ah-cartao) 60%, transparent);
}
.ah-botao-video {
	display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px 0 8px; cursor: pointer;
	border-radius: 999px; border: 1px solid var(--ah-linha); background: var(--ah-vidro);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	font: 600 15px/1 var(--v3-body); color: var(--ah-tinta);
	-webkit-tap-highlight-color: transparent;   /* o toque já responde com a janela saindo do botão */
}
.ah-botao-video:hover { border-color: var(--ah-laranja); }
.ah-play { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ah-tinta); color: var(--ah-ceu); }
.ah-play svg { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }
.ah-tempo { font: 500 12px/1 var(--v3-mono); color: var(--ah-texto-2); }

.ah-palco {
	position: relative; z-index: 2; height: 620px; margin-top: 60px;
	-webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 66%, transparent 100%);
}
.ah-cel {
	--w: 300px;
	position: relative; margin: 0; 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;
}
.ah-cel::before, .ah-cel::after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: #3a3d44; }
.ah-cel::before { left: -2px; top: 20%; height: 7%; box-shadow: 0 calc(var(--w) * .22) 0 0 #3a3d44; }
.ah-cel::after { right: -2px; top: 26%; height: 11%; }
.ah-cel img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 12.65% / 5.85%; background: #0A0A0B; }
.ah-palco .ah-cel { position: absolute; left: 50%; top: 0; }
.ah-cel--meio { --w: 312px; z-index: 3; transform: translateX(-50%); }
.ah-palco .ah-cel--esq, .ah-palco .ah-cel--dir { --w: 262px; z-index: 2; top: 78px; }
.ah-cel--esq { transform: translateX(calc(-50% - 272px)) rotate(-8deg); }
.ah-cel--dir { transform: translateX(calc(-50% + 272px)) rotate(8deg); }

.ah-aviso {
	position: absolute; z-index: 4; width: max-content; max-width: 250px;
	display: grid; grid-template-columns: 38px auto; column-gap: 11px; align-items: center;
	padding: 10px 18px 10px 10px; border-radius: 18px;
	background: var(--ah-vidro); border: 1px solid var(--ah-vidro-linha); box-shadow: var(--ah-sombra-aviso);
	-webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
	opacity: 0;
	animation: ah-aviso-entra .7s cubic-bezier(.2, .8, .2, 1) forwards, ah-aviso-flutua 7s ease-in-out infinite;
	animation-delay: var(--d), calc(var(--d) + .7s);
}
.ah-aviso-ico { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: var(--cf); }
.ah-aviso-ico .ah-ico { width: 19px; height: 19px; }
.ah-aviso-titulo { font: 600 14.5px/1.25 var(--v3-body); color: var(--ah-tinta); }
.ah-aviso-linha { font: 400 12.5px/1.35 var(--v3-body); color: var(--ah-texto-2); }
.ah-aviso--1 { --d: .7s; --c: #16A34A; --cf: rgba(34, 197, 94, .16); left: max(12px, calc(50% - 480px)); top: 96px; }
.ah-aviso--2 { --d: 1.5s; --c: var(--ah-laranja); --cf: var(--ah-laranja-suave); left: min(calc(100% - 262px), calc(50% + 196px)); top: 26px; }
.ah-aviso--3 { --d: 2.3s; --c: var(--ah-laranja); --cf: var(--ah-laranja-suave); left: max(12px, calc(50% - 455px)); top: 338px; }
.ah-aviso--4 { --d: 3.1s; --c: #DC2626; --cf: rgba(239, 68, 68, .15); left: min(calc(100% - 262px), calc(50% + 214px)); top: 300px; }
@keyframes ah-aviso-entra { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ah-aviso-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.ah--calmo .ah-aviso { opacity: 1; animation: none; }

/* ---------------------------------------------------------------- faixa de funções */
.ah-faixa { position: relative; padding-block: 18px 30px; }
.ah .ah-faixa-rotulo { margin: 0 0 16px; text-align: center; font-size: 14px; color: var(--ah-texto-2); }
.ah-faixa-janela {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ah-faixa-trilho { display: flex; width: max-content; animation: ah-faixa var(--ah-faixa-tempo, 70s) linear infinite; }
.ah-faixa:hover .ah-faixa-trilho, .ah-faixa:focus-within .ah-faixa-trilho { animation-play-state: paused; }
.ah-faixa-lista { display: flex; gap: 10px; padding: 6px 10px 14px 0; }
.ah-faixa-lista li {
	display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px 11px 14px; border-radius: 999px; white-space: nowrap;
	background: var(--ah-cartao); border: 1px solid var(--ah-linha); box-shadow: 0 8px 20px -16px rgba(15, 23, 42, .35);
	font: 500 15px/1 var(--v3-body); color: var(--ah-tinta);
}
.ah-faixa-lista .ah-ico { width: 18px; height: 18px; color: var(--ah-laranja); }
@keyframes ah-faixa { to { transform: translateX(var(--ah-faixa-passo, -50%)); } }
.ah--calmo .ah-faixa-janela { overflow-x: auto; }
.ah--calmo .ah-faixa-trilho { animation: none; }
.ah--calmo .ah-faixa-lista[aria-hidden="true"] { display: none; }

/* ---------------------------------------------------------------- Toque e veja */
.ah-toque { position: relative; padding-block: 110px 120px; }
.ah-toque-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: 72px; align-items: center; }
.ah-toque-texto .ah-secao-lede { margin-bottom: 34px; }
@media (min-width: 980px) {
	/* a rota desce pela esquerda, ao lado do título, e passa pelos pinos das paradas */
	.ah-toque-texto > .ah-h2,
	.ah-toque-texto > .ah-secao-lede { margin-left: 56px; }
}
.ah-paradas { display: flex; flex-direction: column; gap: 4px; }
.ah-parada {
	position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
	padding: 14px 20px 15px 56px; border-radius: 18px; border: 1px solid transparent; background: transparent;
}
.ah-parada:hover { background: color-mix(in srgb, var(--ah-cartao) 55%, transparent); }
.ah-parada[aria-selected="true"] { background: var(--ah-cartao); border-color: var(--ah-linha); box-shadow: var(--ah-sombra-cartao); }
.ah-parada-pino {
	position: absolute; left: 14px; top: 19px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--ah-ceu); border: 3px solid var(--ah-pino-vazio);
	transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.ah-parada.ah-passou .ah-parada-pino { border-color: var(--ah-laranja); }
.ah-parada[aria-selected="true"] .ah-parada-pino { background: var(--ah-laranja); border-color: var(--ah-laranja); box-shadow: 0 0 0 6px var(--ah-laranja-suave); }
.ah-parada-nome {
	display: flex; align-items: center; gap: 10px; color: var(--ah-tinta);
	font-family: var(--v3-display); font-size: 20px; line-height: 1.2; letter-spacing: -.01em;
	font-variation-settings: "wdth" 108, "wght" 650;
}
.ah-parada-nome .ah-ico { width: 18px; height: 18px; color: var(--ah-laranja); }
.ah-parada-desc { display: block; margin-top: 5px; max-width: 470px; font-size: 15.5px; line-height: 1.5; color: var(--ah-texto-2); }
.ah-toque-cel { position: relative; display: grid; justify-items: center; }
.ah-toque-cel::before {
	content: ""; position: absolute; z-index: -1; inset: 6% -14% 10%;
	background: radial-gradient(closest-side, var(--ah-sol-1), var(--ah-sol-2) 55%, transparent);
	filter: blur(10px); opacity: .9;
}
.ah-cel--grande { --w: 340px; }
.ah-tela-troca { position: relative; }
.ah-tela--b { position: absolute; inset: 0; opacity: 0; }
.ah-tela--b.ah-vem { opacity: 1; transition: opacity .5s ease; }
.ah--calmo .ah-tela--b.ah-vem { transition: none; }
.ah .ah-toque-legenda { display: none; margin: 22px 0 0; max-width: 340px; text-align: center; font-size: 15.5px; color: var(--ah-texto-2); }
.ah-telas-fonte { display: none; }

/* ---------------------------------------------------------------- mosaico */
.ah-mosaico { position: relative; padding-block: 30px 120px; }
.ah-secao-cabeca { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 44px; }
.ah-secao-cabeca .ah-h2 { margin: 0; }
.ah-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.ah-bloco {
	position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
	padding: 28px; border-radius: 28px; background: var(--ah-cartao); border: 1px solid var(--ah-linha); box-shadow: var(--ah-sombra-cartao);
}
.ah .ah-bloco h3 {
	font-size: 23px; line-height: 1.15; letter-spacing: -.015em;
	font-variation-settings: "wdth" 110, "wght" 660;
}
.ah .ah-bloco p { max-width: 42ch; font-size: 15.5px; line-height: 1.5; color: var(--ah-texto-2); }
.ah-bloco-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; color: var(--ah-laranja); background: var(--ah-laranja-suave); }
.ah-bloco--radar { grid-column: span 7; grid-row: span 2; min-height: 580px; background: #0B1424; border-color: rgba(255, 255, 255, .06); }
.ah-bloco--voz, .ah-bloco--link { grid-column: span 5; }
.ah-bloco--manut, .ah-bloco--rel, .ah-bloco--acoes { grid-column: span 4; }

/* radar */
.ah .ah-bloco--radar h3 { color: #fff; }
.ah .ah-bloco--radar p { color: #AFC0D6; }
.ah-bloco--radar .ah-bloco-ico { color: #93C5FD; background: rgba(59, 130, 246, .18); }
.ah-bloco--radar > * { position: relative; z-index: 2; }
.ah-bloco--radar > .ah-radar-fundo {
	position: absolute; inset: 0; z-index: 0;
	background:
		radial-gradient(60% 50% at 78% 70%, rgba(250, 204, 21, .16), transparent 70%),
		radial-gradient(50% 40% at 70% 80%, rgba(239, 68, 68, .14), transparent 70%),
		radial-gradient(80% 60% at 20% 0%, rgba(59, 130, 246, .22), transparent 70%),
		linear-gradient(180deg, #0B1424, #0E1A2E);
}
.ah-bloco--radar > .ah-radar-chuva {
	position: absolute; inset: -30%; z-index: 1; transform: rotate(12deg); opacity: .65;
	background-image:
		radial-gradient(1.2px 11px at 50% 50%, rgba(214, 228, 255, .75), transparent),
		radial-gradient(1px 8px at 50% 50%, rgba(214, 228, 255, .5), transparent);
	background-size: 41px 59px, 27px 43px;
	background-position: 0 0, 13px 21px;
	animation: ah-chuva .7s linear infinite;
}
@keyframes ah-chuva { to { background-position: 0 59px, 13px 64px; } }
.ah--calmo .ah-radar-chuva { animation: none; }
.ah-bloco--radar > .ah-cel { --w: 252px; position: absolute; z-index: 2; right: 46px; bottom: -150px; transform: rotate(-6deg); }
.ah-radar-legenda { display: flex; align-items: center; gap: 10px; margin-top: auto; font: 500 11px/1 var(--v3-mono); letter-spacing: .08em; text-transform: uppercase; color: #9FB0C8; }
.ah-radar-escala { width: 128px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #3B82F6, #22C55E, #FACC15, #F97316, #EF4444); }

/* voz */
.ah-voz-cena { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 14px; }
.ah-voz-onda { flex: 1 0 100%; display: flex; align-items: center; gap: 4px; height: 52px; }
.ah-voz-onda i { flex: 1; max-width: 7px; height: calc(var(--h) * 100%); border-radius: 4px; background: var(--ah-laranja); opacity: .35; transform-origin: center; }
.ah-falando .ah-voz-onda i { opacity: 1; animation: ah-onda .55s ease-in-out infinite alternate; animation-delay: var(--t); }
@keyframes ah-onda { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.ah .ah-voz-balao { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--ah-cartao-2); font: 600 15px/1.3 var(--v3-body); color: var(--ah-tinta); }
.ah-botao-ouvir {
	display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; cursor: pointer;
	border-radius: 10px; border: 0; background: var(--ah-laranja); color: #fff; font: 600 14.5px/1 var(--v3-body);
}
.ah .ah-botao-ouvir { color: #fff; }
.ah-botao-ouvir:hover { background: var(--ah-laranja-forte); }
.ah-botao-ouvir .ah-ico { width: 18px; height: 18px; }
.ah .ah-voz-sem { font-size: 13.5px; color: var(--ah-texto-2); }

/* link */
.ah-link-ui { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--ah-cartao-2); }
.ah-mini-rotulo { font: 500 11px/1 var(--v3-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ah-texto-2); }
.ah-link-opcoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 12px; }
.ah-link-opcoes span { padding: 9px 0; border-radius: 10px; text-align: center; font: 500 13.5px/1 var(--v3-body); color: var(--ah-texto); background: var(--ah-cartao); border: 1px solid var(--ah-linha); }
.ah-link-opcoes .sel { color: var(--ah-laranja-texto); border-color: var(--ah-laranja); background: var(--ah-laranja-suave); font-weight: 600; }
.ah-link-linha { display: flex; align-items: center; gap: 10px; font: 500 14px/1.2 var(--v3-body); color: var(--ah-tinta); }
.ah-link-linha .ah-ico { width: 18px; height: 18px; color: var(--ah-laranja); }
.ah-link-linha b { margin-left: auto; font-weight: 600; color: var(--ah-laranja-texto); }

/* manutenção */
.ah-manut-ui { margin-top: auto; padding-top: 18px; }
.ah-manut-num { color: var(--ah-tinta); font-family: var(--v3-display); font-size: 54px; line-height: 1; letter-spacing: -.03em; font-variation-settings: "wdth" 112, "wght" 700; }
.ah-manut-num small { font-size: 22px; color: var(--ah-texto-2); letter-spacing: 0; font-variation-settings: "wdth" 100, "wght" 600; }
.ah-manut-rot { margin-top: 4px; font-size: 14.5px; color: var(--ah-texto-2); }
.ah-manut-barra { height: 10px; margin-top: 16px; border-radius: 99px; background: var(--ah-cartao-2); overflow: hidden; }
.ah-manut-barra i { display: block; height: 100%; width: 89.5%; border-radius: inherit; background: linear-gradient(90deg, #22C55E, #FACC15 70%, var(--ah-laranja)); }
.ah-manut-escala { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11px/1 var(--v3-mono); color: var(--ah-texto-2); }

/* relatórios */
.ah-rel-ui { position: relative; margin-top: auto; padding-top: 18px; }
.ah-rel-doc { position: relative; padding: 14px 16px; border-radius: 14px; background: var(--ah-cartao); border: 1px solid var(--ah-linha); box-shadow: 0 14px 30px -20px rgba(15, 23, 42, .4); }
.ah-rel-doc::before, .ah-rel-doc::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ah-cartao); border: 1px solid var(--ah-linha); }
.ah-rel-doc::before { transform: translate(8px, -8px) rotate(2deg); }
.ah-rel-doc::after { transform: translate(16px, -15px) rotate(4deg); opacity: .6; }
.ah-rel-cab { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 600 13.5px/1.2 var(--v3-body); color: var(--ah-tinta); }
.ah-rel-cab span { font: 500 11px/1.3 var(--v3-mono); color: var(--ah-texto-2); }
.ah-rel-linha { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--ah-linha); font: 500 12.5px/1 var(--v3-mono); color: var(--ah-texto); }
.ah-rel-linha b { color: #DC2626; font-weight: 600; }
.ah-rel-formatos { display: flex; gap: 6px; margin-top: 12px; }
.ah-rel-formatos span { padding: 6px 10px; border-radius: 8px; font: 600 12px/1 var(--v3-mono); color: var(--ah-laranja-texto); background: var(--ah-laranja-suave); }

/* ações no mapa */
.ah-acoes-ui { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto !important; padding-top: 18px !important; }
.ah-acoes-ui li { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 12px; background: var(--ah-cartao-2); font: 500 13.5px/1.2 var(--v3-body); color: var(--ah-tinta); }
.ah-acoes-ui .ah-ico { width: 18px; height: 18px; color: var(--ah-laranja); }

/* ---------------------------------------------------------------- chegada */
.ah-chegada { position: relative; padding-block: 40px 120px; }
.ah-chegada-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: stretch; }
.ah-chegada-grade--so { grid-template-columns: minmax(0, 1fr); }
.ah-chegada-principal { position: relative; padding: 44px 44px 44px 92px; border-radius: 32px; background: var(--ah-cartao); border: 1px solid var(--ah-linha); box-shadow: var(--ah-sombra-cartao); }
.ah-chegada-pino {
	position: absolute; left: 34px; top: 52px; width: 30px; height: 30px; border-radius: 50%;
	background: var(--ah-laranja); box-shadow: 0 0 0 7px var(--ah-laranja-suave);
	display: grid; place-items: center; color: #fff;
}
.ah-chegada-pino .ah-ico { width: 16px; height: 16px; }
.ah-chegou .ah-chegada-pino { animation: ah-chegou 1.6s ease-out infinite; }
@keyframes ah-chegou { 0% { box-shadow: 0 0 0 0 rgba(241, 96, 0, .45); } 100% { box-shadow: 0 0 0 22px rgba(241, 96, 0, 0); } }
.ah--calmo .ah-chegou .ah-chegada-pino { animation: none; }
.ah-chegada-principal .ah-secao-lede { margin-bottom: 26px; }
.ah-lojas--fim { justify-content: flex-start; }
.ah-cartao-empresa { display: flex; flex-direction: column; gap: 10px; padding: 40px; border-radius: 32px; background: #12161D; color: #C3CAD4; border: 1px solid rgba(255, 255, 255, .06); }
.ah .ah-cartao-empresa h3 { color: #fff; font-size: 26px; line-height: 1.15; letter-spacing: -.015em; font-variation-settings: "wdth" 110, "wght" 660; }
.ah .ah-cartao-empresa p { font-size: 15.5px; color: #C3CAD4; }
.ah-botao-empresa { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 12px 16px; border-radius: 8px; background: var(--ah-laranja); font: 600 14.5px/1 var(--v3-body); }
.ah .ah-botao-empresa { color: #fff; }
.ah-botao-empresa:hover { background: var(--ah-laranja-forte); }
.ah-botao-empresa .ah-ico { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- vídeo */
/* margin: auto devolve a centralização da janela, que o "* { margin: 0 }" do main-final.css tira */
.ah-video { margin: auto; padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
.ah-video::backdrop { background: rgba(5, 8, 12, .84); }
/* o desfoque fica só no computador: no celular ele deixava o player do YouTube todo preto */
@media (hover: hover) and (pointer: fine) {
	.ah-video::backdrop { background: rgba(5, 8, 12, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}
/* o fundo escurece enquanto a janela sai do botão e clareia quando ela volta (app.js, 4b) */
.ah-video::backdrop { transition: opacity .4s ease-out; }
.ah-video.ah-video--apagado::backdrop { opacity: 0; transition-timing-function: ease-in; }
/* o brilho laranja atrás da janela, como o sol da abertura */
.ah-video-palco { position: relative; z-index: 1; }
.ah-video-palco::before {
	content: ""; position: absolute; z-index: -1; inset: -10% -45% -30%; border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, rgba(241, 96, 0, .55), rgba(241, 96, 0, .16) 55%, transparent);
}
/* a casca: a forma escura que sai do botão "Assistir" e cresce até virar a janela */
.ah-video-casca { position: fixed; z-index: 0; border-radius: 24px; background: #000; pointer-events: none; }
.ah-video-palco video,
.ah-video-palco iframe { display: block; width: min(92vw, calc(86vh * 9 / 16), 495px); height: auto; aspect-ratio: 9 / 16; border: 0; border-radius: 24px; background: #000; }
.ah-video-fechar { position: absolute; z-index: 2; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: #fff; color: #111; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1100px) {
	.ah-toque-grade { gap: 44px; }
	.ah-bloco--radar > .ah-cel { --w: 220px; right: 28px; }
}
@media (max-width: 979px) {
	.ah-toque { padding-block: 80px 90px; }
	.ah-toque-grade { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.ah-toque-texto .ah-secao-lede { margin-bottom: 22px; }
	.ah-paradas { flex-direction: row; gap: 8px; overflow-x: auto; margin-inline: -20px; padding: 2px 20px 10px; scrollbar-width: none; }
	.ah-paradas::-webkit-scrollbar { display: none; }
	.ah-parada { flex: none; width: auto; padding: 11px 16px 11px 38px; border-radius: 999px; background: var(--ah-cartao); border-color: var(--ah-linha); }
	.ah-parada[aria-selected="true"] { border-color: var(--ah-laranja); box-shadow: none; }
	.ah-parada-pino { left: 13px; top: 50%; width: 15px; height: 15px; border-width: 2.5px; translate: 0 -50%; }
	.ah-parada[aria-selected="true"] .ah-parada-pino { box-shadow: 0 0 0 4px var(--ah-laranja-suave); }
	.ah-parada-nome { font: 600 15px/1 var(--v3-body); white-space: nowrap; font-variation-settings: normal; }
	.ah-parada-nome .ah-ico { display: none; }
	.ah-parada-desc { display: none; }
	.ah .ah-toque-legenda { display: block; }
	.ah-cel--grande { --w: 272px; }
	.ah-secao-cabeca { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.ah-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ah-bloco--radar { grid-column: 1 / -1; grid-row: auto; min-height: 520px; }
	.ah-bloco--voz, .ah-bloco--link, .ah-bloco--manut, .ah-bloco--rel { grid-column: span 1; }
	.ah-bloco--acoes { grid-column: 1 / -1; }
	.ah-chegada-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.ah { font-size: 16px; }
	.ah-abertura { padding-top: 40px; }
	.ah .ah-selo { font-size: 13px; }
	.ah-selo small { display: none; }
	.ah .ah-h1 { font-size: 40px; font-variation-settings: "wdth" 106, "wght" 660; }
	.ah .ah-lede { font-size: 17px; }
	.ah-loja img { height: 44px; }
	.ah-loja-breve { height: 44px; padding: 0 14px; font-size: 13px; }
	.ah-palco { height: 470px; margin-top: 44px; }
	.ah-cel--meio { --w: 226px; }
	.ah-palco .ah-cel--esq, .ah-palco .ah-cel--dir { --w: 178px; top: 54px; }
	.ah-cel--esq { transform: translateX(calc(-50% - 150px)) rotate(-8deg); }
	.ah-cel--dir { transform: translateX(calc(-50% + 150px)) rotate(8deg); }
	.ah-aviso { max-width: 210px; padding: 8px 14px 8px 8px; border-radius: 15px; grid-template-columns: 32px auto; column-gap: 9px; }
	.ah-aviso-ico { width: 32px; height: 32px; border-radius: 10px; }
	.ah-aviso-titulo { font-size: 13px; }
	.ah-aviso-linha { font-size: 11.5px; }
	.ah-aviso--2, .ah-aviso--3 { display: none; }
	.ah-aviso--1 { left: 12px; top: 70px; }
	.ah-aviso--4 { left: auto; right: 12px; top: 262px; }
	.ah-faixa-lista li { font-size: 14px; padding: 10px 15px 10px 12px; }
	.ah-bento { grid-template-columns: minmax(0, 1fr); }
	.ah-bloco, .ah-bloco--voz, .ah-bloco--link, .ah-bloco--manut, .ah-bloco--rel, .ah-bloco--acoes { grid-column: 1 / -1; }
	.ah-bloco { padding: 24px; border-radius: 24px; }
	.ah-bloco--radar { min-height: 560px; }
	.ah-bloco--radar > .ah-cel { --w: 210px; right: 50%; bottom: -120px; transform: translateX(50%) rotate(-5deg); }
	.ah-radar-legenda { margin-top: 14px; }
	.ah-chegada-principal { padding: 32px 24px; }
	.ah-chegada-pino { position: relative; left: 0; top: 0; margin-bottom: 22px; }
	.ah-lojas--fim .ah-loja img { height: 40px; }
	.ah-cartao-empresa { padding: 30px 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.ah-aviso { opacity: 1; animation: none; }
	.ah-faixa-trilho, .ah-radar-chuva, .ah-falando .ah-voz-onda i, .ah-chegou .ah-chegada-pino { animation: none; }
}