:root{
  --brand:#1f4e8c;
  --brand-dark:#163a68;
  --muted:#6b7280;
  --bg:#f4f6fb;
  --card:#ffffff;
  --accent:#ffcc00;
  --radius:12px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:var(--bg);color:#111;display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}

/* Estilo geral */

.cabecalho{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--brand);color:#fff;gap:12px;position:relative;z-index:80;box-shadow:0 4px 20px rgba(2,6,23,0.08)}
.cab-top-left{display:flex;align-items:center;gap:12px}
.sociais-left{display:flex;align-items:center;gap:8px;margin-right:6px}
.icon-soc{width:30px;height:30px;object-fit:contain;border-radius:6px;transition:transform .18s ease}
.icon-soc:hover{transform:scale(1.08)}
.marca{display:flex;align-items:center;gap:10px}
.logo{width:52px;height:52px;object-fit:contain;border-radius:8px;background:#fff;padding:4px}
.site-name{font-weight:700;font-size:1.05rem;color:#fff}

.menu-toggle{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;padding:8px 10px;border-radius:8px}

.overlay{position:fixed;inset:0;background:rgba(2,6,23,0.5);backdrop-filter:blur(2px);z-index:70;opacity:1;transition:opacity .28s ease}
.overlay.hidden{opacity:0;pointer-events:none;display:none}

.side-menu{position:fixed;left:-340px;top:0;height:100vh;width:340px;background:linear-gradient(180deg,var(--brand),var(--brand-dark));color:#fff;z-index:75;padding:22px 18px;box-shadow:8px 0 40px rgba(12,24,48,0.18);transition:left .32s cubic-bezier(.2,.9,.3,1);display:flex;flex-direction:column;gap:18px}
.side-menu[aria-hidden="false"]{left:0}
.close-menu{align-self:flex-end;background:transparent;border:none;color:#fff;font-size:22px;cursor:pointer}
.side-nav{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.side-link{color:#fff;text-decoration:none;padding:12px;border-radius:10px;font-weight:700;transition:background .18s ease}
.side-link:hover{background:rgba(255,255,255,0.06)}

.page{flex:1 0 auto}

.banner{position:relative;overflow:hidden}
.banner-img{
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  object-position:center;
  display:block;
  border-bottom:6px solid rgba(0,0,0,0.03);
}

.conteudo{padding:36px 20px;max-width:1100px;margin:0 auto;text-align:center}
.conteudo h2{color:var(--brand);margin-bottom:8px;font-size:1.6rem}
.conteudo p{color:var(--muted);margin-bottom:18px;line-height:1.55}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;border:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s}
.btn:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,78,140,0.16)}

/* Alunos */

.alunos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;padding:22px;max-width:1100px;margin:0 auto}
.aluno-card{background:var(--card);border-radius:var(--radius);padding:18px;text-align:center;box-shadow:0 10px 26px rgba(12,24,48,0.06);transition:transform .28s ease,box-shadow .28s}
.aluno-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(12,24,48,0.12)}
.aluno-foto{width:110px;height:110px;border-radius:999px;object-fit:cover;margin-bottom:10px}
.aluno-card h3{color:var(--brand);margin-bottom:8px}
.aluno-card p{color:var(--muted);font-size:0.95rem;line-height:1.45}

/* Quizes */

.quiz{max-width:900px;margin:18px auto;padding:22px;border-radius:12px;background:var(--card);box-shadow:0 18px 40px rgba(12,24,48,0.06)}
.pergunta{margin-bottom:18px}
.pergunta h3{color:var(--brand);margin-bottom:10px}
.quiz-row{display:flex;flex-wrap:wrap;gap:12px}
.quiz-btn{flex:1 1 140px;padding:12px 14px;border-radius:12px;border:none;background:var(--brand);color:#fff;font-weight:700;cursor:pointer;transition:transform .14s ease,box-shadow .14s;box-shadow:0 8px 20px rgba(31,78,140,0.12)}
.quiz-btn:hover{transform:translateY(-4px)}

.quiz-btn.selected {
  background-color: #bebebe;
  color: #111;
  box-shadow: 0 4px 12px rgba(180, 179, 179, 0.6);
  transform: translateY(-2px);
}

.quiz-btn.correct {
  background-color: #28a745;
  color: #fff;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.6);
  transform: translateY(-2px);
}

.quiz-btn.wrong {
  background-color: #d9534f;
  color: #fff;
  box-shadow: 0 4px 12px rgba(217, 83, 79, 0.6);
  transform: translateY(-2px);
}

.quiz-btn.selected.correct {
  border: 2px solid #1f7a1f;
}

.quiz-btn.selected.wrong {
  border: 2px solid #7a1f1f;
}

.quiz-actions{display:flex;gap:12px;justify-content:center;margin-top:12px}
.btn.outline{background:transparent;border:2px solid var(--brand);color:var(--brand)}

/* Caixa de resultado */

.resultado-box{margin-top:14px;text-align:center;font-weight:700;color:var(--brand);min-height:24px}

.fade-in{opacity:0;transform:translateY(18px);transition:all .7s cubic-bezier(.2,.9,.3,1)}
.fade-in.visivel{opacity:1;transform:translateY(0)}

/* Roda pe */

.rodape{background:linear-gradient(90deg,var(--brand),var(--brand-dark));color:#fff;text-align:center;padding:14px;margin-top:20px}

.hidden{display:none}

@media (max-width:900px){.banner-img{height:300px}}
@media (max-width:640px){
  .logo{width:44px;height:44px}
  .side-menu{width:92%;left:-100%}
  .side-menu[aria-hidden="false"]{left:0}
  .quiz-row{flex-direction:column}
  .aluno-card{max-width:420px;margin:0 auto}
  .conteudo{padding:22px}
}