@font-face {
        font-family: "Museo_Sans_100";
        src: url("../fonts/MuseoSans-100.otf");
        font-weight: 100;
    }
    @font-face {
        font-family: "Museo_Sans_300";
        src: url("../fonts/MuseoSans-300.otf");
        font-weight: 300;
    }
    @font-face {
        font-family: "Museo_Sans_500";
        src: url("../fonts/MuseoSans-500.otf");
        font-weight: 500;
    }
    @font-face {
        font-family: "Museo_Sans_700";
        src: url("../fonts/MuseoSans_700.otf");
        font-weight: 700;
    }
    @font-face {
        font-family: "Museo_Sans_900";
        src: url("../fonts/MuseoSans_900.otf");
        font-weight: 900;
    }
    body, figure{ 
        margin: 0px;
        padding: 0px;
    }
    header{
        background-image: url("../img/fondoHeader.png");
        height: calc(393px * .67);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
         display: flex;
        justify-content: center;
        position: relative;
        
        border-bottom: calc(17px * .67) solid #000000;
    }
    header .liston{
        height: calc(42px * .67);
        width: 100%;
        background-color: #02BAB5;
        border-top: 3px #000000 solid;
        border-bottom: 3px #000000 solid;
        margin-top: 30px;
        
    }
    header .liston figure img{
       display: block;
       width: auto;
    }
    header figure{
        margin: 0px auto;
        box-sizing: border-box;
        width: min(calc(438px * .67), 95%);
        position: absolute;
        z-index: 5;
    }
    header figure img{
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center center;
    }
