@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
}
html{
    background: #2E2D2D;
    font-family: "Ubuntu", sans-serif;
}
nav{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: right;
    position: absolute;
    position: fixed;
    display: fixed;
    z-index: 100;
}
nav p{
    color: #D9D7CA;
    width: 3.5rem;
    height: 3.5rem;
    margin: .5rem .5rem 0 0;
    background: #2E2D2D;
    border: .3rem solid #97F6E6;
    border-radius: 50%;
    box-shadow: 5px 5px 10px rgb(25, 25, 25),
             -5px -5px 10px rgb(25, 25, 25);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
nav p svg{
    width: 2rem;
    height: 2rem;
    fill: #D9D7CA;
}
nav p:hover{
    rotate: 270deg;
    z-index: 100;
}
.head-window{
    width: 100%;
    height: 100vh;
    background: #2E2D2D;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.cont-logo-all{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont-line{
    width: 100%;
    height: 7.5rem;
    background: #2E2D2D;
    position: relative;
    box-shadow: 5px 5px 10px rgb(25, 25, 25),
             -5px -5px 10px rgb(25, 25, 25);
            display: flex;
            align-items: center;
            justify-content: center;

}
.cont-line .cont-line-sep{
    width: 50%;
    height: 5rem;
    background: #97F6E6;
}
.cont-logo{
    width: 20rem;
    height: 20rem;
    background: #97F6E6;
    border-radius: 50%;
    border: 1rem solid #2E2D2D;
    position: absolute;
    box-shadow: 5px 5px 10px rgb(25, 25, 25),
             -5px -5px 10px rgb(25, 25, 25);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}
.cont-logo span{
    width: 80%;
    height: 80%;
    background: #D9D7CA;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1rem solid #2E2D2D;
}
.cont-logo span img{
    -o-object-fit: cover;
    object-fit: cover;
    width: 110%;
    height: 110%;
    border-radius: 50%;
    border: 1px solid #000000;
}
.cont-title{
    width: auto;
    height: auto;
    background: #97f6e600;
    margin: 3rem 0 0 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}
.cont-title h1{
    font-size: 7rem;
    color: #D9D7CA;
    text-shadow: 0 0 10px #000000,0 0 15px #000000, 0 0 20px #000000, 0 0 25px #000000, 0 0 30px #000000,0 0 35px #000000, 0 0 40px #000000, 0 0 45px #000000, 0 0 50px #000000, 0 0 55px #000000, 0 0 60px #000000,0 0 70px #000000, 0 0 80px #000000; 
}
.cont-title .cont-sk{
    width: 90%;
    height: auto;
    display: flex;
    justify-content: center;
}
.cont-sk .line{
    width: 100%;
    height: 0;
    border: 1px solid #97F6E6;
}
.cont-sk h1{
    width: 100%;
    height: 100%;
    font-size: 9rem;
    margin: -2rem 0 0 0;
}
.cont-info{
    width: 90%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0 -3rem 0;
}
.cont-info .conts-infos{
    width: 30%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    box-shadow: 5px 5px 10px rgb(25, 25, 25),
    -5px -5px 10px rgb(25, 25, 25);
    border-radius: 22px;
    margin: 0 2rem 0 2rem;
}
.cont-info .conts-infos h1{
    width: 90%;
    font-size: 3rem;
    color: #D9D7CA;
    text-align: center;
    font-weight: 900;
    margin: 0 0 .5rem 0;
}
.cont-info .conts-infos span{
    width: 90%;
    border: .5px solid #97f6e6;
}
.cont-info .conts-infos p{
    font-size: 2rem;
    text-align: center;
    margin: 1rem 0 1rem 0;
    padding: .1rem .9rem;
    background: #97F6E6;
    border-radius: .5rem;
}
.icon-dow{
    display: none;
}
@media screen and (max-width: 1280px) {
    .cont-line{
        width: 100%;
        height: 5rem;
        background: #2E2D2D;
        position: relative;
        box-shadow: 5px 5px 10px rgb(25, 25, 25),
                 -5px -5px 10px rgb(25, 25, 25);
                display: flex;
                align-items: center;
                justify-content: center;
    
    }
    .cont-logo-all{
        margin: 1rem 0 0 0;
    }
    .cont-line .cont-line-sep{
        width: 50%;
        height: 3rem;
        background: #97F6E6;
    }
    .cont-logo{
        width: 20rem;
        height: 20rem;
        background: #97F6E6;
        border-radius: 50%;
        border: .5rem solid #2E2D2D;
        position: absolute;
        box-shadow: 5px 5px 10px rgb(25, 25, 25),
                 -5px -5px 10px rgb(25, 25, 25);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    
    }
    .cont-logo span{
        width: 90%;
        height: 90%;
        background: #D9D7CA;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        aspect-ratio: 1;
        border: .5rem solid #2E2D2D;
    }
    .cont-logo span img{
        -o-object-fit: cover;
        object-fit: cover;
        width: 110%;
        height: 110%;
        border-radius: 50%;
        border: 1px solid #000000;
    }
    .cont-title{
        width: auto;
        height: auto;
        background: #97f6e600;
        margin: 3rem 0 0 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }
    .cont-title h1{
        font-size: 3.5rem;
        color: #D9D7CA;
        text-shadow: 0 0 10px #000000,0 0 15px #000000, 0 0 20px #000000, 0 0 25px #000000, 0 0 30px #000000,0 0 35px #000000, 0 0 40px #000000, 0 0 45px #000000, 0 0 50px #000000, 0 0 55px #000000, 0 0 60px #000000,0 0 70px #000000, 0 0 80px #000000; 
    }
    .cont-title .cont-sk{
        width: 90%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .cont-sk .line{
        width: 100%;
        height: 0;
        border: .5px solid #97F6E6;
    }
    .cont-sk h1{
        width: 100%;
        height: 100%;
        font-size: 4.5rem;
        margin: -1rem 0 0 0;
    }
    .cont-info{
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 2rem 0 0 0;
    }
    .cont-info .conts-infos{
        width: 30%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        box-shadow: 5px 5px 10px rgb(25, 25, 25),
        -5px -5px 10px rgb(25, 25, 25);
        border-radius: 22px;
        margin: 5rem 1% 0 1%;
    }
    .cont-info .conts-infos h1{
        width: 90%;
        font-size: 1.5rem;
        color: #D9D7CA;
        text-align: center;
        font-weight: 900;
        margin: 1rem 0 .5rem 0;
    }
    .cont-info .conts-infos span{
        width: 90%;
        border: .5px solid #97f6e6;
    }
    .cont-info .conts-infos p{
        font-size: 1rem;
        text-align: center;
        margin: 1rem 0 1rem 0;
        padding: .1rem .9rem;
        background: #97F6E6;
        border-radius: .5rem;
    }
    .icon-dow{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 5rem 0 -5rem 0;
    }
    .icon-dow p{
        color: #97F6E6;
        font-size: 1rem;
        margin: 0 0 1rem 0;
        font-weight: 900;
    }
    .icon-dow ion-icon{
        font-size: 2rem;
        color: #97F6E6;
        font-weight: 900;
    }
}
.one{
    width: 100%;
    height: 100vh;
    background: #2E2D2D;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.one span{
    width: 25%;
    border: 1px solid #97F6E6;
    margin: 0 3rem 0 3rem;
    animation: span-anim 3s infinite ease;
}
@keyframes  span-anim{
    0%{
        border: 1px solid #97F6E6;
    }
    50%{
        border: 1px solid #D9D7CA;
        box-shadow: 5px 5px 20px #D9D7CA, -5px -5px 20px #D9D7CA;
        scale: 1.02;
        }
        100%{
            border: 1px solid #97F6E6;
            }
}
.one h1{
    font-size: 3rem;
    font-weight: 900;
    color: #D9D7CA;
    animation: h1-anim 3s infinite ease;
}
@keyframes h1-anim {

    0%{
        color: #D9D7CA;
    }
    50%{
        color: #97F6E6;
        text-shadow: 5px 5px 20px #97F6E6, -5px -5px 20px #97F6E6;
        scale: 1.02;
        }
        100%{
            color: #D9D7CA;
            }

}
@media screen and (max-width: 1280px) {
    .one{
        width: 100%;
        height: 70vh;
        background: #2E2D2D;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }
    .one span{
        width: 90%;
        border: 1px solid #97F6E6;
        margin: 0 3rem 0 3rem;
        animation: span-anim 9s infinite ease;
    }
    @keyframes  span-anim{
        0%{
            border: 1px solid #97F6E6;
        }
        50%{
            border: 1px solid #D9D7CA;
            box-shadow: 5px 5px 20px #D9D7CA, -5px -5px 20px #D9D7CA;
            scale: 1.02;
            rotate: 365deg;
            }
            100%{
                border: 1px solid #97F6E6;
                }
    }
    .one h1{
        font-size: 2rem;
        font-weight: 900;
        color: #D9D7CA;
        animation: h1-anim 9s infinite ease;
        margin: 3rem 0 3rem 0;
    }
    @keyframes h1-anim {
    
        0%{
            color: #D9D7CA;
        }
        50%{
            color: #97F6E6;
            text-shadow: 5px 5px 20px #97F6E6, -5px -5px 20px #97F6E6;
            scale: 1.02;
            rotate: 365deg;
            }
            100%{
                color: #D9D7CA;
                }
    
    } 
}
.footer{
    width: 100%;
    height: 50vh;
    background: #2E2D2D;
    display: flex;
    align-items: center;
    justify-content: end;
    flex-direction: column;
}
.cont-style{
    width: 100%;
    height: auto;
    background: #2E2D2D;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 10px rgb(25, 25, 25),
    -5px -5px 10px rgb(25, 25, 25);
    margin: 1rem 0 1rem 0;
}
.redes-sociales{
    width: 100%;
    height: auto;
    background: #97F6E6;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 1rem 0;
}
.redes-sociales a{
    text-decoration: none;
    margin: 1rem 1rem 1rem 1rem;
}
.redes-sociales a ion-icon{
    font-size: 2rem;
    color: #2E2D2D;
    transition: all 0.5s ease;
}
.redes-sociales a ion-icon:hover{
    scale: 1.5;
}
.footer h1{
    color: #D9D7CA;
    font-size: 3rem;
    font-weight: 900;
    margin: 2rem 0 2rem 0;
}
.footer p{
    color: #D9D7CA;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 3rem 0 1rem 0;
}
.space{
    width: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer span{
    width: 40%;
    top: 0;
    border: .5px solid #97F6E6;
}
@media screen and (max-width: 1280px) {
    .footer{
        width: 100%;
        height: 30vh;
        background: #2E2D2D;
        display: flex;
        align-items: center;
        justify-content: end;
        flex-direction: column;
    }
    .cont-style{
        width: 100%;
        height: auto;
        background: #2E2D2D;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        box-shadow: 5px 5px 10px rgb(25, 25, 25),
        -5px -5px 10px rgb(25, 25, 25);
        margin: 1rem 0 1rem 0;
    }
    .redes-sociales{
        width: 100%;
        height: auto;
        background: #97F6E6;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        margin: 1rem 0 1rem 0;
    }
    .redes-sociales a{
        text-decoration: none;
        margin: 1rem .5rem 1rem .5rem;
    }
    .redes-sociales a ion-icon{
        font-size: 1.5rem;
        color: #2E2D2D;
        transition: all 0.5s ease;
    }
    .redes-sociales a ion-icon:hover{
        scale: 1.3;
    }
    .footer h1{
        color: #D9D7CA;
        font-size: 1.5rem;
        font-weight: 900;
        margin: 1.5rem 0 1.5rem 0;
    }
    .footer p{
        color: #D9D7CA;
        font-size: .6rem;
        font-weight: 400;
        margin: 1.5rem 0 1.5rem 0;
    }
    .space{
        width: 100%;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 1rem 0;
    }
    .footer span{
        width: 40%;
        top: 0;
        border: .5px solid #97F6E6;
    }
}
.nav-menu-list{
    width: 20%;
    height: 100vh;
    background: #97f6e680;
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    flex-direction: column;
    display: fixed;
    position: fixed;
    top: 0;
    right: -2500px;
    z-index: 100;
    transition: 0.3s;
}
.nav-menu-list.Nav-Menu{
    right: 0;
}
.nav-menu-list .close{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: right;
}
.close ion-icon{
    font-size: 2rem;
    margin: .5rem .5rem 0 0;
    color: #2E2D2D;
    transition: all 0.3s ease-in-out;
}
.close ion-icon:hover{
    scale: 1.3;
}
.nav-menu-list a{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #2e2d2d80;
    padding: 1rem;
    font-size: 1.5rem;
    margin: 1rem 0 0 0;
    transition: all 0.3s ease-in;
}
.nav-menu-list a:hover{
    color: #97F6E6;
    background: #2E2D2D;


}
.difusor-background{
    width: 80%;
    height: 100vh;
    background: #000000ab;
    backdrop-filter: blur(5px);
    display: fixed;
    position: fixed;
    top: 0;
    left: -2500px;
    z-index: 100;
    transition: 0.3s;
}
.difusor-background.Nav-Back{
    left: 0;
}
@media screen and (max-width: 1280px){
    .nav-menu-list{
        width: 50%;
        height: 100vh;
        background: #97f6e680;
        backdrop-filter: blur(20px);
        display: flex;
        align-items: center;
        flex-direction: column;
        display: fixed;
        position: fixed;
        top: 0;
        right: -2500px;
        z-index: 100;
        transition: 0.3s;
    }
    .nav-menu-list .close{
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: right;
    }
    .close ion-icon{
        font-size: 2rem;
        margin: .5rem .5rem 0 0;
        color: #2E2D2D;
        transition: all 0.3s ease-in-out;
    }
    .close ion-icon:hover{
        scale: 1.3;
    }
    .nav-menu-list a{
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #2e2d2d;
        padding: 1rem;
        font-size: 1.5rem;
        margin: 2rem 0 0 0;
        transition: all 0.3s ease-in;
    }
    .nav-menu-list a:hover{
        color: #97F6E6;
        background: #2E2D2D;
    }
    .difusor-background{
        width: 50%;
        height: 100vh;
        background: #000000ab;
        backdrop-filter: blur(5px);
        display: fixed;
        position: fixed;
        top: 0;
        left: -2500px;
        z-index: 100;
        transition: 0.3s;
    }
}