@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
/* Importação da Urbanist - Coloque no topo do seu arquivo CSS */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;800&display=swap');


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Montserrat', sans-serif;
background-color: #fff;
color: #1a1a1a;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; /* Melhora a renderização em sistemas Mac/iOS */
}
.navbar {
width: 100%;
border-bottom: 1px solid rgba(240, 240, 240, 0.7); /* Borda levemente transparente */
padding: 15px 0;
display: flex;
justify-content: center;

/* EFEITO VIDRO EMBAÇADO (Glassmorphism) */
background: rgba(255, 255, 255, 0.8); 
backdrop-filter: blur(12px); 
-webkit-backdrop-filter: blur(12px);

/* POSICIONAMENTO FIXO PARA O EFEITO FUNCIONAR */
position: fixed;
top: 0;
left: 0;
z-index: 9999;

/* ANIMAÇÃO ORIGINAL + TRANSIÇÃO DE SUMIÇO */
animation: revealUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

/* ESTADO ESCONDIDO (Quando descer a página) */
.navbar.nav-hidden {
transform: translateY(-100%);
opacity: 0;
}

.nav-container {
width: 90%;
max-width: 1200px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}

/* COMPENSAÇÃO: Como a nav agora flutua, precisamos empurrar o site para baixo */
body {
padding-top: 70px; 
}




/* === LOGO === */ 

.logo {
display: flex;
align-items: center;
justify-content: center;
/* Removi background, border-radius e height fixo para não criar o "quadrado" */
text-decoration: none;
}

.logo img {
/* Controle o tamanho do seu logo por aqui */
width: 120px; /* Largura desejada para o logo aparecer por inteiro */
height: auto; /* Mantém a proporção original do desenho */
display: block;
}

/* ==== MENU ==== */ 

.menu ul {
display: flex;
list-style: none;
gap: 40px;
}

.menu ul li a {
text-decoration: none;
color: #535353;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.8px;
padding: 5px 0;
transition: all 0.2s ease-out;
display: inline-block;
backface-visibility: hidden;
transform: translateZ(0);
}

.menu ul li a:hover {
color: #212121;
font-weight: 600;
filter: blur(0.4px);
letter-spacing: 1px;
}


/* === Botao Youtube == */ 

.btn-nav {
background-color: #222222;
color: #fff;
padding: 10px 22px;
border-radius: 25px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
}

/* === Botao Waze == */ 
.btn-nav-waze {
background-color: #222222;
color: #fff;
padding: 10px 22px;
border-radius: 25px;
text-decoration: none;
font-size: 12px;
font-weight: 500;
}

/* --- SUBMENU DESKTOP (CARD GRID) --- */
.has-submenu {
position: relative;
}

.submenu-card-container {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(15px);
background: #fff;
width: 520px !important; 
padding: 15px !important;
border-radius: 16px;
box-shadow: 0 15px 50px rgba(0,0,0,0.12);
border: 1px solid #eee;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 9999;
}

.submenu-card-container::before {
content: "";
position: absolute;
top: -8px; 
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: #fff;
border-left: 1px solid #eee;
border-top: 1px solid #eee;
}

.submenu-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 4px 15px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}

.submenu-grid li {
display: block !important;
margin: 0 !important;
}

.submenu-grid li a {
display: flex !important;
align-items: center !important;
padding: 12px 16px !important;
border-radius: 12px;
background: transparent !important;
}

.submenu-grid li a:hover {
background: #f8f8f8 !important;
filter: none !important; /* Remove o blur do menu pai */
}

.submenu-grid li a i {
font-size: 22px !important;
color: #000 !important;
margin-right: 14px !important;
width: 28px;
text-align: center;
}

.submenu-grid li a span {
color: #1a1a1a !important;
font-size: 16px !important;
font-weight: 600 !important;
white-space: nowrap !important;
letter-spacing: -0.4px !important;
}

.has-submenu:hover .submenu-card-container {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(8px);
}

/* --- SUBMENU MOBILE (DENTRO DO OVERLAY) --- */
.mobile-submenu {
list-style: none;
margin-top: 0;
padding: 0;
display: flex; /* Mudamos para flex para a animação funcionar */
flex-direction: column;
gap: 12px; 
border-radius: 10px;

/* EFEITO UP/DOWN */
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;
opacity: 0;
}

/* Quando estiver aberto */
.mobile-submenu.open {
max-height: 500px; /* Valor alto o suficiente para caber tudo */
padding: 15px 0;
opacity: 1;
}

/* Efeito opcional: gira o ícone quando abrir */
.has-submenu.active .ti-chevron-down {
transform: rotate(180deg);
transition: transform 0.3s ease;
}

.mobile-submenu li {
margin: 0 !important;
}

.mobile-submenu li a {
font-size: 18px !important;
color: #000000 !important;
font-weight: 500 !important;
letter-spacing: 0px !important;
}



/* --- SUBMENU DESKTOP (CARD GRID) --- */


.hero {
display: flex;
justify-content: center;
padding-top: 100px;
}

.hero-content {
width: 90%;
max-width: 1100px;
animation: revealUp 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.badge-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 35px;
}

.dot {
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
}

.badge-text {
font-size: 15px;
color: #666;
}

h1 {
font-family: 'Playfair Display', serif;
font-size: 72px; 
line-height: 1.05;
letter-spacing: -2px;
font-weight: 400;
margin-bottom: 30px;
}

h1 em {
font-style: italic;
}

.text-muted {
color: #a0a0a0;
}

.versiculo {
font-size: 15px;
color: #444;
margin-bottom: 40px;
max-width: 650px;
}


/* === Botao de compartilhar ===*/ 

.btn-compartilhar {
display: inline-flex;
align-items: center;
/* Degradê laranja médio com granulado sutil */
background: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='0.3' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #f3722c 0%, #d9480f 50%, #bc3908 100%);
background-blend-mode: overlay;
color: #fff;

/* AJUSTES PARA FICAR MENOR */
padding: 16px 26px;      /* Reduzido de 18px 32px */
font-size: 15px;         /* Reduzido de 18px */
border-radius: 30px;     /* Ajustado para acompanhar o tamanho menor */

text-decoration: none;
font-weight: 600;
gap: 10px;               /* Espaçamento entre ícone/texto levemente menor */
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(217, 72, 15, 0.2);
}

/* Corrigido o seletor de hover para a classe certa */
.btn-compartilhar:hover {
transform: translateY(-2px);
filter: brightness(1.1);
box-shadow: 0 8px 25px rgba(217, 72, 15, 0.3);
}


