/* ==========================================================================
   BASE — reset, tipografia, utilitários e regras de movimento.
   Camada 2 de 3. Nenhum componente aqui.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){
  html:not([data-movimento="reduzido"]){scroll-behavior:smooth}
}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--f-corpo);font-size:var(--t-corpo);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-weight:900}
p{margin:0}
:focus-visible{outline:3px solid var(--agua);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter)}
.secao{padding-block:var(--secao-y);position:relative}
.secao--regra{border-top:1px solid var(--linha)}
.chapeu{max-width:62ch;margin-bottom:var(--e-12)}
.chapeu h2{font-size:var(--t-h2);max-width:22ch}
.apoio{color:var(--tinta-2);max-width:70ch;margin-top:var(--e-4)}
.mini{font-size:var(--t-mini);color:var(--tinta-2)}

/* Só leitores de tela */
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Pular para o conteúdo — aparece no primeiro Tab */
.pular{position:absolute;left:var(--e-4);top:-100px;z-index:200;background:var(--branco);
  color:var(--tinta);padding:var(--e-3) var(--e-4);border-radius:var(--r-sm);
  border:1px solid var(--linha-forte);font-weight:600}
.pular:focus{top:var(--e-4)}

/* Rótulo de seção: fio curto + palavra em caixa normal */
.rotulo{display:flex;align-items:center;gap:var(--e-3);color:var(--agua);font-size:var(--t-mini);font-weight:600;margin-bottom:var(--e-4)}
.rotulo::before{content:"";width:26px;height:2px;background:currentColor;flex:none}

/* ==========================================================================
   MOVIMENTO — uma entrada por seção, discreta. 560ms, ease de desaceleração.
   Sem JS (html sem .js) tudo nasce visível: conteúdo escondido não converte.
   ========================================================================== */
html.js .rev{opacity:0;transform:translateY(14px);
  transition:opacity var(--d-lenta) var(--ease),transform var(--d-lenta) var(--ease)}
html.js .rev-on{opacity:1;transform:none}
html.js .rev[data-atraso="1"]{transition-delay:60ms}
html.js .rev[data-atraso="2"]{transition-delay:120ms}
html.js .rev[data-atraso="3"]{transition-delay:180ms}

/* Redução de movimento: vale tanto para a preferência do sistema quanto
   para o interruptor do painel de acessibilidade. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.js .rev{opacity:1;transform:none}
  .barra-acao{transform:none}
}
html[data-movimento="reduzido"] *,
html[data-movimento="reduzido"] *::before,
html[data-movimento="reduzido"] *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
html[data-movimento="reduzido"]{scroll-behavior:auto}
html[data-movimento="reduzido"] .rev{opacity:1!important;transform:none!important}
html[data-movimento="reduzido"] .barra-acao{transform:none}