/* =============================================================================
   XKEMA — sistema de diseño del sitio público
   Hoja canónica de la app `web`. Se carga después de Bootstrap 5.3.3 y redefine
   SUS variables en lugar de competir con su especificidad.

    1. Tipografía vendorizada        13. Diagramas
    2. Tokens                        14. Datos técnicos
    3. Base y accesibilidad          15. Hero
    4. Escala tipográfica            16. Secciones de contenido
    5. Layout                        17. FAQ
    6. Decoración técnica            18. Formularios
    7. Botones                       19. Consentimiento de cookies
    8. Cabecera                      20. Reserva de demo
    9. Pie                           21. Autenticación
   10. Tarjetas y superficies        22. Páginas de texto
   11. Marcos de producto           23. Utilidades
   12. Composiciones                24. Movimiento reducido
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tipografía vendorizada
   Montserrat subconjunto latin + latin-ext, dos pesos, ~24 KB cada uno. Sólo
   para titulares: el cuerpo usa la pila del sistema, que ya es excelente y no
   cuesta ni una petición.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "XKEMA Display";
  src: url("../fonts/xkema/montserrat-700.e8b8dcf8ef69.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "XKEMA Display";
  src: url("../fonts/xkema/montserrat-800.3c9b27b235ce.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --xk-primary:        #2b5cf6;
  --xk-primary-strong: #1d40c4;
  --xk-primary-ink:    #16267a;
  --xk-primary-soft:   #eef2ff;
  --xk-primary-line:   #c9d6ff;

  /* Acento técnico: trazas, nodos, conectores. Se usa poco y siempre pequeño. */
  --xk-accent:      #10b3a3;
  --xk-accent-soft: #e6faf7;

  /* Texto */
  --xk-text:        #0c1424;
  --xk-text-2:      #2b3958;
  --xk-muted:       #56637d;
  --xk-invert:      #f4f7ff;
  --xk-invert-mute: #9fb0cd;

  /* Superficies */
  --xk-bg:          #ffffff;
  --xk-surface:     #f6f8fd;
  --xk-surface-2:   #eef2f9;
  --xk-ink:         #070d1c;
  --xk-ink-2:       #0f172e;
  --xk-ink-line:    #1e2a48;
  --xk-border:      #e3e8f2;
  --xk-border-2:    #cbd4e4;

  /* Estado */
  --xk-success: #0f766e;
  --xk-warn:    #a35a07;
  --xk-danger:  #b91c1c;

  /* Radios */
  --xk-r-xs:   4px;
  --xk-r-sm:   8px;
  --xk-r-md:   12px;
  --xk-r-lg:   18px;
  --xk-r-xl:   26px;
  --xk-r-pill: 999px;

  /* Sombras: una escala corta, siempre frías y de baja opacidad. */
  --xk-sh-xs: 0 1px 2px rgba(12, 20, 36, .06);
  --xk-sh-sm: 0 1px 2px rgba(12, 20, 36, .05), 0 2px 8px rgba(12, 20, 36, .05);
  --xk-sh-md: 0 2px 6px rgba(12, 20, 36, .05), 0 14px 32px rgba(12, 20, 36, .09);
  --xk-sh-lg: 0 4px 12px rgba(12, 20, 36, .06), 0 30px 64px rgba(12, 20, 36, .14);
  --xk-sh-ink: 0 24px 60px rgba(2, 6, 18, .45);

  /* Espaciado */
  --xk-1: .25rem;  --xk-2: .5rem;   --xk-3: .75rem;  --xk-4: 1rem;
  --xk-5: 1.5rem;  --xk-6: 2rem;    --xk-7: 3rem;    --xk-8: 4rem;  --xk-9: 6rem;
  --xk-section-y: clamp(4rem, 8vw, 7rem);

  /* Layout */
  --xk-container:      1200px;
  --xk-container-wide: 1360px;
  --xk-measure:        62ch;
  --xk-header-h:       70px;

  /* Tipografía */
  --xk-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --xk-font-display: "XKEMA Display", var(--xk-font-body);
  --xk-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Movimiento */
  --xk-ease: cubic-bezier(.22, .61, .36, 1);
  --xk-dur: .55s;
}

/* Remapeo de Bootstrap: cambiamos SUS variables, no sus propiedades. */
:root {
  --bs-primary: var(--xk-primary);
  --bs-body-color: var(--xk-text);
  --bs-body-bg: var(--xk-bg);
  --bs-body-font-family: var(--xk-font-body);
  --bs-border-color: var(--xk-border);
  --bs-border-radius: var(--xk-r-md);
  --bs-border-radius-sm: var(--xk-r-sm);
  --bs-border-radius-lg: var(--xk-r-lg);
  --bs-link-color: var(--xk-primary);
  --bs-link-hover-color: var(--xk-primary-strong);
  --bs-emphasis-color: var(--xk-text);
  --bs-secondary-color: var(--xk-muted);
}

/* -----------------------------------------------------------------------------
   3. Base y accesibilidad
   -------------------------------------------------------------------------- */
html {
  /* El cajón de navegación descansa fuera del borde derecho mientras está
     cerrado. Sin este recorte, ensancharía el documento. */
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--xk-header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--xk-font-body);
  color: var(--xk-text);
  background: var(--xk-bg);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--xk-header-h);
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--xk-primary); text-underline-offset: .18em; }
a:hover { color: var(--xk-primary-strong); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--xk-primary);
  outline-offset: 2px;
  border-radius: var(--xk-r-xs);
}

.xk-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--xk-ink);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--xk-r-md) 0;
  font-weight: 600;
}
.xk-skip-link:focus {
  left: 0;
  color: #fff;
}

::selection { background: var(--xk-primary); color: #fff; }

/* -----------------------------------------------------------------------------
   4. Escala tipográfica
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .xk-display {
  font-family: var(--xk-font-display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--xk-text);
  text-wrap: balance;
  margin: 0;
}

p { text-wrap: pretty; margin: 0; }

.xk-h1 {
  font-size: clamp(2.35rem, 5.4vw, 4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.03;
}
.xk-h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.xk-h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.xk-h4 { font-size: 1.1rem; letter-spacing: -.01em; }

.xk-lead {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.62;
  color: var(--xk-muted);
  max-width: var(--xk-measure);
}
.xk-lead--wide { max-width: 72ch; }
.xk-lead--centered { margin-inline: auto; }
.xk-lead strong { color: var(--xk-text); font-weight: 650; }

.xk-eyebrow {
  font-family: var(--xk-font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--xk-primary);
  margin-bottom: var(--xk-3);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.xk-eyebrow::before {
  content: "";
  width: 1.35rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}
.xk-eyebrow--center { justify-content: center; }

.xk-fineprint {
  font-size: .82rem;
  color: var(--xk-muted);
  margin-top: var(--xk-3);
}
.xk-fineprint--loose { margin-top: var(--xk-5); }

.xk-mono {
  font-family: var(--xk-font-mono);
  font-size: .82em;
  letter-spacing: -.01em;
}

/* Secciones oscuras: invertir sin repetir reglas por componente. */
.xk-section--dark,
.xk-panel--dark {
  --xk-text: var(--xk-invert);
  --xk-muted: var(--xk-invert-mute);
  --xk-border: var(--xk-ink-line);
  --xk-border-2: #2c3b60;
  --xk-surface: var(--xk-ink-2);
  --xk-bg: var(--xk-ink);
  --xk-primary: #7d9bff;
  --xk-primary-strong: #a4b9ff;
  --xk-primary-soft: rgba(125, 155, 255, .12);
  --xk-primary-line: rgba(125, 155, 255, .28);
  --xk-accent: #3fd8c8;
  --xk-accent-soft: rgba(63, 216, 200, .12);
  --xk-warn: #f0b866;
  --xk-danger: #fca5a5;
  color: var(--xk-invert);
}

/* -----------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.xk-container {
  width: 100%;
  max-width: var(--xk-container);
  margin-inline: auto;
  padding-inline: var(--xk-5);
}
.xk-container--wide { max-width: var(--xk-container-wide); }
.xk-container--narrow { max-width: 800px; }

.xk-section {
  padding-block: var(--xk-section-y);
  position: relative;
  isolation: isolate;
}
.xk-section--surface { background: var(--xk-surface); }
.xk-section--dark { background: var(--xk-ink); }
.xk-section--tight { padding-block: calc(var(--xk-section-y) * .58); }
.xk-section--flush-top { padding-top: calc(var(--xk-section-y) * .45); }
.xk-section--flush-bottom { padding-bottom: calc(var(--xk-section-y) * .25); }

/* Costura suave entre una sección oscura y la clara siguiente. */
.xk-section--dark + .xk-section { border-top: none; }

.xk-section-head { margin-bottom: var(--xk-7); max-width: 46rem; }
.xk-section-head--center {
  margin-inline: auto;
  text-align: center;
}
.xk-section-head--center .xk-lead { margin-inline: auto; }
.xk-section-head .xk-lead { margin-top: var(--xk-4); }

.xk-grid { display: grid; gap: var(--xk-5); }
.xk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.xk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.xk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

.xk-split {
  display: grid;
  gap: var(--xk-7);
  align-items: center;
}
@media (min-width: 62em) {
  .xk-split { grid-template-columns: 1fr 1fr; gap: var(--xk-8); }
  .xk-split--wide-left  { grid-template-columns: 1.02fr .98fr; }
  .xk-split--wide-right { grid-template-columns: .85fr 1.15fr; }
  .xk-split--reverse > *:first-child { order: 2; }
  .xk-split--top { align-items: start; }
}

.xk-stack { display: flex; flex-direction: column; gap: var(--xk-5); }
.xk-stack--tight { gap: var(--xk-3); }

.xk-prose > * + * { margin-top: var(--xk-5); }
.xk-prose p { max-width: var(--xk-measure); }

/* -----------------------------------------------------------------------------
   6. Decoración técnica
   Rejilla de puntos y trazas. Siempre detrás del contenido y siempre discretas.
   -------------------------------------------------------------------------- */
.xk-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 26px 26px;
  color: var(--xk-border-2);
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
}
.xk-section--dark .xk-dots { color: #2a3a5e; opacity: .55; }
.xk-dots--bottom {
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 100%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 100%, #000 10%, transparent 72%);
}

/* Capa que recorta la decoración. Sin ella, un resplandor colocado fuera del
   borde derecho ensancha el documento y aparece scroll horizontal. */
.xk-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.xk-glow {
  position: absolute;
  pointer-events: none;
  width: 42rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 92, 246, .14), transparent 62%);
  filter: blur(10px);
}
.xk-glow--hero { top: -18rem; right: -12rem; }
.xk-glow--dark { background: radial-gradient(circle, rgba(63, 216, 200, .16), transparent 62%); }
.xk-glow--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* -----------------------------------------------------------------------------
   7. Botones
   -------------------------------------------------------------------------- */
