/* ======================================================================
   BLOCO 1 - POSICIONAMENTO SEM INTERFERIR NOS SUBMENUS
   ====================================================================== */
.cabecalho,
.rodape {
    position: relative;
}
/* BLOCO 1.1 - DESATIVAR OS CANTOS DA VERSAO ANTERIOR */
.cabecalho::before,
.rodape::after {
    content: none;
}
/* ======================================================================
   BLOCO 2 - DUAS CORES JUNTAS, FINAS E DISCRETAS
   Cabeçalho: canto superior direito. Rodapé: canto inferior esquerdo.
   Inclinação conforme a última prévia aprovada.
   ====================================================================== */
.cabecalho::after,
.rodape::before {
    content: "";
    position: absolute;
    width: 54px;
    height: 54px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(135deg, transparent 0 35%, #168747 35% 40%, #edc542 40% 45%, transparent 45% 100%);
    transform: scaleX(-1);
}
/* BLOCO 2.1 - CABECALHO */
.cabecalho::after {
    top: 0;
    right: 0;
}
/* BLOCO 2.2 - RODAPE */
.rodape::before {
    bottom: 0;
    left: 0;
}
/* ======================================================================
   BLOCO 3 - AJUSTE PARA CELULAR
   ====================================================================== */
@media (max-width: 600px) {
    .cabecalho::after,
    .rodape::before {
        width: 34px;
        height: 34px;
    }
}