:root {
    --pink-tec: #E0115F;
    --tlg-blue: #424EA6;
    --tlg-morado: #995AF5;
}
.cards-items-content > i, .recursos-card-item-icon > i, .recursos-card-item-icon-area > i{
    color: var(--tlg-blue);
}
body{
    background: #F2F2F2!important;
}
.content-section {
padding: 2.5rem!important;
padding-top: 2.5rem!important;
padding-bottom: 4rem!important;
}
.notice-section{
    padding: 5rem 0;
}
.info-tittle-text{
    width: 500px;
    padding: 0 2rem;
    border-left: 2px solid var(--pink-tec);
    border-right: 2px solid var(--pink-tec);
}
.tittle-section-principal{
    font-size: 2rem;
    color: var(--tlg-blue);
}
.info-tittle{
    display: flex;
    justify-content: center;
    align-items: center;
}
.tittle-section-sub{
    font-size: 1.5rem
}

.circulo{
    position: relative;
    width: 150px;
    height: 150px; 
}
.externo{
    width: 150px;
    height: 150px;
    box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
        -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 20px;
}
.interno{
    width: 110px;
    height: 110px;
    box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
        inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
        -0.5px -0.5px 0px rgba(255, 255, 255, 1),
        0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
        0px 12px 10px -10px rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.circulo-number{
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--tlg-blue);
}
circle{
    fill: none;
    stroke: var(--tlg-morado);
    stroke-width: 20px;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: anim 2s linear forwards;
}
@keyframes anim{
    100%{
        stroke-dashoffset: 100;
    }
}
.circulo svg{
    position: absolute;
    top: 0;
    left: 0;
}



