/* =========================
   PROCESSO TÉCNICO
========================= */

.process{
    position:relative;
    padding:120px 0;
    background:#050608;
    overflow:hidden;
}

.process::before{
    content:'';
    position:absolute;
    top:0;
    left:0;

    width:55%;
    height:100%;

    background:
        url('../assets/images/04_calibration_panel.png')
        center center / cover no-repeat;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 70%,
            black 88%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            black 70%,
            black 88%,
            transparent 100%
        );

    pointer-events:none;
}

.process::after{
    content:'';
    position:absolute;
    top:0;
    left:0;

    width:55%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 70%,
            rgba(5,6,8,.5) 90%,
            #050608 100%
        );

    pointer-events:none;
}

.process-grid{
    display:grid;
    grid-template-columns:1fr;
    position:relative;
    z-index:2;
}

.process-gallery{
    display:none;
}

/* =========================
   TEXTO
========================= */

.process-copy{
    max-width:560px;
    margin-left: auto;
}

.process-copy h2{
    font-size:clamp(2.1rem,3vw,3rem);
    line-height:1.3;
    margin-bottom:24px;
}

.process-list{
    display:grid;
    gap:22px;
    margin-top:40px;
}

.process-list li{
    display:flex;
    gap:18px;
    align-items:flex-start;
    color:var(--light);
    font-weight:500;
    line-height:1.7;
}

.process-list li span{
    display:inline-flex;
    min-width:38px;
    height:38px;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;

    color:var(--white);
    font-weight:700;
}

/* =========================
   RESPONSIVO
========================= */

@media (max-width:992px){

    .process{
        padding:100px 0;
    }

    .process::before,
    .process::after{
        width:100%;
        opacity:.35;
    }

    .process-copy{
        margin-left:0;
    }
}

@media (max-width:768px){

    .process{
        padding:90px 0;
    }

    .process-copy h2{
        margin-bottom:32px;
    }
}