@font-face {
  font-family: 'Inter Tight';
  src: url('/static/fontes/InterTight-VariableFont_wght-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* Raios: controles em pílula, campos 10px, blocos 20px. */
:root {
  --tinta: #111111;
  --apoio: #4a4a4a; /* 6,7:1 sobre o fundo */
  --fundo: #e3e6e7;
  --superficie: #f1f3f3;
  --branco: #fbfbfa;
  --carvao: #141414;
  --sobre-carvao: #f5f5f3;
  --apoio-carvao: #b4b4b0; /* 9:1 sobre o carvão */
  --fio: rgb(17 17 17 / 16%);
  --fio-forte: rgb(17 17 17 / 62%); /* contorno de controle, 3:1 ou mais */
  --assinatura: #ffbe00;
  --erro: #9b1c1c;
  --sucesso: #14532d;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sombra: 0 1px 2px rgb(60 70 75 / 8%), 0 18px 44px -24px rgb(60 70 75 / 38%);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--fundo);
  color: var(--tinta);
  font-family: 'Inter Tight', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
  scroll-padding-bottom: 5rem; /* a barra fixa da prova não cobre o que recebe foco */
}

body { margin: 0; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; min-height: 100dvh; display: flex; flex-direction: column; }
img { max-width: 100%; }

h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { list-style: none; margin: 0; padding: 0; }
dl, dd { margin: 0; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.icone { width: 1.15em; height: 1.15em; flex: none; }

/* D-0024: o gradiente pega o fim do título, com transição longa. */
.grad {
  background: linear-gradient(90deg, #111 0%, #111 18%, #ffb37e 68%, #f7a1cf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;
}
@media (forced-colors: active) { .grad { background: none; color: CanvasText; } }
@media (prefers-contrast: more) { .grad { background: none; color: var(--tinta); } }

.pular {
  position: absolute; left: 16px; top: -100px; z-index: 30;
  padding: 10px 18px; background: var(--tinta); color: #fff; border-radius: 999px;
}
.pular:focus { top: 12px; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
[hidden] { display: none !important; }

/* Cabeçalho */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: rgb(227 230 231 / 82%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topo-interno {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px;
  max-width: 76rem; margin: 0 auto; padding: 10px 20px;
}
.marca { display: inline-flex; min-height: 44px; align-items: center; }
.marca img { display: block; width: auto; height: 30px; }
.topo nav { display: flex; align-items: center; gap: 2px; margin-right: -12px; }
.topo nav a, .topo nav .link {
  display: inline-flex; min-height: 44px; align-items: center; padding: 0 12px;
  text-decoration: none; color: var(--apoio);
}
.topo nav a:hover, .topo nav .link:hover { color: var(--tinta); }
.topo nav a[aria-current='page'] { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em; }

button { font: inherit; color: inherit; cursor: pointer; }
.link { background: none; border: 0; padding: 0; }

/* Miolo */
.miolo { flex: 1; width: 100%; max-width: 76rem; margin: 0 auto; padding: 28px 20px 72px; display: flex; flex-direction: column; gap: 20px; }
.apoio { color: var(--apoio); }
.titulo-secao { font-size: 1.625rem; letter-spacing: -0.02em; line-height: 1.2; margin-top: 36px; }
.saudacao { font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem); }
.trilha { margin-bottom: -6px; }
.trilha a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--apoio); text-decoration: none; }
.trilha a:hover { color: var(--tinta); text-decoration: underline; }
.rodape {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; width: 100%;
  max-width: 76rem; margin: 0 auto; padding: 24px 20px 32px; color: var(--apoio); font-size: 0.9375rem;
}
.rodape a { display: inline-block; padding: 4px 0; }

/* Botões */
.botao, .botao-escuro, .botao-contorno {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 24px;
  border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.botao { background: var(--assinatura); border: 0; color: var(--tinta); }
.botao:hover { background: #f0b300; }
.botao-escuro { background: var(--tinta); color: #fff; border: 0; }
.botao-escuro:hover { background: #333; }
.botao-escuro .icone { transition: transform 0.25s var(--ease); }
.botao-escuro:hover .icone { transform: translateX(3px); }
.botao-contorno { background: transparent; border: 1px solid var(--tinta); }
.botao-contorno:hover { background: var(--tinta); color: #fff; }
.botao:active, .botao-escuro:active, .botao-contorno:active, .botao-icone:active, .etapa:active { transform: scale(0.98); }

/* Avanço */
.avanco { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
progress {
  appearance: none; flex: 1; min-width: 0; height: 6px; border: 0; border-radius: 999px;
  overflow: hidden; background: rgb(17 17 17 / 16%); color: var(--tinta);
}
progress::-webkit-progress-bar { background: rgb(17 17 17 / 16%); }
progress::-webkit-progress-value { background: var(--tinta); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--tinta); }

/* Fundo em textura, sempre decorativo */
.capa-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Destaque: continuar de onde parou */
.destaque {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center; gap: 24px; min-height: 340px; padding: clamp(28px, 4vw, 52px);
  background: var(--superficie); border-radius: 20px; box-shadow: var(--sombra);
}
.destaque .capa-fundo { z-index: -1; }
.destaque-texto { display: grid; gap: 12px; justify-items: start; }
.destaque-texto h2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.5rem); line-height: 1.04; letter-spacing: -0.035em; }
.destaque-curso { font-size: 1.1875rem; margin-top: 4px; }
.destaque-texto p:last-child { margin-top: 12px; }
.destaque-render { justify-self: center; width: min(100%, 300px); height: auto; max-height: 280px; object-fit: contain; }

/* Cursos */
.grade-cursos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 16px; margin-top: -4px; }
.cartao-curso {
  position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--branco);
  border-radius: 20px; box-shadow: var(--sombra);
}
.capa { position: relative; isolation: isolate; overflow: hidden; height: 150px; display: grid; place-items: center; background: var(--superficie); }
.capa .capa-fundo { z-index: -1; }
.capa-render { position: absolute; inset: 10% 0; width: 100%; height: 80%; object-fit: contain; }
.cartao-texto { display: grid; gap: 8px; padding: 26px 28px 28px; }
.cartao-texto h3 { font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 4px; }
.cartao-texto h3 a { text-decoration: none; }
.cartao-texto h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 20px; } /* o cartão inteiro é clicável */
.cartao-texto h3 a:focus-visible { outline: none; }
.cartao-texto h3 a:focus-visible::after { outline: 3px solid var(--tinta); outline-offset: -3px; }
.cartao-curso:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; }
.cartao-texto .avanco { margin-top: 8px; }

/* Escala de níveis com os badges de verdade */
.escada { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.degrau { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.degrau .faixa-marca { justify-content: center; }
.badge.badge-degrau { width: min(100%, 92px); height: auto; aspect-ratio: 1; margin-bottom: 10px; }
.badge.badge-degrau .badge-numero { font-size: 1.5rem; font-weight: 300; }
.badge.badge-degrau .badge-rotulo { font-size: 0.625rem; }
.degrau:not(.degrau-alcancado) .badge-degrau { opacity: 0.55; }
.degrau-nome { font-size: 1rem; letter-spacing: -0.01em; line-height: 1.2; }
.degrau-faixa { margin-top: 6px; font-size: 0.75rem; color: var(--apoio); line-height: 1.25; }
.degrau-atual .degrau-nome { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
@media (max-width: 640px) { .escada { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; } }

/* Cursos ao lado do badge do aluno */
.cursos-nivel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem); gap: 16px; align-items: stretch; margin-top: -4px; }
.cursos-nivel .grade-cursos { margin-top: 0; }
.cartao-nivel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 26px 22px; text-align: center;
  background: var(--branco); border-radius: 20px; box-shadow: var(--sombra); color: var(--tinta); text-decoration: none;
}
.cartao-nivel .badge.badge-nivel { width: 132px; height: 132px; margin-bottom: 14px; }
.cartao-nivel .badge-nivel .badge-numero { font-size: 2.25rem; font-weight: 300; }
.cartao-nivel .badge-nivel .badge-rotulo { font-size: 0.75rem; }
.cartao-nivel-rotulo { font-size: 0.8125rem; color: var(--apoio); }
.cartao-nivel-nome { font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.15; }
.cartao-nivel .apoio { font-size: 0.875rem; }
.cartao-nivel:hover .cartao-nivel-nome { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (max-width: 760px) { .cursos-nivel { grid-template-columns: minmax(0, 1fr); } }

/* Atalhos */
.atalhos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 4px; }
.atalho {
  display: flex; flex-direction: column; gap: 6px; min-height: 180px; padding: 24px;
  border-radius: 20px; background: var(--branco); color: var(--apoio); text-decoration: none; box-shadow: var(--sombra);
}
.atalho .icone { width: 28px; height: 28px; color: var(--tinta); margin-bottom: auto; }
.atalho-titulo { font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.2; font-weight: 400; color: var(--tinta); }
.atalho:hover .atalho-titulo { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.atalho-escuro { background: var(--carvao); color: var(--apoio-carvao); }
.atalho-escuro .icone, .atalho-escuro .atalho-titulo { color: var(--sobre-carvao); }
.atalho-escuro:focus-visible { outline-color: var(--tinta); }

/* Curso: capa com a arte e a ficha técnica num bloco só */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sobretitulo { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apoio); }
.curso-capa {
  position: relative; isolation: isolate; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: 'texto arte' 'ficha ficha';
  background: var(--superficie); border-radius: 24px; box-shadow: var(--sombra);
}
.curso-capa .capa-fundo { z-index: -1; }
.curso-capa-texto { grid-area: texto; display: grid; gap: 16px; align-content: center; justify-items: start; padding: clamp(28px, 4.5vw, 64px) 0 clamp(28px, 4vw, 48px) clamp(24px, 4.5vw, 64px); }
.curso-capa-texto h1 { margin-top: -4px; }
.curso-capa-texto > p:last-child:has(a) { margin-top: 8px; }
.curso-capa-render { grid-area: arte; justify-self: center; align-self: center; width: 100%; height: clamp(220px, 27vw, 360px); padding: clamp(16px, 3vw, 36px); object-fit: contain; }
.curso-descricao { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.35; letter-spacing: -0.01em; max-width: 32rem; }
.curso-ficha {
  grid-area: ficha; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border-top: 1px solid var(--fio); background: rgb(251 251 250 / 62%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.curso-ficha > div { display: grid; gap: 2px; padding: 18px clamp(20px, 2.5vw, 32px); border-left: 1px solid var(--fio); }
.curso-ficha > div:first-child { border-left: 0; padding-left: clamp(24px, 4.5vw, 64px); }
.curso-ficha dt { font-size: 0.8125rem; color: var(--apoio); }
.curso-ficha dd { font-size: 1.0625rem; letter-spacing: -0.01em; }
.capitular::first-letter { text-transform: uppercase; }

.curso-colunas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 48px); align-items: start; }
.curso-principal { display: grid; gap: 20px; min-width: 0; }
.materiais { display: grid; gap: 10px; margin-top: 16px; }
.material {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px 16px 16px;
  background: var(--branco); border-radius: 16px;
}
.material > .icone { color: var(--apoio); transition: transform 0.25s var(--ease); }
.material:hover > .icone { transform: translateX(3px); color: var(--tinta); }
.material-marca {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--fundo); font-variant-numeric: tabular-nums;
}
.material.feito .material-marca { background: var(--tinta); color: #fff; }
.material-texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.material-texto a { text-decoration: none; font-size: 1.125rem; }
.material-texto a::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.material-texto a:focus-visible { outline: none; }
.material-texto a:focus-visible::after { outline: 3px solid var(--tinta); outline-offset: 2px; }
.material:hover .material-texto a { text-decoration: underline; }
.material-texto .apoio { font-size: 0.9375rem; }

/* Ementa: lista de leitura, no padrão das tabelas minimalistas (fio de 2 px no topo, fios finos entre as linhas) */
.ementa { margin-top: 16px; border-top: 2px solid var(--tinta); }
.ementa li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px 20px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid rgb(17 17 17 / 25%);
}
.ementa-numero { font-size: 1.125rem; font-weight: 300; color: var(--apoio); font-variant-numeric: tabular-nums; }
.ementa-parte { display: grid; gap: 2px; }
.ementa h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.2; }
.ementa .apoio, .ementa-pratica p { font-size: 0.9375rem; line-height: 1.4; }
.ementa-pratica { display: grid; gap: 2px; }
.ementa-pratica .ementa-rotulo { font-size: 0.8125rem; color: var(--apoio); }
.ementa-min { font-size: 0.9375rem; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }

