@charset "utf-8";

/*==================================================
TOPBAR
Proyecto: MCTIRE
Autor: ColaboraWeb
====================================================*/

/*==================================================
TOPBAR
====================================================*/

.topbar{

    position:relative;

    color:var(--white);

    background:
    linear-gradient(
    90deg,
    var(--primary-hover) 0%,
    var(--primary) 45%,
    #ef233c 100%);

    box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.15);

    overflow:hidden;

}


/* brillo */

.topbar::before{

    content:"";

    position:absolute;

    top:0;

    left:-40%;

    width:35%;

    height:100%;

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

    animation:topbarLight 8s linear infinite;

}


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

.topbar .container{

    min-height:44px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

    position:relative;

    z-index:2;

}


/*==================================================
ANIMACIÓN
====================================================*/

@keyframes topbarLight{

    from{

        left:-40%;

    }

    to{

        left:140%;

    }

}

/*==================================================
LEFT
====================================================*/

.topbar-left{

    display:flex;

    align-items:center;

    gap:1.8rem;

}


/*==================================================
LINK
====================================================*/

.topbar-link{

    display:flex;

    align-items:center;

    gap:.65rem;

    color:var(--gray-300);

    font-size:.84rem;

    font-weight:500;

    transition:var(--transition);

}

.topbar-link:hover{

    color:var(--white);

}


/*==================================================
ICONOS
====================================================*/

.topbar-link i{

    color:var(--primary);

    font-size:.9rem;

    transition:var(--transition);

}

.topbar-link:hover i{

    color:var(--primary-hover);

}

/*==================================================
SOCIALES
====================================================*/

.topbar-right{

    display:flex;

    align-items:center;

    gap:.75rem;

}

.topbar-right a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    border-radius:50%;

    color:rgba(255,255,255,.90);

    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.12),
    rgba(255,255,255,.04));

    border:1px solid rgba(255,255,255,.20);

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

    overflow:hidden;

    transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    color .35s ease;

}


/* brillo */

.topbar-right a::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

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

    transition:.7s ease;

}


/* hover */

.topbar-right a:hover{

    transform:
    translateY(-4px)
    scale(1.08);

    color:#fff;

    background:
    linear-gradient(
    180deg,
    var(--primary),
    var(--primary-hover));

    border-color:transparent;

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

}


.topbar-right a:hover::before{

    left:140%;

}


/* icono */

.topbar-right a i{

    position:relative;

    z-index:2;

    font-size:1rem;

    transition:transform .35s ease;

}


.topbar-right a:hover i{

    transform:rotate(-12deg) scale(1.15);

}

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

@media(max-width:992px){

    .topbar .container{

        min-height:42px;

    }

    .topbar-left{

        gap:1rem;

    }

}

@media(max-width:768px){

    .topbar .container{

        flex-direction:column;

        justify-content:center;

        gap:.75rem;

        padding:.75rem 0;

    }

    .topbar-left{

        justify-content:center;

        flex-wrap:wrap;

        gap:1rem;

    }

    .topbar-right{

        justify-content:center;

    }

}


/*==================================================
TOPBAR CONTACTO
MANTENER COLOR ORIGINAL EN HOVER
==================================================*/

.topbar-left > a,
.topbar-left > a:link,
.topbar-left > a:visited,
.topbar-left > a:hover,
.topbar-left > a:focus,
.topbar-left > a:active
{
    color:var(--gray-300) !important;

    text-decoration:none !important;

    transform:none !important;

    background:none !important;

    box-shadow:none !important;
}


/* EVITAR CAMBIOS EN EL SPAN */

.topbar-left > a span
{
    color:inherit;
}