/* ==========================================================================
   II CONATAN — Base: reset, tipografia, layout e utilitários
   Depende de tokens.css. Componentes ficam em components.css; seções em
   css/sections/*.css (uma por seção, prefixo .cn-).
   ========================================================================== */

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; /* no mobile, o body sozinho não impede a viewport de alargar */ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--header-top) + 16px); }
body { margin: 0; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; } /* especificidade 0: classes de componente vencem */
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- Corpo ---------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* corta as borboletas que saem da tela sem criar contêiner de rolagem */
}

/* ---------- Papéis tipográficos (mapeados do Figma) ---------- */
.t-hero      { font: var(--fw-semibold) var(--fs-hero)/var(--lh-hero) var(--font-sans); }
/* DECISÃO: todos os títulos de seção usam .t-h2 (IBM 600 44/1.1) com acento em <em> Fraunces.
   Substitui: IBM 400 37 (Palestrantes), Plus Jakarta 700 44 (FAQ/Realização), Plus Jakarta 300 55
   (Submeter), IBM 600 50 (Inscrições), Plus Jakarta 400 44 (Presencial). */
.t-h2        { font: var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: -0.01em; }
.on-light .t-h2 { color: var(--title-on-light); }
.on-dark  .t-h2 { color: var(--title-on-dark); }
.t-h2-alt    { font: var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-sans); }     /* alias legado */
/* Faixa do countdown: único título "leve" mantido (IBM 300 + Fraunces 700 itálico) */
.t-band      { font: var(--fw-light) var(--fs-countdown-title)/1.27 var(--font-sans); } /* 1:849: 2 linhas em 89px */
.t-h3        { font: var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-sans); }
.t-card      { font: var(--fw-semibold) var(--fs-card-title)/var(--lh-card-title) var(--font-sans); }
.t-body-xl   { font: var(--fw-regular) var(--fs-body-xl)/var(--lh-body-xl) var(--font-sans); }
.t-body-l    { font: var(--fw-regular) var(--fs-body-l)/var(--lh-body-l) var(--font-sans); }
.t-body      { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); }
.t-body-b    { font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font-sans); }
.t-body-s    { font: var(--fw-regular) var(--fs-body-s)/var(--lh-body-s) var(--font-sans); }
.t-caption   { font: var(--fw-regular) var(--fs-caption)/normal var(--font-sans); }
.t-label     { font: var(--fw-semibold) var(--fs-caption)/normal var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; }

/* Acento serifado itálico (Fraunces) — usar em <em> dentro dos títulos */
.t-serif,
.t-hero em, .t-h2 em, .cn-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-semibold);
  font-variation-settings: var(--fraunces-axes);
  font-optical-sizing: auto;
}
.on-dark  em, .on-dark  .cn-accent { color: var(--text-italic-on-dark); }
.on-light em, .on-light .cn-accent { color: var(--text-italic-on-light); }

/* ---------- Layout ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
.section { position: relative; padding-block: var(--section-space); }
.section--flush { padding-block: 0; }
.on-dark  { color: var(--text-on-dark); }
.on-light { color: var(--text-body); }

/* Elementos decorativos sobrepostos entre seções (borboletas) */
.cn-float {
  position: absolute;
  z-index: var(--z-butterfly);
  pointer-events: none;
  user-select: none;
}

/* ---------- Acessibilidade ---------- */
.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;
}
:focus-visible { outline: 2px solid var(--purple-700); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--lime-500); }

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 1000;
  background: var(--purple-900); color: var(--white); padding: 10px 16px; border-radius: var(--radius-pill);
}
.skip-link:focus { top: 16px; }

/* ---------- Movimento (js/modules/motion.js) ----------
   Estado inicial das entradas só existe com JS (html.js). Se o GSAP não carregar em 3s,
   o script do <head> adiciona .no-motion e tudo aparece. Títulos .t-h2 entram sozinhos;
   blocos usam [data-reveal] e grupos [data-reveal-group] (filhos em sequência). */
/* opacidade (não visibility): o conteúdo ainda não revelado continua no Tab e nos leitores de tela;
   ao receber foco o navegador rola até ele e a entrada dispara (revisão de acessibilidade, Etapa 12). */
.js:not(.no-motion) .t-h2:not([data-reveal="off"]),
.js:not(.no-motion) [data-reveal]:not([data-reveal="off"]),
.js:not(.no-motion) [data-reveal-group] > * { opacity: 0; }

/* Lenis (rolagem suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Breakpoints ----------
   Desktop desenhado em 1920 (conteúdo 1180) · validar em 1440 e 1920
   ≤1279 desktop compacto · ≤1023 tablet · ≤767 mobile (desenhado em 390)
   ------------------------------------------------------------------- */
@media (max-width: 1279px) {
  :root { --section-space: 96px; }
}
@media (max-width: 1023px) {
  :root { --section-space: 80px; --fs-h2: 36px; --fs-hero: 38px; --header-h: var(--header-h-m); --header-top: var(--header-top-m); }
}
@media (max-width: 767px) {
  :root {
    --section-space: 64px;
    --gutter: 23px;           /* hero mobile: 390 − 344 = 46 → 23 de cada lado */
    --fs-hero: var(--fs-hero-m);
    --fs-body-xl: var(--fs-body-xl-m);
    --fs-h2: 30px;            /* não desenhado: proposta, conferir com wireframes */
    --fs-countdown-title: 26px;
    --fs-h3: 22px;
    --fs-card-title: 20px;
  }
}