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

body {
  background-image: url('../img/background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* Se quiser fixar o fundo ao rolar a página:
     background-attachment: fixed; */
  color: #fff;
  min-height: 100vh;
  font-family: 'Roboto', sans-serif;
}

.logo-area {
  padding: 50px 0 70px;
}

.progress {
  height: 39px;
}

.progress-bar {
  background-color: #4EC3E0; !important;
}

.progress-label {
  color: #4EC3E0;
  font-weight: bold;
}

/* ================================
   Sobrescrevendo variáveis Bootstrap
   ================================ */
   :root {
    /* Cor principal */
    /* --bs-primary: #4EC3E0; */
    --bs-primary-rgb: 164, 120, 100;
  
    /* Cor de links */
    --bs-link-color: #4EC3E0;
    /* --bs-link-hover-color: #002F6C; */
    --bs-link-hover-color: #F0C020;
 


    /* Caso queira também ajustar o outline ou foco */
    /* --bs-focus-ring-color: rgba(164, 120, 100, 0.25); */
  }

  /* Se quiser redefinir a classe .btn-primary para sua cor marrom */
  .btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important; /* Adicionado para corrigir a cor do texto */
  }
  
  .btn-secondary {
    color: #fff !important; /* Adicionado para corrigir a cor do texto */
  }
  
  /* Ou então manter .btn-custom (como já estava) */
  .btn-custom {
    background-color: #4EC3E0;
    color: #fff !important;
    /* border: 1px solid #fff !important; */
    border: none;
  }
  
  .btn-custom:active,
  .btn-custom:focus-visible,
  .btn-custom:hover {
    /* background-color: #002F6C; marrom mais escuro */
    background-color: #F0C020 !important; marrom mais escuro
    color: #fff !important;
  }
  
  /* Links gerais */
  a, a:hover, a:focus, a:active {
    color: var(--bs-link-color) !important;
  }
  a:hover {
    color: var(--bs-link-hover-color) !important;
  }
  
  
  /* Radios e checkboxes marcados */
  .form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
  }
  
  /* Logo / top area */
  .logo-area {
    text-align: center;
    /* margin: 20px 0; */
  }
  
  .card,
  .progress-container {
    max-width: 800px;
    margin: 0 auto;
  }

  .card-body,
  .card {
    background-color: transparent !important;
    color: #fff;
    padding: 0 !important;
    border: none !important;
  }

  .card-body .btn {
    margin-top: 30px;
  }

  .form-check-input:checked {
    background-color: #4EC3E0 !important;
    border-color: #4EC3E0 !important;
}

/* Container da barra */
.custom-progress {
  position: relative; 
  background: linear-gradient(to right, #4EC3E0, #002F6C);
  /* ou linear-gradient(90deg, #4EC3E0, #002F6C) */
  border-radius: 999px; /* deixa as pontas arredondadas */
  /* se quiser remover borda do bootstrap, pode usar border: none; */
}

/* Bolinha que marca a posição */
.progress-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%); 
  /* "left" vem inline no style, por ex. "left: 30%;" 
     e transform faz a bolinha centralizar no ponto */
  
  width: 40px;
  height: 40px;
  border-radius: 50%;
  
  /* Exemplo de estilo da bolinha */
  background-color: #fff;
  color: #000; 
  text-align: center;
  line-height: 40px; /* para centralizar o texto verticalmente */
  font-weight: bold;

  /* Se quiser sombra */
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.pontos {
  text-align: center;
}
.pontos span {
  color: #F0C020;
  text-align: center;
  font-family: Roboto;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.interpretacao {
  font-size: 0.94em;
}
h5.interpretacao {
  font-size: 1.2em;
  padding-bottom: 10px;
  padding-top: 5px;
}

.interpretacao ul {
  list-style: none;
  padding-left: 0;
}