* {
	padding: 0;
	margin: 0;
}

body {
    position: relative;
    height: 100%;
}

.containerHero {
    width: 100%;
    min-height: 100vh;
    display: flex;
     align-items: center;
    flex-direction: column;
    overflow-x: hidden;
}

.containerHero .sections {
    width: 90%;
    max-width: 1200px;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.containerHero .sections .special, .containerHero .listaProductos {
    width: 100%;
    padding: 0;
}

.item .promo-container {
    /* margin-top: 12px !important; */
    width: 100%;
    height: auto;
    padding-top: 109px;
}

.nodisponible{
    height: 480px !important;
    object-fit: contain;
}

.nodisponible-general{
    height: 396px !important;
    width: 396px !important;
}

#categorias .slick-initialized .slick-slide {
    height: 150px;
}

#categorias .categoria-item, .marca-item {
    height: 100%;
    width: 100%;
}

#categorias .categoria-item .categoria-container {
    height: 100%;
}

.slick-list .specialColumn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#carousel-shopping-cart {
    margin-left: 0!important;
    margin-right: 0!important;
}

.slick-slider {
    padding: 5px 0 0 0!important;
    
}

.lista-destacada {
    padding: 15px 15px 0 15px;
}

.lista-destacados  {
    width: 100%;
    height: auto;
    padding: 10px 0;
}

#categorias {
    margin: 12px 0;
}

.bannerDesktopHome {
    width: 100vw;
}

.banner-flotante {
    background-color: #fff;
	height: 50px!important;
    overflow: hidden;
}

.banner-flotante a {
    text-decoration: none;
    text-align: center;
}

.banner-flotante span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 17px;
}

.banner-flotante span p {
    text-align: center;
    color: var(--letra-menu-inferior);
    padding: 0;
    margin: 0;
}

.banner-flotante .slick-track {
	width: 100%!important;
}

.banner-flotante .slick-slider {
    padding: 0!important;
}

.banner-flotante .slick-slide {
	height: 50px!important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.banner-flotante .slick-slide img {
	width: auto!important;
	height: 28px!important;
    padding: 1px 0;
}

.banner-flotante .slick-slide a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

@media screen and (max-width: 768px) {   
    .marcas-slider-item {
        padding: 0!important;
        margin: 5px;
    }
    
    #categorias {
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        /* margin-bottom: 2em; */
        width: 100%;
    }
    
    #categorias .categoria-item .categoria-container{
        height: 160px;
        margin: 10px auto;
    }
    
	.beneficios-wrapper {
        height: auto;
        max-height: 220px;
	}
	
	.beneficios-wrapper .beneficios-item {
	    max-height: none!important;
	    border: none;
    }

    .lista-destacada, .lista {
        padding: 15px 0 0 0;
    }

    .lista-destacados  {
        width: 100%;
    }

    .banner-flotante .slick-slide a {
        font-size: 14px;
        gap: 6px;
    }

    .banner-flotante .slick-slide a {
        padding: 0 10px;
    }
}

@media screen and (max-width: 413px){
    .beneficios-wrapper:not(:has(.beneficioCard)){
        display: grid;
        justify-items: center;
        justify-content: center;
        grid-template-columns: 1fr 1fr;
        max-height: 600px;
    }
}


@media screen and (max-width: 560px) {
    .containerHero .sections .special, .containerHero .listaProductos {
        width: 100vw;
        margin-left: -5.5%;
    }
}

.beneficios-info {
    margin-bottom: 0!important;
}

.beneficios-info h3 {
	margin: 0;
	padding: 0;
    color: #333;
	font-size: 17px;
	line-height: 20px;
	text-align: center;
}

.beneficio-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: auto;
}

@media  screen and (max-width: 853px) {
    .beneficio-container{
        height: 90px;
    }
}

@media screen and (min-width: 768px) {
    .beneficio-texto-derecha {
        flex-direction: row!important;
    }

    #categorias {
        height: 120px;
    }
}

