/* =========================================================
   base.css — Reset, tipografia, container, botões, utilitários
   Carregar a seguir a tokens.css.
   ========================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ------- Escala tipográfica ------- */
.h1{font-weight:800;font-size:clamp(56px,9vw,110px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin:0}
.h2{font-weight:700;font-size:clamp(34px,4.5vw,48px);line-height:1.1;letter-spacing:-.01em;margin:0}
.sub1{font-weight:700;font-size:24px;line-height:1.18;margin:0}
.sub2{font-weight:700;font-size:20px;line-height:1.2;margin:0}
.label-title{font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700);margin:0;display:inline-flex;align-items:center;gap:12px}
.label-title::before{content:"";display:inline-block;width:20px;height:2px;background:var(--green-500);border-radius:2px;flex-shrink:0}
.body-lg{font-size:18px;line-height:1.5}
.body-md{font-size:16px;line-height:1.55}
.body-sm{font-size:14px;line-height:1.5}
.caption{font-size:12px;line-height:1.4;letter-spacing:.04em}
p{margin:0 0 12px 0}

/* ------- Container & secções ------- */
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
@media (min-width:1024px){.container{padding:0 64px}}
.sec{padding:72px 0}
@media (min-width:1024px){.sec{padding:96px 0}}
.sec--white{background:var(--white)}
.sec--cream{background:var(--cream)}
.sec--green50{background:var(--green-50)}
.sec--full{min-height:100vh;display:flex;flex-direction:column;justify-content:center}

/* ------- Botões (pill) ------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px 10px 20px;border-radius:var(--radius-pill);
  font-weight:600;font-size:14px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn .arrow{
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);
}
.btn .arrow svg{width:12px;height:12px}
.btn--primary{background:var(--green-500);color:var(--white)}
.btn--primary .arrow{background:var(--green-700)}
.btn--primary:hover{background:var(--green-600);transform:translateY(-1px)}
.btn--ghost{background:var(--white);color:var(--black);border-color:var(--light-grey-200)}
.btn--ghost .arrow{background:var(--green-500);color:var(--white)}
.btn--ghost:hover{border-color:var(--green-500)}
.btn--lg{padding:12px 14px 12px 22px;font-size:15px}
.btn--lg .arrow{width:30px;height:30px}
.btn--lg .arrow svg{width:14px;height:14px}

/* ------- Utilitários ------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
section[id]{scroll-margin-top:72px}