/* Mercado Livre do Zero: estilo compartilhado de todas as páginas.
   Mobile primeiro. Abaixo de 1024px: barra no topo, gaveta de menu e conteúdo
   em coluna única. A partir de 1024px: moldura com menu lateral amarelo e foto
   em círculo; a partir de 1200px, trilho de seções à direita.
   Amarelo, preto e cinza neutro. Títulos em Bungee, texto em Figtree, as duas
   servidas daqui mesmo (sem Google). */

@font-face {
  font-family: "Bungee";
  src: url("fonts/bungee.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --amarelo: #F4AE22;
  --amarelo-forte: #DE980C;
  --amarelo-claro: #FFE9B0;
  --amarelo-texto: #8A5D00;
  --tinta: #141414;
  --grafite: #262626;
  --fundo: #DCDCDC;
  --painel: #EEEEEE;
  --superficie: #FFFFFF;
  --cartao: #F6F6F6;
  --linha: #D2D2D2;
  --linha-forte: #B4B4B4;
  --texto: #1A1A1A;
  --texto-suave: #555555;
  --sobre-tinta: #F4F4F4;
  --sobre-tinta-suave: #BEBEBE;
  --anel: #FFFFFF;
  --link: #7A5200;
  --foco: var(--tinta);
  --ok: #1D6A40;
  --ok-fundo: #DCF0E3;
  --erro: #A2342B;
  --erro-fundo: #F8E0DC;
  --aviso-fundo: #FFF0C7;
  --t-vermelho: #D9463E;
  --t-laranja: #EE8A2A;
  --t-amarelo: #F2C523;
  --t-verde-claro: #8CC152;
  --t-verde: #2F9E57;
  --t-cinza: #A3A3A3;

  --f-display: "Bungee", "Arial Black", "Segoe UI Black", Impact, sans-serif;
  --f-texto: "Figtree", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --raio: 20px;
  --raio-m: 14px;
  --raio-p: 10px;
  --sombra-1: 0 1px 2px rgb(0 0 0 / .05), 0 4px 12px -6px rgb(0 0 0 / .14);
  --sombra-2: 0 18px 40px -18px rgb(0 0 0 / .45);
  --sombra-moldura: 0 32px 64px -38px rgb(0 0 0 / .55);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --t1: 120ms;
  --t2: 220ms;
  --t3: 380ms;
  --t4: 640ms;

  --z-sticky: 10;
  --z-barra: 20;
  --z-aviso: 60;
  --z-confete: 70;
  --z-portao: 80;

  --barra-h: 60px;
  --g: clamp(16px, 4.4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --amarelo: #FFC23B;
    --amarelo-forte: #FFCF66;
    --amarelo-claro: #3A2F14;
    --amarelo-texto: #FFC23B;
    --tinta: #0B0B0B;
    --grafite: #1F1F1F;
    --fundo: #0C0C0C;
    --painel: #161616;
    --superficie: #222222;
    --cartao: #1C1C1C;
    --linha: #333333;
    --linha-forte: #4A4A4A;
    --texto: #EFEFEF;
    --texto-suave: #B5B5B5;
    --sobre-tinta: #F0F0F0;
    --sobre-tinta-suave: #B5B5B5;
    --anel: #EFEFEF;
    --link: #FFC23B;
    --foco: var(--amarelo);
    --ok: #7DD3A0;
    --ok-fundo: #173323;
    --erro: #F29B90;
    --erro-fundo: #3B1E1A;
    --aviso-fundo: #33290F;
    --progresso-trilho: rgb(255 255 255 / .12);
    --t-cinza: #6E6E6E;
    --sombra-1: 0 1px 2px rgb(0 0 0 / .4), 0 6px 14px -8px rgb(0 0 0 / .7);
    --sombra-2: 0 18px 40px -18px rgb(0 0 0 / .9);
    --sombra-moldura: 0 32px 64px -38px rgb(0 0 0 / .95);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --amarelo: #FFC23B;
  --amarelo-forte: #FFCF66;
  --amarelo-claro: #3A2F14;
  --amarelo-texto: #FFC23B;
  --tinta: #0B0B0B;
  --grafite: #1F1F1F;
  --fundo: #0C0C0C;
  --painel: #161616;
  --superficie: #222222;
  --cartao: #1C1C1C;
  --linha: #333333;
  --linha-forte: #4A4A4A;
  --texto: #EFEFEF;
  --texto-suave: #B5B5B5;
  --sobre-tinta: #F0F0F0;
  --sobre-tinta-suave: #B5B5B5;
  --anel: #EFEFEF;
  --link: #FFC23B;
  --foco: var(--amarelo);
  --ok: #7DD3A0;
  --ok-fundo: #173323;
  --erro: #F29B90;
  --erro-fundo: #3B1E1A;
  --aviso-fundo: #33290F;
  --progresso-trilho: rgb(255 255 255 / .12);
  --t-cinza: #6E6E6E;
  --sombra-1: 0 1px 2px rgb(0 0 0 / .4), 0 6px 14px -8px rgb(0 0 0 / .7);
  --sombra-2: 0 18px 40px -18px rgb(0 0 0 / .9);
  --sombra-moldura: 0 32px 64px -38px rgb(0 0 0 / .95);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra-h) + env(safe-area-inset-top, 0px) + 16px);
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1.0625rem/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: fixed; left: 12px; top: 12px; z-index: var(--z-aviso);
  padding: 12px 18px; border-radius: 999px;
  background: var(--tinta); color: var(--amarelo);
  font-weight: 800; text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t2) var(--ease-out);
  --foco: var(--amarelo);
}
.pular:focus { transform: none; }
[hidden] { display: none !important; }
/* Textos que dependem do perfil esperam o JS para não trocar na frente da pessoa. */
html.js:not(.pronto) [data-pre] { visibility: hidden; }

/* Antes do JS montar a tela do nome: página escondida sob o amarelo. */
html[data-portao] body { overflow: hidden; }
html[data-portao] .curso { visibility: hidden; }
html[data-portao] body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-portao);
  background: var(--amarelo);
}

/* ---------- casca ---------- */
.curso { min-height: 100dvh; display: flex; flex-direction: column; }

