@font-face {
    font-family: MotivaSans;
    src: url("/assets/fonts/MotivaSansThin.woff2");
}
body{
    background: #111;
    font-family: Arial, Helvetica, sans-serif;
    color:white;
    display:flex;
    flex-direction: column;
    min-height: 100vh;
    margin:0;
    padding:0;
}
header{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0005;
    backdrop-filter: blur(5px);
    z-index: 1;
    .Tittle{
        padding-left: 0.5em;
        display:flex;
        justify-content: center;
        align-items: center;
        gap:0.5em;
        font-size: 0.5rem;
        height: 100%;
        padding-right: 5rem;
        font-family: "Comfortaa",Arial, Helvetica, sans-serif;
        text-shadow: 0 0 0.5em #333;
        color:white;
        text-decoration: none;
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
        img{
            width: 35px;
        }
        &:hover{
            background-color: #2225;
        }
    }
    .Navegation{
        display:flex;
        justify-content: center;
        align-items: center;
        padding-right: 0.5em;
        gap:0.5em;
        .Navegation-Item{
            cursor: pointer;
            user-select: none;
            -webkit-user-drag: none;
            display:flex;
            justify-content: center;
            align-items: center;
            gap:0.5em;
            min-width: 5rem;
            height: 2rem;
            background-color: transparent;
            border-radius: 0.5em;
            padding: 0 0.5em;
            border: 1px solid transparent;
            img{
                width: 24px;
            }
            &:hover{
                border: 1px solid #333;
                box-shadow: 0 0 1em #222;
                background-color: #222;
            }
        }
    }
}
@keyframes FadeInBanner{
    100%{
        bottom:-11rem;
        opacity: 1;
    }
}
@keyframes FadeInBannerMB{
    100%{
        bottom:10rem;
        opacity: 1;
    }
}
main{
    flex:1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    .Introduction{
        margin: 0 auto;
        width: 100%;
        height: calc(100dvh - 3rem);
        display: flex;
        justify-content: space-around;
        align-items: center;
        button{
            min-width: 8rem;
            min-height: 2rem;
            border:none;
            border-radius: 0.5em;
            background: #222;
            color:white;
            cursor: pointer;
            transition: background 120ms ease-in-out,box-shadow .2s ease-in-out;
            font-family: Comfortaa,Arial, Helvetica, sans-serif;
            padding: 0.5em;
            &:hover{
                background-color: #555;
                box-shadow: 0 0 0.5em #0005;
            }
        }
        .Text{
            position: absolute;
            top: 2.5rem;
            font-family: "MotivaSans","Comfortaa",Arial, Helvetica, sans-serif;
            text-align: center;
            z-index: 1;
        }
        .Banner{
            position: absolute;
            bottom: -10em;
            left: 50%;
            transform: translateX(-50%);
            pointer-events: none;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            mask: linear-gradient(black 75%,transparent);
            opacity: 0;
            animation: FadeInBanner .8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards .5s;
            img{
                image-rendering: auto;
                margin:auto;
                border-radius: 0.5em;
                width: 160dvh;
            }
        }
        &:after{
            content:'';
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100dvh;
            background: url("/assets/background/18.png");
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
            mask: linear-gradient(black 15%,transparent);
            z-index: -2;
        }
    }
}
.Carrusel{
    margin-top: 15rem;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    mask: linear-gradient(90deg,transparent,black 10%, black 90%,transparent);
    font-family: Comfortaa,Arial, Helvetica, sans-serif;
    text-align: center;
    #Carrusel{
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5em;
        img{
            border-radius: 0.5em;
            width: 500px;
            object-fit: cover;
        }
    }
}
.Others-Buttons,
.Button-Div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}
.Others-Buttons{
    position: fixed;
    bottom: 0.5em;
    left: 0.5em;
    width: max-content;
    min-height: 2rem;
    background-color: #0005;
    border-radius: 0.5em;
    padding: 0.3em;
    backdrop-filter: blur(5px);
    .Button-Div{
        font-family: "Nunito",Arial, Helvetica, sans-serif;
        padding: 0.2em 0.3em;
        height: 2rem;
        font-size: 0.9rem;
        width: max-content;
        border-radius: 0.5em;
        background-color: #2222;
        border: 1px solid #5555;
        user-select: none;
        -webkit-user-drag: none;
        transition: background-color 250ms ease-in-out;
        img{
            width: 24px;
            object-fit: cover;
        }
        &:hover{
            background-color: #4449;
        }
    }
}
.Loaders {
    margin: auto;
    margin-top:2rem;
    width: 90%;
    min-height: 90dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(145deg, #1a1a1a, #111);
    border-radius: 1em;
    box-shadow: inset 0 0 10px #000, 0 0 20px #0008;
    backdrop-filter: blur(6px);
    h1{
        text-align: center;
        position: absolute;
        top: 0;
        margin:1rem;
        font-family: "Comfortaa",Arial, Helvetica, sans-serif;
        font-size: 1.7rem;
    }
    #Grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 2em;
        padding: 2em;
        margin:auto;
        justify-items: center;
        align-items: center;
        text-align: center;
        font-family: "Nunito", Arial, sans-serif;
        color: white;
        width: 100%;
    }

    #Grid div {
        background: rgba(40, 40, 40, 0.5);
        border: 1px solid rgba(90, 90, 90, 0.4);
        border-radius: 0.8em;
        padding: 0.8em 0.5em;
        width: 100%;
        max-width: 150px;
        content-visibility: auto;
        transition: 
            transform 250ms ease,
            background 250ms ease,
            box-shadow 250ms ease,
            border 250ms ease;
        box-shadow: 0 0 0.5em #0007;
    }

    #Grid div:hover {
        background: rgba(60, 60, 60, 0.6);
        transform: translateY(-4px) scale(1.06);
        box-shadow: 0 0 1em #111a, 0 0 0.4em #00bfff55;
        border: 1px solid #00bfff66;
    }

    #Grid img {
        width: 72px;
        height: 72px;
        object-fit: contain;
        user-select: none;
        -webkit-user-drag: none;
        filter: drop-shadow(0 0 0.3em #000);
        transition: transform 250ms ease;
        border-radius: 0.5em;
    }

    #Grid div:hover img {
        transform: scale(1.1);
    }

    #Grid p {
        margin-top: 0.4em;
        font-size: 0.95rem;
        text-shadow: 0 0 0.5em #000;
        opacity: 0.85;
        transition: opacity 200ms ease;
    }

    #Grid div:hover p {
        opacity: 1;
    }

    @media (max-width: 600px) {
        #Grid {
            grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
            margin-top: 6rem;
        }

        #Grid img {
            width: 56px;
            height: 56px;
        }

        #Grid p {
            font-size: 0.8rem;
        }
    }
}

