@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fascinate&family=Funnel+Display:wght@300..800&family=Grenze+Gotisch:wght@100..900&family=Jaro:opsz@6..72&family=Lexend:wght@100..900&family=Parkinsans:wght@300..800&display=swap');

body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
*{
  box-sizing: border-box;
}
header {
height: auto;
width: 100%;
background: rgba(0,0,0,0.2);
position: fixed;
z-index: 1;
align-items: center;
text-align: center;
justify-content: center;
font-family: "Moderustic", sans-serif;
font-weight: bold;
border-radius: 10px 10px 0px 0px;
transition: 0.2 ease;
}

#navegacion1{
display: grid;
grid-template-columns: 2fr 1fr 2fr;
}

header img {
width: 95px;
height: 85px;
transition: 0.5s ease;
border-radius: 15px;
padding: 5px;
}

header img:hover {
pointer-events: visibleFill;
}


header ul {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr;
text-align: center;
align-items: baseline;
font-size: 30px;
gap:90px;  
margin-top: 30px
}

header li {
list-style: none;

}

li a {
color: white;
text-decoration: none;
font-size: 5vh;
transition: 0.8s ease;
padding: 5px;
}

li a:hover {
color: black;
text-decoration: none;
font-weight: bold;
background-color: white;
border-radius: 10px;
}

#carrito{
height: 100%;
width: 100%
}

#carrito img{
height: 60px;
width: 60px;
margin-top: 20px
}



.sidebar {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 250px;
z-index: 999;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
box-shadow: -10px 0 10px black;
display: none;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}

.sidebar li {
width: 100%;
}

.sidebar a {
width: 100%;
color: black;
margin:0;
padding:0
}

.menu-button {
display: none
}

/*inicio main*/

#inicio{
  font-family: "Fascinate", system-ui;
  background-image: url("porductos fotos/heroProductos2.png");
  background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 120vh;
  padding-top:300px;
  margin-bottom:20px;
}

#inicio div h1{
  font-size: 10vw;
  padding:5px;
  text-shadow: 0 5px 6px rgb(255, 255, 255), 0 5px 6px rgb(255, 255, 255);
  position: absolute; /* Superpone el h1 sobre el fondo */
  top: 35%; /* Centrado verticalmente */
  left: 50%; /* Centrado horizontalmente */
  transform: translate(-50%, -50%); /* Ajuste perfecto de centrado */

}


.titulo{font-family: "Moderustic", sans-serif;
        width: 100%;
       color: black;
       top: 20%;
        justify-content: center;
       text-align:center; 
       font-size: 9vw;
       font-weight: 400;}


#almendras {display: grid;
           grid-template-columns: 1fr 1fr;
           font-family:"Moderustic", sans-serif;
           justify-content: center;
           text-align: center;
            align-items: center;
            padding: 10px
           }

.imagen{height: 100%;
         width: 100%;
        justify-content: center;
        text-align: center;
         align-items: center;}

.imagen img{
border-radius: 10px;
height:100%;
width:100%;}

.texto {
       padding: 30px;}

.texto h2{font-size: 5vw;
        font-weight: bold;
         margin: 10px;
         text-align:left;
         }

.texto p{font-size: 15px;
       color: gray;
        padding-top: 20px;
        padding-bottom: 50px;}

button{height: 60px;
       width: 180px;
       background-color: darkseagreen;
       color: white;
       border-radius: 40px;
      }
#pistachos {
  display: grid;
            grid-template-columns: 1fr 1fr;
            font-family:"Moderustic", sans-serif;
            justify-content: center;
             text-align: center;
              align-items: center;
              padding: 10px}


@media(max-width:800px){
  #almendras,#pistachos{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}




footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: olivedrab;
  color: white;
  font-family: "Ubuntu", sans-serif;
  overflow: hidden;
}

#columna1f {
  display: grid;
  grid-template-rows: 1fr 1fr;
  justify-content: center
}

footer img {
  height: 50px;
  width: 50px;
}

footer h3 {
  padding: 10px;
  font-size: 30px;
}

footer p {
  margin: 10px;
  font-size: 15px;
}

#redes a img {
  height: 40px;
  width: 40px;
  margin-left: 5px;
  border-radius: 10px;
  margin-top: 5px;
  transition: 0.2s ease
}


.logof {
  justify-content: center;
  align-items: center;
}

.logof img {
  height: 100px;
  width: 100px;
  background-color: white;
  border-radius: 20px;
  margin-top: 20px;
  padding: 10px;
}

#ubicacion iframe{
  height:150px
}  
 /* animacion de imagenes en la que mientras bajas aparecen */
 @keyframes show {
  from {
    opacity: 0;
    scale: 25%
  }

  to {
    opacity: 1;
    scale: 100%
  }
}

#info img,
#Infraestructura img,
#arboles img {
  view-timeline-name: --image;
  view-timeline-axis: block;

  animation-timeline: --image;
  animation-name: show;

  animation-range: entry 25% cover 30%;
  animation-fill-mode: both
}             
              
 /*esonconder menu normal y mostrar icono de menu*/
 @media(max-width: 800px) {
  .hideOnMobile {
    display: none;
  }
  header ul{
    margin-top:0px;
  }
  .menu-button {
    display: block; /* Asegura que sea visible */
    position: absolute; /* Para posicionarlo con precisión */
    top: 10px; /* Ajusta hacia arriba */
    right: 10px; /* Alinea hacia la derecha */
    z-index: 10; /* Asegura que esté en la parte superior */
  }

  header {
    grid-template-columns: 1fr; /* Simplifica el diseño del header */
    padding: 10px; /* Ajusta el espacio interno */
    max-height: 70px; /* Reduce la altura máxima */
  }

  .menu-button img {
    width: 80px; /* Tamaño del icono */
    height: 80px;
  }
  .menu-button img{
    justify-self: right;
  }
  li{
    margin-top:0;
    padding:0;
  }
  header{
    grid-template-columns: 3fr 1fr ;
    max-height: 90px;
  }
  #logo {
    align-items: left;
  }
  #navegacion2{
    align-items: right;
    justify-content: right;
  }
  #calidad,
  #seguinos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px
  }
}

@media(max-width: 630px){
  #info{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  #Infraestructura, #arboles{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .sidebar {
    width: 100%;
    height: 100%;
  }
  .columna1{
    display: none;
  }
  footer{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }

}