/*Reset*/
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

/*Back to top*/
  .voltar-topo {
    text-align: center;
    margin-top: 40px;
    font-size: 1.1em;
  }
  .voltar-topo a {
    color: #532c16;
    text-decoration: none;
    font-weight: bold;
  }
  .voltar-topo a:hover {
    text-decoration: underline;
  }
    
/*Definições Gerais*/
  .corpo h2 {
    font-size: clamp(2em, 3vw, 2.5em);
    color: #532c16;
    padding-top: 0.3em;
    border-bottom: 0.01em solid #532c16;
    margin: 2em ;
  }
  h3 {
    font-size: 1.3em;
  }
  p {
    font-size: 1.1em;
  }
  h2, h3, p {
    margin: 3em 0.5em 1em 0.5em;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 8em; /*Vai ajustar conforme a altura do menu*/
  }


/*Menu de navegação*/
  nav.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #532c16;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .imagem_nav {
    width: 5em;
    height: auto;
  }
  .nav-links {
    list-style: none;
    display: flex;
    gap: 2em;
  }
  .nav-links li a {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2em;
    transition: color 0.3s;
  }
  .nav-links li a:hover {
    color: #ac7758;
  }
  /*Botão de menu hamburguer (funciona bem para tornar mais responsivo em mobile)*/
  .menu-toggle {
    display: none;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
  }

   /*tag @media: faz com que em diferentes plataformas,
    o design se torne responsivo, de modo a que o conteúdo seja bem visível*/
  @media (max-width: 768px) {
    .nav-links {
      display: none;
      width: 100%;
      flex-direction: column;
      gap: 2em;
      background-color: #532c16;
      padding: 15px 0;
      margin-top: 10px;
    }
    .nav-links.active {
      display: flex;
    }
    .menu-toggle {
      display: block;
    }
    .navbar {
      align-items: flex-start;
    }
    .nav-links li {
      text-align: center;
    }
  }



/*Banner*/
  .header {
    background-image: linear-gradient(rgba(224, 135, 224, 0.425), rgba(46, 18, 0, 0.507)), url(images/banner_1.jpg);
    background-size: cover;
    background-position: center, top;
    background-repeat: no-repeat;
    background-attachment: absolute; /*ver aqui se prefiro o fixed ou absolute*/
    color: #ffffff;
    padding: 400px 100px 400px 100px;
    text-align: left;
  }
  .overlay_text h1 {
    margin: 0px;
    font-size: clamp(3em, 5vw, 4em);
    position: relative;
  }
  .overlay_text p {
    margin: 5px;
    font-style: italic;
    font-size: clamp(1.5em, 3vw, 2em);
    position: relative;
  }
   /*tag @media: faz com que em diferentes plataformas,
    o design se torne responsivo, de modo a que o conteúdo seja bem visível*/
   @media only screen and (max-width: 700px) {
      .produtos, .overlay_text {
        width: 50%;
        margin: 6px 0;
      }
    }
    @media only screen and (max-width: 500px) {
      .produtos, .overlay_text {
        width: 100%;
      }
    }
  
  
/*Produtos_galeria*/
  #produtos {
    max-width: auto;
    margin: 40px auto;
    padding: 20px;
  }
  .produtos_container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  .produtos {
    flex: 1 1 250px;
    max-width: 350px;
  }
  .galeria {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 0.01em solid #532c16;
    transition: transform 0.2s ease;
  }
  .galeria:hover {
    transform: scale(1.02);
  }
  .galeria img {
    width: 100%;
    height: auto;
    display: block;
  }
  .desc {
    padding: 15px;
    text-align: center;
  }
  .desc h3 {
    margin-bottom: 8px;
    color: #351300;
  }
  .desc p {
    color: #351300cb;
    text-align: center;
  }
  .botao_centrado {
    text-align: center;
    margin-top: 3em;
  }
  button {
    background-color: #532c16;
    color: white;
    padding: 10px 20px;
    border: none;
    text-transform: uppercase;
  }
  button:hover {
    background-color: #ac7758;
    cursor: pointer;
  }
  /*tag @media: faz com que em diferentes plataformas,
  o design se torne responsivo, de modo a que o conteúdo seja bem visível*/
  @media (max-width: 768px) {
  .produtos {
    max-width: 90%;
    flex: 1 1 100%;
    }
  }



