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

.en-espera[data-astro-cid-gqmmjakz] {
  opacity: .55;
  filter: grayscale();
}

.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);
  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: .42;
  mask-image: radial-gradient(58% 62% at 50% 48%, #000 35%, #0000 78%);
}

.lente-telefono[data-astro-cid-knv3xwt4] {
  position: absolute;
  top: calc(5 * var(--u));
  left: 50%;
  width: calc(20 * var(--u));
  translate: -50%;
  filter: drop-shadow(0 8px 34px #382d1e1f) drop-shadow(0 1px 2px #382d1e1f);
}

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

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

.lente-titulo[data-astro-cid-knv3xwt4] {
  position: absolute;
  top: 12%;
  inset-inline: 0;
  margin: 0;
  text-align: center;
  font-family: var(--f-marca);
  text-transform: uppercase;
  font-size: calc(1.75 * var(--u));
  line-height: 1;
  color: var(--c-blanco);
  text-shadow: 0 1px 12px #382d1e73;
}

.lente-titulo[data-astro-cid-knv3xwt4] span[data-astro-cid-knv3xwt4] {
  display: block;
  margin-top: calc(.6 * var(--u));
  font-family: var(--f-cuerpo);
  text-transform: none;
  font-size: calc(.75 * var(--u));
  color: var(--c-blanco);
}

.lente-barra[data-astro-cid-knv3xwt4] {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(.6 * var(--u));
  padding: calc(.8 * var(--u)) calc(1 * var(--u));
  border-radius: calc(1.2 * var(--u));
  background: linear-gradient(270deg, color-mix(in oklab, var(--c-cielo) 80%, transparent),
      color-mix(in oklab, var(--c-blanco) 75%, transparent) 50%, color-mix(in oklab, var(--c-arena-dorada) 75%, transparent));
  backdrop-filter: blur(8px);
  color: var(--c-tinta);
  font-size: calc(.8 * var(--u));
}

.lente-barra[data-astro-cid-knv3xwt4] svg[data-astro-cid-knv3xwt4] {
  width: calc(1.1 * var(--u));
  flex: none;
}

.lente-barra[data-astro-cid-knv3xwt4] path[data-astro-cid-knv3xwt4] {
  fill: none;
  stroke: var(--c-mar);
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lente-lineas[data-astro-cid-knv3xwt4] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lente-lineas[data-astro-cid-knv3xwt4] path[data-astro-cid-knv3xwt4] {
  fill: none;
  stroke: var(--c-blanco);
  stroke-width: .12px;
}

.lente-lineas[data-astro-cid-knv3xwt4] circle[data-astro-cid-knv3xwt4] {
  fill: color-mix(in oklab, var(--c-blanco) 40%, transparent);
  stroke: var(--c-blanco);
  stroke-width: .12px;
}

.etiqueta-flotante[data-astro-cid-knv3xwt4] {
  position: absolute;
  display: grid;
  gap: calc(.5 * var(--u));
  padding: calc(1 * var(--u)) calc(1.1 * var(--u));
  border-radius: calc(1.2 * var(--u));
  background: var(--c-blanco);
  box-shadow: var(--sombra-flotar);
  white-space: nowrap;
}

.etiqueta-flotante[data-astro-cid-knv3xwt4] b[data-astro-cid-knv3xwt4] {
  font-family: var(--f-marca);
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(1.15 * var(--u));
  color: var(--c-tinta);
}

.etiqueta-flotante[data-astro-cid-knv3xwt4] span[data-astro-cid-knv3xwt4] {
  display: inline-flex;
  align-items: center;
  gap: calc(.45 * var(--u));
  padding: calc(.35 * var(--u)) calc(.7 * var(--u));
  border-radius: 999px;
  background: color-mix(in oklab, var(--c-cielo) 28%, var(--c-blanco));
  font-size: calc(.75 * var(--u));
  color: var(--c-tinta);
}

.etiqueta-flotante[data-astro-cid-knv3xwt4] i[data-astro-cid-knv3xwt4] {
  width: calc(.55 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-cielo);
  box-shadow: 0 0 0 calc(.22 * var(--u)) color-mix(in oklab, var(--c-cielo) 40%, transparent);
}

.etiqueta-flotante[data-astro-cid-knv3xwt4] i[data-astro-cid-knv3xwt4].mar {
  background: var(--c-mar);
  box-shadow: 0 0 0 calc(.22 * var(--u)) color-mix(in oklab, var(--c-mar) 25%, transparent);
}

.e1[data-astro-cid-knv3xwt4] {
  left: calc(-3 * var(--u));
  top: calc(9 * var(--u));
}

.e2[data-astro-cid-knv3xwt4] {
  left: calc(35 * var(--u));
  top: calc(18 * var(--u));
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lente-lineas[data-astro-cid-knv3xwt4] path[data-astro-cid-knv3xwt4] {
      stroke-dasharray: 1;
      animation: linear both trazar;
      animation-timeline: --lente;
    }

    .lente-lineas[data-astro-cid-knv3xwt4] circle[data-astro-cid-knv3xwt4], .etiqueta-flotante[data-astro-cid-knv3xwt4] {
      animation: linear both brotar;
      animation-timeline: --lente;
    }

    .l1[data-astro-cid-knv3xwt4], .d1[data-astro-cid-knv3xwt4] {
      animation-range: cover 30% cover 40%;
    }

    .e1[data-astro-cid-knv3xwt4] {
      animation-range: cover 34% cover 44%;
    }

    .l2[data-astro-cid-knv3xwt4], .d2[data-astro-cid-knv3xwt4] {
      animation-range: cover 40% cover 50%;
    }

    .e2[data-astro-cid-knv3xwt4] {
      animation-range: cover 44% cover 54%;
    }
  }
}

@keyframes trazar {
  from {
    stroke-dashoffset: 1px;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes brotar {
  from {
    opacity: 0;
    scale: .85;
    translate: 0 calc(1 * var(--u));
  }
}

@media (width <= 700px) {
  .lente-lineas[data-astro-cid-knv3xwt4] {
    display: none;
  }

  .e1[data-astro-cid-knv3xwt4] {
    left: calc(9 * var(--u));
    top: calc(11 * var(--u));
  }

  .e2[data-astro-cid-knv3xwt4] {
    left: auto;
    right: calc(9.5 * var(--u));
    top: calc(27 * var(--u));
  }
}
.como-funciona[data-astro-cid-h4paav4i] {
  --tel: 14rem;
}

.sol[data-astro-cid-h4paav4i], .flotante[data-astro-cid-h4paav4i], .isla[data-astro-cid-h4paav4i], .reflejo[data-astro-cid-h4paav4i], .boton-lado[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;
}

.pantallas[data-astro-cid-h4paav4i] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tel), 1fr));
  gap: 1.5rem;
  justify-items: center;
}

