/* =========================================================================
   Corte — appcorte.com

   Las tipografías se sirven desde este dominio, NO desde Google Fonts.
   Pedirlas fuera envía la IP de quien visita a un tercero, y esta página
   presume de no recoger nada. Tiene que ser verdad también aquí.

   El cristal vive aparte, en glass.css.
   ========================================================================= */

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/instrument-serif-latin-italic.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  font-weight: 300 800;
  font-style: normal;
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  --paper: #F4F3EE;
  --paper-2: #ECEAE3;
  --ink: #0A0A0F;
  --ink-mute: #6B6B7B;
  --accent: #635BFF;
  --accent-2: #00D4FF;
  --ok: #00C896;
  --r-lg: 32px;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Foco visible. Sin esto, quien navega con teclado no sabe dónde está. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- FONDO DE TINTA ---------- */
#bgv {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
#velo {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(244,243,238,.72), rgba(244,243,238,.55) 40%, rgba(244,243,238,.8));
}
main { position: relative; z-index: 2; }

/* ---------- PORTADA ---------- */
.escena { position: relative; height: 520vh; }
.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
}
.duo {
  width: min(1280px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
}
.titular {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  line-height: 1.1;
  margin: 0 0 1.1rem;
  max-width: 19ch;
}
.rotulo {
  font-size: clamp(.62rem, .85vw, .75rem);
  letter-spacing: .22em;
  font-weight: 800;
  color: var(--ink-mute);
  margin: 0 0 .25rem;
}
.cifra {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 8.6vw, 7.6rem);
  line-height: .95;
  letter-spacing: -.035em;
  margin: 0;
  white-space: nowrap;
  background: linear-gradient(100deg, var(--ink), var(--ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cifra.cero {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
}
.pie-cifra {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.95rem, 1.7vw, 1.45rem);
  color: var(--ink-mute);
  margin: .35rem 0 0;
  min-height: 1.5em;
}

/* ---------- EL IPHONE, DIBUJADO EN HTML ----------
   No es un vídeo ni una imagen: así el scrub es exacto, pesa kilobytes, se ve
   nítido en cualquier pantalla y no depende de que un modelo acierte.
   Las medidas van en cqw (porcentaje del ancho del propio teléfono), que es
   lo que hace que todo escale junto al cambiar de tamaño.                  */
.fono {
  height: min(84vh, 820px);
  aspect-ratio: 1320/2868;
  justify-self: center;
  position: relative;
}
.fono__cuerpo {
  height: 100%;
  border-radius: 14.5%/6.7%;
  padding: 1.6%;
  position: relative;
  background: linear-gradient(115deg, #8e8e97, #3a3a41 12%, #17171b 26%, #0d0d11 50%, #17171b 74%, #3a3a41 88%, #8e8e97);
  box-shadow: 0 60px 110px -40px rgba(10,10,30,.55), 0 2px 6px rgba(10,10,30,.18);
}
.fono__cuerpo::after {
  content: "";
  position: absolute;
  inset: 1.05%;
  border-radius: 13.6%/6.3%;
  box-shadow: inset 0 0 0 .6px rgba(255,255,255,.34);
  pointer-events: none;
  z-index: 4;
}
.fono__pantalla {
  position: relative;
  height: 100%;
  border-radius: 12.9%/6%;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
.btn-lat {
  position: absolute;
  background: linear-gradient(90deg, #2a2a30, #5c5c66);
  border-radius: 2px;
  z-index: 0;
}
.btn-lat.accion { left: -1.4px; top: 16%;   width: 3px;   height: 4.2%; }
.btn-lat.vol1   { left: -1.6px; top: 24%;   width: 3.4px; height: 7.4%; }
.btn-lat.vol2   { left: -1.6px; top: 33.5%; width: 3.4px; height: 7.4%; }
.btn-lat.power  { right: -1.6px; top: 26%;  width: 3.4px; height: 11%; }

.isla {
  position: absolute;
  top: 1.8cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 29cqw;
  height: 8.4cqw;
  border-radius: 99px;
  background: #000;
  z-index: 5;
}
.estado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.4cqw 7cqw .5cqw;
  font-size: 3.7cqw;
  font-weight: 600;
}
.estado__dcha { display: flex; align-items: center; gap: 1.5cqw; }
.lienzo { flex: 1; padding: 2.5cqw 4cqw 0; overflow: hidden; }
.cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.5cqw 1cqw 3.5cqw;
}
.cab__mes { font-size: 3cqw; color: var(--ink-mute); font-weight: 600; margin-bottom: .6cqw; }
.cab__marca { font-family: var(--serif); font-style: italic; font-size: 7cqw; line-height: 1; }
.cab__btn {
  width: 8.4cqw;
  height: 8.4cqw;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 1cqw 3cqw -1.5cqw rgba(10,10,30,.3);
  display: inline-grid;
  place-items: center;
  margin-left: 1.8cqw;
}
.tarjeta {
  background: linear-gradient(180deg, #fff, rgba(243,246,251,.97));
  border-radius: 7.5cqw;
  padding: 5cqw 5.4cqw;
  margin-bottom: 4cqw;
  box-shadow: 0 3.5cqw 8cqw -4.5cqw rgba(10,10,30,.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3cqw;
}
.rot { font-size: 2.6cqw; letter-spacing: .15em; font-weight: 800; color: var(--ink-mute); margin: 0 0 1cqw; }
.monto { font-family: var(--serif); font-size: 9.6cqw; line-height: 1; margin: 0; }
.sub { font-size: 2.8cqw; color: var(--ink-mute); margin: 1.4cqw 0 0; }
.aro-caja { width: 18cqw; height: 18cqw; position: relative; flex: 0 0 18cqw; }
.aro-caja svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aro-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 4.4cqw;
}
.fila {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 3.4cqw 3.8cqw;
  margin-bottom: 2.6cqw;
  background: linear-gradient(180deg, #fff, rgba(243,246,251,.97));
  border-radius: 6.5cqw;
  box-shadow: 0 2cqw 5.5cqw -4cqw rgba(10,10,30,.22);
}
.fila__ini {
  width: 10cqw;
  height: 10cqw;
  border-radius: 3.6cqw;
  background: #12141c;
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 4.6cqw;
  flex: 0 0 10cqw;
}
.fila__nom {
  flex: 1;
  font-size: 3.6cqw;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fila__val { font-size: 3.6cqw; font-weight: 800; white-space: nowrap; }
.fila__chk {
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
  flex: 0 0 8cqw;
  display: grid;
  place-items: center;
  background: #eef1f6;
  color: transparent;
  font-size: 4cqw;
  font-weight: 900;
  transition: background .3s, color .3s, transform .3s;
}
.fila.pagado .fila__chk {
  background: linear-gradient(145deg, #79cdb7, #54af97);
  color: #fff;
  transform: scale(1.08);
}
.fila.pagado .fila__nom { opacity: .5; }
.home-ind {
  position: absolute;
  bottom: 1.6cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 33cqw;
  height: 1.1cqw;
  border-radius: 99px;
  background: rgba(10,10,30,.32);
}

/* ---------- SECCIONES ----------
   El bloque de contenido va CENTRADO. Antes iba pegado a la izquierda con
   `justify-items: start` y en una pantalla ancha quedaba medio monitor vacío
   a la derecha — se notaba sobre todo en las preguntas.

   Y 16vh arriba y abajo era demasiado: en secciones de contenido corto, como
   las preguntas, dejaba dos huecos enormes que parecían un error.            */
.seccion {
  display: grid;
  justify-items: center;
  padding: 11vh clamp(1.25rem, 7vw, 9rem);
}
/*
 * 78vh y no 100vh. La idea de "una pantalla por idea" se mantiene, pero al
 * medirlo salieron 400 px de vacío en cada una de estas dos secciones: su
 * contenido ocupa la mitad de lo que reservaban. Encadenado con el relleno de
 * la sección anterior, entre privacidad y el correo quedaba casi una pantalla
 * en blanco, y eso ya no se lee como una pausa sino como un error.
 */
.seccion--alta { min-height: 78vh; align-content: center; }

.caja { width: min(62ch, 100%); }
.caja--ancha { width: min(76rem, 100%); }
.caja--medio { width: min(52rem, 100%); }

/* Centra el texto sin dejar renglones kilométricos: la caja puede ser ancha,
   pero un párrafo de más de unos 50 caracteres por línea se lee mal. */
.centrado { text-align: center; }
.centrado > h2 { max-width: 22ch; margin-inline: auto; }
.centrado > .lead { max-width: 52ch; margin-inline: auto; }
.centrado > .nota { max-width: 60ch; margin-inline: auto; }

h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  margin: 0 0 1.2rem;
  max-width: 18ch;
}
.lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  color: #2C3140;
  margin: 0 0 1rem;
}
.lead strong { font-weight: 700; }
.word { display: inline-block; }

.pasos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 2rem;
  padding: 0;
  list-style: none;
  text-align: left;
}
.pasos h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.pasos p { margin: 0; font-size: .95rem; color: #2C3140; line-height: 1.5; }

/* La figura de cada tarjeta. Alto fijo para que las tres queden a la misma
   altura aunque las imágenes tengan proporciones muy distintas: el recorte
   del número es apaisado y el del botón es casi cuadrado. */
.paso__fig {
  margin: 0 0 1.2rem;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem;
  overflow: hidden;
}
/*
 * EL ALTO VA EN MEDIDAS ABSOLUTAS, NO EN PORCENTAJE. No cambiar a %.
 *
 * La imagen se pintaba a su tamaño natural dentro de una figura de 120px y se
 * montaba encima del título y del párrafo. La causa es fina: con `display:
 * grid`, un `height: 100%` en la imagen se resuelve contra la FILA, y la fila
 * es `auto`. Un porcentaje contra algo indefinido no se puede resolver, así
 * que el navegador cae a `auto` y la imagen recupera su tamaño natural.
 *
 * Con `max-height` en rem no hay nada que resolver: el número es el número.
 * El `overflow: hidden` de la figura es el cinturón de seguridad, por si algún
 * día entra una imagen con una proporción que no se previó.
 */
.paso__fig img {
  max-width: 100%;
  max-height: calc(7.5rem - .8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 10px 22px rgba(20,20,50,.14));
}

/* El aviso del teléfono, reconstruido. El texto es el que manda de verdad
   src/lib/reminders.js — si cambia allí, cambia aquí. */
.aviso {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  max-width: 18rem;
  padding: .75rem .85rem;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 12px 26px -12px rgba(20,20,50,.28);
  text-align: left;
}
.aviso__icono {
  flex: 0 0 2.2rem;
  height: 2.2rem;
  border-radius: 30%;
  background: #12141c;
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
}
.aviso__texto { display: grid; gap: .1rem; min-width: 0; }
.aviso__app {
  font-size: .6rem;
  letter-spacing: .14em;
  font-weight: 800;
  color: var(--ink-mute);
}
.aviso__app i { font-style: normal; font-weight: 500; letter-spacing: 0; }
.aviso__tit {
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aviso__cuerpo { font-size: .8rem; color: #2C3140; }

/* ---------- LAS TRES AUSENCIAS ----------
   Aquí lo que vende es lo que la app NO hace, así que se enseñan como
   ausencias y no como funciones: una raya en vez de un icono. */
.nadas {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  list-style: none;
  padding: 0;
  margin: 2.2rem 0;
  text-align: left;
}
.nada {
  display: grid;
  gap: .25rem;
  padding: 1.2rem 1.3rem;
  border-radius: 22px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 10px 26px -18px rgba(20,20,50,.22);
}
.nada__no {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
  opacity: .5;
}
.nada strong { font-size: 1rem; }
.nada span:last-child { font-size: .9rem; color: #2C3140; line-height: 1.45; }

/* Privacidad: el vídeo NO se ve aquí. Papel sólido, a propósito — es la
   sección donde se promete que nada sale del teléfono, y el fondo en
   movimiento le quitaría seriedad. */
.privacidad { background: var(--paper); position: relative; z-index: 3; }
.faq { background: var(--paper-2); position: relative; z-index: 3; }

.cierre {
  background: var(--paper);
  position: relative;
  z-index: 3;
  text-align: center;
  justify-items: center;
}
.cierre h2, .cierre .lead { margin-inline: auto; }

.cta {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 32rem;
  margin: 1.6rem auto 0;
}
.cta label { flex: 1 1 100%; text-align: left; font-size: .85rem; font-weight: 700; margin-bottom: .3rem; }
.cta input[type=email] {
  flex: 1 1 14rem;
  min-height: 52px;
  padding: 0 1.1rem;
  border: 1px solid rgba(10,10,30,.12);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  /* 16px exactos: por debajo de eso Safari en iOS hace zoom al tocar el
     campo y descoloca la página entera. Es la misma razón por la que el
     buscador de la app lleva este tamaño clavado. */
  font-size: 16px;
}
.cta button {
  min-height: 52px;
  padding: 0 1.7rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.check {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  text-align: left;
  font-size: .86rem;
  color: #2C3140;
  margin-top: .9rem;
  line-height: 1.45;
}
.nota { font-size: .88rem; color: var(--ink-mute); margin-top: 1rem; }

/* ---------- PÁGINA LEGAL ----------
   Sin vídeo de fondo y sin animación: aquí lo único que importa es que se lea.
   Columna estrecha, mucho interlineado y jerarquía clara.                   */
.legal {
  position: relative;
  z-index: 3;
  width: min(70ch, 100%);
  margin-inline: auto;
  padding: 8vh clamp(1.25rem, 6vw, 3rem) 6vh;
}
.legal__marca {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  margin: 0 0 2.5rem;
}
.legal__marca a { color: var(--ink); text-decoration: none; }
.legal h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 .4rem;
}
.legal__fecha { color: var(--ink-mute); font-size: .88rem; margin: 0 0 2rem; }
.legal h2 {
  font-size: 1.12rem;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  max-width: none;
  margin: 2.6rem 0 .7rem;
}
.legal p, .legal li {
  font-size: 1rem;
  line-height: 1.7;
  color: #2C3140;
}
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal li { margin-bottom: .5rem; }
.legal a { color: var(--accent); text-underline-offset: 3px; }
.legal .apunte { margin: 1.6rem 0; }

.pie {
  position: relative;
  z-index: 3;
  background: var(--paper-2);
  color: var(--ink-mute);
  padding: 2.6rem clamp(1.25rem, 7vw, 9rem) 3rem;
  font-size: .84rem;
  line-height: 1.6;
  border-top: 1px solid rgba(10,10,30,.08);
}

/* Dos columnas en pantalla ancha: el aviso legal a la izquierda y los enlaces
   a la derecha. Apilados dejaban toda la mitad derecha vacía. */
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem clamp(2rem, 6vw, 6rem);
  align-items: flex-start;
  justify-content: space-between;
}
.pie__legal { flex: 1 1 34rem; margin: 0; }
.pie__enlaces {
  flex: 0 1 auto;
  margin: 0;
  display: grid;
  gap: .4rem;
  justify-items: flex-start;
}
.pie a { color: var(--ink); text-underline-offset: 3px; }

/* Medidor de diagnóstico. Oculto salvo que la dirección lleve ?debug — sirve
   para comprobar que el vídeo sigue al scroll sin dejarlo a la vista de quien
   visita la página. */
.medidor { display: none; }
body.debug .medidor {
  display: block;
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 30;
  font: 600 11px/1 ui-monospace, monospace;
  color: #fff;
  background: rgba(10,10,30,.6);
  padding: 7px 11px;
  border-radius: 99px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 2.4vh; }
  .titular { margin: 0 auto .5rem; font-size: clamp(1.05rem, 4.4vw, 1.4rem); }
  .cifra { font-size: clamp(2.3rem, 13vw, 4rem); }
  .fono { height: min(46vh, 420px); }
  .btn-lat { display: none; }
}

/* Quien pide menos movimiento no debería recibir una web que se mueve sola.
   El vídeo se queda quieto y las revelaciones aparecen sin animarse. */
@media (prefers-reduced-motion: reduce) {
  #bgv { display: none; }
  .escena { height: auto; }
  .pin { position: static; height: auto; padding-block: 12vh; }
}

/* ==========================================================================
   Face ID: enseñar lo que hace, no su icono
   ========================================================================== */

/*
 * El bloque de privacidad terminaba en dos párrafos seguidos y se leía como un
 * muro. Se parte con una figura que cuenta la mitad del mensaje sin palabras.
 *
 * NO se dibuja el icono de Face ID de Apple. Es una marca suya y tiene sus
 * reglas de uso; además un icono no explica nada. Lo que se ve es el efecto:
 * el monto borroso, un barrido de luz, y el número legible. Que es exactamente
 * lo que pasa en la app cuando te reconoce.
 *
 * Reutiliza la misma captura que la tercera tarjeta, así que no añade ni un
 * byte de descarga.
 */
.faceid {
  margin: 2.4rem auto 2.6rem;
  max-width: 22rem;
  text-align: center;
}

.faceid__caja {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 16px 40px -22px rgba(20, 20, 50, .3);
  padding: .9rem;
}

.faceid__caja img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  animation: faceidNitidez 7s ease-in-out infinite;
}

/* El barrido: una banda de luz que cruza de arriba abajo, como el destello de
   un escáner. Va por encima de la imagen pero no recibe toques. */
.faceid__barrido {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(99, 91, 255, .22) 45%,
    rgba(0, 212, 255, .3) 50%,
    rgba(99, 91, 255, .22) 55%,
    transparent 100%
  );
  animation: faceidBarrido 7s ease-in-out infinite;
}

.faceid__candado {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  color: var(--ink);
  opacity: .55;
  pointer-events: none;
  animation: faceidCandado 7s ease-in-out infinite;
}

.faceid figcaption {
  margin-top: .9rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-mute);
}

@keyframes faceidNitidez {
  0%, 18%   { filter: blur(9px) saturate(.7); }
  34%, 76%  { filter: blur(0) saturate(1); }
  94%, 100% { filter: blur(9px) saturate(.7); }
}

@keyframes faceidBarrido {
  0%, 14%   { transform: translateY(-105%); opacity: 0; }
  16%       { opacity: 1; }
  30%       { transform: translateY(105%); opacity: 1; }
  32%, 100% { transform: translateY(105%); opacity: 0; }
}

@keyframes faceidCandado {
  0%, 16%   { opacity: .55; transform: scale(1); }
  30%       { opacity: 0;   transform: scale(1.5); }
  30.01%, 88% { opacity: 0; transform: scale(1); }
  100%      { opacity: .55; }
}

/* Quien pide menos movimiento ve la versión legible y quieta, que es la que
   cuenta la buena noticia. */
@media (prefers-reduced-motion: reduce) {
  .faceid__caja img,
  .faceid__barrido,
  .faceid__candado { animation: none; }
  .faceid__barrido { opacity: 0; }
  .faceid__candado { opacity: 0; }
}