/* ==================================================================
   KAPAY · Animacion "chaos to clarity" de la home
   ------------------------------------------------------------------
   Port a CSS/JS puro de la composicion de Claude Design
   "Kapay Hero Animation" (04_DESIGN/Assets/Website/claude-design-export).

   El original es React + Motion sobre un lienzo de 1920x1080 pensado
   para video. Meterlo tal cual en una web estatica costaria ~2,5 MB y
   un transpilado en el navegador, asi que se reimplementa: el DOM se
   construye UNA vez con la misma geometria del fuente (CX/CY/RX/RY y
   las mismas curvas de easing), y por fotograma solo se escriben
   opacidad y transform sobre 13 elementos.

   Diferencias respecto al fuente, deliberadas:
   · El lienzo se recorta a 1520x895 (el original es un 16:9 de video de
     1920x1080). No es estetico: la escena escala al ancho disponible,
     asi que el margen vacio del lienzo encogia las tarjetas. Los limites
     estan medidos sobre las cajas reales, no estimados. Ver la nota de
     geometria en js/kapay-hero.js.
   · La escena final de texto ("Your whole school. In one place") no se
     reproduce: ese titular ya esta en el HTML del hero, siempre visible
     y legible por buscadores. Repetirlo dentro del bucle seria
     redundante. El codigo la conserva tras data-closing="true".

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

:root{
  /* Hereda --primary de main.css (#F58220, el naranja de BRAND.md) para
     que la escena se lea como parte de la pagina y no como una captura. */
  --kh-accent:  var(--primary, #F58220);
  --kh-navy:    #16213E;
  --kh-muted:   rgba(22,33,62,0.45);
  --kh-faint:   rgba(22,33,62,0.08);
  --kh-hair:    rgba(22,33,62,0.07);
}

/* --- Escenario: escala el lienzo al ancho disponible --------------- */
.kh-stage{ position:relative; width:100%; }
.kh-canvas{
  position:absolute; left:0; top:0; transform-origin:top left;
  font-family:'DM Sans', system-ui, -apple-system, sans-serif;
  color:var(--kh-navy); text-align:left; line-height:normal;
}
.kh-canvas *{ box-sizing:border-box; }
.kh-world{ position:absolute; inset:0; }
.kh-wires{ position:absolute; left:0; top:0; display:block; }

/* --- Wordmark central --------------------------------------------- */
.kh-mark{ position:absolute; left:0; top:0; will-change:opacity, transform; }
.kh-mark img{ display:block; width:470px; height:auto; }

/* --- Tarjeta ------------------------------------------------------- */
.kh-card{
  position:absolute; left:0; top:0;
  padding:22px 24px 24px; background:#fff; border-radius:12px;
  border:1px solid rgba(22,33,62,0.10);
  transform-origin:50% 50%; will-change:opacity, transform;
}
.kh-head{ display:flex; align-items:center; gap:9px; margin-bottom:20px; }
.kh-head svg{ display:block; flex-shrink:0; }
.kh-name{ font-size:12.5px; font-weight:600; letter-spacing:0.09em; color:rgba(22,33,62,0.5); }

/* metrica grande */
.kh-metric-v{ display:flex; align-items:baseline; gap:5px; }
.kh-metric-v b{ font-size:40px; font-weight:600; letter-spacing:-0.03em; color:var(--kh-navy); line-height:1; }
.kh-metric-v i{ font-size:14px; font-weight:500; font-style:normal; color:var(--kh-muted); }
.kh-metric-l{ font-size:11.5px; font-weight:600; color:rgba(22,33,62,0.38); margin-top:9px; letter-spacing:0.08em; }

/* chip de estado */
.kh-chip{
  font-size:11.5px; font-weight:550; letter-spacing:0.01em; padding:3px 8px;
  border-radius:5px; white-space:nowrap;
  color:rgba(22,33,62,0.55); background:rgba(22,33,62,0.045);
}
.kh-chip.hot{ color:var(--kh-accent); background:rgba(245,130,32,0.10); }

/* Students */
.kh-stack{ display:grid; gap:20px; }
.kh-avs{ display:flex; align-items:center; gap:11px; }
.kh-avs-row{ display:flex; }
.kh-av{
  width:26px; height:26px; border-radius:26px; background:#fff;
  border:1px solid rgba(22,33,62,0.12);
  display:flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:600; color:rgba(22,33,62,0.6); letter-spacing:0.02em;
}
.kh-av + .kh-av{ margin-left:-7px; }

/* Bookings */
.kh-card-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--kh-hair);
}
.kh-card-row:last-child{ border-bottom:none; }
.kh-card-row-l{ display:flex; align-items:baseline; gap:11px; }
.kh-time{ font-size:12.5px; font-weight:550; color:var(--kh-muted); font-variant-numeric:tabular-nums; }
.kh-svc{ font-size:14.5px; font-weight:500; color:var(--kh-navy); letter-spacing:-0.01em; }

/* Lessons */
.kh-card-lead{ display:flex; align-items:baseline; justify-content:space-between; }
.kh-card-lead b{ font-size:27px; font-weight:600; letter-spacing:-0.025em; color:var(--kh-navy); }
.kh-card-lead span{ font-size:12.5px; font-weight:500; color:var(--kh-muted); }
.kh-slots{ display:grid; gap:7px; }
.kh-slot{ position:relative; height:9px; }
.kh-slot i{ position:absolute; inset:0; border-radius:5px; background:rgba(22,33,62,0.035); }
.kh-slot b{ position:absolute; top:0; height:9px; border-radius:5px; background:rgba(22,33,62,0.5); }
.kh-slot b.hot{ background:var(--kh-accent); }
.kh-hours{
  display:flex; justify-content:space-between;
  font-size:11px; font-weight:550; color:rgba(22,33,62,0.32); letter-spacing:0.05em;
}

/* Rentals */
.kh-gear{ display:grid; gap:12px; }
.kh-gear-row{ display:grid; gap:7px; }
.kh-gear-t{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:500; }
.kh-gear-t span:first-child{ color:var(--kh-navy); }
.kh-gear-t span:last-child{ color:var(--kh-muted); font-variant-numeric:tabular-nums; }
.kh-bar{ height:4px; border-radius:4px; background:var(--kh-faint); }
.kh-bar i{ display:block; height:4px; border-radius:4px; background:rgba(22,33,62,0.5); }

/* Payments */
.kh-spark{ display:flex; align-items:flex-end; gap:5px; height:34px; }
.kh-spark i{ flex:1; border-radius:2px; background:rgba(22,33,62,0.13); }
.kh-spark i.hot{ background:var(--kh-accent); }
.kh-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:13px; border-top:1px solid var(--kh-hair);
}
.kh-foot span{ font-size:12.5px; font-weight:500; color:var(--kh-muted); }
.kh-foot b{ font-size:14.5px; font-weight:600; color:var(--kh-navy); font-variant-numeric:tabular-nums; }

/* --- Escena de cierre (solo con data-closing="true") --------------- */
.kh-close{ position:absolute; left:0; top:0; width:1400px; text-align:center; }
.kh-close-rule{ height:2px; background:var(--kh-accent); margin:0 auto 40px; }
.kh-close h2{ font-size:66px; font-weight:600; letter-spacing:-0.028em; color:var(--kh-navy); line-height:1.12; }
.kh-close p{ font-size:27px; font-weight:450; color:rgba(22,33,62,0.48); margin-top:26px; letter-spacing:-0.005em; }