/* =============================================================================
   XK Digital — "Ondas" (standalone study)
   Dark editorial layout, living wave light (WebGL, see main.js) and a small
   3D glass material system for icons and service illustrations.
   ========================================================================== */

@font-face { font-family: 'XK Digital'; src: url('./assets/fonts/xk-digital-300.woff2') format('woff2'); font-weight: 300; font-display: block; }
@font-face { font-family: 'XK Digital'; src: url('./assets/fonts/xk-digital-400.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'XK Digital'; src: url('./assets/fonts/xk-digital-500.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'XK Digital'; src: url('./assets/fonts/xk-digital-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* only the "|" of the copyright line uses it: never worth waiting for */

:root {
  --xk-navy: #03051c;
  --xk-lilac: #6383ff;
  --xk-violet: #634dff;
  --xk-cyan: #00e6fe; /* gradients / glows only — never solid text */
  --xk-light-blue: #00caff;
  --xk-slate: #57617c;
  --xk-white: #ffffff;

  --xk-gradient: linear-gradient(100deg, var(--xk-lilac), var(--xk-cyan));

  /* dark theme (default) — light theme overrides these at the end of the file */
  --page: #03051c;
  --surface: #080b26;
  --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.52); /* second line of headlines */
  --hairline: rgb(255 255 255 / 0.1);
  --hairline-strong: rgb(255 255 255 / 0.18);
  --text-pool: rgb(3 5 28 / 0.62); /* calms the light behind the hero type */
  --theme-ease: 0.6s var(--ease-out);

  --font: 'XK Digital', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --section-y: clamp(96px, 13vw, 176px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color var(--theme-ease), color var(--theme-ease);
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Focus: a ring for the keyboard only. A tap or a click leaves no trace — no grey/blue flash from
   the phone's browser and no outline — and the ring follows each component's own corners (the
   :where() keeps this at zero specificity, so the 6px only reaches things with no radius of their own). */
html, body, *, *::before, *::after { -webkit-tap-highlight-color: transparent; }
/* said again on everything that can be tapped: some phone browsers paint the highlight per element */
a, button, [role='button'], input, label, summary, [tabindex], [data-tilt],
.btn, .nav__brand, .nav__menu, .nav__links a, .lang__opt, .theme-toggle, .wa, .to-top,
.footer__social a, .footer__legal a, .footer__consent, .proj, .proj__frame, .proj__rail, .proj__nav, .svc__item, .consent__btn, .consent__link {
  -webkit-tap-highlight-color: rgb(0 0 0 / 0); -webkit-tap-highlight-color: transparent;
}
/* controls made of an icon or a short label: a long press must not select them (the blue selection box) */
button, .btn, .nav__menu, .lang__opt, .theme-toggle, .wa, .to-top, .footer__social a, .proj__nav, .svc__item {
  -webkit-user-select: none; user-select: none;
}
:focus:not(:focus-visible) { outline: none; }
/* Text that main.js splits into letters has no kerning between them (each letter is its own box).
   The same text, before it is split, is set without kerning too, so it wraps on the same lines:
   otherwise a paragraph could gain a line when the script runs, pushing what is under it. */
@media (prefers-reduced-motion: no-preference) {
  h1, h2, h3, p, .nav__links a, .btn__label, .svc__label, .pj-facts dt, .pj-facts dd { font-kerning: none; }
  [data-fx-skip] :is(h1, h2, h3, p) { font-kerning: auto; }
}
/* The ring is for the keyboard. Phone browsers sometimes treat a focus set by script after a tap (the
   cookie preferences, the menu) as "visible" and draw it: main.js marks the page with .kbd only while
   the keyboard is in use, and without it no ring is drawn. Without JavaScript the browser's own rule stays. */
.js:not(.kbd) :focus-visible { outline: none; }
:where(:focus-visible) { outline: 2px solid var(--xk-lilac); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--xk-navy);
  transition: top 0.2s var(--ease-out);
}
.skip:focus { top: 16px; }

/* ----------------------------------------------------------------- buttons */
/* Label + arrow chip. The chip carries the interaction: it fills with the XK
   gradient and the arrow passes through it; the whole button leans slightly
   toward the pointer (see main.js). */
.btn {
  --h: 58px;
  --chip: calc(var(--h) - 12px);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 18px;
  height: var(--h); padding: 0 6px 0 28px;
  border-radius: 999px;
  font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1.2;
  white-space: nowrap;
  translate: var(--btn-x, 0) var(--btn-y, 0);
  transition:
    translate 0.6s var(--ease-out),
    scale 0.2s var(--ease-out),
    box-shadow 0.5s var(--ease-out),
    color 0.3s, background-color 0.3s;
}
.btn:active { scale: 0.975; }
.btn__label { position: relative; }
.btn__icon {
  position: relative; overflow: hidden; flex: none;
  display: grid; place-items: center;
  width: var(--chip); height: var(--chip); border-radius: 50%;
  transition: background-color 0.4s, color 0.4s, box-shadow 0.5s var(--ease-out);
}
.btn__icon::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--xk-gradient);
  opacity: 0; scale: 0.4;
  transition: opacity 0.45s var(--ease-out), scale 0.6s var(--ease-out);
}
.btn__icon svg { position: relative; width: 16px; height: 16px; transition: translate 0.55s var(--ease-out); }
.btn:hover .btn__icon::before,
.btn:focus-visible .btn__icon::before { opacity: 1; scale: 1; }
/* the arrow simply glides forward a few pixels and settles */
.btn:hover .btn__icon svg,
.btn:focus-visible .btn__icon svg { translate: 3px 0; }

/* primary — porcelain white, navy chip */
.btn--primary {
  color: var(--xk-navy);
  background: linear-gradient(180deg, #ffffff 0%, #eef1ff 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgb(99 131 255 / 0.28),
    0 1px 2px rgb(3 5 28 / 0.5),
    0 14px 34px -14px rgb(99 131 255 / 0.55);
}
.btn--primary .btn__icon { background: var(--xk-navy); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18); }
.btn--primary:hover .btn__icon { color: var(--xk-navy); }
.btn--primary:hover {
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgb(99 131 255 / 0.28),
    0 1px 2px rgb(3 5 28 / 0.5),
    0 22px 48px -16px rgb(99 131 255 / 0.8);
}

/* glass — translucent body, hairline gradient rim, light sweep on hover */
.btn--glass {
  color: #fff;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 10px 26px -14px rgb(0 0 0 / 0.7);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  overflow: hidden;
}
.btn--glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
  background: linear-gradient(120deg, rgb(255 255 255 / 0.55), rgb(99 131 255 / 0.2) 40%, rgb(255 255 255 / 0.08) 60%, rgb(0 230 254 / 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.btn--glass::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.16) 50%, transparent 70%);
  translate: -110% 0;
}
.btn--glass:hover::after { translate: 110% 0; transition: translate 0.9s var(--ease-out); }
.btn--glass .btn__icon { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2); }
.btn--glass:hover .btn__icon { color: var(--xk-navy); }

.btn--sm { --h: 46px; gap: 12px; padding-left: 20px; font-size: 0.86rem; }
.btn--sm .btn__icon svg { width: 14px; height: 14px; }

/* ----------------------------------------------------------------- nav */
/* Fully transparent: it sits on the hero and scrolls away with it. */
.nav {
  position: absolute; z-index: 50; top: clamp(16px, 2.4vw, 32px); left: 50%;
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  translate: -50% 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__brand img { width: 112px; }
.nav__links { display: flex; gap: 8px; }
.nav__links a {
  position: relative; display: block; padding: 8px 12px;
  font-size: 0.88rem; color: var(--ink-soft);
  transition: color 0.25s;
}
.nav__links a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px;
  background: var(--xk-gradient);
  scale: 0 1; transform-origin: left;
  transition: scale 0.45s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 10px; }

/* theme toggle — glass disc; sun and moon swap with a quarter turn */
.theme-toggle {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: scale 0.2s var(--ease-out), background-color 0.3s, box-shadow 0.4s;
}
.theme-toggle:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(99 131 255 / 0.55); }
.theme-toggle:active { scale: 0.94; }
.theme-toggle svg {
  grid-area: 1 / 1; width: 20px; height: 20px;
  transition: opacity 0.4s var(--ease-out), rotate 0.6s var(--ease-out), scale 0.6s var(--ease-out);
}
/* the icon shows the theme you switch *to* */
.theme-toggle__moon { opacity: 0; rotate: -90deg; scale: 0.6; }
[data-theme='light'] .theme-toggle__sun { opacity: 0; rotate: 90deg; scale: 0.6; }
[data-theme='light'] .theme-toggle__moon { opacity: 1; rotate: 0deg; scale: 1; }
.nav__links a:hover::after { scale: 1 1; }

/* ----------------------------------------------------------------- off-screen sections */
/* main.js marks the sections that are not on screen: their animations wait, so nothing
   ticks where nobody is looking, and resume from the same point when they come back */
.is-away, .is-away *, .is-away *::before, .is-away *::after { animation-play-state: paused !important; }

/* ----------------------------------------------------------------- living waves */
.waves,
.waves-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.waves { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.has-webgl .waves.is-ready { opacity: 1; }
/* the stand-in is what paints first; when the canvas is ready the two cross-fade (main.js starts
   WebGL in an idle moment, so the first paint never waits for a shader) */
.waves-fallback { transition: opacity 1.4s var(--ease-out), visibility 0s 1.4s; }
.has-webgl .waves.is-ready + .waves-fallback { opacity: 0; visibility: hidden; }

/* CSS stand-in when WebGL is unavailable */
.waves-fallback--hero {
  background:
    radial-gradient(60% 55% at 78% 30%, rgb(99 77 255 / 0.55), transparent 70%),
    radial-gradient(40% 40% at 20% 95%, rgb(99 131 255 / 0.45), transparent 70%);
}
.waves-fallback--services {
  background: radial-gradient(70% 70% at 90% 10%, rgb(99 77 255 / 0.45), transparent 70%);
}
.waves-fallback--cta {
  background: radial-gradient(70% 70% at 50% 110%, rgb(99 131 255 / 0.5), transparent 70%);
}

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 140px var(--gutter) 120px;
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  /* soft seam into the page */
  content: ''; position: absolute; inset: auto 0 0; height: 30%; z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--page));
}
.hero .waves, .hero .waves-fallback { z-index: -2; }
.hero__content { position: relative; max-width: 1240px; text-align: center; display: grid; justify-items: center; }
.hero__content::before {
  /* quiet pool behind the type so the light never fights the headline */
  content: ''; position: absolute; inset: -12% -18%; z-index: -1;
  background: radial-gradient(closest-side, var(--text-pool), transparent);
}
.hero__title {
  font-weight: 300;
  font-size: clamp(2.6rem, 6.6vw, 6.4rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
/* one line each — "Tu negocio, visible." / "Tus clientes, más cerca." —
   the type scales with the viewport so both fit; phones may wrap (below) */
.hero__line { display: block; white-space: nowrap; }
.hero__line--dim { color: var(--ink-muted); }
.hero__sub {
  max-width: 50ch; margin-top: 36px;
  font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--ink-soft);
}
.hero__actions { margin-top: 48px; }


/* footer rule: who we are on the left, the scroll cue centred */
.hero__foot {
  position: absolute; left: 50%; bottom: clamp(20px, 3vw, 32px); translate: -50% 0;
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding-top: 16px;
  font-size: 0.88rem;
}
.hero__foot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--hairline);
}
.hero__position { color: var(--ink-soft); }

.hero__scroll {
  position: relative; display: block;
  width: 26px; height: 42px; border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  transition: border-color 0.3s;
}
.hero__scroll:hover { border-color: var(--xk-lilac); }
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px;
  border-radius: 2px; background: var(--ink);
  animation: scroll-dot 2.2s var(--ease-io) infinite;
}
@keyframes scroll-dot { 0% { opacity: 0; translate: 0 0; } 30% { opacity: 1; } 80%, 100% { opacity: 0; translate: 0 14px; } }

/* ----------------------------------------------------------------- sections */
.section {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: var(--section-y);
}
.section__head { margin-bottom: clamp(48px, 6vw, 80px); display: grid; gap: 24px; }
.section__head--split { grid-template-columns: 1fr auto; align-items: end; }
.section__head--right { justify-items: end; text-align: right; }
.section__head--center { justify-items: center; text-align: center; }

/* section kicker: an editorial index number and a plain label, no chip */
.kicker {
  display: inline-flex; align-items: baseline; gap: 14px; justify-self: start;
  font-size: 0.9rem; color: var(--ink-soft);
}
.kicker__n {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--ink);
}
.kicker__n::after { content: ''; width: 32px; height: 1px; background: var(--hairline-strong); }
.section__head--right .kicker { justify-self: end; }
.section__head--center .kicker { justify-self: center; }

.h2 {
  margin-top: 20px;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 20ch;
  text-wrap: balance;
}
.h2__soft { color: var(--ink-muted); }
.h2--center { max-width: 22ch; }

/* ----------------------------------------------------------------- 3D glass material */
.g3d {
  --rx: 14deg; --ry: -20deg;
  position: relative;
  width: 120px; height: 120px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.9s var(--ease-out);
  animation: float 7s ease-in-out infinite;
}
.g3d--xl { width: 300px; height: 300px; animation-duration: 9s; }
@keyframes float { 50% { translate: 0 -8px; } }

