/* -------------------------------------- */
/* CSS GERAL E VARIÁVEIS */
/* -------------------------------------- */
:root {
    --cor-principal: #004d99; /* Azul escuro */
    --cor-secundaria: #ffcc00; /* Amarelo/Ouro */
    --cor-fundo: #f4f4f4;
    --cor-texto-claro: white;
    --cor-texto-escuro: #000;
    --fonte-titulo: 'Poppins', sans-serif; /* FONTE MODERNA */
    --fonte-corpo: 'Poppins', sans-serif; /* FONTE MODERNA */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth; /* Suaviza a rolagem */
}

body {
    font-family: var(--fonte-corpo);
    color: var(--cor-texto-escuro);
    background-color: var(--cor-fundo);
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

section {
    padding: 100px 0;
}

h2 {
    font-family: var(--fonte-titulo);
    color: var(--cor-principal);
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5em;
    font-weight: 800;
}

/* -------------------------------------- */
/* CABEÇALHO E HERO SECTION (HOME) */
/* -------------------------------------- */
header {
    background-color: var(--cor-principal);
    color: var(--cor-texto-claro);
    
    /* 1. DEFININDO A ALTURA E REMOVENDO PADDING EXTERNO */
    height: 100px; /* Altura fixa solicitada */
    padding: 0;    /* Remove espaçamentos extras */
    
    /* Mantendo fixo no topo */
    position: sticky;
    top: 0;
    z-index: 1000;

    /* 2. EFEITO DE SOMBRA (SUSPENSO) */
    /* Sombra deslocada para baixo (4px), com desfoque (15px) e cor preta semi-transparente */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); 

    /* Centralização vertical */
    display: flex;
    align-items: center;
}

/* Regra específica para o container DENTRO do header */
/* Isso evita que ele herde o padding de 20px do container global */
header .container {
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center; /* Centraliza verticalmente logo e menu */
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Garante que o menu ocupe a largura toda */
}

.logo {
    font-family: var(--fonte-titulo);
    font-size: 1.5em;
    color: var(--cor-secundaria);
    font-weight: 800;
}

.nav-links a {
    color: var(--cor-texto-claro);
    text-decoration: none;
    margin-left: 40px;
    font-weight: 400;
    transition: color 0.3s;
    
    /* Opcional: Aumentar um pouco a fonte do menu para equilibrar */
    font-size: 1.1em; 
}

.nav-links a:hover {
    color: var(--cor-secundaria);
}

/* HERO SECTION - FUNDO COM A IMAGEM FORNECIDA */
#home {
/* 1. Fundo com Overlay */
    background: linear-gradient(rgba(0, 77, 153, 0.6), rgba(0, 77, 153, 0.6)), url('banner-2024.jpg') center top no-repeat;
    
    /* 2. Cobertura Garantida em Todos os Dispositivos */
    background-size: cover; /* Essencial para mobile! */

    /* 3. Centralização Vertical do Conteúdo (Se a seção for alta) */
    min-height: 100vh; /* Exemplo: Altura total da tela */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    
    /* 4. Layout e Contraste */
    color: white; 
    text-align: center;
    padding: 20px; /* Garante algum respiro nas lateral:is */
}

#home h1 {
    font-size: 3.5em;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--cor-secundaria);
}

#home p {
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 30px;
}

.hero {
    border-radius: 8px; /* Valor para arredondar as bordas */
    overflow: hidden; /* Importante para que o arredondamento seja visível */
}

.hero img {
    border-radius: 8px; /* Aplica diretamente na imagem */
}


.cta-button {
    background-color: var(--cor-secundaria);
    color: var(--cor-principal);
    padding: 15px 30px;
    text-decoration: none;
    font-weight: 800;
    border-radius: 50px; /* Arredondado */
    font-size: 1.2em;
    transition: background-color 0.3s, transform 0.2s;
    border: none;
    cursor: pointer;
}

.cta-button:hover {
    background-color: #ffd700;
    transform: translateY(-2px);
}


