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

* {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    scroll-behavior: smooth;
    text-decoration: none;
}



:root {
    --fundo--secundario: rgba(15, 15, 15, 0.658);
    --titulo: 6.5vh;
    --texto: 2vh;
    --azul--neon: #a9dfff;
    --texto-color: #8daec3;
}

strong {
    color: var(--azul--neon)
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: black;
    z-index: 1000;
    padding: 10px 0;
}


body {
    background-color: black;
    color: white;
    padding-top: 100px;
}

hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, #00eaff81, #0066ff96);
    box-shadow: 0 0 2px #00eaff, 0 0 15px #00eaff;
}

a {
    text-decoration: none;
    color: inherit;
}

.blocoLogo {
    display: flex;
    align-items: center;
    padding-left: 20vh;
}

.logoSed {
    width: 15%;
}





.topo {
    display: grid;
    grid-template-columns: auto 40%;
    flex-direction: row;
}

.topoLinks {
    display: grid;
    flex-direction: row;
    grid-template-columns: auto auto auto auto auto;
    align-items: center;
    text-align: center;
}

.topoLinks a {
    text-decoration: none;
    color: white;
}

.links {
    transition: transform 0.5s ease-in-out;
}

.links:hover {
    transform: translateY(12px)
}

.BotaoComecar {
    padding: 0.5vh;
    background-color: var(--azul--neon);
    border-radius: 2vh;
    border: 1px solid transparent;
    transition: transform 0.3s ease-in-out
}

.BotaoComecar:hover {
    transform: translateY(-10px);
}

.BotaoComecar span {
    color: black;
}

.linkComecar {
    font-weight: 500;
}

.heroSection {
    display: grid;
    grid-template-columns: 60% 40%;
    height: 90vh;
    padding: 0 5vw;
}

.heroEsquerda {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.heroTextosEsquerda {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vh;
}

.heroTextosEsquerda h1 {
    font-size: var(--titulo);
    text-align: center;
}

.heroTextosEsquerda p {
    font-size: var(--texto);
    text-align: center;
    width: 80%;
    color: var(--texto-color);
}

.heroBotoes {
    display: flex;
    flex-direction: row;
    gap: 2vh;
    align-items: center;
    justify-content: center;
}

.botaoContratar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1vh;
    background-color: var(--azul--neon);
    padding: 2vh 4vh;
    border-radius: 3vh;
    color: black;
    box-shadow: 0 0 5px #4dd0ff33;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease-in-out;
}

.botaoContratar a {
    font-weight: 600;
}

.botaoContratar:hover {
    border-color: #aeefff;
    box-shadow: 0 0 12px #4dd0ffaa, 0 0 30px #4dd0ff55;
    transform: translateY(3px);
}

.botaoSaiba {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease-in-out, border 0.3s ease-in-out, box-shadow 0.3s ease;
    border: 1px solid none;
    padding: 2vh 4vh;
    border-radius: 3vh;
}

#saibaMaisBotao {
    color: white;
}

.botaoSaiba a {
    font-weight: 600;
}

.botaoSaiba:hover {
    transform: translateX(5px);
    border: 1px solid var(--azul--neon);
    box-shadow: 0 0 3px #4dd0ffaa, 0 0 30px #4dd0ff55;
}


.blocoDireita {
    display: flex;
    align-items: center;
    justify-content: center;
}


.orgBlocosSinos {
    display: flex;
    flex-direction: column;
    gap: 2vh;
    padding: 6vh 6vh;
    height: fit-content;
    justify-content: center;
    background-color: var(--fundo--secundario);
    border-radius: 1vh;
    border: 1px solid var(--azul--neon);
    box-shadow: 0 0 10px #4dd0ffaa, 0 0 50px #4dd0ff55;
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out, ;
}

.orgBlocosSinos:hover {
    transform: scale(1.01);
    box-shadow: 0 0 10px #1c4555aa, 0 0 50px #2c789493;
}

.orgBlocosSinos:hover #blocoSinosUm {
    transform: translateY(-10px);
}

