html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    /* Impede estritamente a rolagem lateral */
    box-sizing: border-box;
}

.revelar-ao-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 1.2s cubic-bezier(0.215, 0.610, 0.355, 1),
        opacity 1.2s cubic-bezier(0.215, 0.610, 0.355, 1);
    will-change: transform, opacity;
}

.revelar-ao-scroll.visivel {
    opacity: 1;
    transform: translateY(0);
}

.grid-cards .card:nth-child(1) {
    transition-delay: 0.1s;
}

.grid-cards .card:nth-child(2) {
    transition-delay: 0.25s;
}

.grid-cards .card:nth-child(3) {
    transition-delay: 0.4s;
}

.grid-cards .card:nth-child(4) {
    transition-delay: 0.55s;
}

/* ------------------------------------
   PALETA DE CORES E VARIÁVEIS MODERNAS
--------------------------------------- */
:root {
    --verde-escuro: #1C3332;
    --verde-sutil: #2d4f4e;
    --dourado-bronze: #C49E7A;
    --dourado-hover: #b38d69;
    --fundo-claro: #F4F6F6;
    --branco: #FFFFFF;
    --texto-escuro: #2C3E50;
    --texto-mutado: #7F8C8D;
    --sombra-suave: 0 10px 30px rgba(0, 0, 0, 0.05);
    --sombra-hover: 0 15px 35px rgba(28, 51, 50, 0.12);
    --transicao: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --borda-raio: 12px;
}

/* ------------------------------------
   RESET E ESTILOS GERAIS
--------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

body {
    background-color: var(--fundo-claro);
    color: var(--texto-escuro);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    transition: var(--transicao);
}

/* ==========================================================================
   ESTILOS DO MODO ESCURO (DARK MODE) - CORREÇÃO COMPLETA DAS PÁGINAS INTERNAS
   ========================================================================== */

