/* ═══════════════════════════════════════════════════
   SAPIANS × XReset — Design System v2
   Canvas base: 1920 × 1080 · escala modular 1.25
   Mínimo de corpo: 20px · meta: 15px · micro: 13px
═══════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────
     CORES — paleta oficial SAPIANS
  ───────────────────────────────────────────── */
  --marfim:        #f1efe6;   /* fundo claro */
  --areia:         #c6beaf;
  --cinza-quente:  #9f9d92;
  --terracota:     #9e5331;   /* cor de destaque */
  --musgo:         #6f665e;
  --preto:         #1c1e1d;

  --terracota-dark:  #7a3e22;
  --terracota-light: #c47a55;
  --marfim-dark:     #ddd5c8;

  /* ─────────────────────────────────────────────
     CORES SEMÂNTICAS POR SUPERFÍCIE
     Opacidades calibradas para contraste AA+
  ───────────────────────────────────────────── */
  /* Sobre fundo escuro (preto) */
  --on-dark-1:   rgba(255,255,255,1);      /* headline */
  --on-dark-2:   rgba(255,255,255,.88);    /* body principal */
  --on-dark-3:   rgba(255,255,255,.72);    /* body secundário */
  --on-dark-4:   rgba(255,255,255,.56);    /* meta / eyebrow */
  --on-dark-5:   rgba(255,255,255,.38);    /* source / footnote */
  --on-dark-line: rgba(255,255,255,.16);   /* divisórias */

  /* Sobre fundo terracota */
  --on-terra-1:  rgba(255,255,255,1);
  --on-terra-2:  rgba(255,255,255,.92);
  --on-terra-3:  rgba(255,255,255,.78);
  --on-terra-4:  rgba(255,255,255,.62);
  --on-terra-line: rgba(255,255,255,.22);

  /* Sobre fundo marfim */
  --on-light-1: var(--preto);
  --on-light-2: var(--musgo);
  --on-light-3: var(--cinza-quente);
  --on-light-line: rgba(28,30,29,.14);

  /* ─────────────────────────────────────────────
     TIPOGRAFIA — escala modular (1.25)
     Base: 20px = body. Todas referenciadas ao canvas 1920×1080.
  ───────────────────────────────────────────── */
  --font-sans:   'DM Sans', system-ui, sans-serif;
  --font-serif:  'DM Serif Display', Georgia, serif;

  --fs-display:   160px;   /* capa — hero */
  --fs-h1-lg:      84px;   /* títulos muito aerados */
  --fs-h1:         68px;   /* título de slide padrão */
  --fs-h2:         36px;   /* subtítulo de painel / seção */
  --fs-h3:         22px;   /* card title */
  --fs-lead:       24px;   /* lead / intro */
  --fs-body-lg:    20px;   /* body destacado */
  --fs-body:       18px;   /* body padrão — confortável sem volumoso */
  --fs-body-sm:    16px;   /* body compacto */
  --fs-meta:       14px;   /* eyebrow / source / legendas */
  --fs-micro:      12px;   /* chips / tags / timeline-tag */

  /* Line-heights */
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-h1:      1.08;
  --lh-h2:      1.18;
  --lh-h3:      1.28;
  --lh-card:    1.48;   /* texto em cards densos */
  --lh-base:    1.55;
  --lh-loose:   1.65;

  /* Letter-spacing */
  --ls-tighter:  -.045em;
  --ls-tight:    -.030em;
  --ls-normal:    0;
  --ls-wide:      .10em;
  --ls-wider:     .18em;
  --ls-widest:    .22em;

  /* Font-weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* ─────────────────────────────────────────────
     LAYOUT — espaçamento e grid
  ───────────────────────────────────────────── */
  --pad-slide-x:  80px;   /* padding horizontal externo */
  --pad-slide-y:  72px;   /* padding vertical externo */
  --pad-panel:    56px;   /* padding interno de painéis */
  --gap-xs:       8px;
  --gap-sm:       16px;
  --gap-md:       24px;
  --gap-lg:       36px;
  --gap-xl:       56px;
  --gap-2xl:      80px;

  /* Radius */
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-pill:  999px;

  /* Shadows */
  --shadow-card:     0 12px 36px rgba(0,0,0,.18);
  --shadow-card-lg:  0 32px 80px rgba(0,0,0,.45);
  --shadow-terracota: 0 16px 40px rgba(158,83,49,.32);

  /* Motion */
  --ease-out-quint: cubic-bezier(.16,1,.3,1);
  --ease-smooth:    cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--on-dark-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  background: var(--preto);
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