.barra {
  position: sticky; top: 0; z-index: var(--z-barra);
  height: calc(var(--barra-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(6px, env(safe-area-inset-right, 0px)) 0 max(6px, env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 6px;
  background: var(--grafite); color: var(--sobre-tinta);
  view-transition-name: barra;
  --foco: var(--amarelo);
}
.barra__botao {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: inherit;
  transition: background-color var(--t1) var(--ease-out), scale var(--t1) var(--ease-out);
}
.barra__botao:active { background: rgb(255 255 255 / .12); scale: .94; }
.barra__botao svg { width: 26px; height: 26px; }
.barra__titulo { margin: 0; min-width: 0; display: grid; text-align: center; line-height: 1.2; }
.barra__sup { font-size: .75rem; font-weight: 700; color: var(--sobre-tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__nome { font-size: .98rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.leitura {
  position: fixed; left: 0; right: 0; z-index: var(--z-barra);
  top: calc(var(--barra-h) + env(safe-area-inset-top, 0px));
  height: 3px; pointer-events: none;
}
.leitura__barra {
  height: 100%; background: var(--amarelo);
  transform-origin: 0 50%; transform: scaleX(var(--leitura, 0));
}
@supports (animation-timeline: scroll()) {
  .leitura__barra { transform: scaleX(0); animation: leitura linear both; animation-timeline: scroll(root block); }
}
@keyframes leitura { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.moldura { flex: 1 0 auto; width: 100%; background: var(--painel); }
.lateral, .trilho { display: none; }
.painel {
  min-width: 0; display: grid; align-content: start;
  gap: clamp(48px, 9vw, 72px);
  padding: 28px var(--g) 56px;
}
.painel:focus { outline: none; }

/* ---------- anel e barra de progresso ---------- */
.anel { position: relative; width: 40px; height: 40px; display: block; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel__trilho { fill: none; stroke: rgb(255 255 255 / .2); stroke-width: 3.5; }
.anel__feito {
  fill: none; stroke: var(--amarelo); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100);
  transition: stroke-dashoffset 900ms var(--ease-expo), opacity var(--t2);
}
.anel[data-zero] .anel__feito { opacity: 0; }
.anel__texto { position: absolute; inset: 0; display: grid; place-items: center; font: 800 .75rem/1 var(--f-texto); font-variant-numeric: tabular-nums; }

.progresso { display: grid; gap: 8px; width: 100%; }
.progresso__rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .9rem; font-weight: 700; }
.progresso__rotulo b { font-weight: 800; font-variant-numeric: tabular-nums; }
.progresso__trilho {
  position: relative; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--progresso-trilho, rgb(0 0 0 / .1));
}
.progresso__barra {
  position: absolute; inset: 0;
  background: var(--progresso-cor, var(--amarelo));
  clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0 round 999px);
  transition: clip-path 900ms var(--ease-expo);
}
.sem-transicao, .sem-transicao * { transition: none !important; }

/* ---------- menu (gaveta e lateral) ---------- */
.menu { display: grid; gap: 2px; padding: 10px 12px 18px; }
.menu__grupo {
  margin: 14px 12px 4px; color: var(--tinta); opacity: .75;
  font: 800 .72rem/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase;
}
.menu__link {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 7px 12px 7px 8px; border-radius: 14px;
  color: var(--tinta); text-decoration: none;
  font: 700 .98rem/1.25 var(--f-texto);
  transition: background-color var(--t1) var(--ease-out), color var(--t1);
}
@media (hover: hover) { .menu__link:hover { background: rgb(0 0 0 / .07); } }
.menu__link:active { background: rgb(0 0 0 / .13); }
.menu__link[aria-current="page"] { background: var(--tinta); color: var(--amarelo); }
.menu__marca {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(0 0 0 / .1);
  font: 400 .85rem/1 var(--f-display);
  transition: background-color var(--t2), color var(--t2);
}
.menu__marca svg { width: 17px; height: 17px; }
.menu__link[data-estado="feita"] .menu__marca { background: var(--tinta); color: var(--amarelo); }
.menu__link[aria-current="page"] .menu__marca { background: var(--amarelo); color: var(--tinta); }
.menu__texto { flex: 1; min-width: 0; }
.menu__extra { flex: none; font-size: .78rem; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.menu__link[data-estado="andamento"] .menu__extra::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  background: currentColor; vertical-align: 1px;
}

/* ---------- gaveta (menu no celular) ---------- */
.gaveta {
  margin: 0; padding: 0; border: 0;
  inset: 0 auto 0 0; width: min(88vw, 360px); max-width: none; height: 100dvh; max-height: none;
  overflow: hidden auto; overscroll-behavior: contain; touch-action: pan-y;
  background: var(--amarelo); color: var(--tinta);
  box-shadow: var(--sombra-2);
  --foco: var(--tinta);
  --progresso-cor: var(--amarelo);
  --progresso-trilho: rgb(255 255 255 / .16);
}
.gaveta[open] { animation: gaveta-entra var(--t3) var(--ease-expo); }
.gaveta.is-fechando { animation: gaveta-sai var(--t2) var(--ease-in) forwards; }
.gaveta.is-arrastando { animation: none; transition: none; }
.gaveta::backdrop { background: rgb(0 0 0 / .5); animation: fundo-entra var(--t2) var(--ease-out); }
.gaveta.is-fechando::backdrop, .gaveta.is-fechando-arrasto::backdrop { animation: fundo-sai var(--t2) var(--ease-in) forwards; }
@keyframes gaveta-entra { from { transform: translateX(-100%); } }
@keyframes gaveta-sai { to { transform: translateX(-100%); } }
@keyframes fundo-entra { from { opacity: 0; } }
@keyframes fundo-sai { to { opacity: 0; } }
.gaveta__topo {
  display: grid; gap: 16px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 20px max(20px, env(safe-area-inset-left, 0px));
  background: var(--grafite); color: var(--sobre-tinta);
  --foco: var(--amarelo);
}
.gaveta__linha { display: flex; align-items: center; gap: 12px; }
.gaveta__quem { min-width: 0; flex: 1; }
.gaveta__nome { margin: 0; font: 800 1.1rem/1.25 var(--f-texto); overflow-wrap: anywhere; }
.gaveta__acesso { margin: 2px 0 0; font-size: .86rem; color: var(--sobre-tinta-suave); }
.gaveta__fechar {
  flex: none; align-self: start; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .08); color: inherit;
}
.gaveta__fechar svg { width: 22px; height: 22px; }
.gaveta__rodape {
  display: grid; gap: 4px; margin: 0 12px;
  padding: 10px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgb(0 0 0 / .14);
}
.gaveta__acao {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 8px 12px; border: 0; border-radius: 14px;
  background: transparent; color: var(--tinta); text-align: left; font-weight: 700;
  transition: background-color var(--t1);
}
@media (hover: hover) { .gaveta__acao:hover { background: rgb(0 0 0 / .07); } }
.gaveta__acao:active { background: rgb(0 0 0 / .13); }
.gaveta__acao svg { width: 22px; height: 22px; flex: none; }
.gaveta__dica { display: flex; gap: 12px; margin: 4px 0 0; padding: 8px 12px; font-size: .9rem; line-height: 1.45; }
.gaveta__dica svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }

.avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amarelo); color: var(--tinta);
  font: 400 1.35rem/1 var(--f-display);
}

/* ---------- conteúdo ---------- */
.cabeca { display: grid; gap: 14px; justify-items: start; }
.cabeca > * { max-width: 100%; }
.cabeca__foto { position: relative; width: 96px; height: 96px; margin: 6px 0 8px 6px; }
.cabeca__foto img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 5px var(--anel);
  view-transition-name: foto-aula;
}
.cabeca__foto::after {
  content: ""; position: absolute; inset: -13px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--amarelo); border-right-color: var(--amarelo);
  transform: rotate(-45deg);
}
.sobretitulo {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font: 800 .8rem/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-suave);
}
.sobretitulo::before { content: ""; flex: none; width: 36px; height: 3px; border-radius: 3px; background: var(--texto); }
.titulo {
  margin: 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.8rem, 1.2rem + 2.9vw, 3.2rem); line-height: 1.04; letter-spacing: .005em;
}
.abertura { margin: 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.55; max-width: 60ch; }
.estado-pagina { margin: 0; }

