/* Reset Básico e Fontes */
body, h1, h2, h3, p, ul, a {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif; /* Fonte padrão para textos */
    box-sizing: border-box;
}

body {
    line-height: 1.7;
    background-color: #fdfaf6; /* Fundo bege/creme bem claro */
    color: #5d5d5d; /* Cor de texto principal (cinza-escuro quente) */
}

.container {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

/* Seções Padrão */
.section {
    padding: 60px 0;
}
.section-dark {
    background-color: #3e342c; /* Marrom-escuro (sépia) */
    color: #f0f0f0;
}
.section-light-beige {
    background-color: #f7f2ec; /* Bege claro para destaque */
}

/* ======================================================= */
/* AJUSTE DE TEXTO DA COMUNIDADE (ALINHAR À ESQUERDA)      */
/* ======================================================= */

.section-light-beige p {
    text-align: left !important; /* Força o alinhamento à esquerda */
    
    /* Dica Pro: Mantém o bloco de texto centralizado na tela, 
       mas com as linhas começando na esquerda. Fica mais bonito. */
    max-width: 960px; 
    margin-left: auto; 
    margin-right: auto;
    margin-bottom: 20px; /* Garante espaço entre os parágrafos */
}

/* Se quiser alinhar o Título também, descomente a linha abaixo: */
.section-light-beige h2 { text-align: left !important; }

/* Tipografia (Títulos com fonte clássica) */
h1, h2, h3, .logo {
    font-family: 'Cinzel', serif; /* Fonte do logo */
    font-weight: 700;
    color: #4a3c31; /* Cor de título (marrom-sépia) */
}

h1 {
    font-size: 36px;
    margin-bottom: 15px;
}

h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

p {
    margin-bottom: 15px;
    color: #5d5d5d;
}

a {
    color: #b8860b; /* Cor de link (Dourado) */
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: #9a700a; /* Dourado mais escuro */
}

/* Cabeçalho */
.header {
    padding: 20px 0;
    border-bottom: 1px solid #e0d8cf; /* Borda bege */
    background-color: #fdfaf6;
}
.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-size: 22px;
    text-decoration: none;
    color: #4a3c31;
}
.lang-links a {
    margin-left: 15px;
    font-size: 14px;
    font-weight: 500;
}

