.beneficio-card__icone--animated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--cor-secundaria);
}

.animated-icon {
  width: 56px;
  height: 56px;
  overflow: visible;
}

.animated-icon * {
  transform-box: fill-box;
  transform-origin: center;
}

/* Produtividade: seta desenha e sobe */
.animated-icon--produtividade .arrow-line,
.animated-icon--produtividade .arrow-head {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: prodDraw 2.4s ease-in-out infinite;
}

.animated-icon--produtividade .arrow-head {
  animation-delay: 0.2s;
}

.animated-icon--produtividade .arrow-group {
  animation: prodRise 2.4s ease-in-out infinite;
}

@keyframes prodDraw {
  0%,
  20% {
    stroke-dashoffset: 120;
  }
  55%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes prodRise {
  0%,
  100% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Genético: DNA girando */
.animated-icon--genetico-canvas {
  border-radius: 8px;
}

.animated-icon--genetico .dna-group {
  animation: dnaRotate 3.8s linear infinite;
}

.animated-icon--genetico .dna-dot {
  animation: dnaPulse 1.6s ease-in-out infinite;
}

.animated-icon--genetico .dna-dot:nth-of-type(2) {
  animation-delay: 0.2s;
}

.animated-icon--genetico .dna-dot:nth-of-type(3) {
  animation-delay: 0.4s;
}

.animated-icon--genetico .dna-dot:nth-of-type(4) {
  animation-delay: 0.6s;
}

@keyframes dnaRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dnaPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Sanitário: escudo girando suavemente */
.animated-icon--sanitario .shield-group {
  animation: shieldSwing 2.2s ease-in-out infinite;
}

@keyframes shieldSwing {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-7deg);
  }
  75% {
    transform: rotate(7deg);
  }
}

/* Profissional: mala pousando na base */
.animated-icon--profissional .briefcase-group {
  animation: briefcaseDrop 2.2s cubic-bezier(0.32, 1.56, 0.35, 1) infinite;
}

.animated-icon--profissional .surface-line {
  animation: surfacePulse 2.2s ease-in-out infinite;
}

@keyframes briefcaseDrop {
  0%,
  12% {
    transform: translateY(-9px);
  }
  30% {
    transform: translateY(0);
  }
  42% {
    transform: translateY(-3px);
  }
  54%,
  100% {
    transform: translateY(0);
  }
}

@keyframes surfacePulse {
  0%,
  100% {
    opacity: 0.65;
    transform: scaleX(0.94);
  }
  35% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated-icon * {
    animation: none !important;
  }
}