/* Navegação das páginas de Serviços (suporte, treinamentos, reparos).
   Ficou em arquivo próprio porque as três páginas compartilham o mesmo
   comportamento - inline, elas divergiriam na primeira alteração. */

/* O tema só pinta de branco o .active e os <a> do breadcrumb. O item do meio
   ("Serviços") não é link nem é a página atual, então ficava em #222 sobre a
   foto do banner - praticamente ilegível. */
.banner-page .breadcrumb > li.trilha-grupo {
    color: #ffffff;
    opacity: .85;
}

/* ===== menu lateral dos serviços =====
   Antes ele rolava junto com a página: quem clicava num item descia e ficava
   sem nenhuma navegação à vista - daí a sensação de "não tem volta". Grudado
   no topo, o menu acompanha a leitura e o visitante troca de seção a qualquer
   momento. */
@media (min-width: 992px) {
    /* O sticky só percorre a altura do elemento pai. Nas colunas float do
       Bootstrap 3 a coluna do menu tem a altura do próprio menu, ou seja, trilho
       nenhum - o menu rolava junto mesmo com position:sticky aplicado. Com o row
       em flex as colunas passam a ter a mesma altura, e aí o menu acompanha toda
       a extensão do texto ao lado. O seletor é preso ao id da seção para não
       alterar nenhum outro row da página. */
    #topo-servicos > .container > .row {
        display: flex;
        flex-wrap: wrap;
    }

    .widget.categories {
        position: sticky;
        top: 20px;
    }
}

/* sem mexer no padding: o tema já define `.category-nav li a { padding: 15px 20px }`,
   que é mais específico e venceria de qualquer forma. Esse recuo de 20px é o
   espaço onde o marcador da seção atual aparece, encostado na borda do item. */
.category-nav a {
    display: block;
    position: relative;
    transition: color .18s ease, background-color .18s ease;
}

    /* marcador da seção que está sendo lida */
    .category-nav a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 0;
        border-radius: 2px;
        background: #337ab7;
        transition: height .18s ease;
    }

    .category-nav a.secao-atual {
        color: #337ab7;
        font-weight: 700;
    }

        .category-nav a.secao-atual::before {
            height: 60%;
        }

/* o título da seção é o alvo da âncora: sem esse respiro ele para embaixo do
   cabeçalho fixo do site */
.secao-servico {
    scroll-margin-top: 90px;
}

/* volta ao topo da página, ao lado do título de cada seção */
.link-topo {
    float: right;
    font-size: 12px;
    font-weight: 600;
    color: #a2a9b5;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 10px;
    text-decoration: none;
}

    .link-topo:hover, .link-topo:focus {
        color: #337ab7;
        text-decoration: none;
    }

@media (max-width: 991px) {
    .link-topo {
        display: none;
    }
}