@font-face{font-family:'PP Nikkei Maru';src:url(fonts/PPNikkeiMaru-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PP Nikkei Maru Light';src:url(fonts/PPNikkeiMaru-Light.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/Inter-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter Medium';src:url(fonts/Inter-Medium.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  --ground:#F6F6F6;--paper:#FFFFFF;--ink:#000000;--muted:#5C5C5C;--rule:#000000;
  --purple:#514DB8;--red:#FA4244;--teal:#00C4BA;--orange:#FF8800;
  --sans:'Inter',system-ui,sans-serif;--sans-m:'Inter',system-ui,sans-serif;
  --display:'PP Nikkei Maru',Georgia,serif;--lead:'PP Nikkei Maru Light','PP Nikkei Maru',Georgia,serif;
  --wrap:1180px;--text:720px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--ground);color:var(--ink);font:400 18px/1.65 var(--sans);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media print{body{display:none}}
a{color:inherit}
img{display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* topo */
.top{position:sticky;top:0;z-index:10;background:var(--ground);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.top img{height:36px;width:auto}
.top nav{display:flex;gap:28px;font:600 15px/1 var(--sans-m)}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--purple)}

/* faixa */
.faixa{display:block;height:auto}

/* hero da aula */
.hero{padding:88px 0 0;position:relative;overflow:hidden}
.hero .kicker{font:600 16px/1 var(--sans-m);color:var(--muted);margin-bottom:24px;display:flex;gap:16px;align-items:center}
.hero .kicker .bar{width:6px;height:24px;background:var(--orange)}
.hero h1{font:400 clamp(44px,7vw,96px)/1 var(--display);letter-spacing:-.02em;max-width:900px}
.hero .sub{font:400 clamp(22px,2.6vw,32px)/1.3 var(--lead);margin-top:28px;max-width:780px;color:var(--ink)}
.hero .faixa-full{margin-top:72px;width:100%;height:auto}

/* layout com sumário */
.layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;padding-top:80px;padding-bottom:120px}
.toc{position:sticky;top:112px;align-self:start;font:400 15px/1.4 var(--sans)}
.toc p{font:600 13px/1 var(--sans-m);color:var(--muted);margin-bottom:16px;letter-spacing:.02em}
.toc ol{list-style:none;border-left:1px solid var(--rule)}
.toc li a{display:block;padding:8px 0 8px 18px;text-decoration:none;margin-left:-1px;border-left:4px solid transparent}
.toc li a:hover,.toc li a.on{border-left-color:var(--purple);color:var(--purple)}
.toc .toc-sub{padding-left:18px;font-size:13px;color:var(--muted)}

/* capítulo */
.cap{max-width:var(--text)}
.cap + .cap{margin-top:120px;padding-top:80px;border-top:1px solid var(--rule)}
.cap-num{font:600 15px/1 var(--sans-m);color:var(--purple);margin-bottom:20px}
.cap h2{font:400 clamp(34px,4.4vw,52px)/1.05 var(--display);letter-spacing:-.015em;margin-bottom:48px}

.util,.intro,.concl{position:relative;margin-bottom:56px}
.util::before,.intro::before,.concl::before{display:block;font:600 14px/1 var(--sans-m);margin-bottom:14px;letter-spacing:.02em}
.util{background:var(--paper);padding:28px 32px 28px 36px;border-left:10px solid var(--purple)}
.util::before{content:'Para que serve';color:var(--purple)}
.util p{font:400 21px/1.5 var(--lead)}
.intro::before{content:'Introdução';color:var(--muted)}
.intro p{font:400 22px/1.5 var(--lead)}
.concl{margin:72px 0 0;padding:40px 0 0;border-top:6px solid var(--ink)}
.concl::before{content:'Conclusão';color:var(--ink)}
.concl p{font:400 22px/1.5 var(--lead)}

.corpo h3{font:400 32px/1.15 var(--display);margin:72px 0 22px;letter-spacing:-.01em;display:flex;gap:18px;align-items:flex-start}
.corpo h3::before{content:'';flex:none;width:6px;height:30px;background:var(--teal);margin-top:2px}
.corpo h3:first-child{margin-top:0}
.corpo h4{font:600 18px/1.3 var(--sans-m);margin:40px 0 12px}
.corpo p{margin-bottom:18px}
.corpo ul,.corpo ol{margin:0 0 22px 22px}
.corpo li{margin-bottom:10px;padding-left:4px}
.corpo li::marker{color:var(--purple)}
.li{font-family:var(--sans-m);font-weight:600}
em{font-style:italic}

/* destaques */
aside{margin:36px 0;padding:28px 32px;background:var(--paper);border-left:10px solid var(--orange)}
aside p:last-child,aside ul:last-child{margin-bottom:0}
aside .tag{font:600 14px/1.3 var(--sans-m);margin-bottom:14px;display:flex;align-items:center;gap:10px}
aside.ex{border-left-color:var(--orange)}
aside.ex .tag{color:#B35F00}
aside.caso{border-left-color:var(--red);background:var(--paper)}
aside.caso .tag{color:#C2272A}
aside.def{border-left-color:var(--teal)}
aside.def .tag{color:#007A73}
aside.livro{border-left-color:var(--purple)}
aside.livro .tag{color:var(--purple)}
aside .tag::before{content:'';width:22px;height:22px;flex:none;background-repeat:no-repeat;background-position:center}
aside.ex .tag::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B35F00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E")}
aside.caso .tag::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2272A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
aside.def .tag::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007A73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}
aside.livro .tag::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23514DB8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E")}

/* legenda dos destaques */
.legenda{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 64px;font:600 14px/1 var(--sans-m);color:var(--muted)}
.legenda span{display:flex;align-items:center;gap:10px}
.legenda i{width:6px;height:20px;display:block}

/* navegação entre aulas */
.pager{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--rule);padding:32px 0;margin-top:96px;font:600 15px/1.3 var(--sans-m)}
.pager a{text-decoration:none}
.pager a:hover{color:var(--purple)}
.pager small{display:block;font:400 13px/1 var(--sans);color:var(--muted);margin-bottom:8px}

/* rodapé */
.foot{background:var(--ink);color:var(--paper);padding:72px 0 64px;position:relative;overflow:hidden}
.foot .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.foot img{height:52px;width:auto}
.foot ul{list-style:none;font:400 16px/1.8 var(--sans);text-align:left}
.foot a{text-decoration:none}

/* índice */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0;border-top:1px solid var(--rule);margin:72px 0 120px}
.card{display:block;text-decoration:none;padding:32px 28px 36px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);min-height:240px;position:relative}
.card:hover{background:var(--paper)}
.card .n{font:400 64px/1 var(--display);color:var(--purple)}
.card h3{font:400 24px/1.15 var(--display);margin:20px 0 12px}
.card p{font-size:15px;color:var(--muted);line-height:1.5}
.card.ex .n{color:var(--muted)}
.card .badge{position:absolute;top:32px;right:28px;font:600 12px/1 var(--sans-m);padding:7px 10px;border:1px solid var(--ink)}
.card.soon{pointer-events:none}
.card.soon h3,.card.soon .n{opacity:.35}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:40px;padding-top:48px}
  .toc{position:static}
  .top nav{display:none}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  body{font-size:17px}
  .util,aside{padding:22px 20px 22px 22px}
  .corpo h3{font-size:26px}
  .hero{padding-top:56px}
}