@charset "UTF-8";
.bannerHero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38.75rem;
  padding: 2.5rem;
  padding-right: 0;
  background-color: #1B1512;
  background-image: linear-gradient(90deg, var(--color1Low) 25%, rgba(233, 163, 25, 0.07) 75%), url("./../assets/imgSpace.png");
  background-size: cover, 240px 280.8px;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  border: 1px solid var(--black);
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .bannerHero {
    background-image: linear-gradient(180deg, var(--color1Low) 25%, rgba(233, 163, 25, 0.07) 75%), url("./../assets/imgSpace.png");
    flex-direction: column;
    gap: 13.75rem;
    height: -moz-max-content;
    height: max-content;
    padding-right: 2.5rem;
  }
}
.bannerHero .bHLeft {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .bannerHero .bHLeft {
    gap: 2.5rem;
  }
}
.bannerHero .bHLeft h1 {
  font-family: var(--fontTitulos);
  font-size: 2.25rem;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
.bannerHero .bHLeft h1 .boldFY {
  font-family: var(--fontBase);
  color: var(--white);
  font-weight: bold;
}
.bannerHero .bHLeft h1 .boldFY span {
  color: #FFD700;
  font-weight: bold;
}
.bannerHero .bHLeft h1 b {
  color: var(--white);
  font-weight: bold;
}
.bannerHero .bHLeft p {
  font-size: 1.375rem;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
.bannerHero .bHLeft p b {
  color: var(--white);
  font-weight: bold;
}
.bannerHero .bHLeft ul {
  list-style-position: inside;
  padding: 0; /* Remove o recuo padrão do navegador */
}
@media screen and (max-width: 1024px) {
  .bannerHero .bHLeft ul {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
  }
}
.bannerHero .bHLeft ul li::marker {
  font-size: 1rem;
  color: var(--white);
}
.bannerHero .bHLeft ul li {
  font-size: 1rem;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
.bannerHero .bHLeft ul li .boldFY {
  color: var(--white);
  font-weight: bold;
}
.bannerHero .bHLeft ul li .boldFY span {
  color: #FFD700;
  font-weight: bold;
}
.bannerHero .bHLeft ul li b {
  color: var(--white);
  font-weight: bold;
}
.bannerHero .bHLeft .myBtn {
  all: unset;
  outline: unset !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: -moz-max-content;
  width: max-content;
  height: 3.25rem;
  padding: 0 2.25rem;
  font-size: 1rem;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  font-weight: bold;
  background-color: #1B1512;
  border: 1px solid var(--white);
  transition: 0.7s ease-in-out;
}
.bannerHero .bHLeft .myBtn .myBtnDiceLogo {
  transform: rotateZ(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  transition: 0.7s ease-in-out;
}
.bannerHero .bHLeft .myBtn:hover,
.bannerHero .bHLeft .myBtn:focus {
  color: var(--white);
  border: 1px solid var(--color1);
  transition: 0.3s ease-in-out;
}
.bannerHero .bHLeft .myBtn:hover .myBtnDiceLogo,
.bannerHero .bHLeft .myBtn:focus .myBtnDiceLogo {
  transform: rotateZ(135deg);
  transition: 0.3s ease-in-out;
}
.bannerHero .bHRight {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  padding: 0 7.375rem;
}
.bannerHero .bHRight .bHYAndDice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  font-size: 22.5rem;
  height: 22.5rem;
  color: #FFD700;
  text-shadow: var(--textShadow-Black);
  font-weight: bold;
  opacity: 0.25;
}
.bannerHero .bHRight .bHYAndDice .diceLogo {
  position: absolute;
  top: 0;
  transform: translateY(-100%) rotateZ(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: none;
  width: 11.25rem;
  height: 11.25rem;
  animation: diceBigLogoRotate 16s linear infinite;
}
@keyframes diceBigLogoRotate {
  0% {
    transform: translateY(-100%) rotateZ(45deg);
    filter: none;
  }
  25% {
    filter: drop-shadow(0 0 11.25rem var(--black)) drop-shadow(0 0 11.25rem #FFD700);
  }
  50% {
    transform: translateY(-100%) rotateZ(405deg);
    filter: none;
  }
  75% {
    filter: drop-shadow(0 0 11.25rem var(--black)) drop-shadow(0 0 11.25rem #FFD700);
  }
  100% {
    transform: translateY(-100%) rotateZ(765deg);
    filter: none;
  }
}

.gridWrapper,
#emDestaque {
  scroll-margin-top: 7.125rem; /* Ajuste o valor para a altura do seu header */
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 1.125rem;
  width: 100%;
  height: 100%;
}
.gridWrapper .gridTitle,
#emDestaque .gridTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontTitulos);
  font-size: 2.25rem;
  height: 2.25rem;
  color: var(--white);
  text-shadow: var(--textShadow-Black);
  font-weight: bold;
}
.gridWrapper .gridCardsArticle,
#emDestaque .gridCardsArticle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 1.125rem;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .gridWrapper .gridCardsArticle,
  #emDestaque .gridCardsArticle {
    grid-template-columns: repeat(1, 1fr);
  }
}
.gridWrapper .gridCardsArticle .gridArticle,
#emDestaque .gridCardsArticle .gridArticle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #1B1512;
  border: 1px solid var(--black);
  transition: 0.7s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .desconto,
#emDestaque .gridCardsArticle .gridArticle .desconto {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  height: 2rem;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 0.5rem;
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  font-weight: bold;
  background-color: #1B1512;
  color: var(--color1);
  border: 1px solid var(--white);
  transition: 0.7s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .descontoVermelho,
#emDestaque .gridCardsArticle .gridArticle .descontoVermelho {
  color: #dc3545;
  background-image: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 25%, rgba(220, 53, 69, 0.25) 75%);
  border: 1px solid #dc3545;
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .descontoAmarelo,
#emDestaque .gridCardsArticle .gridArticle .descontoAmarelo {
  color: #FFE7A0;
  background-image: linear-gradient(90deg, rgba(255, 231, 160, 0.25) 25%, rgba(255, 231, 160, 0.25) 75%);
  border: 1px solid #FFE7A0;
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .descontoVerde,
#emDestaque .gridCardsArticle .gridArticle .descontoVerde {
  color: #A8E4A0;
  background-image: linear-gradient(90deg, rgba(168, 228, 160, 0.25) 25%, rgba(168, 228, 160, 0.25) 75%);
  border: 1px solid #A8E4A0;
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .containerImg,
#emDestaque .gridCardsArticle .gridArticle .containerImg {
  position: relative;
  display: inline-block; /* Faz o container ter exatamente o tamanho da imagem */
}
.gridWrapper .gridCardsArticle .gridArticle .containerImg img,
#emDestaque .gridCardsArticle .gridArticle .containerImg img {
  display: block; /* Remove um pequeno espaço vazio que imagens costumam ter na base */
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.gridWrapper .gridCardsArticle .gridArticle .containerImg .overlayImg,
#emDestaque .gridCardsArticle .gridArticle .containerImg .overlayImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--black025);
  pointer-events: none;
  transition: 0.7s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent,
