/* ================================================= */
/* Reset Básico, Fontes e Variáveis de Cor           */
/* ================================================= */
:root {
    /* Cores Principais do Tema */
    --cor-principal: #2c3e50;
    --cor-principal-escura: #21313f;
    --cor-secundaria: #c9fff4;
    --cor-menu-mobile-fundo: #2c3e50;
    --cor-botao-card-fundo: #1abc9c;
    --cor-botao-card-hover: #16a085;
    --cor-destaque: var(--cor-principal); /* ATUALIZAÇÃO: Cor de destaque agora usa a cor principal */

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

    /* Cores de Feedback */
    --cor-verde: #1abc9c;
    --cor-vermelho: #e74c3c;
    --cor-estrela: #f39c12; /* Cor para a avaliação */
    
    /* Cores Neutras e de Fundo */
    --cor-fundo: #f4f4f9;
    --cor-branco: #ffffff;
    --cor-cinza-claro: #f0f0f0;
}

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 transparent; border-radius: 20px; margin: 0 5px; transition: all 0.3s; }
.menu-principal a:hover, .menu-principal a.active { background-color: var(--cor-secundaria); color: var(--cor-principal); }
.header-acoes { display: flex; align-items: center; gap: 10px; }
.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); }
.btn-header-newsletter { background-color: transparent; color: var(--cor-branco); border: 1px solid var(--cor-secundaria); padding: 7px 15px; border-radius: 20px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; font-family: inherit; font-size: 14px; }
.btn-header-destaque { background-color: var(--cor-principal); color: var(--cor-principal); padding: 8px 16px; border-radius: 20px; font-weight: bold; transition: all 0.3s ease; white-space: nowrap; border: 1px solid var(--cor-secundaria); }
.btn-header-newsletter:hover { background-color: var(--cor-secundaria); color: var(--cor-principal); }
.btn-header-destaque:hover { background-color: var(--cor-branco); border-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; }
.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; }
.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; width: 100%; cursor: pointer; font-family: inherit; box-sizing: border-box; }
.btn-menu-mobile:hover { background-color: rgba(255,255,255,0.15); }
.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; object-fit: contain; }
.btn-parceiro.cooperacao { background-color: #5a3e8d; color: var(--cor-branco); }
.btn-parceiro.whatsapp { background-color: #25D366; color: var(--cor-branco); }
.btn-parceiro.telegram { background-color: #0088cc; color: var(--cor-branco); }

/* ================================================= */
/* Grid de Plataformas (index.php) - Layout Otimizado */
/* ================================================= */
.titulo-busca, .titulo-principal { text-align: center; margin-bottom: 30px; font-weight: 600; color: var(--cor-principal); }
.plataforma-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
.plataforma-card {
    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;
    border: 1px solid transparent;
}
.plataforma-card:hover {
    transform: translateY(-5px);
    border-color: var(--cor-destaque);
    box-shadow: 0 6px 18px rgba(44, 62, 80, 0.2);
}
.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--cor-texto); }
.card-imagem { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin: 25px auto 15px auto; border: 4px solid var(--cor-cinza-claro); align-self: center; }
.card-body { padding: 0 25px 25px 25px; flex-grow: 1; display: flex; flex-direction: column; text-align: center; }
.card-categoria { background-color: var(--cor-secundaria); color: var(--cor-principal); padding: 6px 15px; border-radius: 25px; font-size: 0.8em; font-weight: bold; align-self: center; display: inline-flex; align-items: center; }
.categoria-favicon { width: 16px; height: 16px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.card-titulo { font-size: 1.3em; margin: 15px 0; flex-grow: 1; line-height: 1.4; color: var(--cor-principal); }
.card-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 0.9em;
    color: var(--cor-texto-suave);
    margin-bottom: 20px;
}
.card-nota {
    font-weight: bold;
    color: var(--cor-texto);
}
.card-nota i {
    color: var(--cor-estrela);
    margin-right: 4px;
}
.card-lancamento {
    font-weight: 500;
}
.card-actions {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--cor-cinza-claro);
    width: 100%;
}
.btn-card-ver-plataforma {
    background: var(--cor-botao-card-fundo);
    color: var(--cor-branco);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.2s;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}
.card-link:hover .btn-card-ver-plataforma {
    background-color: var(--cor-botao-card-hover);
}

/* ================================================= */
/* Modal, Footer e Outros Estilos (Intactos)         */
/* ================================================= */
.modal-newsletter { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); }
.modal-newsletter.ativo { display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s; }
.modal-newsletter-content { background-color: var(--cor-branco); color: var(--cor-texto); margin: auto; padding: 30px 35px; border-radius: 10px; width: 90%; max-width: 450px; box-shadow: 0 5px 20px rgba(0,0,0,0.3); position: relative; text-align: center; }
.modal-fechar { position: absolute; top: 10px; right: 15px; color: #ccc; font-size: 30px; font-weight: bold; border: none; background: none; cursor: pointer; transition: color 0.2s; }
.modal-fechar:hover { color: var(--cor-texto); }
.modal-newsletter-content h3 { margin-top: 0; color: var(--cor-principal); font-size: 1.5em; }
.modal-newsletter-content p { margin-bottom: 25px; color: var(--cor-texto-suave); }
.newsletter-form { display: flex; gap: 10px; margin-bottom: 15px; }
.newsletter-form input { flex-grow: 1; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; }
.newsletter-form button { background-color: var(--cor-secundaria); color: var(--cor-principal); border: none; padding: 0 20px; border-radius: 5px; font-weight: bold; cursor: pointer; transition: all 0.3s; }
.newsletter-form button:hover { background-color: var(--cor-botao-card-hover); color: var(--cor-branco); }
.consentimento-container { text-align: left; font-size: 0.8em; display: flex; align-items: center; color: var(--cor-texto-suave); }
.consentimento-container input { margin-right: 8px; }
.consentimento-container a { color: var(--cor-secundaria); text-decoration: underline; }
#newsletter-mensagem-modal { margin-top: 15px; font-weight: bold; min-height: 1.2em; }
.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; }
.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); }
.aviso { text-align: center; padding: 40px; background-color: var(--cor-branco); border-radius: 8px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

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