.menu-hero { text-align: center; padding-bottom: var(--space-3); }
@media (max-width: 767px) { .menu-hero { padding-bottom: 19px; } }
.menu-hero p.lead { max-width: 56ch; margin-left: auto; margin-right: auto; }

#menu-tabs { justify-content: center; margin-bottom: var(--space-5); }

/* El menú escala 2 → 3 → 4 columnas: tarjetas más chicas y menos scroll. Se
   sobrescribe con alcance al menú para no tocar inicio ni catering, que
   comparten la clase .grid--3 global (components.css).
   **Dos columnas desde el arranque**, también en 375px: ahí la tarjeta mide
   ~158px, así que el gap y el padding bajan (24 → 12) para no dejar el
   contenido en 103px. Ver el bloque "tarjeta compacta" más abajo. */
#menu-grid .grid--3 {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px)  { #menu-grid .grid--3 { gap: var(--space-3); } }
@media (min-width: 900px)  { #menu-grid .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { #menu-grid .grid--3 { grid-template-columns: repeat(4, 1fr); } }

.menu-category + .menu-category { margin-top: var(--space-6); }
.menu-category h2 { margin-bottom: 4px; }
.menu-category > p.text-humo { margin-bottom: var(--space-3); max-width: 70ch; }

#menu-extras {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-4);
}
@media (min-width: 768px) {
  #menu-extras { grid-template-columns: 1fr 1fr; }
}
#menu-extras ul { margin-top: 8px; }
#menu-extras li { margin-bottom: 6px; font-size: .9rem; }

/* ---------- Agregar al pedido desde la tarjeta ----------
   La tarjeta alterna entre el botón "Agregar a mi pedido" y el contador. Ambos
   ocupan el mismo alto para que la tarjeta no brinque al cambiar de estado (y
   con ella toda la fila del grid). */
#menu-grid .card-actions {
  align-items: center;
  min-height: 40px;
}
#menu-grid .card-qty {
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--crema);
}
#menu-grid .card-qty .qty-btn { border-radius: 50%; }

/* ---------- Tarjeta compacta (2 columnas en móvil) ----------
   Con 2 columnas en 375px la tarjeta mide ~158px: el padding de --space-3 y el
   título en una sola línea con el precio dejaban el contenido inservible. Aquí
   se aprieta todo hasta 639px; de 640 en adelante la tarjeta recupera su
   tamaño normal, definido en components.css. */
@media (max-width: 639px) {
  #menu-grid .card-body {
    padding: 12px;
    gap: 6px;
  }
  /* Nombre y precio dejan de compartir renglón: "Sándwich de Pulled Pork en
     Hogaza" junto a "$140" no cabe en 134px de contenido. */
  #menu-grid .card-title {
    display: block;
  }
  #menu-grid .card-title h3 { font-size: 1rem; line-height: 1.2; }
  #menu-grid .card-price { display: block; margin-top: 2px; font-size: .95rem; }
  /* La descripción se lee completa: se probó recortarla a 3 líneas y se perdía
     información del platillo (los aderezos que incluye, por ejemplo). En vez de
     cortar, baja la tipografía — en 134px de ancho aguanta bien. */
  #menu-grid .card-desc {
    font-size: .74rem;
    line-height: 1.4;
  }
  #menu-grid .card-badge { margin: 6px; padding: 3px 8px; font-size: .65rem; }
  /* Blancos cómodos para el pulgar: los botones estaban en 26px y costaba subir
     la cantidad de un producto. 40px es lo máximo que cabe en los 134px de
     contenido de la tarjeta (40+40+26 de la cifra + separaciones y el borde). */
  #menu-grid .card-actions { min-height: 46px; }
  #menu-grid .card-actions .btn-sm { padding: 12px 18px; font-size: .85rem; }
  #menu-grid .card-qty { gap: 2px; padding: 3px; }
  #menu-grid .card-qty .qty-btn { width: 40px; height: 40px; font-size: 1.2rem; }
  #menu-grid .card-qty .qty-value { min-width: 26px; font-size: 1rem; }
}

/* El botón lleva las dos etiquetas y el CSS decide cuál se ve: en 2 columnas
   angostas "Agregar a mi pedido" se parte en tres líneas. */
.btn-add-corto { display: none; }
@media (max-width: 639px) {
  .btn-add-largo { display: none; }
  .btn-add-corto { display: inline; }
}