/* ONG 7 Encantos — Hub de Impacto
   Base branca, verde #45D97E como cor de ação, tinta preta. */

:root{
  --green-50:rgba(69,217,126,.10);
  --green-100:rgba(69,217,126,.18);
  --green-200:rgba(69,217,126,.30);
  --green-300:#7BEBAE;
  --green-400:#45D97E;
  --green-500:#45D97E;
  --green-600:#1C834A;
  --green-700:#0E7A5A;
  --green-800:#0E7A5A;
  --green-900:#0b3a29;

  --ink-900:#111111;
  --ink-800:#2b2b2b;
  --ink-700:#3d3d3d;
  --ink-500:#565656;
  --ink-400:#6e6e6e;
  --ink-300:#8a8a8a;

  --line:#e6eae8;
  --line-soft:#f0f2f1;
  --bg:#eeeeee;
  --card:#ffffff;
  --danger:#c2483c;

  --radius-xl:12px;
  --radius-lg:12px;
  --radius-md:8px;

  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 2px 8px rgba(16,24,40,.05);
  --shadow-md:0 8px 24px -8px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.04);
  --shadow-lg:0 24px 60px -24px rgba(15,60,40,.22), 0 8px 24px -12px rgba(16,24,40,.10);

  --sidebar-w:264px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv02','cv03','ss01';
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,p{margin:0}
small{font-size:12px}
img{display:block;max-width:100%}

/* ícones */
.ic{display:inline-block;vertical-align:-.18em;flex:0 0 auto}
.ic.flip{transform:rotate(180deg)}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);
  background:var(--card);border-right:1px solid var(--line);
  padding:22px 16px;display:flex;flex-direction:column;gap:22px;z-index:60;
}
.brand{display:flex;align-items:center;gap:12px;padding:4px 6px}
.brand-mark{width:52px;height:52px;flex:none}
.brand-mark svg,.brand-mark img{width:100%;height:100%;display:block;border-radius:11px}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
/* tipografia da marca: geometrica, como no desenho da logo. "ONG" e o
   prefixo, nao o nome, por isso vai mais leve. */
.brand-text strong{font-family:'Poppins','Inter',ui-sans-serif,system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.04em}
.brand-text span{font-size:12px;color:var(--ink-400)}

.nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow:auto}
.nav-label{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-300);padding:16px 10px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 12px;border-radius:12px;font-size:14px;font-weight:500;
  color:var(--ink-500);transition:.18s ease;text-align:left;
}
.nav-item .ico{display:flex;width:20px;color:var(--ink-300);transition:.18s}
.nav-item:hover{background:var(--green-50);color:var(--ink-800)}
.nav-item.is-active{
  background:var(--green-50);
  color:var(--green-800);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--green-100);
}
.nav-item.is-active .ico{color:var(--green-600)}

.sidebar-card{
  border-radius:var(--radius-lg);padding:16px;
  background:linear-gradient(155deg,var(--green-600),var(--green-800));
  color:#fff;box-shadow:0 16px 32px -18px rgba(23,128,72,.7);
}
.sc-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;opacity:.75}
.sc-value{font-size:24px;font-weight:800;letter-spacing:-.8px;margin-top:6px}
.sc-hint{font-size:11.5px;opacity:.72;margin-top:4px;line-height:1.45}

/* ---------- Main ---------- */
.main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;
  padding:16px 34px;background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.menu-btn{display:none;color:var(--ink-500);padding:6px}
.topbar-title h1{font-size:19px;font-weight:700;letter-spacing:-.4px}
/* A marca no cabeçalho, com o mesmo desenho da página principal (logo,
   nome em Poppins com espaçamento). Só no celular: no computador ela já
   está no alto da barra lateral. */
.topo-marca{display:none}
.titulo-curto{display:none}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}

