/* La etiqueta se aclara un punto mas que --text-3 porque va en versalita y a
   11px, que es lo mas chico de la pagina. */
.eyebrow {
  margin: 0; color: #868C9E;
  font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
}


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

/*
  La escena: un escritorio de noche frente a la ciudad, y la laptop que se
  materializa sobre la mesa.

  Son dos fotos del mismo encuadre —vacio y con la maquina— apiladas. La
  primera entra cuando la cortina se abre; la segunda se funde encima un
  segundo y medio despues, y como la camara no se movio, lo que se ve es la
  maquina apareciendo. Durante toda la escena la camara se acerca muy despacio
  y sigue apenas al mouse; con el scroll la escena se hunde y se apaga.

  El texto vive abajo a la izquierda, como el pie de una foto de campaña: la
  escena se ve entera y la frase no le pasa por encima a la maquina. El velo
  oscurece esa esquina y deja el resto de la foto respirar.
*/
.opening {
  position: relative; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 var(--pad) clamp(34px, 5vh, 60px); padding: 0 var(--pad) clamp(34px, 5svh, 60px);
  background: var(--ink);
}

/*
  Dos movimientos, dos capas. Y estaban en la misma, que es lo que los arruinaba.

  El acercamiento de apertura es lentisimo a proposito: doce segundos de 1.1 a
  1.01, una transicion que corre una sola vez. Lo que sigue al scroll y al mouse
  es lo contrario: tiene que estar en el pixel donde esta el dedo, sin retardo.
  Los dos vivian en el mismo `transform` de .hero__zoom, asi que el scroll y el
  mouse tambien pasaban por esa transicion de doce segundos: la toma se iba
  agrandando mucho despues de que uno scrolleaba, y seguia moviendose un rato
  largo despues de parar. Esa es la parte que se sentia pesada al entrar a Why
  us —la foto no acompañaba al scroll, lo arrastraba.

  Separadas: el acercamiento lento en .hero__zoom, con su transicion; el scroll
  y el mouse en .hero__escena, sin ninguna.
*/
/* --sale lo escribe js/hero.js con el scroll; --mx/--my, con el mouse */
/* Al irse, la camara no se aleja: entra en la pantalla. El scroll agranda la
   toma y la escena siguiente aparece del otro lado del vidrio. */
.hero__escena {
  position: absolute; inset: 0; overflow: hidden;
  transform:
    scale(calc(1 + var(--sale, 0) * .22))
    translate(calc(var(--mx, 0) * -14px), calc(var(--sale, 0) * 6% + var(--my, 0) * -10px));
  will-change: transform;
}
.hero__zoom {
  position: absolute; inset: -2%;
  transform: scale(1.1);
  transition: transform 12s linear;
  will-change: transform;
}
.opening.is-abierta .hero__zoom { transform: scale(1.01); }
.hero__foto { position: absolute; inset: 0; display: block; }
/* El encuadre es el de la foto: la maquina al centro y la mesa vacia abajo,
   que es donde se apoya el texto. */
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.hero__foto--vacio { opacity: 0; transition: opacity 1.8s ease; }
.opening.is-abierta .hero__foto--vacio { opacity: 1; }
/*
  La maquina no aparece con un fundido: la pinta una onda de luz que sale del
  mismo punto donde colapso la D. El JS mueve --onda de 0 a 1 y la mascara
  redonda la revela desde el centro.

  Y llega apagada. Son dos copias de la misma foto: una con la pantalla negra
  —hecha oscureciendo solo el rectangulo del vidrio— y la de verdad. El
  encendido es el cruce entre las dos, y ahi entran el destello, el reflejo y
  la luz azul sobre el cuarto. Es el golpe de la escena.
*/
.hero__foto--apagada, .hero__foto--mac {
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 54%, #000 calc(var(--onda, 0) * 105%), rgba(0,0,0,0) calc(var(--onda, 0) * 105% + 7%));
          mask-image: radial-gradient(circle at 50% 54%, #000 calc(var(--onda, 0) * 105%), rgba(0,0,0,0) calc(var(--onda, 0) * 105% + 7%));
}
.opening.is-mac .hero__foto--apagada { opacity: 1; }
.hero__foto--mac { transition: opacity 1.2s var(--ease); }
.opening.is-prendida .hero__foto--mac { opacity: 1; }

/*
  Los rayos de la pantalla y el charco de luz sobre la mesa.

  Cuando la maquina enciende, la luz no se queda adentro del vidrio: sale en
  abanico hacia el cuarto y se apoya en la madera. Son dos capas de luz sumada
  —un abanico conico girando despacisimo y una elipse debajo de la maquina—
  que entran con el encendido y quedan vivas, respirando.
*/
.hero__rayos {
  position: absolute; left: 50%; top: 46%; width: min(1500px, 150vw); height: min(1100px, 120vh);
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  background: conic-gradient(from 200deg at 50% 42%,
    rgba(120,180,255,0) 0deg, rgba(140,195,255,.16) 8deg, rgba(120,180,255,0) 15deg,
    rgba(120,180,255,0) 24deg, rgba(150,200,255,.12) 30deg, rgba(120,180,255,0) 38deg,
    rgba(120,180,255,0) 100deg, rgba(140,195,255,.14) 110deg, rgba(120,180,255,0) 118deg,
    rgba(120,180,255,0) 132deg, rgba(150,200,255,.10) 140deg, rgba(120,180,255,0) 150deg,
    rgba(120,180,255,0) 360deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 10%, rgba(0,0,0,.5) 45%, rgba(0,0,0,0) 78%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 10%, rgba(0,0,0,.5) 45%, rgba(0,0,0,0) 78%);
  mix-blend-mode: screen;
  filter: blur(6px);
  transition: opacity 2.6s var(--ease) .5s;
}
.opening.is-prendida .hero__rayos { opacity: 1; animation: rayos-gira 90s linear infinite; }
@keyframes rayos-gira { to { transform: translate(-50%, -50%) rotate(8deg); } }

.hero__piso {
  position: absolute; left: 50%; top: 76%; width: min(1100px, 100vw); height: min(300px, 30vh);
  transform: translate(-50%, -50%) scaleX(.6); transform-origin: 50% 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(100,165,255,.4), rgba(4,5,10,0) 70%);
  mix-blend-mode: screen; filter: blur(14px);
  transition: opacity 2.4s var(--ease) .4s, transform 3s var(--ease) .4s;
}
.opening.is-prendida .hero__piso { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }

/* El destello del encendido. */
.hero__destello {
  position: absolute; left: 50%; top: 54%; width: min(1000px, 90vw); height: min(560px, 60vh);
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0; z-index: 2;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(190,220,255,.7), rgba(90,150,255,.18) 45%, rgba(4,5,10,0) 72%);
  mix-blend-mode: screen;
}
.opening.is-prendida .hero__destello { animation: prende 1.6s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes prende {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}


/* la luz que tira la pantalla sobre el cuarto */
.hero__brillo {
  position: absolute; left: 50%; top: 60%; width: min(1100px, 110vw); height: min(520px, 58vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(84,150,255,.26), rgba(4,5,10,0) 70%);
  opacity: 0; transition: opacity 3s var(--ease) .6s;
  mix-blend-mode: screen;
}
.opening.is-prendida .hero__brillo { opacity: 1; }

/* El velo trabaja donde esta el texto y deja la foto limpia en el centro. */
.hero__velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,5,10,.7) 0%, rgba(4,5,10,.1) 20%, rgba(4,5,10,0) 40%, rgba(4,5,10,.35) 62%, rgba(4,5,10,.9) 82%, rgba(4,5,10,.99) 100%),
    radial-gradient(ellipse 85% 70% at 50% 38%, rgba(4,5,10,0) 45%, rgba(4,5,10,.45) 100%);
}

.hero__polvo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .6; }

/* Grano: la escena es una foto, y una foto tiene grano. Ademas rompe las
   bandas que deja el degradado del velo sobre el cielo. */
.hero__grano {
  position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Una linea de luz cruza la escena de lado a lado al abrirse: es la misma que
   nace del punto donde colapso la D. */
.hero__linea {
  position: absolute; left: 0; right: 0; top: 46%; height: 1px; z-index: 2;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(143,211,255,0), rgba(214,234,255,.7) 50%, rgba(143,211,255,0));
  box-shadow: 0 0 22px rgba(120,170,255,.35);
  transition: transform 2.2s cubic-bezier(.16, 1, .3, 1), opacity 1.6s ease 1.4s;
}
.opening.is-abierta .hero__linea { transform: scaleX(1); opacity: .5; }

