/* ================================================= */
/* Reset Básico, Fontes e Variáveis de Cor           */
/* ================================================= */
:root {
    /* Cores Principais do Tema */
    --cor-principal: #2c3e50;
    --cor-principal-escura: #493275;
    --cor-secundaria: #c9fff4;
    --cor-menu-mobile-fundo: #2c3e50;

    /* Novas Cores para Botões Específicos */
    --cor-botao-card-fundo: #1abc9c;
    --cor-botao-card-hover: #16a085; /* Cor de hover corrigida */
    --cor-botao-cooperar-fundo: var(--cor-verde);
    --cor-botao-cooperar-hover: #16a085; /* Cor de hover corrigida */
    --cor-botao-demo-fundo: #1abc9c;

    /* Cores de Texto */
    --cor-texto: #333;
    --cor-texto-suave: #555;

    /* Cores de Feedback */
    --cor-verde: #1abc9c;
    --cor-vermelho: #e74c3c;
    
    /* Cores Neutras e de Fundo */
    --cor-fundo: #f4f4f9;
    --cor-branco: #ffffff;
    --cor-cinza-claro: #f0f0f0;
    --cor-cinza-desabilitado: #95a5a6;

    /* Cores de Alerta */
    --cor-aviso-fundo: #fff3cd;
    --cor-aviso-borda: #ffeeba;
    --cor-aviso-texto: #856404;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 60px;
    box-sizing: border-box;
}
.container { max-width: 1200px; width: 100%; margin: 20px auto; padding: 0 15px; box-sizing: border-box; flex-grow: 1; }
h1, h2, h3, p { overflow-wrap: break-word; }
a { text-decoration: none; color: var(--cor-principal); }

/* ================================================= */
/* Header, Footer e Navegação                      */
/* ================================================= */
.site-header { background: var(--cor-principal); color: var(--cor-branco); padding: 0 15px; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; box-shadow: 0 2px 5px rgba(0,0,0,0.2); box-sizing: border-box; }
.header-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 60px; }
.logo-site a { font-weight: bold; font-size: 1.4em; color: var(--cor-branco); display: flex; align-items: center; }
.logo-img { height: 32px; margin-right: 12px; }
.menu-principal { display: none; }
.menu-principal a { color: var(--cor-branco); font-weight: 500; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; margin: 0 5px; transition: all 0.3s; }
.menu-principal a:hover, .menu-principal a.active { background-color: var(--cor-secundaria); border-color: var(--cor-secundaria); color: var(--cor-principal); }
.header-acoes { display: flex; align-items: center; gap: 15px; }
.search-form { display: none; border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; background-color: rgba(0,0,0,0.1); }
.search-form input { border: none; padding: 8px 15px; background: transparent; color: var(--cor-branco); outline: none; }
.search-form input::placeholder { color: rgba(255,255,255,0.7); }
.search-form button { background: transparent; border: none; cursor: pointer; padding: 0 10px; color: var(--cor-branco); }
.menu-toggle { background: none; border: none; font-size: 1.5em; cursor: pointer; color: var(--cor-branco); display: block; }
.mobile-sidebar { position: fixed; top: 0; left: -280px; width: 280px; height: 100%; background: var(--cor-menu-mobile-fundo); box-shadow: 2px 0 10px rgba(0,0,0,0.2); z-index: 1001; transition: left 0.3s ease; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; }
.mobile-sidebar.ativo { left: 0; }
.logo-sidebar-container { text-align: center; padding-bottom: 20px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.logo-sidebar-img { max-width: 80px; height: auto; }
.mobile-sidebar nav { flex-grow: 1; }
/* A REGRA ANTIGA FOI SUBSTITUÍDA PELO NOVO ESTILO DE BOTÃO ABAIXO */
.menu-fechar { font-size: 2em; border: none; background: none; cursor: pointer; position: absolute; top: 10px; right: 20px; color: var(--cor-branco); }
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; }
.overlay.ativo { display: block; }

/* ATUALIZAÇÃO CIRÚRGICA: Novos estilos para os botões do menu mobile */
.mobile-sidebar nav a.btn-menu-mobile {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: var(--cor-branco);
    font-weight: 500;
    font-size: 1em;
    background-color: rgba(255,255,255,0.05);
    transition: background-color 0.2s;
}
.mobile-sidebar nav a.btn-menu-mobile:hover {
    background-color: rgba(255,255,255,0.15);
}
.mobile-sidebar nav a.btn-menu-mobile i {
    margin-right: 12px;
    font-size: 1.1em;
    width: 20px;
    text-align: center;
    color: var(--cor-secundaria);
}


