/*
 * Ancho del sitio público (layouts/plantilla-front).
 *
 * Bootstrap frena el contenedor en 1320px. En pantallas grandes el sitio
 * ahora llega hasta 1600px, pero siempre deja aire a los costados (80px de
 * cada lado como mínimo): header, contenido y footer usan el mismo
 * .container, así que se alinean solos.
 *
 * Entre 1400 y ~1480px queda en 1320px como antes; a partir de ahí crece
 * hasta 1600px (pantallas de 1760px o más).
 *
 * Más allá de 1920px el tope deja de ser fijo y pasa a ser el 83,33% del
 * ancho (1600px de 1920): con el zoom alejado (o en una pantalla muy ancha)
 * los márgenes quedan en la misma proporción en vez de agrandarse. En una
 * pantalla de 1920px o menos se ve igual que antes.
 */
@media (min-width: 1400px) {
  .container {
    max-width: clamp(1320px, calc(100vw - 160px), max(1600px, 83.333vw));
  }
}

/*
 * Grilla de categorías (/categorias y la Home): 6 por fila en pantallas
 * grandes. Las cards son más angostas que antes, así que los nombres van más
 * chicos y cortan la palabra larga (PORTAESCOBILLAS) en vez de salirse.
 */
.categorias-grilla .category-name {
  padding-right: 16px;
  font-size: clamp(17px, 1.15vw, 21px);
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.categorias-grilla .overlayCat { padding-left: 16px; }