@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;


}

.property-location {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    margin-top: 10px;
    border: 1px solid transparent;
}

.property-location-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.property-location-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.property-location-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: .65;
    letter-spacing: .5px;
}

.property-location-content strong {
    font-size: 14px;
    font-weight: 700;
}


/* =========================
   15 COLORES
========================= */

.location-color-0 {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
}

.location-color-1 {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.location-color-2 {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.location-color-3 {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.location-color-4 {
    background: #f5f3ff;
    color: #6d28d9;
    border-color: #ddd6fe;
}

.location-color-5 {
    background: #fdf2f8;
    color: #be185d;
    border-color: #fbcfe8;
}

.location-color-6 {
    background: #ecfeff;
    color: #0e7490;
    border-color: #a5f3fc;
}

.location-color-7 {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.location-color-8 {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.location-color-9 {
    background: #f0f9ff;
    color: #0369a1;
    border-color: #bae6fd;
}

.location-color-10 {
    background: #faf5ff;
    color: #7e22ce;
    border-color: #e9d5ff;
}

.location-color-11 {
    background: #fefce8;
    color: #a16207;
    border-color: #fef08a;
}

.location-color-12 {
    background: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}

.location-color-13 {
    background: #fdf4ff;
    color: #a21caf;
    border-color: #f5d0fe;
}

.location-color-14 {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

/*=====================================
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;


}



}