.tiendas[data-astro-cid-gqmmjakz] {
  display: grid;
  gap: .5rem;
  justify-items: inherit;
}

.insignias[data-astro-cid-gqmmjakz] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  justify-content: inherit;
}

.apple[data-astro-cid-gqmmjakz] {
  height: 46px;
  width: auto;
}

.google[data-astro-cid-gqmmjakz] {
  height: 68px;
  width: auto;
  margin-block: -11px;
}
.lente[data-astro-cid-knv3xwt4] {
  --u: min(1rem, 3.2vw);
  --top: 3;
  position: relative;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  margin-inline: calc((100% - 46 * var(--u)) / 2);
  view-timeline-name: --lente;
}

.lente-foto[data-astro-cid-knv3xwt4] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  opacity: .55;
  filter: blur(calc(.3 * var(--u))) saturate(.9);
  mask-image: radial-gradient(58% 62% at 50% 48%, #000 35%, #0000 78%);
}

.lente-telefono[data-astro-cid-knv3xwt4] {
  position: absolute;
  z-index: 1;
  top: calc(var(--top) * var(--u));
  left: 50%;
  width: calc(20 * var(--u));
  translate: -50%;
  filter: drop-shadow(0 calc(1.6 * var(--u)) calc(2.6 * var(--u)) #2f607447) drop-shadow(0 2px 4px #382d1e2e);
}

.lente-pantalla[data-astro-cid-knv3xwt4] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
}

.lente-interior[data-astro-cid-knv3xwt4] {
  position: absolute;
  left: calc(-1 * (13 + var(--px)) * var(--u));
  top: calc(-1 * (var(--top) + var(--py)) * var(--u));
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  max-width: none;
  translate: 0;
  object-fit: cover;
  object-position: 50% 35%;
}

