/* New Alliance — artes animadas (parts/artes). Só carrega na página que usa alguma.
   Tudo anima transform, opacity ou stroke-dashoffset; o estado parado já é o desenho completo. */

.na-arte { position: relative; width: 100%; max-width: 540px; margin-inline: auto; }
.na-arte svg { display: block; width: 100%; height: auto; overflow: visible; }
.na-arte::before {
	content: ""; position: absolute; inset: 8% 4%; z-index: -1; border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--na-primaria) 16%, transparent), transparent);
	filter: blur(30px);
}

/* Onde aparece: no vão da abertura (no celular, abaixo dos botões) e abaixo do título da lista (só desktop). */
.na-abertura__arte--anim { width: 100%; max-width: 440px; margin-inline: auto; }
@media (min-width: 1061px) { .na-abertura__arte--anim { max-width: none; } }
.na-arte--lado { display: none; margin-top: 2.5rem; max-width: 460px; margin-inline: 0; }
@media (min-width: 961px) { .na-arte--lado { display: block; } }

/* ---------- Peças ---------- */

.na-arte .a-painel { fill: color-mix(in srgb, var(--na-superficie) 92%, transparent); stroke: var(--na-linha-forte); stroke-width: 1.2; }
.na-arte .a-sombra { filter: drop-shadow(0 18px 30px rgb(2 6 12 / .18)); }
[data-tema="escuro"] .na-arte .a-sombra { filter: drop-shadow(0 18px 34px rgb(0 0 0 / .55)); }
.na-arte .a-tela { fill: color-mix(in srgb, var(--na-fundo) 70%, var(--na-superficie)); }
.na-arte .a-mapa { fill: color-mix(in srgb, var(--na-primaria) 9%, var(--na-superficie)); }
.na-arte .a-tile { fill: color-mix(in srgb, var(--na-texto) 4%, transparent); stroke: var(--na-linha); }
.na-arte .a-traco { fill: none; stroke: var(--na-linha-forte); stroke-width: 1.2; }
.na-arte .a-fraco { stroke: var(--na-linha); }
.na-arte .a-forte { stroke: var(--na-acento-texto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.na-arte .a-fio { fill: none; stroke: var(--na-linha-forte); stroke-width: 1.4; stroke-dasharray: 3 6; }
.na-arte .a-tracejado { stroke-dasharray: 5 5; }
.na-arte .a-ponto { fill: var(--na-linha-forte); }
.na-arte .a-esq { fill: color-mix(in srgb, var(--na-texto) 10%, transparent); }
.na-arte .a-esq--forte { fill: color-mix(in srgb, var(--na-texto) 20%, transparent); }
.na-arte .a-esq--claro { fill: rgb(255 255 255 / .72); }
.na-arte .a-marca { fill: var(--na-primaria); }
.na-arte .a-ok { fill: var(--na-destaque); }
.na-arte .a-ic { color: var(--na-acento-texto); }
.na-arte .a-ic--claro { color: #fff; }
.na-arte .a-balao { fill: color-mix(in srgb, var(--na-texto) 6%, var(--na-superficie)); stroke: var(--na-linha); }
.na-arte .a-balao--marca { stroke: color-mix(in srgb, var(--na-destaque) 45%, transparent); }
.na-arte .a-check { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.na-arte .a-led { fill: var(--na-destaque); }
.na-arte .a-celula { fill: color-mix(in srgb, var(--na-primaria) 22%, transparent); opacity: 0; }
.na-arte .a-rota-base { stroke-dasharray: 2 5; }
.na-arte .a-alvo { fill: none; stroke: var(--na-destaque); stroke-width: 1.5; opacity: .5; }
.na-arte .a-furo { fill: var(--na-superficie); }
.na-arte .a-arco { fill: none; stroke: var(--na-destaque); stroke-width: 2.4; stroke-linecap: round; }
.na-arte .a-trilho { stroke-width: 8; stroke: var(--na-linha); }
.na-arte .a-rosca { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 68 100; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.na-arte .a-caixa { fill: none; stroke: var(--na-acento-texto); stroke-width: 1.8; stroke-linejoin: round; }
.na-arte .a-linha-erp { fill: transparent; }
.na-arte .a-selecao { fill: color-mix(in srgb, var(--na-primaria) 14%, transparent); stroke: color-mix(in srgb, var(--na-primaria) 35%, transparent); }
.na-arte .a-ponteiro-arco { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 82 100; }
.na-arte .a-marco { fill: var(--na-superficie); stroke: var(--na-destaque); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.na-arte .a-placa__borda { fill: color-mix(in srgb, var(--na-primaria) 30%, var(--na-fundo)); stroke: var(--na-linha-forte); }
.na-arte .a-placa__topo { stroke: color-mix(in srgb, var(--na-primaria) 35%, var(--na-linha-forte)); }
.na-arte .a-nucleo { filter: drop-shadow(0 0 24px color-mix(in srgb, var(--na-destaque) 45%, transparent)); }
.na-arte .a-nucleo__miolo { fill: rgb(255 255 255 / .14); stroke: rgb(255 255 255 / .35); }
.na-arte .a-satelite { fill: var(--na-destaque); }
.na-arte .a-satelite--b { fill: var(--na-primaria); }
.na-arte .a-rastro { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .9; }
.na-arte .a-cometa { fill: var(--na-destaque); filter: drop-shadow(0 0 6px var(--na-destaque)); }
.na-arte .a-onda { fill: none; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* Linhas que se desenham e pulsos que correm pelos fios (path com pathLength="100"). */
.na-arte .a-desenha { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.na-arte .a-pulso, .na-arte .a-pacote, .na-arte .a-entrega, .na-arte .a-carga { fill: none; stroke-linecap: round; }
.na-arte .a-pulso { stroke: var(--na-destaque); stroke-width: 2.6; stroke-dasharray: 10 110; stroke-dashoffset: 10; filter: drop-shadow(0 0 4px var(--na-destaque)); }
.na-arte .a-pulso--gordo { stroke-width: 4; stroke-dasharray: 6 114; stroke-dashoffset: 6; }
.na-arte .a-pacote { stroke: var(--na-primaria); stroke-width: 9; stroke-dasharray: 4 116; stroke-dashoffset: 4; filter: drop-shadow(0 0 6px var(--na-primaria)); }
.na-arte .a-entrega { stroke-width: 3; stroke-dasharray: 100; }
.na-arte .a-carga { stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 100; }

/* ---------- Movimento (só para quem não pediu menos movimento) ---------- */

@media (prefers-reduced-motion: no-preference) {
	.na-arte .a-flutua { animation: na-a-flutua 7s ease-in-out infinite alternate; }
	.na-arte .a-flutua--b { animation-duration: 8.5s; animation-delay: -3s; }
	.na-arte .a-flutua--c { animation-duration: 6.2s; animation-delay: -1.5s; }
	.na-arte .a-respira { transform-box: fill-box; transform-origin: center; animation: na-a-respira 6s ease-in-out infinite alternate; }
	.na-arte .a-gira { transform-box: view-box; transform-origin: var(--o); animation: na-a-gira 48s linear infinite; }
	.na-arte .a-gira--lento { animation-duration: 90s; animation-direction: reverse; }
	.na-arte .a-gira--volta { animation-duration: 8s; }
	.na-arte .a-contra { transform-box: fill-box; transform-origin: center; animation: na-a-gira 48s linear infinite reverse; }
	.na-arte .a-roda { transform-box: view-box; transform-origin: var(--o); animation: na-a-gira 2.4s linear infinite; }
	.na-arte .a-onda { animation: na-a-onda 3.6s ease-out infinite; }
	.na-arte .a-onda--b { animation-delay: 1.8s; }
	.na-arte .a-no { animation: na-a-brilho 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
	.na-arte .a-pulso { animation: na-a-pulso 2.8s linear infinite; animation-delay: var(--d, 0s); }
	.na-arte .a-pulso--desce { animation-duration: 3.2s; }
	.na-arte .a-pisca, .na-arte .a-led { animation: na-a-pisca 1.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
	.na-arte .a-desenha { animation: na-a-desenha 6s cubic-bezier(.4, 0, .2, 1) infinite; }
	.na-arte .a-desenha--longo { animation-name: na-a-desenha-longo; animation-duration: 9s; animation-timing-function: linear; }
	.na-arte--resultado .a-desenha--longo { animation-duration: 7s; animation-name: na-a-desenha-grafico; }
	.na-arte .a-alvo { transform-box: fill-box; transform-origin: center; animation: na-a-alvo 2.4s ease-out infinite; }
	.na-arte .a-pino { transform-box: fill-box; transform-origin: 50% 100%; animation: na-a-pino 6s ease-in-out infinite; }
	.na-arte .a-chega { animation: na-a-chega 6s ease-out infinite; animation-delay: var(--d, 0s); }
	.na-arte .a-aviso { animation: na-a-aviso 6s cubic-bezier(.2, .7, .2, 1) infinite; }
	.na-arte .a-recua { animation: na-a-recua 8s ease-in-out infinite alternate; }
	.na-arte .a-celula { animation: na-a-celula 4.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
	.na-arte .a-cresce { transform-box: fill-box; transform-origin: 50% 100%; animation: na-a-cresce 5s cubic-bezier(.2, .7, .2, 1) infinite; animation-delay: var(--d, 0s); }
	.na-arte .a-cresce-x { transform-box: fill-box; transform-origin: 0 50%; animation: na-a-cresce-x 5s cubic-bezier(.2, .7, .2, 1) infinite; animation-delay: var(--d, 0s); }
	.na-arte .a-rosca { animation: na-a-rosca 5s cubic-bezier(.2, .7, .2, 1) infinite; }
	.na-arte .a-digita { transform-box: fill-box; transform-origin: center; animation: na-a-digita .9s ease-in-out infinite; animation-delay: var(--d, 0s); }
	.na-arte .a-msg--1 { animation: na-a-msg1 10s ease-out infinite; }
	.na-arte .a-msg--2 { animation: na-a-msg2 10s ease-out infinite; }
	.na-arte .a-msg--3 { animation: na-a-msg3 10s ease-out infinite; }
	.na-arte .a-msg--4 { animation: na-a-msg4 10s ease-out infinite; }
	.na-arte .a-pulso--erp { animation: na-a-pulso-erp 10s linear infinite; }
	.na-arte .a-selo { transform-box: fill-box; transform-origin: center; animation: na-a-selo 10s cubic-bezier(.3, 1.6, .5, 1) infinite; }
	.na-arte .a-selo--alta { animation-name: na-a-selo-alta; animation-duration: 7s; }
	.na-arte .a-extra { animation: na-a-extra 9s ease-in-out infinite; }
	.na-arte .a-carga { animation: na-a-desenha 5s linear infinite; }
	.na-arte .a-pacote--1 { animation: na-a-pacote1 8s ease-in-out infinite; }
	.na-arte .a-pacote--2 { animation: na-a-pacote2 8s ease-in-out infinite; }
	.na-arte .a-clique { transform-box: fill-box; transform-origin: center; animation: na-a-clique 8s ease-out infinite; }
	.na-arte .a-linha-erp--viva { animation: na-a-linha-erp 8s ease-out infinite; }
	.na-arte .a-estoque--baixa { transform-box: fill-box; transform-origin: 0 50%; animation: na-a-estoque 8s ease-out infinite; }
	.na-arte .a-entrega { animation: na-a-entrega 8s ease-in-out infinite; }
	.na-arte .a-ponteiro { transform-box: view-box; transform-origin: var(--o); animation: na-a-ponteiro 4s cubic-bezier(.3, 1.4, .5, 1) infinite alternate; }
	.na-arte .a-ponteiro-arco { animation: na-a-ponteiro-arco 4s cubic-bezier(.3, 1.4, .5, 1) infinite alternate; }
	.na-arte .a-selecao { animation: na-a-selecao 10s steps(1, end) infinite; }
	.na-arte .a-marco { animation: na-a-marco 7s ease-out infinite; animation-delay: var(--d, 0s); }
	.na-arte .a-area { animation: na-a-area 7s ease-out infinite; }
	.na-arte .a-encolhe { transform-box: fill-box; transform-origin: 0 50%; animation: na-a-encolhe 7s cubic-bezier(.6, 0, .2, 1) infinite; }
	.na-arte .a-etapa__caixa { transform-box: fill-box; transform-origin: center; animation: na-a-etapa 9s ease-out infinite; animation-delay: var(--d, 0s); }
	.na-arte .a-etapa--ciclo .a-etapa__caixa { animation-duration: 8s; }
	.na-arte .a-placa--2 { animation: na-a-placa-cima 6s ease-in-out infinite alternate; }
	.na-arte .a-placa--0 { animation: na-a-placa-baixo 6s ease-in-out infinite alternate; }

	/* Fora da tela, tudo para (o JS marca .is-ativa quando a arte aparece). */
	.na-js .na-arte:not(.is-ativa) * { animation-play-state: paused !important; }
}

@media (prefers-reduced-motion: reduce) {
	.na-arte * { animation: none !important; }
	.na-arte .a-pulso, .na-arte .a-pacote { display: none; }
}

@keyframes na-a-flutua { to { transform: translateY(-8px); } }
@keyframes na-a-respira { from { transform: scale(.94); opacity: .7; } to { transform: scale(1.04); opacity: 1; } }
@keyframes na-a-gira { to { transform: rotate(360deg); } }
@keyframes na-a-onda { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes na-a-brilho { 0%, 100% { stroke: var(--na-linha-forte); } 50% { stroke: color-mix(in srgb, var(--na-destaque) 70%, transparent); } }
@keyframes na-a-pulso { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -110; } }
@keyframes na-a-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes na-a-desenha { 0% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes na-a-desenha-longo { 0% { stroke-dashoffset: 100; } 70%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes na-a-desenha-grafico { 0% { stroke-dashoffset: 100; } 60%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes na-a-alvo { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes na-a-pino { 0%, 40% { transform: translateY(-14px); opacity: 0; } 52% { transform: translateY(2px); opacity: 1; } 58%, 100% { transform: none; opacity: 1; } }
@keyframes na-a-chega { 0%, 8% { opacity: 0; transform: translateX(-10px); } 20%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes na-a-aviso { 0%, 30% { opacity: 0; transform: translateY(-16px) scale(.96); } 40%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes na-a-recua { from { opacity: .55; } to { opacity: .8; } }
@keyframes na-a-celula { 0%, 100% { opacity: 0; } 30%, 50% { opacity: 1; } }
@keyframes na-a-cresce { 0% { transform: scaleY(.15); } 35%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }
@keyframes na-a-cresce-x { 0% { transform: scaleX(.2); } 35%, 85% { transform: scaleX(1); } 100% { transform: scaleX(.2); } }
@keyframes na-a-rosca { 0% { stroke-dasharray: 0 100; } 40%, 85% { stroke-dasharray: 68 100; } 100% { stroke-dasharray: 0 100; } }
@keyframes na-a-digita { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes na-a-msg1 { 0% { opacity: 0; transform: translateY(10px); } 5%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes na-a-msg2 { 0%, 12% { opacity: 0; } 15%, 27% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes na-a-msg3 { 0%, 29% { opacity: 0; transform: translateY(10px); } 34%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes na-a-msg4 { 0%, 44% { opacity: 0; transform: translateY(10px); } 49%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes na-a-pulso-erp { 0%, 50% { stroke-dashoffset: 6; } 62%, 100% { stroke-dashoffset: -114; } }
@keyframes na-a-selo { 0%, 61% { transform: scale(0); } 66%, 90% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes na-a-selo-alta { 0%, 55% { transform: scale(.4); opacity: 0; } 62%, 90% { transform: scale(1); opacity: 1; } 97%, 100% { transform: scale(.9); opacity: 0; } }
@keyframes na-a-extra { 0%, 30% { opacity: 0; } 40%, 85% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes na-a-pacote1 { 0%, 10% { stroke-dashoffset: 4; opacity: 1; } 34% { stroke-dashoffset: -100; opacity: 1; } 35%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes na-a-pacote2 { 0%, 46% { stroke-dashoffset: 4; opacity: 0; } 47% { opacity: 1; } 62% { stroke-dashoffset: -100; opacity: 1; } 63%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes na-a-clique { 0%, 4% { transform: scale(1); } 7% { transform: scale(.94); } 11%, 100% { transform: scale(1); } }
@keyframes na-a-linha-erp { 0%, 34% { fill: transparent; } 38%, 50% { fill: color-mix(in srgb, var(--na-destaque) 18%, transparent); } 60%, 100% { fill: transparent; } }
@keyframes na-a-estoque { 0%, 36% { transform: scaleX(1); } 44%, 92% { transform: scaleX(.62); } 100% { transform: scaleX(1); } }
@keyframes na-a-entrega { 0%, 62% { stroke-dashoffset: 100; } 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes na-a-ponteiro { from { transform: rotate(-110deg); } to { transform: rotate(0deg); } }
@keyframes na-a-ponteiro-arco { from { stroke-dasharray: 8 100; } to { stroke-dasharray: 82 100; } }
@keyframes na-a-selecao { 0% { transform: translateY(0); } 25% { transform: translateY(46px); } 50% { transform: translateY(92px); } 75% { transform: translateY(46px); } }
@keyframes na-a-marco { 0% { transform: scale(0); } 6% { transform: scale(1.5); fill: var(--na-destaque); } 14%, 88% { transform: scale(1); } 98%, 100% { transform: scale(0); } }
@keyframes na-a-area { 0%, 25% { opacity: 0; } 60%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes na-a-encolhe { 0%, 30% { transform: scaleX(1); } 55%, 90% { transform: scaleX(.34); } 100% { transform: scaleX(1); } }
@keyframes na-a-etapa { 0% { transform: scale(1); stroke: var(--na-linha-forte); } 6% { transform: scale(1.12); stroke: var(--na-destaque); } 22% { transform: scale(1); stroke: color-mix(in srgb, var(--na-destaque) 60%, transparent); } 60%, 100% { stroke: var(--na-linha-forte); } }
@keyframes na-a-placa-cima { from { transform: translateY(6px); } to { transform: translateY(-10px); } }
@keyframes na-a-placa-baixo { from { transform: translateY(-6px); } to { transform: translateY(10px); } }

/* ---------- Arte "virada" (home): improviso → negócio. Parada, mostra o "depois". ---------- */

.na-arte--virada { --na-a-alerta: #d9822b; }
[data-tema="escuro"] .na-arte--virada { --na-a-alerta: #f0a447; }
.na-arte--virada .a-alerta { fill: color-mix(in srgb, var(--na-a-alerta) 22%, transparent); opacity: 0; }
.na-arte--virada .a-alerta-fundo { fill: var(--na-a-alerta); }
.na-arte--virada .a-alerta-traco, .na-arte--virada .a-chave__icone-ruim, .na-arte--virada .a-chave__icone-bom { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.na-arte--virada .a-nota { fill: color-mix(in srgb, var(--na-a-alerta) 30%, var(--na-superficie)); stroke: color-mix(in srgb, var(--na-a-alerta) 50%, transparent); }
.na-arte--virada .a-rabisco { fill: none; stroke: color-mix(in srgb, var(--na-texto) 35%, transparent); stroke-width: 1.6; stroke-linecap: round; }
.na-arte--virada .a-sobe { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.na-arte--virada .a-ponta { fill: var(--na-superficie); stroke: var(--na-destaque); stroke-width: 3; }
.na-arte--virada .a-chave__fundo { fill: var(--na-a-alerta); }
.na-arte--virada .a-antes, .na-arte--virada .a-copia, .na-arte--virada .a-chave__fundo, .na-arte--virada .a-chave__icone-ruim { opacity: 0; }
.na-arte--virada .a-chave__botao { transform: translateX(76px); }
.na-arte--virada .a-cartao, .na-arte--virada .a-copia, .na-arte--virada .a-selo-ok, .na-arte--virada .a-aviso-badge, .na-arte--virada .a-ponta { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
	.na-arte--virada .a-cartao { animation: na-v-cartao 10s cubic-bezier(.5, 0, .2, 1) infinite; }
	.na-arte--virada .a-copia--1 { animation: na-v-copia1 10s cubic-bezier(.5, 0, .2, 1) infinite; }
	.na-arte--virada .a-copia--2 { animation: na-v-copia2 10s cubic-bezier(.5, 0, .2, 1) infinite; }
	.na-arte--virada .a-antes { animation: na-v-antes 10s ease infinite; }
	.na-arte--virada .a-depois { animation: na-v-depois 10s ease infinite; }
	.na-arte--virada .a-alerta { animation: na-v-alerta 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
	.na-arte--virada .a-aviso-badge { animation: na-v-badge 1.2s ease-in-out infinite alternate; }
	.na-arte--virada .a-sobe { animation: na-v-sobe 10s cubic-bezier(.4, 0, .2, 1) infinite; }
	.na-arte--virada .a-ponta { animation: na-v-ponta 10s ease-out infinite; }
	.na-arte--virada .a-selo-ok { animation: na-v-selo 10s cubic-bezier(.3, 1.6, .5, 1) infinite; }
	.na-arte--virada .a-chave__botao { animation: na-v-chave 10s cubic-bezier(.6, 0, .2, 1) infinite; }
	.na-arte--virada .a-chave__fundo, .na-arte--virada .a-chave__icone-ruim { animation: na-v-ruim 10s ease infinite; }
	.na-arte--virada .a-chave__fundo-ok, .na-arte--virada .a-chave__icone-bom { animation: na-v-bom 10s ease infinite; }
}

@keyframes na-v-cartao {
	0% { transform: rotate(-4deg); } 8% { transform: rotate(-2.5deg) translateX(3px); } 16% { transform: rotate(-4.5deg) translateX(-2px); }
	24% { transform: rotate(-3deg) translateY(2px); } 32% { transform: rotate(-4deg); } 40% { transform: rotate(-3.5deg); }
	50%, 92% { transform: none; } 100% { transform: rotate(-4deg); }
}
@keyframes na-v-copia1 { 0%, 40% { transform: translate(-30px, -22px) rotate(-10deg); opacity: .7; } 50%, 92% { transform: none; opacity: 0; } 100% { transform: translate(-30px, -22px) rotate(-10deg); opacity: .7; } }
@keyframes na-v-copia2 { 0%, 40% { transform: translate(26px, 16px) rotate(5deg); opacity: .55; } 50%, 92% { transform: none; opacity: 0; } 100% { transform: translate(26px, 16px) rotate(5deg); opacity: .55; } }
@keyframes na-v-antes { 0%, 40% { opacity: 1; } 47%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes na-v-depois { 0%, 43% { opacity: 0; } 50%, 91% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes na-v-alerta { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes na-v-badge { from { transform: scale(.92); } to { transform: scale(1.08); } }
@keyframes na-v-sobe { 0%, 48% { stroke-dashoffset: 100; } 66%, 100% { stroke-dashoffset: 0; } }
@keyframes na-v-ponta { 0%, 64% { transform: scale(0); } 69% { transform: scale(1.4); } 74%, 91% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes na-v-selo { 0%, 66% { transform: scale(0); } 72%, 90% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@keyframes na-v-chave { 0%, 42% { transform: none; } 50%, 92% { transform: translateX(76px); } 100% { transform: none; } }
@keyframes na-v-ruim { 0%, 42% { opacity: 1; } 48%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes na-v-bom { 0%, 44% { opacity: 0; } 50%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* Celular: a arte da abertura vem antes do texto, compacta. */
@media (max-width: 1060px) {
	.na-abertura__arte--anim { order: -1; max-width: 360px; margin-bottom: -1rem; }
}

/* ---------- Arte "codigo" (do código ao negócio). O código é digitado uma vez; o negócio segue em ciclo. ---------- */

.na-arte--codigo .a-codigo { transform-box: fill-box; transform-origin: 0 50%; }
.na-arte--codigo .a-codigo--m { fill: color-mix(in srgb, var(--na-primaria) 75%, transparent); }
.na-arte--codigo .a-codigo--d { fill: color-mix(in srgb, var(--na-destaque) 70%, transparent); }
.na-arte--codigo .a-codigo--t { fill: color-mix(in srgb, var(--na-texto) 22%, transparent); }
.na-arte--codigo .a-cursor { fill: var(--na-destaque); }
.na-arte--codigo .a-negocio, .na-arte--codigo .a-selo-negocio, .na-arte--codigo .a-cresce-negocio { transform-box: fill-box; }
.na-arte--codigo .a-selo-negocio { transform-origin: center; }
.na-arte--codigo .a-cresce-negocio { transform-origin: 50% 100%; }

@media (prefers-reduced-motion: no-preference) {
	.na-arte--codigo .a-codigo { animation: na-c-digita .45s steps(8, end) both; animation-delay: calc(var(--d, 0s) + .3s); }
	.na-arte--codigo .a-cursor { animation: na-c-cursor 1s steps(1, end) infinite; }
	.na-arte--codigo .a-negocio { animation: na-c-negocio .7s cubic-bezier(.2, .7, .2, 1) 3.4s both; }
	.na-arte--codigo .a-pulso--codigo { animation: na-a-pulso 2.4s linear 3.2s infinite; }
	.na-arte--codigo .a-cresce-negocio { animation: na-c-cresce 4.8s cubic-bezier(.2, .7, .2, 1) infinite; animation-delay: calc(var(--d, 0s) + 3.8s); }
	.na-arte--codigo .a-selo-negocio { animation: na-c-selo .6s cubic-bezier(.3, 1.6, .5, 1) 4.4s both; }
}
@keyframes na-c-digita { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes na-c-cursor { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes na-c-negocio { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes na-c-cresce { 0% { transform: scaleY(.3); } 40%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.3); } }
@keyframes na-c-selo { from { transform: scale(0); } to { transform: scale(1); } }