/* =====================================================================
   BASE.CSS — reset, tipografia e utilitários globais
   Importa tokens.css antes deste arquivo em todo HTML.
   ===================================================================== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--secondary);
  outline-offset:3px;
  border-radius:4px;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--text);
}
h2{font-size:clamp(22px,3vw,30px);}

.eyebrow{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--secondary);
  display:flex;align-items:center;gap:8px;
  margin-bottom:12px;
}
.eyebrow::before{content:"$";color:var(--text-faint);}

.section-sub{
  color:var(--text-muted);
  max-width:560px;
  font-size:15px;
  margin-bottom:40px;
}

.page-header{padding:64px 0 8px;}
.page-header .eyebrow{margin-bottom:14px;}
.page-header h1{font-size:clamp(28px,4vw,40px);margin-bottom:12px;}
.page-header p{color:var(--text-muted);font-size:16px;max-width:600px;}

/* ---------------------------------------------------------------------
   REVEAL — progressive enhancement.
   Regra de ouro: conteúdo 100% visível por padrão (opacity:1). O JS só
   ADICIONA uma classe pra animar a entrada; se o JS falhar, nada muda,
   o conteúdo continua visível. Nunca esconder por padrão — foi assim
   que a versão anterior do site quebrou (conteúdo sumindo no scroll).
   --------------------------------------------------------------------- */
.reveal{opacity:1;transform:none;}
.reveal.js-ready{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease;}
.reveal.js-ready.in-view{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal.js-ready{opacity:1 !important;transform:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}