/* ============ laboratorio: 3 formatos de hero para celular ============
   so vale abaixo de 1000px. no computador o hero continua exatamente como esta. */
@media(max-width:1000px){

/* ---- comum as tres: a faixa ativa ocupa a largura inteira ---- */
html[data-hm] .hero .fx{flex:0 0 0;min-width:0;border-left:0;overflow:hidden;
 transition:flex-basis .7s cubic-bezier(.22,.8,.24,1),flex-grow .7s cubic-bezier(.22,.8,.24,1)}
html[data-hm] .hero .fx.on{flex:1 1 100%}
html[data-hm] .hero .vt{display:none}
html[data-hm] .hero .ab{padding:96px 20px 108px}
 html[data-hm="a"] .hero .ab{padding-bottom:calc(var(--hmoff,0px) + 96px)}
 html[data-hm="c"] .hero .ab{padding-bottom:calc(var(--hmoff,0px) + 112px)}
html[data-hm] .hero .cod{display:none}

/* o controle fica por cima de tudo, fora das faixas */
.hmbar{position:absolute;left:0;right:0;bottom:0;z-index:30;display:none;
 padding:0 20px 22px;pointer-events:none}
html[data-hm] .hmbar{display:block}
.hmbar *{pointer-events:auto}

/* ============ A — traco de progresso com o nome do tema ============ */
html[data-hm="a"] .hmbar{display:flex;flex-direction:column;gap:11px}
html[data-hm="a"] .hmrot{font-size:12.5px;font-weight:700;letter-spacing:.14em;
 text-transform:uppercase;color:#BFD8F2;display:flex;gap:9px;align-items:baseline}
html[data-hm="a"] .hmrot b{font-family:'Roboto Mono',monospace;font-size:11px;color:#8FC0F5;font-weight:400}
html[data-hm="a"] .hmtr{display:flex;gap:7px}
html[data-hm="a"] .hmtr i{flex:1;height:2.5px;background:rgba(255,255,255,.26);
 display:block;position:relative;overflow:hidden;border-radius:2px;cursor:pointer}
html[data-hm="a"] .hmtr i::after{content:"";position:absolute;inset:0;width:0;
 background:#EAF4FF;border-radius:2px}
html[data-hm="a"] .hmtr i.on::after{animation:hmEnche var(--dur,8s) linear forwards}
@keyframes hmEnche{to{width:100%}}

/* ============ B — pilhas de rotulo logo abaixo do menu ============ */
html[data-hm="b"] .hmbar{top:calc(var(--navh,84px) + 10px);bottom:auto;
 display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:0 20px}
html[data-hm="b"] .hmbar::-webkit-scrollbar{display:none}
html[data-hm="b"] .hmpil{flex:none;border:1px solid rgba(255,255,255,.3);background:rgba(4,16,31,.42);
 backdrop-filter:blur(8px);color:#DCE9F8;font:600 12.5px/1 'Source Sans 3',sans-serif;
 padding:10px 14px;border-radius:2px;cursor:pointer;transition:.25s;white-space:nowrap;
 font-family:inherit}
html[data-hm="b"] .hmpil.on{background:#fff;color:#0A1A2F;border-color:#fff}
html[data-hm="b"] .hero .ab{padding-top:150px}

/* ============ C — rodape com nome do tema e setas ============ */
html[data-hm="c"] .hmbar{display:flex;align-items:center;gap:12px;
 border-top:1px solid rgba(255,255,255,.2);padding:14px 20px 20px;
 background:linear-gradient(to top,rgba(4,16,31,.72),transparent)}
html[data-hm="c"] .hmnum{font-family:'Roboto Mono',monospace;font-size:11px;color:#8FC0F5;flex:none}
html[data-hm="c"] .hmnome{font-size:13.5px;font-weight:700;color:#EAF4FF;flex:1;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-hm="c"] .hmset{display:flex;gap:8px;flex:none}
html[data-hm="c"] .hmset button{width:38px;height:38px;border:1px solid rgba(255,255,255,.32);
 background:rgba(4,16,31,.4);color:#EAF4FF;display:grid;place-items:center;cursor:pointer;
 border-radius:2px;font-size:17px;line-height:1;font-family:inherit;padding:0}
html[data-hm="c"] .hmset button:active{background:#fff;color:#0A1A2F}
html[data-hm="c"] .hmtr{display:none}

/* esconde o controle do laboratorio no computador */
}
@media(min-width:1001px){.hmbar{display:none!important}}

/* ---- seletor do laboratorio (so existe aqui, nao vai pro site) ---- */
#hmsel{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:rgba(8,20,38,.93);
 backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.18);
 display:flex;gap:6px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
 font-family:'Source Sans 3',system-ui,sans-serif}
#hmsel b{color:#8FC0F5;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
 align-self:center;padding-right:4px;flex:none}
#hmsel button{flex:1;padding:11px 6px;border:1px solid rgba(255,255,255,.26);
 background:transparent;color:#DCE9F8;font:600 12.5px/1.25 'Source Sans 3',sans-serif;
 border-radius:2px;cursor:pointer}
#hmsel button.on{background:#1A70AF;border-color:#1A70AF;color:#fff}
body{padding-bottom:0}
@media(max-width:1000px){body{padding-bottom:66px}}
@media(min-width:1001px){#hmsel{display:none}}

@media(max-width:1000px){:root{--hmoff:74px}
 html[data-hm="a"] .hmbar,html[data-hm="c"] .hmbar{bottom:74px}}