footer {
    width: 100%;
    background: linear-gradient(to top, #000, #111);
    margin-top:5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 3rem;
    font-family: "Nunito", Arial, sans-serif;
    color: #ccc;
}

.Footer-Container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    gap: 2em;
    width: 100%;
}

.Footer-Brand {
    text-align: center;
    max-width: 300px;
}
.Footer-Brand img {
    width: 48px;
    margin-bottom: 0.5em;
}
.Footer-Brand h3 {
    margin: 0.2em 0;
    font-family: "Comfortaa", Arial, sans-serif;
    color: white;
}
.Footer-Brand p {
    font-size: 0.9rem;
    opacity: 0.7;
}

.Footer-Links,
.Footer-Contact {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}
.Footer-Links h4,
.Footer-Contact h4 {
    margin-bottom: 0.4em;
    color: white;
    font-family: "Comfortaa", Arial, sans-serif;
}
.Footer-Links a,
.Footer-Contact a {
    color: #bbb;
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4em;
    transition: color 150ms ease-in-out;
}
.Footer-Contact a img {
    width: 20px;
    height: 20px;
}
.Footer-Links a:hover,
.Footer-Contact a:hover {
    color: #00bfff;
}

@media (max-width: 768px) {
    header {
        height: 6rem;
        flex-direction: column;
        .Tittle {
            font-size: 0.8rem;
            img {
                width: 28px;
            }
        }
        .Navegation {
            gap: 0.3em;
            .Navegation-Item {
                min-width: 3rem;
                height: 2.2rem;
                img {
                    width: 20px;
                }
                p {
                    font-size: 0.7rem;
                }
            }
        }
    }

    main {
        height: calc(100dvh - 3.5rem);
        .Introduction {
            flex-direction: column;
            justify-content: center;
            .Text {
                top: 6rem;
                font-size: 0.9rem;
                padding: 0 1rem;
            }
            .Banner{
                animation: FadeInBannerMB 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards .4s !important;
                mask:none;
            }
            .Banner img {
                width: 100vw;
            }
        }
    }
    .Carrusel {
        margin-top: 5rem;
        #Carrusel img {
            width: 90vw;
        }
    }
    .Footer-Container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-bottom: 5rem;
        gap: 2em;
    }

    .Footer-Brand,
    .Footer-Links,
    .Footer-Contact {
        width: 100%;
        max-width: 400px;
    }

    .Footer-Links a,
    .Footer-Contact a {
        justify-content: center;
    }

    .Footer-Brand img {
        width: 60px;
    }
    .Others-Buttons {
        bottom: 0.3em;
        left: 0.3em;
        .Button-Div {
            height: 1.8rem;
            font-size: 0.8rem;
            img {
                width: 20px;
            }
        }
    }
}