:root{
    /* ==============
    Variables 2 columnas 601*/
    --espacioCol2_601: 20px; /* Espacio entre columnas*/
    --espacioTot2_601: calc(var(--espacioCol2_601) * 0);
    --anchoTotCol2_601: calc(100% - var(--espacioTot2_601));
    --anchoCol2_601: calc(var(--anchoTotCol2_601) / 1); /* Ancho de cada columna. De 1 columna */
    /* ==============
    Variables 2 columnas */
    --espacioCol2: 20px; /* Espacio entre columnas*/
    --espacioTot2: calc(var(--espacioCol2) * 0);
    --anchoTotCol2: calc(100% - var(--espacioTot2));
    --anchoCol2: calc(var(--anchoTotCol2) / 1); /* Ancho de cada columna. De 1 columna */
    /* ==============
    Variables 3 columnas */
    --espacioCol: 20px; /* Espacio entre columnas*/
    --espacioTot: calc(var(--espacioCol) * 0);
    --anchoTotCol: calc(100% - var(--espacioTot));
    --anchoCol: calc(var(--anchoTotCol) / 1); /* Ancho de cada columna. De 1 columna */
    /* ==============
    Variables 4 columnas */
    --espacioCol4: 20px; /* Espacio entre columnas*/
    --espacioTot4: calc(var(--espacioCol4) * 0);
    --anchoTotCol4: calc(100% - var(--espacioTot4));
    --anchoCol4: calc(var(--anchoTotCol4) / 1); /* Ancho de cada columna. De 1 columna */
    /* ==============
    Variables 3 columnas */
    --c3TotalC: 3; /* Cantidad de columnas*/
    --c3CantEspacios: calc(var(--c3TotalC) - 1); /* Cantidad de columnas*/
    --c3Espacio: 15px; /* Espacio entre columnas*/
    --c3EspacioTot: calc(var(--c3Espacio) * var(--c3CantEspacios));
    --c3EspacioRest: calc(var(--c3EspacioTot) / var(--c3TotalC));
    --c3AnchoC1: calc(20% - var(--c3EspacioRest)); /* Ancho de cada columna. De 1 columna */
    --c3AnchoC2: calc(55% - var(--c3EspacioRest)); /* Ancho de cada columna. De 1 columna */
    --c3AnchoC3: calc(25% - var(--c3EspacioRest)); /* Ancho de cada columna. De 1 columna */
}
/* ==============
    Para todas las columnas */
    .c2Box, .c3Box, .c4Box, .c2Dbox, .c3Box3c{ /* caja contenedora de las columnas */
        width:100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;        
    }
/* ==============
    2 columnas iguales*/
    .c2Col{ /* Ancho de cada columna */
        display: flex;
        flex-direction: column;
        width: var(--anchoCol2);
        margin-bottom: var(--spaceMarg);
    }
    .c2Col:last-child{
        margin-bottom: 0px;
    }
/* ==============
    2 columnas 601*/
    .c2Col_601{ /* Ancho de cada columna */
        width: var(--anchoCol2_601);
        margin-bottom: var(--spaceMarg);
    }
    .c2Col_601:last-child{
        margin-bottom: 0px;
    }
/* ==============
    3 columnas iguales*/
    .c3Col{ /* Ancho de cada columna */
        display: flex;
        flex-direction: column;
        width: var(--anchoCol);
        margin-bottom: var(--spaceMarg);
    }
    .c3Col:last-child{
        margin-bottom: 0px;
    }
/* ==============
    4 columnas */
    .c4Col{ /* Ancho de cada columna */
        display: flex;
        width: var(--anchoCol4);
        margin-bottom: var(--spaceMarg);
        flex-direction: column;
        justify-content:flex-start;
        flex-wrap: wrap;
    }
    .c4Col:last-child{
        margin-bottom: 0px;
    }
/* ==============
    Columna derecha*/
    .c2Col_D1, .c2Col_D2 { /* Ancho de cada columna */
        display: flex;
        flex-direction: column;       
    }
    .c2Col_D1{ /* Ancho de cada columna */
        width: 100%;
        margin-bottom: var(--spaceMarg);

    }
    .c2Col_D2{ /* Ancho de cada columna */
        width: 100%;
        margin-bottom: 0;

    }
/* ==============
    3 columnas */
    .c3C1, .c3C2, .c3C3{ /* Ancho de cada columna */
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        flex-wrap: wrap;
    }
    .c3C1{ /* Ancho de cada columna */
        width: 100%;
        margin-bottom: var(--spaceMarg);
    }
    .c3C2{ /* Ancho de cada columna */
        width: 100%;
        margin-bottom: var(--spaceMarg);
    }
    .c3C3{ /* Ancho de cada columna */
        width: 100%;
        margin-bottom: 0;
    }

