:root {
  --color-primary: #0038ff;
  --color-primary-light: #2d5bff;
  --color-success: #01c72c;
  --color-succes-light: #0fcd86;
  --color-danger: #de1313;
  --color-dark-light: #d9d9d9;
}

/*Estilos navbar publico*/

.btn__registrate {
  background-color: var(--color-primary);
  color: #fff;
  margin-left: 1rem;
  border: 1px solid var(--color-primary);
  padding: 0.5rem 1rem;
  /* padding-left: 2.5rem; */
  /* padding-right: 2.5rem; */
  border-radius: 5px;
  cursor: pointer;
}

.btn__login {
  background-color: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 0.5rem 1rem;
  padding-left: 2rem;
  /* padding-right: 2rem; */
  border-radius: 5px;
  cursor: pointer;
}

.btn__login:hover {
  background-color: #fff;
  color: var(--color-primary);
}

.btn__registrate:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/*Estilos para el contenido*/

.main__content__public {
  display: flex;
  flex-direction: column;
  /*flex-wrap: wrap;*/
  background-color: #fff;
  margin-left: 15.6rem !important;
}

.banner {
  /* display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 4rem; */
}

.img__banner {
  width: 35%;
}

.img_banner_file {
  width: 100%;
}

.text__banner {
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}

.text__banner h1 {
  font-size: 30px;
  color: #000;
}

.text__banner p {
  font-size: 14px;
}

.btn__registrate__banner {
  background-color: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  padding: 0.5rem 1rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

.btn__registrate__banner:hover {
  background-color: #fff;
  color: var(--color-primary);
}

.proximo__evento {
  background-color: var(--color-dark-light);
  /* display: flex;
  flex-direction: row;
  flex-wrap: wrap; */
  /* color: #fff; */
  /* padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 8rem;
  padding-right: 8rem; */
}

.texto__proximo__envento {
  width: 50%;
  padding-right: 50px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}

.img__proximo__evento {
  width: 50%;
  display: flex;
  align-items: center;
}

.btn__primary {
  background-color: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  padding: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  trasition: 0.5s;
}

.btn__primary:hover {
  background-color: #fff;
  color: var(--color-primary);
}

.btn__success {
  background-color: var(--color-success);
  color: #fff;
  border: 1px solid var(--color-success);
  padding: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  trasition: 0.5s;
}

.btn__success:hover {
  background-color: #fff;
  color: var(--color-success);
}

.btn__danger {
  background-color: var(--color-danger);
  color: #fff;
  border: 1px solid var(--color-danger);
  padding: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  trasition: 0.5s;
}

.texto__proximo__envento h1 {
  font-size: 30px;
  color: #fff !important;
}

.texto__proximo__envento p {
  font-size: 14px;
  color: #fff !important;
}

.badge__success {
  background-color: var(--color-succes-light);
  color: #000;
  padding: 0.1rem;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
}

.numeros__comienza__en {
  font-size: 20px;
  font-weight: 600;
  /* color: #fff; */
}

.conoce__nuestros__cursos {
  margin-top: 50px;
}

.h1__conoce__nuestros__cursos {
  text-align: center;
  font-size: 30px;
  color: #000;
}

.filtros__cursos_home {
  margin: 5px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}

.btn__filtros__cursos {
  background-color: var(--color-primary-light);
  color: #fff;
  border: 1px solid var(--color-primary-light);
  padding: 0.5rem 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 15px;
  cursor: pointer;
  transition: 0.5s;
}

.btn__filtros__cursos:hover {
  background-color: #fff;
  color: var(--color-primary-light);
}

.cursos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;

  @media (max-width: 1920px) {
    grid-template-columns: repeat(4, 1fr);
  }

  @media (max-width: 1440px) {
    grid-template-columns: repeat(4, 1fr);
  }

  @media (max-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.curso__card {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.detalle_curso {
  margin-top: 20px;
  font-size: 12px;
}

.detalle_curso h1 {
  font-size: 14px;
  color: #000;
  font-weight: 600;
}

.boton__ver__todos {
  margin-top: 50px;
  text-align: center;
}

.masterclass {
  margin-top: 50px;
  margin-bottom: 20px;
}

.h1__masterclass {
  text-align: start;
  font-size: 30px;
  color: #000;
  margin-bottom: 20px;
}

.acciones_card {
  display: flex;
  flex-direction: row;
  gap: 3px;
}

.page_proximos_cursos_gratuitos {
  margin-top: 30px;
  margon-bottom: 50px;
}

.formulario__filtro {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}

.filtro_select {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 5px;
  color: rgba(0, 0, 0, 0.6);
}

.filtro_fecha {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 5px;
  color: rgba(0, 0, 0, 0.6);
}

/*EStilos de carrusel*/
.carousel__prev {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 100% !important;
}

.carousel__next {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 100% !important;
}
/*--------------------------------------------*/

.btn__blue {
  background-color: var(--color-primary) !important;
}

.btn--danger {
  background-color: #dc3545 !important;
  color: #fff !important;
}

.btn--success {
  background-color: #198754 !important;
  color: #fff !important;
}