.pantallas[data-astro-cid-h4paav4i] .pantalla[data-astro-cid-h4paav4i] {
  width: var(--tel);
  aspect-ratio: 9 / 19.3;
  border-radius: calc(var(--tel) * .14);
  box-shadow: 0 0 0 calc(var(--tel) * .028) #2b241c, 0 30px 60px -30px #382d1e66;
}

.pantalla[data-astro-cid-h4paav4i] {
  --sep: color-mix(in oklab, var(--c-tinta) 10%, transparent);
  --gris: color-mix(in oklab, var(--c-cafe) 72%, var(--c-espuma));
  container-type: inline-size;
  position: relative;
  height: 100%;
  overflow: hidden;
  background: color-mix(in oklab, var(--c-espuma) 70%, #eef1f4);
  color: var(--c-tinta);
  font-family: var(--f-cuerpo);
  text-align: left;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

.pantalla[data-astro-cid-h4paav4i] p[data-astro-cid-h4paav4i] {
  margin: 0;
}

.pantalla[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.estado-sis[data-astro-cid-h4paav4i] {
  position: absolute;
  z-index: 6;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 12cqw;
  padding: 1cqw 8cqw 0 10cqw;
  font-size: 3.9cqw;
  font-weight: 600;
  letter-spacing: -.01em;
}

.iconos-sis[data-astro-cid-h4paav4i] {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
}

.pantalla[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i].sis {
  width: 4.4cqw;
  height: auto;
  fill: currentColor;
  stroke: none;
}

.bat[data-astro-cid-h4paav4i] {
  position: relative;
  width: 6.6cqw;
  height: 3.2cqw;
  border-radius: 1cqw;
  box-shadow: inset 0 0 0 .3cqw color-mix(in oklab, currentColor 45%, transparent);
  padding: .55cqw;
}

.bat[data-astro-cid-h4paav4i]:after {
  content: "";
  position: absolute;
  right: -.9cqw;
  top: 1cqw;
  width: .5cqw;
  height: 1.2cqw;
  border-radius: 0 .4cqw .4cqw 0;
  background: color-mix(in oklab, currentColor 45%, transparent);
}

.bat[data-astro-cid-h4paav4i] i[data-astro-cid-h4paav4i] {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: .5cqw;
  background: currentColor;
}

.vista[data-astro-cid-h4paav4i] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  padding: 13cqw 5cqw 27cqw;
}

.nav[data-astro-cid-h4paav4i] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 7cqw;
  font-size: 3.6cqw;
}

.nav-atras[data-astro-cid-h4paav4i] {
  display: flex;
  align-items: center;
  gap: .4cqw;
  color: var(--c-mar);
}

.nav-atras[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
  width: 5cqw;
  stroke-width: 2.2px;
}

.nav-paso[data-astro-cid-h4paav4i], .nav-fecha[data-astro-cid-h4paav4i] {
  font-size: 3.2cqw;
  color: var(--gris);
}

.avatar[data-astro-cid-h4paav4i] {
  display: grid;
  place-items: center;
  width: 8cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 3.4cqw;
  font-weight: 500;
  color: var(--c-tinta);
  background: linear-gradient(145deg, var(--c-cielo), color-mix(in oklab, var(--c-cielo) 55%, var(--c-blanco)));
}

.titulo-grande[data-astro-cid-h4paav4i] {
  font-family: var(--f-titulo);
  font-size: 10.8cqw;
  line-height: 1;
  letter-spacing: -.01em;
  margin: .5cqw 0 1cqw !important;
}

.cabecera[data-astro-cid-h4paav4i] {
  font-size: 2.9cqw;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 1.4cqw 0 -1.2cqw 3cqw !important;
}

.grupo[data-astro-cid-h4paav4i] {
  border-radius: 4.2cqw;
  background: var(--c-blanco);
  box-shadow: 0 .3cqw 1.2cqw -.6cqw #382d1e1f;
  overflow: hidden;
}

.celda[data-astro-cid-h4paav4i] {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 3cqw 3.6cqw;
}

.celda-txt[data-astro-cid-h4paav4i] {
  display: grid;
  gap: .4cqw;
  flex: 1;
  min-width: 0;
}

.celda-txt[data-astro-cid-h4paav4i] b[data-astro-cid-h4paav4i] {
  font-weight: 500;
  font-size: 3.9cqw;
}

.celda-txt[data-astro-cid-h4paav4i] small[data-astro-cid-h4paav4i], .cita-s[data-astro-cid-h4paav4i] {
  font-size: 3.1cqw;
  color: var(--gris);
}

.pantalla[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i].chevron {
  width: 4cqw;
  color: color-mix(in oklab, var(--c-tinta) 28%, transparent);
  stroke-width: 2.4px;
}

.icono-app[data-astro-cid-h4paav4i] {
  flex: none;
  display: grid;
  place-items: center;
  width: 8.6cqw;
  aspect-ratio: 1;
  border-radius: 2.2cqw;
  background: linear-gradient(150deg, var(--c-cielo), color-mix(in oklab, var(--c-cielo) 70%, var(--c-mar)));
}

.icono-app[data-astro-cid-h4paav4i] svg {
  width: 62%;
  fill: var(--c-blanco);
  stroke: none;
}

.fila[data-astro-cid-h4paav4i] {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 1.6cqw;
  padding: 3cqw 3.6cqw;
  font-size: 3.5cqw;
}

.fila[data-astro-cid-h4paav4i] span[data-astro-cid-h4paav4i]:first-child {
  color: var(--c-tinta);
}

.fila[data-astro-cid-h4paav4i] b[data-astro-cid-h4paav4i] {
  font-weight: 400;
  color: var(--gris);
}

.fila[data-astro-cid-h4paav4i] + .fila[data-astro-cid-h4paav4i]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 3.6cqw;
  right: 0;
  height: 1px;
  background: var(--sep);
}

