@media (min-width: 1024px){

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


main{
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: var(--background-darker);
}




    .logo-esporaqi{
        width: 100%;
        min-width: 480px;
        height: auto;
        top:9.6rem;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        position: absolute;
    }


    .social-media {
        display: flex;
        flex-direction: column;
        margin-top: .111rem;
        align-items: center;
        justify-content: center;
    }
    
    .social-media img {
        width: 32px;
        height: 32px;
        margin: 0rem;
    }


    nav{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        background-color: transparent;
        align-items: center;
        justify-content: center;
    }

    nav ul {
        display: flex;
        flex-direction: grid;
        list-style-type: none;
        padding: 1.6rem;
        width: 100%;
        height: auto;
        justify-content: center;
        align-items: center;
        background-color: transparent;
    }
    
    nav ul li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    margin: 0 3.2rem;
    background-color: transparent;
    }
    
    nav ul li a {
        text-decoration: none;
        color: var(--background-light);
        background-color: transparent;
    }

    .section--text{
        display:flex;
        flex-direction: column;
        width: 30%;
        height: auto;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        padding: .111rem 0;
        align-items: center;
        justify-content: center;
        }

    .hero{
        width:100%;
        height: 720px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0 auto;
        padding: .8rem;
    }

    .productos{
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 0 auto;
        padding: 1.2rem;
        overflow-x: hidden;
        overscroll-behavior-x: contain;
        justify-content: center;
        align-items: center;
    }

    .productos-grid{
        width: 100%;
        height: auto;
        min-width: 320px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1.6rem;
        padding: 0;
    }


    .producto{
        width: 100%;
        height: auto;
        min-width: 240px;
        margin: 0 auto;
        border-radius: 1.2rem;
    }


    /*  VENTAS */ 
.ventas--section{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0 auto;
    background-color: var(--four-color);
    color: var(--background-lightest);
  align-items: center;
 justify-content: center;
    z-index: 1;
}

.venta-grid-4{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    width: 100%;
    height: auto;
    margin: 0 auto;
    color: var(--background-lightest);
    place-content: center;
    justify-items: center;
    z-index: 1;
}

