/*
Descrição: Estilos do diagrama animado exclusivo da página "Servidores em
           Cloud" (".cloud-diagram*"), usado no hero no lugar do
           marcador de imagem genérico. Mostra a TICom a ligar-se à
           rede do cliente e, a partir daí, a três servidores em
           simultâneo. Cada quadrado começa "apagado" e só acende (mesmo
           anel luminoso do quadrado de origem, ".cloud-diagram-node-lit")
           no instante em que a bola lhe toca; a linha por onde a bola
           passa vai-se desenhando/iluminando ao mesmo tempo (ver o
           "<animate>"/"<animateMotion>" dentro do SVG, em
           servidores-cloud.html — os instantes-chave em ambos os
           ficheiros têm de ficar sincronizados).
Autor: Emanuel Borges
Versão: 2.1.0
Última alteração: 2026-10-08
*/

/* Caixa exterior (fundo + borda arredondada do diagrama) com espaço
   extra à volta — os emblemas dos ícones (".cloud-diagram-node-icon")
   ficam meio fora de cada quadrado, por isso ".cloud-diagram" (onde
   tudo é posicionado) fica encostada para dentro, via "padding", para
   nenhum emblema ultrapassar o canto arredondado da caixa. */
.cloud-diagram-frame {
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-alt);
    padding: 22px;
}

/* Fundo escuro fixo (independente do tema claro/escuro do site), como o
   "ecrã" usado nas outras animações de serviço (".security-cam",
   ".cabling-board", ".mgmt-board"), para dar o mesmo aspeto de
   dispositivo/monitor em todas. */
.cloud-diagram {
    position: relative;
    width: 100%;
    aspect-ratio: 440 / 300;
    border-radius: 10px;
    overflow: visible;
    background-color: #0a0f1a;
}

/* Encolhe o diagrama inteiro (linhas + quadrados, juntos) um pouco para
   dentro — mantém a moldura exterior com a mesma espessura das outras
   páginas, mas garante que nada (incluindo os emblemas, que ficam meio
   fora de cada quadrado) fica em cima da borda do ecrã. */
.cloud-diagram-inner {
    position: absolute;
    inset: 0;
    transform: scale(0.84);
    transform-origin: center;
}

.cloud-diagram-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cloud-diagram-link {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-opacity: 0.4;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Par de linhas irmãs, desenhadas por cima de cada ".cloud-diagram-link"
   — o "pathLength=1" (no HTML) torna "stroke-dasharray"/"stroke-dashoffset"
   frações de 0 a 1 independentes do comprimento real do traço, para o
   "<animate>" conseguir ir "revelando" a linha à medida que a bola
   avança (dashoffset 1 = invisível, 0 = traço completo). A versão
   ".cloud-diagram-link-glow" (desfocada, por baixo) dá o brilho; a
   ".cloud-diagram-link-bright" (nítida, por cima, sem filtro) garante
   que a cor vista é exatamente "--color-primary-light", igual à borda
   dos quadrados quando acendem — o desfoque sozinho deixava a cor mais
   clara/lavada. */
.cloud-diagram-link-glow {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    opacity: 0.35;
}

.cloud-diagram-link-bright {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
}

.cloud-diagram-dot {
    fill: var(--color-primary-light);
}

/* O quadrado tem dois elementos agora: este (".cloud-diagram-node") é só
   a caixa de posicionamento (sem fundo/opacidade próprios); o emblema do
   ícone (".cloud-diagram-node-icon") e o "cartão" com a borda/fundo/texto
   (".cloud-diagram-node-card") são filhos independentes dele — para o
   emblema poder ficar sempre 100% opaco e com cor própria mesmo quando o
   cartão está "apagado" (o que não era possível enquanto o emblema vivia
   dentro do elemento cuja opacidade baixava para 0.5). */
.cloud-diagram-node {
    position: absolute;
}

.cloud-diagram-node-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 10px 16px 10px 24px;
    border-radius: 10px;
    border: 1px solid #2a3550;
    background-color: #141c2e;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    opacity: 0.5;
}

/* Anel luminoso aplicado a qualquer cartão "ligado" — de forma
   permanente no quadrado de origem (TICom) abaixo, e que os outros só
   recebem quando a bola lhes toca (ver as animações
   "cloud-node-mid-glow"/"cloud-node-server-glow"). */