.enlace-app[data-astro-cid-h4paav4i] {
  color: var(--c-mar) !important;
}

.boton-app[data-astro-cid-h4paav4i] {
  display: block;
  padding: 3.6cqw;
  border-radius: 99px;
  text-align: center;
  font-family: var(--f-cuerpo);
  font-weight: 500;
  font-size: 3.8cqw;
  background: var(--c-mar);
  color: var(--c-blanco);
}

.barra-app[data-astro-cid-h4paav4i] {
  position: absolute;
  z-index: 5;
  left: 5cqw;
  right: 5cqw;
  bottom: 7cqw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1.4cqw;
  border-radius: 99px;
  background: color-mix(in oklab, var(--c-blanco) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 0 0 1px #ffffffb3, 0 2cqw 6cqw -2cqw #382d1e38, 0 0 0 .5px #382d1e14;
}

.tab[data-astro-cid-h4paav4i] {
  display: grid;
  justify-items: center;
  gap: .5cqw;
  padding: 1.6cqw 0 1.3cqw;
  border-radius: 99px;
  color: var(--gris);
}

.tab[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
  width: 5.6cqw;
}

.tab[data-astro-cid-h4paav4i] small[data-astro-cid-h4paav4i] {
  font-size: 2.4cqw;
  font-weight: 500;
}

.tab[data-astro-cid-h4paav4i].activa {
  color: var(--c-mar);
  background: color-mix(in oklab, var(--c-cielo) 35%, transparent);
}

.tab[data-astro-cid-h4paav4i].activa svg[data-astro-cid-h4paav4i] {
  stroke-width: 2.1px;
}

.indicador[data-astro-cid-h4paav4i] {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 2.2cqw;
  width: 34cqw;
  height: 1.3cqw;
  translate: -50%;
  border-radius: 99px;
  background: var(--c-tinta);
  opacity: .85;
}

.aviso-suave[data-astro-cid-h4paav4i] {
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  top: 13cqw;
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  padding: 2.2cqw 4.4cqw 2.2cqw 2.2cqw;
  border-radius: 99px;
  white-space: nowrap;
  font-size: 3.4cqw;
  font-weight: 500;
  background: color-mix(in oklab, var(--c-blanco) 88%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 3cqw 8cqw -3cqw #382d1e4d, 0 0 0 .5px #382d1e1a;
  opacity: 0;
}

.aviso-ic[data-astro-cid-h4paav4i] {
  display: grid;
  place-items: center;
  width: 6cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-mar);
  color: var(--c-blanco);
}

.aviso-ic[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
  width: 3.6cqw;
  stroke-width: 2.6px;
}

.pasos[data-astro-cid-h4paav4i] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4cqw;
  margin-top: -.6cqw;
}

.paso[data-astro-cid-h4paav4i] {
  height: .9cqw;
  border-radius: 1cqw;
  background: var(--sep);
  overflow: hidden;
}

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

.cal[data-astro-cid-h4paav4i] {
  display: grid;
  gap: 1.4cqw;
  padding: 3cqw 3.2cqw 2.6cqw;
}

.cal-cab[data-astro-cid-h4paav4i] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 3.8cqw;
}

.cal-cab[data-astro-cid-h4paav4i] b[data-astro-cid-h4paav4i] {
  font-weight: 600;
}

.cal-flechas[data-astro-cid-h4paav4i] {
  display: flex;
  gap: 4cqw;
  color: var(--c-mar);
}

.cal-flechas[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
  width: 4.4cqw;
  stroke-width: 2.3px;
}

.cal-sem[data-astro-cid-h4paav4i], .cal-dias[data-astro-cid-h4paav4i] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.cal-sem[data-astro-cid-h4paav4i] span[data-astro-cid-h4paav4i] {
  font-size: 2.6cqw;
  font-weight: 600;
  color: color-mix(in oklab, var(--c-tinta) 35%, transparent);
}

.cal-dias[data-astro-cid-h4paav4i] span[data-astro-cid-h4paav4i] {
  position: relative;
  display: grid;
  place-items: center;
  height: 6.6cqw;
  font-size: 3.3cqw;
  color: color-mix(in oklab, var(--c-tinta) 28%, transparent);
}

.cal-dias[data-astro-cid-h4paav4i] .libre[data-astro-cid-h4paav4i] {
  color: var(--c-tinta);
}

.cal-dias[data-astro-cid-h4paav4i] .libre[data-astro-cid-h4paav4i]:after {
  content: "";
  position: absolute;
  bottom: .1cqw;
  width: .8cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-mar);
  opacity: .55;
}

.cal-dias[data-astro-cid-h4paav4i] .elegido[data-astro-cid-h4paav4i] {
  margin-inline: auto;
  width: 6.6cqw;
  border-radius: 50%;
  font-weight: 600;
  background: var(--c-mar);
  color: var(--c-blanco);
}

.cal-dias[data-astro-cid-h4paav4i] .elegido[data-astro-cid-h4paav4i]:after {
  display: none;
}

.estilistas[data-astro-cid-h4paav4i] {
  display: flex;
  justify-content: space-between;
  padding: .6cqw 2cqw 0;
}

.est[data-astro-cid-h4paav4i] {
  display: grid;
  justify-items: center;
  gap: 1cqw;
  font-size: 2.8cqw;
  color: var(--gris);
}

