*{
    margin: 0; 
    border: 0; 
    padding: 0;
    box-sizing: border-box;
    font-family: "Sen", sans-serif;
}

/*INÍCIO CONFIGURAÇÕES GERAIS/REUTILIZÁVEIS*/
:root{
    --preto: #00000a;
    --grafite: #212121;
    --cinza: #bfbfbf;
    --branco: #fdfdfd;
    --azul: #11c1f7;
    --azul-escuro: #0768de;
}

html{
    scroll-behavior: smooth;
}

.largura-maxima{
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding-left: 25px;
    padding-right: 25px;
}

p, a, li{
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--branco);
    list-style: none;
}

main,
footer{
    position: relative;
    top: 62px;
    scroll-margin-top: 100px;
}

.texto-azul{
    color: var(--azul);
    background: linear-gradient(90deg, var(--azul), var(--azul-escuro));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.titulo-secao{
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    color: var(--azul);
    font-size: 2.3em;
    font-weight: 600;
    margin-bottom: 60px;
}

.container-diferenciais .titulo-secao{
    margin-bottom: 40px;
}
/*FIM CONFIGURAÇÕES GERAIS/REUTILIZÁVEIS*/

/*INÍCIO CONFIGURAÇÕES SEÇÃO HEADER*/
.container-topo{
    width: 100%;
    background-color: var(--preto);
    box-shadow: 0 0 6px 1px #3a3a3a;
    position: fixed;
    z-index: 1;
}

.subcont-topo{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.link-topo{
    display: flex;
}

.logo-topo{
    width: 130px;
}

.lista-menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.links-menu{
    width: 100%;
    font-weight: 600;
    text-decoration: none;
    color: var(--branco);
}

.links-menu:hover{
    color: var(--azul);
}

.contato{
    background: linear-gradient(90deg, var(--azul), var(--azul-escuro));
    padding: 5px 15px;
    border-radius: 8px;
}

.contato:hover{
    color: var(--branco);
    font-size: 1.13em;
}

/*Estilos do menu hamburguer (somente mobile)*/
.menu-toggle{
    display: none; /*Esconde o checkbox*/
}

.icone-menu{
    display: none;
    font-size: 34px;
    cursor: pointer;
    user-select: none;
    color: var(--branco);
}
/*FIM CONFIGURAÇÕES SEÇÃO HEADER*/

/*INÍCIO CONFIGURAÇÕES SEÇÃO HERO*/
.container-hero{
    width: 100%;
    padding: 60px 0 70px 0;
    background: linear-gradient(180deg, #00000ac2, #00000af1), url('../img/Imagem-fundo3.png');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

.subcont-hero{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px
}

.texto-hero{
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    text-align: center;
}

h1{
    font-size: 3.5em;
    color: var(--branco);
}

.subtitulo-hero{
    max-width: 550px;
    font-size: 1.3em;
    font-weight: normal;
    line-height: 1.5;
    color: var(--branco);
}

.btn-ca{
    max-width: 400px;
    text-decoration: none;
    text-align: center;
    font-size: 1.5em;
    font-weight: 500;
    color: var(--branco);
    background: linear-gradient(90deg, var(--azul), var(--azul-escuro));
    padding: 0px 50px;
    border-radius: 15px 5px;
    margin-top: 10px;
}

.btn-ca:hover{
    font-size: 1.54em;
}
/*FIM CONFIGURAÇÕES SEÇÃO HERO*/

/*INÍCIO CONFIGURAÇÕES SEÇÃO SOBRE*/
.container-sobre{
    width: 100;
    background-color: var(--preto);
    padding-top: 70px;
    scroll-margin-top: 40px;
}

.subcont-sobre{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.textos-sobre{
    width: 100%;
    max-width: 380px;
}

.texto-sobre{
    text-align: justify;
    margin-bottom: 10px;
}

.img-sobre{
    width: 100%;
    height: 520px;
    margin-bottom: 12px;
    background-image: url('../img/Equipe-Braxti.webp');
    background-size: cover;
    border-radius: 60px 10px;
    border: 2px solid var(--azul-escuro);
}
/*FIM CONFIGURAÇÕES SEÇÃO SOBRE*/

/*INÍCIO CONFIGURAÇÕES SEÇÃO SERVIÇOS*/
.container-servicos{
    width: 100%;
    background-color: var(--preto);
    padding-top: 90px;
    scroll-margin-top: 20px;
}

.subcont-servicos{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.card-servicos{
    max-width: 300px;
    background: linear-gradient(135deg, var(--grafite), var(--preto));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    border-radius: 25px 10px;
    padding: 30px 25px;
    border: 2px solid var(--grafite);
}

.img-card{
    width: 50px;
    height: 50px;
    background-image: url('../img/Carrinho.webp');
    background-size: contain;
    background-repeat: no-repeat;
}

.card-site{
    background-image: url('../img/Ícones/Computador.svg');
}

.card-landing{
    background-image: url('../img/Ícones/Página.svg');
}

.card-loja{
    background-image: url('../img/Ícones/Carrinho.svg');
}

h3{
    font-size: 1.5em;
    color: var(--branco);
    text-align: center;
}

.texto-card{
    text-align: center;
}

.btn-card{
    text-decoration: none;
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--branco);
    background: linear-gradient(90deg, var(--azul), var(--azul-escuro));
    padding: 3px 20px;
    border-radius: 10px 5px;
    margin: 0 auto;
}

.btn-card:hover{
    font-size: 1.23em;
}
/*FIM CONFIGURAÇÕES SEÇÃO SERVIÇOS*/

/*INÍCIO CONFIGURAÇÕES SEÇÃO DIFERENCIAIS*/
.container-diferenciais{
    width: 100%;
    background-color: var(--preto);
    padding-top: 90px;
}

.subcont-diferenciais{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.lista-diferenciais{
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.itens-diferenciais{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.itens-diferenciais::before{
    content: "✓";
    color: var(--azul-escuro);
    font-weight: bold;
    font-size: 1.1em;
}
/*FIM CONFIGURAÇÕES SEÇÃO DIFERENCIAIS*/

/*INÍCIO CONFIGURAÇÕES SEÇÃO PORTFÓLIO*/
.container-portfolio{
    width: 100%;
    background-color: var(--preto);
    padding-top: 90px;
    padding-bottom: 90px;
    scroll-margin-top: 20px;
}

.subcont-portfolio{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.card-portfolio{
    width: 100%;
    border: 2px solid var(--branco);
    border-radius: 35px 15px;
}

.container-img{
    width: 100%;
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 32px 12px 0 0;
    padding: 30px;
    background: linear-gradient(0deg, #f780a9, var(--branco), var(--branco));
}

.img-clinica{
    background: linear-gradient(0deg, #0fd9e0, var(--branco), var(--branco));
}

.img-portfolio{
    width: 85%;
    position: relative;
    right: 15px;
}

.texto-portfolio{
    width: 100%;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

h4{
    color: var(--branco);
    margin-top: 5px;
}

.link-portfolio{
    text-decoration: none;
    color: var(--azul);
    font-weight: 600;
}
/*FIM CONFIGURAÇÕES SEÇÃO PORTFÓLIO*/

/*INÍCIO CONFIGURAÇÕES SEÇÃO CTA FINAL*/
.container-cta{
    width: 100%;
    background: linear-gradient(180deg, #0768dede, #11c1f7de), url('../img/Imagem-fundo3.png');
    background-position: bottom center;
    padding: 30px 0 35px 0;
}

.subcont-cta{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.container-cta .titulo-secao{
    color: var(--branco);
    margin-bottom: 30px;
}

.texto-cta{
    color: var(--branco);
    font-size: 1.3em;
    font-weight: 600;
}

.subcont-cta .btn-ca{
    background: linear-gradient(90deg, var(--grafite), var(--preto));
}
/*FIM CONFIGURAÇÕES SEÇÃO CTA FINAL*/

/*INÍCIO CONFIGURAÇÕES SEÇÃO RODAPÉ*/
.container-rodape{
    width: 100%;
    background-color: var(--preto);
    padding: 100px 0 25px 0;
}

.subcont-rodape{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 150px;
}

.contatos-rodape{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 8px;
}

.logo-rodape{
    width: 180px;
}

.contatos{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.contatos::before{
    content: "";
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.whats::before{
    background-image: url('../img/Ícones/Whats.svg');
}

.insta::before{
    background-image: url('../img/Ícones/Insta.svg');
}

.email::before{
    background-image: url('../img/Ícones/Email.svg');
    margin-top: 2px;
}

h6{
    font-size: 0.9em;
    color: var(--cinza);
    text-align: center;
    font-weight: normal;
    margin-top: 50px;
}
/*FIM CONFIGURAÇÕES SEÇÃO RODAPÉ*/


/*INÍCIO MEDIA QUERIES (MAX 900PX)*/
@media (max-width: 900px){
    .subcont-sobre{
        flex-direction: column;
        gap: 15px;
    }

    .textos-sobre{
        max-width: 650px;
    }

    .img-sobre{
        max-width: 650px;
        height: 400px;
        margin-bottom: 0;
        background-position: center bottom;
    }

    .subcont-servicos{
        flex-direction: column;
        gap: 40px;
    }

    .card-servicos{
        width: 100%;
        max-width: 650px;
    }

    .texto-card{
        max-width: 450px;
    }

    .btn-card{
        padding: 3px 40px;
    }
}
/*INÍCIO MEDIA QUERIES (MAX 900PX)*/

/*INÍCIO MEDIA QUERIES (MAX 767PX)*/
@media (max-width: 767px){
    .icone-menu{
        display: block; /*Mostra ícone do menu*/
    }

    /* Esconde menu por padrão */
    .lista-menu{
        flex-direction: column;
        width: 100%;
        background: var(--preto);
        position: absolute;
        top: 100%;
        left: 0;
        border-top: 1px solid #2e2e2e;
        gap: 0;

        /*Animação*/
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
    }

    .lista-menu li{
        width: 100%;
        text-align: center;
        border-bottom: 2px solid #2e2e2e;
        padding: 16px 0;
    }

    .links-menu{
        padding: 6px 40px;
    }

    /* Quando marcado, expande */
    .menu-toggle:checked ~ .lista-menu{
        max-height: 500px; /*valor maior que altura dos itens*/
        transition: max-height 0.4s ease-in;
    }

    .container-hero{
        background-position: center;
    }

    .container-hero{
        width: 100%;
        padding: 60px 0 70px 0;
        background: linear-gradient(180deg, #00000aab, #00000af1), url('../img/Imagem-fundo2.png');
        background-size: cover;
        background-position: center;
    }

    .img-sobre{
        height: 350px;
    }

    .subcont-portfolio{
        flex-direction: column;
        gap: 40px;
    }

    .card-servicos{
        padding: 50px 25px;
        gap: 30px;
    }

    .subcont-rodape{
        flex-direction: column;
        gap: 50px;
    }

    .logo-rodape{
        width: 160px;
    }

    .contatos-rodape{
        align-items: center;
    }
}

@media (max-width: 480px){
    .titulo-secao{
        font-size: 2.1em;
    }

    .btn-ca{
        width: 100%;
        padding: 0px 10px;
    }

    h1{
        max-width: 340px;
    }

    .subtitulo-hero{
        max-width: 500px;
        font-size: 1.2em;
    }

    .img-hero{
        background-position: left top;
    }

    .container-sobre{
        padding-top: 50px;
        scroll-margin-top: 60px;
    }

    .texto-card{
        max-width: 92%;
    }

    .img-portfolio{
        width: 100%;
        position: relative;
        right: 10px;
    }

    .container-cta .titulo-secao{
        font-size: 1.9em;
    }

    h6{
        font-size: 0.8em;
    }
}