* {
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

.novedades {
  width: 100%;
  padding: 1em;
  background-color: #fff;
}

.destacada-lista {
  border: 1px solid #807d7d;
  width: 60%;
  transition: 0.35s all;
  box-shadow: 1px 1px 1em #a9a7a7;
  & > a {
    display: flex;

    & .img-conteiner {
      width: 60%;
    }
    & .novedad-info {
      width: 100%;
      padding: 0.5em;
      display: flex;
      align-items: center;
      gap: 1em;
      flex-direction: column;

      & h1 {
        font-size: 2.1rem;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 0;
        text-shadow: 0px 10px 12.1px #8c7a7a;
      }
      .resumen-conteiner {
        display: flex;
        align-items: center;
        width: 80%;
        & > p {
          color: #4a1c1c;
          text-align: center;
          font-size: 1rem;
        }
      }
    }
  }

  
}
.pagination{
  margin: auto;
  margin-top: 5em;
  margin-bottom: 1%;

}
.pagination li {
  display: inline;
  margin: 0 5px;
}
.pagination li.active a {
  color: rgb(214, 55, 55);
  text-shadow: 0px 5px 1em #4a1c1c;
}

.destacada-lista:hover {
  transform: scale(1.02);
}

.novedades .category-conteiner .cards-category {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  width: 70%;
  justify-items: center;

  & .novedad-card-list {
    & a {
      flex-direction: column;
    }
  }
}

.grid-novedad {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 5px;
  justify-content: space-between;
  align-items: center;
}

.novedades .category-conteiner .cards-category li {
  max-width: none;
  width: 85%;
}

.novedades .category-conteiner .destacada-lista .img-conteiner {
  justify-content: center;
  display: flex;
  max-height: none;
  border: none;
}
.destacada-lista {
  margin-bottom: 1em;
}
.novedades .destacada-lista .img-conteiner img {
  width: 100%;
  padding: 0;
}

.destacada-lista .btn-conteiner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.destacada-lista .btn-conteiner a {
  background-color: transparent;
  border: 1.9px solid var(--colorPrimario);
  text-align: center;
  color: var(--colorPrimario);
  padding: 0.6em;
  justify-content: center;
  text-align: center;
  border-radius: 2px;
  width: 50%;
}

.novedades .category-conteiner .destacada-lista .novedades-categoria-conteiner {
  margin-top: 1em;
}

.novedades .category-conteiner .destacada-lista .btn-conteiner {
  width: 50%;
}

.novedades .category-conteiner li {
  max-width: 100%;
  transition: 0.25s all;
}
.novedades .category-conteiner li:hover {
  transform: translateY(-5px);
}

#mark {
  margin-right: 1em;
}

.novedades-categoria-conteiner {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.novedades .category-conteiner h3 {
  font-size: 0.7rem;
  padding: 0.8em;
  background-color: rgb(88, 31, 200);
  display: inline;
  color: #eee;
  letter-spacing: 0.7px;
  border-radius: 4px;
  margin: 0;
  margin-left: 2%;
}

.category-conteiner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.novedades-categoria-conteiner h2 {
  background-color: #cacaca;
  font-size: 0.5rem;
}
.category-conteiner .cards-category {
  width: 90%;
  display: flex;
  gap: 1em;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.category-conteiner .cards-category li a {
  display: flex;
}
.category-conteiner .cards-category li {
  border: 1px solid #eee;
  justify-content: space-between;
  max-width: 30em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  box-shadow: 1px 3px 3px 3px #cacaca;
}
.category-conteiner .img-conteiner {
  width: 100%;
  background-color: #eee;
  display: flex;
  justify-content: center;
  padding: 0.5em;
  border-bottom: 2px solid rgb(128, 91, 91);
  max-height: 15em;
}

.category-conteiner .img-conteiner img {
  width: 90%;
  padding: 0.1em;
  object-fit: contain;
}

.title-conteiner {
  padding: 0.5em;
  max-height: 3em;
}
.category-conteiner .title-conteiner h2 {
  font-size: 0.9rem;
  margin: 0;
  text-align: start;
  color: rgb(94, 94, 94);
  text-align: center;
}
.fecha-conteiner {
  padding: 0.5em;
}

.category-conteiner .fecha-conteiner h3 {
  font-size: 0.8rem;
  background-color: #eee;
  width: auto;
  display: inline;
  padding: 0.4em;
  color: #7b7b7b;
}

.category-conteiner .resumen-conteiner {
  width: 90%;
  padding: 0.7em;
  min-height: 10em;
  overflow: hidden;
}

.category-conteiner .resumen-conteiner p {
  color: #6d6d6d;
  padding: 0;
  text-align: justify;
  font-size: 0.9em;
}
.btn-conteiner {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.5em;
}

.btn-conteiner img {
  width: 2em;
  filter: invert(1);
}

.btn-conteiner a {
  width: 100%;
  text-decoration: none;
  text-align: start;
  padding: 0.2em 0.3em 0.2em 0.3em;
  background-color: indianred;
  color: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media only screen and (max-width: 780px) {
  .destacada-lista {
    width: 100%;
    & a {
      width: 100%;
      background-color: #f7ebd4;
      flex-direction: column;

      & .img-conteiner {
        background-color: transparent;
        & img{
          border-radius: 10px;
        }
      }

      & .novedad-info {
        align-items: flex-start;

        & h1 {
          font-size: 1.4rem;
          text-align: center;
          text-wrap: balance;
        }
        & .resumen-conteiner {
          width: 100%;
        }
      }
    }
  }

  .novedades .category-conteiner {
    align-items: flex-start;
    width: 100%;
    & .img-conteiner {
      width: 100%;
    }

    & .cards-category {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;

      & li {
        width: 100%;
      }

      & .grid-novedad {
        width: 100%;

        & .title-conteiner h2 {
          font-size: 0.8rem;
        }
        & .resumen-conteiner {
          padding: 0.7em;
        }
        & p {
          font-size: 0.7rem;
        }
      }
    }
  }
}