.contenedor {
    width: 94%;
    max-width: 1120px;
    margin: 20px auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, auto);
    grid-template-areas:
        "header header header header"
        "operat operat operat operat"
        "projbco2 projbco2 projgcc projgcc"
        "widget-1 widget-1 widget-1 widget-1"
        "contenido contenido contenido contenido"
        "widget-2 widget-2 widget-2 widget-2"
        "widget-7 widget-7 widget-7 widget-7"
        "card1 card1 card1 card1"
        "hr1 hr1 hr1 hr1"
        "widget-8 widget-8 widget-8 widget-8"
        "widget-11 widget-11 widget-11 widget-11"
        "card2 card2 card2 card2"
        "hr2 hr2 hr2 hr2"
    ;
}

.contenedor .header,
.contenedor .operat,
.contenedor .widget-2,
.contenedor .widget-8 {
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    padding: 15px;
}

.contenedor .header {
    background: #12203E;
    color: var(--nav-verde-brand);
    grid-area: header;
}

.contenedor .operat,
.contenedor .widget-8 {
    background: #12203E;
    color: white;
}

.contenedor .projbco2,
.contenedor .widget-3,
.contenedor .widget-5 {
    background-color: white;
    color: #12203E;
    grid-area: projbco2;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: auto;
    width: 48%;
    justify-content: space-around;
    align-items: flex-start;
    padding: 15px;
}

.contenedor .projgcc,
.contenedor .widget-4,
.contenedor .widget-6 {
    background-color: white;
    color: #12203E;
    grid-area: projgcc;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: auto;
    width: 48%;
    justify-content: space-around;
    align-items: flex-end;
    padding: 15px;
}

.contenedor .projbco2 a,
.contenedor .projgcc a {
    color: #12203E;
    text-decoration: none;
}

.contenedor .projbco2 a:hover,
.contenedor .projgcc a:hover {
    color: var(--nav-azul-logo);
}

.contenedor .operat {
    grid-area: operat;
}

.contenedor .widget-1 {
    grid-area: widget-1;
}

.contenedor .widget-2 {
    grid-area: widget-2;
    margin-bottom: 20px;
}

.contenedor .hr1 {
    grid-area: hr1;
    width: 100%;
    margin-bottom: 10px;
}

.contenedor .hr2 {
    grid-area: hr2;
    width: 100%;
    margin-bottom: 10px;
}

.contenedor .widget-7 {
    grid-area: widget-7;
}

.contenedor .widget-8 {
    grid-area: widget-8;
    margin-bottom: 20px;
}

.contenedor .widget-11 {
    grid-area: widget-11;
}

.contenedor .widget-1,
.contenedor .widget-7,
.contenedor .widget-11 {
    background-color: #12203E;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 100%;
    height: auto;
}

.contenedor .widget-2 {
    background: #12203E;
    color: white;
}

.contenedor .card1,
.contenedor .card2 {
    background-color: white;
    color: #12203E;
    grid-area: card1;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
}

@media screen and (max-width:850px) {
    .contenedor {
        grid-template-areas:
            "header header header header"
            "operat operat operat operat"
            "projbco2 projbco2 projbco2 projbco2"
            "projgcc projgcc projgcc projgcc"
            "widget-1 widget-1 widget-1 widget-1"
            "contenido contenido contenido contenido"
            "widget-2 widget-2 widget-2 widget-2"
            "widget-7 widget-7 widget-7 widget-7"
            "card1 card1 card1 card1"
            "hr1 hr1 hr1 hr1"
            "widget-8 widget-8 widget-8 widget-8"
            "widget-11 widget-11 widget-11 widget-11"
            "card2 card2 card2 card2"
            "hr2 hr2 hr2 hr2"
        ;
    }

    .contenedor .operat,
    .contenedor .widget-2 {
        display: flex;
    }

    .contenedor .projbco2,
    .contenedor .projgcc,
    .contenedor .widget-3,
    .contenedor .widget-4,
    .contenedor .widget-5,
    .contenedor .widget-6 {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 98%;
        margin: 20px;
    }
}

.contenedor .header span {
    color: yellow;
}

