.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 4rem; /* Aumentado para mejores márgenes laterales */
}

.section {
  padding: 8rem 0;
  position: relative;
}

/* Grilla Flexible */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Mosaic (Específico para el Brandbook) */
.mosaic-brandbook {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: repeat(2, 340px); /* Aumentado de 250px para mejor legibilidad */
  gap: 1.5rem;
}

.mosaic-brandbook .large {
  grid-row: span 2;
}

@media (max-width: 1024px) {
  .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .mosaic-brandbook { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .container { padding: 0 1.5rem; }
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
  .mosaic-brandbook {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 300px);
  }
  .section { padding: 4rem 0; }
}

@media (max-width: 480px) {
  .container { padding: 0 1.25rem; }
  .section { padding: 3rem 0; }
  .mosaic-brandbook { grid-template-rows: repeat(5, 260px); }
}