.lente-velo[data-astro-cid-knv3xwt4] {
  position: absolute;
  inset: 0;
  background: linear-gradient(#1e181257, #0000 18%);
}

.lente-estado[data-astro-cid-knv3xwt4] {
  position: absolute;
  top: 4.4cqw;
  inset-inline: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 7.5cqw 0 10cqw;
  color: var(--c-blanco);
  font-family: var(--f-sub);
  font-size: 4.2cqw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lente-estado[data-astro-cid-knv3xwt4] svg[data-astro-cid-knv3xwt4] {
  width: 17cqw;
}

.lente-isla[data-astro-cid-knv3xwt4] {
  position: absolute;
  left: 38.27%;
  top: 1.6%;
  width: 23.46%;
  height: 4.2%;
  border-radius: 99px;
  background: #000;
}

.lente-isla-abierta[data-astro-cid-knv3xwt4] {
  position: absolute;
  left: 3.48%;
  top: 1.53%;
  width: 93.03%;
  height: auto;
  border-radius: 10.7% / 24.9%;
  opacity: 0;
  transform-origin: 50% 12%;
}

.lente-pestanas[data-astro-cid-knv3xwt4] {
  position: absolute;
  left: 15.75%;
  top: 90.47%;
  width: 68.33%;
  height: auto;
}

.pieza[data-astro-cid-knv3xwt4] {
  position: absolute;
  z-index: 2;
  height: auto;
  border-radius: calc(.9 * var(--u));
  box-shadow: 0 calc(1.2 * var(--u)) calc(2.4 * var(--u)) calc(-.8 * var(--u)) #2f60746b, 0 2px 6px #382d1e1f;
}

.pieza--nivel[data-astro-cid-knv3xwt4] {
  left: calc(-1 * var(--u));
  top: calc(8 * var(--u));
  width: calc(15 * var(--u));
}

.pieza--cita[data-astro-cid-knv3xwt4] {
  left: calc(32 * var(--u));
  top: calc(23 * var(--u));
  width: calc(15 * var(--u));
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lente-telefono[data-astro-cid-knv3xwt4] {
      animation: linear both deslizar-tel;
      animation-timeline: --lente;
      animation-range: cover;
      will-change: transform;
    }

    .lente-interior[data-astro-cid-knv3xwt4] {
      animation: linear both deslizar-foto;
      animation-timeline: --lente;
      animation-range: cover;
    }

    .lente-foto[data-astro-cid-knv3xwt4] {
      animation: linear both enfocar;
      animation-timeline: --lente;
      animation-range: cover 10% cover 50%;
    }

    .lente-isla-abierta[data-astro-cid-knv3xwt4] {
      animation: linear both isla-abre;
      animation-timeline: --lente;
      animation-range: cover 25% cover 75%;
    }

    .pieza--nivel[data-astro-cid-knv3xwt4] {
      animation: linear both salir-izq;
      animation-timeline: --lente;
      animation-range: cover 30% cover 48%;
    }

    .pieza--cita[data-astro-cid-knv3xwt4] {
      animation: linear both salir-der;
      animation-timeline: --lente;
      animation-range: cover 40% cover 58%;
    }
  }
}

@keyframes deslizar-tel {
  from {
    translate: -50% calc(2 * var(--u));
  }

  to {
    translate: -50% calc(-2 * var(--u));
  }
}

@keyframes deslizar-foto {
  from {
    translate: 0 calc(-2 * var(--u));
  }

  to {
    translate: 0 calc(2 * var(--u));
  }
}

@keyframes enfocar {
  from {
    filter: blur(calc(.7 * var(--u))) saturate(.85);
    opacity: .3;
  }
}

@keyframes isla-abre {
  0% {
    opacity: 0;
    scale: .25 .22;
    animation-timing-function: cubic-bezier(.2, 1.2, .3, 1);
  }

  18%, 82% {
    opacity: 1;
    scale: 1;
    animation-timing-function: cubic-bezier(.5, 0, .6, 1);
  }

  100% {
    opacity: 0;
    scale: .25 .22;
  }
}

@keyframes salir-izq {
  from {
    opacity: 0;
    translate: calc(9 * var(--u)) calc(1 * var(--u));
    scale: .8;
  }

  40% {
    opacity: 1;
  }
}

@keyframes salir-der {
  from {
    opacity: 0;
    translate: calc(-9 * var(--u)) calc(1 * var(--u));
    scale: .8;
  }

  40% {
    opacity: 1;
  }
}

@media (width <= 700px) {
  .pieza--nivel[data-astro-cid-knv3xwt4] {
    left: calc(7 * var(--u));
    top: calc(10 * var(--u));
    width: calc(13 * var(--u));
  }

  .pieza--cita[data-astro-cid-knv3xwt4] {
    left: auto;
    right: calc(7 * var(--u));
    top: calc(27 * var(--u));
    width: calc(13 * var(--u));
  }

  @keyframes salir-izq {
    from {
      opacity: 0;
      translate: calc(5 * var(--u)) calc(1 * var(--u));
      scale: .8;
    }

    40% {
      opacity: 1;
    }
  }

  @keyframes salir-der {
    from {
      opacity: 0;
      translate: calc(-5 * var(--u)) calc(1 * var(--u));
      scale: .8;
    }

    40% {
      opacity: 1;
    }
  }
}
.como-funciona[data-astro-cid-h4paav4i] {
  --tel: 15rem;
}

.sol[data-astro-cid-h4paav4i], .progreso[data-astro-cid-h4paav4i], .toque[data-astro-cid-h4paav4i] {
  display: none;
}

.momentos[data-astro-cid-h4paav4i] {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem 2rem;
}

.momento[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i] {
  margin: 0 0 .5rem;
  font-family: var(--f-marca);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  line-height: .9;
  letter-spacing: .01em;
  color: var(--c-tinta);
}

.num[data-astro-cid-h4paav4i] {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--f-sub);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  color: var(--c-cafe-arena);
}

.momento[data-astro-cid-h4paav4i] p[data-astro-cid-h4paav4i] {
  margin: 0;
  color: var(--c-cafe);
  font-size: var(--t-m);
  line-height: 1.5;
}

.dispositivo[data-astro-cid-h4paav4i] {
  display: grid;
  justify-items: center;
}

.telefono[data-astro-cid-h4paav4i] {
  position: relative;
  isolation: isolate;
  width: calc(var(--tel) * 442 / 402);
}