.est[data-astro-cid-h4paav4i] i[data-astro-cid-h4paav4i] {
  display: grid;
  place-items: center;
  width: 11cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  font-style: normal;
  font-size: 4.2cqw;
  color: var(--c-tinta);
  background: linear-gradient(145deg, color-mix(in oklab, var(--c-arena-dorada) 35%, var(--c-blanco)), color-mix(in oklab, var(--c-arena-dorada) 12%, var(--c-blanco)));
}

.est[data-astro-cid-h4paav4i] i[data-astro-cid-h4paav4i] svg {
  width: 55%;
  fill: var(--c-cafe-arena);
  stroke: none;
}

.est[data-astro-cid-h4paav4i].elegida {
  color: var(--c-tinta);
  font-weight: 500;
}

.est[data-astro-cid-h4paav4i].elegida i[data-astro-cid-h4paav4i] {
  box-shadow: 0 0 0 .7cqw var(--c-blanco), 0 0 0 1.3cqw var(--c-mar);
}

.horas[data-astro-cid-h4paav4i] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8cqw;
}

.hora[data-astro-cid-h4paav4i] {
  padding: 2.4cqw 0;
  border-radius: 99px;
  text-align: center;
  font-size: 3.3cqw;
  font-variant-numeric: tabular-nums;
  background: var(--c-blanco);
  box-shadow: 0 .3cqw 1cqw -.5cqw #382d1e26;
}

.hora[data-astro-cid-h4paav4i].elegida {
  background: var(--c-mar);
  color: var(--c-blanco);
  font-weight: 500;
}

.hoja[data-astro-cid-h4paav4i] {
  position: absolute;
  z-index: 8;
  inset: auto 0 0;
  display: grid;
  gap: 2.4cqw;
  padding: 2.2cqw 5cqw 10cqw;
  border-radius: 9cqw 9cqw 0 0;
  background: color-mix(in oklab, var(--c-espuma) 60%, #eef1f4);
  box-shadow: 0 -3cqw 14cqw -4cqw #382d1e47;
  translate: 0 105%;
}

.asa[data-astro-cid-h4paav4i] {
  justify-self: center;
  width: 9cqw;
  height: 1.2cqw;
  border-radius: 1cqw;
  background: color-mix(in oklab, var(--c-tinta) 22%, transparent);
}

.hoja-titulo[data-astro-cid-h4paav4i] {
  font-size: 4.4cqw;
  font-weight: 600;
  text-align: center;
  margin: .6cqw 0 .4cqw !important;
}

.nota[data-astro-cid-h4paav4i] {
  font-size: 3cqw;
  color: var(--gris);
  text-align: center;
  padding: 0 3cqw;
}

.bloqueo[data-astro-cid-h4paav4i] {
  align-items: center;
  padding: 13cqw 4cqw 6cqw;
  color: var(--c-tinta);
  background: linear-gradient(178deg, color-mix(in oklab, var(--c-cielo) 92%, var(--c-mar)) 0%, var(--c-cielo) 30%, color-mix(in oklab, var(--c-cielo) 40%, var(--c-blanco)) 62%, color-mix(in oklab, var(--c-arena-dorada) 45%, var(--c-blanco)) 100%);
}

.pantalla[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i].candado-sis {
  width: 4.6cqw;
  margin-top: 1cqw;
}

.b-fecha[data-astro-cid-h4paav4i] {
  font-size: 4cqw;
  font-weight: 500;
  margin-top: 1.4cqw !important;
}

.b-hora[data-astro-cid-h4paav4i] {
  font-family: var(--f-titulo);
  font-size: 27cqw;
  line-height: .95;
  letter-spacing: -.02em;
}

.notif[data-astro-cid-h4paav4i] {
  display: flex;
  gap: 2.8cqw;
  width: 100%;
  margin-top: 7cqw;
  padding: 3.2cqw;
  border-radius: 5.5cqw;
  background: color-mix(in oklab, var(--c-blanco) 62%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 0 0 .5px #fff9;
}

.notif-icono[data-astro-cid-h4paav4i] {
  flex: none;
  display: grid;
  place-items: center;
  width: 9cqw;
  aspect-ratio: 1;
  border-radius: 2.3cqw;
  background: var(--c-mar);
  color: var(--c-blanco);
}

.notif-icono[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
  width: 5.4cqw;
  fill: currentColor;
  stroke: none;
}

.notif-cuerpo[data-astro-cid-h4paav4i] {
  display: grid;
  gap: .6cqw;
  min-width: 0;
}

.notif-cab[data-astro-cid-h4paav4i] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 3.4cqw;
}

.notif-cab[data-astro-cid-h4paav4i] b[data-astro-cid-h4paav4i] {
  font-weight: 600;
}

.notif-cab[data-astro-cid-h4paav4i] small[data-astro-cid-h4paav4i] {
  font-size: 2.9cqw;
  color: color-mix(in oklab, var(--c-tinta) 55%, transparent);
}

.notif-txt[data-astro-cid-h4paav4i] {
  font-size: 3.4cqw;
  line-height: 1.35;
}

.respuesta[data-astro-cid-h4paav4i] {
  display: grid;
  width: 100%;
  margin-top: 2.2cqw;
}

.respuesta[data-astro-cid-h4paav4i] > [data-astro-cid-h4paav4i] {
  grid-area: 1 / 1;
}

.menu-acciones[data-astro-cid-h4paav4i] {
  display: grid;
  justify-self: end;
  transform-origin: 100% 0;
  width: 62%;
  border-radius: 4cqw;
  overflow: hidden;
  background: color-mix(in oklab, var(--c-blanco) 80%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 3cqw 10cqw -4cqw #382d1e59;
}

.accion[data-astro-cid-h4paav4i] {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.8cqw 3.6cqw;
  font-size: 3.6cqw;
}

.accion[data-astro-cid-h4paav4i] + .accion[data-astro-cid-h4paav4i]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--sep);
}

