/* ============================================================
   BASE / MOLDE NEUTRO  — design system (multi-cliente)
   Aqui ficam as "regras" sem cor de marca. Tudo é variável.
   Os componentes NUNCA usam cor fixa — só var(--ds-*).
   A cor/fonte de cada cliente vem de um arquivo de "tinta"
   (theme-*.css) carregado DEPOIS deste.
   ============================================================ */

:root {
  /* --- Cores neutras (default = cinza/grafite, sem marca) --- */
  --ds-bg:            #ffffff;
  --ds-surface:       #f6f7f8;
  --ds-surface-2:     #eceef0;
  --ds-text:          #1a1d21;
  --ds-text-muted:    #5c636b;
  --ds-border:        #dfe3e7;

  --ds-primary:          #2b3138;  /* cor principal da marca (placeholder neutro) */
  --ds-primary-contrast: #ffffff;
  --ds-primary-hover:    #1a1d21;

  --ds-accent:           #3b5bdb;  /* CTA / destaque (placeholder neutro) */
  --ds-accent-contrast:  #ffffff;
  --ds-accent-hover:     #2f49b0;

  /* --- Tipografia --- */
  --ds-font-head: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-h1: 700 clamp(2rem, 4vw, 3.25rem)/1.1 var(--ds-font-head);
  --ds-h2: 700 clamp(1.5rem, 3vw, 2.25rem)/1.15 var(--ds-font-head);
  --ds-body: 400 1rem/1.6 var(--ds-font-body);
  --ds-small: 400 .875rem/1.5 var(--ds-font-body);

  /* --- Forma / espaço --- */
  --ds-radius:    14px;
  --ds-radius-sm: 8px;
  --ds-radius-pill: 999px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  --ds-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --ds-shadow-lg: 0 12px 40px rgba(16,24,40,.12);
  --ds-maxw: 1120px;

  /* --- Logo (a imagem real vem do tema do cliente, na regra .ds-logo) --- */
  --ds-logo-w: 160px;     /* largura do logo no header */

  /* --- Movimento (transições/animações padrão) --- */
  --ds-ease: cubic-bezier(.22,.61,.36,1);
  --ds-dur: .6s;
}

/* Scroll reveal reutilizável: marque um elemento com data-reveal */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, [data-reveal] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }

/* Reset mínimo para os previews */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-text);
  font: var(--ds-body);
  -webkit-font-smoothing: antialiased;
}