:root {
  --azClaro: #99cdf5;
  --azMedio: #306ad6;
  --azEsccuro: #30348C;
  --bco: #F5FAFA;
  --pto:#0D0D0D;
  --verm: #FF3334;
  --vermEsc: #bc292a;
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: "Roboto", serif;
}

section {
  margin: 20px;
}

.produtoTitle {
  margin-top: 50px;
  background-color: var(--azEsccuro);
  color: var(--bco);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  gap: 20px;
}

.produtoTitle h2 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  display: inline;
}

.produtoTitle img {

  width: 50px;
  display: inline;
}


.scroll-x {  /* INICIO DA BARRA DE ROLAGEM DE PRODUTOS PERSONALIZADAS*/
  max-width: 100%;
  overflow-x: auto;
}

.produtos::-webkit-scrollbar {
  display: none; /* Oculta a barra de rolagem no Chrome, Safari e Opera */
}

.produtos {
  scrollbar-width: none; /* Oculta a barra de rolagem no Firefox */
  -ms-overflow-style: none; /* Oculta a barra de rolagem no IE/Edge */
  
  --size: clamp(12rem, 1rem + 50vw, 20rem);
  --gutter: 2rem;
  --gap: 0.5rem;
  padding: 5px;
  scroll-snap-type: x mandatory;
  display: grid;
  padding-block: var(--gutter);
  grid-template-columns:
    [full-start] 1fr
    [content-start]
    min(var(--size), 100% - var(--gutter) * 2)
    [content-end]
    1fr [full-end];
}

.items {
  user-select: none;
  left: 10px;
  display: flex;
  gap: 10px;
  &::after {
    content: "";
    padding-inline-end: max(
      var(--gutter),
      (100vw - var(--size)) / 2 - var(--gutter)
    );
  }

  > * {
    display: grid;
    inline-size: var(--size);
    /*scroll-snap-align: center;*/
  }
}

@supports (animation-timeline: view()) {
  
  @keyframes scale {
    from,
    to {
      scale: var(--scale);
    }
    50% {
      scale: 1;
    }
    from {
      translate: var(--offset) 0;
    }

    to {
      translate: calc(var(--offset) * -1) 0;
    }
  }

  @keyframes fade {
    from,
    to {
      opacity: 0;
    }
    10%,
    90% {
      opacity: 1;
    }
  }
} /* FIM DO ESTIDO DA BARRA DE ROLAGEM LATERAL*/

.produto {
  
  box-shadow: 0px 0px 8px rgba(0, 0, 123, 0.186);
  border-radius: 10px;
  width: 40%;
  min-width: 250px;
  height: 450px;
  display: grid;
  margin: auto;
  grid-template-rows: 3fr 2fr;
}

.produto img {
  
  width: 70%;
  margin: auto;
  pointer-events: none;
}

.produto div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: 5px;
  width: 100%;
  height: 225px;
  padding: 0px 7px;
  background-color: var(--azEsccuro);
}

.produto div h3 {
  color: rgb(232, 232, 232);
  font-size: 18px;
  margin-top: 20px;
  height: 30%;
}

.produto div p {
  color: var(--azClaro);
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 0px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.produtos div span {
  color: var(--azClaro);
}

.produto div a {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  width: 140px;
  height: 45px;
  border: none;
  text-decoration: none;
  background-color: var(--bco);
  color: var(--azEsccuro);
  font-weight: 900;
  font-size: 21px;
  border-radius: 50px;
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.produto div a:hover {
  background-color: rgb(229, 229, 229);
  box-shadow: 0px 0px 3px var(--bco);
}