/* ============================================================
   VENTACTIVE
   CONTACT
   ABOUT US
============================================================ */

.vcContactAbout,
.vcContactAbout *,
.vcContactAbout *::before,
.vcContactAbout *::after {
    box-sizing: border-box;
}


.vcContactAbout {
    position: relative;
    padding:
        clamp(80px, 8vw, 125px)
        clamp(18px, 4vw, 70px)
        clamp(95px, 9vw, 145px);
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #fafbfe 0%,
            #ffffff 100%
        );
}


.vcContactAbout::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    top: -330px;
    right: -250px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(99, 116, 255, .07),
            transparent 68%
        );
    pointer-events: none;
}


.vcContactAboutInner {
    position: relative;
    z-index: 2;
    width: min(1450px, 100%);
    margin: 0 auto;
}


/* ============================================================
   HEADER
============================================================ */

.vcContactAboutHeader {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: end;
    gap: 40px;
    margin-bottom:
        clamp(40px, 5vw, 65px);
}


.vcContactAboutHeader > div {
    min-width: 0;
    max-width: 900px;
}


.vcContactAboutHeader h2 {
    margin: 0;
    max-width: 900px;
    font-size:
        clamp(
            42px,
            5vw,
            74px
        );
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 500;
    color: #171b23;
}


.vcContactAboutHeader h2 strong {
    display: block;
    font-weight: 850;
}


/* ============================================================
   DATABASE CONTENT WRAPPER
============================================================ */

.vcContactAboutContent {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border:
        1px solid
        rgba(15, 23, 42, .065);
    border-radius: 30px;
    background: #ffffff;
    box-shadow:
        0 24px 75px
        rgba(15, 23, 42, .055);
}


.vcContactAboutContent::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: -240px;
    left: -180px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(99, 116, 255, .07),
            transparent 70%
        );
    pointer-events: none;
}


/* ============================================================
   ACTUAL DATABASE HTML
============================================================ */

.vcContactAboutContentInner {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    padding:
        clamp(32px, 5vw, 72px);
    color: #6f7783;
    font-family: "Inter", sans-serif;
    font-size:
        clamp(
            14px,
            1.15vw,
            17px
        );
    line-height: 1.8;
}


/* ============================================================
   RESET LEGACY CONTENT
============================================================ */

/*
   El campo nosotros.texto parece contener HTML antiguo
   generado por Word / Outlook.

   Estos estilos intentan evitar que ese HTML rompa
   el layout actual.
*/

.vcContactAboutContentInner table {
    max-width: 100%;
}


.vcContactAboutContentInner img {
    max-width: 100%;
    height: auto;
}


.vcContactAboutContentInner iframe,
.vcContactAboutContentInner video {
    max-width: 100%;
}


.vcContactAboutContentInner div,
.vcContactAboutContentInner section,
.vcContactAboutContentInner article {
    max-width: 100%;
}