@keyframes revealUp {
0% { opacity: 0; transform: translateY(30px) scale(0.98); filter: blur(10px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* MENU MOBILE */

.mobile-icon {
display: none;
font-size: 24px;
cursor: pointer;
margin-left: 15px;
}

.mobile-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(255,255,255,0.98);
backdrop-filter: blur(10px);
z-index: 1000;
display: flex;
flex-direction: column;
align-items: flex-start; 
justify-content: center;
transform: translateX(100%);
transition: transform 0.3s ease;
padding-left: 40px; 
}

.mobile-overlay.active {
transform: translateX(0);
}

/* Alvo: Todas as ULs dentro do overlay (inclusive as que aparecem depois) */
.mobile-overlay ul, 
.mobile-overlay ul li ul {
list-style: none;
text-align: left; 
width: 100%;
padding: 0;
margin: 0;
}

/* Garante que o item do submenu tenha o mesmo espaçamento */
.mobile-overlay ul li,
.mobile-overlay ul li ul li { 
margin: 25px 0; 
}

/* PADRONIZAÇÃO DE FONTE: Menu principal e Submenus */
.mobile-overlay ul li a,
.mobile-overlay ul li ul li a {
text-decoration: none;
font-size: 24px;   /* Mantém o tamanho grande */
color: #111;
font-weight: 600;  /* Mantém o peso do texto */
display: block; 
line-height: 1.2;
}

/* Se quiser dar um leve recuo apenas para identificar que é subitem, 
mas mantendo o tamanho da fonte igual: */
.mobile-overlay ul li ul {
padding-left: 20px; 
margin-top: 10px;
}

.close-icon {
position: absolute;
top: 25px;
right: 25px;
font-size: 32px;
cursor: pointer;
color: #111;
}

@media (max-width: 768px) {
.menu, .btn-nav, .submenu-card-container { display: none !important; }
.mobile-icon { display: block; }
h1 { font-size: 42px; }
}

/* Efeito do pão diário */

/* 1. Limpeza de animações conflitantes */
.navbar, .hero-content {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}

/* 2. Estilo do Título (O container pai) */
.hero-title {
font-family: 'Playfair Display', serif;
font-size: 72px;
line-height: 1.2; /* Aumentado levemente para não encavalar na quebra automática */
letter-spacing: -2px;
font-weight: 400;
text-align: left;
max-width: 1100px; /* Ajuste conforme seu layout para controlar onde a quebra começa */
}

/* 3. Efeito de Revelação (O segredo da quebra está no display: inline) */
.reveal-text {
display: inline; /* PERMITE QUE O TEXTO FIQUE NA MESMA LINHA */
position: relative;
white-space: normal; /* Garante que as palavras quebrem sozinhas */

background: linear-gradient(
    to right,
    rgb(26, 26, 26) 0%, 
    rgb(26, 26, 26) 25%, 
    rgba(26, 26, 26, 0.2) 50%, 
    rgba(26, 26, 26, 0) 100% 
);
background-size: 300% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

filter: blur(10px);
animation: smoothReveal 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 4. Ajuste para a cor cinza (Continua inline para não quebrar antes da hora) */
.reveal-text.text-muted {
display: inline; 
background: linear-gradient(
    to right,
    #f3722c 0%, 
    #d9480f 25%, 
    #bc3908 40%, 
    rgba(188, 57, 8, 0.2) 60%, 
    rgba(188, 57, 8, 0) 100%
);
background-size: 300% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation-delay: 0.8s;
}



/* Animação */
@keyframes smoothReveal {
0% {
    background-position: 100% 0;
    filter: blur(10px);
    opacity: 0;
}
20% {
    opacity: 1;
}
100% {
    background-position: 0% 0;
    filter: blur(0px);
}
}

/* 5. Ajuste Mobile Otimizado */
@media (max-width: 768px) {
.hero-title {
    font-size: 42px !important;
    line-height: 1.1;
    letter-spacing: -1px !important;
    margin-bottom: 20px;
    text-align: left; /* Garante alinhamento à esquerda no celular */
}

.reveal-text {
    display: inline; /* Mantém o fluxo contínuo no mobile */
    background-size: 250% 100%; 
}

.reveal-text.text-muted {
    animation-delay: 0.5s; 
}
}


/* Efeito de Revelação Exclusivo para Ministérios */
.reveal-min {
display: inline;
position: relative;
white-space: normal;

/* Gradiente Laranja do Botão */
background: linear-gradient(
    to right,
    #f3722c 0%, 
    #d9480f 25%, 
    #bc3908 40%, 
    rgba(188, 57, 8, 0.2) 60%, 
    rgba(188, 57, 8, 0) 100%
);

background-size: 300% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

filter: blur(10px);
opacity: 0;
transition: opacity 0.5s ease;
}

/* Disparo da animação via JS */
.reveal-min.start-min {
opacity: 1;
animation: smoothRevealMin 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes smoothRevealMin {
0% { background-position: 100% 0; filter: blur(10px); }
100% { background-position: 0% 0; filter: blur(0px); }
}






/* =====  SEÇÃO DA IMAGEM HERO === */




/* --- HERO SECTION --- */
.hero-section {
width: 100%;
/* Garante que nada vaze para os lados */
overflow: hidden; 
line-height: 0;
}

.hero-image-wrapper {
position: relative;
/* Usa a largura total disponível sem estourar a janela */
width: 100%; 
height: auto;
/* Proporção cinematográfica ajustada */
aspect-ratio: 21 / 9; 
overflow: hidden;
}

/* O granulado que você curtiu */
.hero-image-wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='0.2' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
pointer-events: none;
background-blend-mode: overlay;
opacity: 0.5;
}

.hero-image-wrapper img {
width: 100%;
height: 100%;
/* Mantém as proporções da imagem sem achatar */
object-fit: cover;
object-position: center;
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}


/* --- AJUSTE MOBILE (Otimizado) --- */

@media (max-width: 768px) {
.hero-image-full {
    padding: 0; 
    background-color: #000; /* Fundo preto caso a imagem não cubra tudo */
}

.hero-image-wrapper {
    /* 1. Alteramos a proporção para 4 / 3 (mais próximo do original 2000x1500) */
    /* Isso evita que o corte lateral seja muito agressivo */
    aspect-ratio: 4 / 3; 

    width: 100vw;
    height: auto; /* Deixa a altura fluir conforme a largura */

    border-radius: 0px; 
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;

    /* 2. Mudamos para 'contain' se quiser ver a foto INTEIRA sem cortes */
    /* Ou mantemos 'cover' com foco ajustado para ver o principal */
    object-fit: cover; 

    /* 3. Ajuste o foco (ex: 50% 20%) para ver mais o topo ou a base */
    object-position: center 20%; 
}
}


/* --- ESPAÇAMENTO HERO --- */
.hero-image-container {
width: 100%;
/* Espaço entre o menu (ou item anterior) e a Hero */
margin-top: 60px; 

/* Garante que não haja quebra de layout lateral */
display: block;
overflow: hidden;
}

/* Ajuste para telas menores (Mobile) */
@media (max-width: 768px) {
.hero-image-container {
    margin-top: 20px; /* Espaço menor no celular para não empurrar muito o conteúdo */
}
}




/* --- CONTAINER DEPARTAMENTOS --- */

.content-section {
width: 100%;
padding: 80px 0;
background: #fff;
display: flex;
justify-content: center;
}

.content-container {
width: 90%;
max-width: 1200px;
}

/* --- ESTILO DOS TEXTOS --- */
.main-title {
font-size: clamp(32px, 5vw, 64px); /* Tamanho fluido */
font-weight: 600;
line-height: 1.1;
letter-spacing: -2px;
margin-bottom: 35px;
}

.main-title span {
font-family: serif;
font-style: italic;
font-weight: 400;
color: #555;
}

/* --- O BOTÃO PRETO --- */
.btn-demo {
display: inline-flex;
align-items: center;
/* Degradê laranja médio com granulado sutil */
background: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='0.3' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #f3722c 0%, #d9480f 50%, #bc3908 100%);
background-blend-mode: overlay;
color: #fff;
padding: 14px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 500;
margin-bottom: 60px;
transition: 0.3s;
}



.btn-demo:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* --- GRID DE 3 COLUNAS (Alinhado com a imagem) --- */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-bottom: 50px;
}

.feature-col h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
line-height: 1.3;
}

.feature-col h3 em {
font-family: serif;
font-style: italic;
}

.feature-col p {
font-size: 14px;
color: #666;
line-height: 1.6;
}

/* --- O QUADRO DA IMAGEM --- */
.image-block {
width: 100%;
margin-top: 20px;
}

.image-wrapper {
width: 100%;
height: 400px;
border-radius: 4px;
overflow: hidden;
line-height: 0;
/* Adicione esta linha para forçar o contexto de recorte no Safari/Chrome */
-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.image-wrapper img {
display: block;    /* Remove espaços vazios na base da imagem */
width: 100%;
height: 100%;      /* Força a imagem a chegar até o final do card */
object-fit: cover; /* Mantém a proporção sem achatar */
animation: fadeIn 1.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
.features-grid {
    grid-template-columns: 1fr;
}
.main-title {
    font-size: 40px;
}
}



/* === SEÇÃO INSTAGRAM ESTILO FRAMER === */

.trusted-section {
width: 100%;
padding: 60px 0 100px 0;
background: #fff;
display: flex;
justify-content: center;
border-top: none;
}

.trusted-container {
width: 90%;
max-width: 1200px;
}

.trusted-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 40px;
}

.header-right {
display: flex;
justify-content: flex-end;
align-items: flex-start;
padding-top: 20px;
}

.img-reference {
width: 100px;
height: 50px;
object-fit: contain;
display: block;
opacity: 0.8;
transition: opacity 0.3s ease;
}

/* === GRID DE MINIATURAS 150x150 === */
/* Container da Grid */
.logo-grid-layout {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Mantém 4 colunas */
width: 100%;
gap: 2px; /* Deixa as imagens bem "coladas" */
justify-content: center;
}

/* Quadrado da Imagem */
.logo-box {
width: 100%;      /* Agora ele ocupa toda a largura da coluna */
max-width: 280px; /* Aumentei o tamanho máximo */
aspect-ratio: 1 / 1; /* Garante que sempre seja um quadrado perfeito */
overflow: hidden;
background: #f0f0f0;
}

.logo-box img {
width: 100%;
height: 100%;
object-fit: cover; /* Faz a foto preencher o quadrado sem distorcer */
display: block;
transition: transform 0.3s ease;
}

.logo-box:hover img {
transform: scale(1.05); /* Zoom sutil ao passar o mouse */
}

/* === AJUSTE PARA CELULAR === */
@media (max-width: 768px) {
.logo-grid-layout {
    grid-template-columns: repeat(2, 1fr); /* 2 fotos por linha no celular */
    gap: 2px; /* Mantém elas juntas no mobile também */
}

.logo-box {
    max-width: 100%; /* No mobile, elas crescem para preencher a tela */
}
}
.logo-box img {
width: 100%;
height: 100%;
object-fit: cover; /* Preenche o quadrado sem distorcer */
filter: none; /* Cores reais das fotos */
opacity: 1;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-box:hover img {
transform: scale(1.08);
}

/* === AJUSTES DE ESPAÇAMENTO E MOBILE === */

.content-section {
padding-top: 80px;
padding-bottom: 0;
}

@media (max-width: 768px) {
/* Remove o vácuo entre as seções */
.content-section {
    padding-top: 40px;
    padding-bottom: 0 !important;
}

.trusted-section {
    padding-top: 20px !important;
    padding-bottom: 60px;
}

.trusted-header {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

/* Ajuste da Logo do Instagram no mobile */
.header-right {
    padding-top: 0 !important;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.img-reference {
    width: 90px;
    height: 40px;
}

/* Grid de Fotos no Celular */
.logo-grid-layout {
    grid-template-columns: repeat(2, 1fr); /* 2 fotos por linha */
    gap: 10px;
}

.logo-box {
    width: 100%; /* Ocupa a largura da coluna no grid mobile */
    max-width: 160px;
    height: 160px;
}

.image-wrapper {
    height: 250px;
}
}






/* ======== HERO SEU LUGAR É ENTRE NÓS ======================== */ 



.hero-full {
position: relative;
width: 100%;
height: 100vh; /* Ocupa a tela inteira */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.hero-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}

/* Escurece a imagem para dar destaque ao texto */
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); /* Ajuste a opacidade aqui */
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.hero-text-container {
padding: 0 20px;
max-width: 900px;
}

.hero-main-title {
color: #fff;
font-size: clamp(32px, 6vw, 68px);
line-height: 1.1;
font-weight: 400;
margin-bottom: 30px;
letter-spacing: -2px;
}

.hero-main-title em {
font-style: italic;
font-family: 'Playfair Display', serif;
}

/* O botão branco arredondado da imagem */
.btn-hero-white {
display: inline-flex;
align-items: center;
background: #fff;
color: #000;
padding: 12px 28px;
border-radius: 40px;
text-decoration: none;
font-weight: 500;
font-size: 16px;
gap: 10px;
transition: transform 0.3s ease, background 0.3s ease;
}

.btn-hero-white:hover {
transform: scale(1.05);
background: #f0f0f0;
}

/* AJUSTE MOBILE */
@media (max-width: 768px) {
.hero-full {
    height: 80vh; /* Um pouco menor no celular para facilitar o scroll */
}
.hero-main-title {
    font-size: 38px;
    letter-spacing: -1px;
}
}

/*=============== FOOTER PREMIUM =========================*/

.site-footer {
    background: #0a0a0a; /* Preto profundo, mais moderno que o #000 puro */
    color: #fff;
    padding: 80px 0 40px;
    width: 100%;
    font-family: 'Inter', sans-serif; /* Sugestão de fonte limpa */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

/* TOPO DO FOOTER */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.footer-logo img {
    height: 45px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.footer-nav {
    display: flex;
    gap: 40px;
}

.footer-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.footer-nav a:hover {
    opacity: 1;
    color: #f3722c;
}

/* DIVISOR */
.footer-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, rgba(243, 114, 44, 0), rgba(243, 114, 44, 0.4), rgba(243, 114, 44, 0));
    margin-bottom: 30px;
}

/* RODAPÉ DO RODAPÉ (SOCKET) */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-status {
    font-size: 10px;
    color: #555;
    letter-spacing: 1px;
    font-weight: 500;
}

.location-tag {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #222;
}

/* CRÉDITO DO DESENVOLVEDOR */
.footer-dev {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dev-label {
    font-size: 9px;
    color: #444;
    font-weight: 700;
    letter-spacing: 1px;
}

.dev-link {
    font-size: 10px;
    color: #f3722c;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 5px 12px;
    border: 1px solid rgba(243, 114, 44, 0.2);
    border-radius: 4px;
    transition: 0.3s;
}

.dev-link:hover {
    background: #f3722c;
    color: #fff;
    border-color: #f3722c;
}

/* Mobile */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        gap: 40px;
    }

    .footer-nav {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }
    
    .location-tag {
        display: block;
        border: none;
        margin: 5px 0 0 0;
        padding: 0;
    }
}
/* ========= BACK TO TOP ============ */ 


.progress-wrap {
position: fixed;
right: 30px;
bottom: 30px;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.1);
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 200ms linear;

/* EFEITO VIDRO EMBAÇADO */
background: rgba(255, 255, 255, 0.7); /* Branco com transparência */
backdrop-filter: blur(10px);          /* O desfoque do vidro */
-webkit-backdrop-filter: blur(10px);  /* Suporte para Safari */
border: 1px solid rgba(255, 255, 255, 0.3); /* Borda fina para dar brilho ao vidro */
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.progress-wrap i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
color: #000;
}

.progress-wrap svg path { 
fill: none; 
stroke: #000; /* Cor da barrinha que enche */
stroke-width: 4; 
box-sizing:border-box; 
transition: all 200ms linear; 
}



/*Divider Global  com palavra */

.divider-quote {
padding: 80px 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}

.divider-line {
width: 1px;
height: 60px;
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
}

.divider-quote p {
font-family: 'Playfair Display', serif;
font-size: 28px;
color: #1a1a1a;
max-width: 600px;
}

.divider-quote p em {
font-style: italic;
color: #a0a0a0; /* O cinza do seu print */
}




/*END ESTILOS INDEX E GLOBAL */




/*============= ESTILOS DA PÁGINA IGREJA ====================*/

/* --- AJUSTE PARA O BLOCO DE TÍTULO (ESTILO PRINT) --- */

.page-title-section {
width: 100%;
padding: 120px 0 80px 0; /* Respiro generoso para a navbar e para o conteúdo abaixo */
background-color: #fff;
display: flex;
justify-content: center;
}

/* Centralização do Badge (O item que você circulou) */
.page-title-section .badge-row {
display: inline-flex; /* Garante que o conjunto fique no centro */
align-items: center;
gap: 10px;
margin-bottom: 35px;
}

/* O pontinho preto */
.page-title-section .dot {
width: 7px;
height: 7px;
background-color: #000;
border-radius: 50%;
}

/* Texto do Badge */
.page-title-section .badge-text {
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
letter-spacing: 0.5px;
text-transform: none; /* Mantém o estilo natural do print */
}

/* Título Principal */
.page-title-section .hero-title {
max-width: 1000px;
margin-bottom: 30px;
line-height: 1.1;
letter-spacing: -2.5px; /* Deixa o texto mais "junto" como no design moderno */
}

/* O charme do itálico cinza do print */
.page-title-section .hero-title em {
font-family: 'Playfair Display', serif;
font-style: italic;
color: #a0a0a0; /* Cor idêntica à do print enviado */
font-weight: 400;
}

/* Descrição / Versículo abaixo */
.page-title-section .versiculo {
font-size: 18px;
line-height: 1.6;
color: #535353;
max-width: 720px;
font-weight: 400;
}

/* Ajuste para garantir que as animações de revelação funcionem aqui também */
.page-title-section .reveal-text {
display: inline-block;
}

/* MOBILE */
@media (max-width: 768px) {
.page-title-section {
    padding: 100px 20px 50px 20px;
}

.page-title-section .hero-title {
    font-size: 42px !important; /* Tamanho ajustado para celular */
    letter-spacing: -1px;
}
}



/* === DIVISOR HORIZONTAL (ESTILO AD NOSSA IGREJA) === */

.divider-horizontal-container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 0; /* Espaçamento para o conteúdo acima e abaixo não colarem */
background-color: #fff;
}

