/* === Layout general === */

header,
footer {
  width: 100%;
}

/* === Contenedores === */

.container {
  display: block;
}

/* === Secciones === */

.section {
  position: relative;
}

/* === Grids y helpers === */

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1;
}

.col-2 {
  flex: 0 0 50%;
}

.col-3 {
  flex: 0 0 33.333%;
}

.col-4 {
  flex: 0 0 25%;
}

/* === Helpers de alineación === */

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  flex-direction: column;
}

/* === Espaciados === */

.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 2rem; }

/* === Responsive === */

@media (max-width: 768px) {
  .col,
  .col-2,
  .col-3,
  .col-4 {
    flex: 0 0 100%;
  }

  .flex-mobile-column {
    flex-direction: column;
  }
}