/* =====================================================================
   3-topo.css  |  FAIXA DE AVISO, MENU, BANNER PRINCIPAL E VANTAGENS
   ===================================================================== */

/* ---------- FAIXA DE AVISO (texto que anda no topo) ---------- */

/* barra colorida; esconde o que passa da borda */
.ticker{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;overflow:hidden;white-space:nowrap;font-size:13px;font-weight:600;padding:8px 0}

/* o texto anda da direita pra esquerda (22s = velocidade; aumente pra ficar mais lento) */
.ticker div{display:inline-block;padding-left:100%;animation:correr 22s linear infinite}
@keyframes correr{to{transform:translateX(-100%)}}


/* ---------- MENU DO TOPO ---------- */

/* fica grudado no topo ao rolar, com fundo desfocado */
header{position:sticky;top:0;z-index:10;background:var(--header-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}

/* logo à esquerda, botões à direita */
header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}

/* grupo de botões do lado direito (tema, entrar, discord) */
header .acoes{display:flex;align-items:center;gap:8px}

/* nome da loja; a segunda palavra (dentro de <span>) fica colorida */
.logo{font-weight:800;font-size:20px;letter-spacing:-.5px}
.logo span{color:var(--accent)}


/* ---------- BANNER PRINCIPAL (HERO) ---------- */

/* área grande do começo da página */
.hero{position:relative;padding:90px 0 70px;text-align:center;overflow:hidden}

/* duas "manchas" de luz coloridas no fundo (roxa e rosa) */
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.45;z-index:0}
.hero::before{width:380px;height:380px;background:var(--accent2);top:-120px;left:-80px}
.hero::after{width:340px;height:340px;background:var(--accent);bottom:-140px;right:-60px}
[data-tema="claro"] .hero::before,[data-tema="claro"] .hero::after{opacity:.25}

/* garante que o texto fique na frente das manchas */
.hero .wrap{position:relative;z-index:1}

/* título grande (o tamanho se ajusta à tela) */
h1{font-size:clamp(34px,6vw,64px);line-height:1.05;letter-spacing:-1.5px;margin-bottom:18px}

/* palavras com <em> dentro do título ganham degradê */
h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent),#ffb36b);-webkit-background-clip:text;background-clip:text;color:transparent}

/* frase de apoio embaixo do título */
.hero p{max-width:560px;margin:0 auto 30px;color:var(--muted);font-size:18px}

/* linha com os dois botões do banner */
.hero .acoes-hero{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}


/* ---------- VANTAGENS (envio, pagamento...) ---------- */

/* grade que se ajusta sozinha ao tamanho da tela */
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:10px 0 70px}

/* cada quadradinho de vantagem */
.perk{background:var(--card);border:1px solid var(--linha);border-radius:var(--radius);padding:20px;text-align:center}
.perk b{display:block;font-size:26px;margin-bottom:4px}   /* o emoji grande */
.perk small{color:var(--muted)}                            /* o texto pequeno */


/* ---------- AJUSTE PARA CELULAR PEQUENO ---------- */
@media (max-width:420px){
  .logo{font-size:17px}
  header .acoes{gap:6px}
  .btn.pequeno{padding:8px 11px;font-size:13px}
  .btn.icone{width:36px;height:36px;font-size:16px}
}