/* =============================================================================
   XK IA Partner — landing (prueba v1)
   Builds on styles.css (same tokens, type, buttons, glass and motion) and only
   adds what the partner landing needs: the hero pair of buttons, section leads,
   the new "agent" glass scene, the app demos, the "a tu medida" flow, five
   process steps and the XK Products panel.
   ========================================================================== */

/* ----------------------------------------------------------------- hero */
.hero__kicker {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__kicker::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--xk-gradient); box-shadow: 0 0 10px rgb(99 131 255 / 0.9), 0 0 22px rgb(0 230 254 / 0.45);
}
.hero__actions--pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero__motto { justify-self: end; text-align: right; color: var(--ink-soft); }
/* the floating WhatsApp button (fixed, bottom right, 58px + 20px) sits on this corner of the first
   screen: where the page's side margin is narrower than the button, the motto leaves it room */
.hero__motto { padding-right: max(0px, calc(96px - (100vw - min(var(--max), 100vw - 2 * var(--gutter))) / 2)); }
@media (max-width: 640px) {
  .hero__kicker { font-size: 0.7rem; letter-spacing: 0.12em; margin-bottom: 20px; }
  .hero__motto { justify-self: center; text-align: center; }
}

/* ----------------------------------------------------------------- section lead */
.section__lead { max-width: 44ch; color: var(--ink-soft); font-size: 1.02rem; }
.section__head--split .section__lead { justify-self: end; }
.section__lead--center { margin-inline: auto; max-width: 58ch; }


/* ----------------------------------------------------------------- glass scene: AI agent */
.gl--agent { --w: 250px; --h: 196px; --z: 20px; --r: 24px; }
.ag__head { left: 18px; top: 16px; width: 74px; height: 9px; background: rgb(255 255 255 / 0.6); }
.ag__msg { height: 32px; }
.ag__msg--in {
  left: 18px; top: 42px; width: 150px; border-radius: 14px 14px 14px 4px !important;
  background: rgb(255 255 255 / 0.2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
}
.ag__msg--out {
  right: 18px; top: 86px; width: 124px; border-radius: 14px 14px 4px 14px !important;
  background: var(--xk-gradient); box-shadow: 0 0 18px rgb(99 131 255 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.5);
}
.ag__msg--last { top: 130px; width: 108px; }
.gl--chip-spark { --w: 78px; --h: 78px; --x: -118px; --y: -80px; --z: 70px; }
.gl--chip-typing { --w: 96px; --h: 70px; --x: 112px; --y: 86px; --z: 92px; }
.ag__spark {
  left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 0 !important;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  background: linear-gradient(150deg, #fff, var(--xk-cyan) 55%, var(--xk-lilac));
  filter: drop-shadow(0 0 8px rgb(0 230 254 / 0.8));
  animation: spark 3.6s ease-in-out infinite;
}
@keyframes spark { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: 0.82; rotate: 45deg; } }
[data-theme='light'] .ag__head { background: rgb(38 44 110 / 0.32); }
[data-theme='light'] .ag__msg--in, [data-theme='light'] .ag__msg--last { background: rgb(99 131 255 / 0.16); box-shadow: inset 0 1px 0 #fff; }
[data-theme='light'] .ag__msg--last.ag__msg--out { background: var(--xk-gradient); }
@media (prefers-reduced-motion: reduce) { .ag__spark { animation: none; } }

/* ----------------------------------------------------------------- app UI (shared by the demos) */
/* Every mock is drawn at a fixed design size and scaled to its box by
   partner.js (data-fit), so it keeps its proportions at any width. */
.ui-fit { position: relative; transform-origin: 0 0; }
.ui-fit:not([style]) { visibility: hidden; } /* until partner.js has measured */

.ui, .demo, .vstack {
  --ui-bg: #ffffff;
  --ui-card: #ffffff;
  --ui-mist: #f4f7ff;
  --ui-ink: #03051c;
  --ui-soft: #6b7690;
  --ui-line: #e9eefb;
  --ui-shadow: 0 10px 24px rgb(99 131 255 / 0.1);
  font-family: var(--font); color: var(--ui-ink); line-height: 1.3;
}
[data-theme='dark'] :is(.ui, .demo, .vstack) {
  --ui-bg: #0a0d2c;
  --ui-card: #10143a;
  --ui-mist: rgb(255 255 255 / 0.05);
  --ui-ink: #ffffff;
  --ui-soft: rgb(255 255 255 / 0.58);
  --ui-line: rgb(255 255 255 / 0.08);
  --ui-shadow: 0 12px 26px rgb(0 0 0 / 0.35);
}
.ui svg, .demo svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the spark: XK's mark for "the assistant" across every mock */
.ui__spark {
  display: inline-block; flex: none; width: 26px; height: 26px; border-radius: 9px;
  background: var(--xk-gradient); position: relative;
  box-shadow: 0 4px 12px rgb(99 131 255 / 0.45);
}
.ui__spark::after {
  content: ''; position: absolute; inset: 6px;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  background: #fff;
}

/* ----------------------------------------------------------------- 03 · the big demo */
.xp__stage { position: relative; margin-top: clamp(8px, 2vw, 24px); }
.xp__glow {
  position: absolute; inset: 8% 6% 4%; z-index: -1; border-radius: 50%;
  background:
    radial-gradient(50% 60% at 25% 40%, rgb(99 77 255 / 0.45), transparent 70%),
    radial-gradient(45% 55% at 80% 70%, rgb(0 202 255 / 0.3), transparent 70%);
  filter: blur(60px); pointer-events: none;
}
[data-theme='light'] .xp__glow { opacity: 0.55; }
.xp__note { display: block; margin-top: 22px; text-align: center; font-size: 0.8rem; color: var(--ink-dim); }

.ui {
  position: relative; width: 1160px; height: 720px; padding: 14px; border-radius: 36px;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 60px 120px -50px rgb(99 77 255 / 0.6), 0 40px 80px -50px rgb(0 0 0 / 0.9);
}
[data-theme='light'] .ui {
  background: linear-gradient(142deg, rgb(255 255 255 / 0.96), rgb(238 246 255 / 0.8));
  box-shadow: inset 0 1px 4px #fff, inset 0 0 0 1px #fff, 0 40px 90px -40px rgb(64 94 154 / 0.35), 0 4px 18px rgb(99 131 255 / 0.1);
}
.ui__app {
  height: 100%; border-radius: 26px; overflow: hidden; background: var(--ui-bg);
  display: grid; grid-template-columns: 84px 1fr 316px;
  box-shadow: 0 6px 22px rgb(67 96 169 / 0.1);
}

/* sidebar: deep navy, like the reference */
.ui__side {
  margin: 10px 0 10px 10px; border-radius: 22px;
  background: linear-gradient(180deg, #1c2258 0%, #03051c 100%);
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0 18px;
  box-shadow: 4px 0 18px rgb(3 5 28 / 0.18);
}
.ui__logo {
  font-weight: 500; font-size: 20px; letter-spacing: -0.04em; margin-bottom: 18px;
  background: var(--xk-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ui__nav { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: rgb(255 255 255 / 0.62); }
.ui__nav svg { width: 20px; height: 20px; }
.ui__nav.is-on { color: #fff; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 0 18px rgb(99 131 255 / 0.35); }
.ui__nav--end { margin-top: auto; }

.ui__main { padding: 26px 20px 20px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ui__top { display: flex; align-items: center; gap: 14px; }
.ui__top > div { flex: 1; display: grid; gap: 4px; }
.ui__eyebrow { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-soft); }
.ui__title { font-size: 25px; font-weight: 500; letter-spacing: -0.03em; }
.ui__search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 14px;
  background: var(--ui-mist); border: 1px solid var(--ui-line); font-size: 12px; color: var(--ui-soft);
}
.ui__search svg { width: 15px; height: 15px; }
.ui__avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); box-shadow: 0 4px 12px rgb(99 77 255 / 0.4);
}
.ui__avatar svg { width: 18px; height: 18px; }

.ui__banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 24px; border-radius: 20px; color: #fff;
  background: linear-gradient(110deg, #141a52 0%, #3a3cc9 58%, #00a9ee 118%);
  box-shadow: 0 14px 30px -12px rgb(99 77 255 / 0.55);
}
.ui__banner::before {
  content: ''; position: absolute; right: -60px; top: -90px; width: 260px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgb(0 230 254 / 0.45), transparent 65%);
}
.ui__banner > div { position: relative; display: grid; gap: 6px; }
.ui__banner-title { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }
.ui__banner-sub { font-size: 12px; color: rgb(255 255 255 / 0.75); }
.ui__banner-btn {
  position: relative; padding: 11px 18px; border-radius: 14px; font-size: 12px; font-weight: 500;
  background: rgb(255 255 255 / 0.16); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.22);
}

.ui__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ui__kpi {
  position: relative; overflow: hidden; display: grid; gap: 6px; padding: 16px; border-radius: 18px;
  background: var(--ui-card); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow);
}
.ui__kpi::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, rgb(99 131 255 / 0.12), transparent 70%);
}
.ui__ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; margin-bottom: 4px; }
.ui__ico svg { width: 18px; height: 18px; }
.ui__ico--a { background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); box-shadow: 0 6px 14px rgb(99 77 255 / 0.35); }
.ui__ico--b { background: linear-gradient(140deg, var(--xk-cyan), var(--xk-light-blue)); color: var(--xk-navy); box-shadow: 0 6px 14px rgb(0 202 255 / 0.35); }
.ui__ico--c { background: linear-gradient(140deg, #8a9bff, var(--xk-lilac)); box-shadow: 0 6px 14px rgb(99 131 255 / 0.35); }
.ui__ico--d { background: linear-gradient(140deg, #1c2258, var(--xk-navy)); box-shadow: 0 6px 14px rgb(3 5 28 / 0.3); }
[data-theme='dark'] .ui__ico--d { background: linear-gradient(140deg, #2a3170, #151a4a); }
.ui__kpi-label { font-size: 11px; color: var(--ui-soft); }
.ui__kpi-n { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ui__delta { justify-self: start; font-size: 10px; padding: 3px 8px; border-radius: 8px; color: #2f8f5b; background: rgb(47 143 91 / 0.1); }
.ui__delta--warn { color: #4a5fd6; background: rgb(99 131 255 / 0.12); }
[data-theme='dark'] .ui__delta { color: #7fe0a8; background: rgb(127 224 168 / 0.12); }
[data-theme='dark'] .ui__delta--warn { color: #a9b8ff; background: rgb(99 131 255 / 0.18); }

.ui__row { flex: 1; display: grid; grid-template-columns: 1.45fr 1fr; gap: 12px; min-height: 0; }
.ui__card {
  position: relative; border-radius: 18px; padding: 16px 18px;
  background: var(--ui-card); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow);
}
.ui__card-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 500; }
.ui__card-head small { font-size: 10px; font-weight: 400; color: var(--ui-soft); }
.ui__chart { display: flex; flex-direction: column; }
.ui__plot { flex: 1; width: 100%; margin-top: 10px; overflow: visible; }
.ui__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ui__area { opacity: 0; stroke: none; }
.ui__dot { fill: var(--xk-light-blue); stroke: #fff; stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 6px rgb(0 202 255 / 0.9)); }
.is-live .ui__line { animation: ui-draw 1.8s var(--ease-out) 0.5s forwards; }
.is-live .ui__area { animation: ui-fade 1.2s var(--ease-out) 1.2s forwards; }
.is-live .ui__dot { animation: ui-fade 0.6s var(--ease-out) 2s forwards; }
@keyframes ui-draw { to { stroke-dashoffset: 0; } }
@keyframes ui-fade { to { opacity: 1; } }
.ui__tip {
  position: absolute; right: 70px; top: 40px; display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px;
  font-size: 10px; color: rgb(255 255 255 / 0.75); background: var(--xk-navy); box-shadow: 0 8px 18px rgb(3 5 28 / 0.25);
  opacity: 0;
}
.ui__tip b { font-size: 16px; color: #fff; font-weight: 500; }
[data-theme='dark'] .ui__tip { background: #fff; color: var(--xk-slate); }
[data-theme='dark'] .ui__tip b { color: var(--xk-navy); }
.is-live .ui__tip { animation: ui-pop 0.6s var(--ease-out) 2.1s forwards; }
@keyframes ui-pop { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.ui__months { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; color: var(--ui-soft); }
.ui__months .is-on { color: #fff; background: var(--xk-navy); padding: 2px 7px; border-radius: 6px; margin: -2px -7px; }
[data-theme='dark'] .ui__months .is-on { background: var(--xk-lilac); }

.ui__flows { display: grid; align-content: start; gap: 16px; }
.ui__flow { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; font-size: 12px; }
.ui__flow span { color: var(--ui-soft); }
.ui__flow b { font-weight: 500; font-variant-numeric: tabular-nums; }
.ui__flow i { grid-column: 1 / -1; height: 7px; border-radius: 6px; background: var(--ui-mist); overflow: hidden; }
.ui__flow em { display: block; height: 100%; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, var(--xk-violet), var(--xk-lilac), var(--xk-light-blue)); clip-path: inset(0 100% 0 0); }
.is-live .ui__flow em { animation: ui-bar 1.3s var(--ease-out) forwards; }
.is-live .ui__flow:nth-child(3) em { animation-delay: 0.15s; }
.is-live .ui__flow:nth-child(4) em { animation-delay: 0.3s; }
@keyframes ui-bar { to { clip-path: inset(0 0 0 0); } }

/* right column: the assistant and the connected systems */
.ui__aside { padding: 26px 20px 20px 0; display: grid; grid-template-rows: 1fr auto; gap: 12px; min-height: 0; }
.ui__chat { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ui__chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--ui-line); }
.ui__chat-head > span:last-child { display: grid; gap: 2px; font-size: 13px; }
.ui__chat-head b { font-weight: 500; }
.ui__chat-head small { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--ui-soft); }
.ui__chat-head small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #34c77b; box-shadow: 0 0 6px #34c77b; }
.ui__msgs { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.ui__msg {
  max-width: 92%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; font-size: 12px; line-height: 1.45;
  background: var(--ui-mist); border: 1px solid var(--ui-line);
}
.ui__msg b { font-weight: 500; color: var(--xk-violet); }
[data-theme='dark'] .ui__msg b { color: #a9b8ff; }
.ui__msg--me {
  align-self: flex-end; border: 0; border-radius: 14px 14px 4px 14px; color: #fff;
  background: linear-gradient(120deg, var(--xk-lilac), var(--xk-violet)); box-shadow: 0 8px 18px -8px rgb(99 77 255 / 0.7);
}
.ui__typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--ui-mist); }
.ui__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--xk-lilac); animation: typing 1.4s ease-in-out infinite; }
.ui__typing i:nth-child(2) { animation-delay: 0.18s; }
.ui__typing i:nth-child(3) { animation-delay: 0.36s; }
.ui__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui__chips i { font-style: normal; font-size: 11px; padding: 6px 10px; border-radius: 10px; color: var(--xk-violet); background: rgb(99 131 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.25); }
[data-theme='dark'] .ui__chips i { color: #c4cfff; }
.ui__input {
  display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 5px 0 14px;
  border-radius: 13px; font-size: 11px; color: var(--ui-soft); background: var(--ui-mist); border: 1px solid var(--ui-line);
}
.ui__input i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--xk-gradient); }
.ui__input svg { width: 15px; height: 15px; }
/* the conversation plays once the demo is on screen (partner.js sets data-step) */
[data-chat] [data-c] { opacity: 0; translate: 0 8px; transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-out); }
[data-chat] .ui__typing { display: none; }
[data-chat][data-step='2'] .ui__typing { display: flex; }
[data-chat][data-step='1'] [data-c='1'],
[data-chat][data-step='2'] :is([data-c='1'], [data-c='2']),
[data-chat][data-step='3'] :is([data-c='1'], [data-c='3']),
[data-chat][data-step='4'] :is([data-c='1'], [data-c='3'], [data-c='4']),
[data-chat][data-step='5'] :is([data-c='1'], [data-c='3'], [data-c='4'], [data-c='5']),
[data-chat][data-step='6'] :is([data-c='1'], [data-c='3'], [data-c='4'], [data-c='6']),
[data-chat][data-step='7'] :is([data-c='1'], [data-c='3'], [data-c='4'], [data-c='6'], [data-c='7']) { opacity: 1; translate: 0 0; }
/* the suggestion is "tapped": the chips give way to the visitor's answer */
[data-chat]:is([data-step='6'], [data-step='7']) [data-c='5'] { display: none; }
[data-chat]:not([data-step='6']):not([data-step='7']) :is([data-c='6'], [data-c='7']) { display: none; }
.ui__brief { display: grid; gap: 7px; padding: 12px; border-radius: 14px 14px 14px 4px; font-size: 11.5px; background: linear-gradient(120deg, rgb(99 131 255 / 0.12), rgb(0 202 255 / 0.06)); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.22); }
.ui__brief b { font-weight: 500; font-size: 12px; }
.ui__brief i { display: flex; align-items: center; gap: 8px; font-style: normal; }
.ui__brief em { width: 18px; height: 18px; flex: none; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 10px; color: #fff; background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); }

.ui__sys { display: grid; gap: 10px; }
.ui__sys-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.ui__sys-row i { width: 8px; height: 8px; border-radius: 50%; background: #34c77b; box-shadow: 0 0 0 3px rgb(52 199 123 / 0.15); }
.ui__sys-row small { font-size: 10px; color: var(--ui-soft); }
.ui__sys-row--sync i { background: var(--xk-light-blue); box-shadow: 0 0 0 3px rgb(0 202 255 / 0.18); animation: ui-blink 1.4s ease-in-out infinite; }
@keyframes ui-blink { 50% { opacity: 0.35; } }

/* the report that arrives by message, floating off the frame */
.ui__notif {
  position: absolute; left: -46px; bottom: 74px; width: 300px;
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 20px;
  font-size: 12px; line-height: 1.45; color: var(--ui-soft);
  background: rgb(255 255 255 / 0.88); border: 1px solid #fff;
  box-shadow: 0 24px 50px -18px rgb(38 44 110 / 0.45);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; translate: -10px 12px;
}
[data-theme='dark'] .ui__notif { background: rgb(16 20 58 / 0.86); border-color: rgb(255 255 255 / 0.12); box-shadow: 0 24px 50px -18px rgb(0 0 0 / 0.8); }
.ui__notif b { display: block; color: var(--ui-ink); font-weight: 500; margin-bottom: 2px; }
.ui__notif-ico { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #34c77b, #1f9e5c); }
.ui__notif-ico svg { width: 18px; height: 18px; }
.is-live .ui__notif { animation: ui-notif 0.9s var(--ease-out) 5.6s forwards; }
@keyframes ui-notif { to { opacity: 1; translate: 0 0; } }

/* the four capabilities, under the demo: an editorial row, not cards */
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(56px, 7vw, 96px); }
.cap { display: grid; align-content: start; gap: 10px; padding-top: 22px; border-top: 1px solid var(--hairline-strong); position: relative; }
.cap::before { content: ''; position: absolute; left: 0; top: -1px; width: 48px; height: 1px; background: var(--xk-gradient); box-shadow: 0 0 10px rgb(99 131 255 / 0.8); }
.cap__ico { width: 26px; height: 26px; color: var(--xk-lilac); margin-bottom: 6px; }
.cap__ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cap__title { font-weight: 500; font-size: 1.12rem; letter-spacing: -0.02em; }
.cap__text { font-size: 0.93rem; color: var(--ink-soft); max-width: 30ch; }
@media (max-width: 1024px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .caps { grid-template-columns: 1fr; }
  .ui__notif { display: none; }
}

/* ----------------------------------------------------------------- 05 · five steps */
@media (min-width: 1025px) {
  .steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .steps--5 .step__text { max-width: 24ch; }
}

/* ----------------------------------------------------------------- 06 · app demos in the rail */
.proj__screen .ui-fit { position: absolute; left: 0; top: 0; }
.demo { position: relative; width: 960px; height: 600px; overflow: hidden; background: var(--ui-mist); }
[data-theme='light'] .demo { background: linear-gradient(150deg, #f8faff, #eaf2ff); }
[data-theme='dark'] .demo { background: linear-gradient(150deg, #0d1035, #070922); }

/* documents */
.demo--docs { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; padding: 76px 36px 36px; }
.dd__list { display: grid; align-content: start; gap: 10px; }
.dd__drop {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 64px; margin-bottom: 6px;
  border-radius: 18px; font-size: 14px; color: var(--ui-soft); border: 1.5px dashed rgb(99 131 255 / 0.45); background: rgb(99 131 255 / 0.05);
}
.dd__drop svg { width: 20px; height: 20px; color: var(--xk-lilac); }
.dd__row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 16px; background: var(--ui-card); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); font-size: 14px;
}
.dd__row.is-on { box-shadow: 0 0 0 2px rgb(99 131 255 / 0.55), var(--ui-shadow); }
.dd__row > span { display: grid; gap: 3px; }
.dd__row small { font-size: 11px; color: var(--ui-soft); }
.dd__file { width: 34px; height: 40px; border-radius: 8px; background: linear-gradient(150deg, var(--xk-lilac), var(--xk-violet)); position: relative; }
.dd__file::after { content: ''; position: absolute; left: 8px; right: 8px; top: 14px; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.7); box-shadow: 0 6px 0 rgb(255 255 255 / 0.5), 0 12px 0 rgb(255 255 255 / 0.35); }
.dd__row em { font-style: normal; font-size: 11px; padding: 4px 9px; border-radius: 8px; background: var(--ui-mist); color: var(--ui-soft); }
.dd__row b { font-weight: 500; font-size: 11px; padding: 4px 9px; border-radius: 8px; }
.dd__row b.ok { color: #2f8f5b; background: rgb(47 143 91 / 0.1); }
.dd__row b.wait { color: #4a5fd6; background: rgb(99 131 255 / 0.12); }
[data-theme='dark'] .dd__row b.ok { color: #7fe0a8; background: rgb(127 224 168 / 0.12); }
[data-theme='dark'] .dd__row b.wait { color: #a9b8ff; }
.dd__panel {
  display: grid; align-content: start; gap: 10px; padding: 20px; border-radius: 22px;
  background: var(--ui-card); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow);
}
.dd__panel-head { display: grid; gap: 3px; font-size: 16px; font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid var(--ui-line); }
.dd__panel-head small { font-size: 11px; font-weight: 400; color: var(--ui-soft); }
.dd__field { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--ui-mist); font-size: 13px; }
.dd__field small { font-size: 10px; color: var(--ui-soft); }
.dd__ai { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; font-size: 12px; background: linear-gradient(120deg, rgb(99 131 255 / 0.14), rgb(0 202 255 / 0.08)); }
.dd__btns { display: flex; gap: 8px; }
.dd__btns i { flex: 1; text-align: center; font-style: normal; font-size: 12px; padding: 10px; border-radius: 12px; background: var(--ui-mist); }
.dd__btns i:first-child { color: #fff; background: linear-gradient(120deg, var(--xk-lilac), var(--xk-violet)); }

/* mobile */
.demo--mobile { display: grid; place-items: center; }
.demo--mobile::before {
  content: ''; position: absolute; left: 50%; top: 55%; width: 520px; height: 520px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgb(99 131 255 / 0.4), rgb(0 202 255 / 0.12) 50%, transparent 70%); filter: blur(30px);
}
.dm__phone {
  position: relative; width: 268px; height: 540px; margin-top: 60px; padding: 46px 16px 16px; border-radius: 44px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--ui-bg); box-shadow: 0 0 0 9px #03051c, 0 0 0 10px rgb(255 255 255 / 0.2), 0 40px 80px -30px rgb(38 44 110 / 0.6);
}
.dm__notch { position: absolute; left: 50%; top: 12px; width: 80px; height: 22px; margin-left: -40px; border-radius: 12px; background: #03051c; }
.dm__hello { display: grid; gap: 2px; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }
.dm__hello small { font-size: 11px; font-weight: 400; color: var(--ui-soft); }
.dm__hero { display: grid; gap: 2px; padding: 16px; border-radius: 20px; color: #fff; background: linear-gradient(130deg, #141a52, #3a3cc9 60%, #00a9ee 130%); box-shadow: 0 12px 24px -12px rgb(99 77 255 / 0.7); }
.dm__hero small { font-size: 11px; color: rgb(255 255 255 / 0.75); }
.dm__hero b { font-size: 30px; font-weight: 500; letter-spacing: -0.03em; }
.dm__hero em { font-style: normal; font-size: 10px; color: rgb(255 255 255 / 0.7); }
.dm__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dm__pair > span { display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: var(--ui-mist); border: 1px solid var(--ui-line); }
.dm__pair small { font-size: 10px; color: var(--ui-soft); }
.dm__pair b { font-size: 20px; font-weight: 500; }
.dm__bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-radius: 16px; background: var(--ui-mist); border: 1px solid var(--ui-line); }
.dm__bars i { flex: 1; height: var(--h); border-radius: 6px; background: linear-gradient(to top, var(--xk-violet), var(--xk-lilac), var(--xk-light-blue)); }
.dm__bars i:not(:nth-child(6)) { opacity: 0.45; }
.dm__ask { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 16px; font-size: 11px; color: var(--ui-soft); background: var(--ui-mist); border: 1px solid var(--ui-line); }
.dm__ask .ui__spark { width: 28px; height: 28px; }
.dm__float {
  position: absolute; z-index: 1; display: flex; align-items: center; gap: 12px; width: 250px; padding: 14px 16px; border-radius: 20px;
  font-size: 12px; color: var(--ui-soft); background: var(--ui-card); border: 1px solid var(--ui-line); box-shadow: 0 24px 50px -18px rgb(38 44 110 / 0.45);
}
.dm__float b { display: block; font-weight: 500; color: var(--ui-ink); font-size: 13px; }
.dm__float--a { left: 70px; top: 190px; }
.dm__float--b { right: 70px; top: 360px; }
.dm__alert { width: 26px; height: 26px; border-radius: 9px; flex: none; background: linear-gradient(140deg, var(--xk-cyan), var(--xk-light-blue)); position: relative; }
.dm__alert::after { content: '!'; position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 14px; color: var(--xk-navy); }

/* connected operations */
.demo--ops { --c: rgb(99 131 255 / 0.55); }
.do__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.do__wires path { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 6 9; animation: flow-dash 1.4s linear infinite; }
.do__node {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; font-size: 15px;
  background: var(--ui-card); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow);
}
.do__node i {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 500; color: #fff;
  background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet));
}
.do__node--out i { background: linear-gradient(140deg, var(--xk-cyan), var(--xk-light-blue)); color: var(--xk-navy); }
.do__hub {
  position: absolute; left: 480px; top: 280px; translate: -50% -50%; width: 130px; height: 130px; border-radius: 38px; padding: 30px;
  background: var(--xk-navy); box-shadow: 0 0 0 10px rgb(99 131 255 / 0.12), 0 0 60px rgb(99 131 255 / 0.7);
}
.do__hub img { width: 100%; height: 100%; }
.do__log {
  position: absolute; left: 50%; bottom: 40px; translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 16px;
  font-size: 13px; white-space: nowrap; background: var(--ui-card); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow);
}
.do__log i { width: 22px; height: 22px; border-radius: 50%; background: #34c77b; position: relative; }
.do__log i::after { content: ''; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }
.do__log small { color: var(--ui-soft); font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .do__wires path { animation: none; } }

/* ----------------------------------------------------------------- 07 · XK Products */
.lab {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: clamp(24px, 4vw, 64px);
  padding: clamp(36px, 5vw, 72px); border-radius: 40px;
  background: linear-gradient(155deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02) 50%, rgb(255 255 255 / 0.05));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 50px 90px -50px rgb(99 77 255 / 0.55);
}
[data-theme='light'] .lab {
  background: linear-gradient(155deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.55) 50%, rgb(255 255 255 / 0.75));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 50px 90px -50px rgb(38 44 110 / 0.4);
}
.lab__light {
  position: absolute; z-index: -1; right: -10%; top: -20%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(99 77 255 / 0.5), rgb(0 202 255 / 0.18) 50%, transparent 70%); filter: blur(50px);
}
.lab__copy { display: grid; justify-items: start; gap: 22px; }
.lab__copy .h2 { margin-top: 0; }
.lab__text { max-width: 44ch; color: var(--ink-soft); }
.lab__status {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px;
  font-size: 0.84rem; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.lab__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--xk-light-blue); box-shadow: 0 0 10px var(--xk-light-blue); animation: ui-blink 1.8s ease-in-out infinite; }
.lab__art { position: relative; display: grid; place-items: center; aspect-ratio: 1; perspective: 900px; }
.lab__art .g3d--pro .gl { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 860px) {
  .lab { grid-template-columns: 1fr; }
  .lab__art { max-width: 320px; justify-self: center; width: 100%; }
}

/* ----------------------------------------------------------------- cta */
.cta__kicker { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

/* ----------------------------------------------------------------- head widths (long partner headlines) */
@media (min-width: 861px) {
  .section__head--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 64px; }
  .section__head--split .h2 { max-width: 22ch; }
  .section__head--split > :last-child { justify-self: end; }
}
.lab .h2 { max-width: 19ch; font-size: clamp(2rem, 3.4vw, 3rem); }
.sx-faq .h2 { max-width: 14ch; }

/* ----------------------------------------------------------------- phones */
@media (max-width: 640px) {
  .hero__motto { display: none; }
  /* the big demo becomes the assistant alone, at a readable size (partner.js
     switches the design size to data-w-sm × data-h-sm) */
  .ui { width: 400px; height: 720px; padding: 10px; border-radius: 30px; }
  .ui__app { grid-template-columns: 1fr; border-radius: 22px; }
  .ui__side, .ui__main { display: none; }
  .ui__aside { padding: 14px; }
  .ui__msg, .ui__brief { font-size: 13px; }
}
@media (max-width: 860px) {
  .section__head--split .section__lead { justify-self: start; }
}

/* =============================================================================
   v2 — less text, more light: ambient backgrounds and the new sections
   ========================================================================== */

/* ----------------------------------------------------------------- bands + ambient light */
/* A full-width band that can carry slow drifting light behind its content.
   The pools are plain radial gradients (no blur filter): cheap to move. */
.band { position: relative; isolation: isolate; overflow: clip; }
.amb {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  /* the light fades out before the band ends: no hard edge where it is clipped */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.amb i {
  position: absolute; width: min(900px, 70vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(99 77 255 / 0.3), transparent 62%);
  animation: amb-drift 24s ease-in-out infinite alternate;
}
.amb i:nth-child(1) { left: -22%; top: -10%; }
.amb i:nth-child(2) { right: -24%; top: 22%; background: radial-gradient(circle, rgb(0 202 255 / 0.22), transparent 62%); animation-duration: 30s; animation-direction: alternate-reverse; }
.amb i:nth-child(3) { left: 28%; bottom: -40%; background: radial-gradient(circle, rgb(99 131 255 / 0.22), transparent 62%); animation-duration: 36s; }
@keyframes amb-drift { to { translate: 10vw 8vh; scale: 1.18; } }
[data-theme='light'] .amb i { opacity: 0.55; }
.amb--soft i { opacity: 0.6; }
[data-theme='light'] .amb--soft i { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { .amb i { animation: none; } }

/* ----------------------------------------------------------------- 04 · the demo band */
.caps .cap__text { max-width: 24ch; }

/* ----------------------------------------------------------------- 05 · why XK: a deep navy band in both themes */
.why {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: clamp(0px, 1.2vw, 16px); border-radius: clamp(24px, 3vw, 40px);
  background: radial-gradient(90% 70% at 85% 0%, #1b1f5c 0%, transparent 60%), linear-gradient(170deg, #070a2a, #03051c 70%);
  color: #fff;
  --ink: #ffffff; --ink-soft: rgb(255 255 255 / 0.72); --ink-dim: rgb(255 255 255 / 0.46); --ink-muted: rgb(255 255 255 / 0.5);
  --hairline: rgb(255 255 255 / 0.1); --hairline-strong: rgb(255 255 255 / 0.18);
}
.amb--why i { opacity: 1 !important; }
.amb--why i:nth-child(1) { background: radial-gradient(circle, rgb(99 77 255 / 0.55), transparent 62%); }
.amb--why i:nth-child(2) { background: radial-gradient(circle, rgb(0 202 255 / 0.32), transparent 62%); }



/* ----------------------------------------------------------------- 01 · vision: three glass layers */
/* Conecta / Comprende / Actúa as a stack of glass planes in depth over the
   brand's satin light. One fluid entrance when first seen, then a calm cycle
   (partner.js) lifts the layer that matches the highlighted word. */
.vis { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.vis__copy { display: grid; gap: 22px; align-content: center; }
.vis__copy .kicker { justify-self: start; }
.vis__copy .h2 { margin-top: 0; max-width: 18ch; }

.vis__verbs { margin-top: 26px; display: grid; }
.vv { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; row-gap: 4px; padding: 18px 0 20px; cursor: var(--cursor); }
.vv__n { grid-row: span 2; padding-top: 0.7em; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--ink-dim); transition: color 0.6s var(--ease-out); }
.vv__mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.vv__word {
  display: block; font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing: -0.04em; line-height: 1.05;
  color: var(--ink-muted); transition: color 0.7s var(--ease-out), translate 1.1s var(--ease-out);
}
.vv__text { font-size: 0.95rem; color: var(--ink-soft); transition: opacity 0.9s var(--ease-out), translate 1s var(--ease-out); }
.vv__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline-strong); transform-origin: left; transition: transform 1.4s var(--ease-out); }
.vv__line::after {
  content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: var(--xk-gradient); box-shadow: 0 0 10px rgb(99 131 255 / 0.8);
}
.vv.is-active .vv__word { color: var(--ink); }
.vv.is-active .vv__n { color: var(--xk-lilac); }
.vv.is-active .vv__line::after { animation: vv-fill 3.8s linear forwards; }
@keyframes vv-fill { to { transform: scaleX(1); } }

.vis__art { position: relative; }
.vis__light {
  /* the satin light, faded out so gradually that it has no visible edge */
  position: absolute; inset: -38% -30%; z-index: -1; pointer-events: none; opacity: 0.75;
  -webkit-mask-image: radial-gradient(closest-side, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.45) 35%, rgb(0 0 0 / 0.12) 65%, transparent 92%);
  mask-image: radial-gradient(closest-side, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.45) 35%, rgb(0 0 0 / 0.12) 65%, transparent 92%);
  transition: opacity 2.4s var(--ease-out) 0.1s;
}
.vis__light::after {
  /* a soft glow under the stack, also the stand-in while the light loads */
  content: ''; position: absolute; inset: 22%; border-radius: 50%; filter: blur(40px);
  background: radial-gradient(circle, rgb(99 77 255 / 0.22), rgb(0 202 255 / 0.08) 55%, transparent 75%);
}
[data-theme='light'] .vis__light { opacity: 0.55; }

.vstack { position: relative; width: 640px; height: 560px; perspective: 1600px; color: var(--ui-ink); font-family: var(--font); }
.vstack__inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(calc(-16deg + var(--ty, 0deg))) rotateX(calc(9deg + var(--tx, 0deg)));
  transition: transform 1.4s var(--ease-out);
  animation: v-float 10s ease-in-out infinite;
}
@keyframes v-float { 50% { translate: 0 -10px; } }

.ly {
  --z: 0px; --lift: 0px;
  position: absolute; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 26px; overflow: hidden;
  background: rgb(255 255 255 / 0.8); border: 1px solid rgb(255 255 255 / 0.9);
  box-shadow: 0 30px 60px -30px rgb(38 44 110 / 0.35), 0 2px 10px rgb(99 131 255 / 0.06);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  transform: translate3d(0, calc(var(--lift) * -0.4), calc(var(--z) + var(--lift)));
  transition: transform 1s var(--ease-out), box-shadow 1s var(--ease-out), opacity 1.2s var(--ease-out), filter 1.2s var(--ease-out);
}
[data-theme='dark'] .ly {
  background: rgb(16 20 58 / 0.72); border-color: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 30px 60px -24px rgb(0 0 0 / 0.75);
}
/* the iridescent rim that lights up on the active layer */
.ly::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgb(255 255 255 / 0.9), rgb(99 131 255 / 0.4) 40%, rgb(99 77 255 / 0.3) 60%, rgb(0 230 254 / 0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.9s var(--ease-out);
}
.ly--1 { left: 30px; top: 40px; width: 430px; height: 250px; --z: -150px; }
.ly--2 { left: 110px; top: 140px; width: 430px; height: 250px; --z: -75px; }
.ly--3 { left: 190px; top: 240px; width: 420px; height: 268px; --z: 0px; }
.vstack[data-active='0'] .ly--1, .vstack[data-active='1'] .ly--2, .vstack[data-active='2'] .ly--3 {
  --lift: 46px;
  box-shadow: 0 40px 80px -30px rgb(99 77 255 / 0.55), 0 0 40px -10px rgb(99 131 255 / 0.45);
}
.vstack[data-active='0'] .ly--1::before, .vstack[data-active='1'] .ly--2::before, .vstack[data-active='2'] .ly--3::before { opacity: 1; }

.ly__head { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.ly__head b { font-weight: 500; letter-spacing: -0.02em; }
.ly__head small { font-size: 12px; color: var(--ui-soft); }
.ly__head em { margin-left: auto; display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 11px; color: var(--ui-soft); }
.ly__head em i { width: 6px; height: 6px; border-radius: 50%; background: #34c77b; box-shadow: 0 0 6px #34c77b; }
.ly__head .ui__spark { margin-left: auto; align-self: center; }
.ly__chips {
  display: flex; gap: 8px;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.ly__chip { display: flex; align-items: center; gap: 8px; flex: none; padding: 6px 12px 6px 6px; border-radius: 12px; font-size: 12px; background: var(--ui-mist); border: 1px solid var(--ui-line); }
.ly__chip i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); }
.ly__chip:nth-child(even) i { color: var(--xk-navy); background: linear-gradient(140deg, var(--xk-cyan), var(--xk-light-blue)); }
.ly__chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ly__spark { width: 100%; height: 46px; overflow: visible; }
.ly__path { fill: none; stroke: var(--xk-lilac); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 4px 8px rgb(99 131 255 / 0.5)); }
.ly__area { fill: rgb(99 131 255 / 0.14); opacity: 0; }
.ly__ask {
  align-self: flex-end; padding: 10px 14px; border-radius: 15px 15px 4px 15px; font-size: 13px; color: #fff;
  background: linear-gradient(120deg, var(--xk-lilac), var(--xk-violet)); box-shadow: 0 12px 24px -12px rgb(99 77 255 / 0.85);
}
.ly__answer { padding: 12px 14px; border-radius: 15px 15px 15px 4px; font-size: 13px; line-height: 1.5; background: var(--ui-mist); border: 1px solid var(--ui-line); }
.ly__answer b { font-weight: 500; color: var(--xk-violet); }
[data-theme='dark'] .ly__answer b { color: #a9b8ff; }
.ly__acts { display: flex; gap: 8px; margin-top: auto; }
.ly__acts i { flex: 1; text-align: center; font-style: normal; font-size: 12px; padding: 10px; border-radius: 12px; background: var(--ui-mist); border: 1px solid var(--ui-line); }
.ly__acts i:first-child { color: #fff; border: 0; background: var(--xk-gradient); box-shadow: 0 10px 22px -10px rgb(0 202 255 / 0.9); }

/* --- the entrance: everything waits until the section is seen (.is-in) */
.js .vis:not(.is-in) .vis__light { opacity: 0; }
.js .vis:not(.is-in) .ly { opacity: 0; transform: translate3d(0, 90px, calc(var(--z) - 240px)); filter: blur(14px); }
.vis.is-in:not(.is-settled) .ly { filter: blur(0); }
.vis.is-in:not(.is-settled) .ly--1 { transition-delay: 0.15s; }
.vis.is-in:not(.is-settled) .ly--2 { transition-delay: 0.35s; }
.vis.is-in:not(.is-settled) .ly--3 { transition-delay: 0.55s; }
.vis.is-in:not(.is-settled) .ly { transition-duration: 1.7s, 1s, 1.3s, 1.3s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
/* the content of each layer settles in after its glass */
.ly__head, .ly__chip, .ly__ask, .ly__answer, .ly__acts { transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out); }
.js .vis:not(.is-in) :is(.ly__head, .ly__chip, .ly__ask, .ly__answer, .ly__acts) { opacity: 0; translate: 0 12px; }
.ly--1 .ly__head { transition-delay: 0.8s; }
.ly__chip:nth-child(1) { transition-delay: 0.95s; } .ly__chip:nth-child(2) { transition-delay: 1.02s; } .ly__chip:nth-child(3) { transition-delay: 1.09s; } .ly__chip:nth-child(4) { transition-delay: 1.16s; } .ly__chip:nth-child(5) { transition-delay: 1.23s; }
.ly--2 .ly__head { transition-delay: 1s; }
.ly--3 .ly__head { transition-delay: 1.2s; }
.ly__ask { transition-delay: 1.4s; } .ly__answer { transition-delay: 1.65s; } .ly__acts { transition-delay: 1.9s; }
.vis.is-in .ly__path { animation: ui-draw 1.8s var(--ease-out) 1.1s forwards; }
.vis.is-in .ly__area { animation: ui-fade 1.2s var(--ease-out) 1.8s forwards; }
/* the words rise out of their mask, each with its line drawing in */
.js .vis:not(.is-in) .vv__word { translate: 0 110%; }
.js .vis:not(.is-in) .vv__text { opacity: 0; translate: 0 10px; }
.js .vis:not(.is-in) .vv__line { transform: scaleX(0); }
.vv:nth-child(1) :is(.vv__word, .vv__text, .vv__line) { transition-delay: 0.45s; }
.vv:nth-child(2) :is(.vv__word, .vv__text, .vv__line) { transition-delay: 0.6s; }
.vv:nth-child(3) :is(.vv__word, .vv__text, .vv__line) { transition-delay: 0.75s; }
.vis.is-settled :is(.vv__word, .vv__text, .vv__line) { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .vstack__inner { animation: none; }
  .ly, .vv__word, .vv__text, .vv__line, .ly__head, .ly__chip, .ly__ask, .ly__answer, .ly__acts { transition: none !important; }
  .ly__path { stroke-dashoffset: 0; } .ly__area { opacity: 1; }
}
@media (max-width: 860px) {
  .vis { grid-template-columns: minmax(0, 1fr); }
  .vis__art { margin-top: 8px; }
}
@media (max-width: 640px) {
  .vstack { width: 400px; height: 470px; }
  .vstack__inner { transform: rotateY(-10deg) rotateX(8deg); }
  .ly { padding: 16px 18px; border-radius: 22px; gap: 12px; }
  .ly--1 { left: 8px; top: 16px; width: 300px; height: 200px; }
  .ly--2 { left: 48px; top: 104px; width: 300px; height: 200px; }
  .ly--3 { left: 88px; top: 192px; width: 304px; height: 262px; }
  .ly__head em { display: none; }
}


/* ----------------------------------------------------------------- 04 · ask your company */
/* The assistant window answers live (partner.js types the reply); three cards
   rise in around it and then drift. All of it plays once, when first seen. */
.ask {
  --a-card: rgb(255 255 255 / 0.86); --a-mist: rgb(99 131 255 / 0.07); --a-ok: #24a866;
  --a-edge: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / 0.9);
  --a-shadow: 0 40px 80px -40px rgb(38 44 110 / 0.35);
}
[data-theme='dark'] .ask {
  --a-card: rgb(16 20 60 / 0.74); --a-mist: rgb(255 255 255 / 0.05); --a-ok: #4fd795;
  --a-edge: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 0 0 1px rgb(255 255 255 / 0.08);
  --a-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.85);
}
.ask__stage { position: relative; }
.ask__glow { position: absolute; inset: 0 5%; z-index: -1; border-radius: 50%; filter: blur(70px); background: radial-gradient(50% 60% at 50% 50%, rgb(99 77 255 / 0.32), rgb(0 202 255 / 0.12) 55%, transparent 75%); }
[data-theme='light'] .ask__glow { opacity: 0.6; }
.ask__note { margin-top: 26px; text-align: center; font-size: 0.8rem; color: var(--ink-dim); }
.scene { position: relative; width: 1080px; height: 540px; color: var(--ink); font-family: var(--font); line-height: 1.4; }
.scene svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-pop] { opacity: 0; translate: 0 34px; scale: 0.96; filter: blur(12px); transition: opacity 1.2s var(--ease-out), translate 1.4s var(--ease-out), scale 1.4s var(--ease-out), filter 1.2s var(--ease-out); transition-delay: var(--d, 0s); }
.is-live [data-pop] { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
.chatwin {
  position: absolute; left: 290px; top: 10px; width: 500px; height: 500px; display: flex; flex-direction: column; gap: 14px; padding: 22px;
  border-radius: 30px; background: var(--a-card); box-shadow: var(--a-edge), 0 60px 120px -50px rgb(99 77 255 / 0.6);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.chatwin__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.chatwin__head .ui__spark { width: 32px; height: 32px; border-radius: 10px; }
.chatwin__head > span { display: grid; gap: 2px; }
.chatwin__head b { font-weight: 500; font-size: 15px; }
.chatwin__head small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-dim); }
.chatwin__head small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--a-ok); box-shadow: 0 0 6px var(--a-ok); }
.chatwin__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.bubble { max-width: 92%; padding: 11px 14px; border-radius: 16px 16px 16px 5px; font-size: 14px; line-height: 1.5; background: var(--a-mist); box-shadow: inset 0 0 0 1px var(--hairline); }
.bubble--me { align-self: flex-end; color: #fff; border-radius: 16px 16px 5px 16px; background: linear-gradient(120deg, var(--xk-lilac), var(--xk-violet)); box-shadow: 0 12px 26px -12px rgb(99 77 255 / 0.85); }
.typing { align-self: flex-start; display: none; gap: 5px; padding: 14px 16px; border-radius: 16px 16px 16px 5px; background: var(--a-mist); }
.typing.is-shown { display: flex; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--xk-lilac); animation: ask-dots 1.3s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ask-dots { 0%, 60%, 100% { translate: 0 0; opacity: 0.4; } 30% { translate: 0 -4px; opacity: 1; } }
.chips { display: flex; gap: 8px; }
.chip { padding: 7px 12px; border-radius: 12px; font-size: 13px; color: var(--xk-lilac); background: rgb(99 131 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.3); }
[data-talk] [data-t] { opacity: 0; translate: 0 10px; transition: opacity 0.6s var(--ease-out), translate 0.7s var(--ease-out); }
[data-talk] [data-t].is-shown { opacity: 1; translate: 0 0; }
.chatwin__input { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 6px 0 16px; border-radius: 15px; font-size: 13px; color: var(--ink-dim); background: var(--a-mist); box-shadow: inset 0 0 0 1px var(--hairline); }
.chatwin__input i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--xk-gradient); }
.chatwin__input svg { width: 15px; height: 15px; }
.float { position: absolute; display: grid; gap: 8px; padding: 18px 20px; border-radius: 22px; background: var(--a-card); box-shadow: var(--a-edge), var(--a-shadow); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: ask-drift 9s ease-in-out infinite; }
@keyframes ask-drift { 50% { transform: translateY(-10px); } }
.float small { font-size: 12px; color: var(--ink-dim); }
.float--kpi { left: 30px; top: 60px; width: 230px; animation-delay: -2s; }
.float--kpi b { font-weight: 300; font-size: 44px; letter-spacing: -0.04em; line-height: 1; }
.float--kpi svg { width: 100%; height: 36px; stroke: var(--xk-lilac); stroke-width: 2.5; filter: drop-shadow(0 4px 8px rgb(99 131 255 / 0.5)); }
.float--sys { left: 50px; top: 290px; width: 240px; animation-delay: -5s; }
.float--sys span { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.float--sys span i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-ok); box-shadow: 0 0 0 3px rgb(79 215 149 / 0.15); }
.float--note { right: 20px; top: 320px; width: 270px; display: flex; align-items: center; gap: 14px; animation-delay: -7s; }
.float--note span { display: grid; gap: 2px; font-size: 12px; color: var(--ink-dim); }
.float--note b { font-weight: 500; font-size: 14px; color: var(--ink); }
.note__ico { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #34c77b, #1f9e5c); }
.note__ico svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .float, .typing i { animation: none; } [data-pop] { transition: none; } }
@media (max-width: 640px) {
  .scene { width: 380px; height: 500px; }
  .chatwin { left: 0; top: 0; width: 380px; height: 490px; padding: 18px; }
  .float { display: none; }
}

