/* ============================================================
   JSM Consultoria — Landing institucional
   Design system + duas direções visuais (A: Editorial / B: Bold)
   Marca: navy #233e59, cinzas #666 / #bebebe
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; }

:root {
  /* Brand palette */
  --navy:        #233e59;
  --navy-2:      #2c4a69;
  --navy-deep:   #15263a;
  --navy-ink:    #0f1d2e;
  --gray:        #5d6873;
  --gray-2:      #8a939d;
  --gray-soft:   #bebebe;
  --line:        #e4e7eb;
  --line-soft:   #eef1f3;
  --paper:       #f5f6f7;
  --paper-2:     #eceef0;
  --white:       #ffffff;
  --ink:         #1b2734;

  /* Accent (CTA / highlights) — default = navy. Tweakable. */
  --accent:      #233e59;
  --accent-ink:  #ffffff;

  /* Typography */
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --display-weight: 500;
  --display-spacing: -0.01em;
  --display-line: 1.04;
  --display-style: normal;

  /* layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 80px);
  --radius: 14px;

  /* per-direction hooks */
  --hero-bg: var(--paper);
  --hero-ink: var(--navy);
  --hero-sub: var(--gray);
  --hero-eyebrow: var(--gray-2);
  --section-alt-bg: var(--navy-deep);
}

/* ---------- Direction A : Editorial Premium ---------- */
[data-dir="a"] {
  --font-display: 'Newsreader', Georgia, serif;
  --display-weight: 500;
  --display-spacing: -0.005em;
  --display-line: 1.06;
  --display-style: normal;
  --hero-bg: var(--paper);
  --hero-ink: var(--navy);
  --hero-sub: var(--gray);
}

/* ---------- Direction B : Corporativo Bold ---------- */
[data-dir="b"] {
  --font-display: 'Saira Condensed', 'Hanken Grotesk', sans-serif;
  --display-weight: 600;
  --display-spacing: 0.005em;
  --display-line: 0.98;
  --display-style: normal;
  --hero-bg: var(--navy-deep);
  --hero-ink: var(--white);
  --hero-sub: rgba(255,255,255,0.72);
  --hero-eyebrow: rgba(255,255,255,0.55);
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

h1,h2,h3 { font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing); line-height: var(--display-line);
  font-style: var(--display-style); margin: 0; text-wrap: balance; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: var(--gray-2);
}

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-body); font-weight: 600; font-size: 16px;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: none; padding: 16px 26px; border-radius: 999px; transition: .25s ease;
  letter-spacing: .005em; white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
[data-dir="b"] .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.28); }
.btn-ghost:hover { border-color: var(--navy); }
[data-dir="b"] .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.btn .arr { transition: transform .25s ease; }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease, border-color .3s; }
.hdr-inner { display: flex; align-items: center; justify-content: space-between;
  padding-block: 22px; transition: padding .3s ease; }