/* A linha que desaparece nas pontas (fading line) */
.line-side {
flex-grow: 1; /* Faz a linha ocupar o espaço disponível */
height: 1px;
max-width: 300px; /* Limita o tamanho para não ficar uma linha infinita */
background: linear-gradient(to right, 
    rgba(0,0,0,0) 0%, 
    rgba(0,0,0,0.15) 50%, 
    rgba(0,0,0,0) 100%
);
}

/* O Badge central inspirado no seu print */
.badge-dot-center {
margin: 0 20px; /* Espaço entre as linhas e o ponto */
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
border: 1px solid rgba(0,0,0,0.05); /* Círculo quase invisível ao redor */
border-radius: 50%;
}

.divider-horizontal-container .dot-black {
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
/* Mantendo a pulsação sutil para dar vida ao divisor */
animation: pulseBadge 4s infinite ease-in-out;
}

@keyframes pulseBadge {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}

/* Ajuste para telas menores */
@media (max-width: 768px) {
.line-side {
    max-width: 100px; /* Linhas menores no celular */
}
}


/* === DIVISOR MODERNO E INOVADOR === */

.modern-divider-container {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff; /* Fundo limpo como no print */
overflow: hidden;
}

/* A linha com efeito de profundidade */
.beam-line {
position: relative;
height: 1px;
width: 250px;
background: rgba(0, 0, 0, 0.05); /* Linha base quase invisível */
}

/* O "Glow" que dá o ar moderno */
.beam-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, 
    transparent, 
    rgba(243, 114, 44, 0.3), /* O laranja do seu tema */
    transparent
);
animation: beam-move 3s infinite linear;
}

/* O Ponto central com efeito de vidro (Glassmorphism) */
.modern-dot-wrapper {
width: 40px;
height: 40px;
margin: 0 15px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px); /* Efeito de vidro moderno */
border: 1px solid rgba(0, 0, 0, 0.03);
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.dot-inner {
width: 6px;
height: 6px;
background-color: #000; /* O ponto preto clássico do seu print */
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Animação do feixe de luz */
@keyframes beam-move {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

@media (max-width: 768px) {
.beam-line { width: 80px; }
}


/* === SEÇÃO DE INFORMAÇÃO COM FUNDO CINZA === */

.info-section-gray {
width: 100%;
padding: 100px 0;
background-color: #fafafa; /* O cinzinha claro de fundo que você pediu */
display: flex;
justify-content: center;
}

.container-info {
width: 90%;
max-width: 1200px;
display: grid;
grid-template-columns: 1fr 1fr; /* Divide em duas colunas iguais */
gap: 80px; /* Espaço entre texto e imagem */
align-items: center;
}

/* Coluna de Texto */
.info-text .info-title {
font-family: 'Playfair Display', serif;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.2;
color: #1a1a1a;
margin-bottom: 30px;
letter-spacing: -1px;
}

/* O Itálico elegante do print */
.info-text .info-title em {
font-style: italic;
color: #a0a0a0; /* Cinza médio para o destaque */
font-weight: 400;
}

.info-description p {
font-size: 18px;
line-height: 1.6;
color: #535353;
margin-bottom: 20px;
}

/* Coluna da Imagem */
.info-image-wrapper {
width: 100%;
height: 100%;
min-height: 500px;
overflow: hidden;
border-radius: 4px; /* Arredondado sutil */
}

.main-info-img {
width: 100%;
height: 100%;
object-fit: cover; /* Faz a imagem preencher o espaço como no print */
display: block;
}

/* Responsividade para Mobile */
@media (max-width: 992px) {
.container-info {
    grid-template-columns: 1fr; /* Empilha no mobile */
    gap: 40px;
}

.info-image-wrapper {
    min-height: 350px;
    order: -1; /* Coloca a imagem no topo no mobile */
}
}


/* === ESTILO DE LISTA MINIMALISTA === */
.info-description ul {
list-style: none; /* Remove a bolinha padrão */
padding: 0;
margin: 25px 0;
}

.info-description ul li {
font-size: 17px;
color: #535353;
line-height: 1.6;
margin-bottom: 12px;
display: flex;
align-items: flex-start;
gap: 12px; /* Espaço entre o ponto e o texto */
}

/* O "ponto" personalizado seguindo seu badge */
.info-description ul li::before {
content: "";
width: 5px;
height: 5px;
background-color: #000; /* Ponto preto clássico */
border-radius: 50%;
margin-top: 10px; /* Alinha o ponto com a primeira linha de texto */
flex-shrink: 0;
}



/*  SEÇÃO DE PASTORES ESTILO PREMIUM DARK  */

.pastors-dark-section {
background-color: #0f0f0f; /* Fundo quase preto da imagem */
padding: 120px 0;
color: #ffffff;
text-align: center;
}

.container-pastors {
width: 92%;
max-width: 1300px;
margin: 0 auto;
}

/* Tipografia do Título */
.title-light {
font-family: 'Playfair Display', serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 400;
line-height: 1.1;
margin-bottom: 20px;
letter-spacing: -1px;
}

.title-light em {
font-style: italic;
font-weight: 400;
opacity: 0.7; /* Efeito de cor suave no itálico */
}

.subtitle-light {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #888;
max-width: 600px;
margin: 0 auto 80px;
line-height: 1.6;
}

/* Grid de Pastores */
.pastors-flex-grid {
display: flex;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}

.pastor-item {
flex: 1;
min-width: 300px;
text-align: left;
}

/* Moldura e Efeito P&B */
.pastor-img-bw {
width: 100%;
aspect-ratio: 1 / 1.1; /* Proporção elegante levemente vertical */
overflow: hidden;
background-color: #1a1a1a;
margin-bottom: 25px;
}

.pastor-img-bw img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%); /* Transforma em Preto e Branco igual à imagem */
transition: filter 0.5s ease, transform 0.8s ease;
}

