/* ==========================================================================
   Julián Kether — Escena 01. Móvil primero.
   El arte es una imagen; todo lo demás es HTML real.
   ========================================================================== */
:root {
  --night: #14122A;
  --indigo: #23204A;
  --text: #FBF6F0;
  --text-2: rgba(251, 246, 240, .82);
  --coral: #F58A8C;
  --lavender: #B9A6F2;
  --peach: #FFB48A;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 24px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--text); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--peach); outline-offset: 4px; border-radius: 6px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--text); color: var(--night); padding: 10px 14px; border-radius: 10px; }
.skip-link:focus { top: calc(12px + var(--safe-top)); }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + var(--safe-top)) var(--gutter) 16px;
  text-shadow: 0 1px 14px rgba(20, 18, 42, .45);
}
.top__mark { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: .02em; }
/* el mismo llamado en toda la web: unirse a Notas del Lab */
.top__right { display: flex; align-items: center; gap: 16px; }
.top__cta { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .35s, visibility .35s, transform .35s var(--ease); display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, var(--uni), var(--uni-2)); color: #fff; font: 600 12px/1 var(--sans); letter-spacing: .02em; text-shadow: none; box-shadow: 0 8px 20px -10px rgba(255, 55, 199, .8); transition: transform .2s; }
.top.is-solid .top__cta { opacity: 1; visibility: visible; transform: none; } /* solo aparece cuando la web ya está en blanco */
.top.is-solid .top__cta:hover { transform: translateY(-1px); }
.top__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.top__menu {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 0; min-height: 44px; min-width: 44px;
  background: none; border: 0; color: var(--text); cursor: pointer;
  font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
}
.top__bars, .top__bars::before { display: block; width: 24px; height: 1px; background: currentColor; position: relative; transition: transform .4s var(--ease); }
.top__bars::before { content: ""; position: absolute; top: 7px; width: 16px; right: 0; }
.menu-open .top__bars { transform: translateY(3.5px) rotate(45deg); }
.menu-open .top__bars::before { top: 0; width: 24px; transform: rotate(-90deg); }

/* menú: panel que baja desde arriba hasta la mitad de la pantalla, como en una app */
.menu { position: fixed; inset: 0; z-index: 40; background: rgba(21, 17, 31, .32); animation: menuFade .3s ease; }
.menu ul {
  list-style: none; margin: 0; position: absolute; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px;
  padding: calc(84px + var(--safe-top)) var(--gutter) 22px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 0 0 28px 28px; box-shadow: 0 30px 60px -30px rgba(21, 17, 31, .45);
  animation: menuDrop .45s var(--ease);
}
.menu li { border-top: 1px solid var(--hair); }
.menu a { display: flex; align-items: center; min-height: 48px; font-family: var(--ed-serif); font-size: 21px; line-height: 1.1; color: var(--ink); text-transform: none; letter-spacing: 0; }
.menu a:hover, .menu a:focus-visible { color: var(--uni); }
.menu li:last-child { grid-column: 1 / -1; border-top: 0; margin-top: 12px; }
.menu li:last-child a { justify-content: center; min-height: 50px; border-radius: 999px; background: linear-gradient(135deg, var(--uni), var(--uni-2)); color: #fff !important; font: 600 14px var(--sans); box-shadow: 0 12px 28px -12px rgba(255, 55, 199, .7); }
.menu-open .top { color: var(--ink); text-shadow: none; }
.menu-open .top .top__menu { color: var(--ink); }
@keyframes menuDrop { from { transform: translateY(-100%); } }
@keyframes menuFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .menu, .menu ul { animation: none; } }
@media (min-width: 900px) { .menu ul { grid-template-columns: repeat(4, 1fr); padding-left: 6vw; padding-right: 6vw; } .menu li:last-child { grid-column: 4; margin-top: 0; align-self: center; } }

/* ---------- recorrido con scroll ---------- */
/* La escena queda fija mientras se recorre .journey; main js escribe --p (0→1), --mx y --my (-1→1). */
:root { --p: 0; --mx: 0; --my: 0; }
.journey { position: relative; height: 700vh; height: 700svh; --t1: 0; --t2: 0; --flash: 0; --flash2: 0; }
.journey__mark { position: absolute; left: 0; width: 1px; height: 1px; }
.journey__mark--lab { top: calc((100% - 100svh) * .48); }
.journey__mark--keios { top: calc((100% - 100svh) * .84); }
/* pantalla fija donde viven todas las escenas, una encima de otra */
.viewport { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
.scene {
  position: absolute; inset: 0; height: 100%; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.scene__art { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--night); }

/* .stage tiene la proporción de la imagen y "cubre" la pantalla (main js le da tamaño y posición) */
.stage { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 941 / 1672; overflow: hidden; }
.stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 22%; background: linear-gradient(180deg, rgba(20, 18, 42, 0), var(--night)); pointer-events: none; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
img.layer { object-fit: fill; }

/* fondo: la cámara avanza hacia la torre de KetherLabs */
.scene--01 .layer--bg {
  transform-origin: 60% 24%;
  transform: translate3d(calc(var(--mx) * -6px), calc(var(--my) * -5px), 0) scale(calc(1 + var(--p) * .22));
}
/* primer plano: Julian y la roca se quedan atrás (salen por abajo a la izquierda) */
.scene--01 .layer--fg {
  transform-origin: 0% 100%;
  transform: translate3d(calc(var(--mx) * -18px + var(--p) * -14%), calc(var(--my) * -10px + var(--p) * 40%), 0) scale(calc(1 + var(--p) * .35));
}
.scene--01 .layer--clouds { transform: translate3d(calc(var(--mx) * -12px), calc(var(--p) * -12%), 0); pointer-events: none; }
.layer--motes { pointer-events: none; transform: translate3d(calc(var(--mx) * -24px), calc(var(--my) * -14px), 0); }

/* entrada */
.js .scene--01 .stage { opacity: 0; transition: opacity 1.4s var(--ease); }
.js .scene--01.is-ready .stage { opacity: 1; }

/* luces vivas (posiciones en % de la imagen) */
.glow { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; transform: translate(-50%, -50%); }
.glow--sun { left: 97%; top: 22.7%; width: 46%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 214, 160, .55), rgba(255, 170, 120, 0) 65%); animation: breathe 7s ease-in-out infinite; }
.glow--ketherlabs { left: 59.8%; top: 19.5%; width: 7%; aspect-ratio: 1 / 3.4; border-radius: 40%; background: radial-gradient(ellipse, rgba(120, 220, 255, .9), rgba(80, 180, 255, 0) 70%); animation: pulse 3.2s ease-in-out infinite; }
.glow--keios { left: 87.8%; top: 31.5%; width: 16%; aspect-ratio: 1; background: radial-gradient(circle, rgba(0, 214, 163, .55), rgba(0, 214, 163, 0) 68%); animation: pulse 4.6s ease-in-out infinite -1.5s; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .9; transform: translate(-50%, -50%) scale(1.08); } }

/* nubes que cruzan (detrás de Julian, delante del paisaje) */
.layer--clouds span {
  position: absolute; border-radius: 50%; filter: blur(18px); opacity: .5;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 226, 214, .95), rgba(255, 190, 180, .55) 45%, rgba(255, 190, 180, 0) 72%);
  animation: drift 46s linear infinite;
}
.scene--01 .layer--clouds span:nth-child(1) { top: 41%; left: -30%; width: 70%; height: 7%; }
.scene--01 .layer--clouds span:nth-child(2) { top: 53%; left: 10%; width: 85%; height: 9%; opacity: .38; animation-duration: 62s; animation-delay: -20s; }
.scene--01 .layer--clouds span:nth-child(3) { top: 64%; left: -50%; width: 90%; height: 10%; opacity: .32; animation-duration: 74s; animation-delay: -40s; }
.scene--01 .layer--clouds span:nth-child(4) { top: 30%; left: 40%; width: 50%; height: 5%; opacity: .3; animation-duration: 54s; animation-delay: -10s; }
@keyframes drift { from { transform: translateX(-20%); } to { transform: translateX(80%); } }

/* partículas de luz (las crea main js) */
.mote { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFE9D6; box-shadow: 0 0 8px 2px rgba(255, 200, 160, .6); opacity: 0; animation: rise linear infinite; }
@keyframes rise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 85% { opacity: .7; } 100% { opacity: 0; transform: translateY(-160px); } }

/* velo para que el texto se lea */
.scene__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 18, 42, .4) 0%, rgba(20, 18, 42, 0) 15%),
    linear-gradient(180deg, rgba(20, 18, 42, 0) 40%, rgba(20, 18, 42, .5) 55%, rgba(20, 18, 42, .82) 74%, rgba(20, 18, 42, .94) 100%);
}
/* al avanzar, la paleta se enfría hacia KetherLabs (azul profundo y cian) */
.scene__shift {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(var(--p) * .45);
  background: radial-gradient(120% 80% at 60% 25%, rgba(30, 60, 140, .25), rgba(10, 16, 48, .9) 70%);
}
/* el texto se despide al bajar */
.scene--01 .hero, .scene--01 .scene__foot { opacity: calc(1 - var(--p) * 2.4); transform: translateY(calc(var(--p) * -60px)); }

