/* Identidade do topo, com textura desfocada apenas atrás dos caminhos. */
#main-header.app-topbar > .app-topbar__container {
    background-color: #071321;
    background-image:
        linear-gradient(90deg, rgba(7, 19, 33, .95), rgba(7, 19, 33, .78) 25%, rgba(7, 19, 33, .72) 52%, rgba(7, 19, 33, .82) 75%, rgba(7, 19, 33, .96)),
        url("../../img/topo-cordas-help-v1.webp");
    background-position: center, center 75%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 -1px 0 rgba(125, 175, 211, .2);
}
.app-topbar .app-topbar__contexto small { color: #b4c7d8; }
.app-topbar .app-topbar__contexto strong { text-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.app-topbar > .app-breadcrumb {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #102638;
    color: #c5d5e2;
    border-bottom-color: rgba(151, 185, 211, .24);
    box-shadow: inset 0 1px 0 rgba(187, 211, 230, .12);
}
.app-topbar > .app-breadcrumb::before {
    content: "";
    position: absolute;
    inset: -20px;
    z-index: -1;
    pointer-events: none;
    background: url("../../img/topo-cordas-help-v1.webp") center 75% / cover no-repeat;
    filter: blur(14px);
    opacity: .22;
}
.app-topbar .app-breadcrumb a { color: #d7e8f6; }
.app-topbar .app-breadcrumb a:hover {
    color: #ffe19a;
    background: rgba(255, 255, 255, .07);
}
.app-topbar .app-breadcrumb a:focus-visible { outline-color: #ffd16b; }
.app-topbar .app-breadcrumb [aria-current="page"] { color: #ffffff; }
.app-topbar .app-breadcrumb__separador { color: #bed0df; }
@media (max-width: 620px) {
    #main-header.app-topbar > .app-topbar__container {
        background-image:
            linear-gradient(90deg, rgba(7, 19, 33, .88), rgba(7, 19, 33, .78) 50%, rgba(7, 19, 33, .94)),
            url("../../img/topo-cordas-help-v1.webp");
    }
}