/* 1. VARIÁVEIS E RESET GLOBAL */



/* ====================================== */



:root {



    --color-dark: #121212;



    --color-text-light: #f0fof0;



    --color-accent: #ff6600;



    --color-card-bg: #222222;



    --font-heading: 'Montserrat', sans-serif;



    --font-body: 'Roboto', sans-serif;



}







* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}







body {



    background-color: var(--color-dark);



    color: var(--color-text-light);



    font-family: var(--font-body);



    line-height: 1.6;



    padding-top: 70px;



}







a {



    text-decoration: none;



    color: white;



    transition: color 0.3s;



}







h1, h2, h3, h4 {



    font-family: var(--font-heading);



}







/* Estilos Globais de Seção e Botões */



.content-section {



    padding: 80px 5%;



}



.dark-bg-2 {



    background-color: #1c1c1c;



}



.cta-button, .cta-button-small {



    background-color: var(--color-accent);



    color: var(--color-dark);



    padding: 10px 20px;



    border-radius: 5px;



    font-weight: bold;



    display: inline-block;



    transition: background-color 0.3s;



}



.cta-button:hover, .cta-button-small:hover {



    background-color: #e65c00;



}



.cta-button-small {



    padding: 8px 15px;



    font-size: 0.9em;



}



.btn-link {



    color: var(--color-accent);



    text-align: center;



    display: block;



    margin-top: 30px;



    font-weight: bold;



}



.section-description {



    text-align: center;



    color: #aaa;



    margin-bottom: 50px;



    font-size: 1.1em;



}







/* -------------------------------------- */



/* CORREÇÃO GLOBAL: TÍTULOS H2 */



/* -------------------------------------- */



.content-section h2, .banner-section h2 {



    color: white;



    text-align: center;



    font-size: 2.5em;



    margin-bottom: 40px;



    margin-top: 0;



}







/* ====================================== */



/* 2. CABEÇALHO FIXO E NAVEGAÇÃO */



/* ====================================== */







#main-header {



    position: fixed;



    top: 0;



    left: 0;



    width: 100%;



    z-index: 1000;



    border-top: 5px solid var(--color-accent);



    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);



}







#main-nav {



    background-color: var(--color-dark);



    padding: 15px 5%;



    display: flex;



    align-items: center;



    justify-content: space-between;



}







/* ÍCONES SOCIAIS */



.header-social-icons {



    display: flex;



    align-items: center;



    flex-shrink: 0;



}



.header-social-icons a {



    background-color: var(--color-accent);



    color: var(--color-dark);



    font-size: 0.9em;



    padding: 5px;



    border-radius: 50%;



    width: 25px;



    height: 25px;



    display: inline-flex;



    justify-content: center;



    align-items: center;



    margin-right: 10px;



    transition: background-color 0.3s;



}



.header-social-icons a:hover { background-color: #e65c00; }







/* BOTÃO LOGIN */



.login-btn-top {



    background-color: var(--color-accent);



    color: var(--color-dark);



    padding: 10px 20px;



    border-radius: 5px;



    font-weight: bold;



    font-size: 0.9em;



    flex-shrink: 0;



    transition: background-color 0.3s;



}



.login-btn-top:hover { background-color: #e65c00; }







/* LINKS DE NAVEGAÇÃO CENTRALIZADOS */



.nav-links {



    list-style: none;



    display: flex;



    flex-grow: 1;



    justify-content: center;



    margin: 0 20px;



}



.nav-links li a {



    color: white;



    text-decoration: none;



    margin: 0 15px;



    padding: 5px 0;



    transition: color 0.3s;



}



.nav-links li a:hover { color: var(--color-accent); }







/* Dropdown */



.menu-toggle { display: none; background: none; border: none; color: white; font-size: 1.5em; cursor: pointer; }



.dropdown { position: relative; }



.dropdown-menu { display: none; position: absolute; top: 100%; background-color: var(--color-card-bg); min-width: 180px; list-style: none; padding: 10px 0; z-index: 60; border-radius: 0 0 5px 5px; }



.dropdown-menu a { display: block; padding: 5px 15px; margin: 0; }



.dropdown:hover .dropdown-menu { display: block; }











/* ====================================== */



/* 3. SEÇÃO HERO (CARROSSEL) */



/* ====================================== */



.hero-section {



    position: relative;



    height: 85vh;



    width: 100%;



    overflow: hidden;



}



.slideshow-container {



    position: absolute;



    width: 100%;



    height: 100%;



}



.mySlides {



    position: absolute;



    width: 100%;



    height: 100%;



    background-size: cover;



    background-position: center;



    opacity: 0;



    transition: opacity 1.5s ease-in-out;



}



.hero-content {



    position: absolute;



    bottom: 0;



    left: 0;



    width: 100%;



    z-index: 10;



}



.hero-overlay-dark {



    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);



    padding-top: 200px;



    padding-bottom: 50px;



}



.hero-text {



    padding: 0 5%;



    max-width: 1200px;



    margin: 0 auto;



    color: white;



}



.hero-text h1 {



    font-size: 3.5em;



    text-align: left;



    margin-bottom: 10px;



}



.hero-text p {



    font-size: 1.5em;



    margin-bottom: 20px;



    color: #ccc;



}



.hero-ctas {



    display: flex;



    gap: 20px;



    margin-top: 30px;



}



.secondary-cta {



    background-color: transparent;



    border: 2px solid white;



    color: white;

    padding: 10px 20px;

}



/* ====================================== */

/* 4. LAYOUTS DE GRADES E CARDS (CANAIS E EMPRESÁRIOS) */

/* ====================================== */



.card-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

    max-width: 1200px;

    margin: 40px auto;

}



