/* ==========================================================================
   Keelbeat · hoja de estilo para artefactos (landing, libros de marca, demos)
   Marca: sello 46 «Sello gastado». Estética de cartel: campo amarillo, tinta
   negra gigante, el rojo solo en el sello y en lo que se rompe.

   Fuentes (Google Fonts), en el <head> o al principio del artefacto:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&family=Shippori+Mincho+B1:wght@800&display=swap">

   Tema: claro por defecto; oscuro con el sistema, o forzado con
   data-theme="dark" | "light" en <html>.
   ========================================================================== */

:root {
  /* Marca (fija en los dos temas) */
  --kb-tinta: #141311;
  --kb-noche: #0d0c0b;
  --kb-sangre: #c8102e;
  --kb-viva: #e0263f;
  --kb-hueso: #f1ebdd;
  --kb-papel: #f7f4ec;
  --kb-ceniza: #4a463f;
  --kb-amarillo: #f5c400;
  --kb-amarillo-hover: #e5b700;

  /* Tipos */
  --kb-font-logo: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --kb-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kb-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --kb-font-jp: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* Escala tipográfica (fluida) */
  --kb-step--1: .8125rem;
  --kb-step-0: 1rem;
  --kb-step-1: 1.1875rem;
  --kb-step-2: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --kb-step-3: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  --kb-step-4: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  --kb-step-5: clamp(3.25rem, 1.2rem + 8.4vw, 9rem);

  /* Forma y movimiento */
  --kb-radius-sm: 6px;
  --kb-radius-md: 8px;
  --kb-radius-lg: 14px;
  --kb-ease: cubic-bezier(0.2, 0, 0, 1);
  --kb-ease-stamp: cubic-bezier(0.3, 0, 0.2, 1);
  --kb-fast: 150ms;
  --kb-base: 200ms;
  --kb-stamp-angle: -7deg;

  /* Tema claro */
  --kb-bg: #f7f4ec;
  --kb-surface: #ffffff;
  --kb-surface-2: #f2eee4;
  --kb-sunken: #ede8dc;
  --kb-line: #e8e2d5;
  --kb-line-strong: #d2caba;
  --kb-text: #141311;
  --kb-text-2: #4a463f;
  --kb-text-3: #6b655b;
  --kb-logo: #c8102e;
  --kb-logo-ink: #141311;
  --kb-accent: #f5c400;
  --kb-on-accent: #141311;
  --kb-accent-text: #141311; /* en claro, el acento como texto es tinta con amarillo detrás */
  --kb-focus: #a37b00;
  --kb-success: #1d7444;
  --kb-success-bg: #e4f3ea;
  --kb-warning: #a04800;
  --kb-warning-bg: #ffeedf;
  --kb-danger: #b42318;
  --kb-danger-bg: #fdecea;
  --kb-info: #2f5d7c;
  --kb-info-bg: #e6eef4;
  --kb-shadow-card: 0 1px 2px rgba(20, 19, 17, 0.06), 0 1px 3px rgba(20, 19, 17, 0.08);
  --kb-shadow-pop: 0 12px 32px rgba(20, 19, 17, 0.18), 0 2px 6px rgba(20, 19, 17, 0.1);

  /* Series de gráficas (ECharts): azul, turquesa, amarillo, violeta, rosa, piedra */
  --kb-s1: #3b6ff5;
  --kb-s2: #0fa697;
  --kb-s3: #e5ae00;
  --kb-s4: #7c5cf2;
  --kb-s5: #e0479e;
  --kb-s6: #8a8378;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --kb-bg: #151413;
    --kb-surface: #23211f;
    --kb-surface-2: #2e2b28;
    --kb-sunken: #0f0e0d;
    --kb-line: #3b3834;
    --kb-line-strong: #524d47;
    --kb-text: #f1ebdd;
    --kb-text-2: #bdb5a6;
    --kb-text-3: #a39b8c;
    --kb-logo: #e0263f;
    --kb-logo-ink: #f1ebdd;
    --kb-accent-text: #f5c400;
    --kb-focus: #f5c400;
    --kb-success: #5cc98e;
    --kb-success-bg: #0e2e1e;
    --kb-warning: #f59a4a;
    --kb-warning-bg: #3a220e;
    --kb-danger: #f2837a;
    --kb-danger-bg: #3a1719;
    --kb-info: #7fb2d6;
    --kb-info-bg: #13232f;
    --kb-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
    --kb-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px #524d47;
    --kb-s1: #6e9bff;
    --kb-s2: #2dd4bf;
    --kb-s3: #f5c400;
    --kb-s4: #a48bff;
    --kb-s5: #f27bbd;
    --kb-s6: #a8a196;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --kb-bg: #151413;
  --kb-surface: #23211f;
  --kb-surface-2: #2e2b28;
  --kb-sunken: #0f0e0d;
  --kb-line: #3b3834;
  --kb-line-strong: #524d47;
  --kb-text: #f1ebdd;
  --kb-text-2: #bdb5a6;
  --kb-text-3: #a39b8c;
  --kb-logo: #e0263f;
  --kb-logo-ink: #f1ebdd;
  --kb-accent-text: #f5c400;
  --kb-focus: #f5c400;
  --kb-success: #5cc98e;
  --kb-success-bg: #0e2e1e;
  --kb-warning: #f59a4a;
  --kb-warning-bg: #3a220e;
  --kb-danger: #f2837a;
  --kb-danger-bg: #3a1719;
  --kb-info: #7fb2d6;
  --kb-info-bg: #13232f;
  --kb-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
  --kb-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px #524d47;
  --kb-s1: #6e9bff;
  --kb-s2: #2dd4bf;
  --kb-s3: #f5c400;
  --kb-s4: #a48bff;
  --kb-s5: #f27bbd;
  --kb-s6: #a8a196;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body {
  background: var(--kb-bg);
  color: var(--kb-text);
  font-family: var(--kb-font-display);
  font-size: var(--kb-step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0;
}
code,
kbd,
pre {
  font-family: var(--kb-font-mono);
}
a {
  color: inherit;
  text-decoration-color: var(--kb-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
:focus-visible {
  outline: 3px solid var(--kb-focus);
  outline-offset: 2px;
}
::selection {
  background: var(--kb-amarillo);
  color: var(--kb-tinta);
}

/* ── Tipografía de cartel ─────────────────────────────────────────────── */
.kb-display {
  font-family: var(--kb-font-logo);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: .005em;
}
.kb-h1 {
  font-family: var(--kb-font-logo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--kb-step-5);
  line-height: 0.86;
}
.kb-h2 {
  font-family: var(--kb-font-logo);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--kb-step-4);
  line-height: 0.92;
}
.kb-h3 {
  font-family: var(--kb-font-display);
  font-weight: 700;
  font-size: var(--kb-step-1);
  line-height: 1.25;
}
.kb-lead {
  font-size: var(--kb-step-1);
  color: var(--kb-text-2);
  max-width: 60ch;
}
.kb-muted {
  color: var(--kb-text-2);
}
.kb-mono {
  font-family: var(--kb-font-mono);
  font-size: var(--kb-step--1);
}
.kb-jp {
  font-family: var(--kb-font-jp);
  font-weight: 800;
  writing-mode: vertical-rl;
  letter-spacing: .1em;
}

/* Rótulo: tinta sobre amarillo en los dos temas */
.kb-eyebrow {
  display: inline-block;
  background: var(--kb-amarillo);
  color: var(--kb-tinta);
  font-family: var(--kb-font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
}
/* Marcador: subraya con amarillo detrás del texto */
.kb-mark {
  box-shadow: inset 0 -.42em 0 var(--kb-amarillo);
}

/* ── Superficies de cartel ────────────────────────────────────────────── */
.kb-poster {
  background: var(--kb-amarillo);
  color: var(--kb-tinta);
}
.kb-ink {
  background: var(--kb-tinta);
  color: var(--kb-hueso);
}

/* Franja negra en diagonal (la «katana»). El texto que queda debajo se
   duplica en una capa .kb-slash-invert con el mismo clip-path y pasa a blanco. */
.kb-slash,
.kb-slash-invert {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    var(--kb-cut-a, 66%) 0,
    var(--kb-cut-b, 78%) 0,
    var(--kb-cut-c, 58%) 100%,
    var(--kb-cut-d, 46%) 100%
  );
}
.kb-slash {
  background: var(--kb-tinta);
}
.kb-slash-invert {
  color: #ffffff;
  pointer-events: none;
}

/* Cinta: banda que cruza, con texto que corre */
.kb-tape {
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--kb-font-logo);
  text-transform: uppercase;
  font-size: var(--kb-step-2);
  line-height: 1;
  padding-block: .55em;
}
.kb-tape > span {
  display: inline-flex;
  gap: 1.2em;
  padding-right: 1.2em;
  animation: kb-marquee 28s linear infinite;
}
.kb-tape.reverse > span {
  animation-direction: reverse;
}

/* ── Componentes ──────────────────────────────────────────────────────── */
.kb-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .8em 1.25em;
  border: 0;
  cursor: pointer;
  border-radius: var(--kb-radius-sm);
  font: 700 .9375rem / 1 var(--kb-font-display);
  text-decoration: none;
  transition: transform var(--kb-fast) var(--kb-ease), background var(--kb-fast) var(--kb-ease),
    box-shadow var(--kb-fast) var(--kb-ease);
}
.kb-btn--primary {
  background: var(--kb-amarillo);
  color: var(--kb-tinta);
  box-shadow: 4px 4px 0 var(--kb-logo);
}
.kb-btn--primary:hover {
  background: var(--kb-amarillo-hover);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--kb-logo);
}
.kb-btn--ink {
  background: var(--kb-tinta);
  color: var(--kb-hueso);
  box-shadow: 4px 4px 0 var(--kb-sangre);
}
.kb-btn--ink:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--kb-sangre);
}
.kb-btn--ghost {
  background: transparent;
  color: inherit;
  /* Contorno y la misma sombra desplazada que los principales, en su propio color */
  box-shadow: inset 0 0 0 2px currentColor, 4px 4px 0 currentColor;
}
.kb-btn--ghost:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
  transform: translate(-1px, -1px);
  box-shadow: inset 0 0 0 2px currentColor, 5px 5px 0 currentColor;
}
/* Después de las variantes: si no, su :hover pisa el transform al pulsar */
.kb-btn:active {
  transform: translateY(1px);
}

