/* ==========================================================================
       1. VARIÁVEIS DE COR E IDENTIDADE INSTITUCIONAL (MSM PORTUGAL - MINUTO COM MARIA)
       ========================================================================== */
    :root {
       --azul-msm: #0c2340;    /* Azul escuro heráldico oficial */
        --ouro: #c5a059;        /* Dourado oficial do brasão */
        --azul-claro: #f4f7f9;  /* Fundo suave para contrastes secundários */
        --texto: #2b2b2b;       /* Cor do texto principal de leitura */
        --texto-suave: #666666; /* Cor para datas e notas secundárias */
        --branco: #ffffff;      /* Fundo dos blocos, cartões e painéis */
        --borda: #eef2f5;       /* Linhas de divisão e molduras discretas */
		
		--primary-color: #1a365d;
            --secondary-color: #2b6cb0;
            --accent-color: #edf2f7;
            --text-color: #2d3748;
    }

    /* ==========================================================================
       2. CONFIGURAÇÃO BASE DO DOCUMENTO
       ========================================================================== */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        line-height: 1.6;
        color: var(--texto);
        background-color: #f8f9fa;
        margin: 0;
        padding: 0;
    }
	
	.container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
		
		h1 {
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 30px;
        }
		
		/* Abas dos Dias da Semana */
        .tabs-dias {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-bottom: 30px;
            border-bottom: 2px solid var(--accent-color);
            padding-bottom: 15px;
        }

        .tab-btn {
            background-color: var(--accent-color);
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-weight: bold;
            border-radius: 5px;
            color: var(--primary-color);
            transition: all 0.3s ease;
        }

        .tab-btn.active, .tab-btn:hover {
            background-color: var(--primary-color);
            color: white;
        }

        /* Conteúdo dos Dias */
        .conteudo-dia {
            display: none;
        }

        .conteudo-dia.active {
            display: block;
        }

        /* Estrutura das Horas Canónicas */
        .hora-canonica {
            background: #fff;
            border-left: 4px solid var(--secondary-color);
            margin-bottom: 20px;
            padding: 15px 20px;
            border-radius: 0 8px 8px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .hora-titulo {
            font-size: 1.2rem;
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 10px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
        }

        .hora-tempo {
            font-size: 0.9rem;
            color: #718096;
            font-style: italic;
        }

        .oracao-texto {
            white-space: pre-line; /* Mantém as quebras de linha dos versos */
            padding-left: 10px;
            border-left: 1px dotted #cbd5e0;
        }
		
		/* Cores litúrgicas automáticas para Versículos e Respostas */
		.v-liturgico::before {
			content: "V.: ";
			color: var(--vermelho-rubrica);
			font-weight: bold;
		}

		.r-liturgico::before {
			content: "R.: ";
			color: var(--vermelho-rubrica);
			font-weight: bold;
		}
		
		.rubrica {
			color: #b91c1c; /* Cor vermelha litúrgica */
			font-weight: 500; /* Ligeiramente destacado */
		}
		
		.rubrica {
			color: #b91c1c; /* Cor vermelha litúrgica */
			font-weight: 500; /* Ligeiramente destacado */
		}

    /* ==========================================================================
       3. CABEÇALHO ULTRA-RESPONSIVO (LINHA ÚNICA - NUNCA QUEBRA)
       ========================================================================== */
    .cabecalho-principal {
        background-color: #0c2340; 
        color: #ffffff; 
        padding: 20px; 
        border-bottom: 4px solid #c5a059; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
        font-family: 'Georgia', serif;
    }

    .cabecalho-contentor {
        max-width: 800px; 
        margin: 0 auto; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 30px; 
        flex-wrap: nowrap !important; /* Força os logos e o texto na mesma linha */
    }

    .logo-msm, .logo-theotokos {
        height: 70px; 
        width: auto; 
        object-fit: contain; 
        filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.3)); 
        flex-shrink: 0;
    }

    .texto-cabecalho {
        text-align: center; 
        min-width: 180px; 
        flex-grow: 0;
    }

    .texto-cabecalho h1 {
        margin: 0; 
        font-size: 1.7rem; 
        font-weight: 700; 
        letter-spacing: 1px; 
        color: #ffffff; 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    }

    .texto-cabecalho p {
        margin: 4px 0 0 0; 
        font-size: 0.85rem; 
        text-transform: uppercase; 
        letter-spacing: 2px; 
        color: #c5a059; 
        font-weight: 600; 
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* Redução proporcional do cabeçalho em telemóveis */
    @media (max-width: 600px) {
        .cabecalho-contentor {
            gap: 12px;
        }
        .logo-msm, .logo-theotokos {
            height: 45px; /* Encolhe os dois logótipos */
        }
        .texto-cabecalho {
            min-width: 130px;
        }
        .texto-cabecalho h1 {
            font-size: 1.1rem; /* Encolhe o título principal */
            letter-spacing: 0.5px;
        }
        .texto-cabecalho p {
            font-size: 0.65rem; /* Encolhe o subtítulo oficial */
            letter-spacing: 1px;
        }
    }

    /* ==========================================================================
       4. BARRA DE NAVEGAÇÃO COMPACTA (SCROLL REVELATION + HAMBURGER)
       ========================================================================== */
	.menu-navegacao {
		background-color: #0c2340; /* Azul escuro oficial */
		padding: 0 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		position: relative;
		z-index: 1000;
	}

	.menu-contentor {
		max-width: 12000px; /* Largura total expandida para caberem todos os links */
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.menu-links {
		display: flex;
		align-items: center;
		gap: 1x; /* Espaçamento equilibrado entre links */
	}

	/* Estilo Base dos Itens do Menu */
	.menu-item {
		color: rgba(255, 255, 255, 0.75);
		text-decoration: none;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-size: 0.65rem;
		font-weight: 500;
		padding: 10px 12px;
		letter-spacing: 0.3px;
		transition: all 0.25s ease;
		border-bottom: 2px solid transparent;
		white-space: nowrap; /* Impede que o texto quebre em duas linhas no computador */
	}

	/* Efeito Hover: Texto ilumina-se e ganha linha dourada subtil */
	.menu-item:hover {
		color: var(--ouro, #c5a059);
		border-bottom: 2px solid var(--ouro, #c5a059);
		background-color: rgba(255, 255, 255, 0.02);
	}

	/* Página Ativa */
	.menu-item.pagina-ativa {
		color: var(--ouro, #c5a059);
		font-weight: 600;
		border-bottom: 2px solid var(--ouro, #c5a059);
		background-color: rgba(255, 255, 255, 0.04);
	}

	/* Destaque especial para o botão "Voltar ao FIDES" */
	.menu-item.voltar-fides {
		color: #ffffff;
		font-weight: 600;
		border-right: 1px solid rgba(255, 255, 255, 0.15);
		padding-right: 20px;
		margin-right: 10px;
	}
	.menu-item.voltar-fides:hover {
		border-bottom-color: transparent;
		color: var(--ouro, #c5a059);
	}
	.seta-voltar {
		display: inline-block;
		transition: transform 0.2s ease;
	}
	.menu-item.voltar-fides:hover .seta-voltar {
		transform: translateX(-4px); /* Seta move-se ligeiramente para a esquerda */
	}

	/* Ocultar o mecanismo do Hamburger em Computadores */
	.menu-checkbox, .menu-icone {
		display: none;
	}

	/* ==========================================================================
   REGRAS PARA TELEMÓVEIS COM BLOQUEIO DE SOBREPOSIÇÃO (!IMPORTANT)
   ========================================================================== */
@media (max-width: 1024px) {
    .menu-contentor {
        justify-content: flex-end !important; 
        padding: 12px 0 !important;
        height: 20px !important;
    }

    /* Mostrar o Botão Hamburger */
    .menu-icone {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 22px !important;
        height: 16px !important;
        cursor: pointer !important;
        z-index: 1001 !important;
    }

    .menu-icone span {
        display: block !important;
        height: 2px !important;
        width: 100 !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }

    /* Painel Lateral (Slide-out) */
    .menu-links {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; /* Começa escondido */
        width: 290px !important;
        height: 100vh !important;
        background-color: #0a1b30 !important; 
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.4) !important;
        flex-direction: column !important;
        
        /* CORREÇÃO DE ALINHAMENTO DO PAINEL */
        align-items: flex-start !important; /* Alinha o bloco dos links à esquerda */
        justify-content: flex-start !important;
        
        padding: 80px 0 20px 0 !important; 
        gap: 0 !important;
        transition: right 0.35s ease !important;
    }

    /* Links Individuais (Forçados à Esquerda) */
    .menu-item {
        width: 100% !important; /* Ocupa a largura total da barra lateral */
        box-sizing: border-box !important; /* Garante que os paddings não esticam o menu */
        padding: 12px 18px !important;
        font-size: 0.75rem !important;
        white-space: normal !important; 
        
        /* CORREÇÃO DO TEXTO DO LINK */
        text-align: left !important; /* Força o alinhamento do texto à esquerda */
        display: block !important; 
        
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; 
        border-left: 3px solid transparent !important;
        border-right: none !important;
    }

    /* Destaques e Seleção */
    .menu-item:hover, .menu-item.pagina-ativa {
        border-bottom-color: rgba(255, 255, 255, 0.05) !important;
        border-left: 3px solid var(--ouro, #c5a059) !important;
        background-color: rgba(255, 255, 255, 0.04) !important;
        color: var(--ouro, #c5a059) !important;
    }

    /* Ajuste Especial para o "Voltar ao FIDES" */
    .menu-item.voltar-fides {
        border-right: none !important;
        border-bottom: 2px solid rgba(197, 160, 89, 0.2) !important; 
        padding-bottom: 16px !important;
        margin-bottom: 10px !important;
        margin-right: 0 !important;
        color: #ffffff !important;
    }

    /* Ativação do Menu Lateral */
    .menu-checkbox:checked ~ .menu-links {
        right: 0 !important;
    }

    /* Animação do Hamburger a transformar-se em "X" */
    .menu-checkbox:checked ~ .menu-icone {
        position: fixed !important; 
    }
    
    .menu-checkbox:checked ~ .menu-icone span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .menu-checkbox:checked ~ .menu-icone span:nth-child(2) {
        opacity: 0 !important;
    }

    .menu-checkbox:checked ~ .menu-icone span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }
}
	
	/* ==========================================================================
   BARRA DE NAVEGAÇÃO PREMIUM COM APARIÇÃO EM SCROLL DOWN
   ========================================================================== */
	.menu-navegacao {
		background-color: #0c2340; /* Azul escuro oficial */
		padding: 0 20px;
		border-bottom: 2px solid var(--ouro, #c5a059); /* Linha dourada delimitadora */
		
		/* CONFIGURAÇÃO DE SCROLL (Começa escondido) */
		position: fixed;   /* Fixa o menu em relação à janela do navegador */
		top: -65px;        /* Esconde o menu acima do topo do ecrã por padrão */
		left: 0;
		right: 0;
		z-index: 1000;     /* Garante que fica por cima de todo o conteúdo */
		opacity: 0;        /* Totalmente invisível ao carregar o site */
		transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; /* Animação suave */
	}

	/* CLASSE DE ATIVAÇÃO: Injetada pelo JavaScript ao fazer Scroll Down */
	.menu-navegacao.menu-fixo {
		top: 0;            /* Faz o menu deslizar para baixo e aparecer no topo */
		opacity: 1;        /* Torna o menu 100% visível */
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra elegante sobre o conteúdo */
	}

	.menu-contentor {
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.menu-links {
		display: flex;
		align-items: center;
		gap: 8px;
	}

    /* ==========================================================================
       5. CONTENTORES DE LAYOUT E COMPONENTES PRINCIPAIS
       ========================================================================== */
    .contentor-geral {
        max-width: 1200px;
        margin: 30px auto;
        padding: 0 20px;
    }

    /* Banner Superior (Texto introdutório + Imagem + Citação) */
    .banner-destaque {
        background-color: var(--branco);
        padding: 35px 20px;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(12, 35, 64, 0.04);
        border: 1px solid var(--borda);
        border-top: 6px solid var(--azul-msm);
        margin-bottom: 30px;
        text-align: center;
    }

    /* Introdução Textual */
    .introducao-oracao {
        margin-bottom: 25px;
        text-align: center;
        font-family: 'Georgia', serif;
    }

    .destaque-sabado {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--azul-msm);
        margin-bottom: 4px;
        letter-spacing: 0.5px;
    }

    .subtexto-sabado {
        margin: 0;
        font-size: 1.15rem;
        color: var(--texto-suave);
        font-style: italic;
    }

    /* Invólucro da Imagem Devocional */
    .oracao-header {
        display: flex;
        justify-content: center;
        margin-bottom: 25px;
    }

    .moldura-sacra {
        background: var(--branco);
        padding: 10px;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(197, 160, 89, 0.3);
        position: relative;
    }

    .moldura-sacra::after {
        content: '';
        position: absolute;
        top: -2px; left: -2px; right: -2px; bottom: -2px;
        border-radius: 14px;
        border: 1px solid var(--ouro);
        opacity: 0.45;
        pointer-events: none;
    }

    .moldura-sacra img {
        max-height: 240px; /* Tamanho médio de alta visibilidade */
        width: auto;
        display: block;
        border-radius: 6px;
    }

    /* Citação Bíblica Uniforme (Sem barra lateral) */
    .citacao-biblica.blue-theme {
        max-width: 650px;
        margin: 0 auto;
        padding: 20px 25px;
        background-color: #f0f4f8;
        border-left: none; 
        border-radius: 12px; 
        box-shadow: inset 0 1px 3px rgba(12, 35, 64, 0.03);
        text-align: center;
    }

    .texto-citacao {
        margin: 0 0 8px 0;
        font-family: 'Georgia', serif;
        font-style: italic;
        font-size: 1.1rem;
        color: #2d3748;
        line-height: 1.6;
    }

    .referencia-citacao {
        font-size: 0.85rem;
        font-weight: 700;
        color: #457b9d;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        display: block;
    }

    /* ==========================================================================
       6. GRELHA DE CONTEÚDO INFERIOR (COLUNAS AO MESMO NÍVEL)
       ========================================================================== */
    .grelha-conteudo {
        display: grid;
        grid-template-columns: 1fr 340px; 
        gap: 30px;
        align-items: start; /* Alinha o início das duas colunas na perfeição */
    }
	
	/* Cartão da Oração Semanal Ativa */
	.oracao-principal {
		background-color: var(--branco);
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(12, 35, 64, 0.04);
		border: 1px solid var(--borda);padding: 40px;
	}
	
	.oracao-conteudo {
		text-align: center;
	}
	
	.oracao-principal h2 {
		color: var(--azul-msm);
		font-family: 'Georgia', serif;font-size: 2.2rem;margin-top: 0;margin-bottom: 12px;
	}
	
	.oracao-principal .data {
		font-size: 0.85rem;color: var(--ouro);
		font-weight: 600;text-transform: uppercase;letter-spacing: 1.5px;margin-bottom: 30px;
	}
	
	#texto-principal {
		font-size: 1.25rem;color: #3a4750;
		line-height: 1.8;font-style: italic;font-family: 'Georgia', serif;white-space: pre-line;
	}
	
	/* Cartão Lateral do Arquivo Acordeão */
	.arquivo {background-color: var(--branco);
		padding: 30px 25px;border-radius: 16px;
		box-shadow: 0 10px 30px rgba(12, 35, 64, 0.04);
		border: 1px solid var(--borda);
	}
	
	.arquivo h3 {
		color: var(--azul-msm);
		font-family: 'Georgia', serif;font-size: 1.3rem;
		margin-top: 0;
		margin-bottom: 20px;
		border-bottom: 2px solid var(--azul-claro);
		padding-bottom: 12px;
		letter-spacing: 0.5px;
	}
	
	/* ==========================================================================
       6.. GRELHA DE CONTEÚDO INFERIOR (COLUNAS AO MESMO NÍVEL) editado para a página da Consagração
       ========================================================================== */
    .grelha-conteudo {
        display: grid;
        grid-template-columns: 1fr 340px; 
        gap: 30px;
        align-items: start; /* Alinha o início das duas colunas na perfeição */
    }
	
	/* Espaço onde vai ser publicada cada uma das partes do texto da Consagração */
	.consagracao-principal {
		background-color: var(--branco);
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(12, 35, 64, 0.04);
		border: 1px solid var(--borda);padding: 40px;
	}
	
	.consagracao-conteudo {
		text-align: left;
	}
	
	.consagracao-principal h2 {
		color: var(--azul-msm);
		font-family: 'Georgia', serif;
		font-size: 2.2rem;
		margin-top: 0;
		margin-bottom: 12px;
	}
	
	.consagracao-principal .data {
		font-size: 0.85rem;
		color: var(--ouro);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 1.5px;
		margin-bottom: 30px;
	}
	
	#texto-principal {
		font-size: 1rem;color: #3a4750;
		line-height: 1.8;
		font-family: 'Georgia', serif;
		white-space: pre-line;
	}
	
	/* ==========================================================================
	7. MECANISMO E COMPONENTES DO ACORDEÃO NATÍVO (DETAILS/SUMMARY)
	========================================================================== */
	details {
		margin-bottom: 8px;
	}
	
	summary {
		font-weight: bold;color: var(--azul-msm);
		cursor: pointer;padding: 6px 0;list-style: none;
	}
	
	summary::-webkit-details-marker {
		display: none;
	}
	
	/* Customização dos ícones de seta dos grupos */
	summary::before {
		content: "▶ ";font-size: 0.8rem;
		display: inline-block;
		transition: transform 0.2s ease;
		margin-right: 6px;color: var(--ouro);
		}
		
	details[open] > summary::before {
		transform: rotate(90deg);
	}
	
	.mes-container {
		margin-left: 15px;
		border-left: 2px solid var(--azul-claro);
		padding-left: 10px;
	}
	
	.mes-container summary {
		font-weight: 600;font-size: 0.95rem;
		color: var(--texto);
	}
	
	/* Listagem de links de orações */
	.lista-oracoes {
		list-style: none;
		padding: 0;margin: 0 0 10px 15px;
	}
	
	.lista-oracoes li {
		display: flex;
		flex-direction: column;
		padding: 8px 0;
		border-bottom: 1px solid var(--borda);
	}
		
	.lista-oracoes li:last-child {
		border-bottom: none;
	}
	
	.lista-oracoes .data {
		font-size: 0.8rem;
		color: var(--texto-suave);
		margin-bottom: 2px;
	}
	
	.lista-oracoes button {
		background: none;
		border: none;
		color: var(--azul-msm);
		font-size: 0.95rem;
		font-weight: 500;cursor: pointer;
		text-align: left;
		padding: 0;
		margin: 0;
		transition: color 0.2s ease;
	}
	
	.lista-oracoes button:hover {
		color: #457b9d;
		text-decoration: underline;
	}
	
	/* ==========================================================================
	8. RODAPÉ INSTITUCIONAL (FINAL DA PÁGINA)
	========================================================================== */
	.rodape-institucional {
		background-color: var(--azul-msm);
		color: var(--branco);
		font-family: 'Georgia', serif;
		margin-top: 60px;
		border-top: 4px solid var(--ouro);
	}
	
	.rodape-contentor {
		max-width: 1200px;
		margin: 0 auto;
		padding: 40px 20px;
		display: flex;
		justify-content: space-between;
		gap: 40px;flex-wrap: wrap;
	}
	
	.rodape-coluna {
		flex: 1;min-width: 250px;
	}
	
	.rodape-coluna h4 {
		color: var(--ouro);
		font-size: 1.2rem;
		margin-top: 0;
		margin-bottom: 15px;
		letter-spacing: 0.5px;
	}
	
	.rodape-coluna p {
		font-size: 0.9rem;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.8);
		font-family: -apple-system, BlinkMacSystemFont, sans-serif;
	}
	
	.rodape-links {
		list-style: none;padding: 0;margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, sans-serif;
	}
	
	.rodape-links li {
		margin-bottom: 10px;
	}
	
	.rodape-links a {
		color: rgba(255, 255, 255, 0.8);
		text-decoration: none;
		font-size: 0.9rem;
		transition: color 0.2s ease, padding-left 0.2s ease;
	}
	
	.rodape-links a:hover {
		color: var(--ouro);
		padding-left: 5px;
	}
	
	.rodape-linhas-fundo {
		background-color: #061222;
		text-align: center;
		padding: 15px 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.05);
		font-family: -apple-system, BlinkMacSystemFont, sans-serif;font-size: 0.8rem;
		color: rgba(255, 255, 255, 0.5);
	}
	
	.rodape-linhas-fundo p {
		margin: 0;
	}
	
	/* ==========================================================================
	9. RESPONSIVIDADE ADAPTATIVA GLOBAL (TELEMÓVEIS)
	========================================================================== */
	@media (max-width: 900px) {
		.grelha-conteudo {
			grid-template-columns: 1fr;
			/* Quebra as duas colunas para pilhas verticais */
		gap: 30px;
		}
	
		.oracao-principal {
			padding: 25px;
		}
	
		.oracao-principal h2 {
			font-size: 1.8rem;
		}
	
		.rodape-contentor {
			flex-direction: column;
			gap: 30px;
			text-align: center;
		}
	
		.rodape-links a:hover {
			padding-left: 0;
		}
	}