/* ******************************************** */
/** ACADEMY STRUCTURE
/* ******************************************** */

.c-academy-structure__line-left{
    display: none;
}

/**/

.c-academy-structure{
    position: relative;
}

.c-academy-structure__item:not(:first-of-type){
    margin-top: var(--section-y);
}

.c-academy-structure__img{
    position: relative;
    aspect-ratio: 500/637;
}

.c-academy-structure__info {
    padding: calc(var(--separator)*5) var(--separator) calc(var(--separator)*2);
    background-color: var(--color-gray);
    margin-left: -8px;
    margin-right: -8px;
    margin-top: calc(var(--separator)*-3);
}

/* NAV */

.c-academy-structure__nav{
    display: none;
}

/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    .c-academy-structure{
        --img: 40vw;
        --offset: var(--space-x);
        --offset-y: calc(var(--space-y-lg) + var(--header-xs));
    }

    .c-academy-structure:before{
        content: "";
        display: block;
        position: absolute;
        background-color: var(--color-gray);
        top: 0;
        right: 0;
        width: 70%;
        height: 100%;
    }

    .c-academy-structure__holder{
        position: relative;
    }

    .c-academy-structure__list{
        padding: 0 50px 0 calc(var(--img) + 50px);
    }

    .c-academy-structure__item:not(:first-of-type){
        margin-top: 0;
    }

    .c-academy-structure__info{
        background: none;
        margin: 0;
        padding: calc(var(--section-y-xl)*2.2) 0;
    }

    .c-academy-structure__info.c-academy-structure__info--first{
        padding-top: calc(var(--section-y-xl)*1.8);
    }

    .c-academy-structure__info.c-academy-structure__info--last{
        padding-bottom: calc(var(--section-y-xl)*2);
    }

    .c-academy-structure__img{
        aspect-ratio: initial;
        height: calc(100vh - var(--section-y-xl)*2 - var(--header-xs));
        width: var(--img);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: opacity 400ms ease-out;
        -moz-transition: opacity 400ms ease-out;
        transition: opacity 400ms ease-out;
    }

    .c-academy-structure__item.is-active .c-academy-structure__img{
        opacity: 1;
        -webkit-transition: opacity 400ms ease-out;
        -moz-transition: opacity 400ms ease-out;
        transition: opacity 400ms ease-out;
    }

    .c-academy-structure.is-fixed:not(.is-fixed--bottom) .c-academy-structure__img{
        position: fixed;
        left: var(--offset);
        top: var(--offset-y);
    }

    .c-academy-structure.is-fixed--bottom .c-academy-structure__img{
        top: auto;
        bottom: var(--section-y-xl);
    }

    /**/

    .c-academy-start{
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        left: -10px;
        top: calc(var(--header-xs)*-1);

        /*background-color: red;
        z-index: 20;*/
    }

    .c-academy-end{
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        left: -10px;
        bottom: -10px; 

        /*background-color: red;
        z-index: 20;*/
    }


}


