/* =============================================
   NEO ICONS — SVG outline (24px, stroke currentColor, strokeWidth 2)
   Micro-interacciones: scale + trazo dibujado en hover (CSS puro, sin React)
============================================= */
.neo-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* Visible por defecto (tambien en movil, sin hover) */
[data-icon] .neo-icon > * {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

/* En hover: redibuja el trazo + crece + brilla */
[data-icon]:hover .neo-icon {
  transform: scale(1.18);
  filter: drop-shadow(0 0 6px currentColor);
}
[data-icon]:hover .neo-icon > * {
  animation: neoDraw 0.6s ease forwards;
}
[data-icon]:hover .neo-icon > *:nth-child(2) { animation-delay: 0.08s; }
[data-icon]:hover .neo-icon > *:nth-child(3) { animation-delay: 0.16s; }
[data-icon]:hover .neo-icon > *:nth-child(4) { animation-delay: 0.24s; }
[data-icon]:hover .neo-icon > *:nth-child(5) { animation-delay: 0.32s; }

@keyframes neoDraw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

/* Ajuste fino dentro de los contenedores recortados (clip-path) */
.about-val-icon .neo-icon { width: 20px; height: 20px; }
.social-btn .neo-icon { width: 20px; height: 20px; }