/* ============================================================
   Certifa — Simulador do Exame de Agente de Futebol FIFA
   Design system + layout. Sem dependencias externas.
   ============================================================ */

/* ---------- Tokens (light e o default completo) ---------- */
:root{
  --bg:#f4f6f8;
  --bg-elev:#ffffff;
  --surface:#ffffff;
  --surface-2:#eef1f5;
  --line:#dfe4ea;
  --line-strong:#c6cfd8;
  --ink:#111a24;
  --ink-2:#3b4855;
  --muted:#6b7784;
  --brand:#0b6b4f;
  --brand-ink:#ffffff;
  --brand-soft:#e3f2ec;
  --brand-line:#9dcfbc;
  --accent:#b8860b;
  --accent-soft:#fbf2dd;
  --ok:#137a44;
  --ok-soft:#e4f5ea;
  --bad:#b3261e;
  --bad-soft:#fdeceb;
  --warn:#a45b00;
  --warn-soft:#fdf1e0;
  --info:#1a5fb4;
  --info-soft:#e8f0fb;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --sh-1:0 1px 2px rgba(16,24,32,.06), 0 1px 3px rgba(16,24,32,.05);
  --sh-2:0 4px 12px rgba(16,24,32,.08), 0 2px 4px rgba(16,24,32,.05);
  --sh-3:0 18px 44px rgba(16,24,32,.16), 0 4px 12px rgba(16,24,32,.09);

  --ff:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ff-num:"SF Mono",ui-monospace,"Cascadia Mono","Roboto Mono",Consolas,monospace;

  --topbar-h:60px;
  --wrap:1220px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a1017;
    --bg-elev:#101a24;
    --surface:#111c27;
    --surface-2:#18242f;
    --line:#233240;
    --line-strong:#33475a;
    --ink:#e8eef4;
    --ink-2:#bfcdda;
    --muted:#8b9cab;
    --brand:#2fbf8f;
    --brand-ink:#04150f;
    --brand-soft:#0f2c23;
    --brand-line:#1f6b52;
    --accent:#e0b341;
    --accent-soft:#2a2211;
    --ok:#3fbe74;
    --ok-soft:#0f2a1c;
    --bad:#f2726a;
    --bad-soft:#2c1413;
    --warn:#e39a3c;
    --warn-soft:#2b1f0f;
    --info:#63a4f5;
    --info-soft:#0f1e33;
    --sh-1:0 1px 2px rgba(0,0,0,.5);
    --sh-2:0 6px 18px rgba(0,0,0,.45);
    --sh-3:0 22px 50px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0a1017; --bg-elev:#101a24; --surface:#111c27; --surface-2:#18242f;
  --line:#233240; --line-strong:#33475a; --ink:#e8eef4; --ink-2:#bfcdda; --muted:#8b9cab;
  --brand:#2fbf8f; --brand-ink:#04150f; --brand-soft:#0f2c23; --brand-line:#1f6b52;
  --accent:#e0b341; --accent-soft:#2a2211;
  --ok:#3fbe74; --ok-soft:#0f2a1c; --bad:#f2726a; --bad-soft:#2c1413;
  --warn:#e39a3c; --warn-soft:#2b1f0f; --info:#63a4f5; --info-soft:#0f1e33;
  --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 6px 18px rgba(0,0,0,.45); --sh-3:0 22px 50px rgba(0,0,0,.6);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 var(--ff);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.22; letter-spacing:-.018em; font-weight:700}
h1{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h2{font-size:clamp(1.28rem,2.2vw,1.6rem)}
h3{font-size:1.06rem}
h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700}
p{margin:0 0 1em}
a{color:var(--brand); text-decoration-thickness:1px; text-underline-offset:2px}
ul,ol{margin:0 0 1em; padding-left:1.15em}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.eyebrow{font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; color:var(--brand); font-weight:700; margin-bottom:.6em}
.lede{font-size:1.06rem; color:var(--ink-2); max-width:62ch}
.microcopy{font-size:.8rem; color:var(--muted); margin-top:1.1em}
.section-title{margin:2.6rem 0 1rem}
.narrow{max-width:760px; margin-inline:auto}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--brand); color:var(--brand-ink); padding:.6em 1em; z-index:200}
.skip-link:focus{left:8px; top:8px}

