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

.navbar{
    position:fixed;
    top:0;
    left:50%;
    z-index:1000;

    width:100%;
    height:72px;
    padding:0 72px;

    display:grid;
    grid-template-columns:190px 1fr auto;
    align-items:center;
    gap:32px;

    transform:translateX(-50%);

    background:rgba(0, 0, 0, .42);
    /*border-bottom:1px solid rgba(255, 255, 255, .10);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);*/
}


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

.navbar-brand{
    width:190px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    overflow:hidden;
    flex-shrink:0;

    text-decoration:none;
}

.navbar-brand__logo{
    display:block;

    width:auto;
    height:100%;
    max-width:none;

    object-fit:contain;
    object-position:center;

    /*
       El PNG tiene mucho espacio transparente.
       Este aumento permite que el logo se vea correctamente.
    */
    transform:scale(2.2);
    transform-origin:center;
}


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

.navbar-menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:36px;
}

.navbar-menu a{
    position:relative;

    color:#ffffff;

    font-size:14px;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;

    transition:color .2s ease;
}

.navbar-menu a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-9px;

    width:100%;
    height:2px;

    background:#334155;

    transform:scaleX(0);
    transform-origin:center;

    transition:transform .2s ease;
}

.navbar-menu a:hover{
    
}

.navbar-menu a:hover::after{
    transform:scaleX(1);
}


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

.navbar-cta{
    min-width:116px;
    height:42px;
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255, 255, 255, 0.514);
    background:#ffffff00;
    color:#ffffff;
    font-size:13px;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

.navbar-cta:hover{
    transform:translateY(-1px);
    background: #334155;

}


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

@media (max-width:1050px){

    .navbar{
        padding:0 40px;
        grid-template-columns:165px 1fr auto;
        gap:22px;
    }

    .navbar-brand{
        width:165px;
    }

    .navbar-menu{
        gap:24px;
    }

}


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

@media (max-width:780px){

    .navbar{
        height:66px;
        padding:0 20px;

        grid-template-columns:110px auto;
        justify-content:space-between;
        gap:16px;
    }

    .navbar-brand{
        width:110px;
        height:52px;
    }

    .navbar-brand__logo{
        height:100%;
        transform:scale(2.2);
        transform-origin:center;
    }

    .navbar-menu{
        display:none;
    }

    .navbar-cta{
        min-width:auto;
        height:38px;
        padding:0 16px;
        font-size:12px;
    }

}


/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media (max-width:430px){

    .navbar{
        padding:0 14px;
        grid-template-columns:96px auto;
    }

    .navbar-brand{
        width:96px;
        height:46px;
    }

    .navbar-brand__logo{
        transform:scale(2);
    }

    .navbar-cta{
        padding:0 13px;
    }

}