/* KP Server — corporativo luminoso */
:root {
  --kps-ink: #0f172a;
  --kps-muted: #64748b;
  --kps-line: #e2e8f0;
  --kps-brand: #0ea5e9;
  --kps-brand-deep: #0369a1;
}
html { scroll-behavior: smooth; }
body {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  color: var(--kps-ink);
}
.kps-container { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.kps-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kps-brand-deep);
}
.kps-logo-mark {
  width: 2.35rem; height: 2.35rem; border-radius: .7rem;
  background: linear-gradient(145deg, #22d3ee, #0284c7); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex-shrink: 0;
}

/* Nav */
.kps-nav a {
  color: #475569; font-weight: 600; font-size: .82rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .2rem; transition: color .15s ease;
}
.kps-nav a:hover { color: #0891b2; }
.kps-nav a[aria-current="page"] { color: #0e7490; }
@media (max-width: 1279px) {
  .kps-nav.is-open {
    display: flex !important; flex-direction: column; align-items: stretch;
    position: absolute; left: 1rem; right: 1rem; top: 4.5rem; z-index: 60;
    padding: .75rem; gap: .15rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
    box-shadow: 0 20px 40px -20px rgba(15,23,42,.25);
  }
  .kps-nav.is-open a { padding: .75rem .85rem; border-radius: .65rem; }
  .kps-nav.is-open a:hover { background: #f0f9ff; }
}

/* Cards luminosas */
.kps-card-lite {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 1.15rem;
  padding: 1.5rem;
  box-shadow: 0 12px 30px -16px rgba(148, 163, 184, .45);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kps-card-lite:hover {
  transform: translateY(-3px);
  border-color: #bae6fd;
  box-shadow: 0 18px 36px -16px rgba(14, 165, 233, .28);
}
.kps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.25rem; border-radius: .85rem; font-weight: 700; font-size: .92rem;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.kps-btn:hover { transform: translateY(-1px); }
.kps-btn--primary {
  background: #0891b2; color: #fff;
  box-shadow: 0 10px 20px -10px rgba(8,145,178,.55);
}
.kps-btn--primary:hover { background: #0e7490; }
.kps-btn--ghost {
  background: #fff; color: #0f172a; border: 1px solid #e2e8f0;
}
.kps-btn--ghost:hover { border-color: #94a3b8; }

/* Hero slider — gris elegante */
.kps-hero-slider {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 90% 10%, rgba(14,165,233,.12), transparent 55%),
    linear-gradient(145deg, #f8fafc 0%, #e2e8f0 48%, #f1f5f9 100%);
  color: #0f172a; overflow: hidden;
  border-bottom: 1px solid #e2e8f0;
}
.kps-hero-slider__inner { position: relative; min-height: 26rem; }
@media (min-width: 960px) { .kps-hero-slider__inner { min-height: 24rem; } }
.kps-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .85s ease;
}
.kps-slide.is-active { opacity: 1; pointer-events: auto; }
.kps-slide__grid {
  display: grid; gap: 1.5rem; width: 100%; align-items: center;
}
@media (min-width: 960px) {
  .kps-slide__grid { grid-template-columns: 1.05fr .95fr; gap: 2.5rem; }
}
.kps-slide__tag {
  display: inline-block; font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .5rem;
}
.kps-slide__title {
  font-size: clamp(1.65rem, 3.5vw, 2.75rem); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.12; color: #0f172a; margin: 0 0 .85rem;
}
.kps-slide__lead {
  color: #475569; font-size: 1.02rem; line-height: 1.6; max-width: 34rem; margin: 0 0 1.25rem;
}
.kps-dot {
  width: 2.5rem; height: .5rem; border-radius: 999px; border: 0; cursor: pointer;
  background: #cbd5e1; transition: all .25s ease;
}
.kps-dot.is-active { width: 3rem; background: #0891b2; }

/* Paneles de visualización */
.kps-viz {
  position: relative; border-radius: 1.15rem; overflow: hidden;
  background: #fff; border: 1px solid #e2e8f0;
  box-shadow: 0 20px 40px -24px rgba(100,116,139,.45);
  min-height: 16.5rem;
}
.kps-viz--static img {
  width: 100%; height: 100%; min-height: 16.5rem; object-fit: cover; display: block;
}
.kps-viz__bar {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem .85rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem;
}
.kps-viz__dots { display: flex; gap: .3rem; }
.kps-viz__dots i {
  width: .55rem; height: .55rem; border-radius: 999px; background: #cbd5e1; display: block;
}
.kps-viz__dots i:nth-child(1) { background: #fda4af; }
.kps-viz__dots i:nth-child(2) { background: #fcd34d; }
.kps-viz__dots i:nth-child(3) { background: #6ee7b7; }
.kps-viz__url { flex: 1; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kps-viz__status {
  font-weight: 800; padding: .15rem .45rem; border-radius: .4rem;
  background: #f1f5f9; color: #64748b;
}
.kps-viz__status.is-ok { background: #d1fae5; color: #047857; }
.kps-viz__status.is-run { background: #e0f2fe; color: #0369a1; }
.kps-viz__body { padding: .85rem 1rem 1rem; }
.kps-probe-log {
  font-family: ui-monospace, Menlo, monospace; font-size: .72rem; line-height: 1.55;
  color: #475569; min-height: 5.2rem; white-space: pre-wrap;
}
.kps-probe-log .ok { color: #059669; font-weight: 700; }
.kps-probe-log .info { color: #0284c7; }
.kps-probe-log .dim { color: #94a3b8; }
.kps-probe-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-top: .75rem;
}
.kps-metric {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .65rem; padding: .45rem .5rem;
}
.kps-metric span { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; font-weight: 700; }
.kps-metric strong { font-size: .9rem; color: #0f172a; font-weight: 800; }
.kps-probe-bar {
  margin-top: .75rem; height: .35rem; border-radius: 999px; background: #e2e8f0; overflow: hidden;
}
.kps-probe-bar i {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #0284c7);
  transition: width .35s ease;
}

/* Mail pipeline */
.kps-viz--mail { padding: 1rem 1rem 1.15rem; }
.kps-mail-steps {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem;
}
.kps-mail-steps li {
  display: flex; align-items: center; gap: .65rem;
  padding: .45rem .65rem; border-radius: .65rem;
  border: 1px solid #e2e8f0; background: #f8fafc;
  font-size: .8rem; font-weight: 650; color: #94a3b8;
  transition: all .3s ease;
}
.kps-mail-steps li i { width: 1.1rem; text-align: center; }
.kps-mail-steps li.is-active {
  border-color: #7dd3fc; background: #f0f9ff; color: #0c4a6e;
  box-shadow: 0 0 0 3px rgba(14,165,233,.12);
  transform: translateX(4px);
}
.kps-mail-steps li.is-done {
  border-color: #a7f3d0; background: #ecfdf5; color: #047857;
}
.kps-mail-packet {
  position: absolute; right: 1rem; top: 1rem;
  width: 2.4rem; height: 2.4rem; border-radius: .7rem;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #38bdf8, #0284c7); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(2,132,199,.55);
  opacity: 0; transform: scale(.7);
  transition: opacity .25s ease, transform .35s ease;
}
.kps-mail-packet.is-on { opacity: 1; transform: scale(1); animation: kps-packet-pulse 1.2s ease infinite; }
@keyframes kps-packet-pulse {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.06) translateY(-3px); }
}
.kps-mail-caption {
  margin: .75rem 0 0; font-size: .75rem; font-weight: 650; color: #64748b;
  font-family: ui-monospace, Menlo, monospace;
}

/* Imágenes con efecto */
.kps-img-fx {
  position: relative; overflow: hidden; border-radius: 1.15rem;
  border: 1px solid #f1f5f9;
  box-shadow: 0 18px 36px -18px rgba(100,116,139,.4);
  background: #e2e8f0;
}
.kps-img-fx::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(14,165,233,.12), transparent 45%, rgba(15,23,42,.08));
  mix-blend-mode: soft-light;
}
.kps-img-fx img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform 1.1s ease;
  animation: kps-kenburns 18s ease-in-out infinite alternate;
}
.kps-img-fx:hover img { transform: scale(1.08); animation-play-state: paused; }
@keyframes kps-kenburns {
  from { transform: scale(1.02) translate(0, 0); }
  to { transform: scale(1.08) translate(-1.5%, -1%); }
}

/* Aparición al scroll */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible {
  opacity: 1; transform: none;
}
[data-reveal] .kps-img-fx {
  transition: opacity .8s ease .12s, transform .8s ease .12s;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .kps-img-fx img { animation: none; }
  .kps-mail-packet.is-on { animation: none; }
}

/* Jump strip */
.kps-jump a {
  text-decoration: none;
}

/* Tech marquee */
.kps-tech-track {
  display: flex; gap: 1rem; width: max-content;
  animation: kps-marquee 42s linear infinite;
}
.kps-tech-track:hover { animation-play-state: paused; }
@keyframes kps-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.kps-tech-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  white-space: nowrap; background: #fff; border: 1px solid #e2e8f0;
  border-radius: .85rem; padding: .65rem 1rem; font-size: .82rem; font-weight: 650;
  color: #334155; box-shadow: 0 4px 12px -8px rgba(15,23,42,.2);
}

/* Sections interiores */
.kps-section { padding: 4.25rem 0; }
.kps-section--muted { background: #f8fafc; border-block: 1px solid #e2e8f0; }
.kps-feature-list { list-style: none; padding: 0; margin: 0; }
.kps-feature-list li {
  position: relative; padding-left: 1.6rem; margin-bottom: .85rem;
  color: #475569; line-height: 1.55; font-size: .95rem;
}
.kps-feature-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: #0891b2; font-weight: 800;
}

/* Form snippet */
.kps-form-slot {
  min-height: 14rem; border: 1px dashed #94a3b8; border-radius: 1rem;
  background: #f8fafc; display: grid; place-items: center; padding: 1.5rem;
  text-align: center; color: var(--kps-muted);
}
.kps-form-slot code {
  display: inline-block; margin-top: .5rem; font-size: .75rem;
  background: #e2e8f0; color: #0f172a; padding: .25rem .55rem; border-radius: .4rem;
}

/* Timeline (empresa) */
.kps-timeline { position: relative; padding-left: 1.5rem; }
.kps-timeline::before {
  content: ""; position: absolute; left: .35rem; top: .25rem; bottom: .25rem; width: 2px; background: #cbd5e1;
}
.kps-timeline__item { position: relative; padding: 0 0 2rem 1.25rem; }
.kps-timeline__item::before {
  content: ""; position: absolute; left: -1.22rem; top: .35rem; width: .75rem; height: .75rem;
  border-radius: 999px; background: #fff; border: 2px solid var(--kps-brand);
}
.kps-timeline__year {
  font-size: 1.05rem; font-weight: 800; color: var(--kps-brand-deep);
}
.font-display { font-weight: 800; letter-spacing: -0.02em; }

@media (min-width: 900px) {
  .kps-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
  .kps-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .kps-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
@media (max-width: 899px) {
  .kps-grid-3, .kps-grid-2 { display: grid; gap: 1rem; }
  .kps-section { padding: 3rem 0; }
}