/* Percurso: materiais, teste e certificado */
.percurso { display: grid; gap: 22px; margin-top: 36px; padding: 24px; background: var(--superficie); border-radius: 20px; position: sticky; top: 84px; }
.percurso-topo { display: grid; gap: 12px; }
.percurso-etapas { display: grid; }
.etapa-percurso { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.etapa-percurso:last-child { padding-bottom: 0; }
.etapa-percurso:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: rgb(17 17 17 / 16%); }
.etapa-percurso.feito:not(:last-child)::before { background: var(--tinta); }
.etapa-marca {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: 0.9375rem; font-variant-numeric: tabular-nums; background: var(--branco); box-shadow: inset 0 0 0 1px var(--fio-forte);
}
.etapa-marca .icone { width: 16px; height: 16px; }
.etapa-percurso.feito .etapa-marca { background: var(--tinta); color: #fff; box-shadow: none; }
.etapa-percurso.atual .etapa-marca { background: var(--assinatura); box-shadow: none; }
.etapa-percurso.bloqueado .etapa-marca { color: var(--apoio); background: transparent; box-shadow: inset 0 0 0 1px var(--fio); }
.etapa-nome { font-size: 1.0625rem; line-height: 1.25; padding-top: 5px; }
.etapa-percurso .apoio { font-size: 0.9375rem; }
.etapa-percurso.bloqueado .etapa-nome { color: var(--apoio); }

.painel-certificado { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--fio); }
.painel-certificado.sem-caixa { gap: 14px; justify-items: start; }
.painel-titulo { font-size: 1.375rem; letter-spacing: -0.015em; line-height: 1.2; font-weight: 400; }

