@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=BBH+Bartle&family=BBH+Bogle&family=BBH+Hegarty&family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Ballet:opsz@16..72&family=Barlow+Condensed: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=Barlow+Semi+Condensed: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=Barlow: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=Bebas+Neue&family=Heebo:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Orbitron:wght@400..900&family=Pacifico&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');

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: black;
}

span {
    color: #FB4B00;
}




/* ==========================================================================
   HEADER
   ========================================================================== */

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: max-content;
    padding-left: 5vw;
}

h1 {
    color: #FFF;
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 1.67vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* ==========================================================================
   TELA 1 - HERO
   ========================================================================== */

.tela1 {
    width: 100%;
    height: 100vh;
    background: black;
    display: flex;
    flex-flow: row nowrap;
}

.divtexto {
    width: 50%;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    padding-left: 5vw;
}

.divtexto h2 {
    color: white;
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 4.17vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 90%;
}

.divimg {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.divimg img {
    width: 80%;
    transition: opacity .5s ease;
}


.tela1 button {
    border-radius: 1vw;
    background: #FB4B00;
    box-shadow: 0 4px 35px 1px rgba(251, 75, 0, 0.40);
    border: none;
    width: 25vw;
    height: 10.5vh;
    color: #FFF;
    font-family: "Inter", sans-serif;
    font-size: 2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tela1 button img {
    width: 1.9vw;
    margin-left: 1.4vw;
}


/* ==========================================================================
   TELA 2 - TRABALHOS RECENTES
   ========================================================================== */

.tela2 {
    background: black;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    height: max-content;
}

.tela2 h2 {
    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 2.78vw;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    width: max-content;
}

.tela2 .principal {
    width: 80%;
    position: relative;
    z-index: 2;

}

.tela2 .principal img {
    width: 100%;
}

.tela2 .menu {
    width: 20%;
    height: max-content;
}

.tela2 .menu .quamenu {
    width: 80%;
    margin-bottom: 6%;
}

.tela2 .menu img {
    width: 100%;

}

.tela2 .menu p {
    color: #FFF;
    text-align: center;
    font-family: Poppins;
    font-size: 1.4vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: start;
    margin: 0;
}

.tela2 button {
    border-radius: 14px;
    background: #FB4B00;
    box-shadow: 0 4px 35px 1px rgba(251, 75, 0, 0.20);
    border: none;
    width: 30vw;
    height: 9vh;
    color: #FFF;
    font-family: "Inter", sans-serif;
    font-size: 2.22vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
}

.divfundo {
    position: absolute;
    width: 73%;
    height: 100%;
    top: 9.7%;
    left: 13.8%;
    z-index: -1;
}

.divfundo video {
    width: 100%;
}

.select {
    border: solid 2px white;
    border-radius: .5vw;
}

/* ==========================================================================
   TELA 3 - BENEFÍCIOS
   ========================================================================== */

.tela3 {
    background: black;
    display: flex;
    width: 100%;
    height: max-content;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
    padding: 1.5% 0;
}

.tela3 h2 {
    color: #FB4B00;
    font-family: "Poppins", sans-serif;
    font-size: 3.47vw;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}

.tela3 h2 span {
    color: #FFF;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 3.13vw;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
}

.tela3 .linha {
    width: 100vw;
    display: flex;
    gap: .7vw;
    justify-content: center;
    flex-flow: row nowrap;

}

.tela3 .linha .quadrado {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(25px);
    width: 22%;
    text-align: start;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding-top: 3vh;

}

.tela3 .linha .quadrado img {
    width: 4vw;
    object-fit: contain;
}

.tela3 .linha .quadrado h3 {
    color: #FFF;
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 1.39vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 100%;
    text-align: center;
}

.tela3 .linha .quadrado p {
    color: #FFF;
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 1.39vw;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    width: 88%;

}

/* ==========================================================================
   TELA 4 - PASSO A PASSO
   ========================================================================== */

.tela4 {
    background: black;
    display: flex;
    width: 100%;
    height: max-content;
    flex-flow: column wrap;
    align-items: center;

}

.tela4 h2 {
    color: #FB4B00;
    font-family: "Poppins", sans-serif;
    font-size: 3.47vw;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}

.tela4 h2 span {
    color: #FFF;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 3.13vw;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
}

.tela4 .subdiv {
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: center;
    position: relative;

}

.subdiv .coluna {
    width: 45%;
}

.subdiv .coluna .retangulo {
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(25px);
    display: flex;
    flex-flow: column nowrap;
    justify-content: end;
    width: 100%;
    padding: 2% 0;
    margin-bottom: 4vw;
    padding: 2% 5%;
}

.subdiv .coluna .retangulo .titulo {
    width: 100%;
    display: flex;
    margin-bottom: 1%;
}

.subdiv .coluna .retangulo .texto {
    width: 100%;

}

.subdiv .coluna .retangulo h3 {
    color: #FB4B00;
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 1.39vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;

}

.subdiv .coluna .retangulo p {
    color: #FFF;
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 1.39vw;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin: 0;
}

.subdiv .coluna .retangulo img {
    margin: 0;
    margin-right: 1.5vw;
    width: 2.2vw;
    height: 2.2vw;
    object-fit: contain;
    flex-shrink: 0;
}

.subdiv .linhadotempo {
    padding-top: 1.5vh;
    width: 5vw;
    display: flex;
    flex-flow: column wrap;
    gap: 16vh;
    position: relative;

}

.linhadotempo .linha {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, #0B0B0B 0%, #830000 8.65%, #830000 90.87%, #000 100%);
    top: -6vh;
    left: 1.5vw;
    z-index: 1;
}

.linhadotempo .bola {
    width: 3.1vw;
    height: 3.1vw;
    background: #FB4B00;
    filter: drop-shadow(3px 4px 35px rgba(251, 75, 0, 0.30));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    text-align: center;
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 1.39vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    z-index: 2;
}

/* ==========================================================================
   TELA 5 - FAQ
   ========================================================================== */

.tela5 {
    width: 100%;
    height: max-content;
    background: black;
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    padding-bottom: 2vw;
}

.tela5 h2 {
    color: #FFF;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 2.78vw;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
}

.tela5 span {
    color: #FB4B00;
    font-family: "Poppins", sans-serif;
    font-size: 2.78vw;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}

.tela5 .bloco {
    width: 90%;
    margin: auto;
}

.tela5 .bloco .quest {
    color: #FFF;
    border-top: solid 1px rgba(255, 255, 255, 0.25);
    padding: 1.2vh 1%;
}

.tela5 .bloco .quest.ult {
    border-bottom: solid 1px rgba(255, 255, 255, 0.25);
}

.tela5 .bloco .quest-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1vw;
    cursor: pointer;
    height: 6vh;

}

.tela5 .bloco .quest-topo p {
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 1.39vw;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin: 0;
}

.tela5 .bloco .quest-topo img {
    width: 1.1vw;
    height: 1.1vw;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform .3s ease;
}

.tela5 .bloco .quest.aberto .quest-topo img {
    transform: rotate(180deg);
}

.tela5 .bloco .resposta {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .3s ease, margin-top .3s ease;
    opacity: 0;
    margin-top: 0;
}

.tela5 .bloco .resposta p {
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 1.15vw;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    padding-right: 2vw;
}

.tela5 .bloco .quest.aberto .resposta {
    opacity: 1;
    margin-top: 1.2vh;
}

/* ==========================================================================
   TELA 6 - CTA FINAL
   ========================================================================== */

.tela6 {
    background: black;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    padding: 3% 0;
    width: 100%;
    height: 100vh;
}

.tela6 h2 {
    color: #FFF;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 4.44vw;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
}

.tela6 h2 span {
    color: #FB4B00;
    font-family: "Poppins", sans-serif;
    font-size: 4.44vw;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}

.tela6 button {
    border-radius: 14px;
    border: none;
    background: #FB4B00;
    box-shadow: 3px 4px 35.3px 0 rgba(251, 75, 0, 0.20);
    color: #FFF;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 3.33vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 60%;
    height: 15%;
}




/* ==========================================================================
   TELA 2 - TRANSIÇÃO "TELA DESLIGANDO/LIGANDO" NA TROCA DE VÍDEO
   Adicione este bloco ao final do seu estilo.css
   ========================================================================== */

.divfundo {
    overflow: hidden;
    /* garante que nada vaze pra fora da área do notebook */
}

.tela2 .divfundo video {
    transform-origin: center center;
    will-change: transform, filter, opacity;
}

.tela2 .divfundo video.tv-off {
    animation: tvDesligando .35s cubic-bezier(.4, 0, .6, 1) forwards;
}

.tela2 .divfundo video.tv-on {
    animation: tvLigando .5s cubic-bezier(.2, .8, .3, 1) forwards;
}

@keyframes tvDesligando {
    0% {
        transform: scaleY(1);
        filter: brightness(1) saturate(1);
        opacity: 1;
    }

    40% {
        transform: scaleY(0.85);
        filter: brightness(1.8) saturate(1.4);
        opacity: 1;
    }

    75% {
        transform: scaleY(0.04);
        filter: brightness(4) saturate(2);
        opacity: 1;
    }

    100% {
        transform: scaleY(0.01);
        filter: brightness(6) saturate(2);
        opacity: 0;
    }
}

@keyframes tvLigando {
    0% {
        transform: scaleY(0.01);
        filter: brightness(6) saturate(2);
        opacity: 0;
    }

    30% {
        transform: scaleY(0.04);
        filter: brightness(4) saturate(2);
        opacity: 1;
    }

    60% {
        transform: scaleY(0.9);
        filter: brightness(1.8) saturate(1.4);
        opacity: 1;
    }

    80% {
        transform: scaleY(1.03);
        filter: brightness(1.2) saturate(1.1);
    }

    100% {
        transform: scaleY(1);
        filter: brightness(1) saturate(1);
        opacity: 1;
    }
}




















@media (max-width:767px) {
    h1 {
        font-size: 4vw;
    }

    .tela1 {
        flex-flow: column wrap;
        width: 100%;
        height: 100vh;
        margin-bottom: 15%;
    }

    .divtexto {
        width: 100%;
        height: 50%;
        z-index: 10;
        padding-top: 12%;
    }

    .divtexto h2 {
        font-size: 8vw;
    }

    .tela1 button {
        width: 60vw;
        height: 15%;
        font-size: 5vw;
        border-radius: 3vw;
    }

    .tela1 button img {
        width: 4vw;
        margin-left: 3vw;
    }

    .divimg {
        width: 100%;
        height: 50%;
        align-items: start;

    }

    .divimg img {
        width: 95%;
    }












    .tela2 h2 {
        font-size: 8vw;
        text-align: center;
        padding-top: 5%;
        width: 80%;

    }

    .tela2 {
        flex-flow: column wrap;
        align-items: center;
        padding-bottom: 15%;
    }

    .tela2 .principal {
        width: 100%;
        display: flex;
        justify-content: center;

    }

    .tela2 .principal img {
        width: 120%;
    }

    .divfundo {
        position: absolute;
        width: 87%;
        height: max-content;
        top: 9.7%;
        left: 7%;
        z-index: -1;

    }

    .divfundo video {
        width: 100%;
    }


    .tela2 .menu {
        width: 100%;
        display: flex;
        gap: 0;
        flex-flow: row nowrap;
        justify-content: center;
        gap: 3%;
        margin-top: 5%;
    }

    .tela2 .menu .quamenu {
        width: 28%;

    }

    .tela2 .menu p {
        font-size: 4vw;
    }

    .tela2 button {
        width: 63vw;
        padding: 2% 0;
        height: 0%;
        font-size: 5vw;
        border-radius: 3vw;
        margin-top: 2%;
    }















    .tela3 h2 {
        font-size: 8vw;
    }

    .tela3 h2 span {
        font-size: 7vw;
    }

    .tela3 .linha {
        display: flex;
        flex-flow: column wrap;
        width: 100%;
        align-items: center;
    }

    .tela3 .linha .quadrado {
        width: 85%;
        margin-bottom: 2%;
    }

    .tela3 .linha .quadrado img {
        width: 15vw;

    }

    .tela3 .linha .quadrado h3 {
        font-size: 5vw;
    }

    .tela3 .linha .quadrado p {
        font-size: 5vw;
    }












    .tela4 h2 {
        font-size: 8vw;
        margin-bottom: 15%;
        margin-top: 15%;
    }

    .tela4 h2 span {
        font-size: 7vw;
    }

    .tela4 .subdiv .coluna {
        width: 70%;
    }

    .subdiv .coluna .retangulo .texto {
        width: 100%;
    }

    .subdiv .coluna .retangulo h3 {
        font-size: 5vw;

    }

    .subdiv .coluna .retangulo p {
        font-size: 5vw;


    }

    .subdiv .coluna .retangulo img {
        width: 15vw;
        height: 15vw;

    }


    .subdiv .coluna .retangulo {
        margin-bottom: 10%;
        padding: 8% 8%;

    }


    .linhadotempo .bola {
        width: 10vw;
        height: 10vw;
        font-size: 5vw;
    }

    .subdiv .linhadotempo {
        width: 17vw;
        gap: 21%;
    }

    .linhadotempo .linha {
        left: 5vw
    }













    .tela5 h2 {
        font-size: 7vw;
    }

    .tela5 span {
        font-size: 8vw;
    }

    .tela5 .bloco .quest-topo p {
        font-size: 5vw;
    }

    .tela5 .bloco .quest-topo img {
        width: 5vw;
        height: 5vw;
    }

    .tela5 .bloco .resposta p {
        font-size: 5vw;
    }

    .tela5 .bloco .quest {
        padding: 4% 0;
        ;
    }










    .tela6 h2 {
        font-size: 7vw;
        width: 80%;
    }

    .tela6 h2 span {
        font-size: 8vw;
    }

    .tela6 button{
        font-size: 5vw ;
    }









}