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

/*
  `clip` y no `hidden`.

  El desborde lateral lo producen las capas decorativas que a proposito son mas
  anchas que su caja —el fondo de la apertura, los halos de las capturas— y en
  pantalla angosta se salian del viewport: la pagina se arrastraba de costado.
  `overflow-x: hidden` ya estaba puesto en el body y no alcanzaba, porque el
  que scrollea es el html.

  Tiene que ser `clip`: `hidden` convierte al elemento en un contenedor de
  scroll, y esta pagina se apoya entera en `position: sticky`, que necesita un
  scrollport. `clip` recorta sin crear contenedor.
*/
/* El documento tambien es negro: durante un portal (js/flow.js) lo que queda
   fuera del circulo puede ser el fondo de la pagina, y sin color era blanco. */
html { scroll-behavior: smooth; overflow-x: clip; background: var(--ink); }

/*
  Navegadores sin `clip` (iPhone anterior a iOS 16): ahi la declaracion se
  descarta y la pagina vuelve a arrastrarse de costado. `hidden` solo en el
  html, nunca tambien en el body: puesto en el html se traslada a la ventana y
  no crea contenedor, asi que `sticky` sigue funcionando.
*/
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- apertura */

/*
  La apertura: miles de particulas plateadas vienen de todos lados y arman la D
  de Domani (js/marca.js); aparece «Life Insurance»; la D colapsa en un punto
  de luz y desde ese punto se abre un portal que revela la laptop. Es el mismo
  idioma de los portales de mas abajo, asi la pagina empieza como sigue.

  El portal es una mascara con un agujero redondo que crece (el JS escribe
  --r); el anillo de luz es una pieza aparte que sigue el borde.

    0.00  negro, las particulas llegan girando
    1.70  la D armada, con un pulso de brillo
    1.40  la bajada abre su interletrado
    2.70  colapso al centro, destello
    3.25  se abre el portal
*/
.boot {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink);
  --r: 0px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent var(--r), #000 calc(var(--r) + 1px));
          mask-image: radial-gradient(circle at 50% 46%, transparent var(--r), #000 calc(var(--r) + 1px));
}
.boot__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.boot__tag {
  position: absolute; left: 0; right: 0; top: calc(46% + min(15vw, 15vh, 150px)); margin: 0; text-align: center;
  color: #8A92A6; font-size: clamp(9px, 1.1vw, 11px); font-weight: 500; text-transform: uppercase;
  opacity: 0; letter-spacing: .1em; text-indent: .1em;
  animation: tag-in 1.3s var(--ease) 1.4s forwards;
  transition: opacity .3s ease;
}
.boot.is-done .boot__tag { opacity: 0 !important; animation: none; }
.boot__ring {
  position: fixed; z-index: 101; left: 50%; top: 46%; width: 0; height: 0; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(140,185,255,0) calc(100% - 26px), rgba(140,185,255,.25) calc(100% - 8px), rgba(190,220,255,.95) calc(100% - 1.5px), rgba(140,185,255,0) 100%);
}
@keyframes tag-in  { to { opacity: 1; letter-spacing: .42em; text-indent: .42em; } }

/* --------------------------------------------------------------------- nav */

/*
  Marca a la izquierda, menu clavado al centro de la ventana, accion a la
  derecha. El menu se centra con posicion absoluta y no con el reparto del
  flex: asi queda en el centro real de la pantalla y no en el centro del hueco
  que dejan los dos extremos, que cambia cada vez que uno de ellos cambia de
  ancho.
*/
/*
  El foco del teclado tiene que verse.

  El contorno que pone el navegador por omision es negro (rgb(16,16,16)) y esta
  pagina es negra: quien navega con Tab no tenia forma de saber donde estaba
  parado. Se dibuja con el azul de la marca aclarado, que contra este fondo pasa
  el minimo de contraste que pide la norma para un indicador.

  Va en :focus-visible y no en :focus para que no aparezca al hacer clic con el
  mouse, que es cuando molesta y no sirve.
*/
:focus-visible {
  outline: 2px solid #7FB0FF;
  outline-offset: 3px;
  border-radius: 3px;
}

/*
  El salto al contenido. Invisible hasta que el foco llega: quien navega con
  teclado no tiene por que recorrer seis escenas para llegar al formulario.
*/
.saltar {
  position: fixed; z-index: 120; top: 10px; left: 50%; transform: translate(-50%, -160%);
  padding: 12px 20px; border-radius: 6px; background: #fff; color: var(--ink);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  transition: transform .25s var(--ease);
}
.saltar:focus-visible { transform: translate(-50%, 0); }