.xk-btn {
  --_bg: transparent;
  --_fg: var(--xk-text);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .72rem 1.35rem;
  border: 1px solid var(--_bd);
  border-radius: var(--xk-r-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--xk-font-body);
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s var(--xk-ease), box-shadow .2s var(--xk-ease),
              background-color .2s var(--xk-ease), border-color .2s var(--xk-ease),
              color .2s var(--xk-ease);
}
.xk-btn:hover { transform: translateY(-1px); }
.xk-btn:active { transform: translateY(0); }
.xk-btn[disabled], .xk-btn[aria-disabled="true"] {
  opacity: .55; pointer-events: none; transform: none;
}

.xk-btn--primary {
  --_bg: var(--xk-primary);
  --_fg: #fff;
  --_bd: var(--xk-primary);
  box-shadow: 0 1px 2px rgba(22, 38, 122, .2), 0 8px 22px rgba(43, 92, 246, .28);
}
.xk-btn--primary:hover {
  --_bg: var(--xk-primary-strong);
  --_bd: var(--xk-primary-strong);
  color: #fff;
  box-shadow: 0 2px 4px rgba(22, 38, 122, .22), 0 14px 30px rgba(43, 92, 246, .34);
}

.xk-btn--secondary {
  --_bg: var(--xk-bg);
  --_fg: var(--xk-text);
  --_bd: var(--xk-border-2);
  box-shadow: var(--xk-sh-xs);
}
.xk-btn--secondary:hover {
  --_bd: var(--xk-text);
  color: var(--xk-text);
}

.xk-btn--ghost {
  --_fg: var(--xk-text);
  --_bd: transparent;
  padding-inline: .9rem;
}
.xk-btn--ghost:hover { --_bg: var(--xk-surface-2); color: var(--xk-text); }

.xk-btn--text {
  --_fg: var(--xk-text);
  padding-inline: .55rem;
  font-weight: 600;
}
.xk-btn--text:hover { --_fg: var(--xk-primary); transform: none; }

.xk-btn--lg { padding: .95rem 1.8rem; font-size: 1.02rem; }
.xk-btn--sm { padding: .5rem 1rem; font-size: .88rem; }
.xk-btn--block { width: 100%; }

.xk-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xk-3);
  align-items: center;
}
.xk-cta-group--center { justify-content: center; }

.xk-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xk-2) var(--xk-5);
  margin-top: var(--xk-5);
  font-size: .88rem;
  color: var(--xk-muted);
}
.xk-reassurance span { display: inline-flex; align-items: center; gap: .4rem; }
.xk-reassurance i { color: var(--xk-accent); font-size: .78em; }

/* Enlace con flecha: CTA contextual de bajo peso visual. */
.xk-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 650;
  text-decoration: none;
  color: var(--xk-primary);
}
.xk-arrow-link i, .xk-arrow-link svg { transition: transform .2s var(--xk-ease); }
.xk-arrow-link:hover i { transform: translateX(3px); }

/* -----------------------------------------------------------------------------
   8. Cabecera
   -------------------------------------------------------------------------- */
.xk-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  height: var(--xk-header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: height .22s var(--xk-ease), background-color .22s var(--xk-ease),
              border-color .22s var(--xk-ease), box-shadow .22s var(--xk-ease);
}
.xk-header[data-scrolled="true"] {
  height: 58px;
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--xk-border);
  box-shadow: 0 1px 20px rgba(12, 20, 36, .07);
}

.xk-header__inner {
  display: flex;
  align-items: center;
  gap: var(--xk-5);
  width: 100%;
}

.xk-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--xk-font-display);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: .01em;
  color: var(--xk-text);
  text-decoration: none;
  flex: none;
}
.xk-brand:hover { color: var(--xk-text); }
.xk-brand img { width: 30px; height: 30px; }

.xk-header__toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-sm);
  background: #fff;
  color: var(--xk-text);
  font-size: 1.05rem;
  cursor: pointer;
}

.xk-nav { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.xk-nav__link {
  display: inline-block;
  padding: .5rem .8rem;
  border-radius: var(--xk-r-sm);
  color: var(--xk-text);
  font-size: .95rem;
  font-weight: 550;
  text-decoration: none;
  transition: background-color .18s var(--xk-ease), color .18s var(--xk-ease);
}
.xk-nav__link:hover { background: var(--xk-surface-2); color: var(--xk-text); }
.xk-nav__link[aria-current="page"] {
  color: var(--xk-primary);
  background: var(--xk-primary-soft);
}

.xk-header__actions {
  display: flex;
  align-items: center;
  gap: var(--xk-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Separación explícita entre navegación (izquierda) y acciones (derecha). */
.xk-header__actions::before {
  content: "";
  width: 1px;
  height: 22px;
  margin-right: var(--xk-3);
  background: var(--xk-border-2);
  flex: none;
}
/* Selector de idioma: discreto, dos letras, sin desplegable. */
.xk-lang {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}
.xk-lang__label {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--xk-muted);
}
.xk-lang__options {
  display: inline-flex;
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-pill);
  overflow: hidden;
}
.xk-lang__btn {
  border: 0;
  background: none;
  padding: .25rem .6rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--xk-muted);
  cursor: pointer;
}
.xk-lang__btn:hover { color: var(--xk-text); background: var(--xk-surface-2); }
.xk-lang__btn[aria-current="true"] {
  background: var(--xk-primary);
  color: #fff;
}
@media (min-width: 62em) {
  .xk-lang { margin-left: 0; }
}
@media (max-width: 61.99em) {
  .xk-lang {
    margin: 0;
    justify-content: space-between;
    padding-top: var(--xk-4);
    border-top: 1px solid var(--xk-border);
  }
}

.xk-header__user {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: 12rem;
  font-size: .88rem;
  color: var(--xk-muted);
}

