:root{
  --fundo:#F5F7FB; --superficie:#FFFFFF; --tinta:#0B1B3A; --suave:#4A5672; --linha:#DCE2EE;
  --azul:#1F4FD8; --azul-claro:#E7EDFC; --azul-tinta:#FFFFFF;
  --ambar:#F5A524; --ambar-claro:#FEF3DD; --ambar-tinta:#0B1B3A;
  --trilho:#C9D2E4; --certo:#16855A; --certo-claro:#E3F4EC; --erro:#C93A3A; --erro-claro:#FBE9E9;
  --f-titulo:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-texto:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --raio:14px; --raio-p:8px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --fundo:#0A1430; --superficie:#121F42; --tinta:#E8ECF6; --suave:#A9B4CF; --linha:#26355E;
  --azul:#7EA2FF; --azul-claro:#1B2B57; --azul-tinta:#081429;
  --ambar:#F7B547; --ambar-claro:#3A2E14; --ambar-tinta:#081429;
  --trilho:#2E3F6B; --certo:#4CC38A; --certo-claro:#123526; --erro:#FF8A8A; --erro-claro:#3B1A1F;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --fundo:#0A1430; --superficie:#121F42; --tinta:#E8ECF6; --suave:#A9B4CF; --linha:#26355E;
  --azul:#7EA2FF; --azul-claro:#1B2B57; --azul-tinta:#081429;
  --ambar:#F7B547; --ambar-claro:#3A2E14; --ambar-tinta:#081429;
  --trilho:#2E3F6B; --certo:#4CC38A; --certo-claro:#123526; --erro:#FF8A8A; --erro-claro:#3B1A1F;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);font-family:var(--f-texto);font-size:1.0625rem;line-height:1.6}
h1,h2,h3{font-family:var(--f-titulo);line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:var(--azul);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ambar);outline-offset:2px;border-radius:4px}
code{font-family:var(--f-mono);font-size:.9em;white-space:nowrap;background:var(--azul-claro);padding:.08em .35em;border-radius:5px}
.pular{position:absolute;left:-999px;top:0;background:var(--tinta);color:var(--fundo);padding:.5rem 1rem;z-index:20}
.pular:focus{left:1rem}
main{display:block;outline:none}
.casca{max-width:68rem;margin:0 auto;padding:0 16px}
.coluna{max-width:44rem;margin:0 auto;padding:0 16px}