body.dark-mode {
    --fundo-claro: #0A1111;
    /* Fundo da tela profundo e moderno */
    --branco: #152726;
    /* Fundo dos cards e informativos: verde oficial nítido */
    --texto-escuro: #FFFFFF;
    /* Força o texto principal a ficar 100% branco */
    --texto-mutado: #CAD6D6;
    /* Parágrafos e descrições em cinza-claro muito legível */
    --sombra-suave: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* --- FORÇAR CORES NOS TEXTOS INTERNOS DE TODOS OS CARDS (HOME E MURAL) --- */
body.dark-mode .card h3,
body.dark-mode .card-noticia-longa h3 {
    color: #FFFFFF !important;
    /* Deixa os títulos dos cards totalmente brancos e visíveis */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.dark-mode .card p,
body.dark-mode .texto-completo p,
body.dark-mode .texto-completo strong {
    color: #CAD6D6 !important;
    /* Deixa a descrição interna clara e confortável para leitura */
}

/* Garante que os metadados (como a data da publicação com o ícone de calendário) fiquem visíveis */
body.dark-mode .meta-noticia,
body.dark-mode .data-publicacao {
    color: #A0B2B2 !important;
}

/* --- TÍTULOS DE SEÇÕES (MURAL DE COMUNICADOS, FINANCEIRO...) --- */
body.dark-mode .titulo-secao {
    color: var(--dourado-bronze) !important;
}

/* --- ADAPTAÇÃO DAS TAGS / BADGES SUPERIORES (MANUTENÇÃO, ASSEMBLEIA...) --- */
body.dark-mode .tag-financeiro,
body.dark-mode .badge-categoria,
body.dark-mode .badge-contatos-uteis,
body.dark-mode .meta-noticia span {
    background-color: rgba(196, 158, 122, 0.15) !important;
    /* Fundo dourado sutil */
    color: var(--dourado-bronze) !important;
    /* Texto dourado legível */
    border: 1px solid rgba(196, 158, 122, 0.3) !important;
}

/* --- CONFIGURAÇÃO DA NAVBAR SUPERIOR --- */
body.dark-mode .cabecalho {
    background-color: #060B0B;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

body.dark-mode .menu-navegacao a {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-mode .menu-navegacao a:hover {
    color: var(--dourado-bronze) !important;
}

/* --- BOTÕES DOS CARDS --- */
body.dark-mode .btn-acao,
body.dark-mode .btn-slide-noticia {
    background-color: var(--dourado-bronze) !important;
    color: #0A1111 !important;
    font-weight: 700;
    transition: var(--transicao);
}

body.dark-mode .btn-acao:hover,
body.dark-mode .btn-slide-noticia:hover {
    background-color: #FFFFFF !important;
    /* Fundo vira branco para brilhar no escuro */
    color: #0A1111 !important;
    /* Mantém o texto escuro legível */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

/* Variação específica para cards de documentos */
body.dark-mode .card-documento .btn-acao {
    background-color: transparent !important;
    color: var(--dourado-bronze) !important;
    border: 2px solid var(--dourado-bronze) !important;
}

body.dark-mode .card-documento .btn-acao:hover {
    background-color: #FFFFFF !important;
    /* Preenche de branco ao passar o mouse */
    color: #0A1111 !important;
    /* Letra fica escura */
    border-color: #FFFFFF !important;
}

/* --- ESTILIZAÇÃO DO BOTÃO ALTERNADOR DA NAVBAR --- */
.btn-toggle-dark {
    background: transparent;
    border: 1px solid var(--dourado-bronze);
    color: var(--dourado-bronze);
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-weight: 600;
}

.btn-toggle-dark i {
    font-size: 1.1rem;
}

.btn-toggle-dark:hover {
    color: #FFFFFF;
    border-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .btn-toggle-dark {
    border-color: #FFFFFF;
    color: #FFFFFF;
}

/* --- AJUSTES DO CARROSSEL --- */
body.dark-mode .slide-conteudo {
    background-color: rgba(21, 39, 38, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .slide-conteudo h1,
body.dark-mode .slide-conteudo h2,
body.dark-mode .slide-conteudo p {
    color: #FFFFFF !important;
}

.item-menu-dark {
    background: transparent;
    border: none;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    transition: var(--transicao);

    /* Configuração idêntica aos links para empilhar o ícone */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    white-space: nowrap;
    position: relative;
}

/* Cor do ícone e texto no modo claro padrão */
.item-menu-dark {
    color: rgba(255, 255, 255, 0.85);
}

.item-menu-dark i {
    font-size: 1.1rem;
}

/* Efeito de hover idêntico ao dos seus links */
.item-menu-dark:hover {
    color: var(--branco);
}

/* Cria a barrinha dourada embaixo ao passar o mouse */
.item-menu-dark::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--dourado-bronze);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.item-menu-dark:hover::after {
    width: 80%;
}

/* --- COMPORTAMENTO DA COR DA NAVBAR NO MODO ESCURO ATIVO --- */
body.dark-mode .item-menu-dark {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-mode .item-menu-dark:hover {
    color: var(--dourado-bronze) !important;
}

body.dark-mode .titulo-categoria {
    color: #FFFFFF !important;
    /* Títulos das subcategorias brancos */
}

body.dark-mode .card p a {
    color: var(--dourado-bronze) !important;
    /* Telefones em dourado no modo dark */
}

/* --- CORREÇÃO DO MODAL DE INSTRUÇÕES (MODO ESCURO) --- */
body.dark-mode .modal-boas-vindas-conteudo {
    background-color: #152726 !important;
    /* Aplica o verde oficial nos cards do modal */
}

body.dark-mode .modal-boas-vindas-body h3 {
    color: var(--dourado-bronze) !important;
}

body.dark-mode .modal-boas-vindas-body ul li {
    color: #CAD6D6 !important;
}

body.dark-mode .modal-boas-vindas-body ul li strong {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body.dark-mode .modal-boas-vindas-body p,
body.dark-mode .modal-boas-vindas-body ul li {
    color: #E2E8F0 !important;
    font-weight: 400;
}

/* --- CORREÇÃO DO FORMULÁRIO FALE CONOSCO (MODO ESCURO) --- */
body.dark-mode .card-fale-conosco {
    background-color: #152726 !important;
}

body.dark-mode .grupo-campo label {
    color: #FFFFFF !important;
    /* Deixa os nomes dos campos legíveis */
}

body.dark-mode .grupo-campo input,
body.dark-mode .grupo-campo textarea {
    background-color: #0A1111 !important;
    /* Fundo interno do input escuro */
    color: #FFFFFF !important;
    /* Texto digitado em branco */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- CORREÇÃO DO CABEÇALHO DO MODAL (MODO ESCURO) --- */
body.dark-mode .modal-boas-vindas-header {
    background-color: #060B0B !important;
    /* Fundo escuro profundo para o cabeçalho */
    border-bottom: 3px solid var(--dourado-bronze) !important;
}

body.dark-mode .modal-boas-vindas-header h2 {
    color: #FFFFFF !important;
    /* Força o título principal a ficar totalmente branco */
}

body.dark-mode .botao-fechar-instrucoes,
body.dark-mode .botao-fechar-encomendas {
    color: #FFFFFF !important;
    /* Força o botão X a ficar branco */
}

body.dark-mode .btn-acao,
body.dark-mode .card .btn-acao,
body.dark-mode .card-documento .btn-acao {
    background-color: var(--dourado-bronze) !important;
    color: #0A1111 !important;
    /* Texto escuro para dar contraste com o fundo dourado */
    border: none !important;
    font-weight: 700 !important;
}

body.dark-mode .btn-acao:hover,
body.dark-mode .card .btn-acao:hover {
    background-color: #dddcda !important;
    color: #0A1111 !important;
    /* Texto vira branco ao passar o mouse */
}

body.dark-mode .btn-acao {
    background-color: var(--dourado-bronze) !important;
    color: #0A1111 !important;
    /* Texto escuro para forte contraste sobre o bronze */
    font-weight: 700 !important;
    border: none !important;
    transition: var(--transicao) !important;
}

/* Botões com efeito de borda animada (.btn-acao-boas-vindas) */
body.dark-mode .btn-acao-boas-vindas {
    color: #0A1111 !important;
    /* Texto escuro para contrastar no fundo branco */
    background-color: transparent !important;
}

/* Ajusta o fundo da capa interna (::after) para a mesma cor escura do card */
body.dark-mode .btn-acao-boas-vindas::after {
    background-color: #FFFFFF !important;
    /* Miolo do botão fica 100% branco */
}

/* Ajusta o efeito de rotação/gradiente para usar cores nítidas no Modo Escuro */
body.dark-mode .btn-acao-boas-vindas::before {
    background: conic-gradient(var(--dourado-bronze) 0deg,
            var(--dourado-bronze) 60deg,
            transparent 120deg,
            transparent 360deg) !important;
}

/* Comportamento ao passar o mouse (Hover) no botão com efeito */
body.dark-mode .btn-acao-boas-vindas:hover {
    color: #FFFFFF !important;
    /*Cor letra ao passar o mouse*/
}

body.dark-mode .btn-acao-boas-vindas:hover::after {
    background-color: var(--dourado-bronze) !important;
}

/* ------------------------------------
   CABEÇALHO (NAVBAR MODERNA)
--------------------------------------- */
.cabecalho {
    background-color: var(--verde-escuro);
    padding: 1.2rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.container-header {
    max-width: 1200px;
    margin: 0 auto;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    /* Distribui logo na esquerda, busca no centro e botão na direita */
    align-items: center !important;
    /* Alinha todos os elementos perfeitamente pelo centro vertical */
    gap: 20px;
    /* Evita que os elementos batam um no outro em telas menores */
    width: 100%;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-img {
    height: 45px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
    background-color: rgb(245, 241, 241);
}

.logo-titulo {
    color: var(--branco);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.logo-titulo span {
    color: var(--dourado-bronze);
}

.menu-navegacao {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.menu-navegacao a {
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    font-size: 0.85rem;
    /* font-weight: 500; */
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    white-space: nowrap;
}

.menu-navegacao a i {
    font-size: 1.1rem;
}

.menu-navegacao a:hover {
    color: var(--branco);
    background-color: transparent;
}

.menu-navegacao a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--dourado-bronze);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.menu-navegacao a:hover::after {
    width: 80%;
}

/* ------------------------------------
   CARROSSEL TOTALMENTE VISÍVEL E CLARO
--------------------------------------- */
.carrossel-container {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    /* background-color: #FFFFFF !important;  */
    background-color: var(--verde-escuro) !important;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
    padding: 0 2rem;
}

.slide.ativo {
    opacity: 1 !important;
    z-index: 2;
}

.slide-background img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Alinha a imagem totalmente à esquerda e centraliza na vertical */
    object-position: left center;
    z-index: -1;
}

.slide-conteudo {
    position: relative;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.96);
    padding: 2.5rem 3.5rem;
    border-radius: 14px;
    max-width: 680px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(30px);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-conteudo h1,
.slide-conteudo h2 {
    color: var(--verde-escuro) !important;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
    text-shadow: none !important;
}

.slide-conteudo h1 span {
    color: var(--dourado-bronze);
}

.slide-conteudo p {
    color: #4A5568 !important;
    font-size: 1.1rem;
    font-weight: 500;
    text-shadow: none !important;
}

.slide.ativo .slide-conteudo {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.btn-slide-noticia {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.2rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--verde-escuro);
    color: var(--branco);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transicao);
}

.btn-slide-noticia:hover {
    background-color: var(--dourado-bronze);
    color: var(--branco);
    transform: translateX(4px);
}

/* --- ESTILO DAS IMAGENS DENTRO DOS COMUNICADOS --- */
.imagem-noticia {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- ESTILOS DO POP-UP DE IMAGEM (MODAL) --- */
.modal-noticia-preview {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(28, 51, 50, 0.95);
    backdrop-filter: blur(8px);
}

.modal-conteudo-wrapper {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    height: 80vh;
}

.modal-imagem-expandida {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    animation: zoomEfeitoIn 0.3s ease;
    touch-action: pinch-zoom;
}

/* Legenda do documento abaixo da foto */
#modal-legenda {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: var(--dourado-bronze);
    padding: 15px 0;
    font-weight: 600;
}

/* Botão Fechar (X) */
.botao-fechar-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.botao-fechar-modal:hover,
.botao-fechar-modal:focus {
    color: var(--dourado-bronze);
}

/* Animação suave de abertura */
@keyframes zoomEfeitoIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- BARRA DE PROGRESSO TEMPORAL --- */
.carrossel-progresso {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 10;
}

.barra-progresso {
    width: 0%;
    height: 100%;
    background-color: var(--dourado-bronze);
    transition: width 5s linear;
}

/* --- INDICADORES DE NAVEGAÇÃO --- */
.carrossel-indicadores {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.indicador {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: var(--transicao);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.indicador.ativo {
    background-color: var(--dourado-bronze);
    transform: scale(1.2);
    width: 24px;
    /* Transforma a bolinha ativa em um traço moderno */
    border-radius: 6px;
}

/* ------------------------------------
   CONTEÚDO E SEÇÕES DO PAINEL
--------------------------------------- */
main,
.conteudo-principal,
#contatos-secao,
div[style*="display: grid"],
main>div {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box !important;
}

.secao {
    margin-bottom: 5rem;
}

.titulo-secao {
    color: var(--verde-escuro);
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.5px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.titulo-secao::after {
    content: '';
    flex-grow: 1;
    height: 2px;
    background: linear-gradient(to right, var(--dourado-bronze), rgba(196, 158, 122, 0.1));
}

/* GRID DE CARDS */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
}

.card {
    background-color: var(--branco);
    padding: 2.5rem 2rem;
    border-radius: var(--borda-raio);
    box-shadow: var(--sombra-suave);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* transition: var(--transicao); */
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.03);
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--verde-escuro);
    transition: var(--transicao);
}

.card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 40px rgba(28, 51, 50, 0.08);
}

.card:hover::before {
    background-color: var(--dourado-bronze);
    height: 6px;
}

.card h3 {
    color: var(--verde-escuro);
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.card p {
    color: var(--texto-mutado);
    font-size: 0.98rem;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.card-imagem-topo {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.card-imagem-topo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transicao);
}

.card:hover .card-imagem-topo img {
    transform: scale(1.05);
}

.tag-financeiro {
    align-self: flex-start;
    background-color: rgba(28, 51, 50, 0.08);
    color: var(--verde-escuro);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

.badge-categoria {
    align-self: flex-start;
    background-color: rgba(28, 51, 50, 0.08);
    color: var(--verde-escuro);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

.badge-contatos-uteis {
    align-self: flex-start;
    background-color: rgba(28, 51, 50, 0.08);
    color: var(--verde-escuro);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

.card-contato-uteis {
    max-width: 400px;
    margin: 0 auto;
}

.card-conteudo-simples {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
}

.card-conteudo-simples p {
    flex-grow: 1 !important;
    margin-bottom: 2rem !important;
}

.bloco-telefones {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 1rem;
}

.lista-numeros {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.email-contato {
    margin-top: 0;
    margin-bottom: 1.5rem;
    word-break: break-all;
}

.data-publicacao {
    font-size: 0.85rem;
    color: var(--texto-mutado);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-boleto-unico {
    max-width: 400px;
    margin: 0 auto;
}

/* ------------------------------------
   BOTÕES E AÇÕES ULTRA VISUAIS
--------------------------------------- */
body.dark-mode .btn-acao,
body.dark-mode .card .btn-acao,
body.dark-mode .card-documento .btn-acao,
.btn-acao {
    /* Força o botão a ir para o rodapé do card, independente do texto acima */
    margin-top: auto !important;

    background-color: var(--verde-escuro);
    color: var(--branco);
    padding: 0.9rem 1.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    display: block;
    width: 100%;
}

.btn-acao:hover {
    background-color: var(--dourado-bronze);
    color: var(--branco);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(196, 158, 122, 0.2);
}

.card-documento .btn-acao {
    background-color: transparent;
    color: var(--verde-escuro);
    border: 2px solid var(--verde-escuro);
    box-shadow: none;
}

.card-documento .btn-acao:hover {
    background-color: var(--verde-escuro);
    color: var(--branco);
}

/* Definição de uma animação para girar o gradiente (efeito cobrinha) */
@keyframes girarCobrinha {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.btn-acao-boas-vindas {
    position: relative;
    /* Necessário para posicionar a borda animada */
    overflow: hidden;
    /* Esconde o resto do gradiente que sai do botão */
    background-color: var(--verde-escuro);
    color: var(--verde-escuro);
    padding: 0.9rem 1.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    display: block;
    width: 100%;
    box-shadow: 0 4px 6px rgba(28, 51, 50, 0.1);
    border: none;
    margin-top: auto;
    z-index: 1;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* A "Cobrinha" (O gradiente que vai girar no fundo) */
.btn-acao-boas-vindas::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* Gradiente cônico: cria a ponta da cobra (ex: dourado) e o resto transparente */
    background: conic-gradient(var(--dourado-bronze) 0deg,
            var(--dourado-bronze) 60deg,
            transparent 120deg,
            transparent 360deg);
    animation: girarCobrinha 3s linear infinite;
    z-index: -2;
}

.btn-acao-boas-vindas::after {
    content: '';
    position: absolute;
    inset: 2px;
    background-color: var(--branco);
    border-radius: 6px;
    z-index: -1;
    transition: background-color 0.3s ease;
}

/* Estado de Hover (Quando passa o mouse) */
.btn-acao-boas-vindas:hover {
    color: var(--branco);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(196, 158, 122, 0.2);
}

/* No hover, o fundo interno muda para preencher o botão com a cor final */
.btn-acao-boas-vindas:hover::after {
    background-color: var(--verde-escuro);
}


/* ==========================================================================
   Variação: .card-documento
   ========================================================================== */

.card-documento .btn-acao-boas-vindas {
    background-color: transparent;
    color: var(--verde-escuro);
    box-shadow: none;
}

/* Ajusta as cores da cobrinha para a versão do card de documento */
.card-documento .btn-acao-boas-vindas::before {
    background: conic-gradient(var(--verde-escuro) 0deg,
            var(--verde-escuro) 60deg,
            transparent 120deg,
            transparent 360deg);
}

/* A capa interna precisa começar transparente ou da cor do fundo do card */
.card-documento .btn-acao-boas-vindas::after {
    background-color: var(--branco);
}

.card-documento .btn-acao-boas-vindas:hover {
    color: var(--branco);
}

.card-documento .btn-acao-boas-vindas:hover::after {
    background-color: var(--verde-escuro);
}

/* ------------------------------------
   RODAPÉ (FOOTER INTEGRADO)
--------------------------------------- */
.rodape {
    background-color: var(--verde-escuro);
    color: var(--branco);
    padding: 5rem 2rem 2rem 2rem;
    margin-top: 6rem;
}

.container-rodape {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 3rem;
}

.bloco-rodape h3 {
    color: var(--dourado-bronze);
    margin-bottom: 1.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bloco-rodape p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
}

.bloco-rodape ul {
    list-style: none;
}

.links-rodape li {
    margin-bottom: 0.8rem;
}

.links-rodape a {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transicao);
}

.links-rodape a i {
    font-size: 0.75rem;
    color: var(--dourado-bronze);
    transition: transform 0.3s ease;
}

.links-rodape a:hover {
    color: var(--dourado-bronze) !important;
    padding-left: 5px;
    /* Efeito sutil de deslocamento ao passar o mouse */
}

.links-rodape a:hover i {
    transform: translateX(2px);
}

.bloco-rodape ul {
    list-style: none;
}

.bloco-rodape ul li {
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    /* display: flex;
    flex-direction: column; */
}

.bloco-rodape ul li strong {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--dourado-bronze);
    display: block;
    margin-bottom: 2px;
}

.direitos-autorais {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 2.5rem;
    display: flex;
    justify-content: space-between;
    /* Joga os direitos para a esquerda e sua marca para a direita */
    align-items: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    flex-wrap: wrap;
    gap: 15px;
}

.creditos-assinatura a {
    color: var(--dourado-bronze) !important;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transicao);
}

.creditos-assinatura a:hover {
    color: #FFFFFF !important;
    text-shadow: 0 0 8px rgba(196, 158, 122, 0.6);
}

.logo-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.link-endereco-mapa {
    display: block;
    text-decoration: none;
    transition: var(--transicao);
}

.link-endereco-mapa p {
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 2px;
}

.link-endereco-mapa:hover p {
    color: var(--dourado-bronze) !important;
}

.clique-ver-mapa {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--dourado-bronze);
    margin-top: 6px;
    font-weight: 600;
    opacity: 0.8;
}

.link-endereco-mapa:hover .clique-ver-mapa {
    opacity: 1;
    text-decoration: underline;
}

.card-fale-conosco {
    max-width: 600px;
    margin: 0 auto;
}

.grupo-campo {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.grupo-campo label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--verde-escuro);
}

.grupo-campo input,
.grupo-campo textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 0.95rem;
    background-color: var(--fundo-claro);
    transition: var(--transicao);
}

.grupo-campo input:focus,
.grupo-campo textarea:focus {
    outline: none;
    border-color: var(--dourado-bronze);
    background-color: var(--branco);
    box-shadow: 0 0 0 3px rgba(196, 158, 122, 0.1);
}

.burger-menu {
    display: none;
}

.burger-menu, .burger-menu .bar {
    display: none !important;
}

#mobile-nav {
    display: none;
}

.grid-cards-noticias {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.card-noticia-longa {
    background-color: var(--branco);
    padding: 3rem 2.5rem;
    border-radius: var(--borda-raio);
    box-shadow: var(--sombra-suave);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
}

.card-noticia-longa::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: var(--dourado-bronze);
    border-radius: var(--borda-raio) 0 0 var(--borda-raio);
}

.meta-noticia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 10px;
}

.card-noticia-longa h3 {
    color: var(--verde-escuro);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.3px;
}

.card-noticia-longa {
    overflow: hidden;
    box-sizing: border-box;
}

.card-noticia-longa .texto-completo {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.card-noticia-longa .texto-completo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    /*max-height: 580px;*/  
    object-fit: contain;
    margin: 20px auto;
    border-radius: 10px;
    cursor: zoom-in;
}

.texto-completo2 p {
    /* white-space: pre-wrap; */
    color: var(--texto-escuro);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.texto-completo2 p:last-child {
    margin-bottom: 0;
}

/* Indicador visual de clique na imagem */
.imagem-noticia {
    cursor: zoom-in;
}

/* --- POP-UP DE INSTRUÇÕES (KIT BOAS-VINDAS) --- */
.modal-boas-vindas {
    border: none;
    background: transparent;
    max-width: 650px;
    width: 90%;
    margin: auto;
    padding: 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border-radius: var(--borda-raio);
}

.modal-boas-vindas::backdrop {
    background-color: rgba(28, 51, 50, 0.85);
    /* Verde escuro do condomínio com opacidade */
    backdrop-filter: blur(6px);
}

.modal-boas-vindas-conteudo {
    background-color: var(--branco);
    border-radius: var(--borda-raio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(196, 158, 122, 0.2);
}

.modal-boas-vindas-header {
    background-color: var(--verde-escuro);
    color: var(--branco);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--dourado-bronze);
}

.modal-boas-vindas-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.3px;
}

.botao-fechar-instrucoes {
    background: none;
    border: none;
    color: var(--branco);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    transition: var(--transicao);
}

.botao-fechar-instrucoes:hover {
    color: var(--dourado-bronze);
}

.modal-boas-vindas-body {
    padding: 2rem;
    max-height: 70vh;
    /* Excelente para mobile: limita o tamanho vertical e gera scroll interno */
    overflow-y: auto;
}

.modal-boas-vindas-body h3 {
    color: var(--verde-escuro);
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    margin-top: 1.5rem;
    border-left: 3px solid var(--dourado-bronze);
    padding-left: 8px;
}

.modal-boas-vindas-body h3:first-child {
    margin-top: 0;
}

.modal-boas-vindas-body ul {
    list-style-type: none;
    padding-left: 0;
}

.modal-boas-vindas-body ul li {
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: var(--texto-escuro);
    line-height: 1.6;
    position: relative;
    padding-left: 15px;
}

.modal-boas-vindas-body ul li::before {
    content: "•";
    color: var(--dourado-bronze);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* Escondido por padrão no Desktop */
.barra-inferior-app {
    display: none;
}

.mural-busca-container {
    position: relative !important; /* Essencial para que a lupa absoluta se oriente por ele */
    display: flex !important;
    align-items: center !important;
    width: 100%;
    max-width: 400px;
    margin: 0 !important;
    padding: 0 !important;
}

.mural-busca-container input[type="text"] {
    width: 100%;
    /* O preenchimento da direita (45px) impede que o texto digitado passe por baixo do ícone */
    padding: 10px 45px 10px 15px !important;
    font-size: 15px;
    margin: 0 !important;
}

.mural-busca-container input[type="text"]:focus {
    border-color: #baa181;
    box-shadow: 0 4px 12px rgba(186, 161, 129, 0.2);
}

/* Força a lupa a ficar centralizada verticalmente e alinhada à direita interna */
.mural-busca-container .icone-lupa-mural {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 15px !important; /* Ajusta a distância da borda direita interna */
    color: #baa181 !important;
    font-size: 16px !important;
    pointer-events: none; /* Garante que clicar na lupa clique no input */
    z-index: 99 !important;
}

.grid-cards-regras {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.card-texto-longo {
    background-color: var(--branco);
    padding: 3rem 2.5rem;
    border-radius: var(--borda-raio);
    box-shadow: var(--sombra-suave);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
}

.card-texto-longo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: var(--dourado-bronze);
    border-radius: var(--borda-raio) 0 0 var(--borda-raio);
}

.meta-texto-longo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 10px;
}

.card-texto-longo h3 {
    color: var(--verde-escuro);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.3px;
}

.texto-completo p {
    white-space: pre-wrap;
    color: var(--texto-escuro);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.texto-completo p:last-child {
    margin-bottom: 0;
}

.busca-container {
    position: relative !important; /* Essencial para que a lupa absoluta se oriente por ele */
    display: flex !important;
    align-items: center !important;
    width: 100%;
    max-width: 400px;
    margin: 0 !important;
    padding: 0 !important;
}

.busca-container input[type="text"] {
    width: 100%;
    /* O preenchimento da direita (45px) impede que o texto digitado passe por baixo do ícone */
    padding: 10px 45px 10px 15px !important;
    font-size: 15px;
    margin: 0 !important;
}

.busca-container input[type="text"]:focus {
    border-color: #baa181;
    box-shadow: 0 4px 12px rgba(186, 161, 129, 0.2);
}

.busca-container .icone-lupa-mural {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 15px !important; 
    color: #baa181 !important;
    font-size: 16px !important;
    pointer-events: none;
    z-index: 99 !important;
}

.slide-somente-imagem {
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.slide-somente-imagem .slide-background {
    cursor: pointer;
}

/* .slide-somente-imagem .slide-background img {
    object-fit: contain;
    object-position: center;
    background-color: #060B0B;
} */

.slide[data-dinamico="true"] .slide-background img {
    cursor: zoom-in;
    object-fit: contain;
    object-position: center;
    background-color: #060B0B;
}

.texto-completo img,
.slide[data-dinamico="true"] .slide-background img {
    cursor: zoom-in;
}

.modal-imagem {
    display: none;
    position: fixed;
    z-index: 999999;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    overflow: auto;
}

.modal-conteudo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 50px 20px 20px;
    box-sizing: border-box;
}

#img-ampliada {
    display: block;
    max-width: 95%;
    max-height: 85vh;
    object-fit: contain;
    margin: auto;
}

#modal-legenda {
    color: white;
    text-align: center;
    margin-top: 12px;
}

.botao-fechar-modal {
    position: fixed;
    top: 15px;
    right: 30px;
    color: white;
    font-size: 42px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000000;
}

.botao-fechar-modal:hover {
    color: #ccc;
}

.texto-completo img,
.slide[data-dinamico="true"] .slide-background img {
    cursor: zoom-in;
}

.carrossel-container:hover {
    cursor: default;
}

/* Estilos da Interface da Área Restrita */
.card-restrito-central {
    background-color: var(--branco) !important; /* Usa o fundo claro padrão */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: var(--borda-raio) !important;
    padding: 3rem 2rem !important;
    box-shadow: var(--sombra-suave) !important;
    
    /* Faz o card ocupar a largura total do container, alinhando com os de baixo */
    width: 100% !important;
    max-width: 1200px !important; /* Limita ao tamanho máximo do grid principal */
    margin: 2rem auto !important;
    box-sizing: border-box !important;
    text-align: center;
}

.card-restrito-central h3 {
    color: var(--verde-escuro) !important;
}

.card-restrito-central p {
    color: var(--texto-mutado) !important;
}

.divisor-autenticacao {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(196, 158, 122, 0.2), transparent);
    margin: 2rem 0;
    width: 100%;
}

.restrito-aviso-topo {
    margin-bottom: 2rem;
    width: 100%;
}

.icone-seguranca {
    font-size: 2.8rem;
    color: var(--dourado-bronze);
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 8px rgba(196, 158, 122, 0.2));
}

.icone-seguranca.dourado {
    color: var(--dourado-bronze);
}

.container-btn-google {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 25px auto 10px;
    padding: 10px;
    box-sizing: border-box;
}

.txt-sub-aviso {
    font-size: 0.9rem !important;
    color: var(--texto-mutado) !important;
    margin-top: 1rem;
}

/* Ajustes finos para compatibilidade com o Modo Escuro */
body.dark-mode .icone-seguranca {
    color: var(--dourado-bronze);
}

body.dark-mode #bloco-solicitacao {
    background-color: var(--branco) !important;
}

body.dark-mode .card-restrito-central {
    background: linear-gradient(145deg, #152726, #0e1b1a) !important; /* Fundo Verde Escuro */
    border: 1px solid rgba(196, 158, 122, 0.15) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .card-restrito-central h3 {
    color: #FFFFFF !important;
}

body.dark-mode .card-restrito-central p {
    color: #CAD6D6 !important;
}

.google-login-destaque {
  outline: 3px solid #4285f4;
  outline-offset: 6px;
  border-radius: 12px;
  animation: destaqueGoogle 1.5s ease-in-out 2;
}

@keyframes destaqueGoogle {

  0%, 100% {
    outline-color: #4285f4;
  }

  50% {
    outline-color: transparent;
  }

}

.mensagem-login-documentos {
    text-align: center;
    padding: 20px;
    margin-bottom: 15px;
}

.mensagem-login-documentos > i {
    font-size: 32px;
    color: #c49a45;
    margin-bottom: 12px;
}

.mensagem-login-documentos h3 {
    font-size: 19px;
    margin-bottom: 10px;
    color: var(--cor-texto);
}

.mensagem-login-documentos p {
    font-size: 14px;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto;
    opacity: 0.85;
}

.container-btn-google {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

/* ==========================================
   BOTÃO GOOGLE - DESIGN PREMIUM
   ========================================== */

.container-btn-google {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px auto 10px;
    padding: 12px;
    box-sizing: border-box;
}

/* Área externa do botão */
#botao-google-gsi,
#botao-google-aprovacao {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 10px;

    background: linear-gradient(
        145deg,
        #ffffff,
        #f8faf9
    );

    border: 1px solid rgba(27, 57, 53, 0.12);

    border-radius: 18px;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.03),
        0 10px 25px rgba(27, 57, 53, 0.08),
        0 20px 40px rgba(27, 57, 53, 0.04);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    box-sizing: border-box;
}

@media (hover: hover) {

    #botao-google-gsi:hover,
    #botao-google-aprovacao:hover {

        transform: translateY(-3px);

        border-color: rgba(196, 158, 122, 0.55);

        box-shadow:
            0 8px 18px rgba(0, 0, 0, 0.05),
            0 16px 35px rgba(27, 57, 53, 0.12);

    }
}

/* Efeito ao passar o mouse */
#botao-google-gsi:hover,
#botao-google-aprovacao:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.09),
        0 16px 32px rgba(0, 0, 0, 0.12);
}

/* Mantém o iframe e o botão dentro do contêiner */
#botao-google-gsi > div,
#botao-google-aprovacao > div {
    border-radius: 12px;
}

/* Destaque temporário */
.google-login-destaque {
    outline: 2px solid rgba(196, 158, 122, 0.85);
    outline-offset: 5px;
    border-radius: 19px;

    animation: destaqueGoogle 1.5s ease-in-out 2;
}

@keyframes destaqueGoogle {

    0%, 100% {
        outline-color: rgba(196, 158, 122, 0.85);
    }

    50% {
        outline-color: transparent;
    }

}

/* MODO ESCURO */
body.dark-mode #botao-google-gsi,
body.dark-mode #botao-google-aprovacao {

    background: linear-gradient(
        145deg,
        #ffffff,
        #f2f4f3
    );

    border-color: rgba(196, 158, 122, 0.45);

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.25),
        0 12px 30px rgba(0, 0, 0, 0.3);

}


/* ==========================================
   MODAL DE ORIENTAÇÃO PARA LOGIN
   ========================================== */

.modal-login-documentos {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;

    background: rgba(10, 25, 23, 0.72);
    backdrop-filter: blur(5px);

    justify-content: center;
    align-items: center;

    padding: 20px;
    box-sizing: border-box;
}

.modal-login-documentos.ativo {
    display: flex;
}

.conteudo-modal-login {
    position: relative;

    background: var(--branco);
    width: 100%;
    max-width: 430px;

    padding: 40px 30px 32px;

    border-radius: 22px;
    border-top: 4px solid var(--dourado-bronze);

    box-shadow: 0 20px 60px rgba(0,0,0,0.25);

    text-align: center;

    animation: entradaModalLogin 0.3s ease;
}

@keyframes entradaModalLogin {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fechar-modal-login {
    position: absolute;
    top: 12px;
    right: 17px;

    border: none;
    background: transparent;

    font-size: 28px;
    color: var(--texto-mutado);

    cursor: pointer;
}

.icone-modal-login {
    width: 65px;
    height: 65px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(196, 158, 122, 0.15);
    color: var(--dourado-bronze);

    font-size: 27px;
}

.conteudo-modal-login h2 {
    color: var(--verde-escuro);
    margin-bottom: 12px;
}

.conteudo-modal-login > p {
    color: var(--texto-mutado);
    line-height: 1.6;
    font-size: 14px;
}

.orientacoes-login {
    text-align: left;

    background: rgba(27, 57, 53, 0.05);

    border-radius: 12px;

    padding: 18px;
    margin: 22px 0;
}

.orientacoes-login div {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 12px;

    color: var(--texto-mutado);
    font-size: 13px;
    line-height: 1.5;
}

.orientacoes-login div:last-child {
    margin-bottom: 0;
}

.orientacoes-login i {
    color: #39836C;
    margin-top: 2px;
}

.btn-confirmar-login {
    width: 100%;
    padding: 15px;

    border: none;
    border-radius: 10px;

    background: var(--verde-escuro);
    color: white;

    font-weight: bold;
    font-size: 14px;

    cursor: pointer;
    transition: 0.25s;
}

.btn-confirmar-login:hover {
    background: #28564F;
    transform: translateY(-2px);
}

.conteudo-modal-login small {
    display: block;
    margin-top: 18px;

    color: var(--texto-mutado);
    font-size: 11px;
}

/* MODO ESCURO */

body.dark-mode .conteudo-modal-login {
    background: #152726;
}

body.dark-mode .conteudo-modal-login h2 {
    color: #FFFFFF;
}

body.dark-mode .orientacoes-login {
    background: rgba(255,255,255,0.06);
}

body.dark-mode .orientacoes-login div {
    color: #CAD6D6;
}

.documento-destaque {
    outline: 3px solid var(--dourado-bronze);
    outline-offset: 5px;
    border-radius: var(--borda-raio);
    animation: destacarDocumento 1.2s ease-in-out 3;
}

@keyframes destacarDocumento {

    0%, 100% {
        outline-color: var(--dourado-bronze);
    }

    50% {
        outline-color: transparent;
    }

}

.carregando-documentos {
    grid-column: 1 / -1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 280px;

    text-align: center;
    padding: 40px 20px;

    box-sizing: border-box;
}

.carregando-documentos i {
    font-size: 55px;
    color: #baa181;

    margin-bottom: 22px;

    filter: drop-shadow(0 4px 8px rgba(186, 161, 129, 0.25));
}

.carregando-documentos p {
    font-size: 19px;
    font-weight: 600;
    color: var(--verde-escuro);

    margin: 0 0 10px;
}

.carregando-documentos span {
    font-size: 14px;
    color: var(--texto-mutado);
    line-height: 1.6;
}

/* Modo escuro */
body.dark-mode .carregando-documentos p {
    color: #FFFFFF;
}

body.dark-mode .carregando-documentos span {
    color: #CAD6D6;
}


/* ------------------------------------
   RESPONSIVIDADE (MOBILE)
--------------------------------------- */
@media (max-width: 768px) {

    header,
    nav,
    .navbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    main,
    .conteudo-principal,
    .secao,
    section,
    body>div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    #noticias-resumo-home .card.revelar-ao-scroll {
        opacity: 1 !important;
        transform: none !important;
    }

    #noticias-resumo-home {
        width: 100% !important;
        max-width: 1200px !important;
        
        /* Adiciona o recuo nas laterais idêntico ao do card de cima */
        padding-left: 0rem !important; 
        padding-right: 0rem !important; 
        
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important; /* Mantém o mesmo espaçamento vertical padrão entre os cards */
    }

    /* Ajusta as propriedades do card injetado para respeitar os limites do bloco */
    #noticias-resumo-home .card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        
        /* Preserva o arredondamento padrão do layout */
        border-radius: var(--borda-raio) !important; 
    }

     .topo-areas-comuns {
        padding: 30px 16px !important; /* Margem interna mais confortável no celular */
        margin-bottom: 20px !important;
        border-radius: 0 0 12px 16px !important;
        display: flex !important;
        flex-direction: column !important; /* Garante o empilhamento vertical perfeito */
        align-items: center !important;
    }

    .topo-areas-comuns .badge-categoria {
        margin-bottom: 12px !important;
        display: inline-block !important;
    }

    .topo-areas-comuns h1 {
        font-size: 1.65rem !important; /* Diminui o título para não achatar ou quebrar palavras no celular */
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .topo-areas-comuns p {
        font-size: 0.95rem !important; /* Tamanho de texto perfeito e legível para smartphone */
        line-height: 1.5 !important;
        width: 100% !important;
        padding: 0 5px !important; /* Evita que o texto encoste nas bordas do bloco branco */
    }

    .mural-busca-container {
        position: fixed !important;
        bottom: 75px !important;
        display: flex !important;
        align-items: center !important;
        /* Correção: removido o justify-content inválido */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 30px) !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 9999 !important;
    }

    .mural-busca-container input[type="text"] {
        width: 100%;
        /* Garante espaço interno na direita para o texto não passar por baixo da lupa */
        padding: 12px 45px 12px 18px !important; 
        font-size: 16px;
        border: 1px solid #dcdcdc;
        border-radius: 10px;
        background-color: #ffffff;
        color: #333333;
        outline: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }

    .mural-busca-container .icone-lupa-mural {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 18px !important; /* Afastamento da borda direita */
        color: #baa181 !important;
        font-size: 16px !important;
        pointer-events: none; /* Evita que o clique no ícone atrapalhe o foco do input */
        z-index: 100 !important; /* Garante que fique visualmente acima do input */
    }

    body.dark-mode .mural-busca-container input[type="text"] {
        background-color: #152726 !important;
        color: #ffffff !important;
        border-color: var(--dourado-bronze) !important;
        width: 100%;
        padding: 10px 45px 10px 15px !important;
        /* Aumentado para 45px para isolar o espaço da lupa */
        font-size: 15px;
        margin: 0 !important;
    }

    .busca-container {
        position: fixed !important;
        bottom: 75px !important;
        display: flex !important;
        align-items: center !important;
        /* Correção: removido o justify-content inválido */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 30px) !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 9999 !important;
    }

    .busca-container input[type="text"] {
        width: 100%;
        /* Garante espaço interno na direita para o texto não passar por baixo da lupa */
        padding: 12px 45px 12px 18px !important; 
        font-size: 16px;
        border: 1px solid #dcdcdc;
        border-radius: 10px;
        background-color: #ffffff;
        color: #333333;
        outline: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }

    .busca-container .icone-lupa-mural {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 18px !important; /* Afastamento da borda direita */
        color: #baa181 !important;
        font-size: 16px !important;
        pointer-events: none; /* Evita que o clique no ícone atrapalhe o foco do input */
        z-index: 100 !important; /* Garante que fique visualmente acima do input */
    }

    body.dark-mode .busca-container input[type="text"] {
        background-color: #152726 !important;
        color: #ffffff !important;
        border-color: var(--dourado-bronze) !important;
        width: 100%;
        padding: 10px 45px 10px 15px !important;
        /* Aumentado para 45px para isolar o espaço da lupa */
        font-size: 15px;
        margin: 0 !important;
    }

    #mural-noticias-completo {
        padding-bottom: 160px !important;
    }

    body {
        padding-bottom: 75px !important;
    }

    .cabecalho {
        position: sticky;
        top: 0;
        z-index: 1010 !important;
        padding: 1rem 1.2rem;
    }

    .container-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 45px !important;
        /* Casando perfeitamente com a altura máxima da imagem do logo */
    }

    .cabecalho,
    .logo-container {
        display: flex !important;
        align-items: center !important;
    }

    .logo-img {
        display: block !important;
        margin: 0 !important;
        height: 45px !important;
        /* Mantém a proporção nítida */
    }

    .logo-titulo {
        font-size: 1.05rem;
        margin: 0 !important;
        /* Limpa margens nativas de h1/h2 que empurram o texto para baixo */
        line-height: 1 !important;
        /* Centraliza a linha do texto com o meio do logo */
    }

    .menu-navegacao {
        display: flex;
        gap: 0.5rem;
        display: none !important;

    }

    .burger-menu {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 22px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .burger-menu .bar {
        width: 100%;
        height: 3px;
        background-color: #f0ecec;
        border-radius: 2px;
        transition: 0.3s;
    }

    .carrossel-container {
        height: 480px;
    }

    .slide {
        background-size: cover;
        padding: 0 1rem;
    }

    .slide-conteudo {
        padding: 1.5rem;
        max-width: 100%;
        width: 100%;
    }

    .slide-conteudo h1,
    .slide-conteudo h2 {
        font-size: 1.4rem !important;
        margin-bottom: 0.5rem;
    }

    .slide-conteudo p {
        font-size: 0.9rem !important;
        /* Texto menor e legível */
        line-height: 1.4;
    }

    .btn-slide-noticia {
        margin-top: 0.8rem;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        width: 100%;
        justify-content: center;
    }

     #pwa-install-banner {
    transition: transform 0.2s ease, opacity 0.2s ease;
    will-change: transform, opacity;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none; 
}