/* --- NOVO ESTILO DO CONTADOR REGRESSIVO (AJUSTES FINAIS DE POSICIONAMENTO) --- */
/* --- NOVO ESTILO DO CONTADOR REGRESSIVO (AJUSTES FINAIS DE POSICIONAMENTO) --- */
/* --- ESTILO DO CONTADOR REGRESSIVO (CORREÇÃO ZERO ERRO) --- */

#countdown {
    /* 1. AFASTAR DO BOTÃO DE CIMA */
    margin-top: 60px; 
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Consolas', monospace; /* Fonte solicitada */
    width: 100%;
}

/* --- TÍTULO "FALTAM:" --- */
.countdown-header {
    width: 100%;
    text-align: center;
    margin-bottom: 10px; /* Espaço entre o "Faltam:" e os boxes */
    position: relative;
}

.lbl-faltam {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo escuro semitransparente */
    color: var(--cor-secundaria); /* Amarelo */
    font-weight: 700;
    font-size: 1.2em;
    padding: 5px 20px;
    border-radius: 25px;
    /* Centralizado visualmente */
}

/* --- WRAPPER DOS NÚMEROS --- */
.countdown-flex-wrapper {
    display: flex;
    align-items: flex-start; /* Alinha pelo topo para garantir que os boxes fiquem alinhados */
    justify-content: center;
    gap: 5px; /* Espaço pequeno entre grupos e separadores */
}

/* --- UNIDADE (BOX + LEGENDA) --- */
.time-unit {
    display: flex;
    flex-direction: column; /* Um embaixo do outro */
    align-items: center; /* Centraliza a legenda em relação ao box */
    width: 90px; /* Largura fixa para garantir estabilidade */
}

/* --- BOX AZUL DO NÚMERO --- */
.number-box {
    width: 85px;
    height: 85px;
    background: linear-gradient(145deg, var(--cor-principal) 50%, #0066cc 100%);
    color: var(--cor-secundaria); /* Amarelo */
    border: 3px solid white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 3.5em; /* Fonte Grande */
    font-weight: 800;
    line-height: 1;
}

/* --- LEGENDA (Dias, Horas...) --- */
.label-text {
    margin-top: 8px; /* Distância do box */
    font-family: var(--fonte-corpo); /* Volta para fonte normal para leitura melhor */
    font-size: 0.85em;
    text-transform: uppercase;
    color: #fff; /* Branco para contraste */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    font-weight: 600;
    text-align: center;
}

/* --- SEPARADOR (:) --- */
.time-separator {
    /* O truque para alinhar o : com o box e não com a legenda */
    height: 85px; /* Mesma altura do number-box */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 3em;
    font-weight: 800;
    color: var(--cor-secundaria);
    padding: 0 2px;
    margin-top: 0; /* Garante que comece no topo junto com os boxes */
}

/* --- RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 600px) {
    #countdown {
        margin-top: 40px; /* Menos espaço no mobile */
    }
    
    .time-unit {
        width: 65px; /* Reduz largura da unidade */
    }

    .number-box {
        width: 60px;
        height: 60px;
        font-size: 2.2em;
        border-width: 2px;
    }

    .time-separator {
        height: 60px; /* Ajusta altura para alinhar com box menor */
        font-size: 2em;
    }

    .label-text {
        font-size: 0.65em;
        margin-top: 4px;
    }
    
    .lbl-faltam {
        font-size: 1em;
    }
}



