/* ============================================================================
   base.css — reset, tipografia e as duas regras que sustentam o shell.

   [hidden]{display:none!important} precisa vencer regra de display de classe: sem
   o !important, um .pop com display:flex continua visivel mesmo com hidden, e o
   bug aparece so em producao.

   body{overflow:hidden} e intencional: quem rola e cada pane, nao a pagina. E o
   que da sensacao de aplicacao em vez de site. Em 900px o shell empilha e o body
   volta a rolar — a regra esta em shell.css, junto com o resto do empilhamento.
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--c-canvas); color:var(--c-ink);
  font-family:var(--font); font-size:13.5px; line-height:1.5;
  font-feature-settings:"tnum" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--c-brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--c-brand);outline-offset:1px;border-radius:var(--r-xs)}
svg{display:block;flex:none}
.mono{font-weight:600;letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Pular para o conteudo: invisivel ate receber foco.

   Nao usa .sr porque .sr esconde TAMBEM no foco — e um link que ninguem ve nem quando esta
   focado e pior que nao ter link: o teclado para num lugar que a tela nao mostra. */
.pular{position:absolute;left:8px;top:-60px;z-index:100;
  background:var(--c-brand);color:var(--c-on-brand);
  padding:9px 14px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;text-decoration:none;
  box-shadow:var(--sh-pop);
  transition:top .12s ease}
.pular:focus{top:8px}

/* :focus, e nao :focus-visible.

   O link so e alcancavel por teclado — nao ha como clica-lo com o mouse, porque ele esta
   fora da tela ate receber foco. Com :focus-visible ele NAO aparecia: navegador nenhum
   promete a pseudo-classe para foco vindo de script ou de restauracao de historico, e um
   link que o teclado alcanca mas a tela nao mostra e pior que nenhum link. */

/* O alvo do salto. Fora do fluxo para nao virar linha do grid de .main — ver o _Layout. */
.alvo-de-salto{position:absolute;width:0;height:0;overflow:hidden}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:900px){
  body{overflow:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}