/* ───────────────────────────────────────────────────────────
   Primeiro Passo Imigração — shared styles
   Editorial minimalist · Fraunces + Inter · moss accent
─────────────────────────────────────────────────────────── */

:root {
  --black: #0A0A0A;
  --white: #FFFFFF;
  --off: #FAF8F5;
  --gray: #666666;
  --gray-soft: #8A8A8A;
  --gray-faint: #BFBFBF;
  --gray-line: #E5E5E5;
  --moss: #2D4A3E;
  --moss-hover: #3D5A4E;
  --max-wide: 1200px;
  --max-text: 720px;
  --pad-x: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  font-size: 17px;
}

a { color: inherit; text-decoration: none; }

/* ─── typography ─────────────────────────────────────────── */
.serif { font-family: 'Fraunces', 'Times New Roman', serif; font-optical-sizing: auto; }
h1, h2, h3 {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-optical-sizing: auto;
  margin: 0; letter-spacing: -0.01em;
}
h1 { font-weight: 300; font-size: clamp(44px, 7.4vw, 84px); line-height: 1.02; letter-spacing: -0.025em; }
h1.smaller { font-size: clamp(36px, 5.4vw, 60px); line-height: 1.05; }
h2 { font-weight: 500; font-size: clamp(30px, 4.3vw, 46px); line-height: 1.12; letter-spacing: -0.018em; }
h3 { font-weight: 500; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; }
p { margin: 0; }
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
}

/* ─── primitives ─────────────────────────────────────────── */
.wrap { max-width: var(--max-wide); margin: 0 auto; padding-inline: var(--pad-x); }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding-inline: var(--pad-x); }
.wrap-text { max-width: 760px; margin: 0 auto; padding-inline: var(--pad-x); }
.text-col { max-width: var(--max-text); }
.muted { color: var(--gray); }
.rule { height: 1px; background: var(--gray-line); border: 0; margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  background: var(--moss); color: var(--white);
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px;
  letter-spacing: -0.005em;
  border-radius: 5px; border: 1px solid var(--moss);
  cursor: pointer;
  transition: background 220ms ease-out;
  text-align: center;
}
.btn:hover { background: var(--moss-hover); border-color: var(--moss-hover); }
.btn .arrow { display: inline-block; transition: transform 220ms ease-out; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--black); border-color: var(--gray-line); }
.btn--ghost:hover { background: var(--off); border-color: var(--gray-line); }
.btn--full { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--moss); font-weight: 500; font-size: 15px;
  position: relative; padding-bottom: 2px;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 14px; bottom: 0;
  height: 1px; background: var(--moss);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms ease-out;
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow .arrow { transition: transform 240ms ease-out; }
.link-arrow:hover .arrow { transform: translateX(3px); }

.link-quiet {
  color: var(--gray); font-size: 14px;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}
.link-quiet:hover { color: var(--black); border-bottom-color: var(--black); }

.link-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gray); font-size: 14px;
  transition: color 200ms ease-out;
}
.link-back:hover { color: var(--black); }

/* ─── header ─────────────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--gray-line);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px;
  letter-spacing: -0.015em; color: var(--black);
  display: inline-flex; align-items: center;
}
.brand .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--moss); border-radius: 50%;
  margin-right: 10px; margin-bottom: 2px;
}
nav.primary { display: flex; gap: 30px; }
nav.primary a {
  font-size: 14.5px; color: var(--black);
  position: relative; padding: 6px 0;
}
nav.primary a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: var(--black);
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms ease-out;
}
nav.primary a:hover::after,
nav.primary a[aria-current="page"]::after { transform: scaleX(1); }
nav.primary a[aria-current="page"] { color: var(--moss); }
nav.primary a[aria-current="page"]::after { background: var(--moss); }

.nav-burger {
  display: none; width: 36px; height: 36px;
  background: transparent; border: 1px solid var(--gray-line); border-radius: 5px;
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-burger span { display: block; width: 16px; height: 1.2px; background: var(--black); position: relative; }
.nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.2px; background: var(--black);
}
.nav-burger span::before { top: -5px; }
.nav-burger span::after { top: 5px; }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--gray-line); background: var(--white);
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; padding: 14px var(--pad-x);
  border-bottom: 1px solid var(--gray-line);
  font-size: 15px;
}
.mobile-menu a:last-child { border-bottom: 0; }

/* ─── sections ───────────────────────────────────────────── */
section { padding-block: clamp(72px, 11vw, 140px); }
section.tight { padding-block: clamp(18px, 2.6vw, 28px); }
section.short { padding-block: clamp(56px, 7vw, 96px); }
.bg-off { background: var(--off); }

/* page hero (smaller variant for inner pages) */
.page-hero { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(48px, 6vw, 80px); }
.page-hero h1 { max-width: 16ch; }
.page-hero .sub {
  margin-top: 24px;
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--gray);
  max-width: 620px;
  line-height: 1.6;
}

/* ─── footer ─────────────────────────────────────────────── */
footer.site {
  background: var(--black); color: #DADADA;
  padding-block: 72px 36px;
  font-size: 14px; line-height: 1.6;
}
footer.site a { color: #DADADA; }
footer.site a:hover { color: var(--white); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 56px;
}
.foot-brand .brand { color: var(--white); font-size: 22px; }
.foot-brand .brand .dot { background: var(--moss); }
.foot-brand .tag { margin-top: 14px; color: #999; max-width: 280px; }
.foot-col h4 {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: #999; margin: 0 0 18px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { border-bottom: 1px solid transparent; transition: border-color 200ms; }
.foot-col a:hover { border-bottom-color: #DADADA; }
.foot-disclaimer { color: #888; font-size: 12.5px; line-height: 1.65; }
.foot-bottom {
  border-top: 1px solid #222;
  margin-top: 56px; padding-top: 28px;
  display: flex; justify-content: space-between; gap: 18px;
  color: #777; font-size: 12.5px;
  flex-wrap: wrap;
}
.foot-bottom .links { display: flex; gap: 22px; }

/* ─── responsive ─────────────────────────────────────────── */
@media (max-width: 880px) {
  nav.primary { display: none; }
  .nav-burger { display: inline-flex; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .foot-brand, .foot-disclaimer { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-bottom { flex-direction: column; gap: 14px; }
}