.menu-flotante {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.3s ease-in-out;    
    border-bottom: 3px solid #ea3d3d;
    padding-bottom: 0;
    cursor: grab;
    overflow-x: auto;
    transition: transform 0.5s ease-in-out;
}
.menu-flotante.oculto-hacia-arriba {
    transform: translateY(-100%)!important;
}
.menu-flotante::-webkit-scrollbar {
    display: none; /* Oculta la barra en navegadores WebKit */
}
.menu-flotante .slick-track {
    padding-right: 150px; /* Este espacio vacío le dice a Slick que puede seguir deslizando */
}
.menu-flotante.visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.menu-flotante .carrusel-titulos {
    white-space: nowrap;  /* Evita que los elementos salten a la línea de abajo */
    user-select: none;    /* Evita que el texto se seleccione al arrastrar */
    display: flex;          /* 1. Convierte el contenedor en una caja flexible */
    flex-wrap: nowrap;
}
.menu-flotante .carrusel-titulos .titulo-item {
    display: flex; 
    align-items: center;
    padding-top: 3px;
    padding-bottom: 0;
    flex: 0 0 auto;         /* 3. MUY IMPORTANTE: Evita que los ítems se encojan o crezcan */
    margin: 0;         /* 4. Añade un espacio entre los botones */
    white-space: nowrap;    /* 5. Asegura que el texto dentro del botón no se parta en dos líneas */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Transición suave */
    border-bottom: 2px solid transparent; /* Para el borde que aparece en hover */
}

.menu-flotante .carrusel-titulos .titulo-item:hover {
    background-color: #f0f0f0; /* Un gris muy claro para el fondo */
    border-bottom-color: #dc3545; /* Usa tu color rojo principal para un borde inferior */
    cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
}

/* Y si el ítem está activo (la sección actual), que se destaque más */
.menu-flotante .carrusel-titulos .titulo-item.active {
    background-color: #e9ecef; /* Un gris un poco más oscuro para el activo */
    border-bottom-color: #c82333; /* Un rojo un poco más oscuro o fuerte */
}
.menu-flotante .carrusel-titulos .titulo-item a {
    display: flex; 
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: #343a40;
    font-weight: bold;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: border-color 0.2s;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.menu-flotante .carrusel-titulos .titulo-item a img {
    max-width: 24px; 
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
}
.menu-flotante .carrusel-titulos .titulo-item:not(:last-child)::after {
    content: '|';
    color:rgb(136, 137, 139);        
    font-weight: 100;
}