section.productos {
  padding-top: 5rem;
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid white; */
  /* overflow: hidden; */
  gap: 1rem;
}
.hidden {
  display: none;
}
.box--productos {
  max-width: 80%;
  /* border: 1px solid blue; */
  /* overflow: hidden; */
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
.box--filtros {
  border: 1px solid #ffffff;
  max-width: 20%;
  height: fit-content;
  background-color: #40404182;
  backdrop-filter: blur(1px);
  border-radius: 9px;
  padding: 1rem;
  /* overflow: hidden; */
}
.productos--container {
  grid-template-columns: repeat(3, 30%);
  /* border: 1px solid green; */
  display: grid;
  width: 100vw;
  max-width: 950px;
  align-items: center;
  grid-gap: 3rem;
  column-gap: 2rem;
  row-gap: 4rem;
}
p.container--message {
  font-size: 2rem;
  text-align: center;
  color: white;
  padding: 7rem 0;
  width: 51rem;
}
.brand input:checked ~ label > img,
.brand img:hover {
  scale: 1.1;
}
.brand img {
  width: 80px;
  transition: all 0.5s;
}
.box--filtros input {
  display: none;
}
.box--filtros:hover {
  box-shadow: 0px 0px 17px -3px white, inset 0 -3px 5px white;
}
.box--filtros {
  border: 1px solid #ffffff;
  max-width: 20%;
  height: fit-content;
  background-color: #40404182;
  backdrop-filter: blur(1px);
  border-radius: 9px;
  padding: 1rem;
  gap: 0.7rem;
  transition: all 0.5s;
  /* overflow: hidden; */
  position: sticky;
  display: flex;
  top: 9rem;
  flex-direction: column;
  align-items: center;
}
.box--filtros h3 {
  font-family: var(--font7);
  letter-spacing: 1px;
  font-weight: 600;
  display: block;
  font-size: 1rem;
}
.box--filtros h2 {
  color: white;
  font-size: 1.5rem;

  font-weight: 400;
  font-family: var(--font6);
  text-transform: capitalize;
  text-align: start;
}
.filtro--price label:hover,
.filtro--rating label:hover {
  text-decoration: underline;
}
.filter input:checked ~ label,
.filter input:checked ~ label {
  text-decoration: underline;
}
.filtro--price label,
.filtro--rating label {
  display: block;
}
label {
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font6);
  color: white;
  text-transform: capitalize;
  text-align: center;
  transition: all 0.5s;
}
.marcas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
button.btn--filtrar:hover {
  border-color: white;
  box-shadow: inset 0 0 5px white;
  width: 77%;
}
button.btn--filtrar {
  width: 80%;
  border: 2px solid transparent;
  border-bottom: 2px solid white;
}
.filtro--brand {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
select#combobox:hover {
  background-color: #e0e0e081;
  color: black;
}
select#combobox:focus {
  border-color: #000000;
  background-color: #fff;
  color: #000;
}
select#combobox {
  /* border: none; */
  appearance: none;
  -webkit-appearance: none;
  /* width: 200px; */
  width: 100%;
  border-radius: 5px;
  transition: all 0.5s;
  /* height: 40px; */
  border: 1px solid #fff;
  background-color: #f0f0f000;
  color: #fff;
  font-size: 16px;
  padding: 0.4rem;
  /* background: none; */
  font-family: var(--font7);
  /* color: white; */
  /* padding: 0.2rem; */
  /* cursor: pointer; */
}
option {
  /* background-color: black; */
  background-color: #f0f0f0;
  color: #333;
  font-size: 16px;
  font-family: var(--font7);
}