.kb-card {
  background: var(--kb-surface);
  border-radius: var(--kb-radius-md);
  box-shadow: 0 0 0 1px var(--kb-line), var(--kb-shadow-card);
}
/* Foco de luz que sigue al cursor: el JS escribe --mx y --my en el elemento */
.kb-spot {
  position: relative;
  isolation: isolate;
}
.kb-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--kb-base) var(--kb-ease);
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--kb-amarillo) 26%, transparent),
    transparent 60%
  );
}
.kb-spot:hover::before {
  opacity: 1;
}

.kb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font: 600 .75rem / 1.6 var(--kb-font-display);
}
.kb-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.kb-pill--ok {
  background: var(--kb-success-bg);
  color: var(--kb-success);
}
.kb-pill--warn {
  background: var(--kb-warning-bg);
  color: var(--kb-warning);
}
.kb-pill--down {
  background: var(--kb-danger-bg);
  color: var(--kb-danger);
}
.kb-pill--info {
  background: var(--kb-info-bg);
  color: var(--kb-info);
}

.kb-code {
  background: var(--kb-noche);
  color: var(--kb-hueso);
  border-radius: var(--kb-radius-md);
  padding: 16px 18px;
  overflow-x: auto;
  font: .8125rem / 1.7 var(--kb-font-mono);
}
.kb-code .c {
  color: #8a8378;
}
.kb-code .k {
  color: var(--kb-amarillo);
}
.kb-code .s {
  color: #2dd4bf;
}
.kb-code .e {
  color: var(--kb-viva);
}