.parceiros-sidebar { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.parceiros-sidebar p { color: var(--cor-secundaria); font-size: 0.9em; font-weight: bold; margin-bottom: 10px; }
.btn-parceiro { display: flex; align-items: center; padding: 12px; border-radius: 8px; margin-bottom: 10px; text-decoration: none; font-weight: bold; transition: all 0.2s ease; }
.btn-parceiro:hover { transform: scale(1.03); }
.btn-parceiro img, .btn-parceiro i { width: 24px; height: 24px; margin-right: 12px; font-size: 24px; text-align: center; }
.btn-parceiro.whatsapp { background-color: #25D366; color: var(--cor-branco); }
.btn-parceiro.telegram { background-color: #0088cc; color: var(--cor-branco); }

/* ================================================= */
/* Grid de Cooperações (index.php e expiradas.php)   */
/* ================================================= */
.titulo-busca, .titulo-principal { text-align: center; margin-bottom: 30px; font-weight: 400; color: var(--cor-principal); }
.cooperacao-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
.cooperacao-card-grid { background: var(--cor-branco); border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; }
.cooperacao-card-grid:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(90, 62, 141, 0.2); }
.cooperacao-card-grid.expirado { opacity: 0.75; }
.cooperacao-card-grid.expirado:hover { transform: translateY(0); box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.card-grid-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--cor-texto); }
.card-grid-imagem { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin: 25px auto 20px auto; border: 4px solid var(--cor-cinza-claro); align-self: center; }
.card-grid-body { padding: 0 25px 25px 25px; flex-grow: 1; display: flex; flex-direction: column; text-align: center; }
.card-grid-categoria { background-color: var(--cor-secundaria); color: var(--cor-principal); padding: 4px 12px; border-radius: 20px; font-size: 0.75em; font-weight: bold; align-self: center; }
.card-grid-titulo { font-size: 1.2em; margin: 15px 0; flex-grow: 1; line-height: 1.4; }
.categoria-favicon { width: 16px; height: 16px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.card-grid-actions { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--cor-cinza-claro); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.expira-em { color: var(--cor-verde); font-weight: bold; font-size: 0.9em; }
.expirou-em { color: var(--cor-vermelho); font-weight: bold; font-size: 0.9em; }
.btn-grid-cooperar { background: var(--cor-botao-card-fundo); color: var(--cor-branco); padding: 8px 16px; border-radius: 5px; font-weight: bold; transition: all 0.2s; }
.card-grid-link:hover .btn-grid-cooperar { background-color: var(--cor-botao-card-hover); color: var(--cor-branco); }
.btn-grid-expirado { background: var(--cor-cinza-desabilitado); color: var(--cor-branco); padding: 8px 16px; border-radius: 5px; font-weight: bold; cursor: default; }

/* ================================================= */
/* Estilos da Página de Detalhes (cooperacao.php)    */
/* ================================================= */
.detalhe-cooperacao { background: var(--cor-branco); padding: 25px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.07); margin-top: 20px; }
.aviso-expirado { background-color: var(--cor-aviso-fundo); border: 1px solid var(--cor-aviso-borda); color: var(--cor-aviso-texto); padding: 15px 20px; border-radius: 8px; margin-bottom: 25px; text-align: center; }
.aviso-expirado h3 { margin-top: 0; }
.detalhe-header { display: flex; align-items: center; gap: 20px; }
.detalhe-perfil-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cor-cinza-claro); flex-shrink: 0; }
.detalhe-titulo-area { flex-grow: 1; }
.detalhe-titulo-area h1 { margin: 0 0 10px 0; font-size: 2.2em; line-height: 1.2; }
.detalhe-meta { display: flex; align-items: center; gap: 15px; font-size: 0.9em; color: var(--cor-texto-suave); flex-wrap: wrap; }
.categoria-favicon-detalhe { width: 20px; height: 20px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.expira-em-detalhe { font-weight: bold; color: var(--cor-verde); }
.expira-em-detalhe.expirou-em { color: var(--cor-vermelho); }
.detalhe-acao-principal { padding: 25px 0; margin: 20px 0; border-top: 1px solid var(--cor-cinza-claro); border-bottom: 1px solid var(--cor-cinza-claro); display: flex; justify-content: center; align-items: center; }
.btn-cooperar-agora { display: inline-block; background-color: var(--cor-botao-cooperar-fundo); color: var(--cor-branco); padding: 15px 30px; font-size: 1.1em; text-decoration: none; font-weight: bold; border-radius: 8px; transition: all 0.3s; }
.btn-cooperar-agora:hover { background-color: var(--cor-botao-cooperar-hover); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.detalhe-conteudo, .detalhe-fotos { margin-top: 30px; }
.detalhe-conteudo h2, .detalhe-fotos h2 { text-align: left; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--cor-cinza-claro); }
.texto-formatado { line-height: 1.8; color: var(--cor-texto); }
.texto-formatado p, .texto-formatado ul, .texto-formatado ol { margin-bottom: 1em; }
.texto-formatado ul, .texto-formatado ol { padding-left: 20px; }
.recomendacoes { margin-top: 40px; padding-top: 30px; border-top: 2px solid var(--cor-principal); }
.galeria-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; margin-top: 15px; }
.galeria-fotos img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; cursor: pointer; transition: all 0.3s; }
.galeria-fotos img:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.lightbox-container { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; animation: fadeIn 0.4s; }
.lightbox-content { position: relative; text-align: center; padding: 10px; }
#lightbox-img { max-width: 90vw; max-height: 80vh; border-radius: 5px; }
.lightbox-fechar { position: absolute; top: 0; right: 15px; color: var(--cor-branco); font-size: 45px; font-weight: bold; cursor: pointer; transition: color 0.3s; }
.lightbox-botao { display: inline-block; background-color: var(--cor-branco); color: var(--cor-texto); padding: 10px 20px; margin-top: 15px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.gerador-demo-container { background-color: var(--cor-cinza-claro); border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; text-align: center; margin-top: 30px; }
.gerador-demo-container h4 { margin-top: 0; margin-bottom: 15px; color: var(--cor-texto); }
.btn-demo { background-color: var(--cor-botao-demo-fundo); color: var(--cor-branco); padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; transition: background-color 0.3s; }
.resultado-demo-flex { display: none; justify-content: center; gap: 20px; margin-top: 15px; align-items: center; flex-wrap: wrap; }
.demo-item { background-color: var(--cor-branco); padding: 10px 15px; border-radius: 5px; border: 1px solid #ddd; }
.demo-item label { font-size: 0.8em; color: #555; display: block; margin-bottom: 4px; }
.demo-value { font-weight: bold; word-break: break-all; font-family: monospace; }
.demo-copiar-container { margin-top: 10px; width: 100%; }
.demo-copiar-container button { padding: 8px 15px; cursor: pointer; border-radius: 4px; border: 1px solid #ccc; background: var(--cor-branco); }
.aviso { text-align: center; padding: 40px; background-color: var(--cor-branco); border-radius: 8px; }

/* ================================================= */
/* Footer Corrigido e Melhorado                      */
/* ================================================= */
.site-footer {
    text-align: center;
    padding: 30px 20px;
    margin-top: auto;
    background-color: var(--cor-principal);
    color: rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
}
.footer-links {
    margin-bottom: 15px;
}
.footer-links a {
    color: var(--cor-branco);
    font-weight: 500;
    margin: 0 10px;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: var(--cor-secundaria);
}
.footer-parceiros {
    margin-bottom: 15px;
    font-size: 0.9em;
}
.footer-parceiros span {
    margin-right: 10px;
}
.footer-parceiros a {
    color: var(--cor-secundaria);
    font-weight: bold;
}
.footer-copy {
    font-size: 0.8em;
    opacity: 0.7;
    margin: 0;
}

/* ================================================= */
/* NOVA SEÇÃO: Estilos da Página de Categorias       */
/* ================================================= */
.categoria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}
.categoria-card {
    background: var(--cor-branco);
    border-radius: 10px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-decoration: none;
    color: var(--cor-texto);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.categoria-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(44, 62, 80, 0.15);
}
.cat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--cor-cinza-claro);
}
.cat-icon-placeholder {
    display: inline-flex;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--cor-cinza-claro);
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--cor-secundaria);
    margin-bottom: 15px;
}
.cat-nome {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--cor-principal);
    margin-bottom: 8px;
    display: block;
}
.cat-coops {
    font-size: 0.9em;
    color: var(--cor-texto-suave);
}

/* ================================================= */
/* Responsividade Geral                              */
/* ================================================= */
@media (min-width: 992px) {
    .menu-principal { display: flex; align-items: center; }
    .search-form { display: flex; }
    .menu-toggle { display: none; }
}
@media (max-width: 768px) {
    .detalhe-header { flex-direction: column; text-align: center; }
    .detalhe-meta { justify-content: center; }
}