h1,h2,p,text,a{font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    width: 100%;
    height: 10vh;
    font-size: 0.5rem;
    color:mintcream;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color:#778c43;
    position: sticky;
    top: 0;
    z-index: 1000;  

;
    font-weight: bold;

}
.Titulo{
    margin-left: 1.5rem;
}
nav{
    display: flex;
    width: 50%;

}
ul{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

li{
    list-style: none;
    padding: 10px;
}
a{
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 1rem;
 }
 a:hover{
    cursor: pointer;
 }

.img{
    width: 100%;
    height: 90vh;
    background-image: url("https://png.pngtree.com/background/20250106/original/pngtree-minimalist-coffee-shop-or-cafe-interior-design-modern-with-aesthetic-and-picture-image_16007394.jpg");
    background-size: cover;
    background-position: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgb(255, 255, 255);
    border:#ff9000;
    text-align: center;
    padding: 20px;
    border: 1px;
}
.img h1,p{
    margin-bottom: 1rem;
    position: relative;
}
.img h1{
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.784);
    margin-top: 6rem;
}
.img p{
    font-size: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.784);
    margin-top: 5rem;

}
.img a{
    background-color:   #778c43;
    color:black;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.2rem;
    position: relative;
}
.img::before{
    content: '';
    position: absolute;
    top: 0%; left: 0%;
    width: 100%;
    height: 100vh;
    background-color: rgba(172, 141, 141, 0.366); 
    pointer-events: none; /* Esto permite que los elementos debajo reciban el hover */
    z-index: 0; /* Asegura que esté detrás de las tarjetas */   
}
/* .imgfond{
    width: 100%;
    height: fit-content;
    background-image: url('https://static.vecteezy.com/system/resources/previews/026/859/683/non_2x/of-a-minimalist-white-table-with-a-steaming-cup-of-coffee-with-copy-space-photo.jpg');
    background-size: cover;
    background-position: center;
} */
.imgfond::before{
    content: '';
    position: absolute;
    top: 0%; left: 0%;
    width: 100%;
    height: auto;
    background-color: rgba(172, 141, 141, 0.366); 
  margin-top: 100vh;
}
.historia{
    /* display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 8px; */
    width: 50%;
    margin: auto;
    margin-top: -1rem
}
.title-his{
    text-align: center;
    color: #dc5c05;
    padding-top: 2rem;
    
}
.texto{
    /* grid-column: span 4 / span 4;
    grid-row: span 6 / span 6; */
    text-align: justify;
    padding-bottom: 2rem;
    
    /* padding-bottom: 5rem; */
}

/* .imgqn{
    grid-column: span 4 / span 4;
    grid-row: span 4 / span 4;
    grid-column-start: 5;
    grid-row-start: 2;
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVORwEiBfRzqDPe418QMF7r3dvIUA73ixi7g&s'
    );
    background-size:cover;
    background-position:center;
    border-radius: 60%;
    margin-left: 6rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.857);
} */
.imgfond2{
     width: 100%;
    height: fit-content;
    background-image: url('https://static.vecteezy.com/system/resources/previews/026/859/683/non_2x/of-a-minimalist-white-table-with-a-steaming-cup-of-coffee-with-copy-space-photo.jpg');
    background-size: cover;
    background-position: center;
    padding-bottom: 2rem;
    
}


.title2{
    color: #dc5c05;
    padding-top: 2rem;

}
.tarjetas{
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.tarjeta{
    width: 27%;
    height: fit-content;
    border: solid 1px;
    border-radius: 8px;
    background-color: #778c43;
    text-align: center;

}
.tarjeta:hover{
    transform: translateY(-20px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
.tarjeta p{
    margin: 0 15px;
     text-align: center;
     /* text-align: justify; */
}
.tarjeta button{
    margin:1rem;
    padding: 9px;
    border-radius: 5px;
    border: none;
    color: floralwhite;
    /* border: solid 1px; */
    background-color: #dc5c05;
    font-weight: bold;
}
.imgtarjeta1,
.imgtarjeta2,
.imgtarjeta3{
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin: 1rem auto;
}
.imgtarjeta1{
    background-image: url('https://www.nestleprofessional-latam.com/sites/default/files/styles/np_article_big/public/2024-02/dos-vasos-cafe-frio-cam.jpg?itok=C3BkSAZI');
}

.imgtarjeta2{
    background-image: url('https://www.elespectador.com/resizer/L_d9v6uuxjkcZkONzjrpOAr9Lus=/arc-anglerfish-arc2-prod-elespectador/public/3RLSJX3IBNA55F5OZPNWSLSGQE.jpg');
}

.imgtarjeta3{
    background-image: url('https://imag.bonviveur.com/preparando-el-cafe-americano.jpg');
}

h2{
    text-align: center;
    margin-bottom: 2rem;
}

footer{
    width: 100%;
    height: fit-content;
    background-color: #778c43;
    /* padding: 1rem auto; */

}
/* footer h2{
    padding-top: 1rem;
    text-align: center;

} */

footer h3 {
    text-align: center;
    padding-top: .5rem;
}

footer h4{
    text-align: center;
    /* margin-bottom: 1rem; */
    padding-bottom: 1rem;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  margin-right: 1rem;
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }

  nav {
    width: 100%;
    position: relative;
  }
  .nav-toggle {
    display: block;
  }
  .nav-menu {
    display: none;
    flex-direction: column;
    background-color: #778c43;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    z-index: 1001;
  }
  .nav-menu.active {
    display: flex;
  }
  nav ul {
    flex-direction: column;
    gap: 5px;
  }

  .historia {
    width: 90%;
  }

  .tarjetas {
    flex-direction: column;
    align-items: center;
  }

  .tarjeta {
    width: 90%;
    margin-bottom: 20px;
  }

  .img h1 {
    font-size: 2rem;
  }

  .img p {
    font-size: 1rem;
    margin-top: 2rem;
  }
  /* .imgfond::before{
    content: '';
    position: absolute;
    top: 0%; left: 0%;
    width: 100%;
    height: 1O.5vh
    background-color: rgba(172, 141, 141, 0.366); 
  margin-top: 100vh; */
}