.card {

    background-color: var(--color-card-bg);

    border-radius: 8px;

    padding: 30px;

    text-align: center;

    transition: transform 0.3s;

    /* CHAVE: Alinhamento vertical forçado para o botão CTA */

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



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

.card i { font-size: 2em; color: var(--color-accent); display: block; margin-bottom: 15px; }



/* Estilos de cor e alinhamento do texto DENTRO dos Cards de Canais */



.card h3 {

    color: white; /* Título BRANCO */

    font-size: 1.5em;

    margin-bottom: 10px;

}



.card p {

    color: #ccc; /* Parágrafo CINZA CLARO */

    font-size: 1em;

    line-height: 1.5;

    flex-grow: 1; /* Preenche o espaço, empurrando o CTA para baixo */  

    margin-bottom: 20px;



}



/* -------------------------------------- */

/* Seção Bem-Vindo (MELHORADO & JUSTIFICADO) */

/* -------------------------------------- */



.bem-vindo-content {

    display: flex;

    gap: 60px; /* Aumenta o espaçamento entre o texto e a foto */

    align-items: center;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 5%;

}



.bem-vindo-content .text-block {

    flex: 1;

    padding-bottom: 20px;

/* NOVO: Limita a largura do bloco de texto para melhorar a justificação e a leitura */

    max-width: 550px;

}



.bem-vindo-content .image-block {

    flex: 1;

    max-width: 450px;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);

    border-radius: 8px;

}



.responsive-img {

    width: 100%;

    height: auto;

    border-radius: 8px;

}



/* Título de Boas-Vindas (BEM-VINDO À NOSSA CASA) */



.text-block h4 {

    color: var(--color-accent);

    font-size: 1em;

    margin-bottom: 10px; /* Aumenta o espaçamento */

    text-align: left;

}



/* Citação Principal ("Nossa paixão é por vidas!") */



.text-block h2 {

    font-size: 3em;

    font-weight: 800;

    margin-bottom: 25px;

    line-height: 1.2;

    text-align: left;

    color: white; /* Garante que a cor seja branca pura */

}



/* NOVO: Mensagem Principal (usando class="main-text" ou p sem classe no seu HTML) */



.text-block p {

    color: #ccc;

    font-size: 1.15em; /* Aumenta um pouco a fonte do corpo de texto */

    line-height: 1.6;

    text-align: justify; /* CHAVE: Justifica o texto */

    margin-bottom: 20px; /* Espaçamento entre os parágrafos */

    display: block; /* Garante que a justificação ocupe a largura total */

}



/* Assinatura */



.author {

    color: var(--color-accent);

    font-weight: bold;

    margin-top: 15px; /* Mais espaço para destacar */

    display: block;

    font-size: 1.1em;

    text-align: left;

}



/* Links Sociais do Pastor */



.social-links-pastor a i {

    font-size: 1.5em;

    color: white;

    margin-right: 15px;

    transition: color 0.3s;

}



