/* ============================================
   SISTEMA GRID CSS COMPLETO Y RESPONSIVE
   ============================================
   Breakpoints:
   - xs: 0px      (móvil pequeño)
   - sm: 576px    (móvil)
   - md: 768px    (tablet)
   - lg: 992px    (desktop)
   - xl: 1200px   (desktop grande)
   - xxl: 1400px  (pantalla extra grande)
   ============================================ */

/* ── Variables ── */
:root {
  --grid-columns: 12;
  /*--grid-gutter-x: 1.5rem;
  --grid-gutter-y: 0;*/
  --container-padding-x: 1rem;

  /* Ancho máximo de cada breakpoint */
  --container-sm:  540px;
  --container-md:  720px;
  --container-lg:  960px;
  --container-xl:  1140px;
  --container-xxl: 1320px;
}

/* ============================================
   RESET BÁSICO
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================
   CONTENEDORES
   ============================================ */

/* Fluido: ocupa todo el ancho */
.container-fluid {
  width: 100%;
  /*padding-right: var(--container-padding-x);
  padding-left:  var(--container-padding-x);
  margin-right: auto;
  margin-left:  auto;*/
}

/* Fijo: se expande por breakpoint */
.container {
  width: 100%;
  padding-right: var(--container-padding-x);
  padding-left:  var(--container-padding-x);
  margin-right: auto;
  margin-left:  auto;
}

@media (min-width: 576px)  { .container { max-width: var(--container-sm);  } }
@media (min-width: 768px)  { .container { max-width: var(--container-md);  } }
@media (min-width: 992px)  { .container { max-width: var(--container-lg);  } }
@media (min-width: 1200px) { .container { max-width: var(--container-xl);  } }
@media (min-width: 1400px) { .container { max-width: var(--container-xxl); } }

/* Contenedores fijos por breakpoint */
.container-sm  { @media (min-width: 576px)  { max-width: var(--container-sm);  } }
.container-md  { @media (min-width: 768px)  { max-width: var(--container-md);  } }
.container-lg  { @media (min-width: 992px)  { max-width: var(--container-lg);  } }
.container-xl  { @media (min-width: 1200px) { max-width: var(--container-xl);  } }
.container-xxl { @media (min-width: 1400px) { max-width: var(--container-xxl); } }

/* ============================================
   ROW (FILA)
   ============================================ */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--grid-gutter-x) / -2);
  margin-left:  calc(var(--grid-gutter-x) / -2);
  margin-top: calc(var(--grid-gutter-y) * -1);
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--grid-gutter-x) / 2);
  padding-left:  calc(var(--grid-gutter-x) / 2);
  margin-top: var(--grid-gutter-y);
}

/* ── Variantes de Row ── */
.row-cols-1  > * { flex: 0 0 auto; width: 100%;      }
.row-cols-2  > * { flex: 0 0 auto; width: 50%;       }
.row-cols-2-1  > * { flex: 0 0 auto; width: 70%; }
.row-cols-3  > * { flex: 0 0 auto; width: 33.3333%;  }
.row-cols-4  > * { flex: 0 0 auto; width: 25%;       }
.row-cols-5  > * { flex: 0 0 auto; width: 20%;       }
.row-cols-6  > * { flex: 0 0 auto; width: 16.6666%;  }

/* ── Gutters personalizados ── */
.g-0  { --grid-gutter-x: 0;       --grid-gutter-y: 0;       }
.g-1  { --grid-gutter-x: 0.25rem; --grid-gutter-y: 0.25rem; }
.g-2  { --grid-gutter-x: 0.5rem;  --grid-gutter-y: 0.5rem;  }
.g-3  { --grid-gutter-x: 1rem;    --grid-gutter-y: 1rem;    }
.g-4  { --grid-gutter-x: 1.5rem;  --grid-gutter-y: 1.5rem;  }
.g-5  { --grid-gutter-x: 3rem;    --grid-gutter-y: 3rem;    }