@media (min-width: 62em) {
  .xk-header__toggle { display: none; }
  .xk-header__menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: var(--xk-4);
  }
  .xk-header__menu > nav { margin-right: auto; }
}

/* Cajón móvil. `position: absolute` a propósito: el `backdrop-filter` de la
   cabecera crea bloque contenedor y `fixed` se posicionaría contra ella. */
@media (max-width: 61.99em) {
  .xk-header__menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: min(23rem, 100vw);
    max-height: calc(100dvh - var(--xk-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--xk-4);
    padding: var(--xk-5) var(--xk-5) var(--xk-6);
    background: #fff;
    border-left: 1px solid var(--xk-border);
    border-bottom: 1px solid var(--xk-border);
    border-radius: 0 0 0 var(--xk-r-lg);
    box-shadow: var(--xk-sh-lg);
    transform: translateX(103%);
    opacity: 0;
    visibility: hidden;
    transition: transform .3s var(--xk-ease), opacity .22s var(--xk-ease), visibility .3s;
  }
  .xk-header__menu[data-open="true"] {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
  .xk-nav { flex-direction: column; align-items: stretch; gap: .1rem; }
  .xk-nav__link { padding: .7rem .75rem; font-size: 1.02rem; font-weight: 600; }
  .xk-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--xk-3);
    padding-top: var(--xk-4);
    border-top: 1px solid var(--xk-border);
  }
  .xk-header__actions::before { display: none; }
  .xk-header__actions .xk-btn { width: 100%; justify-content: center; }
  .xk-header__actions .xk-btn--text { justify-content: center; }
  .xk-drawer-backdrop {
    position: fixed;
    inset: var(--xk-header-h) 0 0 0;
    z-index: 1020;
    background: rgba(7, 13, 28, .38);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--xk-ease), visibility .25s;
  }
  .xk-drawer-backdrop[data-open="true"] { opacity: 1; visibility: visible; }
}
@media (min-width: 62em) {
  .xk-drawer-backdrop { display: none; }
}

/* -----------------------------------------------------------------------------
   9. Pie
   -------------------------------------------------------------------------- */
.xk-footer {
  background: var(--xk-ink);
  color: var(--xk-invert-mute);
  padding-block: var(--xk-8) var(--xk-6);
  font-size: .93rem;
}
.xk-footer__top {
  display: grid;
  gap: var(--xk-7);
}
@media (min-width: 48em) {
  .xk-footer__top { grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--xk-6); }
}
.xk-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}
.xk-footer__wordmark {
  font-family: var(--xk-font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
}
.xk-footer__tagline {
  margin-top: var(--xk-3);
  max-width: 22rem;
  color: var(--xk-invert-mute);
  font-size: .9rem;
  line-height: 1.55;
}
.xk-footer h2 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--xk-4);
}
.xk-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.xk-footer__list a,
.xk-footer__linkbtn {
  color: var(--xk-invert-mute);
  text-decoration: none;
  transition: color .18s var(--xk-ease);
}
.xk-footer__list a:hover, .xk-footer__linkbtn:hover { color: #fff; }
.xk-footer__linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.xk-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--xk-4);
  margin-top: var(--xk-8);
  padding-top: var(--xk-5);
  border-top: 1px solid var(--xk-ink-line);
  font-size: .85rem;
}
.xk-footer__social { display: flex; gap: var(--xk-4); list-style: none; margin: 0; padding: 0; }
.xk-footer__social a { color: var(--xk-invert-mute); font-size: 1.1rem; }
.xk-footer__social a:hover { color: #fff; }

/* -----------------------------------------------------------------------------
   10. Tarjetas y superficies
   -------------------------------------------------------------------------- */
.xk-card {
  display: flex;
  flex-direction: column;
  gap: var(--xk-3);
  padding: var(--xk-5);
  background: var(--xk-bg);
  border: 1px solid var(--xk-border);
  border-radius: var(--xk-r-lg);
  box-shadow: var(--xk-sh-xs);
  transition: transform .22s var(--xk-ease), box-shadow .22s var(--xk-ease),
              border-color .22s var(--xk-ease);
}
.xk-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--xk-sh-md);
  border-color: var(--xk-primary-line);
}
.xk-section--surface .xk-card { background: #fff; }
.xk-section--dark .xk-card { background: var(--xk-ink-2); }

.xk-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--xk-r-md);
  background: var(--xk-primary-soft);
  color: var(--xk-primary);
  font-size: 1.05rem;
  flex: none;
}
.xk-card__icon--accent { background: var(--xk-accent-soft); color: var(--xk-accent); }
.xk-card__title { font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; }
.xk-card__text { color: var(--xk-muted); font-size: .95rem; line-height: 1.6; }
.xk-card__foot { margin-top: auto; padding-top: var(--xk-2); }

.xk-note {
  padding: var(--xk-6);
  background: var(--xk-primary-soft);
  border: 1px solid var(--xk-primary-line);
  border-radius: var(--xk-r-lg);
}
.xk-section--dark .xk-note { background: var(--xk-primary-soft); }

.xk-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .55rem;
  border-radius: var(--xk-r-pill);
  background: var(--xk-accent-soft);
  color: var(--xk-accent);
  font-family: var(--xk-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.xk-badge--primary { background: var(--xk-primary-soft); color: var(--xk-primary); }
.xk-badge--muted {
  background: var(--xk-surface-2);
  color: var(--xk-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.xk-pill-row { display: flex; flex-wrap: wrap; gap: var(--xk-2); }
.xk-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .85rem;
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-pill);
  background: var(--xk-bg);
  font-size: .85rem;
  color: var(--xk-text);
}
.xk-pill i { color: var(--xk-muted); font-size: .85em; }

.xk-list-check { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--xk-3); }
.xk-list-check li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: .65rem;
  align-items: start;
  color: var(--xk-muted);
  line-height: 1.55;
}
.xk-list-check i {
  margin-top: .3rem;
  color: var(--xk-accent);
  font-size: .82rem;
}
.xk-list-check strong { color: var(--xk-text); font-weight: 650; }

/* -----------------------------------------------------------------------------
   11. Marcos de producto
   -------------------------------------------------------------------------- */
.xk-frame {
  position: relative;
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-lg);
  background: #fff;
  box-shadow: var(--xk-sh-md);
  overflow: hidden;
}
.xk-frame--flat { box-shadow: var(--xk-sh-sm); }
.xk-frame--ink {
  border-color: var(--xk-ink-line);
  background: var(--xk-ink-2);
  box-shadow: var(--xk-sh-ink);
}
.xk-frame__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .9rem;
  background: var(--xk-surface);
  border-bottom: 1px solid var(--xk-border);
}
.xk-frame--ink .xk-frame__bar { background: #0b1428; border-bottom-color: var(--xk-ink-line); }
.xk-frame__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--xk-border-2);
  flex: none;
}
.xk-frame__label {
  margin-left: .6rem;
  font-family: var(--xk-font-mono);
  font-size: .74rem;
  color: var(--xk-muted);
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xk-frame--ink .xk-frame__label { color: var(--xk-invert-mute); }
.xk-frame__body { padding: var(--xk-5); }
.xk-frame img { display: block; width: 100%; }

/* Ventana de aplicación con barra lateral simulada. */
.xk-appwin { display: grid; grid-template-columns: 8.5rem 1fr; min-height: 15rem; }
@media (max-width: 30em) { .xk-appwin { grid-template-columns: 1fr; } .xk-appwin__side { display: none; } }
.xk-appwin__side {
  padding: var(--xk-4);
  background: var(--xk-surface);
  border-right: 1px solid var(--xk-border);
  display: grid;
  gap: .3rem;
  align-content: start;
}
.xk-appwin__side span {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .5rem;
  border-radius: var(--xk-r-xs);
  font-size: .78rem;
  color: var(--xk-muted);
}
.xk-appwin__side span[data-active] {
  background: var(--xk-primary-soft);
  color: var(--xk-primary);
  font-weight: 650;
}
.xk-appwin__main { padding: var(--xk-5); }

/* Panel flotante superpuesto a una captura. */
.xk-float {
  position: absolute;
  z-index: 2;
  padding: var(--xk-4);
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-md);
  box-shadow: var(--xk-sh-lg);
  font-size: .82rem;
  max-width: 15rem;
}
.xk-float__label {
  display: block;
  font-family: var(--xk-font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--xk-muted);
  margin-bottom: .3rem;
}
.xk-float__value { font-weight: 700; color: var(--xk-text); letter-spacing: -.01em; }
.xk-float__meta { color: var(--xk-muted); margin-top: .2rem; font-size: .78rem; }
@media (max-width: 61.99em) { .xk-float { display: none; } }