/* -------------------------------------- */
/* SEÇÕES DE CONTEÚDO (EVENTO, LOGÍSTICA, GALERIA) */
/* -------------------------------------- */
#evento { 
    background-color: var(--cor-texto-claro); 
}
.missao-content { 
    display: flex; 
    gap: 40px; 
    align-items: center; 
}
.missao-text { 
    flex: 1; 
}
.missao-image { 
    flex: 1; 
    text-align: center; 
}
.missao-image img { 
    max-width: 100%; 
    height: auto; 
    border-radius: 8px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
}
.texto-biblico { 
    background-color: var(--cor-fundo); 
    padding: 20px; 
    border-left: 5px solid var(--cor-secundaria); 
    margin-top: 20px; 
    font-style: italic; 
    color: var(--cor-principal); 
}
#logistica .logi-item { 
    background-color: var(--cor-texto-claro); 
    padding: 20px; 
    margin-bottom: 20px; 
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}
#logistica .logi-item h3 { 
    color: var(--cor-principal); 
    margin-bottom: 10px; 
    font-weight: 600; 
}
#galeria { 
    background-color: var(--cor-fundo); 
}
.galeria-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px; 
}
.galeria-item img { 
    width: 100%; 
    height: 200px; 
    object-fit: cover; 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transition: transform 0.3s; 
    cursor: pointer; 
}
.galeria-item img:hover { 
    transform: scale(1.03); 
}

/* --- ESTILOS DO LIGHTBOX (VISUALIZADOR DE IMAGEM) --- */
.lightbox {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    padding-top: 60px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.9); 
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 900px;
    max-height: 85vh; 
    object-fit: contain; 
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* Botão Fechar */
.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Botões Anterior/Próximo */
.lightbox-prev, .lightbox-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(0,0,0,0.5);
}

.lightbox-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.lightbox-prev:hover, .lightbox-next:hover {
    background-color: rgba(0,0,0,0.8);
}


/* -------------------------------------- */
/* CARROSSEL E PARCEIROS */
/* -------------------------------------- */
#parceiros { 
    background-color: var(--cor-principal); 
    color: var(--cor-texto-claro); 
    padding-bottom: 80px; 
}
#parceiros h2 { 
    color: var(--cor-secundaria); 
}
.carousel-container { 
    position: relative; 
    overflow: hidden; 
    margin: 40px auto; 
}
.carousel-wrapper { 
    display: flex; 
    transition: transform 0.3s ease-in-out; 
}
.carousel-item { 
    min-width: calc(100% / 3); 
    padding: 0 10px; 
    flex-shrink: 0; 
    opacity: 0.5; 
    transition: opacity 0.3s ease-in-out; 
}
.carousel-item.active { 
    opacity: 1; 
}
.parceiro-logo { 
    background-color: var(--cor-texto-claro); 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
    text-align: center; 
    height: 100%; 
}
.parceiro-logo img { 
    max-height: 80px; 
    max-width: 100%; 
}
.parceiro-logo .title { 
    font-size: 1.2em; 
    margin-top: 10px; 
    color: var(--cor-principal); 
    font-weight: 800; 
}
.parceiro-logo .subtitle { 
    font-style: italic; 
    font-size: 0.9em; 
    color: var(--cor-principal); 
    margin-bottom: 5px; 
}
.parceiro-logo .description { 
    font-size: 0.8em; 
    color: #555; 
}
.carousel-control { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(0, 0, 0, 0.5); 
    color: var(--cor-texto-claro); 
    border: none; 
    padding: 10px; 
    cursor: pointer; 
    z-index: 10; 
    font-size: 1.5em; 
    border-radius: 50%; 
    transition: background 0.3s; 
}
.carousel-control:hover { 
    background: rgba(0, 0, 0, 0.8); 
}
.prev { 
    left: 0; 
}
.next { 
    right: 0; 
}
.carousel-indicators { 
    text-align: center; 
    margin-top: 20px; 
}
.indicator { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    background-color: rgba(255, 255, 255, 0.5); 
    border-radius: 50%; 
    margin: 0 5px; 
    cursor: pointer; 
    transition: background-color 0.3s; 
}
.indicator.active { 
    background-color: var(--cor-secundaria); 
    width: 12px; 
    height: 12px; 
}


/* -------------------------------------- */
/* SEÇÃO FAQ (ACORDEÃO CORRIGIDO) */
/* -------------------------------------- */
#faq {
    background-color: var(--cor-texto-claro);
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.faq-question {
    width: 100%;
    background-color: var(--cor-fundo); 
    color: var(--cor-principal);
    padding: 18px 25px;
    text-align: left;
    font-size: 1.1em;
    font-weight: 600;
    border: none;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
    padding-right: 50px;
}

