.bg-oficial-primary {
  background-color: #252c61;
  color: white;

}


.navbar .nav-link {
  color: #ffffff; 
}
.logo{
  max-height: 48px;
}
.navbar-toggler{
  color:#ffffff

}
.navbar .nav-link:hover{
background-color: rgba(255,255,255,0.15);
  border-radius: 4px;
}

.hero-image {
    width: 100vh; /* ocupa toda la altura de la ventana */
  }

.overlay-gradient {
  position: absolute;
  top: 0.5rem;        /* lo coloca arriba */
  left: 1rem;       /* margen desde la izquierda */
  right: 1rem;      /* evita que ocupe todo el ancho */
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.562); /* negro translúcido uniforme */
  border-radius: 0.5rem;
  color: #fff;
  max-width: 100%;   /* ancho controlado */
}



.overlay-gradient h2,
.overlay-gradient p {
  position: relative; /* asegura que el texto esté encima del gradiente */
  z-index: 1;
}





/*footer*/
.social-icons a {
  text-decoration: none;   /* elimina subrayado */
  display: inline-block;   /* evita que se comporten como texto */
  margin: 0 8px;           /* separa los íconos */
}

.social-icons i {
  font-size: 1.5rem;       /* tamaño más grande */
  vertical-align: middle;  /* centra los íconos */
}

.social-icons a:hover {
  color: #0d6efd; /* azul Bootstrap al pasar el mouse */
}