/* Desenvolve Profissões dentro do portal do Gratum · caminho B, "Casa Gratum, assinatura Desenvolve" (Ed, 27/10).
   Lastro: art. 5º, II, b (Educação e Trabalho). Camada carregada DEPOIS do CSS do próprio Desenvolve, na cópia que
   portal/importa-desenvolve.js faz. Muda só a forma: o texto é do PD_PO.
   - Moldura do Gratum (pular, topo com as abas, gaveta, rodapé): cópia fiel das regras do site.css, presa em .gm para não
     brigar com o CSS do Desenvolve (os dois usam .topo, .caixa, .btn, .olho, header, nav e footer).
   - Títulos em Bricolage (assinatura do Desenvolve); texto em Hanken; olho em JetBrains Mono.
   - Neutros do Gratum; link, olho e faixas de acento em edu; cartão de 4 px, chapado, sem sombra em repouso e sem degradê.
   - As cores dos 12 eixos ficam só nos elementos de eixo (torres, blocos, botões e painel do eixo).
   Regra do Design System: cor só nos blocos do alto (:root e [data-theme]); fora daqui, só var(). */
/* fontes servidas pelo próprio site (GRATUM_DESIGN, 27/10): as do Gratum (iguais às do site.css) e a Bricolage do Desenvolve */
@font-face{font-family:'Gabarito';font-style:normal;font-weight:600 800;font-display:swap;src:url(/estatico/fontes/gabarito.woff2) format("woff2");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:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/estatico/fontes/hanken.woff2) format("woff2");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:'Hanken Grotesk';font-style:italic;font-weight:400;font-display:swap;src:url(/estatico/fontes/hanken-italico.woff2) format("woff2");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:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/estatico/fontes/jetbrains.woff2) format("woff2");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:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url(/estatico/fontes/bricolage.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ===== tokens ===== */
:root{
  /* Gratum (os mesmos do site.css) */
  --tinta:#1E1B18; --papel:#FBFAF7; --branco:#FFFFFF; --ouro:#E3B23C; --linha:#E4DFD5;
  --edu:#3B5BA9; --edu-900:#263B6E; --edu-300:#A7B5D8; --edu-100:#D8DEEE;
  --ouro-claro:#FBF3DE;
  --sit-imp-fundo:#DCE8DE; --sit-imp-texto:#2F5A3A; --sit-est-fundo:#FBEFD2; --sit-est-texto:#7A5410;
  --sombra-cartao:0 10px 30px rgba(30,27,24,.08); --sombra-gaveta:-12px 0 40px rgba(30,27,24,.18); --sombra-pop:0 18px 48px rgba(30,27,24,.22);
  --f-texto:'Hanken Grotesk','Segoe UI',sans-serif; --f-cod:'JetBrains Mono',ui-monospace,Consolas,monospace; --f-gratum:'Gabarito','Segoe UI',sans-serif;
  /* --f-titulo continua Bricolage Grotesque (vem do CSS do Desenvolve) */
  --raio:4px;
}
:root,[data-theme="claro"]{
  /* papéis do Gratum, tema claro */
  --fundo:var(--branco); --fundo-suave:var(--papel); --cartao:var(--branco); --texto:var(--tinta); --texto-suave:#6E6A64;
  --borda:var(--linha); --borda-campo:#6E6A64; --link:var(--edu); --foco:var(--tinta); --inverso:var(--tinta); --sobre-inverso:var(--papel);
  --sobre-ouro:var(--tinta); --fundo-topo:rgba(255,255,255,.96); --veu:rgba(30,27,24,.4);
  /* papéis do Desenvolve apontando para o Gratum: o chão lilás sai, o azul vira edu */
  --suave:var(--texto-suave); --apagado:var(--texto-suave); --superficie:var(--branco);
  --noite:var(--papel); --noite-2:var(--branco); --noite-tinta:var(--tinta); --noite-suave:var(--texto-suave);
  --azul:var(--edu); --roxo:var(--edu); --laranja:var(--edu); --ok:var(--sit-imp-texto);
  color-scheme:light;
}
[data-theme="claro"]{color:var(--texto)}
/* faixa de tinta = tema escuro do Design System: os papéis trocam juntos */
[data-theme="escuro"]{
  --fundo:var(--tinta); --fundo-suave:rgba(251,250,247,.04); --cartao:rgba(251,250,247,.06); --texto:var(--papel); --texto-suave:rgba(251,250,247,.75);
  --borda:rgba(251,250,247,.15); --borda-campo:rgba(251,250,247,.45); --link:var(--edu-300); --foco:var(--ouro); --inverso:var(--papel); --sobre-inverso:var(--tinta);
  --suave:var(--texto-suave); --apagado:var(--texto-suave); --noite-suave:var(--texto-suave); --azul:var(--edu-300);
  background:var(--fundo); color:var(--texto); color-scheme:dark;
}

/* ===== base ===== */
html{scroll-behavior:smooth;scroll-padding-top:130px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fundo-suave);color:var(--texto);font:18px/1.6 var(--f-texto);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--fundo-topo);z-index:21}
img{max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== 1. moldura do portal (cópia do site.css, presa em .gm) ===== */
.pular{position:absolute;left:-999px;top:8px;background:var(--inverso);color:var(--sobre-inverso);padding:10px 16px;z-index:50;border-radius:8px;font:600 16px var(--f-texto);text-decoration:none}
.pular:focus{left:16px}
.gm{font:18px/1.6 var(--f-texto);color:var(--texto)}
.gm a{color:inherit}
.gm :focus-visible,.gm a:focus-visible,.gm button:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.gm .caixa{display:block;flex-direction:row;gap:0;max-width:1240px;margin:0 auto;padding-block:0;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.gm .olho{font:500 13px var(--f-cod);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.gm .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px var(--f-texto);min-height:44px;padding:14px 24px;border-radius:999px;text-decoration:none;border:2px solid transparent;background:transparent;cursor:pointer;transition:transform .15s}
.gm .btn:hover{transform:translateY(-1px)}
.gm .btn-borda{border-color:var(--texto);color:var(--texto);padding:10px 18px;font-size:14px}
.gm .btn-tinta{background:var(--inverso);color:var(--sobre-inverso)}
/* topo: o Gratum em cima; logo abaixo, as 8 abas */
.gm.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--fundo-topo);backdrop-filter:blur(8px);border-bottom:1px solid var(--borda);max-width:none;margin:0;padding:0;display:block}
.gm .topo-in{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:20px;height:68px}
.gm .marca{display:flex;align-items:center;min-height:44px;font:inherit;letter-spacing:0;white-space:normal;order:0}
.gm .marca img{height:42px;width:auto;display:block}
.gm .topo-area{margin-left:auto}
.gm .menu-btn{display:flex;background:none;border:0;padding:10px 8px;cursor:pointer;flex-direction:column;gap:5px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.gm .menu-btn span{display:block;width:24px;height:2px;background:var(--texto)}
@media (max-width:640px){.gm .topo-area{display:none}.gm .menu-btn{margin-left:auto}}
.gm .abas{display:block;flex:none;order:0;gap:0;padding:0;font-size:inherit;overflow:visible;-webkit-mask-image:none;mask-image:none;border-top:1px solid var(--borda)}
.gm .abas-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.gm .abas-in::-webkit-scrollbar{display:none}
.gm .abas a{flex:none;display:flex;align-items:center;gap:8px;padding:12px 12px 10px;font:600 14.5px var(--f-texto);color:var(--texto-suave);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.gm .abas a i{width:10px;height:10px;border-radius:2px;background:var(--c);flex:none}
.gm .abas a i.redondo{border-radius:50%}
.gm .abas a:hover,.gm .abas a:focus-visible{color:var(--texto)}
.gm .abas a:not([aria-current]):hover,.gm .abas a:not([aria-current]):focus-visible{border-bottom-color:transparent}
.gm .abas a[aria-current="page"]{color:var(--texto);border-bottom-color:var(--c)}
@media (min-width:1100px){.gm .abas-in{justify-content:space-between}}
/* menu lateral do portal (fechado, sai do Tab) */
.gm.gaveta{position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);background:var(--fundo);z-index:40;padding:calc(28px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 28px 24px;display:flex;flex-direction:column;gap:2px;transform:translateX(105%);visibility:hidden;transition:transform .22s,visibility 0s .22s;box-shadow:var(--sombra-gaveta);overflow-y:auto}
.gm.gaveta.aberto{transform:none;visibility:visible;transition:transform .22s}
.gm.gaveta .olho{margin-bottom:12px}
.gm.gaveta a:not(.btn){padding:13px 0;border-bottom:1px solid var(--borda);font:600 17px var(--f-texto);text-decoration:none}
.gm.gaveta .btn{margin-top:20px;align-self:flex-start}
.gaveta-fundo{position:fixed;inset:0;background:var(--veu);z-index:39}
@media (prefers-reduced-motion:reduce){.gm.gaveta{transition:none}}
/* rodapé do Gratum, com a razão social */
.gm.rodape{padding-block:64px 36px;background:var(--fundo);color:var(--texto)}
.gm .rodape-in{display:grid;grid-template-columns:1.2fr 1fr 1fr .8fr;gap:40px}
@media (max-width:860px){.gm .rodape-in{grid-template-columns:1fr 1fr}}
.gm .rodape-logo{height:48px;width:auto}
.gm .rodape-col{display:grid;gap:0;align-content:start;font-size:15px;color:var(--texto-suave)}
.gm .rodape-col b{font:700 16px var(--f-gratum);color:var(--texto);margin-bottom:4px}
.gm .rodape-col a{text-decoration:none;display:flex;align-items:center;min-height:44px}
.gm .rodape-col span{padding-block:3px}
.gm .rodape-col a:hover{text-decoration:underline;color:var(--texto)}
.gm .rodape-assina{margin-top:48px;padding-top:24px;border-top:1px solid var(--borda);font:italic 400 16px var(--f-texto);color:var(--texto-suave)}
.gm .rodape-razao{margin-top:10px;font-size:13.5px;color:var(--texto-suave)}

/* ===== 2. o Desenvolve no jeito do Gratum ===== */
/* caixa, respiro e letra */
.caixa{max-width:1240px;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
.secao{padding-block:104px}
@media (max-width:860px){.secao{padding-block:72px}}
.olho{font:500 13px/1.4 var(--f-cod);letter-spacing:.14em;text-transform:uppercase;color:var(--edu)}
[data-theme="escuro"] .olho{color:var(--ouro)}
.quando,.labs-sub,.cert-fam>p,.mt-cursos-rot,.sim-ate,.lab-quem b,.selo-quem{font-family:var(--f-cod);font-weight:500;letter-spacing:.12em}
.leitura{max-width:62ch}
a{color:var(--link)}
.btn{font:700 16px var(--f-texto);min-height:44px;padding:12px 24px;justify-content:center;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-cheio,.btn-tinta,.btn-cheio:hover{background:var(--inverso);color:var(--sobre-inverso)}
[data-theme="escuro"] .btn-cheio,[data-theme="escuro"] .btn-cheio:hover,.dg-btn-ouro,.dg-btn-ouro:hover{background:var(--ouro);color:var(--sobre-ouro)}
[data-theme="escuro"] :is(a,button,summary,input):focus-visible{outline-color:var(--foco)}
.cartao{border-radius:var(--raio);box-shadow:none}
.q{color:var(--texto-suave)}
.q:hover,.q[aria-expanded="true"]{background:var(--azul);color:var(--fundo)}
.pop{border-radius:var(--raio);box-shadow:var(--sombra-pop)}
.pop h4{font-weight:750}
/* sem degradê: os palcos das torres ficam chapados */
.b3-palco,.mt-palco,.lab-palco{background:transparent;border-radius:var(--raio)}
.torres-cena,.ano-fila{background:var(--fundo-suave);border-radius:var(--raio)}
.tc-leg{border-top:1px solid var(--borda)}

/* topo da frente: hero no tom edu-100, com o logo e o selo */
#inicio{padding-block:48px 72px;background:var(--edu-100);border-bottom:8px solid var(--edu)}
@media (min-width:801px){#inicio .hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px}}
#inicio .olho{color:var(--edu-900)}
#inicio .suave{color:var(--texto)}
#inicio .leitura{font-size:21px!important;line-height:1.5}
@media (max-width:600px){#inicio .leitura{font-size:18px!important}}
.hero-aluno,.hero-aluno a{color:var(--edu-900)}
.hero-aluno a{font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.dg-marca{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:4px}
.dg-logo{height:58px;width:auto;display:block}
.dg-sit{display:inline-block;font:600 12px/1.3 var(--f-cod);letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap;background:var(--sit-imp-fundo);color:var(--sit-imp-texto)}
.hero-chips span,.hero-chips span.forte{background:var(--cartao);color:var(--texto);border:1px solid var(--borda);border-left:4px solid var(--edu);border-radius:var(--raio);padding:6px 12px;font:600 15px/1.3 var(--f-texto)}
@media (max-width:720px){.dg-logo{height:48px}}

/* atalhos das seções, no estilo do Gratum */
.dg-atalhos{display:block;background:var(--fundo);border-bottom:1px solid var(--borda);padding:12px 0;font-size:inherit}
.dg-atalhos-in{max-width:1240px;margin:0 auto;padding:6px max(20px,env(safe-area-inset-right,0px)) 6px max(20px,env(safe-area-inset-left,0px));display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dg-atalhos a:not(.btn){display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--borda);border-left:4px solid var(--edu);background:var(--cartao);padding:7px 12px;border-radius:var(--raio);font:600 15px/1.2 var(--f-texto);color:var(--texto);text-decoration:none}
.dg-atalhos a:not(.btn):hover{border-color:var(--edu)}
.dg-atalhos a:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.dg-atalhos .dg-fale{margin-left:auto;padding:10px 20px;font-size:15px}
@media (max-width:860px){.dg-atalhos-in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.dg-atalhos-in::-webkit-scrollbar{display:none}.dg-atalhos a{flex:none;white-space:nowrap}}

/* as três respostas (o que é, como funciona, quanto custa): princípios do Gratum */
.dg-abre{background:var(--fundo-suave);padding-block:72px}
.dg-abre .caixa{gap:48px}
.resumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--borda);border:1px solid var(--borda)}
.resp{background:var(--cartao);border:0;border-radius:0;box-shadow:none;padding:28px;gap:10px;color:var(--texto-suave);font-size:16px;line-height:1.55;transition:box-shadow .15s}
.resp:hover{transform:none;box-shadow:var(--sombra-cartao)}
.resp-p{font:750 28px/1.1 var(--f-titulo);letter-spacing:-.02em;color:var(--texto)}
.resp-ic{display:none}
@media (max-width:860px){.resumo{grid-template-columns:1fr}.resp{padding:22px}.resp-p{font-size:24px}}
.hero-filme{margin-top:0}
.filme-quadro{border-radius:var(--raio);box-shadow:none}

/* por que existimos e a parceria: acento em edu */
.destaque{background:var(--fundo-suave);border-left:6px solid var(--edu);border-radius:var(--raio)}
.prefeitura-faz{background:var(--cartao);border:1px solid var(--borda);border-left:6px solid var(--edu);border-radius:var(--raio)}
.camada h3::before{background:var(--edu);border-radius:2px}
.check li::before{background:var(--edu);border-radius:2px;width:10px;height:10px;top:.55em}
[data-theme="escuro"] .check li{color:var(--texto-suave)}
[data-theme="escuro"] .check li b{color:var(--texto)}
[data-theme="escuro"] .check li::before,[data-theme="escuro"] .camada h3::before{background:var(--edu-300)}
[data-theme="escuro"] .q{color:var(--texto-suave)}
.legado{background:var(--ouro-claro);border-radius:var(--raio)}

/* cursos: botões e painel do eixo (a cor do eixo só aqui) */
.eixos{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px}
.eixo-btn{min-height:64px;background:var(--cartao);border:1px solid var(--borda-campo);box-shadow:none;border-radius:var(--raio);font:600 16px/1.3 var(--f-texto);color:var(--texto)}
.eixo-btn:hover{transform:none;border-color:var(--texto)}
.eixo-btn[aria-pressed="true"]{background:var(--cartao);border:1px solid var(--texto);box-shadow:inset 0 -4px 0 var(--c)}
.eixo-btn .bolinha{width:16px;height:16px;border-radius:3px}
.eixo-btn small.nasce{font:500 12px/1.4 var(--f-cod);letter-spacing:.08em;text-transform:uppercase;color:var(--edu)}
.eixo-n{color:var(--texto)}
.painel-eixo{background:var(--cartao);border:1px solid var(--borda);border-left:6px solid var(--c,var(--edu));border-radius:var(--raio);box-shadow:none;padding:28px 32px}
@media (max-width:600px){.painel-eixo{padding:20px}}
.busca-curso{min-height:48px;background:var(--cartao);border:1px solid var(--borda-campo);border-radius:8px;font:400 16px var(--f-texto)}
.busca-curso:focus-visible,.painel-eixo .busca-curso:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.ver-todos{background:var(--inverso);color:var(--sobre-inverso);font:700 15px var(--f-texto)}
.selo-prova{background:var(--sit-est-fundo);border:0;color:var(--sit-est-texto);border-radius:var(--raio)}
.painel-eixo li span.selo-prova,.painel-eixo li span.selo-prova:last-child{white-space:normal;max-width:100%}
.selo-maior{color:var(--texto)}
.cert details{border-radius:var(--raio)}

/* como funciona: os Passos do Gratum na faixa de tinta, com botão ouro */
#como .caixa{gap:48px}
#como .linha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 0;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
#como .linha li{background:transparent;border-radius:0;border-top:3px solid var(--ouro);padding:26px 28px 0 0;gap:10px;flex:initial}
#como .linha li::before{font:800 40px/1 var(--f-titulo);color:var(--ouro)}
#como .linha li>b{font:750 22px/1.15 var(--f-titulo);color:var(--texto);margin:0}
#como .quando{font-size:12px;letter-spacing:.14em;color:var(--texto-suave)}
#como .linha .suave{font-size:15.5px;line-height:1.55;color:var(--texto-suave)}
@media (max-width:1000px){#como .linha{grid-template-columns:1fr 1fr;row-gap:28px}}
@media (max-width:600px){#como .linha{grid-template-columns:1fr}#como .linha li{padding-right:0}}
.dg-cta{margin-top:4px}

/* laboratórios */
.lab-sf,.lab-desc,.lab-quem div,.cert details{border-radius:var(--raio)}
.lab-sf>summary:focus-visible{border-radius:var(--raio)}
.lab-frase,.selo-lab{border-radius:var(--raio)}
.cidade .lab-cod{background:var(--inverso);color:var(--sobre-inverso)}
.cidade .lab-frase,.selo-lab.cidade{background:var(--fundo-suave);border-color:var(--texto)}
.selo-lab.cidade .selo-quem{color:var(--texto)}

/* simulador: chão creme, resultado na tinta */
.sim-ctl{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio)}
.seg{background:var(--fundo-suave);border-radius:8px}
.seg label{border-radius:6px;color:var(--texto)}
.seg label:hover{box-shadow:inset 0 0 0 1.5px var(--texto)}
.seg input:checked+label{background:var(--inverso);color:var(--sobre-inverso);border-color:var(--inverso)}
.sim-res{border-radius:var(--raio)}
.sim-ate,.sim-stats small,.sim-res .q,.sim-res .nota{color:var(--texto-suave)}
.sim-stats{border-top-color:var(--borda)}
.sim-barra{background:var(--inverso);color:var(--sobre-inverso);border-radius:var(--raio);box-shadow:none}

/* quanto custa: o cartão do pagamento era um color-mix do ouro (escrito no HTML); vira o ouro claro do Gratum */
#custa .cartao[style*="--ouro"]{background:var(--ouro-claro)!important}

/* para o aluno: o montador */
.mt{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:none}
.mt-num{background:var(--inverso);color:var(--sobre-inverso);border-radius:var(--raio)}
.mt-sanfona details,.mt-area-btn,.mt-grupo,.mt-bloco,.mt-torre-box,.mt-receita,.mt-agora,.mt-cursos-linha{border-radius:var(--raio)}
.mt-curso[aria-pressed="true"]{background:var(--inverso);color:var(--sobre-inverso);border-color:var(--inverso)}
.mt-alturas{background:var(--fundo-suave);border-radius:8px}
.mt-alt{border-radius:6px}
.mt-alt[aria-checked="true"],.mt-alt[aria-checked="true"] b{background:var(--inverso);color:var(--sobre-inverso)}
.mt-agora{background:var(--inverso);color:var(--sobre-inverso)}
.mt-agora.ok{background:var(--sit-imp-texto);color:var(--branco)}
.mt-cont{background:var(--cartao);color:var(--texto-suave)}
.mt-cont.ok{background:var(--sit-imp-fundo);color:var(--sit-imp-texto)}
.mt-bloco::before{border-radius:2px}
.mt-bloco:not(:disabled):hover{box-shadow:inset 0 0 0 2px var(--texto)}
.mt-tag{background:var(--fundo-suave);color:var(--texto)}
.mt-tag.on{background:var(--inverso);color:var(--sobre-inverso)}
.mt-tag.esc{background:var(--cartao);box-shadow:inset 0 0 0 1.5px var(--texto)}
.mt-ver{background:var(--inverso);color:var(--sobre-inverso)}
.mt-maior{background:var(--ouro-claro);color:var(--texto)}
.certs li::before{border-radius:2px}
.certs li.on::before{background:var(--sit-imp-texto)}
.mt-barra{background:var(--inverso);color:var(--sobre-inverso);border-radius:var(--raio);box-shadow:none}
.mt-barra a{background:var(--sobre-inverso);color:var(--inverso)}

/* quem somos */
.jr-passo{background:var(--fundo-suave);border-radius:var(--raio);border-top:3px solid var(--borda);box-shadow:inset 0 0 0 1px var(--borda)}
.jr-passo[aria-selected="true"]{background:var(--cartao);border-top-color:var(--edu);box-shadow:inset 0 0 0 1px var(--borda)}
.jr-painel{border:1px solid var(--borda);border-radius:var(--raio);box-shadow:none}
.jr-foto{border-radius:var(--raio);border-color:var(--borda)}
.pend{border-color:var(--texto-suave)}
.selo-atestado{color:var(--sit-est-texto);background:var(--sit-est-fundo);border-color:var(--sit-est-texto);border-radius:var(--raio)}

/* perguntas */
details{border-radius:var(--raio)}

/* fale conosco: faixa de tinta */
[data-theme="escuro"] .suave,[data-theme="escuro"] .msg{color:var(--texto-suave)}
[data-theme="escuro"] .rot-c{color:var(--texto)}
input,select,textarea{border-radius:8px;border-color:var(--borda-campo)}
[data-theme="escuro"] input{background:var(--branco);color:var(--tinta)}

/* ===== E2 (parecer do GRATUM_DESIGN, 27/10): todo alvo de toque com 44 px, sem mudar o desenho =====
   Mesmo truque do "?": uma área invisível em volta do botão (::before ou ::after absoluto). ferramentas/contraste-portal.js mede. */
.selo-abre,.mt-ver,.mt-curso{position:relative}
.selo-abre::before,.mt-ver::before,.mt-curso::before{content:"";position:absolute;left:0;right:0;top:50%;height:48px;margin-top:-24px}
.q::after{inset:-14px}

/* ===== E3 (parecer do GRATUM_DESIGN, 27/10): torre sem pinos, sem brilho e sem base pontilhada =====
   O Design System do Desenvolve proíbe "tijolo de brinquedo". Ficam blocos lisos, nas cores dos eixos; a animação continua. */
.b3-tp{background-image:none}
.b3-placa .pt{background-image:none}
.mt-tj::before{background-image:none}
/* a foto da jornada (capa.png) é uma torre de tijolos com pinos: fica fora até a PD_COMUNICACAO trocar a imagem */
.jr-foto-cheia{display:none}
.jr-painel:has(.jr-foto-cheia){grid-template-columns:1fr}

/* ===== 3. faixa "Um programa do Instituto Gratum": logo do Desenvolve | fio | símbolo da frente ===== */
.dg-prog{background:var(--fundo);border-top:1px solid var(--borda);padding:40px 0}
.dg-prog-in{max-width:1240px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px));display:flex;align-items:center;flex-wrap:wrap;gap:24px 32px}
.dg-prog-logo{height:48px;width:auto;display:block;flex:none}
.dg-fio{width:1px;align-self:stretch;min-height:56px;background:var(--borda);flex:none}
.dg-prog svg{width:44px;height:44px;display:block;flex:none}
.dg-prog-txt{display:flex;flex-direction:column;gap:4px}
.dg-prog-txt b{font:700 18px/1.3 var(--f-texto);color:var(--texto)}
.dg-prog-txt span{font:500 13px/1.4 var(--f-cod);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.dg-prog-nota{margin:0 0 0 auto;max-width:44ch;font-size:14px;line-height:1.5;color:var(--texto-suave)}
@media (max-width:860px){.dg-prog-txt{flex-basis:100%}.dg-prog-nota{margin-left:0}}