/*
 * Títulos de seção usados na home e nas páginas:
 * "chapéu" vermelho pontilhado (.secao-chapeu), título grande (.secao-titulo)
 * e texto de apoio (.secao-apoio).
 */

.secao-chapeu,
.secao-chapeu:last-child {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    color: var(--bgs-vermelho-titulo);
    font-family: var(--bgs-fonte-roboto);
    text-transform: uppercase;
}

.secao-chapeu::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px dotted var(--bgs-texto);
}

/* Variação sobre fundo escuro/colorido: texto branco e traço curto claro */
.secao-chapeu--claro {
    color: var(--bgs-branco);
}

.secao-chapeu--claro::before {
    width: 200px;
    border-bottom-color: var(--bgs-cinza-claro);
}

.secao-titulo {
    margin-top: 30px;
    margin-bottom: 0;
    padding-bottom: 10px; /* mesmo respiro de um <p> */
    color: inherit;
    font-family: var(--bgs-fonte-titulo);
    font-size: 42px;
    font-weight: normal;
    line-height: 1.2;
    text-transform: uppercase;
}

.secao-titulo:last-child {
    padding-bottom: 0;
}

.secao-apoio {
    font-family: var(--bgs-fonte-roboto);
    font-size: 18px;
}

@media (max-width: 1200px) {
    .secao-titulo {
        font-size: 36px;
    }
}