/* Sistema de columnas, offsetting y container (desktop y mobile) */
:root {
  /* Container */
  --grid-width: 100%;
  --grid-margin-x: 80px;
  --grid-gap: 32px;
  --container-max-width: var(--grid-width, 100vw);
  --container-padding-x: var(--grid-margin-x, 80px);
}

@media (max-width: 900px) {
  :root {
    --grid-margin-x: 24px;
    --grid-gap: 16px;
    --container-max-width: var(--grid-width, 100vw);
    --container-padding-x: var(--grid-margin-x, 24px);
  }
}

.divider {
  width: 100%;
  height: 2px;
  background: var(--surface-accent, #E0E0E0);
  border: none;
  margin: 0 calc(-50vw + 50%); /* Para que ocupe de punta a punta aunque esté dentro de un container */
}

/* Utilidades para mostrar/ocultar en mobile/desktop */
.no-mobile {
  display: inline;
}
@media (max-width: 900px) {
  .no-mobile {
    display: none !important;
  }
}

.yes-mobile {
  display: none;
}
@media (max-width: 900px) {
  .yes-mobile {
    display: inline !important;
  }
}

section {
    padding-top: var(--spacing-120) !important;
    padding-bottom: var(--spacing-140) !important;
    background: var(--surface-background, #1d1d1d);
}

.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  width: 100%;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--grid-gap, 32px) / -2);
  margin-right: calc(var(--grid-gap, 32px) / -2);
}
[class^="col-"], [class*=" col-"] {
  padding-left: calc(var(--grid-gap, 32px) / 2);
  padding-right: calc(var(--grid-gap, 32px) / 2);
  padding-top: calc(var(--grid-gap, 32px) / 2);
  padding-bottom: calc(var(--grid-gap, 32px) / 2);  box-sizing: border-box;
}
.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

.offset-1 { margin-left: 8.3333%; }
.offset-2 { margin-left: 16.6666%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.3333%; }
.offset-5 { margin-left: 41.6666%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.3333%; }
.offset-8 { margin-left: 66.6666%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.3333%; }
.offset-11 { margin-left: 91.6666%; }

@media (max-width: 900px) {
  .col-1-mobile { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-2-mobile { flex: 0 0 16.6666%; max-width: 16.6666%; }
  .col-3-mobile { flex: 0 0 25%; max-width: 25%; }
  .col-4-mobile { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-5-mobile { flex: 0 0 41.6666%; max-width: 41.6666%; }
  .col-6-mobile { flex: 0 0 50%; max-width: 50%; }
  .col-7-mobile { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-8-mobile { flex: 0 0 66.6666%; max-width: 66.6666%; }
  .col-9-mobile { flex: 0 0 75%; max-width: 75%; }
  .col-10-mobile { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-11-mobile { flex: 0 0 91.6666%; max-width: 91.6666%; }
  .col-12-mobile { flex: 0 0 100%; max-width: 100%; }

  .offset-1-mobile { margin-left: 8.3333%; }
  .offset-2-mobile { margin-left: 16.6666%; }
  .offset-3-mobile { margin-left: 25%; }
  .offset-4-mobile { margin-left: 33.3333%; }
  .offset-5-mobile { margin-left: 41.6666%; }
  .offset-6-mobile { margin-left: 50%; }
  .offset-7-mobile { margin-left: 58.3333%; }
  .offset-8-mobile { margin-left: 66.6666%; }
  .offset-9-mobile { margin-left: 75%; }
  .offset-10-mobile { margin-left: 83.3333%; }
  .offset-11-mobile { margin-left: 91.6666%; }

  [class*="col-"][class*="-mobile"]:not([class*="offset-"][class*="-mobile"]) {
    margin-left: 0 !important;
  }
  [class*="col-"][class*="-mobile"] {
    margin-left: 0 !important;
  }
}