#emDestaque .gridCardsArticle .gridArticle .gridContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background-image: linear-gradient(90deg, rgba(168, 101, 35, 0.07) 25%, rgba(168, 101, 35, 0.07) 75%);
  border-top: 1px solid var(--black);
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperTitleAndCategory,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperTitleAndCategory {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  height: 100%;
  max-height: -moz-max-content;
  max-height: max-content;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: -moz-max-content;
  max-width: max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle .gridDiceLogo,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle .gridDiceLogo {
  transform: rotateZ(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  transition: 0.7s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle h3,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontTitulos);
  font-size: 1rem;
  height: 1rem;
  min-width: -moz-max-content;
  min-width: max-content;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  font-weight: bold;
  -webkit-text-decoration: underline solid var(--white);
          text-decoration: underline solid var(--white);
  transition: 0.7s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperTitleAndCategory .category,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperTitleAndCategory .category {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  height: 1rem;
  min-width: -moz-max-content;
  min-width: max-content;
  color: var(--white);
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  height: 100%;
  max-height: -moz-max-content;
  max-height: max-content;
  gap: 1rem;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice p,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice p {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--white);
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: 100%;
  max-width: -moz-max-content;
  max-width: max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contador,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contador {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 6.75rem;
  max-width: 6.75rem;
  font-size: 0.75rem;
  height: 1.75rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  padding: 0.5rem;
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  background-color: #1B1512;
  color: var(--color1);
  border: 1px solid var(--white);
  transition: 0.7s ease-in-out;
}
@media screen and (max-width: 1024px) {
  .gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contador,
  #emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contador {
    min-width: -moz-max-content;
    min-width: max-content;
    max-width: -moz-max-content;
    max-width: max-content;
  }
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contadorVermelho,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contadorVermelho {
  color: #dc3545;
  background-image: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 25%, rgba(220, 53, 69, 0.25) 75%);
  border: 1px solid #dc3545;
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contadorAmarelo,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contadorAmarelo {
  color: #FFE7A0;
  background-image: linear-gradient(90deg, rgba(255, 231, 160, 0.25) 25%, rgba(255, 231, 160, 0.25) 75%);
  border: 1px solid #FFE7A0;
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contadorVerde,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contadorVerde {
  color: #A8E4A0;
  background-image: linear-gradient(90deg, rgba(168, 228, 160, 0.25) 25%, rgba(168, 228, 160, 0.25) 75%);
  border: 1px solid #A8E4A0;
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .price,
#emDestaque .gridCardsArticle .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .price {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  height: 1rem;
  color: var(--white);
  text-shadow: var(--textShadow-Black);
  font-weight: bold;
  transition: 0.7s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .btnCarrinho,
#emDestaque .gridCardsArticle .gridArticle .gridContent .btnCarrinho {
  all: unset;
  outline: unset !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 2rem;
  padding: 0.5rem;
  font-size: 1rem;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  font-weight: bold;
  background-color: #1B1512;
  border: 1px solid var(--white);
  transition: 0.7s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .btnCarrinho:hover,
.gridWrapper .gridCardsArticle .gridArticle .gridContent .btnCarrinho:focus,
#emDestaque .gridCardsArticle .gridArticle .gridContent .btnCarrinho:hover,
#emDestaque .gridCardsArticle .gridArticle .gridContent .btnCarrinho:focus {
  color: var(--white);
  border-color: var(--color1);
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .btnCarrinhoAtivo,
#emDestaque .gridCardsArticle .gridArticle .gridContent .btnCarrinhoAtivo {
  color: #A8E4A0;
  background-image: linear-gradient(90deg, rgba(168, 228, 160, 0.25) 25%, rgba(168, 228, 160, 0.25) 75%);
  border: 1px solid #A8E4A0;
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle .gridContent .btnCarrinhoAtivo:hover,
.gridWrapper .gridCardsArticle .gridArticle .gridContent .btnCarrinhoAtivo:focus,
#emDestaque .gridCardsArticle .gridArticle .gridContent .btnCarrinhoAtivo:hover,
#emDestaque .gridCardsArticle .gridArticle .gridContent .btnCarrinhoAtivo:focus {
  color: var(--white);
  background-image: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 25%, rgba(220, 53, 69, 0.25) 75%);
  border: 1px solid var(--color1);
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle,
#emDestaque .gridCardsArticle {
  /* :hover nos cards */
}
.gridWrapper .gridCardsArticle .gridArticle:hover .overlayImg,
.gridWrapper .gridCardsArticle .gridArticle:focus .overlayImg,
#emDestaque .gridCardsArticle .gridArticle:hover .overlayImg,
#emDestaque .gridCardsArticle .gridArticle:focus .overlayImg {
  background-color: rgba(233, 163, 25, 0.07);
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle:hover .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle .gridDiceLogo,
.gridWrapper .gridCardsArticle .gridArticle:focus .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle .gridDiceLogo,
#emDestaque .gridCardsArticle .gridArticle:hover .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle .gridDiceLogo,
#emDestaque .gridCardsArticle .gridArticle:focus .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle .gridDiceLogo {
  transform: rotateZ(135deg);
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle:hover .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle h3,
.gridWrapper .gridCardsArticle .gridArticle:focus .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle h3,
#emDestaque .gridCardsArticle .gridArticle:hover .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle h3,
#emDestaque .gridCardsArticle .gridArticle:focus .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle h3 {
  color: var(--white);
  text-decoration-color: var(--color1);
  text-underline-offset: 0.25rem;
  transition: 0.3s ease-in-out;
}
.gridWrapper .gridCardsArticle .gridArticle:hover .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .price,
.gridWrapper .gridCardsArticle .gridArticle:focus .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .price,
#emDestaque .gridCardsArticle .gridArticle:hover .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .price,
#emDestaque .gridCardsArticle .gridArticle:focus .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .price {
  color: var(--color1);
  transition: 0.3s ease-in-out;
}

.bannerSecond {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38.75rem;
  background-color: #1B1512;
}
@media screen and (max-width: 1024px) {
  .bannerSecond {
    height: 65rem;
  }
}
.bannerSecond .bannerSecondImgs {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(6, 1fr);
  /* Define duas linhas com a mesma altura */
  grid-template-rows: repeat(2, 50%);
  width: 100%;
  height: 100%;
}
.bannerSecond .bannerSecondImgs .bannerSecondImg1,
.bannerSecond .bannerSecondImgs .bannerSecondImg2,
.bannerSecond .bannerSecondImgs .bannerSecondImg3,
.bannerSecond .bannerSecondImgs .bannerSecondImg4,
.bannerSecond .bannerSecondImgs .bannerSecondImg5,
.bannerSecond .bannerSecondImgs .bannerSecondImg6,
.bannerSecond .bannerSecondImgs .bannerSecondImg7,
.bannerSecond .bannerSecondImgs .bannerSecondImg8,
.bannerSecond .bannerSecondImgs .bannerSecondImg9 {
  width: 100%;
  height: 100%; /* Elas vão obedecer ao tamanho da célula da Grid */
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  border: 1px solid var(--black);
}
.bannerSecond .bannerSecondImgs .bannerSecondImg1 {
  grid-column: 1/2;
}
@media screen and (max-width: 1024px) {
  .bannerSecond .bannerSecondImgs .bannerSecondImg1 {
    display: none;
  }
}
.bannerSecond .bannerSecondImgs .bannerSecondImg2 {
  grid-column: 2/3;
}
@media screen and (max-width: 1024px) {
  .bannerSecond .bannerSecondImgs .bannerSecondImg2 {
    grid-column: 1/4;
  }
}
.bannerSecond .bannerSecondImgs .bannerSecondImg3 {
  grid-column: 3/4;
}
@media screen and (max-width: 1024px) {
  .bannerSecond .bannerSecondImgs .bannerSecondImg3 {
    display: none;
  }
}
.bannerSecond .bannerSecondImgs .bannerSecondImg4 {
  grid-column: 4/5;
}
@media screen and (max-width: 1024px) {
  .bannerSecond .bannerSecondImgs .bannerSecondImg4 {
    display: none;
  }
}
.bannerSecond .bannerSecondImgs .bannerSecondImg5 {
  grid-column: 5/6;
}
@media screen and (max-width: 1024px) {
  .bannerSecond .bannerSecondImgs .bannerSecondImg5 {
    display: none;
  }
}
.bannerSecond .bannerSecondImgs .bannerSecondImg6 {
  grid-column: 6/7;
}
@media screen and (max-width: 1024px) {
  .bannerSecond .bannerSecondImgs .bannerSecondImg6 {
    grid-column: 4/7;
  }
}
.bannerSecond .bannerSecondImgs .bannerSecondImg7 {
  grid-column: 1/3;
}
@media screen and (max-width: 1024px) {
  .bannerSecond .bannerSecondImgs .bannerSecondImg7 {
    display: none;
  }
}
.bannerSecond .bannerSecondImgs .bannerSecondImg8 {
  grid-column: 3/5;
}
@media screen and (max-width: 1024px) {
  .bannerSecond .bannerSecondImgs .bannerSecondImg8 {
    display: none;
  }
}
.bannerSecond .bannerSecondImgs .bannerSecondImg9 {
  grid-column: 5/7;
}
@media screen and (max-width: 1024px) {
  .bannerSecond .bannerSecondImgs .bannerSecondImg9 {
    grid-column: 1/7;
  }
}
.bannerSecond .bannerSecondOverlay {
  position: absolute;
  inset: 0;
  background-color: var(--black075);
  background-image: linear-gradient(0deg, var(--color1Low) 50%, transparent 75%), linear-gradient(0deg, var(--black075) 50%, transparent 75%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid var(--black);
}
.bannerSecond .wrapperTexts {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  gap: 2.5rem;
  text-align: center;
  padding: 2.5rem;
  width: 100%;
  height: 100%;
}
.bannerSecond .wrapperTexts h2 {
  font-family: var(--fontTitulos);
  font-size: 2.25rem;
  height: 2.25rem;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
@media screen and (max-width: 1024px) {
  .bannerSecond .wrapperTexts h2 {
    height: auto;
  }
}
.bannerSecond .wrapperTexts h2 b {
  color: var(--white);
  font-weight: bold;
}
.bannerSecond .wrapperTexts p {
  font-size: 1.375rem;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
.bannerSecond .wrapperTexts p b {
  color: var(--white);
  font-weight: bold;
}
.bannerSecond .wrapperTexts .myBtn {
  all: unset;
  outline: unset !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: -moz-max-content;
  width: max-content;
  height: 3.25rem;
  padding: 0 2.25rem;
  font-size: 1rem;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  font-weight: bold;
  background-color: #1B1512;
  border: 1px solid var(--white);
  transition: 0.7s ease-in-out;
}
.bannerSecond .wrapperTexts .myBtn .myBtnDiceLogo {
  transform: rotateZ(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  transition: 0.7s ease-in-out;
}
.bannerSecond .wrapperTexts .myBtn:hover,
.bannerSecond .wrapperTexts .myBtn:focus {
  color: var(--white);
  border: 1px solid var(--color1);
  transition: 0.3s ease-in-out;
}
.bannerSecond .wrapperTexts .myBtn:hover .myBtnDiceLogo,
.bannerSecond .wrapperTexts .myBtn:focus .myBtnDiceLogo {
  transform: rotateZ(135deg);
  transition: 0.3s ease-in-out;
}

.bannerCaridade {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38.75rem;
  padding: 2.5rem;
  padding-left: 0;
  background-color: #1B1512;
  background-image: linear-gradient(90deg, rgba(121, 174, 111, 0.07) 25%, rgba(121, 174, 111, 0.25) 75%), url("./../assets/imgSpace.png");
  background-size: cover, 240px 280.8px;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  border: 1px solid var(--black);
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .bannerCaridade {
    flex-direction: column;
    gap: 2.5rem;
    padding: 2.5rem 0;
    background-image: linear-gradient(180deg, rgba(121, 174, 111, 0.07) 25%, rgba(121, 174, 111, 0.25) 75%), url("./../assets/imgSpace.png");
    height: -moz-max-content;
    height: max-content;
  }
}
@media screen and (max-height: 600px) {
  .bannerCaridade {
    padding: 2.5rem;
  }
}
.bannerCaridade .bCLeft {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  padding-right: 2.5rem;
}
@media screen and (max-width: 1024px) {
  .bannerCaridade .bCLeft {
    padding-right: 0;
  }
}
@media screen and (max-height: 600px) {
  .bannerCaridade .bCLeft {
    padding-right: 0;
  }
}
.bannerCaridade .bCLeft .handIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32.5rem;
  height: 32.5rem;
  fill: #FFD700;
  opacity: 0.25;
}
@media screen and (max-width: 500px) {
  .bannerCaridade .bCLeft .handIcon {
    width: 22.5rem;
    height: 22.5rem;
  }
}
.bannerCaridade .bCRight {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: right;
}
@media screen and (max-width: 1024px) {
  .bannerCaridade .bCRight {
    gap: 2.5rem;
    padding: 0 2.5rem;
  }
}
@media screen and (max-height: 600px) {
  .bannerCaridade .bCRight {
    padding: 0;
  }
}
.bannerCaridade .bCRight h2 {
  font-family: var(--fontTitulos);
  font-size: 2.25rem;
  color: #79AE6F;
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
.bannerCaridade .bCRight h2 .boldFY {
  font-family: var(--fontBase);
  color: var(--white);
  font-weight: bold;
}
.bannerCaridade .bCRight h2 .boldFY span {
  color: #FFD700;
  font-weight: bold;
}
.bannerCaridade .bCRight h2 b {
  color: var(--white);
  font-weight: bold;
}
.bannerCaridade .bCRight h3 {
  font-family: var(--fontTitulos);
  font-size: 1.375rem;
  color: #79AE6F;
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
.bannerCaridade .bCRight h3 b {
  color: var(--white);
  font-weight: bold;
}
.bannerCaridade .bCRight p {
  font-size: 1rem;
  color: #79AE6F;
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
.bannerCaridade .bCRight p b {
  color: var(--white);
  font-weight: bold;
}
.bannerCaridade .bCRight .myBtn {
  all: unset;
  outline: unset !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: -moz-max-content;
  width: max-content;
  height: 3.25rem;
  padding: 0 2.25rem;
  font-size: 1rem;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  font-weight: bold;
  background-color: #1B1512;
  border: 1px solid var(--white);
  transition: 0.7s ease-in-out;
}
.bannerCaridade .bCRight .myBtn .myBtnDiceLogo {
  transform: rotateZ(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  transition: 0.7s ease-in-out;
}
.bannerCaridade .bCRight .myBtn:hover,
.bannerCaridade .bCRight .myBtn:focus {
  color: var(--white);
  border: 1px solid var(--color1);
  transition: 0.3s ease-in-out;
}
.bannerCaridade .bCRight .myBtn:hover .myBtnDiceLogo,
.bannerCaridade .bCRight .myBtn:focus .myBtnDiceLogo {
  transform: rotateZ(135deg);
  transition: 0.3s ease-in-out;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--black075);
  background-image: linear-gradient(90deg, rgba(168, 101, 35, 0.07) 25%, rgba(168, 101, 35, 0.07) 75%);
  z-index: 98;
  /* Estado inicial: Invisível */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease-in-out;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: calc(26.1738125rem + 1px); /* Ajuste conforme sua necessidade */
  height: 100%;
  z-index: 99;
  display: flex; /* Pode manter o flex aqui fixo */
  flex-direction: column;
  background-color: #1B1512;
  border-left: 1px solid var(--color1);
  /* Estado inicial: Escondido para a direita */
  opacity: 0;
  transform: translateX(100%);
  transition: 0.7s ease-in-out;
}

/* Classes que serão adicionadas via JS */
.overlay.active {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease-in-out;
}

.drawer.active {
  opacity: 1;
  transform: translateX(0);
  transition: 0.3s ease-in-out;
}

.carrinhoHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 6rem;
  background-color: #1B1512;
  background-image: linear-gradient(90deg, rgba(168, 101, 35, 0.07) 25%, rgba(168, 101, 35, 0.07) 75%);
  border-bottom: 1px solid var(--color1);
}

.carrinhoTitulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--fontTitulos);
  font-size: 1.375rem;
  height: 1.375rem;
  font-weight: bold;
  color: var(--white);
}
.carrinhoTitulo div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  width: 1.375rem;
  height: 1.375rem;
}

.carrinhoFechar {
  all: unset;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color1);
  font-weight: bold;
  font-size: 2.25rem;
  height: 2.25rem;
  transition: 0.7s ease-in-out;
}

.drawer.active .carrinhoHeader .carrinhoFechar {
  display: flex !important;
}

.carrinhoFechar:hover,
.carrinhoFechar:focus {
  color: var(--white);
  transition: 0.3s ease-in-out;
}

.carrinhoLista {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  background-color: #1B1512;
}

.carrinhoVazio {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-align: center;
  font-size: 1rem;
  height: 100%;
}

.carrinhoItem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: -moz-max-content;
  height: max-content;
  padding: 1rem;
  background-color: #1B1512;
  border: 1px solid var(--baseSoft);
}

.carrinhoItemImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  opacity: 0.12;
}