.contenedor{
    width: min(646px, 85%);
    margin: 0px auto;
}
p{
    font-family: "Museo_Sans_500";
    font-size: calc(26px * .67);
    line-height: calc(31.2px * .67);
    color:#000000;
}
strong{
    font-family: "Museo_Sans_900";
}
.bajada .contenedor {
    position: relative;
}
.bajada .contenedor article p{
    text-align: center;
}
.bajada .contenedor .izquierda{
    position: absolute;
    left: -28%;
    max-width: calc(296px * .67);
}
.bajada .contenedor .izquierda img{
    max-width: 100%;
    height: auto;
}
.bajada .contenedor .derecha{
    position: absolute;
    right: -40%;
    display: flex;
    flex-direction: column;
    top: 0%;
    width: calc(379px * .67);
}
.video{
    background-image: url("../img/fondoamarillo.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #FFE72F;
    border: calc(20px * .67) solid #000;
}
.video .contenedor{
    display: flex;
    flex-direction: row;
    margin-top: calc(37px * .67);
    gap: 20px;
    justify-content: center;
    margin-bottom: calc(237px * .67);
}
.video .contenedor article{
    width: calc(450px * .67);
    display: flex;
    flex-direction: column;
}
.video .contenedor article figure{
    border: 11px solid #000000; 
    height: calc(269px * .67);
}
.video .contenedor article figure iframe{ 
    
    height: 100%;
    width: 100%;

}
.art-mat{
position: relative;
}
.img-mat{
    position: absolute;
    max-width: calc(426px * .67);
    display: block;
    margin: 0 auto;
    top:calc(293px * .67);
    left:calc(12px * .67);
}
.art-len{
  position: relative;  
}
.img-len{
    position: absolute;
     max-width: calc(426px * .67);
    display: block;
    margin: 0 auto;
    top:calc(312px * .67);
    left:calc(12px * .67);
}

.avances{
    background: transparent radial-gradient(closest-side at 50% 50%, #2FD7EC 0%, #23D2ED 27%, #04C6F0 75%, #00C5F1 81%) 0% 0% no-repeat padding-box;;
   
    display: flex;
    justify-content: space-between;
}
.avances .contenedor{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 120px;
    margin-bottom: 280px;
    
}
.avances .contenedor .wow{
    position: absolute;
    top:calc(-82% * 0.69);
    right: calc(-40% * 1.47);
}
.avances .contenedor .wow img{
    width: calc(100% * .67);
}
.avances .boxes{
    display: grid;
     grid-template-columns: repeat(2, 1fr);
    gap: calc(28px * .67);
    position: relative;
     grid-template-areas:
        "box1 empty"    /* Fila 1: box - espacio vacío */
        "box2 box3"     /* Fila 2 */
        "box4 box5"     /* Fila 3 */; 
    
}
.avances .boxes .img-nube{
    position: absolute;
    left: -485px;
    top: 110px;
    z-index: 5;
   
} 
.avances .boxes .box{
    padding: 10px 15px;
    border: 5px solid #000;
    font-family: "Museo_Sans_900";
    font-size: 12px;
    line-height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 17.93px 0px 20.79px 0px;
    border-width:6px 4px 4px 6px;
}
.avances .boxes .box h4{
     font-family: "Museo_Sans_900";
     color: #000;
     font-size: 15px;
     line-height: 30px;
     margin: 0px;
     

}
.avances .boxes .box:first-child{
    position: relative;
}
.avances .boxes .box .fig-titulo{
    position: absolute;
    top: calc(-100px / 1.67);
    width: calc(426px * .67);
    right: calc(-690px / 1.67);
    transform:translate(-50%, 50%);
}
.avances .boxes .box:nth-child(1){ grid-area: box1; }
.avances .boxes .box:nth-child(2){ grid-area: box2; }
.avances .boxes .box:nth-child(3){ grid-area: box3; }
.avances .boxes .box:nth-child(4){ grid-area: box4; }
.avances .boxes .box:nth-child(5){ grid-area: box5; }
.avances .boxes .fig-nina-borde{
    position: absolute;
    width: 100%;
    bottom: 0%;
    transform:translate(0%, 105%);
    z-index: 3;
}
.avances .boxes .fig-nina-borde img{
    width: 100%;
    height: auto;
}
.imagenes{
    display: flex;
    flex-direction: column;
}
.fig-avance{
    width: min(426px, 90%);
    box-sizing: border-box;
    margin-top: 160px;
    margin-left: -55px;
   
}
.img-avance{
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 3;
    
}
.fig-ninia{
    width: calc(483px * .67);
    position: absolute;
    left: 45px;
    top: 65px;
    z-index:2;
   
}
.img-ninia{
    width: 100%;
    height: auto;
    display: block;
   
}
.recursos{
    background-image: url("../img/fondorecursos.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top: calc(17px * .67) solid #000;
    position: relative;
}
.recursos .contenedor{
    position: relative;
}
.recursos .contenedor .titulo-recurso{
    position: static;
   margin-top: 25px;
    width: 45%;
   
}
.recursos .contenedor p{
 
    text-align: center;
    font-size: calc(24px * .67);
}

.recursos .explo{
    position: absolute;
    bottom: 0;
    left:0px;
    z-index: 1;
    max-width: calc(780px * .67);
}

.recursos .contenedor .listas{

    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(calc(295px * .67),1fr));
    place-items: center center;
}
.recursos .contenedor .listas .lista{
    place-self: start;
}
.recursos .contenedor .listas .lista img{
    width: calc(100% * .91);
}

.recursos .contenedor .listas .lista .cuadrado{
    font-size: calc(19px * .67);
    font-family: "Museo_Sans_700";
    padding: calc(10px * .67) calc(25px * .67);
    border: 3px solid #000000;   
    margin-bottom: 15px ;
    width: min(calc(235px * .67), 95%);
    text-align: center;
    height: calc(41px .67);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
     text-decoration: none;
     height: 30px;
}
.recursos .contenedor .listas .lista .cuadrado:nth-child(2){
    margin-top: -6%;
}    
.recursos .contenedor .listas .lista .cuadrado.amarillo{
    background-color: #FFE72F;
}
.recursos .contenedor .listas .lista .cuadrado.celeste{
    background: transparent radial-gradient(closest-side at 50% 50%, #2FD7EC 0%, #23D2ED 27%, #04C6F0 75%, #00C5F1 81%) 0% 0% no-repeat padding-box; 
}
.recursos .contenedor .listas .lista .cuadrado.verde{
    background:#B1D900 0% 0% no-repeat padding-box;
}
.recursos .super{
    position: absolute;
    bottom: -6%;
    right: -22%;
    width: calc(100% * .54);
}
footer{
    background-image: url("../img/footer.png");
    background-size: cover;
    background-position: center center;
    height: calc(253px * .67);
    border-bottom: calc(17px * .67) solid #000;
}
footer .contenedor{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;

}
footer .contenedor figure{
    padding-bottom: calc(75px * .67);
    box-sizing: border-box;
    z-index: 2;
}
footer .contenedor figure img{
    width: 100%;
}

footer .contenedor .circulos{
    display: flex;
    justify-content: end;
    align-items: center;
    height: 65%;
    margin-top: 37px;
    margin-right: 50px;
    gap: calc(50px * .67);
}

footer .contenedor .circulos a:nth-child(odd){
    align-self: baseline;
}
footer .contenedor .circulos a:nth-child(even){
    align-self: end;
}
footer .contenedor .circulos a img{
    max-width: calc(97px * .67);
    max-height: calc(97px * .67);
}
/* Styles for screens with a minimum width of 1200px (e.g., desktops and up) */
@media screen and (max-width: 1180px) {
    .avances .contenedor .wow{
        top: calc(-30% * 0.69);
        right: calc(-46% * 1.47);
        width: 55%;
    }
    .recursos .explo{
        max-width: calc(554px * .67);
    }
}
@media screen and (max-width: 950px) {
    .avances .contenedor .wow{
        top: calc(-15% * 0.69);
        right: calc(-80% * 1.47);
        width: 55%;
    }
    .avances .boxes .img-nube{
        width: 63%;
    }
    .avances .boxes .box .fig-titulo{
        width: calc(370px * .67);
        top: calc(-76px / 1.67);
        right: calc(-450px / 1.67);
    }
    .fig-ninia{
        width: calc(460px * .67);
        left: 20px;
    }
    .recursos .super{
        right: -12%;
        width: calc(90% * .54);
    }
    .recursos .explo{
        max-width: calc(480px * .67);
    }
    footer .contenedor figure img{
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    header .liston figure img{
        width: 100%;
    }
    .bajada .contenedor .izquierda img{
        display: none;
    }
    .bajada .contenedor .derecha{
        display: none;
    }
    .video .contenedor{
        flex-direction: column;
        margin-bottom: 30px;
    }
    .video .contenedor article{
        width: 100%;
    }
    .video .contenedor .art-mat .img-mat{
        width: 90%;
        position: static;
        margin-top: 20px;
    }
    .video .contenedor .art-len .img-len{
        width: 90%;
        position: static;
        margin-top: 20px;
    }
    .avances figure img{
        display: none;
    }
    .avances .contenedor{
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .avances .contenedor .boxes{
        margin: 10% 0%;
    }
    .avances .contenedor .boxes .box:first-child .fig-titulo{
        width: 125%;
        top:32%;
        left: 155%;
    }
    .avances .contenedor .boxes .box:first-child .fig-titulo .img-avance{
        display: block;

    }
    .avances  .contenedor .boxes .img-nube{
        display: none;
        width: 50%;
        left: -25%;
        top:10%;
    }
    .recursos .contenedor p{
        padding-top: calc(50px * .67);
    }
    .recursos .contenedor .titulo-recurso{
        top:-3%;
    }
    .recursos .explo{
        display: none;
    }
    .recursos .super{
        top: 60%;
        left: 80%;
        width: 50%;
        transform: translate(-50%, -50%);
    }
    footer{
        height: 100%;
    }
    footer .contenedor {
        flex-direction: column;
    }
    footer .contenedor figure{
        width: 60%;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 0px;
    }
    footer .contenedor .circulos{
            margin-right: 0px;
            margin-bottom: 35px;
    }
}