/* -------------------------
   Variables globales
-------------------------- */
:root {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: .85rem;
  --bs-container-padding-x: .85rem;
}


/* -------------------------
   Containers
-------------------------- */
.container,
.container-fluid {
  width: 100%;
  padding-right: var(--bs-container-padding-x);
  padding-left: var(--bs-container-padding-x);
  margin-right: auto;
  margin-left: auto;
}

/* Max-widths (Bootstrap 5-style) */
@media (min-width: 576px) {
  .container { max-width: 540px; }
}
@media (min-width: 768px) {
  .container { max-width: 720px; }
}
@media (min-width: 992px) {
  :root {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
    --bs-container-padding-x: 1.25rem;
  }
  .container { max-width: 960px; }
}
@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

/* -------------------------
   Row
-------------------------- */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--bs-gutter-x);
  row-gap: var(--bs-gutter-y);
}

/* -------------------------
   Base columns
-------------------------- */
[class^="col"],
[class*=" col"] {
  min-width: 0; /* evita overflow */
}

/* .col = auto (ocupa espacio disponible) */
.col {
  grid-column: auto;
  grid-column: span 12;
}

/* -------------------------
   Fixed columns (.col-1 … .col-12)
-------------------------- */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* -------------------------
   Breakpoints
-------------------------- */

/* ≥576px (sm) */
@media (min-width: 576px) {
  .col-sm-1  { grid-column: span 1; }
  .col-sm-2  { grid-column: span 2; }
  .col-sm-3  { grid-column: span 3; }
  .col-sm-4  { grid-column: span 4; }
  .col-sm-5  { grid-column: span 5; }
  .col-sm-6  { grid-column: span 6; }
  .col-sm-7  { grid-column: span 7; }
  .col-sm-8  { grid-column: span 8; }
  .col-sm-9  { grid-column: span 9; }
  .col-sm-10 { grid-column: span 10; }
  .col-sm-11 { grid-column: span 11; }
  .col-sm-12 { grid-column: span 12; }
}

/* ≥768px (md) */
@media (min-width: 768px) {
  .col-md-1  { grid-column: span 1; }
  .col-md-2  { grid-column: span 2; }
  .col-md-3  { grid-column: span 3; }
  .col-md-4  { grid-column: span 4; }
  .col-md-5  { grid-column: span 5; }
  .col-md-6  { grid-column: span 6; }
  .col-md-7  { grid-column: span 7; }
  .col-md-8  { grid-column: span 8; }
  .col-md-9  { grid-column: span 9; }
  .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; }
  .col-md-12 { grid-column: span 12; }
}

/* ≥992px (lg) */
@media (min-width: 992px) {
  .col-lg-1  { grid-column: span 1; }
  .col-lg-2  { grid-column: span 2; }
  .col-lg-3  { grid-column: span 3; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-5  { grid-column: span 5; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-7  { grid-column: span 7; }
  .col-lg-8  { grid-column: span 8; }
  .col-lg-9  { grid-column: span 9; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; }
  .col-lg-12 { grid-column: span 12; }
}

/* ≥1200px (xl) */
@media (min-width: 1200px) {
  .col-xl-1  { grid-column: span 1; }
  .col-xl-2  { grid-column: span 2; }
  .col-xl-3  { grid-column: span 3; }
  .col-xl-4  { grid-column: span 4; }
  .col-xl-5  { grid-column: span 5; }
  .col-xl-6  { grid-column: span 6; }
  .col-xl-7  { grid-column: span 7; }
  .col-xl-8  { grid-column: span 8; }
  .col-xl-9  { grid-column: span 9; }
  .col-xl-10 { grid-column: span 10; }
  .col-xl-11 { grid-column: span 11; }
  .col-xl-12 { grid-column: span 12; }
}

/* ≥1400px (xxl) */
@media (min-width: 1800px) {
  .col-xxl-1  { grid-column: span 1; }
  .col-xxl-2  { grid-column: span 2; }
  .col-xxl-3  { grid-column: span 3; }
  .col-xxl-4  { grid-column: span 4; }
  .col-xxl-5  { grid-column: span 5; }
  .col-xxl-6  { grid-column: span 6; }
  .col-xxl-7  { grid-column: span 7; }
  .col-xxl-8  { grid-column: span 8; }
  .col-xxl-9  { grid-column: span 9; }
  .col-xxl-10 { grid-column: span 10; }
  .col-xxl-11 { grid-column: span 11; }
  .col-xxl-12 { grid-column: span 12; }
}

/* EVENTS SPECIAL ALIGNMENT */
.events .row:has(.swiper-slide_) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bs-gutter-y) var(--bs-gutter-x);
}

.events .row:has(.swiper-slide_) > * {
    flex: 0 0 calc(25% - var(--bs-gutter-x));
    max-width: calc(25% - var(--bs-gutter-x));
}

@media (max-width: 1800px) {
  .events .row:has(.swiper-slide_) > * {
      flex: 0 0 calc(33.333% - (var(--bs-gutter-x) / 1.5));
      max-width: calc(33.333% - (var(--bs-gutter-x) / 1.5));
  }
}

@media (max-width: 1200px) {
  .events .row:has(.swiper-slide_) > * {
      flex: 0 0 calc(50% - var(--bs-gutter-x));
      max-width: calc(50% - var(--bs-gutter-x));
  }
}
  
@media (max-width: 991px) {
  .events .row:has(.swiper-slide_) > * {
      flex: 0 0 100%;
      max-width: 100%;
  }
}