/* ---------- Topbar ---------- */
.topbar{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg-elev) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--line)}
.topbar__inner{max-width:var(--wrap); margin-inline:auto; height:var(--topbar-h); padding:0 clamp(12px,3vw,26px);
  display:flex; align-items:center; gap:clamp(10px,2vw,26px)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.brand__mark{width:30px; height:30px; color:var(--brand)}
.brand__text{display:flex; flex-direction:column; line-height:1.05}
.brand__text b{font-size:1.06rem; letter-spacing:-.02em}
.brand__text em{font-style:normal; font-size:.63rem; text-transform:uppercase; letter-spacing:.11em; color:var(--muted)}

.mainnav{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap}
.mainnav a{padding:.5em .78em; border-radius:var(--r-sm); text-decoration:none; color:var(--ink-2);
  font-size:.9rem; font-weight:500; white-space:nowrap}
.mainnav a:hover{background:var(--surface-2); color:var(--ink)}
.mainnav a.is-active{background:var(--brand-soft); color:var(--brand); font-weight:650}

.topbar__tools{display:flex; align-items:center; gap:8px; margin-left:auto}
.langswitch{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:2px}
.langswitch button{border:0; background:none; padding:.32em .62em; border-radius:999px; font-size:.74rem;
  font-weight:700; letter-spacing:.03em; color:var(--muted)}
.langswitch button:hover{color:var(--ink)}
.langswitch button.is-on{background:var(--brand); color:var(--brand-ink)}
.iconbtn{width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line);
  background:var(--surface); border-radius:var(--r-sm); color:var(--ink-2)}
.iconbtn:hover{background:var(--surface-2); color:var(--ink)}
.iconbtn svg{width:18px; height:18px}
.iconbtn--sm{width:28px; height:28px; border:0; background:none}
.ico-moon{display:none} :root[data-theme="dark"] .ico-sun{display:none} :root[data-theme="dark"] .ico-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ico-sun{display:none} :root:not([data-theme="light"]) .ico-moon{display:block}}
.burger{display:none}

@media (max-width:960px){
  .burger{display:grid}
  .mainnav{position:fixed; inset:var(--topbar-h) 0 auto 0; flex-direction:column; background:var(--bg-elev);
    border-bottom:1px solid var(--line); padding:10px; gap:2px; box-shadow:var(--sh-2); display:none}
  .mainnav.is-open{display:flex}
  .mainnav a{padding:.7em .9em}
  .brand__text em{display:none}
}
@media (max-width:520px){ .langswitch button{padding:.3em .45em; font-size:.68rem} }

/* ---------- Barra do exame ---------- */
.exambar{border-top:1px solid var(--line); background:var(--surface)}
.exambar__inner{max-width:var(--wrap); margin-inline:auto; padding:.5rem clamp(12px,3vw,26px);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.clock{display:flex; align-items:center; gap:7px; font:700 1.32rem/1 var(--ff-num);
  letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--ink)}
.clock svg{width:19px; height:19px; color:var(--muted)}
.clock.is-warn{color:var(--warn)} .clock.is-warn svg{color:var(--warn)}
.clock.is-crit{color:var(--bad); animation:pulse 1s ease-in-out infinite} .clock.is-crit svg{color:var(--bad)}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.clock.is-crit{animation:none}}
.exambar__meta{display:flex; gap:6px}
.exambar__actions{margin-left:auto; display:flex; gap:6px}
.exambar__progress{height:3px; background:var(--surface-2)}
.exambar__progress i{display:block; height:100%; width:0; background:var(--brand); transition:width .25s ease}
.pill{display:inline-flex; align-items:center; gap:5px; padding:.24em .62em; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); font:600 .8rem/1.5 var(--ff-num); color:var(--ink-2)}
.pill--flag{background:var(--warn-soft); border-color:transparent; color:var(--warn)}
.pill--flag::before{content:"⚑"}

/* ---------- Main ---------- */
.main{max-width:var(--wrap); margin-inline:auto; padding:clamp(20px,4vw,44px) clamp(12px,3vw,26px) 80px}
.view--exam{max-width:none}

/* ---------- Botoes ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; border:1px solid transparent;
  border-radius:var(--r); padding:.62em 1.05em; font-size:.93rem; font-weight:600; text-decoration:none;
  transition:background .14s,border-color .14s,color .14s,transform .06s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand); color:var(--brand-ink)}
.btn--primary:hover{filter:brightness(1.08)}
.btn--outline{border-color:var(--line-strong); background:var(--surface); color:var(--ink)}
.btn--outline:hover{border-color:var(--brand); color:var(--brand)}
.btn--ghost{background:transparent; color:var(--ink-2)}
.btn--ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn--danger{color:var(--bad)} .btn--danger:hover{background:var(--bad-soft)}
.btn--lg{padding:.82em 1.5em; font-size:1rem; border-radius:var(--r-lg)}
.btn--sm{padding:.42em .78em; font-size:.83rem}
.btn[disabled]{opacity:.45; pointer-events:none}
.rowbtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:1.4rem}
.rowbtns--center{justify-content:center; margin-top:2.4rem}

/* ---------- Cards e grids ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(16px,2.4vw,22px); box-shadow:var(--sh-1); margin-bottom:1rem}
.card > :last-child{margin-bottom:0}
.grid{display:grid; gap:14px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.callout{border-left:4px solid var(--brand); background:var(--brand-soft); border-radius:0 var(--r) var(--r) 0;
  padding:14px 18px; margin:1.2rem 0}
.callout strong{display:block; margin-bottom:.25em}
.callout p{margin:0; font-size:.92rem; color:var(--ink-2)}
.callout--warn{border-color:var(--warn); background:var(--warn-soft)}

/* ---------- Hero ---------- */
.hero{display:grid; grid-template-columns:1.35fr .85fr; gap:clamp(18px,3vw,42px); align-items:start;
  margin-bottom:2.6rem}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.hero__text h1{max-width:16ch}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:1.6rem}