.social-links-pastor a:hover i {

    color: var(--color-accent);

}



/* Responsividade (Empilha em mobile) */



@media (max-width: 900px) {



    .bem-vindo-content {

        flex-direction: column;

        text-align: center;

    }



    .text-block h2, .text-block h4 {

        text-align: center;

    }



    /* Centraliza o texto justificado no mobile */



    .text-block p {

        text-align: left; /* Volta para left/center em mobile para não ficar feio */

        padding: 0 5%;

    }



    .bem-vindo-content .image-block {

        order: -1;

        margin-bottom: 30px;

    }

}



/* Conteúdo em Grid (Lateral) */



.media-grid {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 20px;

    max-width: 1200px;

    margin: 40px auto;

}



.media-card {

    height: 400px;

    background-size: cover;

    background-position: center;

    border-radius: 8px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: flex-end;

}



.side-cards { display: flex; flex-direction: column; gap: 20px; }

.side-cards .small-card { height: 190px; }

.overlay-text { padding: 20px; background: rgba(0,0,0,0.6); width: 100%; }

.tag { background-color: var(--color-accent); color: white; padding: 3px 8px; border-radius: 3px; font-size: 0.8em; margin-bottom: 5px; display: inline-block; }



/* Seção Empresários */



.empresarios-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

    max-width: 1200px;

    margin: 40px auto;

}



.business-card {

    background-color: var(--color-card-bg);

    border-radius: 8px;

    padding: 30px;

    text-align: center;

    transition: transform 0.3s, border 0.3s;

    border: 1px solid var(--color-card-bg);



    /* CHAVE 1: Ativa o Flexbox para alinhamento vertical */

    display: flex;

    flex-direction: column;



    /* CHAVE 2: Garante que o botão vá para o fundo */

   

    justify-content: space-between;

}



.business-card:hover {

    transform: translateY(-5px);

    border: 1px solid var(--color-accent);

}



.business-logo {

    width: 100px;

    height: 100px;

    margin: 0 auto 20px auto;

    background-color: #333;

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    border-radius: 50%;

    flex-shrink: 0;

}



.business-card h3 {

    color: white;

    font-size: 1.5em;

    margin-bottom: 5px;

}



.business-text-wrapper {

    flex-grow: 1; /* Força o bloco de texto a preencher o espaço */

    margin-bottom: 20px;

    padding-top: 10px;

}



.segmento {

    color: var(--color-accent); /* MANTIDO: Segmento em Laranja */

    font-weight: bold;

    font-size: 0.9em;

    margin-bottom: 10px;

}



.contato {

    color: #ccc; /* CORRIGIDO: Cor cinza claro (estava escuro) */

    font-size: 0.9em;

    line-height: 1.5;

}



/* ====================================== */

/* ESTILOS ESPECÍFICOS PARA DOWNLOAD CARDS (CORRIGIDO) */

/* ====================================== */



/* Container de Grid (Força 3 Colunas) */



.cards-mvv-grid {

    display: grid;



    /* CHAVE: A regra 'cards-mvv-grid' já está no seu CSS e define 3 colunas */

   

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

    max-width: 1200px;

    margin: 40px auto;

}



/* O Card Individual - Garantindo o Layout Compacto */



.download-card {

    background-color: var(--color-card-bg);

    border-top: 5px solid var(--color-accent);

    text-align: center;



    /* Layout Flexível COMPACTO (CHAVE) */

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 0; /* Remove padding que causava o excesso de tamanho */

    overflow: hidden;

}



/* ------------------ */

/* Seção de Mídia (Capa do Plano) */

/* ------------------ */

.plan-media {

    height: 180px; /* Altura da capa */

    background-size: cover;

    background-position: center;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: rgba(0, 0, 0, 0.4);

}



.plan-media i {

    font-size: 3em;

    color: white;

    background-color: rgba(0, 0, 0, 0.5);

    border-radius: 50%;

    padding: 10px;

}



/* ------------------ */

/* Seção de Texto (abaixo da capa) */

/* ------------------ */

.plan-text-content {

    padding: 20px 25px;

    flex-grow: 1; /* CHAVE: Preenche o espaço, empurrando o botão para a base */

    text-align: left;

}



.download-card h3 {

    text-align: left;

    margin-bottom: 10px;

    color: white;

}



