/* Asegura que las cards tengan el mismo tamaño */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* Asegura que el contenido se distribuya en la card */
    align-items: center;
    height: 100%; /* Para que todas las cards tengan la misma altura */
    min-height: 350px; /* Ajusta según lo que necesites */
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto hover más suave */
}

/* Estilo hover en las cards */
.card:hover {
    transform: translateY(-5px); /* Eleva la card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
}

/* Alineación correcta de las cards en la fila */
.row {
    display: flex;
    flex-wrap: wrap;  /* Permite que las cards se ajusten en pantallas pequeñas */
    justify-content: space-between;  /* Distribuye las cards de manera uniforme */
    gap: 15px;  /* Espacio entre las columnas */
    align-items: stretch;  /* Asegura que todas las cards tengan la misma altura */
}

/* Asegura que cada columna ocupe un 33% del espacio en pantallas grandes */
.col-md-4 {
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(33.333% - 15px);  /* 33% de ancho menos el espacio entre cards */
    box-sizing: border-box;  /* Evita problemas con padding */
    margin-bottom: 15px;  /* Para evitar que las cards se toquen en dispositivos pequeños */
}

/* Alineación del contenido dentro de la card */
.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* Asegura que el contenido se distribuya */
    align-items: center;
    flex-grow: 1;
}

/* El botón se alinea al final de la card */
.btn {
    margin-top: auto; /* El botón se coloca al final de la card */
}





/* Ajustes para las imágenes en el sidebar de zoom */
.vanilla-zoom .sidebar {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.vanilla-zoom .sidebar img.small-preview {
    width: 60px;
    margin-right: 5px;
    cursor: pointer;
    opacity: .5;
}

.vanilla-zoom .sidebar img.small-preview.active,
.vanilla-zoom .sidebar img.small-preview:hover {
    opacity: 1;
}

.vanilla-zoom .sidebar img.small-preview:last-child {
    margin-right: 0;
}

/* Estilo para la imagen con zoom */
.vanilla-zoom .zoomed-image {
    width: 100%;
    height: 300px;  /* Ajuste de altura para las imágenes */
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    margin-bottom: 5px;
}