.beneficios-item {
    border-right: solid 1px #ccc;
}

.beneficios-item:hover {
    box-shadow: none;
}

.beneficios-item:last-child {
    border: none;
}

.beneficios-img img {
    height: 45px;
}

.footer-brand img {
    width: 160px!important;
}

.footer-cert img{
	width: 220px !important;
}

.beneficioCard {
    min-width: 300px;
    min-height: 400px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    & img {
        width: 100px;
        height: 100px;
        object-fit: contain;
        margin: 20px auto;
        display: block;
    }
    
    & .card-content {
        padding: 20px;
        text-align: center;
        flex: 1;
        opacity: 0.8;
    }

    & .card-subtitle {
        color: #555;
        text-align: center;
        margin-bottom: 15px;
    }

    & .card-footer {
        padding: 10px 0;
    }

    & .tooltip {
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        text-align: center;
        padding: 5px;
        border-radius: 4px;
        position: absolute;
        z-index: 1;
        transition: opacity 0.3s ease;
        pointer-events: none;
        max-width: 200px;
        transform: translate(50px, 40px);
    }

    & .card-button {
        display: block;
        width: 50%;
        margin: auto;
        padding: 5px 0;
        border-radius: 15px;
        border-style: none;
        background-color: white;
    }

    &:hover{
        cursor: pointer;
    }
}

#logo-principal {
    height: 45px;
    width: auto;
}

.COMBOX2, .COMBOX2-1, .COMBOX2-2, .COMBOX3 {
    width: 100%;
    height: auto;    
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
}

.COMBOX2 a img, .COMBOX2-1 a img, .COMBOX2-2 a img, .COMBOX3 a img {
    width: 100%;
}

.COMBOX2 a img {
    max-width: 550px;
}

/* 

04/07/23 [#4143 - img webp] 
comento los cambios para ver
una mejor solución después

.bg-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

#bannerDesktop .bg-image {
    height: 300px;
}

.beneficios-wrapper .bg-image {
    width: 50px;
    height: 50px;
}

.COMBOX2-1 .bg-image {
    height: 300px;
}

.COMBOX3 .bg-image {
    height: 300px;
}

.MARQUESINA a {
    width: 100%;
}

.MARQUESINA a .bg-image {
    width: 100%;
    height: 100px;
}

@media screen and (max-width: 768px) {
    .item .promo-container{
        margin-top: 107px !important;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    #bannerDesktop .bg-image {
        height: 300px;
    }

    .COMBOX2-1 .X1 .bg-image {
        height: 200px;
    }

    .COMBOX3 > .autoplay a {
        margin: 0 6px;
    }

    .COMBOX3 .bg-image {
        height: 270px;
    }

    .MARQUESINA a .bg-image {
        height: 280px;
    }
}


@media screen and (min-width: 768px) and (max-width: 1023px) {
    #bannerDesktop .bg-image {
        height: 220px;
    }

    .COMBOX2-1 .bg-image {
        height: 190px;
    }

    .COMBOX3 .bg-image {
        height: 160px;
    }
} */

@media screen and (max-width: 768px) {
	.COMBOX2-1 a img, .COMBOX2-2 a img, .COMBOX3 a img {
	    width: calc(100% - 50px);
        margin-bottom: 10px;
	}

    .COMBOX2 a img {
        width: 100%;
    }

    #categorias {
        flex-direction: row;
        justify-content: center;
        /* flex-wrap: wrap; */
    }

    .categoria-item, .marca-item {
        margin: 0 5px;
        width: 30%;
    }
}

@media screen and (max-width: 853px){
    .beneficios-img img {
        height: 30px;
    }
}

.COMBOX2 .X1, .COMBOX2 .X2 {
    width: 49%;
    height: 100%;
    display: flex;
}

@media screen and (min-width: 991px) {
    .COMBOX2 .X1 {
        justify-content: flex-end;
    }
    
    .COMBOX2 .X2 {
        justify-content: flex-start;
    }
}