.pastor-item:hover img {
filter: grayscale(0%); /* Volta a cor suavemente no hover */
transform: scale(1.03);
}

/* Nomes e Descrição */
.name-serif {
font-family: 'Playfair Display', serif;
font-size: 18px;
font-style: italic; /* Nome em itálico como na referência */
margin-bottom: 10px;
font-weight: 400;
}

.desc-sans {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
color: #777;
max-width: 280px;
}

/* Responsividade */
@media (max-width: 768px) {
.pastors-flex-grid { flex-direction: column; align-items: center; }
.pastor-item { width: 100%; max-width: 400px; }
}



/*============= ESTILOS DA PÁGINA IGREJA ====================*/


/* === SECTION AGENDA GLASS === */
.agenda-section-glass {
padding: 120px 0;
position: relative;
overflow: hidden;
background: url('../img/hero/agenda.jpg') no-repeat center center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
}

.agenda-section-glass::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.2); 
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 1;
}

.container-agenda {
position: relative;
z-index: 2;
width: 100%;
max-width: 1400px;
margin: 0 auto;
}

/* Ajuste do Swiper para o seu design */
.agenda-swiper {
padding: 80px 0 120px !important;
overflow: visible !important; /* Permite que o card cresça sem cortar a sombra */
}

/* === O CARD BASE (Estado "Apagado") === */
.glass-card {
min-width: 320px;
background: rgba(255, 255, 255, 0.1); 
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 40px;
position: relative;
opacity: 0.4;
transform: scale(0.85);
filter: blur(2px) grayscale(1);
transition:
transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
opacity 0.5s ease,
filter 0.5s ease;
will-change: transform, opacity;
}

/* === O CARD SOBERANO (Aceso via Swiper) === */
.swiper-slide-active .glass-card {
opacity: 1;
transform: scale(1.1);
filter: blur(0) grayscale(0);
z-index: 10;
background: rgba(255, 255, 255, 0.95);
border: none;
box-shadow: 0 40px 80px rgba(0,0,0,0.3);
}

/* Elementos Internos do Card */
.card-day {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 35px;
}

.week-name { 
font-family: 'Inter', sans-serif;
font-size: 10px; 
font-weight: 700;
text-transform: uppercase; 
letter-spacing: 3px; 
color: rgba(255,255,255,0.4); 
transition: color 0.5s;
}

.calendar-date { 
font-family: 'Playfair Display', serif; 
font-style: italic; 
font-size: 24px; 
color: #fff;
transition: all 0.5s ease;
}

.event-row { 
margin-bottom: 25px; 
border-left: 2px solid rgba(255,255,255,0.1);
padding-left: 15px;
transition: border-color 0.5s;
}

.time { 
font-size: 12px; 
font-weight: 600; 
color: rgba(255,255,255,0.6); 
display: block; 
margin-bottom: 6px; 
transition: color 0.5s;
}

.desc { 
font-size: 16px; 
color: #fff; 
font-weight: 400; 
margin: 0; 
transition: all 0.5s ease;
}

/* Cores quando Ativo (Soberano) */
.swiper-slide-active .glass-card .calendar-date { color: #000; font-size: 32px; }
.swiper-slide-active .glass-card .desc { color: #000; font-weight: 700; font-size: 18px; }
.swiper-slide-active .glass-card .time { color: #555; font-weight: 800; }
.swiper-slide-active .glass-card .event-row { border-left-color: #000; }
.swiper-slide-active .glass-card .week-name { color: rgba(7, 0, 0, 0.77); }

/* Badge "Ao Vivo" */
.title-with-badge { display: flex; align-items: center; gap: 8px; }

.badge-live {
font-size: 9px;
font-weight: 900;
background: #ff3b30;
color: #fff;
padding: 2px 8px;
border-radius: 4px;
letter-spacing: 1px;
animation: pulse-simple 2s infinite;
}

.swiper-slide-active .glass-card .badge-live { 
background: #b90606; 
color: #fff;
}

@keyframes pulse-simple {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}

.glass-card {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}

.glass-card {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);

transform: translateZ(0);
will-change: transform;

isolation: isolate; /* 🔥 resolve 80% do jitter no iOS */
}


/*Estilo de Mapa */

/* ===== HERO DARK ===== */
.location-hero-dark {
position: relative;
width: 100%;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background: #000000;
font-family: 'Montserrat', sans-serif;
}

/* ===== MAPA ===== */
.map-background {
position: absolute;
inset: 0;
z-index: 0;
}

.map-background iframe {
width: 100%;
height: 100%;
border: 0;
filter: brightness(0.35) contrast(1.2);
pointer-events: none;
}

/* ===== OVERLAY PRETO SÓLIDO ===== */
.hero-overlay-dark {
position: absolute;
inset: 0;
background: #000000;
opacity: 0.75; /* controla escurecimento */
z-index: 1;
}

/* ===== CONTEÚDO ===== */
.hero-content {
position: relative;
z-index: 2;
color: #FFFFFF; /* FORÇA BRANCO ABSOLUTO */
}

/* ===== TAG SUPERIOR ===== */
.hero-tag {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: 4px;
margin-bottom: 25px;
color: #FFFFFF; /* branco sólido */
}

/* ===== TÍTULO ===== */
.location-title-compact {
margin: 0;
padding: 0;
}

.location-title-compact span {
display: block;
color: #FFFFFF; /* branco absoluto */
font-weight: 700;
line-height: 1.2;
font-size: clamp(24px, 4vw, 30px);
}

/* Segunda linha menor */
.location-title-compact span:last-child {
font-size: clamp(18px, 3vw, 22px);
font-weight: 500;
margin-top: 10px;
}

/* ===== BOTÃO ===== */
.btn-waze-pill-dark {
display: inline-block;
margin-top: 30px;
padding: 15px 50px;
background: #FFFFFF;
color: #000000;
border-radius: 100px;
text-decoration: none;
font-weight: 700;
font-size: 12px;
transition: 0.3s ease;
}

.btn-waze-pill-dark:hover {
transform: translateY(-4px);
background: #F2F2F2;
}

.map-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}

.map-background iframe {
width: 100%;
height: 100%;
border: 0;
filter: grayscale(1) invert(0.92) contrast(1.2) brightness(0.4);
pointer-events: none;
}

/* Overlay escuro para contraste */
.hero-overlay-dark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
    circle,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.98) 100%
);
z-index: 1;
}


/* === CONFIGURAÇÃO MODO NOTURNO (DARK) === */


/*============= ESTILOS DA PÁGINA AGENDA ====================*/

/* SEÇÃO DE DOAÇÕES */
.donations-section {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 0;
background-color: #fafafa;
font-family: 'Montserrat', sans-serif;
}

/* Container que agrupa os dois cards */
.donations-wrapper-center {
display: flex;
justify-content: center; 
align-items: stretch;    
gap: 30px;               
flex-wrap: wrap;         
width: 100%;
margin: 0 auto;          
}

/* Ajuste nos cards - ANIMAÇÃO REMOVIDA */
.donation-card {
flex: 0 1 450px;         
min-width: 320px;        
background: #ffffff;
border-radius: 24px;
padding: 40px;
display: flex;
flex-direction: column;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 10px 30px rgba(0,0,0,0.02);
/* Removido transition e transform */
}

/* O hover agora não tem movimento, apenas se mantém estático */
.donation-card:hover {
transform: none; 
}

.card-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
}

