/* Identidade visual BENTECH — cores e tipografia de bentech.com.br */
:root{
  --primary:#003366;
  --primary-dark:#001f40;
  --secondary:#F97316;
  --secondary-dark:#e06614;

  --paper:#f4f7f6;          /* fundo da pagina */
  --paper-2:#ffffff;        /* fundo dos cartoes */
  --ink:#333333;            /* texto */
  --ink-2:#666666;          /* texto secundario */
  --line:#e2e8ea;           /* bordas */

  --water:var(--primary);   /* destaque principal */
  --water-pale:#7ba7cc;
  --buoy:var(--secondary);  /* foco e realces */
  --clear:#15803d;          /* acerto */
  --bloom:#b91c1c;          /* erro e urgencia */

  --display:"Poppins","Helvetica Neue",Arial,sans-serif;
  --body:"Poppins","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --radius:10px;
  --shadow:0 5px 20px rgba(0,0,0,.07);
  --shadow-hover:0 12px 30px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  min-height:100vh; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}
.wrap{max-width:1080px; margin:0 auto; padding:28px 22px 56px; width:100%; flex:1 0 auto}
.wrap.narrow{max-width:660px}

/* --- cabecalho da marca --- */
.brand{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding:16px 0;
}
.brand-in{
  max-width:1080px; margin:0 auto; padding:0 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand img{height:34px; width:auto; display:block; filter:brightness(0) invert(1)}
.brand .tag{
  font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
}

.eyebrow{
  font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--secondary); margin:0 0 10px;
}
h1{font-family:var(--display); font-weight:700; letter-spacing:-.01em; color:var(--primary);
   font-size:clamp(27px,4.2vw,38px); line-height:1.12; margin:0 0 8px}
h2{font-family:var(--display); font-weight:600; color:var(--primary);
   font-size:19px; margin:0 0 14px}
h1 em{font-style:normal; color:var(--secondary)}
.sub{margin:0; color:var(--ink-2); max-width:58ch}

.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow); margin-bottom:20px;
}
.grid{display:grid; gap:20px; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:840px){ .grid{grid-template-columns:1fr} }

label{display:block; font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.12em;
      text-transform:uppercase; color:var(--ink-2); margin:0 0 6px}