.orgBlocosSinos:hover #blocoSinosDois {
    transform: translateY(0px);
}

.orgBlocosSinos:hover #blocoSinosTres {
    transform: translateY(10px);
}




.blocoSinos {
    display: flex;
    flex-direction: row;
    align-items: top;
    gap: 2vh;
    background-color: black;
    border-radius: 1vh;
    padding: 2vh 3vh;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.blocoSinos:hover {
    background-color: rgb(10, 10, 10);
}


#blocoSinosUm {
    transition: transform 0.3s ease-in-out;
    background-color: 0.3s ease-in-out;
}

#blocoSinosDois {
    transition: transform 0.3s ease-in-out;
    background-color: 0.3s ease-in-out;
}

#blocoSinosTres {
    transition: transform 0.3s ease-in-out;
    background-color: 0.3s ease-in-out;
}

#iconsino {
    width: 4vh;
    height: 4vh;
    color: var(--azul--neon);
    transition: box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.orgBlocosSinos:hover #iconsino {
    filter: drop-shadow(0 0 2px #eeff00) drop-shadow(0 0 4px #c8ff00);
    color: white;


}

.escolherSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--fundo--secundario);
    height: 70vh;

}

.escolherSection h1 {
    font-size: var(--titulo);
}

.escolherSection p {
    font-size: var(--texto);
    color: var(--texto-color);

}

.linhaEscolher {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    margin-top: 5vh;

}

.bloquinhosEscolher {
    display: flex;
    flex-direction: column;
    padding: 2vh;
    border-radius: 1vh;
    border: 2px solid rgba(0, 247, 255, 0.281);
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
    gap: 2vh;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.bloquinhosEscolher:hover {
    transform: scale(1.02);
    border-color: var(--azul--neon);
    background-color: rgb(20, 20, 20)
}

.bloquinhosEscolher:hover .divIconEscolher {
    background-color: var(--azul--neon)
}

.bloquinhosEscolher:hover .iconDivEscolher {
    color: black;
}



.divIconEscolher {
    display: flex;
    align-items: center;
    background-color: rgb(14, 18, 29);
    width: max-content;
    border-radius: 2vh;
    padding: 1vh;
    transition: background-color ease-in-out 0.3s;
}

.iconDivEscolher {
    transition: color 0.3s ease-in-out;
}


.funcionaSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 70vh;
    justify-content: center;
    gap: 1vh;
}

.funcionaSection h1 {
    font-size: var(--titulo);
}

.funcionaSection p {
    font-size: var(--texto);
    color: var(--texto-color);
}



.orgBlocosFunciona {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    justify-content: center;
    align-items: center;
    gap: 2vh;
    margin-top: 7vh;
}

.blocosFunciona {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2vh;
}

.blocosFunciona p {

    font-size: var(--texto);

}

.bolaNumero {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--azul--neon);
    width: 9vh;
    height: 9vh;
    border-radius: 50%;
    font-weight: 700;
    color: black;
    font-size: 2.5vh;
    box-shadow: 0 0 10px #4dd0ff;
    transition: transform 1.5s ease-in-out;
}

.bolaNumero:hover {
    transform: rotateY(360deg);
}

.PrecoSection {
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1vh;
    background-color: var(--fundo--secundario);
    height: 70vh;
}

.PrecoSection h1 {
    font-size: var(--titulo);

}

.blocoOrganizaPreco {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 5vh;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.blocoOrganizaPreco h1 {
    font-size: 2em;
}

.blocoPreco {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--azul--neon);
    border-radius: 1vh;
    padding: 5vh 2vh;
    background-color: black;
    gap: 1rem;
}



#precoUm,
#precoTres {
    transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

#precoUm:hover .buttonContrata{
    border-color:  var(--azul--neon);
}
#precoDois:hover .buttonContrata{
    border-color:  var(--azul--neon);
}
#precoTres:hover .buttonContrata{
    border-color:  var(--azul--neon);
}

#precoUm:hover,
#precoTres:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
}

