/* Íconos de Servicios · arturospatino: reveal con clip-path y luego un bucle de 4s
   (su Lottie dura 240 frames a 60fps). Aquí es SVG propio: cada ícono cuenta su servicio.
   Regla: el SVG sin animar ES el fotograma final (sin JS, en pausa o con reduced-motion se ve completo).
   Un solo elemento en --icon-accent por ícono. Bucle infinito como la referencia (decisión de Adrián); se pausa fuera de pantalla. */

.icon-slot {
  width: var(--icon-size);
  height: var(--icon-size);
  margin-top: 24px;
}

.icon-slot svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--icon-line);
  stroke-width: 1;
}

/* ---------- Fotograma final (estado base) ---------- */
.ico .i-c { fill: var(--icon-line); }
.ico .i-c4 { fill: var(--icon-accent); stroke: var(--icon-accent); stroke-dasharray: 2 0; }

.ico .i-star {
  fill: var(--icon-accent);
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.ico .i-reply { transform-box: fill-box; transform-origin: 100% 100%; }

.ico .i-img { transform-box: fill-box; transform-origin: center; }
.ico .i-l1, .ico .i-l2 { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ico .i-btn {
  fill: var(--icon-accent);
  stroke: var(--icon-accent);
  transform-box: fill-box;
  transform-origin: left center;
}

.ico .i-dot { fill: var(--icon-line); stroke: none; opacity: 0; }
.ico .i-answer { stroke: var(--icon-accent); stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---------- Entrada y bucle (solo si no se pidió menos movimiento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Reveal diagonal (medido en arturospatino) */
  .js .icon-slot svg {
    clip-path: inset(100% 100% 0 0);
    transition: clip-path var(--dur-reveal) var(--ease-reveal);
  }
  .js .card.in-view .icon-slot svg { clip-path: inset(0 0 0 0); }

  /* Entrada de tarjetas: opacity 0 + 18px, 600ms, ease [.25,.1,.25,1], stagger 120ms (motion.js) */
  .js .services .card {
    transition: opacity var(--dur-card) var(--ease-card), transform var(--dur-card) var(--ease-card);
  }
  .js .services .card:not(.in-view) {
    opacity: 0;
    transform: translateY(var(--rise));
  }

  /* 001 · Tarjeta: los sellos se llenan y el último es el premio */
  .card.is-playing .i-c1 { animation: i-fill1 var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }
  .card.is-playing .i-c2 { animation: i-fill2 var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }
  .card.is-playing .i-c3 { animation: i-fill3 var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }
  .card.is-playing .i-c4 { animation: i-fill4 var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }

  /* 002 · Diagnóstico: la lupa revisa las reseñas */
  .card.is-playing .i-lens { animation: i-lens var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }
  .card.is-playing .i-hl { animation: i-hl var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }

  /* 003 · Reseñas: llega una estrella y alguien le responde */
  .card.is-playing .i-star { animation: i-star var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }
  .card.is-playing .i-reply { animation: i-reply var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }

  /* 004 · Sitio web: se arma en 4 tiempos */
  .card.is-playing .i-img { animation: i-img var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }
  .card.is-playing .i-l1 { animation: i-l1 var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }
  .card.is-playing .i-l2 { animation: i-l2 var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }
  .card.is-playing .i-btn { animation: i-btn var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }

  /* 005 · Agentes: el asistente escribe y responde */
  .card.is-playing .i-dot1 { animation: i-dot1 var(--dur-loop) ease-in-out var(--dur-reveal) infinite both; }
  .card.is-playing .i-dot2 { animation: i-dot2 var(--dur-loop) ease-in-out var(--dur-reveal) infinite both; }
  .card.is-playing .i-dot3 { animation: i-dot3 var(--dur-loop) ease-in-out var(--dur-reveal) infinite both; }
  .card.is-playing .i-answer { animation: i-answer var(--dur-loop) var(--ease-loop) var(--dur-reveal) infinite both; }
}

@media (prefers-reduced-motion: reduce) {
  .js .services .card { transition: opacity var(--dur-state) linear; }
  .js .services .card:not(.in-view) { opacity: 0; }
}

/* ---------- Guiones (% del ciclo de 4s; 0–10% y el final = fotograma final) ---------- */
@keyframes i-fill1 { 0%, 10% { fill-opacity: 1; } 18%, 23% { fill-opacity: 0; } 28%, 100% { fill-opacity: 1; } }
@keyframes i-fill2 { 0%, 10% { fill-opacity: 1; } 18%, 33% { fill-opacity: 0; } 38%, 100% { fill-opacity: 1; } }
@keyframes i-fill3 { 0%, 10% { fill-opacity: 1; } 18%, 43% { fill-opacity: 0; } 48%, 100% { fill-opacity: 1; } }
@keyframes i-fill4 {
  0%, 10% { fill-opacity: 1; stroke-dasharray: 2 0; }
  18%, 55% { fill-opacity: 0; stroke-dasharray: 2 2; }
  60%, 100% { fill-opacity: 1; stroke-dasharray: 2 0; }
}

@keyframes i-lens {
  0%, 10% { transform: translate(0, 0); }
  50% { transform: translate(-18px, -22px); }
  90%, 100% { transform: translate(0, 0); }
}
@keyframes i-hl {
  0%, 42% { stroke: var(--icon-line); }
  46%, 56% { stroke: var(--icon-accent); }
  60%, 100% { stroke: var(--icon-line); }
}

@keyframes i-star {
  0%, 10% { stroke-dashoffset: 0; fill-opacity: 1; }
  18%, 25% { stroke-dashoffset: 1; fill-opacity: 0; }
  55% { stroke-dashoffset: 0; fill-opacity: 0; }
  62%, 100% { stroke-dashoffset: 0; fill-opacity: 1; }
}
@keyframes i-reply {
  0%, 10% { opacity: 1; transform: scale(1); }
  18%, 65% { opacity: 0; transform: scale(0); }
  75%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes i-img {
  0%, 10% { opacity: 1; transform: scale(1); }
  15%, 20% { opacity: 0; transform: scale(.9); }
  28%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes i-l1 { 0%, 10% { stroke-dashoffset: 0; } 15%, 36% { stroke-dashoffset: 1; } 44%, 100% { stroke-dashoffset: 0; } }
@keyframes i-l2 { 0%, 10% { stroke-dashoffset: 0; } 15%, 44% { stroke-dashoffset: 1; } 52%, 100% { stroke-dashoffset: 0; } }
@keyframes i-btn {
  0%, 10% { opacity: 1; transform: scale(1); }
  15%, 66% { opacity: 0; transform: scale(.4); }
  74%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes i-dot1 {
  0%, 18% { opacity: 0; } 20% { opacity: .25; } 24% { opacity: 1; } 28% { opacity: .25; }
  34% { opacity: 1; } 38% { opacity: .25; } 44% { opacity: 1; } 48% { opacity: .25; } 52%, 100% { opacity: 0; }
}
@keyframes i-dot2 {
  0%, 20% { opacity: 0; } 22% { opacity: .25; } 26% { opacity: 1; } 30% { opacity: .25; }
  36% { opacity: 1; } 40% { opacity: .25; } 46% { opacity: 1; } 50% { opacity: .25; } 53%, 100% { opacity: 0; }
}
@keyframes i-dot3 {
  0%, 22% { opacity: 0; } 24% { opacity: .25; } 28% { opacity: 1; } 32% { opacity: .25; }
  38% { opacity: 1; } 42% { opacity: .25; } 48% { opacity: 1; } 51% { opacity: .25; } 54%, 100% { opacity: 0; }
}
@keyframes i-answer {
  0%, 10% { opacity: 1; stroke-dashoffset: 0; }
  18%, 55% { opacity: 0; stroke-dashoffset: 1; }
  56% { opacity: 1; stroke-dashoffset: 1; }
  70%, 100% { opacity: 1; stroke-dashoffset: 0; }
}