/* ============================================================
   reward.css — design system TEAL compartilhado do funil gift-mev
   (Lain Dashboard Design System, edição TEAL: canônico e obrigatório)
   Consumido pela home (index.html) e por cada página de recompensa.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root{
  --bg:#101216; --bg-2:#191d23; --bg-3:#222732; --rule-soft:#22272f;
  --rule:#5a6674; --rule-row:#37404e; --leader:#4c5461;
  --ink:#bcc2c9; --ink-dim:#9fa6b0; --ink-faint:#9098a3;
  --accent:#4fc7bb; --accent-soft:#83cdc6; --accent-ink:#5bbcb2; --accent-dim:#3a8c85;
  --green:#5fc890; --amber:#d5a95a; --red:#e88080;
  --on-accent:#101216;
  --font:'JetBrains Mono','Cascadia Mono',ui-monospace,Consolas,monospace;
  --font-display:'Geist','JetBrains Mono','Cascadia Mono',ui-monospace,Consolas,monospace;
  --radius-sm:4px; --radius-md:6px;
  --glow-teal:0 0 24px rgba(79,199,187,.18);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(closest-side at 14% 10%, rgba(79,199,187,.10), transparent),
    radial-gradient(closest-side at 90% 94%, rgba(213,169,90,.06), transparent);
  background-repeat:no-repeat;
  background-size:60% 55%, 70% 60%;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(90,102,116,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(90,102,116,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 0%, #000 45%, transparent 90%);
}

.wrap{
  position:relative; z-index:1;
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:clamp(20px,5vw,54px) clamp(16px,4vw,28px);
}

a{color:var(--accent-ink); text-decoration:none;}
a:hover{color:var(--accent-soft);}

/* ---- topo comum ---- */
.wordmark{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-dim);
}
.wordmark .mark{
  width:9px; height:9px; border-radius:var(--radius-sm);
  background:var(--accent);
  box-shadow:0 0 10px 1px rgba(79,199,187,.5);
}
.wordmark b{color:var(--ink); font-weight:700;}

.eyebrow{
  display:inline-block;
  font-size:14px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent-ink);
  background:var(--rule-soft);
  border:1px solid var(--rule-row);
  border-radius:var(--radius-sm);
  padding:6px 12px;
  margin:0 0 22px;
}

/* ============================================================
   HOME (catálogo)
   ============================================================ */
.home-head{margin:clamp(18px,4vw,40px) 0 clamp(28px,4vw,44px);}
.home-head .topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:clamp(26px,5vw,48px);}
.home-badge{
  display:none; align-items:center; gap:8px;
  font-size:14px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--green);
}
html[data-unlocked] .home-badge{display:inline-flex;}
.home-badge .led{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px 1px rgba(95,200,144,.55);}
.home-head h1{
  font-family:var(--font-display);
  font-size:clamp(30px,5vw,50px);
  font-weight:700; line-height:1.06; letter-spacing:-0.02em;
  margin:0 0 16px; color:var(--ink); text-wrap:balance;
}
.home-head h1 .hl{color:var(--accent-ink);}
.home-head .lead{font-size:clamp(15.5px,1.5vw,17px); color:var(--ink-dim); max-width:52ch; margin:0; text-wrap:pretty;}

.index-label{
  display:flex; align-items:center; gap:14px;
  font-size:14px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 18px;
}
.index-label::after{content:""; flex:1; height:1px; background:var(--rule-row);}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:clamp(16px,2.2vw,22px);
  align-items:start;
}

/* card de recompensa que é um LINK pra página dela */
.reward-card{
  display:flex; flex-direction:column;
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  background:var(--bg-2);
  overflow:hidden;
  color:inherit;
  transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .18s var(--ease-out);
}
.reward-card:hover{border-color:var(--accent-dim); box-shadow:var(--glow-teal); transform:translateY(-2px); color:inherit;}
.reward-card:focus-visible{outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px rgba(131,205,198,.35);}
.reward-card .card-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 15px;
  background:var(--bg-3);
  border-bottom:1px solid var(--rule-row);
  font-size:14px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent-ink);
}
.reward-card .card-top .kind{color:var(--ink-faint); font-weight:600; letter-spacing:0.06em; display:inline-flex; align-items:center; gap:7px;}
.reward-card .card-top .kind svg{width:14px; height:14px;}
.reward-card .card-main{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1;}
.reward-card h2{font-size:19px; font-weight:700; line-height:1.25; margin:0 0 10px; color:var(--ink);}
.reward-card p{font-size:15.5px; color:var(--ink-dim); margin:0 0 20px; flex:1; text-wrap:pretty;}
.reward-card .card-tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px;}
.reward-card .go{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-size:14px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--accent-ink);
}
.reward-card .go svg{width:15px; height:15px;}
.reward-card:hover .go{color:var(--accent-soft);}
/* selo "destravado" no card quando o lead já deu o email */
.reward-card .lock-state{display:inline-flex; align-items:center; gap:6px; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint);}
html[data-unlocked] .reward-card .lock-state{color:var(--green);}
.reward-card .lock-state svg{width:13px; height:13px;}

.tag{
  font-size:14px; letter-spacing:0.04em; color:var(--ink-faint);
  border:1px solid var(--rule-row); border-radius:var(--radius-sm);
  padding:3px 9px; background:var(--rule-soft);
}

/* card fantasma: mostra como o próximo brinde entra */
.reward-card.ghost{border-style:dashed; border-color:var(--rule-row); background:transparent; box-shadow:none; pointer-events:none;}
.reward-card.ghost .card-top{background:transparent; border-bottom:1px dashed var(--rule-row); color:var(--ink-faint);}
.reward-card.ghost .card-main{justify-content:center; min-height:150px;}
.reward-card.ghost h2{color:var(--ink-faint); font-weight:600;}
.reward-card.ghost p{color:var(--ink-faint);}
.reward-card.ghost .slot{font-size:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-ink); font-weight:600;}