.hero__card{background:linear-gradient(150deg,var(--surface),var(--surface-2));
  border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(18px,2.6vw,26px); box-shadow:var(--sh-2)}
.hero__card h2{font-size:.8rem; text-transform:uppercase; letter-spacing:.11em; color:var(--muted)}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin:0 0 1.1rem}
.facts div{min-width:0}
.facts dt{font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.facts dd{margin:0; font:700 1.16rem/1.2 var(--ff-num); color:var(--ink)}
.hero__note{font-size:.83rem; color:var(--ink-2); border-top:1px solid var(--line); padding-top:1rem; margin:0}

/* ---------- Gauge / countdown / attempts ---------- */
.card--stat{text-align:center}
.gauge{position:relative; max-width:190px; margin:0 auto .4rem}
.gauge svg{width:100%; display:block; overflow:visible}
.gauge path{fill:none; stroke-width:11; stroke-linecap:round}
.gauge__bg{stroke:var(--surface-2)}
.gauge__fg{stroke:var(--brand); stroke-dasharray:157; stroke-dashoffset:157; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}
.gauge b{position:absolute; left:0; right:0; bottom:2px; font:700 1.6rem/1 var(--ff-num)}
.countdown{display:flex; gap:8px; justify-content:center; margin:.6rem 0}
.countdown span{flex:1; background:var(--surface-2); border-radius:var(--r); padding:.5rem .2rem;
  font:700 1.34rem/1.1 var(--ff-num); text-align:center; position:relative}
.countdown span::after{content:attr(data-unit); display:block; font:600 .6rem/1.6 var(--ff);
  text-transform:uppercase; letter-spacing:.09em; color:var(--muted)}
.attempts{list-style:none; padding:0; margin:0}
.attempts li{display:flex; align-items:center; gap:10px; padding:.5em 0; border-bottom:1px solid var(--line); font-size:.9rem}
.attempts li:last-child{border:0}
.attempts b{font-family:var(--ff-num)}
.attempts .tagres{margin-left:auto; font-size:.72rem; font-weight:700; padding:.16em .55em; border-radius:999px}
.tagres--pass{background:var(--ok-soft); color:var(--ok)}
.tagres--fail{background:var(--bad-soft); color:var(--bad)}

/* ---------- Barras por modulo ---------- */
.modules{display:grid; gap:9px}
.modbar{display:grid; grid-template-columns:minmax(140px,1.15fr) 3fr auto; gap:12px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px}
.modbar__name{font-size:.9rem; font-weight:600; min-width:0}
.modbar__name small{display:block; font-weight:400; color:var(--muted); font-size:.74rem}
.modbar__track{height:9px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.modbar__fill{height:100%; background:var(--brand); border-radius:999px; transition:width .6s ease}
.modbar__fill.is-low{background:var(--bad)} .modbar__fill.is-mid{background:var(--warn)}
.modbar__val{font:700 .88rem/1 var(--ff-num); color:var(--ink-2); min-width:60px; text-align:right}
@media (max-width:620px){.modbar{grid-template-columns:1fr auto; gap:6px} .modbar__track{grid-column:1/-1}}

/* ---------- Chips / switches / campos ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chips--wrap{gap:7px}
.chips button{border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2);
  border-radius:999px; padding:.44em .95em; font-size:.87rem; font-weight:550}
.chips button:hover{border-color:var(--brand); color:var(--brand)}
.chips button.is-on{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.chips--sm button{padding:.3em .72em; font-size:.8rem}
.switch{display:flex; align-items:center; gap:11px; padding:.5em 0; cursor:pointer}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch span{flex:0 0 auto; width:40px; height:23px; border-radius:999px; background:var(--line-strong);
  position:relative; transition:background .18s}
.switch span::after{content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%;
  background:#fff; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + span{background:var(--brand)}
.switch input:checked + span::after{transform:translateX(17px)}
.switch input:focus-visible + span{outline:2.5px solid var(--brand); outline-offset:2px}
.switch b{font-weight:500; font-size:.92rem}
.field{display:block; margin-bottom:.85rem}
.field span{display:block; font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:.3em}
.field input,.field select{width:100%; padding:.58em .75em; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); background:var(--bg-elev); font-family:var(--ff-num)}
.field select{font-family:var(--ff)}
.field input:focus,.field select:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-soft)}

/* ---------- Layout do simulado ---------- */
.examlayout{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:26px;
  max-width:var(--wrap); margin-inline:auto}
@media (max-width:1080px){
  .examlayout{grid-template-columns:1fr}
  .examlayout__side{position:fixed; right:12px; bottom:12px; z-index:70; width:min(300px,92vw); display:none}
  .examlayout__side.is-open{display:block}
}
.examlayout__side{position:sticky; top:calc(var(--topbar-h) + 56px); align-self:start; max-height:calc(100vh - var(--topbar-h) - 76px); overflow:auto}
.side-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; box-shadow:var(--sh-2)}
.qnav{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:.6rem 0 .9rem}
.qnav button{aspect-ratio:1; border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--r-sm);
  font:600 .82rem/1 var(--ff-num); color:var(--ink-2); display:grid; place-items:center; position:relative}