#precoDois {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
    box-shadow:
        0 0 10px rgba(173, 233, 255, 0.6),
        0 0 25px rgba(173, 233, 255, 0.3);

}

.blocoOrganizaPreco:has(#precoUm:hover) #precoDois,
.blocoOrganizaPreco:has(#precoTres:hover) #precoDois {
    transform: scale(1);
}



.blocoVerificado {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 5px;
}

.orgBlocoVerificado {
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

.perguntaSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 1vh;
    padding-bottom: 5vh
}

#textoDuvidas {
    font-size: var(--texto);
    color: var(--texto-color);
}

.perguntaSection h1 {
    font-size: var(--titulo);
}

.orgPerguntas {
    display: grid;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 2vh;
    width: 50%;
    margin-top: 5vh;
    margin-bottom: 5vh;

}

.description {
    margin-top: 1vh;
    padding: 1.5vh;
    background-color: rgba(0, 200, 255, 0.05);
    border-left: 2px solid var(--azul--neon);
    border-radius: 0.5vh;
    color: var(--texto-color);
    font-size: var(--texto);
    line-height: 1.5;
}


.quadradoPerguntas {
    display: flex;
    padding: 1vh;
    background-color: var(--fundo--secundario);
    transition: background-color 0.3s ease-in-out;
    border-radius: 1vh;

}

.quadradoPerguntas:hover {
    background-color: rgba(9, 71, 71, 0.411);
}

.WhatsAppSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--fundo--secundario);
    height: 50vh;
    justify-content: center;
    gap: 1vh;
}

.WhatsAppSection h1 {
    font-size: var(--titulo);
}

.WhatsAppSection p {
    font-size: var(--texto);
    color: var(--texto-color);
}

.blocoComecar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1vh;
    padding: 2vh 2vh;
    background-color: var(--azul--neon);
    border-radius: 2vh;
    color: black;
    margin-top: 2vh;
    transition: transform 0.3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.blocoComecar:hover {
    transform: translateY(10px) translateX(10px);
}

.balaoConversa {
    transition: transform 0.3s ease-in-out, color 0.15s ease-in-out;

}

.blocoComecar p {
    color: black;
    font-style: bold;
}

.blocoComecar:hover .balaoConversa {
    color: var(--azul--neon)
}

.setaDireita {
    transition: transform 0.3s ease-in-out, color 0.15s ease-in-out;
    color: var(--azul--neon);
}

.blocoComecar:hover .setaDireita {
    color: black;
}


footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 20vh;
    gap: 2vh;
}

footer p {
    font-size: x-small;
    color: rgb(172, 172, 172);
    font-weight: 300;
}

footer a {
    font-size: x-small;
    color: rgb(172, 172, 172);
    font-weight: 300;
}

.linksRapidosSection {
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    align-items: start;
    justify-content: center;
    gap: 3vh;

}

#textoFooter {
    width: 100%;
    text-align: center;
}

#supFooter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vh;
    justify-content: center;
}

h4 {
    text-align: center;
}

#messagemIconFooter {
    width: 2vh;
    height: 2vh;
}

.quadradosFooter {
    display: flex;
    flex-direction: column;
    gap: 2vh;

}

.infQuadradoFooter {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
}

.Direitos {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    gap: 2vh;
    align-items: center;
}

.Direitos hr {
    border: none;
    height: 0.4px;
    background: linear-gradient(90deg, #82858a96, #82858a96);
    box-shadow: 0 0 2px #000000, 0 0 15px #000000;
    width: 50%;
}

.buttonContrata {
    display: flex;
    width: 50%;
    padding: 0.5rem;
    justify-content: center;
    border-radius: 8px;
    background-color: none;
    align-items: center;
    transition: border-color 0.3s ease, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    border: 1px solid transparent;
    font-weight: 450;
}

.buttonContrata:hover {
    background-color: var(--azul--neon) ;
    color: #000000;
    
}

.setaContrata {
    animation: flutuar 1s ease-in-out infinite;
    display: none;
}

.buttonArmazena {
    display: flex;
    justify-content: center;
}

@keyframes flutuar {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }
}