/* Llamada de atención con línea guía. */
.xk-callout {
  position: relative;
  padding-left: var(--xk-5);
  border-left: 2px solid var(--xk-primary);
  color: var(--xk-muted);
  font-size: .95rem;
}

/* -----------------------------------------------------------------------------
   12. Composiciones
   -------------------------------------------------------------------------- */
.xk-compose { position: relative; }
.xk-compose__stack { position: relative; }
.xk-compose__back {
  position: absolute;
  z-index: 0;
  inset: auto auto -1.75rem -1.75rem;
  width: 55%;
}
@media (max-width: 61.99em) { .xk-compose__back { display: none; } }

/* Pareja de tarjetas conectadas por una línea. */
.xk-linked {
  display: grid;
  gap: var(--xk-6);
  position: relative;
}
.xk-linked__wire {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 2.5rem;
  color: var(--xk-primary);
}
.xk-linked__wire::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 2px;
  background: linear-gradient(var(--xk-primary-line), var(--xk-primary));
  transform: translateX(-50%);
}
.xk-linked__wire i {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--xk-bg);
  border: 2px solid var(--xk-primary);
  font-size: .72rem;
}

/* -----------------------------------------------------------------------------
   13. Diagramas
   -------------------------------------------------------------------------- */

/* 13.1 Business Brain: núcleo central con órbitas de objetos técnicos. */
.xk-brain {
  position: relative;
  display: grid;
  gap: var(--xk-4);
  margin-top: var(--xk-7);
}
.xk-brain__core {
  display: grid;
  place-items: center;
  gap: .2rem;
  padding: var(--xk-5) var(--xk-6);
  border-radius: var(--xk-r-xl);
  background: linear-gradient(160deg, var(--xk-primary), var(--xk-primary-strong));
  color: #fff;
  box-shadow: 0 18px 46px rgba(43, 92, 246, .38);
  text-align: center;
}
.xk-brain__core b {
  font-family: var(--xk-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .02em;
}
.xk-brain__core span {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}
.xk-brain__node {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-md);
  background: var(--xk-bg);
  box-shadow: var(--xk-sh-xs);
  font-weight: 650;
  font-size: .92rem;
  color: var(--xk-text);
}
.xk-brain__node i {
  display: grid;
  place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: var(--xk-r-sm);
  background: var(--xk-surface-2);
  color: var(--xk-primary);
  font-size: .82rem;
  flex: none;
}
.xk-brain__node small {
  display: block;
  font-weight: 450;
  font-size: .78rem;
  color: var(--xk-muted);
  letter-spacing: 0;
}
.xk-section--dark .xk-brain__node { background: var(--xk-ink-2); }
.xk-section--dark .xk-brain__node i { background: rgba(125, 155, 255, .14); }

@media (min-width: 56em) {
  .xk-brain {
    grid-template-columns: 1fr minmax(12rem, 15rem) 1fr;
    grid-template-rows: repeat(3, auto);
    align-items: center;
    gap: var(--xk-5) var(--xk-8);
  }
  .xk-brain__core { grid-column: 2; grid-row: 2; }
  .xk-brain__node--a { grid-column: 1; grid-row: 1; }
  .xk-brain__node--b { grid-column: 1; grid-row: 2; }
  .xk-brain__node--c { grid-column: 1; grid-row: 3; }
  .xk-brain__node--d { grid-column: 3; grid-row: 1; }
  .xk-brain__node--e { grid-column: 3; grid-row: 2; }
  .xk-brain__node--f { grid-column: 3; grid-row: 3; }
  .xk-brain__wires {
    position: absolute;
    inset: 0;
    /* La regla global `svg { height: auto }` gana a la posición absoluta y deja
       el lienzo cuadrado; hay que fijar la altura explícitamente. */
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
  }
  .xk-brain__wires path {
    fill: none;
    stroke: var(--xk-primary-line);
    stroke-width: 1.5;
    /* Longitud aproximada del trazo más largo: basta para que el dibujado
       progresivo termine sin dejar hueco. */
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
  }
  [data-revealed="true"] .xk-brain__wires path {
    animation: xk-draw 1.1s var(--xk-ease) forwards;
  }

  /* El punto de conexión va sobre el nodo, no dentro del SVG: con
     `preserveAspectRatio: none` un `<circle>` se deformaría en elipse. */
  .xk-brain__node::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--xk-accent);
    transform: translateY(-50%);
    opacity: 0;
  }
  .xk-brain__node--a::after,
  .xk-brain__node--b::after,
  .xk-brain__node--c::after { right: -3.5px; }
  .xk-brain__node--d::after,
  .xk-brain__node--e::after,
  .xk-brain__node--f::after { left: -3.5px; }
  [data-revealed="true"] .xk-brain__node::after {
    animation: xk-fade-in .5s var(--xk-ease) .8s forwards;
  }
}
@media (max-width: 55.99em) { .xk-brain__wires { display: none; } }

@keyframes xk-draw { to { stroke-dashoffset: 0; } }
@keyframes xk-fade-in { to { opacity: 1; } }

/* 13.2 Árbol de estructura de producto. */
.xk-tree {
  padding: var(--xk-5);
  border: 1px solid var(--xk-border);
  border-radius: var(--xk-r-lg);
  background: var(--xk-bg);
  box-shadow: var(--xk-sh-sm);
  font-size: .92rem;
}
.xk-section--dark .xk-tree { background: var(--xk-ink-2); }
.xk-tree__root {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .8rem;
  border-radius: var(--xk-r-sm);
  background: var(--xk-primary-soft);
  color: var(--xk-primary);
  font-family: var(--xk-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}
.xk-tree__list { list-style: none; margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.xk-tree__list li { position: relative; padding: .4rem .55rem .4rem 1.15rem; }
.xk-tree__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--xk-border-2);
}
.xk-tree__list li::after {
  content: "";
  position: absolute;
  left: 0; top: 1.1rem;
  width: .7rem;
  height: 1px;
  background: var(--xk-border-2);
}
.xk-tree__list li > i { color: var(--xk-muted); width: 1.1rem; }
.xk-tree__row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.xk-tree__row b { font-weight: 650; }
.xk-tree__meta { color: var(--xk-muted); font-size: .84rem; }

/* 13.3 Línea de tiempo / historia con pasos.
   Tres columnas: cuándo · raíl · contenido. El raíl tiene columna propia para
   que el punto no caiga nunca encima del texto. */
.xk-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.xk-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1.25rem 1fr;
  gap: 0 var(--xk-4);
  padding-bottom: var(--xk-6);
}
.xk-timeline li:last-child { padding-bottom: 0; }
.xk-timeline li::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 1px;
  margin-top: 1.4rem;
  background: linear-gradient(var(--xk-border-2), transparent);
}
.xk-timeline li:last-child::before { display: none; }
.xk-timeline__when {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--xk-font-mono);
  font-size: .8rem;
  font-weight: 600;
  color: var(--xk-primary);
  padding-top: .2rem;
  text-align: right;
}
.xk-timeline__dot {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  margin-top: .45rem;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--xk-primary);
  box-shadow: 0 0 0 4px var(--xk-primary-soft);
}
.xk-timeline li > div { grid-column: 3; grid-row: 1; }
.xk-timeline h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.xk-timeline p { color: var(--xk-muted); font-size: .95rem; max-width: 46ch; }
@media (max-width: 34em) {
  .xk-timeline li { grid-template-columns: 1.25rem 1fr; }
  .xk-timeline li::before,
  .xk-timeline__dot { grid-column: 1; }
  .xk-timeline__when {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding-top: 0;
    margin-bottom: .2rem;
  }
  .xk-timeline li > div { grid-column: 2; grid-row: 2; }
  .xk-timeline li { grid-template-rows: auto auto; }
  .xk-timeline li::before, .xk-timeline__dot { grid-row: 1 / -1; }
  .xk-timeline li::before { margin-top: 1rem; }
  .xk-timeline__dot { align-self: start; margin-top: .3rem; }
}