.qnav button:hover{border-color:var(--brand)}
.qnav button.is-done{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand)}
.qnav button.is-flag::after{content:""; position:absolute; top:2px; right:2px; width:6px; height:6px;
  border-radius:50%; background:var(--warn)}
.qnav button.is-current{outline:2px solid var(--brand); outline-offset:1px}
.legend{list-style:none; padding:0; margin:0; display:grid; gap:5px; font-size:.76rem; color:var(--muted)}
.legend li{display:flex; align-items:center; gap:7px}
.dot{width:10px; height:10px; border-radius:3px; border:1px solid var(--line-strong); background:var(--surface)}
.dot--done{background:var(--brand-soft); border-color:var(--brand-line)}
.dot--flag{background:var(--warn)}

.exam-intro{margin-bottom:16px}
.exam-foot{margin-top:26px; text-align:center}

/* ---------- Questoes ---------- */
.qlist{display:grid; gap:16px}
.q{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(15px,2.2vw,22px); box-shadow:var(--sh-1); scroll-margin-top:calc(var(--topbar-h) + 70px)}
.q.is-flagged{border-color:var(--warn); box-shadow:0 0 0 1px var(--warn)}
.q__head{display:flex; align-items:flex-start; gap:11px; margin-bottom:.85rem; flex-wrap:wrap}
.q__num{flex:0 0 auto; width:30px; height:30px; border-radius:9px; background:var(--brand); color:var(--brand-ink);
  display:grid; place-items:center; font:700 .88rem/1 var(--ff-num)}
.q__badges{display:flex; gap:6px; flex-wrap:wrap; align-items:center; flex:1 1 auto; min-width:0}
.badge{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.055em;
  padding:.26em .6em; border-radius:999px; background:var(--surface-2); color:var(--muted); white-space:nowrap}
.badge--multi{background:var(--info-soft); color:var(--info)}
.badge--mod{background:var(--brand-soft); color:var(--brand)}
.badge--d1{background:var(--ok-soft); color:var(--ok)}
.badge--d2{background:var(--warn-soft); color:var(--warn)}
.badge--d3{background:var(--bad-soft); color:var(--bad)}
.q__tools{display:flex; gap:4px; margin-left:auto}
.qtool{border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm); padding:.3em .6em;
  font-size:.76rem; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:4px}
.qtool:hover{border-color:var(--brand); color:var(--brand)}
.qtool.is-on{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}
.qtool.is-on-t{background:var(--info-soft); border-color:var(--info); color:var(--info)}
.q__stem{font-size:1.01rem; line-height:1.55; margin-bottom:1rem; color:var(--ink)}
.q__stem strong{font-weight:700}

.opts{display:grid; gap:8px; list-style:none; padding:0; margin:0}
.opt{display:flex; gap:11px; align-items:flex-start; padding:.7em .9em; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg-elev); cursor:pointer; transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--brand-line); background:var(--brand-soft)}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt__box{flex:0 0 auto; width:21px; height:21px; border:2px solid var(--line-strong); border-radius:6px;
  display:grid; place-items:center; margin-top:1px; transition:background .12s,border-color .12s}
.opt__box::after{content:""; width:10px; height:6px; border-left:2.4px solid #fff; border-bottom:2.4px solid #fff;
  transform:rotate(-45deg) scale(0); transition:transform .14s; margin-top:-3px}
.opt input:checked ~ .opt__box{background:var(--brand); border-color:var(--brand)}
.opt input:checked ~ .opt__box::after{transform:rotate(-45deg) scale(1)}
.opt input:focus-visible ~ .opt__box{outline:2.5px solid var(--brand); outline-offset:2px}
.opt:has(input:checked){border-color:var(--brand); background:var(--brand-soft)}
.opt__key{flex:0 0 auto; font:700 .8rem/1.5 var(--ff-num); color:var(--muted); width:1.1em}
.opt__text{flex:1 1 auto; min-width:0; font-size:.95rem}

