div.apresentacao-beneficios{
  margin-bottom: 1.125rem;
}

div.apresentacao-beneficios h2.apresentacao-subtitulo{
  font-size: 1.563rem;
  margin-top: 1.25rem;
  margin-bottom: 0rem;
  color: var(--verde-purigilo);
}

div.apresentacao-beneficios h2.apresentacao-subtitulo ul.apresentacao-beneficios-lista{
  margin-left: 1.125rem;
}

div.apresentacao-beneficios p{
  font-size: 1.563rem;
  color: var(--preto);
}

button.apresentacao-botao{
  background: var(--verde-purigilo); 
  color: var(--branco); 
  border: none; 
  border-radius: 0.375rem; 
  padding: 0.75rem 2rem; 
  font-size: 1.1rem; 
  font-weight: bold; 
  cursor: pointer; 
  box-shadow: 0 2px 8px rgba(46,125,50,0.10); 
  transition: background 0.2s;
}

button.apresentacao-botao:hover{
   background: #56b800af; 
  color: var(--branco); 
}

.apresentacao-container {
    height:10%;
  margin: 0.313rem 1.563rem;
  padding: 2rem;
  border: 1px solid #eee;
  border-radius: 0.875rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  background: var(--branco);
}

h2.superficies-titulo{
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
}

h3.superficies-titulo-tres{
  margin-bottom: 2.5rem;
  margin-top: -1.875rem;
  text-align: center;
  font-size: 2rem;
  color: #55b800;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: italic;
}

h3.modo-uso{
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.563rem;
  margin-top: 1.25rem;
  color: #55b800;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: italic;
}

h3.superficies-titulo-dois{
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2.5rem;
  margin-top: -2.5rem;
  color: #55b800;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: italic;
}
.zoom-container {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  border-radius: 16px;
  background: #fff;
  width: 50%; 
  
}
div.zoom-container img#apresentacao-img-principal{
    
    width:80%;
    height:60%;
}

section.apresentacao-outros-produtos-section{
  padding: 2rem 0rem;
}

section.apresentacao-outros-produtos-section h2.apresentacao-subtitulo{
  text-align: center;
  font-size: 2rem;
  margin-bottom: 0.625rem;
  color: #55b800;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: italic;
}

div.opcao-grupo span{
  color: #55b800; 
  font-size: 1.563rem;
}

div.buttons{
  margin-top: 0.313rem;
  margin-bottom: 0rem;
}

section.apresentacao-outros-produtos-section div.apresentacao-outros-produtos-lista{
  position: relative;
  z-index: 4;
  display: flex; 
  justify-content:center; 
  gap: 2rem; 
  flex-wrap: wrap;
}

