@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?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 de estilos para garantir consistência entre navegadores */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura total */
}

/* Configurações base para o documento */
html {
    font-family: 'Poppins', sans-serif;
    height: 100%;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Permite que o body preencha a tela */
}
a {
    text-decoration: none;
}
/* Layout principal da página, usando Flexbox para o Sticky Footer */
body {
    display: flex; /* Define o body como um contêiner flex */
    flex-direction: column; /* Organiza os itens (header, main, footer) verticalmente */
    min-height: 100vh; /* Garante que o body tenha pelo menos a altura da viewport */
    margin: 0; /* Garante que não haja margem padrão no body */
}


/* ====== HEADER ====== */
.header {
    display: flex;
    justify-content: center;
    gap: 12px;
    background-color: #16365C;
    width: 100%;
    height: 200px;
    padding: 30px;
}
.header_logo_wrap {
    max-width: 140px;
    margin-top: 60px;
}
.header_logo_wrap > img {
    width: 100%;
}

.header_titulo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    gap: 40px;
    text-align: right;
}

.btn_home {
    color: White;
    font-weight: bold;
}
.btn_home > img {
    width: 16px;
}

.header_titulo_titulo {
    color: white;
}

/* Responsividade do Header */
@media(min-width: 768px) {
    .header {
        gap: 60px; /* Aumenta o espaçamento entre os itens em telas maiores */
    }
}
@media(max-width:567px){
    .header_titulo_titulo{
        font-size: 17px; /* Reduz o tamanho da fonte do título em telas pequenas */
    }
}

/* ====== TÍTULO DA PÁGINA ====== */
.titulo_pagina {
    position: relative; /* Define o contexto de posicionamento para o fundo cinza */
    width: 100%;
    margin: 60px 0 30px 0;
}
.titulo_pagina > h2 {
    width: 100%;
    color: #16365C;
    font-weight: 700;
    text-align: center;
}
/* Fundo cinza do título */
.titulo_pagina > .titulo_pagina_bg {
    position: absolute; /* Posição absoluta em relação ao .titulo_pagina */
    left: 0; /* Alinha o fundo com a borda esquerda do seu contêiner pai */
    top: 0;
    z-index: -1; /* Envia o fundo para trás do texto h2 */
    width: 100%; /* Define a largura como 100% do contêiner .titulo_pagina */
    height: 100%;
    background-color: #BEBDBB;
    border-radius: 0 40px 40px 0;
}
/* Responsividade do Fundo Cinza */
@media(min-width: 768px) {
    .titulo_pagina > .titulo_pagina_bg {
        width: 80%; /* Reduz a largura para 80% em telas maiores, criando o efeito de barra parcial */
    }
}


/* ====== TÍTULO DO CONTEÚDO ====== */
.conteudo > .conteudo_titulo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    color: #16365C;
    margin-bottom: 30px;
}
.conteudo_titulo > .conteudo_titulo_linha {
    width: 100px;
    height: 0;
    color: #BEBDBB;
}
.conteudo > .conteudo_titulo > .conteudo_titulo_txt {
    text-align: center;
}

@media(max-width:576px){
    #conteudo-pagamento{
        font-size: 14px;
    }
    .conteudo > .conteudo_titulo > .conteudo_titulo_txt {
        font-size:14px;
    }
}



/* ====== MAIN ====== */
main {
    flex-grow: 1; /* Permite que o main se expanda e preencha o espaço restante */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.main_principal{
    height: 100%;
}


/* ====== FOOTER ====== */
footer {
    padding: 12px 0;
    background-color: #16365C;
    height: 46px;
   
}
footer > a {
    text-decoration: none;
    display: block;
    width: fit-content;
    margin: 0 auto;
    color: white;
    font-weight: 300; /* Light */
    font-size: 14px;
    transition: 150ms ease-in-out;
}
footer > a:hover {
    font-weight: 400; /* Regular */
    transform: scale(1.01);
}

/* ================== PÁGINA INDEX ================== */
#bg_main {
    background-image: url('../imagens/fundolandingpage_com_degrade.png');
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
    width: 100%;
}
#txt_principal {
    display: block;
    width: 270px;
    margin: 0 auto 24px auto;
}
.txt_main {
    z-index: 999;
    font-size: 20px;
    color: White;
    text-align: center;
    font-style: italic;
    font-weight: 300; /* Light */
}
.btn {
    z-index: 999;
    display: inline-block;
    margin: 10px auto 100px auto;
    background-color: #009EDD;
    color: white;
    text-align: center;
    width: 200px;
    padding: 4px;
    border-radius: 20px;
    transition: 150ms ease-in-out;
}
.btn:hover {
    transform: scale(1.1);
    border: 2px solid white;
}
#degrade_main {
    position: absolute;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    width: 100%;
    height: 100%;
}
/* responsividade pra celular */
@media(max-width:576px){
    .txt_main {
      font-size:15px;
    }
    .btn-continuar,.btn-Limpar{
        width:120px;
    }

}

