/* ═══════════════════════════════════════════════════════════════
   KC UNIVERSE · KCS foundation (home, hub, /crear-preview/)
   Tokens + primitives from the KC-Center Lab, resolved to literals for a static site.
   Contract: docs/kcs-rebirth-666/02_KC_UNIVERSE_DESIGN_CONTRACT.md §2-§5.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts: 6 local subsets (Latin + es-MX punctuation), no CDN. ── */
@font-face { font-family: 'Cinzel'; src: url('/assets/fonts/kcs/cinzel-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('/assets/fonts/kcs/cinzel-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/kcs/space-grotesk-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/kcs/space-grotesk-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/assets/fonts/kcs/courier-prime-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/assets/fonts/kcs/courier-prime-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark; /* Samsung/Chrome forced dark leaves a declared dark page alone */

  /* ── Dark family ── */
  --kcu-void: #04060C;
  --kcu-canvas: var(--kcu-void);
  --kcu-obsidian: #080B14;
  --kcu-surface: #0D1120;
  --kcu-elevated: #121729;
  --kcu-hover: #182034;
  --kcu-astral:
    radial-gradient(circle at 14% 0%, rgba(212, 175, 55, 0.09), transparent 30%),
    linear-gradient(162deg, #080C16 0%, #05070E 55%, #03040A 100%);
  --kcu-space-deep: linear-gradient(162deg, #060812 0%, #030409 58%, #010205 100%);
  --kcu-space-edge: linear-gradient(118deg, rgba(112, 240, 255, 0.82), rgba(212, 175, 55, 0.84), rgba(112, 240, 255, 0.42));
  --kcu-page-halo: radial-gradient(120% 80% at 50% -10%, rgba(60, 120, 255, 0.07), transparent 60%);

  /* ── Ink ── */
  --kcu-ink: #F0EDE8;
  --kcu-ink-2: #CFCFD2;
  --kcu-ink-3: #A6ABB8;

  /* ── Orion is interaction ── */
  --kcu-action: #83B4FF;   /* text on it: --kcu-void, 9.59:1 */
  --kcu-orion-soft: #5B8DEF;
  --kcu-orion-bright: #B8D4FF; /* active text only, never a large fill */
  --kcu-focus: #6FE3E0;    /* focus + live state only */
  --kcu-focus-ring: rgba(112, 240, 255, 0.86);
  --kcu-space-cyan: #70F0FF; /* kc-space-btn icon only */
  --kcu-constellation-line: rgba(184, 212, 255, 0.16);

  /* ── Authority + semantic ── */
  --kcu-gold: #D4AF37;
  --kcu-gold-light: #F0CC5A;
  --kcu-gold-dark: #9A7D1A;
  --kcu-gold-metal: linear-gradient(180deg, #F0CC5A 0%, #D4AF37 55%, #9A7D1A 100%);
  --kcu-champagne: #E6D3A8;
  --kcu-success: #68C995;
  --kcu-warning: #E7B85C;
  --kcu-danger: #F07786;

  /* ── Borders ── */
  --kcu-border: #334052;
  --kcu-border-subtle: #202836;
  --kcu-border-signature: rgba(212, 175, 55, 0.22);
  --kcu-border-selected: #D4AF37;

  /* ── Radii ── */
  --kcu-radius-card: 20px;
  --kcu-radius-inner: 14px;
  --kcu-radius-control: 12px;
  --kcu-radius-pill: 999px;

  /* ── Depth: edge light + layered black, never a luminous halo ── */
  --kcu-edge-light: inset 0 1px 0 rgba(150, 180, 235, 0.07);
  --kcu-shadow-flat: var(--kcu-edge-light);
  --kcu-shadow-contact:
    inset 0 1px 0 rgba(150, 180, 235, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 10px 22px -8px rgba(0, 0, 0, 0.7);
  --kcu-shadow-elevated:
    inset 0 1px 0 rgba(150, 180, 235, 0.09),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 18px 38px -10px rgba(0, 0, 0, 0.8),
    0 40px 72px -28px rgba(0, 0, 0, 0.75);

  /* ── Star seal: 4-point clip ── */
  --kcu-star-seal-clip: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);

  /* ── Type roles + scale ── */
  --kcu-font-display: 'Cinzel', Georgia, serif;
  --kcu-font-ui: 'Space Grotesk', system-ui, sans-serif;
  --kcu-font-folio: 'Courier Prime', 'Courier New', monospace;
  --kcu-text-h1: clamp(1.9rem, 1.3rem + 3vw, 4.25rem);
  --kcu-text-h2: clamp(1.55rem, 1.2rem + 1.6vw, 2.75rem);
  --kcu-text-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --kcu-text-body: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --kcu-text-small: 0.9375rem;
  --kcu-text-micro: 0.75rem; /* floor 0.72rem (11.5px) */
  --kcu-leading-display: 1.08;
  --kcu-leading-body: 1.6;

  /* ── Space scale (4px base) ── */
  --kcu-space-1: 0.25rem;
  --kcu-space-2: 0.5rem;
  --kcu-space-3: 0.75rem;
  --kcu-space-4: 1rem;
  --kcu-space-5: 1.5rem;
  --kcu-space-6: 2rem;
  --kcu-space-7: 3rem;
  --kcu-space-8: 4rem;
  --kcu-space-9: 6rem;
  --kcu-space-10: 8rem;

  /* ── Layout ── */
  --kcu-gutter: clamp(16px, 4vw, 40px);
  --kcu-container: 1200px;
  --kcu-container-wide: 1320px;
  --kcu-container-text: 42rem;
  --kcu-section-y: clamp(4rem, 2.6rem + 6vw, 8rem);
  --kcu-section-y-tight: clamp(3rem, 2.2rem + 3.5vw, 5.5rem);
  --kcu-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ── Motion: settle without overshoot, leave quickly ── */
  --kcu-dur-press: 120ms;
  --kcu-dur-fast: 140ms;
  --kcu-dur-settle: 260ms;
  --kcu-dur-align: 600ms;
  --kcu-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kcu-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --kcu-ease-press: cubic-bezier(0.3, 0.7, 0.4, 1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--kcu-action); text-underline-offset: 0.18em; }

body {
  min-height: 100vh;
  /* Halo sized in px, not by document height; no fixed attachment (iOS repaint). */
  background: var(--kcu-page-halo) top center / 100% 960px no-repeat, var(--kcu-canvas);
  color: var(--kcu-ink);
  font-family: var(--kcu-font-ui);
  font-size: var(--kcu-text-body);
  line-height: var(--kcu-leading-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

:focus-visible { outline: 3px solid var(--kcu-focus-ring); outline-offset: 4px; }

/* ── Type roles ── */
.kcu-display {
  font-family: var(--kcu-font-display);
  font-weight: 700;
  line-height: var(--kcu-leading-display);
  letter-spacing: 0.015em;
  text-wrap: balance;
}
.kcu-eyebrow, .kcu-folio {
  font-family: var(--kcu-font-folio);
  text-transform: uppercase;
  line-height: 1.35;
}
/* Tracking opens as the size drops. */
.kcu-eyebrow { font-size: var(--kcu-text-micro); font-weight: 700; letter-spacing: 0.16em; }
.kcu-folio { font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.95rem); font-weight: 400; letter-spacing: 0.1em; }
.kcu-num { font-variant-numeric: tabular-nums lining-nums; }

.kcu-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.kcu-skip-link {
  position: absolute;
  top: 12px;
  left: var(--kcu-gutter);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--kcu-border);
  border-radius: var(--kcu-radius-pill);
  background: var(--kcu-obsidian);
  color: var(--kcu-ink);
  font: 700 0.8rem/1 var(--kcu-font-ui);
  letter-spacing: 0.04em;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--kcu-dur-fast) var(--kcu-ease);
}
.kcu-skip-link:focus, .kcu-skip-link:focus-visible { transform: none; }

/* ── KCSurface: material, depth and perimeter only. Depth by shadow, never glow. ── */
.kcu-surface {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--kcu-border-subtle);
  border-radius: var(--kcu-radius-card);
  background: var(--kcu-astral);
  box-shadow: var(--kcu-shadow-flat);
  color: var(--kcu-ink);
}
.kcu-surface[data-depth='contact'] { box-shadow: var(--kcu-shadow-contact); }
.kcu-surface[data-depth='elevated'] { box-shadow: var(--kcu-shadow-elevated); }
.kcu-surface[data-perimeter='signature'] { border-color: var(--kcu-border-signature); }
.kcu-surface[data-perimeter='selected'] { border-color: var(--kcu-border-selected); }

/* ── KCStarfield: one static layer, aria-hidden, under content inside an isolated parent. ── */
.kcu-starfield {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.8;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255, 255, 255, 0.85), transparent 62%),
    radial-gradient(1px 1px at 34% 62%, rgba(200, 220, 255, 0.6), transparent 62%),
    radial-gradient(1.6px 1.6px at 68% 24%, rgba(255, 255, 255, 0.7), transparent 62%),
    radial-gradient(1px 1px at 82% 71%, rgba(190, 215, 255, 0.55), transparent 62%),
    radial-gradient(1px 1px at 52% 88%, rgba(255, 255, 255, 0.45), transparent 62%),
    radial-gradient(1.2px 1.2px at 92% 40%, rgba(220, 235, 255, 0.65), transparent 62%),
    radial-gradient(1px 1px at 24% 84%, rgba(255, 255, 255, 0.4), transparent 62%);
  background-size: 190px 150px;
}
.kcu-starfield--rare {
  opacity: 0.6;
  background-image:
    radial-gradient(1.3px 1.3px at 18% 26%, rgba(255, 255, 255, 0.8), transparent 62%),
    radial-gradient(1px 1px at 63% 71%, rgba(200, 220, 255, 0.6), transparent 62%),
    radial-gradient(1.5px 1.5px at 86% 18%, rgba(255, 255, 255, 0.65), transparent 62%);
  background-size: 280px 230px;
}

