@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {

    --color-60: #010a17;
    --color-30: #041065;
    --color-10: #125aba;

    --color-60-light: #193e70;
    --color-30-light: #152391;
    --color-10-light: #73a9ef;

    --color-60-dark: #000c1d;
    --color-30-dark: #00051c;
    --color-10-dark: #171246;

    --color-60-transparent: #031b3d52;
    --color-30-transparent: #04106552;
    --color-10-transparent: #125aba52;

    --color-txt: #ffffff;
    --color-txt-faded: #9292c4;
    --color-txt-dark: #000015;

    --default-font: Montserrat, Arial, Helvetica, sans-serif;
    --default-blur: 30px;
    --default-gap: 40px;
    --default-padding: 40px;
    --default-radius: 1em;
    --c-radius: 99999px;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--default-font);
    scroll-behavior: smooth;
}

body {

    color: var(--color-txt);
    background-color: var(--color-60);
    font-size: 12pt;

    @media (max-width: 1100px) {
        
        font-size: 10pt
        
    }
    
    @media (min-width: 1800px) {
        
        font-size: 14pt
    }

    @media (max-width: 853px) {

        font-size: 6pt;
        --default-gap: 20px;
        --default-padding: 20px;

    }

    @media (max-width: 350px) {

        font-size: 5pt;
        --default-gap: 10px;
        --default-padding: 10px;

    }

}

strong {

    --gradient-dir: to right;

    color: var(--color-10-light);
    font-weight: inherit;

    &.gradient {
        background: linear-gradient(
            var(--gradient-dir),
            var(--color-10-light),
            var(--color-10)
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

}

mark {
    color: var(--color-txt);
    background-color: var(--color-10-transparent);
    backdrop-filter: blur(var(--default-blur));
    padding: 0.2em 0.4em;
    border-radius: 0.4em;
    display: inline-block;
    font-weight: inherit;
}

hr {
    width: 75%;
    border: 1px solid var(--color-10-transparent);
    border-radius: var(--c-radius);
    margin: 0 auto;
}

a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    width: max-content;
    &:hover {
        color: var(--color-10-light);
    }
}

.container {

    max-width: 1100px;
    width: 100%;
    margin: 0 auto;

    @media (min-width: 1600px) {
        max-width: 1500px;
    }

}

.light-saber {

    position: relative;
    --stroke: 3px;

    &.ls-bottom::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate3d(-50%, 50%, 0);
        background: linear-gradient(
            to right,
            transparent 10%,
            var(--color-10-light),
            transparent 95%
        );
        filter:
            drop-shadow(0 -10px 10px var(--color-10))
            drop-shadow(0 -5px 5px var(--color-10-light))
            drop-shadow(0 5px 5px var(--color-10-light))
            drop-shadow(0 10px 10px var(--color-10));
        width: 100%;
        height: var(--stroke);
    }

    &.ls-top::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        background: linear-gradient(
            to right,
            transparent 10%,
            var(--color-10-light),
            transparent 95%
        );
        filter:
            drop-shadow(0 -10px 10px var(--color-10))
            drop-shadow(0 -5px 5px var(--color-10-light))
            drop-shadow(0 5px 5px var(--color-10-light))
            drop-shadow(0 10px 10px var(--color-10));
        width: 100%;
        height: var(--stroke);
    }

    &.ls-right::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate3d(50%, -50%, 0);
        background: linear-gradient(
            to top,
            transparent 10%,
            var(--color-10-light),
            transparent 95%
        );
        filter:
            drop-shadow(0 -10px 10px var(--color-10))
            drop-shadow(0 -5px 5px var(--color-10-light))
            drop-shadow(0 5px 5px var(--color-10-light))
            drop-shadow(0 10px 10px var(--color-10));
        width: var(--stroke);
        height: 100%;
    }

    &.ls-left::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate3d(-50%, -50%, 0);
        background: linear-gradient(
            to top,
            transparent 10%,
            var(--color-10-light),
            transparent 95%
        );
        filter:
            drop-shadow(0 -10px 10px var(--color-10))
            drop-shadow(0 -5px 5px var(--color-10-light))
            drop-shadow(0 5px 5px var(--color-10-light))
            drop-shadow(0 10px 10px var(--color-10));
        width: var(--stroke);
        height: 100%;
    }

    &.ls-both-v {

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            background: linear-gradient(
                to right,
                transparent 10%,
                var(--color-10-light),
                transparent 95%
            );
            filter:
                drop-shadow(0 -10px 10px var(--color-10))
                drop-shadow(0 -5px 5px var(--color-10-light))
                drop-shadow(0 5px 5px var(--color-10-light))
                drop-shadow(0 10px 10px var(--color-10));
            width: 100%;
            height: var(--stroke);
        }

        &::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            background: linear-gradient(
                to right,
                transparent 10%,
                var(--color-10-light),
                transparent 95%
            );
            filter:
                drop-shadow(0 -10px 10px var(--color-10))
                drop-shadow(0 -5px 5px var(--color-10-light))
                drop-shadow(0 5px 5px var(--color-10-light))
                drop-shadow(0 10px 10px var(--color-10));
            width: 100%;
            height: var(--stroke);
        }

    }

    &.ls-both-h {

        &::before, &::after {
            content: '';
            position: absolute;
            top: 50%;
            background: linear-gradient(
                to bottom,
                transparent 10%,
                var(--color-10-light),
                transparent 95%
            );
            width: var(--stroke);
            height: 100%;
        }

        &::before {
            left: 0;
            transform: translate3d(-50%, -50%, 0);
            filter:
                drop-shadow(-10px 0 10px var(--color-10))
                drop-shadow(-5px 0 5px var(--color-10-light))
                drop-shadow(5px 0 5px var(--color-10-light))
                drop-shadow(10px 0 10px var(--color-10));
        }

        &::after {
            right: 0;
            transform: translate3d(50%, -50%, 0);
            filter:
                drop-shadow(-10px 0 10px var(--color-10))
                drop-shadow(-5px 0 5px var(--color-10-light))
                drop-shadow(5px 0 5px var(--color-10-light))
                drop-shadow(10px 0 10px var(--color-10));
        }

    }

}

