/* ─── Ajustes móviles de Hermus ───────────────────────────────────────────
   Los layouts usan estilos inline (vienen del diseño), por eso estas
   reglas necesitan !important para ganar en pantallas chicas. */

/* El menú superior se desliza horizontalmente en pantallas angostas */
.topnav { overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-grid > div { border-right: none !important; border-bottom: 1px solid #b4b4ae; }
  .pedido-grid { grid-template-columns: 1fr !important; }
  .pedido-panel { border-left: none !important; border-top: 1px solid #b4b4ae; }
  .pers-grid { grid-template-columns: 1fr !important; }
  .pers-panel { border-left: none !important; border-top: 1px solid #b4b4ae; }
  .grid3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .strip8 { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 560px) {
  .grid3, .grid4 { grid-template-columns: 1fr !important; }
  .strip8 { grid-template-columns: repeat(2, 1fr) !important; }
  .fila-pedido { flex-wrap: wrap; }
}