/* Seta de expansão */
.faq-question::after {
    content: '\25B6'; /* Seta direita (fechado) */
    font-size: 0.8em;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
}

.faq-question.active::after {
    content: '\25BC'; /* Seta para baixo (aberto) */
    transform: translateY(-50%) rotate(0deg);
}

.faq-question:hover {
    background-color: #e5e5e5;
}

.faq-answer {
    padding: 0 25px;
    background-color: var(--cor-texto-claro);
    /* Controle de altura para efeito acordeão */
    max-height: 0;
    overflow: hidden;
    /* Transições mais lentas e suaves para o efeito de "abrir e fechar" */
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; 
}

.faq-answer p {
    padding: 15px 0;
    margin: 0;
    border-top: 1px solid #eee;
}

/* Estado ativo (aberto) - Altura será definida pelo JS */
.faq-answer.open {
    padding-bottom: 25px;
    padding-top: 5px;
}


/* -------------------------------------- */
/* RODAPÉ E REDES SOCIAIS (CÓDIGO ANTERIOR) */
/* -------------------------------------- */
footer {
    background-color: var(--cor-texto-escuro);
    color: var(--cor-texto-claro);
    padding: 40px 0;
    text-align: center;
}

.social-links a {
    color: var(--cor-secundaria);
    font-size: 1.8em;
    margin: 0 15px;
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--cor-texto-claro);
}

footer p {
    margin-top: 20px;
    font-size: 0.9em;
}


#doacao-button {
    /* Posicionamento Fixo */
    position: fixed;
    bottom: 25px; /* Distância do fundo */
    right: 25px; /* Distância da direita */
    z-index: 1000; /* Garante que fique acima de outros elementos */
    
    /* Estilo Visual */
    background-color: #004d99; /* Amarelo (cor do CTA-button da seção home) */
    color: var(--cor-secundaria); /* Azul escuro para contraste */
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Transforma em círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em; /* Tamanho do emoji */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para destacar */
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

#doacao-button:hover {
    background-color: #FFFFFF; /* Cor do cabeçalho/overlay da home */
    transform: scale(1.1); /* Efeito de crescimento sutil */
    color: var(--cor-principal); /* Cor do emoji */
}


/* Estilos para formulários de Contato/Comentários (mantidos) */
#contato-form, #comentarios {
    background-color: var(--cor-texto-claro);
}

.comment-form-container, .contact-form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background-color: var(--cor-fundo);
    border-radius: 15px; 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}

/* ...outros estilos de formulário mantidos... */


/* -------------------------------------- */
/* RESPONSIVIDADE (MEDIA QUERIES) */
/* -------------------------------------- */
@media (max-width: 760px) {
    h2 {
        font-size: 2em;
    }

    #home h1 {
        font-size: 2.5em;
    }

    #home p {
        font-size: 1.2em;
    }

    .nav-links {
        display: none;
    }

    .missao-content {
        flex-direction: column;
    }

    
    /* RESPONSIVIDADE DO LIGHTBOX */
    .lightbox-content {
        width: 100%;
        max-height: 80vh;
    }
    .lightbox-prev, .lightbox-next {
        font-size: 16px;
        padding: 10px;
        margin-top: -35px;
    }
    
    #home {
        background-position: 75% top; 
    }

    .carousel-item {
        min-width: 100%; 
    }
    
    /* ...outros ajustes de mobile mantidos... */

     .logo {
         font-size: 1.2em;
     }

     .cta-button {
         padding: 12px 25px;
         font-size: 1em;
     }

     section {
         padding: 40px 0;
     }

