:root {
    --main-color: #70d4a4;
    --main-white: #ffffff;
    --body-bg: #c5cacc;
    --main-gray: #3f4f55;
    --ramp-1: #3dc8af;
    --ramp-2: #00ff2a;
    --ramp-3: #3f92fa;
    --ramp-4: #af00ff;
    --ramp-5: #ff2ffa;
    --ramp-6: #feee00;
    --ramp-7: #ed6521;

}

/* global */
body {
    margin: 0;
    padding: 0;
    background-color: var(--body-bg);
    font-family: "Open Sans", serif;
}

body,
html {
    position: relative;
    width: 100%;
}

.global-wrap {
    position: relative;
    width: 96%;
    height: 96%;
    margin-top: 40px;
    left: 2%;
    background-color: var(--main-white);
    box-shadow: 4px 0px 15px #00000061;
    padding: 40px 20px 20px 20px;
    border-radius: 24px;
}

.global-wrap.first-item {
    margin-top: 140px;
}

.global-wrap.last-item {
    margin-bottom: 140px;
}

/* global */

/* nav */
.navbar {
    background-color: var(--main-white);
    box-shadow: 4px 0px 15px #00000061;
}

.navbar .navbar-brand {
    background-image: url('../img/isologo_jalisco.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100px;
    height: 80px;
    margin: 10px 0 10px 10px;
}

a.nav-link {
    color: var(--main-gray);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    line-height: normal;
}

.navbar-nav {
    display: flex;
    align-items: center;
}

.navbar-expand-lg .navbar-nav .nav-item {
    margin: 0 5px 0 0;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding: 8px 20px;
    border-radius: 10px;
}

a.nav-link.active,
.nav-item:hover a.nav-link {
    background: var(--body-bg);
}

@media all and (max-width:991px) {
    .nav-item a.nav-link {
        margin-bottom: 10px;
    }
}

/* nav */

/* banner */
.img-wrap {
    position: relative;
}

.img-wrap img {
    position: relative;
    display: block;
    width: 100%;
}

.custom-main-links {
    display: flex;
    flex-direction: column;
}

.custom-main-links a img {
    -webkit-filter: drop-shadow(5px 5px 3px var(--body-bg));
    -moz-filter: drop-shadow(5px 5px 3px var(--body-bg));
    filter: drop-shadow(5px 5px 3px var(--body-bg));
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.custom-main-links a:hover img {
    -webkit-filter: drop-shadow(0px 0px 0px transparent);
    -moz-filter: drop-shadow(0px 0px 0px transparent);
    filter: drop-shadow(0px 0px 0px transparent);
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

@media all and (max-width: 991px) {
    .custom-main-links {
        flex-direction: row;
    }
}

@media all and (max-width: 767px) {
    .custom-main-links {
        flex-wrap: wrap;
    }

    .custom-main-links a {
        width: 50%;
    }
}

/* banner */

/* como */
.text-wrap {
    grid-column: span 5 / span 5;
    padding: 15px;
    background-color: var(--body-bg);
    border-radius: 15px;
}

.text-wrap-2 {
    grid-column: span 4 / span 4;
    padding: 15px;
    background-color: var(--body-bg);
    border-radius: 15px;
}

.text-wrap-3 {
    grid-column: span 3 / span 3;
    padding: 15px;
    background-color: var(--body-bg);
    border-radius: 15px;
}

.text-wrap-4 {
    grid-column: span 2 / span 2;
    padding: 15px;
    background-color: var(--body-bg);
    border-radius: 15px;
}

.text-wrap-5 {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
    padding: 15px;
    background-color: var(--body-bg);
    border-radius: 15px;
}

.text-wrap p,
.text-wrap-2 p,
.text-wrap-3 p,
.text-wrap-4 p,
.text-wrap-5 p {
    font-size: 18px;
}

.custom-wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
    gap: 8px;
}

.custom-number,
.custom-number-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-gray);
    border-radius: 15px;
    margin: 0;
    padding: 0;
}

