root {
	--sombra: 9px 9px 14px #676767, -9px -9px 14px #ffffff;
}

body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .barra-superior {
      background-color: #83072D;
      color: #fff;
      padding: 10px;
      text-align: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Efecto sombreado */
    }

/* Clase para cabiar la separaciones de los menu */
.barra-superior img {
      width: 45px; /* Ajusta el tamaño de la imagen según sea necesario */
      height: 30px;
      margin: 0 1px;
    }
.carta_icon img{
	
      width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
      height: 30px;
      margin: 0 10px;
 
}

.bebidas_icon img{
	
      width: auto; /* Ajusta el tamaño de la imagen según sea necesario */
      height: 60px;
      margin: 0 10px;
 
}

.bebidas_cuartos{
	
     background-color: #e1948b;
}

.barra-inferior {
      background-color: #83072D;
      color: #fff;
      padding: 10px;
      text-align: center;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
    }
    .barra-inferior img {
      width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
      height: 30px;
      margin: 0 15px;
    }

    .carta {
      background: url('../imagenes/logos/fondo_menu_donpepe.png') center center fixed; /* Ruta de tu imagen de fondo */
      background-size: cover;
      background-blend-mode: overlay; /* Puedes ajustar esto según tus preferencias */
      background-color: rgba(255, 255, 255, 0.8); /* Ajusta la opacidad del fondo */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: calc(100% - 20px); /* Ocupa todo el ancho de la pantalla menos 10px */
      margin: 0 5px; /* Añade un pequeño margen */
      padding: 10px;
      text-align: center;
      margin-top: 10px; /* Ajusta el margen superior para dejar espacio para la barra superior */
      margin-bottom: 60px; /* Ajusta el margen inferior para dejar espacio para la barra inferior */
      opacity: 0; /* Inicialmente establece la opacidad a 0 */
      transition: opacity 1s ease-in-out; /* Agrega una transición para la opacidad */
      animation: sombraAnimacion 1.5s infinite alternate; /* Agrega animación a la sombra */
    }

    .carta.loaded {
      opacity: 1; /* Cambia la opacidad a 1 cuando la clase loaded está presente */
    }

    @keyframes sombraAnimacion {
      from {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      to {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      }
    }

    .fadeIn {
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .carta.loaded .fadeIn {
      opacity: 1;
    }

    .carta h2,
    .carta p,
    .menu-item,
    .submenu a {
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Agrega sombra a los elementos de la carta */
      padding: 15px; /* Ajusta el relleno según sea necesario */
      margin-bottom: 15px; /* Ajusta el margen inferior según sea necesario */
    }

    h2 {
      color: #333;
    }

    p {
      color: #777;
	  
    }

    .menu {
      margin-top: 20px;
    }

    .menu-item {
      cursor: pointer;
      border-bottom: 1px solid #ddd;
      transition: background-color 0.3s;
	  width: 100%; /* Ajusta el ancho del elemento al 100% */
      box-sizing: border-box; /* Incluye el relleno y el borde en el ancho total */
	  display: flex; /* Utiliza un contenedor flex para alinear elementos */
      justify-content: space-between; /* Espacia los elementos para alinear el ícono a la izquierda y el texto a la derecha */
      align-items: center; /* Centra verticalmente los elementos dentro del contenedor flex */
    }

	.menu-item img {
      margin-left: 10px; /* Ajusta el margen entre el ícono y el texto según sea necesario */
    }

    .menu-item:hover {
      background-color: #f9f9f9;
    }

    .submenu {
      display: none;
      padding-left: 20px;
    }

    .submenu a {
      color: #333;
      text-decoration: none;
      display: block;
      padding: 5px;
    }
.submenu td{
	text-align: left;
}
.submenu img {
	border-radius: 10px; /* Agrega esquinas bordeadas */
}

.ventana-flotante {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
.ventana-flotante img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

.cerrar {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }
.contenido-ventana {
            max-width: 80%;
            max-height: 80%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            overflow: hidden; /* Evitar que el contenido se desborde */
        }

.contenido-ventana img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
.creditos{
	text-align: center;
	color: white;
	font-size: 10px;
	
}

#logoPrincipal {
   
			height: 8rem;
    	    width: 100%;
   		    border-radius: 20px;
	        box-shadow: var(--sombra);
			object-fit: cover; /* Recorta la imagen para que quepa sin estirar */
            object-position: center; /* Alinea la imagen al centro */
        }