/* 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);
}

.hero__escena { position: absolute; inset: 0; overflow: hidden; }
/* --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__zoom {
  position: absolute; inset: -2%;
  transform:
    scale(calc(1.1 + var(--sale, 0) * .22))
    translate(calc(var(--mx, 0) * -14px), calc(var(--sale, 0) * 6% + var(--my, 0) * -10px));
  transition: transform 12s linear;
  will-change: transform;
}
.opening.is-abierta .hero__zoom {
  transform:
    scale(calc(1.01 + var(--sale, 0) * .22))
    translate(calc(var(--mx, 0) * -14px), calc(var(--sale, 0) * 6% + var(--my, 0) * -10px));
}
.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; }

.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);
}
.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 y lo que sobraba abajo se rellenaba
    con la misma foto desenfocada: la familia quedaba chica en la mitad de
    arriba y debajo una franja borrosa y rojiza que se leia como relleno,
    porque lo era.

    Ahora la toma es vertical (1200x2100, assets/hero/*-vert-*): la misma foto,
    y debajo la arena sigue —su propio reflejo, estirado y fundido a tinta—,
    que es donde se apoya el texto. Es lo mismo que hace la portada con el
    escritorio de la laptop.
  */
  .hero__escena {
    top: 0; bottom: auto; height: auto; aspect-ratio: 1200 / 2100;
    transform: translateY(calc(var(--sale, 0) * -6vh));
  }
  /* aca la toma ya entra justa: el acercamiento es apenas un gesto */
  .hero__zoom { inset: 0; transform: scale(calc(1.035 + var(--sale, 0) * .16)); }
  .opening.is-abierta .hero__zoom { transform: scale(calc(1 + var(--sale, 0) * .16)); }
  .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,.6) 0%, rgba(4,5,10,.1) 10%, rgba(4,5,10,0) 22%,
      rgba(4,5,10,0) 44%, rgba(4,5,10,.45) 60%, rgba(4,5,10,.85) 76%, rgba(4,5,10,1) 100%);
  }
  .hero__polvo { opacity: .45; }
  .hero__fondo { display: none; }
  .opening { padding-bottom: clamp(30px, 5svh, 60px); }
}

/* 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__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) {
  .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)); }
}
}