/* ============================================================
   ESTILOS DO SITE — "Ajude o Luiz Santos"
   Arquivo único de CSS (extraído dos blocos <style> originais,
   mantendo exatamente a mesma ordem/cascata, então a aparência
   do site continua idêntica).
   ============================================================ */

/* --- Bloco 1: reset, nav, layout base, sidebar, footer, media query mobile principal --- */
/* Reset Básico */
*{box-sizing:border-box;margin:0;padding:0;font-family:'Lato',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
html{font-size:16px; scroll-behavior: smooth;}
body{background:#f9f9f9;color:#282828;}
a{text-decoration:none;color:inherit;}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;height:70px;background:#fff;z-index:200;border-bottom:2px solid #f1f0f0;display:flex;align-items:center;}
.nav-inner{max-width:1200px;margin:0 auto;width:100%;padding:0 20px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo svg{display:block;}
.nav-right{display:flex;align-items:center;gap:8px;}
.nav-link{font-size:15px;color:#282828;padding:8px 10px;cursor:pointer;display:flex;align-items:center;gap:4px;}
.nav-link:hover{color:#5a5a5a;}
.nav-link svg{width:16px;height:16px;fill:#282828;}
.nav-search{display:flex;align-items:center;gap:4px;color:#24ca68;font-size:15px;padding:8px 10px;}
.nav-search svg{width:20px;height:20px;fill:#24ca68;}
.btn-create{background:#24ca68;color:#fff;border:none;border-radius:5px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;}
.btn-create:hover{background:#1db558;}
.nav-mobile{display:none;}

/* LAYOUT */
.spacer{height:70px;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.page-grid{display:grid;grid-template-columns:1fr 360px;gap:32px;padding:24px 0 60px;}

/* LEFT COLUMN */
.campaign-image{position:relative;border-radius:8px;overflow:hidden;margin-bottom:12px; background-color: #e8f5e9;}
.campaign-image img{width:100%;display:block;max-height:430px;object-fit:cover;}
.heart-btn{position:absolute;top:12px;right:12px;width:44px;height:44px;background:#fff;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2);}
.heart-btn:hover{background:#f5f5f5;}
.heart-btn svg{width:40px;height:40px;}
.tags-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; flex-wrap: wrap; gap: 8px;}
.category{font-size:11px;color:#8a8a8a;text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
.location{display:flex;align-items:center;gap:3px;font-size:11px;color:#8a8a8a;text-transform:uppercase;font-weight:700;}
.location svg{width:14px;height:14px;fill:#8a8a8a;}
h1.campaign-title{font-size:24px;font-weight:900;line-height:1.2;color:#282828;margin-bottom:6px;}
.campaign-id{font-size:14px;font-weight:700;color:#282828;margin-bottom:16px;}
.short-desc{font-size:14px;color:#282828;line-height:1.6;margin-bottom:20px;}
.short-desc span{color:#24ca68;cursor:pointer;font-weight:700;}

/* TABS */
.tabs-wrap{border-bottom:2px solid #f1f0f0;overflow-x:auto;display:flex;white-space:nowrap;scrollbar-width:none;margin-bottom:24px;-webkit-overflow-scrolling:touch;}
.tabs-wrap::-webkit-scrollbar{display:none;}
.tab{display:inline-block;padding:12px 16px;font-size:14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;color:#8a8a8a;font-weight:700;flex-shrink:0;}
.tab.active{border-bottom-color:#24ca68;color:#24ca68;}
.tab:hover{color:#282828;}

/* SOBRE */
.pix-row{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.pix-label{font-size:14px;color:#282828;}
.pix-key{font-size:15px;font-weight:700;color:#282828;display:flex;align-items:center;gap:6px;cursor:pointer; word-break: break-all;}
.pix-key svg{width:20px;height:20px;fill:#282828; flex-shrink: 0;}
.divider{height:1px;background:#f1f0f0;margin:16px 0;}
.created-date{font-size:13px;color:#282828;margin-bottom:12px;}
.description{font-size:14px;line-height:1.75;color:#282828;}
.description h3{font-size:15px;font-weight:700;margin-bottom:8px;}
.description p{margin-bottom:12px;}
.description strong{font-weight:700;}
.pix-card{background:#f5f5f5;border-radius:6px;padding:16px;margin:24px 0;display:flex;flex-direction:column;gap:12px;}
.pix-card-row{display:flex;align-items:center;gap:12px;}
.pix-card-row svg{width:28px;height:28px;flex-shrink:0;}
.pix-card-text{font-size:14px;color:#282828;line-height:1.5; word-break: break-word;}
.pix-card-copy{display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;border-top:1px solid #e0e0e0;padding-top:10px;}
.pix-card-copy span{font-size:14px;font-weight:700;color:#282828;text-decoration:underline;}
.pix-card-copy svg{width:18px;height:18px;fill:#282828;}
.report-link{font-size:14px;font-weight:700;text-decoration:underline;color:#282828;display:block;margin-bottom:8px;}
.aviso{font-size:12px;color:#8a8a8a;line-height:1.5;margin-bottom:32px;}

/* SIDEBAR desktop */
.sidebar{position:sticky;top:90px;align-self:start;}
.progress-bar{width:100%;height:4px;background:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:12px;}
.progress-fill{height:100%;background:#24ca68;border-radius:2px;width:6%;}
.collected-label{font-size:13px;color:#8a8a8a;font-weight:700;margin-bottom:4px;}
.collected-value{font-size:28px;font-weight:900;color:#24ca68;line-height:1;}
.collected-goal{font-size:14px;color:#8a8a8a;margin-bottom:16px;}
.stats-box{border:1px solid #c8f0dc;border-radius:6px;overflow:hidden;margin-bottom:16px;background:#f0faf5;}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:14px;}
.stat-row:not(:last-child){border-bottom:1px solid #c8f0dc;}
.stat-label{display:flex;align-items:center;gap:6px;color:#282828;}
.stat-value{font-weight:700;color:#282828;}
.btn-donate{width:100%;padding:18px;background:#24ca68;color:#fff;font-size:18px;font-weight:700;border:none;border-radius:8px;cursor:pointer;margin-bottom:12px;letter-spacing:.01em;}
.btn-donate:hover{background:#1db558;}
.btn-share{width:100%;padding:16px;background:#fff;color:#282828;font-size:18px;font-weight:700;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;}
.btn-share:hover{background:#f5f5f5;}
.doacao-badge{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #009d4e;border-radius:20px;padding:7px 14px;background:#f0faf5;margin:16px 0;}
.doacao-badge svg{width:20px;height:20px;flex-shrink:0;}
.doacao-badge span{font-size:11px;font-weight:900;color:#1a6e2e;letter-spacing:.08em;text-transform:uppercase;}
.organizer{display:flex;align-items:center;gap:12px;margin-top:16px;}
.organizer-avatar{width:45px;height:45px;border-radius:50%;object-fit:cover;border:3px solid #f1f0f0;flex-shrink:0;background:#e8f5e9;}
.organizer-info{font-size:13px;}
.organizer-info .name{font-weight:700;color:#282828;}
.organizer-info .since{color:#8a8a8a;}

/* MOBILE STATS PANEL & BOTTOM BAR DEFAULT (HIDDEN) */
.mobile-stats-panel{display:none;}
.mobile-bottom{display:none;}

/* FOOTER */
footer{background:#282828;color:#fff;padding:40px 0 0;}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 20px;}
.footer-top{display:flex;flex-wrap:wrap;gap:32px;margin-bottom:32px;}
.footer-logo-social{display:flex;flex-direction:column;gap:20px;}
.footer-social{display:flex;align-items:center;gap:12px;}
.footer-social a{display:flex;align-items:center;color:#fff;opacity:.8;}
.footer-social a:hover{opacity:1;}
.footer-social svg{width:22px;height:22px;fill:#fff;}
.footer-social .sep{width:1px;height:16px;background:#fff;opacity:.3;}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.footer-links a{font-size:14px;color:#fff;opacity:.8;display:block; padding: 4px 0;}
.footer-links a:hover{opacity:1;}
.footer-col h6{font-size:14px;font-weight:700;color:#24ca68;margin-bottom:16px;}
.footer-contact p{font-size:13px;color:#fff;opacity:.8;line-height:1.7;}
.footer-apps{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.footer-apps a{display:inline-block;}
.footer-cnpj{font-size:12px;color:#fff;opacity:.6;margin-top:10px;line-height:1.8;}
.footer-bottom{background:#1a1a1a;text-align:center;padding:14px 20px;margin-top:32px;}
.footer-bottom p{font-size:13px;color:#fff;opacity:.7;}
.footer-seal img{height:36px;margin-top:12px;}

/* =========================================
   INÍCIO DAS REGRAS PARA O CELULAR (MOBILE)
   ========================================= */
@media(max-width:991px){
  /* Base - Fundo cinza claro oficial para dar o destaque de camadas */
  body { background: #f9f9f9 !important; }
  .spacer{height:60px;}
  .container { padding: 0 16px; }
  
  /* Grid Central vira 1 coluna com respiro pro botão fixo no final */
  .page-grid{grid-template-columns:1fr; gap:0; padding:16px 0 200px;}
  
  /* CARDS DO SITE - Adiciona o fundo branco por cima do fundo cinza para dar o efeito do print */
  .campaign-card, .pix-box, .tab-content {
    background: #ffffff !important;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
  }
  
  /* Navbar */
  .nav{height:60px;}
  .nav-desktop{display:none;}
  .nav-mobile{display:flex;align-items:center;gap:16px;}
  .nav-mobile svg{width:24px;height:24px;fill:#282828;}
  .nav-logo svg { width: 110px; height: auto; } /* Diminui o logo no mobile */

  /* Textos Principais */
  h1.campaign-title{font-size:20px;}
  
  /* Remove a barra lateral do desktop */
  .sidebar{display:none;}
  
  /* Ativa o Painel de Status do Mobile */
  .mobile-stats-panel{
    display:block;
    margin-bottom:24px;
  }
  .mobile-stats-panel .progress-bar{height:4px;margin-bottom:10px;}
  .mobile-stats-panel .collected-value{
    font-size:24px;
    font-weight:900;
    color:#24ca68;
    margin-bottom:16px;
    display:flex;
    align-items:baseline;
    gap:6px;
    flex-wrap:wrap;
  }
  .mobile-stats-panel .collected-goal{font-size:14px;font-weight:400;color:#8a8a8a;}
  
  /* CAIXA DE STATUS (Corações e Apoiadores) - Fundo Branco e Borda Verde Calibrada */
  .mobile-stats-panel .stats-box{
    background: #ffffff !important;
    border: 1px solid #eeffe6 !important;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 16px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .mobile-stats-panel .stat-row{
    padding: 0 !important;
    border-bottom: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mobile-stats-panel .stat-row:not(:last-child){border-bottom: none !important;}
  
  /* Ativa os Botões Fixos no Rodapé do Mobile */
  .mobile-bottom{
    display:block;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    z-index:200;
    box-shadow:0 -4px 12px rgba(0,0,0,.08);
  }
  
  /* BARRA DOAÇÃO PROTEGIDA - Paleta exata de 3 tons do original */
  .mb-protected{
    background: #d5fac3 !important; /* Tom 1: Verde Clarido de Fundo */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 16px;
  }
  .mb-protected-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid #1a6e2e !important;
    border-radius:30px;
    padding:4px 12px 4px 6px !important;
    background: #ffffff !important; /* Tom 2: Fundo Interno Branco */
  }
  .mb-protected-badge span{
    font-size:11px;
    font-weight:900;
    color:#1a6e2e !important; /* Tom 3: Texto Verde Escuro */
    letter-spacing:.05em;
    text-transform:uppercase;
  }
  .mb-btns{
    padding:12px 16px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:#fff;
  }
  .mb-btns .btn-donate{
    margin:0;padding:16px;font-size:18px;border-radius:8px;
    background:#24ca68;color:#fff;font-weight:700;border:none;width:100%; cursor: pointer;
  }
  .mb-btns .btn-share{
    margin:0;padding:16px;font-size:18px;border-radius:8px;
    background:#fff;color:#282828;font-weight:700;border:2px solid #e0e0e0;width:100%; cursor: pointer;
  }
  
  /* Footer Mobile Adjustment */
  .footer-links{grid-template-columns: 1fr;} /* Transforma os links do footer em 1 coluna */
}
/* =========================================
   FIM DAS REGRAS PARA O CELULAR
   ========================================= */


/* --- Bloco 2: ajustes de imagem, tags, título, painel de status mobile, tabs, pix, descrição (variante 1) --- */
  /* 1. Reset básico e Container */
  .container {
    max-width: 100%;
    padding: 16px; /* Evita que o conteúdo cole nas bordas da tela */
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  /* 2. Imagem Responsiva e Botão Sobreposto */
  .campaign-image {
    position: relative; /* Permite posicionar o botão do coração por cima */
    width: 100%;
    border-radius: 12px;
    overflow: hidden; /* Mantém os cantos arredondados na imagem */
    margin-bottom: 16px;
  }

  .campaign-image img {
    width: 100%; /* Faz a imagem ocupar 100% da largura do celular */
    height: auto; /* Mantém a proporção sem achatar */
    display: block;
    object-fit: cover;
  }

  .heart-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  /* Mudei de rgba(0,0,0,0.2) para transparente */
  background: transparent; 
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
  
  .heart-btn {
  /* ... resto do código ... */
  background: transparent;
  filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.3)); /* Sombra apenas no ícone, não no fundo */
}

  /* 3. Tags (Categoria e Localização) */
  .tags-row {
    display: flex;
    flex-wrap: wrap; /* Se não couber, quebra a linha em celulares muito pequenos */
    gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
  }

  .category {
    background-color: #f1f3f5;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    color: #495057;
  }

  .location {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #868e96;
  }

  .location svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }

  /* 4. Título e ID */
  .campaign-title {
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 4px 0;
    color: #212529;
  }

  .campaign-id {
    font-size: 12px;
    color: #adb5bd;
    margin-top: 0;
    margin-bottom: 20px;
  }

  /* 5. Painel de Estatísticas */
  .mobile-stats-panel {
    background-color: #ffffff;
    padding: 16px;
    border-radius: 12px;
  }

  .progress-bar {
    width: 100%;
    height: 8px;
    background-color: #dee2e6;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .progress-fill {
    width: 6%; /* Aqui você ajusta via JS conforme a % arrecadada */
    height: 100%;
    background-color: #24ca68;
    border-radius: 4px;
  }

  .collected-value {
    font-size: 20px;
    font-weight: bold;
    color: #24ca68;
    margin-bottom: 16px;
  }

  .collected-goal {
    font-size: 14px;
    color: #868e96;
    font-weight: normal;
    display: block; /* Joga a meta para a linha de baixo no celular */
    margin-top: 4px;
  }

  .stats-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
  }

  .stat-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #495057;
  }

  .stat-value {
    font-weight: bold;
    color: #212529;
  }

/* --- Bloco 3: ajustes finos do painel de status mobile (cores/paddings) --- */
      /* Ajustes precisos para o painel de status (Fiel ao print) */
      .mobile-stats-panel {
        display: block;
        margin-bottom: 24px;
      }
      .mobile-stats-panel .progress-bar {
        height: 4px;
        background: #f1f0f0; /* Fundo cinza clarinho */
        border-radius: 2px;
        margin-bottom: 12px;
      }
      .mobile-stats-panel .progress-fill {
        height: 100%;
        background: #24ca68;
        border-radius: 2px;
        width: 10%; /* Representa o tracinho inicial da barra */
      }
      .mobile-stats-panel .collected-value {
        font-size: 24px;
        font-weight: 900;
        color: #24ca68;
        margin-bottom: 16px;
        display: flex;
        align-items: baseline;
        gap: 6px;
        flex-wrap: wrap;
      }
      .mobile-stats-panel .collected-goal {
        font-size: 16px; /* Tamanho proporcional ao R$ principal */
        font-weight: 400;
        color: #8a8a8a;
      }
      .mobile-stats-panel .stats-box {
        background: #eeffe6 !important; /* Verde clarinho sólido igual ao print */
        border: none !important;
        border-radius: 8px;
        padding: 16px !important; /* Espaçamento interno perfeitamente distribuído */
        display: flex;
        flex-direction: column;
        gap: 12px; /* Distância exata entre as duas linhas de texto */
      }
      .mobile-stats-panel .stat-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: none !important; /* Remove a linha divisória que tinha antes */
        padding: 0 !important; /* Reseta o respiro antigo */
      }
      .mobile-stats-panel .stat-label {
        font-size: 14px;
        color: #4a4a4a;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .mobile-stats-panel .stat-value {
        font-size: 14px;
        font-weight: 700;
        color: #282828;
      }

/* --- Bloco 4: ajustes de imagem, tags, título, tabs, pix, descrição (variante 2 - sobrescreve bloco 2) --- */
  /* Base de fontes e espaçamento para o exemplo */
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 16px;
    background-color: #fff;
  }

  /* 1. Descrição Curta e Completa */
  .short-desc {
    font-size: 15px;
    line-height: 1.5;
    color: #495057;
    margin-bottom: 20px;
  }

  .short-desc span {
    color: #0a8f51;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    display: inline-block;
    padding: 2px 4px;
  }

  /* 2. ABAS RESPONSIVAS (Deslizar com o dedo no celular) */
  .tabs-wrap {
    display: flex;
    overflow-x: auto; /* Ativa o scroll horizontal */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 20px;
    gap: 16px;
    padding-bottom: 4px;
  }

  /* Esconde a barra de rolagem nativa para ficar mais limpo */
  .tabs-wrap::-webkit-scrollbar {
    display: none;
  }
  .tabs-wrap {
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .tab {
    font-size: 15px;
    color: #6c757d;
    white-space: nowrap; /* Impede o texto de quebrar linha */
    padding: 10px 4px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .tab.active {
    color: #24ca68;
    border-bottom-color: #24ca68;
    font-weight: bold;
  }

  /* 3. Área do PIX Superior */
  .pix-row {
    font-size: 14px;
    color: #495057;
    margin-bottom: 8px;
  }

  .pix-key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #e8f5e9;
    color: #0a8f51;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .pix-key svg {
    fill: #0a8f51;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .divider {
    height: 1px;
    background-color: #dee2e6;
    margin: 20px 0;
  }

  .created-date {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 20px;
  }

  /* 4. Corpo do Texto da Campanha */
  .description h3 {
    font-size: 18px;
    line-height: 1.3;
    color: #212529;
    margin-top: 0;
    margin-bottom: 12px;
  }

  .description p {
    font-size: 15px;
    line-height: 1.6;
    color: #343a40;
    margin-bottom: 16px;
  }

  /* 5. Card de PIX Inferior */
  .pix-card {
    background-color: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 12px;
    padding: 16px;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pix-card-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  .pix-card-row svg {
    width: 24px;
    height: 24px;
    fill: #24ca68;
    flex-shrink: 0;
  }

  .pix-card-text {
    font-size: 14px;
    color: #495057;
    margin: 0;
    line-height: 1.5;
  }

  .pix-card-copy {
    background-color: #24ca68;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
  }

  .pix-card-copy svg {
    width: 18px;
    height: 18px;
    fill: #fff;
  }

  /* 6. Link de Denúncia e Aviso */
  .report-link {
    display: inline-block;
    color: #dc3545;
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 16px;
    font-weight: 500;
    padding: 8px 0; /* Aumenta área de clique */
  }

  .aviso {
    font-size: 12px;
    color: #868e96;
    line-height: 1.5;
    margin: 0;
  }