/* ------------------------------------------------------- el pie de la foto */
.hero__copy { position: relative; z-index: 3; width: min(860px, 88vw); text-align: center; }
/*
  Un solo titular por vez, tambien al salir.

  En escritorio Why us entra encima de la apertura (js/flow.js) y la apertura
  entera se apaga a la par que la escena nueva se enciende: a mitad del cruce
  «The life insurance revolution is here.» seguia a media luz detras de la
  esfera y de FREEDOM, dos titulares uno sobre el otro. El texto se va antes
  que la foto: con poco mas de un cuarto de pantalla scrolleada ya no esta.
*/
@media (min-width: 901px) {
  .hero__copy { opacity: calc(1 - var(--sale, 0) * 3.6); }
}
/* En telefono las escenas no se pisan: el texto sube con la pagina y se lee
   mientras sube. Pero la apertura entera se apaga y se agranda al irse, y el
   boton blanco a media luz quedaba como una franja gris de lado a lado. El
   texto se queda entero hasta un octavo de pantalla y a los dos quintos ya no
   esta, antes que la foto. */
@media (max-width: 900px) {
  .hero__copy { opacity: calc(1.4 - var(--sale, 0) * 3.4); }
}

.hero__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 clamp(10px, 1.6vh, 18px);
  font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #B9C6DE;
  opacity: 0; transform: translateY(8px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.hero__eyebrow span {
  width: 44px; height: 1px; background: linear-gradient(90deg, #8FD3FF, rgba(143,211,255,0));
  box-shadow: 0 0 10px rgba(143,211,255,.6);
}
.hero__eyebrow.is-in { opacity: 1; transform: none; }

.opening__title {
  margin: 0 0 clamp(10px, 1.6vh, 18px);
  font-size: clamp(30px, 3.9vw, 62px); line-height: 1.03;
  font-weight: 600; letter-spacing: -.045em; font-optical-sizing: auto;
  color: var(--paper); text-wrap: balance;
  text-shadow: 0 2px 40px rgba(4,5,10,.7);
}
/* cada palabra sube por el borde de su caja */
.opening__title .w__i {
  filter: none;
  transform: translateY(112%);
  transition: transform 1.15s cubic-bezier(.16, 1, .3, 1);
}
.opening__title.is-in .w__i { transform: translateY(0); }

.opening__cap {
  margin: 0 auto clamp(16px, 2.4vh, 26px); max-width: 44ch;
  color: #C4CDDE; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.55; font-weight: 300;
  text-shadow: 0 2px 20px rgba(4,5,10,.8);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.opening__cap.is-in { opacity: 1; transform: none; }

.hero__acciones {
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 30px); flex-wrap: wrap;
  opacity: 0; transform: translateY(12px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.hero__acciones.is-in { opacity: 1; transform: none; }
.hero__acciones .btn { min-width: 196px; height: 46px; }
/*
  El area de toque, no la caja.

  El subrayado tiene que quedar pegado al texto, asi que la caja mide 20px de
  alto: menos de la mitad de lo que un dedo necesita para acertar sin pensar.
  Se agranda con un pseudo-elemento invisible que no ocupa lugar en el layout:
  lo que se ve queda igual, lo que se toca pasa a 44px.
*/
.hero__ver::before { content: ''; position: absolute; inset: -14px -10px; }
.hero__ver {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; color: #C4CDDE;
  padding-bottom: 3px; border-bottom: 1px solid rgba(196,205,222,.25);
  transition: color .25s ease, border-color .25s ease, gap .25s var(--ease);
}
/* Para quien llego buscando un seguro y no un trabajo: una linea chica, debajo
   de todo, que lo manda a su pagina. No compite con el boton. */
.hero__cliente {
  flex-basis: 100%; margin: 4px 0 0; text-align: center;
  font-size: 13px; color: var(--text-3, #6E7588);
}
.hero__cliente a {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  color: #C4CDDE; border-bottom: 1px solid rgba(196,205,222,.25); padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.hero__cliente a::before { content: ''; position: absolute; inset: -12px -8px; }
.hero__cliente a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.hero__ver:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); gap: 14px; }

/* La invitacion a bajar, a la derecha: una linea por la que cae una luz. */
.hero__baja {
  position: absolute; right: var(--pad); bottom: max(26px, 4vh); bottom: max(26px, 4svh);
  z-index: 3; width: 44px; height: 60px;
  opacity: 0; transition: opacity 1s var(--ease);
}
.hero__baja.is-in { opacity: 1; }
.hero__baja::before {
  content: ''; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1px; margin-left: -.5px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.22));
}
.hero__baja span {
  position: absolute; left: 50%; top: 8px; width: 1px; height: 16px; margin-left: -.5px;
  background: linear-gradient(180deg, rgba(190,215,255,0), rgba(215,230,255,1), rgba(190,215,255,0));
  animation: cae 2.2s cubic-bezier(.5, 0, .3, 1) infinite;
}
@keyframes cae {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(44px); opacity: 0; }
}

@media (max-width: 900px) {
  .hero__copy { width: 100%; text-align: center; }
  .opening__title { font-size: clamp(30px, 8.4vw, 46px); }
  .opening__cap { font-size: 15px; max-width: 34ch; }
  .hero__velo {
    background:
      linear-gradient(180deg, rgba(4,5,10,.82) 0%, rgba(4,5,10,.2) 24%, rgba(4,5,10,0) 40%, rgba(4,5,10,.5) 58%, rgba(4,5,10,.95) 74%, rgba(4,5,10,1) 100%);
  }
  .hero__acciones { gap: 16px; }
  .hero__acciones .btn { width: 100%; min-width: 0; }
  .hero__baja { display: none; }
  .hero__linea { top: 42%; }
}

/*
  La apertura se adapta a la FORMA de la pantalla, no a su ancho: lo que decide
  como encuadrar una foto es la proporcion. Hay tres casos y cada uno tiene su
  recorte (el HTML los elige con <picture> y srcset, asi cada pantalla baja
  tambien el tamaño que le sirve):

    vertical (mas alto que ancho)   la toma entera arriba y el texto debajo
    cuadrada                        la toma llena la pantalla, texto encima
    ancha                           igual que cuadrada, con la toma ancha
*/
@media (max-aspect-ratio: 9/10) {
  /*
    Vertical: una toma hecha para la pantalla parada.

    Antes iba la toma casi cuadrada arriba, a lo ancho, y lo que sobraba abajo
    se rellenaba con la misma foto desenfocada: la laptop quedaba chica en la
    mitad de arriba y entre ella y el titulo quedaba una franja borrosa que se
    leia como relleno, porque lo era. En el iPhone SE, ademas, el rotulo se
    montaba sobre la base de la maquina.

    Ahora la toma es vertical (1200x2100, assets/hero/*-vert-*): es la misma
    foto, y debajo de la maquina el escritorio sigue —su propio reflejo,
    estirado y fundido a tinta—. La laptop sube y crece, y el titulo se apoya
    sobre la madera como en escritorio. Va a lo ancho de la pantalla con su
    proporcion: en los telefonos mas altos lo que queda debajo ya es tinta, que
    es donde termina la foto, asi que no hay borde. No se recorta de costado:
    la base de la maquina ocupa casi todo el ancho.

    Las luces (brillo, rayos, destello, piso) viven adentro de .hero__escena, asi
    que sus porcentajes son de la foto y no de la pantalla: siguen a la maquina
    en cualquier telefono.
  */
  .hero__escena {
    top: 0; bottom: auto; height: auto; aspect-ratio: 1200 / 2100;
    /* aca la toma sube en vez de agrandarse, pero el reparto es el mismo: lo
       que sigue al scroll va en esta capa, sin transicion */
    transform: translateY(calc(var(--sale, 0) * -6vh)) scale(calc(1 + var(--sale, 0) * .16));
  }
  /* aca la toma ya entra justa: el acercamiento es apenas un gesto */
  .hero__zoom { inset: 0; transform: scale(1.035); }
  .opening.is-abierta .hero__zoom { transform: scale(1); }
  .hero__foto img { object-position: 50% 0%; }
  /* arriba, la barra; abajo, donde cae el texto, tinta */
  .hero__velo {
    background: linear-gradient(180deg, rgba(4,5,10,.72) 0%, rgba(4,5,10,.12) 12%, rgba(4,5,10,0) 24%,
      rgba(4,5,10,0) 50%, rgba(4,5,10,.45) 64%, rgba(4,5,10,.85) 80%, rgba(4,5,10,1) 100%);
  }
  /* la pantalla de la maquina esta al 34% de la toma; la base, al 51% */
  .hero__brillo { top: 40%; }
  .hero__rayos { top: 31%; }
  .hero__destello { top: 34%; }
  .hero__piso { top: 55%; }
  .hero__polvo { opacity: .45; }
  .hero__fondo { display: none; }
  .opening { padding-bottom: clamp(30px, 5svh, 60px); }
}

/* Telefono bajo (iPhone SE): la toma sube un poco —lo que se esconde es
   cielo, debajo de la barra— para que el rotulo no toque la base de la
   maquina. */
@media (max-aspect-ratio: 9/10) and (max-height: 700px) {
  .hero__escena { top: -34px; }
}

/* Cuadrada: la toma llena la pantalla con el recorte cuadrado y el texto se
   apoya encima, como en escritorio. */
@media (min-aspect-ratio: 9/10) and (max-aspect-ratio: 27/20) {
  .hero__foto img { object-position: 50% 44%; }
  .hero__copy { width: min(760px, 92vw); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__polvo, .hero__baja, .hero__linea, .hero__rayos, .hero__piso { display: none; }
  .hero__escena, .hero__zoom, .opening.is-abierta .hero__zoom { transform: none; }
  .hero__foto--vacio { display: none; }
  .hero__foto--apagada { display: none; }
  .hero__foto--mac { opacity: 1; -webkit-mask-image: none; mask-image: none; }
  .hero__brillo { opacity: 1; }
  .hero__destello { display: none; }
  .opening__title .w__i { transform: none; }
  .opening__cap, .hero__eyebrow, .hero__acciones { opacity: 1; transform: none; }
}

/* =========================================================== secciones de texto */

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--pad); }