@media (max-width: 576px) {
    :root {
        --titulo: 4vh;
        --texto: 1.8vh;
    }

    .email {
        width: 100%;
        word-break: break-all;
        font-size: 1.6vh;
    }

    #textoFooter {
        display: none;
    }

    body {
        padding-top: 80px;
    }

    /* HEADER */


    .topo {
        grid-template-columns: 1fr;
        gap: 1vh;
    }

    .blocoLogo {
        padding-left: 5vw;
        justify-content: center;
    }

    .logoSed {
        width: 20%;
    }

    .topoLinks {
        display: none;
    }

    .links {
        font-size: 1.8vh;
    }

    .links:hover {
        transform: translateY(5px);
    }

    .BotaoComecar {
        padding: 1vh 3vh;
        width: 100%;
        text-align: center;
    }

    /* HERO SECTION */
    .heroSection {
        grid-template-columns: 1fr;
        height: auto;
        padding: 3vh 5vw;
        gap: 4vh;
    }

    .heroTextosEsquerda h1 {
        font-size: 3.5vh;
        width: 100%;
    }

    .heroTextosEsquerda p {
        width: 100%;
        font-size: 2vh;
    }

    .heroBotoes {
        flex-direction: column;
        width: 100%;
        gap: 2vh;
    }

    .botaoContratar,
    .botaoSaiba {

        justify-content: center;
        padding: 2vh 3vh;
    }

    .botaoContratar:hover,
    .botaoSaiba:hover {
        transform: scale(1.02);
    }

    /* BLOCOS DE NOTIFICAÇÕES */
    .blocoDireita {
        justify-content: center;
        width: 100%;
    }

    .orgBlocosSinos {
        padding: 3vh;
        width: 100%;
        gap: 1.5vh;
    }

    .blocoSinos {
        padding: 1.5vh 2vh;
        gap: 1.5vh;
    }

    .blocoSinos h3 {
        font-size: 1.8vh;
    }

    .blocoSinos p {
        font-size: 1.6vh;
    }

    #iconsino {
        width: 3vh;
        height: 3vh;
    }

    /* ESCOLHER SECTION */
    .escolherSection {
        height: auto;
        padding: 5vh 5vw;
    }

    .escolherSection h1 {
        font-size: 3.5vh;
        text-align: center;
    }

    .linhaEscolher {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 2vh;
        margin-top: 3vh;
    }

    .bloquinhosEscolher {
        padding: 3vh 2vh;
    }

    /* FUNCIONA SECTION */
    .funcionaSection {
        height: auto;
        padding: 5vh 5vw;
    }

    .funcionaSection h1 {
        font-size: 3.5vh;
        text-align: center;
    }

    .orgBlocosFunciona {
        grid-template-columns: 1fr;
        gap: 3vh;
        margin-top: 4vh;
        width: 100%;
    }

    .blocosFunciona {
        gap: 2vh;
    }

    .bolaNumero {
        width: 8vh;
        height: 8vh;
        font-size: 3vh;
    }

    /* PREÇO SECTION */
    .PrecoSection {
        height: auto;
        padding: 5vh 5vw;
    }

    .PrecoSection h1 {
        font-size: 3.5vh;
    }

    .blocoOrganizaPreco {
        grid-template-columns: 1fr;
        gap: 3vh;
        margin-top: 3vh;
        margin-bottom: 3vh;
    }

    .blocoPreco {
        padding: 3vh 2vh;
    }

    #precoDois {
        transform: scale(1);
    }

 

    #precoUm:hover,
    #precoTres:hover {
        transform: scale(1.02) ;
        
    }

    .blocoOrganizaPreco:has(#precoUm:hover) #precoDois,
    .blocoOrganizaPreco:has(#precoTres:hover) #precoDois {
        transform: scale(1);
    }

    /* PERGUNTAS SECTION */
    .perguntaSection {
        height: auto;
        padding: 5vh 5vw;
    }

    .perguntaSection h1 {
        font-size: 3.5vh;
        text-align: center;
    }

    .orgPerguntas {
        width: 100%;
        margin-top: 3vh;
        margin-bottom: 3vh;
    }

    .quadradoPerguntas {
        padding: 2vh;
    }

    .description {
        font-size: 1.6vh;
    }

    /* WHATSAPP SECTION */
    .WhatsAppSection {
        height: auto;
        padding: 5vh 5vw;
    }

    .WhatsAppSection h1 {
        font-size: 3.5vh;
        text-align: center;
    }

    .WhatsAppSection p {
        text-align: center;
    }

    .blocoComecar {
        flex-direction: row;
        padding: 2vh 3vh;
        gap: 1vh;
        flex-wrap: wrap;
        justify-content: center;
    }

    .blocoComecar:hover {
        transform: scale(1.02);
    }

    .blocoComecar span {
        font-size: 1.8vh;
    }

    /* FOOTER */
    footer {
        height: auto;
        padding: 5vh 5vw;
    }

    .linksRapidosSection {

        gap: 3vh;
        width: 100%;
    }

    .quadradosFooter {
        text-align: center;
        align-items: center;
    }

    .infQuadradoFooter {
        align-items: center;
    }

    #supFooter {
        justify-content: center;
    }

    .Direitos hr {
        width: 80%;
    }

    .Direitos p {
        text-align: center;
        padding: 0 2vh;
    }
}