.gl {
  --w: 80px; --h: 80px; --x: 0px; --y: 0px; --z: 0px; --rot: 0deg; --r: 22px;
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h);
  border-radius: var(--r);
  transform: translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)) rotate(var(--rot));
  background:
    linear-gradient(150deg, rgb(255 255 255 / 0.26), rgb(255 255 255 / 0.05) 42%, rgb(99 131 255 / 0.12) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -10px 24px rgb(99 77 255 / 0.18),
    inset 0 0 18px rgb(255 255 255 / 0.05),
    0 24px 44px -18px rgb(0 0 0 / 0.75);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
}
/* iridescent rim */
.gl::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgb(255 255 255 / 0.85), rgb(99 131 255 / 0.1) 38%, rgb(99 77 255 / 0.15) 62%, rgb(0 230 254 / 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* specular sheen */
.gl::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(125deg, rgb(255 255 255 / 0.35) 0%, rgb(255 255 255 / 0) 34%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* glowing light inside the glass — refracted by the layers above it */
.core {
  position: absolute; left: 50%; top: 50%;
  width: 60px; height: 60px; border-radius: 50%;
  transform: translate(-50%, -50%) translateZ(-24px);
  background: radial-gradient(circle, var(--xk-lilac) 0%, var(--xk-violet) 45%, transparent 70%);
  filter: blur(14px);
  animation: pulse 4.5s ease-in-out infinite;
}
.core--soft { width: 90px; height: 90px; opacity: 0.8; }
.core--dot {
  width: 18px; height: 18px; filter: blur(0.5px);
  transform: translate(-50%, -50%) translateZ(54px);
  background: radial-gradient(circle at 35% 30%, #fff 0%, #bfe9ff 25%, var(--xk-light-blue) 55%, var(--xk-violet) 100%);
  box-shadow: 0 0 18px 4px rgb(0 230 254 / 0.55), 0 0 40px 8px rgb(99 77 255 / 0.5);
}
.core--xl {
  width: 240px; height: 240px; filter: blur(40px);
  transform: translate(-50%, -50%) translateZ(-80px);
  background: radial-gradient(circle, rgb(99 131 255 / 0.95) 0%, rgb(99 77 255 / 0.7) 40%, rgb(0 230 254 / 0.25) 60%, transparent 72%);
}
@keyframes pulse {
  0%, 100% { scale: 1; opacity: 0.85; }
  50% { scale: 1.18; opacity: 1; }
}
/* the dot's glow breathes between a tight halo and a wide one. The two are layers that
   cross-fade (opacity runs on the compositor); animating box-shadow repainted every frame */
.core--dot { animation: none; box-shadow: none; }
.core--dot::before, .core--dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  animation: pulse-dot-out 4.5s ease-in-out infinite;
}
.core--dot::before { box-shadow: 0 0 18px 4px rgb(0 230 254 / 0.55), 0 0 40px 8px rgb(99 77 255 / 0.5); }
.core--dot::after { box-shadow: 0 0 26px 8px rgb(0 230 254 / 0.7), 0 0 60px 14px rgb(99 77 255 / 0.55); opacity: 0; animation-name: pulse-dot-in; }
@keyframes pulse-dot-out { 50% { opacity: 0; } }
@keyframes pulse-dot-in { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .core--dot::before, .core--dot::after { animation: none; } }

/* shared inner glass details */
.gl i, .gl b { position: absolute; display: block; border-radius: 999px; }

/* --- target */
.gl--r1 { --w: 112px; --h: 112px; --r: 50%; --z: 0px; }
.gl--r2 { --w: 76px; --h: 76px; --r: 50%; --z: 20px; }
.gl--r3 { --w: 42px; --h: 42px; --r: 50%; --z: 38px; }

/* --- chat */
.gl--b1 { --w: 92px; --h: 66px; --x: -14px; --y: -18px; --r: 24px 24px 24px 6px; }
.gl--b2 { --w: 88px; --h: 60px; --x: 18px; --y: 20px; --z: 34px; --r: 22px 22px 6px 22px; }
.gl--b2 i { top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: #fff; box-shadow: 0 0 10px rgb(99 131 255 / 0.9); }
.gl--b2 i:nth-child(1) { left: 22px; animation: typing 1.6s ease-in-out infinite; }
.gl--b2 i:nth-child(2) { left: 40px; animation: typing 1.6s 0.2s ease-in-out infinite; }
.gl--b2 i:nth-child(3) { left: 58px; animation: typing 1.6s 0.4s ease-in-out infinite; }
@keyframes typing { 30% { translate: 0 -4px; opacity: 1; } 0%, 60%, 100% { translate: 0 0; opacity: 0.55; } }

/* --- bolt */
.gl--tile { --w: 100px; --h: 100px; --r: 28px; }
.gl--bolt {
  --w: 52px; --h: 80px; --z: 36px;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  filter: drop-shadow(0 0 10px rgb(99 131 255 / 0.9)) drop-shadow(0 0 22px rgb(0 230 254 / 0.35));
}
.gl--bolt::before {
  inset: 0; border-radius: 0; mix-blend-mode: normal;
  clip-path: polygon(62% 0, 8% 58%, 44% 58%, 34% 100%, 92% 38%, 55% 38%);
  background: linear-gradient(165deg, #fff 0%, #cdd7ff 30%, var(--xk-lilac) 62%, var(--xk-cyan) 100%);
}
.gl--bolt::after { display: none; }

/* --- gem */
.gl--gem-back { --w: 84px; --h: 84px; --rot: 45deg; --r: 20px; }
.gl--gem {
  --w: 50px; --h: 50px; --rot: 45deg; --r: 12px; --z: 30px;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.5), rgb(99 131 255 / 0.35) 50%, rgb(0 230 254 / 0.3));
}

/* ----------------------------------------------------------------- servicios */
.servicios {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: clamp(24px, 3vw, 40px);
  margin-inline: clamp(0px, 1.2vw, 16px);
  background: var(--surface);
  transition: background-color var(--theme-ease);
}
.servicios .waves, .servicios .waves-fallback { z-index: -1; }
.h2--right { max-width: 22ch; }

/* left: the icon and its caption, centred against the right: heading + list */
.svc {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.svc__stage { display: grid; gap: 24px; justify-items: center; }
.svc__caption { width: min(100%, 340px); }
.svc__side .section__head { margin-bottom: clamp(32px, 4vw, 56px); }
.svc__scene {
  position: relative; aspect-ratio: 1; max-width: 400px; width: 100%;
  justify-self: center;
  perspective: 900px;
}
.svc__scene .g3d--xl { scale: 1.08; }
/* the light behind each icon: a flat layer under the scene, so a fade can
   never flatten it on top of the glass */
.svc__glow {
  position: absolute; left: 50%; top: 58%; width: 270px; height: 270px; translate: -50% -50%;
  border-radius: 50%; filter: blur(42px); pointer-events: none;
  background: radial-gradient(circle, rgb(99 131 255 / 0.9) 0%, rgb(99 77 255 / 0.6) 40%, rgb(0 230 254 / 0.22) 62%, transparent 74%);
  animation: pulse 6s ease-in-out infinite;
}
[data-theme='light'] .svc__glow { opacity: 0.8; }
.svc__art {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  scale: 0.9;
  transition: opacity 0.6s var(--ease-out), scale 0.8s var(--ease-out), visibility 0s 0.6s;
}
.svc__art.is-active { opacity: 1; visibility: visible; scale: 1; transition-delay: 0.1s, 0.1s, 0s; }
.svc__art .g3d { position: relative; }
/* no backdrop-filter on the service panes: while a scene fades the browser re-roots it and the glass flashes solid lilac */
.svc__art .g3d--pro .gl { backdrop-filter: none; -webkit-backdrop-filter: none; }
.svc__name { font-weight: 500; font-size: 1.35rem; letter-spacing: -0.02em; }
.svc__desc { margin-top: 6px; color: var(--ink-soft); font-size: 0.95rem; max-width: 38ch; min-height: 3em; }

.svc__list { border-top: 1px solid var(--hairline-strong); }
.svc__list li { border-bottom: 1px solid var(--hairline-strong); }
.svc__item {
  position: relative;
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(18px, 2.2vw, 26px) 4px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 400; letter-spacing: -0.02em;
  color: var(--ink-dim);
  transition: color 0.3s;
}
.svc__label { transition: translate 0.5s var(--ease-out); }
.svc__item:hover { color: var(--ink-soft); }
.svc__item.is-active { color: var(--ink); }
.svc__item.is-active .svc__label { translate: 14px 0; }
.svc__item::after {
  /* auto-advance progress */
  content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--xk-gradient); transform-origin: left; transform: scaleX(0);
}
.svc__item.is-active::after { animation: progress var(--cycle, 5s) linear forwards; }
.svc.is-paused .svc__item.is-active::after { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }
.svc__dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: #fff; opacity: 0; scale: 0.3;
  box-shadow: 0 0 12px 2px rgb(99 131 255 / 0.9), 0 0 26px 6px rgb(0 230 254 / 0.35);
  transition: opacity 0.4s, scale 0.5s var(--ease-out);
}
.svc__item.is-active .svc__dot { opacity: 1; scale: 1; }

/* --- ads */
.gl--phone { --w: 150px; --h: 280px; --r: 32px; }
.ph__notch { left: 50%; top: 12px; width: 44px; height: 10px; margin-left: -22px; background: rgb(3 5 28 / 0.6); }
.ph__media {
  left: 12px; right: 12px; top: 34px; height: 118px; border-radius: 18px !important;
  background:
    radial-gradient(80% 80% at 70% 20%, rgb(0 230 254 / 0.55), transparent 60%),
    linear-gradient(160deg, rgb(99 131 255 / 0.85), rgb(99 77 255 / 0.55));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
}
.ph__line { left: 14px; right: 30px; top: 166px; height: 7px; background: rgb(255 255 255 / 0.45); }
.ph__line--short { top: 182px; right: 64px; background: rgb(255 255 255 / 0.22); }
.ph__cta { left: 14px; right: 14px; bottom: 18px; height: 30px; background: #fff; box-shadow: 0 6px 20px -4px rgb(99 131 255 / 0.8); }
.gl--chip { --r: 22px; }
.gl--chip-a { --w: 74px; --h: 74px; --x: -112px; --y: -66px; --z: 70px; }
.gl--chip-b { --w: 96px; --h: 74px; --x: 112px; --y: 70px; --z: 90px; }
.chip__heart {
  left: 50%; top: 50%; width: 30px; height: 28px; margin: -14px 0 0 -15px; border-radius: 0 !important;
  background: linear-gradient(160deg, #fff, var(--xk-lilac) 60%, var(--xk-cyan));
  clip-path: path('M15 27 C6 20 0 15 0 8.5 C0 3.8 3.6 0 8 0 C11 0 13.4 1.6 15 4 C16.6 1.6 19 0 22 0 C26.4 0 30 3.8 30 8.5 C30 15 24 20 15 27 Z');
  filter: drop-shadow(0 0 8px rgb(99 131 255 / 0.9));
  animation: beat 2.4s ease-in-out infinite;
}
@keyframes beat { 0%, 60%, 100% { scale: 1; } 10% { scale: 1.16; } 22% { scale: 1.04; } 32% { scale: 1.12; } }
.chip__bars { inset: 18px 22px; border-radius: 0 !important; display: flex !important; align-items: flex-end; gap: 7px; }
.chip__bars b { position: static !important; flex: 1; border-radius: 4px !important; background: linear-gradient(to top, var(--xk-lilac), #fff); transform-origin: bottom; animation: grow 3s var(--ease-io) infinite; }
.chip__bars b:nth-child(1) { height: 40%; }
.chip__bars b:nth-child(2) { height: 70%; animation-delay: 0.2s; }
.chip__bars b:nth-child(3) { height: 100%; animation-delay: 0.4s; background: linear-gradient(to top, var(--xk-lilac), var(--xk-cyan)); }
@keyframes grow { 0%, 100% { scale: 1 1; } 50% { scale: 1 0.75; } }

/* --- web */
.gl--window-back { --w: 250px; --h: 170px; --x: 26px; --y: -34px; --z: -40px; --r: 20px; opacity: 0.7; }
.gl--window { --w: 270px; --h: 188px; --z: 20px; --r: 22px; }
.win__dots { left: 16px; top: 14px; display: flex !important; gap: 5px; }
.win__dots b { position: static !important; width: 7px; height: 7px; background: rgb(255 255 255 / 0.7); }
.win__img {
  left: 16px; top: 36px; width: 104px; height: 82px; border-radius: 14px !important;
  background: radial-gradient(70% 70% at 70% 30%, rgb(0 230 254 / 0.5), transparent 60%), linear-gradient(160deg, var(--xk-lilac), var(--xk-violet));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 0 24px rgb(99 131 255 / 0.4);
}
.win__bar { left: 134px; right: 18px; top: 50px; height: 9px; background: rgb(255 255 255 / 0.35); }
.win__bar--accent { top: 38px; right: 40px; background: var(--xk-gradient); box-shadow: 0 0 12px rgb(99 131 255 / 0.8); }
.win__bar:not(.win__bar--accent) { top: 64px; }
.win__bar--short { top: 80px !important; right: 60px; background: rgb(255 255 255 / 0.18); }
.win__tiles { left: 16px; right: 16px; bottom: 16px; height: 46px; border-radius: 0 !important; display: flex !important; gap: 10px; }
.win__tiles b { position: static !important; flex: 1; border-radius: 10px !important; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); }

/* --- landing */
.gl--page { --w: 190px; --h: 262px; --r: 24px; }
.pg__title { left: 20px; right: 34px; top: 30px; height: 14px; background: rgb(255 255 255 / 0.75); }
.pg__title--short { top: 52px; right: 70px; background: rgb(255 255 255 / 0.3); }
.pg__field { left: 20px; right: 20px; height: 32px; border-radius: 10px !important; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.pg__field:nth-of-type(3) { top: 92px; }
.pg__field:nth-of-type(4) { top: 134px; }
.pg__btn { left: 20px; right: 20px; top: 186px; height: 38px; background: var(--xk-gradient); box-shadow: 0 0 24px rgb(99 131 255 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.5); animation: glowbtn 3s ease-in-out infinite; }
@keyframes glowbtn { 50% { box-shadow: 0 0 40px rgb(0 230 254 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.5); } }
.gl--cursor {
  --w: 54px; --h: 66px; --x: 72px; --y: 84px; --z: 80px; --r: 0;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.5)) drop-shadow(0 0 10px rgb(99 131 255 / 0.6));
  animation: click 3s ease-in-out infinite;
}
.gl--cursor::before {
  mix-blend-mode: normal; border-radius: 0;
  clip-path: polygon(0 0, 100% 62%, 56% 66%, 76% 100%, 60% 100%, 40% 70%, 0 92%);
  background: linear-gradient(150deg, #fff 10%, #dfe6ff 45%, rgb(99 131 255 / 0.9));
}
.gl--cursor::after { display: none; }
@keyframes click { 0%, 100% { translate: 0 0; } 45% { translate: -8px -10px; } 55% { translate: -8px -10px; scale: 0.92; } 62% { scale: 1; } }

/* --- presence */
.gl--orbit {
  --w: 270px; --h: 270px; --r: 50%; --rot: 0deg;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 0 30px rgb(99 131 255 / 0.15);
  transform: translate(-50%, -50%) rotateX(52deg);
  animation: spin 22s linear infinite;
}
.gl--orbit::before {
  /* satellite */
  inset: auto; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: #fff; mix-blend-mode: normal;
  box-shadow: 0 0 14px 4px rgb(0 230 254 / 0.7);
}
.gl--orbit-b { --w: 200px; --h: 200px; animation-name: spin-b; animation-duration: 15s; }
@keyframes spin { from { transform: translate(-50%, -50%) rotateX(52deg) rotateZ(0deg); } to { transform: translate(-50%, -50%) rotateX(52deg) rotateZ(360deg); } }
@keyframes spin-b { from { transform: translate(-50%, -50%) rotateY(-24deg) rotateX(52deg) rotateZ(360deg); } to { transform: translate(-50%, -50%) rotateY(-24deg) rotateX(52deg) rotateZ(0deg); } }
.gl--pin { --w: 110px; --h: 110px; --r: 50% 50% 50% 8%; --rot: -45deg; --y: -30px; --z: 40px; }
.gl--pin i {
  left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  background: radial-gradient(circle at 35% 30%, #fff, var(--xk-light-blue) 45%, var(--xk-violet));
  box-shadow: 0 0 22px rgb(0 230 254 / 0.7), inset 0 -4px 8px rgb(3 5 28 / 0.3);
}

/* --- growth */
.gl--base { --w: 270px; --h: 200px; --z: -30px; --r: 26px; opacity: 0.75; }
.gl--col { --w: 46px; --r: 14px; --z: 30px; }
.gl--c1 { --h: 70px; --x: -76px; --y: 55px; }
.gl--c2 { --h: 116px; --x: -10px; --y: 32px; --z: 42px; }
.gl--c3 {
  --h: 168px; --x: 56px; --y: 6px; --z: 54px;
  background: linear-gradient(to top, rgb(99 131 255 / 0.25), rgb(0 230 254 / 0.35));
}
.gl--arrow {
  --w: 200px; --h: 150px; --x: -6px; --y: -10px; --z: 90px; --r: 0;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  filter: drop-shadow(0 0 10px rgb(99 131 255 / 0.9)) drop-shadow(0 0 24px rgb(0 230 254 / 0.4));
}
.gl--arrow::before {
  mix-blend-mode: normal; border-radius: 0;
  background: linear-gradient(60deg, rgb(255 255 255 / 0.2), #fff 60%, var(--xk-cyan));
  clip-path: polygon(0 88%, 36% 54%, 54% 70%, 86% 22%, 76% 16%, 100% 0, 98% 28%, 90% 24%, 55% 80%, 37% 64%, 4% 94%);
}
.gl--arrow::after { display: none; }

/* ----------------------------------------------------------------- proyectos */
/* A rail of large glass frames that bleeds to the right edge. Each frame is a
   pane of the same clear glass as the cards around a "screen" where the project image goes (for now, a drawn sketch of the
   kind of work). The light inside follows the pointer. */
.proyectos { position: relative; padding-bottom: var(--section-y); }
.proyectos__inner { padding-bottom: 0; }
/* right after "Cómo trabajamos": one section gap between them, not two */
.proceso + .proyectos .proyectos__inner { padding-top: 0; }
.proj__controls { display: flex; gap: 10px; }
.proj__nav {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, 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.12);
  transition: box-shadow 0.4s var(--ease-out), opacity 0.3s, scale 0.2s var(--ease-out);
}
.proj__nav svg { width: 18px; height: 18px; }
.proj__nav:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), inset 0 0 0 1px rgb(99 131 255 / 0.7), 0 0 24px -6px rgb(99 131 255 / 0.7); }
.proj__nav:active { scale: 0.94; }
.proj__nav:disabled { opacity: 0.35; cursor: default; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
[data-theme='light'] .proj__nav {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.45));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(3 5 28 / 0.1), 0 10px 26px -14px rgb(38 44 110 / 0.35);
}
[data-theme='light'] .proj__nav:hover { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(99 131 255 / 0.6), 0 10px 26px -14px rgb(38 44 110 / 0.35); }

.proj__rail {
  --inset: max(var(--gutter), (100% - var(--max)) / 2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--inset);
  padding: 8px var(--inset) 72px;
  scrollbar-width: none;
}
.proj__rail::-webkit-scrollbar { display: none; }
.proj__rail:focus-visible { outline: 2px solid var(--xk-lilac); outline-offset: -2px; border-radius: 24px; }
.proj__track { display: flex; gap: clamp(20px, 3vw, 40px); width: max-content; }
.proj { width: min(720px, 78vw); scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; gap: 28px; } /* the frame keeps its own height; a shorter caption leaves the room below it */
/* the projects rise into place one after another, and sink back when the
   visitor scrolls up past them (main.js toggles .is-in on the track) */
.js .proj {
  opacity: 0; translate: 0 90px;
  transition: opacity 0.9s var(--ease-out), translate 1.2s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .proj__track.is-in .proj { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .proj { opacity: 1; translate: none; } }

.proj__frame {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px; padding: 14px;
  background: linear-gradient(155deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04) 48%, rgb(255 255 255 / 0.07));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.1),
    0 50px 90px -48px rgb(99 77 255 / 0.5), 0 30px 60px -36px rgb(0 0 0 / 0.85);
}
.proj__frame.is-link { cursor: pointer; } /* main.js: the picture opens the project, like "Ver proyecto" */
[data-theme='light'] .proj__frame {
  background: linear-gradient(155deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.5) 50%, rgb(255 255 255 / 0.7));
  box-shadow:
    inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / 0.9),
    0 50px 90px -48px rgb(99 77 255 / 0.35), 0 26px 54px -36px rgb(38 44 110 / 0.3);
}
/* a pool of XK light inside the glass that glides toward the pointer */
.proj__light {
  position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%;
  left: calc(var(--mx, 78%) - 35%); top: calc(var(--my, 80%) - 35%);
  background: radial-gradient(circle, rgb(99 131 255 / 0.55), rgb(99 77 255 / 0.25) 45%, transparent 70%);
  filter: blur(40px); opacity: 0.6; pointer-events: none;
  transition: left 1.1s var(--ease-out), top 1.1s var(--ease-out), opacity 0.8s var(--ease-out);
}
.proj:hover .proj__light { opacity: 1; }

