/*
 * Iconos serios para valores (Calidad, Transparencia, Puntualidad) — animación suave.
 * Color: petróleo Evomarca.
 */

.icono-valor {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--color-principal);
}

.icono-valor svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Animación suave y seria */
.icono-valor--animado .iv-ring {
  transform-origin: center;
  animation: iv-pulso 2.8s var(--easing) infinite;
}

.icono-valor--animado .iv-marca {
  animation: iv-aparecer 2.8s var(--easing) infinite;
}

@keyframes iv-pulso {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes iv-aparecer {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .icono-valor--animado .iv-ring,
  .icono-valor--animado .iv-marca {
    animation: none;
    opacity: 1;
  }
}

.icono-aporte {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 6px;
  color: var(--color-principal);
}

.icono-aporte svg {
  width: 22px;
  height: 22px;
  display: block;
}