.gx-0 { --grid-gutter-x: 0;       }
.gx-1 { --grid-gutter-x: 0.25rem; }
.gx-2 { --grid-gutter-x: 0.5rem;  }
.gx-3 { --grid-gutter-x: 1rem;    }
.gx-4 { --grid-gutter-x: 1.5rem;  }
.gx-5 { --grid-gutter-x: 3rem;    }

.gy-0 { --grid-gutter-y: 0;       }
.gy-1 { --grid-gutter-y: 0.25rem; }
.gy-2 { --grid-gutter-y: 0.5rem;  }
.gy-3 { --grid-gutter-y: 1rem;    }
.gy-4 { --grid-gutter-y: 1.5rem;  }
.gy-5 { --grid-gutter-y: 3rem;    }

/* ============================================
   COLUMNAS BASE  (sin breakpoint = xs, mobile-first)
   ============================================ */
.col       { flex: 1 0 0%; }
.col-auto  { flex: 0 0 auto; width: auto; }

.col-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
.col-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
.col-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
.col-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
.col-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
.col-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
.col-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
.col-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
.col-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
.col-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
.col-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
.col-12 { flex: 0 0 auto; width: 100%; }

/* ── Offsets base ── */
.offset-1  { margin-left: calc(1  / 12 * 100%); }
.offset-2  { margin-left: calc(2  / 12 * 100%); }
.offset-3  { margin-left: calc(3  / 12 * 100%); }
.offset-4  { margin-left: calc(4  / 12 * 100%); }
.offset-5  { margin-left: calc(5  / 12 * 100%); }
.offset-6  { margin-left: calc(6  / 12 * 100%); }
.offset-7  { margin-left: calc(7  / 12 * 100%); }
.offset-8  { margin-left: calc(8  / 12 * 100%); }
.offset-9  { margin-left: calc(9  / 12 * 100%); }
.offset-10 { margin-left: calc(10 / 12 * 100%); }
.offset-11 { margin-left: calc(11 / 12 * 100%); }

/* ── Order base ── */
.order-first { order: -1;  }
.order-last  { order: 13;  }
.order-0     { order: 0;   }
.order-1     { order: 1;   }
.order-2     { order: 2;   }
.order-3     { order: 3;   }
.order-4     { order: 4;   }
.order-5     { order: 5;   }

/* ============================================
   BREAKPOINT: SM  ≥ 576px
   ============================================ */
@media (min-width: 576px) {
  .col-sm       { flex: 1 0 0%; }
  .col-sm-auto  { flex: 0 0 auto; width: auto; }

  .col-sm-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
  .col-sm-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
  .col-sm-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
  .col-sm-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
  .col-sm-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
  .col-sm-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
  .col-sm-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
  .col-sm-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
  .col-sm-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
  .col-sm-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
  .col-sm-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }

  .offset-sm-0  { margin-left: 0; }
  .offset-sm-1  { margin-left: calc(1  / 12 * 100%); }
  .offset-sm-2  { margin-left: calc(2  / 12 * 100%); }
  .offset-sm-3  { margin-left: calc(3  / 12 * 100%); }
  .offset-sm-4  { margin-left: calc(4  / 12 * 100%); }
  .offset-sm-5  { margin-left: calc(5  / 12 * 100%); }
  .offset-sm-6  { margin-left: calc(6  / 12 * 100%); }
  .offset-sm-7  { margin-left: calc(7  / 12 * 100%); }
  .offset-sm-8  { margin-left: calc(8  / 12 * 100%); }
  .offset-sm-9  { margin-left: calc(9  / 12 * 100%); }
  .offset-sm-10 { margin-left: calc(10 / 12 * 100%); }
  .offset-sm-11 { margin-left: calc(11 / 12 * 100%); }

  .order-sm-first { order: -1; }
  .order-sm-last  { order: 13; }
  .order-sm-0 { order: 0; } .order-sm-1 { order: 1; }
  .order-sm-2 { order: 2; } .order-sm-3 { order: 3; }
  .order-sm-4 { order: 4; } .order-sm-5 { order: 5; }

  .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%;     }
  .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%;      }
  .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.3333%; }
  .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%;      }
  .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%;      }
  .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.6666%; }
}

