/* Barra de navegación translúcida, como en iOS */
.nav {
  position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: calc(44px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0;
  background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid transparent; transition: border-color .2s;
}
.nav.con-borde { border-bottom-color: var(--sep); }
.nav .atras { justify-self: start; display: inline-flex; align-items: center; gap: 2px; padding: 8px; }
.nav .atras span[aria-hidden] { font-size: 30px; line-height: 0; margin-top: -3px; }
.nav .idioma { justify-self: end; padding: 8px; font-size: 15px; }
.nav-titulo { font-weight: 600; font-size: 17px; opacity: 0; transition: opacity .2s; }
.nav.con-borde .nav-titulo { opacity: 1; }
.barra { position: sticky; top: calc(44px + env(safe-area-inset-top)); z-index: 9; height: 2px; }
.barra div { height: 100%; width: 0; background: var(--tint); transition: width .3s ease; }

.app { max-width: 600px; margin: 0 auto; padding: 0 16px 8px; }
.vista { padding-bottom: 150px; }
.titulo-grande { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .37px; margin: 4px 0 2px; }
.sub { color: var(--label-2); margin: 0 0 24px; font-size: 17px; }
.sub:empty { margin-bottom: 16px; }
.paso-de { color: var(--label-2); font-size: 13px; margin: 10px 0 0; text-transform: uppercase; letter-spacing: -.08px; }

.pasos-como .num {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--fill); color: var(--label-2);
  font-size: 13px; font-weight: 600; display: grid; place-items: center;
}

/* Botón de abajo */
.abajo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 10px 16px 0;
  background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--sep);
}
.abajo > * { max-width: 568px; margin-left: auto; margin-right: auto; }
.abajo .credito { padding-top: 10px; }
.error-global { color: var(--tint); font-size: 15px; text-align: center; margin: 0 auto 8px; }
.error-global:empty { display: none; }

.seccion.mal .card { box-shadow: 0 0 0 1.5px var(--tint) inset; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Listo */
.listo { text-align: center; padding-top: 12vh; }
.listo svg { width: 76px; height: 76px; }
.listo circle { fill: var(--green); }
.listo path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.listo .titulo-grande { margin-top: 16px; }

.intro { margin: 0 0 24px; font-size: 17px; line-height: 1.35; }
.sub + .intro { margin-top: -12px; }
#inicio .intro:last-child { color: var(--label-2); font-size: 15px; margin-top: -8px; }

.foto { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 680; object-fit: cover; border-radius: 12px; margin: 8px 0 16px; background: var(--card); }

.abajo .btn { display: block; }
.abajo .saltar { display: block; margin: 10px auto 0; font-size: 15px; }