.ask .h2--center { max-width: 24ch; }
.ask .h2__soft { display: block; }

/* ----------------------------------------------------------------- 05 · why XK: satin band + aura boxes */
.why .waves { z-index: -2; }
.why .waves-fallback { display: none; }
/* boxes: dark glass with a blurred aura of light inside. The first one's aura
   moves in three XK colours; the others glow in a single XK colour. On hover
   the box lifts, the aura grows and leans toward the pointer (app: --ax/--ay). */
.pillars-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.pw {
  --c: rgb(99 131 255 / 0.9);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: start; gap: 12px; padding: 28px 26px 32px; border-radius: 24px;
  background: rgb(6 8 30 / 0.55);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.06), 0 30px 60px -30px rgb(0 0 0 / 0.75);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  transition: translate 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out), opacity 0.9s var(--ease-out);
}
.pw::after {
  /* a fine highlight along the top edge, like light on the rim of the glass */
  content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.45), transparent); opacity: 0.6; transition: opacity 0.6s;
}
.pw--cyan { --c: rgb(0 202 255 / 0.75); }
.pw--violet { --c: rgb(99 77 255 / 0.95); }
.pw--lilac { --c: rgb(99 131 255 / 0.9); }
.pw__aura {
  position: absolute; z-index: -1; inset: -35% -25% 15% -25%; pointer-events: none;
  filter: blur(34px); opacity: 0.85;
  transform: translate(var(--ax, 0px), var(--ay, 0px)) scale(var(--as, 1));
  transition: opacity 0.8s var(--ease-out), transform 1.2s var(--ease-out);
}
.pw__aura i { position: absolute; left: 20%; top: 4%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, var(--c) 18%, transparent 68%); }
/* the featured box: three colours drifting into each other */
.pw--live .pw__aura { opacity: 1; }
.pw--live .pw__aura i { width: 52%; mix-blend-mode: screen; animation: 12s ease-in-out infinite alternate; }
.pw--live .pw__aura i:nth-child(1) { --c: rgb(99 77 255 / 0.95); left: 4%; top: 6%; animation-name: aura-a; }
.pw--live .pw__aura i:nth-child(2) { --c: rgb(99 131 255 / 0.9); left: 40%; top: 0%; animation-name: aura-b; animation-duration: 15s; }
.pw--live .pw__aura i:nth-child(3) { --c: rgb(0 202 255 / 0.75); left: 24%; top: 26%; animation-name: aura-c; animation-duration: 18s; }
@keyframes aura-a { 50% { translate: 40% 18%; } 100% { translate: 10% 34%; } }
@keyframes aura-b { 50% { translate: -46% 22%; } 100% { translate: -12% -8%; } }
@keyframes aura-c { 50% { translate: 26% -24%; } 100% { translate: -30% 6%; } }
.pw__ico {
  width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), inset 0 1px 0 rgb(255 255 255 / 0.12);
  transition: background-color 0.5s, box-shadow 0.6s var(--ease-out);
}
.pw__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.7s var(--ease-out); }
.pw__title { font-weight: 500; font-size: 1.12rem; letter-spacing: -0.02em; color: #fff; }
.pw__text { font-size: 0.93rem; color: rgb(255 255 255 / 0.66); }
.pw:hover { translate: 0 -6px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.12), 0 36px 70px -30px color-mix(in oklab, var(--c) 60%, transparent); }
.pw:hover::after { opacity: 1; }
.pw:hover .pw__aura { opacity: 1; --as: 1.22; filter: blur(30px) saturate(130%); }
.pw:hover .pw__ico { background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 80%, transparent), 0 0 22px -4px var(--c); }
.pw:hover .pw__ico svg { transform: scale(1.1) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .pw--live .pw__aura i { animation: none; } .pw, .pw__aura { transition: none; } }
@media (max-width: 1024px) { .pillars-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pillars-why { grid-template-columns: 1fr; } }
/* the boxes also carry .reveal: keep their entrance and give the hover lift room to win */
.js .pw.reveal { transition: opacity 0.9s var(--ease-out), translate 0.8s var(--ease-out), box-shadow 0.7s var(--ease-out); }
.js .pw.reveal.is-in:hover { translate: 0 -6px; transition-delay: 0s; }