.chip{
  display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:13px;
  box-shadow:var(--shadow-xs);transition:.2s;
}
.chip b{font-weight:700;font-variant-numeric:tabular-nums}
.chip small{color:var(--ink-400)}
.chip-ico{display:flex}
/* moeda desenhada, não ícone de traço: não herda currentColor */
.chip-arte{width:15px;height:15px;object-fit:contain;flex:none}
.chip-points{border-color:#f0dfae;background:#fdf8ec;color:#8a6d10}
.chip-points b,.chip-points small{color:var(--ink-900)}
.chip-points small{color:var(--ink-400)}
.chip.pulse{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}

.avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(145deg,var(--green-500),var(--green-700));
  box-shadow:0 6px 14px -6px rgba(31,168,94,.7);
}
.avatar-lg{width:60px;height:60px;font-size:22px}
/* com foto de perfil: a foto ocupa o círculo inteiro */
button.avatar{border:0;padding:0;cursor:pointer;font-family:inherit}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar-xl{width:92px;height:92px;font-size:34px;flex:none}
.avatar-editar{position:relative;transition:transform .16s ease}
.avatar-editar:hover{transform:scale(1.03)}
.avatar-lapis{
  position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:var(--green-700);background:#fff;
  border:1px solid var(--line);box-shadow:0 4px 10px -4px rgba(0,0,0,.3);
}
.perfil-topo{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.perfil-foto-acoes{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* recorte da foto: arrastar posiciona, o controle aproxima */
.recorte{display:grid;place-items:center}
.recorte canvas{
  width:min(280px,72vw);height:auto;aspect-ratio:1;border-radius:50%;touch-action:none;cursor:grab;
  box-shadow:0 0 0 4px var(--green-100), 0 16px 34px -14px rgba(0,0,0,.45);
}
.recorte canvas.arrastando{cursor:grabbing}
.recorte-zoom{display:flex;align-items:center;gap:10px;max-width:300px;margin:18px auto 0;color:var(--ink-500)}
.recorte-zoom input{flex:1;accent-color:var(--green-600)}
.avatar-sm{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--green-800);
  background:var(--green-100);border:1px solid var(--green-200);
}

.content{padding:30px 34px 20px;max-width:1240px;width:100%;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.foot{
  margin-top:auto;padding:22px 34px 30px;display:flex;flex-direction:column;gap:4px;
  font-size:11.5px;color:var(--ink-300);border-top:1px solid var(--line-soft);
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:4px;font-size:14px;font-weight:500;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{
  background:linear-gradient(135deg,var(--green-500),var(--green-700));
  color:#fff;
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--ink-700)}
.btn-ghost:hover{border-color:var(--green-300);color:var(--green-800);background:var(--green-50)}
.btn-soft{background:var(--green-50);color:var(--green-800);border:1px solid var(--green-100)}
.btn-soft:hover{background:var(--green-100)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.06)}
.btn-lg{padding:14px 28px;font-size:15px;border-radius:4px}
.btn-sm{padding:10px 18px;font-size:13px;border-radius:4px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-block{width:100%}

.icon-btn{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:var(--ink-400);border:1px solid transparent;transition:.18s;
}
.icon-btn:hover{background:var(--green-50);color:var(--green-700);border-color:var(--green-100)}
.icon-btn.danger:hover{background:#fdf2f1;color:var(--danger);border-color:#f7d9d6}
.acoes-tabela{gap:4px;justify-content:flex-end}

/* ---------- Cards & layout ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);transition:box-shadow .25s ease, transform .25s ease, border-color .25s;
}
.card-pad{padding:24px}
.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--green-200)}
.grid{display:grid;gap:18px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:18px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.center{text-align:center}
.right{text-align:right}
.lh{line-height:1.55}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.section-head h2{font-size:18px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.section-head p{font-size:13px;color:var(--ink-400);margin-top:3px}
.link-btn{font-size:13px;font-weight:600;color:var(--green-700);display:inline-flex;align-items:center;gap:6px}
.link-btn:hover{text-decoration:underline}
.link-btn.back{align-self:flex-start}

.h-sm{font-size:15px;font-weight:700;letter-spacing:-.2px}
.h-md{font-size:19px;font-weight:750;letter-spacing:-.4px}
.muted{color:var(--ink-400)}
.tiny{font-size:12px}
.texto{font-size:13.5px;color:var(--ink-700);line-height:1.7}
.num{font-variant-numeric:tabular-nums;letter-spacing:-1px;font-weight:800}

.banner-reward{border-color:var(--green-300);background:linear-gradient(120deg,var(--green-50),#fff);gap:16px}

/* ---------- Hero de nível ---------- */
.hero{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--green-700) 0%,var(--green-600) 45%,var(--green-500) 100%);
  color:#fff;padding:30px 32px;box-shadow:var(--shadow-lg);
}
.hero::after{
  content:"";position:absolute;right:-90px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.22),rgba(255,255,255,0) 62%);
}
.hero::before{
  content:"";position:absolute;left:-60px;bottom:-160px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.13),rgba(255,255,255,0) 65%);
}
.hero-inner{position:relative;z-index:2}
.hero-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tier-badge{
  display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  font-size:13px;font-weight:600;backdrop-filter:blur(6px);
}
.tier-dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,.18);flex:0 0 auto}
.hero h2{font-size:36px;font-weight:900;letter-spacing:-.035em;margin-top:16px}
.hero .sub{font-size:14px;opacity:.88;margin-top:6px;max-width:540px;line-height:1.55}

