/* ============================================================
   Dinâmica de Segurança da Informação — Dootax
   Mobile-first. Paleta extraída da identidade Dootax.
   ============================================================ */

:root{
  --green:#19E380;
  --green-deep:#00CE5D;
  --green-soft:#E8FBF1;
  --graphite:#414141;
  --graphite-dark:#313131;
  --bg:#ECECEC;
  --white:#FFFFFF;
  --yellow:#FFE300;
  --red:#E5484D;
  --amber:#FF9F0A;
  --muted:#787878;
  --line:#E2E2E2;
  --radius:14px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* O atributo hidden precisa vencer qualquer display declarado abaixo
   (ex: .topbar e .login-wrap usam display:flex, o que anularia o hidden). */
[hidden]{display:none !important}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--graphite);
  line-height:1.55;
  font-size:16px;
  min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------- Barra superior fixa ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;
  background:var(--graphite);color:var(--white);
  padding-top:calc(10px + env(safe-area-inset-top));
}
.topbar-logo{
  height:20px;width:auto;flex:none;
  /* o logo é escuro; invertido para ler bem sobre o grafite */
  filter:brightness(0) invert(1);
  opacity:.92;
}
.hud{display:flex;align-items:center;gap:14px}

/* vidas representadas pelo "x" do logo da Dootax */
.lives{display:flex;align-items:center;gap:7px}
.life{
  height:22px;width:auto;display:block;
  transition:filter .3s ease,opacity .3s ease;
}
/* vida perdida: some a cor e apaga, mantendo o lugar visível */
.life.lost{filter:grayscale(1);opacity:.3}
.timer{
  display:flex;align-items:baseline;gap:1px;
  background:rgba(255,255,255,.12);border-radius:999px;
  padding:5px 13px;font-weight:800;font-variant-numeric:tabular-nums;
  min-width:62px;justify-content:center;
}
.timer small{font-size:11px;opacity:.7;font-weight:600}
.timer.warn{background:rgba(255,159,10,.25);color:#FFD9A0}
.timer.danger{background:rgba(229,72,77,.3);color:#FFC9CB;animation:beat .7s infinite}
@keyframes beat{50%{opacity:.5}}

/* ---------- Layout ---------- */
.wrap{max-width:640px;margin:0 auto;padding:16px 14px 48px}
.screen{display:none;animation:in .28s ease}
.screen.active{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.card{
  background:var(--white);border-radius:var(--radius);
  padding:22px 18px;box-shadow:var(--shadow);
}
.card.danger{border:2px solid var(--red)}
.card.center{text-align:center}

h1{font-size:23px;line-height:1.3;margin-bottom:6px;color:var(--graphite-dark)}
h2{font-size:20px;line-height:1.35;margin-bottom:8px;color:var(--graphite-dark)}
h3{font-size:14px;margin-bottom:8px;color:var(--graphite-dark);
   text-transform:uppercase;letter-spacing:.6px}
.sub{color:var(--muted);font-size:14px;margin-bottom:16px}
.lead{margin-bottom:18px;font-size:15px}

.hero{text-align:center;margin-bottom:20px}
.hero-icon{font-size:46px;line-height:1;margin-bottom:10px}
.hero-logo{
  display:block;margin:0 auto 16px;
  width:190px;max-width:62%;height:auto;
}
.hero-logo.small{width:140px;margin-bottom:12px}

/* ---------- Caixas ---------- */
.box{
  background:#FAFAFA;border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin-bottom:16px;
}
.box p{font-size:14px;color:#555}
.box.privacy{background:var(--green-soft);border-color:#BFEFD6}
.box.lesson{border-left:3px solid var(--green)}
.box.correct{border-left:3px solid var(--green);background:var(--green-soft);border-color:#BFEFD6}

.ticks{list-style:none}
.ticks li{
  position:relative;padding-left:22px;margin-bottom:7px;
  font-size:14px;color:#555;
}
.ticks li::before{
  content:"›";position:absolute;left:6px;top:-1px;
  color:var(--green-deep);font-weight:800;font-size:17px;
}

/* ---------- Formulário ---------- */
.field{display:block;margin-bottom:15px}
.field>span{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input{
  width:100%;padding:13px 14px;font-size:16px;
  border:1px solid #D5D5D5;border-radius:10px;
  background:var(--white);color:var(--graphite);
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus{
  outline:none;border-color:var(--green-deep);
  box-shadow:0 0 0 3px rgba(25,227,128,.18);
}
.field input.bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,72,77,.14)}
.hint-txt{display:block;margin-top:5px;font-size:12px;color:var(--muted)}

.check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;cursor:pointer}
.check input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--green-deep)}
.check span{font-size:13px;color:#555}

.err{
  background:#FDECEC;border:1px solid #F5C2C2;color:#A32B2E;
  padding:10px 12px;border-radius:9px;font-size:13px;margin-bottom:12px;
}

/* ---------- Botões ---------- */
.btn{
  display:block;width:100%;padding:15px 18px;
  border:none;border-radius:11px;font-size:16px;font-weight:700;
  cursor:pointer;font-family:inherit;
  transition:transform .07s,background .18s,opacity .18s;
}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--green);color:var(--graphite-dark)}
.btn.primary:hover{background:var(--green-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);margin-top:9px}
.btn.ghost:hover{color:var(--graphite);border-color:var(--graphite)}

/* ---------- Progresso ---------- */
.progress-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;font-size:12px;color:var(--muted);margin-bottom:6px;
}
.progress-head .tag{margin-bottom:0}
.track{height:6px;background:#DCDCDC;border-radius:999px;overflow:hidden;margin-bottom:14px}
.track-fill{height:100%;width:0;background:var(--green);transition:width .35s ease}

/* ---------- Cenário ---------- */
.tag{
  display:inline-block;background:var(--green-soft);color:var(--green-deep);
  border:1px solid #BFEFD6;border-radius:999px;
  padding:3px 11px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;
}
.scenario{margin:10px 0 16px}

.mock{
  background:#FAFAFA;border:1px solid var(--line);
  border-radius:11px;padding:14px;font-size:14px;
}
.mock p{margin-bottom:8px}
.mock p:last-child{margin-bottom:0}
.mock-row{font-size:12.5px;color:var(--muted);margin-bottom:3px;word-break:break-word}
.mock hr{border:none;border-top:1px solid var(--line);margin:10px 0}
.mock a{color:#1668D1;word-break:break-all}
.mock-note{font-size:12px;color:var(--muted);margin-top:10px}
.mock-file{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:13px;word-break:break-all;
}
.mock-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:22px;letter-spacing:3px;font-weight:700;
  background:#fff;border:1px dashed #C9C9C9;border-radius:9px;
  padding:11px;text-align:center;
}
.mock-qr{font-size:34px;line-height:1.1;text-align:center;letter-spacing:4px}
.mock-scopes{margin:8px 0 10px 18px;font-size:13px}
.mock-scopes li{margin-bottom:4px}
.mock-btn{
  background:#0067B8;color:#fff;text-align:center;
  border-radius:7px;padding:9px;font-weight:600;font-size:14px;
}

/* navegador simulado */
.mock-browser{padding:0;overflow:hidden}
.mock-url{
  background:#E9E9E9;border-bottom:1px solid var(--line);
  padding:9px 12px;font-size:11.5px;color:#444;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;
}
.mock-screen{padding:16px;background:#fff}
.mock-logo{font-weight:800;font-size:16px;margin-bottom:10px;color:var(--graphite-dark)}

/* canais */
.mock-sms{background:#E7F7EC;border-color:#BFE3CB;max-width:330px}
.mock-call{background:#EDF3FB;border-color:#C6D9F0}
.mock-chat{background:#F4F0FB;border-color:#D8CCEE}
.mock-alert{background:#FFF8E6;border-color:#F0DFA8}
.mock-email{background:#FAFAFA}

/* ---------- Opções ---------- */
.opts{display:flex;flex-direction:column;gap:9px}
.opt{
  text-align:left;width:100%;
  background:var(--white);border:1.5px solid #DEDEDE;border-radius:11px;
  padding:14px 15px;font-size:15px;color:var(--graphite);
  cursor:pointer;font-family:inherit;line-height:1.45;
  transition:border-color .14s,background .14s,transform .07s;
}
.opt:hover{border-color:var(--green-deep);background:var(--green-soft)}
.opt:active{transform:scale(.995)}
.opt:disabled{opacity:.5;cursor:default}
.opt.picked{border-color:var(--graphite);background:#F2F2F2}
.opt.wrong{border-color:var(--red);background:#FDECEC}

/* ---------- Feedback ---------- */
.fb-head{text-align:center;margin-bottom:14px}
.fb-icon{font-size:44px;line-height:1;margin-bottom:8px}
.fb-text{font-size:15px;margin-bottom:16px}
.fb-head.safe h2{color:var(--green-deep)}
.fb-head.risky h2{color:#B87503}
.fb-head.compromise h2{color:var(--red)}

/* ---------- Resultado ---------- */
.maturity{
  background:var(--graphite);color:#fff;border-radius:12px;
  padding:18px 16px;text-align:center;margin-bottom:16px;
}
.mat-label{
  display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:1.2px;color:#B9B9B9;
}
.mat-value{
  display:block;font-size:26px;font-weight:800;
  color:var(--green);margin:5px 0 8px;
}
.mat-msg{font-size:14px;color:#DCDCDC;line-height:1.55}

.stats{display:flex;gap:9px;margin-bottom:18px}
.stat{
  flex:1;background:#FAFAFA;border:1px solid var(--line);
  border-radius:11px;padding:13px 5px;text-align:center;
}
.stat b{display:block;font-size:25px;font-weight:800;line-height:1.1}
.stat span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.stat.safe b{color:var(--green-deep)}
.stat.risky b{color:var(--amber)}
.stat.bad b{color:var(--red)}

.bars{margin-bottom:18px}
.bar-row{margin-bottom:15px}
.bar-label{font-size:14px;margin-bottom:6px;display:flex;justify-content:space-between}
.bar-label b{font-weight:800}
.bar{height:9px;background:#DCDCDC;border-radius:999px;overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--green);border-radius:999px;transition:width .7s ease}
.bar-row small{display:block;margin-top:5px;font-size:12px;color:var(--muted)}

.themes{list-style:none}
.themes li{
  padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:#555;
}
.themes li:last-child{border-bottom:none}
.themes b{color:var(--graphite-dark);display:block;margin-bottom:2px}
.themes .badge{
  display:inline-block;font-size:10px;font-weight:700;border-radius:999px;
  padding:1px 8px;margin-left:6px;text-transform:uppercase;letter-spacing:.4px;
  background:var(--graphite);color:#fff;vertical-align:middle;
}
.themes .badge.comportamental{background:var(--green-deep)}

.mailnote{
  font-size:13px;color:var(--muted);text-align:center;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line);
}

/* ---------- Contagem regressiva ---------- */
#sc-countdown.active{
  display:flex;align-items:center;justify-content:center;
  min-height:70vh;
}
.countdown-wrap{text-align:center}
.countdown-label{
  font-size:15px;color:var(--muted);text-transform:uppercase;
  letter-spacing:2px;margin-bottom:10px;
}
.countdown-num{
  font-size:120px;font-weight:800;line-height:1;color:var(--green-deep);
  font-variant-numeric:tabular-nums;
}
.countdown-num.go{font-size:64px;color:var(--graphite-dark)}
.countdown-num.pop{animation:pop .6s ease}
@keyframes pop{
  0%{transform:scale(.4);opacity:0}
  45%{transform:scale(1.12);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.countdown-sub{font-size:14px;color:var(--muted);margin-top:14px}

/* ---------- Lobby ---------- */
.waiting-count{
  font-size:14px;color:var(--graphite);font-weight:600;
  background:var(--green-soft);border:1px solid #BFEFD6;
  border-radius:999px;padding:9px 16px;display:inline-block;margin-bottom:18px;
}
.pulse-dot{
  width:12px;height:12px;border-radius:50%;background:var(--green);
  margin:6px auto 18px;animation:pulse 1.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(25,227,128,.6)}
  70%{box-shadow:0 0 0 16px rgba(25,227,128,0)}
  100%{box-shadow:0 0 0 0 rgba(25,227,128,0)}
}

/* ---------- Desktop ---------- */
@media(min-width:600px){
  .wrap{padding:24px 16px 60px}
  .card{padding:28px 26px}
  h1{font-size:27px}
}