/* Estilos para el contenedor principal de Swiper MacStore 
.swiper-macstore-container {
    width: 100%;
    padding: 40px 0px 25px 0px;
    border-bottom: 1px solid var(--gray3);
}*/

/* Estilo para agregar relleno izquierdo de calculado de forma automatica */
.swiper-macstore-padding-left {
    padding-left: calc((100% - 1220px) / 2);
}

/* Estilo para quitar el margen superior por defecto del elemento h3 */
.swiper-macstore-container h3 {
    padding-left: calc((100% - 1220px) / 2); /* Relleno del lado izquierdo de forma automatica */
    margin-top: 0;
    letter-spacing: -0.02em;
}

/* Estilos para el contenedor de Swiper MacStore */
.swiper-macstore {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Estilos para el contenedor de las flechas de navegación de Swiper MacStore */
.swiper-macstore-arrows-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Estilos para el contenedor de la flecha de navegación previa */
.swiper-macstore-prev-container {
    position: absolute;
    left: 0;
    width: 36px;
    min-width: 36px;
    height: 100%;
    background-color: var(--wwhite);
    z-index: 1;
}

/* Estilos para que haya un relleno al principio y al final de carrusel 
.swiper {
    padding: 0px 25px 0px 10px;
}
*/
/* Estilos para ocultar el contenedor de la flacha previa */
.swiper-macstore-prev-container-hidde {
    display: none;
}

/* Estilos para mostrar el contenedor de la flecha previa */
.swiper-macstore-prev-container-show {
    display: block;
}

/* Estilos para el contenedor de la flecha de navegación siguiente */
.swiper-macstore-next-container {
    position: absolute;
    right: 0;
    width: 36px;
    min-width: 36px;
    height: 100%;
    background-color: var(--wwhite);
    z-index: 1;
}

/* Estilos para el botón previo */
.swiper-button-prev {
    position: absolute;
    margin: auto 0;
    top: 50%;
    transform: translateY(-50%);
    min-height: 120px;
    max-height: 100%;
    /* border-right: 1px solid var(--gray2);*/
}

.conversion-module-prev-container .swiper-button-prev {
    min-height: auto;
}

.conversion-module-next-container .swiper-button-next {
    min-height: auto;
}

/* Estilos para el botón siguiente */
.swiper-button-next {
    position: absolute;
    margin: auto 0;
    top: 50%;
    transform: translateY(-50%);
    min-height: 120px;
    max-height: 100%;
    /*  border-left: 1px solid var(--gray2);*/
}

/* Estilos para tarjeta de artículos */
.swiper-macstore-card {
    width: 288px;
    min-width: 248px;
    height: 390px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px #00000014;
    margin: 5px 0px 5px 0px;
    padding: 16px;
}

/* Estilos para el contenedor de la información de la tarjeta */
.swiper-macstore-info-card {
    text-align: start;
}

    /* Estilos para el título de la tarjeta */
    .swiper-macstore-info-card h4 {
        margin-top: -20px;
        margin-bottom: -10px;
    }

    /* Estilos para quitar efecto de enlace a toda la tarjeta */
    .swiper-macstore-info-card a {
        text-decoration: none;
        color: var(--bblack);
        outline: none !important;
    }

        /* Estilos para quitar efecto de enlace en toda la tarjeta en efecto hover */
        .swiper-macstore-info-card a:hover {
            color: var(--bblack);
            outline: none !important;
        }

    /* Estilos para la imagen de la tarjeta */
    .swiper-macstore-info-card picture {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

/* Estilos para la lista de etiquetas */
.swiper-macstore-tags-list {
    display: flex;
    gap: 10px;
    list-style: none;
    padding-left: 0;
    min-height: 38px;
}

/* Estilos para el icono de la flecha previa  */
.swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after {
    content: 'prev';
    font-size: 16px;
    color: var(--gray2);
}

/* Estilos para el icono de la flecha siguiente */
.swiper-button-next:after, .swiper-rtl .swiper-button-next:after {
    content: 'next';
    font-size: 16px;
    color: var(--gray2);
}

/* Estilo para ocultar la flecha de navegación previa */
.swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

/* Estilos para aplicar efecto espaciado al cuando se llega al final del carrusel */
.swiper-forwards-transform {
    padding-right: 10px;
    animation: swiperMacStoreTransform forwards 2000ms;
}

/* Estilos para quitar el efecto espaciado cuando se regresa al elemento principal del carrusel */
.swiper-backwards-transform {
    /* Queda pediente trabajarlo */
    padding-right: 10px;
    animation: swiperMacStoreTransform backwards 2000ms;
}

/* Media query para quitar el relleno izquierdo cuando se llega a un tamaño de 1254px */
@media (max-width: 1254px) {
    .swiper-macstore-container h3 {
        padding-left: 20px;
    }

    .swiper-macstore-padding-left {
        padding-left: 0px;
    }
}

/* Media query para ocultar contenedor de la flecha previa en un tamaño de 768px */
@media (max-width: 767px) {
    .swiper-macstore-prev-container {
        opacity: 0;
    }

    .swiper-macstore-container h3 {
        font-size: 24px;
    }
}