@media (min-width: 1024px){

body{
    margin: 0 auto;
    padding: 0;
}


main{
    margin: 0 auto;
    padding: 0;
}

p {
    font-family: "ontserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-align: center;
    margin: 0 auto;
  }

    .logo-esporaqi{
        width: 40%;
        min-width: 320px;
        height: auto;
        top:6.4rem;
        min-height: 160px;
        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;
        text-align: 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;
        background-color: transparent;
    }

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

    .hero{
        width:100%;
        height: 800px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0 auto;
        /* background-image: url(./bg.webp); */
        background-size: cover;
        background-position: center;
    }
    .hero h1 {
        font-size: 4.8rem;
        text-shadow: .20rem .20rem .25rem var(--background-dark); 
    }

    .productos{
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 0 auto;
        padding: 1.2rem;
        overflow-x: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type:y proximity;
    }

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


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



    
    .wsp-button{
        width: 30%;
        height: auto;
        padding: .333rem;
        margin: 0 auto;
        background-color: transparent;
        border: .001rem solid var(--four-color);
        border-radius: 1.1rem;
        transition: .5s;
    }
    
    .wsp-button:hover{
        width: 28%;
        height: auto;
        padding: .333rem;
        margin: 0 auto;
        background-color: transparent;
        border: .001rem solid var(--four-color);
        border-radius: 1.1rem;
        transition: .2s;
    }

    /*  VENTAS */ 
.ventas--section{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 360px;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.section--title{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 320px;
    max-width: 900px;
    height: auto;
    align-items: center;
    justify-content: center;
    padding: 1rem .444rem;
}

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

.venta--info{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    border-radius: 1.2rem;
    padding: .999rem;
 
}

.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: 2.8rem;
}
.venta--info div p{ 
font-size: 1.6rem;
line-height: 2.4rem;
}

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

.product{
width: 50%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 6.4rem auto;
}

.product--text{
font-size: 1.2rem;
padding: 1rem;
margin: 0 auto;
}

.product--img{
display: flex;
flex-direction: column;
width: 100%;
height: auto;
border-radius: 2.4rem;
margin: 0 auto;
padding: 0;
}

.product .benefits div ul{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    padding: 1rem;
    text-align: left;
}

.product .history div{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    padding: .333rem .888rem;
    text-align: left;
    font-size: .999rem; 
}

.product .citas div{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    padding: .333rem .888rem;
    text-align: left;
    font-size: .999rem; 
}




.product .dosage div p{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    padding: .333rem .888rem;
    text-align: left;
    font-size: .999rem;
}

.product .note div p{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    padding: 1rem;
    text-align: left;
    font-size: .999rem;
}

.product .instructions div ul{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    padding: 1rem;
    text-align: left;
    font-size: .999rem;
}



.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;
    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: 2.4rem;
margin: 0 auto;
padding: 1.2rem;
}

.catalogo--info p{
    font-size: 1.4rem;
    margin: 0 auto;
    padding: 3.2rem .666rem;
    }
    
.catalogo--download{
    width: 33%;
    height: auto;
    padding: 1.2rem;
    margin: 0 auto;
    border:none;
    border-radius: 1.2rem;
}



/* testimonios */

.testimonial-slider {
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem .333rem;
    border-radius: .111rem;
    background-color: none;
  }

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

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

.testimonial-slider p{
  font-family: "Montserrat", sans-serif;
  font-size: 1.66rem;
display: flex;
flex-direction: column;
margin: 0 auto;
padding: .111rem .111rem;
align-items: center;
justify-content: center;
width: 50%;
height: auto;
line-height: 2.4rem;
}

.slider-container {
position: relative;
overflow: hidden;
}
  
.slider {
display: flex;
transition: transform 0.5s ease;
}
  
.testimonial {
flex: 0 0 100%;
padding: 1.9rem;
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;
}
  
cite {
display: block;
margin-top: 0.5rem;
font-style: normal;
font-weight: bold;
}
  




/* acerca de espora */

.us--section{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: 1280px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
  }
  
  .us--info{
    display: flex;
    flex-direction: column;
    width: 60%;
    height: auto;
    margin: 0 auto;
    padding: 2.4rem;
  }
  

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

  .us--info p{
    font-size: 1.4rem;
    text-align: left;
    text-justify: auto;
    margin: 0 auto;
    padding: .666rem;
    line-height: 2.4rem;
    }



    
  .us--download{
    width: 66%;
    height: auto;
    padding: 1.2rem;
    margin: 0 auto;
    border:none;
    border-radius: 1.2rem;
  }
  

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

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

  }



  footer{
    z-index: 10;
  }

    h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    
  
    .info--adaptogenos img{
        width: 100%;
        max-height: 320px;
        height: auto;
        display: flex;
        flex-direction: column;
        padding-top:2.4rem;
        padding-bottom: 2.4rem;
      }
      
      
      .info--adaptogenos article{
        width: 66%;
        height: auto;
        display: flex;
        flex-direction: column;
      }
      
      .info--adaptogenos h2{
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        font-size: 1.4rem;
      }
      
      .info--adaptogenos article h3{
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        font-size: 1.3rem;
        padding-top: .999rem;
        padding-bottom: .999rem;
      }
      
      .info--adaptogenos p{
          font-family: "Montserrat", sans-serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: normal;
          font-size: .999rem;
      }