/* .swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, -1.5rem) !important;
} */

/* Card Container */
.card {
    max-width: 95%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Ocultamos los botones por defecto */
/* .swiper-button-prev-custom,
.swiper-button-next-custom {
    opacity: 0;
    transition: opacity 0.3s ease;
} */

/* Hacemos que aparezcan al hacer hover sobre la tarjeta */
/* .card:hover .swiper-button-prev-custom,
.card:hover .swiper-button-next-custom {
    opacity: 1;
} */


/* .swiper-container:hover .swiper-button-prev-custom,
.swiper-container:hover .swiper-button-next-custom {
    opacity: 1;
} */

.card-image {
    max-width: 95%;
    height: 50%;
    margin: auto;
    /* border: 1px solid grey; */
}

.card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%; /* Por ejemplo, 80% del contenedor */
    height: 1.5em;
    white-space: nowrap;
    justify-self: center;
}

.card-description {
    white-space: wrap;
    text-align: left;
}

/* Swiper container */
.swiper-card {
    width: 100%;
    position: relative;
}


/* Swiper slides */

/* .swiper-slide-card {
    background-size: contain !important;
    background-position: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
} */

.swiper-articulos {
    overflow: hidden;
    margin: auto;
    /*width: 58%;*/
    height: 25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;

}

.swiper-slide {
    width: 85%;
    height: 100%;
    text-align: center;
    max-height: 95%;
    font-size: 1rem;
    /*border-radius: 18px;*/
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    flex-shrink: 0; /* Impedir que las slides cambien de tamaño */
    width: calc((100% - 60px) / 3); /* Ajusta el ancho de cada slide */
    box-sizing: border-box; /* Incluye padding/margen en el cálculo */
    opacity: 1 !important; /* No aplicar opacidad */
    transform: none !important; /* Eliminar transformaciones no deseadas */
}

.swiper-pagination-bullet {
    background-color: #ccc; /* Color de los puntos */
    opacity: 1; /* Visibles siempre */
}

.swiper-pagination-bullet-active {
    background-color: #1C95DA; /* Color del punto activo */
}

/* .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

/* Card Content */
.card-content {
    /*padding-top: 3rem;*/
    max-width: 100%;
    margin: auto;
}

.card-content h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #333;
}

 .card-content p {
    font-size: .8rem;
    color: #777;
    margin-bottom: 5px;
}

.card-content .price {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
}

/* Contenedor del título y la calificación */
.title-rating-container {
    /* display: flex;
    align-items: center; */
    /* justify-content: space-between; */
    margin-top: 10px;
}

/* Estrella y porcentaje */
.rating {
   /* display: flex;*/
    align-items: center;
    font-size: 1rem;
    color: #f39c12;
    margin-top: 0.5rem;
}


.rating i {
    margin-right: 5px;
}

.rating-percentage {
    font-size: 0.8rem;
    color: #333;
    inline-size: max-content;
}


/* Precio */
.price {
    display: block;
    color: #1C95DA;
    font-weight: bold;
}

@media (min-width: 768px) and (max-width: 1024px) {

    .swiper-articulos {
        overflow: hidden;
        margin: auto;
        /*width: 58%;*/
        height: 27rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media  (max-width: 767px) {

    .swiper-articulos {
        overflow: hidden;
        margin: auto;
        /*width: 58%;*/
        height: 27rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}