/* Estilos para las flechas de navegación */
.swiper-button-prev-custom,
.swiper-button-next-custom {
    position: relative; /* Cambia la posición de absolute a relative */
    top: auto; /* Anula la propiedad 'top' que podría tener */
    left: auto; /* Anula la propiedad 'left' que podría tener */
    right: auto; /* Anula la propiedad 'right' que podría tener */
    bottom: auto; /* Anula la propiedad 'bottom' que podría tener */
    font-size: 2rem; /* Tamaño de las flechas */
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10;
}

/* Opcional: Estilo al pasar el mouse */
.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover {
    background-color: #f0f0f0;
}

#logoRecomendaciones {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white; /* Optional: adds a white ring around the logo */
    z-index: 10;
}