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

.svh-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    background:#07152b;

    z-index:9999;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

}

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

.svh-navbar{

    width:100%;

}

/*
=========================================================
CONTENEDOR
=========================================================
*/

.svh-contenedor{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:0 40px;

    min-height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

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

.svh-logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.svh-logo a{

    display:flex;

    align-items:center;

}

.svh-logo-img{

    height:60px;

    width:auto;

    display:block;

    transition:.35s;

}

.svh-logo-img:hover{

    transform:scale(1.05);

}

/*
=========================================================
MENÚ
=========================================================
*/

.svh-menu{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:34px;

    flex-wrap:wrap;

}

/*
=========================================================
LINKS
=========================================================
*/

.svh-link{

    color:#ffffff;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    letter-spacing:.5px;

    position:relative;

    transition:.30s;

}

.svh-link:hover{

    color:#3b82f6;

}

/*
=========================================================
EFECTO UNDERLINE
=========================================================
*/

.svh-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#3b82f6;

    transition:.35s;

}

.svh-link:hover::after{

    width:100%;

}

/*
=========================================================
BOTÓN
=========================================================
*/

.svh-acciones{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.svh-btn{

    background:#2563eb;

    color:#ffffff;

    text-decoration:none;

    padding:13px 24px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    transition:.35s;

    white-space:nowrap;

}

.svh-btn:hover{

    background:#3b82f6;

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(37,99,235,.35);

}

/*
=========================================================
ESPACIO PARA EL HEADER
=========================================================
*/

body{

    padding-top:90px;

}

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

@media(max-width:1100px){

    .svh-contenedor{

        flex-direction:column;

        justify-content:center;

        padding:20px;

        min-height:auto;

        gap:20px;

    }

    .svh-menu{

        gap:18px;

    }

    body{

        padding-top:180px;

    }

}

/*
=========================================================
MÓVIL
=========================================================
*/

@media(max-width:768px){

    .svh-logo-img{

        height:52px;

    }

    .svh-menu{

        flex-direction:column;

        gap:14px;

    }

    .svh-link{

        font-size:15px;

    }

    .svh-btn{

        width:100%;

        text-align:center;

    }

    .svh-acciones{

        width:100%;

    }

    body{

        padding-top:320px;

    }

}