/* ===================================================
   HOME - ROADMAP ULTRA COMPACTO
=================================================== */

.roadmap-mini,
.snp-roadmap{
    width:100%;
    margin:24px 0;
    padding:18px 22px;
    border-radius:22px;
    background:
        radial-gradient(circle at 88% 16%,rgba(91,53,245,.28),transparent 36%),
        linear-gradient(135deg,#0f172a,#1e1b4b);
    color:#fff;
    overflow:hidden;
    box-shadow:0 10px 28px rgba(15,23,42,.06);
}

/* HEADER */

.roadmap-header,
.snp-roadmap-head{
    max-width:520px;
    margin-bottom:18px;
}

.roadmap-header span,
.snp-roadmap-head span{
    display:block;
    margin-bottom:6px;
    color:#7c6cff;
    font-size:9px !important;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
}

.roadmap-header h2,
.snp-roadmap-head h2{
    margin:0 0 6px;
    color:#fff;
    font-size:20px !important;
    line-height:1.18;
    letter-spacing:-.4px;
}

.roadmap-header p,
.snp-roadmap-head p{
    max-width:500px;
    color:#cbd5e1;
    font-size:12px !important;
    line-height:1.55;
}

/* FLOW */

.roadmap-flow{
    display:flex;
    align-items:center;
    gap:12px;
}

/* CARD */

.road-item,
.road-card{
    flex:1;
    min-height:64px;
    padding:10px 12px;
    border-radius:15px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    display:flex;
    align-items:center;
    gap:10px;
    transition:.25s ease;
}

.road-item:hover,
.road-card:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.12);
}

/* ICON */

.road-icon{
    width:34px;
    height:34px;
    border-radius:11px;
    background:rgba(255,255,255,.10);
    display:grid;
    place-items:center;
    flex-shrink:0;
}

.road-icon img{
    width:19px;
    height:19px;
    object-fit:contain;
}

/* TEXT */

.road-info strong,
.road-card strong{
    display:block;
    color:#fff;
    font-size:13px !important;
    line-height:1.2;
    font-weight:900;
}

.road-info small,
.road-card small{
    display:block;
    margin-top:3px;
    color:#cbd5e1;
    font-size:10px !important;
    line-height:1.25;
}

/* LINE */

.road-line{
    width:36px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,#6d28d9,#2563eb);
    flex-shrink:0;
    opacity:.9;
}

/* RESPONSIVO */

@media(max-width:1000px){
    .roadmap-flow{
        flex-direction:column;
        align-items:stretch;
    }

    .road-line{
        width:2px;
        height:18px;
        margin:0 auto;
    }

    .road-item,
    .road-card{
        width:100%;
    }
}

@media(max-width:700px){
    .roadmap-mini,
    .snp-roadmap{
        padding:16px;
    }

    .roadmap-header h2,
    .snp-roadmap-head h2{
        font-size:18px !important;
    }
}