.download-card p {

    text-align: left;

    color: #ccc;

    font-size: 1em;

    line-height: 1.6;

    margin-bottom: 0;

}



.download-card .cta-button-small {

    /* Botão que ocupa 100% da largura na base do card */

    margin-top: auto;

    width: 100%;

    border-radius: 0;

}



/* ====================================== */

/* 5. ESTILOS DE PÁGINAS SECUNDÁRIAS */

/* ====================================== */



/* Seção Título (Ex: QUEM SOMOS) */

.page-hero {

    background-color: var(--color-card-bg);

    padding: 120px 5% 50px 5%;

    text-align: center;

    border-bottom: 2px solid var(--color-accent);

}



.page-hero h1 {

    font-size: 3em;

    color: var(--color-accent);

    margin: 0;

}



/* CORREÇÃO: Parágrafo do page-hero */

.page-hero p {

    color: white;

    margin-top: 10px;

    font-size: 1.2em;

}



/* Biografia/História (Texto e Foto) */

.history-content {

    display: flex;

    gap: 40px;

    align-items: flex-start;

    max-width: 1200px;

    margin: 40px auto;

    padding: 0 5%;

    flex-direction: row;

}



.history-image {

    width: 300px;

    height: auto;

    border-radius: 8px;

    flex-shrink: 0;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);

}



.history-text h3 {

    font-size: 1.6em;

    color: var(--color-accent);

    text-align: left;

    margin-top: 30px;

    margin-bottom: 15px;

    border-bottom: 1px solid #333;

    padding-bottom: 5px;

}



.history-text p {

    font-size: 1.1em;

    color: #ccc;

    line-height: 1.7;

    margin-bottom: 20px;

}



.history-text .quote {

    font-style: italic;

    font-weight: 500;

    color: var(--color-accent);

    border-left: 3px solid var(--color-accent);

    padding-left: 15px;

    margin: 25px 0;

}



/* Cards Pastores - AJUSTADO PARA 2 LINHAS DE 4 */

.pastor-card-grid {

    display: grid;

    /* MUDANÇA: Forçamos 4 colunas em telas grandes em vez de deixar automático */

    grid-template-columns: repeat(4, 1fr);

    gap: 30px 20px;

    max-width: 1200px;

    margin: 40px auto;

}



.pastor-card {

    background-color: var(--color-card-bg);

    /* MUDANÇA: Reduzi o padding para o texto não ficar espremido nas colunas menores */

    padding: 20px 15px;

    border-radius: 8px;

    text-align: center;

}



/* Garante que o nome e o texto da bio sejam brancos */

.pastor-card h3,

.pastor-card p {

    color: white !important;

}



.pastor-photo {

    /* MUDANÇA: Reduzi de 200px para 150px para que 4 fotos caibam na largura sem erro */

    width: 150px;

    height: 150px;

    object-fit: cover;

    border-radius: 50%;

    border: 4px solid var(--color-accent);

    margin: 0 auto 15px auto;

    display: block;

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

}



/* Mantém o cargo em Laranja */

.pastor-card .role {

    color: var(--color-accent) !important;

    font-weight: bold;

    font-size: 0.9em;

    margin-bottom: 10px;

    display: block;

}



/* RESPONSIVIDADE: Importante para não quebrar no celular */

@media (max-width: 1024px) {

    .pastor-card-grid {

        grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablets */

    }

}



@media (max-width: 600px) {

    .pastor-card-grid {

        grid-template-columns: 1fr; /* 1 coluna em celulares */

    }

}



/* ====================================== */

/* AJUSTE MISSÃO, VISÃO E VALORES (Ícones e Cor) */

/* ====================================== */



.cards-mvv-grid i,

.mvv-card i {

    font-size: 3em !important; /* Aumenta o tamanho do ícone */

    color: var(--color-accent) !important; /* Aplica o laranja do site */

    margin-bottom: 20px;

    display: inline-block;

}



.mvv-card h3 {

    color: white;

    margin-top: 10px;

}



.mvv-card p {

    color: #ccc;

    text-align: justify; /* Melhora a leitura do texto */

}



/* Estilo para o Aviso de PDF */



.aviso-pdf {

    text-align: center;

    color: #aaa;

    font-size: 0.9em;

    padding-bottom: 20px; /* Adiciona um espaço na parte inferior da seção */

}



