/* ==================================================================
   BASE — reset, tipografia, utilitários
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--f-heading);
  line-height: var(--lh-heading);
  color: var(--c-navy);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 200;
  background: var(--c-navy); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-section); }
.section--surface { background: var(--c-surface); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

/* Faixa de assinatura (fachada/paredes da loja) */
.stripe { display: block; height: 9px; background: linear-gradient(var(--c-navy) 0 6px, var(--c-green) 6px 9px); }
.stripe--rev { background: linear-gradient(var(--c-green) 0 3px, var(--c-navy) 3px 9px); }

/* Eyebrow / kicker */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-heading); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-blue);
}
.eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--c-green); }
.eyebrow--light { color: var(--c-blue-300); }

.lead { font-size: var(--fs-lead); color: var(--c-muted); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Não vale com ?motion= forçado (html.motion): transições de 1ms atrasam as medições do ScrollTrigger e desalinham as cenas fixas */
  html:not(.motion) *, html:not(.motion) *::before, html:not(.motion) *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Reserva de espaço do header (renderizado via JS) — evita layout shift */
#site-header { display: block; height: 108px; }
@media (max-width: 959px) { #site-header { height: 100px; } }
@media (max-width: 767px) { #site-header { height: 64px; } }