/* 
1.- En móviles: 1 columna
2.- En tablets: 2 columnas
3.- En PC: 3 columnas pero, sólo hay 2 cajas. */
.c3BoxG1{
    display: grid;
    gap: 20px;
    width: 100%;
    grid-template-columns: 1fr;
    background-color: #884422;
}
.c3BoxG1_c1, .c3BoxG1_c2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

@media only screen and (min-width: 398px) {

}
@media only screen and (min-width: 480px) {
    :root{
        /* ==============
        Variables 2 columnas */
        --espacioTot2: calc(var(--espacioCol2) * 1);
        --anchoTotCol2: calc(100% - var(--espacioTot2));
        --anchoCol2: calc(var(--anchoTotCol2) / 2); /* Ancho de cada columna. De 1 columna */
        /* ==============
        Variables 4 columnas */
        --espacioTot4: calc(var(--espacioCol4) * 1);
        --anchoTotCol4: calc(100% - var(--espacioTot4));
        --anchoCol4: calc(var(--anchoTotCol4) / 2); /* Ancho de cada columna. De 4 columnas */
    }         
    .c2Col{
        margin-bottom: 0px;
    }
    .c4Col:nth-last-child(-n+2) {
        margin-bottom: 0;
    }
} 
@media only screen and (min-width: 608px) {
    
    .c3BoxG1 {
        grid-template-columns: repeat(2, 1fr);
    }
    .c3BoxG1_c1, .c3BoxG1_c2{
        grid-column: span 1; /* Cada una ocupa 1 columna */
    }

}
/* Ancho horizontal del celular Xiomi 11 Ancho:395px - 750px*/
@media only screen and (min-width: 748px) {
    :root{
         /* ==============
        Variables 2 columnas _601*/
        --espacioTot2_601: calc(var(--espacioCol2_601) * 1);
        --anchoTotCol2_601: calc(100% - var(--espacioTot2_601));
        --anchoCol2_601: calc(var(--anchoTotCol2_601) / 2); /* Ancho de cada columna. De 1 columna */
        /* ==============
        Variables 3 columnas */
        --espacioTot: calc(var(--espacioCol) * 2);
        --anchoTotCol: calc(100% - var(--espacioTot));
        --anchoCol: calc(var(--anchoTotCol) / 3); /* Ancho de cada columna. De 3 columnas */
    }
    .c3Col{
        margin-bottom: 0px;
    }
    /* ==============
    Columna derecha*/
    .c2Col_D1{ /* Ancho de cada columna */
        width: 65%;
        margin-bottom: 0;
    }
    .c2Col_D2{ /* Ancho de cada columna */
        width: 33%;
        margin-bottom: 0;
    }

}
@media only screen and (min-width: 1024px) {
    :root{
        /* ==============
        Variables 4 columnas */
        --espacioTot4: calc(var(--espacioCol4) * 3);
        --anchoTotCol4: calc(100% - var(--espacioTot4));
        --anchoCol4: calc(var(--anchoTotCol4) / 4); /* Ancho de cada columna. De 4 columnas */
    }
    .c4Col{
        margin-bottom: 0px;
    }
    /* ==============
    Columna derecha*/
    .c2Col_D1{ /* Ancho de cada columna */
        width: 70%;
    }
    .c2Col_D2{ /* Ancho de cada columna */
        width: 28%;
        background-color: blanchedalmond;
    }
    .c3BoxG1{
        grid-template-columns: repeat(3, 1fr);
    }
    .c3BoxG1_c1{
        grid-column: span 2; /* Ocupa 2 columnas */
    }
    .c3BoxG1_c2{
        grid-column: span 1; /* Ocupa 1 columna */
    }
}
@media only screen and (min-width: 1140px) {
    :root{
        /* ==============
        Variables 2 columnas */
        --espacioCol2: 30px; /* Espacio entre columnas*/
        --espacioCol2_601: 30px;
        /* ==============
        Variables 3 columnas */
        --espacioCol: 30px; /* Espacio entre columnas*/
        /* ==============
        Variables 4 columnas */
        --espacioCol4: 30px; /* Espacio entre columnas*/
    }
        /* ==============
    Columna derecha*/
    .c2Col_D1{ /* Ancho de cada columna */
        width: 75%;
    }
    .c2Col_D2{ /* Ancho de cada columna */
        width: 23%;
        background-color: rgb(69, 27, 219);
    }
}