.indice {
  display: flex; gap: 8px; width: calc(100% + 2 * var(--g)); max-width: none;
  margin: 6px calc(-1 * var(--g)) 0; padding: 4px var(--g) 8px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--g);
}
.indice::-webkit-scrollbar { display: none; }
.indice a {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1);
  font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t2), color var(--t2), scale var(--t1);
}
.indice a:active { scale: .96; }
.indice a svg { width: 18px; height: 18px; }

.secao { display: grid; gap: 20px; min-width: 0; scroll-margin-top: calc(var(--barra-h) + env(safe-area-inset-top, 0px) + 20px); }
.secao > h2, .bloco > h2 {
  margin: 10px 0 0;
  font: 400 clamp(1.4rem, 1.1rem + 1.4vw, 1.95rem)/1.12 var(--f-display);
}
.secao > h2:first-child, .secao > .cabeca:first-child { margin-top: 0; }
.secao h3 { margin: 0; font: 800 1.15rem/1.3 var(--f-texto); }
.secao p, .secao li { max-width: 68ch; }
.secao p { margin: 0; }
.texto { display: grid; gap: 14px; }
.texto ul, .texto ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.texto li::marker { color: var(--amarelo-texto); }
.miudo { font-size: .93rem; color: var(--texto-suave); }

.pilula {
  justify-self: start; display: inline-block;
  padding: .5em .95em; border-radius: 999px;
  background: var(--amarelo); color: var(--tinta);
  font: 800 .82rem/1.1 var(--f-texto); letter-spacing: .01em;
}
.pilula--tinta { background: var(--tinta); color: var(--amarelo); }
.pilula--ok { background: var(--ok-fundo); color: var(--ok); }
.pilula--erro { background: var(--erro-fundo); color: var(--erro); }

.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.bloco { display: grid; gap: 18px; min-width: 0; align-content: start; }

/* números em círculo preto */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 14px; justify-items: center; }
.numero {
  width: 100%; max-width: 160px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; gap: 6px; padding: 16px; text-align: center;
  background: var(--tinta); container-type: inline-size;
}
.numero b {
  font-family: var(--f-display); font-weight: 400; line-height: 1;
  font-size: clamp(1.1rem, 17cqi, 2rem); color: var(--amarelo); font-variant-numeric: tabular-nums;
}
.numero span { font: 700 .8rem/1.22 var(--f-texto); color: var(--sobre-tinta); }

/* lista com ícone amarelo */
.itens-icone { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.item-icone { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
.item-icone__icone {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amarelo); color: var(--tinta);
}
.item-icone__icone svg { width: 26px; height: 26px; }
.item-icone h3 { margin: 3px 0 2px; font: 800 1.05rem/1.3 var(--f-texto); }
.item-icone p { margin: 0; color: var(--texto-suave); }

/* passos numerados */
.passos { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: passo; }
.passos::before {
  content: ""; position: absolute; left: 38px; top: 30px; bottom: 30px; width: 2px;
  background: var(--linha-forte); border-radius: 2px;
}
.passos > li {
  position: relative; counter-increment: passo;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start;
  max-width: none; padding: 14px 16px 14px 14px; border-radius: var(--raio-m);
  background: var(--superficie); box-shadow: var(--sombra-1);
}
.passos > li::before {
  content: counter(passo);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--tinta); color: var(--amarelo);
  font: 400 1.2rem/48px var(--f-display); text-align: center;
}
.passos h3 { margin: 2px 0 4px; font: 800 1.06rem/1.3 var(--f-texto); }
.passos p { margin: 0; }
.quem {
  display: inline-block; margin-left: 4px; padding: .2em .65em; border-radius: 999px;
  font: 800 .72rem/1.4 var(--f-texto); letter-spacing: .02em; vertical-align: 2px; white-space: nowrap;
}
.quem--voce { background: var(--amarelo); color: var(--tinta); }
.quem--ml { background: var(--tinta); color: var(--sobre-tinta); }

/* caixas */
.quadro { display: grid; gap: 12px; padding: clamp(18px, 3vw, 26px); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra-1); }
.quadro p { margin: 0; }
.quadro--aviso { background: var(--aviso-fundo); box-shadow: none; }
.quadro--ok { background: var(--ok-fundo); box-shadow: none; }

