/* ==========================================================================
   XKEMA Base (Design tokens + reusable components)
   ========================================================================== */

:root{
  /* Brand */
  --xk-primary: #0d6efd;
  --xk-primary-600: #0b5ed7;
  --xk-dark: #0b1e2d;
  --xk-ink: #111827;

  /* Neutrals */
  --xk-bg: #ffffff;
  --xk-surface: #ffffff;
  --xk-surface-2: #f9fafb;
  --xk-soft: #f4f6fb;
  --xk-border: #e5e7eb;
  --xk-border-2: #d1d5db;

  /* Text */
  --xk-muted: #6b7280;
  --xk-muted-2: #4b5563;

  /* Radius */
  --xk-r-sm: .75rem;
  --xk-r-md: 1rem;
  --xk-r-lg: 1.25rem;
  --xk-r-pill: 999px;

  /* Shadows */
  --xk-shadow-sm: 0 10px 28px rgba(0,0,0,0.08);
  --xk-shadow-md: 0 14px 40px rgba(15,23,42,0.10);
  --xk-shadow-lg: 0 20px 50px rgba(0,0,0,0.60);

  /* Motion */
  --xk-ease: .16s ease-out;
}

/* Base */
html{ scroll-behavior:smooth; }

body{
  background: var(--xk-bg);
  color: var(--xk-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Optional: si quieres Montserrat solo para headings */
.xk-font-headings,
.section-title,
.hero-title{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Typography helpers */
.xk-text-muted{ color: var(--xk-muted) !important; }
.xk-text-muted-2{ color: var(--xk-muted-2) !important; }
.xk-text-white{ color:#fff !important; }

/* Kicker + section titles (evita duplicados) */
.section-kicker{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 650;
  color: rgba(17,24,39,.55);
}

.section-title{
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0f172a;
}

.section-subtitle{
  font-size: .95rem;
  color: var(--xk-muted);
}

/* Highlight marker */
.hl{
  position: relative;
  font-weight: 600;
  z-index: 0;
}
.hl::after{
  content:"";
  position:absolute;
  left:-0.15em; right:-0.15em;
  bottom: 0.05em;
  height: 0.5em;
  background: rgba(13,110,253,0.22);
  border-radius: 0.25em;
  z-index: -1;
}

/* Buttons (custom) */
.btn-primary-soft{
  background: var(--xk-primary);
  border: none;
  color: #fff;
  border-radius: var(--xk-r-pill);
  padding: .65rem 1.5rem;
  font-weight: 600;
  box-shadow: 0 10px 32px rgba(13,110,253,0.45);
  font-size: .95rem;
}
.btn-primary-soft:hover{
  background: var(--xk-primary-600);
  color:#fff;
}

.btn-outline-neutral{
  border-radius: var(--xk-r-pill);
  padding: .6rem 1.4rem;
  border: 1px solid var(--xk-border-2);
  font-weight: 500;
  font-size: .9rem;
  color: var(--xk-ink);
  background: #fff;
}
.btn-outline-neutral:hover{
  border-color: var(--xk-primary);
  color: var(--xk-primary);
  background: #f3f6ff;
}

/* Cards */
.xk-card{
  border-radius: 1.1rem;
  border: 1px solid var(--xk-border);
  background: var(--xk-surface);
  height: 100%;
  transition: transform var(--xk-ease), box-shadow var(--xk-ease), border-color var(--xk-ease);
}
.xk-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--xk-shadow-md);
  border-color: rgba(13,110,253,0.35);
}

/* Icon bubble */
.xk-icon-bubble{
  width: 78px;
  height: 78px;
  border-radius: var(--xk-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,110,253,0.06);
  color: var(--xk-primary);
}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.4rem .9rem;
  border-radius: var(--xk-r-pill);
  border: 1px solid var(--xk-border);
  background:#fff;
  font-size:.85rem;
  color: var(--xk-muted-2);
  margin:.2rem;
}
.pill i{ color: var(--xk-primary); }

/* Steps */
.step-card{
  border-radius: 1rem;
  border: 1px dashed var(--xk-border-2);
  padding: 1rem 1.1rem;
  background: var(--xk-surface-2);
  height:100%;
}
.step-number{
  width: 28px;
  height: 28px;
  border-radius: var(--xk-r-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:600;
  background: rgba(13,110,253,0.08);
  color: var(--xk-primary);
}

/* Small footer */
footer{ font-size:.8rem; color: var(--xk-muted); }