label {
  margin-bottom: 5px;
  display: block;
}


body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/icons/logo_bg.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.2; /* Adjust opacity for subtle effect */
  filter: brightness(1); /* Optional: Adjust brightness to make it more subtle */
  z-index: -1; /* Make sure the logo is behind content */
}

.content {
  position: relative;
  z-index: 1;
  color: #000; /* Text color */
  padding: 20px;
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distribuye los elementos con espacio entre ellos */
  padding: 0 10px; /* Añade un poco de espacio a los lados */
}

.brand-logo {
  display: flex;
  align-items: center;
  text-align: center;
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}

.brand-logo.left,
.brand-logo.right {
  flex: 1; /* Permite que los textos ocupen espacio proporcional */
  font-size: 1.6rem; /* Ajusta el tamaño del texto */
}

.brand-logo.center {
  flex: 0; /* El logo no se expande */
}
.logo-img {
  height: 80px; /* Tamaño del logotipo */
  margin: 0 10px; /* Espaciado alrededor del logo */
  border: 2px solid #fff; /* Borde blanco */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
}

@media (max-width: 600px) {
  .brand-logo.left,
  .brand-logo.right {
      font-size: 1.6rem; /* Ajusta el tamaño del texto en pantallas pequeñas */
  }

  .logo-img {
      height: 50px; /* Reduce el tamaño del logotipo */
  }

  .nav-wrapper {
      flex-wrap: wrap; /* Permite que los elementos se apilen si no caben en una fila */
  }

  .brand-logo {
      flex: 100%; /* Ocupa toda la fila */
      text-align: center; /* Centra el texto */
  }

  .brand-logo.center {
      margin: 10px 0; /* Añade margen vertical al logo */
  }
}