/*
  Las escenas que le hablan al vendedor: «Why us» con formas de particulas, el salto
  de «stuck» a «leading» con el fractal, y el camino de uno a una organizacion.

  Van en su propio archivo porque reemplazan a dos secciones que hablaban del
  sistema —capturas con numeros y la figura de la AI— y el giro de la pagina
  es justamente ese: menos producto, mas la vida de quien vende.
*/

/* ================================================================ why us */

/*
  Minimo y en silencio. Negro puro; la forma de particulas sola en el centro;
  debajo, separado de ella, el texto: la palabra en versalita fina y muy
  espaciada, una frase en dos tiempos y los beneficios en una linea. Nada se
  superpone. El color de cada punto (--c1) aparece en la forma y en un solo
  detalle del texto, nunca en bloques.
*/
.warp { position: relative; z-index: 1; height: 720vh; background: var(--ink); }
.warp__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); --c1: #8FD3FF; --c2: #fff; }

.warp__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.warp__flash {
  position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--flash, 0) * .6);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c1) 22%, transparent) 0%, rgba(0,0,0,0) 45%);
}

.warp__eyebrow {
  position: absolute; z-index: 2; left: var(--pad); white-space: nowrap;
  top: clamp(88px, 12vh, 118px); top: clamp(88px, 12svh, 118px); margin: 0;
}

.warp__stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.warp__item {
  position: absolute; left: 0; right: 0;
  bottom: clamp(56px, 10vh, 110px); bottom: clamp(56px, 10svh, 110px);
  display: grid; justify-items: center; text-align: center; padding: 0 var(--pad);
}

/* La palabra: fina, espaciada, sin efectos. Cada letra entra por su cuenta. */
.warp__word {
  margin: 0 -0.34em 0 0; /* compensa el espacio de la ultima letra */
  font-size: clamp(34px, 4.4vw, 72px); font-weight: 300; line-height: 1; letter-spacing: .34em;
  text-transform: uppercase; color: #fff;
}
.warp__word .l {
  display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(6px);
  transition: opacity .7s ease, transform 1s var(--ease), filter .7s ease;
  transition-delay: calc(var(--i) * 45ms);
}
.warp__item.is-on .warp__word .l { opacity: 1; transform: none; filter: blur(0); }

/* Una raya fina con el color del punto separa la palabra de la frase. */
.warp__line {
  position: relative; margin: clamp(22px, 3vh, 34px) 0 0; padding-top: clamp(22px, 3vh, 34px);
  max-width: 640px; color: #7C8496; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.55; font-weight: 300;
}
.warp__line::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 40px; height: 1px; margin-left: -20px;
  background: var(--c1); box-shadow: 0 0 12px var(--c1);
  transform: scaleX(0); transition: transform .9s var(--ease) .25s;
}
.warp__line b { color: #fff; font-weight: 400; }
.warp__item.is-on .warp__line::before { transform: scaleX(1); }

.warp__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0;
  margin: clamp(16px, 2.4vh, 24px) 0 0; padding: 0; list-style: none;
}
.warp__list li {
  font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #9097A8;
  white-space: nowrap;
}
.warp__list li + li::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--c1); margin: 0 16px; vertical-align: middle; transform: translateY(-1px); }

.warp__line, .warp__list {
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s ease, transform .9s var(--ease);
}
.warp__item.is-on .warp__line { opacity: 1; transform: none; transition-delay: .35s; }
.warp__item.is-on .warp__list { opacity: 1; transform: none; transition-delay: .55s; }
.warp__item:not(.is-on) .warp__word .l,
.warp__item:not(.is-on) .warp__line,
.warp__item:not(.is-on) .warp__list { transition-delay: 0s; transition-duration: .35s; }