#img-ampliada {
    display: block;
    max-width: 95%;
    max-height: 85vh;
    object-fit: contain;
    margin: auto;
    
    /* ADICIONE ESSAS DUAS LINHAS: */
    transition: transform 0.25s ease; 
    cursor: zoom-in;
}

    /* --- CORREÇÃO DOS CARDS DESLOCADOS --- */
    .grid-cards,
    .grid-cards-noticias,
    main .grid-cards,
    section .grid-cards {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
        /* Margem sutil nas bordas do celular */
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Força TODOS os cards a centralizarem perfeitamente na tela sem vazar para a direita */
    .card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 2rem 1.5rem !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #mobile-nav {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        max-height: 100vh; /* Garante que o menu não passe do tamanho da tela */
        overflow-y: auto;  /* Ativa a barra de rolagem vertical automaticamente se faltar espaço */
        width: 280px;
        background-color: var(--verde-escuro);
        padding: 95px 2rem 2rem 2rem;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.4);
        z-index: 1005;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        /* transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.4s ease,
            visibility 0.4s ease; */
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #mobile-nav.hidden {
        /* display: none !important; */
        /* display: block !important;  */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(100%);
    }

    #mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    #mobile-nav li a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 0;
        text-decoration: none;
        color: #f3f1f1;
        font-weight: 500;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        position: relative;
        opacity: 0;
        transform: translateX(30px);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            color 0.2s ease,
            padding 0.2s ease;
    }

    #mobile-nav li a:hover,
    #mobile-nav li a:active {
        color: var(--dourado-bronze);
        padding-left: 8px;
    }

    #mobile-nav:not(.hidden) li a {
        opacity: 1;
        transform: translateX(0);
    }

    #mobile-nav li a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--dourado-bronze);
        transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #mobile-nav:not(.hidden) li a::after {
        width: 40%;
    }

    #mobile-nav:not(.hidden) li:nth-child(1) a {
        transition-delay: 0.10s;
    }

    #mobile-nav:not(.hidden) li:nth-child(2) a {
        transition-delay: 0.17s;
    }

    #mobile-nav:not(.hidden) li:nth-child(3) a {
        transition-delay: 0.24s;
    }

    #mobile-nav:not(.hidden) li:nth-child(4) a {
        transition-delay: 0.31s;
    }

    #mobile-nav:not(.hidden) li:nth-child(5) a {
        transition-delay: 0.38s;
    }

    #mobile-nav:not(.hidden) li:nth-child(6) a {
        transition-delay: 0.45s;
    }

    #mobile-nav:not(.hidden) li:nth-child(7) a {
        transition-delay: 0.52s;
    }

    .menu-retorno {
        display: flex !important;
    }

    .menu-retorno a {
        font-size: 0.85rem;
        padding: 0.5rem 0.8rem;
        color: var(--branco);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
    }

    .card-noticia-longa {
        padding: 2rem 1.5rem;
    }

    .card-noticia-longa h3 {
        font-size: 1.3rem;
    }

    .modal-boas-vindas {
        width: 95%;
    }

    .modal-boas-vindas-header {
        padding: 1.2rem;
    }

    .modal-boas-vindas-header h2 {
        font-size: 1.05rem;
    }

    .modal-boas-vindas-body {
        padding: 1.2rem;
    }

    .barra-inferior-app {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background-color: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        z-index: 2000;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
    }

    /* Espaçamento extra no body para o conteúdo da página não sumir atrás da barra fixa */
    body {
        padding-bottom: 75px !important;
    }

    .item-nav-app {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--texto-mutado);
        text-decoration: none;
        font-size: 0.75rem;
        font-weight: 600;
        gap: 3px;
        width: 25%;
        height: 100%;
        transition: all 0.3s ease;
    }

    .item-nav-app i {
        font-size: 1.25rem;
        transition: transform 0.2s ease;
    }

    /* Estado ativo (página ou seção atual) ou foco no clique */
    .item-nav-app.ativo,
    .item-nav-app:active {
        color: var(--verde-escuro);
    }

    .item-nav-app.ativo i {
        transform: translateY(-2px);
    }

    /* --- ADAPTAÇÃO AUTOMÁTICA PARA O MODO ESCURO (DARK MODE) --- */
    body.dark-mode .barra-inferior-app {
        background-color: rgba(13, 22, 22, 0.92);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    }

    body.dark-mode .item-nav-app {
        color: #A0B2B2;
        /* Cor mutada do modo escuro */
    }

    body.dark-mode .item-nav-app.ativo,
    body.dark-mode .item-nav-app:active {
        color: var(--dourado-bronze);
        /* O destaque vira dourado no modo escuro */
    }

    .barra-inferior-app.no-topo .item-nav-app {
        font-size: 0px;
        gap: 0px;
    }

    /* Garante que o ícone continue grande e centralizado perfeitamente no topo */
    .barra-inferior-app.no-topo .item-nav-app i {
        font-size: 1.4rem;
        transform: translateY(0);
    }

    .container-rodape {
        grid-template-columns: 1fr;
        gap: 1.0rem;
        padding-bottom: 2rem;
    }

    .direitos-autorais {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    /* IMPORTANTE: Remove o quadrado cinza nativo do celular que esconde seu efeito */
    .btn-acao,
    .btn-slide-noticia,
    .btn-acao-boas-vindas {
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Efeito ao tocar nos botões padrão e de notícias */
    .btn-acao:active,
    .btn-slide-noticia:active {
        background-color: #FFFFFF !important;
        color: #0A1111 !important;
        transform: scale(0.92) !important;
        transition: transform 0.05s ease !important;
    }

    /* Modo Claro Mobile */
    body:not(.dark-mode) .btn-acao:active,
    body:not(.dark-mode) .btn-slide-noticia:active {
        background-color: var(--dourado-hover) !important;
        color: #FFFFFF !important;
    }

    .btn-acao-boas-vindas:active::after {
        background-color: #FFFFFF !important;
    }

    .btn-acao-boas-vindas:active {
        color: #0A1111 !important;
        transform: scale(0.92) !important;
        transition: transform 0.05s ease !important;
    }

    /* Modo Claro no botão de Boas-Vindas */
    body:not(.dark-mode) .btn-acao-boas-vindas:active::after {
        background-color: var(--verde-escuro) !important;
    }

    body:not(.dark-mode) .btn-acao-boas-vindas:active {
        color: #FFFFFF !important;
    }

    .card-restrito-central {
        padding: 2.5rem 1.2rem !important;
    }

    .container-btn-google {
        margin: 20px auto 5px;
        padding: 8px 0;
    }

    #botao-google-gsi,
    #botao-google-aprovacao {
        max-width: 100%;
        padding: 8px;
    }

}

.conteudo-modal-login {
        padding: 35px 22px 25px;
    }

@media (prefers-reduced-motion: reduce) {

    #botao-google-gsi,
    #botao-google-aprovacao {
        transition: none;
    }

    .google-login-destaque {
        animation: none;
    }
}

.carregando-documentos {
        min-height: 230px;
        padding: 30px 15px;
    }

    .carregando-documentos i {
        font-size: 46px;
    }

    .carregando-documentos p {
        font-size: 17px;
    }