.carrinhoItemInfo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.125rem;
  width: 100%;
  height: 100%;
  flex: 1;
}

.carrinhoItemTitulo {
  font-size: 1rem;
  height: 1rem;
  font-weight: bold;
  color: var(--white);
}

.carrinhoItemPreco {
  font-size: 1rem;
  height: 1rem;
  font-weight: bold;
  color: var(--color1);
}

.carrinhoItemRemover {
  all: unset;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc3545;
  font-weight: bold;
  font-size: 1.375rem;
  height: 1.375rem;
  transition: 0.7s ease-in-out;
}

.carrinhoItemRemover:hover,
.carrinhoItemRemover:focus {
  color: var(--white);
  transition: 0.3s ease-in-out;
}

.carrinhoFooter {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4.6875rem 2.5rem;
  background-color: #1B1512;
  background-image: linear-gradient(90deg, rgba(168, 101, 35, 0.07) 25%, rgba(168, 101, 35, 0.07) 75%);
  border-top: 1px solid var(--color1);
}

.drawer.active .carrinhoFooter {
  gap: 1.125rem;
  padding: 2.5rem;
}

.carrinhoTotalWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carrinhoTotalLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  height: 1.375rem;
  font-weight: bold;
  color: var(--white);
}

.carrinhoTotalValor {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  height: 1.375rem;
  font-weight: bold;
  color: var(--color1);
}

.carrinhoAcoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
}

.carrinhoAcoes .myBtn {
  all: unset;
  outline: unset !important;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: -moz-max-content;
  width: max-content;
  height: 3.25rem;
  padding: 0 2.25rem;
  font-size: 1rem;
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  font-weight: bold;
  background-color: #1B1512;
  color: #dc3545;
  background-image: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 25%, rgba(220, 53, 69, 0.25) 75%);
  border: 1px solid #dc3545;
  transition: 0.7s ease-in-out;
}

.drawer.active .carrinhoFooter .carrinhoAcoes .myBtn {
  display: flex !important;
}

.carrinhoAcoes .myBtn:last-child {
  color: #A8E4A0;
  background-image: linear-gradient(90deg, rgba(168, 228, 160, 0.25) 25%, rgba(168, 228, 160, 0.25) 75%);
  border: 1px solid #A8E4A0;
}

.carrinhoAcoes .myBtn .myBtnDiceLogo {
  transform: rotateZ(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  transition: 0.7s ease-in-out;
}

.carrinhoAcoes .myBtn:hover,
.carrinhoAcoes .myBtn:focus {
  color: var(--white);
  border: 1px solid var(--color1);
  transition: 0.3s ease-in-out;
}

.carrinhoAcoes .myBtn:hover .myBtnDiceLogo,
.carrinhoAcoes .myBtn:focus .myBtnDiceLogo {
  transform: rotateZ(135deg);
  transition: 0.3s ease-in-out;
}

/* ── TOASTS ──────────────────────────────────────────────────*/
.fyToastContainer {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  pointer-events: none;
}

.fyToast {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  font-family: "Nunito";
  font-size: 0.9375rem;
  font-weight: bold;
  background-color: #1B1512;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.fyToast--visivel {
  opacity: 1;
  transform: translateY(0);
}

.fyToastIcone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: bold;
  flex-shrink: 0;
}