/* El indice: cinco numeros en vertical a la derecha, el activo encendido. */
.warp__index {
  position: absolute; z-index: 2; right: var(--pad); top: 50%; transform: translateY(-50%);
  display: grid; gap: 18px; margin: 0; padding: 0; list-style: none;
}
.warp__index li {
  position: relative; padding-right: 22px; text-align: right;
  display: flex; align-items: baseline; justify-content: flex-end; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.3); transition: color .5s ease;
}
/* el numero en mono, la palabra en la tipografia de la pagina */
.warp__index b {
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .12em; color: rgba(255,255,255,.3); transition: color .5s ease;
}
.warp__index li.is-on b { color: var(--c1); }
.warp__index li::after {
  content: ''; position: absolute; right: 0; top: 50%; width: 12px; height: 1px;
  background: currentColor; transform-origin: 100% 50%; transition: transform .5s var(--ease), background .5s ease;
}
.warp__index li.is-on { color: #fff; }
.warp__index li.is-on::after { transform: scaleX(1.6); background: var(--c1); }

@media (max-width: 900px) {
  .warp { height: 500vh; height: 500svh; }
  /* Aire con la barra: pegados a 62-66px se leian como parte del menu. */
  .warp__eyebrow { left: 50%; transform: translateX(-50%); top: 92px; font-size: clamp(9.5px, 2.8vw, 11px); }
  /*
    En telefono los rotulos quedan encima de la escena y no al costado: el
    nombre del capitulo se apoyaba sobre el polvo blanco de Why us y no se
    leia. Una cama oscura debajo de la letra los despega. Sobre negro no se ve,
    que es donde estan el resto del tiempo.
  */
  .warp__eyebrow, .path__eyebrow, .bloom__eyebrow {
    text-shadow: 0 1px 3px rgba(4,5,10,.95), 0 0 18px rgba(4,5,10,.9);
  }
  .warp__flash { background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c1) 22%, transparent) 0%, rgba(0,0,0,0) 50%); }
  .warp__item { bottom: clamp(58px, 11svh, 98px); }
  .warp__word { font-size: clamp(26px, 8vw, 40px); letter-spacing: .26em; margin-right: -.26em; }
  .warp__line { font-size: 15px; max-width: 32ch; }
  .warp__list { flex-direction: column; gap: 8px; }
  .warp__list li { font-size: 11px; letter-spacing: .16em; }
  .warp__list li + li::before { display: none; }
  .warp__index { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .warp { height: auto; }
  .warp__gl, .warp__flash, .warp__index { display: none; }
  .warp__pin { position: relative; height: auto; padding: 120px 0 40px; }
  .warp__eyebrow { position: relative; top: auto; left: auto; transform: none; text-align: center; }
  .warp__stage { position: relative; }
  .warp__item { position: relative; bottom: auto; padding: 56px var(--pad); }
  .warp__word .l, .warp__line, .warp__list { opacity: 1; transform: none; filter: none; }
}

/* ================================================================ el salto */

/*
  «From stuck at a desk» → «to leading your own team.»

  Capas, de atras hacia adelante: las particulas doradas, el fractal (los dos
  con `screen`, que borra su negro contra el de la pagina), un velo oscuro en
  el centro para que la frase se lea sobre la explosion, el destello y el
  texto. Las clases las pone el JS leyendo el reloj del fractal:
    is-crumble  la primera linea se desarma
    is-bloom    la explosion: entra la segunda linea y el destello
    is-calm     el fractal queda de fondo, mas apagado, y entra la bajada
*/
/* Tres pantallas: la primera es el cruce desde Why us (se pisan, ver
   js/flow.js), la del medio es la escena sola y la ultima el cruce hacia el
   camino. */