.foot { border-top: 1px solid var(--line); padding: 30px 0 44px; }
.foot__in {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  color: var(--text-3); font-size: 12px;
}
.foot__in img { width: 92px; opacity: .75; }

.foot__link {
  /* El area tactil se estira hacia arriba y abajo sin mover el texto: medida en
     telefono daba 16px de alto, que es la mitad de lo que un dedo acierta. */
  position: relative; display: inline-block; padding: 14px 0; margin: -14px 0;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color .2s ease, border-color .2s ease;
}
.foot__link:hover { color: var(--text); border-bottom-color: var(--text-3); }

@media (max-width: 560px) {
  .foot__in { flex-direction: column; align-items: flex-start; }
}

/*
  Cada palabra vive en una caja que recorta. La palabra arranca abajo, fuera de
  la caja, y sube hasta su lugar: aparece por el borde en vez de encenderse.
  El `padding-bottom` negativo compensa lo que el recorte le comeria a las
  letras con cola —la g, la y— que si no quedan cortadas.
*/
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.w__i {
  display: inline-block;
  filter: drop-shadow(0 0 34px rgba(120,165,245,0));
  transform: translateY(110%);
  transition: transform .85s cubic-bezier(.16, 1, .3, 1), filter 1s ease;
}

/* =================================================================== el cierre */