/* ---------- escena 02 · KetherLabs ---------- */
/* (la escena 02 comparte la pantalla fija con la 01) */
/* llegada: empieza muy cerca del núcleo de la ciudad (como termina la escena 01) y se abre */
.scene--02 .layer--bg {
  transform-origin: 68.5% 24%;
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -6px + var(--p) * -3%), 0) scale(calc(1.3 - var(--p) * .3));
}
.scene--02 .layer--clouds { transform: translate3d(calc(var(--mx) * -14px), calc(var(--p) * 8%), 0); pointer-events: none; }
.scene--02 .layer--clouds span {
  background: radial-gradient(ellipse at 50% 60%, rgba(220, 230, 255, .9), rgba(160, 180, 240, .45) 45%, rgba(160, 180, 240, 0) 72%);
}
.scene--02 .layer--clouds span:nth-child(1) { top: 58%; left: -40%; width: 90%; height: 9%; opacity: .35; }
.scene--02 .layer--clouds span:nth-child(2) { top: 68%; left: 0%; width: 100%; height: 11%; opacity: .3; animation-duration: 70s; animation-delay: -25s; }
.scene--02 .layer--clouds span:nth-child(3) { top: 46%; left: 30%; width: 60%; height: 6%; opacity: .22; animation-duration: 58s; animation-delay: -12s; }
.scene--02 .mote { background: #CFF6FF; box-shadow: 0 0 8px 2px rgba(110, 220, 255, .6); }

/* el rayo cian y el núcleo de la ciudad laten */
.glow--beam { left: 68.5%; top: 21%; width: 6%; height: 42%; border-radius: 40%; background: radial-gradient(ellipse, rgba(140, 230, 255, .75), rgba(60, 170, 255, 0) 70%); animation: pulse 2.8s ease-in-out infinite; }
.glow--core { left: 68.5%; top: 23.6%; width: 30%; aspect-ratio: 1; background: radial-gradient(circle, rgba(120, 225, 255, .8), rgba(40, 140, 255, 0) 65%); animation: breathe 3.6s ease-in-out infinite; }

/* la paleta se enfría: azul profundo y cian */
.scene__tint {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 44, 130, .34), rgba(12, 22, 70, .28) 60%, rgba(8, 12, 40, .2));
  opacity: calc(.45 + var(--p) * .55);
}
/* oscuro al llegar (continúa el final de la escena 01) y se aclara */
.scene__arrive {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 68% 24%, rgba(30, 60, 140, .4), #0B1030 70%);
  opacity: calc(clamp(0, calc(1 - var(--p) * 3.2), 1) * .55);
}
.scene--02 .hero {
  opacity: min(clamp(0, calc((var(--p) - .2) * 4), 1), clamp(0, calc(1 - var(--t2) * 3), 1));
  transform: translateY(calc(clamp(0, calc(1 - (var(--p) - .2) * 4), 1) * 28px));
}
.hero__accent.hero__accent--cyan { color: #8BE6FF; }
.scene--02 .hero__title { font-size: clamp(30px, 8.8vw, 44px); }

/* burbuja de KetherLabs: azul eléctrico y cian */
.bubble.bubble--lab {
  background: linear-gradient(100deg, rgba(70, 110, 255, .78) 0%, rgba(40, 170, 255, .74) 55%, rgba(60, 225, 240, .8) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -10px 18px rgba(20, 40, 120, .25),
    0 10px 30px rgba(60, 170, 255, .38),
    0 0 0 6px rgba(255, 255, 255, .04);
  text-shadow: 0 1px 2px rgba(10, 30, 90, .4);
}
.bubble.bubble--lab .bubble__arrow { background: rgba(20, 50, 130, .3); }
.bubble.bubble--lab:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -10px 18px rgba(20, 40, 120, .25), 0 14px 38px rgba(60, 170, 255, .5), 0 0 0 6px rgba(255, 255, 255, .06); }
.scene--02 .hero { padding-bottom: calc(40px + var(--safe-bottom)); }

/* ---------- transiciones: entrar a cada torre ---------- */
/* main js escribe en .journey: --t1 (01 → 02), --t2 (02 → 03), de 0 a 1, y --flash / --flash2 (pico a la mitad) */
.scene--01 { opacity: clamp(0, calc(1 - (var(--t1) - .45) * 2.4), 1); }
.scene--01 .stage {
  transform-origin: 59.8% 21%;
  transform: scale(calc(1 + var(--p) * .14 + var(--t1) * var(--t1) * 2.4));
  filter: blur(calc(var(--t1) * 5px));
}
/* la 02 entra con t1 (entrando a la torre) y se va con t2: paneo lateral suave, distinto a la primera */
.scene--02 { opacity: min(clamp(0, calc((var(--t1) - .38) * 2.4), 1), clamp(0, calc(1 - (var(--t2) - .35) * 2), 1)); }
.scene--02 .stage {
  transform-origin: 68.5% 24%;
  transform: translateX(calc(var(--t2) * -18%)) scale(calc(1 + (1 - var(--t1)) * .35 + var(--t2) * .06));
  filter: blur(calc((1 - var(--t1)) * 8px + var(--t2) * 1.5px));
}
/* KEIOS llega desde la derecha mientras la niebla cruza */
.scene--03 { opacity: clamp(0, calc((var(--t2) - .3) * 2), 1); }
.scene--03 .stage {
  transform-origin: 61.4% 40%;
  transform: translateX(calc((1 - var(--t2)) * 18%)) scale(calc(1.06 - var(--t2) * .06));
  filter: blur(calc((1 - var(--t2)) * 1.5px));
}
/* cortina de niebla que cruza de derecha a izquierda durante la transición 02 → 03 */
.mist {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 160%; z-index: 5; pointer-events: none;
  opacity: calc(var(--flash2) * 1.15);
  transform: translateX(calc(70% - var(--t2) * 130%));
  background:
    radial-gradient(34% 30% at 18% 28%, rgba(235, 238, 255, .8), rgba(235, 238, 255, 0) 72%),
    radial-gradient(36% 34% at 36% 58%, rgba(220, 240, 245, .78), rgba(220, 240, 245, 0) 72%),
    radial-gradient(32% 30% at 55% 22%, rgba(240, 232, 255, .72), rgba(240, 232, 255, 0) 72%),
    radial-gradient(38% 34% at 66% 66%, rgba(210, 245, 238, .75), rgba(210, 245, 238, 0) 72%),
    radial-gradient(34% 30% at 86% 40%, rgba(230, 236, 255, .7), rgba(230, 236, 255, 0) 72%);
  filter: blur(28px);
}
.flash {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: var(--flash);
  background: radial-gradient(60% 45% at 57% 30%, rgba(225, 250, 255, .95), rgba(110, 210, 255, .55) 35%, rgba(40, 90, 200, 0) 75%);
  mix-blend-mode: screen;
}
.scene:not(.is-active) { pointer-events: none; }

/* ---------- texto ---------- */
.hero { position: relative; padding: 0 var(--gutter); }
.hero__label { font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; }
.hero__title {
  font-family: var(--serif); font-weight: 500; text-transform: uppercase;
  font-size: clamp(34px, 10.4vw, 46px); line-height: 1.02; letter-spacing: .005em;
  text-shadow: 0 2px 24px rgba(20, 18, 42, .35);
}
.hero__title span { display: block; }
.hero__accent { color: var(--coral); }
.hero__support { margin-top: 16px; font-size: clamp(16px, 4.4vw, 19px); line-height: 1.45; color: var(--text-2); letter-spacing: .01em; }

.js .scene--01 .hero > * { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .scene--01.is-ready .hero > * { opacity: 1; transform: none; }
.js .scene--01.is-ready .hero > :nth-child(2) { transition-delay: .08s; }
.js .scene--01.is-ready .hero > :nth-child(3) { transition-delay: .16s; }
.js .scene--01.is-ready .hero > :nth-child(4) { transition-delay: .26s; }

/* ---------- botones ---------- */
.hero__actions { display: grid; gap: 12px; margin-top: 26px; }

/* burbuja de cristal (principal) */
.bubble {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 58px; padding: 0 64px 0 28px; border-radius: 999px; overflow: hidden; isolation: isolate;
  color: #fff; font: 600 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  background:
    linear-gradient(100deg, rgba(185, 166, 242, .78) 0%, rgba(232, 128, 170, .74) 52%, rgba(255, 168, 132, .82) 100%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -10px 18px rgba(120, 60, 120, .22),
    0 10px 30px rgba(232, 128, 150, .38),
    0 0 0 6px rgba(255, 255, 255, .04);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  text-shadow: 0 1px 2px rgba(80, 30, 70, .35);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* reflejo superior */
.bubble::before {
  content: ""; position: absolute; z-index: -1; left: 8%; right: 30%; top: 3px; height: 45%;
  border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  opacity: .32; filter: blur(2px);
}
/* brillo que recorre el botón */
.bubble::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  transform: skewX(-20deg); transition: left .9s var(--ease);
}
.bubble:hover::after, .bubble:focus-visible::after { left: 120%; }
.bubble:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -10px 18px rgba(120, 60, 120, .22), 0 14px 38px rgba(232, 128, 150, .5), 0 0 0 6px rgba(255, 255, 255, .06); }
.bubble:active { transform: scale(.985); }
.bubble__arrow {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; letter-spacing: 0; color: #fff;
  background: rgba(120, 50, 90, .28); border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .5s var(--ease), background .3s;
}
.bubble:hover .bubble__arrow { transform: translateY(-50%) translateX(3px); background: rgba(255, 255, 255, .22); }

/* secundario: cristal oscuro */
.ghost {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 24px;
  border-radius: 999px; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); white-space: nowrap;
  background: rgba(20, 18, 42, .28); border: 1px solid rgba(255, 214, 200, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .3s, border-color .3s, transform .4s var(--ease);
}
.ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 214, 200, .85); }
.ghost:active { transform: scale(.985); }

