/* =========================================================
   MÓDULO DIVI: DOS COLUMNAS CEDER
========================================================= */

.ceder-columnas {
    display: grid;

    grid-template-columns:
        minmax(0, var(--ceder-ancho-izquierdo, 30%))
        minmax(0, 1fr);

    gap: var(--ceder-separacion, 30px);

    align-items: var(--ceder-alineacion, start);

    width: 100%;

    padding: 28px 32px;

    background: #ffffff;
}


/* =========================================================
   COLUMNAS
========================================================= */

.ceder-columnas__izquierda,
.ceder-columnas__derecha {
    min-width: 0;
}


/* =========================================================
   COLUMNA IZQUIERDA
========================================================= */

.ceder-columnas__izquierda {
    color: var(--ceder-color-izquierdo, #58b12d);
}


/* =========================================================
   COLUMNA DERECHA
========================================================= */

.ceder-columnas__derecha {
    color: var(--ceder-color-derecho, #555555);
}


/* =========================================================
   ELIMINAR MÁRGENES INNECESARIOS
========================================================= */

.ceder-columnas__izquierda > :first-child,
.ceder-columnas__derecha > :first-child {
    margin-top: 0;
}

.ceder-columnas__izquierda > :last-child,
.ceder-columnas__derecha > :last-child {
    margin-bottom: 0;
}


/* =========================================================
   PÁRRAFOS
========================================================= */

.ceder-columnas__izquierda p,
.ceder-columnas__derecha p {
    padding-bottom: 0;
}


/* =========================================================
   ESTILO RECOMENDADO PARA NÚMERO
========================================================= */

.ceder-columnas__izquierda strong {
    display: block;

    color: var(--ceder-color-izquierdo, #58b12d);

    font-size: 32px;

    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   TABLET
   Se mantiene la misma proporción
========================================================= */

@media (max-width: 980px) {

    .ceder-columnas {
        grid-template-columns:
            minmax(0, var(--ceder-ancho-izquierdo, 30%))
            minmax(0, 1fr);

        padding: 24px 26px;
    }

}


/* =========================================================
   CELULAR
   Las columnas no se apilan
========================================================= */

@media (max-width: 767px) {

    .ceder-columnas {
        grid-template-columns:
            minmax(0, var(--ceder-ancho-izquierdo, 30%))
            minmax(0, 1fr);

        gap: clamp(
            12px,
            4vw,
            var(--ceder-separacion, 30px)
        );

        padding: 20px;
    }

    .ceder-columnas__izquierda strong {
        font-size: 25px;
    }

    .ceder-columnas__derecha {
        font-size: 14px;
        line-height: 1.6;
    }

}