.telefono[data-astro-cid-h4paav4i]:before {
  content: "";
  position: absolute;
  inset: 1% 2%;
  z-index: -1;
  border-radius: 18% / 8.5%;
  box-shadow: 0 calc(var(--tel) * .12) calc(var(--tel) * .22) calc(var(--tel) * -.04) #2f607457, 0 calc(var(--tel) * .04) calc(var(--tel) * .08) #382d1e33;
}

.pantalla[data-astro-cid-h4paav4i] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #eef6fa;
  isolation: isolate;
}

.capa[data-astro-cid-h4paav4i] {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

img[data-astro-cid-h4paav4i].capa {
  object-fit: cover;
}

.c-hoyapp[data-astro-cid-h4paav4i], .c-hoy[data-astro-cid-h4paav4i] {
  display: block;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .como-funciona[data-astro-cid-h4paav4i] {
      --tel: min(19rem, 33svh);
      --apagado: .28;
      height: 560svh;
      view-timeline-name: --relato;
    }

    .escenario[data-astro-cid-h4paav4i] {
      position: sticky;
      top: 0;
      height: 100svh;
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      grid-template-rows: minmax(0, 1fr);
      align-items: center;
      column-gap: clamp(2rem, 5vw, 5rem);
    }

    .sol[data-astro-cid-h4paav4i] {
      display: grid;
      grid-area: 1 / 2;
      justify-self: center;
      width: calc(var(--tel) * 2.4);
      aspect-ratio: 1;
    }

    .luz[data-astro-cid-h4paav4i] {
      grid-area: 1 / 1;
      border-radius: 50%;
      --c: var(--c-cielo);
      background: radial-gradient(circle, color-mix(in oklab, var(--c) 95%, transparent) 0%, color-mix(in oklab, var(--c) 45%, transparent) 40%, transparent 68%);
      animation-timeline: --relato;
      animation-range: contain;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }

    .luz--1[data-astro-cid-h4paav4i] {
      --c: color-mix(in oklab, var(--c-mar) 55%, var(--c-cielo));
      animation-name: luz1;
    }

    .luz--2[data-astro-cid-h4paav4i] {
      --c: var(--c-aqua);
      animation-name: luz2;
    }

    .luz--3[data-astro-cid-h4paav4i] {
      --c: color-mix(in oklab, var(--c-arena-dorada) 55%, var(--c-cielo));
      animation-name: luz3;
    }

    .momentos[data-astro-cid-h4paav4i] {
      grid-area: 1 / 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      margin: 0;
      gap: 0;
      padding-left: clamp(0rem, 2vw, 2rem);
      max-width: 30rem;
    }

    .momento[data-astro-cid-h4paav4i] {
      display: contents;
    }

    .momento[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i] {
      position: relative;
      margin: 0;
      padding: .7rem 0 .7rem 1.4rem;
      font-size: clamp(1.6rem, 2.6vw, 2.6rem);
    }

    .momento[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i]:before {
      content: "";
      position: absolute;
      left: 0;
      top: .7rem;
      bottom: .9rem;
      width: 2px;
      border-radius: 2px;
      background: var(--c-mar);
      transform-origin: 50% 0;
    }

    .num[data-astro-cid-h4paav4i] {
      display: inline;
      margin: 0 .6rem 0 0;
      font-size: .5em;
      vertical-align: .35em;
    }

    .momento[data-astro-cid-h4paav4i] p[data-astro-cid-h4paav4i] {
      grid-row: 5;
      grid-column: 1;
      padding: 1.4rem 0 0 1.4rem;
      max-width: 26rem;
    }

    .m0[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i] {
      grid-row: 1;
    }

    .m1[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i] {
      grid-row: 2;
    }

    .m2[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i] {
      grid-row: 3;
    }

    .m3[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i] {
      grid-row: 4;
    }

    .momento[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i], .momento[data-astro-cid-h4paav4i] p[data-astro-cid-h4paav4i], .momento[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i]:before, .progreso[data-astro-cid-h4paav4i] i[data-astro-cid-h4paav4i], .telefono[data-astro-cid-h4paav4i], .pantalla[data-astro-cid-h4paav4i] [data-astro-cid-h4paav4i], .c-tarjeta[data-astro-cid-h4paav4i] .cara[data-astro-cid-h4paav4i] {
      animation-timeline: --relato;
      animation-range: contain;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }

    .m0[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i] {
      animation-name: t0;
    }

    .m1[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i] {
      animation-name: t1;
    }

    .m2[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i] {
      animation-name: t2;
    }

    .m3[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i] {
      animation-name: t3;
    }

    .m0[data-astro-cid-h4paav4i] p[data-astro-cid-h4paav4i] {
      animation-name: d0;
    }

    .m1[data-astro-cid-h4paav4i] p[data-astro-cid-h4paav4i] {
      animation-name: d1;
    }

    .m2[data-astro-cid-h4paav4i] p[data-astro-cid-h4paav4i] {
      animation-name: d2;
    }

    .m3[data-astro-cid-h4paav4i] p[data-astro-cid-h4paav4i] {
      animation-name: d3;
    }

    .m0[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i]:before {
      animation-name: l0;
    }

    .m1[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i]:before {
      animation-name: l1;
    }

    .m2[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i]:before {
      animation-name: l2;
    }

    .m3[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i]:before {
      animation-name: l3;
    }

    .dispositivo[data-astro-cid-h4paav4i] {
      grid-area: 1 / 2;
      justify-self: center;
    }

    .telefono[data-astro-cid-h4paav4i] {
      animation-name: telefono-entra;
      animation-range: entry 10% entry 90%;
      will-change: transform;
    }

    .capa[data-astro-cid-h4paav4i] {
      display: block;
    }

    .c-isla[data-astro-cid-h4paav4i] {
      inset: auto;
      left: 3.48%;
      top: 1.53%;
      width: 93.03%;
      height: 18.38%;
      border-radius: 10.7% / 24.9%;
    }

    .c-barra[data-astro-cid-h4paav4i] {
      bottom: auto;
      height: 8.01%;
    }

    img[data-astro-cid-h4paav4i].c-larga {
      bottom: auto;
      height: auto;
    }

    .c-pestanas[data-astro-cid-h4paav4i] {
      inset: auto;
      left: 15.75%;
      top: 90.47%;
      width: 68.33%;
      height: 7.25%;
    }

    .c-velo[data-astro-cid-h4paav4i] {
      background: #030e0f4f;
    }

    .c-hoja[data-astro-cid-h4paav4i] {
      top: auto;
      bottom: 0;
      height: 61.86%;
    }

    .c-hoja-esperamos[data-astro-cid-h4paav4i] {
      height: 41.42%;
    }

    .c-esperamos[data-astro-cid-h4paav4i] {
      clip-path: inset(0 0 41.42%);
    }

    .c-tarjeta[data-astro-cid-h4paav4i] {
      inset: auto;
      left: 4.98%;
      top: 18.46%;
      width: 89.97%;
      height: 23.8%;
      transform-style: preserve-3d;
    }

    .cara[data-astro-cid-h4paav4i] {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 5.6% / 9.7%;
      backface-visibility: hidden;
      box-shadow: 0 10px 24px -14px #2f607473;
    }

    .cara--codigo[data-astro-cid-h4paav4i] {
      transform: rotateY(180deg);
    }

    .c-tarjeta[data-astro-cid-h4paav4i] .cara[data-astro-cid-h4paav4i] {
      animation: none;
    }

    .c-r2[data-astro-cid-h4paav4i] {
      animation-name: r2;
    }

    .c-r3[data-astro-cid-h4paav4i] {
      animation-name: r3;
    }

    .c-barra-r[data-astro-cid-h4paav4i], .c-pestanas-r[data-astro-cid-h4paav4i] {
      animation-name: fijas-r;
    }

    .c-velo[data-astro-cid-h4paav4i] {
      animation-name: velo;
    }

    .c-hoja[data-astro-cid-h4paav4i] {
      animation-name: hoja;
    }

    .c-esperamos[data-astro-cid-h4paav4i] {
      animation-name: esperamos;
    }

    .c-hoja-esperamos[data-astro-cid-h4paav4i] {
      animation-name: hoja-esperamos;
    }

    .c-app[data-astro-cid-h4paav4i] {
      animation-name: app-cierra;
      transform-origin: 84.6% 37.2%;
      overflow: hidden;
    }

    .c-inicio[data-astro-cid-h4paav4i] {
      animation-name: inicio;
    }

    .c-isla[data-astro-cid-h4paav4i] {
      animation-name: isla;
      transform-origin: 50% 12%;
    }

    .c-bloqueo[data-astro-cid-h4paav4i] {
      animation-name: bloqueo;
    }

    .c-hoyapp[data-astro-cid-h4paav4i] {
      animation-name: hoyapp;
    }

    .c-hoy-fondo[data-astro-cid-h4paav4i] {
      animation-name: con-tarjeta;
    }

    .c-tarjeta[data-astro-cid-h4paav4i] {
      animation-name: con-tarjeta, voltear;
    }

    .c-hoy-larga[data-astro-cid-h4paav4i] {
      animation-name: hoy-sube;
    }

    .c-hoy-abajo[data-astro-cid-h4paav4i] {
      animation-name: hoy-abajo;
    }

    .c-barra-h[data-astro-cid-h4paav4i], .c-pestanas-h[data-astro-cid-h4paav4i] {
      animation-name: fijas-h;
    }

    .toque[data-astro-cid-h4paav4i] {
      display: block;
      position: absolute;
      z-index: 15;
      left: var(--x);
      top: var(--y);
      width: calc(var(--tel) * .16);
      aspect-ratio: 1;
      margin: calc(var(--tel) * -.08) 0 0 calc(var(--tel) * -.08);
      border-radius: 50%;
      background: radial-gradient(circle, #ffffffd9 0%, #ffffff73 45%, #fff0 70%);
      box-shadow: 0 0 0 1px #2f607440;
      animation: linear both toque;
      animation-timeline: --relato;
    }

    .progreso[data-astro-cid-h4paav4i] {
      display: block;
      grid-row: 6;
      grid-column: 1;
      width: min(16rem, 70%);
      height: 2px;
      margin: 1.4rem 0 0 1.4rem;
      border-radius: 2px;
      background: color-mix(in oklab, var(--c-mar) 15%, transparent);
      overflow: hidden;
    }

    .progreso[data-astro-cid-h4paav4i] i[data-astro-cid-h4paav4i] {
      display: block;
      height: 100%;
      background: var(--c-mar);
      transform-origin: 0;
      animation-name: avance;
    }
  }
}

@media (width <= 760px) and (orientation: portrait) {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .como-funciona[data-astro-cid-h4paav4i] {
        --tel: min(14.5rem, 29svh);
        --apagado: 0;
        height: 520svh;
      }

      .escenario[data-astro-cid-h4paav4i] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: start;
        padding: max(4.75rem, 9svh) 0 max(1rem, 2.5svh);
        row-gap: clamp(.75rem, 2.5svh, 1.5rem);
      }

      .momentos[data-astro-cid-h4paav4i] {
        grid-area: 1 / 1;
        padding-left: 0;
        max-width: none;
        justify-items: center;
        text-align: center;
      }

      .momento[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i] {
        grid-column: 1;
        padding: 0;
        font-size: clamp(1.75rem, 8vw, 2.4rem);
        grid-row: 1 !important;
      }

      .momento[data-astro-cid-h4paav4i] h3[data-astro-cid-h4paav4i]:before {
        display: none;
      }

      .num[data-astro-cid-h4paav4i] {
        display: block;
        margin: 0 0 .4rem;
        font-size: 1.1rem;
        vertical-align: 0;
      }

      .momento[data-astro-cid-h4paav4i] p[data-astro-cid-h4paav4i] {
        grid-row: 2;
        padding: .6rem 0 0;
        font-size: var(--t-s);
        max-width: 34ch;
        justify-self: center;
      }

      .sol[data-astro-cid-h4paav4i], .dispositivo[data-astro-cid-h4paav4i] {
        grid-area: 2 / 1;
        align-self: stretch;
      }

      .sol[data-astro-cid-h4paav4i] {
        align-self: center;
      }

      .dispositivo[data-astro-cid-h4paav4i] {
        container-type: size;
        width: 100%;
        height: 100%;
        display: grid;
        justify-items: center;
        align-items: start;
      }

      .telefono[data-astro-cid-h4paav4i] {
        --tel: min(15rem, calc(100cqh * 402 / 908));
      }

      .progreso[data-astro-cid-h4paav4i] {
        grid-row: 3;
        justify-self: center;
        margin: .9rem 0 0;
      }
    }
  }
}

