.alphabet-btn {
    cursor: pointer;
    margin-right: 5px;
    font-weight: bold;
    flex: 1 1 auto;
    /* Permite que los botones se ajusten según el espacio disponible */
    text-align: center;
}

.alphabet-btn:hover {
    background-color: #bbb;
    /* Cambia el color de fondo al hacer hover */
}

.alphabet-btn {
    display: inline-block;
    padding: 5px 5px;
    margin: 5px;
    background-color: #ddd;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.item-list {
    list-style-type: none;
    /* Elimina la viñeta o punto de la lista */
    display: none;
    position: absolute;
    /* Cambia a posición absoluta para que flote sobre el contenido */
    background-color: white;
    /* Fondo blanco para el menú */
    border: 1px solid #ddd;
    /* Borde para el menú */
    max-height: 260px;
    /* Altura máxima del menú */
    overflow-y: auto;
    /* Desplazamiento vertical si hay muchas palabras */
    z-index: 1000;
    /* Asegura que el menú esté por encima del resto del contenido */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Sombra para el menú */
    padding: 10px 15px;
    /* Espaciado interior para evitar que las palabras estén pegadas al borde */
    min-width: 200px;
    /* Ancho mínimo para que no quede demasiado ajustado */
    transition: opacity 0.3s ease;
}

/* Estilos para los enlaces en la lista */
.item-list>li a {
    display: block;
    padding: 10px 15px;
    color: #57534a;
    text-decoration: none;
    position: relative;
    transition: background-color 0.3s ease, padding-left 0.3s ease;
    /* Animación */
}

/* Animación al hacer hover */
.item-list>li a:hover {
    background-color: #f0f0f0;
    /* Cambia el color de fondo al hacer hover */
    padding-left: 25px;
    /* Desplaza el texto hacia la derecha */
}

/* Flecha a la izquierda del texto */
.item-list>li a:before {
    content: '❯';
    /* puedes cambiar el código si quieres una flecha diferente */
    position: absolute;
    left: -15px;
    /* Posición de la flecha a la izquierda */
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease, left 0.3s ease;
    /* Animación de la flecha */
}

/* Mostrar la flecha al hacer hover */
.item-list>li a:hover:before {
    left: 5px;
    /* Mueve la flecha hacia adentro cuando se hace hover */
    opacity: 1;
    /* Hace que la flecha sea visible */
}


#alphabet-menu {
    display: flex;
    flex-wrap: wrap;
    /* Evita que los elementos se envuelvan a la siguiente línea */
    justify-content: flex-start;
}

.alphabet-section {
    position: relative;
    /* Necesario para que la lista y el filtro se posicionen correctamente */
}

.item-list.show {
    display: block;
    opacity: 1;
}

.filter-input {
    width: calc(100% - 30px);
    /* Ajusta el ancho en función del padding */
    box-sizing: border-box;
    margin-bottom: px;
    z-index: 1000;
}

.item-list-container {
    position: absolute;
    left: -4;
    z-index: 1000;
    transform: translateX(-160px);


}

.item-list.show+.filter-input {
    display: block;
}

.margin-left-custom {
    margin-left: 200px;
    /* Ajusta el valor según sea necesario */
}

img.zoom {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.transition {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.img-zoom-container {
    position: relative;
}

.img-zoom-lens {
    display: none;
    position: absolute;
    border: 1px solid #d4d4d4;
    width: 40px;
    height: 40px;
}

.img-zoom-result {
    display: none;
    position: absolute;
    border: 1px solid #d4d4d4;
    width: 400px;
    height: 400px;
    top: 16.5%;
    left: 44%;
}

.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.iframe-container .video-responsive {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
}

.tooltip2 {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip2 .tooltiptext {
    visibility: hidden;
    width: auto;
    max-width: 300px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip2:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}