.hero-banner {
    background-image: url('../imagenes/fondo2.png');
    background-size:cover;
    background-position: center;
    height: 50vh;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;

    h1 {
        display: flex;
        width: 90%;
        font-size: 60px;
        text-transform: uppercase;
        font-weight: 800;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
        color: var(--color-ligth);


        span {
            color: var(--color-primary);
            align-items: center;
        }
    }
}

.menu-layout {
  display: grid;
  grid-template-columns: 260px 1fr; /* izquierda / derecha */
  gap: 80px;
  align-items: start;
}

/* COLUMNA IZQUIERDA */
.menu-left {
  position: sticky;
  top: 120px; /* como FoodFast */
}

.menu-mini {
  color: #c7a14a;
  letter-spacing: 3px;
  font-size: 13px;
  display: block;
}

.menu-title {
  font-size: 48px;
  margin-top: 10px;
}

/* COLUMNA DERECHA */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 80px;
}
.menu-item img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #111;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  flex-shrink: 0;
}


.menu-header {
  display: flex;
  align-items: center;
  width: 100%;
}

menu-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.menu-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.25);
  margin: 0 14px;
}

.menu-price {
  background: #f5c04e;
  color: #000;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.menu-desc {
  margin-top: 6px;
  font-size: 14px;
  color: #cfcfcf;
  line-height: 1.5;
}

@media (max-width: 1024px) {

  .menu-layout {
    grid-template-columns: 220px 1fr;
    gap: 50px;
  }

  .menu-title {
    font-size: 40px;
  }

  .menu-grid {
    grid-template-columns: 1fr;
  }
}

/* MOBILE */
@media (max-width: 768px) {

  .menu-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .menu-left {
    position: relative;
    top: 0;
  }

  .menu-title {
    font-size: 34px;
  }

  .menu-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .menu-item {
    gap: 18px;
  }

  .menu-item img {
    width: 72px;
    height: 72px;
  }

  .menu-name {
    font-size: 15px;
  }

  .menu-price {
    font-size: 13px;
    padding: 5px 12px;
  }

  .menu-desc {
    font-size: 13px;
  }
}

/* SMALL MOBILE */
@media (max-width: 480px) {

  .menu-title {
    font-size: 30px;
  }

  .menu-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  .menu-line {
    display: none; 
  }

  .menu-price {
    margin-left: auto;
  }
}