@keyframes telefono-entra {
  from {
    opacity: 0;
    transform: translateY(10svh) scale(.96);
  }
}

@keyframes luz1 {
  0%, 22% {
    opacity: 0;
  }

  28%, 47% {
    opacity: 1;
  }

  53%, 100% {
    opacity: 0;
  }
}

@keyframes luz2 {
  0%, 47% {
    opacity: 0;
  }

  53%, 72% {
    opacity: 1;
  }

  78%, 100% {
    opacity: 0;
  }
}

@keyframes luz3 {
  0%, 72% {
    opacity: 0;
  }

  78%, 100% {
    opacity: 1;
  }
}

@keyframes r2 {
  0%, 5.5% {
    opacity: 0;
    translate: 0;
  }

  7% {
    opacity: 1;
    translate: 0;
  }

  10.5% {
    translate: 0;
    animation-timing-function: cubic-bezier(.45, 0, .2, 1);
  }

  17%, 100% {
    opacity: 1;
    translate: 0 -33.888%;
  }
}

@keyframes r3 {
  0%, 10.5% {
    opacity: 0;
    translate: 0 51.26%;
    animation-timing-function: cubic-bezier(.45, 0, .2, 1);
  }

  14% {
    opacity: 0;
  }

  17%, 100% {
    opacity: 1;
    translate: 0;
  }
}

