/* Bloco cabeçalho */
     .cabpi {
        width: 100%; /* Largura total */
        height: 140px; /* Altura fixa, de acordo com a imagem */
        background-image: url('http://site.trt19.jus.br/sites/default/files/bancoMidias/46303.png'); /* Caminho para a imagem */
        background-size: cover; /* Faz a imagem cobrir toda a área */
        background-position: center; /* Centraliza a imagem */
        background-repeat: no-repeat; /* Evita repetição da imagem */        
        margin-bottom: 20px;
       }

        /* Bloco principal (bloco1) */
        

     .bloco1 {
            width: 90%; /* O bloco ocupa 90% da largura da tela */
            margin: 0 auto; /* Centralizado */
            display: flex; /* As colunas ficam lado a lado */
            justify-content: space-between; /* Espaçamento uniforme entre as colunas */
            align-items: center; /* Centraliza o conteúdo verticalmente */
        }

        /* Estilo das colunas */
        .bloco1 .coluna {
            width: 177px;
            height: 77px;
            background-color: #cccccc; /* Fundo cinza médio */
            display: flex; /* Para centralizar o texto */
            justify-content: center; /* Centraliza horizontalmente */
            align-items: center; /* Centraliza verticalmente */
            text-align: center;
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: bold;
            color: #0000ff; /* Texto azul */
            border-radius: 5px; /* Bordas arredondadas */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombras sutis */
            margin-right: 10px;
        }

        /* Estilo de links */
        .bloco1 .coluna a {
            text-decoration: none; /* Remove sublinhado */
            color: #0067a0; /* Azul */
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .bloco1 {
                flex-direction: column; /* Colunas viram linhas */
                gap: 10px; /* Espaçamento entre "linhas" */
            }

            .bloco1 .coluna {
                width: 100%; /* As colunas ocupam toda a largura do bloco */
            }
        }

 /* Bloco Geral */
        .blocpi2 {
            width: 60%; /* O bloco ocupa 40% da largura da tela */
            margin: 0 auto; /* Centralizado horizontalmente */
            display: flex;
            flex-direction: column; /* As linhas são organizadas verticalmente */
            gap: 20px; /* Espaçamento entre as linhas */
        }

        /* Linhas */
        .blocpi2 .linha {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Estilos das colunas */
        .blocpi2 .coluna {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: bold;
            color: #ffffff; /* Cor branca padrão */
            border-radius: 8px; /* Bordas arredondadas */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            text-decoration: none; /* Remove sublinhado dos links */
        }

        .blocpi2 .coluna a {
            color: inherit; /* Herda a cor da coluna */
            text-decoration: none; /* Remove sublinhado */
        }

        /* Primeira linha */
        .blocpi2 .linha1 .coluna {
            width: 146px;
            height: 96px;
            background-color: #103e66; /* Fundo azul escuro */
        }

        /* Segunda linha */
        .blocpi2 .linha2 .coluna1, 
        .blocpi2 .linha2 .coluna3 {
            display: flex;
            flex-direction: column;
            gap: 10px; /* Espaço entre os blocos empilhados */
        }
        .blocpi2 .linha2 .coluna1 .bloco, 
        .blocpi2 .linha2 .coluna3 .bloco {
            width: 146px;
            height: 96px;
            background-color: #103e66; /* Fundo azul escuro */
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px; /* Bordas arredondadas */
        }
        .blocpi2 .linha2 .coluna2 {
            width: 303px;
            height: 191px;
            background-color: #ffd700; /* Fundo amarelo */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px; /* Espaço entre os textos */
            color: #000000; /* Texto preto */
            border-radius: 8px; /* Bordas arredondadas */
        }
        .blocpi2 .linha2 .coluna2 .texto-grande {
            font-size: 42px; /* Texto maior para 'TRT 19' */
            font-weight: bold;
        }
        .blocpi2 .linha2 .coluna2 .texto-pequeno {
            font-size: 14px; /* Texto menor abaixo */
        }

        /* Terceira linha */
        .blocpi2 .linha3 .coluna {
            width: 461px;
            height: 96px;
            background-color: #103e66; /* Fundo azul escuro */
            color: #ffffff; /* Texto branco */
            border-radius: 8px; /* Bordas arredondadas */
        }

        /* Distância entre as colunas da terceira linha */
        .blocpi2 .linha3 .coluna1 {
            margin-right: 5px; /* Margem à direita */
        }
        .blocpi2 .linha3 .coluna2 {
            margin-left: 5px; /* Margem à esquerda */
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .blocpi2 {
                width: 90%; /* Em telas menores, o bloco ocupa 90% da largura */
            }
            .blocpi2 .linha {
                flex-direction: column; /* Colunas viram linhas */
                gap: 10px;
            }
            .blocpi2 .linha2 .coluna2 {
                width: 100%; /* Coluna central ocupa a largura toda */
            }
        }
        .pilarlinha3 {
            width: 100%; /* Largura total */
            max-width: 1055px; /* Largura máxima da imagem original */
            height: 112px; /* Altura definida igual à altura da imagem */
            background-image: url('http://site.trt19.jus.br/sites/default/files/bancoMidias/46305.png'); /* Caminho para a imagem */
            background-size: cover; /* Ajusta para cobrir a div */
            background-position: center; /* Centraliza a imagem */
            background-repeat: no-repeat; /* Evita repetição da imagem */
            margin: 0 auto; /* Centraliza a div horizontalmente */
            
        }

       
        /* Bloco Geral */
        .piconceitos {
            width: 80%; /* O bloco ocupa 50% da largura da tela */
            margin: 0 auto; /* Centralizado horizontalmente */
            display: flex;
            justify-content: space-between; /* Espaçamento uniforme entre colunas */
            gap: 20px; /* Aumentar o espaçamento entre as colunas */
        }

        /* Colunas */
        .piconceitos .coluna {
            flex: 1; /* Faz com que todas as colunas tenham a mesma largura */
            max-width: 23%; /* Cada coluna ocupa 23% da largura do bloco */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border-radius: 15px; /* Bordas arredondadas */
            border: 4px solid; /* Bordas mais grossas */
            font-family: Arial, sans-serif;
            font-size: 14px; /* Fonte menor que o default */
            padding: 15px; /* Espaço interno */
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); /* Sombras mais pronunciadas */
        }

        /* Cores das bordas */
        .piconceitos .coluna.azul {
            border-color: blue;
        }
        .piconceitos .coluna.amarelo {
            border-color: yellow;
        }
        .piconceitos .coluna.verde {
            border-color: green;
        }
        .piconceitos .coluna.cinza {
            border-color: #696969; /* Cinza médio */
        }

        /* Primeira div nas colunas */
        .piconceitos .coluna .primeira-div {
            width: 100%;
            padding: 10px; /* Espaçamento interno maior */
            color: white; /* Texto branco */
            font-size: 18px; /* Fonte maior */
            font-weight: bold;
            border-radius: 10px; /* Bordas arredondadas */
            margin-bottom: 10px; /* Espaçamento entre as divs internas */
        }

        /* Fundo para cada div de acordo com a borda */
        .piconceitos .coluna.azul .primeira-div {
            background-color: blue;
        }
        .piconceitos .coluna.amarelo .primeira-div {
            background-color: yellow;
            color: black; /* Texto preto para contraste */
        }
        .piconceitos .coluna.verde .primeira-div {
            background-color: green;
        }
        .piconceitos .coluna.cinza .primeira-div {
            background-color: #696969; /* Cinza médio */
        }

        /* Segunda div nas colunas */
        .piconceitos .coluna .segunda-div {
            padding: 10px; /* Espaçamento interno */
            font-size: 14px; /* Fonte ligeiramente menor */
            line-height: 1.5; /* Melhor espaçamento entre linhas */
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .piconceitos {
                 flex-direction: column;
            }
            .piconceitos .coluna {
                width: 96%; /* Colunas ocupam quase toda a largura em telas menores */
                margin-bottom: 15px; /* Espaço entre as colunas */
            }
        }


        @media (max-width: 768px) {
           .piconceitos .linha {
           flex-direction: column;
       }

      
     .piconceitos .coluna {
      flex: 1;
      max-width: 100%;
  }
    

  .piconceitos .titulo {
    margin-bottom: 10px;
  }
}


        .pilarespi {
            width: 100%; /* O bloco ocupa 90% da largura da tela */
            margin: 0 auto; /* Centralizado */
            display: flex;
            flex-direction: column; /* Linhas empilhadas */
            gap: 20px; /* Espaçamento entre as linhas */
        }