/* painel escuro com itens (erros, insights, "nunca") */
.cartoes-escuros {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px;
  padding: 6px 20px; border-radius: var(--raio);
  background: var(--grafite); color: var(--sobre-tinta);
  --foco: var(--amarelo);
}
.cartao-escuro {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-content: start;
  padding: 18px 0; border-bottom: 1px solid rgb(255 255 255 / .1);
}
.cartao-escuro:last-child { border-bottom: 0; }
.cartao-escuro::before {
  content: ""; grid-row: 1 / span 2; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%;
  background: var(--amarelo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.cartoes-escuros--nao .cartao-escuro::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
.cartao-escuro h3 { margin: 0; color: var(--amarelo); font: 800 1.02rem/1.3 var(--f-texto); }
.cartao-escuro p { margin: 0; font-size: 1rem; color: var(--sobre-tinta); }

/* cartões com foto */
.fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.foto-cartao { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra-1); }
.foto-cartao img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.foto-cartao__corpo { display: grid; gap: 10px; align-content: start; padding: 16px 18px 20px; }
.foto-cartao__corpo h3 { margin: 0; font: 400 1.3rem/1.1 var(--f-display); }
.foto-cartao__corpo p { margin: 0; font-size: 1rem; }
.foto-cartao__libera { padding-top: 10px; border-top: 2px dashed var(--linha); }
.foto-cartao__libera strong { display: block; margin-bottom: 2px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }

/* tabela */
.tabela {
  overflow-x: auto; border-radius: var(--raio-m); box-shadow: var(--sombra-1);
  /* sombra na borda direita avisa que a tabela continua para o lado */
  background:
    linear-gradient(to right, var(--superficie) 30%, transparent) left center / 48px 100% no-repeat local,
    linear-gradient(to left, var(--superficie) 30%, transparent) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .2), transparent) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .2), transparent) right center / 16px 100% no-repeat scroll,
    var(--superficie);
}
.tabela table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.tabela th {
  padding: 12px 14px; text-align: left; vertical-align: bottom;
  background: var(--tinta); color: var(--sobre-tinta);
  font: 800 .8rem/1.3 var(--f-texto); letter-spacing: .03em;
}
.tabela td { padding: 12px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela--curta table { min-width: 0; }

/* Tabela no celular: cada linha vira um cartão, com o rótulo de cada célula vindo do cabeçalho (JS).
   3 ou 4 colunas: cartão em lista até 699px. 5 colunas ou mais: ficha em duas colunas até 1023px,
   porque nem no tablet ela cabe inteira. */
@media (max-width: 699px) {
  .tabela--cartoes { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .tabela--cartoes table, .tabela--cartoes tbody, .tabela--cartoes tr, .tabela--cartoes td { display: block; width: 100%; min-width: 0; }
  .tabela--cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela--cartoes tbody { display: grid; gap: 10px; }
  .tabela--cartoes tr { padding: 6px 16px; border-radius: var(--raio-m); background: var(--superficie); box-shadow: var(--sombra-1); }
  .tabela--cartoes td, .tabela--cartoes td.num, .tabela--cartoes tr:last-child td {
    display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--linha); text-align: left; white-space: normal;
  }
  .tabela--cartoes td:first-child, .tabela--cartoes tr:last-child td:first-child { display: block; padding: 12px 0 10px; font-weight: 800; font-size: 1.05rem; }
  .tabela--cartoes td:last-child, .tabela--cartoes tr:last-child td:last-child { border-bottom: 0; }
  .tabela--cartoes td::before { content: attr(data-rotulo); font-size: .84rem; font-weight: 700; line-height: 1.35; color: var(--texto-suave); }
  .tabela--cartoes td:first-child::before { display: none; }
}
@media (max-width: 1023px) {
  .tabela--grade { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .tabela--grade table, .tabela--grade tbody, .tabela--grade tr, .tabela--grade td { display: block; width: 100%; min-width: 0; }
  .tabela--grade thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela--grade tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
  .tabela--grade tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-content: start;
    padding: 14px 16px 8px; border-radius: var(--raio-m); background: var(--superficie); box-shadow: var(--sombra-1);
  }
  .tabela--grade td, .tabela--grade td.num, .tabela--grade tr:last-child td {
    display: grid; gap: 2px; align-content: start;
    padding: 8px 0 10px; border-bottom: 0; border-top: 1px solid var(--linha); text-align: left; white-space: normal;
  }
  .tabela--grade td:first-child, .tabela--grade tr:last-child td:first-child { grid-column: 1 / -1; border-top: 0; padding: 0 0 10px; font-weight: 800; font-size: 1.05rem; }
  .tabela--grade td::before { content: attr(data-rotulo); font-size: .8rem; font-weight: 700; line-height: 1.35; color: var(--texto-suave); }
  .tabela--grade td:first-child::before { display: none; }
}

/* glossário */
.termos { margin: 0; display: grid; gap: 10px; }
.termo { display: grid; gap: 4px; padding: 16px 20px; border-radius: var(--raio-m); background: var(--superficie); box-shadow: var(--sombra-1); }
.termo dt { font: 800 1.08rem/1.3 var(--f-texto); }
.termo dd { margin: 0; max-width: 70ch; }
.termo .tambem { font-size: .93rem; color: var(--texto-suave); }
.busca { display: grid; gap: 8px; width: 100%; }
.busca label { font-weight: 800; }
.busca__campo { position: relative; }
.busca__campo svg { position: absolute; left: 15px; top: 50%; width: 22px; height: 22px; translate: 0 -50%; color: var(--texto-suave); pointer-events: none; }
.busca input {
  width: 100%; min-height: 54px; padding: 12px 16px 12px 48px;
  border: 2px solid var(--linha); border-radius: var(--raio-m);
  background: var(--superficie); font-size: 1.05rem;
  transition: border-color var(--t1), box-shadow var(--t2);
}
.busca input:focus { outline: none; border-color: var(--texto); box-shadow: 0 0 0 4px rgb(244 174 34 / .45); }
.busca__vazio { margin: 0; padding: 18px 20px; border-radius: var(--raio-m); background: var(--superficie); }

/* termômetro da reputação */
.termometro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 6px; }
.termometro__faixa { display: grid; gap: 8px; text-align: center; font: 700 .84rem/1.25 var(--f-texto); color: var(--texto-suave); }
.termometro__faixa::before { content: ""; height: 26px; border-radius: 8px; background: var(--cor); }
.termometro__faixa--destaque { color: var(--texto); }
.termometro__faixa--destaque::before { box-shadow: 0 0 0 3px var(--painel), 0 0 0 5px var(--texto); }

/* linha do tempo: vertical no celular, horizontal no desktop */
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; }
.linha-tempo li { position: relative; display: grid; gap: 4px; max-width: none; padding: 0 0 22px 36px; }
.linha-tempo li::before {
  content: ""; position: absolute; left: 4px; top: 5px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--amarelo); box-shadow: 0 0 0 4px var(--painel), 0 0 0 6px var(--tinta);
}
.linha-tempo li::after { content: ""; position: absolute; left: 11px; top: 28px; bottom: 2px; width: 2px; background: var(--linha-forte); }
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li:last-child::after { display: none; }
.linha-tempo b { font: 400 1.05rem/1.2 var(--f-display); }
.linha-tempo p { margin: 0; font-size: 1rem; }

.fonte {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 18px 20px; border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra-1);
}
.fonte p { margin: 0; }
.duvida { display: flex; gap: 12px; align-items: center; margin: 0; font-size: 1.02rem; }
.duvida svg { flex: none; width: 26px; height: 26px; }

