/* PROCESO
   Cuatro tarjetas. En pantallas anchas arrancan escalonadas y se
   alinean al hacer scroll (script.js mueve --stair-offset); por debajo
   de 1100px van en dos columnas o en una, sin escalón. */
.workflow-cards {
  display: grid;
  margin: clamp(36px, 5.6vw, 80px) var(--side) 0;
  gap: 5px;
}

.workflow-cards article {
  display: flex;
  padding: clamp(26px, 3.2vw, 48px) clamp(22px, 2.5vw, 44px);
  flex-direction: column;
  border-radius: 17px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: background-color .35s ease, box-shadow .35s ease;
}

/* Hover: la tarjeta se llena de amarillo. Solo con ratón: en una
   pantalla táctil el estado se quedaría puesto tras el toque. */
@media (hover: hover) {
  .workflow-cards article:hover {
    background: var(--color-highlight);
    box-shadow: 0 22px 50px rgba(19, 28, 122, .22);
  }
}

.workflow-icon {
  width: clamp(72px, 7.8vw, 112px);
  height: clamp(72px, 7.8vw, 112px);
}

.workflow-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--night-blue);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.workflow-cards h3 {
  margin-top: clamp(28px, 3.4vw, 56px);
  font-size: clamp(1.5625rem, 2.15vw, 1.9375rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.workflow-cards p {
  margin: clamp(16px, 2vw, 30px) 0 clamp(28px, 3.4vw, 56px);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.36;
  text-wrap: pretty;
}

/* Lo que el cliente recibe en ese paso, al pie de la tarjeta. */
.workflow-cards small {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.workflow-cards small b {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .workflow-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .workflow {
    /* Sitio para el último escalón antes de que se recoja. */
    padding-bottom: 60px;
  }

  .workflow-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .workflow-cards article {
    min-height: 600px;
    transform: translateY(var(--stair-offset, 0px));
    transition: transform .12s linear, background-color .35s ease, box-shadow .35s ease;
  }

  .workflow-cards article:nth-child(2) { --stair-offset: 60px; }
  .workflow-cards article:nth-child(3) { --stair-offset: 130px; }
  .workflow-cards article:nth-child(4) { --stair-offset: 210px; }
}

/* ---------- Iconos del proceso ----------
   El trazo se dibuja cuando la tarjeta entra en pantalla: script.js
   ya le pone .is-visible, así que no hace falta JS nuevo.

   pathLength="1" normaliza el largo del contorno de cada figura, de
   modo que un único par dasharray/dashoffset sirve igual para un
   círculo, un rect o un path, sin medir nada a mano. */
.wf-d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.workflow-cards article.is-visible .wf-d {
  animation: wf-draw .8s cubic-bezier(.16, 1, .3, 1) forwards;
}

.workflow-cards article.is-visible .wf-d.wf-s2 { animation-delay: .1s; }
.workflow-cards article.is-visible .wf-d.wf-s3 { animation-delay: .2s; }
.workflow-cards article.is-visible .wf-d.wf-s4 { animation-delay: .3s; }

/* Acentos en amarillo, el mismo del resto de la interfaz. */
.wf-accent {
  fill: var(--moon-yellow);
  fill-opacity: .85;
  stroke: var(--moon-yellow);
}

.wf-accent-s {
  stroke: var(--moon-yellow);
}

.wf-focus {
  fill: var(--moon-yellow);
  stroke: none;
}

.wf-scan {
  opacity: 0;
}

/* El movimiento continuo va sobre grupos, nunca sobre el trazo que
   se dibuja: si compartieran elemento, la segunda animación pisaría
   el stroke-dashoffset de la primera. */
.wf-rings,
.wf-cycle,
.wf-mod,
.wf-scan,
.wf-focus {
  transform-box: view-box;
  transform-origin: 56px 56px;
}

.wf-mod--a { --dx: -2.5px; --dy: -2.5px; }
.wf-mod--b { --dx: 2.5px; --dy: -2.5px; }
.wf-mod--c { --dx: -2.5px; --dy: 2.5px; }
.wf-mod--d { --dx: 2.5px; --dy: 2.5px; }

.workflow-cards article.is-visible .wf-rings { animation: wf-breathe 5.5s ease-in-out 1s infinite; }
.workflow-cards article.is-visible .wf-scan { animation: wf-sweep 4.5s ease-in-out 1s infinite; }
.workflow-cards article.is-visible .wf-focus { animation: wf-pulse 3s ease-in-out 1s infinite; }
.workflow-cards article.is-visible .wf-cycle { animation: wf-spin 22s linear 1s infinite; }
.workflow-cards article.is-visible .wf-mod { animation: wf-nudge 6s ease-in-out infinite; }
.workflow-cards article.is-visible .wf-mod--a { animation-delay: 1s; }
.workflow-cards article.is-visible .wf-mod--b { animation-delay: 1.15s; }
.workflow-cards article.is-visible .wf-mod--c { animation-delay: 1.3s; }
.workflow-cards article.is-visible .wf-mod--d { animation-delay: 1.45s; }

/* Los acentos del icono son del mismo amarillo que el hover: sobre el
   fondo lleno desaparecerían, así que se invierten a azul noche. */
.wf-accent,
.wf-accent-s,
.wf-focus {
  transition: fill .35s ease, stroke .35s ease;
}

@media (hover: hover) {
  .workflow-cards article:hover .wf-accent {
    fill: var(--night-deep);
    fill-opacity: 1;
    stroke: var(--night-deep);
  }

  .workflow-cards article:hover .wf-accent-s {
    stroke: var(--night-deep);
  }

  .workflow-cards article:hover .wf-focus {
    fill: var(--night-deep);
  }
}

@keyframes wf-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes wf-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.93); opacity: .7; }
}

@keyframes wf-sweep {
  0%, 100% { transform: translateY(-30px); opacity: 0; }
  18%, 82% { opacity: .8; }
  50% { transform: translateY(30px); }
}

@keyframes wf-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

@keyframes wf-spin {
  to { transform: rotate(360deg); }
}

@keyframes wf-nudge {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--dx), var(--dy)); }
}

/* Sin animación: los trazos se quedan puestos en lugar de perderse. */
@media (prefers-reduced-motion: reduce) {
  .wf-d {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .wf-scan {
    opacity: .8;
  }

}