@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap');

/*remove a formatação dos navegadores */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Estilo geral do corpo da página */
body {
  font-family: 'Poppins', sans-serif;
  /* Define a fonte padrão como sem serifa */
  background-color: #fff;
  /* Define o fundo da página como branco */
  padding: 20px;
  /* Adiciona espaçamento interno nas bordas da página */
}

/* Estilização geral do formulário */
form {
  max-width: 700px;
  /* Define a largura máxima do formulário */
  margin: 0 auto;
  /* Centraliza o formulário horizontalmente */
  margin-top: 100px;
  }


/* Cabeçalho fixo com fundo branco */
.logo-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  padding: 10px 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  /* centraliza horizontalmente */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.img-logo {
  height: 50px;
  width: auto;
  margin-left: -500px;
  /* ajuste esse valor até alinhar com o "F" */
}



.form-etapa1 {
  margin-top: 60px;
}

/* Estilo base para campos de texto, email, número, telefone, senha, select e textarea */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
select,
textarea {
  width: 100%;
  /* Ocupa toda a largura disponível do contêiner */
  padding: 12px;
  /* Espaçamento interno confortável para digitação */
  margin-top: 4px;
  /* Espaço acima do campo */
  margin-bottom: 20px;
  /* Espaço abaixo do campo */
  border: 1px solid #ccc;
  /* Borda cinza clara */
  border-radius: 6px;
  /* Cantos arredondados */
  font-size: 16px;
  /* Tamanho da fonte do texto inserido */
  box-sizing: border-box;
  /* Garante que padding e borda não ultrapassem a largura */
}



/* Restaura a cor original do texto ao focar no campo de data */
input[type="date"]:focus::-webkit-datetime-edit {
  color: #777;
  /* Retorna à cor padrão do navegador ao receber foc*/
}

/*///////////////// COMENTEI ESSE TRECHO PARA DEIXA A COR DA FONTE DATA EM AZUL ///////////*/
/* Ajusta o comportamento do label quando o campo de data estiver preenchido mas não em foco */
.GrupoInputs input[type="date"]:not(:focus):not(:placeholder-shown)+label { /*Move o label para baixo (ajuste visual) */
font-size: 16px; /* Define o tamanho do texto do label */
color: rgb(0, 90, 126); /*  Cor cinza médio para o label */
}

/* Posição inicial do label dentro do grupo de inputs */
.GrupoInputs label {
  top: 10px;
  /* Ajuste fino na posição do label (pode ser alterado conforme visual desejado) */
}

fieldset.erro legend {
  color: red;
  font-weight: bold;
}




/*Anima o label para cima quando o campo de data está em foco ou preenchido*/
.GrupoInputs input[type="date"]:focus+label,
.GrupoInputs input[type="date"]:not(:placeholder-shown)+label {
  top: -5px;
  /* Move o label para cima */
  font-size: 0.85em;
  /*Reduz o tamanho da fonte do label */
  color: rgb(0, 90, 126);
}

/* Estilo base do label flutuante dentro de .GrupoInputs */
.GrupoInputs label {
  position: absolute;
  /* Permite posicionar o label sobre o input */
  top: 14px;
  /* Posição inicial do label no eixo vertical */
  left: 16px;
  /* Distância do label em relação à borda esquerda */
  font-size: 16px;
  /* Tamanho da fonte padrão do label */
  color: #777;
  /* Cor cinza médio para o texto */
  pointer-events: none;
  /* Impede que o label interfira em cliques (permite focar direto no input) */
  transition: 0.40s ease all;
  /* Anima suavemente mudanças de posição, cor e tamanho label flutuante */
  padding: 0 4px;
  /* Pequeno espaçamento interno para evitar sobreposição com borda do input */
}

label span.menor,
div span.menor {
  font-size: 0.8em;
  /* Define um tamanho de fonte menor, 80% do padrão */
  color: #aaa;
  /* Aplica uma cor cinza clara ao texto */
  font-weight: normal;
  /* Garante que o texto fique com peso normal */
}


