/* =========================================
   GRID & CONTENEDORES NATIVOS
   ========================================= */

.contenedor {
  width: 100%;
  padding-left: 150px;
  padding-right: 150px;
  justify-self: center;
}


.grid-home {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 25px;
}

@media (max-width: 991px) {
  .grid-home {
    grid-template-columns: 1fr;
  }
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.flex-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* =========================================
   GRID 12 COLUMNAS (mobile first)
   ========================================= */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  width: 100%;
}

.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; }

@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; }
}

@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; }
}

@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; }
}

@media (min-width: 1300px) {
  .col-xl-1  { grid-column: span 1; }
  .col-xl-3  { grid-column: span 3; }
  .col-xl-2  { grid-column: span 2; }
  .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; }
}

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