/* ===========================================================================
   PÁGINAS INTERNAS: FAIXA DO TOPO COM O TÍTULO E A TRILHA, E O TEXTO DENTRO DELA.
   =========================================================================== */

/* ---- TOPO: FAIXA CLARA COM O <h1> E A TRILHA ----------------------------------
   O VÉU BRANCO A 30% FICA ENTRE O FUNDO E O TEXTO. A TRILHA TEM UM ">" ENTRE OS
   ITENS; O ÚLTIMO (A PÁGINA ATUAL) EM PRETO. */

.topo-interno {
    position: relative;
    z-index: 8;
    margin-bottom: 120px;
    padding: 110px 0;
    background-color: var(--fundo-claro);
}

.topo-interno::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .3);
}

.topo-interno--colado {
    margin-bottom: 0;
}

.topo-interno__titulo {
    font-size: 36px;
    line-height: 1.2;
}

.trilha li {
    position: relative;
    display: inline-block;
    margin-right: 30px;
    font-weight: 700;
}

.trilha li:last-child {
    margin-right: 0;
    color: #000;
}

.trilha__casa {
    color: var(--verde);
}

.trilha__seta {
    position: absolute;
    top: 50%;
    right: -20px;
    height: 10px;
    transform: translateY(-50%);
}

@media (max-width: 1199px) { .topo-interno__titulo { font-size: 30px; } }
@media (max-width: 991px)  { .topo-interno__titulo { font-size: 26px; } }
@media (max-width: 767px)  { .topo-interno__titulo { font-size: 24px; } .trilha li { font-size: 14px; } }

/* ---- TEXTO DENTRO DA FAIXA DO TOPO (PROCEDIMENTO PARA ALUGAR) ------------------- */

.procedimento {
    margin-top: 3rem;
    padding: 1.5rem;
    border-radius: .25rem;
}