/* li {
        list-style: none;
    }
    
    .fa,
    .fas,
    .far {
        color: #008d3c;
        padding-right: 5px;
    }
    
    .unsl {
        background-color: #17743e;
        padding: 15px;
        border-bottom: solid 2px white;
    } */
    
    .contenedor__carreras {
        width: 100%;
        height: auto;
        margin-top: -25px;
        background-color: #fff;
        padding: 50px;
        border: 1px solid #aaaaaa;
        border-radius: 5px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        gap: 2rem;
        grid-template-areas: "card__plan card__incumbencias card__info__carrera";
    }
    
    .imagen__carrera {
        margin-bottom: 0;
    }
    
    .card__plan {
        grid-area: card__plan;
        width: 100%;
    }
    
    .listas_materias_plan {
        line-height: 1.1;
    }
    
    .listas_materias_plan p {
        padding-left: 20px;
    }
    
    .card__incumbencias {
        grid-area: card__incumbencias;
    }
    
    .card__info__carrera {
        grid-area: card__info__carrera;
        padding-left: 20px;
    }
    
    .imagen__carrera img {
        max-width: 100%;
        width: 100%;
        border-radius: 5px 5px 0 0;
    }
    
    .card-header {
        background-color: rgb(184, 51, 196);
        text-align: center;
        color: white;
        box-shadow: 2px 10px 3px -5px rgb(48, 47, 47);
    }
    
    .card__body__car {
        display: flex;
        height: 100vh;
    }
    
    .lista__plan {
        position: relative;
        left: 15px;
        display: block;
        line-height: 1;
    }
    
    .list-plan li {
        list-style: decimal;
        line-height: 1.8;
    }
    
    .card__director__car {
        font-size: 1.3rem;
    }
    
    .btn__plan__estudios {
        border: 3px solid rgba(100, 100, 100, .1);
        margin-bottom: 20px;
        padding: 0;
        width: 400px;
        border-radius: 8px;
        font-size: 1em;
        cursor: pointer;
        background-size: 300%;
        background-image: linear-gradient(to left, hsl(145, 100%, 28%), hsl(135, 83%, 14%), hsl(135, 35%, 48%));
        transition: 0.6s;
    }
    
    .btn__plan__estudios a:hover {
        color: #fff;
        font-size: 1.2em;
        transition: 0.5s;
    }
    
    .btn__plan__estudios a {
        color: #ffffff;
    }
    
    .btn__plan__estudios:hover {
        background-position: right;
    }
    
    .color-1,
    .color-3,
    .color-4 {
        color: #fff;
        text-align: center;
        font-size: 1.1rem;
        width: 100%;
        height: 30px;
        border-radius: 5px 5px 0 0;
    }
    
    .color-1 {
        background-color: rgb(248, 66, 0);
    }
    
    .color-3 {
        background-color: rgb(123, 60, 240);
    }
    
    .color-4 {
        background-color: rgb(212, 52, 119);
    }
    
    @media screen and (max-width:768px) {
        .contenedor__carreras {
            width: 100vw;
            margin-top: -10px;
            margin-left: 0;
            background-color: #fff;
            border: 1px solid #aaaaaa;
            border-radius: 5px;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, auto);
            gap: 2rem;
            grid-template-areas: "card__plan""card__incumbencias""card__info__carrera";
            font-size: 65%;
        }
        .card__plan,
        .card__incumbencias,
        .card__info__carrera {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
        .btn__plan__estudios {
            width: 75%;
        }
        .color-1,
        .color-3,
        .color-4 {
            height: auto;
        }
        .listas_materias_plan,
        .li-medio {
            margin-left: auto;
            margin-right: auto;
        }
    }
    
    .card-title-carrera li {
        font-size: 0.8em;
        padding-bottom: 8px;
    }
    
    .carreras-grado {
        width: 100%;
        background-color: #fff;
        padding: 1rem;
        display: grid;
        gap: .5rem;
        /* row-gap: 2.5rem; */
        grid-auto-rows: 15rem;
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
        /* margin: 3rem 0 4rem 1rem; */
        border-radius: 5px;
    }
    .carreras-pregrado {
        width: 100%;
        background-color: #fff;
        padding: 1rem;
        display: grid;
        gap: .5rem;
        /* row-gap: 2.5rem; */
        grid-auto-rows: 15rem;
        grid-template-columns: repeat(4, 1fr);
        /* margin: 3rem 0 4rem 1rem; */
        border-radius: 5px;
    }
    
    .target {
        position: relative;
        background: rgb(230, 230, 230);
        border: 1px solid #aaa8a8;
        border-radius: 5px;
        /* box-shadow: 0px 10px 10px -6px black; */
        text-align: center;
        /*text-shadow: 1px 1px 1px rgb(87, 124, 113);*/
        padding: 15px;
        display: block;
    }
    
    .target:nth-child(1) {
        background-image: url(../img/farma2.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .target:nth-child(2) {
        background-image: url(../img/alimento2.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .target:nth-child(3) {
        background-image: url(../img/genomica.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .target:nth-child(3) a,
    .target:nth-child(9) a,
    .target:nth-child(10) a {
        color: #fff;
    }
    
    .target:nth-child(3) a:hover {
        color: rgb(251, 255, 0);
    }
    
    .target:nth-child(4) {
        background-image: url(../img/bioqca3.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .target:nth-child(5) {
        background-image: url(../img/bitecnologia.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .target:nth-child(6) {
        background-image: url(../img/image10.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .target:nth-child(7) {
        background-image: url(../img/biologia1.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .target:nth-child(8) {
        background-image: url(../img/DSC3118_2.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .target:nth-child(9) {
        background-image: url(../img/prof_biol_2.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .target:nth-child(10) {
        background-image: url(../img/prof_qca_2.webp);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .target:nth-child(11) {
        background-image: url(../img/SeguridadLaboral.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .target img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
    }
    
    .target h3 {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 10%;
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.5;
        background-color: rgba(0, 0, 0, 0.294);
    }
    
    .target a {
        color: rgb(255, 255, 255);
    }
    
    .target a:hover {
        text-decoration: none;
        color: rgb(255, 0, 0);
    }
    
    .oferta h2 {
        font-size: 2em;
        text-shadow: 3px 1px 4px rgb(218, 218, 255);
        color: #000;
        font-weight: 300;
    }
    
    .oferta {
        background-color: white;
        display: flex;
        border: 1px solid #868686;
        border-radius: 5px;
        /* box-shadow: 0px 10px 10px -6px black; */
        margin: 1.2rem auto;
        text-align: center;
        align-items: center;
        justify-content: center;
    }
    
    @media (max-width:700px) {
        .carreras-grado {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        .oferta h2 {
            font-size: 1.3em;
            text-shadow: 1px 1px 4px rgb(218, 218, 255);
            text-align: center;
        }
    }