.header {

text-align: center;

padding: 2rem 2rem 1rem 2rem;

}



.header h1 {

color: var(--grisoscuro);

margin-bottom: 1.5rem;

margin-top: 20px;

font-family:'LatoNegro';

font-size: 2.5rem;

}



.search-section {

max-width: 800px;

margin: 0 auto;

padding: 0 1rem;

}



.search-title {

text-align: left;

margin-bottom: 1rem;

color: var(--grisoscuro);

font-size: 1.2rem;

font-weight: 500;

}



.search-container {

display: flex;

gap: 1rem;

margin-bottom: 3rem;

align-items: center;

width: 100%;

}



.search-input {

flex: 1;

padding: 0.9rem 1.5rem;

border: none;

border-radius: 25px;

background-color: var(--grisclaro);

font-size: 1rem;

min-width: 200px;

}



.filter-btn {

padding: 1px 1rem;

height: 47px;


background-color: var(--grisoscuro);

color: white;

border: none;

border-radius: 25px;

cursor: pointer;

white-space: nowrap;

display: flex;

padding-right: 9px;

align-items: center;

transition: background-color 0.3s;

font-size: 0.95rem;

}

.filter-btn svg{

width: 40px;

height: 50px;


}

.filter-btn:hover {

background-color: #333;

}

.title-alquilar, .title-comprar {

position: relative;

padding-bottom: 5px;

cursor: pointer;

transition: color 0.3s ease;

}

.title-alquilar{

color: var(--grisclaro);

}

.title-comprar{

color: var(--grisclaro);

}

.title-alquilar:hover,.title-comprar:hover{

color: var(--verde);

cursor:pointer;

}

/* Línea inferior (subrayado) */

.title-alquilar::after, .title-comprar::after {

content: '';

position: absolute;

bottom: -2px;

left: 0;

width: 100%;

height: 2px;

background-color:var(--verde);

transform: scaleX(0);

transform-origin: right;

transition: transform 0.5s ease;

}



/* Línea de tachado (a través del texto) */

/* .title-alquilar::before, .title-comprar::before {

content: '';

position: absolute;

top: 50%;

left: 0;

width: 100%;

height: 2px;

background-color:var(--rojo);

transform: scaleX(0);

transform-origin: left;

transition: transform 0.5s ease;

} */



/* Efecto hover - muestra subrayado */

.title-alquilar:hover::after, .title-comprar:hover::after {

transform: scaleX(1);

transform-origin: left;

}



/* Estado activo */

.title-alquilar.active, .title-comprar.active {

color: var(--verde);

}



/* Cuando está activo, muestra la línea de tachado */

.title-alquilar.active::before, .title-comprar.active::before {

transform: scaleX(1);

}



/* Mantiene el subrayado cuando está activo */

.title-alquilar.active::after, .title-comprar.active::after {

transform: scaleX(1);

transform-origin: left;

}

.ocultar{

display: none;

}

.property-grid {

display: grid;

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

gap: 0rem;

padding: 1rem;

max-width: 1400px;

margin: 0 auto;

}

.property-grid.grid-4 {

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

}



.property-card {

text-align: center;

padding: 1rem;

transition: transform 0.3s;

display: flex;

flex-direction: column;

align-items: center;

justify-content: flex-end;

min-height: 700px;

position: relative;

}



.property-card-content {

position: relative;

display: flex;

flex-direction: column;

align-items: center;

width: 100%;

height:100%;


}



.property-icon {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width:131px;

height:148px;

}
.masabajo{
   
    top:19.4rem;
}



.property-card h2 {

margin-top:auto;

padding-top: 1rem;

font-size: 1.5rem;

font-family: 'MonseSemiNegro';

margin-bottom: 2rem;

}



.comercial-title {

margin-top: auto;

padding-top: 3rem;

display: flex;

flex-direction: column;

align-items: center;

}



.comercial-title .locales {

font-size: 1.5rem;

font-weight: bold;

margin-bottom: 0.5rem;

font-family: 'MonseSemiNegro';

}



.comercial-title h2 {

margin-top: 0;

padding-top: 0;

margin-bottom: 2rem;

}



.property-card:hover {

transform: translateY(-5px);

}



.property-card:nth-child(1) {

background-color: var(--grisclaro);

color: white;

}



.property-card:nth-child(2) {

background-color: var(--rojo);

color: white;

}



.property-card:nth-child(3) {

background-color: var(--verde);

color: white;

}



.property-card:nth-child(4) {

background-color: var(--grisoscuro);

color: white;

}

.property-card:nth-child(5) {

background-color: var(--grisclaro);

color: white;

}



.ver-mas {

padding: 10px 75px;

background-color: white;

color: var(--grisoscuro);

text-decoration: none;

border-radius: 0;

font-weight: bold;

position:relative;

font-size: 15px;

margin-top:2rem;/*puede subir las letras*/

top: -45px;

font-family: 'MonseSemiNegro';



}



/* Footer styles */

.footer-main {

background-color: #f5f5f5;

padding: 2rem 0;

border-top: 4px solid var(--grisfooter);

margin-top: auto;

}



.footer-container {

display: grid;

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

gap: 1rem;

max-width: 800px;

margin: 0 auto;

align-items: center;

}



.footer-column {

text-align: center;

display: flex;

flex-direction: column;

align-items: center;

}



.footer-title {

font-size: 1.2rem;

font-weight: 600;

margin-bottom: 1rem;

color: #333;

text-transform: uppercase;

}



.footer-text {

color: #666;

font-size: 0.95rem;

line-height: 1.6;

}



.home-icon {

width: 48px;

height: 48px;

position: relative;

top: -10px;

}