.custom-number p,
.custom-number-2 p {
    color: var(--main-white);
    font-size: 4em;
    text-align: center;
    font-weight: 900;
    padding: 0;
    margin: 0;
}

.custom-number-2 {
    grid-column-start: 4;
}

.pay-here,
.pay-here-2 {
    grid-column-start: 6;
    background-image: linear-gradient(to right, var(--ramp-1), var(--ramp-2));
    border-radius: 15px;
    -webkit-box-shadow: 5px 5px 3px var(--body-bg);
    -moz-box-shadow: 5px 5px 3px var(--body-bg);
    box-shadow: 5px 5px 3px var(--body-bg);
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.pay-here:hover,
.pay-here-2:hover {
    -webkit-box-shadow: 0px 0px 0px transparent;
    -moz-box-shadow: 0px 0px 0px transparent;
    box-shadow: 0px 0px 0px transparent;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.pay-here img,
.pay-here-2 img {
    display: block;
    margin: 0 auto;
}

.single-pins {
    grid-column: span 6 / span 6;
    position: relative;
    background-color: var(--body-bg);
    border-radius: 15px;
}

.single-pins img {
    position: relative;
    display: block;
    width: 96%;
    margin: 0 auto;
    padding: 20px;
}

.custom-plates {
    grid-column-start: 5;
    background-color: var(--body-bg);
    border-radius: 15px;
}

.custom-plates img {
    position: relative;
    display: block;
    margin: 0 auto;
}

.custom-ready {
    position: relative;
    grid-column: span 2 / span 2;
    background-image: linear-gradient(to right, var(--ramp-3), var(--ramp-4));
    border-radius: 15px;
}

.custom-ready img {
    position: relative;
    display: block;
    width: 90%;
    margin: 0 auto;
}

.custom-ready-text {
    position: relative;
    grid-column: span 4 / span 4;
    grid-column-start: 3;
    /* background-image: linear-gradient(to right, var(--ramp-5), var(--ramp-4)); */
    border-radius: 15px;
}

.custom-ready-text img {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
}

@media all and (max-width: 991px) {
    .custom-number {
        grid-column: span 6 / span 6;
    }

    .text-wrap {
        grid-column: span 6 / span 6;
        grid-row-start: 2;
    }

    .text-wrap-2 {
        grid-column: span 5 / span 5;
        grid-row-start: 2;
    }

    .pay-here,
    .pay-here-2 {
        grid-column-start: 6;
        grid-row-start: 2;
    }

    .text-wrap-3 {
        grid-column: span 4 / span 4;
        grid-row-start: 2;
    }

    .custom-plates {
        grid-column-start: 5;
        grid-row-start: 2;
    }

    .custom-number-2 {
        grid-column: span 6 / span 6;
        grid-row-start: 3;
    }

    .text-wrap-4 {
        grid-column: span 6 / span 6;
        grid-row-start: 2;
    }

    .text-wrap-5 {
        grid-column: span 6 / span 6;
        grid-row-start: 4;
    }

    .custom-ready,
    .custom-ready-text {
        grid-column: span 6 / span 6;
    }

    .custom-ready {
        height: 300px;
    }

    .custom-ready img {
        width: auto;
        height: 100%;
    }
}

@media all and (max-width: 599px) {
    .custom-number {
        grid-column: span 6 / span 6;
    }

    .text-wrap-3 {
        grid-column: span 6 / span 6;
        grid-row-start: 2;
    }

    .custom-plates {
        grid-column: span 3 / span 3;
        grid-row-start: 3;
    }

    .pay-here-2 {
        grid-column: span 3 / span 3;
        grid-column-start: 4;
        grid-row-start: 3;
    }
}

/* como */

/* beneficios */
.banner {
    position: relative;
}

.banner img {
    position: relative;
    display: block;
    width: 100%;
}

.banner .desk,
.single-pins .desk {
    display: block;
}

.banner .mobile,
.single-pins .mobile {
    display: none;
}

@media all and (max-width:991px) {

    .banner .desk,
    .single-pins .desk {
        display: none;
    }

    .banner .mobile,
    .single-pins .mobile {
        display: block;
    }
}

/* beneficios */

/* beneficios 2 */
.blue-block {
    grid-column: span 2 / span 2;
    background-image: linear-gradient(to right, var(--ramp-3), var(--ramp-4));
    border-radius: 15px;
    padding: 15px;
}

.blue-block p {
    color: var(--main-white);
    font-weight: 600;
}

.gray-block {
    grid-column: span 4 / span 4;
    grid-column-start: 3;
    background-color: var(--body-bg);
    border-radius: 15px;
    padding: 15px;
}

.benefits-wrap {
    grid-column: span 6 / span 6;
    background-image: linear-gradient(to right, var(--ramp-5), var(--ramp-4));
    border-radius: 15px;
}


@media all and (max-width:767px) {
    .blue-block {
        grid-column: span 6 / span 6;
    }

    .gray-block {
        grid-column: span 6 / span 6;
        grid-row-start: 2;
    }
}

/* beneficios 2 */

/* placas */
.custom-wrap-2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
}

.green-img {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    background-image: linear-gradient(to right, var(--ramp-1), var(--ramp-2));
    border-radius: 15px;
    display: flex;
    align-items: flex-end;
}

.green-text {
    position: relative;
    background-image: linear-gradient(to right, var(--ramp-1), var(--ramp-2));
    border-radius: 15px;
    font-weight: 800;
    font-size: 20px;
    line-height: normal;
    color: var(--main-white);
    padding: 15px;
}

.green-text::before {
    position: absolute;
    content: '';
    width: 32px;
    height: 32px;
    bottom: 5px;
    right: 10px;
    background-image: url('../img/icon-check.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.item-001,
.item-002,
.item-003,
.item-004,
.item-005 {
    display: flex;
    align-items: center;
}

.item-001 {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
}

.item-002 {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
}

.item-003 {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 2;
}

.item-004 {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 2;
}

.item-005 {
    grid-column: span 4 / span 4;
    grid-column-start: 3;
    grid-row-start: 2;
}

.purple-img {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    background-image: linear-gradient(to right, var(--ramp-5), var(--ramp-4));
    border-radius: 15px;
    display: flex;
    align-items: flex-end;
}

.purple-text {
    position: relative;
    background-image: linear-gradient(to right, var(--ramp-5), var(--ramp-4));
    border-radius: 15px;
    font-weight: 800;
    font-size: 20px;
    line-height: normal;
    color: var(--main-white);
    padding: 15px;
}

.purple-text::before {
    position: absolute;
    content: '';
    width: 32px;
    height: 32px;
    bottom: 5px;
    right: 10px;
    background-image: url('../img/icon-cross.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.purple-text img {
    position: relative;
    display: block;
    width: 64%;
    margin: 0 auto;
}

@media all and (max-width:991px) {
    .custom-wrap-2 {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        gap: 8px;
    }

    .green-img,
    .purple-img {
        grid-column: span 6 / span 6;
        grid-row: span 2 / span 2;
    }

    .item-001 {
        grid-column: span 3 / span 3;
        grid-row-start: 3;
    }

    .item-002 {
        grid-column: span 3 / span 3;
        grid-column-start: 4;
        grid-row-start: 3;
    }

    .item-003 {
        grid-column: span 3 / span 3;
        grid-row-start: 4;
    }

    .item-004 {
        grid-column: span 3 / span 3;
        grid-column-start: 4;
        grid-row-start: 4;
    }

    .purple-text img {
        width: 90%;
    }

    .item-005 {
        grid-column: span 6 / span 6;
        grid-row-start: 4;
    }

    .green-text,
    .purple-text {
        font-size: 16px;
    }
}

/* placas */

/* placas 2 */
.custom-wrap-4 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
}

.box-green-img {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    background-image: linear-gradient(to right, var(--ramp-1), var(--ramp-2));
    border-radius: 15px;
    display: flex;
    align-items: flex-end;
}

.box-001,
.box-002,
.box-003,
.box-004,
.box-005,
.box-006,
.box-007,
.box-008,
.box-009 {
    display: flex;
    align-items: center;
}

.box-001 {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
}

.box-002 {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
}

.box-003 {
    grid-column: span 2 / span 2;
    grid-column-start: 7;
}

.box-004 {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 2;
}

.box-005 {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 2;
}

.box-006 {
    grid-column: span 2 / span 2;
    grid-column-start: 7;
    grid-row-start: 2;
}

.box-007 {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 3;
}

.box-008 {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 3;
}

.box-009 {
    grid-column: span 2 / span 2;
    grid-column-start: 7;
    grid-row-start: 3;
}

@media all and (max-width:991px) {
    .custom-wrap-4 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: auto;
        gap: 8px;
    }

    .box-green-img {
        grid-column: span 8 / span 8;
        grid-row: span 2 / span 2;
    }

    .box-001 {
        grid-column: span 4 / span 4;
        grid-row-start: 3;
    }

    .box-002 {
        grid-column: span 4 / span 4;
        grid-column-start: 5;
        grid-row-start: 3;
    }

    .box-003 {
        grid-column: span 4 / span 4;
        grid-row-start: 4;
    }

    .box-004 {
        grid-column: span 4 / span 4;
        grid-column-start: 5;
        grid-row-start: 4;
    }

    .box-005 {
        grid-column: span 4 / span 4;
        grid-row-start: 5;
    }

    .box-006 {
        grid-column: span 4 / span 4;
        grid-column-start: 5;
        grid-row-start: 5;
    }

    .box-007 {
        grid-column: span 4 / span 4;
        grid-row-start: 6;
    }

    .box-008 {
        grid-column: span 4 / span 4;
        grid-column-start: 5;
        grid-row-start: 6;
    }

    .box-009 {
        grid-column: span 8 / span 8;
        grid-row-start: 7;
    }

}

/* placas 2 */

/* placas 3 */
.custom-wrap-5 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
}

.placa-green-img {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    background-image: linear-gradient(to right, var(--ramp-1), var(--ramp-2));
    border-radius: 15px;
    display: flex;
    align-items: flex-end;
}

.placa-001,
.placa-002,
.placa-003,
.placa-004,
.placa-005,
.placa-006 {
    display: flex;
    align-items: center;
}

.placa-001 {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
}

.placa-002 {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
}

.placa-003 {
    grid-column: span 2 / span 2;
    grid-column-start: 7;
}

.placa-004 {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 2;
}

.placa-005 {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 2;
}

.placa-006 {
    grid-column: span 2 / span 2;
    grid-column-start: 7;
    grid-row-start: 2;
}

@media all and (max-width:991px) {
    .custom-wrap-5 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: auto;
        gap: 8px;
    }

    .placa-green-img {
        grid-column: span 8 / span 8;
        grid-row: span 1 / span 1;
    }

    .placa-001 {
        grid-column: span 4 / span 4;
        grid-row-start: 2;
    }

    .placa-002 {
        grid-column: span 4 / span 4;
        grid-column-start: 5;
        grid-row-start: 2;
    }

    .placa-003 {
        grid-column: span 4 / span 4;
        grid-row-start: 3;
    }

    .placa-004 {
        grid-column: span 4 / span 4;
        grid-column-start: 5;
        grid-row-start: 3;
    }

    .placa-005 {
        grid-column: span 4 / span 4;
        grid-row-start: 4;
    }

    .placa-006 {
        grid-column: span 4 / span 4;
        grid-column-start: 5;
        grid-row-start: 4;
    }

}