/* Estilizando o H2 da seção de Planos de Leitura que foi adicionado */

.h2-plano-leitura {

    color: white; /* Garante que o título da seção seja branco */

    text-align: center;

    font-size: 2.5em;

    margin-bottom: 20px;

}



/* ====================================== */

/* 6. RODAPÉ */

/* ====================================== */



#main-footer {

    background-color: var(--color-dark);

    border-top: 1px solid #333;

    padding: 40px 5%;

}



.footer-content {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    max-width: 1200px;

    margin: 0 auto;

}



.footer-logo-img {

    height: 120px;

    width: auto;

    max-width: 100%;

}



.footer-logo {

    margin-bottom: 0px;

    min-width: 150px;

}



.footer-links {

    display: flex;

    gap: 30px;

    margin-right: 20px;

}



.link-column h4 { color: white; margin-bottom: 10px; }



.link-column a, .footer-contato p, .footer-legal a {

    display: block;

    color: #aaa;

    margin-bottom: 5px;

    font-size: 0.9em;

}



.footer-legal { margin-top: 15px; }



/* CRÉDITOS DE DESENVOLVIMENTO */

.developer-credits {

    min-width: 150px;

    text-align: center;

}



.dev-logo-link {

    display: block;

    margin: 10px auto 15px auto;

}



.dev-logo {

    max-width: 80px;

    height: auto;

    opacity: 0.7;

    transition: opacity 0.3s;

}



.dev-logo-link:hover .dev-logo {

    opacity: 1;

}



.dev-text {

    font-size: 0.8em;

    color: #aaa;

    margin-top: 5px;

    font-weight: bold;

}



.dev-social-icons {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 10px;

}



.dev-social-icons a {

    color: #aaa;

}



.dev-social-icons a:hover {

    color: var(--color-accent);

}



/* ====================================== */

/* 7. AJUSTE FINAL DA SEÇÃO APP (#app) */

/* ====================================== */



#app {

    background-color: var(--color-dark);

    padding: 80px 5%; /* Padding ajustado para melhor "respiro" */

    color: var(--color-text-light);

}



.app-content {

    display: flex;

    align-items: center;

    justify-content: space-around; /* Ajustado para melhor espaçamento */

    gap: 40px;

    max-width: 1200px;

    margin: 0 auto;

}



.app-text {

    max-width: 600px; /* Aumentado para melhor proporção */

    flex-shrink: 0;

}



.app-text h2 {

    font-size: 2.5em; /* Aumentado para destaque */

    text-align: left;

    margin-bottom: 25px;

    color: white;

}



.app-features {

    margin-top: 20px;

    margin-bottom: 20px;

    font-size: 1.1em; /* Fonte um pouco maior */

    color: white; /* Corrigido para branco puro */

}



.app-features p {

    margin-bottom: 8px; /* Espaçamento entre as features */



}



.app-mockup {

    flex-shrink: 0;

    text-align: right;

}



.app-mockup img {

    max-width: 250px;

    height: auto;

    display: block;

}



.app-links img {

    height: 60px; /* Aumentado para melhor visualização */

    width: auto;

    margin-right: 15px;

    filter: brightness(0) invert(1); /* Torna as imagens brancas para dar contraste */

    transition: transform 0.3s, opacity 0.3s;

    opacity: 0.9;

}



.app-links img:hover {

    transform: scale(1.05);

    opacity: 1;

}



/* Responsividade (Reconfirmação) */

@media (max-width: 768px) {

    .app-content {

        flex-direction: column;

        text-align: center;

    }



    .app-text {

        max-width: 100%;

    }



    .app-text h2 {

        text-align: center;

    }



    .app-mockup {

        order: -1;

        margin-bottom: 30px;

    }

}



/* AJUSTE DOS CHECKBOXES E ÍCONES DE FEATURES */

.app-features p i,

.app-features p::before {

    color: var(--color-accent) !important;

    font-size: 1.3em;

    margin-right: 12px;

    font-weight: bold;

}



/* -------------------------------------- */

/* AJUSTES FINAIS DE COR E COPYRIGHT */

/* -------------------------------------- */



.footer-contato h4 {

    color: white;

    margin-bottom: 10px;

}



.developer-credits h4 {

    color: white;

    margin-bottom: 10px;

}



.copyright {

    width: 100%;

    text-align: center;

    color: white;

    padding: 20px 0;

    border-top: 1px solid #333;

    margin-top: 20px;

}



