@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --color-white: #ffffff;
    --color-grey: rgb(192, 192, 192, 50%);
    --shadow-black: black 5px 5px 10px;
    --azulzin: #2563eb;
    --verdin: #06c46f;
    --verde-zapme-1: #34ED87;
    --verde-zapme-2: #25D366;
    --pretin: #2c2c2c;

    --shadow-v1: rgba(91, 89, 89, 0.159) 1px 1px 1px 1px;
    --shadow-v2: rgba(49, 48, 48, 0.322) 3px 3px 1px 1px;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    scroll-behavior: smooth;
    -ms-behavior: smooth;
}

a {
    color: white;
}

strong {
    color: var(--verde-zapme-1);
}

body {
    overflow-x: hidden;
    background: #EFEFEF;
}


article {
    display: none;
    visibility: hidden;
    position: fixed !important;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background: rgba(168, 168, 168, 0.596);
    /* z-index: 99 !important; */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    /* background-color: red; */

    .zapme-pay {
        width: 350px;
        height: 500px;

        >div {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            height: 100%;

            img {
                width: 220px;
                border-radius: 10px;
                border-radius: 50px;
            }

            span {
                font-size: 14px;
                text-align: center;
            }

            strong {
                color: black !important;
                font-weight: 700;
            }

            .mp-seguro {
                height: 40px !important;
                width: 200px !important;
            }
        }

        label {
            font-size: 11px;
            font-style: italic;
        }
    }

    >div {
        width: 350px;
        height: 500px;
        background-color: white;
        padding: 10px;
        box-shadow: var(--shadow-v1);
        display: flex;
        flex-direction: column;
        border-radius: 10px;

        header2 {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: solid 1px #eeeeee;
            padding: 5px;

            span {
                cursor: pointer;
                font-size: 14px;
            }
        }

        .show-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100px;
            gap: 10px;

            span {
                font-weight: 500;
                font-size: 18px;
                border-bottom: #eeeeee 2px solid;
                padding-bottom: 10px;
                /* margin-bottom: ; */
            }
        }

        .qtde-extra {
            position: relative;

            >svg {
                position: absolute;
                top: 30px;
                left: 5px;
            }

        }

        >div {
            section {
                display: flex;
                flex-direction: column;
                gap: 6px;
                margin-top: 10px;


                span {
                    font-size: 14px;
                }

                >input {
                    text-align: center;
                    padding: 8px;
                    outline: 1px solid silver;
                    border: none !important;
                    border-radius: 4px;
                    font-size: 18px;
                }

                div {
                    user-select: none;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-size: 14px;
                    color: grey;
                    outline: 1px solid silver;
                    padding: 8px;
                    border-radius: 6px;
                    /* background-color: #eeee; */
                    position: relative;


                    &:hover {
                        cursor: no-drop;
                    }

                    &::after {
                        position: absolute;
                        right: 15px;
                        content: "";
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2325D87C' stroke-width='2' d='M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11Zm0-10a1 1 0 1 0 0-2a1 1 0 0 0 0 2Zm0 2a3 3 0 1 0 0-6a3 3 0 0 0 0 6Zm0 2a5 5 0 1 0 0-10a5 5 0 0 0 0 10Z'/%3E%3C/svg%3E");


                    }

                    span {
                        width: 70%;
                        /* background-color: red; */
                        text-align: center;
                    }
                }
            }
        }

        .loading-pay-btn {
            pointer-events: none;
            background: white;
            outline: solid 1px silver;

            &::before {
                content: "";
                display: inline-block;
                width: 50px;
                height: 50px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='18' cy='12' r='0' fill='silver'%3E%3Canimate attributeName='r' begin='.67' calcMode='spline' dur='1.5s' keySplines='0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8' repeatCount='indefinite' values='0;2;0;0'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='0' fill='silver'%3E%3Canimate attributeName='r' begin='.33' calcMode='spline' dur='1.5s' keySplines='0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8' repeatCount='indefinite' values='0;2;0;0'/%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='0' fill='silver'%3E%3Canimate attributeName='r' begin='0' calcMode='spline' dur='1.5s' keySplines='0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8' repeatCount='indefinite' values='0;2;0;0'/%3E%3C/circle%3E%3C/svg%3E");
            }
        }

        button {
            width: 100%;
            margin-top: auto;
            height: 40px;
            border: none;
            background: var(--verde-zapme-2);
            border-radius: 6px;
            font-size: 16px;
            color: white;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
                cursor: pointer;
                color: var(--verde-zapme-2);
                background: white;
                outline: 1px solid var(--verde-zapme-2);
            }

            /* outline: 1px solid va; */
        }

    }

    .card-invisible {
        visibility: hidden !important;
        display: none !important;
    }
}

