.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.grid { display: grid; }
.gap-2 { gap: var(--of-space-2); }
.gap-4 { gap: var(--of-space-4); }
.gap-6 { gap: var(--of-space-6); }
.gap-8 { gap: var(--of-space-8); }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--of-space-4); }
.mt-8 { margin-top: var(--of-space-8); }
.mt-12 { margin-top: var(--of-space-12); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--of-space-4); }
.mb-8 { margin-bottom: var(--of-space-8); }

.bg-arena { background: var(--of-arena); }
.bg-grafito { background: var(--of-grafito); color: var(--of-blanco); }
.bg-blanco { background: var(--of-blanco); }

.rounded { border-radius: var(--of-radius); }
.rounded-lg { border-radius: var(--of-radius-lg); }
.rounded-xl { border-radius: var(--of-radius-xl); }

.shadow { box-shadow: var(--of-shadow); }
.shadow-lg { box-shadow: var(--of-shadow-lg); }

.hidden { display: none; }
@media (max-width: 768px) { .hidden-mobile { display: none; } }
@media (min-width: 769px) { .hidden-desktop { display: none; } }