.accion[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
  width: 4.4cqw;
}

.accion--si[data-astro-cid-h4paav4i] {
  color: var(--c-mar);
  font-weight: 500;
}

.confirmada[data-astro-cid-h4paav4i] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  padding: 2.4cqw 4cqw;
  justify-self: center;
  border-radius: 99px;
  font-size: 3.4cqw;
  font-weight: 500;
  background: color-mix(in oklab, var(--c-blanco) 70%, transparent);
  backdrop-filter: blur(14px);
  opacity: 0;
}

.b-pie[data-astro-cid-h4paav4i] {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding: 0 4cqw 3cqw;
}

.b-boton[data-astro-cid-h4paav4i] {
  display: grid;
  place-items: center;
  width: 11cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in oklab, var(--c-tinta) 18%, transparent);
  backdrop-filter: blur(10px);
}

.b-boton[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
  width: 5cqw;
}

.bloqueo[data-astro-cid-h4paav4i] .indicador[data-astro-cid-h4paav4i] {
  bottom: 2.2cqw;
}

.eyebrow[data-astro-cid-h4paav4i] {
  font-family: var(--f-sub);
  font-size: 2.7cqw;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-cafe);
}

.cita[data-astro-cid-h4paav4i] {
  display: grid;
  gap: 1cqw;
  padding: 3.4cqw 3.8cqw;
}

.cita-cab[data-astro-cid-h4paav4i] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6cqw;
}

.estados[data-astro-cid-h4paav4i] {
  display: grid;
}

.estados[data-astro-cid-h4paav4i] > [data-astro-cid-h4paav4i] {
  grid-area: 1 / 1;
  justify-self: end;
}

.estado[data-astro-cid-h4paav4i] {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  padding: 1.1cqw 2.4cqw;
  border: 1px solid;
  border-radius: 99px;
  font-family: var(--f-sub);
  font-size: 2.7cqw;
  letter-spacing: .04em;
  color: var(--c-tinta);
}

.estado[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
  width: 3.2cqw;
  stroke-width: 2.2px;
}

.estado--conf[data-astro-cid-h4paav4i] {
  border-color: var(--c-cielo);
  background: color-mix(in oklab, var(--c-cielo) 70%, var(--c-blanco));
}

.estado--llego[data-astro-cid-h4paav4i] {
  border-color: var(--c-aqua);
  background: color-mix(in oklab, var(--c-aqua) 35%, var(--c-blanco));
  opacity: 0;
}

.cita-t[data-astro-cid-h4paav4i] {
  font-family: var(--f-sub);
  font-weight: 400;
  font-size: 5.6cqw;
  letter-spacing: .04em;
  line-height: 1.1;
}

.llegada[data-astro-cid-h4paav4i] {
  display: flex;
  align-items: center;
  gap: 3.6cqw;
  padding: 3.6cqw;
}

.qr[data-astro-cid-h4paav4i] {
  position: relative;
  flex: none;
  width: 27cqw;
  aspect-ratio: 1;
  padding: 1.6cqw;
  border-radius: 3cqw;
  background: var(--c-blanco);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-arena-dorada) 35%, transparent);
  overflow: hidden;
}

.pantalla[data-astro-cid-h4paav4i] .qr[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
  display: block;
  width: 100%;
  fill: var(--c-tinta);
  stroke: none;
}

.pantalla[data-astro-cid-h4paav4i] .qr[data-astro-cid-h4paav4i] .qr-marco[data-astro-cid-h4paav4i] {
  fill: none;
  stroke: var(--c-tinta);
  stroke-width: 1px;
}

.qr-barrido[data-astro-cid-h4paav4i] {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--c-cielo) 70%, transparent));
  border-bottom: 2px solid var(--c-mar);
  opacity: 0;
}

.llegada-txt[data-astro-cid-h4paav4i] {
  display: grid;
  gap: .8cqw;
  min-width: 0;
  font-size: 3.1cqw;
  color: var(--gris);
}

.llegada-txt[data-astro-cid-h4paav4i] b[data-astro-cid-h4paav4i] {
  font-weight: 500;
  font-size: 3.8cqw;
  color: var(--c-tinta);
}

.respiro[data-astro-cid-h4paav4i] {
  position: relative;
  display: grid;
  gap: 1.6cqw;
  padding: 4.4cqw 4.6cqw;
  border-radius: 5cqw;
  overflow: hidden;
  color: var(--c-tinta);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--c-blanco) 45%, transparent), transparent 55%),
      var(--c-cielo);
  box-shadow: 0 3cqw 8cqw -3cqw #2f607473, inset 0 0 0 .5px #ffffff80;
}

.respiro[data-astro-cid-h4paav4i] .eyebrow[data-astro-cid-h4paav4i] {
  color: color-mix(in oklab, var(--c-tinta) 80%, transparent);
}

.respiro-o[data-astro-cid-h4paav4i] {
  position: absolute;
  right: -6cqw;
  top: -6cqw;
  width: 34cqw;
  opacity: .45;
}

.respiro-o[data-astro-cid-h4paav4i] svg {
  width: 100%;
  fill: var(--c-blanco);
  stroke: none;
}

.respiro-fila[data-astro-cid-h4paav4i] {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2cqw;
}

.respiro-nivel[data-astro-cid-h4paav4i] {
  font-family: var(--f-marca);
  font-weight: 400;
  font-size: 6.6cqw;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}

.respiro-estado[data-astro-cid-h4paav4i] {
  padding: 1cqw 3cqw;
  border-radius: 99px;
  font-family: var(--f-sub);
  font-size: 2.8cqw;
  background: var(--c-blanco);
}

.respiro-pago[data-astro-cid-h4paav4i] {
  position: relative;
  font-family: var(--f-sub);
  font-size: 2.9cqw;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}

.fila--anillo[data-astro-cid-h4paav4i] {
  justify-content: flex-start;
  gap: 3cqw;
  padding-block: 2.4cqw;
}