.fyToast--sucesso {
  color: #A8E4A0;
  border: 1px solid #A8E4A0;
  box-shadow: var(--boxShadow-Black), 0 0 0.5rem rgba(168, 228, 160, 0.25);
}

.fyToast--sucesso .fyToastIcone {
  background-color: rgba(168, 228, 160, 0.2);
}

.fyToast--aviso {
  color: #FFE7A0;
  border: 1px solid #FFE7A0;
  box-shadow: var(--boxShadow-Black), 0 0 0.5rem rgba(255, 231, 160, 0.25);
}

.fyToast--aviso .fyToastIcone {
  background-color: rgba(255, 231, 160, 0.2);
}

/* ── MODAL DE CONFIRMAÇÃO ────────────────────────────────────*/
.fyModal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: var(--black075);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}

.fyModal--aberto {
  opacity: 1;
  pointer-events: all;
}

.fyModalContent {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 22rem;
  padding: 2rem;
  background-color: #1B1512;
  background-image: var(--linearFullColors);
  border: 1px solid var(--color1);
  box-shadow: var(--boxShadow1VarMax);
  transform: translateY(1rem);
  transition: transform 0.25s ease-in-out;
}

.fyModal--aberto .fyModalContent {
  transform: translateY(0);
}

.fyModalContent--perigo {
  border-color: #dc3545;
  box-shadow: var(--boxShadow-Black), 0 0 0.5625rem rgba(220, 53, 69, 0.4);
}