@media (min-width: 577px) and (max-width: 1024px) {
    :root {
        --titulo: 5vh;
        --texto: 2vh;
    }

    body {
        padding-top: 90px;
    }

    /* HEADER */
    .topo {
        grid-template-columns: 50% 50%;
        padding: 0 3vw;
    }

    .blocoLogo {
        padding-left: 5vh;
    }

    .logoSed {
        width: 25%;
    }

    .topoLinks {
        grid-template-columns: repeat(5, 1fr);
        gap: 1vh;
        font-size: 1.6vh;
    }

    .BotaoComecar {
        padding: 1vh 2vh;
    }

    /* HERO SECTION */
    .heroSection {
        grid-template-columns: 1fr;
        height: auto;
        padding: 5vh 5vw;
        gap: 5vh;
    }

    .heroTextosEsquerda h1 {
        font-size: 4.5vh;
    }

    .heroTextosEsquerda p {
        width: 90%;
    }

    .heroBotoes {
        flex-direction: row;
        gap: 2vh;
    }

    /* BLOCOS DIREITA */
    .blocoDireita {
        justify-content: center;
    }

    .orgBlocosSinos {
        padding: 4vh;
        width: 80%;
    }

    /* ESCOLHER SECTION */
    .escolherSection {
        height: auto;
        padding: 6vh 5vw;
    }

    .linhaEscolher {
        grid-template-columns: repeat(2, 1fr);
        gap: 3vh;
    }

    .linhaEscolher .bloquinhosEscolher:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }

    /* FUNCIONA SECTION */
    .funcionaSection {
        height: auto;
        padding: 6vh 5vw;
    }

    .orgBlocosFunciona {
        grid-template-columns: repeat(3, 1fr);
        gap: 2vh;
    }

    /* PREÇO SECTION */
    .PrecoSection {
        height: auto;
        padding: 6vh 5vw;
    }

    .blocoOrganizaPreco {
        grid-template-columns: repeat(3, 1fr);
        gap: 3vh;
    }

    .blocoPreco {
        padding: 3vh 2vh;
    }

    /* PERGUNTAS SECTION */
    .perguntaSection {
        height: auto;
        padding: 6vh 5vw;
    }

    .orgPerguntas {
        width: 80%;
    }

    /* WHATSAPP SECTION */
    .WhatsAppSection {
        height: auto;
        padding: 6vh 5vw;
    }

    /* FOOTER */
    footer {
        height: auto;
        padding: 5vh 5vw;
    }

    .linksRapidosSection {
        grid-template-columns: repeat(2, 1fr);
        gap: 4vh;

    }

    .Direitos hr {
        width: 70%;
    }
}