/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {
    
    .c-academy-structure.is-fixed:not(.is-fixed--bottom) .c-academy-structure__nav{
        display: block;
    }

    /* NAV */

    .c-academy-structure {
        --img: 36vw;
    }

    .c-academy-structure__nav {
        position: fixed;
        right: var(--space-x);
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity: 0;
        z-index: 200;
        pointer-events: none;
        -webkit-transition: opacity 200ms ease-out;
        -moz-transition: opacity 200ms ease-out;
        transition: opacity 200ms ease-out;
    }

    .c-academy-structure__nav:before {
        content: "";
        display: block;
        width: 1px;
        height: 100%;
        position: absolute;
        left: 50%;
        top: 0;
        z-index: -1;
        margin-left: -1px;
        background-color: var(--color-lightgreen);
    }

    .c-academy-structure__list {
        padding: 0 100px 0 calc(var(--img) + 50px);
    }

    .c-academy-structure__nav-item:not(:first-child) {
        margin-top: clamp(40px, 6vh, 70px);
    }

    .c-academy-structure__nav-link {
        display: block;
        width: 10px;
        height: 10px;
        position: relative;
        z-index: 1;
        border-radius: 50%;
        background-color: var(--color-lightgreen);
        transform: scale(1) scaleZ(1);
        -webkit-transition: background-color 300ms ease-out, transform 400ms var(--easeOutCubic);
        -moz-transition: background-color 300ms ease-out, transform 400ms var(--easeOutCubic);
        transition: background-color 300ms ease-out, transform 400ms var(--easeOutCubic);
    }

    .c-academy-structure__nav-link.is-active {
        transform: scale(1.8) scaleZ(1);
        transition: background-color 300ms ease-out, transform 400ms var(--easeOutCubic);
    }

    .c-academy-structure__nav-link:before,
    .c-academy-structure__nav-link:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 50%;
        opacity: 0;
        background-color: var(--color-lightgreen);
        -webkit-transition: opacity var(--transition) ease-out;
        -moz-transition: opacity var(--transition) ease-out;
        transition: opacity var(--transition) ease-out;
    }

    .c-academy-structure__nav-link.is-active:after {
        background-color: var(--color-primary);
        opacity: 1;
    }

    .c-academy-structure__nav-link:before {
        background-color: var(--color-lightgreen);
        opacity: .2;
        transform: scale(1) scaleZ(1);
        -webkit-transition: opacity var(--transition) ease-out, transform var(--transition) var(--easeOutCubic);
        -moz-transition: opacity var(--transition) ease-out, transform var(--transition) var(--easeOutCubic);
        transition: opacity var(--transition) ease-out, transform var(--transition) var(--easeOutCubic);
    }

    .c-academy-structure__nav-link.is-active:before {
        background-color: var(--color-primary);
        opacity: 0.1;
        transform: scale(3) scaleZ(1);
    }

    .c-academy-structure__nav-tap {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .c-academy-structure.is-fixed:not(.is-fixed--bottom) .c-academy-structure__nav{
        pointer-events: initial;
        position: fixed;
        -webkit-transition: opacity 200ms ease-out;
        -moz-transition: opacity 200ms ease-out;
        transition: opacity 400ms ease-out;
    }

    /* hover */

    .c-academy-structure__nav-link:hover{
        background-color: var(--color-hover);
        -webkit-transition: background-color 300ms ease-out, transform 400ms var(--easeOutCubic);
        -moz-transition: background-color 300ms ease-out, transform 400ms var(--easeOutCubic);
        transition: background-color 300ms ease-out, transform 400ms var(--easeOutCubic);
    }

}


/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {
    .c-academy-structure__wrapper{
        position: relative;
    }

    .c-academy-structure__line-left{
        display: block;
        position: absolute;
        background-color: var(--color-gray);
        top: calc(var(--section-y-xl)*-1 - 1px);
        bottom: 0;
        left: calc(var(--space-x) - 20px);
        width: 70%;
        width: 1px;
        opacity: .17;
        background-color: var(--color-darkgreen);
    }

}


/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1360px) {

    .c-academy-structure.is-fixed:not(.is-fixed--bottom) .c-academy-structure__img {
        left: 50%;
        margin-left: -640px;
    }
}


/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {

    .c-academy-structure {
        --img: 32vw;
    }

    .c-academy-structure__list {
        padding: 0 190px 0 calc(var(--img) + 80px);
    }

    /* NAV */
    .c-academy-structure__nav {
        right: calc(var(--space-x)*2);
    }

}


/* ********************** de Hd a FULL HD ********************** */

@media (min-width: 1600px) {

    .c-academy-structure__line-left{
        left: calc(var(--space-x) - 80px);
    }

    /* NAV */
    .c-academy-structure__nav {
        right: calc(var(--space-x)*4);
    }
}

@media (min-width: 1800px) {

    .c-academy-structure__list {
        padding: 0 0 0 calc(var(--img) + 100px);
    }
}


/* ********************** 4K ********************** */

@media (min-width: 2048px) {

    .c-academy-structure {
        --img: 25vw;
    }

    .c-academy-structure__list {
        padding: 0 0 0 calc(var(--img) + 140px);
    }

}