/*
========================================
RESET
========================================
*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins', sans-serif;

    background:#f4f7fb;

    color:#111827;

    overflow-x:hidden;

}

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

:root{

    --azul-oscuro:#07152b;

    --azul-secundario:#0f2747;

    --azul-principal:#2563eb;

    --azul-hover:#1d4ed8;

    --azul-claro:#60a5fa;

    --blanco:#ffffff;

    --gris:#94a3b8;

    --gris-claro:#e2e8f0;

    --negro:#0f172a;

}

/*
========================================
NAVBAR
========================================
*/

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:18px 5%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:999;

    background:#07152b !important;

    border-bottom:
    1px solid rgba(255,255,255,0.05);

   .navbar{
    transition:transform .15s ease;
}

}

/*
========================================
NAVBAR OCULTA
========================================
*/

.navbar{

    transition: transform .35s ease;

}

.navbar-hide{

    transform: translateY(-100%);

}

/*
========================================
LOGO
========================================
*/

.logo{

    display:flex;

    align-items:center;

}

.logo-img{

    height:58px;

    width:auto;

    object-fit:contain;

    display:block;

}

/*
========================================
MENU
========================================
*/

.nav-center{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-center a{

    text-decoration:none;

    color:var(--blanco);

    font-size:14px;

    font-weight:600;

    letter-spacing:0.5px;

    transition:0.3s;

    position:relative;

    white-space:nowrap;

}

.nav-center a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:var(--azul-claro);

    transition:0.3s;

}

.nav-center a:hover::after{

    width:100%;

}

.nav-center a:hover{

    color:var(--azul-claro);

}

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

.btn-login{

    text-decoration:none;

    background:rgba(255,255,255,0.08);

    color:var(--blanco);

    padding:13px 24px;

    border-radius:14px;

    font-size:13px;

    font-weight:700;

    transition:0.3s;

    border:
    1px solid rgba(255,255,255,0.08);

}

.btn-login:hover{

    background:rgba(255,255,255,0.15);

    transform:translateY(-2px);

}

/*
========================================
SECCION
========================================
*/

.propiedades-section{

    width:92%;

    max-width:1450px;

    margin:auto;

    padding-top:150px;

    padding-bottom:100px;

}

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

.section-header{

    width:100%;

    margin-bottom:50px;

}

/*
========================================
TITULO
========================================
*/

.section-header h2{

    font-size:42px;

    font-weight:700;

    color:var(--negro);

    margin-bottom:28px;

}

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

.filtros{

    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}

.filtros a{

    text-decoration:none;

    padding:14px 24px;

    border-radius:14px;

    background:var(--blanco);

    color:var(--negro);

    font-size:14px;

    font-weight:600;

    transition:0.3s;

    border:
    1px solid rgba(15,23,42,0.06);

    box-shadow:
    0 5px 20px rgba(15,23,42,0.05);

}

.filtros a:hover{

    transform:translateY(-2px);

    background:var(--azul-principal);

    color:var(--blanco);

}

/*
========================================
FILTRO ACTIVO
========================================
*/

.filtro-activo{

    background:var(--azul-principal) !important;

    color:var(--blanco) !important;

}

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

.propiedades-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

}

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

.propiedad-card{

    background:var(--blanco);

    border-radius:26px;

    overflow:hidden;

    box-shadow:
    0 10px 35px rgba(15,23,42,0.07);

    transition:0.35s;

}

.propiedad-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 45px rgba(15,23,42,0.12);

}

/*
========================================
CARRUSEL
========================================
*/

.carousel-container{

    position:relative;

    width:100%;

    height:260px;

    overflow:hidden;

}

/*
========================================
BADGE TIPO
========================================
*/

.tipo-badge{

    position:absolute;

    top:18px;
    left:18px;

    z-index:10;

    background:
    rgba(7,21,43,0.85);

    color:var(--blanco);

    padding:10px 16px;

    border-radius:12px;

    font-size:12px;

    font-weight:700;

    letter-spacing:0.5px;

    backdrop-filter:blur(10px);

}

