/*cursos y diplomados*/

/* Grid */
.view-cursos-y-diplomados .view-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 24px;
}

.view-cursos-y-diplomados .views-row {
  margin: 0;
}

/* Card */

.view-cursos-y-diplomados .curso-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 74px;
  border: 1.5px solid #8b4bd6;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  text-decoration: none !important;
  transition: .2s ease;
  min-height: 100px!important; 
}

/* Hover */
.view-cursos-y-diplomados .curso-card:hover {
  background: #8b4bd6;
  border-color: #8b4bd6;
}

.view-cursos-y-diplomados .curso-card:hover .curso-card__titulo {
  color: #fff;
}

.view-cursos-y-diplomados .curso-card:hover .curso-card__icono {
  background: #eeeeee;
}
/* Parte gris */

.view-cursos-y-diplomados .curso-card__icono {
  flex: 0 0 60px;
  width: 60px;
  min-width: 60px;
  align-self: stretch; /* toda la altura de lo gris */
  background: #eeeeee;
  display: flex;
  align-items: center;
  justify-content: center;

  clip-path: polygon(
    0 0,
    70% 0,
    100% 50%,
    70% 100%,
    0 100%
  );
}

.view-cursos-y-diplomados .curso-card__icono img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* Titulo */

.view-cursos-y-diplomados .curso-card__titulo {
  flex: 1;
  padding: 10px 18px;

  text-align: center;

  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;

  color: #8b4bd6;
}

/*Link*/

.view-cursos-y-diplomados .curso-card__overlay-link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 100 !important;
}

.view-cursos-y-diplomados .curso-card__overlay-link .field,
.view-cursos-y-diplomados .curso-card__overlay-link .field__item,
.view-cursos-y-diplomados .curso-card__overlay-link a {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;
}

.view-cursos-y-diplomados .curso-card__overlay-link a {
  z-index: 110 !important;

  font-size: 0 !important;
  color: transparent !important;

  text-decoration: none !important;
  background: transparent !important;
}

/*Botones */

.cursos-tabs {
  width: 100%;
}

.cursos-tabs__botones {
  display: flex !important;
  justify-content: center !important;
  align-items: center;

  gap: 20px;

  margin: 28px 0 24px;
  width: 100%;
}

.cursos-tab {
  flex: 1 1 0;
  max-width: 560px;
  height: 52px;

  display: flex !important;
  align-items: center;
  justify-content: center;

  border: none !important;
  border-radius: 14px !important;

  background: #e9e9e9 !important;
  color: #245f70 !important;

  font-weight: 700 !important;

  text-decoration: none !important;
  cursor: pointer;

  transition: .2s ease;
}

.cursos-tab--activo {
  background: #245f70 !important;
  color: #fff !important;
}

/* Oculto */
.curso-tipo {
  display: none;
}

.view-cursos .views-label,
.view-id-cursos .views-label {
  display: none;
}

.view-cursos .views-field,
.view-id-cursos .views-field {
  margin: 0;
}

*:focus {
  outline: none !important;
}

/* Responsive */

@media (max-width: 900px) {

  .view-cursos-y-diplomados .view-content {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 600px) {

  .view-cursos-y-diplomados .view-content {
    grid-template-columns: 1fr;
  }

  .cursos-tabs__botones {
    flex-direction: column;
  }

}