/* Container do input e do label flutuante */
.GrupoInputs {
  position: relative;
  /* Permite posicionar o label de forma absoluta dentro deste contêiner */
  margin-bottom: 24px;
  /* Espaço abaixo de cada grupo de input para separação visual */
}

.GrupoInputs input {
  color: #777;
  position: relative;
  /* Permite posicionamento controlado dentro do grupo */
  width: 100%;
  /* Ocupa toda a largura do contêiner */
  padding: 14px 10px 6px;
  /* Espaçamento interno (topo, laterais, base) */
  font-size: 16px;
  /* Tamanho da fonte do texto digitado */
  border: none;
  /* Remove todas as bordas padrão */
  border-bottom: 2px solid #ccc;
  /* Adiciona apenas uma borda inferior cinza clara */
  background-color: transparent;
  /* Deixa o fundo do input transparente */
  outline: none;
  /* Remove a borda de foco padrão do navegador */
  transition: border-bottom-color 0.3s ease;
  /* Animação suave ao mudar a cor da borda inferior */
}

/* Quando o input recebe foco, muda a cor da borda inferior */
.GrupoInputs input:focus,
.GrupoInputs input:not(:placeholder-shown) {
  background-color: rgba(0, 90, 126, 0.1);  /* Deixa o input azul apos estar preenchido */
  color: #777;  /*Cor do texto apos estar preenchido */
  border-bottom-color: rgba(0, 90, 126, 0.555);
  /* Tom azulado translúcido */
}

/* Anima o label para cima quando o campo está em foco ou preenchido */
.GrupoInputs input:focus+label,
.GrupoInputs input:not(:placeholder-shown)+label {
  top: -5px;
  /* Sobe o label */
  font-size: 0.85em;
  /* Reduz o tamanho do label */
  color: rgb(0, 90, 126);
  /* Muda a cor do label para azul escuro */
}

/* Evita que o Chrome pinte o texto de preto em valores salvos/autofill */
.GrupoInputs input:-webkit-autofill {
  -webkit-text-fill-color: #777 !important;
  transition: background-color 9999s ease-in-out 0s;    /* evita flash amarelo que o chrome preenche automaticamente, coloquei tempo para transição de 2 hrs.(Recurso tecnico kkkk )*/
}

/* Estilo do contêiner de grupo de botões de rádio */
.grupo-radio {
  display: flex;
  /* Exibe os botões de rádio em linha */
  gap: 12px;
  /* Espaço entre os itens (label + input) */
  flex-wrap: wrap;
  /* Permite que os botões quebrem para a linha de baixo, se necessário */
  border: none;
  /* Remove a borda do fieldset (caso esteja usando um) */
}

/* Oculta visualmente os botões de rádio (para usar uma aparência personalizada) */
.grupo-radio input[type="radio"] {
  display: none;
  /* Esconde o input padrão de rádio */
}

/* Estilo do título (legend) do grupo de botões de rádio */
.grupo-radio legend {
  color: #777;
  /* Cor do texto em tom acinzentado */
  font-weight: bold;
  /* Deixa o texto em negrito */
  margin-bottom: 12px;
  /* Espaço abaixo do título para separar dos botões */
  font-size: 16px;
  /* Define o tamanho do texto do título */
  text-align: left;
  /* Alinha o texto à esquerda */
}


/* Estilo visual dos rótulos (labels) que funcionam como botões de rádio personalizados */
.grupo-radio label {
  display: inline-block;
  /* Permite que cada label se comporte como um botão */
  padding: 5px 20px;
  /* Espaçamento interno para dar forma ao botão */
  margin: 5px;
  /* Espaçamento externo entre os botões */
  margin-bottom: 20px;
  border: 2px solid #999;
  /* Borda cinza padrão */
  border-radius: 30px;
  /* Deixa o botão bem arredondado (formato de pílula) */
  font-weight: bold;
  /* Texto em negrito */
  cursor: pointer;
  /* Cursor de clique */
  color: #555;
  /* Cor do texto (cinza escuro) */
  background-color: white;
  /* Fundo branco */
  transition: all 0.3s ease;
  /* Transição suave para hover/seleção */
  user-select: none;
  /* Impede que o texto seja selecionado ao clicar */
}