/* ---------- pie de la escena ---------- */
.scene__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 6px var(--gutter) calc(12px + var(--safe-bottom));
  font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2);
}
.scroll { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 44px; justify-content: flex-end; }
.scroll__line { position: relative; width: 1px; height: 34px; background: rgba(251, 246, 240, .35); margin-left: 3px; }
.scroll__dot { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--text); animation: drop 2.4s var(--ease) infinite; }
@keyframes drop { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { top: 27px; opacity: 1; } 100% { top: 27px; opacity: 0; } }
.place { text-align: right; line-height: 1.6; }

.next { height: 1px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero > *, .js .stage { transform: none; opacity: 1; transition: none; }
  .layer, .hero, .scene__foot { transform: none !important; }
  .glow, .layer--clouds span, .mote { animation: none; }
  .journey { height: auto; }
  .viewport { position: relative; height: auto; overflow: visible; }
  .scene { position: relative; height: 100vh; height: 100svh; opacity: 1 !important; pointer-events: auto !important; }
  .scene .stage { transform: none !important; filter: none !important; }
  .flash { display: none; }
  .scroll__dot { animation: none; top: 13px; }
  .bubble::after { display: none; }
}

/* ---------- celulares pequeños ---------- */
@media (max-height: 700px) {
  .hero__title { font-size: clamp(30px, 9vw, 40px); }
  .hero__actions { margin-top: 18px; gap: 10px; }
  .bubble { min-height: 52px; }
  .ghost { min-height: 48px; }
  .scene__foot { padding-top: 16px; }
}

/* ---------- tablet y escritorio ---------- */
@media (min-width: 900px) {
  :root { --gutter: 6vw; }
  .scene { justify-content: center; }
  .scene__veil {
    background:
      linear-gradient(180deg, rgba(20, 18, 42, .4) 0%, rgba(20, 18, 42, 0) 18%),
      linear-gradient(270deg, rgba(20, 18, 42, .9) 0%, rgba(20, 18, 42, .68) 36%, rgba(20, 18, 42, 0) 60%),
      linear-gradient(180deg, rgba(20, 18, 42, 0) 70%, var(--night) 100%);
  }
  /* Julian está a la izquierda de la imagen: el texto va a la derecha para no taparlo */
  .hero { max-width: 640px; padding-top: 80px; margin-left: auto; width: 46%; min-width: 520px; }
  .hero__title { font-size: clamp(44px, 4.2vw, 68px); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
  .hero__actions > a { flex: 0 0 auto; }
  .scene__foot { position: absolute; left: 0; right: 0; bottom: 0; }
  /* escena 02: la ciudad queda al centro-derecha; el texto va a la izquierda */
  .scene--02 .hero { margin-left: 0; margin-right: auto; padding-bottom: 0; }
  .scene--02 .scene__veil {
    background:
      linear-gradient(180deg, rgba(11, 16, 48, .45) 0%, rgba(11, 16, 48, 0) 18%),
      linear-gradient(90deg, rgba(11, 16, 48, .88) 0%, rgba(11, 16, 48, .6) 34%, rgba(11, 16, 48, 0) 58%),
      linear-gradient(180deg, rgba(11, 16, 48, 0) 70%, #0B1030 100%);
  }
}

/* escena 01: el velo del texto se retira cuando el texto ya se fue, para que el paisaje llene la pantalla */
.scene--01 .scene__veil { opacity: calc(1 - var(--p) * .75); }

/* ---------- escena 03 · KEIOS (único lugar con el teal #00D6A3 como acento) ---------- */
.scene--03 .layer--bg {
  transform-origin: 61.4% 40%;
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -6px + var(--p) * -3%), 0) scale(calc(1.08 - var(--p) * .08));
}
.scene--03 .layer--clouds { transform: translate3d(calc(var(--mx) * -14px), calc(var(--p) * 8%), 0); pointer-events: none; }
.scene--03 .layer--clouds span {
  background: radial-gradient(ellipse at 50% 60%, rgba(220, 255, 245, .85), rgba(150, 220, 210, .4) 45%, rgba(150, 220, 210, 0) 72%);
}
.scene--03 .layer--clouds span:nth-child(1) { top: 62%; left: -40%; width: 90%; height: 9%; opacity: .3; }
.scene--03 .layer--clouds span:nth-child(2) { top: 72%; left: 0%; width: 100%; height: 11%; opacity: .26; animation-duration: 70s; animation-delay: -25s; }
.scene--03 .layer--clouds span:nth-child(3) { top: 50%; left: 30%; width: 60%; height: 6%; opacity: .2; animation-duration: 58s; animation-delay: -12s; }
.scene--03 .mote { background: #D6FFF4; box-shadow: 0 0 8px 2px rgba(0, 214, 163, .55); }

/* el rayo, el anillo y el portal de la Torre laten en teal */
.glow--keios-beam { left: 61.4%; top: 20%; width: 4.5%; height: 40%; border-radius: 40%; background: radial-gradient(ellipse, rgba(150, 255, 230, .7), rgba(0, 214, 163, 0) 70%); animation: pulse 3s ease-in-out infinite; }
.glow--keios-ring { left: 61.4%; top: 19.3%; width: 26%; aspect-ratio: 1; background: radial-gradient(circle, rgba(0, 214, 163, 0) 42%, rgba(80, 255, 215, .55) 52%, rgba(0, 214, 163, 0) 64%); animation: breathe 4.2s ease-in-out infinite; }
.glow--keios-portal { left: 61.4%; top: 39.8%; width: 16%; aspect-ratio: 1; background: radial-gradient(circle, rgba(200, 255, 240, .85), rgba(0, 214, 163, 0) 65%); animation: pulse 2.6s ease-in-out infinite -1s; }

.scene--03 .scene__tint {
  background: linear-gradient(180deg, rgba(10, 60, 80, .3), rgba(6, 30, 50, .25) 60%, rgba(4, 16, 30, .2));
}
.scene--03 .scene__arrive { background: radial-gradient(120% 80% at 61% 40%, rgba(0, 120, 110, .35), #06141E 70%); opacity: calc(clamp(0, calc(1 - var(--p) * 3.2), 1) * .2); }
.scene--03 .scene__veil {
  background:
    linear-gradient(180deg, rgba(6, 20, 30, .4) 0%, rgba(6, 20, 30, 0) 15%),
    linear-gradient(180deg, rgba(6, 20, 30, 0) 40%, rgba(6, 20, 30, .5) 55%, rgba(6, 20, 30, .82) 74%, rgba(6, 20, 30, .94) 100%);
}
.scene--03 .hero {
  opacity: clamp(0, calc((var(--p) - .2) * 4), 1);
  transform: translateY(calc(clamp(0, calc(1 - (var(--p) - .2) * 4), 1) * 28px));
  padding-bottom: calc(40px + var(--safe-bottom));
}
.scene--03 .hero__title { font-size: clamp(30px, 8.8vw, 44px); }
.hero__accent.hero__accent--teal { color: #00D6A3; }

/* burbuja de KEIOS: cristal teal */
.bubble.bubble--keios {
  background: linear-gradient(100deg, rgba(0, 150, 140, .78) 0%, rgba(0, 200, 160, .74) 55%, rgba(80, 235, 200, .8) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -10px 18px rgba(0, 70, 60, .25),
    0 10px 30px rgba(0, 214, 163, .35),
    0 0 0 6px rgba(255, 255, 255, .04);
  text-shadow: 0 1px 2px rgba(0, 50, 45, .45);
}
.bubble.bubble--keios .bubble__arrow { background: rgba(0, 80, 70, .3); }
.bubble.bubble--keios:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -10px 18px rgba(0, 70, 60, .25), 0 14px 38px rgba(0, 214, 163, .5), 0 0 0 6px rgba(255, 255, 255, .06); }

@media (min-width: 900px) {
  /* la Torre queda al centro-derecha; el texto va a la izquierda, como en la 02 */
  .scene--03 .hero { margin-left: 0; margin-right: auto; padding-bottom: 0; }
  .scene--03 .scene__veil {
    background:
      linear-gradient(180deg, rgba(6, 20, 30, .45) 0%, rgba(6, 20, 30, 0) 18%),
      linear-gradient(90deg, rgba(6, 20, 30, .88) 0%, rgba(6, 20, 30, .6) 34%, rgba(6, 20, 30, 0) 58%),
      linear-gradient(180deg, rgba(6, 20, 30, 0) 70%, #06141E 100%);
  }
}

/* ==========================================================================
   EXPERIENCIA EDITORIAL (después del viaje cinematográfico) — fondo blanco
   Rosa estilo Uniswap como acento; violeta y cian solo donde aportan. Móvil primero.
   ========================================================================== */
:root {
  --paper: #FFFFFF;
  --paper-2: #FDF6FB;
  --ink: #15111F;
  --ink-2: #4B4558;
  --ink-3: #8A8398;
  --uni: #FF37C7;          /* rosa Uniswap */
  --uni-2: #FC72FF;        /* rosa claro Uniswap */
  --uni-soft: #FFEFFA;
  --violet: #7B61FF;
  --cyan: #0BA5C9;         /* cian legible sobre blanco */
  --ed-serif: "Instrument Serif", "Playfair Display", Georgia, serif;
  --sign: "Mrs Saint Delafield", "Segoe Script", cursive;
  --hair: rgba(21, 17, 31, .1);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- aterrizaje: nubes blancas que suben sobre KEIOS y llegan al blanco ---------- */
/* se monta sobre el final del viaje (margen negativo) para que el paso sea un difuminado continuo */
.landing {
  position: relative; z-index: 3; height: 70vh; height: 70svh; margin-top: -62vh; margin-top: -62svh; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 28%, rgba(255, 255, 255, .85) 58%, #fff 82%);
}
.landing__clouds span {
  position: absolute; border-radius: 50%; filter: blur(26px);
  background: radial-gradient(ellipse at 50% 55%, #fff 0%, rgba(255, 255, 255, .92) 38%, rgba(255, 255, 255, 0) 70%);
  animation: drift 80s linear infinite;
}
.landing__clouds span:nth-child(1) { top: 6%;  left: -40%; width: 120%; height: 30%; opacity: .55; }
.landing__clouds span:nth-child(2) { top: 14%; left: 20%;  width: 110%; height: 34%; opacity: .7; animation-duration: 95s; animation-delay: -30s; }
.landing__clouds span:nth-child(3) { top: 24%; left: -20%; width: 130%; height: 36%; opacity: .85; animation-duration: 110s; animation-delay: -55s; }
.landing__clouds span:nth-child(4) { top: 34%; left: 10%;  width: 120%; height: 34%; opacity: .95; animation-duration: 120s; animation-delay: -70s; }
.landing__clouds span:nth-child(5) { top: 44%; left: -30%; width: 140%; height: 40%; opacity: 1; animation-duration: 130s; animation-delay: -15s; }

/* ---------- fondo de la parte editorial ---------- */
.after { position: relative; isolation: isolate; color: var(--ink); background: var(--paper); }
.after::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* el tinte rosado entra suave: sin línea donde termina el aterrizaje blanco */
    linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 900px),
    radial-gradient(55% 22% at 95% 10%, rgba(252, 114, 255, .12), transparent 70%),
    radial-gradient(60% 20% at 0% 38%, rgba(123, 97, 255, .07), transparent 70%),
    radial-gradient(55% 20% at 100% 66%, rgba(11, 165, 201, .06), transparent 70%),
    radial-gradient(60% 22% at 5% 92%, rgba(255, 55, 199, .09), transparent 70%);
}

/* ---------- tipografía editorial ---------- */
.ed { max-width: 1160px; margin: 0 auto; padding: 44px var(--gutter); position: relative; }
.ed + .ed { border-top: 1px solid var(--hair); }
.ed__label { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--uni); margin-bottom: 14px; }
.ed__index { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.ed__index span { color: var(--uni); }
.ed__index span::after { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--ink-3); vertical-align: middle; margin-left: 12px; }
.ed__title { margin: 0; font-family: var(--ed-serif); font-weight: 400; font-size: clamp(42px, 12vw, 76px); line-height: 1.02; letter-spacing: -.01em; color: var(--ink); max-width: 14ch; }
.ed__title em { font-style: normal; color: var(--uni); }
.ed__lead { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 34em; }
.ed__body { margin-top: 18px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); max-width: 36em; }
.ed__quote { font-family: var(--ed-serif); font-size: clamp(30px, 8.5vw, 42px); line-height: 1.12; color: var(--ink); margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hair); }
.ed__next { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; min-height: 44px; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.ed__next-ring { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 55, 199, .45); color: var(--uni); font-size: 16px; letter-spacing: 0; }
.ed__next:hover { color: var(--ink); }

/* ---------- 01 · quién soy ---------- */
.about { padding-top: 0; }
/* sin borde: la foto se funde con el blanco hacia arriba y a los lados */
.about__photo { margin: 0 calc(var(--gutter) * -1) 26px; aspect-ratio: 4 / 5; max-width: 520px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 84%, transparent 100%); }
.about__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* mi historia en 3 pasos: línea vertical con número rosa */
.story { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; border-left: 1px solid rgba(255, 55, 199, .3); }
.story__step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 6px; padding: 0 0 22px 18px; }
.story__step:last-child { padding-bottom: 0; }
.story__step::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--uni); }
.story__n { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--uni); padding-top: 4px; }
.story__title { margin: 0; font-family: var(--ed-serif); font-size: 24px; line-height: 1.1; color: var(--ink); }
.story__text { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.story__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--uni); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 28px -12px rgba(255, 55, 199, .7); transition: transform .2s, box-shadow .2s; }
.story__cta:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(255, 55, 199, .8); }
.story__cta:active { transform: scale(.985); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chips li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); background: var(--paper-2); font-size: 13px; color: var(--ink-2); }
.about__sign { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; margin-top: 36px; }
.about__orbit { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(21, 17, 31, .25); position: relative; }
.about__orbit::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgba(255, 55, 199, .55); }
.about__orbit::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--uni); box-shadow: 0 0 10px rgba(255, 55, 199, .6); }
.about__verbs { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; line-height: 1.9; color: var(--ink-2); }
.about__signature { grid-column: 1 / -1; justify-self: end; margin-top: -6px; font-family: var(--sign); font-size: 48px; line-height: 1; color: var(--ink); transform: rotate(-6deg); }

