/* Contenedor general */
.menu-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5px;
}

/* Grilla de 3 columnas */
.col-grid-3 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  text-align: center !important;
}

.menu-container .col-grid-3 > div {
  flex: 0 0 calc(100% / 3) !important;
  max-width: calc(100% / 3) !important;
  padding: 3px !important;
  box-sizing: border-box !important;
}

/* Botón invisible para mantener alineación */
.boton-placeholder {
  visibility: hidden !important;
}

/* Imágenes de los botones */
.menu-container .col-grid-3 img {
  display: inline-block !important;
  margin: 0 auto 6px auto !important;
  height: auto !important;
  max-width: 90px !important;
}

/* --- Estilos de títulos y separadores --- */
.menu-divider {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 15px 0;
}

.menu-section-title {
  font-size: 14px; /* tamaño base en escritorio */
  font-weight: bold;
  color: #555;
  margin: 5px 0 10px 0;
  text-align: left; /* por defecto en escritorio */
}

/* En pantallas menores a 992px (celulares y tablets), centrar y reducir tamaño */
@media (max-width: 991px) {
  .menu-section-title {
    text-align: center;
    font-size: 10px; /* más pequeño en móviles/tablets */
  }
}

/* --- Media Queries --- */

/* Móviles */
@media (max-width: 576px) {
  .menu-container .col-grid-3 > div {
    flex: 0 0 calc(100% / 3) !important;
    max-width: calc(100% / 3) !important;
    padding: 3px !important;
  }
  .menu-container .col-grid-3 img {
    max-width: 90px !important;
    margin-bottom: 6px !important;
  }
}

/* Tablets */
@media (min-width: 577px) and (max-width: 991px) {
  .menu-container {
    max-width: 650px !important;
    padding: 0 25px !important;
  }
  .menu-container .col-grid-3 img {
    max-width: 120px !important;
    margin-bottom: 8px !important;
  }
}

/* Escritorio */
@media (min-width: 992px) {
  .menu-container {
    max-width: 700px !important;
    padding: 0 30px !important;
  }
  .menu-container .col-grid-3 img {
    max-width: 150px !important;
    margin-bottom: 8px !important;
  }
}

/* Estilo exclusivo para el título del menú */
.menu-title {
  color: #2c3e50; /* gris oscuro/azul */
}