@import url('https://fonts.googleapis.com/css2?family=Bytesized&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&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
}

.container-header {
    background-image: url('./img/site/cabecalho.png');
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    line-height: 0;
}

.button-signup1 {
    position: absolute;
    top: 65%;
    left: 6.4%;
    width: 30%;
    height: 14%;
    background: none;
    background-image: url('./img/botoes/se-inscreva.png');
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
    z-index: 100;
}

.button-signup1:hover {
    transform: scale(1.06);
}

.container-main {
    background-image: url('./img/site/main.png');
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
}

.button-main {
    position: absolute;
    top: 75.6%;
    left: 23.1%;
    width: 22%;
    height: 9.8%;
    background: none;
    background-image: url('./img/botoes/valor.png');
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    animation: pulse 1.4s infinite;
    cursor: pointer;
    z-index: 100;
}

.button-main:hover {
    transform: scale(1.06);
}

.container-clientes {
    background-image: url('./img/site/cliente.png');
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
}

.canal-cl1 {
    position: absolute;
    top: 30.5%;
    left: 23.87%;
    width: 10.8%;
    height: 39.2%;
}

.cl1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.cl1:hover {
    transform: scale(1.06);
}

.canal-cl2 {
    position: absolute;
    top: 30.5%;
    left: 37.7%;
    width: 10.8%;
    height: 39.3%;
}

.cl2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.cl2:hover {
    transform: scale(1.06);
}

.canal-cl3 {
    position: absolute;
    top: 30.5%;
    right: 37.58%;
    width: 10.8%;
    height: 39.3%;
}

.cl3 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.cl3:hover {
    transform: scale(1.06);
}

.canal-cl4 {
    position: absolute;
    top: 30.5%;
    right: 23.58%;
    width: 10.8%;
    height: 39.3%;
}

.cl4 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.cl4:hover {
    transform: scale(1.06);
}

.canal-cl5 {
    position: absolute;
    top: 19.5%;
    left: 69.2%;
    width: 10.8%;
    height: 39.3%;
}

.cl5 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.cl5:hover {
    transform: scale(1.06);
}

