/*Estilo inicial para todos los elementos de la pagina*/
*{
padding: 0%;
margin: 0;
text-decoration: none;
list-style: none;
}
/*Estilo inicial para la pagina*/
body{
    font-family: Nunito, sans-serif;
    background-attachment: fixed;
    background-color: #f8f8f8;
}
/*Color ytamaño de la barra de inicio*/
nav {
  background-color: #c3f2a2; 
  display: flex;
  justify-content: space-between; 
  align-items: center;            
  padding: 10px;
  height: 90px;
}
/*Estilo del texto de la barra*/
nav h1 {
  color: #f8f8f8;
  margin: 30px; 
}
/*Tamaño y posicion de la imagen*/
.logo img {
  height: 120px; 
  object-fit: contain;
  margin-right: 50px;
}
/*Imagen principal de la pagina que ocupa todo el espacio*/
img{
  width: 100%;
  height: auto;
  object-fit: cover;
}
/*Estilo del indice horizontal*/
.indice { 
  padding: 10px 0;
  margin: 10px;
}
/*Decoración y posicion de los elementos del indice*/
.indice ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center; 
}
.indice li {
  display: inline;
  margin: 0 15px; 
}
.indice a {
  text-decoration: none; 
  font-weight: bold;
  padding: 5px 10px;
  color: black;
}
/*Decoración cuando pasa el curso por un elemento del indice*/
.indice a:hover {
  background-color: #ccf3b0;  
}
/*Posicion del contenedor de las letras sobre la imagen principal*/
.contenedor-img{
      position: relative; 
      display: inline-block;
      color: #f8f8f8;
}
/*Posicion y estilo de las letras sobre la imagen principal*/
.texto{
    position: absolute;
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      color: white;
      text-align: center;
      z-index: 1; 
      width: 100%;
      font-size: 170%;
}

/*Se repite los estilos del primer indice*/
.favs {
  padding: 10px 0;
  margin: 20px;
}
.favs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center; 
}
.favs li {
  display: inline;
  margin: 0 15px; 
}
.favs a {
  text-decoration: none; 
  font-weight: bold;
  color: black;
}
.favs a:hover {
  background-color: #ccf3b0;  
}

/*Color y tamaño de la barra de separación de las distintas secciones*/
.franja {
      background-color: #c3f2a2; 
      text-align: left;
      padding: 30px;
      font-size: 28px;
      font-weight: bold;
    }

/*Configuración de las tarjetas donde aparecen los platillos*/
.seccion {
      width: 95%;
      margin: 10px;
      background: #f8f8f8;
      padding: 20px;
      border-radius: 8px;
    }
.seccion h2 {
      font-size: 22px;
      margin-bottom: 10px;
      border-bottom: 2px solid #c3f2a2;
      padding-bottom: 5px;
    }

.tarjetas {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
    }

.tarjeta {
      background: #f8f8f8;
      border-radius: 12px;
      padding: 10px;
      text-align: center;
      border: 1px solid  #d1f5b7;
    }

.tarjeta img {
      width: 100%;
      border-radius: 12px;
    }

.tarjeta p {
      margin: 5px 0;
      font-size: 14px;
    }

/*Posicion y estilo de la sección de ubicación*/
.ubicacion {
  display: flex;          
  align-items: center;     
  gap: 20px;  
 margin: 5px;                
}

.ubicacion p{
  margin-right: 50px;
}
.ubicacion h2{
  margin-right: 50px;
}

.foto-ubicacion {
  max-width: 30%;           
  height: auto;             
}

.contenedor-txt{
  align-items: center; 
    margin: 20px;
    padding: 20px;
}
.contenedor-txt img{
width: 15%;
}
  
.contenedor-pedido {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 20px;
  padding: 20px;
  gap: 40px;
}

.info-pedido img {
  max-width: 400px;
  display: block;
}

.pedido {
  flex: 1;
}

.pedido form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pedido label {
  margin-bottom: 5px;
}

.pedido input,
.pedido textarea {
  width: 70%;
  padding: 8px 10px;
  border: 1px solid #c3f2a2cc;
  border-radius: 6px;
  font-size: 10px;
  box-sizing: border-box;
}

.pedido textarea {
  min-height: 60px;
  resize: vertical;
}

.pedido button {
  background-color: #a7df7f;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  font-size: 15px;
  width: 70%;
  margin-top: 10px;
}

.pedido button:hover {
  background-color: #92ca69;
;
}

/*Tamaño y color del pie de página*/
footer {
    background-color: #71a14f; 
    padding: 30px 0; 

  }