/* the category sits on the image as a small glass pill */
/* the category sits on the site capture, which can be dark or white: a dark
   navy glass pill with white type and a soft shadow reads on both, in either theme */
.proj__tag {
  position: absolute; z-index: 1; left: 16px; top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.01em; color: #fff;
  /* frosted glass: a navy tint deep enough for white type, a strong blur of
     the capture behind it, a light sheen on top and a bright rim */
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.03) 55%, rgb(255 255 255 / 0.06)),
    rgb(12 14 52 / 0.62);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4), inset 0 -1px 0 rgb(255 255 255 / 0.08),
    inset 0 0 0 1px rgb(255 255 255 / 0.18),
    0 8px 24px -8px rgb(3 5 28 / 0.55);
  text-shadow: 0 1px 6px rgb(3 5 28 / 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
}
.proj__tag::before {
  content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--xk-lilac); box-shadow: 0 0 8px var(--xk-lilac);
}

/* the screen: where the project image goes */
.proj__screen {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px;
  background:
    radial-gradient(70% 90% at 85% 100%, rgb(0 202 255 / 0.35), transparent 60%),
    radial-gradient(80% 90% at 10% 0%, rgb(99 77 255 / 0.55), transparent 60%),
    linear-gradient(160deg, #1a1650, #0b0e30);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
[data-theme='light'] .proj__screen {
  background:
    radial-gradient(70% 90% at 85% 100%, rgb(0 202 255 / 0.35), transparent 60%),
    radial-gradient(80% 90% at 10% 0%, rgb(99 77 255 / 0.4), transparent 60%),
    linear-gradient(160deg, #e3e6ff, #f3f5ff);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9);
}
.proj:nth-child(2) .proj__screen { background-position: 0 0; filter: hue-rotate(-12deg); }
.proj:nth-child(3) .proj__screen { filter: hue-rotate(14deg); }
/* the real site, full page, gliding down and back up inside the screen */
.proj__site { position: absolute; inset: 0; overflow: hidden; container-type: size; border-radius: inherit; }
.proj__page {
  position: relative; width: 100%;
  animation: site-scroll var(--dur, 30s) var(--ease-io) infinite alternate;
}
.proj__page img { position: absolute; left: 0; width: 100%; display: block; }
@keyframes site-scroll {
  0%, 6% { translate: 0 0; }
  94%, 100% { translate: 0 calc(-100% + 100cqh); }
}
/* it waits until the screen is first seen (main.js adds .is-playing), and holds while hovered */
.proj__page { animation-play-state: paused; }
.proj__site.is-playing .proj__page { animation-play-state: running; }
.proj:hover .proj__site.is-playing .proj__page, .pj-frame:hover .proj__site.is-playing .proj__page { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .proj__page { animation: none; } }
/* home thumbnails with a mouse: the page rests at the top, scrolls down while
   hovered and glides back up on leave (touch screens keep the autoplay above) */
@media (hover: hover) and (pointer: fine) {
  .proj .proj__page {
    animation: none; translate: 0 0;
    transition: translate max(2.4s, calc(var(--dur, 30s) * 0.1)) cubic-bezier(0.55, 0, 0.3, 1);
  }
  .proj:hover .proj__page, .proj:focus-within .proj__page {
    translate: 0 calc(-100% + 100cqh);
    transition: translate calc(var(--dur, 30s) * 0.22) cubic-bezier(0.45, 0, 0.35, 1);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .proj:hover .proj__page, .proj:focus-within .proj__page { translate: 0 0; }
}
.proj__art { position: absolute; inset: 0; display: grid; place-items: center; transition: scale 1.4s var(--ease-out); }
.proj:hover .proj__art { scale: 1.035; }
/* narrow screens: the sketch drops a little so the category tag never covers it */
@media (max-width: 560px) { .proj__art { inset: 14% 0 0; } .proj__tag { font-size: 0.66rem; padding: 4px 10px; left: 10px; top: 10px; max-width: calc(100% - 20px); border-radius: 14px; line-height: 1.3; } } /* a long category may take two lines on a phone */

/* sketches: small panes of glass */
.pa {
  position: absolute; display: block; border-radius: 16px;
  background: linear-gradient(155deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.08) 45%, rgb(99 131 255 / 0.14));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.18), inset 0 -12px 24px rgb(99 77 255 / 0.2), 0 30px 50px -24px rgb(3 5 28 / 0.7);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
}
[data-theme='light'] .pa {
  background: linear-gradient(155deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.45) 45%, rgb(99 131 255 / 0.16));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / 0.8), inset 0 -12px 24px rgb(99 77 255 / 0.12), 0 30px 50px -24px rgb(38 44 110 / 0.35);
}
.pa i, .pa b { position: absolute; display: block; border-radius: 999px; }
.pa__line { left: 8%; right: 30%; height: 7px; background: rgb(255 255 255 / 0.45); }
.pa__line--short { right: 50%; background: rgb(255 255 255 / 0.25); }
[data-theme='light'] .pa__line { background: rgb(3 5 28 / 0.14); }
[data-theme='light'] .pa__line--short { background: rgb(3 5 28 / 0.08); }
.pa__hero, .pa__img { border-radius: 10px !important; background: radial-gradient(70% 80% at 75% 25%, rgb(0 230 254 / 0.6), transparent 60%), linear-gradient(150deg, var(--xk-lilac), var(--xk-violet)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4); }
.pa__cta, .pa__pill { background: linear-gradient(120deg, var(--xk-violet), var(--xk-lilac)); box-shadow: 0 6px 18px -6px rgb(99 131 255 / 0.9); }

/* the (fictional) business name, set into each sketch */
.pa .pa__brand {
  position: absolute; display: block; border-radius: 0;
  font-size: clamp(0.62rem, 1.1vw, 0.9rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1;
  font-style: normal; color: #fff; white-space: nowrap; background: none;
}
.pa__hero .pa__brand { left: 7%; top: 14%; font-size: clamp(0.8rem, 1.6vw, 1.3rem); font-weight: 300; text-shadow: 0 2px 12px rgb(3 5 28 / 0.35); }
.pa__brand--phone { left: 8%; top: 5%; }
.pa__brand--post { left: 23%; top: 6.5%; font-size: clamp(0.55rem, 0.9vw, 0.75rem); }
.pa__brand--profile { left: 0; right: 0; top: 34%; text-align: center; }
.pa--phone .pa__line { top: 13%; }
.pa--phone .pa__line--short { top: 19%; }
[data-theme='light'] .pa .pa__brand:not(.pa__hero .pa__brand) { color: var(--xk-navy); }

/* project sketches: a green hero for JPG Landwork, a brand chip for Ausentismo360 */
.pa__hero.pa__hero--green { background: radial-gradient(70% 80% at 75% 25%, rgb(196 230 90 / 0.55), transparent 60%), linear-gradient(150deg, #5d9b2f, #1f3b5c); }
.pa--chip-id { width: 17%; aspect-ratio: 1; left: 68%; top: 60%; border-radius: 22px; display: grid; place-items: center; }
.pa .pa__mark {
  position: static; border-radius: 0; font-style: normal; font-weight: 500; letter-spacing: -0.04em;
  font-size: clamp(0.8rem, 1.7vw, 1.3rem); color: #fff; background: none;
  text-shadow: 0 0 14px rgb(99 131 255 / 0.9);
}
[data-theme='light'] .pa .pa__mark { color: var(--xk-violet); text-shadow: none; }

/* web: a browser window */
.pa--win { width: 62%; height: 70%; }
.pa--win .pa__hero { left: 5%; right: 5%; top: 7%; height: 44%; }
.pa--win .pa__line { top: 60%; }
.pa--win .pa__line--short { top: 67%; }
.pa__tiles { left: 5%; right: 5%; bottom: 7%; height: 15%; display: flex !important; gap: 4%; border-radius: 0 !important; }
.pa__tiles b { position: static !important; flex: 1; border-radius: 8px; background: rgb(255 255 255 / 0.14); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); }
[data-theme='light'] .pa__tiles b { background: rgb(255 255 255 / 0.6); }

/* landing: a phone with a short form */
.pa--phone { width: 26%; aspect-ratio: 9 / 17; border-radius: 22px; }
.pa--phone .pa__line { top: 12%; }
.pa--phone .pa__line--short { top: 19%; }
.pa__field { left: 8%; right: 8%; height: 11%; border-radius: 8px !important; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); }
.pa__field:nth-of-type(3) { top: 32%; }
.pa__field:nth-of-type(4) { top: 47%; }
.pa__cta { left: 8%; right: 8%; top: 66%; height: 12%; }
.pa--chip { width: 13%; aspect-ratio: 1; left: 60%; top: 58%; border-radius: 16px; }
.pa__check { left: 50%; top: 50%; width: 42%; height: 42%; translate: -50% -50%; background: var(--xk-lilac); box-shadow: 0 0 14px rgb(99 131 255 / 0.9); }

/* ads: a feed post */
.pa--post { width: 34%; aspect-ratio: 4 / 5; }
.pa__avatar { left: 7%; top: 5%; width: 12%; aspect-ratio: 1; background: linear-gradient(135deg, var(--xk-lilac), var(--xk-cyan)); }
.pa--post .pa__img { left: 7%; right: 7%; top: 18%; height: 48%; }
.pa--post .pa__line { top: 71%; }
.pa--post .pa__line--short { top: 78%; }
.pa__pill { left: 7%; width: 40%; bottom: 6%; height: 9%; }
.pa--chip-b { left: 61%; top: 22%; width: 15%; }
.pa__bars { inset: 24% 20%; display: flex !important; align-items: flex-end; gap: 12%; border-radius: 0 !important; }
.pa__bars b { position: static !important; flex: 1; border-radius: 3px; background: linear-gradient(to top, var(--xk-lilac), #fff); }
.pa__bars b:nth-child(1) { height: 40%; } .pa__bars b:nth-child(2) { height: 70%; } .pa__bars b:nth-child(3) { height: 100%; }

/* presence: a profile with a grid of posts */
.pa--profile { width: 40%; height: 76%; }
.pa__ring { left: 50%; top: 9%; width: 20%; aspect-ratio: 1; translate: -50% 0; background: linear-gradient(135deg, var(--xk-violet), var(--xk-lilac) 50%, var(--xk-cyan)); box-shadow: 0 0 0 3px rgb(255 255 255 / 0.25), 0 0 20px rgb(99 131 255 / 0.7); }
.pa--profile .pa__line { top: 36%; left: 22%; right: 22%; }
.pa--profile .pa__line--short { top: 43%; left: 34%; right: 34%; }
.pa__grid { left: 8%; right: 8%; bottom: 7%; top: 52%; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 5%; border-radius: 0 !important; }
.pa__grid b { position: static !important; border-radius: 6px; background: linear-gradient(150deg, rgb(99 131 255 / 0.55), rgb(99 77 255 / 0.3)); }
.pa__grid b:nth-child(2n) { background: linear-gradient(150deg, rgb(0 202 255 / 0.45), rgb(99 131 255 / 0.3)); }

.proj__meta { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 22px; padding-inline: 6px; }
.proj__n { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); padding-top: 8px; }
.proj__title { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.1; }
.proj__title .t-soft { color: var(--ink-muted); }
.proj__text { margin-top: 8px; max-width: 42ch; font-size: 0.95rem; color: var(--ink-soft); }

.proj__foot { padding-block: 0; }
.proj__progress { position: relative; height: 1px; background: var(--hairline-strong); overflow: hidden; }
.proj__progress span {
  position: absolute; inset: 0 auto 0 0; width: var(--pw, 25%);
  translate: var(--px, 0) 0; background: var(--xk-gradient);
  transition: translate 0.4s var(--ease-out), width 0.4s var(--ease-out);
}

/* phones, swiping: the project coming in rises, the one going out sinks away (main.js sets .is-here) */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .js .proj { translate: 0 64px; transition: opacity 0.5s var(--ease-out), translate 0.7s var(--ease-out); transition-delay: 0s; }
  .js .proj__track.is-in .proj:not(.is-here) { opacity: 0; translate: 0 64px; }
}
@media (max-width: 860px) {
  .proj { width: 86vw; }
  .proj__meta { grid-template-columns: auto 1fr; }
  .proj__meta .btn { grid-column: 2; justify-self: start; }
}

/* ----------------------------------------------------------------- proceso */
.steps {
  --line-y: 30px;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
}
.steps::before,
.steps::after {
  content: ''; position: absolute; left: var(--line-x0, 0); right: var(--line-x1, 0); top: var(--line-y); height: 1px;
  z-index: -1; /* behind the steps, so the circles cover the line and its light */
}
.steps::before { background: var(--hairline-strong); }
.steps::after {
  /* a pulse of light travelling along the process (moved by main.js) */
  background: linear-gradient(90deg, transparent, var(--xk-lilac) 45%, #fff 50%, var(--xk-cyan) 55%, transparent);
  background-size: var(--band-size, 30%) 100%; background-repeat: no-repeat;
  background-position: var(--band, -100%) 0;
  filter: drop-shadow(0 0 6px rgb(99 131 255 / 0.9));
}
.step { position: relative; padding-top: 0; }
/* desktop: each step centred under its circle, so the line meets 01 and 04 at their centres */
@media (min-width: 1025px) {
  .step { display: grid; justify-items: center; text-align: center; }
  .step__text { margin-inline: auto; }
}
.step__n {
  --lit: 0;
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--page);
  border: 1px solid color-mix(in oklab, var(--xk-lilac) calc(var(--lit) * 100%), var(--hairline-strong));
  font-size: 0.85rem; font-weight: 500;
  color: color-mix(in oklab, var(--ink) calc(var(--lit) * 100%), var(--ink-soft));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    inset 0 0 calc(var(--lit) * 20px) rgb(0 230 254 / calc(var(--lit) * 0.35)),
    0 0 calc(var(--lit) * 30px) calc(var(--lit) * 2px) rgb(99 131 255 / calc(var(--lit) * 0.6));
  scale: calc(1 + var(--lit) * 0.06);
}
/* an iridescent rim that brightens with the light */
.step__n::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from 200deg, var(--xk-cyan), var(--xk-lilac), var(--xk-violet), #fff, var(--xk-cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--lit);
}
/* a soft halo breathes out as the light arrives — a blurred glow, no hard line */
.step__n::after {
  content: ''; position: absolute; inset: -6px; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgb(99 131 255 / 0) 42%, rgb(99 131 255 / 0.45) 62%, rgb(0 230 254 / 0.18) 74%, transparent 78%);
  filter: blur(6px);
  opacity: 0;
}
.step__n.is-hit::after { animation: step-ripple 1.6s var(--ease-out); }
@keyframes step-ripple { from { opacity: 0.85; scale: 0.9; } to { opacity: 0; scale: 1.9; } }
.step__title { margin-top: 28px; font-weight: 500; font-size: 1.2rem; letter-spacing: -0.02em; }
.step__text { margin-top: 8px; font-size: 0.93rem; color: var(--ink-soft); max-width: 28ch; }

