/* =============================================================================
   Laboratório Pedagógico Anísio Teixeira
   main.css — sistema visual do site. Organizado em: fontes, tokens, base,
   utilidades, componentes, páginas, impressão.
   As cores nascem do logotipo: azul #14274E e laranja #FE6F02.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. fontes */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next-latin.woff2") format("woff2");
  font-weight: 200 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;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next-latin-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/literata-latin.woff2") format("woff2");
  font-weight: 200 900; 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: "Literata";
  src: url("/assets/fonts/literata-latin-ext.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/literata-latin-italic.woff2") format("woff2");
  font-weight: 200 900; font-style: italic; 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;
}

/* ------------------------------------------------------------------ 2. tokens */
:root {
  --fonte-ui: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-editorial: "Literata", Georgia, "Times New Roman", serif;

  --cor-azul: #14274e;
  --cor-azul-escuro: #0b1733;
  --cor-azul-medio: #2c4372;
  --cor-azul-suave: #e4e9f2;
  --cor-acento: #fe6f02;
  --cor-acento-tinta: #a34600;
  --cor-acento-clara: #ff9a4d;
  --cor-acento-suave: #ffebda;
  --cor-papel: #f4f4ef;
  --cor-papel-fundo: #ecece4;
  --cor-superficie: #ffffff;
  --cor-tinta: #172033;
  --cor-tinta-suave: #4f5a6e;
  --cor-borda: #d6d8d0;
  --cor-borda-suave: #e6e7e0;
  --cor-ok: #166a46;
  --cor-ok-suave: #e2f1e9;
  --cor-erro: #a1301c;
  --cor-erro-suave: #f9e7e2;
  --cor-aviso-tinta: #8a5200;
  --cor-aviso-suave: #fbeeda;
  --cor-pauta: #cfdaea;
  --cor-foco: #0b1733;

  --texto-xs: 0.8125rem;
  --texto-sm: 0.9375rem;
  --texto-base: 1.0625rem;
  --texto-md: 1.1875rem;
  --texto-lg: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  --texto-xl: clamp(1.65rem, 1.3rem + 1.7vw, 2.4rem);
  --texto-2xl: clamp(2.1rem, 1.55rem + 2.7vw, 3.4rem);
  --texto-3xl: clamp(2.4rem, 1.6rem + 4vw, 4.2rem);

  --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.5rem;
  --e6: 2rem; --e7: 3rem; --e8: 4rem; --e9: 6rem;

  --raio-p: 8px;
  --raio: 14px;
  --raio-g: 22px;
  --sombra: 0 1px 2px rgb(20 39 78 / 6%), 0 18px 40px -28px rgb(20 39 78 / 45%);
  --sombra-alta: 0 24px 60px -24px rgb(11 23 51 / 45%);
  --altura-topo: 3.75rem;
  --altura-barra: 4rem;
  --escala-leitura: 1;
}

@media (min-width: 64rem) {
  :root { --altura-topo: 4.5rem; --altura-barra: 0rem; }
}