/* painel de traducao */
.trans{margin-top:.9rem; border-top:1px dashed var(--line-strong); padding-top:.9rem}
.trans__label{font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--info); margin-bottom:.5em; display:flex; align-items:center; gap:6px}
.trans__label::before{content:""; width:14px; height:2px; background:var(--info); border-radius:2px}
.trans__stem{font-size:.94rem; color:var(--ink-2); margin-bottom:.6em}
.trans__opts{list-style:none; padding:0; margin:0; display:grid; gap:4px; font-size:.88rem; color:var(--ink-2)}
.trans__opts li{display:flex; gap:9px}
.trans__opts b{font-family:var(--ff-num); color:var(--muted); font-weight:700}

/* ---------- Revisao / gabarito ---------- */
.qlist--review .q{border-left:4px solid var(--line-strong)}
.q.is-right{border-left-color:var(--ok)}
.q.is-wrong{border-left-color:var(--bad)}
.q.is-blank{border-left-color:var(--muted)}
.verdict{display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700;
  padding:.26em .65em; border-radius:999px; text-transform:uppercase; letter-spacing:.05em}
.verdict--right{background:var(--ok-soft); color:var(--ok)}
.verdict--wrong{background:var(--bad-soft); color:var(--bad)}
.verdict--blank{background:var(--surface-2); color:var(--muted)}

.ropt{display:flex; gap:11px; align-items:flex-start; padding:.7em .9em; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg-elev); margin-bottom:8px}
.ropt--correct{border-color:var(--ok); background:var(--ok-soft)}
.ropt--missed{border-color:var(--ok); background:var(--ok-soft); border-style:dashed}
.ropt--wrong{border-color:var(--bad); background:var(--bad-soft)}
.ropt__mark{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.8rem; font-weight:800; margin-top:1px}
.ropt--correct .ropt__mark,.ropt--missed .ropt__mark{background:var(--ok); color:#fff}
.ropt--wrong .ropt__mark{background:var(--bad); color:#fff}
.ropt--neutral .ropt__mark{background:var(--surface-2); color:var(--muted)}
.ropt__body{flex:1 1 auto; min-width:0}
.ropt__text{font-size:.94rem}
.ropt__why{font-size:.85rem; color:var(--ink-2); margin-top:.3em}
.ropt__tag{font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:.14em .5em; border-radius:999px; margin-left:.4em; vertical-align:.1em}
.ropt__tag--you{background:var(--info-soft); color:var(--info)}
.ropt__tag--missed{background:var(--warn-soft); color:var(--warn)}

.explain{margin-top:1rem; background:var(--surface-2); border-radius:var(--r); padding:14px 16px}
.explain h5{margin:0 0 .4em; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.explain p{margin:0 0 .7em; font-size:.93rem; color:var(--ink-2)}
.explain p:last-child{margin:0}
.cite{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.8rem}
.cite a,.cite span{background:var(--bg-elev); border:1px solid var(--line-strong); border-radius:999px;
  padding:.2em .68em; text-decoration:none; color:var(--ink-2); font-family:var(--ff-num); font-size:.76rem}
.cite a:hover{border-color:var(--brand); color:var(--brand)}

/* ---------- Resultado ---------- */
.result-head{background:linear-gradient(150deg,var(--surface),var(--surface-2)); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(20px,3.4vw,36px); margin-bottom:20px; box-shadow:var(--sh-2);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,38px); align-items:center}
@media (max-width:720px){.result-head{grid-template-columns:1fr; text-align:center; justify-items:center}}
.scorering{position:relative; width:158px; height:158px; flex:0 0 auto}
.scorering svg{transform:rotate(-90deg); width:100%; height:100%}
.scorering circle{fill:none; stroke-width:13; stroke-linecap:round}
.scorering .ring-bg{stroke:var(--surface-2)}
.scorering .ring-fg{stroke:var(--ok); stroke-dasharray:408; stroke-dashoffset:408; transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
.scorering.is-fail .ring-fg{stroke:var(--bad)}
.scorering__mid{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.scorering__mid b{font:700 2.5rem/1 var(--ff-num)}
.scorering__mid small{font-size:.76rem; color:var(--muted)}
.result-verdict{font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.25em}
.result-verdict.is-pass{color:var(--ok)} .result-verdict.is-fail{color:var(--bad)}
.result-meta{display:flex; gap:10px 22px; flex-wrap:wrap; margin-top:1rem}
.result-meta div{min-width:88px}
.result-meta dt{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.result-meta dd{margin:0; font:700 1.06rem/1.3 var(--ff-num)}
.review-toolbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:2.2rem 0 1rem}
.review-toolbar h2{margin:0}
.review-toolbar .chips{margin-left:auto}

/* ---------- Tabela e tiles ---------- */
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px}
.tile b{display:block; font:700 1.75rem/1.1 var(--ff-num); margin-bottom:.12em}
.tile span{font-size:.8rem; color:var(--muted)}
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface)}
.table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px}
.table th,.table td{padding:.7em .9em; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
.table th{font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700}
.table tbody tr:last-child td{border-bottom:0}
.table td:nth-child(2),.table td:nth-child(3),.table td:nth-child(4){font-family:var(--ff-num)}
.taglist{display:flex; flex-wrap:wrap; gap:8px}
.taglist span{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.34em .8em;
  font-size:.82rem; display:inline-flex; gap:7px; align-items:center}
.taglist b{color:var(--bad); font-family:var(--ff-num)}
.deckstats{display:flex; gap:12px; flex-wrap:wrap; margin:1rem 0}
.deckstats div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; flex:1 1 120px}
.deckstats b{display:block; font:700 1.5rem/1.1 var(--ff-num)}
.deckstats span{font-size:.76rem; color:var(--muted)}