/* 13.4 Cadena horizontal de pasos (ciclo de vida). */
.xk-chain {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xk-2);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: xk-chain;
}
.xk-chain li {
  flex: 1 1 9rem;
  position: relative;
  padding: var(--xk-4) var(--xk-4) var(--xk-4) var(--xk-4);
  border: 1px solid var(--xk-border);
  border-radius: var(--xk-r-md);
  background: var(--xk-bg);
  font-size: .88rem;
  font-weight: 650;
  color: var(--xk-text);
}
.xk-chain li span {
  display: block;
  font-weight: 450;
  font-size: .82rem;
  color: var(--xk-muted);
  margin-top: .25rem;
}
.xk-chain li[data-here] {
  border-color: var(--xk-primary);
  background: var(--xk-primary-soft);
  box-shadow: 0 0 0 3px var(--xk-primary-soft);
}
.xk-chain li[data-here]::after {
  content: attr(data-here);
  position: absolute;
  top: -.7rem;
  left: var(--xk-4);
  padding: .1rem .5rem;
  border-radius: var(--xk-r-pill);
  background: var(--xk-primary);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.xk-section--dark .xk-chain li { background: var(--xk-ink-2); }

/* 13.5 Flujo compacto en línea: A → B → C. */
.xk-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  list-style: none;
  margin: var(--xk-6) 0 0;
  padding: 0;
}
.xk-flow li {
  display: inline-flex;
  align-items: center;
  padding: .35rem .8rem;
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-pill);
  background: var(--xk-bg);
  font-family: var(--xk-font-mono);
  font-size: .78rem;
  color: var(--xk-text);
}
.xk-flow li + li::before {
  content: "\2192";
  margin: 0 .65rem 0 -.35rem;
  color: var(--xk-primary);
  font-family: var(--xk-font-body);
}
.xk-flow li + li { border-left-width: 1px; }

/* 13.6 Pasos numerados. */
.xk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--xk-5); }
@media (min-width: 48em) { .xk-steps--row { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.xk-steps li {
  position: relative;
  padding: var(--xk-5);
  border: 1px solid var(--xk-border);
  border-radius: var(--xk-r-lg);
  background: var(--xk-bg);
}
.xk-section--dark .xk-steps li { background: var(--xk-ink-2); }
.xk-steps__num {
  display: inline-grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  margin-bottom: var(--xk-3);
  border-radius: var(--xk-r-sm);
  background: var(--xk-primary);
  color: #fff;
  font-family: var(--xk-font-display);
  font-weight: 800;
  font-size: .92rem;
}

/* -----------------------------------------------------------------------------
   14. Datos técnicos
   -------------------------------------------------------------------------- */
.xk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.xk-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: .86rem;
}
.xk-table th, .xk-table td {
  padding: .6rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--xk-border);
  white-space: nowrap;
}
.xk-table thead th {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--xk-muted);
  background: var(--xk-surface);
}
.xk-table tbody tr:last-child td { border-bottom: none; }
.xk-table tbody tr:hover td { background: var(--xk-primary-soft); }
.xk-table td:first-child { font-family: var(--xk-font-mono); color: var(--xk-primary); font-weight: 600; }
.xk-table td[data-num] { text-align: right; font-variant-numeric: tabular-nums; }

.xk-spec { padding: var(--xk-5); }
.xk-spec dl { display: grid; gap: 0; margin: 0; }
.xk-spec dl > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 38%) 1fr;
  gap: var(--xk-4);
  padding: .6rem 0;
  border-bottom: 1px solid var(--xk-border);
}
.xk-spec dl > div:last-child { border-bottom: none; }
.xk-spec dt { color: var(--xk-muted); font-size: .84rem; }
.xk-spec dd { margin: 0; font-weight: 600; font-size: .9rem; color: var(--xk-text); }

.xk-filelist { list-style: none; margin: 0; padding: 0; display: grid; }
.xk-filelist li {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .65rem var(--xk-5);
  border-bottom: 1px solid var(--xk-border);
  font-size: .88rem;
}
.xk-filelist li:last-child { border-bottom: none; }
.xk-filelist i { color: var(--xk-muted); }
.xk-filelist b { font-weight: 600; letter-spacing: -.01em; }
.xk-filelist span { color: var(--xk-muted); font-size: .8rem; font-family: var(--xk-font-mono); }

/* Lista de revisiones. Muestra que las versiones conviven; no promete diff. */
.xk-revs { list-style: none; margin: 0; padding: 0; display: grid; }
.xk-revs li {
  display: flex;
  align-items: center;
  gap: var(--xk-4);
  padding: .8rem var(--xk-5);
  border-bottom: 1px solid var(--xk-border);
}
.xk-revs li:last-child { border-bottom: none; }
.xk-revs__tag {
  display: grid;
  place-items: center;
  min-width: 3.4rem;
  padding: .3rem .5rem;
  border-radius: var(--xk-r-sm);
  background: var(--xk-surface-2);
  font-family: var(--xk-font-mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--xk-text);
}
.xk-revs li[data-current] .xk-revs__tag { background: var(--xk-primary); color: #fff; }
.xk-revs__body { flex: 1; min-width: 0; }
.xk-revs__body b { display: block; font-size: .9rem; font-weight: 650; }
.xk-revs__body span { color: var(--xk-muted); font-size: .81rem; }

/* Carpeta desordenada del "antes". */
.xk-chaos {
  list-style: none;
  margin: 0;
  padding: var(--xk-5);
  border: 1px dashed var(--xk-border-2);
  border-radius: var(--xk-r-lg);
  background: var(--xk-bg);
  display: grid;
  gap: .45rem;
  font-family: var(--xk-font-mono);
  font-size: .82rem;
  color: var(--xk-muted);
}
.xk-chaos li { display: flex; align-items: center; gap: .6rem; }
.xk-chaos li i { width: 1rem; color: var(--xk-border-2); }
.xk-chaos li[data-dup] { color: var(--xk-warn); }
.xk-section--dark .xk-chaos { background: rgba(255, 255, 255, .03); }

/* -----------------------------------------------------------------------------
   15. Hero
   -------------------------------------------------------------------------- */
.xk-hero {
  position: relative;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  background:
    linear-gradient(180deg, var(--xk-primary-soft) 0%, rgba(255, 255, 255, 0) 62%);
}
/* El titular de marca ocupa dos líneas por diseño: cada mitad es un bloque. */
.xk-hero__title span { display: block; }

.xk-hero__stage { position: relative; }
.xk-hero__shot { position: relative; z-index: 1; }
/* Los desbordamientos hacia la izquierda caen en el canalón entre columnas y
   son seguros; hacia la derecha se saldrían de la página, así que ahí el panel
   se apoya en el borde del marco. */
.xk-hero__float--a { top: 9%;  left: -3rem; }
.xk-hero__float--b { top: 46%; right: 0; }
.xk-hero__float--c { bottom: 6%; left: -1.5rem; }

.xk-hero__marquee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xk-3) var(--xk-6);
  margin-top: var(--xk-8);
  padding-top: var(--xk-5);
  border-top: 1px solid var(--xk-border);
  font-size: .84rem;
  color: var(--xk-muted);
}
.xk-hero__marquee b {
  font-family: var(--xk-font-display);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--xk-text);
}
.xk-hero__marquee ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xk-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* -----------------------------------------------------------------------------
   16. Secciones de contenido
   -------------------------------------------------------------------------- */

/* Storytelling con columna adhesiva. */
.xk-sticky { display: grid; gap: var(--xk-7); }
@media (min-width: 62em) {
  .xk-sticky { grid-template-columns: .95fr 1.05fr; gap: var(--xk-8); align-items: start; }
  .xk-sticky__pin {
    position: sticky;
    top: calc(var(--xk-header-h) + 2.5rem);
  }
  /* La columna que se queda fija sólo se percibe como tal si la otra es
     bastante más alta; si no, no hay recorrido que recorrer. */
  .xk-sticky .xk-timeline li { min-height: 11rem; }
}
.xk-sticky__steps { display: grid; gap: var(--xk-6); }

