/* Contenedor de fila, similar a .row */
.row {
    display: flex;
    flex-wrap: wrap; /* Asegura que las columnas se ajusten a nuevas líneas si es necesario */
    margin-right: -15px; /* Ajusta el espaciado entre las columnas */
    margin-left: -15px;
 }
 
 /* Columnas */
 [class^="col-"] {
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
 }
 
 
 
 /* Columna por defecto (comportamiento para xs) */
 [class^="col-"] {
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
 }
 
 /* col-xs (extra pequeño) - <576px (por defecto para col-*) */
 @media (max-width: 575.98px) {
    .col-1 { width: 8.333333%; }
    .col-2 { width: 16.666667%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.333333%; }
    .col-5 { width: 41.666667%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.333333%; }
    .col-8 { width: 66.666667%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.333333%; }
    .col-11 { width: 91.666667%; }
    .col-12 { width: 100%; }
 
    
    /* offset-xs (desplazamiento en pantallas pequeñas, debajo de 576px) */
    .offset-1 { margin-left: 8.333333%; }
    .offset-2 { margin-left: 16.666667%; }
    .offset-3 { margin-left: 25%; }
    .offset-4 { margin-left: 33.333333%; }
    .offset-5 { margin-left: 41.666667%; }
    .offset-6 { margin-left: 50%; }
    .offset-7 { margin-left: 58.333333%; }
    .offset-8 { margin-left: 66.666667%; }
    .offset-9 { margin-left: 75%; }
    .offset-10 { margin-left: 83.333333%; }
    .offset-11 { margin-left: 91.666667%; }
 
    /* offset para pantallas extra pequeñas, si quieres un desplazamiento a nivel global */
 .offset-0 { margin-left: 0%; }
 }
 
 /* col-md (mediano) - >=768px */
 @media (min-width: 768px) {
    .col-md-1 { width: 8.333333%; }
    .col-md-2 { width: 16.666667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.333333%; }
    .col-md-5 { width: 41.666667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.333333%; }
    .col-md-8 { width: 66.666667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.333333%; }
    .col-md-11 { width: 91.666667%; }
    .col-md-12 { width: 100%; }
 
    
    /* offset-md (desplazamiento en pantallas medianas, ≥768px) */
    .offset-md-1 { margin-left: 8.333333%; }
    .offset-md-2 { margin-left: 16.666667%; }
    .offset-md-3 { margin-left: 25%; }
    .offset-md-4 { margin-left: 33.333333%; }
    .offset-md-5 { margin-left: 41.666667%; }
    .offset-md-6 { margin-left: 50%; }
    .offset-md-7 { margin-left: 58.333333%; }
    .offset-md-8 { margin-left: 66.666667%; }
    .offset-md-9 { margin-left: 75%; }
    .offset-md-10 { margin-left: 83.333333%; }
    .offset-md-11 { margin-left: 91.666667%; }
 }
 
 /* col-lg (grande) - >=1200px */
 @media (min-width: 1200px) {
    .col-lg-1 { width: 8.333333%; }
    .col-lg-2 { width: 16.666667%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.333333%; }
    .col-lg-5 { width: 41.666667%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.333333%; }
    .col-lg-8 { width: 66.666667%; }
    .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.333333%; }
    .col-lg-11 { width: 91.666667%; }
    .col-lg-12 { width: 100%; }
 
    
    /* offset-lg (desplazamiento en pantallas grandes, ≥1200px) */
    .offset-lg-1 { margin-left: 8.333333%; }
    .offset-lg-2 { margin-left: 16.666667%; }
    .offset-lg-3 { margin-left: 25%; }
    .offset-lg-4 { margin-left: 33.333333%; }
    .offset-lg-5 { margin-left: 41.666667%; }
    .offset-lg-6 { margin-left: 50%; }
    .offset-lg-7 { margin-left: 58.333333%; }
    .offset-lg-8 { margin-left: 66.666667%; }
    .offset-lg-9 { margin-left: 75%; }
    .offset-lg-10 { margin-left: 83.333333%; }
    .offset-lg-11 { margin-left: 91.666667%; }
 }
 
 
 
 
 
 
 /* .container */
 .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
 }
 
 /* Para pantallas más grandes, el contenedor se adapta a un ancho máximo */
 @media (min-width: 576px) {
    .container {
        max-width: 540px; /* Ancho máximo en pantallas pequeñas */
    }
 }
 
 @media (min-width: 768px) {
    .container {
        max-width: 720px; /* Ancho máximo en pantallas medianas */
    }
 }
 
 @media (min-width: 992px) {
    .container {
        max-width: 960px; /* Ancho máximo en pantallas grandes */
    }
 }
 
 @media (min-width: 1200px) {
    .container {
        max-width: 1140px; /* Ancho máximo en pantallas muy grandes */
    }
 }
 
 @media (min-width: 1400px) {
    .container {
        max-width: 1320px; /* Ancho máximo en pantallas extra grandes (si se usa en algunos casos) */
    }
 }