.cloud-diagram-node-lit .cloud-diagram-node-card {
    opacity: 1;
    border-color: var(--color-primary-light);
    box-shadow:
        0 0 0 1px var(--color-primary-light),
        0 4px 16px rgba(0, 0, 0, 0.12),
        0 0 18px color-mix(in srgb, var(--color-primary-light) 45%, transparent);
}

/* Emblema circular do ícone, meio em cima da borda do cartão (metade
   dentro, metade fora), como no mostruário de referência — o anel na cor
   do fundo do diagrama separa visualmente o emblema da borda por baixo.
   É o "gatilho" visual: começa apagado (cor neutra) e muda para azul
   exatamente quando a bola/linha o alcança, sem nunca ficar transparente
   (sendo irmão do ".cloud-diagram-node-card", não filho, não herda a
   opacidade dele). */
.cloud-diagram-node-icon {
    position: absolute;
    left: -16px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--color-primary-light);
    background-color: var(--color-primary-light);
    box-shadow: 0 0 0 4px #0a0f1a, 0 0 14px color-mix(in srgb, var(--color-primary-light) 55%, transparent);
    color: #fff;
}

.cloud-diagram-node-mid .cloud-diagram-node-icon {
    animation: cloud-badge-mid-glow 7s linear infinite;
}

.cloud-diagram-node-server .cloud-diagram-node-icon {
    animation: cloud-badge-server-glow 7s linear infinite;
}

/* Mesmos instantes-chave dos keyframes do cartão (ver mais abaixo),
   aplicados à cor do emblema: cinza/neutro apagado, azul quando liga. */
