/* IMLOCCUS · temas do portal. As páginas usam rgba(var(--fg),a) / rgba(var(--bg),a) / rgba(var(--bg2),a). */
:root{--fg:244,243,239;--bg:14,15,16;--bg2:26,27,29}
html[data-tema=claro]{color-scheme:light;--fg:22,23,26;--bg:244,243,239;--bg2:255,255,255;--onix:#F4F3EF;--grafite:#FFFFFF;--off:#16171A;--concreto:#6E6C66;
  --ink-2:rgba(22,23,26,.7);--ink-3:rgba(22,23,26,.5);--line:rgba(22,23,26,.13);--ok:#1E8A4F;--err:#C0392B}
html[data-tema=azul]{color-scheme:dark;--fg:236,242,248;--bg:10,24,42;--bg2:17,37,62;--onix:#0A182A;--grafite:#11253E;--off:#ECF2F8;--concreto:#9DB2C9;
  --ink-2:rgba(236,242,248,.7);--ink-3:rgba(236,242,248,.46);--line:rgba(236,242,248,.14)}
/* marcas em off-white ficam escuras no tema claro */
html[data-tema=claro] img[src*="offwhite"],html[data-tema=claro] .who img,html[data-tema=claro] .hero h1 img,html[data-tema=claro] .hsub img{filter:invert(1)}
html[data-tema=claro] .warn{color:#8A6100}
html[data-tema=claro] .card:hover,html[data-tema=claro] .card:focus-visible{box-shadow:0 24px 60px rgba(22,23,26,.18)}
/* seletor de cor: um botão que brilha e troca a cor a cada toque */
.tema{position:relative;flex:none;width:30px;height:30px;padding:0;margin:0 4px;border-radius:50%;cursor:pointer;background:transparent;border:1px solid rgba(var(--fg),.28);display:inline-grid;place-items:center;transition:border-color .25s,transform .25s}
.tema:hover{border-color:rgba(var(--fg),.6);transform:scale(1.06)}
.tema:focus-visible{outline:2px solid rgb(var(--fg));outline-offset:3px}
.tema i{width:14px;height:14px;border-radius:50%;background:#0E0F10;box-shadow:0 0 0 1px rgba(var(--fg),.35),0 0 10px 1px rgba(var(--fg),.35);transition:background-color .45s ease}
.tema::after{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 0 rgba(var(--fg),.35);animation:temaGlow 3.2s ease-in-out infinite;pointer-events:none}
.tema[data-t=escuro] i{background:#0E0F10}.tema[data-t=claro] i{background:#F4F3EF}.tema[data-t=azul] i{background:#2F6BA8}
.tema.tr i{animation:temaPop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes temaGlow{0%,100%{box-shadow:0 0 0 0 rgba(var(--fg),.28)}50%{box-shadow:0 0 0 5px rgba(var(--fg),0)}}
@keyframes temaPop{40%{scale:1.25}}
@media (prefers-reduced-motion:reduce){.tema::after{animation:none}.tema i,.tema.tr i{transition:none;animation:none}}
/* topo no celular: os atalhos rolam para os lados */
@media (max-width:900px){
  .top{gap:12px}.top>img,.top .who{flex:none}
  .top nav,.top .topr{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap;flex-wrap:nowrap;padding:6px 2px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 22px),transparent)}
  .top nav::-webkit-scrollbar,.top .topr::-webkit-scrollbar{display:none}
  .top nav>*,.top .topr>*{flex:none}.top nav>:first-child,.top .topr>:first-child{margin-left:auto}
}
@media print{.tema{display:none!important}}