/* tokens — Impulse Maps editorial */
:root {
  /* ---------- color ---------- */
  --bg:        #FAF8F3;   /* off-white quente */
  --bg-deep:  #F2EDE1;   /* cream — seções alternadas */
  --bg-ink:   #0A0A0A;   /* preto profundo — seções dark */
  --ink:       #0A0A0A;   /* tinta principal */
  --ink-2:     #1B1B1B;   /* tinta secundária */
  --muted:     #6B6358;   /* cinza quente para texto secundário */
  --rule:      #E8E2D5;   /* linhas/divisores */
  --rule-deep: #D6CFBE;
  --coral:     #FF4438;   /* acento principal — marca */
  --coral-2:   #E63A2F;
  --teal:      #1B5E66;   /* secundário — montanha do logo */
  --teal-2:    #2A7780;
  --gold:      #C9A24A;   /* destaque sutil em números */
  --green-ok:  #1F8A3E;

  --on-ink:    #FAF8F3;   /* texto sobre preto */
  --on-ink-mu: rgba(250,248,243,.62);

  /* ---------- type ---------- */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body:    "Manrope", -apple-system, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---------- scale ---------- */
  --t-mega:    clamp(3.6rem, 9vw, 8.5rem);    /* hero numbers */
  --t-display: clamp(3rem, 6.5vw, 6rem);       /* hero h1 */
  --t-h1:      clamp(2.4rem, 4.2vw, 4rem);
  --t-h2:      clamp(1.9rem, 3.1vw, 2.8rem);
  --t-h3:      clamp(1.35rem, 2vw, 1.7rem);
  --t-lead:    clamp(1.05rem, 1.3vw, 1.25rem);
  --t-body:    1rem;
  --t-sm:      .875rem;
  --t-xs:      .75rem;

  /* ---------- space ---------- */
  --gutter:    clamp(1.25rem, 2.5vw, 2rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --container: 1320px;
  --container-narrow: 980px;

  /* ---------- elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(10,10,10,.04), 0 1px 1px rgba(10,10,10,.03);
  --shadow-md: 0 12px 28px -12px rgba(10,10,10,.16), 0 4px 10px -6px rgba(10,10,10,.08);
  --shadow-lg: 0 32px 60px -28px rgba(10,10,10,.28), 0 12px 24px -16px rgba(10,10,10,.16);
  --shadow-coral: 0 30px 80px -40px rgba(255,68,56,.45);

  /* ---------- radii ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- transitions ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 200ms;
  --t-mid: 420ms;
  --t-slow: 800ms;
}

/* ---------- reset minimalista ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1; margin: 0; }
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { margin: 0; }
::selection { background: var(--coral); color: var(--on-ink); }

/* utilities */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container.narrow { max-width: var(--container-narrow); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55; }
.section { padding-block: var(--section-y); }
.section-ink { background: var(--bg-ink); color: var(--on-ink); }
.section-ink .eyebrow { color: var(--on-ink-mu); }
.section-cream { background: var(--bg-deep); }
.rule { height: 1px; background: var(--rule); border: 0; }
.section-ink .rule { background: rgba(250,248,243,.12); }

/* italic accent in display */
.it { font-style: italic; font-weight: 400; }
.coral { color: var(--coral); }
.teal { color: var(--teal); }

/* sr-only */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }