/* Reset, tipografia, placas (slabs), texturas e utilitários */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-offset) + 12px);
  overflow-x: clip; overflow-y: auto; max-width: 100%; overscroll-behavior-x: none;
  touch-action: pan-x pan-y;
}
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  width: 100%; max-width: 100%; overflow-x: clip; overscroll-behavior-x: none;
  touch-action: pan-x pan-y;
}
/* Granulação de filme por cima de tudo (estática, sem blend: barata) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background-image: var(--grain); background-size: 240px; opacity: .055;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--c-teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { line-height: var(--lh-heading); font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
p { text-wrap: pretty; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--c-mint); color: var(--c-ink); }

:focus-visible { outline: 3px solid var(--c-mint); outline-offset: 3px; border-radius: 6px; }
.section--cream :focus-visible, .section--white :focus-visible, .hero :focus-visible, .site-header :focus-visible, .logos :focus-visible { outline-color: var(--c-teal-600); }

/* Barra de progresso de leitura (scroll-driven, sem JS) */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--c-teal), var(--c-teal-600) 40%, var(--c-mint));
  transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: progress-grow linear both; animation-timeline: scroll(root); }
}
@supports not (animation-timeline: scroll()) { .scroll-progress { display: none; } }
@keyframes progress-grow { to { transform: scaleX(1); } }

/* Ícones do sprite */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Layout */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, var(--container-narrow)); }
@media (max-width: 767.98px) {
  main, .container { min-width: 0; }
  .section { min-width: 0; }
  .container > *, .hero__grid > *, .zero__grid > *, .final__grid > *, .metrics__loop > * { min-width: 0; }
  .zero__table { table-layout: fixed; }
}

.section { position: relative; isolation: isolate; padding-block: var(--section-y); }
.section--cream { background: transparent; }
/* Placas: seções brancas, escuras e teal flutuam sobre o canvas cream */
.section--white, .section--dark, .section--teal, .section--final {
  margin: var(--slab-gap); border-radius: var(--slab-r); overflow: clip;
}
.section--white { background: var(--c-white); box-shadow: 0 1px 0 rgba(22, 22, 22, .04), 0 30px 80px -60px rgba(8, 102, 93, .35); }
.section--dark { background: var(--c-ink-950); color: #E9ECEB; }
.section--teal { background: var(--c-teal); color: #E8F5F2; }
.section--final { background: var(--c-ink-950); color: #E8F5F2; }
.section--dark h2, .section--dark h3, .section--teal h2, .section--teal h3, .section--final h2 { color: var(--c-white); }
/* Granulação extra nas placas escuras */
.section--dark::after, .section--teal::after, .section--final::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 200px; opacity: .09; mix-blend-mode: overlay;
}

/* Cabeçalhos de seção */
.section-head { max-width: 50rem; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.section-head h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: -.04em; font-weight: 700; }
.section-head .lead { margin-top: 1.4rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split { max-width: none; display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 1024px) {
  .section-head--split { grid-template-columns: 1.25fr 1fr; gap: var(--s-8); }
  .section-head--split .lead { margin: 0 0 .5rem; }
}

/* Acento editorial: palavras em serifa itálica */
h1 em, h2 em, .serif {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: -.02em; line-height: .95; padding-right: .04em;
  color: var(--c-teal);
}
.section--dark h2 em, .section--teal h2 em, .section--final h2 em {
  color: var(--c-mint); background: var(--g-mint-text); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.5rem;
  padding: .45rem .9rem .45rem .75rem; border-radius: var(--r-pill);
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  color: var(--c-teal); background: rgba(8, 102, 93, .06); border: 1px solid rgba(8, 102, 93, .14);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-teal-600); box-shadow: 0 0 0 3px rgba(16, 157, 142, .18); }
.eyebrow:has(.i)::before { display: none; }
.eyebrow .i { width: 1rem; height: 1rem; }
.section--dark .eyebrow, .section--teal .eyebrow, .section--final .eyebrow { color: var(--c-mint); background: rgba(57, 255, 184, .07); border-color: rgba(57, 255, 184, .22); }
.section--dark .eyebrow::before, .section--teal .eyebrow::before, .section--final .eyebrow::before { background: var(--c-mint); box-shadow: 0 0 0 3px rgba(57, 255, 184, .2), 0 0 12px var(--c-mint); }

.lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--c-muted); max-width: 60ch; }
.section-head--center .lead { margin-inline: auto; }
.section--dark .lead { color: var(--c-muted-dark); }
.section--teal .lead, .section--final .lead { color: rgba(232, 245, 242, .8); }

.micro { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
.micro .i { display: inline-block; vertical-align: -.3em; margin-right: .4rem; color: var(--c-teal); }
.micro--center { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .1rem; margin-top: var(--s-7); text-align: center; }
.section--dark .micro, .section--teal .micro, .section--final .micro { color: rgba(233, 236, 235, .68); }
.section--dark .micro .i, .section--teal .micro .i { color: var(--c-mint); }

.h3-lg { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); letter-spacing: -.03em; }

/* Utilitários */
.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; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; padding: .75rem 1rem; border-radius: var(--r-sm); background: var(--c-ink); color: var(--c-white); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 1rem; }
.show-sm { display: none; }
@media (max-width: 479.98px) { .show-sm { display: inline; } .hide-sm { display: none; } }

/* Revelação ao rolar: sobe, ganha nitidez */
.js [data-reveal] {
  opacity: 0; transform: translateY(28px) scale(.985); filter: blur(8px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
}