#cko-titulo {
    /* width: 650->350px; */
    width: clamp(21.875rem, 42.3177vw, 40.625rem);
    /* height: 100px; */
    margin: 20px 0px 20px 50px;
}

    #cko-titulo p {
        font-variant: small-caps;
    }

    #cko-data-title,
    #cko-data-aditionals,
    #cko-costs-title {
        width: 100%;
        /* height: 100px; */
        /* margin: 10px 0px 10px 20px; */
    }

    #cko-titulo p {
        font-family: var(--font-card-title);
        font-size: 18px;
        line-height: 20px;
        color: var(--text-card-descr1);
        font-weight: bold;
        text-align: left;
        font-variant: small-caps;
    }

    #cko-data-title p,
    #cko-data-aditionals p,
    #cko-costs-title p {
        font-family: var(--font-card-title);
        font-weight: 400;
        font-weight: bold;
        font-style: normal;
        color: var(--text-card-title1);
        font-size: 14px;
        line-height: 16px;
        text-shadow: var(--text-card-title1-shadow);

        
    }

.cko-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100vw;
    
    height: auto;
    height: fit-content;
    padding: 0px 0px 0px 0px;
    justify-content: center;

}

    .cko-container-zones {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: fit-content;
        column-gap: 20px;
        justify-content: space-around;
    }

    .cko-zone-A,
    .cko-zone-B {
        display: flex;
        flex-direction: column;
        width: 650px;
        /* width: 650->350px; */
        width: clamp(21.875rem, 42.3177vw, 40.625rem);
        /* height: fit-content; */
        /* padding-bottom: 30->10px; */
        padding-bottom: clamp(0.625rem, 1.9531vw, 1.875rem);
        /* margin-bottom: 50->20px; */
        margin-bottom: clamp(1.25rem, 3.2552vw, 3.125rem);
        border: 1px;
        border-style: dotted;
        /* border-style: none; */
        border-color: black;
        border-radius: 7px;
    }

    .cko-zone-A {
        height: fit-content;
        background-color: color-mix(in srgb, var(--background4), transparent 40%);
    }

    .cko-zone-B {
        height: auto;
        background-color: color-mix(in srgb, var(--background4), transparent 40%);
        
    }

        .cko-zone-A-1,
        .cko-zone-B-1,
        .cko-zone-B-2 {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin: 0px 0px 0px 0px;
            padding: 10px 20px 10px 20px;
        }

            #cko-data-data-grid {
                display: grid;
                grid-template-columns: 30px 170px 200px 100px;
                grid-template-columns: clamp(0.3125rem, 1.9531vw, 1.875rem) clamp(6.26rem, 13.0208vw, 12.5rem) clamp(6.26rem, 13.0208vw, 12.5rem) clamp(3.75rem, 6.5104vw, 6.25rem);
                grid-template-rows: repeat(20, auto);
            }

            .titulo p {
                font-family: var(--font-card-title);
                font-weight: 400;
                font-weight: bold;
                font-style: normal;
                color: var(--text-card-title1);
                font-size: 20px;
                line-height: 22px;
                text-shadow: var(--text-card-title1-shadow);
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .subtitulo p {
                font-family: var(--font-survey-field-content);
                font-size: 13px;
                line-height: 35px;
                font-weight: bold;
                font-variant: small-caps;
                text-decoration: underline;
                vertical-align: bottom;
            }
            .glosa p,
            .dato p {
                font-family: var(--font-survey-field-content);
                font-size: 14px;
                line-height: 20px;
                color: var(--text-card-descr1);
            }
            .dato p {
                font-weight: 700;
            }

            .precio,
            .simbolo {
                display: flex;
                justify-content: right;
                align-items: end;
            }

            #compra{
                grid-column-start: 1;
                grid-column-end: -1;
                grid-row-start: 1;
                grid-row-end: 2;
            }

            #numpedido{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 2;
                grid-row-end: 3;
            }
            #numpedido-dato{
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 2;
                grid-row-end: 3;
            }

                #numpedido-dato p {
                    font-family: var(--font-card-descr);
                    color: red;
                    font-weight: bold;
                    font-size: 20px;
                }

            #comprador {
                grid-column-start: 1;
                grid-column-end: -1;
                grid-row-start: 3;
                grid-row-end: 4;
            }

            #nombrecompra{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 4;
                grid-row-end: 5;
            }
            #nombrecompra-dato{
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 4;
                grid-row-end: 5;
            }

            #rut{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 5;
                grid-row-end: 6;
            }
            #rut-dato{
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 5;
                grid-row-end: 6;
            }

            #correo{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 6;
                grid-row-end: 7;
            }
            #correo-dato{
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 6;
                grid-row-end: 7;
            }

            #telefonocompra{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 7;
                grid-row-end: 8;
            }
            #telefonocompra-dato{
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 7;
                grid-row-end: 8;
            }

            #direccioncompra{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 8;
                grid-row-end: 9;
            }
            #direccioncompra-dato{
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 8;
                grid-row-end: 9;
            }

            #facturacion {
                grid-column-start: 1;
                grid-column-end: -1;
                grid-row-start: 9;
                grid-row-end: 10;
            }

            #rzfactura {
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 10;
                grid-row-end: 11;
            }
            #rzfactura-dato {
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 10;
                grid-row-end: 11;
            }

            #rutfactura {
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 11;
                grid-row-end: 12;
            }
            #rutfactura-dato {
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 11;
                grid-row-end: 12;
            }

            #domcomercial {
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 12;
                grid-row-end: 13;
            }
            #domcomercial-dato {
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 12;
                grid-row-end: 13;
            }

            #receptor {
                grid-column-start: 1;
                grid-column-end: -1;
                grid-row-start: 13;
                grid-row-end: 14;
            }

            #nombrerecibe{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 14;
                grid-row-end: 15;
            }
            #nombrerecibe-dato{
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 14;
                grid-row-end: 15;
            }

            #direccionrecibe{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 15;
                grid-row-end: 16;
            }
            #direccionrecibe-dato{
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 15;
                grid-row-end: 16;
            }

            #telefonorecibe{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 16;
                grid-row-end: 17;
            }
            #telefonorecibe-dato{
                grid-column-start: 3;
                grid-column-end: -1;
                grid-row-start: 16;
                grid-row-end: 17;
            }

            #adicionales {
                grid-column-start: 1;
                grid-column-end: -1;
                grid-row-start: 17;
                grid-row-end: 18;
            }

            #infoadicionales {
                grid-column-start: 2;
                grid-column-end: -1;
                grid-row-start: 18;
                grid-row-end: 19;
            }


    /* ####################################################################################### */

            #cko-data-costs-grid {
                display: grid;
                grid-template-columns: 30px 200px 10px 80px;
                grid-template-columns: clamp(0.3125rem, 1.9531vw, 1.875rem) clamp(6.26rem, 13.0208vw, 12.5rem) 10px 80px;
                grid-template-rows: repeat(5, auto);
            }

            #costos{
                grid-column-start: 1;
                grid-column-end: -1;
                grid-row-start: 1;
                grid-row-end: 2;
            }

            #costoproductos{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 2;
                grid-row-end: 3;
            }

            #costoproductos-simbolo{
                grid-column-start: 3;
                grid-column-end: 4;
                grid-row-start: 2;
                grid-row-end: 3;
            }

            #costoproductos-dato{
                grid-column-start: 4;
                grid-column-end: -1;
                grid-row-start: 2;
                grid-row-end: 3;
            }

            #costoflete{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 3;
                grid-row-end: 4;
            }

            #costoflete-simbolo{
                grid-column-start: 3;
                grid-column-end: 4;
                grid-row-start: 3;
                grid-row-end: 4;
            }

            #costoflete-dato{
                grid-column-start: 4;
                grid-column-end: -1;
                grid-row-start: 3;
                grid-row-end: 4;
            }

            #costototal{
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 4;
                grid-row-end: 5;
            }

            #costototal-simbolo{
                grid-column-start: 3;
                grid-column-end: 4;
                grid-row-start: 4;
                grid-row-end: 5;
            }

            #costototal-dato{
                grid-column-start: 4;
                grid-column-end: -1;
                grid-row-start: 4;
                grid-row-end: 5;
            }

    /* ####################################################################################### */

            .cko-zone-B-2-1 {
                display: flex;
                flex-direction: column;
                width: 100%;
                margin: 0px 0px 0px 0px;
            }

                #cko-instructions {
                    display: flex;
                    flex-direction: column;
                    width: auto;
                    /* margin: 30->20px 30->10px 0px 30->10px; */
                    margin: clamp(1.25rem, 1.9531vw, 1.875rem) clamp(0.625rem, 1.9531vw, 1.875rem) clamp(1.25rem, 1.9531vw, 1.875rem) clamp(0.625rem, 1.9531vw, 1.875rem);
                }

                    #cko-instructions p {
                        display: inline-block;
                        font-family: var(--font-survey-field-content);
                        font-size: 14px;
                        color: var(--text-card-descr1);
                        line-height: 18px;
                        margin-bottom: 10px;
                    }

            .cko-zone-B-2-2 {
                display: flex;
                flex-direction: row;
                width: 100%;
                margin: 0px 0px 0px 0px;
            }

                .survey_form_03 {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    width: 100%;
                    justify-content: space-around;
                }