header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 3 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none !important;

    >div {
        display: flex;
        height: 100%;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        width: 50%;
        min-width: 700px;
        border-radius: 100px;
        align-items: center;
        justify-content: space-between;
        padding-inline-start: 20px;
        padding-inline-end: 5px;
        background: rgba(255, 254, 254, 0.4);
        box-shadow: rgba(91, 89, 89, 0.159) 1px 1px 1px 1px;


        h1 {
            display: flex;
            flex-direction: row;
            color: #2c2c2c;
            font-size: 16px;
            font-weight: 600;
            align-items: center;

            >span {
                font-weight: 200;
                color: rgb(215, 203, 203);
                font-size: 10px;
            }
        }

        >div {
            font-size: 13px;
            display: flex;
            gap: 10px;

            >a {
                padding: 4px;
                /* border-radius: 5px; */
                text-decoration: none;
                color: var(--pretin);
                font-weight: 700;
                font-size: 13px;
                flex-direction: row;
                align-content: center;
                transition: 0.3s;
                user-select: none;
                border-bottom: solid 2px transparent;

                &:hover {
                    transition: 0.3s;
                    /* background-color: var(--pretin);
                    color: white; */
                    cursor: pointer;
                    border-color: var(--verde-zapme-1) !important;
                    /* box-shadow: var(--shadow-v2); */
                }
            }
        }

        >a:last-of-type {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--pretin);
            background: white;
            padding-inline: 10px;
            font-size: 16px;
            font-weight: 800;
            text-decoration: none;
            border-radius: 100px;
            outline: 1px solid silver;
            height: 40px;
            transition: 0.3s;

            &:hover {
                outline: 1px solid var(--pretin);
                background: var(--verde-zapme-1);
                transition: 0.3s;

            }

        }
    }
}

#home {
    display: flex;
    flex-direction: column;
    align-items: center;

    video {
        border-radius: 7px;
        outline: 1px solid silver;
        /* box-shadow: #48e46c77 1px 1px 8px 2px; */
        max-width: 650px;
        margin-top: 30px;
        /* margin-bottom: 10px; */
    }

    atention {
        font-weight: 700;
        color: #25D366;
        /* color: black; */
        /* background: var(--verde-zapme-2); */
        padding: 4px;
        border-radius: 10px;
    }

    h1 {
        font-size: 45px;
        font-weight: 700;
        margin-top: 85px;
        color: var(--pretin);
        text-align: center;
        letter-spacing: -1px;
        line-height: 1.0
    }

    h3 {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        width: 500px;
        margin-top: 5px;
        color: var(--pretin);
    }

    .compativeis {
        position: relative;
        background-color: white !important;
        padding: 10px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 10px;
        box-shadow: var(--shadow-v1);
        margin-top: 40px;
        transition: 0.4s;

        &:hover {
            cursor: pointer;
            box-shadow: var(--shadow-v2);
        }

        &::before {
            content: "Baixe, é gratuito!";
            position: absolute;
            font-size: 12px;
            font-style: italic;
            translate: 10px -35px;
            font-weight: 500;
            text-decoration: underline;
            color: grey;
        }

    }

    >div {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 65px;

        span {
            font-style: italic;
            color: gray;
            font-size: 14px;
        }

        svg {
            cursor: pointer;
            opacity: 0.4;
            /* background-color: red; */
            animation: arrow-animation 1s infinite alternate-reverse;
        }
    }
}