/*
  El eco de la apertura. El polvo sube desde abajo y vuelve a armar la D
  (js/marca.js) sobre la invitacion, con la misma linea de luz debajo. Nada
  mas: una marca, una frase y un boton encendido en el centro del negro.
*/
.close { position: relative; height: 150vh; background: var(--ink); }

.close__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.close__gl { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.close__halo {
  position: absolute; left: 50%; top: 50%; width: min(900px, 120vw); height: min(420px, 60vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(46,107,208,.22), rgba(4,5,10,0) 70%);
  opacity: 0; transition: opacity 2s var(--ease);
}
.close__linea {
  position: absolute; left: 50%; top: calc(50% + clamp(84px, 13vh, 130px)); width: min(680px, 80vw); height: 1px;
  transform: translate(-50%, -50%) scaleX(0);
  background: linear-gradient(90deg, rgba(143,211,255,0), rgba(214,234,255,.9) 50%, rgba(143,211,255,0));
  box-shadow: 0 0 20px rgba(120,170,255,.45);
  transition: transform 1.8s cubic-bezier(.16, 1, .3, 1) .3s;
}
.close.is-in .close__halo { opacity: 1; }
.close.is-in .close__linea { transform: translate(-50%, -50%) scaleX(1); }

.close__copy {
  position: relative; z-index: 3; text-align: center; padding: 0 var(--pad);
  /* Por debajo del centro: arriba se arma la D. */
  margin-top: clamp(90px, 15vh, 150px); margin-top: clamp(90px, 15svh, 150px);
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
}
.close__copy.is-in { opacity: 1; transform: translateY(0); }

.close__title {
  margin: 0; font-size: clamp(40px, 7vw, 96px);
  line-height: 1; font-weight: 600; letter-spacing: -.048em; color: var(--paper);
}
.close__copy .btn { min-width: 220px; height: 48px; }
.close__text {
  margin: 18px auto 30px; max-width: 46ch; color: var(--text-2);
  font-size: clamp(14px, 1.3vw, 17px); line-height: 1.6; font-weight: 300;
}

@media (max-width: 900px) {
  .close { height: 130vh; height: 130svh; }
  .close__copy { margin-top: clamp(70px, 12svh, 110px); }
  .close__title { font-size: clamp(34px, 10vw, 54px); }
  .close__text { font-size: 14px; margin: 14px auto 24px; }
  .close__copy .btn { width: min(320px, 100%); }
  .close__linea { top: calc(50% + clamp(66px, 11svh, 100px)); }
}

@media (prefers-reduced-motion: reduce) {
  .close { height: auto; }
  .close__pin { position: static; height: auto; padding: 100px 0; }
  .close__gl { display: none; }
  .close__copy { opacity: 1; transform: none; }
  .close__halo { opacity: 1; }
  .close__linea { transform: translate(-50%, -50%) scaleX(1); }
}

/* ============================================ telefono: nada atado al scroll */

/*
  En iPhone el scroll quedaba mal, y la causa era de fondo, no de ajuste.

  Tres secciones quedaban fijadas —why us, el nucleo, el muro— y obligaban a
  scrollear pantallas enteras con el contenido quieto. Encima, cada cuadro del
  scroll reescribia variables CSS que Safari tenia que recalcular sobre la
  seccion entera, con desenfoques y mezclas de color sobre video. El dedo iba
  por un lado y la pagina por otro.

  En telefono la pagina se arma distinto:
    - ninguna seccion queda fijada: el scroll es el del sistema, con su inercia;
    - nada lee el scroll cuadro a cuadro: cada escena arranca cuando entra en
      pantalla y corre sola, con animaciones de CSS que corren en la placa de
      video aunque el dedo siga moviendose;
    - solo se anima transform y opacity; nada de blur, drop-shadow ni mezclas.

  Escritorio no cambia.
*/
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {

  /* ------------------------------------------------------------ la barra */
  .nav.is-stuck, .nav.is-open { background: rgba(4, 5, 10, .94); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav__links { -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* ------------------------------------------------------------- titulos */
  /* El resplandor de las palabras era un drop-shadow por palabra: de lo mas
     caro que hay mientras se mueven. En telefono los titulos van limpios. */
  .w__i,
  .opening__title .w__i,
  .opening__title.is-in .w__i { filter: none; }

  @keyframes sube {
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes gira { to { transform: rotate(360deg); } }
  @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
  @keyframes late { from { transform: scale(.94); } to { transform: scale(1.06); } }

  /* ---------------------------------------------------------------- cierre */
  /* El boton, encendido: una luz lo cruza cada tanto. */
  .close__copy .btn--solid { position: relative; overflow: hidden; }
  .close__copy .btn--solid::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
    background: linear-gradient(100deg, rgba(120,160,230,0), rgba(120,160,230,.45), rgba(120,160,230,0));
    transform: translateX(-120%) skewX(-18deg);
    pointer-events: none;
  }
  .close__copy.is-in .btn--solid::after { animation: brillo 3.6s cubic-bezier(.4, 0, .2, 1) 1.2s infinite; }
  @keyframes brillo {
    0%   { transform: translateX(-120%) skewX(-18deg); }
    38%  { transform: translateX(330%) skewX(-18deg); }
    100% { transform: translateX(330%) skewX(-18deg); }
  }

  .btn { transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .35s var(--ease), transform .18s ease; }
  .btn:active { transform: scale(.96); }
}

/*
  Telefono acostado: el escenario de las apps era mas alto que la pantalla.
  Las apps de arriba quedaban debajo de la barra y la frase se cortaba. Se
  achica la escena entera —un solo `transform` quieto sobre el contenedor, que
  se compone con las animaciones de adentro sin tocarlas— y la seccion deja de
  pedir una pantalla de alto.
*/
/* Telefono acostado: queda poco alto, asi que el remate se achica. */
@media (max-width: 900px) and (max-height: 560px) {
  /* acostado sobra ancho: el boton de la apertura no va de lado a lado */
  .hero__acciones .btn { width: auto; min-width: 220px; }
  .close__title { font-size: clamp(26px, 5.5vw, 40px); }
  .close__text { margin: 10px auto 16px; }
  .close__copy { margin-top: clamp(54px, 10svh, 80px); }
  .close__linea { top: calc(50% + clamp(50px, 9svh, 80px)); }
}
}