/* El tema oscuro es el predeterminado: `data-theme` solo se fija para el
   claro, así que los valores base son los del modo oscuro. */
.kp-page {
  --kp-green: #55dc71;
  --kp-green-bright: #24b83f;
  --kp-green-dark: #15852a;
  --kp-green-deep: #0c5f20;
  --kp-mint: #eaf8ed;
  --kp-mint-strong: #d5f1db;
  --kp-black: #050706;
  --kp-white: #ffffff;
  --kp-line: color-mix(in oklab, var(--line) 82%, var(--kp-green) 18%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

html[data-theme="light"] .kp-page { --kp-green: #15852a; }

.kp-page section[id] { scroll-margin-top: 84px; }

.kp-page h1,
.kp-page h2,
.kp-page h3,
.kp-page p { margin: 0; }

.kp-page h2 {
  max-width: 720px;
  font-size: clamp(2.15rem, 3.7vw, 3.55rem);
  line-height: 1;
  letter-spacing: -.052em;
}

.kp-page h3 { letter-spacing: -.025em; }
.kp-page p { color: var(--fg-dim); }

.kp-hero {
  position: relative;
  padding: 0;
  background: linear-gradient(180deg, #0a100c, var(--bg));
  border-bottom: 1px solid var(--line-soft);
}

html[data-theme="light"] .kp-hero {
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 96%, var(--kp-mint) 4%), var(--bg));
}

.kp-hero-grid {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(82px, 9vw, 140px) clamp(68px, 7vw, 108px);
  text-align: center;
}

.kp-hero-copy {
  position: relative;
  z-index: 1;
  width: min(100%, 940px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 17px;
  color: var(--kp-green);
  font: 800 11px/1 var(--ff-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kp-hero h1 {
  width: 100%;
  max-width: 940px;
  height: 2.82em;
  min-height: 2.82em;
  font-size: clamp(3.35rem, 6.2vw, 6.2rem);
  line-height: .9;
  letter-spacing: -.067em;
}

.kp-hero h1 em { color: var(--kp-green); font-style: normal; }

.kp-hero-rotating-line,
.kp-hero-static-line {
  width: 100%;
  height: .94em;
  min-height: .94em;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.kp-hero-rotating-line {
  --hero-line-scale: 1;
  transform: translateY(0) scale(var(--hero-line-scale));
  transform-origin: center;
  opacity: 1;
  filter: blur(0);
  will-change: opacity, transform, filter;
  transition:
    opacity .62s ease,
    transform .62s cubic-bezier(.22, 1, .36, 1),
    filter .62s ease;
}

.kp-hero-rotating-line.is-leaving {
  opacity: 0;
  transform: translateY(-.14em) scale(var(--hero-line-scale));
  filter: blur(5px);
}

.kp-hero-rotating-line.is-entering {
  animation: kp-hero-phrase-in .82s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes kp-hero-phrase-in {
  from {
    opacity: 0;
    transform: translateY(.14em) scale(var(--hero-line-scale));
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(var(--hero-line-scale));
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kp-hero-rotating-line {
    transition: none;
    animation: none !important;
    will-change: auto;
  }
}

.kp-hero-copy > p {
  max-width: 670px;
  margin-top: 28px;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.68;
}

.kp-hero-actions { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; width: min(100%, 562px); margin-top: 30px; }
.kp-hero-actions .kp-btn { flex: 0 1 276px; width: auto; }

.kp-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100%, 276px);
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  transition: transform .22s var(--ease-out), border-color .22s, background .22s;
}

.kp-btn:hover { transform: translateY(-2px); }
.kp-btn-primary { background: var(--kp-green-bright); border-color: var(--kp-green-bright); color: #061007; }
.kp-btn-primary:hover { background: var(--kp-green-dark); border-color: var(--kp-green-dark); color: #fff; }
.kp-btn-secondary { background: color-mix(in oklab, var(--bg-card) 90%, transparent); }
.kp-btn-secondary:hover { border-color: var(--kp-green); }
.kp-btn span { font-size: 17px; }

.kp-availability {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 17px;
  color: var(--fg-mute);
  font-size: 12px;
  font-weight: 700;
}

.kp-availability i { width: 6px; height: 6px; border-radius: 50%; background: var(--kp-green-bright); }

.kp-highlight-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: calc(100% - 56px);
  max-width: calc(var(--shell) - 56px);
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  background: color-mix(in oklab, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(18px);
}

.kp-highlight-bar > div {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
  border-right: 1px solid var(--line-soft);
}

.kp-highlight-bar > div:last-child { border-right: 0; }
.kp-highlight-bar span { color: var(--kp-green); font: 800 10px/1 var(--ff-mono); }
.kp-highlight-bar strong { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }

.kp-live-metrics {
  position: relative;
  z-index: 2;
  background: var(--bg);
}

.kp-live-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.kp-live-metrics-grid article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(28px, 3.5vw, 48px) clamp(16px, 2.5vw, 34px);
  border-right: 1px solid var(--line-soft);
}

.kp-live-metrics-grid article:last-child { border-right: 0; }

.kp-live-metrics-grid article > span {
  color: var(--kp-green);
  font: 800 10px/1 var(--ff-mono);
  letter-spacing: .12em;
}

.kp-live-metrics-grid strong {
  color: var(--fg);
  font-size: clamp(1.85rem, 3vw, 3.15rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .95;
  overflow-wrap: anywhere;
}

.kp-live-metrics-grid strong b {
  font: inherit;
}

.kp-live-metrics-grid strong i {
  color: var(--kp-green);
  font-style: normal;
}

.kp-live-metrics-grid strong i:last-child:not(:empty) {
  margin-left: .18em;
  font-size: .48em;
  letter-spacing: .04em;
  vertical-align: .12em;
}

.kp-live-metrics-grid small {
  color: var(--fg-mute);
  font: 700 10px/1.45 var(--ff-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kp-section { padding: clamp(78px, 8vw, 116px) 0; }
.kp-section-head { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr); gap: 46px; align-items: end; margin-bottom: 48px; }
.kp-section-head p { max-width: 520px; font-size: 16px; line-height: 1.68; }
.kp-kicker { margin-bottom: 15px; }

.kp-identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kp-identity-card {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border: 1px solid var(--line-soft);
  border-radius: 25px;
  background: var(--bg-card);
}

.kp-identity-card.is-primary {
  background: linear-gradient(145deg, #102b16, #050706);
  border-color: rgba(36,184,63,.36);
  color: #fff;
}

html[data-theme="light"] .kp-identity-card.is-primary { background: linear-gradient(145deg, #dff5e3, #f8fff9); color: #071109; }
.kp-card-number { margin-left: auto; color: var(--fg-mute); font: 700 10px/1 var(--ff-mono); }
.kp-identity-card img { width: 56px; height: 56px; margin: 32px 0 auto; border-radius: 15px; object-fit: contain; }
.kp-identity-card > span { margin-top: 25px; color: var(--kp-green); font: 800 10px/1 var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; }
.kp-identity-card h3 { margin-top: 8px; font-size: 25px; }
.kp-identity-card p { margin-top: 11px; font-size: 14px; line-height: 1.62; }

.kp-capabilities { background: color-mix(in oklab, var(--bg-elev) 72%, transparent); border-block: 1px solid var(--line-soft); }
.kp-capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kp-capability-grid article {
  min-height: 220px;
  padding: 25px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--bg-card);
  transition: transform .22s var(--ease-out), border-color .22s;
}

.kp-capability-grid article:hover { transform: translateY(-3px); border-color: rgba(36,184,63,.48); }
.kp-cap-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(36,184,63,.13); color: #67db7c; }
html[data-theme="light"] .kp-cap-mark { background: var(--kp-mint); color: var(--kp-green-dark); }
.kp-cap-mark svg { width: 24px; height: 24px; display: block; }
.kp-capability-grid h3 { margin-top: 38px; font-size: 20px; }
.kp-capability-grid p { margin-top: 10px; font-size: 14px; line-height: 1.6; }

.kp-flow-section h2 { margin-bottom: 46px; }
.kp-flow { display: grid; grid-template-columns: repeat(4, 1fr); }
.kp-flow article { position: relative; padding: 27px 28px 18px 0; border-top: 1px solid var(--line); }
.kp-flow article:not(:last-child)::after { content: "→"; position: absolute; right: 18px; top: -15px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); color: var(--kp-green); }
.kp-flow article > span { font: 800 11px/1 var(--ff-mono); color: var(--kp-green); }
.kp-flow h3 { margin-top: 22px; font-size: 19px; }
.kp-flow p { max-width: 250px; margin-top: 9px; font-size: 13px; line-height: 1.62; }

.kp-app-section { overflow: hidden; background: #050605; color: #fff; }
html[data-theme="light"] .kp-app-section { background: #050605; color: #fff; }
.kp-app-grid { min-height: 0; display: block; }
.kp-app-copy { max-width: 920px; }
.kp-app-brands { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.kp-app-brands > span { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 7px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: rgba(255,255,255,.84); font-size: 12px; font-weight: 800; }
.kp-app-brands img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.kp-app-copy h2 { max-width: 720px; color: #fff; font-size: clamp(2.65rem, 4.35vw, 4.25rem); }
.kp-app-copy > p { max-width: 760px; margin-top: 22px; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.68; }
.kp-app-copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 23px; margin: 28px 0 0; padding: 0; list-style: none; }
.kp-app-copy li { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.82); font-size: 14px; font-weight: 700; }
.kp-app-copy li span { color: #55d56c; }
.kp-store-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 31px; }
.kp-store-links a { min-width: 155px; display: inline-flex; align-items: center; gap: 11px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.06); }
.kp-store-links a > img { width: 25px; height: 25px; flex: 0 0 25px; object-fit: contain; }
.kp-store-links a > span { min-width: 0; }
.kp-store-links small,
.kp-store-links strong { display: block; }
.kp-store-links small { color: rgba(255,255,255,.5); font-size: 9px; }
.kp-store-links strong { margin-top: 2px; color: #fff; font-size: 14px; }

/* Oscuro por defecto; `data-theme` solo marca el claro. */
.kp-developer-section {
  --dev-ink: #eaf4ec;
  --dev-copy: rgba(234,244,236,.7);
  --dev-panel: #0d1a10;
  --dev-panel-line: rgba(104,224,126,.16);
  --dev-rail: rgba(104,224,126,.05);
  --dev-rail-ink: #9fb8a5;
  --dev-code: #d8e6db;
  --dev-chip-ink: #cfe3d4;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(104,224,126,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,224,126,.05) 1px, transparent 1px),
    radial-gradient(circle at 86% 12%, rgba(36,184,63,.16), transparent 29%),
    #060b07;
  background-size: 58px 58px, 58px 58px, auto, auto;
  border-block: 1px solid rgba(104,224,126,.14);
  color: var(--dev-ink);
}

html[data-theme="light"] .kp-developer-section {
  --dev-ink: #061008;
  --dev-copy: #3a4b3e;
  --dev-panel: #ffffff;
  --dev-panel-line: rgba(15,73,27,.12);
  --dev-rail: rgba(230,245,233,.68);
  --dev-rail-ink: #55715b;
  --dev-code: #102816;
  --dev-chip-ink: #607264;
  background:
    linear-gradient(rgba(17,95,32,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,95,32,.055) 1px, transparent 1px),
    radial-gradient(circle at 86% 12%, rgba(36,184,63,.2), transparent 29%),
    #eef8f0;
  background-size: 58px 58px, 58px 58px, auto, auto;
  border-block: 1px solid rgba(21,133,42,.18);
}

.kp-developer-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(510px, 1.28fr);
  gap: clamp(42px, 5.5vw, 78px);
  align-items: center;
}

.kp-developer-copy { min-width: 0; }
.kp-developer-copy .kp-kicker { color: var(--kp-green); }
.kp-developer-copy h2 {
  max-width: 620px;
  color: var(--dev-ink);
  text-wrap: balance;
}
.kp-developer-copy > p {
  max-width: 540px;
  margin-top: 22px;
  color: var(--dev-copy);
  font-size: 16px;
  line-height: 1.72;
}

.kp-developer-copy ul {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.kp-developer-copy li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dev-ink);
  font-size: 14px;
  font-weight: 700;
}

.kp-developer-copy li span { color: var(--kp-green); }

.kp-developer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.kp-developer-actions .kp-btn {
  width: auto;
  min-width: 176px;
}

.kp-developer-actions .kp-btn-secondary {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: var(--dev-ink);
}

.kp-developer-actions .kp-btn-secondary:hover {
  border-color: rgba(104,224,126,.6);
  background: rgba(255,255,255,.1);
}

html[data-theme="light"] .kp-developer-actions .kp-btn-secondary {
  border-color: rgba(6,16,8,.2);
  background: rgba(255,255,255,.58);
}

html[data-theme="light"] .kp-developer-actions .kp-btn-secondary:hover {
  border-color: rgba(21,133,42,.62);
  background: #fff;
}

.kp-api-workspace {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dev-panel-line);
  border-radius: 28px;
  background: var(--dev-panel);
  box-shadow: 0 34px 80px rgba(2,10,4,.4);
}

html[data-theme="light"] .kp-api-workspace {
  background: rgba(255,255,255,.86);
  box-shadow: 0 34px 80px rgba(12,81,25,.14);
}

.kp-api-workspace-head,
.kp-api-workspace-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  font: 800 9px/1.2 var(--ff-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.kp-api-workspace-head {
  border-bottom: 1px solid var(--dev-panel-line);
  color: var(--dev-rail-ink);
}

.kp-api-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #1db63a;
  color: #051007;
  font: 900 12px/1 var(--ff-mono);
}

.kp-api-workspace-head > strong { margin-right: auto; color: var(--dev-ink); }
.kp-api-workspace-head > small { display: inline-flex; align-items: center; gap: 7px; font: inherit; color: var(--kp-green); }
.kp-api-workspace-head > small i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #21be43;
  box-shadow: 0 0 0 5px rgba(33,190,67,.12);
}

.kp-api-workspace-body {
  display: grid;
  grid-template-columns: minmax(215px, .82fr) minmax(280px, 1.18fr);
  min-height: 390px;
}

.kp-api-endpoints { padding: 24px 18px; border-right: 1px solid var(--dev-panel-line); background: var(--dev-rail); }
.kp-api-endpoints > span { display: block; margin: 0 7px 12px; color: var(--dev-rail-ink); font: 800 9px/1 var(--ff-mono); letter-spacing: .13em; }

.kp-api-endpoint {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 13px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.kp-api-endpoint + .kp-api-endpoint { margin-top: 7px; }
.kp-api-endpoint:hover { background: rgba(255,255,255,.07); }
html[data-theme="light"] .kp-api-endpoint:hover { background: rgba(255,255,255,.6); }
.kp-api-endpoint.is-active { border-color: rgba(104,224,126,.3); background: rgba(104,224,126,.11); box-shadow: none; }
html[data-theme="light"] .kp-api-endpoint.is-active { border-color: rgba(21,133,42,.2); background: #fff; box-shadow: 0 10px 24px rgba(21,133,42,.08); }
.kp-api-endpoint:focus-visible { outline: 2px solid #15852a; outline-offset: 2px; }
.kp-api-endpoint > b { padding: 6px 5px; border-radius: 7px; color: #fff; background: #168c2d; font: 900 8px/1 var(--ff-mono); text-align: center; }
.kp-api-endpoint > b.is-get { background: #1677c8; }
.kp-api-endpoint > span { min-width: 0; }
.kp-api-endpoint code { display: block; overflow: hidden; color: var(--dev-code); font: 700 9px/1.3 var(--ff-mono); text-overflow: ellipsis; white-space: nowrap; }
.kp-api-endpoint small { display: block; margin-top: 5px; color: var(--dev-chip-ink); font-size: 9.5px; line-height: 1.25; }

.kp-api-console {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #07160b;
  color: #f2f8f3;
}

.kp-api-pane { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.kp-api-pane[hidden] { display: none; }

.kp-api-block { min-width: 0; display: flex; flex-direction: column; }
.kp-api-block + .kp-api-block { border-top: 1px solid rgba(255,255,255,.09); }
.kp-api-block.is-response { flex: 1; background: #050f08; }

.kp-api-block > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  color: #8ba491;
  font: 800 8.5px/1 var(--ff-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kp-api-block > header b { font: inherit; }
.kp-api-block > header b.is-ok { color: #66e07d; }
.kp-api-block > header b.is-event { color: #7cc5f5; }

.kp-api-copy {
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: transparent;
  color: #a8baac;
  font: inherit;
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.kp-api-copy:hover { color: #e9f5eb; border-color: rgba(255,255,255,.4); }
.kp-api-copy.is-copied { color: #66e07d; border-color: rgba(102,224,125,.5); }
.kp-api-copy:focus-visible { outline: 2px solid #66e07d; outline-offset: 2px; }

.kp-api-block pre {
  margin: 0;
  padding: 0 18px 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kp-api-block code {
  display: block;
  color: #cfe0d4;
  font: 500 11px/1.62 var(--ff-mono);
  white-space: pre;
  tab-size: 2;
}

.kp-api-block .tk-key { color: #7cc5f5; }
.kp-api-block .tk-str { color: #9fe6ad; }
.kp-api-block .tk-num { color: #ffcf8b; }
.kp-api-block .tk-bool { color: #f19bd6; }

.kp-api-workspace-foot {
  justify-content: space-between;
  border-top: 1px solid var(--dev-panel-line);
  color: var(--dev-rail-ink);
}

.kp-api-workspace-foot a { color: var(--kp-green); }
.kp-api-workspace-foot a:hover { opacity: .78; }

.kp-store-section { border-block: 1px solid var(--line-soft); background: color-mix(in oklab, var(--bg-elev) 70%, transparent); }
.kp-inline-link { display: inline-block; margin-top: 15px; color: var(--kp-green); font-weight: 900; }
.kp-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kp-product-card { min-width: 0; min-height: 295px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-card); transition: transform .22s var(--ease-out), border-color .22s; }
.kp-product-card:hover { transform: translateY(-4px); border-color: rgba(36,184,63,.56); }
/* Las imágenes llegan del catálogo de KeyPay con proporciones distintas:
   se centran y se contienen para que ninguna quede recortada. */
/* El catálogo de KeyPay entrega todas las imágenes en 2:1, así que el marco
   adopta esa misma proporción: la imagen llena la tarjeta de borde a borde
   sin recorte ni deformación, y la altura se adapta al ancho de la columna.
   El fondo solo se ve si una imagen no llega (`.is-empty`).
   El tema oscuro es el predeterminado; `data-theme` solo marca el claro. */
.kp-product-image {
  aspect-ratio: 2 / 1;
  height: auto;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), transparent 68%),
    #112315;
}
html[data-theme="light"] .kp-product-image {
  background:
    radial-gradient(circle at 50% 42%, #fff, transparent 68%),
    var(--kp-mint);
}
.kp-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease-out);
}
.kp-product-card:hover img { transform: scale(1.035); }
.kp-product-card > div:last-child { flex: 1; display: flex; flex-direction: column; padding: 14px 15px 15px; }
.kp-product-card span { color: var(--kp-green); font: 800 9px/1 var(--ff-mono); letter-spacing: .12em; }
.kp-product-card h3 { min-height: 36px; margin-top: 7px; display: -webkit-box; overflow: hidden; font-size: 15px; line-height: 1.18; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.kp-product-card p { margin-top: 7px; display: -webkit-box; overflow: hidden; font-size: 11.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.kp-product-card b { display: block; margin-top: auto; padding-top: 13px; font-size: 10.5px; }

.kp-trust-section { background: #071109; color: #fff; }
html[data-theme="light"] .kp-trust-section { background: #071109; color: #fff; }
.kp-trust-section .kp-section-head p { color: rgba(255,255,255,.58); }
.kp-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; overflow: hidden; }
.kp-trust-grid article { min-height: 220px; padding: 25px; border-right: 1px solid rgba(255,255,255,.12); }
.kp-trust-grid article:last-child { border-right: 0; }
.kp-trust-grid article > span { color: #58d970; font: 800 10px/1 var(--ff-mono); }
.kp-trust-grid h3 { margin-top: 52px; font-size: 18px; }
.kp-trust-grid p { margin-top: 10px; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.62; }
.kp-policy-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.kp-policy-links a { padding: 9px 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: rgba(255,255,255,.76); font-size: 11px; font-weight: 800; }

.kp-final-section { padding-bottom: 0; }
.kp-final-card {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  gap: 34px;
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 30px;
  background: linear-gradient(135deg, #36c451, #1aa239);
  color: #041006;
  box-shadow: 0 28px 60px rgba(21,133,42,.18);
}

.kp-final-brand { display: flex; align-items: center; gap: 12px; }
.kp-final-brand img { width: 62px; height: 62px; border-radius: 18px; box-shadow: 0 16px 30px rgba(0,0,0,.16); }
.kp-final-brand span { display: none; font-size: 23px; font-weight: 900; }
.kp-final-card h2 { font-size: clamp(2rem, 3.5vw, 3.35rem); }
.kp-final-card p { max-width: 590px; margin-top: 10px; color: rgba(4,16,6,.68); font-size: 15px; line-height: 1.6; }
.kp-final-actions { display: grid; gap: 9px; }
.kp-btn-dark { background: #050706; border-color: #050706; color: #fff; }
.kp-btn-light { background: rgba(255,255,255,.82); border-color: rgba(255,255,255,.9); color: #071109; }

html[data-theme="light"] .kp-home-route .kp-final-actions .kp-btn-light {
  background: #f2f5f2;
  border-color: rgba(4,16,6,.24);
  color: #071109;
}

.kp-faq-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(48px, 8vw, 110px); align-items: start; }
.kp-operator-note { max-width: 420px; margin-top: 25px !important; padding-left: 16px; border-left: 2px solid var(--kp-green); font-size: 14px; line-height: 1.65; }
.kp-faq-list { border-top: 1px solid var(--line); }
.kp-faq-list details { border-bottom: 1px solid var(--line); }
.kp-faq-list summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 800; }
.kp-faq-list summary::-webkit-details-marker { display: none; }
.kp-faq-list summary span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--kp-green); transition: transform .22s; }
.kp-faq-list details[open] summary span { transform: rotate(45deg); }
.kp-faq-list details p { max-width: 700px; padding: 0 48px 24px 0; font-size: 14px; line-height: 1.65; }

.kp-home-route {
  --kp-lower-bg: #24b83f;
  --kp-lower-paper: #050706;
  --kp-lower-ink: #f7fbf8;
  --kp-lower-copy: rgba(247,251,248,.72);
  --kp-lower-line: rgba(255,255,255,.16);
  --kp-lower-card: rgba(255,255,255,.055);
  background: var(--kp-lower-paper);
}

html[data-theme="light"] .kp-home-route {
  --kp-lower-paper: #ffffff;
  --kp-lower-ink: #041006;
  --kp-lower-copy: #123017;
  --kp-lower-line: rgba(4,16,6,.16);
  --kp-lower-card: rgba(255,255,255,.68);
}

.kp-home-route .kp-trust-section,
.kp-home-route .kp-final-section,
.kp-home-route .kp-faq-section,
.kp-home-route .support-section {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  background: var(--kp-lower-paper) !important;
  color: var(--kp-lower-ink);
  border-color: transparent;
  box-shadow: none !important;
}

.kp-home-route .kp-trust-section {
  margin-top: 0;
  border-radius: 0;
}

.kp-home-route .site-footer .footer-grid {
  gap: clamp(22px, 2.4vw, 34px);
  padding-bottom: 24px;
}

.kp-home-route .site-footer .footer-col h4 { margin-bottom: 10px; }
.kp-home-route .site-footer .footer-col a { padding-block: 4px; }
.kp-home-route .site-footer .footer-disclaimer { padding-block: 15px; }
.kp-home-route .site-footer .footer-bottom { padding-top: 16px; }

.kp-home-route .kp-trust-section .kp-section-head p,
.kp-home-route .kp-trust-grid p,
.kp-home-route .kp-faq-list details p,
.kp-home-route .support-section .section-text,
.kp-home-route .support-card p { color: var(--kp-lower-copy); }

.kp-home-route .kp-trust-section h2,
.kp-home-route .kp-trust-grid h3 { color: var(--kp-lower-ink); }

.kp-home-route .kp-trust-grid { border-color: var(--kp-lower-line); background: rgba(255,255,255,.2); }
.kp-home-route .kp-trust-grid article { border-color: var(--kp-lower-line); }
.kp-home-route .kp-trust-grid article > span,
.kp-home-route .kp-trust-section .kp-kicker,
.kp-home-route .kp-faq-section .kp-kicker { color: var(--kp-lower-ink); }
.kp-home-route .kp-policy-links a { border-color: var(--kp-lower-line); color: var(--kp-lower-ink); }
.kp-home-route .kp-final-card { border: 1px solid var(--kp-lower-line); background: var(--kp-lower-card); box-shadow: none; }
.kp-home-route .kp-faq-list,
.kp-home-route .kp-faq-list details { border-color: var(--kp-lower-line); }
.kp-home-route .kp-faq-list summary span { border-color: var(--kp-lower-line); color: var(--kp-lower-ink); }
.kp-home-route .support-section-head h2,
.kp-home-route .support-section .section-tag { color: var(--kp-lower-ink); }
.kp-home-route .support-card { border-color: var(--kp-lower-line); background: var(--kp-lower-card); color: var(--kp-lower-ink); }
.kp-home-route .support-social-ico { color: var(--kp-lower-ink); box-shadow: 0 0 0 1px rgba(4,16,6,.12); }
.kp-home-route .support-grid.support-grid-social { gap: 10px; }
.kp-home-route .support-grid-social .support-card {
  min-height: 76px;
  flex-direction: row;
  justify-content: flex-start;
  padding: 11px 13px;
  border-radius: 16px;
  text-align: left;
}
.kp-home-route .support-social-main { gap: 11px; }
.kp-home-route .support-social-ico {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 11px;
}
.kp-home-route .support-social-ico img { width: 20px; height: 20px; }
.kp-home-route .support-grid-social .support-card h3 {
  margin-bottom: 3px;
  color: var(--kp-lower-ink);
  font-size: 14px;
}
.kp-home-route .support-grid-social .support-card small {
  max-width: none;
  color: var(--kp-lower-copy);
  font-size: 10px;
}
.kp-home-route .support-card-link,
.kp-home-route .support-card:hover .support-card-link { color: var(--kp-lower-ink); }
.kp-home-route .kp-policy-links a:focus-visible,
.kp-home-route .kp-faq-list summary:focus-visible,
.kp-home-route .support-card:focus-visible {
  outline: 3px solid var(--kp-lower-ink);
  outline-offset: 3px;
}

.footer-brand-links a:focus-visible,
.footer-col a:focus-visible,
.footer-bottom a:focus-visible,
.site-footer .footer-social-icon:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .kp-identity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-capability-grid { grid-template-columns: repeat(2, 1fr); }
  .kp-flow { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .kp-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kp-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .kp-trust-grid article:nth-child(2) { border-right: 0; }
  .kp-trust-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
  .kp-final-card { grid-template-columns: auto 1fr; }
  .kp-final-actions { grid-column: 1 / -1; display: flex; }
}

@media (max-width: 960px) {
  .kp-developer-grid { grid-template-columns: 1fr; gap: 42px; }
  .kp-developer-copy > p { max-width: 650px; }
}

@media (max-width: 860px) {
  .kp-section-head,
  .kp-faq-grid { grid-template-columns: 1fr; }
  .kp-highlight-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-highlight-bar > div:nth-child(2) { border-right: 0; }
  .kp-highlight-bar > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .kp-section-head { gap: 20px; }
}

@media (max-width: 620px) {
  .kp-page h2 { font-size: clamp(2.2rem, 10.8vw, 2.95rem); }
  .kp-hero-grid { padding-block: 68px 58px; }
  .kp-hero h1 { font-size: clamp(2.85rem, 13.2vw, 4rem); }
  .kp-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 370px); gap: 8px; }
  .kp-hero-actions .kp-btn { width: 100%; min-width: 0; min-height: 50px; gap: 7px; padding-inline: 12px; font-size: 11px; line-height: 1.15; }
  .kp-hero-actions .kp-btn span { flex: 0 0 auto; font-size: 14px; }
  .kp-btn { width: 100%; max-width: 330px; }
  .kp-highlight-bar { width: calc(100% - 32px); margin: 48px auto 0; padding: 0; }
  .kp-highlight-bar > div { min-height: 82px; padding: 17px; }
  .kp-highlight-bar strong { font-size: 12px; }
  .kp-section { padding: 74px 0; }
  .kp-identity-grid,
  .kp-capability-grid,
  .kp-flow,
  .kp-trust-grid { grid-template-columns: 1fr; }
  .kp-identity-card { min-height: 290px; }
  .kp-capability-grid article { min-height: 195px; }
  .kp-capability-grid h3 { margin-top: 30px; }
  .kp-flow article:not(:last-child)::after { display: none; }
  .kp-flow article { padding-right: 0; }
  .kp-app-copy ul { grid-template-columns: 1fr; }
  .kp-developer-grid { gap: 32px; }
  .kp-developer-copy > p { margin-top: 18px; font-size: 14px; }
  .kp-developer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 24px;
  }
  .kp-developer-actions .kp-btn {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 50px;
    gap: 7px;
    padding-inline: 13px;
    font-size: 11px;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
  }
  .kp-developer-actions .kp-btn span { flex: 0 0 auto; }
  .kp-api-workspace { border-radius: 20px; }
  .kp-api-workspace-head,
  .kp-api-workspace-foot { padding: 13px 14px; }
  .kp-api-workspace-body { grid-template-columns: 1fr; min-height: 0; }
  .kp-api-endpoints {
    padding: 16px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--dev-panel-line);
  }
  /* En móvil los endpoints pasan a ser una fila deslizable de pastillas. */
  .kp-api-endpoints {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kp-api-endpoints::-webkit-scrollbar { display: none; }
  .kp-api-endpoints > span { display: none; }
  .kp-api-endpoint,
  .kp-api-endpoint + .kp-api-endpoint {
    width: auto;
    flex: 0 0 auto;
    margin-top: 0;
    padding: 9px 12px;
    border-radius: 999px;
  }
  .kp-api-endpoint small { display: none; }
  .kp-api-endpoint code { font-size: 9.5px; }
  .kp-api-block > header { padding: 11px 14px; }
  .kp-api-block pre { padding: 0 14px 14px; }
  .kp-api-block code { font-size: 10px; line-height: 1.55; }
  .kp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kp-product-card { min-height: 260px; border-radius: 15px; }
  .kp-product-card > div:last-child { padding: 11px 10px 12px; }
  .kp-product-card span { font-size: 7.5px; }
  .kp-product-card h3 { min-height: 32px; font-size: 13px; }
  .kp-product-card p { font-size: 10px; -webkit-line-clamp: 3; }
  .kp-product-card b { padding-top: 10px; font-size: 9px; }
  .kp-trust-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .kp-trust-grid article:last-child { border-bottom: 0; }
  .kp-trust-grid article:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.12); }
  .kp-final-section { padding: 50px 0 44px; }
  .kp-final-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 20px;
    border-radius: 24px;
    text-align: left;
  }
  .kp-final-brand { gap: 9px; }
  .kp-final-brand img { width: 46px; height: 46px; border-radius: 13px; }
  .kp-final-brand span { display: block; font-size: 17px; }
  .kp-final-card h2 { font-size: clamp(2rem, 10vw, 2.7rem); line-height: .98; }
  .kp-final-card p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; }
  .kp-final-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .kp-final-actions .kp-btn {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 50px;
    gap: 7px;
    padding-inline: 13px;
    font-size: 11px;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
  }
  .kp-final-actions .kp-btn span { flex: 0 0 auto; }
  .kp-faq-list summary { font-size: 15px; }
  .kp-home-route .kp-trust-section,
  .kp-home-route .kp-final-section,
  .kp-home-route .kp-faq-section,
  .kp-home-route .support-section,
  .kp-home-route .site-footer { margin-inline: 0; }
  .kp-home-route .kp-trust-section { border-radius: 24px 24px 0 0; }
  .kp-home-route .site-footer {
    margin-bottom: 0;
    border-radius: 0;
    padding-top: 68px;
    padding-bottom: 16px;
  }
  .kp-home-route .footer-grid { grid-template-columns: 1fr; }
  .kp-home-route .support-grid.support-grid-social { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-home-route .support-grid-social .support-card { min-height: 72px; padding: 9px 10px; }
  .kp-home-route .support-social-main { gap: 9px; }
  .kp-home-route .support-social-ico { width: 34px; height: 34px; flex-basis: 34px; }
  .kp-home-route .support-grid-social .support-card h3 { font-size: 12px; }
  .kp-home-route .support-grid-social .support-card small { font-size: 8.5px; }
  .kp-live-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-live-metrics-grid article { min-height: 122px; border-bottom: 1px solid var(--line-soft); }
  .kp-live-metrics-grid article:nth-child(even) { border-right: 0; }
  .kp-live-metrics-grid article:nth-last-child(-n+2) { border-bottom: 0; }
}

/* iOS Safari: keep lower sections ready while momentum scrolling. */
@media (max-width: 760px) {
  .kp-home-route .ambient {
    position: absolute;
    inset: 0 0 auto;
    height: 100svh;
  }

  .kp-home-route .ambient-glow { display: none; }

  .kp-home-route .ambient-grid {
    mask-image: none;
    -webkit-mask-image: none;
    opacity: .28;
  }

  .kp-home-route .site-header {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .kp-home-route .kp-highlight-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html.js .kp-home-route .reveal,
  html.js .kp-home-route .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 390px) {
  .kp-hero h1 { font-size: clamp(2.4rem, 10.5vw, 2.6rem); line-height: .95; }
  .kp-highlight-bar { grid-template-columns: 1fr; }
  .kp-highlight-bar > div { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .kp-highlight-bar > div:last-child { border-bottom: 0; }
}

@media (max-width: 360px) {
  .kp-developer-actions .kp-btn,
  .kp-final-actions .kp-btn {
    min-height: 48px;
    padding-inline: 10px;
    font-size: 10px;
  }
  .kp-home-route .support-grid.support-grid-social { grid-template-columns: 1fr; }
  .kp-home-route .support-grid-social .support-card { min-height: 66px; }
  .kp-product-grid { gap: 6px; }
  .kp-product-card { min-height: 246px; }
  .kp-product-card > div:last-child { padding-inline: 9px; }
  .kp-product-card h3 { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .kp-btn,
  .kp-capability-grid article,
  .kp-product-card,
  .kp-product-card img { transition: none; }
}

/* =========================================================
   Separadores suaves
   Las reglas de 1px a todo lo ancho cortaban la página en
   seco. Se sustituyen por un degradado que nace y muere en
   transparente: la división se insinúa en vez de partir la
   pantalla de lado a lado.
   ========================================================= */
.kp-page {
  --kp-rule: linear-gradient(90deg, transparent, var(--line-soft) 14%, var(--line-soft) 86%, transparent);
  --kp-rule-v: linear-gradient(180deg, transparent, var(--line-soft) 20%, var(--line-soft) 80%, transparent);
}

.kp-hero,
.kp-live-metrics-grid,
.kp-capabilities,
.kp-store-section,
.kp-flow article,
.kp-faq-list,
.kp-faq-list details {
  border-image: var(--kp-rule) 1;
}

/* Reglas verticales entre celdas: el mismo degradado, girado.
   Solo en elementos con un único borde: `border-image` anula
   `border-radius`, así que las tarjetas quedan fuera. */
.kp-live-metrics-grid article,
.kp-highlight-bar > div {
  border-image: var(--kp-rule-v) 1;
}

/* Las bandas semitransparentes dejaban ver la retícula del fondo justo
   donde se apoya el texto. Se opacan para que el contenido mande. */
.kp-capabilities {
  background: color-mix(in oklab, var(--bg-elev) 94%, transparent);
}

.kp-store-section {
  background: color-mix(in oklab, var(--bg-elev) 92%, transparent);
}

/* El degradado del borde no aplica a la barra de titulares, que es una
   tarjeta redondeada: ahí basta con suavizar el color. */
@media (max-width: 390px) {
  .kp-highlight-bar > div { border-image: var(--kp-rule) 1; }
}