/* =====================================================================
   Trolha Top Banner - barra de destaque acima do header
   ===================================================================== */

.trolha-topbanner {
    width: 100%;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1031;
}

/* Empurra o header fixo para baixo do banner */
#header.pageHeader { top: 33px !important; }

/* Compensa o body para o conteudo nao ficar tapado */
body { margin-top: 33px !important; }

.trolha-topbanner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
}

.trolha-topbanner__text {
    flex: 1;
}

.trolha-topbanner__link-wrap {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
}

.trolha-topbanner__link-wrap:hover {
    text-decoration: none;
}

/* CTA button */
.trolha-topbanner__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    background: rgba(255,255,255,.2);
    transition: background .25s ease, transform .15s ease;
}

.trolha-topbanner__btn:hover {
    background: rgba(255,255,255,.35);
    text-decoration: none;
    transform: scale(1.03);
}

.trolha-topbanner__btn .fa {
    font-size: 10px;
    transition: transform .2s ease;
}

.trolha-topbanner__btn:hover .fa {
    transform: translateX(3px);
}


/* Mobile */
@media (max-width: 575px) {
    .trolha-topbanner { font-size: 11px; padding: 6px 12px; }
    .trolha-topbanner__inner,
    .trolha-topbanner__link-wrap { padding: 0 12px; }
    .trolha-topbanner__btn { padding: 4px 12px; font-size: 11px; }
}