/* ================== PÁGINA TIPO DOCUMENTO ================== */
.conteudo_opcoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.conteudo_opcoes > .tipo_carteira {
    width: 220px;
    height: 240px;
    border: 2px solid #BEBDBB;
    border-radius:  20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
}
.tipo_carteira > .tipo_carteira_icone_wrapper {
    width: 80px;
    height: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tipo_carteira_icone_wrapper > img {
    width: 100%;
}
.tipo_carteira > label {
    text-align: center;
}
/* Novo botão para a página de tipo de documento */
.btn-continuar {
    display: block;
    width: 200px;
    padding: 8px 0;
    margin: 40px auto; /* Adiciona margem superior e centraliza */
    background-color: #009EDD;
    color: white;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #009EDD;
    transition: 150ms ease-in-out;
    gap:20px;
}
.btn-continuar:hover {
    transform: scale(1.1);
    border: 2px solid white;
}
/* Ajuste para centralizar o conteúdo do main */
main > .conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    padding: 0 20px;
}
/* ================== PÁGINA DADOS PESSOAIS PASSO 1 ================== */

#nomestudante {
    width: 66%; 
}

#nrocpf {
    width: calc(35% - 12px);
}

#nomestudante-pix {
    width: 60%; 
}

#nrocpf-pix {
    width: calc(40% - 12px);
}

#desemail {
    width: 66%;
}

#telcelular {
    width: calc(35% - 12px); 
}

@media(max-width: 576px) {
    #nomestudante,
    #nrocpf,
    #desemail,
    #telcelular {
        width: 98%; 
    }
}

@media(max-width: 576px) {
    #nomestudante-pix,
    #nrocpf-pix {
        width: 98%; 
    }
}
.input_form-p1:focus {
    outline: none;
}
.section-btn{
    display: flex;
    padding-left:18%;
    padding-right:18%;
    gap:13px
}
.campos-p1 {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    justify-content: center;
    
}
.campos-p1:nth-child(1) {
    flex-wrap: wrap;
}
.campos-p1 > .input_form-p1 {
    height: 55px;
    width: 100%;
    border: 2px solid #BEBDBB;
    background-color: white;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600; /* Semi Bold */
    color: #929292;
    padding: 12px;
}
.campos-p1 > .input_form-p1::placeholder {
    color: #929292;
}
/* ================== PÁGINA DADOS PESSOAIS PASSO 2 ================== */
.conteudo_dados_form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
}
.input_form:focus {
    outline: none;
}
.conteudo_dados_form_foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
/* Caixa de preview da foto */
.foto-preview {
    width: 162px;
    height: 198px;
    border-radius: 16px;
    border: 2px solid #BEBDBB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-align: center;
    color: #1E2A45;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}
.foto-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Botão estilizado */
.btn_selecionar_imagem {
    background-color: #16365C;
    border: 1px solid #16365C;
    color: white;
    padding: 8px;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: block;
}
/* Esconde o input file */
.inputFile {
    display: none;
}
/* Novo botão para a página de tipo de documento */
.btn-Limpar {
    display: block;
    width: 200px;
    padding: 8px 0;
    margin: 40px auto; /* Adiciona margem superior e centraliza */
    background-color: #fdbf20d9;
    border: 1px solid #fdbf20d9;
    color: white;
    text-align: center;
    border-radius: 20px;
    transition: 150ms ease-in-out;
    gap:20px;
}
.btn-Limpar:hover {
    transform: scale(1.1);
    border: 2px solid white;
}

.campos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    justify-content: center;
    
}
.campos:nth-child(1) {
    display: flex;
    flex-wrap: wrap;
}
.campos > .input_form {
    height: 55px;
    width: 100%;
    border: 2px solid #BEBDBB;
    background-color: white;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600; /* Semi Bold */
    color: #929292;
    padding: 12px;
}
.campos > .input_form::placeholder {
    color: #929292;
}
#inputInstituicao,
#inputCurso {
    width: 100%;
}
#btn-group{
    display:flex;
    margin-bottom:-90px;
}
#modal-content{
    display: flex;
    flex-direction: column;
    height:600px;
    width:560px;
}
/* ================== PÁGINA DADOS PESSOAIS PASSO 3 ================== */
 #nomlogradouro,
 #desbairro {
 width:calc(65% - 8px);
}
 #nrologradouro,
 #descomplemento {
 width: calc(35% - 4px);
}
@media(max-width:576px){
 #nomlogradouro,#desbairro,#nrologradouro,
 #descomplemento{
     width:80%;
}  
}
/* ================== PÁGINA DADOS PESSOAIS PASSO 4 ================== */
.conteudo_opcoes > .tipo_arquivo {
    width: 220px;
    height: 240px;
    border-radius:  20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
}
/* ================== PÁGINA CADASTRO SUCESSO ================== */
.conteudo-sucesso {
    width: 100%;
    height: 100%;
    border: 2px solid #BEBDBB;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    margin-top:10px;
}
.titulo-sucesso h2{
    color:#16365C;
    margin:20px;
}
.conteudo-sucesso> .titulo-sucesso img{
  width:25%;  
}
.conteudo-sucesso>.titulo-sucesso{
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.texto-sucesso{
    color:black;
    font-weight:400;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.rodape-sucesso{
    margin:20px;
    color:black;
    font-size:13px;
    font-weight:600;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.rodape-sucesso p{
    font-size:16px;
    font-weight:600;
}
.btn-whatsapp{
    background-color: #63b65e;
    border: 1px solid #63b65e;
    color: white;
    padding: 8px;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    display: flex;
    justify-content:center;
    align-items:center;
    width:50%;
    margin:10px;
}
.rodape-sucesso > .btn-whatsapp img{
    width:19px;
    margin:3px;
    padding:1px;
}
.rodape-sucesso > .btn-whatsapp{
    display:flex;
    justify-content:center;
    align-content:center;
    align-items:center
}
#senha-mep{
    text-align:center;
    background-color:#16365C;
    border: 3px solid white;
    border-radius: 20px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color:white;
    padding:11px;
}

/* ================== PÁGINA PAGAMENTO PIX ================== */
.conteudo_dados_form_pix {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
}


/* ================== PÁGINA STATUS PIX ================== */
.conteudo_dados_form_pix > .quadro-status-pix{
    width: 100%;
    height: 50%;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 30px;
    justify-content: space-between; 
}

.item-status {
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 30px;
}

.item-status span{
    margin:0 auto;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    color:#16365C;
}

.item-status:nth-child(even) {
    flex-direction: column-reverse;
}

.bola-status{
    justify-self: center;
    width: 22px;
    height: 22px;
    background-color: #929292;
    border: 3px solid #929292;
    border-radius: 60px;
}



@media(max-width:576px){
.bola-status{
    width: 22px;
    height: 22px;
    background-color: #929292;
    border: 3px solid #929292;
    border-radius: 60px;
}
.item-status span{
    margin:0 auto;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
}
.conteudo_dados_form_pix > .quadro-status-pix{
    gap:7px;
}

}
.btn-att{
    display: block;
    width: 200px;
    padding: 8px 0;
    margin: 0px auto; 
    background-color: #16365C;
    color: white;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #16365C;
    transition: 150ms ease-in-out;
    gap:20px;
}

#bola-cadastro{
    background-color:#00ff00;
    border:#00ff00 solid 1px;
}

/* ================== PÁGINA PAGAMENTO BOLETO ================== */
@media(max-width: 576px) {
    #nomestudante-boleto,
    #nrocpf-boleto,
    #desemail-boleto,
    #dtcnascimentobase-boleto {
        width: 98%; 
    }
}