.anillo[data-astro-cid-h4paav4i] {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 10cqw;
  aspect-ratio: 1;
}

.pantalla[data-astro-cid-h4paav4i] .anillo[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
  position: absolute;
  inset: 0;
  rotate: -90deg;
}

.anillo[data-astro-cid-h4paav4i] circle[data-astro-cid-h4paav4i] {
  fill: none;
  stroke-width: 4px;
}

.pista[data-astro-cid-h4paav4i] {
  stroke: color-mix(in oklab, var(--c-arena-dorada) 25%, transparent);
}

.avance[data-astro-cid-h4paav4i] {
  stroke: var(--c-mar);
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--p));
}

.anillo[data-astro-cid-h4paav4i] i[data-astro-cid-h4paav4i] {
  font-style: normal;
  font-family: var(--f-sub);
  font-size: 2.6cqw;
  font-variant-numeric: tabular-nums;
  color: var(--c-tinta);
}

.fila--ilimitado[data-astro-cid-h4paav4i] .anillo[data-astro-cid-h4paav4i] i[data-astro-cid-h4paav4i] {
  font-size: 4.2cqw;
  line-height: 1;
  color: var(--c-mar);
}

.anillo-txt[data-astro-cid-h4paav4i] {
  display: grid;
  gap: .3cqw;
  font-family: var(--f-sub);
  font-size: 3.5cqw;
  letter-spacing: .03em;
}

.anillo-txt[data-astro-cid-h4paav4i] small[data-astro-cid-h4paav4i] {
  font-family: var(--f-cuerpo);
  font-size: 2.9cqw;
  letter-spacing: 0;
  color: var(--gris);
}

