/* KCS home on top of /css/kc-universe.css (frozen). Derived literals noted inline. */
@font-face { font-family: 'Ramen Sauce'; src: url('/assets/fonts/kcs/ramen-sauce.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: optional; } /* PF-004: off the LCP path */
/* Metric twin: same advance (size-adjust) and line box as Ramen Sauce, so the swap does not move layout. */
@font-face { font-family: 'Ramen Sauce Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust: 75%; ascent-override: 130%; descent-override: 28.7%; line-gap-override: 0%; }
:root {
  --kcs-pad: max(var(--kcu-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --kcu-font-display: 'Ramen Sauce', 'Ramen Sauce Fallback', Georgia, serif; /* home only; the hub keeps Cinzel */
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body { overflow-wrap: break-word; } /* 200% text: a word wider than its column wraps instead of clipping */
/* Grain over the radial layers (no banding on OLED), scrolling with the page; never fixed, never blended, never animated. */
[data-kcs-ready] body { background: url('/assets/kcs/art/grain.webp') 0 0 / 256px 256px repeat, var(--kcu-page-halo) top center / 100% 960px no-repeat, var(--kcu-canvas); }
[data-kcs-ready] .kcs-footer { background: url('/assets/kcs/art/grain.webp') 0 0 / 256px 256px repeat, var(--kcu-obsidian); }
.kcu-display, .kcu-eyebrow { overflow-wrap: anywhere; }
.kcu-display { font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; } /* Ramen Sauce has one weight */
html:has(#kcsMenu[open]) { overflow: hidden; }

.kcs-wrap {
  width: 100%;
  max-width: calc(var(--kcu-container) + 2 * var(--kcu-gutter));
  margin-inline: auto;
  padding-inline: var(--kcs-pad);
}

/* ── Header: static, solid, no blur ── */
.kcs-header { position: relative; z-index: 20; }
.kcs-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kcu-space-4);
  max-width: calc(var(--kcu-container-wide) + 2 * var(--kcu-gutter));
  min-height: 64px;
  margin-inline: auto;
  padding: env(safe-area-inset-top, 0px) var(--kcs-pad) 0;
}
.kcs-header__bar { gap: 6px; }
.kcs-brand { display: inline-flex; flex: none; align-items: center; min-height: 44px; text-decoration: none; }
.kcs-brand__mark { color: var(--kcu-gold); font: 400 1.05rem/1.3 var(--kcu-font-display); letter-spacing: 0.3em; text-transform: uppercase; }
.kcs-brand__mark > span { color: #C8BBAA; }
.kcs-nav { display: none; }
.kcs-nav__list { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 0; padding: 0; list-style: none; }
.kcs-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--kcu-ink-2);
  font-size: var(--kcu-text-small);
  text-decoration: none;
}
.kcs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Doodle socials (old bar): pencil ring in a 44x44 target; hover (fine) or a 900 ms tap ([data-play]) paints it in the brand colour. */
.kcs-social { display: flex; flex: none; align-items: center; margin: 0 auto; padding: 0; list-style: none; }
.kcs-social__item { position: relative; }
.kcs-social__link { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: rgba(245, 237, 214, 0.75); text-decoration: none; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.kcs-social__link::before { content: ''; position: absolute; inset: 7px; border: 2px solid rgba(245, 237, 214, 0.5); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; box-shadow: 2px 3px 0 rgba(245, 237, 214, 0.2); filter: url(#kcs-pencil); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.kcs-social__svg { position: relative; width: 14px; height: 14px; fill: currentColor; transform: rotate(-5deg); transition: transform 0.3s ease, color 0.3s ease; }
.kcs-social__link[data-play] { transform: translateY(-4px) scale(1.1); animation: kcs-doodle-wiggle 0.3s ease-in-out infinite alternate; }
.kcs-social__link[data-play] .kcs-social__svg { color: #FFF; transform: rotate(12deg) scale(1.15); }
.kcs-social__link--fb[data-play]::before { border-color: #1877F2; background: #1877F2; box-shadow: 4px 7px 0 rgba(24, 119, 242, 0.4); }
.kcs-social__link--ig[data-play]::before { border-color: #CC2366; background: linear-gradient(45deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888); box-shadow: 4px 7px 0 rgba(204, 35, 102, 0.4); }
.kcs-social__link--wa[data-play]::before { border-color: #25D366; background: #25D366; box-shadow: 4px 7px 0 rgba(37, 211, 102, 0.4); }
.kcs-social__tip { position: absolute; z-index: 25; top: 100%; left: 50%; padding: 4px 10px; border: 2px solid #1E1E24; border-radius: 255px 25px 225px 25px / 25px 225px 25px 255px; box-shadow: 3px 4px 0 #1E1E24; color: #1E1E24; font: 700 0.72rem/1.2 var(--kcu-font-ui); letter-spacing: 0.04em; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-6px) rotate(-5deg); transition: opacity 0.35s, transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), visibility 0s linear 0.35s; }
.kcs-social__tip--fb { background: #A8D4FF; }
.kcs-social__tip--ig { background: #FFB5D8; }
.kcs-social__tip--wa { background: #B8F5C8; }
.kcs-social__link[data-play] + .kcs-social__tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(6px) rotate(3deg); transition-delay: 0s; }
@keyframes kcs-doodle-wiggle {
  0% { transform: translateY(-4px) scale(1.1) rotate(-3deg); }
  100% { transform: translateY(-4px) scale(1.1) rotate(3deg); }
}
/* Old 3-line menu: icon only, 44x44 (the sheet's «Cerrar» keeps the pill). */
.kcs-menu-btn.kcs-menu-btn--lines { flex: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; padding: 0; border: 0; border-radius: 0; background: none; }
.kcs-menu-btn--lines > span { display: block; width: 24px; height: 1.5px; background: #F5EDD6; }
.kcs-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  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;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile sheet: modal <dialog> (focus trap, Esc). */
.kcs-sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) var(--kcs-pad) calc(var(--kcu-space-6) + var(--kcu-safe-bottom));
  border: 0;
  background: var(--kcu-void);
  color: var(--kcu-ink);
  overscroll-behavior: contain;
}
.kcs-sheet[open] { display: flex; flex-direction: column; gap: var(--kcu-space-6); }
.kcs-sheet::backdrop { background: var(--kcu-void); }
.kcs-sheet__bar { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.kcs-sheet__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--kcu-border-subtle); }
.kcs-sheet__list a {
  display: flex;
  align-items: center;
  min-height: 60px;
  border-bottom: 1px solid var(--kcu-border-subtle);
  color: var(--kcu-ink);
  font: 400 clamp(1.35rem, 1.1rem + 1.6vw, 1.8rem)/1.1 var(--kcu-font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.kcs-sheet__cta { align-self: flex-start; }

/* ── Act 1 · Hero: the eye is the portal, the three phones come out of its iris ── */
.kcs-hero {
  /* MA-005: the whole hero (title, line, ring-framed trio, caption, CTA) fits the first screen: everything but the trio
     is --kcs-hero-fixed + 2 title lines; the trio + ring spill take 2.576 x phone + 16px. */
  --kcs-h1: clamp(2.3rem, 11.2vw, 3.1rem);
  --kcs-hero-fixed: calc(262px + env(safe-area-inset-top, 0px));
  --kcs-phone-w: clamp(110px, min(40vw, (100vh - var(--kcs-hero-fixed) - 2 * var(--kcs-h1)) / 2.576), 230px);
  --kcs-phone-w: clamp(110px, min(40vw, (100svh - var(--kcs-hero-fixed) - 2 * var(--kcs-h1)) / 2.576), 230px);
  --kcs-bezel: 7px;
  --kcs-eye-w: calc(var(--kcs-phone-w) * 5.6);
  --kcs-stage-h: calc((var(--kcs-phone-w) - 2 * var(--kcs-bezel)) * 2.1656 + 2 * var(--kcs-bezel));
  /* Ring: inner edge (37% of its width) on the eye's bright iris rim (0.17 of the eye width, measured) = eye x 0.46. */
  --kcs-ring-w: calc(var(--kcs-eye-w) * 0.46);
  --kcs-ring-spill: max(var(--kcu-space-5), calc((var(--kcs-ring-w) - var(--kcs-stage-h)) / 2 + 8px)); /* line and caption stay clear */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden; /* iOS < 16 has no clip */
  overflow-x: clip;
  padding: var(--kcu-space-2) var(--kcs-pad) var(--kcu-space-6);
  text-align: center;
}
.kcs-hero__title, .kcs-stage__foot, .kcs-hero__cta { position: relative; z-index: 1; } /* above the portal layer */
.kcs-hero__title {
  font: 400 var(--kcs-h1)/1 var(--kcu-font-display);
  letter-spacing: 0.04em;
}
/* Legibility halo: one dark field behind both lines (a per-line text-shadow would shade line 1 with line 2's). */
.kcs-hero__title::before { content: ''; position: absolute; z-index: -1; inset: -18% -12%; background: radial-gradient(closest-side, rgba(4, 6, 12, 0.78), rgba(4, 6, 12, 0.4) 60%, transparent); pointer-events: none; }
.kcs-hero__title > span { display: block; white-space: nowrap; }
.kcs-hero__gold { color: #F2D06B; }

.kcs-hero__stage { position: relative; width: 100%; min-width: 0; margin-top: var(--kcs-ring-spill); }
.kcs-stage {
  position: relative;
  isolation: isolate;
  height: var(--kcs-stage-h);
  perspective: 1100px;
  touch-action: pan-y;
}
.kcs-stage:focus-visible { outline: 2px solid var(--kcu-gold); outline-offset: 6px; }
/* The photo's frame dissolves into the page (mask, not paint: the page halo shows through); the veil shades the text bands. */
.kcs-portal {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: var(--kcs-eye-w);
  aspect-ratio: 3 / 2;
  translate: -50.3% -53.1%; /* the pupil, measured on the photo, sits on the stage centre */
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
}
.kcs-portal picture, .kcs-portal__img { width: 100%; height: 100%; }
.kcs-portal__img { object-fit: cover; animation: kcs-eye-breathe 10s ease-in-out infinite; }
.kcs-portal__veil { position: absolute; inset: 0; background: linear-gradient(rgba(4, 6, 12, 0.6), transparent 30%, transparent 72%, rgba(4, 6, 12, 0.55)); }
/* AniDoodle ring: drawn once around the iris, between the portal and the phones. */
.kcs-portal-art { position: absolute; z-index: -1; top: 50%; left: 50%; width: var(--kcs-ring-w); aspect-ratio: var(--art-ratio, 1); translate: -50% -50%; pointer-events: none; }
.kcs-portal-art[hidden] { display: none; }
.kcs-portal-art > img { width: 100%; height: 100%; object-fit: contain; }
@media (orientation: portrait) and (max-width: 767px) {
  .kcs-portal__img { width: 62%; margin-left: 19.3%; transform-origin: 49.5% 50%; }
}
@keyframes kcs-eye-breathe {
  0%, 100% { transform: scale(1.01); }
  50% { transform: scale(1.04); }
}

.kcs-phones { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.kcs-phone {
  --kcs-pos-x: 0%;
  --kcs-rot-y: 0deg;
  --kcs-scale: 1;
  --kcs-phone-opacity: 1;
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--kcs-phone-w);
  margin-left: calc(var(--kcs-phone-w) / -2);
  opacity: var(--kcs-phone-opacity);
  pointer-events: auto;
  transform: translateX(calc(var(--kcs-pos-x) + var(--kcs-drag, 0px))) rotateY(var(--kcs-rot-y)) scale(var(--kcs-scale));
  transition: transform 580ms cubic-bezier(.22, 1, .36, 1), opacity 580ms cubic-bezier(.22, 1, .36, 1);
}
.kcs-phone[data-pos='center'] { z-index: 3; }
.kcs-phone[data-pos='left'] { --kcs-pos-x: -58%; --kcs-rot-y: 14deg; --kcs-scale: .82; z-index: 1; }
.kcs-phone[data-pos='right'] { --kcs-pos-x: 58%; --kcs-rot-y: -14deg; --kcs-scale: .82; z-index: 1; }
.kcs-phone[data-pos='park-left'] { --kcs-pos-x: -92%; --kcs-rot-y: 14deg; --kcs-scale: .66; --kcs-phone-opacity: 0; z-index: 0; pointer-events: none; }
.kcs-phone[data-pos='park-right'] { --kcs-pos-x: 92%; --kcs-rot-y: -14deg; --kcs-scale: .66; --kcs-phone-opacity: 0; z-index: 0; pointer-events: none; }
.kcs-phone[data-cross] { z-index: 0; } /* side-to-side traveller passes behind */
.kcs-stage[data-dragging] .kcs-phone { transition: none; }
.kcs-phone__body {
  position: relative;
  padding: var(--kcs-bezel);
  border-radius: 34px;
  background: linear-gradient(160deg, var(--kcu-elevated), var(--kcu-obsidian) 45%, var(--kcu-void));
  box-shadow:
    inset 0 0 0 1px rgba(150, 180, 235, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 24px 44px -14px rgba(0, 0, 0, 0.85),
    0 48px 80px -30px rgba(0, 0, 0, 0.8);
}
.kcs-phone__screen { width: 100%; height: auto; aspect-ratio: 640 / 1386; object-fit: cover; border-radius: 27px; background: var(--kcu-surface); user-select: none; -webkit-user-drag: none; }
.kcs-phone[data-shape='wide'] .kcs-phone__screen { aspect-ratio: 1200 / 630; }
/* Wide poster (1200x630): landscape device, vertically centered in the portrait slot; island hidden. */
.kcs-phone[data-shape='wide'] { top: 50%; translate: 0 -50%; width: calc(var(--kcs-phone-w) * 1.7); margin-left: calc(var(--kcs-phone-w) * -0.85); }
.kcs-phone[data-shape='wide'] .kcs-phone__island { display: none; }
.kcs-phone[data-shape='wide'][data-pos='left'] { --kcs-pos-x: -50%; }
.kcs-phone[data-shape='wide'][data-pos='right'] { --kcs-pos-x: 50%; }
.kcs-phone[data-shape='wide'][data-pos='park-left'] { --kcs-pos-x: -80%; }
.kcs-phone[data-shape='wide'][data-pos='park-right'] { --kcs-pos-x: 80%; }
/* A landscape front extends over the side hit zones; move its portrait neighbors out to expose a thumb-wide edge. */
.kcs-stage:has(.kcs-phone[data-shape='wide'][data-pos='center']) .kcs-phone[data-pos='left'] { --kcs-pos-x: -75%; }
.kcs-stage:has(.kcs-phone[data-shape='wide'][data-pos='center']) .kcs-phone[data-pos='right'] { --kcs-pos-x: 75%; }
.kcs-phone__island {
  position: absolute;
  top: calc(var(--kcs-bezel) + 7px);
  left: 35%;
  width: 30%;
  height: 12px;
  border-radius: var(--kcu-radius-pill);
  background: #010205; /* deepest stop of --kcu-space-deep */
}
.kcs-phone__veil {
  position: absolute;
  inset: var(--kcs-bezel);
  border-radius: 27px;
  background: var(--kcu-void);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--kcu-dur-align) var(--kcu-ease);
}
.kcs-phone:not([data-pos='center']) .kcs-phone__veil { opacity: 0.38; }
.kcs-phone__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 34px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kcs-phone__hit[hidden] { display: none; }
.kcs-phone[data-pos='left'] > button.kcs-phone__hit:not([hidden]) { inset-inline-end: 50%; }
.kcs-phone[data-pos='right'] > button.kcs-phone__hit:not([hidden]) { inset-inline-start: 50%; }

.kcs-stage__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--kcu-space-3); margin-top: var(--kcs-ring-spill); }
.kcs-caption { color: var(--kcu-ink-2); font-size: var(--kcu-text-small); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
.kcs-caption__name { color: var(--kcu-ink); font-weight: 700; }
.kcs-caption__tier { color: var(--kcu-ink-3); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s ease; }
.kcs-caption__tier[data-line='universe'] { color: var(--kcu-gold); }

/* Morph CTA (old «Ver Diseños»): black fill, orbiting Orion dots, letters that flip. */
.kcs-hero__cta { width: min(290px, 100%); margin-top: var(--kcu-space-6); }
.kc-morph-btn {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 14px;
  color: var(--kcu-ink);
  font: 700 0.8rem/1.35 var(--kcu-font-folio);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.kc-morph-btn__fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 4px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(242, 208, 107, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-radius 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.kc-morph-btn__shadow { position: absolute; inset: 5px; z-index: 0; border-radius: 4px; background: rgba(0, 0, 0, 0.5); filter: blur(15px); transform: translateY(10px); transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), border-radius 0.5s; }
.kc-morph-btn__text { position: relative; z-index: 3; display: inline-flex; align-items: center; white-space: nowrap; }
.kc-morph-btn__text > span { display: inline-block; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: calc(var(--i) * 0.03s); }
.kc-morph-btn__text svg { margin-left: 0.35em; }
.kc-morph-btn__dots { position: absolute; z-index: 2; inset: -24px 0; pointer-events: none; }
.kc-morph-btn__dots span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #7CB9FF; box-shadow: 0 0 8px rgba(124, 185, 255, 0.9), 0 0 16px rgba(99, 179, 255, 0.5); }
.kc-morph-btn__dots span:nth-child(1) { top: 0; left: 50%; animation: kc-morph-orbit1 3s linear infinite; }
.kc-morph-btn__dots span:nth-child(2) { bottom: 0; left: 50%; animation: kc-morph-orbit2 3s linear infinite; }
.kc-morph-btn__dots span:nth-child(3) { top: 50%; left: 0; animation: kc-morph-orbit3 4s linear infinite; }
.kc-morph-btn__dots span:nth-child(4) { top: 50%; right: 0; animation: kc-morph-orbit4 4s linear infinite; }
.kc-morph-btn[data-play] .kc-morph-btn__fill { border-radius: 50px; animation: kc-morph-jelly 0.5s ease; }
.kc-morph-btn[data-play] .kc-morph-btn__shadow { border-radius: 50px; transform: translateY(15px) scale(1.1); }
.kc-morph-btn[data-play] .kc-morph-btn__text > span { animation: kc-morph-letter 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) calc(var(--i) * 0.03s); }
.kc-morph-btn:active .kc-morph-btn__fill { transform: scale(0.94); transition: transform 0.1s ease; }
.kc-morph-btn:focus-visible { outline: 3px solid var(--kcu-focus-ring); outline-offset: 6px; }
@keyframes kc-morph-jelly {
  30% { transform: scale(1.15, 0.85); }
  50% { transform: scale(0.9, 1.1); }
  70% { transform: scale(1.05, 0.95); }
}
@keyframes kc-morph-letter {
  40% { transform: translateY(-120%); }
  70% { transform: translateY(10%); }
}
@keyframes kc-morph-orbit1 {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  25% { transform: translateX(30px) translateY(10px) scale(0.6); }
  50% { transform: translateX(-50%) translateY(16px) scale(1); }
  75% { transform: translateX(-80px) translateY(10px) scale(0.6); }
}
@keyframes kc-morph-orbit2 {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(0.6); }
  25% { transform: translateX(-80px) translateY(-10px) scale(1); }
  50% { transform: translateX(-50%) translateY(-16px) scale(0.6); }
  75% { transform: translateX(30px) translateY(-10px) scale(1); }
}
@keyframes kc-morph-orbit3 {
  0%, 100% { transform: translateY(-50%) translateX(0) scale(0.8); }
  50% { transform: translateY(-50%) translateX(-15px) scale(1.2); }
}
@keyframes kc-morph-orbit4 {
  0%, 100% { transform: translateY(-50%) translateX(0) scale(1.2); }
  50% { transform: translateY(-50%) translateX(15px) scale(0.8); }
}

/* ── Acts (shared) ── */
.kcs-act { position: relative; isolation: isolate; padding-block: var(--kcu-section-y-tight); }
.kcs-act > .kcu-starfield { opacity: 0.45; }
.kcs-act::before { content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none; background: var(--kcs-nebula, none), linear-gradient(90deg, rgba(2, 3, 8, 0.45), transparent 16%, transparent 84%, rgba(2, 3, 8, 0.45)); }
.kcs-packs { --kcs-nebula: radial-gradient(60% 40% at 16% 10%, rgba(212, 175, 55, 0.07), transparent 70%), radial-gradient(45% 35% at 86% 72%, rgba(91, 141, 239, 0.05), transparent 70%); }
.kcs-universe { --kcs-nebula: radial-gradient(65% 45% at 80% 28%, rgba(91, 141, 239, 0.08), transparent 70%), radial-gradient(40% 30% at 12% 86%, rgba(124, 58, 237, 0.05), transparent 70%); }
.kcs-echoes { --kcs-nebula: radial-gradient(55% 45% at 22% 62%, rgba(230, 211, 168, 0.06), transparent 70%); }
.kcs-app { --kcs-nebula: radial-gradient(55% 45% at 18% 40%, rgba(124, 58, 237, 0.07), transparent 70%), radial-gradient(40% 32% at 86% 18%, rgba(91, 141, 239, 0.05), transparent 70%); }
.kcs-faq-act { --kcs-nebula: radial-gradient(60% 40% at 50% 0%, rgba(91, 141, 239, 0.05), transparent 70%); }
.kcs-final { --kcs-nebula: radial-gradient(50% 42% at 50% 72%, rgba(242, 208, 107, 0.08), transparent 70%), radial-gradient(70% 40% at 50% 100%, rgba(91, 141, 239, 0.06), transparent 70%); }
/* Old voice for every act: «✦ eyebrow ✦» + Ramen Sauce title with one gold word + a 1-2 line lede. */
.kcs-act__head { display: grid; justify-items: center; gap: var(--kcu-space-3); max-width: 46rem; margin: 0 auto var(--kcu-space-6); text-align: center; }
.kcs-act__eyebrow { display: inline-flex; align-items: center; gap: 0.8em; color: var(--kcu-gold); font: 700 var(--kcu-text-micro)/1.3 var(--kcu-font-folio); letter-spacing: 0.2em; text-transform: uppercase; }
.kcs-act__eyebrow::before, .kcs-act__eyebrow::after { content: ''; flex: none; width: 0.85em; height: 0.85em; clip-path: var(--kcu-star-seal-clip); background: currentColor; }
.kcs-act__eyebrow::before { margin-right: 0.2em; } /* balances the trailing letter-spacing */
.kcs-act__title { max-width: 20ch; font: 400 clamp(1.7rem, 7vw, 3.2rem)/1.12 var(--kcu-font-display); letter-spacing: 0.06em; text-transform: uppercase; text-wrap: balance; }
.kcs-gold { color: #F2D06B; }
.kcs-act__lede { max-width: 34rem; color: var(--kcu-ink-2); text-wrap: pretty; }

/* Art slots: fixed aspect boxes, filled later by the art loader (no layout shift, empty if a file is missing). */
.kcs-art { position: relative; width: 100%; margin: 0; aspect-ratio: var(--art-ratio, 4 / 3); pointer-events: none; }
.kcs-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.kcs-art[data-art^='step-'] { max-width: 200px; }
.kcs-art[data-art='echoes'] { order: -1; max-width: 36rem; justify-self: center; } /* mobile: the prints open the act */
.kcs-art[data-art='app'], .kcs-art[data-art='final'] { max-width: 220px; justify-self: center; }
.kcs-art--sep { width: min(600px, 86vw); margin-inline: auto; }

/* ── Footer ── */
.kcs-footer { padding-block: var(--kcu-space-7) calc(var(--kcu-space-6) + var(--kcu-safe-bottom)); border-top: 1px solid var(--kcu-border-subtle); background: var(--kcu-obsidian); }
.kcs-footer__grid { display: grid; gap: var(--kcu-space-5); }
.kcs-footer__brand { display: grid; gap: var(--kcu-space-2); justify-items: start; }
.kcs-footer__name { font-size: 1.25rem; } /* the header wordmark: «KC» gold + «Studio» cream */
.kcs-footer__tag { color: var(--kcu-ink-3); font-size: var(--kcu-text-small); }
.kcs-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--kcu-space-5); margin: 0; padding: 0; list-style: none; }
.kcs-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--kcu-ink-2); text-decoration: none; }
.kcs-footer__copy { color: var(--kcu-ink-3); font: 700 var(--kcu-text-micro)/1.6 var(--kcu-font-folio); letter-spacing: 0.08em; } /* folio = Courier Prime 700 only: one font file fewer in the LCP window */
#ixTrigger { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* ── IX Realm ── */
.kcs-ix {
  width: min(100% - 2 * var(--kcu-gutter), 26rem);
  padding: 0;
  border: 1px solid var(--kcu-border-signature);
  border-radius: var(--kcu-radius-card);
  background: var(--kcu-astral);
  color: var(--kcu-ink);
  box-shadow: var(--kcu-shadow-elevated);
}
.kcs-ix::backdrop { background: rgba(4, 6, 12, 0.86); } /* --kcu-void at 86% */
.kcs-ix__content { display: grid; justify-items: center; gap: var(--kcu-space-4); padding: var(--kcu-space-7) var(--kcu-space-5); text-align: center; }
.kcs-ix__glyph { color: var(--kcu-gold); }
.kcs-ix__title { color: var(--kcu-champagne); font: 400 1.05rem/1.2 var(--kcu-font-display); letter-spacing: 0.18em; }
.kcs-ix__sub { color: var(--kcu-ink-2); }

/* ── Home-scoped chip overrides ── */
.kcu-state.kcs-compact { max-width: 100%; min-height: 28px; padding: 0.3rem 0.7rem; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.kcu-btn[hidden], .kcu-state[hidden], .kcs-link[hidden], [data-kcs-soon][hidden] { display: none; }
.kcs-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--kcu-action);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.kcs-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kcu-space-4);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.kcs-faq__item summary::-webkit-details-marker { display: none; }
.kcs-faq__item summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--kcu-dur-settle) var(--kcu-ease);
}
.kcs-faq__item[open] summary::after { transform: translateY(2px) rotate(-135deg); }

/* ── Act 3 · Paquetes: the old notebook cards (.kc-pack), one per tab ── */
/* Old design tokens, scoped (never :root): the ports below read them as they were. */
.kc-pack, .kc-sticky-cta, .kc-desktop-preview-float {
  --abyss: #0A0A0A;
  --surface: #111111;
  --gold-dim: #9A7A2E;
  --gold-bright: #F2D06B;
  --gold-glow: rgba(212, 175, 55, 0.35);
  --cream: #F5EDD6;
  --cream-dim: #C8BBAA;
}

.kc-pack { display: flex; flex-direction: column; align-items: center; gap: var(--kcu-space-5); max-width: 1120px; margin: 0 auto; }
.kc-pack__radio { position: absolute; opacity: 0; pointer-events: none; }
.kc-pack-tabs {
  position: sticky;
  z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + 8px); /* un-sticks where .kc-pack (its card) ends */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  border-radius: 1rem;
  background: #12141B; /* void + 6% ivory, opaque: the card scrolls under it */
  box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.12), inset -1px -1px 6px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.55);
}
.kc-pack-tabs label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 0.6rem 2px;
  border-radius: 1rem;
  color: var(--cream-dim);
  font: 700 0.72rem/1 var(--kcu-font-ui);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}
.kc-pack-tabs__sub, .kc-pack-tabs__price { display: none; } /* the desktop rail shows them */
#kc-pack-essential:checked ~ .kc-pack-tabs [for='kc-pack-essential'],
#kc-pack-universe:checked ~ .kc-pack-tabs [for='kc-pack-universe'],
#kc-pack-astral:checked ~ .kc-pack-tabs [for='kc-pack-astral'],
#kc-pack-echoes:checked ~ .kc-pack-tabs [for='kc-pack-echoes'] { color: var(--abyss); }
/* MA-001: the focused tab is always the checked one, on the glider: a void inner ring reads >= 5:1 on every metal. */
#kc-pack-essential:focus-visible ~ .kc-pack-tabs [for='kc-pack-essential'],
#kc-pack-universe:focus-visible ~ .kc-pack-tabs [for='kc-pack-universe'],
#kc-pack-astral:focus-visible ~ .kc-pack-tabs [for='kc-pack-astral'],
#kc-pack-echoes:focus-visible ~ .kc-pack-tabs [for='kc-pack-echoes'] { outline: 2px solid var(--kcu-focus-ring); outline-offset: -2px; box-shadow: inset 0 0 0 5px #04060C; }
.kc-pack-tabs__glider {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% / 4);
  border-radius: 1rem;
  transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56), background 0.3s ease, box-shadow 0.3s ease;
}
#kc-pack-essential:checked ~ .kc-pack-tabs .kc-pack-tabs__glider { background: linear-gradient(135deg, #8E979E, #C7CCD1); box-shadow: 0 0 18px rgba(199, 204, 209, 0.35), 0 0 10px rgba(231, 234, 236, 0.4) inset; }
#kc-pack-universe:checked ~ .kc-pack-tabs .kc-pack-tabs__glider { transform: translateX(100%); background: linear-gradient(135deg, var(--gold-dim), var(--gold-bright)); box-shadow: 0 0 18px var(--gold-glow), 0 0 10px rgba(242, 208, 107, 0.4) inset; }
#kc-pack-astral:checked ~ .kc-pack-tabs .kc-pack-tabs__glider { transform: translateX(200%); background: linear-gradient(135deg, #7FA8D8, #DFF1FF); box-shadow: 0 0 18px rgba(169, 212, 245, 0.4), 0 0 10px rgba(185, 167, 240, 0.45) inset; }
#kc-pack-echoes:checked ~ .kc-pack-tabs .kc-pack-tabs__glider { transform: translateX(300%); background: linear-gradient(135deg, #A8946A, #F3E7CB); box-shadow: 0 0 18px rgba(230, 211, 168, 0.35), 0 0 10px rgba(243, 231, 203, 0.4) inset; }

.kc-pack-stage { display: flex; justify-content: center; width: 100%; padding: 1.2em 0.6em; }
.kc-pack-card { display: none; }
#kc-pack-essential:checked ~ .kc-pack-stage > [data-tier='essential'],
#kc-pack-universe:checked ~ .kc-pack-stage > [data-tier='universe'],
#kc-pack-astral:checked ~ .kc-pack-stage > [data-tier='astral'],
#kc-pack-echoes:checked ~ .kc-pack-stage > [data-tier='echoes'] { display: flex; }

/* One metal per tier */
.kc-pack-card--silver { --tier-soft: #C7CCD1; --tier: #8E979E; --tier-deep: #5A6169; --tier-glow: rgba(199, 204, 209, 0.35); --tier-glass: rgba(199, 204, 209, 0.08); }
.kc-pack-card--gold { --tier-soft: #F2D06B; --tier: #D4AF37; --tier-deep: #9A7A2E; --tier-glow: rgba(212, 175, 55, 0.35); --tier-glass: rgba(212, 175, 55, 0.06); }
.kc-pack-card--diamond { --tier-soft: #DFF1FF; --tier: #A9D4F5; --tier-deep: #7FA8D8; --tier-glow: rgba(185, 167, 240, 0.4); --tier-glass: rgba(223, 241, 255, 0.08); }
.kc-pack-card--echoes { --tier-soft: #F3E7CB; --tier: #E6D3A8; --tier-deep: #A8946A; --tier-glow: rgba(230, 211, 168, 0.35); --tier-glass: rgba(230, 211, 168, 0.07); }

/* Notebook: ruled paper, hand-drawn radius, tape. Float runs on `transform`; the lift on `translate`/`rotate`, so they compose.
   WCAG 2.2.2: every loop plays a few cycles only after the card comes into view (or its tab opens), then rests. */
.kc-pack-card {
  --paper-line: rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  max-width: 400px;
  padding: 2.6em 1.2em 1.6em;
  border: 2px solid var(--tier-deep);
  border-radius: 58px 12px 52px 12px / 12px 52px 12px 58px;
  background:
    linear-gradient(var(--abyss) 1.5em, transparent 1.5em) 0 0 / 100% 1.6em,
    linear-gradient(var(--paper-line) 0.08em, transparent 0.08em) 0 1.5em / 100% 1.6em var(--abyss);
  box-shadow: 0.4em 0.4em 0 var(--tier-deep), inset 0 0 1.2em rgba(0, 0, 0, 0.2);
  font-size: 15px;
  transition: translate 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, rotate 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, box-shadow 0.5s ease 0.2s, border-radius 0.5s ease 0.2s;
}
.kc-pack-card.kc-card-is-visible {
  translate: 0 -0.8em;
  rotate: 0.4deg;
  border-radius: 12px 58px 12px 52px / 58px 12px 52px 12px;
  box-shadow: 0.55em 0.7em 0 var(--tier-deep), inset 0 0 1.2em rgba(0, 0, 0, 0.2);
  animation: kc-pack-float 6s ease-in-out 2;
}
.kc-card-is-visible::before { animation: kc-pack-tape 4s ease-in-out 0.2s 2; }
.kc-card-is-visible .kc-pack-card__doodle--star { animation: kc-pack-sparkle 3s ease-in-out 0.9s 2; }
.kc-card-is-visible .kc-pack-card__doodle--sparkle { animation: kc-pack-sparkle 2.5s ease-in-out 1.3s 2; }
.kc-card-is-visible .kc-pack-card__doodle--swirl { animation: kc-pack-swirl 12s linear 0.5s; }
.kc-card-is-visible .kc-pack-card__seal { animation: kc-pack-seal-bounce 4s ease-in-out 0.4s 2; }
.kc-card-is-visible .kc-pack-card__sub { animation: kc-pack-badge 3s ease-in-out 0.7s 2; }
.kc-pack-card::before {
  content: '';
  position: absolute;
  z-index: 10;
  top: -0.7em;
  left: 50%;
  width: 5.2em;
  height: 1.5em;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0%, var(--tier-soft) 30%, var(--tier) 62%, rgba(255, 255, 255, 0.3) 100%);
  opacity: 0.55;
  clip-path: polygon(1% 12%, 96% 0%, 100% 82%, 4% 100%);
  transform: translateX(-50%) rotate(-4deg);
}
/* Engraved stars: the art director's masks (alpha = engraving) over each tier's metal. Painted once the page has loaded. */
.kc-pack-card__doodle { position: absolute; z-index: 0; visibility: hidden; background: linear-gradient(140deg, var(--tier-soft), var(--tier) 55%, var(--tier-deep)); }
[data-kcs-ready] .kc-pack-card__doodle { visibility: visible; -webkit-mask: var(--kcs-mask) center / contain no-repeat; mask: var(--kcs-mask) center / contain no-repeat; } /* the mask (and its request) only after load */
.kc-pack-card__doodle--star { --kcs-mask: url('/assets/kcs/art/star-engraved.webp'); top: 1.3em; right: 1.3em; width: 2.3em; height: 2.3em; }
.kc-pack-card__doodle--sparkle { --kcs-mask: url('/assets/kcs/art/sparkle-engraved.webp'); top: 3.8em; left: 1.3em; width: 2em; height: 2em; background: linear-gradient(140deg, #FFF8E8, var(--tier-soft) 55%, var(--tier)); }
.kc-pack-card__doodle--swirl { --kcs-mask: url('/assets/kcs/art/swirl-engraved.webp'); right: 0.9em; bottom: 1.8em; width: 2.8em; height: 2.8em; opacity: 0.6; }
.kc-pack-card__seal {
  z-index: 2;
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  border: 0.2em solid var(--tier-deep);
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  background: radial-gradient(circle at 35% 30%, var(--tier-glass), var(--surface) 70%);
  box-shadow: 0.3em 0.3em 0 var(--tier-glow);
  color: var(--tier);
  font: 400 1.6em/1 var(--kcu-font-display);
  letter-spacing: 0.05em;
}
.kc-pack-card__title { z-index: 2; text-align: center; }
.kc-pack-card__title h3 { color: var(--cream); font: 400 clamp(1.3rem, 5.6vw, 1.75rem)/1.15 var(--kcu-font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.kc-pack-card__sub {
  display: inline-block;
  margin-top: 0.6em;
  padding: 0.4em 1em;
  border: 0.12em solid var(--tier-deep);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: var(--tier-glass);
  color: var(--cream);
  font: 700 0.82rem/1.35 var(--kcu-font-ui);
}
.kc-pack-card__price { z-index: 2; display: flex; align-items: baseline; justify-content: center; gap: 0.45rem; width: 100%; padding: 0.85rem; border: 1px solid var(--tier-deep); background: var(--tier-glass); color: var(--tier); font: 400 clamp(1.9rem, 8vw, 2.3rem)/1 var(--kcu-font-display); letter-spacing: 0.05em; }
.kc-pack-card__cur { color: var(--cream-dim); font: 700 var(--kcu-text-micro)/1 var(--kcu-font-folio); letter-spacing: 0.12em; }
.kc-pack-card__list { z-index: 2; width: 100%; margin: 0; padding: 0; color: var(--cream-dim); font-size: 0.875rem; line-height: 1.5; list-style: none; text-align: left; }
.kc-pack-card__list li { position: relative; padding: 0.3em 0 0.3em 1.35em; }
.kc-pack-card__list li::before { content: ''; position: absolute; top: 0.72em; left: 0.1em; width: 0.62em; height: 0.62em; clip-path: var(--kcu-star-seal-clip); background: var(--tier); }
.kc-pack-card__list .kcu-state { margin-left: 0.3rem; vertical-align: 0.1em; }
.kc-pack-card__list .kc-pack-card__info { padding-left: 0; }
.kc-pack-card__list .kc-pack-card__info::before { content: none; }
.kc-pack-card__list .kc-pack-card__info .kcu-state { margin: 0.2rem 0 0; }
.kc-pack-card__no { z-index: 2; width: 100%; padding-top: 0.6rem; border-top: 1px dashed var(--tier-deep); color: var(--cream-dim); font-size: 0.8125rem; line-height: 1.45; text-align: left; }
.kc-pack-card__no-label { display: block; margin-bottom: 0.15rem; color: var(--tier-soft); font: 700 var(--kcu-text-micro)/1.3 var(--kcu-font-folio); letter-spacing: 0.12em; text-transform: uppercase; }

/* Buttonwater: the tier metal rises in 4 bubbles. */
.kc-pack-cta {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 0.4em;
  padding: 0.75rem 1.5rem;
  overflow: hidden;
  border: 2px solid var(--tier);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  color: var(--tier-soft);
  font: 700 0.78rem/1.2 var(--kcu-font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.4s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.kc-pack-cta__label { position: relative; z-index: 2; }
.kc-pack-cta__bubble { position: absolute; z-index: 1; bottom: 0; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--tier); transform: translate(-50%, 110%); transition: transform 0.5s ease; }
.kc-pack-cta__bubble:nth-child(2) { left: 12.5%; }
.kc-pack-cta__bubble:nth-child(3) { left: 37.5%; transition-delay: 0.08s; }
.kc-pack-cta__bubble:nth-child(4) { left: 62.5%; transition-delay: 0.16s; }
.kc-pack-cta__bubble:nth-child(5) { left: 87.5%; transition-delay: 0.24s; }
.kc-pack-cta:focus-visible { outline: 3px solid var(--kcu-focus-ring); outline-offset: 4px; }
.kc-pack-cta[data-play], .kc-pack-cta:focus-visible { color: #050505; }
.kc-pack-cta[data-play] .kc-pack-cta__bubble, .kc-pack-cta:focus-visible .kc-pack-cta__bubble { transform: translate(-50%, 0) scale(2.2); }
.kc-pack-cta[data-play] .kc-pack-cta__bubble { transition-duration: 0.26s; }
.kc-pack-cta[data-play] .kc-pack-cta__bubble:nth-child(3) { transition-delay: 0.04s; }
.kc-pack-cta[data-play] .kc-pack-cta__bubble:nth-child(4) { transition-delay: 0.08s; }
.kc-pack-cta[data-play] .kc-pack-cta__bubble:nth-child(5) { transition-delay: 0.12s; }
@keyframes kc-pack-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.4em); }
}
/* Explicit 0%/100% everywhere: implicit end keyframes drop an animation off the compositor (measured: 0.9 -> 92 ms/s). */
@keyframes kc-pack-tape {
  0%, 100% { transform: translateX(-50%) rotate(-4deg); }
  50% { transform: translateX(-50%) rotate(-2deg) scale(1.02); }
}
@keyframes kc-pack-sparkle {
  0%, 100% { transform: scale(1); opacity: 1; }
  30% { transform: scale(0.8); opacity: 0.6; }
  70% { transform: scale(1.1); opacity: 1; }
}
@keyframes kc-pack-swirl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes kc-pack-seal-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-0.3em) scale(1.02); }
}
@keyframes kc-pack-badge {
  0%, 100% { transform: none; }
  25% { transform: rotate(-1deg); }
  75% { transform: translateY(-0.2em) rotate(1deg); }
}
/* Pointing at a card or focusing inside it holds every loop still (the CTA never moves under the finger or the cursor). */
.kc-pack-card:is(:hover, :focus-within), .kc-pack-card:is(:hover, :focus-within)::before, .kc-pack-card:is(:hover, :focus-within) * { animation-play-state: paused; }

.kcs-faq { max-width: 44rem; margin: 0 auto; }
.kcs-faq__list { border-top: 1px solid var(--kcu-border-subtle); }
.kcs-faq__item { border-bottom: 1px solid var(--kcu-border-subtle); }
.kcs-faq__item summary { min-height: 52px; padding-block: var(--kcu-space-2); font-size: var(--kcu-text-small); font-weight: 700; }
.kcs-faq__item p { max-width: 40rem; padding-bottom: var(--kcu-space-4); color: var(--kcu-ink-2); font-size: var(--kcu-text-small); }

/* ── Act 4 · KC Universe ── */
.kcs-universe { background: linear-gradient(180deg, transparent, rgba(13, 17, 32, 0.55) 30%, transparent); } /* --kcu-surface at 55% */
.kcs-steps { position: relative; display: grid; gap: var(--kcu-space-8); margin: var(--kcu-space-7) 0 0; padding: 0; list-style: none; }
.kcs-steps::before { content: ''; position: absolute; top: 12px; bottom: 12px; left: 10px; width: 1px; background: var(--kcu-constellation-line); }
.kcs-step { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--kcu-space-5) var(--kcu-space-4); align-items: start; }
.kcs-step__star {
  --kcu-seal-size: 22px;
  grid-row: 1 / span 2;
  margin-top: 2px;
  transition: opacity var(--kcu-dur-settle) var(--kcu-ease), transform var(--kcu-dur-settle) var(--kcu-ease);
  transition-delay: calc(var(--i, 0) * var(--kcu-dur-settle));
}
/* encender: dimmed by JS only below the fold */
.kcs-steps[data-light='off'] .kcs-step__star { opacity: 0.25; transform: scale(0.5); }
.kcs-step__text { display: grid; gap: var(--kcu-space-2); justify-items: start; max-width: 30rem; }
.kcs-step__verb { font: 700 var(--kcu-text-h3)/1.2 var(--kcu-font-ui); }
.kcs-step__text p { color: var(--kcu-ink-2); font-size: var(--kcu-text-small); }
.kcs-step__text .kcs-step__tiers { color: var(--kcu-ink-3); font-size: 0.875rem; line-height: 1.45; }
.kcs-steps .kcs-art { grid-column: 2; grid-row: 1; }
.kcs-step__text { grid-column: 2; grid-row: 2; }
.kcs-step__outcomes { display: flex; flex-wrap: wrap; gap: var(--kcu-space-2); }

/* ── Act 5 · Echoes ── */
.kcs-echoes { background: radial-gradient(70% 60% at 80% 45%, rgba(230, 211, 168, 0.07), transparent 70%); }
.kcs-echoes__notice { justify-self: center; max-width: min(100%, 35rem); text-align: center; }
.kcs-echoes__grid { display: grid; gap: var(--kcu-space-5); align-items: center; }
.kcs-echoes__copy { display: grid; gap: var(--kcu-space-4); justify-items: stretch; width: min(100%, 34rem); margin-inline: auto; }
.kcs-echoes__facts { display: grid; gap: 0; width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: kcs-echoes; }
.kcs-echoes__facts li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--kcu-space-3); align-items: start; padding-block: var(--kcu-space-3); border-bottom: 1px solid var(--kcu-border-subtle); color: var(--kcu-ink-2); line-height: 1.5; }
.kcs-echoes__facts li::before { counter-increment: kcs-echoes; content: counter(kcs-echoes, decimal-leading-zero); color: var(--kcu-champagne); font: 700 var(--kcu-text-micro)/1.5 var(--kcu-font-folio); letter-spacing: 0.06em; }
.kcs-echoes__offer { display: grid; gap: var(--kcu-space-3); width: 100%; padding-top: var(--kcu-space-2); }
.kcs-echoes__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; color: var(--kcu-ink); font-weight: 700; }
.kcs-echoes__price .kcu-num { white-space: nowrap; }
.kcs-echoes__amount { white-space: nowrap; }
.kcs-echoes__note { color: var(--kcu-ink-2); font-weight: 400; }
.kcs-echoes__astral { color: var(--kcu-ink-2); font-size: var(--kcu-text-small); }
.kcs-echoes__offer [data-kcs-promo='on'] s,
.kc-pack-card--echoes [data-kcs-promo='on'] s,
.kc-pack-tabs [data-kcs-promo='on'] s,
.kcs-faq__item[data-tier='echoes'] [data-kcs-promo='on'] s { margin-right: 0.18em; color: var(--kcu-ink-3); font-size: 0.72em; letter-spacing: 0; }
.kc-pack-card--echoes > [data-kcs-notice] { align-self: center; text-align: center; max-width: calc(100% - 3.5rem); }
.kcs-echoes__notice { max-width: min(100%, 46rem); }
.kcs-echoes [data-kcs-reveal='waiting'] { opacity: 0; transform: translateY(12px); }
.kcs-echoes [data-kcs-reveal='shown'] { opacity: 1; transform: none; transition: opacity 650ms var(--kcu-ease), transform 650ms var(--kcu-ease); }
@media (prefers-reduced-motion: reduce) {
  .kcs-phone { transition: none; }
  .kcs-echoes [data-kcs-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── Act 6 · App: dashed = not yet ── */
.kcs-app__grid { display: grid; gap: var(--kcu-space-6); }
.kcs-app__cards { display: grid; gap: var(--kcu-space-4); }
.kcs-app-card { position: relative; isolation: isolate; display: grid; justify-items: start; gap: var(--kcu-space-3); padding: var(--kcu-space-5); border: 1px solid rgba(230, 211, 168, 0.28); border-radius: var(--kcu-radius-card); background: linear-gradient(160deg, #11141F, var(--kcu-obsidian) 58%, #06080F); box-shadow: inset 0 1px 0 rgba(230, 211, 168, 0.12), var(--kcu-shadow-contact); }
[data-kcs-ready] .kcs-app-card { background: url('/assets/kcs/art/grain.webp') 0 0 / 256px 256px, linear-gradient(160deg, #11141F, var(--kcu-obsidian) 58%, #06080F); }
/* Painted sparkles in the corner: a KC sparkle and a small star, champagne metal. */
[data-kcs-ready] .kcs-app-card::before, [data-kcs-ready] .kcs-app-card::after { content: ''; position: absolute; z-index: -1; background: linear-gradient(140deg, #FFF3D6, var(--kcu-champagne) 50%, #A8946A); -webkit-mask: var(--kcs-mask) center / contain no-repeat; mask: var(--kcs-mask) center / contain no-repeat; pointer-events: none; }
[data-kcs-ready] .kcs-app-card::before { --kcs-mask: url('/assets/kcs/art/sparkle-engraved.webp'); top: 14px; right: 16px; width: 30px; height: 30px; }
[data-kcs-ready] .kcs-app-card::after { --kcs-mask: url('/assets/kcs/art/star-engraved.webp'); top: 44px; right: 44px; width: 13px; height: 13px; opacity: 0.8; }
.kcs-app-card .kcu-eyebrow { color: var(--kcu-ink-3); }
.kcs-app-card__title { font: 700 var(--kcu-text-h3)/1.25 var(--kcu-font-ui); }
.kcs-app-card__text { color: var(--kcu-ink-2); }
.kcs-app-card__actions { display: flex; flex-wrap: wrap; gap: var(--kcu-space-2); margin-top: var(--kcu-space-1); }

/* ── Act 7 · Final ── */
.kcs-final__inner { display: grid; justify-items: center; gap: var(--kcu-space-5); text-align: center; }
.kcs-final .kcs-act__head { margin-bottom: 0; }
.kcs-final .kcs-art { margin-bottom: calc(-1 * var(--kcu-space-3)); } /* the CTA row sits right under the door it opens toward */
.kcs-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kcu-space-3); width: 100%; }
.kcs-final__actions .kc-space-btn { width: 100%; max-width: 24rem; }
/* WebKit paints a drop-shadow icon on a non-composited layer far below the fold as a transparent 19px hole at (0,0).
   Its own layer fixes it; hover/tap keep the layer so the turn never re-rasterizes. */
.kc-space-btn-icon { transform: translateZ(0); }
.kc-space-btn[data-play]:not(:disabled) .kc-space-btn-icon { transform: translateZ(0) rotate(45deg) scale(1.08); }

/* ── Sticky (<=1023) and DaVinci Relic float (>=1024): shown by JS once the hero CTA is out of view ── */
.kc-sticky-cta, .kc-desktop-preview-float { display: none; }
.kc-sticky-cta[data-show='false'], .kc-desktop-preview-float[data-show='false'] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(110%);
  transition: transform var(--kcu-dur-settle) var(--kcu-ease-exit), opacity var(--kcu-dur-settle) var(--kcu-ease-exit), visibility 0s linear var(--kcu-dur-settle);
}
@media (max-width: 1023px) {
  html { scroll-padding: 72px 0 96px; } /* focus never lands under the sticky tier bar (top) or the sticky CTA (bottom) */
  body { padding-bottom: calc(80px + var(--kcu-safe-bottom)); } /* the one reserve: the last CTA clears the sticky */
  .kc-sticky-cta {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem calc(0.7rem + var(--kcu-safe-bottom));
    background: linear-gradient(to top, rgba(3, 3, 5, 0.92), rgba(3, 3, 5, 0.7) 60%, rgba(3, 3, 5, 0));
    pointer-events: none;
    transition: transform var(--kcu-dur-settle) var(--kcu-ease), opacity var(--kcu-dur-settle) var(--kcu-ease), visibility 0s;
  }
  .kc-sticky-cta a { flex: 0 0 auto; pointer-events: auto; text-decoration: none; }
}
.kcs-sticky-space__label { white-space: nowrap; } /* the sticky wears the KC space button (kc-universe.css) as is */
/* Hidden docks don't spend frames on the space loop (LCP budget). */
.kc-sticky-cta[data-show='false'] .kc-space-btn, .kc-sticky-cta[data-show='false'] .kc-space-btn-stars,
.kc-desktop-preview-float[data-show='false'], .kc-desktop-preview-float[data-show='false'] .kc-space-btn-stars { animation: none; }
.kcs-sticky-space:focus-visible, .kc-holo-wa:focus-visible, .kc-desktop-preview-float:focus-visible { outline: 3px solid var(--kcu-focus-ring); outline-offset: 3px; }

/* Holographic WhatsApp */
.kc-holo-wa {
  position: relative;
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1.5px solid rgba(37, 211, 102, 0.3);
  border-radius: 50%;
  background: rgba(8, 6, 18, 0.85);
  color: #25D366;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.kc-holo-wa__svg { position: relative; z-index: 3; width: 24px; height: 24px; fill: #25D366; filter: drop-shadow(0 0 4px #25D366); transition: transform 0.3s ease; }
.kc-holo-wa__ring, .kc-holo-wa__particles, .kc-holo-wa__pulse { position: absolute; inset: 0; border-radius: 50%; }
.kc-holo-wa__ring { border: 1.5px solid #25D366; border-top-color: transparent; border-bottom-color: transparent; opacity: 0.5; animation: kcs-sticky-holo-rotate 3s linear infinite; }
.kc-holo-wa__particles { background: radial-gradient(circle, transparent 20%, #25D366 20%, #25D366 30%, transparent 30%, transparent 40%, #25D366 40%, #25D366 50%, transparent 50%); background-size: 10px 10px; opacity: 0; transition: opacity 0.3s ease; }
.kc-holo-wa__pulse { box-shadow: 0 0 14px #25D366; opacity: 0; }
.kc-holo-wa[data-play] { transform: translateY(-4px) scale(1.08); border-color: rgba(37, 211, 102, 0.7); }
.kc-holo-wa[data-play] .kc-holo-wa__svg { transform: scale(1.15) rotate(8deg); }
.kc-holo-wa[data-play] .kc-holo-wa__particles { opacity: 0.25; animation: kcs-sticky-holo-particles 3s linear infinite; }
.kc-holo-wa[data-play] .kc-holo-wa__pulse { animation: kcs-sticky-holo-pulse 2s ease-out infinite; }
@keyframes kcs-sticky-holo-rotate { to { transform: rotate(360deg); } }
@keyframes kcs-sticky-holo-particles { to { background-position: 20px 20px; } }
@keyframes kcs-sticky-holo-pulse {
  0% { transform: scale(0.8); opacity: 0.45; }
  50% { transform: scale(1.1); opacity: 0.2; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ── Fine pointers only ── */
@media (hover: hover) and (pointer: fine) {
  .kcs-nav__list a:hover, .kcs-footer__nav a:hover { color: var(--kcu-ink); }
  .kcs-menu-btn:hover { border-color: var(--kcu-ink-3); }
  .kc-morph-btn:hover .kc-morph-btn__fill { border-radius: 50px; animation: kc-morph-jelly 0.5s ease; }
  .kc-morph-btn:hover .kc-morph-btn__shadow { border-radius: 50px; transform: translateY(15px) scale(1.1); }
  .kc-morph-btn:hover .kc-morph-btn__text > span { animation: kc-morph-letter 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) calc(var(--i) * 0.03s); }
  .kc-pack-tabs label:hover { color: var(--cream); }
  .kc-pack-card:hover { translate: 0 -0.8em; rotate: 0.4deg; border-radius: 12px 58px 12px 52px / 58px 12px 52px 12px; box-shadow: 0.55em 0.7em 0 var(--tier-deep), inset 0 0 1.2em rgba(0, 0, 0, 0.2); }
  .kc-pack-cta:hover { color: #050505; }
  .kc-pack-cta:hover .kc-pack-cta__bubble { transform: translate(-50%, 0) scale(2.2); }
  .kcs-faq__item summary:hover { color: var(--kcu-orion-bright); }
  .kcs-link:hover { color: var(--kcu-orion-bright); }
  .kc-holo-wa:hover { transform: translateY(-4px) scale(1.08); border-color: rgba(37, 211, 102, 0.7); }
  .kc-space-btn:hover:not(:disabled) .kc-space-btn-icon { transform: translateZ(0) rotate(45deg) scale(1.08); }
}

/* ── Tablet ── */
@media (min-width: 768px) {
  .kcs-final__actions .kc-space-btn { width: auto; }
}

/* ── Desktop: axial on the eye ── */
@media (min-width: 1024px) {
  .kcs-nav { display: flex; align-items: center; gap: var(--kcu-space-5); margin-left: auto; }
  .kcs-nav__list { gap: 0 1.25rem; }
  .kcs-social { margin: 0; }
  .kcs-social__link::before { inset: 6px; }
  .kcs-social__svg { width: 16px; height: 16px; }
  .kcs-header__bar { min-height: 72px; }
  .kcs-header__bar > .kcs-menu-btn { display: none; }
  .kcs-brand__mark { font-size: 1.15rem; }

  .kcs-hero {
    --kcs-h1: clamp(2.6rem, min(5.2vw, 8vh), 4.6rem);
    --kcs-h1: clamp(2.6rem, min(5.2vw, 8svh), 4.6rem);
    --kcs-hero-fixed: 278px;
    --kcs-phone-w: clamp(100px, (100vh - var(--kcs-hero-fixed) - 2 * var(--kcs-h1)) / 2.576, 280px);
    --kcs-phone-w: clamp(100px, (100svh - var(--kcs-hero-fixed) - 2 * var(--kcs-h1)) / 2.576, 280px);
    padding-top: var(--kcu-space-3);
  } /* one eye ratio (5.6x) at every width, so the ring frames the trio the same way */

  .kcs-footer__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .kcs-footer__copy { grid-column: 1 / -1; }

  html { scroll-padding-bottom: calc(81px + clamp(22px, 4vh, 42px) + 16px); } /* MA-006: focus never lands under the float */
  /* Pricing: a vertical rail (name + price) beside the one notebook card. */
  .kc-pack { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 440px); justify-content: center; align-items: start; column-gap: var(--kcu-space-7); }
  .kc-pack-tabs { top: 96px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; max-width: none; margin-top: calc(1.2em + 18px); } /* the rail stays beside the tall card */
  .kc-pack-tabs label { justify-content: space-between; gap: var(--kcu-space-3); min-height: 68px; padding: 0.7rem 1.1rem; font-size: 0.8rem; letter-spacing: 0.06em; text-align: left; }
  .kc-pack-tabs__name { display: grid; gap: 0.3rem; }
  .kc-pack-tabs__sub { display: block; font: 700 0.72rem/1.2 var(--kcu-font-ui); letter-spacing: 0.02em; text-transform: none; }
  .kc-pack-tabs__price { display: block; font: 400 1.4rem/1 var(--kcu-font-display); letter-spacing: 0.04em; }
  .kc-pack-tabs__glider { width: 100%; height: calc(100% / 4); }
  #kc-pack-essential:checked ~ .kc-pack-tabs .kc-pack-tabs__glider { transform: none; }
  #kc-pack-universe:checked ~ .kc-pack-tabs .kc-pack-tabs__glider { transform: translateY(100%); }
  #kc-pack-astral:checked ~ .kc-pack-tabs .kc-pack-tabs__glider { transform: translateY(200%); }
  #kc-pack-echoes:checked ~ .kc-pack-tabs .kc-pack-tabs__glider { transform: translateY(300%); }

  .kcs-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kcu-space-6); }
  .kcs-steps::before { top: 11px; right: 11px; bottom: auto; left: 11px; width: auto; height: 1px; }
  .kcs-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .kcs-step__star { grid-row: 1; margin-top: 0; }
  .kcs-steps .kcs-art { grid-column: 1; grid-row: 2; max-width: 220px; }
  .kcs-step__text { grid-column: 1; grid-row: 3; }

  .kcs-echoes__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kcu-space-8); max-width: 1000px; margin-inline: auto; }
  .kcs-echoes__copy { justify-items: start; width: 100%; margin: 0; }
  .kcs-art[data-art='echoes'] { order: 0; max-width: 440px; }
  .kcs-art[data-art='app'] { max-width: 300px; }
  .kcs-art[data-art='final'] { max-width: 280px; }
  .kcs-app__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: var(--kcu-space-8); max-width: 1000px; margin-inline: auto; }

  body { padding-bottom: calc(81px + clamp(22px, 4vh, 42px) + var(--kcu-safe-bottom)); } /* the one desktop reserve: float (65px) + its offset + 16px, so the footer clears it */
  .kc-desktop-preview-float {
    position: fixed;
    z-index: 30;
    right: max(clamp(20px, 3vw, 42px), env(safe-area-inset-right, 0px));
    bottom: calc(clamp(22px, 4vh, 42px) + var(--kcu-safe-bottom));
    display: inline-flex;
    transition: transform var(--kcu-dur-settle) var(--kcu-ease), opacity var(--kcu-dur-settle) var(--kcu-ease), box-shadow 180ms ease, visibility 0s;
  }
}
/* Short wide desktops (1366x657, 1280x720, 1536x730, 1440x780): copy + CTA | a big trio. Axial from 800 px tall. */
@media (min-width: 1024px) and (max-height: 799px) and (min-aspect-ratio: 16/9) {
  .kcs-hero {
    --kcs-phone-w: clamp(120px, (100vh - 172px) / 2.576, 230px);
    --kcs-phone-w: clamp(120px, (100svh - 172px) / 2.576, 230px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: '. stage' 'title stage' 'cta stage' '. stage';
    grid-template-rows: 1fr auto auto 1fr;
    align-content: center;
    column-gap: var(--kcu-space-7);
    max-width: calc(var(--kcu-container-wide) + 2 * var(--kcu-gutter));
    margin-inline: auto;
    padding-top: 0;
  }
  .kcs-hero__title { grid-area: title; align-self: end; }
  .kcs-hero__stage { grid-area: stage; }
  .kcs-hero__cta { grid-area: cta; justify-self: center; align-self: start; margin-top: var(--kcu-space-6); }
}
@media (max-height: 500px) {
  .kcs-sheet { padding-bottom: calc(var(--kcu-space-3) + var(--kcu-safe-bottom)); }
  .kcs-sheet[open] { gap: var(--kcu-space-3); }
  .kcs-sheet__bar { min-height: 52px; }
  .kcs-sheet__list a { min-height: 48px; font-size: 1.25rem; }
}
/* Landscape phones (MA-004/MA-011): title, line and CTA beside the ring-framed trio, all inside the first screen. */
@media (orientation: landscape) and (max-width: 1023px) and (max-height: 500px) {
  .kcs-header__bar { min-height: 52px; }
  .kcs-hero {
    --kcs-h1: clamp(1.5rem, 4vw, 2rem);
    --kcs-phone-w: clamp(84px, (100vh - 52px - 76px) / 2.576, 170px);
    --kcs-phone-w: clamp(84px, (100svh - 52px - 76px) / 2.576, 170px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: '. stage' 'title stage' 'cta stage' '. stage';
    grid-template-rows: 1fr auto auto 1fr;
    align-content: center;
    column-gap: var(--kcu-space-5);
    padding-top: 0;
  }
  .kcs-hero__title { grid-area: title; align-self: end; }
  .kcs-hero__stage { grid-area: stage; }
  .kcs-hero__cta { grid-area: cta; justify-self: center; align-self: start; margin-top: var(--kcu-space-5); }
}

/* MA-003: forced colors keep the selected tier and the pills' edges. */
@media (forced-colors: active) {
  .kc-pack-tabs { border: 1px solid CanvasText; }
  .kc-pack-tabs__glider { forced-color-adjust: none; background: Highlight; box-shadow: none; }
  #kc-pack-essential:checked ~ .kc-pack-tabs [for='kc-pack-essential'],
  #kc-pack-universe:checked ~ .kc-pack-tabs [for='kc-pack-universe'],
  #kc-pack-astral:checked ~ .kc-pack-tabs [for='kc-pack-astral'],
  #kc-pack-echoes:checked ~ .kc-pack-tabs [for='kc-pack-echoes'] { forced-color-adjust: none; color: HighlightText; }
  .kcs-sticky-space, .kc-holo-wa, .kc-desktop-preview-float, .kc-morph-btn__fill, .kcs-social__link::before { border: 2px solid ButtonText; }
}

/* MA-002: «Pausar movimiento» (html[data-kcs-still]) holds every loop on the page, not only the trio. */
html[data-kcs-still] *, html[data-kcs-still] *::before, html[data-kcs-still] *::after { animation-play-state: paused !important; }

/* Off screen ([data-idle] from an IntersectionObserver) or hidden sticky/float: decorative loops hold still.
   !important: every looping rule above re-declares the animation shorthand. */
[data-idle], [data-idle] *, [data-idle]::before, [data-idle] *::before, [data-idle] *::after,
[data-show='false'], [data-show='false']::before, [data-show='false'] *, [data-show='false'] *::before, [data-show='false'] *::after { animation-play-state: paused !important; }