/* ---------- Documentos ---------- */
.doccard{display:flex; flex-direction:column; gap:.5rem}
.doccard__top{display:flex; align-items:center; gap:10px}
.doccard__w{margin-left:auto; font:700 .8rem/1 var(--ff-num); color:var(--brand); background:var(--brand-soft);
  padding:.32em .6em; border-radius:999px}
.doccard ul{margin:.2rem 0 .6rem; padding-left:1.1em; font-size:.88rem; color:var(--ink-2)}
.doccard ul li{margin-bottom:.2em}

/* ---------- Calculadora ---------- */
.calc{position:fixed; right:16px; bottom:78px; z-index:90; width:min(330px,calc(100vw - 24px));
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); overflow:hidden}
.calc__head{display:flex; align-items:center; gap:6px; padding:8px 8px 8px 10px; border-bottom:1px solid var(--line);
  background:var(--surface-2)}
.calc__tabs{display:flex; gap:3px; flex:1 1 auto}
.calc__tabs button{border:0; background:none; padding:.34em .6em; border-radius:var(--r-sm);
  font-size:.78rem; font-weight:650; color:var(--muted)}
.calc__tabs button.is-on{background:var(--brand); color:var(--brand-ink)}
.calc__pane{padding:12px}
.calc__screen{display:block; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.5em .7em; font:700 1.75rem/1.25 var(--ff-num); text-align:right; overflow-x:auto; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.calc__tape{min-height:1.1em; font:400 .74rem/1.5 var(--ff-num); color:var(--muted); text-align:right; padding:.25em .2em}
.calc__keys{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.k{border:1px solid var(--line); background:var(--bg-elev); border-radius:var(--r-sm); padding:.62em 0;
  font:600 1.02rem/1 var(--ff-num)}
.k:hover{background:var(--surface-2)}
.k--op{background:var(--surface-2); color:var(--brand); font-weight:700}
.k--fn{font-size:.86rem; color:var(--muted)}
.k--eq{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.calc__hint{font-size:.76rem; color:var(--muted); margin-bottom:.9rem; line-height:1.45}
.calc__foot{font-size:.7rem; color:var(--muted); margin:.7rem 0 0; line-height:1.45}
.calc__out{background:var(--brand-soft); border-radius:var(--r); padding:11px 13px; font-size:.84rem}
.calc__out .big{font:700 1.4rem/1.2 var(--ff-num); color:var(--brand); display:block; margin-bottom:.2em}
.calc__out table{width:100%; border-collapse:collapse; margin-top:.5em; font-size:.78rem}
.calc__out td{padding:.16em 0; font-family:var(--ff-num)}
.calc__out td:last-child{text-align:right; font-weight:700}
.solyears{border:1px solid var(--line); border-radius:var(--r); padding:9px 11px; margin-bottom:.9rem}
.solyears legend{font-size:.74rem; font-weight:600; color:var(--ink-2); padding:0 .4em}
#solYearsBox{display:grid; grid-template-columns:repeat(6,1fr); gap:4px}
#solYearsBox label{display:grid; place-items:center; gap:1px; font:600 .68rem/1 var(--ff-num);
  border:1px solid var(--line); border-radius:6px; padding:.34em 0; cursor:pointer; color:var(--muted)}
#solYearsBox label:has(input:checked){background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
#solYearsBox input{position:absolute; opacity:0; width:0; height:0}
#solYearsBox small{font-size:.54rem; opacity:.8}
.calcfab{position:fixed; right:16px; bottom:16px; z-index:88; width:50px; height:50px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--brand); box-shadow:var(--sh-2);
  display:grid; place-items:center}
.calcfab svg{width:23px; height:23px}
.calcfab:hover{background:var(--brand); color:var(--brand-ink)}
@media (max-width:520px){ .calc{right:8px; left:8px; width:auto; bottom:72px} }

/* ---------- Modal / toast ---------- */
.modal{position:fixed; inset:0; z-index:120; background:rgba(8,14,20,.62); display:grid; place-items:center;
  padding:18px; backdrop-filter:blur(3px)}
.modal__box{background:var(--surface); border-radius:var(--r-xl); padding:clamp(20px,3vw,30px);
  max-width:520px; width:100%; box-shadow:var(--sh-3); max-height:86vh; overflow:auto}
.modal__box h3{font-size:1.28rem}
.modal__box p{font-size:.94rem; color:var(--ink-2)}
.modal__box ul{font-size:.9rem; color:var(--ink-2)}
.modal__actions{display:flex; gap:10px; justify-content:flex-end; margin-top:1.4rem; flex-wrap:wrap}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:140;
  background:var(--ink); color:var(--bg); padding:.7em 1.2em; border-radius:999px; font-size:.88rem;
  font-weight:600; box-shadow:var(--sh-3); animation:toastin .22s ease}