/* ----------------------------------------------------------------- 05 · v9: plain glass + brand glass icons */
/* the boxes are clear glass over the satin; only the featured one carries
   colour, an aura that keeps turning */
.pw { --c: rgb(255 255 255 / 0.55); background: rgb(255 255 255 / 0.035); }
.pw--live { --c: rgb(99 131 255 / 0.9); }
.pw--live .pw__aura { animation: aura-turn 16s linear infinite; }
@keyframes aura-turn { to { rotate: 360deg; } }
.pw__art { position: relative; width: 84px; height: 84px; margin: -6px 0 12px -10px; display: grid; place-items: center; perspective: 700px; }
.pw__art .g3d { scale: 0.62; transition: transform 0.9s var(--ease-out); }
.pw__art::before {
  /* a soft light under the icon, as on the agency cards */
  content: ''; position: absolute; inset: 14%; z-index: -1; border-radius: 50%; filter: blur(16px); opacity: 0.35;
  background: radial-gradient(circle, rgb(99 131 255 / 0.8), rgb(99 77 255 / 0.3) 50%, transparent 72%);
  transition: opacity 0.7s var(--ease-out), scale 0.9s var(--ease-out);
}
.pw:hover .pw__art .g3d { --rx: 4deg; --ry: -32deg; }
.pw:hover .pw__art::before { opacity: 0.9; scale: 1.2; }
.pw--glass:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.32), inset 0 1px 0 rgb(255 255 255 / 0.14), 0 36px 70px -30px rgb(99 77 255 / 0.45); }
@media (prefers-reduced-motion: reduce) { .pw--live .pw__aura { animation: none; } }

/* ----------------------------------------------------------------- 05 · v10: the featured box, voicestudio-style sweep */
/* A conic sweep of XK colours turns once every 9s (a registered angle, so the
   gradient itself rotates). It draws a 1px rim and, blurred, a glow under it. */
@property --pw-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pw--live {
  --pw-angle: 0deg;
  --pw-sweep: conic-gradient(from var(--pw-angle), #ffffff0a 0deg, #ffffff0a 140deg, #6383ff 190deg, #634dff 232deg, #00e6fe 274deg, #00caff 316deg, #ffffff0a 360deg);
  overflow: visible;
  background: radial-gradient(120% 90% at 0 0, rgb(255 255 255 / 0.08), transparent 55%), rgb(6 8 30 / 0.45);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: pw-sweep 9s linear infinite;
}
@keyframes pw-sweep { to { --pw-angle: 360deg; } }
.pw--live::before {
  content: ''; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: var(--pw-sweep);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.pw--live::after {
  content: ''; position: absolute; inset: -1px; left: -1px; right: -1px; top: -1px; height: auto; z-index: -2; border-radius: inherit; pointer-events: none;
  background: var(--pw-sweep); filter: blur(18px); opacity: 0.7; transition: opacity 0.4s;
}
.pw--live:hover::after { opacity: 0.95; }
.js .pw--live.reveal.is-in:hover, .pw--live:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1); }
@media (prefers-reduced-motion: reduce) { .pw--live { --pw-angle: 200deg; animation: none; } }

/* the colour also moves inside the featured box: a blurred, oversized sweep
   that turns the other way and a soft pool that drifts, clipped to the glass */
