@font-face {
  font-family: work;
  src: url(../tipografias/WorkSans-SemiBold.ttf);
  font-family: open;
  src: url(../tipografias/OpenSans-Regular.ttf);
}
body {
  background-image: linear-gradient(
    180deg,
    hsl(214deg 58% 16%) 0%,
    hsl(214deg 61% 21%) 18%,
    hsl(213deg 63% 27%) 26%,
    hsl(212deg 65% 33%) 33%,
    hsl(213deg 69% 38%) 39%,
    hsl(213deg 73% 43%) 44%,
    hsl(213deg 78% 48%) 50%,
    hsl(213deg 78% 48%) 56%,
    hsl(213deg 78% 48%) 61%,
    hsl(213deg 78% 48%) 67%,
    hsl(213deg 78% 48%) 74%,
    hsl(213deg 78% 48%) 82%,
    hsl(213deg 78% 48%) 100%
  );
  display: flex;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  font-family: open;
}
.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  max-width: 80%;
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-image: linear-gradient(
    0deg,
    hsl(214deg 58% 16%) 0%,
    hsl(214deg 58% 16%) 18%,
    hsl(214deg 58% 16%) 26%,
    hsl(214deg 58% 16%) 33%,
    hsl(213deg 61% 21%) 39%,
    hsl(213deg 63% 27%) 44%,
    hsl(212deg 65% 33%) 50%,
    hsl(212deg 65% 33%) 56%,
    hsl(212deg 65% 33%) 61%,
    hsl(212deg 65% 33%) 67%,
    hsl(212deg 73% 37%) 74%,
    hsl(212deg 77% 42%) 82%,
    hsl(213deg 78% 48%) 100%
  );

  border-radius: 0.3rem;
  overflow: hidden;
  .card-container {
    width: 100%;
    height: 100%;
    padding: 0px 16px;
    max-width: 100%;
    .card-container-texto {
      display: flex;
      flex-direction: column;
    }
    .card-arriba {
      display: flex;
      justify-content: flex-start;
      gap: 1rem;
      align-items: center;
      padding-top: 1rem;
      .card-texto {
       
        .icon-list {
          display: flex;
          gap: 0.5rem;
          padding-top: 1rem;
        }
      }
      .card-logo {
        width: 30%;
        height: 9rem;
        object-fit: contain;
      }
    }
  }
}
span:nth-child(1){
  font-size: 48px;
  padding-bottom: 1rem;
  font-family: work;
}
p {
  font-size: 16px;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.abajo h2 {
  text-align: center;
  margin-bottom: 1rem;
}
.abajo{
  max-width: 100%;
  width: 92%;
}
.container-cursos {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
a {
  text-decoration: none;
  color: #fff;
  transition: 1s ease;
}
a:hover {
  transform: matrix(1.05, 0, 0, 1.05, 0, 0);
}
.container-html {
  background-color: #1b72da;
  background-size: cover;
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.3rem;
  padding: 16px 16px;
}/* Estilos base (Mobile First) */
.main-container {
  width: 90%;
  /* Otros estilos existentes */
}

/* Tablets pequeñas (601px a 768px) */
@media (min-width: 601px) and (max-width: 768px) {
  .main-container {
    width: 60%;
  }
}

/* Tablets grandes (769px a 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-container {
    width: 50%;
  }
}

/* Laptops y desktops pequeños (1025px a 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
  .main-container {
    width: 40%;
  }
}

/* Desktops grandes (1281px en adelante) */
@media (min-width: 1281px) {
  .main-container {
    width: 30%;
  }
}

/* Dispositivos muy pequeños (hasta 320px) */
@media (max-width: 320px) {
  .main-container {
    width: 95%;
    padding: 0.5rem;
  }

  .card-logo {
    width: 50%;
    height: auto;
  }

  span:nth-child(1) {
    font-size: 32px;
  }

  p {
    font-size: 14px;
  }

  .container-html {
    flex-direction: column;
    padding: 12px;
  }
}

/* Dispositivos pequeños (321px a 480px) */
@media (min-width: 321px) and (max-width: 480px) {
  .main-container {
    width: 90%;
    padding: 0.75rem;
  }

  .card-logo {
    width: 45%;
    height: auto;
  }

  span:nth-child(1) {
    font-size: 36px;
  }

  p {
    font-size: 15px;
  }

  .container-html {
    flex-direction: column;
    padding: 14px;
  }
}