/* ============================================
   BREAKPOINT: MD  ≥ 768px
   ============================================ */
@media (min-width: 768px) {
  .col-md       { flex: 1 0 0%; }
  .col-md-auto  { flex: 0 0 auto; width: auto; }

  .col-md-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
  .col-md-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
  .col-md-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
  .col-md-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
  .col-md-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
  .col-md-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
  .col-md-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
  .col-md-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
  .col-md-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
  .col-md-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
  .col-md-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
  .col-md-12 { flex: 0 0 auto; width: 100%; }

  .offset-md-0  { margin-left: 0; }
  .offset-md-1  { margin-left: calc(1  / 12 * 100%); }
  .offset-md-2  { margin-left: calc(2  / 12 * 100%); }
  .offset-md-3  { margin-left: calc(3  / 12 * 100%); }
  .offset-md-4  { margin-left: calc(4  / 12 * 100%); }
  .offset-md-5  { margin-left: calc(5  / 12 * 100%); }
  .offset-md-6  { margin-left: calc(6  / 12 * 100%); }
  .offset-md-7  { margin-left: calc(7  / 12 * 100%); }
  .offset-md-8  { margin-left: calc(8  / 12 * 100%); }
  .offset-md-9  { margin-left: calc(9  / 12 * 100%); }
  .offset-md-10 { margin-left: calc(10 / 12 * 100%); }
  .offset-md-11 { margin-left: calc(11 / 12 * 100%); }

  .order-md-first { order: -1; }
  .order-md-last  { order: 13; }
  .order-md-0 { order: 0; } .order-md-1 { order: 1; }
  .order-md-2 { order: 2; } .order-md-3 { order: 3; }
  .order-md-4 { order: 4; } .order-md-5 { order: 5; }

  .row-cols-md-1 > * { flex: 0 0 auto; width: 100%;     }
  .row-cols-md-2 > * { flex: 0 0 auto; width: 50%;      }
  .row-cols-md-3 > * { flex: 0 0 auto; width: 33.3333%; }
  .row-cols-md-4 > * { flex: 0 0 auto; width: 25%;      }
  .row-cols-md-5 > * { flex: 0 0 auto; width: 20%;      }
  .row-cols-md-6 > * { flex: 0 0 auto; width: 16.6666%; }
}

/* ============================================
   BREAKPOINT: LG  ≥ 992px
   ============================================ */
@media (min-width: 992px) {
  .col-lg       { flex: 1 0 0%; }
  .col-lg-auto  { flex: 0 0 auto; width: auto; }

  .col-lg-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
  .col-lg-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
  .col-lg-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
  .col-lg-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
  .col-lg-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
  .col-lg-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
  .col-lg-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
  .col-lg-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
  .col-lg-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
  .col-lg-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
  .col-lg-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }

  .offset-lg-0  { margin-left: 0; }
  .offset-lg-1  { margin-left: calc(1  / 12 * 100%); }
  .offset-lg-2  { margin-left: calc(2  / 12 * 100%); }
  .offset-lg-3  { margin-left: calc(3  / 12 * 100%); }
  .offset-lg-4  { margin-left: calc(4  / 12 * 100%); }
  .offset-lg-5  { margin-left: calc(5  / 12 * 100%); }
  .offset-lg-6  { margin-left: calc(6  / 12 * 100%); }
  .offset-lg-7  { margin-left: calc(7  / 12 * 100%); }
  .offset-lg-8  { margin-left: calc(8  / 12 * 100%); }
  .offset-lg-9  { margin-left: calc(9  / 12 * 100%); }
  .offset-lg-10 { margin-left: calc(10 / 12 * 100%); }
  .offset-lg-11 { margin-left: calc(11 / 12 * 100%); }

  .order-lg-first { order: -1; }
  .order-lg-last  { order: 13; }
  .order-lg-0 { order: 0; } .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; } .order-lg-3 { order: 3; }
  .order-lg-4 { order: 4; } .order-lg-5 { order: 5; }

  .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%;     }
  .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%;      }
  .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.3333%; }
  .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%;      }
  .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%;      }
  .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.6666%; }
}