#modulos {
    display: grid;
    grid-template-columns: 400px 400px;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;

    margin-top: 20px;

    >div {
        width: 400px;
        padding: 0.8rem;
        border-radius: 0.5rem;
        background-color: white;

        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 6px;
        box-shadow: var(--shadow-v1);


        &:nth-child(11) {
            svg {
                background-color: rgb(236, 31, 31);
            }
        }

        &:nth-child(12) {
            svg {
                background-color: rgb(245, 198, 42);
            }
        }

        >svg {
            background-color: var(--verde-zapme-1);
            border-radius: 100px;
            padding: 0.5rem;
            min-width: 50px;
        }

        >div {
            /* background-color: red; */
            gap: 4px;
            display: flex;
            flex-direction: column;
        }

        span {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
            font-size: 18px !important;

            &:last-child {
                font-weight: 400;
                color: grey;
                font-size: 12px !important;
            }
        }

        &:hover {
            box-shadow: var(--shadow-v2);
        }
    }
}

#sobre {
    display: flex;
    flex-direction: column;
    width: 100%;

    strong {
        /* color: ; */
        color: #2c2c2c;
        font-weight: 700;
    }

    h1 {
        font-size: 23px;
        text-align: center;
        font-weight: 800;
        letter-spacing: -1px;
        color: var(--pretin);
        margin-top: 100px;
    }

    div {
        display: flex;
        justify-content: center;
        align-items: center;

        >div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;


            h3 {
                text-align: left;
                color: grey;
                font-size: 16px;
                font-weight: 500;
                max-width: 500px;
            }
        }

        >img {
            border-radius: 10px;
            animation: linear animate-messages;
            animation-timeline: view();
            animation-range: cover 0% cover 30%;
        }
    }
}

.btn-plan {
    &:hover {
        cursor: pointer;
    }
}

.alert-pc {
    position: fixed;
    width: 100%;

    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    bottom: 10px;

    a {
        padding: 8px 15px;
        border-radius: 5px;
        background-color: red;
    }
}

.btn-contact, .btn-download {
    position: fixed;
    height: 65px;
    width: 65px;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;

    z-index: 99999;

    &:hover {
        cursor: pointer;
        animation: shake 0.3s ease-in-out infinite;
    }
}

.btn-download {
    color: var(--verde-zapme-2);
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 100px;
}

.help-buy {
    display: inline-block;
    text-align: center;
    color: black;
    width: 100%;
    margin-top: 30px;

    a {
        background-color: var(--pretin);
        color: var(--pretin);
        padding: 0.7rem;
        box-shadow: var(--shadow-v1);
        border-radius: 0.4rem;
        color: white;
        font-weight: 500;
        text-decoration: none;
        transition: 0.3s;
        font-size: 16px !important;

        &:hover {
            box-shadow: var(--shadow-v2);
        }
    }

    /* background-color: red; */
}

#pc {
    /* margin-top: 50px; */
    display: flex;
    align-items: center;
    flex-direction: column;

    h1 {
        margin-top: 50px;
        font-weight: 800;
        color: #25D366;
    }

    h2 {
        margin-top: 50px;
        font-weight: 800;
        font-size: 30PX;
        text-align: center;
    }

    span {
        color: grey;
    }

    a {
        margin-top: 10px;
        color: white;
        background: #25D366;
        padding: 10px;
        border-radius: 5px;
        font-size: 18px;
        font-weight: 800;
        box-shadow: var(--shadow-v2);
    }
}

