/* ==========================
   PROJECTS
========================== */

/* ==========================
   PROJECTS — BACKGROUND
========================== */

.projects {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 8rem 0;

    background-image:
        linear-gradient(
            to bottom,
            #050a1b 0%,
            rgba(5, 10, 27, 0.65) 12%,
            rgba(5, 10, 27, 0.25) 30%,
            rgba(5, 10, 27, 0.25) 65%,
            rgba(5, 10, 27, 0.75) 85%,
            #050a1b 100%
        ),
        url("../../assets/images/projects-bg.png");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #050a1b;
}

.projects > .container {
    position: relative;
    z-index: 2;
}
.projects-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.project-card{

    overflow:hidden;

    border-radius:28px;

    background: rgba(3, 9, 26, 0.88);

    border:1px solid var(--border-color);

    transition:all var(--transition-normal);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    cursor:pointer;

}

.project-card:hover{

    transform:translateY(-12px);

    border-color:rgba(80,170,255,.35);

    box-shadow:

        0 25px 60px rgba(0,0,0,.35),

        0 0 50px rgba(0,120,255,.18);

}

/* ==========================
   PROJECTS — PREVIEW IMAGES
========================== */

.project-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #050a1b;
}

.project-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s ease;
}

.project-card:hover .project-image img {
    transform: scale(1.05);
}

.project-content {
    padding: 1.6rem 1.8rem 2rem;
}

.project-category{

    display:inline-block;

    margin-bottom:.8rem;

    color:var(--color-primary);

    font-size:.85rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.project-content h3{

    font-size:1.6rem;

    margin-bottom:1rem;

    color:var(--text-primary);

}

.project-content p{

    color:var(--text-secondary);

    margin-bottom:2rem;

    line-height:1.8;

}

.project-link{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    font-weight:600;

    color:var(--color-primary);

    transition:var(--transition-fast);

}

.project-link:hover{

    transform:translateX(6px);

}

@media(max-width:992px){

    .projects-grid{

        grid-template-columns:1fr;

    }

}

.project-status {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(50, 150, 255, 0.35);
    border-radius: 999px;
    background: rgba(20, 80, 170, 0.15);
    color: #dcecff;
    font-size: 0.85rem;
    font-weight: 600;
}


/* ==========================================
   CNA — PROJECTS INTERACTIVE GLOW
========================================== */

.project-content {
    position: relative;

    background:
        radial-gradient(
            280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(34, 184, 255, 0.11),
            transparent 75%
        );
}

/* Mantener el texto por delante del efecto */
.project-content > * {
    position: relative;
    z-index: 1;
}

@media (hover: none) {
    .project-content {
        background: none;
    }
}

/* CTA para demos conceptuales */
.project-demo-link {display:inline-flex;align-items:center;gap:.4rem;margin-top:1.15rem;padding:.72rem 1.1rem;border-radius:999px;border:1px solid rgba(34,211,238,.5);background:rgba(0,145,255,.14);color:#d9f8ff;font-weight:700;text-decoration:none;transition:background .2s,border-color .2s;}
.project-demo-link:hover,.project-demo-link:focus-visible{background:rgba(0,145,255,.28);border-color:#3bdcff;}