.menu-toggle {
        display: block; 
        z-index: 1010; 
    }

    /* Ajusta o nav para alinhar os itens */
    nav {
        justify-content: space-between;
        align-items: center;
    }
    
    /* 2. Estilo do menu em mobile (escondido por padrão) */
    .nav-links {
        /* Esconde o menu fora da tela */
        position: fixed;
        top: 0;
        right: -100%; /* Move para fora da tela */
        width: 70%; 
        height: 100%;
        background-color: #333; /* Cor de fundo do menu lateral */
        flex-direction: column;
        padding-top: 60px;
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    }
    
    /* Estilo dos links dentro do menu lateral */
    .nav-links a {
        padding: 15px 20px;
        width: 100%;
        text-align: left;
        border-bottom: 1px solid #444;
    }

    /* 3. Estilo para quando o menu estiver aberto */
    nav.nav-open .nav-links {
        right: 0; /* Traz o menu para dentro da tela */
    }	 
	
	#doacao-button {
        width: 50px;
        height: 50px;
        font-size: 1.8em;
        bottom: 15px;
        right: 15px;
    }	

}

/* --- ESTILO DO BOTÃO MOBILE (GERAL) --- */
.menu-toggle {
    display: none; /* Escondido por padrão em telas grandes */
    font-size: 1.8em;
    color: var(--cor-texto-claro);
    cursor: pointer;
    transition: 0.3s;
}

.menu-toggle:hover {
    color: var(--cor-secundaria);
}

/* --- ATUALIZAÇÃO DA RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 760px) {
    /* Mostra o botão no mobile */
    .menu-toggle {
        display: block;
        z-index: 1010; /* Fica acima do menu aberto */
    }

    /* Ajustes da barra de navegação */
    .nav-links {
        /* Configuração do Menu Lateral (Off-canvas) */
        position: fixed;
        top: 0;
        right: -100%; /* Começa escondido fora da tela */
        width: 70%;
        height: 100vh;
        background-color: var(--cor-principal); /* Fundo Azul */
        
        display: flex; /* Garante que os itens fiquem em coluna */
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Centraliza os links verticalmente */
        
        transition: right 0.4s ease; /* Animação suave */
        z-index: 1000;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    }

    /* Quando o menu está aberto (Classe adicionada via JS) */
    nav.nav-open .nav-links {
        right: 0; /* Traz para dentro da tela */
    }

    /* Estilo dos links no mobile */
    .nav-links a {
        margin: 1px 0;
        font-size: 1.2em;
        display: block; /* Garante área de clique */
    }
}

/* -------------------------------------- */
/* SEÇÃO DE CONTATO (FORMULÁRIO) */
/* -------------------------------------- */

.contact-form-container {
    max-width: 600px; /* Largura ideal para leitura */
    margin: 0 auto;   /* Centraliza na tela */
    background-color: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Sombra suave */
}

.contact-form-container .form-group {
    margin-bottom: 20px;
}

.contact-form-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--cor-principal);
}

.contact-form-container input,
.contact-form-container textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-family: var(--fonte-corpo);
    font-size: 1em;
    background-color: #fcfcfc;
    transition: border-color 0.3s;
}

.contact-form-container input:focus,
.contact-form-container textarea:focus {
    border-color: var(--cor-principal);
    outline: none;
    background-color: #fff;
}

/* Ajuste Mobile */
@media (max-width: 600px) {
    .contact-form-container {
        padding: 20px;
        width: 100%;
    }
}

/* --- SEÇÃO DE DEPOIMENTOS --- */
#depoimentos {
    background-color: #e9ecef; /* Um cinza bem clarinho para diferenciar do fundo branco */
}

.depoimentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.depoimento-card {
    background-color: var(--cor-texto-claro);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border-top: 4px solid var(--cor-secundaria); /* Detalhe amarelo no topo */
}

.depoimento-card:hover {
    transform: translateY(-5px); /* Efeito de flutuar ao passar o mouse */
}