/* Nota del fundador. */
.xk-founder { display: grid; gap: var(--xk-6); }
@media (min-width: 48em) { .xk-founder { grid-template-columns: 13rem 1fr; gap: var(--xk-8); align-items: start; } }
.xk-founder__aside { text-align: center; }
@media (min-width: 48em) { .xk-founder__aside { text-align: left; } }
.xk-founder__avatar {
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  margin-inline: auto;
  border-radius: var(--xk-r-xl);
  background: linear-gradient(150deg, var(--xk-primary-soft), var(--xk-accent-soft));
  border: 1px solid var(--xk-primary-line);
  color: var(--xk-primary);
  font-size: 2.1rem;
  overflow: hidden;
}
@media (min-width: 48em) { .xk-founder__avatar { margin-inline: 0; } }
.xk-founder__name { margin-top: var(--xk-4); font-weight: 700; letter-spacing: -.01em; }
.xk-founder__role { color: var(--xk-muted); font-size: .88rem; }
.xk-founder__text { display: grid; gap: var(--xk-4); margin-top: var(--xk-5); }
.xk-founder__text p { color: var(--xk-muted); max-width: var(--xk-measure); line-height: 1.65; }
.xk-founder__text p:first-child {
  font-size: 1.12rem;
  color: var(--xk-text);
  font-weight: 500;
}

/* Prueba de producto: capturas con pie. */
.xk-proof { margin: 0; display: flex; flex-direction: column; gap: var(--xk-4); }
.xk-proof figcaption { display: grid; gap: .3rem; }
/* Las capturas tienen proporciones distintas —algunas son verticales—; recortar
   a una relación común mantiene la rejilla alineada sin deformarlas. */
.xk-proof .xk-frame img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

/* Rejilla de capacidades para la página de producto. */
.xk-feature {
  display: grid;
  gap: var(--xk-4);
  padding: var(--xk-6);
  border: 1px solid var(--xk-border);
  border-radius: var(--xk-r-lg);
  background: var(--xk-bg);
  align-content: start;
}
.xk-feature__head { display: flex; align-items: center; gap: var(--xk-3); }
.xk-feature ul { margin: 0; padding-left: 1.1rem; color: var(--xk-muted); font-size: .92rem; display: grid; gap: .35rem; }

/* Migas de pan. */
.xk-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0 0 var(--xk-5);
  padding: 0;
  font-size: .84rem;
  color: var(--xk-muted);
}
.xk-crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--xk-border-2); }
.xk-crumbs a { color: var(--xk-muted); text-decoration: none; }
.xk-crumbs a:hover { color: var(--xk-primary); }

/* Enlaces entre casos de uso. */
.xk-related {
  display: grid;
  gap: var(--xk-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.xk-related a {
  display: grid;
  gap: .35rem;
  padding: var(--xk-5);
  border: 1px solid var(--xk-border);
  border-radius: var(--xk-r-md);
  background: var(--xk-bg);
  text-decoration: none;
  color: var(--xk-text);
  transition: border-color .2s var(--xk-ease), transform .2s var(--xk-ease);
}
.xk-related a:hover { border-color: var(--xk-primary); transform: translateY(-2px); }
.xk-related b { font-weight: 700; letter-spacing: -.01em; }
.xk-related span { color: var(--xk-muted); font-size: .88rem; }

/* -----------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.xk-faq {
  display: grid;
  gap: var(--xk-2);
  max-width: 52rem;
  margin-inline: auto;
}
.xk-faq details {
  border: 1px solid var(--xk-border);
  border-radius: var(--xk-r-md);
  background: var(--xk-bg);
  transition: border-color .2s var(--xk-ease), box-shadow .2s var(--xk-ease);
}
.xk-faq details[open] { border-color: var(--xk-primary-line); box-shadow: var(--xk-sh-sm); }
.xk-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xk-4);
  padding: var(--xk-4) var(--xk-5);
  cursor: pointer;
  font-weight: 650;
  font-size: 1rem;
  list-style: none;
}
.xk-faq summary::-webkit-details-marker { display: none; }
.xk-faq summary::after {
  content: "\002B";
  font-family: var(--xk-font-body);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--xk-primary);
  transition: transform .22s var(--xk-ease);
  flex: none;
}
.xk-faq details[open] summary::after { transform: rotate(45deg); }
.xk-faq__body {
  padding: 0 var(--xk-5) var(--xk-5);
  color: var(--xk-muted);
  max-width: var(--xk-measure);
}
.xk-faq__body p + p { margin-top: var(--xk-3); }

/* -----------------------------------------------------------------------------
   18. Formularios
   -------------------------------------------------------------------------- */
.xk-field { display: grid; gap: .4rem; margin-bottom: var(--xk-4); }
.xk-field > label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--xk-text);
  display: flex;
  align-items: baseline;
  gap: .45rem;
  flex-wrap: wrap;
}
.xk-field__optional {
  font-weight: 400;
  font-size: .78rem;
  color: var(--xk-muted);
}
.xk-field input[type="text"],
.xk-field input[type="email"],
.xk-field input[type="password"],
.xk-field input[type="tel"],
.xk-field input[type="url"],
.xk-field input[type="number"],
.xk-field select,
.xk-field textarea {
  width: 100%;
  padding: .72rem .9rem;
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-sm);
  background: var(--xk-bg);
  color: var(--xk-text);
  font-family: inherit;
  font-size: .96rem;
  line-height: 1.45;
  transition: border-color .18s var(--xk-ease), box-shadow .18s var(--xk-ease);
}
.xk-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2356637d'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1.1rem;
  padding-right: 2.4rem;
}
.xk-field textarea { resize: vertical; min-height: 6rem; }
.xk-field input:focus, .xk-field select:focus, .xk-field textarea:focus {
  outline: none;
  border-color: var(--xk-primary);
  box-shadow: 0 0 0 3px var(--xk-primary-soft);
}
.xk-field input::placeholder, .xk-field textarea::placeholder { color: #98a3b8; }
.xk-field__help { font-size: .8rem; color: var(--xk-muted); }
.xk-field__error {
  font-size: .84rem;
  color: var(--xk-danger);
  font-weight: 550;
}
.xk-field__error:empty { display: none; }
.xk-field--invalid input, .xk-field--invalid select, .xk-field--invalid textarea {
  border-color: var(--xk-danger);
}
.xk-field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
}
.xk-field--check input[type="checkbox"] {
  margin-top: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--xk-primary);
}
.xk-field--check label { font-weight: 450; font-size: .9rem; color: var(--xk-muted); }

.xk-alert {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: var(--xk-4);
  border-radius: var(--xk-r-md);
  border: 1px solid;
  font-size: .92rem;
  margin-bottom: var(--xk-4);
}
.xk-alert i { margin-top: .15rem; flex: none; }
.xk-alert--error { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.xk-alert--success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.xk-alert--info { background: var(--xk-primary-soft); border-color: var(--xk-primary-line); color: var(--xk-primary-ink); }

/* Estado de éxito integrado (contacto y demo). */
.xk-success {
  display: grid;
  justify-items: center;
  gap: var(--xk-4);
  text-align: center;
  padding: var(--xk-8) var(--xk-5);
}
.xk-success__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--xk-accent-soft);
  color: var(--xk-accent);
  font-size: 1.5rem;
  animation: xk-pop .45s var(--xk-ease);
}
@keyframes xk-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.xk-success p { color: var(--xk-muted); max-width: 34rem; }

/* -----------------------------------------------------------------------------
   19. Consentimiento de cookies
   -------------------------------------------------------------------------- */
.xk-cookie-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(7, 13, 28, .55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.xk-cookie-backdrop[hidden] { display: none; }

.xk-cookie {
  position: fixed;
  z-index: 1090;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  padding: var(--xk-6);
  background: #fff;
  border: 1px solid var(--xk-border);
  border-radius: var(--xk-r-lg);
  box-shadow: var(--xk-sh-lg);
}
.xk-cookie[hidden] { display: none; }
.xk-cookie--panel {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(38rem, calc(100vw - 2rem));
}
.xk-cookie__head { display: flex; align-items: flex-start; gap: var(--xk-4); }
.xk-cookie__icon {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--xk-r-md);
  background: var(--xk-primary-soft);
  color: var(--xk-primary);
  flex: none;
}
.xk-cookie h2 { font-size: 1.15rem; }
.xk-cookie p { color: var(--xk-muted); font-size: .92rem; margin-top: var(--xk-3); }
.xk-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xk-2);
  justify-content: flex-end;
  margin-top: var(--xk-5);
}
.xk-cookie__actions--split { justify-content: space-between; }
.xk-cookie__close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--xk-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .25rem;
  flex: none;
}
.xk-cookie__group {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--xk-4);
  padding: var(--xk-4);
  border: 1px solid var(--xk-border);
  border-radius: var(--xk-r-md);
  margin-top: var(--xk-3);
}
.xk-cookie__group b { font-size: .93rem; }
.xk-cookie__group p { margin-top: .2rem; font-size: .84rem; }
.xk-switch {
  position: relative;
  display: inline-block;
  width: 2.6rem;
  height: 1.45rem;
  flex: none;
  margin-top: .15rem;
}
.xk-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.xk-switch span {
  position: absolute;
  inset: 0;
  border-radius: var(--xk-r-pill);
  background: var(--xk-border-2);
  transition: background-color .2s var(--xk-ease);
  pointer-events: none;
}
.xk-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--xk-sh-xs);
  transition: transform .2s var(--xk-ease);
}
.xk-switch input:checked + span { background: var(--xk-primary); }
.xk-switch input:checked + span::after { transform: translateX(1.15rem); }
.xk-switch input:disabled + span { background: var(--xk-accent); opacity: .55; }
.xk-switch input:focus-visible + span { outline: 3px solid var(--xk-primary); outline-offset: 2px; }