.grupo-radio label:hover {
  transition: all 0.2s ease;
  background-color: rgb(0, 90, 126);
  color: white;
  border: #ffffff;
}

/* Estilo aplicado ao label do botão de rádio quando ele está selecionado */
.grupo-radio input[type="radio"]:checked+label {
  background-color: rgb(0, 90, 126);
  /* Fundo azul escuro quando selecionado */
  color: white;
  /* Texto branco */
  border-color: rgb(255, 255, 255);
  /* Borda branca */
}

/* Container para input com botão ao lado */
.input-com-botao {
  display: flex;
  /* Coloca input e botão na mesma linha */
  gap: 8px;
  /* Espaço entre o input e o botão */
  align-items: baseline;
  /* Alinha os botao pela linha de base do texto */
}

/* Faz o input ocupar todo o espaço disponível no container */
.input-com-botao input {
  flex: 1;
  /* O input cresce para ocupar o máximo de espaço */
}

/* 
Remove as setas (spinners) dos inputs do tipo number nos navegadores baseados em WebKit
(Chrome, Safari, Edge Chromium)
*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  /* Remove a aparência padrão das setas */
  margin: 0;
  /* Remove qualquer margem extra */
}

/* 
Remove as setas (spinners) dos inputs do tipo number no Firefox 
*/
input[type="number"] {
  -moz-appearance: textfield;
  /* Faz o input se comportar como um campo de texto */
  appearance: textfield;
  /* Define a aparência como texto para outros navegadores */
}


/* Estilo do botão de busca (ou ação) */
.botao-buscar {
  font-family: 'Poppins', sans-serif;
  /* Fonte Poppins */
  background-color: #fff;
  /* Fundo branco */
  color: #555;
  /* Texto cinza escuro */
  padding: 10px 20px;
  /* Espaçamento interno (vertical 10px, horizontal 20px) */
  border: 2px solid #999;
  /* Borda cinza médio */
  border-radius: 999px;
  /* Deixa o botão em formato de pílula */
  font-weight: bold;
  /* Texto em negrito */
  cursor: pointer;
  /* Mostra o cursor de clique */
  transition: all 0.3s ease;
  /* Transição suave ao passar o mouse */
}

/* Efeito visual ao passar o mouse sobre o botão */
.botao-buscar:hover {
  background-color: rgb(0, 90, 126);
  /* Muda o fundo para azul escuro */
  color: white;
  /* Muda o texto para branco */
  border: 2px solid #ffffff;
  /* Muda a borda para branca */
}

/* Estilo padrão para os botões de navegação do formulário */
.Botao-proximo,
.Botao-anterior,
.Botao-finalizar {
  font-family: 'Poppins', sans-serif;
  /* Fonte moderna e legível */
  background-color: #fff;
  /* Fundo branco */
  color: #555;
  /* Texto em cinza escuro */
  padding: 10px 20px;
  /* Espaçamento interno (vertical x horizontal) */
  border: 2px solid #999;
  /* Borda cinza */
  border-radius: 20px;
  /* Cantos levemente arredondados */
  font-weight: bold;
  /* Texto em negrito */
  cursor: pointer;
  /* Mostra a "mãozinha" ao passar o mouse */
  transition: all 0.3s ease;
  /* Transição suave para hover */
}

/* Efeito de hover para os botões de navegação */
.Botao-proximo:hover,
.Botao-anterior:hover,
.Botao-finalizar:hover {
  background-color: rgb(0, 90, 126);
  /* Fundo azul escuro ao passar o mouse */
  color: #fffcfc;
  /* Texto branco suave */
  border: 2px solid #ffffff;
  /* Borda branca */
}


/* Container para botões alinhados à direita */
.botao-container {
  display: flex;
  /* Exibe os botões em linha */
  justify-content: flex-end;
  /* Alinha todos os botões à direita */
}

