*{
  box-sizing: border-box;
}

body {
      margin: 0;
     font-family: Arial, sans-serif;
      background: #000000;
      overflow: hidden;
      height: 100vh;
      padding-top: 50px;
    }

    .menu-superior, .menu-inferior, .menu-subcategorias {
      background:#231F1E;
      padding: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: sticky;
      z-index: 100;
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }


.titulo,
.detalles-video h2,
.precio,
button, .menu-inferior button {
  font-family: 'Afacad', sans-serif;
}

.precio, .ingredientes {
  color: white;
  font-weight: 600;
  font-size: 16px;
}

.ingredientes {
  font-size: 15px;
  width: 87%;
}



    .menu-superior::-webkit-scrollbar,
    .menu-subcategorias::-webkit-scrollbar {
      display: none;
    }





.menu-superior {
  position: fixed;       /* Fija el menú arriba */
  top: 0;
  left: 0;
  right: 0;
  height: 50px;         /* Altura fija, acorde al cálculo */
  background-image: url("img/fondo-cabecera.jpg");
  background-size: cover;
  background-position: center;
  z-index: 1000;         /* Para que esté encima del contenido */
}



   .menu-inferior {
      position: fixed;
       bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      display: flex;
       justify-content: center;
       align-items: center;
      box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
      z-index: 999;
      padding: 10px;
      gap: 10px;
      background: #000000;
      border-top: 2px solid #00AAD2 ;
    }
    
#contenido {
  position: relative;
padding-top: 20px;     
  height: calc(90vh - 20px);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

    .lista-platos {
      padding: 0px 20px;
      padding-bottom: 80px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .menu-superior button {
      padding: 5px 20px;
      border: none;
      background: #000000;
      color: #00AAD2;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
      font-size: 15px;
      font-weight: 600;
    }

 


    .categoria {
      padding: 5px 20px;
      border: none;
      background: #eee;
      cursor: pointer;
      border-radius: 20px;
      flex: 0 0 auto;
    }

    .categoria:hover, .categoria.activa {
      background: #17AEBF;
      color: #000000;
      border: 1px solid #000000;
    }

    .contenedor-categorias {
      display: flex;
      gap: 10px;
      justify-content: center;
      width: max-content;
      margin: 0 auto;
    }



    .plato {
      display: flex;
      flex-direction: row;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      background: #000000;
      box-shadow: 0 4px 6px rgba(0,0,0,0.05);
      border: 1px solid #EE2E82;
    }

    .imagen {
      width: 50%;
      object-fit: cover;
    }

    .info {
      padding: 16px;
      width: 50%;
    }



    .video-contenedor {
      scroll-snap-align: start;
      position: relative;
      height: 100%;
      min-height: calc(100vh - 110px);
      background: black;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .video-plato {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }

    .detalles-video {
      position: relative;
      z-index: 1;
      background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
      color: white;
      padding: 20px;
      margin-top: auto;
    }

    #idioma-btn {
      position: absolute;
      left: 10px;
      bottom: 10px;
      font-size: 20px;
      background: none;
      border: none;
      cursor: pointer;
    }




    #idioma-img {
  height: 22px;
 margin-top: 15px;
  width: auto;
  object-fit: contain;
    }

#idioma-btn {
background:none; 
border:none; 
padding:0; 
cursor:pointer;
}




/* stylelint-disable */
.info .ingredientes {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* stylelint-enable */

#subcategorias {
  background:#000000;
  border-bottom: 1px solid #00AAD2;
  
}

#subcategorias .categoria {
color: white;
background:#000000;
border: 1px solid #00AAD2;
  font-size: 15px;
  font-weight: 600;
}

#subcategorias .categoria.activa {
  background-color: #17AEBF;
  color:#000000;
}

/* estilos de titulo en modo lista */
.info h2 {
  font-size: 20px;   
  font-weight: bold;       
  margin: 0 0 8px 0;        
  color: #F7A9B2;
  line-height: 22px;
}

/* estilos de titulo en modo video */
.titulo {
  font-size: 20px;   
  font-weight: bold;       
  margin: 0 0 8px 0;
  color: white;
  text-transform: uppercase;
  line-height: 22px;

}



.boton-menu {
  border: none;
      color: #74CAC7;
      text-transform: uppercase;
      cursor: pointer;
      background: #000000;
      font-weight: 600;
      font-size: 19px;
      padding: 5px;
}

.boton-menu.activo {
  color: #19A7B9;

      cursor: pointer;
      background: #000000;
      text-decoration: underline;
}