/* ==========================================================================
   BASE — reset, tipografia global, elementos de texto
   ========================================================================== */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--gold); color:#000000; }

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
}

p{ color:var(--text); max-width:640px; margin-bottom:18px; }

p.lede{
  font-size:19px;
  color:var(--text);
  max-width:620px;
}

.muted{ color:var(--text-muted); }
.small{ font-size:13.5px; }

/* Rótulo de registro — divisor de assunto dentro de uma seção.
   O traço curto antes do texto marca onde um bloco começa: sem ele,
   no scroll longo os blocos se confundem num assunto só. */
.register-label{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-muted);
  margin:88px 0 14px;
}
.register-label::before{
  content:"";
  width:16px;
  height:1px;
  background:var(--gold-dim);
  flex-shrink:0;
}
.register-label:first-child{ margin-top:0; }
/* Depois de uma citação o respiro é menor: o bloco já tem margem própria
   e a régua lateral dele fecha o assunto sozinha. */
.quote-block + .register-label{ margin-top:80px; }

/* Bloco de citação / frase-âncora */
.quote-block{
  border-left:2px solid var(--gold-dim);
  padding:4px 0 4px 22px;
  margin:32px 0;
  max-width:600px;
}
.quote-block p{
  font-family:var(--font-display);
  font-weight:500;
  font-size:21px;
  line-height:1.4;
  color:var(--text);
  margin-bottom:0;
}

/* Ícones do sprite SVG (assets/img/sprite embutido no index) */
.icon{
  fill:none;
  stroke:currentColor;
  flex-shrink:0;
}

footer{
  max-width:var(--maxw);
  padding:60px 0 0;
  margin-top:100px;
  border-top:1px solid var(--line);
  color:var(--text-dim);
  font-size:12.5px;
}

/* Link dentro de texto corrido. Escopo restrito a parágrafos: navegação,
   cards e botões trazem o próprio tratamento. */
p a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid var(--gold-dim);
}
p a:hover{ border-bottom-color:var(--gold); }
nav a{ border-bottom:none; }

/* Acessibilidade — foco visível para navegação por teclado.
   Vale para tudo que recebe foco: eram 122 botões no manual e só cinco
   tinham tratamento, então o resto ficava invisível para quem navega por
   Tab. :focus-visible não aparece no clique de mouse. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[contenteditable]:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}
/* Sobre Atrito o anel dourado desaparece: ali o contorno é o Lastro */
.ab-dl:focus-visible,
.pb-btn.primario:focus-visible,
.ab-fmt:focus-visible,
.ab-fechar:focus-visible{
  outline-color:var(--later-lastro);
}
.ab-stage.claro .ab-dl:focus-visible{ outline-color:var(--later-eter); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}