/* ============================================================
   SERVICE CARD ANIMATED ICONS
   SVG animations ported from itshover.com — CSS-only, no React
   ============================================================ */

.svc-icon {
  width: 28px;
  height: 28px;
  stroke: var(--text-muted);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
  overflow: visible;
  flex-shrink: 0;
}
.service-card:hover .svc-icon {
  stroke: var(--accent-1);
}

/* Fill-only elements inside icons */
.icon-layers rect,
.icon-merge .dot {
  fill: var(--text-muted);
  transition: fill 0.3s ease;
}
.service-card:hover .icon-layers rect,
.service-card:hover .icon-merge .dot {
  fill: var(--accent-1);
}

/* ─────────────────────────────────────────────
   1. TARGET — Consultoría Estratégica
   3 concentric circles pulse outward (staggered)
   Source: itshover.com/icons/target
   ──────────────────────────────────────────── */
.icon-target circle { transform-origin: 12px 12px; }

.service-card:hover .icon-target .c-out  { animation: t-out  0.6s ease-in-out; }
.service-card:hover .icon-target .c-mid  { animation: t-mid  0.6s ease-in-out 0.09s both; }
.service-card:hover .icon-target .c-in   { animation: t-in   0.6s ease-in-out 0.18s both; }

@keyframes t-out { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.1);opacity:0.7} }
@keyframes t-mid { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.6} }
@keyframes t-in  { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:0.5} }

/* ─────────────────────────────────────────────
   2. BALANCE — Derecho Corporativo
   Beam tilts left → right continuously
   ──────────────────────────────────────────── */
.icon-balance .beam { transform-origin: 12px 7px; }

.service-card:hover .icon-balance .beam {
  animation: b-tilt 1.4s ease-in-out infinite;
}
@keyframes b-tilt {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(-12deg); }
  75%     { transform: rotate(12deg); }
}

/* ─────────────────────────────────────────────
   3. MERGE ARROWS — M&A
   Arrows converge toward center; dot pulses
   ──────────────────────────────────────────── */
.icon-merge .arr-l { transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.icon-merge .arr-r { transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }

.service-card:hover .icon-merge .arr-l { transform: translateX(2.5px); }
.service-card:hover .icon-merge .arr-r { transform: translateX(-2.5px); }

.icon-merge .dot { transform-origin: 12px 12px; }
.service-card:hover .icon-merge .dot { animation: dot-p 0.8s ease-in-out infinite; }

@keyframes dot-p {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(2); opacity: 0.3; }
}

/* ─────────────────────────────────────────────
   4. LAYERS — Gobierno Corporativo
   Top block slides left on hover
   Source: itshover.com/icons/layers
   ──────────────────────────────────────────── */
.icon-layers .top {
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.service-card:hover .icon-layers .top { transform: translateX(-5px); }

/* ─────────────────────────────────────────────
   5. SHIELD — Planificación Patrimonial
   Checkmark draws on hover, body glows
   ──────────────────────────────────────────── */
.icon-shield .check {
  stroke-dasharray: 11;
  stroke-dashoffset: 11;
  transition: stroke-dashoffset 0s;
}
.service-card:hover .icon-shield .check {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s ease 0.12s;
}
.icon-shield .body { transition: filter 0.35s ease; }
.service-card:hover .icon-shield .body {
  filter: drop-shadow(0 0 4px var(--accent-1));
}

/* ─────────────────────────────────────────────
   6. GLOBE — Estructuración Internacional
   Globe rotates 360° continuously on hover
   Source: itshover.com/icons/globe
   ──────────────────────────────────────────── */
.icon-globe .globe-g { transform-origin: 23px 19px; }

.service-card:hover .icon-globe .globe-g {
  animation: globe-spin 2s linear infinite;
}
@keyframes globe-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────
   7. CHECKED — Compliance
   Scale pulse → checkmark draws
   Source: itshover.com/icons/checked
   ──────────────────────────────────────────── */
.icon-checked .ring { transform-origin: 12px 12px; }
.icon-checked .tick {
  stroke-dasharray: 11;
  stroke-dashoffset: 11;
  transition: stroke-dashoffset 0s;
}

.service-card:hover .icon-checked .ring {
  animation: ring-pop 0.3s ease-in-out;
}
.service-card:hover .icon-checked .tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s ease 0.18s;
}
@keyframes ring-pop {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.1); }
}

/* ─────────────────────────────────────────────
   8. GEAR — Transformación Empresarial
   Full rotation on hover
   Source: itshover.com/icons/gear
   ──────────────────────────────────────────── */
.icon-gear { transform-origin: 50% 50%; }

.service-card:hover .icon-gear {
  animation: gear-r 0.9s ease-in-out;
}
@keyframes gear-r {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}