.stars {
    color: #ffcc00; /* Cor das estrelas */
    font-size: 1.2em;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.depoimento-texto {
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
    font-size: 1em;
    line-height: 1.6;
}

.autor {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ddd; /* Cor de fundo se a imagem falhar */
    object-fit: cover;
}

.info {
    display: flex;
    flex-direction: column;
}

.info strong {
    color: var(--cor-principal);
    font-size: 0.95em;
}

.info span {
    font-size: 0.8em;
    color: #777;
}

/* Responsividade Mobile */
@media (max-width: 760px) {
    .depoimentos-grid {
        grid-template-columns: 1fr; /* Um por linha no celular */
    }
}

/* --- ESTILOS DO RODAPÉ (VERSÃO SLIM) --- */

footer {
    background-color: var(--cor-texto-escuro); /* Cor preta de fundo */
    color: var(--cor-texto-claro);
    padding: 5px 0; /* REDUZI DE 40px PARA 15px (Isso diminui muito a altura) */
    text-align: center;
}

/* Wrapper que segura a Logo e o Conteúdo */
.footer-wrapper {
    display: flex;
    align-items: center; 
    justify-content: center;
    gap: 40px; /* Reduzi um pouco o espaço lateral */
    text-align: left;
    max-width: 1000px;
    margin: 0 auto;
}

/* Estilo da Logo no Rodapé */
.footer-logo img {
    height: 90px; /* REDUZI DE 90px PARA 60px (Igual ao tamanho do Header) */
    width: auto;
    display: block;
}

/* Área de Informações */
.footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Redes Sociais */
.footer-info .social-links {
    margin-bottom: 10px; /* Reduzi o espaço abaixo dos ícones */
    display: flex;
    gap: 15px;
}
.footer-info .social-links a {
    margin: 0;
    font-size: 1.3em; /* Ícones levemente menores */
}

/* Links do Menu do Rodapé */
.footer-menu {
    margin-bottom: 5px; /* Reduzi o espaço abaixo do menu */
}

.footer-menu a {
    color: var(--cor-secundaria);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    transition: color 0.3s;
}

.footer-menu a:hover {
    color: #fff;
    text-decoration: underline;
}

.separador {
    color: #555;
    margin: 0 8px;
}

/* Textos Legais (Direitos Reservados) */
footer p {
    margin-top: 5px;
    font-size: 0.9em;
    line-height: 1.2; /* Linhas mais próximas */
}

/* RESPONSIVIDADE MOBILE */
@media (max-width: 760px) {
    .footer-wrapper {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-info {
        align-items: center;
    }
    
    .footer-logo img {
        height: 50px; /* Ainda menor no celular */
    }
}

/* --- BOTÃO DE INSTALAR PWA --- */
.install-app-btn {
    position: fixed;
    bottom: 25px;
    left: 25px; /* Lado oposto ao botão de doação */
    z-index: 1000;
    
    background-color: var(--cor-principal); /* Azul */
    color: white;
    border: 2px solid var(--cor-secundaria); /* Borda Amarela */
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-family: var(--fonte-titulo);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    
    /* Animação para chamar atenção */
    animation: pulse 2s infinite;
    display: flex;
    align-items: center;
    gap: 8px;
}

.install-app-btn:hover {
    background-color: var(--cor-secundaria);
    color: var(--cor-principal);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* No mobile, ajusta para não ficar em cima do menu inferior se houver */
@media (max-width: 760px) {
    .install-app-btn {
        bottom: 90px; /* Sobe um pouco se tiver menu inferior */
        left: 20px;
        padding: 10px 15px;
    }
}

/* --- ANIMAÇÃO SCROLL REVEAL --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

#btn-top {
    position: fixed;
    bottom: 25px;
    left: 25px; /* Fica no lugar do botão de instalar app quando rolar, ou podemos ajustar a posição */
    /* Sugestão: Se usar o botão Instalar App na esquerda, coloque este na esquerda um pouco mais acima ou centralizado */
    bottom: 90px; /* Acima do menu inferior mobile */
    left: 20px;
    
    background-color: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.2em;
    cursor: pointer;
    display: none; /* Invisível no topo */
    z-index: 999;
    transition: background 0.3s;
}
#btn-top:hover {
    background-color: var(--cor-principal);
}

/* --- BARRA DE ROLAGEM PERSONALIZADA (WEBKIT) --- */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

::-webkit-scrollbar-thumb {
    background: var(--cor-principal); 	/* Azul */
    border-radius: 6px;
    border: 3px solid #f1f1f1; 			/* Cria um espaço branco ao redor */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cor-secundaria); /* Fica amarelo ao passar o mouse */
}