@charset "utf-8";


/*=====================================
PROYECTOS
======================================*/


.projects-page{

    padding:20px 0;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fafc 100%
    );

    overflow:hidden;

}



.projects-page .container{

    display:flex;

    flex-direction:column;

    gap:0;

    height:auto;

}

.projects-toolbar{

    margin-bottom:0;

}

/*=====================================
HEADER
======================================*/


.projects-header{

    max-width:760px;

    margin:0 auto;

    text-align:center;

}



.projects-badge{

    display:inline-flex;

    padding:8px 20px;

    border-radius:50px;

    background:#f1f5f9;

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    margin-bottom:15px;

}



.projects-title{

    margin:0;

    color:#111827;

    font-size:clamp(2.1rem,4vw,3.4rem);

    line-height:1.15;

    font-weight:800;

}



.projects-description{

    margin:18px auto 0;

    max-width:620px;

    color:#64748b;

    line-height:1.7;

}





/*=====================================
FILTROS
======================================*/


.projects-toolbar{


    padding:14px;


    background:#FFF;


    border-radius:18px;


    border:1px solid #e5e7eb;


    box-shadow:
    0 12px 30px rgba(15,23,42,.05);


}




.toolbar-search{


    height:55px;


    display:flex;


    align-items:center;


    gap:10px;


    padding:0 14px;


    background:#f8fafc;


    border:1px solid #e2e8f0;


    border-radius:14px;


}



.toolbar-search i{

    color:#94a3b8;

}



.toolbar-search input{


    flex:1;

    border:0;

    outline:none;

    background:none;

    font-size:1rem;

}




/*=====================================
FILTROS GRID
======================================*/


.toolbar-filters{


    display:grid;


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


    gap:10px;


    margin-top:14px;


}





.filter-dropdown{

    position:relative;

}





.filter-label{


    display:block;


    margin-bottom:7px;


    color:#64748b;


    font-size:.82rem;


    font-weight:700;


}





.filter-button{


    width:100%;


    height:50px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:0 15px;


    background:#ffffff;


    border:1px solid #e2e8f0;


    border-radius:13px;


    cursor:pointer;


    transition:.3s;


}





.filter-button:hover{


    border-color:var(--primary);


}





.filter-text{


    color:#111827;

    font-weight:600;

}





.filter-menu{


    display:none;


    position:absolute;


    top:calc(100% + 8px);


    left:0;


    width:100%;


    margin:0;


    padding:8px 0;


    list-style:none;


    background:#fff;


    border-radius:15px;


    border:1px solid #e5e7eb;


    box-shadow:
    0 15px 35px rgba(0,0,0,.12);


    z-index:1000;


}





.filter-menu li{


    padding:12px 15px;


    cursor:pointer;


    color:#374151;


}



.filter-menu li:hover{


    background:#f8fafc;


}




/*=====================================
BOTON LIMPIAR
======================================*/


.toolbar-reset{


    height:50px;


    border-radius:13px;


    border:0;


    background:#111827;


    color:#fff;


    font-weight:700;


    cursor:pointer;


    transition:.3s;


}



.toolbar-reset:hover{


    background:#000;


}





/*=====================================
GRID
======================================*/

.projects-grid{

    background:#FFF;

    display:grid;

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

    gap:60px;

  
    height:auto;

    margin-top:50px;

}


#projectsGrid{

    padding:0 !important;

    margin:14px !important;

    height:auto !important;

    min-height:0 !important;

}


/*=====================================
CARD
======================================*/


.project-card{


    background:#ffffff;


    border-radius:18px;


    overflow:hidden;


    border:1px solid #e5e7eb;


    display:flex;


    flex-direction:column;


    transition:.3s;


}





.project-card:hover{


    transform:translateY(-5px);


    box-shadow:
    0 25px 50px rgba(0,0,0,.10);


}





/*=====================================
IMAGEN
======================================*/


.project-image{


    height:220px;


    overflow:hidden;


    background:#f1f5f9;


}




.project-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s;


}



.project-card:hover img{


    transform:scale(1.05);


}





/*=====================================
CONTENIDO
======================================*/


.project-info{


    padding:10px;


    display:flex;


    flex-direction:column;


    gap:12px;




}




.project-title{


    margin:0;


    color:#111827;


    font-size:1.25rem;


    font-weight:800;


}



.project-status{

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

    padding:4px 10px;

    border-radius:30px;

    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;

}

.project-status.sold-out{

    background:#ffe5e5;
    color:#d32f2f;
    border:1px solid #f5b5b5;

}

.project-description{


    margin:0;


    color:#64748b;


    line-height:1.5;


    font-size:.95rem;


    display:-webkit-box;


    -webkit-line-clamp:3;


    -webkit-box-orient:vertical;


    overflow:hidden;


}




/*=====================================
PRECIO
======================================*/


.project-price-box{


    padding:12px 15px;


    border-radius:14px;


    background:#f8fafc;


}



.project-price-box span{


    display:block;


    color:#94a3b8;


    font-size:.8rem;


}



.project-price-box strong{


    color:#111827;


    font-size:1.25rem;


}




/*=====================================
BOTON VER PROYECTO
======================================*/


.project-button{


    height:46px;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:10px;


    margin-top:5px;


    border-radius:13px;


    background:#000;


    color:#fff;


    text-decoration:none;


    font-weight:700;


    transition:.3s;


}




.project-button:hover{


    background:#222;


    transform:translateY(-2px);


}





/*=====================================
ESTADO RESULTADOS
======================================*/


.projects-status{


    padding:5px 0;


}



.projects-status p{


    margin:0;


    color:#64748b;


}




/*=====================================
PAGINACION
======================================*/


.projects-pagination{


    display:flex;


    justify-content:center;


    gap:4px;


    margin-top:2px;


}




.projects-pagination button{


    width:40px;


    height:40px;


    border-radius:50%;


    border:1px solid #e5e7eb;


    background:#fff;


    cursor:pointer;


    font-weight:700;


}




.projects-pagination button.active{


    background:#000;


    color:#fff;


}





/*=====================================
RESPONSIVE
======================================*/


@media(max-width:1100px){


.projects-grid{


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


}


}





@media(max-width:900px){


.toolbar-filters{


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


}



}





@media(max-width:700px){



.projects-page{


    padding:20px 0;


}



.projects-grid{


    grid-template-columns:1fr;


}



.toolbar-filters{


    grid-template-columns:1fr;


}



.projects-toolbar{


    padding:24px;


}

.projects-title{


    font-size:2rem;


}



.project-image{


    height:200px;


}



}