/* ---------- botões ---------- */
.botao {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border: 0; border-radius: 999px;
  background: var(--tinta); color: var(--amarelo);
  font: 800 1rem/1.2 var(--f-texto); letter-spacing: .01em; text-align: center; text-decoration: none;
  transition: transform var(--t1) var(--ease-out), box-shadow var(--t2) var(--ease-out), background-color var(--t2), color var(--t2);
}
.botao svg { width: 20px; height: 20px; flex: none; transition: transform var(--t2) var(--ease-out); }
.botao:active { transform: scale(.97); }
@media (hover: hover) {
  .botao:hover { text-decoration: none; box-shadow: 0 10px 22px -12px rgb(0 0 0 / .65); }
  .botao:hover .seta { transform: translateX(3px); }
}
.botao--amarelo { background: var(--amarelo); color: var(--tinta); --foco: var(--tinta); }
.botao--contorno { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) { .botao--contorno:hover { box-shadow: inset 0 0 0 2px currentColor, 0 10px 22px -14px rgb(0 0 0 / .5); } }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- atividades ---------- */
.atividade {
  display: grid; gap: 16px; padding: clamp(18px, 3.4vw, 30px);
  border-radius: var(--raio); background: var(--superficie);
  border: 1px solid var(--linha); box-shadow: var(--sombra-1);
}
.atividade__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .35em .8em .35em .55em; border-radius: 999px;
  background: var(--ok-fundo); color: var(--ok);
  font: 800 .8rem/1.1 var(--f-texto);
}
.selo svg { width: 16px; height: 16px; }
.selo.is-novo { animation: pop var(--t3) var(--ease-expo); }
.atividade__pergunta { margin: 0; font: 700 1.14rem/1.45 var(--f-texto); }
.opcoes { display: grid; gap: 10px; }
.opcao, .ordenar__item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 11px 16px 11px 11px;
  border: 2px solid var(--linha); border-radius: var(--raio-m);
  background: var(--cartao); color: var(--texto);
  font-size: 1.03rem; line-height: 1.35; text-align: left;
  transition: border-color var(--t1), background-color var(--t2), opacity var(--t2), transform var(--t1) var(--ease-out);
}
.opcao:active:not([aria-disabled="true"]), .ordenar__item:active:not(:disabled) { transform: scale(.985); }
@media (hover: hover) {
  .opcao:hover:not([aria-disabled="true"]), .ordenar__item:hover:not(:disabled), .segmento button:hover { border-color: var(--texto); }
}
.opcao[aria-disabled="true"], .ordenar__item:disabled { cursor: default; }
.opcao__letra, .ordenar__marca {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--linha-forte); background: var(--superficie);
  font: 800 .88rem/1 var(--f-texto);
  transition: background-color var(--t2), border-color var(--t2), color var(--t2);
}
.opcao__letra svg, .ordenar__marca svg { width: 18px; height: 18px; }
.opcao__texto { flex: 1; min-width: 0; }
.opcao.is-certa, .ordenar__item.is-certo { border-color: var(--ok); background: var(--ok-fundo); }
.opcao.is-certa .opcao__letra { border-color: var(--ok); background: var(--ok); color: #fff; animation: pop var(--t3) var(--ease-expo); }
.opcao.is-errada { border-color: var(--erro); background: var(--erro-fundo); animation: tremor .36s var(--ease-out); }
.opcao.is-errada .opcao__letra { border-color: var(--erro); background: var(--erro); color: #fff; }
.opcoes.is-resolvida .opcao:not(.is-certa) { opacity: .5; }
.retorno { margin: 0; border-radius: 12px; font-weight: 600; line-height: 1.45; }
.retorno.is-certo, .retorno.is-errado, .retorno.is-info { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; }
.retorno svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.retorno.is-certo { background: var(--ok-fundo); color: var(--ok); }
.retorno.is-errado { background: var(--erro-fundo); color: var(--erro); }
.retorno.is-info { background: var(--cartao); color: var(--texto); }
.retorno.is-entrando { animation: retorno-entra var(--t3) var(--ease-expo); }

.ordenar__itens { display: grid; gap: 10px; }
.ordenar__marca { border-style: dashed; font-family: var(--f-display); font-weight: 400; }
.ordenar__item.is-certo .ordenar__marca { border: 0; background: var(--tinta); color: var(--amarelo); animation: pop var(--t3) var(--ease-expo); }
.ordenar__item.is-tremor { animation: tremor .36s var(--ease-out); border-color: var(--erro); }

.pares { display: grid; gap: 12px; }
.par {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 12px 14px; border: 2px solid transparent; border-radius: var(--raio-m); background: var(--cartao);
  transition: border-color var(--t2), background-color var(--t2);
}
.par.is-certo { border-color: var(--ok); background: var(--ok-fundo); }
.par.is-errado { border-color: var(--erro); background: var(--erro-fundo); }
.par__nome { font-weight: 700; }
.par__nota { grid-column: 1 / -1; margin: 0; font-size: .98rem; }
.par__nota:empty { display: none; }
.par__nota.is-entrando { animation: retorno-entra var(--t3) var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 70ms); }
.segmento { display: flex; flex-wrap: wrap; gap: 6px; }
.segmento button {
  flex: 1 1 auto; min-height: 46px; padding: 8px 14px;
  border: 2px solid var(--linha); border-radius: 12px;
  background: var(--superficie); color: var(--texto);
  font-size: .96rem; font-weight: 700;
  transition: background-color var(--t2), color var(--t2), border-color var(--t2), transform var(--t1);
}
.segmento button:active { transform: scale(.97); }
.segmento button[aria-pressed="true"] { background: var(--tinta); color: var(--amarelo); border-color: var(--tinta); }

/* calculadora */
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.calc__placar {
  position: sticky; z-index: var(--z-sticky);
  top: calc(var(--barra-h) + env(safe-area-inset-top, 0px) + 12px);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--raio-m);
  background: var(--tinta); color: var(--sobre-tinta);
  box-shadow: 0 0 0 6px var(--superficie), var(--sombra-2);
  font-weight: 700; font-size: .9rem;
}
.calc__placar span { white-space: nowrap; }
.calc__placar b { color: var(--amarelo); font: 800 clamp(1rem, .7rem + 1.6vw, 1.2rem)/1 var(--f-texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__placar.is-negativo b, .calc__resultado.is-negativo .calc__destaque b { color: #FF8E80; }
.calc__campos { display: grid; gap: 14px; align-content: start; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 700; font-size: 1rem; }
.campo small { color: var(--texto-suave); font-size: .9rem; }
.campo input, .campo select {
  width: 100%; min-height: 52px; padding: 11px 14px;
  border: 2px solid var(--linha); border-radius: 12px;
  background: var(--cartao); color: var(--texto); font-size: 1.1rem;
  transition: border-color var(--t1), box-shadow var(--t2);
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--texto); box-shadow: 0 0 0 4px rgb(244 174 34 / .45); }
.calc__resultado {
  display: grid; gap: 10px; align-content: start; padding: 22px;
  border-radius: var(--raio); background: var(--tinta); color: var(--sobre-tinta);
  --foco: var(--amarelo);
}
.calc__linha {
  display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px;
  border-bottom: 1px solid rgb(255 255 255 / .14);
  font-size: 1.02rem; font-variant-numeric: tabular-nums;
}
.calc__linha:last-of-type { border-bottom: 0; }
.calc__linha b { white-space: nowrap; }
.calc__destaque { display: grid; gap: 6px; margin-top: 6px; }
.calc__destaque span { font: 800 .8rem/1.2 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--sobre-tinta-suave); }
.calc__destaque b { font: 800 clamp(1.9rem, 1.5rem + 2vw, 2.5rem)/1 var(--f-texto); color: var(--amarelo); font-variant-numeric: tabular-nums; }
.calc__alerta { margin: 4px 0 0; font-size: .98rem; }

/* tarefas na loja */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist label {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 14px 16px; border-radius: var(--raio-m);
  background: var(--superficie); box-shadow: var(--sombra-1); cursor: pointer;
  transition: background-color var(--t2);
}
.checklist input {
  -webkit-appearance: none; appearance: none; margin: 0;
  width: 30px; height: 30px; border-radius: 9px;
  border: 2px solid var(--linha-forte); background: var(--cartao);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--t2) var(--ease-out), border-color var(--t2), transform var(--t1);
}
.checklist input::after {
  content: ""; width: 18px; height: 18px; background: var(--amarelo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t3) var(--ease-out);
}
.checklist input:checked { background: var(--tinta); border-color: var(--tinta); }
.checklist input:checked::after { clip-path: inset(0 0 0 0); }
.checklist input:active { transform: scale(.9); }
.checklist input:focus-visible { outline-offset: 2px; }
.checklist input + span { transition: color var(--t2); }
.checklist input:checked + span { color: var(--texto-suave); text-decoration: line-through 1.5px var(--linha-forte); }

/* fim da aula */
.fim {
  display: grid; gap: 20px; padding: clamp(20px, 4vw, 30px);
  border-radius: var(--raio); background: var(--grafite); color: var(--sobre-tinta);
  --foco: var(--amarelo);
  --progresso-trilho: rgb(255 255 255 / .15);
}
.fim__titulo { margin: 0; font: 400 clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem)/1.1 var(--f-display); color: var(--amarelo); }
.fim__texto { margin: 8px 0 0; color: var(--sobre-tinta); }
.fim__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.fim__lista li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgb(255 255 255 / .12); max-width: none; }
.fim__lista li:last-child { border-bottom: 0; }
.fim__lista b { font-variant-numeric: tabular-nums; }
.fim .botao { flex: 1 1 240px; }
.fim .botao--contorno { color: var(--sobre-tinta); }
.fim .desfazer {
  flex: 0 0 auto; min-height: 44px; padding: 8px 4px; border: 0; background: none;
  color: var(--sobre-tinta-suave); font-weight: 700; text-decoration: underline; text-underline-offset: .2em;
}