/* ============================================================
   PÁGINA DE RECOMPENSA (gate + acesso, destrava no lugar)
   estados controlados por html[data-state="locked|unlocked"]
   ============================================================ */

/* sem data-state, o padrão é o estado TRAVADO. até 12/08/2026 os dois blocos ficavam
   escondidos aqui, e quem chegava com JS desligado ou com o inline bloqueado recebia hero,
   rodapé e um buraco no meio: nenhum formulário, nenhuma captura, e ninguém ficava sabendo.
   página de captura não pode depender de script pra existir.
   isto não reintroduz flash: o inline do gate é a PRIMEIRA coisa do <head>, antes até do
   <link> desta folha, então ele carimba o data-state antes de o <body> ser pintado e o
   visitante destravado nunca vê o gate piscar. */
html:not([data-state]) .reward-unlocked{display:none;}
html[data-state="locked"] .reward-unlocked{display:none;}
html[data-state="unlocked"] .reward-locked{display:none;}

.reward-nav{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:clamp(24px,4vw,40px);}
.back-link{display:inline-flex; align-items:center; gap:8px; font-size:14px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-faint);}
.back-link:hover{color:var(--accent-ink);}
.back-link svg{width:15px; height:15px;}

.reward-hero{max-width:60ch; margin:0 0 clamp(28px,4vw,40px);}
.reward-hero h1{font-family:var(--font-display); font-size:clamp(28px,4.6vw,44px); font-weight:700; line-height:1.08; letter-spacing:-0.02em; margin:0 0 16px; color:var(--ink);}
.reward-hero h1 .hl{color:var(--accent-ink);}
.reward-hero .desc{font-size:clamp(15.5px,1.5vw,17px); color:var(--ink-dim); margin:0 0 18px; text-wrap:pretty;}
.reward-hero .hero-tags{display:flex; flex-wrap:wrap; gap:8px;}

/* card do gate (locked) e card do acesso (unlocked) partilham a moldura */
.panel{
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  background:var(--bg-2);
  box-shadow:var(--glow-teal), 0 18px 50px rgba(0,0,0,.42);
  padding:clamp(24px,3vw,34px);
  max-width:560px;
}
.panel-head{display:flex; align-items:center; gap:10px; margin:0 0 6px;}
.panel-head .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px 1px rgba(95,200,144,.55); flex:none;}
.panel-head h2{font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-0.005em; color:var(--ink); margin:0;}
.panel-sub{font-size:15.5px; color:var(--ink-dim); margin:0 0 22px; text-wrap:pretty;}

/* form de captura (igual à captura original, tokens do design system) */
.field-label{display:block; font-size:14px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px;}
.input-shell{display:flex; align-items:center; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--bg); padding-left:14px; transition:border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);}
.input-shell .glyph{color:var(--accent-ink); font-weight:700; margin-right:9px; user-select:none;}
.input-shell:focus-within{border-color:var(--accent-soft); box-shadow:0 0 0 3px rgba(131,205,198,.16);}
input[type=email]{flex:1; width:100%; border:none; outline:none; background:transparent; font-family:var(--font); font-size:16px; color:var(--ink); padding:15px 14px 15px 0; letter-spacing:0.01em;}
input[type=email]::placeholder{color:var(--ink-faint); opacity:1;}

button[type=submit]{
  display:block; width:100%; margin-top:14px;
  border:1px solid var(--accent); border-radius:var(--radius-sm);
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font); font-size:15px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:16px 22px; min-height:54px; cursor:pointer; box-shadow:var(--glow-teal);
  transition:background .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .12s var(--ease-out);
}
button[type=submit]:hover{background:var(--accent-soft); border-color:var(--accent-soft); box-shadow:0 0 30px rgba(79,199,187,.32);}
button[type=submit]:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(131,205,198,.5);}
button[type=submit]:active{transform:translateY(1px);}

.reassure{display:flex; align-items:flex-start; gap:9px; margin:16px 0 0; font-size:14px; line-height:1.5; color:var(--ink-faint); text-wrap:pretty;}
.reassure svg{width:15px; height:15px; margin-top:2px; color:var(--accent-ink); flex:none;}

/* bloco de acesso (unlocked) */
.granted{display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--green); margin:0 0 18px;}
.granted svg{width:18px; height:18px; flex:none;}
.access-list{display:flex; flex-direction:column; gap:14px; margin:0;}
.acessar{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; align-self:flex-start;
  border:1px solid var(--accent); border-radius:var(--radius-sm); background:var(--accent); color:var(--on-accent);
  font-family:var(--font); font-size:14px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:14px 24px; min-height:50px;
  transition:background .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .12s var(--ease-out);
}
.acessar svg{width:15px; height:15px;}
.acessar:hover{background:var(--accent-soft); border-color:var(--accent-soft); box-shadow:0 0 26px rgba(79,199,187,.3); color:var(--on-accent);}
.acessar:active{transform:translateY(1px);}
.access-note{font-size:14px; color:var(--ink-faint); margin:16px 0 0;}

/* ---- rodapé comum ---- */
.page-foot{
  margin-top:clamp(30px,5vw,52px); padding-top:18px; border-top:1px solid var(--rule-row);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:14px; color:var(--ink-faint); letter-spacing:0.04em;
}
.page-foot .node{color:var(--ink-dim);}

@media (max-width:600px){
  .grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .reward-card{transition:none;}
  .reward-card:hover{transform:none;}
}