/* ── Star seal: the 4-point KC mark. Size with --kcu-seal-size. ── */
.kcu-star-seal {
  display: inline-block;
  flex: none;
  width: var(--kcu-seal-size, 14px);
  height: var(--kcu-seal-size, 14px);
  clip-path: var(--kcu-star-seal-clip);
  background: var(--kcu-gold-metal);
}

/* ── State chip: tone at 40% (edge) / 9% (fill) over obsidian, resolved per tone. ── */
.kcu-state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content; /* never stretched by a grid/flex parent */
  min-height: 36px;
  padding: 0 0.95rem;
  border: 1px solid var(--kcu-border);
  border-radius: var(--kcu-radius-pill);
  background: var(--kcu-obsidian);
  color: var(--kcu-ink-2);
  font: 700 var(--kcu-text-micro)/1 var(--kcu-font-folio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Marker shape carries the state too, so color is never the only signal. */
.kcu-state::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kcu-state--live { border-color: #2E5748; background: #111C20; color: var(--kcu-success); }
.kcu-state--soon { border-color: #615031; border-style: dashed; background: #1C1B1A; color: #BA954E; }
.kcu-state--soon::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.kcu-state--info { border-color: #615B4F; background: #1C1D21; color: var(--kcu-champagne); }
.kcu-state--info::before { width: 9px; height: 9px; border-radius: 0; clip-path: var(--kcu-star-seal-clip); }

/* ═══════════════════════════════════════════════════
   KC SPACE BUTTON · primary action (KC-Center globals.css:729-844
   + KC Universe skin kc-universe.css:14-57, lab gate 01C).
   Markup: decoration spans first (.kc-space-btn-glow, .kc-space-btn-stars,
   optional .kc-space-btn-icon), then .kc-space-btn-text. <a> or <button>.
   ═══════════════════════════════════════════════════ */
/* Sky drift on the compositor: the star layer is one shared period wider (816px = lcm of the 34px and 48px grids)
   and slides exactly that far, so the loop is seamless; same 41.67 px/s as the old background-position drift. */
@keyframes kc-space-star-drift {
  from { transform: translateX(0); }
  to { transform: translateX(816px); }
}
@keyframes kc-space-gradient {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}

.kc-space-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-width: min(230px, 86vw);
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
  overflow: hidden;
  border: double 1px transparent;
  border-radius: var(--kcu-radius-pill);
  padding: 0.86rem 1.32rem;
  background-image:
    radial-gradient(circle at 16% 0%, rgba(212, 175, 55, 0.08), transparent 42%),
    var(--kcu-space-deep),
    var(--kcu-space-edge);
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
  color: #F4F0E8;
  box-shadow:
    0 0 0 1px rgba(244, 240, 232, 0.03),
    0 18px 42px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(112, 240, 255, 0.12);
  font-family: var(--kcu-font-folio);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  animation: kc-space-gradient 6s ease-in-out infinite;
}
.kc-space-btn[data-play]:not(:disabled) {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(112, 240, 255, 0.2),
    0 0 18px rgba(212, 175, 55, 0.1);
}
.kc-space-btn[data-play]:not(:disabled) .kc-space-btn-icon { transform: rotate(45deg) scale(1.08); }
@media (hover: hover) and (pointer: fine) {
  .kc-space-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.015);
    box-shadow:
      0 22px 50px rgba(0, 0, 0, 0.42),
      0 0 34px rgba(112, 240, 255, 0.2),
      0 0 18px rgba(212, 175, 55, 0.1);
  }
  .kc-space-btn:hover:not(:disabled) .kc-space-btn-icon { transform: rotate(45deg) scale(1.08); }
}
.kc-space-btn:active:not(:disabled) { transform: scale(0.98); }
.kc-space-btn:focus-visible { outline: 3px solid var(--kcu-focus-ring); outline-offset: 4px; }
.kc-space-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  background-image:
    radial-gradient(circle at 16% 0%, rgba(212, 175, 55, 0.04), transparent 42%),
    linear-gradient(162deg, rgba(6, 8, 18, 0.6), rgba(1, 2, 5, 0.6)),
    linear-gradient(118deg, rgba(112, 240, 255, 0.28), rgba(212, 175, 55, 0.3), rgba(112, 240, 255, 0.14));
  box-shadow: none;
  animation: none;
}