/* ---------- página inicial ---------- */
.capa {
  position: relative; display: grid; gap: 28px; overflow: clip;
  padding: 26px var(--g) 36px; background: var(--superficie);
}
.capa__texto { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.capa__ola { margin: 0; font: 400 clamp(1.15rem, .95rem + 1vw, 1.65rem)/1.15 var(--f-display); color: var(--amarelo-texto); overflow-wrap: anywhere; }
.capa__titulo { margin: 0; font-family: var(--f-display); font-weight: 400; line-height: .98; letter-spacing: .005em; }
.capa__titulo span { display: block; }
.capa__titulo .l1 { font-size: clamp(1.7rem, 1.05rem + 3.4vw, 3.6rem); }
.capa__titulo .l2 { font-size: clamp(2.6rem, 1.3rem + 6.4vw, 5.4rem); color: var(--amarelo); -webkit-text-stroke: 2px var(--tinta); paint-order: stroke fill; }
.capa__sub { order: 9; margin: 0; max-width: 46ch; color: var(--texto-suave); font-size: 1.06rem; }
@media (min-width: 1024px) { .capa__sub { order: 0; } }
.capa__estado {
  width: 100%; max-width: 460px; display: grid; gap: 12px;
  padding: 16px 18px; border-radius: var(--raio-m); background: var(--cartao);
}
.capa__acesso { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .93rem; font-weight: 600; color: var(--texto-suave); }
.capa__acesso svg { width: 18px; height: 18px; flex: none; }
.capa__contagem { margin: 0; font-size: .9rem; color: var(--texto-suave); }
.capa .botoes { width: 100%; }
.capa .botoes .botao { flex: 1 1 210px; }

.orbita {
  --s: min(58vw, 290px);
  --r: calc(var(--s) / 2 + 30px);
  position: relative; width: var(--s); aspect-ratio: 1;
  justify-self: center; margin: 34px 56px 34px 0;
}
.orbita__foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.orbita__arco { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); overflow: visible; pointer-events: none; }
.orbita__arco circle { fill: none; }
.orbita__trilho { stroke: var(--linha-forte); stroke-width: .5; stroke-dasharray: 50 50; }
.orbita__feito {
  stroke: var(--amarelo); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: calc(var(--arco, 0) * 50) 100;
  transition: stroke-dasharray 1100ms var(--ease-expo);
}
.orbita__arco .ponto { fill: var(--amarelo); stroke: none; }
.orbita__icone {
  position: absolute; left: 50%; top: 50%;
  width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--amarelo);
  box-shadow: 0 0 0 4px var(--superficie);
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
  transition: scale var(--t2) var(--ease-out), background-color var(--t3), color var(--t3);
}
.orbita__icone svg { width: 22px; height: 22px; }
@media (hover: hover) { .orbita__icone:hover { scale: 1.08; } }
.orbita__icone:active { scale: .94; }
.orbita__icone[data-estado="feita"] { background: var(--amarelo); color: var(--tinta); }
.orbita__icone[data-estado="feita"]::after {
  content: ""; position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 3px var(--superficie);
}
.orbita__icone[data-proxima]::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid var(--amarelo);
  animation: pulso 2.6s var(--ease-out) infinite;
}
@keyframes pulso { 0% { transform: scale(.88); opacity: .95; } 70%, 100% { transform: scale(1.4); opacity: 0; } }

/* trilha das aulas */
.trilha { --foto: 60px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.trilha::before, .trilha::after {
  content: ""; position: absolute; left: calc(12px + var(--foto) / 2 - 1px); width: 2px; border-radius: 2px;
  top: var(--trilha-topo, 42px); height: var(--trilha-alt, 0px);
}
.trilha::before { background: var(--linha-forte); }
.trilha::after {
  background: var(--amarelo); transform-origin: 50% 0; transform: scaleY(var(--trilha-p, 0));
  transition: transform 1100ms var(--ease-expo);
}
.trilha__item { position: relative; z-index: 1; }
.trilha__link {
  display: grid; grid-template-columns: var(--foto) minmax(0, 1fr) 22px; gap: 14px; align-items: center;
  padding: 12px; border-radius: var(--raio-m); color: var(--texto); text-decoration: none;
  transition: background-color var(--t2) var(--ease-out), box-shadow var(--t2) var(--ease-out), transform var(--t1) var(--ease-out);
}
@media (hover: hover) {
  .trilha__link:hover { background: var(--superficie); text-decoration: none; }
  .trilha__link:hover .trilha__seta { transform: translateX(3px); }
  .perfil:hover { background: rgb(255 255 255 / .8); }
}
.trilha__link:active { transform: scale(.99); }
.trilha__foto { position: relative; width: var(--foto); height: var(--foto); }
.trilha__foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--painel); }
.trilha__num {
  position: absolute; left: -5px; bottom: -5px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--amarelo);
  font: 400 .82rem/1 var(--f-display);
  box-shadow: 0 0 0 3px var(--painel);
  transition: background-color var(--t3), color var(--t3);
}
.trilha__num svg { width: 15px; height: 15px; }
.trilha__item[data-estado="feita"] .trilha__num { background: var(--amarelo); color: var(--tinta); }
.trilha__corpo { display: grid; gap: 3px; min-width: 0; }
.trilha__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .84rem; font-weight: 700; color: var(--texto-suave); }
.trilha__titulo { margin: 0; font: 400 1.05rem/1.18 var(--f-display); }
.trilha__resumo { margin: 0; font-size: .95rem; color: var(--texto-suave); }
.trilha__seta { width: 22px; height: 22px; color: var(--texto-suave); transition: transform var(--t2) var(--ease-out); }
.trilha__item[data-proxima] .trilha__link { background: var(--superficie); box-shadow: 0 0 0 2px var(--amarelo), var(--sombra-1); }
.trilha__item[data-proxima] .trilha__foto img { box-shadow: 0 0 0 4px var(--superficie); }
.trilha__item[data-proxima] .trilha__num { box-shadow: 0 0 0 3px var(--superficie); }
.trilha__item[data-proxima] .trilha__seta { color: var(--texto); }

.estado {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--cartao); color: var(--texto-suave);
  font-size: .76rem; font-weight: 800; white-space: nowrap;
}
.estado svg { width: 13px; height: 13px; }
.estado[data-estado="feita"] { background: var(--ok-fundo); color: var(--ok); }
.estado[data-estado="andamento"], .trilha__item[data-proxima] .estado[data-estado="nova"] { background: var(--amarelo-claro); color: var(--amarelo-texto); }

/* atalhos de consulta */
.atalhos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.atalho {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 22px; gap: 14px; align-items: center;
  height: 100%; padding: 14px 16px; border-radius: var(--raio-m);
  background: var(--superficie); color: var(--texto); text-decoration: none; box-shadow: var(--sombra-1);
  transition: transform var(--t2) var(--ease-out), box-shadow var(--t2) var(--ease-out);
}
.atalho:active { transform: scale(.985); }
@media (hover: hover) { .atalho:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); text-decoration: none; } }
.atalho__icone { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--amarelo); color: var(--tinta); }
.atalho__icone svg { width: 24px; height: 24px; }
.atalho b { display: block; font-weight: 800; }
.atalho small { display: block; margin-top: 2px; font-size: .9rem; line-height: 1.4; color: var(--texto-suave); }
.atalho > svg { width: 22px; height: 22px; color: var(--texto-suave); }