.progress-wrap{margin-top:26px;max-width:620px}
.progress-meta{display:flex;justify-content:space-between;font-size:12.5px;opacity:.9;margin-bottom:9px}
.progress{height:11px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden}
.progress-fill{
  height:100%;border-radius:999px;width:0;
  background:linear-gradient(90deg,#ffffff,#d7ffe9);
  box-shadow:0 0 16px rgba(255,255,255,.6);
  transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.hero-stats{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.hero-stat span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;opacity:.72}
.hero-stat b{font-size:24px;font-weight:800;letter-spacing:-.8px;display:block;margin-top:4px}

/* ---------- Tiles ---------- */
.tile{padding:20px;border-radius:var(--radius-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.tile-label{font-size:12px;color:var(--ink-400);font-weight:500;display:flex;align-items:center;gap:8px}
.tile-value{font-size:27px;margin-top:10px}
.tile-hint{font-size:12px;color:var(--ink-400);margin-top:6px}
.tile-ico{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--green-50);color:var(--green-700);border:1px solid var(--green-100);
}

/* barra de nível no cabeçalho, em todas as telas: nível, points, quanto a
   pessoa doou e o que falta para o próximo nível. Uma faixa inteira embaixo
   do título: no computador numa linha só, no celular em duas. */
.topbar{flex-wrap:wrap;row-gap:10px}
.topo-nivel{display:none}
.topo-nivel:not([hidden]){
  display:flex;align-items:center;gap:10px;flex-basis:100%;
  padding:6px 14px;border-radius:12px;text-align:left;cursor:pointer;font-family:inherit;
  font-size:13px;color:var(--ink-800);background:var(--green-50);border:1px solid var(--green-100);
  transition:border-color .2s;
}
.topo-nivel:hover{border-color:var(--green-300)}
.topo-nivel img{width:30px;height:30px;object-fit:contain;flex:none}
.tn-corpo{flex:1;min-width:0;display:flex;align-items:center;gap:18px}
.tn-linha{display:flex;align-items:baseline;gap:10px;min-width:0}
.tn-linha b{font-weight:700;white-space:nowrap}
.tn-pts{color:var(--ink-500);white-space:nowrap;font-variant-numeric:tabular-nums}
.tn-doado{font-weight:700;color:var(--green-700);white-space:nowrap;font-variant-numeric:tabular-nums}
.tn-doado small{font-weight:500;color:var(--ink-500)}
.tn-barra{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.topo-nivel .bar{flex:1;min-width:40px}
/* span é de linha e ignora largura: sem isto o preenchimento não aparecia */
.topo-nivel .bar-fill{display:block}
.tn-barra small{color:var(--ink-500);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .topbar{row-gap:8px}
  .topo-nivel:not([hidden]){gap:8px;padding:6px 10px;font-size:12.5px}
  .topo-nivel img{width:32px;height:32px}
  /* duas linhas: nível, points e quanto doou em cima; barra e o que falta embaixo */
  .tn-corpo{flex-direction:column;align-items:stretch;gap:4px}
  .tn-linha{gap:8px}
  .tn-doado{margin-left:auto}
  .tn-barra{gap:8px}
}

/* ---------- jogos no Hub ---------- */
/* Cards compactos para caber vários lado a lado. O cenário do gol fica no
   fundo, recortado pelo card; a criança fica por cima e sai pela borda de
   cima, com a cabeça inteira. O trilho tem folga em cima para isso: rolagem
   horizontal corta o que passa da borda, e sem a folga a cabeça sumiria. */
.jogos-topo{display:flex;align-items:center;gap:10px}
.jogos-setas{margin-left:auto;display:flex;gap:6px}
.jogos-setas[hidden]{display:none}
.jogos-seta{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--card);border:1px solid var(--line);color:var(--ink-700);box-shadow:var(--shadow-xs);
}
.jogos-seta-volta svg{transform:rotate(180deg)}
.jogos-trilho{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:62px 2px 8px;margin-top:-36px;
  scrollbar-width:none;
}
.jogos-trilho::-webkit-scrollbar{display:none}
.jogo-card{
  position:relative;flex:0 0 290px;height:112px;border-radius:16px;scroll-snap-align:start;
  display:block;color:#fff;text-decoration:none;
  box-shadow:0 12px 26px -14px rgba(14,122,90,.75);
  transition:transform .18s ease, box-shadow .18s ease;
}
a.jogo-card:hover{transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(14,122,90,.85)}
a.jogo-card:focus-visible{outline:3px solid #FFC93C;outline-offset:3px}
.jogo-card-fundo{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:#1C834A center 40%/cover no-repeat;
}
.jogo-card-fundo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(6,48,31,.95) 0%, rgba(6,48,31,.78) 40%, rgba(6,48,31,.08) 76%);
}
.jogo-card-texto{
  position:absolute;left:16px;top:14px;bottom:14px;z-index:1;max-width:56%;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
}
.jogo-card-texto b{font-family:'Poppins','Inter',sans-serif;font-weight:600;font-size:15.5px;line-height:1.15;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.jogo-card-texto small{font-size:12px;opacity:.88;white-space:nowrap}
.jogo-card-texto small b{font-variant-numeric:tabular-nums}
.jogo-card-cta{
  margin-top:auto;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:#0b3a29;background:#fff;box-shadow:0 3px 0 rgba(6,48,31,.25);white-space:nowrap;
}
.jogo-card-heroi{
  position:absolute;right:10px;bottom:0;height:148%;width:auto;z-index:2;pointer-events:none;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.4));
  transform-origin:50% 100%;animation:jogoArte 2.6s ease-in-out infinite;
}
.jogo-card-breve{flex-basis:170px;box-shadow:none;cursor:default}
.jogo-card-breve .jogo-card-fundo{background:repeating-linear-gradient(135deg,#eef3f0 0 12px,#e6ede9 12px 24px);border:1px dashed #cfdcd5}
.jogo-card-breve .jogo-card-fundo::after{display:none}
.jogo-card-breve .jogo-card-texto{color:var(--ink-500);max-width:none}
.jogo-card-breve .jogo-card-texto b{text-shadow:none;color:var(--ink-700)}
.jogo-card-cadeado{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;margin-bottom:4px;
  background:#fff;border:1px solid var(--line);color:var(--ink-500);
}
@keyframes jogoArte{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (max-width:640px){
  .jogo-card{flex-basis:74%}
  .jogo-card-breve{flex-basis:44%}
  .jogos-setas{display:none}
}
@media (prefers-reduced-motion: reduce){ .jogo-card-heroi{animation:none} }

/* ---------- Campanhas ---------- */
.action-card{overflow:hidden;display:flex;flex-direction:column;cursor:pointer}
.action-cover{position:relative;height:158px;overflow:hidden;background:var(--green-50)}
.cover-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.action-card:hover .cover-img{transform:scale(1.04)}
.action-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,78,49,0) 45%,rgba(6,78,49,.45));
  pointer-events:none;
}
.ph{
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--green-50),var(--green-100));
  color:var(--green-600);
}
.pill{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.94);color:var(--green-800);backdrop-filter:blur(4px);
}
.pill-video{left:auto;right:14px}
.action-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.action-body h3{font-size:15.5px;font-weight:700;letter-spacing:-.2px;line-height:1.35}
.action-body p{font-size:13px;color:var(--ink-500);line-height:1.55}
.action-foot{
  display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-400);
  padding:10px 0 2px;border-top:1px solid var(--line-soft);margin-top:2px;
}
.action-foot span{display:inline-flex;align-items:center;gap:6px}
.bar{height:7px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--green-400),var(--green-600));transition:width 1s cubic-bezier(.22,1,.36,1)}
.bar-meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-400)}
.bar-meta b{color:var(--ink-800)}