.button-signup2 {
    position: absolute;
    left: 36%;
    bottom: 9%;
    width: 25%;
    height: 12%;
    background: none;
    background-image: url('./img/botoes/se-inscreva2.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    border: none;
    cursor: pointer;
    animation: pulse 1.4s infinite;
    z-index: 100;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.button-signup2:hover {
    transform: scale(1.06);
}

.container-modulo {
    background-image: url('./img/site/modulo.png');
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}


.modulo1 {
    position: absolute;
    top: -4.5%;
    left: 12.7%;
    width: 21.9%;
    height: 57%;
}

.caixa1 {
    position: absolute;
    top: 0.7%;
    left: 34.6%;
    width: 25%;
    height: 28%;
    object-fit: cover;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.caixa1:hover {
    transform: scale(1.06);
}

.modulo2 {
    position: absolute;
    top: 27%;
    right: 13.3%;
    width: 22.2%;
    height: 57%;
}

.caixa2 {
    position: absolute;
    top: 34.3%;
    left: 41%;
    width: 25%;
    height: 28%;
    object-fit: cover;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.caixa2:hover {
    transform: scale(1.06);
}

.modulo3 {
    position: absolute;
    top: 46.8%;
    left: 12.6%;
    width: 22.2%;
    height: 54%;
}

.caixa3 {
    position: absolute;
    top: 69%;
    left: 35.6%;
    width: 29%;
    height: 27%;
    object-fit: cover;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.caixa3:hover {
    transform: scale(1.06);
}

.container-bonus {
    background-image: url('./img/site/bonus.png');
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
}

.modulo4 {
    position: absolute;
    top: 4.2%;
    right: 16.5%;
    width: 16%;
    height: 46%;
}

.caixa4 {
    position: absolute;
    top: 3.8%;
    left: 40.4%;
    width: 25%;
    height: 28%;
    object-fit: cover;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.caixa4:hover {
    transform: scale(1.06);
}

.bonus {
    position: relative;
    top: 38%;
    left: 15.8%;
    width: 16.2%;
    height: 46.2%;
    z-index: 2;
}

.bau {
    position: relative;
    top: 5%;
    left: 31.5%;
    width: 9%;
    height: 16%;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.bau:hover {
    animation: rotate 0.36s infinite ease-in-out;
}

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

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

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

    75% {
        transform: rotate(-4deg);
    }

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

.caixa5 {
    position: absolute;
    top: 53.8%;
    left: 23%;
    width: 42%;
    height: 19.8%;
    object-fit: cover;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
    z-index: 1;
}

.caixa5:hover {
    transform: scale(1.06);
}


.container-video {
    background-image: url('./img/site/video.png');
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
}

.mod-video {
    position: relative;
    top: 35%;
    left: 22.3%;
    width: 29.6%;
    height: 56%;
}

.container-signup {
    background-image: url('./img/site/inscricao.png');
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
}

.button-signup3 {
    position: absolute;
    top: 62%;
    left: 16.5%;
    width: 18%;
    height: 8%;
    background-image: url('./img/botoes/inscreva-se.png');
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    border: none;
    cursor: pointer;
    animation: pulse 1.4s infinite;
}

.button-signup3:hover {
    transform: scale(1.06);
}

.container-faq {
    background-image: url('./img/site/faq.png');
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
}

.accordion {
    position: absolute;
    top: 26%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 70vw;
    height: auto;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: 20;
}

.accordion .question button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border: none;
    outline: none;
    color: #000000;
    font-weight: 700;
    cursor: pointer;
}

.question {
    background-color: #fff;
    border: 3.5px solid black;
}

.question button {
    background-color: #fff;
    color: #000;
}

.question button i {
    color: #000;
}

.question.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.question button span {
    text-align: left;
    font-size: 1.25rem;
    overflow: visible;
}

.question p {
    color: #000000;
    text-align: justify;
    font-size: 1rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    font-family: "Poppins", sans-serif;
}

.arrow {
    transition: transform 0.5s ease-in;
    color: #fff;
}

.question button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 2px;
    min-width: 100px;
}


.question p.show {
    max-height: none;
    opacity: 1;
    padding: 0px 14px 5px 14px;
}

.question button .arrow.rotate {
    transform: rotate(180deg);
}

.accordion .question button {
    width: 100%;
}

.accordion p {
    margin-top: 5px;
}

.floating-button {
    position: fixed;
    right: 1%;
    bottom: 8%;
    width: 28vw;
    height: 14vh;
    z-index: 100;
    transition: all 0.5s ease-in-out;
}

.invisible {
    display: none;
    opacity: 0;
}

.button-signup4 {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    background-image: url('./img/botoes/se_inscreva.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.4s ease;
    border-radius: 70px;
    cursor: pointer;
}

.button-signup4:hover {
    transform: scale(1.04);
}

@media (max-width: 1001px) {
    .container-header {
        background-image: url('./img/mobile/bg/header.png');
        aspect-ratio: 9 / 16;
    }

    .criador-header {
        position: absolute;
        top: 48.7%;
        left: 9%;
        width: 85%;
        height: 20.5%;
    }

    .button-signup1 {
        top: 45.8%;
        left: 21.2%;
        width: 59%;
        height: 9%;
    }

    .container-main {
        background-image: url('./img/mobile/bg/main.png');
        aspect-ratio: 9 / 16;
    }

    .button-main {
        display: none;
    }

    .container-clientes {
        background-image: url('./img/mobile/bg/clientes.png');
        aspect-ratio: 9 / 16;
    }

    .canal-cl1 {
        top: 15.9%;
        left: 22.3%;
        width: 29%;
        height: 33.3%;
    }

    .canal-cl2 {
        top: 15.9%;
        left: 56.8%;
        width: 28.9%;
        height: 33.3%;
    }

    .canal-cl3 {
        top: 51.3%;
        left: 16.87%;
        width: 27.4%;
        height: 31.8%;
    }

    .canal-cl4 {
        top: 51.3%;
        left: 50.87%;
        width: 27.4%;
        height: 31.6%;
    }

    .button-signup2 {
        top: 85.3%;
        left: 26.87%;
        width: 48.7%;
        height: 7.1%;
    }

    .container-modulo {
        background-image: url('./img/mobile/bg/mod1.png');
        aspect-ratio: 9 / 16;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        position: relative;
    }

    .modulo1 {
        display: none;
    }

    .caixa1 {
        display: none;
    }

    .container-mod2 {
        background-image: url('./img/mobile/bg/mod2.png');
        aspect-ratio: 9 / 16;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        position: relative;
    }

    .modulo2 {
        display: none;
    }

    .caixa2 {
        display: none;
    }

    .container-mod3 {
        background-image: url('./img/mobile/bg/mod3.png');
        aspect-ratio: 9 / 16;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        position: relative;
    }

    .modulo3 {
        display: none;
    }

    .caixa3 {
        display: none;
    }

    .container-mod4 {
        background-image: url('./img/mobile/bg/mod4.png');
        aspect-ratio: 9 / 16;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        position: relative;
    }

    .modulo4 {
        display: none;
    }

    .caixa4 {
        display: none;
    }

    .container-bonus {
        background-image: url('./img/mobile/bg/mod5.png');
        aspect-ratio: 9 / 16;
    }

    .bonus {
        display: none;
    }

    .caixa5 {
        display: none;
    }

    .container-video {
        background-image: url('./img/mobile/bg/video.png');
        aspect-ratio: 9 / 16;
    }

    .mod-video {
        display: none;
    }

    .bau {
        display: none;
    }

    .container-signup {
        background-image: url('./img/mobile/bg/inscricao.png');
        aspect-ratio: 9 / 16;
    }

    .button-signup3 {
        display: none;
    }

    .container-faq {
        background-image: url('./img/mobile/bg/faq2.png');
        aspect-ratio: 9 / 16;
    }

    .title-faq {
        display: none;
    }

    .accordion {
        top: 15%;
        width: 94vw;
        height: 80%;
    }

    .floating-button {
        width: 92vw;
        height: 16vh;
        bottom: 2%;
        left: 50%;
        transform: translateX(-50%);
    }

}

@media (min-width: 480px) {
    .accordion .question {
        margin-bottom: 6px;
    }
}