/*
  Gerado por tools/sincronizar-icones-site.py a partir do app novo (icones.css, placa.css e otimizacoes.css).
  Não edite aqui: mude no app e rode o script. Animam no hover ou foco do item inteiro e param com
  "reduzir movimento".
*/

.ico { width: 18px; height: 18px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico * { transform-box: view-box; }

:root {
    --ico-volta: cubic-bezier(.34, 1.56, .64, 1);
    --ico-sai: cubic-bezier(.2, 0, 0, 1);
}

/* Partes que ficam no estado novo enquanto o item está em foco: transição de ida com overshoot, volta suave */
.p-tampa, .p-ctl1, .p-ctl2, .p-ctl3, .p-ventoinha, .p-linha, .p-ponteiro, .p-engrenagem, .p-lupa,
.p-nave, .p-seta, .p-x, .p-quadro, .p-traco {
    transition: transform 200ms var(--ico-sai);
}

/* ---------- Estado de foco do item ---------- */

/* Lixeira: a tampa sobe e inclina, o corpo balança */
.p-tampa { transform-origin: 3px 6px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-lixeira .p-tampa { transform: translateY(-2.5px) rotate(-16deg); transition: transform 320ms var(--ico-volta); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-lixeira .p-corpo { animation: ico-balanca 420ms var(--ico-sai); transform-origin: 12px 22px; }

/* Início: a porta se desenha de um lado do chão ao outro, como quem entra em casa */
.p-porta { stroke-dasharray: 1; stroke-dashoffset: 0; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-inicio .p-porta { animation: ico-desenha 420ms var(--ico-sai); }

/* Jogos: os botões do controle piscam, um depois do outro */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-jogos .p-botao1 { animation: ico-pisca 360ms var(--ico-sai); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-jogos .p-botao2 { animation: ico-pisca 360ms var(--ico-sai) 120ms both; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-jogos .p-cruz { animation: ico-aperta 300ms var(--ico-volta); transform-origin: 8px 11px; }

/* Otimizações: os controles deslizam */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-otimizacoes .p-ctl1 { transform: translateX(-4px); transition: transform 360ms var(--ico-volta); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-otimizacoes .p-ctl2 { transform: translateX(5px); transition: transform 360ms var(--ico-volta) 40ms; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-otimizacoes .p-ctl3 { transform: translateX(-5px); transition: transform 360ms var(--ico-volta) 80ms; }

/* Placa de vídeo: a ventoinha gira e assenta */
.p-ventoinha { transform-origin: 12px 12px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-placa .p-ventoinha { transform: rotate(240deg); transition: transform 500ms var(--ico-volta); }

/* Rede: as ondas acendem em sequência, de dentro para fora */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-rede .p-onda1 { animation: ico-acende 300ms var(--ico-sai) 60ms both; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-rede .p-onda2 { animation: ico-acende 300ms var(--ico-sai) 140ms both; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-rede .p-onda3 { animation: ico-acende 300ms var(--ico-sai) 220ms both; }

/* Mouse e teclado: a roda desce e volta */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-mouse .p-roda { animation: ico-rola 420ms var(--ico-sai); }

/* Memória: o chip pulsa */
.p-nucleo { transform-origin: 12px 12px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-memoria .p-nucleo { animation: ico-pulsa 400ms var(--ico-volta); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-memoria .p-pinos { animation: ico-pisca 400ms var(--ico-sai); }

/* Drivers: a peça solta desce e encaixa no vão do L (de x 14, y 2 para x 10, y 6) */
.p-peca { transition: transform 200ms var(--ico-sai); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-drivers .p-peca { transform: translate(-4px, 4px); transition: transform 380ms var(--ico-volta); }

/* Inicialização: a linha do botão de ligar sobe */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-energia .p-linha { transform: translateY(-2px); transition: transform 280ms var(--ico-volta); }

/* Privacidade: o check do escudo se desenha */
.p-check { stroke-dasharray: 1; stroke-dashoffset: 0; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-escudo .p-check { animation: ico-desenha 420ms var(--ico-sai); }

/* Histórico: o ponteiro volta uma volta */
.p-ponteiro { transform-origin: 12px 12px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-historico .p-ponteiro { transform: rotate(-360deg); transition: transform 500ms var(--ico-volta); }

/* Ajuda: a interrogação balança */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-ajuda .p-interrogacao { animation: ico-balanca-forte 460ms var(--ico-sai); transform-origin: 12px 17px; }

/* Configurações: a engrenagem dá um passo */
.p-engrenagem { transform-origin: 12px 12px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-config .p-engrenagem { transform: rotate(60deg); transition: transform 400ms var(--ico-volta); }

/* Busca: a lupa inclina */
.p-lupa { transform-origin: 11px 11px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-busca .p-lupa { transform: rotate(-14deg) translate(-.5px, -.5px); transition: transform 300ms var(--ico-volta); }

/* Modo Jogo: o foguete decola um pouco */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-foguete .p-nave { transform: translate(1.5px, -1.5px); transition: transform 320ms var(--ico-volta); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-foguete .p-chama { animation: ico-chama 360ms var(--ico-sai); }

/* Disco: as luzes piscam */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-disco .p-led1 { animation: ico-pisca 300ms var(--ico-sai); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-disco .p-led2 { animation: ico-pisca 300ms var(--ico-sai) 100ms both; }

/* Seta: anda para a frente */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-seta .p-seta { transform: translateX(2px); transition: transform 240ms var(--ico-volta); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-voltar .p-seta { transform: translateX(-2px); transition: transform 240ms var(--ico-volta); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-mais .p-mais { animation: ico-aperta 300ms var(--ico-volta); transform-origin: 12px 12px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-processador .p-nucleo { animation: ico-pisca 360ms var(--ico-sai); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-coroa { animation: ico-toque 320ms var(--ico-volta); }

/* Jogar: o play dá um passo à frente */
.p-play { transition: transform 200ms var(--ico-sai); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-jogar .p-play { transform: translateX(1.5px); transition: transform 240ms var(--ico-volta); }

/* Achados: o sinal de atenção dá um toque */
:is(a, button, label, li, summary):is(:hover, :focus-visible) :is(.ico-problema, .ico-aviso) .p-exclamacao { animation: ico-toque 300ms var(--ico-volta); transform-origin: 12px 14px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-info .p-letra { animation: ico-sobe 300ms var(--ico-volta); }

/* Janela: minimizar desce, maximizar cresce, fechar gira */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-minimizar .p-traco { transform: translateY(1.5px); transition: transform 200ms var(--ico-volta); }
.p-quadro { transform-origin: 12px 12px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) :is(.ico-maximizar, .ico-restaurar) .p-quadro { transform: scale(1.08); transition: transform 240ms var(--ico-volta); }
.p-x { transform-origin: 12px 12px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-fechar .p-x { transform: rotate(90deg); transition: transform 280ms var(--ico-volta); }

/* ---------- Movimentos de uma vez só ---------- */

@keyframes ico-balanca { 0% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
@keyframes ico-balanca-forte { 0% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 55% { transform: rotate(10deg); } 80% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
@keyframes ico-pisca { 0% { opacity: 1; } 40% { opacity: .15; } 100% { opacity: 1; } }
@keyframes ico-aperta { 0% { transform: scale(1); } 40% { transform: scale(.8); } 100% { transform: scale(1); } }
@keyframes ico-acende { 0% { opacity: .15; } 100% { opacity: 1; } }
@keyframes ico-rola { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(3px); opacity: 0; } 46% { transform: translateY(-2px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes ico-pulsa { 0% { transform: scale(1); } 45% { transform: scale(.7); } 100% { transform: scale(1); } }
@keyframes ico-desenha { 0% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes ico-chama { 0% { opacity: 1; } 35% { opacity: .2; transform: translate(-1px, 1px); } 100% { opacity: 1; transform: none; } }
@keyframes ico-toque { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes ico-sobe { 0% { transform: translateY(1.5px); opacity: .3; } 100% { transform: none; opacity: 1; } }

/* ---------- Otimizações: categorias e marcadores das linhas (refino do Ruã, 22/10/2026) ---------- */

/* Níveis prontos: as camadas se afastam e voltam ao lugar */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-camadas .p-camada1 { animation: ico-afasta 380ms var(--ico-volta); --ico-dist: 1.5px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-camadas .p-camada2 { animation: ico-afasta 380ms var(--ico-volta); --ico-dist: 3px; }

/* Windows: a barra de título da janela desce de leve */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-janela .p-barra { animation: ico-afasta 320ms var(--ico-volta); --ico-dist: 1.5px; }

/* Privacidade: o risco sobre o olho se desenha */
.p-risco { stroke-dasharray: 1; stroke-dashoffset: 0; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-olho-fechado .p-risco { animation: ico-desenha 360ms var(--ico-sai); }

/* Placa de vídeo: a tela acende uma vez */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-monitor .p-tela { animation: ico-pisca 320ms var(--ico-sai); }

/* Energia: o raio cai de cima (o traço se desenha do alto para a ponta), dá um solavanco de descarga e solta duas faíscas */
.p-raio { stroke-dasharray: 1; stroke-dashoffset: 0; }
.p-faisca1, .p-faisca2 { opacity: 0; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-raio .p-raio { animation: ico-raio 420ms var(--ico-sai); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-raio .p-faisca1 { animation: ico-faisca 220ms var(--ico-sai) 230ms; --ico-fx: -1.5px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-raio .p-faisca2 { animation: ico-faisca 220ms var(--ico-sai) 260ms; --ico-fx: 1.5px; }

/* Cadeado (bloqueado): a alça tenta abrir e volta, porque continua travado */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-cadeado .p-alca { animation: ico-afasta 300ms var(--ico-volta); --ico-dist: -2px; }

/* Todos: os itens da lista andam um passo, um depois do outro */
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-lista .p-item1 { animation: ico-passo 300ms var(--ico-volta); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-lista .p-item2 { animation: ico-passo 300ms var(--ico-volta) 60ms; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-lista .p-item3 { animation: ico-passo 300ms var(--ico-volta) 120ms; }
@keyframes ico-passo { 0% { transform: translateX(0); } 45% { transform: translateX(2px); } 100% { transform: translateX(0); } }

@keyframes ico-afasta { 0% { transform: translateY(0); } 45% { transform: translateY(var(--ico-dist, 2px)); } 100% { transform: translateY(0); } }
@keyframes ico-raio {
    0% { stroke-dashoffset: 1; transform: translateY(-2px); }
    55% { stroke-dashoffset: 0; transform: translateY(0); }
    70% { transform: translateY(1.5px); }
    85% { transform: translateY(-.5px); }
    100% { stroke-dashoffset: 0; transform: translateY(0); }
}
@keyframes ico-faisca { 0% { opacity: 0; transform: none; } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--ico-fx, 1px), 1.5px); } }

@media (prefers-reduced-motion: reduce) {
    .ico, .ico * { animation: none !important; transition: none !important; }
    :is(a, button, label, li, summary):is(:hover, :focus-visible) .ico * { transform: none !important; }
}

/* ---------- ícones novos: animam no hover do item inteiro ---------- */
.p-giro, .p-desce, .p-tela, .p-sinal, .p-plugue, .p-lente, .p-espaco { transition: transform 200ms var(--ico-sai); }
.p-giro { transform-origin: 12px 12px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-atualizar .p-giro { transform: rotate(200deg); transition: transform 480ms var(--ico-volta); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-baixar .p-desce { transform: translateY(2.5px); transition: transform 320ms var(--ico-volta); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-som .p-onda1 { animation: ico-pisca 360ms var(--ico-sai); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-som .p-onda2 { animation: ico-pisca 360ms var(--ico-sai) 120ms both; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-bluetooth .p-sinal { animation: ico-pisca 420ms var(--ico-sai); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-usb .p-plugue { transform: translate(1.5px, -1.5px); transition: transform 320ms var(--ico-volta); }
.p-lente { transform-origin: 12px 10px; }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-camera .p-lente { transform: scale(.6); transition: transform 300ms var(--ico-volta); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-teclado .p-espaco { transform: translateY(1px); transition: transform 200ms var(--ico-volta); }
:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-monitor .p-tela { animation: ico-pisca 360ms var(--ico-sai); }

@media (prefers-reduced-motion: reduce) {
    .p-giro, .p-desce, .p-tela, .p-sinal, .p-plugue, .p-lente, .p-espaco, .p-onda1, .p-onda2 { transition: none !important; animation: none !important; }
}

:is(a, button, label, li, summary):is(:hover, :focus-visible) .ico-link .p-seta { transform: translate(1.5px, -1.5px); transition: transform 240ms var(--ico-volta); }