.btn {

    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border: none;
    padding: 1em 2em;
    height: 3.5em;
    border-radius: var(--c-radius);
    color: var(--color-txt-dark);
    font-weight: 700;
    cursor: pointer;
    font-size: 1em;
    white-space: nowrap;

    @media (max-width: 853px) {
        font-size: 1.5em;
    }
    
    &.highlight {

        background-color: var(--color-10);
        color: var(--color-txt);

        &.gradient {
            background: linear-gradient(
                to right,
                var(--color-10-light),
                var(--color-10)
            );
            color: var(--color-txt);
        }

    }

    .icon {
        --size: 1em;
        width: var(--size);
        height: var(--size);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;
    }

}

nav {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 9999;
    backdrop-filter: blur(var(--default-blur));
    background-color: var(--color-10-transparent);
    
    .bar {
        
        display: inherit;
        align-items: inherit;
        justify-content: inherit;
        gap: inherit;
        padding: calc(var(--default-padding) / 2) var(--default-padding);
        border-radius: var(--c-radius);

    }

    .logo img {
        height: 40px;
    }

    .menus {
        display: inherit;
        align-items: inherit;
        justify-content: inherit;
        gap: 20px;
        list-style: none;

        a {
            text-decoration: none;
        }

        @media (max-width: 853px) {
            &:not(.buttons) {
                display: none;
            }
        }

    }

}

