/* =========================================================
   SECCIÓN · La solución PARFI (#solucion)
   Tres pasos unidos por flechas; un destello naranja viaja
   de un paso al siguiente (circuito cerrado).
   ========================================================= */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.flow li { position: relative; min-width: 0; display: grid; gap: 12px; align-content: start; }
.flow .ico { width: 64px; height: 64px; }
.flow li:hover .ico { transform: translateY(-4px) scale(1.06); }
.flow .n { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; color: var(--steel); margin-top: 8px; }
.flow h3 { font-size: 1.45rem; font-weight: 800; font-stretch: 106%; }
.flow p { color: var(--ink-soft); }

/* Línea de la flecha + destello que la recorre */
.flow li:not(:last-child)::after {
  content: ""; position: absolute; top: 32px; left: 88px; right: 8px; height: 2px;
  background:
    linear-gradient(90deg, transparent 0 42%, var(--orange) 50%, transparent 58%) 0 0 / 250% 100% no-repeat,
    linear-gradient(90deg, rgba(252, 102, 37, .35) 0 calc(100% - 8px), transparent 0);
  animation: travel 2.4s linear infinite;
}
.flow li:nth-child(2)::after { animation-delay: 1.2s; }
@keyframes travel { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }

/* Punta de la flecha */
.flow li:not(:last-child)::before {
  content: ""; position: absolute; top: 28px; right: 8px; width: 8px; height: 8px;
  border-top: 1.5px solid var(--orange); border-right: 1.5px solid var(--orange);
  transform: rotate(45deg); opacity: .7;
}

.closed-loop {
  margin-top: clamp(36px, 5vw, 56px); padding: 18px 22px; border-radius: 14px;
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  background: var(--paper); border: 1px solid var(--line-light);
}
.closed-loop b { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-deep); }
.closed-loop span { color: var(--ink-soft); }

@media (max-width: 720px) {
  .flow { grid-template-columns: 1fr; }
  /* En una columna las flechas horizontales no tienen sentido */
  .flow li:not(:last-child)::after,
  .flow li:not(:last-child)::before { display: none; }
}