@media (max-width: 960px) {
  .curso-colunas { grid-template-columns: minmax(0, 1fr); }
  .percurso { position: static; margin-top: 8px; order: -1; }
}
@media (max-width: 760px) {
  .curso-capa { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'arte' 'texto' 'ficha'; }
  .curso-capa-texto { padding: 0 24px 28px; }
  .curso-capa-render { justify-self: start; width: auto; height: 170px; padding: 20px 24px 8px; }
  .curso-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .curso-ficha > div, .curso-ficha > div:first-child { padding: 14px 24px; border-left: 0; border-top: 1px solid var(--fio); }
  .curso-ficha > div:nth-child(-n + 2) { border-top: 0; }
  .curso-ficha > div:nth-child(even) { border-left: 1px solid var(--fio); padding-left: 20px; }
  .ementa li { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .ementa-pratica { grid-column: 2 / -1; }
  .ementa-min { grid-column: 3; grid-row: 1; }
}
@media (forced-colors: active) {
  .etapa-marca { border: 1px solid CanvasText; }
}

/* Certificado em miniatura: dados reais do aluno */
.cert-mini {
  width: 100%; display: grid; gap: 20px; padding: 26px; border-radius: 20px;
  background: var(--carvao); color: var(--sobre-carvao); box-shadow: var(--sombra);
}
.cert-titulo { font-weight: 300; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.cert-nome { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.015em; }
.cert-nome img { flex: none; width: 36px; height: auto; }
.cert-dados { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 14px; border-top: 1px solid rgb(245 245 243 / 28%); }
.cert-dados dt { font-size: 0.8125rem; color: var(--apoio-carvao); }
.cert-dados dd { font-size: 0.9375rem; }
.cert-sobre { flex-basis: 100%; }
.cert-sobre dd { color: var(--sobre-carvao); line-height: 1.45; max-width: 46ch; text-wrap: pretty; }
.codigo { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; overflow-wrap: anywhere; }

.grade-certificados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 20px; margin-top: 8px; }
.grade-certificados li { display: grid; gap: 14px; justify-items: start; }
/* Mostrar no LinkedIn: cartão branco, botão escuro, dados para copiar em <details>. */
.linkedin { display: grid; gap: 12px; justify-items: start; max-width: 46rem; margin-top: 28px; padding: 26px; background: var(--branco); border-radius: 20px; }
.linkedin h3 { font-size: 1.375rem; letter-spacing: -0.015em; line-height: 1.2; }
.linkedin .apoio { max-width: 60ch; }
.linkedin-mao { width: 100%; border-top: 1px solid var(--fio); padding-top: 12px; }
.linkedin-mao summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.linkedin-passos { display: grid; gap: 6px; margin: 12px 0 16px; padding-left: 1.25rem; list-style: decimal; }
.linkedin-dados { display: grid; gap: 10px; }
.linkedin-dados div { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: 4px 16px; align-items: center; }
.linkedin-dados dt { font-size: 0.875rem; color: var(--apoio); }
.linkedin-dados dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 8px 8px 8px 12px; background: var(--superficie); border-radius: 10px; }
.linkedin-dados dd > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .linkedin-dados div { grid-template-columns: 1fr; } .linkedin { padding: 20px; } }
.pendentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 12px; margin-top: -4px; }
.pendentes li { display: grid; gap: 4px; padding: 20px 22px; background: var(--branco); border-radius: 16px; }
.pendentes h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.pendentes .avanco { margin-top: 8px; }

/* Formulários */
.formulario { display: grid; gap: 16px; margin-top: 8px; max-width: 26rem; width: 100%; justify-items: start; }
.campo { display: grid; gap: 6px; width: 100%; }
label { font-size: 0.9375rem; }
input:not([type='hidden']) {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: inherit;
  background: #fff; border: 1px solid var(--fio-forte); border-radius: 10px;
}
input[aria-invalid='true'] { border: 2px solid var(--erro); }
.erro { color: var(--erro); font-size: 0.9375rem; }

/* Entrada */
.tela-entrada { background: var(--fundo); }
.entrada { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100dvh; }
.entrada-texto { display: flex; flex-direction: column; gap: 32px; padding: 24px clamp(20px, 5vw, 72px); }
.entrada-corpo { flex: 1; display: grid; align-content: center; gap: 16px; justify-items: start; }
.entrada-corpo h1 { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem); }
.entrada-ajuda { color: var(--apoio); font-size: 0.9375rem; }
.entrada-ajuda a { display: inline-block; padding: 4px 0; }
.entrada-arte { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; background: var(--superficie); }
.entrada-arte .capa-fundo { z-index: -1; }
.entrada-render { width: min(62%, 460px); height: auto; }
.selo-ok { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tinta); color: #fff; }
.selo-ok .icone { width: 26px; height: 26px; }