.section--title{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    height: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.boton-atras{
width: 16px;
height: auto;
}

.venta--info{
    display: flex;
    flex-direction: column;
    width: 320px;
    height: auto;
    margin: .8rem auto;
    color: var(--background-light);
    text-align: center;
    border-radius: .8rem;
    backdrop-filter: blur(16px);
    align-items: center;
    justify-content: center;
 
}

.venta--info div{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

.venta--info div h3{
margin: 0 auto;
font-size: var(--h3);
}
.venta--info div p{ 
font-size: var(--p);
line-height: 1.2rem;
}

.venta--info div a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1.4rem auto; 
    width: 66%;
    height: auto;
  font-size: var(--p);
    padding: .999rem;
    background-color: transparent;
    border: .111rem solid var(--background-light);
    border-radius: 1.2rem;
    }
  




.productos--img{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 540px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.catalogo--section{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: 1280px;
    background-color: var(--tertiary-color);
    padding: 2.4rem 4.8rem;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.catalogo--info{
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 3.6rem;
}

.catalogo--info h2{
font-size: var(--h2);
margin: 0 auto;
padding: 1.2rem;
}

.catalogo--info p{
font-size: var(--p);
    margin: 0 auto;
    padding: 2.4rem .666rem;
    }
    
.catalogo--download{
    width: 33%;
    height: auto;
    padding: 1.2rem;
    margin: 0 auto;
    border:none;
    border-radius: 1.2rem;
    color: var(--tertiary-color);
    background-color: var(--background-darker);
}



/* testimonios */

.testimonial-slider {
  display: flex;
  flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

.testimonial-slider h2{
font-family: "Montserrat", sans-serif;
font-size: var(--h2);
display: flex;
flex-direction: column;
margin: 0 auto;
align-items: center;
justify-content: center;
}
  

.testimonial-slider h3{
font-family: "Montserrat", sans-serif;
font-size: var(--h3);
display: flex;
flex-direction: column;
margin: 0 auto;
align-items: center;
justify-content: center;
}

.testimonial-slider p{
  font-family: "Montserrat", sans-serif;
font-size: var(--p);
display: flex;
flex-direction: column;
margin: 0 auto;
align-items: center;
justify-content: center;
width: 40%;
height: auto;
line-height: 1.6rem;
}

.testimonial-slider strong{
  font-family: "Montserrat", sans-serif;
font-size: var(--p);
display: flex;
flex-direction: column;
margin: 0 auto;
align-items: center;
justify-content: center;
width: 50%;
height: auto;
line-height: 2rem;
}


.slider--buttons{
  display: flex;
  flex-direction: column;
}

.slider-container {
position: relative;
overflow: hidden;
}
  
.slider {
display: flex;
transition: transform 0.9s ease;
}
  
.testimonial {
flex: 0 0 100%;
text-align: center;
width: 100%;
height: auto;
}
  
.testimonial img {
width: 24%;
max-width: 555px;
height: auto;
border-radius: 50%;
margin-bottom: .1rem;
aspect-ratio: 1 / 1;
object-fit: cover;
z-index: 100;
}
  
blockquote {
font-style: italic;
margin: 0 auto;
color: var(--four-color);
}
  
cite {
display: block;
margin-top: 0.5rem;
font-style: normal;
font-weight: bold;
color: var(--four-color);
}
  




/* acerca de espora */

.us--section{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: 1280px;
    background-color: var(--cuaternary-color);
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .us--info{
    display: flex;
    flex-direction: column;
    width: 44%;
    height: auto;
    margin: 0 auto;
    padding: .8rem;
  }
  

  .us--info img{
    display: flex;
    flex-direction: column;
    width: 25%;
    height: auto;
    margin: 1rem auto;
  }
  

  .us--info p{
 font-size: var(--p);
    text-align: left;
    text-justify: auto;
    margin: 0 auto;
    color: var(--background-light);
    line-height: 1.2rem;
    }



    
  .us--download{
    width: 66%;
    height: auto;
    padding: 1.2rem;
    margin: 0 auto;
    border:none;
    border-radius: 1.2rem;
    color: var(--tertiary-color);
    background-color: var(--background-darker);
  }
  

.reveal{
  position: relative;
  transform: translateY(50px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

  }




  .productos--img{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    height: 640px;
    margin: 0 auto;
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
  }


  footer{
    z-index: 10;
  }





  .contact--us{
    width: 100%;
    height: auto;
    padding: .8rem;
    text-align: center;
  }

  .contact--us a{
    width: 100%;
    max-width: 50%;
    height: auto;
    background-color: var(--primary-color);
    color: var(--background-light);
    padding: .8rem;
    border: none;
  }




  .contacto{
    width: 100%;
    min-width: 320px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .contacto a{
    width: 100%;
    height: auto;
  }


    h2 {
   font-size: var(--h2);
      margin-bottom: 1rem;
    }
    
  
    .info--adaptogenos img{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
      }
      
      .info--adaptogenos{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 4rem;
        margin: 0 auto;
      }
      
      .info--adaptogenos article{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        background-color: transparent;
      }
      
      .info--adaptogenos h2{
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
    font-size: var(--h2);
        color: var(--primary-color);
      }
      
      .info--adaptogenos article h3{
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
    font-size: var(--h3);
        color: var(--primary-color);
      }
      
      .info--adaptogenos article p{
          font-family: "Montserrat", sans-serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: normal;
          font-size: var(--p);
          color: var(--background-dark);
      }

      .product{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
        max-width: 640px;
        height: auto;
        background-color: transparent;
        place-content: center;
        padding: 2.4rem 0;
      }

      .product article{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        margin: 0.8rem auto;
        align-items: center;
        justify-content: center;
        background-color: rgba(245, 222, 179, 0.666);
        backdrop-filter: blur(16px);
        border-radius: .8rem;
      }
      .product article img{
        width: 100%;
        height: auto;
        background-color: transparent;
      }





.history--text, .benefits--text, .citas--text, .dosage--text, .instructions--text, .note--text{
  padding: .8rem;
  text-align: left;
}

.history, .benefits, .citas, .dosage, .instructions, .note{
  display: flex;
  flex-direction: column;
  padding: .8rem;
}