header {

    background-image:
        url('./../img/bg-palestra-2.jpg'),
        radial-gradient(circle at center, var(--color-10), var(--color-60));
    background-size: 130%;
    background-blend-mode: luminosity;
    background-position: left 30%;
    background-repeat: no-repeat;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--default-padding);

    * {
        z-index: 2;
    }

    @media (max-width: 853px) {
        background-size: cover;
        background-position: 30% center;
    }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-60);
        opacity: 0.5;
    }

    .container {

        display: inherit;
        flex-direction: inherit;
        align-items: inherit;
        margin-top: 90px;
        justify-content: inherit;
        gap: var(--default-gap);

    }

    .details {

        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: calc(var(--default-gap) / 2);

        .title {

            font-size: 5em;
            line-height: 1em;
            font-weight: 800;

        }

        .subtitle {

            display: flex;
            align-items: center;
            gap: .7em;
            font-size: 1em;
            background-color: var(--color-30-transparent);
            padding: .7em 1.2em;
            padding-left: .7em;
            border-radius: var(--c-radius);
            backdrop-filter: blur(var(--default-blur));

            .icon {
                --size: 2em;
                background-color: var(--color-txt);
                color: var(--color-10);
                border-radius: 50%;
                padding: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                width: var(--size);
                height: var(--size);
                font-style: normal;
                white-space: nowrap;
            }
            
        }

        .description {
            font-size: 1.5em;
            font-weight: 500;
            color: var(--color-txt);
        }

    }

    .buttons {
        display: flex;
        gap: .5em;
    }

    .timer {

        display: flex;
        gap: 1em;

        .counter {

            --size: 10em;

            background: radial-gradient(circle at center 150%, var(--color-10-light), var(--color-60-transparent) 75%);
            backdrop-filter: blur(var(--default-blur));
            width: var(--size);
            height: var(--size);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: .2em;
            border-radius: calc(var(--default-radius) * 1.5);
            border: 1px solid var(--color-10-light);

            .number {
                font-size: 3em;
                font-weight: bold;
            }

        }

    }

}

section {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--default-gap) * 1.5);
    padding: 200px var(--default-padding);

    @media (max-width: 853px) {

        padding: 100px var(--default-padding);

    }

    .container {

        display: inherit;
        align-items: inherit;
        justify-content: inherit;
        flex-direction: inherit;
        gap: inherit;

    }

    .details {

        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 1em;

        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1em;
            font-size: 3em;
            font-weight: 800;
        }

        .description {
            font-size: 1.5em;
            font-weight: 500;
            color: var(--color-txt-faded);
        }

    }

}

#about-event {

    .cards {

        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--default-gap);

        @media (max-width: 853px) {
            
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: "c1 c2" "c3 c3";
            
        }

        .card {

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1em;
            flex: 1;
            text-align: center;
            background: linear-gradient(to top, var(--color-30-transparent), var(--color-10-transparent));
            padding: var(--default-padding);
            border-radius: 2em;
            backdrop-filter: blur(var(--default-blur));
            border: 1px solid var(--color-10-light);
            min-height: 300px;

            @media (max-width: 853px) {
                min-height: 200px;
            }

            &:nth-child(1) {
                grid-area: c1;
            }

            &:nth-child(2) {
                grid-area: c2;
            }

            &:nth-child(3) {
                grid-area: c3;
            }

            .icon {
                --size: 2em;
                background-color: var(--color-10-transparent);
                color: var(--color-10);
                border-radius: .6em;
                padding: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 2em;
                width: var(--size);
                height: var(--size);
            }

            .description {
                font-weight: 500;
                color: var(--color-txt-faded);
            }
            
        }

    }
    
}