/* ------------------------------------------------------------------ 3. base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-topo) + 1rem);
}

body {
  background: var(--cor-papel);
  color: var(--cor-tinta);
  font-family: var(--fonte-ui);
  font-size: var(--texto-base);
  line-height: 1.6;
  min-height: 100vh;
  padding-bottom: calc(var(--altura-barra) + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas, iframe, video { display: block; max-width: 100%; }
img, canvas { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--cor-azul); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--cor-acento-tinta); }

:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--cor-acento-suave); color: var(--cor-azul-escuro); }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.18; text-wrap: balance; }
p { text-wrap: pretty; }

.icone { width: 1.375em; height: 1.375em; flex: none; stroke-width: 1.75; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.pular {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 200; background: var(--cor-azul); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--raio-p) var(--raio-p); font-weight: 700; text-decoration: none;
}
.pular:focus { transform: translate(-50%, 0); color: #fff; }

/* ------------------------------------------------------------------ 4. utilidades de layout */
.conteiner { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.conteiner--estreito { width: min(100% - 2.5rem, 46rem); }
.conteiner--largo { width: min(100% - 2.5rem, 88rem); }
@media (min-width: 48rem) {
  .conteiner { width: min(100% - 4rem, 72rem); }
  .conteiner--estreito { width: min(100% - 4rem, 46rem); }
  .conteiner--largo { width: min(100% - 4rem, 88rem); }
}

.secao { padding-block: clamp(2.75rem, 1.75rem + 4vw, 5.5rem); }
.secao--compacta { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.secao--papel { background: var(--cor-superficie); border-block: 1px solid var(--cor-borda-suave); }

.faixa-escura { background: var(--cor-azul); color: #e8ecf4; --cor-foco: #ffb27a; }
.faixa-escura h2, .faixa-escura h3, .faixa-escura b { color: #fff; }
.faixa-escura a { color: var(--cor-acento-clara); }
.faixa-escura__grade { display: grid; gap: var(--e6); }
@media (min-width: 60rem) { .faixa-escura__grade { grid-template-columns: 1fr 1fr; gap: var(--e8); align-items: center; } }

.grade-duas { display: grid; gap: var(--e6); }
@media (min-width: 56rem) { .grade-duas { grid-template-columns: 1fr 1fr; gap: var(--e7); align-items: start; } }
@media (min-width: 56rem) { .grade-duas--apoie { grid-template-columns: 1.1fr 0.9fr; } }

.chamada-lateral { display: grid; gap: var(--e4); align-items: center; }
@media (min-width: 48rem) { .chamada-lateral { grid-template-columns: 1fr auto; gap: var(--e6); } }
.chamada-lateral--apoio {
  background: var(--cor-acento-suave); border-radius: var(--raio-g);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.secao__cabeca { max-width: 46rem; margin-bottom: var(--e6); display: grid; gap: var(--e3); }
.secao__cabeca--linha { max-width: none; }
@media (min-width: 48rem) {
  .secao__cabeca--linha { grid-template-columns: 1fr auto; align-items: end; }
  .secao__cabeca--linha > div { max-width: 46rem; }
}
.secao__cabeca p { color: var(--cor-tinta-suave); font-size: var(--texto-md); }

.acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }
.acoes--linha { align-items: center; }

/* ------------------------------------------------------------------ 5. tipografia de página */
.titulo-pagina {
  font-family: var(--fonte-editorial); font-weight: 500; font-size: var(--texto-2xl);
  line-height: 1.08; letter-spacing: -0.015em; color: var(--cor-azul); max-width: 20ch;
}
.titulo-pagina__area {
  display: block; font-family: var(--fonte-ui); font-weight: 700; font-size: var(--texto-sm);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-acento-tinta); margin-bottom: var(--e3);
}
.titulo-pagina__frase { display: block; }
.titulo-secao { font-family: var(--fonte-editorial); font-weight: 500; font-size: var(--texto-xl); color: var(--cor-azul); letter-spacing: -0.01em; }
.titulo-secao--editorial { max-width: 20ch; font-size: var(--texto-2xl); }
.subtitulo-secao { font-family: var(--fonte-ui); font-weight: 700; font-size: var(--texto-md); color: var(--cor-azul); margin-top: var(--e6); margin-bottom: var(--e4); }

.cabecalho-pagina { padding-block: clamp(2rem, 1.25rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.cabecalho-pagina__texto { max-width: 60ch; color: var(--cor-tinta-suave); font-size: var(--texto-md); margin-top: var(--e4); }
.cabecalho-pagina__texto--grande { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-tinta); line-height: 1.5; }
.cabecalho-pagina--laboratorio {
  background-color: #f7f8f5;
  background-image: linear-gradient(rgb(20 39 78 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(20 39 78 / 5%) 1px, transparent 1px);
  background-size: 26px 26px;
  border-bottom: 1px solid var(--cor-borda-suave);
}
.cabecalho-pagina--biblioteca { border-bottom: 1px solid var(--cor-borda-suave); }

.texto-apoio { color: var(--cor-tinta-suave); font-size: var(--texto-sm); }
.nota-secao { color: var(--cor-tinta-suave); font-size: var(--texto-sm); margin-top: var(--e5); max-width: 60ch; }

.lista-simples, .lista-perguntas, .lista-marcada { padding-left: 1.2rem; display: grid; gap: var(--e2); }
.lista-simples { list-style: disc; }
.lista-perguntas { list-style: decimal; font-family: var(--fonte-editorial); }
.lista-marcada { list-style: none; padding-left: 0; gap: var(--e3); }
.lista-marcada li { padding-left: 1.75rem; position: relative; }
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 0.7rem;
  border-radius: 50%; border: 2px solid var(--cor-acento);
}

.fatos-linha { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin-top: var(--e5); font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.fatos-linha li { display: flex; align-items: center; gap: var(--e2); }
.fatos-linha .icone { color: var(--cor-acento-tinta); width: 1.2em; height: 1.2em; }

.link-discreto { display: inline-block; font-size: var(--texto-sm); color: var(--cor-tinta-suave); text-decoration-color: var(--cor-borda); }
.link-discreto:hover { color: var(--cor-acento-tinta); }
.link-forte { font-weight: 700; color: var(--cor-azul); text-decoration-color: var(--cor-acento); }

.link-arquivo { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 600; font-size: var(--texto-sm); color: var(--cor-azul); }
.link-arquivo--claro { color: #fff; }
.arquivo-indisponivel { color: var(--cor-tinta-suave); font-weight: 500; text-decoration: none; cursor: default; }
.faixa-escura .arquivo-indisponivel, .cartao-apostila .arquivo-indisponivel, .cabecalho-modulo .arquivo-indisponivel { color: #c6d0e2; }
.valor-pendente {
  display: inline-block; border: 1px dashed var(--cor-aviso-tinta); color: var(--cor-aviso-tinta);
  background: var(--cor-aviso-suave); border-radius: var(--raio-p); padding: 0.1rem 0.5rem; font-size: var(--texto-sm);
}
.aviso-pendente, .aviso-discreto, .aviso-sucesso {
  display: flex; gap: var(--e3); align-items: flex-start; border-radius: var(--raio);
  padding: var(--e3) var(--e4); font-size: var(--texto-sm); margin-top: var(--e4);
}
.aviso-pendente { background: var(--cor-aviso-suave); color: var(--cor-aviso-tinta); }
.aviso-discreto { background: var(--cor-azul-suave); color: var(--cor-azul); }
.aviso-sucesso { background: var(--cor-ok-suave); color: var(--cor-ok); }
.aviso-pendente .icone, .aviso-discreto .icone, .aviso-sucesso .icone { margin-top: 0.15em; }

.etiqueta {
  display: inline-block; font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--cor-tinta-suave); background: var(--cor-papel-fundo);
  border-radius: 999px; padding: 0.15rem 0.6rem;
}

.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.tags li { font-size: var(--texto-xs); color: var(--cor-tinta-suave); background: var(--cor-papel-fundo); border-radius: 999px; padding: 0.15rem 0.6rem; }
.selo-estado { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--cor-acento-tinta); font-weight: 600; }
.selo-estado .icone { width: 1.1em; height: 1.1em; }

.trilha { margin-bottom: var(--e4); font-size: var(--texto-sm); }
.trilha ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; color: var(--cor-tinta-suave); }
.trilha li + li::before { content: "/"; margin-right: 0.35rem; color: var(--cor-borda); }
.trilha a { color: var(--cor-tinta-suave); }

/* ------------------------------------------------------------------ 6. botões, chips e formulários */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 2.875rem; padding: 0.7rem 1.35rem; border: 1.5px solid transparent; border-radius: var(--raio);
  background: var(--cor-azul); color: #fff; font-weight: 700; font-size: var(--texto-base);
  line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.botao:hover { background: var(--cor-azul-escuro); color: #fff; }
.botao--acento { background: var(--cor-acento); color: var(--cor-azul-escuro); }
.botao--acento:hover { background: var(--cor-acento-clara); color: var(--cor-azul-escuro); }
.botao--secundario { background: transparent; color: var(--cor-azul); border-color: var(--cor-borda); }
.botao--secundario:hover { background: var(--cor-azul-suave); color: var(--cor-azul); border-color: var(--cor-azul-medio); }
.botao--claro { background: transparent; color: #fff; border-color: rgb(255 255 255 / 45%); }
.botao--claro:hover { background: rgb(255 255 255 / 12%); color: #fff; }
.botao--perigo { background: var(--cor-erro); color: #fff; }
.botao--perigo:hover { background: #7f2415; color: #fff; }
.botao--compacto { min-height: 2.375rem; padding: 0.35rem 0.9rem; font-size: var(--texto-sm); }
.botao--grande { min-height: 3.25rem; padding: 0.9rem 1.75rem; font-size: var(--texto-md); }
.botao[disabled], .botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.botao .icone { width: 1.25em; height: 1.25em; }

.botao-icone {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem;
  border: 1px solid transparent; border-radius: var(--raio-p); background: transparent; color: var(--cor-azul); font-weight: 700;
}
.botao-icone:hover { background: var(--cor-azul-suave); }
.botao-texto { border: 0; background: none; color: var(--cor-azul); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; padding: 0.35rem; }
.botao-texto:hover { color: var(--cor-acento-tinta); }

.chips { display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: 0.35rem; scrollbar-width: thin; }
.chips::-webkit-scrollbar { height: 4px; }
.chips::-webkit-scrollbar-thumb { background: var(--cor-borda); border-radius: 999px; }
@media (min-width: 48rem) { .chips { flex-wrap: wrap; overflow: visible; } }
.chip {
  flex: none; border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-tinta);
  border-radius: 999px; padding: 0.45rem 0.95rem; font-size: var(--texto-sm); font-weight: 600; white-space: nowrap;
  min-height: 2.5rem;
}
.chip:hover { border-color: var(--cor-azul-medio); }
.chip[aria-pressed="true"] { background: var(--cor-azul); border-color: var(--cor-azul); color: #fff; }

.filtros { display: grid; gap: var(--e3); margin-bottom: var(--e5); }
.filtros__grupo { display: grid; gap: var(--e2); }
.filtros__rotulo { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-tinta-suave); }
.filtros__resultado { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
@media (min-width: 64rem) {
  .filtros { grid-template-columns: repeat(auto-fit, minmax(14rem, auto)); align-items: start; gap: var(--e5); }
  .filtros__resultado { grid-column: 1 / -1; }
}

.campo-busca { display: flex; align-items: center; gap: var(--e2); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 0 var(--e3); }
.campo-busca:focus-within { border-color: var(--cor-azul-medio); box-shadow: 0 0 0 3px var(--cor-azul-suave); }
.campo-busca .icone { color: var(--cor-tinta-suave); }
.campo-busca input { flex: 1; border: 0; background: none; padding: 0.75rem 0; min-height: 2.75rem; }
.campo-busca input:focus { outline: none; }
.campo-busca--grande input { font-size: var(--texto-md); }
.busca-grande { display: grid; gap: var(--e3); margin-top: var(--e5); max-width: 42rem; }
@media (min-width: 30rem) { .busca-grande { grid-template-columns: 1fr auto; } }

.formulario { display: grid; gap: var(--e4); }
.campo { display: grid; gap: var(--e2); }
.campo label { font-weight: 700; font-size: var(--texto-sm); color: var(--cor-azul); }
.campo label span { font-weight: 400; color: var(--cor-tinta-suave); }
.campo input, .campo select, .campo textarea {
  border: 1px solid var(--cor-borda); border-radius: var(--raio-p); background: var(--cor-superficie);
  padding: 0.7rem 0.85rem; min-height: 2.875rem; width: 100%;
}
.campo textarea { min-height: 7rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--cor-foco); outline-offset: 1px; }
.campo [aria-invalid="true"] { border-color: var(--cor-erro); background: var(--cor-erro-suave); }
.formulario__erro { color: var(--cor-erro); font-size: var(--texto-sm); font-weight: 600; }

.dados { display: grid; gap: var(--e3) var(--e5); grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); margin-top: var(--e4); }
.dados div { display: grid; gap: 0.15rem; }
.dados dt { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cor-tinta-suave); }
.dados dd { margin: 0; font-weight: 600; color: var(--cor-tinta); }
.dados--lista { grid-template-columns: 1fr; gap: var(--e3); }

.estado-vazio {
  border: 1px dashed var(--cor-borda); border-radius: var(--raio); padding: var(--e5);
  text-align: center; color: var(--cor-tinta-suave); display: grid; gap: var(--e4); justify-items: center;
}
.estado-vazio--linha { padding: var(--e3); text-align: left; }
.estado-vazio--aberto { text-align: left; justify-items: start; background: var(--cor-papel); }

.progresso { display: grid; gap: var(--e2); margin-top: var(--e4); }
.progresso__barra { height: 0.5rem; background: var(--cor-azul-suave); border-radius: 999px; overflow: hidden; }
.progresso__barra span { display: block; height: 100%; width: var(--p, 0%); background: var(--cor-acento); border-radius: 999px; transition: width 0.4s ease; }
.progresso__texto { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }

.anel { width: 1.75rem; height: 1.75rem; transform: rotate(-90deg); }
.anel--grande { width: 3.5rem; height: 3.5rem; }
.anel__trilho { fill: none; stroke: var(--cor-azul-suave); stroke-width: 4; }
.anel__valor { fill: none; stroke: var(--cor-acento); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }

/* ------------------------------------------------------------------ 7. cabeçalho, menu, barra e rodapé */
.topo {
  position: sticky; top: 0; z-index: 50; background: var(--cor-papel);
  border-bottom: 1px solid var(--cor-borda-suave);
}
.topo__interno { display: flex; align-items: center; gap: var(--e4); height: var(--altura-topo); width: min(100% - 2rem, 88rem); margin-inline: auto; }
@media (min-width: 48rem) { .topo__interno { width: min(100% - 3rem, 88rem); } }

.marca { display: flex; align-items: center; gap: var(--e3); text-decoration: none; color: var(--cor-azul); }
.marca__simbolo { width: 2.25rem; height: auto; }
.marca__nome { display: none; font-size: var(--texto-xs); font-weight: 700; line-height: 1.25; letter-spacing: 0.01em; }
.marca__nome span { display: block; }
.marca__nome span:last-child { color: var(--cor-acento-tinta); }
@media (min-width: 25rem) { .marca__nome { display: block; } }
@media (min-width: 64rem) and (max-width: 74.99rem) { .marca__nome { display: none; } }

.nav-principal { display: none; }
@media (min-width: 64rem) {
  .nav-principal { display: block; margin-inline: auto 0; }
  .nav-principal ul { list-style: none; padding: 0; display: flex; gap: var(--e5); }
  .nav-principal a { color: var(--cor-tinta); text-decoration: none; font-weight: 600; padding-block: 0.4rem; border-bottom: 2px solid transparent; }
  .nav-principal a:hover { color: var(--cor-azul); border-color: var(--cor-borda); }
  .nav-principal a[aria-current="page"] { color: var(--cor-azul); border-color: var(--cor-acento); }
}

.topo__acoes { display: flex; align-items: center; gap: var(--e2); margin-left: auto; }
.topo__percurso { display: none; align-items: center; gap: var(--e2); text-decoration: none; font-weight: 600; font-size: var(--texto-sm); color: var(--cor-azul); }
@media (min-width: 64rem) { .topo__percurso { display: inline-flex; } .topo__percurso span { display: none; } }
@media (min-width: 80rem) { .topo__percurso span { display: inline; } }
.topo__apoie { display: none; }
@media (min-width: 30rem) { .topo__apoie { display: inline-flex; } }
.topo__menu {
  display: inline-flex; align-items: center; gap: var(--e2); min-height: 2.75rem; padding: 0.4rem 0.75rem;
  border: 1px solid var(--cor-borda); border-radius: var(--raio-p); background: var(--cor-superficie); font-weight: 600; color: var(--cor-azul);
}
.topo__menu span { display: none; }
@media (min-width: 64rem) { .topo__menu span { display: inline; } }

.menu-completo {
  border: 0; padding: 0; width: min(100%, 30rem); max-width: 100%; max-height: 100dvh; height: 100dvh;
  margin: 0 0 0 auto; background: var(--cor-superficie); color: var(--cor-tinta); box-shadow: var(--sombra-alta);
  overflow-y: auto;
}
.menu-completo::backdrop { background: rgb(11 23 51 / 55%); }
.menu-completo__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--cor-borda-suave); }
.menu-completo__titulo { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-azul); }
.menu-completo__lista { list-style: none; padding: var(--e4) var(--e5); display: grid; gap: var(--e1); }
.menu-completo__lista a { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3); border-radius: var(--raio); text-decoration: none; color: var(--cor-tinta); }
.menu-completo__lista a:hover { background: var(--cor-papel); }
.menu-completo__lista a[aria-current="page"] { background: var(--cor-azul-suave); }
.menu-completo__lista .icone { color: var(--cor-azul); margin-top: 0.15rem; }
.menu-completo__lista b { display: block; color: var(--cor-azul); }
.menu-completo__lista small { color: var(--cor-tinta-suave); font-size: var(--texto-sm); }
.menu-completo__lema { padding: 0 var(--e5) var(--e6); font-family: var(--fonte-editorial); color: var(--cor-tinta-suave); }

.barra-app {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; display: flex;
  background: var(--cor-superficie); border-top: 1px solid var(--cor-borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-app a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  min-height: var(--altura-barra); padding: 0.35rem 0.25rem; text-decoration: none;
  color: var(--cor-tinta-suave); font-size: var(--texto-xs); font-weight: 600; border-top: 3px solid transparent;
}
.barra-app a[aria-current="page"] { color: var(--cor-azul); border-top-color: var(--cor-acento); }
.barra-app .icone { width: 1.5rem; height: 1.5rem; }
@media (min-width: 64rem) { .barra-app { display: none; } }
body.pagina-fase .barra-app { display: none; }

.rodape { background: var(--cor-azul-escuro); color: #c9d2e4; --cor-foco: #ffb27a; padding-block: var(--e7) var(--e6); margin-top: var(--e8); }
.rodape__interno { width: min(100% - 2.5rem, 72rem); margin-inline: auto; display: grid; gap: var(--e6); }
@media (min-width: 56rem) { .rodape__interno { grid-template-columns: 1.2fr 1fr 1.2fr; gap: var(--e7); } }
.rodape__marca { display: flex; gap: var(--e3); align-items: flex-start; }
.rodape__marca b { color: #fff; }
.rodape__nav ul { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.rodape a { color: #dde4f1; }
.rodape a:hover { color: var(--cor-acento-clara); }
.rodape__nota { font-size: var(--texto-sm); display: grid; gap: var(--e2); }
.rodape__nota b { color: #fff; }

.avisos { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--altura-barra) + 1rem + env(safe-area-inset-bottom)); z-index: 60; display: grid; gap: var(--e2); width: min(100% - 2rem, 28rem); }
.aviso {
  display: flex; align-items: center; gap: var(--e3); background: var(--cor-azul-escuro); color: #fff;
  border-radius: var(--raio); padding: var(--e3) var(--e3) var(--e3) var(--e4); box-shadow: var(--sombra-alta); font-size: var(--texto-sm);
}
.aviso p { flex: 1; }
.aviso .botao-icone { color: #fff; min-width: 2.25rem; min-height: 2.25rem; }
.aviso .botao-icone:hover { background: rgb(255 255 255 / 15%); }

/* ------------------------------------------------------------------ 8. página inicial */
.abertura { padding-block: clamp(2rem, 1rem + 5vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.abertura__grade { display: grid; gap: var(--e6); align-items: center; }
@media (min-width: 48rem) {
  .abertura__grade { grid-template-columns: 1.25fr 0.75fr; gap: var(--e6); align-items: center; }
  .abertura__titulo { font-size: clamp(2rem, 1.2rem + 2.2vw, 2.7rem); }
}
@media (min-width: 60rem) {
  .abertura__grade { grid-template-columns: 1.05fr 0.95fr; gap: var(--e8); }
  .abertura__titulo { font-size: var(--texto-3xl); }
}
.abertura__titulo { font-family: var(--fonte-editorial); font-weight: 500; font-size: var(--texto-3xl); line-height: 1.02; letter-spacing: -0.02em; color: var(--cor-azul); max-width: 16ch; }
.abertura__lead { margin-top: var(--e5); font-size: var(--texto-md); color: var(--cor-tinta-suave); max-width: 44ch; }
.garantias { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-top: var(--e5); font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.garantias li { display: flex; align-items: center; gap: var(--e2); }
.garantias .icone { width: 1.1em; height: 1.1em; color: var(--cor-ok); }
.abertura__ilustracao { order: -1; }
@media (min-width: 48rem) { .abertura__ilustracao { order: 0; } }
.rede-abertura { width: 100%; max-width: 21rem; margin-inline: auto; overflow: visible; }
@media (min-width: 60rem) { .rede-abertura { max-width: 34rem; } }
.rede-abertura__linha { stroke: var(--cor-azul); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracar 0.7s ease forwards; }
.rede-abertura__linhas line:nth-child(1) { animation-delay: 0.1s; }
.rede-abertura__linhas line:nth-child(2) { animation-delay: 0.17s; }
.rede-abertura__linhas line:nth-child(3) { animation-delay: 0.24s; }
.rede-abertura__linhas line:nth-child(4) { animation-delay: 0.31s; }
.rede-abertura__linhas line:nth-child(5) { animation-delay: 0.38s; }
.rede-abertura__linhas line:nth-child(6) { animation-delay: 0.45s; }
.rede-abertura__linhas line:nth-child(7) { animation-delay: 0.52s; }
.rede-abertura__linhas line:nth-child(8) { animation-delay: 0.59s; }
.rede-abertura__linhas line:nth-child(9) { animation-delay: 0.66s; }
.rede-abertura__linhas line:nth-child(10) { animation-delay: 0.73s; }
.rede-abertura__linhas line:nth-child(11) { animation-delay: 0.8s; }
.rede-abertura__no { fill: var(--cor-papel); stroke: var(--cor-azul); stroke-width: 5.5; opacity: 0; animation: surgir 0.45s ease forwards 0.72s; }
.rede-abertura__no--acento { fill: var(--cor-acento); stroke: var(--cor-acento); animation-delay: 0.85s; }
.rede-abertura__no--anel { stroke: var(--cor-acento); animation-delay: 1s; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes surgir { to { opacity: 1; } }

.continuar {
  display: grid; gap: var(--e2); background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-left: 5px solid var(--cor-acento); border-radius: var(--raio); padding: var(--e4) var(--e5);
  text-decoration: none; color: var(--cor-tinta);
}
.continuar:hover { border-color: var(--cor-azul-medio); border-left-color: var(--cor-acento); color: var(--cor-tinta); }
.continuar__rotulo { display: flex; align-items: center; gap: var(--e2); font-size: var(--texto-sm); font-weight: 700; color: var(--cor-acento-tinta); }
.continuar__titulo { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-azul); }
.continuar__meta { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.continuar .progresso { margin-top: var(--e2); }
.abertura__continuar { margin-top: var(--e6); }

.areas { list-style: none; padding: 0; display: grid; gap: var(--e4); }
@media (min-width: 37.5rem) { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .areas { grid-template-columns: repeat(4, 1fr); } }
.area a {
  display: grid; gap: var(--e2); height: 100%; padding: var(--e5); background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-g); text-decoration: none; color: var(--cor-tinta);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.area a:hover { border-color: var(--cor-azul-medio); transform: translateY(-2px); color: var(--cor-tinta); }
.area__icone { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--cor-azul-suave); color: var(--cor-azul); margin-bottom: var(--e2); }
.area__icone .icone { width: 1.5rem; height: 1.5rem; }
.area__titulo { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-azul); }
.area__texto { color: var(--cor-tinta-suave); }
.area__dado { margin-top: auto; padding-top: var(--e3); font-size: var(--texto-sm); font-weight: 600; color: var(--cor-acento-tinta); }
.area--laboratorio a {
  background-image: linear-gradient(rgb(20 39 78 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(20 39 78 / 4%) 1px, transparent 1px);
  background-size: 22px 22px;
}

.pergunta-semana, .desafio-semana {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  background-image: repeating-linear-gradient(to bottom, transparent 0 2.1rem, var(--cor-pauta) 2.1rem 2.15rem);
  background-position: 0 1.2rem;
}
.pergunta-semana__rotulo, .desafio-semana__rotulo { font-family: var(--fonte-ui); font-size: var(--texto-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-acento-tinta); }
.pergunta-semana__texto, .desafio-semana__pergunta { font-family: var(--fonte-editorial); font-size: var(--texto-xl); color: var(--cor-azul); margin-top: var(--e4); max-width: 30ch; line-height: 1.35; }
.pergunta-semana__origem, .desafio-semana__origem { margin-top: var(--e3); font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.pergunta-semana .botao, .desafio-semana .botao { margin-top: var(--e5); }

.citacao { border-left: 4px solid var(--cor-acento); padding-left: var(--e5); }
.citacao blockquote p { font-family: var(--fonte-editorial); font-size: var(--texto-lg); line-height: 1.45; }
.citacao figcaption { margin-top: var(--e3); font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.citacao--clara figcaption { color: #b9c4da; }

/* ------------------------------------------------------------------ 9. catálogo e formações */
.lista-formacoes { display: grid; gap: var(--e5); }
@media (min-width: 64rem) { .lista-formacoes { grid-template-columns: repeat(2, 1fr); } }
.cartao-formacao {
  display: grid; background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-g); overflow: hidden;
}
.cartao-formacao__capa { display: block; text-decoration: none; }
.cartao-formacao__corpo { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e2); }
.cartao-formacao__tema { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-acento-tinta); }
.cartao-formacao__titulo { font-family: var(--fonte-editorial); font-size: var(--texto-lg); }
.cartao-formacao__titulo a { color: var(--cor-azul); text-decoration: none; }
.cartao-formacao__titulo a:hover { text-decoration: underline; }
.cartao-formacao__chamada { font-family: var(--fonte-editorial); color: var(--cor-tinta); }
.cartao-formacao__descricao { color: var(--cor-tinta-suave); font-size: var(--texto-sm); }
.cartao-formacao__rodape { margin-top: auto; font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.cartao-formacao .botao { margin-top: var(--e4); align-self: start; }
.cartao-formacao--preparacao { background: transparent; border-style: dashed; }

.capa {
  position: relative; overflow: hidden; background: var(--cor-azul); color: #fff;
  padding: var(--e5); min-height: 12rem; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--e4);
}
.capa--educacao { background: #22406f; }
.capa .rede { position: absolute; inset: auto -10% 40% auto; width: 60%; opacity: 0.5; }
.capa .rede__linhas { stroke: rgb(255 255 255 / 45%); stroke-width: 1.5; fill: none; }
.capa .rede__nos { fill: rgb(255 255 255 / 75%); }
.capa .rede__nos .destaque { fill: var(--cor-acento); }
.capa__perguntas { list-style: none; padding: 0; display: grid; gap: var(--e2); position: relative; }
.capa__perguntas li { font-family: var(--fonte-editorial); font-size: var(--texto-base); line-height: 1.25; padding-top: var(--e2); border-top: 1px solid rgb(255 255 255 / 25%); }
.capa__perguntas--unica li { font-size: var(--texto-lg); border: 0; padding-top: 0; }
.capa__rodape { font-size: var(--texto-xs); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255 255 255 / 70%); position: relative; }
.capa--grande { min-height: 20rem; border-radius: var(--raio-g); }
.capa--grande .capa__perguntas li { font-size: var(--texto-md); }
@media (min-width: 48rem) {
  .cartao-formacao { grid-template-columns: 15rem 1fr; }
  .cartao-formacao--preparacao { grid-template-columns: 1fr; }
  .capa { min-height: 100%; }
}

.lista-apostilas { list-style: none; padding: 0; display: grid; gap: var(--e3); }
.lista-apostilas li { padding-bottom: var(--e3); border-bottom: 1px solid rgb(255 255 255 / 15%); }

.cabecalho-formacao { padding-block: clamp(1.5rem, 1rem + 3vw, 3rem) 0; }
.cabecalho-formacao__grade { display: grid; gap: var(--e6); align-items: start; }
@media (min-width: 60rem) { .cabecalho-formacao__grade { grid-template-columns: 1.15fr 0.85fr; gap: var(--e8); } }
.cabecalho-formacao__tema { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-acento-tinta); margin-bottom: var(--e3); }
.cabecalho-formacao__chamada { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-tinta); margin-top: var(--e4); }
.cabecalho-formacao__texto > p { color: var(--cor-tinta-suave); margin-top: var(--e3); max-width: 60ch; }
.cabecalho-formacao__capa { order: -1; }
@media (min-width: 60rem) { .cabecalho-formacao__capa { order: 0; } }

.grade-sobre { display: grid; gap: var(--e5); }
@media (min-width: 48rem) { .grade-sobre { grid-template-columns: repeat(2, 1fr); gap: var(--e6); } }
.bloco-sobre h3 { font-size: var(--texto-md); color: var(--cor-azul); margin-bottom: var(--e3); }
.bloco-sobre p { color: var(--cor-tinta-suave); }
.bloco-sobre .lista-simples { color: var(--cor-tinta-suave); }

.mapa-percurso { list-style: none; padding: 0; display: grid; gap: var(--e4); margin-bottom: var(--e7); }
@media (min-width: 48rem) { .mapa-percurso { grid-template-columns: repeat(4, 1fr); gap: var(--e3); } }
.mapa-percurso__no a {
  display: grid; gap: var(--e2); justify-items: start; padding: var(--e4); border-radius: var(--raio);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); text-decoration: none; color: var(--cor-tinta); height: 100%;
}
.mapa-percurso__no a:hover { border-color: var(--cor-azul-medio); color: var(--cor-tinta); }
.mapa-percurso__numero { font-family: var(--fonte-editorial); font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.mapa-percurso__pergunta { font-family: var(--fonte-editorial); font-size: var(--texto-md); color: var(--cor-azul); }
.mapa-percurso__estado { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.mapa-percurso__no[data-estado="concluido"] a { background: var(--cor-ok-suave); border-color: #bfe0ce; }

.lista-modulos { display: grid; gap: var(--e5); }
@media (min-width: 64rem) { .lista-modulos { grid-template-columns: repeat(2, 1fr); } }
.modulo-cartao { background: var(--cor-papel); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-g); padding: var(--e5); display: flex; flex-direction: column; }
.modulo-cartao__numero { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-tinta-suave); }
.modulo-cartao__titulo { font-family: var(--fonte-editorial); font-size: var(--texto-md); margin-top: var(--e2); }
.modulo-cartao__titulo a { color: var(--cor-azul); text-decoration: none; }
.modulo-cartao__titulo a:hover { text-decoration: underline; }
.modulo-cartao__pergunta { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-acento-tinta); margin-top: var(--e2); }
.modulo-cartao__sub { color: var(--cor-tinta-suave); margin-top: var(--e3); }
.modulo-cartao .botao { margin-top: var(--e4); align-self: start; }
.modulo-cartao[data-estado="concluido"] { border-color: #bfe0ce; }

.grade-modulo-unico { display: grid; gap: var(--e6); }
@media (min-width: 60rem) { .grade-modulo-unico { grid-template-columns: 1.3fr 0.7fr; gap: var(--e7); align-items: start; } }
.perguntas-guia { background: var(--cor-azul-suave); border-radius: var(--raio-g); padding: var(--e5); }
.perguntas-guia__titulo { font-family: var(--fonte-ui); font-size: var(--texto-sm); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cor-azul); }
.perguntas-guia ol { list-style: none; padding: 0; display: grid; gap: var(--e4); margin-top: var(--e4); counter-reset: guia; }
.perguntas-guia li { counter-increment: guia; padding-left: 2rem; position: relative; }
.perguntas-guia li::before {
  content: counter(guia); position: absolute; left: 0; top: 0.1rem; width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center; border-radius: 50%; background: var(--cor-azul); color: #fff; font-size: var(--texto-xs); font-weight: 700;
}
.perguntas-guia p { font-family: var(--fonte-editorial); color: var(--cor-azul); }

.lista-fases { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.fase-item a {
  display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); text-decoration: none; color: var(--cor-tinta);
}
.fase-item a:hover { border-color: var(--cor-azul-medio); color: var(--cor-tinta); }
.fase-item__marca { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; border: 2px solid var(--cor-borda); font-size: var(--texto-sm); font-weight: 700; color: var(--cor-tinta-suave); }
.fase-item__check { display: none; width: 1.1rem; height: 1.1rem; }
.fase-item[data-estado="feita"] .fase-item__marca { background: var(--cor-ok); border-color: var(--cor-ok); color: #fff; }
.fase-item[data-estado="feita"] .fase-item__n { display: none; }
.fase-item[data-estado="feita"] .fase-item__check { display: block; }
.fase-item__texto { display: grid; gap: 0.1rem; }
.fase-item__titulo { font-weight: 600; color: var(--cor-azul); }
.fase-item__meta { font-size: var(--texto-sm); color: var(--cor-tinta-suave); display: flex; flex-wrap: wrap; gap: var(--e3); }
.fase-item__tipo { display: inline-flex; align-items: center; gap: 0.3rem; }
.fase-item__tipo .icone { width: 1.1em; height: 1.1em; }
.fase-item[data-atual] a { border-color: var(--cor-acento); background: var(--cor-acento-suave); }

.conclusao { background: var(--cor-ok-suave); border-block: 1px solid #bfe0ce; padding-block: var(--e6); }
.conclusao__interno { display: flex; gap: var(--e4); align-items: flex-start; }
.conclusao__icone { width: 2.5rem; height: 2.5rem; color: var(--cor-ok); flex: none; }
.conclusao p { margin-top: var(--e3); max-width: 62ch; }
.proximo { display: grid; gap: 0.15rem; margin-top: var(--e5); padding: var(--e4); background: var(--cor-superficie); border-radius: var(--raio); text-decoration: none; }
.proximo__rotulo { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-tinta-suave); }
.proximo b { font-family: var(--fonte-editorial); font-size: var(--texto-md); color: var(--cor-azul); font-weight: 500; }

/* ------------------------------------------------------------------ 10. módulo */
.cabecalho-modulo { background: var(--cor-azul); color: #e8ecf4; --cor-foco: #ffb27a; padding-block: var(--e5) var(--e7); }
.cabecalho-modulo .trilha a, .cabecalho-modulo .trilha li { color: #b9c4da; }
.cabecalho-modulo .trilha li + li::before { color: rgb(255 255 255 / 35%); }
.cabecalho-modulo__grade { display: grid; gap: var(--e6); }
@media (min-width: 60rem) { .cabecalho-modulo__grade { grid-template-columns: 1.25fr 0.75fr; gap: var(--e8); align-items: start; } }
.cabecalho-modulo__posicao { font-size: var(--texto-sm); color: #b9c4da; }
.cabecalho-modulo__pergunta { font-family: var(--fonte-editorial); font-weight: 500; font-size: var(--texto-2xl); color: #fff; line-height: 1.05; margin-top: var(--e3); }
.cabecalho-modulo__titulo { font-family: var(--fonte-ui); font-size: var(--texto-md); font-weight: 700; color: var(--cor-acento-clara); margin-top: var(--e3); }
.cabecalho-modulo__sub { color: #cdd6e6; margin-top: var(--e2); max-width: 52ch; }
.cabecalho-modulo .progresso__barra { background: rgb(255 255 255 / 20%); }
.cabecalho-modulo .progresso__texto { color: #b9c4da; }
.cabecalho-modulo .perguntas-guia { background: rgb(255 255 255 / 8%); }
.cabecalho-modulo .perguntas-guia__titulo, .cabecalho-modulo .perguntas-guia p { color: #fff; }
.cabecalho-modulo .perguntas-guia li::before { background: var(--cor-acento); color: var(--cor-azul-escuro); }
.cabecalho-modulo .link-discreto { color: var(--cor-acento-clara); }

/* ------------------------------------------------------------------ 11. aula */
.aula__topo { position: sticky; top: var(--altura-topo); z-index: 40; background: var(--cor-papel); border-bottom: 1px solid var(--cor-borda-suave); }
.aula__topo-interno { display: flex; align-items: center; gap: var(--e4); padding-block: var(--e2); }
.voltar { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--texto-sm); font-weight: 600; color: var(--cor-azul); text-decoration: none; min-height: 2.75rem; }
.voltar span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.aula__topo .progresso { margin: 0; margin-left: auto; width: min(45%, 16rem); gap: 0.15rem; }
.aula__topo .progresso__texto { font-size: var(--texto-xs); text-align: right; }

.aula__grade { display: grid; gap: var(--e6); padding-block: var(--e6) var(--e8); }
.aula__indice { display: none; }
@media (min-width: 64rem) {
  .aula__grade { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--e7); align-items: start; }
  .aula__indice { display: block; position: sticky; top: calc(var(--altura-topo) + 4rem); max-height: calc(100vh - var(--altura-topo) - 6rem); overflow-y: auto; }
  .aula__principal { grid-column: 2; }
  .aula__margem { grid-column: 2; }
  .aula__fechamento { grid-column: 2; }
  .aula__indice { grid-row: 1 / span 3; }
}
@media (min-width: 87.5rem) {
  .aula__grade { grid-template-columns: 15rem minmax(0, 44rem) 17rem; justify-content: center; }
  .aula__margem { grid-column: 3; grid-row: 1 / span 2; position: sticky; top: calc(var(--altura-topo) + 4rem); }
}
.aula__indice-titulo { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-tinta-suave); margin-bottom: var(--e3); }
.aula__indice .fase-item a { padding: var(--e2) var(--e3); background: transparent; border-color: transparent; }
.aula__indice .fase-item a:hover { background: var(--cor-superficie); }
.aula__indice .fase-item__titulo { font-size: var(--texto-sm); }
.aula__indice .fase-item__meta { font-size: var(--texto-xs); }
.aula__indice .fase-item__marca { width: 1.6rem; height: 1.6rem; font-size: var(--texto-xs); }

.aula__indice-movel { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); margin-bottom: var(--e5); }
@media (min-width: 64rem) { .aula__indice-movel { display: none; } }
.aula__indice-movel > summary { display: flex; align-items: center; gap: var(--e2); padding: var(--e3) var(--e4); font-weight: 600; color: var(--cor-azul); cursor: pointer; min-height: 2.75rem; }
.aula__indice-movel .lista-fases { padding: 0 var(--e3) var(--e3); }

.aula__posicao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.aula__tempo { display: inline-flex; align-items: center; gap: 0.35rem; }
.aula__tempo .icone { width: 1.1em; height: 1.1em; }
.aula__titulo { font-family: var(--fonte-editorial); font-weight: 500; font-size: var(--texto-2xl); color: var(--cor-azul); line-height: 1.08; letter-spacing: -0.015em; margin-top: var(--e3); max-width: 24ch; }
.aula__lead { font-family: var(--fonte-editorial); font-size: var(--texto-lg); line-height: 1.45; color: var(--cor-tinta); margin-top: var(--e4); padding-left: var(--e4); border-left: 3px solid var(--cor-acento); max-width: 56ch; }

.ferramentas-leitura { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: var(--e5); padding-bottom: var(--e5); border-bottom: 1px solid var(--cor-borda-suave); }
.ouvir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.ouvir--pagina { margin-bottom: var(--e5); }
.ouvir__velocidade { font-size: var(--texto-sm); color: var(--cor-tinta-suave); display: inline-flex; align-items: center; gap: var(--e2); }
.ouvir__velocidade select { border: 1px solid var(--cor-borda); border-radius: var(--raio-p); padding: 0.3rem 0.5rem; background: var(--cor-superficie); min-height: 2.25rem; }
.ouvir--tocando .botao--secundario { background: var(--cor-azul); color: #fff; border-color: var(--cor-azul); }
.preferencias { position: relative; }
.preferencias > summary { list-style: none; }
.preferencias > summary::-webkit-details-marker { display: none; }
.preferencias__painel {
  position: absolute; z-index: 30; top: calc(100% + 0.5rem); left: 0; width: 16rem; background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: var(--e4); display: grid; gap: var(--e2);
}
.preferencias__rotulo { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cor-tinta-suave); }
.preferencias__linha { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.preferencias__linha output { min-width: 3.5rem; text-align: center; font-weight: 700; color: var(--cor-azul); }
.preferencias__linha .botao-icone { border-color: var(--cor-borda); }

.video { margin: var(--e6) 0; }
.video__quadro, .video iframe { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--raio); }
.video__quadro { background: var(--cor-azul); display: grid; place-items: center; }
.video__iniciar { display: grid; justify-items: center; gap: var(--e2); background: none; border: 0; color: #fff; font-weight: 700; padding: var(--e5); }
.video__iniciar .icone { width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 2px solid rgb(255 255 255 / 60%); padding: 0.75rem; }
.video figcaption { font-size: var(--texto-sm); color: var(--cor-tinta-suave); margin-top: var(--e2); }

.texto-aula { font-family: var(--fonte-editorial); font-size: calc(var(--texto-md) * var(--escala-leitura)); line-height: 1.75; margin-top: var(--e6); max-width: 40rem; }
.texto-aula p + p { margin-top: 1.15em; }
[data-fonte-leitura="legivel"] .texto-aula, [data-fonte-leitura="legivel"] .aula__lead { font-family: var(--fonte-ui); letter-spacing: 0.005em; }
.definicao { border-left: 3px solid var(--cor-azul-suave); padding-left: var(--e4); }
.definicao dfn { display: block; font-family: var(--fonte-ui); font-style: normal; font-weight: 700; font-size: var(--texto-base); color: var(--cor-azul); margin-bottom: 0.2rem; }
.lendo { background: linear-gradient(transparent 62%, var(--cor-acento-suave) 62%); }

.bloco { margin-top: var(--e7); padding-top: var(--e6); border-top: 1px solid var(--cor-borda-suave); }
.bloco__titulo { font-family: var(--fonte-ui); font-size: var(--texto-md); font-weight: 700; color: var(--cor-azul); }
.bloco__intro { color: var(--cor-tinta-suave); margin-top: var(--e3); max-width: 56ch; }

.abas__lista { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }
.aba { border: 1px solid var(--cor-borda); background: var(--cor-superficie); border-radius: 999px; padding: 0.45rem 1rem; font-weight: 600; font-size: var(--texto-sm); min-height: 2.5rem; }
.aba[aria-selected="true"] { background: var(--cor-azul); border-color: var(--cor-azul); color: #fff; }
.abas__painel { margin-top: var(--e4); background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); padding: var(--e5); }
.abas__pergunta { font-family: var(--fonte-editorial); font-size: var(--texto-md); color: var(--cor-azul); margin-bottom: var(--e3); }

.sequencia { list-style: none; padding: 0; display: grid; gap: var(--e2); margin-top: var(--e5); counter-reset: passo; }
.sequencia__item { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); }
.sequencia__item > summary { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); cursor: pointer; list-style: none; min-height: 3rem; }
.sequencia__item > summary::-webkit-details-marker { display: none; }
.sequencia__n { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; flex: none; border-radius: 50%; background: var(--cor-azul-suave); color: var(--cor-azul); font-size: var(--texto-sm); font-weight: 700; }
.sequencia__texto { display: grid; gap: 0.1rem; flex: 1; }
.sequencia__titulo { font-weight: 700; color: var(--cor-azul); }
.sequencia__detalhe { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.sequencia__seta { color: var(--cor-tinta-suave); transition: transform 0.2s ease; }
.sequencia__item[open] .sequencia__seta { transform: rotate(180deg); }
.sequencia__destaque { padding: 0 var(--e4) var(--e4) 3.4rem; font-family: var(--fonte-editorial); color: var(--cor-acento-tinta); }

.campo-busca + .fichas-autores { margin-top: var(--e4); }
.fichas-autores { display: grid; gap: var(--e2); margin-top: var(--e4); }
.ficha-autor, .ficha { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); }
.ficha-autor > summary, .ficha > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); padding: var(--e3) var(--e4); cursor: pointer; list-style: none; min-height: 3rem; }
.ficha-autor > summary::-webkit-details-marker, .ficha > summary::-webkit-details-marker { display: none; }
.ficha-autor__nome { font-weight: 700; color: var(--cor-azul); }
.ficha-autor__anos { font-weight: 400; color: var(--cor-tinta-suave); font-size: var(--texto-sm); }
.ficha-autor__conceito { font-size: var(--texto-sm); color: var(--cor-tinta-suave); flex: 1; }
.ficha-autor__seta, .ficha__seta { color: var(--cor-tinta-suave); margin-left: auto; transition: transform 0.2s ease; }
.ficha-autor[open] .ficha-autor__seta, .ficha[open] .ficha__seta { transform: rotate(180deg); }
.ficha-autor__corpo, .ficha__corpo { padding: 0 var(--e4) var(--e4); display: grid; gap: var(--e2); }
.ficha-autor__corpo h3, .ficha__corpo h3 { font-size: var(--texto-sm); font-weight: 700; color: var(--cor-acento-tinta); margin-top: var(--e2); }
.ficha-autor__obra, .ficha__obra { font-family: var(--fonte-editorial); color: var(--cor-tinta-suave); }

.atividade { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-g); padding: var(--e5); margin-top: var(--e5); }
.atividade__titulo { font-family: var(--fonte-editorial); font-size: var(--texto-md); color: var(--cor-azul); }
.atividade__objetivo { color: var(--cor-tinta-suave); margin-top: var(--e2); }
.atividade__passos { margin: var(--e4) 0 0; padding-left: 1.25rem; display: grid; gap: var(--e2); }
.atividade .link-discreto { margin-top: var(--e3); }

.caderno { margin-top: var(--e4); }
.caderno__rotulo { display: block; font-size: var(--texto-sm); font-weight: 700; color: var(--cor-azul); margin-bottom: var(--e2); }
.caderno__rotulo span { font-weight: 400; color: var(--cor-tinta-suave); }
.caderno__folha {
  width: 100%; border: 1px solid var(--cor-borda); border-radius: var(--raio-p); background-color: #fff;
  background-image:
    linear-gradient(90deg, transparent 2.25rem, rgb(254 111 2 / 35%) 2.25rem, rgb(254 111 2 / 35%) calc(2.25rem + 1px), transparent calc(2.25rem + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(1.75rem - 1px), var(--cor-pauta) calc(1.75rem - 1px) 1.75rem);
  background-attachment: local;
  font-family: var(--fonte-editorial); font-size: var(--texto-base); line-height: 1.75rem;
  padding: 0.28rem 1rem 0 3rem; resize: vertical;
}
.caderno__folha:focus { outline: 3px solid var(--cor-foco); outline-offset: 1px; }
.caderno__estado { font-size: var(--texto-xs); color: var(--cor-tinta-suave); margin-top: var(--e2); min-height: 1.1rem; }

.extras { display: grid; gap: var(--e4); margin-top: var(--e5); }
@media (min-width: 48rem) { .extras { grid-template-columns: repeat(3, 1fr); } }
.extra { background: var(--cor-papel); border-radius: var(--raio); padding: var(--e4); }
.extra h3 { font-size: var(--texto-sm); color: var(--cor-azul); margin-bottom: var(--e2); }
.extra p { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.bibliografia { list-style: none; padding: 0; display: grid; gap: var(--e4); margin-top: var(--e5); }
.bibliografia li { padding-left: var(--e4); border-left: 2px solid var(--cor-borda); }
.bibliografia__citacao { font-family: var(--fonte-editorial); }
.bibliografia__nota { font-size: var(--texto-sm); color: var(--cor-tinta-suave); margin-top: var(--e2); }
.cartao-apostila { display: flex; gap: var(--e4); align-items: flex-start; background: var(--cor-azul); color: #e8ecf4; --cor-foco: #ffb27a; border-radius: var(--raio-g); padding: var(--e5); margin-top: var(--e6); }
.cartao-apostila__icone { width: 2.5rem; height: 2.5rem; flex: none; color: var(--cor-acento-clara); }
.cartao-apostila__titulo { font-weight: 700; color: #fff; margin-bottom: var(--e2); }
.cartao-apostila .botao { margin-top: var(--e4); }

.aula__margem { display: grid; gap: var(--e4); align-content: start; margin-top: var(--e6); }
.nota-margem { border-radius: var(--raio); padding: var(--e4); border-top: 3px solid var(--cor-acento); background: var(--cor-acento-suave); }
.nota-margem--saber { border-top-color: var(--cor-azul-medio); background: var(--cor-azul-suave); }
.nota-margem__titulo { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-azul); margin-bottom: var(--e2); }
.nota-margem p { font-size: var(--texto-sm); }

.aula__fechamento { margin-top: var(--e7); }
.verificacao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); padding: var(--e5); }
.verificacao__titulo { font-size: var(--texto-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-acento-tinta); }
.verificacao__pergunta { font-family: var(--fonte-editorial); font-size: var(--texto-md); color: var(--cor-azul); margin-top: var(--e3); }
.verificacao__opcoes { display: grid; gap: var(--e2); margin-top: var(--e4); }
.opcao { display: flex; align-items: center; gap: var(--e3); text-align: left; padding: var(--e3) var(--e4); border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-papel); min-height: 3rem; }
.opcao:hover { border-color: var(--cor-azul-medio); }
.opcao__marca { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; border: 2px solid var(--cor-borda); border-radius: 50%; color: transparent; }
.opcao__marca .icone { width: 0.9rem; height: 0.9rem; }
.opcao--certa { background: var(--cor-ok-suave); border-color: var(--cor-ok); }
.opcao--certa .opcao__marca { background: var(--cor-ok); border-color: var(--cor-ok); color: #fff; }
.opcao--errada { background: var(--cor-erro-suave); border-color: var(--cor-erro); }
.opcao[aria-disabled="true"] { cursor: default; }
.verificacao__retorno { margin-top: var(--e4); font-weight: 600; }
.verificacao__retorno:empty { margin: 0; }
.verificacao__retorno--certo { color: var(--cor-ok); }
.verificacao__retorno--errado { color: var(--cor-erro); }

.passos { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: space-between; margin-top: var(--e6); }
.passos__proxima { margin-top: var(--e3); font-size: var(--texto-sm); color: var(--cor-tinta-suave); }

.barra-aula {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; display: flex; align-items: center; gap: var(--e2);
  background: var(--cor-superficie); border-top: 1px solid var(--cor-borda); padding: var(--e2) var(--e3);
  padding-bottom: calc(var(--e2) + env(safe-area-inset-bottom));
}
@media (min-width: 64rem) { .barra-aula { display: none; } }
.barra-aula__item { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 3.5rem; min-height: 3rem; justify-content: center; font-size: var(--texto-xs); font-weight: 600; color: var(--cor-tinta-suave); text-decoration: none; }
.barra-aula__concluir { flex: 1; margin-left: auto; }

/* ------------------------------------------------------------------ 12. biblioteca */
.acervo { display: grid; gap: var(--e3); }
@media (min-width: 64rem) { .acervo { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.ficha { padding: 0; }
.ficha--leituras, .ficha--apostilas, .ficha--materiais { padding: var(--e4); display: grid; gap: var(--e2); }
.ficha__tipo { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cor-tinta-suave); }
.ficha__tipo .icone { width: 1.1em; height: 1.1em; color: var(--cor-acento-tinta); }
.ficha__titulo { font-weight: 700; color: var(--cor-azul); font-size: var(--texto-base); }
.ficha__sub { font-size: var(--texto-sm); color: var(--cor-tinta-suave); width: 100%; }
.ficha__citacao { font-family: var(--fonte-editorial); color: var(--cor-tinta); }
.ficha__nota { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.ficha__rodape { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; justify-content: space-between; margin-top: var(--e2); }
.ficha__rodape .tags { margin: 0; }
.ficha__contexto { padding-bottom: var(--e3); border-bottom: 1px solid var(--cor-borda-suave); }
.ficha__contexto:last-of-type { border-bottom: 0; padding-bottom: 0; }
.ficha dfn { font-style: normal; font-weight: 700; color: var(--cor-azul); }

/* ------------------------------------------------------------------ 13. laboratório e experimento */
.grupo-experimentos { margin-bottom: var(--e7); }
.grupo-experimentos__cabeca { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: baseline; padding-bottom: var(--e3); border-bottom: 2px solid var(--cor-azul-suave); margin-bottom: var(--e4); }
.grupo-experimentos__pergunta { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-azul); }
.grupo-experimentos__origem { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.grade-experimentos { list-style: none; padding: 0; display: grid; gap: var(--e4); }
@media (min-width: 48rem) { .grade-experimentos { grid-template-columns: repeat(3, 1fr); } }
.cartao-experimento { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); padding: var(--e4); height: 100%; display: grid; gap: var(--e2); align-content: start; }
.cartao-experimento__titulo { font-family: var(--fonte-editorial); font-size: var(--texto-md); }
.cartao-experimento__titulo a { color: var(--cor-azul); text-decoration: none; }
.cartao-experimento__titulo a:hover { text-decoration: underline; }
.cartao-experimento p { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.cartao-experimento__rodape { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: auto; padding-top: var(--e2); }
.grade-grupo { display: grid; gap: var(--e4); margin-top: var(--e5); }
@media (min-width: 48rem) { .grade-grupo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75rem) { .grade-grupo { grid-template-columns: repeat(4, 1fr); } }
.nota-grupo { background: var(--cor-papel); border-radius: var(--raio); padding: var(--e4); display: grid; gap: var(--e2); }
.nota-grupo__pergunta { font-family: var(--fonte-editorial); color: var(--cor-azul); font-weight: 500; }
.nota-grupo p { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }

.pagina-experimento {
  padding-block: var(--e6) var(--e7);
  background-color: #f7f8f5;
  background-image: linear-gradient(rgb(20 39 78 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(20 39 78 / 5%) 1px, transparent 1px);
  background-size: 26px 26px;
}
.experimento__origem { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--texto-sm); font-weight: 600; color: var(--cor-acento-tinta); }
.experimento__objetivo { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-tinta); margin-top: var(--e4); max-width: 56ch; }
.experimento__grade { display: grid; gap: var(--e6); margin-top: var(--e6); }
@media (min-width: 60rem) { .experimento__grade { grid-template-columns: 1.1fr 0.9fr; gap: var(--e7); align-items: start; } }
.experimento__roteiro, .experimento__caderno { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-g); padding: var(--e5); }
.roteiro { list-style: none; padding: 0; display: grid; gap: var(--e4); margin-top: var(--e4); }
.roteiro li { display: flex; gap: var(--e3); align-items: flex-start; }
.roteiro__n { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; flex: none; border-radius: 50%; background: var(--cor-azul); color: #fff; font-size: var(--texto-sm); font-weight: 700; }
.experimento__caderno .botao { margin-top: var(--e4); }

/* ------------------------------------------------------------------ 14. desafios */
.lista-desafios { list-style: none; padding: 0; display: grid; gap: var(--e4); }
@media (min-width: 64rem) { .lista-desafios { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.desafio { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-g); padding: var(--e5); display: grid; gap: var(--e2); }
.desafio[data-situacao="feito"] { border-color: #bfe0ce; background: #fbfdfc; }
.desafio__tipo { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cor-acento-tinta); }
.desafio__pergunta { font-family: var(--fonte-editorial); font-weight: 500; font-size: var(--texto-lg); color: var(--cor-azul); line-height: 1.3; }
.desafio__origem { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.desafio__trabalho { margin-top: var(--e3); }
.desafio__trabalho > summary { display: inline-flex; align-items: center; justify-content: center; list-style: none; cursor: pointer; }
.desafio__trabalho > summary::-webkit-details-marker { display: none; }
.desafio__corpo { margin-top: var(--e4); display: grid; gap: var(--e3); }
.desafio__orientacao { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.desafio__registro { font-size: var(--texto-sm); color: var(--cor-ok); font-weight: 600; }

/* ------------------------------------------------------------------ 15. sobre */
.sobre__grade { display: grid; gap: var(--e6); padding-bottom: var(--e8); }
@media (min-width: 64rem) { .sobre__grade { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--e8); align-items: start; } }
.nesta-pagina { display: none; }
@media (min-width: 64rem) {
  .nesta-pagina { display: block; position: sticky; top: calc(var(--altura-topo) + 2rem); }
  .nesta-pagina ol { list-style: none; padding: 0; display: grid; gap: var(--e2); border-left: 2px solid var(--cor-borda); }
  .nesta-pagina a { display: block; padding: 0.2rem var(--e3); font-size: var(--texto-sm); color: var(--cor-tinta-suave); text-decoration: none; }
  .nesta-pagina a:hover { color: var(--cor-azul); }
}
.nesta-pagina__titulo { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-tinta-suave); margin-bottom: var(--e3); }
.sobre__conteudo { max-width: 46rem; }
.sobre__secao { margin-bottom: var(--e8); scroll-margin-top: calc(var(--altura-topo) + 2rem); }
.sobre__secao p { margin-top: var(--e4); font-size: var(--texto-md); }
.sobre__secao .titulo-secao + p { margin-top: var(--e5); }

.principios__lista { list-style: none; padding: 0; display: grid; gap: var(--e5); margin-top: var(--e5); }
.principios__lista li { padding-left: var(--e5); border-left: 3px solid var(--cor-acento); }
.principios__frase { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-azul); margin: 0 !important; }
.principios__lista p + p { margin-top: var(--e2); color: var(--cor-tinta-suave); font-size: var(--texto-base); }

.anisio__abertura { display: grid; gap: var(--e5); margin-top: var(--e5); }
@media (min-width: 48rem) { .anisio__abertura { grid-template-columns: 13rem 1fr; gap: var(--e6); align-items: start; } }
.anisio__composicao { background: var(--cor-azul); color: #fff; border-radius: var(--raio-g); padding: var(--e5); display: grid; gap: 0; margin: 0 !important; }
.anisio__composicao span { font-family: var(--fonte-editorial); font-size: var(--texto-xl); line-height: 1.05; }
.anisio__composicao small { margin-top: var(--e3); font-size: var(--texto-sm); color: var(--cor-acento-clara); letter-spacing: 0.06em; }
.anisio .citacao { margin-top: var(--e6); }
.grade-ideias { display: grid; gap: var(--e4); margin-top: var(--e4); }
@media (min-width: 48rem) { .grade-ideias { grid-template-columns: repeat(3, 1fr); } }
.ideia { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); padding: var(--e4); }
.ideia h4 { font-size: var(--texto-sm); color: var(--cor-azul); margin-bottom: var(--e2); }
.ideia p { font-size: var(--texto-sm); color: var(--cor-tinta-suave); margin: 0 !important; }

.linha-tempo { list-style: none; padding: 0 0 0 var(--e5); margin-top: var(--e4); display: grid; gap: var(--e4); border-left: 2px solid var(--cor-azul-suave); }
.linha-tempo li { position: relative; }
.linha-tempo li::before { content: ""; position: absolute; left: calc(-1 * var(--e5) - 6px); top: 0.55rem; width: 10px; height: 10px; border-radius: 50%; background: var(--cor-acento); }
.linha-tempo__ano { font-weight: 700; color: var(--cor-azul); }
.linha-tempo p { margin: 0 !important; font-size: var(--texto-base) !important; color: var(--cor-tinta-suave); }
.referencias { list-style: none; padding: 0; margin-top: var(--e4); display: grid; gap: var(--e3); font-size: var(--texto-sm); color: var(--cor-tinta-suave); }

.pessoa__cartao { display: grid; gap: var(--e4); margin-top: var(--e5); }
@media (min-width: 37.5rem) { .pessoa__cartao { grid-template-columns: auto 1fr; gap: var(--e5); align-items: start; } }
.pessoa__monograma, .pessoa__foto { width: 6.5rem; height: 6.5rem; border-radius: 50%; }
.pessoa__monograma { display: grid; place-items: center; background: var(--cor-azul); color: #fff; font-family: var(--fonte-editorial); font-size: var(--texto-xl); }
.pessoa__foto { object-fit: cover; }
.pessoa__nome { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-azul); margin: 0 !important; }
.pessoa__cargo { font-size: var(--texto-sm) !important; color: var(--cor-acento-tinta); margin-top: 0.15rem !important; }
.nota-livre { background: var(--cor-acento-suave); border-radius: var(--raio); padding: var(--e4); font-size: var(--texto-base) !important; }

/* ------------------------------------------------------------------ 16. apoie, carteirinha, contato, palestras */
.cartao-pix { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); padding: var(--e5); }
.cartao-pix__chave { font-family: var(--fonte-ui); font-weight: 700; color: var(--cor-azul); word-break: break-all; }
.cartao-pix__qr { margin-top: var(--e5); display: grid; gap: var(--e3); justify-items: start; }
.qr { width: 11rem; height: 11rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-p); }
.formas-apoio { list-style: none; padding: 0; display: grid; gap: var(--e4); margin-top: var(--e4); }
.formas-apoio h3 { font-size: var(--texto-base); color: var(--cor-azul); }
.formas-apoio p { color: var(--cor-tinta-suave); font-size: var(--texto-sm); margin-top: 0.15rem; }
.apoiadores { list-style: none; padding: 0; display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.apoiador { background: var(--cor-papel); border-radius: var(--raio); padding: var(--e4); }
.apoiador__nome { font-weight: 700; color: var(--cor-azul); }
.apoiador__tipo { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.carteirinha-miniatura {
  background: var(--cor-azul-escuro); color: #fff; border-radius: var(--raio-g); padding: var(--e5);
  aspect-ratio: 1.586; display: grid; align-content: space-between; border-left: 6px solid var(--cor-acento);
}
.carteirinha-miniatura__frase { font-family: var(--fonte-editorial); font-size: var(--texto-lg); }
.carteirinha-miniatura__nome { font-size: var(--texto-sm); color: #b9c4da; }
.carteirinha__grade { display: grid; gap: var(--e6); }
@media (min-width: 60rem) { .carteirinha__grade { grid-template-columns: 1.1fr 0.9fr; gap: var(--e7); align-items: start; } }
.carteirinha__canvas { width: 100%; border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: var(--e3); }

.cartao-contato { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-g); padding: var(--e5); }
.cartao-contato__email { font-family: var(--fonte-editorial); font-size: var(--texto-lg); margin: var(--e4) 0; word-break: break-word; }
.caminhos { list-style: none; padding: 0; display: grid; gap: var(--e3); }
.caminhos a { display: flex; align-items: center; gap: var(--e3); padding: var(--e4); background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); text-decoration: none; color: var(--cor-tinta); }
.caminhos a:hover { border-color: var(--cor-azul-medio); color: var(--cor-tinta); }
.caminhos .icone { color: var(--cor-azul); }
.caminhos b { color: var(--cor-azul); display: block; }
.caminhos small { color: var(--cor-tinta-suave); font-size: var(--texto-sm); }
@media (min-width: 37.5rem) { .caminhos--compacto { grid-template-columns: repeat(2, 1fr); } }

.grade-temas { list-style: none; padding: 0; display: grid; gap: var(--e4); }
@media (min-width: 48rem) { .grade-temas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75rem) { .grade-temas { grid-template-columns: repeat(3, 1fr); } }
.tema-palestra { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-g); padding: var(--e5); display: grid; gap: var(--e2); align-content: start; }
.tema-palestra__duracao { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cor-acento-tinta); }
.tema-palestra h3 { font-family: var(--fonte-editorial); font-size: var(--texto-md); color: var(--cor-azul); }
.tema-palestra p { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }

/* ------------------------------------------------------------------ 17. percurso e certificados */
.jornada { display: grid; gap: var(--e6); }
.jornada__cabeca { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: baseline; justify-content: space-between; padding-bottom: var(--e3); border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--e4); }
.jornada__cabeca h3 { font-family: var(--fonte-editorial); font-size: var(--texto-lg); }
.jornada__cabeca h3 a { color: var(--cor-azul); text-decoration: none; }
.jornada__cabeca p { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.jornada__nos { list-style: none; padding: 0; display: grid; gap: var(--e3); }
@media (min-width: 48rem) { .jornada__nos { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.jornada__no a { display: grid; gap: var(--e2); justify-items: start; height: 100%; padding: var(--e4); background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); text-decoration: none; color: var(--cor-tinta); }
.jornada__no a:hover { border-color: var(--cor-azul-medio); color: var(--cor-tinta); }
.jornada__pergunta { font-family: var(--fonte-editorial); color: var(--cor-azul); }
.jornada__estado { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.jornada__no[data-estado="concluido"] a { background: var(--cor-ok-suave); border-color: #bfe0ce; }

.registro { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.registro div { background: var(--cor-papel); border-radius: var(--raio); padding: var(--e4); }
.registro dt { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.registro dd { margin: 0; font-family: var(--fonte-editorial); font-size: var(--texto-xl); color: var(--cor-azul); }
.lista-notas { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.lista-notas a { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3) var(--e4); background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); text-decoration: none; color: var(--cor-tinta); }
.lista-notas .icone { color: var(--cor-acento-tinta); margin-top: 0.15rem; }
.lista-notas b { display: block; color: var(--cor-azul); font-weight: 600; }
.lista-notas small { color: var(--cor-tinta-suave); font-size: var(--texto-sm); }
.zona-cuidado { margin-top: var(--e6); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--e4); }
.zona-cuidado > summary { font-weight: 600; color: var(--cor-erro); cursor: pointer; min-height: 2.5rem; display: flex; align-items: center; }
.zona-cuidado p { margin: var(--e3) 0; font-size: var(--texto-sm); color: var(--cor-tinta-suave); }

.certificados-emitidos { list-style: none; padding: 0; display: grid; gap: var(--e4); }
.certificado-emitido { display: grid; gap: var(--e3); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); padding: var(--e5); }
@media (min-width: 48rem) { .certificado-emitido { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e5); } }
.certificado-emitido__icone { width: 2.5rem; height: 2.5rem; color: var(--cor-acento-tinta); }
.certificado-emitido h3 { font-family: var(--fonte-editorial); font-size: var(--texto-md); color: var(--cor-azul); }
.certificado-emitido p { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.certificado-emitido .acoes { margin: 0; }

.linhas-modulos { list-style: none; padding: 0; display: grid; gap: var(--e2); margin-block: var(--e5); }
.linha-modulo { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e3); align-items: center; background: var(--cor-papel); border-radius: var(--raio); padding: var(--e3) var(--e4); }
@media (min-width: 48rem) { .linha-modulo { grid-template-columns: auto 1fr 10rem auto; gap: var(--e4); } }
.linha-modulo__marca { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--cor-borda); font-weight: 700; font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.linha-modulo[data-estado="concluido"] .linha-modulo__marca { background: var(--cor-ok); border-color: var(--cor-ok); color: #fff; }
.linha-modulo__texto b { display: block; color: var(--cor-azul); font-weight: 600; }
.linha-modulo__texto small { color: var(--cor-tinta-suave); font-size: var(--texto-sm); }
.linha-modulo .progresso { margin: 0; display: none; }
@media (min-width: 48rem) { .linha-modulo .progresso { display: grid; } .linha-modulo .progresso__texto { font-size: var(--texto-xs); } }

.painel-emissao { border-radius: var(--raio-g); padding: var(--e5); border: 1px dashed var(--cor-borda); background: var(--cor-papel); }
.painel-emissao[data-estado="liberado"] { border: 1px solid var(--cor-acento); background: var(--cor-superficie); }
.painel-emissao h3 { display: flex; align-items: center; gap: var(--e2); font-size: var(--texto-md); color: var(--cor-azul); }
.painel-emissao h3 .icone { color: var(--cor-acento-tinta); }
.painel-emissao p { color: var(--cor-tinta-suave); margin-top: var(--e2); }
.form-emissao { display: grid; gap: var(--e3); margin-top: var(--e4); max-width: 28rem; }
.principio-destaque { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-azul); margin-top: var(--e5); padding-left: var(--e4); border-left: 3px solid var(--cor-acento); }

.visualizador { width: min(100% - 2rem, 62rem); border: 0; border-radius: var(--raio-g); padding: var(--e5); background: var(--cor-superficie); box-shadow: var(--sombra-alta); }
.visualizador::backdrop { background: rgb(11 23 51 / 60%); }
.visualizador__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e4); }
.visualizador__titulo { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-azul); }
.visualizador__imagem { min-height: 8rem; display: grid; place-items: center; background: var(--cor-papel); border-radius: var(--raio); padding: var(--e3); }
.visualizador__certificado { width: 100%; height: auto; box-shadow: var(--sombra); }
.impressao-certificado { display: none; }

/* ------------------------------------------------------------------ 18. páginas simples */
.nao-encontrado { padding-block: clamp(3rem, 2rem + 5vw, 7rem); }
.nao-encontrado p { margin-top: var(--e4); font-size: var(--texto-md); color: var(--cor-tinta-suave); }
.nao-encontrado .caminhos { margin-top: var(--e6); }

/* ------------------------------------------------------------------ 19. impressão */
@page { margin: 18mm 16mm; }
@page certificado { size: A4 landscape; margin: 0; }

@media print {
  .topo, .barra-app, .barra-aula, .rodape, .avisos, .menu-completo, .ferramentas-leitura,
  .aula__indice, .aula__indice-movel, .aula__topo, .passos, .pular, .filtros, .video__quadro { display: none !important; }
  body { padding: 0; background: #fff; }
  .conteiner, .conteiner--largo, .conteiner--estreito { width: 100%; }
  .aula__grade { display: block; }
  .texto-aula, .aula__lead { max-width: none; }
  a { text-decoration: none; color: #000; }
  .bloco, .nota-margem, .verificacao, .atividade { break-inside: avoid; }
  .caderno__folha { border: 1px solid #999; background: none; min-height: 8rem; }
}

html.imprimindo-certificado body > *:not(.impressao-certificado) { display: none !important; }
html.imprimindo-certificado .impressao-certificado { display: block; page: certificado; }
html.imprimindo-certificado .impressao-certificado img { width: 100%; height: auto; }

/* ------------------------------------------------------------------ 20. movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .rede-abertura__linha { stroke-dashoffset: 0; }
  .rede-abertura__no { opacity: 1; }
}

/* ------------------------------------------------------------------ 21. mídia: imagem, vídeo e materiais */
.figura { margin-block: var(--e5); }
.figura img { width: 100%; border-radius: var(--raio); background: var(--cor-papel-fundo); }
.figura figcaption { margin-top: var(--e2); font-size: var(--texto-sm); color: var(--cor-tinta-suave); display: grid; gap: 0.15rem; }
.figura__credito { font-size: var(--texto-xs); }
.figura--capa { margin: 0; }
.figura--capa img { border-radius: var(--raio-g); aspect-ratio: 3 / 2; object-fit: cover; }
.figura--aula { max-width: 40rem; }

.video__etiqueta { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cor-acento-tinta); margin-bottom: var(--e2); }
.video__etiqueta .icone { width: 1.1em; height: 1.1em; }
.video__quadro { position: relative; overflow: hidden; }
.video__capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.video__iniciar { position: relative; z-index: 1; }
.video figcaption { display: grid; gap: 0.2rem; }
.video__titulo { font-weight: 600; color: var(--cor-tinta); }
.video__descricao { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }

.materiais { margin-top: var(--e6); }
.materiais__lista { display: grid; gap: var(--e4); margin-top: var(--e4); }
@media (min-width: 60rem) { .materiais__lista { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.material { display: flex; gap: var(--e4); align-items: flex-start; background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-g); padding: var(--e5); height: 100%; }
.material--principal { border-color: var(--cor-borda); border-left: 5px solid var(--cor-acento); }
.material__icone { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--raio-p); background: var(--cor-azul-suave); color: var(--cor-azul); }
.material__corpo { display: grid; gap: var(--e2); min-width: 0; }
.material__tipo { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cor-tinta-suave); }
.material__titulo { font-family: var(--fonte-editorial); font-size: var(--texto-md); color: var(--cor-azul); }
.material__descricao { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.material__credito { font-size: var(--texto-xs); color: var(--cor-tinta-suave); }
.material__espera { display: flex; gap: var(--e2); align-items: flex-start; font-size: var(--texto-sm); color: var(--cor-aviso-tinta); background: var(--cor-aviso-suave); border-radius: var(--raio-p); padding: var(--e2) var(--e3); }
.material .acoes { margin-top: var(--e2); }
.galeria { display: grid; gap: var(--e4); margin-top: var(--e5); }
@media (min-width: 48rem) { .galeria { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.figura--galeria { margin: 0; }
.figura--galeria img { aspect-ratio: 4 / 3; object-fit: cover; }

.leitor { width: min(100% - 1.5rem, 64rem); height: min(92dvh, 60rem); border: 0; border-radius: var(--raio-g); padding: var(--e4); background: var(--cor-superficie); box-shadow: var(--sombra-alta); display: grid; grid-template-rows: auto 1fr auto; gap: var(--e3); }
.leitor::backdrop { background: rgb(11 23 51 / 60%); }
.leitor__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.leitor__titulo { font-family: var(--fonte-editorial); font-size: var(--texto-md); color: var(--cor-azul); }
.leitor__quadro { background: var(--cor-papel-fundo); border-radius: var(--raio-p); overflow: hidden; }
.leitor__quadro iframe { width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ 22. visuais pedagógicos */
.bloco-visual .bloco__intro { margin-bottom: var(--e5); }
.legenda-visual { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-top: var(--e4); font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.legenda-visual li { display: flex; align-items: center; gap: var(--e2); }
.legenda-visual__cor { width: 0.9rem; height: 0.9rem; border-radius: 4px; background: var(--cor-borda); }
.legenda-visual [data-grupo="0"] .legenda-visual__cor, .escada__degrau[data-grupo="0"] { --tom: #eceef2; --tom-borda: #c8cdd8; }
.legenda-visual [data-grupo="1"] .legenda-visual__cor, .escada__degrau[data-grupo="1"] { --tom: var(--cor-aviso-suave); --tom-borda: #e7cfa3; }
.legenda-visual [data-grupo="2"] .legenda-visual__cor, .escada__degrau[data-grupo="2"] { --tom: var(--cor-ok-suave); --tom-borda: #bfe0ce; }
.legenda-visual li[data-grupo] .legenda-visual__cor { background: var(--tom); border: 1px solid var(--tom-borda); }

.escada__aviso { font-size: var(--texto-sm); color: var(--cor-tinta-suave); margin-bottom: var(--e3); }
.escada { list-style: none; padding: 0; display: flex; flex-direction: column-reverse; gap: 0.35rem; }
.escada__degrau {
  display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4);
  background: var(--tom, var(--cor-superficie)); border: 1px solid var(--tom-borda, var(--cor-borda-suave));
  border-radius: var(--raio-p); border-left: 4px solid var(--cor-azul-medio);
}
.escada__degrau[data-nivel="2"] { margin-left: 2%; } .escada__degrau[data-nivel="3"] { margin-left: 4%; }
.escada__degrau[data-nivel="4"] { margin-left: 6%; } .escada__degrau[data-nivel="5"] { margin-left: 8%; }
.escada__degrau[data-nivel="6"] { margin-left: 10%; } .escada__degrau[data-nivel="7"] { margin-left: 12%; }
.escada__degrau[data-nivel="8"] { margin-left: 14%; }
.escada__n { flex: none; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--cor-azul); color: #fff; font-size: var(--texto-sm); font-weight: 700; }
.escada__texto { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
.escada__texto b { color: var(--cor-azul); }
.escada__detalhe { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.escada__grupo { display: none; font-size: var(--texto-xs); font-weight: 700; color: var(--cor-tinta-suave); text-align: right; }
@media (min-width: 48rem) { .escada__grupo { display: block; width: 9rem; flex: none; } }

.linha-etapas { list-style: none; padding: 0 0 0 var(--e5); margin: var(--e4) 0 0 1.1rem; display: grid; gap: var(--e4); border-left: 2px solid var(--cor-azul-suave); }
.linha-etapas__item { position: relative; }
.linha-etapas__no { position: absolute; left: calc(-1 * var(--e5) - 0.95rem); top: 0; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--cor-superficie); border: 2px solid var(--cor-azul); color: var(--cor-azul); font-size: var(--texto-xs); font-weight: 700; }
.linha-etapas__texto { display: grid; gap: 0.15rem; }
.linha-etapas__texto b { color: var(--cor-azul); font-size: var(--texto-md); font-family: var(--fonte-editorial); font-weight: 500; }
.linha-etapas__periodo { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cor-tinta-suave); }
.linha-etapas__destaque { display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content; margin-top: 0.2rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--cor-acento-suave); color: var(--cor-acento-tinta); font-size: var(--texto-sm); font-weight: 600; }
.linha-etapas__destaque .icone { width: 1em; height: 1em; }

.cartoes-visual { list-style: none; padding: 0; display: grid; gap: var(--e3); margin-top: var(--e4); }
@media (min-width: 37.5rem) { .cartoes-visual { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75rem) { .cartoes-visual { grid-template-columns: repeat(4, 1fr); } }
.cartao-visual { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); padding: var(--e4); display: grid; gap: var(--e2); align-content: start; }
.cartao-visual__n { font-family: var(--fonte-editorial); font-size: var(--texto-md); color: var(--cor-acento-tinta); }
.cartao-visual b { color: var(--cor-azul); }
.cartao-visual p { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }
.cartao-visual__destaque { font-size: var(--texto-xs); font-weight: 700; color: var(--cor-tinta-suave); }

.fluxo { display: flex; flex-direction: column; gap: 1.1rem; margin-top: var(--e4); }
@media (min-width: 48rem) { .fluxo { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 1.1rem; } }
.fluxo__passo { position: relative; display: flex; align-items: center; gap: var(--e2); flex: 1; min-height: 3rem; padding: var(--e2) var(--e3); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-p); text-align: left; font-weight: 600; color: var(--cor-tinta); }
.fluxo__passo:not(:last-child)::after { content: ""; position: absolute; left: 1.45rem; top: 100%; width: 2px; height: 1.1rem; background: var(--cor-borda); }
@media (min-width: 48rem) {
  .fluxo__passo:not(:last-child)::after { left: 100%; top: 50%; width: 1.1rem; height: 2px; transform: translateY(-50%); }
}
.fluxo__passo:hover { border-color: var(--cor-azul-medio); }
.fluxo__passo[aria-selected="true"] { background: var(--cor-azul); border-color: var(--cor-azul); color: #fff; }
.fluxo__n { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--cor-azul-suave); color: var(--cor-azul); font-size: var(--texto-xs); font-weight: 700; }
.fluxo__passo[aria-selected="true"] .fluxo__n { background: var(--cor-acento); color: var(--cor-azul-escuro); }
.fluxo__rotulo { font-size: var(--texto-sm); }
.fluxo__acao { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: var(--e3); padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--cor-acento-suave); color: var(--cor-acento-tinta); font-weight: 600; font-size: var(--texto-sm); }
.fluxo__acao .icone { width: 1em; height: 1em; }

.camadas-quadro { display: grid; gap: var(--e5); margin-top: var(--e4); }
@media (min-width: 56rem) { .camadas-quadro { grid-template-columns: 18rem minmax(0, 1fr); gap: var(--e6); align-items: center; } }
.camadas { position: relative; aspect-ratio: 1; width: min(100%, 18rem); margin-inline: auto; }
.camadas__anel { position: absolute; inset: 0; display: grid; justify-items: center; border-radius: 50%; border: 2px solid var(--cor-borda); background: var(--cor-superficie); transition: border-color 0.2s ease, background-color 0.2s ease; }
.camadas__anel--2 { inset: 16%; background: var(--cor-papel); }
.camadas__anel--3 { inset: 18%; background: var(--cor-papel-fundo); }
.camadas__rotulo { margin-top: 0.5rem; font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-tinta-suave); }
.camadas[data-ativa="0"] > .camadas__anel--1,
.camadas[data-ativa="1"] .camadas__anel--2,
.camadas[data-ativa="2"] .camadas__anel--3 { border-color: var(--cor-acento); box-shadow: 0 0 0 4px var(--cor-acento-suave); }
.camadas[data-ativa="0"] > .camadas__anel--1 > .camadas__rotulo,
.camadas[data-ativa="1"] .camadas__anel--2 > .camadas__rotulo,
.camadas[data-ativa="2"] .camadas__anel--3 > .camadas__rotulo { color: var(--cor-acento-tinta); }

.comparacao { display: grid; gap: var(--e4); margin-top: var(--e4); }
@media (min-width: 56rem) { .comparacao { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.comparacao__coluna { background: var(--cor-superficie); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); padding: var(--e4); }
@media (min-width: 56rem) {
  .comparacao__coluna { border-radius: 0; border-left-width: 0; }
  .comparacao__coluna:first-child { border-left-width: 1px; border-radius: var(--raio) 0 0 var(--raio); }
  .comparacao__coluna:last-child { border-radius: 0 var(--raio) var(--raio) 0; }
}
.comparacao__rotulo { font-size: var(--texto-md); color: var(--cor-azul); }
.comparacao__pergunta { font-family: var(--fonte-editorial); color: var(--cor-acento-tinta); margin-block: var(--e2); }
.comparacao__coluna p:last-child { font-size: var(--texto-sm); color: var(--cor-tinta-suave); }

/* ------------------------------------------------------------------ 23. ficha da Biblioteca */
.pagina-ficha { padding-block: var(--e6) var(--e8); }
.ficha-pagina__cabecalho { padding-bottom: var(--e5); border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--e6); }
.ficha-pagina__cabecalho .ficha__tipo { margin-bottom: var(--e3); }
.ficha-pagina__anos { font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-tinta-suave); margin-top: var(--e2); }
.ficha-pagina__resumo { font-size: var(--texto-md); color: var(--cor-tinta-suave); margin-top: var(--e4); }
.ficha-pagina__contexto { margin-bottom: var(--e6); }
.ficha-pagina__contexto p { margin-top: var(--e3); }
.ficha-pagina__contexto .subtitulo-secao { margin-top: var(--e5); margin-bottom: 0; }
.ficha-pagina__secao { margin-bottom: var(--e6); padding-top: var(--e5); border-top: 1px solid var(--cor-borda-suave); }
.ficha-pagina__voltar { margin-top: var(--e6); }
.lista-pastilhas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.lista-pastilhas a { display: inline-block; padding: 0.35rem 0.8rem; border: 1px solid var(--cor-borda); border-radius: 999px; background: var(--cor-superficie); font-size: var(--texto-sm); font-weight: 600; text-decoration: none; color: var(--cor-azul); }
.lista-pastilhas a:hover { border-color: var(--cor-azul-medio); background: var(--cor-azul-suave); }

@media print {
  .fluxo__passo[aria-selected="false"], .video__quadro, .leitor { display: none !important; }
  .abas__painel[hidden] { display: block !important; }
  .escada__degrau, .cartao-visual, .comparacao__coluna, .material { break-inside: avoid; }
}

/* ------------------------------------------------------------------ 24. validação de certificado e contato */
.pagina-validacao .busca-grande { margin-top: 0; }
.resultado-validacao {
  margin-top: var(--e5); padding: var(--e5); border-radius: var(--raio-g);
  border: 1px solid var(--cor-borda); background: var(--cor-superficie);
}
.resultado-validacao[data-estado="inicial"] { border-style: dashed; background: transparent; }
.resultado-validacao[data-estado="valido"] { border-color: #bfe0ce; background: var(--cor-ok-suave); }
.resultado-validacao[data-estado="invalido"], .resultado-validacao[data-estado="formato"] { border-color: var(--cor-erro); background: var(--cor-erro-suave); }
.resultado-validacao[data-estado="erro"] { border-color: var(--cor-aviso-tinta); background: var(--cor-aviso-suave); }
.resultado-validacao__selo { display: flex; align-items: center; gap: var(--e2); font-weight: 700; font-size: var(--texto-md); color: var(--cor-ok); margin-bottom: var(--e3); }
.resultado-validacao__selo .icone { width: 1.6em; height: 1.6em; }
.resultado-validacao .dados { margin-top: 0; }

.cartao-contato--destaque { border-color: var(--cor-acento); }
.cartao-contato--destaque .botao { margin-top: var(--e4); }
.cartao-contato__numero { font-family: var(--fonte-editorial); color: var(--cor-tinta-suave); margin-top: var(--e3); }
.pessoa__frase {
  font-family: var(--fonte-editorial); font-size: var(--texto-lg); color: var(--cor-azul);
  border-left: 3px solid var(--cor-acento); padding-left: var(--e4); margin-block: var(--e5) !important;
}
.pessoa__cartao .botao { margin-top: var(--e4); }
.certificado-emitido__codigo { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: var(--texto-sm); color: var(--cor-tinta-suave); margin-top: 0.2rem; }
.certificado-emitido__codigo .icone { width: 1.1em; height: 1.1em; }