#pro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    /* margin-top: 50px; */

    /* strong{
        color: black;
    } */

    &::before {
        content: attr(data-name);
        position: absolute;
        font-weight: 700;
        font-size: 30px;
        translate: 0 70px;
        margin-top: 25px;
    }


    h3 {
        margin-top: 10px;
        width: 100%;
        font-size: 10px;
        font-style: italic;
        text-align: center;
        color: grey;
    }

    >div {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        margin-top: 50px;
        gap: 10px;

        h1 {
            width: 100%;
            text-align: center;
            font-weight: bold;
            font-size: 24px;
        }


        .sw {
            display: none;
            visibility: hidden;
            align-self: center;
            flex-direction: row;
            gap: 10px;
            align-items: center;

            >div {
                background-color: white;
                height: 30px;
                width: 70px;
                border-radius: 100px;
                position: relative;
                outline: 1px solid var(--verde-zapme-1);
                cursor: pointer;

                label {
                    translate: 2.5px 1.5px;
                    position: absolute;
                    border-radius: 100px;
                    width: 27px;
                    height: 27px;
                    background-color: var(--verde-zapme-1);
                    cursor: pointer;
                    transition: 0.5s;
                }
            }
        }
    }

    /* display: flex; */
    align-items: center;

    .cards {
        /* margin-top: 150px; */
        display: flex;
        margin-top: 20px !important;
        flex-direction: row;
        gap: 8px;
        justify-content: center;
        grid-template-columns: 280px 280px 280px 280px;




        >div {
            /*card*/
            border-radius: 7px;
            outline: 1px solid silver;
            box-shadow: var(--shadow-v1);
            padding: 0.8rem;
            background: white;

            &:nth-child(4) {
                outline: 2px solid var(--verdin);
            }

            &:last-child {
                display: none;
                visibility: hidden;
                /* background-color: red; */
            }

            &:first-of-type {
                span {
                    &::after, &::before {
                        content: "" !important;
                    }
                }
            }

            &::before {
                content: attr(data-name);
                position: absolute;
                translate: 150px -5px;
                font-weight: 5000;
                font-size: 12px;
                border-radius: 1000px;
            }

            &:hover {
                transition: 0.3s;
                box-shadow: rgba(192, 192, 192, 0.333) 1px 0px 4px 4px;
            }

            >div {
                &:nth-child(1) {
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 10px;

                    >span {
                        font-weight: 400;
                        font-size: 25px;
                        color: var(--pretin);
                    }

                    >label {
                        color: var(--verde-zapme-2);
                        font-size: 13px;
                        font-weight: 700;

                    }
                }


                &:nth-child(2) {
                    display: flex;
                    flex-direction: column;
                    /* background-color: red; */
                    margin-bottom: 15px;


                    .mes {
                        &::after {
                            content: "/dia" !important;
                            font-size: 16px !important;
                            font-weight: 500;
                        }
                    }

                    span {
                        font-weight: 800;
                        font-size: 30px;



                        &::before {
                            content: "1X";
                            font-size: 15px;
                            font-weight: 700;
                            margin-right: 3px;
                        }

                        &::after {
                            content: "/ano";
                            font-size: 15px;
                            font-weight: 500;
                        }
                    }



                    label {
                        color: grey;
                        font-size: 11px;
                        font-weight: 400;
                        font-style: italic;
                    }
                }

                &:nth-child(3) {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;

                    >span {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: 6px;
                        font-size: 14px;

                        &::before {
                            content: "";
                            display: inline-block;
                            width: 24px;
                            height: 24px;
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2325D366' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 12l4.243 4.243l8.484-8.486'/%3E%3C/svg%3E");
                        }
                    }

                    .not::before {
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='red' d='M16.95 8.464a1 1 0 0 0-1.414-1.414L12 10.586L8.464 7.05A1 1 0 1 0 7.05 8.464L10.586 12L7.05 15.536a1 1 0 1 0 1.414 1.414L12 13.414l3.536 3.536a1 1 0 1 0 1.414-1.414L13.414 12z'/%3E%3C/svg%3E");

                    }
                }

            }

            a {
                margin-top: 20px;
                width: 100%;
                border-radius: 7px;
                box-shadow: var(--shadow-v1);
                text-decoration: none;
                text-align: center;
                padding: 0.8rem;
                display: inline-block !important;
                background-color: var(--verdin);

                &:hover {
                    box-shadow: var(--shadow-v2);
                }
            }

            >label {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 10px;
                width: 100%;
                font-size: 12px;
                font-style: italic;
                font-weight: 600;
                color: grey;
                /* background-color: red; */
            }

        }


        .desconto {
            background-color: rgba(244, 146, 10, 0.777);
            padding: 5px 8px;
            border-radius: 4px;
            width: fit-content;
            font-size: 12px !important;
            color: white !important;
            font-weight: 500 !important;
            font-style: normal !important;
            box-shadow: #f69a0836 1px 1px 5px 1px;

            &::before {
                content: "de ";
            }

            &::after {
                content: " por";
            }

            /* text-decoration: line-through; */
        }


    }
}