/*Reviews de Clientes*/
  .review {
    max-width: 1200px;
    margin: 3em auto;
    padding: 1.3em;
  }
  .review_container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  .review_box {
    background-color: #ac775865;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
  }
  .review_box h3 {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 1.2rem;
    color: #351300;
  }
  .review_box p {
    margin: 5px 0;
    line-height: 1.5;
    color: #351300;
  }
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
  }
  /*tag @media: faz com que em diferentes plataformas,
  o design se torne responsivo, de modo a que o conteúdo seja bem visível*/
  @media (max-width: 768px) {
  .review_container {
    flex-direction: column;
    align-items: center;
    }
  .review_box {
    width: 90%;
    }
  }


/*Sobre Nós*/
  .sobre {
    max-width: 1000px;
    margin: 3em auto;
    padding: 20px;
    color: #351300;
  }
  .logo_circulo {
    text-align: center;
    margin-bottom: 20px;
  }
  .logo_circulo img {
    max-width: 180px;
    height: auto;
    border-radius: 50%;
    border: 2px solid #f3d2cc;
    padding: 5px;
  }
  .texto {
    text-align: left;
    margin: 0 auto;
    max-width: 65ch;
  }
  .texto p {
    margin-bottom: 16px;
    line-height: 1.5;
  }
  /*tag @media: faz com que em diferentes plataformas,
  o design se torne responsivo, de modo a que o conteúdo seja bem visível*/
  @media (max-width: 768px) {
  .sobre {
    padding: 15px;
    }
  .logo_circulo img {
    max-width: 140px;
    }
  }


/*Fale Conosco*/
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .form-container {
    max-width: 600px;
    margin: auto;
    padding: 30px;
    color: #351300;
  }
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
  }
  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid #532c16;
    border-radius: 4px;
    resize: vertical;
  }
  input[type="text"]:focus,
  input[type="email"]:focus,
  textarea:focus {
    outline: none;
    border-color: #ac7758;
  }
  /*tag @media: faz com que em diferentes plataformas,
  o design se torne responsivo, de modo a que o conteúdo seja bem visível*/
    @media (max-width: 600px) {
      .form-container {
        padding: 20px;
      }
      button {
        font-size: 14px;
        padding: 10px;
      }
    }


/*Rodapé*/
    footer {
      background-color: #8C6B59;
      color: #ffffff;
      text-align: center;
      padding: 1em;
      margin-top: 3em;
      font-size: 1em;
    }

/*Impressão da página web*/ 
    @media print {
        nav, footer {
            display: none;
        }
    }



  
/*--------------------------------------------Páginas--------------------------------------*/ 

/*Página dos Produtos*/
    .lista_produtos {
      display: flex;
      flex-direction: column;
      gap: 40px;
      max-width: 900px;
      margin: 0 auto;
    }
    .produto_detalhe {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      background-color: #fff;
      border: 1px solid #532c16;
      border-radius: 10px;
      padding: 20px;
    }

    .produto_detalhe img {
      width: 100%;
      max-width: 300px;
      height: auto;
      border-radius: 10px;
      object-fit: contain;
  }

    .informacoes {
      flex: 2 1 300px;
    }

    .informacoes h2 {
      margin-top: 0;
    }
    .informacoes ul {
      text-align: left;
      list-style-type: square;
      padding-left: 1.6em;
    }
    .informacoes p {
      text-align: left;
    }
    .preco {
      font-size: 1.5em;
      color: #ac7758;
      margin: 10px 0;
      font-weight: bold;
    }

    .comprar {
      background-color: #532c16;
      color: white;
      padding: 10px 25px;
      text-transform: uppercase;
      border: none;
      margin-top: 20px;
    }

    .comprar:hover {
      background-color: #ac7758;
      cursor: pointer;
    }

    @media (max-width: 768px) {
      .produto_detalhe {
        flex-direction: column;
        align-items: center;
      }
      .produto_detalhe img, .informacoes {
        flex: 1 1 100%;
        text-align: center;
      }
    }