/* Reset Básico e Fontes */
body, h1, h2, p, ul {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

html {
    overflow-x: hidden;
}
body {
    line-height: 1.6;
    max-width: 100%;
    /* A regra de overflow foi movida para o elemento HTML para maior eficácia */
}

/* Cabeçalho */
header .topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    border-bottom: 1px solid #ddd;
}

header .logo img {
    max-height: 60px;
}

header .info-hora {
    text-align: right;
    font-size: 0.9em;
    color: #555;
}

.header-video-link {
    text-align: right; /* Alinha o link à direita */
}

/* Estilo genérico para botões com efeito de fogo */
.btn-fire {
    font-size: 0.9em;
    padding: 8px 15px;
    white-space: nowrap;
    background: linear-gradient(to right, #ff4500, #ff8c00); /* Cor de fogo - Vermelho alaranjado */
    color: white !important; /* !important para garantir a cor do texto */
    border: none;
    border-radius: 5px; /* Adicionado para consistência */
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.5); /* Sombra para destacar */
    animation: fireGlow 2s infinite alternate; /* Animação de brilho suave */
    transition: all 0.3s ease; /* Transição suave para outras interações */
    text-decoration: none; /* Remove sublinhado se usado em <a> */
    cursor: pointer;
}

.btn-fire:hover {
    background: linear-gradient(to right, #ff8c00, #ff4500); /* Inverte o gradiente no hover */
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.8);
    transform: scale(1.05); /* Pequeno zoom no hover */
}


@keyframes fireGlow {
    from {
        box-shadow: 0 0 8px rgba(255, 69, 0, 0.4);
    }
    to {
        box-shadow: 0 0 15px rgba(255, 69, 0, 0.8);
    }
}


/* Estilo para o widget de clima no cabeçalho */
#clima-widget-header {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre o texto e o botão */
    font-size: 0.9em;
    color: #555;
}

/* Estilo para o link "Ver Clima Completo" no cabeçalho */
.btn-detalhes-clima-header {
    background-color: #005a9c; /* Cor primária */
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Evita quebra de linha */
}

.btn-detalhes-clima-header:hover {
    background-color: #004170; /* Cor mais escura no hover */
}


nav {
    background-color: #005a9c; /* Cor principal sugerida */
    padding: 10px 5%;
    position: relative; /* Adicionado para o menu responsivo */
}

nav .menu-principal {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav .menu-principal li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

/* Estilos do Submenu */
.has-submenu {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #005a9c; /* Cor de fundo do menu principal */
    border: 1px solid #004170;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 200px;
    z-index: 1000;
}

.has-submenu:hover .submenu {
    display: block;
}

.submenu li {
    border-bottom: 1px solid #004170;
}

.submenu li:last-child {
    border-bottom: none;
}

.submenu li a {
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
    font-weight: normal;
    white-space: nowrap; /* Evita quebra de linha em itens longos */
}

.submenu li a:hover {
    background-color: #004170;
}


/* Conteúdo Principal */
main {
    padding: 20px 5%;
}

.slider-container {
    background-color: #f4f4f4;
    text-align: center;
    padding: 80px 20px;
    margin-bottom: 30px;
}

.noticias-grid, .noticias-grid-full {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
}

.noticias-grid article {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
}

/* Rodapé */
footer {
    background-color: #005a9c;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 30px;
}

/* Regra de Responsividade */
@media (max-width: 768px) {
    header .topo {
        flex-direction: column;
        gap: 10px;
    }
}

/* --- Estilos do Slider --- */
.slider-container {
    position: relative;
    width: 100%;
    height: 500px; /* Altura do slider, ajuste conforme necessário */
    overflow: hidden;
    background-color: #f4f4f4;
    padding: 0;
    margin-bottom: 30px;
}

/* CSS CORRIGIDO */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: none; /* **NOVO:** Torna o slide invisível não clicável */
}

.slide.active {
    opacity: 1;
    pointer-events: auto; /* **NOVO:** Torna o slide ativo clicável novamente */
}

.slide-content {
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente para o texto */
    color: white;
    padding: 20px 40px;
    border-radius: 8px;
    max-width: 80%;
}

.slide-content h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.slide-content p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.btn-slider {
    background-color: #005a9c;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-slider:hover {
    background-color: #004170;
}

@media (max-width: 768px) {
    .slider-container {
        height: 50vh;
    }
    .slide-content h1 {
        font-size: 1.8em;
    }
    .slide-content p {
        font-size: 1em;
    }
}

/* Adicione este código ao final da seção de estilos do slider principal */

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 20px; /* Alinha o ícone verticalmente */
    transition: background-color 0.3s;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.slider-btn.prev {
    left: 20px;
}

.slider-btn.next {
    right: 20px;
}