.kc-space-btn-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 50%, rgba(112, 240, 255, 0.3), transparent 22%),
    radial-gradient(circle at 84% 50%, rgba(212, 175, 55, 0.22), transparent 24%);
  opacity: 0.72;
  filter: blur(12px);
}
.kc-space-btn-stars {
  position: absolute;
  inset: 0 0 0 -816px;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    radial-gradient(rgba(244, 240, 232, 0.72) 1px, transparent 1px),
    radial-gradient(rgba(112, 240, 255, 0.62) 1px, transparent 1px);
  background-position: 0 0, 18px 11px;
  background-size: 34px 34px, 48px 48px;
  animation: kc-space-star-drift 19.584s linear infinite;
}
/* Off screen (the page sets [data-idle] from an IntersectionObserver): sky and breathing hold still. */
.kc-space-btn[data-idle], .kc-space-btn[data-idle] .kc-space-btn-stars { animation-play-state: paused; }
.kc-space-btn-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 1.1rem;
  flex-shrink: 0;
  place-items: center;
  color: var(--kcu-space-cyan);
  filter: drop-shadow(0 0 7px rgba(112, 240, 255, 0.64));
  transition: transform 180ms ease;
}
.kc-space-btn-text { position: relative; z-index: 1; }

/* ── KCButton secondary family (kc-universe-button.css): pill >= 44px, tap via [data-play]. ── */
.kcu-btn {
  --tone: var(--kcu-action);
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 1.5em;
  border: 1px solid var(--kcu-border);
  border-radius: var(--kcu-radius-pill);
  background: var(--kcu-obsidian);
  color: var(--kcu-ink);
  font: 700 0.76rem/1 var(--kcu-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: color var(--kcu-dur-fast) var(--kcu-ease), border-color var(--kcu-dur-fast) var(--kcu-ease), transform var(--kcu-dur-press) var(--kcu-ease-press);
}
.kcu-btn[data-tone='gold'] { --tone: var(--kcu-gold); }
.kcu-btn svg { width: 18px; height: 18px; flex: none; }
.kcu-btn__label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.kcu-btn:disabled { cursor: not-allowed; opacity: 0.45; }
.kcu-btn:focus-visible, .kcu-btn[data-play] { border-color: var(--tone); color: var(--tone); }
.kcu-btn:active:not(:disabled) { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .kcu-btn:hover:not(:disabled) { border-color: var(--tone); color: var(--tone); }
}

/* hueco: tertiary, pressed-in engraving, gold label shrinks. */
.kcu-btn--hueco {
  border: 2px solid var(--kcu-void);
  background: var(--kcu-obsidian);
  color: var(--kcu-gold-light);
  box-shadow: inset #334052 -1px -1px 6px 0, #334052 -1px -1px 6px 0;
  transition: box-shadow 0.3s;
}
.kcu-btn--hueco .kcu-btn__label { transition: transform 0.3s; }
.kcu-btn--hueco:focus-visible, .kcu-btn--hueco[data-play] { border-color: var(--kcu-void); color: var(--kcu-gold-light); }
@media (hover: hover) and (pointer: fine) {
  .kcu-btn--hueco:hover:not(:disabled) {
    border-color: var(--kcu-void);
    color: var(--kcu-gold-light);
    box-shadow: inset 0 -6px 18px -6px #04060C, inset 0 6px 18px -6px #04060C, -1px -1px 6px 0 #334052;
  }
  .kcu-btn--hueco:hover:not(:disabled) .kcu-btn__label { transform: scale(0.9); }
}
.kcu-btn--hueco:active:not(:disabled), .kcu-btn--hueco[data-play] {
  transform: none;
  box-shadow: inset 0 -12px 12px -6px #04060C, inset 0 12px 12px -6px #04060C, inset 12px 0 12px -6px #04060C, inset -12px 0 12px -6px #04060C, -1px -1px 6px 0 #334052;
}
.kcu-btn--hueco:active:not(:disabled) .kcu-btn__label, .kcu-btn--hueco[data-play] .kcu-btn__label { transform: scale(0.8); }

/* ── Reduced motion: everything lands on its final state; the button sky and breathing stop. ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .kc-space-btn, .kc-space-btn-stars { animation: none; }
}