/* ----------------------------------------------------------------- cta */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: clamp(0px, 1.2vw, 16px);
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--surface);
  min-height: min(80vh, 720px);
  display: grid; place-items: center;
  padding: var(--section-y) var(--gutter);
  text-align: center;
  transition: background-color var(--theme-ease);
}
.cta .waves, .cta .waves-fallback { z-index: -1; }
.cta__inner { display: grid; justify-items: center; gap: 28px; max-width: 900px; }
.cta__title {
  font-weight: 300;
  font-size: clamp(2.4rem, 5.6vw, 5.2rem);
  line-height: 1.02; letter-spacing: -0.045em;
  text-wrap: balance;
}
.cta__accent {
  display: block;
  background: var(--xk-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 400;
}
.cta__sub { max-width: 44ch; color: var(--ink-soft); }
/* the email, a quieter second way to get in touch under the main button */

/* ----------------------------------------------------------------- footer */
.footer {
  width: min(var(--max), 100% - 2 * var(--gutter)); margin: 0 auto;
  padding: 64px 0 48px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
  color: var(--ink-dim); font-size: 0.85rem;
}
.footer__logo { width: 96px; }
/* social links: small glass circles, lit lilac on hover; they push the copyright to the right */
.footer__social { display: flex; gap: 10px; margin-left: auto; }
.footer__social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-soft);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.1);
  transition: color 0.3s, box-shadow 0.4s var(--ease-out), translate 0.4s var(--ease-out);
}
.footer__social a:hover, .footer__social a:focus-visible {
  color: var(--ink); translate: 0 -2px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(99 131 255 / 0.8), 0 0 20px -6px rgb(99 131 255 / 0.9);
}
.footer__social svg { width: 18px; height: 18px; }
[data-theme='light'] .footer__social a { background: rgb(255 255 255 / 0.7); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(3 5 28 / 0.08); }
[data-theme='light'] .footer__social a:hover { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(99 131 255 / 0.7), 0 0 18px -6px rgb(99 131 255 / 0.7); }
.footer__small { margin-left: 24px; color: var(--ink-soft); }
.footer__small b { font-weight: 600; color: var(--ink); margin: 0 4px; }
/* underlined: a link inside a sentence must not rely on colour alone to be told apart */
.footer__small a { color: var(--xk-lilac); text-decoration: underline; text-underline-offset: 3px; }
/* light theme: the footer's grey line was 3.7:1 on the page; a little more ink reads (5:1) */
[data-theme='light'] .footer > p:not(.footer__small) { color: rgb(3 5 28 / 0.6); }
.footer__small a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------- light theme */
/* Not an inversion: a pale lilac-white page with navy type, where the satin
   light turns into saturated XK colour (see main.js) instead of glow. */
[data-theme='light'] {
  --page: #f5f6ff;
  --surface: #eaedff;
  --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);
  --text-pool: rgb(245 246 255 / 0.66);
}

