.process{

padding:160px 0;

}

.timeline{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

top:36px;

left:8%;

width:84%;

height:2px;

background:linear-gradient(90deg,#3B82F6,#7C3AED);

opacity:.2;

}

.step{

position:relative;

background:#12141B;

border:1px solid rgba(255,255,255,.06);

padding:40px;

border-radius:28px;

transition:.35s;

z-index:2;

}

.step:hover{

transform:translateY(-10px);

border-color:#7C3AED;

}

.step-number{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,#3B82F6,#7C3AED);

font-family:"General Sans";

font-size:24px;

margin-bottom:30px;

color:white;

}

.step h3{

margin-bottom:18px;

}

.step p{

color:#B8C0D0;

}

/*==========================================================
TABLET
==========================================================*/

@media (max-width:1200px){

    .timeline{

        grid-template-columns:repeat(2,1fr);

        gap:24px;

    }

    .timeline::before{

        display:none;

    }

}

/*==========================================================
TABLET PEQUEÑA
==========================================================*/

@media (max-width:992px){

    .process{

        padding:110px 0;

    }

    .timeline{

        grid-template-columns:1fr;

        gap:22px;

    }

}

/*==========================================================
MÓVIL
==========================================================*/

/*==========================================================
MÓVIL PREMIUM
==========================================================*/

@media (max-width:576px){

    .process{

        padding:80px 0;

    }

    .timeline{

        position:relative;

        display:flex;

        flex-direction:column;

        gap:28px;

        padding-left:34px;

    }

    /* Línea vertical */

    .timeline::before{

        display:block;

        content:"";

        position:absolute;

        top:30px;

        left:18px;

        width:2px;

        height:calc(100% - 60px);

        background:linear-gradient(
            180deg,
            #3B82F6,
            #7C3AED);

        opacity:.28;

    }

    .step{

        position:relative;

        padding:28px;

        padding-left:36px;

        border-radius:22px;

    }

    /* Punto del timeline */

    .step::before{

        content:"";

        position:absolute;

        left:-25px;

        top:38px;

        width:16px;

        height:16px;

        border-radius:50%;

        background:linear-gradient(
            135deg,
            #3B82F6,
            #7C3AED);

        border:4px solid #09090B;

        box-shadow:
        0 0 0 4px rgba(124,58,237,.18);

        z-index:5;

    }

    .step-number{

        width:56px;

        height:56px;

        margin-bottom:18px;

        font-size:20px;

    }

    .step h3{

        font-size:24px;

        margin-bottom:14px;

    }

    .step p{

        font-size:16px;

        line-height:1.75;

    }

}