.info-tittle-circle{
    position: relative;
    width: 150px;
    height: 150px;
    border-radius:50%;
    border: 10px solid var(--tlg-morado);
}
.info-tittle-circle-inside{
    position: absolute;
    width: 100px;
    height: 100px;
    background: #F2F2F2;
    top: -25px;
    right: -25px;
}
.info-tittle-circle-number{
    position: absolute;
    top: 59%;
    right: 49%;
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--tlg-blue);
}
.info-tittle-text-area{
    padding-left: 30px;
    width: 400px;
    font-size: 1.3rem;
}
.info-tittle-text-area span{
    font-weight: 800;
}
@media only screen and (max-width: 625px){
    .info-tittle{
        display: block;
        margin: auto;
    }
    .info-tittle-circle{
        display: block;
        margin: auto;
    }
    .info-tittle-text-area{
        text-align: center;
        width: 100%;
    }
}
.card-item-especializacion{
    border-radius: 30px;
    padding: 40px 0;

    position: relative;
    border: 10px solid transparent;
    background: #F2F2F2;
    background-clip: padding-box;
}
.cards-items-content-habilidades{
    border-radius: 30px;
    padding: 40px;
    width: max-content;
    position: relative;
    border: 10px solid transparent;
    background: #F2F2F2;
    background-clip: padding-box;
    display: block;
    margin: auto;
}
.card-item-especializacion:before,.cards-items-content-habilidades:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -3px;
    border-radius: 22px;
    background: linear-gradient(106.69deg, #995AF5 18.77%, #424EA6 59.06%, #00D9FF 97.71%);
}
.cards-items-content-habilidades i{
    font-size: 3rem;
    color: var(--tlg-blue);
}
.habilidades-tittle{
    color: var(--tlg-blue);
    font-weight: 800;
    padding-top: 10px;
}
.habilidades-text{
    padding: 0 30px;
}
.card-section-especializacion{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
}
.cards-items-content i{
    font-size: 3rem;
}
.cards-items-content p{
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--tlg-blue);
    padding-top: 20px;
}
.card-item-button-link{
    color: #fff;
    background: var(--tlg-morado);
    padding: 10px 15px;
}
.card-item-button-link i{
    font-size: 1rem;
}
.card-item-button-link span{
    padding-left: 10px;
}
@media only screen and (max-width: 1300px){
    .card-item-button-link{
        font-size: 0.6rem;
    }
}
@media only screen and (max-width: 992px){
    .card-section-especializacion{
        grid-template-columns: auto auto;
    }
}
@media only screen and (max-width: 625px){
    .card-section-especializacion{
        grid-template-columns: auto;
    }
}
.destacados-card{
    padding: 10px 30px;
    border-right: 1px solid var(--tlg-morado);
}
.destacados-card:last-child{
    border: none;
}
.imagen-destacados{
    width: 100%;
    height: 400px;
    background-size: cover!important;
    background-position: center center!important;
}
.destacados-card img{
    width: 100%;
}
.destacados-card-tittle{
    font-weight: 800;
    padding-top: 1.5rem;
}
.destacados-card-info{
    padding: 20px 0;
}
.destacados-card-info p{
    margin: 0;
}
.destacados-card-info i{
    font-size: 0.5rem;
    padding: 0 20px;
    color: var(--tlg-blue);
}
.destacados-card-info-cursos{
    font-weight: 800;
}
.destacados-card-info-tipo{
    color: var(--tlg-blue);
    background: #E0E0E0;
    padding: 5px 10px;
    border-radius: 15px;
}
.destacados-card-text-marketing-finanzas{
    padding: 1.5rem 0;
}
.destacados-card-text-lid-data{
    min-height: 80px;
}
.destacados-card-text{
    min-height: 150px;
}
.conoceCursos-tittle{
    margin: 0;
    padding: 2rem 0;
    font-weight: 800;
}
.conoceCursos-list-item{
    padding: 15px 0 15px 20px;
    border-bottom: 1px solid #E0E0E0;
}
.conoceCursos-list-item i{
    font-size: 2rem;
    font-weight: 100;
    color: var(--tlg-morado);
}
.conoceCursos-list-item-info{
    padding-left: 20px;
}
.conoceCursos-tittle-curso{
    font-weight: 800;
    font-size: 1.5rem;
}
.conoceCursos-tittle-link{
    font-size: 1.2rem;
    color: var(--tlg-blue);
}
@media only screen and (max-width: 992px){
    .destacados-card:nth-child(2){
        border-right: none;
    }
}
@media only screen and (max-width: 767px){
    .destacados-card{
        padding: 10px 20px;
        border-right: none;
    }

    .info-tittle-text{
        width: auto;
    }

}
.diferencias-text{
    text-align: center;
    width: 900px;
}
.diferencias-text span{
    font-weight: bold;
}
.diferencias-img{
    padding: 0 2rem;
    display: block;
    margin: auto;
    width: 100%;
}
.diferencias-img-movil{
    display:none;
}
@media only screen and (max-width: 767px){
    .diferencias-img{
        display: none;
    }
    .diferencias-img-movil{
        display: block;
        margin: auto;
        width: 100%;
    }
}
.contacto{
    padding: 0 5rem;
    background: linear-gradient(149.26deg, #995AF5 -28.49%, #424EA6 58.88%, #00D9FF 142.68%);
    height: 250px;
    justify-content: space-between;
}
.contacto-tittle{
    font-size: 2rem;
    width: 50%;
    font-weight: 800;
    color: #fff;
}
.notice-section > .contacto > .card-item-button > a{
    font-size: 1.2rem;
    font-weight: 800;
}
.recursos-card{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0px;
}
.recursos-card-item{
    /*border: 2px solid red;*/
    border-radius: 30px;
    padding: 40px 0;

    position: relative;
    border: 10px solid transparent;
    background: #F2F2F2;
    background-clip: padding-box;
}
.recursos-card-item:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -3px;
    border-radius: 22px;
    background: linear-gradient(106.69deg, #995AF5 18.77%, #424EA6 59.06%, #00D9FF 97.71%);
}
.recursos-card-item-icon,.recursos-card-item-icon-area{
    padding: 0 25px;
}
.recursos-card-item-icon-area i{
    font-size: 3.5rem;
}
.recursos-card-item-icon-area{
    padding-top: 20px;
}
.recursos-card-item-icon i{
    font-size: 2.4rem;
}
.recusos-card-item-info-tittle{
    font-size:1rem;
    font-weight: 800;
    color: var(--tlg-blue);
}
.recusos-card-item-info-tittle-area{
    font-size:1.5rem;
    font-weight: 800;
    color: var(--tlg-blue);
}
@media screen and (min-width: 992px) and (max-width: 1350px){
    .recursos-card-item-info > .card-item-button > .card-item-button-link{
        font-size:0.6rem;
    }
}
@media only screen and (max-width: 1150px){
    .recursos-card{
        grid-template-columns: repeat(1, 1fr);
    }
}

.certificacion-text{
    width:45%;
    text-align: end;
}
.imagen-certificado{
    padding-left: 4rem;
    width: 400px;
}



.tooltip-inner {
  background-color: white;
  color: black;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.tooltip.tooltip-white .tooltip-inner {
  background-color: white;
  color: black;
}

.ranking{
    background: linear-gradient(106.69deg, #995AF5 18.77%, #424EA6 59.06%, #00D9FF 97.71%);
}
.ranking-tittle{
    color: white;
    padding-top: 3rem;
    padding-left: 5rem;
}
.ranking-premios-col{
    width:70%;
}
.ranking-tittle i{
    font-size: 2.7rem;
}
.ranking-tittle-text{
    padding-left: 1.5rem;
    font-size: 2.5rem;
    font-weight: 800;
}
.imagen-premio{
    width: 180px;
}
.ranking-premios{
    padding: 8rem 5rem;
}
.imagen-premio{
    display: block;
    margin: auto;
}
.premio-text{
    text-align: center;
    color: #fff;
    padding-top: 15px;
}
.ranking-premios-col i, .ranking-premios-col-number{
    color: #fff;
    margin: auto;
    display: block;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 800;
}

.ranking-padding {
    padding: 0px 2rem!important;
}

.carousel-texto{
    width: 60%;
    margin: auto;
    font-size: 1.4rem;
    padding-bottom: 5rem;
    font-weight: 800;
}
.carousel-texto span{
    font-size: 0.9rem;
    font-weight: 400;
}
.button-the-learning{
    background-color: #995AF5!important;
}
@media only screen and (max-width: 767px){
    .contacto{
        height: 180px;
        padding: 0 1rem;
    }
    .notice-section > .contacto{
        display: block !important;
        text-align: center;
    }
    .notice-section > .contacto > .contacto-tittle{
        width: 100%;
        padding-top: 2rem;
        padding-bottom: 1rem;
        font-size: 1.4rem;
    }
    .notice-section > .contacto > .card-item-button > a{
        font-size: 0.8rem;
    }
    .content-section{
        padding: 5rem 0.5rem;
    }
    .certificacion-text{
        text-align: center;
        width: 100%;
    }
    .imagen-certificado{
        padding:0;
        display:block;
        margin: auto;
        width: 100%;
    }
    .carousel-texto {
            width: 72%;

        }
    .destacados-card > .card-item-button{
        display:flex;
        justify-content: center;
    }
    .ranking-tittle{
        padding-left:0.5rem;
    }
    .reproducir-learning{
        height: 50%!important;
    }
    .video-duration-learning{
        margin-top: 0;
    }
    
    .destacados-card-text{
        min-height: 120px;
    }
    .recursos-card-item{
        justify-content: center;
    }
    .ranking-padding {
        padding-bottom: 1.5rem!important;
    }
}

.recurso-lightbox .featherlight .featherlight-content, .recurso-lightbox .featherlight-content{
    background: #fff;
    max-width: 600px !important;
    border-radius: 20px; 
    color: black !important;
}

.recurso-lightbox .featherlight-content {
padding-top: 70px;
}

.recurso-lightbox .featherlight-close{
    position: absolute;
    z-index: 9999;
    top: 30px !important;
    right: 30px !important;
    line-height: 25px;
    width: 25px;
    font-size:2rem;
    cursor: pointer;
    text-align: center;
    font-family: Arial,sans-serif;
    background: #fff;
    color: #000 !important;
    border: 0;
    padding: 0;
}

.recurso-lightbox .hbspt-form input {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    border: 1px solid black;
    margin-top: 10px;
    width: 100%;
}

.hbspt-form .hs-button {
    color: #fff;
    background-color: var(--tlg-morado)!important;
    border-color: var(--tlg-morado)!important;
    width: 40%;
    margin: 0 auto;
    display: block;
    font-size: 16px;
}


@media only screen and (max-width: 1440px){
.button-principal {
    bottom: 2rem!important;
}

.tittle-section {
    bottom: 5rem!important;
}
}

#diagrama, #destacados{
    padding-top: 140px;
    margin-top: -140px;
}