/* buttons: primary becomes deep navy, glass becomes frosted white */
[data-theme='light'] .btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #1a1f4d 0%, #03051c 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    0 1px 2px rgb(3 5 28 / 0.3),
    0 14px 34px -14px rgb(99 131 255 / 0.75);
}
[data-theme='light'] .btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    0 1px 2px rgb(3 5 28 / 0.3),
    0 22px 48px -16px rgb(99 131 255 / 0.9);
}
[data-theme='light'] .btn--primary .btn__icon { background: #fff; color: var(--xk-navy); box-shadow: none; }
[data-theme='light'] .btn--glass,
[data-theme='light'] .theme-toggle {
  color: var(--ink);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.4));
  box-shadow: inset 0 1px 0 #fff, 0 10px 26px -14px rgb(38 44 110 / 0.35);
}
[data-theme='light'] .theme-toggle { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(3 5 28 / 0.1), 0 10px 26px -14px rgb(38 44 110 / 0.35); }
[data-theme='light'] .theme-toggle:hover { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(99 131 255 / 0.6), 0 10px 26px -14px rgb(38 44 110 / 0.35); }
[data-theme='light'] .btn--glass::before {
  background: linear-gradient(120deg, rgb(3 5 28 / 0.14), rgb(99 131 255 / 0.4) 40%, rgb(3 5 28 / 0.06) 60%, rgb(0 202 255 / 0.55));
}
[data-theme='light'] .btn--glass::after { background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.8) 50%, transparent 70%); }
[data-theme='light'] .btn--glass .btn__icon { background: rgb(3 5 28 / 0.06); box-shadow: inset 0 1px 0 #fff; }

/* 3D glass on a pale page: frosted, lilac-tinted, with a cool drop shadow */
[data-theme='light'] .gl {
  background: linear-gradient(150deg, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.32) 42%, rgb(99 131 255 / 0.24) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -10px 24px rgb(99 77 255 / 0.16),
    0 24px 44px -18px rgb(38 44 110 / 0.38);
}
[data-theme='light'] .gl::after {
  background: linear-gradient(140deg, #fff, rgb(99 131 255 / 0.35) 38%, rgb(99 77 255 / 0.3) 62%, rgb(0 202 255 / 0.85));
}
[data-theme='light'] .gl--bolt,
[data-theme='light'] .gl--cursor,
[data-theme='light'] .gl--arrow,
[data-theme='light'] .gl--orbit { background: none; }
[data-theme='light'] .gl--bolt,
[data-theme='light'] .gl--cursor,
[data-theme='light'] .gl--arrow { box-shadow: none; }
[data-theme='light'] .gl--orbit { box-shadow: inset 0 0 0 1px rgb(3 5 28 / 0.16), 0 0 30px rgb(99 131 255 / 0.2); }
/* white inner details would vanish on frosted glass — give them ink */
[data-theme='light'] .gl--b2 i { background: var(--xk-lilac); }
[data-theme='light'] .ph__line,
[data-theme='light'] .win__bar:not(.win__bar--accent),
[data-theme='light'] .pg__title,
[data-theme='light'] .brand__line,
[data-theme='light'] .win__dots b { background: rgb(38 44 110 / 0.38); }
[data-theme='light'] .ph__line--short,
[data-theme='light'] .brand__line--short,
[data-theme='light'] .win__bar--short,
[data-theme='light'] .pg__title--short { background: rgb(38 44 110 / 0.2); }
[data-theme='light'] .ph__cta { background: var(--xk-gradient); }
[data-theme='light'] .pg__field { background: rgb(255 255 255 / 0.5); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.35); }
[data-theme='light'] .win__tiles b { background: rgb(99 131 255 / 0.16); box-shadow: inset 0 1px 0 #fff; }

/* small details */
[data-theme='light'] .svc__dot { background: var(--xk-lilac); }
[data-theme='light'] .step__n {
  background: #fff;
  color: color-mix(in oklab, var(--xk-violet) calc(var(--lit) * 100%), var(--ink-soft));
  box-shadow:
    0 8px 20px -12px rgb(38 44 110 / 0.35),
    inset 0 0 calc(var(--lit) * 18px) rgb(99 131 255 / calc(var(--lit) * 0.25)),
    0 0 calc(var(--lit) * 28px) calc(var(--lit) * 2px) rgb(99 77 255 / calc(var(--lit) * 0.45));
}
[data-theme='light'] .steps::after {
  background-image: linear-gradient(90deg, transparent, var(--xk-violet) 45%, var(--xk-lilac) 50%, var(--xk-light-blue) 55%, transparent);
}
/* the brand gradient's cyan end is too pale for type on white — deepen it */
[data-theme='light'] .cta__accent {
  background-image: linear-gradient(100deg, var(--xk-violet), var(--xk-lilac) 55%, var(--xk-light-blue));
}

/* =============================================================================
   APPROVED IDENTITY (from "identidad xk digital para web")
   h1 D · primary button K · secondary button D · card H · icons I
   ========================================================================== */

/* the beam angle is set on the element by main.js; it must reach ::before */
@property --spin { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

/* ----------------------------------------------------------------- h1 keyword */
/* "visible." in the headline ink, Light like the rest of the h1 */
.t-grad { font-style: normal; font-weight: 300; color: var(--ink); }

/* ----------------------------------------------------------------- primary button K */
/* A soft glow circles the button; on hover a thin 1px beam fades in on the
   edge, riding the same angle. Buttons here are their own stacking context
   (they lean toward the pointer with translate), so the body is painted by
   ::after, which comes after the glow and covers it. */
.btn--line {
  --h: 54px;
  --beam-base: transparent;
  --beam-1: rgb(99 77 255 / 0.35); --beam-2: rgb(99 131 255 / 0.75);
  --beam-3: rgb(0 230 254 / 0.95); --beam-head: rgb(255 255 255 / 0.95);
  --body: linear-gradient(180deg, #11163f, #070921);
  padding: 0 8px 0 28px; gap: 12px; color: #fff; font-weight: 500; letter-spacing: -0.005em;
  background: none;
  box-shadow: 0 12px 30px -16px rgb(99 131 255 / 0.5);
}
.btn--line::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--body); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.btn--line::before,
.btn__glow {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--spin),
    var(--beam-base) 0 52%, rgb(99 77 255 / 0) 52%,
    var(--beam-1) 68%, var(--beam-2) 80%, var(--beam-3) 88.5%, var(--beam-head) 89.5%,
    var(--beam-base) 90.5% 100%);
}
.btn--line::before {
  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;
  opacity: 0; transition: opacity 0.5s var(--ease-out);
}
.btn--line:hover::before, .btn--line:focus-visible::before { opacity: 1; }
.btn__glow {
  z-index: -1; inset: -2px; filter: blur(10px); opacity: 0.8;
  transition: opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}
.btn--line:hover .btn__glow, .btn--line:focus-visible .btn__glow { opacity: 0.95; filter: blur(12px); }
.btn--line .btn__icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}
.btn--line .btn__icon::before { display: none; }
.btn--line .btn__icon svg { width: 15px; height: 15px; }
.btn--line .btn__icon path { stroke-width: 1.4; }
[data-theme='light'] .btn--line {
  /* on white the bright head would vanish — deeper stops, violet head */
  --beam-1: rgb(99 131 255 / 0.4); --beam-2: rgb(0 202 255 / 0.9);
  --beam-3: rgb(99 131 255 / 1); --beam-head: rgb(99 77 255 / 1);
  --body: linear-gradient(180deg, #fff, #f3f5ff);
  color: var(--xk-navy);
  box-shadow: 0 12px 30px -16px rgb(99 131 255 / 0.45);
}
[data-theme='light'] .btn--line::after { box-shadow: inset 0 1px 0 #fff; }
[data-theme='light'] .btn--line .btn__glow { opacity: 0.6; }
[data-theme='light'] .btn--line .btn__icon { background: rgb(3 5 28 / 0.03); box-shadow: inset 0 0 0 1px rgb(3 5 28 / 0.14); }

/* ----------------------------------------------------------------- secondary button D */
/* Small frosted pill with an outward arrow; on hover the arrow turns and a
   thin XK beam circles the edge (no glow). */
.btn--frost {
  --h: 44px; padding: 0 18px; gap: 8px; color: var(--ink); overflow: visible;
  background: rgb(255 255 255 / 0.08);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.btn--frost:hover { background: rgb(255 255 255 / 0.16); }
.btn--frost .btn__icon { width: auto; height: auto; background: none; box-shadow: none; overflow: visible; }
.btn--frost .btn__icon::before { display: none; }
.btn--frost .btn__icon svg { rotate: -45deg; transition: rotate 0.45s var(--ease-out), translate 0.45s var(--ease-out); }
.btn--frost:hover .btn__icon svg, .btn--frost:focus-visible .btn__icon svg { rotate: 0deg; translate: 2px 0; }
.btn--frost::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none;
  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%);
  -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.5s var(--ease-out);
}
.btn--frost:hover::before, .btn--frost:focus-visible::before { opacity: 1; }
[data-theme='light'] .btn--frost { background: rgb(255 255 255 / 0.6); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(3 5 28 / 0.1); }
[data-theme='light'] .btn--frost:hover { background: rgb(255 255 255 / 0.9); }
[data-theme='light'] .btn--frost::before {
  background: conic-gradient(from var(--spin),
    transparent 0 52%, rgb(99 131 255 / 0.4) 68%, rgb(0 202 255 / 0.9) 80%,
    rgb(99 131 255 / 1) 88.5%, rgb(99 77 255 / 1) 89.5%, transparent 90.5% 100%);
}

/* ----------------------------------------------------------------- card H */
/* Square, see-through (no fill, no border), soft drop shadow; approved type
   (h2 A title with a soft ending, paragraph A); secondary button D; a glass
   icon (I) breaking out of the bottom-right corner. */
.pillars--h {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px;
  padding: 0 52px 64px 0;
  margin-top: clamp(24px, 4vw, 64px); /* extra air under the section head */
}
/* every card takes the height of the tallest, in every row */
.pillars--h { align-items: stretch; grid-auto-rows: 1fr; }
/* a card hidden on purpose (kept in the markup) leaves three: no empty column */
.card-h[hidden] { display: none; }
/* (desktop only — smaller screens stack the cards, see responsive) */
@media (min-width: 1025px) {
  .pillars--h:has(> .card-h[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card-h {
  position: relative; min-height: 300px; /* near-square; grows with its content, all cards equal */
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 14px;
  padding: 30px 26px 28px; border-radius: 40px;
  background: transparent;
  /* 3) on navy a black shadow disappears — a deep violet one reads as depth */
  box-shadow: 0 46px 80px -38px rgb(99 77 255 / 0.42), 0 30px 60px -34px rgb(0 0 0 / 0.9);
}
[data-theme='light'] .card-h { box-shadow: 0 40px 80px -40px rgb(38 44 110 / 0.45); }
.card-h__title { font-size: clamp(1.4rem, 1.9vw, 1.7rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.08; }
.card-h__title .t-soft { color: var(--ink-muted); }
.card-h .card__text { max-width: 30ch; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }
.card-h .btn { margin-top: auto; } /* same baseline for every card */
.card-h__art {
  position: absolute; right: -52px; bottom: -52px; width: 140px; height: 140px;
  display: grid; place-items: center; perspective: 700px; pointer-events: none;
}

/* Card Q (approved in the identity manual): clear glass panes. The still
   cards carry only a whisper of their tone; the featured one is a window onto
   the hero's satin (WebGL, see main.js), leaning lilac in the light theme. */
.card-h--glass {
  --pool-1: var(--xk-lilac); --pool-2: var(--xk-violet); --tint: 99 77 255;
  isolation: isolate;
  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='light'] .card-h--glass {
  background: linear-gradient(155deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.5) 50%, rgb(255 255 255 / 0.7));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 40px 80px -40px rgb(var(--tint) / 0.2), 0 24px 50px -34px rgb(38 44 110 / 0.28);
}
.card-h--tone-violet { --pool-1: var(--xk-lilac); --pool-2: var(--xk-violet); --tint: 99 77 255; }
.card-h--tone-blue { --pool-1: var(--xk-lilac); --pool-2: var(--xk-light-blue); --tint: 0 202 255; }
.card-h__bg {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.card-h__bg::after {
  /* frost: a specular bloom in the top-left corner, no edge line */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(90% 60% at 0% 0%, rgb(255 255 255 / 0.2), transparent 60%);
}
.card-h__bg i { position: absolute; border-radius: 50%; filter: blur(46px); }
.card-h__bg i {
  transition: left 1.1s var(--ease-out), top 1.1s var(--ease-out), translate 1.4s var(--ease-out), scale 1.4s var(--ease-out), opacity 0.8s var(--ease-out);
}
.card-h__bg i:nth-child(1) { width: 60%; height: 60%; left: -20%; top: -24%; background: var(--pool-1); opacity: 0.3; }
.card-h__bg i:nth-child(2) { width: 72%; height: 72%; left: 50%; top: 52%; background: var(--pool-2); opacity: 0.45; }
[data-theme='light'] .card-h__bg i { opacity: 0.24; }

/* hover: the lights come alive — the big pool glides toward the pointer
   (main.js sets --mx / --my on the card), the small one drifts in and swells */
.card-h--glass:hover .card-h__bg i:nth-child(2) {
  left: calc(var(--mx, 64%) - 36%); top: calc(var(--my, 64%) - 36%);
  opacity: 0.7;
}
.card-h--glass:hover .card-h__bg i:nth-child(1) { translate: 28% 34%; scale: 1.25; opacity: 0.5; }
[data-theme='light'] .card-h--glass:hover .card-h__bg i { opacity: 0.4; }
/* the moving card lights up on hover inside its shader (main.js, uBoost) */

/* the moving card: the same clear glass as its neighbours (its background is
   always see-through), with pools of XK light travelling along its edges.
   The pools are large, very soft and overlap, and their colours add up where
   they meet, so they read as one light flowing — not as separate balls. */
.card-h--live { --pool-1: var(--xk-violet); --pool-2: var(--xk-lilac); --tint: 99 131 255; }
.card-h--live .card-h__bg i { width: 96%; height: 78%; filter: blur(58px); mix-blend-mode: screen; }
[data-theme='light'] .card-h--live .card-h__bg i { mix-blend-mode: normal; }
.card-h--live .card-h__bg i:nth-child(1) { opacity: 0.5; animation: live-a 9s ease-in-out infinite; }
.card-h--live .card-h__bg i:nth-child(2) { opacity: 0.55; animation: live-b 11s ease-in-out infinite; }
.card-h--live .card-h__bg i:nth-child(3) {
  width: 70%; height: 90%;
  background: var(--xk-light-blue); opacity: 0.32; animation: live-c 8s ease-in-out infinite;
}
[data-theme='light'] .card-h--live .card-h__bg i { opacity: 0.3; }
[data-theme='light'] .card-h--live .card-h__bg i:nth-child(3) { opacity: 0.22; }
.card-h--live:hover .card-h__bg i { opacity: 0.7; }
/* centres run along the edges and each pool swells and thins as it goes, so the light keeps
   changing shape. Each pool is parked at one corner (left/top: -48% / -39% puts the centre of a
   96% × 78% pool on the left / top edge) and travels from there with translate, which the
   compositor animates; moving left/top laid the card out again on every frame. The distances
   are the same path in the pool's own size: 100% of the card is 104.167% of a 96% pool across
   and 128.205% of a 78% pool down (142.857% / 111.111% for the third, 70% × 90%). */
@media (prefers-reduced-motion: no-preference) {
  .card-h--live .card-h__bg i:nth-child(1), .card-h--live .card-h__bg i:nth-child(2) { left: -48%; top: -39%; }
  .card-h--live .card-h__bg i:nth-child(3) { left: -35%; top: -45%; }
  .card-h--live .card-h__bg i { transition: left 1.4s var(--ease-out), top 1.4s var(--ease-out), opacity 0.8s var(--ease-out); }
  /* hover, as before: the first pool leans in by 28% × 34% of its size (now through left/top, since
     translate carries the path); the second keeps to its path */
  .card-h--live:hover .card-h__bg i:nth-child(1) { left: calc(-48% + 26.88%); top: calc(-39% + 26.52%); }
  .card-h--live:hover .card-h__bg i:nth-child(2) { left: -48%; top: -39%; }
}
@keyframes live-a {
  0%, 100% { translate: 0 0; scale: 1 0.9; }
  25% { translate: 104.167% 0; scale: 0.8 1.15; }
  50% { translate: 104.167% 128.205%; scale: 1.15 0.85; }
  75% { translate: 0 128.205%; scale: 0.9 1.1; }
}
@keyframes live-b {
  0%, 100% { translate: 104.167% 128.205%; scale: 0.9 1.1; }
  30% { translate: 0 114.103%; scale: 1.2 0.9; }
  55% { translate: 8.333% 0; scale: 0.85 1.1; }
  80% { translate: 104.167% 17.949%; scale: 1.1 0.9; }
}
@keyframes live-c {
  0%, 100% { translate: 142.857% 38.889%; scale: 1; }
  25% { translate: 78.571% 111.111%; scale: 1.2; }
  50% { translate: 0 55.556%; scale: 0.9; }
  75% { translate: 71.429% 0; scale: 1.15; }
}
@media (prefers-reduced-motion: reduce) { .card-h--live .card-h__bg i { animation: none; } }

/* featured: the moving satin over the same lit glass as its neighbours — a
   lit top edge, and a lilac/violet glow under the satin so it is never dimmer */
.card-h--satin {
  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(99 131 255 / 0.6), 0 30px 60px -34px rgb(0 0 0 / 0.85);
}
.card-h--satin .card-h__bg {
  background:
    radial-gradient(75% 70% at 85% 95%, rgb(99 77 255 / 0.5), transparent 70%),
    radial-gradient(60% 55% at 10% 0%, rgb(99 131 255 / 0.28), transparent 70%);
}
[data-theme='light'] .card-h--satin .card-h__bg { background: none; }
[data-theme='light'] .card-h--satin { box-shadow: 0 40px 80px -40px rgb(99 131 255 / 0.35), 0 24px 50px -34px rgb(38 44 110 / 0.3); }
.card-h__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.card-h__canvas.is-ready { opacity: 1; }
/* the satin fades out toward the top, so the upper part of the card is the
   same clear glass as its neighbours and the effect rises from the bottom */
.card-h__canvas {
  -webkit-mask: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.5) 18%, #000 40%);
          mask: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.5) 18%, #000 40%);
}
/* light theme: no white glass on top — the card is a pale lilac pane and the
   satin never fully fades out, so the top stays tinted */
[data-theme='light'] .card-h--satin { background: linear-gradient(180deg, rgb(99 131 255 / 0.07), rgb(99 131 255 / 0.16)); }
[data-theme='light'] .card-h--satin .card-h__bg::after { background: none; }
[data-theme='light'] .card-h__canvas {
  -webkit-mask: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.5) 18%, #000 40%);
          mask: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.5) 18%, #000 40%);
}

/* no sheen on the moving card: just the clean rim */
.card-h--satin .card-h__bg::after {
  background: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
[data-theme='light'] .card-h--satin .card-h__bg::after {
  background:
    radial-gradient(90% 60% at 0% 0%, rgb(255 255 255 / 0.55), transparent 60%),
    linear-gradient(155deg, rgb(255 255 255 / 0.3), transparent 50%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.85);
}

/* ----------------------------------------------------------------- icons I */
/* The glass icons, polished: crisper specular highlight, thinner iridescent
   rim, a visible edge (two rims stacked behind each piece, added in main.js)
   and a richer inner light. */
.g3d--pro { --rx: 16deg; --ry: -24deg; transition: transform 1.1s var(--ease-out); }
.g3d--pro .gl {
  background: linear-gradient(155deg, rgb(255 255 255 / 0.34), rgb(255 255 255 / 0.07) 38%, rgb(99 131 255 / 0.1) 70%, rgb(0 230 254 / 0.14));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.8), inset 1px 0 0 rgb(255 255 255 / 0.25),
    inset 0 -1px 0 rgb(0 230 254 / 0.5), inset -1px 0 0 rgb(99 77 255 / 0.4),
    inset 0 -14px 26px rgb(99 77 255 / 0.22), inset 0 10px 20px rgb(255 255 255 / 0.08),
    0 18px 34px -16px rgb(3 5 28 / 0.9);
  backdrop-filter: blur(10px) saturate(170%); -webkit-backdrop-filter: blur(10px) saturate(170%);
}
.g3d--pro .gl::before {
  mix-blend-mode: screen;
  background: radial-gradient(55% 32% at 26% 10%, rgb(255 255 255 / 0.6), transparent 70%), linear-gradient(125deg, rgb(255 255 255 / 0.22), transparent 36%);
}
.g3d--pro .gl::after {
  background: linear-gradient(140deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.1) 28%, rgb(99 131 255 / 0.3) 55%, rgb(0 230 254 / 0.85) 84%, rgb(255 255 255 / 0.6));
}
.g3d--pro .gl.gl--edge {
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  transform: translate(-50%, -50%) translate3d(var(--x), var(--y), calc(var(--z) - var(--d))) rotate(var(--rot));
}
.g3d--pro .gl.gl--edge::before { display: none; }
.g3d--pro .gl.gl--edge::after { background: linear-gradient(140deg, rgb(0 230 254 / 0.55), rgb(99 131 255 / 0.45) 50%, rgb(99 77 255 / 0.55)); opacity: 0.8; }
.g3d--pro .core {
  background: radial-gradient(circle, rgb(0 230 254 / 0.85) 0%, var(--xk-lilac) 32%, var(--xk-violet) 56%, transparent 72%);
  filter: blur(16px); animation-duration: 6s;
}
.g3d--pro .core--dot::before, .g3d--pro .core--dot::after { animation-duration: 6s; }
.g3d--pro .core--dot {
  filter: blur(0.3px);
  background: radial-gradient(circle at 35% 28%, #fff 0%, #d8f6ff 22%, var(--xk-cyan) 48%, var(--xk-lilac) 72%, var(--xk-violet) 100%);
}
/* the bolt is a clip-path shape, not a glass pane — keep it bare, just lit */
.g3d--pro .gl.gl--bolt,
[data-theme='light'] .g3d--pro .gl.gl--bolt {
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  filter: drop-shadow(0 0 10px rgb(99 131 255 / 0.9)) drop-shadow(0 0 22px rgb(0 230 254 / 0.4));
}
.g3d--pro .gl.gl--bolt::before {
  mix-blend-mode: normal;
  background: linear-gradient(165deg, #fff 0%, #d4f7ff 24%, var(--xk-cyan) 48%, var(--xk-lilac) 74%, var(--xk-violet) 100%);
}
.g3d--pro .gl.gl--orbit,
[data-theme='light'] .g3d--pro .gl.gl--orbit {
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), 0 0 30px rgb(99 131 255 / 0.18);
}
.g3d--pro .gl.gl--cursor, .g3d--pro .gl.gl--arrow,
[data-theme='light'] .g3d--pro .gl.gl--cursor, [data-theme='light'] .g3d--pro .gl.gl--arrow {
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* the polished specular must not replace the drawn shapes (cursor, arrow, satellite) */
.g3d--pro .gl.gl--cursor::before { mix-blend-mode: normal; background: linear-gradient(150deg, #fff 10%, #dfe6ff 45%, rgb(99 131 255 / 0.9)); }
.g3d--pro .gl.gl--arrow::before { mix-blend-mode: normal; background: linear-gradient(60deg, rgb(255 255 255 / 0.35), #fff 60%, var(--xk-cyan)); }
.g3d--pro .gl.gl--orbit::before { mix-blend-mode: normal; background: #fff; }
.g3d--pro .gl.gl--c3 { background: linear-gradient(to top, rgb(99 131 255 / 0.3), rgb(0 230 254 / 0.4)); }
[data-theme='light'] .g3d--pro .gl {
  background: linear-gradient(155deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.35) 40%, rgb(99 131 255 / 0.2) 72%, rgb(0 202 255 / 0.22));
  box-shadow:
    inset 0 1px 0 #fff, inset 1px 0 0 rgb(255 255 255 / 0.8),
    inset 0 -1px 0 rgb(0 202 255 / 0.55), inset -1px 0 0 rgb(99 77 255 / 0.35),
    inset 0 -14px 26px rgb(99 77 255 / 0.14),
    0 18px 34px -16px rgb(38 44 110 / 0.45);
}

/* ----------------------------------------------------------------- letter reveal */
/* main.js splits text into words and letters; each letter is animated alone.
   Words stay unbreakable so wrapping matches the original text. */
.fx-word { display: inline-block; white-space: nowrap; }
.fx-char { display: inline-block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ----------------------------------------------------------------- reveal */
.js .reveal {
  opacity: 0; translate: 0 24px;
  transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* ----------------------------------------------------------------- services: new scenes */
/* App a medida: a device with an app grid and a floating settings toggle */
/* --- branding: an identity sheet (mark + wordmark) with its type and its palette */
.gl--sheet-back { --w: 236px; --h: 150px; --x: 28px; --y: -36px; --z: -40px; --r: 20px; opacity: 0.7; }
.gl--sheet { --w: 256px; --h: 166px; --z: 20px; --r: 22px; }
.brand__mark {
  left: 28px; top: 50%; width: 62px; height: 62px; margin-top: -31px;
  background: conic-gradient(from 210deg, var(--xk-lilac), var(--xk-cyan), #fff, var(--xk-violet), var(--xk-lilac));
  -webkit-mask: radial-gradient(circle, transparent 15px, #000 16px); mask: radial-gradient(circle, transparent 15px, #000 16px);
  filter: drop-shadow(0 0 10px rgb(99 131 255 / 0.8));
  animation: brand-turn 14s linear infinite;
}
@keyframes brand-turn { to { rotate: 1turn; } }
.brand__line { left: 110px; right: 28px; top: 50%; height: 12px; margin-top: -15px; background: rgb(255 255 255 / 0.5); }
.brand__line--short { right: 78px; height: 8px; margin-top: 7px; background: rgb(255 255 255 / 0.24); }
.gl--chip-type { --w: 78px; --h: 74px; --x: -112px; --y: -72px; --z: 76px; }
.brand__type { inset: 0; border-radius: 0 !important; display: grid !important; place-items: center; }
.brand__type::before {
  content: 'Aa'; font-size: 1.7rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(160deg, #fff, var(--xk-lilac) 70%, var(--xk-light-blue)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gl--chip-brand { --w: 122px; --h: 60px; --x: 100px; --y: 80px; --z: 90px; }
.brand__swatches { inset: 0; border-radius: 0 !important; display: flex !important; align-items: center; justify-content: center; }
.brand__swatches b { position: static !important; width: 30px; height: 30px; margin: 0 -4px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 4px 10px -4px rgb(3 5 28 / 0.7); }
.brand__swatches b:nth-child(1) { background: var(--xk-violet); }
.brand__swatches b:nth-child(2) { background: var(--xk-lilac); }
.brand__swatches b:nth-child(3) { background: var(--xk-cyan); }
/* --- app */
.gl--device { --w: 160px; --h: 272px; --r: 34px; --x: -22px; }
.app__bar { left: 18px; right: 70px; top: 24px; height: 8px; background: rgb(255 255 255 / 0.5); }
.app__grid {
  left: 18px; right: 18px; top: 50px; bottom: 74px; border-radius: 0 !important;
  display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.app__grid b {
  position: static !important; border-radius: 16px !important;
  background: radial-gradient(80% 80% at 30% 20%, rgb(255 255 255 / 0.45), transparent 60%), linear-gradient(150deg, var(--xk-lilac), var(--xk-violet));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 6px 14px -8px rgb(99 77 255 / 0.9);
}
.app__grid b:nth-child(3n + 2) { background: radial-gradient(80% 80% at 30% 20%, rgb(255 255 255 / 0.45), transparent 60%), linear-gradient(150deg, var(--xk-light-blue), var(--xk-lilac)); }
.app__grid b:nth-child(4) { opacity: 0.55; }
.app__dock { left: 18px; right: 18px; bottom: 18px; height: 38px; border-radius: 14px !important; background: var(--xk-gradient); box-shadow: 0 0 22px rgb(99 131 255 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.5); }
.gl--chip-app { --w: 104px; --h: 66px; --x: 98px; --y: -64px; --z: 84px; --r: 22px; }
.app__toggle { left: 20px; right: 20px; top: 50%; height: 28px; margin-top: -14px; background: linear-gradient(90deg, rgb(99 131 255 / 0.5), rgb(0 202 255 / 0.6)); box-shadow: inset 0 1px 2px rgb(3 5 28 / 0.3); }
.app__toggle::after {
  content: ''; position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px rgb(0 230 254 / 0.8);
  animation: toggle 3.2s var(--ease-io) infinite;
}
@keyframes toggle { 0%, 40% { translate: 0 0; } 50%, 90% { translate: -34px 0; } 100% { translate: 0 0; } }

/* Automatizaciones: three glass nodes linked by lines that carry light */
.gl--node { --w: 100px; --h: 100px; --r: 28px; }
.gl--node-a { --x: -108px; --y: -88px; --z: 20px; }
.gl--node-b { --z: 44px; }
.gl--node-c { --x: 108px; --y: 88px; --z: 68px; }
.g3d--pro .gl.gl--wire,
[data-theme='light'] .g3d--pro .gl.gl--wire {
  --w: 140px; --h: 4px; --r: 4px; --rot: 39.2deg;
  background: linear-gradient(90deg, rgb(99 131 255 / 0.7), rgb(0 230 254 / 0.85));
  box-shadow: 0 0 14px rgb(99 131 255 / 0.9), 0 0 4px rgb(0 230 254 / 0.8);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.gl--wire-a { --x: -54px; --y: -44px; --z: 32px; }
.gl--wire-b { --x: 54px; --y: 44px; --z: 56px; }
.g3d--pro .gl.gl--wire::before {
  /* the light travelling along the line */
  mix-blend-mode: normal; border-radius: inherit;
  background: linear-gradient(90deg, transparent, #fff, transparent) no-repeat;
  background-size: 40% 100%;
  animation: wire-flow 2.4s linear infinite;
}
.gl--wire-b::before { animation-delay: 1.2s !important; }
.g3d--pro .gl.gl--wire::after { display: none; }
@keyframes wire-flow { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.node__bolt {
  left: 50%; top: 50%; width: 30px; height: 44px; margin: -22px 0 0 -15px; border-radius: 0 !important;
  clip-path: polygon(62% 0, 8% 58%, 44% 58%, 34% 100%, 92% 38%, 55% 38%);
  background: linear-gradient(165deg, #fff 0%, #d4f7ff 30%, var(--xk-cyan) 60%, var(--xk-lilac) 100%);
  filter: drop-shadow(0 0 8px rgb(0 230 254 / 0.8));
}
.node__chat {
  left: 50%; top: 50%; width: 50px; height: 36px; margin: -18px 0 0 -25px; border-radius: 12px 12px 12px 4px !important;
  background: linear-gradient(150deg, #fff, #dfe6ff);
  box-shadow: 0 0 16px rgb(99 131 255 / 0.8);
}
.node__chat::before, .node__chat::after, .node__chat b {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--xk-lilac); animation: typing 1.6s ease-in-out infinite;
}
.node__chat::before { left: 10px; }
.node__chat b { left: 21.5px; animation-delay: 0.2s; }
.node__chat::after { left: 33px; animation-delay: 0.4s; }

.node__check {
  left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 0 !important;
  clip-path: polygon(12% 52%, 28% 36%, 42% 50%, 72% 18%, 88% 34%, 42% 82%);
  background: linear-gradient(150deg, #fff, var(--xk-lilac) 70%, var(--xk-violet));
  filter: drop-shadow(0 0 8px rgb(99 131 255 / 0.9));
}
@media (prefers-reduced-motion: reduce) {
  .g3d--pro .gl.gl--wire::before, .node__chat::before, .node__chat::after, .node__chat b, .app__toggle::after, .brand__mark { animation: none; }
}

/* ----------------------------------------------------------------- service pages */
/* One page per service, in the home page's language: the hero carries the
   service's 3D glass scene above the title, "Qué incluye" uses the glass
   cards, the process reuses the steps, and "Otros servicios" is a list of
   links in the style of the home services list. */
.sp-hero { min-height: 92svh; }
.sp-hero__content { max-width: 1000px; }
.sp-hero__art {
  position: relative; width: 250px; aspect-ratio: 1; margin-bottom: 8px;
  display: grid; place-items: center; perspective: 900px;
}
.sp-hero__art .g3d--xl { scale: 0.72; }
.sp-hero__art .svc__glow { width: 220px; height: 220px; top: 56%; }
/* the scene's panes: no backdrop-filter (it glitches while the page fades in) */
.sp-hero__art .g3d--pro .gl { backdrop-filter: none; -webkit-backdrop-filter: none; }
.sp-kicker { justify-self: center; margin-bottom: 20px; }
.sp-kicker a { color: var(--ink-soft); transition: color 0.3s; }
.sp-kicker a:hover { color: var(--ink); }
.sp-hero__title { font-size: clamp(2.4rem, 5.2vw, 4.8rem); line-height: 1.08; text-wrap: balance; }
.sp-line { display: block; }
.sp-hero__sub { max-width: 52ch; }
.sp-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.sp-includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.card-h.sp-card { min-height: 0; aspect-ratio: auto; padding: 34px 32px 36px; gap: 12px; }
.sp-card__n { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.sp-card .card__text { max-width: 40ch; }

.sp-more { border-top: 1px solid var(--hairline-strong); }
.sp-more li { border-bottom: 1px solid var(--hairline-strong); }
.sp-more__link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(20px, 2.4vw, 28px) 4px;
  font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 300; letter-spacing: -0.02em; color: var(--ink-soft);
  transition: color 0.3s;
}
.sp-more__label { transition: translate 0.5s var(--ease-out); }
.sp-more__icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  transition: box-shadow 0.4s var(--ease-out), background-color 0.4s;
}
.sp-more__icon svg { width: 16px; height: 16px; transition: translate 0.5s var(--ease-out); }
.sp-more__link:hover, .sp-more__link:focus-visible { color: var(--ink); }
.sp-more__link:hover .sp-more__label, .sp-more__link:focus-visible .sp-more__label { translate: 12px 0; }
.sp-more__link:hover .sp-more__icon, .sp-more__link:focus-visible .sp-more__icon { box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.8), 0 0 22px -6px rgb(99 131 255 / 0.9); }
.sp-more__link:hover .sp-more__icon svg { translate: 3px 0; }

/* home: the link under the active service's caption */
.svc__more { margin-top: 18px; }

@media (max-width: 760px) {
  .sp-includes { grid-template-columns: 1fr; }
  .sp-hero__art { width: 200px; }
  .sp-hero__art .g3d--xl { scale: 0.58; }
}

/* ----------------------------------------------------------------- service page v2 (sx) */
/* A richer service page: split hero with the big 3D scene and floating glass
   UI, a keyword marquee, a before/after contrast, a sticky scroll-driven
   "Qué incluye", an FAQ. Same materials as the home page. */

/* hero */
.sx-hero { min-height: 100svh; place-items: center; padding-top: 120px; padding-bottom: 80px; }
.sx-hero__grid {
  position: relative; width: min(var(--max), 100%);
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(24px, 4vw, 64px);
}
.sx-crumb { margin-bottom: 26px; }
.sx-crumb a { color: var(--ink-soft); transition: color 0.3s; }
.sx-crumb a:hover { color: var(--ink); }
.sx-hero__title { font-weight: 300; font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: 1.06; letter-spacing: -0.045em; text-wrap: balance; }
.sx-hero__sub { margin-top: 28px; max-width: 46ch; font-size: clamp(1rem, 1.25vw, 1.12rem); color: var(--ink-soft); }
.sx-hero__actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }
.sx-channels { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; }
.sx-channels li {
  padding: 8px 16px; border-radius: 999px; font-size: 0.82rem; color: var(--ink-soft);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
[data-theme='light'] .sx-channels li { background: rgb(255 255 255 / 0.6); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(3 5 28 / 0.08); }

.sx-stage { position: relative; aspect-ratio: 1; width: min(100%, 520px); justify-self: center; display: grid; place-items: center; perspective: 1000px; }
.sx-stage .g3d--xl { scale: 1.12; }
.sx-stage .svc__glow { width: 360px; height: 360px; top: 56%; }
.sx-stage .g3d--pro .gl { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* floating glass UI around the scene */
.sx-float {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 18px; white-space: nowrap;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04));
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 24px 50px -26px rgb(3 5 28 / 0.8), 0 16px 40px -28px rgb(99 77 255 / 0.7);
  animation: float-bob 7s ease-in-out infinite, pill-in 1s var(--ease-out) backwards;
}
[data-theme='light'] .sx-float {
  background: linear-gradient(160deg, 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 24px 50px -26px rgb(38 44 110 / 0.35);
}
@keyframes float-bob { 50% { translate: 0 -10px; } }
.sx-float b { font-weight: 500; font-size: 0.86rem; color: var(--ink); }
.sx-float__text { display: grid; line-height: 1.3; }
.sx-float__text span { font-size: 0.76rem; color: var(--ink-soft); }
.sx-float__icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; flex: none;
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.45), transparent 55%), linear-gradient(150deg, var(--xk-lilac), var(--xk-violet));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3), 0 6px 14px -6px rgb(99 77 255 / 0.8);
}
.sx-float__icon svg { width: 18px; height: 18px; }
.sx-live { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--xk-cyan); box-shadow: 0 0 10px var(--xk-cyan); }
.sx-live::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 230 254 / 0.7); animation: live-ping 2s var(--ease-out) infinite; }
@keyframes live-ping { from { opacity: 1; scale: 0.6; } to { opacity: 0; scale: 1.6; } }
.sx-float--1 { top: 12%; left: -2%; animation-delay: 0s, 0.6s; }
.sx-float--2 { top: 44%; right: -6%; animation-delay: -2.4s, 0.8s; }
.sx-float--3 { bottom: 8%; left: 4%; animation-delay: -4.6s, 1s; }

/* marquee */
.sx-marquee {
  overflow: hidden; padding-block: clamp(28px, 4vw, 48px);
  border-block: 1px solid var(--hairline);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sx-marquee__track { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); width: max-content; animation: marquee 50s linear infinite; }
.sx-word { font-size: clamp(2rem, 4.6vw, 4.2rem); font-weight: 300; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.sx-word--outline { color: transparent; -webkit-text-stroke: 1px var(--ink-muted); }
.sx-sep { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--xk-gradient); box-shadow: 0 0 14px rgb(99 131 255 / 0.8); }
@keyframes marquee { to { translate: -50% 0; } }

/* before / after */
.sx-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); max-width: 1040px; margin-inline: auto; }
.sx-col { position: relative; border-radius: 32px; padding: clamp(28px, 3.4vw, 44px); }
.sx-col--before { box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.card-h.sx-col--after { min-height: 0; aspect-ratio: auto; display: block; padding: clamp(28px, 3.4vw, 44px); border-radius: 32px; }
.sx-col__label { font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink-soft); margin-bottom: 22px; }
.sx-col--after .sx-col__label { color: var(--ink); }
.sx-col__list { display: grid; gap: 18px; }
.sx-col__list li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.45; }
.sx-col--before .sx-col__list li { color: var(--ink-soft); }
.sx-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px; }
.sx-mark svg { width: 13px; height: 13px; }
.sx-col--before .sx-mark { color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.sx-col--after .sx-mark { color: #fff; background: linear-gradient(150deg, var(--xk-lilac), var(--xk-violet)); box-shadow: 0 0 14px -2px rgb(99 131 255 / 0.9); }

/* qué incluye: a sticky counter beside the items */
.sx-story { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); }
.sx-story__sticky { position: sticky; top: 22vh; display: grid; gap: 22px; }
.sx-story__num { display: flex; align-items: baseline; gap: 14px; }
.sx-story__num span {
  font-size: clamp(5rem, 11vw, 9.5rem); font-weight: 300; line-height: 0.9; letter-spacing: -0.06em;
  background: linear-gradient(160deg, var(--ink) 30%, var(--xk-lilac)); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: opacity 0.35s, translate 0.5s var(--ease-out);
}
.sx-story__num span.is-swap { opacity: 0; translate: 0 18px; }
.sx-story__num em { font-style: normal; font-size: 1rem; color: var(--ink-soft); }
.sx-story__bar { position: relative; width: min(100%, 280px); height: 1px; background: var(--hairline-strong); }
.sx-story__bar i { position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--xk-gradient); box-shadow: 0 0 10px rgb(99 131 255 / 0.8); transition: width 0.7s var(--ease-out); }
.sx-story__label { font-size: 1.05rem; color: var(--ink-soft); transition: opacity 0.35s; }
.sx-story__items { display: grid; gap: clamp(64px, 10vh, 120px); padding-block: 4vh 16vh; }
.sx-item { display: grid; gap: 14px; opacity: 0.32; transition: opacity 0.6s var(--ease-out); }
.sx-item.is-active { opacity: 1; }
.sx-item__n { display: none; font-size: 0.8rem; color: var(--ink-soft); }
.sx-item__title { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.04em; }
.sx-item__title .t-soft { color: var(--ink-muted); }
.sx-item__text { max-width: 44ch; font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--ink-soft); }
.sx-item__list { display: grid; gap: 10px; margin-top: 6px; }
.sx-item__list li { position: relative; padding-left: 26px; color: var(--ink); font-size: 0.98rem; }
.sx-item__list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 12px; height: 1px; background: var(--xk-gradient); box-shadow: 0 0 8px rgb(99 131 255 / 0.9); }

/* faq */
.sx-faq__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.sx-faq__grid .section__head { margin-bottom: 0; position: sticky; top: 22vh; }
.sx-faq__list { border-top: 1px solid var(--hairline-strong); }
.sx-faq__item { border-bottom: 1px solid var(--hairline-strong); }
.sx-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none;
  padding: clamp(20px, 2.4vw, 28px) 4px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.02em; color: var(--ink);
}
.sx-faq__item summary::-webkit-details-marker { display: none; }
.sx-faq__icon { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline-strong); transition: box-shadow 0.4s var(--ease-out), rotate 0.5s var(--ease-out); }
.sx-faq__icon::before, .sx-faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 2px; background: currentColor; }
.sx-faq__icon::after { rotate: 90deg; transition: rotate 0.5s var(--ease-out); }
.sx-faq__item[open] .sx-faq__icon { box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.8), 0 0 20px -6px rgb(99 131 255 / 0.9); }
.sx-faq__item[open] .sx-faq__icon::after { rotate: 0deg; }
.sx-faq__item summary:hover .sx-faq__icon { box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.6); }
.sx-faq__a { padding: 0 4px 26px; max-width: 58ch; color: var(--ink-soft); animation: faq-in 0.5s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; translate: 0 -6px; } }