.hdr.scrolled .hdr-inner { padding-block: 14px; }
.hdr.scrolled { background: color-mix(in srgb, var(--white) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
[data-dir="b"] .hdr.scrolled { background: color-mix(in srgb, var(--navy-deep) 86%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
.hdr-logo img { height: 30px; width: auto; }
.hdr-logo .lg-light { display: none; }
/* over dark hero (top): white logo; once scrolled on light: navy. Dir B always dark → white. */
.hdr-logo .lg-dark { display: block; }
.hdr-logo .lg-light { display: none; }
[data-dir="a"] .hdr.scrolled .hdr-logo .lg-dark { display: block; }
[data-dir="a"] .hdr .hdr-logo .lg-dark { display: block; }
[data-dir="b"] .hdr-logo .lg-light { display: block; }
[data-dir="b"] .hdr-logo .lg-dark { display: none; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav a.navlink { font-size: 15px; font-weight: 500; color: var(--gray);
  transition: color .2s; position: relative; }
[data-dir="b"] .hdr:not(.scrolled) .nav a.navlink,
[data-dir="b"] .hdr.scrolled .nav a.navlink { color: rgba(255,255,255,0.78); }
.nav a.navlink:hover { color: var(--navy); }
[data-dir="b"] .nav a.navlink:hover { color: #fff; }
.nav .btn { padding: 12px 22px; font-size: 15px; }
.hdr-cta-wrap { display: flex; align-items: center; gap: 18px; }

.burger { display: none; background: none; border: none; cursor: pointer; padding: 8px;
  flex-direction: column; gap: 5px; }
.burger span { width: 26px; height: 2px; background: var(--navy); transition: .3s; }
[data-dir="b"] .burger span { background: #fff; }

/* mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--white);
  transform: translateY(-100%); transition: transform .4s cubic-bezier(.6,0,.2,1);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: var(--gutter); }
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { font-family: var(--font-display); font-size: 34px; color: var(--navy);
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 24px; align-self: flex-start; }

/* ---------- Hero ---------- */
.hero { background: var(--hero-bg); color: var(--hero-ink); position: relative;
  padding-top: clamp(120px, 17vh, 190px); padding-bottom: clamp(70px, 10vh, 120px);
  overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 76px);
  align-items: center; }
.hero-eyebrow { color: var(--hero-eyebrow); margin-bottom: 26px; }
.hero h1 { font-size: clamp(40px, 6.4vw, 88px); color: var(--hero-ink); margin-bottom: 28px; }
[data-dir="b"] .hero h1 { text-transform: uppercase; }
.hero h1 em { font-style: italic; color: var(--accent); }
[data-dir="b"] .hero h1 em { font-style: normal; color: #6ba8e6; -webkit-text-stroke: 0; }
.hero-sub { font-size: clamp(17px, 1.5vw, 21px); color: var(--hero-sub); max-width: 30em;
  margin-bottom: 38px; line-height: 1.55; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-trust { margin-top: 40px; display: flex; align-items: center; gap: 16px; }
.hero-trust .big { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,3vw,40px);
  color: var(--hero-ink); line-height: 1; }
.hero-trust .lbl { font-size: 14px; color: var(--hero-sub); max-width: 16em; line-height: 1.4; }
.hero-trust .rule { width: 1px; height: 44px; background: currentColor; opacity: .2; }

/* hero portrait */
.hero-portrait { position: relative; }
.portrait-frame { width: 100%; aspect-ratio: 4/5; overflow: hidden; position: relative; background: var(--paper-2); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.hero-portrait .portrait-frame { box-shadow: 0 40px 80px -40px rgba(15,29,46,.55); }
[data-dir="a"] .hero-portrait .portrait-frame { border-radius: 280px 280px 18px 18px; }
.hero-portrait .deco-mark { position: absolute; z-index: 0; opacity: .9; }
[data-dir="a"] .hero-portrait .deco-mark { display: none; }
[data-dir="b"] .hero-portrait::before { content:''; position: absolute; inset: -8% -10% auto auto;
  width: 78%; aspect-ratio: 1; background: #2f6fd0; border-radius: 36px; transform: rotate(0deg);
  top: -6%; right: -6%; z-index: 0; }
[data-dir="b"] .hero-portrait::after { content:''; position:absolute; width: 44%; aspect-ratio:1;
  background: var(--navy); border-radius: 26px; left: -7%; bottom: -7%; z-index: 0; }
[data-dir="b"] .hero-portrait .portrait-frame { border-radius: 22px; position: relative; z-index: 1; }

/* big watermark mark in hero corner */
.hero-wm { position: absolute; pointer-events: none; z-index: 0; }
[data-dir="a"] .hero-wm { right: -40px; bottom: -60px; width: 320px; opacity: .05; }
[data-dir="b"] .hero-wm { display: none; }

/* ---------- Section scaffolding ---------- */
section { position: relative; }
.sec { padding-block: clamp(70px, 10vw, 130px); }
.sec-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 18px; display: inline-block; }
.sec-head h2 { font-size: clamp(30px, 4.2vw, 56px); color: var(--navy); }
[data-dir="b"] .sec-head h2 { text-transform: uppercase; }
.sec-head p { font-size: clamp(17px,1.4vw,20px); color: var(--gray); margin-top: 20px; line-height: 1.55; }
.on-dark .sec-head h2 { color: #fff; }
.on-dark .sec-head p { color: rgba(255,255,255,0.7); }
.on-dark .eyebrow { color: rgba(255,255,255,0.5); }

/* ---------- Stats band ---------- */
.stats { background: var(--navy); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; overflow: hidden; }
.stat { background: var(--navy); padding: 40px 30px; }
.stat .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px,4vw,52px);
  line-height: 1; letter-spacing: -0.01em; }
[data-dir="b"] .stat .num { font-size: clamp(40px,4.6vw,60px); }
.stat .num small { font-size: .5em; font-weight: 500; opacity: .85; }
.stat .cap { margin-top: 14px; font-size: 15px; color: rgba(255,255,255,0.66); line-height: 1.4; }

/* ---------- Dores / Para quem ---------- */
.dores { background: var(--paper); }
.dores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dor { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; transition: .3s ease; }
.dor:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(18,32,49,.4); border-color: transparent; }
.dor .dot { width: 36px; height: 36px; border-radius: 9px; background: var(--paper-2);
  display: grid; place-items: center; margin-bottom: 18px; color: var(--navy);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
[data-dir="b"] .dor .dot { border-radius: 4px; }
.dor h3 { font-family: var(--font-body); font-weight: 700; font-size: 19px; color: var(--ink);
  letter-spacing: 0; line-height: 1.3; margin-bottom: 8px; }
.dor p { font-size: 15.5px; color: var(--gray); margin: 0; line-height: 1.5; }

/* ---------- Sobre ---------- */
.sobre { background: var(--white); }
.sobre-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px,5vw,72px); align-items: center; }
.sobre-portrait { position: relative; }
[data-dir="a"] .sobre-portrait .portrait-frame { border-radius: 20px; }
[data-dir="b"] .sobre-portrait .portrait-frame { border-radius: 8px; }
.sobre-portrait .portrait-frame { box-shadow: 0 36px 70px -38px rgba(15,29,46,.5); }
.sobre-portrait .badge { position: absolute; right: -18px; bottom: 28px; background: var(--navy);
  color: #fff; padding: 18px 22px; border-radius: 14px; box-shadow: 0 24px 50px -20px rgba(18,32,49,.55); }
.sobre-portrait .badge .b1 { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1; }
.sobre-portrait .badge .b2 { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 6px; }
.sobre-body h2 { font-size: clamp(28px,3.6vw,48px); color: var(--navy); margin-bottom: 24px; }
[data-dir="b"] .sobre-body h2 { text-transform: uppercase; }
.sobre-body p { color: var(--gray); margin: 0 0 18px; font-size: 17.5px; }
.sobre-body p strong { color: var(--ink); font-weight: 600; }
.creds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cred { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--navy);
  background: var(--paper); border: 1px solid var(--line); padding: 9px 14px; border-radius: 999px; }
[data-dir="b"] .cred { border-radius: 4px; }

/* ---------- Método ---------- */
.metodo { background: var(--navy-deep); color: #fff; }
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12); }
.step { padding: 34px 4px 34px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  display: grid; grid-template-columns: 78px 1fr; gap: 8px; }
.step:nth-child(odd) { padding-right: clamp(24px,4vw,64px); }
.step:nth-child(even) { padding-left: clamp(24px,4vw,64px); border-left: 1px solid rgba(255,255,255,0.12); }
.step .n { font-family: var(--font-display); font-weight: 600; font-size: 34px;
  color: #5f8fc9; line-height: 1; }
[data-dir="b"] .step .n { font-size: 42px; }
.step h3 { font-family: var(--font-body); font-weight: 700; font-size: 19px; letter-spacing: 0;
  margin-bottom: 8px; line-height: 1.25; }
.step p { font-size: 15px; color: rgba(255,255,255,0.62); margin: 0; line-height: 1.5; }

/* ---------- Missão (quote) ---------- */
.missao { background: var(--paper); }
.missao-card { display: grid; grid-template-columns: 200px 1fr; gap: clamp(28px,4vw,56px); align-items: center; }
.missao-mark { width: 200px; height: 200px; border-radius: 28px; background: var(--white);
  border: 1px solid var(--line); display: grid; place-items: center;
  box-shadow: 0 30px 60px -34px rgba(15,29,46,.4); }
[data-dir="b"] .missao-mark { border-radius: 10px; }
.missao-mark img { width: 96px; height: auto; }
.missao-q { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px,3vw,40px);
  color: var(--navy); line-height: 1.25; letter-spacing: -0.01em; }
[data-dir="b"] .missao-q { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.02em; }
.missao-q .mark { color: var(--gray-soft); }
.missao-sign { margin-top: 24px; font-size: 15px; color: var(--gray); }
.missao-sign strong { color: var(--navy); font-weight: 700; }

/* ---------- CTA final ---------- */
.cta { background: var(--navy); color: #fff; text-align: center; overflow: hidden; position: relative; }
.cta .wrap { position: relative; z-index: 1; }
.cta-wm { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 480px; opacity: .06; pointer-events: none; }
.cta h2 { font-size: clamp(34px,5vw,68px); margin-bottom: 22px; }
[data-dir="b"] .cta h2 { text-transform: uppercase; }
.cta p { color: rgba(255,255,255,0.72); font-size: clamp(17px,1.5vw,21px); max-width: 30em;
  margin: 0 auto 38px; }
.cta .btn-primary { background: #fff; color: var(--navy); padding: 18px 34px; font-size: 17px; }
.cta .btn-primary:hover { box-shadow: 0 18px 40px -14px rgba(0,0,0,.5); }

/* ---------- Footer ---------- */
.ftr { background: var(--navy-ink); color: rgba(255,255,255,0.7); padding-block: 64px 36px; }
.ftr-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ftr-logo img { height: 34px; margin-bottom: 18px; }
.ftr-blurb { max-width: 24em; font-size: 15px; line-height: 1.6; }
.ftr-cols { display: flex; gap: clamp(40px,6vw,90px); flex-wrap: wrap; }
.ftr-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin: 0 0 16px; font-weight: 500; }
.ftr-col a, .ftr-col span { display: block; font-size: 15px; color: rgba(255,255,255,0.78);
  margin-bottom: 10px; transition: color .2s; }
.ftr-col a:hover { color: #fff; }
.ftr-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 28px; font-size: 13px; color: rgba(255,255,255,0.4); }

/* ---------- reveal animation (visible by default; JS opts into hidden start) ---------- */
.reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .reveal { opacity: 0; transform: translateY(26px); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }
html.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .nav .navlink, .hdr-cta-wrap .btn { display: none; }
  .burger { display: flex; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-portrait { max-width: 420px; margin-top: 12px; }
  .sobre-grid { grid-template-columns: 1fr; }
  .sobre-portrait { max-width: 420px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .dores-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step:nth-child(even) { padding-left: 0; border-left: none; }
  .step:nth-child(odd) { padding-right: 0; }
  .missao-card { grid-template-columns: 1fr; text-align: left; }
  .missao-mark { width: 130px; height: 130px; }
  .missao-mark img { width: 64px; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .stats-grid { grid-template-columns: 1fr; }
  .sobre-portrait .badge { right: 12px; }
}