.card-header i { font-size: 32px; color: #f3722c; } 
.card-header h3 { font-size: 14px; font-weight: 700; letter-spacing: 1px; }

/* Estilo PIX */
.pix-content-horizontal {
display: flex;
align-items: center;
gap: 20px;
}

.qr-code-wrapper {
background: #fff;
padding: 10px;
border: 1px solid #eee;
border-radius: 15px;
}

.qr-code-wrapper img { width: 130px; height: 130px; }

.pix-label { font-size: 10px; font-weight: 800; color: #888; display: block; margin-bottom: 5px; }

.pix-copy-box {
background: #f8f8f8;
padding: 12px;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
font-weight: 700;
margin-bottom: 10px;
}

.bank-info { font-size: 11px; color: #666; line-height: 1.4; }

/* Estilo Alimentos */
.social-desc { font-size: 14px; color: #555; margin-bottom: 25px; line-height: 1.5; }

.food-horizontal-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}

.food-item {
background: #fff;
border: 1px solid #eee;
padding: 8px 15px;
border-radius: 50px;
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 700;
}

.delivery-info {
margin-top: auto;
background: rgba(243, 114, 44, 0.05); 
padding: 15px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 10px;
color: #f3722c;
font-size: 11px;
font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
.donations-wrapper-center { flex-direction: column; align-items: center; }
.donation-card { width: 100%; min-width: auto; }
.pix-content-horizontal { flex-direction: column; text-align: center; }
}








/* Efeito de Degradê na lista do card */
.food-preview-container {
position: relative;
max-height: 120px; /* Ajuste conforme necessário */
overflow: hidden;
margin-bottom: 15px;
}

.list-fade-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(transparent, rgba(255,255,255,0.9)); /* Se for dark mode, mude o branco */
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 5px;
font-size: 0.85rem;
font-weight: bold;
color: #f3722c;
}

/* Modal Styling */
.social-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
z-index: 9999;
align-items: center;
justify-content: center;
}

.social-modal-content {
background: white;
width: 90%;
max-width: 500px;
padding: 25px;
border-radius: 20px; /* Cantos arredondados */
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
position: relative;
animation: slideIn 0.3s ease-out;
}

.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}

.close-modal {
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #333;
}

.food-grid-full {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}

