/* Melius · avaliação · ícones inline. Não estiliza o layout da seção.
   Desenho integral na base; movimento apenas como melhoria opcional.
   Sem JS, stroke-dasharray, pathLength, opacity animada ou loop infinito.
   A cor vem de .passo__marca; não carregar os SVGs por <img> para esta integração. */
.av-icone {
  display: block;
  flex: none;
  /* Medidas controladas pela .passo__icone existente: 72 desktop / 60 mobile. */
}

/* O círculo 36 a 12/12 ocupa o canto do quadrado mobile de 128.
   Recuo óptico vertical para não encostar os desenhos no número. */
@media (max-width: 480px) {
  .passo__icone.av-icone { transform: translateY(6px); }
}

.av-icone__fala,
.av-icone__leitura,
.av-icone__opcao,
.av-icone__elo {
  transform-box: fill-box;
  transform-origin: center;
}

/* Teclado: só se o passo já contiver um controle real.
   Não adicionar tabindex ao passo apenas para disparar uma animação. */
@media (prefers-reduced-motion: no-preference) {
  .passo:focus-within .av-icone__fala {
    animation: melius-av-fala 720ms ease-in-out var(--av-delay, 0ms) 1;
  }
  .passo:focus-within .av-icone__leitura {
    animation: melius-av-leitura 800ms ease-in-out 1;
  }
  .passo:focus-within .av-icone__opcao {
    animation: melius-av-opcao 680ms ease-in-out var(--av-delay, 0ms) 1;
  }
  .passo:focus-within .av-icone__elo {
    animation: melius-av-elo 800ms ease-in-out 1;
  }

  @media (hover: hover) and (pointer: fine) {
    .passo:hover .av-icone__fala {
      animation: melius-av-fala 720ms ease-in-out var(--av-delay, 0ms) 1;
    }
    .passo:hover .av-icone__leitura {
      animation: melius-av-leitura 800ms ease-in-out 1;
    }
    .passo:hover .av-icone__opcao {
      animation: melius-av-opcao 680ms ease-in-out var(--av-delay, 0ms) 1;
    }
    .passo:hover .av-icone__elo {
      animation: melius-av-elo 800ms ease-in-out 1;
    }
  }

  /* A variável entra no shorthand; não disputa especificidade com :hover. */
  .passo .av-icone__fala--2 { --av-delay: 80ms; }
  .passo .av-icone__fala--3 { --av-delay: 160ms; }
  .passo .av-icone__opcao--2 { --av-delay: 140ms; }
}

@keyframes melius-av-fala {
  0%, 100% { transform: translateY(0); }
  38% { transform: translateY(-.65px); }
  68% { transform: translateY(.15px); }
}
@keyframes melius-av-leitura {
  0%, 100% { transform: translateX(0); }
  38% { transform: translateX(.65px); }
  70% { transform: translateX(-.25px); }
}
@keyframes melius-av-opcao {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.45); }
}
@keyframes melius-av-elo {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-.45px); }
}

@media (prefers-reduced-motion: reduce) {
  .av-icone__fala,
  .av-icone__leitura,
  .av-icone__opcao,
  .av-icone__elo {
    animation: none !important;
    transform: none !important;
  }
}