/* =========================================
   SEÇÃO 6 — PROCESSO
========================================= */

.process-section {
    position: relative;

    overflow: hidden;

    /* padding: 120px 0; */

    background: #0f1b26;

    color: #ffffff;
}


/* =========================================
   EFEITOS DE FUNDO
========================================= */

.process-bg-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);
}


.process-bg-glow-1 {
    width: 500px;
    height: 500px;

    top: -250px;
    left: -200px;

    background: rgba(2, 190, 178, .10);
}


.process-bg-glow-2 {
    width: 450px;
    height: 450px;

    right: -200px;
    bottom: -250px;

    background: rgba(0, 134, 121, .12);
}


/* Grid muito sutil no fundo */

.process-grid {
    position: absolute;

    inset: 0;

    opacity: .035;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .4) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .4) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

    pointer-events: none;
}


/* =========================================
   CABEÇALHO
========================================= */

.process-eyebrow {
    color: #02beb2;
}


.process-title {
    color: #ffffff;
}


.process-description {
    color: rgba(255, 255, 255, .60);
}


/* =========================================
   TIMELINE
========================================= */

.process-timeline {
    position: relative;

    max-width: 1050px;

    margin: 90px auto 0;
}


/* Linha central */

.process-timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            #02beb2 8%,
            #02beb2 92%,
            transparent
        );

    box-shadow:
        0 0 15px rgba(2, 190, 178, .35);
}


/* =========================================
   ITEM
========================================= */

.process-item {
    position: relative;

    display: grid;

    grid-template-columns: 1fr 80px 1fr;

    align-items: center;

    min-height: 180px;
}


/* =========================================
   CONTEÚDO
========================================= */

.process-content {
    position: relative;

    max-width: 370px;

    padding: 20px 0;
}


.process-content-left {
    justify-self: end;

    padding-right: 50px;

    text-align: right;
}


.process-content-right {
    justify-self: start;

    padding-left: 50px;

    text-align: left;
}


/* Número pequeno */

.process-step-label {
    display: block;

    margin-bottom: 8px;

    color: #02beb2;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;
}


/* Título */

.process-content h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.2;

    font-weight: 700;
}


/* Descrição */

.process-content p {
    margin: 0;

    color: rgba(255, 255, 255, .58);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================
   MARCADOR CENTRAL
========================================= */

.process-marker {
    position: relative;

    z-index: 5;

    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: auto;

    border-radius: 50%;

    background: #0f1b26;

    border: 2px solid #02beb2;

    box-shadow:
        0 0 0 8px rgba(2, 190, 178, .06),
        0 0 30px rgba(2, 190, 178, .15);

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.process-marker span {
    color: #02beb2;

    font-size: 13px;
    font-weight: 800;
}


.process-item:hover .process-marker {
    background: #02beb2;

    transform: scale(1.08);

    box-shadow:
        0 0 0 10px rgba(2, 190, 178, .08),
        0 0 40px rgba(2, 190, 178, .30);
}


.process-item:hover .process-marker span {
    color: #0f1b26;
}


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

@media (max-width: 991.98px) {

    .process-section {
        padding: 90px 0;
    }

    .process-timeline {
        margin-top: 70px;
    }

}


@media (max-width: 767.98px) {

    .process-section {
        padding: 75px 0;
    }

    .process-timeline {
        margin-top: 60px;
    }

    /* Linha passa para a esquerda */

    .process-timeline::before {
        left: 31px;

        transform: none;
    }


    .process-item {
        display: grid;

        grid-template-columns: 64px 1fr;

        min-height: 170px;
    }


    .process-marker {
        grid-column: 1;
        grid-row: 1;

        width: 62px;
        height: 62px;
    }


    .process-content {
        grid-column: 2;
        grid-row: 1;

        justify-self: start;

        max-width: none;

        padding: 20px 0 20px 30px;

        text-align: left;
    }


    .process-content-left,
    .process-content-right {
        padding-left: 30px;
        padding-right: 0;
    }


    .process-content-left:empty,
    .process-content-right:empty {
        display: none;
    }


    .process-content h3 {
        font-size: 22px;
    }

}


@media (max-width: 575.98px) {

    .process-section {
        padding: 65px 0;
    }

    .process-timeline {
        margin-top: 45px;
    }

    .process-timeline::before {
        left: 26px;
    }

    .process-item {
        grid-template-columns: 52px 1fr;

        min-height: 155px;
    }

    .process-marker {
        width: 52px;
        height: 52px;
    }

    .process-content,
    .process-content-left,
    .process-content-right {
        padding-left: 25px;
    }

    .process-content h3 {
        font-size: 20px;
    }

    .process-content p {
        font-size: 13px;
    }

}