/* Lanzador discreto. Círculo pequeño, nunca un botón flotante grande. */
.xk-cookie-launcher {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 1040;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--xk-border-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--xk-muted);
  font-size: .85rem;
  cursor: pointer;
  box-shadow: var(--xk-sh-sm);
  opacity: .68;
  transition: opacity .2s var(--xk-ease), color .2s var(--xk-ease), transform .2s var(--xk-ease);
}
.xk-cookie-launcher:hover {
  opacity: 1;
  color: var(--xk-primary);
  transform: translateY(-2px);
}
.xk-cookie-launcher::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + .5rem);
  white-space: nowrap;
  padding: .3rem .6rem;
  border-radius: var(--xk-r-sm);
  background: var(--xk-ink);
  color: #fff;
  font-size: .74rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--xk-ease);
}
.xk-cookie-launcher:hover::after,
.xk-cookie-launcher:focus-visible::after { opacity: 1; }
body.xk-scroll-locked { overflow: hidden; }

/* -----------------------------------------------------------------------------
   20. Reserva de demo (asistente de tres pasos)
   -------------------------------------------------------------------------- */
.xk-demo { display: grid; gap: var(--xk-7); align-items: start; }
@media (min-width: 62em) {
  .xk-demo { grid-template-columns: .82fr 1.18fr; gap: var(--xk-8); }
  .xk-demo__aside { position: sticky; top: calc(var(--xk-header-h) + 2rem); }
}

.xk-wizard {
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-xl);
  background: #fff;
  box-shadow: var(--xk-sh-lg);
  overflow: hidden;
}
.xk-wizard__head { padding: var(--xk-5) var(--xk-6) var(--xk-4); border-bottom: 1px solid var(--xk-border); }
.xk-wizard__title { font-size: 1.15rem; }

.xk-progress { display: flex; align-items: center; gap: .5rem; margin-top: var(--xk-4); }
.xk-progress__step {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--xk-muted);
  white-space: nowrap;
}
.xk-progress__step i {
  display: grid;
  place-items: center;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--xk-border-2);
  font-size: .66rem;
  font-style: normal;
  font-family: var(--xk-font-mono);
  color: var(--xk-muted);
  background: #fff;
  flex: none;
}
.xk-progress__step[data-state="current"] { color: var(--xk-primary); }
.xk-progress__step[data-state="current"] i { border-color: var(--xk-primary); color: var(--xk-primary); }
.xk-progress__step[data-state="done"] { color: var(--xk-accent); }
.xk-progress__step[data-state="done"] i {
  border-color: var(--xk-accent);
  background: var(--xk-accent);
  color: #fff;
}
.xk-progress__bar { flex: 1; height: 1px; background: var(--xk-border-2); min-width: .8rem; }
@media (max-width: 30em) {
  .xk-progress__step span { display: none; }
  .xk-progress__step[data-state="current"] span { display: inline; }
}

.xk-wizard__body { position: relative; padding: var(--xk-6); min-height: 25rem; }
.xk-wizard__step { display: none; }
.xk-wizard__step[data-active="true"] {
  display: block;
  animation: xk-step-in .3s var(--xk-ease);
}
@keyframes xk-step-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.xk-wizard[data-dir="back"] .xk-wizard__step[data-active="true"] {
  animation-name: xk-step-in-back;
}
@keyframes xk-step-in-back {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.xk-wizard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xk-3);
  padding: var(--xk-4) var(--xk-6);
  border-top: 1px solid var(--xk-border);
  background: var(--xk-surface);
}
.xk-wizard__foot .xk-btn--text { margin-right: auto; }

.xk-wizard__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xk-2) var(--xk-5);
  padding: var(--xk-4);
  margin-bottom: var(--xk-5);
  border: 1px solid var(--xk-primary-line);
  border-radius: var(--xk-r-md);
  background: var(--xk-primary-soft);
  font-size: .9rem;
}
.xk-wizard__summary b { color: var(--xk-primary-ink); font-weight: 700; }
.xk-wizard__summary span { display: inline-flex; align-items: center; gap: .4rem; color: var(--xk-primary-ink); }

/* Calendario */
.xk-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xk-3);
  margin-bottom: var(--xk-4);
}
.xk-cal__title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
}
.xk-cal__title::first-letter { text-transform: uppercase; }
.xk-cal__nav {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-sm);
  background: #fff;
  color: var(--xk-text);
  cursor: pointer;
}
.xk-cal__nav[disabled] { opacity: .35; cursor: default; }
.xk-cal__weekdays, .xk-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
}
.xk-cal__weekdays {
  margin-bottom: .35rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--xk-muted);
  text-align: center;
}
.xk-cal__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--xk-r-sm);
  background: none;
  color: var(--xk-muted);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.xk-cal__day--free {
  background: var(--xk-bg);
  border-color: var(--xk-primary-line);
  color: var(--xk-text);
  font-weight: 650;
  cursor: pointer;
  transition: background-color .16s var(--xk-ease), transform .16s var(--xk-ease);
}
.xk-cal__day--free:hover { background: var(--xk-primary-soft); transform: translateY(-1px); }
.xk-cal__day--today { box-shadow: inset 0 0 0 1px var(--xk-accent); }
.xk-cal__day[aria-pressed="true"] {
  background: var(--xk-primary);
  border-color: var(--xk-primary);
  color: #fff;
}
.xk-cal__day--empty { visibility: hidden; }
.xk-cal__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  margin-top: var(--xk-4);
  font-size: .78rem;
  color: var(--xk-muted);
}
.xk-cal__key {
  display: inline-block;
  width: .7rem; height: .7rem;
  border-radius: 3px;
  margin-right: .15rem;
  vertical-align: -1px;
}
.xk-cal__key--free { border: 1px solid var(--xk-primary-line); background: var(--xk-bg); }
.xk-cal__key--today { box-shadow: inset 0 0 0 1px var(--xk-accent); }

/* Horas */
.xk-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--xk-2);
  margin-top: var(--xk-4);
}
.xk-slot {
  padding: .7rem .5rem;
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-sm);
  background: #fff;
  font-family: var(--xk-font-mono);
  font-size: .92rem;
  font-weight: 600;
  color: var(--xk-text);
  cursor: pointer;
  transition: border-color .16s var(--xk-ease), background-color .16s var(--xk-ease),
              transform .16s var(--xk-ease);
}
.xk-slot:hover { border-color: var(--xk-primary); background: var(--xk-primary-soft); transform: translateY(-1px); }
.xk-slot[aria-pressed="true"] { background: var(--xk-primary); border-color: var(--xk-primary); color: #fff; }

.xk-demo__bullets { display: grid; gap: var(--xk-4); margin-top: var(--xk-6); }
.xk-demo__bullets li {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: var(--xk-3);
  align-items: start;
  list-style: none;
}
.xk-demo__bullets b { display: block; font-weight: 650; font-size: .95rem; }
.xk-demo__bullets span { color: var(--xk-muted); font-size: .89rem; }
.xk-demo__bullets i {
  display: grid;
  place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: var(--xk-r-sm);
  background: var(--xk-primary-soft);
  color: var(--xk-primary);
  font-size: .78rem;
}

.xk-confirm { display: grid; justify-items: center; gap: var(--xk-4); text-align: center; }
.xk-confirm__icon {
  display: grid;
  place-items: center;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: var(--xk-accent-soft);
  color: var(--xk-accent);
  font-size: 1.4rem;
  animation: xk-pop .45s var(--xk-ease);
}
.xk-confirm__detail {
  display: grid;
  gap: var(--xk-2);
  margin: var(--xk-2) 0;
  padding: var(--xk-5) var(--xk-6);
  border: 1px solid var(--xk-border);
  border-radius: var(--xk-r-md);
  background: var(--xk-surface);
  min-width: min(20rem, 100%);
}
.xk-confirm__detail dt {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--xk-muted);
}
.xk-confirm__detail dd {
  margin: 0;
  font-family: var(--xk-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--xk-text);
}
.xk-confirm__detail dd::first-letter { text-transform: uppercase; }

