#paquetes{
    padding-top: 1rem;
}

#paquetes li{
    transform: none!important;
}

body{
    background: 0;
}

#paquetes .container> ul{
    align-items: baseline;    
}

#paquetes p{
    margin-top: .4rem;
    font-size: .9rem;
}

#paquetes .container >ul> li{
    padding: 3rem 0
}

h4{
    cursor: pointer;
    font-weight: bold;
    font-style: 'roboto slab', sans-serif;
    font-size: 1.4rem;
    text-align: left;
}


#paquetes .container> ul >li:last-of-type{
    margin-bottom: 0;
    align-items: self-end;
}

#paquetes h4{
    font-size: 2rem!;
    font-weight: 900;
}

#paquetes li h4{
    width: 100%;
    padding: .5rem 2rem .5rem 4.3rem;
    position: relative;
}


#paquetes li.selected h4{
    background-color: rgb(255 253 182);
    padding: 1rem 2rem 1rem 4.3rem;
}


#paquetes .container > ul li >ul li p{
    padding: 0 2rem;
}

li h4::before{
    display: inline;
    content: url(/img/flecha-paquetes.svg);
    width: 30px;
    position: absolute;
    left: 2rem;
}
.digital li h4::before{
    content: url(/img/flecha-paquetes-blanca.svg);
}

.digital li.selected h4{
    background-color: rgb(82, 82, 82)!important;
}

.digital ul li{
    color: white;
}

#paquetes li .ul-paquete{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 400ms, opacity 500ms 500ms;
    text-align: left;
    font-size: 1.1rem;
}
#paquetes li.selected .ul-paquete{
    max-height: 1000px;
    opacity: 1;
    transition: max-height 500ms 500ms, opacity 500ms 500ms;
}

#paquetes .body-link{
    margin: 0 2rem;
}


h5{
    font-size: 1rem;
    margin-bottom: .2rem;
}
.ul-paquete{
    display: block;
    padding: 0 2rem;
    text-align: left;
}

li.selected .ul-paquete{
    padding-top: .5rem;;
}

.ul-paquete ul{
    gap: none;
    font-size: .9rem;
}

.bold{
    font-weight: bold;
}

@media screen and (min-width: 762px){
    body{
        background-image: url(../img/lapiz-vertical.png);
        background-attachment: fixed;
        background-size: 60px;
        background-repeat: no-repeat;
        background-position: 90% -20px;
    }

    #paquetes .container> ul >li:last-of-type{
        gap: 50px;
    }
}

@media screen and (min-width: 992px) {
    header{
        padding: 2rem 0;
    }

    #paquetes .container > ul{
        padding: 0 7rem;
    }

    #paquetes h2{
        font-size: 3.6rem;
        margin: auto;
    }

    #paquetes h3{
        font-size: 2.7rem;
    }

    #paquetes h4{
        font-size: 1.6rem;
    }

    #paquetes h5{
        font-size: 1.3rem;
    }

    #paquetes ul{
        font-size: 1.1rem;
    }
}

@media screen and (min-width: 1500px){
    .container{
        max-width: 1500px;
    }
}