.filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:44px;
}

.filter-chip{
    padding:9px 18px;
    border-radius:999px;
    border:1px solid rgba(120,180,255,.22);
    color:#D8E4F7;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    background:rgba(15,40,90,.2);
    cursor:pointer;
    user-select:none;
}

.filter-chip.active{
    color:#020817;
    background:linear-gradient(90deg,#1ED9FF,#4F78FF);
    border-color:transparent;
}

.projects-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    margin-bottom:70px;
}

.project-card{
    border:1px solid rgba(120,180,255,.16);
    border-radius:18px;
    overflow:hidden;
    background:rgba(15,40,90,.2);
    transition:.35s;
}

.project-card:hover{
    transform:translateY(-6px);
    border-color:rgba(88,212,255,.4);
    background:rgba(15,40,90,.34);
}

.project-thumb{
    height:170px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 30% 20%,rgba(30,217,255,.18),transparent 60%),
        linear-gradient(150deg,#0A3578,#061C43);
    border-bottom:1px solid rgba(120,180,255,.14);
}

.project-thumb .thumb-icon{
    width:44px;
    height:44px;
    opacity:.9;
}

.project-body{
    padding:22px 22px 26px;
}

.project-tag{
    display:inline-block;
    color:#58D4FF;
    font-size:10px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    opacity:.85;
    margin-bottom:12px;
}

.project-body h3{
    font-size:16px;
    font-weight:700;
    letter-spacing:.3px;
    margin-bottom:10px;
    color:#F4F6FA;
}

.project-body p{
    font-size:13.5px;
    color:#C8D4EA;
    line-height:1.65;
    opacity:.86;
}

.notice-box{
    border:1px dashed rgba(120,180,255,.3);
    border-radius:16px;
    padding:28px 26px;
    text-align:center;
    color:#C8D4EA;
    font-size:13.5px;
    line-height:1.7;
    max-width:720px;
    margin:0 auto 90px;
    opacity:.9;
}

.notice-box strong{
    color:#F4F6FA;
}

.cta-band{
    text-align:center;
    padding:50px 24px 10px;
    border-top:1px solid rgba(120,180,255,.14);
}

.cta-band h2{
    font-size:clamp(20px,3vw,28px);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:16px;
}

.cta-band p{
    color:#C8D4EA;
    font-size:14px;
    max-width:520px;
    margin:0 auto 26px;
    opacity:.88;
}

.cta-btn{
    display:inline-block;
    padding:14px 34px;
    border-radius:999px;
    background:linear-gradient(90deg,#1ED9FF,#4F78FF);
    color:#020817;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    text-decoration:none;
    transition:.3s;
}

.cta-btn:hover{
    filter:brightness(1.08);
    transform:translateY(-2px);
}

/* ==========================
   MÓVIL (mismo breakpoint que common.css: 640px)
========================== */

@media (max-width:640px){

    .filter-row{
        gap:8px;
        margin-bottom:32px;
    }

    .filter-chip{
        padding:8px 14px;
        font-size:10.5px;
    }

    .projects-grid{
        grid-template-columns:1fr;
        gap:18px;
        margin-bottom:44px;
    }

    .notice-box{
        padding:22px 18px;
        margin:0 auto 50px;
    }

    .cta-band{
        padding:34px 16px 10px;
    }

}