/* ==========================================================================
   Base — reset, tipografia, layout e utilitários de rolagem
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* As animações de entrada laterais deslocam o elemento em 24px antes de
     tocar. Isso criava uma barra de rolagem horizontal a 375px enquanto a
     seção ainda não tinha aparecido. `clip` corta sem criar contêiner de
     rolagem — ao contrário de `hidden`, não quebra o position:sticky do
     cabeçalho. */
  overflow-x: clip;
  /* compensa o cabeçalho grudado quando um link de âncora salta */
  scroll-padding-top: calc(64px + var(--space-6));
}
@media (min-width: 768px) { html { scroll-padding-top: calc(80px + var(--space-6)); } }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* espaço para a barra fixa de WhatsApp não cobrir o rodapé */
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 767px) {
  body.has-fixed-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

img, picture, video, svg { display: block; max-width: 100%; }

/* `display` de componente sobrescreve o display:none nativo de [hidden].
   Sem esta regra, um botão .btn com [hidden] continua aparecendo. */
[hidden] { display: none !important; }
img, video { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-foreground);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero);    font-weight: 700; line-height: var(--lh-hero); letter-spacing: -.015em; }
h2 { font-size: var(--fs-section); font-weight: 600; line-height: var(--lh-section); letter-spacing: -.01em; }
h3 { font-size: var(--fs-card);    font-weight: 600; line-height: var(--lh-card); }

/* Página Eventos: mesmo tipo, peso 600 — soa corporativo sem trocar de fonte */
[data-page="eventos"] h1 { font-weight: 600; }

p { margin: 0; text-wrap: pretty; }
a { color: var(--page-accent); text-decoration-thickness: .08em; text-underline-offset: .18em; }

/* --- Foco visível: nunca remover sem colocar outro no lugar --------------- */
:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* --- Layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
}
.section { padding-block: var(--space-section); position: relative; }
.section--surface { background: var(--page-surface); }
.section--tight { padding-block: var(--space-12); }

.section__head { max-width: 62ch; margin-bottom: var(--space-8); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__lead {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-muted-foreground);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--page-accent);
  margin-bottom: var(--space-3);
}

.grid { display: grid; gap: var(--space-card-gap); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- Acessibilidade ------------------------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  z-index: var(--z-toast);
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-weight: 700; text-decoration: none;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   EFEITOS DE SCROLL
   Regra: só transform e opacity. width/height/top/left forçam layout
   e engasgam no celular intermediário — que é o aparelho deste público.
   ========================================================================== */

/* 1 — Entrada de seção: fade + subida de 16px, uma vez só */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* liberado depois da animação: will-change permanente consome memória de GPU */
[data-reveal].is-settled { will-change: auto; }

[data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
[data-reveal="right"] { transform: translate3d(24px, 0, 0); }
[data-reveal="zoom"]  { transform: scale(.94); }

/* 2 — Grade escalonada: 60ms por item, no máximo 6 por vez */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(1) { transition-delay:   0ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay:  60ms; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 120ms; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 180ms; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 240ms; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 300ms; }
[data-stagger].is-visible > *:nth-child(n+7) { transition-delay: 300ms; }

/* 3 — Headline palavra a palavra */
.word-reveal > span {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .5em, 0);
  animation: word-in 620ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}
@keyframes word-in { to { opacity: 1; transform: none; } }

/* 4 — Parallax: a variável --p (0→1) é escrita pelo JS em rAF */
[data-parallax] { will-change: transform; }

/* 5 — Barra de progresso da leitura */
.scroll-progress {
  position: fixed; inset-inline: 0; top: 0; height: 3px;
  z-index: calc(var(--z-header) + 1);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent) 60%, var(--color-gold));
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* 6 — Números que contam ao entrar na tela */
.counter { font-variant-numeric: tabular-nums; }

/* --- Movimento reduzido: DESLIGA, não encurta --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .word-reveal > span { opacity: 1; transform: none; animation: none; }
  [data-parallax] { transform: none !important; }
  .scroll-progress { display: none; }
}