/* Asegura que el footer quede al fondo si hay poco contenido */
    html, body {
        height: 100%;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    main {
        flex: 1 0 auto;
    }
    

  :root {
    /* --bs-primary: #588157; */ 
    --bs-primary: #6e795a; /* #2D3B2A; */
    
    --bs-secondary: #C2996D;
  }

  .bg-primary {
    background-color: var(--bs-primary) !important;
  }

  .bg-secondary {
    background-color: var(--bs-secondary) !important;
  }

  .text-primary {
    color: var(--bs-primary) !important;
  }

  .text-secondary {
    color: var(--bs-secondary) !important;
  }

  .btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
  }

  .btn-primary:hover {
    background-color: #466947 !important; /* Un tono más oscuro para hover */
    border-color: #3d5d3e !important;
  }

  .btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
  }

  .btn-secondary:hover {
    background-color: #8e9f79 !important;
    border-color: #7e8d6a !important;
  }

nav .nav-link {
  position: relative;
  padding-bottom: 4px;
  transition: all 0.2s ease-in-out;
}

/* Subrayado sólido al pasar el mouse */
.navbar-nav .nav-link {
  position: relative;
  padding-bottom: 4px;
  transition: all 0.2s ease-in-out;
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 0;
  background-color: currentColor; /* Usa el color del texto */
  opacity: 0;
  transition: opacity 0.3s;
}

.navbar-nav .nav-link:hover::after {
  opacity: 1;
}

.navbar-nav .nav-link.active {
  font-weight: bold;
}

.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 0;
  background-color: currentColor;
  opacity: 1;
}


/* Footer institucional */
footer.bg-institucional {
  background-color: #6E795A;
  color: #DDDCCE;
}

footer.text-color {
  color: #DDDCCE;
}
footer a {
  color: white;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

.integrante-card {
  width: 100%;
  height: 350px;
}

.integrante-card img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.enlaces a {
  /* color: white; */
  text-decoration: none;
}

.enlaces a:hover {
  text-decoration: underline;
}