section.apresentacao-outros-produtos-section div.apresentacao-outros-produtos-lista a.apresentacao-outro-produto{
  background: linear-gradient(90deg, #e8f5e9 60%, #f4f4f4 100%); 
  border-radius: 0.625rem; 
  box-shadow: 0 1px 4px #0001; 
  padding: 1rem 1.25rem; 
  text-align: center; 
  width: 28.125rem; 
  text-decoration: none; 
  transition: box-shadow 0.2s;
}

section.apresentacao-outros-produtos-section div.apresentacao-outros-produtos-lista a.apresentacao-outro-produto img.apresentacao-outro-produto-img{
   
  object-fit: cover; 
  border-radius: 0.5rem; 
  margin-bottom: 0.625rem;
}

section.apresentacao-outros-produtos-section div.apresentacao-outros-produtos-lista a.apresentacao-outro-produto span.apresentacao-outro-produto-nome{
  display: block; 
  color: black;
  font-size: 1.25rem;
  font-weight: 500;
}
.desktop-menu {
  display: none;
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 1000;
}

.rodape {
 position: relative; 
 z-index: 2;
  padding: 2% 5%;
  display: flex;
  background-color: white;
  color: black;
  align-items: center;
  justify-content: space-between;
}
  img.apresentacao-img-principal{}
footer.rodape img.img-rodape{
  position: absolute;
  z-index: 1; 
  bottom: 0rem; 
  right: -7.5rem;  
  height: 18.75rem; 
  object-fit: cover;
}

.div-rodape {
  width: 12.5rem;
  position: relative; 
  z-index: 2;
}

.botoes-prods {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 1.5rem;
}

.menu-spacer {
  height: 5rem;
}

.btn-tamanho, .btn-fragrancia {
  padding: 0.375rem 1rem;
  border-radius: 0.25rem;
  border: 1.5px solid #55B800;
  background: #fff;
  color: #55B800;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
}

.btn-tamanho.btn-opcao-ativa,
.btn-fragrancia.btn-opcao-ativa {
  background: var(--verde-purigilo);
  color: #fff;
  border: 1.5px solid #55B800;
}

.btn-tamanho:hover, .btn-fragrancia:hover {
  background: #e8f5e9;
  color: var(--verde-purigilo);
}

.apresentacao-detalhes {
  flex: 1 1 320px;
  min-width: 25rem;
  justify-self: initial;
  align-self: self-start;
}



@media (max-width: 600px) {
  .botoes-prods {
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
  }
                   
  .apresentacao-botao {
    width: 100%;
    font-size: 0.95rem;
  }
}

@media (max-width: 900px) {
  .apresentacao-flex {
    flex-direction: column;
    gap: 1.5rem;
  }
  .apresentacao-galeria, .apresentacao-detalhes {
    min-width: 0;
  }

  div.modo{
    padding: 0;
  }
}

.mobile-menu {
  display: block;
}

@media (min-width: 900px) {
  .desktop-menu {
    display: block;
  }

  .mobile-menu {
    display: none;
  }
  
}

@media (min-width: 900px) {
  .menu-spacer {
    height: 8.125rem;
  }
}

@media (max-width: 900px) { 
   

  div.apresentacao-detalhes p{
    font-size: 0.938rem;
  }
  
  div.apresentacao-detalhes h1{
    font-size: 1.563rem;
  }
  
  form#opcoes-produto div.apresentacao-opcoes div.opcao-grupo span{
    font-size: 1.25rem;
  }

    div.buttons button{
    padding: 0.313rem 0.313rem;
  }
  
  button.apresentacao-botao{
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
  }

   div.apresentacao-beneficios h2.apresentacao-subtitulo{
    font-size: 1.25rem;
  }

  div.presentacao-flex  div.apresentacao-galeria div{
    height: 0.625rem;
  }

  img.apresentacao-img-principal{
 
    padding: 10%;
  }

  div.apresentacao-sustentabilidade-icones div img{
   width:3.75rem; 
   height:4.375rem;
   margin: 0.625rem;
  }
 
  div.apresentacao-sustentabilidade-icones{
    margin: 0;
    padding: 0;
    width: 100%;
    gap: 0rem;
  }

  div.apresentacao-sustentabilidade-icones div{
    margin: 0;
    padding: 0;
    width: 100%;
  }

div.modo p.paragrafo{
    padding: 0rem 0rem;
    font-size: 0.938rem;
    color: var(--preto);
}

  .apresentacao-flex {
 
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .apresentacao-galeria, .apresentacao-detalhes {
    min-width: 0 !important;
    width: 100% !important;
  }
  
  .apresentacao-img-principal {
    width: 90vw !important;
    max-width: 21.25rem !important;
    height: auto !important;
  }
}

@media (max-width: 900px) {
  .superficies-imagens, .caracteristicas-imagens {
    gap: 2.813rem;
  }

  .superficie-item, .caracteristica-item {
    width: 5.625rem;
  }

  .superficie-img, .caracteristica-img {
    width: 7.5rem;
    height: 7.5rem;
 }
}

@media (max-width: 600px) {
  .superficies-imagens, .caracteristicas-imagens {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .superficie-item, .caracteristica-item {
    width: 45vw;
    max-width: 7.5rem;
    margin-bottom: 0.75rem;
  }
  .superficies-titulo, .caracteristicas-titulo {
    font-size: 1.3rem;
  }
  section.apresentacao-outros-produtos-section h2.apresentacao-subtitulo{
    font-size: 1.3rem;
  }
}