/* IQ.Academia_V1.0.2 · fonte local, identidade retro. */
@font-face {
  font-family: 'IQ Arcade';
  src: url('/assets/PressStart2P-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --navy: #1b335b;
  --ink: #193050;
  --blue: #24578b;
  --teal: #287c96;
  --muted: #526780;
  --line: #dbe4ee;
  --paper: #f3f6fa;
}
.brand { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.brand-logo { background:#fff; border-radius:9px; padding:12px 10px; }
.brand-logo img { display:block; width:100%; height:auto; object-fit:contain; }
.brand-label { color:#c5d6eb; font-size:.75rem; letter-spacing:.13em; font-weight:700; text-align:center; line-height:1.6; }
.sidebar { background:linear-gradient(175deg,#1b335b,#122641); padding:26px 20px; gap:28px; }
.sidebar nav button { border-radius:8px; font-size:.94rem; }
.sidebar nav button.active { background:#304f75; box-shadow:inset 3px 0 #53b4ce; }
.sidebar .foot { font-size:.875rem; border-color:#3b5578; }
.topbar { box-shadow:0 2px 12px #19305004; }
.avatar { color:#1b335b; background:#e9f2f7; }
button { transition:background-color .18s,box-shadow .18s; }
button:not(.quiet):not(.secondary):hover { box-shadow:0 4px 14px #183b6526; }
.eyebrow { font-size:.8rem; }
.page-heading h1 { font-size:2rem; }
.stats { margin:24px 0 30px; }
.stat { border-top:3px solid #3b98b3; padding:20px 22px; }
.stat b { color:#1b335b; }
.stat span, .meta, .progress-label { font-size:.875rem; }
.course-card { box-shadow:0 8px 26px #19305006; border-radius:15px; }
.course-band { position:relative; isolation:isolate; min-height:125px; padding:24px; }
.course-band.cyber-cover { background:#112641; min-height:210px; align-items:flex-end; border-bottom:0; overflow:hidden; }
.course-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 45%; z-index:-2; }
.cyber-cover:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#0d203bee,transparent 90%); z-index:-1; }
.cyber-cover strong { color:#fff; font-size:1.25rem; letter-spacing:.06em; }
.course-band .tag { font-size:.875rem; color:#1b335b; }
.cyber-cover .tag { background:#eaf7fb; }
.course-info { padding:24px 26px; }
.course-info h3 { font-size:1.3rem; }
.course-info button { background:#1b335b; }
.note { background:#e7f2f7; color:#255269; border-color:#3b98b3; }
.module-nav button.active { color:#1b335b; background:#e6f1f7; }
.lesson { box-shadow:0 6px 25px #19305005; }
.lesson-body { color:#2a3f56; }
.choice:has(input:checked) { background:#edf5f8; border-color:#3b98b3; }
.login { grid-template-columns:minmax(0,1.1fr) minmax(420px,1fr); background:white; }
.login-art { position:relative; isolation:isolate; padding:48px 54px; min-height:100vh; background:#122641; overflow:hidden; }
.login-art:before { content:""; position:absolute; inset:0; z-index:-2; background:url('/assets/cybersecurity.png') 65% center / cover no-repeat; }
.login-art:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#0c1e37a6 0%,#1026440d 25%,#0e213dbb 65%,#0c1e37f5 100%); }
.login-wordmark { font-size:1.7rem; letter-spacing:-.04em; font-weight:800; }
.login-wordmark span { font-size:.85rem; font-weight:600; letter-spacing:.22em; margin-left:10px; vertical-align:middle; }
.login-message { margin-top:auto; padding-top:280px; }
.login-art h1 { font-size:2.7rem; max-width:510px; line-height:1.12; }
.login-art p { color:#d1e1ee; }
.login-art .eyebrow { color:#8bd4e6; }
.login-art .bottom { font-size:.875rem; margin:24px 0 0; }
.login-box { padding:40px; }
.login-box form { max-width:410px; }
.login-box .brand { width:min(100%,330px); margin:0 auto 36px; gap:12px; }
.login-box .brand-logo { padding:0; }
.login-box .brand-label { color:#426581; letter-spacing:.22em; }
.login-box h1 { font-size:1.85rem; }
.login-box button { background:#1b335b; min-height:48px; }
.login-box .eyebrow { color:#287c96; }
.login-box input { background:#f8fafc; border-color:#ccd8e4; }
.certificate .certificate-logo { width:245px; max-width:75%; height:auto; margin:0 auto 25px; display:block; }
@media(min-width:1450px) { .login-art { padding:64px 72px; } .login-art h1 { font-size:3.1rem; } }
@media(max-width:1050px) { .login-art { padding:36px; } .login-art h1 { font-size:2.25rem; } .login-box { padding:30px; } .sidebar { padding:24px 16px; } }
@media(max-width:760px) {
  .login { grid-template-columns:1fr; }
  .login-art { min-height:300px; padding:26px; }
  .login-art:before { background-position:75% 40%; }
  .login-art h1 { font-size:1.9rem; max-width:420px; }
  .login-art .login-message>p:not(.eyebrow), .login-art .bottom { display:none; }
  .login-message { padding-top:90px; }
  .login-wordmark { font-size:1.4rem; }
  .login-box { padding:32px 24px; }
  .login-box .brand { max-width:270px; margin-bottom:26px; }
}
@media(max-width:700px) {
  .sidebar { padding:16px; gap:16px; }
  .sidebar>.brand { flex-direction:row; align-items:center; gap:18px; }
  .sidebar .brand-logo { width:160px; flex-shrink:0; padding:8px; }
  .sidebar .brand-label { max-width:150px; text-align:left; font-size:.8rem; }
  .sidebar nav button { font-size:.875rem; }
  .page-heading h1 { font-size:1.8rem; }
  .stat { padding:14px 10px; }
  .stat span { font-size:.875rem; }
  .meta { flex-wrap:wrap; gap:8px 14px; }
  .course-band.cyber-cover { min-height:190px; }
  .course-info { padding:22px; }
}
@media(prefers-reduced-motion:reduce) { button { transition:none; } }
@media print { .certificate .certificate-logo { width:190px; } }
.retro-wordmark {
  font-family:'IQ Arcade',ui-monospace,monospace;
  font-weight:400;
  font-style:normal;
  text-transform:none;
  letter-spacing:0;
  line-height:1.9;
  overflow-wrap:anywhere;
}
.login-wordmark.retro-wordmark { font-size:clamp(14px,1.12vw,20px); color:#e9fcff; text-shadow:2px 2px 0 #183858; }
.sidebar .brand-label.retro-wordmark { font-size:12px; color:#c7f3fb; }
.login-box .brand-label.retro-wordmark { font-size:14px; color:#1b335b; letter-spacing:0; }
@media(max-width:700px) { .sidebar .brand-label.retro-wordmark { max-width:160px; font-size:12px; } }
