/* Media Queries para responsive */

/* Estilos para el menú lateral */

/* Ocultar el botón de menú en pantallas grandes */
@media (min-width: 711px) {
    #menu-toggle {
        display: none; /* Ocultar el botón cuando el ancho es mayor a 710px */
    }
}


#side-menu {
    position: fixed; /* Posición fija para que cubra el contenido */
    top: 0;
    right: -250px; /* Fuera de la pantalla por defecto */
    width: 250px; /* Ancho del menú lateral */
    height: 100vh; /* Altura completa de la pantalla */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro semi-transparente */
    color: white; /* Color de texto */
    transition: right 0.3s ease; /* Transición suave */
    z-index: 1000; /* Asegura que esté encima del contenido */
    display: flex;
    flex-direction: column; /* Apilar los enlaces verticalmente */
    padding: 20px;
    font-family: BurgerPointSecundFont;
    text-decoration: none;
    list-style: none;
    align-items: center;
    text-align: center;
}

#side-menu ul li a{
    font-size: 2rem;
    color: var(--main-font-color);
    list-style: none;
    text-decoration: none;
}

#side-menu ul{
    list-style: none;
}

#side-menu ul li a:visited{
    color: var(--main-font-color);
}

/* Mostrar el menú lateral */
#side-menu.open {
    right: 0; /* Mostrar el menú al desplazarlo hacia la derecha */
}

/* Estilos del botón de cerrar */
#close-menu {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    align-self: flex-end; /* Alinear el botón al final del menú */
}


@media (max-width: 710px) {
    /* Ajustes para pantallas grandes (tabletas en modo horizontal y pantallas más pequeñas) */
    
    nav ul li a {
        font-size: 3rem; /* Disminuir tamaño de fuente para enlaces */
        font-family: BurgerPointSecundFont;
    }

    nav p {
        font-size: 32px; /* Disminuir tamaño de fuente para texto del menú */
        font-family: BurgerPointSecundFont;
    }

    #promotion h2 {
        font-size: 6rem; /* Disminuir tamaño de fuente para el encabezado de promociones */
    }

    .promotionCard {
        grid-template-columns: 1fr; /* Hacer que las tarjetas de promoción sean de una columna */
    }

    .promotionCardItem {
        padding: 5px; /* Reducir el padding de los elementos de la tarjeta */
    }
}

@media (max-width: 700px) {
    /* Ajustes para pantallas medianas (tabletas en modo vertical y móviles) */

    nav ul {
        flex-direction: column; /* Cambiar dirección del menú a columna */
        align-items: center; /* Centrar los elementos del menú */
        font-family: BurgerPointSecundFont;
    }

    nav ul li a {
        font-size: 18px; /* Disminuir aún más el tamaño de fuente */
        margin: 5px 0; /* Añadir espacio entre enlaces */
        font-family: BurgerPointSecundFont;
    }

    #promotion h2 {
        font-size: 5rem; /* Reducir aún más el tamaño del encabezado de promociones */
    }

    #menu,
    #premium {
        padding: 40px; /* Reducir el padding de las secciones */
    }

    .menuBurger h2,
    .premiumBurger h2 {
        font-size: 8rem; /* Reducir tamaño de fuente del encabezado de menú */
    }

    .menuBurgerContainerCards,
    #premiumBurgerContainerCards {
        max-width: 90%; /* Ajustar el ancho máximo de las tarjetas */
    }

    .menuBurgerContainerCard,
    .premiumBurgerContainerCard {
        font-size: 1rem; /* Ajustar el tamaño de la fuente dentro de las tarjetas */
    }
    
    #sticker {
        position: absolute; /* Permite mover la imagen respecto a su contenedor */
        top: 160px; /* Ajusta según sea necesario para que se superponga */
        right: -60px; /* Ajusta la posición horizontal a la derecha */
        width: 120px; /* Cambia el tamaño según necesites */
        height: auto; /* Mantiene la proporción de la imagen */
        z-index: 5; /* Asegúrate de que esté por encima del contenido */
        transform: rotate(-10deg);
        display: none;
    }

    /* Estilos de menú oculto por defecto en móviles */
    #nav-list {
        display: none; /* Ocultar el menú por defecto en móviles */
    }

    #menu-toggle {
        background: none;
        border: none;
        color: var(--main-font-color);
        font-size: 24px; /* Tamaño de fuente del botón */
        cursor: pointer;
    }
}

