/* Replicando el sistema de grillas de Framework7 v7 */
    .row {
      display: flex;
      flex-wrap: wrap;
      margin-left: calc(-1 * var(--f7-grid-gap));
      margin-right: calc(-1 * var(--f7-grid-gap));
    }
    .row > div[class*="col"] {
      box-sizing: border-box;
      padding-left: var(--f7-grid-gap);
      padding-right: var(--f7-grid-gap);
    }
    /* Clases para anchos de columnas personalizados */
    .col-10 {
      width: 10% !important;
    }      
    .col-20 {
      width: 20% !important;
    }
    .col-30 {
      width: 30% !important;
    }
    .col-33 {
      width: 33% !important;
    }    
    .col-40 {
      width: 40% !important;
    }    
    .col-50 {
      width: 50% !important;
    }
    .col-60 {
      width: 60% !important;
    }
    .col-70 {
      width: 70% !important;
    }
    .col-80 {
      width: 80% !important;
    }
    .col-90 {
      width: 90% !important;
    }
    /* Estilo visual para las columnas */
    .row > div[class*="col"] {
    /*  background: #fff;*/
      text-align: center;
    /*  color: #000;*/
    /*  border: 1px solid #ddd;*/
     padding: 5px;
    /*   margin-bottom: 15px;*/
    }
    /* Responsividad: apilar columnas en pantallas pequeñas */
    @media (max-width: 767px) {
      .row > div[class*="col"] {
        width: 100%;
      }
    }