@charset "utf-8";

/*==================================================
HEADER.CSS
INDIGO INMOBILIARIA
==================================================*/


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

.header
{

    position:relative;

    width:100%;

    background:#021b6d;

    z-index:10000;

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

}



/*==================================================
CONTAINER
==================================================*/

.header-container
{

    min-height:95px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



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

.logo
{

    display:flex;

    align-items:center;

}


.logo img
{

    height:75px;

    width:auto;

}



/*==================================================
NAV
==================================================*/

.nav
{

    margin-left:auto;

}


.nav-menu
{

    display:flex;

    align-items:center;

    gap:2.5rem;

}



.nav-menu li
{

    position:relative;

}



.nav-menu a
{

    display:flex;

    align-items:center;

    color:#fff;

    font-size:.95rem;

    font-weight:600;

    padding:1rem 0;

    position:relative;

    transition:.3s ease;

}



.nav-menu a::after
{

    content:"";

    position:absolute;

    left:0;

    bottom:5px;

    width:0;

    height:2px;

    background:#c89b3c;

    transition:.35s ease;

}



.nav-menu a:hover,
.nav-menu .active a
{

    color:#c89b3c;

}



.nav-menu a:hover::after,
.nav-menu .active a::after
{

    width:100%;

}



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

.header-actions
{

    margin-left:2rem;

}



.header-btn
{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:1rem 2rem;

    background:#c89b3c;

    color:#fff;

    border-radius:50px;

    font-weight:700;

    overflow:hidden;

    transition:.35s ease;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

}



/* brillo interno */

.header-btn::before
{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transition:.7s ease;

}



/* movimiento suave */

.header-btn:hover
{

    transform:translateY(-5px);

    box-shadow:

    0 18px 35px rgba(0,0,0,.25);

}



/* barrido */

.header-btn:hover::before
{

    left:130%;

}



/* texto encima */

.header-btn span
{

    position:relative;

    z-index:2;

}


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


.menu-toggle
{

    display:none;

    width:45px;

    height:45px;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

}



.menu-toggle span
{

    display:block;

    width:28px;

    height:2px;

    background:#fff;

    transition:.3s ease;

}

/*==================================================
MENU TOGGLE ACTIVE
==================================================*/

.menu-toggle.active span:nth-child(1)
{

    transform:translateY(8px) rotate(45deg);

}


.menu-toggle.active span:nth-child(2)
{

    opacity:0;

}


.menu-toggle.active span:nth-child(3)
{

    transform:translateY(-8px) rotate(-45deg);

}



/*==================================================
BOTON CERRAR SOBRE MENU BLANCO
==================================================*/

@media(max-width:992px)
{


     .menu-toggle.active
    {

        position:fixed;

        top:18px;

        right:20px;

        z-index:10002;

        display:flex;

        width:45px;

        height:45px;

        border-radius:50%;

        background:#021b6d;

        align-items:center;

        justify-content:center;

    }



    .menu-toggle.active span
    {

        background:#fff;

    }



}

/*==================================================
OVERLAY
==================================================*/


.menu-overlay
{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.35s;

}



.menu-overlay.active
{

    opacity:1;

    visibility:visible;

}

/*==================================================
TABLET / MOBILE MENU
==================================================*/

@media(max-width:992px)
{


    .header-container
    {

        min-height:80px;

    }



    /* PANEL MOBILE */

    .nav
    {

        position:fixed;

        top:0;

        right:-350px;

        width:320px;

        height:100vh;

        background:#fff;

        padding:100px 2rem 2rem;

        z-index:9999;

        transition:.4s ease;

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

        overflow-y:auto;

    }



    .nav.active
    {

        right:0;

    }



    .nav-menu
    {

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:1.2rem;

    }



    .nav-menu li
    {

        width:100%;

    }



    .nav-menu a
    {

        width:100%;

        color:#12483c;

        font-size:1.05rem;

        padding:.8rem 0;

    }



    .nav-menu a::after
    {

        bottom:0;

    }



    .header-actions
    {

        display:block;

    }



    .menu-toggle
    {

        display:flex;

        z-index:10000;

    }



}



/*==================================================
MOBILE
==================================================*/

@media(max-width:576px)
{


    .header-container
    {

        min-height:75px;

        padding:0 1rem;

    }



    .logo img
    {

        height:55px;

    }



    .nav
    {

        width:100%;

        right:-100%;

    }



}