/* Configurações de Base */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.8;
    color: #333;
    background-color: #f4f4f4;
}


/* Container do Carrossel */
#carouselNoticia {
    max-width: 100%;
    margin: 20px auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
/* Ajuste das Imagens */
.scaled {
    width: 100%;
    height: 450px; /* Altura ideal para desktop */
    object-fit: cover; /* Faz a imagem preencher o espaço sem esticar */
    transition: transform 0.3s ease;
}

/* Ajuste para Celulares (Responsividade) */
@media (max-width: 768px) {
    .scaled {
        height: 250px; /* Altura menor para telas pequenas */
    }
}

/* Sombra e acabamento */
.shadow {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}
#carouselNoticia {
    margin-bottom: 30px; /* Cria um espaço entre as fotos e o texto abaixo */
}


/* BARRA DE PROGRESSO */
.progress-container {
    position: fixed;
    top: 0;
    z-index: 1001;
    width: 100%;
    height: 5px;
    background: rgba(204, 204, 204, 0.3);
}

.sem-recuo {
    text-indent: 0 !important;
}



/* Estilo para Slides em Tela Cheia */
.full-screen-img {
    width: 100vw;
    height: 100vh;
    object-fit: contain; /* Mantém a proporção da imagem sem cortar o conteúdo informativo */
    background-color: #000; /* Fundo preto para preencher se a foto for menor que a tela */
}

/* Garante que o carrossel ocupe tudo */
#carouselFundoGreve {
    width: 100vw;
    height: 100vh;
}




p { 
    margin-bottom: 20px; 
    font-size: 1.2rem; 
    text-align: left; 
    text-indent: 2em; /* Isso cria o recuo no início do parágrafo */
}

@media (max-width: 600px) {
    p { 
        text-indent: 1.5em; /* Um pouco menor no celular para ganhar espaço */
    }
}



.progress-bar {
    height: 5px;
    background: #d32f2f; /* Cor de destaque do Sindicato */
    width: 0%;
}

/* BOTÃO VOLTAR FIXO */
.btn-fixo-voltar {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 1000;
    background-color: #000 !important; /* Força a cor preta */
    color: #fff !important;            /* Força o texto branco */
    padding: 12px 25px;
    text-decoration: none !important;  /* Remove o sublinhado do Bootstrap */
    border-radius: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-fixo-voltar:hover {
    background-color: #d32f2f !important; /* Cor ao passar o mouse */
    color: #fff !important;
    text-decoration: none !important;
}
/* CONTAINER DE CONTEÚDO */
.article-container {
    max-width: 720px; /* Largura ideal para leitura no Desktop */
    margin: 0 auto;
    background: #fff;
    padding: 80px 30px;
    min-height: 100vh;
    box-sizing: border-box;
}

.main-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 35px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* TIPOGRAFIA */
h1 { font-size: 2.2rem; line-height: 1.2; color: #cc2171; margin-bottom: 25px; font-weight: 800; }
h3 { font-size: 1.5rem; margin-top: 40px; color: #d32f2f; border-bottom: 2px solid #f4f4f4; padding-bottom: 10px; }
h4 { font-size: 1.2rem; margin-top: 25px; color: #444; font-weight: 700; }
p { margin-bottom: 20px; font-size: 1.2rem; text-align: left; }

/* AJUSTES PARA CELULAR */
@media (max-width: 600px) {
    .article-container {
        padding: 60px 20px;
    }
    h1 { font-size: 1.8rem; }
    p { font-size: 1.1rem; }
    .btn-fixo-voltar {
        bottom: 20px;
        left: 20px;
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}