#android {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    align-items: center;

    display: none;
    visibility: hidden;

    h1 {
        font-size: 30px;
        text-align: center;
        font-weight: 700;
        color: var(--pretin);
        margin-top: 100px;
    }

    h3 {
        font-weight: 700;
        color: var(--pretin);
        font-size: 30px;
        margin-top: 5px;

        strong {
            font-weight: 700;
            color: greenyellow;
            background-color: black;
            padding: 4px 6px;
            border-radius: 10px;
            box-shadow: var(--shadow-v1);
        }
    }

    span {
        text-align: center;
        color: grey;
        font-style: italic;
        font-size: 14px;
        margin-top: 14px;
    }

    img {
        margin-top: 20px;
        box-shadow: var(--shadow-black);
        border-radius: 30px;
        width: 300px;
    }

    button {
        margin-top: 20px;
        background-color: greenyellow;
        border: none;
        padding: 0.7rem;
        border-radius: 8px;
        font-weight: bold;
        font-size: 20px;
        outline: 1px solid black;
        opacity: 0.2;
        user-select: none;

        &:hover {
            background-color: grey;
            cursor: not-allowed;
            box-shadow: var(--shadow-v2);
        }
    }
}

#faq {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;


    strong {
        color: var(--azulzin);
        font-weight: 700;
    }

    &::before {
        content: attr(data-name);
        margin-top: 100px;
        margin-bottom: 10px;
        font-weight: 700;
        font-size: 30px;
    }

    details {

        border-radius: 6px;
        margin-bottom: 12px;
        /* box-shadow: 0 2px 5px rgb(0 0 0 / 0.1); */
        /* transition: background-color 0.3s ease; */
        backdrop-filter: blur(3px) !important;
        width: 540px;
        background: white;
        user-select: none;
    }

    details[open] {
        box-shadow: 0 3px 6px #3f3f3f71;
        /* color: var(--verde-zapme-1); */
    }

    summary {
        display: block;
        font-weight: 600;
        font-size: 1.1rem;
        list-style: none;
        position: relative;
        padding: 15px 20px 15px 45px;
        cursor: pointer;
        min-width: 400px !important;

    }

    summary::marker {
        content: '';
    }

    summary::before {
        content: '▶';
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        color: var(--verde-zapme-2);
        transition: transform 0.3s ease;
        font-size: 0.9rem;
    }

    details[open] summary::before {
        max-width: 200px !important;
        transform: translateY(-50%) rotate(90deg);
    }

    details>p {
        padding: 0 20px 15px 20px;
        margin: 0;
        line-height: 1.5;
        color: var(--pretin);
        font-size: 0.95rem;
        word-break: break-word;
        font-weight: 400;
        /* evita estouro lateral de texto longo */
    }

}

#rate {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;

    h1 {
        margin-top: 50px;
        font-weight: 600;
        font-size: 30px;
        /* margin-bottom: 10px; */

        img {
            width: 250px;
            translate: 0 50px;
        }
    }

    >img {
        border-radius: 8px;
        filter: contrast(120%);
        box-shadow: var(--shadow-v1);
        /* max-width: 600px !important; */
        transition: 0.3s;

        &:first-of-type {
            box-shadow: var(--shadow-v2);
        }


        &:hover {
            transition: 0.3s;
            box-shadow: var(--shadow-v2);
            scale: 1.1 1.1;
            cursor: pointer;
        }
    }

    a {
        /* margin-top: 10px; */
        text-decoration: none;
        font-size: 14px;
        color: grey;
        /* font-weight: 800; */
    }
}

#contato {
    background-color: white;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0.8rem;
    align-items: center;
    height: 70px !important;
    margin-top: 100px;
    margin-bottom: 10px;


    * {
        color: #2c2c2c;
        font-size: 12px;
    }

    >div {

        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;

        >span {
            font-weight: 700;
            font-size: 16px;

            &::after {
                color: var(--verde-zapme-2);
                content: " |";
            }
        }

        >a {
            font-weight: 400;
            font-size: 14px;
        }
    }
}

@keyframes pop-up-wp {
    from {
        /* opacity: 0; */
        scale: 0 0;
    }
}