/* ============================================
   BREAKPOINT: XL  ≥ 1200px
   ============================================ */
@media (min-width: 1200px) {
  .col-xl       { flex: 1 0 0%; }
  .col-xl-auto  { flex: 0 0 auto; width: auto; }

  .col-xl-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
  .col-xl-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
  .col-xl-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
  .col-xl-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
  .col-xl-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
  .col-xl-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
  .col-xl-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
  .col-xl-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
  .col-xl-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
  .col-xl-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
  .col-xl-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }

  .offset-xl-0  { margin-left: 0; }
  .offset-xl-1  { margin-left: calc(1  / 12 * 100%); }
  .offset-xl-2  { margin-left: calc(2  / 12 * 100%); }
  .offset-xl-3  { margin-left: calc(3  / 12 * 100%); }
  .offset-xl-4  { margin-left: calc(4  / 12 * 100%); }
  .offset-xl-5  { margin-left: calc(5  / 12 * 100%); }
  .offset-xl-6  { margin-left: calc(6  / 12 * 100%); }
  .offset-xl-7  { margin-left: calc(7  / 12 * 100%); }
  .offset-xl-8  { margin-left: calc(8  / 12 * 100%); }
  .offset-xl-9  { margin-left: calc(9  / 12 * 100%); }
  .offset-xl-10 { margin-left: calc(10 / 12 * 100%); }
  .offset-xl-11 { margin-left: calc(11 / 12 * 100%); }

  .order-xl-first { order: -1; }
  .order-xl-last  { order: 13; }
  .order-xl-0 { order: 0; } .order-xl-1 { order: 1; }
  .order-xl-2 { order: 2; } .order-xl-3 { order: 3; }
  .order-xl-4 { order: 4; } .order-xl-5 { order: 5; }

  .row-cols-xl-1 > * { flex: 0 0 auto; width: 100%;     }
  .row-cols-xl-2 > * { flex: 0 0 auto; width: 50%;      }
  .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.3333%; }
  .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%;      }
  .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%;      }
  .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.6666%; }
}

/* ============================================
   BREAKPOINT: XXL  ≥ 1400px
   ============================================ */