/* página da campanha */
.campanha{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.campanha-cover{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-sm)}
.campanha-cover .cover-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.campanha-cover video.cover-img{background:#0b1220}
.campanha-titulo{font-size:26px;font-weight:800;letter-spacing:-.8px;margin-top:14px;line-height:1.25}
.campanha-resumo{font-size:14px;color:var(--ink-500);line-height:1.6;margin-top:10px;max-width:70ch}
.campanha-side .sticky{position:sticky;top:92px}
.valor-grande{font-size:32px;font-weight:800;letter-spacing:-1.2px;color:var(--green-700)}
.side-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.side-stats > div{padding:14px;border-radius:var(--radius-md);background:var(--green-50);border:1px solid var(--green-100)}
.side-stats span{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-500)}
.side-stats b{display:block;font-size:19px;font-weight:800;letter-spacing:-.5px;margin-top:6px}
.doador{padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.doador:last-child{border-bottom:0;padding-bottom:0}
.doador.eu .avatar-sm{background:var(--green-600);color:#fff;border-color:var(--green-600)}

.timeline{display:flex;flex-direction:column;gap:18px;position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative}
.tl-dot{
  position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--green-500);box-shadow:0 0 0 4px var(--green-100);
}

/* ---------- Missões ---------- */
.mission{display:flex;align-items:center;gap:16px;padding:17px 18px;border-radius:var(--radius-lg);background:var(--card);border:1px solid var(--line);transition:.2s}
.mission:hover{border-color:var(--green-200);box-shadow:var(--shadow-sm)}
.mission-ico{
  width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--green-50),var(--green-100));color:var(--green-700);
  border:1px solid var(--green-100);
}
.mission-main{flex:1;min-width:0}
.mission-main h4{font-size:14px;font-weight:650}
.mission-main p{font-size:12.5px;color:var(--ink-400);margin-top:3px}
.mission-prog{margin-top:9px;display:flex;align-items:center;gap:10px}
.mission-prog .bar{flex:1}
.mission-prog span{font-size:11.5px;color:var(--ink-400);font-variant-numeric:tabular-nums}
.mission-side{display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.reward-tags{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:4px;
  background:var(--green-50);color:var(--green-800);border:1px solid var(--green-100);white-space:nowrap;
}
.tag-gold{background:rgba(245,179,1,.12);color:#F5B301;border-color:rgba(245,179,1,.32)}
.tag-mute{background:var(--line-soft);color:var(--ink-500);border-color:var(--line)}

/* ---------- Benefícios / níveis ---------- */
.ben-card{border-color:var(--green-200);background:var(--green-50)}
.tier-card{padding:22px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--card);position:relative;overflow:hidden}
.tier-card.current{border-color:var(--green-300);box-shadow:0 18px 40px -26px rgba(31,168,94,.8)}
.tier-card .ribbon{position:absolute;top:14px;right:-32px;transform:rotate(38deg);background:var(--green-600);color:#fff;font-size:10.5px;font-weight:700;padding:5px 38px;letter-spacing:.06em}
.tier-name{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:750}
.tier-req{font-size:12.5px;color:var(--ink-400);margin-top:5px}
.tier-list{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.tier-list div{display:flex;gap:9px;font-size:13px;color:var(--ink-700);line-height:1.45}
.tier-list .ic{color:var(--green-600);margin-top:1px}

.rule-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--card)}
.rule-range{font-weight:700;font-size:13.5px;min-width:148px}
.rule-range.short{min-width:80px}
.rule-arrow{color:var(--ink-300);display:flex}
.rule-note{margin-left:auto;text-align:right}

/* ---------- Tabelas ---------- */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13px;min-width:880px}
.table td:first-child{min-width:260px}
.table td.right,.table th.right{white-space:nowrap}
.table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-300);padding:0 14px 12px;font-weight:600;white-space:nowrap}
.table td{padding:13px 14px;border-top:1px solid var(--line-soft);color:var(--ink-700);vertical-align:middle}
.table tr:hover td{background:var(--green-50)}
.table .right{text-align:right}
.td-pos{color:var(--green-700);font-weight:700}
.td-neg{color:#b4443a;font-weight:700}
.thumb{width:46px;height:46px;flex:0 0 46px;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.thumb-img{width:100%;height:100%;object-fit:cover}
.thumb .ph{width:100%;height:100%}
.thumb .ph .ic{width:20px;height:20px}

.admin-head{background:linear-gradient(120deg,var(--green-50),#fff)}

/* ---------- Formulários ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .col-2{grid-column:span 2}
.input{
  width:100%;padding:12px 15px;border-radius:13px;border:1.5px solid var(--line);
  font-size:14px;font-family:inherit;font-weight:500;color:var(--ink-900);
  outline:none;transition:.18s;background:var(--card);
}
textarea.input{resize:vertical;line-height:1.6}
.input:focus{border-color:var(--green-500);box-shadow:0 0 0 4px rgba(69,217,126,.12)}
.field-label{font-size:12.5px;font-weight:600;color:var(--ink-500);margin-bottom:7px;display:block}
.check{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--ink-700);cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--green-600);cursor:pointer}

.uploader{display:flex;gap:14px;align-items:stretch}
.up-preview{width:104px;height:104px;flex:0 0 104px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--green-50)}
.up-preview .prod-img{width:100%;height:100%}
.up-actions{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center}
.up-btn{align-self:flex-start;cursor:pointer}

/* ---------- Modal ---------- */
.modal-root{position:fixed;inset:0;z-index:100;display:none}
.modal-root.open{display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);animation:fade .25s ease}
.modal{
  position:relative;background:var(--card);border-radius:26px;width:min(520px,calc(100vw - 32px));
  max-height:calc(100vh - 60px);overflow:auto;box-shadow:0 40px 90px -30px rgba(6,60,38,.5);
  animation:rise .38s cubic-bezier(.22,1,.36,1);
}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.modal-pad{padding:28px}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px}
.modal-head h3{font-size:19px;font-weight:750;letter-spacing:-.4px;line-height:1.3}
.modal-head p{font-size:13px;color:var(--ink-400);margin-top:5px;line-height:1.5}
.x{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;color:var(--ink-400)}
.x:hover{background:var(--line-soft);color:var(--ink-800)}

.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.amount-opt{
  padding:14px 8px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);
  font-weight:700;font-size:15px;transition:.18s;text-align:center;
}
.amount-opt small{display:block;font-weight:500;font-size:11px;color:var(--ink-400);margin-top:4px}
.amount-opt:hover{border-color:var(--green-300);background:var(--green-50)}
.amount-opt.sel{border-color:var(--green-600);background:var(--green-50);color:var(--green-800);box-shadow:0 0 0 4px rgba(69,217,126,.12)}

.preview-box{
  margin-top:18px;padding:16px;border-radius:16px;border:1px dashed var(--green-200);
  background:linear-gradient(160deg,var(--green-50),#fff);
}
.preview-box.left{text-align:left}
.preview-box.codigo{font-size:20px;font-weight:800;letter-spacing:2px;text-align:center;color:var(--green-800)}
.preview-line{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13px;padding:5px 0}
.preview-line b{font-weight:700;display:inline-flex;align-items:center;gap:6px;text-align:right}

/* sucesso */
.success{text-align:center;padding:34px 30px 30px;position:relative;overflow:hidden}
.success-ring{
  width:92px;height:92px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--green-400),var(--green-600));color:#fff;
  box-shadow:0 20px 44px -18px rgba(31,168,94,.9);
  animation:ring .6s cubic-bezier(.2,1.4,.4,1);
}
.success-ring.small{width:74px;height:74px}
@keyframes ring{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.success h3{font-size:24px;font-weight:800;letter-spacing:-.7px}
.success .p{font-size:13.5px;color:var(--ink-400);margin-top:8px;line-height:1.55}
.reward-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.reward-box{
  padding:18px 14px;border-radius:18px;border:1px solid var(--line);background:var(--card);
  animation:rise .5s cubic-bezier(.22,1,.36,1) backwards;
}
.reward-box:nth-child(1){animation-delay:.12s}
.reward-box:nth-child(2){animation-delay:.22s}
.reward-box span{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-400);display:flex;align-items:center;justify-content:center;gap:6px}
.reward-box b{display:block;font-size:26px;font-weight:800;letter-spacing:-1px;margin-top:6px}
.reward-box.points b{color:#a37c0b}
.unlock{
  margin-top:14px;padding:16px;border-radius:18px;text-align:left;
  background:linear-gradient(140deg,var(--green-600),var(--green-800));color:#fff;
  animation:rise .5s .32s cubic-bezier(.22,1,.36,1) backwards;
  box-shadow:0 20px 40px -24px rgba(23,128,72,.9);
}
.unlock.unlock-alt{background:linear-gradient(140deg,#0f766e,#065f46)}
.unlock span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.unlock b{display:flex;align-items:center;gap:8px;font-size:15.5px;margin-top:6px;font-weight:700}
.unlock p{font-size:12.5px;opacity:.86;margin-top:6px;line-height:1.5}

.confetti{position:absolute;top:-12px;width:7px;height:11px;border-radius:2px;opacity:.9;animation:fall 2.4s linear forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(460px) rotate(520deg);opacity:0}}

/* toasts */
.toasts{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:10px;z-index:200}
.toast{
  display:flex;align-items:center;gap:11px;padding:13px 17px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-md);font-size:13.5px;font-weight:500;
  animation:slidein .35s cubic-bezier(.22,1,.36,1);max-width:340px;
}
.toast-ic{display:flex;color:var(--green-600)}
@keyframes slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

.empty{padding:52px 20px;text-align:center;color:var(--ink-400);font-size:13.5px;line-height:1.6}
.empty .big{display:flex;justify-content:center;margin-bottom:12px;color:var(--green-300)}

.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
.overlay.show{display:block}

/* ---------- Responsivo ---------- */
@media (max-width:1180px){
  .campanha{grid-template-columns:1fr}
  .campanha-side .sticky{position:static}
}
@media (max-width:1100px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .menu-btn{display:flex}
  .content,.topbar,.foot{padding-left:18px;padding-right:18px}
  .topo-marca{
    display:flex;align-items:center;gap:9px;flex:none;padding:0;border:0;background:none;cursor:pointer;
    font-family:'Poppins','Inter',ui-sans-serif,system-ui,sans-serif;font-size:15px;font-weight:600;
    letter-spacing:.04em;color:var(--ink-900);white-space:nowrap;
  }
  .topo-marca img{width:42px;height:42px;display:block;flex:none}
  /* o título cede antes do avatar: nunca empurra o avatar para outra linha */
  .topbar-title{min-width:0}
  .topbar-title h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chip-points{display:none}
  .topbar .btn-primary{display:none}
}
@media (max-width:600px){
  .titulo-longo{display:none}
  .titulo-curto{display:inline}
}
/* em celular pequeno, as mesmas medidas da marca da página principal */
@media (max-width:430px){
  .topo-marca{font-size:11.5px;gap:7px}
  .topo-marca img{width:34px;height:34px}
  /* menos folga entre menu, marca, título e avatar, e o título um pouco
     menor: assim "Campanhas" e "Benefícios" cabem inteiros */
  .topbar{column-gap:10px}
  .topbar-title h1{font-size:15px}
}
@media (max-width:370px){
  .topbar-title h1{font-size:14px}
}
@media (max-width:640px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-grid .col-2{grid-column:span 1}
  .hero{padding:24px 20px}
  .hero h2{font-size:27px}
  .campanha-titulo{font-size:21px}
  .amount-grid{grid-template-columns:repeat(2,1fr)}
  .reward-grid{grid-template-columns:1fr}
  .mission{flex-wrap:wrap}
  .mission-side{width:100%;flex-direction:row;justify-content:space-between;align-items:center}
  .uploader{flex-direction:column}
  .rule-note{margin-left:0;text-align:left;width:100%}
}


/* ---------- tela de entrada (Hub sem sessão) ----------
   Quem ainda não entrou não tem Hub para navegar: a barra de cima ficava lá
   com o título "Hub", os três traços do menu lateral e o rodapé das regras,
   tudo apontando para uma navegação que não existe antes de a pessoa entrar.
   Sem sessão sobra o formulário, e só. */
.sem-sessao .sidebar,
.sem-sessao .topbar,
.sem-sessao .foot{display:none}
.sem-sessao .main{margin-left:0}
.sem-sessao .content{padding-top:0;max-width:none}
.entrada-caixa{display:grid;place-items:center;min-height:60vh;padding:20px 0}
/* sem a barra de cima e sem o rodapé, o cartão pode ocupar a tela toda e
   ficar centralizado de verdade, em vez de alto e preso ao topo */
.sem-sessao .entrada-caixa{min-height:100vh;padding:24px 16px}
/* a marca entra dentro do cartão, acima do título: a página não pode ficar
   anônima só porque perdeu a barra */
.entrada-marca{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.entrada-marca img{width:44px;height:44px;border-radius:10px;display:block}
.entrada-marca b{font-family:'Poppins','Inter',ui-sans-serif,system-ui,sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--ink-900)}
.entrada-marca span{display:block;font-size:11.5px;font-weight:400;letter-spacing:.01em;color:var(--ink-300);margin-top:2px}
.erro-caixa{margin-top:14px;padding:11px 14px;border-radius:var(--radius-md);
  background:rgba(180,68,58,.1);color:#b4443a;font-size:13px}
.link-btn{border:none;background:none;cursor:pointer;padding:0}

/* centralizacao geral do Hub */
.topbar-title{flex:1;text-align:center}
/* a largura vem do proprio container, que ja desconta a barra lateral.
   usar vw aqui ignorava a sidebar e estourava em telas de notebook */
.content{width:100%;max-width:1560px;margin:0 auto}
.foot{text-align:center;align-items:center}
.section-head{flex-direction:column;align-items:center;text-align:center;gap:10px}
.section-head > div{text-align:center}
.hero-inner{text-align:center}
.hero .sub{margin-left:auto;margin-right:auto}
.progress-wrap{margin-left:auto;margin-right:auto}
.hero-top{justify-content:center}
.hero-stats{justify-content:center}
.entrada-caixa{min-height:70vh}
/* texto dentro de cartao e tabela continua a esquerda, para leitura */
.card-pad .table,.table td,.table th{text-align:left}
.table .right{text-align:right}

/* apoio inline */
.apoio-grade{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;text-align:left}
.apoio-campanha{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden}
.apoio-foto{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 35%;display:block}
.apoio-foto.ph{display:grid;place-items:center;background:var(--green-50);color:var(--green-600)}
.apoio-campanha-corpo{padding:24px}
.apoio-painel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px;text-align:left}
.rotulo-apoio{display:block;font-size:11px;letter-spacing:.32px;text-transform:uppercase;color:var(--ink-400);font-weight:600}
.apoio-valores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.apoio-valor{padding:14px 6px;border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--card);font-size:15px;font-weight:600;color:var(--ink-900);transition:.2s}
.apoio-valor:hover{border-color:var(--green-500)}
.apoio-valor.on{border-color:var(--green-600);background:var(--green-50);color:var(--green-700)}
.apoio-resumo{border:1px solid var(--line);border-radius:var(--radius-md);padding:18px}
.apoio-resumo .rl{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:13.5px;color:var(--ink-500)}
.apoio-resumo .rl b{color:var(--ink-900);font-weight:600}
.apoio-valor-grande{font-size:32px;font-weight:800;letter-spacing:-1px;color:var(--green-700)}
.apoio-qr{display:block;width:210px;height:210px;margin:20px auto 0;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff}
.apoio-codigo{margin-top:10px;padding:13px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg);font-family:ui-monospace,Menlo,monospace;font-size:11.5px;word-break:break-all;line-height:1.5;max-height:100px;overflow:auto}
.apoio-espera{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13.5px;color:var(--ink-400)}
.apoio-giro{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--green-600);border-radius:50%;animation:giraApoio .8s linear infinite}
@keyframes giraApoio{to{transform:rotate(360deg)}}
.apoio-ok{text-align:center;position:relative;overflow:hidden}
.apoio-ganhos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.apoio-ganhos div{border:1px solid var(--line);border-radius:var(--radius-md);padding:16px}
.apoio-ganhos b{display:block;font-size:24px;font-weight:800;letter-spacing:-.6px;margin-top:5px;color:var(--green-700)}
.apoio-desbloqueio{background:var(--ink-900);color:#fff;border-radius:var(--radius-md);padding:16px 18px;text-align:left}
.apoio-desbloqueio .rotulo-apoio{color:var(--green-400)}
.apoio-desbloqueio b{display:block;font-size:15px;margin-top:5px}
@media(max-width:900px){ .apoio-grade{grid-template-columns:1fr} }
@media(max-width:520px){ .apoio-valores{grid-template-columns:repeat(2,1fr)} .apoio-ganhos{grid-template-columns:1fr} }

/* selos dos niveis */
.nivel-selo{width:88px;height:88px;object-fit:contain;display:block;margin:0 auto 14px}
.tier-card .tier-name{justify-content:center;text-align:center}
.tier-card .tier-req{text-align:center}


/* home do hub */
.faixa-destaque{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:#0d0f0e;
  color:#f9f9f9;min-height:230px;display:flex;align-items:center}
.faixa-arte{position:absolute;inset:0;background-size:cover;background-position:center right;opacity:.85}
.faixa-arte::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#0d0f0e 6%,rgba(13,15,14,.86) 42%,rgba(13,15,14,.15) 78%)}
.faixa-conteudo{position:relative;z-index:2;padding:34px 38px;max-width:60ch;text-align:left}
.faixa-rotulo{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--green-400);font-weight:600}
.faixa-titulo{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-top:10px}
.faixa-texto{font-size:14px;color:rgba(249,249,249,.78);margin-top:8px;line-height:1.6;max-width:52ch}
.faixa-pontos{display:flex;justify-content:center;gap:7px;margin-top:-4px}
.faixa-pontos button{width:26px;height:4px;border-radius:2px;background:var(--line);border:none;cursor:pointer;transition:background .3s}
.faixa-pontos button.on{background:var(--green-500)}

/* No celular o texto ocupa a largura toda, e por cima da foto ela ficava
   quase apagada. Aqui a foto fica no alto do card, inteira na altura dela, e
   o texto embaixo, no escuro: as crianças aparecem e o texto continua legível. */
@media(max-width:680px){
  .faixa-destaque{min-height:400px;align-items:flex-end}
  .faixa-arte{background-size:auto 250px;background-position:right top;background-repeat:no-repeat}
  .faixa-arte::after{background:linear-gradient(180deg,rgba(13,15,14,0) 0%,rgba(13,15,14,.05) 34%,rgba(13,15,14,.8) 52%,#0d0f0e 63%)}
  .faixa-conteudo{padding:24px 22px}
  .faixa-titulo{font-size:20px}
}

/* ---- relatório de barras do Hub ----
   A série chega do servidor com os meses sem apoio já preenchidos, então
   cada barra vale sempre um mês e as alturas são comparáveis entre si. */
.relatorio-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px}
.relatorio-topo span{font-size:12px;color:var(--ink-400)}
.barras{display:flex;align-items:flex-end;gap:6px;height:130px;margin-top:10px;
  border-bottom:1px solid var(--line);
  background-image:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),var(--line-soft) calc(25% - 1px),var(--line-soft) 25%)}
