*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--base);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
/* porta-filtros: fica no fluxo mas não ocupa nada nem aparece */
.tintas{ position:absolute; width:0; height:0; overflow:hidden; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--vermelho); outline-offset:3px; border-radius:2px; }

/* ═══════════════════════════════════════════════
   ESTRUTURA
   ═══════════════════════════════════════════════ */
.wrap{ max-width:var(--largura); margin-inline:auto; padding-inline:var(--gutter); }
section{ padding-block:var(--padding-secao); }
.pagina{ padding-left:var(--rail); }
@media (max-width:820px){ :root{ --rail:6px; } }

/* ═══════════════════════════════════════════════
   TIPOGRAFIA
   ═══════════════════════════════════════════════ */
h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.04; letter-spacing:-.01em; margin:0; }
h2{ text-wrap:balance; }
h1{ font-size:clamp(2.5rem,6.6vw,4.6rem); text-wrap:balance; }
h2{ font-size:clamp(2rem,5vw,3.1rem); }
h3{ font-size:1.12rem; font-family:var(--sans); font-weight:700; letter-spacing:-.005em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.lead{ font-size:1.05rem; color:rgba(237,241,246,.74); max-width:52ch; }
.centro{ text-align:center; }
.centro .lead{ margin-inline:auto; }