@media (min-width: 1400px) {
  .col-xxl       { flex: 1 0 0%; }
  .col-xxl-auto  { flex: 0 0 auto; width: auto; }

  .col-xxl-1  { flex: 0 0 auto; width: calc(1  / 12 * 100%); }
  .col-xxl-2  { flex: 0 0 auto; width: calc(2  / 12 * 100%); }
  .col-xxl-3  { flex: 0 0 auto; width: calc(3  / 12 * 100%); }
  .col-xxl-4  { flex: 0 0 auto; width: calc(4  / 12 * 100%); }
  .col-xxl-5  { flex: 0 0 auto; width: calc(5  / 12 * 100%); }
  .col-xxl-6  { flex: 0 0 auto; width: calc(6  / 12 * 100%); }
  .col-xxl-7  { flex: 0 0 auto; width: calc(7  / 12 * 100%); }
  .col-xxl-8  { flex: 0 0 auto; width: calc(8  / 12 * 100%); }
  .col-xxl-9  { flex: 0 0 auto; width: calc(9  / 12 * 100%); }
  .col-xxl-10 { flex: 0 0 auto; width: calc(10 / 12 * 100%); }
  .col-xxl-11 { flex: 0 0 auto; width: calc(11 / 12 * 100%); }
  .col-xxl-12 { flex: 0 0 auto; width: 100%; }

  .offset-xxl-0  { margin-left: 0; }
  .offset-xxl-1  { margin-left: calc(1  / 12 * 100%); }
  .offset-xxl-2  { margin-left: calc(2  / 12 * 100%); }
  .offset-xxl-3  { margin-left: calc(3  / 12 * 100%); }
  .offset-xxl-4  { margin-left: calc(4  / 12 * 100%); }
  .offset-xxl-5  { margin-left: calc(5  / 12 * 100%); }
  .offset-xxl-6  { margin-left: calc(6  / 12 * 100%); }
  .offset-xxl-7  { margin-left: calc(7  / 12 * 100%); }
  .offset-xxl-8  { margin-left: calc(8  / 12 * 100%); }
  .offset-xxl-9  { margin-left: calc(9  / 12 * 100%); }
  .offset-xxl-10 { margin-left: calc(10 / 12 * 100%); }
  .offset-xxl-11 { margin-left: calc(11 / 12 * 100%); }

  .order-xxl-first { order: -1; }
  .order-xxl-last  { order: 13; }
  .order-xxl-0 { order: 0; } .order-xxl-1 { order: 1; }
  .order-xxl-2 { order: 2; } .order-xxl-3 { order: 3; }
  .order-xxl-4 { order: 4; } .order-xxl-5 { order: 5; }

  .row-cols-xxl-1 > * { flex: 0 0 auto; width: 100%;     }
  .row-cols-xxl-2 > * { flex: 0 0 auto; width: 50%;      }
  .row-cols-xxl-3 > * { flex: 0 0 auto; width: 33.3333%; }
  .row-cols-xxl-4 > * { flex: 0 0 auto; width: 25%;      }
  .row-cols-xxl-5 > * { flex: 0 0 auto; width: 20%;      }
  .row-cols-xxl-6 > * { flex: 0 0 auto; width: 16.6666%; }
}

/* ============================================
   UTILIDADES DE ALINEACIÓN (Flexbox)
   ============================================ */

/* Alineación vertical de items dentro de un row */
.align-items-start    { align-items: flex-start;    }
.align-items-center   { align-items: center;        }
.align-items-end      { align-items: flex-end;      }
.align-items-baseline { align-items: baseline;      }
.align-items-stretch  { align-items: stretch;       }

/* Alineación horizontal */
.justify-content-start   { justify-content: flex-start;    }
.justify-content-center  { justify-content: center;        }
.justify-content-end     { justify-content: flex-end;      }
.justify-content-between { justify-content: space-between; }
.justify-content-around  { justify-content: space-around;  }
.justify-content-evenly  { justify-content: space-evenly;  }

/* Auto-alineación de una columna individual */
.align-self-auto     { align-self: auto;       }
.align-self-start    { align-self: flex-start; }
.align-self-center   { align-self: center;     }
.align-self-end      { align-self: flex-end;   }
.align-self-baseline { align-self: baseline;   }
.align-self-stretch  { align-self: stretch;    }

