@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateX(40px); opacity: .4; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.screen {
  display: none;
}

.screen.active {
  display: block;
  animation: slideUp .35s ease;
}

#screen-precios.active {
  animation: fadeIn .4s ease;
}

.step-dot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: #2C2C32;
  color: #9A9DA4;
  transition: background .2s, color .2s;
}

.step-dot.on {
  background: var(--accent);
  color: #fff;
}

.step-lbl {
  font-size: 14px;
  font-weight: 600;
  color: #9A9DA4;
  transition: color .2s, font-weight .2s;
}

.step-lbl.on {
  font-weight: 700;
  color: #fff;
}