*{ margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Questrial", sans-serif;
    scroll-behavior: smooth;
    color: white;}
body{ background-color: #ffffff;
    font-family: "Questrial", sans-serif;
  display: grid;}
.logo{ margin-left: 1%;
    margin-top: -5px;
    width: 100px;
    height: 100px;
 vertical-align: middle;}

.quadro{background-color: rgba(135, 184, 197, 1);
    height: 82px;}

.bntHome{margin-top: -5px;
    margin-left: 12%;
    line-height: 24px;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: #ffffff;
    text-decoration: none;}
.bntHome:hover{
    color: #2F4157;
    transition: 0.5s;}

.bntAbout{ margin-top:-5px;
    margin-left: 2%;
    line-height: 24px;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: #ffffff;
    text-decoration: none;}
.bntAbout:hover{
    color: #2F4157;
    transition: 0.5s;}

.bntProdutos{ margin-top: -5px;
    margin-left: 2%;
    line-height: 24px;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
  color: #2F4157;
    text-decoration: none;}
.bntProdutos:hover{
    color: #2F4157;
    transition: 0.5s;}

.bntContato{ margin-top: -5px;
    margin-left: 2%;
    line-height: 24px;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: white;
    text-decoration: none;}
.bntContato:hover{
    color: #2F4157;
    transition: 0.5s;}

.bntCadrastro{ margin-top: -5px;
    margin-left: 2%;
    line-height: 24px;
    
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: white;
    text-decoration: none;}
.bntCadrastro:hover{
    color: #2F4157;
    transition: 0.5s;}
        
.bntPedidos{ margin-top:-5px;
    margin-left: 2%;
    line-height: 24px;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: white;
    text-decoration: none;}
.bntPedidos:hover{
    color: #2F4157;
    transition: 0.5s;}
.banho{background-image: url(imagem/produtos.png);
     background-size: cover;
  background-attachment: fixed;
    background-blend-mode: multiply;
    background-size: cover;
    height: 100vh;}

.quadro2{background-color: rgb(255, 255, 255);
  height: 100vh;}

.oferta{ margin-top: 50px;
margin-left: 150px;}

.produtos{color:rgba(47, 65, 87, 1);
  font-family: Lora;
margin-left: 448px; 
font-weight: bold;
font-size: 58px;
margin-top: 55px;}

.bolinhas{display: flex;
 margin-top: 100px;
margin-left: 210px;}

.espaço{padding-right: 99px;}

.letr{padding-right: 149px;
color: rgba(47, 65, 87, 1);
text-align: center;
font-size: 16px; }

.letaa{ margin-top: 10px;
display: flex;
margin-left: 235px;}

:root {
  --text:#111; /* preto quase puro */
}
  #catalogo{
    font:16px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin-top: -360px;
    padding:24px;
    background:#fff;
     box-sizing:border-box;
     border: #000;
     color:#111
  }
  .checklist{color: #000;}

  .filters{
    color:#111;
    width:260px;              /* parecido com a imagem */
  }
.minLabel{color:#111;}
.check label {
  color:#111;
}
  .etapa{margin-bottom:22px}
  .etapa h3{ color:#111;
    font-size:20px;
     margin:0 0 16px; 
     font-weight:700;
  }
  .divider{background-color: #000;
    height:2px;
    border: none;
    margin:19px 0px 19px;
  }

  /* ============== CHECKBOXES ============== */
  .checklist{display:grid;
     gap:10px; margin:0; 
     padding:0;
      list-style:none;
     color:#111}
  .check{
    display:flex;
     align-items:center;
      gap:10px;
    color:#111;
  }
  .check input[type="checkbox"]{color:#111;
    width:18px; 
    height:18px;
    accent-color:var(--teal);          /* cor nativa (suporte moderno) */
  }

  /* ============== SLIDER DUPLO ============== */
  .linha{color:#111;
    margin-top:6px;
  }
  .minlinha{color:#111;
    display:flex;
    justify-content:space-between;
    color:var(--muted);
     font-size:14px;
    margin:0 2px 8px;
  }
  .maxlinha{color:#111;
    position:relative;
     height:28px;
  }
  .track{color:#111;
    position:absolute;
     left:0; 
     right:0;
      top:50%;
    transform:translateY(-50%);
    height:8px; 
    border-radius:999px;
    background:linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 100%); /* atualizado via JS */
  }
  #min{color: #000;
font-size: 16px;}
#max{color: #000;
font-size: 16px;}
  .maxlinha input[type="range"]{color:#111;
    position:absolute;
     left:0; 
     top:0;
      width:100%;
       height:28px;
    margin:0;
     pointer-events:none;
      background:transparent;
       appearance:none;
        -webkit-appearance:none;
  }
  /* polegar */
  .maxlinha input[type="range"]::-webkit-slider-thumb{color:#111;
    -webkit-appearance:none;
     appearance:none;
    pointer-events:auto;
     width:18px; 
     height:18px;
      border-radius:50%;
    background:var(--teal);
     border:0;
     margin-top: -13px;
      box-shadow:8px 8px 8px 8px #94bec5 inset;
  }
  .maxlinha input[type="range"]::-moz-range-thumb{color:#111;
    pointer-events:auto; 
    width:18px; 
    height:18px; 
    border-radius:50%;
    background:var(--teal);
     border:0;
  }
  /* trilho “invisível” dos ranges sobrepostos */
  .maxlinha input[type="range"]::-webkit-slider-runnable-track{height:8px}
  .maxlinha input[type="range"]::-moz-range-track{height:8px;
     background-color: #2F4157;}


.produt {margin-top: -30%;
  margin-left: 20%;
    flex: 1;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
  }

  .card {
    border: 1px solid #bbb;
    padding: 10px;
    text-align: center;
  }

  .card img {height: 60%;
    max-width: 100%;
    
  }

  .categoria {
    font-weight: bold;
    color: #000000;
    text-transform: uppercase;
    margin-top: 10px;
  }
 .preco {color: #000;
    font-weight: bold;
    margin-top: 5px;  /* espaço pequeno para “colar” no nome */
  }

  .produt2 {margin-top: 0%;
  margin-left: 20%;
    flex: 1;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
  }
  .produt3 {margin-top: 0%;
  margin-left: 20%;
    flex: 1;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
  }
.btn-add {
   
    background-color: #7fb9c1; /* verde água */
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 20px; /* arredondado */
    cursor: pointer;
    margin-top: 5px;
    font-size: 14px;
    transition: background-color 0.3s ease;
  
  }

  .btn-add:hover {
    background-color: #6aa3aa; /* tom mais escuro ao passar mouse */
  }


   footer {width: 200vh;
      background-color: #8bb7c1;
      color: white;
      padding: 40px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    footer .logo-footer {
       font-family: serif;
      font-size: 120px;
      line-height: 0.8;
      color: #fdfcf8;
    }

    footer .footer-section {
      margin-top: 20px;
    }

    footer h4 {
      font-size: 1.2rem;
      margin-bottom: 10px;
    }

    footer ul {
      list-style: none;
    }

    footer ul li {
      margin-bottom: 5px;
    }

    footer ul li a {
      color: white;
      text-decoration: none;
      font-weight: 500;
    }

    .social-icons {
      display: flex;
      gap: 15px;
      font-size: 1.5rem;
    }