/* ==================================================================
   KAPAY · Cadena "Student to Payment"
   ------------------------------------------------------------------
   Port a CSS/JS puro de la composicion de Claude Design
   "Student to Payment" (04_DESIGN/Assets/Website/Booking to payment/).

   Sustituye a la animacion `system()` anterior, que solo cubria cuatro
   etapas — Student, Booking, Lesson, Payment — mientras la linea de
   texto de encima prometia cinco. Faltaban Planning y Rental, que son
   justo las dos que separan a Kapay de un software de reservas. Esta
   version tiene las cinco filas.

   El original es React + Motion sobre un lienzo de 1060x700. Aqui se
   reimplementa: el DOM se construye UNA vez con la misma geometria del
   fuente (rowTop, badgeCY, CARD_X) y por fotograma solo se escriben
   opacidad, transform, color y algun texto.

   Todo es reversible: quitar el <link> y el <script> de index.html.
   ================================================================== */

:root{
  --kc-navy:   #16213E;
  --kc-orange: var(--primary, #F58220);
  --kc-green:  #1E9E6A;
  --kc-hair:   rgba(22,33,62,.10);
  --kc-mute:   rgba(22,33,62,.55);
  --kc-faint:  rgba(22,33,62,.38);
}

/* --- Escenario ---------------------------------------------------- */
.kc-stage{ position:relative; width:100%; }
.kc-scale{
  position:absolute; left:0; top:0; transform-origin:top left;
  width:1060px; height:700px; background:#fff;
  font-family:'DM Sans', system-ui, sans-serif; color:var(--kc-navy);
  text-align:left; line-height:normal;
}
.kc-scale *{ box-sizing:border-box; }
.kc-scale svg{ display:block; flex-shrink:0; }

/* --- Hilo y numeros de etapa -------------------------------------- */
.kc-thread{
  position:absolute; width:1px; background:var(--kc-hair);
  transform-origin:top;
}
.kc-badge{
  position:absolute; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(245,130,32,.55); background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; color:var(--kc-navy);
}

/* --- Fila --------------------------------------------------------- */
.kc-row{
  position:absolute; height:112px; background:#fff;
  border:1px solid var(--kc-hair); border-radius:14px;
  box-shadow:0 1px 2px rgba(22,33,62,.04), 0 10px 24px rgba(22,33,62,.045);
  display:flex; align-items:center; padding:0 26px;
}
.kc-l{ flex:0 0 338px; }
.kc-mid{ flex:1 1 auto; display:flex; justify-content:center; align-items:center; }
.kc-r{ flex:0 0 auto; display:flex; gap:30px; justify-content:flex-end; }

.kc-top{ display:flex; align-items:center; gap:10px; }
.kc-label{
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--kc-faint); font-weight:500;
}
.kc-primary{
  font-size:17px; font-weight:600; color:var(--kc-navy);
  letter-spacing:-.005em; white-space:nowrap; margin:8px 0 6px;
}
.kc-sec{ display:flex; align-items:center; gap:7px; }
.kc-sec span{ font-size:13px; color:var(--kc-mute); }

/* estado */
.kc-chip{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  border-radius:5px; border:1px solid var(--kc-hair);
  background:rgba(22,33,62,.035);
  font-size:12.5px; font-weight:500; color:var(--kc-navy); letter-spacing:.01em;
}
.kc-chip i{ width:5px; height:5px; border-radius:50%; background:var(--kc-orange); }
.kc-chip.green{ border-color:rgba(30,158,106,.30); background:rgba(30,158,106,.07); color:var(--kc-green); }
.kc-chip.green i{ background:var(--kc-green); }

/* metrica de la derecha, con su valor de relevo */
.kc-m{ text-align:right; }
.kc-m-l{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--kc-faint); font-weight:500; margin-bottom:5px; white-space:nowrap;
}
.kc-m-w{ position:relative; display:inline-block; }
.kc-m-v{ white-space:nowrap; font-size:15.5px; font-weight:600; color:var(--kc-navy); }
.kc-m-v.green{ color:var(--kc-green); }
.kc-m-f{
  position:absolute; right:0; top:0; white-space:nowrap;
  font-size:15.5px; font-weight:600; color:var(--kc-green);
}

/* ==================================================================
   Graficos centrales · uno por etapa
   ================================================================== */

/* 1 · Student — el perfil se crea, con pulso */
.kc-g-student{
  position:relative; width:130px; height:78px;
  display:flex; align-items:center; justify-content:center;
}
.kc-ring{
  position:absolute; width:58px; height:58px; border-radius:50%;
  border:1px solid var(--kc-orange);
}
.kc-avatar{
  position:relative; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--kc-hair); background:#fff;
  display:flex; align-items:center; justify-content:center;
}

/* 2 · Booking — las horas compradas se ocupan */
.kc-g-booking{ display:flex; gap:7px; }
.kc-cell{
  width:32px; height:34px; border-radius:4px; border:1px solid var(--kc-hair);
  position:relative; overflow:hidden;
}
.kc-cell u{ position:absolute; inset:0; background:rgba(245,130,32,.13); }
.kc-cell b{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--kc-orange); transform-origin:left;
}

/* 3 · Planning — la reserva cae en el carril de un instructor */
.kc-g-planning{
  position:relative; width:292px; height:66px;
  border:1px solid var(--kc-hair); border-radius:4px;
}
.kc-gut{ position:absolute; left:0; top:0; bottom:0; width:26px; border-right:1px solid var(--kc-hair); }
.kc-gut i{ position:absolute; left:8px; width:10px; height:1px; background:rgba(22,33,62,.20); }
.kc-gut i.on{ background:var(--kc-orange); }
.kc-lane-bg{ position:absolute; right:0; background:rgba(22,33,62,.022); }
.kc-hline{ position:absolute; right:0; height:1px; background:var(--kc-hair); }
.kc-vline{ position:absolute; top:0; bottom:0; width:1px; background:var(--kc-hair); }
.kc-block{
  position:absolute; height:18px; border-radius:3px;
  background:rgba(245,130,32,.15); border-left:2px solid var(--kc-orange);
}

/* 4 · Lesson · Rental — las plazas se llenan y sale el material */
.kc-g-lesson{ display:flex; align-items:center; gap:20px; }
.kc-seats{ display:flex; gap:7px; }
.kc-seat{
  width:28px; height:28px; border-radius:5px; border:1px solid var(--kc-hair);
  display:flex; align-items:center; justify-content:center;
}
.kc-gear{ position:relative; display:flex; flex-direction:column; gap:6px; }
.kc-gear-r{ position:absolute; left:-8px; top:-3px; bottom:-3px; width:1px; background:var(--kc-hair); }
.kc-gear i{
  width:46px; height:20px; border-radius:4px; border:1px solid var(--kc-hair);
  border-left:2px solid var(--kc-orange); background:rgba(245,130,32,.06);
}

/* 5 · Payment — la escuela registra el cobro y se sella */
.kc-g-payment{
  position:relative; width:118px; height:78px;
  display:flex; align-items:center; justify-content:center;
}
.kc-doc{
  width:58px; height:74px; border-radius:5px; border:1px solid var(--kc-hair);
  background:#fff; padding:11px 9px;
  display:flex; flex-direction:column; gap:7px;
}
.kc-doc i{ height:2px; background:rgba(22,33,62,.22); transform-origin:left; }
.kc-stamp{
  position:absolute; right:16px; bottom:6px; width:30px; height:30px;
  border-radius:50%; border:1px solid rgba(30,158,106,.35);
  background:rgba(30,158,106,.08);
  display:flex; align-items:center; justify-content:center;
}