/* ============================================
   UTILIDADES DE DISPLAY
   ============================================ */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-flex         { display: flex !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-grid         { display: grid !important; }

@media (min-width: 576px) {
  .d-sm-none         { display: none !important; }
  .d-sm-block        { display: block !important; }
  .d-sm-flex         { display: flex !important; }
  .d-sm-inline       { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-inline-flex  { display: inline-flex !important; }
  .d-sm-grid         { display: grid !important; }
}
@media (min-width: 768px) {
  .d-md-none         { display: none !important; }
  .d-md-block        { display: block !important; }
  .d-md-flex         { display: flex !important; }
  .d-md-inline       { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-inline-flex  { display: inline-flex !important; }
  .d-md-grid         { display: grid !important; }
}
@media (min-width: 992px) {
  .d-lg-none         { display: none !important; }
  .d-lg-block        { display: block !important; }
  .d-lg-flex         { display: flex !important; }
  .d-lg-inline       { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-inline-flex  { display: inline-flex !important; }
  .d-lg-grid         { display: grid !important; }
}
@media (min-width: 1200px) {
  .d-xl-none         { display: none !important; }
  .d-xl-block        { display: block !important; }
  .d-xl-flex         { display: flex !important; }
  .d-xl-inline       { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-inline-flex  { display: inline-flex !important; }
  .d-xl-grid         { display: grid !important; }
}

/* ============================================
   GRID CSS NATIVO (CSS Grid Layout)
   ============================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
  gap: var(--grid-gutter-x, 1.5rem);
}

/* Columnas para CSS Grid nativo */
.g-col-1  { grid-column: auto / span 1;  }
.g-col-2  { grid-column: auto / span 2;  }
.g-col-3  { grid-column: auto / span 3;  }
.g-col-4  { grid-column: auto / span 4;  }
.g-col-5  { grid-column: auto / span 5;  }
.g-col-6  { grid-column: auto / span 6;  }
.g-col-7  { grid-column: auto / span 7;  }
.g-col-8  { grid-column: auto / span 8;  }
.g-col-9  { grid-column: auto / span 9;  }
.g-col-10 { grid-column: auto / span 10; }
.g-col-11 { grid-column: auto / span 11; }
.g-col-12 { grid-column: auto / span 12; }

/* Start columns */
.g-start-1  { grid-column-start: 1;  }
.g-start-2  { grid-column-start: 2;  }
.g-start-3  { grid-column-start: 3;  }
.g-start-4  { grid-column-start: 4;  }
.g-start-5  { grid-column-start: 5;  }
.g-start-6  { grid-column-start: 6;  }
.g-start-7  { grid-column-start: 7;  }
.g-start-8  { grid-column-start: 8;  }
.g-start-9  { grid-column-start: 9;  }
.g-start-10 { grid-column-start: 10; }
.g-start-11 { grid-column-start: 11; }
.g-start-12 { grid-column-start: 12; }

@media (min-width: 576px) {
  .g-col-sm-1  { grid-column: auto / span 1;  }
  .g-col-sm-2  { grid-column: auto / span 2;  }
  .g-col-sm-3  { grid-column: auto / span 3;  }
  .g-col-sm-4  { grid-column: auto / span 4;  }
  .g-col-sm-6  { grid-column: auto / span 6;  }
  .g-col-sm-8  { grid-column: auto / span 8;  }
  .g-col-sm-12 { grid-column: auto / span 12; }
}
@media (min-width: 768px) {
  .g-col-md-1  { grid-column: auto / span 1;  }
  .g-col-md-2  { grid-column: auto / span 2;  }
  .g-col-md-3  { grid-column: auto / span 3;  }
  .g-col-md-4  { grid-column: auto / span 4;  }
  .g-col-md-6  { grid-column: auto / span 6;  }
  .g-col-md-8  { grid-column: auto / span 8;  }
  .g-col-md-12 { grid-column: auto / span 12; }
}
@media (min-width: 992px) {
  .g-col-lg-1  { grid-column: auto / span 1;  }
  .g-col-lg-2  { grid-column: auto / span 2;  }
  .g-col-lg-3  { grid-column: auto / span 3;  }
  .g-col-lg-4  { grid-column: auto / span 4;  }
  .g-col-lg-6  { grid-column: auto / span 6;  }
  .g-col-lg-8  { grid-column: auto / span 8;  }
  .g-col-lg-12 { grid-column: auto / span 12; }
}
@media (min-width: 1200px) {
  .g-col-xl-1  { grid-column: auto / span 1;  }
  .g-col-xl-2  { grid-column: auto / span 2;  }
  .g-col-xl-3  { grid-column: auto / span 3;  }
  .g-col-xl-4  { grid-column: auto / span 4;  }
  .g-col-xl-6  { grid-column: auto / span 6;  }
  .g-col-xl-8  { grid-column: auto / span 8;  }
  .g-col-xl-12 { grid-column: auto / span 12; }
}

/* ============================================
   FIN DEL SISTEMA GRID
   ============================================ */