/* Cabecera fija, centrada y sin separación a los lados */
.site-header, .header {
  position: fixed !important; /* Fija la cabecera */
  top: 0;
  left: 0;
  right: 0; /* Quita la separación derecha */
  width: 100vw !important; /* Ancho completo de la ventana */
  z-index: 9999 !important; /* Prioridad sobre otros elementos */
  background-color: #ffffff !important; /* Fondo blanco */
  margin: 0; /* Sin márgenes */
  padding: 10px 0; /* Ajusta el espacio interno */
  box-shadow: none !important; /* Sin sombras */
  border-bottom: 1px solid #e0e0e0; /* Línea sutil para separar */
}

/* Contenedor interno de la cabecera */
.site-header .container, .header .container {
  display: flex; /* Flexbox para alinear elementos */
  justify-content: space-between; /* Alinea logo a la izquierda y menú a la derecha */
  align-items: center; /* Centra verticalmente los elementos */
  max-width: 100% !important; /* Ancho completo */
  padding: 0 15px; /* Espaciado interno */
  margin: 0 !important; /* Sin márgenes */
  box-sizing: border-box; /* Consistencia en el diseño */
}

/* Ajusta el logo */
.site-header .logo, .header .logo {
  max-height: 50px !important; /* Altura máxima */
  width: auto !important; /* Mantén proporciones */
  margin-left: 0 !important; /* Sin margen extra */
}

/* Menú alineado a la derecha */
.site-header .menu, .header .menu {
  display: flex;
  justify-content: flex-end; /* Alinea los enlaces al borde derecho */
  align-items: center; /* Centra verticalmente los enlaces */
  gap: 15px; /* Espaciado entre enlaces */
  margin: 0 !important; /* Sin márgenes */
  padding: 0 !important; /* Sin padding */
  list-style: none; /* Sin viñetas */
}

/* Menú hamburguesa en móvil */
@media (max-width: 768px) {
  .site-header .menu, .header .menu {
    flex-direction: column; /* Los enlaces se apilan verticalmente */
    justify-content: center; /* Centra el menú */
    gap: 10px; /* Espaciado entre enlaces en móvil */
  }

  .site-header .logo, .header .logo {
    max-height: 40px !important; /* Reduce el tamaño del logo */
  }

  body {
    margin-top: 60px !important; /* Ajusta el margen superior en móviles */
  }
}

/* Ajusta el margen superior del contenido del cuerpo */
body {
  margin-top: 70px !important; /* Ajusta según la altura de tu cabecera */
}

/* Compatibilidad con CookiesHub */
#cookie-banner {
  position: fixed !important; /* Fija el banner de cookies */
  bottom: 0;
  width: 100%; /* Ancho completo */
  z-index: 9998 !important; /* Debajo de la cabecera */
}

/* Contenido del banner de cookies */
#cookie-banner p {
  font-size: 14px;
  color: #333;
}

#cookie-banner button {
  border-radius: 4px;
  font-size: 14px;
}

#cookie-banner button:hover {
  opacity: 0.8;
}