@keyframes fijas-r {
  0%, 16.5% {
    opacity: 1;
  }

  17%, 100% {
    opacity: 0;
  }
}

@keyframes velo {
  0%, 19% {
    opacity: 0;
  }

  21%, 100% {
    opacity: 1;
  }
}

@keyframes hoja {
  0%, 19% {
    translate: 0 100%;
    animation-timing-function: cubic-bezier(.2, .9, .25, 1);
  }

  21.5%, 22.4% {
    translate: 0;
    animation-timing-function: cubic-bezier(.5, 0, .75, .6);
  }

  23.4%, 100% {
    translate: 0 100%;
  }
}

@keyframes hoja-esperamos {
  0%, 23.4% {
    translate: 0 100%;
    animation-timing-function: cubic-bezier(.2, .9, .25, 1);
  }

  25%, 100% {
    translate: 0;
  }
}

@keyframes esperamos {
  0%, 23% {
    opacity: 0;
  }

  24%, 100% {
    opacity: 1;
  }
}

@keyframes app-cierra {
  0%, 26.5% {
    scale: 1;
    opacity: 1;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }

  31% {
    opacity: 1;
  }

  32.5%, 100% {
    scale: .13;
    opacity: 0;
  }
}

@keyframes inicio {
  0%, 26.5% {
    scale: 1.12;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  }

  32.5%, 100% {
    scale: 1;
  }
}