input,textarea,select{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:11px 13px;
  transition:border-color .16s, box-shadow .16s;
}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,51,102,.12);
}
textarea{min-height:104px; resize:vertical}
.field{margin-bottom:14px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.row .field{flex:1 1 180px; margin-bottom:0}

.btn{
  font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--secondary); color:#fff; border:1px solid var(--secondary); border-radius:8px;
  padding:12px 22px; cursor:pointer; transition:background-color .16s, border-color .16s, transform .16s;
}
.btn:hover{background:var(--secondary-dark); border-color:var(--secondary-dark)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
.btn.ghost{background:transparent; color:var(--primary); border-color:var(--primary)}
.btn.ghost:hover{background:var(--primary); color:#fff}
.btn.danger{background:transparent; color:var(--bloom); border-color:var(--bloom)}
.btn.danger:hover{background:var(--bloom); color:#fff}
.btn.small{padding:8px 13px; font-size:11px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn:disabled:hover{background:var(--secondary); border-color:var(--secondary)}
.btn.ghost:disabled:hover{background:transparent; color:var(--primary)}

.msg{font-family:var(--body); font-size:13px; margin-top:10px; min-height:16px}
.msg.err{color:var(--bloom)}
.msg.ok{color:var(--clear)}

table{width:100%; border-collapse:collapse; font-size:15px}
th{font-family:var(--display); font-weight:600; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
   color:var(--ink-2); text-align:left; padding:0 8px 8px 0}
td{padding:10px 8px 10px 0; border-top:1px solid var(--line); vertical-align:middle}
td.code{font-family:var(--mono); font-size:14px; letter-spacing:.06em; color:var(--primary)}
td.right,th.right{text-align:right; padding-right:0}

.pill{
  display:inline-block; font-family:var(--display); font-weight:600; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 10px; border:1px solid var(--line); border-radius:99px;
  color:var(--ink-2); background:#fff;
}
.pill.live{border-color:var(--secondary); color:#fff; background:var(--secondary)}
.pill.ok{border-color:var(--clear); color:var(--clear); background:rgba(21,128,61,.08)}

.bar{margin-bottom:12px}
.bar .top{display:flex; justify-content:space-between; gap:12px; font-size:15px; margin-bottom:5px}
.bar .track{height:12px; background:rgba(0,51,102,.08); border-radius:99px; overflow:hidden}
.bar .fill{height:100%; background:var(--water-pale); transition:width .5s ease; border-radius:99px}
.bar.correct .fill{background:var(--clear)}
.bar.top-pick .fill{background:var(--secondary)}
.bar .num{font-family:var(--mono); font-size:13px; color:var(--ink-2); white-space:nowrap}

.timer{
  font-family:var(--display); font-weight:700; font-size:clamp(40px,9vw,72px); color:var(--primary);
  letter-spacing:-.02em; line-height:1; margin:0;
}
.timer.low{color:var(--bloom)}
.q-text{font-family:var(--display); font-weight:600; color:var(--primary);
        font-size:clamp(20px,3vw,26px); line-height:1.28; margin:0 0 18px}

.options{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.opt{
  width:100%; text-align:left; font-family:var(--body); font-size:16px; line-height:1.45;
  background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:8px;
  padding:14px 16px 14px 46px; position:relative; cursor:pointer;
  transition:border-color .16s, background-color .16s, box-shadow .16s;
}
.opt .key{position:absolute; left:16px; top:14px; font-family:var(--display); font-weight:600;
          font-size:12px; color:var(--secondary)}
.opt:hover:not(:disabled){border-color:var(--primary); box-shadow:var(--shadow)}
.opt:focus-visible{outline:2px solid var(--secondary); outline-offset:2px}
.opt:disabled{cursor:default}
.opt.mine{border-color:var(--primary); background:rgba(0,51,102,.06)}
.opt.correct{border-color:var(--clear); background:rgba(21,128,61,.08)}
.opt.wrong{border-color:var(--bloom); background:rgba(185,28,28,.06)}
.opt.muted{opacity:.45}

.score{font-family:var(--display); font-weight:700; letter-spacing:-.02em; color:var(--primary);
       font-size:clamp(46px,11vw,80px); line-height:1; margin:4px 0}
.score small{font-size:.34em; font-weight:400; color:var(--ink-2); letter-spacing:0}

.tabs{display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:22px; flex-wrap:wrap}
.tab{
  font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:none; border:none; border-bottom:3px solid transparent; color:var(--ink-2);
  padding:11px 16px; cursor:pointer; transition:color .16s;
}
.tab:hover{color:var(--primary)}
.tab.on{color:var(--primary); border-bottom-color:var(--secondary)}
.tab:focus-visible{outline:2px solid var(--secondary); outline-offset:-2px}
.panel{display:none}
.panel.on{display:block}

.muted{color:var(--ink-2)}
.mono{font-family:var(--mono); font-size:13px}
.code{font-family:var(--mono); letter-spacing:.06em; color:var(--primary)}
.stack{display:grid; gap:10px}
.center{text-align:center}
.fade{animation:rise .3s ease both}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* --- rodape com o aviso de direitos --- */
.rodape{
  background:var(--primary-dark); padding:22px 0; margin-top:auto; flex-shrink:0;
}
.rodape-in{
  max-width:1080px; margin:0 auto; padding:0 22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.rodape img{height:26px; width:auto; filter:brightness(0) invert(1); opacity:.75}
.rodape p{
  margin:0; color:rgba(255,255,255,.5); font-size:13px; font-family:var(--body);
}