/* ATC – Angbu Training Centre: navy #0B2137, laranja #DA6D24, laranja claro #F08A3E, creme #F4F1E6 */
@font-face { font-family: Montserrat; src: url(fonts/Montserrat.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Roboto Slab"; src: url(fonts/RobotoSlab.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --navy: #0B2137; --orange: #DA6D24; --orange2: #F08A3E; --cream: #F4F1E6; --ink: #1d2733; --muted: #5f6b78;
  --line: #e2dccb; --card: #fff; --ok: #2e7d4f; --bad: #b3361f; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 Montserrat, "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--cream); }
h1, h2, h3 { font-family: "Roboto Slab", Georgia, serif; color: var(--navy); line-height: 1.25; margin: .2em 0 .5em; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; }
a { color: #b4561a; }
img { max-width: 100%; }
code { background: #f1ede1; padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 24px; padding-bottom: 48px; min-height: 70vh; }
main.wide { max-width: 1400px; }
.muted { color: var(--muted); font-size: .92em; }
.lead { font-size: 1.12rem; color: var(--navy); }

/* cabeçalho */
.top { background: var(--navy); color: var(--cream); border-bottom: 4px solid var(--orange); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; padding: 6px 0; }
.brand img { width: 44px; height: 44px; }
.brand span { font-family: "Roboto Slab", serif; font-size: 1.15rem; line-height: 1.1; }
.brand b { color: var(--orange2); }
.brand small { display: block; font-family: Montserrat, sans-serif; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.top nav a, .top .linkbtn { color: var(--cream); text-decoration: none; padding: 8px 10px; border-radius: 6px; font-size: .92rem; }
.top nav a:hover, .top .linkbtn:hover { background: rgba(255,255,255,.1); }
nav form { margin: 0; }
footer { background: var(--navy); color: var(--cream); font-size: .85rem; padding: 18px 0; opacity: .95; }

/* componentes */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin: 0 0 18px; box-shadow: 0 1px 2px rgba(11,33,55,.05); }
.btn { display: inline-block; background: var(--orange); color: #fff; border: 0; border-radius: 8px; padding: 11px 18px; font: 600 .95rem Montserrat, sans-serif;
  text-decoration: none; cursor: pointer; }
.btn:hover { background: #c45f1c; }
.btn.ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn.ghost:hover { background: var(--navy); color: var(--cream); }
.btn.small { padding: 7px 12px; font-size: .86rem; }
.btn:disabled { opacity: .6; }
.linkbtn { background: none; border: 0; color: #b4561a; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.actions form { margin: 0; }
.tag { display: inline-block; background: var(--navy); color: var(--cream); font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; letter-spacing: .03em; }
.tag.soon { background: var(--orange); }
.bar { height: 8px; background: #ebe5d3; border-radius: 99px; overflow: hidden; margin: 8px 0; min-width: 80px; }
.bar span { display: block; height: 100%; background: var(--orange); border-radius: 99px; }
.flash { background: #fff6e9; border: 1px solid #f2c79a; border-left: 4px solid var(--orange); padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; }
.error { color: var(--bad); font-weight: 600; }
.ok-box { background: #e8f4ec; border-left: 4px solid var(--ok); padding: 12px 14px; border-radius: 6px; }
.okmsg { color: var(--ok); font-weight: 600; }
.warnbox { border-left: 4px solid var(--orange); }
.crumbs { font-size: .88rem; color: var(--muted); margin: 0 0 6px; }
.crumbs a { color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.grid2 > .card { margin: 0 0 18px; }

/* formulários */
label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 12px; color: var(--navy); }
input, select, textarea { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border: 1.5px solid #cfc8b3; border-radius: 8px;
  font: 400 1rem Montserrat, sans-serif; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange2); border-color: var(--orange); }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
label.check input { width: auto; margin: 0; }
textarea { resize: vertical; margin-bottom: 8px; }
.search { display: flex; gap: 8px; margin: 0 0 14px; }
.search input { margin: 0; }

/* entrada */
.login { max-width: 420px; margin: 20px auto; text-align: center; }
.login img { width: 150px; }
.login form { text-align: left; }
.login .btn { width: 100%; }
.demo { margin-top: 18px; text-align: left; background: #f8f5ec; border: 1px dashed #d8cfb6; border-radius: 8px; padding: 12px 14px; font-size: .87rem; }

/* cursos */
.courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-bottom: 28px; }
.course { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
a.course:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(11,33,55,.12); }
.course img, .course .ph { aspect-ratio: 16/9; width: 100%; object-fit: cover; display: block; }
.course .ph { background: var(--navy) linear-gradient(135deg, var(--navy) 60%, #16395c); color: var(--cream); font: 600 1.15rem "Roboto Slab", serif;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; border-bottom: 4px solid var(--orange); }
.course > div { padding: 14px 16px 16px; }
.course h3 { margin: 0 0 4px; }
.course p { margin: 0 0 10px; font-size: .9rem; color: var(--muted); }
.course.soon, .course.locked { opacity: .85; }
.hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; margin-bottom: 18px; }
.hero aside h3 { margin-top: 0; }
.module h2 .num { display: block; font: 600 .75rem Montserrat, sans-serif; color: var(--orange); letter-spacing: .12em; text-transform: uppercase; }
.items { list-style: none; padding: 0; margin: 10px 0 0; border-top: 1px solid var(--line); }
.items li { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.items li a { flex: 1; font-weight: 600; color: var(--navy); text-decoration: none; }
.items li a:hover { color: var(--orange); }
.ok, .todo { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex: none; }
.ok { background: var(--ok); color: #fff; }
.todo { background: #efe9d8; color: var(--navy); }

/* aula */
.player { background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; }
.player video { width: 100%; height: 100%; display: block; }
.lessonnav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 22px; }
.transcript { max-height: 320px; overflow: auto; padding: 4px 12px; background: #faf8f2; border-radius: 8px; margin-top: 8px; }
.transcript p { margin: .4em 0; }
details summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.answer { white-space: pre-wrap; background: #faf8f2; border-left: 4px solid var(--orange); padding: 12px 14px; border-radius: 6px; margin-top: 12px; }
.comments { list-style: none; padding: 0; margin: 0 0 14px; }
.comments li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.comments ul { list-style: none; padding-left: 18px; border-left: 3px solid var(--line); margin: 8px 0 0; }
.comments ul li { border: 0; padding: 6px 0; }
.comments .meta { font-size: .88rem; margin-bottom: 3px; }
.comments li.open { border-left: 4px solid var(--orange); padding-left: 12px; }
.reply { margin-top: 6px; font-size: .9rem; }
.reply summary { color: #b4561a; font-weight: 500; }

/* manual */
.manual { max-width: 820px; margin: 0 auto; padding: 28px 34px; }
.manual h2 { margin-top: 1.6em; border-bottom: 2px solid var(--orange); padding-bottom: 4px; }
.manual figure { margin: 18px 0; text-align: center; }
.manual figure img { border: 1px solid var(--line); border-radius: 8px; }
.manual figcaption { font-size: .85rem; color: var(--muted); font-style: italic; }
.box { border-radius: 8px; padding: 12px 16px; margin: 14px 0; background: #f6f3ea; border-left: 5px solid var(--navy); }
.box > b:first-child { display: block; text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; color: var(--navy); }
.box.tip { border-color: var(--orange); background: #fdf1e7; } .box.tip > b:first-child { color: #b4561a; }
.box.warn { border-color: var(--bad); background: #fbecea; } .box.warn > b:first-child { color: var(--bad); }
.box.obj { background: var(--navy); color: var(--cream); border-color: var(--orange); } .box.obj > b:first-child { color: var(--orange2); }
.box.exercise { border-color: var(--orange); background: #fff; border: 2px solid var(--orange); }
.box.exercise h2 { border: 0; margin-top: 0; }
.toc { background: #faf8f2; border-radius: 8px; padding: 10px 16px; display: block; }
.toc ol { margin: 6px 0 0; }
ol.steps li { margin: 4px 0; }
.gloss dt { font-weight: 700; color: var(--navy); margin-top: 8px; } .gloss dd { margin: 0 0 4px 0; }

/* tabelas */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th { background: var(--navy); color: var(--cream); text-align: left; font-weight: 600; padding: 9px 10px; }
td { border-bottom: 1px solid var(--line); padding: 9px 10px; vertical-align: top; }
tr.inactive td { opacity: .5; }
td .bar { display: inline-block; width: 90px; vertical-align: middle; margin: 0 6px 0 0; }

/* questionário */
.quiz fieldset { border: 0; border-bottom: 1px solid var(--line); padding: 4px 0 16px; margin: 0 0 14px; }
.quiz legend { font-weight: 600; color: var(--navy); padding: 0; margin-bottom: 8px; font-size: 1.02rem; }
.quiz .num, .stats .num { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; align-items: center;
  justify-content: center; font-size: .8rem; margin-right: 6px; }
.opt { display: flex; gap: 10px; align-items: center; font-weight: 400; color: var(--ink); background: #faf8f2; border: 1.5px solid transparent;
  border-radius: 8px; padding: 10px 12px; margin: 0 0 6px; cursor: pointer; }
.opt:hover { border-color: var(--orange2); }
.opt input { width: auto; margin: 0; accent-color: var(--orange); }
.result { text-align: center; } .result h1 { font-size: 3.2rem; margin: 0; }
.result.pass { border-top: 6px solid var(--ok); } .result.pass h1 { color: var(--ok); }
.result.fail { border-top: 6px solid var(--orange); } .result.fail h1 { color: var(--orange); }
.result .actions { justify-content: center; }
.review li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.review li.right { color: var(--ink); } .review li.wrong > div:nth-child(2) { color: var(--bad); }

/* gestão */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 0 0 18px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--navy); border-radius: 8px 8px 0 0; font-weight: 600; font-size: .92rem; }
.tabs a.on { background: var(--navy); color: var(--cream); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stats > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: .88rem; color: var(--muted); }
.stats b { display: block; font: 700 1.8rem "Roboto Slab", serif; color: var(--navy); }
.stats a { color: inherit; text-decoration: none; }

/* certificado */
.certbody { background: #ddd8c8; }
.certbar { max-width: 1000px; margin: 16px auto; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; }
.cert { max-width: 1000px; margin: 0 auto 40px; background: var(--cream); aspect-ratio: 297/210; padding: 22px; box-shadow: 0 6px 30px rgba(0,0,0,.2); }
.certin { border: 3px solid var(--navy); outline: 1px solid var(--orange); outline-offset: -10px; height: 100%; padding: 30px 50px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.certin img { width: 120px; }
.certin .k { font: 700 .9rem Montserrat, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--orange); margin: 10px 0; }
.certin h1 { font-size: 2.4rem; margin: 6px 0; border-bottom: 2px solid var(--orange); padding: 0 30px 6px; }
.certin h2 { font-size: 1.6rem; margin: 4px 0 10px; }
.certin p { margin: 4px 0; }
.certfoot { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; width: 100%; margin-top: 26px; }
.certfoot span { display: block; border-bottom: 1px solid var(--navy); padding-bottom: 4px; font-weight: 600; min-height: 1.6em; }
.certfoot small { color: var(--muted); font-size: .72rem; word-break: break-all; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  .noprint { display: none; }
  .certbody { background: none; }
  .cert { box-shadow: none; margin: 0; max-width: none; width: 297mm; height: 210mm; aspect-ratio: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 760px) {
  h1 { font-size: 1.5rem; }
  .grid2, .hero { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .manual { padding: 18px; }
  .card { padding: 16px; }
  .brand small { display: none; }
  .cert { aspect-ratio: auto; } .certin { padding: 20px; } .certin h1 { font-size: 1.6rem; } .certfoot { grid-template-columns: 1fr; gap: 10px; }
}

/* ATC Academy — refined workspace, entirely local and offline-ready. */
:root { --cream:#f6f7f9; --line:#e5e9ee; --muted:#697585; --orange:#b95116; --orange2:#f2a56e; --ink:#243348; }
body { font-size:14px; line-height:1.65; }
h1,h2,h3 { font-family:Montserrat,sans-serif; letter-spacing:-.035em; }
h1 { font-size:32px; font-weight:650; } h2 { font-size:23px; } h3 { font-size:16px; }
a,button,input,summary { -webkit-tap-highlight-color:transparent; }
a,button { transition:background .18s,box-shadow .18s,transform .18s; }
:focus-visible { outline:3px solid #d87936; outline-offset:4px; }
[hidden] { display:none!important; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:20; padding:12px; background:white; }.skip-link:focus { top:10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.app .workspace { margin-left:244px; }
.sidebar { position:fixed; inset:0 auto 0 0; width:244px; background:#0b2137; color:#d0d9e3; padding:32px 22px 22px; display:flex; flex-direction:column; z-index:5; overflow-y:auto; }
.brand { gap:9px; }.brand img { width:42px;height:42px; }.brand span { font-family:Montserrat,sans-serif; font-size:16px; font-weight:600; }.brand small { font-size:8px; margin-top:8px;letter-spacing:.12em; }
.nav-label { font-size:9px; letter-spacing:.16em; color:#92a4b9; margin:48px 10px 16px; }
.sidebar nav { display:grid; gap:7px; }.sidebar nav a { display:flex; gap:13px; align-items:center; padding:12px 14px; border-radius:7px; color:#bdcbda; font-size:12px; font-weight:550; text-decoration:none; }.sidebar nav a>span { font-size:20px; line-height:1; width:20px; }.sidebar nav a:hover { background:#183149; color:#fff; }.sidebar nav a[aria-current] { background:#26384a; color:#fff; box-shadow:inset 3px 0 #ec9555; }
.sidebar-note { margin-top:auto; padding:50px 10px 26px; }.sidebar-note .eyebrow { color:#e8a878;font-size:8px; }.sidebar-note h3 { color:#edf1f5; font-size:17px; line-height:1.6; font-weight:500; margin-top:12px; }.sidebar-note p { color:#94a7bb; font-size:11px; }
.profile { display:flex; gap:11px; align-items:center; border-top:1px solid #2c3d50; padding-top:22px; }.profile b { display:block; font-size:11px; color:#f6f7f9; }.profile small { display:block; color:#a1b1c4; font-size:10px; }.avatar { display:inline-flex; width:34px;height:34px; border-radius:50%;align-items:center;justify-content:center; background:#f1e4d5; color:#785231; font-weight:650; flex-shrink:0; }.logout { padding:14px 0 0 45px; }.logout .linkbtn { font-size:10px; color:#a6b7c8; text-decoration:none; }
.top { background:#fff; color:var(--navy); border-bottom:1px solid var(--line); }.top .wrap { min-height:78px; flex-wrap:nowrap; }.wrap { max-width:1320px; padding-left:44px; padding-right:44px; }main.wrap { padding-top:34px; padding-bottom:64px; }
.workspace-label { font-size:11px; color:var(--muted); }.workspace-label span { margin:0 14px; color:#b5bdc6; }.workspace-label b { font-weight:500; color:var(--navy); }.account-link { display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--navy); font-size:11px; }
footer { background:transparent; color:#7b8593; border-top:1px solid var(--line); font-size:10px; }footer .wrap { display:flex;justify-content:space-between; gap:15px; }
.eyebrow { display:block; font-size:9px; font-weight:650; letter-spacing:.17em; color:#94704f; }.page-heading { display:flex;justify-content:space-between; align-items:center; margin-bottom:26px; }.page-heading h1 { margin:7px 0 4px; }.page-heading p { margin:0; }.greeting-dot { color:var(--orange); }.learning-badge { color:#778578; font-size:10px; }
.learning-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:28px; }.learning-stats>div { display:flex;align-items:center;gap:16px; padding:20px 24px; background:#fff;border:1px solid var(--line);border-radius:10px; }.stat-icon { display:flex;align-items:center;justify-content:center; width:42px;height:42px;background:#f4f2ef;color:#a27349;border-radius:10px;font-size:23px; }.learning-stats b { font-size:25px;line-height:1.25;color:var(--navy);font-weight:600; }.learning-stats div div span { display:block;font-size:10px;color:var(--muted);margin-top:4px; }
.featured { display:grid;grid-template-columns:1.35fr 1fr; background:#102b43; border-radius:14px;overflow:hidden;margin-bottom:36px; min-height:310px; }.featured-copy { padding:32px 36px;z-index:1; }.featured .eyebrow { color:#f1b98d;font-size:8px; }.featured h2 { color:white;font-size:29px;line-height:1.25;margin:15px 0 10px;max-width:430px; }.featured p { color:#b7c9d8;font-size:11px;margin-bottom:22px; }.featured .btn { background:#f0aa74;color:#18293a;font-size:11px;padding:12px 18px; }.featured .btn:hover { background:#ffc596; }.featured .btn span { margin-left:22px;font-size:16px; }.feature-progress { margin-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:0 10px;max-width:370px;color:#b7c9d8;font-size:9px; }.feature-progress .bar { width:100%;background:#3e5365;height:4px;margin-top:9px; }.feature-progress .bar span { background:#f0aa74; }
.featured-art { position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#36526b 0,transparent 68%); }.orbit { position:absolute;width:330px;height:330px;border:1px solid #ffffff12;border-radius:50%; }.orbit-two { width:440px;height:440px; }.art-window { width:210px;height:180px;border:1px solid #aab5be66;border-radius:13px;background:linear-gradient(130deg,#ffffff15,#ffffff03);transform:rotate(-8deg);box-shadow:18px 25px 35px #00132366;padding:14px 20px; }.window-dots { color:#b1c3d2;font-size:8px;letter-spacing:4px;border-bottom:1px solid #ffffff20;padding-bottom:9px; }.art-symbol { color:#f2b181;display:block;text-align:center;font-size:56px;line-height:1.3; }.art-line { width:70%;height:4px;background:#8094a5;border-radius:3px;margin:8px auto; }.art-line.short { width:45%;opacity:.45; }.art-label { display:block;text-align:center;color:#bbcbd8;font-size:7px;margin-top:13px; }.art-badge { position:absolute;bottom:22px;font-size:7px;letter-spacing:.22em;color:#98aebe; }
.section-heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:17px; }.section-heading h2 { margin:5px 0 0;font-size:21px; }.section-heading>.muted { font-size:10px; }.count { background:#e9edf1;color:#647386;font-size:11px;vertical-align:middle;padding:4px 8px;border-radius:5px;margin-left:8px; }.courses { grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:36px; }.course { border-radius:11px;box-shadow:0 3px 6px #102b4303; }.course>div { padding:20px; }.course h3 { font-size:14px;line-height:1.5; }.course p { font-size:11px; }.course .muted { font-size:10px; }.course .ph { position:relative;aspect-ratio:1.9;background:#e9edf6;border:0;padding:22px; }.course.soon,.course.locked { opacity:1; }.course-monogram { display:flex;align-items:center;justify-content:center;width:64px;height:70px;background:#2f5896;color:white;font-size:34px;font-weight:600;border-radius:9px;box-shadow:12px 8px 0 #ffffff66;transform:rotate(-6deg); }.cover-caption { position:absolute;bottom:9px;font:500 6px Montserrat,sans-serif;letter-spacing:.2em;color:#566276; }.course .ph-excel { background:#e5eee9; }.ph-excel .course-monogram { background:#307657; }.course .ph-powerpoint { background:#f4e8df; }.ph-powerpoint .course-monogram { background:#b15e3e; }.course .ph-outlook { background:#e0edf5; }.ph-outlook .course-monogram { background:#367ba8; }.course .ph-comptia-a-plus,.course .ph-comptia-network-plus { background:#e8e7ed; }.ph-comptia-a-plus .course-monogram,.ph-comptia-network-plus .course-monogram { background:#555275;font-size:25px; }.tag { font-size:8px;padding:4px 9px; }.tag.soon { background:#f5ede5;color:#9b602e; }.bar { height:5px;background:#edf0f3; }.catalog-search { margin:0; }.catalog-search input { margin:0;width:220px;font-size:11px;padding:11px 14px;border:1px solid var(--line);background:#fff; }
.card { border-radius:12px;padding:26px;box-shadow:0 4px 18px #17344c04; }.btn { border-radius:7px;padding:12px 18px;font-size:12px; }.btn.ghost { border:1px solid #d6dee6;background:white;color:#34485d; }.btn.ghost:hover { background:#edf1f5;color:var(--navy); }.items li { padding:17px 2px; }.items li a { font-size:13px; }.items li>.muted { font-size:10px; }.module .num { margin-bottom:9px; }.hero { padding:20px 0;gap:32px; }.hero h1 { font-size:34px; }.hero p { font-size:13px; }.crumbs { font-size:10px;margin-bottom:18px; }.player { box-shadow:0 10px 30px #102b431a; }.lessonnav { margin:18px 0 26px; }.opt { padding:16px;background:#f7f8fa; }.opt:has(input:checked) { background:#fff3e8;border-color:#b95116; }.tablewrap { border:1px solid var(--line);border-radius:9px; }th { background:#edf1f5;color:var(--navy);font-size:10px;padding:14px; }td { padding:14px;font-size:12px; }tbody tr:hover { background:#fafbfd; }input,select,textarea { border:1px solid #d6dee6;font-size:13px;padding:12px; }.tabs { gap:10px;border-width:1px; }.tabs a { font-size:12px; }.stats b { font-family:Montserrat,sans-serif; }
.public .brand { color:var(--navy); }.public main.wrap { min-height:calc(100vh - 150px); }.login-layout { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;max-width:1060px;margin:30px auto; }.login-story h1 { font-size:49px;line-height:1.15;font-weight:600;margin:22px 0; }.login-story em { color:var(--orange);font-family:"Roboto Slab",serif;font-weight:400;font-style:normal; }.login-story p { max-width:360px;color:var(--muted);font-size:13px; }.login-benefits { display:grid;gap:14px;margin-top:35px;color:#506276;font-size:11px; }.login { width:100%;max-width:440px;padding:32px;text-align:left;margin:0; }.login img { width:75px;margin-bottom:18px; }.login h1 { font-size:24px;margin-top:10px; }.login form { margin-top:25px; }.login .demo { font-size:10px;line-height:1.9;background:#f7f8fa;border:1px solid var(--line); }.login label { font-size:11px; }
@media(min-width:1500px) { .featured { min-height:350px; }.featured-copy { padding:40px; } }
@media(max-width:1150px) { .sidebar { width:210px;padding:26px 15px; }.app .workspace { margin-left:210px; }.wrap { padding-left:28px;padding-right:28px; }.learning-stats>div { padding:16px;gap:10px; }.featured-copy { padding:28px; }.featured h2 { font-size:25px; }.courses { gap:14px; }.course>div { padding:15px; }.login-layout { gap:40px; }.login-story h1 { font-size:40px; } }
@media(max-width:900px) { .courses { grid-template-columns:repeat(2,minmax(0,1fr)); }.learning-badge { display:none; }.learning-stats>div { padding:15px 12px; }.stat-icon { display:none; }.featured { grid-template-columns:1.5fr 1fr; }.art-window { width:150px;height:170px; }.hero { grid-template-columns:1fr; }.workspace-label { max-width:75%; }.login-layout { gap:30px; } }
@media(max-width:700px) { .sidebar { position:static;width:auto;padding:18px 20px; }.sidebar .brand { margin-bottom:18px; }.sidebar nav { display:flex;gap:5px;flex-wrap:wrap; }.sidebar nav a { font-size:10px;padding:9px;gap:6px; }.sidebar nav a>span { font-size:15px;width:auto; }.sidebar-note,.nav-label,.profile,.logout { display:none; }.app .workspace { margin-left:0; }.top .wrap { min-height:56px; }.workspace-label { font-size:9px; }.workspace-label span { margin:0 5px; }.account-link { font-size:0; }.account-link .avatar { font-size:12px;width:29px;height:29px; }.wrap { padding-left:20px;padding-right:20px; }main.wrap { padding-top:25px; }.page-heading h1 { font-size:28px; }.learning-stats { gap:8px; }.learning-stats>div { padding:14px 10px; }.learning-stats b { font-size:22px; }.learning-stats div div span { font-size:8px; }.featured { grid-template-columns:1fr;min-height:auto; }.featured-art { display:none; }.featured-copy { padding:26px; }.featured h2 { font-size:27px; }.section-heading { align-items:start; }.section-heading h2 { font-size:20px; }.catalog-search input { width:150px; }.course h3 { font-size:12px; }.course>div { padding:13px; }.course p { font-size:10px; }.cover-caption { font-size:5px; }.course-monogram { width:48px;height:52px;font-size:27px; }.hero h1 { font-size:28px; }.grid2 { grid-template-columns:1fr; }footer .wrap { flex-direction:column;gap:4px; }.login-layout { grid-template-columns:1fr;margin:10px auto;gap:25px; }.login-story h1 { font-size:34px; }.login-story h1 br { display:none; }.login-story p,.login-benefits { display:none; }.login { max-width:none;padding:25px; }.items li { flex-wrap:wrap; }.items li a { min-width:60%; }.items li>.muted { margin-left:38px; } }
@media(max-width:400px) { .courses { grid-template-columns:1fr; }.section-heading { flex-wrap:wrap; }.catalog-search,.catalog-search input { width:100%; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important;scroll-behavior:auto!important; } }
@media(max-width:700px) { .sidebar { position:relative; }.sidebar .logout { display:block;position:absolute;top:28px;right:20px;padding:0; }.sidebar .logout .linkbtn { font-size:9px; }.sidebar .brand { padding-right:90px; } }
/* Learner identity and course presenters */
.avatar-navy { background:#dbe7f2;color:#173b5b; }.avatar-green { background:#deece5;color:#296245; }.avatar-rose { background:#f3e0e5;color:#7d3e54; }.avatar-sand { background:#f1e4d5;color:#785231; }
.avatar-large { width:70px;height:70px;font-size:26px; }.profile-intro { display:flex;align-items:center;gap:22px;margin-bottom:25px; }.profile-intro h2 { margin-top:5px; }.profile-intro p { margin:0; }.profile-colors { border:0;padding:0;display:flex;gap:20px;flex-wrap:wrap; }.profile-colors legend { font-size:12px;font-weight:600;margin-bottom:12px; }.color-choice { display:flex;align-items:center;gap:8px;font-size:12px; }.color-choice input { width:auto;margin:0;accent-color:var(--orange); }.color-swatch { width:22px;height:22px;border-radius:50%;display:block; }
.profile-prompt { display:flex;gap:20px;align-items:center;justify-content:space-between;padding:20px 24px;background:#fff9f2;border:1px solid #efdfce;border-radius:10px;margin-bottom:28px; }.profile-prompt b { display:block;font-size:13px;overflow-wrap:anywhere; }.profile-prompt span { display:block;font-size:11px;color:var(--muted); }.profile-prompt a { flex-shrink:0; }.presenter-heading { text-align:center;margin:18px auto 28px;max-width:620px; }.presenter-heading h1 { font-size:38px;margin:14px 0; }.presenter-heading p { font-size:13px;color:var(--muted); }.presenter-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;max-width:770px;margin:auto; }.presenter-option { position:relative;display:block;margin:0;border-radius:15px;background:#fff;border:2px solid var(--line);overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s; }.presenter-option:hover { border-color:#c39772; }.presenter-option:has(input:checked) { border-color:var(--orange);box-shadow:0 0 0 4px #b9511614; }.presenter-option:has(input:focus-visible) { outline:3px solid var(--orange);outline-offset:5px; }.presenter-option>input { position:absolute;top:18px;left:18px;width:20px;height:20px;z-index:2;accent-color:var(--orange);margin:0; }.presenter-portrait { display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:#e5e3df; }.presenter-portrait img { width:100%;height:100%;object-fit:cover;object-position:50% 4%; }.selection-check { position:absolute;right:16px;bottom:16px;background:var(--orange);color:white;width:30px;height:30px;display:none;align-items:center;justify-content:center;border-radius:50%; }.presenter-option input:checked + .presenter-portrait .selection-check { display:flex; }.presenter-info { display:block;padding:20px 24px; }.presenter-info strong { display:block;font-size:25px;line-height:1.5; }.presenter-info>span:last-child { font-size:11px;color:var(--muted);font-weight:400; }.presenter-submit { max-width:770px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin:26px auto; }.presenter-submit p { font-size:10px; }
.presenter-banner { display:flex;align-items:center;gap:15px;padding:12px 18px;background:#fff;border:1px solid var(--line);border-radius:10px;margin:20px 0; }.presenter-banner img { width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%; }.presenter-banner div { margin-right:auto; }.presenter-banner b { font-size:14px; }.presenter-banner a { font-size:10px; }.presenter-banner .eyebrow { font-size:8px; }.intro-layout { display:grid;grid-template-columns:minmax(230px,.8fr) 1.2fr;gap:44px;align-items:center;margin:28px 0; }.intro-media { background:#e5e3df;border-radius:14px;overflow:hidden; }.intro-media img { width:100%;display:block; }.intro-media video { width:100%;display:block;max-height:650px; }.intro-copy h1 { font-size:35px;margin:14px 0; }.intro-copy .lead { font-size:17px; }.intro-script p { font-size:13px;line-height:1.9; }.intro-status { padding:12px 15px;border-left:3px solid #d89b6c;background:#fbefe4;font-size:11px; }
.real-reference { padding:20px;background:#f6f8fa;border:1px solid var(--line);border-radius:10px; }.real-reference img { max-height:500px;object-fit:contain; }.real-reference figcaption { font-size:11px; }.asset-credit { font-size:10px;color:var(--muted); }
@media(max-width:900px) { .intro-layout { grid-template-columns:1fr;gap:24px; }.intro-media { max-width:360px;margin:auto; }.presenter-options { gap:18px; }.presenter-heading h1 { font-size:30px; } }
@media(max-width:600px) { .profile-prompt,.presenter-submit { align-items:stretch;flex-direction:column;gap:12px; }.profile-intro { gap:14px; }.profile-intro h2 { font-size:19px; }.presenter-heading h1 { font-size:28px; }.presenter-options { gap:12px; }.presenter-info { padding:14px; }.presenter-info strong { font-size:21px; }.presenter-info .eyebrow { font-size:7px; }.presenter-info>span:last-child { font-size:10px; }.presenter-option>input { left:10px;top:10px; }.presenter-banner { flex-wrap:wrap; }.presenter-banner div { min-width:50%; }.presenter-banner a { font-size:11px; }.intro-copy h1 { font-size:29px; }.profile-colors { gap:14px; } }
.manual figure img[src$="-original.svg"] { width:80px;height:auto;border:0;border-radius:0; }
.manual figure img[src*="icone-"] { width:auto;height:auto;border:0;border-radius:0; }
.manual figure img[src*="windows11-"] { width:auto;height:auto;border-radius:0; }

/* O guia escolhido (Helena ou Miguel) em toda a plataforma */
.guide-chip{display:inline-flex;align-items:center;gap:.55rem;margin-right:.9rem;padding:.2rem .75rem .2rem .25rem;border:1px solid var(--line,#d9d2c3);border-radius:999px;text-decoration:none;color:inherit;background:var(--surface,#fff)}
.guide-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 12%}
.guide-chip span{display:flex;flex-direction:column;line-height:1.15}.guide-chip small{font-size:.68rem;opacity:.7}.guide-chip b{font-size:.86rem}
.guide-clips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1rem}
.guide-clip{margin:0;border:1px solid var(--line,#d9d2c3);border-radius:14px;overflow:hidden;background:var(--surface,#fff)}
.guide-clip video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.guide-clip figcaption{display:flex;flex-direction:column;gap:.25rem;padding:.8rem 1rem 1rem}
.guide-clip details{margin-top:.35rem;font-size:.9rem}.guide-clip summary{cursor:pointer;font-weight:600}
.guide-panel{margin:0 0 1.4rem}.guide-panel h2{margin:.2rem 0 .8rem;font-size:1.05rem}
.guide-intro .guide-clips{margin:1.2rem 0}
.steps-bar{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 1.4rem;padding:0}
.steps-bar li{display:flex;align-items:center;gap:.5rem;padding:.35rem .8rem .35rem .4rem;border:1px solid var(--line,#d9d2c3);border-radius:999px;font-size:.85rem;color:var(--muted,#6b665c)}
.steps-bar li span{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--line,#e7e1d2);font-weight:700;font-size:.78rem}
.steps-bar li.done span{background:#2d7a52;color:#fff}.steps-bar li.current{border-color:var(--accent,#c2561a);color:inherit;font-weight:600}.steps-bar li.current span{background:var(--accent,#c2561a);color:#fff}
.onboard-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.6rem;align-items:start;margin-top:.8rem}
.onboard-copy{display:flex;flex-direction:column;gap:1rem}.onboard-copy .actions{display:flex;flex-wrap:wrap;gap:.6rem}
.tour{display:grid;gap:.6rem}.course-picks{display:grid;gap:.7rem}.course-pick{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}.course-pick p{margin:0}
form.inline{display:inline}
@media (max-width:820px){.onboard-layout{grid-template-columns:1fr}.guide-chip span small{display:none}}
/* Guia por voz */
.voz .voz-topo{display:flex;gap:16px;align-items:center}.voz .voz-topo img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 8%;border:3px solid var(--orange)}
.voz h2{margin:2px 0 4px}.voz .voz-topo p{margin:0;font-size:12px}
.voz-mic{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px auto 6px;width:132px;height:132px;border-radius:50%;border:0;background:var(--orange);color:#fff;font-weight:700;font-size:15px;cursor:pointer;flex-direction:column;box-shadow:0 10px 26px #b9511640;transition:transform .15s}
.voz-mic:hover{transform:scale(1.04)}.voz-mic:disabled{opacity:.55;cursor:wait}.voz-icone{font-size:40px;line-height:1}
.voz.a-gravar .voz-mic{background:#c0392b;animation:voz-pulso 1.2s ease-in-out infinite}
@keyframes voz-pulso{0%,100%{box-shadow:0 0 0 0 #c0392b66}50%{box-shadow:0 0 0 18px #c0392b00}}
.voz-estado{text-align:center;min-height:1.4em;font-size:12px}
.voz-conversa{list-style:none;padding:0;margin:8px 0 14px;display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto}
.voz-conversa li{padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5;max-width:88%}
.voz-pergunta{align-self:flex-end;background:#eef2f6;border-bottom-right-radius:4px}
.voz-resposta{align-self:flex-start;background:#fbefe4;border-bottom-left-radius:4px}.voz-resposta .linkbtn{display:block;margin-top:4px;font-size:11px}
.voz-escrever{display:flex;gap:8px}.voz-escrever input{flex:1}
@media (prefers-reduced-motion:reduce){.voz.a-gravar .voz-mic{animation:none}}