.barras i{flex:1;max-width:44px;background:var(--green-500);border-radius:4px 4px 0 0;min-height:3px;
  position:relative;transition:background .15s}
.barras i.zero{background:var(--line)}
.barras i:hover{background:var(--green-700)}
.barras i b{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:var(--ink-900);color:#fff;font-size:11px;font-weight:500;padding:4px 8px;
  border-radius:8px;white-space:nowrap;margin-bottom:6px;z-index:3}
.barras i:hover b{display:block}
.barras-eixo{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-300);margin-top:8px}

/* Aviso na tela de criar conta: a conta é liberada pela primeira doação
   confirmada. Fica antes do formulário de propósito — descobrir a regra
   depois de preencher nome, cidade, telefone, e-mail e senha é o pior
   momento possível para contar. */
.aviso-apoio{display:flex;flex-direction:column;gap:5px;padding:14px 16px;
  background:var(--green-50,#eefaf3);border:1px solid var(--green-200,#cdebd9);
  border-radius:12px;font-size:12.5px;line-height:1.55}
.aviso-apoio b{font-size:13px}
.aviso-apoio .link-btn{font-size:12.5px}

/* ---------- carregando: o banner brilha até a imagem chegar ---------- */
@keyframes esqBrilho{from{background-position:120% 0}to{background-position:-120% 0}}
[data-carrega].carregando::before{
  content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,#e3ebe7 30%,#f4f8f6 50%,#e3ebe7 70%) 0 0/250% 100%;animation:esqBrilho 1.3s linear infinite;
}
.faixa-arte.carregando::before{background-color:#1a1f1d;background-image:linear-gradient(100deg,#151a18 30%,#26302c 50%,#151a18 70%)}
.jogo-card.carregando{box-shadow:none}
.jogo-card.carregando .jogo-card-heroi{opacity:0}
.jogo-card-heroi{transition:opacity .35s ease}
@media (prefers-reduced-motion: reduce){ [data-carrega].carregando::before{animation:none} }