.btn-vende {

background-color: #333;

color: white;

padding: 0.75rem 2rem;

border: none;

border-radius: 20px;

cursor: pointer;

font-size: 1rem;

font-weight: bold;

text-transform: uppercase;

transition: background-color 0.3s;

}



.btn-vende:hover {

background-color: #000;

}



.sell {

margin-bottom: 40px;

}

/* modal estilos */

.modalContainer {

min-height: 100vh;

display: flex;

justify-content: center;

padding: 20px;

}









.modal {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

justify-content: center;

align-items: center;

z-index: 1000;

padding: 20px;

}



.modal-content {

background: white;

padding: 30px;

border-radius: 16px;

width: 100%;

max-width: 500px;

position: relative;

max-height: 90vh;

overflow-y: auto;

}



.close-btn {

position: absolute;

right: 20px;

top: 20px;

font-size: 24px;

cursor: pointer;

color: #666;

border: none;

background: none;

}



.modal-title {

text-align: center;

font-size: 24px;

font-weight: bold;

margin-bottom: 24px;

color: #333;

}



.filter-section {

margin-bottom: 20px;

padding-bottom: 20px;

border-bottom: 2px solid #eee;

}



.filter-label {

display: block;

font-weight: bold;

margin-bottom: 10px;

color: #333;

}



.toggle-container {

display: flex;

border: 2px solid #e0e0e0;

border-radius: 25px;

overflow: hidden;

}



.toggle-btn {

flex: 1;

padding: 12px;

border: none;

background: #f5f5f5;

cursor: pointer;

font-size: 16px;

transition: all 0.3s;

}



.toggle-btn.active {

background: #4bd1a0;

color: white;

}



.select-input {

width: 100%;

padding: 12px;

border: 2px solid #e0e0e0;

border-radius: 12px;

font-size: 16px;

color: #333;

appearance: none;

background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center;

}







.price-labels {

display: flex;

justify-content: space-between;

margin-bottom: 10px;

color: #666;

font-size: 14px;

}



.range-input {

width: 100%;

-webkit-appearance: none;

height: 4px;

background: #4bd1a0;

border-radius: 2px;

outline: none;

}



.range-input::-webkit-slider-thumb {

-webkit-appearance: none;

width: 20px;

height: 20px;

background: white;

border: 2px solid #4bd1a0;

border-radius: 50%;

cursor: pointer;

}

.price-range {

padding: 0 10px;

margin-top: 20px;

}



.range-container {

position: relative;

width: 100%;

height: 40px;

}



.range-track {

position: absolute;

width: 100%;

height: 4px;

background: #e0e0e0;

top: 50%;

transform: translateY(-50%);

border-radius: 2px;

}



.range-track-highlight {

position: absolute;

height: 4px;

background: #4bd1a0;

top: 50%;

transform: translateY(-50%);

border-radius: 2px;

}



.dual-range {

position: absolute;

width: 100%;

top: 50%;

transform: translateY(-50%);

}



.dual-range input {

position: absolute;

width: 100%;

-webkit-appearance: none;

pointer-events: none;

background: none;

height: 40px;

margin: 0;

padding: 0;

}



.dual-range input::-webkit-slider-thumb {

-webkit-appearance: none;

pointer-events: auto;

width: 20px;

height: 20px;

border-radius: 50%;

background: white;

border: 2px solid #4bd1a0;

cursor: pointer;

margin-top: 0;

}



.dual-range input::-moz-range-thumb {

pointer-events: auto;

width: 20px;

height: 20px;

border-radius: 50%;

background: white;

border: 2px solid #4bd1a0;

cursor: pointer;

margin-top: 0;

}

.buttons-container {

display: flex;

flex-direction: column;

align-items: center;

gap: 16px;

margin-top: 24px;

}



.clear-btn {

background: none;

border: none;

color: #666;

cursor: pointer;

font-size: 14px;

}



.save-btn {

width: 100%;

padding: 12px;

background: #4bd1a0;

color: white;

border: none;

border-radius: 25px;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s;

}



.save-btn:hover {

background-color: #3cb389;

}



/* modal estilos*/

@media (max-width: 1200px) {

.property-grid {

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

padding: 1.5rem;

}

.masabajo{
    top: 13.2rem;
}


.property-card {

min-height: 500px;

}

.property-grid {

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

}



.property-grid.grid-4 {

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

}

}



@media (max-width: 807px) {


    

.search-container {

flex-direction: column;

padding: 0 0.5rem;

}



.search-input {

padding: 1rem 1.5rem;

width: 100%;

min-width: auto;

}



.filter-btn {


margin-top: 1rem;

align-self: center;

}



.property-grid {

grid-template-columns: 1fr;

padding: 1rem;

gap: 1px;

}

.property-grid.grid-4 {

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

}


.property-card {

min-height: 400px;

padding: 3rem 1.5rem;

}
.property-icon {


top: 5rem;


}
.masabajo{
top:4.5rem;
}


.property-card h2 {

font-size: 1.5rem;

}



.footer-container {

grid-template-columns: 1fr;

padding: 0 3rem;

}

}
@media (max-width: 570px) {
    .property-card h2,.comercial-title .locales {

font-size: 1.3rem;

}

.property-card .ver-mas{

padding: 10px 58px;


}
.property-card-content .ver-mas{
font-size: 5px;
}

}
@media (max-width: 502px) {

.property-grid.grid-4 {

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

}

/* estilos modales */

.modal-content {

padding: 20px;

}



.toggle-btn {

padding: 10px;

font-size: 14px;

}



.select-input {

padding: 10px;

font-size: 14px;

}






/* estilos modales */

}