@keyframes toastin{from{opacity:0; transform:translate(-50%,10px)}}

/* ---------- Impressao ---------- */
@media print{
  .topbar,.foot,.calc,.calcfab,.examlayout__side,.rowbtns,.review-toolbar .chips{display:none !important}
  body{background:#fff}
  .q,.card{break-inside:avoid; box-shadow:none; border-color:#ccc}
}

/* ============================================================
   v2 — paywall, demonstracao e area bloqueada
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* barra de licenca ativa */
.licbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:var(--r-lg);
  padding:14px 18px;margin-bottom:1.6rem;border:1px solid var(--brand-line);background:var(--brand-soft)}
.licbar strong{display:block;color:var(--brand)}
.licbar p{margin:.15em 0 0}
.licbar__acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* itens explicados */
.feats{display:grid;gap:12px;margin-bottom:1.6rem}
.feat{display:grid;grid-template-columns:auto 1fr;gap:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(15px,2.2vw,22px);box-shadow:var(--sh-1)}
.feat__ico{width:34px;height:34px;border-radius:10px;background:var(--brand);color:var(--brand-ink);
  display:grid;place-items:center;font:700 1rem/1 var(--ff-num)}
.feat__body h3{margin-bottom:.35em}
.feat__body p{margin-bottom:.6em;font-size:.95rem;color:var(--ink-2)}
.feat__use{font-size:.9rem;background:var(--surface-2);border-radius:var(--r);padding:.6em .8em;margin:0}
.feat__use b{color:var(--brand)}
@media (max-width:560px){.feat{grid-template-columns:1fr;gap:10px}}

/* demonstracao */
.demofoot{text-align:center;margin-top:1.6rem;padding:22px;border-radius:var(--r-lg);
  background:var(--surface-2);border:1px dashed var(--line-strong)}
.demofoot p{color:var(--ink-2);max-width:56ch;margin:0 auto 1.1em}

/* paywall */
.paywall{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:start}
@media (max-width:860px){.paywall{grid-template-columns:1fr}}
.price,.checkout{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(18px,2.6vw,26px);box-shadow:var(--sh-1)}
.price{background:linear-gradient(150deg,var(--surface),var(--surface-2));border-color:var(--brand-line)}
.price__tag{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:1rem}
.price__cur{font-size:1.05rem;font-weight:600;color:var(--muted)}
.price__tag b{font:700 3.4rem/1 var(--ff-num);color:var(--brand);letter-spacing:-.03em}
.price__tag small{width:100%;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.price__list{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.5em}
.price__list li{display:flex;gap:9px;font-size:.93rem;color:var(--ink-2)}
.price__list li::before{content:"✓";flex:0 0 auto;color:var(--ok);font-weight:800}
.price__note{font-size:.8rem;color:var(--muted);margin:0;border-top:1px solid var(--line);padding-top:.9rem}
.checkout h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.checkout__step2{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
#payArea{display:grid;gap:9px;margin:.9rem 0}
.paybtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  border-radius:var(--r);padding:.8em 1em;font-weight:700;font-size:.95rem;text-decoration:none;
  border:1px solid transparent;transition:filter .14s}
.paybtn:hover{filter:brightness(1.06)}
.paybtn--paypal{background:#ffc439;color:#0a2540}
.paybtn--card{background:var(--ink);color:var(--bg)}
.paybtn svg{width:18px;height:18px}
.payconf{border:1px dashed var(--warn);background:var(--warn-soft);border-radius:var(--r);
  padding:12px 14px;font-size:.84rem;color:var(--ink-2)}
.payconf code{background:var(--bg-elev);padding:.1em .4em;border-radius:4px;font-size:.92em}
.codeform{display:flex;gap:8px;margin-top:.9rem;flex-wrap:wrap}
.codeform input{flex:1 1 190px;min-width:0;padding:.72em .9em;border:2px solid var(--line-strong);
  border-radius:var(--r);background:var(--bg-elev);font:700 1.02rem/1.2 var(--ff-num);
  letter-spacing:.06em;text-transform:uppercase}
.codeform input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.codemsg{margin:.8rem 0 0;padding:.7em .9em;border-radius:var(--r);font-size:.88rem}
.codemsg--erro{background:var(--bad-soft);color:var(--bad)}
.codemsg--ok{background:var(--ok-soft);color:var(--ok)}
.codemsg--info{background:var(--info-soft);color:var(--info)}

/* faq */
.faq{display:grid;gap:8px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:0 16px;overflow:hidden}
.faq summary{cursor:pointer;padding:.9em 0;font-weight:600;font-size:.95rem;list-style:none;
  display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:.9rem}
.faq details[open] summary::before{content:"−"}
.faq p{font-size:.92rem;color:var(--ink-2);margin:0 0 1em;padding-left:30px}

/* area bloqueada */
.lockbox{text-align:center;padding:clamp(30px,6vw,64px) 20px}
.lockbox__ico{width:70px;height:70px;margin:0 auto 1.4rem;border-radius:50%;
  background:var(--surface-2);color:var(--muted);display:grid;place-items:center}
.lockbox__ico svg{width:34px;height:34px}
.lockbox .lede{margin-inline:auto}

/* navegacao bloqueada */
.mainnav a.is-locked{opacity:.55}
.mainnav a.is-locked::after{content:"🔒";font-size:.7em;margin-left:5px;opacity:.75}

/* ---------- v2.1: preço por região, credibilidade, carimbo ---------- */
.price__tag--duplo{gap:22px}
.price__alt{display:flex;flex-direction:column}
.price__alt b{font:700 2.1rem/1 var(--ff-num);color:var(--brand);letter-spacing:-.02em}
.price__alt small{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.paybtn{flex-direction:column;gap:2px;line-height:1.25}
.paybtn__main{font-weight:700}
.paybtn small{font-weight:500;font-size:.74rem;opacity:.78}
.paybtn--brasil{background:var(--brand);color:var(--brand-ink)}
.paybtn--internacional{background:#ffc439;color:#0a2540}
.paynote{font-size:.8rem;color:var(--muted);margin:.4em 0 0;line-height:1.5}
.trust{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.trust h3{font-size:.95rem;margin-bottom:.4em;color:var(--brand)}
.trust p{font-size:.88rem;color:var(--ink-2);margin:0}
.depo{margin:0;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r);padding:16px 18px}
.depo p{font-size:.94rem;color:var(--ink-2);margin:0 0 .8em;font-style:italic}
.depo footer{display:flex;flex-direction:column;font-size:.82rem}
.depo footer b{color:var(--ink)}
.depo footer span{color:var(--muted)}
.licstamp{font-size:.74rem;color:var(--muted);border:1px dashed var(--line-strong);border-radius:var(--r);
  padding:.5em .8em;display:inline-block;margin:0 0 .8em}
@media print{.licstamp{display:block !important;border-color:#999}}

/* ---------- v2.2: pagamento por Pix ---------- */
.pixbox{border:1px solid var(--brand-line);background:var(--brand-soft);border-radius:var(--r-lg);padding:16px}
.pixbox__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pixbox__tag{background:#32BCAD;color:#fff;font:800 .74rem/1 var(--ff);letter-spacing:.06em;
  padding:.5em .7em;border-radius:8px;text-transform:uppercase}
.pixbox__head b{display:block;font:700 1.6rem/1.1 var(--ff-num);color:var(--ink)}
.pixbox__head small{font-size:.78rem;color:var(--muted)}
.pixbox__qr{background:#fff;border-radius:var(--r);padding:12px;display:grid;place-items:center;margin-bottom:14px}
.pixbox__qr img{display:block;width:min(220px,60vw);height:auto;image-rendering:pixelated}
.pixbox__copy label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;margin-bottom:.4em}
.pixbox__row{display:flex;gap:7px}
.pixbox__row input{flex:1 1 auto;min-width:0;padding:.6em .7em;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--bg-elev);font:400 .78rem/1.3 var(--ff-num);
  text-overflow:ellipsis;color:var(--ink-2)}
.pixbox__row .btn{flex:0 0 auto}
.pixsteps{margin:14px 0;padding-left:1.3em;display:grid;gap:.45em}
.pixsteps li{font-size:.89rem;color:var(--ink-2)}
.pixsteps li::marker{color:var(--brand);font-weight:700}
.pixbox__who{font-size:.76rem;color:var(--muted);margin:.9em 0 0;line-height:1.5}
.paybtn--zap{background:#25D366;color:#042a13}
.paybtn--mail{background:var(--ink);color:var(--bg)}
@media (max-width:420px){ .pixbox__row{flex-direction:column} .pixbox__row .btn{width:100%} }