/* ===================================
    Cover
====================================== */

.cover{
  width: 100%;
  min-height: 450px;
  padding-top: 200px;
  padding-bottom: 0px;
  position: relative;
  overflow-x: clip;
  background: linear-gradient(180deg, rgba(3, 3, 3, 0.7) 0%, #030303 100%),url("../../assets/img/Productos/Cover-fondo.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


.bg-cover{
  background: rgb(0,0,0);
background: linear-gradient(176deg, rgba(0,0,0,1) 85%, rgba(255,255,255,1) 85%);
}

.inf-cover{
  width: 60%;
}

.inf-cover .description{
  width: 70%;
}

.inf-cover .catalogo{
  width: 65%;
}

.inf-cover .indicador{
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  color: #fff;
}

.inf-cover h1{
  font-family: 'Poppins', sans-serif !important;
  line-height: 6.27rem!important;
  text-transform: uppercase;
}

.img-cover{
  width: 55%;
  position: absolute;
  top: 65%;
  right: 0px;
  transform: translate(-0%, -50%);

}

.img-deco{
  width: auto;
  position: absolute;
  top:40%;
  right: 0px;
  transform: translate(-0%, -50%);
}

.frente{
  position: relative;
  z-index: 10;
}

.catalogo{
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}


.content-menu{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
}

.active-categ .content-categ{
    background: linear-gradient(180deg, #FF0000 0%, #790000 100%);
}

.li-categ{
  transition: all 0.7s ease-out;
}

.li-categ:hover .content-categ{
  background: linear-gradient(180deg, #FF0000 0%, #790000 100%);
  transition: all 0.7s ease-out;
}

.li-categ:hover .icono{

    transform: translate(-0%, -5%);
    transition: all 0.7s ease-out;
}


.categoria{
  min-height: 155px;
  position: relative;
  display:flex;
  align-items: flex-end;
  transition: all 0.7s ease-out;
}

.content-categ{
  background: #2F2F2F;
  padding: 20px;
  border-radius: 10px;
  height: 130px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}

.content-categ .icono{
  width: 95px;
  position: absolute;
  top:-5px;
}

.content-menu .swiper-wrapper{
width: 200px;
}

/* ===================================
    Global
====================================== */


.title-productos{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0px;
}

.content-filtros{
  width: 50%;
  display: flex;
}

.select-category{
  display: flex;
}

.limpiar-filtros{
  color: #000000;
  text-decoration: underline;
  transition: all 0.7s ease;
}

.limpiar-filtros:hover{
  color: #FF0000;
  transition: all 0.7s ease;
  text-decoration: underline;
}

/* ===================================
    Grid
====================================== */

.container-productos-filtros{
  display: grid;
grid-template-columns: 1fr;
gap: 20px;
}

.grid-content-menu{
  display: grid;
  grid-template-columns: 1fr;
  gap:20px;
}

.grid-menu{
  display: grid;
  grid-template-columns: repeat(2,150px);
  gap:15px;
}

.grid-filtros{
  border-bottom: 2px solid #FF0000;
  padding-top: 15px;
  padding-bottom: 15px;
}

.grid-productos{
  display: grid;
  grid-template-columns: 1fr;
  gap:15px;
}

/* ===================================
    Filtros
====================================== */

.text-red{
  color: #FF0000!important;
  font-weight: 600!important;
}


.loader {
  display: none;
  text-align: center;
  padding: 20px;
  font-weight: bold;
  color: #777;
}

@media (max-width: 767px) {
  #filtros-container-global {
    display: none;
  }

  #filtros-container-global.visible {
    display: block;
        position: absolute;
        top: -30px;
        background: #F0F0F0;
        width: 80%;
        z-index: 50;
        padding: 20px;
        border: 2px solid;
  }


}
/* ===================================
    responsive
====================================== */
/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {
.grid-productos{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:15px;
}

.grid-menu{
  display: grid;
  grid-template-columns: repeat(2,175px);
  gap:15px;
}

.content-categ .icono{
  width: 115px;
  top:-15px;
}

}
/* md  */ @media (min-width: 768px) {


.container-productos-filtros{
  display: grid;
grid-template-columns: 25% auto;
gap: 20px;
}

.grid-productos{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:15px;
}


.grid-menu{
  display: grid;
  grid-template-columns: repeat(4,175px);
  gap:15px;
}

.title-productos{
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  gap: 20px;
}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.container-productos-filtros{
  display: grid;
grid-template-columns: 20% auto;
gap: 20px;
}

.grid-productos{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:15px;
}





} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {


.grid-content-menu{
  display: grid;
  grid-template-columns: 35% auto;
  gap:50px;
}



}
/* xxl */ @media (min-width: 1400px) {}