/* ── El sello ─────────────────────────────────────────────────────────── */
/* <svg class="kb-seal"><use href="#kb-seal"/></svg>: toma el color de --kb-logo */
.kb-seal {
  color: var(--kb-logo);
  display: block;
}
.kb-seal--stamped {
  transform: rotate(var(--kb-stamp-angle)) scale(0.9);
}
.kb-stamp-in {
  animation: kb-stamp .9s var(--kb-ease-stamp) both;
}

/* ── Revelado al hacer scroll ─────────────────────────────────────────── */
/* Visible por defecto. El JS solo marca .is-pending lo que está fuera de
   pantalla al cargar, y lo quita al entrar en vista. */
.kb-reveal {
  transition: opacity .7s var(--kb-ease), transform .7s var(--kb-ease), clip-path .9s var(--kb-ease);
}
.kb-reveal.is-pending {
  opacity: 0.25;
  transform: translateY(28px);
}
.kb-reveal--wipe.is-pending {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
}

/* ── Movimiento ───────────────────────────────────────────────────────── */
@keyframes kb-marquee {
  to {
    transform: translateX(-100%);
  }
}
@keyframes kb-stamp {
  0% {
    transform: scale(1.6) rotate(4deg);
    opacity: 0;
  }
  55% {
    transform: scale(0.92) rotate(var(--kb-stamp-angle));
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(var(--kb-stamp-angle));
    opacity: 1;
  }
}
@keyframes kb-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes kb-pulse {
  0%,
  60%,
  100% {
    transform: scale(1);
  }
  12% {
    transform: scale(1.12);
  }
  24% {
    transform: scale(0.98);
  }
  36% {
    transform: scale(1.07);
  }
}
@keyframes kb-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .kb-reveal.is-pending {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}