/* placas 3 */

/* faq */
.custom-wrap-3 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 8px;
}

.faq-title {
    grid-column: span 6 / span 6;
    background-image: linear-gradient(to right, var(--ramp-7), var(--ramp-6));
    border-radius: 15px;
    font-weight: 800;
    font-size: 32px;
    line-height: normal;
    color: var(--main-white);
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.faq-quest-1 {
    grid-column: span 3 / span 3;
    grid-row-start: 2;
    background-color: var(--body-bg);
    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.faq-quest-2 {
    grid-column: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 2;
    background-color: var(--main-gray);
    color: var(--main-white);
    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.faq-quest-3 {
    grid-column: span 3 / span 3;
    grid-row-start: 3;
    background-color: var(--body-bg);
    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.faq-quest-4 {
    grid-column: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 3;
    background-color: var(--main-gray);
    color: var(--main-white);
    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.faq-quest-4 a {
    color: var(--ramp-5);
}

.faq-quest-4 a:hover {
    color: var(--ramp-6);
}

.faq-quest-5 {
    grid-column: span 6 / span 6;
    grid-row-start: 4;
    background-color: var(--body-bg);
    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.custom-line {
    position: relative;
    display: block;
    width: 50%;
    height: 5px;
    background-color: var(--main-white);
    margin-bottom: 20px;
}

.faq-cta {
    position: relative;
    display: inline-block;
    text-decoration: none;
    background-color: var(--ramp-4);
    color: var(--main-white);
    font-weight: 500;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 20px;
    box-shadow: 5px 5px 3px #b36300;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.faq-cta:hover {
    background-color: var(--main-gray);
    box-shadow: 0px 0px 0px #b36300;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

@media all and (max-width:991px) {
    .custom-wrap-3 {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        gap: 8px;
    }

    .faq-title {
        grid-column: span 6 / span 6;
    }

    .faq-quest-1 {
        grid-column: span 6 / span 6;
        grid-row-start: 2;
    }

    .faq-quest-2 {
        grid-column: span 6 / span 6;
        grid-row-start: 3;
    }

    .faq-quest-3 {
        grid-column: span 6 / span 6;
        grid-row-start: 4;
    }

    .faq-quest-4 {
        grid-column: span 6 / span 6;
        grid-row-start: 5;
    }

    .faq-quest-5 {
        grid-column: span 6 / span 6;
        grid-row-start: 6;
    }
}

/* faq */

/* footer */
footer {
    background: var(--main-gray);
    padding: 50px 0;
}

footer .logo {
    position: relative;
}

footer .logo img {
    position: relative;
    display: block;
    width: 150px;
    margin: 0 auto;
    margin-bottom: 30px;
}

footer .logo ul {
    text-align: center;
}

footer .logo ul li {
    display: inline-block;
    padding: 0 10px;
}

footer .logo ul li a {
    font-size: 1.5em;
    color: var(--body-bg);
}

footer .logo ul li a:hover {
    color: var(--main-white);
}

footer .contacto h4 {
    font-weight: 900;
    color: var(--body-bg);
}

footer .contacto ul li {
    color: var(--body-bg);
    list-style-type: none;
}

footer .contacto ul li a {
    font-size: 18px;
    text-decoration: none;
    color: var(--body-bg);
}

footer .contacto ul li a:hover {
    color: var(--main-white);
}

footer .legal ul li {
    list-style-type: none;
}

footer .legal ul li a {
    color: var(--body-bg);
    text-decoration: none;
}

footer .legal ul li a:hover {
    color: var(--main-white);
    text-decoration: none;
}

footer .last {
    position: relative;
}

footer .last img {
    position: relative;
    display: block;
    width: 100px;
    margin-bottom: 30px;
}

footer .last p {
    color: var(--body-bg);
}

footer .logo,
footer .contacto,
footer .legal,
footer .last {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media all and (max-width: 991px) {
    footer .contacto h4 {
        text-align: center;
    }

    footer .contacto ul li {
        text-align: center;
    }

    footer .legal ul li {
        text-align: center;
    }

    footer .last img {
        margin: 0 auto 30px auto;
    }

    footer .last p {
        display: block;
        text-align: center;
    }
}

/* footer */