.contenedorColumnas {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 columnas iguales */
  gap: 10px; /* espacio entre columnas */
}

[class*="col-"] {
  background: #ddd; /* solo para visualizar */
  padding: 10px;
  box-sizing: border-box;
}

/* Mobile first → todas ocupan ancho completo */
[class*="col-"] {
  grid-column: span 12;
}

/* Offsets base: aplican según breakpoint */
.offset-1  { grid-column-start: 2; }
.offset-2  { grid-column-start: 3; }
.offset-3  { grid-column-start: 4; }
.offset-4  { grid-column-start: 5; }
.offset-5  { grid-column-start: 6; }
.offset-6  { grid-column-start: 7; }
.offset-7  { grid-column-start: 8; }
.offset-8  { grid-column-start: 9; }
.offset-9  { grid-column-start: 10; }
.offset-10 { grid-column-start: 11; }
.offset-11 { grid-column-start: 12; }

/* Responsive Offsets */

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

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

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

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

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