.pw__flow { position: absolute; inset: 1px; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.pw__flow i { position: absolute; border-radius: 50%; filter: blur(30px); }
.pw__flow i:nth-child(1) {
  left: -40%; top: -40%; width: 180%; aspect-ratio: 1; opacity: 0.38;
  background: conic-gradient(from 0deg, transparent 0deg 120deg, #6383ff 170deg, #634dff 215deg, #00e6fe 260deg, #00caff 300deg, transparent 350deg);
  animation: pw-flow-turn 14s linear infinite reverse;
}
.pw__flow i:nth-child(2) {
  left: 10%; top: 30%; width: 70%; aspect-ratio: 1; opacity: 0.45;
  background: radial-gradient(circle, rgb(99 77 255 / 0.9), rgb(0 202 255 / 0.25) 55%, transparent 72%);
  animation: pw-flow-drift 11s ease-in-out infinite alternate;
}
@keyframes pw-flow-turn { to { rotate: 360deg; } }
@keyframes pw-flow-drift { 0% { translate: -30% -20%; } 50% { translate: 25% 10%; } 100% { translate: -5% 30%; } }
.pw--live:hover .pw__flow i:nth-child(1) { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .pw__flow i { animation: none; } }

/* no light in the middle: the inner sweep only shows along the edges, so the
   colour turns around the box and the centre stays clear glass */
.pw__flow {
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 42%, rgb(0 0 0 / 0.5) 68%, #000 92%);
  mask-image: radial-gradient(ellipse at center, transparent 42%, rgb(0 0 0 / 0.5) 68%, #000 92%);
}
.pw__flow i:nth-child(1) { opacity: 0.5; }
/* the glow under the glass also stays at the edges, not in the middle */
.pw--live::after { -webkit-mask-image: radial-gradient(ellipse at center, transparent 38%, rgb(0 0 0 / 0.6) 66%, #000 88%); mask-image: radial-gradient(ellipse at center, transparent 38%, rgb(0 0 0 / 0.6) 66%, #000 88%); }
/* the middle of the featured box is the same clear glass as the others */
.pw--live { background: radial-gradient(120% 90% at 0 0, rgb(255 255 255 / 0.08), transparent 55%), rgb(255 255 255 / 0.035); }
/* the turning colour hugs the rim: a soft frame-shaped mask (two edge bands
   added together) instead of an oval, so no empty circle shows in the middle */
.pw__flow, .pw--live::after {
  -webkit-mask-image: linear-gradient(to right, #000, transparent 24%, transparent 76%, #000), linear-gradient(to bottom, #000, transparent 26%, transparent 74%, #000);
  mask-image: linear-gradient(to right, #000, transparent 24%, transparent 76%, #000), linear-gradient(to bottom, #000, transparent 26%, transparent 74%, #000);
  -webkit-mask-composite: source-over; mask-composite: add;
}
.pw__flow i:nth-child(1) { opacity: 0.6; }
/* thinner, softer edge band: a glow along the rim rather than a frame */
.pw__flow, .pw--live::after {
  -webkit-mask-image: linear-gradient(to right, #000, rgb(0 0 0 / 0.35) 7%, transparent 16%, transparent 84%, rgb(0 0 0 / 0.35) 93%, #000), linear-gradient(to bottom, #000, rgb(0 0 0 / 0.35) 8%, transparent 18%, transparent 82%, rgb(0 0 0 / 0.35) 92%, #000);
  mask-image: linear-gradient(to right, #000, rgb(0 0 0 / 0.35) 7%, transparent 16%, transparent 84%, rgb(0 0 0 / 0.35) 93%, #000), linear-gradient(to bottom, #000, rgb(0 0 0 / 0.35) 8%, transparent 18%, transparent 82%, rgb(0 0 0 / 0.35) 92%, #000);
}
.pw__flow i:nth-child(1) { opacity: 0.75; filter: blur(22px); }
/* softer again: the colour fades in from the rim over a wide, gradual band,
   so it reads as diffuse light around the box (no frame, no empty circle) */
.pw__flow, .pw--live::after {
  -webkit-mask-image: linear-gradient(to right, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 27%, transparent 44%, transparent 56%, rgb(0 0 0 / 0.22) 73%, rgb(0 0 0 / 0.6) 88%, #000), linear-gradient(to bottom, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 28%, transparent 46%, transparent 54%, rgb(0 0 0 / 0.22) 72%, rgb(0 0 0 / 0.6) 88%, #000);
  mask-image: linear-gradient(to right, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 27%, transparent 44%, transparent 56%, rgb(0 0 0 / 0.22) 73%, rgb(0 0 0 / 0.6) 88%, #000), linear-gradient(to bottom, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 28%, transparent 46%, transparent 54%, rgb(0 0 0 / 0.22) 72%, rgb(0 0 0 / 0.6) 88%, #000);
}
.pw__flow i:nth-child(1) { opacity: 0.7; filter: blur(36px); }
.pw--live::after { filter: blur(24px); }

/* ----------------------------------------------------------------- 05 · the glass boxes shine on hover */
/* On hover an XK gradient lights the rim and glows softly in from the edges,
   drifting slowly while the pointer stays. */
.pw--glass::before {
  content: ''; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, #6383ff, #634dff 35%, #00e6fe 70%, #00caff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.6s var(--ease-out);
}
.pw__shine {
  position: absolute; inset: 1px; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 0.7s var(--ease-out);
  -webkit-mask-image: linear-gradient(to right, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 27%, transparent 44%, transparent 56%, rgb(0 0 0 / 0.22) 73%, rgb(0 0 0 / 0.6) 88%, #000), linear-gradient(to bottom, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 28%, transparent 46%, transparent 54%, rgb(0 0 0 / 0.22) 72%, rgb(0 0 0 / 0.6) 88%, #000);
  mask-image: linear-gradient(to right, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 27%, transparent 44%, transparent 56%, rgb(0 0 0 / 0.22) 73%, rgb(0 0 0 / 0.6) 88%, #000), linear-gradient(to bottom, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 28%, transparent 46%, transparent 54%, rgb(0 0 0 / 0.22) 72%, rgb(0 0 0 / 0.6) 88%, #000);
  -webkit-mask-composite: source-over; mask-composite: add;
}
.pw__shine::before {
  content: ''; position: absolute; inset: -20%; filter: blur(28px);
  background: linear-gradient(135deg, #6383ff, #634dff 30%, #00e6fe 60%, #00caff 80%, #6383ff);
  background-size: 220% 220%; animation: pw-shine 5s ease-in-out infinite alternate; animation-play-state: paused;
}
@keyframes pw-shine { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.pw--glass:hover::before { opacity: 1; }
.pw--glass:hover .pw__shine { opacity: 0.75; }
.pw--glass:hover .pw__shine::before { animation-play-state: running; }
.pw--glass:hover .pw__art::before { opacity: 1; }
.js .pw--glass.reveal.is-in:hover, .pw--glass:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 30px 70px -28px rgb(99 77 255 / 0.65), 0 0 40px -12px rgb(0 202 255 / 0.45); }
@media (prefers-reduced-motion: reduce) { .pw__shine::before { animation: none; } }

/* ----------------------------------------------------------------- 05 · v11: the agency's glass cards */
/* four across on desktop, a little tighter than the agency's three */
.why__cards { gap: clamp(28px, 3vw, 44px); margin-top: 0; }
@media (min-width: 1025px) { .why__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.why__cards .card-h { min-height: 320px; }
/* the featured card keeps the turning sweep (rules above) on the agency's shape */
.why__cards .pw--live { padding: 30px 26px 28px; }
/* dark theme: the cards keep their deep look on the navy band */
[data-theme='dark'] .why .card-h { box-shadow: 0 46px 80px -38px rgb(99 77 255 / 0.42), 0 30px 60px -34px rgb(0 0 0 / 0.9); }
[data-theme='dark'] .why .card-h--glass:not(.pw--live) {
  background: linear-gradient(155deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.045) 48%, rgb(255 255 255 / 0.08));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 46px 80px -40px rgb(var(--tint) / 0.4), 0 30px 60px -34px rgb(0 0 0 / 0.85);
}
[data-theme='dark'] .why .card-h__bg i:nth-child(1) { opacity: 0.3; }
[data-theme='dark'] .why .card-h__bg i:nth-child(2) { opacity: 0.45; }
[data-theme='dark'] .why .card-h--glass:hover .card-h__bg i:nth-child(1) { opacity: 0.5; }
[data-theme='dark'] .why .card-h--glass:hover .card-h__bg i:nth-child(2) { opacity: 0.7; }
[data-theme='dark'] .why .btn--frost { background: rgb(255 255 255 / 0.08); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.12); }
[data-theme='dark'] .why .btn--frost:hover { background: rgb(255 255 255 / 0.16); }
[data-theme='dark'] .why .btn--frost::before {
  background: conic-gradient(from var(--spin), transparent 0 52%, rgb(99 77 255 / 0.35) 68%, rgb(99 131 255 / 0.75) 80%, rgb(0 230 254 / 0.95) 88.5%, rgb(255 255 255 / 0.95) 89.5%, transparent 90.5% 100%);
}
[data-theme='dark'] .why .card-h--glass.pw--live { background: radial-gradient(120% 90% at 0 0, rgb(255 255 255 / 0.08), transparent 55%), rgb(255 255 255 / 0.035); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 46px 80px -38px rgb(99 77 255 / 0.42), 0 30px 60px -34px rgb(0 0 0 / 0.9); }
[data-theme='dark'] .why .card-h--glass.pw--live { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 46px 80px -38px rgb(99 77 255 / 0.42), 0 30px 60px -34px rgb(0 0 0 / 0.9); }
/* no buttons in these cards: a shorter card, the icon still breaking out */
.why__cards .card-h { min-height: 250px; }
@media (min-width: 1025px) { .why__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the key words of the hero description stand out */
.hero__sub strong { font-weight: 500; color: var(--ink); }

/* ----------------------------------------------------------------- 01 · dashboard + floating phone */
/* the glass frame now holds only the dashboard; the assistant lives on a phone
   that floats over its right edge, where the assistant column used to be */
.xp .ui, [data-theme='light'] .xp .ui { padding: 0; background: none; box-shadow: none; }
.xp .ui::before {
  content: ''; position: absolute; inset: 0 240px 0 0; border-radius: 36px; z-index: 0;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 60px 120px -50px rgb(99 77 255 / 0.6), 0 40px 80px -50px rgb(0 0 0 / 0.9);
}
[data-theme='light'] .xp .ui::before {
  background: linear-gradient(142deg, rgb(255 255 255 / 0.96), rgb(238 246 255 / 0.8));
  box-shadow: inset 0 1px 4px #fff, inset 0 0 0 1px #fff, 0 40px 90px -40px rgb(64 94 154 / 0.35), 0 4px 18px rgb(99 131 255 / 0.1);
}
.xp .ui__app { position: relative; z-index: 1; height: calc(100% - 28px); margin: 14px 254px 14px 14px; grid-template-columns: 84px 1fr; }
.ui__phone {
  position: absolute; z-index: 2; right: 18px; top: 26px; width: 320px; height: 668px;
  display: flex; flex-direction: column; gap: 12px; padding: 54px 16px 16px; border-radius: 46px;
  background: var(--ui-bg); color: var(--ui-ink);
  box-shadow: 0 0 0 9px #03051c, 0 0 0 10px rgb(255 255 255 / 0.2), 0 50px 90px -30px rgb(38 44 110 / 0.55), 0 30px 60px -30px rgb(99 77 255 / 0.5);
  opacity: 0; translate: 40px 20px; transition: opacity 1.1s var(--ease-out) 0.35s, translate 1.3s var(--ease-out) 0.35s;
  animation: phone-float 8s ease-in-out infinite;
}
.is-live .ui__phone { opacity: 1; translate: 0 0; }
@keyframes phone-float { 50% { transform: translateY(-10px); } }
.ui__phone-notch { position: absolute; left: 50%; top: 14px; width: 96px; height: 26px; margin-left: -48px; border-radius: 14px; background: #03051c; }
.ui__phone .ui__chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--ui-line); }
.ui__phone .ui__msgs { flex: 1; display: flex; flex-direction: column; gap: 9px; }
@media (prefers-reduced-motion: reduce) { .ui__phone { animation: none; transition: none; opacity: 1; translate: none; } }
/* phones: only the phone, centred */
@media (max-width: 640px) {
  .xp .ui::before, .xp .ui__app { display: none; }
  .ui__phone { right: auto; left: 40px; top: 20px; }
}
/* less overlap: the phone only just covers the dashboard's edge */
.xp .ui::before { right: 286px; }
.xp .ui__app { margin-right: 300px; }
.xp .ui__notif { z-index: 3; }
.ui__phone { right: 4px; }
.xp .ui::before { right: 296px; }
.xp .ui__app { margin-right: 310px; }
@media (max-width: 640px) { .ui__phone { right: auto; } }
/* the dashboard back at full size; the phone smaller, floating over its top-right corner */
.xp .ui::before { right: 0; }
.xp .ui__app { margin-right: 14px; }
.ui__phone { right: -56px; top: -64px; scale: 0.68; transform-origin: 100% 0; }
@media (max-width: 640px) { .ui__phone { right: auto; left: 40px; top: 20px; scale: 1; } }
/* frame: even edges all round (the app's top margin was collapsing through the frame) */
.xp .ui, [data-theme='light'] .xp .ui { padding: 14px; }
.xp .ui__app { margin: 0; height: 100%; }
/* a slightly bigger phone, kept inside the stage */
.ui__phone { right: -18px; top: -52px; scale: 0.82; }
/* dark theme: a dark bezel without the bright outer ring */
[data-theme='dark'] .ui__phone { box-shadow: 0 0 0 9px #060823, 0 0 0 10px rgb(255 255 255 / 0.07), 0 50px 90px -30px rgb(0 0 0 / 0.8), 0 30px 60px -30px rgb(99 77 255 / 0.5); }
[data-theme='dark'] .ui__phone-notch { background: #060823; }
@media (max-width: 640px) { .ui__phone { right: auto; left: 40px; top: 20px; scale: 1; } .xp .ui, [data-theme='light'] .xp .ui { padding: 0; } }
/* ----------------------------------------------------------------- 01 · each piece of the dashboard arrives on its own */
/* frame → sidebar and its icons → header → banner → the four cards → chart →
   processes → phone → message. All once, when the stage is first seen (.is-live). */
.xp .ui::before { opacity: 0; scale: 0.97; transition: opacity 1s var(--ease-out), scale 1.3s var(--ease-out); }
.xp .ui.is-live::before { opacity: 1; scale: 1; }
.xp .ui :is(.ui__side, .ui__logo, .ui__nav, .ui__top > div, .ui__search, .ui__avatar, .ui__banner, .ui__kpi, .ui__chart, .ui__flows) {
  opacity: 0; translate: 0 18px; filter: blur(8px);
  transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out), filter 0.9s var(--ease-out), box-shadow 0.4s;
  transition-delay: var(--e, 0s);
}
.xp .ui.is-live :is(.ui__side, .ui__logo, .ui__nav, .ui__top > div, .ui__search, .ui__avatar, .ui__banner, .ui__kpi, .ui__chart, .ui__flows) { opacity: 1; translate: 0 0; filter: blur(0); }
.xp .ui__side { --e: 0.15s; translate: -24px 0 !important; }
.xp .ui.is-live .ui__side { translate: 0 0 !important; }
.xp .ui__logo { --e: 0.3s; }
.xp .ui__nav:nth-child(2) { --e: 0.38s; } .xp .ui__nav:nth-child(3) { --e: 0.44s; } .xp .ui__nav:nth-child(4) { --e: 0.5s; }
.xp .ui__nav:nth-child(5) { --e: 0.56s; } .xp .ui__nav:nth-child(6) { --e: 0.62s; } .xp .ui__nav:nth-child(7) { --e: 0.68s; }
.xp .ui__top > div { --e: 0.3s; } .xp .ui__search { --e: 0.4s; } .xp .ui__avatar { --e: 0.48s; }
.xp .ui__banner { --e: 0.55s; scale: 0.97; transition-property: opacity, translate, filter, scale; }
.xp .ui.is-live .ui__banner { scale: 1; }
.xp .ui__kpi:nth-child(1) { --e: 0.72s; } .xp .ui__kpi:nth-child(2) { --e: 0.83s; } .xp .ui__kpi:nth-child(3) { --e: 0.94s; } .xp .ui__kpi:nth-child(4) { --e: 1.05s; }
.xp .ui__chart { --e: 1.15s; } .xp .ui__flows { --e: 1.27s; }
/* their own small animations wait for them */
.xp .is-live .ui__line { animation-delay: 1.5s; }
.xp .is-live .ui__area { animation-delay: 2.1s; }
.xp .is-live .ui__dot { animation-delay: 2.8s; }
.xp .is-live .ui__tip { animation-delay: 2.9s; }
.xp .is-live .ui__flow em { animation-delay: 1.6s; }
.xp .is-live .ui__flow:nth-child(3) em { animation-delay: 1.75s; }
.xp .is-live .ui__flow:nth-child(4) em { animation-delay: 1.9s; }
.xp .ui__phone { transition-delay: 1.35s, 1.35s; }
.xp .is-live .ui__notif { animation-delay: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  .xp .ui::before, .xp .ui :is(.ui__side, .ui__logo, .ui__nav, .ui__top > div, .ui__search, .ui__avatar, .ui__banner, .ui__kpi, .ui__chart, .ui__flows) { opacity: 1; translate: none !important; filter: none; scale: 1; transition: none; }
}
/* a narrower dashboard, shifted left: the phone now covers only its edge */
.xp .ui, [data-theme='light'] .xp .ui { padding: 14px 174px 14px 14px; }
.xp .ui::before { right: 160px; }
@media (max-width: 640px) { .xp .ui, [data-theme='light'] .xp .ui { padding: 0; } }
/* automation chips: a done check instead of a system icon */
.ly__chip--auto i { background: linear-gradient(140deg, #34c77b, #1f9e5c) !important; color: #fff !important; }
.ly__chip--auto svg { stroke-width: 2.4; }
/* less air between section 01 (dashboard) and 02 (todo conectado) */
.xp-band .section.xp { padding-bottom: clamp(40px, 5vw, 80px); }
.vision .section.vis { padding-top: clamp(40px, 5vw, 80px); }
/* the soft light behind the layers must not be cut at the top of the section */
.band.vision { overflow: visible; }

/* ----------------------------------------------------------------- 01 · a smaller dashboard: heading, demo and the four lines fit one screen */
.xp-band .section.xp { padding-top: clamp(64px, 7vw, 110px); }
.xp .section__head { margin-bottom: clamp(28px, 3vw, 44px); }
.xp .xp__stage { max-width: 940px; margin-inline: auto; }
.xp .xp__note { margin-top: 14px; }
.xp .caps { margin-top: clamp(32px, 3.4vw, 52px); }

/* ----------------------------------------------------------------- the phone as a Telegram chat */
.ui__phone.tg { padding: 0; gap: 0; overflow: hidden; --tg-head: #ffffff; --tg-ink: #000; --tg-soft: #8a8f99; --tg-in: #ffffff; --tg-out: #effdde; --tg-check: #4fae4e; --tg-btn: rgb(0 0 0 / 0.22); }
[data-theme='dark'] .ui__phone.tg { --tg-head: #17212b; --tg-ink: #fff; --tg-soft: #7f91a4; --tg-in: #182533; --tg-out: #2b5278; --tg-check: #6ab3f3; --tg-btn: rgb(255 255 255 / 0.12); background: #0e1621; }
.ui__phone.tg .ui__phone-notch { z-index: 3; }
.tg__status { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 30px; background: var(--tg-head); color: var(--tg-ink); font-size: 13px; }
.tg__status b { font-weight: 500; }
.tg__status i { width: 22px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.4px var(--tg-ink); position: relative; opacity: 0.8; }
.tg__status i::after { content: ''; position: absolute; inset: 2.5px 6px 2.5px 2.5px; border-radius: 1px; background: var(--tg-ink); }
.tg__head { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 6px 12px 10px 8px; background: var(--tg-head); color: var(--tg-ink); box-shadow: 0 1px 0 rgb(0 0 0 / 0.08); }
.tg__head svg { width: 22px; height: 22px; flex: none; color: #3390ec; stroke-width: 2.2; }
[data-theme='dark'] .tg__head svg { color: #6ab3f3; }
.tg__head svg:last-child { margin-left: auto; color: var(--tg-soft); fill: currentColor; stroke: none; }
.tg__ava { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #1c2258, #03051c); }
.tg__ava .ui__spark { width: 22px; height: 22px; border-radius: 7px; box-shadow: none; }
.tg__who { display: grid; gap: 1px; line-height: 1.2; }
.tg__who b { font-weight: 500; font-size: 15px; }
.tg__who small { font-size: 12px; color: var(--tg-soft); }
.tg__chat {
  flex: 1; overflow: hidden; padding: 10px 10px 8px;
  background-color: #c8d9a8;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgb(255 255 255 / 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 45% 85%, rgb(255 255 255 / 0.16) 0 2px, transparent 3px),
    linear-gradient(160deg, #d7e5b0, #a9c98e 60%, #88b88a);
  background-size: 46px 46px, 62px 62px, 38px 38px, 100% 100%;
}
[data-theme='dark'] .tg__chat {
  background-color: #0e1621;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.04) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgb(255 255 255 / 0.035) 0 3px, transparent 4px),
    linear-gradient(160deg, #0f1a26, #0b131c);
  background-size: 46px 46px, 62px 62px, 100% 100%;
}
.ui__phone.tg .ui__msgs { gap: 6px; }
.tg__day { align-self: center; margin: 2px 0 4px; padding: 3px 10px; border-radius: 10px; font-size: 11px; color: #fff; background: rgb(0 0 0 / 0.2); }
.ui__phone.tg .ui__msg, .ui__phone.tg .ui__brief {
  position: relative; max-width: 86%; padding: 7px 10px 18px; border: 0; border-radius: 14px 14px 14px 4px;
  font-size: 12.5px; line-height: 1.38; color: var(--tg-ink); background: var(--tg-in); box-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
}
.ui__phone.tg .ui__msg b { color: #3390ec; font-weight: 500; }
[data-theme='dark'] .ui__phone.tg .ui__msg b { color: #6ab3f3; }
.ui__phone.tg .ui__msg--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--tg-out); color: var(--tg-ink); box-shadow: 0 1px 1px rgb(0 0 0 / 0.12); }
.tg__t { position: absolute; right: 8px; bottom: 4px; display: flex; align-items: center; gap: 3px; font-style: normal; font-size: 10px; color: var(--tg-soft); }
.ui__msg--me .tg__t { color: #5aa45c; }
[data-theme='dark'] .ui__msg--me .tg__t { color: #8fb6e0; }
.tg__t svg { width: 14px; height: 8px; fill: none; stroke: var(--tg-check); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui__phone.tg .ui__typing { background: var(--tg-in); border-radius: 14px 14px 14px 4px; box-shadow: 0 1px 1px rgb(0 0 0 / 0.12); }
.ui__phone.tg .ui__typing i { background: var(--tg-soft); }
/* bot buttons under the message, Telegram's inline keyboard */
.ui__phone.tg .ui__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 86%; }
.ui__phone.tg .ui__chips i { text-align: center; padding: 8px 6px; border-radius: 8px; font-size: 12px; font-weight: 500; color: #fff; background: var(--tg-btn); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ui__phone.tg .ui__brief { display: grid; gap: 5px; padding-bottom: 20px; background: var(--tg-in); }
.ui__phone.tg .ui__brief b { font-size: 12.5px; }
.ui__phone.tg .ui__brief i { font-size: 12px; }
.ui__phone.tg .ui__brief em { background: #3390ec; }
.tg__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px 16px; background: var(--tg-head); color: var(--tg-soft); font-size: 13px; }
.tg__bar span { flex: 1; }
.tg__bar svg { width: 22px; height: 22px; flex: none; stroke-width: 1.7; }
/* everything of section 01 inside a 1920×1080 screen */
.xp-band .section.xp { padding-top: 56px; }
.xp .section__head { margin-bottom: 22px; }
.xp .xp__stage { max-width: 820px; }
.xp .xp__note { margin-top: 10px; }
.xp .caps { margin-top: 26px; }
.ui__phone { top: -24px; }
/* the timestamp in the summary bubble is plain text, not a numbered badge */
.ui__phone.tg .ui__brief .tg__t { width: auto; height: auto; border-radius: 0; background: none; color: var(--tg-soft); display: flex; place-items: initial; }

/* ----------------------------------------------------------------- 03 · the stack */
/* Five categories on the left; on the right, only the active category's tools
   float as glass capsules. A calm cycle (partner.js) or the pointer picks the
   category; the capsules leave and arrive with a staggered, blurred motion. */
.stack__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.stack__copy .h2 { max-width: 15ch; }
.stack__cats { margin-top: 34px; border-top: 1px solid var(--hairline-strong); }
.sc { position: relative; width: 100%; display: grid; grid-template-columns: 44px 1fr; align-items: start; padding: 16px 0 18px; text-align: left; border-bottom: 1px solid var(--hairline-strong); cursor: var(--cursor-link); }
.sc__n { padding-top: 0.35em; font-size: 0.76rem; font-variant-numeric: tabular-nums; color: var(--ink-dim); transition: color 0.5s; }
.sc__body { display: grid; gap: 2px; }
.sc__body b { font-weight: 300; font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -0.035em; color: var(--ink-muted); transition: color 0.5s var(--ease-out); }
.sc__body small { font-size: 0.9rem; color: var(--ink-soft); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.7s var(--ease-out), opacity 0.6s var(--ease-out); }
.sc:hover .sc__body b { color: var(--ink-soft); }
.sc.is-on .sc__body b { color: var(--ink); }
.sc.is-on .sc__n { color: var(--xk-lilac); }
.sc.is-on .sc__body small { max-height: 3em; opacity: 1; }
.sc__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; transform: scaleX(0); transform-origin: left; background: var(--xk-gradient); box-shadow: 0 0 10px rgb(99 131 255 / 0.8); }
.sc.is-on .sc__bar { animation: stk-fill 4.5s linear forwards; }
.stack.is-held .sc.is-on .sc__bar { animation-play-state: paused; }
@keyframes stk-fill { to { transform: scaleX(1); } }

.stack__stage { position: relative; min-height: 460px; }
.stack__glow { position: absolute; inset: 0 -6%; z-index: -1; border-radius: 50%; filter: blur(60px); background: radial-gradient(50% 50% at 50% 50%, rgb(99 77 255 / 0.26), rgb(0 202 255 / 0.1) 55%, transparent 75%); }
[data-theme='light'] .stack__glow { opacity: 0.6; }
.stk { position: absolute; inset: 0 0 48px; display: block; }
/* five slots: a loose, offset cluster rather than a grid */
.tool { position: absolute; display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 12px; border-radius: 22px; white-space: nowrap;
  background: linear-gradient(155deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04) 50%, rgb(255 255 255 / 0.08));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 30px 60px -30px rgb(99 77 255 / 0.5);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; translate: 0 26px; filter: blur(10px); scale: 0.96;
  transition: opacity 0.5s var(--ease-out), translate 0.7s var(--ease-out), filter 0.5s var(--ease-out), scale 0.7s var(--ease-out);
}
[data-theme='light'] .tool { background: linear-gradient(155deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.62)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 30px 60px -32px rgb(38 44 110 / 0.35); }
.tool:nth-child(1) { left: 4%; top: 6%; }
.tool:nth-child(2) { left: 46%; top: 0%; }
.tool:nth-child(3) { left: 18%; top: 34%; }
.tool:nth-child(4) { left: 54%; top: 46%; }
.tool:nth-child(5) { left: 8%; top: 66%; }
.stk.is-on .tool { opacity: 1; translate: 0 0; filter: blur(0); scale: 1; transition-delay: calc(0.18s + var(--k) * 0.09s); animation: tool-float 8s ease-in-out infinite; animation-delay: calc(var(--k) * -1.6s); }
@keyframes tool-float { 50% { transform: translateY(-8px); } }
.tool__mono { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-weight: 500; font-size: 15px; letter-spacing: -0.02em; color: #fff;
  background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 8px 18px -6px rgb(99 77 255 / 0.7); }
.tool:nth-child(even) .tool__mono { color: var(--xk-navy); background: linear-gradient(140deg, var(--xk-cyan), var(--xk-light-blue)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 8px 18px -6px rgb(0 202 255 / 0.7); }
.tool__txt { display: grid; gap: 2px; }
.tool__txt b { font-weight: 500; font-size: 1.02rem; letter-spacing: -0.02em; }
.tool__txt small { font-size: 0.8rem; color: var(--ink-soft); }
.stack__more { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 0.86rem; color: var(--ink-dim); }
@media (prefers-reduced-motion: reduce) { .tool { transition: none; } .stk.is-on .tool { animation: none; } }
@media (max-width: 1024px) {
  .stack__grid { grid-template-columns: minmax(0, 1fr); }
  .stack__stage { min-height: 0; }
  .stk { position: static; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stk.is-on { display: grid; }
  .tool { position: static; white-space: normal; }
  .stack__more { position: static; margin-top: 20px; }
}
@media (max-width: 640px) { .stk { grid-template-columns: minmax(0, 1fr); } }

/* the category buttons carry no browser styling, only the hairline */
.sc { background: none; border: 0; border-bottom: 1px solid var(--hairline-strong); color: inherit; font: inherit; border-radius: 0; }
.stack__copy .h2 { max-width: 18ch; }
/* capsule slots: alternating sides with enough height between them, no overlaps */
.tool:nth-child(1) { left: 0; top: 0; }
.tool:nth-child(2) { left: 44%; top: 18%; }
.tool:nth-child(3) { left: 6%; top: 36%; }
.tool:nth-child(4) { left: 48%; top: 54%; }
.tool:nth-child(5) { left: 2%; top: 72%; }
.stk { inset: 10px 0 56px; }
.tool__mono { font-size: 14px; }
@media (max-width: 1024px) { .tool:nth-child(n) { left: auto; top: auto; } }

/* ----------------------------------------------------------------- 03 · v16: the stack as one drifting rail */
.stack__head { margin-bottom: clamp(36px, 4vw, 56px); }
.stack__lead { max-width: 46ch; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; }
.rail-t {
  position: relative; height: 230px; margin-inline: calc(50% - 50vw); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.rail-t::before { content: ''; position: absolute; left: 50%; top: 50%; width: 520px; height: 220px; translate: -50% -50%; border-radius: 50%; filter: blur(50px);
  background: radial-gradient(50% 50% at 50% 50%, rgb(99 77 255 / 0.28), rgb(0 202 255 / 0.12) 60%, transparent 80%); pointer-events: none; }
[data-theme='light'] .rail-t::before { opacity: 0.55; }
.rail-t__track { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.rt {
  position: absolute; left: 50%; top: 50%; width: 176px; padding: 22px 16px 20px; border-radius: 26px;
  display: grid; justify-items: center; gap: 4px; text-align: center; will-change: transform, opacity;
  background: linear-gradient(155deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 60px -34px rgb(0 0 0 / 0.8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: box-shadow 0.6s var(--ease-out);
}
[data-theme='light'] .rt { background: linear-gradient(155deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.66)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 26px 50px -30px rgb(38 44 110 / 0.32); }
.rt.is-mid { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.24), inset 0 0 0 1px rgb(99 131 255 / 0.35), 0 34px 70px -30px rgb(99 77 255 / 0.6); }
[data-theme='light'] .rt.is-mid { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(99 131 255 / 0.35), 0 34px 70px -30px rgb(99 77 255 / 0.45); }
.rt__mono { width: 52px; height: 52px; margin-bottom: 10px; border-radius: 16px; display: grid; place-items: center; font-weight: 500; font-size: 15px; letter-spacing: -0.02em; color: #fff;
  background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 10px 22px -8px rgb(99 77 255 / 0.8); }
.rt--alt .rt__mono { color: var(--xk-navy); background: linear-gradient(140deg, var(--xk-cyan), var(--xk-light-blue)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 10px 22px -8px rgb(0 202 255 / 0.7); }
.rt b { font-weight: 500; font-size: 1rem; letter-spacing: -0.02em; white-space: nowrap; }
.rt small { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 640px) {
  .rail-t { height: 200px; }
  .rt { width: 136px; padding: 18px 10px 16px; border-radius: 22px; }
  .rt__mono { width: 44px; height: 44px; border-radius: 14px; }
  .rt b { font-size: 0.9rem; }
}
/* reduced motion: a still, wrapped row */
@media (prefers-reduced-motion: reduce) {
  .rail-t { height: auto; margin-inline: 0; -webkit-mask-image: none; mask-image: none; }
  .rail-t__track { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .rt { position: static; transform: none !important; opacity: 1 !important; }
}
/* v16b: room for the grown centre cards and for the glow, no hard edge */
.rail-t { height: 300px; }
.rail-t::before { height: 150px; width: 480px; filter: blur(44px); }
@media (max-width: 640px) {
  .rail-t { height: 250px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .rail-t::before { width: 280px; height: 120px; }
}
/* v16c: the shadows and glow may spill below; the rail only clips sideways
   (the tools already fade out by themselves towards the edges) */
.rail-t, .rail-t:is(*) { overflow: visible; overflow-x: clip; -webkit-mask-image: none; mask-image: none; }

/* ----------------------------------------------------------------- 03 · v17: official logos */
/* logos: Simple Icons (CC0). Neutral ink tile; the centre one takes its brand colour */
.rt__mono, .rt--alt .rt__mono {
  --brand: var(--ink); color: var(--ink-soft);
  background: linear-gradient(155deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(255 255 255 / 0.08);
  transition: color 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
[data-theme='light'] .rt__mono, [data-theme='light'] .rt--alt .rt__mono {
  background: linear-gradient(155deg, #fff, rgb(240 244 255 / 0.9));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(87 97 124 / 0.12), 0 8px 18px -10px rgb(38 44 110 / 0.3);
}
.rt__mono svg { width: 26px; height: 26px; fill: currentColor; }
.rt.is-mid .rt__mono { color: var(--brand); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.24), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 26px -12px var(--brand); }
[data-theme='light'] .rt.is-mid .rt__mono { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(87 97 124 / 0.12), 0 12px 26px -12px var(--brand); }
@media (max-width: 640px) { .rt__mono svg { width: 22px; height: 22px; } }
/* dark theme: brand colours lifted a touch so the deep ones (Make, Hostinger) still read */
[data-theme='dark'] .rt.is-mid .rt__mono { color: color-mix(in srgb, var(--brand) 72%, #fff); }

/* ----------------------------------------------------------------- 04 · v19: the "Nuestro enfoque" band in the light theme */
/* light band with the same satin (light version) and the agency's clear glass cards */
[data-theme='light'] .why {
  background: radial-gradient(90% 70% at 85% 0%, #e2e7ff 0%, transparent 60%), linear-gradient(170deg, #f7f8ff, #eef1ff 70%);
  color: #03051c;
  --ink: #03051c; --ink-soft: rgb(3 5 28 / 0.72); --ink-dim: rgb(3 5 28 / 0.5); --ink-muted: rgb(3 5 28 / 0.5);
  --hairline: rgb(3 5 28 / 0.1); --hairline-strong: rgb(3 5 28 / 0.16);
}
[data-theme='light'] .why .card-h--glass.pw--live {
  background: linear-gradient(155deg, rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.55) 50%, rgb(255 255 255 / 0.75));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 40px 80px -40px rgb(99 77 255 / 0.3), 0 24px 50px -34px rgb(38 44 110 / 0.28);
}
[data-theme='light'] .why .pw__flow i:nth-child(1) { opacity: 0.55; }
[data-theme='light'] .why .pw--live::after { opacity: 0.5; }

/* ----------------------------------------------------------------- 01 · v19: Telegram in the light theme, in XK tones */
/* Telegram's own look (white bars, blue accents, patterned wallpaper) on a
   lilac-to-light-blue wallpaper instead of the default green */
.ui__phone.tg { --tg-out: #e3e9ff; --tg-check: #3390ec; }
[data-theme='dark'] .ui__phone.tg { --tg-out: #2b5278; --tg-check: #6ab3f3; }
.tg__chat {
  background-color: #b9c8ff;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.3) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgb(255 255 255 / 0.24) 0 3px, transparent 4px),
    radial-gradient(circle at 45% 85%, rgb(255 255 255 / 0.2) 0 2px, transparent 3px),
    linear-gradient(165deg, #c9d3ff 0%, #a9b9ff 45%, #9ad8f5 100%);
  background-size: 46px 46px, 62px 62px, 38px 38px, 100% 100%;
}
.ui__msg--me .tg__t { color: #5b7bd6; }
[data-theme='dark'] .ui__msg--me .tg__t { color: #8fb6e0; }
.tg__day { background: rgb(40 50 120 / 0.28); }

/* ----------------------------------------------------------------- 06 · v20: app examples */
/* one example at a time: text + steps on one side, a scene on the other where
   an app window floats and its rows play in one by one */
.apps .section__head { margin-bottom: clamp(30px, 3.4vw, 48px); }
.apx-tabs { display: flex; justify-content: center; gap: clamp(18px, 3vw, 44px); margin: 0 auto clamp(36px, 4vw, 60px); padding: 0; list-style: none; border-bottom: 1px solid var(--hairline-strong); max-width: 920px; }
.apx-tab { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 0 2px 16px; background: none; border: 0; color: var(--ink-dim); font: inherit; font-size: 1rem; letter-spacing: -0.01em; cursor: var(--cursor-link); white-space: nowrap; transition: color 0.4s var(--ease-out); }
.apx-tab span { font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.apx-tab:hover { color: var(--ink-soft); }
.apx-tab.is-on { color: var(--ink); }
.apx-tab.is-on span { color: var(--xk-lilac); }
.apx-tab__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--xk-lilac), var(--xk-light-blue)); }
.apx-tab.is-on .apx-tab__bar { animation: apx-fill 9s linear forwards; }
.apps.is-held .apx-tab.is-on .apx-tab__bar { animation-play-state: paused; }
@keyframes apx-fill { to { transform: scaleX(1); } }
.apx-tab:focus-visible { outline: 2px solid var(--xk-lilac); outline-offset: 6px; border-radius: 4px; }

.apx { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.apx[hidden] { display: none; }
.apx__copy { display: grid; gap: 18px; justify-items: start; }
.apx__area { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim); }
.apx__area i { width: 18px; height: 1px; background: linear-gradient(90deg, var(--xk-lilac), var(--xk-light-blue)); }
.apx__title { font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1.05; }
.apx__title .t-soft { display: block; color: var(--ink-muted); }
.apx__lead { max-width: 34ch; font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); }
.apx__steps { display: grid; gap: 12px; margin: 8px 0 10px; padding: 0; list-style: none; }
.apx__steps li { display: flex; align-items: center; gap: 14px; font-size: 0.98rem; color: var(--ink-soft); }
.apx__ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--xk-lilac);
  background: rgb(99 131 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.18); }
.apx__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* the steps light up one after the other, a calm loop */
.apx.is-play .apx__ic { animation: apx-step 6s ease-in-out infinite; animation-delay: calc(var(--s) * 0.8s + 1.4s); }
@keyframes apx-step {
  0%, 16%, 100% { color: var(--xk-lilac); background: rgb(99 131 255 / 0.1); transform: none; }
  5%, 11% { color: #fff; background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); transform: translateY(-3px) scale(1.06); }
}
/* the copy plays in when the example appears */
.apx.is-play .apx__copy > * { animation: apx-up 0.8s var(--ease-out) both; }
.apx.is-play .apx__copy > :nth-child(2) { animation-delay: 0.06s; }
.apx.is-play .apx__copy > :nth-child(3) { animation-delay: 0.12s; }
.apx.is-play .apx__copy > :nth-child(4) { animation-delay: 0.18s; }
.apx.is-play .apx__copy > :nth-child(5) { animation-delay: 0.24s; }
@keyframes apx-up { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }

/* the scene: a rounded panel in XK colours, a large outlined icon behind */
.apx__scene { position: relative; isolation: isolate; overflow: hidden; min-height: 470px; display: grid; place-items: center; padding: 56px clamp(24px, 3.4vw, 48px); border-radius: clamp(24px, 2.6vw, 34px); }
.apx__scene--grad { background: radial-gradient(80% 70% at 100% 0%, rgb(0 230 254 / 0.55), transparent 60%), linear-gradient(140deg, #6383ff 0%, #634dff 55%, #4f63ff 100%); }
.apx__scene--deep { background: radial-gradient(60% 60% at 90% 100%, rgb(0 202 255 / 0.4), transparent 70%), radial-gradient(60% 60% at 0% 0%, rgb(99 77 255 / 0.45), transparent 70%), linear-gradient(160deg, #0b0f3a, #03051c); }
[data-theme='dark'] .apx__scene--grad { background: radial-gradient(80% 70% at 100% 0%, rgb(0 230 254 / 0.38), transparent 60%), linear-gradient(140deg, #3a4fd6 0%, #3d2fc2 55%, #1d2580 100%); }
[data-theme='dark'] .apx__scene { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.apx__deco { position: absolute; z-index: -1; left: -40px; bottom: -50px; width: 260px; height: 260px; opacity: 0.16; }
.apx__scene--deep .apx__deco { left: auto; right: -40px; }
.apx__deco svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.apx__tag { position: absolute; top: 18px; left: 22px; font-size: 0.72rem; letter-spacing: 0.04em; color: rgb(255 255 255 / 0.7); }
.apx__float { position: relative; width: 100%; display: grid; place-items: center; animation: apx-float 7s ease-in-out infinite; }
@keyframes apx-float { 50% { transform: translateY(-9px); } }

/* app windows */
.apw {
  --w-bg: #ffffff; --w-bar: #f7f8fc; --w-line: #eceef5; --w-ink: #03051c; --w-soft: #6b7390;
  position: relative; width: 100%; max-width: 540px; overflow: hidden; border-radius: 18px; color: var(--w-ink); background: var(--w-bg);
  box-shadow: 0 30px 60px -20px rgb(3 5 28 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.4);
  font-size: 13px;
}
[data-theme='dark'] .apw { --w-bg: #0e1236; --w-bar: #121744; --w-line: rgb(255 255 255 / 0.08); --w-ink: #fff; --w-soft: rgb(255 255 255 / 0.6); box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.apw__bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; background: var(--w-bar); border-bottom: 1px solid var(--w-line); }
.apw__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d5dae6; }
[data-theme='dark'] .apw__bar i { background: rgb(255 255 255 / 0.18); }
.apw__bar em { margin-left: 8px; font-style: normal; font-weight: 500; font-size: 12.5px; }
.apw__rows { display: grid; }
.apr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--w-line); }
.apr b { display: grid; gap: 2px; font-weight: 500; }
.apr b small { font-weight: 400; font-size: 11.5px; color: var(--w-soft); }
.apr u { text-decoration: none; color: var(--w-soft); font-variant-numeric: tabular-nums; }
.apr--inv { grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; }
.apr--f { grid-template-columns: minmax(0, 1fr) auto; }
.apr--hl { background: rgb(99 131 255 / 0.06); }
.apr__ava { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 500; color: #fff; background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); }
.apr:nth-child(even) .apr__ava { color: var(--xk-navy); background: linear-gradient(140deg, var(--xk-cyan), var(--xk-light-blue)); }
.apw__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 18px 6px; }
.apw__kpis span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--w-bar); box-shadow: inset 0 0 0 1px var(--w-line); }
.apw__kpis small, .apw__prog small { font-size: 11px; color: var(--w-soft); }
.apw__kpis b { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.apw__prog { display: grid; gap: 10px; padding: 16px 18px 12px; }
.apw__prog > span { display: grid; gap: 2px; }
.apw__prog b { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.apw__prog b em { font-style: normal; font-size: 12px; font-weight: 400; color: var(--w-soft); }
.apw__track { display: block; height: 6px; border-radius: 6px; background: var(--w-line); overflow: hidden; }
.apw__track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--xk-lilac), var(--xk-light-blue)); }
.apx.is-play .apw__track i { animation: apx-grow 1.4s var(--ease-out) 0.7s forwards; }
@keyframes apx-grow { to { width: var(--w); } }
.apw__cta { display: flex; justify-content: flex-end; padding: 12px 16px 14px; }
.apb { display: inline-flex; padding: 9px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: #fff; background: linear-gradient(180deg, #1a1f4d, #03051c); }
[data-theme='dark'] .apb { background: linear-gradient(120deg, var(--xk-lilac), var(--xk-violet)); }
.apx.is-play .apb { animation: apx-pulse 2.4s ease-in-out 3.4s infinite; }
@keyframes apx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(99 131 255 / 0.5); } 50% { box-shadow: 0 0 0 8px rgb(99 131 255 / 0); } }

/* status chips */
.ch { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.ch--ok { color: #0a7a9a; background: rgb(0 202 255 / 0.14); }
.ch--new { color: #4a5fe0; background: rgb(99 131 255 / 0.14); }
.ch--wait { color: #5a45e6; background: rgb(99 77 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(99 77 255 / 0.3); }
.ch--bad { color: #c73a4a; background: rgb(229 72 77 / 0.1); }
[data-theme='dark'] .ch--ok { color: #6fe6ff; }
[data-theme='dark'] .ch--new { color: #a9b8ff; }
[data-theme='dark'] .ch--wait { color: #b9adff; }
[data-theme='dark'] .ch--bad { color: #ff8f99; }

/* toast: a notification that lands over the window's corner */
.apt { position: absolute; right: -14px; bottom: -26px; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: 290px; padding: 12px 16px 12px 12px; border-radius: 16px; color: var(--xk-navy);
  background: rgb(255 255 255 / 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 24px 50px -18px rgb(3 5 28 / 0.5); font-size: 12.5px; }
[data-theme='dark'] .apt { color: #fff; background: rgb(20 25 70 / 0.85); box-shadow: 0 24px 50px -18px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.apt svg { width: 34px; height: 34px; flex: none; padding: 8px; border-radius: 10px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); }
.apt span { display: grid; gap: 2px; }
.apt b { font-weight: 500; }
.apt small { font-size: 11px; opacity: 0.65; }

/* audit + proposal, overlapped */
.apduo { position: relative; width: 100%; max-width: 560px; display: grid; }
.apw--audit { max-width: 400px; }
.apw__score { display: flex; align-items: center; gap: 16px; padding: 16px 18px 10px; }
.ring { width: 64px; height: 64px; flex: none; rotate: -90deg; }
.ring circle { fill: none; stroke: var(--w-line); stroke-width: 6; }
.ring .ring__v { stroke: var(--xk-lilac); stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; }
.apx.is-play .ring__v { animation: apx-ring 1.6s var(--ease-out) 0.6s forwards; }
@keyframes apx-ring { to { stroke-dashoffset: calc(163.4 * (1 - var(--v))); } }
.apw__score span { display: grid; gap: 2px; }
.apw__score b { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; }
.apw__score b em { font-style: normal; font-size: 13px; font-weight: 400; color: var(--w-soft); }
.apw__score small { font-size: 11.5px; color: var(--w-soft); }
.apw--prop { position: absolute; right: 0; bottom: -40px; max-width: 280px; }
.apw__lines { display: grid; padding: 6px 16px 0; }
.apw__lines span { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--w-line); font-size: 12.5px; }
.apw__lines u { text-decoration: none; color: var(--w-soft); font-variant-numeric: tabular-nums; }
.apw__total { font-weight: 500; border-bottom: 0 !important; }
.apw__total u { color: var(--w-ink); }

/* the phone */
.apduo--phone { max-width: 520px; place-items: center; }
.aph { position: relative; width: 268px; display: grid; gap: 10px; padding: 46px 14px 14px; border-radius: 40px; color: var(--xk-navy); background: #f5f6ff;
  box-shadow: 0 0 0 8px #03051c, 0 0 0 9px rgb(255 255 255 / 0.2), 0 40px 70px -24px rgb(3 5 28 / 0.65); font-size: 12px; }
[data-theme='dark'] .aph { color: #fff; background: #0b0f2e; }
.aph__notch { position: absolute; left: 50%; top: 12px; width: 84px; height: 22px; margin-left: -42px; border-radius: 12px; background: #03051c; }
.aph__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px; }
.aph__head span { display: grid; gap: 1px; }
.aph__head small { font-size: 11px; opacity: 0.6; }
.aph__head b { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.aph__head .ui__spark { width: 30px; height: 30px; border-radius: 10px; }
.aph__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aph__kpis span, .aph__chart, .aph__ap { border-radius: 16px; background: #fff; box-shadow: 0 6px 16px -10px rgb(38 44 110 / 0.35); }
[data-theme='dark'] :is(.aph__kpis span, .aph__chart, .aph__ap) { background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.aph__kpis span { display: grid; gap: 1px; padding: 10px 12px; }
.aph__kpis small, .aph__chart small, .aph__ap small { font-size: 10.5px; opacity: 0.6; }
.aph__kpis b { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.aph__kpis em { font-style: normal; font-size: 10.5px; color: #0a9ab8; }
[data-theme='dark'] .aph__kpis em { color: #6fe6ff; }
.aph__chart { display: grid; gap: 8px; padding: 10px 12px 12px; }
.aph__chart > span { display: flex; align-items: flex-end; gap: 7px; height: 54px; }
.aph__chart i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; transform-origin: bottom; transform: scaleY(0); background: linear-gradient(180deg, var(--xk-lilac), rgb(99 131 255 / 0.35)); }
.aph__chart i:nth-child(6) { background: linear-gradient(180deg, var(--xk-light-blue), rgb(0 202 255 / 0.35)); }
.apx.is-play .aph__chart i { animation: apx-bar 0.9s var(--ease-out) forwards; animation-delay: calc(1.3s + var(--j) * 0.07s); }
@keyframes apx-bar { to { transform: scaleY(1); } }
.aph__label { padding: 2px 4px 0; font-size: 11px; opacity: 0.6; }
.aph__ap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 12px; }
.aph__ap span { display: grid; gap: 1px; }
.aph__ap b { font-weight: 500; }
.aph__ap em { font-style: normal; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 500; color: #fff; background: linear-gradient(120deg, var(--xk-lilac), var(--xk-violet)); }
.aph__tabs { display: flex; justify-content: space-around; padding: 8px 10px 2px; }
.aph__tabs i { width: 22px; height: 4px; border-radius: 4px; background: currentColor; opacity: 0.15; }
.aph__tabs i.is-on { opacity: 0.8; background: var(--xk-lilac); }
.apt--side { right: -6px; bottom: auto; top: 46%; }

/* entrance of each piece: staggered rise when the example plays */
.apx .an { opacity: 0; }
.apx.is-play .an { animation: apx-in 0.6s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 0.32s + 0.35s); }
@keyframes apx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.apx.is-play .apt.an { animation-name: apx-toast; animation-duration: 0.8s; }
@keyframes apx-toast { from { opacity: 0; transform: translate(14px, 12px) scale(0.94); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
  .apx { grid-template-columns: minmax(0, 1fr); }
  .apx-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter, 20px) * -1); padding-inline: var(--gutter, 20px); }
  .apx-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
  .apx__scene { min-height: 0; padding: 48px 14px 56px; }
  .apw { font-size: 12px; }
  .apr { padding: 10px 12px; gap: 10px; }
  .apr--inv { grid-template-columns: minmax(0, 1fr) auto; }
  .apr--inv u { display: none; }
  .apw__kpis { padding: 12px 12px 4px; gap: 6px; }
  .apw__kpis b { font-size: 17px; }
  .apt { right: 6px; bottom: -34px; max-width: 250px; }
  .apw--prop { position: relative; bottom: auto; margin: -24px 0 0 auto; width: 86%; }
  .apt--side { position: relative; top: auto; right: auto; margin-top: 18px; }
  .apduo--phone { display: grid; justify-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .apx .an, .apx.is-play .an { opacity: 1; animation: none; }
  .apx__float, .apx.is-play .apx__ic, .apx.is-play .apb, .apx.is-play .apx__copy > * { animation: none; }
  .apw__track i { width: var(--w); }
  .ring__v { stroke-dashoffset: calc(163.4 * (1 - var(--v))); }
  .aph__chart i { transform: none; }
}
/* v20b: the toast lands on the window's top corner (clear of its button);
   the audit's verdicts sit next to each finding, clear of the proposal */
.apt { top: -24px; right: -18px; bottom: auto; }
.apt--side { top: 46%; right: -6px; }
.apr--f { grid-template-columns: auto auto; justify-content: start; gap: 10px; }
.apduo:not(.apduo--phone) { max-width: 580px; }
.apw--audit { max-width: 390px; }
.apw--prop { max-width: 250px; bottom: -48px; }
.apx__scene--deep .apx__deco { opacity: 0.08; }
@media (max-width: 640px) { .apt { top: auto; bottom: -34px; right: 6px; } .apt--side { position: relative; top: auto; right: auto; bottom: auto; } }

/* ----------------------------------------------------------------- 06 · v21: text on top, the scene full width */
.apx { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 40px); align-items: stretch; }
.apx__copy { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 56px; justify-items: stretch; }
.apx__intro { display: grid; gap: 14px; justify-items: start; }
.apx__side { display: grid; gap: 22px; justify-items: end; }
.apx__title { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.apx__title .t-soft { display: inline; }
.apx__lead { max-width: 52ch; }
.apx__steps { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0; }
.apx__steps li { font-size: 0.94rem; gap: 12px; }
.apx.is-play .apx__copy > * { animation: none; }
.apx.is-play :is(.apx__intro, .apx__side) > * { animation: apx-up 0.8s var(--ease-out) both; }
.apx.is-play .apx__intro > :nth-child(2) { animation-delay: 0.06s; }
.apx.is-play .apx__intro > :nth-child(3) { animation-delay: 0.12s; }
.apx.is-play .apx__side > :nth-child(1) { animation-delay: 0.16s; }
.apx.is-play .apx__side > :nth-child(2) { animation-delay: 0.22s; }
.apx__scene { min-height: 640px; padding: 48px clamp(20px, 3vw, 48px); }
.apx__float { max-width: 1104px; }
.apx .an { --i: 0; }
.apx.is-play .an { animation-delay: calc(var(--i) * 0.32s + 0.35s); }

/* swap: one state replaced by the next, mid-animation */
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; }
.swap__b { opacity: 0; }
.apx.is-play .swap__a { animation: sw-out 0.35s ease forwards 4.6s; }
.apx.is-play .swap__b { animation: sw-in 0.5s var(--ease-out) forwards 4.8s; }
.apx--aud.is-play .swap__a { animation-delay: 3.6s; }
.apx--aud.is-play .swap__b { animation-delay: 3.8s; }
@keyframes sw-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes sw-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------- the CRM (after XK CRM's layout) */
.crm { --w-bg: #f7f8fe; --cr-card: #ffffff; max-width: none; width: 1100px; height: 560px; display: grid; grid-template-columns: 196px minmax(0, 1fr); font-size: 12px; }
[data-theme='dark'] .crm { --w-bg: #0b0e2c; --cr-card: rgb(255 255 255 / 0.05); }
.cr-side { display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; background: var(--cr-card); border-right: 1px solid var(--w-line); }
.cr-brand { display: flex; align-items: center; gap: 10px; padding: 0 4px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--w-line); }
.cr-brand i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; font-style: normal; font-weight: 600; font-size: 12px; color: #fff; background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); box-shadow: 0 8px 16px -8px rgb(99 77 255 / 0.8); }
.cr-brand b { display: grid; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }
.cr-brand small { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--w-soft); font-weight: 400; }
.cr-sec { padding: 6px 8px; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--w-soft); }
.cr-nav { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-weight: 500; font-size: 12.5px; }
.cr-nav svg, .cr-acts svg, .cr-btn svg, .cr-search svg, .cr-sel svg, .cr-date svg, .cr-add svg, .cr-pill svg, .cr-kpis i svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cr-nav svg { color: var(--xk-lilac); }
.cr-nav.is-on { background: rgb(99 131 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.18); }
.cr-nav--end { margin-top: auto; }
.cr-main { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; min-width: 0; }
.cr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.cr-head > span:first-child { display: grid; gap: 2px; }
.cr-head small { font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--xk-violet); }
[data-theme='dark'] .cr-head small { color: #a9b8ff; }
.cr-head b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.cr-head em { font-style: normal; font-size: 11.5px; color: var(--w-soft); }
.cr-btns { display: flex; gap: 8px; }
.cr-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; font-style: normal; font-weight: 500; font-size: 11.5px; background: var(--cr-card); box-shadow: inset 0 0 0 1px var(--w-line), 0 4px 12px -8px rgb(38 44 110 / 0.3); white-space: nowrap; }
.cr-btn--pri { color: #fff; background: linear-gradient(120deg, var(--xk-violet), var(--xk-lilac) 60%, var(--xk-light-blue)); box-shadow: 0 10px 22px -10px rgb(99 77 255 / 0.8); }
.cr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cr-kpis > span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--cr-card); box-shadow: inset 0 0 0 1px var(--w-line), 0 8px 20px -14px rgb(38 44 110 / 0.3); }
.cr-kpis i { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--xk-lilac); background: rgb(99 131 255 / 0.1); }
.cr-kpis small { font-size: 10.5px; color: var(--w-soft); }
.cr-kpis b { font-size: 19px; font-weight: 600; line-height: 1.1; }
.cr-filters { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 14px; background: var(--cr-card); box-shadow: inset 0 0 0 1px var(--w-line); }
.cr-search, .cr-sel { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: 11px; box-shadow: inset 0 0 0 1px var(--w-line); white-space: nowrap; overflow: hidden; }
.cr-search { color: var(--w-soft); }
.cr-sel { justify-content: space-between; }
.cr-table { border-radius: 14px; background: var(--cr-card); box-shadow: inset 0 0 0 1px var(--w-line), 0 10px 26px -18px rgb(38 44 110 / 0.35); overflow: hidden; }
.cr-tr { display: grid; grid-template-columns: 22px 1.55fr 0.75fr 1fr 1.15fr 1.25fr 1.05fr 1.35fr; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--w-line); }
.cr-th { padding: 10px 14px; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--w-soft); background: var(--w-bar); }
.cr-chk { width: 13px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 1.4px rgb(107 115 144 / 0.5); }
.cr-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cr-who b { display: grid; font-weight: 500; white-space: nowrap; }
.cr-who small { font-weight: 400; font-size: 10px; color: var(--w-soft); }
.cr-ava { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; font-size: 10px; font-weight: 600; background: var(--w-bar); box-shadow: inset 0 0 0 1px var(--w-line); }
.cr-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 10px; border-radius: 9px; font-size: 10.5px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--w-line); background: var(--cr-card); white-space: nowrap; }
.cr-pill svg { width: 12px; height: 12px; margin-left: 6px; color: var(--w-soft); }
.cr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--w-soft); }
.cr-dot--new, .cr-dot--a { background: var(--xk-lilac); }
.cr-dot--b { background: #25d366; }
.cr-dot--c { background: var(--xk-violet); }
.cr-dot--ok { background: var(--xk-light-blue); }
.cr-dot--wait { background: var(--xk-violet); }
.cr-dot--off { background: rgb(107 115 144 / 0.5); }
.ch--per { color: #7a4fe0; background: rgb(122 79 224 / 0.12); }
[data-theme='dark'] .ch--per { color: #c7b3ff; }
.cr-date, .cr-add { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.cr-date { background: rgb(99 131 255 / 0.08); }
.cr-date--new { color: #fff; background: linear-gradient(120deg, var(--xk-violet), var(--xk-lilac)); }
.cr-add { color: var(--xk-lilac); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.35); border: 1px dashed transparent; }
.cr-last { display: grid; }
.cr-last b { font-weight: 500; font-size: 11px; }
.cr-last small { font-size: 10px; color: var(--w-soft); }
.cr-acts { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--w-soft); }
.cr-acts em { font-style: normal; margin-right: 8px; }
.cr-acts svg:last-child { margin-left: auto; }
.cr-tr--live { transition: background 0.6s; }
.apx.is-play .cr-tr--live { animation: apx-in 0.6s var(--ease-out) forwards, cr-hl 2.4s ease 4.6s; }
@keyframes cr-hl { 0%, 100% { background: transparent; } 20%, 60% { background: rgb(99 131 255 / 0.1); } }
.cr-foot { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 10px; color: var(--w-soft); }
.apt--crm { top: auto; bottom: -22px; right: -10px; }

/* ---------------------------------------------------- facturación: the invoice + the list */
.apduo--fac { max-width: 880px; display: flex; align-items: center; justify-content: center; }
.apduo--fac .apw { max-width: 560px; }
.apdoc { position: relative; z-index: 2; width: 250px; margin-right: -40px; display: grid; gap: 10px; padding: 20px 20px 18px; border-radius: 16px; color: var(--xk-navy); background: #fff; box-shadow: 0 30px 60px -20px rgb(3 5 28 / 0.55); font-size: 12px; rotate: -3deg; }
[data-theme='dark'] .apdoc { color: #fff; background: #151a4a; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.apdoc__top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 2px solid var(--xk-lilac); }
.apdoc__top b { font-size: 16px; font-weight: 600; }
.apdoc__top em { font-style: normal; opacity: 0.6; }
.apdoc__to { display: grid; font-weight: 500; }
.apdoc__to small { font-size: 10px; opacity: 0.55; font-weight: 400; }
.apdoc__l { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgb(107 115 144 / 0.18); }
.apdoc__l u { text-decoration: none; opacity: 0.7; }
.apdoc__l--t { font-weight: 600; border: 0; }
.apdoc__l--t u { opacity: 1; }
.apdoc__ok { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; color: #0a7a9a; background: rgb(0 202 255 / 0.14); }
[data-theme='dark'] .apdoc__ok { color: #6fe6ff; }
.apdoc__ok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------- the proposal flow: app → link → phone */
.apflow { width: 100%; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr) 250px; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.apw--quote { max-width: 400px; font-size: 12px; }
.apw--quote .apr { padding: 9px 16px; }
.apw--quote .apw__score { padding: 6px 16px 8px; }
.apw--quote .ring { width: 52px; height: 52px; }
.apq__sec { padding: 12px 16px 0; }
.apq__sec small { font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--xk-violet); }
[data-theme='dark'] .apq__sec small { color: #a9b8ff; }
.apw--quote .apw__cta { padding-top: 10px; }
.aplink { display: grid; gap: 18px; justify-items: center; }
.aplink__url { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 12px 16px; border-radius: 14px; font-size: 12px; color: var(--xk-navy); background: rgb(255 255 255 / 0.94); box-shadow: 0 20px 40px -18px rgb(3 5 28 / 0.5); white-space: nowrap; }
[data-theme='dark'] .aplink__url { color: #fff; background: rgb(20 25 70 / 0.9); box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.aplink__url b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.aplink__url b em { font-style: normal; color: var(--xk-violet); }
[data-theme='dark'] .aplink__url b em { color: #a9b8ff; }
.aplink__url svg, .aplink__tl svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aplink__tl { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.aplink__tl li { display: flex; align-items: center; gap: 12px; color: #fff; }
.aplink__tl li > svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgb(255 255 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); }
.aplink__tl b { display: grid; font-weight: 500; font-size: 13px; }
.aplink__tl small { font-size: 11px; opacity: 0.7; font-weight: 400; }
.aplink__done > svg { background: #fff !important; color: var(--xk-violet); }
.aph--web { width: 250px; gap: 8px; padding: 40px 12px 14px; justify-self: end; }
.apweb__bar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px; border-radius: 9px; font-size: 10px; opacity: 0.7; background: rgb(107 115 144 / 0.1); }
.apweb__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--xk-light-blue); }
.apweb__hero { display: grid; gap: 2px; padding: 16px 14px; border-radius: 16px; color: #fff; background: radial-gradient(90% 90% at 100% 0%, rgb(0 230 254 / 0.6), transparent 60%), linear-gradient(140deg, #6383ff, #634dff); }
.apweb__hero small { font-size: 10px; opacity: 0.75; }
.apweb__hero b { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.apweb__hero em { font-style: normal; font-size: 10.5px; opacity: 0.85; }
.apweb__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 13px; background: #fff; box-shadow: 0 6px 14px -10px rgb(38 44 110 / 0.35); }
[data-theme='dark'] .apweb__item { background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.apweb__item i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--xk-lilac); background: rgb(99 131 255 / 0.12); }
.apweb__item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.apweb__item span { display: grid; }
.apweb__item b { font-weight: 500; font-size: 11.5px; }
.apweb__item small { font-size: 10px; opacity: 0.6; }
.apweb__cta { display: grid; padding-top: 4px; }
.apweb__cta .swap { display: grid; }
.apweb__btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #fff; background: linear-gradient(180deg, #1a1f4d, #03051c); }
[data-theme='dark'] .apweb__btn { background: linear-gradient(120deg, var(--xk-lilac), var(--xk-violet)); }
.apweb__btn--ok { color: var(--xk-navy); background: linear-gradient(120deg, var(--xk-cyan), var(--xk-light-blue)) !important; }
.apweb__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.apx--aud.is-play .swap__a { animation-delay: 6.8s; }
.apx--aud.is-play .swap__b { animation-delay: 7s; }

/* ---------------------------------------------------- the phone: a day summary beside it */
.apduo--phone { max-width: 760px; display: flex; align-items: center; justify-content: center; gap: 36px; }
.apcard { display: grid; gap: 12px; width: 220px; padding: 18px; border-radius: 18px; color: var(--xk-navy); background: rgb(255 255 255 / 0.94); box-shadow: 0 24px 50px -18px rgb(3 5 28 / 0.5); font-size: 12px; }
[data-theme='dark'] .apcard { color: #fff; background: rgb(20 25 70 / 0.88); box-shadow: 0 24px 50px -18px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.apcard small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }
.apcard span { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid rgb(107 115 144 / 0.18); }
.apcard span:last-child { border: 0; padding-bottom: 0; }
.apcard em { font-style: normal; opacity: 0.7; }
.apcard b { font-size: 15px; font-weight: 500; }
.apduo--phone .apt--side { position: relative; top: auto; right: auto; bottom: auto; align-self: flex-end; margin-bottom: 90px; }

@media (max-width: 1024px) {
  .apx__copy { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .apx__side { justify-items: start; }
  .apx__scene { min-height: 0; }
  .apflow { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .aph--web { justify-self: center; }
  .apduo--fac { flex-direction: column; }
  .apdoc { margin: 0 0 -30px; rotate: -2deg; }
  .apduo--phone { flex-direction: column; gap: 22px; }
  .apduo--phone .apt--side { align-self: center; margin: 0; }
}
@media (max-width: 640px) {
  .apx__steps { flex-direction: column; }
  .crm { width: 620px; grid-template-columns: minmax(0, 1fr); }
  .cr-side, .cr-filters, .cr-btns { display: none; }
  .crm .cr-kpis { grid-template-columns: repeat(2, 1fr); }
  .crm .cr-tr { grid-template-columns: minmax(0, 1.6fr) 1.2fr 1.3fr; }
  .crm .cr-tr > :nth-child(1), .crm .cr-tr > :nth-child(3), .crm .cr-tr > :nth-child(4), .crm .cr-tr > :nth-child(7), .crm .cr-tr > :nth-child(8) { display: none; }
  .apt--crm { position: relative; right: auto; bottom: auto; margin: 14px auto 0; }
  .apdoc { width: 100%; max-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .swap__a { opacity: 0; }
  .swap__b { opacity: 1; }
}
/* v21b: CRM table breathing room */
.cr-tr { grid-template-columns: 18px 1.75fr 0.8fr 1fr 1.15fr 1.15fr 1fr 1.05fr; gap: 8px; }
.cr-who b, .cr-last b, .cr-last small, .cr-acts em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-acts em { margin-right: 4px; }
.cr-acts svg:nth-of-type(2), .cr-acts em:nth-of-type(2) { display: none; }
/* v21c: the invoice sits beside the list, no hidden numbers; the CRM toast
   clear of the table footer; no outline icon behind the phone */
.apdoc { margin-right: 18px; translate: 0 26px; }
.apt--crm { bottom: -40px; right: -26px; }
.apx--mob .apx__deco { display: none; }
@media (max-width: 1024px) { .apdoc { margin: 0 0 -24px; translate: none; } }
/* v21d: the scene's content may shrink below its design width (the CRM scales to fit) */
.apx__scene { grid-template-columns: minmax(0, 1fr); }
.apx__float { min-width: 0; }
@media (max-width: 640px) { .apt--crm { right: auto; bottom: auto; } }
/* v21e: María's row keeps its turn in the entrance (the highlight shorthand had reset its delay) */
.apx.is-play .cr-tr--live { animation: apx-in 0.6s var(--ease-out) calc(var(--i) * 0.32s + 0.35s) forwards, cr-hl 2.4s ease 4.6s; }
/* v21f: real phone proportions (≈ 9 : 19.5) — the screen keeps its height and
   the last element sits at the bottom, above a home indicator */
.aph { display: flex; flex-direction: column; aspect-ratio: 9 / 19.5; width: 248px; padding-bottom: 22px; }
.aph::after { content: ''; position: absolute; left: 50%; bottom: 8px; width: 92px; height: 4px; margin-left: -46px; border-radius: 4px; background: currentColor; opacity: 0.25; }
.aph__tabs { margin-top: auto; }
.aph--web { width: 236px; padding-top: 38px; }
.aph--web .apweb__cta { margin-top: auto; }
.aph__notch { width: 76px; height: 21px; margin-left: -38px; top: 11px; }
/* the proposal's total, closing the web proposal above the button */
.apweb__total { display: grid; gap: 2px; margin-top: auto; padding: 12px 4px 4px; border-top: 1px solid rgb(107 115 144 / 0.2); }
.apweb__total small { font-size: 10px; opacity: 0.6; }
.apweb__total b { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.apweb__total b em { font-style: normal; font-size: 11.5px; font-weight: 400; opacity: 0.7; }
.apweb__total span { font-size: 10px; opacity: 0.55; }
.aph--web .apweb__cta { margin-top: 6px; }

/* ----------------------------------------------------------------- 06 · v22: facturación + propuestas as full app screens */
/* facturación: the CRM's frame with an invoice list and the selected invoice's detail */
.fx .cr-head small, .px .cr-head small { letter-spacing: 0.12em; }
.fx-kpi--prog { grid-template-rows: auto auto auto; }
.fx-kpi--prog .apw__track { grid-column: 2; display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: var(--w-line); overflow: hidden; }
.fx-kpi--prog .apw__track em { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--xk-lilac), var(--xk-light-blue)); }
.apx.is-play .fx-kpi--prog .apw__track em { animation: apx-grow 1.4s var(--ease-out) 1s forwards; }
.fx-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; }
.fx-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) 0.7fr 0.9fr 0.9fr 30px; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--w-line); }
.fx-tr b { display: grid; font-weight: 500; white-space: nowrap; }
.fx-tr b small { font-weight: 400; font-size: 10.5px; color: var(--w-soft); }
.fx-tr > span:not(.ch):not(.swap) { color: var(--w-soft); font-size: 11px; }
.fx-tr u { text-decoration: none; font-variant-numeric: tabular-nums; }
.fx-tr > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--xk-lilac); box-shadow: inset 0 0 0 1px var(--w-line); }
.fx-tr > i svg, .fx-doc svg, .px svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-tr.cr-th { padding: 9px 14px; }
.fx-tr--sel { background: rgb(99 131 255 / 0.08); box-shadow: inset 3px 0 0 var(--xk-lilac); }
.fx-tr .ch { justify-self: start; }
.fx-doc { display: grid; align-content: start; gap: 9px; padding: 16px; border-radius: 14px; background: var(--cr-card); box-shadow: inset 0 0 0 1px var(--w-line), 0 14px 30px -18px rgb(38 44 110 / 0.4); font-size: 11.5px; }
.fx-doc__top { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 2px solid var(--xk-lilac); }
.fx-doc__top b { font-size: 15px; font-weight: 600; }
.fx-doc__top small, .fx-doc__to small, .fx-doc__to em { font-size: 10px; color: var(--w-soft); font-style: normal; font-weight: 400; }
.fx-doc__to { display: grid; font-weight: 500; }
.fx-doc .apdoc__l { border-bottom-color: var(--w-line); }
.fx-doc__cta { display: grid; margin-top: 6px; }
.fx-doc__cta .apb { justify-content: center; align-items: center; gap: 7px; width: 100%; }
.apb--ok { color: var(--xk-navy) !important; background: linear-gradient(120deg, var(--xk-cyan), var(--xk-light-blue)) !important; }
.apx--fac.is-play .swap__a { animation-delay: 5.6s; }
.apx--fac.is-play .swap__b { animation-delay: 5.8s; }

/* propuestas: an app screen (audit + quote + sending) beside the client's phone */
.apflow2 { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 248px; align-items: center; }
.apflow2__app { min-width: 0; }
.apflow2 .aph--web { position: relative; z-index: 2; width: 248px; margin-left: -56px; }
.px { width: 860px; grid-template-columns: 168px minmax(0, 1fr); }
.px .cr-head { align-items: center; }
.px-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.px-steps li { display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--w-soft); box-shadow: inset 0 0 0 1px var(--w-line); }
.px-steps i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 10px; background: var(--w-bar); }
.px-steps .is-done i { color: #fff; background: var(--xk-lilac); }
.px-steps .is-done i svg { width: 11px; height: 11px; stroke-width: 2.4; }
.px-steps .is-on { color: var(--w-ink); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.5); }
.px-steps .is-on i { color: #fff; background: linear-gradient(140deg, var(--xk-violet), var(--xk-light-blue)); }
.px-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.px-card { display: grid; align-content: start; padding: 12px 0 6px; border-radius: 14px; background: var(--cr-card); box-shadow: inset 0 0 0 1px var(--w-line), 0 10px 24px -18px rgb(38 44 110 / 0.35); }
.px-label { padding: 0 14px 4px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--xk-violet); }
[data-theme='dark'] .px-label { color: #a9b8ff; }
.px-card .apw__score { padding: 6px 14px 6px; }
.px-card .ring { width: 48px; height: 48px; }
.px-card .apw__score b { font-size: 22px; }
.px-card .apr { padding: 8px 14px; font-size: 11.5px; }
.px-card .apr:last-child { border-bottom: 0; }
.px-card .apw__lines { padding: 2px 14px 4px; }
.px-card .apw__lines span { font-size: 11.5px; }
.px-send { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--cr-card); box-shadow: inset 0 0 0 1px var(--w-line); }
.px-url { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 12px; border-radius: 10px; font-size: 11px; background: rgb(99 131 255 / 0.08); white-space: nowrap; }
.px-url b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.px-url b em { font-style: normal; color: var(--xk-violet); }
[data-theme='dark'] .px-url b em { color: #a9b8ff; }
.px-tl { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.px-tl li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--w-line); }
.px-tl li svg { color: var(--xk-lilac); }
.px-tl small { font-size: 10px; font-weight: 400; color: var(--w-soft); }
.px-tl--ok { color: var(--xk-navy); background: linear-gradient(120deg, var(--xk-cyan), var(--xk-light-blue)); box-shadow: none !important; }
.px-tl--ok svg, .px-tl--ok small { color: var(--xk-navy) !important; }
.aph--web { width: 248px; }

@media (max-width: 1024px) {
  .apflow2 { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; }
  .apflow2__app { width: 100%; }
  .apflow2 .aph--web { margin-left: 0; }
}
@media (max-width: 640px) {
  .fx { width: 620px; }
  .fx-body { grid-template-columns: minmax(0, 1fr); }
  .fx .fx-kpis { grid-template-columns: repeat(2, 1fr); }
  .fx-doc { display: none; }
  .px { width: 620px; }
  .px-grid { grid-template-columns: minmax(0, 1fr); }
  .px-send { flex-direction: column; align-items: stretch; }
}
/* v22b: the proposal screen as tall as its content */
.px { height: 480px; }
@media (max-width: 640px) { .px { height: 660px; } }
/* v23: CRM table — every row shares the same column widths (tracks may not
   grow with their content) and each cell starts at its column's left edge */
.cr-tr { grid-template-columns: 18px minmax(0, 1.75fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.05fr); justify-items: start; }
.cr-tr > * { min-width: 0; max-width: 100%; }
.cr-pill, .cr-date, .cr-add { max-width: 100%; overflow: hidden; }
.cr-acts { width: 100%; }
@media (max-width: 640px) { .crm .cr-tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.3fr); } }
/* v23b: dots never squeezed; a little more room for the follow-up column;
   less air between the apps and the FAQ now that Productos is gone */
.cr-dot, .cr-pill svg, .cr-date svg, .cr-add svg { flex: none; }
.cr-tr { grid-template-columns: 18px minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.apps { padding-bottom: clamp(48px, 5vw, 80px); }
#preguntas { padding-top: clamp(48px, 5vw, 80px); }

/* ----------------------------------------------------------------- 02 · v24: the service icons, one idea each */
/* glass svg layers sit in the same 3D space as the glass panes (.gl) */
.gs { position: absolute; left: 50%; top: 50%; --x: 0px; --y: 0px; --z: 0px; --rot: 0deg;
  transform: translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)) rotate(var(--rot));
  filter: drop-shadow(0 18px 22px rgb(3 5 28 / 0.4)) drop-shadow(0 0 16px rgb(99 131 255 / 0.4)); overflow: visible; }
.gl--task { --w: 58px; --h: 58px; --r: 18px; display: grid; place-items: center; }
.gl--task svg { position: relative; z-index: 1; width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgb(0 230 254 / 0.8)); }
[data-theme='light'] .gl--task svg { stroke: var(--xk-violet); filter: none; }

/* 0 · compass: the needle searches, then settles on its heading */
.gl--disc { --w: 214px; --h: 214px; --r: 50%; --z: 0px; }
.gl--disc-in { --w: 150px; --h: 150px; --z: 26px; }
.gs--ticks { width: 214px; height: 214px; --z: 14px; filter: none; }
[data-theme='light'] .gs--ticks g { stroke: var(--xk-lilac); }
.gs .spin { transform-box: view-box; }
.gs--needle { width: 44px; height: 170px; --z: 60px; --rot: 28deg; }
.gs--needle .spin { transform-origin: 22px 85px; animation: needle 7s ease-in-out infinite; }
@keyframes needle { 0%, 100% { rotate: 0deg; } 30% { rotate: 24deg; } 45% { rotate: 8deg; } 60% { rotate: 14deg; } }
.gs-dot { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; transform: translateZ(74px);
  background: radial-gradient(circle at 35% 30%, #fff, var(--xk-light-blue) 50%, var(--xk-violet)); box-shadow: 0 0 18px rgb(0 230 254 / 0.8); }

/* 1 · code editor: lines being written, a caret blinking, the </> chip in front */
.gl--editor { --w: 232px; --h: 172px; --r: 22px; --z: 40px; --x: -8px; --y: 8px; }
.cd__dots { position: absolute; left: 18px; top: 16px; display: flex; gap: 6px; }
.cd__dots b { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / 0.65); }
.cd__l { position: relative; display: block; height: 8px; width: var(--w); margin: 0 0 11px calc(18px + var(--x)); border-radius: 6px; background: rgb(255 255 255 / 0.55); transform-origin: left; }
.cd__l:first-of-type { margin-top: 48px; }
.cd__l--a { background: linear-gradient(90deg, var(--xk-cyan), var(--xk-lilac)); }
.cd__l--b { background: linear-gradient(90deg, var(--xk-lilac), var(--xk-violet)); }
[data-theme='light'] .cd__l { background: rgb(99 131 255 / 0.35); }
[data-theme='light'] .cd__l--a { background: linear-gradient(90deg, var(--xk-cyan), var(--xk-lilac)); }
[data-theme='light'] .cd__l--b { background: linear-gradient(90deg, var(--xk-lilac), var(--xk-violet)); }
[data-theme='light'] .cd__dots b { background: rgb(99 131 255 / 0.45); }
.cd__l--caret::after { content: ''; position: absolute; right: -10px; top: -3px; width: 3px; height: 14px; border-radius: 2px; background: var(--xk-cyan); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.svc__art.is-active .cd__l { animation: code-type 7s var(--ease-out) infinite; }
.svc__art.is-active .cd__l:nth-of-type(2) { animation-delay: 0.15s; } .svc__art.is-active .cd__l:nth-of-type(3) { animation-delay: 0.3s; }
.svc__art.is-active .cd__l:nth-of-type(4) { animation-delay: 0.45s; } .svc__art.is-active .cd__l:nth-of-type(5) { animation-delay: 0.6s; }
.svc__art.is-active .cd__l:nth-of-type(6) { animation-delay: 0.75s; } .svc__art.is-active .cd__l:nth-of-type(7) { animation-delay: 0.9s; }
@keyframes code-type { 0% { transform: scaleX(0); } 12%, 88% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
.gl--chip-code { --w: 92px; --h: 92px; --r: 26px; --x: 96px; --y: -76px; --z: 96px; display: grid; place-items: center; }
.gl--chip-code svg { position: relative; z-index: 1; width: 52px; height: 52px; }

/* 2 · agent: a glass orb with the AI spark; its tasks drift around it */
.gl--orb { --w: 156px; --h: 156px; --r: 50%; --z: 20px; }
.g3d--agentorb .core { left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(30px); }
.gs--spark { width: 92px; height: 92px; --z: 64px; }
.gs--spark .spin { transform-origin: 50px 50px; animation: spark-breathe 5s ease-in-out infinite; }
@keyframes spark-breathe { 50% { scale: 1.1; rotate: 45deg; } }
.gl--task-a { --x: -112px; --y: -38px; --z: 56px; animation: task-bob 6s ease-in-out infinite; }
.gl--task-b { --x: 104px; --y: -78px; --z: 84px; animation: task-bob 6s ease-in-out -2s infinite; }
.gl--task-c { --x: 92px; --y: 84px; --z: 48px; animation: task-bob 6s ease-in-out -4s infinite; }
@keyframes task-bob { 50% { translate: 0 -10px; } }

/* 3 · gears turning together (the small one twice as fast, the other way) */
.gs--gear-a { width: 170px; height: 170px; --x: -38px; --y: 22px; --z: 30px; }
.gs--gear-b { width: 120px; height: 120px; --x: 74px; --y: -62px; --z: 64px; }
.gs--gear-a .spin { transform-origin: 85px 85px; } .gs--gear-b .spin { transform-origin: 60px 60px; }
.svc__art.is-active .gs--gear-a .spin { animation: gear-cw 14s linear infinite; }
.svc__art.is-active .gs--gear-b .spin { animation: gear-ccw 9.33s linear infinite; }
@keyframes gear-cw { to { rotate: 360deg; } }
@keyframes gear-ccw { from { rotate: 22.5deg; } to { rotate: -337.5deg; } }
.gl--task-ok { --x: 96px; --y: 82px; --z: 90px; animation: task-bob 6s ease-in-out infinite; }

/* 4 · shield: a live pulse runs across it, a renewal ring turns around it */
.gs--ring { width: 260px; height: 260px; --z: -14px; filter: drop-shadow(0 0 10px rgb(0 230 254 / 0.5)); }
.gs--ring .spin { transform-origin: 130px 130px; }
.svc__art.is-active .gs--ring .spin { animation: gear-cw 18s linear infinite; }
.gs--shieldbody { width: 172px; height: 200px; --z: 30px; }
.gs--pulse { width: 120px; height: 48px; --z: 64px; --y: -4px; filter: drop-shadow(0 0 8px rgb(0 230 254 / 0.7)); }
.pulse__line { stroke-dasharray: 190; stroke-dashoffset: 190; }
.svc__art.is-active .pulse__line { animation: pulse-run 3.2s ease-in-out infinite; }
@keyframes pulse-run { 0% { stroke-dashoffset: 190; } 45%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -190; } }
.gl--task-shield { --x: 84px; --y: -86px; --z: 92px; }

@media (prefers-reduced-motion: reduce) {
  .gs .spin, .gl--task, .svc__art.is-active :is(.gs .spin, .cd__l, .pulse__line) { animation: none; }
  .pulse__line { stroke-dashoffset: 0; }
}
/* v24b: code lines placed one under the other (glass pieces position their children absolutely) */
.gl--editor .cd__l { position: absolute; left: calc(20px + var(--x) * 1.6); top: 50px; margin: 0; }
.gl--editor .cd__l:nth-of-type(2) { top: 50px; } .gl--editor .cd__l:nth-of-type(3) { top: 70px; }
.gl--editor .cd__l:nth-of-type(4) { top: 90px; } .gl--editor .cd__l:nth-of-type(5) { top: 110px; }
.gl--editor .cd__l:nth-of-type(6) { top: 130px; } .gl--editor .cd__l:nth-of-type(7) { top: 150px; }
.gl--editor .cd__l { width: calc(var(--w) * 1.5); }
.gl--editor .cd__dots { position: absolute; }
/* v24c: code lines stay inside the editor; the pulse stays drawn most of the loop */
.gl--editor { overflow: hidden; }
.gl--editor .cd__l { width: calc(var(--w) * 1.15); }
.pulse__line { stroke-dasharray: 220; stroke-dashoffset: 220; }
@keyframes pulse-run { 0% { stroke-dashoffset: 220; } 30%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -220; } }
/* v25: consultoría y estrategia — a roadmap: three glass steps rising, the
   route drawing itself from step to step, a flag waving at the top */
.gl--plate { --w: 250px; --h: 150px; --r: 28px; --y: 34px; --z: -20px; opacity: 0.8; }
.gl--step { --w: 56px; --r: 16px; }
.gl--step-1 { --h: 52px; --x: -70px; --y: 54px; --z: 24px; }
.gl--step-2 { --h: 92px; --x: 0px; --y: 34px; --z: 34px; }
.gl--step-3 { --h: 132px; --x: 70px; --y: 14px; --z: 44px;
  background: linear-gradient(to top, rgb(99 131 255 / 0.3), rgb(0 230 254 / 0.4)) !important; }
.gs--route { width: 200px; height: 120px; --x: -2px; --y: -18px; --z: 70px; filter: drop-shadow(0 0 8px rgb(0 230 254 / 0.6)); }
.svc__art.is-active .route__line { animation: route-draw 6s ease-in-out infinite; }
@keyframes route-draw { 0% { stroke-dashoffset: 220; opacity: 0; } 10% { opacity: 1; } 55%, 100% { stroke-dashoffset: 0; } }
.route__line { stroke-dashoffset: 0; }
.gs--flag { width: 60px; height: 90px; --x: 92px; --y: -98px; --z: 60px; }
.flag__cloth { transform-box: fill-box; transform-origin: left center; }
.svc__art.is-active .flag__cloth { animation: flag-wave 3.2s ease-in-out infinite; }
@keyframes flag-wave { 50% { transform: skewY(-6deg) scaleX(0.92); } }
[data-theme='light'] .gs--route circle, [data-theme='light'] .gs--flag > path:first-of-type { fill: #fff; stroke: var(--xk-lilac); }
[data-theme='light'] .gs--flag > path:first-of-type { stroke: var(--xk-lilac); }
@media (prefers-reduced-motion: reduce) { .svc__art.is-active :is(.route__line, .flag__cloth) { animation: none; } }
.gs--route { height: 130px; --y: -14px; }
/* v26: consultoría y estrategia — a glass chess knight on a board: it lifts
   and settles as if making its move, the target square lights up */
.gl--board, .g3d--pro .gl.gl--board { --w: 250px; --h: 250px; --r: 30px;
  transform: translate(-50%, -50%) translate3d(0px, 74px, -10px) rotateX(74deg); }
.gl--board .board__tiles { inset: 22px; border-radius: 14px;
  background: repeating-conic-gradient(rgb(255 255 255 / 0.32) 0 25%, rgb(255 255 255 / 0.04) 0 50%) 0 0 / 51.5px 51.5px; }
[data-theme='light'] .gl--board .board__tiles { background: repeating-conic-gradient(rgb(99 131 255 / 0.28) 0 25%, rgb(255 255 255 / 0.3) 0 50%) 0 0 / 51.5px 51.5px; }
.gl--board .board__hit { left: calc(22px + 51.5px * 3); top: calc(22px + 51.5px); width: 51.5px; height: 51.5px; border-radius: 8px;
  background: radial-gradient(circle, rgb(0 230 254 / 0.95), rgb(99 131 255 / 0.5) 60%, transparent 75%); opacity: 0; }
.svc__art.is-active .board__hit { animation: board-hit 4.8s ease-in-out infinite; }
@keyframes board-hit { 0%, 30% { opacity: 0; } 45%, 75% { opacity: 1; } 100% { opacity: 0; } }
.gs--knight { width: 112px; height: 144px; --x: 6px; --y: -6px; --z: 40px; }
.gs--knight .spin { transform-origin: 50px 124px; }
.svc__art.is-active .gs--knight .spin { animation: knight-move 4.8s var(--ease-out) infinite; }
@keyframes knight-move { 0%, 20% { transform: none; } 34% { transform: translateY(-14px) rotate(-6deg); } 46%, 100% { transform: none; } }
.gs--pawn { width: 58px; height: 66px; --x: -78px; --y: 22px; --z: -70px; opacity: 0.75; }
@media (prefers-reduced-motion: reduce) { .svc__art.is-active :is(.board__hit, .gs--knight .spin) { animation: none; } .board__hit { opacity: 1; } }
/* v26b: the board tilted so it reads as a board (the scene already leans 16°),
   a larger knight, the pawn further back on the left */
.gl--board, .g3d--pro .gl.gl--board { --w: 240px; --h: 240px; transform: translate(-50%, -50%) translate3d(0px, 66px, -20px) rotateX(56deg); }
.gl--board .board__tiles { background-size: 49px 49px; }
.gl--board .board__hit { left: calc(22px + 49px * 3); top: calc(22px + 49px); width: 49px; height: 49px; }
.gs--knight { width: 128px; height: 164px; --x: 12px; --y: -20px; --z: 50px; }
.gs--pawn { width: 54px; height: 62px; --x: -86px; --y: 14px; --z: -40px; opacity: 0.7; }
/* v26c: pieces stand on the board (not on its back edge); larger squares, calmer */
.gl--board .board__tiles { background-size: 98px 98px; }
.gs--knight { --y: 22px; --z: 40px; }
.gs--pawn { --x: -70px; --y: 40px; --z: -30px; }
[data-theme='light'] .gl--board .board__tiles { background-size: 98px 98px; }
.gs--pawn { --x: -104px; --y: 30px; --z: -20px; opacity: 0.8; }
/* ----------------------------------------------------------------- 02 · candidate icons for consultoría (A lens, B bulb) */
/* A · a lens sweeps the data; where it stops, the AI spark appears */
.gl--datapanel { --w: 240px; --h: 170px; --r: 26px; --z: 0px; --y: 16px; }
.gl--datapanel .dp__bar { bottom: 26px; left: calc(30px + var(--n) * 38px); width: 24px; height: var(--h); border-radius: 8px 8px 4px 4px; background: rgb(255 255 255 / 0.5); }
[data-theme='light'] .gl--datapanel .dp__bar { background: rgb(99 131 255 / 0.35); }
.gl--datapanel .dp__bar--hi { background: linear-gradient(180deg, var(--xk-cyan), var(--xk-lilac)) !important; }
.gs--lens { width: 130px; height: 150px; --x: 20px; --y: -10px; --z: 70px; animation: lens-sweep 6s var(--ease-out) infinite; }
@keyframes lens-sweep { 0%, 100% { translate: -70px 14px; } 45%, 80% { translate: 18px -18px; } }
.lens__spark { transform-box: fill-box; transform-origin: center; opacity: 0; animation: lens-spark 6s ease-in-out infinite; }
@keyframes lens-spark { 0%, 40% { opacity: 0; transform: scale(0.4); } 52%, 78% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(0.6); } }
/* B · a glass bulb; the AI spark inside lights up */
.gs--bulb { width: 150px; height: 200px; --y: -4px; --z: 30px; }
.bulb__core { left: 50%; top: 50%; transform: translate(-50%, -50%) translate3d(0, -26px, 10px); width: 140px; height: 140px; animation: bulb-glow 4s ease-in-out infinite; }
@keyframes bulb-glow { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.gs--bulbspark { width: 74px; height: 74px; --y: -30px; --z: 60px; }
.gs--bulbspark .spin { transform-box: view-box; transform-origin: 50px 50px; animation: spark-breathe 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gs--lens, .lens__spark, .bulb__core, .gs--bulbspark .spin { animation: none; } .lens__spark { opacity: 1; } }
/* ----------------------------------------------------------------- 02 · v27: consultoría — the lens, built in glass */
/* a glass data panel; a glass magnifier (rim, lens, handle as glass pieces)
   glides over it and stops on the highlighted bar: the bar lights up and the
   AI spark appears inside the lens. One 6s loop. */
.g3d--lens .gl--datapanel { --w: 236px; --h: 168px; --r: 26px; --x: -10px; --y: 26px; --z: 0px; }
.g3d--lens .dp__bar { bottom: 24px; left: calc(28px + var(--n) * 40px); width: 26px; height: var(--h); border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.22)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8); }
[data-theme='light'] .g3d--lens .dp__bar { background: linear-gradient(180deg, rgb(99 131 255 / 0.5), rgb(99 131 255 / 0.18)); }
.g3d--lens .dp__bar--hi, [data-theme='light'] .g3d--lens .dp__bar--hi { background: linear-gradient(180deg, var(--xk-cyan), var(--xk-lilac) 70%, var(--xk-violet)); }
.svc__art.is-active .g3d--lens .dp__bar--hi { animation: lz-bar 6s ease-in-out infinite; }
@keyframes lz-bar { 0%, 38% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8); } 52%, 80% { box-shadow: inset 0 1px 0 #fff, 0 0 22px 4px rgb(0 230 254 / 0.7); } 100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8); } }
/* the magnifier: a 0×0 anchor in the 3D space; its pieces are placed around it */
.lz { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: translate3d(0, 0, 80px); }
.svc__art.is-active .lz { animation: lz-move 6s var(--ease-out) infinite; }
@keyframes lz-move { 0%, 100% { translate: -66px 34px; } 46%, 82% { translate: 46px -28px; } }
.gl--lz-glass { --w: 104px; --h: 104px; --r: 50%; --z: 0px;
  background: radial-gradient(70% 70% at 30% 25%, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.08) 60%, rgb(0 230 254 / 0.18)) !important; }
.gl--lz-ring { --w: 124px; --h: 124px; --r: 50%; --z: 8px;
  background: conic-gradient(from 210deg, #ffffff, #00e6fe 25%, #6383ff 55%, #634dff 75%, #ffffff) !important;
  -webkit-mask: radial-gradient(circle, transparent 51px, #000 52px); mask: radial-gradient(circle, transparent 51px, #000 52px);
  box-shadow: none !important; filter: drop-shadow(0 10px 18px rgb(3 5 28 / 0.4)); }
.gl--lz-ring::before, .gl--lz-ring::after { display: none; }
.gl--lz-handle { --w: 30px; --h: 86px; --r: 15px; --x: 62px; --y: 62px; --z: 2px; --rot: -45deg;
  background: linear-gradient(180deg, var(--xk-lilac), var(--xk-violet)) !important; }
.lz__spark { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; transform: translateZ(14px); opacity: 0; filter: drop-shadow(0 0 10px rgb(0 230 254 / 0.8)); }
.svc__art.is-active .lz__spark { animation: lz-spark 6s ease-in-out infinite; }
@keyframes lz-spark { 0%, 42% { opacity: 0; scale: 0.4; } 54%, 80% { opacity: 1; scale: 1; } 92%, 100% { opacity: 0; scale: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  .svc__art.is-active :is(.lz, .lz__spark, .g3d--lens .dp__bar--hi) { animation: none; }
  .lz { translate: 46px -28px; } .lz__spark { opacity: 1; }
}
/* v27b: the handle starts at the rim's outer edge, behind the glass — it never enters the lens */
.gl--lz-handle { --x: 76px; --y: 76px; --z: -4px; --h: 80px; }
.gl--lz-handle { --x: 69px; --y: 69px; }

/* ----------------------------------------------------------------- 07 · results: what a custom app brings */
/* a band in the XK gradient (both themes); four glass cards, one result each.
   No invented percentages: the figures describe what the app does. */
.gains {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: clamp(0px, 1.2vw, 16px); border-radius: clamp(24px, 3vw, 40px); color: #fff;
  background: radial-gradient(70% 90% at 100% 0%, rgb(0 230 254 / 0.55), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgb(99 77 255 / 0.7), transparent 70%), linear-gradient(130deg, #4f63ff, #634dff 50%, #3b46d9);
  --ink: #fff; --ink-soft: rgb(255 255 255 / 0.8); --ink-dim: rgb(255 255 255 / 0.62); --ink-muted: rgb(255 255 255 / 0.72); --hairline-strong: rgb(255 255 255 / 0.3);
}
[data-theme='dark'] .gains { background: radial-gradient(70% 90% at 100% 0%, rgb(0 230 254 / 0.38), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgb(99 77 255 / 0.55), transparent 70%), linear-gradient(130deg, #2b37b8, #3a2bb0 50%, #141a66); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.gains__light i { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); animation: gains-drift 14s ease-in-out infinite alternate; }
.gains__light i:nth-child(1) { width: 40%; aspect-ratio: 1; left: 30%; top: -30%; background: rgb(0 202 255 / 0.35); }
.gains__light i:nth-child(2) { width: 30%; aspect-ratio: 1; right: -6%; bottom: -30%; background: rgb(99 131 255 / 0.5); animation-duration: 18s; }
@keyframes gains-drift { to { translate: 12% 10%; } }
.gains__inner { padding-block: clamp(64px, 7vw, 110px); }
.gains__head { display: grid; gap: 22px; margin-bottom: clamp(36px, 4vw, 56px); }
.gains__head .h2 { max-width: 18ch; }
.gains__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
.gn {
  display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 230px; padding: 30px 18px; border-radius: 22px; text-align: center;
  background: linear-gradient(160deg, rgb(3 5 28 / 0.34), rgb(3 5 28 / 0.18)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 30px 60px -36px rgb(3 5 28 / 0.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; translate: 0 26px; transition: opacity 0.9s var(--ease-out), translate 1s var(--ease-out), box-shadow 0.5s var(--ease-out);
  transition-delay: calc(0.15s + var(--k) * 0.12s);
}
.gains.is-in .gn { opacity: 1; translate: 0 0; }
.gn:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(0 230 254 / 0.45), 0 30px 60px -30px rgb(0 230 254 / 0.45); }
.gn__ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.gn__ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gn__v { font-size: clamp(2.6rem, 4.2vw, 3.7rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.gn__v--word { font-size: clamp(1.7rem, 2.3vw, 2.15rem); letter-spacing: -0.03em; line-height: 1.15; padding: 0.35em 0 0.2em; }
.gn__l { max-width: 16ch; font-size: 1rem; line-height: 1.4; color: rgb(255 255 255 / 0.85); }
@media (max-width: 1024px) { .gains__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gn { min-height: 0; padding: 24px 14px; } }
@media (prefers-reduced-motion: reduce) { .gn { opacity: 1; translate: none; transition: none; } .gains__light i { animation: none; } }
/* v28b: same rhythm in every card (icon, value row, label start at the same height);
   the words fit on phones */
.gn { align-content: start; padding-top: 36px; }
.gn__v { display: flex; align-items: center; justify-content: center; min-height: 1.15em; height: clamp(3rem, 4.6vw, 4.1rem); padding: 0; }
.gn__v--word { padding: 0; }
.gn__l { max-width: 20ch; }
@media (max-width: 520px) { .gn__v--word { font-size: clamp(1.2rem, 5.4vw, 1.5rem); } .gn__v { height: 3rem; } }
/* v28c: an eyebrow over the value ("Reducimos", "Automatizamos"); the footnote for the measured figure */
.gn__e { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255 255 255 / 0.75); margin-top: 4px; }
.gn__l sup { font-size: 0.7em; margin-left: 1px; }
.gains__note { margin-top: 20px; font-size: 0.82rem; color: rgb(255 255 255 / 0.7); }
.gn__v--word { font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
@media (max-width: 520px) { .gn__v--word { font-size: clamp(1.15rem, 5.2vw, 1.45rem); } .gn { padding-inline: 10px; } }
/* ----------------------------------------------------------------- 07 · v29: results on the XK satin, compact */
/* the band takes the brand's living satin (WebGL, preset "cta") in the page's
   theme instead of the flat gradient; ink and cards follow the theme */
.gains, [data-theme='dark'] .gains { color: var(--ink); background: #080b26; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  --ink: #fff; --ink-soft: rgb(255 255 255 / 0.72); --ink-dim: rgb(255 255 255 / 0.46); --ink-muted: rgb(255 255 255 / 0.52); --hairline-strong: rgb(255 255 255 / 0.18); }
[data-theme='light'] .gains { background: #eaedff; box-shadow: none;
  --ink: #03051c; --ink-soft: rgb(3 5 28 / 0.72); --ink-dim: rgb(3 5 28 / 0.5); --ink-muted: rgb(3 5 28 / 0.5); --hairline-strong: rgb(3 5 28 / 0.16); }
.gains .waves { z-index: -2; }
.gains .waves-fallback { z-index: -2; }
.gains__inner { padding-block: clamp(48px, 5vw, 76px); }
.gains__head { gap: 16px; margin-bottom: clamp(24px, 2.6vw, 36px); }
.gains__head .h2 { max-width: none; font-size: clamp(1.9rem, 3vw, 2.8rem); }
.gn { min-height: 0; gap: 6px; padding: 24px 16px 22px; border-radius: 20px; color: var(--ink);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.04)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 60px -40px rgb(0 0 0 / 0.8); }
[data-theme='light'] .gn { background: linear-gradient(155deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.55)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 26px 50px -32px rgb(38 44 110 / 0.35); }
.gn:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.24), inset 0 0 0 1px rgb(99 131 255 / 0.5), 0 26px 50px -28px rgb(99 77 255 / 0.5); }
.gn__ic { width: 40px; height: 40px; border-radius: 12px; background: rgb(99 131 255 / 0.14); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.28); }
.gn__ic svg { width: 21px; height: 21px; stroke: var(--xk-lilac); }
[data-theme='dark'] .gn__ic svg { stroke: #a9b8ff; }
.gn__e { color: var(--ink-dim); font-size: 0.74rem; }
.gn__v { height: auto; min-height: 0; font-size: clamp(2.2rem, 3.2vw, 3rem); }
.gn__l { color: var(--ink-soft); font-size: 0.94rem; }
/* v30: eyebrows in sentence case (first letter capital, the rest as written) — no all-caps */
.hero__kicker, .cta__kicker, .apx__area, .gn__e, .ui__eyebrow, .px-label, .apq__sec small, .apcard small, .cr-sec, .cr-brand small, .fx .cr-head small, .px .cr-head small, .cr-head small {
  text-transform: none; letter-spacing: 0.01em;
}
.apx__area, .gn__e, .cta__kicker, .hero__kicker { font-size: 0.9rem; }
/* v31: final CTA — no eyebrow; the title opens up: "Hagamos que tu empresa" on one line, "evolucione." below */
.cta__inner { max-width: min(1240px, 100%); }
.cta__title { text-wrap: wrap; }
.cta__title .cta__lead { white-space: nowrap; }
@media (max-width: 760px) { .cta__title .cta__lead { white-space: normal; } }
/* v32: gradient-painted letters (the CTA's "evolucione.") get room for their
   glyph overhang — background-clip: text clips at each letter's box, and the
   tight tracking made "e" and "v" lose their edges */
.cta__accent .fx-char { padding-inline: 0.09em; margin-inline: -0.09em; padding-block: 0.06em; margin-block: -0.06em; }
.cta__accent { padding-inline: 0.06em; }

/* the page scrollbar in XK style: slim, a lilac→cyan thumb on the page colour */
html { scrollbar-width: thin; scrollbar-color: #6383ff transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--page, #f5f6ff); }
::-webkit-scrollbar-thumb { border: 3px solid var(--page, #f5f6ff); border-radius: 999px; background: linear-gradient(180deg, #634dff, #6383ff 50%, #00caff); }
::-webkit-scrollbar-thumb:hover { border-width: 2px; }
::-webkit-scrollbar-button { display: none; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
[data-theme='dark'] ::-webkit-scrollbar-track { background: #03051c; }
[data-theme='dark'] ::-webkit-scrollbar-thumb { border-color: #03051c; }
/* v33: the phone stays on the right, centred on the dashboard's height
   (668px tall at 0.82 scale ≈ 548px: half of it above the middle) */
@media (min-width: 641px) { .ui__phone { top: 50%; margin-top: -274px; } }

/* ----------------------------------------------------------------- 01 · v34: the dashboard as a hub (Operaciones · CRM · Facturación) */
.ui__main { position: relative; padding: 0; display: block; }
.ui__screen { position: absolute; inset: 26px 20px 20px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateX(18px); transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out), visibility 0s 0.5s; }
.ui__screen.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0.08s, 0.08s, 0s; }
.ui__screen[data-screen]:not([data-screen='0']).is-on > * { animation: scr-in 0.6s var(--ease-out) both; }
.ui__screen.is-on > :nth-child(2) { animation-delay: 0.08s; }
.ui__screen.is-on > :nth-child(3) { animation-delay: 0.16s; }
@keyframes scr-in { from { opacity: 0; transform: translateY(12px); } }
/* the new screens' cards are visible once the dashboard is live */
.xp .ui .ui__screen:not([data-screen='0']) :is(.ui__top > div, .ui__search, .ui__avatar, .ui__kpi, .ui__flows) { opacity: 1; translate: none; filter: none; }
.ui__nav[data-go] { cursor: var(--cursor-link); transition: background 0.3s, color 0.3s, transform 0.2s; }
.ui__nav[data-go]:hover { color: #fff; }
.ui__nav.is-press { transform: scale(0.88); }
.ui__nav { position: relative; }
.ui__nav.is-press::after { content: ''; position: absolute; inset: -4px; border-radius: 16px; box-shadow: 0 0 0 2px rgb(0 230 254 / 0.8); animation: nav-ping 0.45s ease-out forwards; }
@keyframes nav-ping { from { opacity: 1; transform: scale(0.8); } to { opacity: 0; transform: scale(1.3); } }
.ui__kpi-v { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* tables inside the hub */
.ui__tbl { display: flex; flex-direction: column; gap: 2px; }
.ui__screen[data-screen='1'] .ui__tbl { flex: 1; }
.ui__tr { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr 0.9fr 0.6fr; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--ui-line); font-size: 12.5px; }
.ui__tr:last-child { border-bottom: 0; }
.ui__tr--h { padding-top: 4px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-soft); }
.ui__tr > span:not(.ui__pill):not(.ui__who) { color: var(--ui-soft); }
.ui__tr b { font-weight: 500; font-variant-numeric: tabular-nums; }
.ui__tr--inv { grid-template-columns: 0.6fr minmax(0, 1.4fr) 0.8fr 0.9fr; }
.ui__who { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.ui__who i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; font-style: normal; font-size: 10px; font-weight: 600; color: #fff; background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); }
.ui__tr:nth-child(even) .ui__who i { color: var(--xk-navy); background: linear-gradient(140deg, var(--xk-cyan), var(--xk-light-blue)); }
.ui__pill { justify-self: start; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.ui__pill--ok { color: #0a7a9a; background: rgb(0 202 255 / 0.14); }
.ui__pill--new { color: #4a5fe0; background: rgb(99 131 255 / 0.14); }
.ui__pill--wait { color: #5a45e6; background: rgb(99 77 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(99 77 255 / 0.28); }
.ui__pill--bad { color: #c73a4a; background: rgb(229 72 77 / 0.1); }
[data-theme='dark'] .ui__pill--ok { color: #6fe6ff; } [data-theme='dark'] .ui__pill--new { color: #a9b8ff; }
[data-theme='dark'] .ui__pill--wait { color: #b9adff; } [data-theme='dark'] .ui__pill--bad { color: #ff8f99; }
/* the demo cursor */
.ui__cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 26px; height: 26px; pointer-events: none; opacity: 0;
  transform: translate(140px, 420px); transition: transform 0.95s var(--ease-out), opacity 0.4s; filter: drop-shadow(0 4px 8px rgb(3 5 28 / 0.45)); }
.ui__cursor.is-on { opacity: 1; }
.ui__cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #03051c; stroke-width: 1.4; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .ui__screen, .ui__cursor { transition: none; } .ui__screen.is-on > * { animation: none !important; } }
/* v35: the phone's chat wallpaper in dark mode follows the light one — the same
   lilac → light-blue XK gradient with its dots, a shade deeper for the dark page */
[data-theme='dark'] .tg__chat {
  background-color: #7d8ff0;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgb(255 255 255 / 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 45% 85%, rgb(255 255 255 / 0.16) 0 2px, transparent 3px),
    linear-gradient(165deg, #9aa8ff 0%, #7c8df2 45%, #62b9e6 100%);
  background-size: 46px 46px, 62px 62px, 38px 38px, 100% 100%;
}
[data-theme='dark'] .tg__day { background: rgb(20 26 80 / 0.35); }
/* v36: the phone in dark mode wears XK colours instead of Telegram's grey-green:
   navy bars, deep-indigo incoming bubbles, violet-blue outgoing ones */
[data-theme='dark'] .ui__phone.tg { --tg-head: #0c1038; --tg-ink: #fff; --tg-soft: #9aa6dd; --tg-in: #161c55; --tg-out: #4a4fd8; --tg-check: #8fe9ff; --tg-btn: rgb(255 255 255 / 0.16); background: #0c1038; }
[data-theme='dark'] .tg__head { box-shadow: 0 1px 0 rgb(255 255 255 / 0.06); }
[data-theme='dark'] .tg__head svg { color: #a9b8ff; }
[data-theme='dark'] .ui__phone.tg .ui__msg b { color: #8fe9ff; }
[data-theme='dark'] .ui__msg--me .tg__t { color: #c9d2ff; }
[data-theme='dark'] .ui__phone.tg .ui__brief em { background: var(--xk-lilac); }
/* the bot's avatar is Telegram's logo: it reads as a Telegram chat at a glance */
.tg__ava--tg { background: #fff; }
.tg__ava--tg svg { width: 38px; height: 38px; fill: #26a5e4; }
.tg__head .tg__ava--tg svg, .tg__head .tg__ava--tg svg:last-child { width: 38px; height: 38px; margin: 0; fill: #26a5e4; color: #26a5e4; stroke: none; }
.tg__head .tg__ava--tg { background: #fff; overflow: hidden; }
/* v37: fluid hover on the result cards. The entrance runs as an animation (its
   delay no longer slows the hover); hover lifts the card, a soft light follows
   the pointer (--mx/--my from partner.js), the rim lights in XK colours, the
   icon turns a little and the figure grows. All on one smooth curve. */
.gn { position: relative; isolation: isolate; overflow: hidden; opacity: 1; translate: 0 0; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0s; will-change: transform; }
.gains .gn { opacity: 0; }
.gains.is-in .gn { animation: gn-in 0.9s var(--ease-out) both; animation-delay: calc(0.15s + var(--k) * 0.12s); }
@keyframes gn-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.gn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity 0.5s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 30%), rgb(99 131 255 / 0.28), rgb(0 230 254 / 0.08) 45%, transparent 70%); }
.gn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgb(0 230 254 / 0.9), rgb(99 131 255 / 0.6) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.gn:hover { transform: translateY(-6px); }
.gains.is-in .gn:hover { animation-fill-mode: none; }
.gn:hover::before, .gn:hover::after { opacity: 1; }
.gn__ic, .gn__v { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s ease, box-shadow 0.5s ease; }
.gn:hover .gn__ic { transform: rotate(-8deg) scale(1.08); background: rgb(99 131 255 / 0.22); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.45), 0 0 18px rgb(99 131 255 / 0.35); }
.gn:hover .gn__v { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .gains.is-in .gn { animation: none; opacity: 1; } .gn, .gn__ic, .gn__v { transition: none; } .gn:hover, .gn:hover .gn__ic, .gn:hover .gn__v { transform: none; } }
/* the entrance moves `translate`, the hover moves `transform`: they never fight */
@keyframes gn-in { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
.gains.is-in .gn:hover { animation-fill-mode: both; }

/* ----------------------------------------------------------------- 06 · v38: the Hub example */
.hb .cr-main { gap: 16px; }
.hb-grid { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 12px; }
.hb-mod { position: relative; display: grid; align-content: start; gap: 4px; padding: 16px; border-radius: 16px; background: var(--cr-card); box-shadow: inset 0 0 0 1px var(--w-line), 0 10px 24px -18px rgb(38 44 110 / 0.35); }
.hb-mod b { margin-top: 8px; font-weight: 600; font-size: 13px; }
.hb-mod__v { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.hb-mod small { font-size: 10.5px; color: var(--w-soft); }
.hb-mod__ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; }
.hb-mod__ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hb-mod__ic--a { background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); box-shadow: 0 8px 16px -8px rgb(99 77 255 / 0.8); }
.hb-mod__ic--b { color: var(--xk-navy); background: linear-gradient(140deg, var(--xk-cyan), var(--xk-light-blue)); box-shadow: 0 8px 16px -8px rgb(0 202 255 / 0.8); }
.hb-mod__on { position: absolute; top: 14px; right: 14px; padding: 3px 9px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 500; color: #0a7a9a; background: rgb(0 202 255 / 0.14); }
[data-theme='dark'] .hb-mod__on { color: #6fe6ff; }
.hb-mod--install { box-shadow: inset 0 0 0 1.5px rgb(99 131 255 / 0.55), 0 14px 30px -18px rgb(99 77 255 / 0.6); }
.hb-mod__state { display: grid; margin-top: 2px; }
.hb-mod__state > * > * { display: block; }
.hb-mod__bar { height: 6px; margin: 10px 0 6px; border-radius: 6px; background: var(--w-line); overflow: hidden; }
.hb-mod__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--xk-lilac), var(--xk-light-blue)); }
.apx--hub.is-play .hb-mod__bar i { animation: apx-grow 2.6s var(--ease-out) 1.6s forwards; --w: 100%; }
.apx--hub.is-play .swap__a { animation-delay: 4.4s; }
.apx--hub.is-play .swap__b { animation-delay: 4.6s; }
.hb-mod__on--late { opacity: 0; }
.apx--hub.is-play .hb-mod__on--late { animation: sw-in 0.5s var(--ease-out) 4.8s forwards; }
.hb-nav--new { opacity: 0.35; }
.apx--hub.is-play .hb-nav--new { animation: hb-nav 0.6s var(--ease-out) 4.8s forwards; }
@keyframes hb-nav { to { opacity: 1; background: rgb(99 131 255 / 0.1); } }
.hb-mod--add { place-content: center; justify-items: center; text-align: center; background: transparent; box-shadow: none; border: 1.5px dashed rgb(99 131 255 / 0.5); }
.hb-mod--add b { margin-top: 6px; color: var(--xk-violet); }
[data-theme='dark'] .hb-mod--add b { color: #a9b8ff; }
.hb-mod__plus { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--xk-lilac); background: rgb(99 131 255 / 0.12); }
.hb-mod__plus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.apx--hub.is-play .hb-mod--add .hb-mod__plus { animation: hb-pulse 2.4s ease-in-out 5.4s infinite; }
@keyframes hb-pulse { 50% { box-shadow: 0 0 0 8px rgb(99 131 255 / 0); background: rgb(99 131 255 / 0.22); } 0%, 100% { box-shadow: 0 0 0 0 rgb(99 131 255 / 0.4); } }
.hb-strip { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; font-size: 11.5px; color: var(--w-soft); background: rgb(99 131 255 / 0.07); }
.hb-strip b { color: var(--w-ink); font-weight: 600; }
.hb-strip svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--xk-lilac); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hb-grid { grid-template-rows: 1fr 1fr auto; }
@media (max-width: 640px) {
  .hb { width: 620px; }
  .hb .cr-side, .hb .cr-btns { display: none; }
  .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; }
}

/* ----------------------------------------------------------------- 06 · v38: control móvil — app + WhatsApp + Telegram */
.apduo--chan { max-width: 860px; gap: 34px; align-items: center; }
.apduo--chan .aph .an, .apduo--chan .aph > * { opacity: 1; }
.wchat { position: relative; width: 300px; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #efeae2; box-shadow: 0 30px 60px -22px rgb(3 5 28 / 0.55); font-size: 12.5px; color: #111b21; }
[data-theme='dark'] .wchat { background: #0b141a; color: #e9edef; box-shadow: 0 30px 60px -22px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.wchat__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: #075e54; }
[data-theme='dark'] .wchat__head { background: #202c33; }
.wchat__logo { width: 34px; height: 34px; padding: 6px; border-radius: 50%; fill: #fff; background: #25d366; flex: none; }
.wchat__head span { display: grid; line-height: 1.25; }
.wchat__head b { font-weight: 500; font-size: 13.5px; }
.wchat__head small { font-size: 10.5px; opacity: 0.8; }
.wchat__body { display: flex; flex-direction: column; gap: 7px; padding: 14px 12px; min-height: 290px;
  background-image: radial-gradient(circle at 20% 30%, rgb(0 0 0 / 0.04) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgb(0 0 0 / 0.035) 0 2px, transparent 3px); background-size: 40px 40px, 56px 56px; }
.wchat__m { position: relative; align-self: flex-start; max-width: 86%; padding: 7px 10px 17px; border-radius: 4px 12px 12px 12px; line-height: 1.38; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / 0.1); }
.wchat__m--me { align-self: flex-end; border-radius: 12px 4px 12px 12px; background: #d9fdd3; }
[data-theme='dark'] .wchat__m { background: #202c33; } [data-theme='dark'] .wchat__m--me { background: #005c4b; }
.wchat__m b { font-weight: 600; }
.wchat__m em { position: absolute; right: 8px; bottom: 3px; font-style: normal; font-size: 9.5px; opacity: 0.55; }
.wchat__typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; border-radius: 4px 12px 12px 12px; background: #fff; }
[data-theme='dark'] .wchat__typing { background: #202c33; }
.wchat__typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: wa-dot 1s ease-in-out infinite; }
.wchat__typing i:nth-child(2) { animation-delay: 0.15s; } .wchat__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes wa-dot { 50% { transform: translateY(-3px); opacity: 0.5; } }
/* the typing dots leave when the answer arrives */
.apx--mob.is-play .wchat__typing { animation: apx-in 0.5s var(--ease-out) forwards, wa-gone 0.3s ease forwards; animation-delay: calc(3 * 0.32s + 0.35s), calc(3.8 * 0.32s + 0.2s); }
@keyframes wa-gone { to { opacity: 0; height: 0; padding: 0; margin: -7px 0 0; } }
.wchat__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f0f2f5; }
[data-theme='dark'] .wchat__bar { background: #202c33; }
.wchat__bar span { flex: 1; padding: 8px 12px; border-radius: 999px; font-size: 11.5px; color: #8696a0; background: #fff; }
[data-theme='dark'] .wchat__bar span { background: #2a3942; }
.wchat__bar i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #00a884; }
.wchat__bar i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.apt--tg { position: absolute; top: -20px; right: -10px; bottom: auto; }
.apt__brand { width: 34px; height: 34px; flex: none; padding: 0 !important; border-radius: 50% !important; fill: #26a5e4; background: #fff !important; stroke: none !important; }
@media (max-width: 1024px) { .apduo--chan { flex-direction: column; } .apt--tg { position: relative; top: auto; right: auto; } }
.apt .apt__brand { fill: #26a5e4; stroke: none; padding: 0; background: #fff; filter: none; }

/* ----------------------------------------------------------------- 06 · v39: hub tour + phone */
.hbflow { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; }
.hbflow__app { position: relative; min-width: 0; }
.aph--hub { position: relative; z-index: 3; width: 220px; margin-left: -70px; }
.hb-cursor { position: absolute; left: 0; top: 0; z-index: 4; width: 26px; height: 26px; pointer-events: none; opacity: 0; transform: translate(200px, 200px);
  transition: transform 0.9s var(--ease-out), opacity 0.4s; filter: drop-shadow(0 4px 8px rgb(3 5 28 / 0.45)); }
.hb-cursor.is-on { opacity: 1; }
.hb-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #03051c; stroke-width: 1.4; stroke-linejoin: round; }
.hbflow__app .hb-cursor { transform-origin: 0 0; }
.hb-mod { transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.hb-mod.is-focus { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px rgb(99 131 255 / 0.65), 0 18px 34px -16px rgb(99 77 255 / 0.6); }
.hb .cr-nav { transition: background 0.4s, box-shadow 0.4s; }
.hbp-card { display: grid; gap: 3px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px -12px rgb(38 44 110 / 0.4); transition: opacity 0.25s, transform 0.35s var(--ease-out); }
[data-theme='dark'] .hbp-card { background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.aph--hub.is-swap .hbp-card { opacity: 0; transform: translateY(6px); }
.hbp-ic { min-height: 36px; }
.hbp-ic .hb-mod__ic { width: 34px; height: 34px; }
.hbp-ic:empty { background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); width: 34px; border-radius: 11px; }
.hbp-name { margin-top: 6px; font-weight: 600; font-size: 13px; }
.hbp-v { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.hbp-sub { font-size: 10.5px; opacity: 0.6; }
.hbp-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hbp-list i { height: 42px; border-radius: 12px; background: rgb(99 131 255 / 0.14); }
.hbp-list i:nth-child(2n) { background: rgb(0 202 255 / 0.16); }
@media (max-width: 1024px) { .hbflow { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; } .aph--hub { margin-left: 0; } }

/* ----------------------------------------------------------------- 06 · v39: control móvil — WhatsApp → the app */
.mflow { width: 100%; max-width: 820px; display: grid; grid-template-columns: minmax(0, 1fr) 248px; align-items: center; gap: clamp(28px, 4vw, 64px); }
.mflow__steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mflow__s { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; color: #fff; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); opacity: 0.45; transition: opacity 0.5s, background 0.5s; }
.mflow__s i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 600; background: rgb(255 255 255 / 0.14); }
.mflow__s span { display: grid; gap: 3px; }
.mflow__s b { font-weight: 500; font-size: 14px; }
.mflow__s small { font-size: 12px; opacity: 0.7; }
.mflow.is-run .mflow__s--1 { animation: mf-step 2.9s ease forwards 0.3s; }
.mflow.is-run .mflow__s--2 { animation: mf-step 2.4s ease forwards 3.2s; }
.mflow.is-run .mflow__s--3 { animation: mf-step-end 0.5s ease forwards 5.6s; }
@keyframes mf-step { 0%, 100% { opacity: 0.45; } 12%, 88% { opacity: 1; background: rgb(99 131 255 / 0.22); } }
@keyframes mf-step-end { to { opacity: 1; background: rgb(99 131 255 / 0.22); } }
.mflow__s i { transition: background 0.4s; }
.aph--flow { overflow: hidden; padding: 0; }
.mf { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; }
.mf--app { padding: 46px 14px 22px; transform: translateX(100%); }
.apx--mob.is-play .mf--app { animation: mf-in 0.6s var(--ease-out) forwards 3.9s; }
.apx--mob.is-play .mf--wa { animation: mf-out 0.6s var(--ease-out) forwards 3.9s; }
@keyframes mf-in { to { transform: none; } }
@keyframes mf-out { to { transform: translateX(-30%); opacity: 0; } }
.mf__wahead { display: flex; align-items: center; gap: 10px; padding: 40px 14px 12px; color: #fff; background: #075e54; }
[data-theme='dark'] .mf__wahead { background: #202c33; }
.mf__walogo { width: 32px; height: 32px; padding: 6px; border-radius: 50%; fill: #fff; background: #25d366; flex: none; }
.mf__wahead span { display: grid; line-height: 1.25; }
.mf__wahead b { font-weight: 500; font-size: 13px; }
.mf__wahead small { font-size: 10px; opacity: 0.8; }
.mf__wabody { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; background: #efeae2; color: #111b21; font-size: 11.5px; margin-top: -10px; }
[data-theme='dark'] .mf__wabody { background: #0b141a; color: #e9edef; }
.mf__m { position: relative; align-self: flex-start; max-width: 88%; padding: 7px 9px 16px; border-radius: 4px 12px 12px 12px; line-height: 1.38; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / 0.1); }
.mf__m--me { align-self: flex-end; border-radius: 12px 4px 12px 12px; background: #d9fdd3; }
[data-theme='dark'] .mf__m { background: #202c33; } [data-theme='dark'] .mf__m--me { background: #005c4b; }
.mf__m b { font-weight: 600; }
.mf__m em { position: absolute; right: 8px; bottom: 3px; font-style: normal; font-size: 9px; opacity: 0.55; }
.mf__card { align-self: flex-start; display: grid; gap: 8px; width: 88%; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / 0.1); }
[data-theme='dark'] .mf__card { background: #202c33; }
.mf__card > span { font-weight: 600; }
.mf__open { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 10px; font-style: normal; font-weight: 600; color: #fff; background: linear-gradient(120deg, var(--xk-lilac), var(--xk-violet)); }
.mf__open svg { width: 13px; height: 13px; }
.mf__in1, .mf__in2, .mf__in3 { opacity: 0; transform: translateY(8px); }
.apx--mob.is-play .mf__in1 { animation: apx-in 0.5s var(--ease-out) forwards 0.6s; }
.apx--mob.is-play .mf__in2 { animation: apx-in 0.5s var(--ease-out) forwards 1.5s; }
.apx--mob.is-play .mf__in3 { animation: apx-in 0.5s var(--ease-out) forwards 2.2s; }
/* the taps: a ring that presses where the finger lands */
.mf__tap { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgb(255 255 255 / 0.55); box-shadow: 0 0 0 2px rgb(99 131 255 / 0.8); opacity: 0; pointer-events: none; }
.mf__tap--1 { left: 50%; top: calc(100% - 92px); }
.mf__tap--2 { right: 22px; top: 92px; left: auto; margin: -22px -22px 0 0; }
.apx--mob.is-play .mf__tap--1 { animation: mf-tap 0.7s ease forwards 3.3s; }
.apx--mob.is-play .mf__tap--2 { animation: mf-tap 0.7s ease forwards 5.3s; }
@keyframes mf-tap { 0% { opacity: 0; transform: scale(1.4); } 40% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.2); } }
.mf__focus { box-shadow: 0 0 0 0 transparent; }
.apx--mob.is-play .mf__focus { animation: mf-focus 1.4s ease forwards 4.6s; }
@keyframes mf-focus { 40%, 100% { box-shadow: 0 0 0 2px rgb(99 131 255 / 0.6), 0 10px 24px -12px rgb(99 77 255 / 0.6); } }
.mf__swap { display: inline-grid; }
.apx--mob.is-play .mf__swap .swap__a { animation: sw-out 0.3s ease forwards 5.6s; }
.apx--mob.is-play .mf__swap .swap__b { animation: sw-in 0.45s var(--ease-out) forwards 5.75s; }
.mf__ok { color: var(--xk-navy) !important; background: linear-gradient(120deg, var(--xk-cyan), var(--xk-light-blue)) !important; white-space: nowrap; }
.mf__toast { position: absolute; left: 12px; right: 12px; bottom: 34px; padding: 10px 12px; border-radius: 12px; font-size: 10.5px; font-weight: 500; color: #fff; background: rgb(3 5 28 / 0.88); opacity: 0; transform: translateY(10px); }
.apx--mob.is-play .mf__toast { animation: apx-in 0.5s var(--ease-out) forwards 6.3s; }
.mf--app .aph__tabs { margin-top: auto; }
@media (max-width: 1024px) { .mflow { grid-template-columns: minmax(0, 1fr); justify-items: center; } .mflow__steps { width: 100%; max-width: 360px; } }
@media (prefers-reduced-motion: reduce) {
  .mf--app { transform: none; } .mf--wa { display: none; }
  .mf__in1, .mf__in2, .mf__in3, .mflow__s { opacity: 1; transform: none; }
}
/* v39b: the first tap lands on "Abrir en la app"; the hub phone covers less of the app */
.mf__tap--1 { left: 44%; top: 274px; }
.aph--hub { width: 206px; margin-left: -28px; }
.hbflow { grid-template-columns: minmax(0, 1fr) 206px; }
/* v39c: the hub shows only the app (no phone) */
.hbflow { grid-template-columns: minmax(0, 1fr); }

/* ----------------------------------------------------------------- 06 · v40: the hub opens each module */
.hb .cr-main { min-height: 0; }
.hm-screens { position: relative; flex: 1; min-height: 0; }
.hm-s { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; transform: translateX(16px);
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out), visibility 0s 0.45s; }
.hm-s.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0.05s, 0.05s, 0s; }
.hm-s:not([data-s='0']).is-on > * { animation: scr-in 0.55s var(--ease-out) both; }
.hm-s.is-on > :nth-child(2) { animation-delay: 0.07s; }
.hm-s.is-on > :nth-child(3) { animation-delay: 0.14s; }
.hm-s[data-s='0'] { gap: 16px; }
.hm-s[data-s='0'] .hb-grid { flex: 1; }
.hm-s .cr-head b { font-size: 21px; }
.hm-table { flex: 1; }
.hm-tr { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--w-line); font-size: 12px; }
.hm-tr:last-child { border-bottom: 0; }
.hm-tr > * { min-width: 0; justify-self: start; }
.hm-soft { color: var(--w-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hm-num { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-who { display: flex; align-items: center; gap: 10px; }
.hm-who i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; font-style: normal; font-size: 10px; font-weight: 600; color: #fff; background: linear-gradient(140deg, var(--xk-lilac), var(--xk-violet)); }
.hm-tr:nth-child(odd) .hm-who i { color: var(--xk-navy); background: linear-gradient(140deg, var(--xk-cyan), var(--xk-light-blue)); }
.hm-who b { display: grid; font-weight: 500; white-space: nowrap; }
.hm-who small { font-weight: 400; font-size: 10px; color: var(--w-soft); }
.hm-stock { display: flex; align-items: center; gap: 10px; width: 100%; font-variant-numeric: tabular-nums; }
.hm-stock i { position: relative; flex: 1; max-width: 120px; height: 6px; border-radius: 6px; background: var(--w-line); overflow: hidden; }
.hm-stock i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, var(--xk-lilac), var(--xk-light-blue)); }
.hm-chart { flex: 1; display: flex; flex-direction: column; padding: 16px 18px 12px; }
.hm-chart__h { display: flex; justify-content: space-between; align-items: baseline; }
.hm-chart__h b { font-weight: 500; font-size: 13px; }
.hm-chart__h small { font-size: 10.5px; color: var(--w-soft); }
.hm-bars { flex: 1; display: flex; align-items: flex-end; gap: 16px; padding: 18px 6px 22px; }
.hm-bars i { position: relative; flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--xk-lilac), rgb(99 131 255 / 0.3)); transform-origin: bottom; }
.hm-bars i:last-child { background: linear-gradient(180deg, var(--xk-cyan), rgb(0 202 255 / 0.35)); }
.hm-s.is-on .hm-bars i { animation: apx-bar 0.8s var(--ease-out) both; animation-delay: calc(0.15s + var(--j) * 0.06s); transform: scaleY(0); }
.hm-bars em { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font-style: normal; font-size: 9.5px; color: var(--w-soft); }
.hb .cr-nav.is-press { transform: scale(0.95); }
.hb .cr-nav { transition: background 0.4s, box-shadow 0.4s, transform 0.2s; }
@media (prefers-reduced-motion: reduce) { .hm-s { transition: none; } .hm-s.is-on > * { animation: none !important; } }
/* v41: without Control móvil the hub home has five modules + "Nuevos módulos": three per row */
.hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ----------------------------------------------------------------- 06 · v42: the assistant on WhatsApp — text, voice notes, actions */
.aph--chat { overflow: hidden; padding: 0; display: flex; flex-direction: column; gap: 0; background: #efeae2; }
[data-theme='dark'] .aph--chat { background: #0b141a; }
.aph--chat .mf__wahead { flex: none; }
.mc-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; padding: 0 10px 8px; font-size: 11.5px; color: #111b21;
  background-image: radial-gradient(circle at 20% 30%, rgb(0 0 0 / 0.04) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgb(0 0 0 / 0.035) 0 2px, transparent 3px); background-size: 40px 40px, 56px 56px; }
[data-theme='dark'] .mc-body { color: #e9edef; background-image: radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.03) 0 2px, transparent 3px); }
/* every message grows in (height + fade), so the newest pushes the older ones up */
.mc { position: relative; flex: none; align-self: flex-start; max-width: 86%; max-height: 0; margin-top: 0; padding: 0 9px; opacity: 0; overflow: hidden;
  border-radius: 4px 12px 12px 12px; line-height: 1.38; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / 0.1); }
[data-theme='dark'] .mc { background: #202c33; }
.mc--me { align-self: flex-end; border-radius: 12px 4px 12px 12px; background: #d9fdd3; }
[data-theme='dark'] .mc--me { background: #005c4b; }
.mc b { font-weight: 600; }
.mc em { position: absolute; right: 8px; bottom: 3px; font-style: normal; font-size: 9px; opacity: 0.55; }
.mflow.is-run .mc { animation: mc-in 0.55s var(--ease-out) forwards; animation-delay: var(--t); }
@keyframes mc-in { to { max-height: 160px; opacity: 1; margin-top: 7px; padding-top: 7px; padding-bottom: 16px; } }
.mc--typing, .mc--done, .mc--audio { padding-bottom: 0; }
.mc--typing { display: flex; gap: 4px; }
.mc--typing i { width: 6px; height: 6px; margin-top: 2px; border-radius: 50%; background: #8696a0; animation: wa-dot 1s ease-in-out infinite; }
.mc--typing i:nth-child(2) { animation-delay: 0.15s; } .mc--typing i:nth-child(3) { animation-delay: 0.3s; }
.mflow.is-run .mc--typing { animation: mc-in-t 0.35s var(--ease-out) forwards, mc-out 0.35s ease forwards; animation-delay: var(--t), var(--t2); }
@keyframes mc-in-t { to { max-height: 40px; opacity: 1; margin-top: 7px; padding-top: 9px; padding-bottom: 9px; } }
@keyframes mc-out { from { max-height: 40px; opacity: 1; margin-top: 7px; padding-top: 9px; padding-bottom: 9px; } to { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } }
/* voice note */
.mc--audio { width: 86%; }
.mflow.is-run .mc--audio { animation-name: mc-in-a; }
@keyframes mc-in-a { to { max-height: 160px; opacity: 1; margin-top: 7px; padding-top: 8px; padding-bottom: 8px; } }
.vn { display: flex; align-items: center; gap: 8px; }
.vn__play { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #00a884; }
.vn__play svg { width: 12px; height: 12px; fill: currentColor; }
.vn__waves { flex: 1; display: flex; align-items: center; gap: 2px; height: 22px; }
.vn__waves i { flex: 1; height: var(--h); border-radius: 2px; background: rgb(17 27 33 / 0.28); }
[data-theme='dark'] .vn__waves i { background: rgb(233 237 239 / 0.35); }
/* the note plays: the bars light up from left to right */
.mflow.is-run .mc--audio .vn__waves i { animation: vn-play 0.1s linear forwards; animation-delay: calc(var(--t) + 0.4s + var(--j) * 0.045s); }
@keyframes vn-play { to { background: #00a884; } }
.vn__time { position: static !important; font-size: 9.5px !important; opacity: 0.6; }
.vn__text { display: block; margin-top: 5px; font-size: 10.5px; font-style: italic; opacity: 0.75; line-height: 1.35; }
/* the confirmation card of each action */
.mc--done { display: flex; align-items: center; gap: 9px; border-radius: 12px; }
.mflow.is-run .mc--done { animation-name: mc-in-d; }
@keyframes mc-in-d { to { max-height: 80px; opacity: 1; margin-top: 7px; padding-top: 9px; padding-bottom: 9px; } }
.mc--done > i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--xk-navy); background: linear-gradient(120deg, var(--xk-cyan), var(--xk-light-blue)); }
.mc--done > i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mc--done span { display: grid; gap: 1px; }
.mc--done b { font-size: 11.5px; }
.mc--done small { font-size: 10px; opacity: 0.65; }
.mc-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 22px; background: #f0f2f5; }
[data-theme='dark'] .mc-bar { background: #202c33; }
.mc-bar span { flex: 1; padding: 8px 12px; border-radius: 999px; font-size: 11px; color: #8696a0; background: #fff; }
[data-theme='dark'] .mc-bar span { background: #2a3942; }
.mc-mic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #00a884; }
.mc-mic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* the mic pulses while each voice note is being recorded */
.mflow.is-run .mc-mic { animation: mic-rec 0.8s ease-in-out 2.1s 2, mic-rec 0.8s ease-in-out 6.1s 2; }
@keyframes mic-rec { 50% { transform: scale(1.18); box-shadow: 0 0 0 6px rgb(0 168 132 / 0.25); } }
/* steps in sync with the conversation */
.mflow.is-run .mflow__s--1 { animation: mf-step 2.6s ease forwards 0.3s; }
.mflow.is-run .mflow__s--2 { animation: mf-step 2.4s ease forwards 2.9s; }
.mflow.is-run .mflow__s--3 { animation: mf-step-end 0.5s ease forwards 5.2s; }
@media (prefers-reduced-motion: reduce) {
  .mc { max-height: none; opacity: 1; margin-top: 7px; padding: 7px 9px 16px; }
  .mc--typing { display: none; }
}
/* v43: "Cómo trabajamos" and "Tecnología en acción" sit closer together */
#proceso .section.proceso { padding-bottom: clamp(40px, 4.5vw, 72px); }
.apps.section { padding-top: clamp(40px, 4.5vw, 72px); }
/* v44: the WhatsApp conversation, smoother and looping.
   Bubbles rise in with a light scale on one long, soft curve; when the talk
   ends the chat fades out and the conversation starts again (partner.js). */
.mc { transform-origin: left bottom; }
.mc--me { transform-origin: right bottom; }
.mflow.is-run .mc { animation-duration: 0.8s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes mc-in { from { max-height: 0; opacity: 0; transform: translateY(10px) scale(0.96); } to { max-height: 160px; opacity: 1; margin-top: 7px; padding-top: 7px; padding-bottom: 16px; transform: none; } }
@keyframes mc-in-a { from { max-height: 0; opacity: 0; transform: translateY(10px) scale(0.96); } to { max-height: 160px; opacity: 1; margin-top: 7px; padding-top: 8px; padding-bottom: 8px; transform: none; } }
@keyframes mc-in-d { from { max-height: 0; opacity: 0; transform: translateY(10px) scale(0.96); } to { max-height: 80px; opacity: 1; margin-top: 7px; padding-top: 9px; padding-bottom: 9px; transform: none; } }
.mflow.is-run .mc--typing { animation-duration: 0.5s, 0.45s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out; }
.mflow.is-run .mc--audio .vn__waves i { animation-duration: 0.18s; animation-timing-function: ease-out; }
.mflow.is-run .mc-mic { animation: mic-rec 0.9s ease-in-out 2.1s 2, mic-rec 0.9s ease-in-out 6.1s 2; }
.mflow.is-run .mflow__s--1 { animation: mf-step 2.6s ease-in-out forwards 0.3s; }
.mflow.is-run .mflow__s--2 { animation: mf-step 2.4s ease-in-out forwards 2.9s; }
.mflow.is-run .mflow__s--3 { animation: mf-step-end 0.6s ease-in-out forwards 5.2s; }
.mflow__s { transition: opacity 0.6s ease, background 0.6s ease; }
.mc-body { transition: opacity 0.5s ease; }
.mflow.is-fade .mc-body { opacity: 0; }
.mflow.is-fade .mflow__s { opacity: 0.45 !important; background: rgb(255 255 255 / 0.06) !important; }
/* v45: between "Cómo trabajamos" and "Tecnología en acción", the same air as above section 05 (one --section-y in total) */
#proceso .section.proceso { padding-bottom: calc(var(--section-y) * 0.5); }
.apps.section { padding-top: calc(var(--section-y) * 0.5); }
/* v46: section 05 gets 20px more air above and below */
#proceso .section.proceso { padding-top: calc(var(--section-y) + 20px); padding-bottom: calc(var(--section-y) * 0.5 + 20px); }
/* ----------------------------------------------------------------- v47: phones (≤640px) */
/* 01 · the phone sits inside the demo, under the heading (a later global top was lifting it over the title) */
@media (max-width: 640px) { .ui__phone { top: 20px; margin-top: 0; } }
/* 06 · the hub's app scales to the screen width (the grid was shrinking its box to the design width) */
.hbflow__app { width: 100%; justify-self: stretch; }
@media (max-width: 640px) {
  /* 06 · without the sidebar every app screen uses the full width */
  .px, .fx, .hb { grid-template-columns: minmax(0, 1fr); }
  .fx { height: 700px; }
  .px { height: 560px; }
  .px .cr-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .px-grid { grid-template-columns: 1fr 1fr; }
  .px-send { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) { .fx { height: 630px; } }
/* v48: on phones the example tabs wrap as pills, so all five are always visible
   (the scrolling row hid the last ones) */
@media (max-width: 640px) {
  .apx-tabs { flex-wrap: wrap; justify-content: flex-start; gap: 8px; overflow: visible; margin-inline: 0; padding: 0; border-bottom: 0; }
  .apx-tab { padding: 9px 14px 11px; border-radius: 999px; font-size: 0.9rem; box-shadow: inset 0 0 0 1px var(--hairline-strong); overflow: hidden; }
  .apx-tab span { font-size: 0.7rem; }
  .apx-tab.is-on { background: rgb(99 131 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.55); }
  .apx-tab__bar { left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; }
}
/* v49: phones see the whole hub in section 01 — the dashboard (with its CRM /
   Facturación tour) on top, the Telegram phone over its lower-right corner.
   Designed at 640×820 and scaled to the screen (data-w-sm / data-h-sm). */
@media (max-width: 640px) {
  .ui, .xp .ui, [data-theme='light'] .xp .ui { width: 640px; height: 820px; padding: 14px 14px 300px; border-radius: 34px; }
  .xp .ui::before { display: block; inset: 0 0 286px 0; right: 0; border-radius: 34px; }
  .xp .ui__app { display: grid; grid-template-columns: 72px minmax(0, 1fr); margin: 0; height: 100%; border-radius: 24px; }
  .ui__side { display: flex; gap: 12px; padding: 18px 0; }
  .ui__main { display: block; }
  .ui__screen { inset: 20px 16px 16px 18px; gap: 12px; }
  .ui__kpi { padding: 12px; }
  .ui__kpi-n, .ui__kpi-v { font-size: 22px; }
  .ui__search { display: none; }
  .ui__phone, .xp .ui__phone { left: auto; right: 10px; top: auto; bottom: 0; margin: 0; scale: 0.62; transform-origin: 100% 100%; }
  .ui__notif { left: 18px; bottom: 120px; top: auto; }
}
@media (max-width: 640px) {
  .ui, .xp .ui, [data-theme='light'] .xp .ui { height: 880px; padding-bottom: 290px; }
  .xp .ui::before { inset: 0 0 276px 0; }
}
/* v50: on phones each example shows the demo first, the text below */
@media (max-width: 640px) { .apx__scene { order: -1; } .apx { gap: 24px; } }
/* v51: the FAQ questions come in one after another (a cascade) when the list is seen */
.js .sx-faq__list .sx-faq__item { opacity: 0; transform: translateY(18px); filter: blur(4px); }
.js .sx-faq__list.is-cascade .sx-faq__item { animation: faq-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(0.1s + var(--q) * 0.11s); }
@keyframes faq-in { to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .js .sx-faq__list .sx-faq__item { opacity: 1; transform: none; filter: none; animation: none !important; } }
/* v52: hero — the "IA" of "tecnologIA" in the XK gradient (painted letter by letter by main.js) */
.h-ia { background: var(--xk-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 400; padding-inline: 0.04em; }
.h-ia .fx-char { padding-inline: 0.09em; margin-inline: -0.09em; padding-block: 0.06em; margin-block: -0.06em; }

/* ----------------------------------------------------------------- 01 · v53: the chat that drives the hub */
.hc-list { justify-content: flex-end; overflow: hidden; gap: 0 !important; }
.hc-list .tg__day { margin-bottom: auto; }
.ui__phone.tg .hc { position: relative; flex: none; align-self: flex-start; max-width: 86%; max-height: 0; margin-top: 0; padding: 0 10px; opacity: 0; overflow: hidden;
  border-radius: 14px 14px 14px 4px; font-size: 12.5px; line-height: 1.38; color: var(--tg-ink); background: var(--tg-in); box-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
  transform: translateY(8px) scale(0.97); transform-origin: left bottom;
  transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, margin 0.6s cubic-bezier(0.22, 1, 0.36, 1), padding 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.ui__phone.tg .hc--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--tg-out); transform-origin: right bottom; }
.ui__phone.tg .hc.is-on { max-height: 120px; margin-top: 6px; padding: 7px 10px 18px; opacity: 1; transform: none; }
.ui__phone.tg .hc b { color: #3390ec; font-weight: 500; }
[data-theme='dark'] .ui__phone.tg .hc b { color: #8fe9ff; }
.ui__phone.tg .hc--typing { display: flex; gap: 4px; }
.ui__phone.tg .hc--typing.is-on { padding: 10px 12px; }
.ui__phone.tg .hc--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--tg-soft); animation: wa-dot 1s ease-in-out infinite; }
.ui__phone.tg .hc--typing i:nth-child(2) { animation-delay: 0.15s; } .ui__phone.tg .hc--typing i:nth-child(3) { animation-delay: 0.3s; }
.hc-list { transition: opacity 0.5s ease; }
[data-hubchat].is-fade .hc-list { opacity: 0; }
/* Bella Spa's invoice: the reminder lands */
.ui__bswap { display: inline-grid; justify-self: start; }
.ui__bswap > * { grid-area: 1 / 1; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.ui__bswap .swap__b { opacity: 0; transform: translateY(6px); }
[data-bella].is-sent .ui__bswap .swap__a { opacity: 0; transform: translateY(-6px); }
[data-bella].is-sent .ui__bswap .swap__b { opacity: 1; transform: none; }
[data-bella] { transition: background 0.6s ease; }
[data-bella].is-sent { background: rgb(99 131 255 / 0.08); }
/* the cursor moves a little faster */
.ui__cursor { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s; }
.ui__screen { transition-duration: 0.4s, 0.55s, 0s; }
/* v54: on phones the four capabilities become compact rows — icon tile on the
   left, title and text on the right, full width (no long half-empty column) */
@media (max-width: 640px) {
  .caps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cap { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-items: start; padding: 14px 16px; border-top: 0; border-radius: 18px;
    background: linear-gradient(155deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02)); box-shadow: inset 0 0 0 1px var(--hairline); }
  [data-theme='light'] .cap { background: linear-gradient(155deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.5)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 10px 24px -18px rgb(38 44 110 / 0.3); }
  .cap::before { display: none; }
  .cap__ico { grid-row: span 2; width: 44px; height: 44px; margin: 0; padding: 11px; border-radius: 13px; background: rgb(99 131 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.22); }
  .cap__title { font-size: 1.02rem; align-self: end; }
  .caps .cap__text, .cap__text { max-width: none; font-size: 0.9rem; }
}
/* v55: the capabilities appear whole and quickly (no letter-by-letter), one after another;
   on phones the gradient line with its glow is back on top of each card */
.js .caps .cap { opacity: 0; transform: translateY(14px); }
.js .caps.is-in .cap { animation: cap-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--c) * 0.08s); }
@keyframes cap-in { to { opacity: 1; transform: none; } }
.js .caps .cap.reveal { transition: none; }
@media (max-width: 640px) {
  .cap { overflow: hidden; }
  .cap::before { display: block; left: 16px; top: 0; width: 56px; height: 2px; border-radius: 2px; }
}
@media (prefers-reduced-motion: reduce) { .js .caps .cap { opacity: 1; transform: none; animation: none !important; } }
/* v56: on phones the gradient lives softly on the card's rim (a faint 1px
   lilac → cyan edge that fades out), instead of a bright line on top */
@media (max-width: 640px) {
  .cap::before {
    display: block; inset: 0; left: 0; top: 0; width: auto; height: auto; padding: 1px; border-radius: inherit; box-shadow: none; pointer-events: none;
    background: linear-gradient(135deg, rgb(0 230 254 / 0.55), rgb(99 131 255 / 0.4) 35%, rgb(99 77 255 / 0.12) 65%, transparent 90%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .cap { box-shadow: none; }
  [data-theme='light'] .cap { box-shadow: 0 10px 24px -18px rgb(38 44 110 / 0.3); }
  [data-theme='light'] .cap::before { background: linear-gradient(135deg, rgb(0 202 255 / 0.6), rgb(99 131 255 / 0.45) 35%, rgb(99 77 255 / 0.15) 65%, transparent 90%); }
}

/* ----------------------------------------------------------------- 04 · the featured card's sweep, phones and tablets */
/* The sweep turned by animating the registered angle --pw-angle. A custom property can't run on the
   compositor, so every frame restyled and repainted the card, its 1px rim and its 24px-blurred glow:
   on a phone (CPU 4x slower) this section ran at ~27 fps, and at 60 once only that sweep stopped.
   Here the same conic gradient is drawn once, on an oversized square that turns with `rotate`
   (compositor only), clipped to exactly the same rim and glow (same mask, blur, opacity, inset).
   A conic gradient "from θ" is the same image as the one "from 0" turned by θ about its centre, so it
   looks the same. Desktop (above 1024px) keeps the original pseudo-elements and their hover. */
.pw__rim, .pw__glow { display: none; }
@media (max-width: 1024px) {
  .pw--live { animation: none; }
  .pw--live::before, .pw--live::after { content: none; }
  .pw__rim, .pw__glow { display: block; position: absolute; border-radius: inherit; pointer-events: none; overflow: hidden; }
  .pw__rim {
    inset: 0; z-index: -1; padding: 1px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .pw__glow {
    inset: -1px; z-index: -2; filter: blur(24px); opacity: 0.7;
    -webkit-mask-image: linear-gradient(to right, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 27%, transparent 44%, transparent 56%, rgb(0 0 0 / 0.22) 73%, rgb(0 0 0 / 0.6) 88%, #000), linear-gradient(to bottom, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 28%, transparent 46%, transparent 54%, rgb(0 0 0 / 0.22) 72%, rgb(0 0 0 / 0.6) 88%, #000);
    mask-image: linear-gradient(to right, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 27%, transparent 44%, transparent 56%, rgb(0 0 0 / 0.22) 73%, rgb(0 0 0 / 0.6) 88%, #000), linear-gradient(to bottom, #000, rgb(0 0 0 / 0.6) 12%, rgb(0 0 0 / 0.22) 28%, transparent 46%, transparent 54%, rgb(0 0 0 / 0.22) 72%, rgb(0 0 0 / 0.6) 88%, #000);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  [data-theme='light'] .why .pw__glow { opacity: 0.5; }
  .pw__rim i, .pw__glow i {
    position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; translate: -50% -50%;
    background: conic-gradient(from 0deg, #ffffff0a 0deg, #ffffff0a 140deg, #6383ff 190deg, #634dff 232deg, #00e6fe 274deg, #00caff 316deg, #ffffff0a 360deg);
    animation: pw-turn 9s linear infinite;
  }
  @keyframes pw-turn { to { rotate: 360deg; } }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) { .pw__rim i, .pw__glow i { animation: none; rotate: 200deg; } }

/* ----------------------------------------------------------------- 02 · phones: less empty panel under the illustration */
/* the section's own bottom padding (96px) added to the free lower part of the illustration's square
   left a tall empty block before section 03; on phones the panel now ends closer to the art */
@media (max-width: 767px) { #soluciones > .section { padding-bottom: 24px; } }

/* ----------------------------------------------------------------- 03 · the rail can be dragged or swiped (partner.js) */
/* vertical swipes stay the page's scroll; sideways ones move the rail. No text selection or image
   drag while dragging with the mouse. (Reduced motion: the rail is a still row, nothing to drag.) */
@media (prefers-reduced-motion: no-preference) {
  .rail-t { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
  .rail-t svg { -webkit-user-drag: none; }
}

/* ----------------------------------------------------------------- 04 · the featured card's inner flow, phones and tablets */
/* Same reason as the blurred pulses (styles.css): each layer turned / drifted while carrying its own
   blur, so it couldn't run on the compositor. The gradient and its blur move to ::before; the layer
   keeps its motion. (Blur is applied before the layer's own transform either way: same image.) */
@media (max-width: 1024px) {
  .pw__flow i:nth-child(1), .pw__flow i:nth-child(2) { background: none; filter: none; }
  .pw__flow i::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  .pw__flow i:nth-child(1)::before { background: conic-gradient(from 0deg, transparent 0deg 120deg, #6383ff 170deg, #634dff 215deg, #00e6fe 260deg, #00caff 300deg, transparent 350deg); filter: blur(36px); }
  .pw__flow i:nth-child(2)::before { background: radial-gradient(circle, rgb(99 77 255 / 0.9), rgb(0 202 255 / 0.25) 55%, transparent 72%); filter: blur(30px); }
}