.bloom { position: relative; z-index: 2; height: 300vh; margin-top: -100vh; background: transparent; }
.bloom__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink);
  display: grid; place-items: center;
}
.bloom__dust, .bloom__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: screen;
}
/*
  La escena entra encendiendose, no cortada. Antes de llegar el fractal y las
  particulas estan apagados; cuando la seccion asoma (is-near) suben en un
  fundido, y el fractal arranca quieto en su primer cuadro —el cristal—, que es
  exactamente donde empieza el video. Asi no hay salto al darle play.
*/
.bloom__dust { opacity: 0; transition: opacity 1.6s ease; }
.bloom.is-near .bloom__dust { opacity: .55; }
.bloom__video { opacity: 0; transform: scale(1.02); transition: opacity 2.4s ease, transform 12s cubic-bezier(.2, .6, .2, 1); }
.bloom.is-near .bloom__video { opacity: .95; }
.bloom.is-bloom .bloom__video { transform: scale(1.12); }
/* El bucle entra fundido sobre el ultimo cuadro de la explosion y el fractal
   nunca se queda quieto. */
.bloom__loop { opacity: 0; transition: opacity 1.2s ease, transform 12s cubic-bezier(.2, .6, .2, 1); }
.bloom.is-loop .bloom__loop { opacity: .6; }
.bloom.is-loop #bloomVideo { opacity: 0; transition: opacity 1.2s ease .3s; }
.bloom.is-bloom .bloom__dust { opacity: .3; }
.bloom.is-near.is-calm .bloom__video { opacity: .5; }

.bloom__scrim {
  position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background:
    radial-gradient(ellipse 62% 44% at 50% 52%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
  transition: opacity 1.4s ease;
}
.bloom.is-bloom .bloom__scrim { opacity: 1; }
/* Arriba y abajo se funde siempre, aun antes de la explosion. */
.bloom__pin::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* Bordes largos: la explosion llena el cuadro y un fundido corto se leia
     como un corte contra la seccion de al lado. */
  background: linear-gradient(180deg, var(--ink) 0%, rgba(4,5,10,.6) 12%, rgba(4,5,10,0) 30%, rgba(4,5,10,0) 68%, rgba(4,5,10,.7) 86%, var(--ink) 100%);
}