@media (max-width: 500px) {
    /* Ajustes para pantallas pequeñas (móviles) */

    nav p {
        font-size: 3rem; /* Reducir tamaño de fuente del texto del menú */
        font-family: BurgerPointSecundFont;
        padding: 0.5rem;
    }

    .promotionCardItem {
        min-width: 300px; /* Ajustar el ancho mínimo de los elementos de la tarjeta */
    }
    .descriptionPromotionCard {
      font-size: 1.2rem;
  }

    .BurgerCardImg {
        padding: 0.5rem; /* Reducir el padding de las imágenes de las hamburguesas */
    }

    #sticker {
        position: absolute; /* Permite mover la imagen respecto a su contenedor */
        top: 160px; /* Ajusta según sea necesario para que se superponga */
        right: -60px; /* Ajusta la posición horizontal a la derecha */
        width: 120px; /* Cambia el tamaño según necesites */
        height: auto; /* Mantiene la proporción de la imagen */
        z-index: 5; /* Asegúrate de que esté por encima del contenido */
        transform: rotate(-10deg);
        display: none;
    }

    .menuBurger h2 {
        font-size: 5.5rem; /* Ajustar tamaño del encabezado */
    }

    .premiumBurger h2 {
        font-size: 5.5rem; /* Ajustar tamaño del encabezado */
    }
    #menu,
    #premium {
      padding: 20px;
      background-color: #191919;
    }
}


/*footer*/

/* Media Queries para responsive */
@media (max-width: 600px) {
    .footermaincontainer {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
        align-items: center; /* Centrar los elementos */
    }

    .important {
        flex-direction: column; /* Cambiar a columna en la sección importante */
        align-items: center; /* Centrar los elementos */
    }

    .formasDePago,
    .thenks,
    .direction,
    .rrss {
        margin: 5px 0; /* Espacio entre secciones en pantalla pequeña */
        text-align: center; /* Centrar el texto */
    }
    .frasecontainer img {
        left: -50px;
      }
}

@media (max-width: 1024px) {

  
    .aditionalPriceCard {
      font-size: 1rem;
    }
  
    .wideCard {
      grid-column: span 2;
    }
  }
  
  @media (max-width: 768px) {

  
  
    .aditionalPriceCard {
      font-size: 0.9rem;
    }
  
    .wideCard {
      grid-column: span 2;
    }
  }
  
  @media (max-width: 480px) {
    #aditional h2 {
      font-size: 3rem;
    }
  
    .aditionalMenuContainerCards {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
    }
  
    .aditionalImgCard {
      height: 4rem;
    }
  
    .aditionalNameCard {
      font-size: 0.8rem;
    }
  
    .aditionalPriceCard {
      font-size: 0.7rem;
    }
  
    .wideCard {
      grid-column: span 2;
      .aditionalImgCard {
        height: 8rem;
        object-fit: cover;
      }
    }
  }

  /* Responsive design */
@media (max-width: 768px) {
    #horarios {
      padding: 15px;
      margin: 3rem auto 2rem auto;
      width: 95%;
    }
  
    #horarios h2 {
      font-size: 2rem;
      margin-bottom: 15px;
    }
  
    .horario {
      font-size: 1rem;
      padding: 8px;
    }
  
    #estado {
      font-size: 1rem;
    }
  }
  
  @media (max-width: 480px) {
    #horarios {
      padding: 10px;
      margin: 2rem auto 1rem auto;
      width: 90%;
    }
  
    #horarios h2 {
      font-size: 1.5rem;
      margin-bottom: 10px;
    }
  
    .horario {
      font-size: 0.875rem;
      padding: 6px;
    }
  
    #estado {
      font-size: 0.875rem;
    }
  }

  /* Responsive design */
@media (max-width: 1024px) {
    #bebidas h2 {
      font-size: 5rem; /* Tamaño del encabezado en pantallas medianas */
    }
  
    .bebidasMenuContainerCards {
      gap: 15px; /* Reducir espacio entre tarjetas */
    }
  
    .beverageCard {
      width: 16rem; /* Ancho de las tarjetas en pantallas medianas */
    }
  
    .beverageCardImg {
      height: 250px; /* Ajustar altura de las imágenes */
    }
  }
  
  @media (max-width: 768px) {
    #bebidas h2 {
      font-size: 4rem; /* Tamaño del encabezado en pantallas pequeñas */
    }
  
    .bebidasMenuContainerCards {
      flex-direction: row; /* Cambiar a una columna en pantallas pequeñas */
      align-items: center; /* Centrar elementos */
    }
  
    .beverageCard {
      width: 100%; /* Ancho completo en pantallas pequeñas */
      max-width: 300px; /* Máximo ancho de la tarjeta */
      margin: 10px 0; /* Espaciado entre tarjetas */
    }
  
    .beverageCardImg {
      height: 200px; /* Ajustar altura de las imágenes */
    }
  }
  
  @media (max-width: 480px) {
    #bebidas h2 {
      font-size: 3rem; /* Tamaño del encabezado en pantallas muy pequeñas */
    }
  
    .beverageCardName {
      font-size: 1.2rem; /* Tamaño del nombre de la bebida */
    }
  
    .beverageCardDescription {
      font-size: 0.9rem; /* Tamaño de la descripción */
    }
  
    .beverageCardPrice {
      font-size: 1rem; /* Tamaño del precio */
    }
  
    .carousel-button {
      padding: 8px; /* Reducir padding de los botones */
      font-size: 0.9rem; /* Tamaño del texto de los botones */
    }
  }