.docttus-devices{
    position:relative;
    z-index:2;
    padding:96px 0 0;
    background:#1c1c1c;
}

.docttus-devices::before{
    content:"";
    position:absolute;
    left:-20px;
    top:64px;
    width:min(28vw, 360px);
    height:min(34vw, 430px);
    background:url("../fondo.webp") no-repeat left top / contain;
    opacity:.07;
    pointer-events:none;
    z-index:0;
}

[data-theme="light"] .docttus-devices{
    background:#f5f6f8;
}

[data-theme="light"] .docttus-devices::before{
    opacity:.06;
}

.docttus-devices__intro{
    max-width:680px;
    margin:0 auto 52px;
    text-align:center;
    position:relative;
    z-index:1;
}

.docttus-devices__title,
.docttus-faq__title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:0 0 1.4rem;
    font-size:2.2rem;
    font-weight:700;
}

.docttus-devices__dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 8px var(--cyan);
    flex:0 0 8px;
}

.docttus-devices__description{
    margin:0;
    color:var(--muted);
    font-size:1.08rem;
    line-height:1.75;
}

.docttus-devices__media{
    position:relative;
    max-width:900px;
    margin:0 auto -150px;
    padding:0 20px;
    z-index:1;
}

.docttus-devices__image{
    display:block;
    width:100%;
    height:auto;
    border-radius:8px;
    box-shadow:0 30px 60px rgba(0,0,0,.6);
}

.docttus-faq{
    position:relative;
    z-index:1;
    padding:250px 0 100px;
    background:var(--bg);
}

.docttus-faq__shell{
    max-width:820px;
    margin:0 auto;
}

.docttus-faq__list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.docttus-faq__item{
    border:1px solid transparent;
    border-radius:8px;
    overflow:hidden;
    background:var(--surface);
}

.docttus-faq__item.is-active{
    border-color:var(--cyan);
}

.docttus-faq__trigger{
    width:100%;
    padding:24px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border:none;
    background:transparent;
    color:var(--text);
    text-align:left;
    cursor:pointer;
}

.docttus-faq__question{
    font-size:1.08rem;
    font-weight:500;
}

.docttus-faq__icon{
    flex:0 0 auto;
    font-size:1.8rem;
    font-weight:300;
    line-height:1;
    transition:transform .25s ease, color .25s ease;
}

.docttus-faq__item.is-active .docttus-faq__icon{
    transform:rotate(45deg);
    color:var(--cyan);
}

.docttus-faq__content{
    max-height:0;
    overflow:hidden;
    transition:max-height .28s ease;
}

.docttus-faq__answer{
    padding:0 30px 24px;
    color:var(--muted);
    font-size:1rem;
    line-height:1.75;
}

@media (max-width: 900px){
    .docttus-devices{
        padding-top:84px;
    }

    .docttus-devices::before{
        left:-30px;
        top:92px;
        width:min(34vw, 260px);
        height:min(42vw, 320px);
    }

    .docttus-devices__media{
        margin-bottom:-110px;
    }

    .docttus-faq{
        padding-top:210px;
    }
}

@media (max-width: 768px){
    .docttus-devices__title,
    .docttus-faq__title{
        font-size:1.85rem;
    }

    .docttus-devices__description{
        font-size:1rem;
    }

    .docttus-devices::before{
        left:-34px;
        top:124px;
        width:160px;
        height:220px;
        opacity:.05;
    }

    .docttus-devices__media{
        margin-bottom:-78px;
        padding:0 16px;
    }

    .docttus-faq{
        padding-top:165px;
        padding-bottom:84px;
    }

    .docttus-faq__trigger{
        padding:20px 20px;
    }

    .docttus-faq__answer{
        padding:0 20px 20px;
    }
}