/* ========================================================================
   KORU NEXUS — Cómo Funciona Page Styles
   ======================================================================== */

.page-hero {
  padding-top: calc(var(--space-3xl) + 2rem);
  padding-bottom: var(--space-2xl);
  position: relative;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(0,217,192,0.06) 0%, transparent 50%);
}

/* ========================================================================
   PROCESS FLOW
   6 columnas virtuales → 3 items por fila (cada uno span 2).
   Los 2 últimos se colocan explícitamente en cols 2–3 y 4–5 → centrados.
   Los .process-connector tienen display:none y no ocupan espacio de grid.
   ======================================================================== */
.process-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.process-connector {
  display: none;
}

/* Cada step ocupa 2 columnas (→ 3 steps por fila en un grid de 6) */
.process-step {
  grid-column: span 2;
  position: relative;
  min-width: 0;
}

/* Step 4 y 5: nth-child cuenta TODOS los hijos incluidos los display:none */
/* step4 = child 7, step5 = child 9 de .process-flow */
.process-flow > *:nth-child(7) { grid-column: 2 / 4; }
.process-flow > *:nth-child(9) { grid-column: 4 / 6; }

@media (max-width: 960px) {
  .process-flow {
    grid-template-columns: repeat(4, 1fr);
  }
  .process-step { grid-column: span 2; }
  .process-flow > *:nth-child(7) { grid-column: 2 / 4; }
  .process-flow > *:nth-child(9) { grid-column: 2 / 4; }
}

@media (max-width: 580px) {
  .process-flow { grid-template-columns: 1fr; }
  .process-step,
  .process-flow > *:nth-child(7),
  .process-flow > *:nth-child(9) { grid-column: 1 / -1; }
}

/* ── Layout interno del step: número + icono + título en la misma fila ── */
.process-step.glass-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 0.75rem;
  row-gap: var(--space-sm);
  align-items: center;
}

.process-step .process-step__number {
  margin: 0;
  align-self: center;
  flex-shrink: 0;
}

.process-step .process-step__icon {
  margin: 0;
  align-self: center;
}

.process-step .glass-card__title {
  margin-bottom: 0;
  font-size: 1rem;
}

/* Descripción y badge ocupan la fila completa */
.process-step .glass-card__text {
  grid-column: 1 / -1;
}

.process-step .badge {
  grid-column: 1 / -1;
  width: fit-content;
}

.process-step__number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 217, 192, 0.1);
  border: 2px solid var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--clr-primary);
  flex-shrink: 0;
}

.process-step__icon {
  color: var(--clr-primary);
}

.process-step__icon svg {
  stroke: var(--clr-primary);
  fill: none;
  width: 24px;
  height: 24px;
  display: block;
}

/* ========================================================================
   MASTERY LEVELS (grid--5)
   6 columnas virtuales → 3 items por fila (span 2 c/u).
   Items 4 y 5 centrados en la segunda fila.
   ======================================================================== */
.grid--5 {
  grid-template-columns: repeat(6, 1fr);
}

.grid--5 > * {
  grid-column: span 2;
}

/* Centrar los 2 últimos */
.grid--5 > *:nth-child(4) { grid-column: 2 / 4; }
.grid--5 > *:nth-child(5) { grid-column: 4 / 6; }

@media (max-width: 768px) {
  .grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--5 > *,
  .grid--5 > *:nth-child(4),
  .grid--5 > *:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .grid--5 {
    grid-template-columns: 1fr;
  }
  .grid--5 > *,
  .grid--5 > *:nth-child(4),
  .grid--5 > *:nth-child(5) {
    grid-column: 1 / -1;
  }
}

.level-number {
  font-family: var(--ff-mono);
  font-size: 2.2rem;
  font-weight: var(--fw-bold);
  color: var(--clr-text-subtle);
  margin-bottom: var(--space-xs);
}

/* Benefits list */
.koru-score__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: var(--space-sm) 0;
  font-size: var(--fs-body);
  color: var(--clr-text-muted);
}

.koru-score__benefits li svg {
  width: 20px;
  height: 20px;
  stroke: var(--clr-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Light mode: como-funciona ── */
[data-theme="light"] .process-step__icon { color: #007a6a; }
[data-theme="light"] .process-step__icon svg { stroke: #007a6a; }
[data-theme="light"] .process-step__number {
  color: #007a6a;
  border-color: #007a6a;
  background: rgba(0,122,106,0.08);
}
[data-theme="light"] .koru-score__benefits li svg { stroke: #007a6a; }
[data-theme="light"] .level-number { color: rgba(13,13,26,0.45); }