.vcContactAboutContentInner * {
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* ============================================================
   PARAGRAPHS
============================================================ */

.vcContactAboutContentInner p {
    max-width: 900px;
    margin:
        0
        0
        1.35em;
    color: #6f7783;
    font-family: "Inter", sans-serif;
    font-size: inherit;
    line-height: 1.8;
}


.vcContactAboutContentInner p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   HEADINGS FROM DATABASE
============================================================ */

.vcContactAboutContentInner h1,
.vcContactAboutContentInner h2,
.vcContactAboutContentInner h3,
.vcContactAboutContentInner h4,
.vcContactAboutContentInner h5,
.vcContactAboutContentInner h6 {
    max-width: 950px;
    margin:
        1.4em
        0
        .55em;
    color: #171b23;
    font-family: "Inter", sans-serif;
    line-height: 1.08;
    letter-spacing: -.04em;
}


.vcContactAboutContentInner h1:first-child,
.vcContactAboutContentInner h2:first-child,
.vcContactAboutContentInner h3:first-child {
    margin-top: 0;
}


.vcContactAboutContentInner h1 {
    font-size:
        clamp(
            36px,
            4vw,
            58px
        );
}


.vcContactAboutContentInner h2 {
    font-size:
        clamp(
            31px,
            3.4vw,
            48px
        );
}


.vcContactAboutContentInner h3 {
    font-size:
        clamp(
            25px,
            2.6vw,
            37px
        );
}


.vcContactAboutContentInner h4 {
    font-size:
        clamp(
            20px,
            2vw,
            28px
        );
}


/* ============================================================
   STRONG / EMPHASIS
============================================================ */

.vcContactAboutContentInner strong,
.vcContactAboutContentInner b {
    color: #252b34;
    font-weight: 800;
}


.vcContactAboutContentInner em,
.vcContactAboutContentInner i {
    color: #626a76;
}


/* ============================================================
   LINKS
============================================================ */

.vcContactAboutContentInner a {
    color: #6374ff;
    text-decoration: none;
    border-bottom:
        1px solid
        rgba(99, 116, 255, .28);
    transition:
        color .2s ease,
        border-color .2s ease;
}


.vcContactAboutContentInner a:hover {
    color: #4859e8;
    border-color: #4859e8;
}


/* ============================================================
   LISTS
============================================================ */

.vcContactAboutContentInner ul,
.vcContactAboutContentInner ol {
    max-width: 900px;
    margin:
        1.3em
        0;
    padding-left: 1.4em;
    color: #6f7783;
}


.vcContactAboutContentInner li {
    margin-bottom: .65em;
    line-height: 1.7;
}


.vcContactAboutContentInner li::marker {
    color: #6374ff;
}


/* ============================================================
   BLOCKQUOTE
============================================================ */

.vcContactAboutContentInner blockquote {
    max-width: 900px;
    margin:
        30px
        0;
    padding:
        20px
        24px;
    border-left:
        3px solid
        #6374ff;
    border-radius:
        0
        15px
        15px
        0;
    background:
        rgba(99, 116, 255, .045);
    color: #5f6772;
}


.vcContactAboutContentInner blockquote p {
    margin: 0;
}


/* ============================================================
   IMAGES
============================================================ */

.vcContactAboutContentInner img {
    display: block;
    max-width: 100%;
    height: auto;
    margin:
        28px
        0;
    border-radius: 18px;
}


/* ============================================================
   TABLES
============================================================ */

.vcContactAboutContentInner table {
    width: 100%;
    max-width: 100%;
    margin:
        25px
        0;
    border-collapse: collapse;
    table-layout: auto;
}


.vcContactAboutContentInner td,
.vcContactAboutContentInner th {
    padding:
        12px
        14px;
    border:
        1px solid
        rgba(15, 23, 42, .08);
    vertical-align: top;
}


/* ============================================================
   HORIZONTAL RULE
============================================================ */

.vcContactAboutContentInner hr {
    width: 100%;
    height: 1px;
    margin:
        35px
        0;
    border: 0;
    background:
        rgba(15, 23, 42, .08);
}


/* ============================================================
   LEGACY FONT TAGS
============================================================ */

.vcContactAboutContentInner font {
    font-family: "Inter", sans-serif;
}


/* ============================================================
   RESPONSIVE TABLE CONTENT
============================================================ */

@media (max-width: 800px) {

    .vcContactAboutContentInner table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 650px) {

    .vcContactAbout {
        padding:
            68px
            16px
            90px;
    }


    .vcContactAboutHeader {
        grid-template-columns:
            1fr;
        gap: 20px;
        margin-bottom: 30px;
    }


    .vcContactAboutHeader h2 {
        font-size:
            clamp(
                39px,
                11vw,
                52px
            );
    }


    .vcContactAboutContent {
        border-radius: 23px;
    }


    .vcContactAboutContentInner {
        padding:
            28px
            22px;
        font-size: 14px;
        line-height: 1.72;
    }


    .vcContactAboutContentInner p {
        line-height: 1.72;
    }


    .vcContactAboutContentInner h1 {
        font-size: 34px;
    }


    .vcContactAboutContentInner h2 {
        font-size: 29px;
    }


    .vcContactAboutContentInner h3 {
        font-size: 24px;
    }


    .vcContactAboutContentInner blockquote {
        margin:
            24px
            0;
        padding:
            17px
            18px;
    }


    .vcContactAboutContentInner img {
        margin:
            22px
            0;
        border-radius: 14px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 430px) {

    .vcContactAbout {
        padding-left: 14px;
        padding-right: 14px;
    }


    .vcContactAboutContentInner {
        padding:
            24px
            18px;
    }

}