:root{
  --pagesMainColor: #5AFFBA;
}
.page-catalog__header{
  width: 100%;
  font-family: 'Poppins', sans-serif;
}

body.neonGreen-bg-color .page-catalog__header{
  background: -moz-linear-gradient(124deg, rgba(90,255,225,1) 0%, rgba(90,255,225,1) 40%, rgba(90,255,186,1) 60%, rgba(90,255,186,1) 100%);
  background: -webkit-linear-gradient(124deg, rgba(90,255,225,1) 0%, rgba(90,255,225,1) 50%, rgba(90,255,186,1) 60%, rgba(90,255,186,1) 100%);
  background: linear-gradient(124deg, rgba(90,255,225,1) 0%, rgba(90,255,225,1) 50%, rgba(90,255,186,1) 60%, rgba(90,255,186,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5affe1",endColorstr="#5affba",GradientType=1);
}
body.neonGreen-bg-color .page-catalog__title{
  color: var(--greenBlue);
}

body.neonblue-bg-color .page-catalog__header{
  background: -moz-linear-gradient(124deg, rgba(90,255,225,1) 0%, rgba(90,255,225,1) 40%, rgba(90,255,186,1) 60%, rgba(90,255,186,1) 100%);
  background: -webkit-linear-gradient(124deg, rgba(90,255,225,1) 0%, rgba(90,255,225,1) 50%, rgba(90,255,186,1) 60%, rgba(90,255,186,1) 100%);
  background: linear-gradient(124deg, #5af6ff 0%, #5af6ff 50%, rgba(90, 255, 225, 1) 60%, rgba(90, 255, 225, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5affe1",endColorstr="#5affba",GradientType=1);
}
body.neonblue-bg-color .page-catalog__title{
  color: var(--greenBlue);
}


body.greenblue-bg-color .page-catalog__header{
  background: #163749;
}
body.greenblue-bg-color .page-catalog__title p a,
body.greenblue-bg-color .page-catalog__title{
  color: var(--neonGreen);
}
body.gray-bg-color .page-catalog__header{
  background: linear-gradient(270.23deg, #D7D7D7 9.86%, #DBDBDB 41.1%, #EAEAEA 57.53%, #F9F9F9 88.77%);
}
body.gray-bg-color .page-catalog__title p a,
body.gray-bg-color .page-catalog__title{
  color: #1f1f29;
}
.page-catalog__header .wrapper{
  justify-content: space-between;
  display: flex;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  align-items: center;
}
.page-catalog__title{
  color: var(--greenBlue);
  line-height: 1.35;
}
.page-catalog__title h1{
  font-size: calc(20px + .22vw);
  font-weight: 700;
  box-sizing: border-box;
  margin: 0;
}
.page-catalog__title p{
  font-size: calc(16px + .22vw);
  font-weight: 500;
  box-sizing: border-box;
  margin: 0;
}
.page-catalog__title p a{
  color: var(--greenBlue);
  font-weight: 600;
  text-decoration: underline;
  transition: .15s ease-in-out;
  display: inline-block;
}
.page-catalog__title p a:hover{
  transform: scale(1.01);
}
.page-catalog__header .wrapper > a div{
  width: 90px;
  height: 90px;
  box-sizing: border-box;
  padding: 13px;
  padding-bottom: 10px;
  padding-right: 18px;
  background-color: #FFFFFF;
  border: 4px solid var(--greenBlue);
  aspect-ratio: 1/1;
}
.page-catalog__header .wrapper > a{
  text-decoration: none;
}
.page-catalog__header .wrapper > a img{
  width: 18px;
  height: 18px;
  display: block;
}
.page-catalog__header .wrapper > a div p{
  font-size: calc(16px + .12vw);
  font-weight: 700;
  line-height: 1.13;
  text-transform: capitalize;
  padding: 0;
  margin: 0;
  color: #1f1f29;
  margin-top: 5px;
}
/*Container Styles*/
.page-catalog__flex{
  display: flex;
  gap: calc(5px + 4.8vw);
  margin-top: 25px;
  margin-bottom: 50px;
  position: relative;
}
.page-catalog__container *,
.page-catalog__container *::before,
.page-catalog__container *::after{
  box-sizing: border-box;
}
.page-catalog__container{
  width: 100%;
}
.page-catalog__container > p{
  font-family: 'Roboto', sans-serif;
  font-size: calc(13px + .08vw);
  line-height: 1.66;
  margin: 0;
  font-weight: 400;
  margin-bottom: 25px;
}
.page-catalog__container > p a{
  color: var(--blue);
}
.page-catalog__filter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 15px;
  font-family: 'Poppins', sans-serif;
  border-radius: 10px;
  margin-bottom: 15px;
}
.page-catalog__filter-left{
  font-size: calc(11px + .06vw);
  line-height: 1.66;
}
.page-catalog__filter-left a{
  color: #1f1f29;
  font-weight: 400;
  text-decoration: none;
}
.page-catalog__filter-left strong{
  font-weight: 500;
}
.page-catalog__filter-right{
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: calc(12px + .06vw);
}
.page-catalog__filter-right span{
  font-weight: 400;
  line-height: 1.66;
  color: #7B7B7B;
}
.page-catalog__filter-right select{
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  line-height: 1.66;
  border: none;
  background: none;
  outline: none;
  font-weight: 600;
}
.page-catalog__filter-right select::-ms-expand {
  display: none;
}
.page-catalog__filter-button-left.page-catalog__filter-button-left--active{
  border: 1px solid var(--pagesMainColor);
  background-color: var(--pagesMainColor);
}

/* Cards Styles */
.page-catalog__cards.cards-producto__main-table-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex-grow: 1;
  gap: 40px 30px;
}
.page-catalog__cards.cards-producto__main-table-grid .card-producto__main-card{
  border: none;
  border-radius: 10px;
  background: #fff;
  /* https://smoothshadows.com/#djEsMiw4LDAuMDEsMTgsNSw1LCMwMzA3MTIsI2YzZjRmNiwjZmZmZmZmLDI%3D */
  box-shadow: 0px 4px 2px rgba(3, 7, 18, 0.04), 0px 16px 8px rgba(3, 7, 18, 0.03), 0px 37px 19px rgba(3, 7, 18, 0.02), 0px 66px 34px rgba(3, 7, 18, 0.02), 0px 103px 53px rgba(3, 7, 18, 0.01);
}

/* RESPONSIVE -utilizar distintos mediaqueries según sea necesario- */
@media (max-width: 1500px){
  .page-catalog__filter{
    padding: 15px 2vw;
  }
}
@media (max-width: 1100px){
  .page-catalog__cards{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 950px) {
  .page-catalog__header .wrapper{
    padding: 20px calc(10px + 1.3vw);
  }
  .page-catalog__flex{
    padding: 0px calc(10px + 1.3vw);
  }
  
}
@media (max-width: 850px) {
  .page-catalog__cards.cards-producto__main-table-grid{
    display: flex;
    flex-direction: column;
  }
  .page-catalog__cards.cards-producto__main-table-grid .card-producto__main-card:nth-child(1n + 2){
    border-top: 1px solid #F0F0F0;
  }
  .page-catalog__cards.cards-producto__main-table-grid .card-producto__main-card:nth-child(2n + 1){
    border-right: none;
  }
}
@media (max-width: 768px) {
  .page-catalog__cards.cards-producto__main-table-grid .card-producto__main-card{
    border-right: 1px solid #F0F0F0;
  }
  .page-catalog__header .wrapper a{
    display: none;
  }
}
@media (max-width: 680px) {
  .page-catalog__filter {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
@media (max-width: 480px) {
  .page-catalog__header p{
    max-width: 300px;
    margin: 0;
  }
}