/* Container para botões com espaço entre eles (um à esquerda e outro à direita) */
.botao-container2 {
  display: flex;
  /* Exibe os botões em linha */
  justify-content: space-between;
  /* Distribui os botões nas extremidades opostas */
}


/* Estilo geral para títulos do formulário */
h3 {
  font-family: 'Poppins', sans-serif;
  /* Fonte Poppins */
  font-weight: bold;
  /* Negrito */
  text-align: left;
  /* Alinhado à esquerda */
  margin-bottom: 32px;
  /* Espaçamento inferior */
  color: #585869;
  /* Tom cinza suave */
  letter-spacing: 0.5px;
  /* Espaçamento sutil entre letras */
}

/* Estilo para o título principal */
h1 {
  display: block;
  /* Mantém como bloco */
  font-size: 2em;
  /* Tamanho relativo */
  margin: 0.67em 0;
  /* Margens superior e inferior */
  font-family: 'Poppins', sans-serif;
  /* Fonte Poppins */
  color: #4a4a4a;
  /* Cinza escuro */
  line-height: 1.5;
  /* Melhor legibilidade */
  letter-spacing: 0.5px;
  /* Espaçamento sutil entre letras */
}


/* Espaçamento inferior entre grupos de upload */
.grupoupload,
.grupouploadSocio {
  margin-bottom: 32px;
}

/* Caixa de upload com visual moderno e responsivo */
.upload-box,
.upload-box-foto,
.upload-box-cpf {
  width: 105px;
  /* Largura fixa */
  height: 105px;
  /* Altura fixa */
  padding: 8px;
  /* Espaçamento interno */
  background-color: #fff;
  /* Fundo branco */
  border: 2px dashed #ccc;
  /* Borda tracejada cinza clara */
  border-radius: 12px;
  /* Cantos arredondados */

  /* Centralização com Flexbox */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Para sobreposição de elementos como input invisível */
  position: relative;

  /* Animação suave para hover */
  transition: border-color 0.3s ease;

  /* Espaçamento externo */
  margin-top: 8px;
}


.grupoupload.preenchido .upload-box,
.upload-box-foto.preenchido,
.upload-box-cpf.preenchido {
  background-color: rgb(0, 90, 126);
  border: none;
}

.grupoupload.preenchido .upload-texto,
.grupoupload.preenchido .upload-formatos,
.grupoupload.preenchido .upload-icon {
  color: white;
}

.upload-box-foto.preenchido .upload-texto,
.upload-box-foto.preenchido .upload-formatos,
.upload-box-cpf.preenchido .upload-texto,
.upload-box-cpf.preenchido .upload-formatos {
  color: white;
}




/* Efeito ao passar o mouse sobre a caixa */
.upload-box:hover,
.upload-box-foto:hover,
.upload-box-cpf:hover {
  border-color: #555;
  /* Borda escurece no hover */
}

/* Input de arquivo invisível que ocupa toda a caixa */
.upload-box input[type="file"],
.upload-box-foto input[type="file"],
.upload-box-cpf input[type="file"] {
  position: absolute;
  /* Cobre toda a caixa */
  inset: 0;
  /* Atalho para top/right/bottom/left: 0 */
  opacity: 0;
  /* Invisível */
  cursor: pointer;
  /* Indica ação de clique */
  z-index: 2;
  /* Fica sobre os elementos visuais */
}

/* Ícone de upload */
.upload-icon {
  font-size: 20px;
  color: #007bff;
  /* Azul padrão */
  z-index: 1;
  transition: color 0.3s ease;
  /* Suaviza mudanças de cor */
}

/* Texto principal */
.upload-texto {
  font-size: 13px;
  font-weight: 600;
  color: #585869;
  margin-top: 10px;
  z-index: 1;
}

/* Texto com formatos de arquivo aceitos */
.upload-formatos {
  font-size: 9px;
  font-weight: 300;
  /* Corrigido: sem 'px' */
  color: #999;
  margin-top: 1px;
  margin-bottom: 2px;
  z-index: 1;
}

