/* =================================================================== */
/* ========================== FONTES E ICONS ========================= */
/* =================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
/* =================================================================== */
/* ========================== PALETA DE CORES ======================== */
/* =================================================================== */
:root {
  --azul-primario: #0080ff;
  --azul-secundario: #002243;
  --azul-terciario: #101820;

  --cinza-claro: #f4f6f8;
  --cinza-medio: #e9e9e9;
  --cinza-escuro: #6c7884;

  --branco: #ffffff;

  --verde: #1ca800;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Instrument Sans";
}

.card-categoria {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 10px;
  padding-top: 40px;
  margin-top: 20px;
  padding-bottom: 40px;
}

.card-categoria a {
  display: flex;
  background-color: white;
  flex-direction: column;
  gap: 120px;
  margin-bottom: 30px;
  align-items: center;
  justify-content: center;
  width: 300px;
  text-decoration: none;
  color: var(--cinza-escuro);
  height: 450px;
  /* border: 1px solid var(--cinza-escuro); */
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;

  transition: 0.6s;
}

.card-categoria a:hover{
  transform: translateY(-30px);
}

.todas-categorias{
  background: linear-gradient(to bottom, var(--azul-secundario), var(--azul-terciario));
  border: 1px solid var(--cinza-escuro);
}

.todas-categorias i{
  font-size: 58px;
  width: 100px;
  height: 100px;
  rotate: -35deg;
  border: 3px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
    color: white;
}

.todas-categorias h2{
  font-size: 18px;
  color: white;
}

.descricao-produto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  gap: 5px;
  background-color: var(--azul-secundario);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  height: 150px;
  color: white;
}

.descricao-produto span {
  width: 80px;
  height: 2px;
  background-color: var(--azul-primario);
}

.descricao-seta {
  display: flex;
  gap: 20px;
  align-items: center;
}

.descricao-seta p {
  width: 250px;
  font-size: 14px;
}

.descricao-seta i {
  color: var(--azul-primario);
  font-size: 38px;
}

.card-categoria h2 {
  font-weight: 500;
}

.card-categoria img {
  width: 250px;
  padding-bottom: 170px;
}
/* These rules live in the card stylesheet because it is loaded after page styles. */
@media (max-width: 1024px) {
  .card-categoria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 28px 0;
  }
  .card-categoria a {
    width: 100%;
    min-width: 0;
    height: 380px;
    gap: 0;
    margin: 0;
  }
  .card-categoria img {
    width: 100%;
    max-width: 230px;
    padding: 24px 18px 140px;
    object-fit: contain;
  }
  .descricao-seta p { width: auto; }
}
@media (max-width: 640px) {
  .card-categoria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 10px 0 24px;
  }
  .card-categoria a {
    width: 100%;
    min-width: 0;
    height: 300px;
    gap: 0;
    margin: 0;
  }
  .card-categoria a:hover { transform: none; }
  .card-categoria img {
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 12px 10px 110px;
    object-fit: contain;
  }
  .descricao-produto { height: 125px; padding: 12px; }
  .descricao-produto h2 { font-size: 17px; }
  .descricao-seta { gap: 8px; min-width: 0; }
  .descricao-seta p { width: auto; min-width: 0; font-size: 12px; line-height: 1.35; }
  .descricao-seta i { flex: 0 0 auto; font-size: 25px; }
  .todas-categorias { gap: 18px; }
  .todas-categorias i { width: 68px; height: 68px; font-size: 42px; }
  .todas-categorias h2 { font-size: 14px; text-align: center; }
}
@media (max-width: 380px) {
  .card-categoria { grid-template-columns: 1fr; }
  .card-categoria a { height: 330px; }
}