.container__details {
    width: 85%;
    max-width: 110rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;
    @media (width >=1280px) {
        display: grid;
        grid-template-columns: repeat(2, 48%);
        gap: 2%;
        justify-content: space-between;
    }
}

.service-detail {
    width: 85%;
    width: 100%;
    border-radius: 0.8rem;
    overflow: hidden;
    .service-detail__image {
        width: 100%;
        display: block;
        overflow: hidden;

        @media (width >=1280px) {
            height: 32rem;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
        }

        @media (width >=1280px) {
            height: 32rem;
        }
    }

    .service-detail__content {
        border-left: 0.1rem solid var(--lightBlue);
        border-right: 0.1rem solid var(--lightBlue);
        border-bottom: 0.1rem solid var(--lightBlue);
        border-radius: 0 0 0.8rem 0.8rem;
        padding: 3.2rem;
        margin-top: -0.4rem;
        background-color: var(--white);
        overflow: hidden;
        transition: all 0.5s ease-in-out;

        .pre-title {
            font-size: 1.4rem;
            color: var(--purple);
            margin-bottom: 0.8rem;
        }

        .title {
            font-size: 2.8rem;
            color: var(--darkGray);
            margin-bottom: 1.6rem;
        }

        .description {
            font-size: 1.4rem;
            color: var(--mediumGray);
            line-height: 150%;
        }

        .btn-action {
            display: inline-block;
            padding: 1.2rem 2.4rem;
            background-color: #ec0000;
            color: white;
            border-radius: 50rem;
            line-height: 100%;
            border: none;
            cursor: pointer;
            margin-top: 2rem;
            font-size: 1.5rem;
            font-family: var(--fontContent-Bold);
        }
    }
}

.container__buttons {
    display: flex;
    gap: 1rem;
    overflow-x: scroll;
    margin-bottom: 4rem;

    @media (width >=1280px) {
        flex-direction: column;
        overflow: auto;
        margin-top: 0;
    }
}

.btn-service {
    width: auto;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    color: var(--darkGray);
    padding: 1.2rem 3rem 1.2rem 2rem;
    word-wrap: break-word;
    border-radius: 0.8rem;
    border: 0.1rem solid var(--lightBlue);
    transition: all 0.5s ease-in-out;
    gap: 0.8rem;
    cursor: pointer;

    @media (width >=1280px) {
        padding: 2rem;
        width: 100%;
    }

    img {
        width: 3.2rem;
    }

    h3 {
        font-size: 2rem;
        margin-top: 0.5rem;
        color: var(--darkBlue);

        @media (width >=1280px) {
            margin-top: 0rem;
            margin-bottom: 0.4rem;
        }
    }

    p {
        display: none;

        @media (width >=1280px) {
            display: block;
            font-size: 1.4rem;
            line-height: 150%;
        }
    }
}

.btn-service:hover {
    background-color: var(--lightGray);
}

.btn-service.activo {
    background-color: #deedf2;
}

summary::after {
    content: "";
    width: 24px;
    height: 24px;
    background: url("../assets/images/icon-arrow-down.svg");
    background-size: cover;
    transition: 0.2s;
}

details[open]>summary::after {
    transform: rotate(180deg);
}

.service-detail, .questions__container{
    display: none;
}

.service-detail.activo {
    display: block;
}

.questions__container.activo{
    display: flex;
}

ul.detail__content-item{
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: 1rem;
    h3, h4{
        font-size: 1.5rem;
        margin-bottom: .4rem;
        color: var(--mediumGray);
    }
    p{
        padding-top: 0;
        font-size: 1.3rem;
        margin-bottom: .4rem;
    }
    li{
        font-size: 1.3rem;
        list-style: disc;
        margin-left: 2rem;
    }
}