/* Contenedor principal de la barra */
.barra-servicios-fija {
  position: fixed;
  bottom: 20px; /* Separación del borde inferior de la pantalla */
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  max-width: 1200px;
  background-color: rgba(255, 255, 255, 0.15); /* Fondo blanco semi-transparente */
  backdrop-filter: blur(10px); /* Efecto esmerilado moderno */
  -webkit-backdrop-filter: blur(10px);
  border-radius: 30px; /* Bordes muy redondeados */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* Sombra suave para darle profundidad */
  z-index: 9999; /* Asegura que quede por encima de todo */
  padding: 10px 20px;
  box-sizing: border-box;
  
}

/* Contenedor interno que permite el desplazamiento */
.servicios-scroll {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px; /* Espacio entre cada servicio */
  overflow-x: auto; /* Activa el scroll horizontal si no caben */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
}

/* Ocultar la barra de scroll visual para mantener la estética limpia */
.servicios-scroll::-webkit-scrollbar {
  display: none;
}
.servicios-scroll {
  -ms-overflow-style: none;  /* IE y Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Estilo para cada uno de los servicios (enlaces) */
.servicio-item {
  color: black; /* Color de texto elegante (puedes cambiarlo al azul de tu logo) */
  text-decoration: none;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
  padding: 4px 9px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

/* Efecto visual al pasar el cursor (Hover) */
.servicio-item:hover {
  background-color: #00237d; /* Color de acento al interactuar (cámbialo por tu color corporativo) */
  color: #ffffff;
}

/* Optimización para pantallas grandes (Escritorio) */
@media (min-width: 992px) {
  .servicios-scroll {
    justify-content: center; /* Centra los servicios si hay espacio suficiente */
  }
}