@media (max-width: 960px) {
  .sx-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .sx-hero__copy { display: grid; justify-items: center; }
  .sx-hero__actions, .sx-channels { justify-content: center; }
  .sx-stage { grid-row: 1; width: min(100%, 380px); }
  .sx-stage .g3d--xl { scale: 0.86; }
  .sx-float { transform: scale(0.88); }
  .sx-compare, .sx-story, .sx-faq__grid { grid-template-columns: 1fr; }
  .sx-story__aside { display: none; }
  .sx-item { opacity: 1; }
  .sx-item__n { display: block; }
  .sx-faq__grid .section__head { position: static; }
}
@media (max-width: 560px) {
  .sx-stage .g3d--xl { scale: 0.7; }
  .sx-float--2 { right: -2%; }
  .sx-float__text span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-marquee__track, .sx-float, .sx-live::after { animation: none; }
}
/* ---- end sx */
/* ----------------------------------------------------------------- project pages */
/* Case pages for the (fictional) projects, in the site's language: a notice
   that the project is fictional, a hero with the facts, the project image
   in a large glass frame, the challenge, what was done, the outcome. */

/* home: fictional marks on the cards */
.proj__note { max-width: 52ch; margin-top: 18px; font-size: 0.9rem; color: var(--ink-soft); }
.proj__fict {
  position: absolute; z-index: 1; right: 16px; top: 16px;
  padding: 5px 11px; border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.03em; color: var(--ink-soft);
  background: rgb(3 5 28 / 0.35); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
[data-theme='light'] .proj__fict { background: rgb(255 255 255 / 0.6); box-shadow: inset 0 0 0 1px rgb(3 5 28 / 0.1); }

.pj-notice {
  position: fixed; z-index: 55; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); translate: -50% 0;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 120px);
  padding: 10px 18px; border-radius: 999px; font-size: 0.8rem; color: var(--ink-soft);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03)), rgb(3 5 28 / 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 40px -20px rgb(3 5 28 / 0.9);
}
[data-theme='light'] .pj-notice { background: rgb(255 255 255 / 0.8); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(3 5 28 / 0.08), 0 16px 40px -20px rgb(38 44 110 / 0.35); }
.pj-notice__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--xk-lilac); box-shadow: 0 0 10px var(--xk-lilac); }

