/* ============ Primeiros Passos no Computador — vitrine + sala de aula (On Training) ============ */
:root { --pp-navy: #061a2b; --pp-navy2: #0b2545; --pp-ink: #0f2438; --pp-muted: #52667a; --pp-line: #dbe6ee; --pp-bg: #f4f8fb; --pp-teal: #00cca3; --pp-teal2: #008b76; --pp-gold: #f4b400; --pp-blue: #2a8cf0; --pp-r: 18px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--pp-bg); color: var(--pp-ink); font: 16px/1.6 Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.ms { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 1.25em; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; vertical-align: -.2em; }
.pp-wrap { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.pp-k { margin: 0; font-size: .74rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-teal2); }
.pp-h2 { margin: .4rem 0 0; font: 800 clamp(1.7rem, 3.2vw, 2.45rem)/1.15 Manrope, Inter, sans-serif; letter-spacing: -.02em; color: var(--pp-navy); }
.pp-lead { margin: .8rem 0 0; max-width: 720px; color: var(--pp-muted); font-size: 1.05rem; }
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: 0 1.4rem; border: 2px solid transparent; border-radius: 12px; font: 800 1rem/1 Manrope, Inter, sans-serif; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.pp-btn:hover { transform: translateY(-1px); }
.pp-btn:focus-visible { outline: 3px solid #7ee2c5; outline-offset: 2px; }
.pp-btn-gold { background: var(--pp-gold); color: #1b1300; box-shadow: 0 12px 26px -12px rgba(244, 180, 0, .8); }
.pp-btn-gold:hover { background: #ffc629; }
.pp-btn-teal { background: var(--pp-teal2); color: #fff; }
.pp-btn-teal:hover { background: #007565; }
.pp-btn-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .22); }
.pp-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.pp-btn-line { background: #fff; color: var(--pp-navy); border-color: var(--pp-line); }
.pp-btn-line:hover { border-color: var(--pp-teal2); }
.pp-btn[disabled], .pp-btn.is-locked { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- hero ---------- */
.pp-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(900px 500px at 85% 20%, rgba(42, 140, 240, .28), transparent 60%), radial-gradient(700px 400px at 10% 110%, rgba(0, 204, 163, .22), transparent 60%), linear-gradient(160deg, #061a2b 0%, #0a2742 60%, #0b3050 100%); }
.pp-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.pp-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; padding: 72px 0 80px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pp-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .8rem; border-radius: 8px; font-size: .78rem; font-weight: 800; background: rgba(0, 204, 163, .16); color: #7ee2c5; border: 1px solid rgba(0, 204, 163, .35); }
.pp-chip.is-gold { background: var(--pp-gold); color: #1b1300; border-color: var(--pp-gold); }
.pp-hero h1 { margin: 1.1rem 0 0; font: 800 clamp(2.4rem, 5.6vw, 4.2rem)/1.02 Manrope, Inter, sans-serif; letter-spacing: -.035em; }
.pp-hero h1 em { font-style: normal; color: #7ee2c5; }
.pp-sub { margin: 1.1rem 0 0; max-width: 560px; color: #cfe0ec; font-size: 1.14rem; line-height: 1.6; }
.pp-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.pp-note { display: flex; align-items: center; gap: .45rem; margin: .9rem 0 0; font-size: .86rem; color: #9fc4dc; }
.pp-note .ms { color: var(--pp-teal); }
.pp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 2rem; max-width: 640px; }
.pp-stat { padding: .9rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.pp-stat .ms { color: #7ee2c5; font-size: 1.35rem; }
.pp-stat.is-gold .ms { color: var(--pp-gold); }
.pp-stat b { display: block; margin-top: .45rem; font: 800 1.05rem/1.15 Manrope, Inter, sans-serif; }
.pp-stat small { display: block; margin-top: .2rem; color: #a9c3d6; font-size: .74rem; line-height: 1.35; }
/* arte: mini Windows */
.pp-art { position: relative; min-height: 420px; }
.pp-desk { position: absolute; inset: 20px 10px 30px 20px; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 20% 110%, #5bb6ff 0%, transparent 55%), linear-gradient(160deg, #1e5fb4, #2f7fd6 45%, #7db7f2); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .15); transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); }
.pp-dwin { position: absolute; left: 7%; top: 8%; width: 78%; border-radius: 10px; background: #fff; color: #111827; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .55); overflow: hidden; font-size: .78rem; }
.pp-dwin-t { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; background: #f3f5f8; font-weight: 600; }
.pp-dwin-t i { margin-left: auto; letter-spacing: .6rem; color: #64748b; font-style: normal; }
.pp-dpath { margin: .5rem .7rem; padding: .35rem .6rem; border: 1px solid #dbe3ec; border-radius: 6px; color: #334155; }
.pp-drow { display: flex; align-items: center; gap: .55rem; padding: .42rem .9rem; }
.pp-drow:nth-child(odd) { background: #f8fafc; }
.pp-drow.is-sel { background: #dcebfb; }
.pp-fold { width: 18px; height: 14px; border-radius: 2px 3px 3px 3px; background: linear-gradient(#ffd257, #f2b632); position: relative; flex: none; }
.pp-fold::before { content: ''; position: absolute; left: 0; top: -3px; width: 8px; height: 4px; border-radius: 2px 2px 0 0; background: #f2b632; }
.pp-doc { width: 14px; height: 17px; border-radius: 2px; background: #fff; border: 1.5px solid #8a99ad; position: relative; flex: none; }
.pp-doc::after { content: ''; position: absolute; left: -3px; bottom: 2px; width: 12px; height: 6px; border-radius: 1px; background: var(--c, #2b5fb4); }
.pp-dbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; padding: 8px; background: rgba(238, 242, 247, .95); }
.pp-dbar span { width: 26px; height: 26px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #d6dee8; }
.pp-dbar span:first-child { background: conic-gradient(from 0deg, #2a8cf0 0 25%, #3aa0ff 0 50%, #1f7ad8 0 75%, #2a8cf0 0); border-radius: 4px; transform: scale(.8); }
.pp-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 14px; background: #fff; color: var(--pp-ink); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); font-size: .82rem; line-height: 1.3; animation: ppfloat 6s ease-in-out infinite; }
.pp-float b { display: block; font-size: .86rem; }
.pp-float small { color: var(--pp-muted); }
.pp-float .ms { font-size: 1.5rem; color: var(--pp-teal2); }
.pp-f1 { left: -10px; bottom: 58px; }
.pp-f2 { right: -6px; top: 42%; animation-delay: -2s; }
.pp-f2 kbd { display: inline-block; padding: .1rem .4rem; border: 1px solid #cbd5e1; border-bottom-width: 3px; border-radius: 6px; font: 800 .8rem Inter, sans-serif; background: #f8fafc; }
.pp-f3 { right: 18px; top: -4px; background: var(--pp-gold); color: #1b1300; animation-delay: -4s; }
.pp-f3 .ms { color: #1b1300; }
@keyframes ppfloat { 50% { transform: translateY(-8px); } }

/* ---------- faixas ---------- */
.pp-sec { padding: 72px 0; }
.pp-intro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 44px 0 8px; }
.pp-intro div { padding-top: 16px; border-top: 3px solid var(--pp-teal); }
.pp-intro h3 { margin: .45rem 0 .35rem; font: 800 1.15rem/1.3 Manrope, Inter, sans-serif; color: var(--pp-navy); }
.pp-intro p { margin: 0; color: var(--pp-muted); font-size: .95rem; }

/* laboratório (vitrine) */
.pp-labsec { background: linear-gradient(180deg, #fff, #f1f7fc); border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); }
.pp-labgrid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.pp-feats { display: grid; gap: .8rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.pp-feats li { display: flex; gap: .8rem; align-items: flex-start; }
.pp-feats .ms { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: #e3f7f1; color: var(--pp-teal2); font-size: 1.3rem; }
.pp-feats b { display: block; color: var(--pp-navy); }
.pp-feats span { color: var(--pp-muted); font-size: .93rem; }
.pp-labcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.pp-labcard { position: relative; padding: 1rem 1rem .95rem; border-radius: 16px; background: #fff; border: 1px solid var(--pp-line); box-shadow: 0 16px 30px -26px rgba(11, 37, 69, .6); }
.pp-labcard .ms { color: var(--pp-blue); font-size: 1.5rem; }
.pp-labcard small { display: block; margin-top: .4rem; font-size: .7rem; font-weight: 900; letter-spacing: .12em; color: var(--pp-teal2); text-transform: uppercase; }
.pp-labcard b { display: block; margin-top: .15rem; font: 800 .98rem/1.3 Manrope, Inter, sans-serif; color: var(--pp-navy); }
.pp-labcard.is-done::after { content: '✓'; position: absolute; right: .8rem; top: .8rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--pp-teal); color: #fff; font-weight: 900; font-size: .8rem; }

/* programa */
.pp-prog { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; margin-top: 2rem; }
.pp-journey { display: flex; gap: .4rem; align-items: center; margin: 0 0 1.2rem; padding: .8rem 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--pp-line); }
.pp-journey b { margin-right: .6rem; font-size: .8rem; color: var(--pp-navy); white-space: nowrap; }
.pp-jdots { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: .35rem; }
.pp-jdots i { height: 8px; border-radius: 4px; background: #e2ebf3; }
.pp-jdots i.is-done { background: var(--pp-teal); }
.pp-jdots i.is-cur { background: var(--pp-gold); }
.pp-journey span { margin-left: .6rem; font-size: .8rem; color: var(--pp-muted); white-space: nowrap; }
.pp-lessons { display: grid; gap: .9rem; }
.pp-lesson { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1rem; padding: 1.2rem 1.3rem; border-radius: var(--pp-r); background: #fff; border: 1px solid var(--pp-line); transition: border-color .2s, box-shadow .2s; }
.pp-lesson:hover { border-color: #b9d3e4; box-shadow: 0 18px 36px -30px rgba(11, 37, 69, .7); }
.pp-lesson.is-cur { border-color: var(--pp-gold); box-shadow: 0 0 0 3px rgba(244, 180, 0, .18); }
.pp-lesson.is-done { background: linear-gradient(90deg, #f0fbf7, #fff 40%); }
.pp-lico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #eaf4fb; color: var(--pp-blue); }
.pp-lico .ms { font-size: 1.7rem; }
.pp-lesson.is-done .pp-lico { background: #dff7ef; color: var(--pp-teal2); }
.pp-lesson.is-cur .pp-lico { background: #fff4d1; color: #a36f00; }
.pp-lmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pp-lnum { font-size: .72rem; font-weight: 900; letter-spacing: .14em; color: var(--pp-teal2); }
.pp-lstate { padding: .15rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 900; letter-spacing: .06em; background: #eef2f7; color: #64748b; text-transform: uppercase; }
.pp-lstate.is-done { background: #d9fff3; color: #007a66; }
.pp-lstate.is-cur { background: #fff3c4; color: #8a6200; }
.pp-lesson h3 { margin: .3rem 0 .25rem; font: 800 1.12rem/1.3 Manrope, Inter, sans-serif; color: var(--pp-navy); }
.pp-lesson p { margin: 0; color: var(--pp-muted); font-size: .94rem; }
.pp-lfoot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--pp-line); }
.pp-lab-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; color: #1f5f9e; }
.pp-lab-tag .ms { font-size: 1.1rem; }
.pp-lfoot .pp-btn { min-height: 40px; margin-left: auto; padding: 0 1rem; font-size: .88rem; border-radius: 10px; }
.pp-aside { position: sticky; top: 20px; padding: 1.5rem; border-radius: 22px; background: #fff; border: 1px solid var(--pp-line); box-shadow: 0 30px 60px -44px rgba(11, 37, 69, .8); }
.pp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--pp-line); }
.pp-facts .ms { color: var(--pp-teal2); }
.pp-facts .is-gold .ms { color: var(--pp-gold); }
.pp-facts small { display: block; margin-top: .3rem; font-size: .66rem; font-weight: 900; letter-spacing: .08em; color: var(--pp-muted); text-transform: uppercase; }
.pp-facts b { display: block; font-size: .92rem; color: var(--pp-navy); }
.pp-aside h3 { margin: 1rem 0 .3rem; font: 800 1.5rem/1.2 Manrope, Inter, sans-serif; color: var(--pp-navy); }
.pp-aside p { margin: 0 0 1rem; color: var(--pp-muted); font-size: .94rem; }
.pp-aside .pp-btn { width: 100%; }
.pp-ring { display: flex; align-items: center; gap: .9rem; margin: 1rem 0; padding: .8rem; border-radius: 14px; background: #f4f8fb; }
.pp-ring svg { width: 58px; height: 58px; flex: none; transform: rotate(-90deg); }
.pp-ring b { display: block; color: var(--pp-navy); }
.pp-ring small { color: var(--pp-muted); }
.pp-aside-links { display: grid; gap: .4rem; margin-top: 1rem; font-size: .88rem; }
.pp-aside-links a { color: var(--pp-teal2); font-weight: 800; text-decoration: none; }

/* certificado + faq */
.pp-certsec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pp-cert { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: 1.4rem; border-radius: 22px; background: #fff; border: 1px solid var(--pp-line); }
.pp-cert-card { aspect-ratio: 1.41; padding: .9rem; border-radius: 10px; background: linear-gradient(135deg, #fffdf5, #fff); border: 2px solid #f1d27a; box-shadow: 0 16px 30px -20px rgba(160, 110, 0, .6); display: flex; flex-direction: column; justify-content: space-between; font-size: .6rem; color: #6b5a2a; }
.pp-cert-card b { font: 800 .82rem/1.2 Manrope, sans-serif; color: var(--pp-navy); }
.pp-cert-card i { font-style: normal; font-family: Georgia, serif; font-size: .78rem; color: #334155; }
.pp-cert h3 { margin: .3rem 0 .5rem; font: 800 1.3rem/1.25 Manrope, sans-serif; color: var(--pp-navy); }
.pp-cert ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: .92rem; color: var(--pp-muted); }
.pp-cert li { display: flex; gap: .45rem; }
.pp-cert li .ms { color: var(--pp-teal2); }
.pp-faq details { border-bottom: 1px solid var(--pp-line); }
.pp-faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-weight: 800; color: var(--pp-navy); cursor: pointer; list-style: none; }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: var(--pp-teal2); }
.pp-faq details[open] summary::after { content: '–'; }
.pp-faq details p { margin: 0 0 1rem; color: var(--pp-muted); }
.pp-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.2rem 2.4rem; border-radius: 26px; color: #fff; background: radial-gradient(600px 300px at 90% 0%, rgba(0, 204, 163, .35), transparent 60%), linear-gradient(135deg, #061a2b, #0b3050); }
.pp-band h2 { margin: .3rem 0 .4rem; font: 800 clamp(1.5rem, 3vw, 2.1rem)/1.2 Manrope, sans-serif; }
.pp-band p { margin: 0; color: #cfe0ec; max-width: 620px; }
.pp-band .pp-k { color: #7ee2c5; }

/* barra fixa (celular) */
.pp-sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .8rem .7rem 1rem; border-radius: 16px; background: var(--pp-navy); color: #fff; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); transform: translateY(140%); transition: transform .3s; }
.pp-sticky.is-on { transform: none; }
.pp-sticky b { font-size: .92rem; }
.pp-sticky .pp-btn { min-height: 42px; padding: 0 1rem; font-size: .9rem; }

/* ================= sala de aula ================= */
body.pp-lock { overflow: hidden; }
.pps { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: #f6f9fc; --pps-scale: 1; animation: ppsin .22s ease-out; }
@keyframes ppsin { from { opacity: 0; transform: translateY(8px); } }
.pps-top { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.2rem; background: var(--pp-navy); color: #fff; }
.pps-top .pp-k { color: #7ee2c5; font-size: .66rem; }
.pps-top h2 { margin: .1rem 0 0; font: 800 1.05rem/1.2 Manrope, sans-serif; }
.pps-tools { display: flex; gap: .45rem; margin-left: auto; }
.pps-tb { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .8rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; font: 800 .82rem Inter, sans-serif; cursor: pointer; }
.pps-tb:hover { background: rgba(255, 255, 255, .14); }
.pps-tb.is-on { background: var(--pp-teal2); border-color: var(--pp-teal2); }
.pps-steps { display: flex; align-items: center; gap: .45rem; padding: .6rem 1.2rem; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--pp-line); scrollbar-width: thin; }
.pps-steps > b { flex: none; margin-right: .4rem; font-size: .68rem; font-weight: 900; letter-spacing: .14em; color: var(--pp-muted); }
.pps-step { flex: none; display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .75rem 0 .35rem; border: 1px solid var(--pp-line); border-radius: 999px; background: #fff; color: var(--pp-ink); font: 700 .78rem Inter, sans-serif; cursor: pointer; max-width: 220px; }
.pps-step i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eef2f7; font-style: normal; font-size: .72rem; font-weight: 900; }
.pps-step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pps-step.is-seen i { background: #d9fff3; color: #007a66; }
.pps-step.is-on { background: var(--pp-navy); border-color: var(--pp-navy); color: #fff; }
.pps-step.is-on i { background: var(--pp-gold); color: #1b1300; }
.pps-step.is-lab i, .pps-step.is-eval i { background: #e6f1fd; color: var(--pp-blue); }
.pps-step .ms { font-size: 1rem; }
.pps-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; }
.pps.is-focus .pps-body { grid-template-columns: 0 minmax(0, 1fr); }
.pps.is-focus .pps-side { visibility: hidden; }
.pps-side { overflow: auto; padding: 1.2rem 1rem; border-right: 1px solid var(--pp-line); background: #fff; }
.pps-side h3 { margin: 0 0 .2rem; font-size: .68rem; font-weight: 900; letter-spacing: .14em; color: var(--pp-muted); text-transform: uppercase; }
.pps-side h4 { margin: 0 0 1rem; font: 800 .98rem/1.3 Manrope, sans-serif; color: var(--pp-navy); }
.pps-ls { display: grid; gap: .3rem; }
.pps-l { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .6rem; align-items: center; width: 100%; padding: .6rem .6rem; border: 0; border-left: 3px solid transparent; border-radius: 12px; background: transparent; text-align: left; color: var(--pp-ink); cursor: pointer; font: inherit; }
.pps-l:hover:not(:disabled) { background: #f2f7fb; }
.pps-l:disabled { cursor: not-allowed; opacity: .55; }
.pps-l.is-on { background: #eafaf5; border-left-color: var(--pp-teal2); }
.pps-li { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #eef2f7; color: #64748b; }
.pps-l.is-done .pps-li { background: var(--pp-teal2); color: #fff; }
.pps-l.is-cur .pps-li { background: #fff4d1; color: #a36f00; }
.pps-l small { display: block; font-size: .66rem; font-weight: 900; letter-spacing: .08em; color: var(--pp-teal2); text-transform: uppercase; }
.pps-l.is-cur small { color: #a36f00; }
.pps-l:disabled small { color: #94a3b8; }
.pps-l b { display: block; font-size: .84rem; line-height: 1.3; }
.pps-prog { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--pp-line); font-size: .82rem; color: var(--pp-muted); }
.pps-prog b { display: block; color: var(--pp-navy); font-size: .95rem; }
.pps-bar { height: 8px; margin: .5rem 0; border-radius: 4px; background: #e2ebf3; overflow: hidden; }
.pps-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pp-teal), #3fa7d6); transition: width .5s; }
.pps-main { overflow: auto; scroll-behavior: smooth; }
.pps-art { width: min(860px, calc(100% - 40px)); margin: 0 auto; padding: 2.2rem 0 3rem; font-size: calc(1rem * var(--pps-scale)); }
.pps-kick { margin: 0; font-size: .74rem; font-weight: 900; letter-spacing: .18em; color: var(--pp-teal2); text-transform: uppercase; }
.pps-art h1 { margin: .4rem 0 0; font: 800 clamp(1.6rem, 3.4vw, 2.3rem)/1.15 Manrope, sans-serif; letter-spacing: -.02em; color: var(--pp-navy); }
.pps-pbar { height: 6px; margin: 1.1rem 0 1.6rem; border-radius: 3px; background: #e2ebf3; overflow: hidden; }
.pps-pbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pp-teal), #3fa7d6); transition: width .4s; }
.pps-page { padding: 1.8rem 2rem; border-radius: 20px; background: #fff; border: 1px solid var(--pp-line); box-shadow: 0 20px 44px -40px rgba(11, 37, 69, .8); animation: ppsin .25s ease-out; }
.pps-page h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font: 800 1.4em/1.25 Manrope, sans-serif; color: var(--pp-navy); }
.pps-page h2 .pps-pn { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: #e3f7f1; color: var(--pp-teal2); font-size: .85rem; }
.pps-page p, .pps-page li { color: #243b53; font-size: 1.04em; line-height: 1.75; }
.pps-page ol, .pps-page ul { padding-left: 1.3rem; }
.pps-page strong { color: var(--pp-navy); }
.pps-page .study-note, .pps-page .example-box { margin: 1.2rem 0; padding: 1rem 1.2rem; border-radius: 14px; font-size: .98em; line-height: 1.65; }
.pps-page .study-note { background: #eafaf5; border-left: 4px solid var(--pp-teal); }
.pps-page .example-box { background: #fff8e6; border-left: 4px solid var(--pp-gold); }
.pps-page .lesson-diagram { margin: 1.4rem 0; padding: 1.2rem; border-radius: 16px; background: #f4f8fb; border: 1px solid var(--pp-line); }
.pps-page .diagram-label { margin: 0 0 .7rem; font-size: .7rem; font-weight: 900; letter-spacing: .14em; color: var(--pp-teal2); text-transform: uppercase; }
.pps-page .mini-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
.pps-page .mini-flow span { flex: 1 1 120px; padding: .7rem .8rem; border-radius: 12px; background: #fff; border: 1px solid var(--pp-line); font-size: .88em; line-height: 1.35; text-align: center; }
.pps-page .mini-flow i { align-self: center; font-style: normal; font-weight: 900; color: var(--pp-teal2); }
.pps-page .mini-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.pps-page .mini-timeline span { padding: .8rem; border-radius: 12px; background: #fff; border: 1px solid var(--pp-line); }
.pps-page .mini-timeline b { display: block; color: var(--pp-blue); }
.pps-page .mini-timeline em { font-style: normal; font-size: .88em; }
.pps-page .mini-timeline i { display: none; }
.pps-page .diagram-table { display: grid; gap: 1px; border-radius: 12px; overflow: hidden; background: var(--pp-line); border: 1px solid var(--pp-line); }
.pps-page .diagram-table > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1px; }
.pps-page .diagram-table strong, .pps-page .diagram-table span { padding: .6rem .8rem; background: #fff; font-size: .88em; line-height: 1.4; }
.pps-page .diagram-table strong { background: var(--pp-navy); color: #fff; }
.pps-fig { margin: 1.4rem 0 0; }
.pps-fig img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--pp-line); }
.pps-fig figcaption { margin-top: .5rem; font-size: .8rem; color: var(--pp-muted); }
.pps-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.2rem; background: #fff; border-top: 1px solid var(--pp-line); }
.pps-info { display: flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; color: var(--pp-muted); }
.pps-info kbd { display: inline-grid; place-items: center; min-width: 24px; height: 22px; border: 1px solid var(--pp-line); border-bottom-width: 2px; border-radius: 6px; font: 700 .7rem Inter, sans-serif; background: #fff; }
.pps-foot .pp-btn { min-height: 44px; }
.pps-empty { padding: 3rem 1rem; text-align: center; }
/* revisão e avaliação */
.pps-ex { margin-top: 1.2rem; padding: 1.3rem 1.4rem; border-radius: 18px; background: #fff; border: 1px solid var(--pp-line); }
.pps-ex h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font: 800 1.1em/1.3 Manrope, sans-serif; color: var(--pp-navy); }
.pps-ex h3 .ms { color: var(--pp-teal2); }
.pps-ex > p { margin: 0 0 .8rem; color: var(--pp-muted); }
.pps-opts { display: grid; gap: .5rem; }
.pps-opt { position: relative; display: flex; align-items: flex-start; gap: .7rem; padding: .75rem .9rem; border: 1.5px solid var(--pp-line); border-radius: 12px; background: #fff; cursor: pointer; line-height: 1.45; transition: border-color .15s, background .15s; }
.pps-opt:hover { border-color: #9cc7e3; }
.pps-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pps-opt i { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid #b8cfe0; font-style: normal; font-size: .78rem; font-weight: 900; color: var(--pp-muted); }
.pps-opt:has(input:checked) { border-color: var(--pp-teal2); background: #effcf8; }
.pps-opt:has(input:checked) i { background: var(--pp-teal2); border-color: var(--pp-teal2); color: #fff; }
.pps-opt:has(input:focus-visible) { outline: 3px solid #7ee2c5; outline-offset: 1px; }
.pps-opt.is-right { border-color: #16a34a; background: #effdf3; }
.pps-opt.is-wrong { border-color: #e0795f; background: #fff4f0; }
.pps-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .9rem; }
.pps-row .pp-btn { min-height: 42px; font-size: .9rem; }
.pps-fb { margin: .8rem 0 0; padding: .7rem .9rem; border-radius: 12px; font-size: .92em; line-height: 1.5; }
.pps-fb:empty { display: none; }
.pps-fb.is-ok { background: #e7f8ef; color: #0d5c33; }
.pps-fb.is-no { background: #fff4e5; color: #7a4100; }
.pps-sel { min-height: 42px; padding: 0 .8rem; border: 1.5px solid var(--pp-line); border-radius: 10px; font: inherit; background: #fff; }
.pps-seq { display: grid; gap: .45rem; }
.pps-seqb { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem .9rem; border: 1.5px dashed #b8cfe0; border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--pp-ink); }
.pps-seqb i { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 8px; background: #eef2f7; font-style: normal; font-weight: 900; font-size: .8rem; color: #94a3b8; }
.pps-seqb.is-picked { border-style: solid; border-color: var(--pp-teal2); background: #effcf8; }
.pps-seqb.is-picked i { background: var(--pp-teal2); color: #fff; }
.pps-mission label { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; cursor: pointer; }
.pps-mission input { width: 1.15rem; height: 1.15rem; margin-top: .25rem; accent-color: var(--pp-teal2); }
.pps-eval { margin-top: 1.6rem; padding: 1.6rem; border-radius: 22px; background: linear-gradient(180deg, #0b2545, #0a2038); color: #fff; }
.pps-eval h3 { display: flex; align-items: center; gap: .5rem; margin: 0; font: 800 1.35em/1.25 Manrope, sans-serif; }
.pps-eval h3 .ms { color: var(--pp-gold); }
.pps-eval > p { margin: .5rem 0 0; color: #cfe0ec; }
.pps-rules { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.pps-rules span { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .8rem; font-weight: 700; color: #dbe8f1; }
.pps-rules .ms { color: #7ee2c5; font-size: 1rem; }
.pps-qs { display: grid; gap: 1rem; margin-top: 1rem; }
.pps-q { padding: 1.1rem 1.2rem; border-radius: 16px; background: #fff; color: var(--pp-ink); }
.pps-q legend, .pps-q .pps-qt { display: block; margin-bottom: .7rem; font-weight: 800; color: var(--pp-navy); line-height: 1.45; }
.pps-q fieldset { margin: 0; padding: 0; border: 0; }
.pps-qfb { margin: .6rem 0 0; font-size: .88rem; line-height: 1.5; }
.pps-qfb.is-ok { color: #0d7a3f; }
.pps-qfb.is-no { color: #9a3a14; }
.pps-count { font-size: .86rem; font-weight: 700; color: #cfe0ec; }
.pps-result { margin-top: 1.2rem; padding: 1.2rem 1.3rem; border-radius: 16px; }
.pps-result.is-pass { background: linear-gradient(135deg, #e9fff7, #f5fffb); color: #0d4f3c; }
.pps-result.is-fail { background: #fff8f0; color: #6b3a00; }
.pps-result h4 { margin: 0 0 .3rem; font: 800 1.3rem/1.2 Manrope, sans-serif; color: var(--pp-navy); }
.pps-result p { margin: .2rem 0; }
.pps-score { display: flex; align-items: center; gap: 1rem; }
.pps-score strong { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 6px var(--pp-teal); font: 800 1.35rem Manrope, sans-serif; color: var(--pp-navy); }
.pps-result.is-fail .pps-score strong { box-shadow: inset 0 0 0 6px #f0a35e; }
.pps-labhost { min-height: 200px; }
.pps-labhost .otlab { margin-top: 0; }
.pps-loading { padding: 2rem; text-align: center; color: var(--pp-muted); }
.pps-confetti { position: fixed; inset: 0; z-index: 1200; pointer-events: none; overflow: hidden; }
.pps-confetti i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; animation: ppsfall linear forwards; }
@keyframes ppsfall { to { transform: translate(var(--dx), 110vh) rotate(720deg); } }
.pps-scrim { display: none; }

/* ---------- responsivo ---------- */
@media (max-width: 1020px) {
  .pp-hero-grid { grid-template-columns: 1fr; padding: 48px 0 56px; gap: 24px; }
  .pp-art { min-height: 340px; max-width: 560px; }
  .pp-labgrid, .pp-prog, .pp-certsec { grid-template-columns: 1fr; }
  .pp-aside { position: static; }
  .pps-body { grid-template-columns: 1fr; }
  .pps-side { position: fixed; z-index: 3; top: 0; bottom: 0; left: 0; width: min(330px, 86vw); transform: translateX(-102%); transition: transform .25s; box-shadow: 20px 0 50px -20px rgba(0, 0, 0, .4); }
  .pps.is-drawer .pps-side { transform: none; }
  .pps.is-drawer .pps-scrim { display: block; position: fixed; inset: 0; z-index: 2; background: rgba(6, 26, 43, .45); }
  .pps.is-focus .pps-side { visibility: visible; }
  [data-pps-focus] { display: none !important; }
}
@media (max-width: 680px) {
  .pp-wrap { width: calc(100% - 32px); }
  .pp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-art { min-height: 300px; }
  .pp-desk { inset: 14px 0 20px 0; transform: none; }
  .pp-f1 { left: 4px; bottom: 30px; }
  .pp-f2 { right: 4px; }
  .pp-intro { grid-template-columns: 1fr; gap: 18px; }
  .pp-labcards { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .pp-labcard { padding: .8rem; }
  .pp-sec { padding: 52px 0; }
  .pp-lesson { grid-template-columns: 1fr; gap: .6rem; padding: 1.05rem; }
  .pp-lico { width: 46px; height: 46px; border-radius: 14px; }
  .pp-lfoot .pp-btn { width: 100%; margin-left: 0; }
  .pp-journey span { display: none; }
  .pp-cert { grid-template-columns: 1fr; }
  .pp-cert-card { max-width: 260px; }
  .pp-band { padding: 1.6rem; }
  .pp-sticky { display: flex; }
  .pps-top { padding: .6rem .8rem; gap: .5rem; }
  .pps-top h2 { font-size: .9rem; }
  .pps-top .pp-k { display: none; }
  .pps-tb span:not(.ms) { display: none; }
  .pps-tb { padding: 0 .6rem; }
  .pps-steps { padding: .5rem .8rem; }
  .pps-steps > b { display: none; }
  .pps-step span { display: none; }
  .pps-step { padding: 0 .35rem; }
  .pps-step.is-on span { display: inline; }
  .pps-art { width: calc(100% - 24px); padding-top: 1.2rem; }
  .pps-page { padding: 1.2rem 1.1rem; border-radius: 16px; }
  .pps-page .mini-timeline { grid-template-columns: 1fr 1fr; }
  .pps-page .diagram-table > div { grid-template-columns: 1fr; }
  .pps-foot { padding: .6rem .8rem; }
  .pps-info { display: none; }
  .pps-foot .pp-btn { flex: 1; min-height: 46px; }
  .pps-eval { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .pp-float, .pps, .pps-page { animation: none; } html { scroll-behavior: auto; } }