body {
   background-color: #000000;
   color: #b7b4c8;
}

.curso h2 {
   font-size: 16px;
   font-weight: bolder;
   color: #ffffff;
}

.curso .subtituloPagina {
   font-size: 16px;
   color: #120241;
}

.curso .descripcion {
   font-size: calc(0.25rem + 1vw);
}

.curso .precio {
   font-size: 30px;
   font-weight: bolder;
}

.curso .precio-anterior {
   font-size: 14px;
   font-weight: normal;
   text-decoration: line-through;
}

.curso ul {
   list-style-type: none;
}

.curso li {
   font-size: 12px;
}

   .curso li i {
      font-size: 20px;
      color: lightgoldenrodyellow;
   }

.curso .imagen {
   width: 70%;
}

.curso .mnx {
   font-size: 12px;
}

.div-contenedor .div-video,
.div-contenedor .div-imagen {
   position: relative;
   padding-top: 25px;
   padding-bottom: 67.5%;
   height: 0;
}

   .div-contenedor .div-video video {
      box-sizing: border-box;
      background: url(/images/curso/monitor2.png) center center no-repeat;
      background-size: contain;
      padding-top: 1%;
      padding-bottom: 1%;
      padding-left: 11.5%;
      padding-right: 11.5%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }

   .div-contenedor .div-imagen img {
      box-sizing: border-box;
      background: url(/images/curso/monitor.png) center center no-repeat;
      background-size: contain;
      padding-top: 9%;
      padding-bottom: 13%;
      padding-left: 12%;
      padding-right: 12%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }

#playVideo {
   position: absolute;
   top: calc(50% - 25px);
   left: calc(50% - 25px);
   width: 50px;
   height: 50px;
   opacity: 0;
   transition: opacity .3s ease;
   cursor: pointer;
}

video:hover ~ #playVideo {
   opacity: 1;
}

#playVideo:hover {
   opacity: 1;
}

#listaCaracteristicas li {
   display: inline;
   padding-left: 3px;
   padding-right: 3px;
   white-space: nowrap;
   font-size: calc(0.5rem + 0.5vw);
}

   #listaCaracteristicas li i {
      font-size: calc(0.5rem + 0.5vw);
   }

.seccion-beneficios {
   background-size: 200% 200%;
   animation: animacion-fondo 10s ease-in-out infinite;
}

   .seccion-beneficios .beneficios {
      border: solid;
      border-width: 2px;
      border-color: #ffffff;
      padding-top: 30px;
      padding-bottom: 30px;
   }

      .seccion-beneficios .beneficios i {
         font-size: 30px;
      }

   .seccion-beneficios .card-metodo img {
      height: 24px;
      margin-bottom: 25px;
      margin-top: 0;
   }

   .seccion-beneficios .card-metodo .card-texto {
      font-size: 12px;
      text-align: center;
   }

   .seccion-beneficios .titulo {
      font-size: calc(1.0rem + 1vw);
   }

      .seccion-beneficios .titulo span {
         font-size: calc(1.0rem + 2.0vw);
      }

      .seccion-beneficios .titulo img {
         height: calc(1.0rem + 1.5vw);
         vertical-align: text-top;
      }

@Keyframes animacion-fondo {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

.interlingua-live {
   font-family: Interlingua2023, 'Source Sans Pro', sans-serif;
   color: #ffffff;
   font-weight: normal;
   line-height: 1;
}



/* --- Estilos responsivos --- */
@media screen and (max-width: 575px) {
   .seccion-beneficios {
      background-image: none;
      background-color: #fff;
   }

      .seccion-beneficios .beneficios {
         width: 95%;
         border-radius: 24px;
      }

      .seccion-beneficios .card-metodo .card-texto {
         font-size: 10px;
      }
}

@media screen and (min-width: 576px) {
   .seccion-beneficios .beneficios {
      width: 90%;
      border-radius: 24px;
   }

   .seccion-beneficios .card-metodo img {
      height: 48px;
   }
}

@media screen and (max-width: 767px) {
   .seccion-beneficios {
      padding: 32px 40px 24px 40px;
   }
}

@media screen and (min-width: 768px) {
   .curso li {
      font-size: 16px;
   }

   .curso .imagen {
      width: 90%;
   }

   .curso h2 {
      font-size: 24px;
   }

   .curso .precio {
      font-size: 40px;
      font-weight: normal;
   }

   .curso .precio-anterior {
      font-size: 18px;
      color: orange;
   }

   .curso .mnx {
      font-size: 20px;
   }

   .seccion-beneficios {
      padding: 50px 49px 40px 49px;
   }

      .seccion-beneficios .beneficios {
         width: 85%;
         border-radius: 56px;
      }
}

@media screen and (min-width: 992px) {
   .curso .imagen {
      width: 75%;
   }

   .seccion-beneficios .beneficios {
      width: 80%;
      border-width: 3px;
   }

      .seccion-beneficios .beneficios i {
         font-size: 50px;
      }

   .curso .subtituloPagina {
      font-size: 32px;
      padding-left: 100px;
      font-weight: bold;
      text-align: start;
      color: #120241;
   }
}

@media screen and (min-width: 1200px) {
   .seccion-beneficios {
      padding: 80px 49px 50px 49px;
   }

      .seccion-beneficios .beneficios {
         width: 70%;
      }
}