/* Seção Hero */
.hero {
    padding: 50px 0;
}
.hero-container {
    display: flex;
    align-items: center;
    gap: 40px;
}
.hero-content {
    flex: 2;
}
.hero-content .tagline {
    font-size: 14px;
    font-weight: 700;
    color: #b8860b; /* Dourado */
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hero-content h1 {
    line-height: 1.3;
}
.hero-image {
    flex: 1;
    text-align: center;
}
.hero-image img {
    width: 100%;
    max-width: 300px;
    border-radius: 8px;
    object-fit: cover;
    border: 3px solid #f7f2ec;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.hero-image span {
    font-size: 12px;
    color: #888;
    font-style: italic;
    display: block;
    margin-top: 10px;
}

/* ======================================================= */
/* CONTROLE DE IMAGENS (DESKTOP VS MOBILE)                 */
/* ======================================================= */

/* Por padrão (PC), esconde a imagem de celular */
.img-mobile {
    display: none;
}

/* Garante que a imagem de desktop apareça no PC */
.img-desktop {
    display: block;
    width: 100%;
    /* ... seus estilos antigos de borda/sombra já se aplicam aqui ... */
}


/* Botões CTA (Dourados) */
.cta-buttons {
    margin-top: 25px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.btn {
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}
.btn-primary {
    background-color: #b8860b; /* Dourado */
    color: #ffffff;
}
.btn-primary:hover {
    background-color: #9a700a;
}
.btn-secondary {
    color: #4a3c31; /* Marrom-sépia */
    font-weight: 600;
}
.btn-secondary:hover {
    color: #000;
}

/* Layout Dividido (Sobre + Como Participar) */
.container-split {
    display: flex;
    gap: 40px;
}
.split-main {
    flex: 2;
}
.split-sidebar {
    flex: 1;
    background-color: #f7f2ec; /* Fundo bege */
    padding: 25px;
    border-radius: 8px;
    height: fit-content;
}
.split-sidebar ul {
    list-style-position: inside;
    color: #5d5d5d;
}
.split-sidebar li {
    margin-bottom: 10px;
}

    /* BANNER HEAD TOPO */
    /* Por padrão, esse banner não existe */
    .banner-mobile {
        display: none;
    }

/* Texto discreto de instrução do vídeo */
.instruction-text {
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin-top: -30px;     /* estava -10 */
    margin-bottom: 0px;     /* estava 10 */
    display: block;
    
    /* A CORREÇÃO MÁGICA: */
    text-align: center;     /* Garante que fique no meio */
    width: 100%;            /* Garante que ocupe a largura toda para poder centralizar */
}

/* ======================================================= */
/* AJUSTES DA SEÇÃO DE ORAÇÃO (COR DO TÍTULO + TEXTO)      */
/* ======================================================= */

/* 1. Muda a cor SÓ desse título específico */
#oracao h2 {
    color: #d4af37; /* Dourado (se quiser branco, use #ffffff) */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra para leitura */
}

/* ======================================================= */
/* CAIXA DE TEXTO DA ORAÇÃO (ALINHADA COM O VÍDEO)         */
/* ======================================================= */

.prayer-text-box {
    /* 1. MEDIDAS PARA IGUALAR AO VÍDEO */
    width: 95%;           /* Ocupa 95% da tela (igual ao wrapper do vídeo) */
    max-width: 960px;     /* Trava na mesma largura máxima do vídeo */
    margin: 25px auto;    /* 'auto' nas laterais centraliza o bloco na tela */

    /* 2. ESTILO VISUAL */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 25px;
    
    /* 3. TEXTO */
    text-align: left;
    box-sizing: border-box; /* Garante que o padding não "estoure" a largura */
}

/* Mantém o estilo dos textos internos */
.prayer-text-box h3 {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
}

.prayer-text-box p {
    color: #e0d8cf;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* ======================================================= */
/* CENTRALIZAR TEXTO E BOTÃO DO WHATSAPP                   */
/* ======================================================= */

/* 1. O Texto "Gostou?..." */
.share-prompt {
    text-align: center !important; /* Força o alinhamento ao centro */
    display: block;                /* Ocupa a linha toda para poder centralizar */
    width: 100%;
    margin-top: 30px;
    color: #e0d8cf; /* Ajuste a cor se estiver muito escuro no fundo marrom, ex: #ccc */
}

/* 2. O Botão Verde */
.btn-whatsapp {
    margin: 20px auto !important; /* 'auto' nas laterais faz o botão ir pro meio */
    display: flex !important;     /* Garante comportamento de bloco flexível */
    width: fit-content;           /* O botão fica apenas do tamanho do texto */
    justify-content: center;      /* Garante que o ícone e texto fiquem no meio do botão */
}


/* --- SEÇÃO DIVISÓRIA PARALLAX --- */

.parallax-divider {
    display: none; /* faz ficar invisivel no PC */
    
    /* 1. A URL DA SUA IMAGEM: Troque o link dentro das aspas pelo link da sua imagem */
    /* FOTO ORIGINAL    background-image: url('img/por-do-sol-minutos-de-fe.webp?q=80&w=1920&auto=format&fit=crop');    foto original */
    background-image: url('img/banner-minutos-de-fe-01.jpg?q=80&w=1920&auto=format&fit=crop');

    /* 2. Altura da seção: Define o tamanho do "buraco" onde a imagem aparece.
       400px é um bom tamanho padrão. Ajuste se quiser maior ou menor. */
    min-height: 200px;

    /* --- A MÁGICA DO PARALLAX --- */
    /* O 'fixed' faz a imagem ficar presa na tela enquanto o site rola por cima dela */
    background-attachment: fixed;

    /* Configurações padrão para a imagem de fundo ficar bonita */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Não repete a imagem */
    background-size: cover; /* Faz a imagem cobrir todo o espaço sem distorcer */
    position: relative;
}

/* (Opcional) Overlay escuro:
   Se a sua imagem for muito clara e você quiser colocar texto branco em cima dela no futuro,
   você pode descomentar (tirar o /* e * /) o código abaixo para escurecer um pouco a imagem. */

/*
.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Ajuste o 0.3 para mais escuro (0.7) ou mais claro (0.1) */
}
*/

/* Player de Vídeo */
.section-dark h2 {
    color: #ffffff;
}
/* Wrapper para o vídeo ficar com cara de "botão nativo" */
.video-destaque-wrapper {
    /* Garante que o vídeo ocupe a largura disponível, igual aos botões */
    width: 95%;
    /* Se os seus botões tiverem uma largura máxima definida, coloque-a aqui também. 
       Chutei 600px, ajuste se necessário para ficar igual aos botões. */
    max-width: 960px; 
    
    /* Centraliza o bloco do vídeo */
    margin: 20px auto; 
    
    /* A MÁGICA DA RESPONSIVIDADE: 
       Isso força o container a manter sempre a proporção 16:9 (widescreen) do YouTube, 
       seja no celular ou no PC.  (antes estava aqui embaixo > aspect-ratio: 16 / 9; ) padding-top: 56.25%;  16:9 */  
    aspect-ratio: 16 / 9;
    
    /* Arredondamento forte para combinar com seus botões dourados (estava 35px) */
    border-radius: 10px; 
    
    /* Importante: esconde as pontas quadradas do iframe do YouTube para respeitar o arredondado */
    overflow: hidden; 
    
    /* Opcional: Uma sombra suave para dar profundidade, se seus botões tiverem */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: #000; /* Fundo preto enquanto carrega */
}

/* Faz o iframe do YouTube preencher 100% do wrapper que criamos */
.video-destaque-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* NOVO: Depoimentos com Fundo Parallax */
.section-testimonials {
    /* Imagem de fundo (usei a das nuvens como exemplo) com overlay bege */
    background-image: linear-gradient(rgba(253, 250, 246, 0.1), rgba(253, 250, 246, 0.2)), url('/site/img/ceu.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* O EFEITO PARALLAX */
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.testimonial-card {
    /* Efeito de "vidro fosco" para destacar do fundo */
    background-color: rgba(253, 250, 246, 0.7); /* Fundo bege semi-transparente */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(224, 216, 207, 0.5); /* Borda sutil */
    padding: 25px;
    border-radius: 8px;
}
.testimonial-card p { font-style: italic; color: #444; margin-bottom: 15px; }
.testimonial-card span { font-weight: 600; font-style: normal; color: #333; }


/* Espaço entre o ícone e o texto dentro dos botões */
.btn i {
    margin-right: 8px;
    font-size: 1.1em; /* Deixa o ícone levemente maior */
}

/* Botão Verde do WhatsApp */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    background-color: #25D366; /* Verde WhatsApp */
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    
    padding: 15px 30px;
    border-radius: 50px; /* Bordas bem redondas (formato pílula) */
    margin-top: 20px;
    
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3); /* Sombra verde */
    transition: transform 0.2s, background-color 0.2s;
}

.btn-whatsapp:hover {
    background-color: #128C7E; /* Verde mais escuro ao passar o mouse */
    transform: translateY(-3px); /* Pula um pouquinho */
}

.btn-whatsapp i {
    font-size: 1.2em; /* Ícone um pouco maior */
}

/* Comunidade */
/* ======================================================= */
/* ESTILO DOS BOTÕES DE REDE SOCIAL                        */
/* Substitua o estilo antigo de .community-links e .btn-icon */
/* ======================================================= */

.community-links {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;       /* Permite que os botões pulem de linha */
    justify-content: center;
    gap: 15px;             /* Espaço entre os botões */
}

.btn-icon {
    /* Layout do Botão */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    /* Visual do Botão (Branco com borda) */
    background-color: #ffffff;
    border: 1px solid #e0d8cf; /* Borda bege suave */
    border-radius: 8px;        /* Cantos arredondados */
    padding: 14px 20px;
    
    /* Texto e Ícone */
    color: #4a3c31;            /* Marrom da marca */
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    
    /* Tamanho e Sombra */
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); /* Sombra bem leve */
    transition: all 0.3s ease;
    
    /* RESPONSIVIDADE: Isso faz ficar 2 por linha no celular */
    width: 47%; /* Quase metade da tela (deixa espaço pro gap) */
    min-width: 140px; /* Garante que não fique muito pequeno */
}

/* Efeito ao passar o mouse (opcional para PC) */
.btn-icon:hover {
    border-color: #b8860b;      /* Borda fica dourada */
    color: #b8860b;             /* Texto fica dourado */
    transform: translateY(-2px); /* Sobe um pouquinho */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.btn-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor; /* Pega a cor do texto automaticamente */
}

/* Rodapé */
.footer {
    padding: 25px 0;
    border-top: 1px solid #e0d8cf; /* Borda bege */
    font-size: 14px;
    color: #777;
}
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-nav a {
    margin-left: 20px;
    color: #777;
}
.footer-nav a:hover {
    color: #b8860b;
}


/* ======================================================= */
/* RESPONSIVIDADE (AJUSTES PARA CELULAR - VERSÃO ESTÁVEL) */
/* Substitua o bloco final do seu CSS por este código     */
/* ======================================================= */

@media (max-width: 768px) {

    /* 1. Ajustes Gerais */
    .container { width: 90%; }
    .section { padding: 30px 0; }
    h1 { font-size: 26px; }
    h2 { font-size: 24px; }
    
    /* 2. Cabeçalho (Lado a Lado: Logo Esq / Idiomas Dir) */
    .header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .lang-links {
        display: flex;
        flex-direction: column; /* Empilha Português sobre Espanhol */
        text-align: right;
        gap: 2px;
    }

    .lang-links a { margin-left: 0; font-size: 12px; }

    .parallax-divider {
        display: none; /* Block: Faz aparecer só no celular! */
        
        /* Opcional: Se quiser ajustar a altura só pro celular */
        min-height: 150px; 
    }
    
    /* 3. Hero (Foto cortada, mas dentro da margem) */
    .hero {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .hero-container {
        flex-direction: column-reverse; /* Imagem acima do texto */
        gap: 15px;
    }

    .hero-image {
        width: 100%;
        margin-bottom: 0px;
    }

    /* BANNER TOPO */
    /* --- LIGAR O BANNER NO CELULAR --- */
    .banner-mobile {
        display: block;      /* Faz aparecer */
        width: 100%;         /* Garante largura total */
        margin-bottom: 0px; /* ESTAVA 20px > Um espacinho embaixo dele */
    }

    .banner-mobile img {
        width: 100%;         /* Estica a imagem de ponta a ponta */
        height: auto;        /* Mantém a proporção correta */
        display: block;      /* Remove espaços extras embaixo da imagem */
    }
    
    /* --- A TROCA DE IMAGENS --- */
    
    /* 1. Esconde a imagem de computador */
    .img-desktop {
        display: none;
    }

    /* 2. Mostra e estiliza a imagem de celular */
    .img-mobile {
        display: block;       /* Faz aparecer! */
        width: 100%;
        height: 180px;        /* A altura fixa que você gostou */
        object-fit: cover;    /* Corta o excesso */
        object-position: center;
        border-radius: 8px;   /* Cantos arredondados */
        margin-bottom: 5px;
    }
    
    .hero-image span {
        display: none; /* Esconde a legenda */
    }

    .cta-buttons { justify-content: center; }

    /* 4. Outros ajustes */
    .container-split { flex-direction: column; gap: 30px; }
    .split-image, .split-content { width: 100%; flex: none; }
    .split-sidebar { width: auto; margin-top: 20px; }
}