/* ═══════════════════════════════════════════════════════════
   sobre-page.css — página /sobre. Usa só os tokens de global.css.
   .pill e .btn são cópias mínimas (vivem em home.css/hero.css, que
   esta página não carrega); .btn é exigido por cta_primary.css.
═══════════════════════════════════════════════════════════ */

:root {
  --ink: #04201e;
  --ink-2: #0a4a46;
  --wrap: 1260px;
}

::selection { background: var(--green); color: #fff; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: #F1F1EC; border-radius: 100px;
  padding: 6px 14px 6px 10px;
  font-size: 13px; font-weight: 600; color: var(--text2);
  margin-bottom: 18px;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

.btn {
  font-size: 15px; font-weight: 600; color: #fff; background: var(--green);
  padding: 13px 26px; border-radius: 8px; text-decoration: none;
  min-height: 48px; display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, transform .15s;
}

/* ── Cabeçalho ── */
.sb-head {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: calc(var(--nav) + 64px) var(--pad) 48px;
}
.sb-crumb {
  /* global.css posiciona todo <nav> como fixo: neutraliza pro breadcrumb */
  position: static; inset: auto; z-index: auto; height: auto;
}
.sb-crumb ol {
  display: flex; gap: 10px; list-style: none;
  font-size: 13.5px; color: var(--muted);
  margin-bottom: 28px;
}
.sb-crumb li + li::before { content: "›"; margin-right: 10px; color: var(--muted); }
.sb-crumb a { color: var(--muted); text-decoration: none; }
.sb-crumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.sb-crumb [aria-current] { color: var(--text); font-weight: 600; }

.sb-head h1 {
  font-size: clamp(44px, 11vw, 96px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .98;
  color: var(--text);
}
.sb-h1-k { color: var(--green); }

/* ── História ── */
.sb-historia {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 48px var(--pad) 96px;
  border-top: 1px solid var(--border);
}
.sb-historia-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.sb-historia h2 {
  position: sticky;
  top: calc(var(--nav) + 40px);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
  text-wrap: balance;
}
.sb-historia-corpo { max-width: 620px; }
.sb-historia-corpo p {
  font-size: 16px; line-height: 1.75; color: var(--text2);
  margin-bottom: 22px;
}
.sb-historia-corpo strong { color: var(--text); font-weight: 600; }
.sb-historia-corpo a {
  color: var(--green); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.sb-historia-corpo a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 3px; }
.sb-historia-corpo .sb-lead {
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.5; letter-spacing: -.015em;
  color: var(--text); font-weight: 500;
  margin-bottom: 32px;
}

/* Lemon riscado → Klavik */
.sb-lemon {
  text-decoration: none;
  color: var(--muted);
  background: linear-gradient(var(--text), var(--text)) 0 55% / 100% 2px no-repeat;
  transition: background-size .7s cubic-bezier(.16, 1, .3, 1);
}
.sb-lemon--pre { background-size: 0 2px; }
.sb-historia-corpo strong.sb-klavik { color: var(--green); }

.sb-historia-corpo .sb-fecho {
  margin: 40px 0 0; padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.2;
  color: var(--text);
  text-wrap: balance;
}

/* ── Faixa de números ── */
.sb-numeros {
  position: relative; isolation: isolate;
  background-color: var(--ink);
  background-image: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  padding: 88px var(--pad);
}
.sb-numeros::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.sb-numeros-grid {
  max-width: var(--wrap); margin: 0 auto; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sb-numeros-grid li {
  display: flex; flex-direction: column; gap: 14px;
  padding: 0 32px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.sb-numeros-grid li:first-child { padding-left: 0; border-left: 0; }
.sb-n-titulo { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); }
.sb-n-num {
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.sb-n-desc { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.78); max-width: 28ch; }

/* ── Quem está por trás ── */
.sb-quem { max-width: var(--wrap); margin: 0 auto; padding: 96px var(--pad); }
.sb-quem-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px; align-items: center;
}
.sb-foto { margin: 0; justify-self: center; width: min(100%, 270px); }
.sb-foto img {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 6;
  object-fit: cover; object-position: 50% 18%;
  filter: grayscale(100%);
  border-radius: 999px 999px 28px 28px; /* arco: moldura de retrato */
  background: #F1F1EC;
}
.sb-quem-texto h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.15;
  margin-bottom: 20px; text-wrap: balance;
}
.sb-quem-texto p { font-size: 16px; line-height: 1.75; color: var(--text2); max-width: 54ch; margin-bottom: 16px; }

/* ── Responsivo ── */
@media (max-width: 860px) {
  .sb-historia-wrap, .sb-quem-wrap { grid-template-columns: 1fr; gap: 28px; }
  .sb-historia h2 { position: static; }
  .sb-quem { padding: 64px var(--pad); }
  .sb-historia { padding-bottom: 64px; }
  .sb-foto { width: min(100%, 120px); }
}
@media (max-width: 720px) {
  .sb-head { padding-top: calc(var(--nav) + 40px); padding-bottom: 32px; }
  .sb-numeros { padding: 56px var(--pad); }
  .sb-numeros-grid { grid-template-columns: 1fr; }
  .sb-numeros-grid li { padding: 28px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .sb-numeros-grid li:first-child { padding-top: 0; border-top: 0; }
  .sb-numeros-grid li:last-child { padding-bottom: 0; }
  .sb-n-desc { max-width: none; }
  .sb-foto { width: auto; justify-self: center; }
  .sb-foto img { width: auto; height: 300px; margin: 0 auto; }
}