.fyModalTitulo {
  font-family: "Montserrat";
  font-size: 1.125rem;
  font-weight: bold;
  color: var(--white);
  text-shadow: var(--textShadow-Black);
}

.fyModalMensagem {
  font-size: 0.9375rem;
  color: var(--color1);
  line-height: 1.6;
}

.fyModalMensagem strong {
  color: var(--white);
}

.fyModalAcoes {
  display: flex;
  gap: 0.75rem;
}

.fyModalBtnCancelar,
.fyModalBtnConfirmar {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 3.25rem;
  font-family: "Nunito";
  font-size: 1rem;
  font-weight: bold;
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  background-color: #1B1512;
  border: 1px solid var(--baseSoft);
  color: var(--color1);
  transition: 0.3s ease-in-out;
}

.fyModalBtnCancelar:hover {
  color: var(--white);
  border-color: var(--color1);
}

.fyModalBtnConfirmar--sucesso {
  color: #A8E4A0;
  border-color: #A8E4A0;
  background-image: linear-gradient(90deg, rgba(168, 228, 160, 0.25) 25%, rgba(168, 228, 160, 0.25) 75%);
}

.fyModalBtnConfirmar--sucesso:hover {
  color: var(--white);
  border-color: var(--white);
}

.fyModalBtnConfirmar--perigo {
  color: #dc3545;
  border-color: #dc3545;
  background-image: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 25%, rgba(220, 53, 69, 0.25) 75%);
}

.fyModalBtnConfirmar--perigo:hover {
  color: var(--white);
  border-color: var(--white);
}/*# sourceMappingURL=home.css.map */