@keyframes isla {
  0%, 33% {
    opacity: 0;
    scale: .34 .2;
    animation-timing-function: cubic-bezier(.2, 1.2, .3, 1);
  }

  37.5%, 41.5% {
    opacity: 1;
    scale: 1;
    animation-timing-function: cubic-bezier(.5, 0, .6, 1);
  }

  44%, 100% {
    opacity: 0;
    scale: .34 .2;
  }
}

@keyframes bloqueo {
  0%, 43.5% {
    translate: 0 -101%;
    animation-timing-function: cubic-bezier(.2, .8, .25, 1);
  }

  47.5%, 52.5% {
    translate: 0;
    animation-timing-function: cubic-bezier(.55, 0, .3, 1);
  }

  57.5%, 100% {
    translate: 0 -101%;
  }
}

@keyframes hoyapp {
  0%, 50% {
    visibility: hidden;
  }

  50.5%, 100% {
    visibility: visible;
  }
}

@keyframes con-tarjeta {
  0%, 59.5% {
    visibility: hidden;
  }

  59.6%, 80.4% {
    visibility: visible;
  }

  80.5%, 100% {
    visibility: hidden;
  }
}

@keyframes voltear {
  0%, 60.5% {
    transform: perspective(900px) rotateY(0);
    animation-timing-function: cubic-bezier(.45, 0, .25, 1);
  }

  65.5%, 75% {
    transform: perspective(900px) rotateY(180deg);
    animation-timing-function: cubic-bezier(.45, 0, .25, 1);
  }

  80%, 100% {
    transform: perspective(900px) rotateY(360deg);
  }
}