.copyright p {

    font-size: 0.9em;

    margin: 0;

}



/* ====================================== */

/* 8. RESPONSIVIDADE (MEDIA QUERIES) */

/* ====================================== */



/* Menu Hamburger e Grids em Tablet */



@media (max-width: 900px) {



    /* CABEÇALHO */

    .nav-links { display: none; }



    .menu-toggle { display: block; }



    /* GRADES (Tablet: 2 Colunas) */

    .cards-mvv-grid,

    .pastor-card-grid,

    .empresarios-grid,

    .card-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    /* LAYOUTS FLEX (Empilha verticalmente) */

    .bem-vindo-content, .hero-ctas, .history-content {

        flex-direction: column;

        align-items: center;

    }

   

    .history-text h3, .history-text p {

        text-align: center;

    }



    /* RODAPÉ */

    .footer-content {

        flex-direction: column;

    }

    .footer-links {

        flex-direction: column;

        gap: 20px;

        margin-bottom: 20px;

    }

}



/* Celulares */

@media (max-width: 500px) {

    /* CABEÇALHO */

    #main-nav {

        padding: 10px 3%;

    }

    .header-social-icons {

        display: none;

    }

   

    /* GRADES (Celular: 1 Coluna) */

    .cards-mvv-grid,

    .pastor-card-grid,

    .empresarios-grid,

    .card-grid {

        grid-template-columns: 1fr;

    }



    /* TEXTO HERO */

    .hero-text h1 {

        font-size: 1.8em;

    }

    .hero-text p {

        font-size: 1em;

    }

}



/* ====================================== */

/* ESTILOS DO FORMULÁRIO DE ORAÇÃO */

/* ====================================== */



.form-container {

    max-width: 600px; /* Limita a largura do formulário para o centro */

    margin: 0 auto;

    background-color: var(--color-card-bg);

    padding: 40px;

    border-radius: 8px;

    border-top: 5px solid var(--color-accent);

}



.instruction-text {

    text-align: center;

    color: #ccc;

    margin-bottom: 30px;

    font-size: 1.1em;

}



.prayer-form {

    display: flex;

    flex-direction: column;

}



.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;

    color: white;

    font-weight: bold;

    margin-bottom: 8px;

}



/* Estilo para Inputs (Caixas de texto e textarea) */

.prayer-form input[type="text"],



.prayer-form input[type="email"],



.prayer-form input[type="tel"],



.prayer-form textarea {

    width: 100%;

    padding: 12px;

    background-color: #333; /* Fundo escuro para combinar */

    border: 1px solid #555;

    color: white;

    border-radius: 4px;

    box-sizing: border-box; /* Garante que o padding não aumente a largura */

    font-size: 1em;

    transition: border-color 0.3s;

}



.prayer-form textarea {

    resize: vertical; /* Permite redimensionar apenas verticalmente */

}



.prayer-form input:focus,

.prayer-form textarea:focus {

    border-color: var(--color-accent); /* Borda laranja ao focar */

    outline: none;

}



/* Checkbox e Label */

.checkbox-group {

    display: flex;

    align-items: center;

}



.checkbox-group label {

    font-weight: normal;

    margin-bottom: 0;

    margin-left: 10px;

    color: #aaa;

}



/* Botão de Envio */

.submit-button {

    margin-top: 10px;

    align-self: flex-start; /* Alinha o botão à esquerda */

    padding: 12px 30px;

    font-size: 1.1em;

}



/* ====================================== */

/* ESTILOS DA PÁGINA DE CONTRIBUIÇÃO (PIX) - CORREÇÃO FINAL */

/* ====================================== */

.pix-container {

    display: flex;

    justify-content: space-around;

    align-items: flex-start;

    gap: 60px;

    max-width: 1000px;

    margin: 40px auto;

}



.pix-instrucoes, .pix-qrcode {

    flex: 1;

    min-width: 300px;

}



.pix-instrucoes h2, .pix-qrcode h2 {

    text-align: left;

    color: white; /* GARANTE QUE OS TÍTULOS H2 SEJAM BRANCOS */

    font-size: 1.8em;

    margin-bottom: 20px;

    border-bottom: 2px solid var(--color-accent);

    padding-bottom: 5px;

}