@keyframes cloud-badge-mid-glow {
    0%, 33.3% { background-color: #141c2e; border-color: #2a3550; color: #5c6b84; box-shadow: 0 0 0 4px #0a0f1a; }
    34.9%, 83.3% { background-color: var(--color-primary-light); border-color: var(--color-primary-light); color: #fff; box-shadow: 0 0 0 4px #0a0f1a, 0 0 14px color-mix(in srgb, var(--color-primary-light) 55%, transparent); }
    86%, 100% { background-color: #141c2e; border-color: #2a3550; color: #5c6b84; box-shadow: 0 0 0 4px #0a0f1a; }
}

@keyframes cloud-badge-server-glow {
    0%, 66.7% { background-color: #141c2e; border-color: #2a3550; color: #5c6b84; box-shadow: 0 0 0 4px #0a0f1a; }
    68.3%, 83.3% { background-color: var(--color-primary-light); border-color: var(--color-primary-light); color: #fff; box-shadow: 0 0 0 4px #0a0f1a, 0 0 14px color-mix(in srgb, var(--color-primary-light) 55%, transparent); }
    86%, 100% { background-color: #141c2e; border-color: #2a3550; color: #5c6b84; box-shadow: 0 0 0 4px #0a0f1a; }
}

.cloud-diagram-node-icon svg {
    width: 60%;
    height: 60%;
}

.cloud-diagram-node-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cloud-diagram-node-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: #5c6b84;
    white-space: nowrap;
}

.cloud-diagram-node-title {
    font-weight: bold;
    font-size: 13px;
    color: #e8eef7;
    white-space: nowrap;
}

.cloud-diagram-node-start {
    left: 2%;
    top: 10%;
    width: 25%;
    height: 17%;
}

.cloud-diagram-node-mid {
    left: 36%;
    top: 40%;
    width: 32%;
    height: 20%;
}

.cloud-diagram-node-mid .cloud-diagram-node-card {
    animation: cloud-node-mid-glow 7s linear infinite;
}

.cloud-diagram-node-server {
    left: 77%;
    width: 21%;
    height: 17%;
}

.cloud-diagram-node-server .cloud-diagram-node-card {
    animation: cloud-node-server-glow 7s linear infinite;
}

/* A rede do cliente acende quando a bola que sai da TICom lhe toca (33.3%
   do ciclo — mesmo instante em que "cloud-path-a" fica totalmente
   desenhado) e apaga-se aos 83.3%, junto com as linhas. A transição entre
   estados tem sempre um pequeno intervalo (em vez de um salto instantâneo
   entre duas percentagens quase iguais) para o acender/apagar ficar
   suave, não um "flash". */
@keyframes cloud-node-mid-glow {
    0%, 33.3% { opacity: 0.5; border-color: #2a3550; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
    34.9%, 83.3% { opacity: 1; border-color: var(--color-primary-light); box-shadow: 0 0 0 1px var(--color-primary-light), 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 20px color-mix(in srgb, var(--color-primary-light) 55%, transparent); }
    86%, 100% { opacity: 0.5; border-color: #2a3550; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
}

/* Os 3 servidores acendem todos ao mesmo tempo, aos 66.7% do ciclo —
   quando as 3 bolas que saíram da rede em simultâneo lhes tocam. Mesma
   transição suave do keyframe acima. */
@keyframes cloud-node-server-glow {
    0%, 66.7% { opacity: 0.5; border-color: #2a3550; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
    68.3%, 83.3% { opacity: 1; border-color: var(--color-primary-light); box-shadow: 0 0 0 1px var(--color-primary-light), 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 20px color-mix(in srgb, var(--color-primary-light) 55%, transparent); }
    86%, 100% { opacity: 0.5; border-color: #2a3550; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
}

.cloud-diagram-node-server-1 {
    top: 10%;
}

.cloud-diagram-node-server-2 {
    top: 42%;
}

.cloud-diagram-node-server-3 {
    top: 73%;
}

@media (max-width: 700px) {
    .cloud-diagram-frame {
        padding: 14px;
    }

    .cloud-diagram-node-card {
        padding: 6px 10px 6px 16px;
        gap: 6px;
    }

    .cloud-diagram-node-icon {
        left: -10px;
        width: 20px;
        height: 20px;
        box-shadow: 0 0 0 3px #0a0f1a;
    }

    .cloud-diagram-node-label {
        font-size: 8px;
    }

    .cloud-diagram-node-title {
        font-size: 10px;
    }
}

/* ---------- Passo 3 "Migração e configuração" ----------
   Exclusiva desta página — um pequeno servidor local envia ficheiros,
   um a seguir ao outro, ao longo de uma linha tracejada até à cloud; a
   barra de progresso em baixo acompanha e, quando o último ficheiro
   chega, a cloud acende e aparece o visto de "migração concluída".
   Instantes-chave (ciclo de 7s, igual aos outros ícones de processo):
   ficheiro 1 em 4%-22%, ficheiro 2 em 16%-34%, ficheiro 3 em 28%-46%,
   ficheiro 4 em 40%-58% — cada um desfasado 12% do anterior. */
.process-migrate-rack {
    fill: var(--color-bg-alt);
    stroke: var(--color-border);
    stroke-width: 2;
}

.process-migrate-slot {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.5;
}

.process-migrate-led {
    fill: var(--color-text-muted);
}

.process-migrate-track {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 2;
    stroke-dasharray: 4 5;
}

.process-migrate-cloud {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 2.5;
    transition: stroke 0.3s ease;
    animation: process-migrate-cloud-glow 7s ease-in-out infinite;
}

@keyframes process-migrate-cloud-glow {
    0%, 56%  { stroke: var(--color-border); }
    60%, 80% { stroke: var(--color-primary-light); }
    90%, 100% { stroke: var(--color-border); }
}

.process-migrate-file {
    fill: var(--color-primary-light);
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.process-migrate-file-1 { animation: process-migrate-file-move-1 7s ease-in-out infinite; }
.process-migrate-file-2 { animation: process-migrate-file-move-2 7s ease-in-out infinite; }
.process-migrate-file-3 { animation: process-migrate-file-move-3 7s ease-in-out infinite; }
.process-migrate-file-4 { animation: process-migrate-file-move-4 7s ease-in-out infinite; }

@keyframes process-migrate-file-move-1 {
    0%, 4%    { transform: translateX(0); opacity: 0; }
    6%        { opacity: 1; }
    18%       { transform: translateX(94px); opacity: 1; }
    22%, 100% { transform: translateX(94px); opacity: 0; }
}
@keyframes process-migrate-file-move-2 {
    0%, 16%   { transform: translateX(0); opacity: 0; }
    18%       { opacity: 1; }
    30%       { transform: translateX(94px); opacity: 1; }
    34%, 100% { transform: translateX(94px); opacity: 0; }
}
@keyframes process-migrate-file-move-3 {
    0%, 28%   { transform: translateX(0); opacity: 0; }
    30%       { opacity: 1; }
    42%       { transform: translateX(94px); opacity: 1; }
    46%, 100% { transform: translateX(94px); opacity: 0; }
}
@keyframes process-migrate-file-move-4 {
    0%, 40%   { transform: translateX(0); opacity: 0; }
    42%       { opacity: 1; }
    54%       { transform: translateX(94px); opacity: 1; }
    58%, 100% { transform: translateX(94px); opacity: 0; }
}

.process-migrate-bar-track {
    fill: var(--color-border);
}

.process-migrate-bar-fill {
    fill: var(--color-primary-light);
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: process-migrate-bar-grow 7s ease-in-out infinite;
}

@keyframes process-migrate-bar-grow {
    0%, 4%    { transform: scaleX(0); }
    58%, 80%  { transform: scaleX(1); }
    90%, 100% { transform: scaleX(0); }
}

.process-migrate-check-circle {
    fill: var(--color-primary-light);
    opacity: 0;
    animation: process-migrate-check-show 7s ease-in-out infinite;
}

.process-migrate-check-mark {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    animation: process-migrate-check-show 7s ease-in-out infinite;
}

@keyframes process-migrate-check-show {
    0%, 58%  { opacity: 0; }
    62%, 80% { opacity: 1; }
    90%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .process-migrate-file-1,
    .process-migrate-file-2,
    .process-migrate-file-3,
    .process-migrate-file-4,
    .process-migrate-bar-fill,
    .process-migrate-check-circle,
    .process-migrate-check-mark,
    .process-migrate-cloud {
        animation: none;
    }

    .process-migrate-file-1,
    .process-migrate-file-2,
    .process-migrate-file-3,
    .process-migrate-file-4 {
        opacity: 0;
    }

    .process-migrate-bar-fill {
        transform: scaleX(1);
    }

    .process-migrate-check-circle,
    .process-migrate-check-mark {
        opacity: 1;
    }

    .process-migrate-cloud {
        stroke: var(--color-primary-light);
    }
}

/* ---------- Passo 4 "Testes de desempenho e segurança" ----------
   Mesma consola de testes usada noutras páginas de serviço com um passo
   "Testes" (ver sistemas-seguranca.css) — só que aqui com os 3 tópicos
   próprios desta página (desempenho, segurança, recuperação), em vez de
   4. Cada linha tem uma janela de 16% do ciclo de 7s, seguida da
   anterior: anel a rodar (spinner) enquanto "a testar" e depois um visto
   verde quando aprovado, com uma barra de progresso geral a acompanhar. */
.process-test-panel {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 3;
}

.process-test-label {
    font-size: 12px;
    fill: var(--color-text);
}

.process-test-ring {
    fill: none;
    stroke-width: 3;
}

.process-test-ring-1 { animation: process-test-ring-1 7s ease-in-out infinite; }
.process-test-ring-2 { animation: process-test-ring-2 7s ease-in-out infinite; }
.process-test-ring-3 { animation: process-test-ring-3 7s ease-in-out infinite; }

@keyframes process-test-ring-1 { 0%, 11%  { stroke: var(--color-border); } 14%, 82% { stroke: #35d07f; } 92%, 100% { stroke: var(--color-border); } }
@keyframes process-test-ring-2 { 0%, 27%  { stroke: var(--color-border); } 30%, 82% { stroke: #35d07f; } 92%, 100% { stroke: var(--color-border); } }
@keyframes process-test-ring-3 { 0%, 43%  { stroke: var(--color-border); } 46%, 82% { stroke: #35d07f; } 92%, 100% { stroke: var(--color-border); } }

.process-test-spinner {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 8 100;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: process-test-spin-rotate 0.8s linear infinite;
}

@keyframes process-test-spin-rotate {
    to { transform: rotate(360deg); }
}

.process-test-spin-1 { animation: process-test-spin-rotate 0.8s linear infinite, process-test-spin-show-1 7s linear infinite; }
.process-test-spin-2 { animation: process-test-spin-rotate 0.8s linear infinite, process-test-spin-show-2 7s linear infinite; }
.process-test-spin-3 { animation: process-test-spin-rotate 0.8s linear infinite, process-test-spin-show-3 7s linear infinite; }

@keyframes process-test-spin-show-1 { 0%, 2%  { opacity: 0; } 4%, 11%  { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes process-test-spin-show-2 { 0%, 18% { opacity: 0; } 20%, 27% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes process-test-spin-show-3 { 0%, 34% { opacity: 0; } 36%, 43% { opacity: 1; } 45%, 100% { opacity: 0; } }

.process-test-check {
    fill: none;
    stroke: #35d07f;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-test-check-1 { animation: process-test-check-show-1 7s linear infinite; }
.process-test-check-2 { animation: process-test-check-show-2 7s linear infinite; }
.process-test-check-3 { animation: process-test-check-show-3 7s linear infinite; }

@keyframes process-test-check-show-1 { 0%, 13%  { opacity: 0; } 15%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes process-test-check-show-2 { 0%, 29%  { opacity: 0; } 31%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes process-test-check-show-3 { 0%, 45%  { opacity: 0; } 47%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }

.process-test-bar-track {
    fill: var(--color-border);
}

.process-test-bar-fill {
    fill: #35d07f;
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: process-test-bar-grow 7s ease-in-out infinite;
}

@keyframes process-test-bar-grow {
    0%, 2%    { transform: scaleX(0); }
    43%, 80%  { transform: scaleX(1); }
    90%, 100% { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .process-test-ring-1,
    .process-test-ring-2,
    .process-test-ring-3,
    .process-test-spinner,
    .process-test-spin-1,
    .process-test-spin-2,
    .process-test-spin-3,
    .process-test-check-1,
    .process-test-check-2,
    .process-test-check-3,
    .process-test-bar-fill {
        animation: none;
    }

    .process-test-ring-1,
    .process-test-ring-2,
    .process-test-ring-3 {
        stroke: #35d07f;
    }

    .process-test-spinner {
        opacity: 0;
    }

    .process-test-check-1,
    .process-test-check-2,
    .process-test-check-3 {
        opacity: 1;
    }

    .process-test-bar-fill {
        transform: scaleX(1);
    }
}

/* Animação exclusiva do passo 5 "Monitorização": um pequeno ecrã de
   painel de controlo, com o estado "online" (ponto verde com anel a
   pulsar), um gráfico tipo eletrocardiograma a percorrer o ecrã em
   loop contínuo (duas cópias do mesmo traçado lado a lado, dentro de
   um "clipPath", deslocadas em conjunto via "translateX" — quando a
   primeira sai completamente de vista a segunda já está na mesma
   posição em que a primeira começou, por isso o loop não tem corte
   percetível) e três barras de utilização (CPU/RAM/Rede) a oscilar
   devagar entre dois valores, para dar sensação de leitura em tempo
   real sem mostrar nenhum número inventado. */
.process-monitor-panel {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 3;
}

.process-monitor-dot {
    fill: #35d07f;
}

.process-monitor-ping {
    fill: #35d07f;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: process-monitor-ping 1.8s ease-out infinite;
}

@keyframes process-monitor-ping {
    0%   { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(2.4); opacity: 0; }
}

.process-monitor-status {
    font-size: 11px;
    fill: var(--color-text);
}

.process-monitor-divider {
    stroke: var(--color-border);
    stroke-width: 1;
}

.process-monitor-chart-box {
    fill: var(--color-bg-alt);
    stroke: var(--color-border);
    stroke-width: 2;
}

.process-monitor-wave-track {
    animation: process-monitor-wave-scroll 4s linear infinite;
}

@keyframes process-monitor-wave-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-136px); }
}

.process-monitor-wave {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-monitor-label {
    font-size: 11px;
    fill: var(--color-text);
}

.process-monitor-bar-track {
    fill: var(--color-border);
}

.process-monitor-bar-fill {
    transform-box: fill-box;
    transform-origin: 0% 50%;
}

.process-monitor-bar-cpu {
    fill: var(--color-primary-light);
    animation: process-monitor-bar-cpu 4s ease-in-out infinite alternate;
}

.process-monitor-bar-ram {
    fill: #35d07f;
    animation: process-monitor-bar-ram 4.6s ease-in-out infinite alternate;
}

.process-monitor-bar-rede {
    fill: #f5a623;
    animation: process-monitor-bar-rede 3.6s ease-in-out infinite alternate;
}

@keyframes process-monitor-bar-cpu  { 0% { transform: scaleX(0.55); } 100% { transform: scaleX(0.78); } }
@keyframes process-monitor-bar-ram  { 0% { transform: scaleX(0.4);  } 100% { transform: scaleX(0.62); } }
@keyframes process-monitor-bar-rede { 0% { transform: scaleX(0.25); } 100% { transform: scaleX(0.5);  } }

@media (prefers-reduced-motion: reduce) {
    .process-monitor-ping,
    .process-monitor-wave-track,
    .process-monitor-bar-cpu,
    .process-monitor-bar-ram,
    .process-monitor-bar-rede {
        animation: none;
    }

    .process-monitor-ping {
        opacity: 0;
    }

    .process-monitor-bar-cpu  { transform: scaleX(0.65); }
    .process-monitor-bar-ram  { transform: scaleX(0.5);  }
    .process-monitor-bar-rede { transform: scaleX(0.35); }
}