/* ---------- 02 · lo que construyo ---------- */
/* carrusel de las 3 tarjetas (KetherLabs, KEIOS, AIPRENEUR): se desliza de lado en todos los tamaños */
.projects__list {
  display: flex; gap: 12px; margin: 34px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.projects__list::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .projects__list { cursor: grab; } }
.projects__list.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.projects__list.is-dragging * { pointer-events: none; }
.projects__list img { -webkit-user-drag: none; }
.projects__list:focus-visible { outline: 2px solid var(--uni); outline-offset: -2px; border-radius: 24px; }
.projects__list > .klab, .projects__list > .kx__card, .projects__list > .aip__card { flex: 0 0 90%; margin-top: 0; scroll-snap-align: start; }
/* las 3 tarjetas comparten estructura: imagen cuadrada arriba y texto abajo; el botón y el pie quedan siempre al fondo */
.pcard { display: flex; flex-direction: column; scroll-margin-top: 90px; }
.pcard__visual { position: relative; flex: none; margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 74%, transparent 100%); }
.pcard__body { position: relative; z-index: 4; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: -26px; padding: 0 18px 18px; }
.pcard__title { margin: 2px 0 0; font-family: var(--ed-serif); font-weight: 400; font-size: clamp(36px, 10vw, 54px); line-height: .95; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.pcard__desc { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 32em; }
.pcard__body > a { margin-top: auto; }
.pcard__body .pill { font-size: 9px; letter-spacing: .16em; padding: 4px 9px; } /* etiquetas discretas: App, Programa, Growth Partner */
.pcard .klab__tags, .pcard .kx__tags, .pcard .aip__tags { min-height: 5.4em; font-size: 9.5px; display: flex; flex-wrap: wrap; align-content: center; column-gap: .45em; } /* el pie mide lo mismo en las tres */
/* versión compacta: botón, círculos y pie más chicos para que el carrusel ocupe menos alto */
.pcard__body > a { min-height: 40px; font-size: 12px; }
.pcard .klab__foot, .pcard .kx__foot, .pcard .aip__foot { margin-top: 0; gap: 10px 12px; }
.pcard .klab__orb, .pcard .kx__orb, .pcard .aip__orbs li { width: 30px; height: 30px; }
.pcard .klab__tags, .pcard .kx__tags, .pcard .aip__tags { flex: 1 1 100px; letter-spacing: .1em; }
@media (min-width: 600px) {
  .pcard__body { padding: 6px 32px 30px; }
}
@media (min-width: 900px) {
  .pcard { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .pcard__visual { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, #000 80%, transparent 100%); }
  .pcard__body { justify-content: center; gap: 16px; margin-top: 0; padding: 40px 48px 40px 0; }
  .pcard__body > a { margin-top: 8px; }
  .pcard__desc { font-size: 17px; }
}
.projects__dots { display: flex; justify-content: center; gap: 4px; margin-top: 2px; }
.projects__dots button { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.projects__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgba(21, 17, 31, .18); transition: width .3s var(--ease), background .3s; }
.projects__dots button[aria-current="true"]::before { width: 22px; background: var(--uni); }
.projects__dots button:focus-visible { outline: 2px solid var(--uni); outline-offset: 2px; border-radius: 8px; }
.proj {
  --tone: var(--uni); --tone-soft: rgba(255, 55, 199, .28);
  position: relative; border-radius: 22px; overflow: hidden; background: var(--paper);
  border: 1px solid var(--tone-soft); box-shadow: 0 10px 30px rgba(21, 17, 31, .06);
  transition: border-color .3s, transform .4s var(--ease), box-shadow .4s;
}
.proj--keios { --tone: var(--cyan); --tone-soft: rgba(11, 165, 201, .3); }
.proj--method { --tone: var(--violet); --tone-soft: rgba(123, 97, 255, .3); }
.proj__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.proj__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 24%; transition: transform 1.2s var(--ease); }
.proj--keios .proj__media img { object-position: 62% 28%; }
.proj__media--crystal { display: grid; place-items: center;
  background: radial-gradient(70% 70% at 50% 40%, rgba(252, 114, 255, .35), transparent 70%), radial-gradient(90% 80% at 50% 100%, rgba(123, 97, 255, .28), transparent 70%), #F6F1FF; }
.crystal { width: 34%; filter: drop-shadow(0 12px 24px rgba(123, 97, 255, .35)); animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.proj__n { position: absolute; z-index: 1; top: 14px; left: 16px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--ink); }
.proj__body { position: relative; padding: 20px 22px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.proj__title { font-family: var(--ed-serif); font-weight: 400; font-size: 36px; line-height: 1; margin: 0; color: var(--ink); }
.proj__body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.proj__cta { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tone); }
.proj__cta span { transition: transform .3s var(--ease); }
.proj__cta:hover span { transform: translateX(4px); }
.pill { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; color: #C21A92; border: 1px solid rgba(255, 55, 199, .35); background: var(--uni-soft); }
.pill--cyan { color: #07789A; border-color: rgba(11, 165, 201, .35); background: #E8F8FC; }
.pill--violet { color: #5A3FE0; border-color: rgba(123, 97, 255, .35); background: #F1EEFF; }
@media (hover: hover) {
  .proj:hover { transform: translateY(-3px); border-color: var(--tone); box-shadow: 0 18px 44px rgba(21, 17, 31, .1); }
  .proj:hover .proj__media img { transform: scale(1.05); }
}

/* ---------- 02 · tarjeta destacada de KetherLabs: laboratorio digital ---------- */
/* el arte vive en .klab__art (contenedor de consulta): todo se escala con su ancho (cqw) */
.klab {
  position: relative; margin-top: 34px; border-radius: 26px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255, 55, 199, .22);
  background:
    radial-gradient(60% 45% at 78% 46%, rgba(252, 114, 255, .16), transparent 70%),
    radial-gradient(50% 40% at 10% 100%, rgba(123, 97, 255, .07), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FDFAFE 100%);
  box-shadow: 0 24px 60px -34px rgba(123, 97, 255, .35);
}
.klab__n { position: absolute; z-index: 5; top: 20px; left: 22px; font-size: 15px; font-weight: 500; letter-spacing: .1em; color: var(--ink); }

.klab__art { position: absolute; z-index: 1; top: 14%; bottom: 12%; left: 16%; right: 28%; container-type: inline-size; pointer-events: none; }
.klab__art::before { /* cuadrícula técnica muy tenue */
  content: ""; position: absolute; inset: 8% 0 4% 4%;
  background-image: linear-gradient(rgba(123, 97, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 97, 255, .09) 1px, transparent 1px);
  background-size: 9cqw 9cqw;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.klab__art > * { position: absolute; }
.klab__glow { left: 14%; top: 30%; width: 86%; height: 56%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 55, 199, .38), rgba(252, 114, 255, .14) 55%, transparent); filter: blur(10px); }
.klab__plus { left: 38%; top: 6%; font: 300 9cqw/1 var(--sans); color: var(--ink-2); }

/* ventana de código flotante */
.klab__term {
  left: 26%; top: 33%; width: 68%; aspect-ratio: 1.12; z-index: 2; padding: 4cqw 4.5cqw; border-radius: 6cqw;
  background: linear-gradient(160deg, #24202E 0%, #121019 60%, #0B0A10 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 6cqw 12cqw -4cqw rgba(40, 14, 70, .55), 0 0 10cqw rgba(255, 55, 199, .22);
  transform: perspective(900px) rotateY(-16deg) rotateX(12deg) rotate(13deg); transform-origin: 50% 50%;
}
.klab__bar { display: flex; gap: 1.6cqw; margin-bottom: 3cqw; }
.klab__bar i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #3A3546; }
.klab__bar i:first-child { background: var(--uni); }
.klab__code { margin: 0; font: 400 3.5cqw/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #D9D3E6; white-space: pre; overflow: hidden; }
.klab__code .c { color: #8C849C; }
.klab__code .k { color: #C4A8FF; }
.klab__code .s { color: #7FE3F0; }
.klab__code .f { color: #FF9BE0; }
.klab__code .p { color: #8C849C; }
.klab__cursor { display: inline-block; width: 1.8cqw; height: 4.2cqw; vertical-align: -.8cqw; background: var(--uni); animation: klabBlink 1.1s steps(1) infinite; }
.klab__side {
  position: absolute; right: -7%; top: 20%; width: 52%; margin: 0; padding: 4cqw 3.6cqw; list-style: none; border-radius: 4.5cqw;
  background: linear-gradient(160deg, rgba(64, 58, 78, .96), rgba(30, 27, 38, .96)); box-shadow: 0 4cqw 8cqw -2cqw rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .07) inset;
  display: grid; gap: 2.6cqw;
}
.klab__side li { display: flex; align-items: center; gap: 2.2cqw; font: 500 3.6cqw/1.2 var(--sans); color: #EAE6F2; white-space: nowrap; }
.klab__side i { font-style: normal; width: 3.6cqw; text-align: center; color: #B9B2C8; }

/* objetos geométricos */
.klab__crystals { left: 22%; top: 60%; width: 34%; z-index: 1; filter: drop-shadow(0 4cqw 5cqw rgba(60, 30, 90, .25)); }
.klab__sphere { left: 13%; top: 84%; width: 15%; aspect-ratio: 1; z-index: 2; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, #F1EEF5 28%, #C9C3D3 62%, #8F889E 100%); box-shadow: 0 3cqw 6cqw -1cqw rgba(60, 40, 90, .35); }
.klab__orbit { left: 2%; top: 68%; width: 100%; height: 22%; z-index: 3; transform: rotate(-17deg); overflow: visible; filter: drop-shadow(0 0 1.4cqw rgba(255, 55, 199, .7)); }
.klab__rock { left: 27%; top: 18%; width: 19%; z-index: 3; filter: drop-shadow(0 3cqw 4cqw rgba(60, 40, 90, .3)); }
.klab__link { left: 38%; top: 27%; width: 14%; height: 10%; z-index: 2; overflow: visible; }
.klab__cubes { left: 60%; top: 21%; width: 38%; z-index: 3; filter: drop-shadow(0 3cqw 5cqw rgba(123, 97, 255, .28)); }

/* anotaciones editoriales */
.klab__note {
  position: absolute; z-index: 4; margin: 0; border-radius: 14px; background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 26px -14px rgba(40, 20, 70, .3);
  color: var(--ink-2);
}
.klab__note--top { top: 16px; right: 14px; width: 44%; max-width: 230px; padding: 9px 10px 9px 24px; font-size: 11px; line-height: 1.5; }
.klab__dot { position: absolute; left: 10px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--uni); box-shadow: 0 0 8px rgba(255, 55, 199, .6); }
.klab__note--flow { top: 50%; right: 14px; display: grid; gap: 3px; padding: 10px 14px; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.klab__note--flow span:first-child { color: var(--ink); }

/* CTA y cierre */
.klab__cta { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--uni); }
.klab__cta span { transition: transform .3s var(--ease); }
.klab__cta:hover span, .klab__cta:focus-visible span { transform: translateX(5px); }
.klab__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 12px; }
.klab__orbs { display: flex; gap: 6px; margin: 0; padding: 0 14px 0 0; list-style: none; border-right: 1px solid var(--hair); }
.klab__orb { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 6px 14px -6px rgba(21, 17, 31, .4); }
.klab__orb--a { background: radial-gradient(circle at 50% 50%, #F28C7A 0 12%, #8A3B4C 16%, transparent 22%), radial-gradient(circle at 35% 30%, #5DA9D6, #1D3E66 55%, #0A1426 100%); }
.klab__orb--b { background: radial-gradient(circle at 55% 50%, #FFD6F4 0 8%, transparent 14%), conic-gradient(from 200deg at 55% 50%, #7B61FF, #FC72FF, #3B1E6E, #C04AD6, #7B61FF); }
.klab__orb--c { background:
    linear-gradient(90deg, transparent 22%, #3DE3A8 22% 48%, transparent 48%) 0 34% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 22%, #7FE3F0 22% 66%, transparent 66%) 0 46% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 30%, #C4A8FF 30% 58%, transparent 58%) 0 58% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 22%, #3DE3A8 22% 40%, transparent 40%) 0 70% / 100% 2px no-repeat,
    #0F0D15; }
.klab__tags { flex: 1 1 120px; margin: 0; font-size: 10.5px; font-weight: 600; line-height: 1.8; letter-spacing: .16em; text-transform: uppercase; color: #8A7F9E; }
.klab__tags span { white-space: nowrap; }
.klab__tags i { font-style: normal; margin: 0 .45em; color: #C3B8D3; }

/* movimiento sutil */
.klab__float { animation: klabFloat 7s ease-in-out infinite; }
.klab__float--b { animation-duration: 8s; animation-delay: -2s; }
.klab__float--c { animation-duration: 9s; animation-delay: -4s; }
.klab__float--slow { animation-duration: 11s; }
@keyframes klabFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.8cqw; } }
@keyframes klabBlink { 50% { opacity: 0; } }
@media (hover: hover) {
  .klab { transition: box-shadow .5s var(--ease), border-color .5s; }
  .klab:hover { border-color: rgba(255, 55, 199, .38); box-shadow: 0 30px 70px -34px rgba(123, 97, 255, .45); }
}
@media (prefers-reduced-motion: reduce) {
  .klab__float, .klab__cursor { animation: none; }
}
@media (min-width: 600px) {
  .klab__note--top { font-size: 12px; }
  .klab__note--flow { font-size: 10.5px; }
}
@media (min-width: 900px) {
  .klab__note--top { font-size: 13px; padding: 14px 16px 14px 32px; }
  .klab__dot { left: 14px; top: 20px; }
  .klab__note--flow { font-size: 11px; padding: 14px 18px; }
}

/* ---------- 02 · KEIOS: bloque propio con los colores de la referencia (KAI con luces magenta) ---------- */
.kx__card { --keios: #FF37C7; --keios-ink: #E01FAF; }

.kx__card {
  position: relative; margin-top: 34px; border-radius: 26px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255, 55, 199, .28);
  background:
    radial-gradient(70% 40% at 50% 34%, rgba(255, 55, 199, .1), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFDFC 100%);
  box-shadow: 0 24px 60px -36px rgba(160, 30, 140, .35);
}
.kx__n { position: absolute; z-index: 4; top: 20px; left: 22px; font-size: 15px; font-weight: 500; letter-spacing: .1em; color: var(--ink); }
.kx__deco, .kx__deco > * { position: absolute; }
.kx__deco { inset: 0; }
.kx__glow { left: 10%; top: 32%; width: 80%; height: 64%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 55, 199, .32), rgba(255, 55, 199, .1) 55%, transparent); filter: blur(12px); animation: kxGlow 6s ease-in-out infinite; }
.kx__orbit { left: 4%; top: 56%; width: 92%; height: 24%; transform: rotate(-7deg); overflow: visible; }
.kx__ball { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, #F3DDF8 45%, #D7B3EC 100%); box-shadow: 0 4px 10px -4px rgba(160, 30, 140, .45); }
.kx__ball--a { left: 15%; top: 61%; width: 14px; height: 14px; }
.kx__ball--b { left: 27%; top: 82%; width: 18px; height: 18px; }
.kx__ball--c { right: 7%; top: 64%; width: 16px; height: 16px; }

/* tarjetitas de presentación (secundarias: KAI las tapa un poco, como en la referencia) */
.kx__chip { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(21, 17, 31, .06); box-shadow: 0 10px 24px -14px rgba(21, 17, 31, .28); color: var(--ink-2); font-size: 11.5px; }
.kx__chip--today { left: 4%; top: 17%; width: 34%; list-style: none; display: grid; gap: 7px; transform: rotate(-4deg); }
.kx__chip--today li { display: flex; align-items: center; gap: 8px; }
.kx__chip--today li::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid #CFCBD6; }
.kx__chip--today li.is-done::before { border-color: var(--keios); background: var(--keios) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.kx__chip--today li:last-child { color: var(--ink-3); }
.kx__chip--cal { left: 3%; top: 55%; width: 30%; transform: rotate(-4deg); }
.kx__cal-title { display: block; margin-bottom: 8px; font-size: 11px; color: var(--ink-2); }
.kx__cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.kx__cal-grid i, .kx__cal-grid b { width: 5px; height: 5px; border-radius: 50%; background: #DAD6E0; justify-self: center; }
.kx__cal-grid b { width: 9px; height: 9px; margin: -2px; background: #fff; border: 2.5px solid var(--keios); }
.kx__chip--flow { right: 3%; top: 21%; width: 34%; display: grid; gap: 4px; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; }
.kx__chip--flow span:first-child { color: var(--ink); }
.kx__chip--grow { left: 4%; top: 49%; width: 31%; display: grid; gap: 5px; font-size: 11px; line-height: 1.45; }
.kx__bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.kx__bars i { width: 8px; border-radius: 2px; background: linear-gradient(180deg, var(--keios), #FC72FF); }
.kx__bars i:nth-child(1) { height: 25%; } .kx__bars i:nth-child(2) { height: 45%; } .kx__bars i:nth-child(3) { height: 70%; } .kx__bars i:nth-child(4) { height: 100%; }
.kx__hand { right: 5%; top: 5%; margin: 0; font-size: 10px; font-weight: 500; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); transform: rotate(-5deg); }
.kx__arrow { right: 34%; top: 4%; width: 13%; overflow: visible; }

/* KAI */
.kx__kai { position: absolute; z-index: 3; left: 50%; bottom: 4%; width: 41%; height: auto; translate: -50% 0;
  filter: drop-shadow(0 0 14px rgba(255, 55, 199, .35)) drop-shadow(0 18px 18px rgba(13, 15, 18, .22)); animation: kxFloat 7s ease-in-out infinite; }

/* identidad del producto */
.kx__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 2px; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--keios-ink); border-radius: 10px; }
.kx__cta span { transition: transform .3s var(--ease); }
.kx__cta:hover span, .kx__cta:focus-visible span { transform: translateX(5px); }
.kx__cta:focus-visible { outline: 2px solid var(--keios); outline-offset: 4px; }
.kx__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 4px; }
.kx__orbs { display: flex; gap: 6px; margin: 0; padding: 0 14px 0 0; list-style: none; border-right: 1px solid rgba(255, 55, 199, .35); }
.kx__orb { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 14px -6px rgba(21, 17, 31, .4); }
.kx__orb--kai { background: #F7EEF8; }
.kx__orb--kai img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; transform: scale(2); transform-origin: 50% 46%; }
.kx__orb--bars { background:
    linear-gradient(var(--keios), var(--keios)) 26% 74% / 3px 30% no-repeat,
    linear-gradient(var(--keios), var(--keios)) 42% 74% / 3px 44% no-repeat,
    linear-gradient(var(--keios), var(--keios)) 58% 74% / 3px 36% no-repeat,
    linear-gradient(var(--keios), var(--keios)) 74% 74% / 3px 56% no-repeat,
    radial-gradient(circle at 50% 30%, #3A2148, #120A18 75%); }
.kx__orb--planet { background: radial-gradient(circle at 36% 32%, #F6C8FF, #B44BD8 45%, #4A1660 100%); }
.kx__orb--planet::after { content: ""; position: absolute; left: -10%; top: 40%; width: 120%; height: 22%; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); transform: rotate(-16deg); }
.kx__tags { flex: 1 1 120px; margin: 0; font-size: 10.5px; font-weight: 600; line-height: 1.8; letter-spacing: .12em; text-transform: uppercase; color: #8A7F9E; }
.kx__tags span { white-space: nowrap; }
.kx__tags i { font-style: normal; margin: 0 .45em; color: #C3B8D3; }

@keyframes kxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kxGlow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@media (hover: hover) {
  .kx__card { transition: border-color .5s, box-shadow .5s var(--ease); }
  .kx__card:hover { border-color: rgba(255, 55, 199, .5); box-shadow: 0 30px 70px -36px rgba(160, 30, 140, .45); }
}
@media (prefers-reduced-motion: reduce) {
  .kx__kai, .kx__glow { animation: none; }
}
@media (max-width: 599px) {
  .kx__chip--cal, .kx__chip--grow { display: none; } /* en celular se simplifica para que KAI respire */
}
@media (min-width: 600px) {
  .kx__kai { width: 40%; }
  .kx__chip--today { width: 26%; top: 14%; }
  .kx__chip--flow { width: 24%; }
  .kx__chip--cal { width: 22%; }
  .kx__chip--grow { width: 22%; left: auto; right: 3%; top: 60%; }
  .kx__chip { font-size: 12.5px; padding: 12px 14px; }
  .kx__chip--flow { font-size: 10.5px; }
}
@media (min-width: 900px) {
  .kx__kai { width: 50%; }
  .kx__chip--today { width: 32%; }
  .kx__chip--flow { width: 30%; }
  .kx__chip--cal { width: 28%; }
  .kx__chip--grow { width: 28%; }
}

/* ---------- 03 · AIPRENEUR: pieza editorial; blanco, negro y gris con el rosa solo de acento ---------- */
.aip__card {
  position: relative; margin-top: 34px; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(255, 55, 199, .22); background: #FFFFFF;
  box-shadow: 0 24px 60px -40px rgba(21, 17, 31, .3);
}
.aip__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aip__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 2px; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--uni); border-radius: 10px; }
.aip__cta span { transition: transform .3s var(--ease); }
.aip__cta:hover span, .aip__cta:focus-visible span { transform: translateX(5px); }
.aip__cta:focus-visible { outline: 2px solid var(--uni); outline-offset: 4px; }
.aip__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 4px; }
.aip__orbs { display: flex; gap: 6px; margin: 0; padding: 0 14px 0 0; list-style: none; border-right: 1px solid rgba(255, 55, 199, .35); }
.aip__orbs li { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 14px -6px rgba(21, 17, 31, .4); }
.aip__orbs img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.aip__tags { flex: 1 1 140px; margin: 0; font-size: 10.5px; font-weight: 600; line-height: 1.8; letter-spacing: .12em; text-transform: uppercase; color: #8A7F9E; }
.aip__tags span { white-space: nowrap; }
.aip__tags i { font-style: normal; margin: 0 .45em; color: #C3B8D3; }
@media (hover: hover) {
  .aip__card { transition: border-color .5s, box-shadow .5s var(--ease); }
  .aip__card:hover { border-color: rgba(255, 55, 199, .4); box-shadow: 0 30px 70px -40px rgba(21, 17, 31, .38); }
  .aip__media img { transition: transform 1.2s var(--ease); }
  .aip__card:hover .aip__media img { transform: scale(1.02); }
}
@media (min-width: 900px) {
}

/* ---------- 03 · desde el laboratorio ---------- */
.posts { margin-top: 30px; border-top: 1px solid var(--hair); }
.post { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.post__thumb { width: 72px; height: 72px; border-radius: 14px; background-size: cover; background-position: center; }
.post__thumb--a { background-image: url("../img/escena-03-keios.webp"); background-position: 60% 30%; }
.post__thumb--b { background-image: url("../img/escena-02-ketherlabs.webp"); background-position: 68% 24%; }
.post__thumb--c { background-image: url("../img/escena-01-fondo-limpio.webp"); background-position: 30% 10%; }
.post__meta { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--uni); }
.post__title { margin: 4px 0 0; font-family: var(--ed-serif); font-size: 22px; line-height: 1.2; color: var(--ink); }

.after .ghost--cyan {
  margin-top: 26px; display: inline-flex; color: var(--ink); background: var(--paper); border-color: rgba(21, 17, 31, .18);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.after .ghost--cyan:hover { border-color: var(--uni); color: var(--uni); background: var(--uni-soft); }
.lab__quote { font-family: var(--ed-serif); font-size: clamp(30px, 8.5vw, 44px); line-height: 1.12; color: var(--ink); margin-top: 52px; padding: 6px 0 6px 18px; border-left: 2px solid var(--uni); }
/* ---------- 03 · construyendo en público: "ahora en el lab" (se edita a mano cada semana) ---------- */
.now { margin-top: 30px; border: 1px solid var(--hair); border-radius: 22px; background: var(--paper); overflow: hidden; }
.now__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--hair); }
.now__title { margin: 0; font-family: var(--ed-serif); font-size: 26px; line-height: 1.1; color: var(--ink); }
.now__date { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.now__list { list-style: none; margin: 0; padding: 0; }
.now__item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; padding: 16px 20px; }
.now__item + .now__item { border-top: 1px solid var(--hair); }
.now__project { grid-column: 1; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--uni); }
.now__text { grid-column: 1; font-size: 15px; line-height: 1.5; color: var(--ink); }
.now__dot { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--uni-2), var(--uni)); box-shadow: 0 0 0 3px rgba(252, 114, 255, .14), 0 0 8px rgba(255, 55, 199, .35); animation: nowPulse 3.2s ease-in-out infinite; } /* punto rosado: vivo en el lab */
@keyframes nowPulse { 50% { box-shadow: 0 0 0 6px rgba(252, 114, 255, 0), 0 0 8px rgba(255, 55, 199, .2); } }

/* ---------- 04 · alianzas: KetherLabs como Growth Partner ---------- */
.partner__label { margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.partner__who { margin-top: 34px; }
.partner__cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.partner__cases li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: baseline; padding: 16px 18px; border: 1px solid var(--hair); border-radius: 18px; background: var(--paper); }
.partner__cases p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.partner__cases strong { font-weight: 600; color: var(--ink); }
.partner__n { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--uni); }
.partner__give { margin-top: 34px; }
/* cinta rosada que se mueve de lado a lado */
.partner__give { overflow-x: clip; overflow-y: visible; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter); } /* la cinta inclinada no ensancha la página */
.ribbon { margin: 0 calc(var(--gutter) * -1 - 10px); overflow: hidden; background: linear-gradient(90deg, var(--uni), var(--uni-2)); box-shadow: 0 14px 30px -18px rgba(255, 55, 199, .8); transform: rotate(-1.2deg); }
.ribbon__track { display: flex; width: max-content; animation: ribbonMove 26s linear infinite; }
.ribbon__row { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ribbon__row li { display: flex; align-items: center; gap: 18px; padding: 13px 0 13px 18px; font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.ribbon__row li::after { content: "✦"; font-size: 10px; letter-spacing: 0; opacity: .85; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
@keyframes ribbonMove { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon__track { animation: none; } }
@media (min-width: 900px) { .ribbon { margin: 0; border-radius: 14px; transform: none; } }
.partner__steps { list-style: none; margin: 38px 0 0; padding: 0; display: grid; gap: 0; border-left: 1px solid rgba(255, 55, 199, .3); }
.partner__steps li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 0 0 22px 18px; }
.partner__steps li:last-child { padding-bottom: 0; }
.partner__steps li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--uni); }
.partner__step-n { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--uni); padding-top: 4px; }
.partner__step-title { margin: 0; font-family: var(--ed-serif); font-size: 24px; line-height: 1.1; color: var(--ink); }
.partner__step-text { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.partner__form { margin-top: 40px; padding: 24px 20px 22px; border: 1px solid rgba(255, 55, 199, .25); border-radius: 24px; background: linear-gradient(180deg, #FFFFFF, #FFF8FD); box-shadow: 0 24px 60px -40px rgba(160, 30, 140, .35); display: grid; gap: 16px; }
.partner__form-title { margin: 0; font-family: var(--ed-serif); font-size: 30px; line-height: 1.05; color: var(--ink); }
.pf__field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pf__field > label, .pf__field legend { padding: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); }
.pf__field input[type="text"], .pf__field input[type="email"], .pf__field input[type="tel"], .pf__field textarea, .pf__other {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(21, 17, 31, .14); background: #fff;
  font: 400 16px/1.4 var(--sans); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; resize: vertical;
}
.pf__field input::placeholder, .pf__field textarea::placeholder { color: var(--ink-3); }
.pf__field input:focus, .pf__field textarea:focus, .pf__field select:focus { border-color: var(--uni); box-shadow: 0 0 0 4px rgba(255, 55, 199, .15); }
.pf__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pf__choices legend { width: 100%; margin-bottom: 6px; }
.pf__choices label { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(21, 17, 31, .14); background: #fff; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.pf__choices label input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pf__choices label:has(input:checked) { border-color: var(--uni); background: var(--uni-soft); color: #C21A92; }
.pf__choices label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(255, 55, 199, .3); }
.pf__hint { font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.pf__choices .pf__other { flex: 1 1 100%; margin-top: 4px; }
.pf__choices .pf__other[hidden] { display: none; }
.pf__send { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--uni), var(--uni-2)); color: #fff; font: 600 14px var(--sans); box-shadow: 0 12px 28px -12px rgba(255, 55, 199, .7); transition: transform .2s; }
.pf__send:hover { transform: translateY(-1px); }
.pf__send:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pf__send[disabled] { opacity: .6; cursor: wait; }
.pf__status { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pf__status:empty { display: none; }
.partner__form.is-error .pf__status { color: #B4235A; }
.partner__form.is-done .pf__status { color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .now__dot { animation: none; } }
@media (min-width: 900px) {
  .lab .now { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; align-self: start; }
  .partner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: start; }
  .partner > .ed__index, .partner > .ed__title, .partner > .ed__body, .partner > .partner__who, .partner > .partner__give, .partner > .partner__steps { grid-column: 1; }
  .partner > .partner__form { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; position: sticky; top: 100px; padding: 32px 30px 28px; }
}

/* ---------- 04 · notas del lab ---------- */
.newsletter__art {
  margin: 30px 0 0; border-radius: 24px; aspect-ratio: 3 / 2; overflow: hidden;
  background: url("../img/notas-del-lab.webp") 50% 50% / cover no-repeat; /* escritorio del lab con KAI y Notas del Lab */
  box-shadow: 0 16px 40px rgba(21, 17, 31, .12);
}
.nl-form { margin-top: 26px; position: relative; max-width: 560px; }
.nl-form__field { position: relative; display: flex; align-items: center; border-radius: 999px; border: 1px solid rgba(21, 17, 31, .16);
  background: var(--paper); box-shadow: 0 6px 20px rgba(21, 17, 31, .06); transition: border-color .3s, box-shadow .3s; }
.nl-form__field:focus-within { border-color: var(--uni); box-shadow: 0 0 0 4px rgba(255, 55, 199, .15); }
.nl-form input { flex: 1; min-width: 0; min-height: 60px; padding: 0 22px; border: 0; background: transparent; color: var(--ink); font: 400 16px var(--sans); outline: none; }
.nl-form input::placeholder { color: var(--ink-3); }
.nl-form__send { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; margin-right: 6px; border-radius: 999px; border: 0; cursor: pointer; color: #fff; font: 600 14px var(--sans); white-space: nowrap;
  background: linear-gradient(135deg, var(--uni), var(--uni-2)); box-shadow: 0 6px 18px rgba(255, 55, 199, .35); transition: transform .3s var(--ease); }
.nl-form__send:hover { transform: translateX(2px); }
.nl-form__send:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nl-form__send:disabled { opacity: .6; cursor: wait; }
.nl-form__note { display: flex; gap: 10px; margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.nl-form__note > span:first-child { color: var(--uni); }
.nl-form__note strong { font-weight: 600; color: var(--ink); }
.nl-perks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.nl-perks li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.nl-perks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--uni-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23FF37C7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.menu__cta { color: var(--uni) !important; }
/* kit gratis de Notas del Lab */
.kit { margin-top: 24px; padding: 18px 18px 6px; border-radius: 20px; border: 1px solid rgba(255, 55, 199, .25); background: linear-gradient(180deg, #FFFFFF, #FFF7FC); max-width: 560px; }
.kit__title { margin: 0 0 6px; font-family: var(--ed-serif); font-size: 24px; line-height: 1.1; color: var(--ink); }
.kit__title span { color: var(--uni); }
.kit__list { list-style: none; margin: 0; padding: 0; }
.kit__list li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 12px 0; }
.kit__list li + li { border-top: 1px solid var(--hair); }
.kit__n { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--uni); padding-top: 3px; }
.kit__list strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.kit__list div > span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.nl-form__send { padding: 0 16px; font-size: 13px; }
.nl-form__status { min-height: 1.4em; margin-top: 10px; font-size: 14px; }
.nl-form.is-error .nl-form__field { border-color: #E5487A; }
.nl-form.is-error .nl-form__status { color: #C8285C; }
.nl-form.is-done .nl-form__status { color: var(--ink); font-weight: 500; }

.social { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--hair); }
.social__title { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.social__list { display: grid; gap: 10px; }
.social__list a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; border-radius: 16px; border: 1px solid var(--hair); background: var(--paper); transition: border-color .3s, background .3s; }
.social__list a:hover { border-color: rgba(255, 55, 199, .45); background: var(--uni-soft); }
.social__list svg { width: 24px; height: 24px; color: var(--uni); flex: none; }
.social__list span { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.social__list strong { display: block; font-weight: 500; font-size: 14px; color: var(--ink); }

/* ---------- pie ---------- */
.foot { display: grid; gap: 6px; padding: 48px var(--gutter) calc(36px + var(--safe-bottom)); border-top: 1px solid var(--hair); background: var(--paper-2); color: var(--ink-3); font-size: 14px; }
.foot__mark { font-family: var(--ed-serif); font-size: 42px; line-height: 1; color: var(--ink); margin: 0 0 10px; }
.foot__name { margin: 0; color: var(--ink); font-weight: 500; }
.foot__tag { margin: 0; color: var(--ink-2); }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; }
.foot__links a { min-height: 32px; display: inline-flex; align-items: center; color: var(--ink-2); }
.foot__links a:hover { color: var(--uni); }
.foot__meta { margin: 14px 0 0; font-size: 12px; letter-spacing: .06em; }
.foot__meta span:first-child { color: var(--uni); }

/* ---------- encabezado sobre blanco ---------- */
.top { transition: background .4s, color .4s, backdrop-filter .4s; }
.top.is-solid { color: var(--ink); text-shadow: none; background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); }
.top.is-solid .top__menu { color: var(--ink); }

/* ---------- apariciones ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .landing__clouds span, .crystal { animation: none; }
  .landing { margin-top: 0; height: 30vh; }
}

/* ---------- tablet y escritorio ---------- */
@media (min-width: 600px) {
  .projects__list > .klab, .projects__list > .kx__card, .projects__list > .aip__card { flex-basis: 86%; }
}
@media (min-width: 900px) {
  .ed { padding-top: 84px; padding-bottom: 84px; }
  .about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; }
  .about__text { display: contents; }
  .about .ed__label, .about .ed__title { grid-column: 2; }
  .about .about__photo { grid-column: 1; grid-row: 1 / span 12; align-self: start; position: sticky; top: 100px; margin: 0; max-width: none; -webkit-mask-image: radial-gradient(120% 100% at 50% 62%, #000 52%, transparent 78%); mask-image: radial-gradient(120% 100% at 50% 62%, #000 52%, transparent 78%); }
  .about .ed__lead, .about .ed__body, .about .story, .about .chips, .about .about__sign, .about .ed__quote, .about .ed__next { grid-column: 2; }
  .projects__list { gap: 24px; }
  .projects__list > .klab, .projects__list > .kx__card, .projects__list > .aip__card { flex-basis: 100%; }
  .lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; }
  .lab > .ed__index, .lab > .ed__title { grid-column: 1; }
  .lab > .ed__body { grid-column: 1; }
  .lab .posts { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .lab .ghost--cyan { grid-column: 2; justify-self: start; }
  .lab .lab__quote { grid-column: 1; grid-row: 4; margin-top: 40px; align-self: end; }
  .newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .newsletter > .ed__index, .newsletter > .ed__title, .newsletter > .ed__body, .newsletter > .nl-perks, .newsletter > .kit, .newsletter > .nl-cta, .newsletter > .nl-form, .newsletter > .social { grid-column: 1; }
  .newsletter__art { grid-column: 2; grid-row: 1 / span 6; margin: 0; aspect-ratio: 4 / 3; background-position: 52% 60%; }
  .foot { grid-template-columns: 1fr auto; align-items: end; padding-left: 6vw; padding-right: 6vw; }
  .foot > :not(.foot__links) { grid-column: 1; }
  .foot__links { grid-column: 2; grid-row: 1 / span 3; justify-content: flex-end; }
}

/* ---------- ventana del kit gratis (se abre con .js-kit-open) ---------- */
.nl-cta { margin-top: 22px; max-width: 560px; }
.nl-cta .pf__send { text-decoration: none; }
.kitm {
  width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 26px 22px 22px; overflow: auto;
  border: 1px solid rgba(255, 55, 199, .28); border-radius: 26px; color: var(--ink);
  background: radial-gradient(70% 40% at 90% 0%, rgba(252, 114, 255, .14), transparent 70%), linear-gradient(180deg, #FFFFFF, #FFF8FD);
  box-shadow: 0 40px 90px -30px rgba(60, 20, 80, .5);
}
.kitm[open] { animation: kitmIn .35s var(--ease); }
.kitm::backdrop { background: rgba(21, 17, 31, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes kitmIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.kitm__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 26px; line-height: 1; cursor: pointer; }
.kitm__close:hover { background: var(--uni-soft); color: var(--uni); }
.kitm__close:focus-visible { outline: 2px solid var(--uni); outline-offset: 2px; }
.kitm__eyebrow { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--uni); }
.kitm__title { margin: 8px 0 0; font-family: var(--ed-serif); font-weight: 400; font-size: 38px; line-height: 1; color: var(--ink); }
.kitm__title em { font-style: normal; color: var(--uni); }
.kitm__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.kitm__list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.kitm__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--uni-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23FF37C7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat; }
.kitm__form { display: grid; gap: 14px; margin-top: 20px; }
.kitm__phone { display: grid; grid-template-columns: 108px 1fr; gap: 8px; }
.kitm__phone select { width: 100%; min-height: 50px; padding: 0 10px; border-radius: 14px; border: 1px solid rgba(21, 17, 31, .14); background: #fff; font: 400 15px var(--sans); color: var(--ink); outline: none; }
.kitm__phone select:focus { border-color: var(--uni); box-shadow: 0 0 0 4px rgba(255, 55, 199, .15); }
.kitm__consent { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.kitm__consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--uni); }
.kitm__send { width: 100%; justify-content: center; }
.kitm__form.is-error .pf__status { color: #B4235A; }
.kitm__form.is-done .pf__status { color: var(--ink); font-weight: 500; }
html.kit-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .kitm[open] { animation: none; } }