/* --- Estilos dos Cards de Notícia (ATUALIZADO) --- */
.conteudo-principal {
    background-color: #fff; /* Fundo branco para a seção */
}
.conteudo-principal h2 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
    color: #333;
}
.noticias-grid {
    display: grid;
    /* **NOVO: Cria o layout de 3 colunas** */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
}
.noticia-card {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}
.noticia-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.noticia-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.noticia-card-imagem-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.noticia-card-imagem-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.noticia-card:hover .noticia-card-imagem-container img {
    transform: scale(1.05);
}
.noticia-card-conteudo {
    padding: 20px;
    flex-grow: 1; /* Faz esta área crescer e empurrar o footer para baixo */
}
.noticia-card-conteudo h3 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #003B55;
}
.noticia-card-conteudo p {
    font-size: 0.95em;
    line-height: 1.6;
    color: #666;
    margin-bottom: 0;
}
.noticia-card-footer {
    padding: 0 20px 20px 20px; /* Padding apenas no rodapé do card */
}
.btn-leia-mais {
    display: inline-block;
    background-color: transparent;
    color: #005a9c;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: color 0.3s;
}
.btn-leia-mais:hover {
    color: #003B55;
}

/* Responsividade para a grade de notícias */
@media (max-width: 1024px) {
    .noticias-grid, .noticias-grid-full {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas para tablets */
    }
}
@media (max-width: 767px) {
    .noticias-grid, .noticias-grid-full {
        grid-template-columns: 1fr; /* 1 coluna para celulares */
    }
}

/* Estilos para Páginas de Conteúdo (Sobre, Contato, etc.) */
.subtitulo-pagina {
    font-size: 1.2em;
    color: #666;
    margin-top: -10px;
}
.conteudo-sobre h2 {
    color: #005a9c;
    border-left: 4px solid #005a9c;
    padding-left: 10px;
    margin-top: 30px;
}
.conteudo-sobre ul {
    list-style-position: inside;
}

/* ============================================= */
/* --- ESTILO DEFINITIVO PARA FORMULÁRIOS --- */
/* ============================================= */

/* Estilos para a Página de Contato */
.contato-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-top: 30px;
}
.contato-info h3 {
    color: #005a9c;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Classes do Formulário */
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}
.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
    font-size: 1em;
}

.btn-submit {
    display: inline-block;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    color: white;
    background-color: #005a9c;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}
.btn-submit:hover {
    background-color: #004170;
}

/* Alertas de Feedback do Formulário */
.alert-success {
    padding: 15px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
}
.alert-danger {
    padding: 15px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
}

/* Responsividade para a página de contato */
@media (max-width: 800px) {
    .contato-container {
        grid-template-columns: 1fr;
    }
}

/* --- Estilos da Seção de Depoimentos --- */
.depoimentos-container {
    background-color: #f9f9f9;
    padding: 50px 5%;
    text-align: center;
}
.depoimentos-container h2 {
    margin-bottom: 30px;
    font-size: 2em;
    color: #333;
}
.depoimentos-slider {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    min-height: 250px; /* Altura mínima para evitar "pulos" de layout */
}
.depoimento-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.depoimento-item.active {
    opacity: 1;
}
.depoimento-texto {
    font-size: 1.2em;
    font-style: italic;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}
.depoimento-autor {
    font-weight: bold;
    font-size: 1.1em;
    color: #005a9c;
}
.depoimento-relacao {
    color: #777;
    font-size: 0.9em;
}

/* ========================================================== */
/* --- ESTILO FINAL E CORRIGIDO PARA WIDGETS DA HOME --- */
/* ========================================================== */

/* O Container Principal dos Widgets */
.home-widgets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 40px 5%;
    background-color: #f4f7f6; /* Cor de fundo da seção inteira */
    align-items: start; /* <-- A CORREÇÃO PRINCIPAL: Alinha os cards no topo */
}