.COMBOX2-1 .X1, .COMBOX2-1 .X2, .COMBOX2-2 .X1, .COMBOX2-2 .X2{
    /* background-color: blue; */
}


.COMBOX2-1 .X1 {
    width: 65%;
}

.COMBOX2-1 .X2 {
    width: 33%;
}

.COMBOX2-2 .X1 {
    width: 33%;
    height: auto;
}

.COMBOX2-2 .X2 {
    width: 65%;
    height: auto;
}

.COMBOX3 a {
    width: 31%;
    /* background-color: blue; */
}

.COMBOX3 .COMBOX3-slider, .COMBOX3 .COMBOX3-slider .slick-list {
    width: 100%!important;
}

.COMBOX3 .COMBOX3-slider .slick-list a img {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .COMBOX3 .X1, .COMBOX3 .X2, .COMBOX3 .X3 {
        padding: 0!important;
    }
}

.MARQUESINA {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px 0px;
}

.MARQUESINA img {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 768px) {
    .categoria-container, .marca-container {
        height: 130px;
        opacity: 0.8;
        width: 230px;;
    } 
}

@media screen and (max-width: 767px) {
    .COMBOX2 .X1, .COMBOX2 .X2, 
    .COMBOX2-1 .X1, .COMBOX2-1 .X2, 
    .COMBOX2-2 .X1, .COMBOX2-2 .X2, 
    .COMBOX3 .X1, .COMBOX3 .X2, .COMBOX3 .X3{
        width: 100%;
        height: auto;
        /* margin-bottom: 10px; */
        margin: 0 5px 10px 5px;
        padding: 0 25px;
    }

    .COMBOX2, 
    .COMBOX2-1, 
    .COMBOX2-2, 
    .COMBOX3 {
        display: block;
    }

    .MARQUESINA {
    }

    .containerHero .sections .special, .containerHero .listaProductos {
    }
}

@media screen and (max-width: 1200px) {
    .containerHero .sections {
        width: 90%;
    }
}

.categoria-item .categoria-container {
    background-size: contain!important;
}

.categoria-item .categoria-container h3 {
    display: none;
}

.categoria-item-one {
    width: 90%;
}

.next-button, .prev-button, .next-button-marcas, .prev-button-marcas {
    height: 50px!important;
    width: 50px!important;
    border-radius: 50%!important;
    border: solid 1px #cecece;
    display: flex!important;
    justify-content: center;
    align-items: center;
}

.next-button{
    margin-right: 10px;
}

.prev-button{
    margin-left: 10px;
}

.next-button-marcas, .prev-button-marcas{
    
}

.next-button .glyphicon, .prev-button .glyphicon {
    font-size: 26px;
    position: initial;
}

@media screen and (max-width: 768px) {
    .etiquetaHome {
        border-radius: 0!important;
    }
}

.bannerDesktopHome .noDisponible {
    height: 550px !important;
    object-fit: contain;
}

.X1 .noDisponible{
    width: 100%;
    max-width: 396px;
}

.MARQUESINA .noDisponible{
    max-width: 220px;
}

.COMBOX3 .noDisponible{
    height: 150px;
    object-fit: contain;
}

.containerBloqueDeContenido, .containerBloqueDeContenido div {
    width: 100%;
}

.containerBloqueDeContenido .bloquesDeContenido details {
    border: solid 1px #ccc;
    margin-bottom: 15px;
}

.containerBloqueDeContenido .bloquesDeContenido details > p {
    background: #fff;
    padding: 10px;
}

.containerBloqueDeContenido .bloquesDeContenido details summary {
    background: #f1f2f3;
    border-bottom: solid 1px #ccc;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
    width: 100%;
}

.containerBloqueDeContenido .bloquesDeContenido details summary p {
    margin-bottom: 0;
    margin-top: 0;
}

details summary::-webkit-details-marker {
    display:none;
}