/* Estilos para los íconos en los círculos azules */
.icon {
    width: 40px;
    height: 40px;
    background-color: darkblue;
    border-radius: 50%;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative; /* Para el texto emergente */
    font-size: 16px;
    cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el ícono */
}

/* Mantener el color original del ícono */
.icon i {
    color: white;
    font-size: 18px; /* Tamaño del ícono */
}

/* Cambiar el fondo del ícono a rojo al pasar el mouse, solo para el ícono actual */
.icon:hover {
    background-color:firebrick; /* Fondo rojo */
    color: white; /* Mantén el icono blanco */
}

/* Mostrar el texto emergente al pasar el mouse */
.icon::after {
    content: attr(data-text); /* Muestra el texto del atributo data-text */
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    font-size: 12px;
}

/* Mostrar el tooltip (texto emergente) solo en el ícono sobre el que se pasa el mouse */
.icon:hover::after {
    opacity: 1;
}

/* Mantener los íconos en disposición horizontal */
.icons {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px); /* Mueve los íconos ligeramente hacia arriba fuera de la vista */
    display: flex;
    gap: 20px; /* Mantener espacio entre los íconos */
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s; /* Aplica transición suave a opacidad y posición */
}

.product:hover .icons {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Los íconos vuelven a su posición original */
}

/* Aquí restauramos todo lo relacionado con la barra verde y la información del producto */
.product-image {
    width: 100%; /* Ajusta según sea necesario */
    height: auto; /* Mantiene la proporción de la imagen */
    transition: opacity 0.3s;
    border-radius: 25px; /* Ajusta el valor para obtener el nivel de redondez que prefieras */
}

.item {
    border-radius: 25px; /* Esto redondeará el borde del contenedor del producto */
    overflow: hidden; /* Asegura que la imagen no se salga de los bordes redondeados */
}

/* Resto de los estilos que no se tocan */
.product-info {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: transparent;
    transition: color 0.3s;
}

.product-name {
    font-size: 26px;
}

.product-price {
    font-size: 20px;
}

.product:hover .product-info {
    color: black; /* Cambia el color al pasar el mouse */
}

.info-bar {
    position: absolute;
    bottom: 0px; /* Inicialmente, oculta la barra fuera de la vista */
    left: 0;
    width: 100%;
    background-color: seagreen;
    color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 18px;
    opacity: 0;
    transform: translateY(40px); /* Desplaza la barra hacia abajo */
    transition: opacity 0.5s, transform 0.5s; /* Transición suave para la opacidad y posición */
}

.product:hover .info-bar {
    opacity: 1;
    transform: translateY(0); /* La barra sube hacia su posición original */
}