/* ==========================================================================
   SISTEMA DE GRID INTERNO PARA BLOQUES
   ========================================================================== */
.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
  padding-left: var(--layout-padding-x);
  padding-right: var(--layout-padding-x);
  width: 100%;
  max-width: var(--layout-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Clases de Ancho (SPAN) - Desktop */
.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }

/* Clases de Posición (START) - Desktop */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

/* ==========================================================================
   MEDIA QUERY RESPONSIVE (MÓVILES)
   ========================================================================== */
@media (max-width: 768px) {
  .grid-container > [class*="col-"],
  .grid-container > [class*="col-start-"] {
    grid-column-start: auto;
    grid-column-end: span 4;
  }

  .grid-container > .col-sm-1 { grid-column-start: auto; grid-column-end: span 1; }
  .grid-container > .col-sm-2 { grid-column-start: auto; grid-column-end: span 2; }
  .grid-container > .col-sm-3 { grid-column-start: auto; grid-column-end: span 3; }
  .grid-container > .col-sm-4 { grid-column-start: auto; grid-column-end: span 4; }
}