:root {

  --cor-primaria: #36aeeb;
  --cor-secundaria: #248ec4;
  --cor-terciaria: #227eac;

  --texto-claro: #ffffff;
  --texto-escuro: #444;
  --paragrafo-escuro: #666;

  --bg-claro: #eee; 
  --bg-claro2: #dedede; 
  --bg-escuro: #ccc;
  
  --bg-azul: #F2F9FE; 
  --bg-laranja: #fffaef; 
  --bg-btn: #e99700; 
  --bg-btn-hover: #f5a30c; 
  
  /*--verde-success: #08e608;*/
  --verde-success: #13ca75;
  --vermelho: red;
  /*--vermelho: #bd1a1a;*/
}

.cor-texto{
  color: var(--texto-escuro);
}

.linha::after{
  content: "";
  margin: 17px auto 0 auto;
  width: 80px;
  height: 3px;
  background-color: var(--texto-escuro);
  border-radius: 3px;
  display: table;
}

div.animado{
  transform: translateX(-100px); /* começa fora da posição normal (à direita) */
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
div.animado2{
  transform: translateX(100px); /* começa fora da posição normal (à direita) */
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
div.animado3{
  transform: translateY(100px); /* começa fora da posição normal (à direita) */
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
div.animado.visivel,
div.animado2.visivel,
div.animado3.visivel {
  transform: translateX(0); /* volta à posição original */
  opacity: 1;
}