/* Exército do Vira-Voto: vermelho de luta, preto de cartaz, papel de panfleto. */
:root{
  --red:#D50F25;--red-d:#A00A1B;--red-soft:#FCE6E8;
  --ink:#141414;--mut:#5C5853;--line:#E2DCD3;
  --paper:#F5F1EA;--card:#FFFFFF;--well:#EFE9DF;
  --sun:#FFD23F;--black:#141414;--on-black:#F4EFE7;--hero:#D50F25;--ok:#1E8E3E;--zap:#1FAF54;
  --disp:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:Barlow,'Helvetica Neue',Arial,sans-serif;
  --r:16px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme:dark;--red:#FF2E45;--red-d:#D50F25;--red-soft:#3A1418;
  --ink:#F4EFE7;--mut:#ABA49A;--line:#34302B;--paper:#121110;--card:#1D1B19;--well:#262320;--black:#000;--hero:#B80C1F}}
:root[data-theme="dark"]{color-scheme:dark;--red:#FF2E45;--red-d:#D50F25;--red-soft:#3A1418;
  --ink:#F4EFE7;--mut:#ABA49A;--line:#34302B;--paper:#121110;--card:#1D1B19;--well:#262320;--black:#000;--hero:#B80C1F}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
html,body{margin:0;background:var(--paper);color:var(--ink);font:500 17px/1.45 var(--body)}
body{overflow-x:hidden}
a{color:var(--red);text-underline-offset:2px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.eyebrow{font:800 12px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.sec{font:900 30px/1 var(--disp);text-transform:uppercase;letter-spacing:.005em;margin:40px 0 14px}
.page-tt{font:900 clamp(36px,7vw,56px)/.92 var(--disp);text-transform:uppercase;margin:10px 0 14px;text-wrap:balance}
.page-lead{color:var(--mut);max-width:620px;margin:-4px 0 18px}

/* topo */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:var(--black);color:#fff}
.brand{flex:1;display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
  font:800 21px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em;min-width:0}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand b{color:var(--sun);font-weight:900}
.star{width:22px;height:22px;flex:0 0 auto;fill:var(--red)}
.top .star{fill:var(--red)}
.top-btn{flex:0 0 auto;background:var(--red);color:#fff;border:0;border-radius:999px;padding:8px 14px;
  font:700 14px var(--body);cursor:pointer}
.top-btn:hover{background:var(--red-d)}
.top-btn .lg{text-transform:none}
@media (max-width:440px){.top-btn .lg{display:none}.top-btn{text-transform:capitalize}.brand{font-size:19px}}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--hero);color:#fff}
.hero-star{position:absolute;right:-12vw;top:-6vw;width:min(78vw,640px);fill:#fff;opacity:.09;transform:rotate(14deg);pointer-events:none}
.hero-in{position:relative;max-width:960px;margin:0 auto;padding:34px 16px 30px}
.hero-eyebrow{display:inline-block;font:800 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  background:var(--black);color:#fff;padding:8px 10px;border-radius:4px}
h1{font:900 clamp(56px,14vw,132px)/.84 var(--disp);text-transform:uppercase;letter-spacing:-.01em;margin:18px 0 18px}
h1 b{color:var(--sun);font-weight:900}
.hero-lead{font-size:clamp(17px,2.3vw,20px);font-weight:600;max-width:640px;margin:0 0 24px;color:#fff;opacity:.94}
.count{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.count .cn{background:#fff;color:var(--ink);border-radius:12px;padding:10px 14px 9px;min-width:84px}
.count .cn b{display:block;font:900 46px/.9 var(--disp);color:var(--red-d)}
.count .cn span{font:800 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#6B655E}
.count .cn-tx{align-self:center;font:800 15px/1.2 var(--body);max-width:200px}

/* faixa */
.ticker{background:var(--black);color:#fff;overflow:hidden;white-space:nowrap;border-top:3px solid var(--sun)}
.ticker-in{display:inline-block;padding:11px 0;font:900 20px/1 var(--disp);text-transform:uppercase;letter-spacing:.04em;
  animation:tick 38s linear infinite}
.ticker-in i{font-style:normal;color:var(--sun);margin:0 16px}
@keyframes tick{to{transform:translateX(-50%)}}

/* escolhas */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;cursor:pointer;
  border:2px solid transparent;border-radius:var(--r);padding:20px 20px 18px;min-height:210px;
  transition:transform .15s ease,box-shadow .15s ease}
.choice:hover{transform:translateY(-3px);box-shadow:0 10px 0 -2px var(--black)}
.c-num{font:900 18px/1 var(--disp);opacity:.6}
.c-tt{font:900 clamp(30px,4.4vw,40px)/.92 var(--disp);text-transform:uppercase;text-wrap:balance}
.c-tx{font-size:15px;line-height:1.4;opacity:.9;max-width:360px}
.c-go{margin-top:auto;padding-top:8px;font:800 14px var(--body);letter-spacing:.06em;text-transform:uppercase}
.c-go i{font-style:normal;display:inline-block;transition:transform .15s}
.choice:hover .c-go i{transform:translateX(4px)}
.c-red{background:var(--red);color:#fff}
.c-ink{background:var(--black);color:var(--on-black);border-color:var(--line)}
.c-line{background:var(--card);border-color:var(--ink);color:var(--ink)}
.c-line .c-go{color:var(--red)}
.c-wide{grid-column:1/-1;min-height:0}
.c-wide .c-tx{max-width:560px}
@media (max-width:600px){.choices{grid-template-columns:1fr}.choice{min-height:0}}

/* patente */
.rank{margin-top:16px;background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:18px 20px;
  display:grid;grid-template-columns:auto 1fr auto;gap:6px 18px;align-items:center}
.rank-pts b{display:block;font:900 54px/.85 var(--disp);color:var(--red)}
.rank-pts span{font:800 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.rank-nm{font:900 28px/1 var(--disp);text-transform:uppercase}
.rank-sub{font-size:14px;color:var(--mut);margin-top:4px}
.rank-bar{grid-column:1/-1;height:10px;border-radius:99px;background:var(--well);overflow:hidden;margin-top:8px}
.rank-bar i{display:block;height:100%;background:var(--red);border-radius:99px;transition:width .4s ease}
.streak{justify-self:end;text-align:center;font:800 12px/1.1 var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.streak b{display:block;font:900 30px/1 var(--disp);color:var(--ink)}
.streak.on b{color:var(--red)}
@media (max-width:480px){.rank{grid-template-columns:auto 1fr}.streak{grid-column:1/-1;justify-self:start;text-align:left;display:flex;gap:8px;align-items:baseline}.streak b{display:inline}}

/* hoje */
.today-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.link{background:none;border:0;color:var(--red);font:700 15px var(--body);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.tl{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--card);border:2px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;transition:border-color .15s}
.tl:hover{border-color:var(--ink)}
.tl-h{font:900 30px/1 var(--disp);color:var(--red)}
.tl-tt{font-weight:800;line-height:1.2;display:block}
.tl-sub{font-size:13px;color:var(--mut)}
.tl-ck{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:900;color:transparent}
.tl.done .tl-ck{background:var(--ok);border-color:var(--ok);color:#fff}
.tl.done .tl-tt{text-decoration:line-through;text-decoration-thickness:2px;opacity:.6}
.today-note{font-size:14px;color:var(--mut);margin:-6px 0 12px}

/* recrutar */
.recruit{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;
  background:var(--sun);color:#141414;border-radius:var(--r);padding:20px}
.recruit .eyebrow{color:#141414;opacity:.7}
.recruit-tt{font:900 clamp(28px,4.4vw,38px)/.95 var(--disp);text-transform:uppercase;margin:6px 0 0}
.recruit-act{display:flex;gap:10px;flex-wrap:wrap}
.recruit .btn-ghost{color:#141414;border-color:#141414}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;background:var(--red);color:#fff;border:2px solid var(--red);
  border-radius:10px;padding:10px 16px;font:800 15px var(--body);text-decoration:none;cursor:pointer;transition:background .15s,transform .1s}
.btn:hover{background:var(--red-d);border-color:var(--red-d)}
.btn:active{transform:scale(.97)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-zap{background:var(--zap);border-color:var(--zap)}
.btn-zap:hover{background:#178F44;border-color:#178F44}
.btn-done{background:var(--ok);border-color:var(--ok);cursor:default}
.btn-done:hover{background:var(--ok);border-color:var(--ok)}
.btn-sm{min-height:40px;padding:8px 12px;font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}

/* acordeões */
.acc{margin-top:32px;border-top:2px solid var(--ink)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 2px;font:800 18px/1.2 var(--body)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font:900 28px/1 var(--disp);color:var(--red);transition:transform .2s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc-bd{padding:0 2px 16px;color:var(--mut)}
.acc-bd p{margin:0 0 10px}
.rules{counter-reset:r;list-style:none;margin:0}
.rules li{counter-increment:r;position:relative;padding-left:40px;margin-bottom:12px;color:var(--ink)}
.rules li::before{content:counter(r);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font:900 16px/1 var(--disp)}
#chs .acc-bd ol{color:var(--ink);padding-left:20px;margin:8px 0 0}
#chs .acc-bd li{margin-bottom:6px}
#chs summary small{display:block;font:600 14px var(--body);color:var(--mut);margin-top:2px}

/* missões */
.back{background:none;border:0;color:var(--red);font:800 15px var(--body);cursor:pointer;padding:18px 0 4px}
.mode{display:inline-flex;background:var(--well);border-radius:999px;padding:4px;margin-top:6px}
.mode button{border:0;background:transparent;border-radius:999px;padding:8px 16px;font:800 14px var(--body);cursor:pointer;color:var(--mut)}
.mode button.on{background:var(--ink);color:var(--paper)}
.days{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none;scroll-snap-type:x proximity}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;align-items:center;width:56px;padding:8px 0 7px;
  border:2px solid var(--line);background:var(--card);border-radius:12px;cursor:pointer}
.day small{font:800 11px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.day b{font:900 26px/1 var(--disp);margin-top:3px}
.day.today::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.day.full{border-color:var(--ok)}
.day.full b{color:var(--ok)}
.day.on{background:var(--ink);border-color:var(--ink)}
.day.on small,.day.on b{color:var(--paper)}
.prog{display:flex;align-items:center;gap:12px;margin-top:10px;font:800 13px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.prog-bar{flex:1;height:8px;border-radius:99px;background:var(--well);overflow:hidden}
.prog-bar i{display:block;height:100%;width:0;background:var(--ok);transition:width .4s ease}

#misList{margin-top:20px}
.mis{background:var(--card);border:2px solid var(--line);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.mis.done{border-color:var(--ok)}
.mis-hd{display:flex;gap:14px;align-items:center;padding:16px 18px 0}
.mis-time{flex:0 0 auto;width:66px;height:66px;border-radius:12px;background:var(--red);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mis.done .mis-time{background:var(--ok)}
.mis-time b{font:900 30px/.9 var(--disp)}
.mis-time span{font:800 10px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;margin-top:3px;opacity:.9}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--well);border-radius:999px;padding:4px 10px;font:700 13px/1.2 var(--body)}
.pill.r{background:var(--red-soft);color:var(--red)}
.mis-bd{padding:12px 18px 18px}
.mis h3{font:900 clamp(26px,4vw,32px)/.98 var(--disp);text-transform:uppercase;margin:0 0 6px}
.lab{font:800 11px/1 var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--mut);margin:18px 0 6px}
.mis p{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;background:var(--well);border-radius:6px;padding:3px 9px;font-size:14px;color:var(--ink)}
.tag.m{color:var(--mut)}
.poster{position:relative;background:var(--red);color:#fff;border-radius:12px;padding:18px 18px 16px;margin-top:4px;overflow:hidden}
.poster::after{content:"";position:absolute;right:-26px;bottom:-30px;width:120px;height:120px;opacity:.12;background:#fff;
  clip-path:polygon(50% 0,63% 36%,100% 38%,71% 61%,81% 100%,50% 77%,19% 100%,29% 61%,0 38%,37% 36%)}
.poster-k{font:800 11px/1 var(--body);text-transform:uppercase;letter-spacing:.12em;opacity:.8}
.poster-f{font:900 clamp(26px,4.6vw,36px)/.95 var(--disp);text-transform:uppercase;margin:8px 0 10px;text-wrap:balance}
.poster-d{font-size:15px;line-height:1.4;opacity:.95;margin:0}
.poster a{color:#fff;font-weight:700}
.src{font-size:14px;margin-top:8px;line-height:1.5}
.fact{background:var(--well);border-radius:12px;padding:14px;margin-top:8px;font-size:15px}
.fact b{font-weight:800}
.fact.alt{background:transparent;border:2px dashed var(--line)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:2px 0 8px 38px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;border:2px solid var(--red);color:var(--red);
  display:grid;place-items:center;font:900 15px/1 var(--disp)}
.warn{background:var(--red-soft);border-radius:12px;padding:12px 14px;font-size:14px;margin-top:8px;color:var(--ink)}
.dont{font-size:15px;color:var(--mut)}
.adj{font-size:15px}
.quick{font:800 20px/1.25 var(--body);margin:2px 0 8px}
.mis-act{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px;border-top:2px solid var(--line);background:var(--paper)}
.mis.done .mis-act{border-top-color:var(--ok)}

/* guia */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.chip{border:2px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;font:700 14px var(--body);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media (max-width:360px){.ggrid{grid-template-columns:1fr 1fr}.gc{padding:12px}}
.gc{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;cursor:pointer;background:var(--card);border:2px solid var(--line);
  border-radius:14px;padding:14px;min-height:128px;transition:border-color .15s,transform .15s}
.gc:hover{border-color:var(--ink);transform:translateY(-2px)}
.gc.on{border-color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
.gc-ic{width:44px;height:44px;border-radius:50%;background:var(--well);display:grid;place-items:center;font-size:24px}
.gc b{font:900 21px/.98 var(--disp);text-transform:uppercase}
.gc small{margin-top:auto;font:800 11px/1.2 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--red)}
.gp{margin-top:18px;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);overflow:hidden}
.gp-hd{background:var(--black);color:var(--on-black);padding:18px 20px;display:flex;gap:16px;align-items:center}
.gp-hd .gc-ic{background:var(--red);width:60px;height:60px;font-size:32px;flex:0 0 auto}
.gp-hd .eyebrow{color:var(--sun)}
.gp-hd h3{font:900 clamp(30px,5vw,42px)/.92 var(--disp);text-transform:uppercase;margin:4px 0 0}
.gp-bd{padding:6px 20px 20px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.kv div{background:var(--well);border-radius:12px;padding:14px}
.kv .lab{margin:0 0 6px}
.kv p{margin:0;font-size:15px}
.kv .bad{background:var(--red-soft)}
.kv .bad .lab{color:var(--red)}
@media (max-width:600px){.kv{grid-template-columns:1fr}}
.topics details{border:2px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--card)}
.topics summary{list-style:none;cursor:pointer;padding:12px 14px;font-weight:600;display:flex;gap:10px;align-items:flex-start}
.topics summary::-webkit-details-marker{display:none}
.topics summary::before{content:"+";font:900 22px/1 var(--disp);color:var(--red);flex:0 0 auto;width:14px}
.topics details[open] summary::before{content:"–"}
.topics summary b{font-weight:800}
.topics .fact{margin:0 14px 12px}
.talk{counter-reset:t;list-style:none;padding:0;margin:0}
.talk li{counter-increment:t;display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.talk li:last-child{border-bottom:0}
.talk li::before{content:counter(t);flex:0 0 auto;font:900 30px/.9 var(--disp);color:var(--red);width:22px}
.data p{font-size:15px;margin:0 0 6px;padding-left:16px;position:relative}
.data p::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--red);border-radius:2px}

/* como funciona */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.how-it{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:18px}
.how-n{display:block;font:900 56px/.85 var(--disp);color:var(--red)}
.how-it p{margin:10px 0 0;font-size:15px;color:var(--mut)}
.how-it p b{color:var(--ink)}
@media (max-width:720px){.how{grid-template-columns:1fr}}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.slot{background:var(--black);color:var(--on-black);border-radius:14px;padding:16px}
.slot b{display:block;font:900 44px/.9 var(--disp);color:var(--sun)}
.slot span{display:block;font:800 12px/1 var(--body);text-transform:uppercase;letter-spacing:.1em;margin:6px 0 8px}
.slot p{margin:0;font-size:14px;opacity:.85}
@media (max-width:720px){.slots{grid-template-columns:1fr 1fr}}

/* rodapé */
.foot{margin-top:56px;padding:28px 0 calc(40px + env(safe-area-inset-bottom));border-top:2px solid var(--line)}
.foot .wrap{display:flex;gap:12px;align-items:flex-start}
.foot p{margin:0;font-size:14px;color:var(--mut);max-width:620px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:50;transform:translate(-50%,140%);
  background:var(--black);color:var(--on-black);border-radius:999px;padding:12px 20px;font:800 15px var(--body);
  box-shadow:0 8px 30px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.2,.9,.3,1.2),opacity .2s,visibility .3s;max-width:calc(100% - 32px);text-align:center;opacity:0;visibility:hidden}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible}
.toast b{color:var(--sun)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .ticker-in{transform:none}
}