/* =====================================================
   PAGINA DE VENTA
===================================================== */

#ventas{

    max-width:1400px;
    margin:50px auto;

}

.page-header{

    text-align:center;
    margin-bottom:40px;

}

.page-header h1{

    font-size:40px;
    color:#b00000;
    margin-bottom:10px;

}

.page-header p{

    color:#666;
    font-size:18px;

}


/* =====================================================
   LAYOUT
===================================================== */

.content{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:40px;

    align-items:start;

}



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

.filters{

    border:1px solid #ddd;

    padding:25px;

    background:#fafafa;

}

.filters h2{

    color:#b00000;

    margin-bottom:25px;

    text-align:center;

}

.filters form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.filters label{

    display:block;

    margin-bottom:5px;

    font-weight:bold;

    color:#333;

}

.filters input,
.filters select{

    width:100%;

    padding:10px;

    border:1px solid #ccc;

    font-size:15px;

}

.filters input:focus,
.filters select:focus{

    outline:none;

    border-color:#b00000;

}

.filters button{

    margin-top:10px;

    padding:14px;

    background:#b00000;

    color:white;

    border:none;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

}

.filters button:hover{

    background:#900000;

}


/* =====================================================
   TOOLBAR
===================================================== */

.toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    padding-bottom:15px;

    border-bottom:1px solid #ddd;

}

.toolbar span{

    font-weight:bold;

}

.toolbar select{

    padding:8px;

}


/* =====================================================
   PROPIEDADES
===================================================== */

.properties{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.properties-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: 1rem 5rem;
}


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

.property-card{

    display:grid;

    grid-template-columns:320px 1fr;

    border:1px solid #ddd;

    overflow:hidden;

    background:white;

}

.property-card img{

    width:100%;

    height:250px;

    object-fit:cover;

}

.property-info{

    padding:25px;

}

.property-code{

    display:inline-block;

    color:#777;

    font-size:14px;

    margin-bottom:10px;

}

.property-info h2{

    margin-bottom:15px;

    color:#222;

    font-size:28px;

}

.price{

    color:#b00000;

    font-size:30px;

    font-weight:bold;

    margin-bottom:15px;

}


/* =====================================================
   FEATURES
===================================================== */

.features{

    display:flex;

    gap:20px;

    margin:20px 0;

    flex-wrap:wrap;

}

.features span{

    background:#f2f2f2;

    padding:8px 14px;

    border-radius:4px;

    font-size:14px;

}


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

.property-info a{

    display:inline-block;

    margin-top:20px;

    background:#b00000;

    color:white;

    padding:12px 24px;

    text-decoration:none;

    font-weight:bold;

}

.property-info a:hover{

    background:#900000;

}


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

@media(max-width:1100px){

    .content{

        grid-template-columns:260px 1fr;

    }

    .property-card{

        grid-template-columns:260px 1fr;

    }

}


@media(max-width:900px){

    .content{

        grid-template-columns:1fr;

    }

    .filters{

        order:1;

    }

    .properties{

        order:2;

    }

}


@media(max-width:700px){

    .toolbar{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .property-card{

        grid-template-columns:1fr;

    }

    .property-card img{

        height:220px;

    }

    .property-info{

        padding:20px;

    }

    .property-info h2{

        font-size:24px;

    }

    .price{

        font-size:26px;

    }

}


@media(max-width:500px){

    .page-header h1{

        font-size:32px;

    }

    .filters{

        padding:20px;

    }

}