/* ---------- tela do nome ---------- */
.portao {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: auto; overscroll-behavior: contain;
  background: var(--amarelo); color: #141414;
  --foco: #141414;
  --tinta: #141414;
  --texto: #141414;
}
/* O próprio diálogo cobre a tela; fundo transparente deixa a cortina abrir de verdade na saída. */
.portao::backdrop { background: transparent; }
.portao__titulo:focus { outline: none; }
.portao__dentro {
  min-height: 100%; width: min(100%, 520px); margin-inline: auto;
  display: grid; align-content: center; justify-items: start; gap: 22px;
  padding: calc(32px + env(safe-area-inset-top, 0px)) var(--g) calc(32px + env(safe-area-inset-bottom, 0px));
}
.portao__marca { width: 64px; height: 64px; }
.portao__titulo { margin: 0; font-family: var(--f-display); font-weight: 400; line-height: .96; font-size: clamp(2.2rem, 1.3rem + 5vw, 3.8rem); }
.portao__titulo span { display: block; }
.portao__zero { color: #fff; -webkit-text-stroke: 2px #141414; paint-order: stroke fill; font-size: 1.3em; }
.portao__titulo--menor { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.6rem); line-height: 1.05; }
.portao__sub { margin: 0; max-width: 34ch; font-size: 1.12rem; line-height: 1.5; }
.portao__form { width: 100%; display: grid; gap: 10px; }
.portao__form label { font-weight: 800; font-size: 1.05rem; }
.portao__form input {
  width: 100%; min-height: 60px; padding: 14px 18px;
  border: 2px solid #141414; border-radius: 16px;
  background: #fff; color: #141414; font-size: 1.22rem; font-weight: 600;
  transition: box-shadow var(--t2);
}
.portao__form input::placeholder { color: #6B6B6B; font-weight: 500; }
.portao__form input:focus { outline: none; box-shadow: 0 0 0 4px rgb(20 20 20 / .22); }
.portao__form input.is-tremor { animation: tremor .36s var(--ease-out); }
.portao__form .botao { width: 100%; min-height: 60px; margin-top: 4px; font-size: 1.08rem; background: #141414; color: #F4AE22; }
.portao__erro { margin: 0; color: #7A1D14; font-weight: 800; }
.portao__nota { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .93rem; font-weight: 600; }
.portao__nota svg { width: 20px; height: 20px; flex: none; }
.portao__perfis { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 10px; }
.perfil-linha { display: flex; gap: 8px; align-items: stretch; }
.perfil {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr) 22px; gap: 14px; align-items: center;
  min-height: 70px; padding: 10px 14px; border: 2px solid #141414; border-radius: 18px;
  background: rgb(255 255 255 / .55); color: #141414; text-align: left;
  transition: background-color var(--t2), transform var(--t1) var(--ease-out);
}
.perfil:active { transform: scale(.985); }
.perfil .avatar { width: 48px; height: 48px; background: #141414; color: #F4AE22; font-size: 1.2rem; }
.perfil b { display: block; font-size: 1.1rem; overflow-wrap: anywhere; }
.perfil small { display: block; font-size: .88rem; font-weight: 600; opacity: .8; }
.perfil > svg { width: 22px; height: 22px; }
.perfil-remover {
  flex: none; width: 52px; border: 2px solid rgb(20 20 20 / .35); border-radius: 18px;
  background: transparent; color: #141414; display: grid; place-items: center;
}
.perfil-remover svg { width: 20px; height: 20px; }
.perfil-confirma {
  flex: 1; display: grid; gap: 10px; padding: 14px; border-radius: 18px;
  background: rgb(255 255 255 / .7); font-weight: 700;
}
.perfil-confirma .botoes .botao { flex: 1 1 120px; min-height: 48px; }
.portao__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.portao__link {
  min-height: 44px; padding: 8px 0; border: 0; background: none; color: #141414;
  font-weight: 800; text-decoration: underline; text-underline-offset: .22em;
}
.botao--clara { background: transparent; color: #141414; box-shadow: inset 0 0 0 2px #141414; }
.portao__dentro > * { animation: subir var(--t4) var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 60ms); }
.portao[data-entrada="cortina"] { animation: portao-desce 560ms var(--ease-expo); }
.portao.is-saindo { animation: portao-sai 620ms var(--ease-expo) forwards; }
.portao.is-saindo .portao__dentro { animation: some-subindo 260ms var(--ease-in) forwards; }
@keyframes portao-desce { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes portao-sai { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes some-subindo { to { opacity: 0; transform: translateY(-28px); } }

/* ---------- movimento ---------- */
@keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.55); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes tremor { 20% { transform: translateX(-6px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } 90% { transform: translateX(2px); } }
@keyframes retorno-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes surgir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes surgir-lado { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes estalar { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes varrer { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes foto-entra { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes icone-entra { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }

/* Revelação de listas: só para o que está abaixo da dobra na hora da carga (JS decide). */
.js [data-revelar="espera"] > * { opacity: 0; }
.js [data-revelar="ok"] > * { animation: surgir 560ms var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 55ms); }
.js .passos[data-revelar="ok"] > * { animation-name: surgir-lado; }
.js .numeros[data-revelar="ok"] > *, .js .atalhos[data-revelar="ok"] > * { animation-name: estalar; }
.js .termometro[data-revelar="ok"] > * { animation: varrer 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
.js .termometro[data-revelar="espera"] > * { opacity: 1; clip-path: inset(0 100% 0 0); }

/* Entrada da página inicial: uma vez por sessão. */
.entrada .capa__ola, .entrada .capa__titulo .l1, .entrada .capa__titulo .l2, .entrada .capa__estado, .entrada .capa .botoes, .entrada .capa__sub {
  animation: subir 760ms var(--ease-expo) both;
}
.entrada .capa__titulo .l1 { animation-delay: 70ms; }
.entrada .capa__titulo .l2 { animation-delay: 140ms; }
.entrada .capa__estado { animation-delay: 230ms; }
.entrada .capa .botoes { animation-delay: 300ms; }
.entrada .capa__sub { animation-delay: 360ms; }
.entrada .orbita__foto { animation: foto-entra 900ms var(--ease-expo) 120ms both; }
.entrada .orbita__icone { animation: icone-entra 560ms var(--ease-expo) both; animation-delay: calc(380ms + var(--k, 0) * 70ms); }

/* confete ao concluir aula */
.confete { position: fixed; inset: 0; z-index: var(--z-confete); pointer-events: none; overflow: hidden; }
.confete i { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 2px; }
.confete i.c { border-radius: 50%; }
.confete i.t { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.confete i.r { width: 6px; height: 14px; }

/* troca de página */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: vt-sai 170ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-entra 340ms var(--ease-out) both; }
::view-transition-group(foto-aula) { animation-duration: 460ms; animation-timing-function: var(--ease-expo); }
@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }

/* ---------- telas maiores ---------- */
@media (min-width: 640px) {
  .termometro { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .par { grid-template-columns: minmax(0, 1fr) auto; }
  .segmento button { flex: 0 0 auto; }
  .trilha { --foto: 72px; }
  .orbita { --s: min(52vw, 320px); }
}
@media (min-width: 768px) {
  body { font-size: 1.125rem; }
  .atalhos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cartoes-escuros { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 28px; }
  .cartoes-escuros > .cartao-escuro:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
@media (min-width: 860px) {
  .duas-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); }
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
  .calc__placar { display: none; }
  .calc__resultado { position: sticky; top: 24px; }
}
@media (min-width: 1024px) {
  html { scroll-padding-top: 28px; }
  .barra { display: none; }
  .leitura { top: 0; }
  .curso { padding: 28px clamp(20px, 3vw, 40px) 36px; gap: 28px; }
  .secao { scroll-margin-top: 28px; }
  .moldura {
    display: grid; grid-template-columns: 264px minmax(0, 1fr);
    max-width: 1280px; margin-inline: auto;
    border-radius: var(--raio); box-shadow: var(--sombra-moldura); overflow: clip;
  }
  .painel { padding: clamp(36px, 4.5vw, 64px); }
  .cabeca__foto { display: none; }
  .indice { width: auto; margin: 6px 0 0; padding: 4px 0 8px; flex-wrap: wrap; overflow: visible; }

  .lateral { display: block; min-width: 0; background: var(--amarelo); color: var(--tinta); --foco: var(--tinta); --progresso-cor: var(--amarelo); --progresso-trilho: rgb(255 255 255 / .16); }
  .lateral__fixo { position: sticky; top: 0; max-height: 100dvh; overflow: auto; scrollbar-width: thin; view-transition-name: lateral; }
  .lateral__topo {
    display: grid; justify-items: center; gap: 14px; padding: 28px 22px 22px;
    background: var(--grafite); color: var(--sobre-tinta); --foco: var(--amarelo);
  }
  .lateral__foto {
    width: 148px; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 6px var(--anel);
    view-transition-name: foto-aula;
  }
  .lateral__avatar { width: 128px; height: 128px; font-size: 3.4rem; box-shadow: 0 0 0 6px var(--anel); }
  .lateral__nome { margin: 0; text-align: center; font: 800 .76rem/1.3 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-tinta); }
  .lateral__perfil { width: 100%; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .12); }
  .lateral__ola { margin: 0; font-weight: 800; font-size: .98rem; overflow-wrap: anywhere; }
  .lateral__setas { display: flex; justify-content: center; gap: 8px; padding: 0 12px 24px; }
  .lateral__seta {
    width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
    color: var(--tinta); background: rgb(0 0 0 / .08); text-decoration: none;
    transition: background-color var(--t1), scale var(--t1);
  }
  .lateral__seta:hover { background: rgb(0 0 0 / .15); }
  .lateral__seta:active { scale: .94; }
  .lateral__seta[aria-disabled="true"] { opacity: .3; pointer-events: none; }
  .lateral__seta svg { width: 22px; height: 22px; }

  .capa {
    width: 100%; max-width: 1280px; margin-inline: auto;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(24px, 4vw, 56px);
    padding: clamp(36px, 4.4vw, 64px) clamp(48px, 6.5vw, 100px);
    border-radius: var(--raio); box-shadow: var(--sombra-moldura);
  }
  .capa::before, .capa::after { content: ""; position: absolute; top: 22%; bottom: 22%; width: clamp(12px, 1.6vw, 24px); background: var(--amarelo); }
  .capa::before { left: 0; }
  .capa::after { right: 0; }
  .orbita { --s: clamp(240px, 25vw, 340px); margin: 40px 70px 40px 0; }

  .linha-tempo { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; }
  .linha-tempo li { padding: 34px 0 0; }
  .linha-tempo li::before { left: 0; top: 0; }
  .linha-tempo li::after { left: 26px; right: -12px; top: 7px; bottom: auto; width: auto; height: 2px; }
}
@media (min-width: 1200px) {
  .moldura { grid-template-columns: 264px minmax(0, 1fr) 88px; }
  .indice { display: none; }
  .trilho { display: block; min-width: 0; }
  .trilho__fixo { position: sticky; top: 0; display: grid; justify-items: center; padding: 48px 0; }
  .trilho__lista { position: relative; list-style: none; margin: 0; padding: 12px 0; display: grid; gap: 22px; }
  .trilho__lista::before, .trilho__lista::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; }
  .trilho__lista::before { background: var(--linha-forte); }
  .trilho__lista::after { background: var(--tinta); transform-origin: 50% 0; transform: scaleY(var(--trilho-p, 0)); transition: transform var(--t3) var(--ease-out); }
  .trilho__item { position: relative; z-index: 1; }
  .trilho__link {
    position: relative; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; text-decoration: none;
    background: var(--superficie); color: var(--texto); box-shadow: 0 0 0 4px var(--painel), inset 0 0 0 2px var(--linha-forte);
    transition: background-color var(--t2), color var(--t2), box-shadow var(--t2), scale var(--t2) var(--ease-out);
  }
  .trilho__link svg { width: 21px; height: 21px; }
  .trilho__link.is-passou { background: var(--tinta); color: var(--amarelo); box-shadow: 0 0 0 4px var(--painel); }
  .trilho__link[aria-current="true"] { background: var(--amarelo); color: var(--tinta); box-shadow: 0 0 0 4px var(--painel); scale: 1.1; }
  .trilho__rotulo {
    position: absolute; right: calc(100% + 14px); top: 50%; translate: 0 -50%;
    padding: 8px 12px; border-radius: 999px; white-space: nowrap;
    background: var(--tinta); color: var(--sobre-tinta);
    font: 800 .76rem/1 var(--f-texto); letter-spacing: .04em;
    opacity: 0; pointer-events: none; transition: opacity var(--t2), translate var(--t2) var(--ease-out);
  }
  .trilho__link:hover .trilho__rotulo, .trilho__link:focus-visible .trilho__rotulo { opacity: 1; translate: -4px -50%; }
}

/* rodapé */
.rodape {
  display: grid; gap: 8px;
  padding: 24px var(--g) calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--painel); color: var(--texto-suave); font-size: .9rem;
}
.rodape p { margin: 0; max-width: 90ch; }
.rodape details { max-width: 90ch; }
.rodape summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
@media (min-width: 1024px) {
  .rodape { width: 100%; max-width: 1280px; margin-inline: auto; padding: 0; background: none; }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .orbita__icone[data-proxima]::before { display: none; }
  .js [data-revelar] > * { opacity: 1 !important; clip-path: none !important; }
}

/* ---------- impressão (material de consulta) ---------- */
@media print {
  :root { --fundo: #fff; --painel: #fff; --superficie: #fff; --cartao: #f3f3f3; --texto: #000; --texto-suave: #333; --tinta: #000; --amarelo: #F4AE22; --sombra-1: none; --sombra-moldura: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .curso { padding: 0; display: block; }
  .moldura { display: block; box-shadow: none; }
  .barra, .leitura, .lateral, .trilho, .indice, .cabeca__foto, .fim, .gaveta, .portao, .rodape details, .nao-imprimir, .confete { display: none !important; }
  .painel { padding: 0; gap: 18px; }
  .secao, .quadro, .tabela, .checklist li { break-inside: avoid; }
  [data-revelar] > * { opacity: 1 !important; animation: none !important; clip-path: none !important; }
  a { color: #000; text-decoration: none; }
  .checklist label { background: none; box-shadow: none; border: 1px solid #999; padding: 8px 10px; }
  .checklist input { border-color: #555; }
  .tabela { box-shadow: none; }
}