/* Efeito de hover também muda a cor do ícone */
.upload-box:hover .upload-icon,
.upload-box-foto:hover .upload-icon,
.upload-box-cpf:hover .upload-icon {
  color: #555;
}


/* Estilo dos rótulos (label) dentro do grupo de upload */
.grupoupload label,
.grupouploadSocio label {
  font-family: 'Poppins', sans-serif;
  /* Define a fonte principal */
  font-weight: 500;
  /* Peso médio para dar destaque */
  display: block;
  /* Faz o label ocupar uma linha inteira */
  margin-bottom: 8px;
  /* Espaço abaixo do label antes do próximo elemento */
  color: #777;
  /* Cor cinza média para o texto */
  font-size: 16px;
  /* Tamanho confortável para leitura */
}

/* Texto central entre ou abaixo das caixas de upload */
.upload-info-central {
  font-family: 'Poppins', sans-serif;
  /* Mantém o padrão de fonte */
  font-weight: 500;
  /* Peso médio */
  color: #777;
  /* Mesmo tom cinza para consistência */
  margin-top: 12px;
  /* Espaço superior — afasta do elemento acima */
  margin-bottom: 8px;
  /* Espaço inferior — afasta do próximo elemento */
}



/* Container da declaração (bloco com texto e checkbox) */
.declaracao {
  max-width: 800px;
  /* Define largura máxima para manter o texto legível */
  margin: 60px auto;
  /* Centraliza horizontalmente e adiciona espaçamento superior */
  margin-bottom: 20px;
  /* Espaçamento inferior extra */
  padding: 30px 40px;
  /* Espaçamento interno confortável */
  background-color: #e9e9e9;
  /* Fundo cinza claro */
  border-radius: 16px;
  /* Cantos arredondados para suavidade */
  font-family: "Poppins", "Segoe UI", sans-serif;
  /* Fonte moderna */
  font-size: 14px;
  /* Tamanho base da fonte */
  color: #2c2c2c;
  /* Texto escuro para boa leitura */
  line-height: 1.8;
  /* Espaçamento entre linhas */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  /* Sombra suave para destaque */
  border: 1px solid #e6e6e6;
  /* Borda discreta */
}

/* Parágrafos dentro da declaração */
.declaracao p {
  margin-bottom: 16px;
  /* Espaço entre parágrafos */
}

/* Textos menores como observações ou instruções */
.declaracao small {
  display: block;
  /* Ocupa linha inteira */
  margin-top: 20px;
  margin-bottom: 30px;
  color: #555;
  /* Cinza médio */
  font-size: 12px;
  line-height: 1.6;
  /* Um pouco mais compacto */
}

/* Label da declaração (envolve checkbox e texto) */
.declaracao label {
  display: inline-flex;
  /* Coloca checkbox e texto lado a lado */
  align-items: center;
  /* Alinha verticalmente ao centro */
  gap: 10px;
  /* Espaço entre checkbox e texto */
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  /* Indica que é clicável */
  color: #222;
  /* Texto levemente mais escuro */
  margin-top: 10px;
}

/* Checkbox customizado */
.declaracao input[type="checkbox"] {
  appearance: none;
  /* Remove estilo nativo do navegador */
  width: 22px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #aaa;
  background-color: #fff;
  transition: all 0.25s ease;
  /* Transição suave em interações */
  cursor: pointer;
  position: relative;
  /* Necessário para o pseudo-elemento ::after */
  flex-shrink: 0;
  /* Impede encolhimento */
  vertical-align: middle;
}

/* Hover do checkbox */
.declaracao input[type="checkbox"]:hover {
  border-color: #000;
  /* Destaca a borda */
}

/* Quando o checkbox é marcado */
.declaracao input[type="checkbox"]:checked {
  background-color: rgb(0, 90, 126);
  /* Fundo azul escuro */
  border-color: #fff;
  /* Borda branca */
}

