/* ==================================================================
   KAPAY · Pricing
   ------------------------------------------------------------------
   Hoja propia de pricing.html. Depende de css/home.css: de ahi salen
   los tokens, la escala tipografica, los botones, el acordeon del FAQ
   y el pie en navy. Aqui solo lo de esta pagina, con prefijo .kp-.

   Sustituye al <style> incrustado que tenia la pagina, que ponia los
   titulares en Anton mayusculas y un acento cian (#0b7f96) que no esta
   en 02_BRAND/BRAND.md.

   Solo hay un plan, asi que no hay tabla comparativa ni tarjeta con
   borde y badge: la cifra se sostiene sola.
   ================================================================== */

.kp-hero{ padding:152px 0 0; }

/* ── El plan ───────────────────────────────────────────────────────
   La cifra a un lado y las condiciones al otro, separadas por filete.
   Sin caja: una tarjeta con borde sugiere que hay otra al lado. */
.kp-plan{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);
  gap:80px; align-items:center;
  margin-top:64px; padding-top:56px; border-top:1px solid var(--kh-rule);
}
.kp-fig{
  display:flex; align-items:baseline; gap:6px; margin:0;
  font-size:clamp(84px,10vw,148px); font-weight:600;
  letter-spacing:-0.05em; line-height:0.86; color:var(--kh-ink);
}
.kp-fig span{ font-size:0.42em; font-weight:500; letter-spacing:-0.03em; }
.kp-fig i{
  font-style:normal; font-size:clamp(16px,1.4vw,19px); font-weight:500;
  letter-spacing:-0.01em; color:var(--kh-ink-45); margin-left:12px;
}
.kp-per{
  font-size:15.5px; color:var(--kh-ink-60); margin:18px 0 0;
}
.kp-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.kp-terms{ list-style:none; margin:0; padding:0; border-top:1px solid var(--kh-rule); }
.kp-terms li{
  display:flex; align-items:flex-start; gap:13px;
  padding:17px 0; border-bottom:1px solid var(--kh-rule);
  font-size:16px; line-height:1.5; color:var(--kh-ink);
}
.kp-terms svg{ flex-shrink:0; margin-top:3px; fill:var(--kh-accent); }
.kp-terms b{ font-weight:600; }
.kp-terms em{ font-style:normal; display:block; font-size:14.5px; color:var(--kh-ink-60); margin-top:3px; }

/* ── Lo que cubre ──────────────────────────────────────────────────*/
.kp-covers{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--kh-rule); margin-top:52px;
}
.kp-cover{ padding:26px 26px 28px 0; position:relative; }
.kp-cover:not(:last-child)::after{
  content:''; position:absolute; right:0; top:0; bottom:0; width:1px;
  background:var(--kh-rule-soft);
}
.kp-cover:not(:first-child){ padding-left:26px; }
.kp-cover-n{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--kh-ink-34); margin-bottom:14px;
}
.kp-cover p{ font-size:15.5px; line-height:1.55; color:var(--kh-ink-60); margin:0; }
.kp-cover b{ display:block; font-size:17px; font-weight:600; letter-spacing:-0.015em;
  color:var(--kh-ink); margin-bottom:6px; }

/* Los once modulos, en texto corrido: aqui no son enlaces, para eso
   esta features.html. Solo dicen que estan todos dentro del precio. */
.kp-modules{
  font-size:17px; line-height:1.75; color:var(--kh-ink); margin:26px 0 0;
  max-width:62ch;
}
.kp-modules i{ font-style:normal; color:var(--kh-ink-34); }

/* ── Lo que NO lleva ───────────────────────────────────────────────
   Un plan unico se explica tan bien por lo que no cobra como por lo
   que incluye, y evita que el visitante vaya buscando la letra pequeña. */
.kp-nots{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 64px; margin-top:44px; }
.kp-nots li{
  list-style:none; display:flex; align-items:baseline; gap:12px;
  padding:15px 0; border-bottom:1px solid var(--kh-rule);
  font-size:16px; color:var(--kh-ink-60);
}
.kp-nots svg{ flex-shrink:0; align-self:center; fill:var(--kh-ink-34); }

/* ── Formacion ─────────────────────────────────────────────────────
   Lo unico que se paga aparte, asi que va DESPUES de la lista de lo que
   no se cobra: primero lo que no cuesta, luego lo que si, sin
   esconderlo entre medias. Sin cifra a proposito: el tamaño del pack
   depende del equipo y se acuerda en la llamada. */
.kp-training{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.8fr);
  gap:72px; align-items:start;
}
.kp-training-l{ list-style:none; margin:0; padding:0; border-top:1px solid var(--kh-rule); }
.kp-training-l li{
  padding:16px 0; border-bottom:1px solid var(--kh-rule);
  font-size:15.5px; line-height:1.55; color:var(--kh-ink-60);
}
.kp-training-l b{ color:var(--kh-ink); font-weight:600; }

/* ── FAQ ───────────────────────────────────────────────────────────
   Reutiliza .kh-faq de home.css; solo cambia la medida. */
.kp-faq{ max-width:820px; }

/* ── Responsive ────────────────────────────────────────────────────*/
@media (max-width:1000px){
  .kp-plan{ grid-template-columns:1fr; gap:44px; }
  .kp-training{ grid-template-columns:1fr; gap:36px; }
  .kp-covers{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kp-cover{ padding-right:0; padding-left:0; }
  .kp-cover:nth-child(2n)::after{ content:none; }
  .kp-cover:nth-child(2n+1){ padding-right:26px; }
  .kp-cover:nth-child(2n){ padding-left:26px; }
  .kp-cover:nth-child(-n+2){ border-bottom:1px solid var(--kh-rule); }
}
@media (max-width:860px){
  .kp-hero{ padding:126px 0 0; }
}
@media (max-width:640px){
  .kp-covers{ grid-template-columns:1fr; }
  .kp-cover{ padding:22px 0 !important; border-bottom:1px solid var(--kh-rule); }
  .kp-cover:last-child{ border-bottom:none; }
  .kp-cover::after{ content:none !important; }
  .kp-nots{ grid-template-columns:1fr; gap:0; }
  .kp-actions .kh-btn{ justify-content:center; width:100%; }
}