@keyframes hoy-sube {
  0%, 81.9% {
    opacity: 0;
    translate: 0;
  }

  82% {
    opacity: 1;
    translate: 0;
    animation-timing-function: cubic-bezier(.45, 0, .2, 1);
  }

  91%, 100% {
    opacity: 1;
    translate: 0 -20.833%;
  }
}

@keyframes hoy-abajo {
  0%, 82% {
    opacity: 0;
    translate: 0 26.32%;
    animation-timing-function: cubic-bezier(.45, 0, .2, 1);
  }

  87.5% {
    opacity: 0;
  }

  91%, 100% {
    opacity: 1;
    translate: 0;
  }
}

@keyframes fijas-h {
  0%, 90.5% {
    opacity: 1;
  }

  91%, 100% {
    opacity: 0;
  }
}

@keyframes toque {
  0% {
    opacity: 0;
    scale: .5;
  }

  25% {
    opacity: 1;
    scale: .75;
  }

  55% {
    opacity: .8;
    scale: .85;
  }

  100% {
    opacity: 0;
    scale: 1.35;
  }
}

@keyframes avance {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes t0 {
  0%, 22% {
    opacity: 1;
  }

  25%, 100% {
    opacity: var(--apagado);
  }
}

@keyframes t1 {
  0%, 22% {
    opacity: var(--apagado);
  }

  25%, 47% {
    opacity: 1;
  }

  50%, 100% {
    opacity: var(--apagado);
  }
}

@keyframes t2 {
  0%, 47% {
    opacity: var(--apagado);
  }

  50%, 72% {
    opacity: 1;
  }

  75%, 100% {
    opacity: var(--apagado);
  }
}

@keyframes t3 {
  0%, 72% {
    opacity: var(--apagado);
  }

  75%, 100% {
    opacity: 1;
  }
}

@keyframes d0 {
  0%, 21% {
    opacity: 1;
    translate: 0;
  }

  25%, 100% {
    opacity: 0;
    translate: 0 -.8rem;
  }
}

@keyframes d1 {
  0%, 22% {
    opacity: 0;
    translate: 0 .8rem;
  }

  26%, 46% {
    opacity: 1;
    translate: 0;
  }

  50%, 100% {
    opacity: 0;
    translate: 0 -.8rem;
  }
}

@keyframes d2 {
  0%, 47% {
    opacity: 0;
    translate: 0 .8rem;
  }

  51%, 71% {
    opacity: 1;
    translate: 0;
  }

  75%, 100% {
    opacity: 0;
    translate: 0 -.8rem;
  }
}

@keyframes d3 {
  0%, 72% {
    opacity: 0;
    translate: 0 .8rem;
  }

  76%, 100% {
    opacity: 1;
    translate: 0;
  }
}

@keyframes l0 {
  0% {
    transform: scaleY(.15);
  }

  22% {
    transform: scaleY(1);
  }

  25%, 100% {
    transform: scaleY(0);
  }
}

@keyframes l1 {
  0%, 25% {
    transform: scaleY(0);
  }

  47% {
    transform: scaleY(1);
  }

  50%, 100% {
    transform: scaleY(0);
  }
}

@keyframes l2 {
  0%, 50% {
    transform: scaleY(0);
  }

  72% {
    transform: scaleY(1);
  }

  75%, 100% {
    transform: scaleY(0);
  }
}

@keyframes l3 {
  0%, 75% {
    transform: scaleY(0);
  }

  100% {
    transform: scaleY(1);
  }
}