.pj-hero { min-height: 78svh; padding-bottom: 40px; }
.pj-hero__inner { position: relative; width: min(var(--max), 100%); }
.pj-hero__title { font-size: clamp(2.8rem, 6.4vw, 6rem); }
.pj-hero__bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--hairline-strong); }
.pj-facts { display: flex; flex-wrap: wrap; gap: 12px 48px; }
.pj-facts dt { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 6px; }
.pj-facts dd { margin: 0; font-size: 1rem; color: var(--ink); }
.pj-facts em { font-style: normal; color: var(--ink-soft); }

.pj-shot { width: min(var(--max), 100% - 2 * var(--gutter)); margin: 0 auto; }
.pj-frame { border-radius: 36px; padding: 18px; }
.pj-frame .proj__screen { border-radius: 24px; }
.pj-frame .proj__art { scale: 1.08; }

.pj-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pj-split .section__head { margin-bottom: 0; }
.pj-lead { font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 300; line-height: 1.45; letter-spacing: -0.02em; color: var(--ink); padding-top: 40px; }

.pj-next { padding-top: 0; }
.pj-next__link {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 24px;
  padding-block: clamp(40px, 6vw, 72px); border-block: 1px solid var(--hairline-strong);
}
.pj-next__label { grid-column: 1 / -1; font-size: 0.85rem; color: var(--ink-soft); }
.pj-next__name { font-size: clamp(2rem, 5vw, 4.4rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.045em; transition: translate 0.6s var(--ease-out); }
.pj-next__name .t-soft { color: var(--ink-muted); }
.pj-next__link .sp-more__icon { width: 64px; height: 64px; }
.pj-next__link .sp-more__icon svg { width: 20px; height: 20px; }
.pj-next__link:hover .pj-next__name { translate: 14px 0; }
.pj-next__link:hover .sp-more__icon { box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.8), 0 0 22px -6px rgb(99 131 255 / 0.9); }

@media (max-width: 860px) {
  .pj-split { grid-template-columns: 1fr; }
  .pj-lead { padding-top: 0; }
  .pj-notice { max-width: calc(100% - 110px); left: 16px; translate: none; font-size: 0.72rem; border-radius: 16px; }
}
/* ---- end project pages */
/* ----------------------------------------------------------------- whatsapp */
/* A floating glass button in XK lilac → violet. On hover it opens to show
   "Escríbenos"; a soft ring breathes out from it now and then. */
.wa {
  position: fixed; z-index: 60;
  right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0;
  height: 58px; padding: 0 5px; border-radius: 999px;
  color: #fff; font-weight: 500; font-size: 0.92rem; white-space: nowrap;
  background:
    radial-gradient(120% 90% at 30% 0%, rgb(255 255 255 / 0.35), transparent 55%),
    linear-gradient(145deg, var(--xk-lilac), var(--xk-violet));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.2),
    inset 0 -8px 16px rgb(3 5 28 / 0.18),
    0 14px 34px -10px rgb(99 77 255 / 0.75), 0 6px 16px -8px rgb(3 5 28 / 0.6);
  transition: gap 0.5s var(--ease-out), padding 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), scale 0.2s var(--ease-out);
}
.wa__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; }
.wa__icon svg { width: 26px; height: 26px; }
.wa__label {
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width 0.5s var(--ease-out), opacity 0.35s var(--ease-out);
}
.wa:hover, .wa:focus-visible { gap: 4px; padding-right: 22px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.25), inset 0 -8px 16px rgb(3 5 28 / 0.18), 0 18px 40px -10px rgb(99 77 255 / 0.95), 0 6px 16px -8px rgb(3 5 28 / 0.6); }
.wa:hover .wa__label, .wa:focus-visible .wa__label { max-width: 120px; opacity: 1; }
.wa:active { scale: 0.96; }
.wa:focus-visible { outline: 2px solid var(--xk-lilac); outline-offset: 4px; }
/* ----------------------------------------------------------------- back to top */
/* a small glass disc above the WhatsApp button; main.js shows it once the first screen is behind */
.to-top {
  position: fixed; z-index: 59;
  right: calc(max(20px, env(safe-area-inset-right)) + 9px); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 70px);
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity 0.4s var(--ease-out), translate 0.5s var(--ease-out), visibility 0s 0.5s, color 0.3s, box-shadow 0.4s;
}
/* barely there until the pointer (or the keyboard) reaches it */
.to-top.is-on { opacity: 0.38; visibility: visible; translate: 0 0; transition-delay: 0s; }
.to-top.is-on:hover, .to-top.is-on:focus-visible { opacity: 1; }
.to-top svg { width: 16px; height: 16px; transition: translate 0.4s var(--ease-out); }
.to-top:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(99 131 255 / 0.55); }
.to-top:hover svg { translate: 0 -2px; }
.to-top:active { scale: 0.94; }
[data-theme='light'] .to-top {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.4));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(3 5 28 / 0.1), 0 10px 26px -14px rgb(38 44 110 / 0.35);
}
[data-theme='light'] .to-top:hover { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(99 131 255 / 0.6), 0 10px 26px -14px rgb(38 44 110 / 0.35); }
@media (max-width: 640px) {
  .to-top { right: calc(max(20px, env(safe-area-inset-right)) + 7px); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 64px); }
  .consent:not([hidden]) ~ .to-top { display: none; } /* the banner sits there until it is answered */
}
@media (prefers-reduced-motion: reduce) { .to-top, .to-top svg { transition: none; } }

