html {
    height:100%;
}
body {
	background-color: #FFFFFF;
	margin:0;
    height:100%;
     flex-direction: column;
    display: flex;
    align-items: center;
}
* {
    font-family: "Figtree";
    list-style: none;
}
a {
    text-decoration: none;
}
header, main, footer {
    width: 100%;
}
.button {
    display: flex;
    font-family: "Figtree";
    font-weight: 500;
    font-size: 1.40vh;
    border-radius: 100px;
    width:auto;
    color: #F87315;
    border: 1px solid #F87315;
    padding: 8px 13px;
    gap: 15px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.loading {
    width: 100%;
    max-height: 44px;
    display: flex;
    justify-content: center;
}
/* Lead */
.lead {
    z-index: 1;
    position: fixed;
    display:flex;
    background-color: rgba(0, 0, 0, 0.5);
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
}
.lead .box {
    background-color:#FFFFFF;
    display: flex;
    width: 50%;
    min-height: 10%;
    border-radius: 20px;
    padding: 2.5vh 5vh;
    flex-direction: column;
}
.lead .box h1 {
    font-size: 2.3vh;
    font-weight: 500;
    margin:0;
    margin-bottom: 26px;    
}
.lead .box .formulario {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: space-between;
}

.lead .box .formulario .grupo {
    display:flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.lead .box .checkbox-group {
    margin:0;
    width: 100%;
}
.lead .box .checkbox-group label {
    justify-content: center;
}

/* Cabeçalho */
header {
    display:flex;
    background-color: #F3F2F2;
    padding: 18.5px 5vh;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
header .logo {
    height: 3.5vh;
    width: auto;
}
main {
    display:flex;
    flex:1;
    flex-direction: column;
    align-items: center;
   /* width: 1129px; */
}

/* Barra de Navegação */
main .nav {
    width: 70%;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:0;
    margin:0 20%;
    margin-bottom: 30px;
}
main .nav li.barra {
    height:8px;
    display: flex;
    flex:1;
        background-color:#E6E6E6;
    /*background: linear-gradient(to right, #61BB5A 30%, #E6E6E6 60%);
    background-size: 300% 100%;
    background-position: 100% center;*/
}
main .nav li.halfgreen {
    background:linear-gradient(to right, #61BB5A 30%, #E6E6E6 60%);
}
main .nav li.fullgreen {
    background-color: #61BB5A;
}
main .nav li.dot {
    display: flex;
    border-color:#F87315;
    color:#F87315;
    border-radius:50%;
    height: 38px;
    width: 38px;
    border: 1px solid #F87315;
    align-items: center;
    font-size: 18px;
    justify-content: center;
}
main .nav li.dot.orange {
    background-color: #F87315;
    color: #ffffff;
}
main .nav li.dot .completo {
    display:none;
    color: #ffffff;
    width: 24px;
    height: 24px;
}
main .nav li.dot.green  {
    background-color: #61BB5A;
    border-color:#61BB5A;
}
main .nav li.dot.yellow  {
    background-color: #FFC600;
    border-color:#FFC600;
}
main .nav li.dot.green .completo, main .nav li.dot.yellow .completo {
    display:block !important;
}
main .nav li.dot.green .numeracao, main .nav li.dot.yellow .numeracao {
    display:none !important;
}

/* Conteudo Principal */
main .conteudo {
    display:none;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    margin:auto;
    margin-top: min(30px);
    margin-bottom: min(30px);
    align-items: flex-start;

}
/* Formulário */
main .conteudo .formulario {
    width: 45%;
    max-width: 567px;
    background-color: #F3F2F2;
    border-radius:20px;
    /* padding: 33px 70px; */
    box-sizing: border-box;
    
}
main .conteudo .formulario > div {
    display: flex;
    padding: 2.5vh 5vh;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
main .conteudo .formulario > div > h1 {
    font-family: 'Livvic';
    font-style: normal;
    font-weight: 500;
    font-size: 4vh;
    color: #61BB5A;
    margin-bottom: 25px;
    width: 100%;
}
main .conteudo .formulario > div > span {
    font-weight: 500;
    font-size: 1.8vh;
    margin-bottom: 25px;
    display: flex;
}
main .conteudo .formulario > div .grupo {
    display:flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}
.input-form.mid, .select-form.mid {
    width: 45%;
}
.input-form, .select-form {
    display:flex;
    width: 100%;
    flex-direction: column;
}
.input-form label, .select-form label {
    font-size: 1.6vh;
    font-weight: 500;
    width: 100%;
    margin-bottom: 13px;
    padding:0;
}
.input-form input, .select-form select {
    background-color: transparent;
    border:0;
    border-bottom:2px solid #D9D9D9;
    padding: 10px;
    font-size: 1.6vh;
    font-weight: 500;
    border-radius: 0;
}
input.borderred, select.borderred {
    border-color: tomato !important;
}
.checkbox-form:has(.borderred) {
    color: tomato !important;
}
.checkbox-form label {
    font-size: 1.2vh;
}
.input-form input::placeholder, .select-form select:invalid {
    color: #D9D9D9;
    font-family: "Figtree";
}
.select-form select:valid, .select-form option {
    color: #000;
    font-family: "Figtree";
}
.input-form input:focus {
    border-bottom: 2px solid #F87315;
    color: #F87315;
    outline:none !important;
}
.input-form span, .select-form span {
    min-height: 25px;
    font-size: 1.4vh;
    color: tomato;
    margin-left: 10px;
    display: flex;
    align-items: center;
    visibility: hidden;
}
.select-form select {
    flex:1;
}
.checkbox-group {
    display:flex;
    gap: 10px;
    flex-direction: column;
}
.checkbox-group label {
    display:flex;
    align-items: center;
    font-weight: 500;
}
.checkbox-group label input {
    margin-right: 17px;
    background-color:transparent;
    border: 1px solid #61BB5A;
    
}
.button-group {
    justify-content: space-between;
    margin-top: 23px;
    display:flex;
    flex-direction: row;
    width: 100%;
}
.button-group.single {
    display: flex;
    justify-content: center !important;
}
.button-group .button {
    max-width: 132px;
}
.button-group .button.next, .button.finaliza, .button-group .button.envialead {
    background-color: #F87315;
    color: #ffffff;
}
main .conteudo .formulario .finalizado {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
main .conteudo .formulario .finalizado h1 {
    margin:0;
    color: #F87315;
    font-size:48px;
    font-family: "Livvic";
    text-align: center;
    width: 60%;

}

main .conteudo .formulario .finalizado p {
    margin-top:0;
    font-size: 18px;
    
}
main .conteudo .formulario .finalizado p.subtitulo {
    text-align: center;
    margin-top:14px;
    font-size: 20px;
    font-weight: 500;
}
/* Tabela de Valores */
main .conteudo .right {
    width: 45%;
    max-width: 482px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
main .conteudo .mensalidade {
    display:flex;
    align-items: center;
    border: 1px solid #61BB5A;
    border-radius: 21px;
    flex-direction: column;
}
main .conteudo .mensalidade .titulo {
    display: flex;
    color: #fff;
    max-width:fit-content;
    min-height: 69px;
    border-radius: 20px;
    background-color: #61BB5A;
    padding: 16px;
    align-items: center;
}
main .conteudo .mensalidade .titulo .msg {
    font-size: 1.9vh;
    font-weight: 500;
    padding: 1.5vh;
    border-right: 2px solid #fff;
}
main .conteudo .mensalidade .titulo .valor {
    display:flex;
    flex-direction: row;
    align-items: center;
    padding: 0 29px;
}
main .conteudo .mensalidade .titulo .valor h2, main .conteudo .mensalidade .titulo .valor h3 {
    font-size: 1.8vh;
    font-weight: 500;
    margin: 0;
    
}
main .conteudo .mensalidade .titulo .valor h2 {
    margin-top: 12px;
    margin-right: 5px;
    align-self: flex-start;
}
main .conteudo .mensalidade .titulo .valor h3 {
    margin-left: 5px;
    align-self: flex-end;
    margin-bottom: 12px;
}
main .conteudo .mensalidade .titulo .valor h1 {
    font-family: "Livvic";
    font-size: 6vh;
    font-weight: 500;
    margin: 0;
}
main .conteudo .mensalidade .valores {
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    padding: 29px;
    gap:1vh;
    width: 100%;
}
main .conteudo .mensalidade .valores .linhavalor {
    display:flex;
    flex-direction: row;
    font-size: 1.8vh;
    justify-content: space-between;
}
/*main .conteudo .mensalidade .valores .linhavalor.total .nome  {
    color: #61BB5A;
}
main .conteudo .mensalidade .valores .linhavalor.total .valor  {
    color: #F87315;
}*/
main .conteudo .right .obs {
    max-width: 85%;
    margin-top: 8px;
    font-size: 14px;
}

/* Rodapé */
footer .linksapoio {
    background-color:#F3F2F2;
    font-family: "manrope";
    padding:14px;
    font-size:1.7vh;
    text-align: center;
}
footer .linksapoio a {
    color: rgba(0, 0, 0, 0.8);
    margin: 22.5px;
    font-size:1.8vh;
}
footer .copyright {
    background-color:#61BB5A;
    color: #FFFFFF;
    font-family: "manrope";
    padding:14px;
    font-size:1.7vh;
    text-align: center;
}

@media (max-width: 1000px) {
header {
    padding:1.5vh;
    background-color: #fff;
}
.lead .input-form.mid, .lead .select-form.mid {
    width:100%;
}
.lead .box {
    width: 60%;
}
.input-form.mid, .select-form.mid {
    width: 45%;
}
main .conteudo .nav {
    margin: 5vh 0;
}
main .conteudo > div {
    width: 80% !important;
}
main .conteudo .formulario > div > h1 {
    font-size: 3.5vh;
}
main .conteudo .mensalidade .titulo .valor {
    padding: 1vh;
}
}




/* Esconde o estilo nativo */
.checkbox-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  min-width: 18px;
  min-height: 18px;
  max-height: 18px;

  border: 1px solid #61BB5A;     /* borda que você quer */
  border-radius: 5px;         /* tira ou altera pra ficar quadrado/redondo */
  background-color: #fff;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

/* Estado marcado */
.checkbox-form input[type="checkbox"]:checked {
  background-color: #61BB5A;     /* fundo quando marcado */
  border-color: #61BB5A;
}

/* “check” desenhado */
.checkbox-form input[type="checkbox"]:checked::after {
    display: flex;
  content: '✓';
  position: relative;
  color:#fff;
  inset: -1px 0px;
  font-size: 13px;
  justify-content: center;
}

/* Foco acessível */
.checkbox-form input[type="checkbox"]:focus-visible {
  outline: none;
  outline-offset: none;
}