:root {
  --verde-principal: #00c853;
  --verde-oscuro: #00a844;
  --verde-navbar: #009f4f;
  --gris-fondo: #f1f3f4;
  --gris-texto: #263238;
}

body {
  background-color: var(--gris-fondo);
  font-family: 'Segoe UI', sans-serif;
  color: var(--gris-texto);
}

/* NAVBAR */
.navbar {
  background-color: var(--verde-navbar) !important;
}

.nav-link, .navbar-brand {
  color: white !important;
  font-weight: 500;
}

.nav-link:hover {
  color: #dfffe8 !important;
}

/* HERO */
.hero {
  background: url('https://images.unsplash.com/photo-1607082350899-b389f4f6f617?w=1920')
  center/cover no-repeat;
  height: 75vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-overlay {
  background: rgba(0,0,0,0.45) !important;
  position: absolute;
  inset: 0;
}

.hero-content {
  position: relative;
  color: white;
  max-width: 650px;
  z-index: 10;
}

/* ICONOS */
.step-icon {
  font-size: 3rem;
  color: var(--verde-principal);
}

/* BOTONES */
.btn-verde {
  background-color: var(--verde-principal);
  border: none;
  color: white;
  font-weight: 600;
}

.btn-verde:hover {
  background-color: var(--verde-oscuro);
  color: white;
}

/* FOOTER */
.footer {
  background: var(--verde-navbar);
  padding: 20px;
  text-align: center;
  color: white;
  margin-top: 40px;
}
/* HERO */
/* HERO */
.hero {
  background: url('img/ilustracion2.png') center/cover no-repeat;
  height: 75vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


.hero-overlay {
  background: linear-gradient(
    rgba(0, 0, 0, 0.55),
    rgba(0, 128, 79, 0.35)
  ) !important;
  position: absolute;
  inset: 0;
}