/* topo */
.topo{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--fundo) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linha)}
.topo-in{max-width:68rem;margin:0 auto;padding:.6rem 16px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marca{display:flex;align-items:center;gap:.5rem;white-space:nowrap;text-decoration:none;color:var(--tinta);font-family:var(--f-titulo);font-size:1.1rem}
.marca svg{width:26px;height:26px}
.marca b{font-weight:400;color:var(--suave)}
.menu{display:flex;align-items:center;gap:1rem}
.menu > a{color:var(--tinta);text-decoration:none;font-weight:700;font-size:.95rem}
.menu > a[aria-current="page"]{color:var(--azul)}
.xp-pill{display:flex;align-items:center;gap:.5rem;background:var(--superficie);border:1px solid var(--linha);border-radius:999px;padding:.3rem .7rem .3rem .8rem}
.xp-nivel{font-size:.85rem;white-space:nowrap}
.xp-barra{width:56px;height:8px;border-radius:99px;background:var(--trilho);overflow:hidden}
.xp-barra i{display:block;height:100%;width:0;background:var(--ambar);border-radius:99px;transition:width .5s ease}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:700 1rem/1.2 var(--f-texto);padding:.8rem 1.25rem;border-radius:var(--raio-p);border:2px solid var(--azul);background:var(--azul);color:var(--azul-tinta);text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn-sec{background:transparent;color:var(--azul)}
.btn-perigo{border-color:var(--erro);background:transparent;color:var(--erro)}
.btn-perigo.armado{background:var(--erro);color:var(--superficie)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.acoes{display:flex;flex-wrap:wrap;gap:.75rem}

/* início */
.hero{padding:3.5rem 0 2.5rem}
.hero-grade{display:grid;gap:2.5rem;align-items:center}
@media (min-width:860px){.hero-grade{grid-template-columns:1.1fr .9fr}}
.hero h1{font-size:clamp(2.3rem,6.4vw,4rem);font-weight:800;max-width:14ch}
.hero .lead{font-size:1.2rem;color:var(--suave);margin:1.1rem 0 1.6rem;max-width:36rem}
.mini-mapa{width:100%;max-width:400px;justify-self:center}
.mini-mapa text{font-family:var(--f-titulo);font-size:15px;fill:var(--tinta)}
.mini-mapa .rot-suave{fill:var(--suave);font-family:var(--f-texto);font-size:13px}
.voce-aqui{animation:pulso 2.4s ease-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes pulso{0%{opacity:.7;transform:scale(1)}70%{opacity:0;transform:scale(2.4)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.voce-aqui{animation:none;opacity:0}.xp-barra i,.barra-nivel i{transition:none}}

.secao{padding:2.5rem 0}
.secao h2{font-size:clamp(1.5rem,3.6vw,2rem);margin-bottom:1rem}
.passos{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;counter-reset:p}
@media (min-width:760px){.passos{grid-template-columns:repeat(3,1fr)}}
.passos li{counter-increment:p;border-top:3px solid var(--tinta);padding-top:.9rem}
.passos li::before{content:counter(p);font-family:var(--f-titulo);font-weight:800;font-size:2rem;color:var(--azul);display:block;line-height:1;margin-bottom:.5rem}
.passos h3{font-size:1.15rem;margin-bottom:.35rem}
.passos p{color:var(--suave)}
.ako{background:#0B1B3A;color:#F5F7FB;border:1px solid var(--linha);border-radius:var(--raio);padding:2rem 1.5rem;display:grid;gap:1rem}
@media (min-width:760px){.ako{grid-template-columns:auto 1fr;gap:2rem;padding:2.5rem}}
.ako-palavra{font-family:var(--f-titulo);font-weight:800;font-size:clamp(3.5rem,10vw,6rem);line-height:.9;color:var(--ambar)}
.ako h2{color:#FFFFFF}
.ako p{color:#C9D2E4;margin-top:.6rem;max-width:40rem}
.ako a{color:#F7B547}
.ako-palavra{color:#F7B547}
.principios{display:grid;gap:1.25rem;margin-top:1rem}
@media (min-width:760px){.principios{grid-template-columns:repeat(3,1fr)}}
.principios h3{font-size:1.05rem;margin-bottom:.3rem}
.principios p{color:var(--suave)}

/* formulário de montar */
.form-montar{display:grid;gap:2rem;margin:1.5rem 0 3rem}
fieldset{border:0;margin:0;padding:0}
legend{font-family:var(--f-titulo);font-weight:700;font-size:1.25rem;margin-bottom:.3rem;padding:0}
.dica{color:var(--suave);font-size:.95rem;margin-bottom:.8rem}
.opcoes-escolha{display:grid;gap:.6rem}
@media (min-width:640px){.opcoes-escolha.duas{grid-template-columns:1fr 1fr}.opcoes-escolha.tres{grid-template-columns:repeat(3,1fr)}}
.escolha{position:relative;display:block;cursor:pointer}
.escolha input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.escolha span{display:block;height:100%;background:var(--superficie);border:2px solid var(--linha);border-radius:var(--raio-p);padding:.75rem .9rem}
.escolha strong{display:block}
.escolha small{display:block;color:var(--suave);font-size:.9rem;margin-top:.1rem}
.escolha input:checked + span{border-color:var(--azul);background:var(--azul-claro)}
.escolha input:focus-visible + span{outline:3px solid var(--ambar);outline-offset:2px}
.erro-form{color:var(--erro);font-weight:700}

/* páginas gerais */
.pagina-cab{padding:2.5rem 0 1rem}
.pagina-cab h1{font-size:clamp(1.9rem,5vw,2.8rem);font-weight:800}
.pagina-cab p{color:var(--suave);margin-top:.6rem;max-width:40rem}
.voltar{display:inline-block;margin-bottom:1rem;font-weight:700;text-decoration:none}

/* roteiro */
.resumo-roteiro{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin:1.25rem 0 2rem}
.resumo-roteiro div{display:grid}
.resumo-roteiro b{font-family:var(--f-titulo);font-size:2rem;line-height:1.1}
.resumo-roteiro span{color:var(--suave);font-size:.95rem}
.lista-roteiro{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.9rem}
.lista-roteiro li{background:var(--superficie);border:1px solid var(--linha);border-left:6px solid var(--azul);border-radius:var(--raio-p);padding:.9rem 1rem}
.lista-roteiro li.toda-validada{border-left-color:var(--ambar)}
.lista-roteiro h3{font-size:1.1rem}
.lista-roteiro .semanas{font-weight:700;color:var(--azul);font-size:.95rem}
.lista-roteiro p{color:var(--suave);font-size:.95rem;margin-top:.2rem}
.aviso{background:var(--ambar-claro);border-radius:var(--raio-p);padding:1rem 1.1rem;margin:1.25rem 0}

/* mapa da trilha */
.mapa{position:relative;margin:1.5rem 0 1rem;padding-left:52px}
.mapa-etapa{position:relative;padding-bottom:.5rem}
.etapa-cab{position:relative;padding:.4rem 0 1rem}
.etapa-cab::before{content:"";position:absolute;left:-40px;top:.35rem;width:28px;height:28px;border-radius:50%;background:var(--superficie);border:6px solid var(--tinta);z-index:1}
.etapa-cab.completa::before{border-color:var(--ambar);background:var(--ambar)}
.etapa-cab h2{font-size:1.35rem}
.etapa-cab p{color:var(--suave);font-size:.95rem;margin-top:.2rem}
.trilho{position:absolute;z-index:0;left:23px;width:6px;background:var(--trilho);border-radius:3px}
.trilho.feito{background:var(--ambar)}
.estacoes{list-style:none;margin:0;padding:0}
.estacao{position:relative;padding:.25rem 0 .9rem}
.estacao .ponto{position:absolute;left:-36px;top:1.05rem;width:20px;height:20px;border-radius:50%;background:var(--superficie);border:4px solid var(--azul);z-index:1}
.estacao.andamento .ponto{background:linear-gradient(90deg,var(--ambar) 50%,var(--superficie) 50%);border-color:var(--ambar)}
.estacao.feito .ponto{background:var(--ambar);border-color:var(--ambar)}
.estacao.validar .ponto{border-style:dashed}
.estacao.proxima .ponto{box-shadow:0 0 0 5px var(--azul-claro)}
.estacao a{display:block;text-decoration:none;color:inherit;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-p);padding:.75rem .9rem}
.estacao a:hover{border-color:var(--azul)}
.estacao.proxima a{border:2px solid var(--azul)}
.estacao h3{font-size:1.08rem;font-weight:600}
.meta{display:flex;flex-wrap:wrap;gap:.25rem .9rem;color:var(--suave);font-size:.88rem;margin-top:.25rem}
.etiqueta{display:inline-block;font-size:.8rem;font-weight:700;border-radius:99px;padding:.05rem .55rem;background:var(--azul-claro);color:var(--azul)}
.etiqueta.ambar{background:var(--ambar-claro);color:var(--tinta)}
.etiqueta.certo{background:var(--certo-claro);color:var(--certo)}

/* ramificação final */
.ramos{position:relative;margin-left:-52px;padding-left:var(--ramos-esq,108px);padding-top:.5rem}
.ramos svg.leque{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.ramo{position:relative;margin-bottom:.7rem}
.ramo label{display:block;cursor:pointer;background:var(--superficie);border:2px solid var(--linha);border-left:6px solid var(--cor);border-radius:var(--raio-p);padding:.7rem .9rem}
.ramo input{position:absolute;opacity:0}
.ramo input:checked + label{border-color:var(--cor);background:color-mix(in srgb,var(--cor) 9%,var(--superficie))}
.ramo input:focus-visible + label{outline:3px solid var(--ambar);outline-offset:2px}
.ramo h3{font-size:1.05rem}
.ramo p{color:var(--suave);font-size:.92rem}
.ramo .meta a{font-weight:700}

/* tópico */
.topico{padding-bottom:3rem}
.topico .pagina-cab{padding-bottom:.5rem}
.topico-estado{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.bloco{margin-top:2.2rem}
.bloco > h2{font-size:1.35rem;margin-bottom:.7rem}
.bloco > p + p{margin-top:.7rem}
.resumo-texto{font-size:1.15rem}
.essencial{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.checklist label{display:flex;gap:.7rem;align-items:flex-start;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-p);padding:.65rem .8rem;cursor:pointer}
.checklist input{width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:var(--ambar);flex:none}
.checklist input:checked + span{color:var(--suave);text-decoration:line-through;text-decoration-color:var(--ambar);text-decoration-thickness:2px}
.recursos{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.recursos li{border-left:4px solid var(--azul);padding:.15rem 0 .15rem .9rem}
.recursos a{font-weight:700}
.recursos p{color:var(--suave);font-size:.95rem}
.vazio{color:var(--suave);font-style:italic}

/* quiz */
.questao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:1.1rem;margin-bottom:1rem}
.questao legend{float:left;width:100%;font-family:var(--f-texto);font-weight:700;font-size:1.05rem;line-height:1.45;margin-bottom:.7rem}
.questao pre{background:#0B1B3A;color:#E8ECF6;border:1px solid var(--linha);border-radius:var(--raio-p);padding:.8rem 1rem;overflow-x:auto;font-family:var(--f-mono);font-size:.9rem;margin:0 0 .8rem}
.alternativas{display:grid;gap:.5rem;clear:both}
.questao pre{clear:both}
.questao pre code{background:none;padding:0;color:inherit;font-size:inherit}
.alt{display:flex;gap:.65rem;align-items:flex-start;border:2px solid var(--linha);border-radius:var(--raio-p);padding:.6rem .75rem;cursor:pointer}
.alt input{margin-top:.25rem;accent-color:var(--azul);flex:none}
.alt:has(input:checked){border-color:var(--azul);background:var(--azul-claro)}
.quiz-conferido .alt{cursor:default}
.alt.certa{border-color:var(--certo);background:var(--certo-claro)}
.alt.errada{border-color:var(--erro);background:var(--erro-claro)}
.explicacao{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--linha)}
.explicacao strong{display:block}
.resultado-quiz{font-weight:700;margin:.5rem 0 1rem}
.resultado-quiz p + p{margin-top:.4rem}
.origem{clear:both;color:var(--suave);font-size:.88rem;margin:-.3rem 0 .6rem}

/* reflexão */
textarea{width:100%;min-height:7rem;font:inherit;color:var(--tinta);background:var(--superficie);border:2px solid var(--linha);border-radius:var(--raio-p);padding:.7rem .8rem;resize:vertical}
textarea:focus{border-color:var(--azul);outline:none}
.salvo{color:var(--certo);font-weight:700;font-size:.95rem;min-height:1.5em;margin-top:.4rem}
.ensinei{display:flex;gap:.7rem;align-items:flex-start;background:var(--ambar-claro);border-radius:var(--raio-p);padding:.9rem 1rem;cursor:pointer}
.ensinei input{width:1.25rem;height:1.25rem;margin-top:.2rem;accent-color:var(--ambar);flex:none}
.nav-topicos{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--linha)}

/* conquistas */
.nivel-atual{display:grid;gap:.6rem;margin:1rem 0 2rem;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:1.25rem}
.nivel-atual h2{font-size:1.6rem}
.barra-nivel{height:14px;border-radius:99px;background:var(--trilho);overflow:hidden}
.barra-nivel i{display:block;height:100%;background:var(--ambar);border-radius:99px;transition:width .6s ease}
.niveis{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.niveis li{font-size:.85rem;border:1px solid var(--linha);border-radius:99px;padding:.1rem .6rem;color:var(--suave)}
.niveis li.atingido{background:var(--ambar-claro);color:var(--tinta);border-color:var(--ambar)}
.selos{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.selo{display:flex;gap:.8rem;align-items:flex-start;border:1px dashed var(--linha);border-radius:var(--raio-p);padding:.8rem}
.selo svg{width:44px;height:44px;flex:none}
.selo h3{font-size:1rem}
.selo p{color:var(--suave);font-size:.9rem}
.selo.ganho{border:1px solid var(--ambar);background:var(--superficie)}
.selo .medalha{fill:var(--trilho)}
.selo.ganho .medalha{fill:var(--ambar)}
.selo .medalha-in{fill:var(--superficie)}
.dados-acoes{display:grid;gap:1rem;margin-top:1rem}
.dados-acoes p{color:var(--suave)}

/* toast */
.toast{position:fixed;left:50%;bottom:1.25rem;transform:translate(-50%,calc(100% + 2rem));opacity:0;visibility:hidden;background:var(--tinta);color:var(--fundo);padding:.8rem 1.1rem;border-radius:var(--raio-p);border-left:6px solid var(--ambar);max-width:calc(100% - 32px);width:max-content;font-weight:700;transition:transform .35s ease,opacity .35s ease,visibility .35s;z-index:30}
.toast.mostra{transform:translate(-50%,0);opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* rodapé */
.rodape{border-top:1px solid var(--linha);margin-top:3rem}
.rodape-in{max-width:68rem;margin:0 auto;padding:1.5rem 16px 2.5rem;display:grid;gap:.5rem;color:var(--suave);font-size:.92rem}
.credo{font-style:italic}
.noscript{padding:2rem 16px;text-align:center}
.carregando{padding:4rem 16px;text-align:center;color:var(--suave)}

@media (max-width:420px){.menu{gap:.6rem}.marca{font-size:1rem}.xp-barra{width:36px}.xp-pill{padding:.25rem .55rem}.xp-nivel{font-size:.8rem}}