#phases {

    .wrapper {

        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap:  4em;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 100%;
            border-radius: var(--c-radius);
            background: linear-gradient(to bottom, transparent, var(--color-10-light) 5%, var(--color-10-light) 95%, transparent);
        }

        .phase {

            --gap: 4em;
            --line-w: 6px;
            counter-increment: phase;
            display: flex;
            width: calc(50% - var(--gap));
            gap: var(--default-gap);
            z-index: 2;
            margin-left: auto;
            position: relative;

            @media (max-width: 853px) {
                width: 100%;
                font-size: 1.5em;
            }

            @media (min-width: 853px) {

                &::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 100%;
                    transform: translateY(-50%);
                    width: var(--gap);
                    height: var(--line-w);
                    background-color: var(--color-10-light);
                }

                &::before {
                    --size: 2em;
                    content: '';
                    position: absolute;
                    top: calc(50%);
                    left: 100%;
                    transform: translate(-50%, -50%);
                    width: var(--size);
                    height: var(--size);
                    background: radial-gradient(circle at center, var(--color-60-light) 50%, var(--color-10-light) 50%);
                    border-radius: 50%;
                    z-index: 2;
                }

                &:nth-child(even) {

                    &::after {
                        left: unset;
                        right: 100%;
                    }

                    &::before {
                        left: 0;
                    }

                }
                
            }

            &:nth-child(odd) {

                margin-left: 0;
                margin-right: auto;

                .content {
                    --bg-dir: to right;
                }

            }

            &:last-child {

                .line {
                    background: transparent;
                    box-shadow: none;
                }

            }

            .content, .image {
                flex: 1;
            }

            .content {

                --bg-dir: to left;

                display: flex;
                flex-direction: column;
                gap: 1em;
                padding: var(--default-padding);
                border: 2px solid var(--color-10-light);
                background: linear-gradient(var(--bg-dir), var(--color-30-transparent), var(--color-10-transparent));
                border-radius: 2em;
                backdrop-filter: blur(var(--default-blur));

                .title {
                    font-size: 2em;
                    font-weight: 800;
                }

                .subtitle {
                    font-size: 1.5em;
                    font-weight: 500;
                }

                .description {
                    font-weight: 500;
                    color: var(--color-txt-faded);
                }

            }

        }

    }

}

#about-hero {

    flex-direction: row;

    .container {

        --gradient-dir: right bottom;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-radius: 2em;
        padding: var(--default-padding);
        border: 1px solid var(--color-10-light);
        background: radial-gradient(
            circle at var(--gradient-dir),
            var(--color-10-light),
            var(--color-30-transparent) 75%
        );

        @media (max-width: 853px) {
            display: flex;
            flex-direction: column-reverse;
            --gradient-dir: 150% 0%;
        }

        .details {

            gap: 2em;
            text-align: left;
            align-items: start;
            float: 1;

            @media (max-width: 853px) {
                text-align: center;
                align-items: center;
                font-size: 1.5em;
            }

            .subtitle {

                display: flex;
                align-items: center;
                gap: .7em;
                font-size: 1em;
                background-color: var(--color-10-transparent);
                padding: .7em 1.2em;
                padding-left: .7em;
                border-radius: var(--c-radius);
                backdrop-filter: blur(var(--default-blur));
                white-space: nowrap;

                .icon {
                    --size: 2em;
                    background-color: var(--color-txt);
                    color: var(--color-10);
                    border-radius: 50%;
                    padding: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    width: var(--size);
                    height: var(--size);
                    font-style: normal;
                }

            }

        }

        .image {

            position: relative;
            width: 100%;
            height: 100%;
            margin-bottom: calc(var(--default-padding) * -2);
            z-index: 2;

            @media (max-width: 853px) {

                height: 40em;
                margin: 0;

            }
            
            img {

                position: absolute;
                bottom: 0;
                right: 0;
                width: 100%;
                height: 150%;
                object-fit: contain;
                object-position: bottom;
                transform: rotateY(180deg);
                mask-image: linear-gradient(to top, transparent, black 30%);

            }

        }

    }
    
}

#location {

    padding: 0;

    .image {
        
        width: 100%;
        height: 100dvh;
        position: relative;
        background: 
            url('./../img/unific.jpg'),
            radial-gradient(circle at center, var(--color-60), var(--color-30));
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-blend-mode: luminosity;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, var(--color-60), transparent);
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .float-info {

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1em;
            padding: var(--default-padding);

            @media (max-width: 853px) {
                flex-direction: column;
                font-size: 1.5em;
            }

            .info {

                display: flex;
                gap: .5em;
                background-color: var(--color-30-transparent);
                padding: 1em;
                border-radius: 1em;
                backdrop-filter: blur(var(--default-blur));
                border: 1px solid var(--color-10-light);
                font-size: 1.5em;
                width: 100%;
                height: 8em;

                .icon {
                    --size: 2em;
                    background-color: var(--color-txt);
                    color: var(--color-30);
                    border-radius: .6em;
                    padding: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1em;
                    width: var(--size);
                    height: var(--size);
                    flex: none;
                }

                .content {

                    display: flex;
                    flex-direction: column;
                    gap: .5em;

                    h3 {
                        font-weight: 700;
                        font-size: 1.5em;
                    }

                    p {
                        font-weight: 500;
                        font-size: .75em;
                        color: var(--color-txt-faded);
                    }

                }

            }

        }

    }

}