/* -----------------------------------------------------------------------------
   21. Autenticación
   -------------------------------------------------------------------------- */
.xk-auth { display: grid; gap: var(--xk-7); align-items: start; }
@media (min-width: 62em) {
  .xk-auth--split { grid-template-columns: 1.05fr .95fr; gap: var(--xk-8); }
}
.xk-auth__panel {
  padding: var(--xk-7);
  border: 1px solid var(--xk-border);
  border-radius: var(--xk-r-xl);
  background: #fff;
  box-shadow: var(--xk-sh-md);
}
@media (max-width: 34em) { .xk-auth__panel { padding: var(--xk-5); } }
.xk-auth--single { max-width: 30rem; margin-inline: auto; }
.xk-auth__title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.03em; }
.xk-auth__intro { margin-top: var(--xk-3); color: var(--xk-muted); }
.xk-auth__form { margin-top: var(--xk-6); }
.xk-auth__actions { display: grid; gap: var(--xk-3); margin-top: var(--xk-5); }
.xk-auth__foot {
  margin-top: var(--xk-5);
  padding-top: var(--xk-5);
  border-top: 1px solid var(--xk-border);
  font-size: .92rem;
  color: var(--xk-muted);
  text-align: center;
}
.xk-auth__aside { display: grid; gap: var(--xk-6); align-content: start; }

/* -----------------------------------------------------------------------------
   22. Páginas de texto (legales)
   -------------------------------------------------------------------------- */
.xk-legal {
  max-width: 46rem;
  margin-inline: auto;
  color: var(--xk-muted);
  line-height: 1.7;
}
.xk-legal h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 800; margin-bottom: var(--xk-5); }
.xk-legal h2 { font-size: 1.25rem; margin-top: var(--xk-7); margin-bottom: var(--xk-3); }
.xk-legal h3 { font-size: 1.05rem; margin-top: var(--xk-5); margin-bottom: var(--xk-2); }
.xk-legal p, .xk-legal li { margin-bottom: var(--xk-3); }
.xk-legal ul, .xk-legal ol { padding-left: 1.4rem; margin-bottom: var(--xk-4); }
.xk-legal strong { color: var(--xk-text); }
.xk-legal table { width: 100%; border-collapse: collapse; margin-bottom: var(--xk-5); font-size: .9rem; }
.xk-legal th, .xk-legal td { padding: .6rem; border: 1px solid var(--xk-border); text-align: left; }
.xk-legal th { background: var(--xk-surface); color: var(--xk-text); }

/* -----------------------------------------------------------------------------
   22 bis. Piezas de páginas concretas
   Componentes pequeños que sólo usa una plantilla y no merecen sección propia.
   -------------------------------------------------------------------------- */

/* 404 y páginas de una sola idea. */
.xk-standalone {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: var(--xk-4);
  justify-items: center;
  padding-block: var(--xk-8);
}
.xk-standalone__code {
  font-family: var(--xk-font-display);
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(160deg, var(--xk-primary), var(--xk-accent));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Fecha de actualización de un texto legal. */
.xk-legal__meta {
  display: inline-block;
  padding: .3rem .75rem;
  margin-bottom: var(--xk-5);
  border-radius: var(--xk-r-pill);
  background: var(--xk-surface-2);
  font-size: .84rem;
}

/* Roadmap. */
.xk-roadmap__list {
  list-style: none;
  margin: var(--xk-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--xk-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.xk-note--narrow { max-width: 40rem; }

/* Autenticación en una sola columna estrecha. */
.xk-auth__panel--narrow { max-width: 30rem; margin-inline: auto; width: 100%; }

/* Casilla de aceptación con texto largo (registro). */
.xk-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  margin-bottom: var(--xk-4);
  font-size: .9rem;
  color: var(--xk-muted);
}
.xk-checkbox input[type="checkbox"] {
  margin-top: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--xk-primary);
}

/* Código de verificación de seis dígitos. */
.xk-code-input {
  width: 100%;
  padding: .9rem;
  border: 1px solid var(--xk-border-2);
  border-radius: var(--xk-r-md);
  background: var(--xk-bg);
  font-family: var(--xk-font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .45em;
  text-align: center;
  text-indent: .45em;
  color: var(--xk-text);
}
.xk-code-input:focus {
  outline: none;
  border-color: var(--xk-primary);
  box-shadow: 0 0 0 3px var(--xk-primary-soft);
}

/* -----------------------------------------------------------------------------
   23. Utilidades
   -------------------------------------------------------------------------- */
.xk-m-0 { margin: 0 !important; }
.xk-mt-2 { margin-top: var(--xk-2); }
.xk-mt-3 { margin-top: var(--xk-3); }
.xk-mt-4 { margin-top: var(--xk-4); }
.xk-mt-5 { margin-top: var(--xk-5); }
.xk-mt-6 { margin-top: var(--xk-6); }
.xk-mt-7 { margin-top: var(--xk-7); }
.xk-mt-8 { margin-top: var(--xk-8); }
.xk-center { text-align: center; }
.xk-muted { color: var(--xk-muted); }
.xk-measure { max-width: var(--xk-measure); }

/* Revelado al hacer scroll. El estado inicial sólo se aplica cuando JS ha
   marcado el documento: sin JS, el contenido es visible desde el principio. */
[data-xk-reveal-ready] [data-reveal] {
  opacity: 0;
  transition: opacity var(--xk-dur) var(--xk-ease), transform var(--xk-dur) var(--xk-ease);
  transition-delay: var(--xk-delay, 0ms);
  will-change: opacity, transform;
}
[data-xk-reveal-ready] [data-reveal="fade-up"]    { transform: translateY(22px); }
[data-xk-reveal-ready] [data-reveal="fade-left"]  { transform: translateX(-24px); }
[data-xk-reveal-ready] [data-reveal="fade-right"] { transform: translateX(24px); }
[data-xk-reveal-ready] [data-reveal="scale-in"]   { transform: scale(.965); }
[data-xk-reveal-ready] [data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* -----------------------------------------------------------------------------
   24. Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-xk-reveal-ready] [data-reveal] { opacity: 1 !important; transform: none !important; }
  .xk-brain__wires path { stroke-dashoffset: 0 !important; }
  .xk-brain__node::after { opacity: 1 !important; }
}

/* -----------------------------------------------------------------------------
   Agenda de demos servida desde el servidor

   El asistente de reserva funciona sin JavaScript: cada paso es un enlace, no
   un `click` interceptado. Las piezas del calendario y de las horas se
   escribieron para `<button>`, así que aquí se completan para que un `<a>` se
   vea exactamente igual, y se añaden los dos estados que el servidor sí puede
   distinguir y el asistente antiguo no pintaba: día bloqueado y navegación de
   mes sin destino.
   -------------------------------------------------------------------------- */
a.xk-cal__day,
a.xk-slot,
a.xk-cal__nav { text-decoration: none; }
a.xk-slot { display: grid; place-items: center; }
a.xk-cal__nav { display: inline-grid; place-items: center; }
.xk-cal__day--blocked { text-decoration: line-through; }
.xk-cal__nav[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.xk-cal__key--blocked { border: 1px solid var(--xk-border-2); text-decoration: line-through; }
.xk-slots--empty { color: var(--xk-muted); font-size: .92rem; }

/* En móvil, el pie del asistente lleva dos enlaces de texto («elegir otro día»
   y «ninguna me encaja») que a 375 px no caben en una línea: el segundo se
   salía del panel. Envuelve. */
@media (max-width: 520px) {
  .xk-wizard__foot { flex-wrap: wrap; row-gap: var(--xk-2); }
  .xk-wizard__foot .xk-btn--text { margin-right: 0; }
}