/*
========================================
TRACK
========================================
*/

.carousel-track{

    display:flex;

    height:100%;

    transition:0.5s ease;

}

/*
========================================
SLIDE
========================================
*/

.carousel-slide{

    flex-shrink:0;

    height:100%;

    display:block;

}

.carousel-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*
========================================
BOTONES CARRUSEL
========================================
*/

.carousel-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:
    rgba(255,255,255,0.18);

    color:var(--blanco);

    font-size:18px;

    cursor:pointer;

    z-index:5;

    transition:0.3s;

}

.carousel-btn:hover{

    background:var(--blanco);

    color:var(--negro);

}

.prev{

    left:14px;

}

.next{

    right:14px;

}

/*
========================================
INFO
========================================
*/

.propiedad-info{

    padding:24px;

}

.propiedad-info h3{

    font-size:22px;

    line-height:1.4;

    margin-bottom:15px;

    color:var(--negro);

}

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

.precio{

    font-size:28px;

    font-weight:700;

    color:var(--azul-principal);

    margin-bottom:14px;

}

/*
========================================
DESCRIPCION
========================================
*/

.propiedad-info p{

    font-size:14px;

    line-height:1.8;

    color:#64748b;

    margin-bottom:24px;

}

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

.btn-ver{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:var(--azul-principal);

    color:var(--blanco);

    padding:15px;

    border-radius:14px;

    font-size:14px;

    font-weight:600;

    transition:0.3s;

}

.btn-ver:hover{

    background:var(--azul-hover);

    transform:translateY(-2px);

}

/*
========================================
CONTACTO EXTRA
========================================
*/

.contacto-extra{

    width:100%;

    margin-top:70px;

    padding:60px 30px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #07152b,
        #12386b
    );

    text-align:center;

    color:var(--blanco);

    box-shadow:
    0 15px 40px rgba(15,23,42,0.10);

}

.contacto-extra h3{

    font-size:34px;

    margin-bottom:25px;

    font-weight:700;

}

.contacto-extra a{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:rgba(255,255,255,0.10);

    color:var(--blanco);

    padding:16px 34px;

    border-radius:16px;

    font-size:15px;

    font-weight:700;

    transition:0.3s;

    border:
    1px solid rgba(255,255,255,0.10);

}

.contacto-extra a:hover{

    transform:translateY(-3px);

    background:rgba(255,255,255,0.18);

}

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

@media(max-width:1000px){

    .navbar{

        flex-direction:column;

        gap:18px;

        padding:20px 5%;

    }

    .nav-center{

        flex-wrap:wrap;

        justify-content:center;

        gap:15px;

    }

    .propiedades-section{

        padding-top:230px;

    }

}

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

@media(max-width:600px){

    .navbar{

        gap:20px;

    }

    .logo-img{

        height:48px;

    }

    .nav-center{

        width:100%;

        justify-content:center;

        gap:12px;

    }

    .nav-center a{

        font-size:11px;

    }

    .btn-login{

        width:100%;

        text-align:center;

    }

    .propiedades-section{

        width:94%;

        padding-top:260px;

    }

    .section-header h2{

        font-size:34px;

    }

    .filtros{

        gap:10px;

    }

    .filtros a{

        flex:1;

        justify-content:center;

        text-align:center;

        font-size:12px;

        padding:13px 14px;

    }

    .carousel-container{

        height:220px;

    }

    .propiedad-info{

        padding:20px;

    }

    .propiedad-info h3{

        font-size:20px;

    }

    .precio{

        font-size:24px;

    }

    .contacto-extra{

        padding:45px 20px;

    }

    .contacto-extra h3{

        font-size:26px;

        line-height:1.3;

    }

    .contacto-extra a{

        width:100%;

    }

}