.num-paso {
  font-family: Odor Mean Chey;
  font-weight: 400;
  font-size: 30px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #fff !important;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #0FC8CD !important;
}

.titulo-paso {
  font-family: OdorMeanChey;
  font-weight: 400;
  font-size: 30px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #31302D !important;
}

.tit-carrito {
  font-family: Odor Mean Chey;
  font-weight: 400;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #000 !important;
}

.total-productos {
  font-family: Inter;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: right;
  vertical-align: middle;
  color: #7D8697 !important;
}

.btn-cont-2 {
  background-color: #171ABF !important;
  color: #fff !important;
  font-family: Inter;
  font-weight: 700;
  font-size: 30px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
}

.btn-cont-crear {
  background-color: #fff !important;
  color: #171ABF !important;
  font-family: Inter;
  font-weight: 700;
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 2px solid #171ABF !important;
}

.total-monto {
  font-family: Inter;
  font-weight: 700;
  font-size: 50px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: right;
  vertical-align: middle;
  color: #171ABF !important;
}

#div-paso-2 {
  transform: translateX(100%);
  /* Inicia fuera de la pantalla (a la derecha) */
  transition: transform 0.5s ease-in-out;
  /* Transición suave para el deslizamiento */
}

#div-paso-2.show {
  transform: translateX(0);
  /* Desliza el formulario a la vista */
}

.txt-item-resumen {
  font-family: Inter;
  font-weight: 400;
  font-size: 25px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #3F3D56 !important;
}

.txt-valor-resumen {
  font-family: Inter;
  font-weight: 400;
  font-size: 25px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #000000 !important;
}

.separador-opciones {
  width: 250px;
  max-width: 250px;
  border: 2px solid #0FC8CD !important;
}

@media (max-width: 576px) {
  .separador-opciones {
    width: 50px;
    max-width: 50px;
  }

  .titulo-paso {
    font-size: 20px;
  }

  .num-paso{
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .total-monto{
    font-size: 40px;
  }
}

.border-resumen-md {
  border-top: 2px solid #3F3D56;
}

@media (min-width: 768px) {
  .border-resumen-md {
      border-top: none;
      border-left: 2px solid #3F3D56;
  }
}