@keyframes slideIn {
from { transform: translateY(-20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

/* Modal Largo e Responsivo */
.social-modal-content.wide-modal {
width: 95%;
max-width: 800px; /* Aumentei a largura */
background: #fff;
border-radius: 25px; /* Cantos bem arredondados */
padding: 30px;
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.modal-header h3 {
display: flex;
align-items: center;
gap: 10px;
color: #333;
font-size: 1.5rem;
}

/* Grid de Itens no Modal */
.food-grid-full {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-ajuste de colunas */
gap: 15px;
padding-top: 20px;
}

/* Estilo de cada item com ícone */
.food-item-modal {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
background: #f8f9fa;
border-radius: 12px;
transition: transform 0.2s;
}



.icon-social {
color: #f3722c;
font-size: 1.4rem;
background: #fff;
padding: 8px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Estilo do Botão Fechar (X) */
.close-modal {
width: 40px;
height: 40px;
border-radius: 50%;
background: #eee;
border: none;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.3s;
}

.close-modal:hover {
background: #f3722c;
color: white;
}

/* Ajuste Geral do Modal para Celular */
@media (max-width: 768px) {
.social-modal-content.wide-modal {
    width: 92% !important;
    padding: 20px !important;
    margin: 10px auto;
    max-height: 90vh; /* Não deixa o modal sair da tela */
    overflow-y: auto; /* Cria scroll interno se tiver muito ícone */
    border-radius: 20px !important;
}

.modal-header h3 {
    font-size: 1.1rem !important; /* Título menor no cel */
}

/* FORÇAR LADO A LADO NO MOBILE */
.food-grid-full {
    grid-template-columns: 1fr 1fr !important; /* Duas colunas fixas */
    gap: 8px !important;
    padding-top: 10px !important;
}

/* Ajuste do item para caber no grid apertado */
.food-item-modal {
    padding: 8px 10px !important;
    gap: 8px !important;
}

.food-item-modal span {
    font-size: 10px !important; /* Texto menor para não quebrar linha */
    font-weight: 700;
}

.icon-social {
    font-size: 1.1rem !important;
    padding: 5px !important;
}

/* Garantir que o X de fechar apareça sempre */
.close-modal {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
}
}

/* Estilo do Span (Texto) que estava faltando */
.food-item-modal span {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 600;
color: #333;
text-transform: uppercase;
}


@media (max-width: 768px) {
.food-preview-container {
    max-height: 135px !important; 
    margin-bottom: 10px !important;
    padding-bottom: 15px !important;
    /* Garante que nada saia dos limites arredondados do card */
    border-radius: 24px; 
    overflow: hidden;
}

.list-fade-overlay {
    height: 50px !important;
    bottom: 0px !important;
    /* Degradê suave que acompanha a cor do fundo do card */
    background: linear-gradient(to top, #ffffff 30%, rgba(255,255,255,0));
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.list-fade-overlay span {
    font-size: 11px !important;
    background: #fff;
    padding: 5px 15px;
    /* Arredondamento total no botão "Ver Todos" */
    border-radius: 50px; 
    border: 1px solid #eee;
    /* Sombra suave e circular, sem cantos retos */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 5px;
    display: inline-block;
}
}


/*============= ESTILOS DA PÁGINA DOACOES ====================*/



/*============= ESTILOS DA PÁGINA DOACOES ====================*/


/* ===================== SEÇÃO DEVOCIONAL ===================== */

.devotional-section {
padding: 80px 0;
background-color: #fafafa;
display: flex;
justify-content: center;
}

.devotional-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
max-width: 800px;
margin: 0 auto;
}

.devotional-card {
width: 100%;
background: #fff;
border-radius: 25px;
padding: 35px;
border: 1px solid rgba(0,0,0,0.05);
position: relative;
}

/* =====================
DESTAQUE DO ATUAL
===================== */
.active-devotional {
box-shadow: 0 15px 40px rgba(0,0,0,0.04);
border-left: 5px solid #f3722c;
}

.devotional-badge-active {
position: absolute;
top: 20px;
right: 35px;
background: #f3722c;
color: #fff;
padding: 5px 15px;
border-radius: 50px;
font-size: 10px;
font-weight: 800;
}

.devotional-date {
font-size: 13px;
color: #888;
font-weight: 600;
display: block;
margin-bottom: 5px;
}

.devotional-topic {
font-size: 24px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}

.devotional-meta {
display: flex;
gap: 20px;
margin-bottom: 30px;
}

.meta-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
color: #555;
}

.meta-item i { 
color: #f3722c; 
font-size: 16px; 
}

/* =====================
PLAYER DESIGN
===================== */
.audio-player-container {
background: #f8f9fa;
padding: 20px;
border-radius: 18px;
}

.player-controls {
display: flex;
align-items: center;
gap: 20px;
}

.play-btn {
width: 55px;
height: 55px;
border-radius: 50%;
background: #f3722c;
color: #fff;
border: none;
font-size: 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
}

.play-btn:hover { 
transform: scale(1.05); 
background: #e6621b; 
}

.progress-area { 
flex: 1; 
}

.progress-bar {
width: 100%;
height: 6px;
background: #ddd;
border-radius: 10px;
margin-bottom: 8px;
overflow: hidden;
}

.progress-fill { 
width: 0%; 
height: 100%; 
background: #f3722c; 
border-radius: 10px; 
transition: width 0.1s linear;
}

.time-info { 
display: flex; 
justify-content: space-between; 
font-size: 11px; 
color: #999; 
font-weight: 600; 
font-variant-numeric: tabular-nums; /* alinha os números uniformemente */
}

.current-time, .duration {
min-width: 40px; /* garante que o "-" não quebre layout */
}

.current-time {
text-align: left;
}

.duration {
text-align: right;
}

/* =====================
CARD ANTERIOR (MENOR)
===================== */
.archive-devotional {
background: rgba(255, 255, 255, 0.7);
padding: 20px 35px;
display: flex;
align-items: center;
justify-content: space-between;
opacity: 0.8;
}

.devotional-badge-archive {
font-size: 9px;
font-weight: 800;
color: #888;
margin-bottom: 5px;
}

.devotional-topic-sm { 
font-size: 16px; 
color: #333; 
}

.devotional-meta-sm { 
font-size: 11px; 
color: #888; 
font-weight: 600; 
}

.play-btn-sm {
background: #eee;
border: none;
padding: 10px 20px;
border-radius: 50px;
font-size: 10px;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}

/* =====================
MOBILE RESPONSIVO
===================== */
@media (max-width: 768px) {
.archive-devotional { 
    flex-direction: column; 
    text-align: center; 
    gap: 15px; 
}
.devotional-meta { 
    flex-direction: column; 
    gap: 10px; 
}
}


/* ===================== SEÇÃO DEVOCIONAL ===================== */



/* ===================== PAGINA DEPARTAMENTOS ===================== */



.dept-section {
    padding: 100px 0;
    background-color: #fcfcfc;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o header e a grid horizontalmente */
}

.dept-sectionpastores {
    padding: 100px 0;
    background-color: #f0f0f0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o header e a grid horizontalmente */
}


/* Container para limitar a largura máxima e não espalhar nos cantos */
.dept-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.dept-header {
    text-align: center;
    margin-bottom: 60px;
    width: 100%;
}

.dept-main-title {
    font-size: 32px;
    font-weight: 900;
    color: #1a1a1a;
    letter-spacing: 1px;
    margin: 0;
}

.dept-divider {
    width: 50px;
    height: 4px;
    background: #f3722c;
    margin: 15px auto 0;
    border-radius: 10px;
}

/* GRID CORRIGIDA */
.dept-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza os cards quando houver menos que 3 ou em telas menores */
    gap: 30px;
    width: 100%;
}

/* ESTILO DO CARD BLOCO */
.dept-block {
    background: #fff;
    flex: 1 1 350px; /* Base de 350px, mas pode crescer/diminuir */
    max-width: 380px; /* Impede que o card fique largo demais em telas grandes */
    padding: 45px 30px;
    border-radius: 30px;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza tudo dentro do card */
    text-align: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
}



/* IMAGEM  */
.dept-icon-wrapper {
    width: 100%; /* Ocupa a largura disponível do card */
    height: 180px; /* Altura fixa para manter o padrão */
    margin-bottom: 25px;
    border-radius: 20px; /* Bordas arredondadas no container */
    overflow: hidden; /* Garante que a imagem não saia da borda */
}

.dept-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Não distorce a imagem */
    border-radius: 20px; /* Mesma curvatura do container */
    transition: transform 0.5s ease;
}

/* TEXTOS CENTRALIZADOS */
.dept-info {
    width: 100%;
    margin-bottom: 20px;
}

.dept-name {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.2;
}

.dept-leader {
    font-size: 11px;
    font-weight: 700;
    color: #f3722c;
    margin-bottom: 15px;
    display: block;
}

.dept-line {
    width: 40px;
    height: 2px;
    background: #f0f0f0;
    margin: 15px auto;
}

.dept-text {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
    margin: 0;
    min-height: 60px; /* Mantém o alinhamento dos botões */
}

/* LINK/BOTÃO */
.dept-link {
    font-size: 11px;
    font-weight: 800;
    color: #1a1a1a;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 2px solid #f3722c;
    transition: all 0.3s;
    display: inline-block;
}

.dept-link:hover {
    color: #f3722c;
    letter-spacing: 1px;
}

/* AJUSTE MOBILE */
@media (max-width: 768px) {
    .dept-section { padding: 60px 0; }
    .dept-block { flex: 1 1 100%; max-width: 100%; }
}


/*====================== PÁGINA BIBLIA ONLINE ===============================*/


/* ===============================
   BÍBLIA ONLINE - ADNOSSAIGREJA
================================= */

body {
    margin: 0;
    font-family: Montserrat, sans-serif;
    background: #f4f6f9;
}

.bible-section {
    padding: 60px 20px;
}

.bible-container {
    max-width: 1100px;
    margin: auto;
}

.bible-title {
    text-align: center;
    margin-bottom: 30px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.breadcrumb {
    font-weight: 600;
}

.btn-back {
    background: #1e293b;
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
}

.bible-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.card {
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    color: white;
    transition: 0.2s;
}

/* Card Antigo: Marrom em Degradê */
.card.antigo {
    background: linear-gradient(135deg, #50301f 0%, #291307 100%);
    color: #ffffff; /* Ajuste de contraste */
}

/* Card Novo: Laranja Vibrante solicitado */
.card.novo {
    background: linear-gradient(135deg, #f3722c 0%, #d9480f 50%, #bc3908 100%);
    color: #ffffff;
}

.card:hover {
    transform: scale(1.05);
}

.card-abbrev {
    font-size: 1.1rem;
    font-weight: bold;
}

.card-name {
    font-size: 0.6rem;
    text-align: center;
}

.verses-wrapper {
    background: white;
    padding: 30px;
    border-radius: 10px;
    line-height: 1.8;
}

.verse {
    margin-bottom: 15px;
}

.verse-number {
    font-weight: bold;
    margin-right: 5px;
}

.highlight {
    background: #fff7d6;
    padding: 8px;
    border-radius: 6px;
}

#bible-content {
    transition: opacity 0.25s ease;
}

.fade-out {
    opacity: 0;
}

.fade-in {
    opacity: 1;
}

.card-abbrev {
    text-transform: uppercase;
}

/* =====================================
   MOBILE EXPERIENCE
===================================== */

@media (max-width: 768px) {

    .bible-section {
        padding: 30px 15px;
    }

    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .breadcrumb {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .btn-back {
        width: 100%;
        text-align: center;
        padding: 10px;
        font-size: 0.9rem;
    }

    /* GRID MAIS CONFORTÁVEL */
    .bible-grid {
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
        gap: 8px;
    }

    .card {
        border-radius: 10px;
    }

    .card-abbrev {
        font-size: 1rem;
    }

    .card-name {
        font-size: 0.65rem;
    }

    /* TEXTO DOS VERSÍCULOS */
    .verses-wrapper {
        padding: 20px;
        font-size: 1rem;
        line-height: 1.9;
    }

    .verse {
        margin-bottom: 18px;
    }

    .verse-number {
        font-size: 0.95rem;
    }
}

/* =====================================
   MOBILE PEQUENO (celulares menores)
===================================== */

@media (max-width: 480px) {

    .bible-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .card-abbrev {
        font-size: 0.95rem;
    }

    .verses-wrapper {
        padding: 16px;
        font-size: 0.95rem;
    }

}



/*ANIMACAO */



/* =====================================
   SLIDE APP STYLE TRANSITION
===================================== */

#bible-content {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* SAINDO */
.slide-out-left {
    transform: translateX(-30px);
    opacity: 0;
}

.slide-out-right {
    transform: translateX(30px);
    opacity: 0;
}

/* ENTRANDO */
.slide-in-right {
    transform: translateX(30px);
    opacity: 0;
    animation: slideFromRight 0.3s forwards ease;
}

.slide-in-left {
    transform: translateX(-30px);
    opacity: 0;
    animation: slideFromLeft 0.3s forwards ease;
}

@keyframes slideFromRight {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideFromLeft {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


.keyboard-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #2e4362;
}

.key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #dae2ea;
    border-radius: 6px;
    font-weight: bold;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}

.hint-text {
    margin-left: 8px;
}

@media (max-width: 768px) {
    .keyboard-hint {
        display: none;
    }
}





/* =================== PÁGINA PEDIDOS DE ORACAO ======================== */





/* ================================================================
   SEÇÃO PEDIDOS DE ORAÇÃO - IDENTIDADE VISUAL
   ================================================================ */

.prayer-section {
    padding: 100px 0;
    background-color: #fafafa;
    display: flex;
    justify-content: center;
}

.prayer-container {
    width: 100%;
    max-width: 900px; /* Formulário mais elegante se não for tão largo */
    padding: 0 20px;
}

/* CARD DO FORMULÁRIO */
.prayer-card {
    background: #ffffff;
    padding: 50px;
    border-radius: 30px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.03);
}

.prayer-info {
    text-align: center;
    margin-bottom: 40px;
}

.prayer-icon {
    font-size: 40px;
    color: #f3722c;
    margin-bottom: 15px;
}

.prayer-subtitle {
    font-size: 12px;
    font-weight: 800;
    color: #f3722c;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.prayer-title {
    font-size: 28px;
    font-weight: 900;
    color: #1a1a1a;
    margin: 0;
}

/* SISTEMA DE GRID DO FORMULÁRIO */
.prayer-form.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0; /* Espaçamento entre linhas */
}

.col-12 { width: 100%; padding: 0 10px; }
.col-6  { width: 50%; padding: 0 10px; }
.col-4  { width: 33.33%; padding: 0 10px; }
.col-2  { width: 16.66%; padding: 0 10px; }

/* INPUTS E LABELS */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.form-group label {
    font-size: 10px;
    font-weight: 800;
    color: #888;
    margin-bottom: 8px;
    margin-left: 5px;
}

.form-group input, 
.form-group textarea {
    background: #f8f9fa;
    border: 1px solid #eee;
    padding: 15px 20px;
    border-radius: 15px;
    font-family: inherit;
    font-size: 14px;
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.form-group input:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: #f3722c;
    background: #fff;
    box-shadow: 0 5px 15px rgba(243, 114, 44, 0.05);
}

/* ================================================================
   BOTÃO ENVIAR - ESTILO COMPARTILHAR
   ================================================================ */

.btn-prayer {
    background: transparent; /* Fundo transparente inicialmente */
    color: #f3722c; /* Texto na cor laranja oficial */
    border: 2px solid #f3722c; /* Borda laranja idêntica ao compartilhar */
    padding: 14px 35px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 20px;
    outline: none;
}

.btn-prayer:hover {
    background: #f3722c; /* Preenche com laranja no hover */
    color: #fff; /* Texto vira branco */
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(243, 114, 44, 0.15);
}

/* Ajuste do ícone para acompanhar o texto */
.btn-prayer i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.btn-prayer:hover i {
    transform: rotate(-15deg) scale(1.1); /* Pequena bossa no ícone ao passar o mouse */
}

/* AJUSTE MOBILE */
@media (max-width: 768px) {
    .prayer-card { padding: 30px 20px; }
    .col-6, .col-4, .col-2 { width: 100%; } /* Empilha tudo no mobile */
    .prayer-title { font-size: 22px; }
}



/*==================== PÁGINA FALE COM O PASTOR ===================== */


.pastor-section {
    padding: 100px 0;
    background-color: #f4f6f9;
    display: flex;
    justify-content: center;
}

.pastor-container {
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
}

.pastor-card {
    background: #ffffff;
    padding: 50px;
    border-radius: 30px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.02);
}

.pastor-info {
    text-align: center;
    margin-bottom: 40px;
}

.pastor-icon {
    font-size: 40px;
    color: #1a1a1a; /* Cor mais sóbria para o ícone */
    margin-bottom: 15px;
}

.pastor-subtitle {
    font-size: 11px;
    font-weight: 800;
    color: #f3722c; /* Mantém o detalhe da identidade */
    letter-spacing: 2px;
}

.pastor-title {
    font-size: 28px;
    font-weight: 900;
    color: #1a1a1a;
    margin: 10px 0;
}

.pastor-notice {
    font-size: 13px;
    color: #888;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.5;
}

/* FORMULÁRIO (GRID) */
.pastor-form.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
}

.col-12 { width: 100%; padding: 0 10px; }
.col-6  { width: 50%; padding: 0 10px; }

.form-group label {
    font-size: 10px;
    font-weight: 800;
    color: #555;
    margin-bottom: 8px;
    display: block;
}

.form-group input, 
.form-group textarea {
    background: #fdfdfd;
    border: 1px solid #e0e0e0;
    padding: 15px 20px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    transition: all 0.3s;
}

.form-group input:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: #1a1a1a; 
    background: #fff;
}

/* BOTÃO ESTILO COMPARTILHAR */
.btn-pastor {
    background: transparent;
    color: #1a1a1a; /* Preto para seriedade */
    border: 2px solid #1a1a1a;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s;
    margin-top: 20px;
}

.btn-pastor:hover {
    background: #1a1a1a;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* RESPONSIVO */
@media (max-width: 768px) {
    .col-6 { width: 100%; }
    .pastor-card { padding: 30px 20px; }
}



/* ================== PÁGINA REDES SOCIAIS =========================*/


/*=============== REDES SOCIAIS =========================*/

.social-section {
    padding: 100px 0;
    background-color: #fcfcfc;
    text-align: center;
}

.social-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.social-header {
    margin-bottom: 50px;
}

.social-subtitle {
    color: #f3722c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.social-title {
    font-size: 32px;
    font-weight: 900;
    color: #1a1a1a;
}

/* GRID E CARDS */
.social-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.social-card {
    background: #fff;
    text-decoration: none;
    padding: 30px 40px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 280px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* EFEITO DE HOVER GERAL */
.social-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* ÍCONES */
.social-icon {
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* TEXTOS */
.social-info {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.social-name {
    font-size: 16px;
    font-weight: 900;
    color: #1a1a1a;
}

.social-handle {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    margin-top: 2px;
}

/* CORES ESPECÍFICAS NO HOVER */
.instagram:hover .social-icon { color: #E1306C; }
.facebook:hover .social-icon { color: #1877F2; }
.youtube:hover .social-icon { color: #FF0000; }

/* BORDA INFERIOR COLORIDA NO HOVER */
.social-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 4px;
    transition: all 0.3s ease;
    border-radius: 10px;
}

.social-card:hover::after {
    width: 60%;
    left: 20%;
}

.instagram::after { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.facebook::after { background: #1877F2; }
.youtube::after { background: #FF0000; }

/* MOBILE */
@media (max-width: 768px) {
    .social-card {
        width: 100%;
        justify-content: center;
    }
}






/*========================== AREA DA MINHA BIBLIA ==========================================================================*/





/*=============== CUSTOM LOGIN INTEGRATION - PREMIUM WIDE ===============*/

.body-login {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f4f6f9; /* Fundo leve para o glass destacar */
    margin: 0;
}

.login-container {
    width: 100%;
    /* Aumentado para 520px para garantir que o card seja largo na horizontal */
    max-width: 520px; 
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* UNIFICADO: O CARD LOGIN (ESTILO GLASS LARGO) */
.login-card.glass-effect {
    width: 100%;
    background: rgba(255, 255, 255, 0.75); /* Um pouco mais de opacidade para o branco */
    backdrop-filter: blur(20px);         
    -webkit-backdrop-filter: blur(20px); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.06); 
    
    /* Padding horizontal aumentado (70px) para respiro nas laterais */
    padding: 60px 70px; 
    text-align: center;
    border-radius: 40px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.login-logo {
    height: 65px; /* Levemente maior para acompanhar o card */
    margin-bottom: 25px;
}

.login-header h2 {
    font-size: 22px;
    font-weight: 900;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

.login-form {
    width: 100%; /* Garante que preencha a largura interna */
    margin-top: 35px;
    text-align: left;
}

/* Estilização dos Grupos de Input */
.login-form .form-group {
    margin-bottom: 20px;
    width: 100%;
}

.login-form .form-group label {
    font-size: 10px;
    font-weight: 800;
    color: #f3722c; /* Nosso Laranja oficial */
    letter-spacing: 1.5px;
    margin-left: 5px;
    display: block;
    text-transform: uppercase;
}

.login-form .form-group input {
    width: 100%;
    height: 55px; /* Inputs mais altos e elegantes */
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0 20px;
    border-radius: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    margin-top: 8px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.login-form .form-group input:focus {
    outline: none;
    background: #fff;
    border-color: #f3722c;
    box-shadow: 0 5px 15px rgba(243, 114, 44, 0.1);
}

/* MENSAGEM DE ERRO */
.error-message {
    width: 100%;
    background: rgba(243, 114, 44, 0.1);
    color: #f3722c;
    padding: 15px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 25px;
    border: 1px solid rgba(243, 114, 44, 0.2);
    text-align: center;
    box-sizing: border-box;
}

/* RODAPÉ DO CARD */
.login-extra {
    margin-top: 30px;
}

.login-extra a {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: 0.3s;
}

.login-extra a:hover {
    color: #f3722c;
}

/* Mobile: Ajuste para não estourar em telas pequenas */
@media (max-width: 600px) {
    .login-card.glass-effect {
        padding: 40px 30px;
        border-radius: 30px;
    }
}


/* Estilos do Modal baseados no seu design */
.modal-overlay {
    display: none; 
    position: fixed;
    z-index: 10001; /* Acima da sua navbar que é 9999 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px); /* Efeito de desfoque que você já usa na navbar */
}

.modal-content-custom {
    background: rgba(255, 255, 255, 0.95);
    margin: 10% auto;
    padding: 40px;
    border-radius: 20px; /* Seguindo o padrão arredondado dos seus botões */
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 15px 50px rgba(0,0,0,0.12);
    animation: revealUp 0.5s cubic-bezier(0.16, 1, 0.3, 1); /* Usando sua animação existente */
}

.close-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    cursor: pointer;
    color: #a0a0a0;
}

.modal-header h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.modal-body p {
    margin-bottom: 25px;
}



/* BOTÃO: Pequeno, sem cor de fundo, apenas borda laranja */
.btn-recuperar-outline {
    background: transparent;
    border: 1.5px solid #f3722c; /* Seu laranja */
    color: #f3722c;
    padding: 8px 20px; /* Bem mais compacto */
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-recuperar-outline:hover {
    background: #f3722c;
    color: #fff;
}


/* Ajustes para um visual equilibrado no modal */
.modal-content-custom .form-group label {
    display: block;
    margin-bottom: 5px; /* Espaço sutil entre texto e campo */
    font-weight: 700;
    font-size: 11px;
    color: #535353;
}

.modal-content-custom .form-group input {
    height: 50px !important; /* Altura média (nem 45, nem 55) */
    margin-top: 0px !important;
    border-radius: 12px !important;
}

/* Garante que o grid de Nome/Sobrenome não cole no título */
.modal-content-custom .modal-body {
    padding-top: 5px;
}


/*====================== PAINEL MINHA BIBLIA - PAGINA INICIAL ================= */

/* Configurações Globais e Variáveis */
:root {
    --primary-color: #f3722c;
    
    /* Cores Modo Claro */
    --bg-panel: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --text-main: #1a1a1a;
    --text-muted: #666;
    --glass-bg: rgba(255, 255, 255, 0.3);
    --glass-border: rgba(255, 255, 255, 0.4);
    --card-bg: rgba(255, 255, 255, 1); /* Cor do dropdown */
    --blur-effect: blur(20px);
}

/* Variáveis para o Modo Dark */
body.dark-mode {
    --bg-panel: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
    --text-main: #f8f9fa;
    --text-muted: #b0b0b0;
    --glass-bg: rgba(0, 0, 0, 0.4);
    --glass-border: rgba(255, 255, 255, 0.1);
    --card-bg: #1e1e1e; /* Cor do dropdown no dark */
}

/* Layout do Painel */
.panel-body {
    background: var(--bg-panel);
    min-height: 100vh;
    padding-top: 100px; 
    padding-bottom: 100px;
}

.panel-container {
    width: 92%;
    max-width: 1100px;
    margin: 0 auto;
}

/* Welcome Header */
.welcome-header { margin-bottom: 35px; }

.welcome-header h1 {
    font-family: 'Urbanist', sans-serif;
    font-weight: 800;
    font-size: 2.2rem;
    color: var(--text-main);
    letter-spacing: -0.8px; 
    line-height: 1.1;
    margin-bottom: 8px;
}

.welcome-header h1 span { color: var(--primary-color); }

.welcome-header p {
    font-family: 'Urbanist', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-muted);
}

/* Grid de Cards com Glassmorphism Real */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 35px;
}

.stat-card {
    padding: 25px 20px;
    text-align: center;
    border-radius: 24px;
    background: var(--glass-bg);
    backdrop-filter: var(--blur-effect);
    -webkit-backdrop-filter: var(--blur-effect);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.stat-card:hover { transform: translateY(-5px); }

.stat-card i { font-size: 28px; color: var(--primary-color); margin-bottom: 12px; display: block; }
.stat-card h3 { font-size: 32px; font-weight: 800; margin-bottom: 5px; color: var(--text-main); }
.stat-card p { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.stat-card.highlight { background: var(--primary-color); border: none; box-shadow: 0 10px 20px rgba(243, 114, 44, 0.2); }
.stat-card.highlight i, 
.stat-card.highlight h3, 
.stat-card.highlight p { color: #fff; }

/* Seção de Conteúdo */
.content-section {
    padding: 30px;
    border-radius: 28px;
    background: var(--glass-bg);
    backdrop-filter: var(--blur-effect);
    border: 1px solid var(--glass-border);
    margin-bottom: 25px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

/* Lista de Atividades */
.activity-list { list-style: none; padding: 0; }
.activity-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 0;
    border-bottom: 1px solid var(--glass-border);
}
.activity-list li:last-child { border-bottom: none; }

.icon-box {
    width: 46px; height: 46px;
    background: rgba(243, 114, 44, 0.1);
    color: var(--primary-color);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.info strong { display: block; font-size: 15px; color: var(--text-main); }
.info span { font-size: 12px; color: var(--text-muted); }

/* Container Pai da Direita */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Wrapper Posicionador */
.user-avatar-wrapper {
    position: relative;
    display: flex; 
    align-items: center;
}

/* Dropdown Corrigido */
.user-menu-dropdown {
    position: absolute;
    top: 55px;
    right: 0;
    width: 240px;
    background: var(--card-bg) !important;
    color: var(--text-main);
    backdrop-filter: var(--blur-effect);
    -webkit-backdrop-filter: var(--blur-effect);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 999999;
    display: none; 
    flex-direction: column; 
    gap: 5px;
    border: 1px solid var(--glass-border);
}

/* Header do Menu */
.menu-header {
    padding: 5px 10px 15px 10px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.menu-header span { font-size: 10px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.menu-header strong { font-size: 15px; color: var(--text-main); margin-top: 2px; }

/* Link de Item Individual */
/* Link de Item Individual - CORRIGIDO PARA MODO DARK */
.menu-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-radius: 12px;
    text-decoration: none;
    
    /* ESTA É A CHAVE: Usar a variável de texto principal */
    color: var(--text-main) !important; 
    
    font-weight: 600;
    font-size: 14px;
    transition: 0.2s;
}

/* Garante que o ícone e o texto mudem no hover */
.menu-link-item:hover { 
    background: rgba(243, 114, 44, 0.08); 
    color: var(--primary-color) !important; 
}

/* Se houver um span ou texto dentro do link, ele herda a cor */
.menu-item-content span {
    color: inherit;
}
/* Alinhamento de Ícone + Texto */
.menu-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-item-content i { font-size: 20px; color: var(--primary-color); }

/* Item de Sair */
.menu-link-item.logout { color: #e63946; margin-top: 5px; }
.menu-link-item.logout i { color: #e63946; }

/* Toggle Switch (Modo Dark) */
.switch { position: relative; display: inline-block; width: 34px; height: 18px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ddd; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(16px); }

.icon-circle-bg {
    width: 42px; height: 42px;
    background: rgba(243, 114, 44, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.icon-circle-bg i { color: var(--primary-color); font-size: 20px; }
.icon-circle-bg:hover { background: var(--primary-color); transform: translateY(-2px); }
.icon-circle-bg:hover i { color: #fff; }

/* Avatar do Usuário */
.user-avatar-container {
    width: 45px; height: 45px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
}
.user-avatar-container:hover { transform: scale(1.1); }
.user-avatar-img { width: 100%; height: 100%; object-fit: cover; }

/* Menu Mobile (Fixo) */
.mobile-nav {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px;
    height: 70px;
    border-radius: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    background: var(--glass-bg); 
    backdrop-filter: var(--blur-effect); 
    -webkit-backdrop-filter: var(--blur-effect);
    border: 1px solid var(--glass-border);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.mobile-nav a { color: var(--text-muted); font-size: 26px; transition: 0.3s; }
.mobile-nav a.active { color: var(--primary-color); transform: scale(1.1); }

/*ESTILO DA SECTION PROGRESSO */

/*=============== SECTION PROGRESSO ===============*/

/*=============== PROGRESSO EM CARD GLASS ===============*/

.progress-section {
    padding: 80px 0;
    display: flex;
    justify-content: center;
}

.progress-container {
    width: 100%;
    max-width: 550px; 
    padding: 0 20px;
}

.progress-card.glass-effect {
    /* Usa var(--glass-bg) e var(--blur-effect) para consistência */
    background: var(--glass-bg);
    backdrop-filter: var(--blur-effect);
    -webkit-backdrop-filter: var(--blur-effect);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
}

.progress-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    position: relative;
}

.progress-icon {
    width: 50px;
    height: 50px;
    /* Usa a cor primária com transparência */
    background: rgba(243, 114, 44, 0.1);
    color: var(--primary-color);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.progress-titles {
    flex: 1;
    text-align: left;
}

.progress-subtitle {
    font-size: 10px;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 1.5px;
    display: block;
    text-transform: uppercase;
}

.progress-main-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main); /* Alterado de #1a1a1a */
    margin: 0;
}

.progress-value {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-main); /* Alterado de #1a1a1a */
    font-family: 'Montserrat', sans-serif;
}

/* O TRILHO DA BARRA */
.progress-track {
    width: 100%;
    height: 10px;
    /* No dark mode, o trilho precisa de um fundo que contraste */
    background: var(--glass-border); 
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
}

.progress-fill {
    width: 0%; /* Animado pelo JS */
    height: 100%;
    background: var(--primary-color);
    border-radius: 20px;
    position: relative;
    transition: width 2.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.progress-light {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3));
}

.progress-msg {
    font-size: 10px;
    color: var(--text-muted); /* Alterado de #999 */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}



/* Estilo padrão do Logo */
.nav-logo img {
    height: 30px;
    cursor: pointer;
    transition: filter 0.3s ease; /* Faz a troca de cor ser suave */
}

/* Efeito para o Modo Dark */
body.dark-mode .nav-logo img {
    /* brightness(0) torna tudo preto, invert(1) transforma o preto em branco puro */
    filter: brightness(0) invert(1);
}

.remember-wrapper {
    margin: 15px 0;
    display: flex;
    justify-content: flex-start;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

/* Esconde o checkbox padrão */
.custom-checkbox input {
    display: none;
}

/* Cria o quadrado customizado */
.checkmark {
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    position: relative;
    transition: all 0.3s ease;
}

/* Estilo quando está marcado */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #f3722c;
    border-color: #f3722c;
}

/* O "V" branco de check */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.label-text {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    letter-spacing: 0.5px;
}

/* Efeito de hover */
.custom-checkbox:hover .checkmark {
    background: rgba(243, 114, 44, 0.1);
    border-color: #f3722c;
}


/* Container Geral */
.login-footer {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Divisor Elegante */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 10px 0;
}

.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.auth-divider span {
    padding: 0 15px;
    font-size: 10px;
    font-weight: 800;
    color: #aaa;
    letter-spacing: 1px;
}

/* Grid de Botões Sociais */
.social-login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #444;
}

.btn-social i {
    font-size: 18px;
}

.btn-social:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.btn-social.google i { color: #DB4437; } /* Cor oficial Google */
.btn-social.apple i { color: #000; }    /* Cor oficial Apple */

/* Links Inferiores */
.auth-links {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.link-forgot {
    font-size: 11px;
    color: #888;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
}

.link-forgot:hover { color: #f3722c; }

.register-call {
    font-size: 12px;
    color: #535353;
}

.register-call a {
    color: #f3722c;
    font-weight: 800;
    text-decoration: none;
    margin-left: 4px;
}

.register-call a:hover {
    text-decoration: underline;
}






/*=============== ULTRA GLASS PROGRESS CARD ===============*/

.glass-progress-card {
    position: relative;
    padding: 30px;
    border-radius: 35px;
    background: rgba(255, 255, 255, 0.05); /* Vidro bem fino */
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin-bottom: 30px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Brilho interno de cor (Glow) */
.glass-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: var(--primary-color);
    filter: blur(80px);
    opacity: 0.15;
    z-index: 0;
}

.glass-card-header, .glass-card-body, .glass-card-footer {
    position: relative;
    z-index: 2;
}

/* Header */
.glass-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.glass-top-tag {
    font-size: 9px;
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: 2px;
    margin-bottom: 4px;
    display: block;
}

.glass-category {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.glass-dots-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-main);
    width: 35px;
    height: 35px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Título */
.glass-main-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

/* Barra de Progresso */
.glass-progress-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
}

.progress-label { color: var(--text-muted); }
.progress-percent { color: var(--text-main); }

.glass-bar-bg {
    height: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #ff9a62);
    border-radius: 100px;
    position: relative;
    box-shadow: 0 0 15px rgba(243, 114, 44, 0.3);
}

/* Rodapé */
.glass-card-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.glass-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
}

.glass-meta-item i { color: var(--primary-color); font-size: 16px; }

/* Botão de Seta Flutuante */
.glass-action-arrow {
    width: 45px;
    height: 45px;
    background: var(--text-main);
    color: var(--card-bg);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.glass-action-arrow:hover {
    transform: translateX(5px) scale(1.05);
    background: var(--primary-color);
    color: #fff;
}


/* Ajuste Dark Mode */
body.dark-mode .glass-progress-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
}


/* Remove o efeito de hover especificamente para este card */
.stat-card.glass-effect.highlight:hover {
    transform: none !important;      /* Impede que o card suba ou aumente */
    animation: none !important;      /* Mata qualquer pulsação */
    box-shadow: none !important;     /* Remove sombras extras no hover */
    filter: none !important;         /* Remove blurs ou brilhos extras */
}

.stat-card:hover {
    transform: none !important;
    animation: none !important;
}



/* 1. Base da Fumacinha (Glow) */
.glass-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 130px;
    height: 130px;
    background: var(--primary-color); /* Fumaça laranja para os cards normais */
    filter: blur(60px);
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}

/* 2. O CARD LARANJA (Highlight) */
.stat-card.highlight {
    background: var(--primary-color) !important; /* Laranja completo */
    border: none !important;
    box-shadow: 0 15px 30px rgba(243, 114, 44, 0.4); /* Sombra laranja */
}

/* 3. A FUMACINHA BRANCA (Apenas no highlight) */
.stat-card.highlight .glass-glow {
    background: #ffffff !important;
    opacity: 0.4 !important; /* Mais visível sobre o laranja */
    filter: blur(50px) !important;
}

/* 4. AJUSTE DE CORES NO CARD LARANJA */
.stat-card.highlight i,
.stat-card.highlight h3,
.stat-card.highlight p {
    color: #ffffff !important; /* Texto branco para ler no fundo laranja */
    position: relative;
    z-index: 2;
}

/* 5. ESTRUTURA DOS CARDS */
.stat-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    border-radius: 24px;
    transition: all 0.3s ease;
}

.stat-card i { font-size: 28px; margin-bottom: 10px; }
.stat-card h3 { font-size: 24px; font-weight: 800; }
.stat-card p { font-size: 12px; font-weight: 600; opacity: 0.8; }

/* 6. TRAVA O HOVER */
.stat-card:hover {
    transform: none !important;
    animation: none !important;
}



/*Efeito de Fader no Ajax Mode page */

.panel-container {
    transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
    will-change: opacity, transform;
}


/* força suavidade em todos os movimentos de scroll da página */
html {
    scroll-behavior: smooth;
}

/* garante que o versículo focado tenha uma transição visual agradável */
.verse {
    transition: background-color 0.5s ease, transform 0.3s ease;
    outline: none;
}