/* Pseudo-elemento para criar o "check" (✓) */
.declaracao input[type="checkbox"]::after {
  content: "";
  /* Necessário para exibir o check */
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  /* Forma o símbolo ✓ */
  opacity: 0;
  /* Invisível inicialmente */
  transition: opacity 0.2s ease;
}

/* Torna o check visível quando marcado */
.declaracao input[type="checkbox"]:checked::after {
  opacity: 1;
  /* O pseudo-elemento ::after fica visível quando o checkbox está marcado */
}

/* Container da logo fixa na tela */
.logo-fixa {
  position: fixed;
  /* Mantém a logo sempre fixa na tela, mesmo ao rolar a página */
  top: 20px;
  /* Distância de 20px do topo da tela */
  right: 20px;
  /* Distância de 20px da borda direita da tela */
  z-index: 999;
  /* Alta prioridade na pilha para aparecer sobre outros elementos */
}

/* Estilo da imagem dentro da logo fixa */
.logo-fixa img {
  height: 60px;
  /* Altura da imagem da logo (ajustável conforme necessidade) */
}

/* Transição suave para as divs de respostas dinâmicas */
/* Estas divs específicas terão uma animação suave ao mudar de estado */
#divRespostanovo,
#divRespostareativacao,
#divShowroom,
#divAtividade,
#divEquipeVendas,
#divFornecodor {
  transition: all 0.8s ease;
  /* Aplica transição em todas as propriedades */
}

/* Estado inicial das respostas ocultas */
.resposta {
  max-height: 0;
  /* Altura zero para "fechar" o elemento */
  opacity: 0;
  /* Invisível */
  overflow: hidden;
  /* Esconde conteúdo excedente */
  transform: translateY(-10px);
  /* Leve deslocamento para cima para animar a entrada */
  transition:
    max-height 0.8s ease,
    opacity 0.8s ease,
    transform 0.8s ease;
  /* Transição suave para altura, opacidade e posição */
  pointer-events: none;
  /* Desativa cliques quando oculto */
}

/* Estado quando a resposta deve aparecer */
.resposta.mostrar {
  max-height: 200px;
  /* Expande a altura (ajustável conforme conteúdo) */
  opacity: 1;
  /* Fica visível */
  transform: translateY(0);
  /* Volta para a posição original */
  pointer-events: all;
  /* Reativa cliques e interações */
}


/* Estilo para campos de input com erro */
input.erro {
  border: 2px solid red;
  /* Destaca o campo com borda vermelha */
  background-color: #ffe6e6;
  /* Fundo levemente rosado para chamar atenção */
}


/* Estilo para mensagens de erro do e-mail */
.erro-email {
  color: #d00;
  /* Vermelho forte para indicar erro */
  font-size: 13px;
  /* Fonte pequena, mas legível */
  margin-top: 4px;
  /* Espaço entre o campo e a mensagem */
}

/* 
  Estiliza cada etapa do formulário. 
  Por padrão, elas começam escondidas e com opacidade 0
  e levemente deslocadas para a direita (30px), 
  para criar o efeito de transição ao aparecer.
*/

/* Seções do formulário (paginadas) */
.form-etapa {
  display: none;
  /* Não ocupa espaço quando oculta */
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  /* Não permite cliques enquanto invisível */
}

/* Seção ativa (visível na tela) */
.form-etapa.mostrar {
  display: block;
  /* Só ocupa espaço quando ativa */
  opacity: 1;
  transform: translateX(0);
  /* Libera cliques e foco */
}


#indicador-progresso {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.passo {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #ccc;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.passo.ativo {
  background-color: rgb(0, 90, 126);
  /* Cor ativa */
}

.linha {
  flex: 1;
  height: 3px;
  background-color: #ccc;
}

#texto-etapa {
  color: #4a4a4a;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.grupoupload label.erro,
.grupouploadSocio label.erro {
  color: red;
}

.erro-termos {
  display: none;
  color: red;
  font-size: 0.9rem;
  margin-top: 4px;
}

.declaracao.erro .erro-termos {
  display: block;
}