/* ============================================================
   09-flow.css — Cómo funciona (timeline corporativa)
   ============================================================ */

.flow {
  background: var(--navy-900);
  color: #E8EFF7;
  padding-block: clamp(64px, 9vw, 128px);
}

.flow .section-head__num { color: var(--navy-500); }
.flow .section-head__sub { color: var(--ink-dark-soft); }
.flow .section-head__title { color: #FFFFFF; }

.flow__intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-7);
}

.flow__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: #FFFFFF;
}

.flow__title .pill {
  display: inline-block;
  background: var(--orange-500);
  color: #FFFFFF;
  padding: 0 0.2em;
  border-radius: 8px;
  font-weight: 700;
  font-style: normal;
}

.flow__steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--navy-700);
}

.flow__step {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--navy-700);
  align-items: center;
  transition: padding var(--dur-base), background var(--dur-base);
  cursor: default;
}

.flow__step-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--navy-500);
  transition: color var(--dur-base);
}

.flow__step-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.flow__step-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.flow__step-desc {
  font-size: 14px;
  line-height: 1.55;
  max-width: 60ch;
  color: var(--ink-dark-soft);
}

.flow__step-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--navy-100); /* UIUX-026: era --navy-500 (#4A77A7) ~2.8:1 sobre navy-800; --navy-100 (#DCE6F1) ~8:1 */
  padding: 8px 14px;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: all var(--dur-base);
  text-transform: uppercase;
}

/* CTA al pie del flow */
.flow__cta {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (hover: hover) {
  /* UIUX-006/UIUX-017: evita sticky-hover en táctil */
  .flow__step:hover {
    background: var(--navy-800);
    border-left: 3px solid var(--orange-500);
  }

  .flow__step:hover .flow__step-num {
    color: var(--orange-500);
  }

  .flow__step:hover .flow__step-tag {
    background: var(--orange-500);
    color: #FFFFFF;
    border-color: var(--orange-500);
  }
}

@media (max-width: 800px) {
  .flow__intro { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .flow__step { grid-template-columns: 56px 1fr; }
  .flow__step-tag { grid-column: 2; justify-self: start; }
}

@media (max-width: 600px) {
  .flow__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .flow__cta .btn {
    justify-content: center;
  }
}