.section-header {
    --title-grid-columns: 1fr 1fr;
    --title-grid-rows: repeat(2, 1fr);
    --title-grid-title-heigth: 348px;
    --title-grid-title-area: 1 / 1 / 3 / 2;
    --title-grid-email-area: 1 / 2 / 2 / 3;
    --title-grid-phone-area: 2 / 2 / 3 / 3;
    --title-grid-title-font-size: 45px;
    --title-grid-info-font-size: 38px;
    display: flex;
    flex-direction: row;
    max-width: 100%;
    overflow-x: auto;
}

    .section-header .lupa { /* imagen-factor: calc(901 / 571); */
        background-image: url(/image/landing/tsv/section-header.header.lupa.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: absolute;
        pointer-events: none;
        aspect-ratio: 1 / 1.577;
        width: var(--lupa-width);
        left: calc( var(--lupa-width) * -.2);
        top: calc( var(--lupa-width) * -.3);
    }

    .section-header .cliente-icon {
        --icon-width: calc(var(--lupa-width) * .8);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: absolute;
        pointer-events: none;
        border-radius: var(--icon-width);
        width: var(--icon-width);
        height: var(--icon-width);
        left: calc( var(--lupa-width) * -.1);
        top: calc( var(--lupa-width) * -.2);
    }


    .section-header .header {
        display: grid;
        grid-template-columns: var(--title-grid-columns);
        grid-template-rows: var(--title-grid-rows);
        grid-column-gap: 16px;
        width: 100%;
        height: var(--title-grid-title-heigth);
        margin-left: calc(var(--lupa-width) * .8);
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .section-header .header .titulo {
            grid-area: var(--title-grid-title-area);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-family: 'agoestoesan', sans-serif;
            font-size: var(--title-grid-title-font-size);
            color: #324360;
        }

        .section-header .header .email {
            grid-area: var(--title-grid-email-area);
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            font-family: 'Montserrat-SemiBold';
            font-size: var(--title-grid-info-font-size);
            padding: calc(var(--title-grid-info-font-size)*.1) 0;
        }

            .section-header .header .email .icon-email {
                background-image: url(/image/landing/tsv/section-header.header.email.svg);
            }

        .section-header .header .phone {
            grid-area: var(--title-grid-phone-area);
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            font-family: 'Montserrat-SemiBold';
            font-size: var(--title-grid-info-font-size);
            padding: var(--title-grid-info-font-size) 0;
        }

            .section-header .header .phone .icon-phone {
                background-image: url(/image/landing/tsv/section-header.header.phone.svg);
            }

        .section-header .header .icon {
            width: var(--title-grid-info-font-size);
            aspect-ratio: 1 / 1;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        .section-header .header .header-center {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }


/* @media de la lupa (funciona independiente del resto) */
@media (min-width: 360px) {
    .content {
        --lupa-width: calc(134px + ((100vw - 360px) * ((465 - 134) / (1286 - 360))));
    }
}

@media (min-width: 1286px) {
    .content {
        --lupa-width: calc(465px + ((100vw - 1286px) * ((534 - 465) / (1920 - 1286))));
    }
}

@media (min-width: 1920px) {
    .content {
        --lupa-width: calc(534px + ((100vw - 1920px) * ((570 - 534) / (3280 - 1920))));
    }
}

@media (min-width: 3280px) {
    .content {
        --lupa-width: 570px;
    }
}


/* modo mobile 360px */
@media (min-width: 0px) and (max-width: 480px)
{
    .section-header {
        --title-grid-columns: 1fr;
        --title-grid-rows: repeat(3, 1fr);
        --title-grid-title-area: 1 / 1 / 2 / 2;
        --title-grid-email-area: 2 / 1 / 3 / 2;
        --title-grid-phone-area: 3 / 1 / 4 / 2;
        --title-grid-title-heigth: 67px;
        --title-grid-title-font-size: 10px;
        --title-grid-info-font-size: 9px;
    }
        .section-header .header .email {
            align-items: center;
        }
        .section-header .header .phone {
            align-items: center;
        }

}

/* modo tablet 800px */
@media (min-width: 481px) and (max-width: 1000px) {
    .section-header {
        --title-grid-title-heigth: 160px;
        --title-grid-title-font-size: 19px;
        --title-grid-info-font-size: 16px;
    }
}

/* modo laptop 1280px */
@media (min-width: 1001px) and (max-width: 1500px) {
    .section-header {
        --title-grid-title-heigth: 221px;
        --title-grid-title-font-size: 30px;
        --title-grid-info-font-size: 25px;
    }
}

/* modo pc 1920px */
@media (min-width: 1501px) and (max-width: 2100px) {
    .section-header {
        --title-grid-title-heigth: 234px;
        --title-grid-title-font-size: 30px;
        --title-grid-info-font-size: 25px;
    }
}

/* modo 4k */
@media (min-width: 2101px) {
    .section-header {
        --title-grid-title-heigth: 348px;
        --title-grid-title-font-size: 45px;
        --title-grid-info-font-size: 38px;
    }
}


/* OTROS @MEDIAS
@media (min-width: 360px) {
    .section-header .header {
        min-height: 65px;
    }

        .section-header .header .titulo {
            grid-area: 1 / 1 / 2 / 3;
            font-size: 10px;
        }

        .section-header .header .email {
            grid-area: 2 / 1 / 3 / 2;
            justify-content: center;
            align-items: center;
        }

        .section-header .header .phone {
            grid-area: 2 / 2 / 3 / 3;
            justify-content: center;
            align-items: center;
            font-size: 10px;
        }

        .section-header .header .icon {
            width: 10px;
        }
}

@media (min-width: 1286px) {
    .section-header .header {
        min-height: 221px;
    }

        .section-header .header .titulo {
            grid-area: 1 / 1 / 3 / 2;
            font-size: 30px;
        }

        .section-header .header .email {
            grid-area: 1 / 2 / 2 / 3;
            justify-content: flex-start;
            align-items: flex-end;
        }

        .section-header .header .phone {
            grid-area: 2 / 2 / 3 / 3;
            justify-content: flex-start;
            align-items: flex-start;
            font-size: 10px;
        }

        .section-header .header .icon {
            width: 27px;
        }
}

@media (min-width: 1920px) {

    .section-header .header {
        min-height: 234px;
    }

        .section-header .header .titulo {
            font-size: 30px;
        }

        .section-header .header .icon {
            width: 27px;
        }

        .section-header .header .icon {
            width: 22px;
        }
}

@media (min-width: 3280px) {
    .section-header .header {
        min-height: 348px;
    }

        .section-header .header .titulo {
            font-size: 45px;
        }

        .section-header .header .icon {
            width: 65px;
        }
}

     */