.intro-bloqueado,
.intro-bloqueado body { overflow: hidden }
.intro-bloqueado { scrollbar-gutter: stable }

.intro {
  position: fixed;
  inset: 0;
  z-index: var(--p-z-intro);
  background: var(--p-noche);
  pointer-events: none;
  display: none;
}
.intro-pendiente .intro { display: block }

.intro-pendiente .portal-marca {
  z-index: var(--p-z-intro-marca);
  opacity: 0;
  transition: opacity var(--p-intro-s) var(--p-ease-suave);
}
.intro-pendiente.intro-visible .portal-marca { opacity: 1 }
.intro-pendiente .portal-marca,
.intro-pendiente .marca-svg { overflow: visible }

.intro-pendiente .marca-svg {
  transform: translateX(40.164%);
  transition: transform var(--p-intro-letras) var(--p-ease-tela);
}

.intro-pendiente.intro-letras .marca-svg { transform: translateX(var(--p-marca-centrado)) }

.intro-pendiente #m-a1,
.intro-pendiente #m-l,
.intro-pendiente #m-t,
.intro-pendiente #m-i,
.intro-pendiente #m-a2 {
  opacity: 0;
  transform: translateX(74px);

  transition: opacity  calc(var(--p-intro-letras) - 5 * var(--p-intro-paso)) var(--p-ease-suave),
              transform calc(var(--p-intro-letras) - 5 * var(--p-intro-paso)) var(--p-ease-tela);
}

.intro-pendiente #m-a1 { transition-delay: calc(0 * var(--p-intro-paso)) }
.intro-pendiente #m-l  { transition-delay: calc(1 * var(--p-intro-paso)) }
.intro-pendiente #m-t  { transition-delay: calc(2 * var(--p-intro-paso)) }
.intro-pendiente #m-i  { transition-delay: calc(3 * var(--p-intro-paso)) }
.intro-pendiente #m-a2 { transition-delay: calc(4 * var(--p-intro-paso)) }

.intro-pendiente.intro-letras #m-a1,
.intro-pendiente.intro-letras #m-l,
.intro-pendiente.intro-letras #m-t,
.intro-pendiente.intro-letras #m-i,
.intro-pendiente.intro-letras #m-a2 {
  opacity: 1;
  transform: none;
}

.intro-pendiente #m-barra {
  transform: translateX(-251.85px);
  transition: transform calc(var(--p-intro-letras) - 5 * var(--p-intro-paso)) var(--p-ease-tela);
  transition-delay: calc(5 * var(--p-intro-paso));
}
.intro-pendiente.intro-letras #m-barra { transform: none }

.intro-pendiente .nav-enlaces a:not(.nav-acceso) {
  opacity: 0;
  transition: opacity var(--p-intro-viaje) var(--p-ease-suave);
}
.intro-pendiente.intro-nav .nav-enlaces a:not(.nav-acceso) { opacity: 1 }

.intro-pendiente .nav { z-index: var(--p-z-intro-acceso) }
.intro-pendiente .nav-acceso { opacity: 1 }

@media (max-width: 860px) {
  .intro-pendiente .nav-enlaces a:not(.nav-acceso) { opacity: 1 }
  .intro-pendiente .nav-boton { opacity: 1 }
}

.intro-hecha .intro { display: none }

.intro-hecha .portal-marca { z-index: var(--p-z-nav); opacity: 1 }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important }

  .intro-bloqueado, .intro-bloqueado body { overflow: visible }
  .intro-pendiente .portal-marca { opacity: 1 }
  .intro-pendiente .marca-svg { transform: translateX(var(--p-marca-centrado)) !important }
  .intro-pendiente #m-a1, .intro-pendiente #m-l, .intro-pendiente #m-t,
  .intro-pendiente #m-i, .intro-pendiente #m-a2 { opacity: 1; transform: none }
  .intro-pendiente #m-barra { transform: none }
  .intro-pendiente .nav-enlaces, .intro-pendiente .nav-boton { opacity: 1 }
}