.p3[data-astro-cid-h4paav4i] .aviso-suave[data-astro-cid-h4paav4i] {
  top: auto;
  bottom: 27cqw;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .como-funciona[data-astro-cid-h4paav4i] {
      --tel: min(21rem, 36svh);
      --apagado: .28;
      height: 440svh;
      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: block;
      grid-area: 1 / 2;
      justify-self: center;
      width: calc(var(--tel) * 2.3);
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, color-mix(in oklab, var(--c-cielo) 95%, transparent) 0%, color-mix(in oklab, var(--c-cielo) 45%, transparent) 40%, transparent 68%);
      animation: linear both sol-late;
      animation-timeline: --relato;
      animation-range: contain;
    }

    .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 {
      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;
      position: relative;
      perspective: 1600px;
    }

    .telefono[data-astro-cid-h4paav4i] {
      position: relative;
      width: var(--tel);
      aspect-ratio: 9 / 19.3;
      padding: calc(var(--tel) * .03);
      border-radius: calc(var(--tel) * .175);
      background: linear-gradient(140deg, #6f6253 0%, #2b241c 22%, #3d342a 50%, #1f1a14 78%, #5e5244 100%);
      box-shadow: inset 0 0 0 1.5px #ffffff38,
          inset 0 0 0 calc(var(--tel) * .012) #14110d,
          0 0 0 1px #1e181280,
          0 60px 120px -50px #2f60748c,
          0 40px 70px -40px #382d1e80;
      transform-origin: 50% 70%;
      animation: linear both telefono-entra;
      animation-timeline: --relato;
      animation-range: entry 30% contain 8%;
    }

    .boton-lado[data-astro-cid-h4paav4i] {
      display: block;
      position: absolute;
      width: calc(var(--tel) * .012);
      border-radius: 2px;
      background: linear-gradient(90deg, #1f1a14, #6f6253);
    }

    .boton-lado--a[data-astro-cid-h4paav4i] {
      left: calc(var(--tel) * -.01);
      top: 19%;
      height: 5%;
    }

    .boton-lado--b[data-astro-cid-h4paav4i] {
      left: calc(var(--tel) * -.01);
      top: 27%;
      height: 9%;
    }

    .boton-lado--c[data-astro-cid-h4paav4i] {
      right: calc(var(--tel) * -.01);
      top: 25%;
      height: 13%;
      transform: scaleX(-1);
    }

    .pantallas[data-astro-cid-h4paav4i] {
      position: relative;
      display: block;
      height: 100%;
      overflow: hidden;
      border-radius: calc(var(--tel) * .148);
      background: var(--c-espuma);
      isolation: isolate;
    }

    .pantallas[data-astro-cid-h4paav4i] .pantalla[data-astro-cid-h4paav4i] {
      position: absolute;
      inset: 0;
      width: auto;
      aspect-ratio: auto;
      border-radius: 0;
      box-shadow: none;
    }

    .isla[data-astro-cid-h4paav4i] {
      display: block;
      position: absolute;
      z-index: 10;
      left: 50%;
      top: 2.1%;
      width: 31%;
      height: 3.4%;
      translate: -50%;
      border-radius: 99px;
      background: #0d0b09;
    }

    .reflejo[data-astro-cid-h4paav4i] {
      display: block;
      position: absolute;
      z-index: 11;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(118deg, #ffffff29 0%, #ffffff0a 28%, #0000 42%);
    }

    .estado-sis[data-astro-cid-h4paav4i] {
      padding-inline: 9cqw;
    }

    .p0[data-astro-cid-h4paav4i], .p1[data-astro-cid-h4paav4i], .p2[data-astro-cid-h4paav4i], .p3[data-astro-cid-h4paav4i] {
      animation-timeline: --relato;
      animation-range: contain;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }

    .p0[data-astro-cid-h4paav4i] {
      animation-name: s0;
    }

    .p1[data-astro-cid-h4paav4i] {
      animation-name: s1;
    }

    .p2[data-astro-cid-h4paav4i] {
      animation-name: s2;
    }

    .p3[data-astro-cid-h4paav4i] {
      animation-name: s3;
    }

    .flotante[data-astro-cid-h4paav4i] {
      display: flex;
      position: absolute;
      z-index: 2;
      align-items: center;
      gap: .75rem;
      padding: .8rem 1.1rem .8rem .8rem;
      border-radius: 1.1rem;
      white-space: nowrap;
      background: color-mix(in oklab, var(--c-blanco) 86%, transparent);
      backdrop-filter: blur(14px) saturate(1.2);
      box-shadow: 0 0 0 1px color-mix(in oklab, var(--c-arena-dorada) 30%, transparent), 0 24px 50px -24px #2f607473;
      animation-timeline: --relato;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }

    .flotante[data-astro-cid-h4paav4i] b[data-astro-cid-h4paav4i] {
      display: block;
      font-weight: 500;
      font-size: var(--t-s);
      color: var(--c-tinta);
    }

    .flotante[data-astro-cid-h4paav4i] small[data-astro-cid-h4paav4i] {
      display: block;
      font-size: var(--t-xs);
      color: var(--c-cafe);
    }

    .flotante-ic[data-astro-cid-h4paav4i] {
      display: grid;
      place-items: center;
      width: 2.4rem;
      aspect-ratio: 1;
      border-radius: .8rem;
      background: var(--c-cielo);
      color: var(--c-mar);
    }

    .flotante-ic[data-astro-cid-h4paav4i] svg[data-astro-cid-h4paav4i] {
      width: 1.2rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7px;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .f0[data-astro-cid-h4paav4i] {
      right: calc(var(--tel) * -.62);
      top: 58%;
      animation-name: flota;
      animation-range: contain 13% contain 25%;
    }

    .f1[data-astro-cid-h4paav4i] {
      left: calc(var(--tel) * -.6);
      top: 46%;
      animation-name: flota;
      animation-range: contain 36% contain 50%;
    }

    .f1[data-astro-cid-h4paav4i] .flotante-ic[data-astro-cid-h4paav4i] {
      background: var(--c-aqua);
      color: var(--c-tinta);
    }

    .estacion[data-astro-cid-h4paav4i] {
      flex-direction: column;
      align-items: flex-start;
      gap: .2rem;
      padding: 1rem 1.3rem 1.1rem;
      border-radius: 1.3rem;
      background: var(--c-cielo);
      box-shadow: 0 0 0 1px color-mix(in oklab, var(--c-blanco) 60%, transparent), 0 24px 50px -24px #2f60748c;
    }

    .estacion-eyebrow[data-astro-cid-h4paav4i] {
      display: flex;
      align-items: center;
      gap: .4rem;
      margin-bottom: .35rem;
      font-family: var(--f-sub);
      font-size: var(--t-xs);
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--c-tinta);
    }

    .estacion-eyebrow[data-astro-cid-h4paav4i] svg {
      width: 1rem;
      fill: var(--c-cafe-arena);
    }

    .flotante[data-astro-cid-h4paav4i] .estacion-hola[data-astro-cid-h4paav4i] {
      font-family: var(--f-marca);
      font-weight: 400;
      font-size: 1.75rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      line-height: 1;
    }

    .flotante[data-astro-cid-h4paav4i].estacion small[data-astro-cid-h4paav4i] {
      font-family: var(--f-titulo);
      font-size: 1.15rem;
      color: var(--c-tinta);
    }

    .f2[data-astro-cid-h4paav4i] {
      right: calc(var(--tel) * -.92);
      top: 16%;
      animation-name: flota;
      animation-range: contain 62% contain 75%;
    }

    .f3[data-astro-cid-h4paav4i] {
      left: calc(var(--tel) * -.7);
      top: 64%;
      animation-name: flota-fin;
      animation-range: contain 84%;
    }

    .p0[data-astro-cid-h4paav4i] .dia[data-astro-cid-h4paav4i].elegido {
      animation: linear both elegir-dia;
      animation-timeline: --relato;
      animation-range: contain 3% contain 6%;
    }

    .p0[data-astro-cid-h4paav4i] .est[data-astro-cid-h4paav4i].elegida i[data-astro-cid-h4paav4i] {
      animation: linear both elegir-est;
      animation-timeline: --relato;
      animation-range: contain 5% contain 8%;
    }

    .p0[data-astro-cid-h4paav4i] .hora[data-astro-cid-h4paav4i].elegida {
      animation: linear both elegir-hora;
      animation-timeline: --relato;
      animation-range: contain 7% contain 10%;
    }

    .p0[data-astro-cid-h4paav4i] .paso[data-astro-cid-h4paav4i]:nth-child(3) i[data-astro-cid-h4paav4i], .p0[data-astro-cid-h4paav4i] .paso[data-astro-cid-h4paav4i]:nth-child(4) i[data-astro-cid-h4paav4i] {
      animation: linear both llenar;
      animation-timeline: --relato;
    }

    .p0[data-astro-cid-h4paav4i] .paso[data-astro-cid-h4paav4i]:nth-child(3) i[data-astro-cid-h4paav4i] {
      animation-range: contain 2% contain 8%;
    }

    .p0[data-astro-cid-h4paav4i] .paso[data-astro-cid-h4paav4i]:nth-child(4) i[data-astro-cid-h4paav4i] {
      animation-range: contain 10% contain 13%;
    }

    .p0[data-astro-cid-h4paav4i] .hoja[data-astro-cid-h4paav4i] {
      animation: linear both hoja-sube;
      animation-timeline: --relato;
      animation-range: contain 10% contain 14%;
    }

    .p0[data-astro-cid-h4paav4i] .hoja[data-astro-cid-h4paav4i] .boton-app[data-astro-cid-h4paav4i] {
      animation: linear both pulsar;
      animation-timeline: --relato;
      animation-range: contain 15% contain 17%;
    }

    .p0[data-astro-cid-h4paav4i] .aviso-suave[data-astro-cid-h4paav4i] {
      animation: linear both aviso-cae;
      animation-timeline: --relato;
      animation-range: contain 17% contain 20%;
    }

    .p1[data-astro-cid-h4paav4i] .notif[data-astro-cid-h4paav4i] {
      animation: linear both notif-cae;
      animation-timeline: --relato;
      animation-range: contain 27% contain 31%;
    }

    .p1[data-astro-cid-h4paav4i] .accion--si[data-astro-cid-h4paav4i] {
      animation: linear both resaltar;
      animation-timeline: --relato;
      animation-range: contain 35.5% contain 37%;
    }

    .p1[data-astro-cid-h4paav4i] .respuesta[data-astro-cid-h4paav4i] .menu-acciones[data-astro-cid-h4paav4i] {
      animation: linear both menu-abre, linear both salir;
      animation-timeline: --relato, --relato;
      animation-range: contain 32% contain 34%, contain 37.5% contain 39%;
    }

    .p1[data-astro-cid-h4paav4i] .confirmada[data-astro-cid-h4paav4i] {
      animation: linear both entrar;
      animation-timeline: --relato;
      animation-range: contain 39% contain 41%;
    }

    .p2[data-astro-cid-h4paav4i] .qr-barrido[data-astro-cid-h4paav4i] {
      animation: linear both barrer;
      animation-timeline: --relato;
      animation-range: contain 52% contain 58%;
    }

    .p2[data-astro-cid-h4paav4i] .estado--llego[data-astro-cid-h4paav4i] {
      animation: linear both entrar;
      animation-timeline: --relato;
      animation-range: contain 58% contain 60%;
    }

    .p2[data-astro-cid-h4paav4i] .estado--conf[data-astro-cid-h4paav4i] {
      animation: linear both salir;
      animation-timeline: --relato;
      animation-range: contain 58% contain 60%;
    }

    .p3[data-astro-cid-h4paav4i] .respiro[data-astro-cid-h4paav4i] {
      animation: linear both respiro-entra;
      animation-timeline: --relato;
      animation-range: contain 74% contain 79%;
    }

    .p3[data-astro-cid-h4paav4i] .avance[data-astro-cid-h4paav4i] {
      animation: linear both anillo-llena;
      animation-timeline: --relato;
      animation-range: contain 79% contain 85%;
    }

    .p3[data-astro-cid-h4paav4i] .aviso-suave[data-astro-cid-h4paav4i] {
      animation: linear both aviso-cae;
      animation-timeline: --relato;
      animation-range: contain 86% contain 89%;
    }
  }
}

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

      .escenario[data-astro-cid-h4paav4i] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: start;
        padding-top: max(5.5rem, 11svh);
        row-gap: 1.25rem;
      }

      .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: start;
      }

      .sol[data-astro-cid-h4paav4i] {
        margin-top: calc(var(--tel) * -.3);
      }

      .flotante[data-astro-cid-h4paav4i] {
        display: none;
      }
    }
  }
}