.bloom__flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,236,190,.95) 0%, rgba(255,160,120,.45) 22%, rgba(255,120,180,.12) 48%, rgba(0,0,0,0) 70%);
}
.bloom.is-bloom .bloom__flash { animation: estallido 1.5s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes estallido {
  0%   { opacity: 0; transform: scale(.3); }
  14%  { opacity: 1; }
  100% { opacity: 0; transform: scale(2.2); }
}

.bloom__copy { position: relative; z-index: 3; text-align: center; padding: 0 var(--pad); }
.bloom__eyebrow { margin: 0 0 22px; opacity: 0; transition: opacity 1s ease .2s; color: #F3D9B8; text-shadow: 0 1px 4px #000, 0 0 20px rgba(0,0,0,.9); }
.bloom.is-on .bloom__eyebrow { opacity: 1; }

.bloom__title { display: grid; margin: 0; }
.bloom__from, .bloom__to { grid-area: 1 / 1; align-self: center; }

.bloom__from {
  font-size: clamp(34px, 5.6vw, 88px); font-weight: 600; letter-spacing: -.045em; line-height: 1;
  color: #D5D9E3; white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 36px rgba(0,0,0,.85);
}
.bloom__from .ch {
  display: inline-block; white-space: pre;
  opacity: 0; transform: translateY(18px); filter: blur(6px);
  transition: opacity .7s ease, transform .9s var(--ease), filter .7s ease;
  transition-delay: calc(var(--i) * 28ms);
}
.bloom.is-on .bloom__from .ch { opacity: 1; transform: none; filter: blur(0); }
/* Se desarma: cada letra sale para su lado, girando, y se apaga en el polvo. */
.bloom.is-on.is-crumble .bloom__from .ch {
  opacity: 0; filter: blur(5px);
  transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.35);
  transition: opacity 1.3s ease, transform 1.6s cubic-bezier(.55, 0, .75, .35), filter 1.3s ease;
  transition-delay: var(--d);
}

.bloom__to {
  font-size: clamp(46px, 8.6vw, 150px); font-weight: 800; letter-spacing: -.055em; line-height: .92;
  text-wrap: balance;
  filter: drop-shadow(0 0 28px rgba(255,170,120,.35)) drop-shadow(0 6px 40px rgba(0,0,0,.6));
}
.bloom__to .bw {
  display: inline-block;
  background: linear-gradient(100deg, #FFE08A 0%, #FF9A5C 38%, #FF6FB5 68%, #8FD8FF 100%);
  background-size: 220% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Aire abajo: el recorte del degradado le comia la cola a la g. */
  padding-bottom: .1em; margin-bottom: -.1em;
  opacity: 0; transform: scale(2.1); filter: blur(18px);
}
.bloom.is-bloom .bloom__to .bw {
  animation:
    golpe 1s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 110ms) both,
    brillo-oro 6s ease-in-out calc(1.4s + var(--i) * 110ms) infinite alternate;
}
@keyframes golpe {
  0%   { opacity: 0; transform: scale(2.1); filter: blur(18px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes brillo-oro { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.bloom__sub {
  margin: clamp(22px, 3.6vh, 40px) auto 0; max-width: 520px;
  color: #EDE6DE; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; font-weight: 400;
  text-shadow: 0 1px 4px #000, 0 0 24px rgba(0,0,0,.95);
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.bloom.is-calm .bloom__sub { opacity: 1; transform: none; }

@media (max-width: 900px) {
  /* Dos pantallas de recorrido con la escena fijada: la transformacion del
     fractal dura seis segundos y medio y antes, scrolleando rapido, se la
     pasaba de largo sin verla. */
  .bloom { height: 220vh; height: 220svh; margin-top: -34vh; margin-top: -34svh; }
  .bloom__pin { position: sticky; }
  /* el fractal entra en una esfera: en telefono se agranda para que llene el
     cuadro sin tocar los bordes */
  .bloom__video { transform: scale(1.14); }
  .bloom.is-bloom .bloom__video { transform: scale(1.24); }
  .bloom.is-calm .bloom__video { transform: scale(1.3) rotate(1deg); }
  .bloom__from { font-size: clamp(26px, 8.4vw, 44px); }
  .bloom__to { font-size: clamp(44px, 13.5vw, 76px); }
  .bloom__to { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bloom { height: auto; margin-top: 0; }
  .bloom__pin { position: relative; }
  .bloom__video { opacity: .45; }
  .bloom__scrim { opacity: 1; }
  .bloom__from { display: none; }
  .bloom__eyebrow, .bloom__sub { opacity: 1; transform: none; }
  .bloom__to .bw { opacity: 1; transform: none; filter: none; animation: none; }
}

/* ============================================================== el camino */

/*
  «Your path»: una red que crece desde un punto.

  En el centro, un nucleo que sos vos. Con el scroll aparecen tus primeros
  reclutas, despues los de ellos, y al final una organizacion entera girando en
  el espacio, con pulsos de luz que viajan por las conexiones hacia el centro.
  Lo dibuja js/path.js en un lienzo 2D. Es el mismo argumento de la historia
  animada que habia antes, pero en el idioma visual del resto de la pagina.
*/
.path { position: relative; z-index: 3; height: 480vh; margin-top: -100vh; background: transparent; }
.path__pin { background: var(--ink); }
.path__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.path__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.path__pin::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(4,5,10,0) 50%, rgba(4,5,10,.85) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(4,5,10,0) 16%, rgba(4,5,10,0) 84%, var(--ink) 100%);
}

.path__eyebrow {
  position: absolute; z-index: 3; left: var(--pad);
  top: clamp(90px, 12vh, 130px); top: clamp(90px, 12svh, 130px); margin: 0;
}

.path__stage { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.path__item {
  position: absolute; left: var(--pad); bottom: clamp(70px, 13vh, 140px); bottom: clamp(70px, 13svh, 140px);
  max-width: min(560px, 44vw);
}
.path__n {
  display: block; margin-bottom: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .26em; color: #7FB0FF;
}
.path__title {
  margin: 0; font-size: clamp(38px, 5.4vw, 84px); font-weight: 700; letter-spacing: -.05em; line-height: .95;
  color: #fff; text-wrap: balance;
}
.path__title em {
  font-style: normal;
  background: linear-gradient(100deg, #9CC8FF 0%, #FFFFFF 50%, #7FB0FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.path__text { margin: 18px 0 0; color: var(--text-2); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; font-weight: 300; max-width: 460px; }

.path__n, .path__title, .path__text, .path__cta {
  opacity: 0; transform: translateY(26px); filter: blur(10px);
  transition: opacity .5s ease, transform .7s var(--ease), filter .5s ease;
}
.path__item.is-on .path__n,
.path__item.is-on .path__title,
.path__item.is-on .path__text,
.path__item.is-on .path__cta { opacity: 1; transform: none; filter: blur(0); }
.path__item.is-on .path__title { transition-delay: .06s; }
.path__item.is-on .path__text { transition-delay: .16s; }
.path__item.is-on .path__cta { transition-delay: .28s; }
.path__item.is-on { pointer-events: auto; }

/* El ultimo paso va centrado: es el remate. */
.path__item--final {
  left: 50%; bottom: auto; top: 50%; transform: translate(-50%, -50%);
  max-width: none; width: 100%; text-align: center; padding: 0 var(--pad);
}
.path__item--final::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: min(1400px, 150vw); height: 640px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(4,5,10,.92), rgba(4,5,10,.6) 55%, rgba(4,5,10,0));
}
.path__item--final .path__title { font-size: clamp(64px, 12vw, 200px); text-shadow: 0 0 60px rgba(90,150,255,.35); }
.path__cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.path__cta .btn { min-width: 220px; height: 48px; }
.path__cta small { color: var(--text-3); font-size: 12px; letter-spacing: .04em; }

/* El contador de pasos, a la derecha. */
.path__rail {
  position: absolute; z-index: 3; right: var(--pad); top: 50%; transform: translateY(-50%);
  display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;
}
.path__rail li { width: 3px; height: 26px; border-radius: 3px; background: rgba(255,255,255,.12); transition: background .4s ease, box-shadow .4s ease, height .5s var(--ease); }
.path__rail li.is-on { background: #7FB0FF; box-shadow: 0 0 14px rgba(110,160,255,.9); height: 44px; }

@media (max-width: 900px) {
  .path { height: 400vh; height: 400svh; margin-top: 0; }
  /* La red ocupa la mitad de arriba y el texto la de abajo, sobre un velo que
     lo despega de los nodos: sin el, las lineas cruzaban las palabras. */
  .path__pin::after {
    background:
      radial-gradient(ellipse 90% 40% at 50% 29%, rgba(4,5,10,0) 45%, rgba(4,5,10,.75) 100%),
      linear-gradient(180deg, var(--ink) 0%, rgba(4,5,10,0) 12%, rgba(4,5,10,0) 38%, rgba(4,5,10,.9) 58%, var(--ink) 76%);
  }
  .path__eyebrow { left: 50%; transform: translateX(-50%); white-space: nowrap; top: 92px; }
  .path__item {
    left: var(--pad); right: var(--pad); max-width: none; text-align: center;
    bottom: clamp(58px, 11svh, 96px);
  }
  .path__n { margin-bottom: 10px; font-size: 11px; }
  .path__title { font-size: clamp(30px, 8.6vw, 46px); }
  .path__text { margin: 14px auto 0; font-size: 15px; max-width: 34ch; }

  /* El remate va abajo tambien, con la red entera detras: asi el boton cae
     donde el pulgar llega y el titulo no se parte contra el borde. */
  .path__item--final {
    left: var(--pad); right: var(--pad); top: auto; bottom: clamp(60px, 12svh, 120px); transform: none;
    width: auto; padding: 0;
  }
  .path__item--final::before { width: 150vw; height: 420px; }
  .path__item--final .path__title { font-size: clamp(46px, 14.5vw, 80px); }
  .path__cta { margin-top: 26px; }
  .path__cta .btn { min-width: 0; width: 100%; max-width: 320px; height: 50px; }
  .path__cta small { font-size: 11.5px; max-width: 32ch; line-height: 1.5; }
  .path__rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .path { height: auto; margin-top: 0; }
  .path__canvas, .path__rail { display: none; }
  .path__pin { position: relative; height: auto; padding: 110px 0 60px; }
  .path__eyebrow { position: relative; top: auto; left: auto; transform: none; padding: 0 var(--pad); }
  .path__stage { position: relative; }
  .path__item, .path__item--final { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; max-width: none; padding: 34px var(--pad); text-align: left; }
  .path__n, .path__title, .path__text, .path__cta { opacity: 1; transform: none; filter: none; }
  .path__cta { align-items: flex-start; }
}

/* ============================================================= los portales */

/*
  El anillo de luz del borde de cada portal (js/flow.js). Una pieza fija sobre
  todo menos la barra; el JS le da tamaño, posicion y color (--portal).
*/
.portal {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; visibility: hidden;
  width: 0; height: 0; border-radius: 50%;
  /* Un degradado circular y no box-shadow: una sombra con desenfoque sobre un
     circulo de pantalla entera se dibujaba como una banda solida en telefono. */
  background: radial-gradient(closest-side,
    rgba(var(--portal, 255,255,255), 0) calc(100% - 26px),
    rgba(var(--portal, 255,255,255), .22) calc(100% - 8px),
    rgba(var(--portal, 255,255,255), .95) calc(100% - 1.5px),
    rgba(var(--portal, 255,255,255), 0) 100%);
  will-change: transform, width, height;
}

.portal-velo { position: fixed; inset: 0; z-index: 39; pointer-events: none; visibility: hidden; }

/*
  La escena que entra, sostenida durante el cruce.

  Las tres escenas se sostienen con `position: sticky`, que las clava arriba
  cuando su seccion llega al tope. El cruce, en cambio, pasa ANTES de eso: la
  seccion nueva todavia viene subiendo y su escena tiene que estar ya quieta en
  la pantalla.

  Primero lo hacia js/flow.js escribiendo un transform de -top por cuadro, y
  ahi estaba el temblor: el scroll lo mueve el compositor, el transform lo
  escribe el hilo principal, y un cuadro tarde significa la escena corrida lo
  que se scrolleo (una sierra de ~100px por cuadro durante todo el cruce).
  Despues se probo `position: fixed` durante el cruce: no tiembla, pero para el
  navegador cada cruce es la escena entera saltando de lugar, y lo cuenta como
  desplazamiento de layout. Medido: CLS 2.97 contra 0.05, tres saltos de
  pantalla completa. Google lo leeria como una pagina que se mueve sola.

  Ahora es una animacion atada al scroll de la seccion: el mismo -top de antes,
  pero calculado por el compositor junto con el scroll, asi que nunca se
  desfasa, y como es un `translate` no cuenta como desplazamiento. El tramo
  `entry` de la seccion es exactamente el cruce: empieza cuando su borde de
  arriba asoma por abajo y termina cuando llega al tope, que es donde sticky la
  recibe. Antes de ese tramo no hace nada (fill forwards): la escena sigue
  abajo, fuera de la pantalla, donde tiene que estar.

  Va en la propiedad `translate`, no en `transform`, porque transform lo usa
  js/flow.js para la escala del cruce y las dos se componen.

  Donde el navegador no tiene animaciones de scroll (Firefox, hoy) js/flow.js
  vuelve a escribir el -top por cuadro. Solo en escritorio: en telefono las
  escenas no se pisan y el scroll manda.
*/
/* El primer cuadro no la sube. Justo en el borde —la seccion asomando por
   abajo, que es como queda Why us con la pagina recien cargada— la animacion
   ya esta en su progreso 0, y subirla ahi la ponia entera encima de la
   apertura, sin el fundido del cruce, que todavia no empezo. */
@keyframes sostener {
  0% { translate: 0 0; }
  0.01% { translate: 0 -100vh; }
  100% { translate: 0 0; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    #why-us, #bloom, #path { view-timeline: --cruce block; }
    .warp__pin, .bloom__pin, .path__pin {
      animation: sostener linear forwards;
      animation-timeline: --cruce;
      animation-range: entry 0% entry 100%;
    }
  }
}

/* Mientras cruza, el texto de la escena nueva espera: un solo texto por vez. */
.bloom__copy, .path__stage, .path__eyebrow, .path__rail { transition: opacity .45s ease; }
.bloom.is-crossing .bloom__copy,
.bloom.is-leaving .bloom__copy,
.path.is-crossing .path__stage,
.path.is-crossing .path__eyebrow,
.path.is-crossing .path__rail { opacity: 0; transition-duration: .2s; }
/* Y el de la que se va, se apaga antes de que empiece el colapso. */
.warp__stage, .warp__eyebrow, .warp__index { transition: opacity .4s ease; }
.warp.is-leaving .warp__stage,
.warp.is-leaving .warp__eyebrow,
.warp.is-leaving .warp__index { opacity: 0; }

/* ================================ telefono acostado (y ventanas bajas) */

/*
  Acostado no hay alto: la escena se reparte a lo ancho. La forma o la red van
  a la derecha y el texto a la izquierda, en cuerpo chico. Es la misma escena,
  girada 90 grados.
*/
@media (max-width: 900px) and (max-height: 560px) {
  .warp { height: 420vh; height: 420svh; }
  .warp__pin { --cy: 47%; --hud: 46vh; }
  .warp__eyebrow { left: var(--pad); transform: none; top: 56px; }
  .warp__item { left: var(--pad); right: 52%; bottom: auto; top: 50%; transform: translateY(-50%); text-align: left; }
  .warp__word { font-size: clamp(22px, 5.4vw, 34px); letter-spacing: .22em; margin-right: -.22em; }
  .warp__line { margin-top: 14px; padding-top: 14px; font-size: 13px; max-width: none; }
  .warp__line::before { left: 0; margin-left: 0; width: 30px; }
  .warp__list { justify-content: flex-start; flex-direction: column; gap: 5px; margin-top: 12px; }
  .warp__list li { font-size: 10.5px; }
  .warp__flash { background: radial-gradient(circle at 72% 47%, color-mix(in srgb, var(--c1) 22%, transparent) 0%, rgba(0,0,0,0) 50%); }

  .path { height: 380vh; height: 380svh; }
  .path__eyebrow { left: var(--pad); transform: none; top: 56px; }
  .path__pin::after {
    background:
      linear-gradient(90deg, rgba(4,5,10,.92) 0%, rgba(4,5,10,.5) 42%, rgba(4,5,10,0) 64%),
      linear-gradient(180deg, var(--ink) 0%, rgba(4,5,10,0) 18%, rgba(4,5,10,0) 82%, var(--ink) 100%);
  }
  .path__item { left: var(--pad); right: 54%; top: 50%; bottom: auto; transform: translateY(-50%); text-align: left; }
  .path__n { margin-bottom: 8px; }
  .path__title { font-size: clamp(24px, 5.4vw, 38px); }
  .path__text { margin: 10px 0 0; font-size: 13px; max-width: none; }
  .path__item--final { left: var(--pad); right: 54%; text-align: left; }
  .path__item--final::before { width: 150vw; height: 300px; }
  .path__item--final .path__title { font-size: clamp(34px, 8vw, 56px); }
  .path__cta { margin-top: 16px; align-items: flex-start; }
  .path__cta .btn { width: auto; min-width: 200px; height: 42px; }
  .path__cta small { text-align: left; }

  .bloom__from { font-size: clamp(20px, 4.6vw, 30px); }
  .bloom__to { font-size: clamp(30px, 7.4vw, 52px); }
  .bloom__sub { font-size: 13px; margin-top: 14px; }
}


/* ================================================================= tablet */
/*
  Tablet parada (600-900px de ancho): misma composicion que el telefono —una
  columna, la escena arriba y el texto abajo— pero con la letra y los botones
  de una pantalla grande.

  Heredaba el telefono tal cual, y en 820px eso era un boton blanco de 780px de
  ancho, la bajada de la apertura en 15px y las listas de Why us en 10px: todo
  chico y desparramado en una pantalla que se mira a mas distancia que un
  telefono. Aca el texto crece y los bloques tienen un ancho de lectura.
*/
@media (min-width: 600px) and (max-width: 900px) and (min-height: 700px) {
  .nav { padding: 10px var(--pad); }
  .nav__logo img { width: 92px; }
  .nav > .btn { height: 38px; padding: 0 18px; font-size: 11.5px; }

  .hero__copy { width: min(640px, 100%); }
  .opening__title { font-size: clamp(46px, 7vw, 64px); }
  .opening__cap { font-size: 19px; max-width: 36ch; }
  .hero__acciones .btn { width: auto; min-width: 260px; height: 52px; font-size: 13px; }
  .hero__ver { font-size: 15px; }

  .warp__eyebrow, .path__eyebrow { top: 110px; font-size: 12px; }
  .warp__word { font-size: clamp(40px, 6.4vw, 56px); }
  .warp__line { font-size: 19px; max-width: 34ch; }
  .warp__list { gap: 10px; }
  .warp__list li { font-size: 13px; }

  .bloom__sub { font-size: 19px; max-width: 30ch; }

  .path__n { font-size: 13px; }
  .path__title { font-size: clamp(46px, 7vw, 60px); }
  .path__text { font-size: 19px; max-width: 36ch; }
  .path__item--final .path__title { font-size: clamp(80px, 13vw, 112px); }
  .path__cta .btn { max-width: 340px; height: 54px; font-size: 13px; }
  .path__cta small { font-size: 14px; }

  .close__title { font-size: clamp(54px, 8vw, 72px); }
  .close__text { font-size: 18px; max-width: 34ch; }
  .close__copy .btn { width: min(340px, 100%); height: 54px; font-size: 13px; }
}

/* ============================================================== telefono */
/*
  Menos texto en el telefono: una idea por pantalla.

  En escritorio cada escena tiene lugar para la palabra, la frase y el
  detalle. En el telefono todo eso se apila en una columna angosta y la escena
  —que es lo que cuenta la historia— queda arriba, chica, con un bloque de
  letra debajo. Aca queda lo que dice la idea y lo que pide la accion:

    Apertura   sin el rotulo (la marca ya esta en la barra) ni el enlace a
               Why us (alcanza con bajar); la linea de clientes, corta
    Why us     la palabra y su frase, sin las tres vinetas
    Fractal    el titular, sin la bajada
    El camino  los titulos, que ya cuentan la historia, sin los parrafos
    Your turn  sin la nota «Takes a few minutes», que el cierre repite debajo

  La tablet y el escritorio no cambian. Lo que se esconde sigue en el HTML,
  asi que la version sin JavaScript y los buscadores lo leen entero.
*/
.hero__cliente-corto { display: none; }
@media (max-width: 599px) {
  .hero__eyebrow, .hero__ver { display: none; }
  .hero__cliente-largo { display: none; }
  .hero__cliente-corto { display: inline; }

  .warp__list { display: none; }
  .bloom__sub { display: none; }
  .path__text { display: none; }
  /* sin el parrafo el titulo bajaba solo hasta el borde: sube hacia la red */
  .path__item { bottom: clamp(96px, 17svh, 150px); }
  .path__cta small { display: none; }
}