/* the pulse that breathes out: a soft glow, not a drawn ring */
.wa::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 22px 7px rgb(99 131 255 / 0.6);
  animation: wa-ring 4.5s var(--ease-out) 2.5s infinite;
  opacity: 0;
}
@keyframes wa-ring { 0% { opacity: 0.8; scale: 1; } 45%, 100% { opacity: 0; scale: 1.45; } }
.js .wa { animation: pop-in 0.9s var(--ease-out) 1.6s backwards; }
@media (max-width: 640px) {
  .wa { height: 54px; }
  .wa__icon { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa::after { animation: none; }
  .js .wa { animation: none; }
}

/* ----------------------------------------------------------------- load entrances */
/* Everything that had no entrance of its own arrives once, in order, at load:
   the logo is uncovered with a soft glow, then the theme toggle and the
   "Hablemos" pill settle in (the primary buttons arrive the same way), and the
   hero's footer rule is drawn from the centre before the scroll cue drops in. */
.js .nav__brand { position: relative; display: inline-block; flex: none; } /* the logo keeps its size; the rest of the nav adapts */
/* the logo rises out of a soft blur and settles — no mask edge, no halo,
   just the mark coming into focus */
.js .nav__brand img { animation: logo-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
@keyframes logo-in {
  from { opacity: 0; translate: 0 10px; scale: 0.96; filter: blur(10px); }
  40% { opacity: 1; }
  to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}

.js .theme-toggle { animation: pop-in 0.9s var(--ease-out) 0.45s backwards; }
.js .nav__actions .btn { animation: pill-in 1s var(--ease-out) 0.55s backwards; }
.js .hero__actions .btn { animation: pill-in 1.1s var(--ease-out) 0.9s backwards; }
/* the CTA's primary button settles the same way when it reveals on scroll */
.js .cta .btn.reveal { scale: 0.88; filter: blur(8px); translate: 0 0; transition: opacity 1s var(--ease-out), scale 1s var(--ease-out), filter 1s var(--ease-out); transition-delay: var(--d, 0s); }
.js .cta .btn.reveal.is-in { scale: 1; filter: none; }
@keyframes pop-in { from { opacity: 0; scale: 0.6; filter: blur(6px); } }
@keyframes pill-in { from { opacity: 0; scale: 0.88; filter: blur(8px); } }

.js .hero__foot::before { transform-origin: center; animation: rule-in 1.4s var(--ease-out) 0.9s both; }
@keyframes rule-in { from { scale: 0 1; opacity: 0; } }
.js .hero__scroll { animation: cue-in 1s var(--ease-out) 1.4s both; }
@keyframes cue-in { from { opacity: 0; translate: 0 -12px; filter: blur(4px); } }


@media (prefers-reduced-motion: reduce) {
  .js .nav__brand img, .js .theme-toggle, .js .nav__actions .btn, .js .hero__actions .btn,
  .js .hero__foot::before, .js .hero__scroll { animation: none; }
  .js .cta .btn.reveal { filter: none; scale: 1; }
}

/* ----------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  /* the cards stack in one centred column, each a comfortable width */
  .pillars--h { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 64px; padding-right: 0; }
  .card-h { min-height: 260px; }
  /* the steps stack and the line turns vertical: one line from the first
     circle's centre to the last (its end is measured by main.js) */
  .steps { --gap: 44px; grid-template-columns: 1fr; row-gap: var(--gap); max-width: 480px; margin-inline: auto; }
  .step {
    display: grid; grid-template-columns: 60px 1fr; column-gap: 24px;
    grid-template-areas: "n title" "n text"; align-content: start;
  }
  .step__n { grid-area: n; align-self: start; }
  .step__title { grid-area: title; margin-top: 16px; }
  .step__text { grid-area: text; }
  .steps::before, .steps::after {
    display: block; left: 30px; right: auto; width: 1px; height: auto;
    top: 30px; bottom: var(--line-end, 30px);
  }
  .steps::after {
    background-image: linear-gradient(180deg, transparent, var(--xk-lilac) 45%, #fff 50%, var(--xk-cyan) 55%, transparent);
    background-size: 100% var(--band-size, 30%); background-position: 0 var(--band, -100%);
  }
  [data-theme='light'] .steps::after {
    background-image: linear-gradient(180deg, transparent, var(--xk-violet) 45%, var(--xk-lilac) 50%, var(--xk-light-blue) 55%, transparent);
  }
}

/* 1024–1099: the links stay on one line beside the language switch with a little less air between them */
@media (max-width: 1099px) {
  .nav__links a { padding: 8px; }
  .nav__links a::after { left: 8px; right: 8px; }
}
@media (max-width: 1023px) {
  .nav__links { display: none; } /* below this the links and the language switch do not fit in one row */
}

/* ----------------------------------------------------------------- menu (below 1024px) */
/* The section links open from a glass disc at the end of the bar, as a sheet
   under it: same glass as the other controls, the links set large and light
   with a hairline between them and their number at the end, like the services
   list. main.js adds the button, so it only exists when it can work. */
.nav__menu { display: none; }
@media (max-width: 1023px) {
  /* the links' wrapper leaves the row (it would take a gap for nothing) and anchors the sheet under the bar */
  .nav > nav { position: absolute; top: 100%; left: 0; right: 0; }
  .nav__menu {
    position: relative; display: grid; place-items: center; flex: none;
    width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
    color: var(--ink); cursor: pointer;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.12);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: scale 0.2s var(--ease-out), box-shadow 0.4s;
  }
  .nav__menu:hover, .nav.is-open .nav__menu { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(99 131 255 / 0.55); }
  .nav__menu:active { scale: 0.94; }
  [data-theme='light'] .nav__menu {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.4));
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(3 5 28 / 0.1), 0 10px 26px -14px rgb(38 44 110 / 0.35);
  }
  [data-theme='light'] .nav__menu:hover, [data-theme='light'] .nav.is-open .nav__menu { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(99 131 255 / 0.6), 0 10px 26px -14px rgb(38 44 110 / 0.35); }
  /* three lines; the outer two cross into an x and the middle one fades */
  .nav__menu-icon { position: relative; display: block; width: 18px; height: 13px; }
  .nav__menu-icon i {
    position: absolute; left: 0; right: 0; top: 5.7px; height: 1.6px; border-radius: 2px; background: currentColor;
    transition: translate 0.4s var(--ease-out), rotate 0.4s var(--ease-out), opacity 0.25s;
  }
  .nav__menu-icon i:first-child { translate: 0 -5.7px; }
  .nav__menu-icon i:last-child { translate: 0 5.7px; }
  .nav.is-open .nav__menu-icon i:first-child { translate: 0 0; rotate: 45deg; }
  .nav.is-open .nav__menu-icon i:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__menu-icon i:last-child { translate: 0 0; rotate: -45deg; }
  .js .nav__menu { animation: pop-in 0.9s var(--ease-out) 0.6s backwards; }

  .js .nav__links {
    position: absolute; top: 12px; right: 0; z-index: 1;
    display: grid; gap: 0; width: min(380px, 100%);
    padding: 8px 24px 10px; border-radius: 28px;
    counter-reset: nav;
    background: linear-gradient(160deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03) 60%), rgb(8 11 38 / 0.82);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.1),
      0 40px 80px -36px rgb(99 77 255 / 0.55), 0 30px 60px -30px rgb(0 0 0 / 0.8);
    backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%);
    opacity: 0; visibility: hidden; translate: 0 -10px; scale: 0.97; transform-origin: top right;
    transition: opacity 0.3s var(--ease-out), translate 0.45s var(--ease-out), scale 0.45s var(--ease-out), visibility 0s 0.45s;
  }
  .js[data-theme='light'] .nav__links {
    background: linear-gradient(160deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.78)), rgb(245 246 255 / 0.9);
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(3 5 28 / 0.08), 0 40px 80px -40px rgb(38 44 110 / 0.5);
  }
  .js .nav.is-open .nav__links { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition-delay: 0s; }
  .js .nav__links li + li { border-top: 1px solid var(--hairline-strong); }
  .js .nav__links a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 17px 2px; font-size: 1.3rem; font-weight: 300; letter-spacing: -0.02em; color: var(--ink);
    opacity: 0; translate: 0 8px;
    transition: opacity 0.4s var(--ease-out), translate 0.5s var(--ease-out), color 0.25s;
  }
  .js .nav__links a::after {
    counter-increment: nav; content: '0' counter(nav);
    position: static; height: auto; background: none; scale: 1;
    font-size: 0.74rem; font-weight: 400; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink-dim);
  }
  .js .nav.is-open .nav__links a { opacity: 1; translate: 0 0; }
  .js .nav.is-open .nav__links li:nth-child(2) a { transition-delay: 0.04s; }
  .js .nav.is-open .nav__links li:nth-child(3) a { transition-delay: 0.08s; }
  .js .nav.is-open .nav__links li:nth-child(4) a { transition-delay: 0.12s; }
  .js .nav.is-open .nav__links li:nth-child(5) a { transition-delay: 0.16s; }
  /* the link under the pointer (or the finger, or the keyboard) takes the XK gradient, sized to the words */
  .js .nav__links a:hover, .js .nav__links a:focus-visible, .js .nav__links a:active {
    background: var(--xk-gradient) no-repeat 0 0 / 9em 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .js[data-theme='light'] .nav__links a:hover, .js[data-theme='light'] .nav__links a:focus-visible, .js[data-theme='light'] .nav__links a:active {
    background-image: linear-gradient(100deg, var(--xk-violet), var(--xk-lilac) 55%, var(--xk-light-blue));
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .js .nav__menu { animation: none; }
  .js .nav__links, .js .nav__links a, .nav__menu-icon i { transition: none; }
}

@media (max-width: 860px) {
  .svc { grid-template-columns: 1fr; }
  .svc__side { order: -1; }
  .svc__caption { order: -1; } /* the service name and description come before its icon */
  .svc__scene { max-width: 340px; }
  .svc__scene .g3d--xl { scale: 0.95; }
  .g3d--xl { scale: 0.85; }
  .section__head--right { justify-items: start; text-align: left; }
  .section__head--right .kicker { justify-self: start; }
}

@media (max-width: 640px) {
  .section__head--split { grid-template-columns: 1fr; }
  .section__head--split .btn { justify-self: start; }
  .pillars--h { gap: 56px; }
  .card-h__art { right: -8px; bottom: -44px; scale: 0.8; }
  .hero__title { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .hero__line { white-space: normal; }
  .hero__foot { grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center; font-size: 0.84rem; }
  .btn:not(.btn--sm):not(.btn--frost) { --h: 56px; height: auto; min-height: var(--h); padding-block: 5px; padding-left: 22px; gap: 14px; white-space: normal; text-align: left; font-size: 0.9rem; }
  .g3d--xl { scale: 0.72; }
  .svc__scene .g3d--xl { scale: 0.85; }
  /* footer: the logo with the two icons beside it, centred together; then the line and the copyright, centred */
  .footer { justify-content: center; gap: 16px 20px; }
  .footer__social { margin-left: 0; order: 1; }
  .footer > p { flex-basis: 100%; text-align: center; order: 2; }
  .footer__small { margin-left: 0; order: 3; }
}

/* ----------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; translate: none; }
  .svc__item.is-active::after { transform: scaleX(1); }
}

/* ----------------------------------------------------------------- cookie consent */
/* A quiet glass card, bottom-left (the WhatsApp button owns bottom-right).
   Accept and reject weigh the same; "Configurar" is the softer third option. */
.consent {
  position: fixed; z-index: 70;
  left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom));
  width: min(420px, calc(100% - 40px));
  padding: 22px 22px 20px; border-radius: 22px;
  color: var(--ink); font-size: 0.88rem; line-height: 1.5;
  background: rgb(8 11 38 / 0.84);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 24px 60px -20px rgb(3 5 28 / 0.8);
  animation: consent-in 0.6s var(--ease-out) both;
}
.consent [hidden], .consent[hidden] { display: none; }
[data-theme='light'] .consent {
  background: rgb(255 255 255 / 0.88);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(3 5 28 / 0.08), 0 24px 60px -24px rgb(3 5 28 / 0.35);
}
.consent__title { margin-bottom: 6px; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; }
.consent__text { color: var(--ink-soft); }
.consent__prefs { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.consent__opt { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; color: var(--ink-soft); cursor: pointer; }
.consent__opt b { display: block; font-weight: 500; color: var(--ink); }
.consent__opt input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--xk-violet); cursor: inherit; }
.consent__opt:has(input:disabled) { cursor: default; }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; }
.consent__btn {
  height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 0.84rem; font-weight: 500; color: var(--ink);
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.12);
  transition: background-color 0.3s, box-shadow 0.4s var(--ease-out);
}
.consent__btn:hover { background: rgb(255 255 255 / 0.16); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(99 131 255 / 0.7); }
[data-theme='light'] .consent__btn { background: rgb(3 5 28 / 0.05); box-shadow: inset 0 0 0 1px rgb(3 5 28 / 0.12); }
[data-theme='light'] .consent__btn:hover { background: rgb(3 5 28 / 0.09); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.7); }
.consent__btn:active { scale: 0.975; }
.consent__link {
  height: 40px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font-size: 0.84rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.3s;
}
.consent__link:hover { color: var(--ink); }
@keyframes consent-in { from { opacity: 0; translate: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
/* phones: full width, above the WhatsApp button */
@media (max-width: 560px) {
  .consent { left: 12px; right: 12px; width: auto; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 70px); }
}

/* footer: the legal links and the consent preferences, styled like "XK Digital". They take a quiet
   second line under the logo (the WhatsApp button owns the bottom-right corner), so the original
   row (logo, line, icons, copyright) stays as it was */
.footer__legal { order: 5; flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px 18px; }
.footer__legal a, .footer__consent { padding: 0; border: 0; background: none; cursor: pointer; color: var(--xk-lilac); }
.footer__legal a:hover, .footer__consent:hover, .footer__legal a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .footer__legal { order: 2; justify-content: center; } } /* after the tagline, before the copyright */

/* consent banner: the link to the cookie policy */
.consent__more { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent__more:hover { color: var(--xk-lilac); }

/* ----------------------------------------------------------------- legal pages */
/* Privacy and cookie policies: the project hero, shorter, then a calm reading
   column. The text skips the letter reveal (data-fx-skip) so it reads at once. */
.lg-hero { min-height: 62svh; }
.lg-updated { margin-top: 18px; font-size: 0.85rem; color: var(--ink-dim); }
.lg-doc { padding-top: clamp(40px, 6vw, 88px); }
.lg-doc__body { max-width: 760px; }
.lg-doc h2 { margin: 64px 0 16px; font-weight: 400; font-size: clamp(1.4rem, 2.3vw, 1.8rem); line-height: 1.25; letter-spacing: -0.025em; }
.lg-doc h2:first-child { margin-top: 0; }
.lg-doc h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 32px 0 10px; font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; }
.lg-doc p, .lg-doc li { color: var(--ink-soft); line-height: 1.7; }
.lg-doc p + p { margin-top: 12px; }
.lg-doc ul { display: grid; gap: 10px; margin-top: 12px; padding-left: 1.2em; list-style: disc; }
.lg-doc li::marker { color: var(--xk-lilac); }
.lg-doc strong { font-weight: 500; color: var(--ink); }
.lg-doc a, .lg-inline-btn { color: var(--xk-lilac); text-decoration: underline; text-underline-offset: 3px; }
.lg-inline-btn { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.lg-doc a:hover, .lg-inline-btn:hover { color: var(--ink); }
/* light theme: lilac is too faint for small text on a pale ground (3.1:1), the brand violet reads (4.8:1) */
[data-theme='light'] .lg-doc a, [data-theme='light'] .lg-inline-btn,
[data-theme='light'] .footer__legal a, [data-theme='light'] .footer__consent, [data-theme='light'] .footer__small a { color: var(--xk-violet); }
[data-theme='light'] .lg-doc a:hover, [data-theme='light'] .lg-inline-btn:hover { color: var(--ink); }
.lg-doc code {
  padding: 2px 7px; border-radius: 6px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.86em;
  color: var(--ink); background: var(--hairline); white-space: nowrap;
}
.lg-tag {
  padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 500; color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.lg-tag--opt { color: var(--xk-lilac); box-shadow: inset 0 0 0 1px rgb(99 131 255 / 0.5); }
/* the cookie tables scroll sideways inside their box on narrow screens, never the page */
.lg-table { margin-top: 14px; overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.lg-table table { width: 100%; min-width: 520px; border-collapse: collapse; table-layout: fixed; font-size: 0.9rem; }
/* the same columns in every table, so the three line up */
.lg-table th:nth-child(1) { width: 28%; }
.lg-table th:nth-child(2) { width: 44%; }
.lg-table th, .lg-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table th { font-weight: 500; color: var(--ink); background: var(--hairline); }
.lg-table td { color: var(--ink-soft); line-height: 1.55; }
/* phones: each row becomes a small stacked card, so every column is readable without sideways scrolling */
@media (max-width: 560px) {
  .lg-table { overflow: visible; }
  .lg-table table, .lg-table tbody, .lg-table tr, .lg-table td { display: block; width: auto; min-width: 0; }
  .lg-table thead { display: none; }
  .lg-table tr { padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
  .lg-table td { padding: 4px 0; border: 0; }
  .lg-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.74rem; font-weight: 500; color: var(--ink-dim); }
  .lg-table td:first-child::before { display: none; }
}

/* ----------------------------------------------------------------- language switch */
/* ES / EN beside the theme toggle, in its same glass: a two-option pill with the
   current language lit. On phones there is no room for both, so it becomes a disc
   like the toggle showing only the language you can switch to. */
.lang {
  display: flex; align-items: center; height: 46px; padding: 0 5px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.lang__opt {
  display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: 999px;
  color: var(--ink-soft); transition: color 0.25s, background-color 0.3s;
}
.lang__opt[aria-current] { color: var(--ink); background: rgb(255 255 255 / 0.13); }
a.lang__opt:hover { color: var(--ink); }
[data-theme='light'] .lang {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.4));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(3 5 28 / 0.1), 0 10px 26px -14px rgb(38 44 110 / 0.35);
}
[data-theme='light'] .lang__opt[aria-current] { background: rgb(3 5 28 / 0.07); }
.js .lang { animation: pop-in 0.9s var(--ease-out) 0.4s backwards; }
@media (prefers-reduced-motion: reduce) { .js .lang { animation: none; } }
/* phones: the full pill would squeeze the logo, so the nav tightens a little and the switch becomes a disc */
@media (max-width: 460px) {
  .nav { gap: 10px; }
  .nav__actions { gap: 6px; }
  .nav__actions .btn--frost { padding: 0 12px; }
  .theme-toggle, .lang { width: 40px; height: 40px; }
  .lang { padding: 0; justify-content: center; }
  .lang__opt[aria-current] { display: none; }
}
@media (max-width: 365px) { .nav__brand img { width: 104px; } }
/* phones: the menu disc matches the others */
@media (max-width: 460px) { .nav__menu { width: 40px; height: 40px; } }