@keyframes telefono-entra {
  from {
    opacity: 0;
    transform: translateY(22svh) rotateX(26deg) rotateZ(-4deg) scale(.88);
  }
}

@keyframes sol-late {
  0% {
    scale: .8;
    opacity: .6;
  }

  50% {
    scale: 1.05;
    opacity: 1;
  }

  100% {
    scale: .85;
    opacity: .7;
  }
}

@keyframes llenar {
  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);
  }
}

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

  25%, 100% {
    opacity: 0;
    scale: .97;
  }
}

@keyframes s1 {
  0%, 22% {
    opacity: 0;
    scale: 1.03;
  }

  25%, 47% {
    opacity: 1;
    scale: 1;
  }

  50%, 100% {
    opacity: 0;
    scale: .97;
  }
}

@keyframes s2 {
  0%, 47% {
    opacity: 0;
    scale: 1.03;
  }

  50%, 72% {
    opacity: 1;
    scale: 1;
  }

  75%, 100% {
    opacity: 0;
    scale: .97;
  }
}

@keyframes s3 {
  0%, 72% {
    opacity: 0;
    scale: 1.03;
  }

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

@keyframes flota {
  0% {
    opacity: 0;
    translate: 0 2.5rem;
    scale: .9;
  }

  25%, 75% {
    opacity: 1;
    translate: 0;
    scale: 1;
  }

  100% {
    opacity: 0;
    translate: 0 -2.5rem;
    scale: .96;
  }
}

@keyframes flota-fin {
  0% {
    opacity: 0;
    translate: 0 2.5rem;
    scale: .9;
  }

  35%, 100% {
    opacity: 1;
    translate: 0;
    scale: 1;
  }
}

@keyframes elegir-dia {
  from {
    background: none;
    color: var(--c-tinta);
    scale: .7;
  }
}

@keyframes elegir-est {
  from {
    box-shadow: 0 0 0 0 var(--c-blanco), 0 0 0 0 var(--c-mar);
  }
}

@keyframes elegir-hora {
  from {
    background: var(--c-blanco);
    color: var(--c-tinta);
    scale: .92;
  }
}

@keyframes menu-abre {
  from {
    opacity: 0;
    scale: .6;
  }
}

@keyframes resaltar {
  0%, 100% {
    background: none;
  }

  50% {
    background: color-mix(in oklab, var(--c-tinta) 8%, transparent);
  }
}

@keyframes respiro-entra {
  from {
    translate: 0 12cqw;
    rotate: -3deg;
    opacity: 0;
  }
}

@keyframes anillo-llena {
  from {
    stroke-dashoffset: 1px;
  }
}

@keyframes barrer {
  0% {
    opacity: 0;
    translate: 0 -100%;
  }

  15%, 85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: 0 360%;
  }
}

@keyframes pulsar {
  0%, 100% {
    scale: 1;
  }

  50% {
    scale: .94;
  }
}

@keyframes hoja-sube {
  from {
    translate: 0 105%;
  }

  to {
    translate: 0;
  }
}

@keyframes aviso-cae {
  from {
    opacity: 0;
    translate: 0 -6cqw;
  }

  to {
    opacity: 1;
    translate: 0;
  }
}

@keyframes notif-cae {
  from {
    opacity: 0;
    translate: 0 -30cqw;
    scale: .92;
  }
}

@keyframes salir {
  to {
    opacity: 0;
    scale: .94;
  }
}

@keyframes entrar {
  from {
    opacity: 0;
    scale: .9;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}