/* Estilo de CARD a ser aplicado a AMBOS os widgets para consistência */
.acesso-rapido,
.proximos-eventos {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

/* Estilo dos títulos dos widgets */
.home-widgets h3 {
    font-size: 1.5em;
    color: #005a9c;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Estilos específicos do Acesso Rápido */
.acesso-rapido .widget-link {
    display: block;
    background-color: #f4f4f4;
    padding: 15px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}
.acesso-rapido .widget-link:hover {
    background-color: #005a9c;
    color: white;
}
.acesso-rapido .widget-link:last-child {
    margin-bottom: 0;
}

/* ========================================================== */
/* --- NOVO ESTILO COMPACTO PARA PRÓXIMOS EVENTOS --- */
/* ========================================================== */

/* Estilo do container principal do widget */
.proximos-eventos {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.proximos-eventos ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estilo de cada item da lista (cada evento) */
.proximos-eventos li {
    padding: 15px 10px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease-in-out;
}

.proximos-eventos li:last-child {
    border-bottom: none;
}

.proximos-eventos li:hover {
    background-color: #f9f9f9;
    border-radius: 5px;
}

/* O Título do evento */
.evento-titulo {
    display: block; /* Garante que o título ocupe uma linha */
    font-size: 1.1em;
    color: #333;
    font-weight: 600;
    margin-bottom: 5px; /* Espaço entre o título e a data */
}

/* A linha de metadados (ícone e data) */
.evento-meta-data {
    display: flex;
    align-items: center;
    gap: 8px; /* Espaço entre o ícone e o texto da data */
    font-size: 0.9em;
    color: #666;
}

.evento-meta-data svg {
    flex-shrink: 0; /* Impede que o ícone seja espremido */
}

/* Responsividade */
@media (max-width: 992px) { /* Ponto de quebra um pouco maior para tablets */
    .home-widgets {
        grid-template-columns: 1fr;
    }
}

/* --- Estilos da Seção de Turmas --- */
.turmas-container {
    padding: 40px 5%;
}
.turmas-container h2 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
    color: #333;
}
.turmas-swiper {
    width: 100%;
    padding: 10px 0 40px 0; /* Espaço para paginação */
}
.turma-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.turma-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.turma-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.turma-card-content h3 {
    margin-top: 0;
    color: #005a9c;
}
.turma-info { font-size: 0.9em; }
.turma-preco {
    font-size: 1.2em;
    color: #28a745;
    margin-top: auto; /* Empurra para o final */
}
.btn-matricula {
    display: block;
    background-color: #28a745;
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 15px;
}
.btn-matricula:hover {
    background-color: #004170;
}
.turmas-swiper .swiper-button-next,
.turmas-swiper .swiper-button-prev {
    color: #005a9c;
}
.turmas-swiper .swiper-pagination-bullet-active {
    background: #005a9c;
}
/* Adicione esta regra dentro da seção de estilos do carrossel de turmas */
.turma-idade {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
    margin-top: -5px; /* Puxa um pouco para cima */
}



/* --- Estilos da Paginação --- */
.paginacao {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
.paginacao ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px;
}
.paginacao a {
    display: block;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #005a9c;
    background-color: #fff;
    transition: background-color 0.3s, color 0.3s;
}
.paginacao a:hover {
    background-color: #f4f4f4;
}
.paginacao .pagina-ativa a {
    background-color: #005a9c;
    color: white;
    border-color: #005a9c;
    cursor: default;
}

/* --- Estilos do Botão Voltar ao Topo --- */
.scroll-top-btn {
    position: fixed; /* Fica fixo na tela */
    bottom: 30px;
    right: 30px;
    z-index: 999; /* Garante que fique acima de outros elementos */
    
    background-color: #fb0606; /* Cor principal do site */
    color: white;
    border: none;
    border-radius: 50%; /* Deixa o botão redondo */
    width: 50px;
    height: 50px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    text-decoration: none;
    
    /* Inicia escondido e com transição suave */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

/* Classe que será adicionada via JavaScript para mostrar o botão */
.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background-color: hsl(131, 93%, 47%); /* Cor um pouco mais escura ao passar o mouse */
}

/* --- Estilos para o Conteúdo de Páginas Dinâmicas --- */
.conteudo-pagina {
    line-height: 1.7; /* Aumenta o espaçamento entre as linhas para melhor leitura */
    font-size: 1.1em;
}
.conteudo-pagina p {
    margin-bottom: 1.2em;
}
.conteudo-pagina h2 {
    color: #005a9c;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}
.conteudo-pagina ul, .conteudo-pagina ol {
    padding-left: 25px;
    margin-bottom: 1.2em;
}

/* --- Estilos da Nova Seção de Contagem Regressiva na Home --- */
.home-contagem-container {
    background: #f4f7f6; /* Um cinza bem claro para destacar a seção */
    text-align: center;
    padding: 50px 5%;
}

.home-contagem-container h2 {
    font-size: 1.2em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 10px;
}

.home-contagem-container h3 {
    font-size: 2.2em;
    color: #004170;
    margin-top: 0;
    margin-bottom: 30px;
}

/* Reutilizando e ajustando o estilo do timer para esta seção */
.home-contagem-container .contagem-regressiva-timer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap; /* Garante que os blocos quebrem a linha em telas pequenas */
}

.home-contagem-container .tempo-bloco {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    min-width: 90px;
}

.home-contagem-container .tempo-bloco span {
    font-size: 2.5em; /* Números maiores */
    color: #005a9c;
}

/* Estilo para um botão principal */
.btn-principal {
    background-color: #005a9c;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: background-color 0.3s;
    font-size: 1.1em;
}

.btn-principal:hover {
    background-color: #004170;
}

/* --- Estilos Modernos para contagem-regressiva.php --- */

/* Seção de herói com imagem de capa */
.contagem-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #0f0ce0;/* fundo da contagem regressiva */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 60px 20px;
}
.contagem-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.contagem-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}
.contagem-hero h1 {
    font-size: 3.5em;
    margin-bottom: 10px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.contagem-acontecera {
    background-color: #005a9c;
    font-size: 1.5em;
    margin-bottom: 10px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.contagem-hero .subtitulo-pagina {
    font-size: 1.3em;
    line-height: 1.5;
    color: #e0e0e0;
    max-width: 600px;
    margin: 0 auto 30px auto;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Seção do Timer */
.contagem-timer-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #f9f9f9;
}

/* **REGRA PRINCIPAL PARA O ALINHAMENTO** */
.contagem-regressiva-timer {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap; 
}
.tempo-bloco-full {
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 25px 35px;
    min-width: 140px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.tempo-bloco-full:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.tempo-bloco-full .valor {
    display: block;
    font-size: 4em;
    font-weight: 700;
    color: #005a9c;
    line-height: 1;
    margin-bottom: 5px;
}
.tempo-bloco-full .label {
    display: block;
    font-size: 1.1em;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estilos da data do evento */
.evento-data {
    text-align: center;
    font-size: 1.1em;
    color: #666;
    margin-top: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.evento-data strong { color: #333; }
.evento-data svg { width: 20px; height: 20px; stroke-width: 2; }

/* ... (suas media queries de responsividade continuam aqui) ... */

/* Responsividade básica */
@media (max-width: 768px) {
    .contagem-hero h1 {
        font-size: 2.0em;
    }
    .contagem-hero .subtitulo-pagina {
        font-size: 1em;
    }
    .tempo-bloco-full {
        min-width: 17px;
        padding: 15px 20px;
    }
    .tempo-bloco-full .valor {
        font-size: 1.5em; /* aumenta o numero no celular e tablet - contagem-regressiva.php */
    }
    .tempo-bloco-full .label {
        font-size: 0.9em;
    }
    .contagem-regressiva-timer-full {
        gap: 15px;
    }
}

/* ===================================================================== */
/* --- RESPONSIVIDADE PARA A SEÇÃO DE CONTAGEM REGRESSIVA DA HOME --- */
/* ===================================================================== */

/* Para Telas de Tablet (até 768px de largura) */
@media (max-width: 768px) {
    .home-contagem-container h3 {
        font-size: 1.8em; /* Diminui o título principal do evento */
    }

    .home-contagem-container .contagem-regressiva-timer {
        gap: 15px; /* Diminui o espaço entre os blocos */
    }

    .home-contagem-container .tempo-bloco {
        min-width: 80px; /* Diminui a largura mínima dos blocos */
        padding: 12px;   /* Diminui o preenchimento interno */
    }

    .home-contagem-container .tempo-bloco span {
        font-size: 2em; /* Reduz o tamanho do número */
    }
}


/* Para Telas de Celular (até 480px de largura) */
@media (max-width: 480px) {
    .home-contagem-container h2 {
        font-size: 1em; /* Diminui o título "Nosso Próximo Grande Evento" */
    }
    
    .home-contagem-container h3 {
        font-size: 1.5em; /* Diminui ainda mais o título principal */
    }

    .home-contagem-container .contagem-regressiva-timer {
        gap: 10px; /* Diminui ainda mais o espaço */
    }

    .home-contagem-container .tempo-bloco {
        min-width: 55px; /* Blocos ainda menores */
        padding: 10px 5px;
        font-size: 1.2em; /* Diminui o texto "Dias", "Horas", etc. */
    }

    .home-contagem-container .tempo-bloco span {
        font-size: 1.5em; /* Números ainda menores para caber na tela */
    }

    .btn-principal {
        font-size: 1em; /* Diminui o botão "Ver Detalhes" */
        padding: 12px 25px;
    }
}

/* --- Estilos da Enquete --- */
.enquete-container { background-color: #f4f7f6; padding: 40px 5%; }
#enquete-wrapper { max-width: 500px; margin: 0 auto; background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
#enquete-wrapper h4 { margin-top: 0; color: #003B55; font-size: 1.2em; }
.form-check { margin-bottom: 10px; }
.form-check label { margin-left: 8px; cursor: pointer; }
.btn-votar { margin-top: 15px; background: #005a9c; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }
.resultado-item { margin-bottom: 12px; }
.resultado-label { font-size: 0.9em; margin-bottom: 4px; }
.resultado-barra { background: #e9ecef; border-radius: 5px; height: 20px; overflow: hidden; }
.resultado-barra div { background: #28a745; height: 100%; transition: width 0.5s ease-in-out; }
.total-votos { font-size: 0.8em; color: #666; text-align: right; margin-top: 10px; }

/* ============================================= */
/* --- Estilos para a Página Portal de Apps --- */
/* ============================================= */
.link-app {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    gap: 25px; /* Espaço entre o ícone e o texto */
    transition: box-shadow 0.3s, transform 0.3s;
}

.link-app:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.link-app img {
    max-width: 64px;
    height: auto;
    border-radius: 10px;
}

.link-app-info {
    flex-grow: 1; /* Faz esta área ocupar o espaço restante */
}

.link-app-info h4 {
    margin: 0 0 5px 0;
    color: #003B55;
    font-size: 1.2em;
}

.link-app-info p {
    margin: 0 0 15px 0;
    color: #666;
    font-size: 0.95em;
}

.btn-app {
    display: inline-block;
    background-color: #005a9c; /* Usa a cor primária */
    color: white;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-app:hover {
    background-color: #004170; /* Usa a cor primária hover */
}

//* --- CAPTCHA Moderno e Elegante --- */
.captcha-container {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    font-family: 'Poppins', sans-serif;
    color: #333;
    transition: box-shadow 0.3s ease;
}

.captcha-container:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.captcha-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.captcha-option:hover {
    background: #f0f8ff;
    border-color: #0077ff;
}

.captcha-option input[type="radio"] {
    accent-color: #0077ff; /* azul moderno para o botão */
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.captcha-option label {
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

/* Remove o último espaçamento extra */
.captcha-option:last-child {
    margin-bottom: 0;
}

/* ================================================= */
/* --- Layout em Grid para o Portal de Aplicativos --- */
/* ================================================= */

.portal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Cria 4 colunas de tamanho igual */
    gap: 25px; /* Espaço entre os cards */
}

/* Garante que os cards dentro do grid se comportem bem */
.portal-grid .link-app {
    height: 100%; /* Faz com que todos os cards na mesma linha tenham a mesma altura */
}


/* --- Responsividade do Grid de Aplicativos --- */

/* Para telas de tablet (até 1024px) */
@media (max-width: 1024px) {
    .portal-grid {
        grid-template-columns: repeat(2, 1fr); /* Mostra 2 colunas */
    }
}

/* Para telas de celular (até 767px) */
@media (max-width: 767px) {
    .portal-grid {
        grid-template-columns: 1fr; /* Mostra 1 coluna */
    }
}

/* NOVO LINK PÁRA CASA DAS LEIS */

/* A classe principal que cria o layout em grid */
.links {
    display: grid;
    /* Cria 4 colunas com largura igual */
    grid-template-columns: repeat(4, 1fr);
    /* Espaçamento entre as colunas e linhas */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto; /* Centraliza o container */
}

/* Estilo para cada item de link individual */
.link-item {
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    color: inherit; /* Faz o link herdar a cor do texto do body */
    padding: 2px;
    border-radius: 2px;
    transition: background-color 0.3s ease; /* Efeito suave na transição */
}

.link-item:hover {
    background-color: #e9e9f3; /* Cor de fundo sutil ao passar o mouse */
}

/* Estilo para o título dentro do link */
.link-item h3 {
    margin: 0 0 8px 0; /* Remove margem padrão e adiciona espaço abaixo */
    color: #0056b3;
    font-size: 0.9em;
}

/* Estilo para a descrição dentro do link */
.link-item p {
    margin: 0;
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
}

/* Media Query para telas menores (Responsividade) */
@media (max-width: 900px) {
    .links {
        /* Muda para 2 colunas em tablets */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .links {
        /* Muda para 1 coluna em celulares */
        grid-template-columns: 1fr;
    }
}

/* ========================================================== */
/* --- ESTILO DA SEÇÃO DE CLIMA (HOME) --- */
/* ========================================================== */

.home-clima-container {
    background: #f4f7f6; /* Fundo da seção para separar do resto */
    padding: 50px 5%;
}

.weather-container {
    max-width: 100%; /* Largura do card */
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.clima-titulo-secao {
    font-size: 1.5em;
    color: #005a9c;
    margin-bottom: 25px;
}

.weather-container .city {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.weather-container .date {
    color: #555;
    font-size: 1rem;
    margin-bottom: 20px;
}

.weather-container .container-img img {
    width: 100px;
    height: 100px;
}

.weather-container .container-temp {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 3.5rem;
    font-weight: bold;
    color: #222;
    margin: 5px 0;
    cursor: pointer;
}

.weather-container .weather {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.weather-container .low-high {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    word-wrap: break-word; /* Garante a quebra de linha para evitar overflow */
    word-break: break-all;
}

/* Adiciona estilo ao novo botão "Ver Detalhes" */
.btn-detalhes-clima {
    display: inline-block;
    background-color: #005a9c; /* Cor primária do site */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.btn-detalhes-clima:hover {
    background-color: #004170; /* Cor mais escura no hover */
}

/* ========================================================== */
/* --- ESTILOS DO NOVO SISTEMA DE POP-UP --- */
/* ========================================================== */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup-container {
    position: fixed;
    z-index: 1001;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    display: none; /* Começa escondido */
    animation: fadeIn 0.4s ease-out;
}
.popup-close-btn {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 28px;
    color: #aaa;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
}
.popup-close-btn:hover { color: #333; }
/* CSS CORRIGIDO E APRIMORADO */
.popup-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 20px; /* Espaçamento padrão */
    padding-top: 35px; /* Mais espaço no topo para o botão de fechar */
    padding-right: 35px; /* Mais espaço à direita para o botão de fechar */
    text-align: center; /* Centraliza o conteúdo por padrão */
    box-sizing: border-box; /* Garante que o padding não quebre o layout */
}
/* Posições */
.popup-bottom_right { bottom: 20px; right: 20px; animation: slideInUp 0.5s; }
.popup-bottom_left { bottom: 20px; left: 20px; animation: slideInUp 0.5s; }
.popup-top_right { top: 20px; right: 20px; animation: slideInDown 0.5s; }
.popup-top_left { top: 20px; left: 20px; animation: slideInDown 0.5s; }
.popup-top_bar { top: 0; left: 0; width: 100%; border-radius: 0 !important; animation: slideInDown 0.5s; }
.popup-bottom_bar { bottom: 0; left: 0; width: 100%; border-radius: 0 !important; animation: slideInUp 0.5s; }

/* Animações */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideInDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================= */
/* --- ESTILOS DO MENU RESPONSIVO (HAMBÚRGUER) --- */
/* ============================================= */

/* O contêiner da navegação precisa ser relativo para posicionar o menu dropdown */

/* Estilo do botão hambúrguer */
.menu-toggle {
    display: none; /* Escondido por padrão em telas grandes */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* Garante que fique acima do conteúdo */
}

.menu-toggle .bar {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* Animação do botão para 'X' */
.menu-toggle.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}
.menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}


/* Media Query para telas móveis */
@media (max-width: 768px) {
    /* Ajusta o padding da nav para alinhar o botão */
    nav {
        display: flex;
        justify-content: flex-end; /* Alinha o botão à direita */
    }

    .menu-toggle {
        display: flex; /* Mostra o botão em telas pequenas */
    }

    nav .menu-principal {
        display: none; /* Esconde a lista de links */
        position: absolute;
        top: 100%; /* Posiciona abaixo da barra de navegação */
        right: 0;
        background-color: #005a9c;
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 1000; /* Garante que o menu fique na frente de outros elementos */
    }

    nav .menu-principal.active {
        display: flex; /* Mostra o menu quando ativo */
    }

    nav .menu-principal li {
        width: 100%;
        text-align: center;
    }

    nav .menu-principal li a {
        padding: 15px 0;
        display: block;
        width: 100%;
    }
}

/* ============================================= */
/* --- ESTILOS DA PÁGINA DE NOTÍCIA SINGLE --- */
/* ============================================= */

.noticia-single-main h1 {
    font-size: 2.5em;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

.info-publicacao {
    color: #888;
    margin-bottom: 25px;
    font-size: 0.9em;
}

img.imagem-destaque {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    margin-bottom: 30px;
    border-radius: 8px;
}

.single-noticia-content {
    line-height: 1.8;
    font-size: 1.1em;
    color: #333;
}

.single-noticia-content p {
    margin-bottom: 1.5em;
}

/* Responsividade para a página de notícia single */
@media (max-width: 768px) {
    .noticia-single-main h1 {
        font-size: 1.8em; /* Título menor no mobile */
    }

    img.imagem-destaque {
        max-height: 250px; /* Altura máxima menor no mobile */
    }

    .single-noticia-content {
        font-size: 1em; /* Tamanho de fonte ligeiramente menor para mobile */
    }
}

/* ============================================= */
/* --- ESTILOS DA PÁGINA DE GALERIAS --- */
/* ============================================= */

.galerias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas por padrão */
    gap: 25px;
}

.galeria-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: #fff;
}

.galeria-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.galeria-card .imagem-container {
    position: relative;
    width: 100%;
    height: 200px;
}

.galeria-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fotos-contador {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.9em;
}

.galeria-card-content {
    padding: 15px;
}

.galeria-card-content h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.1em;
}

.galeria-card-content small {
    color: #777;
}

/* Responsividade para a grade de galerias */
@media (max-width: 1024px) {
    .galerias-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas para tablets */
    }
}

@media (max-width: 768px) {
    .galerias-grid {
        grid-template-columns: 1fr; /* 1 coluna para celulares */
        gap: 20px;
    }
}

/* ============================================= */
/* --- ESTILOS DA PÁGINA DE CALENDÁRIO --- */
/* ============================================= */

/* Pequenos ajustes visuais no FullCalendar */
.fc {
    max-width: 1100px;
    margin: 0 auto;
}
.fc-event {
    cursor: pointer; /* Muda o cursor para indicar que o evento é clicável */
}

/* Ajustes de responsividade para o FullCalendar */
@media (max-width: 768px) {
    .fc-toolbar-title {
        font-size: 1.2em; /* Reduz o tamanho do título do mês/ano */
    }
    .fc-button {
        padding: 0.5em 0.8em; /* Ajusta o padding dos botões */
        font-size: 0.8em; /* Reduz o tamanho da fonte dos botões */
    }
    .fc-daygrid-day-number {
        font-size: 0.8em; /* Reduz o tamanho dos números dos dias */
    }
    .fc-event-title {
        font-size: 0.7em; /* Reduz o tamanho do título do evento */
    }
    .calendar-wrapper {
        overflow-x: auto;
        padding-bottom: 10px; /* Espaço para a barra de rolagem */
        -webkit-overflow-scrolling: touch; /* Rolagem mais suave em iOS */
    }
}

/* --- Estilos para remover inline styles --- */

/* Logo no cabeçalho */
header .logo img {
    max-height: 40px;
}

/* Logo no rodapé */
footer .logo img {
    max-height: 60px;
}

/* Botão flutuante do WhatsApp */
.whatsapp-float.online {
    background-color: #25D366; /* Verde WhatsApp */
}

.whatsapp-float.offline {
    background-color: #6c757d; /* Cinza */
}

/* Ícone SVG do WhatsApp */
.whatsapp-icon svg {
    width: 32px !important;
    height: 32px !important;
    fill: white !important;
    min-width: 32px !important; /* Garante que não encolha */
    min-height: 32px !important; /* Garante que não encolha */
    max-width: 32px !important; /* Garante que não estique */
    max-height: 32px !important; /* Garante que não estique */
}

/* Estilos para a página de vídeo */
.video-container {
    text-align: center;
    padding: 20px 5%; /* Adicionado 5% de padding lateral para responsividade */
}

.video-container h1 {
    margin-bottom: 20px;
    color: #005a9c;
}

.video-wrapper {
    max-width: 800px; /* Define a largura máxima do vídeo */
    margin: 0 auto; /* Centraliza o vídeo */
    background-color: #000; /* Fundo para o player */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.video-wrapper video {
    display: block; /* Remove espaços extras abaixo do vídeo */
    width: 100%;
    height: auto;
}

/* --- Estilos do Contador de Visitas --- */
.visitor-counter {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

.visitor-counter p {
    margin: 0;
    font-size: 0.9em;
    color: #e0e0e0;
}

/* --- Estilos para a Seção do Versículo do Dia (REFINADO) --- */
.versiculo-container {
    background: linear-gradient(to bottom, #d2691e, #b22222); /* Gradiente de fogo */
    color: white; /* Cor de texto padrão para branco */
    padding: 40px 5%;
    text-align: center;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.versiculo-container h3 {
    font-size: 2.2em;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    font-family: 'Caveat', cursive; /* Usando a mesma fonte da modal */
}

.versiculo-container blockquote {
    font-size: 1.3em;
    font-style: italic;
    color: #fff; /* Cor do texto do versículo para branco */
    line-height: 1.6;
    margin: 0 auto 20px auto;
    max-width: 800px;
    position: relative;
    padding: 0 20px;
}

.versiculo-container blockquote::before,
.versiculo-container blockquote::after {
    content: '" ';
    font-size: 3em;
    color: #fff; /* Cor das aspas para branco */
    position: absolute;
    opacity: 0.5; /* Opacidade para um efeito sutil */
}

.versiculo-container blockquote::before {
    left: 0;
    top: -10px;
}

.versiculo-container blockquote::after {
    right: 0;
    bottom: -30px;
    transform: rotate(180deg);
}

.versiculo-container .versiculo-referencia {
    font-size: 1.4em; /* Aumentando a referência */
    font-weight: bold;
    color: #ffdead; /* Cor 'NavajoWhite' para a referência, igual na modal */
    margin-top: 10px;
    font-family: 'Caveat', cursive;
}


/* Responsividade para o Versículo do Dia */
@media (max-width: 768px) {
    .versiculo-container h3 {
        font-size: 1.5em;
    }
    .versiculo-container blockquote {
        font-size: 1.1em;
        padding: 0 10px;
    }
    .versiculo-container blockquote::before,
    .versiculo-container blockquote::after {
        font-size: 2em;
    }
    .versiculo-referencia {
        font-size: 1em;
    }
}

/* Adiciona espaçamento entre as seções principais */
main section:not(:last-child) {
    margin-bottom: 30px; /* Ajuste este valor conforme necessário */
}

/* ============================================= */
/* --- BOTÃO PÚBLICO DE DEIXAR DEPOIMENTO --- */
/* ============================================= */

.depoimento-call-to-action {
    text-align: center;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

/* Reutilizando e ajustando .btn-principal que já existe */
.depoimento-call-to-action .btn-principal {
    background-color: #28a745; /* Verde para combinar com "sucesso" e "aprovação" */
    color: white;
    font-weight: bold;
}

.depoimento-call-to-action .btn-principal:hover {
    background-color: #218838; /* Verde mais escuro */
}

/* ============================================= */
/* --- ESTILOS DA MODAL DE VERSÍCULOS --- */
/* ============================================= */

.versiculos-link-container {
    text-align: center;
    margin: 20px 0;
}

/* O fundo da modal (overlay) */
.modal {
    display: none; /* Escondido por padrão */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
}

/* O conteúdo da modal - Estilo aprimorado */
.modal-content {
    background: linear-gradient(to bottom, #d2691e, #b22222); /* Gradiente de fogo (Chocolate -> Firebrick) */
    color: white; /* Cor do texto principal para branco */
    margin: 5% auto;
    padding: 30px 40px;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    position: relative;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    animation: fadeInScale 0.5s ease-out;
}

/* Botão de fechar */
.close-modal-btn {
    color: #f1f1f1; /* Cor mais clara para o botão de fechar */
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 32px;
    font-weight: normal;
    transition: transform 0.2s, color 0.2s;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transform: scale(1.2);
}

.modal-content h2 {
    color: #fff; /* Título em branco */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra para legibilidade */
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 2.2em; /* Fonte do título maior */
    font-family: 'Caveat', cursive; /* Fonte manuscrita para o título */
}

.modal-body {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 15px; /* Espaço para a barra de rolagem */
}

/* Estilo de cada versículo (com mais destaque) */
.versiculo-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Borda mais sutil */
    padding: 20px 5px;
    margin-bottom: 0;
}

.versiculo-item:last-child {
    border-bottom: none;
}

.versiculo-texto {
    font-family: 'Caveat', cursive; /* Fonte manuscrita */
    font-size: 1.8em; /* Tamanho da fonte maior para a leitura */
    color: #fff;
    line-height: 1.6;
    margin: 0;
    position: relative;
    padding: 0 10px;
}

/* Removendo aspas decorativas que não combinam com a fonte */
.versiculo-texto::before {
   display: none;
}

.versiculo-referencia {
    text-align: right;
    font-weight: bold;
    color: #ffdead; /* Cor 'NavajoWhite' para a referência */
    margin-top: 15px;
    font-size: 1.4em;
    font-family: 'Caveat', cursive;
}


.error-message {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 5px;
}

/* Animação de fade-in */
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
}

/* --- Responsividade da Modal de Versículos --- */
@media (max-width: 768px) {
    .modal-content {
        padding: 20px;
        margin: 10% auto;
    }
    .modal-content h2 {
        font-size: 1.8em;
    }
    .versiculo-texto {
        font-size: 1.5em;
    }
    .versiculo-referencia {
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 95%;
        margin: 15% auto;
        padding: 20px 15px;
    }
    .modal-content h2 {
        font-size: 1.5em;
    }
    .versiculo-texto {
        font-size: 1.3em;
    }
    .versiculo-referencia {
        font-size: 1.1em;
    }
    .modal-body {
        padding-right: 5px;
    }
}

/* Se��o Portal do Aluno */
.portal-aluno-container {
    background: linear-gradient(45deg, #007bff, #00d2ff);
    padding: 40px 0;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.portal-aluno-container::before {
    content: '\f501'; /* Font Awesome user-graduate icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 15em;
    color: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    pointer-events: none;
}

.portal-aluno-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.portal-aluno-content h2 {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.portal-aluno-content p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.portal-aluno-content .btn-portal {
    background-color: #fff;
    color: #007bff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.2em;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: inline-block;
}

.portal-aluno-content .btn-portal:hover {
    background-color: #f0f8ff;
    color: #0056b3;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .portal-aluno-container {
        padding: 30px 0; /* Menos padding */
    }

    .portal-aluno-container::before {
        font-size: 10em; /* Icone menor */
    }

    .portal-aluno-content h2 {
        font-size: 2em; /* T�tulo menor */
    }

    .portal-aluno-content .btn-portal {
        padding: 12px 25px; /* Bot�o menor */
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .portal-aluno-container {
        padding: 20px 0; /* Ainda menos padding */
    }

    .portal-aluno-container::before {
        font-size: 8em; /* Icone ainda menor */
    }

    .portal-aluno-content h2 {
        font-size: 1.5em; /* T�tulo ainda menor */
    }

    .portal-aluno-content .btn-portal {
        padding: 10px 20px; /* Bot�o ainda menor */
        font-size: 0.9em;
    }
}