.pilarlinha1 {
    width: 100%; /* Largura total */
    max-width: 1055px; /* Largura máxima igual à largura original da imagem */
    height: 197px; /* Altura definida igual à altura da imagem */
    background-image: url('http://site.trt19.jus.br/sites/default/files/bancoMidias/46304.png'); /* Caminho para a imagem */
    background-size: cover; /* Faz a imagem cobrir a área da div */
    background-position: center; /* Centraliza a imagem no fundo */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    margin: 0 auto; /* Centraliza a div horizontalmente */   
}



        /* Linha 1 */
        .pilarespi .pilarlinha1,
        .pilarespi .pilarlinha3 {
            display: flex;
            justify-content: center; /* Centraliza a imagem */
            align-items: center;
        }

        .pilarespi .pilarlinha1 img,
        .pilarespi .pilarlinha3 img {
            width: 100%; /* Imagens ocupam toda a largura */
            max-width: 1055px; /* Limita a largura máxima */
            height: auto; /* Ajusta proporcionalmente */
        }

        /* Linha 2 */
        .pilarespi .pilarlinha2 {
            display: flex; /* Colunas lado a lado */
            justify-content: space-between; /* Espaçamento igual entre as colunas */
            gap: 10px;
        }

        /* Estilo comum para colunas */
        .pilarespi .pilarlinha2 .coluna {
            flex: 1; /* Cada coluna ocupa espaço igual */
            height: 223px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-family: Arial, sans-serif;
            font-size: 16px;
            font-weight: bold;
            color: white; /* Cor padrão do texto */
            border-radius: 8px; /* Bordas arredondadas */
        }

        /* Estilos específicos das colunas */
        .pilarespi .coluna1 { background-color: #00274d; } /* Azul escuro */
        .pilarespi .coluna2 { background-color: #ffcc00; color: black; } /* Amarelo, texto preto */
        .pilarespi .coluna3 { background-color: #008000; color: black; } /* Amarelo, texto preto */
        .pilarespi .coluna4 { background-color: #4f4f4f; } /* Cinza escuro */
        .pilarespi .coluna5 { background-color: #ff6600; } /* Laranja */

        /* Responsividade */
        @media (max-width: 768px) {
            .pilarespi .pilarlinha2 {
                flex-direction: column; /* Colunas viram linhas */
            }

            .pilarespi .pilarlinha2 .coluna {
                margin-bottom: 10px; /* Espaçamento entre "colunas" */
                padding: 20px;
            }
        }  

 /* Estilo do bloco geral */
        .canaisdenuncia {
            width: 100%; /* Bloco ocupa 50% da largura */
            margin: 0 auto; /* Centraliza o bloco */          
            border-radius: 15px; /* Bordas arredondadas */
            padding: 20px; /* Espaçamento interno */
            background-color: #f9f9f9; /* Cor de fundo para o bloco */
            display: flex;
            flex-direction: column;
            gap: 20px; /* Espaço entre as linhas */
        }

        /* Estilo para cada linha */
        .linha {
            display: flex;
            justify-content: space-between; /* Espaçamento uniforme entre as colunas */
            gap: 20px; /* Espaço entre as colunas */
        }

        /* Estilo para cada coluna */
        .coluna {
            flex: 1; /* As colunas ocupam a largura disponível igualmente */
            display: flex;
            flex-direction: column;
        }

        /* Alinhamento da primeira coluna (centralizado) */
        .coluna.centralizado {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-weight: bold;
            background-color: #e0e0e0; /* Fundo cinza claro */
            padding: 10px;
            border-radius: 5px; /* Bordas arredondadas para a primeira coluna */
        }

        /* Estilo para a segunda coluna (alinhado à esquerda) */
        .coluna.alinhado-esquerda {
            text-align: left;
            padding-left: 20px; /* Alinhamento à esquerda com padding */
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .canaisdenuncia {
                width: 96%; /* O bloco ocupa 96% da tela no mobile */
            }

            .linha {
                flex-direction: column; /* Colunas se empilham em dispositivos móveis */
            }

            .coluna {
                width: 100%; /* Cada coluna ocupa 100% da largura */
            }
        }

.normativospi {
  width: 94%;
  margin: 0 auto; /* Isso vai centralizar o bloco na tela */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.normativo-linha {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
 
  border-radius: 15px;
  padding: 15px;
  background-color: #f9f9f9;
}

.linkNormativo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.linkNormativo a {
  text-decoration: none;
  color: #0064a2;
  font-weight: bold;
}

.objetoNormativo {
  flex: 2;
  padding-left: 20px;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .normativo-linha {
    flex-direction: column;
  }

  .linkNormativo,
  .objetoNormativo {
    flex: 1 1 96%;
    margin-bottom: 10px;
  }
}

.coluna-link1 {
    text-decoration: none; /* Remove sublinhado do link */
    color: #f3f3f9; /* Mantém a cor do texto */
}

.coluna-link2 {
    text-decoration: none; /* Remove sublinhado do link */
    color:  #00274; /* Mantém a cor do texto */
}
.coluna-link3 {
    text-decoration: none; /* Remove sublinhado do link */
    color: #f3f3f9; /* Mantém a cor do texto */
}

.coluna-link4 {
    text-decoration: none; /* Remove sublinhado do link */
    color:  #f3f3f9; /* Mantém a cor do texto */
}
.coluna-link5 {
    text-decoration: none; /* Remove sublinhado do link */
    color:  #f3f3f9; /* Mantém a cor do texto */
}

.linha-inteira {
    display: flex; /* Define um contêiner flexível */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    width: 100%; /* Ocupa toda a largura da linha */
    overflow: hidden; /* Garante que nada fora da div seja exibido */
    margin: 0; /* Remove margens externas */
    margin-bottom: 40px;
}

.coluna-unica {
    text-align: center; /* Centraliza o conteúdo da coluna horizontalmente */
}

.coluna-unica img {
    width: 90%; /* Reduz o tamanho da imagem para 70% do original */
    height: auto; /* Mantém a proporção da imagem */
    display: block; /* Garante o comportamento adequado no alinhamento */
    margin: auto; /* Centraliza a imagem horizontalmente dentro da coluna */
}