/* NOVO: Estilo do H4 para o Título da Chave PIX */

.pix-instrucoes h4 {

    color: white; /* CHAVE: Deixa o H4 branco */

    font-size: 1.2em;

    margin-top: 20px;

    margin-bottom: 5px;

}



/* Estilo dos Parágrafos e Listas de Instrução */

.pix-instrucoes p {

    color: #ccc; /* Cor clara para o texto de instrução */

    margin-bottom: 15px;

    line-height: 1.6;

}



.pix-passos {

    list-style: none;

    padding-left: 0;

    margin-bottom: 30px;

}



.pix-passos li {

    background-color: var(--color-card-bg);

    padding: 10px;

    margin-bottom: 8px;

    border-radius: 4px;

    color: #ccc; /* Cor clara para o texto da lista */

}



/* Chave PIX em destaque (Valor do CNPJ) */

.pix-chave-valor {

    font-size: 1.4em;

    font-weight: bold;

    color: var(--color-accent);

    background-color: var(--color-card-bg);

    padding: 10px;

    border-radius: 4px;

    text-align: center;

    margin-bottom: 20px;

    /* Adicionado margem para o botão de cópia */

    margin-right: 15px;

    display: inline-block;

}



/* QR Code */

.qrcode-img {

    width: 100%;

    max-width: 300px;

    height: auto;

    display: block;

    margin: 20px auto 10px auto;

    border: 5px solid white;

}



.qrcode-aviso {

    text-align: center;

    color: #aaa;

}



/* -------------------------------------- */

/* DADOS BANCÁRIOS (SEÇÃO INFERIOR) */

/* -------------------------------------- */

.dados-bancarios-wrapper {

    max-width: 500px;

    margin: 20px auto;

}



/* Estilo do aviso "Confira as informações..." */

.aviso-branco-contribua {

    color: white;

    font-weight: 500;

    margin-bottom: 15px;

    text-align: center;

    display: block;

}



/* Container de dados */

.dados-bancarios {

    background-color: var(--color-card-bg);

    padding: 20px;

    border-radius: 8px;

}



.dados-bancarios p {

    font-size: 1.1em;

    margin-bottom: 5px;

    color: white; /* GARANTIDO: Cor branca para os dados bancários */

}



/* Responsividade: Empilha em mobile */

@media (max-width: 800px) {

    .pix-container {

        flex-direction: column;

        align-items: center;

    }

    .pix-instrucoes, .pix-qrcode {

        min-width: 100%;

    }

    .pix-instrucoes h2, .pix-qrcode h2 {

        text-align: center;



    }

}



/* ====================================== */

/* ESTILOS PARA PÁGINAS EM PRODUÇÃO */

/* ====================================== */



/* Container que centraliza o conteúdo na tela */

.production-container {

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    min-height: 60vh;

}



/* O "card" central de aviso */

.production-content {

    max-width: 700px;

    padding: 40px;

    background-color: var(--color-card-bg);

    border-radius: 15px;

    border-bottom: 5px solid var(--color-accent);

}



/* Estilo para os ícones (Engrenagem, Livro, Sacola) */

.gear-icon {

    font-size: 5em;

    color: var(--color-accent);

    margin-bottom: 30px;

    display: inline-block;

}



/* Animação de Rotação (para a engrenagem) */

.fa-tools.gear-icon {

    animation: rotateGear 10s linear infinite;

}



@keyframes rotateGear {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



/* Animação de Pulso (para Livro e Redes) */

.fa-book-open, .fa-share-nodes {

    animation: pulseIcon 2s infinite ease-in-out;

}



@keyframes pulseIcon {

    0% { transform: scale(1); opacity: 1; }

    50% { transform: scale(1.1); opacity: 0.8; }

    100% { transform: scale(1); opacity: 1; }

}



.production-content h2 {

    font-size: 2.5em;

    color: white;

    margin-bottom: 20px;

}



.production-content p {

    color: #ccc;

    font-size: 1.1em;

    margin-bottom: 15px;

}



.highlight-text {

    font-weight: bold;

    color: var(--color-accent) !important;

    margin-top: 20px;

}



.production-actions {

    display: flex;

    gap: 20px;

    justify-content: center;

    margin-top: 40px;

}



/* Ajuste para celulares */

@media (max-width: 600px) {

    .production-actions {

        flex-direction: column;

    }

}