/*
  La linea de progreso. Dice cuanto queda de una pagina que mide doce
  pantallas y no tiene barra de scroll visible en telefono.
*/
.progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 49; pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
}
.nav.is-stuck ~ .progreso, .progreso.is-on { opacity: 1; }
.progreso span {
  display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #2E6BD0, #8FD3FF);
  box-shadow: 0 0 10px rgba(110,160,255,.7);
}

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center;
  padding: 18px var(--pad);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-in { opacity: 1; transform: none; }
.nav.is-stuck {
  background: rgba(4, 5, 10, .66);
  backdrop-filter: saturate(1.5) blur(16px);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-bottom-color: var(--line);
}

.nav__logo { margin-right: auto; }
/* `height: auto` no es decorativo: los atributos width/height del HTML valen
   como estilo de baja prioridad, y al fijar solo el ancho por CSS la marca
   quedaba estirada al alto declarado. */
.nav__logo img { width: 104px; height: auto; }

.nav__links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.nav__links a {
  color: var(--text); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; padding: 8px 14px; border-radius: 4px;
  transition: background .2s ease;
}
.nav__links a:hover { background: rgba(255,255,255,.09); }
/* La seccion que se esta mirando: el enlace se enciende y le sale un punto. */
.nav__links a.is-here { color: #fff; }
.nav__links a { position: relative; }
.nav__links a.is-here::after {
  content: ''; position: absolute; left: 50%; bottom: 1px; width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%; background: #7FB0FF; box-shadow: 0 0 8px #7FB0FF;
}

.nav > .btn { margin-left: auto; }

/*
  En pantalla chica la barra pasa a dos filas en lugar de esconder los enlaces.

  Antes los escondia y el telefono se quedaba sin navegacion: ni «Why us», ni
  «Platform», ni forma de saltar al final. En una pagina de siete pantallas eso
  obliga a scrollear todo o irse. Como el logo, el boton y los tres enlaces no
  entran juntos en 390px —da 424 y desborda—, van en dos filas: arriba el logo
  y la llamada a la accion, abajo los enlaces centrados. Sin menu desplegable,
  que para tres enlaces es esconder algo que entra a la vista.
*/
/*
  Y despues se cambio: las dos filas median 100px, un octavo de la pantalla
  tapado en cada escena, y la segunda fila partia la barra en dos cosas. Ahora
  es una sola fila —logo, llamada a la accion y un boton de menu— y los
  enlaces bajan en una hoja al tocarlo. La navegacion sigue estando, a un toque.
*/
.nav__menu { display: none; }

@media (max-width: 860px) {
  /* Barra mas liviana: el logo y el boton bajan de cuerpo y la barra de alto.
     El area tactil se mantiene con el relleno invisible de cada uno. */
  .nav { padding: 6px var(--pad); gap: 8px; }
  /* Areas tactiles de 44px, el minimo que un dedo acierta sin mirar. El logo
     crece de alto sin cambiar la barra, que ya mide eso por el boton de menu;
     el boton suma el area con un borde invisible arriba y abajo. */
  .nav__logo { display: inline-flex; align-items: center; min-height: 40px; }
  .nav > .btn { position: relative; }
  .nav > .btn::after { content: ''; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
  .nav__logo img { width: 76px; }
  .nav > .btn { margin-left: auto; min-width: 0; height: 32px; padding: 0 13px; font-size: 9.5px; letter-spacing: .12em; white-space: nowrap; border-radius: 3px; }

  /* 44px de area tactil; lo que se ve son dos rayas. */
  .nav__menu {
    display: inline-grid; place-content: center; gap: 5px;
    width: 40px; height: 40px; margin-right: -10px; padding: 0;
    background: none; border: 0; color: var(--text); cursor: pointer;
  }
  .nav__menu span {
    display: block; width: 17px; height: 1px; border-radius: 2px; background: currentColor;
    transition: transform .35s var(--ease);
  }
  .nav.is-open .nav__menu span:first-child { transform: translateY(3px) rotate(45deg); }
  .nav.is-open .nav__menu span:last-child  { transform: translateY(-3px) rotate(-45deg); }

  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; transform: translateY(-6px);
    flex-direction: column; gap: 0;
    padding: 4px var(--pad) 18px;
    background: var(--ink);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s ease, transform .4s var(--ease), visibility 0s linear .4s;
  }
  .nav.is-open .nav__links {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .3s ease, transform .4s var(--ease);
  }
  .nav__links a {
    padding: 16px 0; border-radius: 0;
    font-size: 15px; letter-spacing: 0;
    border-top: 1px solid var(--line);
  }
  .nav__links a:first-child { border-top: 0; }
  .nav__links a:hover { background: none; }
  /* Con la hoja abierta la barra toma fondo aunque no se haya scrolleado. */
  .nav.is-open {
    background: var(--ink);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom-color: var(--line);
  }
}

/* Telefono angosto, o Safari con la letra agrandada desde «aA» (un iPhone al
   125% queda en 322px): «Get contracted» no entraba y se partia en dos lineas
   dentro de un boton de 38px de alto. Se ajusta el aire, no el texto. */
@media (max-width: 360px) {
  .nav { gap: 4px; }
  .nav__logo img { width: 68px; }
  .nav > .btn { padding: 0 11px; letter-spacing: .09em; text-indent: .09em; }
}

/* El telefono acostado tiene ancho para la barra entera: vuelven los enlaces
   en linea y se va el menu. */
@media (max-width: 860px) and (max-height: 560px) and (min-width: 620px) {
  .nav__menu { display: none; }
  .nav__links {
    top: auto; left: 50%; right: auto; transform: translateX(-50%);
    flex-direction: row; gap: 2px; padding: 0; background: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .nav__links a { padding: 10px 12px; font-size: 11px; letter-spacing: .04em; border: 0; }
  /* Median 34px de alto: se suma area tactil hasta 44 sin mover nada. */
  .nav__links a { position: relative; }
  .nav__links a::after { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
}

/* ------------------------------------------------------------------ botones */

/*
  Chicos, en versalita y con el texto espaciado. Sin peso de mas: en una pagina
  con este nivel de aire, un boton grueso es lo unico que se ve.
*/
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 172px; height: 38px; padding: 0 26px; border-radius: 4px;
  /* El texto en versalita con interletrado abierto se ve descentrado hacia la
     izquierda, porque el espacio extra de la ultima letra queda adentro de la
     caja. Un pelo de padding a la izquierda lo compensa opticamente. */
  text-indent: .13em;
  font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}

/*
  Blanco puro, no 94%.

  Ese 6% de menos no se nota en un fondo claro, pero este boton vive en la
  escena mas oscura de la pagina —el cuarto ya apagado, la maquina cerrada— y
  ahi un blanco al 94% se lee como blanco sucio. Es lo unico encendido en el
  cuadro: tiene que estar encendido del todo.

  El halo es la luz que tira, no un adorno: sin el, el boton queda recortado
  contra el negro como una etiqueta pegada, que es exactamente lo que pasaba con
  todo lo demas en esta pagina hasta que empezo a iluminar.
*/
.btn--solid {
  background: #fff; color: var(--ink);
  box-shadow: 0 0 0 rgba(255,255,255,0), 0 10px 34px rgba(255,255,255,.10);
  transition: background .22s ease, color .22s ease, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn--solid:hover {
  box-shadow: 0 0 0 rgba(255,255,255,0), 0 14px 44px rgba(255,255,255,.20);
  transform: translateY(-1px);
}

/*
  Contorno fino y fondo transparente, no un relleno gris.

  Estaba en blanco al 8%, que sobre una pagina negra es una mancha gris sin
  borde: se lee como un boton apagado, justo lo contrario de lo que tiene que
  decir la unica llamada a la accion que esta siempre a la vista. Una linea de
  un pixel se lee como precision; un relleno gris, como que algo no anda.
*/
.btn--ghost {
  min-width: 0; height: 34px; padding: 0 18px;
  background: transparent; color: var(--text);
  border: 1px solid rgba(255,255,255,.22);
}
.btn--ghost:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.42); }

/*
  El boton de la barra mide 32px de alto —es el mas chico de la pagina y es el
  que mas se toca—. Crece solo hacia arriba y hacia abajo, donde la barra tiene
  aire: a lo ancho le quedan 4px hasta el menu y agrandarlo ahi haria que un
  dedo abriera el menu queriendo ir al formulario.
*/
.nav .btn { position: relative; }
.nav .btn::before { content: ''; position: absolute; inset: -10px 0; }


/*
  Quien pidio menos movimiento no quiere una version degradada del sitio: quiere
  el sitio, quieto. Se apaga la animacion y se deja todo en su estado final.
*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boot { display: none; }
  .nav { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}