/*
 * VTRIC INSTITUCIONAL - IDENTIDAD VISUAL V4
 * Azul, verde y naranja.
 */

body .institutional-main {
    background: #f5f7f8;
}

.institutional-main .institutional-intro {
    position: relative;
    overflow: hidden;
    padding: 50px 0 42px;
    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(17, 132, 255, .12),
            transparent 25%
        ),
        radial-gradient(
            circle at 96% 80%,
            rgba(108, 194, 74, .10),
            transparent 22%
        ),
        #fff;
}

.institutional-main .institutional-intro::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(
        90deg,
        #1184ff 0 33.33%,
        #6cc24a 33.33% 66.66%,
        #f28c28 66.66% 100%
    );
}

.institutional-main .institutional-kicker {
    color: #1184ff;
}

.institutional-main .institutional-intro h1 {
    color: #202428;
}

.institutional-main .institutional-intro-text {
    color: #5d6267;
}

.institutional-main .institutional-opening {
    padding: 42px 0 54px;
    background: #fff;
}

.institutional-main .institutional-opening-image {
    border: 1px solid rgba(32, 36, 40, .08);
    box-shadow: 0 14px 38px rgba(32, 36, 40, .10);
}

.institutional-main .institutional-opening .section-shell::after {
    background: linear-gradient(
        90deg,
        #1184ff 0 33.33%,
        #6cc24a 33.33% 66.66%,
        #f28c28 66.66% 100%
    );
}

.institutional-main .institutional-band {
    position: relative;
    color: #202428;
    background:
        radial-gradient(
            circle at 93% 12%,
            rgba(17, 132, 255, .18),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(108, 194, 74, .16),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #eef7ff 0%,
            #f4fbf1 55%,
            #fff6eb 100%
        );
}

.institutional-main .institutional-band::before {
    width: 280px;
    height: 280px;
    right: -130px;
    top: -150px;
    background: rgba(242, 140, 40, .16);
}

.institutional-main .institutional-band::after {
    width: 100%;
    height: 6px;
    background: linear-gradient(
        90deg,
        #1184ff 0 33.33%,
        #6cc24a 33.33% 66.66%,
        #f28c28 66.66% 100%
    );
}

.institutional-main .institutional-band-content h2 {
    color: #202428;
}

.institutional-main
.institutional-band-content
p:last-child {
    color: #5d6267;
}

.institutional-main .institutional-band-image {
    border: 1px solid rgba(32, 36, 40, .08);
    box-shadow: 0 14px 38px rgba(32, 36, 40, .12);
}

.institutional-main .institutional-technology {
    background: #f5f7f8;
}

.institutional-main .institutional-tech-image {
    border: 1px solid rgba(32, 36, 40, .08);
    box-shadow: 0 12px 34px rgba(32, 36, 40, .09);
}

.institutional-main .institutional-tech-card {
    border: 1px solid rgba(32, 36, 40, .06);
    box-shadow: 0 8px 28px rgba(32, 36, 40, .06);
}

.institutional-main
.institutional-tech-card:nth-child(1) {
    background: linear-gradient(
        180deg,
        #eef7ff 0,
        #fff 42%
    );
}

.institutional-main
.institutional-tech-card:nth-child(2) {
    background: linear-gradient(
        180deg,
        #f1f9ee 0,
        #fff 42%
    );
}

.institutional-main
.institutional-tech-card:nth-child(3) {
    background: linear-gradient(
        180deg,
        #fff5e9 0,
        #fff 42%
    );
}

.institutional-main .institutional-final {
    background: #f5f7f8;
}

.institutional-main .institutional-final-box {
    background: linear-gradient(
        110deg,
        #1179d8 0%,
        #1184ff 42%,
        #4dab52 76%,
        #e98a25 112%
    );
    box-shadow: 0 14px 38px rgba(17, 132, 255, .18);
}

.institutional-main .institutional-final-box::after {
    background: rgba(255, 255, 255, .18);
}

.institutional-main .institutional-final-link {
    background: #fff;
    color: #202428;
}

@media (max-width: 640px) {
    .institutional-main .institutional-intro {
        padding: 34px 0 30px;
    }

    .institutional-main .institutional-opening {
        padding: 30px 0 40px;
    }

    .institutional-main .institutional-band {
        padding: 42px 0;
    }
}