#tickets {

    background: radial-gradient(circle at bottom, var(--color-60) 70%, var(--color-30));

    .wrapper {

        display: flex;
        gap: var(--default-gap);
        justify-content: center;
        width: 100%;

        .ticket {

            display: flex;
            flex-direction: column;
            gap: var(--default-gap);
            background: linear-gradient(to top, var(--color-30-transparent), var(--color-10-transparent));
            padding: var(--default-padding);
            border-radius: 2em;
            backdrop-filter: blur(var(--default-blur));
            border: 1px solid var(--color-10-light);
            flex: 1;
            max-width: 720px;

            .title {

                display: flex;
                align-items: center;
                gap: 1em;
                font-weight: 700;
                font-size: 2em;

                .icon {
                    --size: 1em;
                    background-color: var(--color-10-transparent);
                    color: var(--color-10);
                    border-radius: .5em;
                    padding: 1em;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1.5em;
                    width: var(--size);
                    height: var(--size);
                }

            }

            .description {
                font-weight: 500;
                color: var(--color-txt-faded);
            }

            .benefits {

                display: flex;
                flex-direction: column;
                gap: 1em;
                font-size: 1.3em;
                font-weight: 600;
                list-style: none;

                .benefit {
                    display: flex;
                    align-items: center;
                    gap: .5em;
                }

            }

            .pricing {

                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1em;

                .amount {
                    font-size: 4em;
                    font-weight: 800;
                }

            }

            .buttons {

                display: flex;
                align-items: center;
                gap: 1em;
                width: 100%;

                a, .btn {
                    width: 100%;
                }

            }

            .card-brands {
                height: 2em;
                object-fit: contain;
                filter: saturate(0);
                mix-blend-mode: luminosity;
            }

        }

    }

}

footer {
    background-color: var(--color-60-dark);
    padding: var(--default-padding);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .logo-3cs {
        height: 3em;
    }

    .copyright {
        text-align: center;
        color: var(--color-txt-faded);
    }

    .social-media {
        display: flex;
        align-items: center;
        gap: 1em;
    }

    .social-media .icon {
        font-size: 2.5em;
        color: var(--color-txt-faded);
        transition: color 0.3s ease;

        &:hover {
            color: var(--color-10-light);
        }
    }

}

#faq {

    .faq-items {
        
        display: flex;
        flex-direction: column;
        gap: 1em;
        width: 100%;

        @media (max-width: 853px) {
            gap: 2em;
            font-size: 1.3em;
        }

        details {

            background-color: var(--color-10-transparent);
            border: 1px solid var(--color-10-light);
            border-radius: var(--default-radius);
            cursor: pointer;

            &[open] {

                summary {

                    .icon {
                        transform: rotate(180deg);
                    }

                }

            }

            summary {

                display: flex;
                align-items: center;
                justify-content: space-between;
                list-style: none;
                background-color: var(--color-10-transparent);
                border: 1px solid var(--color-10-light);
                border-radius: var(--default-radius);
                padding: 1.5em 2em;
                cursor: pointer;

                .question {
                    font-size: 1.5em;
                    font-weight: 700;
                }

                .icon {
                    font-size: 2em;
                    transition: .2s ease-in-out;
                }

            }

            .answer {
                
                padding: 1.5em 2em;
                font-size: 1.2em;
                color: var(--color-txt-faded);

            }

        }

    }

}