/* ═══════════════════════════════════════════════════
   STAGE / SLIDE BASE
═══════════════════════════════════════════════════ */
#stage {
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.slide.active { opacity: 1; pointer-events: all; }

/* ═══════════════════════════════════════════════════
   TIPOGRAFIA GLOBAL — classes utilitárias
═══════════════════════════════════════════════════ */

/* Eyebrow — usado em todos os slides, 100% padronizado */
.ds-eyebrow {
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  line-height: 1;
  color: var(--on-dark-4);
}
.ds-eyebrow--terra { color: var(--terracota); }
.ds-eyebrow--light { color: var(--on-light-3); }

/* Headline H1 — padrão de título de slide */
.ds-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-tight);
  color: var(--on-dark-1);
}
.ds-h1--light { color: var(--on-light-1); }

/* H2 / subtítulo de painel */
.ds-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-tight);
  color: var(--on-dark-1);
}

/* H3 / card title */
.ds-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  letter-spacing: -.015em;
  color: var(--on-dark-1);
}

/* Body */
.ds-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--on-dark-3);
}
.ds-body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
  color: var(--on-dark-3);
}

/* Source / footnote */
.ds-source {
  font-size: var(--fs-meta);
  color: var(--on-dark-5);
  font-style: italic;
  line-height: 1.5;
}

/* Chip / tag */
.ds-chip {
  display: inline-flex; align-items: center;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
  color: var(--terracota);
}

/* Destaque numérico / stat em títulos */
.ds-stat { color: var(--terracota); display: inline-block; }

/* ═══════════════════════════════════════════════════
   NAVEGAÇÃO — dots e setas
═══════════════════════════════════════════════════ */
#nav {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 200;
}
.nav-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  border: none;
  cursor: pointer;
  transition: all .25s var(--ease-smooth);
  padding: 0;
}
.nav-dot:hover { background: rgba(255,255,255,.5); }
.nav-dot.on { background: rgba(255,255,255,.92); transform: scale(1.35); }

#nav.light .nav-dot { background: rgba(28,30,29,.22); }
#nav.light .nav-dot:hover { background: rgba(28,30,29,.4); }
#nav.light .nav-dot.on { background: var(--terracota); transform: scale(1.35); }

#arrows {
  position: fixed;
  bottom: 22px;
  right: 36px;
  display: flex;
  gap: 12px;
  z-index: 200;
}
.arrow-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, border-color .2s, color .2s, transform .18s var(--ease-smooth);
  line-height: 1;
}
.arrow-btn:hover {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.4);
  transform: scale(1.08);
}

#arrows.light .arrow-btn {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.16);
  color: var(--preto);
}
#arrows.light .arrow-btn:hover {
  background: rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.3);
}

/* ═══════════════════════════════════════════════════
   BRAND MARK — símbolo SAPIANS (padrão global)
═══════════════════════════════════════════════════ */
.brand-mark,
.brand-mark-light {
  position: absolute;
  top: 44px;
  right: 48px;
  width: 58px;
  height: 62px;
  opacity: .22;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}
.brand-mark { filter: brightness(0) invert(1); }  /* branco para fundo escuro/terracota */
/* .brand-mark-light → mantém cor original (terracota sobre marfim) */

/* ═══════════════════════════════════════════════════
   KEYFRAMES GLOBAIS
═══════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.72); }
  70%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes statPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.1); }
}

/* ═══════════════════════════════════════════════════
   PLACEHOLDER
═══════════════════════════════════════════════════ */
.slide-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--preto);
  color: rgba(255,255,255,.35);
  gap: 12px;
}
.slide-placeholder h2 {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: rgba(255,255,255,.5);
}
.slide-placeholder p { font-size: var(--fs-body-sm); }