:root {
    --verde-escuro: #338551;
    --verde-neon: #A8F4A2;
    --cinza: #2E2E2E;
    --laranja: #FF7043;
    --vrt-green: #2a704b;
}
  
/* Navbar */
.navbar-dark .btn-warning {
    background-color: var(--laranja);
    border: none;
}
  
.navbar-dark .btn-warning:hover {
    background-color: #FF8A65;
}
  
/* Hero com imagem de fundo */
.hero {
    background-image: linear-gradient(rgba(38,93,58,0.6), rgba(38,93,58,0.6)), url('/assets/img/fundo.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 8rem 0;
    text-align: center;
}
  
.hero .btn-light {
    background-color: var(--laranja);
    color: #fff;
    border: none;
}
  
.hero .btn-light:hover {
    background-color: #FF8A65;
}

.avatar {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.25);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* contorno circular para destacar o ícone */
.logo-wrapper{
  width: 48px;
  height: 48px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 6px rgba(0,0,0,.25);
  padding:4px;
}

/* animação sutil ao passar o mouse */
.navbar-brand:hover .logo-wrapper{
  transform:scale(1.05);
  transition:.2s ease;
}

/* cartão */
.step-card {
  transition: transform .25s, box-shadow .25s;
  background: #fff;
}

/* efeito hover */
.step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 1.25rem rgba(0,0,0,.12);
}

/* bolinha numerada */
.step-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--vrt-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  box-shadow: 0 0 0 6px rgba(42,112,75,.15);
}