.campos-boleto {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    justify-content: center;
    
}
.campos-boleto:nth-child(1) {
    flex-wrap: wrap;
}
.campos-boleto > .input_form-boleto {
    height: 55px;
    border: 2px solid #BEBDBB;
    background-color: white;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600; 
    color: #929292;
    padding: 12px;
    gap:20px;
}
.campos-boleto > .input_form-boleto::placeholder {
    color: #929292;
}
#nomestudante-boleto,#desemail-boleto{
    width:64%;
}
#nrocpf-boleto,#dtcnascimentobase-boleto{
    width:35%;
}
@media(max-width: 576px){
#nomestudante-boleto,#desemail-boleto{
    width:100%;
}
#nrocpf-boleto,#dtcnascimentobase-boleto{
    width:100%;
}
}



@media(max-width: 576px){
  .conteudo-sucesso> .titulo-sucesso img{
  width:15%;  
  }
  .titulo-sucesso h2{
    font-size:18px;
  }
  .rodape-sucesso > .btn-whatsapp img{
    width:18px;
    padding:1px;
  }  
  .rodape-sucesso p{
    font-size: 13px;
    font-weight:900px;
    padding:5px;
    text-align:center;
  }
  .texto-sucesso{
    font-size:12px;
    font-weight: 900;
    text-align:center;
  }
}

@media(max-width: 576px){
    .conteudo_opcoes > .tipo_carteira{
        width:29%;
        height:120px;
        font-size:12px;
    }
    .btn-continuar,.btn-Limpar{
        width:140px;
    }
    .tipo_carteira > .tipo_carteira_icone_wrapper{
        height:38%;
        width: 50%;
    }
    .campos > .input_form{
    width:80%;
    }
}
@media(max-width: 576px){
    #modal-content{
        width:345px;
        margin: 0 auto;
    }
}
@media(min-width: 576px) {
    .campos {
        justify-content: left;
    }
    .campos > .input_form {
        flex: 1;
        max-width: 100%;
    }
}
@media(min-width: 576px) {
    .campos-p1 {
        justify-content: left;
    }
    .campos-p1 > .input_form {
        flex: 1;
        max-width: 100%;
    }
}
@media (max-width: 600px) {
    .header {
        height: 200px;
    }
    #bg_main {
        padding: 10px;
    }
}
@media(min-width: 768px) {
    .campos {
        justify-content: left;
    }
}
@media(min-width: 768px) {
    .campos-p1 {
        justify-content: left;
    }
}