/* Aula */
.tela-aula { height: 100dvh; min-height: 0; overflow: hidden; }
.barra-aula { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; padding: 6px 16px; }
.voltar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--apoio); text-decoration: none; }
.voltar:hover { color: var(--tinta); text-decoration: underline; }
.barra-titulo { flex: 1 1 12rem; min-width: 0; line-height: 1.25; }
.barra-titulo h1 { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; line-height: 1.25; }
.barra-titulo .apoio { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.vizinhos { display: flex; gap: 16px; }
.vizinhos a { display: inline-flex; min-height: 44px; align-items: center; }
.barra-aula .botao-contorno { min-height: 42px; padding: 0 18px; }
.palco { flex: 1; min-height: 0; }
.palco iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--fundo); }
.girar { display: none; flex-basis: 100%; color: var(--apoio); font-size: 0.9375rem; }
@media (max-width: 600px) and (orientation: portrait) { .girar { display: block; } }
.aviso {
  position: fixed; left: 50%; bottom: 20px; z-index: 25; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 10px 18px; max-width: calc(100vw - 32px); width: max-content;
  background: var(--tinta); color: #fff; border-radius: 999px; font-size: 0.9375rem;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

/* Prompts */
.prompts-topo { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.prompts-topo > div { display: grid; gap: 12px; }
.prompts-topo .apoio { font-size: 1.125rem; max-width: 34rem; }
.prompts-topo img { width: clamp(150px, 22vw, 300px); height: auto; flex: none; }
.filtros { display: grid; gap: 14px; }
.filtros .campo { max-width: 26rem; }
.busca-campo { position: relative; display: block; }
.busca-campo .icone { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--apoio); pointer-events: none; }
.busca-campo input { padding-left: 42px; }
.etapas { display: flex; flex-wrap: wrap; gap: 8px; }
.etapa { min-height: 40px; padding: 0 16px; border-radius: 999px; background: transparent; border: 1px solid var(--fio-forte); }
.etapa:hover { background: rgb(17 17 17 / 7%); }
.etapa[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.grade-prompts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 14px; margin-top: 16px; align-items: start; }
.prompt { display: grid; gap: 14px; padding: 20px; background: var(--branco); border-radius: 16px; }
.prompt-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prompt-etapa { font-size: 0.875rem; color: var(--apoio); }
.prompt h3 { font-size: 1.1875rem; letter-spacing: -0.01em; line-height: 1.25; font-weight: 500; }
.prompt pre {
  margin: 0; padding: 14px 16px; background: var(--carvao); color: var(--sobre-carvao); border-radius: 10px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.prompt code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.875rem; line-height: 1.6; font-weight: 400; }
.botao-icone {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  background: var(--fundo); border: 0; border-radius: 999px; font-size: 0.9375rem;
}
.botao-icone:hover { background: var(--tinta); color: #fff; }
.vazio-filtro { padding: 32px 0; color: var(--apoio); }

/* Teste */
.resumo-erro { display: grid; gap: 8px; padding: 16px 20px; background: var(--branco); border: 2px solid var(--erro); border-radius: 16px; }
.resumo-erro p { color: var(--erro); }
.resumo-erro:focus { outline: none; }
.resumo-erro li { padding: 4px 0; }
.prova { display: grid; gap: 14px; max-width: 46rem; }
.pergunta { min-width: 0; margin: 0; padding: 22px; border: 0; background: var(--branco); border-radius: 16px; display: grid; gap: 8px; scroll-margin-top: 6rem; }
.pergunta-falta { outline: 2px solid var(--erro); }
.pergunta legend { float: left; width: 100%; padding: 0 0 10px; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; }
.pergunta legend + * { clear: both; }
.opcao { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px; font-size: 1rem; border: 1px solid var(--fio); border-radius: 10px; cursor: pointer; }
.opcao:hover { border-color: var(--fio-forte); }
.opcao:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); background: #fff; }
.opcao input { flex: none; width: 20px !important; height: 20px; min-height: 0 !important; margin: 2px 0 0; padding: 0 !important; accent-color: var(--tinta); cursor: pointer; }
.prova-fim { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; background: var(--fundo); }
.prova-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
/* Uma pergunta por tela (com JavaScript) */
.pergunta[hidden], .prova-passo[hidden], .prova-botoes [hidden] { display: none; }
.pergunta:focus { outline: none; }
.pergunta:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.prova-passo { display: grid; gap: 8px; scroll-margin-top: 6rem; }
.prova-passo-texto { font-size: 0.9375rem; color: var(--apoio); font-variant-numeric: tabular-nums; }
.prova-passo progress { width: 100%; flex: none; }

.resultado-teste { display: grid; gap: 16px; justify-items: start; padding: clamp(24px, 4vw, 48px) 0; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.temas { display: grid; gap: 8px; }
.temas li { padding: 14px 18px; background: var(--branco); border-radius: 10px; }

/* Selos */
.medalha { display: grid; place-items: center; flex: none; width: 88px; height: 88px; border-radius: 50%; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--fio); }
.medalha img { width: 62%; height: 62%; object-fit: contain; }
.medalha-grande { width: 148px; height: 148px; }
.nivel { display: flex; align-items: center; gap: clamp(20px, 4vw, 44px); padding: clamp(24px, 4vw, 44px); background: var(--superficie); border-radius: 20px; box-shadow: var(--sombra); }
.nivel-texto { display: grid; gap: 4px; min-width: 0; }
.nivel-numero { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 400; }

/* Badge: cor pela quantidade de cursos. O preto é o topo. */
.badge {
  position: relative; isolation: isolate; flex: none; display: grid; place-content: center; justify-items: center;
  width: 160px; height: 160px; color: var(--tinta-badge);
}
.badge::before, .badge::after, .badge-amostra::before, .badge-amostra::after { content: ''; position: absolute; -webkit-mask: var(--forma, url('/static/formas/circulo.svg')) center / contain no-repeat; mask: var(--forma, url('/static/formas/circulo.svg')) center / contain no-repeat; }
.badge::before, .badge-amostra::before { inset: 0; z-index: -2; background: var(--contorno-badge, rgb(17 17 17 / 55%)); }
.badge::after, .badge-amostra::after { inset: 1.5px; z-index: -1; background: var(--cor-badge); }
/* Badge sem contorno (Fred, 07/11/2026): a sombra segue a forma e separa o branco do fundo claro.
   Só o badge vazio, que não tem cor, mantém o fio para existir. */
.badge:not(.badge-vazio)::before { content: none; }
.badge:not(.badge-vazio)::after { inset: 0; }
.badge:not(.badge-vazio) { filter: drop-shadow(0 1px 1px rgb(60 70 75 / 14%)) drop-shadow(0 10px 18px rgb(60 70 75 / 16%)); }
.forma-pentagono { --forma: url('/static/formas/pentagono.svg'); }
.forma-hexagono { --forma: url('/static/formas/hexagono.svg'); }
.forma-heptagono { --forma: url('/static/formas/heptagono.svg'); }
.badge-numero { font-size: 3.75rem; line-height: 1; letter-spacing: -0.04em; font-weight: 400; font-variant-numeric: tabular-nums; }
.badge-rotulo { font-size: 0.9375rem; }
/* Textura da cor do badge cobrindo a forma inteira (Fred, 07/11/2026). Sem símbolo.
   Uma placa translúcida na mesma forma do badge cobre as peças e segura o número. */
.badge-textura {
  position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden;
  -webkit-mask: var(--forma, url('/static/formas/circulo.svg')) center / contain no-repeat; mask: var(--forma, url('/static/formas/circulo.svg')) center / contain no-repeat;
}
.badge-textura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.badge-textura::after {
  /* Placa de cera translúcida na forma do badge (a forma das trilhas), por cima das peças. */
  content: ''; position: absolute; inset: 15%;
  -webkit-mask: var(--forma, url('/static/formas/circulo.svg')) center / contain no-repeat; mask: var(--forma, url('/static/formas/circulo.svg')) center / contain no-repeat;
  background:
    linear-gradient(155deg, rgb(255 255 255 / 34%) 0%, rgb(255 255 255 / 0%) 46%, rgb(0 0 0 / 8%) 100%),
    color-mix(in srgb, var(--cor-badge) 64%, transparent);
  -webkit-backdrop-filter: blur(7px) saturate(1.15); backdrop-filter: blur(7px) saturate(1.15);
}
.badge-texturado .badge-numero, .badge-texturado .badge-rotulo { position: relative; z-index: 1; }
.badge-grande { width: clamp(172px, 26vw, 232px); height: clamp(172px, 26vw, 232px); }
.badge-grande .badge-numero { font-size: clamp(4rem, 3rem + 4vw, 6rem); }
.badge-vazio { --cor-badge: transparent; --tinta-badge: var(--apoio); }
.badge-branco { --cor-badge: #ffffff; --tinta-badge: #111111; }
.badge-pessego { --cor-badge: #ffb37e; --tinta-badge: #111111; }
.badge-laranja { --cor-badge: #e8711f; --tinta-badge: #111111; }
.badge-rosa { --cor-badge: #f7a1cf; --tinta-badge: #111111; }
.badge-ameixa { --cor-badge: #5a2a52; --tinta-badge: #ffffff; --contorno-badge: rgb(255 255 255 / 60%); }
.badge-preto { --cor-badge: #0a0a0a; --tinta-badge: #ffffff; --contorno-badge: rgb(255 255 255 / 60%); }

.escala { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: -4px; }
.escala li { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 18px 12px; background: var(--branco); border-radius: 16px; }
.escala .badge-degrau { margin-bottom: 10px; }
.escala-atual { outline: 2px solid var(--tinta); outline-offset: -2px; }
.badge-amostra { position: relative; isolation: isolate; display: block; width: 40px; height: 40px; margin-bottom: 8px; }
/* Amostra de cor sem contorno (Fred, 07/11/2026): só o badge de verdade leva o fio. */
.badge-amostra::before { content: none; }
.badge-amostra::after { inset: 0; }

.grade-trilhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 14px; margin-top: -4px; }
.trilha-item { display: grid; align-content: start; gap: 2px; padding: 20px; background: var(--branco); border-radius: 16px; }
.trilha-item h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.2; }
.trilha-conta { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.trilha-cursos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.trilha-cursos li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; font-size: 0.875rem; border: 1px solid var(--fio-forte); border-radius: 999px; }
.trilha-cursos li.feito { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.escala .apoio { font-size: 0.875rem; line-height: 1.3; }
/* Cursos concluídos no badge público: mesmo molde dos níveis (cartão vertical, medalhão de 92px com a sombra do badge). */
.concluidos .medalha { width: min(100%, 92px); height: auto; aspect-ratio: 1; margin-bottom: 10px; box-shadow: none; filter: drop-shadow(0 1px 1px rgb(60 70 75 / 14%)) drop-shadow(0 10px 18px rgb(60 70 75 / 16%)); }
.concluidos .medalha img { width: 74%; height: 74%; }
.concluidos h3 { font: inherit; letter-spacing: inherit; }

/* Programa: a capa assume a cor do aluno e aponta para a próxima. */
.programa { flex: 1; width: 100%; }
.rumo-branco { --cor-rumo: #ffffff; }
.rumo-pessego { --cor-rumo: #ffb37e; }
.rumo-laranja { --cor-rumo: #e8711f; }
.rumo-rosa { --cor-rumo: #f7a1cf; }
.rumo-ameixa { --cor-rumo: #5a2a52; }
.rumo-preto { --cor-rumo: #0a0a0a; }
.capa-resumo { font-size: 1.0625rem; line-height: 1.45; }
.capa-acao { display: grid; gap: 10px; justify-items: start; margin-top: 8px; }
.capa-acao p { font-size: 0.9375rem; }
.botao-capa {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--tinta-badge); color: var(--cor-capa); text-decoration: none; white-space: nowrap;
}
.botao-capa .icone { transition: transform 0.25s var(--ease); }
.botao-capa:hover .icone { transform: translateX(3px); }
.botao-capa:active { transform: scale(0.98); }

.meta-titulo { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; }
.meta-trilha strong { font-weight: 600; }
.em-breve { color: var(--apoio); font-size: 0.875em; }

/* Régua: uma faixa contínua de cor, sem caixas nem contornos */
/* As duas primeiras faixas valem 1 curso cada, mas precisam caber o nome do nível. */
.regua { display: grid; grid-template-columns: minmax(6.75rem, 1fr) minmax(6.25rem, 1fr) repeat(8, minmax(0, 1fr)); }
.faixa-numero { padding-right: 8px; }
.faixa-regua { display: flex; flex-direction: column; min-width: 0; color: var(--tinta); }
.faixa-1 { grid-column: span 1; }
.faixa-2 { grid-column: span 2; }
.faixa-3 { grid-column: span 3; }
.faixa-marca { display: flex; align-items: flex-end; min-height: 40px; padding-bottom: 12px; }
.faixa-fim .faixa-marca { justify-content: flex-end; }
.faixa-barra { display: block; height: clamp(56px, 7vw, 92px); background: var(--cor-badge); }
.faixa-regua:first-child .faixa-barra { border-radius: 14px 0 0 14px; }
.faixa-regua:last-child .faixa-barra { border-radius: 0 14px 14px 0; }
.faixa-numero { margin-top: 12px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.faixa-regua .escala-nome { margin-top: 4px; font-size: 0.8125rem; line-height: 1.2; }
@media (min-width: 1180px) { .faixa-regua .escala-nome { white-space: nowrap; } }
/* Balão com ponteiro: aponta para o início da faixa em que o aluno está. */
.parada-marca {
  position: relative; display: inline-block; padding: 5px 12px; font-size: 0.8125rem; line-height: 1.2; font-weight: 500;
  border-radius: 8px; background: var(--tinta); color: #fff; white-space: nowrap;
}
.parada-marca::after {
  content: ''; position: absolute; left: 14px; top: 100%; width: 10px; height: 6px;
  background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.faixa-fim .parada-marca::after { left: auto; right: 14px; }
.parada-proxima { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }


/* Painel de controle: grade de 12 colunas, tudo em módulos */
.painel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; max-width: 76rem; margin: 0 auto; padding: 16px 20px 56px; }
.painel > * { min-width: 0; }
.m-4 { grid-column: span 4; }
.m-5 { grid-column: span 5; }
.m-7 { grid-column: span 7; }
.m-8 { grid-column: span 8; }
.m-12 { grid-column: span 12; }
.modulo { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--branco); border-radius: 16px; }
.modulo-cabeca { display: grid; gap: 2px; }
.modulo-cabeca h2 { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.modulo-cabeca .apoio { font-size: 0.9375rem; line-height: 1.35; }
.modulo-cabeca-linha { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px; }
.modulo-escuro { background: var(--carvao); color: var(--sobre-carvao); }
.modulo-escuro :focus-visible { outline-color: var(--sobre-carvao); }
.modulo-escuro .modulo-cabeca p { color: var(--apoio-carvao); font-size: 0.9375rem; line-height: 1.35; }
.modulo-escuro input { background: #262626; color: var(--sobre-carvao); border-color: rgb(245 245 243 / 45%); text-overflow: ellipsis; }
.modulo-escuro .acoes { margin-top: 0; gap: 8px; }

/* Módulo de status: assume a cor do aluno e aponta para a próxima */
.modulo-status {
  --cor-capa: var(--cor-badge);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: relative; isolation: isolate;
  padding: clamp(22px, 3vw, 36px); border-radius: 16px; overflow: hidden;
  background: var(--cor-capa);
  color: var(--tinta-badge);
}
/* Grade cinza clara atrás do badge, sumindo para a esquerda */
.modulo-status::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--tinta-badge) 10%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--tinta-badge) 10%, transparent) 1px, transparent 1px);
  background-size: 32px 32px; background-position: right -1px top -1px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 22%, transparent 72%);
  mask-image: linear-gradient(to left, #000 0%, #000 22%, transparent 72%);
}
.modulo-status :focus-visible { outline-color: var(--tinta-badge); }
.badge-vazio.modulo-status { --cor-capa: var(--superficie); --tinta-badge: var(--tinta); }
.status-texto { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.modulo-status h1 { font-size: 0.9375rem; line-height: 1.3; letter-spacing: 0; font-weight: 500; }
.frase-programa { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 300; }
.badge-capa { width: clamp(150px, 17vw, 216px); height: clamp(150px, 17vw, 216px); filter: drop-shadow(0 14px 26px rgb(30 25 20 / 26%)); }
.badge-capa .badge-numero { font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem); font-weight: 300; letter-spacing: -0.04em; }
.badge-capa .badge-rotulo { font-size: 0.875rem; }

/* Indicadores: quatro blocos que preenchem a altura do status */
.proxima-forma { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--branco); border-radius: 20px; box-shadow: var(--sombra); min-width: 0; overflow: hidden; }
.proxima-forma-rotulo { font-size: 1.125rem; font-weight: 400; color: var(--tinta); letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.proxima-forma .apoio { font-size: 0.9375rem; line-height: 1.35; }
.proxima-forma strong { font-weight: 600; color: var(--tinta); }
.proxima-forma .avanco { margin-top: 2px; }

/* Prévia da próxima forma: o badge atual do aluno, translúcido, como algo que ainda vai se formar.
   Ondas de luz irregulares saem dele e partículas se desprendem do topo. */
.previa-forma { position: relative; isolation: isolate; display: grid; place-items: center; margin: auto 0 8px; padding: 26px 0 10px; }
.badge-previa { width: 132px; height: 132px; opacity: 0.55; filter: saturate(0.9) drop-shadow(0 10px 22px rgb(60 70 75 / 14%)); }
/* A prévia mostra só a forma: o número de cursos já aparece na capa. */
.badge-previa .badge-numero, .badge-previa .badge-rotulo { display: none; }
.previa-onda {
  position: absolute; z-index: -1; width: 132px; height: 132px; top: calc(50% + 8px); left: 50%;
  translate: -50% -50%; border-radius: 47% 53% 44% 56% / 55% 45% 58% 42%;
  background: radial-gradient(closest-side, transparent 62%, color-mix(in srgb, var(--cor-onda, #ffb37e) 55%, transparent) 78%, transparent 100%);
  opacity: 0; filter: blur(3px);
}
.previa-particulas { position: absolute; inset: 0; pointer-events: none; }
.previa-particulas i {
  position: absolute; left: 50%; top: 30px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--cor-onda, #ffb37e); opacity: 0;
}
.previa-particulas i:nth-child(3n) { width: 3px; height: 3px; }
.previa-particulas i:nth-child(4n) { width: 5px; height: 5px; filter: blur(0.5px); }
.previa-particulas i:nth-child(1) { margin-left: -38px; --dx: -10px; animation-delay: 0s; }
.previa-particulas i:nth-child(2) { margin-left: 22px; --dx: 8px; animation-delay: 0.7s; }
.previa-particulas i:nth-child(3) { margin-left: -6px; --dx: -4px; animation-delay: 1.4s; }
.previa-particulas i:nth-child(4) { margin-left: 40px; --dx: 12px; animation-delay: 2.1s; }
.previa-particulas i:nth-child(5) { margin-left: -24px; --dx: -14px; animation-delay: 2.8s; }
.previa-particulas i:nth-child(6) { margin-left: 10px; --dx: 6px; animation-delay: 3.5s; }
.previa-particulas i:nth-child(7) { margin-left: -46px; --dx: -6px; animation-delay: 0.35s; }
.previa-particulas i:nth-child(8) { margin-left: 30px; --dx: 14px; animation-delay: 1.05s; }
.previa-particulas i:nth-child(9) { margin-left: -14px; --dx: -9px; animation-delay: 1.75s; }
.previa-particulas i:nth-child(10) { margin-left: 4px; --dx: 3px; animation-delay: 2.45s; }
.previa-particulas i:nth-child(11) { margin-left: -30px; --dx: -12px; animation-delay: 3.15s; }
.previa-particulas i:nth-child(12) { margin-left: 46px; --dx: 10px; animation-delay: 3.85s; }
.previa-forma:has(.badge-branco) { --cor-onda: #ffb37e; }
.previa-forma:has(.badge-pessego) { --cor-onda: #ff9a52; }
.previa-forma:has(.badge-laranja) { --cor-onda: #e8711f; }
.previa-forma:has(.badge-rosa) { --cor-onda: #f07fbd; }
.previa-forma:has(.badge-ameixa) { --cor-onda: #8a4a7f; }
.previa-forma:has(.badge-preto) { --cor-onda: #6b6b6b; }
@media (prefers-reduced-motion: no-preference) {
  .previa-onda { animation: onda 4.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
  .previa-onda:nth-child(2) { animation-delay: 1.6s; border-radius: 55% 45% 52% 48% / 44% 58% 42% 56%; }
  .previa-onda:nth-child(3) { animation-delay: 3.2s; border-radius: 42% 58% 60% 40% / 52% 46% 54% 48%; }
  .previa-particulas i { animation: destilar 4.2s ease-out infinite; }
  .badge-previa { animation: respirar 4.8s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .previa-onda:first-child { opacity: 0.6; scale: 1.18; }
}
@keyframes onda {
  0% { opacity: 0; scale: 0.92; rotate: 0deg; }
  20% { opacity: 0.75; }
  100% { opacity: 0; scale: 1.65; rotate: 40deg; }
}
@keyframes destilar {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  15% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -34px) scale(0.4); }
}
@keyframes respirar { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.62; } }

/* Medidor: o alcançado em cor cheia, o que falta esmaecido */
.modulo-regua .regua { margin-top: auto; }
.modulo-regua .faixa-barra { height: 34px; box-shadow: inset 0 0 0 1px rgb(17 17 17 / 14%); }
.modulo-regua .faixa-regua:not(.faixa-alcancada) .faixa-barra { opacity: 0.35; }
.modulo-regua .faixa-regua:first-child .faixa-barra { border-radius: 8px 0 0 8px; }
.modulo-regua .faixa-regua:last-child .faixa-barra { border-radius: 0 8px 8px 0; }
.modulo-regua .faixa-marca { min-height: 34px; padding-bottom: 8px; }
.modulo-regua .parada-marca { font-size: 0.75rem; padding: 4px 10px; border-radius: 7px; }
.modulo-regua .parada-marca::after { left: 10px; }
.modulo-regua .faixa-numero { margin-top: 8px; font-size: 1.25rem; font-weight: 400; letter-spacing: -0.015em; }
.modulo-regua .faixa-regua .escala-nome { font-size: 0.75rem; color: var(--apoio); white-space: normal; }

.lista-selos { display: grid; gap: 10px; }
.m-12 .lista-selos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.lista-selos .selo { padding: 12px 14px; background: var(--superficie); gap: 14px; }
.lista-selos .medalha { width: 60px; height: 60px; background: var(--branco); }
.lista-selos .selo h3 { font-size: 1.125rem; }
.lista-selos .apoio, .lista-selos .selo-ganho { font-size: 0.875rem; }
.modulo .trilhas-cartoes { margin-top: 0; }
.modulo .trilha-cartao { background: var(--superficie); border-radius: 12px; padding: 14px 16px; }
.modulo .mais-trilhas summary { margin-top: -6px; min-height: 44px; }
.modulo .legenda-tipos { margin-top: 0; font-size: 0.8125rem; }
.modulo .legenda-tipos li { min-height: 30px; padding: 0 12px; }

/* Trilhas: corrente de pílulas unidas por metaball, como no site */
.legenda-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 0.9375rem; }
.legenda-tipos li { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 999px; }
.pilula-gs { background: #ffb37e; color: var(--tinta); }
.pilula-esp { background: #f7a1cf; color: var(--tinta); }
.pilula-feita { background: #111111; color: #fff; }
.trilhas-cartoes { display: grid; gap: 10px; margin-top: 16px; }
.trilha-cartao { padding: 20px 24px; background: rgb(255 255 255 / 45%); border-radius: 24px; }
.trilha-rotulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.trilha-rotulo h3 { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); line-height: 1.15; font-weight: 300; letter-spacing: -0.02em; }
.trilha-rotulo .apoio { font-size: 0.9375rem; }
.trilha-conta { margin-left: auto; font-variant-numeric: tabular-nums; }
.trilha-rotulo .selo-ganho { margin-left: auto; font-size: 0.9375rem; }
.corrente { display: flex; gap: 10px; margin-top: 14px; }
.pilula { position: relative; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 1rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.pilula .icone { width: 16px; height: 16px; }
.ponte-h { position: absolute; top: 0; left: -19px; width: 28px; height: 44px; }
.ponte-v { display: none; position: absolute; top: -11px; left: 50%; width: 48px; height: 12px; transform: translateX(-50%); }
@media (max-width: 1023px) {
  .corrente { flex-direction: column; }
  .ponte-h { display: none; }
  .ponte-v { display: block; }
  .pilula { font-size: 0.9375rem; }
}
@media (forced-colors: active) {
  .pilula, .legenda-tipos li { forced-color-adjust: none; }
}

.mais-trilhas summary { display: inline-flex; align-items: center; min-height: 48px; margin-top: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.mais-trilhas .trilhas-cartoes { margin-top: 10px; }

/* Compartilhar: bloco escuro de fechamento */
.botao-claro, .botao-contorno-claro { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.botao-claro { background: var(--sobre-carvao); color: var(--carvao); border: 0; }
.botao-contorno-claro { border: 1px solid var(--sobre-carvao); color: var(--sobre-carvao); }
.botao-contorno-claro:hover { background: var(--sobre-carvao); color: var(--carvao); }


.badge-publico { display: flex; align-items: center; gap: clamp(24px, 5vw, 64px); padding: clamp(16px, 3vw, 32px) 0; }
.badge-publico-texto { display: grid; gap: 12px; min-width: 0; }
.grade-selos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 14px; margin-top: -4px; }
.selo { display: flex; align-items: center; gap: 18px; padding: 20px; background: var(--branco); border-radius: 16px; }
.selo-texto { display: grid; gap: 2px; min-width: 0; }
.selo h3 { font-size: 1.375rem; letter-spacing: -0.015em; line-height: 1.2; }
.selo-ganho { display: flex; align-items: center; gap: 6px; color: var(--sucesso); }
.selo-bloqueado .medalha img { filter: grayscale(1); opacity: 0.45; }
/* Curso que o aluno ainda não tem: o cartão leva à compra, com a chamada em destaque. */
.selo-compra .medalha img { filter: grayscale(0.6); opacity: 0.75; }
.selo-acao { font-size: 0.875rem; font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--assinatura); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

/* Estados */
.vazio { display: grid; gap: 12px; justify-items: start; padding: clamp(28px, 5vw, 56px); background: var(--superficie); border-radius: 20px; }
.vazio h2 { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.15; }
.resultado { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; }
.resultado-ok { color: var(--sucesso); }
.resultado-erro { color: var(--erro); }
main > .cert-mini { max-width: 34rem; }

/* Movimento só onde comunica: entrada da página, resposta ao toque, confirmação. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .botao, .botao-escuro, .botao-contorno, .botao-icone, .etapa { transition: background-color 0.15s, color 0.15s, transform 0.15s; }
  .aviso { transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }

  .miolo > *, .entrada-corpo > * { animation: subir 0.6s var(--ease) both; }
  .miolo > :nth-child(2), .entrada-corpo > :nth-child(2) { animation-delay: 0.05s; }
  .miolo > :nth-child(3), .entrada-corpo > :nth-child(3) { animation-delay: 0.1s; }
  .miolo > :nth-child(n + 4), .entrada-corpo > :nth-child(n + 4) { animation-delay: 0.15s; }
  .miolo > :is(.titulo-secao, .grade-cursos, .atalhos) { animation-delay: 0.12s; }

  .cartao-curso, .atalho { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
  .cartao-curso:hover, .atalho:hover { transform: translateY(-4px); }
  .capa-render { transition: transform 0.6s var(--ease); }
  .cartao-curso:hover .capa-render { transform: scale(1.06) rotate(-2deg); }

  .destaque-render, .entrada-render, .curso-capa-render { animation: flutuar 10s ease-in-out infinite; }
  .selo-ok, .resultado-teste .medalha { animation: pop 0.5s var(--ease) both; }
  .badge-capa { animation: pousar 0.8s var(--ease) both; }
  .status-texto > * { animation: subir 0.6s var(--ease) both; }
  .status-texto > :nth-child(2) { animation-delay: 0.06s; }
  .status-texto > :nth-child(3) { animation-delay: 0.12s; }
  .status-texto > :nth-child(4) { animation-delay: 0.18s; }
  .regua.em-cena .faixa-barra { animation: preencher 0.6s var(--ease) both; transform-origin: left; }
  .regua.em-cena .faixa-regua:nth-child(2) .faixa-barra { animation-delay: 0.08s; }
  .regua.em-cena .faixa-regua:nth-child(3) .faixa-barra { animation-delay: 0.16s; }
  .regua.em-cena .faixa-regua:nth-child(4) .faixa-barra { animation-delay: 0.24s; }
  .regua.em-cena .faixa-regua:nth-child(5) .faixa-barra { animation-delay: 0.32s; }
  .regua.em-cena .faixa-regua:nth-child(6) .faixa-barra { animation-delay: 0.4s; }
}
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes flutuar { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes pousar { from { opacity: 0; transform: translateY(18px) scale(0.92) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes preencher { from { opacity: 0.2; transform: scaleX(0.3); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Sem transparência quando a pessoa pede */
@media (prefers-reduced-transparency: reduce) {
  .topo { background: var(--fundo); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (forced-colors: active) {
  .modulo-status { forced-color-adjust: none; }
  .faixa-barra { forced-color-adjust: none; }
  .badge, .badge-amostra { forced-color-adjust: none; }
  .botao, .botao-escuro, .botao-contorno, .botao-icone, .cartao-curso, .atalho, .material, .prompt, .cert-mini { border: 1px solid CanvasText; }
  progress { border: 1px solid CanvasText; }
  .etapa[aria-pressed='true'] { outline: 2px solid Highlight; }
}

/* Tablet */
@media (max-width: 860px) {
  /* No tablet e no celular, cada módulo ocupa a largura toda */
  .m-4, .m-5, .m-7, .m-8, .m-12 { grid-column: 1 / -1; }
  .modulo-status { flex-direction: column; align-items: flex-start; }
  .modulo-status::before { -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 60%); mask-image: linear-gradient(to top, #000 0%, transparent 60%); }
  .modulo-regua .faixa-barra { height: 100%; }
  /* Régua na vertical: a faixa desce, e a altura de cada cor mostra o esforço */
  .regua { grid-template-columns: minmax(0, 1fr); }
  .faixa-1, .faixa-2, .faixa-3 { grid-column: auto; }
  .faixa-regua { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .faixa-barra { grid-column: 1; grid-row: 1 / span 2; height: 100%; min-height: 60px; }
  .faixa-2 .faixa-barra { min-height: 88px; }
  .faixa-3 .faixa-barra { min-height: 116px; }
  .faixa-regua:first-child .faixa-barra { border-radius: 14px 14px 0 0; }
  .faixa-regua:last-child .faixa-barra { border-radius: 0 0 14px 14px; }
  .faixa-numero { grid-column: 2; grid-row: 1; margin: 0; min-width: 4.6rem; font-size: 1.75rem; }
  .faixa-regua .escala-nome { grid-column: 3; grid-row: 1; margin: 0; font-size: 0.875rem; }
  .faixa-marca { grid-column: 2 / 4; grid-row: 2; justify-self: start; min-height: 0; padding: 0 0 8px; }
  .faixa-fim .faixa-marca { justify-content: flex-start; }
  /* Na régua vertical a faixa fica à esquerda: o ponteiro aponta para ela. */
  .parada-marca::after, .modulo-regua .parada-marca::after, .faixa-fim .parada-marca::after { left: -5px; right: auto; top: 50%; width: 6px; height: 10px; transform: translateY(-50%); clip-path: polygon(100% 0, 100% 100%, 0 50%); }
  .trilha-cartao { padding: 16px; }
  .trilha-conta, .trilha-rotulo .selo-ganho { margin-left: 0; flex-basis: 100%; }
}

/* Celular */
@media (max-width: 640px) {
  .destaque { grid-template-columns: minmax(0, 1fr); padding: 24px; min-height: 0; }
  .destaque-render { order: -1; justify-self: start; height: 120px; width: auto; }
  .atalhos { grid-template-columns: minmax(0, 1fr); }
  .atalho-escuro { grid-column: auto; }
  .nivel, .badge-publico { flex-direction: column; align-items: flex-start; }
  .escala { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pergunta { padding: 18px; }
  .atalho { min-height: 140px; }
  .capa { height: 150px; }
  .topo nav { margin-left: -12px; margin-right: 0; flex-wrap: wrap; }
  .topo-interno { padding-bottom: 2px; }
  .topo { position: static; }
  .prompts-topo img { display: none; }
  .prompt-topo { flex-wrap: wrap; }
}

/* Na escada de badges o balão fica centrado sobre o badge, em qualquer largura. */
.degrau .parada-marca::after, .modulo-regua .degrau .parada-marca::after {
  left: 50%; right: auto; top: 100%; width: 10px; height: 6px; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Cartão clicável por inteiro (Fred, 07/11/2026): o link principal se estende sobre o cartão,
   então o clique funciona em qualquer ponto, não só no texto. Um link só por cartão, para o leitor de tela. */
.cartao-clicavel { position: relative; cursor: pointer; transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
.cartao-clicavel .link-cartao::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.cartao-clicavel .link-cartao:not(.botao-contorno) { text-decoration: none; }
.cartao-clicavel:hover .link-cartao:not(.botao-contorno) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.cartao-clicavel:hover { box-shadow: var(--sombra); }
.cartao-clicavel .link-cartao:focus-visible { outline: none; }
.cartao-clicavel:has(.link-cartao:focus-visible) { outline: 3px solid var(--tinta); outline-offset: 3px; }
.cartao-clicavel :is(button, input, a:not(.link-cartao)) { position: relative; z-index: 1; }
.cartao-clicavel h3 { display: flex; align-items: center; gap: 8px; }
.cartao-clicavel h3 > .icone { margin-left: auto; color: var(--apoio); transition: transform 0.25s var(--ease), color 0.25s; }
.cartao-clicavel:hover h3 > .icone { transform: translateX(3px); color: var(--tinta); }
.grade-certificados .cartao-clicavel { border-radius: 20px; }
/* Aqui o item não tem fundo: a sombra e o levante ficam só no certificado, não na área que inclui o botão. */
.grade-certificados .cartao-clicavel:hover { box-shadow: none; transform: none; }
.grade-certificados .cert-mini { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.grade-certificados .cartao-clicavel:hover .cert-mini { box-shadow: 0 1px 2px rgb(60 70 75 / 10%), 0 24px 48px -22px rgb(60 70 75 / 55%); }
@media (prefers-reduced-motion: no-preference) { .grade-certificados .cartao-clicavel:hover .cert-mini { transform: translateY(-3px); } }
.grade-certificados .cartao-clicavel:hover .botao-contorno { background: var(--tinta); color: #fff; }
@media (prefers-reduced-motion: no-preference) { .cartao-clicavel:hover { transform: translateY(-2px); } }
@media (forced-colors: active) { .cartao-clicavel:has(.link-cartao:focus-visible) { outline-color: Highlight; } }

/* Cursos: portfólio do aluno, com o andamento de cada curso */
.portfolio-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.portfolio-numeros :is(a, .portfolio-zero) { display: grid; gap: 2px; padding: 18px 22px; background: var(--branco); border-radius: 16px; text-decoration: none; color: var(--tinta); }
.portfolio-numeros a:hover { box-shadow: var(--sombra); }
.portfolio-numero { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.portfolio-secao { display: grid; gap: 16px; scroll-margin-top: 6rem; }
.portfolio-secao .titulo-secao { margin-top: 20px; }
.portfolio { display: grid; gap: 16px; }
.portfolio-cartao { display: grid; grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); overflow: hidden; background: var(--branco); border-radius: 20px; }
.portfolio-cartao .portfolio-capa { height: auto; min-height: 240px; }
.portfolio-texto { display: grid; gap: 8px; align-content: start; padding: 26px 28px 28px; }
.portfolio-texto h3 { font-size: 1.75rem; letter-spacing: -0.025em; line-height: 1.1; }
.portfolio-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.etiqueta, .etiqueta-neutra { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 0.8125rem; }
.etiqueta .icone { width: 15px; height: 15px; }
.etiqueta-neutra { background: var(--superficie); color: var(--apoio); }
.etiqueta-novo { background: var(--superficie); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--fio-forte); }
.etiqueta-andamento { background: #ffb37e; color: var(--tinta); }
.etiqueta-teste { background: var(--assinatura); color: var(--tinta); }
.etiqueta-concluido { background: var(--tinta); color: #fff; }
.portfolio-texto .avanco { margin-top: 8px; }
.portfolio-dados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 10px 0 0; padding-top: 16px; border-top: 1px solid var(--fio); }
.portfolio-dados dt { font-size: 0.8125rem; color: var(--apoio); }
.portfolio-dados dd { margin: 2px 0 0; font-size: 0.9375rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.portfolio-acao { margin-top: 10px; }
.situacao-concluido .avanco progress::-webkit-progress-value { background: var(--sucesso); }
.situacao-concluido .avanco progress::-moz-progress-bar { background: var(--sucesso); }
.grade-cursos.grade-ofertas { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 960px) { .grade-cursos.grade-ofertas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grade-cursos.grade-ofertas { grid-template-columns: 1fr; } }
.cartao-oferta .selo-acao { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.proximos-cursos { margin-top: 0; }
.proximos-grupos { display: grid; gap: 20px; margin-top: 4px; }
.proximos-grupo { display: grid; gap: 10px; }
.proximos-rotulo { font-size: 0.875rem; font-weight: 500; color: var(--apoio); letter-spacing: 0; }
@media (max-width: 860px) {
  .portfolio-cartao { grid-template-columns: 1fr; }
  .portfolio-cartao .portfolio-capa { min-height: 170px; }
  .portfolio-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .portfolio-numeros { gap: 8px; }
  .portfolio-numeros :is(a, .portfolio-zero) { padding: 14px; }
  .portfolio-texto { padding: 22px 20px 24px; }
}
@media (forced-colors: active) {
  .portfolio-cartao, .portfolio-numeros :is(a, .portfolio-zero) { border: 1px solid CanvasText; }
  .etiqueta { forced-color-adjust: none; }
}