@keyframes animate-in-and-out {

    from {
        opacity: 0;
        translate: 0 100px;
    }
}

@keyframes animate-messages {

    from {
        opacity: 0;
        scale: 0 0;
        /* translate: 100px 0px; */
    }
}

@keyframes arrow-animation {
    to {
        translate: 0 10px;
        opacity: 0.2;
    }
}

.img-round {
    border-radius: 30px;
    box-shadow: #cacaa2 1px 1px 10px 5px;
}

modal-renew {
    display: none;
    visibility: hidden;
    display: flex;
    position: fixed !important;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background: rgba(168, 168, 168, 0.596);
    /* z-index: 99 !important; */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;

    >div {
        width: 250px;
        height: 250px;
        background-color: white;
        padding: 10px;
        box-shadow: var(--shadow-v1);
        display: flex;
        flex-direction: column;
        border-radius: 10px;

        header2 {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
        }

        >div {
            /* background-color: red; */
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.loading-rebuy {

    * {
        display: none;
        visibility: hidden;
    }

    &::before {
        content: "";
        display: inline-block;
        width: 64px;
        height: 64px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='16' stroke-dashoffset='16' d='M12 3c4.97 0 9 4.03 9 9'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.3s' values='16;0'/%3E%3CanimateTransform attributeName='transform' dur='1.5s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3Cpath stroke-dasharray='64' stroke-dashoffset='64' stroke-opacity='0.3' d='M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='1.2s' values='64;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    }
}

.slider {
    width: 100%;
    overflow: hidden;
}

.slide-track {
    display: flex;
    width: calc(350%);
    animation: scroll 25s linear infinite;
    padding: 10px;
}

.slide-track img {
    height: 70px;
    flex-shrink: 0;
    margin-right: 20px;
    border-radius: 10px;
    outline: 1px solid grey;
    opacity: 0.6;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* para mobile */
@media (max-width: 800px) {

    main {
        width: 100vw;
        height: 100%;
        overflow: hidden !important;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    header {

        top: 0;
        left: 0;
        min-width: 0 !important;


        #btn-zapme-chrome {
            visibility: hidden;
            display: none !important;
        }

        >div {
            min-width: 0 !important;
            width: 100%;
            border-radius: 0;
            padding: 0;
            padding-right: 10px;

            h1 {
                font-size: 18px;

                svg {
                    width: 30px;
                    height: 30px;
                    margin-left: 10px;
                }
            }


            >div {
                width: 100%;
                gap: 4px !important;
                padding: 0 !important;
                min-width: 0px !important;
                width: max-content;
                padding-inline: 10px;

                a {
                    font-size: 16px;
                }
            }
        }

    }

    #home {
        h1 {
            text-align: center;
            font-size: 26px;
            width: 350px;
        }

        h3 {
            font-size: 14px;
            width: 300px;
            /* color: silver; */
        }

        /* background-color: red; */

    }

    #modulos {
        grid-template-columns: 90%;
        gap: 6px;


        >div {
            width: 100%;
        }
    }

    #recursos {
        width: 90% !important;
        /* visibility: hidden; */
        /* height: 0 !important; */
        /* display: none; */
    }

    #sobre {



        h1 {
            margin-top: 35px;
            margin-bottom: 15px;
        }

        >div {
            width: 100% !important;
            flex-direction: column-reverse;


            h3 {
                width: 300px;
            }

            img {
                width: 200px;
            }
        }
    }

    #pc {
        align-self: center;
        text-align: center;
        width: 90%;
    }

    #pro, #pc {
        &::before {
            font-size: 20px;
            margin-top: -20px;
        }

        .cards {
            display: flex;
            flex-direction: column;

            padding: 0;
            margin: 0;
            margin-top: 80px;
            gap: 10px;

            >div {
                outline: none;
                min-width: 0;
                width: 100%;
            }
        }
    }

    #faq {
        display: flex;
        align-items: center;
        flex-direction: column;

        * {
            max-width: 380px !important;
        }
    }

    #android {
        span {

            width: 240px;
        }
    }

    #contato {
        height: fit-content !important;
        flex-direction: column;
        gap: 10px;
    }

    #rate {
        h1 {
            margin-top: 0px;
        }
    }
}

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}