.contenedor .header img {
    padding: 15px;
}

.contenedor .contenido {
    background-color: white;
    color: #12203E;
    grid-area: contenido;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 80%;
    padding: 15px;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 40px;
    max-width: 800px;
    height: auto;
}

.widget-1 .contenido p {
    text-align: justify;
    text-indent: 10px;
    margin: 20px;
    margin-bottom: 20px;
}

.contenedor .btn-div a {
    background-color: #12203E;
    color: white;
    padding: .3rem .6rem;
    font-size: 0.9rem;
    margin: 10px;
}

.contenedor .btn-div a:hover {
    background-color: var(--nav-azul-logo);
}

/* ---- tarjeta ---- */
.tarjeta {
    width: 100%;
    max-width: 520px;
    position: relative;
    color: #fff;
    transition: .3s ease all;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    cursor: pointer;
    z-index: 2;
    margin: auto;
    min-width: 440px;
}

.tarjeta.active {
    transform: rotateY(180deg);
}

.tarjeta>div {
    padding: 30px;
    border-radius: 15px;
    min-height: 315px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tarjeta .delantera {
    width: 100%;
    background: url(../../img/otros/es_tarjeta-front.jpg);
    background-size: cover;
    overflow: hidden;
}

.tarjeta .delantera:hover {
    box-shadow: 0 10px 10px 0 rgba(90, 116, 148, 0.5);
}

.delantera .chip {
    width: 100%;
    max-width: 50px;
    margin-bottom: 20px;
}

.delantera .grupo .label {
    font-size: 16px;
    color: burlywood;
    margin-bottom: 5px;
    text-align: left;
    margin-left: 0px;
}

.delantera .grupo .numero {
    text-align: left;
}

.delantera .grupo .numero, .delantera .grupo .nombre, .delantera .grupo .expiracion {
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    margin-left: 0px;
}

.delantera .flexbox {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.trasera {
    background: url(../../img/otros/es_tarjeta-back.jpg);
    background-size: cover;
    position: absolute;
    top: 0;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    overflow: hidden;
}

.trasera .barra-magnetica {
    height: 40px;
    background: #000;
    width: 100%;
    position: absolute;
    top: 30px;
    left: 0;
}

.trasera .datos {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
}

.trasera .datos p {
    margin-bottom: 5px;
}

.trasera .datos #firma {
    width: 70%;
}

.trasera .datos #firma .firma {
    height: 40px;
    background: repeating-linear-gradient(skyblue 0, skyblue 5px, orange 5px, orange 10px);
}

.trasera .datos #ccv {
    width: 20%;
}

.trasera .datos #ccv .ccv {
    background: #fff;
    height: 40px;
    color: #000;
    padding: 10px;
    text-align: center;
}

.trasera .leyenda {
    font-size: 14px;
    line-height: 24px;
}

.trasera .link-banco {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    text-align: left;
}

@media (min-width:768px) and (max-width:800px) {
    .delantera .grupo .label {
        font-size: 14px;
        margin-right: 5px;
    }

    .delantera .grupo .numero, .delantera .grupo .nombre, .delantera .grupo .expiracion {
        font-size: 18px;
    }
}

@media (min-width:500px) and (max-width:570px) {
    .delantera .grupo .label {
        font-size: 16px;
        margin-right: 5px;
    }

    .delantera .grupo .numero, .delantera .grupo .nombre, .delantera .grupo .expiracion {
        font-size: 18px;
    }
}
/* ---- hasta aqui tarjeta ---- */

.img-isla {
    width: 84%;
    margin: auto;
    min-width: 360px;
    margin-bottom: 30px;
}

.card1,
.card2 {
    width: 90%;
    margin: auto;
    height: auto;
    padding: 15px;
    margin-bottom: 30px;
}

.card1 .card-body a,
.card2 .card-body a {
    width: 200px;
    text-decoration: none;
    color: black;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 0px;
}

.card1 .card-body a:hover {
    color: #12203e;
    border: 1px solid rgba(0, 0, 0, .8);
}

.card1 a .title,
.card2 a .title {
    color: #12203e;
    font-size: large;
    font-weight: 550;
}